/* ============================================================
   aminbilal.com — SIGNAL v5.0 — /assets/signal.css
   "Aurora" dialect (C-v2) as the estate token set.
   ------------------------------------------------------------
   One sheet, one token source, every page. Adopted 8 Aug 2026
   as a recorded invariant change: the single-file-per-page
   model retires with the iPad-only era; pages now carry a body
   class (p-technology, p-markets, ...) and this link. Rollback
   is per-page: every page still builds from source.

   DOCTRINE   One warm ground; one hue, two duties, two blood-
   lines. Rose (#F0566F) is the hand — everything actionable and
   every here-you-are. Gold (#E3AC49) is the medal — complete,
   correct, distinguished. Their print values, crimson-true
   #861831 and gold-true #B08D2E, are reserved for artwork,
   which sits on light plates with its legacy palette pinned.

   TYPE       Geist (display/interface), Geist Mono (data and
   annotation), Newsreader (reading, optical sizing); Caveat and
   Architects Daughter for figure annotations only. Self-hosted
   at /assets/fonts, subset to the estate's character union plus
   Latin-1 and Latin Extended-A headroom; every family falls
   back to Geist before any system font.

   MOTION     CSS only; scroll-linked pieces behind @supports;
   everything gated by prefers-reduced-motion; hairlines rise
   under prefers-contrast:more.
   ============================================================ */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Geist.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/GeistMono.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/Newsreader.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/NewsreaderIt.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/Caveat.woff2') format('woff2');}
@font-face{font-family:'Architects Daughter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ArchDaughter.woff2') format('woff2');}

  :root{
    color-scheme:dark;
    /* ground and surfaces */
    --board:#110B0E;
    --board-2:rgba(255,235,240,.07);
    --board-3:rgba(255,235,240,.1);
    --paper:#150E11;
    --card:rgba(255,235,240,.045);
    --card-solid:#1C1518;
    --cream:#F9F8F3;            /* artwork plates only: the drawings' own paper */
    /* text */
    --b-tx:#F5EEE9;
    --b-mut:#98898A;
    --ink:#F5EEE9;
    --body:#DFD5D0;
    --soft:#BFB2AC;
    --muted:#98898A;
    --grey:#98898A;
    /* lines */
    --b-hair:rgba(245,238,233,.1);
    --b-hair-2:rgba(245,238,233,.18);
    --hair:rgba(245,238,233,.1);
    --hair-strong:rgba(245,238,233,.18);
    --rule:rgba(245,238,233,.1);
    --rule-strong:rgba(245,238,233,.18);
    /* accent — the crimson bloodline, lifted for dark ground */
    --rose:#F0566F;
    --rose-soft:rgba(240,86,111,.18);
    --crimson:#F56A82;
    --crimson-deep:#C93A57;
    --crimson-true:#861831;     /* the print/light value, kept for artwork */
    --tint:rgba(240,86,111,.1);
    --tint-strong:rgba(240,86,111,.2);
    --glow:rgba(240,86,111,.55);
    /* type — self-hosted, subset, variable */
    --display:'Geist','Helvetica Neue',Arial,sans-serif;
    --serif:'Newsreader','Geist',Georgia,serif;
    --sans:'Geist','Liberation Sans',Arial,sans-serif;
    --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
    /* finance-architecture plate zones (light artwork scope) */
    --gold-fill:#F6EFD8;
    --gold-rule:#CDB878;
    --gold-ink:#2A230D;
    --zone-hr:#DEDEDA;
    --zone-plat:#8A8A84;
    /* geometry & motion */
    --wrap:1180px;
    --radius:22px;
    --radius-sm:16px;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 50px -20px rgba(201,58,87,.35);
    --plate-shadow:0 30px 80px -35px rgba(0,0,0,.8);
    --ease:cubic-bezier(.22,.72,.24,1);
    --ease-spring:cubic-bezier(.16,1,.3,1);
    --grain:.07;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scrollbar-color:var(--b-hair-2) var(--board); }
  @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
  body{
    margin:0; background:var(--board); color:var(--b-tx);
    font-family:var(--serif); font-size:19px; line-height:1.66;
    font-optical-sizing:auto;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px); }
  a{ color:var(--rose); text-decoration:none; }
  a:hover{ color:#F0657E; }
  hr{ border:0; }
  [hidden]{ display:none !important; }
  ::selection{ background:rgba(232,84,111,.3); }

  a:focus-visible, button:focus-visible, .rail-item:focus-visible,
  .pdf-btn:focus-visible, .page-btn:focus-visible, .flip:focus-visible,
  .panel:focus-visible, .page-body:focus-visible{
    outline:2px solid var(--rose); outline-offset:3px; border-radius:4px;
  }

  /* one world: the reading sits on the board itself */
  .sheet .panels, .page-body .wrap{ background:transparent; color:var(--body); }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-weight:500; text-transform:uppercase;
    letter-spacing:.14em; color:var(--rose); font-size:11px; line-height:1.4;
    margin:0; padding:7px 14px; border:1px solid var(--b-hair-2);
    border-radius:999px; background:transparent;
  }

  .vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* ---------------- site band (sticky, dark glass) ---------------- */
  .band{
    background:rgba(19,17,16,.72);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--b-hair);
  }
  .band-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding-top:14px; padding-bottom:14px; }
  .wordmark{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
             color:var(--b-tx); text-decoration:none; margin-right:auto; white-space:nowrap; }
  .wordmark:hover{ color:var(--rose); }
  .band nav{ display:flex; flex-wrap:wrap; gap:6px 20px; }
  .band nav a{ font-family:var(--mono); font-weight:500; font-size:11px;
               letter-spacing:.12em; text-transform:uppercase; color:var(--b-mut);
               text-decoration:none; padding-bottom:3px; border-bottom:2px solid transparent;
               transition:color .16s var(--ease), border-color .16s var(--ease); }
  .band nav a:hover{ color:var(--b-tx); }
  .band nav a:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
  .band nav a[aria-current="page"]{ color:var(--rose); border-bottom-color:var(--rose); }

  @media (min-width:940px){
    .band{ position:sticky; top:0; z-index:60; }
    .band-inner{ flex-wrap:nowrap; height:60px; padding-top:0; padding-bottom:0; }
    @supports (animation-timeline: scroll()){
      .band::after{
        content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
        background:var(--rose); transform-origin:0 50%; transform:scaleX(0);
        animation:trace-progress linear both; animation-timeline:scroll(root);
      }
    }
  }
  @keyframes trace-progress{ to{ transform:scaleX(1); } }

  /* ---------------- hero: the poster screen ---------------- */
  .hero{
    position:relative; overflow:hidden; display:flex; align-items:center;
    min-height:min(92svh, 980px);
    padding:clamp(56px,8vw,104px) 0 clamp(44px,6vw,72px);
    border-bottom:1px solid var(--b-hair);
    background-image:radial-gradient(rgba(241,236,226,.08) 1px, transparent 1.4px);
    background-size:26px 26px;
  }
  .hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(19,17,16,0) 45%, var(--board) 97%); }
  .hero .wrap{ position:relative; z-index:1; width:100%; }
  .hero-grid{ display:grid; gap:clamp(30px,5vw,72px); align-items:center; }
  .hero-copy{ min-width:0; }
  @media (min-width:940px){ .hero-grid{ grid-template-columns:minmax(0,7fr) minmax(300px,5fr); } }

  .masthead-title{
    font-family:var(--display); font-weight:700; color:var(--b-tx); text-transform:uppercase;
    font-size:clamp(48px,9.4vw,132px); line-height:.94; letter-spacing:-.03em; margin:26px 0 0;
  }
  .masthead-sub{
    font-family:var(--serif); font-style:italic; color:var(--rose);
    font-size:clamp(20px,2.6vw,27px); line-height:1.38; margin:20px 0 0; max-width:38ch;
  }
  .byline{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; color:var(--b-mut); margin:26px 0 0; }
  .masthead-rule{ width:56px; height:3px; background:var(--rose); border-radius:2px; margin:24px 0 0; }
  .standfirst{
    font-family:var(--serif); font-size:clamp(19px,2vw,21.5px); line-height:1.6;
    color:#DFD8CA; margin:24px 0 0; max-width:58ch;
  }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
  .hero-cta .pdf-btn{
    background:var(--rose); border-color:var(--rose); color:#20090F;
  }
  .hero-cta .pdf-btn:hover{ background:#F0657E; border-color:#F0657E; color:#20090F; }
  .hero-cta .page-btn{
    background:transparent; border-color:rgba(241,236,226,.4); color:var(--b-tx);
  }
  .hero-cta .page-btn:hover{ background:var(--b-tx); border-color:var(--b-tx); color:var(--board); }
  /* the number band, 9 August 2026 (wave 2 of the visual upgrade). The four
     pills become four figures over four labels, under one hairline.
       - Two columns by default, four above a 550px container. The threshold is
         measured, not chosen: the longest label, APPLIED CHAPTERS, sets 116.5px
         at 10.5px Geist Mono with .1em tracking, and four of those plus three
         26px gaps need 544px. .hero-copy peaks at 588.6px and falls to 466px
         the moment the hero grid goes two-column at 940px, so both states are
         live in practice, not theoretical.
       - Labels may wrap rather than being held on one line, so the band cannot
         overflow at any width between the two states.
       - No accent. A count is neither an action nor a completion, so neither
         rose nor gold has a claim on it.
       - Figures are set proportional, not tabular. Geist's tnum exists, but
         these are large standalone display numerals rather than a column to be
         compared down, and the narrow 1 is correct for them.
       - First @container rule in the sheet; the four existing cqw units
         already require the same browser support, so this adds no new floor. */
  .hero-stats{
    list-style:none; margin:34px 0 0; padding:22px 0 0;
    border-top:1px solid var(--b-hair);
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 26px;
  }
  @container (min-width:550px){
    .hero-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  }
  .hero-stats li{ display:flex; flex-direction:column; gap:8px; }
  .hero-stats .hs-num{
    font-family:var(--display); font-weight:800; color:var(--b-tx);
    font-size:clamp(34px,7.6cqw,52px); line-height:.9; letter-spacing:-.035em;
  }
  .hero-stats .hs-label{
    font-family:var(--mono); font-weight:500; font-size:10.5px; line-height:1.35;
    letter-spacing:.1em; text-transform:uppercase; color:var(--b-mut);
  }

  /* the mark draws itself */
  .mark{ color:var(--rose); margin:0 0 18px; }
  .mark svg{ display:block; width:52px; height:52px; }
  @media (prefers-reduced-motion:no-preference){
    .mark svg path, .mark svg circle{
      stroke-dasharray:42; stroke-dashoffset:42;
      animation:trace-draw 1s var(--ease) forwards;
    }
    .mark svg circle{ stroke-dasharray:10; stroke-dashoffset:10; animation-duration:.5s; }
    .mark svg *:nth-child(1){ animation-delay:.1s; }
    .mark svg *:nth-child(2){ animation-delay:.55s; }
    .mark svg *:nth-child(3){ animation-delay:.9s; }
    .mark svg *:nth-child(4){ animation-delay:.7s; }
    .mark svg *:nth-child(5){ animation-delay:1s; }
  }
  @keyframes trace-draw{ to{ stroke-dashoffset:0; } }

  /* the hero schematic — light traces on the board, the rose route aglow */
  .hero-art{ display:none; }
  @media (min-width:940px){ .hero-art{ display:block; } }
  .hero-art svg{ display:block; width:100%; max-width:480px; height:auto; margin-left:auto; }
  .hero-art .tr{ fill:none; stroke:#F1ECE2; stroke-opacity:.22; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .hero-art .tr-main{ fill:none; stroke:var(--rose); stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round;
                      filter:drop-shadow(0 0 8px rgba(232,84,111,.55)); }
  .hero-art .nd{ fill:#F1ECE2; fill-opacity:.3; }
  .hero-art .nd-o{ fill:var(--board); stroke:#F1ECE2; stroke-opacity:.4; stroke-width:1.5; }
  .hero-art .nd-main{ fill:var(--rose); filter:drop-shadow(0 0 7px rgba(232,84,111,.7)); }
  .hero-art .pulse{ fill:none; stroke:#FF93A8; stroke-width:4; stroke-linecap:round; stroke-dasharray:.05 .95; opacity:0;
                    filter:drop-shadow(0 0 6px rgba(255,147,168,.8)); }
  @media (prefers-reduced-motion:no-preference){
    .hero-art .tr, .hero-art .tr-main{
      stroke-dasharray:1; stroke-dashoffset:1;
      animation:art-draw 1.2s var(--ease) forwards;
    }
    .hero-art .tr:nth-of-type(1){ animation-delay:.15s; }
    .hero-art .tr:nth-of-type(2){ animation-delay:.3s; }
    .hero-art .tr:nth-of-type(3){ animation-delay:.45s; }
    .hero-art .tr:nth-of-type(4){ animation-delay:.6s; }
    .hero-art .tr:nth-of-type(5){ animation-delay:.75s; }
    .hero-art .tr-main{ animation-delay:.95s; animation-duration:1.4s; }
    .hero-art .nd, .hero-art .nd-o, .hero-art .nd-main{
      opacity:0; animation:node-in .5s var(--ease) 1.7s forwards;
    }
    .hero-art .pulse{ animation:pulse-run 5.5s linear 2.5s infinite; }
  }
  @keyframes art-draw{ to{ stroke-dashoffset:0; } }
  @keyframes node-in{ to{ opacity:1; } }
  @keyframes pulse-run{ 0%{ opacity:1; stroke-dashoffset:0; } 100%{ opacity:1; stroke-dashoffset:-1; } }

  /* ---------------- programme status note ---------------- */
  .status-note{ border-bottom:1px solid var(--b-hair); background:var(--board-2); }
  .status-note .wrap{ padding-top:26px; padding-bottom:28px; }
  .status-kicker{
    font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--rose); margin:0 0 10px;
  }
  .progress{
    font-family:var(--sans); font-weight:400; font-size:14.5px; line-height:1.7; color:var(--b-mut);
    margin:0; max-width:78ch; padding-left:18px; border-left:3px solid var(--rose);
  }
  .progress a{ font-weight:700; }
  .progress a:hover{ text-decoration:underline; text-underline-offset:3px; }

  /* ---------------- contents: the card grid on the board ---------------- */
  .series{ padding:0; }
  .toc{ padding:clamp(40px,6vw,64px) 0 clamp(48px,7vw,76px); }
  .rail{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(235px,1fr)); gap:12px;
  }
  .rail-head{
    grid-column:1 / -1;
    font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,34px);
    letter-spacing:-.02em; color:var(--b-tx);
    padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--b-hair);
  }
  .rail-part{
    grid-column:1 / -1; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    margin-top:26px; padding:0 2px 10px; border-bottom:1px solid var(--b-hair);
  }
  .rail-part b{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); }
  .rail-part i{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--b-mut); }

  .rail-item{
    position:relative; display:flex; flex-direction:column; gap:10px; min-height:118px;
    text-align:left; background:var(--board-2); border:1px solid var(--b-hair); border-radius:14px;
    padding:16px 16px 14px; margin:0; cursor:pointer; color:var(--b-tx);
    transition:transform .18s var(--ease), box-shadow .18s var(--ease),
               border-color .18s var(--ease), background-color .18s var(--ease);
  }
  .rail-num{ font-family:var(--mono); font-weight:600; font-size:12px; color:var(--b-mut); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
  .rail-title{ font-family:var(--sans); font-weight:500; font-size:15.5px; line-height:1.35; color:var(--b-tx); margin-top:auto; padding-right:8px; }
  .rail-dot{ position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--rose); background:transparent; transition:background .16s var(--ease), box-shadow .16s var(--ease); }
  .is-done .rail-dot{ background:var(--rose); }
  .rail-item:hover{ transform:translateY(-2px); background-color:var(--board-3); border-color:var(--b-hair-2); box-shadow:0 18px 40px -22px rgba(0,0,0,.65); }
  .rail-item:hover .rail-dot{ box-shadow:0 0 0 3px var(--rose-soft); }
  .rail-item[aria-selected="true"]{ background-color:var(--rose-soft); border-color:var(--rose); box-shadow:inset 0 0 0 1px var(--rose); }
  .rail-item[aria-selected="true"] .rail-num,
  .rail-item[aria-selected="true"] .rail-title{ color:var(--rose); }
  .rail-item[aria-selected="true"] .rail-title{ font-weight:700; }

  /* the Introduction sits as a full-width lead card */
  #tab-introduction{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px; min-height:0; padding:16px 40px 16px 18px; }
  #tab-introduction .rail-title{ margin-top:0; font-size:16.5px; }
  #tab-introduction .rail-dot{ top:50%; transform:translateY(-50%); }

  /* ---------------- the reading sheet: a light plate on the board ---------------- */
  .sheet{ background:transparent; border-top:1px solid var(--b-hair); padding:clamp(48px,7vw,88px) 0 clamp(72px,10vw,120px); }
  .sheet .panels{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px); }

  /* ---- the contents rail as a left-hand strip, restored 10 August 2026 ----
     The v5 migration kept this markup entire - <main class="series"> with a
     .toc and a .sheet as its only two children, and the rail still declaring
     aria-orientation="vertical" - and replaced only the CSS. The strip is
     therefore recoverable without editing a single page.

     Scoping. .rail, .series and .toc appear on exactly three pages:
     technology, physics and markets. They are safe unscoped. .sheet is NOT:
     books, quotes, latest and finance-architecture carry it too, so every
     rule here that touches it is written as `.series > .sheet`.

     Breakpoint. Below 940px nothing changes at all and the card grid stands.
     940px is the masthead's own breakpoint, so no new one is introduced.

     Sticking. The strip pins below the 60px band. The breadcrumb is not a
     factor: it lives in #page-view, which is hidden whenever .series is on
     screen. The strip carries its own scroll because technology has 23 items
     and would otherwise run past the foot of the window with no way to reach
     the end; physics has 8 and markets 11 and will never scroll. dvh follows
     vh so that iPad Safari's shifting toolbar does not clip the last item. */
  @media (min-width:940px){
    .series{
      max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px);
      display:grid; grid-template-columns:322px minmax(0,1fr);
      gap:clamp(28px,4vw,64px); align-items:start;
    }
    .series > .toc, .series > .sheet{ padding:clamp(36px,5vw,60px) 0 clamp(60px,8vw,96px); }
    .series > .sheet{ border-top:0; }
    .series > .toc > .wrap{ max-width:none; padding:0; }
    .series > .sheet > .wrap{ max-width:70ch; padding:0; }
    .series > .toc{
      position:sticky; top:82px; overflow-y:auto; overscroll-behavior:contain;
      max-height:calc(100vh - 112px);
      max-height:calc(100dvh - 112px);
    }

    .rail{ grid-template-columns:minmax(0,1fr); gap:0; }
    .rail-head{
      font-family:var(--mono); font-weight:600; font-size:11.5px;
      letter-spacing:.2em; text-transform:uppercase; color:var(--b-mut);
      padding-bottom:12px; margin-bottom:0; border-bottom:1px solid var(--b-hair-2);
    }
    .rail-part{ margin-top:22px; padding:0 0 9px 12px; }
    .rail-item{
      display:grid; grid-template-columns:30px minmax(0,1fr) 14px;
      align-items:baseline; column-gap:12px; gap:0; min-height:0;
      background:transparent; border:0; border-left:2px solid transparent;
      border-radius:0; padding:12px 12px 12px 12px;
    }
    /* hover must not colour the left edge, or every hovered row reads as
       selected; and the separator below must survive the hover. */
    .rail-item:hover{
      transform:none; box-shadow:none; background-color:var(--board-2);
      border-color:transparent;
    }
    .rail-item + .rail-item{ border-top:1px solid var(--b-hair); }
    .rail-item[aria-selected="true"]{
      background-color:var(--rose-soft); border-left-color:var(--rose); box-shadow:none;
    }
    .rail-title{ margin-top:0; font-size:15px; padding-right:0; }
    #tab-introduction .rail-title{ margin-top:0; font-size:15px; }
    .rail-dot{ position:static; align-self:center; top:auto; right:auto; transform:none; }
    #tab-introduction .rail-dot{ top:auto; transform:none; }
  }
  .panel{ max-width:76ch; margin:0 auto; scroll-margin-top:16px; }
  @media (min-width:940px){ .panel{ scroll-margin-top:84px; } }
  .panel-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .panel-eyebrow{ font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--crimson); font-size:11px; margin:0; }
  .status{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border:1px solid var(--hair-strong); border-radius:999px; color:var(--muted); white-space:nowrap; background:var(--card); }
  .status.done{ color:var(--crimson); border-color:var(--rose-soft); background:var(--tint); }
  .panel-title{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:clamp(34px,5vw,56px); line-height:1.0; letter-spacing:-.03em; margin:14px 0 0; }
  .panel-sub{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:clamp(17px,2vw,20px); line-height:1.45; margin:12px 0 0; }
  .panel-rule{ height:1px; background:var(--hair); margin:26px 0 24px; }
  .artefact{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
  .artefact b{ display:block; color:var(--ink); font-family:var(--sans); font-weight:700; letter-spacing:0; text-transform:none; font-size:15px; margin-top:3px; }

  .prose > p{ margin:0 0 1.05em; }
  .prose > p:last-child{ margin-bottom:0; }
  .prose em{ font-style:italic; }
  .prose strong{ font-weight:600; color:var(--ink); }
  .prose-head{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:21px; letter-spacing:-.01em; line-height:1.2; margin:1.7em 0 .5em; display:flex; align-items:baseline; gap:12px; }
  .prose-num{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.12em; color:var(--crimson); transform:translateY(-1px); }
  .lede{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.55; color:var(--soft); }

  /* button group on a block panel */
  .panel-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; padding-top:24px; border-top:1px solid var(--hair); }
  .page-btn{
    display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700;
    font-size:13px; letter-spacing:.01em; color:var(--crimson); background:var(--card);
    border:1.5px solid var(--crimson); padding:10px 18px; border-radius:999px; cursor:pointer;
    transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
  }
  .page-btn:hover{ border-color:var(--crimson); color:var(--crimson); transform:translateY(-1px); box-shadow:0 0 0 3px var(--rose-soft); }
  .page-btn .pb-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }
  .page-btn:hover .pb-dot{ opacity:1; }
  .pdf-btn{
    display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700;
    font-size:13px; letter-spacing:.01em; color:#1C0A0F; background:var(--crimson);
    border:1.5px solid var(--crimson); padding:10px 18px; border-radius:999px;
    transition:background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
  }
  .pdf-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .pdf-btn svg{ width:15px; height:15px; }

  /* prev / next block on a panel */
  .panel-flip{ display:flex; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); }
  .panel-flip a{ color:var(--muted); display:inline-flex; flex-direction:column; gap:3px; max-width:46%; font-family:var(--sans); font-size:13.5px; }
  .panel-flip a:hover{ color:var(--crimson); }
  .panel-flip .pf-dir{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); }
  .panel-flip .pf-next{ text-align:right; margin-left:auto; }
  .panel.enter{ animation:rise .32s var(--ease) both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

  /* ---------------- page view: dark chrome, light plate ---------------- */
  #page-view{ min-height:70vh; background:var(--board); padding-bottom:clamp(56px,8vw,92px); }
  .page-top{
    border-bottom:1px solid var(--b-hair);
    background:rgba(19,17,16,.72);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    position:sticky; top:0; z-index:50;
  }
  @media (min-width:940px){ .page-top{ top:60px; } }
  .page-top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:13px; padding-bottom:13px; }
  .crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--b-mut); display:flex; flex-wrap:wrap; align-items:center; gap:8px; line-height:1.5; }
  .crumb a{ color:var(--rose); font-weight:500; }
  .crumb a:hover{ color:#F0657E; text-decoration:underline; text-underline-offset:3px; }
  .crumb .sep{ color:var(--b-hair-2); }
  .crumb b{ color:var(--b-tx); font-weight:600; }

  .page-body{ padding:clamp(32px,5vw,58px) 0 0; }
  .page-body .wrap{ max-width:900px; }
  .page-eyebrow{ font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--crimson); font-size:11px; margin:0; }
  .page-title{
    font-family:var(--display); font-weight:700; color:var(--ink);
    font-size:clamp(34px,5.5vw,58px); line-height:1.0; letter-spacing:-.03em; margin:12px 0 0;
    padding-bottom:.42em; border-bottom:1px solid var(--hair);
    background:linear-gradient(var(--crimson),var(--crimson)) left bottom / 56px 3px no-repeat;
  }
  .page-content{ margin-top:30px; }

  /* prose for migrated article content */
  .page-content p{ margin:0 0 1.1em; }
  .page-content .ct-lede{ font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.52; color:var(--soft); }
  .page-content .ct-lede .dropcap{ float:left; font-family:var(--display); font-weight:700; color:var(--crimson); font-size:3.3em; line-height:.78; padding:.04em .12em 0 0; }
  .page-content h2.ct-head{ font-family:var(--display); font-weight:600; color:var(--ink); font-size:clamp(22px,3vw,28px); letter-spacing:-.015em; line-height:1.12; margin:2em 0 .55em; padding-top:.8em; border-top:1px solid var(--hair); display:flex; align-items:baseline; gap:14px; }
  .page-content .ct-num{ font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:.14em; color:var(--crimson); transform:translateY(-2px); }
  .page-content h3.ct-sub{ font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--crimson); font-size:11px; margin:2.1em 0 .3em; padding-bottom:7px; border-bottom:1px solid var(--hair); }
  .page-content em{ font-style:italic; }
  .page-content strong{ font-weight:600; color:var(--ink); }
  .page-content .ct-quote{
    margin:1.7em 0; padding:4px 0 6px 22px; border-left:3px solid var(--crimson);
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(20px,2.6vw,25px); line-height:1.4; color:var(--ink); text-align:left;
  }
  .page-content ul.ct-list{ list-style:none; margin:.4em 0 1.4em; padding:0; }
  .page-content ul.ct-list li{ position:relative; padding-left:22px; margin:0 0 .7em; line-height:1.58; }
  .page-content ul.ct-list li::before{ content:""; position:absolute; left:1px; top:.52em; width:7px; height:7px; background:var(--crimson); border-radius:1.5px; transform:rotate(45deg); }
  .page-content .kt-group{ margin-bottom:.6em; }

  /* ---- content-page accordions: cards ---- */
  .page-content details.acc{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-sm);
    margin:0 0 12px; padding:0 clamp(16px,3vw,24px);
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .page-content details.acc:hover{ border-color:var(--hair-strong); }
  .page-content details.acc[open]{ box-shadow:var(--shadow); border-color:var(--hair-strong); }
  .page-content summary.acc-head{
    font-family:var(--display); font-weight:600; color:var(--ink); letter-spacing:-.012em;
    font-size:clamp(19px,2.6vw,23px); line-height:1.25;
    display:flex; align-items:baseline; gap:14px;
    padding:1em 0 .95em; cursor:pointer; list-style:none;
  }
  .page-content summary.acc-head::-webkit-details-marker{ display:none; }
  .page-content summary.acc-head .acc-title{ flex:1; }
  .page-content summary.acc-head::after{
    content:"+"; font-family:var(--sans); font-weight:400; font-size:24px;
    color:var(--crimson); line-height:1; align-self:center;
    transition:transform .22s var(--ease); margin-left:12px;
  }
  .page-content details.acc[open] > summary.acc-head::after{ transform:rotate(45deg); }
  .page-content summary.acc-head:hover .acc-title{ color:var(--crimson); }
  .page-content summary.acc-head:focus-visible{ outline:2px solid var(--crimson); outline-offset:4px; border-radius:6px; }
  .page-content .acc-body{ padding:.1em 0 1.3em; }
  .page-content .acc-body > p:first-child{ margin-top:.2em; }

  /* ----- Test (multiple-choice) pages: question cards ----- */
  .page-content .tq{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-sm);
    padding:1.1em clamp(16px,3vw,22px) 1em; margin:0 0 12px;
  }
  .page-content .tq-q{ margin:0 0 .65em; font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.5; }
  .page-content .tq-num{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.06em; color:var(--crimson); margin-right:10px; }
  .page-content ol.tq-opts{ list-style:none; margin:0 0 .85em; padding:0; counter-reset:opt; }
  .page-content ol.tq-opts li{ counter-increment:opt; position:relative; padding-left:30px; margin:0 0 .1em; line-height:1.5; border-radius:8px; }
  .page-content ol.tq-opts li::before{ content:counter(opt, upper-alpha); position:absolute; left:8px; top:.5em; font-family:var(--mono); font-weight:600; font-size:12px; color:var(--crimson); }
  .page-content details.tq-ans{ margin:.45em 0 0; }
  .page-content details.tq-ans summary{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.01em; color:var(--crimson); border:1.5px solid var(--crimson); padding:7px 16px; border-radius:999px; transition:background .16s var(--ease), color .16s var(--ease); }
  .page-content details.tq-ans summary::-webkit-details-marker{ display:none; }
  .page-content details.tq-ans summary:hover{ border-color:var(--crimson); box-shadow:0 0 0 3px var(--rose-soft); }
  .page-content details.tq-ans summary:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
  .page-content details.tq-ans[open] summary{ background:var(--crimson); color:#1C0A0F; border-color:transparent; }
  .page-content .tq-a{ margin:.75em 0 .1em; }
  .page-content .tq-a b{ color:var(--crimson-deep); }

  /* ----- Test engine (script-only enhancement; the store markup above is untouched) ----- */
  .page-content .tq-rubric{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--soft); margin:0 0 1em; }
  .page-content .tq-rubric b{ color:var(--crimson); font-weight:700; }
  .page-content .tq-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; border:1px solid var(--hair); border-radius:var(--radius-sm); background:var(--card); padding:12px 16px; margin:0 0 1.3em; }
  .page-content .tq-bar.tq-bar-foot{ margin:1.3em 0 0; }
  .page-content .tq-bar .tq-count{ font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.02em; color:var(--ink); flex:1; }
  .page-content .tq-bar button{ font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em; padding:8px 18px; border-radius:999px; cursor:pointer; border:1.5px solid var(--crimson); background:var(--crimson); color:#1C0A0F; transition:filter .16s var(--ease), background .16s var(--ease), color .16s var(--ease); }
  .page-content .tq-bar button:not(.tq-reset):hover{ filter:brightness(1.08); }
  .page-content .tq-bar button.tq-reset{ background:transparent; color:var(--crimson); }
  .page-content .tq-bar button.tq-reset:hover{ background:var(--tint); }
  .page-content .tq-bar button:disabled{ opacity:.4; cursor:default; }
  .page-content .tq-bar button:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
  .page-content ol.tq-opts li label{ display:block; cursor:pointer; margin-left:-30px; padding:4px 10px 4px 30px; border-radius:8px; }
  .page-content ol.tq-opts li input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
  .page-content ol.tq-opts li.sel{ background:var(--tint); box-shadow:inset 2px 0 0 var(--crimson); }
  .page-content ol.tq-opts li:has(input:focus-visible){ outline:2px solid var(--crimson); outline-offset:2px; }
  .page-content .tq.marked ol.tq-opts li label{ cursor:default; }
  .page-content .tq.marked ol.tq-opts li.hit{ background:var(--tint); box-shadow:inset 2px 0 0 var(--crimson); font-weight:600; }
  .page-content .tq.marked ol.tq-opts li.miss{ background:rgba(232,84,111,.12); box-shadow:inset 2px 0 0 var(--crimson-deep); text-decoration:line-through; text-decoration-color:var(--crimson-deep); text-decoration-thickness:1px; }
  .page-content .tq-verdict{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:.6em 0 .35em; }
  .page-content .tq-verdict.good{ color:var(--crimson); }
  .page-content .tq-verdict.bad{ color:var(--crimson-deep); }

  /* ----- Personalities (register) pages ----- */
  .page-content .pe{ display:grid; grid-template-columns:56px 1fr; border-top:1px solid var(--hair); padding:1.35em 0 1.25em; }
  .page-content .pe:last-of-type{ border-bottom:1px solid var(--hair); }
  .page-content .pe-num{ font-family:var(--mono); font-weight:500; font-size:12.5px; color:var(--crimson); letter-spacing:.04em; padding-top:.42em; font-variant-numeric:tabular-nums; }
  .page-content .pe-body{ border-left:2px solid var(--hair-strong); padding-left:18px; transition:border-color .2s var(--ease); }
  .page-content .pe:hover .pe-body{ border-left-color:var(--crimson); }
  .page-content .pe-name{ font-family:var(--display); font-weight:600; font-size:1.16rem; letter-spacing:-.012em; line-height:1.25; margin:0; color:var(--ink); }
  .page-content .pe-tag{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.45em 0 .65em; }
  .page-content .pe-body > p{ margin:.2em 0 0; }
  @media (max-width:560px){
    .page-content .pe{ grid-template-columns:40px 1fr; }
    .page-content .pe-body{ padding-left:14px; }
  }

  /* ---- The Map (sheet) ---- */
  .map-sheet{
    color-scheme:light;
    margin-top:10px; background:var(--cream); border:0;
    box-shadow:0 0 0 1px rgba(255,255,255,.09), var(--plate-shadow);
    border-radius:var(--radius); padding:clamp(12px,3vw,28px);
  }
  .map-sheet svg{ width:100%; height:auto; display:block; }

  /* ---- The Chronology (timeline) ---- */
  .chron-move{ margin:2.6em 0 0; }
  .chron-move:first-of-type{ margin-top:1.8em; }
  .chron-move .chron-span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.2em 0 1em; }
  .chron-list{ border-top:1px solid var(--hair-strong); }
  .chron-list .chron-row{ display:grid; grid-template-columns:76px 1fr; column-gap:20px; align-items:baseline; padding:.95em 6px .9em; border-bottom:1px solid var(--hair); transition:background .16s var(--ease); }
  .chron-list .chron-row:hover{ background:rgba(255,255,255,.04); }
  .chron-row .chron-year{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--crimson); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
  .chron-row .chron-event{ font-family:var(--serif); font-size:17px; line-height:1.56; color:var(--ink); margin:0; }
  @media (max-width:560px){
    .chron-list .chron-row{ grid-template-columns:52px 1fr; column-gap:14px; }
    .chron-row .chron-year{ font-size:12.5px; }
    .chron-row .chron-event{ font-size:16px; }
  }

  /* ---- FAQ category headings ---- */
  .page-content h2.faq-cat{
    font-family:var(--display); font-weight:600; color:var(--ink); letter-spacing:-.015em;
    font-size:clamp(20px,2.4vw,24px); line-height:1.2;
    margin:2.4em 0 1em; padding-top:.95em; border-top:1px solid var(--hair);
    background:linear-gradient(var(--crimson),var(--crimson)) left top / 44px 3px no-repeat;
  }
  .page-content h2.faq-cat:first-child{ margin-top:.4em; }

  /* in-preparation page */
  .prep-page{ margin-top:40px; padding:48px 34px; border:1.5px dashed var(--hair-strong); border-radius:var(--radius); text-align:center; background:var(--card); }
  .prep-badge{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; color:var(--crimson); }
  .prep-badge::before{ content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--crimson); }
  .prep-copy{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:17.5px; margin:14px auto 0; max-width:44ch; }

  /* prev / next flip on a page */
  .page-flip{ display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:24px; border-top:1px solid var(--hair); }
  .flip{ display:inline-flex; flex-direction:column; gap:3px; font-family:var(--sans); font-size:14px; color:var(--ink); max-width:46%; }
  .flip:hover{ color:var(--crimson); }
  .flip .flip-dir{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); }
  .flip .flip-label{ font-weight:700; }
  .flip.next{ text-align:right; margin-left:auto; align-items:flex-end; }
  .back-strip{ margin-top:28px; }
  .back-to-block{ font-family:var(--sans); font-size:13.5px; font-weight:700; letter-spacing:.01em; color:var(--crimson); display:inline-flex; align-items:center; gap:9px; }
  .back-to-block:hover{ gap:12px; transition:gap .16s var(--ease); }
  .page-body.enter{ animation:rise .3s var(--ease) both; }

  /* ---- scroll reveals (progressive; supported browsers only) ---- */
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline: view()){
      .page-content details.acc,
      .page-content .pe,
      .chron-list .chron-row,
      .fig{
        animation:rise .5s var(--ease) both;
        animation-timeline:view();
        animation-range:entry 0% entry 34%;
      }
    }
  }

  /* ---------------- feature band: the programme applied ---------------- */
  .showcase{
    margin:0; padding:clamp(48px,7vw,88px) 0;
    background:linear-gradient(135deg, #7A1530 0%, #43091A 100%);
    border-top:1px solid rgba(232,84,111,.3);
    border-bottom:1px solid rgba(232,84,111,.3);
  }
  .showcase .panel-eyebrow{ color:rgba(255,214,222,.8); }
  .showcase-title{ font-family:var(--display); font-weight:700; color:#FFF7F2; letter-spacing:-.025em; font-size:clamp(30px,4.4vw,52px); line-height:1.02; margin:12px 0 0; }
  .showcase-sub{ font-family:var(--serif); color:rgba(255,239,236,.85); font-size:18.5px; line-height:1.62; margin:14px 0 0; max-width:64ch; }
  .showcase-cta{ margin:26px 0 0; }
  .showcase-cta a{ display:inline-flex; align-items:center; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.01em; color:#FFF7F2; border:1.5px solid rgba(255,247,242,.55); padding:11px 22px; border-radius:999px; text-decoration:none; transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
  .showcase-cta a:hover{ background:#FFF7F2; color:var(--crimson-deep); border-color:#FFF7F2; transform:translateY(-1px); }

  /* ---------------- footer ---------------- */
  .footband{ background:var(--board); border-top:1px solid var(--b-hair);
             margin-top:0; text-align:center; padding:34px 22px 40px; }
  .footband .name{ font-family:var(--display); font-weight:700; font-size:16px;
                   color:var(--b-tx); text-decoration:none; letter-spacing:-.01em; }
  .footband .name:hover{ color:#fff; }
  .footband nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-top:16px; }
  .footband nav a{ font-family:var(--mono); font-weight:500; font-size:10.5px;
                   letter-spacing:.12em; text-transform:uppercase; color:var(--b-tx);
                   opacity:.6; text-decoration:none; transition:opacity .16s var(--ease); }
  .footband nav a:hover{ opacity:1; }
  .footband nav a:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; opacity:1; }
  .footband .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
                  color:var(--b-tx); opacity:.45; margin:18px 0 0; }

  /* ---------------- responsive ---------------- */
  @media (max-width:860px){
    body{ font-size:17.5px; }
    .deep-only{ display:none; }
  }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .hero-art .pulse{ animation:none; opacity:0; }
    .hero-art .nd, .hero-art .nd-o, .hero-art .nd-main{ opacity:1; }
  }

  /* ---------------- figures (inline SVG diagrams) ---------------- */
  /* Native to the board, 9 August 2026 (wave 1 of the visual upgrade).
     The figures no longer sit on their own paper. The light token re-pin and
     the cream plate are withdrawn, so the estate tokens flow through, and the
     drawings' hard-coded values are lifted to the dark bloodline by attribute
     selector; the markup of technology.html is not touched at all.
       - Doctrine requires the lift rather than merely permitting it:
         --crimson-true is a reserved print value and may not appear on a dark
         ground (section 7 of the architecture record).
       - Scoped to .fig alone. The AI on One Page sheet (.map-sheet) keeps its
         paper by design and carries the very same hex values; it must never be
         caught by these selectors, so none of them is written bare.
       - The five t-* rules gain `svg text` so that they outrank the attribute
         lifts by specificity rather than by source order. The element set they
         match is unchanged: all 59 text elements across the five figures carry
         a t-* class, and every one is a <text> inside the <svg>. */
  .fig{
    margin:2.6em auto 2.2em; max-width:680px;
    border:0; padding:0;
    /* Annotation values for a dark ground, 9 August 2026. The estate's chrome
       tokens are calibrated for furniture read at a glance; text inside a
       diagram has to be read properly, and on the retired plate these same
       roles sat at Lc 74-87. These restore that on the board. Scoped to .fig,
       so no other page is touched and :root is not disturbed. --crimson is
       deliberately NOT re-pinned here: it also draws 40 strokes and fills,
       which are graphics and need no lifting. */
    --grey:#DFD5D0;        /* t-glossy, t-open   Lc 82.0, plate had 79.6 */
    --muted:#D5CACB;       /* figcaption         Lc 75.7, plate had 74.0 */
    --soft:#E5DBDC;        /* fig-c              Lc 85.9, plate had 86.8 */
    --fig-label:#FDBAC5;   /* fig-n, t-tag       Lc 75.2, plate had 86.5;
                              hue 350.1deg, the rose line at a higher
                              lightness, which the one-hue doctrine allows */
  }
  .fig svg{ display:block; width:100%; height:auto; }
  .fig figcaption{
    font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted);
    text-align:center; margin-top:16px; line-height:1.55;
  }
  .fig .fig-n{ font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--fig-label); }
  .fig .fig-c{ display:block; font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:14.5px; color:var(--soft); margin-top:6px; }
  .fig svg text.t-title{ font-family:var(--display); font-weight:600; fill:var(--ink); }
  .fig svg text.t-layer{ font-family:var(--serif); font-weight:400; fill:var(--ink); }
  .fig svg text.t-glossy{ font-family:var(--mono); font-weight:400; fill:var(--grey); }
  .fig svg text.t-tag{ font-family:var(--mono); font-weight:600; fill:var(--fig-label); letter-spacing:.06em; }
  .fig svg text.t-open{ font-family:var(--serif); font-weight:400; font-style:italic; fill:var(--grey); }

  /* the drawing itself, lifted for the dark ground; text is governed above */
  .fig svg [fill="#861831"]{ fill:var(--crimson); }
  .fig svg [stroke="#861831"]{ stroke:var(--crimson); }
  .fig svg [fill="#F9F8F3"]{ fill:var(--board); }
  .fig svg [fill="#5A5A5A"]{ fill:var(--muted); }
  .fig svg [stroke="#5A5A5A"]{ stroke:var(--muted); }
  .fig svg [fill="#4A4843"]{ fill:var(--soft); }
  .fig svg [stroke="#C7C3B8"]{ stroke:var(--rule-strong); }
  .fig svg [stroke="#D8D5CC"]{ stroke:var(--rule); }

  /* tints and ghost strokes need more of themselves on a dark ground */
  .fig svg [fill-opacity="0.05"]{ fill-opacity:.14; }
  .fig svg [fill-opacity="0.08"]{ fill-opacity:.16; }
  .fig svg [stroke-opacity="0.35"]{ stroke-opacity:.45; }

  /* gold is the medal: the replayed balance, and the quorum that may act */
  .fig svg text.t-title[fill="#861831"]{ fill:var(--gold); }

  /* the service models matrix, 9 August 2026 (wave 3). The estate's first
     table. It is marked up as <figure class="fig svc">, so it inherits the
     figure block entire: the margins, the measure, and the dark-ground
     annotation values corrected earlier today. .svc therefore adds table
     geometry and nothing else, and any future correction to figure legibility
     reaches the table without a second edit.
       - border-collapse is separate, not collapse, because the held cells
         carry a radius and a ring and collapse discards both.
       - The frame scrolls sideways rather than the table reflowing. An
         accordion body is 746px at desktop but 318px on a phone, and the
         table's honest minimum is 468px: a 132px layer column and four 84px
         model columns. The layer column is pinned, on --card-solid, which is
         exactly --card composited over the board, so the pinned cells match
         the accordion's own ground rather than showing as a stripe.
       - No rules inside the body. The staircase is drawn by the tint and the
         reference this borrows from uses none either.
       - No colour of its own, and no meaning carried by colour alone: every
         held cell also states the word. */
  .svc-frame{ overflow-x:auto; overscroll-behavior-x:contain; }
  .svc table{ border-collapse:separate; border-spacing:0; width:100%; min-width:468px; }
  .svc th, .svc td{ padding:9px; text-align:center; vertical-align:middle; }
  .svc thead th{
    min-width:84px; padding-bottom:11px; border-bottom:1px solid var(--b-hair-2);
    font-family:var(--display); font-weight:700; font-size:16px; line-height:1.15;
    letter-spacing:-.01em; color:var(--ink);
  }
  .svc .svc-g{
    display:block; margin-top:4px; font-family:var(--mono); font-weight:500;
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .svc .svc-corner, .svc tbody th, .svc tfoot th{
    position:sticky; left:0; z-index:1; background:var(--card-solid);
    min-width:132px; text-align:left; padding-left:0;
  }
  .svc tbody th, .svc tfoot th{
    font-family:var(--display); font-weight:500; font-size:13px; color:var(--grey);
  }
  .svc tbody td, .svc tfoot td{
    font-family:var(--mono); font-weight:400; font-size:11.5px;
    letter-spacing:.05em; color:var(--grey);
  }
  .svc tfoot th, .svc tfoot td{ border-top:1px solid var(--b-hair-2); padding-top:12px; }
  .svc td.svc-you{
    color:var(--ink); font-weight:600; background:var(--rose-soft);
    border-radius:5px; box-shadow:inset 0 0 0 1px rgba(240,86,111,.42);
  }


  /* ============================================================
     SIGNAL LAYER — v5 additions on the v4 skeleton
     ============================================================ */

  /* film grain over everything; imperceptibly quiet, kills banding */
  body::before{
    content:""; position:fixed; inset:-50%; z-index:90; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--grain); mix-blend-mode:overlay;
  }

  /* the hero ground: aurora field + drafting dots, fading to the board */
  .hero{ background-image:radial-gradient(60% 50% at 10% 0%, rgba(240,86,111,.28), transparent 60%), radial-gradient(55% 46% at 92% 12%, rgba(120,32,90,.3), transparent 62%), radial-gradient(46% 40% at 30% 100%, rgba(217,164,65,.12), transparent 58%), radial-gradient(rgba(245,238,233,.06) 1px, transparent 1.4px); background-size:auto,auto,auto,26px 26px; }
  .hero::after{ background:linear-gradient(180deg, transparent 45%, var(--board) 97%); }

  /* display ink */
  .masthead-title{
    background:linear-gradient(120deg, #F7EEE9 20%, #F0566F 78%, #D9A441 105%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  @supports not (background-clip:text){ .masthead-title{ background:none; color:var(--ink); } }

  /* cards are lit from above */
  .rail-item, .page-content details.acc, .page-content .tq, .prep-page,
  .page-content .tq-bar, .status{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .rail-item{ transition:transform .22s var(--ease-spring), box-shadow .22s var(--ease-spring),
              border-color .22s var(--ease-spring), background-color .22s var(--ease-spring); }
  .rail-item:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px var(--rose-soft),
               0 18px 40px -20px rgba(0,0,0,.7), 0 12px 36px -16px var(--glow);
  }
  .page-content details.acc[open]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow); }

  /* prose links: quiet underline that wakes */
  .page-content p a, .prose p a, .progress a{
    text-decoration:underline; text-decoration-color:var(--rose-soft);
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .16s var(--ease);
  }
  .page-content p a:hover, .prose p a:hover, .progress a:hover{ text-decoration-color:var(--crimson); }

  /* primary action carries the glow */
  .pdf-btn{
    background:linear-gradient(180deg, var(--crimson), var(--crimson-deep));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px -10px var(--glow);
  }
  .showcase-cta a:hover{ box-shadow:0 12px 30px -10px var(--glow); }

  /* the feature band, deepened */
  .showcase{ background:linear-gradient(135deg, rgba(122,21,48,.85), rgba(52,8,32,.9)); border-top:1px solid rgba(240,86,111,.45); border-bottom:1px solid rgba(240,86,111,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -30px var(--glow); }

  /* Display titles size to their COLUMN, not the viewport. The two-column hero
     gives the copy roughly 7/12 of the wrap, and a gradient-clipped title that
     overflows its box loses its paint entirely rather than merely spilling —
     so overflow here is invisibility, not untidiness. The plain clamp in the
     core remains for engines without container units. */
  .hero .wrap, .hero-copy{ container-type:inline-size; }
  .masthead-title{ font-size:clamp(48px, min(9.4vw, 14cqw), 132px); }

  /* focus ring glows */
  a:focus-visible, button:focus-visible, .rail-item:focus-visible, summary:focus-visible{
    outline:2px solid var(--crimson); outline-offset:3px;
    box-shadow:0 0 0 6px var(--rose-soft);
  }

  ::selection{ background:var(--tint-strong); }
  html{ scrollbar-color:var(--b-hair-2) var(--board); }

  @media (prefers-reduced-motion:reduce){ body::before{ display:none; } }
  @media (prefers-contrast:more){
    :root{ --hair:rgba(255,255,255,.22); --hair-strong:rgba(255,255,255,.34);
           --b-hair:rgba(255,255,255,.22); --b-hair-2:rgba(255,255,255,.34); }
  }

  /* AURORA: the whole ground is a slow mesh; cards take gradient borders.
     The mesh lives on a fixed layer, not background-attachment:fixed,
     which misbehaves on iOS — the same lesson the landing page records. */
  body{ background:var(--board); }
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(80% 60% at 15% -10%, rgba(201,58,87,.22), transparent 62%),
      radial-gradient(70% 55% at 100% 8%, rgba(94,26,74,.3), transparent 60%),
      radial-gradient(60% 50% at 40% 110%, rgba(64,26,12,.4), transparent 60%);
  }
  .rail-item, .page-content details.acc, .page-content .tq, .prep-page, .page-content .tq-bar{
    border:1px solid transparent;
    background:
      linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
      linear-gradient(135deg, rgba(240,86,111,.42), rgba(245,238,233,.1) 40%, rgba(217,164,65,.28)) border-box;
  }
  .showcase-cta a{ background:linear-gradient(135deg, var(--rose), #D9A441); color:#1C0A0F;
                   border-color:transparent; }
  .showcase-cta a:hover{ background:linear-gradient(135deg, #FF6F87, #E8B558); color:#1C0A0F; }

  /* ---- the navigation family, 10 August 2026 -------------------------------
     Five links join the showcase call to action in its rose-to-gold treatment:
     the two hero calls to action, the two pager arms, and the back link. All
     five navigate between places, which is what the family marks. The 96
     .page-btn panel tabs are deliberately excluded - they switch what is shown
     within a panel, and at 96 a gradient would signal nothing.

     Two mechanisms, chosen by what each element is:
       - The two hero pills take the fill, identical to the showcase CTA, so
         top and foot read as one family.
       - The pager's direction label is four characters wide, where a gradient
         cannot be seen. It takes a solid lifted rose and a 28px gradient rule
         beneath, which is where the sweep has room to register. The rule is a
         pseudo-element, so no markup changes.
       - The back link is long enough to carry the gradient as text, behind an
         @supports guard with a solid colour declared first, so the label can
         never vanish if background-clip is unsupported.

     Values. Fill: #F0566F to #D9A441, exactly the showcase CTA's. Text: the
     lifted pair #FA92A3 to #E8B558, because the fill's rose end measures
     Lc 41.4 as text on the board and the lifted end measures 59.7, against
     47.0 for the flat crimson these carried before. Small text does not take
     the fill values anywhere in this block. */
  .hero-cta .pdf-btn,
  .hero-cta .page-btn{
    background:linear-gradient(135deg, var(--rose), #D9A441);
    border-color:transparent; color:#1C0A0F;
  }
  .hero-cta .pdf-btn:hover,
  .hero-cta .page-btn:hover{
    background:linear-gradient(135deg, #FF6F87, #E8B558);
    border-color:transparent; color:#1C0A0F;
  }
  .hero-cta .page-btn .pb-dot{ background:currentColor; opacity:.5; }
  .hero-cta .page-btn:hover .pb-dot{ opacity:.8; }

  .flip-dir{ color:#FA92A3; }
  .flip-dir::after{
    content:""; display:block; width:28px; height:2px; margin-top:6px; border-radius:2px;
    background:linear-gradient(90deg, var(--rose), #D9A441);
  }
  .flip.next .flip-dir::after{ margin-left:auto; }

  .back-to-block{ color:#FA92A3; }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .back-to-block{
      background:linear-gradient(90deg, #FA92A3, #E8B558);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
  }

  /* ---- second accent, formalised ----------------------------------
     Rose is the hand: everything you can act on, and where you are.
     Gold is the medal: what is complete, correct, or distinguished.
     Gold-true (#B08D2E) remains the artwork/print value; #E3AC49 is
     its dark-ground lift, exactly as rose lifts the crimson. */
  :root{
    --gold:#E3AC49; --gold-true:#B08D2E;
    --gold-soft:rgba(227,172,73,.2); --gold-tint:rgba(227,172,73,.11);
  }
  /* completion */
  .is-done .rail-dot{ background:var(--gold); border-color:var(--gold); }
  .rail-item.is-done:hover .rail-dot{ box-shadow:0 0 0 3px var(--gold-soft); }
  .status.done{ color:var(--gold); background:var(--gold-tint); border-color:rgba(227,172,73,.4); }
  /* correctness: marked right answers are gilded; wrong stays in the rose family */
  .page-content .tq.marked ol.tq-opts li.hit{ background:var(--gold-tint); box-shadow:inset 2px 0 0 var(--gold); font-weight:600; }
  .page-content .tq-verdict.good{ color:var(--gold); }
  /* distinction: the artefact line, the dropcap, the pull-quote bar */
  .artefact{ color:var(--gold); }
  .page-content .ct-lede .dropcap{ color:var(--gold); }
  .page-content .ct-quote{ border-left-color:var(--gold); }
  /* the schematic gains its gold return path */
  .hero-art path[d^="M24 152"]{ stroke:var(--gold); stroke-opacity:.45; }
  .hero-art circle[cx="396"][cy="112"]{ stroke:var(--gold); stroke-opacity:.85; }


/* ======== shared fold system ======== */
  /* ---- the fold system (quotes: sections; books: shelves) ---- */
  .sec{ border-top:1px solid var(--hair-strong); scroll-margin-top:20px; }
  .sec:first-of-type{ border-top:0; }
  @media (min-width:940px){ .sec{ scroll-margin-top:80px; } }
  .sec > summary{
    font-family:var(--display); font-weight:700; color:var(--ink);
    font-size:clamp(24px,3.4vw,34px); line-height:1.1; letter-spacing:-.024em;
    padding:.95em 2px .9em; margin:0; cursor:pointer;
    display:flex; align-items:baseline; gap:16px; list-style:none;
  }
  .sec > summary::-webkit-details-marker{ display:none; }
  .sec > summary:hover{ color:var(--crimson); }
  .sec > summary:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; border-radius:6px; }
  .sec > summary .n{
    font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:.1em;
    color:var(--crimson); align-self:center; padding:5px 11px;
    border:1px solid var(--hair-strong); border-radius:999px; background:var(--card);
  }
  .sec > summary::after{
    content:"+"; margin-left:auto; align-self:center;
    font-family:var(--sans); font-weight:400; font-size:26px; line-height:1;
    letter-spacing:0; color:var(--crimson);
    transition:transform .22s var(--ease);
  }
  .sec[open] > summary::after{ transform:rotate(45deg); }
  .fold{ padding:2px 0 22px; }

  .intro{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:19px; line-height:1.55; color:var(--soft);
    max-width:66ch; padding:2px 2px 20px;
  }
  .intro p{ margin:0 0 .7em; }
  .intro p:last-child{ margin-bottom:0; }

  .fold-close{
    display:inline-flex; align-items:center; margin:16px 0 4px;
    font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em;
    color:var(--crimson); background:transparent;
    border:1.5px solid var(--crimson); border-radius:999px; padding:9px 18px; cursor:pointer;
    transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
  }
  .fold-close:hover{ color:#1C0A0F; background:var(--crimson); transform:translateY(-1px); }
  .fold-close:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }



/* ======== page: p-finance-architecture ======== */
.p-finance-architecture{
  .crumb{ margin:0 0 26px; }
  .crumb a{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-weight:500; font-size:10.5px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--b-mut);
    border:1px solid var(--b-hair-2); border-radius:999px; padding:8px 15px;
    transition:color .16s var(--ease), border-color .16s var(--ease);
  }
  .crumb a:hover{ color:var(--rose); border-color:var(--rose); }

  .jump{
    font-family:var(--sans); font-size:14px; line-height:1.9; color:var(--b-mut);
    margin:26px 0 0; max-width:70ch; padding-left:18px; border-left:3px solid var(--rose);
  }
  .jump a{ font-weight:700; }
  .jump a:hover{ text-decoration:underline; text-underline-offset:3px; }

  /* ---------------- the plate ---------------- */
  .legend{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); margin:20px 0 20px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  }
  .legend .lg{ display:inline-flex; align-items:center; gap:8px; }
  .chip{ display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.14); }
  .lg-note{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:13.5px; }

  /* zone colours — semantic, preserved as drawn */
  .z-core{ background:var(--crimson); }
  .z-ins{ background:var(--gold); }
  .z-hr{ background:var(--zone-hr); }
  .z-plat{ background:var(--zone-plat); }

  /* single column first; the commentary side-car returns at 940px.
     (2026-08-09: the two-column grid had no narrow collapse - on phones the
     plate crushed to a sliver and its cells overflowed beneath the
     commentary. Phones read plate first, commentary after, in DOM order.) */
  .plate-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; }
  @media (min-width:940px){
    .plate-grid{ grid-template-columns:minmax(0,1fr) 300px; }
  }
  .plate, .commentary{
    color-scheme:light;
    --ink:#1A1A1A; --grey:#5A5A5A; --soft:#4A4843; --muted:#6B675C; --body:#2B2B29;
    --crimson:var(--crimson-true); --paper:#F1F1EE;
    --hair:#E2E2DE; --hair-strong:#D3D3CE;
  }
  .plate{ border:0; border-radius:var(--radius-sm); background:#FFFFFF; padding:16px;
          box-shadow:0 0 0 1px rgba(255,255,255,.09), var(--plate-shadow); }
  .uparrow{ text-align:center; color:var(--crimson); font-size:13px; line-height:1; padding:7px 0; }

  .layer-band{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:8px 13px; border-radius:8px;
  }
  .layer-band .lb-title{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
  .layer-band .lb-strap{ font-family:var(--serif); font-style:italic; font-size:12.5px; white-space:nowrap; }
  .layer-band.z-core{ color:#FDF6F2; } .layer-band.z-core .lb-strap{ color:rgba(253,246,242,.82); }
  .layer-band.z-ins{ color:var(--gold-ink); } .layer-band.z-ins .lb-strap{ color:rgba(42,35,13,.8); }
  .layer-band.z-hr{ color:var(--ink); } .layer-band.z-hr .lb-strap{ color:var(--muted); }
  .layer-band.z-plat{ color:#FFFFFF; } .layer-band.z-plat .lb-strap{ color:rgba(255,255,255,.85); }

  .cells{ display:grid; gap:8px; margin:9px 0 2px; }
  .cols-1{ grid-template-columns:1fr; }
  .cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  @media (max-width:559px){
    .cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  .cell{
    border:1px solid var(--hair); border-radius:8px; background:var(--paper);
    padding:10px 12px 11px; transition:border-color .16s var(--ease), background-color .16s var(--ease);
  }
  .cell:hover{ border-color:var(--gold-rule); background:#EFE8D2; }
  .cell .cap{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .cell .sys{ display:block; font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); margin-top:4px; line-height:1.28; letter-spacing:-.008em; }
  .cells.pipeline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .pipeline .cell{ flex:1 1 150px; }
  .c-ins{ background:var(--gold-fill); border-color:var(--gold-rule); }
  .c-ins:hover{ background:#F2E9CC; border-color:var(--gold); }
  .parrow{ color:var(--crimson); font-weight:700; font-size:16px; }
  .to-gl{ font-family:var(--serif); font-style:italic; font-size:13px; color:var(--soft); }

  .commentary{ background:var(--gold-fill); border:1px solid var(--gold-rule); border-radius:var(--radius-sm); padding:20px 22px 18px; }
  .com-title{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.018em; color:var(--crimson); margin:0; }
  .com-sub{ font-family:var(--serif); font-style:italic; color:var(--gold-ink); opacity:.75; font-size:13.5px; margin:3px 0 0; }
  .com-rule{ border:0; border-top:1px solid var(--gold-rule); margin:13px 0; }
  .commentary p{ font-family:var(--serif); font-size:14.5px; line-height:1.58; color:#3E3823; margin:.55em 0 0; }
  .commentary p.com-head{ font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); margin:1.15em 0 0; }
  .commentary p.com-close{ margin-top:1.1em; }

  .plate-foot{
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; line-height:1.6; color:var(--muted);
    border-top:1px solid var(--hair); margin-top:18px; padding-top:12px;
  }
  .pf-right{ font-family:var(--serif); font-size:13px; letter-spacing:0; }

  /* ---------------- section bands ---------------- */
  .sec-band{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:9px 15px; margin:0 0 12px; border-radius:8px;
  }
  .sec-band .sb-title{ font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0; }
  .sec-band .sb-strap{ font-family:var(--serif); font-style:italic; font-size:13px; }
  .sec-band.z-core{ color:#FDF6F2; } .sec-band.z-core .sb-strap{ color:rgba(253,246,242,.82); }
  .sec-band.z-ins{ color:var(--gold-ink); } .sec-band.z-ins .sb-strap{ color:rgba(42,35,13,.8); }
  .sec-band.z-hr{ color:var(--ink); } .sec-band.z-hr .sb-strap{ color:var(--muted); }
  .sec-band.z-plat{ color:#FFFFFF; } .sec-band.z-plat .sb-strap{ color:rgba(255,255,255,.85); }
  .sec-strapline{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
  #companion .sec-band{ margin-top:36px; }

  .twocol{ columns:2; column-gap:46px; }
  .twocol p{ margin:0 0 1.05em; break-inside:avoid; }
  .twocol p:first-child{ margin-top:0; }
  .twocol b{ font-weight:600; color:var(--ink); }

  /* ---------------- the principles: feature band ---------------- */
  .showcase{
    margin:0; padding:clamp(48px,7vw,88px) 0;
    background:linear-gradient(135deg, #7A1530 0%, #43091A 100%);
    border-top:1px solid rgba(232,84,111,.3);
    border-bottom:1px solid rgba(232,84,111,.3);
  }
  .showcase .arch-block{ margin:0; }
  .showcase .sec-band{ background:transparent; padding:0; margin:0 0 8px; }
  .showcase .sec-band .sb-title{
    font-family:var(--display); font-weight:700; text-transform:none;
    font-size:clamp(28px,4vw,46px); letter-spacing:-.025em; line-height:1.04; color:#FFF7F2;
  }
  ol.principles{
    list-style:none; counter-reset:pr; margin:28px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 40px;
  }
  ol.principles li{
    counter-increment:pr; position:relative; padding-left:44px;
    font-family:var(--serif); font-size:17px; line-height:1.6; color:rgba(255,239,236,.82);
  }
  ol.principles li::before{
    content:counter(pr,decimal-leading-zero); position:absolute; left:0; top:.28em;
    font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.1em;
    color:#FF9AAE;
  }
  ol.principles b{ font-family:var(--sans); font-weight:700; font-size:15.5px; letter-spacing:-.008em; color:#FFF7F2; display:block; margin-bottom:3px; }

  /* ---------------- platform notes ---------------- */
  .pn-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 28px; scroll-margin-top:20px; }
  @media (min-width:940px){ .pn-tabs{ scroll-margin-top:88px; } }
  .pn-tab{
    font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em;
    color:var(--crimson); background:var(--card); border:1.5px solid var(--hair-strong);
    padding:9px 17px; border-radius:999px; cursor:pointer;
    transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
  }
  .pn-tab:hover{ border-color:var(--crimson); transform:translateY(-1px); }
  .pn-tab.active{ background:var(--crimson); border-color:var(--crimson); color:#1C0A0F; }
  .pn-tab:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }

  .pn-panel{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
    padding:clamp(20px,3.5vw,34px) clamp(18px,3vw,34px) clamp(18px,3vw,28px);
    box-shadow:var(--shadow); scroll-margin-top:20px;
  }
  @media (min-width:940px){ .pn-panel{ scroll-margin-top:88px; } }
  .pn-panel[hidden]{ display:none; }
  .pn-title{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap;
    font-family:var(--display); font-weight:700; color:var(--ink);
    font-size:clamp(24px,3.2vw,34px); line-height:1.06; letter-spacing:-.026em; margin:0 0 .5em;
    padding-bottom:.4em; border-bottom:1px solid var(--hair);
    background:linear-gradient(var(--crimson),var(--crimson)) left bottom / 48px 3px no-repeat;
  }
  .pn-ptag{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .pn-lede{ font-family:var(--serif); font-weight:500; font-size:19.5px; line-height:1.5; color:var(--soft); margin:0 0 1em; }
  .pn-label{
    font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--crimson); margin:1.5em 0 .45em; display:flex; justify-content:space-between;
    gap:14px; align-items:baseline; flex-wrap:wrap; padding-bottom:7px; border-bottom:1px solid var(--hair);
  }
  .pn-strap{ font-family:var(--serif); font-weight:400; font-size:12.5px; font-style:italic; letter-spacing:0; text-transform:none; color:var(--muted); }
  .acc-body{ columns:2; column-gap:46px; }
  .acc-body p{ margin:0 0 1.05em; break-inside:avoid; }
  .acc-body b{ font-weight:600; color:var(--ink); }
  .acc-body h4.pn-label{ break-after:avoid; break-inside:avoid; }
  .acc-body p.pn-lede, .acc-body p.pn-sources{ column-span:all; }
  .acc-body p.pn-sources{
    font-family:var(--mono); font-size:10.5px; color:var(--muted); line-height:1.65; letter-spacing:.01em;
    border-top:1px solid var(--hair); padding-top:12px; margin-top:1.3em;
  }
  .pn-return-row{ margin:1.1em 0 0; }
  .pn-return{
    font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em;
    color:var(--crimson); background:transparent; border:1.5px solid var(--crimson);
    padding:9px 18px; border-radius:999px; cursor:pointer;
    transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
  }
  .pn-return:hover{ background:var(--crimson); color:#1C0A0F; transform:translateY(-1px); }

  /* ---------------- sources ---------------- */
  .src-line{ font-family:var(--serif); color:var(--soft); font-size:17px; line-height:1.6; margin:0 0 .7em; }
  .src-line b{ font-family:var(--sans); font-weight:700; font-size:14.5px; letter-spacing:-.006em; color:var(--ink); }

  .sec-band{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    padding:9px 15px; margin:0 0 12px; border-radius:8px;
  }
  .sec-band .sb-title{ font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin:0; }
  .sec-band .sb-strap{ font-family:var(--serif); font-style:italic; font-size:13px; }
  .sec-band.z-core{ color:#FDF6F2; } .sec-band.z-core .sb-strap{ color:rgba(253,246,242,.82); }
  .sec-band.z-ins{ color:var(--gold-ink); } .sec-band.z-ins .sb-strap{ color:rgba(42,35,13,.8); }
  .sec-band.z-hr{ color:var(--ink); } .sec-band.z-hr .sb-strap{ color:var(--muted); }
  .sec-band.z-plat{ color:#FFFFFF; } .sec-band.z-plat .sb-strap{ color:rgba(255,255,255,.85); }
  .sec-strapline{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
  #companion .sec-band{ margin-top:36px; }

  .twocol{ columns:2; column-gap:46px; }
  .twocol p{ margin:0 0 1.05em; break-inside:avoid; }
  .twocol p:first-child{ margin-top:0; }
  .twocol b{ font-weight:600; color:var(--ink); }

  .arch-block{ margin:56px 0 0; scroll-margin-top:20px; }
  .arch-block:first-child{ margin-top:0; }
  @media (min-width:940px){ .arch-block{ scroll-margin-top:88px; } }
  .arch-block > p{ margin:0 0 1.05em; }

  .sec-note{ font-family:var(--serif); color:var(--soft); font-size:18px; line-height:1.6; margin:10px 0 0; max-width:78ch; }


}


/* ======== page: p-markets ======== */
.p-markets{
  /* ---- the banner device: a market drawn in candlesticks ----
     Presentation attributes lose to any CSS declaration, so the
     hard-coded crimson lifts to rose without touching the markup.
     Hollow candles carry fill="none" and match on stroke only. */
  .banner{ margin:clamp(34px,5vw,56px) 0 0; }
  .banner svg{ display:block; width:100%; height:auto; }
  .banner svg [stroke="#861831"]{ stroke:var(--rose); }
  .banner svg [fill="#861831"]{ fill:var(--rose); }
  @media (prefers-reduced-motion:no-preference){
    .banner svg rect, .banner svg path{ opacity:0; animation:tape-in .5s var(--ease) forwards; }
    .banner svg path[d^="M14 180.5"]{ animation-delay:.15s; }
  }

  /* ---- attributed pull quotes ---- */
  .page-content .ct-quote{
    margin:1.7em 0; padding:4px 0 6px 22px; border-left:3px solid var(--crimson);
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(20px,2.6vw,25px); line-height:1.4; color:var(--ink); text-align:left;
  }
  .page-content .ct-quote .ct-cite{
    display:block; font-style:normal; font-family:var(--mono); font-size:10.5px;
    font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--crimson); margin-top:.8em;
  }

  /* ---- open-debate status word ---- */
  .page-content .lede-word{
    font-family:var(--mono); font-weight:600; text-transform:uppercase;
    letter-spacing:.14em; font-size:10.5px; color:var(--crimson); margin-right:.55em;
  }

  /* ---- from-the-floor practitioner notes ---- */
  .page-content .floor-note{
    margin:1.7em 0; padding:1.1em 1.3em 1em; border-left:3px solid var(--crimson);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--card);
    box-shadow:var(--shadow); font-style:italic;
  }
  .page-content .floor-note > p:last-child{ margin-bottom:0; }
  .page-content .floor-note .fn-tag{
    display:block; font-style:normal; font-family:var(--mono); font-size:10px;
    font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--crimson); margin-bottom:.6em;
  }

  /* ---- figures (inline SVG charts; token-driven, so they follow the sheet) ---- */
  .page-content .figure{
    margin:2.2em 0; background:var(--card); border:1px solid var(--hair);
    /* two knockout fills in the chart artwork follow the card */
    border-radius:var(--radius); padding:clamp(16px,3vw,26px) clamp(16px,3vw,26px) 18px;
  }
  .page-content .figure svg{ width:100%; height:auto; display:block; }
  .page-content .fig-cap{
    font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted);
    margin-top:14px; line-height:1.6;
  }

  /* ---- tables ---- */
  .page-content .tbl-wrap{
    overflow-x:auto; margin:1.9em 0; background:var(--card);
    border:1px solid var(--hair); border-radius:var(--radius-sm); padding:4px clamp(12px,2.5vw,20px) 6px;
  }
  .page-content .mk-table{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.55; }
  .page-content .mk-table th{
    font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em;
    text-transform:uppercase; text-align:left; color:var(--crimson);
    border-bottom:2px solid var(--crimson); padding:.9em .7em .55em; white-space:nowrap;
  }
  .page-content .mk-table td{ padding:.6em .7em; border-bottom:1px solid var(--hair); vertical-align:top; }
  .page-content .mk-table tr:last-child td{ border-bottom:0; }
  .page-content .mk-table td:first-child{ font-family:var(--sans); font-weight:600; color:var(--ink); letter-spacing:-.006em; }

  /* ---- fifty key assertions ---- */
  .page-content .assertions{ list-style:none; counter-reset:ax; padding:0; margin:8px 0 0; }
  .page-content .assertions li{
    counter-increment:ax; position:relative; padding-left:52px; margin:0 0 1em; line-height:1.62;
  }
  .page-content .assertions li::before{
    content:counter(ax,decimal-leading-zero); position:absolute; left:0; top:.34em;
    font-family:var(--mono); font-weight:600; color:var(--crimson);
    font-size:11.5px; letter-spacing:.08em; width:38px; text-align:right;
  }

  /* ---- glossary ---- */
  .page-content .glossary{ margin:12px 0 0; }
  .page-content .glossary .gl{ break-inside:avoid; margin:0 0 1.15em; }
  .page-content .glossary dt{
    font-family:var(--sans); font-weight:700; font-size:14.5px; letter-spacing:-.008em;
    color:var(--ink); margin:0 0 .22em;
  }
  .page-content .glossary dd{ margin:0; color:var(--body); line-height:1.62; }
  @media (min-width:920px){ .page-content .glossary{ columns:2; column-gap:44px; } }


  .page-content .figure svg [fill="#FFFFFF"]{ fill:var(--card); }

}


/* ======== page: p-physics ======== */
.p-physics{
  /* the section mark draws itself */
  .mark{ color:var(--rose); margin:0 0 18px; }
  .mark svg{ display:block; width:52px; height:52px; }
  @media (prefers-reduced-motion:no-preference){
    /* the two orbitals trace themselves, then the nucleus lights */
    .mark svg ellipse{
      stroke-dasharray:44; stroke-dashoffset:44;
      animation:trace-draw 1.1s var(--ease) forwards;
    }
    .mark svg ellipse:nth-of-type(2){ animation-delay:.35s; }
    .mark svg circle{ opacity:0; animation:node-in .4s var(--ease) 1.15s forwards; }
  }


}


/* ======== page: p-quotes ======== */
.p-quotes{
  /* the mark: a pair of commas, written */
  .mark{ color:var(--rose); margin:0 0 20px; }
  .mark svg{ display:block; width:52px; height:52px; }
  @media (prefers-reduced-motion:no-preference){
    .mark svg circle{
      stroke-dasharray:14; stroke-dashoffset:14;
      animation:trace-draw .55s var(--ease) forwards;
    }
    .mark svg path{
      stroke-dasharray:9; stroke-dashoffset:9;
      animation:trace-draw .5s var(--ease) .45s forwards;
    }
    .mark svg circle:nth-of-type(2){ animation-delay:.2s; }
    .mark svg path:nth-of-type(2){ animation-delay:.65s; }
  }

  /* ---- the quotations ---- */
  .q{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-sm);
    padding:clamp(18px,3vw,26px) clamp(18px,3vw,26px) clamp(16px,2.5vw,22px);
    margin:0 0 12px;
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .q:hover{ border-color:var(--hair-strong); box-shadow:var(--shadow); }
  .q blockquote{ margin:0; }
  .q blockquote p{
    margin:0; font-family:var(--serif); font-weight:500;
    font-size:clamp(20px,2.4vw,23px); line-height:1.45; color:var(--ink);
    letter-spacing:-.004em;
  }
  .attr{
    font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:-.004em;
    color:var(--ink); margin:16px 0 0;
  }
  .attr .dot{ color:var(--crimson); padding:0 4px; }
  .prov{
    font-family:var(--mono); font-weight:400; font-size:11px;
    line-height:1.65; letter-spacing:.01em; color:var(--muted);
    margin:12px 0 0; padding-top:11px; border-top:1px solid var(--hair);
    max-width:70ch;
  }

  /* ---- quotes: section glosses and the provenance line, 10 August 2026 -----
     Two additions. They sit INSIDE the `.p-quotes{ ... }` nesting block, so
     they are already scoped by it and must NOT repeat the prefix - written
     with the prefix they resolve to a doubled selector and match nothing.
     That is exactly how this shipped broken once. The scoping itself is not
     decorative:
     books.html carries twelve .sec elements of its own against this page's
     four, and .book is used 84 times there against once here. Nothing below
     may be written bare.

     The head. A section title was a bare text node inside <summary>, which
     cannot be positioned, so the markup gains .sec-head wrapping a .sec-line
     (title and count, on one baseline) above a .sec-gloss. The count and the
     "+" keep their existing rules; only their alignment is restated, because
     the head is now two lines rather than one.

     The provenance. This page's standfirst claims that attribution is checked
     before it is believed, and that claim was rendered in --muted at 11px:
     Lc 39.8 against the card these sit on, the quietest thing on the page. It
     is labelled by a ::before, so all 55 gain it from one rule and the 18
     quotes carrying no provenance note are untouched. Values measured on the
     card ground #1C1518, not on the board:
         gloss      #CFC4C5   Lc 71.4
         provenance #D5CACB   Lc 75.0, from 39.8
         label      #FDBAC5   Lc 74.5, the same text-safe rose as the figures */
  .sec > summary{ align-items:flex-start; }
  .sec-head{
    display:flex; flex-direction:column; gap:9px; flex:1 1 auto; min-width:0;
  }
  .sec-line{ display:flex; align-items:baseline; gap:16px; }
  .sec-line .n{ align-self:baseline; }
  .sec > summary::after{ align-self:flex-start; }
  .sec-gloss{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(15px,1.7vw,17px); line-height:1.45; letter-spacing:0;
    color:#CFC4C5; max-width:54ch;
  }

  .prov{ color:#D5CACB; }
  .prov::before{
    content:"Provenance"; display:block; margin-bottom:5px;
    font-family:var(--mono); font-weight:600; font-size:9.5px;
    letter-spacing:.18em; text-transform:uppercase; color:#FDBAC5;
  }


}


/* ======== page: p-books ======== */
.p-books{
  /* the mark: a small shelf */
  .mark{ color:var(--rose); margin:0 0 20px; }
  .mark svg{ display:block; width:52px; height:52px; }
  @media (prefers-reduced-motion:no-preference){
    .mark svg path, .mark svg rect, .mark svg line{
      stroke-dasharray:44; stroke-dashoffset:44;
      animation:trace-draw .9s var(--ease) forwards;
    }
    .mark svg *:nth-child(2){ animation-delay:.2s; }
    .mark svg *:nth-child(3){ animation-delay:.4s; }
    .mark svg *:nth-child(4){ animation-delay:.6s; }
  }

  /* ---- the banner device: a drawn shelf ----
     Presentation attributes lose to any CSS declaration, so the
     hard-coded colours lift without touching the markup. The cream
     bands are struck only across solid spines, so they become the
     board: a solid spine is then the inverse of a hollow one. */
  .banner{ margin:clamp(34px,5vw,56px) 0 0; color:var(--rose); }
  .banner svg{ display:block; width:100%; height:auto; }
  .banner svg [stroke="#861831"]{ stroke:var(--rose); }
  .banner svg [fill="#861831"]{ fill:var(--rose); }
  .banner svg [stroke="#F9F8F3"]{ stroke:var(--board); }
  @media (prefers-reduced-motion:no-preference){
    .banner svg rect, .banner svg path, .banner svg polyline{
      opacity:0; animation:shelf-in .55s var(--ease) forwards;
    }
  }

  /* ---- the opening essay ---- */
  .opening{ margin:0 0 40px; max-width:68ch; }
  .opening p{ margin:0 0 1.05em; }
  .opening p:last-child{ margin-bottom:0; }
  .pull{
    margin:1.7em 0; padding:4px 0 6px 22px; border-left:3px solid var(--crimson);
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(22px,3vw,28px); line-height:1.4; color:var(--ink); text-align:left;
  }

  /* ---- the duotone plate ---- */
  .plate{
    margin:0 0 44px; max-width:68ch;
    color-scheme:light;
    background:#FFFFFF; border:0; border-radius:var(--radius);
    box-shadow:0 0 0 1px rgba(255,255,255,.09), var(--plate-shadow);
    padding:clamp(14px,2.5vw,20px) clamp(14px,2.5vw,20px) 16px;
  }
  .plate img{ display:block; width:100%; height:auto; border-radius:var(--radius-sm); }
  .plate figcaption{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted); margin-top:14px;
  }

  /* ---- the books ---- */
  .book{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-sm);
    margin:0 0 10px; padding:0 clamp(14px,2.5vw,22px);
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .book:hover{ border-color:var(--hair-strong); }
  .book[open]{ box-shadow:var(--shadow); border-color:var(--hair-strong); }
  .book > summary{
    list-style:none; cursor:pointer; padding:.85em 0 .8em;
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  }
  .book > summary::-webkit-details-marker{ display:none; }
  .book > summary::after{
    content:"+"; margin-left:auto; align-self:center;
    font-family:var(--sans); font-weight:400; font-size:20px; line-height:1;
    color:var(--crimson); transition:transform .22s var(--ease);
  }
  .book[open] > summary::after{ transform:rotate(45deg); }
  .book > summary:hover .t{ color:var(--crimson); }
  .book > summary:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; border-radius:6px; }
  .t{
    font-family:var(--display); font-weight:600; font-size:18.5px;
    letter-spacing:-.014em; line-height:1.25; color:var(--ink);
    transition:color .16s var(--ease);
  }
  .by{
    font-family:var(--mono); font-weight:400; font-size:11px;
    letter-spacing:.06em; color:var(--muted);
  }
  .rev{ padding:0 0 1.15em; }
  .rev p{
    margin:0; max-width:64ch; color:var(--body); line-height:1.62;
    border-left:3px solid var(--crimson); padding-left:18px;
  }


}


/* ======== page: p-latest ======== */
.p-latest{
  /* the mark: a pin, dropped */
  .mark{ color:var(--rose); margin:0 0 20px; }
  .mark svg{ display:block; width:52px; height:52px; }
  @media (prefers-reduced-motion:no-preference){
    .mark svg path{
      stroke-dasharray:40; stroke-dashoffset:40;
      animation:trace-draw 1s var(--ease) forwards;
    }
    .mark svg path:nth-of-type(2){ stroke-dasharray:7; stroke-dashoffset:7; animation-duration:.4s; animation-delay:.85s; }
    .mark svg circle{ opacity:0; animation:node-in .4s var(--ease) 1.2s forwards; }
  }

  /* ---------------- the notes ledger: an index, so it stays on the board ---------------- */
  .ledger-strip{ background:var(--board-2); border-bottom:1px solid var(--b-hair); }
  .notes-ledger{ max-width:80ch; padding:clamp(22px,3.4vw,30px) 0 clamp(20px,3vw,26px); }
  .ledger-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 10px; }
  .ledger-eyebrow{
    font-family:var(--mono); font-weight:600; text-transform:uppercase;
    letter-spacing:.16em; color:var(--rose); font-size:10.5px; margin:0;
  }
  .ledger-all{ font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em; color:var(--rose); }
  .ledger-all:hover{ color:#F0657E; text-decoration:underline; text-underline-offset:3px; }
  .ledger-list{ list-style:none; margin:0; padding:0; }
  .ledger-line{ border-top:1px solid var(--b-hair); }
  .ledger-list .ledger-line:first-child{ border-top:0; }
  .ledger-line a{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    padding:12px 0; color:inherit; border-left:2px solid transparent; padding-left:0;
    transition:border-color .16s var(--ease), padding-left .16s var(--ease);
  }
  .ledger-line a:hover{ border-left-color:var(--rose); padding-left:12px; }
  .ll-date{
    font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--b-mut); font-variant-numeric:lining-nums tabular-nums;
  }
  .ll-chip{
    font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:#20090F; background:var(--rose);
    border-radius:999px; padding:4px 10px;
  }
  .ll-title{
    font-family:var(--sans); font-weight:500; font-size:clamp(16px,1.9vw,17.5px);
    line-height:1.3; letter-spacing:-.008em; color:var(--b-tx);
    transition:color .16s var(--ease);
  }
  .ledger-line a:hover .ll-title{ color:var(--rose); }

  .piece{
    background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
    padding:clamp(20px,3.2vw,30px) clamp(18px,3vw,30px) clamp(18px,2.6vw,26px);
    margin:0 0 12px;
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
  }
  .piece:hover{ border-color:var(--hair-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
  .piece-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
  .piece-date{
    font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); font-variant-numeric:lining-nums tabular-nums;
  }
  .piece-tag{
    font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--crimson);
    border:1px solid var(--hair-strong); border-radius:999px; padding:4px 11px; background:var(--paper);
  }
  .piece-title{
    font-family:var(--display); font-weight:700; font-size:clamp(24px,3.3vw,34px);
    line-height:1.06; letter-spacing:-.028em; margin:0;
  }
  .piece-title a{ color:var(--ink); transition:color .16s var(--ease); }
  .piece-title a:hover{ color:var(--crimson); }
  .piece-standfirst{
    font-family:var(--serif); font-size:clamp(17.5px,1.9vw,19.5px); line-height:1.55;
    color:var(--soft); margin:12px 0 0; max-width:64ch;
  }
  .piece-more{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.01em;
    color:var(--crimson); margin-top:16px;
    transition:gap .16s var(--ease), color .16s var(--ease);
  }
  .piece-more:hover{ gap:12px; color:var(--crimson-deep); }


}


/* ======== page: p-article ======== */
.p-article{

  /* header */
  .art-head{
    position:relative; overflow:hidden;
    padding:clamp(52px,8vw,96px) 0 clamp(30px,4vw,48px);
    border-bottom:1px solid var(--b-hair);
    background-image:
      radial-gradient(58% 46% at 8% -10%, rgba(240,86,111,.2), transparent 62%),
      radial-gradient(48% 42% at 96% 0%, rgba(120,32,90,.22), transparent 64%),
      radial-gradient(rgba(245,238,233,.06) 1px, transparent 1.4px);
    background-size:auto,auto,26px 26px;
  }
  .art-head::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, var(--board) 98%);
  }
  .art-head .wrap{ position:relative; z-index:1; container-type:inline-size; }
  .art-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 20px; }
  .art-date{
    font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
    color:var(--muted); font-variant-numeric:lining-nums tabular-nums;
  }
  .art-tag{
    font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--crimson);
    border:1px solid var(--hair-strong); border-radius:999px; padding:5px 12px;
  }
  .art-title{
    font-family:var(--display); font-weight:700; color:var(--ink);
    font-size:clamp(34px, min(6vw, 9cqw), 64px); line-height:1.04;
    letter-spacing:-.028em; margin:0; max-width:22ch;
  }
  .art-standfirst{
    font-family:var(--serif); font-style:italic; font-weight:500; color:var(--rose);
    font-size:clamp(19px,2.4vw,24px); line-height:1.42; margin:22px 0 0; max-width:56ch;
  }
  .art-byline{
    font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em;
    font-size:11.5px; color:var(--b-mut); margin:26px 0 0;
  }

  /* body */
  .article{ padding:clamp(34px,5vw,60px) 0 clamp(18px,3vw,32px); }
  .article-body{
    max-width:68ch; font-family:var(--serif); font-size:19px; line-height:1.68; color:var(--body);
  }
  .article-body > p{ margin:0 0 1.15em; }
  .article-body > p:first-of-type{ margin-top:0; }
  .article-body em{ font-style:italic; }
  .article-body strong{ font-weight:600; color:var(--ink); }
  .article-body a{
    color:var(--crimson); text-decoration:underline;
    text-decoration-color:var(--rose-soft); text-decoration-thickness:1px;
    text-underline-offset:3px; transition:text-decoration-color .16s var(--ease);
  }
  .article-body a:hover{ text-decoration-color:var(--crimson); }
  .sub{
    font-family:var(--display); font-weight:600; color:var(--ink);
    font-size:clamp(21px,2.6vw,27px); line-height:1.18; letter-spacing:-.02em;
    margin:1.9em 0 .5em;
  }
  .pull{
    margin:1.7em 0; padding:4px 0 6px 22px; border-left:3px solid var(--gold);
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(20px,2.4vw,25px); line-height:1.42; color:var(--ink);
  }
  .pull cite{
    display:block; font-style:normal; font-family:var(--mono); font-size:10.5px;
    font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold); margin-top:.8em;
  }

  /* foot */
  .article-foot{
    max-width:68ch; margin-top:clamp(34px,5vw,52px); padding-top:24px;
    border-top:1px solid var(--hair);
  }
  .back-to-latest{
    font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.01em;
    color:var(--crimson); display:inline-flex; align-items:center; gap:9px;
    transition:gap .16s var(--ease), color .16s var(--ease);
  }
  .back-to-latest:hover{ gap:12px; color:var(--crimson-deep); }

}


/* ======== page: p-note ======== */
.p-note{

  .art-head{ padding:clamp(44px,7vw,76px) 0 clamp(24px,3.6vw,40px); }
  .art-meta{ margin:0 0 16px; }
  .note-chip{
    font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:#1C0A0F; background:var(--rose);
    border-radius:999px; padding:5px 12px;
  }
  .art-title{ font-size:clamp(30px, min(5vw, 7.6cqw), 48px); line-height:1.08; letter-spacing:-.022em; max-width:26ch; }
  .art-standfirst{ font-size:clamp(18px,2.2vw,21px); line-height:1.48; margin:18px 0 0; }
  .art-byline{ margin:22px 0 0; }
  .article{ padding:clamp(28px,4.6vw,48px) 0 clamp(18px,3vw,32px); }
  .article-body{ max-width:66ch; font-size:18.5px; }

  /* sources: the note's apparatus, set as apparatus */
  .note-sources{
    max-width:66ch; margin-top:clamp(28px,4vw,40px); padding-top:20px;
    border-top:1px solid var(--hair);
  }
  .note-sources h2{
    font-family:var(--mono); font-weight:600; font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--gold); margin:0 0 12px;
  }
  .note-sources ul{ list-style:none; margin:0; padding:0; }
  .note-sources li{
    font-family:var(--mono); font-size:11.5px; line-height:1.9; color:var(--muted);
  }
  .note-sources li a{ font-weight:600; color:var(--crimson); }
  .note-sources li a:hover{ color:var(--crimson-deep); }

  .article-foot{ max-width:66ch; margin-top:clamp(28px,4.4vw,44px); padding-top:22px;
                 display:flex; gap:20px; flex-wrap:wrap; }

}


/* ======== page: p-notes ======== */
.p-notes{

  .masthead{
    position:relative; overflow:hidden;
    padding:clamp(52px,8vw,96px) 0 clamp(30px,4.6vw,50px);
    border-bottom:1px solid var(--b-hair);
    background-image:
      radial-gradient(58% 46% at 8% -10%, rgba(240,86,111,.2), transparent 62%),
      radial-gradient(48% 42% at 96% 0%, rgba(120,32,90,.22), transparent 64%),
      radial-gradient(rgba(245,238,233,.06) 1px, transparent 1.4px);
    background-size:auto,auto,26px 26px;
  }
  .masthead::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, var(--board) 98%);
  }
  .masthead .wrap{ position:relative; z-index:1; container-type:inline-size; }

  /* the ledger */
  .ledger{ padding:clamp(30px,4.6vw,54px) 0 clamp(28px,4.6vw,48px); max-width:74ch; }
  .month{ padding:clamp(18px,2.8vw,28px) 0; border-top:1px solid var(--b-hair); }
  .month:first-child{ border-top:0; padding-top:0; }
  .month-h{
    font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--rose); margin:0 0 6px;
  }
  .note-list{ list-style:none; margin:0; padding:0; }
  .note-line{ border-top:1px solid var(--b-hair); }
  .note-list .note-line:first-child{ border-top:0; }
  .note-line a{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    padding:14px 0; color:inherit; border-left:2px solid transparent; padding-left:0;
    transition:border-color .16s var(--ease), padding-left .16s var(--ease);
  }
  .note-line a:hover{ border-left-color:var(--rose); padding-left:12px; }
  .nl-date{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--b-mut); font-variant-numeric:lining-nums tabular-nums; min-width:74px;
  }
  .nl-tag{
    font-family:var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--crimson);
    border:1px solid var(--hair-strong); border-radius:999px; padding:4px 11px;
  }
  .nl-title{
    font-family:var(--sans); font-weight:500; font-size:clamp(16.5px,2vw,18.5px);
    line-height:1.3; letter-spacing:-.008em; color:var(--b-tx);
    transition:color .16s var(--ease);
  }
  .note-line a:hover .nl-title{ color:var(--rose); }

  .ledger-foot{
    max-width:74ch; margin-top:clamp(8px,1.6vw,14px); padding-top:22px;
    border-top:1px solid var(--hair);
  }

}


