/* Meridian-room brass and slate: slate surfaces, brass rules, timetable numerals. All colour through semantic tokens. */
:root{
  --bg:#f4f1e8; --surface:#fffdf6; --panel:#ece7d6;
  --text:#1c1a14; --text-2:#2c2a20; --muted:#4a4636;
  --accent:#5f470e; --accent-ink:#ffffff;
  --brass:#8a6d1f; --brass-soft:#e4d6ac;
  --line:#d6cfb8; --focus:#0b3bff;
  --topbar-h:3rem;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#141310; --surface:#1e1c16; --panel:#26231b;
  --text:#f2ecdc; --text-2:#e4dcc8; --muted:#d3c9ae;
  --accent:#e0b84f; --accent-ink:#241a05;
  --brass:#e0b84f; --brass-soft:#3a3118;
  --line:#3a3527; --focus:#9db4ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
}
.wrap{max-width:44rem; margin-inline:auto; padding-inline:1.25rem}
.wide{max-width:62rem; margin-inline:auto; padding-inline:1.25rem}
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:2px}

/* House topbar: one line, sideways nav, sun/moon icon button. */
.topbar{
  position:sticky; top:0; z-index:50; min-height:var(--topbar-h);
  display:flex; align-items:center; gap:.75rem; padding:0 .9rem;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar .home{font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap; font-size:.95rem}
.topnav{display:flex; gap:1rem; overflow-x:auto; scrollbar-width:none; white-space:nowrap; font-size:.95rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--text-2); text-decoration:none}
.topnav a[aria-current="true"]{color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:4px}
.spacer{flex:1 1 auto}
.chip{
  border:1px solid var(--line); border-radius:999px; padding:.28rem .8rem;
  color:var(--text); text-decoration:none; font-size:.9rem; white-space:nowrap; min-height:44px;
  display:inline-flex; align-items:center;
}
.icon-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}

/* Reading rail: desktop orientation only. */
.rail{display:none}
@media (min-width:70rem){
  .rail{
    display:flex; flex-direction:column; gap:1.1rem;
    position:fixed; right:1.2rem; top:calc(var(--topbar-h) + 2rem); z-index:40;
  }
  .rail-dot{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--muted); font-size:.8rem}
  .rail-label{position:absolute; right:1.4rem; opacity:0; background:var(--surface); border:1px solid var(--line); padding:.1rem .5rem; border-radius:.4rem; white-space:nowrap}
  .rail-dot .dot{width:.7rem; height:.7rem; border-radius:50%; border:2px solid var(--muted); background:transparent}
  .rail-dot[aria-current="true"] .dot{background:var(--accent); border-color:var(--accent)}
  .rail-dot[aria-current="true"]{color:var(--accent)}
}

/* Hero: the question, the promise, the meridian motif. */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-rule{position:absolute; inset:auto 0 0 0; width:100%; height:120px; opacity:.5}
.hero-copy{position:relative; padding:3.2rem 0 2.6rem}
.kicker{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .6rem}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5.4vw,3.1rem); line-height:1.12; margin:0 0 1rem; max-width:20ch}
.deck{font-size:1.15rem; line-height:1.6; color:var(--text-2); max-width:36rem; margin:0 0 1.4rem}
.cta{
  display:inline-flex; align-items:center; gap:.5rem; min-height:48px;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  padding:.7rem 1.3rem; border-radius:.6rem; text-decoration:none;
}
.byline{font-size:.9rem; color:var(--muted); margin:1.2rem 0 0}
.byline a{color:inherit}
/* Subtle share line: byline-scale, muted, hidden until JS runs. */
.share-line{font-size:.9rem; color:var(--muted); margin:.4rem 0 0}
.share-line[hidden]{display:none}
.share-link{
  background:none; border:0; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
#shareNote{margin-left:.5rem}

/* Chapters. */
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}
.chapter{padding:2.6rem 0 0}
.chapter-head .kicker{margin-bottom:.4rem}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.25; margin:0 0 .8rem; max-width:26ch}
/* Section permalinks: real anchor links with a full touch target. */
.permalink{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; vertical-align:baseline;
  color:var(--muted); text-decoration:none; font-size:1.1rem;
}
.permalink:hover{color:var(--accent); text-decoration:underline}
.lede{font-size:1.12rem; color:var(--text-2); max-width:38rem}
p{max-width:42rem}

/* Calculator: the signature object. */
.calc{
  background:var(--surface); border:1px solid var(--line); border-radius:1rem;
  padding:1.25rem; margin-top:1.5rem;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
.calc > *{min-width:0}
@media (min-width:56rem){ .calc{grid-template-columns:minmax(0,5fr) minmax(0,6fr); padding:1.75rem} }
.calc-fig{margin:0}
.calc-fig svg{width:100%; height:auto; display:block}
.calc-fig figcaption{font-size:.9rem; color:var(--muted); margin-top:.6rem}
.strip-bg{fill:var(--panel); stroke:var(--line); stroke-width:1}
.strip-tick{stroke:var(--muted); stroke-width:1; opacity:.6}
.strip-tick-label{fill:var(--muted); font-size:13px; font-family:var(--mono)}
.strip-mid{stroke:var(--brass); stroke-width:2}
.city-dot{fill:var(--surface); stroke:var(--accent); stroke-width:2.5}
.city-dot.sel{fill:var(--accent)}
.city-label{fill:var(--text-2); font-size:13px}
.city-label.sel{fill:var(--text); font-weight:700}
.city-field{border:0; padding:0; margin:0 0 1rem}
.city-field legend{font-weight:700; padding:0; margin-bottom:.5rem}
.radio-row{display:flex; flex-wrap:wrap; gap:.6rem}
.radio-pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px; padding:.55rem 1rem; cursor:pointer; min-height:44px}
.radio-pill input{width:1.2rem; height:1.2rem; accent-color:var(--accent)}
.radio-pill:has(input:checked){border-color:var(--accent); background:var(--panel); font-weight:700}
.year-row{margin:0 0 .4rem}
.year-row label{font-weight:700; display:block; margin-bottom:.4rem}
.year-row output{font-family:var(--mono); font-weight:700; color:var(--accent)}
input[type="range"]{width:100%; min-height:44px; accent-color:var(--accent)}
.era-note{font-size:.9rem; color:var(--muted); margin:.2rem 0 0}
.calc-status{
  margin-top:1rem; border-left:4px solid var(--brass); background:var(--panel);
  padding:.8rem 1rem; border-radius:0 .6rem .6rem 0; min-height:3.5rem;
}
.calc-status p{margin:0}
.table-scroll{overflow-x:auto; margin-top:1rem}
.table-scroll:focus-visible{outline-offset:-2px}
.offset-table{width:100%; min-width:30rem; border-collapse:collapse; font-size:.98rem}
.offset-table caption{text-align:left; font-size:.9rem; color:var(--muted); padding-bottom:.4rem}
.offset-table th,.offset-table td{border-bottom:1px solid var(--line); padding:.5rem .4rem; text-align:left}
.offset-table th{font-family:var(--mono); font-weight:700}
.offset-table td.num{font-family:var(--mono)}
.schema-note{font-size:.9rem; color:var(--muted)}
.summary-box{border:1px dashed var(--line); border-radius:.8rem; padding:1.1rem 1.25rem; margin-top:1.5rem; background:var(--bg)}
.summary-box h3{font-family:var(--serif); margin:0 0 .5rem; font-size:1.2rem}
.summary-box p{margin:.4rem 0}

/* Fact beats. */
.beats{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.4rem; padding:0; list-style:none}
@media (min-width:56rem){ .beats{grid-template-columns:repeat(3,1fr)} }
.beat{background:var(--surface); border:1px solid var(--line); border-radius:.8rem; padding:1.1rem 1.2rem}
.beat h3{font-family:var(--serif); font-size:1.15rem; margin:0 0 .4rem}
.beat h3 .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border-radius:50%; margin-right:.5rem;
  background:var(--accent); color:var(--accent-ink); font-family:var(--sans); font-size:.95rem;
}
.beat p{margin:.3rem 0; font-size:1rem}
.limit-list{margin:1rem 0; padding-left:1.3rem}
.limit-list li{margin:.5rem 0; max-width:42rem}
.sources{margin:1rem 0 0; padding-left:1.3rem}
.sources li{margin:.6rem 0; max-width:44rem}
.sources a{color:var(--accent)}
footer{border-top:1px solid var(--line); margin-top:3rem; padding:1.6rem 0 3rem; color:var(--muted); font-size:.92rem}
footer a{color:inherit}

/* Motion: calm by default, drawn only when allowed. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  html.js .reveal.in{opacity:1; transform:none}
  .city-dot{transition:cx .45s ease}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}