/*
Theme Name: Seriously Politics
Description: Generated theme for seriouslypolitics.com, built from design tokens.
Version: 2.0
Text Domain: pressroom
*/

:root {
  --bg: #f4f8ff;
  --text: #050710;
  --muted: #3f4872;
  --accent: #004f83;
  --accent-contrast: #f4f8ff;
  --border: #909bc9;
  --surface: #d1d8f2;
  --radius: 6px;
  --space: 1.45rem;
  --maxw: 1320px;
  --font-display: "Sofia Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", Cambria, serif;
  --font-kicker: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
/* Serif display for headlines; clean sans for UI/labels — an editorial pairing. */
h1,h2,h3,h4,.brand__name,.card__title,.section-head,.hero__title,.pick__title,.article__title {
  font-family:var(--font-display); font-weight:700; }
.nav a,.pill,.btn,.meta,.header-search input,.brand__logo { font-family:var(--font-text); }
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); }

/* Top social bar */
.topbar { background:var(--text); color:var(--bg); font-size:.8rem; }
.topbar .container { display:flex; justify-content:flex-end; gap:1rem;
  padding:.4rem var(--space); }
.topbar a { color:var(--bg); opacity:.85; }

/* Header */
.site-header { border-top:3px solid var(--accent); border-bottom:1px solid var(--border);
  background:var(--bg); position:sticky; top:0; z-index:20; }
.site-header__bar { display:flex; align-items:center; gap:var(--space);
  padding:calc(var(--space)*.9) 0; }
.brand { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.brand__logo { display:grid; place-items:center; width:40px; height:40px;
  border-radius:calc(var(--radius)*.7); background:var(--accent);
  color:var(--accent-contrast); font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; line-height:1; flex:0 0 auto; }
.brand__mark { flex:0 0 auto; line-height:0; }
.brand__mark svg { width:40px; height:40px; display:block; }
.brand__name { font-weight:800; font-size:1.5rem; letter-spacing:-.02em; white-space:nowrap; }
.nav { flex:1 1 auto; }
.nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:1.15rem; margin:0; padding:0; }
.nav a { font-weight:600; font-size:.92rem; }
.nav a:hover { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:.7rem; }
/* Language switcher: endonyms, never flags; the current section is active.
   Token-driven, so it inherits each archetype's own colours and type voice. */
.lang-switch { display:inline-flex; align-items:center; gap:.1rem;
  font-family:var(--font-text); font-size:.8rem; font-weight:600; flex:0 0 auto; }
.lang-switch__opt { color:var(--muted); padding:.15rem .45rem;
  border-radius:calc(var(--radius)*.6); white-space:nowrap; }
.lang-switch__opt:hover { color:var(--accent); }
.lang-switch__opt.is-active { color:var(--text); background:var(--surface); }
.header-search input { border:1px solid var(--border); border-radius:999px;
  padding:.45rem .9rem; font:inherit; font-size:.85rem; background:var(--surface);
  color:var(--text); width:150px; }
.btn { display:inline-block; font-weight:700; font-size:.85rem; padding:.5rem 1.05rem;
  border-radius:999px; background:var(--accent); color:var(--accent-contrast);
  border:1px solid var(--accent); cursor:pointer; }
.btn:hover { filter:brightness(.95); }

/* Pills */
.pill { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px;
  background:var(--surface); color:var(--accent); }

/* Hero — sits in a soft panel so the top of the page has weight */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:calc(var(--space)*1.6);
  align-items:center; margin:calc(var(--space)*1.4) 0;
  padding:calc(var(--space)*1.4); background:var(--surface);
  border-radius:calc(var(--radius)*1.3); }
.hero__imgwrap { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.hero__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hero__imgwrap:hover img { transform:scale(1.03); }
.hero__title { font-size:clamp(2rem, 4.2vw, 3.25rem); line-height:1.1;
  letter-spacing:-.015em; margin:.5rem 0 .4rem; text-wrap:balance; }
.hero__excerpt { color:var(--muted); font-size:1.12rem; line-height:1.55; margin:.5rem 0;
  max-width:46ch; }
/* Not flex: mixed text nodes + a separator span in a flex row could collapse
   onto one another on wrap. Plain inline text with a comfortable line-height. */
.meta { color:var(--muted); font-size:.82rem; line-height:1.6;
  font-family:var(--font-text); }
.meta .dot { opacity:.5; margin:0 .35rem; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } }

/* Section heads */
.section { padding:calc(var(--space)*1.2) 0; }
.section-head { display:flex; align-items:center; gap:.8rem; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 var(--space); }
.section-head::before { content:""; width:.65rem; height:1.3rem; border-radius:3px;
  background:var(--accent); flex:0 0 auto; }
.section-head::after { content:""; flex:1; height:2px; background:var(--border); }

/* Card grids */
.grid { display:grid; gap:calc(var(--space)*1.3); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid-3,.grid-4 { grid-template-columns:1fr; } }
/* Flex column so the card box always encloses image + pill + title + meta;
   without it the row can end at the image and the next block (pagination)
   draws over the titles. */
.card { display:flex; flex-direction:column; transition:transform .2s ease; }
.card:hover { transform:translateY(-3px); }
.card__imgwrap { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card:hover .card__imgwrap { box-shadow:0 8px 24px rgba(0,0,0,.12); }
.card__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card__imgwrap img { transform:scale(1.04); }
/* Never render an empty picture box: if a post has no image, drop the frame
   entirely (and let the hero fall back to a single column). */
.card__imgwrap:not(:has(img)), .hero__imgwrap:not(:has(img)),
.pick__img:not(:has(img)) { display:none; }
.hero:not(:has(.hero__imgwrap img)) { grid-template-columns:1fr; }
.card__title { font-size:1.08rem; line-height:1.35; margin:.4rem 0 .35rem; }
.card:hover .card__title { color:var(--accent); }
/* Pills sit on their own line above the title with real separation. */
.card .pill, .hero .pill, .article .pill { display:inline-block; margin-bottom:.4rem; }
/* Long unbroken Cyrillic titles must wrap, not overrun neighbouring text. */
.card__title, .hero__title, .article__title, .pick__title { overflow-wrap:break-word; }
.card__title a, .hero__title a { display:inline-block; }

/* Editor picks: alternating list */
.picks { display:flex; flex-direction:column; gap:calc(var(--space)*1.2); }
.pick { display:grid; grid-template-columns:300px 1fr; gap:calc(var(--space)*1.2);
  align-items:center; }
.pick:nth-child(even) { grid-template-columns:1fr 300px; }
.pick:nth-child(even) .pick__img { order:2; }
.pick__img { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.pick__img img { width:100%; height:100%; object-fit:cover; }
.pick__title { font-family:var(--font-display); font-size:1.4rem; line-height:1.2;
  margin:.4rem 0; }
.pick__excerpt { color:var(--muted); margin:.3rem 0 .6rem; }
@media (max-width:700px) { .pick,.pick:nth-child(even) { grid-template-columns:1fr; }
  .pick:nth-child(even) .pick__img { order:0; } }

/* Pagination */
.pagination { display:flex; gap:.4rem; padding:var(--space) 0; flex-wrap:wrap;
  justify-content:center; clear:both; margin-top:calc(var(--space)*1.4);
  position:relative; z-index:1; }
.pagination a,.pagination span { font-family:var(--font-display); font-weight:600;
  padding:.5rem .85rem; border-radius:var(--radius); border:1px solid var(--border); }
.pagination .current { background:var(--accent); color:var(--accent-contrast);
  border-color:var(--accent); }

/* Article */
.article { max-width:740px; margin:0 auto; padding:calc(var(--space)*1.8) 0; }
.article__title { font-size:2.5rem; line-height:1.2; letter-spacing:-.02em; margin:.5rem 0; }
.article__img { border-radius:var(--radius); overflow:hidden; margin:var(--space) 0; }
.article__body { font-size:1.12rem; }
.article__body p { margin:0 0 1.2rem; }
.article__body h2 { font-family:var(--font-display); font-size:1.6rem; margin:2rem 0 .6rem; }
.article__body h3 { font-family:var(--font-display); font-size:1.22rem; margin:1.5rem 0 .5rem; }
.article__body ul { margin:0 0 1.2rem 1.2rem; }
.article__body li { margin:0 0 .4rem; }
.article__body a { color:var(--accent); text-decoration:underline; }

/* ======================================================================
   AI-citable content blocks — FAQ / data table / key stats.
   The content pipeline may emit these inside a post's HTML; they are styled
   purely from each archetype's design tokens (colour, radius, type voices), so
   they read as native in newsroom / magazine / knowledge / longread and follow
   the same light/dark token flips (the newsroom re-pins tokens for dark mode).
   ====================================================================== */
/* FAQ — accessible disclosure: visible summary, clear open state, keyboard focus. */
.pr-faq { margin:calc(var(--space)*1.5) 0; border-top:1px solid var(--border); }
.pr-faq__item { border-bottom:1px solid var(--border); }
.pr-faq__item > summary { cursor:pointer; list-style:none; display:block;
  position:relative; padding:1rem 2.2rem 1rem 0; font-family:var(--font-display);
  font-weight:700; font-size:1.08rem; line-height:1.35; color:var(--text); }
.pr-faq__item > summary::-webkit-details-marker { display:none; }
.pr-faq__item > summary::after { content:"+"; position:absolute; right:.2rem; top:.85rem;
  font-family:var(--font-text); font-weight:400; font-size:1.5rem; line-height:1;
  color:var(--accent); transition:transform .2s ease; }
.pr-faq__item[open] > summary::after { content:"\2212"; }
.pr-faq__item > summary:focus-visible { outline:2px solid var(--accent);
  outline-offset:2px; border-radius:calc(var(--radius)*.5); }
.pr-faq__a { padding:0 0 1.1rem; color:var(--muted); line-height:1.6; max-width:70ch; }
.pr-faq__a > *:first-child { margin-top:0; }
.pr-faq__a > *:last-child { margin-bottom:0; }

/* Data / comparison table — bordered, horizontally scrollable, tabular figures. */
.pr-data { margin:calc(var(--space)*1.5) 0; overflow-x:auto;
  border:1px solid var(--border); border-radius:var(--radius); }
.pr-data figcaption { padding:.8rem 1rem; font-family:var(--font-kicker);
  text-transform:uppercase; letter-spacing:.06em; font-size:.76rem; font-weight:600;
  color:var(--muted); background:var(--surface); border-bottom:1px solid var(--border); }
.pr-data table { border-collapse:collapse; width:100%; font-size:.96rem;
  font-variant-numeric:tabular-nums; }
.pr-data th, .pr-data td { padding:.6rem .9rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); }
.pr-data thead th { font-family:var(--font-display); font-weight:700; color:var(--text);
  border-bottom:2px solid var(--border); }
.pr-data tbody tr:last-child td { border-bottom:0; }
.pr-data tbody tr:hover { background:var(--surface); }

/* Key-stats callout — a tidy row of figures. */
.pr-stats { list-style:none; margin:calc(var(--space)*1.5) 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space); }
.pr-stats li { border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*.9) var(--space); background:var(--surface);
  color:var(--muted); font-size:.9rem; line-height:1.4; }
