@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   LA RIVISTA — the magazine theme (redesign approved 2026-08-27).

   Paper ground, cobalt opener, Bricolage Grotesque for display and Instrument Sans for
   reading. Where Il Palazzetto is a broadcast graphic, this one is a printed feature: a
   colour block against a portrait, a jumbo figure row, then a two-column spread with a
   rail of boxed facts.

   The same three alignment rules hold, and they are enforced, not hoped for:
     1. every gap and pad comes from the --s scale (a test fails on anything else);
     2. numeric table cells are right-aligned with tabular figures;
     3. every image sits in a fixed aspect box.
   ========================================================================== */

:root {
  --pap: #fbfaf8;
  --blk: #14131a;
  --ink: #191821;
  --ink-2: #4c4a58;
  --mut: #8a8796;
  --line: #e6e3dd;
  --cob: #2038e0;
  --cob-d: #1526a8;
  --blush: #ffe6dc;
  --mint: #dff3ea;
  --maxw: 1200px;
  --measure: 74ch;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem;

  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--pap); color: var(--ink); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--cob); text-underline-offset: 2px; }
a:hover { color: var(--cob-d); }
:focus-visible { outline: 2px solid var(--cob); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(var(--s4), 3.5vw, var(--s6)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s2); z-index: 60; background: var(--cob); color: #fff; padding: var(--s2) var(--s3); }

/* ---------- masthead ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--pap); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: 62px; }
.site-brand { text-decoration: none; color: inherit; }
.site-brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; white-space: nowrap; }
.site-brand__name i { font-style: normal; color: var(--cob); }
.site-nav { margin-left: auto; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); flex-wrap: wrap; }
.site-nav a { display: block; font-size: .86rem; font-weight: 500; white-space: nowrap; color: var(--ink-2); text-decoration: none; padding: var(--s2) var(--s3); border-radius: 100px; }
.site-nav a:hover { background: #efedea; color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--blk); color: #fff; }

/* ---------- opener ---------- */
.op { padding-block: clamp(var(--s5), 4vw, var(--s6)) 0; }
.op__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(var(--s4), 3vw, var(--s6)); align-items: end; }
.op__block { background: var(--cob); color: #fff; padding: clamp(var(--s5), 3vw, var(--s6)); }
.op__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: .94; font-size: clamp(2.2rem, 6.4vw, 4.6rem); margin: 0; text-wrap: balance; }
.op__role { margin: var(--s5) 0 0; font-size: 1.05rem; color: #cdd5ff; }
.op__role b { color: #fff; }
.nb { white-space: nowrap; }
.kicker { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #b9c3ff; margin: 0 0 var(--s5); }
.hero-band--page .kicker, .op__shot + .kicker { color: var(--mut); }
/* A neutral ground and NO blend mode. `multiply` over the blush tinted every portrait
   pink — the photograph is the subject here, and a colour cast on a person's face is a
   defect, not a treatment. */
.op__shot { position: relative; margin: 0; align-self: stretch; background: var(--pap-2); overflow: hidden; min-height: clamp(240px, 34vw, 400px); }
.op__shot img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 4%; }
.op__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(20, 19, 26, .86); color: #e7e4dd; font-size: .68rem; letter-spacing: .05em; padding: var(--s2) var(--s3); }

.jumbo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6); padding-block: clamp(var(--s5), 3vw, var(--s6)) 0; }
.jumbo div { display: flex; flex-direction: column; }
.jumbo b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.jumbo b i { font-style: normal; font-size: .45em; color: var(--mut); }
.jumbo__lead b { color: var(--cob); }
.jumbo span { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-top: var(--s2); }

/* page heads (every non-index page) */
.hero-band--page { border-bottom: 1px solid var(--line); }
.hero-band--page .wrap { padding-block: clamp(var(--s5), 4vw, var(--s6)); }
.hero-band__title--page { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(1.8rem, 4.6vw, 3rem); margin: 0; text-wrap: balance; }
.hero-band__rule { display: none; }

/* ---------- the spread ---------- */
main { padding-bottom: var(--s7); }
.spread { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(var(--s5), 4vw, var(--s7)); padding-block: clamp(var(--s5), 5vw, var(--s7)); }
/* The reading column is CENTRED, not left-hugged. Left-aligned inside a wide container it
   piled every spare pixel on the right — at a 1250 px window that is nearly half the screen,
   and it reads as a broken layout rather than as a margin. Centred, the same whitespace
   reads as a page. The measure is also wider than the classic 64ch: these are short
   sections with headings, not a novel. */
.article, .art { max-width: var(--measure); }
/* Inside the index spread the article shares the row with the rail, so it stays put; on
   every other page it is the only column and centres itself. */
.article { margin-inline: auto; }
.spread .art { margin-inline: 0; }
/* The news page is a list of short entries, not a column of running text, so it is given
   its own width rather than being squeezed into the reading measure. */
.article--wide { max-width: 980px; }
.standfirst { font-size: 1.26rem; line-height: 1.5; color: var(--ink); margin: 0 0 var(--s5); }
.prose { margin-bottom: var(--s5); }
/* A heading must never wrap beside a floated figure: its first line ends up alone and
   off to one side, which reads as a broken page. Clear first, then set. */
.prose h2 { clear: both; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; margin: var(--s6) 0 var(--s3); color: var(--ink); text-wrap: balance; }
.prose h3 { clear: both; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: var(--s5) 0 var(--s2); }
.prose p { margin: 0 0 var(--s4); color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 var(--s4) var(--s5); padding: 0; }
.prose li { margin-bottom: var(--s2); }
.note { font-size: .85rem; color: var(--mut); margin: var(--s4) 0 0; }

/* Deliberately NOT sticky: the rail (fact box, MVP poster, trophy cabinet) is taller than
   a laptop viewport, and a sticky block taller than the viewport pins at the top with its
   own bottom permanently out of reach. A column of empty paper below the rail is the
   lesser fault — and it is what the magazine layout expects. */
.rail { align-self: start; }
.rail h3 { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0 0 var(--s3); }
.rail > * + h3 { margin-top: var(--s6); }
.factbox { background: #fff; border: 1px solid var(--line); padding: var(--s4); }
.factbox dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: .93rem; }
.factbox dt { color: var(--mut); }
.factbox dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.poster { list-style: none; margin: 0; padding: 0; }
.poster li { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.poster b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: var(--cob); min-width: 3.4rem; font-variant-numeric: tabular-nums; }
.poster span { font-size: .95rem; }

