/* Human Terms. One stylesheet for the whole site.

   The site should feel like a letter from a person who reads the news so you
   don't have to: uncoated paper, one typeface, blue-black ink, nothing shouting.
   Every page in site/ links this file, so a design change happens here and only here.

   The rules:
   - One voice. Alegreya for reading, Alegreya Sans for the small print and for charts.
     No monospace, no tracked-out capitals.
   - Blue-black ink is the only colour that means anything. Rust is for cautionary
     chart bars and nothing else. Plum marks the Technical layer.
   - Words never move. The one thing that moves is the daylight behind the page, and
     chart bars fill once.
   - Contrast is gated by tools/check_contrast.py. If a token changes here, change it
     there too or the gate passes on stale values. */

:root {
  --paper: #ECEAE4;       /* uncoated stock, the page */
  --surface: #F3F1EC;     /* the light falling on it, and the odd inset */
  --ink: #1F2023;         /* text */
  --ink-soft: #55565A;    /* the small print */
  --line: #D5D2CA;        /* decorative hairline */
  --line-strong: #84837E; /* anything you can interact with */
  --accent: #27405F;      /* blue-black ink: links, chart bars */
  --accent-deep: #162A44; /* link hover */
  --caution: #A5502F;     /* cautionary chart bars only */
  --tech: #5A4778;        /* the Technical layer */
  --track: #DCD9D1;       /* the empty part of a chart bar */
  --bar-muted: #77787C;   /* comparison bars */

  --serif: "Alegreya", Georgia, "Iowan Old Style", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --read: 1.22rem;        /* Alegreya runs small, so the body is set larger */
  --small: .95rem;        /* sans, for labels and notes */
  --margin: 11.5rem;      /* the wide left margin that dates and labels hang in */
  --gutter: 1.25rem;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--serif); font-size: var(--read);
  line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-deep); }

.wrap { max-width: calc(36rem + var(--margin) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 60rem) { .wrap { padding-left: calc(var(--gutter) + var(--margin)); } }

/* ---- accessibility furniture ---- */
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper);
  font-family: var(--sans); padding: .6rem 1rem; text-decoration: none; }
.skip:focus { left: 0; color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- daylight ----
   Four soft panes of window light lying across the paper, moving about as fast as
   the sun does. It sits behind everything and only ever lightens the page, so it
   cannot lower text contrast. It stops dead under reduced motion. */
.daylight { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.daylight::before {
  content: ""; position: absolute; top: -18vh; left: 34vw; width: 62vmax; height: 84vmax;
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--surface), var(--surface)),
                    linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--surface), var(--surface));
  background-size: 47.5% 47.5%; background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  filter: blur(34px); opacity: .9; will-change: transform;
  transform: rotate(14deg) skewX(-12deg);
  animation: daylight 210s ease-in-out infinite alternate;
}
@keyframes daylight {
  from { transform: translate3d(0, 0, 0) rotate(14deg) skewX(-12deg); }
  to   { transform: translate3d(-22vw, 9vh, 0) rotate(14deg) skewX(-17deg); }
}

