/* Foss Publishing — public website styles. Consumes tokens.css ONLY (no hard-coded
   colours/sizes except layout primitives), so the whole site re-themes from the token file.
   Direction: "Stillwater" — glacial palette (misty white + glacier blue) with one warm
   ember accent used sparingly, EB Garamond old-print serif, hairlines instead of boxes,
   near-flat surfaces, generous negative space, subtle falling-water / drifting-mist motion. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--disp-weight);letter-spacing:var(--disp-spacing);
  line-height:1.16;color:var(--color-ink);margin:0 0 14px}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
p{margin:0 0 16px}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:.85em;background:var(--color-surface-alt);padding:1px 6px;border-radius:var(--radius-sm)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.muted{color:var(--color-ink-mut)}
.soft{color:var(--color-ink-soft)}
.small{font-size:var(--text-sm)}
.center{text-align:center}
/* Stillwater kicker: Garamond, uppercase, wide title-page tracking. */
.eyebrow{font-family:var(--font-kicker);font-weight:600;font-size:var(--text-sm);letter-spacing:.3em;
  text-transform:uppercase;color:var(--color-primary)}
/* Stillwater signature: accent word inside a heading — italic, flat glacier blue (NO gradient). */
.accent{font-style:var(--accent-fstyle);color:var(--color-primary)}
/* Warm marker highlight for one emphasised inline phrase. */
.hl{background:var(--color-hl-bg);color:var(--color-hl-ink);padding:1px 6px;border-radius:var(--radius-sm);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Kicker row with the small ember square (single focal accent). */
.kicker-row{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.kicker-sq{width:7px;height:7px;background:var(--color-accent-2);display:inline-block;flex:none}

/* ---- header / nav (slim, hairline-bottomed) ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-surface);
  border-bottom:1px solid var(--color-line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:var(--text-md);font-weight:600;letter-spacing:.02em;color:var(--color-ink)}
.logo:hover{text-decoration:none}
/* Descent brand lockup (note-24): the FP mark (self-coloured SVG) + "Foss" wordmark with
   the "an author's press" eyebrow — the same lockup the Descent home carries. */
.logo .mark{width:34px;height:34px;display:grid;place-items:center}
.logo .mark svg{width:100%;height:100%}
.logo .lkup{display:flex;flex-direction:column}
.logo .wm{font-weight:600;font-size:1.15rem;letter-spacing:.02em;line-height:1;color:var(--color-ink)}
.logo .eb{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--color-ink-mut);font-style:italic;font-weight:400;margin-top:4px}
.header-right{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;gap:26px;align-items:center}
/* Mobile hamburger + drawer (shown only ≤860px; see responsive block below) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:0;cursor:pointer;border-radius:var(--radius-sm)}
.nav-toggle:hover{background:var(--color-surface-alt)}
.nav-toggle-bar{display:block;width:22px;height:1px;background:var(--color-ink);transition:transform .2s ease,opacity .15s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;padding:8px 24px 16px;background:var(--color-surface);border-top:1px solid var(--color-line)}
.mobile-nav a{padding:13px 4px;color:var(--color-ink-soft);font-size:var(--text-sm);letter-spacing:.13em;
  text-transform:uppercase;border-bottom:1px solid var(--color-line)}
.mobile-nav a:hover{text-decoration:none;color:var(--color-ink)}
.mobile-nav a.active{color:var(--color-primary)}
/* Uppercase text links, title-page tracked — no pill backgrounds. */
.nav-links a{color:var(--color-ink-soft);font-size:var(--text-sm);letter-spacing:.13em;
  text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:color .15s ease}
.nav-links a:hover{text-decoration:none;color:var(--color-ink)}
.nav-links a.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
/* Header CTA = the Descent solid glacier chip (the returning-author affordance). */
.nav-cta{background:var(--color-primary);border:0!important;border-radius:var(--radius-sm);
  color:#fff!important;padding:11px 20px!important;letter-spacing:.16em;transition:filter .18s ease}
.nav-cta:hover{filter:brightness(1.1);color:#fff!important}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);
  letter-spacing:.01em;padding:12px 28px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:filter .15s ease,border-color .15s ease,background .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-primary);color:var(--color-primary-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--color-primary);border-color:var(--color-line)}
.btn-ghost:hover{border-color:var(--color-primary)}
.btn-sm{padding:7px 16px;font-size:var(--text-sm)}
/* Quiet italic text-link (hero secondary action). */
.link-quiet{font-family:var(--font-display);font-weight:600;font-style:italic;color:var(--color-ink-soft);
  border-bottom:1px solid var(--color-line);padding-bottom:3px}
.link-quiet:hover{text-decoration:none;color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ---- sections / layout (whitespace is a component — do not compress) ---- */
section{padding:var(--space-7) 0}
.band{background:var(--color-bg-tint)}
.section-head{max-width:680px;margin:0 auto var(--space-5);text-align:center}
.section-head p{font-size:var(--text-md);color:var(--color-ink-soft)}
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---- cards (hairline, tiny radius, near-flat) ---- */
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-sm)}
.card.pad-lg{padding:32px}
.card .ic{width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;
  font-size:22px;margin-bottom:12px}
