/* ===========================================================================
   Shared stylesheet for the interior pages.

   The home page keeps its CSS inline because it is the one page that must
   render in a single request with nothing pending. The interior pages are
   read after arriving, so one cached stylesheet across four of them is the
   better trade: 6KB fetched once instead of 6KB repeated in every document.

   Tokens are copied from the home page rather than imported, because the home
   page must stay self-contained. If a colour changes there, change it here.
   =========================================================================== */
:root{
  --paper:#F6F4F0; --paper-alt:#EBE7DE; --field:#FFFFFF;
  --ink:#14161A; --ink-2:#4A4F55; --ink-3:#5F646A;
  --accent:#2E5248; --accent-tint:rgba(46,82,72,.12);
  --hair:#DCD8D1; --hair-2:#C8C4BC;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:0 40px}
.wrap.wide{max-width:1000px}

/* ── Masthead and footer, matching the home page's proportions ──────────── */
/* Comparison table. Answer engines lift tables intact — a labelled row is
   a self-contained fact — and a reader deciding between formats scans a
   table rather than reading paragraphs. It scrolls inside its own box on a
   phone rather than widening the page. */
/* ── Briefings ─────────────────────────────────────────────────────────
   A publication needs a visible date: it is what a reader checks first on
   anything about a field that moves monthly, and it is a freshness signal
   search engines read. */
.posted{font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px}
.standfirst{font-size:1.14rem; line-height:1.55; color:var(--ink-2); max-width:60ch; margin:0 0 20px}
.briefs{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--hair-2)}
.briefs li{padding:26px 0; border-bottom:1px solid var(--hair)}
.briefs h2{font-size:1.3rem; line-height:1.3; margin:0 0 8px; max-width:52ch; text-wrap:balance}
.briefs h2 a{text-decoration:none; color:var(--ink)}
.briefs h2 a:hover{color:var(--accent)}
.briefs p{margin:0; color:var(--ink-2); max-width:68ch}
.briefs .posted{margin:0 0 8px}

table.cmp{width:100%; border-collapse:collapse; margin:28px 0 8px; font-size:.97rem}
table.cmp th,table.cmp td{text-align:left; vertical-align:top; padding:14px 18px 14px 0; border-bottom:1px solid var(--hair)}
table.cmp th{font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); border-bottom-color:var(--hair-2)}
table.cmp td b{color:var(--ink)}
table.cmp td{color:var(--ink-2); line-height:1.5}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (max-width:680px){
  table.cmp{font-size:.9rem; min-width:560px}
  table.cmp th,table.cmp td{padding:11px 14px 11px 0}
}

.masthead{border-bottom:1px solid var(--hair-2); padding:26px 0; margin-bottom:64px}
/* 1000px, matching the home page. These were 1140 while the home page was
   narrowed to 1000, so the chrome visibly jumped wider the moment a reader
   clicked through from the home page to any interior one. */
.masthead .wrap{max-width:1000px; display:flex; justify-content:space-between; align-items:center; gap:20px}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none}
.mast-mark{width:23px; height:23px; display:block; flex:none}
.mark{font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; font-size:1.02rem}
.lockup:hover .mark{color:var(--accent)}
.masthead .place{font-size:.86rem; color:var(--ink-3)}

footer{border-top:1px solid var(--hair-2); margin-top:96px; padding:40px 0 64px; background:var(--paper-alt)}
footer .wrap{max-width:1000px}
footer nav{display:flex; flex-wrap:wrap; gap:0 26px; margin:0 0 18px}
footer nav a{font-size:.9rem; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--hair-2)}
footer nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
footer .colophon{font-size:.82rem; color:var(--ink-3); max-width:64ch; margin:0}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1{font-size:clamp(2.1rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.024em; margin:0 0 26px; max-width:22ch; text-wrap:balance}
h2{font-size:clamp(1.4rem,2.4vw,1.75rem); line-height:1.18; letter-spacing:-.018em; margin:56px 0 20px; max-width:30ch}
h3{font-size:1.06rem; line-height:1.35; letter-spacing:-.008em; margin:34px 0 10px}
p{margin:0 0 22px; max-width:66ch}
.lead{font-size:1.16rem; line-height:1.55; color:var(--ink-2); max-width:60ch; margin-bottom:34px}
a{color:var(--accent)}
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 16px;
}
strong{font-weight:600}
hr{border:0; border-top:1px solid var(--hair); margin:52px 0}

/* ── The one call to action ─────────────────────────────────────────────── */
.cta{
  display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none;
  font-size:1rem; font-weight:500; padding:15px 30px; border-radius:2px; margin:8px 0 6px;
}
.cta:hover{background:var(--accent)}
.cta-note{font-size:.9rem; color:var(--ink-3); max-width:52ch}

/* ── Question and answer blocks. The shape both a reader and a language
      model want: the question as a heading, the answer immediately under it,
      the first sentence complete on its own. ─────────────────────────────── */
.qa{border-top:1px solid var(--hair); padding:26px 0 4px}
.qa h3{margin:0 0 10px; font-size:1.08rem; font-weight:600}
.qa p{margin:0 0 14px; color:var(--ink-2)}
.qa p:first-of-type{color:var(--ink)}

/* ── Glossary ───────────────────────────────────────────────────────────── */
.terms{margin:0; padding:0}
.terms .term{border-top:1px solid var(--hair); padding:26px 0 6px}
.terms dt{font-weight:600; font-size:1.08rem; margin:0 0 4px}
.terms .said{font-size:.84rem; color:var(--ink-3); margin:0 0 10px}
.terms dd{margin:0 0 12px; color:var(--ink-2); max-width:66ch}
.terms .ask{color:var(--accent); font-size:.95rem}

/* ── Numbered and plain lists ───────────────────────────────────────────── */
ul.plain{list-style:none; padding:0; margin:0 0 26px; max-width:66ch}
ul.plain li{border-top:1px solid var(--hair); padding:16px 0; color:var(--ink-2)}
ul.plain li b{color:var(--ink); font-weight:600}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.crumbs{font-size:.84rem; color:var(--ink-3); margin:0 0 26px}
.crumbs a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--hair-2)}
.crumbs a:hover{color:var(--accent)}

/* ── Closing panel ──────────────────────────────────────────────────────── */
.close{background:var(--paper-alt); border-top:1px solid var(--hair-2); margin-top:72px; padding:56px 0}
.close .wrap{max-width:820px}
.close h2{margin-top:0}

@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  .masthead{margin-bottom:44px; padding:20px 0}
  h2{margin-top:44px}
}