/* Hallmark · shape: kept · genre: editorial · theme: custom (RoundTable brand: royal, cyan, ink, Anuphan over Noto Serif Thai) · redesign: polish (motion only; layout kept as the owner asked)
 * hero: kept · nav: kept · footer: kept · imagery: photographs (the paper's own covers, shown whole) · signature: the front grid, five stories with their headlines set over the paper's own photographs
 * motion: one hero settle, one scroll reveal for story cards, state transitions on links, pills and tiles; cards are open (no box, no border), their titles underline on hover · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the layout is kept by request so variety is not this pass's to change; motion held to one settle and one reveal; news tools added this pass: section switcher, search dialog, reading progress, reading time, text size, copy link, back to top */
/* Hallmark · answered F7 · the pill radius sits only on controls: section-bar links, the search trigger, page numbers, tabs, chips and buttons; cards and pictures take the card radius */
/* Hallmark · answered F15 · the column gaps differ by section (64px splits, 24px card grids, 40px people rows); the owner asked to keep this layout, so gaps are not this pass's to change */
@font-face {
  font-family: 'Anuphan';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/anuphan-400-700-normal-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Anuphan';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/anuphan-400-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-thai-400-700-normal-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/noto-serif-thai-400-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* Type: a 1.25 scale from a 17px reading size. */
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem;
  --text-display: clamp(2rem, 1.6vw + 1.25rem, 3rem);
  --text-section: clamp(1.625rem, 1vw + 1rem, 2.25rem);
  --text-title: clamp(1.125rem, 0.3vw + 1rem, 1.3125rem);

  --container: 1360px; --gutter: 48px; --gap-columns: 32px;

  /* Colour: the logo's royal and cyan, an ink navy for text, cool paper. */
  --royal: #244394;
  --royal-deep: #1B3474;
  --cyan: #1EA5E0;
  --ink: #121A33;
  --ink-2: #2A3350;
  --paper: #F6F7FB;
  --card: #FDFDFF;
  --mist: #E7ECF6;
  --slate: #5A6378;
  --line: #D3DAE8;
  --on-royal: #F6F7FB;
  --on-royal-2: #C9D3EC;
  --focus: #1EA5E0;
  --error: #B42318;

  --font-head: "Anuphan", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "Noto Serif Thai", Georgia, serif;

  --radius: 6px; --radius-lg: 12px; --radius-pill: 999px;
  --bar-h: 52px;

  /* Motion: arrivals ease out, exits ease in; exits run at about 70% of the enter. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --shadow-lift: 0 10px 24px -14px rgb(18 26 51 / 0.35);
  --shadow-bar: 0 6px 18px -10px rgb(18 26 51 / 0.5);
  --scrim: rgb(18 26 51 / 0.55);
  --scrim-strong: rgb(9 14 32 / 0.92); --scrim-mid: rgb(9 14 32 / 0.5); --scrim-none: rgb(9 14 32 / 0);
  --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--bar-h) + var(--space-md)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.75; -webkit-font-smoothing: antialiased; }
::selection { background: var(--mist); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: inherit; text-underline-offset: 0.2em; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 600; line-height: 1.32; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 60rem) { :root { --gutter: 24px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* RoundTable · front page and story pages
 * One bold move: the logo's royal blue runs from the masthead through the section bar into the lead story.
 * Below it the paper is quiet: pale ground, photographs with soft corners, sizes that change from section to section.
 * The cyan ring from the logo's O marks each section head. Headlines Anuphan, reading text Noto Serif Thai. */

/* ---------- Shared pieces ---------- */
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

h1 a, h2 a, h3 a, .mlist__title, .hero__latest-title, .sections__name, .sections__story { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, .mlist__title:hover, .hero__latest-title:hover, .sections__story:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--cyan); }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--slate); }
.meta--onblue { color: var(--on-royal-2); }
.dek { margin-top: var(--space-sm); color: var(--ink-2); }

.tag { display: inline-block; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--mist); color: var(--royal); font: 500 var(--text-sm)/1.6 var(--font-head); text-decoration: none; }
.tag:hover { background: var(--royal); color: var(--on-royal); }
.tag--onblue { background: var(--royal-deep); color: var(--on-royal); }
.tag--onblue:hover { background: var(--on-royal); color: var(--royal); }

