/* ============================================================
   EU Digital Policy — interactive edition
   Dark editorial system. Fraunces (display) + Literata (body) +
   IBM Plex Mono (data/UI). Mechanics = verdigris. Critique = amber.
   ============================================================ */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('fonts/fraunces-variable.woff2') format('woff2-variations'), url('fonts/fraunces-variable.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/literata-400.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/literata-500.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/literata-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plexmono-500.woff2') format('woff2')}

:root{
  /* Ground: aubergine-black. Not neutral black, not blue-black — a purple-biased
     dark that reads as iron-gall ink pooled on vellum rather than as a terminal. */
  --ink-0:#14111B;      /* deepest background */
  --ink-1:#1C1826;      /* panel background */
  --ink-2:#262032;      /* raised surface */
  --ink-3:#382F45;      /* border/hairline on dark */
  --paper:#EDE4D4;      /* bone / vellum text */
  --paper-dim:#B8AC98;  /* secondary text */
  /* --paper-faint carries every piece of metadata on the site — kickers,
     counts, captions, timestamps — at 8.5 to 12px. It was #857A6E, which
     measures 4.45:1 on the page, 4.14:1 on a panel and 3.75:1 on a raised
     surface: under AA on all three, everywhere it is used. #978C7E clears
     4.77:1 on the darkest of them. */
  --paper-faint:#978C7E;/* tertiary / metadata */
  /* The three pigments of the illuminated manuscript. Lapis reads as exposition,
     cinnabar as objection, gold as the reader's own position in the book. */
  --mech:#7A9CD8;       /* lapis lazuli — mechanics */
  --mech-dim:#232C42;
  --crit:#D4614A;       /* cinnabar — critique */
  --crit-dim:#3A2119;
  --live:#D9A93C;       /* gold leaf — interactive, used sparingly */
  --live-dim:#332713;
  --line:#382F45;
  /* Fraunces, self-hosted and already in fonts/. This used to name
     'Bodoni Moda' first and fetch it from Google Fonts on every page load
     of every page: a render-blocking third-party request for the one
     typeface the site did not own, a flash of fallback serif before it
     arrived, and — on any network that blocks Google — a console error and
     a headline set in something else entirely. Fraunces carries the same
     high-contrast editorial voice, is variable, and is already paid for in
     bytes. To go back to Bodoni, self-host it and put it first here. */
  --display:'Fraunces',Didot,Georgia,serif;
  --body:'Literata',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --spine:64px;
  --measure:76ch;
  --shadow:0 24px 60px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------- day mode (vellum, not white) */
[data-theme="light"]{
  --ink-0:#E8E0CD;      /* vellum */
  --ink-1:#DFD5BE;
  --ink-2:#D5C9AE;
  --ink-3:#BFAF90;
  --paper:#221B26;      /* aubergine-black ink */
  --paper-dim:#4E4352;
  /* same defect in day mode, and worse: 3.65 / 3.29 / 2.93.
     #5B5053 clears 4.71:1 on the darkest day surface. */
  --paper-faint:#5B5053;
  --mech:#2C5490;       /* lapis, darkened for AA on vellum */
  --mech-dim:#C6D3E8;
  --crit:#A93A22;       /* cinnabar */
  --crit-dim:#EDD3C6;
  --live:#8A6A14;       /* gold */
  --live-dim:#E8DBB4;
  --line:#BFAF90;
  --shadow:0 20px 44px rgba(34,27,38,.16);
}
[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(13,122,92,.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(168,101,15,.05), transparent 55%);
}
[data-theme="light"] ::selection{background:var(--live);color:#1B1509}
[data-theme="light"] .top{background:rgba(232,224,205,.90)}
[data-theme="light"] .cmdk-scrim{background:rgba(34,27,38,.48)}
[data-theme="light"] .cmdk-item mark{color:#2B1A06}
[data-theme="light"] .part-roman{-webkit-text-stroke-color:var(--ink-3);color:transparent}
[data-theme="light"] .tree-node-circle{fill:var(--ink-1)}
body{transition:background-color .25s,color .25s}
.themebtn{display:flex;align-items:center;gap:7px;background:var(--ink-1);border:1px solid var(--line);
  color:var(--paper-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:7px 11px;cursor:pointer}
.themebtn:hover{border-color:var(--mech);color:var(--paper)}
.themebtn .dot{width:8px;height:8px;border-radius:50%;background:var(--paper);flex:none}
[data-theme="light"] .themebtn .dot{background:var(--ink-0);box-shadow:0 0 0 1px var(--ink-3)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body{
  margin:0;background:var(--ink-0);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.68;
  background-image:
    radial-gradient(ellipse 1000px 620px at 12% -12%, rgba(122,156,216,.09), transparent 62%),
    radial-gradient(ellipse 760px 540px at 100% 4%, rgba(217,169,60,.055), transparent 58%),
    radial-gradient(ellipse 700px 700px at 78% 108%, rgba(212,97,74,.05), transparent 60%);
  background-attachment:fixed;
}
::selection{background:var(--live);color:#1B1509}

/* ---------------------------------------------------------- topbar */
.top{
  position:fixed;top:0;left:0;right:0;z-index:90;height:56px;display:flex;align-items:stretch;
  background:rgba(20,17,27,.88);backdrop-filter:blur(14px) saturate(1.25);border-bottom:1px solid var(--line);
}
.progress-track{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--mech),var(--live));transition:width .1s linear}
.brand{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--line);cursor:pointer;background:none;border-top:0;border-bottom:0;border-left:0;color:inherit;font:inherit;text-align:left}
.brand .mark{width:9px;height:9px;background:var(--mech);flex:none;transform:rotate(45deg)}
.brand b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--paper);display:block;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:8.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-top:2px}
.topmid{flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;min-width:0}
.railtoggle{display:none}
.lens{display:flex;gap:0;border:1px solid var(--line);background:var(--ink-1)}
.lens button{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:8px 11px;
  background:none;border:0;color:var(--paper-faint);cursor:pointer;border-right:1px solid var(--line)}
.lens button:last-child{border-right:0}
.lens button[aria-pressed="true"][data-lens="mech"]{background:var(--mech-dim);color:var(--mech)}
.lens button[aria-pressed="true"][data-lens="crit"]{background:var(--crit-dim);color:var(--crit)}
.lens button[aria-pressed="true"][data-lens="all"]{background:var(--ink-3);color:var(--paper)}
.kbtn{display:flex;align-items:center;gap:9px;background:var(--ink-1);border:1px solid var(--line);
  color:var(--paper-dim);font-family:var(--body);font-size:13px;padding:7px 10px 7px 13px;cursor:pointer}
.kbtn kbd{font-family:var(--mono);font-size:9.5px;background:var(--ink-3);color:var(--paper);padding:2px 5px;border:1px solid var(--line)}
.kbtn:hover{border-color:var(--mech);color:var(--paper)}
.spacer{margin-left:auto}

/* ---------------------------------------------------------- contents trigger + slim spine */
.contents-btn{display:flex;align-items:center;gap:10px;background:var(--ink-1);border:1px solid var(--line);
  color:var(--paper);font-family:var(--display);font-weight:600;font-size:13.5px;padding:7px 14px 7px 11px;cursor:pointer}
.contents-btn .glyph{width:16px;height:16px;position:relative}
.contents-btn .glyph i{position:absolute;background:var(--mech);border-radius:50%}
.contents-btn .glyph i:nth-child(1){width:5px;height:5px;top:0;left:5.5px}
.contents-btn .glyph i:nth-child(2){width:4px;height:4px;top:8px;left:0}
.contents-btn .glyph i:nth-child(3){width:4px;height:4px;top:8px;right:0}
.contents-btn .glyph i:nth-child(4){width:3px;height:3px;bottom:0;left:6.5px;background:var(--crit)}
.contents-btn:hover{border-color:var(--mech)}

.shell{display:grid;grid-template-columns:var(--spine) minmax(0,1fr);padding-top:56px}
.spine{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-1),var(--ink-0));padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.spine::-webkit-scrollbar{display:none}
.spine-item{width:40px;height:40px;display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:var(--mono);font-size:11px;color:var(--paper-faint);border-left:2px solid transparent;position:relative}
.spine-item:hover{color:var(--paper)}
.spine-item.active{color:var(--mech);border-left-color:var(--mech)}
.spine-item .dot{position:absolute;right:6px;top:8px;width:5px;height:5px;background:var(--ink-3);border-radius:50%}
.spine-item.visited .dot{background:var(--mech)}
.spine-foot{margin-top:auto;padding-top:14px}
.spine-foot button{width:34px;height:34px;background:none;border:1px solid var(--line);color:var(--paper-faint);
  cursor:pointer;font-family:var(--mono);font-size:13px}
.spine-foot button:hover{border-color:var(--live);color:var(--paper)}

/* ---------------------------------------------------------- Tree-of-Life dropdown overlay */
.tree-scrim{position:fixed;inset:0;background:rgba(4,6,8,.78);backdrop-filter:blur(4px);z-index:110;display:none;
  overflow-y:auto;padding:90px 20px 60px}
.tree-scrim.show{display:block;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.tree-panel{max-width:980px;margin:0 auto;background:var(--ink-1);border:1px solid var(--line);box-shadow:var(--shadow);
  display:grid;grid-template-columns:600px 1fr}
.tree-panel-map{padding:20px;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.tree-map{width:100%;height:auto}
.tree-path{stroke:var(--ink-3);stroke-width:1.2;transition:stroke .15s}
.tree-path.lit{stroke:var(--mech)}
.tree-node{cursor:pointer}
.tree-node-circle{fill:var(--ink-2);stroke:var(--ink-3);stroke-width:1.3;transition:fill .15s,stroke .15s}
.tree-node-roman{font-family:var(--mono);font-size:13px;fill:var(--paper-dim);letter-spacing:.02em;pointer-events:none}
.tree-node:hover .tree-node-circle,.tree-node.hl .tree-node-circle{fill:var(--mech-dim);stroke:var(--mech)}
.tree-node:hover .tree-node-roman,.tree-node.hl .tree-node-roman{fill:var(--paper)}
.tree-node.tree-annex .tree-node-circle{stroke-dasharray:3 2}
.tree-node:focus{outline:none}
.tree-panel-list{padding:22px 22px 22px 10px;max-height:min(78vh,720px);overflow-y:auto}
.tree-panel-list h3{font-family:var(--display);font-size:18px;color:var(--paper);margin:0 0 3px;padding:0 12px}
.tree-panel-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--paper-faint);margin:0 0 14px;padding:0 12px;text-transform:uppercase}
.tree-listitem{display:grid;grid-template-columns:28px 1fr 24px;align-items:baseline;gap:10px;width:100%;
  background:none;border:0;border-left:2px solid transparent;padding:9px 12px;text-align:left;color:var(--paper-dim);cursor:pointer}
.tree-listitem:hover,.tree-listitem.hl{background:rgba(217,169,60,.09);border-left-color:var(--mech);color:var(--paper)}
.tli-roman{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint)}
.tree-listitem:hover .tli-roman,.tree-listitem.hl .tli-roman{color:var(--mech)}
.tli-title{font-family:var(--body);font-size:13.5px;line-height:1.3}
.tli-mins{font-family:var(--mono);font-size:8.5px;color:var(--paper-faint);text-align:right}
.tree-close{position:absolute;top:20px;right:max(20px,calc(50vw - 490px));background:var(--ink-1);border:1px solid var(--line);
  color:var(--paper-dim);width:34px;height:34px;cursor:pointer;font-size:16px}
.tree-close:hover{border-color:var(--live);color:var(--paper)}
@media (max-width:1040px){
  .tree-panel{grid-template-columns:1fr;max-width:520px}
  .tree-panel-map{border-right:0;border-bottom:1px solid var(--line)}
  .tree-close{right:20px}
}

/* ---------------------------------------------------------- hero */
.hero{padding:0 0 60px;position:relative}
.hero-wrap{max-width:1180px;margin:0 auto;padding:64px 48px 0;display:grid;grid-template-columns:1fr 560px;gap:40px;align-items:center}
.hero-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mech)}
.hero h1{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 96;
  font-size:clamp(40px,6.2vw,80px);line-height:1.0;letter-spacing:-.012em;color:var(--paper);margin:20px 0 0}
.hero h1 em{font-style:italic;font-weight:500;color:var(--live)}
.hero .stand{font-family:var(--body);font-size:16.5px;line-height:1.6;color:var(--paper-dim);max-width:58ch;margin:22px 0 0}
.hero-meta{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--paper-faint);margin-top:22px}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;
  border:1px solid var(--line);background:var(--ink-1);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:var(--live);color:#1B1509;border-color:var(--live);font-weight:600}
.btn.primary:hover{background:#EBC160;border-color:#EBC160}
.btn:hover{border-color:var(--live)}
.map-wrap{position:relative}
.system-map{width:100%;height:auto;overflow:visible}
.map-link{stroke:var(--ink-3);stroke-width:1.4}
.map-hub{fill:var(--ink-2);stroke:var(--line);stroke-width:1}
.map-hub-text{font-family:var(--mono);font-size:13px;fill:var(--paper);letter-spacing:.06em}
.map-hub-sub{font-family:var(--mono);font-size:8px;fill:var(--paper-faint);letter-spacing:.1em}
.map-node{cursor:pointer}
.map-node-circle{fill:var(--ink-1);stroke:var(--ink-3);stroke-width:1.3;transition:fill .18s,stroke .18s}
.map-node-text{font-family:var(--mono);font-size:11.5px;fill:var(--paper-dim);letter-spacing:.02em;pointer-events:none}
.map-node:hover .map-node-circle,.map-node:focus .map-node-circle{fill:var(--mech-dim);stroke:var(--mech)}
.map-node:hover .map-node-text,.map-node:focus .map-node-text{fill:var(--paper)}
.map-node:focus{outline:none}
.node-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  max-width:1180px;margin:8px auto 0;padding:0 48px}
.node-card{background:var(--ink-1);border:0;padding:16px 16px 15px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.node-card:hover{background:var(--ink-2)}
.node-card-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mech);display:block}
.node-card-full{font-family:var(--display);font-size:15px;color:var(--paper);display:block;margin-top:4px}
.node-card-blurb{font-family:var(--body);font-size:12.5px;color:var(--paper-faint);display:block;margin-top:6px;line-height:1.45}

/* ---------------------------------------------------------- study scaffolding */
.statrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--paper-dim);background:var(--ink-2);
  border:1px solid var(--line);padding:4px 9px}
.thread{max-width:var(--measure);margin:0 0 40px;padding:18px 22px 16px;background:var(--ink-1);
  border:1px solid var(--line);border-left:3px solid var(--live)}
.thread-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--live-text);display:block;margin-bottom:10px}
.thread ul{margin:0;padding-left:18px}
.thread li{font-family:var(--body);font-size:14.5px;color:var(--paper);opacity:.95;margin-bottom:8px;line-height:1.55}
.thread li::marker{color:var(--live)}
.recap{max-width:var(--measure);margin:36px 0 0;padding-top:16px;border-top:1px dashed var(--line)}
.recap-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:9px}
.recap-terms{display:flex;flex-wrap:wrap;gap:8px 10px}
.recap-terms .gloss{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-1);padding:4px 9px;color:var(--paper-dim)}
.recap-terms .gloss:hover{border-color:var(--mech);color:var(--mech)}

/* ---------------------------------------------------------- reading column */
.page{padding:0 0 120px;min-width:0}
.readwrap{max-width:calc(var(--measure) + 140px);margin:0 auto;padding:0 48px}
.part{padding-top:90px;scroll-margin-top:70px}
.part:first-of-type{padding-top:56px}
.part-head{display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:start;margin-bottom:34px}
.part-roman{font-family:var(--display);font-weight:400;font-variation-settings:'opsz' 96;
  font-size:78px;line-height:.78;color:transparent;
  -webkit-text-stroke:1px var(--ink-3);letter-spacing:0}
.part-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}
.part h2{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 72;
  font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-.008em;
  color:var(--paper);margin:12px 0 0}
.part-dek{font-family:var(--mono);font-size:12px;color:var(--paper-faint);margin:12px 0 0;letter-spacing:.01em}
.part-body{max-width:var(--measure)}
.part-body h3{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 32;
  font-size:23px;color:var(--paper);margin:40px 0 10px;padding-top:6px;letter-spacing:0}
.part-body h4{font-family:var(--body);font-weight:500;font-style:italic;font-size:16.5px;color:var(--mech);margin:26px 0 8px}
.part-body p{margin:0 0 15px;color:var(--paper);opacity:.92}
.part-body p b{color:var(--paper);font-weight:600}
.annex .part-roman{font-size:52px}

/* ---------------------------------------------------------- reveal-on-scroll */
/* ------------------------------------------------------------------
   Scroll reveal, inverted.

   This used to hide every child of a .reveal-group at opacity:0 and
   wait for JavaScript to add .in to each one. Anything injected into
   a group *after* its observer had fired therefore stayed at opacity
   zero for ever, while still taking up its full height — which is
   what happened to the regulatory status strips, the per-Part note
   lists and the evidence legend once Phase 2 started rendering them
   from data. Eighty-five elements were reserving space and showing
   nothing.

   The default is now visible. The animation is opt-in: script adds
   .armed to a group it intends to animate and removes it again once
   the reveal has run, so a group is only ever hidden during the
   moment it is actually being revealed, and later injections land in
   a plain, visible container.
   ------------------------------------------------------------------ */
