/* Hallmark · macrostructure: Manifesto · nav: N7 brutal slab · footer: Ft4 dense typographic
 * genre: editorial (poster) · theme: custom (school-poster riso: cream, marker red, ink blue, mustard)
 * differs from v1/v2 on: display style (heavy grotesk vs slab/soft-serif), structure (declaration bands vs units/grid)
 * signature: the numbered rule stack — thick black rules with mono numerals as section dividers
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 */
:root{
  --c-paper:#FFFDF5;
  --c-ink:#111111;
  --c-red:#CC3227;
  --c-blue:#1B3FD8;
  --c-mustard:#F5C518;
  --c-teal:#00705F;
  --c-mute:#5B5B54;
  --f-display:"Archivo Black",Impact,sans-serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --f-label:"Space Mono",ui-monospace,monospace;
  --gut:clamp(1rem,3.6vw,2.75rem);
  --band:clamp(2.75rem,5.5vw,4.5rem);
  --max:80rem;
  --bw:3px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-paper);color:var(--c-ink);
  font-family:var(--f-body);font-size:clamp(1rem,0.4vw+0.95rem,1.08rem);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Sticky footer. Short pages (/404 left ~600px of dead space below it on a
     tall viewport, /profile ~50px) let the footer ride up mid-screen. Every
     page renders TopBar + <main> + Footer as body's three children, so making
     body a full-height column and letting <main> absorb the slack pins the
     footer everywhere at once — including the auth-gated pages. vh first as the
     fallback, then dvh so mobile browser chrome doesn't overshoot. */
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
/* flex-grow to fill, flex-shrink 0 so a long page is never compressed. */
body > main{flex:1 0 auto}
h1,h2,h3{font-family:var(--f-display);font-style:normal;font-weight:400;margin:0;line-height:0.94;
  letter-spacing:-0.02em;text-transform:uppercase;overflow-wrap:anywhere;min-width:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
a{color:var(--c-blue)}
:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-label);font-weight:700;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase}

/* Every white card pins its own ink color. These are dropped inside colored
   bands (`.four` sits in a blue band on the home page), where the band's light
   `color` would otherwise be inherited straight onto white — headings set no
   color of their own, so they went white-on-white and vanished. Paragraph-level
   rules mostly set --c-mute explicitly, which is why the headings were the ones
   that disappeared. */
.four,.slot,.stats,.toolbar,.note,.ticket,.build,.lb,.pod,.empty,.prizes .prize{color:var(--c-ink)}

/* N7 · brutal slab nav */
.nav{border-bottom:var(--bw) solid var(--c-ink);background:var(--c-paper);position:sticky;top:0;z-index:30}
.nav__in{display:flex;align-items:center;gap:1.1rem;padding-block:0.85rem;flex-wrap:wrap}
.nav__mark{font-family:var(--f-display);font-size:1rem;text-transform:uppercase;letter-spacing:-0.01em;
  color:var(--c-ink);text-decoration:none;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav__links{display:flex;gap:1.2rem;margin-left:auto}
.nav__links a{font-family:var(--f-label);font-weight:700;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--c-ink);text-decoration:none;white-space:nowrap}
.nav__links a:hover{color:var(--c-red)}
.nav__links a[aria-current="page"]{color:var(--c-red);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px}
/* signed-in avatar menu. Deliberately a <details>, NOT a JS-driven popup: the
   open/close state, keyboard activation, and Escape-to-close are native, and
   the only script left is closing on an outside click. It sits OUTSIDE
   .nav__links because that row becomes an overflow-x:auto scroller under
   900px, which would clip the dropdown. Both [hidden] rules are load-bearing —
   an author `display` beats the UA's [hidden]{display:none}. */
.nav__end{display:flex;align-items:center;gap:0.9rem}
.nav__links a[hidden]{display:none}
.nav__acct{position:relative;flex:none}
.nav__acct[hidden]{display:none}
.nav__ava{width:1.85rem;height:1.85rem;border:2px solid var(--c-ink);background:#fff;
  display:grid;place-items:center;overflow:hidden;cursor:pointer;list-style:none}
.nav__ava::-webkit-details-marker{display:none}
.nav__ava img{width:100%;height:100%;object-fit:cover;display:block}
.nav__ava span{font-family:var(--f-display);font-size:0.68rem;line-height:1;color:var(--c-red)}
.nav__ava:hover,.nav__acct[open] .nav__ava{border-color:var(--c-red)}
.nav__menu{position:absolute;right:0;top:calc(100% + 0.6rem);z-index:40;min-width:11rem;
  display:flex;flex-direction:column;background:var(--c-paper);
  border:var(--bw) solid var(--c-ink);box-shadow:5px 5px 0 var(--c-ink)}
