/*
Theme Name: WG Rating
Theme URI: https://best-replacement-windows.net/
Author: Window Gurus team
Description: Broadsheet theme for the Ohio window company rating. The site is a publication that checks public records, so it is set like one: kicker, headline, byline, standfirst, drop cap, hairline rules, ledger tables and a record stamp. Company data comes from the wgr-core plugin, never from the theme.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.9
License: GPL-2.0-or-later
Text Domain: wgrating
*/

/* =========================================================================
   GAZETTE DESIGN SYSTEM
   Naming follows newspaper anatomy, not utility classes:
   masthead, kicker, dek, standfirst, byline, rule, ledger, dossier, stamp.
   ====================================================================== */

:root {
  /* Newsprint. Never pure white, never pure black. */
  --gaz-paper:      #f9f6ef;
  --gaz-paper-2:    #f3efe4;
  --gaz-paper-3:    #ece6d8;
  --gaz-ink:        #171310;
  --gaz-ink-2:      #443c33;
  --gaz-ink-3:      #726758;
  --gaz-rule:       #c9bfaa;
  --gaz-rule-firm:  #9d907a;

  /* One accent. Vermillion, the newspaper alert colour. Used ~5 times. */
  --gaz-red:        #b13a1f;
  --gaz-red-wash:   #f0e2dc;

  /* Verification state. Deliberately not a second brand colour. */
  --gaz-seal:       #2f5d3f;
  --gaz-seal-wash:  #e6ede7;
  --gaz-open:       #8a6d1e;

  --gaz-display: "Libre Caslon Display", "Playfair Display", Georgia, serif;
  --gaz-body:    "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --gaz-meta:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gaz-t-xs:   0.72rem;
  --gaz-t-sm:   0.85rem;
  --gaz-t-base: 1.0625rem;
  --gaz-t-md:   1.25rem;
  --gaz-t-lg:   1.6rem;
  --gaz-t-xl:   2.1rem;
  --gaz-t-2xl:  2.9rem;
  --gaz-t-3xl:  4.2rem;

  --gaz-1: 4px;  --gaz-2: 8px;  --gaz-3: 12px; --gaz-4: 16px;
  --gaz-5: 24px; --gaz-6: 32px; --gaz-7: 48px; --gaz-8: 72px; --gaz-9: 104px;

  --gaz-wrap: 1180px;
  --gaz-read: 68ch;

  --gaz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Anchor targets should not land flush against the top edge. */
[id] { scroll-margin-top: var(--gaz-6); }

body {
  margin: 0;
  background: var(--gaz-paper);
  color: var(--gaz-ink);
  font: 400 var(--gaz-t-base)/1.7 var(--gaz-body);
  overflow-x: hidden;
  font-variant-numeric: oldstyle-nums;
}

/* Newsprint grain. Atmosphere over flat colour, at 3% so it reads as paper. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--gaz-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 var(--gaz-4);
  text-wrap: balance;
}

h1 { font-size: var(--gaz-t-2xl); }
h2 { font-size: var(--gaz-t-xl); }
h3 { font-size: var(--gaz-t-lg); line-height: 1.15; }
h4 { font-size: var(--gaz-t-md); }

/* Italic accent word inside a headline. */
h1 em, h2 em { font-style: italic; color: var(--gaz-red); font-weight: 400; }

p { margin: 0 0 var(--gaz-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--gaz-ink); text-decoration-color: var(--gaz-rule-firm); text-underline-offset: 3px; transition: text-decoration-color 0.45s var(--gaz-ease), color 0.45s var(--gaz-ease); }
a:hover { color: var(--gaz-red); text-decoration-color: var(--gaz-red); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--gaz-4); padding-left: var(--gaz-5); }
li { margin-bottom: var(--gaz-2); }
hr { border: 0; border-top: 1px solid var(--gaz-rule); margin: var(--gaz-6) 0; }

:focus-visible { outline: 2px solid var(--gaz-red); outline-offset: 3px; }

.gaz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gaz-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gaz-ink); color: var(--gaz-paper); padding: var(--gaz-3) var(--gaz-4); }
.gaz-skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

.gaz-wrap { width: 100%; max-width: var(--gaz-wrap); margin: 0 auto; padding: 0 var(--gaz-5); position: relative; z-index: 2; }
.gaz-wrap--read { max-width: 780px; }

/* Every section is a column of the paper, separated by a rule, never a shadow. */
.gaz-band { padding: var(--gaz-8) 0; border-top: 1px solid var(--gaz-rule); }
.gaz-band--tight { padding: var(--gaz-6) 0; }
.gaz-band--tint { background: var(--gaz-paper-2); }
.gaz-band--dark { background: var(--gaz-ink); color: var(--gaz-paper); border-top-color: var(--gaz-ink); }
.gaz-band--dark h2, .gaz-band--dark h3 { color: var(--gaz-paper); }
.gaz-band--dark a { color: var(--gaz-paper); }

/* Kicker: the small line above a headline. Hairline, letterspaced, mono. */
.gaz-kicker {
  display: flex; align-items: center; gap: var(--gaz-3);
  font: 500 var(--gaz-t-xs)/1 var(--gaz-meta);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gaz-ink-3); margin-bottom: var(--gaz-4);
}
.gaz-kicker::before { content: ""; width: 28px; height: 1px; background: var(--gaz-red); flex: none; }

.gaz-head { max-width: 64ch; margin-bottom: var(--gaz-6); }
.gaz-head p { color: var(--gaz-ink-2); }

/* ---------------------------------------------------------------- masthead */

.gaz-masthead { background: var(--gaz-paper); border-bottom: 3px double var(--gaz-ink); position: relative; z-index: 20; }

.gaz-masthead__edition {
  border-bottom: 1px solid var(--gaz-rule);
  font: 400 10px/1.6 var(--gaz-meta);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaz-ink-3);
}
.gaz-masthead__edition .gaz-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--gaz-4); padding-top: 7px; padding-bottom: 7px; }
.gaz-masthead__edition a { color: var(--gaz-ink-3); text-decoration: none; }
.gaz-masthead__edition a:hover { color: var(--gaz-red); }
.gaz-masthead__sep { color: var(--gaz-rule-firm); }

.gaz-masthead__main { display: flex; align-items: center; justify-content: space-between; gap: var(--gaz-3) var(--gaz-6); padding: var(--gaz-4) 0; flex-wrap: wrap; }

/* Both parts are spans, so they must be told to stack: an inline element
   ignores margin-top and would sit on the nameplate's baseline. */
.gaz-logo { text-decoration: none; display: block; flex: none; }
.gaz-logo__name {
  display: block;
  font-family: var(--gaz-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.02em; color: var(--gaz-ink); line-height: 1.05;
  white-space: nowrap;
}
.gaz-logo__sub {
  display: block;
  font: 400 10px/1.4 var(--gaz-meta); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gaz-ink-3); margin-top: 6px;
}

.gaz-nav { display: flex; align-items: center; gap: var(--gaz-4) var(--gaz-5); flex-wrap: wrap; justify-content: flex-end; }
.gaz-nav a {
  font: 400 var(--gaz-t-sm)/1 var(--gaz-body); text-decoration: none;
  color: var(--gaz-ink-2); padding: var(--gaz-2) 0; border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.45s var(--gaz-ease), color 0.45s var(--gaz-ease);
}
.gaz-nav a:hover, .gaz-nav a[aria-current="page"] { color: var(--gaz-ink); border-bottom-color: var(--gaz-red); }

.gaz-burger {
  display: none; background: none; border: 1px solid var(--gaz-rule-firm);
  padding: var(--gaz-2) var(--gaz-3); cursor: pointer; color: var(--gaz-ink);
  font: 400 var(--gaz-t-xs)/1 var(--gaz-meta); letter-spacing: 0.2em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- lede */

.gaz-lede { padding: var(--gaz-8) 0 var(--gaz-7); }
.gaz-lede__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gaz-8); align-items: start; }
.gaz-lede h1 { font-size: var(--gaz-t-3xl); margin-bottom: var(--gaz-5); }

.gaz-byline {
  font: 400 var(--gaz-t-xs)/1.5 var(--gaz-meta); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gaz-ink-3);
  padding: var(--gaz-3) 0; border-top: 1px solid var(--gaz-rule); border-bottom: 1px solid var(--gaz-rule);
  margin-bottom: var(--gaz-5);
}
.gaz-byline strong { color: var(--gaz-ink-2); font-weight: 500; }

/* Standfirst: the bold intro paragraph under the headline. */
.gaz-standfirst { font-size: var(--gaz-t-md); line-height: 1.6; color: var(--gaz-ink-2); max-width: 52ch; }

/* Drop cap, 3 lines, display serif. */
.gaz-dropcap::first-letter {
  float: left; font-family: var(--gaz-display); font-weight: 700;
  font-size: 3.9em; line-height: 0.82; padding: 0.06em 0.10em 0 0; color: var(--gaz-red);
}

/* Facts panel, right column of the lede. Rules, not boxes. */
.gaz-facts { border-top: 3px solid var(--gaz-ink); }
.gaz-fact { padding: var(--gaz-4) 0; border-bottom: 1px solid var(--gaz-rule); }
.gaz-fact__n { font-family: var(--gaz-display); font-size: var(--gaz-t-xl); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.gaz-fact__l { font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); margin-top: var(--gaz-2); }

/* ---------------------------------------------------------------- buttons */

.gaz-btn {
  display: inline-flex; align-items: center; gap: var(--gaz-2);
  font: 500 var(--gaz-t-sm)/1 var(--gaz-meta); letter-spacing: 0.12em; text-transform: uppercase;
  padding: var(--gaz-3) var(--gaz-5); text-decoration: none; border: 1px solid var(--gaz-ink);
  color: var(--gaz-ink); background: transparent; cursor: pointer;
  transition: background 0.5s var(--gaz-ease), color 0.5s var(--gaz-ease), border-color 0.5s var(--gaz-ease);
}
.gaz-btn:hover { background: var(--gaz-ink); color: var(--gaz-paper); border-color: var(--gaz-ink); }
.gaz-btn__arrow { transition: transform 0.5s var(--gaz-ease); }
.gaz-btn:hover .gaz-btn__arrow { transform: translateX(4px); }
.gaz-btn--red { border-color: var(--gaz-red); color: var(--gaz-red); }
.gaz-btn--red:hover { background: var(--gaz-red); color: var(--gaz-paper); border-color: var(--gaz-red); }

/* ---------------------------------------------------------------- pull quote */

/* Used for the conflict-of-interest disclosure: the paper stating its own bias. */
.gaz-pull {
  border-top: 3px double var(--gaz-ink); border-bottom: 3px double var(--gaz-ink);
  padding: var(--gaz-6) 0; margin: 0;
}
.gaz-pull__q {
  font-family: var(--gaz-display); font-size: var(--gaz-t-lg); font-style: italic;
  line-height: 1.35; text-align: center; max-width: 34ch; margin: 0 auto var(--gaz-5);
  text-wrap: balance;
}
.gaz-pull__body { columns: 2; column-gap: var(--gaz-7); column-rule: 1px solid var(--gaz-rule); font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); }
.gaz-pull__body p { break-inside: avoid; }
.gaz-nap { font-style: normal; font-family: var(--gaz-meta); font-size: var(--gaz-t-xs); line-height: 1.9; color: var(--gaz-ink-3); margin-top: var(--gaz-5); padding-top: var(--gaz-4); border-top: 1px solid var(--gaz-rule); }

/* ---------------------------------------------------------------- ledger */

/* The rating table. Set as a financial ledger: tabular figures, hairlines. */
.gaz-ledger-wrap { overflow-x: auto; border-top: 3px solid var(--gaz-ink); border-bottom: 3px solid var(--gaz-ink); }

.gaz-ledger { width: 100%; border-collapse: collapse; font-size: var(--gaz-t-sm); font-variant-numeric: tabular-nums lining-nums; }
.gaz-ledger th, .gaz-ledger td { padding: var(--gaz-4) var(--gaz-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--gaz-rule); }
.gaz-ledger thead th {
  font: 500 var(--gaz-t-xs)/1.3 var(--gaz-meta); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gaz-ink-2); border-bottom: 1px solid var(--gaz-ink); white-space: nowrap; vertical-align: bottom;
}
.gaz-ledger tbody tr { transition: background 0.45s var(--gaz-ease); }
.gaz-ledger tbody tr:hover { background: var(--gaz-paper-3); }
.gaz-ledger tbody tr:last-child th, .gaz-ledger tbody tr:last-child td { border-bottom: 0; }

.gaz-rank { font-family: var(--gaz-display); font-size: var(--gaz-t-md); color: var(--gaz-ink-3); width: 1%; padding-right: var(--gaz-4); }
.gaz-firm { font-weight: 600; font-size: var(--gaz-t-base); }
.gaz-firm a { text-decoration: none; border-bottom: 1px solid var(--gaz-rule-firm); }
.gaz-firm a:hover { border-bottom-color: var(--gaz-red); }

.gaz-yes { color: var(--gaz-seal); font-weight: 600; }
.gaz-no { color: var(--gaz-ink-3); }

.gaz-legend { font: 400 var(--gaz-t-xs)/1.8 var(--gaz-meta); color: var(--gaz-ink-3); margin-top: var(--gaz-4); }
.gaz-legend b { color: var(--gaz-ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- stamp */

/* The signature element: a public-record stamp. Rotated, outlined, never filled. */
/* The rotation is the signature, but it must not push the stamp out of its
   column: rotating from the left edge keeps the overhang inside the padding. */
.gaz-stamp {
  display: inline-block; font: 500 10px/1 var(--gaz-meta);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 9px; border: 1.5px solid currentColor;
  transform: rotate(-1.5deg); transform-origin: left center;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.gaz-stamp--sealed { color: var(--gaz-seal); }
.gaz-stamp--open   { color: var(--gaz-open); }
.gaz-stamp--void   { color: var(--gaz-red); }
.gaz-stamp__n { font-size: var(--gaz-t-sm); font-weight: 700; }

/* ---------------------------------------------------------------- dossier */

/* Company entries are set as dossier records, not marketing cards. */
/* Column gaps, not vertical borders. The old rule assumed exactly three
   columns via :nth-child(3n) and broke at every other breakpoint; a rule on
   top of each entry gives the same newspaper rhythm at any column count. */
.gaz-dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: var(--gaz-7); row-gap: 0; }
.gaz-dossier {
  padding: var(--gaz-5) 0; border-top: 1px solid var(--gaz-rule);
  display: flex; flex-direction: column; min-width: 0;
}
.gaz-dossier__ref { font: 400 10px/1 var(--gaz-meta); letter-spacing: 0.18em; color: var(--gaz-ink-3); margin-bottom: var(--gaz-3); }
.gaz-dossier__name { font-size: var(--gaz-t-md); line-height: 1.2; margin-bottom: var(--gaz-3); hyphens: auto; }
.gaz-dossier__name a { text-decoration: none; }
.gaz-dossier__meta { font: 400 10px/1.6 var(--gaz-meta); letter-spacing: 0.06em; color: var(--gaz-ink-3); margin-bottom: var(--gaz-4); }
.gaz-dossier > p { font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); }
.gaz-dossier__foot {
  margin-top: auto; padding-top: var(--gaz-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gaz-3) var(--gaz-4); flex-wrap: wrap;
}
.gaz-dossier__foot a { font: 500 10px/1 var(--gaz-meta); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.gaz-dossier__media { margin-bottom: var(--gaz-4); display: block; }
.gaz-dossier__media img { width: 100%; height: 190px; object-fit: cover; }

/* Tags are not links, so they must stop looking like underlined ones. */
.gaz-tags { display: flex; flex-wrap: wrap; gap: 5px var(--gaz-3); margin-bottom: var(--gaz-4); }
.gaz-tag { font: 400 10px/1.5 var(--gaz-meta); color: var(--gaz-ink-3); }
.gaz-tag + .gaz-tag::before { content: "· "; color: var(--gaz-rule-firm); margin-left: -9px; padding-right: 4px; }

/* ---------------------------------------------------------------- scorecard */

.gaz-score-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--gaz-4); margin-bottom: var(--gaz-5); padding-bottom: var(--gaz-4); border-bottom: 1px solid var(--gaz-ink); }
.gaz-score-total { font-family: var(--gaz-display); font-size: var(--gaz-t-2xl); line-height: 1; color: var(--gaz-seal); font-variant-numeric: tabular-nums lining-nums; }
.gaz-score-total span { font-family: var(--gaz-meta); font-size: var(--gaz-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaz-ink-3); }

.gaz-src { font-family: var(--gaz-meta); font-size: var(--gaz-t-xs); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; margin-left: var(--gaz-2); }
.gaz-hint { display: block; font-family: var(--gaz-meta); font-size: var(--gaz-t-xs); line-height: 1.6; color: var(--gaz-ink-3); margin-top: var(--gaz-2); }
.gaz-na { font-style: italic; color: var(--gaz-ink-3); }

.gaz-card-list { list-style: none; padding: 0; margin: 0 0 var(--gaz-4); font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); }
.gaz-card-list li { padding-left: var(--gaz-4); position: relative; }
.gaz-card-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--gaz-rule-firm); }

/* ---------------------------------------------------------------- weights */