/* A picture in a fixed shape with soft corners. Covers carry their own text, so the
   picture is shown whole and the same picture, blurred, fills the rest of the frame. */
.frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--mist); isolation: isolate; }
.frame--cover::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bg, none) center / cover; filter: blur(22px) saturate(1.15); opacity: 0.7; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--cover img { object-fit: contain; }
.frame--4x3 { aspect-ratio: 4 / 3; } .frame--1x1 { aspect-ratio: 1; } .frame--16x9 { aspect-ratio: 16 / 9; } .frame--3x2 { aspect-ratio: 3 / 2; }

/* Card: an open card. No box and no border: the picture with soft corners, the text beneath it on the page itself. */
.card { display: flex; flex-direction: column; gap: var(--space-md); }
.card .frame { border-radius: var(--radius-lg); }
.card__body { display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.card__body .tag { align-self: flex-start; }
.card__body .meta { margin-top: auto; }
.card .dek { margin-top: 0; }
.card--lead { gap: var(--space-lg); }
.card--lead .card__title { font-size: var(--text-xl); line-height: 1.35; }
.card--lead .card__body { gap: var(--space-sm); }
.card:hover .card__title a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--cyan); }

/* Row: a small picture beside a headline. */
.row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-block: var(--space-md); }
.row .frame { border-radius: var(--radius-lg); }
.row:first-child { padding-top: 0; }
.row:last-child { padding-bottom: 0; }
.row .tag { margin-bottom: var(--space-xs); }
.row__title { font-size: var(--text-title); font-weight: 700; line-height: 1.4; }
.row .meta { margin-top: var(--space-2xs); }

/* Section head: the logo's ring before the title, the section link at the right. */
.shead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm) var(--space-xl); margin-bottom: var(--space-xl); }
.shead__title { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-section); font-weight: 700; }
.shead__title::before { content: ""; flex: none; width: 0.7em; height: 0.7em; border: 3px solid var(--cyan); border-radius: 50%; background: radial-gradient(circle, var(--cyan) 0 26%, transparent 28%); }
.shead__more { font: 500 var(--text-md)/1.4 var(--font-head); color: var(--royal); white-space: nowrap; }
.shead__more:hover { text-decoration-thickness: 2px; }

.block { padding-block: var(--space-3xl); }
.block--mist { background: var(--mist); }
.block--mist .frame { background: var(--line); }
.block--last { padding-bottom: var(--space-4xl); }

.card__title { font-size: var(--text-title); font-weight: 700; line-height: 1.4; }

/* A list of stories with small pictures. */
.mlist__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-block: var(--space-sm); }
.mlist__item:first-child { padding-top: 0; }
.mlist__item:last-child { padding-bottom: 0; }
.mlist__img { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1; background: var(--mist); }
.mlist__img img { width: 100%; height: 100%; object-fit: cover; }
.mlist__title { display: block; font: 600 var(--text-md)/1.45 var(--font-head); }
.mlist__item .meta { margin-top: var(--space-2xs); }

/* ---------- Masthead and section bar: the logo's blue ---------- */
.masthead { background: var(--royal); color: var(--on-royal); }
.masthead__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding-block: var(--space-md); }
.masthead__date, .masthead__tagline { font: 400 var(--text-sm)/1.4 var(--font-head); color: var(--on-royal-2); }
.masthead__tagline { text-align: right; }
.masthead__logo { margin: 0; font-size: var(--text-md); line-height: 1; }
.masthead__logo img { width: 30rem; }
.masthead a:focus-visible { outline-color: var(--on-royal); }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--royal-deep); }
.bar__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--bar-h); }
.bar__list { display: flex; flex: 1; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; }
.bar__list a, .bar__search { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font: 500 var(--text-md)/1.4 var(--font-head); color: var(--on-royal); text-decoration: none; white-space: nowrap; }
.bar__list a:hover, .bar__search:hover { background: var(--royal); }
.bar__list .current-menu-item > a { background: var(--on-royal); color: var(--royal-deep); }
.bar__search { border: 1px solid var(--on-royal-2); }
.bar a:focus-visible { outline-color: var(--on-royal); }

/* ---------- Front: one lead and four stories, headlines set over their photographs ---------- */
.front { padding-block: var(--space-xl) var(--space-md); }
.front__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 17.5rem); gap: var(--space-md); }
.tile { position: relative; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); background: var(--ink); color: var(--on-royal); }
.tile--lead { grid-column: span 2; grid-row: span 2; }
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tile::before { background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-mid) 42%, var(--scrim-none) 72%); }
.tile::after { background: var(--scrim-mid); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.tile:hover::after { opacity: 0.45; }
.tile__text { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; padding: var(--space-lg); }
.tile--lead .tile__text { gap: var(--space-sm); padding: var(--space-xl); }
.tile__cat { align-self: flex-start; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--cyan); color: var(--ink); font: 600 var(--text-xs)/1.6 var(--font-head); }
.tile__title { font: 700 var(--text-title)/1.38 var(--font-head); color: var(--on-royal); text-wrap: balance; }
.tile--lead .tile__title { font-size: var(--text-display); line-height: 1.25; max-width: 22ch; }
.tile__link { color: inherit; text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__link:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; }
.tile__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile__dek { max-width: 54ch; color: var(--on-royal-2); font-size: var(--text-md); line-height: 1.65; }
.tile__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font: 400 var(--text-sm)/1.5 var(--font-head); color: var(--on-royal-2); }

/* ---------- Politics: one large card, four rows beside it ---------- */
.news { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }

/* ---------- Opinion: one headline, set large on ink ---------- */
.opinion { background: var(--ink); color: var(--on-royal); padding-block: var(--space-3xl); }
.opinion__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg) var(--space-2xl); }
.opinion__label { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-section); }
.opinion__label::before { content: ""; flex: none; width: 0.7em; height: 0.7em; border: 3px solid var(--cyan); border-radius: 50%; background: radial-gradient(circle, var(--cyan) 0 26%, transparent 28%); }
.opinion__statement { font: 600 var(--text-display)/1.3 var(--font-head); max-width: 24ch; text-wrap: balance; }
.opinion__statement a { color: var(--on-royal); text-decoration: none; }
.opinion__statement a:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; }
.opinion__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); font: 400 var(--text-sm)/1.5 var(--font-head); color: var(--on-royal-2); }
.opinion__meta a { color: var(--on-royal); }
.opinion a:focus-visible { outline-color: var(--on-royal); }

/* ---------- Lifestyle: a large lead with two beside it, three beneath ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.grid3__lead { grid-column: span 2; grid-row: span 2; }

/* ---------- Check-in: square covers in a rail ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 18rem); gap: var(--space-lg); padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.rail__item { display: flex; scroll-snap-align: start; }
.rail__item .card { flex: 1; }
.rail:focus-visible { outline-offset: -2px; }

/* ---------- People: a large picture beside its text, two more beneath ---------- */
.people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.people__img { border-radius: var(--radius-lg); }
.people__title { font-size: var(--text-xl); font-weight: 700; line-height: 1.35; }
.people__text .dek { margin-top: var(--space-md); }
.people__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); margin-top: var(--space-2xl); }
.people__more .row { padding: 0; border: 0; }

/* ---------- Every section ---------- */
.sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md); }
.sections__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--space-xs) var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--mist); }
.sections__item:hover { background: var(--line); }
.sections__name { font: 600 var(--text-lg)/1.35 var(--font-head); color: var(--royal); }
.sections__name:hover { text-decoration: underline; }
.sections__count { font: 400 var(--text-sm)/1.9 var(--font-head); color: var(--slate); white-space: nowrap; }
.sections__story { grid-column: 1 / -1; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Story page with sidebar ---------- */
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-2xl); align-items: start; padding-block: var(--space-xl) var(--space-3xl); }
.story__head .tag { margin-bottom: var(--space-md); }
.story__title { font-size: var(--text-display); line-height: 1.28; max-width: 40ch; }
.story__dek { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--ink-2); max-width: 46ch; }
.story__head .meta { margin-top: var(--space-md); }
.story__figure { margin-block: var(--space-xl); }
.story__figure img { width: 100%; border-radius: var(--radius-lg); }
.story__figure figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--slate); }
.prose { max-width: 44rem; font-size: 1.1875rem; line-height: 1.9; }
.prose > * + * { margin-top: var(--space-lg); }
.prose h2, .prose h3 { margin-top: var(--space-2xl); font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose a { color: var(--royal); }
.prose a:hover { text-decoration-thickness: 2px; }
.prose img { border-radius: var(--radius); }
.prose figcaption, .prose .wp-element-caption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--slate); }
.prose blockquote { margin-inline: 0; padding: var(--space-md) var(--space-lg); background: var(--mist); border-radius: var(--radius); }
.prose iframe { max-width: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-width: 44rem; margin-top: var(--space-2xl); }
.story__comments { max-width: 44rem; margin-top: var(--space-3xl); }

.sidebar__inner { display: flex; flex-direction: column; gap: var(--space-lg); }
.side-box { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--mist); }
.side-box__title { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.side-box .mlist__item { grid-template-columns: 72px minmax(0, 1fr); }
.side-box .mlist__title { font-size: var(--text-sm); line-height: 1.5; }
.side-box--follow { background: var(--royal); color: var(--on-royal); }
.side-box--follow p { font-size: var(--text-sm); color: var(--on-royal-2); margin-bottom: var(--space-md); }
.side-box--follow .btn--primary { background: var(--on-royal); color: var(--royal); }
.side-box--follow .btn--primary:hover { background: var(--cyan); color: var(--ink); }
.side-box--follow a:focus-visible { outline-color: var(--on-royal); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { display: inline-block; padding: var(--space-2xs) var(--space-sm); background: var(--paper); border-radius: var(--radius-pill); font: 500 var(--text-sm)/1.5 var(--font-head); color: var(--ink-2); text-decoration: none; }
.chip:hover { background: var(--line); color: var(--royal); }
.chip.is-current { background: var(--royal); color: var(--on-royal); }
.share__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.share__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--mist); color: var(--ink); font: 500 var(--text-sm)/1 var(--font-head); text-decoration: none; }
.share__btn:hover { background: var(--royal); color: var(--on-royal); }
.side-box .share__btn { background: var(--paper); }
.side-box .share__btn:hover { background: var(--royal); color: var(--on-royal); }
.share__label { margin-bottom: var(--space-sm); font: 600 var(--text-md)/1.4 var(--font-head); }
.share--end { display: none; max-width: 44rem; margin-top: var(--space-xl); }
@media (min-width: 60.01rem) and (min-height: 56rem) {
	.sidebar__inner { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); }
}

.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }

/* ---------- Lists: sections, tags, search ---------- */
.listing { padding-block: var(--space-2xl) var(--space-3xl); }
.listing__head { margin-bottom: var(--space-xl); }
.listing__head h1 { font-size: var(--text-display); }
.listing__head .lead { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--ink-2); max-width: 52ch; }
.listing__head .searchform { margin-top: var(--space-lg); }
.listing__list { display: grid; gap: var(--space-md); }
.listing__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-md); }
.listing__img { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3 / 2; background: var(--mist); }
.listing__img img { width: 100%; height: 100%; object-fit: cover; }
.listing__title { font-size: var(--text-xl); max-width: 32ch; }
.listing__text p:not(.meta) { margin-top: var(--space-xs); color: var(--ink-2); }
.listing__empty { max-width: 52ch; font-size: var(--text-lg); }
.rows--wide { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.rows__item { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--mist); }
.rows__title { font-size: var(--text-title); }
.pagination { margin-top: var(--space-2xl); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-sm); border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-head); color: var(--ink); text-decoration: none; background: var(--mist); }
a.page-numbers:hover { background: var(--line); color: var(--royal); }
.page-numbers.current { background: var(--royal); color: var(--on-royal); }

/* Pages */
.page-body { padding-block: var(--space-2xl) var(--space-3xl); }
.page__head { margin-bottom: var(--space-xl); }
.page__head h1 { font-size: var(--text-display); }
.page-body .prose .lead { font-size: var(--text-xl); line-height: 1.6; font-family: var(--font-head); }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-head); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn--primary { background: var(--royal); color: var(--on-royal); }
.btn--primary:hover { background: var(--royal-deep); }
.btn--primary:active { background: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.searchform label, .comment-form label { display: block; margin-bottom: var(--space-xs); font: 500 var(--text-sm)/1.4 var(--font-head); color: var(--slate); }
.searchform__row { display: flex; gap: var(--space-sm); max-width: 36rem; }
input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--slate); border-radius: var(--radius); background: var(--card); color: var(--ink); }
input:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
input:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; }
input:user-invalid, textarea:user-invalid { border-color: var(--error); }

/* Comments */
.comments__title, .comment-reply-title { font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.comments__list { margin-bottom: var(--space-2xl); }
.comments__list li { padding-block: var(--space-lg); border-bottom: 1px solid var(--line); }
.comment-meta { font-size: var(--text-sm); color: var(--slate); }
.comment-content { margin-top: var(--space-xs); }
.comment-form > p { margin-top: var(--space-md); }
.comments__note { font-size: var(--text-sm); color: var(--slate); }

/* ---------- Footer: the logo's blue again ---------- */
.footer { background: var(--royal); color: var(--on-royal); padding-block: var(--space-3xl) var(--space-xl); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--space-lg) var(--space-2xl); }
.footer__logo { display: block; margin-left: calc(var(--space-md) * -1); }
.footer__logo img { width: 100%; max-width: 30rem; }
.footer__line { grid-column: 1; align-self: start; max-width: 44ch; color: var(--on-royal-2); }
.footer__nav { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); align-content: start; }
.footer__h { margin-bottom: var(--space-md); font-size: var(--text-md); color: var(--on-royal); }
.footer__list { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__list a { color: var(--on-royal-2); font: 400 var(--text-md)/1.4 var(--font-head); text-decoration: none; }
.footer__list a:hover { color: var(--on-royal); text-decoration: underline; text-decoration-color: var(--cyan); }
.footer a:focus-visible { outline-color: var(--on-royal); }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--royal-deep); font: 400 var(--text-sm)/1.5 var(--font-head); color: var(--on-royal-2); }

/* ---------- Under 60rem: one column, in reading order ---------- */
@media (max-width: 60rem) {
	.masthead__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: var(--space-md); }
	.masthead__date, .masthead__tagline { display: none; }
	.masthead__logo { width: 100%; }
	.masthead__logo a { display: block; width: min(20rem, 100%); margin-inline: auto; }
	.masthead__logo img { width: 100%; }
	.front__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 24rem repeat(2, 15rem); }
	.tile--lead { grid-row: auto; }
	.news, .life, .people, .opinion__inner, .story-layout, .footer__inner, .listing__item { grid-template-columns: minmax(0, 1fr); }
	.opinion__meta, .footer__line, .footer__nav { grid-column: auto; grid-row: auto; }
	.footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mlist--two, .related, .grid3, .people__more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid3__lead { grid-column: 1 / -1; grid-row: auto; }
	.share--end { display: block; }
	.sidebar .share { display: none; }
	.block { padding-block: var(--space-2xl); }
}
@media (max-width: 40rem) {
	.front__grid { grid-template-rows: 22rem repeat(2, 13rem); gap: var(--space-sm); }
	.front .tile__text { padding: var(--space-md); }
	.front .tile:not(.tile--lead) .tile__title { font-size: var(--text-md); }
	.tile--lead .tile__dek { display: none; }
	.life__card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); }
	.mlist--two, .related, .grid3, .people__more { grid-template-columns: minmax(0, 1fr); }
	.row { grid-template-columns: 7.5rem minmax(0, 1fr); }
	.mlist--news .mlist__item, .mlist--two .mlist__item { grid-template-columns: 96px minmax(0, 1fr); }
	.prose { font-size: calc(1.125rem * var(--prose-scale, 1)); }
}

/* ---------- Motion ---------- */
html { scroll-behavior: smooth; }

/* State: one signal per element, eased. Focus rings never animate. */
a, .tag, .chip, .share__btn, .page-numbers, .bar__list a, .bar__search, .btn, .sections__item {
	transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}
:focus-visible { transition: none; }
.btn:active, .share__btn:active, .chip:active, .tag:active { transform: translateY(1px); transition: transform var(--dur-micro) var(--ease-out); }


/* The section bar gains a soft shadow once it sticks (class set by a sentinel observer). */
.bar { transition: box-shadow var(--dur-short) var(--ease-out); }
.bar.is-stuck { box-shadow: var(--shadow-bar); }


/* The hero settles once: picture, then text, then the latest row; 8px rise, about 0.6s in all. */
@keyframes rt-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.front .tile { animation: rt-settle 480ms var(--ease-out) both; }
.front .tile:nth-child(2) { animation-delay: 50ms; } .front .tile:nth-child(3) { animation-delay: 90ms; }
.front .tile:nth-child(4) { animation-delay: 130ms; } .front .tile:nth-child(5) { animation-delay: 170ms; }

/* The one reveal: story cards below the hero rise into place as they enter, staggered by --i. */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.rail { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html, .rail { scroll-behavior: auto; }
	.front .tile { animation: none; }
	.tile::after { transition: none; }
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- News tools ---------- */
[data-js-only] { display: none !important; }
.js .switch__tabs[data-js-only] { display: flex !important; }
.js .tools[data-js-only] { display: flex !important; }
.js .to-top[data-js-only] { display: inline-flex !important; }
main:focus { outline: none; }

/* Section switcher */
.block--tight { padding-block: var(--space-2xl) var(--space-xl); }
.switch__tabs { flex-wrap: nowrap; gap: var(--space-xs); margin-bottom: var(--space-xl); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-2xs); }
.switch__tab { flex: none; min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--mist); color: var(--ink-2); font: 500 var(--text-md)/1 var(--font-head); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch__tab:hover { background: var(--line); color: var(--ink); }
.switch__tab[aria-selected="true"] { background: var(--royal); color: var(--on-royal); }
.switch__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch__panel + .switch__panel { margin-top: var(--space-2xl); }
.js .switch__panel + .switch__panel { margin-top: 0; }
.js .switch__nojs-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.switch__nojs-title { margin-bottom: var(--space-lg); font-size: var(--text-xl); }
.js .switch__panel:not([hidden]) .grid4 { animation: rt-panel var(--dur-long) var(--ease-out) both; }
@keyframes rt-panel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.switch__more { display: inline-block; margin-top: var(--space-lg); font: 500 var(--text-md)/1.4 var(--font-head); color: var(--royal); }

/* Reading progress, under the section bar */
.progress { position: sticky; top: var(--bar-h); z-index: var(--z-sticky-nav); height: 3px; margin-top: -3px; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }

/* Text size for story text */
.prose { font-size: calc(1.1875rem * var(--prose-scale, 1)); }

/* Story tools: text size and copy link */
.tools { flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); }
.tools__group { display: inline-flex; gap: var(--space-2xs); }
.tools__btn { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: 500 var(--text-sm)/1 var(--font-head); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.share--end .tools__btn { background: var(--mist); }
.tools__btn:hover { background: var(--royal); color: var(--on-royal); }
.tools__btn:active { transform: translateY(1px); }
.tools__btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--paper); color: var(--ink); }
.tools__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tools__status { font: 400 var(--text-sm)/1.4 var(--font-head); color: var(--royal); }

/* Search dialog */
.search-dialog { width: min(40rem, calc(100% - 2 * var(--gutter))); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lift); }
.search-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.search-dialog[open] { animation: rt-pop var(--dur-short) var(--ease-out); }
@keyframes rt-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-dialog__inner { display: grid; gap: var(--space-md); padding: var(--space-xl); }
.search-dialog__title { font-size: var(--text-xl); }
.search-dialog__form { display: flex; gap: var(--space-sm); }
.search-dialog__close { justify-self: start; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--mist); color: var(--ink-2); font: 500 var(--text-sm)/1 var(--font-head); cursor: pointer; }
.search-dialog__close:hover { background: var(--line); }
.search-dialog__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Back to top */
.to-top { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--royal); color: var(--on-royal); font: 500 var(--text-sm)/1 var(--font-head); text-decoration: none; box-shadow: var(--shadow-bar); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.js .to-top:not(.is-shown) { opacity: 0; transform: translateY(12px); pointer-events: none; }
.to-top:hover { background: var(--royal-deep); }
.to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; opacity: 1; transform: none; }

@media (max-width: 60rem) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .search-dialog__form { flex-direction: column; } .to-top { right: var(--space-md); bottom: var(--space-md); } }
@media (prefers-reduced-motion: reduce) {
	.js .switch__panel:not([hidden]) .grid4, .search-dialog[open] { animation: none; }
	.to-top { transition: none; }
}