/* ==========================================================================
   Saizen Acuity · Acuity Daily
   A broadsheet on ivory: ink rules, a Playfair Display SC masthead, upright
   Playfair headlines, DM Mono datelines. Gold carries emphasis, emerald only
   means "live". Buttons, tabs and chips match The Council and the Accelerator.

   00 Tokens and base      05 The news desk        10 Footer
   01 Atoms                06 Stories              11 Story preview
   02 Masthead             07 Publications         12 Responsive
   03 Front page           08 Source edition       13 Motion and print
   04 The sections         09 Search edition
   ========================================================================== */

/* ── 00 · Tokens and base ───────────────────────────────── */
.news {
  --paper: #FAF8F3;
  --paper-2: #F2EEE5;
  --paper-3: #E7E0D0;
  --card: #FFFDF8;
  --ink: #17130E;
  --ink-2: #3F382F;
  --muted: #7D7466;
  --line: rgba(23, 19, 14, 0.12);
  --line-2: rgba(23, 19, 14, 0.06);
  --rule: rgba(23, 19, 14, 0.24);
  --cream: #FFF8EA;
  --gold: #B8892B;
  --gold-2: #E2AE36;
  --gold-3: #F6D57A;
  --gold-d: #8E6416;
  --emerald: #0E9F6E;
  --emerald-d: #087A54;

  --f-mast: 'Playfair Display SC', 'Playfair Display', Georgia, serif;
  --f-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --photo-radius: 8px;

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Resets carry zero specificity (:where) so component and nav colours always win. */
:where(.news) *, :where(.news) *::before, :where(.news) *::after { box-sizing: border-box; }
.news [hidden] { display: none !important; }
:where(.news) a { color: inherit; text-decoration: none; }
:where(.news) :is(button, input, select) { font: inherit; color: inherit; }
:where(.news) button { cursor: pointer; }
:where(.news) button:disabled { opacity: 0.45; cursor: default; }
:where(.news) :is(img, svg) { display: block; max-width: 100%; }
:where(.news) :is(h1, h2, h3, h4, p, ol, ul, dl, dd) { margin: 0; }
:where(.news) :is(ol, ul) { padding: 0; list-style: none; }
.news :focus-visible { outline: 2px solid var(--emerald-d); outline-offset: 3px; border-radius: 4px; }
.news ::selection { background: var(--gold-3); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.news-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.news-skip { position: fixed; top: -100px; left: 20px; z-index: 2000; padding: 12px 20px; background: var(--ink); color: var(--cream); border-radius: 14px; }
.news-skip:focus { top: 20px; }
.noscript { margin: 30px var(--gutter); padding: 20px; border: 1px solid var(--gold); border-radius: 14px; }

/* ── 01 · Atoms ─────────────────────────────────────────── */
.dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.15); }
.mast__live .dot, .rubric .dot { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(14, 159, 110, 0); } }

.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; font: 400 10px/1.5 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.kicker > span:first-child { color: var(--gold); }
.kicker i { font-style: normal; color: var(--muted); }
.kicker a:hover { color: var(--gold); }
.rubric { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 2px solid var(--ink); font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }

/* Headline buttons: real buttons that read as type. */
:where(.news) :is(h2, h3, h4) > button {
  display: inline; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit;
  transition: color 0.25s;
}
:where(.news) :is(h2, h3, h4) > button:hover { color: var(--gold-d); }

/* Photographs */
.front__figure, .tease__figure, .sect__figure, .story__figure {
  position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--photo-radius); background: var(--paper-2);
}
.front__figure img, .tease__figure img, .sect__figure img, .story__figure img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);
}
.front__figure:hover img, .tease__figure:hover img, .sect__figure:hover img, .story__figure:hover img { transform: scale(1.035); }