.reveal-group.armed > *{opacity:0;transform:translateY(14px)}
.reveal-group.armed.in > *{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal-group.armed.in > *:nth-child(2){transition-delay:55ms}
.reveal-group.armed.in > *:nth-child(3){transition-delay:110ms}
.reveal-group.armed.in > *:nth-child(4){transition-delay:165ms}
.reveal-group.armed.in > *:nth-child(5){transition-delay:220ms}
.reveal-group.armed.in > *:nth-child(6){transition-delay:275ms}
.reveal-group.armed.in > *:nth-child(7){transition-delay:330ms}
.reveal-group.armed.in > *:nth-child(8){transition-delay:385ms}
.reveal-group.armed.in > *:nth-child(n+9){transition-delay:440ms}
@media (prefers-reduced-motion:reduce){
  .reveal-group.armed > *{opacity:1;transform:none}
}

/* ---------------------------------------------------------- glossary term buttons */
.gloss{font:inherit;color:var(--live-text);background:none;border:0;border-bottom:1px dotted var(--live);cursor:pointer;padding:0}
.gloss:hover,.gloss[aria-expanded="true"]{color:var(--mech);border-bottom-color:var(--mech)}
.gloss-pop{position:absolute;z-index:70;max-width:320px;background:var(--ink-2);border:1px solid var(--live);
  padding:12px 14px;font-family:var(--body);font-size:13px;line-height:1.5;color:var(--paper);box-shadow:0 14px 30px rgba(0,0,0,.5);
  display:none}
.gloss-pop.show{display:block}
.gloss-pop b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--live);margin-bottom:6px}

/* ---------------------------------------------------------- tables */
.tbl-wrap{margin:20px 0 26px}
.tbl-wrap figcaption{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin-bottom:8px;line-height:1.4}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-family:var(--body);font-size:13.5px}
thead th{background:var(--ink-2);color:var(--paper);text-align:left;font-weight:600;padding:9px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top;color:var(--paper-dim)}
tbody tr:hover td{background:rgba(255,255,255,.025);color:var(--paper)}

/* ---------------------------------------------------------- content figures: pyramids, comparisons */
.cfig{max-width:var(--measure);margin:26px 0 32px}
.cfig figcaption{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin-top:10px;line-height:1.5}
.cfig figcaption b{color:var(--paper-dim);font-weight:500}
.pyramid{width:100%;height:auto;overflow:visible}
.pyr-band{stroke:var(--line);stroke-width:1}
.pyr-band-label{font-family:var(--mono);font-size:12.5px;fill:var(--ink-0);letter-spacing:.01em}
.pyr-band-sub{font-family:var(--body);font-size:11px;fill:var(--ink-0);opacity:.72}
[data-theme="light"] .pyr-band-label,[data-theme="light"] .pyr-band-sub{fill:var(--paper)}
.pyr-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--paper-faint)}
.cmpbars{width:100%;height:auto}
.cmp-track{fill:var(--ink-2)}
.cmp-fill{}
.cmp-label{font-family:var(--mono);font-size:11.5px;fill:var(--paper-dim)}
.cmp-value{font-family:var(--mono);font-size:13px;fill:var(--paper);font-weight:500}
.cmp-cat{font-family:var(--body);font-size:12.5px;fill:var(--paper-faint)}

/* ---------------------------------------------------------- boxes: mechanics / critique */
.box{margin:22px 0;padding:18px 20px 16px;border:1px solid var(--line);position:relative;max-width:var(--measure)}
.box-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;display:block;margin-bottom:8px}
/* boxes carry an h3 or an h4 depending on the heading level above them;
   both are styled identically because they are the same thing visually */
.box h3,.box h4{margin:0 0 10px!important;font-style:normal!important;font-family:var(--display)!important;font-weight:600!important;font-size:17px!important}
.box-body{font-size:14.5px;line-height:1.65}
.box-body b{font-weight:600}
.box-mech{background:linear-gradient(180deg,rgba(122,156,216,.07),transparent 42%);border-left:3px solid var(--mech)}
.box-mech .box-label{color:var(--mech)} .box-mech h3,.box-mech h4{color:var(--paper)}
.box-crit{background:linear-gradient(180deg,rgba(212,97,74,.07),transparent 42%);border-left:3px solid var(--crit)}
.box-crit .box-label{color:var(--crit)} .box-crit h3,.box-crit h4{color:var(--paper)}
body[data-lens="mech"] .box-crit{opacity:.15;filter:grayscale(.6)}
body[data-lens="crit"] .box-mech{opacity:.15;filter:grayscale(.6)}
.box{transition:opacity .25s,filter .25s}

/* ---------------------------------------------------------- glossary panel */
.gpanel{position:fixed;top:56px;right:0;bottom:0;width:380px;max-width:90vw;background:var(--ink-1);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
  z-index:80;overflow-y:auto;padding:26px 26px 60px}
.gpanel.open{transform:none}
.gpanel h3{font-family:var(--display);font-size:20px;color:var(--paper);margin:0 0 4px}
.gpanel .gp-sub{font-family:var(--mono);font-size:10px;color:var(--paper-faint);margin-bottom:20px;letter-spacing:.05em}
.gloss-entry{padding:14px 0;border-top:1px solid var(--line)}
.gloss-entry:first-of-type{border-top:0}
.gloss-entry b{font-family:var(--mono);font-size:12px;color:var(--live-text);letter-spacing:.03em}
.gloss-entry span{display:block;font-family:var(--body);font-size:13.5px;color:var(--paper-dim);margin-top:5px;line-height:1.5}
.gloss-entry.lit b{color:var(--mech)}
.gpanel-close{position:absolute;top:20px;right:20px;background:none;border:1px solid var(--line);color:var(--paper-dim);
  width:28px;height:28px;cursor:pointer;font-size:15px;line-height:1}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:75;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------- command palette */
.cmdk-scrim{position:fixed;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(3px);z-index:120;display:none;padding:14vh 20px 0}
.cmdk-scrim.show{display:block}
.cmdk{max-width:640px;margin:0 auto;background:var(--ink-1);border:1px solid var(--live);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.cmdk-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cmdk-input-wrap svg{flex:none;opacity:.5}
.cmdk input{flex:1;background:none;border:0;outline:0;color:var(--paper);font-family:var(--body);font-size:16px}
.cmdk input::placeholder{color:var(--paper-faint)}
.cmdk-esc{font-family:var(--mono);font-size:9.5px;color:var(--paper-faint);border:1px solid var(--line);padding:2px 6px}
.cmdk-results{max-height:58vh;overflow-y:auto;padding:8px}
.cmdk-item{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:11px 12px;cursor:pointer;align-items:baseline}
.cmdk-item:hover,.cmdk-item.sel{background:rgba(217,169,60,.10)}
.cmdk-item .cr{font-family:var(--mono);font-size:11px;color:var(--mech)}
.cmdk-item .ct{font-family:var(--body);font-size:14.5px;color:var(--paper)}
.cmdk-item .cs{display:block;font-family:var(--body);font-size:12px;color:var(--paper-faint);margin-top:3px;line-height:1.4}
.cmdk-item mark{background:var(--live);color:#1B1509;padding:0 1px}
.cmdk-empty{padding:30px 16px;text-align:center;color:var(--paper-faint);font-family:var(--body);font-size:13.5px}
.cmdk-hint{padding:10px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--paper-faint);
  display:flex;gap:14px}

/* ---------------------------------------------------------- footer / pager */
.pager{display:flex;gap:14px;margin:70px 0 0;padding-top:26px;border-top:1px solid var(--line);max-width:var(--measure)}
.pg{flex:1;background:var(--ink-1);border:1px solid var(--line);padding:14px 16px;text-decoration:none;color:var(--paper-dim);cursor:pointer}
.pg:hover{border-color:var(--mech);color:var(--paper)}
.pg small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:5px}
.pg b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block}
.pg.next{text-align:right}
.footnote{max-width:var(--measure);margin:60px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--paper-faint);line-height:1.7}

/* ---------------------------------------------------------- mobile */
@media (max-width:1080px){
  .hero-wrap{grid-template-columns:1fr;padding:48px 28px 0}
  .node-grid{grid-template-columns:1fr;padding:0 28px}
  .readwrap{padding:0 28px}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .spine{display:none}
  .lens{display:none}
  .kbtn span{display:none}
  body{font-size:16px}
  .part-head{grid-template-columns:1fr}
  .part-roman{font-size:40px}
  .gpanel{width:100%;max-width:100%}
  .tree-panel{grid-template-columns:1fr}
}

/* ============================================================
   Integration additions — resume, pager, three-tier search,
   progressive disclosure, number→context, shortcuts overlay.
   Built entirely on the existing token set; no new hues added.
   ============================================================ */

/* ---- resume bar: "continue reading", last three positions ---- */
.resume-bar{max-width:1180px;margin:14px auto 0;padding:0 48px}
.resume-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink-1);
  border:1px solid var(--line);border-left:3px solid var(--live);padding:13px 16px}
.resume-card .rc-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--evi-gold);flex:none}
.resume-list{display:flex;gap:10px 18px;flex-wrap:wrap;flex:1;min-width:0}
.resume-item{display:flex;align-items:baseline;gap:7px;background:none;border:0;cursor:pointer;
  color:var(--paper-dim);font-family:var(--body);font-size:13.5px;padding:4px 0;text-align:left}
.resume-item:hover{color:var(--paper)}
.resume-item .ri-roman{font-family:var(--mono);font-size:11px;color:var(--evi-gold)}
.resume-item .ri-ago{font-family:var(--mono);font-size:10px;color:var(--paper-faint)}
.resume-dismiss{margin-left:auto;background:none;border:0;color:var(--paper-faint);cursor:pointer;
  font-size:16px;line-height:1;flex:none;padding:2px 4px}
.resume-dismiss:hover{color:var(--paper)}
@media (max-width:1080px){.resume-bar{padding:0 28px}}
@media (max-width:860px){.resume-bar{padding:0 20px}.resume-card{padding:12px 14px}}

/* ---- progressive disclosure: the "threshold" pattern ----
   lighter than the surrounding body text, not heavier — an accordion
   with a border and a fill would out-weigh the thing it subordinates. */
.thr{margin:20px 0;max-width:var(--measure)}
.thr summary{list-style:none;cursor:pointer;font-family:var(--body);font-style:italic;font-weight:400;
  color:var(--paper-faint);font-size:15.5px;line-height:1.55;padding-left:22px;position:relative}
.thr summary::-webkit-details-marker{display:none}
.thr summary::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:1px;background:var(--live);
  transition:width .18s}
.thr summary:hover{color:var(--paper-dim)}
.thr summary:hover::before{width:20px}
.thr summary .thr-more{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--live-text);margin-left:8px}
.thr[open] summary{color:var(--paper-dim);margin-bottom:8px}
.thr-body{padding-left:22px;font-size:15px;line-height:1.65;color:var(--paper-dim)}
.thr-body p{margin:0 0 .8em}
.thr-body p:last-child{margin-bottom:0}

/* ---- number → context: a comparison, not a caption ---- */
.numctx{max-width:var(--measure);margin:18px 0 26px}
.numctx-bar{margin-bottom:14px}
.numctx-bar .nb-label{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:11.5px;color:var(--paper-faint);margin-bottom:6px}
.numctx-bar .nb-label b{color:var(--paper);font-weight:500}
.numctx-bar .nb-track{height:9px;background:var(--ink-2);border:1px solid var(--line);position:relative;overflow:hidden}
.numctx-bar .nb-fill{height:100%;display:block}
.numctx-bar.a .nb-fill{background:var(--paper-faint)}
.numctx-bar.b .nb-fill{background:var(--crit)}
.numctx-note{font-family:var(--body);font-size:12.5px;color:var(--paper-faint);margin:2px 0 0}

/* ---- cmdk result groups: definitions / references / parts ---- */
.cmdk-group{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-faint);padding:10px 12px 6px}
.cmdk-group:first-child{padding-top:4px}

/* ---- shortcuts overlay ---- */
.shortcuts-scrim{position:fixed;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(3px);z-index:130;
  display:none;align-items:center;justify-content:center;padding:20px}
.shortcuts-scrim.show{display:flex}
.shortcuts-panel{max-width:400px;width:100%;background:var(--ink-1);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:22px 24px 20px}
.shortcuts-panel h3{font-family:var(--display);font-weight:600;font-size:17px;color:var(--paper);margin:0 0 16px}
.shortcuts-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--line)}
.shortcuts-row:first-of-type{border-top:0}
.shortcuts-row span{font-family:var(--body);font-size:13.5px;color:var(--paper-dim)}
.shortcuts-row kbd{font-family:var(--mono);font-size:10.5px;background:var(--ink-3);color:var(--paper);
  padding:3px 7px;border:1px solid var(--line)}


/* ============================================================
   THE PORTAL — the Tree as frontispiece.
   The table of contents is the first thing on screen and is
   interactive before anything else loads. Paths draw in along
   the descent Keter -> Malkut; nodes kindle in the same order.
   ============================================================ */
.portal{min-height:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:22px 28px 54px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.portal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 46%, rgba(217,169,60,.05), transparent 70%)}
/* ============================================================
   THE FRONTISPIECE

   A gazette masthead, not a dashboard header: the title set across
   the full measure, a double rule under it, one dense line of fact,
   and then the tree centred beneath as the plate. The tree is the
   one large gesture on the page and is drawn as an engraving —
   thin, open, unfilled — rather than as a diagram of bubbles.
   ============================================================ */
.portal-inner{max-width:1180px;width:100%;display:block;position:relative;z-index:1}
.portal-masthead{text-align:center;max-width:none}
.sop{margin-top:0}
.portal-figure{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}

.portal h1{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 96;
  font-size:clamp(29px,3vw,46px);line-height:1.05;letter-spacing:-.012em;color:var(--paper);margin:14px 0 0;
  max-width:15em;text-wrap:balance}
.portal h1 em{font-style:italic;font-weight:500;color:var(--live)}
.portal-stand{font-family:var(--body);font-size:15.5px;line-height:1.6;color:var(--paper-dim);margin:16px 0 0;
  max-width:52ch}

.portal-tree{height:min(50vh,430px);width:auto;overflow:visible}
.pt-path{stroke:var(--ink-3);stroke-width:1.2;transition:stroke .2s,stroke-width .2s}
.pt-path.lit{stroke:var(--live);stroke-width:1.9}
.pt-circle{fill:var(--ink-1);stroke:var(--ink-3);stroke-width:1.3;transition:fill .2s,stroke .2s}
.pt-roman{font-family:var(--mono);font-size:13px;fill:var(--paper-dim);letter-spacing:.02em;pointer-events:none;
  transition:fill .2s}
.pt-halo{opacity:0;transition:opacity .28s}
.pt-node{cursor:pointer}
.pt-node:hover .pt-circle,.pt-node:focus-visible .pt-circle,.pt-node.hl .pt-circle{fill:var(--live-dim);stroke:var(--live)}
.pt-node:hover .pt-roman,.pt-node:focus-visible .pt-roman,.pt-node.hl .pt-roman{fill:var(--live)}
.pt-node:hover .pt-halo,.pt-node.hl .pt-halo{opacity:1}
.pt-node:focus{outline:none}
.pt-node:focus-visible .pt-halo{opacity:1}
.pt-node.visited .pt-circle{fill:var(--ink-2)}
.pt-node.visited .pt-roman{fill:var(--paper)}
.pt-node.tree-annex .pt-circle{stroke-dasharray:3 2}

/* draw-in: paths unspool, then each vessel kindles in descent order */
.portal-tree .pt-path{stroke-dasharray:var(--len,340);stroke-dashoffset:var(--len,340);
  animation:ptDraw .62s cubic-bezier(.4,.7,.3,1) forwards;animation-delay:calc(.18s + var(--i) * .045s)}
@keyframes ptDraw{to{stroke-dashoffset:0}}
.portal-tree .pt-node{opacity:0;animation:ptKindle .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.34s + var(--i) * .072s)}
@keyframes ptKindle{from{opacity:0;transform:scale(.7)}
  to{opacity:1}}

.portal-caption{font-family:var(--body);font-size:14.5px;line-height:1.55;color:var(--paper-dim);
  margin:0 0 22px;min-height:4.7em;max-width:34ch}
.portal-caption .pc-roman{font-family:var(--mono);font-size:12px;color:var(--live);display:block;margin-bottom:6px;
  letter-spacing:.08em}
.portal-caption .pc-title{color:var(--paper);display:block}
.portal-caption .pc-mins{font-family:var(--mono);font-size:11px;color:var(--paper-faint);display:block;margin-top:7px}
.portal-caption .pc-default{color:var(--paper-faint);font-style:italic}
.portal-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn-quiet{background:none;color:var(--paper-dim)}
.btn-quiet:hover{color:var(--paper)}
.portal-scrollhint{display:block;margin-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ---- the veil: transition between the index and the text ---- */
.veil{position:fixed;inset:0;z-index:200;background:var(--ink-0);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.veil.on{opacity:1;pointer-events:auto}
.veil-roman{font-family:var(--display);font-variation-settings:'opsz' 96;font-weight:400;font-size:clamp(80px,17vw,220px);
  line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--live);letter-spacing:.02em;
  transform:scale(.84);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .38s}
.veil.on .veil-roman{transform:scale(1);opacity:1}
.veil-title{position:absolute;bottom:16vh;left:0;right:0;text-align:center;font-family:var(--body);font-size:14px;
  color:var(--paper-dim);padding:0 24px;opacity:0;transition:opacity .4s .12s}
.veil.on .veil-title{opacity:1}

/* the second band: six regimes, demoted from hero to supporting matter */
.hero-h2{font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 72;
  font-size:clamp(26px,3vw,38px);line-height:1.06;letter-spacing:-.008em;color:var(--paper);margin:14px 0 0}
.hero{border-top:1px solid var(--line);padding-top:8px}

@media (prefers-reduced-motion:reduce){
  .portal-tree .pt-path{stroke-dashoffset:0;animation:none}
  .portal-tree .pt-node{opacity:1;animation:none}
  .veil,.veil-roman,.veil-title{transition:none}
}
@media (max-width:1080px){
  .portal-inner{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .portal-head,.portal-foot,.portal-figure{grid-column:1}
  .portal-head,.portal-foot{text-align:center}
  .portal h1{margin-left:auto;margin-right:auto}
  .portal-stand{margin-left:auto;margin-right:auto}
  .portal-caption{margin-left:auto;margin-right:auto;text-align:center;min-height:3.4em}
  .portal-cta{justify-content:center}
  .portal-tree{height:min(52vh,440px)}
  .portal{min-height:auto;padding:32px 24px 44px}
}
@media (max-width:860px){
  .portal-tree{height:min(46vh,380px)}
  .portal h1{font-size:clamp(30px,7.4vw,40px)}
}

/* ============================================================
   THE ROTA — a volvelle for the compliance calendar.
   Fixed index at twelve o'clock, rotating disc beneath it: the
   medieval instrument for reading one position out of a cycle.
   The table underneath stays the authoritative static version.
   ============================================================ */
.rota{max-width:var(--measure);margin:26px 0 34px;padding:0}
.rota-stage{position:relative;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:28px;align-items:center}
.rota-svg{width:100%;height:auto;overflow:visible}
.rota-rim{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.rota-rim-inner{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 5;opacity:.7}
.rota-index path{fill:var(--live)}
.rota-index line{stroke:var(--live);stroke-width:1.4}
.rota-disc{transition:transform .62s cubic-bezier(.34,.8,.28,1);transform-origin:260px 260px}
.rota-tick{stroke:var(--ink-3);stroke-width:1.4}
.rota-tick.on{stroke:var(--live);stroke-width:2}
.rota-dot{fill:var(--ink-1);stroke:var(--ink-3);stroke-width:1.4;cursor:pointer;
  transition:fill .25s,stroke .25s,r .25s}
.rota-dot:hover{stroke:var(--paper-dim)}
.rota-dot.on{fill:var(--live);stroke:var(--live)}
.rota-dot:focus{outline:none}
.rota-dot:focus-visible{stroke:var(--live);stroke-width:2.4}
.rota-panel{min-height:170px}
.rota-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);display:block}
.rota-date{font-family:var(--display);font-variation-settings:'opsz' 60;font-weight:600;font-size:30px;
  color:var(--live);display:block;margin-top:8px;line-height:1.1}
.rota-ins{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mech);display:block;margin-top:9px}
.rota-text{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--paper-dim);margin:11px 0 0}
.rota-ctrl{display:flex;align-items:center;gap:14px;margin-top:16px}
.rota-btn{background:var(--ink-1);border:1px solid var(--line);color:var(--paper-dim);
  width:34px;height:34px;cursor:pointer;font-size:14px;line-height:1;flex:none}
.rota-btn:hover{border-color:var(--live);color:var(--paper)}
.rota-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-faint)}
.rota figcaption{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin-top:14px;line-height:1.55}
@media (prefers-reduced-motion:reduce){ .rota-disc{transition:none} }
@media (max-width:860px){
  .rota-stage{grid-template-columns:1fr;gap:18px}
  .rota-svg{max-width:280px;margin:0 auto}
  .rota-panel{min-height:0}
  .rota-date{font-size:25px}
}

/* ---------------------------------------------------------- language switcher */
.langwrap{position:relative}
.langbtn{min-width:52px;justify-content:center}
.lang-current{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--paper-dim)}
.langbtn:hover .lang-current{color:var(--paper)}
.langbtn[aria-expanded="true"]{border-color:var(--live)}
.langbtn[aria-expanded="true"] .lang-current{color:var(--live)}
.langmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:95;margin:0;padding:4px;list-style:none;
  background:var(--ink-1);border:1px solid var(--line);box-shadow:var(--shadow);min-width:158px;display:none}
.langmenu.open{display:block}
.langmenu li{display:flex;align-items:baseline;gap:10px;padding:8px 11px;cursor:pointer;color:var(--paper-dim)}
.langmenu li:hover{background:rgba(217,169,60,.10);color:var(--paper)}
.langmenu li b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--paper-faint);
  min-width:22px;font-weight:400}
.langmenu li[aria-selected="true"] b{color:var(--live)}
.langmenu li span{font-family:var(--body);font-size:13.5px}
.langmenu li[aria-selected="true"] span{color:var(--paper)}
/* translation state: the page dims for the instant the strings are swapped */
body.i18n-busy .readwrap,body.i18n-busy .portal,body.i18n-busy .hero{opacity:.45;transition:opacity .12s}
.i18n-note{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);line-height:1.6;
  border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.langmenu li:focus-visible{outline:2px solid var(--live);outline-offset:-2px}
.langmenu li[aria-disabled="true"]{opacity:.5;cursor:default}
.langmenu li[aria-disabled="true"]:hover{background:none}
/* a locale that does not carry every string says so before you pick it */
.lm-partial{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-faint);border:1px solid var(--line);padding:1px 4px;margin-left:6px;vertical-align:1px}
/* and any element that fell back to English is marked in place, so the gap in a
   translation is visible in the interface rather than passing for a translation */
[data-i18n-fallback]{position:relative}
[data-i18n-fallback]::after{content:"EN";font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--paper-faint);border:1px solid var(--line);border-radius:2px;padding:0 3px;
  margin-left:6px;vertical-align:2px;white-space:nowrap}
@media (max-width:860px){ .langmenu{right:auto;left:0} }

/* ============================================================
   VISUAL REFINEMENT — the bar on small screens

   Measured at 390px before this change: the bar's contents were
   614px wide. Language, theme, Glossary and Search all sat past the
   right edge with no way to reach them. What follows keeps the two
   controls a reader actually needs in the bar — Contents and Search
   — and moves the rest into a sheet.
   ============================================================ */
.brand-words{display:block}
.kbtn-ico{display:none;flex:none}
.top-more{display:none}
.tm-dots{display:flex;gap:3px;align-items:center}
.tm-dots i{width:3.5px;height:3.5px;border-radius:50%;background:currentColor;display:block}

/* the sheet itself */
.more-scrim{position:fixed;inset:0;z-index:130;background:rgba(4,6,8,.6);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center}
.more-scrim[hidden]{display:none}
.more-sheet{width:100%;max-width:560px;background:var(--ink-1);border-top:1px solid var(--live);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding:4px 18px 26px;box-shadow:var(--shadow);max-height:82vh;overflow-y:auto}
.ms-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink-1)}
.ms-head h2{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);margin:0;font-weight:500}
.ms-close{background:none;border:1px solid var(--line);color:var(--paper-dim);font-size:18px;
  line-height:1;width:36px;height:36px;cursor:pointer}
.ms-close:hover{color:var(--paper);border-color:var(--mech)}
.ms-row{display:grid;grid-template-columns:1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line)}
.ms-row:last-child{border-bottom:0}
.ms-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}
.ms-slot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* inside the sheet the controls are full-width targets, not bar chips */
.ms-slot .lens{display:flex;width:100%}
.ms-slot .lens button{flex:1;min-height:44px;font-size:10.5px}
.ms-slot .langwrap{position:relative;width:100%}
/* inside the sheet the list is already open, so the toggle that opens it is
   noise — the languages themselves are the control */
.ms-slot .langbtn{display:none}
.ms-slot .langmenu{position:static;display:block;border:0;box-shadow:none;background:none;padding:0;min-width:0}
.ms-slot .langmenu li{min-height:44px;border:1px solid var(--line);margin-bottom:6px;padding:0 12px}
.ms-slot .themebtn,.ms-slot .kbtn{width:100%;min-height:44px;justify-content:center}
.ms-slot .kbtn span{display:inline}

@media (max-width:860px){
  .top-more{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:0 12px}
  /* .brand span{display:block} further up outranks a bare class, so these
     selectors are written to match its specificity rather than shouting */
  .brand .brand-sub{display:none}
  .brand{padding:0 12px}
  .brand b{font-size:13px}
  .contents-btn span:last-child{display:none}       /* the glyph carries it */
  .contents-btn{padding:7px 11px;min-height:36px}
  .kbtn-search .kbtn-ico{display:block}
  .kbtn-search kbd{display:none}
  /* .kbtn span{display:none} at this breakpoint would swallow the dots */
  .top-more .tm-dots{display:flex}
  .topmid{gap:8px;padding:0 12px}
}
@media (max-width:480px){
  /* the wordmark stays: with the four secondary controls moved out there is
     room for it, and a bare diamond names nothing */
  .brand b{font-size:12px;letter-spacing:-.005em}
  .brand{padding:0 11px}
  .kbtn-search span{display:none}
  .kbtn-search{min-width:44px;justify-content:center;padding:7px 10px}
}

/* ============================================================
   STATE OF PLAY

   The analytical half of the masthead. Three blocks, all derived:
   where the core instruments stand, what falls due next, and what
   enforcement has actually produced.

   The status band is the important one. It is drawn as a segmented
   bar rather than a single number because the whole brief turns on
   the fact that applicable, in force and awaiting transposition are
   not the same condition. A masthead reading "14 in force" would
   contradict the document underneath it.
   ============================================================ */
.sop{display:grid;gap:18px}
.sop-loading{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin:0}
.sop-block{border-top:1px solid var(--line);padding-top:13px}
.sop-block:first-child{border-top:0;padding-top:0}
.sop-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--paper-faint);margin:0 0 11px;font-weight:500}
.sop-foot{font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--paper-faint);margin:10px 0 0}
.sop-unknown{color:var(--crit)}
.sop-more{display:inline-flex;align-items:center;min-height:24px;margin-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mech);text-decoration:none;border-bottom:1px solid transparent}
.sop-more:hover{color:var(--live);border-bottom-color:var(--live)}
.sop-empty{font-family:var(--mono);font-size:11.5px;color:var(--paper-faint);margin:0}

/* --- the status bar --- */
.sop-bar{display:flex;height:9px;gap:2px;margin-bottom:13px}
.sop-seg{display:block;border-radius:1px;background:var(--st-c,var(--ink-3))}
.sop-seg[data-s="applicable"]{--st-c:var(--mech)}
.sop-seg[data-s="partly-applicable"]{--st-c:#5E7FB0}
.sop-seg[data-s="in-force"]{--st-c:var(--live)}
.sop-seg[data-s="transposition-pending"],.sop-seg[data-s="transposition-overdue"]{--st-c:#8A7A5C}
.sop-seg[data-s="stalled"],.sop-seg[data-s="proposal"]{--st-c:var(--crit)}

.sop-bands{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sop-band{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:baseline}
.sb-n{font-family:var(--display);font-size:21px;line-height:1;color:var(--paper);text-align:right;
  font-variant-numeric:tabular-nums}
.sop-band[data-s="applicable"] .sb-n{color:var(--mech)}
.sop-band[data-s="in-force"] .sb-n{color:var(--live)}
.sop-band[data-s="stalled"] .sb-n,.sop-band[data-s="proposal"] .sb-n{color:var(--crit)}
.sb-body{min-width:0}
.sb-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper);display:inline-block;margin-right:9px}
.sb-which{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:1px}
.sb-which a{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--paper-dim);
  text-decoration:none;border:1px solid var(--ink-3);padding:1px 5px;min-height:22px;
  display:inline-flex;align-items:center}
.sb-which a:hover{color:var(--live);border-color:var(--live)}
.sb-gloss{display:block;font-family:var(--body);font-size:12.5px;line-height:1.45;
  color:var(--paper-faint);margin-top:3px}

/* --- what falls due --- */
.sop-due-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:due}
.sop-due-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px dotted var(--ink-3)}
.sop-due-row:last-child{border-bottom:0;padding-bottom:0}
.sd-when{display:grid;gap:2px;min-width:8.5em}
.sd-when b{font-family:var(--mono);font-size:12px;color:var(--paper);letter-spacing:.02em;font-weight:500}
.sd-away{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--live)}
.sd-away.approx{color:var(--paper-faint)}
.sd-what{min-width:0}
.sd-inst{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mech);margin-right:8px}
.sd-type{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-faint);border:1px solid var(--ink-3);padding:1px 5px;white-space:nowrap}
.sd-obl{display:block;font-family:var(--body);font-size:13px;line-height:1.45;color:var(--paper-dim);margin-top:4px}

/* --- announced against collected --- */
.sop-money{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.sm-cell{display:grid;gap:2px;align-content:start;min-width:0}
.sm-cell b{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--paper);
  font-weight:500;letter-spacing:-.01em}
.sm-cell span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}
.sm-cell em{font-family:var(--body);font-style:normal;font-size:12px;line-height:1.4;color:var(--paper-faint);margin-top:3px}
.sm-gap{align-self:center;font-family:var(--mono);font-size:15px;color:var(--ink-3);padding:0 2px}
.sm-unknown b{color:var(--crit);font-family:var(--mono);font-size:clamp(17px,1.9vw,22px);letter-spacing:.02em}

/* --- the tree, now labelled as what it is --- */
.pf-head{text-align:center;max-width:34ch}
.pf-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-faint);display:block;margin-bottom:7px}
.portal-figure .portal-caption{margin:0;min-height:3.2em;font-size:13px}

@media (max-width:1080px){
  .portal-inner{grid-template-columns:1fr;grid-template-areas:"head" "sop" "tree";gap:24px;text-align:left}
  .portal-head{text-align:left}
  .portal h1{margin-left:0;margin-right:0;max-width:none}
  .portal-stand{margin-left:0;margin-right:0}
  .portal-cta{justify-content:flex-start}
  .portal-figure{align-self:start}
  .portal-tree{height:min(46vh,380px)}
}
@media (max-width:640px){
  .portal{padding:26px 18px 34px}
  .sop-band{grid-template-columns:26px 1fr;gap:9px}
  .sb-n{font-size:19px}
  .sop-due-row{grid-template-columns:1fr;gap:3px}
  .sd-when{display:flex;gap:9px;align-items:baseline;min-width:0}
  .sop-money{gap:10px}
  .sm-gap{display:none}
  .sm-cell{flex:1 1 100%}
  .portal-tree{height:min(40vh,320px)}
  .portal-cta .btn{flex:1 1 auto;text-align:center}
}

/* the dateline and the verification date are different facts, set apart */
.portal-head .hero-kicker{display:block}
.sop-verified{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint)}
.sop-verified::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--ink-3);vertical-align:3px;margin-right:7px}
/* the hint sits under the masthead, centred, rather than floating in the margin */
.portal-scrollhint{grid-column:1/-1;justify-self:center;margin-top:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-faint);opacity:.7}

/* The tree is the contents control, so it aligns with the state of play it
   sits beside rather than floating in the middle of the column, and it is
   drawn firmly enough to read as something you can press. It was pitched at
   hairline weight when it was a frontispiece filling the screen; at
   navigation scale that reads as a watermark. */
.portal-figure{align-self:start;position:sticky;top:76px}
.portal-tree .pt-path{stroke:var(--ink-3);stroke-width:1.4}
.portal-tree .pt-circle{fill:var(--ink-1);stroke:var(--paper-faint);stroke-width:1.4}
.portal-tree .pt-roman{fill:var(--paper-dim);font-size:12px}
.portal-tree .pt-node:hover .pt-circle,
.portal-tree .pt-node:focus-visible .pt-circle{fill:var(--live-dim);stroke:var(--live);stroke-width:2}
.portal-tree .pt-node.visited .pt-circle{stroke:var(--mech)}
.portal-tree .pt-node.visited .pt-roman{fill:var(--mech)}
@media (max-width:1080px){ .portal-figure{position:static} }

/* On a phone the tree drawn at 380px tall is a screen and a half of symbol
   before any regulation, and its 30px targets are not honestly tappable.
   The header already carries a Contents control that opens the same tree at
   full size, so below 640px the figure gives up its drawing and keeps its
   sentence — the identity survives, the screen is not spent on it. */
@media (max-width:640px){
  .portal-tree{display:none}
  .portal-figure{gap:0;border-top:1px solid var(--line);padding-top:16px}
  .pf-head{max-width:none;text-align:left}
  .portal-figure .portal-caption{min-height:0}
  .pf-open{display:inline-flex}
}
.pf-open{display:none;align-items:center;min-height:32px;margin-top:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mech);background:none;border:1px solid var(--line);padding:0 14px;cursor:pointer}
.pf-open:hover{color:var(--live);border-color:var(--live)}

/* ============================================================
   THE ROTA — the dial as a timeline

   The dots are placed by date, so the ring now shows the shape of
   the calendar: the September 2026 pair almost touching, the long
   quiet arc through 2027. The weights below are set so that shape
   is actually visible; at the previous hairline values the whole
   figure read as a watermark.
   ============================================================ */
.rota-rim{fill:none;stroke:var(--ink-3);stroke-width:2}
/* the inner dashed ring said nothing; the track and the rim are the figure */
.rota-rim-inner{display:none}
.rota-index path{fill:var(--live)}
.rota-index line{stroke:var(--live);stroke-width:2}
.rota-disc{transform-origin:260px 260px}
/* the overshoot is the point: the dial has mass and settles */
.rota-disc{transition:transform .82s cubic-bezier(.16,1.02,.24,1)}

.rota-track{stroke:var(--ink-3);stroke-width:3;stroke-linecap:round}
.rota-arc{stroke:var(--live);stroke-width:3.4;stroke-linecap:round}
/* the period the dial covers, stated once and off the turning rim */
.rota-span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-faint);margin:8px 0 0;text-align:center}
.rota-span[hidden]{display:none}

.rota-tick{stroke:var(--paper-faint);stroke-width:1.6;transition:stroke .3s,stroke-width .3s}
.rota-tick.on{stroke:var(--live);stroke-width:3.4}

.rota-dot{fill:var(--ink-1);stroke:var(--paper-faint);stroke-width:1.8;cursor:pointer;
  transition:fill .3s,stroke .3s,r .42s cubic-bezier(.2,1.4,.3,1)}
.rota-dot.past{stroke:var(--ink-3);fill:transparent}
.rota-dot:hover{stroke:var(--paper);r:11}
.rota-dot.on{fill:var(--live);stroke:var(--live);r:13}
.rota-dot:focus{outline:none}
.rota-dot:focus-visible{stroke:var(--live);stroke-width:3}
/* colour by event type, so the ring reads before you turn it */
.rota-dot[data-e="application"]{stroke:var(--mech)}
.rota-dot[data-e="reporting-deadline"],
.rota-dot[data-e="compliance-deadline"]{stroke:var(--crit)}
.rota-dot.on[data-e]{stroke:var(--live)}

.rota-ring{stroke:var(--live);stroke-width:2;opacity:0}
.rota-ring.pulse{animation:rotaPulse .95s cubic-bezier(.16,.9,.3,1) 1}
@keyframes rotaPulse{
  0%{opacity:1;r:9;stroke-width:4}
  55%{opacity:.55}
  100%{opacity:0;r:48;stroke-width:.6}
}
/* the disc takes longer when it is going the long way round */
.rota-disc{transition:transform .82s cubic-bezier(.16,1.02,.24,1)}
.rota-disc.long{transition:transform 1.15s cubic-bezier(.3,.86,.2,1)}

/* the panel changes under a short wipe rather than snapping */
.rota-panel.wipe .rota-date,
.rota-panel.wipe .rota-ins,
.rota-panel.wipe .rota-text,
.rota-panel.wipe .rota-meta{animation:rotaWipe .46s cubic-bezier(.2,.7,.3,1) 1}
.rota-panel.wipe .rota-ins{animation-delay:.03s}
.rota-panel.wipe .rota-meta{animation-delay:.06s}
.rota-panel.wipe .rota-text{animation-delay:.09s}
@keyframes rotaWipe{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}

.rota-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:9px}
.rota-away{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--live);border:1px solid var(--live);padding:2px 7px;min-height:22px;
  display:inline-flex;align-items:center}
.rota-away.past{color:var(--paper-faint);border-color:var(--ink-3)}
.rota-away[hidden]{display:none}
.rota-type{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .rota-disc{transition:none}
  .rota-ring.pulse{animation:none}
  .rota-panel.wipe *{animation:none}
  .rota-arc{transition:none}
  .rota-dot,.rota-tick{transition:none}
}

/* ============================================================
   THE DSA PYRAMID — cumulative, and shown to be

   The bands are pressable. Selecting one marks what it adds and
   marks every band below it as inherited, which is the sentence
   the figure sits under. The build runs bottom-up so the stacking
   is something you watch rather than something you are told.
   ============================================================ */
.pyr-host{display:grid;gap:14px}
.pyramid{width:100%;height:auto;display:block}
.pyr-g{cursor:pointer}
.pyr-g:focus{outline:none}
.pyr-band{stroke:var(--line);stroke-width:1;fill:var(--ink-2);
  transition:fill .3s,stroke .3s,opacity .3s}
.pyr-g[data-tier="hosting"] .pyr-band{fill:var(--ink-3)}
.pyr-g[data-tier="platform"] .pyr-band{fill:var(--mech-dim)}
.pyr-g[data-tier="vlop"] .pyr-band{fill:var(--crit-dim)}
.pyr-g:hover .pyr-band{stroke:var(--live);stroke-width:1.6}
.pyr-g:focus-visible .pyr-band{stroke:var(--live);stroke-width:2.4}
.pyr-g.sel .pyr-band{stroke:var(--live);stroke-width:2.6}
/* everything below the selection is what it also owes */
.pyr-g.inherited .pyr-band{stroke:var(--live);stroke-width:1.6;stroke-dasharray:5 4}
.pyr-g.dim{opacity:.34}
.pyr-band-label{font-family:var(--mono);font-size:12.5px;fill:var(--paper);letter-spacing:.01em;pointer-events:none}
.pyr-band-sub{font-family:var(--body);font-size:11px;fill:var(--paper-dim);pointer-events:none}
.pyr-g[data-tier="intermediary"] .pyr-band-label,
.pyr-g[data-tier="hosting"] .pyr-band-label{fill:var(--paper)}
.pyr-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--paper-faint)}

/* the readout */
.pyr-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--paper-faint);
  margin:0;padding:11px 0 0;border-top:1px solid var(--line)}
.pyr-readout{border-top:1px solid var(--live);padding-top:12px;display:grid;gap:9px}
.pyr-ro-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--live);margin:0;font-weight:500}
.pyr-who{font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--paper-dim);margin:0}
.pyr-ro-row{display:grid;grid-template-columns:74px 1fr;gap:11px;align-items:baseline}
.pyr-ro-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint)}
.pyr-ro-v{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.pyr-prov{font-family:var(--mono);font-size:10.5px;color:var(--mech);text-decoration:none;
  border:1px solid var(--ink-3);padding:2px 7px;min-height:24px;display:inline-flex;align-items:center}
.pyr-prov:hover{color:var(--live);border-color:var(--live)}
.pyr-inh{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--paper-faint);
  border:1px dashed var(--ink-3);padding:2px 7px;min-height:24px;display:inline-flex;align-items:center}
.pyr-count{font-family:var(--body);font-size:12px;color:var(--paper-faint);font-style:italic}
.pyr-none{font-family:var(--body);font-size:12.5px;line-height:1.45;color:var(--paper-faint)}

/* build: bottom band first, then up */
.pyr-host.armed .pyr-g{opacity:0;transform:translateY(16px)}
.pyr-host.armed.built .pyr-g{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.18,.9,.26,1)}
.pyr-host.armed.built .pyr-g[data-i="0"]{transition-delay:0ms}
.pyr-host.armed.built .pyr-g[data-i="1"]{transition-delay:130ms}
.pyr-host.armed.built .pyr-g[data-i="2"]{transition-delay:260ms}
.pyr-host.armed.built .pyr-g[data-i="3"]{transition-delay:390ms}
@media (prefers-reduced-motion:reduce){
  .pyr-host.armed .pyr-g{opacity:1;transform:none}
  .pyr-band,.pyr-g{transition:none}
}
@media (max-width:640px){
  .pyr-ro-row{grid-template-columns:1fr;gap:4px}
  .pyr-band-label{font-size:11px}
  .pyr-band-sub{font-size:9.5px}
}

/* The primary button in day mode put near-black text on the dark day gold:
   3.59:1. Gold is a background here, not a text colour, so the text goes
   light instead of the background going pale. */
[data-theme="light"] .btn.primary{color:#FFF8E6}
[data-theme="light"] .btn.primary:hover{background:#7A5D11;border-color:#7A5D11;color:#FFF8E6}
/* --live is a display colour; at 9 to 21px it needs --live-text, which is
   the same hue taken down far enough to clear AA on all three day surfaces */
.sb-n,.sd-away,.rota-away{color:var(--live-text)}
.rota-away{border-color:var(--live-text)}
.sop-band[data-s="in-force"] .sb-n{color:var(--live-text)}

/* ============================================================
   FRONTISPIECE — type, rules and the plate
   ============================================================ */

/* The title carries the page. One large voice, then a long drop to the
   reading sizes, instead of four middling ones a few pixels apart. */
.portal h1{
  font-family:var(--display);font-weight:600;font-variation-settings:'opsz' 96;
  font-size:clamp(34px,5.3vw,74px);line-height:.97;letter-spacing:-.022em;
  color:var(--paper);margin:0 auto;max-width:18ch;text-wrap:balance}
.portal h1 em{font-style:italic;font-weight:400;color:var(--live)}
.portal-stand{font-family:var(--body);font-size:clamp(14.5px,1.05vw,16px);line-height:1.5;
  color:var(--paper-dim);margin:16px auto 0;max-width:62ch;text-wrap:pretty}

/* The double rule is the gazette's own punctuation: a heavy line and a
   hairline, close together. It is used at exactly two weights across the
   site so it reads as a system rather than as decoration. */
.portal-masthead::after{content:"";display:block;height:0;margin:18px auto 0;max-width:100%;
  border-top:2px solid var(--paper-faint);border-bottom:1px solid var(--line);
  padding-bottom:4px}

/* one dense line of fact, set in the gazette's own small type */
.sop-ticker{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:2px 18px;margin:12px auto 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--paper-dim);min-height:1.4em}
.tk-item{white-space:nowrap}
.tk-item b{font-weight:500;color:var(--paper);font-size:13px;font-variant-numeric:tabular-nums}
.tk-item[data-s="applicable"] b{color:var(--mech)}
.tk-item[data-s="in-force"] b{color:var(--live-text)}
.tk-item[data-s="stalled"] b,.tk-item[data-s="proposal"] b{color:var(--crit)}
.tk-sep{width:1px;align-self:stretch;background:var(--ink-3);margin:0 2px}
.tk-next{white-space:nowrap;color:var(--paper-dim)}
.tk-next .tk-k{text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:var(--paper-faint)}
.tk-next b{font-weight:500;color:var(--paper)}
.tk-next i{font-style:normal;color:var(--live-text)}

/* ---- the plate ---- */
.portal-figure{margin-top:20px}
.portal-tree{height:min(56vh,600px);width:auto;max-width:100%;overflow:visible}
/* engraved, not drawn: hairline strokes, open circles, no fills */
.portal-tree .pt-path{stroke:var(--ink-3);stroke-width:1.1}
.portal-tree .pt-path.lit{stroke:var(--live);stroke-width:1.6}
.portal-tree .pt-circle{fill:none;stroke:var(--paper-faint);stroke-width:1.1}
/* the plate renders at roughly 0.76 of its viewBox, so the numerals are set
   in SVG units large enough to survive that reduction */
.portal-tree .pt-roman{fill:var(--paper-dim);font-size:16px;letter-spacing:.04em}
.portal-tree .pt-node:hover .pt-circle,
.portal-tree .pt-node:focus-visible .pt-circle{fill:var(--live-dim);stroke:var(--live);stroke-width:1.6}
.portal-tree .pt-node:hover .pt-roman,
.portal-tree .pt-node:focus-visible .pt-roman{fill:var(--live)}
.portal-tree .pt-node.visited .pt-circle{stroke:var(--mech);stroke-width:1.3}
.portal-tree .pt-node.visited .pt-roman{fill:var(--mech)}

.pf-head{text-align:center;max-width:46ch;margin:0 auto}
.pf-label{display:none}
.portal-figure .portal-caption{margin:0;min-height:3em;font-size:13.5px;font-style:italic;
  color:var(--paper-faint);font-family:var(--body)}
.portal-caption .pc-default{font-style:italic}

.portal-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin:28px 0 0}
.portal-scrollhint{margin:0 0 0 6px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ============================================================
   STATE OF PLAY — three columns, ruled like a gazette

   Three blocks that used to be three identical stacks of
   uppercase-label-then-content. They now sit side by side, divided
   by rules rather than boxed, and each is set differently: the
   ledger in figures, the calendar as a dated list with hanging
   numerals, and enforcement as a sentence with its figures raised
   out of the prose.
   ============================================================ */
.sop{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;
  margin-top:44px;border-top:2px solid var(--paper-faint)}
.sop-loading{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--paper-faint);
  margin:0;padding:14px 0}
.sop-block{border-top:0;border-left:1px solid var(--line);padding:20px 26px 6px;min-width:0}
.sop-block:first-of-type{border-left:0;padding-left:0}
.sop-block:last-of-type{padding-right:0}

.sop-h{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-faint);margin:0 0 14px;font-weight:400}
/* the middle column takes a rubric instead of a third identical label */
.sop-h-rubric{font-family:var(--display);font-size:15px;font-style:italic;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--paper-dim)}

/* --- the ledger --- */
.sop-bar{display:flex;height:5px;gap:1px;margin-bottom:16px}
.sop-bands{gap:13px}
.sop-band{grid-template-columns:26px 1fr;gap:10px}
.sb-n{font-family:var(--display);font-size:24px;font-weight:400;line-height:.9}
.sb-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em}
.sb-gloss{font-style:italic;font-family:var(--body);font-size:12.5px;color:var(--paper-faint)}
.sb-which{gap:4px}
/* 20px was below the 24px target minimum; the refinement pass shrank these
   chips and took them under it */
.sb-which a{font-size:9px;padding:1px 5px;min-height:24px}

/* --- what falls due: hanging figures, no chrome --- */
.sop-due-row{grid-template-columns:1fr;gap:2px;padding-bottom:11px;
  border-bottom:1px solid var(--line)}
.sd-when{display:flex;gap:9px;align-items:baseline;min-width:0}
.sd-when b{font-family:var(--display);font-size:15px;font-weight:400;letter-spacing:0;color:var(--paper)}
.sd-away{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em}
.sd-inst{font-size:9px;letter-spacing:.14em}
.sd-type{display:none}          /* the row already says what it is in words */
.sd-obl{font-size:12.5px;line-height:1.42;margin-top:2px}

/* --- enforcement as a claim --- */
.enf-claim{font-family:var(--body);font-size:14.5px;line-height:1.55;color:var(--paper-dim);margin:0}
.ec-fig{font-family:var(--display);font-size:23px;font-weight:500;color:var(--paper);
  letter-spacing:-.012em;line-height:1}
.ec-fig.unknown{color:var(--crit);font-family:var(--mono);font-size:17px;letter-spacing:.02em}
.ec-word{font-style:italic;color:var(--paper)}
.enf-gloss{font-family:var(--body);font-style:italic;font-size:12.5px;line-height:1.5;
  color:var(--paper-faint);margin:12px 0 0}

@media (max-width:1080px){
  .sop{grid-template-columns:1fr 1fr}
  .sop-block:nth-of-type(3){grid-column:1/-1;border-left:0;padding-left:0;
    border-top:1px solid var(--line);margin-top:6px;padding-top:18px}
  .portal-tree{height:min(52vh,520px)}
}
@media (max-width:760px){
  .portal{padding:22px 18px 34px}
  .sop{grid-template-columns:1fr;margin-top:30px}
  .sop-block{border-left:0;padding:18px 0 4px;border-top:1px solid var(--line)}
  .sop-block:first-of-type{border-top:0;padding-top:14px}
  .sop-block:nth-of-type(3){margin-top:0}
  .portal-cta{justify-content:flex-start}
  .portal-masthead{text-align:left}
  .portal h1{margin-left:0;max-width:none}
  .portal-stand{margin-left:0}
  .sop-ticker{justify-content:flex-start;gap:2px 14px}
  .pf-head{text-align:left;margin:0}
}

/* ============================================================
   THE THRESHOLD — the transition between the public record and the
   statement that a private control plane exists.

   Drawn in the site's own ink, on the site's own ground, with the
   site's own hairline. It is the palette's aesthetic one layer
   quieter: fine strokes, no fill, no glow, one slow rotation. The
   letters are set in the body serif at metadata size and the wheel
   never exceeds a third of the viewport, because the panel beside
   it is the part that carries the meaning.

   Every duration is a token. The whole animation is the presence of
   .thr-run, so removing the element mid-way — which Escape and a
   click both do — cannot leave anything half-applied, and
   .thr-still is the finished state with no motion at all for a
   reader who asked for none.
   ============================================================ */

.thr-scrim{
  position:fixed;inset:0;z-index:var(--z-dialog);
  display:flex;align-items:center;justify-content:center;gap:var(--s-7);
  flex-wrap:wrap;padding:var(--s-6) var(--s-5);
  background:color-mix(in srgb, var(--ink-0) 92%, transparent);
  backdrop-filter:blur(6px);
}

.thr-figure{flex:0 0 auto;width:min(38vh,300px)}
.thr-wheel{display:block;width:100%;height:auto;overflow:visible}

.thr-ring,.thr-spoke{fill:none;stroke:var(--line);stroke-width:.75;vector-effect:non-scaling-stroke}
.thr-ring.thr-b1{stroke:var(--mech)}
.thr-gate{fill:none;stroke:var(--live);stroke-width:1;vector-effect:non-scaling-stroke}
.thr-letter{
  font-family:var(--body);font-size:11px;
  fill:var(--paper-faint);
  /* Hebrew is right-to-left and these are single glyphs on a radial
     grid, so the run direction is stated rather than inherited from
     a page that is left-to-right. */
  direction:rtl;
}
.thr-letter.thr-b1{fill:var(--mech);font-size:13px}
.thr-letter.thr-b2{fill:var(--paper-dim)}

/* The still state: everything visible, nothing moving. This is also
   what an interrupted transition leaves behind, and what a browser
   with no animation support shows from the first frame. */
.thr-scrim .thr-wheel,.thr-scrim .thr-panel{opacity:1}

.thr-run .thr-wheel{animation:thr-in var(--dur-3) var(--ease) both}
.thr-run .thr-wheel>g{animation:thr-turn 24s linear infinite}
.thr-run .thr-ring{stroke-dasharray:1000;stroke-dashoffset:1000;animation:thr-draw 1100ms var(--ease) forwards}
.thr-run .thr-ring.thr-b2{animation-delay:160ms}
.thr-run .thr-ring.thr-b1{animation-delay:320ms}
.thr-run .thr-letter,.thr-run .thr-spoke{opacity:0;animation:thr-fade 700ms var(--ease) 620ms forwards}
.thr-run .thr-gate{opacity:0;animation:thr-fade 900ms var(--ease) 1000ms forwards}
.thr-run .thr-panel{animation:thr-rise 520ms var(--ease) 900ms both}

@keyframes thr-draw{to{stroke-dashoffset:0}}
@keyframes thr-fade{to{opacity:1}}
@keyframes thr-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes thr-turn{to{transform:rotate(360deg)}}
@keyframes thr-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.thr-panel{flex:1 1 340px;max-width:46ch}
.thr-kicker{
  font-family:var(--mono);font-size:var(--t-micro);line-height:var(--lh-micro);
  letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--live);margin:0 0 var(--s-3)
}
.thr-title{
  font-family:var(--display);font-size:var(--t-h2);line-height:var(--lh-h2);
  font-weight:400;color:var(--paper);margin:0 0 var(--s-4)
}
.thr-body{
  font-family:var(--body);font-size:var(--t-body-sm);line-height:var(--lh-body-sm);
  color:var(--paper-dim);margin:0 0 var(--s-4)
}
.thr-body.thr-quiet{color:var(--paper-faint);font-size:var(--t-support);line-height:var(--lh-support)}
.thr-actions{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin-top:var(--s-5)}
.thr-go,.thr-back{
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  letter-spacing:var(--tr-meta);text-transform:uppercase;
  padding:var(--s-2) var(--s-4);min-height:var(--hit);
  border:var(--border-std);background:none;cursor:pointer
}
.thr-go{color:var(--live);border-color:var(--live);text-decoration:none}
.thr-back{color:var(--paper-faint)}
.thr-go:hover{background:var(--live-dim)}
.thr-back:hover{color:var(--paper-dim)}

@media (prefers-reduced-motion:reduce){
  .thr-run .thr-wheel,.thr-run .thr-wheel>g,.thr-run .thr-ring,
  .thr-run .thr-letter,.thr-run .thr-spoke,.thr-run .thr-gate,.thr-run .thr-panel{
    animation:none;opacity:1;stroke-dashoffset:0;transform:none
  }
}

@media (max-width:640px){
  .thr-scrim{flex-direction:column;gap:var(--s-5);align-content:center}
  .thr-figure{width:min(30vh,210px)}
}