.gaz-weight__bar { height: 4px; background: var(--gaz-paper-3); margin-top: var(--gaz-2); }
.gaz-weight__fill { display: block; height: 100%; background: var(--gaz-ink); }

/* ---------------------------------------------------------------- prose */

.gaz-prose { max-width: var(--gaz-read); font-size: var(--gaz-t-md); }
.gaz-prose h2 { margin-top: var(--gaz-7); }
.gaz-prose h3 { margin-top: var(--gaz-6); }
.gaz-prose blockquote { margin: var(--gaz-6) 0; padding-left: var(--gaz-5); border-left: 3px solid var(--gaz-red); font-style: italic; color: var(--gaz-ink-2); }
.gaz-prose table { width: 100%; border-collapse: collapse; font-size: var(--gaz-t-sm); margin: var(--gaz-5) 0; }
.gaz-prose th, .gaz-prose td { border-bottom: 1px solid var(--gaz-rule); padding: var(--gaz-3); text-align: left; }
.gaz-prose img { margin: var(--gaz-5) 0; }

.gaz-crumbs { font: 400 var(--gaz-t-xs)/1 var(--gaz-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaz-ink-3); margin-bottom: var(--gaz-5); }
.gaz-crumbs a { color: var(--gaz-ink-3); text-decoration: none; }
.gaz-crumbs a:hover { color: var(--gaz-red); }

.gaz-pagehead { padding: var(--gaz-7) 0 var(--gaz-5); border-bottom: 3px double var(--gaz-ink); }
.gaz-pagehead h1 { max-width: 26ch; }
.gaz-dateline { font: 400 var(--gaz-t-xs)/1.6 var(--gaz-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaz-ink-3); }

/* ---------------------------------------------------------------- notice */

.gaz-notice { border-left: 3px solid var(--gaz-open); background: var(--gaz-paper-2); padding: var(--gaz-4) var(--gaz-5); font-size: var(--gaz-t-sm); margin-bottom: var(--gaz-5); }
.gaz-notice strong { display: block; margin-bottom: var(--gaz-1); font-family: var(--gaz-display); font-size: var(--gaz-t-base); }
.gaz-notice--void { border-left-color: var(--gaz-red); }

/* ---------------------------------------------------------------- lists */

/* Editorial numbered list used for "how to choose" and "red flags". */
.gaz-steps { list-style: none; padding: 0; margin: 0; counter-reset: gaz; border-top: 1px solid var(--gaz-rule); }
.gaz-steps li {
  counter-increment: gaz; display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--gaz-4);
  padding: var(--gaz-5) 0; border-bottom: 1px solid var(--gaz-rule); margin: 0;
}
.gaz-steps li::before {
  content: counter(gaz, decimal-leading-zero);
  font: 400 var(--gaz-t-md)/1 var(--gaz-meta); color: var(--gaz-red);
}
.gaz-steps h3 { font-size: var(--gaz-t-md); margin-bottom: var(--gaz-2); }
.gaz-steps p { font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); margin: 0; }

/* ---------------------------------------------------------------- geo */

.gaz-geo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gaz-4) var(--gaz-5); }
.gaz-geo__col h3 { font-size: var(--gaz-t-sm); font-family: var(--gaz-meta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gaz-ink-3); margin-bottom: var(--gaz-3); }
.gaz-geo__col ul { list-style: none; padding: 0; margin: 0; font-size: var(--gaz-t-sm); }
.gaz-geo__col li { margin-bottom: var(--gaz-2); }

/* ---------------------------------------------------------------- faq */

.gaz-faq { border-top: 1px solid var(--gaz-ink); }
.gaz-qa { border-bottom: 1px solid var(--gaz-rule); }
.gaz-qa summary {
  cursor: pointer; padding: var(--gaz-4) var(--gaz-7) var(--gaz-4) 0; position: relative;
  font-family: var(--gaz-display); font-size: var(--gaz-t-md); list-style: none; line-height: 1.3;
}
.gaz-qa summary::-webkit-details-marker { display: none; }
.gaz-qa summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--gaz-meta); font-size: var(--gaz-t-md); color: var(--gaz-red);
  transition: transform 0.5s var(--gaz-ease);
}
.gaz-qa[open] summary::after { content: "\2212"; }
.gaz-qa__a { padding: 0 0 var(--gaz-5); color: var(--gaz-ink-2); max-width: var(--gaz-read); }

/* ---------------------------------------------------------------- colophon */

