/* Midsentence — shared styles for the guides/articles.
   Same tokens as about.html and the reading room: Spectral + Plex Mono,
   ink ground, ivory text, red pivot, amber for numbers. */
@font-face{ font-family:"Spectral"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/spectral-400.woff2") format("woff2"); }
@font-face{ font-family:"Spectral"; font-weight:400; font-style:italic; font-display:swap; src:url("/fonts/spectral-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Spectral"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/spectral-500.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/plexmono-400.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/plexmono-500.woff2") format("woff2"); }

:root{
  --ink:#171B29; --ink-deep:#10131E; --ivory:#F2EAD9; --amber:#E8A33D;
  --signal:#D6453D; --dim:#9AA0B8; --hair:rgba(242,234,217,.14); --hair-strong:rgba(242,234,217,.3);
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:"Spectral", Iowan Old Style, Charter, Georgia, serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
html{ background:var(--ink-deep); -webkit-text-size-adjust:100%; }
body{
  background:var(--ink-deep); color:var(--ivory); font-family:var(--serif); font-weight:400;
  font-size:clamp(17px, 1.1vw + 13px, 19px); line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--ivory); text-decoration:underline; text-decoration-color:var(--hair-strong); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover{ text-decoration-color:var(--ivory); }
em{ font-style:italic; }
strong{ font-weight:500; }

/* masthead — the reticle word, as on /about */
.masthead{
  background:radial-gradient(120% 80% at 50% 42%, #1E2333 0%, var(--ink) 45%, var(--ink-deep) 100%);
  display:grid; grid-template-rows:auto 1fr;
}
.masthead header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:max(20px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 20px max(22px, env(safe-area-inset-left));
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.masthead header a{ color:var(--dim); text-decoration:none; }
.masthead header a:hover{ color:var(--ivory); }
.reticle{ align-self:center; width:100%; display:grid; justify-items:center; padding:26px 16px 34px; }
.tick{ width:1px; height:14px; background:var(--hair); }
.bigword{
  font-weight:500; letter-spacing:-.01em; line-height:1.35;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline; width:100%; padding:14px 0; white-space:pre;
  font-size:clamp(34px, 8.4vw, 60px);
}
.bigword .pre{ justify-self:end; } .bigword .orp{ justify-self:center; color:var(--signal); } .bigword .post{ justify-self:start; }
.deck{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); text-align:center; margin-top:6px;
}

main{ max-width:34em; margin:0 auto; padding:40px max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); }
main.wide{ max-width:52em; }
h1.page{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,5.4vw,38px); line-height:1.2; margin:0 0 .6em; text-wrap:balance; }
.standfirst{ color:var(--dim); margin:0 0 1.6em; }
main > p{ margin:0 0 1.4em; }
section{ margin-top:64px; border-top:1px solid var(--hair); padding-top:18px; }
.eyebrow{ font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 14px; }
h2{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,4.6vw,30px); line-height:1.25; margin:0 0 .7em; text-wrap:balance; }
h3{ font-family:var(--serif); font-weight:500; font-size:clamp(18px,3.2vw,22px); line-height:1.3; margin:1.6em 0 .5em; }
section p{ margin:0 0 1.4em; }
ul, ol{ margin:0 0 1.4em 1.2em; } li{ margin:0 0 .6em; }
blockquote{ border-left:1px solid var(--hair-strong); padding-left:1.1em; margin:0 0 1.4em; color:var(--dim); font-style:italic; }
.wpm, .num{ font-family:var(--mono); font-size:.85em; color:var(--amber); font-variant-numeric:tabular-nums; }

/* pull-stat */
.stat{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:22px 0; margin:0 0 1.4em; text-align:center; }
.stat .big{ font-family:var(--mono); font-weight:500; font-size:clamp(30px,7vw,44px); color:var(--amber); font-variant-numeric:tabular-nums; line-height:1.1; }
.stat .cap{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-top:10px; line-height:1.9; }

/* the reading-time table */
.tablewrap{ overflow-x:auto; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:0 0 1.2em; }
table{ border-collapse:collapse; width:100%; font-family:var(--mono); font-size:12.5px; }
thead th{
  text-align:right; font-weight:500; color:var(--dim); text-transform:uppercase; letter-spacing:.12em;
  font-size:9.5px; padding:14px 10px; white-space:nowrap; border-bottom:1px solid var(--hair);
  cursor:pointer; user-select:none; background:var(--ink-deep); position:sticky; top:0;
}
thead th:first-child{ text-align:left; }
thead th:hover{ color:var(--ivory); }
thead th[aria-sort] .ar::after{ content:""; }
thead th[aria-sort="ascending"] .ar::after{ content:" ▲"; color:var(--amber); }
thead th[aria-sort="descending"] .ar::after{ content:" ▼"; color:var(--amber); }
tbody td{ text-align:right; padding:11px 10px; border-bottom:1px solid var(--hair-2, rgba(242,234,217,.06)); font-variant-numeric:tabular-nums; color:var(--dim); white-space:nowrap; }
tbody td:first-child{ text-align:left; white-space:normal; min-width:15em; }
tbody tr:hover td{ background:rgba(242,234,217,.03); }
tbody td .bk{ font-family:var(--serif); font-size:15px; color:var(--ivory); text-decoration:none; }
tbody td .bk:hover{ text-decoration:underline; text-decoration-color:var(--hair-strong); }
tbody td .by{ display:block; font-size:10px; letter-spacing:.06em; color:var(--dim); margin-top:2px; }
td.ours{ color:var(--amber); }
.tnote{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--dim); line-height:1.9; margin:0 0 1.4em; }

/* speed control for the table */
.speeds{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.speeds button{
  font:inherit; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); background:none;
  border:1px solid var(--hair); border-radius:5px; padding:7px 11px; cursor:pointer; transition:color .15s, border-color .15s;
}
.speeds button:hover{ color:var(--ivory); }
.speeds button[aria-pressed="true"]{ color:var(--ivory); border-color:rgba(232,163,61,.5); }

/* related links */
.related{ display:grid; gap:12px; margin:0 0 1.4em; }
.related a{
  display:block; border:1px solid var(--hair); border-radius:8px; padding:16px 18px; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.related a:hover{ border-color:var(--hair-strong); background:rgba(242,234,217,.02); }
.related .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px; }
.related .t{ font-family:var(--serif); font-size:18px; color:var(--ivory); line-height:1.3; display:block; }

.refs{ font-size:.86em; color:var(--dim); }
.refs li{ margin:0 0 .8em; }
.refs a{ color:var(--dim); }
.refs a:hover{ color:var(--ivory); }

.colophon{
  margin-top:88px; border-top:1px solid var(--hair); padding:26px 0 64px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); text-align:center; line-height:2.4;
}
.colophon a{ color:var(--dim); text-decoration:none; }
.colophon a:hover{ color:var(--ivory); }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }