/* The edition stylesheet. Rendered once per edition by src/site.js from this include with the
   same config variables as head.html, and linked from head.html after tw.css. Everything
   here was an inline <style> on every page (the premium detail layer from head.html, the skip
   link from nav.html, the full-bleed rules from footer.html): about 25KB repeated 274 times per
   edition. The token layer, the font faces and the canvas ground stay inline in head.html because
   first paint needs them before any stylesheet arrives. */

/* Premium detail layer: cross-fade page transitions (progressive enhancement,
   honors prefers-reduced-motion), branded text selection, smooth anchors. */
@view-transition{navigation:auto}
::selection{background:#8b1538;color:#ffffff}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
/* ── Motion + elevation tokens (2026-07-14 premium pass) ──────────────────
   One signature reveal curve (expo-out) and one hover curve everywhere, so
   every interaction feels like the same hand. Two ambient shadow tokens give
   elevated surfaces real depth instead of reading flat. Retinted for on black (final
   whole-branch review, finding 3): these shadows predate the 2026-09-07 retheme and were
   never touched by it, so they still tinted from the decimal RGB of the paper register's old
   deep-ink token (retired the day --of-ink-deep became white; register-gate.mjs's RETIRED
   list carries its hex, this file no longer does). The One-Black Rule already says every scrim
   settles from rgba(0,0,0,...); a shadow is exactly that, so these settle from black too now. */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-hover:ease;
  --shadow-ambient:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.09);
  --shadow-lift:0 2px 4px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.16);
  /* The keyboard focus ring is a decorative accent seen directly against the black canvas, not
     a fill with white text on it: it needs the LIFTED accent, same as every other on-black
     decorative use (task-2 fix round, finding 6), not the paper-tuned --ofto-primary several
     editions (e.g. balkansutra #1a1a2e) render effectively invisible on black. */
  --ring:#f0577f;
}
/* Accessible focus ring (shadcn convention): a keyboard-only ring with offset,
   never shown on mouse click. Uses the site accent so it stays on-brand. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;border-radius:3px;
}
:where(a,button,input,textarea,select,summary,[tabindex]):focus:not(:focus-visible){outline:none}
/* The wide rail. Every page-level content section uses this and adds no inset of its own; a
   section that adds its own 4-8px is how one nominal rail produced text edges at 160/168/172/176
   across a single page (measured 2026-09-04). max-width 1168 + 24px gutter = a 1120 content box. */
.rail{max-width:1168px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
/* Static-page sections sit inside main.rail, which already carries the gutter. */
.page-column > section{padding-left:0;padding-right:0}
.page-column > section.bg-surface-container-low{padding-left:32px;padding-right:32px}
/* The reading rail: prose only. Corrected again 2026-09-08 (closing round, design/on-black-pr3).
   The prior correction (this same day, "widened toward the spec's literal 68ch") set this to
   788px on the theory that a CSS ch is a character: it is not. ch is defined as the width of the
   font's zero glyph, and Manrope's zero is noticeably wider than its average lowercase letter, so
   "68ch" undershoots the spec's actual intent (a readable measure) by a wide margin. Measured on
   the built output with Manrope actually loaded -- walking every real paragraph in
   .fh-story-body and .article-body character by character with a Range, grouping into visual
   lines by line-box top, and dropping each paragraph's ragged last line, per this task's own
   method -- 788px rendered 85-96 characters on a full line across both surfaces, well past the
   65-75 characters the readable-measure convention actually asks for. This rule now sets the
   column by that measured character count, not by ch: 650px puts .fh-story-body (src/founder.js)
   at 69.5-71.4 characters average per full line across three chronicled founder pages, and
   .article-body at 65.4-68.3 across six essay/post pages, both centred inside the 65-72 target
   band at 1440/1280/768 (this rule carries no responsive width bump, so the figure holds across
   all three; 390px is reported in the same measurement pass but not held to this band). Font size
   and colour are unchanged; only the column width moved. Sits centred inside .rail. 650px is
   deliberately the same content width src/founder.js's .fh-story lands on (698px outer minus its
   48px horizontal padding) -- test/seam-balance.test.js's "the cream story shares the record
   column axis" pins that the two stay numerically equal, so a record-only founder page's cream
   zone (which reuses this very class) lines up with a chronicled page's .fh-story text edge. */
.reading{max-width:650px;margin-left:auto;margin-right:auto}
/* The anchor line in the closing band: the record's proof at the moment of the ask. The hash is
   the one place on this surface that earns the monospace face (DESIGN.md reserves it for sha256).
   Quiet by default and lifting on hover -- it is evidence, not a call to action competing with
   the subscribe pill above it. */
.cta-anchor{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:22px;min-height:44px;padding:6px 2px;text-decoration:none;
  font-family:'Manrope',sans-serif;font-size:13px;letter-spacing:.01em;
  color:rgba(255,255,255,var(--ofto-fg60));transition:color .2s var(--ease-out-expo)}
.cta-anchor:hover,.cta-anchor:focus-visible{color:rgba(255,255,255,var(--ofto-fg85))}
.cta-anchor-b{font-size:13px;opacity:.8}
.cta-anchor-sep{opacity:.45}
.cta-anchor-h{font-family:monospace;font-size:12px;
  letter-spacing:.04em;color:rgba(255,255,255,var(--ofto-fg85));border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px}
.cta-anchor:hover .cta-anchor-h,.cta-anchor:focus-visible .cta-anchor-h{border-bottom-color:rgba(255,255,255,.7)}
/* head.html's own background-color override dropped .cta-close from its selector list here
   (on-black spec 2026-09-07: "the CTA band is a full-bleed brand gradient with white text"): the
   closing band (_shared/includes/cta.html, src/founder.js's identical copy, and the sites/*/pages/
   sponsor.html panels that port it inline) no longer carries bg-primary or white text at all, so
   forcing that fill back onto it there would just repaint the retired look on top of the new one.
   The override's other two clauses stay live for unrelated consumers this task did not touch:
   .bg-primary.text-on-primary (record.js/site.js check-a-record and sponsor buttons, home.js's
   postGrid subscribe card) and .bg-primary.text-white (subscribe.js's 'dark'-variant button, used
   by the inline post-page subscribe card). */
/* The closing CTA (_shared/includes/cta.html, src/founder.js's identical copy, and the sponsor
   pages that port it inline) is a full-bleed band: it spans the page, so it has no corners to
   round and nothing beside it to cast a shadow onto. Inside the static template's reading column
   it cannot span anything, and a band that does not bleed is just a flat rectangle -- the "flat
   clone" the 2026-07-25 unfork audit was fought over. There it stays the signature plate it has
   always been. Re-tokened onto the register (on-black spec 2026-09-07): the band no longer paints
   its own brand fill (background-color forced via head.html retired with the gradient/grain
   layers), so it needs its own separation now. The full-bleed band gets a hairline top rule, the
   same device .home-proof (home.js) already uses for the same reason. The column plate keeps its
   radius and shadow but trades the top rule for a hairline ring all the way round (border-top:none
   plus an inset box-shadow), since a lone top edge would look like an accident on a bordered card
   rather than the deliberate all-round separation .cta-band.test.js's radius/shadow pair expects. */
.cta-close{background:var(--ob-ground);border-top:1px solid var(--ob-hairline)}
.page-column .cta-close{border-top:none;border-radius:.125rem;box-shadow:inset 0 0 0 1px var(--ob-hairline),var(--shadow-ambient)}
/* The @tailwindcss/forms base `input:focus` rule (specificity (0,1,1)) beats the :where()-zeroed
   ring above (0,1,0) on every real input network-wide, replacing the engineered --ring outline
   with a generic-blue box-shadow ring (Lane-3 CONCERNS finding 2026-07-26). This element-typed
   :focus-visible rule (spec (0,1,1)) reliably wins on inputs, restores the brand --ring outline,
   and clears the forms box-shadow ring. WITHOUT a :focus rule (no ring on mouse click). */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:none}
/* On the dark hero, the ring switches to the network ink for contrast. */
body.home-hero .hh :focus-visible,.hc-flip:focus-visible{outline-color:var(--ob-ink)}
/* Brand-ground inputs (the newsletter form on a `.bg-primary` panel. Cta.html, the
   subscribe card, the founder-page follow panel) sit on a background that IS --ring
   (Fix loop 2 finding 2026-07-26): the input:focus-visible rule above paints the ring
   the exact color of the surface it sits on, so it's invisible. Same fix as the dark
   hero above, scoped to the class so it beats the element-typed rule (0,2,1) > (0,1,1). */
.bg-primary input:focus-visible,.bg-primary textarea:focus-visible,.bg-primary select:focus-visible{outline-color:var(--ob-ink)}
/* Crisp type on non-retina screens. Thin weights read anemic without this. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Founder intent: nothing on the site renders on a slant. Global reset closes the
   UA-default font-style vector for any bare <em>/<i> emitted outside .article-body
   (e.g. the homepage hero tagline), not just the scoped .article-body em rule. */
em,i{font-style:normal}
/* Standardized micro-label rhythm: consistent tracking + weight for every
   label, whether or not an element also sets its own tracking utility. Corrected 2026-09-08
   (whole-branch review, design/on-black-pr3, finding 1): the previous version of this comment
   claimed "every label that used to rely on caps now sets its own tracking explicitly (.02 to
   .04em)," as if that covered every label network-wide -- it did not. About 30 font-label usages
   (src/cards.js's chronicle byline, src/home.js's "Also from this editor" links, and each
   edition's about.html author block) carry no tracking utility of their own and so inherited
   whatever this base rule declared, which was still .14em, roughly five times the .02-.04em band
   the Inscription Rule sets for an 11-12.5px sentence-case label. The base value below is now
   .03em, itself within that band, so a label needs no tracking utility of its own to comply;
   `tracking-wide` and hand-written letter-spacing on the labels that do carry one are harmless,
   redundant overrides at the same value rather than the thing making this rule's labels legal. */
.font-label{letter-spacing:.03em;font-weight:500}
/* The pill token (DESIGN.md rounded.pill = 9999px). tailwind.config.js maps rounded-full to 12px
   (rounded.full), so Tailwind-surface "pills" are actually rectangles; this utility gives register-
   surface primary buttons a TRUE pill without touching the network-wide rounded-full mapping
   (that sweep is Lane 4. Impeccable audit 2026-07-25). */
.rounded-pill{border-radius:9999px}
/* On-black pill accent (spec 2026-09-07, retires the periwinkle vault-voice accent): every
   sponsor page renders on ofto-dark, where the per-edition primary fails AA against black.
   --ofto-primary-on-black is the sanctioned pill fill; text on a solid-colour fill is black,
   never white (section 3). */
.pill-vault{background:var(--ofto-primary-on-black);color:var(--ob-ground)}.pill-vault:hover{background:var(--ofto-primary-on-black)}
/* THE SEARCH FIELD (one shared component set, 2026-09-04). One gesture -- type a name, narrow
   the record -- shipped four ways: a white pill with a "/" hint on /founders/, an underline with
   no box on /investors/, a 2px 70px-tall rectangle on /check/ that sat flush against a PILL
   button in the same row, and a translucent pill on /map/. Three placeholder tones, three type
   ramps, and a visible focus rule on two of the four. The pill was already the majority and is
   the product's shape everywhere else, so the pill wins; register and size are modifiers, not
   new components.field-search        on black (spec 2026-09-07): black fill, white hairline
     .field-search--vault translucent white on the same black ground
     .field-search--lg    the hero-scale field (/check/), where the input IS the page
   Focus is the network ring (input:focus-visible above), not a per-surface invention. */
.field-search{width:100%;box-sizing:border-box;min-height:46px;padding:11px 20px;border-radius:9999px;
  background:var(--ob-ground);border:1px solid var(--ob-hairline);color:var(--of-ink-deep);
  font-family:'Manrope',sans-serif;font-size:14px;line-height:1.5}
.field-search::placeholder{color:var(--ob-muted)}
.field-search--vault{background:rgba(255,255,255,.06);border-color:var(--ob-hairline);color:var(--ob-ink)}
.field-search--vault::placeholder{color:var(--ob-muted)}
.field-search--lg{min-height:70px;padding:16px 28px;font-size:20px}
/* Signature hover for clickable pills/buttons: lift + soft shadow, one curve. */
.btn-lift{transition:transform .25s var(--ease-out-expo),box-shadow .25s var(--ease-out-expo),background-color .2s var(--ease-hover),color .2s var(--ease-hover)}
.btn-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
/* Press snaps (~100ms), release keeps the slow curve. Asymmetric on purpose. */
.btn-lift:active{transform:translateY(0) scale(.99);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.btn-lift,.btn-lift:hover,.btn-lift:active{transition:none;transform:none}}
/* Scroll-reveal marker only. The entrance itself is layered on via the Web
   Animations API (see head script), so the CSS resting state stays fully
   visible for no-JS / reduced-motion. No FOUC, nothing trapped hidden. */
.reveal{will-change:opacity,transform}
/* .glass-nav removed (final whole-branch review, finding 3): no element in nav.html or any
   composer ever carries this class (home.js and founder.js's own comments already said so for
   their .glass-nav-scoped overrides), so the rule shipped in every edition's site.css and
   nowhere ever matched. It was also a white-ground offence, rgba(255,255,255,.88), that the
   widened register-gate now reads. Dead and retired together rather than corrected in place. */
/* .drop-cap::first-letter removed (on black, PR3 task 2): the same audit this Panchang/Newsreader
   sweep ran elsewhere found no markup anywhere on the network carrying class="drop-cap" (the
   scoped .article-body variant below, added later, is the one every template actually uses) --
   dead CSS shipping the retired face for nothing, the same fate .glass-nav met above. */
.editorial-inset{margin-left:15%;margin-right:5%}
.grainy-overlay::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.04;pointer-events:none}
.card-hover{transition:box-shadow .28s var(--ease-out-expo),transform .28s var(--ease-out-expo)}
.card-hover:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.card-hover:active{transform:translateY(-1px) scale(1)}
@media (prefers-reduced-motion: reduce){.card-hover,.card-hover:hover,.card-hover:active{transition:none;transform:none}}
/* Device-aware flip affordance: "Tap" on touch, "Click" where a fine pointer hovers. */
.flip-click{display:none}
@media (hover:hover) and (pointer:fine){.flip-tap{display:none}.flip-click{display:inline}}

/* ─────────────────────────────────────────────────────────────
   Magazine-grade article body (ADR 0014, Generalist DNA)
   ───────────────────────────────────────────────────────────── */
.article-body{font-family:'Manrope',sans-serif;font-size:1.1875rem;line-height:1.75;color:var(--ob-ink-reading)}
@media(min-width:768px){.article-body{font-size:1.25rem;line-height:1.78}}
.article-body p{margin:0 0 1.5rem 0}
.article-body p:last-child{margin-bottom:0}
.article-body strong{font-weight:600;color:var(--ob-ink)}
.article-body em{font-style:normal}
/* Hover: the standing underline hands off to a sweep that redraws it left to right
   (skiper40/000 port). background-size, not a positioned pseudo-element, because
   absolute pseudo-elements break on inline links that wrap across lines. Replaces the
   old opacity dim, which was the one hover that REDUCED text contrast. */
.article-body a{color:#f0577f;text-decoration:underline;text-underline-offset:0.2em;text-decoration-thickness:1px;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .34s cubic-bezier(.625,.05,0,1),text-decoration-color .34s ease}
.article-body a:hover{text-decoration-color:transparent;background-size:100% 1px}
/* Outward links that end in an arrow glyph nudge it on hover (skiper40/001, reduced:
   no arrows are added anywhere they don't already exist). */
.ofto-arw{display:inline-block;transition:transform .3s cubic-bezier(.625,.05,0,1)}
a:hover .ofto-arw{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.article-body a{transition:none}.article-body a:hover{text-decoration-color:currentColor;background-size:0% 1px}.ofto-arw{transition:none}a:hover .ofto-arw{transform:none}}

/* Section headings: Origin / Bet / Compounding Move / Lesson (ADR 0015, Semafor structure) */
.article-body h2{
  font-family:var(--font-display);font-size:2.25rem;font-weight:400;
  line-height:1.15;letter-spacing:-0.01em;
  margin:3.5rem 0 1.5rem 0;color:var(--ob-ink);position:relative;padding-top:1rem
}
@media(min-width:768px){.article-body h2{font-size:2.75rem;margin-top:4.5rem}}
.article-body h2::before{
  content:attr(data-label);display:block;
  font-size:0.6875rem;font-style:normal;font-weight:600;letter-spacing:0.03em;
  color:#f0577f;margin-bottom:1rem
}
.article-body h2:first-child{margin-top:0}

.article-body h3{
  font-family:var(--font-display);font-size:1.5rem;font-weight:400;
  line-height:1.3;margin:2.25rem 0 0.875rem 0;color:var(--ob-ink)
}

/* Pull-quote: rare, used for a single line that earns the spotlight. Kept in the display face's
   sibling voice -- the retired reading serif, Newsreader -- as the one surface the spec allows to
   survive display's retirement (section 3): the SAME pull-quote role as founder.js's
   .fh-story-body blockquote.pullquote, mirrored here for the standalone /post/ and /essay/
   templates (that file's own comment already called this class family a 1:1 mirror of this one:
   same h2, same h3, same pullquote and paragraph rhythm). Two selectors, one kept voice, since the
   two never render on the same page. */
.article-body blockquote.pullquote{
  font-family:'Newsreader',serif;font-weight:300;
  font-size:1.75rem;line-height:1.3;letter-spacing:-0.005em;
  padding:1.25rem 0 0.5rem;margin:3rem auto;color:var(--ob-ink);max-width:38em;text-align:center
}
.article-body blockquote.pullquote::before{content:"";display:block;width:38px;height:2px;background:#f0577f;margin:0 auto 1.1rem}
@media(min-width:768px){.article-body blockquote.pullquote{font-size:2rem;margin:3.5rem 0}}

/* Section ornament: visual breath between major beats. Use sparingly. */
.article-body hr.ornament{border:none;height:1.5rem;margin:2.5rem auto;text-align:center;position:relative}
.article-body hr.ornament::after{content:"\2022   \2022   \2022";letter-spacing:1.25em;color:var(--ob-dim);font-size:0.625rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* Drop cap variant scoped to article-body (replaces .drop-cap on the wrapper) */
.article-body > p:first-of-type::first-letter,
.article-body .lede::first-letter{font-family:var(--font-display);font-size:4.5rem;float:left;line-height:.9;margin:0 0.12em 0 0;color:#f0577f}

/* ─────────────────────────────────────────────────────────────
   Founder Takeaways block (ADR 0016, Lenny's swipe pattern)
   ───────────────────────────────────────────────────────────── */
.takeaways{margin:4rem 0 2rem 0;padding:2rem 1.75rem;background:var(--ob-ground);border-top:3px solid #f0577f}
@media(min-width:768px){.takeaways{padding:2.5rem 2.25rem;margin:5rem 0 2rem 0}}
/* Bumped 0.625rem (10px) -> 0.6875rem (11px) while retiring the font-family (on black, PR3 task
   2): the constitution's own size floor is "nothing below 11px that is not a hash or a
   coordinate", which this label already violated before this rule ever named Panchang. */
.takeaways__label{font-size:0.6875rem;font-weight:600;letter-spacing:0.03em;color:#f0577f;display:block;margin-bottom:1.5rem}
.takeaways__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem}
.takeaways__item{display:flex;gap:1.25rem;align-items:flex-start}
.takeaways__num{font-family:var(--font-display);font-weight:400;font-size:1.875rem;line-height:1;color:#f0577f;min-width:2.25rem;flex-shrink:0;letter-spacing:-0.02em}
.takeaways__text{font-family:'Manrope',sans-serif;font-size:1rem;line-height:1.55;color:var(--ob-ink);flex:1;font-weight:500;letter-spacing:-0.005em}
@media(min-width:768px){.takeaways__text{font-size:1.0625rem}}

/* ─────────────────────────────────────────────────────────────
   Editor byline block (ADR 0017, named editor authority)
   ───────────────────────────────────────────────────────────── */
.editor-byline{display:flex;align-items:center;gap:0.875rem}
.editor-byline__avatar{width:2.75rem;height:2.75rem;border-radius:9999px;background:#8b1538;color:#ffffff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:400;font-size:1.125rem;flex-shrink:0;overflow:hidden}
.editor-byline__avatar img{width:100%;height:100%;object-fit:cover}
.editor-byline__meta{display:flex;flex-direction:column;line-height:1.2}
.editor-byline__name{font-family:'Manrope',sans-serif;font-size:0.875rem;font-weight:600;color:var(--ob-ink)}
.editor-byline__role{font-size:0.6875rem;letter-spacing:0.03em;color:var(--ob-muted);margin-top:0.25rem}

/* WhatsApp share button colour (used inline; class makes it themeable) */
.share-btn{width:2.5rem;height:2.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ob-hairline);background:transparent;cursor:pointer;transition:background-color 0.15s ease}
.share-btn:hover{background:var(--ob-hairline)}
.share-btn svg{width:1rem;height:1rem}
.share-btn--whatsapp:hover{background:#25d366;color:#ffffff;border-color:#25d366}

/* Skip link: off-screen until it takes keyboard focus, then a real on-canvas control. */
  .skip-link{position:fixed;top:8px;left:8px;z-index:80;transform:translateY(-140%);background:var(--ob-ground);color:var(--ob-ink);border:1px solid var(--ob-hairline);border-radius:9999px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-size:12px;font-weight:600;letter-spacing:.03em;text-decoration:none;transition:transform .18s var(--ease-hover)}
  .skip-link:focus{transform:translateY(0);outline:2px solid var(--ob-ink);outline-offset:2px}
  /* html.light retired (spec 2026-09-07): every page now takes the dark branch, so the light
     variant of the skip link never rendered again; removed rather than left as dead retired-hex
     CSS the register gate would still catch in the built output. */
  /* .ofto-topstripe (the national flag stripe) retired here on-black spec 2026-09-07: see
     _shared/includes/nav.html for the removal note. */
  /* Frosted disc backplate (impeccable trust-chrome, 2026-07-27): both controls were naked
     glyphs (background:none), which collided with content on 15+ critique tiles including
     form inputs. Geometry normalized to match: back now gets the same 44px min box as the
     menu (was unset -> ~42px effective), and both align to top:18/left|right:20 (back was
     20/22). Hover opacity .92->1 replaces the old .82->1 (no test pins .82). */
  .ofto-menu{position:fixed;top:18px;right:20px;z-index:55;min-width:44px;min-height:44px;padding:6px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:9999px;color:var(--ob-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:opacity .2s}
  .ofto-menu:hover{opacity:1}
  .ofto-menu svg{width:28px;height:28px}
  /* Back control: same treatment as the menu button, mirrored to the top-left. It is a real
     link to a sensible parent page (works with JS off / direct landings); the inline script
     below upgrades it to true history.back() when the visitor arrived from within the site. */
  /* The corner mark: the edition's name, small, top-left, on every page, as a link home.
     Aligned to the 44px discs' own centre line so the corner reads as one row. It steps right
     when a back control is present (:has on the adjacent sibling), so neither has to know about
     the other at build time. Archivo, because the Inscription Rule reserves caps for the
     statement face and this is the one small place caps are legal. No font-weight is declared:
     Archivo ships a single 800 cut, so it renders at 800 either way, and design-constitution
     bans the literal outside @font-face. Same precedent as .hstate-caps. */
  /* Section rhythm (spec 2026-09-07, section 3: "Section gap 90px on desktop, 56px on phones").
     It was never a system: the homepage shipped 56, 60, 64 and 76px gaps through two different
     mechanisms, and none of them changed on a phone, so the page read the same density at 390 as
     at 1440. Two steps, not one number. --ob-section separates sections that argue different
     things; --ob-section-tight joins a section to the one it continues, which is why the vitals
     sit close under the record grid they count. Any other value is drift. */
  @media(max-width:600px){:root{--ob-section:56px;--ob-section-tight:32px}}
  .ofto-mark{position:fixed;top:18px;left:20px;z-index:55;height:44px;display:flex;align-items:center;font-family:var(--font-statement);text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--ob-ink);text-decoration:none;opacity:.92;transition:opacity .2s;white-space:nowrap}
  .ofto-mark:has(+ .ofto-back){left:76px}
  @media(hover:hover){.ofto-mark:hover{opacity:1}}
  @media(max-width:600px){.ofto-mark{left:16px;font-size:12px}.ofto-mark:has(+ .ofto-back){left:68px}}
  .ofto-back{position:fixed;top:18px;left:20px;z-index:55;min-width:44px;min-height:44px;padding:8px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:9999px;color:var(--ob-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:opacity .2s}
  /* html.light retired (spec 2026-09-07): every page is the dark canvas now, so the corner
     controls never flip -- the light-canvas variant is removed rather than left as dead
     retired-hex CSS the register gate would still catch in the built output. */
  /* Phone adapt (critique 2026-09-02 23:44, P1): on narrow screens the fixed corner discs covered
     the first 60px of every line-start once the page scrolled. nav.html sets html.ofto-chrome-away
     after 80px of downward travel and clears it on any upward travel; the discs retract off the top
     edge and return on the same curve. A focused control never retracts, and the open menu is not
     affected (its own close control lives inside the panel). Desktop keeps the discs in place. */
  @media(max-width:899px){
    .ofto-menu,.ofto-back{transition:opacity .2s,transform .32s var(--ease-out-expo,cubic-bezier(.16,1,.3,1))}
    html.ofto-chrome-away .ofto-menu:not(:focus-visible):not([aria-expanded="true"]),html.ofto-chrome-away .ofto-back:not(:focus-visible),html.ofto-chrome-away .ofto-mark:not(:focus-visible){transform:translateY(-84px)}
    @media(prefers-reduced-motion:reduce){.ofto-menu,.ofto-back{transition:opacity .2s}}
  }
  .ofto-back:hover{opacity:1}
  .ofto-back svg{width:26px;height:26px}
  /* Menu: scrim + side panel, not a full-screen takeover. The page you were on stays visible
     under the scrim (you never lose your place); the panel is sized to its content. Roughly
     two-thirds of the viewport on desktop, a near-full sheet with a page peek on phones.
     Resting states are instant via the .mob-open class (never transition-dependent);
     the open/close motion is layered on top with the Web Animations API in JS. */
  .mob-overlay{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none}
  .mob-overlay.mob-open{opacity:1;visibility:visible;pointer-events:auto}
  .mob-panel{width:min(66vw,880px);height:100%;display:flex;flex-direction:column;padding:0 clamp(28px,4.5vw,64px) calc(28px + env(safe-area-inset-bottom));background:rgba(0,0,0,.96);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);border-left:1px solid var(--ob-hairline);box-shadow:-32px 0 72px rgba(0,0,0,.42)}
  @media(max-width:900px){.mob-panel{width:min(92vw,460px)}}
  .mob-head{display:flex;justify-content:space-between;align-items:center;padding:22px 0 0}
  .mob-logo{font-size:20px;color:var(--ob-ink);letter-spacing:-.01em}
  .mob-close{background:none;border:0;color:var(--ob-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;margin:-6px -6px 0 0}
  .mob-close svg{width:30px;height:30px}
  /* Two zones when the panel is wide: primary links left, subscribe + coords as a right rail.
     The width is earned by content, not padded emptiness. Narrow panels stack, rail at the foot. */
  .mob-body{flex:1;display:flex;flex-direction:column;min-height:0}
  .mob-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:min(2.6vh,20px)}
  .mob-links a{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-.015em;color:var(--ob-ink);text-decoration:none;transition:color .2s;position:relative;display:inline-flex;align-items:center;min-height:44px}
  .mob-links a:hover{color:var(--ofto-primary-on-black)}
  .mob-links a:active{color:var(--ofto-primary-on-black)}
  /* Underline sweep (skiper40/000 port): draws in from the left, exits right. Line sits on
     currentColor so it follows the hover color shift; align-self keeps ::after to the text
     width in the column flex parent. */
  .mob-links a{align-self:flex-start}
  .mob-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .34s cubic-bezier(.625,.05,0,1)}
  .mob-links a:hover::after{transform:scaleX(1);transform-origin:left}
  @media (prefers-reduced-motion:reduce){.mob-links a::after{content:none}}
  .mob-foot{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
  /* Cream is the one solid pill network-wide (DESIGN.md section 2); this one used to paint
     var(--ob-cream) too, a second cream fill invisible to the old hero test because it scans only
     a page's own inline CSS, and this rule ships in the linked site.css. Moved to the edition
     accent, the same swap the CTA band's Subscribe pill already made for the same reason (final
     whole-branch review, design/on-black-pr2, finding 3; closing review, finding 13). */
  .mob-sub{display:block;text-align:center;background:var(--ofto-primary-on-black);color:var(--ob-ground);border-radius:9999px;padding:16px 34px;font-size:12px;font-weight:600;letter-spacing:.03em;text-decoration:none}
  .mob-coords{font-size:11px;letter-spacing:.03em;color:var(--ob-muted);white-space:nowrap}
  @media(min-width:900px){
    .mob-body{flex-direction:row;align-items:center;gap:clamp(32px,5vw,72px)}
    .mob-links{flex:1.2}
    .mob-foot{flex:.8;justify-content:center;border-left:1px solid var(--ob-hairline);padding-left:clamp(28px,3.5vw,56px);align-self:stretch}
  }
  @media(max-width:899px){
    .mob-foot{align-items:stretch;padding-bottom:2px}
    .mob-sub{padding:16px 0}
    .mob-coords{text-align:center}
  }

/* Full-bleed: no page body carries inline padding (audited 2026-07-25 across every template),
     so a plain block-level footer already spans edge-to-edge. The old margin-inline:-24px hack
     assumed a 24px-padded flex body that no longer exists anywhere. It pushed the footer 24px
     past the viewport on both sides (clipped colophon glyphs on mobile, horizontal scroll
     everywhere). align-self:stretch is kept for any future flex ancestor; width stays content-box
     natural (no 100vw => no scrollbar risk).
     On black (spec 2026-09-07): every page is the same dark vault footer now (founder / record /
     check / essay home / the record-edition homepage alike) -- there is no second, paper variant
     to adapt to any more. One footer, one material. */
  .ofto-footer{align-self:stretch;background:var(--ob-ground);color:var(--ob-ink);border-top:none;padding:clamp(68px,8vw,108px) clamp(24px,4vw,56px) 52px;text-align:left}
  .ofto-footer-inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
  .ofto-footer-top{display:flex;flex-direction:column;gap:26px}
  .ofto-footer-brand{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.2vw,48px);line-height:.98;letter-spacing:-.02em;color:var(--ob-ink);margin:0}
  .ofto-footer-rule{width:46px;height:2px;border-radius:2px;background:var(--ob-hairline);margin:20px 0 0}
  .ofto-footer-tag{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.55;color:var(--ob-muted);margin:16px 0 0;max-width:34ch}
  /* Footer as sitemap (2026-09-02): three headed columns of body-face rows under Panchang labels,
     two-up on phones, three-up beside the brand column from 760px. Each row is a 40px hit area. */
  .ofto-footer-links{display:block}
  .ofto-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .ofto-footer-col ul{list-style:none;margin:0;padding:0}
  .ofto-footer-colh{font-size:11px;letter-spacing:.03em;color:var(--ob-muted);margin:0 0 8px}
  .ofto-footer-links a{font-family:'Manrope',sans-serif;font-size:13.5px;line-height:1.4;color:var(--ob-muted);text-decoration:none;transition:color .2s;position:relative;display:inline-flex;align-items:center;min-height:44px}
  .ofto-footer-links a:hover{color:var(--ob-ink)}
  /* Underline sweep, same grammar as the nav panel. */
  .ofto-footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.625,.05,0,1)}
  .ofto-footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
  @media (prefers-reduced-motion:reduce){.ofto-footer-links a::after{content:none}}
  /* The verification line is the brand's differentiator. Give it colophon weight, not fine print. */
  .ofto-footer-proof{font-size:15px;line-height:1.5;color:var(--ob-ink);max-width:52ch;padding-top:26px;border-top:1px solid var(--ob-hairline)}
  .ofto-footer-proof a{color:var(--ob-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .ofto-footer-proof a:hover{color:#f0577f}
  /* The non-affiliation disclaimer (final whole-branch review, finding 1), restored network-wide
     at the footer's own scale: muted, small, not the colophon-weight voice .ofto-footer-proof
     gets (that line is the brand's differentiator; this one is a legal footnote). Sits directly
     above the base row, no border of its own, so it reads as part of that row's register rather
     than opening a fourth hairline block. */
  .ofto-footer-note{font-family:'Manrope',sans-serif;font-size:11.5px;line-height:1.5;color:var(--ob-muted);max-width:60ch;margin:18px 0 0}
  .ofto-footer-base{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--ob-hairline)}
  .ofto-footer-copy{font-size:11px;letter-spacing:.03em;color:var(--ob-muted)}
  .ofto-footer-edition{font-size:11px;letter-spacing:.03em;color:var(--ob-muted)}
  /* The edition label is the network's only outbound link from an edition page (entity audit
     2026-07-30). It inherits the label's recessive tone rather than reading as a CTA.
     It carries the same 44px hit area as the legal links below, by the same means (measured
     2026-09-06: it was the one target on the network failing WCAG 2.2 SC 2.5.8 outright, 168x14
     at 390 with the copyright line inside its 24px circle). The negative block margin keeps the
     visual row exactly where it was, so this buys the hit area and moves nothing. */
  .ofto-footer-edition a{color:inherit;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:44px;margin-block:-16px}
  .ofto-footer-edition a:hover{color:var(--ob-ink);text-decoration:underline;text-underline-offset:3px}
  /* Legal moved from the link columns to the base row: same recessive label voice as the copy
     line, 44px hit areas without moving the visual row (WCAG 2.5.8). */
  .ofto-footer-legal{display:inline-flex;gap:20px}
  .ofto-footer-legal a{font-size:11px;letter-spacing:.03em;color:var(--ob-muted);text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:44px;margin-block:-16px}
  .ofto-footer-legal a:hover{color:var(--ob-ink)}
  @media(min-width:760px){
    .ofto-footer-top{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:56px}
    .ofto-footer-links{flex:1 1 auto;max-width:64%}
    .ofto-footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
    .ofto-footer-base{flex-direction:row;align-items:center;gap:28px}
    .ofto-footer-edition{margin-left:auto}
  }

  /* One premium colophon on every register. The footer was register-adaptive (a weak pale-cream
     variant on html.light homepages, which read as unfinished); it now closes every page. Light
     record homepage or dark vault artifact. With the same deep-ink premium colophon, so the
     footer always feels like a deliberate foot to the page rather than a faded afterthought.
     Full-bleed dark on a light body is an intentional, premium bookend. */