/* AI Before Coffee, Direction A: The Morning Paper.
   Newsreader (Production Type) and Schibsted Grotesk (Schibsted), both SIL OFL 1.1, self-hosted. See /fonts/README.txt. */
@font-face { font-family: "Newsreader Display"; src: url(/fonts/newsreader-display.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-text.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f5f4f0;
  --ink: #111111;
  --ink-2: #3d3c3a;
  --muted: #615f5b;
  --rule: #111111;
  --hair: #c9c6bf;
  --red: #a3162b;      /* kebaya red, from Annie's outfit: the only accent */
  --display: "Newsreader Display", "Newsreader", "Iowan Old Style", Georgia, serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.5 var(--serif); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--paper); padding: 8px; z-index: 9; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.label, .kicker, .byline, .note, .dateline, .mast-nav, .mast-sub, small, .src, .take span, .btn, .more, table, .cap, .rundown, .index small, figcaption, .foot nav, .facts cite, .verdict dt, .toc, .notice, .arch-meta, .yt-title, details summary { font-family: var(--sans); }
.label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; padding-top: 10px; border-top: 3px solid var(--rule); }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
.notice { font-size: 14px; border-left: 3px solid var(--red); padding: 8px 12px; margin: 0 0 18px; color: var(--ink-2); background: #fff; }

/* dateline */
.dateline { border-bottom: 1px solid var(--rule); font-size: 13px; }
.dl { display: flex; gap: 24px; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; }
.dl a { text-decoration: none; padding: 3px 0; }
.live { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.live i { width: 8px; height: 8px; background: var(--red); display: inline-block; animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* masthead */
.mast { background: var(--paper); }
.mast-in { text-align: center; padding-top: 28px; }
.mast-link { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); }
.ring { width: 84px; height: 84px; flex: none; }
.mast-name { font: 600 clamp(44px, 8.2vw, 124px)/0.92 var(--display); letter-spacing: -.035em; }
.mast-tag { font-style: italic; font-size: 19px; color: var(--ink-2); margin: 14px 0 18px; }
.mast-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; border-top: 4px double var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 0; font-size: 14px; font-weight: 500; }
.mast-nav a { text-decoration: none; padding: 3px 0; }
.mast-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-sub, .mast-sub { color: var(--red); font-weight: 700; }
.mast-sub { display: none; text-decoration: none; }
/* inside pages: the same masthead, set small */
.mast.compact .mast-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 32px; text-align: left; padding-top: 18px; }
.mast.compact .ring { width: 52px; height: 52px; }
.mast.compact .mast-link { gap: 12px; padding-bottom: 14px; }
.mast.compact .mast-name { font-size: 44px; }
.mast.compact .mast-tag { display: none; }
.mast.compact .mast-nav { grid-column: 1 / -1; justify-content: flex-start; }

/* 3 / 6 / 3 grid */
.front, .doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 0; padding-top: 28px; padding-bottom: 36px; }
.front > *, .doc > * { padding: 0 24px; }
.front > :first-child, .doc > :first-child { padding-left: 0; }
.front > :last-child, .doc > :last-child { padding-right: 0; }
.col-index, .lead, .doc > .side { border-right: 1px solid var(--hair); }
.index { list-style: none; margin: 0 0 32px; padding: 0; }
.index li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.index a { display: grid; grid-template-columns: 32px 1fr; text-decoration: none; font-size: 18px; line-height: 1.3; }
.index .n { font: 600 30px/1 var(--display); color: var(--red); }
.index small { display: block; margin: 6px 0 0 32px; font-size: 12px; color: var(--muted); }
.figures { margin: 0 0 24px; }
.figures div { padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }
.figures dt { font: 500 54px/1 var(--display); letter-spacing: -.03em; }
.figures dd { margin: 6px 0 0; font: 14px/1.35 var(--sans); color: var(--ink-2); }