/* Legacy tint hooks — Stillwater keeps them all on the one glacial mist tint (no pastel rainbow). */
.tint-lav,.tint-mint,.tint-peach,.tint-sky,.tint-butter,.tint-rose{background:var(--color-primary-soft)}

/* ---- hero (Stillwater: tinted glacial canvas + faint concentric-contour texture) ---- */
.hero{position:relative;overflow:hidden;padding:var(--space-7) 0}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(158deg,var(--color-bg-tint) 0%,var(--color-surface) 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 16% 26%, rgba(44,110,136,.055) 0 1px, transparent 1px 30px)}
.hero h1{font-size:var(--text-4xl);max-width:20ch;line-height:1.14}
.hero .lede{font-size:1.16rem;color:var(--color-ink-soft);max-width:46ch;line-height:1.8;margin:24px 0 40px}
.hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* Home hero: two-column, real waterfall image right + moving-water overlays. */
.hero-split{padding:0}
.hero-split .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;min-height:648px}
.hero-copy{position:relative;padding:112px 56px 118px 64px;display:flex;flex-direction:column;justify-content:center}
.hero-copy .kicker-row{margin:0 0 60px}
.hero-copy h1{font-size:3.9rem;margin:0 0 36px}
.hero-copy .lede{margin:0 0 44px}
.hero-media{position:relative;overflow:hidden;background:var(--color-ink)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
/* Faint downward-moving highlight bands (swSheet) so the still photo reads as moving water. */
.hero-sheet{position:absolute;left:0;right:0;top:-100%;height:200%;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 70px,rgba(255,255,255,.05) 70px 71px);
  animation:swSheet 5.5s linear infinite;mix-blend-mode:screen}
/* Rising mist at the plunge-pool base (swMist). */
.hero-mist{position:absolute;left:-12%;right:-12%;bottom:-24px;height:200px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(240,247,250,.5),transparent 72%);
  animation:swMist 14s ease-in-out infinite}
/* Left-edge blend of the photo into the text panel. */
.hero-blend{position:absolute;top:0;bottom:0;left:0;width:130px;pointer-events:none;
  background:linear-gradient(90deg,var(--color-surface),transparent)}

/* ---- stat row (marketing): hairline-separated cells, NO colored tiles ---- */
.statsec{padding:0;border-top:1px solid var(--color-line);background:var(--color-surface)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr)}
.statrow>div{padding:46px 40px}
.statrow>div+div{border-left:1px solid var(--color-line)}
.statrow .v{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);letter-spacing:-.01em;color:var(--color-ink)}
.statrow .k{margin-top:12px;font-size:var(--text-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-mut)}

/* ---- "Built for authors" image strip ---- */
.imgstrip{padding:76px 0;border-top:1px solid var(--color-line);background:var(--color-surface)}
.imgstrip h2{font-size:2.2rem;max-width:22ch;margin:0}
.imgstrip .intro{font-size:1.08rem;line-height:1.75;color:var(--color-ink-soft);max-width:52ch;margin:16px 0 48px}
.imgcols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.imgcols figure{margin:0}
.imgcols .ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-sm)}
.imgcols .ph img{width:100%;height:100%;object-fit:cover;display:block}
.imgcols .cap{margin-top:22px;display:flex;align-items:baseline;gap:12px}
.imgcols .cap .no{font-family:var(--font-display);font-size:var(--text-base);color:var(--color-accent-2)}
.imgcols .cap .t{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:1.35rem;color:var(--color-ink)}
.imgcols p{margin:8px 0 0;font-size:.98rem;line-height:1.7;color:var(--color-ink-soft);max-width:32ch}

/* ---- quiet pipeline strip ---- */
.pipesec{padding:0;border-top:1px solid var(--color-line);background:var(--color-surface)}
.pipestrip{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;padding:64px 0}
.pipestrip .kick{font-family:var(--font-kicker);font-size:var(--text-xs);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--color-primary)}
.pipestrip h2{font-size:var(--text-lg);margin:20px 0 14px}
.pipestrip .blurb{font-size:var(--text-base);line-height:1.85;color:var(--color-ink-soft);margin:0 0 30px;max-width:34ch}
.meter{height:2px;background:var(--color-line);position:relative}
.meter .fill{position:absolute;left:0;top:0;height:100%;background:var(--color-accent-2)}
.pipestrip .meta{margin-top:12px;font-size:.76rem;letter-spacing:.04em;color:var(--color-ink-mut)}
.pipe-rows{align-self:center;border-top:1px solid var(--color-line)}
.pipe-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--color-line)}
.pipe-row .ch{font-size:.95rem;color:var(--color-ink);font-weight:500}
.pipe-row .right{display:flex;align-items:center;gap:18px}
.pipe-row .detail{font-size:var(--text-sm);color:var(--color-ink-soft)}
/* Status = small dot + wide-tracked uppercase label (no filled pill). */
.dotstat{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);
  letter-spacing:var(--track-status);text-transform:uppercase}
.dotstat::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.dotstat.good{color:var(--color-good)}
.dotstat.warn{color:var(--color-warn)}

/* ---- stat tiles → Stillwater KPI hairline row (top+bottom hairlines, border-left dividers) ---- */
.grid:has(>.stat){gap:0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.stat{background:transparent;border:0;border-radius:0;text-align:left;
  padding:36px 32px;display:flex;flex-direction:column}
.stat+.stat{border-left:1px solid var(--color-line)}
.grid>.stat:first-child{padding-left:0}
.grid>.stat:last-child{padding-right:0}
.stat .n{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;line-height:1.1;
  color:var(--color-ink)}
.stat .l{order:-1;margin:0 0 16px;color:var(--color-ink-mut);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:var(--track-label);font-weight:500}
.stat .sub{margin-top:8px;color:var(--color-ink-soft);font-size:var(--text-sm);letter-spacing:.03em}

/* ---- pills / chips → dot + tracked uppercase label (no filled boxes) ---- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:0;border-radius:0;background:transparent;
  font-size:var(--text-xs);font-weight:500;letter-spacing:var(--track-status);text-transform:uppercase;
  color:var(--color-ink-mut)}
.pill::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.pill.live{color:var(--color-good)}
.pill.wait{color:var(--color-warn)}
.pill.info{color:var(--color-primary)}
.pill.held{color:var(--color-bad)}
.pill.auto{color:var(--color-ink-mut)}
.pill.ok{color:var(--color-good)}
.lp-actions{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.lp-actions li{line-height:1.6}
.lp-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:10px 12px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface)}
.lp-check input{margin-top:5px;flex:none;width:15px;height:15px;cursor:pointer;accent-color:var(--color-primary)}
.lp-actions li.lp-done .lp-check{background:var(--color-bg-tint);border-color:var(--color-good)}
.lp-actions li.lp-done strong{text-decoration:line-through;color:var(--color-ink-mut)}
/* ---- A+ generated-package lifecycle (generated → uploaded → live) ---- */
.aplus-status{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0;
  padding:12px 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.lc-steps{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.lc-step{font-size:var(--text-xs);font-weight:500;letter-spacing:.06em;padding:5px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink-mut);cursor:pointer}
.lc-step.done{background:var(--color-primary-soft);color:var(--color-primary);border-color:var(--color-primary-soft)}
.lc-step.here{background:var(--color-primary);color:var(--color-primary-ink);border-color:var(--color-primary)}
.lc-arrow{color:var(--color-ink-mut);font-size:var(--text-xs)}
/* Ready-to-paste listing copy (Listing card, generated package → guided upload) */
.paste-box{width:100%;box-sizing:border-box;font-family:var(--font-mono);
  font-size:var(--text-xs);line-height:1.5;padding:12px 14px;border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:var(--color-bg-tint);color:var(--color-ink);resize:vertical}
/* ---- A+ Content visual mockup (generated package → guided upload) ---- */
.aplus-mod{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);
  overflow:hidden;margin:16px 0;box-shadow:var(--shadow-sm)}
.aplus-modlabel{background:var(--color-surface-alt);border-bottom:1px solid var(--color-line);
  padding:8px 14px;font-size:var(--text-xs);color:var(--color-ink-mut);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:6px}
.aplus-modlabel strong{color:var(--color-ink)}
.aplus-modbody{padding:16px}
.aplus-mh{margin:0 0 12px;font-size:var(--text-md);color:var(--color-ink)}
.aplus-slots{display:grid;gap:12px;margin-bottom:12px}
.aplus-slots.one{grid-template-columns:1fr}
.aplus-slots.g3{grid-template-columns:repeat(3,1fr)}
.aplus-slots.g4{grid-template-columns:repeat(4,1fr)}
.aplus-slot{background:var(--color-bg-tint);border:1px dashed var(--color-primary);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  color:var(--color-primary);font-size:var(--text-xs);font-weight:500;min-height:80px;text-align:center}
.aplus-copy{font-size:var(--text-sm);color:var(--color-ink-soft);margin:0}
.aplus-panels{margin:0;padding-left:20px;font-size:var(--text-sm);color:var(--color-ink-soft)}
.aplus-panels li{margin:3px 0}
@media(max-width:760px){.aplus-slots.g3,.aplus-slots.g4{grid-template-columns:repeat(2,1fr)}}
.chip{display:inline-block;background:transparent;border:1px solid var(--color-line);
  border-radius:var(--radius-sm);padding:4px 12px;margin:0 6px 6px 0;font-size:var(--text-sm);color:var(--color-ink-soft)}

/* ---- tables (hairline rows, quiet heads) ---- */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
thead th{background:var(--color-surface);text-align:left;font-weight:500;color:var(--color-ink-mut);
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-status);padding:11px 14px;
  border-bottom:1px solid var(--color-line)}
tbody td{padding:13px 14px;border-bottom:1px solid var(--color-line)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* overflow-x:auto (NOT hidden) so wide tables — Performance "Top books" (10 cols),
   the reviewer/schools pipelines, the channel-segment table — scroll horizontally on a
   narrow viewport instead of clipping their rightmost columns off-screen unreachably.
   Momentum scroll on touch; keyboard-focusable so the scroll region is reachable without
   a pointer; a pinned right-edge fade cues that there's more to scroll (background-attachment
   local keeps it at the edge, hides once fully scrolled). border-radius still clips corners. */
.table-wrap{border:1px solid var(--color-line);border-radius:var(--radius-lg);
  overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-sm);
  background:
    linear-gradient(to left, var(--color-surface), var(--color-surface)) 0 0/100% 100% no-repeat,
    linear-gradient(to left, rgba(15,22,25,.10), rgba(15,22,25,0)) right/22px 100% no-repeat;
  background-attachment:local, scroll}

/* ---- notes / empty states ---- */
.note{background:var(--color-surface-alt);border:1px solid var(--color-line);border-radius:var(--radius-sm);
  padding:16px 20px;color:var(--color-ink-soft);font-size:var(--text-sm)}
/* honest "this is a saved snapshot, not live" banner shown when data pages render offline */
.snapshot-banner{background:var(--color-primary-soft);color:var(--color-primary);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);
  padding:8px 16px;margin:16px 0 0;text-align:center;letter-spacing:.02em}

/* ---- footer ---- */
.site-footer{background:var(--color-ink);color:#C3CDD2;padding:var(--space-6) 0 var(--space-4);margin-top:var(--space-7)}
.site-footer a{color:#BFD6DF}
.site-footer .cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-footer h4{color:#fff;font-size:var(--text-base);margin-bottom:12px}
.site-footer .lk{display:block;color:#9DAAB0;font-size:var(--text-sm);margin-bottom:6px}
.site-footer .lk:hover{color:#fff}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;
  padding-top:16px;color:#8A99A0;font-size:var(--text-xs)}

/* ---- funnel (hairline stages, no boxes) ---- */
.funnel{display:flex;gap:12px;flex-wrap:wrap}
.funnel .stage{flex:1;min-width:130px;background:var(--color-surface);border:0;
  border-top:1px solid var(--color-line);border-radius:0;padding:20px 16px 16px 0;position:relative}
.funnel .stage .n{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400}
.funnel .stage .l{color:var(--color-ink-mut);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-label);font-weight:500;margin-top:4px}
.funnel .stage .arrow{position:absolute;right:-4px;top:50%;transform:translateY(-50%);color:var(--color-ink-mut);font-size:16px;z-index:1}

/* ---- portal login ---- */
.login-card{max-width:420px;margin:var(--space-7) auto;text-align:center}
.login-card .ic{width:60px;height:60px;border-radius:var(--radius-lg);margin:0 auto 16px;
  background:var(--color-primary-soft);display:grid;place-items:center;font-size:30px}
.field{text-align:left;margin-bottom:12px}
.field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-ink-soft);margin-bottom:4px}
.field input{width:100%;padding:11px 13px;border:1px solid var(--color-line);border-radius:var(--radius-sm);
  font-size:var(--text-base);font-family:var(--font-body);background:var(--color-surface)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft)}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(15,22,25,.45);display:grid;place-items:center;z-index:100;padding:24px}
.modal{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:32px;max-width:560px;width:100%;box-shadow:var(--shadow-lg)}
body.modal-open{overflow:hidden}

/* ---- markdown render ---- */
.md h1{font-size:var(--text-xl);margin:24px 0 8px}
.md h2{font-size:var(--text-lg);margin:24px 0 8px}
.md h3{font-size:var(--text-base);margin:16px 0 8px}
.md table{margin:12px 0}
.md blockquote{color:var(--color-ink-soft);border-left:2px solid var(--color-primary-soft);margin:12px 0;padding-left:16px}
.md ul{margin:8px 0 16px;padding-left:24px}