/* ======== page: p-football ======== */
.p-football{

  .masthead{
    position:relative; overflow:hidden;
    padding:clamp(52px,8vw,96px) 0 clamp(34px,5vw,54px);
    border-bottom:1px solid var(--b-hair);
    background-image:
      radial-gradient(58% 46% at 8% -10%, rgba(240,86,111,.2), transparent 62%),
      radial-gradient(48% 42% at 96% 0%, rgba(120,32,90,.22), transparent 64%),
      radial-gradient(rgba(245,238,233,.06) 1px, transparent 1.4px);
    background-size:auto,auto,26px 26px;
  }
  .masthead::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, var(--board) 98%);
  }
  .masthead .wrap{ position:relative; z-index:1; container-type:inline-size; }
  .band-inner{ max-width:var(--wrap); margin:0 auto; padding:14px clamp(20px,5vw,56px); }

  .prose{ padding:clamp(32px,5vw,48px) 0 8px; }
  .prose p{ margin:0 0 20px; max-width:66ch; color:var(--body); font-family:var(--serif); }
  .prose p:first-child{ color:var(--ink); }

  /* the door to the annexe: a way through, so rose */
  .door{
    display:block; max-width:66ch; margin:30px 0 12px;
    padding:24px 26px 26px; text-decoration:none;
    background:var(--card-solid); border:1px solid var(--hair);
    border-left:3px solid var(--crimson); border-radius:var(--radius-sm);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:border-color .18s var(--ease), transform .18s var(--ease),
               box-shadow .18s var(--ease);
  }
  .door:hover{
    transform:translateY(-2px); border-color:var(--hair-strong);
    border-left-color:var(--crimson);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
               0 18px 40px -20px rgba(0,0,0,.7), 0 12px 36px -16px var(--glow);
  }
  .door-kicker{
    display:block; font-family:var(--mono); font-weight:600; font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--crimson);
  }
  .door-title{
    display:block; font-family:var(--display); font-weight:600; color:var(--ink);
    font-size:clamp(21px,3vw,27px); line-height:1.2; letter-spacing:-.022em; margin:10px 0 0;
  }
  .door-sub{
    display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); margin:14px 0 0;
  }
  .door-note{
    font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--muted);
    margin:16px 0 0; max-width:66ch;
  }

}


