/* The policy pages.
 *
 * One stylesheet rather than four copies of one: these pages are read rarely
 * and changed together, which is the case where a shared file earns its keep.
 * Tokens are the front door's, so a policy looks like the place it governs
 * instead of like something bolted on from a template.
 */

:root{
  --paper:#efe7d8; --paper-2:#e6dccb; --ink:#1d1712; --ink-soft:#5e5348;
  --rule:#c9bda6; --accent:#9c3520; --accent-2:#2f5d54; --gold:#b08343;
  --shadow:rgba(29,23,18,.18);
  --red:#9c3520; --cream:#f3ead9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --paper:#14110e; --paper-2:#1c1815; --ink:#ece2d0; --ink-soft:#a2957f;
    --rule:#3b332a; --accent:#d4634a; --accent-2:#6aa294; --gold:#c99a52;
    --shadow:rgba(0,0,0,.55); --red:#511a0d; --cream:#e2d4bb;
  }
}
:root[data-theme=dark]{
  --paper:#14110e; --paper-2:#1c1815; --ink:#ece2d0; --ink-soft:#a2957f;
  --rule:#3b332a; --accent:#d4634a; --accent-2:#6aa294; --gold:#c99a52;
  --shadow:rgba(0,0,0,.55); --red:#511a0d; --cream:#e2d4bb;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Newsreader',Georgia,serif; font-size:17px; line-height:1.62;
  font-optical-sizing:auto;
}

/* ── masthead ───────────────────────────────────────── */
.masthead{background:var(--red); padding:18px 0 20px}
.masthead .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.wordmark{
  font-family:'Fraunces',serif; font-size:26px; letter-spacing:-.01em;
  text-decoration:none; color:var(--cream);
  display:inline-flex; align-items:center; line-height:1;
}
.wm-a{font-style:italic;font-weight:560}
.wm-b{font-weight:400;color:#d4634a}
.caret{
  width:.14em; height:1.42em; background:#d4634a; border-radius:.06em;
  margin:0 .2em; flex:none;
}
.masthead .spacer{flex:1}
.masthead a.back{
  font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream); text-decoration:none;
  opacity:.82; border-bottom:1px solid rgba(243,234,217,.35); padding-bottom:2px;
}
.masthead a.back:hover{opacity:1}

.wrap{max-width:720px; margin:0 auto; padding:0 24px}

/* ── the document ───────────────────────────────────── */
main{padding:52px 0 20px}
.eyebrow{
  font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
}
h1{
  font-family:'Fraunces',serif; font-weight:800; font-size:clamp(30px,6.6vw,44px);
  line-height:1.08; letter-spacing:-.015em; margin:0 0 14px;
}
.standfirst{font-size:19px; color:var(--ink-soft); margin:0 0 6px; line-height:1.55}
.dateline{
  font-family:'Fragment Mono',monospace; font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft); margin:22px 0 0; padding-top:16px;
  border-top:1px solid var(--rule);
}

/* The short version. Every page opens with one, because a policy nobody
   finishes is a policy nobody agreed to in any meaningful sense. */
.short{
  background:var(--paper-2); border:1px solid var(--rule); border-left:3px solid var(--accent);
  padding:22px 24px 6px; margin:34px 0 42px; border-radius:2px;
}
.short h2{
  font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px; font-weight:400;
}
.short ul{margin:0; padding-left:20px}
.short li{margin:0 0 10px}

h2{
  font-family:'Fraunces',serif; font-weight:700; font-size:24px; letter-spacing:-.01em;
  margin:44px 0 4px; line-height:1.2;
}
h2 .num{
  font-family:'Fragment Mono',monospace; font-size:12px; letter-spacing:.12em;
  color:var(--accent); display:block; margin-bottom:9px; font-weight:400;
}
h3{font-family:'Fraunces',serif; font-weight:600; font-size:18px; margin:30px 0 2px}
p{margin:14px 0}
ul,ol{margin:14px 0; padding-left:22px}
li{margin:0 0 9px}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--ink)}
strong{font-weight:640}
.quiet{color:var(--ink-soft)}

/* A table only where one genuinely helps: cookies, and who gets what. */
.table-scroll{overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
th{
  font-family:'Fragment Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:400;
}
td code{font-family:'Fragment Mono',monospace; font-size:12.5px}

.note{
  border-left:2px solid var(--rule); padding:2px 0 2px 18px; margin:22px 0;
  color:var(--ink-soft); font-size:16px;
}

/* ── the other three ────────────────────────────────── */
.siblings{
  margin:56px 0 0; padding-top:26px; border-top:1px solid var(--rule);
  display:flex; gap:10px 26px; flex-wrap:wrap;
}
.siblings a{
  font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}

footer{
  margin-top:54px; padding:26px 0 46px; border-top:1px solid var(--rule);
  font-size:14px; color:var(--ink-soft);
}
footer p{margin:6px 0}

@media (max-width:560px){
  body{font-size:16px}
  main{padding:38px 0 16px}
  .short{padding:18px 18px 4px}
}

/* ── the blog ────────────────────────────────────────────────────────────────
   Same paper and ink as the policy pages, a wider measure for reading, and
   room for figures. Articles are long-form, so the vertical rhythm is looser
   than a policy page and the type is a size up.
*/
.post-wrap{max-width:760px}
.post-meta{
  font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:18px 0 0;
  display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center;
}
.post-meta .dot{opacity:.45}
article{font-size:18px; line-height:1.72}
article h2{font-size:26px; margin:46px 0 6px}
article h3{font-size:19px; margin:32px 0 2px}
article p{margin:16px 0}
article ul,article ol{margin:16px 0; padding-left:24px}
article li{margin:0 0 10px}
article blockquote{
  margin:26px 0; padding:2px 0 2px 22px; border-left:2px solid var(--accent);
  font-style:italic; color:var(--ink-soft);
}
article table{font-size:15.5px}
article figure{margin:30px 0}
article figcaption{
  font-size:14px; color:var(--ink-soft); margin-top:10px; line-height:1.5;
}

/* Charts are inline SVG rather than images: a crawler reads the numbers, a
   screen reader reads the title and description, and nothing 404s.

   Text inside the SVG is filled with currentColor rather than a custom
   property. Both work, but currentColor inherits the way ordinary text does,
   so a label can never end up painted the browser's default black on a dark
   panel if a variable fails to resolve. Hierarchy comes from opacity rather
   than from a second colour, which keeps the contrast predictable in both
   themes. */
.chart{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:2px;
  padding:22px 20px 16px; margin:0; color:var(--ink);
}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .cg{stroke:currentColor; opacity:.22; stroke-width:1}
.chart .cl{fill:currentColor; opacity:.78; font-family:'Fragment Mono',monospace; font-size:12px; letter-spacing:.04em}
.chart .cv{fill:currentColor; font-family:'Fragment Mono',monospace; font-size:12.5px}
.chart .cline{fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.chart .carea{fill:var(--accent); opacity:.12}
.chart .cbar{fill:var(--accent)}
.chart .cbar.alt{fill:var(--accent-2)}
.chart-title{
  font-family:'Fragment Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px;
}
/* A legend above the plot, so a series is named without a label having to sit
   on top of the line it names. */
.chart-key{
  display:flex; gap:8px 20px; flex-wrap:wrap; margin:0 0 14px;
  font-family:'Fragment Mono',monospace; font-size:11px; color:var(--ink);
}
.chart-key span{display:inline-flex; align-items:center; gap:7px}
.chart-key i{width:16px; height:0; border-top:3px solid var(--accent); display:inline-block}
.chart-key i.dash{border-top:3px dashed var(--accent-2)}

/* ── the index ─────────────────────────────────────────────────────────────── */
.post-list{margin:38px 0 0; padding:0; list-style:none}
.post-list li{
  margin:0; padding:26px 0; border-top:1px solid var(--rule);
}
.post-list li:last-child{border-bottom:1px solid var(--rule)}
.post-list h2{font-family:'Fraunces',serif; font-size:23px; font-weight:700; margin:0 0 8px; line-height:1.25}
.post-list h2 a{text-decoration:none}
.post-list h2 a:hover{text-decoration:underline; text-underline-offset:3px}
.post-list p{margin:0; color:var(--ink-soft); font-size:16.5px}
.post-list .kicker{
  font-family:'Fragment Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px;
}
.more-posts{
  margin:56px 0 0; padding-top:26px; border-top:1px solid var(--rule);
}
.more-posts h2{font-family:'Fragment Mono',monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 16px; font-weight:400}
.more-posts ul{margin:0; padding-left:20px}
.more-posts li{margin:0 0 9px}

@media (max-width:560px){
  article{font-size:17px}
  article h2{font-size:23px}
}