/* ---- masthead ---- */
header.mast { padding: 1.6rem 0 0; }
.mast-in { max-width: calc(36rem + var(--margin) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.brand { color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.mast-right { display: flex; align-items: baseline; gap: 1.1rem; font-family: var(--sans); font-size: var(--small); }
.mast-right a { color: var(--ink-soft); }
.mast-right a:hover { color: var(--ink); }
.mode { display: inline-flex; gap: .7rem; }
.mode button { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: .2rem 0; cursor: pointer;
  border-bottom: 1px solid transparent; }
.mode button:hover { color: var(--ink); }
.mode button.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- the small line that says what you are looking at ---- */
.dateline, .code, .microcopy, .bh-fallback, .fig-note, .attrib, .colophon {
  font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); line-height: 1.4;
}

/* ---- landing: the note ---- */
.note { padding: clamp(3rem, 11vh, 6rem) 0 clamp(2.5rem, 7vh, 4rem); }
h1 { font-weight: 500; font-size: clamp(1.8rem, 1.5rem + 1.3vw, 2.3rem); line-height: 1.16; letter-spacing: -.005em;
  margin: 0 0 1.1rem; text-wrap: balance; }
.note h1 { max-width: 25ch; margin-bottom: 1.5rem; }

/* ---- signup ----
   The form is a Beehiiv iframe, so we can't style its insides from here, but we can
   treat the picture of it: grayscale drops the teal button, multiply lets the paper
   through its white field. The form's own border gives the field its visible edge. */
.signup { margin-top: 2.2rem; max-width: 25.2rem; scroll-margin-top: 2rem; }
.signup-k { font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); display: block; margin-bottom: .45rem; }
.bh-embed { max-width: 100%; }
.bh-embed iframe { display: block; border: 0; width: 100%; height: 150px; background: transparent;
  filter: grayscale(1); mix-blend-mode: multiply; }
.bh-fallback { margin: .5rem 0 0; }
.bh-fallback a { color: var(--ink-soft); }
.bh-fallback.promoted { color: var(--ink); }
.bh-fallback .why-not { display: block; margin-bottom: .55rem; }
.microcopy { margin: .6rem 0 0; }
.btn { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--sans);
  padding: .55rem 1rem; text-decoration: none; }
.bh-fallback a.btn, .btn:hover { color: var(--paper); }
.subscribed-note { font-family: var(--sans); font-size: 1.05rem; color: var(--ink); padding: .1rem 0; }
.subscribed-note b { font-weight: 500; }

/* ---- landing: every issue so far ---- */
.archive { padding-bottom: clamp(3rem, 8vh, 5rem); }
.archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .8rem; }
.archive h2 { font-size: 1em; font-weight: 500; margin: 0; }
.deck-nav { display: none; gap: .4rem; }
.deck-nav button { font: inherit; font-family: var(--sans); font-size: 1rem; line-height: 1; color: var(--ink);
  background: none; border: 1px solid var(--line-strong); border-radius: 3px; width: 2.1rem; height: 2.1rem; cursor: pointer; }
.deck-nav button:hover { background: var(--surface); }
.deck-nav button:disabled { color: var(--line-strong); border-color: var(--line); cursor: default; background: none; }
@media (hover: hover) and (pointer: fine) { .deck-nav { display: flex; } }

/* the issues sit in one row that you swipe (or scroll) sideways; the row runs to the
   screen edge on phones so the next card peeks in */
ul.index { list-style: none; padding: 0 var(--gutter) .9rem; margin: 0 calc(-1 * var(--gutter));
  display: flex; gap: .7rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none; }
ul.index::-webkit-scrollbar { display: none; }
ul.index li { flex: 0 0 min(78%, 15.5rem); scroll-snap-align: start; display: flex; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: .55rem 1rem;
  width: 100%; min-height: 9.5rem; box-sizing: border-box; padding: .85rem 1rem 1.05rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; color: inherit; text-decoration: none; }
.row:hover { color: inherit; border-color: var(--line-strong); }
.r-date, .r-num { grid-row: 1; font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); }
.r-date { grid-column: 1; }
.r-num { grid-column: 2; font-variant-numeric: lining-nums tabular-nums; }
.r-body { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.r-title { display: block; font-size: 1.1rem; line-height: 1.27; text-wrap: balance; }
.row:hover .r-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* the card for the issue being written: not a finished sheet yet */
li.next .row { background: none; border: 1px dashed var(--line-strong); }
li.next .r-title { color: var(--ink-soft); font-style: italic; }
/* the newest issue is whichever card follows the "next issue" card */
li.next + li { flex-basis: min(86%, 20rem); }
li.next + li .r-title { font-weight: 500; font-size: 1.22rem; text-wrap: pretty; }

@media (min-width: 60rem) {
  .archive-head, ul.index { margin-left: calc(-1 * var(--margin)); }
  ul.index { margin-left: calc(-1 * (var(--margin) + var(--gutter))); }
}
@media (prefers-reduced-motion: no-preference) { ul.index { scroll-behavior: smooth; } }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; }
.colophon { margin: 0 0 .5rem; max-width: 36rem; }
.colophon a { color: inherit; }

/* ---- issue pages: opening ---- */
.hero { padding: clamp(2.5rem, 8vh, 4.5rem) 0 1.4rem; }
.dateline { margin: 0 0 .9rem; }
.lede { margin: 0; line-height: 1.42; }
.plain-swap { display: inline; } .tech-swap { display: none; }
:root[data-mode="tech"] .plain-swap { display: none; }
:root[data-mode="tech"] .tech-swap { display: inline; }
.mode-banner { display: none; font-family: var(--sans); font-size: var(--small); color: var(--tech); margin-top: 1rem; }
:root[data-mode="tech"] .mode-banner { display: block; }

/* ---- issue pages: the read ---- */
article { padding-bottom: 1rem; }
section.blk { position: relative; padding: 1.9rem 0 1.5rem; border-top: 1px solid var(--line); }
.sec-head { margin-bottom: .55rem; }
.sec-head .count { display: none; }
@media (min-width: 60rem) {
  .sec-head { position: absolute; left: calc(-1 * var(--margin)); width: calc(var(--margin) - 1.5rem); top: 2.12rem; margin: 0; }
}
h2.sec { font-weight: 500; font-size: 1.42rem; line-height: 1.2; margin: 0 0 .7rem; text-wrap: balance; }
p.big { line-height: 1.5; }
mark.hl { background: none; color: inherit; font-weight: 500; padding: 0; }
a.link { color: var(--accent); }

.item { padding: 1.1rem 0 1.05rem; border-bottom: 1px solid var(--line); }
.item:first-of-type { padding-top: 0; }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item h3 { font-size: 1.1em; font-weight: 500; line-height: 1.24; margin: 0 0 .4rem; }
.item h3 .tick { font-family: var(--sans); font-size: var(--small); font-weight: 400; color: var(--ink-soft); white-space: nowrap; margin-left: .35rem; }
.item p { margin-bottom: .8em; }

/* the two places a story turns to the reader share one treatment */
.why, .sowhat { margin: 1.1rem 0 0; padding-left: 1rem; border-left: 1px solid var(--line-strong); }
.why .k, .sowhat .lbl { display: block; font-family: var(--sans); font-size: var(--small); font-weight: 500; color: var(--ink); margin-bottom: .1rem; }
.why p, .sowhat p { margin: 0; font-size: inherit !important; }

.tech-note { display: none; margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--tech);
  font-family: var(--sans); font-size: 1.02rem; line-height: 1.45; }
:root[data-mode="tech"] .tech-note { display: block; }
.tech-note .tlbl { display: block; font-size: var(--small); font-weight: 500; color: var(--tech); margin-bottom: .1rem; }
.tech-note p { margin: 0; }
.tech-note p + p { margin-top: .5rem; }
.tech-note code { font-family: inherit; font-weight: 500; }

.src { font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); line-height: 1.5; margin-top: .9rem;
  display: flex; flex-wrap: wrap; gap: .05rem .7rem; }
.src a { color: var(--ink-soft); }
.src a:hover { color: var(--ink); }

.pull { font-style: italic; font-size: 1.28em; line-height: 1.3; margin: .3rem 0 .4rem; }
.pull .q { font-style: normal; color: var(--ink-soft); }
.attrib { margin-bottom: 1em; }

/* ---- charts: real text and quiet bars ---- */
.figure { margin: 1.6rem 0; font-family: var(--sans); }
.fig-title { display: block; font-size: 1.04rem; font-weight: 500; line-height: 1.3; margin: 0 0 .8rem; }
.bars { display: flex; flex-direction: column; gap: .7rem; }
.bar-row { display: flex; flex-direction: column; gap: .18rem; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.bar-label { font-size: 1rem; line-height: 1.25; }
.bar-val { font-size: 1rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bar-track { height: 7px; background: var(--track); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 1.4s cubic-bezier(.25,.6,.3,1); }
section.in .bar-fill { width: var(--w); }
.bar-fill.hero { background: var(--accent); }
.bar-fill.muted { background: var(--bar-muted); }
.bar-fill.gold { background: var(--caution); }
.fig-note { margin: .75rem 0 0; }
.fig-flex { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.fig-hero { display: flex; flex-direction: column; gap: .1rem; }
.fig-hero .n, .stat-tile .n, .stat .num { font-family: var(--sans); font-weight: 400; font-size: 1.75rem; line-height: 1.1;
  color: var(--ink); font-variant-numeric: lining-nums; }
.fig-hero .l, .stat-tile .l { font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); line-height: 1.3; display: block; }
.fig-hero .l { max-width: 12rem; }
.fig-hero-body { flex: 1 1 13rem; min-width: 0; }
.statrow { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin: 1.3rem 0; }
.stat-tile { flex: 1 1 8rem; }
.stat-tile .l { margin-top: .2rem; }
.stats { display: flex; flex-direction: column; gap: 1rem; }
.stat { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; }
.stat .txt p { margin: 0; }
.stat .txt .yard { color: var(--ink-soft); }

/* timeline and what-to-watch are the same shape: when, then what */
ul.timeline, .watch { list-style: none; margin: 1rem 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1rem; padding: .28rem 0; }
.tl-rail { display: none; }
.tl-when, .watch .when { font-family: var(--sans); font-size: var(--small); color: var(--ink-soft); line-height: 1.5; }
.tl-what { line-height: 1.4; }
.watch li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.watch li:last-child { border-bottom: 0; }
.watch .what { line-height: 1.4; }

/* ---- the ask at the end of an issue ---- */
.cta-band { border-top: 1px solid var(--line); padding: 1.9rem 0 2.6rem; scroll-margin-top: 2rem; }
.cta-band h2 { font-size: 1.1em; font-weight: 500; line-height: 1.24; margin: 0 0 .3rem; }
.cta-band > p:not([class]) { margin: 0 0 1rem; }

/* ---- short pages: accessibility, coming soon ---- */
.page { padding-top: clamp(2.5rem, 8vh, 4.5rem); padding-bottom: 3rem; }
.page h2 { font-size: 1.1em; font-weight: 500; margin: 1.8rem 0 .3rem; }
.page ul { margin: 0 0 1em; padding-left: 1.15rem; }
.page li { margin-bottom: .45em; }
.page .sub { color: var(--ink-soft); }

@media (max-width: 34rem) {
  :root { --read: 1.17rem; }
  .tl-item, .watch li, .stat { grid-template-columns: 1fr; gap: 0; }
  .mast-right { gap: .8rem; }
}
@media (max-width: 23.5rem) { .mast-right a { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .daylight::before { animation: none; }
  .bar-fill { transition: none; width: var(--w); }
}
@media print {
  .daylight, .mode, .cta-band, .mast-right { display: none; }
  .tech-note { display: block; }
  .bar-fill { width: var(--w); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Hype check (hype-check.html). Questions 3-7 and the save card stay soft-locked until the
   device has subscribed; site.js adds .is-sub to <html>. The text is in the markup either way. */
.hc-top { padding-bottom: 1.5rem; }
ol.hc { list-style: none; counter-reset: hc; padding: 0; margin: 0; }
.hc-q { counter-increment: hc; position: relative; padding: 1.6rem 0 1.2rem; border-top: 1px solid var(--line); }
.hc-q h2.sec::before { content: counter(hc) ". "; color: var(--ink-soft); }
.hc-ex { font-size: 1.05rem; background: var(--surface); padding: .8rem 1rem; margin: 0; }
.hc-ex b { font-weight: 500; }
.hc-lock > p { filter: blur(5px); user-select: none; pointer-events: none; }
.hc-gate { text-align: center; padding: 1.4rem 0 2rem; border-top: 1px solid var(--line); }
.hc-done { display: none; padding: 1.4rem 0 2.5rem; border-top: 1px solid var(--line); }
.hc-done b { font-weight: 500; }
.is-sub .hc-lock > p { filter: none; user-select: auto; pointer-events: auto; }
.is-sub .hc-gate { display: none; }
.is-sub .hc-done { display: block; }
.is-sub .hc-top .microcopy { display: none; }