/* Buttons, as on The Council */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 58px; padding: 0 10px 0 26px; border: 0; border-radius: 20px;
  font: 500 15px/1 var(--f-body); letter-spacing: 0.005em; white-space: nowrap;
  transition: transform 0.5s var(--spring), box-shadow 0.4s, background 0.3s, color 0.3s;
}
.btn__ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; transition: transform 0.55s var(--spring); }
.btn__ico svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .btn__ico { transform: rotate(-45deg); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--ink { background: var(--ink); color: var(--cream); box-shadow: 0 18px 40px -18px rgba(23, 19, 14, 0.7); }
.btn--ink .btn__ico { background: linear-gradient(135deg, var(--gold-3), var(--gold-2) 45%, var(--gold)); color: var(--ink); }
.btn--ink::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(243, 212, 138, 0.45) 50%, transparent 65%); transform: translateX(-110%); transition: transform 1s var(--ease); }
.btn--ink:hover::before { transform: translateX(110%); }
.btn--ghost { background: rgba(255, 253, 248, 0.88); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost .btn__ico { background: rgba(23, 19, 14, 0.06); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn--sm { height: 44px; padding: 0 18px; border-radius: 14px; font-size: 13.5px; gap: 10px; }
.btn--ink:not(:has(.btn__ico)) { padding-right: 26px; justify-content: center; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 13px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; line-height: 1; transition: background 0.3s, box-shadow 0.3s; }
.icon-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.icon-btn.is-loading { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 400 10.5px/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.text-link:hover { color: var(--gold); }
.mini-link { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-body); white-space: nowrap; color: var(--ink); }
.mini-link svg { flex: none; width: 24px; height: 24px; padding: 6px; border-radius: 8px; background: rgba(23, 19, 14, 0.05); transition: transform 0.45s var(--spring), background 0.3s; }
.mini-link:hover svg { transform: rotate(-45deg); background: var(--gold-3); }

.save { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); transition: background 0.3s, color 0.3s; }
.save svg { width: 13px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.save:hover { background: var(--paper-2); color: var(--ink); }
.save.is-saved { color: var(--gold); background: rgba(226, 174, 54, 0.12); }
.save.is-saved svg { fill: var(--gold-3); }

/* ── 02 · Masthead ──────────────────────────────────────── */
.mast { padding-top: 112px; }
.mast__dateline {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
  font: 400 10.5px/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.mast__dateline i { font-style: normal; color: var(--gold); }
.mast__dateline > :nth-child(2) { text-align: center; color: var(--ink); }
.mast__live { justify-self: end; display: inline-flex; align-items: center; gap: 9px; }

.mast__title { display: grid; grid-template-columns: 184px minmax(0, 1fr) 184px; align-items: center; gap: 28px; padding: 30px 0 26px; }
.mast__ear { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mast__ear .label { font: 400 9.5px/1.4 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mast__ear b { font: 400 34px/1.05 var(--f-serif); color: var(--ink); }
.mast__ear--crest { align-items: center; gap: 8px; text-align: center; }
.mast__name { text-align: center; font-family: var(--f-mast); font-weight: 400; line-height: 0.92; }
.mast__the { display: block; margin-bottom: 10px; font-size: 15px; letter-spacing: 0.6em; padding-left: 0.6em; color: var(--gold); }
.mast__word { display: block; font-size: clamp(38px, 5.5vw, 82px); letter-spacing: -0.005em; white-space: nowrap; }
.mast__word b { font-weight: 700; color: var(--gold); }

.mast__sections { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); }
.mast__links { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mast__links::-webkit-scrollbar { display: none; }
.mast__links a { position: relative; padding: 15px 15px; font: 500 13.5px/1.2 var(--f-body); white-space: nowrap; color: var(--ink-2); transition: color 0.25s; }
.mast__links a:first-child { padding-left: 0; }
.mast__links a:hover { color: var(--gold-d); }
.mast__links a[aria-current] { color: var(--ink); }
.mast__links a[aria-current]::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: -1px; height: 2px; background: var(--gold); }
.mast__links a:first-child[aria-current]::after { left: 0; }
.mast__search { flex: none; display: flex; align-items: center; gap: 9px; width: 250px; height: 38px; padding: 0 13px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s; }
.mast__search:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(226, 174, 54, 0.14); }
.mast__search svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.mast__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13.5px; }

.mast--compact .mast__title { grid-template-columns: 1fr; padding: 18px 0 16px; }
.mast--compact .mast__ear { display: none; }
.mast--compact .mast__the { font-size: 11px; margin-bottom: 6px; }
.mast--compact .mast__word { font-size: clamp(30px, 3.4vw, 46px); }
.mast--compact .mast__name a:hover b { color: var(--gold-d); }

/* ── 03 · Front page ────────────────────────────────────── */
.front { padding-top: 30px; }
.front__grid { display: grid; grid-template-columns: minmax(0, 2.9fr) minmax(0, 6.2fr) minmax(0, 3fr); grid-template-areas: "latest lead side"; }
.front__latest { grid-area: latest; padding-right: 26px; }
.front__lead { grid-area: lead; padding: 0 28px; border-inline: 1px solid var(--line); min-width: 0; }
.front__side { grid-area: side; padding-left: 26px; min-width: 0; }

.front__latest li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.front__latest li:last-child { border-bottom: 0; }
.front__latest time { display: block; font: 500 10px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald-d); }
.front__latest h3 { margin: 5px 0 6px; font: 400 17px/1.3 var(--f-serif); letter-spacing: -0.005em; text-wrap: pretty; }
.front__latest p { font: 400 9.5px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.front__latest p a:hover { color: var(--gold); }

.front__figure { aspect-ratio: 3 / 2; }
.front__figure--plate img { opacity: 0.6; }
.front__figure--plate span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(48px, 6vw, 88px)/1 var(--f-mast); color: var(--gold-d); }
.front__copy { padding-top: 20px; }
.front__headline { margin: 12px 0 14px; font: 400 clamp(30px, 2.9vw, 44px)/1.1 var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }
.front__lead--text .front__headline { font-size: clamp(34px, 3.3vw, 50px); }
.front__standfirst { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.front__byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 10.5px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.front__byline i { font-style: normal; color: var(--gold); }
.front__actions { display: inline-flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; }
.front__placeholder { padding: 40px 0; }
.front__placeholder .front__headline { color: var(--muted); }

.tease { min-width: 0; }
.tease .kicker { margin: 14px 0 7px; }
.tease h3 { font: 400 21px/1.24 var(--f-serif); letter-spacing: -0.01em; text-wrap: pretty; }
.tease > p:not(.kicker) { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tease time { display: block; margin-top: 10px; font: 400 10px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tease__figure { aspect-ratio: 16 / 10; }
.tease--text .kicker { margin-top: 0; padding-top: 14px; border-top: 3px solid var(--gold); display: flex; }
.tease--text h3 { font-size: 23px; }
.front__side .tease + .tease { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.front__side .tease--text + .tease--text { border-top: 0; padding-top: 0; }

.front__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ink); }
.front__row .tease { padding: 0 22px; border-left: 1px solid var(--line); }
.front__row .tease:first-child { padding-left: 0; border-left: 0; }
.front__row .tease:last-child { padding-right: 0; }
.front__row .tease__figure { aspect-ratio: 3 / 2; }
.front__row .tease h3 { font-size: 19px; }

/* Search band, between the front page and the sections */
.finder { padding-top: 46px; }
.finder__in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 40px; padding: 26px 0 22px; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); }
.finder h2 { margin-top: 8px; font: 400 clamp(26px, 2.6vw, 36px)/1.05 var(--f-mast); white-space: nowrap; }
.finder h2 b { font-weight: 400; color: var(--gold); }
.finder__form { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 9px 0 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(60, 40, 10, 0.35); transition: box-shadow 0.3s; }
.finder__form:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(226, 174, 54, 0.14); }
.finder__form > svg { width: 19px; height: 19px; flex: none; color: var(--gold); }
.finder__form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.finder__form input::-webkit-search-cancel-button { display: none; }
.finder__form .btn { flex: none; padding-right: 6px; }
.finder__form .btn__ico { width: 32px; height: 32px; border-radius: 11px; }
.finder__suggest { grid-column: 2; margin-top: 0; }

/* ── 04 · The sections ──────────────────────────────────── */
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 16px; margin-bottom: 30px; border-bottom: 2px solid var(--ink); }
.section-head h2 { font: 400 clamp(30px, 3.2vw, 44px)/1 var(--f-mast); letter-spacing: -0.005em; }
.section-head h2 b { font-weight: 400; color: var(--gold); }
.section-head > p { font-size: 14.5px; color: var(--muted); }

.sections { padding-top: 84px; }
.sections__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
.sect { display: flex; flex-direction: column; min-width: 0; padding: 0 26px; border-left: 1px solid var(--line); }
.sect:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.sect:nth-child(3n) { padding-right: 0; }
.sect__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.sect__head h3 { font: 400 25px/1 var(--f-mast); }
.sect__head span { font: 400 9.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sect__figure { aspect-ratio: 16 / 9; margin-bottom: 14px; }
.sect__top h4 { margin-top: 7px; font: 400 21px/1.24 var(--f-serif); letter-spacing: -0.01em; text-wrap: pretty; }
.sect__top .kicker > a:first-child { color: var(--ink-2); }
.sect ul { margin-top: 14px; }
.sect li { padding: 12px 0; border-top: 1px solid var(--line); }
.sect li h4 { font: 400 16px/1.32 var(--f-serif); text-wrap: pretty; }
.sect li .kicker { margin-top: 5px; color: var(--muted); }
.sect__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-d); }
.sect__more svg { width: 13px; height: 13px; transition: transform 0.4s var(--spring); }
.sect__more:hover svg { transform: translateX(4px); }

/* ── 05 · The news desk ─────────────────────────────────── */
.desk { padding-top: 92px; padding-bottom: 72px; scroll-margin-top: 96px; }
.desk__refresh { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 400 10px/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--muted); }

.controls { position: sticky; top: 92px; z-index: 35; padding: 9px 13px 12px; border: 1px solid #E5DFD3; border-radius: 24px; background: rgba(255, 253, 248, 0.96); box-shadow: 0 18px 44px -28px rgba(60, 40, 10, 0.4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.controls__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 9px; border-bottom: 1px solid var(--line-2); }
.tabs { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 42px; padding: 0 16px; border: 0; border-radius: 14px; background: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background 0.25s, color 0.25s; }
.tabs button span { margin-left: 7px; font: 400 10px var(--f-mono); opacity: 0.6; }
.tabs button:hover { background: var(--line-2); }
.tabs button.is-active { background: var(--ink); color: var(--cream); box-shadow: 0 8px 20px -13px rgba(23, 19, 14, 0.6); }
.tabs button.is-active span { color: var(--gold-3); opacity: 1; }
.layout { display: flex; padding: 3px; border-radius: 14px; background: var(--line-2); }
.layout button { width: 36px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 11px; background: none; color: var(--muted); }
.layout button.is-active { background: var(--card); color: var(--ink); box-shadow: 0 3px 7px rgba(23, 19, 14, 0.06); }
.layout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.controls__search { display: flex; align-items: center; gap: 10px; padding: 12px 0 9px; }
.search { position: relative; flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s; }
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(226, 174, 54, 0.14); }
.search > svg { position: absolute; left: 16px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; height: 100%; padding: 0 46px; border: 0; border-radius: 16px; outline: 0; background: none; font-size: 14.5px; }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 13px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; font: 11px var(--f-mono); color: var(--muted); }
.search:focus-within kbd, .search.has-query kbd { display: none; }
.search > button { position: absolute; right: 9px; width: 30px; height: 30px; border: 0; border-radius: 10px; background: var(--paper); font-size: 19px; }
.sort select { height: 44px; max-width: 170px; padding: 0 30px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 13px; }

.chips { display: flex; gap: 3px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 0; border-radius: 12px; background: none; font: 500 12.5px/1 var(--f-body); transition: background 0.3s, color 0.3s; }
.chip sup { font: 9.5px var(--f-mono); color: var(--muted); }
.chip:hover { background: rgba(181, 137, 42, 0.08); }
.chip.is-active { background: #EDE6D7; color: #70501A; }
.chip.is-active sup { color: var(--gold); }

.advanced { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px; margin-top: 13px; padding: 17px 4px 4px; border-top: 1px solid var(--line); }
.advanced > label { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; font: 9.5px/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.advanced select, .advanced input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 13px var(--f-body); color: var(--ink); text-transform: none; letter-spacing: 0; }

.results-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0 26px; font: 400 10.5px/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--muted); }
.notice { margin-bottom: 22px; padding: 14px 18px; border: 1px solid rgba(226, 174, 54, 0.35); border-radius: 14px; background: #FFF8E7; font-size: 13px; color: #70501A; }
.health { max-height: 400px; overflow: auto; margin-bottom: 26px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.health > div { display: grid; grid-template-columns: 1fr 1.4fr 24px; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.health > div:last-child { border-bottom: 0; }
.health > div > span { font: 10px/1.5 var(--f-mono); color: var(--muted); }
.health .is-error { color: #9A4730; }

/* ── 06 · Stories ───────────────────────────────────────── */
.stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.story { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.story__figure { aspect-ratio: 3 / 2; margin-bottom: 15px; }
.story__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.story__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.story h3 { margin: 6px 0 10px; font: 400 20px/1.26 var(--f-serif); letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: pretty; }
.story__summary { font-size: 13.5px; line-height: 1.62; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; font: 400 10px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--muted); }
.story--text::before { content: ''; position: absolute; top: -2px; left: 0; width: 48px; height: 3px; background: var(--gold); }
.story--text h3 { font-size: 22px; }
.story--text .story__summary { -webkit-line-clamp: 7; }
.story--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; }
.story--wide .story__figure { aspect-ratio: auto; height: 100%; min-height: 300px; margin: 0; }
.story--wide h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.16; }
.story--wide .story__summary { -webkit-line-clamp: 5; font-size: 14.5px; }

.stories.is-list { grid-template-columns: 1fr; gap: 0; }
.stories.is-list .story { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; padding: 22px 0; }
.stories.is-list .story--text { grid-template-columns: 1fr; }
.stories.is-list .story__figure { margin: 0; }
.stories.is-list .story h3 { font-size: 23px; margin-bottom: 6px; }
.stories.is-list .story__summary { -webkit-line-clamp: 2; max-width: 80ch; }
.stories.is-list .story__foot { padding-top: 10px; }

/* ── 07 · Publications ──────────────────────────────────── */
.pubs__group + .pubs__group { margin-top: 44px; }
.pubs__cat { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 400 25px/1 var(--f-mast); }
.pubs__cat span { font: 400 10px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--muted); }
.pubs__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.pub { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -40px rgba(80, 55, 15, 0.5); transition: transform 0.5s var(--spring), box-shadow 0.4s; }
.pub:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(181, 133, 42, 0.35), 0 30px 60px -40px rgba(80, 55, 15, 0.55); }
.pub__art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 13px; background: var(--paper-2); }
.pub__art img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pub__art span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1 var(--f-mast); color: var(--gold-d); }
.pub__body { display: flex; flex-direction: column; min-width: 0; padding: 4px 4px 2px 0; }
.pub h3 { margin: 6px 0 6px; font: 400 21px/1.15 var(--f-serif); }
.pub h3 a:hover { color: var(--gold-d); }
.pub__body > p:not(.kicker) { font-size: 13px; line-height: 1.55; color: var(--muted); }
.pub__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; font: 400 9.5px/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); }
.pubs.is-list .pubs__list { grid-template-columns: 1fr; gap: 0; }
.pubs.is-list .pub { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; }
.pubs.is-list .pub__art span { font-size: 15px; }
.pubs.is-list .pub__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 4px 24px; }
.pubs.is-list .pub .kicker { display: none; }
.pubs.is-list .pub h3 { margin: 0; font-size: 19px; }
.pubs.is-list .pub__foot { margin: 0; padding: 0; gap: 18px; }

.empty { padding: 64px 24px; text-align: center; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.empty > span { font-size: 46px; color: var(--gold); }
.empty h3 { margin: 14px 0; font: 400 34px/1.15 var(--f-serif); }
.empty p { max-width: 490px; margin: 0 auto 24px; font-size: 14.5px; color: var(--muted); }
.more { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 44px; }
.more p { font: 400 10px/1.7 var(--f-mono); letter-spacing: 0.04em; text-align: center; color: var(--muted); }
.more-count { font: 400 11px var(--f-mono); color: var(--gold-3); }

/* ── 08 · Source edition ────────────────────────────────── */
.pub-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 56px; padding-block: 44px 6px; }
.pub-head__crumb { display: flex; gap: 10px; margin-bottom: 22px; font: 400 10.5px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pub-head__crumb a:hover { color: var(--gold); }
.pub-head h1 { margin: 12px 0 14px; font: 400 clamp(42px, 5.4vw, 78px)/1 var(--f-mast); letter-spacing: -0.01em; text-wrap: balance; }
.pub-head__desc { max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.pub-head__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 34px; margin: 28px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.pub-head__stats dt { font: 400 9.5px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pub-head__stats dd { margin-top: 5px; font: 400 22px/1.1 var(--f-serif); }
.pub-head__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pub-head__art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper-2); box-shadow: 0 0 0 12px rgba(184, 137, 43, 0.05), 0 0 0 13px rgba(184, 137, 43, 0.18); }
.pub-head__art > div { position: absolute; inset: 0; }
.pub-head__art img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.pub-head__art > span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 64px/1 var(--f-mast); color: var(--gold-d); }
.news[data-news-mode="source"] .front { padding-top: 44px; }
.news[data-news-mode="source"] .front__grid { border-top: 2px solid var(--ink); padding-top: 26px; }

/* ── 09 · Search edition ────────────────────────────────── */
.search-head { padding-top: 52px; }
.search-head h1 { max-width: 15em; font: 400 clamp(34px, 4.2vw, 58px)/1.05 var(--f-mast); letter-spacing: -0.01em; text-wrap: balance; }
.search-head h1 b { font-weight: 400; color: var(--gold); }
.search-head > p { max-width: 560px; margin-top: 16px; font-size: 17px; color: var(--ink-2); }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.suggest > span { margin-right: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.suggest button { height: 36px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; transition: box-shadow 0.3s, color 0.3s; }
.suggest button:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-d); }
.news[data-news-mode="search"] .desk { padding-top: 40px; }
.news[data-news-mode="search"] .desk .section-head { padding: 0; margin-bottom: 14px; border: 0; }
.news[data-news-mode="search"] .desk .section-head > :is(h2, p) { display: none; }
.news[data-news-mode="search"] .mast__search { display: none; }

/* ── 10 · Footer ────────────────────────────────────────── */
.foot { padding-bottom: 28px; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 56px 0; border-top: 2px solid var(--ink); }
.foot__top h2 { margin-right: auto; font: 400 clamp(26px, 2.8vw, 40px)/1.15 var(--f-mast); }
.foot__top h2 b { font-weight: 400; color: var(--gold); }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 10px/1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.foot__base a:hover { color: var(--gold); }
.brand { display: flex; align-items: center; gap: 10px; font: 400 20px/1 var(--f-mast); letter-spacing: 0.01em; text-transform: none; color: var(--ink); }
.brand b { font-weight: 700; color: var(--gold); }
.foot__base .brand img { border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(23, 19, 14, 0.18); }