.pr-stats b { display:block; margin-bottom:.25rem; font-family:var(--font-display);
  font-weight:800; font-size:1.75rem; line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums; }

/* Footer */
.site-footer { background:var(--text); color:var(--bg); margin-top:calc(var(--space)*2.2);
  padding:calc(var(--space)*2) 0 var(--space); }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:calc(var(--space)*1.5);
  margin-bottom:calc(var(--space)*1.4); }
@media (max-width:700px) { .footer-cols { grid-template-columns:1fr; } }
.site-footer h3 { font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;
  opacity:.7; margin:0 0 .8rem; }
.site-footer a { opacity:.85; } .site-footer a:hover { opacity:1; color:var(--accent); }
.site-footer ul { list-style:none; margin:0; padding:0; line-height:2; }
.footer__brand { font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.footer__copy { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--space);
  opacity:.6; font-size:.82rem; }

/* --- Knowledge base archetype: search + category tiles --- */
.kb-hero { text-align:center; background:var(--surface); border-radius:calc(var(--radius)*1.3);
  padding:calc(var(--space)*2.2) var(--space); margin:var(--space) 0 calc(var(--space)*1.6); }
.kb-hero h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 .4rem; }
.kb-hero p { color:var(--muted); margin:0 auto var(--space); max-width:52ch; }
.kb-hero form { display:flex; gap:.5rem; justify-content:center; }
.kb-hero input { border:1px solid var(--border); border-radius:999px; padding:.7rem 1.1rem;
  font:inherit; min-width:min(420px,70vw); background:var(--bg); color:var(--text); }
.kb-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space); }
@media (max-width:760px) { .kb-cats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .kb-cats { grid-template-columns:1fr; } }
.kb-cat { display:block; border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*1.1); background:var(--bg); transition:border-color .2s,transform .2s; }
.kb-cat:hover { border-color:var(--accent); transform:translateY(-2px); }
.kb-cat__name { font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.kb-cat__count { color:var(--muted); font-size:.85rem; }

/* --- Long-read archetype: single column, essay-forward --- */
.lr-wrap { max-width:760px; margin:0 auto; }
.lr-lead { padding:calc(var(--space)*1.8) 0 var(--space); border-bottom:1px solid var(--border); }
.lr-lead__title { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:.5rem 0;
  letter-spacing:-.02em; text-wrap:balance; }
.lr-lead__excerpt { font-size:1.2rem; color:var(--muted); line-height:1.6; }
.lr-list { list-style:none; margin:0; padding:0; }
.lr-item { padding:calc(var(--space)*1.3) 0; border-bottom:1px solid var(--border); }
.lr-item__title { font-size:1.7rem; line-height:1.2; margin:.2rem 0 .4rem; }
.lr-item__title a:hover { color:var(--accent); }
.lr-item__excerpt { color:var(--muted); margin:.2rem 0; }

/* ======================================================================
   MAGAZINE archetype (B) — "warm photo-led magazine"
   Photo-forward, restrained, no gimmicks. Colours come from the palette
   tokens (so every site differs); the warm-editorial feel is carried by
   structure, generous rhythm and the three-voice type system. Kickers use
   the condensed voice, headlines the serif, body the humanist sans.
   ====================================================================== */
.mag { padding-bottom:calc(var(--space)*2); }
.mag .kicker, .mag-kicker { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; font-weight:600; color:var(--accent); }
.mag .pill { font-family:var(--font-kicker); }

/* Photo boxes: strict crops, hairline frame, warm neutral fill behind the
   image. When a post has no featured image the frame collapses (see guards). */
.mag-photo { display:block; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); }
.mag-photo img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
a.mag-photo:hover img { transform:scale(1.03); }
.mag-photo:not(:has(img)) { display:none; }

/* --- Signature: photo-led lead. Image dominates; the headline sits in a
   SOLID ink bar directly BENEATH the photo — never overlaid on it. --- */
.mag-lead { margin:calc(var(--space)*1.6) 0 calc(var(--space)*1.2); }
.mag-lead__img { aspect-ratio:16/9; border-radius:0; border-bottom:0; }
@media (min-width:820px) {
  .mag-lead__img { aspect-ratio:auto; height:56vh; min-height:420px; max-height:640px; }
}
.mag-lead__bar { background:var(--text); color:var(--bg);
  padding:calc(var(--space)*1.2) calc(var(--space)*1.3) calc(var(--space)*1.3); }
.mag-lead__bar .pill { margin-bottom:.7rem; }
.mag-lead__title { font-family:var(--font-display); font-weight:700; color:var(--bg);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.12; letter-spacing:-.01em;
  margin:.2rem 0 0; max-width:24ch; overflow-wrap:break-word; }
.mag-lead__title a { color:inherit; }
.mag-lead__title a:hover { color:var(--accent); }
.mag-lead__foot { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:baseline;
  margin-top:calc(var(--space)*1.1); padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.18); }
.mag-lead__foot .meta { color:var(--bg); opacity:.75; }
.mag-lead__caption { color:var(--muted); font-size:.95rem; line-height:1.55;
  margin:.9rem 0 0; max-width:70ch; }

/* Section head: a ruled bar with a condensed label and an "Все →" affordance. */
.mag-sec { margin-top:calc(var(--space)*2.4); }
.mag-sec__head { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; border-bottom:2px solid var(--text); padding-bottom:.6rem;
  margin-bottom:calc(var(--space)*1.3); }
.mag-sec__head h2 { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; font-size:1.25rem; margin:0; color:var(--text); }
.mag-all { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; font-weight:600; color:var(--accent); white-space:nowrap; }
.mag-all:hover { text-decoration:underline; text-underline-offset:3px; }

/* Story grid — strict 3:2 crops. */
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--space)*1.6) calc(var(--space)*1.4); }
@media (max-width:820px) { .mag-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .mag-grid { grid-template-columns:1fr; } }
.mag-card__img { aspect-ratio:3/2; }
.mag-card .pill { display:inline-block; margin:.85rem 0 .5rem; }
.mag-card__title { font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  line-height:1.24; margin:0; overflow-wrap:break-word; }
.mag-card__title a:hover { color:var(--accent); }
.mag-card .meta { display:block; margin-top:.55rem; }

/* Topic rails: a lead story + two columns of headline-only items. */
.mag-rail { display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:calc(var(--space)*1.5); }
@media (max-width:820px) { .mag-rail { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .mag-rail { grid-template-columns:1fr; } }
.mag-rail__img { aspect-ratio:3/2; margin-bottom:.9rem; }
.mag-rail__lead h3 { font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  line-height:1.18; margin:.5rem 0 0; overflow-wrap:break-word; }
.mag-rail__lead h3 a:hover { color:var(--accent); }
.mag-rail__dek { color:var(--muted); font-size:.98rem; line-height:1.55; margin:.7rem 0 0;
  max-width:52ch; }
.mag-rail__col { display:flex; flex-direction:column; gap:calc(var(--space)*1.1); }
.mag-rail__item { border-top:1px solid var(--border); padding-top:.9rem; }
.mag-rail__item h4 { font-family:var(--font-text); font-weight:600; font-size:1rem;
  line-height:1.3; margin:0; overflow-wrap:break-word; }
.mag-rail__item h4 a:hover { color:var(--accent); }
.mag-rail__item .meta { display:block; margin-top:.4rem; }

/* Популярное — a text-only ranked list, plus an optional English teaser aside. */
.mag-pop { display:grid; grid-template-columns:2fr 1fr;
  gap:calc(var(--space)*2.4); align-items:start; }
.mag-pop--solo { grid-template-columns:1fr; }
@media (max-width:820px) { .mag-pop { grid-template-columns:1fr;
  gap:calc(var(--space)*1.8); } }
.mag-poplist { list-style:none; margin:0; padding:0; }
.mag-poplist li { display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  align-items:baseline; padding:.95rem 0; border-top:1px solid var(--border); }
.mag-poplist li:first-child { border-top:0; padding-top:0; }
.mag-num { font-family:var(--font-kicker); font-weight:600; font-size:1.7rem;
  line-height:1; color:var(--accent); min-width:1.4em; }
.mag-poplist a { font-family:var(--font-display); font-weight:700; font-size:1.08rem;
  line-height:1.3; overflow-wrap:break-word; }
.mag-poplist a:hover { color:var(--accent); }
.mag-poplist .meta { display:block; margin-top:.35rem; }

/* English-edition teaser (only rendered when the site has a secondary language). */
.mag-eng__dek { color:var(--muted); font-size:.95rem; line-height:1.55; margin:.2rem 0 1rem; }
.mag-eng__link { font-family:var(--font-kicker); text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:.85rem; color:var(--accent); }
.mag-eng__link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Light magazine footer — paper canvas, hairline rule, muted text. */
.mag-foot { display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem;
  justify-content:space-between; align-items:flex-start; }
.mag-foot__brand { font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--text); }
.mag-foot small { display:block; margin-top:.5rem; color:var(--muted); font-size:.85rem;
  max-width:44ch; line-height:1.5; }
.mag-foot__nav { display:flex; flex-wrap:wrap; gap:.7rem 1.3rem; list-style:none;
  margin:0; padding:0; }
.mag-foot__nav a { font-family:var(--font-kicker); text-transform:uppercase;
  letter-spacing:.08em; font-size:.78rem; color:var(--muted); }
.mag-foot__nav a:hover { color:var(--accent); }
.site-footer--light { background:var(--bg); color:var(--text);
  border-top:1px solid var(--border);
  padding:calc(var(--space)*2) 0 calc(var(--space)*1.6); margin-top:calc(var(--space)*2.2); }

/* Cookie consent bar */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--text); color:var(--bg); padding:.85rem var(--space);
  display:flex; gap:1rem; align-items:center; justify-content:center;
  flex-wrap:wrap; font-size:.9rem; box-shadow:0 -2px 16px rgba(0,0,0,.18); }
/* The class's display:flex would otherwise beat the [hidden] attribute, so the
   bar could never be dismissed (nor stay dismissed). This wins on specificity. */
.cookie-bar[hidden] { display:none; }
.cookie-bar a { color:var(--bg); text-decoration:underline; }
.cookie-bar .btn { padding:.4rem .95rem; }

/* Mobile */
@media (max-width:820px) {
  body { font-size:16px; }
  .site-header__bar { flex-wrap:wrap; gap:.6rem; }
  .brand { flex:1 1 auto; }
  .nav { order:3; flex-basis:100%; overflow-x:auto; }
  .nav ul { flex-wrap:nowrap; gap:1rem; padding-bottom:.2rem; }
  .header-actions { margin-left:auto; }
  .header-search input { width:120px; }
  .hero__title { font-size:1.9rem; }
  .article__title { font-size:2rem; }
  .article__body { font-size:1.05rem; }
}
@media (max-width:460px) {
  .header-search { display:none; }
  .hero__title { font-size:1.6rem; }
}


/* ---------- DESKBOARD: newsprint + oxblood tokens (LIGHT, pinned) ---------- */
:root {
  --paper:#FBFAF7; --ink:#14161A; --ink-muted:#4B5058; --ink-faint:#6C7079;
  --lapis:#6B1F2E; --lapis-light:#C98F99; --muted:#ECEAE4;
  --rule:#D5D2CA; --rule-soft:#E6E3DC;
  --sponsor:#F3EDE2; --sponsor-line:#C9A66B;
  --bg:#FBFAF7; --text:#14161A; --border:#D5D2CA; --surface:#ECEAE4;
  --accent:#6B1F2E; --accent-contrast:#FFFFFF; --maxw:1280px;
}
:root[data-theme="light"] {
  --bg:#FBFAF7; --text:#14161A; --muted:#4B5058; --border:#D5D2CA;
  --surface:#ECEAE4; --accent:#6B1F2E; --accent-contrast:#FFFFFF;
}
body { background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:16.5px; line-height:1.5; }
.container, .g-wrap { max-width:1280px; margin:0 auto;
  padding-left:clamp(16px,2.4vw,36px); padding-right:clamp(16px,2.4vw,36px); }
a { color:inherit; }
a:hover { color:var(--lapis); }
:focus-visible { outline:2px solid var(--lapis); outline-offset:3px; }

/* Labels are tighter and smaller than the gallery's — a daily, not a catalogue. */
.g-label { font-family:var(--font-kicker); font-weight:700; font-size:.6875rem;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.35; color:var(--ink); }
.g-meta { font-family:var(--font-kicker); font-weight:500; font-size:.75rem;
  letter-spacing:.01em; color:var(--ink-muted); margin:0; }
.g-time { font-family:var(--font-kicker); font-weight:600; font-size:.6875rem;
  letter-spacing:.03em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.g-display { font-family:var(--font-display); font-weight:700; letter-spacing:-.012em; }

.g-plate { position:relative; overflow:hidden; background:var(--muted); margin:0; }
.g-plate img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- utility strip + masthead ---------- */
.g-util { border-bottom:1px solid var(--rule); background:var(--ink); }
.g-util, .g-util a { color:#E7E5E0; }
.g-util__in { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:6px 0; flex-wrap:wrap; }
.g-util .g-meta { color:#B9B7B2; }
.g-cadence { display:flex; gap:16px; flex-wrap:wrap; }
.g-id { display:flex; align-items:flex-end; justify-content:space-between;
  gap:22px; flex-wrap:wrap; padding:20px 0 14px; }
.g-id__mark { font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:.92; letter-spacing:-.02em;
  text-transform:uppercase; margin:0; }
.g-id__mark a { text-decoration:none; }
.g-id__sub { margin-top:6px; max-width:56ch; }
.g-id__stats { display:flex; gap:22px; align-items:flex-end; }
.g-stat { display:flex; flex-direction:column; gap:2px; }
.g-stat__n { font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--lapis); }

.g-desknav { display:flex; gap:clamp(12px,1.7vw,26px); align-items:center;
  flex-wrap:wrap; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:9px 0; }
.g-desknav a { font-family:var(--font-kicker); font-weight:700; font-size:.6875rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:2px; }
.g-desknav a:hover { color:var(--lapis); border-bottom-color:var(--lapis); }

/* ---------- lead + latest ---------- */
.g-top { display:grid; grid-template-columns:1fr 320px; gap:clamp(18px,2.6vw,38px);
  padding:22px 0 28px; }
.g-lead__fig .g-plate { aspect-ratio:16/9; }
.g-lead h2 { font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.06; margin:12px 0 9px; }
.g-lead h2 a { text-decoration:none; }
.g-lead__dek { color:var(--ink-muted); margin:0 0 10px; max-width:60ch; font-size:1.03rem; }
.g-lead__by { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.g-mono { width:24px; height:24px; border:1px solid var(--lapis); display:grid;
  place-items:center; font-family:var(--font-display); font-weight:700;
  font-size:.72rem; color:var(--lapis); }
.g-latest { border-left:1px solid var(--rule); padding-left:clamp(14px,1.6vw,22px); }
.g-latest__hd { display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px solid var(--lapis); padding-bottom:7px; margin-bottom:4px; }
.g-pulse { display:inline-block; width:7px; height:7px; background:var(--lapis);
  border-radius:50%; margin-right:7px; vertical-align:middle; }
.g-latest ol { list-style:none; margin:0; padding:0; }
.g-latest li { border-bottom:1px solid var(--rule-soft); }
.g-latest a { display:grid; grid-template-columns:auto 1fr; gap:9px; padding:8px 0;
  align-items:baseline; text-decoration:none; }
.g-latest h4 { font-size:.9rem; line-height:1.28; margin:0; font-weight:600; }

/* ---------- the board ---------- */
.g-board { padding:4px 0 28px; }
.g-board__hd { display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.g-desks { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); }
.g-desk { background:var(--paper); padding:0 clamp(10px,1vw,15px) 14px;
  display:flex; flex-direction:column; gap:10px; }
.g-desk__hd { display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; border-bottom:2px solid var(--lapis); padding:10px 0 7px; }
.g-desk__ru { font-family:var(--font-kicker); font-weight:600; font-size:.625rem;
  letter-spacing:.06em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.g-desk__lead .g-plate { aspect-ratio:4/3; }
.g-desk__lead h3 { font-size:1rem; line-height:1.2; margin:8px 0 0; font-weight:700; }
.g-desk ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.g-desk li { border-top:1px solid var(--rule-soft); }
.g-desk li a { display:block; padding:7px 0; font-size:.9rem; line-height:1.28;
  text-decoration:none; }
.g-desk__all { margin-top:auto; padding-top:7px; color:var(--lapis); }

/* ---------- sponsored placement (labelled, never disguised) ---------- */
.g-sponsor { background:var(--sponsor); border-top:2px solid var(--sponsor-line);
  border-bottom:2px solid var(--sponsor-line); padding:18px 0; margin:6px 0 28px; }
.g-sponsor__in { display:grid; grid-template-columns:1fr 2fr; gap:clamp(14px,2.2vw,32px);
  align-items:center; }
.g-sponsor__in .g-plate { aspect-ratio:16/9; }
.g-sponsor h3 { font-size:1.3rem; line-height:1.14; margin:7px 0 5px; font-weight:700; }

/* ---------- editors / roster / other edition ---------- */
.g-sec { padding:0 0 28px; }
.g-sec__hd { display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; border-bottom:2px solid var(--ink); padding-bottom:7px; margin-bottom:14px;
  flex-wrap:wrap; }
.g-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.g-grid3 .g-plate { aspect-ratio:3/2; }
.g-grid3 h3 { font-size:1rem; line-height:1.2; margin:8px 0 4px; font-weight:700; }
.g-roster { display:flex; flex-wrap:wrap; gap:7px 18px; }
.g-roster a { font-family:var(--font-kicker); font-size:.8rem; text-decoration:none;
  border-bottom:1px solid var(--rule); }
.g-roster a:hover { border-bottom-color:var(--lapis); }
.g-other { border-left:3px solid var(--lapis); border-top:1px solid var(--rule);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:clamp(14px,1.8vw,22px); display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:28px; }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .g-desks { grid-template-columns:repeat(2,1fr); }
  .g-grid3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .g-top { grid-template-columns:1fr; }
  .g-latest { border-left:0; padding-left:0; border-top:1px solid var(--rule);
    padding-top:16px; }
  .g-id__stats, .g-cadence { display:none; }
  .g-sponsor__in { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .g-desks, .g-grid3 { grid-template-columns:1fr; }
}