/* The newspaper's second look (r2), frozen with r2.js once it has printed an issue: edit nothing
   here then — a new look is a new revision; build.mjs refuses a deploy that changes this file or the
   fonts it names. r2 draws only Vietnam's sheet (every other country's goes to r1 and r1.css), and
   this is r1.css as it stood, scoped to r2's root and drawn in r2's own faces: r1's frozen Latin
   files, and Plex's Vietnamese subset for the letters they lack (53 of the 56 Vietnamese letters).
   Its own family names keep the Vietnamese faces off r1's sheet — an @font-face is page-wide. The
   rules r1 wrote for Thai stay as r1 had them and match nothing here. What is still the site's is
   what r1.css's header lists. */
@font-face { font-family: 'Paper R2 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 R2 Sans'; src: url('../fonts/newspaper-r2/ibm-plex-sans-vietnamese-var.526a4dd36c.woff2') format('woff2'); font-weight: 100 700; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Paper R2 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 R2 Mono'; src: url('../fonts/newspaper-r2/ibm-plex-mono-vietnamese-400.0a8b854cc1.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* 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 r2.js. */
.paper-r2 {
  --issue-day: #ff8a3d;
  --bg: #04060c;
  --ink: #e8f0fb;
  --dim: #7d8ea6;
  --line: #2a3a55;
  --accent: #5aa9ff;
  --mono: 'Paper R2 Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Paper R2 Sans', 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-r2 a { color: inherit; text-decoration: none; }
.paper-r2 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.paper-r2 h2, .paper-r2 h3, .paper-r2 p, .paper-r2 ul, .paper-r2 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-r2) .section-label, :where(.paper-r2) .edition-kicker, :where(.paper-r2) .edition-meta .number {
  font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.paper-r2 [lang='th'] :is(.section-label, .edition-kicker), .paper-r2 .edition[lang='th'] .number {
  font: 700 12px/1.6 var(--sans); letter-spacing: 0;
}
.paper-r2 [lang='th'] { line-height: 1.66; }

/* ---- masthead ---- */
:where(.paper-r2) .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-r2) .date-stamp { display: flex; align-items: flex-end; gap: 10px; color: var(--issue-day); }
:where(.paper-r2) .date-stamp span { font: 600 76px/.78 var(--sans); letter-spacing: -.075em; }
:where(.paper-r2) .date-stamp b { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; padding-bottom: 2px; }
:where(.paper-r2) .edition[lang='th'] .date-stamp b { font: 700 13px/1.3 var(--sans); letter-spacing: 0; }
:where(.paper-r2) .edition-kicker { margin-bottom: 2px; color: var(--issue-day); }
:where(.paper-r2) .edition-name { font-size: clamp(38px, 5vw, 71px); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
:where(.paper-r2) .edition[lang='th'] .edition-name { line-height: 1.2; letter-spacing: 0; }
/* Vietnamese stacks marks above and below its letters (Ậ, ệ, ộ): at r1's Latin line-heights they ran
   into the line above — the kicker over the name in every issue, and real headlines at 768 (measured
   2026-10-13). Each value is the least that cleared the measured worst case, as Thai has its own. */
:where(.paper-r2) .edition[lang='vi'] .edition-name { line-height: 1.2; }
/* A nameplate in capitals where the script has them; the words stay as written for the title and readers. */
:where(.paper-r2) .edition:not([lang='th']) .edition-name { text-transform: uppercase; letter-spacing: -.02em; }
:where(.paper-r2) .edition-meta { text-align: right; }
:where(.paper-r2) .edition-meta p:first-child { font-size: 15px; }
:where(.paper-r2) .edition-meta .number { margin-top: 6px; color: var(--issue-day); }
:where(.paper-r2) .edition-meta .number:empty { display: none; }

/* The closing line reads as the masthead's date does: plain sans, not a label. */
:where(.paper-r2) .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-r2) .closed-mark { width: 7px; height: 7px; flex: none; background: var(--issue-day); }
:where(.paper-r2) .closed-note .total { margin-left: auto; color: var(--ink); white-space: nowrap; }

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

/* ---- the lead, and the three beside it ---- */
:where(.paper-r2) .front-grid { display: grid; grid-template-columns: minmax(0, 1.82fr) minmax(300px, .88fr); border-bottom: 1px solid var(--line); }
:where(.paper-r2) .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-r2) .front-grid:not(:has(.secondary)) { grid-template-columns: minmax(0, 1fr); }
:where(.paper-r2) .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-r2) .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-r2) .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-r2) .lead[lang='th'] h3 { line-height: 1.3; letter-spacing: 0; }
:where(.paper-r2) .lead[lang='vi'] h3 { line-height: 1.34; }
:where(.paper-r2) .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-r2) .lead-points li { position: relative; padding: 13px 0 10px 17px; border-bottom: 1px solid #c7d2e0; font-size: 14px; line-height: 1.5; }
:where(.paper-r2) .lead[lang='th'] .lead-points li { line-height: 1.72; }
:where(.paper-r2) .lead-points li::before { content: ''; position: absolute; left: 0; top: 1.35em; width: 7px; height: 7px; background: var(--bg); }

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

/* 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-r2) :is(.lead-panel, .secondary-card, .brief-card, .index-item) a::after { content: ''; position: absolute; inset: 0; }
:where(.paper-r2) :is(.lead-panel, .secondary-card, .brief-card, .index-item) a:focus-visible { outline: none; }
:where(.paper-r2) :is(.secondary-card, .brief-card, .index-item) { transition: background .15s; }
:where(.paper-r2) :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-r2) .lead-panel:is(:hover, :has(:focus-visible)) { background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--ink)); }
:where(.paper-r2) :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-r2) .briefing { padding-bottom: 26px; }
:where(.paper-r2) .brief-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
:where(.paper-r2) .brief-card { position: relative; min-width: 0; padding: 17px 17px 15px; border-right: 1px solid var(--line); }
:where(.paper-r2) .brief-card:last-child { border-right: 0; }
:where(.paper-r2) .brief-card h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
:where(.paper-r2) .briefing[lang='th'] .brief-card h3 { font-weight: 700; line-height: 1.55; }
:where(.paper-r2) .briefing[lang='vi'] .brief-card h3 { line-height: 1.35; }

/* ---- the index, and the way on ---- */
:where(.paper-r2) .index { padding-top: 6px; }
/* The heading runs its rule out to the edge: ── ข่าวอื่น ๆ ━━━━━━━ */
:where(.paper-r2) .index > .section-label { margin-bottom: 4px; color: var(--ink); }
:where(.paper-r2) .index > .section-label::after { content: ''; flex: 1; height: 3px; background: var(--issue-day); }
:where(.paper-r2) .index-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
:where(.paper-r2) .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-r2) .index-item:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
:where(.paper-r2) .index-item a { font-size: 14px; line-height: 1.45; }
:where(.paper-r2) .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-r2) .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-r2) .edition-foot .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; }

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

@media (max-width: 900px) {
  :where(.paper-r2) .edition { grid-template-columns: 115px 1fr; gap: 18px; }
  :where(.paper-r2) .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-r2) .edition-meta .number { margin-top: 0; }
  :where(.paper-r2) .front-grid { grid-template-columns: 1fr; }
  :where(.paper-r2) .lead { padding-right: 0; border-right: 0; }
  :where(.paper-r2) .secondary { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0; border-top: 1px solid var(--line); }
  :where(.paper-r2) .secondary-card { padding: 18px 12px; border-right: 1px solid var(--line); border-bottom: 0; }
  :where(.paper-r2) .secondary-card:last-child { border-right: 0; }
  :where(.paper-r2) .brief-grid { grid-template-columns: repeat(3, 1fr); }
  :where(.paper-r2) .brief-card:nth-child(3) { border-right: 0; }
  :where(.paper-r2) .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-r2) .brief-card:last-child:nth-child(5) { grid-column: span 2; }
  :where(.paper-r2) .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.paper-r2) .index-item:not(:nth-child(3n)) { border-right: 0; }
  :where(.paper-r2) .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-r2) .edition { grid-template-columns: 73px minmax(0, 1fr); gap: 14px; padding: 19px 0 16px; }
  :where(.paper-r2) .date-stamp { display: block; }
  :where(.paper-r2) .date-stamp span { font-size: 54px; line-height: .82; }
  :where(.paper-r2) .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-r2) .edition-name { font-size: clamp(24px, 8vw, 39px); }
  :where(.paper-r2) .edition-meta { display: block; padding-top: 9px; }
  :where(.paper-r2) .edition-meta p:first-child { font-size: 13px; }
  :where(.paper-r2) .edition-meta .number { margin-top: 3px; }
  :where(.paper-r2) .closed-note { min-height: 54px; padding: 7px 0; align-items: flex-start; }
  :where(.paper-r2) .closed-mark { margin-top: .5em; }
  :where(.paper-r2) .lead { padding: 17px 0 18px; }
  :where(.paper-r2) .lead-panel { margin: 0 calc(-1 * var(--pad)); padding: 18px var(--pad) 15px; border-top-width: 7px; }
  :where(.paper-r2) .lead h3 { font-size: 34px; line-height: 1.08; }
  :where(.paper-r2) .lead[lang='th'] h3 { font-size: 31px; line-height: 1.32; }
  :where(.paper-r2) .lead-points { grid-template-columns: 1fr; }
  :where(.paper-r2) .lead-points li { padding: 9px 0 8px 15px; font-size: 13px; }
  :where(.paper-r2) .lead-points li:nth-child(n+4) { display: none; }
  :where(.paper-r2) .secondary { display: block; }
  :where(.paper-r2) .secondary-card, :where(.paper-r2) .secondary-card:last-child { padding: 13px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  :where(.paper-r2) .secondary-card h3 { font-size: 20px; }
  :where(.paper-r2) .briefing { padding-bottom: 19px; }
  :where(.paper-r2) .brief-grid { grid-template-columns: 1fr 1fr; }
  :where(.paper-r2) .brief-card, :where(.paper-r2) .brief-card:nth-child(3), :where(.paper-r2) .brief-card:last-child { padding: 11px 8px; border-top: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  :where(.paper-r2) .brief-card:nth-child(even) { border-right: 0; }
  :where(.paper-r2) .brief-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
  :where(.paper-r2) .brief-card h3 { font-size: 15px; }
  :where(.paper-r2) .index { padding-top: 4px; }
  :where(.paper-r2) .index-list { grid-template-columns: 1fr; }
  :where(.paper-r2) .index-item, :where(.paper-r2) .index-item:nth-child(odd) { margin-right: 0; padding: 10px 8px; border-right: 0; }
  :where(.paper-r2) .index-item a { font-size: 13px; }
  :where(.paper-r2) .empty-edition { min-height: 360px; }
  :where(.paper-r2) .empty-inner { padding: 55px 0; }
}