/* ============================================================
   THE PAPER — public skin of threat-intel-v3 (gossipqueen.lol).
   Every rule is scoped :root[data-brand="gq"], which app.js sets for
   role:public only (initGossipQueen). NIGHTWIRE (style.css) is never
   edited and never sees these rules. The public renderers live in
   js/paper.js and use gq-* classes only.

   Source of truth: the approved mockup (mockups/src/paper.html). Values
   below are the mockup's, 1:1: Newsreader (variable, opsz 6..72, installed
   by app.js gqInstallFonts) for heads and body with optical sizing on,
   the system sans for every meta line, pure white, #111 ink, one accent
   (#1a3d8f) on the nameplate rule and section names only, #dcdcdc
   hairlines, a 12-column grid split by vertical hairlines.

   Dark mode (#619): `data-gq-theme="light|dark"` on <html>, set pre-paint
   by js/gq-theme.js (see index.html <head>). Every rule below still keys
   off :root[data-brand="gq"]; the dark block just repoints the same
   --gq-* tokens, so downstream rules (--bone/--dim/--hair/--cyanotype)
   pick it up for free. Quiet night edition, not neon — see contrast
   table in the dispatch evidence.

   Motion + responsive pass (#676, option "Press" from the options board,
   2026-10-29). Motion reads like print: on a view's first paint the
   accent rule, the column hairlines and the section ink rules draw in
   from their origin, and the type settles 6px into place behind them;
   headline underlines draw from the left on hover; the Usual suspects
   counts settle to their value once; a 2px section bar sits under the
   nav and slides to the open section; the theme switch crossfades
   (View Transition, colour-transition fallback, both in gq-theme.js);
   Hot goss and the lower sections reveal once when they reach the fold
   (IntersectionObserver in paper.js, never on pager). Every keyframe is
   transform/opacity only; the two paint-only exceptions are the hover
   underline (background-size on the link) and the theme colour crossfade.
   No element runs longer than --gq-draw (400ms; the staggered first
   paint is over by ~600ms), and the prefers-reduced-motion block at the
   end switches all of it off.
   `.gq-enter` is paper.js's first-paint class (dropped after 1.5s so a
   pager or filter reload never replays the sequence). Type is fluid
   (clamp) and the 12-column grid takes four shapes: 360 one column,
   768 lead full + 6/6, 1280 6/3/3, 1600 5/4/3.
   ============================================================ */

/* Backstop: gq chrome never paints outside the paper, whatever its
   `hidden` attribute or a stray class says. */
:root:not([data-brand="gq"]) #gq-header,
:root:not([data-brand="gq"]) .gq-footer,
:root:not([data-brand="gq"]) [class^="gq-"],
:root:not([data-brand="gq"]) [class*=" gq-"] { display: none !important; }

/* Boot guard (public host only, until /api/me answers): nothing of the
   console shell paints or pulls its fonts. app.js removes the class.
   data-gq-theme is already set by gq-theme.js at this point (it runs
   before these stylesheets paint), so the guard itself is themed —
   otherwise a dark-mode reader gets a white flash before /api/me answers. */
:root.gq-boot:not([data-brand]) #app-root,
:root.gq-boot:not([data-brand]) #toast-root { display: none !important; }
:root.gq-boot:not([data-brand]) body { background: #ffffff; }
:root.gq-boot:not([data-brand])[data-gq-theme="dark"] body { background: #121212; }

:root[data-brand="gq"] {
  --gq-paper: #ffffff;
  --gq-ink: #111111;
  --gq-ink-2: #333333;
  --gq-meta: #5c5c5c;
  --gq-hair: #dcdcdc;
  --gq-accent: #1a3d8f;
  --gq-placeholder: #767676;
  --gq-scrim: rgba(255, 255, 255, 0.72);
  --gq-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --gq-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Liberation Sans", sans-serif;
  --gq-gut: 20px;
  /* motion (#676): four durations, one curve; every transition and keyframe below reads these */
  --gq-fast: 80ms; --gq-ui: 160ms; --gq-settle: 320ms; --gq-draw: 400ms;
  --gq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* console tokens some shared chrome still reads (toasts, spinners) */
  --f-ui: var(--gq-sans); --f-display: var(--gq-serif); --f-mono: var(--gq-sans);
  --bone: var(--gq-ink); --dim: var(--gq-meta); --hair: var(--gq-hair); --cyanotype: var(--gq-ink);
  color-scheme: light;
  height: auto; overflow: visible;
  -webkit-text-size-adjust: 100%;
}

/* Night edition. Same restrained system, repointed: warm near-black paper,
   soft bone ink, a lightened accent (contrast ratios in dispatch evidence). */
:root[data-brand="gq"][data-gq-theme="dark"] {
  --gq-paper: #121212;
  --gq-ink: #e8e6e1;
  --gq-ink-2: #c8c5be;
  --gq-meta: #9b9b9b;
  --gq-hair: #2f2f2f;
  --gq-accent: #89a8ef;
  --gq-placeholder: #808080;
  --gq-scrim: rgba(0, 0, 0, 0.72);
  color-scheme: dark;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
:root[data-brand="gq"] body {
  height: auto; min-height: 100%; overflow: visible; margin: 0;
  background: var(--gq-paper); color: var(--gq-ink);
  font-family: var(--gq-serif); font-size: 17px; line-height: 1.45;
  font-optical-sizing: auto; -webkit-font-smoothing: auto;
}
:root[data-brand="gq"] a { color: inherit; text-decoration: none; }
:root[data-brand="gq"] a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-brand="gq"] :focus-visible { outline: 2px solid var(--gq-ink); outline-offset: 2px; border-radius: 0; }
:root[data-brand="gq"] ::selection { background: var(--gq-ink); color: var(--gq-paper); }
:root[data-brand="gq"] b, :root[data-brand="gq"] strong { font-weight: 600; }

/* The console shell under the paper: no rail, ribbon, wire or palette;
   the content region becomes a plain page-width wrapper. */
:root[data-brand="gq"] .rail,
:root[data-brand="gq"] .ribbon,
:root[data-brand="gq"] .wire,
:root[data-brand="gq"] .cmdk-overlay,
:root[data-brand="gq"] .dossier-close { display: none !important; }
:root[data-brand="gq"] .app { display: block; height: auto; width: auto; }
:root[data-brand="gq"] .content-region { display: block; height: auto; margin: 0; }
:root[data-brand="gq"] .view-scroll { overflow: visible; }
:root[data-brand="gq"] .view { max-width: 1300px; margin: 0 auto; padding: 0 var(--gq-gut); }
:root[data-brand="gq"] .loading-row { padding: 20px 0; }
:root[data-brand="gq"] .loading-spin { display: none; }
:root[data-brand="gq"] .loading-row::after { content: "Loading\2026"; font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); }

/* ── Nameplate + nav ──────────────────────────────────────────────────── */
:root[data-brand="gq"] .gq-wrap { max-width: 1300px; margin: 0 auto; padding: 0 var(--gq-gut); }
:root[data-brand="gq"] .gq-plate { display: flex; align-items: baseline; gap: 28px; padding: 22px 0 10px; flex-wrap: wrap; }
:root[data-brand="gq"] .gq-plate h1 { margin: 0; font-family: var(--gq-serif); font-weight: 600; font-size: clamp(32px, 20px + 1.4vw, 44px); line-height: 1; letter-spacing: -0.01em; font-variation-settings: "opsz" 72; }
:root[data-brand="gq"] .gq-plate p { margin: 0; font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); }
:root[data-brand="gq"] .gq-plate p span + span::before { content: ""; display: inline-block; width: 18px; }
:root[data-brand="gq"] .gq-plate-rule { height: 2px; background: var(--gq-accent); }

/* Theme toggle (#619): plain text button, meta style, no icon/pill. */
:root[data-brand="gq"] .gq-theme-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0 0 0 18px; padding: 0;
  font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--gq-hair); text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 24px;
}
:root[data-brand="gq"] .gq-theme-toggle:hover { color: var(--gq-ink); text-decoration-color: var(--gq-ink); }
:root[data-brand="gq"] .gq-nav { font: 15px/1 var(--gq-sans); padding: 12px 0; border-bottom: 1px solid var(--gq-hair); display: flex; flex-wrap: wrap; gap: 8px 22px; position: relative; }
:root[data-brand="gq"] .gq-nav a.active { font-weight: 600; }
/* Section bar (FT): one 2px ink rule on the nav's hairline under the open section. paper.js measures the
   active item into --gq-nav-x/-w; the bar is a 1px box scaled and translated, so the slide is transform only. */
:root[data-brand="gq"] .gq-nav::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--gq-ink); transform: translateX(var(--gq-nav-x, 0px)) scaleX(var(--gq-nav-w, 0)); transform-origin: left; transition: transform var(--gq-ui) var(--gq-ease); pointer-events: none; }
:root[data-brand="gq"] .gq-nav.gq-nav-unmeasured::after { transition: none; }
:root[data-brand="gq"] .gq-slow { margin: 14px 0 0; font: 15px/1.4 var(--gq-sans); color: var(--gq-ink); }

/* ── Headline hover: the underline draws from the left in --gq-ui ────── */
:root[data-brand="gq"] .gq-lead h2 a, :root[data-brand="gq"] .gq-seconds h3 a, :root[data-brand="gq"] .gq-stack h3 a,
:root[data-brand="gq"] .gq-goss h3 a, :root[data-brand="gq"] .gq-item h3 a, :root[data-brand="gq"] .gq-row h3 a,
:root[data-brand="gq"] .gq-breached li > a, :root[data-brand="gq"] .gq-victims li > a, :root[data-brand="gq"] .gq-table td.g a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 1px;
  transition: background-size var(--gq-ui) var(--gq-ease);
}
:root[data-brand="gq"] .gq-lead h2 a:hover, :root[data-brand="gq"] .gq-seconds h3 a:hover, :root[data-brand="gq"] .gq-stack h3 a:hover,
:root[data-brand="gq"] .gq-goss h3 a:hover, :root[data-brand="gq"] .gq-item h3 a:hover, :root[data-brand="gq"] .gq-row h3 a:hover,
:root[data-brand="gq"] .gq-breached li > a:hover, :root[data-brand="gq"] .gq-victims li > a:hover, :root[data-brand="gq"] .gq-table td.g a:hover,
:root[data-brand="gq"] .gq-lead h2 a:focus-visible, :root[data-brand="gq"] .gq-seconds h3 a:focus-visible, :root[data-brand="gq"] .gq-stack h3 a:focus-visible,
:root[data-brand="gq"] .gq-goss h3 a:focus-visible, :root[data-brand="gq"] .gq-item h3 a:focus-visible, :root[data-brand="gq"] .gq-row h3 a:focus-visible,
:root[data-brand="gq"] .gq-breached li > a:focus-visible, :root[data-brand="gq"] .gq-victims li > a:focus-visible, :root[data-brand="gq"] .gq-table td.g a:focus-visible { background-size: 100% 1px; text-decoration: none; }

/* ── Section names: the accent's only job besides the nameplate rule ─── */
:root[data-brand="gq"] .gq-sec { font: 700 14px/1.2 var(--gq-sans); color: var(--gq-accent); margin: 0 0 12px; padding-top: 8px; border-top: 1px solid transparent; position: relative; letter-spacing: 0; text-transform: none; }
/* The ink rule over a section name is a pseudo-element on the (transparent) border line so it can draw in from the left. */
:root[data-brand="gq"] .gq-sec::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gq-ink); transform-origin: left; pointer-events: none; }
:root[data-brand="gq"] .gq-sec a { color: inherit; }

/* ── Shared text styles ───────────────────────────────────────────────── */
:root[data-brand="gq"] .gq-meta { font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); margin: 0; }
:root[data-brand="gq"] .gq-meta b { color: var(--gq-ink); font-weight: 600; }
:root[data-brand="gq"] .gq-meta a { text-decoration: underline; text-decoration-color: var(--gq-hair); text-underline-offset: 3px; }
:root[data-brand="gq"] .nw { white-space: nowrap; }
:root[data-brand="gq"] .gq-stand { font-size: 17px; line-height: 1.45; color: var(--gq-ink-2); margin: 0 0 10px; }
:root[data-brand="gq"] .gq-note { font: 13px/1.5 var(--gq-sans); color: var(--gq-meta); margin: 14px 0 0; max-width: 60ch; }
:root[data-brand="gq"] .gq-empty { font: 15px/1.45 var(--gq-sans); color: var(--gq-meta); margin: 0 0 14px; max-width: 60ch; }
:root[data-brand="gq"] .gq-footer { max-width: 1300px; margin: 0 auto; padding: 0 var(--gq-gut); border-top: 0; background: none; font: 13px/1.5 var(--gq-sans); color: var(--gq-meta); }
:root[data-brand="gq"] .gq-footer::before { content: ""; display: block; border-top: 1px solid var(--gq-hair); }

/* ── The 12-column grid with vertical hairlines ───────────────────────── */
:root[data-brand="gq"] .gq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
:root[data-brand="gq"] .gq-grid > * { padding: 0 var(--gq-gut); position: relative; min-width: 0; }
/* The column hairline is a positioned pseudo-element, not a border, so it can draw in (scaleY from the top) on first paint. Same pixel, same colour. */
:root[data-brand="gq"] .gq-grid > * + *::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gq-hair); transform-origin: top; pointer-events: none; }
:root[data-brand="gq"] .gq-grid > :first-child { padding-left: 0; }
:root[data-brand="gq"] .gq-grid > :last-child { padding-right: 0; }

/* ── Front page ───────────────────────────────────────────────────────── */
:root[data-brand="gq"] .gq-front { padding-top: 20px; }
:root[data-brand="gq"] .gq-lead { grid-column: span 6; }
:root[data-brand="gq"] .gq-patch, :root[data-brand="gq"] .gq-breached { grid-column: span 3; }
:root[data-brand="gq"] .gq-lead h2 { font-family: var(--gq-serif); font-size: clamp(26px, 14px + 1.5vw, 38px); line-height: 1.12; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.005em; font-variation-settings: "opsz" 48; }
:root[data-brand="gq"] .gq-lead .gq-stand { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

:root[data-brand="gq"] .gq-seconds { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-seconds article { padding: 0 var(--gq-gut) 18px 0; }
:root[data-brand="gq"] .gq-seconds article:nth-child(even) { padding: 0 0 18px var(--gq-gut); border-left: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-seconds h3 { font-size: clamp(17px, 15px + 0.3vw, 20px); line-height: 1.2; font-weight: 500; margin: 0 0 6px; }
:root[data-brand="gq"] .gq-seconds .gq-sum { font-size: 15px; line-height: 1.4; color: var(--gq-ink-2); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

:root[data-brand="gq"] .gq-stack article { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-stack article:last-child { border-bottom: 0; }
:root[data-brand="gq"] .gq-stack h3 { font-size: clamp(17px, 14.5px + 0.3vw, 19px); line-height: 1.22; font-weight: 500; margin: 0 0 5px; }

:root[data-brand="gq"] .gq-breached ol { list-style: none; margin: 0; padding: 0; }
:root[data-brand="gq"] .gq-breached li { font-size: 16px; line-height: 1.3; padding: 0 0 11px; margin: 0 0 11px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-breached li:last-child { border-bottom: 0; }
:root[data-brand="gq"] .gq-breached .gq-meta { margin-top: 3px; }

:root[data-brand="gq"] .gq-goss { margin-top: 36px; }
:root[data-brand="gq"] .gq-goss .gq-grid > div { grid-column: span 3; }
:root[data-brand="gq"] .gq-goss article { padding: 0 0 13px; margin: 0 0 13px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-goss article:last-child { border-bottom: 0; }
:root[data-brand="gq"] .gq-goss h3 { font-size: clamp(17px, 14.5px + 0.3vw, 19px); line-height: 1.22; font-weight: 500; margin: 0 0 5px; }

:root[data-brand="gq"] .gq-lower { margin-top: 36px; padding-bottom: 40px; }
:root[data-brand="gq"] .gq-lower .gq-suspects-wide { grid-column: span 12; padding: 0; }
/* Full-width row: columns sit on the 12-column grid (3 / 1.5 / 1.5 / 1.5 / rest). */
:root[data-brand="gq"] .gq-suspects-wide .gq-table { table-layout: fixed; }
:root[data-brand="gq"] .gq-suspects-wide th:nth-child(1) { width: 25%; }
:root[data-brand="gq"] .gq-suspects-wide th:nth-child(2),
:root[data-brand="gq"] .gq-suspects-wide th:nth-child(3),
:root[data-brand="gq"] .gq-suspects-wide th:nth-child(4) { width: 12.5%; }
:root[data-brand="gq"] .gq-suspects-wide th:nth-child(5),
:root[data-brand="gq"] .gq-suspects-wide td:nth-child(5) { padding-left: 40px; }

:root[data-brand="gq"] .gq-table { width: 100%; border-collapse: collapse; font: 15px/1.3 var(--gq-sans); }
:root[data-brand="gq"] .gq-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--gq-meta); padding: 0 8px 6px 0; border-bottom: 1px solid var(--gq-ink); }
:root[data-brand="gq"] .gq-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-table td.n, :root[data-brand="gq"] .gq-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-brand="gq"] .gq-table td.g { font-family: var(--gq-serif); font-size: 17px; }
:root[data-brand="gq"] .gq-table tr.off td:nth-child(2) { color: var(--gq-ink); font-weight: 600; }


/* ── Section pages: 8-column main well, 4-column side column ─────────── */
:root[data-brand="gq"] .gq-page { padding: 20px 0 40px; }
:root[data-brand="gq"] .gq-page > .gq-sec { margin-bottom: 16px; }
:root[data-brand="gq"] .gq-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
:root[data-brand="gq"] .gq-main { grid-column: 1 / span 8; grid-row: 1; padding-right: var(--gq-gut); min-width: 0; }
:root[data-brand="gq"] .gq-side { grid-column: 9 / span 4; grid-row: 1; padding-left: var(--gq-gut); border-left: 1px solid var(--gq-hair); min-width: 0; }
:root[data-brand="gq"] .gq-side > .gq-sec { margin-top: 28px; }
:root[data-brand="gq"] .gq-side > .gq-sec:first-child { margin-top: 0; }
:root[data-brand="gq"] .gq-side .gq-stand { margin-bottom: 18px; }

/* Controls: labelled plain fields on a hairline, no boxes. */
:root[data-brand="gq"] .gq-filters { display: grid; gap: 14px; margin: 0; }
:root[data-brand="gq"] .gq-field { display: block; }
:root[data-brand="gq"] .gq-field > span { display: block; font: 600 13px/1.4 var(--gq-sans); color: var(--gq-meta); margin-bottom: 2px; }
:root[data-brand="gq"] .gq-field input,
:root[data-brand="gq"] .gq-field select {
  display: block; width: 100%; margin: 0; padding: 5px 0; border: 0; border-bottom: 1px solid var(--gq-ink); border-radius: 0;
  background: transparent; color: var(--gq-ink); font: 16px/1.3 var(--gq-sans); -webkit-appearance: none; appearance: none; box-shadow: none;
}
:root[data-brand="gq"] .gq-field input::placeholder { color: var(--gq-placeholder); }
:root[data-brand="gq"] .gq-field input:focus, :root[data-brand="gq"] .gq-field select:focus { outline: none; border-bottom-width: 2px; padding-bottom: 4px; }
:root[data-brand="gq"] .gq-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; }
:root[data-brand="gq"] .gq-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
:root[data-brand="gq"] .gq-check { display: flex; gap: 8px; align-items: baseline; font: 15px/1.4 var(--gq-sans); color: var(--gq-ink); cursor: pointer; }
:root[data-brand="gq"] .gq-check input { accent-color: var(--gq-ink); margin: 0; }
:root[data-brand="gq"] .gq-link,
:root[data-brand="gq"] .gq-pager button {
  justify-self: start; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: 600 15px/1.4 var(--gq-sans); color: var(--gq-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:root[data-brand="gq"] .gq-pager { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--gq-ink); font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); }

/* Item lists: the front page's article rhythm, in newspaper columns. */
:root[data-brand="gq"] .gq-list { margin: 0; }
:root[data-brand="gq"] .gq-list2 { columns: 2; column-gap: calc(var(--gq-gut) * 2); column-rule: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-item { break-inside: avoid; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-item h3 { font-size: clamp(17px, 15px + 0.3vw, 20px); line-height: 1.2; font-weight: 500; margin: 0 0 6px; }
:root[data-brand="gq"] .gq-item h3 b { font-weight: 600; }
:root[data-brand="gq"] .gq-item .gq-sum { font-size: 15px; line-height: 1.4; color: var(--gq-ink-2); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-brand="gq"] .gq-item .gq-sum b { font-weight: 600; color: var(--gq-ink); }
:root[data-brand="gq"] .gq-item .gq-facts { color: var(--gq-ink-2); margin-bottom: 3px; }
:root[data-brand="gq"] .gq-list:not(.gq-list2) { max-width: 68ch; }
:root[data-brand="gq"] .gq-scroll { overflow-x: auto; }
:root[data-brand="gq"] .gq-mini { margin-bottom: 4px; }
:root[data-brand="gq"] .gq-mini td { font-size: 14px; padding: 5px 8px 5px 0; }
:root[data-brand="gq"] .gq-plain { list-style: none; margin: 0; padding: 0; }
:root[data-brand="gq"] .gq-plain li { font-size: 16px; line-height: 1.35; padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-plain li:last-child { border-bottom: 0; }
:root[data-brand="gq"] .gq-break { word-break: break-all; }

/* Who got breached: sub-sections inside the page (news, leak sites, HIBP). */
:root[data-brand="gq"] .gq-subhead { font-family: var(--gq-serif); font-size: 22px; line-height: 1.2; font-weight: 600; margin: 0 0 14px; }
:root[data-brand="gq"] .gq-br-sec + .gq-br-sec { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--gq-ink); }
:root[data-brand="gq"] .gq-more { font: 13px/1.4 var(--gq-sans); margin: 0; padding-top: 10px; border-top: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-more a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Who got breached: tab row, facet rows, day-grouped rows in columns. */
:root[data-brand="gq"] .gq-br-page > .gq-sec { margin-bottom: 0; }
:root[data-brand="gq"] .gq-tabbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; padding: 12px 0 12px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-tabs { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 16px/1.3 var(--gq-sans); }
:root[data-brand="gq"] .gq-tabs a.on { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
:root[data-brand="gq"] .gq-count { color: var(--gq-meta); font-weight: 400; font-variant-numeric: tabular-nums; }
:root[data-brand="gq"] .gq-find { width: 280px; max-width: 100%; }
:root[data-brand="gq"] .gq-facets { padding: 10px 0 2px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-facet { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 14px/1.4 var(--gq-sans); margin: 0 0 8px; }
:root[data-brand="gq"] .gq-facet span { width: 64px; color: var(--gq-meta); font-weight: 600; font-size: 13px; }
:root[data-brand="gq"] .gq-facet a { text-decoration: underline; text-decoration-color: var(--gq-hair); text-underline-offset: 3px; }
:root[data-brand="gq"] .gq-facet a.on { font-weight: 700; text-decoration-color: var(--gq-ink); }
:root[data-brand="gq"] #gq-br-list { padding-top: 16px; }
:root[data-brand="gq"] .gq-flow { columns: 3; column-gap: calc(var(--gq-gut) * 2); column-rule: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-day, :root[data-brand="gq"] .gq-flow > .gq-row { break-inside: avoid; }
:root[data-brand="gq"] .gq-dayhead { font: 700 13px/1.3 var(--gq-sans); color: var(--gq-ink); margin: 0 0 10px; padding-top: 6px; border-top: 1px solid var(--gq-ink); }
:root[data-brand="gq"] .gq-flow > .gq-day:first-child .gq-dayhead { padding-top: 0; border-top: 0; }
:root[data-brand="gq"] .gq-row { padding: 0 0 9px; margin: 0 0 9px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-row h3 { font-size: 17px; line-height: 1.22; font-weight: 500; margin: 0 0 3px; }
:root[data-brand="gq"] .gq-row .gq-sum { font-size: 14.5px; line-height: 1.35; color: var(--gq-ink-2); margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-brand="gq"] .gq-row .gq-sum2 { -webkit-line-clamp: 1; }
:root[data-brand="gq"] .gq-line { font: 13px/1.4 var(--gq-sans); color: var(--gq-ink-2); margin: 0 0 2px; }
:root[data-brand="gq"] .gq-tags { font: 12.5px/1.4 var(--gq-sans); color: var(--gq-meta); margin: 0; }
:root[data-brand="gq"] .gq-morebar { display: flex; gap: 16px; align-items: baseline; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--gq-ink); }
:root[data-brand="gq"] .gq-br-page > .gq-note { margin-top: 20px; }

/* Rap sheet */
:root[data-brand="gq"] .gq-rap-head { margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-rap-head h2 { font-family: var(--gq-serif); font-size: clamp(26px, 14px + 1.5vw, 38px); line-height: 1.12; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.005em; font-variation-settings: "opsz" 48; }
:root[data-brand="gq"] .gq-victims { list-style: none; margin: 0; padding: 0; }
:root[data-brand="gq"] .gq-victims li { break-inside: avoid; font-size: 16px; line-height: 1.3; padding: 0 0 11px; margin: 0 0 11px; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-victims .gq-meta { margin-top: 3px; }


/* ── The full story: a plain sheet over the page ──────────────────────── */
:root[data-brand="gq"] .drawer-catch.show { background: var(--gq-scrim); }
:root[data-brand="gq"] .dossier {
  width: 640px; max-width: 100vw; background: var(--gq-paper); color: var(--gq-ink);
  border-left: 1px solid var(--gq-ink); box-shadow: none; transition: transform 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-brand="gq"] .dossier { transition: none; }
  /* #676: every animation and transition on the paper off; the page is simply there. */
  :root[data-brand="gq"] *, :root[data-brand="gq"] *::before, :root[data-brand="gq"] *::after { animation: none !important; transition: none !important; }
  :root[data-brand="gq"] .gq-fold { opacity: 1 !important; transform: none !important; }
  :root[data-brand="gq"]::view-transition-group(*), :root[data-brand="gq"]::view-transition-old(*), :root[data-brand="gq"]::view-transition-new(*) { animation: none !important; }
}
:root[data-brand="gq"] .dossier-head { padding: 0 28px; border: 0; animation: none; background: none; }
:root[data-brand="gq"] .dossier-head.kev-flare { animation: none; }
:root[data-brand="gq"] .dossier-body { padding: 0 28px 40px; }
:root[data-brand="gq"] .gq-sheet-bar { display: flex; justify-content: flex-end; padding: 14px 0 12px; }
:root[data-brand="gq"] .gq-story { margin-bottom: 26px; }
:root[data-brand="gq"] .gq-story h1 { font-family: var(--gq-serif); font-size: 30px; line-height: 1.14; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.005em; }
:root[data-brand="gq"] .gq-story-text { font-size: 17px; line-height: 1.5; color: var(--gq-ink-2); margin: 14px 0 12px; }
:root[data-brand="gq"] .dossier-body section { margin-bottom: 26px; }
:root[data-brand="gq"] .gq-rlist { list-style: none; margin: 0; padding: 0; }
:root[data-brand="gq"] .gq-rlist li { display: flex; justify-content: space-between; gap: 12px; font: 15px/1.3 var(--gq-sans); padding: 7px 0; border-bottom: 1px solid var(--gq-hair); }
:root[data-brand="gq"] .gq-rlist li a { text-decoration: underline; text-decoration-color: var(--gq-hair); text-underline-offset: 3px; }
:root[data-brand="gq"] .gq-rlist li span { color: var(--gq-meta); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
:root[data-brand="gq"] .dossier .gq-item h3 { font-size: 17px; }

/* Toasts (rare on the paper): a plain ruled note. */
:root[data-brand="gq"] .toast { background: var(--gq-paper); border: 1px solid var(--gq-ink); border-left-width: 1px; font: 13px/1.4 var(--gq-sans); color: var(--gq-ink); }

/* ── Loading states hold their height so the footer and lower sections never jump when data lands (desktop CLS was 0.97 before #676) ── */
:root[data-brand="gq"] .loading-row { min-height: 70vh; }
:root[data-brand="gq"] .gq-front { min-height: calc(100vh - 170px); }
:root[data-brand="gq"] .gq-main, :root[data-brand="gq"] #gq-br-list { min-height: calc(100vh - 160px); }
/* One-column phone: the lead holds a screen while it loads, so Patch or regret under it does not drop when the CVEs land (mobile CLS 0.21 otherwise). Only while the placeholder is there. */
:root[data-brand="gq"] .gq-lead:has(> .gq-wait:only-child) { min-height: calc(100vh - 160px); }
@media print { :root[data-brand="gq"] .gq-fold { opacity: 1 !important; transform: none !important; } }

/* ── Motion (#676): first paint of a view, fold reveal, crossfade, reduced motion ── */
@keyframes gq-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gq-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gq-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gq-rise { from { transform: translateY(6px); } to { transform: none; } }
/* Nameplate: once, the moment app.js unhides the header. The plate rises without fading: it is the first
   contentful paint, and an opacity-0 start would push FCP back by the whole sequence (measured +0.85s on mobile). */
:root[data-brand="gq"] #gq-header .gq-plate { animation: gq-rise var(--gq-settle) var(--gq-ease) both; }
:root[data-brand="gq"] #gq-header .gq-plate-rule { transform-origin: left; animation: gq-draw-x var(--gq-settle) var(--gq-ease) 60ms both; }
:root[data-brand="gq"] #gq-header .gq-nav { animation: gq-settle var(--gq-settle) var(--gq-ease) 100ms both; }
/* A view's first paint: rules first, then type. Section rules draw left to right, column hairlines top down
   (one after another), and every block of text settles in 6px behind its rule. `.gq-enter` is dropped by paper.js
   after 1.5s, so text that lands later (slow API) and pager/filter reloads simply appear. */
:root[data-brand="gq"] .gq-enter .gq-sec::before { animation: gq-draw-x var(--gq-settle) var(--gq-ease) both; }
:root[data-brand="gq"] .gq-enter .gq-grid > * + *::before { animation: gq-draw-y var(--gq-draw) var(--gq-ease) 80ms both; }
:root[data-brand="gq"] .gq-enter .gq-grid > :nth-child(3)::before { animation-delay: 130ms; }
:root[data-brand="gq"] .gq-enter .gq-grid > :nth-child(4)::before { animation-delay: 180ms; }
:root[data-brand="gq"] .gq-enter article, :root[data-brand="gq"] .gq-enter .gq-breached li, :root[data-brand="gq"] .gq-enter .gq-victims li,
:root[data-brand="gq"] .gq-enter .gq-table tbody tr, :root[data-brand="gq"] .gq-enter .gq-stand, :root[data-brand="gq"] .gq-enter .gq-filters,
:root[data-brand="gq"] .gq-enter .gq-tabbar, :root[data-brand="gq"] .gq-enter .gq-facets, :root[data-brand="gq"] .gq-enter .gq-note,
:root[data-brand="gq"] .gq-enter .gq-more, :root[data-brand="gq"] .gq-enter .gq-pager, :root[data-brand="gq"] .gq-enter .gq-empty,
:root[data-brand="gq"] .gq-enter .gq-plain li { animation: gq-settle var(--gq-settle) var(--gq-ease) 120ms both; }
:root[data-brand="gq"] .gq-enter .gq-patch article, :root[data-brand="gq"] .gq-enter .gq-patch .gq-note { animation-delay: 170ms; }
:root[data-brand="gq"] .gq-enter .gq-breached li, :root[data-brand="gq"] .gq-enter .gq-breached .gq-more { animation-delay: 220ms; }
/* Fold reveal: paper.js adds .gq-fold to Hot goss and the lower row, then .gq-seen when they cross the fold, once.
   Without JS (or under reduced motion) neither class is set and the sections are simply there. */
:root[data-brand="gq"] .gq-fold { opacity: 0; transform: translateY(8px); }
:root[data-brand="gq"] .gq-fold.gq-seen { opacity: 1; transform: none; transition: opacity var(--gq-settle) ease-out, transform var(--gq-settle) var(--gq-ease); }
/* Counts that tick (paper.js gqTick) are inline-blocks that hold their final width so the column never moves. */
:root[data-brand="gq"] .gq-count, :root[data-brand="gq"] .gq-tick { display: inline-block; }
/* Theme crossfade fallback (no View Transitions): gq-theme.js puts .gq-theme-fade on <html> for 300ms around the switch. */
:root[data-brand="gq"].gq-theme-fade, :root[data-brand="gq"].gq-theme-fade *, :root[data-brand="gq"].gq-theme-fade *::before, :root[data-brand="gq"].gq-theme-fade *::after {
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease !important;
}

/* Windows high-contrast / forced colours: the drawn rules are backgrounds, which that mode repaints as Canvas;
   paint them in CanvasText so the grid and the section rules stay visible, as the old borders did. */
@media (forced-colors: active) {
  :root[data-brand="gq"] .gq-sec::before, :root[data-brand="gq"] .gq-grid > * + *::before, :root[data-brand="gq"] .gq-nav::after,
  :root[data-brand="gq"] .gq-plate-rule, :root[data-brand="gq"] .gq-footer::before { background: CanvasText; border-color: CanvasText; forced-color-adjust: none; }
}

/* ── 1600: Patch or regret takes a fourth column so its heads stop wrapping to four lines (5 / 4 / 3) ── */
@media (min-width: 1500px) {
  :root[data-brand="gq"] .gq-lead { grid-column: span 5; }
  :root[data-brand="gq"] .gq-patch { grid-column: span 4; }
  :root[data-brand="gq"] .gq-breached { grid-column: span 3; }
}

/* ── Responsive (mockup breakpoints) ──────────────────────────────────── */
@media (max-width: 1100px) {
  :root[data-brand="gq"] .gq-lead { grid-column: span 12; padding-right: 0; }
  :root[data-brand="gq"] .gq-patch { grid-column: span 6; padding-left: 0 !important; margin-top: 28px; }
  :root[data-brand="gq"] .gq-patch::before { display: none; }
  :root[data-brand="gq"] .gq-breached { grid-column: span 6; margin-top: 28px; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div { grid-column: span 6; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div:nth-child(odd) { padding-left: 0; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div:nth-child(odd)::before { display: none; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div:nth-child(even) { padding-right: 0; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div:nth-child(n+3) { margin-top: 12px; }
  :root[data-brand="gq"] .gq-main { grid-column: 1 / span 12; grid-row: 2; padding-right: 0; }
  :root[data-brand="gq"] .gq-side { grid-column: 1 / span 12; grid-row: 1; padding: 0 0 18px; margin-bottom: 22px; border-left: 0; border-bottom: 1px solid var(--gq-hair); }
  :root[data-brand="gq"] .gq-side .gq-filters { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; column-gap: 28px; }
  :root[data-brand="gq"] .gq-main-first .gq-main { grid-row: 1; }
  :root[data-brand="gq"] .gq-main-first .gq-side { grid-row: 2; margin: 28px 0 0; padding: 0; border-bottom: 0; }
}
@media (max-width: 1200px) {
  :root[data-brand="gq"] .gq-flow { columns: 2; }
}
@media (max-width: 700px) {
  :root[data-brand="gq"] { --gq-gut: 16px; }
  :root[data-brand="gq"] .gq-flow { columns: 1; }
  :root[data-brand="gq"] .gq-find { width: 100%; }
  :root[data-brand="gq"] .gq-tabs { gap: 6px 18px; font-size: 15px; }
  :root[data-brand="gq"] .gq-facet { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: 2px; }
  :root[data-brand="gq"] .gq-facet span { flex: none; }
  :root[data-brand="gq"] .gq-plate { display: block; padding-top: 16px; }
  :root[data-brand="gq"] .gq-plate p { margin-top: 6px; }
  :root[data-brand="gq"] .gq-plate p span { display: block; }
  :root[data-brand="gq"] .gq-plate p span + span::before { display: none; }
  :root[data-brand="gq"] .gq-theme-toggle { display: flex; margin: 10px 0 0; min-height: 44px; }
  /* Nav becomes a strip (FT/Guardian phone): one row, scrolls sideways, 44px targets, the section bar scrolls with it. */
  :root[data-brand="gq"] .gq-nav { flex-wrap: nowrap; gap: 0 22px; font-size: 14px; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :root[data-brand="gq"] .gq-nav::-webkit-scrollbar { display: none; }
  :root[data-brand="gq"] .gq-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0; white-space: nowrap; }
  :root[data-brand="gq"] .gq-tabs a { display: inline-flex; align-items: center; min-height: 44px; }
  :root[data-brand="gq"] .gq-facet a { display: inline-flex; align-items: center; min-height: 40px; }
  :root[data-brand="gq"] .gq-tabs a.on { text-underline-offset: 5px; }
  :root[data-brand="gq"] .gq-link, :root[data-brand="gq"] .gq-more-btn { min-height: 44px; display: inline-flex; align-items: center; }
  /* Tables of groups stack: name and claims on the line, the rest as a meta line. No sideways scroll at 360. */
  :root[data-brand="gq"] .gq-stackable thead { display: none; }
  :root[data-brand="gq"] .gq-stackable, :root[data-brand="gq"] .gq-stackable tbody { display: block; }
  :root[data-brand="gq"] .gq-stackable tr { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--gq-hair); }
  :root[data-brand="gq"] .gq-stackable td { display: block; padding: 0; border: 0; min-width: 0; }
  :root[data-brand="gq"] .gq-stackable td.g { grid-column: 1 / 3; grid-row: 1; font-size: 17px; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(2) { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(2)::after { content: " claims"; color: var(--gq-meta); font-weight: 400; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(3), :root[data-brand="gq"] .gq-stackable td:nth-child(4), :root[data-brand="gq"] .gq-stackable td:nth-child(5) { grid-row: 2; font: 13px/1.4 var(--gq-sans); color: var(--gq-meta); text-align: left; white-space: nowrap; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(3) { grid-column: 1; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(3)::after { content: " this month"; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(4) { grid-column: 2; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(4)::before { content: "last claim "; }
  :root[data-brand="gq"] .gq-stackable td:nth-child(5) { grid-column: 3; display: block !important; text-align: right; white-space: normal; }
  :root[data-brand="gq"] .gq-stackable td[colspan] { grid-column: 1 / -1; }
  /* Pager: the page count on its own line, then two full-height targets. */
  :root[data-brand="gq"] .gq-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  :root[data-brand="gq"] .gq-pager > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; padding: 2px 0 4px; }
  :root[data-brand="gq"] .gq-pager > :first-child { grid-row: 2; grid-column: 1; }
  :root[data-brand="gq"] .gq-pager > :last-child { grid-row: 2; grid-column: 2; justify-self: end; }
  :root[data-brand="gq"] .gq-pager button { min-height: 44px; }
  :root[data-brand="gq"] .gq-grid { display: block; }
  :root[data-brand="gq"] .gq-grid > * { padding: 0 !important; }
  :root[data-brand="gq"] .gq-grid > * + *::before { display: none; }
  :root[data-brand="gq"] .gq-grid > * + * { margin-top: 28px; }
  :root[data-brand="gq"] .gq-seconds { grid-template-columns: 1fr; }
  :root[data-brand="gq"] .gq-seconds article, :root[data-brand="gq"] .gq-seconds article:nth-child(even) { padding: 0 0 14px; margin-bottom: 14px; border-left: 0; border-bottom: 1px solid var(--gq-hair); }
  :root[data-brand="gq"] .gq-goss .gq-grid > div + div { margin-top: 0; }
  :root[data-brand="gq"] .gq-goss .gq-grid > div:not(:last-child) article:last-child { border-bottom: 1px solid var(--gq-hair); }
  :root[data-brand="gq"] .gq-table td.g { font-size: 16px; }
  :root[data-brand="gq"] .gq-list2 { columns: 1; }
  :root[data-brand="gq"] .gq-side .gq-filters { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  :root[data-brand="gq"] .gq-side .gq-filters > :only-child { grid-column: 1 / -1; }
  :root[data-brand="gq"] .gq-table td.n { white-space: nowrap; }
  :root[data-brand="gq"] .gq-hide-s { display: none; }
  :root[data-brand="gq"] .gq-suspects-wide th:nth-child(1) { width: 40%; }
  :root[data-brand="gq"] .gq-suspects-wide th:nth-child(n+2) { width: 20%; }
  :root[data-brand="gq"] .dossier { width: 100vw; border-left: 0; }
  :root[data-brand="gq"] .dossier-head { padding: 0 16px; position: sticky; top: 0; background: var(--gq-paper); border-bottom: 1px solid var(--gq-hair); }
  :root[data-brand="gq"] .gq-sheet-bar { justify-content: flex-start; }
  :root[data-brand="gq"] .dossier-body { padding: 16px 16px 40px; }
  :root[data-brand="gq"] .gq-story h1 { font-size: 26px; }
}