/*
Theme Name: Reel Theory
Template: twentytwentyfive
Version: 1.0.0-2026-10-07-8cdc501d
Requires at least: 6.6
Text Domain: reeltheory-3d-journal-com-theme
Description: Дочерняя тема к twentytwentyfive. Несёт лицо проекта — палитру, шрифты, акценты и собственные компоненты макета, перенесённые из утверждённого прототипа.
*/

/* Reel Theory — ported from the approved prototype (prototype/assets/site.css).
   Slot: editorial-longform / graphite-rose / bitter-karla. Prefix: gvqv-
   Every selector is scoped to the project's own components; the parent theme's
   global layout and element styles are left alone. */

.gvqv-site {
  --gvqv-bg: #fafaf9;
  --gvqv-surface: #f0efed;
  --gvqv-text: #1c1917;
  --gvqv-muted: #6b6764;
  --gvqv-accent: #e11d48;
  --gvqv-link: #be123c;        /* derived accent, 6.02:1 on paper */
  --gvqv-on-accent: #ffffff;
  --gvqv-border: #cfcbc7;
  --gvqv-ink-muted: #a8a29e;   /* 6.93:1 on ink */
  --gvqv-ink-rule: #44403c;

  --gvqv-content: 720px;
  --gvqv-wide: 1140px;
  --gvqv-unit: 8px;
  --gvqv-gutter: 32px;
  --gvqv-section: 72px;
  --gvqv-pad: 24px;

  --gvqv-font-head: "Bitter", Georgia, "Times New Roman", serif;
  --gvqv-font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* fluid scale, base 18px, ratio 1.28, 360→1280 */
  --gvqv-small: clamp(0.9rem, 0.957rem - 0.071vw, 0.941rem);
  --gvqv-body: 1.125rem;
  --gvqv-lead: clamp(1.238rem, 1.226rem + 0.049vw, 1.266rem);
  --gvqv-h3: clamp(1.362rem, 1.337rem + 0.108vw, 1.424rem);
  --gvqv-h2: clamp(1.636rem, 1.578rem + 0.264vw, 1.787rem);
  --gvqv-h1: clamp(2.018rem, 1.908rem + 0.486vw, 2.297rem);
}

.gvqv-site {
  background: var(--gvqv-bg);
  color: var(--gvqv-text);
  font-family: var(--gvqv-font-body);
  font-size: var(--gvqv-body);
  line-height: 1.6;
}

/* The parent frames every page in root padding and a vertical block gap; the
   ported composition carries its own bands, so the frame is flattened inside
   this theme's own root component only. */
.gvqv-site .wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.gvqv-site .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

.gvqv-main { --wp--style--block-gap: 0px; }
.gvqv-main > * { margin-block-start: 0; margin-block-end: 0; }
.gvqv-main img { max-width: 100%; height: auto; display: block; }

.gvqv-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared shells ---------- */
.gvqv-wrap { width: 100%; max-width: var(--gvqv-wide); margin: 0 auto; padding: 0 var(--gvqv-pad); box-sizing: border-box; }
.gvqv-prose { max-width: var(--gvqv-content); }
/* The page heads below carry their own vertical padding. They keep the shell's
   side padding in the same shorthand, so a head sits on the same left axis as
   every band under it instead of 24px to the left of it. */
.gvqv-kicker {
  font-family: var(--gvqv-font-body);
  font-size: var(--gvqv-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gvqv-accent);
  margin: 0 0 10px;
  line-height: 1.4;
}
.gvqv-kicker a { color: inherit; text-decoration: none; }
.gvqv-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gvqv-meta { font-size: var(--gvqv-small); color: var(--gvqv-muted); line-height: 1.5; }
.gvqv-lead { font-size: var(--gvqv-lead); line-height: 1.5; color: var(--gvqv-text); }

/* ---------- masthead / header ---------- */
.gvqv-mast { background: var(--gvqv-bg); border-bottom: 3px solid var(--gvqv-accent); }
.gvqv-mast__row {
  max-width: var(--gvqv-wide); margin: 0 auto; padding: 0 var(--gvqv-pad); box-sizing: border-box;
  min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  --wp--style--block-gap: 0px;
}
.gvqv-mast__brand { margin: 0; font-size: 0; line-height: 0; flex: 0 0 auto; }
.gvqv-mast__brand a {
  display: block; width: 176px; height: 36px;
  background-image: url(assets/media/reel-theory-mark.svg);
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  font-size: 0; line-height: 0; color: transparent; text-decoration: none; overflow: hidden;
}
.gvqv-mast__brand a:focus-visible { outline: 2px solid var(--gvqv-accent); outline-offset: 3px; }
.gvqv-mast__nav {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end;
  --wp--style--block-gap: 0px;
}
.gvqv-mast__link { margin: 0; }
.gvqv-mast__link a {
  font-size: 0.95rem; font-weight: 600; color: var(--gvqv-text);
  text-decoration: none; padding: 10px 0; display: inline-block; line-height: 1.2;
  border-bottom: 2px solid transparent;
}
.gvqv-mast__link a:hover { border-bottom-color: var(--gvqv-accent); }
.gvqv-mast__link a:focus-visible { outline: 2px solid var(--gvqv-accent); outline-offset: 3px; }
.gvqv-mast__toggle {
  display: none; font: inherit; font-family: var(--gvqv-font-body); font-size: 0.95rem; font-weight: 700;
  background: var(--gvqv-text); color: var(--gvqv-bg); border: 0; border-radius: 0;
  padding: 10px 14px; min-height: 40px; cursor: pointer; flex: 0 0 auto;
}
.gvqv-mast__toggle:focus-visible { outline: 2px solid var(--gvqv-accent); outline-offset: 2px; }

