/* The Journal — the reading surface, not the instrument.

   The app is an instrument panel and commits to a dark theme first. A journal
   is a document, so this one commits the other way: paper first, night as the
   alternative. Same palette as app.css so the two never look like different
   products, but the type is set for prose — one column, a real measure, and
   the serif the app reserves for "the old sky".

   Written as one small stylesheet shared by every page, so a reader who opens
   a second article pays nothing for it. No webfont, no CDN, nothing that can
   block the first paint or leak a request to another origin — the same rule
   the app holds itself to. */

:root{
  --bg:#EFEDE6; --panel:#FFFFFF; --panel2:#F4F2EC;
  --line:#E2DED4; --line2:#CFC9BB;
  --text:#1A1F26; --muted:#3A424E; --faint:#5C6474;
  --moon:#2E4257; --moon-deep:#385069;
  --amber:#8A5A12; --green:#2F5C39; --rose:#9E4F5B;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --measure:34rem;
  color-scheme:light;
}
/* Two ways in, and the explicit one has to win in both directions: the system
   preference is the default, and `data-theme` is what the toggle stamps. A
   reader who chose day on a phone set to dark must get day. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="day"]){
    --bg:#05070A; --panel:#10141C; --panel2:#141A24;
    --line:#1E2530; --line2:#2A3442;
    --text:#DCE3EC; --muted:#96A2B2; --faint:#7A8698;
    --moon:#D6E6F7; --moon-deep:#9FB8D4;
    --amber:#E0A85C; --green:#84BE8B; --rose:#D194A0;
    color-scheme:dark;
  }
}
:root[data-theme="night"]{
  --bg:#05070A; --panel:#10141C; --panel2:#141A24;
  --line:#1E2530; --line2:#2A3442;
  --text:#DCE3EC; --muted:#96A2B2; --faint:#7A8698;
  --moon:#D6E6F7; --moon-deep:#9FB8D4;
  --amber:#E0A85C; --green:#84BE8B; --rose:#D194A0;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.68 var(--serif);
  padding:0 20px 80px;
  overflow-wrap:break-word;
}
.wrap{max-width:var(--measure); margin:0 auto;}

/* ── masthead ── */
.top{
  max-width:var(--measure); margin:0 auto; padding:20px 0 0;
  display:flex; align-items:center; gap:14px;
}
.brand{
  font:600 14px/1 var(--sans); letter-spacing:.02em;
  color:var(--text); text-decoration:none; margin-right:auto;
}
.brand b{font-weight:600; color:var(--moon);}
.brand .kick{
  display:block; font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:4px;
}
.top a.nav{font:500 13px/1 var(--sans); color:var(--muted); text-decoration:none;}
.top a.nav:hover{color:var(--text);}
#theme{
  background:none; border:none; cursor:pointer; padding:6px;
  font:400 15px/1 var(--sans); color:var(--muted);
}

/* ── article head ── */
.eyebrow{
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:38px 0 14px;
}
h1{
  font:600 30px/1.2 var(--sans); letter-spacing:-.02em;
  margin:0 0 14px; color:var(--text);
}
.standfirst{
  font:400 19px/1.55 var(--serif); color:var(--muted); margin:0 0 18px;
}
.meta{
  font:400 12px/1.5 var(--sans); color:var(--faint);
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:26px;
}

/* ── prose ── */
article h2{
  font:600 21px/1.3 var(--sans); letter-spacing:-.01em;
  margin:38px 0 12px; color:var(--text);
}
article h3{
  font:600 16px/1.35 var(--sans); margin:28px 0 8px; color:var(--text);
}
article p{margin:0 0 18px;}
article a{color:var(--moon-deep); text-decoration:underline; text-underline-offset:2px;}
article a:hover{color:var(--moon);}
article b,article strong{font-weight:600; color:var(--text);}
article ul,article ol{margin:0 0 18px; padding-left:22px;}
article li{margin-bottom:8px;}
article blockquote{
  margin:24px 0; padding:2px 0 2px 18px;
  border-left:2px solid var(--line2); color:var(--muted); font-style:italic;
}
article code{
  font:400 .87em/1.4 var(--mono); background:var(--panel2);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
article hr{border:none; border-top:1px solid var(--line); margin:34px 0;}
article img{max-width:100%; height:auto;}

/* A table is the one thing on this page that can be wider than the measure,
   so it gets its own scroller. The body must never scroll sideways. */
.tablewrap{overflow-x:auto; margin:0 0 22px; -webkit-overflow-scrolling:touch;}
table{border-collapse:collapse; width:100%; font:400 14px/1.5 var(--sans);}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-weight:600; color:var(--muted); white-space:nowrap;}

/* ── the data blocks on a reference page ── */
.facts{
  margin:0 0 26px; padding:0; border:1px solid var(--line);
  border-radius:12px; background:var(--panel2); overflow:hidden;
}
.facts div{
  display:flex; gap:14px; padding:10px 14px;
  border-top:1px solid var(--line); font:400 14px/1.5 var(--sans);
}
.facts div:first-child{border-top:none;}
.facts dt{flex:none; width:8.5rem; color:var(--faint); font-weight:500; margin:0;}
.facts dd{margin:0; color:var(--text);}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px;}
.chip{
  font:500 12px/1 var(--sans); padding:6px 10px; border-radius:999px;
  border:1px solid var(--line2); color:var(--muted); text-decoration:none;
}
a.chip:hover{color:var(--text); border-color:var(--moon-deep);}

/* ── the index ── */
.section{
  font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:40px 0 4px;
}
.list{list-style:none; margin:0; padding:0;}
.list li{border-top:1px solid var(--line); margin:0;}
.list a{
  display:block; padding:16px 0; text-decoration:none; color:var(--text);
}
.list a b{display:block; font:600 17px/1.35 var(--sans); margin-bottom:4px;}
.list a span{display:block; font:400 14.5px/1.5 var(--serif); color:var(--muted);}
.list a:hover b{color:var(--moon-deep);}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:8px; margin:10px 0 0;
}
.grid a{
  display:block; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); text-decoration:none;
  font:600 14px/1.3 var(--sans); color:var(--text);
}
.grid a span{
  display:block; font:400 12px/1.4 var(--sans); color:var(--faint); margin-top:3px;
}
.grid a:hover{border-color:var(--moon-deep);}

/* ── the one call to action ──
   One per page, at the end, never in the middle of a sentence. The Journal is
   not a funnel with paragraphs around it. */
.cta{
  margin:44px 0 0; padding:22px; border:1px solid var(--line2); border-radius:14px;
  background:var(--panel);
}
.cta b{display:block; font:600 17px/1.35 var(--sans); margin-bottom:6px;}
.cta p{font:400 14.5px/1.6 var(--serif); color:var(--muted); margin:0 0 16px;}
.cta a{
  display:inline-block; padding:11px 18px; border-radius:10px;
  background:var(--moon); color:var(--bg);
  font:600 14px/1 var(--sans); text-decoration:none;
}
.cta a:hover{opacity:.9;}

.foot{
  max-width:var(--measure); margin:56px auto 0; padding-top:22px;
  border-top:1px solid var(--line);
  font:400 12.5px/1.7 var(--sans); color:var(--faint);
}
.foot a{color:var(--muted);}
.foot p{margin:0 0 8px;}

.pager{
  display:flex; gap:14px; justify-content:space-between;
  margin:40px 0 0; font:500 13.5px/1.4 var(--sans);
}
.pager a{color:var(--muted); text-decoration:none; max-width:48%;}
.pager a:hover{color:var(--text);}
.pager .nxt{text-align:right; margin-left:auto;}

@media (max-width:420px){
  body{font-size:16.5px; padding:0 16px 60px;}
  h1{font-size:26px;}
  .facts dt{width:7rem;}
}