/* ============================================================
   SYNTHETIC OUTLAW · V2 DESIGN SYSTEM
   Ported from the Claude Design "Next Leap" concept templates.
   Dark editorial: Newsreader serif display, IBM Plex Mono labels,
   burnt-orange accent on near-black.
   ============================================================ */

:root{
  /* Paper base. The instruments invert to dark via .dark, so the contrast
     between page and instrument is the signature rather than a wash of black. */
  --bg:#ECE7DB;
  --bg-alt:#E4DECF;
  --bg-deep:#DCD5C4;
  --panel:#E7E1D2;
  --panel-2:#E2DBCA;
  --line:#CDC4B0;
  --line-soft:#DBD3C1;
  --edge:#B5AA92;
  --ink:#14110B;
  --ink-2:#332F26;
  --ink-3:#453F34;
  --mut:#4E4839;
  /* One vivid vermilion accent. Large surfaces use the bright cut; small type
     uses a deeper red that remains crisp and accessible on the paper ground. */
  --acc:#F0442B;
  --acc-ink:#B5251A;
  --btn-bg:#B5251A;
  --btn-ink:#FFFFFF;
  --action-black:#070707;
  --action-orange:#FF4428;
  --amber:#8A5A10;
  --yellow:#7C6C12;
  --slate:#42556E;
  --green:#2E6647;
  /* The inverted band: on a paper site the object and instrument moments
     are the dark ones. */
  --inv:#0A0D12;
  --inv-ink:#EAE6DC;
  --inv-mut:#A8B1BD;
  --inv-acc:#F0442B;
  /* Status ink. The dark cuts sit at 1.7-3.1:1 on paper, so the page gets
     darkened equivalents and the instruments keep the originals. */
  --purple:#4A2A6B;
  --sc-crit:#B5251A;
  --sc-high:#7A4A08;
  --sc-mid:#6B5C09;
  --sc-low:#3F5069;
  --sc-ok:#1F5738;
  --st-verified:#B5251A;
  --st-probable:#7A4A08;
  --st-candidate:#6B5C09;
  --st-draft:#3F5069;
  --st-averted:#1F5738;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}

/* Instrument scope: the Observatory, the live reading, the book object. */
.dark{
  color:#ECE7DB;
  /* The instrument ground is the paper's ink and its type is the paper.
     Same two colours, inverted, so the dark half and the light half are
     demonstrably one publication rather than two palettes side by side. */
  --bg:#14110B;
  --bg-alt:#1B1710;
  --bg-deep:#0E0C07;
  --panel:#1B1710;
  --panel-2:#201B13;
  --line:#2E2820;
  --line-soft:#221E17;
  --edge:#453D2E;
  --ink:#ECE7DB;
  --ink-2:#D6CFBE;
  --ink-3:#B4AB97;
  --mut:#8B8272;
  --acc:#FF4F32;
  --acc-ink:#FF7658;
  --btn-bg:#FF4F32;
  --btn-ink:#14110B;
  --amber:#D98E2B;
  --yellow:#C7B23A;
  --slate:#7A8CA6;
}

html,body{margin:0;padding:0;background:var(--bg);}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--acc-ink);}
::selection{background:var(--acc);color:#FFFFFF;}
button{font-family:inherit;}

/* Visible keyboard focus everywhere. Several controls previously set
   outline:none with no replacement, leaving the signup form unusable
   by keyboard. */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--btn-bg);color:var(--btn-ink);font-family:var(--mono);font-size:12px;padding:10px 16px;}
.skip:focus{left:8px;top:8px;}

@keyframes so-tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes so-pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes so-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.wrap{max-width:1360px;margin:0 auto;padding:0 40px;}
.mono{font-family:var(--mono);}
.serif{font-family:var(--serif);}

/* ---- scroll-reveal ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001s !important;}
}

/* ---- masthead ---- */
.so-mast{position:sticky;top:0;z-index:50;background:rgba(236,231,219,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.dark .so-mast{background:rgba(20,17,11,.92);}
.so-mast-in{position:relative;max-width:1360px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;gap:20px;}
.so-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.so-logo-box{display:inline-flex;align-items:center;justify-content:center;width:38px;height:28px;border:1px solid var(--acc);color:var(--acc-ink);font-family:var(--mono);font-size:11px;font-weight:600;}
.so-logo-word{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.22em;white-space:nowrap;}
.so-nav{display:flex;gap:22px;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.so-nav::-webkit-scrollbar{display:none;}
.so-nav a{color:var(--ink-2);white-space:nowrap;padding-bottom:2px;}
.so-nav a:hover{color:var(--acc-ink);}
.so-nav a.on{color:var(--acc-ink);border-bottom:1px solid var(--acc);}
.so-nav-live{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(240,68,43,.12);animation:so-pulse 1.6s ease-in-out infinite;vertical-align:1px;}
.so-mast-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.so-pill-ghost{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-3);border:1px solid var(--line);padding:5px 10px;white-space:nowrap;}
.so-btn-updates{font-family:var(--mono);font-size:11px;letter-spacing:.12em;background:var(--action-black);color:#FFFFFF;padding:9px 18px;font-weight:600;white-space:nowrap;border:1px solid #262626;border-radius:999px;box-shadow:0 5px 16px rgba(0,0,0,.22);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.so-btn-updates:hover,.so-btn-updates:focus-visible{background:var(--action-orange);border-color:var(--action-orange);color:#FFFFFF;box-shadow:0 0 0 1px rgba(255,79,50,.72),0 0 24px rgba(255,79,50,.52);}
.so-menu-toggle{display:none;width:38px;height:38px;padding:0;border:1px solid var(--edge);border-radius:4px;background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;}
.so-menu-toggle span{font-family:var(--mono);font-size:25px;line-height:1;transform:translateY(-1px);}
.so-menu-toggle:hover,.so-menu-toggle:focus-visible{border-color:var(--acc);color:var(--acc-ink);background:rgba(240,68,43,.06);}

/* ---- briefing signup --------------------------------------------------
   v2.js injects this once, so every static V2 masthead uses the same form,
   subscriber fields, and endpoint as the live Observatory. */
.so-signup-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,9,8,.72);backdrop-filter:blur(5px);box-sizing:border-box;}
.so-signup-dialog{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;box-sizing:border-box;background:#E5E4E2;border:1px solid #B9B6AE;border-radius:8px;padding:40px;color:#191816;box-shadow:0 26px 80px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.88) inset;}
.so-signup-close{position:absolute;top:18px;right:20px;width:36px;height:36px;padding:0;border:0;background:transparent;color:#66635D;font-size:26px;line-height:1;cursor:pointer;}
.so-signup-close:hover{color:#E5502E;}
.so-signup-kicker{margin:0 42px 20px 0;color:#C83F22;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;}
.so-signup-copy{max-width:560px;margin:0 0 28px;color:#4D4B47;font-family:var(--mono);font-size:16px;line-height:2;}
.so-signup-form{display:grid;gap:18px;}
.so-signup-form label{display:block;}
.so-signup-form label>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.so-signup-form input{display:block;width:100%;height:66px;box-sizing:border-box;border:1px solid #B9B6AE;border-radius:6px;background:#F5F4F0;color:#191816;padding:0 22px;font-family:var(--mono);font-size:16px;outline:none;box-shadow:0 1px 0 rgba(255,255,255,.9) inset;}
.so-signup-form input::placeholder{color:#706D67;opacity:1;}
.so-signup-form input:focus{border-color:#E5502E;box-shadow:0 0 0 2px rgba(229,80,46,.18),0 1px 0 rgba(255,255,255,.9) inset;}
.so-signup-form .so-signup-hp{display:none;}
.so-signup-submit{width:100%;min-height:70px;border:0;border-radius:999px;background:#EF522D;color:#0A0A0F;padding:17px 24px;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.13em;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .15s ease;}
.so-signup-submit:hover,.so-signup-submit:focus-visible{background:#FF6846;box-shadow:0 0 0 1px rgba(255,104,70,.62),0 0 26px rgba(255,79,50,.34);transform:translateY(-1px);}
.so-signup-submit:disabled{cursor:wait;opacity:.65;transform:none;}
.so-signup-msg{display:none;font-family:var(--mono);font-size:12px;line-height:1.6;}
.so-signup-msg.is-error{display:block;color:#B22F1C;}
.so-signup-success{border-left:3px solid #3F8A57;padding:18px 20px;background:#E8F1E9;color:#245A35;font-family:var(--mono);font-size:13px;line-height:1.7;letter-spacing:.06em;}

@media (max-width:640px){
  .so-signup-overlay{align-items:flex-start;padding:12px;overflow-y:auto;}
  .so-signup-dialog{max-height:none;margin:auto 0;padding:28px 20px 22px;}
  .so-signup-close{top:10px;right:10px;}
  .so-signup-kicker{font-size:11px;margin-bottom:15px;}
  .so-signup-copy{font-size:13px;line-height:1.75;margin-bottom:20px;}
  .so-signup-form{gap:12px;}
  .so-signup-form input{height:56px;padding:0 16px;font-size:14px;}
  .so-signup-submit{min-height:58px;font-size:12px;}
}

/* ---- footer ---- */
.so-foot{background:var(--bg-deep);}
.so-foot-support{background:var(--bg-deep);border-top:1px solid var(--line);}
.so-foot-support-in{max-width:1360px;margin:0 auto;padding:26px 40px 18px;display:grid;grid-template-columns:auto minmax(0,380px);align-items:center;justify-content:start;gap:26px;}
.so-foot-support-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--mut);white-space:nowrap;}
.so-foot-support-mark{display:block;width:100%;max-width:380px;}
.so-foot-support-logo{display:block;width:100%;height:auto;filter:contrast(1.08);}
.so-foot-in{max-width:1360px;margin:0 auto;padding:18px 40px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mut);}
.so-foot-links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;}
.so-foot-links a{color:var(--mut);}
.so-foot-links a:hover{color:var(--ink);}
@media(max-width:600px){.so-foot-support-in{padding:22px 20px 14px;grid-template-columns:1fr;gap:12px}.so-foot-support-mark{width:100%;max-width:340px}.so-foot-in{padding:16px 20px 24px}}

/* ---- latest observatory strip ---- */
.so-ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-deep);}
.so-latest-in{max-width:1360px;margin:0 auto;padding:24px 40px;}
.so-latest-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--acc-ink);}
.so-latest-head a{color:var(--ink-3);font-size:9px;}
.so-latest-head a:hover{color:var(--acc-ink);}
.so-latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.so-latest-event{display:flex;flex-direction:column;min-height:128px;padding:17px 18px;background:var(--bg-alt);color:var(--ink);}
.so-latest-event:hover{background:var(--panel);box-shadow:inset 0 3px 0 var(--acc);}
.so-latest-meta{font-family:var(--mono);font-size:9px;line-height:1.45;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;}
.so-latest-title{margin-top:10px;font-family:var(--serif);font-size:18px;line-height:1.32;color:var(--ink);}
.so-latest-score{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--acc-ink);}
@media(max-width:760px){.so-latest-in{padding:20px}.so-latest-grid{grid-template-columns:1fr}.so-latest-event{min-height:0}.so-latest-head{align-items:flex-start;flex-direction:column}}

/* ---- shared building blocks ---- */
.sec{border-bottom:1px solid var(--line);}
.paper-white{
  --bg:#FFFFFF;
  --bg-alt:#F7F6F2;
  --bg-deep:#F0EEE8;
  --panel:#FAF9F6;
  --panel-2:#F5F3ED;
  --line:#D8D3C8;
  --line-soft:#E8E4DC;
  --edge:#BDB5A5;
  background:var(--bg)!important;
}
.dotgrid{background-image:radial-gradient(circle, rgba(20,17,11,.07) 1px, transparent 1px);background-size:28px 28px;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--acc-ink);}
.display{text-wrap:balance;font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.05;margin:0;}
.h2{text-wrap:balance;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,46px);letter-spacing:-.01em;margin:0;}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:44px;flex-wrap:wrap;}

/* ── The routing rule ──────────────────────────────────────────────────────
   A hairline runs the length of the page and, at every section, steps around
   the section number instead of passing through it. The site's whole thesis
   is a system that does not break the rule, it routes around it, so the rule
   on the page behaves the same way. Sharp corners only, one hairline weight,
   no new colour: it reads as drafting, not decoration. */
.sec-routed{position:relative;}
.sec-routed>.wrap{position:relative;}
.route{position:absolute;left:3px;top:-56px;width:30px;height:calc(100% + 112px);
  pointer-events:none;overflow:visible;color:var(--edge);}
.route svg{width:100%;height:100%;}
.route .idx{position:absolute;left:17px;top:52px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--mut);}
/* The gutter only exists on screens wide enough to hold it; below that the
   device would crowd the text it is meant to frame. */
@media (max-width:1279px){ .route{display:none;} }
.h2note{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--mut);}
.lede{font-size:17px;line-height:1.6;color:var(--ink-3);}

.btn{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:600;background:var(--action-black);color:#FFFFFF;padding:14px 24px;border:1px solid #262626;border-radius:999px;cursor:pointer;}
.btn:hover,.btn:focus-visible{background:var(--action-orange);border-color:var(--action-orange);color:#FFFFFF;}
.btn-ghost:focus-visible,.btn:focus-visible{outline-offset:3px;}
.btn-ghost{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;border:1px solid var(--edge);color:var(--ink);padding:14px 24px;background:transparent;border-radius:999px;cursor:pointer;}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc-ink);}

.chip{white-space:nowrap;border:1px solid var(--edge);background:transparent;color:var(--mut);font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:7px 12px;cursor:pointer;}
.chip.on{border-color:var(--acc);color:var(--ink);}
.chip:hover{color:var(--ink);}

.citebtn{border:1px solid var(--edge);background:transparent;color:var(--ink-3);font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.citebtn:hover{border-color:var(--acc);color:var(--acc-ink);}

/* stat strip (bordered mono numbers) */
.statstrip{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);font-family:var(--mono);flex-wrap:wrap;}
.statstrip>div{background:var(--bg);padding:14px 22px;min-width:72px;}
.statstrip .n{font-size:22px;font-weight:600;}
.statstrip .l{font-size:10.5px;letter-spacing:.16em;color:var(--mut);margin-top:3px;}

/* score bar */
.scorebar{height:3px;background:var(--line);}
.scorebar>span{display:block;height:3px;}

/* legend swatches */
.legend{display:flex;gap:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mut);align-items:center;flex-wrap:wrap;}
.legend .sw{display:inline-flex;gap:4px;}
.legend .sw span{width:26px;height:8px;}

/* ---- responsive ---- */

@media (max-width:1365px){
  .wrap,.so-mast-in,.so-foot-in{padding-left:24px;padding-right:24px;}
  .so-logo-word{display:none;}
  .so-mast-in{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:0;row-gap:0;gap:12px;}
  .so-nav{order:3;flex-basis:100%;margin-left:0;gap:20px;}
  .so-nav a{padding-top:11px;padding-bottom:11px;}
  .so-mast-right{margin-left:auto;}
}
/* At narrow tablet width the complete research menu no longer fits without
   hiding its final destinations. Hand off to the explicit menu before that
   happens instead of depending on an invisible horizontal scroll. */
@media (max-width:900px){
  .so-mast-in{height:60px;flex-wrap:nowrap;padding-top:0;padding-bottom:0;gap:10px;}
  .so-mast-right{margin-left:auto;}
  .so-menu-toggle{display:inline-flex;flex:0 0 auto;}
  .so-nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;order:initial;flex-basis:auto;margin:0;padding:10px 24px 18px;box-sizing:border-box;flex-direction:column;gap:0;overflow:visible;background:rgba(236,231,219,.985);border:1px solid var(--line);border-top:0;box-shadow:0 18px 34px rgba(20,17,11,.18);}
  .dark .so-nav{background:rgba(20,17,11,.985);}
  .so-nav.is-open{display:flex;}
  .so-nav a{display:flex;align-items:center;min-height:46px;padding:0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;}
  .so-nav a:last-child{border-bottom:0;}
  .so-nav a.on{padding-left:12px;border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--acc);}
}
@media (max-width:767px){
  .wrap,.so-mast-in,.so-foot-in{padding-left:18px;padding-right:18px;}
  .so-nav{padding-left:18px;padding-right:18px;}

  /* Touch targets. Several links sat at 13-19px tall, under the 24px WCAG 2.2
     minimum, so they were easy to miss and easy to mis-tap. */
  .so-pill-ghost{display:none;}
  .so-foot-links a{padding:8px 0;}
  .citebtn,.chip{min-height:36px;display:inline-flex;align-items:center;}
  .btn,.btn-ghost{padding-top:15px;padding-bottom:15px;}

  /* A wide table inside a scroller gives no sign there is more to the right. */
  .scrollx{position:relative;}
  .scrollx::before{content:'SWIPE FOR ALL COLUMNS \2192';display:block;position:sticky;left:0;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--mut);padding-bottom:9px;}
  /* The signup invitation stays visible beside the mobile menu. */
  .so-mast-right .so-btn-updates{padding:7px 13px;font-size:10px;}
  .h2row{margin-bottom:28px;}
}
@media (max-width:419px){
  .so-mast-in{padding-left:12px;padding-right:12px;gap:8px;}
  .so-mast-right .so-btn-updates{padding:7px 10px;font-size:9px;letter-spacing:.08em;}
}

/* ============================================================
   S/O RECORD SYSTEM
   Three devices, applied from here so every page carries them
   identically. The subject is forensic — scored records, methodology
   versions, citations — so the page should read as a filed document
   and an instrument readout, not a product landing page.
   ============================================================ */

/* ---- 1. Hanging section index ------------------------------------------
   Numerals hang in the gutter beside each section heading, the way a
   filing or a lab notebook numbers its parts. Hangs outside the text
   column where there is room; folds inline where there is not, so it
   never collides with the measure. */
body{counter-reset:so-sec;}
.h2,.sec h2.t{counter-increment:so-sec;position:relative;}
.h2::before,.sec h2.t::before{
  content:counter(so-sec,decimal-leading-zero);
  position:absolute;left:-34px;top:.5em;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--acc-ink);opacity:.72;
}
@media (max-width:1199px){
  .h2::before,.sec h2.t::before{position:static;display:block;margin-bottom:8px;opacity:.8;}
}
/* Some instruments already carry their own section index: Second Order uses
   boxed numerals and The Index uses the routed gutter. Keep those authored
   systems and suppress only the redundant generated numeral. */
.secnum h2.t::before,.sec-routed .h2::before{content:none;display:none;}

/* ---- 2. Register marks on data panels ----------------------------------
   Corner ticks, as on a printed proof or an instrument frame. They mark
   which blocks on the page are measured output rather than prose. */
.panel-marks{position:relative;}
/* All four corners are drawn from one overlay. Marker spans were wiped the
   moment a panel re-rendered, because the charts replace their own innerHTML. */
.panel-marks::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.55;
  background:
    linear-gradient(var(--acc),var(--acc)) left    top/10px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) left    top/1px 10px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right   top/10px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right   top/1px 10px no-repeat,
    linear-gradient(var(--acc),var(--acc)) left  bottom/10px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) left  bottom/1px 10px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right bottom/10px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) right bottom/1px 10px no-repeat;
}

/* ---- 3. S/O end-mark ---------------------------------------------------
   Magazines close a piece with a tombstone. This closes a section with
   the brand mark, so the rhythm of the page is punctuated by S/O rather
   than by another horizontal rule. */
.sec:has(.h2) > .wrap::after,.sec:has(h2.t) > .wrap::after{
  content:'S/O';display:block;margin-top:34px;padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.3em;
  color:var(--acc-ink);opacity:.45;text-align:right;
}
@media (prefers-reduced-motion:no-preference){
  .sec:has(.h2) > .wrap::after,.sec:has(h2.t) > .wrap::after{transition:opacity .3s;}
}

/* ---- action affordance ------------------------------------------------
   The briefing pill carried a halo and nothing else did, so two controls
   sitting next to each other read as different kinds of thing. Every action
   gets the same treatment, weighted to its role. */
.btn,.btn-ghost,.citebtn,.minibtn,.so-btn-updates{
  box-shadow:0 0 0 1px rgba(229,80,46,.20), 0 4px 14px rgba(229,80,46,.12);
  transition:box-shadow .15s ease, transform .15s ease;
}
.btn:hover,.btn-ghost:hover,.citebtn:hover,.minibtn:hover,.so-btn-updates:hover{
  box-shadow:0 0 0 1px rgba(229,80,46,.50), 0 7px 20px rgba(229,80,46,.26);
  transform:translateY(-1px);
}

/* Primary actions match the book signup: black at rest, vivid orange on
   hover/focus, with a clean halo instead of the former brown-orange wash. */
.btn,.so-btn-updates{
  background:var(--action-black);
  border-color:#262626;
  color:#FFFFFF;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.btn:hover,.btn:focus-visible,.so-btn-updates:hover,.so-btn-updates:focus-visible{
  background:var(--action-orange);
  border-color:var(--action-orange);
  color:#FFFFFF;
  box-shadow:0 0 0 1px rgba(255,79,50,.72),0 0 24px rgba(255,79,50,.52);
  transform:none;
}

/* Pull quotes break like headings do, so a clause never orphans a word. */
blockquote,.pullquote,.q{text-wrap:balance;}

/* ---- sortable tables --------------------------------------------------- */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable:hover{color:var(--acc-ink);}
th.sortable::after{content:'\2195';opacity:.35;margin-left:6px;font-size:9px;}
th.sortable.asc::after{content:'\2191';opacity:1;color:var(--acc-ink);}
th.sortable.desc::after{content:'\2193';opacity:1;color:var(--acc-ink);}