/* ---- portal tabs (plain text, primary underline on the active tab) ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--color-line);margin-bottom:24px}
.tabs a{padding:9px 2px;margin-right:22px;color:var(--color-ink-mut);font-weight:500;font-size:var(--text-sm);
  letter-spacing:.06em;border-bottom:1px solid transparent;margin-bottom:-1px}
.tabs a:hover{text-decoration:none;color:var(--color-ink)}
.tabs a.active{color:var(--color-ink);border-bottom-color:var(--color-primary)}

/* ---- trend sparklines (Author Portal edition cards) — flat, quiet ---- */
.trends{margin-top:12px;border-top:1px solid var(--color-line);padding-top:12px;display:grid;gap:6px}
.trend{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:8px}
.trend-l{text-transform:uppercase;letter-spacing:.06em;font-weight:500;font-size:var(--text-xs)}
.spark{display:block;width:100%;height:30px;overflow:visible}
.trend-d{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-ink-soft)}

/* ---- responsive ---- */
@media(max-width:1100px){
  .hero-copy{padding:72px 40px 80px 40px}
  .hero-copy h1{font-size:3.1rem}
}
@media(max-width:860px){
  .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:1fr} .g-2{grid-template-columns:1fr}
  .hero h1{font-size:var(--text-3xl)} h1{font-size:var(--text-2xl)} h2{font-size:var(--text-xl)}
  .nav-links a:not(.nav-cta){display:none}
  .nav-toggle{display:flex}
  .mobile-nav[data-open="1"]{display:flex}
  .site-header .wrap{height:58px}
  /* Hero stacks: copy above the waterfall image; keep the airy offset as width allows. */
  .hero-split .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:64px 24px 56px}
  .hero-copy .kicker-row{margin-bottom:32px}
  .hero-copy h1{font-size:2.5rem;margin-bottom:24px}
  .hero-media{min-height:320px}
  .hero-blend{display:none}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .statrow>div{padding:28px 24px}
  .statrow>div:nth-child(odd){border-left:0}
  .statrow>div:nth-child(n+3){border-top:1px solid var(--color-line)}
  .imgcols{grid-template-columns:1fr}
  .pipestrip{grid-template-columns:1fr;gap:40px;padding:48px 0}
  /* KPI hairline row collapses to 2-up; row starts lose the left divider. */
  .g-4>.stat:nth-child(odd){border-left:0;padding-left:0}
  .g-4>.stat:nth-child(n+3){border-top:1px solid var(--color-line)}
  .g-4>.stat,.g-3>.stat,.g-2>.stat{padding:24px 20px}
  .g-3>.stat,.g-2>.stat{border-left:0;padding-left:0}
  .g-3>.stat+.stat,.g-2>.stat+.stat{border-top:1px solid var(--color-line)}
  /* 12 portal tabs wrapped into a tall block on a phone; scroll them in one tidy
     row instead (active tab auto-centred by render()), a familiar mobile pattern. */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center}
}

/* ---- motion: respect prefers-reduced-motion (disable the ambient water loops) ---- */
@media (prefers-reduced-motion: reduce){
  .hero-sheet,.hero-mist{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---- Accessibility: skip link, screen-reader-only text, visible keyboard focus ---- */
/* Visually hidden but available to assistive tech (route announcer + a11y labels). */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Skip-to-content link — off-screen until keyboard-focused, then pinned top-left. */
.skip-link{
  position:absolute;top:-999px;left:8px;z-index:200;
  background:var(--color-primary);color:var(--color-primary-ink);
  padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;
  text-decoration:none;box-shadow:var(--shadow-md);
}
.skip-link:focus{top:8px}
/* A visible focus ring for keyboard users only (mouse clicks stay ring-free). */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
/* The main region + route headings receive focus programmatically on route change —
   suppress the ring there so the a11y focus move is invisible to sighted users. */
#app:focus,#app:focus-visible,#app h1[tabindex]:focus,#app h1[tabindex]:focus-visible{outline:none}

/* ============ Stillwater · DESCENT — home page (owner note-20, 2026-07-08) ============
   The home route is the Descent one-pager: a vertical waterfall down a central axis that
   settles into a still pool. The global header is hidden on this route (body.descent-home);
   Descent carries its own chrome (brand lockup, vertical wayfinding, portal chip).
   Panels 2 (soundings) + 3 (pool) are the owner-feedback rework: labels in glacier (not
   near-invisible mut), a one-line gloss per claim, rings at legible opacity, steps in
   narrative order spreading outward. Never a flat white ground. */
body.descent-home .site-header{display:none}
.dsc{position:relative;background:#E7EDEE;background-image:radial-gradient(90% 60% at 50% 34%,#F0F4F4 0%,#E4EBEC 70%);color:var(--color-ink);overflow:hidden}
/* chrome */
.dsc-brand{position:absolute;left:44px;top:40px;z-index:6;display:flex;align-items:center;gap:14px;color:var(--color-ink)}
.dsc-brand .wm{font-weight:600;font-size:1.4rem;letter-spacing:.02em;line-height:1}
.dsc-brand .eb{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--color-ink-mut);font-style:italic;margin-top:5px}
/* note-27 (2026-07-08): the vertical left rail (.dsc-way) is gone — section links live in a
   horizontal top-right cluster beside the portal chip, brand-teal (4.7:1 on this ground). */
.dsc-portal{position:absolute;right:44px;top:40px;z-index:6;display:flex;align-items:center;gap:28px}
.dsc-topnav{display:flex;align-items:center;gap:24px}
.dsc-topnav a{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary);padding:6px 0}
.dsc-topnav a:hover{color:var(--color-ink);border-bottom:1px solid var(--color-primary)}
.dsc-portal .chip{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--color-primary);border-radius:var(--radius-sm);padding:12px 22px;transition:filter .18s ease}
.dsc-portal .chip:hover{filter:brightness(1.1);color:#fff}
/* the falling axis */
.dsc-fall{position:relative;padding:150px 0 40px}
.dsc-sheet{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:52px;z-index:0;-webkit-mask-image:linear-gradient(#000 64%,transparent);mask-image:linear-gradient(#000 64%,transparent)}
.dsc-sheet::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(44,110,136,.14) 6px 7px)}
.dsc-cline{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);background:linear-gradient(var(--color-primary),rgba(44,110,136,.06));z-index:0}
.dsc-drop{display:inline-block;width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-accent-2);box-shadow:0 0 0 6px rgba(199,122,67,.12)}
.dsc-kicker{position:relative;z-index:1;text-align:center;font-size:.78rem;letter-spacing:.36em;text-transform:uppercase;color:var(--color-ink-mut)}
/* staggered hero */
.dsc-hero{position:relative;z-index:1;text-align:center;line-height:1.14;font-weight:normal;margin:0}
.dsc-hero .l1{font-size:1.5rem;color:var(--color-ink-soft);font-style:italic;font-weight:400;margin-bottom:18px}
.dsc-hero .l2,.dsc-hero .l4{font-weight:500;font-size:3.4rem;color:var(--color-ink)}
.dsc-hero .l3{font-weight:500;font-size:5.4rem;font-style:italic;color:var(--color-primary);line-height:1.02;margin:6px 0}
.dsc-lede{position:relative;z-index:1;max-width:46ch;margin:0 auto;text-align:center;font-size:1.24rem;line-height:1.9;color:var(--color-ink-soft)}
.dsc-scroll{font-size:1.08rem;font-style:italic;color:var(--color-primary);border-bottom:1px solid rgba(44,110,136,.4);padding-bottom:3px}
/* PANEL 2 — soundings: claim + glacier label + gloss, hung off the axis */
.dsc-snd{position:relative;z-index:1}
.dsc-snd .row{display:grid;grid-template-columns:1fr 1fr;padding:30px 0}
.dsc-snd .cell{display:flex;align-items:flex-start;gap:22px}
.dsc-snd .row.l .cell{grid-column:1;justify-self:end}
.dsc-snd .row.r .cell{grid-column:2;justify-self:start}
.dsc-snd .row.l .bd{text-align:right;order:-1}
.dsc-snd .tick{flex:0 0 44px;width:44px;height:1px;background:var(--color-primary);margin-top:1.5rem}
.dsc-snd .v{font-weight:500;font-size:3rem;line-height:1;color:var(--color-ink)}
.dsc-snd .k{margin-top:9px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary)}
.dsc-snd .g{margin-top:10px;font-size:1.02rem;font-style:italic;color:var(--color-ink-soft);max-width:30ch;line-height:1.6}
.dsc-snd .row.l .g{margin-left:auto}
/* PANEL 3 — the pool: heading clear of the rings, legible rings, steps in order */
.dsc-poolsec{position:relative;padding:10px 0 40px}
.dsc-feed{position:absolute;left:50%;top:0;height:470px;transform:translateX(-50%);width:52px;z-index:0;-webkit-mask-image:linear-gradient(#000 46%,transparent);mask-image:linear-gradient(#000 46%,transparent)}
.dsc-feed::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(44,110,136,.14) 6px 7px)}
.dsc-feedline{position:absolute;left:50%;top:0;height:472px;width:1px;transform:translateX(-.5px);background:linear-gradient(rgba(44,110,136,.55),rgba(44,110,136,.1));z-index:0}
.dsc-poolhead{position:relative;z-index:2;text-align:center;padding:26px 24px 34px}
.dsc-poolhead .kick{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:var(--color-primary)}
.dsc-poolhead .kick::after{content:"";width:8px;height:8px;background:var(--color-accent-2);display:inline-block}
.dsc-poolhead h2{margin:14px 0 0;font-weight:500;font-size:1.9rem;line-height:1.3;color:var(--color-ink)}
.dsc-pool{position:relative;z-index:1;width:680px;height:680px;margin:0 auto}
.dsc-pool svg{display:block}
.dsc-pool .clab{position:absolute;left:50%;top:calc(50% + 22px);transform:translateX(-50%);text-align:center;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--color-ink-mut);white-space:nowrap}
.dsc-step{position:absolute;display:flex;align-items:flex-start;gap:14px}
/* note-24: the ripple stays — each text block sits on a feathered backplate of the ground
   colour so the rings pass beneath it instead of through the letterforms. */
.dsc-step .bd{background:rgba(237,242,243,.92);box-shadow:0 0 18px 14px rgba(237,242,243,.92);border-radius:2px}
.dsc-pool .clab{background:rgba(237,242,243,.92);box-shadow:0 0 14px 10px rgba(237,242,243,.92);border-radius:2px}
.dsc-step .tick{flex:0 0 36px;width:36px;height:1px;background:var(--color-primary);margin-top:1.05rem}
.dsc-step .no{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--color-accent-2)}
.dsc-step .t{font-weight:500;font-size:1.5rem;color:var(--color-ink);margin-top:2px;white-space:nowrap}
.dsc-step .d{font-size:.98rem;font-style:italic;color:var(--color-ink-soft);max-width:24ch;line-height:1.5}
.dsc-step.sl{flex-direction:row-reverse;text-align:right}
.dsc-step.sl .d{margin-left:auto}
.dsc-step.s1{left:calc(50% + 104px);top:calc(50% - 34px)}
.dsc-step.s2{right:calc(50% + 116px);top:calc(50% + 56px)}
.dsc-step.s3{left:calc(50% + 186px);top:calc(50% + 158px)}
/* (PANEL 4, channels on the water-line, removed per owner note-24 2026-07-08) */
/* CTA — the still */
.dsc-still{position:relative;padding:150px 24px 170px;text-align:center;background:#EAF0F0;border-top:1px solid #D6E0E2}
.dsc-still h2{font-weight:500;font-size:3.4rem;line-height:1.16;color:var(--color-ink);margin:40px 0 0}
.dsc-still .em{font-style:italic;color:var(--color-primary)}
.dsc-still .btn-still{display:inline-block;margin-top:46px;font-size:1.02rem;letter-spacing:.04em;padding:15px 44px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);transition:filter .18s ease}
.dsc-still .btn-still:hover{filter:brightness(1.1);color:#fff}
.dsc-still .norse{margin-top:34px;font-size:.98rem;font-style:italic;color:var(--color-ink-mut)}
/* spacing helpers used by the view (deliberate ma — do not compress) */
.dsc-sp-18{height:18px}.dsc-sp-26{height:26px}.dsc-sp-40{height:40px}.dsc-sp-48{height:48px}.dsc-sp-52{height:52px}.dsc-sp-72{height:72px}.dsc-sp-96{height:96px}

/* ============ Descent · FOSS STUDIO — author-portal chrome ============
   Handoff spec: docs/design_handoff_stillwater_descent/README.md §2 ("Author dashboard —
   Foss Studio"). Same misty ground as the Descent home; centred FP-mark + STUDIO masthead
   (which is also the way back to the site — the global header is hidden here); centred
   uppercase tab rows; centred title + mono meta; KPI values hung on ONE hairline
   (soundings, not tiles); hairline sections instead of boxed cards. Scoped to body.studio
   (portal routes only) — no other route changes. */
body.studio .site-header{display:none}
body.studio{background:#E7EDEE;background-image:radial-gradient(90% 60% at 50% 18%,#F0F4F4 0%,#E7EDEE 70%);background-attachment:fixed}
body.studio section{background:transparent;padding:30px 0 var(--space-7)}
.stu-who{display:flex;justify-content:flex-end;align-items:center;gap:14px;font-size:var(--text-sm);color:var(--color-ink-mut);margin:0 0 4px;min-height:22px}
.stu-who a{color:var(--color-ink-soft);border-bottom:1px solid transparent;padding-bottom:1px}
.stu-who a:hover{text-decoration:none;color:var(--color-primary);border-bottom-color:var(--color-primary)}
.stu-mast{text-align:center}
.stu-brand{display:inline-flex;align-items:center;gap:12px;color:var(--color-ink);margin-bottom:22px}
.stu-brand:hover{text-decoration:none;color:var(--color-primary)}
.stu-brand svg{width:28px;height:28px;display:block}
.stu-wm{font-size:.96rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600}
/* tab rows: centred, tracked uppercase, active = glacier with a 1px glacier underline */
.studio .tabs{justify-content:center;border-bottom:0;margin:0 0 8px;gap:0}
.studio .tabs a{margin:0 15px;padding:6px 1px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-ink-mut);border-bottom:1px solid transparent}
.studio .tabs a:hover{color:var(--color-ink)}
.studio .tabs a.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.stu-title{text-align:center;margin:30px 0 14px}
.stu-title h1{font-size:2.2rem;font-weight:500;margin:0 0 8px}
.stu-meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--color-ink-mut);margin:0}
.stu-meta a{color:var(--color-ink-soft)}
/* KPI soundings — one hairline across the field; value above the line, tick, label+delta below */
.studio .grid:has(>.stat){border:0;position:relative;gap:0;margin:26px 0 40px}
.studio .grid:has(>.stat)::before{content:"";position:absolute;left:0;right:0;top:88px;height:1px;background:#CBD8DB}
.studio .stat{border:0!important;padding:0 18px!important;display:flex;flex-direction:column;align-items:center;text-align:center;background:transparent}
.studio .stat .n{height:88px;display:flex;align-items:flex-end;padding-bottom:14px;font-size:2.6rem;font-weight:500;line-height:1}
/* long string values (an email, a URL) sit on the same line at text size, not display size */
.studio .stat .n.n-sm{font-size:1.05rem;line-height:1.3;padding-bottom:18px;overflow-wrap:anywhere;max-width:100%;justify-content:center}
.studio .stat .l{order:0;margin:0;padding-top:15px;position:relative}
.studio .stat .l::before{content:"";position:absolute;left:50%;top:0;width:1px;height:9px;background:#B7C6CA}
.studio .stat .sub{margin-top:6px;max-width:30ch}
/* hairline sections instead of boxed cards (artifact boxes — .paste-box, .aplus-mod,
   .lp-check, .modal, .note — keep their own borders on purpose) */
.studio .card{background:transparent;border:0;border-top:1px solid #CBD8DB;border-radius:0;box-shadow:none;padding:20px 2px 6px}
.studio .card.pad-lg{padding:24px 2px 10px}
.studio a.card{transition:border-color .15s ease}
.studio a.card:hover{border-top-color:var(--color-primary)}
.studio .card .ic{background:transparent;margin:0 auto 8px}
@media (max-width:860px){
  /* soundings can't share one line once the grid wraps — fall back to hairline rows */
  .studio .grid:has(>.stat)::before{display:none}
  .studio .stat{border-top:1px solid #CBD8DB!important;padding:16px 8px 12px!important;align-items:flex-start;text-align:left}
  .studio .stat .n{height:auto;padding-bottom:0;align-items:baseline}
  .studio .stat .l{order:-1;padding-top:0;margin-bottom:10px}
  .studio .stat .l::before{display:none}
  .studio .tabs{justify-content:flex-start}
  .stu-title h1{font-size:1.7rem}
  .stu-who{justify-content:center;flex-wrap:wrap}
}
/* responsive */
@media (max-width:1100px){
  .dsc-step.s3{left:calc(50% + 130px)}
}
@media (max-width:860px){
  .dsc-topnav{display:none}
  .dsc-brand{left:20px;top:22px}
  .dsc-brand .eb{display:none}
  .dsc-portal{right:20px;top:22px}
  .dsc-step .t{white-space:normal}
  .dsc-fall{padding-top:130px}
  .dsc-hero .l1{font-size:1.15rem}
  .dsc-hero .l2,.dsc-hero .l4{font-size:2.1rem}
  .dsc-hero .l3{font-size:3.1rem}
  .dsc-lede{font-size:1.08rem;padding:0 24px}
  .dsc-snd .v{font-size:2.2rem}
  .dsc-snd .g{font-size:.94rem;max-width:24ch}
  .dsc-snd .tick{flex-basis:24px;width:24px;margin-top:1.1rem}
  .dsc-snd .cell{gap:12px;padding:0 6px}
  /* pool: rings scale down; steps drop out of the composition into a stacked list */
  .dsc-feed,.dsc-feedline{height:300px}
  .dsc-pool{width:min(88vw,480px);height:auto}
  .dsc-pool svg{width:100%;height:auto}
  /* anchor to the (square) SVG's own height, not the pool box — on mobile the steps stack
     inside .dsc-pool, so a 50%-of-pool anchor lands the caption on top of step 01's text */
  .dsc-pool .clab{top:calc(min(88vw,480px)/2 + 16px)}
  .dsc-step{position:static;margin:26px auto 0;max-width:340px;padding:0 24px}
  .dsc-step.sl{flex-direction:row;text-align:left}
  .dsc-step.sl .d{margin-left:0}
  .dsc-poolhead h2{font-size:1.5rem}
  .dsc-still h2{font-size:2.2rem}
}