/* ==========================================================================
   BigBad — WORLD (tokens + chrome) — 2026-09-14 rebuild, "The Lineup" style
   The ONE stylesheet behind World.astro. Every page adds its own composition
   in its own <style> block using ONLY these tokens.

   Identity (operator-picked 2026-09-14): deep teal-navy ground, cream type,
   ONE coral accent, a sea-glass band for tonal rhythm, Bricolage Grotesque
   display + Manrope body. Pages may re-skin the world (an app page wears the
   app's own colours) by setting --bg / --fg / --ac on <html>.

   Hard rules baked in here:
   - text floor 14px (--text-min); control minimum 44px (--control).
   - every muted grey passes 4.5:1 on its ground (ink: #9db5b6 · glass: #245a50).
   - ink text on coral buttons (cream-on-coral is 2.4:1 and fails AA).
   - ONE fixed chrome element (header.nav). The drawer is a SIBLING of the
     header, never a child of anything with backdrop-filter/transform.
   - reduced-motion: every animation/transition off.
   ========================================================================== */

:root{
  /* the world (overridable per page) */
  --bg:#0b1f24; --bg2:#10292f; --bg3:#173a41;
  --fg:#f6f1e7; --fg2:#cfdad8; --mute:#9db5b6;
  --ac:#ff6b57;
  /* the band */
  --glass:#9fe7d3; --glass-2:#d9f7ee; --glass-ink:#0e2a30; --glass-em:#1f6b5c;
  /* derived from the pair so a page that re-skins the band (an app page) keeps AA on it: ink at 90% over glass: 8.3:1 on the default pair, 4.85:1 on the FindBest page's purple band (computed) */
  --glass-mute:color-mix(in srgb,var(--glass-ink) 90%,var(--glass)); --glass-line:color-mix(in srgb,var(--glass-ink) 18%,transparent);
  /* derived */
  --line:color-mix(in srgb,var(--fg) 12%,transparent); --line-2:color-mix(in srgb,var(--fg) 22%,transparent);
  --ac-soft:color-mix(in srgb,var(--ac) 16%,transparent);
  /* compatibility aliases (older World pages) */
  --ink:var(--bg); --ink-2:var(--bg2); --ink-3:var(--bg3); --text:var(--fg); --text-2:var(--fg2); --muted:var(--mute); --red:var(--ac); --red-soft:var(--ac-soft);
  --paper:var(--glass); --paper-ink:var(--glass-ink); --paper-muted:var(--glass-mute); --paper-line:var(--glass-line);
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px; --control:44px;
  --text-min:.875rem; --t0:1rem; --t1:1.125rem;
  --t2:clamp(1.35rem,2.4vw,1.75rem); --t3:clamp(1.9rem,4vw,2.9rem); --t4:clamp(2.6rem,6.4vw,5.4rem);
  --r-sm:10px; --r-md:16px; --r-lg:26px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--t0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .6s,color .6s}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere;font-variation-settings:'opsz' 96}
h3{font-weight:700;letter-spacing:-.02em}
p,ul,ol,dl{margin:0}
small{font-size:var(--text-min)}
::selection{background:var(--ac);color:var(--bg)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.sr-only:focus{position:fixed;left:12px;top:12px;z-index:70;width:auto;height:auto;min-height:var(--control);padding:0 18px;margin:0;clip:auto;display:inline-flex;align-items:center;background:var(--ac);color:var(--bg);border-radius:100px;font-weight:800}

.eyebrow{font-family:var(--body);font-weight:700;font-size:var(--text-min);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyebrow b{color:var(--ac);font-weight:700}
.invert .eyebrow{color:var(--glass-mute)}
.invert .eyebrow b{color:var(--glass-ink)}
.hero-em,.h-em{font-style:normal;color:var(--ac)}

.wrap{position:relative;z-index:3}
.container{max-width:1280px;margin:0 auto;padding:0 clamp(18px,5vw,64px);width:100%}

/* the fishbone mark — the studio's own glyph */
.fishmark{background:var(--ac);display:inline-block;
  -webkit-mask:url("brand/fishbone-black-500.png") center/contain no-repeat;
  mask:url("brand/fishbone-black-500.png") center/contain no-repeat}

/* ---------- the ONE fixed chrome element ---------- */
header.nav{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--nav-h);padding:0 clamp(14px,3vw,28px);
  background:linear-gradient(color-mix(in srgb,var(--bg) 72%,transparent),transparent);pointer-events:none}
header.nav > *{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:var(--control);padding:0 8px;font-family:var(--display);
  font-weight:800;font-size:1.25rem;letter-spacing:-.04em;white-space:nowrap;border-radius:100px}
.brand i{font-style:normal;color:var(--ac)}
.brand .fishmark{width:20px;height:20px;flex:none}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{display:inline-flex;align-items:center;min-height:var(--control);padding:0 14px;border-radius:100px;
  font-size:var(--text-min);font-weight:700;color:var(--fg2);white-space:nowrap}
.nav-links a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.nav-links a.is-current{color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent)}
.nav-right{display:flex;align-items:center;gap:8px}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:100px;font-family:var(--body);font-weight:800;font-size:var(--t0);line-height:1.2;background:var(--ac);color:var(--bg);
  border:2px solid var(--ac);cursor:pointer;transition:transform .15s var(--ease),background .6s,color .6s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border-color:var(--fg);color:var(--fg)}
.btn.soft{background:color-mix(in srgb,var(--fg) 10%,transparent);border-color:transparent;color:var(--fg)}
.btn.glass{background:var(--glass);border-color:var(--glass);color:var(--glass-ink)}
.btn.block{width:100%}
.invert .btn{background:var(--glass-ink);border-color:var(--glass-ink);color:var(--glass)}
.invert .btn.ghost{background:transparent;border-color:var(--glass-ink);color:var(--glass-ink)}
.invert .btn.ac{background:var(--ac);border-color:var(--ac);color:var(--bg)}

.nav-burger{display:none;font-family:var(--body);font-weight:800;font-size:var(--text-min);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);border:0;
  border-radius:100px;min-height:var(--control);padding:0 16px;cursor:pointer;line-height:1}

/* mobile drawer — a sibling of <header>, full viewport */
.nav-sheet{position:fixed;inset:0;z-index:50;height:100vh;height:100dvh;background:var(--bg);color:var(--fg);
  display:none;flex-direction:column;padding:14px clamp(18px,6vw,40px) 40px;overflow-y:auto;overscroll-behavior:contain}
.nav-sheet.is-open{display:flex}
.nav-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.nav-sheet-close{font-family:var(--body);font-weight:800;font-size:var(--text-min);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);border:0;border-radius:100px;min-height:var(--control);padding:0 16px;cursor:pointer;line-height:1}
.nav-sheet-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.nav-sheet-links a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-height:var(--control);
  padding:13px 2px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.nav-sheet-links a em{font-family:var(--body);font-style:normal;font-size:var(--text-min);font-weight:600;color:var(--mute);letter-spacing:0;text-align:right;flex:none;max-width:46%}
.nav-sheet-links a.is-current{color:var(--ac)}
.nav-sheet .btn{margin-top:20px}
.nav-sheet-foot{margin-top:18px;font-size:var(--text-min);color:var(--mute);display:flex;gap:16px;flex-wrap:wrap}
.nav-sheet-foot a{display:inline-flex;align-items:center;min-height:var(--control);min-width:var(--control)}
@media(max-width:900px){
  .nav-links{display:none}
  header.nav > .nav-right > .btn{display:none}
  .nav-burger{display:inline-flex;align-items:center}
}

/* ---------- section rhythm ---------- */
section.block{padding-block:clamp(72px,11vh,132px);position:relative} /* padding-block, never the shorthand: `section.block.container` must keep the container's side gutter (the shorthand zeroed it — measured 0px gutter at 390 on /work/social/<slug>/) */
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head h2{font-size:var(--t3)}
.sec-head h2 em{font-style:normal;color:var(--ac)}
.sec-head p{color:var(--fg2);margin-top:14px;font-size:var(--t1);max-width:60ch}

/* ---------- the band (sea-glass) ---------- */
.invert{background:var(--glass);color:var(--glass-ink);border-radius:var(--r-lg);margin:0 clamp(8px,2.5vw,28px)}
.invert h2{color:var(--glass-ink)}
.invert h2 em,.invert .sec-head h2 em{font-style:normal;color:var(--glass-em)}
.invert .sec-head p,.invert .muted{color:var(--glass-mute)}
.muted{color:var(--mute)}

/* ---------- honest state badges (text only) ---------- */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-min);font-weight:800;letter-spacing:.04em;color:var(--fg2);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mute);flex:none}
.badge.live::before{background:var(--ac)}
.invert .badge{color:var(--glass-mute)}

/* ---------- frames for real screens ---------- */
.frame{border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.frame .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--bg2);color:var(--mute);font-size:var(--text-min);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.frame .bar b{color:var(--fg)}
.frame img{width:100%;height:auto;display:block}

/* ---------- CTA + footer ---------- */
.cta{text-align:center;padding-block:clamp(80px,14vh,150px)}
.cta .fishmark{width:44px;height:44px;margin:0 auto 24px}
.cta h2{font-size:var(--t4)}
.cta h2 em{font-style:normal;color:var(--ac)}
.cta p{color:var(--fg2);max-width:540px;margin:20px auto 34px;font-size:var(--t1)}

footer.site{border-top:1px solid var(--line);padding:52px 0 40px;color:var(--mute);font-size:var(--text-min);position:relative;z-index:3}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot-grid p.k{font-family:var(--body);font-size:var(--text-min);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot-grid ul a{display:inline-flex;align-items:center;min-height:var(--control);min-width:var(--control);color:var(--fg2)}
.foot-grid ul a:hover{color:var(--fg)}
.foot-brand .brand{padding:0;margin-bottom:10px}
.foot-brand p{max-width:300px;color:var(--mute)}
.foot-base{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mute)}
.foot-base a{display:inline-flex;align-items:center;min-height:var(--control);min-width:var(--control);color:var(--fg2)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Shared page compositions (added 2026-09-14 for the full-site migration).
   Every inner page is built from these plus a small page-local <style>.
   ========================================================================== */
.page-hero{padding-block:calc(var(--nav-h) + clamp(40px,8vh,96px)) clamp(36px,6vh,64px)}
.page-hero h1{font-size:var(--t4);max-width:14ch}
.page-hero h1 em{font-style:normal;color:var(--ac)}
.page-hero .lede{font-size:var(--t1);color:var(--fg2);max-width:58ch;margin-top:18px}
.page-hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero .badge{white-space:normal} /* a status sentence must wrap, never widen the document */
.crumbs{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 14px;font-size:var(--text-min);color:var(--mute)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--control);min-width:var(--control);color:var(--fg2)}
.crumbs li+li::before{content:"/";margin:0 6px;line-height:var(--control)}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line-2);border-radius:var(--r-md);background:color-mix(in srgb,var(--fg) 4%,transparent);transition:transform .2s var(--ease),border-color .2s}
a.card:hover{transform:translateY(-3px);border-color:var(--ac)}
.card .k{font-size:var(--text-min);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.card h3{font-size:var(--t2)}
.card p{color:var(--fg2)}
.card .go{margin-top:auto;font-weight:800;color:var(--ac);display:inline-flex;align-items:center;min-height:var(--control)}
.invert .card{border-color:var(--glass-line);background:color-mix(in srgb,var(--glass-ink) 6%,transparent)}
.invert .card .k,.invert .card p{color:var(--glass-mute)}
.invert .card .go{color:var(--glass-ink)}
.prose{max-width:68ch}
.prose p{margin:0 0 1.1em;font-size:var(--t1);color:var(--fg2)}
.prose h2{font-size:var(--t3);margin:1.6em 0 .5em}
.prose h3{font-size:var(--t2);margin:1.4em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;color:var(--fg2)}
.prose li{margin:.35em 0}
.prose a:not(.btn){color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--ac);color:var(--fg)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:color-mix(in srgb,var(--fg) 10%,transparent);padding:2px 6px;border-radius:6px}
.prose pre{overflow-x:auto;padding:16px;border-radius:var(--r-sm);background:var(--bg2);font-size:var(--text-min)}
.prose pre code{background:transparent;padding:0;font-size:inherit}
.prose img{border-radius:var(--r-sm)}
.prose hr{border:0;border-top:1px solid var(--line-2);margin:2em 0}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--fg2)}
.checks li::before{content:"";flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--ac)}
.invert .checks li{color:var(--glass-ink)}
.invert .checks li::before{background:var(--glass-ink)}
.note{border:1px solid var(--line-2);border-left:3px solid var(--ac);border-radius:var(--r-sm);padding:16px 18px;color:var(--fg2);background:color-mix(in srgb,var(--fg) 4%,transparent)}
.note b{color:var(--fg)}
.tile{display:block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-2);background:var(--bg2);transition:transform .2s var(--ease),border-color .2s}
a.tile:hover{transform:translateY(-3px);border-color:var(--ac)}
.tile img{width:100%;height:auto;display:block}
.tile .cap{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;min-height:var(--control)}
.tile .cap b{font-family:var(--display);font-weight:700;font-size:var(--t1);letter-spacing:-.02em}
.tile .cap small{color:var(--mute)}
/* a tile inside a glass band takes the band's ink like .card does — measured 2026-09-15: the Cactus tile caption was glass-ink on --bg2, ratio 1.01 */
.invert .tile{border-color:var(--glass-line);background:color-mix(in srgb,var(--glass-ink) 6%,transparent)}
.invert .tile .cap b{color:var(--glass-ink)}
.invert .tile .cap small{color:var(--glass-mute)}
.pill{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:100px;font-size:var(--text-min);font-weight:700;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg2)}
.invert .pill{background:color-mix(in srgb,var(--glass-ink) 10%,transparent);color:var(--glass-ink)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
/* a bare 1fr track is minmax(auto,1fr): one nowrap button wider than the column widens the whole document (measured 397px at 390 on /work/plugins/). Every single-column collapse uses minmax(0,1fr). */

/* inline text links keep a 44px hit target without disturbing the line box: vertical padding on an
   inline element is painted and clickable but does not change layout (14px text: 22.4 + 22 = 44.4) */
.prose a:not(.btn),.note a:not(.btn),.lede a:not(.btn),dd a,.checks a,.cta p a,.ai-why a{padding:11px 4px;margin:0 -4px}

/* ==========================================================================
   .rail — a horizontal scroller for the long card stacks (operator direction, 2026-09-14).
   overflow-x lives on the TRACK only; the body never scrolls sideways. Cards snap, the next card
   peeks at the right edge, arrows + dots say "there's more", keyboard works because every card is
   a real <a>. At >= 1024px the rail degrades to a wrapped grid where a stack reads better.
   ========================================================================== */
.rail{position:relative}
.rail-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:4px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;list-style:none;margin:0}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{flex:0 0 min(84%,340px);scroll-snap-align:start;min-width:0}
.rail-track > * > .card,.rail-track > .card,.rail-track > .tile,.rail-track > * > .tile{height:100%}
.rail-ui{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.rail-dots{display:flex;gap:4px;flex-wrap:wrap}
.rail-dots button{width:var(--control);height:var(--control);display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:pointer}
.rail-dots button i{width:8px;height:8px;border-radius:50%;background:var(--mute);display:block;transition:transform .2s,background .2s}
.rail-dots button.on i{background:var(--ac);transform:scale(1.5)}
.rail-arrows{display:flex;gap:6px}
.rail-arrows button{width:var(--control);height:var(--control);border-radius:50%;border:2px solid var(--line-2);background:transparent;color:var(--fg);font:800 18px var(--body);cursor:pointer;display:grid;place-items:center}
.rail-arrows button:disabled{opacity:.35;cursor:default}
.invert .rail-arrows button{border-color:var(--glass-line);color:var(--glass-ink)}
.invert .rail-dots button i{background:var(--glass-mute)}
.invert .rail-dots button.on i{background:var(--glass-ink)}
.rail-more{font-size:var(--text-min);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.invert .rail-more{color:var(--glass-mute)}
@media(min-width:1024px){
  .rail-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible;scroll-snap-type:none;padding:0}
  .rail-track > *{flex:none}
  .rail.c4 .rail-track{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail.c2 .rail-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail-ui{display:none}
}
@media(prefers-reduced-motion:reduce){.rail-track{scroll-behavior:auto}}
/* wider cards for rails that carry a screenshot */
.rail-track.lineup > *,.rail-track.shelf > *,.rail-track.sites-grid > *,.rail-track.so-list > *{flex-basis:min(88%,440px)}
.rail-track .tile img,.rail-track .app-shot img{max-height:260px;object-fit:cover;object-position:top}
@media(min-width:1024px){.rail-track .tile img,.rail-track .app-shot img{max-height:none}}