/* The search belongs to the masthead's typography, not to a control panel: the
   field is a baseline hairline and the submit is a letterspaced caps link on the
   same line as the nav, so nothing in the paper-and-ink header is a filled box. */
.gvqv-mast__search { margin: 0; flex: 0 1 200px; min-width: 164px; max-width: 220px; }
.gvqv-mast__search .wp-block-search__inside-wrapper {
  border: 0; border-bottom: 1px solid var(--gvqv-border); background: transparent;
  padding: 0; align-items: baseline;
}
.gvqv-mast__search .wp-block-search__input {
  font-family: var(--gvqv-font-body); font-size: 0.9rem; color: var(--gvqv-text);
  background: transparent; border: 0; border-radius: 0;
  padding: 8px 0 6px; min-height: 0; min-width: 0;
}
.gvqv-mast__search .wp-block-search__input::placeholder { color: var(--gvqv-muted); opacity: 1; }
.gvqv-mast__search .wp-block-search__input:focus-visible { outline: 0; box-shadow: 0 2px 0 0 var(--gvqv-accent); }
.gvqv-mast__search .wp-block-search__button {
  background: transparent; color: var(--gvqv-text); border: 0; border-radius: 0;
  font-family: var(--gvqv-font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 0 6px; margin-left: 12px; min-height: 0; cursor: pointer;
}
.gvqv-mast__search .wp-block-search__button:hover { color: var(--gvqv-accent); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-mast__search .wp-block-search__button:focus-visible { outline: 2px solid var(--gvqv-accent); outline-offset: 2px; }
.gvqv-mast__search .wp-block-search__button svg { fill: currentColor; }

/* section strip: wrapped where the container fits the viewport, scrollable with
   an explicit fade below that. The fade sits inside the strip's own box so it
   lands on the cut, not on the empty gutter to the right of it. */
.gvqv-strip { position: relative; border-bottom: 1px solid var(--gvqv-border); background: var(--gvqv-bg); }
.gvqv-strip__inner {
  max-width: var(--gvqv-wide); margin: 0 auto;
  padding: 0 calc(var(--gvqv-pad) + 36px) 0 var(--gvqv-pad); box-sizing: border-box;
  display: flex; gap: 2px 13px; overflow-x: auto; scrollbar-width: thin;
  scroll-snap-type: x proximity; scroll-padding-left: var(--gvqv-pad);
  --wp--style--block-gap: 0px;
}
/* The fade is the scroller's own affordance, so it is pinned to the edge the
   text is actually cut at — the viewport edge, where the strip is still wider
   than the screen. Above the container width the strip wraps and no cut exists. */
.gvqv-strip::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 56px;
  background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, var(--gvqv-bg) 76%);
  pointer-events: none;
}
.gvqv-strip__link { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
/* At the container's own width the whole row fits on screen: the seven names
   break onto a second line instead of running off the right edge. */
@media (min-width: 1200px) {
  .gvqv-strip__inner {
    flex-wrap: wrap; overflow-x: visible; row-gap: 0;
    padding-right: var(--gvqv-pad); padding-bottom: 4px;
  }
  .gvqv-strip__link a { padding: 11px 0; min-height: 40px; }
  .gvqv-strip::after { display: none; }
}
.gvqv-strip__link a {
  display: inline-block; white-space: nowrap; padding: 13px 0; min-height: 44px; box-sizing: border-box;
  font-size: 0.82rem; color: var(--gvqv-muted); text-decoration: none; font-weight: 600; line-height: 1.4;
  border-bottom: 2px solid transparent;
}
.gvqv-strip__link a:hover { color: var(--gvqv-text); border-bottom-color: var(--gvqv-text); }
.gvqv-strip__link a:focus-visible { outline: 2px solid var(--gvqv-accent); outline-offset: 2px; }

/* ---------- home: plate hero ---------- */
.gvqv-plate { margin: 0; }
.gvqv-plate__img {
  width: 100%; height: clamp(190px, 34vw, 400px);
  background-image: url(assets/media/reel-schematic-hero.png);
  background-color: var(--gvqv-surface);
  background-size: cover; background-position: 72% 50%; background-repeat: no-repeat;
}
/* The rule under the plate keeps the container measure; the caption itself is
   held to the text measure so it does not run twice as wide as the body. */
.gvqv-plate__cap {
  max-width: var(--gvqv-wide); margin: 0 auto; padding: 10px var(--gvqv-pad) 0; box-sizing: border-box;
  border-top: 1px solid var(--gvqv-border); --wp--style--block-gap: 0px;
}
.gvqv-plate__caption {
  margin: 0; max-width: var(--gvqv-content);
  font-size: var(--gvqv-small); color: var(--gvqv-muted); line-height: 1.5;
}
.gvqv-masthead { padding: 34px var(--gvqv-pad) calc(var(--gvqv-section) - 16px); }
.gvqv-masthead h1 { max-width: 15ch; font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h1); line-height: 1.17; letter-spacing: -0.015em; margin: 0; }
.gvqv-masthead .gvqv-lead { margin: 18px 0 0; color: var(--gvqv-muted); }
.gvqv-masthead__links {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; font-weight: 600;
  --wp--style--block-gap: 0px;
}
.gvqv-masthead__links p { margin: 0; }
.gvqv-masthead__links a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gvqv-masthead__links a:hover { text-decoration-thickness: 3px; }

/* ---------- generic band ---------- */
.gvqv-band { padding: calc(var(--gvqv-section) - 16px) 0; border-top: 1px solid var(--gvqv-border); }
.gvqv-band--tint { background: var(--gvqv-surface); }
.gvqv-band--flush { border-top: 0; }
.gvqv-band__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 26px;
  --wp--style--block-gap: 0px;
}
.gvqv-band__head h2 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h2);
  line-height: 1.24; letter-spacing: -0.02em; margin: 0;
}
.gvqv-band__head p { margin: 0; }
.gvqv-band__head a { font-size: var(--gvqv-small); font-weight: 700; color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-band__head a:hover { text-decoration-thickness: 3px; }

/* ---------- index rows (cards) ---------- */
.gvqv-index .wp-block-post-template {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px var(--gvqv-gutter);
  list-style: none; margin: 0; padding: 0;
}
.gvqv-index .wp-block-post-template > li { margin: 0; }
.gvqv-card { display: flex; flex-direction: column; --wp--style--block-gap: 0px; }
.gvqv-card__thumb { margin: 0; }
/* The card frame is a preview, not a reproduction: a fixed 4:3 window with the
   crop held to the left of the plate, where the symbol strip and the tallest
   columns are. The whole diagram is read in the article itself. */
.gvqv-card__thumb { overflow: hidden; }
.gvqv-card__thumb img {
  aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover;
  object-position: 26% 50%; background: var(--gvqv-surface);
}
.gvqv-card__text { display: flex; flex-direction: column; min-width: 0; --wp--style--block-gap: 0px; }
/* no featured image: the card opens on a crimson rule instead of a broken frame */
.gvqv-card > .gvqv-card__text:first-child { border-top: 3px solid var(--gvqv-accent); }
.gvqv-card__kicker {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--gvqv-muted); margin: 14px 0 7px; line-height: 1.4;
}
.gvqv-card__kicker a { color: inherit; text-decoration: none; }
.gvqv-card__kicker a:hover { color: var(--gvqv-text); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-card__title {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h3);
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px;
}
.gvqv-card__title a { color: var(--gvqv-text); text-decoration: none; }
.gvqv-card__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gvqv-card__sum { margin: 0 0 10px; color: var(--gvqv-muted); font-size: 1.02rem; line-height: 1.55; }
.gvqv-card__sum a { color: var(--gvqv-link); }
/* The date keeps a fixed step under the summary; the auto top margin only takes
   over in a card tall enough to have slack left, so a short card never opens a
   column-wide hole between its summary and its date. */
.gvqv-card__meta {
  margin: auto 0 0; padding-top: var(--wp--preset--spacing--30, 16px);
  font-size: var(--gvqv-small); color: var(--gvqv-muted);
}
.gvqv-card__meta a { color: inherit; text-decoration: none; }

/* lead slot: the newest post gets a horizontal split instead of a page-wide thumbnail */
.gvqv-index--lead .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card {
  flex-direction: row; align-items: flex-start; gap: var(--gvqv-gutter);
}
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__thumb { flex: 0 0 56%; overflow: hidden; }
/* The featured plate is a diagram with wide margins of its own: the preview
   holds a 4:3 window on its left half, where the symbol strip and the tallest
   columns are, and the whole chart stays readable inside the article. */
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__thumb img {
  aspect-ratio: 6 / 5; object-position: 13% 50%;
}
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__text { flex: 1 1 auto; justify-content: flex-start; }
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__meta {
  margin-top: 0;
}
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__kicker { margin-top: 0; }
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__title { font-size: var(--gvqv-h2); line-height: 1.2; }
.gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__sum { font-size: var(--gvqv-lead); line-height: 1.5; }

/* section catalogue: the newest entry is a full-width horizontal row — image
   column against text column — so a section holding a single post reads as a
   sparse section and not as a card stranded in the left half of the page. */
/* The text column is as tall as its own text: stretching it to the height of
   the plate and pinning the date to the bottom opened a column-wide hole
   between the summary and the date whenever the section holds one post. */
.gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card { align-items: flex-start; }
.gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__thumb { flex: 0 0 46%; overflow: hidden; }
/* The featured plate is a diagram whose own margins are wide: the catalogue
   window holds a 4:3 crop on its left half — symbol strip and the tallest
   columns — so the preview carries a legible fragment instead of a shrunken
   chart. The whole diagram is read inside the article. */
.gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__thumb img {
  aspect-ratio: 6 / 5; object-position: 13% 50%;
}
.gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__text {
  border-top: 3px solid var(--gvqv-accent); padding-top: 15px; justify-content: flex-start;
}
.gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__meta {
  margin-top: 0;
}

/* section catalogue: a borderless two-column index. It is deliberately not the
   home lead — a 4:3 preview held to 340px, a title one step below the front
   page's, and the date on a meta line directly under it, so stepping from the
   front page into a section reads as a list and not as the same card again. */
.gvqv-index--catalog .wp-block-post-template {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gvqv-gutter);
  align-items: start;
}
.gvqv-index--catalog .gvqv-card { flex-direction: column; }
.gvqv-index--catalog .gvqv-card__thumb { width: 100%; max-width: 340px; }
.gvqv-index--catalog .gvqv-card__thumb img { aspect-ratio: 4 / 3; object-position: 20% 50%; }
.gvqv-index--catalog .gvqv-card__kicker { margin-top: 16px; }
.gvqv-index--catalog .gvqv-card > .gvqv-card__text:first-child { padding-top: 14px; }
.gvqv-index--catalog .gvqv-card__title { font-size: 1.22rem; line-height: 1.32; margin: 0 0 6px; }
.gvqv-index--catalog .gvqv-card__meta {
  margin: 0 0 10px; padding-top: 0; letter-spacing: 0.04em;
}
.gvqv-index--catalog .gvqv-card__sum { margin: 0; font-size: 0.98rem; max-width: 46ch; }

/* ---------- pagination ---------- */
.gvqv-pagination {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 36px 0 0; padding-top: 20px;
  border-top: 1px solid var(--gvqv-border); font-size: var(--gvqv-small); font-weight: 700;
}
.gvqv-pagination a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-pagination .wp-block-query-pagination-numbers a { color: var(--gvqv-muted); text-decoration: none; }
.gvqv-pagination [aria-current="page"] { color: var(--gvqv-text); border-bottom: 2px solid var(--gvqv-accent); }

/* ---------- empty state ---------- */
.gvqv-empty {
  border: 1px solid var(--gvqv-border); border-top: 3px solid var(--gvqv-text);
  padding: 28px 26px; background: var(--gvqv-bg); max-width: var(--gvqv-content);
  --wp--style--block-gap: 0px;
}
.gvqv-empty h2, .gvqv-empty h3 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h3);
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px;
}
.gvqv-empty p { color: var(--gvqv-muted); margin: 0 0 10px; max-width: 60ch; font-size: 1.02rem; }
.gvqv-empty p:last-child { margin-bottom: 0; }
.gvqv-empty a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-empty a:hover { text-decoration-thickness: 3px; }
.gvqv-empty .wp-block-search { margin: 14px 0 12px; max-width: 420px; }
.gvqv-empty .wp-block-search__inside-wrapper { border: 1px solid var(--gvqv-border); background: var(--gvqv-bg); }
.gvqv-empty .wp-block-search__input { border: 0; border-radius: 0; background: transparent; font-family: var(--gvqv-font-body); font-size: 1rem; padding: 9px 12px; min-height: 42px; }
.gvqv-empty .wp-block-search__button {
  background: var(--gvqv-text); color: var(--gvqv-bg); border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--gvqv-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 14px; min-height: 42px;
}
.gvqv-empty .wp-block-search__button:hover { background: var(--gvqv-accent); }

/* ---------- section directory ---------- */
/* Seven tiles in the prototype's three columns, every cell the same calibre:
   3 + 3 + 1. The two leftover slots of the last row stay empty cells of the same
   table — ruled, but not filled by stretching the seventh section across them. */
.gvqv-dir {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--gvqv-border); border-left: 1px solid var(--gvqv-border);
  --wp--style--block-gap: 0px;
}
.gvqv-dir::before, .gvqv-dir::after {
  content: ""; display: block; order: 1;
  border-right: 1px solid var(--gvqv-border); border-bottom: 1px solid var(--gvqv-border);
}
.gvqv-dir__item {
  padding: 22px 20px 24px; border-right: 1px solid var(--gvqv-border); border-bottom: 1px solid var(--gvqv-border);
  --wp--style--block-gap: 0px;
}
.gvqv-dir__item h3 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: 1.12rem;
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 6px;
}
.gvqv-dir__item h3 a { color: var(--gvqv-text); text-decoration: none; }
.gvqv-dir__item h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gvqv-dir__item p { font-size: 0.97rem; color: var(--gvqv-muted); margin: 0; line-height: 1.55; }
/* The state line is a live query, not a stored count. Every published post in
   the section steps a counter and only the last row of the loop is shown, so the
   line reads the real number off the query itself and all seven cells carry the
   same shape: a count, then a link into the section. */
.gvqv-dir__state { margin: 12px 0 0; --wp--style--block-gap: 0px; }
.gvqv-dir__state .wp-block-post-template {
  list-style: none; margin: 0; padding: 0; counter-reset: gvqv-held;
}
.gvqv-dir__state .wp-block-post-template > li { margin: 0; counter-increment: gvqv-held; display: none; }
.gvqv-dir__state .wp-block-post-template > li:last-child { display: block; }
.gvqv-dir__count::before { content: counter(gvqv-held) " "; }
.gvqv-dir__flag {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--gvqv-muted); margin: 0; line-height: 1.5;
}
.gvqv-dir__flag a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-dir__flag a:hover { text-decoration-thickness: 3px; }

/* ---------- method rows ---------- */
.gvqv-method {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gvqv-gutter);
  --wp--style--block-gap: 0px;
}
.gvqv-method__row {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0;
  border-top: 1px solid var(--gvqv-border); --wp--style--block-gap: 0px;
}
.gvqv-method__n {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: 1.3rem;
  color: var(--gvqv-accent); line-height: 1.2; margin: 0;
}
.gvqv-method__text { --wp--style--block-gap: 0px; }
.gvqv-method__text h3 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: 1.08rem;
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 5px;
}
.gvqv-method__text p { margin: 0; font-size: 1rem; color: var(--gvqv-muted); line-height: 1.55; }

/* ---------- responsible play note ---------- */
.gvqv-note {
  border: 2px solid var(--gvqv-accent); padding: 24px 26px; background: var(--gvqv-bg);
  --wp--style--block-gap: 0px;
}
.gvqv-note h2 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h3);
  line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px;
}
.gvqv-note p { color: var(--gvqv-text); margin: 0 0 8px; max-width: 70ch; font-size: 1.02rem; line-height: 1.55; }
.gvqv-note p:last-child { margin-bottom: 0; }

/* ---------- archive / section head ---------- */
.gvqv-archive-head { padding: 44px var(--gvqv-pad) 30px; --wp--style--block-gap: 0px; }
.gvqv-archive-head h1 {
  max-width: 18ch; font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h1);
  line-height: 1.17; letter-spacing: -0.015em; margin: 0;
}
.gvqv-archive-head__desc {
  margin: 16px 0 0; color: var(--gvqv-muted); max-width: 62ch;
  font-size: var(--gvqv-lead); line-height: 1.5;
}
.gvqv-archive-head__desc p { margin: 0 0 10px; }
.gvqv-archive-head__desc p:last-child { margin-bottom: 0; }
.gvqv-archive-head__lede { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.gvqv-archive-head__meta {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--gvqv-border);
  display: flex; flex-wrap: wrap; gap: 8px 26px; --wp--style--block-gap: 0px;
}
.gvqv-archive-head__meta p { margin: 0; font-size: var(--gvqv-small); color: var(--gvqv-muted); }

/* ---------- article ---------- */
/* The air under the byline rule is padding, not a margin on what follows: a
   margin on the hero collapses out through the wrap groups and lands nowhere. */
.gvqv-article-head { padding: 44px var(--gvqv-pad) 32px; --wp--style--block-gap: 0px; }
.gvqv-article-head h1 {
  max-width: 26ch; font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h1);
  line-height: 1.17; letter-spacing: -0.015em; margin: 0;
}
.gvqv-dek {
  font-family: var(--gvqv-font-head); font-style: italic; font-size: var(--gvqv-lead);
  line-height: 1.45; color: var(--gvqv-muted); margin: 16px 0 0; max-width: 54ch;
}
.gvqv-byline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 22px 0 18px;
  font-size: var(--gvqv-small); color: var(--gvqv-muted); --wp--style--block-gap: 0px;
}
.gvqv-byline p, .gvqv-byline div { margin: 0; font-size: var(--gvqv-small); }
.gvqv-byline__who { font-weight: 700; font-size: 0.95rem; color: var(--gvqv-text); }
/* The third item of the byline is measured off the article that is actually on
   the page — words divided by 200, rounded up — and only appears once there is a
   body to count. It takes the same step of air as the date beside it. */
.gvqv-byline__read { margin: 0; font-size: var(--gvqv-small); color: var(--gvqv-muted); }
.gvqv-byline a { color: inherit; text-decoration: none; }
/* The rule belongs to the text column: run it to the measure of the prose under
   it rather than to the full container, where it promises a column of content
   that is not there. */
.gvqv-rule {
  border: 0; border-top: 1px solid var(--gvqv-border); margin: 0;
  height: 0; background: none; max-width: var(--gvqv-content);
}
/* The article hero is a schematic: it is reproduced whole, in the aspect ratio
   of the attachment, not cropped to a 16:9 band that cuts its axis labels. */
/* The caption sits on the picture it explains, and the whole figure is followed
   by a full section step, so the first h2 under it does not read as a heading
   over the caption. */
.gvqv-figure { margin: 0 0 var(--wp--preset--spacing--60, 48px); }
.gvqv-figure img {
  width: 100%; height: auto; object-fit: contain; background: var(--gvqv-surface);
}
.gvqv-figure figcaption {
  font-size: var(--gvqv-small); color: var(--gvqv-muted); line-height: 1.5;
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--gvqv-border);
  max-width: var(--gvqv-content); height: auto; text-align: left;
}
.gvqv-body { padding-bottom: 20px; --wp--style--block-gap: 0px; }
/* A service page has no hero between its head rule and its first paragraph, so
   the body carries that air itself. */
.gvqv-page .gvqv-body { padding-top: 8px; }
/* A service page has no byline between the dek and the rule, so the rule takes
   the air itself instead of sitting on the dek's descenders. */
.gvqv-page .gvqv-rule { margin-top: 20px; }
.gvqv-body p { margin: 0 0 1.1em; }
.gvqv-body h2 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h2);
  line-height: 1.24; letter-spacing: -0.02em; margin: 34px 0 12px;
}
.gvqv-body h3 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h3);
  line-height: 1.3; letter-spacing: -0.015em; margin: 24px 0 8px;
}
.gvqv-body h4 { font-family: var(--gvqv-font-head); font-weight: 700; font-size: 1.08rem; margin: 20px 0 8px; }
.gvqv-body a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gvqv-body a:hover { text-decoration-thickness: 3px; }
.gvqv-body ul, .gvqv-body ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.gvqv-body li { margin-bottom: 6px; }
.gvqv-body li::marker { color: var(--gvqv-accent); }

/* The long read is set tighter than the shell it sits in: a 660px measure at
   19px keeps the line near 68 characters instead of 80, and the heading steps
   are spaced so the scroll has something to hold on to between figure and
   footer. */
.gvqv-article .gvqv-body .gvqv-prose { max-width: 660px; }
.gvqv-article .gvqv-body { font-size: 1.1875rem; line-height: 1.62; }
/* A seven-thousand-pixel guide needs a beat the body text cannot give it: each
   section opens on a crimson hairline and a counted kicker — the same device the
   front page uses for its 01–04 method rows — then breathes in above and closes
   tight onto its own first line. */
.gvqv-article .gvqv-body .gvqv-prose { counter-reset: gvqv-part; }
.gvqv-article .gvqv-body h2 {
  font-size: clamp(1.8rem, 1.62rem + 0.5vw, 2.1rem);
  margin: 3rem 0 0.75rem; padding-top: 14px;
  border-top: 1px solid var(--gvqv-accent);
}
.gvqv-article .gvqv-body h2::before {
  counter-increment: gvqv-part;
  content: counter(gvqv-part, decimal-leading-zero);
  display: block; font-family: var(--gvqv-font-body); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--gvqv-accent); line-height: 1.4; margin-bottom: 9px;
}
/* The paragraph that opens a section is set a step above the run of the text,
   so the eye finds the start of each part while scrolling past it. */
.gvqv-article .gvqv-body h2 + p { margin-top: 0; font-size: 1.28rem; line-height: 1.5; }
.gvqv-article .gvqv-body h3 + p { margin-top: 0; }
.gvqv-article .gvqv-body h3 { font-size: 1.5rem; margin: 1.9em 0 0.35em; }
.gvqv-article .gvqv-body ul, .gvqv-article .gvqv-body ol { margin: 0 0 1.2em; }
.gvqv-article .gvqv-body li { margin-bottom: 9px; padding-left: 0.1em; }
/* Bulleted runs carry the same hairline as the section rules instead of the
   default dot, which read at exactly the density of the prose around it. */
.gvqv-article .gvqv-body ul { list-style: none; padding-left: 1.6em; }
.gvqv-article .gvqv-body ul > li { position: relative; }
.gvqv-article .gvqv-body ul > li::before {
  content: ""; position: absolute; left: -1.5em; top: 0.78em;
  width: 0.9em; height: 0; border-top: 1px solid var(--gvqv-accent);
}
.gvqv-article .gvqv-body ol { padding-left: 1.6em; }
.gvqv-article .gvqv-body ol > li::marker { color: var(--gvqv-accent); font-weight: 700; }

/* ---------- article close: disclosure + responsible-play note ---------- */
.gvqv-close {
  padding-top: var(--wp--preset--spacing--60, 48px);
  padding-bottom: calc(var(--gvqv-section) - 16px);
  --wp--style--block-gap: 0px;
}
.gvqv-disclosure {
  max-width: var(--gvqv-content); background: var(--gvqv-surface);
  border-left: 3px solid var(--gvqv-text); padding: 24px 28px; margin: 0;
  font-size: 1rem; line-height: 1.6; color: var(--gvqv-text);
  --wp--style--block-gap: 0px;
}
.gvqv-disclosure p { margin: 0; max-width: 62ch; }
.gvqv-disclosure a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-disclosure a:hover { text-decoration-thickness: 3px; }
.gvqv-close__note { max-width: var(--gvqv-content); margin: 26px 0 0; }
.gvqv-close__note a { color: var(--gvqv-link); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-body figure { margin: 24px 0; }
.gvqv-body figure img { width: 100%; height: auto; }
.gvqv-body figcaption { font-size: var(--gvqv-small); color: var(--gvqv-muted); margin-top: 9px; }
.gvqv-body blockquote {
  border-left: 3px solid var(--gvqv-accent); padding: 4px 0 4px 20px; margin: 26px 0;
  font-family: var(--gvqv-font-head); font-size: var(--gvqv-h3); line-height: 1.35;
}
.gvqv-body blockquote p { margin: 0 0 8px; }
.gvqv-body blockquote p:last-child { margin: 0; }
.gvqv-table-wrap { overflow-x: auto; margin: 22px 0; }
.gvqv-body table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.gvqv-body th, .gvqv-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gvqv-border); }
.gvqv-body thead th {
  background: var(--gvqv-surface); font-family: var(--gvqv-font-body); font-size: 0.86rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gvqv-body caption { text-align: left; padding-bottom: 10px; font-size: var(--gvqv-small); color: var(--gvqv-muted); }

/* ---------- about / service page body ---------- */
/* A policy page is a register, not an article: its sections are divided by a
   hairline rather than by air, and any term list it holds is set as a two-column
   row — the term on a fixed left column, the statement beside it. */
.gvqv-body dl { margin: 0 0 1.4em; border-top: 1px solid var(--gvqv-border); }
.gvqv-body dt {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: 1.02rem; padding-top: 18px;
}
.gvqv-body dd { margin: 0 0 18px; padding-bottom: 18px; color: var(--gvqv-muted); border-bottom: 1px solid var(--gvqv-border); }
@supports (display: grid) {
  .gvqv-page .gvqv-body dl {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: var(--gvqv-gutter);
  }
  .gvqv-page .gvqv-body dt { grid-column: 1; padding-top: 18px; padding-bottom: 18px; }
  .gvqv-page .gvqv-body dd {
    grid-column: 2; margin: 0; padding-top: 18px; padding-bottom: 18px;
  }
  .gvqv-page .gvqv-body dt { border-bottom: 1px solid var(--gvqv-border); }
}
.gvqv-page .gvqv-body h2 {
  border-top: 1px solid var(--gvqv-border); padding-top: 18px; margin: 2.4rem 0 0.6rem;
  font-size: var(--gvqv-h3);
}
/* The register marks its clauses with a muted ordinal on a grey rule, where the
   article marks its parts with a crimson one on a crimson rule: same device,
   different register, so the two page types stay distinguishable at a glance. */
.gvqv-page .gvqv-body .gvqv-prose { counter-reset: gvqv-clause; }
.gvqv-page .gvqv-body h2::before {
  counter-increment: gvqv-clause;
  content: counter(gvqv-clause, decimal-leading-zero);
  display: block; font-family: var(--gvqv-font-body);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--gvqv-muted); line-height: 1.4; margin-bottom: 8px;
}
.gvqv-page .gvqv-body h2 + p { margin-top: 0; }
.gvqv-page .gvqv-body h3 { margin-top: 1.9em; }

/* ---------- search page ---------- */
.gvqv-search-head { padding: 44px var(--gvqv-pad) 26px; --wp--style--block-gap: 0px; }
.gvqv-search-head h1 {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: var(--gvqv-h1);
  line-height: 1.17; letter-spacing: -0.015em; margin: 0; max-width: 24ch;
}
.gvqv-search-form { margin: 20px 0 0; max-width: 460px; }
.gvqv-search-form .wp-block-search__inside-wrapper { border: 1px solid var(--gvqv-border); background: var(--gvqv-bg); }
.gvqv-search-form .wp-block-search__input {
  border: 0; border-radius: 0; background: transparent; font-family: var(--gvqv-font-body);
  font-size: 1rem; padding: 9px 12px; min-height: 44px;
}
.gvqv-search-form .wp-block-search__button {
  background: var(--gvqv-text); color: var(--gvqv-bg); border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--gvqv-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 14px; min-height: 44px;
}
.gvqv-search-form .wp-block-search__button:hover { background: var(--gvqv-accent); }

/* ---------- footer ---------- */
.gvqv-footer {
  background: var(--gvqv-text); color: var(--gvqv-bg);
  margin-top: var(--gvqv-section); padding: 52px 0 40px;
  --wp--style--block-gap: 0px;
}
.gvqv-footer__inner { max-width: var(--gvqv-wide); margin: 0 auto; padding: 0 var(--gvqv-pad); box-sizing: border-box; --wp--style--block-gap: 0px; }
.gvqv-footer__mark {
  font-family: var(--gvqv-font-head); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 6px; color: var(--gvqv-bg);
}
.gvqv-footer__tag { color: var(--gvqv-ink-muted); font-size: var(--gvqv-small); margin: 0 0 30px; }
.gvqv-footer__links {
  display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px 0; margin: 0;
  border-top: 1px solid var(--gvqv-ink-rule); border-bottom: 1px solid var(--gvqv-ink-rule);
  --wp--style--block-gap: 0px;
}
.gvqv-footer__links p { margin: 0; }
.gvqv-footer__links a { color: var(--gvqv-bg); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.gvqv-footer__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gvqv-footer__legal {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 20px 0 0; margin: 0;
  --wp--style--block-gap: 0px;
}
.gvqv-footer__legal p { margin: 0; }
.gvqv-footer__legal a { color: var(--gvqv-ink-muted); font-size: var(--gvqv-small); text-decoration: underline; text-underline-offset: 3px; }
.gvqv-footer__legal a:hover { color: var(--gvqv-bg); }
.gvqv-footer__notice {
  margin: 26px 0 0; border: 2px solid var(--gvqv-accent); padding: 18px 20px;
  font-size: var(--gvqv-small); color: var(--gvqv-bg); line-height: 1.6;
  --wp--style--block-gap: 0px;
}
.gvqv-footer__notice p { margin: 0 0 7px; }
.gvqv-footer__notice p:last-child { margin: 0; }
.gvqv-footer__notice a { color: #f5a3b5; text-decoration: underline; text-underline-offset: 3px; }
.gvqv-footer__copy { margin: 24px 0 0; color: var(--gvqv-ink-muted); font-size: var(--gvqv-small); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .gvqv-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns leave a single hole under seven tiles, so one filler closes it */
  .gvqv-dir::after { display: none; }
}
@media (max-width: 768px) {
  .gvqv-site { --gvqv-section: 52px; --gvqv-gutter: 24px; }
  .gvqv-mast__nav {
    display: none; order: 3; flex-basis: 100%; justify-content: flex-start;
    gap: 0 20px; padding: 4px 0 14px;
  }
  .gvqv-mast__row.gvqv-open .gvqv-mast__nav { display: flex; }
  .gvqv-mast__row { flex-wrap: wrap; padding-top: 0; }
  .gvqv-mast__toggle { display: inline-block; }
  .gvqv-mast__search { width: 100%; max-width: 100%; margin-top: 8px; }
  .gvqv-index .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card { flex-direction: column; gap: 0; }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__thumb { flex: 0 0 auto; width: 100%; }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__thumb img { aspect-ratio: 4 / 3; }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__kicker { margin-top: 14px; }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__title { font-size: var(--gvqv-h3); }
  .gvqv-index--lead .wp-block-post-template > li:first-child .gvqv-card__sum { font-size: 1.02rem; }
  .gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__thumb { flex: 0 0 auto; width: 100%; }
  .gvqv-index--rows .wp-block-post-template > li:first-child .gvqv-card__text { border-top: 0; padding-top: 0; }
  .gvqv-dir { grid-template-columns: minmax(0, 1fr); }
  .gvqv-dir::before, .gvqv-dir::after { display: none; }
  .gvqv-method { grid-template-columns: minmax(0, 1fr); }
  .gvqv-band__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* The plate is the first thing a reader meets: on a phone it keeps enough
     height for the reel bodies to be legible, and the crop moves off the right
     edge scale onto the mechanism itself. */
  .gvqv-plate__img { height: clamp(230px, 64vw, 260px); background-position: 58% 50%; }
  .gvqv-plate__caption { font-size: 0.8125rem; line-height: 1.4; }
  .gvqv-masthead { padding-top: 26px; }
  .gvqv-archive-head, .gvqv-article-head, .gvqv-search-head { padding-top: 30px; }
  .gvqv-body dt { padding-top: 14px; }
  .gvqv-article .gvqv-body { font-size: 1.125rem; }
  .gvqv-article .gvqv-body h2 { margin-top: 1.8em; }
  .gvqv-close { padding-top: var(--wp--preset--spacing--50, 36px); }
  .gvqv-disclosure { padding: 20px 22px; }
}
/* On a phone the fluid scale ran the article title down to 32px while the body
   h2 held 28.8px — a 1.13 step, which is not a step at all. The two levels are
   pulled apart on this width only: the title back up to 36–38px, the section
   heads down to 23–25px, with the air moved above each head so it belongs to the
   text under it. The desktop ratio is already working and is left alone. */
@media (max-width: 719px) {
  .gvqv-article .gvqv-article-head h1 {
    font-size: clamp(2.25rem, 9.4vw, 2.375rem); line-height: 1.08; letter-spacing: -0.02em;
  }
  .gvqv-article .gvqv-body h2 {
    font-size: clamp(1.44rem, 5.2vw, 1.5625rem); line-height: 1.22;
    margin: 2.4em 0 0.5em; padding-top: 12px;
  }
  .gvqv-article .gvqv-body h2::before { font-size: 0.68rem; margin-bottom: 7px; }
  .gvqv-article .gvqv-body h2 + p { font-size: 1.1875rem; }
  .gvqv-article .gvqv-body h3 { font-size: 1.28rem; margin: 2em 0 0.35em; }
  .gvqv-index--catalog .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
  .gvqv-index--catalog .gvqv-card__thumb { max-width: 100%; }
  .gvqv-page .gvqv-body dl { grid-template-columns: minmax(0, 1fr); }
  .gvqv-page .gvqv-body dt { border-bottom: 0; padding-bottom: 0; }
  .gvqv-page .gvqv-body dd { padding-top: 6px; }
}
@media (max-width: 480px) {
  .gvqv-site { --gvqv-pad: 18px; }
  .gvqv-mast__brand a { width: 148px; height: 32px; }
}