/*
Theme Name: MullionWorks
Theme URI: https://mullionworks.com
Author: Big Trouble Labs
Description: The MullionWorks site, built on the Big Trouble Labs theme structure. Warm near-black ground, one red accent, monospace labels, restrained motion. Fonts served from the theme. No page builder, no framework, no third-party requests. Copy is edited in Settings, then Page Content.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mw
*/
/* ═══ FONTS ═══ */
/* Served from the theme. Nothing is fetched from Google or anywhere else.
   All three are under the SIL Open Font License 1.1; see assets/fonts/. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/fonts/instrument-sans-variable-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/archivo-700-latin.woff2") format("woff2")}

:root{
  color-scheme:dark;

  /* colour: shared base from the Polos and Gilets branding file, red from the Mullion mark notes */
  --ground:#0e0d0b;
  --ground-lift:#14120f;
  --field:#17140f;
  --field-hi:#1d1913;
  --line-soft:#2a251c;
  --accent:#ff4a55;          /* settled: 5.89 to 1 on ground */
  --accent-hi:#ff7a82;       /* proposed: 7.73 on ground, hover and focus */
  --accent-dim:#c9343f;      /* proposed: 3.74 on ground, 3.54 on field, borders and rail only, never text */
  --line:rgba(255,74,85,0.18);
  --ink:#f7f5f1;
  --ink-dim:#a39b88;
  --ink-faint:#8a8373;
  --bad:#e0a63a;             /* proposed: amber, 8.96 on ground, because a red accent cannot also mean error */

  /* type */
  --font-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font-mark:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;

  /* space */
  --panel-max:64rem;
  --radius:2px;

  /* motion */
  --dur-fast:240ms;
  --dur:520ms;
  --stagger:80ms;
  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --travel:12px;

}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-display);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:var(--radius)}
a{color:var(--accent)}
a:hover{color:var(--accent-hi)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ground);
  padding:.75rem 1.25rem;font-weight:600;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* ═══ FIXED CHROME ═══ */
#progress{position:fixed;top:0;left:0;z-index:80;height:2px;width:0%;background:var(--accent);
  transition:width var(--dur-fast) linear}
#rail{position:fixed;right:1.5rem;top:50%;z-index:60;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.rail-btn{appearance:none;background:none;border:0;padding:.35rem 0 .35rem .75rem;cursor:pointer;position:relative;line-height:0;display:block}
.rail-mark{display:block;height:1px;width:14px;background:var(--accent-dim);
  transition:width var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.rail-btn[aria-current="true"] .rail-mark{width:24px;background:var(--accent)}
.rail-btn:hover .rail-mark{background:var(--accent-hi)}
.rail-label{position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;opacity:0;transition:opacity var(--dur-fast) var(--ease);pointer-events:none}
.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{opacity:1}
@media(max-width:900px){#rail{display:none}}

/* ═══ PRIMARY NAVIGATION ═══ */
/* Rendered only when a published page exists at one of the watched slugs, as on Big Trouble Labs. */
.sitenav{position:sticky;top:0;z-index:75;border-bottom:1px solid var(--line);background:var(--ground)}
.sitenav ul{max-width:var(--panel-max);margin:0 auto;padding:0 1.5rem;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.75rem}
@media(min-width:760px){.sitenav ul{padding:0 2.5rem}}
.sitenav a{display:inline-block;padding:1.05rem 0;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* v0d6: the mark at the head of the bar. Never recoloured on hover: the mark notes allow four colours only. */
.sitenav ul{align-items:center}
.sitenav a.navmark{display:inline-flex;align-items:center;padding:.6rem 0;border-bottom:0;margin:0 .25rem 0 0}
.sitenav a.navmark svg{height:24px;width:auto;display:block}
/* v0d10: the menu on phones. Below 760 pixels the bar holds the mark on the left and a menu button on the right;
   the links open in a panel beneath, pinned with the bar. Without script the links simply wrap, as before. */
.sitenav .navbar{display:none}
.navtoggle{appearance:none;background:none;border:0;padding:0;margin:0 -.5rem 0 0;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.navtoggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger,.burger::before,.burger::after{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{transform:translateY(-6px)}
.burger::after{transform:translateY(6px)}
.sitenav.open .burger{background:transparent}
.sitenav.open .burger::before{transform:rotate(45deg)}
.sitenav.open .burger::after{transform:rotate(-45deg)}
@media(max-width:759.98px){
  .js .sitenav .navbar{display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem;min-height:3.25rem}
  .js .sitenav .navmark-li{display:none}
  .js .sitenav ul{display:none;flex-direction:column;align-items:stretch;gap:0;padding:0 1.5rem .5rem;border-top:1px solid var(--line-soft)}
  .js .sitenav.open ul{display:flex}
  .js .sitenav ul a{display:flex;align-items:center;min-height:2.75rem;padding:0;border-bottom:1px solid var(--line-soft);margin:0}
  .js .sitenav ul li:last-child a{border-bottom:0}
  .js .sitenav ul a[aria-current="page"]{border-bottom-color:var(--line-soft);color:var(--accent)}
}
/* Anchor jumps clear the pinned bar, only when it exists, as on BTL. */
.has-nav .stage,.has-nav .doc{scroll-margin-top:3.5rem}

/* ═══ MASTHEAD ═══ */
.masthead{padding:3rem 1.5rem 0;display:flex;justify-content:center;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground-lift) 0%,var(--ground) 100%)}
.lockup{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--ink)}
.lockup:hover{color:var(--ink)}
.lockup svg{height:56px;width:auto;display:block;flex:none}
/* Wordmark settled 6 October 2026: uppercase, one line. Archivo is still a placeholder face. */
.wm{font-family:var(--font-mark);font-weight:700;letter-spacing:.055em;font-size:1.35rem;line-height:1.02;text-transform:uppercase;white-space:nowrap}
@media(min-width:760px){.masthead{padding:3.5rem 2.5rem 0}.lockup svg{height:64px}.wm{font-size:1.55rem}}

/* ═══ LAYOUT ═══ */
.stage{position:relative;padding:3rem 1.5rem;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground-lift) 0%,var(--ground) 100%)}
.stage + .stage{border-top:1px solid var(--line-soft)}
.stage.first{padding:1.5rem 1.5rem 3.27rem}
@media(min-width:760px){.stage{padding:4.75rem 2.5rem}.stage.first{padding:2.21rem 2.5rem 5.43rem}}
.panel{width:100%;max-width:var(--panel-max);margin:0 auto;position:relative}
.bracketed{padding:2.5rem}
@media(max-width:480px){.bracketed{padding:2rem 1.25rem}}
.br{position:absolute;width:18px;height:18px;opacity:.5;transform:scale(.4);transition:transform var(--dur) var(--ease)}
.br-tl{top:0;left:0;border-top:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:top left}
.br-tr{top:0;right:0;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:top right}
.br-br{bottom:0;right:0;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:bottom right}
.br-bl{bottom:0;left:0;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:bottom left}
.in-view .br{transform:scale(1)}
.in-view .br-tr{transition-delay:var(--stagger)}
.in-view .br-br{transition-delay:calc(var(--stagger)*2)}
.in-view .br-bl{transition-delay:calc(var(--stagger)*3)}

/* ═══ TYPE ═══ */
.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem}
.display{font-size:clamp(2.5rem,4.26vw,2.94rem);font-weight:600;letter-spacing:-.02em;line-height:1.03;margin:0}
.headline{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0}
.standfirst{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink-dim);margin:1.35rem 0 0}
.body{color:var(--ink-dim);margin:1.5rem 0 0;font-size:1.0625rem;line-height:1.7}
.meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin:2.25rem 0 0}

/* ═══ BUTTONS ═══ */
.btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.btn{display:inline-block;padding:.85rem 1.6rem;background:var(--accent);color:var(--ground);font-weight:600;
  font-size:.9375rem;text-decoration:none;border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--ground)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--accent-dim)}
.btn-ghost:hover{background:transparent;color:var(--accent-hi);border-color:var(--accent-hi)}

/* ═══ CARDS ═══ */
/* As on Big Trouble Labs: a card always shows; it becomes a link once its page's stub is published. */
.cards{margin:2.75rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--field);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.75rem 1.5rem;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.card:hover{background:var(--field-hi);border-color:var(--accent-dim)}
.card .idx{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent);margin:0 0 1rem;display:block}
.card h3{margin:0 0 .75rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.card h3 a{color:inherit;text-decoration:none}
.card.is-linked{cursor:pointer}
.card.is-linked:hover h3 a{color:var(--accent)}
.cardlink::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.cardlink:focus-visible{outline:none}
.card.is-linked:focus-within{background:var(--field-hi);border-color:var(--accent);outline:2px solid var(--accent-hi);outline-offset:2px}
.card p{margin:0;color:var(--ink-dim);font-size:.9375rem;line-height:1.6}
@media(max-width:860px){.cards,.cards.two{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ═══ RULED LIST ═══ */
.ruled{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.5rem}
.ruled li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.ruled li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.72em}
.ruled strong{color:var(--ink);font-weight:500}

/* ═══ STEPS ═══ */
.steps{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.6rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.25rem 1fr;gap:1.25rem;color:var(--ink-dim);counter-increment:step;font-size:1.0625rem;line-height:1.7}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--accent);padding-top:.35em}
.steps strong{color:var(--ink);font-weight:500}

/* ═══ FORM ═══ */
.form{margin:2.75rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 1.5rem;align-items:start}
.form.two{grid-template-columns:repeat(2,1fr)}
.field-full{grid-column:1/-1}
@media(max-width:760px){.form,.form.two{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{background:var(--field);border:1px solid var(--line-soft);border-radius:var(--radius);color:var(--ink);
  font-family:var(--font-display);font-size:1rem;padding:.8rem .9rem;width:100%;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.field input:hover,.field textarea:hover{border-color:var(--accent-dim)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background-color:var(--field-hi);outline:2px solid var(--accent-hi);outline-offset:1px}
.field textarea{min-height:8rem;resize:vertical;line-height:1.55}
/* ═══ CHIPS ═══ */
/* Short single-choice questions as radio buttons drawn as chips, so the choices carry the site's own look
   in every browser. v0d5: replaces drop-downs, whose open list is drawn by the operating system. */
fieldset.chips{border:0;margin:0;padding:0;min-width:0}
.chips legend{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding:0;margin:0 0 .5rem}
.chips legend .opt{text-transform:none;letter-spacing:0}
.chipset{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;background:var(--field);border:1px solid var(--line-soft);
  border-radius:var(--radius);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.chip:hover span{border-color:var(--accent-dim);color:var(--ink)}
.chip input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.chip input:focus-visible + span{outline:2px solid var(--accent-hi);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8125rem;color:var(--ink-faint);line-height:1.55;margin:0;grid-column:1/-1}
.consent a{color:var(--accent)}
.form .btn{margin-top:.25rem}
.fallback{margin:2.5rem 0 0;font-size:1.0625rem;color:var(--ink-dim)}
.notice{margin:2.5rem 0 0;padding:1rem 1.25rem;border-radius:var(--radius);border:1px solid var(--line-soft);font-size:.9375rem;line-height:1.6}
.notice-ok{border-color:var(--accent);color:var(--ink)}
.notice-bad{border-color:var(--bad);color:var(--bad)}

/* ═══ LEGAL PAGE ═══ */
.doc{max-width:var(--panel-max);margin:0 auto;padding:3.5rem 1.5rem 5rem}
@media(min-width:760px){.doc{padding:5rem 2.5rem 7rem}}
.backlink{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-bottom:2.5rem;color:var(--accent)}
.has-nav .backlink{display:none}
.doc h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
.doc .lede{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;color:var(--ink-dim);margin:1.35rem 0 0}
.doc .stamp{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin:1.75rem 0 0;padding-bottom:2.5rem;border-bottom:1px solid var(--line-soft)}
.doc h2{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:3.5rem 0 0}
.doc p{margin:1.25rem 0 0;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc p strong{color:var(--ink);font-weight:500}
.doc ul{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
.doc li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.78em}
.doc li strong{color:var(--ink);font-weight:500}
.doc .eyebrow{margin:0 0 1.25rem;line-height:1.65}
.tbl{width:100%;border-collapse:collapse;margin:1.25rem 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--line-soft);color:var(--ink-dim);font-size:1rem;line-height:1.6}
.tbl th{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tblwrap{overflow-x:auto}

/* ═══ FOOTER ═══ */
.foot{background:var(--ground);border-top:1px solid var(--line);padding:3.5rem 1.5rem}
@media(min-width:760px){.foot{padding:4rem 2.5rem}}
.foot-inner{max-width:var(--panel-max);margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;
  font-family:var(--font-mono);font-size:.75rem;line-height:1.9;letter-spacing:.03em;color:var(--ink-faint)}
.foot-mark{display:flex;align-items:center;gap:.75rem;color:var(--ink)}
.foot-mark svg{height:32px;width:auto}
.foot-mark .wm{font-size:.95rem}
.foot-contact{display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-dim)}
.foot-legal span{display:block}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ═══ MARK ═══ */
.mark{fill:var(--accent)}

/* ═══ REVEAL ═══ */
.js .rv{opacity:0;transform:translateY(var(--travel));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .in-view .rv{opacity:1;transform:none}
.js .in-view .rv-1{transition-delay:var(--stagger)}
.js .in-view .rv-2{transition-delay:calc(var(--stagger)*2)}
.js .in-view .rv-3{transition-delay:calc(var(--stagger)*3)}
.js .in-view .rv-4{transition-delay:calc(var(--stagger)*4)}
.js .in-view .rv-5{transition-delay:calc(var(--stagger)*5)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .in-view .rv{opacity:1;transform:none;transition:none}
  .br,.in-view .br{transform:scale(1);transition:none}
  #progress{transition:none}
  html{scroll-behavior:auto}
}

/* ═══ DIAGRAM ═══ */
  :root{--dur-slow:900ms}
  .figwrap{margin:2.75rem 0 0}
  .fig svg{display:block;width:100%;height:auto;overflow:visible}
  .fig-narrow{display:none;max-width:24rem;margin:0 auto}
  @media(max-width:760px){.fig-wide{display:none}.fig-narrow{display:block}}
  .dnode{fill:var(--field);stroke:var(--line-soft);stroke-width:1}
  .dnode-key{fill:var(--field-hi);stroke:var(--accent);stroke-width:1}
  .dtext{fill:var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
  .dtext-sm{fill:var(--ink);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em}
  .dnum{fill:var(--accent);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em}
  .dtext-dim{fill:var(--ink-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em}
  .dl{stroke:var(--accent-dim);stroke-width:1;fill:none}
  .drail{stroke:var(--accent);stroke-width:2;fill:none}
  .dtick{stroke:var(--accent-dim);stroke-width:1;fill:none;stroke-dasharray:2 3}
  .ddot{fill:var(--accent)}
  .dmull{stroke:var(--accent-dim);stroke-width:1;fill:none;stroke-dasharray:4 4}
  .dband{stroke:var(--ink-faint);stroke-width:1;fill:none}
  .darrow{fill:var(--accent-dim)}
  .figcap{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin:1.25rem 0 0}
  .econ{margin:1.25rem 0 0}

  /* line drawing and staged arrival, keyed off in-view like every other reveal */
  .js .dl,.js .drail{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-slow) var(--ease)}
  .js .in-view .dl,.js .in-view .drail{stroke-dashoffset:0}
  .js .dg{opacity:0;transition:opacity var(--dur) var(--ease);transition-delay:calc(var(--stagger) * var(--i,0))}
  .js .in-view .dg{opacity:1}
  .js .in-view .drail{transition-delay:calc(var(--stagger) * 9)}
  .js .in-view .dl{transition-delay:calc(var(--stagger) * var(--i,0))}
  @media(prefers-reduced-motion:reduce){
    .js .dl,.js .drail{stroke-dasharray:none;transition:none}
    .js .dg{opacity:1;transition:none}
  }

  /* station list */
  .stations{list-style:none;padding:0;margin:2.75rem 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem;counter-reset:st}
  @media(max-width:760px){.stations{grid-template-columns:1fr}}
  .stations li{display:grid;grid-template-columns:2.25rem 1fr;gap:1rem;counter-increment:st}
  .stations li::before{content:counter(st,decimal-leading-zero);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--accent);padding-top:.3em}
  .stations h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.005em}
  .stations p{margin:.4rem 0 0;color:var(--ink-dim);font-size:.9875rem;line-height:1.65}
  .stations .tech{font-family:var(--font-mono);font-size:.75rem;line-height:1.7;letter-spacing:.02em;color:var(--ink-faint)}
  .stations .tech b{font-weight:500;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase;font-size:.6875rem}

  .fig{margin:0}
  .fig-narrow{margin:0 auto}