/* Cups page only. Every class here is local to this page, so nothing collides with styles.css. */

/* ---------- jump links: small tags hung on the page-head panel (same pattern as tags.css) ---------- */
.plate nav{margin:1.6rem 0 0;width:auto;display:block}
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem .9rem;margin:0;padding:0}
.jump a.tag{font-size:.9rem;padding:.55em 1.9em;text-decoration:none;max-width:100%}
.jump a.tag:hover{filter:brightness(1.3)}
.jump .hole{width:.5em;height:.5em}

/* ---------- two-column sections ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:2rem;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose h3{margin-top:1.6rem}
.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:.9rem}
.prose a,.after a,.fine a{font-weight:600}

/* ---------- side view of a cup wall: the laser takes the coat off and the steel shows ---------- */
.xs-wrap{--xs-ink:#16181A;--xs-steel:#C9CDCC;--xs-edge:#5C6366;--xs-coat:#1E2F52;--xs-coat-edge:rgba(0,0,0,.4)}
/* dark panel: a lighter coat and a light edge keep the coat readable against it (the edge is about 6:1, the fill about 2:1) */
@media (prefers-color-scheme:dark){.xs-wrap{--xs-ink:#EDEFEE;--xs-coat:#4A6FB5;--xs-coat-edge:#C3CDE6}}
.xs{display:block;width:100%;max-width:25rem;height:auto;margin-inline:auto;overflow:visible}
.xs-steel{fill:var(--xs-steel);stroke:var(--xs-edge);stroke-width:1}
.xs-coat{fill:var(--xs-coat);stroke:var(--xs-coat-edge);stroke-width:1}
/* the cleared strip is panel-colored, so it reads as coat that is gone; it is fully clear unless the laser is firing */
.xs-gap{fill:var(--panel);transform-box:fill-box;transform-origin:0 50%}
.xs-head{fill:var(--char);stroke:var(--bone);stroke-width:1}
.xs-cone{fill:var(--orange);opacity:.92;stroke:rgba(22,24,26,.55);stroke-width:1}
.xs-hot{fill:#FFE2B0;filter:drop-shadow(0 0 2px #F99F38) drop-shadow(0 0 5px #F99F38)}
.xs-lead{fill:none;stroke:var(--xs-ink);stroke-width:1}
.xs text{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;fill:var(--xs-ink)}
/* Fire the laser: the beam sweeps left to right and the coat clears behind it */
.xs-wrap.engrave .xs-gap{animation:xs-clear 1.6s .2s linear both}
.xs-wrap.engrave .xs-beam{animation:xs-sweep 1.6s .2s linear both}
@keyframes xs-clear{0%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
@keyframes xs-sweep{0%{transform:translateX(-50px)}85%{transform:translateX(50px)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.xs-wrap.engrave .xs-gap,.xs-wrap.engrave .xs-beam{animation:none}}
/* phones: the drawing is scaled to about 0.7, so give the labels more size and the drawing more width */
@media (max-width:420px){#engraving .stage{padding-inline:.5rem}.xs text{font-size:17px}}

/* ---------- list with small orange tags as markers ---------- */
.plist{list-style:none;margin:0 0 1.25rem;padding:0;border-top:1px solid var(--line)}
.plist li{position:relative;padding:.6rem 0 .6rem 2rem;border-bottom:1px solid var(--line);max-width:62ch}
.plist li::before{content:"";position:absolute;left:0;top:1.02rem;width:1.15rem;height:.72rem;border-radius:2px;
  background:radial-gradient(circle at .26rem 50%,var(--t-black) 0 .09rem,transparent .1rem),var(--orange);
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* ---------- bring or ship ---------- */
.after{margin:2rem 0 0}

/* ---------- artwork rows reuse the site's tag-and-text list; keep the tag text on one line ---------- */
.rules .tag{white-space:nowrap}

/* ---------- example name list, on a panel like the cup preview ---------- */
.sheet{margin:0;background:var(--panel);border-radius:8px;padding:clamp(1rem,3.5vw,2rem);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.sheet table{width:100%;border-collapse:collapse;background:var(--surface);color:var(--ink);font-size:1rem;box-shadow:0 0 0 1px var(--panel-edge)}
.sheet caption{caption-side:top;text-align:left;margin:0 0 .8rem;font:600 1.12rem/1.2 var(--display);letter-spacing:.035em;text-transform:uppercase;color:#16181A}
.sheet th{background:var(--char);color:var(--bone);font:600 .85rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:.6rem .75rem}
.sheet td{padding:.65rem .75rem;border-top:1px solid var(--line);overflow-wrap:break-word;vertical-align:top}
.sheet td:first-child{white-space:nowrap}
.sheet figcaption{margin:1rem 0 0;font-size:.95rem;color:#16181A}
@media (prefers-color-scheme:dark){.sheet caption,.sheet figcaption{color:#EDEFEE}}
@media (max-width:480px){.sheet table{font-size:.9rem}.sheet th,.sheet td{padding:.55rem .45rem}}

/* ---------- closing prompt ---------- */
#send{padding-block:clamp(2.25rem,5vw,3.5rem) clamp(3rem,7vw,5rem)}
#send .cta{margin-top:1.4rem}