/* ==========================================================================
   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.
   ========================================================================== */

/* FONTS — self-hosted + preloaded (World.astro), with metric-matched fallbacks (2026-10-20).
   Measured: the Google Fonts swap was the ONLY source of layout shift on the site — CLS 0.10 on / @1440,
   0.26 on /about/ @768, 0.22 on /apps/ @360; with the font requests blocked every one of those was 0.
   Same-origin woff2 (no third-party connection) + preload makes the faces usually arrive before first
   paint; the "… Fallback" faces resize local Arial to the webfont's width and line metrics so that, when
   the swap does happen late, the text box barely moves. Metrics measured in Chromium against these files:
   Bricolage ascent 0.93 / descent 0.27 em, Manrope ascent 1.07 / descent 0.30 em; widths per weight band
   are in the fallback block below. Variable fonts: one file per subset covers every weight used.
   swap, NOT optional (measured under 4G emulation, 170 ms RTT / 9 Mbps): optional gave CLS 0 but painted
   the FALLBACK headline on the first view of every page tested (8/8), so new visitors never saw the brand
   face; swap paints Bricolage and holds CLS at 0–0.082 (old Google Fonts build: 0.038–0.176). The residual
   shift is a headline re-wrapping when the face lands — width-matched fallbacks cannot stop a line break.
   Later the same day: two more causes found and fixed — `ch` widths (resolve against the fallback's "0", so whole
   boxes changed width; now em, build guard bigbad:no-ch-widths) and the first layout always using the fallback
   (the 500 ms font gate in World.astro). Measured after both: CLS 0 on the pages that still shifted.
   Files: /fonts/*.woff2 (OFL, from fonts.gstatic.com v9 / v20). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* fallback faces, one per weight band: size-adjust = median webfont/Arial width over every text node on 10 key pages at that weight (calibrated 2026-10-20, n=1352 nodes); ascent/descent = measured em metrics / size-adjust */
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT');font-weight:100 550;size-adjust:102.49%;ascent-override:104.4%;descent-override:29.27%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:551 650;size-adjust:98.54%;ascent-override:108.59%;descent-override:30.44%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:651 750;size-adjust:95.47%;ascent-override:112.08%;descent-override:31.42%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:751 900;size-adjust:100.82%;ascent-override:106.13%;descent-override:29.76%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial'),local('ArialMT');font-weight:100 550;size-adjust:105.46%;ascent-override:88.18%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:551 650;size-adjust:101.35%;ascent-override:91.76%;descent-override:26.64%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:651 750;size-adjust:92.64%;ascent-override:100.39%;descent-override:29.15%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:751 900;size-adjust:95.15%;ascent-override:97.74%;descent-override:28.38%;line-gap-override:0%}

: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','Bricolage Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope','Manrope Fallback',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:36.56em}

/* ---------- 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)}
.foot-base>span{display:inline-flex;align-items:center;min-height:var(--control)}
.foot-legal{display:flex;flex-wrap:wrap;gap:0 18px}

/* ---------- 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:8.31em}
.page-hero h1 em{font-style:normal;color:var(--ac)}
.page-hero .lede{font-size:var(--t1);color:var(--fg2);max-width:35.35em;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:41.44em}
.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)}
/* inline code wraps: a long hook name (woocommerce_before_add_to_cart_button) pushed 4 posts 2–74 px past a 320–390 px screen (2026-10-20) */
.prose code{overflow-wrap:anywhere;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,.pp-reading 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}}