/* ── 11 · Story preview ─────────────────────────────────── */
.is-reading { overflow: hidden; }
.reader { width: min(760px, calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; padding: 0; overflow: auto; border: 0; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 120px rgba(23, 19, 14, 0.35); overscroll-behavior: contain; }
.reader::backdrop { background: rgba(23, 19, 14, 0.55); backdrop-filter: blur(6px); }
.reader__close { position: absolute; top: 14px; right: 14px; z-index: 2; }
#reader-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reader__body { padding: 30px clamp(22px, 5vw, 52px) 40px; }
#reader-image[hidden] + .reader__body { padding-top: 56px; }
.reader h2 { margin: 14px 0 18px; font: 400 clamp(28px, 3.4vw, 40px)/1.14 var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }
#reader-summary { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.reader__note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); }
.reader__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.reader__actions .btn--ghost { padding-inline: 22px; }

/* ── 12 · Responsive ────────────────────────────────────── */
@media (max-width: 1180px) {
  .mast__title { grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 20px; }
  .mast__ear b { font-size: 28px; }
  .front__grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-areas: "lead side" "latest latest"; }
  .front__lead { padding: 0 28px 0 0; border-left: 0; }
  .front__latest { padding: 26px 0 0; margin-top: 30px; border-top: 1px solid var(--ink); }
  .front__latest ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; }
  .front__latest li { border-bottom: 0; border-top: 1px solid var(--line); }
  .front__latest li:nth-child(-n + 3) { border-top: 0; }
  .front__latest li:nth-child(7) { display: none; }
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mast__search { width: 200px; }
}

@media (max-width: 900px) {
  .mast { padding-top: 100px; }
  .mast__title { grid-template-columns: 1fr; padding: 24px 0 20px; }
  .mast__ear { display: none; }
  .mast__word { font-size: clamp(32px, 7.4vw, 66px); }
  .mast__dateline > :first-child { display: none; }
  .mast__dateline { grid-template-columns: 1fr auto; }
  .mast__dateline > :nth-child(2) { text-align: left; }
  .mast__sections { flex-direction: column; align-items: stretch; gap: 0; }
  .mast__search { width: auto; margin: 0 0 12px; height: 42px; }

  .front__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "side" "latest"; }
  .front__lead { padding: 0; border: 0; }
  .front__side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 0 0; margin-top: 30px; border-top: 1px solid var(--ink); }
  .front__side .tease + .tease { margin: 0; padding: 0; border: 0; }
  .front__latest ol { grid-template-columns: 1fr 1fr; }
  .front__latest li:nth-child(3) { border-top: 1px solid var(--line); }
  .front__latest li:nth-child(n + 7) { display: none; }
  .front__row { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .front__row .tease:nth-child(odd) { padding-left: 0; border-left: 0; }
  .front__row .tease:nth-child(even) { padding-right: 0; }

  .finder__in { grid-template-columns: 1fr; }
  .finder__suggest { grid-column: 1; }
  .sections__grid { grid-template-columns: 1fr 1fr; }
  .sect, .sect:nth-child(3n), .sect:nth-child(3n + 1) { padding: 0 22px; border-left: 1px solid var(--line); }
  .sect:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sect:nth-child(even) { padding-right: 0; }

  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
  .story--wide { grid-template-columns: 1fr; gap: 0; }
  .story--wide .story__figure { aspect-ratio: 16 / 9; height: auto; min-height: 0; margin-bottom: 16px; }
  .controls { top: 84px; }
  .pub-head { grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; }
  .pub-head__stats { grid-template-columns: repeat(2, auto); gap: 18px 34px; }
  .pub-head__art > span { font-size: 44px; }
  .pubs.is-list .pub__body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .news { font-size: 15px; }
  .mast { padding-top: 92px; }
  .mast__dateline { grid-template-columns: 1fr; font-size: 9.5px; letter-spacing: 0.12em; }
  .mast__dateline > :nth-child(2) { text-align: center; }
  .mast__live { display: none; }
  .mast__the { font-size: 10px; margin-bottom: 6px; }
  .mast__word { font-size: clamp(28px, 9.2vw, 46px); }
  .mast__links a { padding: 13px 11px; font-size: 13px; }

  .front { padding-top: 22px; }
  .front__headline { font-size: 30px; }
  .front__standfirst { font-size: 15.5px; }
  .front__byline { flex-direction: column; align-items: flex-start; gap: 10px; }
  .front__side { grid-template-columns: 1fr; }
  .front__side .tease + .tease { padding-top: 22px; border-top: 1px solid var(--line); }
  .front__latest ol { grid-template-columns: 1fr; }
  .front__latest li, .front__latest li:nth-child(-n + 3) { border-top: 1px solid var(--line); }
  .front__latest li:first-child { border-top: 0; }
  .front__latest li:nth-child(n + 6) { display: none; }
  .front__row { grid-template-columns: 1fr; }
  .front__row .tease, .front__row .tease:nth-child(even) { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .front__row .tease:first-child { padding-top: 0; border-top: 0; }
  .front__row .tease__figure { aspect-ratio: 16 / 9; }

  .finder { padding-top: 36px; }
  .finder__form { height: 56px; padding-left: 16px; }
  .finder__form .btn { padding: 0 6px; font-size: 0; gap: 0; }
  .section-head { margin-bottom: 22px; }
  .sections { padding-top: 64px; }
  .sections__grid { grid-template-columns: 1fr; row-gap: 36px; }
  .sect, .sect:nth-child(n) { padding: 0; border-left: 0; }

  .desk { padding-top: 64px; padding-bottom: 48px; }
  .desk__refresh { margin-left: 0; width: 100%; justify-content: space-between; }
  .controls { position: relative; top: auto; padding: 8px; border-radius: 20px; }
  .controls__top { gap: 8px; }
  .tabs { flex: 1; gap: 0; }
  .tabs button { height: 39px; padding: 0 10px; font-size: 12px; border-radius: 12px; }
  .tabs button span { margin-left: 4px; font-size: 9px; }
  .layout button { width: 30px; height: 31px; }
  .controls__search { flex-wrap: wrap; gap: 8px; }
  .search { flex-basis: 100%; }
  .controls__search > .btn, .sort { flex: 1; }
  .sort select { width: 100%; max-width: none; height: 44px; }
  .advanced > label:first-child { flex-basis: 100%; }
  .advanced .btn { width: 100%; }
  .results-meta { padding: 18px 0; font-size: 9.5px; }

  .stories { grid-template-columns: 1fr; gap: 30px; }
  .story--wide { grid-column: auto; }
  .story h3, .story--text h3 { font-size: 22px; }
  .stories.is-list .story { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .stories.is-list .story h3 { font-size: 18px; }
  .stories.is-list .story__summary { display: none; }
  .stories.is-list .story__figure { aspect-ratio: 1; }
  .pubs__list { grid-template-columns: 1fr; }
  .pub { grid-template-columns: 84px minmax(0, 1fr); }

  .pub-head { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
  .pub-head__art { width: 150px; order: -1; }
  .pub-head__actions .btn { flex: 1; }
  .search-head { padding-top: 36px; }

  .foot__top { padding: 40px 0; }
  .foot__top .btn { width: 100%; }
  .foot__base { flex-wrap: wrap; gap: 14px; }
  .foot__base .brand { width: 100%; }
  .reader { border-radius: 22px; }
  .reader__actions { flex-direction: column; }
}

@media (max-width: 440px) {
  .tabs button { padding: 0 9px; }
  .tabs button:not(.is-active) span { display: none; }
}

/* ── 13 · Motion and print ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .news *, .news *::before, .news *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sz-nav, .controls, .save, .desk__refresh, .foot, .reader, .news-skip, .more, .mast__search, .front__figure, .tease__figure, .sect__figure, .story__figure { display: none !important; }
  .mast { padding-top: 0; }
  .stories { display: block; }
  .story { break-inside: avoid; margin-bottom: 14px; }
}