/* © 2026 William C. Chesher. All Rights Reserved.
   bench.css - the bench site's components, reading only the tokens. The page rhythm follows
   spawn's (hero -> bands -> mono footer), in bench's identity. */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--side); }
.band { padding: clamp(56px, 8vw, 88px) 0 0; }
.band-first { padding-top: clamp(40px, 6vw, 64px); }
h1, h2 { text-shadow: none; }
h2 { font-size: clamp(24px, 3.6vw, 38px); font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; max-width: 26ch; line-height: 1.12; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.lead { font-size: clamp(16px, 2.1vw, 19px); color: var(--ink-2); max-width: 56ch; margin: 0 0 8px; }
.lead .p2 { color: var(--blue-lt); font-weight: 600; }

/* ---- hero ---- */
.hero { padding-top: clamp(12px, 3vw, 28px); }

.hero-go { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.btn.big { font-size: 15.5px; padding: 12px 24px; border-radius: 12px; }
.btn.outline { color: var(--ink); background: transparent; border-color: rgba(255, 255, 255, .18); }
.btn.outline:hover { border-color: var(--orange); color: var(--orange-lt); }
.btn.quiet { color: var(--ink-2); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.btn.quiet:hover { color: var(--ink); border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); }
.wordmark { font-family: var(--wordmark); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.wordmark .mark { height: 30px; width: auto; filter: drop-shadow(0 0 10px rgba(255, 138, 30, .35)); }
.wordmark .bit { font-family: var(--mono); font-size: 12px; color: var(--orange); opacity: .7; margin-left: -4px; vertical-align: super; }
.btn { display: inline-block; font-family: var(--disp); font-weight: 600; font-size: 14px; text-decoration: none; padding: 9px 18px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; transition: box-shadow .2s var(--ease), transform .1s var(--ease); }
.btn.primary { background: linear-gradient(100deg, var(--orange), var(--orange-lt)); color: var(--orange-ink); box-shadow: 0 0 24px -6px var(--orange); }
.btn.primary:hover { box-shadow: 0 0 32px -4px var(--orange); }
.btn.primary:active { transform: translateY(1px); }
h1 { font-size: clamp(44px, 9vw, 92px); line-height: .95; font-weight: 800; letter-spacing: -.025em; margin: .08em 0 .28em; }
h1 .l1 { color: var(--ink); }

/* ---- THE SPLASH (index.html): the family's first screen, spawn's and glitch!'s shape in bench's identity ----
   One centred stack that fills the screen: the stage, the lockup at display size, the line, the lede, the way in.
   Every size is held to the viewport's height as well as its width, so the whole splash fits a Chromebook's
   1366 x 768. The stage is bench's own mark come alive: its hammer, a 3D solid drawn in 0s and 1s (hero.js). */
.splash { position: relative; isolation: isolate; touch-action: pan-y; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(44% 40% at 50% 46%, rgba(255, 138, 30, .10), transparent 72%),
    radial-gradient(56% 46% at 50% 100%, rgba(46, 155, 255, .12), transparent 72%); }
.splash > .wrap { width: 100%; }
/* the house seam along its foot: player one into player two */
.splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: var(--genesis); opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.splash-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--side) clamp(48px, 8vh, 88px); }

/* the forge (Maestro, 2026-11-06, with spawn's hero beside it: "make bench front page layout and elegance match this and
   format", then of the stage: "falling bits and higher res object" / "like ridiculously high res"). Where spawn
   instances a character on a lit pad, bench's splash rains 0s and 1s, and each tool is built out of the bits that land
   in place, drawn in cells finer than anywhere else on bench. hero.js draws the whole splash's canvas: the rain and the
   tool. The heap is the only light on the floor: the glow where the bits land. Its plate names the tool, as spawn's
   names the character. */
.bits-field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.forge { --char: clamp(182px, 30.8vh, 376px);   /* 14% over 160/27vh/330 (Maestro, 2026-11-06: "make the tool part of the hero 14% larger") */ position: relative; flex: none; width: min(100%, calc(var(--char) * 2.2));
  height: calc(var(--char) * 1.12); margin-bottom: clamp(6px, 1.6vh, 24px); }
.forge .heap { position: absolute; left: 50%; bottom: 6%; width: calc(var(--char) * .9); height: calc(var(--char) * .12); transform: translate(-50%, 50%);
  z-index: -2; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 138, 30, .34), rgba(255, 138, 30, .08) 60%, transparent); }