.nav__menu-who{font-family:var(--f-label);font-weight:700;font-size:0.62rem;letter-spacing:0.08em;
  color:var(--c-mute);padding:0.55rem 0.8rem;max-width:14rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__menu a,.nav__menu button{font-family:var(--f-label);font-weight:700;font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--c-ink);text-decoration:none;white-space:nowrap;text-align:left;
  background:none;border:0;border-top:2px solid var(--c-ink);padding:0.6rem 0.8rem;cursor:pointer}
.nav__menu a:hover,.nav__menu button:hover{background:var(--c-mustard)}
.nav__menu button:disabled{opacity:0.5;cursor:default;background:none}
.btn{display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;
  font-family:var(--f-label);font-weight:700;font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.8rem 1.1rem;border:var(--bw) solid var(--c-ink);background:var(--c-mustard);color:var(--c-ink);
  text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--c-ink);
  transition:transform .1s ease,box-shadow .1s ease,background .14s ease;flex:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c-ink);background:#fff}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--c-ink)}
.btn--red{background:var(--c-red);color:#fff}
.btn--red:hover{background:var(--c-ink);color:#fff}
.btn--paper{background:var(--c-paper)}
.nav .btn{padding:0.6rem 0.85rem;box-shadow:3px 3px 0 var(--c-ink)}

/* signature: numbered rule stack */
.rulehead{display:flex;align-items:flex-end;gap:0.9rem;border-bottom:var(--bw) solid var(--c-ink);
  padding-bottom:0.5rem;margin-bottom:1.75rem}
.rulehead b{font-family:var(--f-label);font-weight:700;font-size:1.5rem;line-height:1;color:var(--c-red)}
.rulehead span{font-family:var(--f-label);font-weight:700;font-size:0.72rem;letter-spacing:0.16em;
  text-transform:uppercase;padding-bottom:0.15rem}

/* hero */
.hero{padding-block:var(--band);border-bottom:var(--bw) solid var(--c-ink)}
.hero__top{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin-bottom:1.5rem}
.pill{font-family:var(--f-label);font-weight:700;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  border:2px solid var(--c-ink);padding:0.35rem 0.65rem;background:#fff}
.pill--blue{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
.hero h1{font-size:clamp(3rem,12.5vw,8.5rem);letter-spacing:-0.04em}
.hero h1 em{font-style:normal;color:var(--c-red);display:block}
.hero h1 u{text-decoration:none;-webkit-text-stroke:2px var(--c-ink);color:transparent;display:block}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);
  margin-top:2rem;align-items:start}
.lede{font-family:var(--f-display);font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.02;text-transform:uppercase;
  letter-spacing:-0.02em}
.lede mark{background:var(--c-mustard);padding:0 0.15em}
.copy{margin-top:1.15rem;max-width:48ch;font-size:1.02rem}
.invite{margin-top:1.25rem;max-width:46ch;padding:0.9rem 1.05rem;background:#fff;
  border:2px solid var(--c-ink);font-size:0.93rem;box-shadow:4px 4px 0 var(--c-blue)}
.cta{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:1.75rem}

/* august ticket */
.ticket{border:var(--bw) solid var(--c-ink);background:#fff;box-shadow:6px 6px 0 var(--c-red)}
.prize p,.four p,.slot p{color:#4F4F49}
.ticket__hd{display:flex;justify-content:space-between;gap:0.75rem;padding:0.7rem 0.95rem;
  border-bottom:2px solid var(--c-ink);background:var(--c-ink);color:var(--c-paper)}
.ticket__bd{padding:0.95rem}
.aug{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0.25rem}
.aug i{aspect-ratio:1;border:2px solid var(--c-ink);background:var(--c-mustard);
  display:grid;place-items:center;font-family:var(--f-label);font-weight:700;font-size:0.58rem;font-style:normal}
/* Day 31 is the 31st of 31 in a six-wide grid, so it spans the final row
   rather than sitting alone in the corner. */
.aug i:last-child{grid-column:1/-1;aspect-ratio:auto;padding-block:0.32rem}
.ticket__ft{padding:0.75rem 0.95rem;border-top:2px dashed var(--c-ink);font-size:0.85rem}

/* declaration band */
.band{border-bottom:var(--bw) solid var(--c-ink);padding-block:var(--band)}
.band--blue{background:var(--c-blue);color:#fff}
.band--blue .mono{color:#EDF1FF}
.band--red{background:var(--c-red);color:#fff}
.band--ink{background:var(--c-ink);color:var(--c-paper)}
.band h2{font-size:clamp(1.9rem,5.5vw,3.4rem)}
.band .lead{margin-top:1.1rem;max-width:58ch;color:var(--c-mute)}
/* Every colored band's lead has to be listed here, AFTER `.band .lead` above —
   the two selectors have equal specificity, so an override placed earlier
   silently loses and the lead renders in --c-mute on a saturated background. */
.band--ink .lead,.band--red .lead,.band--blue .lead{color:#F4F2EA}

/* Colored bands invert the numbered rule stack: the black hairline and ink
   numeral would otherwise disappear into the band. Handled here so band markup
   doesn't need the per-rulehead inline `style="border-color:…"` overrides it
   used to carry. */
.band--blue .rulehead,.band--red .rulehead,.band--ink .rulehead{border-bottom-color:currentColor}
.band--blue .rulehead b,.band--red .rulehead b,.band--ink .rulehead b{color:var(--c-mustard)}

/* format blocks */
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:0;
  border:var(--bw) solid var(--c-ink);margin-top:1.9rem;background:#fff}
.four > div{padding:1.35rem;border-right:2px solid var(--c-ink)}
.four > div:last-child{border-right:0}
.four h3{font-size:1.05rem;margin-top:0.85rem}
.four p{margin-top:0.45rem;font-size:0.9rem;color:var(--c-mute)}
.four svg{width:1.5rem;height:1.5rem;stroke:var(--c-red);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* steps as poster rows */
.steps{counter-reset:s;margin-top:1.9rem;border-top:2px solid currentColor}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem minmax(0,10rem) minmax(0,1fr);
  gap:1rem;align-items:baseline;padding-block:1rem;border-bottom:2px solid currentColor}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-label);font-weight:700;font-size:1.05rem}
.steps b{font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase}
.steps span{font-size:0.95rem;opacity:0.8}

/* prizes */
.prizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin-top:1.9rem}
.prize{background:var(--c-paper);color:var(--c-ink);border:var(--bw) solid var(--c-ink);padding:1.35rem;
  box-shadow:6px 6px 0 var(--c-ink)}
.prize:first-child{box-shadow:6px 6px 0 var(--c-mustard)}
.prize b{display:block;font-family:var(--f-display);font-size:2.5rem;line-height:0.95;letter-spacing:-0.03em}
.prize .u{display:block;font-family:var(--f-label);font-weight:700;font-size:0.62rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--c-mute);margin-top:0.5rem}
.prize h3{margin-top:1rem;font-size:1rem}
.prize p{margin-top:0.4rem;font-size:0.9rem;color:var(--c-mute)}
.flag{margin-top:1.6rem;padding:0.95rem 1.1rem;background:var(--c-mustard);color:var(--c-ink);
  border:var(--bw) solid var(--c-ink);font-size:0.94rem;font-weight:600}

/* ideas as a dense list */
.ideas{margin-top:1.9rem;border-top:2px solid var(--c-ink);
  columns:2;column-gap:2rem}
.ideas li{padding-block:0.6rem;border-bottom:2px solid var(--c-ink);break-inside:avoid}
.ideas b{font-family:var(--f-label);font-weight:700;font-size:0.9rem}
.ideas span{display:block;font-size:0.86rem;color:var(--c-mute)}

/* wall */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin-top:1.9rem}
.slot{border:var(--bw) solid var(--c-ink);padding:1.35rem;background:#fff}
.slot h3{font-size:1.05rem;margin-top:0.6rem}
.slot p{margin-top:0.5rem;font-size:0.92rem;color:var(--c-mute)}
.rank{margin-top:1rem;border-top:2px solid var(--c-ink)}
.rank li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:0.7rem;align-items:center;
  padding-block:0.62rem;border-bottom:2px solid var(--c-ink);font-size:0.9rem;color:var(--c-mute)}
.rank i{font-family:var(--f-label);font-weight:700;font-style:normal;font-size:0.76rem;color:var(--c-red)}
.rank em{font-style:normal;font-family:var(--f-label);font-size:0.76rem}
.rank b{font-family:var(--f-body);font-weight:700;color:var(--c-ink);font-size:0.9rem}

/* closing */
.close{padding-block:var(--band);background:var(--c-mustard);border-bottom:var(--bw) solid var(--c-ink)}
.close h2{font-size:clamp(2.2rem,7vw,4.6rem);max-width:22ch}
.close p{margin-top:1.15rem;max-width:52ch}

/* Ft4 · typographic footer (layout lives in Footer.astro's scoped styles) */
footer{background:var(--c-ink);color:var(--c-paper);padding-block:2rem}
footer a{color:var(--c-mustard);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ============================================================
 * sub-page masthead — smaller sibling of the hero
 * ============================================================ */
.phead{padding-block:clamp(2.25rem,4.5vw,3.5rem);border-bottom:var(--bw) solid var(--c-ink)}
.crumb{font-family:var(--f-label);font-weight:700;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--c-mute);margin-bottom:1.1rem}
.crumb a{color:var(--c-ink);text-decoration:none;border-bottom:2px solid var(--c-red)}
.crumb a:hover{color:var(--c-red)}
.phead h1{font-size:clamp(2.6rem,9vw,6rem);letter-spacing:-0.035em}
.phead h1 em{font-style:normal;color:var(--c-red)}
.phead__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.75rem);
  margin-top:1.6rem;align-items:end}
.phead__lead{max-width:52ch;font-size:1.02rem;color:#3F3F3A}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,7rem),1fr));gap:0;
  border:var(--bw) solid var(--c-ink);background:#fff}
.stats div{padding:0.85rem 0.95rem;border-right:2px solid var(--c-ink)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--f-display);font-size:1.9rem;line-height:0.95;letter-spacing:-0.03em}
.stats span{display:block;font-family:var(--f-label);font-weight:700;font-size:0.58rem;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--c-mute);margin-top:0.35rem}
.note{margin-top:1.6rem;padding:0.85rem 1rem;background:#fff;border:2px solid var(--c-ink);
  box-shadow:4px 4px 0 var(--c-blue);font-size:0.9rem;max-width:64ch}
.note b{font-family:var(--f-label);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase}

/* ============================================================
 * showcase — toolbar, tiles, list
 * ============================================================ */
.toolbar{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:1.9rem;
  border:var(--bw) solid var(--c-ink);background:#fff;padding:0.7rem}
.toolbar > .mono{color:var(--c-mute);margin-right:0.2rem}
.chip{font-family:var(--f-label);font-weight:700;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  border:2px solid var(--c-ink);background:var(--c-paper);color:var(--c-ink);padding:0.42rem 0.68rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;
  transition:background .12s ease,color .12s ease}
.chip em{font-style:normal;font-size:0.6rem;color:var(--c-mute)}
.chip:hover{background:var(--c-mustard)}
.chip[aria-pressed="true"]{background:var(--c-ink);color:var(--c-paper)}
.chip[aria-pressed="true"] em{color:var(--c-mustard)}
.vtoggle{display:flex;margin-left:auto}
.vtoggle .chip{border-right-width:0}
.vtoggle .chip:last-child{border-right-width:2px}
.vtoggle svg{width:0.85rem;height:0.85rem;stroke:currentColor;stroke-width:2.4;fill:none}

.builds{margin-top:1.5rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr))}
.build{border:var(--bw) solid var(--c-ink);background:#fff;display:flex;flex-direction:column;
  box-shadow:5px 5px 0 var(--c-ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.build[hidden]{display:none}
.build:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--c-red)}
.build__thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  border-bottom:var(--bw) solid var(--c-ink)}
.build__thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(17,17,17,.14) 0 2px,transparent 2px 9px)}
.build__day{position:absolute;top:0;left:0;z-index:1;font-family:var(--f-label);font-weight:700;
  font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;background:var(--c-ink);color:var(--c-paper);
  padding:0.3rem 0.5rem;border-right:2px solid var(--c-ink);border-bottom:2px solid var(--c-ink)}
.build__glyph{width:3.6rem;height:3.6rem;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.t--static{background:var(--c-mustard);color:var(--c-ink)}
.t--interactive{background:var(--c-blue);color:#fff}
.t--game{background:var(--c-red);color:#fff}
.t--simulator{background:var(--c-teal);color:#fff}
.build__bd{padding:0.95rem;display:flex;flex-direction:column;gap:0.55rem;flex:1 1 auto}
.build__hd h3{font-size:1rem;line-height:1.05}
/* The card title and byline became links (previously the only link on a card
   was the outbound app URL, so /app/<id> and a builder's page had no way in).
   Both inherit their heading/label styling and only pick up an underline on
   hover, so the wall's density is unchanged. */
.build__title{color:inherit;text-decoration:none}
.build__title:hover{text-decoration:underline;text-decoration-thickness:2px}
a.build__by{text-decoration:none}
a.build__by:hover{text-decoration:underline}
.build__hd p{margin-top:0.35rem;font-size:0.88rem;color:var(--c-mute)}
.build__ft{margin-top:auto;padding-top:0.7rem;border-top:2px dashed var(--c-ink);
  display:flex;flex-wrap:wrap;gap:0.45rem 0.6rem;align-items:center}
.build__by{flex:1 1 auto;font-family:var(--f-label);font-weight:700;font-size:0.66rem;letter-spacing:0.04em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build__url{order:3;flex:1 1 100%;font-family:var(--f-label);font-size:0.6rem;color:var(--c-mute);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{order:2;font-family:var(--f-label);font-weight:700;font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;border:2px solid var(--c-ink);padding:0.18rem 0.4rem;background:var(--c-paper);flex:none}

/* list view — same DOM, horizontal rows */
.builds--list{grid-template-columns:minmax(0,1fr);gap:0;border:var(--bw) solid var(--c-ink);background:#fff}
.builds--list .build{flex-direction:row;align-items:stretch;border:0;border-bottom:2px solid var(--c-ink);
  box-shadow:none}
.builds--list .build:last-child{border-bottom:0}
.builds--list .build:hover{transform:none;box-shadow:none;background:#FFF8E1}
.builds--list .build__thumb{aspect-ratio:auto;width:4.75rem;flex:none;border-bottom:0;
  border-right:var(--bw) solid var(--c-ink)}
.builds--list .build__day{position:static;background:transparent;color:inherit;border:0;padding:0;
  font-size:0.86rem;letter-spacing:0.02em}
.builds--list .build__glyph{display:none}
.builds--list .build__bd{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.8rem 1.2rem;
  padding:0.8rem 0.95rem}
.builds--list .build__hd{flex:1 1 18rem}
.builds--list .build__ft{margin:0;padding:0;border-top:0;flex:1 1 20rem;justify-content:flex-end;gap:0.6rem}
.builds--list .build__by{flex:0 1 auto}
.builds--list .build__url{order:3;flex:0 1 11rem}
.empty{margin-top:1.5rem;border:var(--bw) dashed var(--c-ink);background:#fff;padding:2.25rem 1.35rem;
  text-align:center}
.empty h3{font-size:1.2rem}
.empty p{margin-top:0.6rem;font-size:0.92rem;color:var(--c-mute)}

/* ============================================================
 * leaderboard
 * ============================================================ */
/* Board-first: the full-standings section leads the page, so its heading
   block reads as the centerpiece rather than a left-aligned section intro.
   Scoped to `.board-band` (set on that section only) rather than `.band h2`
   /`.band--ink .lead` etc — those are shared by every other declaration band
   sitewide, including the homepage's own `.band--ink` board teaser. The
   board itself stays a left-to-right table and keeps full wrap width. */
.board-band .rulehead{justify-content:center}
.board-band h2{text-align:center}
.board-band .lead{text-align:center;margin-inline:auto}

.pods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin-top:1.9rem;
  align-items:end}
.pod{border:var(--bw) solid var(--c-ink);background:#fff;padding:1.2rem;box-shadow:6px 6px 0 var(--c-ink)}
.pod--1{background:var(--c-mustard);box-shadow:6px 6px 0 var(--c-red);padding-block:1.9rem}
.pod--2{padding-block:1.55rem}
.pod i{font-family:var(--f-label);font-weight:700;font-style:normal;font-size:0.68rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--c-red)}
.pod h3{margin-top:0.65rem;font-size:1.35rem}
.pod b{display:block;font-family:var(--f-display);font-size:2.9rem;line-height:0.9;letter-spacing:-0.03em;
  margin-top:0.85rem}
.pod span{display:block;font-family:var(--f-label);font-weight:700;font-size:0.6rem;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--c-mute);margin-top:0.4rem}
.pod ul{margin-top:0.9rem;border-top:2px solid var(--c-ink);font-size:0.85rem}
.pod li{padding-block:0.4rem;border-bottom:2px solid var(--c-ink);display:flex;justify-content:space-between;
  gap:0.6rem}
.pod li:last-child{border-bottom:0}
.pod li em{font-style:normal;font-family:var(--f-label);font-size:0.72rem;color:var(--c-mute)}
/* The winner's pod is mustard, not white, so the label colors the other two
   pods use fail AA against it: --c-red lands at 3.18:1 and --c-mute at 4.2:1.
   Both drop to a dark brown that reads as the same ink family at these sizes
   and clears 4.5:1.
   MUST stay below `.pod i` / `.pod span` / `.pod li em` above — these carry
   identical (0,1,1) specificity, so placed any earlier they silently lose on
   source order and the pod renders unchanged. */
.pod--1 i{color:#7A1D16}
.pod--1 span,.pod--1 li em{color:#4A4436}

/* The tabbed standings card (approved design reference). Replaces the original
   five-column `.board` table: the sort tabs ("Apps shipped" / "Day streak")
   and roster tabs (Community / Netlify team) live in the card's own header
   bars, and each row carries its face, its two numbers, and a link out to the
   builder instead of a share bar. Rows are ordered on the server — the tabs
   are plain links (see src/lib/leaderboardTabs.ts), so nothing here depends on
   JS being available. */
.lb{margin-top:1.9rem;border:var(--bw) solid var(--c-ink);background:#fff;box-shadow:8px 8px 0 var(--c-red)}
.lb__hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--c-mustard);border-bottom:var(--bw) solid var(--c-ink);padding:1.05rem 1.2rem}
.lb__title b{display:block;font-family:var(--f-display);font-size:1.35rem;line-height:1;
  text-transform:uppercase;letter-spacing:-0.01em}
/* --c-mute is a paper-background grey and drops to 3.5:1 on mustard; this is
   the same dark brown the winner's pod uses for its labels (4.5:1+). */
.lb__title span{display:block;margin-top:0.4rem;font-family:var(--f-label);font-weight:700;font-size:0.66rem;
  letter-spacing:0.07em;color:#4A4436}

/* Segmented tab group. Ink container with a paper-filled active segment, so
   the current view reads at a glance without relying on the underline the nav
   uses. `aria-current="page"` is both the a11y signal and the style hook —
   they can't drift apart. */
.segs{display:inline-flex;flex-wrap:wrap;border:var(--bw) solid var(--c-ink);background:var(--c-ink);
  box-shadow:4px 4px 0 var(--c-ink)}
.segs a{display:inline-flex;align-items:center;gap:0.42rem;font-family:var(--f-label);font-weight:700;
  font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;
  color:var(--c-paper);background:var(--c-ink);padding:0.62rem 0.9rem}
.segs a + a{border-left:2px solid var(--c-paper)}
.segs a:hover{background:#3A3A38}
.segs a[aria-current]{background:var(--c-paper);color:var(--c-ink)}
.segs a[aria-current]:hover{background:#fff}
.segs--sm a{font-size:0.62rem;padding:0.5rem 0.78rem}
.segs__dot{width:0.62rem;height:0.62rem;border:2px solid currentColor;border-radius:50%;
  background:var(--c-mustard);flex:0 0 auto}
.segs__dot--team{background:#3ECFA0}
.lb__filters{padding:0.85rem 1.2rem;border-bottom:var(--bw) solid var(--c-ink);background:#F1EEE1}
.lb__empty{margin:0;padding:2.2rem 1.2rem;text-align:center;font-size:0.95rem;color:var(--c-mute)}

.lb__rows{list-style:none;margin:0;padding:0}
.lbrow{display:grid;grid-template-columns:2.9rem 3rem minmax(0,1fr) auto auto;gap:0.9rem;align-items:center;
  padding:0.85rem 1.2rem;background:#F7F4EA;border-bottom:2px dashed #BFBAA8}
.lbrow:last-child{border-bottom:0}
/* The leader's row is the one white row, the way the reference lifts rank 1
   out of the cream stack. Community boards only — the staff tab has no rank
   1 to lift. */
.lbrow--lead{background:#fff}
.lbrow:hover{background:#FFF8E1}
.lbrow__rank{display:flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:50%;
  border:var(--bw) solid var(--c-ink);background:#fff;font-family:var(--f-label);font-weight:700;font-size:1rem}
.lbrow__rank--1{background:var(--c-mustard)}
.lbrow__rank--2,.lbrow__rank--3{color:var(--c-teal)}
/* Staff rows show a mark, not a number — the Netlify team tab is a roster and
   ranks are community-only (see src/lib/gameBoard.ts). */
.lbrow__rank--team::before{content:"";width:0.8rem;height:0.8rem;border-radius:50%;background:var(--c-teal)}
.lbrow__ava{width:3rem;height:3rem;flex:0 0 auto;border:2px solid var(--c-ink);background:var(--c-paper);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.lbrow__ava img{width:100%;height:100%;object-fit:cover;display:block}
.lbrow__ava em{font-family:var(--f-display);font-style:normal;font-size:0.82rem;line-height:1;color:var(--c-red)}
.lbrow__who b{display:block;font-family:var(--f-body);font-weight:700;font-size:1.02rem}
.lbrow__who b a{color:var(--c-ink);text-decoration:none}
.lbrow__who b a:hover{color:var(--c-red);text-decoration:underline;text-underline-offset:3px}
/* Direct child, for the same reason as the old `.board__who` rule: the AR/EDU
   badges sit inside the `<b>` above, and a descendant selector here would beat
   `.badge`'s lower specificity and turn each badge into a full-width block. */
.lbrow__who > span{display:block;margin-top:0.15rem;font-family:var(--f-label);font-size:0.62rem;
  color:var(--c-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow__stats{display:flex;gap:1.3rem}
.lbrow__stat{display:block;min-width:3.1rem;text-align:center}
/* The column the active tab sorts by is the loud one; the other stays muted,
   so the tab state is legible in the rows themselves and not just in the tab. */
.lbrow__stat b{display:block;font-family:var(--f-display);font-size:1.5rem;line-height:1;letter-spacing:-0.02em;
  color:var(--c-mute)}
.lbrow__stat i{display:block;margin-top:0.22rem;font-family:var(--f-label);font-style:normal;font-weight:700;
  font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-mute)}
.lbrow__stat--on b{color:var(--c-ink)}
.lbrow__stat--on i{color:var(--c-red)}
.lbrow__view{display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--f-label);font-weight:700;
  font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--c-paper);background:var(--c-ink);border:2px solid var(--c-ink);padding:0.52rem 0.72rem}
.lbrow__view:hover{background:var(--c-red);border-color:var(--c-red);color:#fff}
.badge{display:inline-block;font-family:var(--f-label);font-weight:700;font-size:0.55rem;letter-spacing:0.1em;
  text-transform:uppercase;border:2px solid var(--c-ink);padding:0.1rem 0.32rem;margin-right:0.3rem;
  background:var(--c-paper);vertical-align:1px}
.badge--edu{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
/* Pins its own ink. Every other variant sets a color, so this one inherited
   whatever it landed in: cream on mustard (1.6:1, effectively unreadable) on
   the ink band's home board, and --c-mute on mustard (4.2:1) inside the
   winner's pod. */
.badge--ar{background:var(--c-mustard);color:var(--c-ink)}
.badge--win{background:var(--c-red);color:#fff;border-color:var(--c-red)}
.legend{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.2rem;font-size:0.85rem;color:var(--c-mute)}
/* --c-mute is a paper-background grey; on a dark band it drops to 2.76:1. The
   legend is the only place a muted run of text sits directly on one. */
.band--ink .legend,.band--blue .legend,.band--red .legend{color:#CFCCC2}
/* Direct child for the same reason as .board__who above — the legend's own
   badges sit inside these spans. It renders correctly either way (a badge
   turned flex is still a shrink-to-fit flex item here), so this is closing the
   trap rather than fixing a visible break. */
.legend > span{display:flex;align-items:center;gap:0.4rem}

/* Board-first, desktop scale-up: the standings card is the page's centerpiece,
   so its faces and numbers get room to read as big rather than a dense data
   table. Mirrors this stylesheet's existing mobile-override pattern
   (`@media (max-width:900px)` below reflows the same row grid) with the
   opposite direction — a min-width query that only adds size above that same
   900px line, so the base rules above (which mobile inherits unchanged) and the
   900px reflow are both untouched. */
@media (min-width:901px){
  .lb__hd{padding:1.3rem 1.5rem}
  .lb__title b{font-size:1.7rem}
  .lb__filters{padding:0.95rem 1.5rem}
  .lbrow{grid-template-columns:3.4rem 3.6rem minmax(0,1fr) auto auto;gap:1.2rem;padding:1.05rem 1.5rem}
  .lbrow__rank{width:3.4rem;height:3.4rem;font-size:1.2rem}
  .lbrow__ava{width:3.6rem;height:3.6rem}
  .lbrow__ava em{font-size:1rem}
  .lbrow__who b{font-size:1.2rem}
  .lbrow__stats{gap:1.9rem}
  .lbrow__stat{min-width:4.2rem}
  .lbrow__stat b{font-size:2rem}
  .lbrow__view{padding:0.62rem 0.9rem}
}

/* ============================================================
 * HOME BOARD (index section 01)
 * The board's own section on the home page. It used to be a five-item list in
 * one of two half-width `.slot` columns, which read as a footnote next to the
 * wall — it now gets the width and weight the campaign's other surfaces get.
 * It also used to carry its OWN markup (a `.hb` bar-chart list: no faces, no
 * "latest" line, no tabs, no link out) on the theory that /leaderboard's board
 * was too dense to repeat here. That was true of the old five-column `.board`
 * table; the `.lb` card that replaced it holds up at this width and already
 * reflows for narrow screens, so the home page renders the same component and
 * the two surfaces can no longer disagree about what a board row is. What's
 * left here is what is actually about the home page: the wall's full-width row
 * and the CTA under the card.
 * ============================================================ */
.wall--solo{grid-template-columns:1fr}
.board-cta{margin-top:2rem}
.btn--mustard{background:var(--c-mustard);color:var(--c-ink)}
.btn--mustard:hover{background:var(--c-paper);color:var(--c-ink)}

/* ============================================================
 * FAQ
 * ============================================================ */
.faq{margin-top:1.9rem;border-top:2px solid var(--c-ink);counter-reset:q}
.faq details{border-bottom:2px solid var(--c-ink);counter-increment:q}
.faq summary{list-style:none;cursor:pointer;padding-block:1.05rem;
  display:grid;grid-template-columns:2.9rem minmax(0,1fr) 1.4rem;gap:0.85rem;align-items:baseline;
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.18rem);line-height:1.08}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--c-red)}
.faq summary i{font-family:var(--f-label);font-weight:700;font-style:normal;font-size:0.85rem;color:var(--c-red)}
.faq summary i::before{content:counter(q,decimal-leading-zero)}
.faq summary u{text-decoration:none;font-family:var(--f-label);font-size:1.1rem;line-height:1;justify-self:end}
.faq summary u::before{content:"+"}
.faq details[open] summary{color:var(--c-blue)}
.faq details[open] summary u::before{content:"–"}
.faq .a{padding:0 0 1.25rem 3.75rem;max-width:64ch;font-size:0.96rem;color:#3F3F3A}
.faq .a p + p{margin-top:0.75rem}
.faq .a ul{margin-top:0.6rem}
.faq .a li{padding-left:1.1rem;position:relative;padding-block:0.15rem}
.faq .a li::before{content:"";position:absolute;left:0;top:0.62em;width:0.5rem;height:2px;background:var(--c-red)}
.faq .a b{font-weight:700}
/* FAQ inside a colored band — flip rules and accents to paper/mustard */
.band--blue .faq,.band--ink .faq,
.band--blue .faq details,.band--ink .faq details{border-color:var(--c-paper)}
.band--blue .faq summary i,.band--ink .faq summary i{color:var(--c-mustard)}
.band--blue .faq summary:hover,.band--ink .faq summary:hover,
.band--blue .faq details[open] summary,.band--ink .faq details[open] summary{color:var(--c-mustard)}
.band--blue .faq .a,.band--ink .faq .a{color:#F1EFE8}
.band--blue .faq .a a,.band--ink .faq .a a{color:var(--c-mustard)}
.band--blue .faq .a li::before,.band--ink .faq .a li::before{background:var(--c-mustard)}
.faqnav{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.6rem}
.faqnav a{font-family:var(--f-label);font-weight:700;font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
  border:2px solid var(--c-ink);padding:0.4rem 0.66rem;background:#fff;color:var(--c-ink);text-decoration:none}
.faqnav a:hover{background:var(--c-mustard)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .phead__grid{grid-template-columns:minmax(0,1fr)}
  .nav__links{margin-left:0;order:3;width:100%;border-top:2px solid var(--c-ink);padding-top:0.7rem;
    gap:1rem;overflow-x:auto;scrollbar-width:none}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__end{margin-left:auto}
  .four > div{border-right:0;border-bottom:2px solid var(--c-ink)}
  .four > div:last-child{border-bottom:0}
  .steps li{grid-template-columns:2.6rem minmax(0,1fr)}
  .steps li::before{grid-row:span 2}
  .steps span{grid-column:2}
  .ideas{columns:1}
  /* The standings card keeps its rank/face/name row and drops the View button
     onto its own line rather than squeezing five columns into a phone. */
  .lbrow{grid-template-columns:2.5rem 2.7rem minmax(0,1fr) auto;gap:0.7rem}
  .lbrow__rank{width:2.5rem;height:2.5rem;font-size:0.9rem}
  .lbrow__ava{width:2.7rem;height:2.7rem}
  .lbrow__stats{gap:1rem}
  .lbrow__view{grid-column:1 / -1;justify-self:start}
  .builds--list .build__ft{flex:1 1 100%;justify-content:flex-start}
  .pods{align-items:stretch}
  .pod--1{order:-1}
  .pod--1,.pod--2{padding-block:1.2rem}
}
@media (max-width:560px){
  :root{--bw:2px}
  .cta .btn{width:100%;justify-content:center}
  .hero h1{font-size:clamp(2.5rem,13vw,4rem)}
  .vtoggle{margin-left:0}
  /* Narrowest phones: the two numbers move under the name instead of
     competing with it for the same line. */
  .lbrow{grid-template-columns:2.3rem 2.5rem minmax(0,1fr)}
  .lbrow__stats{grid-column:2 / -1}
  .lbrow__view{grid-column:2 / -1}
  .lb__hd,.lb__filters,.lbrow{padding-inline:0.9rem}
  .faq summary{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem;gap:0.6rem}
  .faq .a{padding-left:2.8rem}
  .builds--list .build__thumb{width:3.4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.btn:active,.build:hover{transform:none;box-shadow:4px 4px 0 var(--c-ink)}
}