/* 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:#0041c8;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. */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-hover:ease;
  --shadow-ambient:0 1px 2px rgba(20,20,15,.05),0 8px 24px rgba(20,20,15,.09);
  --shadow-lift:0 2px 4px rgba(20,20,15,.06),0 18px 40px rgba(20,20,15,.16);
  --ring:#0041c8;
}
/* 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 @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 warm off-white for contrast. */
body.home-hero .hh :focus-visible,.hc-flip:focus-visible{outline-color:#f4f1ea}
/* 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:#f4f1ea}
/* 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
   Panchang uppercase label, unless an element sets its own tracking. */
.font-label{letter-spacing:.14em;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}
/* Vault-voice pill accent: every sponsor page renders on ofto-dark (build.js:5081-5086), where the
   per-edition primary fails AA (DESIGN.md:209). Periwinkle is the sanctioned vault accent for pill
   intent — rest #c7d0ff / active #8ea4ff (impeccable audit 2026-07-27). */
.pill-vault{background:#c7d0ff;color:#0b0d11}.pill-vault:hover{background:#8ea4ff}
/* One portrait pipeline (constitution 2026-08-15): a face on any card surface is always the
   record's duotone — vault floor to periwinkle ceiling via the #rcard-duo SVG filter that
   nav.html puts on every page. The record instrument's grayscale(1) evidence grade is the
   only other legal photo treatment; raw color portraits are banned network-wide. */
.of-duotone{filter:contrast(1.24) brightness(.97) url(#rcard-duo)}
/* 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{background:rgba(250,249,244,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.drop-cap::first-letter{font-family:'Newsreader',serif;font-size:4.5rem;float:left;line-height:.9;margin-right:.12em;color:#0041c8}
.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:#1b1c19}
@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:#1b1c19}
.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:#0041c8;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:'Newsreader',serif;font-size:2.25rem;font-weight:300;
  line-height:1.15;letter-spacing:-0.01em;
  margin:3.5rem 0 1.5rem 0;color:#1b1c19;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-family:'Panchang',sans-serif;
  font-size:0.6875rem;font-style:normal;font-weight:600;letter-spacing:0.3em;
  text-transform:uppercase;color:#0041c8;margin-bottom:1rem
}
.article-body h2:first-child{margin-top:0}

.article-body h3{
  font-family:'Newsreader',serif;font-size:1.5rem;font-weight:400;
  line-height:1.3;margin:2.25rem 0 0.875rem 0;color:#1b1c19
}

/* Pull-quote: rare, used for a single line that earns the spotlight */
.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:#1b1c19;max-width:38em;text-align:center
}
.article-body blockquote.pullquote::before{content:"";display:block;width:38px;height:2px;background:#0041c8;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:rgba(67,70,86,0.35);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:'Newsreader',serif;font-size:4.5rem;float:left;line-height:.9;margin:0 0.12em 0 0;color:#0041c8}

/* ─────────────────────────────────────────────────────────────
   Founder Takeaways block (ADR 0016, Lenny's swipe pattern)
   ───────────────────────────────────────────────────────────── */
.takeaways{margin:4rem 0 2rem 0;padding:2rem 1.75rem;background:#f5f4ef;border-top:3px solid #0041c8}
@media(min-width:768px){.takeaways{padding:2.5rem 2.25rem;margin:5rem 0 2rem 0}}
.takeaways__label{font-family:'Panchang',sans-serif;font-size:0.625rem;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:#0041c8;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:'Newsreader',serif;font-weight:300;font-size:1.875rem;line-height:1;color:#0041c8;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:#1b1c19;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:#0041c8;color:#ffffff;display:flex;align-items:center;justify-content:center;font-family:'Newsreader',serif;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:#1b1c19}
.editor-byline__role{font-family:'Panchang',sans-serif;font-size:0.6875rem;letter-spacing:0.15em;text-transform:uppercase;color:#5f5e5e;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 rgba(195,197,217,0.5);background:transparent;cursor:pointer;transition:background-color 0.15s ease}
.share-btn:hover{background:#f5f4ef}
.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:#0b0d11;color:#f4f1ea;border:1px solid rgba(244,241,234,.4);border-radius:9999px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-family:'Panchang',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:transform .18s var(--ease-hover)}
  .skip-link:focus{transform:translateY(0);outline:2px solid #f4f1ea;outline-offset:2px}
  html.light .skip-link{background:#faf9f4;color:#1b1c19;border-color:rgba(27,28,25,.35)}
  /* National flag stripe: a thin full-bleed band pinned to the very top edge of the page. */
  .ofto-topstripe{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none}
  /* 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(11,13,17,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:9999px;color:#f4f1ea;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. */
  .ofto-back{position:fixed;top:18px;left:20px;z-index:55;min-width:44px;min-height:44px;padding:8px;background:rgba(11,13,17,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:9999px;color:#f4f1ea;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:opacity .2s}
  /* Light-canvas pages (html.light, e.g. the paper ledger): the corner controls flip to
     ink, or they vanish into the canvas (audit 2026-07-20 wave 1). The overlay panel
     itself stays dark on every page - the vault motif is deliberate chrome. The backplate
     fill flips to a paper tint alongside the ink color (trust-chrome task 1). */
  html.light .ofto-menu,html.light .ofto-back{color:#1b1c19;background:rgba(250,249,244,.72)}
  /* 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){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(6,8,12,.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(11,13,17,.96);-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);border-left:1px solid rgba(244,241,234,.09);box-shadow:-32px 0 72px rgba(6,8,12,.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:#f4f1ea;letter-spacing:-.01em}
  .mob-close{background:none;border:0;color:#f4f1ea;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:'Newsreader',serif;font-weight:500;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-.015em;color:#f4f1ea;text-decoration:none;transition:color .2s;position:relative;display:inline-flex;align-items:center;min-height:44px}
  .mob-links a:hover{color:#c7d0ff}
  .mob-links a:active{color:#8ea4ff}
  /* 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}
  .mob-sub{display:block;text-align:center;background:#f4f1ea;color:#0b0d11;border-radius:9999px;padding:16px 34px;font-family:'Panchang',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
  .mob-coords{font-family:'Panchang',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.62);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 rgba(244,241,234,.1);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).
     REGISTER-ADAPTIVE: dark vault by default (dark pages — founder / record / check / essay home);
     warm-paper editorial colophon on html.light (the record-edition homepage). One footer, two
     materials, so it always belongs to the page it closes. */
  .ofto-footer{align-self:stretch;background:#0b0d11;color:#f4f1ea;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:'Newsreader',serif;font-weight:500;font-size:clamp(30px,4.2vw,48px);line-height:.98;letter-spacing:-.02em;color:#fdfcf9;margin:0}
  .ofto-footer-rule{width:46px;height:2px;border-radius:2px;background:rgba(244,241,234,.42);margin:20px 0 0}
  .ofto-footer-tag{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.55;color:rgba(244,241,234,.6);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-family:'Panchang',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.6);margin:0 0 8px}
  .ofto-footer-links a{font-family:'Manrope',sans-serif;font-size:13.5px;line-height:1.4;color:rgba(244,241,234,.72);text-decoration:none;transition:color .2s;position:relative;display:inline-flex;align-items:center;min-height:44px}
  .ofto-footer-links a:hover{color:#f4f1ea}
  /* 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-family:'Newsreader',serif;font-size:15px;line-height:1.5;color:rgba(244,241,234,.82);max-width:52ch;padding-top:26px;border-top:1px solid rgba(244,241,234,.1)}
  .ofto-footer-proof a{color:#f4f1ea;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .ofto-footer-proof a:hover{color:#0041c8}
  .ofto-footer-base{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid rgba(244,241,234,.08)}
  .ofto-footer-copy{font-family:'Panchang',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.6)}
  .ofto-footer-edition{font-family:'Panchang',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.6)}
  /* 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. */
  .ofto-footer-edition a{color:inherit;text-decoration:none;transition:color .2s}
  .ofto-footer-edition a:hover{color:#f4f1ea;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-family:'Panchang',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.6);text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:44px;margin-block:-16px}
  .ofto-footer-legal a:hover{color:#f4f1ea}
  @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. */