.forge.forging .heap { animation: forging 900ms var(--ease) both; }
@keyframes forging { 0% { opacity: .4; transform: translate(-50%, 50%) scaleX(.6); } 100% { opacity: 1; transform: translate(-50%, 50%) scaleX(1); } }
.forge .plate { position: absolute; left: 0; right: 0; top: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap;   /* centred without a transform: its rise animation ends on transform: none */
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); pointer-events: none; animation: rise 520ms var(--ease) 700ms both; }
.forge .plate .p1 { padding: 3px 6px 2px; background: var(--orange); color: var(--orange-ink); font-weight: 700; letter-spacing: .12em; }

/* the lockup: the house mark and the wordmark at display size, spawn's size, ending on player one's point */
.splash-logo { --logo: min(16vw, 15.5vh, 190px); display: flex; align-items: center; justify-content: center; gap: .18em; margin: 0;
  font: 700 var(--logo)/1 var(--wordmark); letter-spacing: -.035em; color: var(--ink); animation: rise 520ms var(--ease) 60ms both; }
.splash-logo .mark { width: auto; height: .74em; filter: drop-shadow(0 0 .14em rgba(255, 138, 30, .4)); }
.splash-logo .wm { display: inline-flex; align-items: baseline; padding-bottom: .06em; text-shadow: 0 0 60px rgba(255, 138, 30, .22), 0 0 .3em rgba(91, 178, 255, .12); }
.splash-logo .pt { display: inline-block; flex: none; width: .17em; height: .17em; margin-left: .05em; background: var(--blue-lt); box-shadow: 0 0 .2em rgba(46, 155, 255, .5); }   /* blue, as the cursor (Maestro, 2026-11-06: "and the period") */

.hero-copy { display: flex; flex-direction: column; align-items: center; margin-top: clamp(22px, 4.6vh, 64px); }
.hero-copy > * { animation: rise 520ms var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 120ms; }
.hero-copy > :nth-child(3) { animation-delay: 220ms; }
.hero-copy > :nth-child(4) { animation-delay: 300ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.splash h1 { margin: 0; font: 700 min(clamp(28px, 3.2vw, 50px), 8.6vw, 6vh)/1.04 var(--disp); letter-spacing: -.035em; text-shadow: 0 0 40px rgba(91, 178, 255, .2); }
.splash h1 .l1, .splash h1 .l2 { white-space: nowrap; }
.splash h1 .l2 { display: inline-block; padding-bottom: .06em;}
.lede { margin: clamp(12px, 2.4vh, 22px) 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: balance; }
.splash .lede { margin-top: clamp(16px, 2.8vh, 28px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 32em; }
.lede .p2 { color: var(--blue-lt); font-weight: 600; }
.lede b, .lead b { font-family: var(--mono); font-size: .88em; font-weight: 600; }
.lede b.w { color: var(--amber); } .lede b.d { color: var(--orange-lt); }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin: clamp(28px, 5vh, 56px) 0 0; }
/* a short screen (a Chromebook's 768) gives the larger tool its room out of the gaps, so the splash still fits one screen */
@media (max-height: 820px) { .hero-copy { margin-top: clamp(12px, 2vh, 64px); } .ctas { margin-top: clamp(20px, 3.2vh, 56px); } }

/* spawn's arrangement (Maestro, 2026-11-06, with spawn's hero beside bench's: "move these around" / "like spawn" / "yes
   match spawn"): the top runs edge to edge, the motto at the left where the wordmark was (the lockup under it is the
   name), the places and sign in at the right; the count of tools forged alone at the foot, right */
.splash > .wrap { max-width: none; padding: 0 clamp(16px, 4vw, 60px); }
@media (min-width: 901px) {   /* narrower, the motto steps aside and the bar keeps its wordmark, as on every other page */
  .splash .bar { justify-content: flex-end; }
  .splash .bar .wordmark { display: none; }
  .splash .bar-nav { margin-right: 0; }
}
.splash-motto { position: absolute; top: 16px; left: clamp(16px, 4vw, 60px); height: 38px; margin: 0; display: flex; align-items: center; gap: 12px;
  font: 400 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; }
.splash-motto::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange)); }
.splash-foot { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: flex-end; gap: 16px;
  padding: 0 clamp(16px, 4vw, 60px); font: 400 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; }
.splash-foot .count { letter-spacing: .26em; text-transform: uppercase; }
.splash-foot .count b { color: var(--ink-2); font-weight: 600; letter-spacing: .08em; }

@media (max-width: 900px) { .splash-motto { display: none; } }
@media (max-width: 640px) { .splash-foot { justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .hero-copy > *, .forge .plate { animation: none !important; }
  .forge.forging .heap { animation: none; }
}

/* the seam between sections: an ASCII divider in the house's 0s and 1s */
.seam-ascii { display: flex; justify-content: center; align-items: center; gap: 12px; margin: clamp(48px, 7vw, 80px) 0 0; overflow: hidden;
  white-space: nowrap; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-faint); opacity: .55; }
.seam-ascii span { flex: 1 1 0; min-width: 0; overflow: hidden; }
.seam-ascii span:first-child { text-align: right; direction: rtl; }
.seam-ascii b { flex: none; font-weight: 600; color: var(--orange); opacity: .9; }
/* ---- the build stage ---- */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; }
@media (max-width: 820px) { .stage { grid-template-columns: minmax(0, 1fr); } }  /* minmax(0, ...): the code scrolls inside its box instead of widening the page */
.field { margin-bottom: 18px; }
.flabel { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .pill { padding: 6px 11px; } }
.pill { font-family: var(--mono); font-size: 12px; text-transform: lowercase; letter-spacing: .03em; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-dim); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: all .15s var(--ease); }
.pill.on { color: var(--orange-ink); font-weight: 600; background: linear-gradient(100deg, var(--orange), var(--orange-lt)); border-color: var(--orange); box-shadow: 0 0 22px -6px var(--orange); }

.blocks { display: flex; flex-direction: column; }
.block { --accent: var(--orange); font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--ink); padding: 14px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: 0 0 22px -12px var(--accent); }
.block.when { --accent: var(--amber); }
.block::before { content: ""; width: 8px; align-self: stretch; border-radius: 5px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.block .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--accent) 70%, white); flex: 0 0 auto; }
.block select { font: inherit; flex: 1 1 auto; min-width: 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); padding: 2px 2px 4px; cursor: pointer; }
.block select option { background: var(--panel); color: var(--ink); }
.socket { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 7px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
[hidden] { display: none !important; }  /* a class display: rule otherwise overrides the attribute */
.socket input[type="number"], .socket .txt { font-family: var(--mono); font-size: 13px; width: 72px; color: var(--ink); background: transparent; border: 0; outline: none; }
.socket .txt { width: 96px; }
.swatch { width: 30px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.feed { width: 2px; height: 18px; margin-left: 19px; background: linear-gradient(var(--amber), var(--orange)); opacity: .6; }

.mirror { margin-top: 22px; display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.mirror .mlabel { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-dim); }
.pixels { display: flex; gap: 8px; }
.px { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); transition: all .12s var(--ease); }
.screen { font-family: var(--mono); font-size: 15px; color: var(--mint); padding: 6px 14px; border-radius: 6px; background: #06130f; border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); }
.note { font-family: var(--mono); font-size: 15px; color: var(--blue-lt); }

/* ---- the code room ---- */
.code { background: #070a12; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-family: var(--mono); font-size: 13px; }
.code .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.code .bar .dot-o { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); flex: none; }
.code .bar .ro { margin-left: auto; color: var(--ink-faint); letter-spacing: .02em; text-transform: none; }
.code pre { margin: 0; padding: 14px 0; overflow-x: auto; }
.stage-go { margin: 12px 2px 0; font-size: 14px; color: var(--ink-dim); }
.stage-go a { color: var(--orange-lt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.stage-go a:hover { text-decoration: underline; }
.code .ln { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; }
.code .g { color: var(--ink-faint); text-align: right; padding-right: 14px; user-select: none; }
.code .c { white-space: pre; line-height: 1.7; }
.kw { color: var(--orange-lt); } .fn { color: var(--blue-lt); } .st { color: var(--mint); } .cm { color: var(--ink-faint); }

/* ---- how it works: one composed grid (spawn's bento). The four steps in the studio's order, player two the tall
   cell beside them. The steps' colours walk amber (when) to mint (running). ---- */
.band.how { padding-top: clamp(48px, 6vw, 80px); }
.band.how h2 { margin: 8px 0 0; max-width: 18ch; font: 700 clamp(34px, 4vw, 52px)/1.02 var(--disp); letter-spacing: -.04em; text-shadow: 0 0 40px rgba(91, 178, 255, .16); }
.bento { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "s1 s2 two two" "s3 s4 two two"; }
.bento .loop { display: contents; list-style: none; margin: 0; padding: 0; }
.cell { position: relative; min-width: 0; overflow: hidden; padding: 22px 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
  transition: border-color var(--fast) var(--ease); }
.cell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c, var(--orange)), transparent 75%); }
.cell:hover { border-color: color-mix(in srgb, var(--c, var(--orange)) 40%, var(--line)); }
.step.s1 { grid-area: s1; --c: var(--amber); }
.step.s2 { grid-area: s2; --c: var(--orange-lt); }
.step.s3 { grid-area: s3; --c: var(--orange); }
.step.s4 { grid-area: s4; --c: var(--mint); }
.step .n { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 12px/1 var(--mono); color: var(--c); }
.step .n::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--c); box-shadow: 0 0 14px -2px var(--c); }
.step h3 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 6px; }
.step p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.two { grid-area: two; --c: var(--blue); display: flex; flex-direction: column; gap: 12px;
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: radial-gradient(70% 60% at 90% 100%, rgba(46, 155, 255, .14), transparent 75%), var(--panel); }
.two .eyebrow { margin: 0; }
.two h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -.025em; }
.two .say { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 36em; text-wrap: pretty; }
.thread { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--void);
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line)); box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--blue) 45%, transparent); }
.chat { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.45; }
.chat .who { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.chat.you { align-self: flex-end; max-width: 80%; background: var(--panel-2); border: 1px solid var(--line); }
.chat.you .who { color: var(--orange); }
.chat.p2 { background: rgba(46, 155, 255, .1); }
.chat.p2 .who { color: var(--blue-lt); }
.chat .msg { color: var(--ink-2); }
.chat .msg b { color: var(--ink); font-family: var(--mono); font-size: 13px; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "s1 s2" "s3 s4" "two two"; } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s1" "s2" "s3" "s4" "two"; } }

/* ---- footer ---- */
.btn:focus-visible, .stage-go a:focus-visible, footer.foot a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
footer.foot { padding: 64px 0 56px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); }
/* the front page's footer, spawn's: what bench does with your work beside the way in and each role's guide, then the
   credits and the copyright, small, under a hairline */
footer.foot.home { margin-top: clamp(40px, 5vw, 72px); padding: 0 0 40px; border-top: 1px solid var(--line); letter-spacing: 0;
  background: radial-gradient(40% 120% at 0% 100%, rgba(255, 138, 30, .07), transparent 70%), radial-gradient(40% 120% at 100% 0%, rgba(46, 155, 255, .07), transparent 70%); }
footer.foot.home .foot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 48px; padding-top: clamp(32px, 4vw, 48px); }
footer.foot.home .foot-say { margin: 0; max-width: 46em; font: 400 14px/1.6 var(--disp); color: var(--ink-2); }
footer.foot.home .foot-go { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
footer.foot.home nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
footer.foot.home a:not(.btn) { color: var(--ink-dim); text-decoration: none; }
footer.foot.home a:not(.btn):hover { color: var(--ink); }
footer.foot.home .foot-small { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(32px, 4vw, 48px); text-align: center; font-size: 11px; letter-spacing: .02em; }
footer.foot.home .credit { max-width: 90em; line-height: 1.6; }
@media (max-width: 720px) { footer.foot.home .foot-row { grid-template-columns: minmax(0, 1fr); } footer.foot.home .foot-go { align-items: flex-start; } footer.foot.home nav { justify-content: flex-start; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the inner pages' backdrops (backdrops.js): a band behind the bar and the heading that fades out before the content */
.backdrop { position: absolute; top: 0; left: 0; width: 100%; height: min(520px, 72vh); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }