/* SILENT HILL: Townfall Guide — production stylesheet.
   Theme: Fog Harbor (single theme). Token values are copied verbatim from the
   approved visual system tokens_Townfall.css (02-design/20260922-silent-hill-townfall).
   Signature components: S1 signal date plate, S2 platform status matrix.
   The structure below follows the approved r3 preview. Class hooks consumed by
   check-geo.mjs / check-consent.mjs (.table-wrap, details, .byline, .skip-link,
   the consent overlay and the inert ad slot) must survive any edit. */

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-latin-var.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

/* ---- tokens: Fog Harbor ---- */
:root {
  /* backgrounds */
  --surface-page: #100b0e;
  --surface-sunk: #0a0608;
  --surface-card: #1a1417;
  --surface-fog: #232c34;
  --surface-fog-deep: #1c242b;

  /* text */
  --ink-primary: #e9e9e9;
  --ink-secondary: #a9b2b9;
  --ink-muted: #8d98a0;
  --ink-invert: #f2f2f0;

  /* brand */
  --brand: #fe254c;
  --brand-strong: #b1020a;
  --brand-text: #ff7089;
  --on-brand: #ffffff;

  /* semantic states */
  --state-verified: #8fd6b4;
  --state-pending: #e5c46c;
  --state-absent: #e07a7a;
  --state-link: #7fb8d8;

  /* borders */
  --border: #2d2629;
  --border-strong: #7a776d;

  /* type */
  --font-display: "Oswald", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* sizing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;
  --space-4: 24px; --space-5: 40px; --space-6: 64px;
  --radius: 3px;
  --content-width: 72rem;
  --row-h: 44px;
}

/* ---- reset and base type ---- */
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--surface-page);
  /* Fog grain: a low-contrast tiling of the site's own fog greys. */
  background-image: url("/assets/fog-grain.svg");
  background-repeat: repeat;
  color: var(--ink-primary);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--state-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, .table-wrap:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-4); }
h2 { margin: 0 0 var(--space-3); font: 600 26px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-invert); }
h3 { margin: 0 0 var(--space-2); font: 600 18px/1.35 var(--font-display); color: var(--ink-invert); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99; padding: 10px 16px; background: var(--brand); color: var(--on-brand); }
.skip-link:focus { left: 12px; top: 12px; }
.section { padding: var(--space-5) 0; }
.section.band { background: var(--surface-sunk); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kicker { margin: 0 0 var(--space-3); font: 500 13px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-text); }

/* ---- masthead ---- */
.masthead { background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.masthead__inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-invert);
  font: 600 15px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
}
.brand:hover { color: var(--brand-text); text-decoration: none; }
.brand img { width: 24px; height: 24px; }
.brand span { color: var(--ink-muted); }
.mainnav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-left: auto; }
.mainnav a { display: inline-block; min-height: 44px; padding: 12px 0; color: var(--ink-secondary); font-size: 14px; letter-spacing: .04em; }
.mainnav a:hover { color: var(--ink-invert); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--brand-text); box-shadow: inset 0 -2px 0 var(--brand); }
[data-language-switcher] { display: flex; gap: var(--space-3); align-items: center; }
[data-language-switcher] a { min-height: 0; padding: 6px 0; font-size: 13px; }
[data-language-switcher] [aria-current="page"] { text-decoration: underline; }

/* ---- S1 signal date plate ---- */
.plate {
  position: relative;
  border: 1px solid var(--border-strong); border-left: 4px solid var(--brand);
  border-radius: var(--radius); background: var(--surface-fog);
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 68px);
}
.plate__mark { position: absolute; left: var(--space-4); top: var(--space-3); width: 56px; height: 56px; }
.plate__status { display: inline-block; margin-bottom: var(--space-2); font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--state-pending); }
.plate__status--live { color: var(--state-verified); }
.plate__date { margin: 0; font: 600 34px/1.1 var(--font-display); letter-spacing: .02em; color: var(--ink-invert); }
.plate__meta { margin: var(--space-2) 0 0; color: var(--ink-secondary); font-size: 14px; }
.plate__meta strong { color: var(--brand-text); font-weight: 600; }

/* ---- hero ---- */
/* .hero is also a .wrap, so only the vertical padding is set here — a padding
   shorthand would wipe out the shared horizontal gutter. */
.hero { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
.hero__copy { min-width: 0; }
.vstamp { margin: 0 0 var(--space-2); font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.display-title { margin: 0; font: 600 clamp(40px, 6vw, 72px)/1.04 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink-invert); }
.tagline { margin: var(--space-2) 0 0; font: 500 15px/1.5 var(--font-body); letter-spacing: .02em; color: var(--ink-muted); }
.lede { margin: var(--space-3) 0 0; max-width: 52ch; color: var(--ink-secondary); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.hero__stats li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 2px; font: 500 12.5px/1 var(--font-mono); color: var(--ink-secondary); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 22px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 15px/1 var(--font-body);
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--brand-strong); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand); color: var(--ink-invert); }
.btn.ghost { border-color: var(--border-strong); color: var(--ink-primary); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand-text); }
.byline { margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--ink-muted); }
.hero__art { margin: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-card); }
.hero__art img { display: block; width: 100%; height: auto; }
.hero__art figcaption { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); background: var(--surface-sunk); font-size: 12px; color: var(--ink-muted); }

/* ---- in-page jump bar ---- */
.jumpbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  max-width: var(--content-width); margin: 0 auto; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.jumpbar__label { font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.article .jumpbar { max-width: none; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); border-bottom: 0; }

/* ---- facts grid ---- */
.section.facts { padding-top: var(--space-4); }
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.fact { padding: var(--space-3); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius); }
.fact__k { margin: 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.fact__v { margin: 6px 0 0; font: 600 20px/1.25 var(--font-display); color: var(--ink-invert); }
.fact__s { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-secondary); }

/* ---- shared prose blocks ---- */
.prose p, .section.deep p, .article p { max-width: 78ch; margin: 0 0 var(--space-3); color: var(--ink-secondary); }
.prose p:last-child { margin-bottom: 0; }
.section.deep ul, .section.deep ol, .article ul, .article ol { max-width: 78ch; margin: 0 0 var(--space-3); padding-left: 20px; color: var(--ink-secondary); }
.section.deep li, .article li { margin: 6px 0; }
.section.deep h3 { margin: var(--space-4) 0 var(--space-2); }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--space-4); margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--border); }
.stat { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.stat dt { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.stat dd { margin: 4px 0 0; font-size: 15px; color: var(--ink-primary); }
.stat__asof { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); }
.note { margin: var(--space-4) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--border-strong); max-width: 78ch; font-size: 13.5px; color: var(--ink-muted); }
.ctaline { margin: var(--space-4) 0 0; }
.sources { margin-top: var(--space-5); }
.sources h2, .sources h3 { margin: 0 0 var(--space-2); font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.sources ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-secondary); }
.sources li { margin: 4px 0; }

/* ---- featured quotes ---- */
.quotes { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: stretch; }
.quote-list { display: grid; gap: var(--space-3); }
blockquote.quote { margin: 0; padding: var(--space-4); background: var(--surface-fog); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.quote p { margin: 0; font: 500 19px/1.5 var(--font-body); color: var(--ink-invert); }
.quote cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: 13px; color: var(--ink-secondary); }
.score-box { display: flex; flex-direction: column; justify-content: center; padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.score-box .num { margin: 0; font: 600 56px/1 var(--font-display); color: var(--brand-text); }
.score-box .lbl { margin: 6px 0 0; font-size: 13px; color: var(--ink-secondary); }

/* ---- fact stamp / change trigger ---- */
.stamp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; vertical-align: baseline; }
.stamp--verified { color: var(--state-verified); }
.stamp--pending { color: var(--state-pending); }
.stamp--absent { color: var(--state-absent); }
.trigger { font-size: 13.5px; color: var(--ink-secondary); }
.trigger__key { display: inline-block; margin-right: 8px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 2px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--state-pending); }

/* ---- S2 platform status matrix and data tables ---- */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; font-size: 14.5px; }
.table-wrap thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 12px 16px; border-bottom: 1px solid var(--border-strong);
  background: var(--surface-fog-deep); color: var(--ink-invert);
  font: 600 12.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.table-wrap tbody th, .table-wrap td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
.table-wrap tbody th { font: 600 14px/1.45 var(--font-body); color: var(--ink-invert); }
/* The S2 matrix keeps its first three columns at least 150/150/160px so a
   phone view stays comparable when the table scrolls; longer labels (the home
   reviews table, the PC spec tables) are free to claim more. */
.table-wrap th:nth-child(1), .table-wrap td:nth-child(1) { min-width: 150px; }
.table-wrap th:nth-child(2), .table-wrap td:nth-child(2) { min-width: 150px; }
.table-wrap th:nth-child(3), .table-wrap td:nth-child(3) { min-width: 160px; }
/* The trailing source column stays wide enough to stay readable instead of
   collapsing into a narrow ribbon of wrapped words. */
.table-wrap th:last-child, .table-wrap td:last-child { min-width: 180px; }
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; padding: 4px 8px; border: 1px solid currentColor; border-radius: 2px; font: 600 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chip--live, .chip--verified { color: var(--state-verified); }
.chip--soon, .chip--pending { color: var(--state-pending); }
.chip--absent { color: var(--state-absent); }
.scroll-hint { display: none; margin: 0 0 var(--space-2); font-size: 12.5px; color: var(--ink-muted); }

/* ---- FAQ ---- */
.faq { margin-top: var(--space-3); }
details { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
details:first-of-type { border-top: 1px solid var(--border); }
summary { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; min-height: 44px; font: 600 17px/1.4 var(--font-body); color: var(--ink-invert); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:after { content: "+"; font: 600 22px/1 var(--font-mono); color: var(--brand-text); }
details[open] summary:after { content: "-"; }
details p { margin: var(--space-2) 0 0; max-width: 80ch; font-size: 15px; color: var(--ink-secondary); }

/* ---- final call to action ---- */
.finalcta__mark { width: 72px; height: 72px; margin-bottom: var(--space-2); }

/* ---- article and trust pages ---- */
.article { max-width: 1000px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.crumb { font-size: 12px; letter-spacing: .04em; color: var(--ink-muted); }
.crumb a { color: var(--ink-secondary); }
.pagehead { margin-top: var(--space-3); }
.article h1 { margin: 0; max-width: 24ch; font: 600 clamp(34px, 4.4vw, 52px)/1.08 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink-invert); }
.verdict { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface-fog); border: 1px solid var(--border-strong); border-left: 4px solid var(--brand); border-radius: var(--radius); }
.verdict .big { margin: 0; max-width: none; font: 600 20px/1.4 var(--font-display); color: var(--ink-invert); }
.verdict p { margin: var(--space-2) 0 0; }
.article .lead { margin: var(--space-4) 0 0; max-width: 64ch; font: 500 20px/1.55 var(--font-body); color: var(--ink-invert); }
.article h2 { margin: var(--space-5) 0 var(--space-3); }
.article h3 { margin: var(--space-4) 0 var(--space-2); }
.article .byline { margin: var(--space-3) 0 0; }
.article.trust { max-width: 820px; }
.article.trust h1 { font-size: clamp(30px, 3.6vw, 44px); }
.related { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.related ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.related a { display: block; min-height: 44px; padding: 13px 0; border-top: 1px solid var(--border); font-size: 15px; }
.related li:first-child a { border-top: 2px solid var(--brand); }

/* ---- footer ---- */
.sitefoot { margin-top: var(--space-6); padding: var(--space-5) 0 var(--space-4); background: var(--surface-sunk); border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-muted); }
.sitefoot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-4) var(--space-5); }
.sitefoot strong { display: block; margin-bottom: var(--space-2); font: 600 15px/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-invert); }
.sitefoot p { margin: 0 0 var(--space-2); max-width: 52ch; }
.sitefoot h3 { margin: 0 0 var(--space-2); font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.sitefoot ul { margin: 0; padding: 0; list-style: none; }
.sitefoot li { margin: 0 0 6px; }
.sitefoot a { color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
.sitefoot a:hover { color: var(--ink-invert); }
.sitefoot__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-muted); }

/* ---- consent choices entry point and section ---- */
.consent-settings-button { margin-top: var(--space-3); min-height: 48px; padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--ink-secondary); font: 600 13px var(--font-body); cursor: pointer; }
.consent-settings-button:hover { border-color: var(--brand); color: var(--ink-invert); }
.sitefoot .consent-settings-button { width: 100%; text-align: left; }
.consent-choices { margin: var(--space-4) 0; padding: 22px 24px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius); }
.consent-choices h2 { margin: 0 0 var(--space-1); font-size: 20px; }
.consent-choices p { max-width: none; margin: 0; font-size: 14px; color: var(--ink-muted); }

/* ---- mandatory-choice page lock (site-ads.md §6) ----
   tarteaucitron's own overlay blocks pointer events; these rules additionally
   stop the background from scrolling (wheel, touch and keyboard) until the
   visitor has picked accept or reject. */
html.consent-choice-required,
body.consent-choice-required {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.consent-choice-required{
  position:fixed;
  inset:0;
  width:100%;
}

/* ---- self-hosted consent dialog ---- */
html body #tarteaucitronRoot #tarteaucitronAlertBig{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface-card);color:var(--ink-primary);box-shadow:0 24px 90px rgba(0,0,0,.55);font-family:var(--font-body)}
html body #tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible::before{background:rgba(6,4,5,.84) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:auto}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{box-sizing:border-box !important;width:min(700px,calc(100% - 48px)) !important;min-width:0 !important;max-width:700px !important;max-height:calc(100dvh - 48px);padding:clamp(30px,4.6vw,48px) !important;overflow-y:auto;border-radius:var(--radius)}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{display:block;margin-bottom:18px;color:var(--ink-invert);font-family:var(--font-display);font-size:clamp(29px,4.4vw,42px);font-weight:600;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;text-align:center}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{display:block;max-width:58ch;margin:0 auto 26px;padding:0;color:var(--ink-primary);font-size:18px;line-height:1.6;text-align:center}
html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton{min-height:48px;padding:13px 18px !important;border-radius:var(--radius);border:1px solid var(--brand);background:var(--brand-strong);color:var(--on-brand);font:600 15px/1.3 var(--font-body);cursor:pointer}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2{border:1px solid var(--border-strong);background:var(--surface-sunk);color:var(--ink-primary)}
/* Pre-script fallback: the Personalize control is removed at runtime and the
   privacy control is replaced by a real link, so neither can flash as a
   third button. */
html body #tarteaucitronRoot #tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronPersonalize,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrl,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog{display:none !important}
html body #tarteaucitronRoot [data-consent-privacy-link]{display:block;width:fit-content;margin:16px auto 0;color:var(--ink-muted);font-size:13px;line-height:1.4;text-align:center;text-decoration:underline;text-underline-offset:3px}
html body #tarteaucitronRoot [data-consent-privacy-link]:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ---- inert advertising placeholder (site-ads.md §4) ----
   Fixed min-height in both breakpoints, never wider than the viewport, and
   wrapping ids/urls/status copy so a blocked or empty ad keeps the layout
   stable. First site build ships no ads: the rules stay inert. */
.ad-slot{--ad-slot-height:120px;display:grid;place-items:center;gap:6px;min-height:var(--ad-slot-height);margin:32px 0;padding:14px;overflow:hidden;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface-sunk);color:var(--ink-muted);text-align:center}
.ad-slot--banner{--ad-slot-height:96px;width:100%}
.ad-slot--rectangle{--ad-slot-height:280px;width:min(100%,360px);margin-right:auto;margin-left:auto}
.ad-slot-label{font:600 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.ad-consent-note{margin:0;max-width:38ch;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.ad-slot-body{width:100%;overflow-wrap:anywhere}
.ad-slot-body iframe,.ad-slot-body img,.ad-slot-body ins{max-width:100%}
/* The "Ad" marker always stays visible; only the status copy is retired once
   the network script has actually loaded. No creative is ever claimed. */
.ad-slot[data-ad-state="loaded"] > .ad-consent-note{display:none}
.ad-slot[data-ad-state="error"]{border-style:solid;border-color:var(--border)}

/* ---- responsive: tablet (768-1023px) ---- */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .sitefoot__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- responsive: phone (<=767px) ---- */
@media (max-width: 767px) {
  h2 { font-size: 22px; }
  .masthead__inner { min-height: 0; }
  .mainnav { margin-left: 0; width: 100%; gap: var(--space-2) var(--space-3); }
  .mainnav a { min-height: 40px; padding: 10px 0; font-size: 13.5px; }
  .hero { padding-top: var(--space-4); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .plate { padding-left: var(--space-4); padding-right: var(--space-3); }
  .plate__mark { position: static; display: block; width: 40px; height: 40px; margin-bottom: var(--space-2); }
  .plate__date { font-size: 26px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .jumpbar { font-size: 13px; }
  .article { padding-top: var(--space-4); }
  .article h1 { font-size: 34px; }
  .article .lead { font-size: 18px; }
  .scroll-hint { display: block; }
  .sitefoot__grid { grid-template-columns: 1fr; }
}

/* ---- mobile consent/ads breakpoint (site-ads.md §4, §6) ---- */
@media(max-width:760px){
  html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{width:calc(100% - 20px) !important;max-height:calc(100dvh - 20px);padding:26px 14px 20px !important}
  html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{margin-bottom:14px;font-size:clamp(25px,8vw,34px)}
  html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{margin-bottom:20px;font-size:16px;line-height:1.5}
  html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig button{width:100% !important;margin:0 0 10px !important}
  .ad-slot{margin:26px 0;padding:12px}
  .ad-slot--rectangle{--ad-slot-height:250px}
}