/* ---------- section heads and the split ---------- */
section.s { padding-block: clamp(var(--s5), 4vw, var(--s6)); }
.sh { display: flex; align-items: baseline; gap: var(--s4); margin: 0 0 var(--s5); }
.sh h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2.1rem); letter-spacing: -.03em; margin: 0; }
.sh .c { margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.split li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 5rem 4rem; align-items: center; gap: var(--s3); }
.split em { font-style: normal; font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.split__t { height: 12px; background: #fff; border: 1px solid var(--line); }
.split__t i { display: block; height: 100%; background: var(--cob); }
.split b { text-align: right; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.split small { text-align: right; font-size: .8rem; color: var(--mut); font-variant-numeric: tabular-nums; }

/* ---------- tables ----------
   Separately selectored on purpose: the numeric class and the nowrap modifier must stay
   apart, or a 300-character trophy list cannot wrap and the page scrolls sideways — the
   live defect these rules fixed. Test-guarded.
   ---------------------------------------------------------------------------------- */
.data-figure__caption, .tbl-cap { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin: var(--s5) 0 var(--s3); }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--cob); outline-offset: 2px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.data-table--kv { max-width: 640px; }
.data-table caption { text-align: left; }
.data-table th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: var(--s2) var(--s3); border-bottom: 2px solid var(--blk); white-space: nowrap; }
.data-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.data-table td:first-child { overflow-wrap: break-word; }
.data-table tr.now td { background: var(--mint); font-weight: 600; }
.data-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table__numh { text-align: right; }
.data-table__nowrap { white-space: nowrap; }
.cell-list { list-style: none; margin: 0; padding: 0; }
.cell-list li { font-size: .9rem; overflow-wrap: anywhere; }
.stats-kv { list-style: none; margin: 0; padding: 0; }
.stats-kv li { font-size: .9rem; overflow-wrap: anywhere; }
.trophies { margin: 0; padding-left: var(--s5); }
.trophies li { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.src.small { font-size: .82rem; color: var(--mut); }

/* ---------- figures ---------- */
.inline-figure { margin: 0 0 var(--s4); max-width: 250px; }
.inline-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--pap-2); }
.inline-figure--right { float: right; margin-left: var(--s5); }
.inline-figure--left { float: left; margin-right: var(--s5); }
.credit { font-size: .7rem; color: var(--mut); margin-top: var(--s2); line-height: 1.4; }
.credit--light { color: #e7e4dd; }

/* ---------- news: typographic, no cards ---------- */
.news-list { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.news-item { padding-block: var(--s5); border-top: 1px solid var(--line); display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
.news-item:last-child { border-bottom: 1px solid var(--line); }
.news__date { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-variant-numeric: tabular-nums; }
.news__link { grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.22; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--cob); overflow-wrap: anywhere; }
a.news__link:hover { color: var(--cob); }
.news__link--plain { border-bottom: 2px dotted var(--line); }
.news__src { grid-column: 2; font-size: .78rem; color: var(--mut); }
.news__prose, .news__summary { grid-column: 2; margin: 0; color: var(--ink-2); }
.news-archive { padding-block: clamp(var(--s5), 4vw, var(--s6)); }
.news-archive h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.03em; margin: 0 0 var(--s4); }
.news-item--archive { padding-block: var(--s3); grid-template-columns: 106px minmax(0, 1fr) auto; gap: var(--s4); }

/* ---------- FAQ, see also, colophon ---------- */
.faq { padding-block: clamp(var(--s5), 4vw, var(--s6)); }
.faq h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 var(--s5); }
.faq__list { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.faq__item { padding: var(--s4); background: #fff; border: 1px solid var(--line); }
.faq__q { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; margin: 0 0 var(--s2); }
.faq__a { margin: 0; color: var(--ink-2); }

.see-also { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; border-top: 1px solid var(--line); padding-top: var(--s5); }
.see-also__label { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0; }
.see-also__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.see-also__list a { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); text-decoration: none; border: 1px solid var(--blk); border-radius: 100px; padding: var(--s2) var(--s4); }
.see-also__list a:hover { background: var(--blk); color: #fff; }

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s5); font-size: .82rem; color: var(--mut); align-items: baseline; }
.site-footer__disclaimer, .site-footer__updated { margin: 0; }
.site-footer__disclaimer { max-width: 62ch; }
.site-footer__disclaimer strong { color: var(--ink-2); }
.site-footer__nav { margin-left: auto; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); }
.site-footer__nav a { color: var(--mut); text-decoration: none; }
.site-footer__nav a:hover { color: var(--cob); }

@media (max-width: 860px) {
  /* Wrapped, eight pill links turn the bar into a full-screen column. One row that
     scrolls sideways instead. */
  .site-header__inner { gap: var(--s4); }
  .site-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .op__grid, .spread { grid-template-columns: 1fr; }
  .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); align-items: start; }
  .rail > * + h3 { margin-top: 0; }
  .news-item, .news-item--archive { grid-template-columns: 1fr; gap: var(--s2); }
  .news__link, .news__src, .news__prose, .news__summary { grid-column: 1; }
  .split li { grid-template-columns: 5.5rem minmax(0, 1fr) 4rem; }
  .split small { display: none; }
  .inline-figure--right, .inline-figure--left { float: none; margin-inline: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }