/* ============================================================
   keelsonsystems.org — "Night Watch"
   Tokens per docs/design_guidelines.md §5B / §6B / §7B / §8 / §9.
   A ship's bridge after dark: everything lit dim so night vision
   holds, one warm sodium lamp. No JS anywhere on the site.
   ============================================================ */
:root{
  --ground:#0E1A1E; --panel:#14262B; --panel-2:#0B1518;
  --fg:#E8EDEC; --fg-muted:#8FA5A6;
  --rule:#3A6E73;          /* 3.09:1 on ground — boundaries, never text. .band redefines it to #427B80 (3.26:1 on panel). */
  --lit:#5FA0A5;           /* 5.96:1 — links and interactive text */
  --lamp:#E0A33E;          /* 8.00:1 — the accent; CTAs and the keelson beam */
  --lamp-hi:#F0B754;
  --border:rgba(232,237,236,0.10);
  --border-2:rgba(232,237,236,0.18);

  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Atkinson Hyperlegible Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --step--1:clamp(0.83rem,0.80rem + 0.15vw,0.90rem);
  --step-0:clamp(1.00rem,0.96rem + 0.20vw,1.10rem);
  --step-1:clamp(1.20rem,1.12rem + 0.40vw,1.44rem);
  --step-2:clamp(1.50rem,1.35rem + 0.75vw,1.95rem);
  --step-3:clamp(1.90rem,1.60rem + 1.50vw,2.75rem);
  --step-4:clamp(2.40rem,1.85rem + 2.75vw,4.00rem);
  --step-5:clamp(2.5rem,1.75rem + 3.3vw,4.5rem);   /* deliberately one notch under §6's 5.75rem cap so the hero CTA row lands at or near the fold at 1440×900 (measured 2026-08-21) */

  --s1:0.25rem; --s2:0.5rem; --s3:0.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --ease:cubic-bezier(.2,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--s7)}
body{margin:0; background:var(--ground); color:var(--fg);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; height:auto}
p,ul,ol{margin:0 0 var(--s4)}
ul,ol{padding-left:1.2em}
li{margin-bottom:var(--s2)}
a{color:var(--lit); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--lamp)}
:focus-visible{outline:2px solid var(--lamp); outline-offset:3px}
strong{font-weight:600}
hr{border:0; border-top:1px solid var(--border); margin:var(--s7) 0}
.skip{position:absolute; left:-999px; top:var(--s2); background:var(--lamp); color:var(--ground);
  padding:var(--s2) var(--s4); font-weight:600; z-index:50; border-radius:2px}
.skip:focus{left:var(--s4)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

.wrap{max-width:1200px; margin:0 auto; padding-inline:var(--s5)}
@media(min-width:768px){.wrap{padding-inline:var(--s7)}}
.measure{max-width:64ch}
.narrow{max-width:72ch}

.mono{font-family:var(--font-mono); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted)}
.mono a{text-decoration:none}
.mono a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; color:var(--fg);
  letter-spacing:-0.01em; text-wrap:balance; margin:0}
h1{font-size:var(--step-4); line-height:1.08; letter-spacing:-0.015em}
h2{font-size:var(--step-3); line-height:1.15; max-width:26ch}
h3{font-size:var(--step-2); line-height:1.2}
h4{font-size:var(--step-1); line-height:1.25}
h2 em,h1 em{font-style:italic; font-weight:400; color:var(--lamp)}
.lead{font-size:var(--step-1); line-height:1.5; max-width:58ch; margin:0 0 var(--s6)}

/* ---------- Depth rail (signature, part 2) ----------
   Left-margin gauge marking section positions down the page. Decorative,
   aria-hidden, desktop-only; carries nothing the page does not also state. */
.rail{display:none}
@media(min-width:1400px){
  .rail{display:block; position:fixed; left:max(24px,calc((100vw - 1200px)/2 - 44px));
    top:22vh; bottom:12vh; width:1px; background:var(--rule); z-index:1}
  .rail span{position:absolute; left:-7px; width:15px; height:1px; background:var(--rule)}
  .rail span::after{content:attr(data-label); position:absolute; left:24px; top:-8px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--fg-muted); white-space:nowrap}
  .rail span:first-child{background:var(--lamp)}
  .rail .d0{top:0}.rail .d1{top:20%}.rail .d2{top:40%}.rail .d3{top:60%}.rail .d4{top:80%}.rail .d5{top:100%}
}