.lead h1, .bhead h1, .doc h1 { font: 600 clamp(34px, 3.6vw, 54px)/1.04 var(--display); letter-spacing: -.022em; margin: 0 0 18px; text-wrap: balance; }
.deck { font-size: 22px; line-height: 1.4; color: var(--ink-2); margin: 0 0 14px; }
.byline { font-size: 13px; color: var(--muted); padding-bottom: 18px; border-bottom: 1px solid var(--hair); margin: 0 0 22px; }
.four { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 3px solid var(--rule); }
.four section { padding: 14px 20px 18px 0; border-bottom: 1px solid var(--hair); }
.four section:nth-child(2n) { padding-left: 20px; padding-right: 0; border-left: 1px solid var(--hair); }
.four h2, .four h3 { font: 700 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.four p { margin: 0; font-size: 18px; line-height: 1.45; }
.four .try h2, .four .try h3 { color: var(--red); }
.take { margin: 22px 0 18px; font-size: 22px; line-height: 1.35; font-style: italic; }
.take span { display: block; font: 700 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.more { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--red); }

.host { margin: 0 0 22px; }
.host img { background: var(--red); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; width: 100%; }
.host figcaption { font-size: 13px; line-height: 1.4; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.rundown { list-style: none; margin: 0 0 18px; padding: 0; font-size: 15px; }
.rundown li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.rundown span { font-weight: 700; color: var(--red); width: 14px; flex: none; }
.rundown a { text-decoration: none; display: block; }
.btn { display: block; text-align: center; background: var(--ink); color: var(--paper); text-decoration: none; padding: 14px 16px; font-weight: 700; font-size: 15px; }
.btn:hover { background: var(--red); color: #fff; }
.btn.inline { display: inline-block; }
.note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* second stories and the verdict board */
.seconds { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 28px; padding-bottom: 48px; }
.seconds::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; border-top: 1px solid var(--rule); }
.seconds > * { padding: 0 24px; border-right: 1px solid var(--hair); }
.seconds > :first-child { padding-left: 0; }
.seconds > :last-child { padding-right: 0; border-right: 0; }
/* the other stories fill 2 columns (2 per row), the verdict board takes the third column beside all of them */
.seconds article:nth-of-type(odd) { padding-left: 0; }
.seconds article:nth-of-type(n+3) { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hair); }
.verdicts { grid-column: 3; grid-row: 1 / span 2; }
.seconds h2 { font: 600 30px/1.08 var(--display); letter-spacing: -.015em; margin: 0 0 12px; text-wrap: balance; }
.seconds h2 a { text-decoration: none; }
.seconds p.note { font-size: 13px; margin-top: 10px; }
.seconds h2.label { font: 700 12px/1 var(--sans); letter-spacing: .12em; margin: 0 0 12px; }
.deck-s { color: var(--ink-2); font-size: 18px; }
.seconds p { margin: 0 0 12px; font-size: 17px; }
.cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.src { font-size: 13px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 8px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 14px; height: 14px; border: 1.5px solid var(--ink); }
.dots i.on { background: var(--red); border-color: var(--red); }

/* the brief page */
.toc { list-style: none; padding: 0; margin: 0; }
.toc li { border-bottom: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 28px 1fr; padding: 10px 0; text-decoration: none; font-size: 15px; font-weight: 500; }
.toc span { color: var(--red); font-weight: 700; }
.sticky { position: sticky; top: 16px; }
.story { padding: 32px 0 28px; border-top: 3px solid var(--rule); margin-top: 28px; }
.story h2 { font: 600 clamp(28px, 2.6vw, 38px)/1.06 var(--display); letter-spacing: -.018em; margin: 0 0 14px; text-wrap: balance; }
.facts { list-style: none; margin: 0 0 22px; padding: 0; }
.facts li { padding: 9px 0; border-top: 1px solid var(--hair); }
.facts li:last-child { border-bottom: 1px solid var(--hair); }
.facts cite { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.verdict { margin: 0; border-top: 1px solid var(--rule); font: 15px/1.35 var(--sans); }
.verdict > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.verdict dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.verdict dd { margin: 0; }
.how { margin-top: 28px; padding-top: 10px; border-top: 3px solid var(--rule); font-size: 16px; }
.how h2 { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.how p { margin: 0; }

.doc.brief { grid-template-rows: auto 1fr; }
.doc.brief > .side { grid-column: 1; grid-row: 1 / 3; }
.doc.brief > .bhead { grid-column: 2; grid-row: 1; border-right: 1px solid var(--hair); }
.doc.brief > .main { grid-column: 2; grid-row: 2; border-right: 1px solid var(--hair); }
.doc.brief > .aside-host { grid-column: 3; grid-row: 1 / 3; }

/* plain pages: about, method, privacy, archive, watch */
.doc.wide { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.prose { max-width: 40em; }
.prose h2 { font: 600 30px/1.1 var(--display); letter-spacing: -.015em; margin: 36px 0 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.prose h3 { font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 8px; }
.prose p, .prose li { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 16px; }
.prose li::marker { color: var(--red); font-family: var(--sans); font-weight: 700; }
.lede { font-size: 22px; line-height: 1.4; color: var(--ink-2); margin: 0 0 8px; }
.tablewrap { overflow-x: auto; }
details { border-bottom: 1px solid var(--hair); padding: 12px 0; }
details:first-of-type { border-top: 3px solid var(--rule); }
summary { cursor: pointer; font-weight: 700; font-size: 16px; padding: 2px 0; }
details p { margin: 8px 0 0; }
.disclose { font: 700 14px/1.4 var(--sans); padding: 10px 12px; border: 1px solid var(--rule); background: #fff; }
.side-list { list-style: none; margin: 0 0 24px; padding: 0; font: 500 15px/1.3 var(--sans); }
.side-list li { border-bottom: 1px solid var(--hair); }
.side-list a { display: block; padding: 9px 0; text-decoration: none; }

/* archive */
.arch { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule); }
.arch li { display: grid; grid-template-columns: 150px 1fr; gap: 0 24px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.arch-date { font: 600 34px/1 var(--display); letter-spacing: -.02em; }
.arch-date small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.arch h2 { font: 600 26px/1.12 var(--display); letter-spacing: -.012em; margin: 0 0 8px; }
.arch h2 a { text-decoration: none; }
.arch-meta { font-size: 14px; color: var(--ink-2); margin: 0; }

/* watch: lite YouTube facade (the player loads only on press) */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--red); color: #fff; text-decoration: none; overflow: hidden; border: 0; padding: 0; margin: 0 0 12px; }
.yt img { position: absolute; right: 4%; bottom: 0; height: 96%; width: auto; }
.yt .play { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 84px; height: 84px; border: 3px solid #fff; display: grid; place-items: center; }
.yt .play::after { content: ""; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.yt-title { position: absolute; left: 6%; bottom: 8%; max-width: 50%; font-weight: 700; font-size: 16px; line-height: 1.3; }
.yt:hover { color: #fff; }
.yt:hover .play { background: var(--ink); border-color: var(--ink); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* newsletter */
.letter { background: var(--ink); color: var(--paper); }
.letter-in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-top: 48px; padding-bottom: 52px; }
.letter h2 { font: 600 clamp(36px, 4vw, 58px)/1 var(--display); letter-spacing: -.025em; margin: 0 0 14px; }
.letter p { margin: 0; font-size: 19px; color: #d7d5cf; }
.letter a { color: #fff; }
.kicker.inv { color: #ff8a8a; }
.letter label { display: block; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.field { display: flex; border: 1px solid var(--paper); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--paper); font: 18px var(--sans); padding: 15px 16px; }
.field input::placeholder { color: #8f8d88; }
.field button { border: 0; background: var(--red); color: #fff; font: 700 15px var(--sans); padding: 0 24px; cursor: pointer; }
.field button:disabled { cursor: not-allowed; background: #5a5955; }
.letter small { display: block; margin-top: 10px; color: #b3b1ab; font-size: 13px; line-height: 1.45; }

.foot { padding-top: 36px; padding-bottom: 48px; display: grid; grid-template-columns: 1fr 2fr; gap: 12px 48px; }
.foot-mark { font: 600 32px/1 var(--display); letter-spacing: -.02em; }
.foot p { margin: 0; color: var(--ink-2); font-size: 16px; }
.foot nav { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.foot nav a { padding: 3px 0; }
.foot .fine { grid-column: 2; font-size: 14px; color: var(--muted); }

@media (max-width: 1080px) {
  .front { grid-template-columns: 1fr 1fr; }
  .lead { grid-column: 1 / -1; order: -1; border-right: 0; padding: 0 0 28px !important; border-bottom: 1px solid var(--rule); margin-bottom: 24px; }
  .col-index { padding-left: 0; }
  .seconds { grid-template-columns: 1fr 1fr; }
  .seconds article:nth-of-type(even) { padding-right: 0; border-right: 0; }
  .verdicts { grid-column: 1 / -1; grid-row: auto; border-top: 1px solid var(--rule); padding: 24px 0 0 !important; margin-top: 24px; border-right: 0 !important; }
  .doc, .doc.wide { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
  .doc > * { padding: 0 !important; border: 0 !important; }
  .doc .main { order: 1; }
  .doc .aside-host { order: 2; margin-top: 28px; }
  .doc .side { order: 3; margin-top: 28px; }
  .doc.brief .bhead { order: -2; }
  .doc.brief .aside-host { order: -1; margin: 8px 0 28px; }
  .doc.brief .side { order: 0; margin: 0 0 8px; }
  .doc.brief .main { order: 1; }
  .sticky { display: contents; }
  .doc .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
  .aside-host { display: grid; grid-template-columns: 160px 1fr; gap: 0 18px; align-items: start; }
  .aside-host .host { grid-row: span 6; margin: 0; }
  .aside-host .host figcaption { border: 0; }
  .aside-host .label { margin-top: 0; }
}
@media (max-width: 680px) {
  body { font-size: 17px; }
  html { scroll-padding-top: 104px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hide-s { display: none; }
  .dl { font-size: 12px; gap: 12px; }
  /* sticky compact masthead */
  .mast { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--rule); }
  .mast-in, .mast.compact .mast-in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; text-align: left; padding-top: 8px; }
  .mast-link, .mast.compact .mast-link { gap: 8px; padding-bottom: 6px; }
  .ring, .mast.compact .ring { width: 32px; height: 32px; }
  .mast-name, .mast.compact .mast-name { font-size: clamp(22px, 6.6vw, 27px); letter-spacing: -.03em; white-space: nowrap; }
  .mast-tag { display: none; }
  .mast-sub { display: block; font-size: 13px; padding: 8px 0 8px 8px; }
  .mast-nav, .mast.compact .mast-nav { grid-column: 1 / -1; justify-content: space-between; gap: 0 12px; border-top: 1px solid var(--hair); border-bottom: 0; padding: 4px 0; flex-wrap: nowrap; }
  .mast-nav a { padding: 6px 0; }
  .mast-nav .nav-sub { display: none; }
  .front { display: flex; flex-direction: column; padding-top: 22px; }
  .lead { order: -2; }
  .col-host { order: -1; }
  .seconds { display: block; }
  .seconds::before { left: 16px; right: 16px; }
  .front > *, .seconds > * { padding: 0 !important; border: 0 !important; }
  .lead { padding-bottom: 24px !important; border-bottom: 1px solid var(--rule) !important; }
  .lead h1, .bhead h1, .doc h1 { font-size: 33px; }
  .deck, .lede { font-size: 19px; }
  .take { font-size: 20px; }
  .four { grid-template-columns: 1fr; }
  .four section, .four section:nth-child(2n) { padding: 12px 0 14px; border-left: 0; }
  .col-host, .aside-host { display: grid; grid-template-columns: 120px 1fr; gap: 0 16px; margin-bottom: 24px; }
  .col-host .host, .aside-host .host { grid-row: span 5; margin: 0; }
  .col-host .host figcaption, .aside-host .host figcaption { font-size: 12px; border: 0; }
  .col-host .label { margin-top: 0; }
  .col-host .rundown li { padding: 5px 0; font-size: 14px; }
  .col-index { margin-bottom: 16px; }
  .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .figures dt { font-size: 34px; }
  .figures dd { font-size: 12px; }
  .seconds article { margin-top: 0; padding-bottom: 20px !important; margin-bottom: 20px; border-bottom: 1px solid var(--hair) !important; }
  .seconds h2 { font-size: 26px; }
  .story h2 { font-size: 27px; }
  .verdict > div { grid-template-columns: 104px 1fr; }
  .arch li { grid-template-columns: 1fr; gap: 8px; }
  .arch-date { font-size: 26px; }
  .prose h2 { font-size: 26px; }
  .yt .play { width: 56px; height: 56px; }
  .yt .play::after { border-width: 11px 0 11px 18px; }
  .yt-title { font-size: 13px; max-width: 46%; }
  .letter-in { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; padding-bottom: 40px; }
  .field { flex-direction: column; }
  .field button { padding: 14px; }
  .foot { grid-template-columns: 1fr; }
  .foot nav, .foot .fine { grid-column: 1; }
}
@media (max-width: 680px) { .hide-s { display: none; } }
@media (min-width: 681px) { .show-s { display: none; } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }