/* The newspaper's first look (r1), frozen with r1.js: an issue dated from r1's `from` prints
   with these rules for good. Edit nothing here — a new look is a new revision; build.mjs refuses
   a deploy that changes this file or the fonts it names. Everything is scoped to the sheet's
   root, which declares the tokens and type it uses rather than reading the site's. Still the
   site's, by design or by inheritance: the column the sheet sits in (day.css `main`, `--pad`),
   the arrows' own rules (`.foot`, `.pill`), day.3cf73f477f.css's rules on bare elements (`*`, `[hidden]`,
   `a`, `:focus-visible`), and any inherited text property the root does not set. The fonts are
   r1's own copies, under names of its own, so the site may change its fonts without touching
   the paper. */
@font-face { font-family: 'Paper R1 Sans'; src: url('../fonts/newspaper-r1/ibm-plex-sans-var.056e4e2459.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Paper R1 Mono'; src: url('../fonts/newspaper-r1/ibm-plex-mono-400.c36f509c0a.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paper R1 Thai'; src: url('../fonts/newspaper-r1/ibm-plex-sans-thai-400.379cbfeb4c.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Paper R1 Thai'; src: url('../fonts/newspaper-r1/ibm-plex-sans-thai-700.6ab6c95ed3.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

/* The tokens and type the sheet was drawn with, as day.css and newspaper.css had them on 2026-10-09;
   --issue-day is written on this element by r1.js. */
.paper-r1 {
  --issue-day: #ff8a3d;
  --bg: #04060c;
  --ink: #e8f0fb;
  --dim: #7d8ea6;
  --line: #2a3a55;
  --accent: #5aa9ff;
  --mono: 'Paper R1 Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Paper R1 Sans', 'Paper R1 Thai', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  font: 400 15px/1.35 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.paper-r1 a { color: inherit; text-decoration: none; }
.paper-r1 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.paper-r1 h2, .paper-r1 h3, .paper-r1 p, .paper-r1 ul, .paper-r1 ol { margin: 0; }

/* Mono labels, letter-spaced — but Thai has no case and falls apart when tracked, so a Thai
   label is the sans at a small bold size instead. */
:where(.paper-r1) .section-label, :where(.paper-r1) .edition-kicker, :where(.paper-r1) .edition-meta .number {
  font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.paper-r1 [lang='th'] :is(.section-label, .edition-kicker), .paper-r1 .edition[lang='th'] .number {
  font: 700 12px/1.6 var(--sans); letter-spacing: 0;
}
.paper-r1 [lang='th'] { line-height: 1.66; }

/* ---- masthead ---- */
:where(.paper-r1) .edition { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(245px, auto); align-items: end; gap: 28px; padding: 26px 0 23px; border-bottom: 4px solid var(--issue-day); }
:where(.paper-r1) .date-stamp { display: flex; align-items: flex-end; gap: 10px; color: var(--issue-day); }
:where(.paper-r1) .date-stamp span { font: 600 76px/.78 var(--sans); letter-spacing: -.075em; }
:where(.paper-r1) .date-stamp b { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; padding-bottom: 2px; }
:where(.paper-r1) .edition[lang='th'] .date-stamp b { font: 700 13px/1.3 var(--sans); letter-spacing: 0; }
:where(.paper-r1) .edition-kicker { margin-bottom: 2px; color: var(--issue-day); }
:where(.paper-r1) .edition-name { font-size: clamp(38px, 5vw, 71px); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
:where(.paper-r1) .edition[lang='th'] .edition-name { line-height: 1.2; letter-spacing: 0; }
/* A nameplate in capitals where the script has them; the words stay as written for the title and readers. */
:where(.paper-r1) .edition:not([lang='th']) .edition-name { text-transform: uppercase; letter-spacing: -.02em; }
:where(.paper-r1) .edition-meta { text-align: right; }
:where(.paper-r1) .edition-meta p:first-child { font-size: 15px; }
:where(.paper-r1) .edition-meta .number { margin-top: 6px; color: var(--issue-day); }
:where(.paper-r1) .edition-meta .number:empty { display: none; }

/* The closing line reads as the masthead's date does: plain sans, not a label. */
:where(.paper-r1) .closed-note { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); font: 400 13px/1.5 var(--sans); color: var(--dim); text-wrap: pretty; }
:where(.paper-r1) .closed-mark { width: 7px; height: 7px; flex: none; background: var(--issue-day); }
:where(.paper-r1) .closed-note .total { margin-left: auto; color: var(--ink); white-space: nowrap; }

:where(.paper-r1) .section-label { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
:where(.paper-r1) .section-label::before { content: ''; width: 28px; height: 3px; flex: none; background: var(--issue-day); }

/* ---- the lead, and the three beside it ---- */
:where(.paper-r1) .front-grid { display: grid; grid-template-columns: minmax(0, 1.82fr) minmax(300px, .88fr); border-bottom: 1px solid var(--line); }
:where(.paper-r1) .lead { min-width: 0; display: flex; flex-direction: column; padding: 24px 30px 24px 0; border-right: 1px solid var(--line); }
/* An issue with one topic has nothing beside its lead: the lead takes the sheet. */
:where(.paper-r1) .front-grid:not(:has(.secondary)) { grid-template-columns: minmax(0, 1fr); }
:where(.paper-r1) .front-grid:not(:has(.secondary)) .lead { padding-right: 0; border-right: 0; }
/* The white box runs the height of the column beside it, so no dark band is left under it. */
:where(.paper-r1) .lead-panel { position: relative; flex: 1; background: var(--ink); color: var(--bg); padding: 26px clamp(22px, 3vw, 40px) 23px; border-top: 9px solid var(--issue-day); transition: background .15s; }
/* Latin leading is tight; the bottom padding keeps a descender off the rule under it. */
:where(.paper-r1) .lead h3 { padding-bottom: .1em; font-size: clamp(36px, 5vw, 70px); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
:where(.paper-r1) .lead[lang='th'] h3 { line-height: 1.3; letter-spacing: 0; }
:where(.paper-r1) .lead-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 14px; padding: 4px 0 0; border-top: 1px solid #b9c6d8; pointer-events: none; }
:where(.paper-r1) .lead-points li { position: relative; padding: 13px 0 10px 17px; border-bottom: 1px solid #c7d2e0; font-size: 14px; line-height: 1.5; }
:where(.paper-r1) .lead[lang='th'] .lead-points li { line-height: 1.72; }
:where(.paper-r1) .lead-points li::before { content: ''; position: absolute; left: 0; top: 1.35em; width: 7px; height: 7px; background: var(--bg); }

:where(.paper-r1) .secondary { min-width: 0; }
:where(.paper-r1) .secondary-card { position: relative; padding: 18px 12px 18px 26px; border-bottom: 1px solid var(--line); }
:where(.paper-r1) .secondary-card:last-child { border-bottom: 0; }
:where(.paper-r1) .secondary-card h3 { font-size: clamp(20px, 2.2vw, 29px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
:where(.paper-r1) .secondary[lang='th'] .secondary-card h3 { font-weight: 700; line-height: 1.45; letter-spacing: 0; }

/* A whole box is its headline's link, and lights as the news and topics pages' rows do: the
   box takes its topic's sky (--tint, written per box by the edge), the words keep their colour;
   a keyboard's focus also draws the accent ring. The white lead mixes the same sky into white. */
:where(.paper-r1) :is(.lead-panel, .secondary-card, .brief-card, .index-item) a::after { content: ''; position: absolute; inset: 0; }
:where(.paper-r1) :is(.lead-panel, .secondary-card, .brief-card, .index-item) a:focus-visible { outline: none; }
:where(.paper-r1) :is(.secondary-card, .brief-card, .index-item) { transition: background .15s; }
:where(.paper-r1) :is(.secondary-card, .brief-card, .index-item):is(:hover, :has(:focus-visible)) { background: color-mix(in srgb, var(--tint, var(--accent)) 22%, rgba(232, 240, 251, .06)); }
:where(.paper-r1) .lead-panel:is(:hover, :has(:focus-visible)) { background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--ink)); }
:where(.paper-r1) :is(.lead-panel, .secondary-card, .brief-card, .index-item):has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }

/* ---- in brief ---- */
:where(.paper-r1) .briefing { padding-bottom: 26px; }
:where(.paper-r1) .brief-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
:where(.paper-r1) .brief-card { position: relative; min-width: 0; padding: 17px 17px 15px; border-right: 1px solid var(--line); }
:where(.paper-r1) .brief-card:last-child { border-right: 0; }
:where(.paper-r1) .brief-card h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
:where(.paper-r1) .briefing[lang='th'] .brief-card h3 { font-weight: 700; line-height: 1.55; }

/* ---- the index, and the way on ---- */
:where(.paper-r1) .index { padding-top: 6px; }
/* The heading runs its rule out to the edge: ── ข่าวอื่น ๆ ━━━━━━━ */
:where(.paper-r1) .index > .section-label { margin-bottom: 4px; color: var(--ink); }
:where(.paper-r1) .index > .section-label::after { content: ''; flex: 1; height: 3px; background: var(--issue-day); }
:where(.paper-r1) .index-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
:where(.paper-r1) .index-item { position: relative; padding: 12px 10px; border-bottom: 1px solid var(--line); }
/* Cells meet like the brief row above: no gutter, the rules touch. */
:where(.paper-r1) .index-item:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
:where(.paper-r1) .index-item a { font-size: 14px; line-height: 1.45; }
:where(.paper-r1) .index[lang='th'] .index-item a { line-height: 1.65; }

/* The sheet closes as it opens: the masthead's heavy rule in the issue's colour. */
:where(.paper-r1) .edition-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 20px; margin-top: 25px; padding-top: 18px; border-top: 4px solid var(--issue-day); }
:where(.paper-r1) .edition-foot .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; }

:where(.paper-r1) .empty-edition { min-height: 400px; display: grid; place-items: center; text-align: center; }
:where(.paper-r1) .empty-inner { max-width: 560px; padding: 70px 0; }
:where(.paper-r1) .empty-rule { width: 72px; height: 8px; margin: 0 auto 30px; background: var(--issue-day); }
:where(.paper-r1) .empty-edition h2 { font-size: clamp(32px, 6vw, 60px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
:where(.paper-r1) .empty-edition[lang='th'] h2 { line-height: 1.35; letter-spacing: 0; }
:where(.paper-r1) .empty-edition p { margin: 17px auto 0; color: var(--dim); max-width: 44ch; }
:where(.paper-r1) .empty-edition a { display: inline-block; margin-top: 24px; color: var(--accent); }

@media (max-width: 900px) {
  :where(.paper-r1) .edition { grid-template-columns: 115px 1fr; gap: 18px; }
  :where(.paper-r1) .edition-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding-top: 12px; border-top: 1px solid var(--line); }
  :where(.paper-r1) .edition-meta .number { margin-top: 0; }
  :where(.paper-r1) .front-grid { grid-template-columns: 1fr; }
  :where(.paper-r1) .lead { padding-right: 0; border-right: 0; }
  :where(.paper-r1) .secondary { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0; border-top: 1px solid var(--line); }
  :where(.paper-r1) .secondary-card { padding: 18px 12px; border-right: 1px solid var(--line); border-bottom: 0; }
  :where(.paper-r1) .secondary-card:last-child { border-right: 0; }
  :where(.paper-r1) .brief-grid { grid-template-columns: repeat(3, 1fr); }
  :where(.paper-r1) .brief-card:nth-child(3) { border-right: 0; }
  :where(.paper-r1) .brief-card:nth-child(n+4) { border-top: 1px solid var(--line); }
  /* Five in rows of three: the last one takes the empty cell beside it. */
  :where(.paper-r1) .brief-card:last-child:nth-child(5) { grid-column: span 2; }
  :where(.paper-r1) .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.paper-r1) .index-item:not(:nth-child(3n)) { border-right: 0; }
  :where(.paper-r1) .index-item:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* A phone: one column — the lead keeps three points; every topic stays on the sheet. */
@media (max-width: 650px) {
  :where(.paper-r1) .edition { grid-template-columns: 73px minmax(0, 1fr); gap: 14px; padding: 19px 0 16px; }
  :where(.paper-r1) .date-stamp { display: block; }
  :where(.paper-r1) .date-stamp span { font-size: 54px; line-height: .82; }
  :where(.paper-r1) .date-stamp b { display: block; margin-top: 7px; }
  /* The nameplate scales with the phone: its longest word must fit the column at 320px. */
  :where(.paper-r1) .edition-name { font-size: clamp(24px, 8vw, 39px); }
  :where(.paper-r1) .edition-meta { display: block; padding-top: 9px; }
  :where(.paper-r1) .edition-meta p:first-child { font-size: 13px; }
  :where(.paper-r1) .edition-meta .number { margin-top: 3px; }
  :where(.paper-r1) .closed-note { min-height: 54px; padding: 7px 0; align-items: flex-start; }
  :where(.paper-r1) .closed-mark { margin-top: .5em; }
  :where(.paper-r1) .lead { padding: 17px 0 18px; }
  :where(.paper-r1) .lead-panel { margin: 0 calc(-1 * var(--pad)); padding: 18px var(--pad) 15px; border-top-width: 7px; }
  :where(.paper-r1) .lead h3 { font-size: 34px; line-height: 1.08; }
  :where(.paper-r1) .lead[lang='th'] h3 { font-size: 31px; line-height: 1.32; }
  :where(.paper-r1) .lead-points { grid-template-columns: 1fr; }
  :where(.paper-r1) .lead-points li { padding: 9px 0 8px 15px; font-size: 13px; }
  :where(.paper-r1) .lead-points li:nth-child(n+4) { display: none; }
  :where(.paper-r1) .secondary { display: block; }
  :where(.paper-r1) .secondary-card, :where(.paper-r1) .secondary-card:last-child { padding: 13px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  :where(.paper-r1) .secondary-card h3 { font-size: 20px; }
  :where(.paper-r1) .briefing { padding-bottom: 19px; }
  :where(.paper-r1) .brief-grid { grid-template-columns: 1fr 1fr; }
  :where(.paper-r1) .brief-card, :where(.paper-r1) .brief-card:nth-child(3), :where(.paper-r1) .brief-card:last-child { padding: 11px 8px; border-top: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  :where(.paper-r1) .brief-card:nth-child(even) { border-right: 0; }
  :where(.paper-r1) .brief-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
  :where(.paper-r1) .brief-card h3 { font-size: 15px; }
  :where(.paper-r1) .index { padding-top: 4px; }
  :where(.paper-r1) .index-list { grid-template-columns: 1fr; }
  :where(.paper-r1) .index-item, :where(.paper-r1) .index-item:nth-child(odd) { margin-right: 0; padding: 10px 8px; border-right: 0; }
  :where(.paper-r1) .index-item a { font-size: 13px; }
  :where(.paper-r1) .empty-edition { min-height: 360px; }
  :where(.paper-r1) .empty-inner { padding: 55px 0; }
}