/* ======== compatibility: retired wrappers and masthead aliases ======== */
.sheet-inner{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.p-quotes .book, .p-books .register, .p-latest .stream{ max-width:76ch; margin:0 auto; padding:0; }
.kicker{
display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-weight:500; text-transform:uppercase;
    letter-spacing:.14em; color:var(--rose); font-size:11px; line-height:1.4;
    margin:0; padding:7px 14px; border:1px solid var(--b-hair-2);
    border-radius:999px; background:transparent;
}
.titlerule{ width:56px; height:3px; background:var(--rose); border-radius:2px; margin:26px 0; }
.stand{
font-family:var(--serif); font-size:clamp(19px,2vw,21.5px); line-height:1.6;
    color:#DFD8CA; margin:24px 0 0; max-width:58ch;
}
/* quotes and books set their masthead in a bare h1, not .masthead-title */
.p-quotes h1, .p-books h1{
font-family:var(--display); font-weight:700; color:var(--b-tx); text-transform:uppercase;
    font-size:clamp(48px,9.4vw,132px); line-height:.94; letter-spacing:-.03em; margin:26px 0 0;
  margin:0;
  font-size:clamp(48px, min(9.4vw, 14cqw), 132px);
}


/* ======== page: p-home ======== */
.p-home{

  /* the hero: the Veil, drawn in the estate's own hand */
  .home-hero{
    position:relative; overflow:hidden;
    min-height:min(92svh, 860px);
    display:grid; place-items:center;
    border-bottom:1px solid var(--hair);
  }
  .home-veil{ position:absolute; inset:0; pointer-events:none; }
  .home-veil svg{ width:100%; height:100%; display:block; }

  .home-mast{
    position:relative; z-index:1; text-align:center; padding:0 20px;
    /* seat the masthead in the lower third, beneath the veil */
    transform:translateY(clamp(130px, 19vh, 180px));
  }
  .home-name{
    font-family:var(--display); font-weight:800; color:var(--ink);
    font-size:clamp(46px, 8.6vw, 96px); line-height:1.02;
    letter-spacing:-.028em; margin:0;
  }
  .home-rule{
    width:132px; height:5px; border-radius:2px; background:var(--rose);
    margin:clamp(14px,2.2vw,20px) auto clamp(18px,2.6vw,26px);
  }
  .home-strap{
    font-family:var(--mono); font-weight:500; color:var(--muted);
    font-size:clamp(10.5px, 1.35vw, 15px); letter-spacing:.42em;
    text-transform:uppercase; margin:0 0 0 .42em;
  }

  /* seven doors: every way in, so rose */
  .home-doors{
    max-width:var(--wrap); margin:0 auto;
    padding:clamp(40px,7vw,84px) clamp(20px,5vw,56px) clamp(64px,9vw,110px);
    display:grid; gap:clamp(14px,2vw,22px);
    grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr));
  }
  .home-door{
    display:block; padding:22px 24px 24px; text-decoration:none;
    background:var(--card-solid); border:1px solid var(--hair);
    border-left:3px solid var(--crimson); border-radius:var(--radius-sm);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:border-color .18s var(--ease), transform .18s var(--ease),
               box-shadow .18s var(--ease);
  }
  .home-door:hover{
    transform:translateY(-2px); border-color:var(--hair-strong);
    border-left-color:var(--crimson);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
               0 18px 40px -20px rgba(0,0,0,.7), 0 12px 36px -16px var(--glow);
  }
  .home-door--wide{ grid-column:1 / -1; }
  .home-door .door-title{
    display:block; font-family:var(--display); font-weight:600; color:var(--ink);
    font-size:clamp(19px,2.2vw,23px); line-height:1.2; letter-spacing:-.02em;
    margin:0;
  }
  .home-door .door-sub{
    display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); margin:12px 0 0;
  }

}


/* ======== hoisted keyframes (deduped) ======== */
  @keyframes tape-in{ to{ opacity:1; } }
  @keyframes shelf-in{ to{ opacity:1; } }