.gaz-colophon { border-top: 3px double var(--gaz-ink); background: var(--gaz-paper-2); padding: var(--gaz-8) 0 var(--gaz-5); margin-top: var(--gaz-8); }
.gaz-colophon__grid { display: grid; grid-template-columns: minmax(0,1.7fr) repeat(3, minmax(0,1fr)); gap: var(--gaz-6); }
.gaz-colophon h2 { font: 500 var(--gaz-t-xs)/1 var(--gaz-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gaz-ink-3); margin-bottom: var(--gaz-4); }
.gaz-colophon__about { font-size: var(--gaz-t-sm); color: var(--gaz-ink-2); max-width: 44ch; }
.gaz-colophon__col a { display: block; font-size: var(--gaz-t-sm); text-decoration: none; padding: var(--gaz-1) 0; color: var(--gaz-ink-2); }
.gaz-colophon__col a:hover { color: var(--gaz-red); }
.gaz-colophon__bottom {
  margin-top: var(--gaz-7); padding-top: var(--gaz-4); border-top: 1px solid var(--gaz-rule);
  font: 400 var(--gaz-t-xs)/1.8 var(--gaz-meta); color: var(--gaz-ink-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gaz-3);
}

.gaz-top { position: fixed; right: var(--gaz-5); bottom: var(--gaz-5); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--gaz-ease); background: var(--gaz-paper); }
.gaz-top.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  :root { --gaz-t-3xl: 3rem; --gaz-t-2xl: 2.2rem; --gaz-t-xl: 1.7rem; }
  .gaz-lede__grid { grid-template-columns: 1fr; gap: var(--gaz-6); }
  .gaz-colophon__grid { grid-template-columns: 1fr 1fr; }
  .gaz-dossiers { column-gap: var(--gaz-6); }

  .gaz-burger { display: block; }
  .gaz-masthead__main { position: relative; }
  .gaz-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--gaz-paper);
    border: 1px solid var(--gaz-ink); padding: var(--gaz-3) var(--gaz-4); z-index: 40;
  }
  .gaz-nav.is-open { display: flex; }
  .gaz-nav a { padding: var(--gaz-3) 0; border-bottom: 1px solid var(--gaz-rule); }
}

@media (max-width: 680px) {
  :root { --gaz-t-3xl: 2.5rem; --gaz-t-2xl: 1.9rem; }
  .gaz-wrap { padding: 0 var(--gaz-4); }
  .gaz-band { padding: var(--gaz-7) 0; }
  .gaz-lede { padding: var(--gaz-7) 0 var(--gaz-6); }
  /* The edition line keeps what a phone user actually needs: date and phone. */
  .gaz-edition-extra { display: none; }
  .gaz-pull__q { font-size: var(--gaz-t-md); }
  .gaz-dropcap::first-letter { font-size: 3.2em; }
  /* Touch targets: 44px is the smallest comfortable tap area. */
  .gaz-btn { min-height: 44px; padding: var(--gaz-4) var(--gaz-5); }
  .gaz-burger { min-height: 44px; padding: var(--gaz-3) var(--gaz-4); }
  .gaz-nav a { min-height: 44px; display: flex; align-items: center; }
  .gaz-pull__body { columns: 1; }
  .gaz-colophon__grid { grid-template-columns: 1fr; }
  .gaz-dossiers { grid-template-columns: 1fr; }
  .gaz-dossier__media img { height: 210px; }
  .gaz-steps li { grid-template-columns: 2.4rem 1fr; gap: var(--gaz-3); }

  /* The ledger becomes stacked records rather than a scroll trap. */
  .gaz-ledger--stack thead { display: none; }
  .gaz-ledger--stack, .gaz-ledger--stack tbody, .gaz-ledger--stack tr,
  .gaz-ledger--stack th, .gaz-ledger--stack td { display: block; width: 100%; }
  .gaz-ledger--stack tr { border-bottom: 1px solid var(--gaz-ink); padding: var(--gaz-4) 0; }
  .gaz-ledger--stack th, .gaz-ledger--stack td { border: 0; padding: var(--gaz-1) 0; }
  .gaz-ledger--stack td::before {
    content: attr(data-label); display: block;
    font: 400 var(--gaz-t-xs)/1 var(--gaz-meta); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gaz-ink-3); margin-bottom: 3px;
  }
  .gaz-rank { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .gaz-masthead, .gaz-colophon, .gaz-btn, .gaz-top { display: none; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}