/* ---------- Header ---------- */
.masthead{border-bottom:1px solid var(--border); position:relative; z-index:2}
.masthead-inner{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4) var(--s5); padding-block:var(--s4); flex-wrap:wrap}
@media(min-width:768px){.masthead-inner{padding-block:var(--s5)}}
.logo{display:block; color:var(--fg); flex:none}
.masthead .logo{display:inline-flex; align-items:center; min-height:44px}
/* Logo mark/wordmark colors, extracted from inline SVG fills so print
   (below) can override them without a second markup source. */
.mk-keel{stroke:#3A6E73}
.mk-keelson,.mk-bolts{stroke:#E0A33E}
.wm-word{fill:#E8EDEC}
.wm-sub{fill:#8FA5A6}
.logo svg{height:30px; width:152px; display:block; overflow:visible}
.logo .mark-only{display:none}
@media(min-width:768px){.logo svg{height:32px; width:162px}}
@media screen and (max-width:479px){.masthead .logo .lockup{display:none} .masthead .logo .mark-only{display:block; width:45px; height:30px}}
.nav{display:flex; gap:var(--s2) var(--s4); flex-wrap:wrap; align-items:center}
@media(min-width:768px){.nav{gap:var(--s5)}}
.nav a{font-family:var(--font-mono); font-size:var(--step--1); line-height:1;
  text-transform:uppercase; letter-spacing:.08em; text-decoration:none; color:var(--fg);
  padding:var(--s3) var(--s1); display:inline-flex; align-items:center; min-height:44px}
.nav a:hover{color:var(--lamp); text-decoration:underline}
.nav a[aria-current="page"]{color:var(--lamp)}
.nav .nav-cta{border:1px solid var(--rule); padding-inline:var(--s4); border-radius:2px}
.nav .nav-cta:hover{border-color:var(--lamp); text-decoration:none}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s8) var(--s7)}
@media screen and (max-width:767px){.hero{padding-block:var(--s6) var(--s5)}}
.hero-grid{display:grid; gap:var(--s7); align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s8)}}
.hero h1{font-size:var(--step-5); line-height:1.04; max-width:15ch; margin:var(--s4) 0 var(--s5)}
@media screen and (max-width:767px){.hero h1{margin:var(--s3) 0 var(--s4)}}
.hero .lead{margin-bottom:var(--s6)}
@media screen and (max-width:767px){.hero .lead{margin-bottom:var(--s5)}}
.define{font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted);
  letter-spacing:.02em; text-transform:none; line-height:1.6; max-width:56ch; margin:0}
.define b{color:var(--lamp); font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.define i{font-style:italic; color:var(--fg-muted)}

/* Signature §7B: the horizon. A single amber rule drawn once on load.
   Transform-only — opacity is 1 the whole time — and it always plays on load
   rather than waiting on a scroll observer. If the animation never runs, the
   reduced-motion rule leaves it at its final full width. */
.horizon{height:2px; background:var(--lamp); transform-origin:left center;
  transform:scaleX(1); animation:draw 1100ms var(--ease) both; margin-bottom:var(--s6)}
@keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* The hull section drawing. Lit outline, teal hull, amber keelson.
   The keelson beam draws last so the eye lands on the one warm element. */
.hero-art{margin:0}
.section-drawing{display:block; width:100%; height:auto}
.section-drawing .hull{stroke:var(--rule); stroke-width:1.6; fill:none}
.section-drawing .frame{stroke:var(--rule); stroke-width:1.2; fill:none; opacity:.9}
.section-drawing .keel{stroke:var(--lit); stroke-width:2; fill:none}
.section-drawing .keelson{stroke:var(--lamp); stroke-width:2.4; fill:none}
.section-drawing .bolt{fill:var(--lamp)}
.section-drawing .dim{stroke:var(--fg-muted); stroke-width:.8; fill:none; opacity:.8}
.section-drawing .lbl{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; fill:var(--fg-muted)}
.section-drawing .lbl.hot{fill:var(--lamp)}
.section-drawing .wl{stroke:var(--rule); stroke-width:.8; stroke-dasharray:4 6; fill:none}
.drawing-caption{margin-top:var(--s3); font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--fg-muted); letter-spacing:.02em; line-height:1.55}
@media screen and (max-width:959px){.hero-art{max-width:560px}}
@media screen and (max-width:767px){.hero-art{display:none}}

.cta-row{display:flex; gap:var(--s3) var(--s4); flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:var(--s3) var(--s5); border-radius:2px; font-family:var(--font-body);
  font-weight:600; font-size:var(--step-0); text-decoration:none; line-height:1.2;
  border:1px solid transparent; transition:background-color .18s var(--ease),
  border-color .18s var(--ease),color .18s var(--ease)}
.btn-primary{background:var(--lamp); color:var(--ground)}
.btn-primary:hover{background:var(--lamp-hi); color:var(--ground)}
.btn-ghost{border-color:var(--rule); color:var(--fg)}
.btn-ghost:hover{border-color:var(--lamp); color:var(--lamp)}
.btn-lg{min-height:52px; padding-inline:var(--s6); font-size:var(--step-1)}

/* ---------- Sections ---------- */
.section{padding-block:var(--s9)}
@media screen and (max-width:767px){.section{padding-block:var(--s7)}}
.section-tight{padding-block:var(--s8)}
@media screen and (max-width:767px){.section-tight{padding-block:var(--s6)}}
.section-head{margin-bottom:var(--s7); max-width:70ch}
@media screen and (max-width:767px){.section-head{margin-bottom:var(--s5)}}
.section-head .mono{margin-bottom:var(--s3)}
.section-head p:not(.mono){margin:var(--s4) 0 0; max-width:64ch; color:var(--fg)}
.band{--rule:#427B80; background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.band-deep{background:var(--panel-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}

/* ---------- Log entries (offerings) ----------
   Hairline-separated rows, not cards. A logbook has entries, not tiles. */
.log{border-top:1px solid var(--rule)}
.entry{display:grid; gap:var(--s3) var(--s4); padding-block:var(--s6);
  border-bottom:1px solid var(--border)}
@media(min-width:900px){
  .entry{grid-template-columns:minmax(0,9ch) minmax(0,1fr) minmax(0,20ch);
    gap:var(--s6); align-items:start; padding-block:var(--s7)}
}
.entry-idx{font-family:var(--font-mono); font-size:var(--step--1); color:var(--lamp);
  letter-spacing:.12em; text-transform:uppercase; padding-top:.45em; margin:0}
.entry h3{margin:0 0 var(--s3)}
.entry p{margin:0 0 var(--s3); max-width:62ch}
.entry p:last-child{margin-bottom:0}
.entry-basis{font-family:var(--font-mono); font-size:var(--step--1); line-height:1.7;
  color:var(--fg); margin:0}
.entry-basis em{display:block; font-style:normal; color:var(--fg-muted); margin-top:var(--s2);
  font-family:var(--font-body); font-size:var(--step--1); line-height:1.55; letter-spacing:0; text-transform:none}
@media(min-width:900px){.entry-basis{text-align:right} .entry-basis em{text-align:left}}
.entry-link{display:inline-block; margin-top:var(--s2); padding:var(--s2) 0; font-weight:500; min-height:44px; line-height:1.75}
.checklist{list-style:none; padding:0; margin:var(--s4) 0 0; display:grid; gap:var(--s2) var(--s5)}
@media(min-width:640px){.checklist.two{grid-template-columns:1fr 1fr}}
.checklist li{position:relative; padding-left:1.4em; margin:0; color:var(--fg)}
.checklist li::before{content:""; position:absolute; left:0; top:.72em; width:.8em; height:2px; background:var(--lamp)}

/* ---------- General arrangement (the platform drawing) ----------
   A hull in profile, divided into compartments — one per module — with the
   keelson running the full length underneath. The drawing IS the claim:
   one structural member under every function. */
.ga{display:block; width:100%; height:auto; margin-block:var(--s5) var(--s4)}
.ga .hull{stroke:var(--rule); stroke-width:1.6; fill:none}
.ga .bulkhead{stroke:var(--rule); stroke-width:1.1; fill:none}
.ga .deck{stroke:var(--rule); stroke-width:1; fill:none; opacity:.7}
.ga .keel{stroke:var(--lit); stroke-width:2; fill:none}
.ga .keelson{stroke:var(--lamp); stroke-width:2.6; fill:none}
.ga .bolt{fill:var(--lamp)}
.ga .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; fill:var(--fg)}
.ga .sub{font-family:var(--font-body); font-size:11px; fill:var(--fg-muted); letter-spacing:0; text-transform:none}
.ga .lbl.hot{fill:var(--lamp)}
.ga .wl{stroke:var(--rule); stroke-width:.8; stroke-dasharray:4 6; fill:none}
@media screen and (max-width:767px){.ga{display:none}}

/* ---------- Tier table ---------- */
.swipe-hint{display:none}
.tiers{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:var(--s6)}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--panel); padding:var(--s6) var(--s5)}
@media(min-width:900px){.tier{padding:var(--s7) var(--s6)}}
.band .tier{background:var(--ground)}
.tier-name{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding-bottom:var(--s4); border-bottom:1px solid var(--border); margin-bottom:var(--s4)}
.tier-name h3{margin:0}
.tier-name .mono{color:var(--lamp)}
.tier-name .tier-status{color:var(--fg-muted)}
.tier-name .tier-status.live{color:var(--lamp)}
.tier-for{color:var(--fg); margin:0 0 var(--s4); min-height:0}
.tier ul{list-style:none; padding:0; margin:0}
.tier li{position:relative; padding-left:1.4em; margin:0 0 var(--s2); color:var(--fg)}
.tier li::before{content:""; position:absolute; left:0; top:.72em; width:.8em; height:2px; background:var(--rule)}
.tier li.plus::before{background:var(--lamp)}
.tier li small{display:block; color:var(--fg-muted); font-size:var(--step--1); line-height:1.5}
.tier .btn{margin-top:var(--s5)}
.tier-note{margin-top:var(--s4); font-size:var(--step--1); color:var(--fg-muted); max-width:70ch}

/* ---------- Process / course ---------- */
.course{list-style:none; padding:0; margin:0; display:grid; gap:var(--s5); counter-reset:leg}
@media(min-width:800px){.course{grid-template-columns:repeat(4,1fr); gap:var(--s6)}}
.course li{position:relative; padding-top:var(--s4); border-top:1px solid var(--rule); margin:0}
.course li::before{counter-increment:leg; content:"Leg " counter(leg); display:block;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--lamp); margin-bottom:var(--s3)}
.course h3{font-size:var(--step-1); margin:0 0 var(--s2)}
.course p{margin:0; color:var(--fg); font-size:var(--step-0)}
.course .when{display:block; margin-top:var(--s3); font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--fg-muted); letter-spacing:.06em; text-transform:uppercase}

/* ---------- Ship's papers (credibility) ---------- */
.papers{display:grid; gap:1px; background:var(--border); border:1px solid var(--border)}
@media(min-width:640px){.papers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.papers{grid-template-columns:repeat(3,1fr)}}
.paper{background:var(--panel); padding:var(--s5)}
@media(min-width:768px){.paper{padding:var(--s6)}}
.band .paper{background:var(--ground)}
.paper-label{display:block; margin-bottom:var(--s2)}
.paper-value{font-family:var(--font-display); font-weight:500; font-size:var(--step-1); line-height:1.25; display:block}
.paper-note{display:block; margin-top:var(--s2); font-size:var(--step--1); color:var(--fg-muted); line-height:1.55}

/* ---------- FAQ (native <details>; no JS; content in DOM for crawlers) ---------- */
.faq{border-top:1px solid var(--rule); max-width:80ch}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:var(--s4); padding:var(--s4) 0; font-family:var(--font-display);
  font-size:var(--step-1); line-height:1.3; color:var(--fg); min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--lamp); flex:none; font-size:1.2em; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--lamp)}
.faq .answer{padding:0 0 var(--s5); max-width:68ch; color:var(--fg)}
.faq .answer p{margin:0 0 var(--s3)}
.faq .answer p:last-child{margin:0}

/* ---------- Standing orders (billing) ---------- */
.orders{border-left:2px solid var(--lamp); padding-left:var(--s5)}
@media(min-width:768px){.orders{padding-left:var(--s6)}}
.orders p{max-width:66ch; margin:0 0 var(--s4)}
.orders p:last-child{margin-bottom:0}

/* ---------- Contact / closing CTA ---------- */
.contact{--rule:#427B80; background:var(--panel); border:1px solid var(--rule); padding:var(--s6)}
@media(min-width:768px){.contact{padding:var(--s8)}}
.contact p{max-width:58ch}
.contact h2{max-width:22ch}
.mailto{font-family:var(--font-display); font-weight:500; font-size:var(--step-2);
  color:var(--lamp); word-break:break-word; display:inline-block; padding:var(--s2) 0; min-height:44px; margin-block:var(--s3) var(--s4); line-height:1.3}
.mailto:hover{color:var(--lamp-hi)}
.contact-grid{display:grid; gap:var(--s6)}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s8)}}
.dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:var(--s2) var(--s5); align-items:baseline}
.dl dt{font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted)}
.dl dd{margin:0}

/* ---------- Prose pages (legal, about) ---------- */
.page-head{padding-block:var(--s8) var(--s6); border-bottom:1px solid var(--border)}
@media screen and (max-width:767px){.page-head{padding-block:var(--s6) var(--s5)}}
.page-head .mono{margin-bottom:var(--s3)}
.page-head p:not(.mono){margin:var(--s4) 0 0; max-width:64ch; font-size:var(--step-1); line-height:1.5}
.prose{max-width:72ch; padding-block:var(--s7)}
@media screen and (max-width:767px){.prose{padding-block:var(--s6)}}
.prose h2{font-size:var(--step-2); margin:var(--s7) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--step-1); margin:var(--s5) 0 var(--s2)}
.prose p,.prose li{color:var(--fg)}
.prose ul,.prose ol{margin-bottom:var(--s4)}
.prose .meta{font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted);
  letter-spacing:.02em; margin:0 0 var(--s6); padding-bottom:var(--s4); border-bottom:1px solid var(--border)}
.prose table{border-collapse:collapse; width:100%; font-size:var(--step--1); margin:var(--s4) 0 var(--s5)}
.prose th,.prose td{text-align:left; padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--border); vertical-align:top}
.prose th{font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted)}
.toc{font-size:var(--step--1); margin:0 0 var(--s6); padding:var(--s4) var(--s5); border:1px solid var(--border); background:var(--panel); columns:1; column-gap:var(--s6)}
@media screen and (min-width:400px){.toc{columns:2}}
.toc ol{margin:0; padding-left:1.3em}
.toc li{margin-bottom:0; break-inside:avoid}
.toc a{display:inline-block; padding:var(--s3) 0; min-height:44px; line-height:1.5; text-decoration:none}
.toc a:hover{text-decoration:underline}
.callout{border-left:2px solid var(--lamp); padding:var(--s2) 0 var(--s2) var(--s5); margin:var(--s5) 0; color:var(--fg)}
.prose .draft-banner{border:1px solid var(--lamp); color:var(--lamp); padding:var(--s3) var(--s4); font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; margin:0 0 var(--s5)}
.callout p:last-child{margin:0}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--border); padding-block:var(--s7) var(--s6); margin-top:var(--s8)}
@media screen and (max-width:767px){.foot{margin-top:var(--s5); padding-block:var(--s6) var(--s5)}}
.foot-grid{display:grid; gap:var(--s6)}
@media(min-width:800px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot-label{margin:0 0 var(--s2)}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin:0}
.foot li a{text-decoration:none; color:var(--fg); display:inline-block; padding:var(--s2) 0; min-height:44px; line-height:1.75}
.foot li a:hover{color:var(--lamp); text-decoration:underline}
.legal{font-size:var(--step--1); color:var(--fg-muted); max-width:52ch; line-height:1.6; margin:var(--s4) 0 0}
.legal strong{color:var(--fg)}
  .foot-bottom a{display:inline-block; padding:var(--s3) var(--s1)}
.foot-bottom{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-muted); letter-spacing:.04em}
@media screen and (max-width:767px){.foot-grid{gap:var(--s5)} .foot .logo{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .horizon{animation:none; transform:scaleX(1)}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* ============================================================
   Deliberate 390px pass — docs/mobile-length-fix-spec.md, Cause 3.
   Every block with vertical padding steps down, not just .section.
   Target: mobile page height <= desktop page height.
   ============================================================ */
@media screen and (max-width:767px){
  .nav .nav-cta{display:none}
  .masthead-inner{flex-wrap:nowrap}
  .nav{gap:0 var(--s3)}
  .nav a{padding-inline:var(--s1)}
  .section-head{margin-bottom:var(--s4)}
  .section-head p:not(.mono){margin-top:var(--s3)}
  .lead{font-size:var(--step-0); line-height:1.55}
  .entry{padding-block:var(--s5); gap:var(--s2)}
  .entry-idx{padding-top:0}
  .entry-basis{border-top:1px dashed var(--border-2); padding-top:var(--s2); font-size:0.8rem}
  .entry-basis em{display:inline; margin:0 0 0 var(--s2)}
  .entry-basis em::before{content:"— "}
  .tiers{margin-top:var(--s4)}
  .tier{padding:var(--s5) var(--s4)}
  .tier-name{padding-bottom:var(--s3); margin-bottom:var(--s3)}
  .tier li{margin-bottom:var(--s1)}
  .tier .btn{margin-top:var(--s4)}
  .tier-note{margin-top:var(--s3)}
  .course{gap:var(--s4)}
  .course li{padding-top:var(--s3)}
  .course li::before{margin-bottom:var(--s2)}
  .course .when{margin-top:var(--s2)}
  .papers{grid-template-columns:1fr 1fr}
  .paper{padding:var(--s4) var(--s3)}
  .paper-value{font-size:var(--step-0)}
  .paper-note{font-size:0.8rem; line-height:1.45}
  .faq summary{padding:var(--s3) 0; font-size:var(--step-0)}
  .faq .answer{padding-bottom:var(--s4)}
  .contact{padding:var(--s5) var(--s4)}
  .mailto{font-size:var(--step-1); margin-block:var(--s2) var(--s3)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4)}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .foot-bottom{margin-top:var(--s5); flex-direction:column; gap:var(--s2)}
}
@media screen and (max-width:420px){
  .papers{grid-template-columns:1fr 1fr}
  .hero h1{max-width:none}
}
@media screen and (max-width:767px){
  /* Tiers: horizontal scroll-snap row. Content stays in the DOM; the page
     body never scrolls sideways — only this container does. */
  .tiers{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--s2);
    background:transparent; border:0; padding-bottom:var(--s2); scrollbar-width:thin;
    -webkit-overflow-scrolling:touch}
  .tier{flex:0 0 84%; scroll-snap-align:start; border:1px solid var(--border-2)}
  .swipe-hint{display:block; margin-top:var(--s2)}
  .course h3{font-size:var(--step-0)}
  .course p{font-size:var(--step--1)}
  .entry h3{font-size:var(--step-1)}
  .entry p{font-size:var(--step--1)}
}
@media screen and (max-width:767px){.nav{flex-wrap:nowrap}}
.table-wrap{overflow-x:auto; margin:var(--s4) 0 var(--s5)}
.prose code{font-family:var(--font-mono); font-size:.9em; color:var(--lit)}
.mt-5{margin-top:var(--s5)} .mt-7{margin-top:var(--s7)}
@media screen and (max-width:767px){.mt-7{margin-top:var(--s5)}}
/* Ultra-wide: scale the whole rem system up one step rather than letting a
   1200px strip float in 3840px of ground. Tokens are unchanged; only the root
   unit and the container cap step. */
@media(min-width:2200px){
  html{font-size:112.5%}
  .wrap{max-width:1320px}
  .rail{left:max(24px,calc((100vw - 1320px)/2 - 52px))}
}
@media(min-width:3200px){
  html{font-size:125%}
  .wrap{max-width:1440px}
  .rail{left:max(24px,calc((100vw - 1440px)/2 - 56px))}
}
.contact-grid > *{min-width:0}
.hero-grid > *{min-width:0}
@media screen and (max-width:767px){
  .page-head{padding-block:var(--s5) var(--s4)}
  .page-head p:not(.mono){font-size:var(--step-0)}
  .checklist{gap:var(--s1) var(--s4)}
  .log + .tier-note{margin-top:var(--s3)}
  .contact-grid{gap:var(--s5)}
  .dl{gap:var(--s1) var(--s4)}
  .dl dd{margin-bottom:var(--s2)}
  .course{gap:var(--s3)}
}
.dl dd{min-width:0; overflow-wrap:anywhere}
@media screen and (max-width:479px){.dl{grid-template-columns:1fr; gap:var(--s1)} .dl dd{margin-bottom:var(--s3)}}
@media screen and (max-width:359px){.nav{gap:0 var(--s2)} .nav a{letter-spacing:.05em; padding-inline:2px}}
.tier{display:flex; flex-direction:column}
.tier ul{margin-bottom:var(--s5)}
.tier .btn{margin-top:auto; align-self:flex-start}
@media print{
  :root{--ground:#fff; --panel:#fff; --panel-2:#fff; --fg:#111; --fg-muted:#444; --lit:#0b4a4e; --lamp:#7a4e08;
    --rule:#888; --border:#bbb; --border-2:#999}
  body{background:#fff; color:#111}
  .rail,.nav,.skip,.horizon,.swipe-hint{display:none}
  a{color:#0b4a4e}
  .btn-primary{background:#fff; color:#111; border-color:#111}
  .tiers,.papers{background:#bbb}
  .contact{border-color:#888}
  /* Print letterhead: the mark keeps a hull-and-keelson likeness in ink-safe
     colors instead of the near-white/muted-teal screen palette, which would
     print as a blank shape. */
  .wm-word{fill:#111}
  .wm-sub{fill:#444}
  .mk-keel{stroke:#1b4a4e}
  .mk-keelson,.mk-bolts{stroke:#7a4e08}
}