/* ============================================================
   Research Agenda - approved polish layer.
   The subset of the redesign preview signed off via Vercel
   comments (24 August 2026), loaded AFTER each page's own
   styles so every rule here deliberately overrides.
   ============================================================ */

:root {
  --meta-s: 10px;
  --meta-m: 12.5px; /* dates read a touch bigger - Mark's call */
  --ink-reading: #1D242B;
  --bar-paper: #F6F7F4;
  --bar-ink-2: #A6ADB4;
}
:root[data-theme="dark"] { --ink-reading: #D5DAD9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-reading: #D5DAD9; }
}

/* selecting text is lime everywhere, not just the front page */
::selection { background: var(--sky, #C9F73A); color: #14161A; }

/* ---- one micro-motion grammar + the signature headline hover ---- */
a, button, .btn, .share-chip, .tagrow a, .sec-link, .hald-link, .nug-read,
.netlink, .nw-search-btn, .theme-toggle, .rr-item a, .more-wire a, .hm-row {
  transition: color 140ms ease-out, background-color 140ms ease-out,
              border-color 140ms ease-out, text-decoration-color 140ms ease-out,
              text-decoration-thickness 140ms ease-out;
}
article h1 a, .lead h3 a, .also article h4 a, .wm-card h4 a, .essay-lead h3 a,
.essay-rail h3 a, .nug h3 a, .hm-row .hm-t, .topic-story .th a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
article h1 a:hover, .lead h3 a:hover, .also article h4 a:hover, .wm-card h4 a:hover,
.essay-lead h3 a:hover, .essay-rail h3 a:hover, .nug h3 a:hover,
a.hm-row:hover .hm-t, .topic-story .th a:hover {
  text-decoration-color: var(--sky, #C9F73A);
}
@media (prefers-reduced-motion: reduce) {
  a, button, .btn, .share-chip { transition: none; }
}

/* ---- caps get one job: desk eyebrows. Dates, bylines, sources and
        action links demote to sentence case ---- */
.bl, .also article .bl, .wm-card .bl, .card-foot .bl, .hm-d, .tm,
.hald-meta, .hald-tip, .essay-lead > .kicker,
.lead .byline, .essay-byline, .rr-item .by,
.meta-strip, .meta-strip span, .by-rail .by-meta, .dateline, .lead-cap,
.mw-m, .rr-diary .d {
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--archivo, 'National 2', 'Hanken Grotesk', sans-serif);
}
.sec-link, .hald-link, .nug-read, .read-on {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 700;
}
.bl, .also article .bl, .wm-card .bl, .card-foot .bl, .hm-d, .tm,
.rr-item .by, .mw-m, .lead-cap, .lead .byline,
.essay-byline, .hald-tip, .rr-diary .d { font-size: var(--meta-m); }
/* the Haldane desk sits like the essay desk: dates take the kicker
   treatment and the band keeps the house distance below its rule */
.hald-meta { font-weight: 700; font-size: 11px; margin-bottom: 12px; }
.hald-band { padding-top: 0; }
.dateline, .meta-strip { font-size: var(--meta-m); }
.rr-diary .date-cell, .numbox { font-family: var(--mono, 'Martian Mono', monospace); }
/* archive dates take the reading-room sources treatment, not the machine mono */
.list-item .dt {
  font-family: var(--archivo, 'National 2', 'Hanken Grotesk', sans-serif);
  font-size: var(--meta-m);
  letter-spacing: 0.01em;
}

/* ---- chips mark exceptions only ---- */
.src-tag { background: none !important; padding: 0 !important; }
.news-chip { display: none; }

/* ---- the radiating dots become the house lime square ---- */
.dateline .free i, .sitenote__tag .d, .ticker .dot {
  animation: none !important;
  box-shadow: none;
  border-radius: 0;
  background: var(--sky, #C9F73A);
}
.meta-strip .dot { border-radius: 0; background: var(--sky, #C9F73A); }

/* ---- article pages: broadsheet setting ---- */
article p { font-size: 18px; line-height: 1.6; max-width: 620px; color: var(--ink-reading); }
article p.standfirst { max-width: 600px; text-wrap: pretty; }
article h1 { text-wrap: balance; }
[data-theme="dark"] article p { color: var(--ink-reading); }
article p a {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--azure-deep, #067647) 45%, transparent);
}
article p a:hover { text-decoration-color: var(--azure-deep, #067647); }

/* quotes take the book indent - body-size italic, azure marks, white
   space instead of furniture. The lime strip goes back to being the
   standfirst's alone. */
.pullquote {
  margin: 38px 0 38px 30px;
  padding: 0;
  border-left: 0;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.55;
}
.pullquote .pq-mark { color: var(--azure-deep, #067647); }

/* the drop cap earns its three lines */
.by-rail + p::first-letter, article p.opener::first-letter {
  font-family: 'Tiempos Headline', 'Tiempos Text', Georgia, serif;
  font-weight: 600;
  font-size: 97px;
  line-height: 0.76;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--ink, #14161A);
}
p[data-cap="A"]::first-letter, p[data-cap="W"]::first-letter, p[data-cap="V"]::first-letter { padding-right: 6px; }

/* the by-rail joins the rule family */
.by-rail { border-top: 3px solid var(--ink, #14161A); position: relative; }
.by-rail::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--azure, #0B9E5B); }
.by-rail .by-name, .by-rail .by-role { text-wrap: balance; }
@media (min-width: 1160px) { .by-rail { margin-top: -3px; } }

/* every finished piece signs off with the house point */
.endmark, .endmark-sq {
  display: inline-block;
  width: 0.44em; height: 0.44em;
  background: var(--sky, #C9F73A);
  border-radius: 0;
  margin-left: 0.28em;
  vertical-align: 0.02em;
  color: transparent;
  overflow: hidden;
}

/* ---- the essay desk: lead + rail on the shared grid ---- */
.essay-band { display: grid; grid-template-columns: 1.62fr minmax(0, 1fr); gap: 44px; }
.essay-band .essay-lead { max-width: none; }
.essay-rail { border-left: 1px solid var(--line, #E2E4E7); padding-left: 34px; align-self: start; }
.essay-rail .essay-card { border-top: 1px solid var(--line, #E2E4E7); padding: 14px 0 16px; background: none; margin: 0; }
.essay-rail .essay-card:first-child { border-top: 0; padding-top: 2px; }
.essay-rail h3 { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 5px; }
.essay-rail h3 a { color: var(--ink, #14161A); text-decoration: none; }
.essay-rail h3 a:hover { color: var(--azure-deep, #067647); }
@media (max-width: 900px) {
  .essay-band { grid-template-columns: 1fr; gap: 26px; }
  .essay-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line, #E2E4E7); padding-top: 16px; }
}

/* ---- the search overlay works on every page site.js injects it into -
        the canonical copy of styles some pages carried locally ---- */
.nw-search-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: rgba(246,247,244,0.85); font-family: 'National 2', 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 6px 9px; border-radius: 8px; }
.nw-search-btn:hover { background: rgba(246,247,244,0.1); color: #fff; }
.nw-search { position: fixed; inset: 0; background: rgba(10,12,14,0.55); display: none; z-index: 200; padding: 9vh 16px 16px; }
.nw-search.open { display: flex; justify-content: center; align-items: flex-start; }
.nw-search-box { width: 640px; max-width: 100%; background: var(--card, #FFFFFF); border: 1px solid var(--line, #E2E4E7); border-top: 3px solid var(--sky, #C9F73A); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); }
.nw-search-row { display: flex; align-items: center; }
.nw-search-box input { flex: 1; font-family: 'National 2', 'Hanken Grotesk', sans-serif; font-size: 17px; padding: 16px 18px; border: 0; background: transparent; color: var(--ink, #14161A); outline: none; }
.nw-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nw-search-close { background: none; border: 0; font-size: 26px; color: var(--ink-2, #454B52); cursor: pointer; padding: 0 16px; }
.nw-search-results { max-height: 55vh; overflow-y: auto; border-top: 1px solid var(--line, #E2E4E7); }
.nw-hit { display: block; padding: 12px 18px; text-decoration: none; border-bottom: 1px solid var(--line, #E2E4E7); }
.nw-hit:hover { background: var(--tint, #EDFBD8); }
.nw-hit-t { display: block; font-family: 'National 2', 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink, #14161A); line-height: 1.35; }
.nw-hit-m { display: block; margin-top: 3px; font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2, #454B52); }
.nw-hit-none { padding: 18px; font-family: 'National 2', 'Hanken Grotesk', sans-serif; font-size: 14px; color: var(--ink-2, #454B52); }
.nw-search-hint { padding: 10px 18px; font-family: 'Martian Mono', monospace; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2, #454B52); opacity: 0.7; border-top: 1px solid var(--line, #E2E4E7); }

/* ---- the theme toggle is a real control ---- */
.theme-toggle { position: relative; }
.theme-toggle::after { content: ''; position: absolute; inset: -8px; }
.theme-toggle svg { display: block; }

/* ---- the network bar on a phone: one line, nothing wraps ---- */
@media (max-width: 700px) {
  .netbar__in { padding: 0 14px; }
  .ticker { display: none; }
  .netbtn .nb-from { display: none; }
  .netbtn, .netlink, .netreg, .nw-search-btn { white-space: nowrap; }
  .netbtn { gap: 7px; }
  .netright { gap: 0; }
  .netlink { padding: 12px 7px; }
  .netreg { padding: 6px 7px; }
  .nw-search-btn { font-size: 0; gap: 0; padding: 6px 8px; }
  .nw-search-btn svg { width: 15px; height: 15px; }
}
@media (max-width: 520px) {
  .netright a.netlink[href$="about.html"] { display: none; }
}

/* ---- essays on one column: one rule between standfirst and byline,
        and the standfirst strip bleeds off the edge so the text stays
        flush with everything else ---- */
@media (max-width: 1159px) {
  article .art-rule:has(+ .by-rail) { display: none; }
  article .standfirst + .art-rule + .by-rail { margin-top: 24px; }
}
@media (max-width: 700px) {
  /* article pages only - the homepage excerpts stay flush */
  article.wrap .standfirst { margin-left: -24px; padding-left: 20px; }
}

/* ---- one newspaper footer ---- */
footer .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px 40px; padding: 34px 24px 26px; max-width: 1120px; margin: 0 auto; }
@media (max-width: 860px) { footer .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer .foot-grid { grid-template-columns: 1fr; } }
footer .foot-col h4 { font-family: var(--mono, monospace); font-weight: 400; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bar-ink-2); margin: 0 0 8px; }
footer nav.foot-col { display: flex; flex-direction: column; gap: 5px; }
footer .foot-col a { color: var(--bar-paper); text-decoration: none; font-size: 13.5px; }
footer .foot-col a:hover { color: var(--sky, #C9F73A); }
footer .foot-col p { font-size: 13.5px; line-height: 1.7; margin: 0; color: rgba(246,247,244,0.8); }
footer .foot-legal { max-width: 1120px; margin: 0 auto; padding: 14px 24px 30px; border-top: 1px solid rgba(246,247,244,0.14); }
footer .foot-legal p { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.03em; color: var(--bar-ink-2); margin: 0; }

/* fixed-dark chrome stays legible in dark mode (the footer needs it) */
footer, footer p { color: rgba(246, 247, 244, 0.85); }
footer .foot-col a, footer .legal a { color: var(--bar-paper); }
.family-row .thesis-wm { color: var(--bar-paper); }
.fb-btn { background: #14161A; color: #F6F7F4; }
.fb-btn:hover { color: #C9F73A; }

/* a headline without a story is text, not a dead link */
.nolink { color: inherit; }

/* ---- 4.6 the invisible millimetres: hit areas and hover intent ---- */
.share-chip { position: relative; }
.share-chip::after { content: ''; position: absolute; inset: -9px 0; }
[data-share-copy] { min-width: 92px; text-align: center; }
.ticker:hover .track, .ticker:focus-within .track { animation-play-state: paused; }

/* one true pricing line */
.lanes-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-2, #454B52); }