/* V7_ASSET_REVISION: 2026-09-28-v7-hotfix-p6b */
/*
 * techshooked.com — v7 · site chrome (v7 card 1)
 * ---------------------------------------------------------------------------
 * Binding design: v7.1 freeze, mockup A (docs/V7_ADOPTION_2026-09-25.md;
 * Shared/design/pressroom-visual-review-2026-09-12/round-2026-09-25/
 * V7.1-FROZEN-2026-09-26/). Card: docs/V7_BUILD_SIZING_2026-09-26.md.
 *
 * WHAT THIS FILE IS. The v7 layer, switched on surface by surface. Card 1
 * carries the tokens (light + dark) and the site-wide chrome: masthead, drawer,
 * footer, skip link, Blocksy chrome suppression. Body surfaces stay Pressroom
 * until their phase flips them.
 *
 * THE FROZEN CSS IS THE REFERENCE FOR VALUES, NOT A PASTE SOURCE. Only final
 * v7.1 rules are here: the title-wide key and hairline-where-allowed rules
 * resolve to their shipped state (no switch-dependent variants), and nothing
 * from the mockup control bar or mockups B/C is carried.
 *
 * NAMESPACE. Every token is --v7-*, every class .v7-*, so nothing here can
 * collide with --ts-* (style.css / theme-vars.css), --pr-* (pressroom.css) or
 * Blocksy while the systems coexist. Nothing is a bare element rule: the
 * mockup's page-level resets (body, *, a, button) are scoped to the chrome so
 * Pressroom bodies keep their own cascade.
 *
 * PRODUCTION DELTAS from the mockup, each stated at its rule:
 *   1. Masthead controls are .v7-mast__ctl (the mockup's name collides with
 *      the banned mockup-control-bar name).
 *   2. Drawer/scrim z-index sits above every Pressroom body layer, Blocksy,
 *      Complianz and the WP admin bar (see 6), not the mockup's 70/60.
 *   3. Footer links are 36px rows and chrome icons are 44px on phone (v7.1 F18
 *      as written in the audit; the frozen CSS left the rows at 19.5px).
 *   4. The drawer's search pill shows focus on the pill (:focus-within), since
 *      the mockup removed the input outline with no replacement.
 *   5. Reduced motion is scoped to the chrome (the mockup's rule was global).
 *   6. Drawer/scrim z-index 100001/100000 (card-1 fix, 2026-09-26): above the
 *      Complianz banner and the WP admin bar (both 99999), so an open menu is
 *      never covered by the consent banner on phone.
 *   7. Admin bar at <=600px (logged-in only): WP's absolute #wpadminbar
 *      resolves against <body> when the body is positioned. pressroom.css sets
 *      body{position:relative} on its surfaces (paper ground), v7-only pages do
 *      not, so the offset differed per page. The rule now pins the body to
 *      relative itself and lifts the bar 46px, identical on every page.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0 · TOKENS (v7.1 · light + dark)
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --v7-paper: #FFFFFF; --v7-fog: #F3F4F6;
  --v7-ink: #0F1013; --v7-ink2: #4A4F58; --v7-ink3: #6B717C;
  --v7-rule: #E3E5E9; --v7-rule2: #CDD1D7; --v7-plate-line: rgba(15, 16, 19, .07);
  --v7-mag: #E0006C; --v7-mag-d: #FF3E93; --v7-hov-amt: 10%;
  --v7-hov-ink: #C0005C;
  --v7-mag-on-fog: #C0005C;
  --v7-b1: #E11D2A; --v7-b2: #1E4FE0; --v7-b3: #7A1FBE; --v7-b4: #D03A8C; --v7-b5: #B85D09;
  --v7-b6: #0D8566; --v7-b7: #4B6B1A; --v7-b8: #0277B5; --v7-b9: #4338CA;
  /* the BRIGHT pillar inks (the dark set), the same in both themes: pillar
     names, the 4px line and hovers on the black bands (system rule 4) */
  --v7-br1: #FF5A63; --v7-br2: #6E8EFF; --v7-br3: #B06BFF; --v7-br4: #FF6FB7; --v7-br5: #F0913A;
  --v7-br6: #2FC79D; --v7-br7: #8DB54B; --v7-br8: #3FB0F0; --v7-br9: #8C85FF;
  --v7-kt-mix: #000; --v7-kt-amt: 84%;
  --v7-band: #17191E; --v7-foot: #0B0C0E;
  --v7-f-ui: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --v7-f-text: "Newsreader", Georgia, serif;
  --v7-f-hed: "Newsreader", Georgia, serif; --v7-hed-w: 600; --v7-hed-track: -.018em;
  --v7-ease: cubic-bezier(.2, .7, .25, 1); --v7-t: .16s;
  --v7-wrap: 1320px; --v7-gap-sec: 96px;
  --v7-ul: .085em;
}
html[data-theme="dark"] {
  --v7-paper: #0E0F12; --v7-fog: #181A1F;
  --v7-ink: #EDEEF1; --v7-ink2: #B0B5BE; --v7-ink3: #8A909A;
  --v7-rule: #2A2D34; --v7-rule2: #3A3E47; --v7-plate-line: rgba(255, 255, 255, .09);
  --v7-mag: #FF3E93; --v7-hov-amt: 16%; --v7-hov-ink: #FF5CA6; --v7-mag-on-fog: #FF3E93;
  --v7-b1: #FF5A63; --v7-b2: #6E8EFF; --v7-b3: #B06BFF; --v7-b4: #FF6FB7; --v7-b5: #F0913A;
  --v7-b6: #2FC79D; --v7-b7: #8DB54B; --v7-b8: #3FB0F0; --v7-b9: #8C85FF;
  --v7-kt-mix: #fff; --v7-kt-amt: 88%;
  --v7-band: #1A1C21; --v7-foot: #050506;
}
@media (max-width: 640px) { :root { --v7-gap-sec: 64px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   1 · BLOCKSY CHROME SUPPRESSION (moved from pressroom.css §0 with the chrome)
   The masthead, drawer and footer are code-owned (functions.php); Blocksy's own
   header, footer, skip link and off-canvas are hidden, scoped by id/class.
   `#offcanvas` carries Blocksy's own `.ct-header` class, so it is caught by
   the selector below on its own merit (the old comment crediting style.css
   was never right -- style.css is the tiny parent stylesheet and never
   carried this rule).
   v7 hotfix p6 (2026-09-28): `#search-modal` (Blocksy's own site search
   panel) carries ONLY `.ct-panel`, not `.ct-header`, so it fell through this
   rule. It stayed invisible solely via `main.min.css`'s generic
   `.ct-panel{display:none}` base rule -- until v7 audit card E dequeued that
   sheet (functions.php `ts_v7_dequeue_replaced_styles`) on the strength of an
   offline harness pixel sweep that never renders Blocksy's runtime-injected
   markup (search-modal/offcanvas are printed by Blocksy's own header.php on
   every real request, not by any of our templates), so the sweep could not
   see it. Confirmed live (docs/V7_HOTFIX_BLOCKSY_PANEL_AND_TOC_SPY_KICKOFF_
   2026-09-28.md): a full 11-page-type sweep found `#search-modal` as the
   ONLY runtime element main.min.css was still hiding, so it is named here
   explicitly rather than restoring the sheet. v7 never opens it (the masthead
   search icon is a plain link to `/?s=`, upgraded by JS to open OUR drawer;
   Blocksy's own trigger for this panel lives inside the already-hidden
   `.ct-header`), so hiding it unconditionally is safe.
   ═════════════════════════════════════════════════════════════════════════ */
header#header,
.ct-header,
#search-modal { display: none !important; }
.ts-drawer-burger { display: none !important; }
.site-footer .ct-footer { display: none; }
a.skip-link { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · CHROME PRIMITIVES (the mockup's page resets, scoped to the chrome)
   ═════════════════════════════════════════════════════════════════════════ */
.v7-mast, .v7-drawer, .v7-ft {
  font-family: var(--v7-f-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v7-mast, .v7-mast *, .v7-mast *::before, .v7-mast *::after,
.v7-drawer, .v7-drawer *, .v7-drawer *::before, .v7-drawer *::after,
.v7-ft, .v7-ft *, .v7-ft *::before, .v7-ft *::after { box-sizing: border-box; }
.v7-mast a, .v7-drawer a, .v7-ft a { color: inherit; text-decoration: none; }
.v7-mast img, .v7-drawer img, .v7-ft img { max-width: 100%; }
.v7-mast button, .v7-drawer button, .v7-ft button { font: inherit; }
.v7-mast p, .v7-drawer p, .v7-ft p { overflow-wrap: break-word; }

/* Focus: 2px magenta, 3px offset (v7-base). `html body` makes it (0,3,2), so
   the chrome owns its ring on every surface without relying on sheet order:
   it beats style.css's `body :is(...)` (0,2,1) AND pressroom.css's utility
   `body.pr-util :is(...)` (0,3,1), which would otherwise paint the Pressroom
   3px ring on the chrome of search / 404 / static pages. */
html body .v7-mast :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html body .v7-drawer :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html body .v7-ft :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html body .v7-home :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v7-mag); outline-offset: 3px; border-radius: 2px;
}
html body .v7-ft :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html body .v7-home .v7-band :is(a, button, [tabindex]):focus-visible { outline-color: var(--v7-mag-d); }

.v7-wrap { max-width: var(--v7-wrap); margin: 0 auto; padding: 0 32px; }
.v7-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v7-is-dark { display: none !important; }
html[data-theme="dark"] .v7-is-light { display: none !important; }
html[data-theme="dark"] .v7-is-dark { display: block !important; }

/* Skip link: the first Tab stop on every template (functions.php
   ts_render_skip_link, wp_body_open priority 1). (0,3,3) for the same reason
   as the ring above. It sits OUTSIDE the chrome, so it states its own font
   smoothing (v7 phase 5a): style.css used to give it to <body>, and on a
   sheet-alone page the focused link otherwise rendered with subpixel
   smoothing, a shade heavier than the masthead beside it. */
.v7-skip { position: absolute; left: -9999px; top: -9999px; z-index: 100000; font: 600 16px/1.2 var(--v7-f-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html body a.v7-skip[href]:focus, html body a.v7-skip[href]:focus-visible {
  position: fixed; left: 16px; top: 16px; z-index: 100000;
  background: var(--v7-ink); color: var(--v7-paper); padding: 10px 14px;
  font: 600 16px/1.2 var(--v7-f-ui); text-decoration: none;
  outline: 2px solid var(--v7-mag); outline-offset: 3px;
}

/* ── the hover vocabulary (controls: solid label + 10 % fill) ─────────────── */
.v7-ic, .v7-nav__l {
  transition: color var(--v7-t) var(--v7-ease), background-color var(--v7-t) var(--v7-ease),
              box-shadow var(--v7-t) var(--v7-ease);
}
.v7-ic:hover, .v7-nav__l:hover {
  color: var(--v7-hov-ink);
  background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent);
}

/* the icon control. Resets are explicit because Blocksy styles bare buttons. */
.v7-ic {
  width: 42px; height: 42px; min-height: 0; border-radius: 50%;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  color: var(--v7-ink); background: none; border: 0; padding: 0; margin: 0;
  box-shadow: none; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.v7-ic svg { width: 20px; height: 20px; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · MASTHEAD
   ═════════════════════════════════════════════════════════════════════════ */
.v7-mast {
  background: var(--v7-paper); color: var(--v7-ink);
  border-bottom: 1px solid var(--v7-rule); position: relative; z-index: 30;
}
html[data-theme="dark"] .v7-mast { border-bottom-color: var(--v7-rule2); }
.v7-mast__in { display: flex; align-items: center; gap: 28px; min-height: 88px; }
.v7-logo { display: block; line-height: 0; margin-right: auto; flex: 0 0 auto; }
.v7-logo__img { width: 266px; height: auto; display: block; }
.v7-nav { display: flex; gap: 4px; }
.v7-nav__l { font: 500 18px/1 var(--v7-f-ui); padding: 11px 15px; border-radius: 999px; white-space: nowrap; }
.v7-nav__l[aria-current="page"] { color: var(--v7-mag); }
.v7-mast__ctl { display: flex; gap: 2px; margin-right: -8px; flex: 0 0 auto; }
.v7-mode span { display: grid; place-items: center; }
.v7-mode__moon { display: none !important; }
html[data-theme="dark"] .v7-mode__moon { display: grid !important; }
html[data-theme="dark"] .v7-mode__sun { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · DRAWER (a dialog: functions.php ts_render_offcanvas owns focus, trap,
   inert, Escape and focus return)
   ═════════════════════════════════════════════════════════════════════════ */
.v7-scrim {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 16, 19, .34); opacity: 0; pointer-events: none; transition: opacity .25s;
}
.v7-scrim.is-open { opacity: 1; pointer-events: auto; }
.v7-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001;
  width: min(430px, 92vw); padding: 18px 28px 32px; overflow: auto;
  background: var(--v7-paper); color: var(--v7-ink);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .10);
  transform: translateX(102%); visibility: hidden;
  transition: transform .34s var(--v7-ease), visibility 0s linear .34s;
}
.v7-drawer.is-open { transform: none; visibility: visible; transition: transform .34s var(--v7-ease), visibility 0s; }
body.admin-bar .v7-drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar .v7-drawer { top: 46px; } }
/* Delta 7: the body is pinned to relative HERE (not inherited from
   pressroom.css, which v7-only pages don't load), so html{margin-top:46px}
   always puts the body 46px down and -46px always lands the bar at the top. */
@media screen and (max-width: 600px) { html body.admin-bar { position: relative; } html body.admin-bar #wpadminbar { top: -46px; } }
.v7-dr__head { display: flex; justify-content: space-between; align-items: center; margin: 0 -8px 22px 0; }
.v7-dr__home { display: block; line-height: 0; }
.v7-dr__logo { width: 170px; height: auto; display: block; }
.v7-search {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px;
  border: 1px solid var(--v7-rule2); border-radius: 999px; padding: 4px 4px 4px 18px;
  transition: border-color var(--v7-t), box-shadow var(--v7-t);
}
.v7-search:focus-within { border-color: var(--v7-mag); box-shadow: 0 0 0 1px var(--v7-mag); }
.v7-search input[type="search"] {
  flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  font: 500 16px/1.2 var(--v7-f-ui); color: var(--v7-ink);
}
html body .v7-drawer .v7-search input[type="search"]:focus-visible { outline: none; }
.v7-search input[type="search"]::placeholder { color: var(--v7-ink3); opacity: 1; }
.v7-search button {
  flex: 0 0 auto; min-height: 0; margin: 0; border: 0; border-radius: 999px; padding: 12px 18px;
  font: 600 15px/1 var(--v7-f-ui); letter-spacing: normal; text-transform: none;
  background: var(--v7-ink); color: var(--v7-paper); cursor: pointer;
  transition: background var(--v7-t), color var(--v7-t);
}
.v7-search button:hover { background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); color: var(--v7-hov-ink); }
.v7-dr__list, .v7-dr__sub { list-style: none; margin: 0; padding: 0; }
.v7-dr__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--v7-rule); }
.v7-dr__l { display: flex; align-items: center; gap: 12px; font: 600 18px/1.2 var(--v7-f-ui); padding: 15px 0; transition: color var(--v7-t); }
.v7-dr__l i { width: 3px; height: 16px; flex: 0 0 3px; background: var(--v7-k, transparent); border-radius: 2px; }
.v7-dr__l:hover, .v7-dr__l[aria-current="page"] { color: var(--v7-mag); }
.v7-plus { width: 14px; height: 14px; position: relative; display: block; }
.v7-plus::before, .v7-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .25s var(--v7-ease);
}
.v7-plus::before { width: 14px; height: 2px; }
.v7-plus::after { width: 2px; height: 14px; }
.v7-dr__g.is-open .v7-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.v7-dr__sub { display: none; padding: 6px 0 14px 15px; }
.v7-dr__g.is-open .v7-dr__sub { display: block; }
.v7-dr__sub a { display: block; font: 500 15px/1.3 var(--v7-f-ui); color: var(--v7-ink2); padding: 7px 0; transition: color var(--v7-t); }
.v7-dr__sub a:hover, .v7-dr__sub a[aria-current="page"] { color: var(--v7-mag); }
.v7-dr__soc { display: flex; gap: 4px; margin: 20px 0 0 -10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · FOOTER (black, both themes)
   ═════════════════════════════════════════════════════════════════════════ */
.v7-ft { background: var(--v7-foot); color: #C9CCD2; padding: 80px 0 34px; position: relative; z-index: 1; }
html[data-theme="dark"] .v7-ft { border-top: 1px solid var(--v7-rule); }
.v7-ft__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 44px; }
.v7-ft__logo { width: 220px; height: auto; display: block; }
.v7-ft__desc { font: 400 1.0625rem/1.55 var(--v7-f-text); color: #A5AAB3; margin: 22px 0 18px; max-width: 42ch; }
.v7-ft__soc { display: flex; gap: 6px; margin-left: -10px; }
/* 18px head gap minus the ~8px the 36px row adds above its text (F18). */
.v7-ft__h { font: 600 15px/1 var(--v7-f-ui); color: #fff; margin: 6px 0 10px; }
.v7-ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.v7-ft li { margin: 0; }
.v7-ft ul a, .v7-ft ul button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0; margin: 0;
  font: 500 15px/1.3 var(--v7-f-ui); color: #A5AAB3; letter-spacing: normal; text-transform: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left;
  transition: color var(--v7-t);
}
.v7-ft ul a:hover, .v7-ft ul button:hover { color: #fff; }
.v7-ft__topic { gap: 10px; }
.v7-ft__topic i {
  flex: 0 0 18px; width: 18px; height: 3px;
  background: color-mix(in srgb, var(--v7-k) 70%, #fff);
  transform: scaleX(.56); transform-origin: left; transition: transform .25s var(--v7-ease);
}
.v7-ft__topic:hover i { transform: none; }
.v7-ft .v7-ic { color: #C9CCD2; }
/* on black: solid label + solid 1.5px ring, transparent fill */
.v7-ft .v7-ic:hover { color: var(--v7-mag-d); background: none; box-shadow: inset 0 0 0 1.5px var(--v7-mag-d); }
.v7-ft__bot {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 60px; padding-top: 22px; border-top: 1px solid #25282E;
  font: 500 14px/1.4 var(--v7-f-ui); color: #7D838D;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · MOTION + RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */
/* `transition: none`, not a clamped duration: clamping the drawer's
   `visibility 0s` to .01ms would CREATE a visibility transition that starts
   hidden, and the dialog could not take focus in the frame it opens. */
@media (prefers-reduced-motion: reduce) {
  .v7-mast *, .v7-drawer, .v7-drawer *, .v7-drawer *::before, .v7-drawer *::after,
  .v7-scrim, .v7-ft *, .v7-ft *::before, .v7-ft *::after {
    transition: none !important; animation: none !important;
  }
}
@media (max-width: 1180px) {
  .v7-nav__l { font-size: 16px; padding: 10px 11px; }
  .v7-logo__img { width: 226px; }
}
@media (max-width: 1040px) { .v7-nav { display: none; } }
@media (max-width: 960px) {
  .v7-ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v7-ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .v7-wrap { padding: 0 16px; }
  .v7-mast__in { min-height: 66px; gap: 10px; }
  .v7-logo__img { width: 180px; }
  .v7-mast .v7-ic, .v7-drawer .v7-ic, .v7-ft .v7-ic { width: 44px; height: 44px; }
  .v7-ft__grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .v7-drawer, .v7-scrim, .v7-mast__ctl { display: none !important; }
}

/* A03: 320px masthead, with the existing 44px control targets intact. */
@media (max-width: 360px) {
  .v7-logo__img { width: 150px; }
  .v7-mast__in { gap: 4px; }
  .v7-mast__ctl { gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · HOMEPAGE (v7 phase 2, docs/V7_PHASE2_HOMEPAGE_SIZING_2026-09-26.md)
   front-page.php renders the v7.1 mockup-A homepage (source/mock_a.py home(),
   pages/v7a-home.html) inside `.v7-home`, on this sheet alone: no
   pressroom.css and no PR faces under it (functions.php
   ts_v7_is_body_surface()). Values are the frozen v7-base.css + v7a.css,
   with the title-wide key resolved to its shipped state.

   PRODUCTION DELTAS from the mockup, each stated at its rule:
     H1. Class names: the mockup-A prefix `.a-*` becomes `.v7-*` (a-fold →
         v7-fold, a-lead → v7-lead, a-side → v7-side, a-feat → v7-feat,
         a-mv → v7-moving, a-fm → v7-fm, a-band → v7-band, a-dd → v7-dd,
         a-trust → v7-trust, a-sec--* → v7-sec--*, a-home → v7-home), and the
         custom properties are --v7-* (--k → --v7-k, --kl → --v7-kl).
     H2. The mockup's page resets (body, *, a, img, button, h1–p) are scoped
         to `.v7-home` and kept at (0,1,0) with :where(), so every component
         rule below still wins on source order while the legacy style.css /
         Blocksy element rules (h1–h6 font/colour, a:hover accent) lose.
     H3. `.v7-feed-status`: the Latest feed's live region (not in the
         mockup) — screen-reader-only at rest, a visible note on failure.
     H4. The bright pillar inks on the bands come from --v7-brN tokens
         instead of per-section inline hex.
     H5. Reduced motion is scoped to the homepage (the mockup's was global).
     H6. (retired by D14-A: the Complianz close target is part of the
         site-wide banner skin in §8.)
   ═════════════════════════════════════════════════════════════════════════ */

/* Page ground + the Blocksy full-width reset (was front-page.php's inline
   <style>): the page owns its measure through .v7-wrap, so the parent
   theme's container must not impose a second one. */
body.v7-page { margin: 0; background: var(--v7-paper); color: var(--v7-ink); }
.home .ct-container { max-width: none !important; padding: 0 !important; }
.home .entry-content { max-width: none !important; }
.home .ct-sidebar { display: none !important; }
.home .content-area { width: 100% !important; max-width: none !important; margin: 0 !important; }
.home .entry-content > * { max-width: none !important; }
.home .entry-header { display: none; }

/* H2 · the page resets */
.v7-home {
  background: var(--v7-paper); color: var(--v7-ink);
  font-family: var(--v7-f-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v7-home, .v7-home *, .v7-home *::before, .v7-home *::after { box-sizing: border-box; }
.v7-home :where(h1, h2, h3, p, ul, ol, li, figure) { margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
.v7-home :where(h1, h2, h3, p) { overflow-wrap: break-word; }
.v7-home :where(a) { color: inherit; text-decoration: none; }
.v7-home a:where(:hover) { color: inherit; }
.v7-home :where(img) { max-width: 100%; }
.v7-home :where(button) { font: inherit; }

/* photo plates · grey ground + a hairline inside so product shots never dissolve */
.v7-plate { display: block; position: relative; overflow: hidden; background: var(--v7-fog); aspect-ratio: 16 / 9; }
.v7-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v7-plate::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--v7-plate-line); pointer-events: none; }
html[data-theme="dark"] .v7-plate { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.v7-noimg { display: block; width: 100%; height: 100%; }

/* the hover vocabulary · controls: solid label + 10 % fill of the section's colour */
.v7-more, .v7-tab, .v7-btn, .v7-pr__cta {
  transition: color var(--v7-t) var(--v7-ease), background-color var(--v7-t) var(--v7-ease), box-shadow var(--v7-t) var(--v7-ease);
}
.v7-btn:hover, .v7-tab:hover { color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); }
.v7-more:hover {
  color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) var(--v7-kt-amt), var(--v7-kt-mix));
  background: color-mix(in srgb, var(--v7-k, var(--v7-mag)) var(--v7-hov-amt), transparent);
}
/* on black: solid label + solid 1.5px ring, transparent fill */
.is-onblack .v7-more:hover { color: var(--v7-kl, var(--v7-mag-d)); background: none; box-shadow: inset 0 0 0 1.5px var(--v7-kl, var(--v7-mag-d)); }
/* story titles: the ink stays, a magenta underline arrives */
.v7-card__t a, .v7-mv__t {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em;
  text-decoration-skip-ink: auto; transition: text-decoration-color .22s var(--v7-ease);
}
.v7-card__t a:hover, .v7-mv__a:hover .v7-mv__t { text-decoration-color: var(--v7-mag); }
/* section names: no underline, the name turns solid in its section colour */
.v7-head__t a { transition: color var(--v7-t) var(--v7-ease); }
.v7-head__t a:hover { color: var(--v7-k, var(--v7-mag)); }
html[data-theme="dark"] .v7-head__t a:hover { color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) 82%, #fff); }
.is-onblack .v7-head__t a { color: var(--v7-kl, #fff); }
.is-onblack .v7-head__t a:hover, html[data-theme="dark"] .is-onblack .v7-head__t a:hover { color: #fff; }

/* small type */
.v7-lab { --v7-kt: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); display: inline-block; font: 600 15px/1 var(--v7-f-ui); color: var(--v7-kt); }
.v7-by { font: 500 14px/1.3 var(--v7-f-ui); color: var(--v7-ink3); margin: 10px 0 0; }
.v7-more { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1 var(--v7-f-ui); color: var(--v7-ink); padding: 11px 16px; border-radius: 999px; white-space: nowrap; }
.v7-more span[aria-hidden] { transition: transform .22s var(--v7-ease); }
.v7-more:hover span[aria-hidden] { transform: translateX(3px); }
.v7-el { height: 13px; width: auto; display: inline-block; vertical-align: -1px; }
.v7-elw { display: inline-flex; align-items: center; }
html[data-theme="dark"] .v7-elw .v7-is-dark { display: inline-block !important; }

/* section head · the title-wide key; the hairline only where .has-hair */
.v7-sec { padding-top: var(--v7-gap-sec); }
.v7-head { display: flex; align-items: center; gap: 40px; position: relative; padding-top: 24px; margin: 0 0 32px; }
.v7-head .v7-more { margin-left: -16px; }
.v7-head.has-hair::after { content: ""; position: absolute; left: 0; right: 0; top: 1.5px; height: 1px; background: var(--v7-rule2); }
.v7-head__t { font: var(--v7-hed-w) 2.56rem/1 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0; position: relative; }
.v7-head__t::before { content: ""; position: absolute; left: 0; top: -24px; width: 100%; height: 4px; background: var(--v7-k, var(--v7-mag)); z-index: 1; }
.v7-head.is-onblack::after, .v7-head.is-onblack .v7-head__t::before { content: none; }

/* tabs · sentence case, roomy, a soft rule under them */
.v7-tabs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -8px 0 38px; padding-bottom: 14px; border-bottom: 1px solid var(--v7-rule); }
.v7-tab { font: 500 17px/1 var(--v7-f-ui); color: var(--v7-ink2); padding: 10px 16px; border-radius: 999px; margin-left: -2px; }
.v7-tab:first-child { margin-left: -16px; }
.v7-tab.is-on { color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); }
/* owner 2026-10-03: a touch screen keeps :hover on the last tab tapped, which
   read as a second active tab; there only the active tab is tinted. */
@media (hover: none) {
  .v7-tab:not(.is-on):hover { color: var(--v7-ink2); background: transparent; }
  .v7-subtabs .v7-tab:not(.is-on):hover { color: var(--v7-ink); background: transparent; border-color: var(--v7-rule2); }
}

/* cards · 4-up grid, photo on top */
.v7-grid4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 28px; }
.v7-card__fig { margin-bottom: 16px; }
.v7-card__t { font: var(--v7-hed-w) 1.32rem/1.2 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 10px 0 0; text-wrap: balance; }
.v7-card__fig + .v7-card__t { margin-top: 0; }
.v7-grid4 > li > .v7-lab { margin-bottom: 10px; }
.v7-grid4.is-slug .v7-card__t a { text-decoration-thickness: .1em; }
.v7-loadwrap { display: flex; justify-content: center; margin-top: 48px; }
.v7-loadwrap[hidden] { display: none; }
.v7-btn { font: 600 17px/1 var(--v7-f-ui); color: var(--v7-ink); background: none; border: 1px solid var(--v7-rule2); border-radius: 999px; padding: 16px 26px; cursor: pointer; min-height: 0; margin: 0; letter-spacing: normal; text-transform: none; box-shadow: none; }
.v7-btn:hover { border-color: transparent; }
.v7-btn:disabled { color: var(--v7-ink3); cursor: default; }
.v7-btn:disabled:hover { color: var(--v7-ink3); background: none; border-color: var(--v7-rule2); }
/* H3 · the feed's live region (and a disabled Load more at the end of a list) */
.v7-feed-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v7-feed-status.is-msg { position: static; width: auto; height: auto; margin: 28px 0 0; overflow: visible; clip: auto; white-space: normal; font: 500 16px/1.4 var(--v7-f-ui); color: var(--v7-ink); text-align: center; }

/* ─── fold ────────────────────────────────────────────────────────────── */
.v7-fold { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; padding-top: 44px; align-items: start; }
.v7-lead { position: relative; }
.v7-lead__fig { aspect-ratio: 3 / 2; transition: box-shadow .3s var(--v7-ease); }
.v7-lead__fig img { animation: v7-settle 1.1s var(--v7-ease) .05s both; }
.v7-lead:hover .v7-lead__fig { box-shadow: 0 0 0 2px color-mix(in srgb, var(--v7-mag) 35%, transparent); }
.v7-lead__card { position: relative; z-index: 2; background: var(--v7-paper); border: 1px solid var(--v7-ink); margin: -132px 44px 0; padding: 30px 34px 30px; }
.v7-lead__lab { --v7-kt: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1 var(--v7-f-ui); color: var(--v7-kt); }
.v7-lead__h { font: var(--v7-hed-w) clamp(2.3rem, 3.4vw, 3.5rem)/1.04 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 18px 0 16px; text-wrap: balance; }
.v7-lead__h a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .05em; text-underline-offset: .12em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-lead__h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.v7-lead:hover .v7-lead__h a { text-decoration-color: var(--v7-mag); }
.v7-lead__dek { font: 400 1.25rem/1.45 var(--v7-f-text); color: var(--v7-ink2); max-width: 52ch; margin: 0; text-wrap: pretty; }
.v7-lead .v7-by { font-size: 15px; color: var(--v7-ink2); margin-top: 18px; }
@keyframes v7-settle { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }

.v7-side { display: flex; flex-direction: column; }
.v7-feat__fig { margin-bottom: 16px; }
.v7-feat__t { font: var(--v7-hed-w) 1.75rem/1.1 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 10px 0 0; text-wrap: balance; }
.v7-feat__t a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-feat__t a:hover { text-decoration-color: var(--v7-mag); }
.v7-moving { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--v7-ink); }
.v7-moving__h { display: flex; align-items: center; gap: 10px; font: 600 16px/1 var(--v7-f-ui); margin: 0 0 6px; }
.v7-moving__l { list-style: none; margin: 0; padding: 0; }
.v7-moving__l li { padding: 16px 0; border-bottom: 1px solid var(--v7-rule); }
.v7-moving__l li:last-child { border-bottom: 0; }
.v7-moving__l .v7-mv__a { display: block; }
.v7-moving__l .v7-lab { font-size: 14px; }
.v7-moving__l .v7-mv__t { display: block; font: var(--v7-hed-w) 1.2rem/1.2 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin-top: 8px; text-wrap: balance; }
.v7-moving__l .v7-by { margin-top: 6px; font-size: 13px; }

/* ─── pillar lead + list, alternating, 1.9:1 ─────────────────────────── */
.v7-fm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
.v7-fm.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.v7-fm.is-flip .v7-fm__lead { order: 2; }
.v7-fm__fig { aspect-ratio: 1.9 / 1; }
.v7-fm__h { font: var(--v7-hed-w) 2.1rem/1.08 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 20px 0 0; text-wrap: balance; }
.v7-fm__h a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .14em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-fm__h a:hover, .v7-fm__l a:hover .v7-fm__t { text-decoration-color: var(--v7-mag); }
.v7-fm__l { list-style: none; margin: 0; padding: 0; }
.v7-fm__l li { padding: 22px 0; border-bottom: 1px solid var(--v7-rule); }
.v7-fm__l li:first-child { padding-top: 0; }
.v7-fm__l li:last-child { border-bottom: 0; }
.v7-fm__l a { display: block; }
.v7-fm__t { font: var(--v7-hed-w) 1.4rem/1.18 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-fm__l .v7-by { margin-top: 8px; }

/* ─── band · black, edge to edge, the bright pillar ink for line + name + hover ─ */
.v7-band { margin-top: var(--v7-gap-sec); background: var(--v7-band); color: #fff; padding: 52px 0 58px; border-top: 4px solid var(--v7-kl); }
.v7-band .v7-head { margin-bottom: 34px; padding-top: 0; }
.v7-band .v7-more { color: #fff; }
.v7-band__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v7-band__l li { padding: 2px 28px; border-left: 1px solid rgba(255, 255, 255, .18); }
.v7-band__l li:first-child { padding-left: 0; border-left: 0; }
.v7-band__l a { font: var(--v7-hed-w) 1.19rem/1.24 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); color: #fff; text-wrap: balance;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-band__l a:hover { text-decoration-color: var(--v7-kl); }
.v7-band .v7-by { color: #8F949D; }
html[data-theme="dark"] .v7-band { border-bottom: 1px solid var(--v7-rule); }

/* ─── deep dives · pillar first, then the title (no arrow, no numbers) ── */
.v7-dd__intro { font: 400 1.2rem/1.5 var(--v7-f-text); color: var(--v7-ink2); margin: -10px 0 30px; max-width: 62ch; }
.v7-dd { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v7-ink); }
.v7-dd a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--v7-rule); }
.v7-dd .v7-lab { font-size: 16px; }
.v7-dd__t { font: var(--v7-hed-w) 1.75rem/1.14 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); text-wrap: balance;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-dd a:hover .v7-dd__t { text-decoration-color: var(--v7-mag); }

/* ─── trust · caps, the magenta element ─────────────────────────────── */
.v7-trust { list-style: none; margin: 112px 0 0; padding: 36px 0 112px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--v7-rule2); }
.v7-trust h3 { font: 700 14px/1.3 var(--v7-f-ui); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 12px; }
.v7-trust h3 a { display: inline-flex; align-items: center; gap: 12px; transition: color var(--v7-t); }
.v7-trust h3 a:hover { color: var(--v7-mag); }
.v7-trust .v7-el { height: 14px; }
.v7-trust p { font: 400 1.1rem/1.5 var(--v7-f-text); color: var(--v7-ink2); margin: 0; }

/* ─── house promo · grey plate, a long soft blend into the photo ────── */
.v7-ad { margin-top: var(--v7-gap-sec); }
.v7-ad__label { font: 500 13px/1 var(--v7-f-ui); color: var(--v7-ink3); margin: 0 0 10px; }
.v7-pr { position: relative; display: flex; overflow: hidden; background: var(--v7-fog); color: var(--v7-ink); isolation: isolate; }
.v7-pr__img { position: absolute; z-index: -1; object-fit: cover; transition: transform .9s var(--v7-ease); }
.v7-pr:hover .v7-pr__img { transform: scale(1.025); }
.v7-pr__txt { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
/* A05, amended by the owner 2026-10-01: where the CTA sits over the photograph
   (the 300×250 unit, and the banner at phone width) it carries its own fog pill
   in BOTH themes and is anchored bottom-left, clear of the object. The desktop
   banners keep the grey plate + eased blend (their copy never meets the photo);
   a panel under .v7-pr__txt stays banned (it cut a hard seam through the blend). */
.v7-pr__cta-short { display: none; }
.v7-pr--mpu .v7-pr__cta { position: absolute; left: 20px; bottom: 18px; margin: 0; background: var(--v7-fog); }
.v7-ad--mpu .v7-pr:hover .v7-pr__cta { background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), var(--v7-fog)); }
html[data-theme="dark"] .v7-pr--mpu .v7-pr__cta { background: color-mix(in srgb, var(--v7-fog) 86%, transparent); }
.v7-pr__brand { display: flex; align-items: center; gap: 14px; }
.v7-pr__logo { width: 124px; height: auto; display: block; }
.v7-pr__k { font: 600 14px/1 var(--v7-f-ui); color: var(--v7-mag-on-fog); }
/* the label sits on the wordmark's LETTER baseline (the hook-t drops below it, so centring read 3px high) */
.v7-pr--wide .v7-pr__k { position: relative; top: 3.3px; }
.v7-pr__h { font: var(--v7-hed-w) 2.3rem/1.04 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); text-wrap: balance; }
.v7-pr__d { font: 400 1.0625rem/1.4 var(--v7-f-text); color: var(--v7-ink2); max-width: 42ch; }
.v7-pr__cta { align-self: flex-start; font: 600 15px/1 var(--v7-f-ui); padding: 11px 16px; margin: 6px -16px 0; border-radius: 999px; }
.v7-pr:hover .v7-pr__cta { color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); }
.v7-pr--wide { min-height: 212px; }
.v7-pr--wide .v7-pr__img { right: 0; top: 0; width: 66%; height: 100%; object-position: var(--v7-pr-pos, 50% 50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 14%, rgba(0,0,0,.3) 28%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.88) 56%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 14%, rgba(0,0,0,.3) 28%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.88) 56%, #000 70%); }
.v7-pr--wide .v7-pr__txt { padding: 30px 40px; max-width: 58%; }
html[data-theme="dark"] .v7-btn { border-color: var(--v7-rule2); }

/* ─── homepage responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .v7-fold { grid-template-columns: minmax(0, 1fr); }
  .v7-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .v7-moving { margin-top: 0; }
  .v7-fm, .v7-fm.is-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v7-fm.is-flip .v7-fm__lead { order: 0; }
  .v7-band__l { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .v7-band__l li:nth-child(3) { padding-left: 0; border-left: 0; }
  .v7-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v7-fold { padding-top: 16px; gap: 28px; }
  .v7-lead__card { margin: -40px 12px 0; padding: 20px 20px 22px; }
  .v7-lead__h { font-size: 2.05rem; }
  .v7-lead__dek { font-size: 1.1rem; }
  .v7-side { grid-template-columns: minmax(0, 1fr); }
  .v7-feat__t { font-size: 1.45rem; }
  .v7-band { padding: 36px 0 40px; }
  .v7-band__l { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .v7-band__l li, .v7-band__l li:first-child, .v7-band__l li:nth-child(3) { padding: 16px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .v7-band__l li:first-child { border-top: 0; padding-top: 0; }
  .v7-dd a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
  .v7-dd__t { font-size: 1.36rem; }
  .v7-trust { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 72px; padding-bottom: 72px; }
  .v7-head { gap: 20px; margin-bottom: 26px; }
  .v7-head__t { font-size: 1.95rem; }
  .v7-more { font-size: 16px; padding: 10px 14px; }
  .v7-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; scrollbar-width: none; }
  .v7-tab { white-space: nowrap; }
  /* owner 2026-10-03: the row scrolls here, and a scroller clips the desktop
     -16px hang of the first pill, so "All" was cut on the left. The pill box
     aligns with the column instead, as the pillar subtabs already do. */
  .v7-tab:first-child { margin-left: 0; }
  .v7-grid4 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .v7-grid4 > li { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .v7-grid4 > li > .v7-card__fig { grid-row: span 3; margin: 0; }
  .v7-card__t { font-size: 1.14rem; margin-top: 6px; }
  .v7-lab { font-size: 14px; }
  /* owner 2026-10-01: the phone banner takes the sidebar composition, full width */
  .v7-pr--wide { min-height: 250px; }
  .v7-pr--wide .v7-pr__txt { max-width: 100%; padding: 18px 20px; justify-content: flex-start; gap: 8px; }
  .v7-pr--wide .v7-pr__brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v7-pr--wide .v7-pr__k { top: 0; }
  .v7-pr--wide .v7-pr__img { left: 0; right: auto; top: auto; bottom: 0; width: 100%; height: 100%; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.22) var(--v7-pr-fade, 38%), rgba(0,0,0,.8) calc(var(--v7-pr-fade, 38%) + 18%), #000 calc(var(--v7-pr-fade, 38%) + 32%));
            mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.22) var(--v7-pr-fade, 38%), rgba(0,0,0,.8) calc(var(--v7-pr-fade, 38%) + 18%), #000 calc(var(--v7-pr-fade, 38%) + 32%)); }
  .v7-pr--wide .v7-pr__cta { position: absolute; left: 20px; bottom: 18px; margin: 0; background: var(--v7-fog); }
  html[data-theme="dark"] .v7-pr--wide .v7-pr__cta { background: color-mix(in srgb, var(--v7-fog) 86%, transparent); }
  .v7-pr:hover.v7-pr--wide .v7-pr__cta { background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), var(--v7-fog)); }
  .v7-pr--wide .v7-pr__cta-full { display: none; }
  .v7-pr--wide .v7-pr__cta-short { display: inline; }
  .v7-pr__h { font-size: 1.62rem; }
  .v7-pr--wide .v7-pr__h { max-width: 260px; }   /* the sidebar unit's measure: a long headline wraps on the left, clear of the object */
  .v7-pr--wide .v7-pr__d { display: none; }
}
/* H5 · only the lead photograph settles on load; reduced motion stops it */
@media (prefers-reduced-motion: reduce) {
  .v7-home *, .v7-home *::before, .v7-home *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · COOKIE BANNER (v7 D14-A, docs/V7_D14A_COOKIE_BANNER_SKIN_2026-09-26.md)
   A skin for Complianz's own markup (7.5.5, banner-1 opt-in, frozen at
   .claude/tests/fixtures/complianz-banner-1-optin-markup-2026-09-26.html).
   Site-wide: this sheet loads on v7 AND Pressroom surfaces, so there is one
   banner look. Values are the frozen v7a-pages.css `.ck*`; the wording, the
   categories and the plugin configuration are untouched (that is D14-B).

   THE CASCADE. The plugin's generated sheet (banner-1-optin.css, with the old
   Direction-D custom CSS as its tail and a dark pack on
   html[data-color-mode="dark"]) loads AFTER this sheet, so a tie loses. Every
   rule is `html body .cmplz-cookiebanner.cmplz-cookiebanner …` = (0,2,2) plus,
   inside the categories, the plugin's own class chain, so each one outranks
   the plugin selector it answers by one class. test_v7_cookie_banner proves
   that per property against the frozen live sheet. One !important: the
   close's zoom inside the plugin's max-height:400px compression branch (the
   plugin zooms it .6 !important; the ≥24px target exception stands).

   DISPLAY IS NEVER DECLARED on anything the plugin shows or hides (the
   banner box, buttons, categories, category rows, the information links,
   labels): its JS and show/hide rules keep deciding which controls exist.
   Display is set only on containers the plugin never hides (header, the
   button grid, the category header row, the policy links).

   PRODUCTION DELTAS from the mockup, each stated at its rule:
     K1. The wordmark centered over the header row (owner amendment
         2026-09-26), painted into Complianz's empty .cmplz-logo slot.
     K2. The title shows at every width. Complianz hides it at <=425px for
         its own three-column header; the v7.1 design shows it on phone.
     K3. Switch: off track --v7-ink3 (mockup --v7-rule2) and a --v7-paper
         knob (mockup #fff), so both states hold 3:1 in both themes.
     K4. Category descriptions stay behind Complianz's chevron (its markup),
         restyled as a 44px control.
     K5. Buttons, the preferences control and the policy links keep a 44px
         target (the adopted floor); the mockup's links are 14px lines.
   ═════════════════════════════════════════════════════════════════════════ */
html body .cmplz-cookiebanner.cmplz-cookiebanner,
html body .cmplz-cookiebanner.cmplz-cookiebanner *,
html body .cmplz-cookiebanner.cmplz-cookiebanner *::before,
html body .cmplz-cookiebanner.cmplz-cookiebanner *::after { box-sizing: border-box; }
html body .cmplz-cookiebanner.cmplz-cookiebanner {
  top: auto; right: 24px; bottom: 24px; left: auto;
  width: min(460px, calc(100vw - 32px)); min-width: 0; max-width: none; margin: 0;
  gap: 0; padding: 22px 24px 18px;
  background: var(--v7-paper); color: var(--v7-ink);
  border: 1px solid var(--v7-ink); border-radius: 0;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35);
  font: 400 16px/1.5 var(--v7-f-ui); letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
/* the plugin re-applies its own shadow on hover (.cmplz-show:hover, (0,3,0)) */
html body .cmplz-cookiebanner.cmplz-cookiebanner:hover { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35); }
html[data-theme="dark"] body .cmplz-cookiebanner.cmplz-cookiebanner { border-color: var(--v7-rule2); }

/* header · K1: logo centered on the row (two equal 44px side columns keep it
   on the card's axis), close top-right, title under both */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas: ". logo close" "title title title";
  align-items: center; gap: 6px 0; max-height: none;
  margin: -8px -12px 8px; padding: 0;
  font: inherit; color: inherit; letter-spacing: normal;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-logo {
  grid-area: logo; justify-self: center; width: 140px; height: auto; aspect-ratio: 7777 / 1339;
  background: url("logo-v7/wordmark.svg") center / contain no-repeat;
}
html[data-theme="dark"] body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-logo { background-image: url("logo-v7/wordmark-night.svg"); }
/* K2 */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
  grid-area: title; justify-self: start; display: block; margin: 0; padding: 0 12px;
  font: var(--v7-hed-w) 1.5rem/1.1 var(--v7-f-hed); color: var(--v7-ink);
  letter-spacing: normal; text-transform: none;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close {
  grid-area: close; justify-self: end;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: var(--v7-ink); background: none; font-size: 0; line-height: 0; cursor: pointer;
  transition: color var(--v7-t) var(--v7-ease), background-color var(--v7-t) var(--v7-ease);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px; display: block; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close:hover {
  color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent);
}
@media (max-height: 400px) { html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close { zoom: 1 !important; } }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider { height: 0; margin: 0; padding: 0; border: 0; }

/* body · message + the categories panel */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body { width: auto; min-width: 0; margin: 0; padding: 0; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--v7-rule2); }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message {
  width: auto; margin: 0 0 18px; padding: 0;
  font: 400 1.05rem/1.5 var(--v7-f-text); color: var(--v7-ink2); overflow-wrap: break-word;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories { width: auto; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--v7-rule); }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category {
  margin: 0; padding: 0; background: none; border-bottom: 1px solid var(--v7-rule);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 0;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
  flex: 1 1 auto; min-width: 0; margin: 0; font: 600 15px/1.2 var(--v7-f-ui); color: var(--v7-ink);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
  font: 600 13px/1 var(--v7-f-ui); color: var(--v7-ink3); white-space: nowrap;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
  max-width: none; margin: 0; padding: 0 0 12px; font: 400 14px/1.4 var(--v7-f-ui); color: var(--v7-ink3);
}
/* K4 · the chevron as a 44px control */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
  flex: 0 0 44px; width: 44px; height: 44px; margin: 0 -10px 0 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: var(--v7-ink); background: none; cursor: pointer;
  transition: color var(--v7-t) var(--v7-ease), background-color var(--v7-t) var(--v7-ease);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle:hover {
  color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle svg {
  width: 16px; height: 16px; display: block; fill: currentColor;
}
/* K3 · the switch: the plugin's checkbox + label pseudo-elements, resized to
   the mockup's 44×26 track and 20px knob */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header > .cmplz-banner-checkbox {
  position: relative; flex: 0 0 44px; width: 44px; height: 26px; margin: 0;
}
/* the (invisible, opacity 0) native input states its own colour (v7 phase 5a):
   it used to inherit style.css's body colour, which no v7 surface loads now */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
  top: 0; left: 0; width: 44px; height: 26px; margin: 0; color: var(--v7-ink);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
  position: static; margin: 0; padding: 0;
}
/* the label's name stays for screen readers without relying on the parent
   theme's .screen-reader-text */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
  top: 0; left: 0; width: 44px; height: 26px; padding: 0; border-radius: 999px;
  background-color: var(--v7-ink3); transition: background-color var(--v7-t) var(--v7-ease);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
  top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--v7-paper); transition: left .2s var(--v7-ease);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
  padding: 0; background-color: var(--v7-ink);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after { left: 21px; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: none; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
  outline: 2px solid var(--v7-mag); outline-offset: 3px;
}

/* buttons · Accept and Deny are one rule (F12 equal weight); Save spans the
   row above them, View preferences is the text control below them */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; padding: 0;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  width: auto; min-width: 0; height: auto; min-height: 44px; margin: 0; padding: 15px 18px; flex: none;
  font: 600 16px/1 var(--v7-f-ui); letter-spacing: normal; text-transform: none;
  text-align: center; text-decoration: none; white-space: nowrap;
  color: var(--v7-ink); background: none; border: 1px solid var(--v7-ink); border-radius: 999px; box-shadow: none;
  cursor: pointer;
  transition: color var(--v7-t) var(--v7-ease), background-color var(--v7-t) var(--v7-ease), border-color var(--v7-t) var(--v7-ease);
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover {
  color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); border-color: transparent;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { grid-column: 1 / -1; order: -1; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
  grid-column: 1 / -1; justify-self: start; order: 1;
  margin: 4px 0 0 -14px; padding: 10px 14px; border-color: transparent; font-size: 15px;
}

/* policy links */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents { justify-content: flex-start; margin: 6px 0 0; padding: 0; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links ul {
  flex-wrap: wrap; justify-content: flex-start; gap: 0 16px; margin: 0; padding: 0; list-style: none;
}
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links li { margin: 0; padding: 0; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link {
  margin: 0; font: 500 14px/1 var(--v7-f-ui); color: var(--v7-ink3); letter-spacing: normal; text-transform: none;
  text-decoration: underline; text-decoration-color: var(--v7-rule2); text-underline-offset: .25em; white-space: nowrap;
  transition: color var(--v7-t) var(--v7-ease), text-decoration-color var(--v7-t) var(--v7-ease);
}
/* K5 · the documents list only: its one hidden item is .cmplz-hidden, which
   the plugin hides with an inline !important */
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents .cmplz-link { display: inline-flex; align-items: center; min-height: 44px; }
html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link:hover { color: var(--v7-mag); text-decoration-color: var(--v7-mag); }

/* focus · the v7 ring; the banner sits outside every chrome/body focus scope */
html body .cmplz-cookiebanner.cmplz-cookiebanner :is(a, button, input, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--v7-mag); outline-offset: 3px;
}

/* phone · bottom sheet (the mockup's <=640px values) */
@media (max-width: 640px) {
  html body .cmplz-cookiebanner.cmplz-cookiebanner { right: 8px; bottom: 8px; left: 8px; width: auto; }
  html body .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-logo { width: 120px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body .cmplz-cookiebanner.cmplz-cookiebanner { animation: v7-ck-in .5s var(--v7-ease) .4s both; }
}
@keyframes v7-ck-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body .cmplz-cookiebanner.cmplz-cookiebanner,
  html body .cmplz-cookiebanner.cmplz-cookiebanner *,
  html body .cmplz-cookiebanner.cmplz-cookiebanner *::before,
  html body .cmplz-cookiebanner.cmplz-cookiebanner *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · MANAGE-CONSENT TAB (v7 D14-A2)
   ═════════════════════════════════════════════════════════════════════════ */
/* C12: the footer's button is the single consent-settings entry point. Hide
   only Complianz's floating tab; the footer button is outside this wrapper and
   remains a live delegated opener for the banner. */
html body #cmplz-manage-consent .cmplz-btn { display: none; }
/* Keep the old skin rules scoped for cached/legacy markup without reviving the
   floating control. */
html body #cmplz-manage-consent .cmplz-manage-consent {
  font: 500 15px/1 var(--v7-f-ui);
  color: var(--v7-ink); background-color: var(--v7-paper);
  border: 1px solid var(--v7-ink); border-bottom: 0; border-radius: 0;
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] body #cmplz-manage-consent .cmplz-manage-consent { border-color: var(--v7-rule2); }
html body #cmplz-manage-consent .cmplz-manage-consent:focus-visible { outline: 2px solid var(--v7-mag); outline-offset: 2px; }
html[data-theme="dark"] body #cmplz-manage-consent .cmplz-manage-consent:focus-visible { outline-color: var(--v7-mag-d); }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · ARTICLE + GUIDE (v7 phase 3, docs/V7_PHASE3_ARTICLE_SIZING_2026-09-26.md)
   single-post.php renders the v7.1 mockup-A article (source/mock_a.py
   article(), pages/v7a-news.html + v7a-evergreen.html) inside `.v7-art`, on
   this sheet ALONE: no pressroom.css, and — unlike the homepage — no
   style.css / theme-vars.css either (functions.php ts_v7_is_sheet_alone()),
   because the audit hooks the markup keeps (ts-article-body, ts-share,
   ts-faq*, …) are the legacy sheet's own selectors. Values are the frozen
   v7-base.css + v7a.css with the title-wide key and hairline-off resolved to
   their shipped state.

   PRODUCTION DELTAS from the mockup, each stated at its rule:
     A1. Class names: the mockup-A prefix `.a-*` becomes `.v7-*` (a-art__grid →
         v7-art__grid, a-art__col → v7-art__col, a-art__body → v7-art__body,
         a-rail → v7-rail, a-rail__* → v7-rail__*, p-toc/a-rail__toc →
         v7-toc); custom properties are --v7-*. No method line (owner
         2026-09-26), so no .a-method.
     A2. The body components are stated at `.v7-art .v7-prose …` = (0,2,x):
         WordPress's per-block sheets (wp-block-table, -list, -group …) load
         AFTER this one and style the same elements at (0,1,1)–(0,3,2).
     A3. Components the mockup never showed but the corpus carries, drawn in
         the same vocabulary: definition lists of every class (ts-deflist,
         ts-definition-list, ts-def-list, ts-defs, ts-milestones), striped and
         fixed-layout tables, table caption/tfoot, In the news, the verdict
         box, the CTA pill (ts-cta, wp-block-button), the lead paragraph
         (is-lead), code and preformatted blocks (no mono face in v7: the
         system monospace), columns, the separator, h4, the YouTube facade.
     A4. Read next's kicker takes --v7-k (the pillar's v7 ink), not --c.
     A5. The in-text house promo (news only, ts_v7_promo('infeed')) uses the
         frozen .v7-ad--infeed values; guides carry none (F1).
     A6. The sidebar promo is the 300×250 v7 unit (.v7-ad--mpu, frozen values).
     A7. Reduced motion is scoped to the article (the mockup's was global).
     A8. The tail keeps a bottom gap before the footer on phone (64px, the
         phone section rhythm): the frozen page lost its 120px to the phone
         `.v7-wrap { padding: 0 16px }` shorthand later in its own cascade.
   ═════════════════════════════════════════════════════════════════════════ */

/* page resets at (0,0,1): above the parent theme's element rules (same weight,
   later sheet), below every component class, wherever that class is declared
   in this file (the §7 card/head/label rules sit ABOVE this section) */
.v7-art {
  background: var(--v7-paper); color: var(--v7-ink);
  font-family: var(--v7-f-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v7-art, .v7-art *, .v7-art *::before, .v7-art *::after { box-sizing: border-box; }
:where(.v7-art) :is(h1, h2, h3, h4, h5, h6) { font: inherit; margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
:where(.v7-art) :is(p, ul, ol, li, figure, dl, dt, dd, blockquote, table, pre) { margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
:where(.v7-art) :is(h1, h2, h3, h4, p) { overflow-wrap: break-word; }
:where(.v7-art) a { color: inherit; text-decoration: none; }
:where(.v7-art) a:hover { color: inherit; }
:where(.v7-art) img { max-width: 100%; height: auto; }
:where(.v7-art) button { font: inherit; }
/* §7's section-name hover is (0,1,1) and sits above the reset: restated here */
.v7-art .v7-head__t a:hover { color: var(--v7-k, var(--v7-mag)); }
html[data-theme="dark"] .v7-art .v7-head__t a:hover { color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) 82%, #fff); }
html body .v7-art :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v7-mag); outline-offset: 3px; border-radius: 2px;
}

/* ─── layout B · 900 px column + the 300 px sidebar from the top ────────── */
.v7-art__grid { display: grid; grid-template-columns: minmax(0, 900px) 300px; justify-content: space-between; gap: 56px; align-items: start; }
.v7-art__col { min-width: 0; }
.v7-art__head { padding-top: 56px; }
.v7-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 16px/1.2 var(--v7-f-ui); color: var(--v7-ink3); margin: 0 0 34px; }
.v7-crumb a { transition: color var(--v7-t); padding: 3px 0; margin: -3px 0; }
.v7-crumb a.is-beat { color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); }
.v7-crumb a:hover { color: var(--v7-mag); }
.v7-art__h { font: var(--v7-hed-w) clamp(2.4rem, 4.2vw, 3.9rem)/1.04 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0 0 22px; max-width: 22ch; text-wrap: balance; }
.v7-art__dek { font: 400 1.375rem/1.45 var(--v7-f-text); color: var(--v7-ink2); max-width: 46ch; margin: 0 0 32px; text-wrap: pretty; }
.v7-art__meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--v7-rule); border-bottom: 1px solid var(--v7-rule); }
.v7-art__byline { display: flex; align-items: center; gap: 14px; }
.v7-art__byline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--v7-fog); }
.v7-art__name { font: 600 16px/1.2 var(--v7-f-ui); margin: 0; }
.v7-art__name a { transition: color var(--v7-t); }
.v7-art__name a, .v7-by a, .v7-bio__n a { display: inline-block; padding: 4px 0; margin: -4px 0; }
.v7-art__name a:hover { color: var(--v7-mag); }
.v7-art__when { font: 500 14px/1.2 var(--v7-f-ui); color: var(--v7-ink3); margin: 5px 0 0; }
.v7-art__when time { white-space: nowrap; }
.v7-share { display: flex; align-items: center; gap: 0; margin-right: -9px; flex-wrap: wrap; }
.v7-share .v7-ic { width: 38px; height: 38px; }
.v7-share .v7-ic svg { width: 19px; height: 19px; }
.v7-share .v7-ic.is-copied { color: var(--v7-hov-ink); background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); }
.v7-art__hero { margin: 30px 0 0; }
.v7-art__hero figcaption { font: 500 14px/1.4 var(--v7-f-ui); color: var(--v7-ink3); margin-top: 12px; }
.v7-art__body { max-width: 740px; margin-top: 52px; }

/* ─── the reading text ──────────────────────────────────────────────── */
.v7-art .v7-prose { font: 400 1.25rem/1.66 var(--v7-f-text); color: var(--v7-ink); min-width: 0; }
.v7-art .v7-prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.v7-art .v7-prose > p, .v7-art .v7-prose > ul, .v7-art .v7-prose > ol, .v7-art .v7-prose > dl { max-width: 34em; }
.v7-art .v7-prose a:not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v7-mag) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--v7-t), text-decoration-thickness var(--v7-t); }
.v7-art .v7-prose a:not([class]):hover { color: var(--v7-mag); text-decoration-color: var(--v7-mag); text-decoration-thickness: 2px; }
.v7-art .v7-prose strong, .v7-art .v7-prose b { font-weight: 650; }
.v7-art .v7-prose em { font-style: italic; }
.v7-art .v7-prose sup { font-size: .7em; line-height: 0; }
.v7-art .v7-prose > :first-child { margin-top: 0; }
/* H2 · serif, the title-wide key over its longest line, no hairline (system rules 2 + 3) */
.v7-art .v7-prose h2 { font: var(--v7-hed-w) 2.06rem/1.12 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 2.3em 0 .75em; padding-top: 22px; position: relative; text-wrap: balance; }
.v7-art .v7-prose h2 .v7-h2t { display: inline-block; position: relative; }
.v7-art .v7-prose h2 .v7-h2t::before { content: ""; position: absolute; left: 0; width: var(--v7-kw, 100%); top: -24.5px; height: 4px; background: var(--v7-k); }
.v7-art .v7-prose h3 { font: 700 1.3rem/1.3 var(--v7-f-ui); margin: 1.9em 0 .6em; }
.v7-art .v7-prose h4 { font: 700 1.1rem/1.3 var(--v7-f-ui); margin: 1.6em 0 .5em; }
.v7-art .v7-prose .is-lead, .v7-art .v7-prose .ts-affiliate-disclosure + p { font-size: 1.4rem; line-height: 1.55; }
/* lists · square bullets and tinted numbered circles in the pillar colour */
.v7-art .v7-prose > ul, .v7-art .v7-prose > ol, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ul,
.v7-art .v7-prose .wp-block-column > ul, .v7-art .v7-prose .ts-faq__a ul, .v7-art .v7-prose .pr-eval section > ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.v7-art .v7-prose > ul > li, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ul > li,
.v7-art .v7-prose .wp-block-column > ul > li, .v7-art .v7-prose .ts-faq__a ul > li, .v7-art .v7-prose .pr-eval section > ul > li { position: relative; padding-left: 30px; margin: 0 0 .75em; }
.v7-art .v7-prose > ul > li::before, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ul > li::before,
.v7-art .v7-prose .wp-block-column > ul > li::before, .v7-art .v7-prose .ts-faq__a ul > li::before,
.v7-art .v7-prose .pr-eval section > ul > li::before {
  content: ""; position: absolute; left: 2px; top: .58em; width: 10px; height: 10px; background: var(--v7-k);
}
.v7-art .v7-prose li > ul, .v7-art .v7-prose li > ol { margin: .6em 0 0; padding-left: 1.1em; list-style: disc; }
.v7-art .v7-prose li > ul > li, .v7-art .v7-prose li > ol > li { margin: 0 0 .4em; }
.v7-art .v7-prose > ol, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ol, .v7-art .v7-prose .ts-faq__a ol { list-style: none; margin: 0 0 1.4em; padding: 0; counter-reset: v7n; }
.v7-art .v7-prose > ol > li, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ol > li, .v7-art .v7-prose .ts-faq__a ol > li { counter-increment: v7n; position: relative; padding-left: 54px; margin: 0 0 1em; min-height: 36px; }
.v7-art .v7-prose > ol > li::before, .v7-art .v7-prose .wp-block-group:not(.ts-further-reading) > ol > li::before, .v7-art .v7-prose .ts-faq__a ol > li::before {
  content: counter(v7n); position: absolute; left: 0; top: .06em; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 18px/1 var(--v7-f-ui); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); background: color-mix(in srgb, var(--v7-k) 12%, transparent);
}
/* definition lists · every corpus class (A3) */
.v7-art .v7-prose dl { margin: 0 0 1.4em; border-top: 1px solid var(--v7-rule); }
.v7-art .v7-prose dt { font: 700 1.1rem/1.3 var(--v7-f-ui); margin: 20px 0 6px; }
.v7-art .v7-prose dt strong { font-weight: inherit; }
.v7-art .v7-prose dd { margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--v7-rule); }
.v7-art .v7-prose dd > p:last-child { margin-bottom: 0; }
/* affiliate note · small sans on a grey plate */
.v7-art .v7-prose .ts-affiliate-disclosure { font: 500 15px/1.55 var(--v7-f-ui); color: var(--v7-ink2); background: var(--v7-fog); padding: 14px 18px; margin: 0 0 34px; border: 0; border-radius: 0; }
.v7-art .v7-prose .ts-affiliate-disclosure a { color: var(--v7-ink); text-decoration: underline; text-underline-offset: .2em; }
.v7-art .v7-prose .ts-affiliate-disclosure a:hover { color: var(--v7-hov-ink); }
/* Read next · a grey plate after ~60 % of the text, titles at body weight (F15) */
.v7-art .v7-prose .ts-inline-readnext { margin: 44px 0; padding: 24px 26px 10px; background: var(--v7-fog); }
.v7-art .v7-prose .ts-readnext { margin: 0; }
.v7-art .v7-prose .ts-readnext__head { font: 600 14px/1 var(--v7-f-ui); color: var(--v7-ink2); margin: 0 0 6px; }
.v7-art .v7-prose .ts-readnext__list { list-style: none; margin: 0; padding: 0; }
.v7-art .v7-prose .ts-mini { padding: 14px 0; margin: 0; border-top: 1px solid var(--v7-rule); }
.v7-art .v7-prose .ts-mini:first-child { border-top: 0; }
.v7-art .v7-prose .ts-mini__link { display: block; text-decoration: none; }
.v7-art .v7-prose .ts-mini__kick { display: block; font: 600 15px/1 var(--v7-f-ui); color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); margin-bottom: 8px; }
.v7-art .v7-prose .ts-mini__title {
  display: inline; font: 500 1.14rem/1.3 var(--v7-f-hed); letter-spacing: 0;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em;
  text-decoration-skip-ink: auto; transition: text-decoration-color .22s var(--v7-ease);
}
.v7-art .v7-prose .ts-mini__link:hover .ts-mini__title { text-decoration-color: var(--v7-mag); }
/* tables · the full 900 px column when they scroll (F3), sticky first column, black CTA pills */
.v7-art .v7-prose figure.wp-block-table, .v7-art .v7-prose .wp-block-table { margin: 36px 0 10px; overflow-x: auto; border: 0; }
.v7-art .v7-prose .ts-table-scroll { margin: 36px 0 10px; position: relative; overflow: visible; }
.v7-art .v7-prose .ts-table__hint { display: none; text-align: right; font: 600 13px/1 var(--v7-f-ui); color: var(--v7-ink3); margin-bottom: 8px; }
.v7-art .v7-prose .is-overflowing > .ts-table__hint { display: block; }
.v7-art .v7-prose .ts-table__scroller { overflow-x: auto; }
.v7-art .v7-prose table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; border: 0; font: 400 15px/1.45 var(--v7-f-ui); }
.v7-art .v7-prose table.has-fixed-layout { table-layout: fixed; }
.v7-art .v7-prose table caption { caption-side: top; text-align: left; font: 600 14px/1.4 var(--v7-f-ui); color: var(--v7-ink2); padding: 0 0 10px; }
.v7-art .v7-prose thead { border: 0; }
.v7-art .v7-prose th, .v7-art .v7-prose td { border: 0; }
.v7-art .v7-prose thead th, .v7-art .v7-prose thead td { font: 700 14px/1.25 var(--v7-f-ui); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--v7-ink); white-space: nowrap; vertical-align: bottom; }
.v7-art .v7-prose tbody th, .v7-art .v7-prose tbody td, .v7-art .v7-prose tfoot td, .v7-art .v7-prose tfoot th { padding: 14px; border-bottom: 1px solid var(--v7-rule); vertical-align: top; text-align: left; }
.v7-art .v7-prose tfoot { border: 0; }
.v7-art .v7-prose tfoot td, .v7-art .v7-prose tfoot th { font-weight: 700; border-top: 2px solid var(--v7-ink); }
.v7-art .v7-prose table.has-fixed-layout thead th { white-space: normal; }
.v7-art .v7-prose tbody td:first-child, .v7-art .v7-prose tbody th:first-child, .v7-art .v7-prose thead th:first-child {
  position: sticky; left: 0; background: var(--v7-paper); font-weight: 700; box-shadow: 1px 0 0 var(--v7-rule); z-index: 1;
}
.v7-art .v7-prose .is-style-stripes { border-bottom: 0; }
.v7-art .v7-prose .is-style-stripes tbody tr:nth-child(odd), .v7-art .v7-prose .is-style-stripes tbody tr:nth-child(odd) td:first-child { background-color: var(--v7-fog); }
.v7-art .v7-prose .is-style-stripes tbody tr:nth-child(even) { background-color: transparent; }
.v7-art .v7-prose td a:not([rel~="sponsored"]):not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v7-mag) 70%, transparent); text-underline-offset: .2em; }
.v7-art .v7-prose td a[rel~="sponsored"], .v7-art .v7-prose a.ts-cta, .v7-art .v7-prose .wp-block-button__link {
  text-decoration: none; display: inline-block; font: 600 14px/1 var(--v7-f-ui); white-space: nowrap;
  padding: 10px 14px; border: 0; border-radius: 999px; background: var(--v7-ink); color: var(--v7-paper);
  transition: background var(--v7-t), color var(--v7-t);
}
.v7-art .v7-prose td a[rel~="sponsored"]:hover, .v7-art .v7-prose a.ts-cta:hover, .v7-art .v7-prose .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); color: var(--v7-hov-ink);
}
.v7-art .v7-prose a.ts-cta { font-size: 15px; padding: 12px 18px; }
.v7-art .v7-prose a.ts-cta strong { font-weight: inherit; }
.v7-art .v7-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.4em; }
.v7-art .v7-prose .wp-block-button__link { font-size: 15px; padding: 12px 18px; }
.v7-art .v7-prose .ts-table__src { font: 500 14px/1.4 var(--v7-f-ui); color: var(--v7-ink3); margin: 0 0 36px; }
@media (min-width: 1181px) { .v7-art .v7-prose .ts-table-scroll { width: min(900px, calc(100% + 160px)); } }
/* figures */
.v7-art .v7-prose figure { margin: 36px 0; }
.v7-art .v7-prose figure img { width: 100%; height: auto; display: block; background: var(--v7-fog); border-radius: 0; }
.v7-art .v7-prose figcaption, .v7-art .v7-prose .wp-element-caption { font: 500 14px/1.4 var(--v7-f-ui); color: var(--v7-ink3); margin: 10px 0 0; text-align: left; }
/* the YouTube facade · a photo plate with a play mark (A3) */
.v7-art .v7-prose .ts-yt { margin: 36px 0; }
.v7-art .v7-prose .ts-yt__btn { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--v7-fog); }
.v7-art .v7-prose .ts-yt__btn::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--v7-plate-line); pointer-events: none; }
.v7-art .v7-prose .ts-yt__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.v7-art .v7-prose .ts-yt__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(15, 16, 19, .78); transition: background var(--v7-t); }
.v7-art .v7-prose .ts-yt__play::before { content: ""; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.v7-art .v7-prose .ts-yt__btn:hover .ts-yt__play { background: #E0006C; }
.v7-art .v7-prose .ts-yt__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* further reading · bold titles and arrows over the 4 px rule */
.v7-art .v7-prose .ts-further-reading { margin: 56px 0; }
.v7-art .v7-prose .ts-further-reading :is(h2, h3) { font: 700 1.3rem/1.2 var(--v7-f-ui); margin: 0 0 12px; padding-top: 16px; border-top: 4px solid var(--v7-ink); letter-spacing: normal; }
.v7-art .v7-prose .ts-further-reading .v7-h2t::before { content: none; }
.v7-art .v7-prose .ts-further-reading ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.v7-art .v7-prose .ts-further-reading li { border-bottom: 1px solid var(--v7-rule); margin: 0; padding: 0; }
.v7-art .v7-prose .ts-further-reading li::before { content: none; }
.v7-art .v7-prose .ts-further-reading a { display: block; position: relative; padding: 14px 37px 14px 0; font: 600 1.1rem/1.35 var(--v7-f-text); text-decoration: none; transition: color var(--v7-t); }
.v7-art .v7-prose .ts-further-reading a::first-letter { text-transform: uppercase; }
.v7-art .v7-prose .ts-further-reading a::after { position: absolute; right: 0; top: 14px; }
.v7-art .v7-prose .ts-further-reading a::after { content: "\2192"; font: 700 17px/1 var(--v7-f-ui); color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); transition: transform .25s var(--v7-ease), color var(--v7-t); }
.v7-art .v7-prose .ts-further-reading a:hover { color: var(--v7-mag); }
.v7-art .v7-prose .ts-further-reading a:hover::after { transform: translateX(4px); color: var(--v7-mag); }
/* In the news · the verdict box · columns (A3) */
.v7-art .v7-prose .ts-in-the-news { margin: 44px 0; padding: 22px 26px 10px; background: var(--v7-fog); }
.v7-art .v7-prose .ts-in-the-news h3 { font: 600 14px/1 var(--v7-f-ui); color: var(--v7-ink2); margin: 0 0 16px; }
.v7-art .v7-prose .ts-in-the-news a { color: var(--v7-ink); }
.v7-art .v7-prose .ts-in-the-news a:hover { color: var(--v7-hov-ink); }
.v7-art .v7-prose .ts-verdict-box { margin: 44px 0; padding: 22px 26px 4px; border-top: 4px solid var(--v7-k); background: var(--v7-fog); }
.v7-art .v7-prose .ts-verdict-box a:not([class]):not([rel~="sponsored"]):hover, .v7-art .v7-prose .ts-in-the-news a:not([class]):hover { color: var(--v7-hov-ink); }
.v7-art .v7-prose .ts-verdict-box a[rel~="sponsored"] { color: var(--v7-ink); font-weight: 650; }
.v7-art .v7-prose .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin: 36px 0; }
.v7-art .v7-prose .wp-block-column > :first-child { margin-top: 0; }
/* code, rules, quotes */
.v7-art .v7-prose code { font: 400 .82em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--v7-fog); padding: .1em .35em; border-radius: 3px; }
.v7-art .v7-prose pre { margin: 30px 0; padding: 18px 20px; background: var(--v7-fog); overflow-x: auto; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--v7-rule); }
.v7-art .v7-prose pre code { font-size: 14px; background: none; padding: 0; white-space: pre; }
.v7-art .v7-prose hr { border: 0; border-top: 1px solid var(--v7-rule); height: 0; margin: 44px 0; opacity: 1; background: none; }
.v7-art .v7-prose blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--v7-k); font-size: 1.3rem; color: var(--v7-ink); }
/* FAQ · serif questions, the plus turns into × */
.v7-art .v7-prose .ts-faq { border-top: 1px solid var(--v7-ink); margin: 0 0 1.4em; }
.v7-art .v7-prose .ts-faq__item { border: 0; border-bottom: 1px solid var(--v7-rule); margin: 0; padding: 0; background: none; }
.v7-art .v7-prose .ts-faq__q { list-style: none; cursor: pointer; position: relative; display: block; padding: 20px 52px 20px 0; font: var(--v7-hed-w) 1.36rem/1.28 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); color: var(--v7-ink); transition: color var(--v7-t); }
.v7-art .v7-prose .ts-faq__q::-webkit-details-marker { display: none; }
.v7-art .v7-prose .ts-faq__q::marker { content: ""; }
.v7-art .v7-prose .ts-faq__q strong { font-weight: inherit; }
.v7-art .v7-prose .ts-faq__q::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat;
  transition: transform .28s var(--v7-ease);
}
.v7-art .v7-prose .ts-faq__item[open] .ts-faq__q::after { transform: rotate(45deg); }
.v7-art .v7-prose .ts-faq__q:hover { color: var(--v7-mag); }
.v7-art .v7-prose .ts-faq__a { padding: 0 0 22px; font-size: 1.15rem; }
.v7-art .v7-prose .ts-faq__a p:last-child { margin-bottom: 0; }
/* the in-text promo (news only, A5) */
.v7-art .v7-prose .ts-inline-ad { margin: 0; }
.v7-art .v7-ad--infeed { margin: 40px 0; }
.v7-art .v7-ad--infeed .v7-pr--wide .v7-pr__txt { max-width: 66%; padding: 26px 30px; }
.v7-art .v7-prose .v7-pr__h { font-size: 1.85rem; line-height: 1.04; }
.v7-art .v7-prose .v7-pr, .v7-art .v7-prose .v7-pr:hover { color: var(--v7-ink); text-decoration: none; }
.v7-art .v7-prose .v7-ad__label { font: 500 13px/1 var(--v7-f-ui); margin: 0 0 10px; }

/* ─── end of the story ─────────────────────────────────────────────── */
.v7-art__end { margin-top: 56px; }
.v7-art__end .v7-ad { margin-top: 44px; }
.v7-share--end { padding: 16px 0; border-top: 1px solid var(--v7-rule); border-bottom: 1px solid var(--v7-rule); margin: 0; }
.v7-share--end > span { font: 600 16px/1 var(--v7-f-ui); margin-right: auto; }
.v7-bio { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; margin-top: 44px; padding: 26px; background: var(--v7-fog); }
.v7-bio img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.v7-bio__n { font: var(--v7-hed-w) 1.45rem/1.1 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0 0 8px; }
.v7-bio__n a { transition: color var(--v7-t); }
.v7-bio__n a:hover { color: var(--v7-mag-on-fog); }
.v7-bio__d { font: 400 1.1rem/1.55 var(--v7-f-text); color: var(--v7-ink2); margin: 0; }
html[data-theme="dark"] .v7-art .v7-prose .ts-inline-readnext, html[data-theme="dark"] .v7-bio { box-shadow: inset 0 0 0 1px var(--v7-rule); }

/* ─── the sidebar ──────────────────────────────────────────────────── */
.v7-rail { display: flex; flex-direction: column; gap: 40px; padding-top: 108px; align-self: stretch; }
.v7-rail .v7-ad { margin: 0; }
.v7-rail__h { font: 700 16px/1.25 var(--v7-f-ui); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--v7-ink); }
.v7-rail__about { background: var(--v7-fog); padding: 22px 22px 16px; }
.v7-rail__about .v7-rail__h { border: 0; padding: 0; }
.v7-rail__about p:not(.v7-rail__h) { font: 400 1.05rem/1.5 var(--v7-f-text); color: var(--v7-ink2); margin: 10px 0 8px; }
.v7-rail__about .v7-more { margin-left: -16px; font-size: 16px; }
.v7-rail__sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 36px; }
body.admin-bar .v7-rail__sticky { top: 56px; }
.v7-rail__l { list-style: none; counter-reset: v7r; margin: 0; padding: 0; }
.v7-rail__l li { counter-increment: v7r; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 16px 0; margin: 0; border-bottom: 1px solid var(--v7-rule); }
.v7-rail__l li::before { content: counter(v7r); font: 800 2.3rem/.9 var(--v7-f-ui); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); letter-spacing: -.03em; }
.v7-rail__l a {
  font: var(--v7-hed-w) 1.14rem/1.24 var(--v7-f-hed); letter-spacing: var(--v7-hed-track);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em;
  text-decoration-skip-ink: auto; transition: text-decoration-color .22s var(--v7-ease);
}
.v7-rail__l a:hover { text-decoration-color: var(--v7-mag); }
.v7-toc ol { list-style: none; margin: 0; padding: 0; }
.v7-toc li { border-bottom: 1px solid var(--v7-rule); margin: 0; }
.v7-toc a { display: block; padding: 10px 0; font: 500 15px/1.35 var(--v7-f-ui); color: var(--v7-ink2); transition: color var(--v7-t); }
.v7-toc a:hover { color: var(--v7-hov-ink); }
.v7-rail__sticky .v7-toc { max-height: calc(100vh - 48px); overflow-y: auto;
  /* 14px of inner room on the left, shifted out by the same amount: the list
     scrolls, so it clips to its padding box, and the active entry's magenta
     rule (margin-left -14px) must fall inside it (hotfix p6b, 2026-09-28). */
  margin-left: -14px; padding-left: 14px; }
/* Current-section highlight (v7 hotfix p6, 2026-09-28): exactly one entry
   carries `aria-current="location"` at a time (single-post.php inline
   script, guides only). Magenta rule + bold ink token -- theme-aware, so
   light mode reads near-black and dark mode reads the light ink, with no
   new colour. `margin-left` compensates the added border+padding so the
   text keeps its baseline position (no reflow of the rest of the list).
   The transition is covered by A7 below (`.v7-art *` -> transition:none
   under reduced motion), so no separate @media block is needed here. */
.v7-toc a[aria-current="location"] {
  border-left: 3px solid var(--v7-mag); margin-left: -14px; padding-left: 11px; /* 3 + 11 = 14: text does not move */
  font-weight: 700; color: var(--v7-ink);
  transition: color var(--v7-t) var(--v7-ease), border-color var(--v7-t) var(--v7-ease);
}
/* the 300×250 promo (A6) */
.v7-ad--mpu .v7-pr { width: 300px; height: 250px; }
/* owner 2026-10-01: the photograph stays faintly visible behind the copy and reaches
   full strength where --v7-pr-fade (set per campaign) says the object begins */
.v7-pr--mpu .v7-pr__img { left: 0; bottom: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.22) var(--v7-pr-fade, 38%), rgba(0,0,0,.8) calc(var(--v7-pr-fade, 38%) + 18%), #000 calc(var(--v7-pr-fade, 38%) + 32%));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.22) var(--v7-pr-fade, 38%), rgba(0,0,0,.8) calc(var(--v7-pr-fade, 38%) + 18%), #000 calc(var(--v7-pr-fade, 38%) + 32%)); }
.v7-pr--mpu .v7-pr__txt { justify-content: flex-start; padding: 18px 20px; gap: 8px; }
.v7-pr--mpu .v7-pr__brand { flex-direction: column; align-items: flex-start; gap: 8px; }
.v7-pr--mpu .v7-pr__h { font-size: 1.62rem; }

/* ─── the tail · Related → Also in → Latest news / Deep dives (dated, F2) ─ */
.v7-tail { padding-bottom: 120px; }
.v7-tail .v7-sec:first-child { padding-top: 104px; }
.v7-grid3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.v7-grid3 > li > .v7-lab { margin-bottom: 10px; }
.v7-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.v7-rows > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; margin: 0; border-top: 1px solid var(--v7-rule); }
.v7-rows > li:first-child { border-top: 0; padding-top: 0; }
.v7-rows.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.v7-rows.is-two > li:nth-child(2) { border-top: 0; padding-top: 0; }
.v7-rows > li.is-text { grid-template-columns: minmax(0, 1fr); }
.v7-rows > li .v7-row__fig { aspect-ratio: 16 / 9; }
.v7-row__t { font: var(--v7-hed-w) 1.36rem/1.2 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0; text-wrap: balance; }
.v7-row__t a {
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em;
  text-decoration-skip-ink: auto; transition: text-decoration-color .22s var(--v7-ease);
}
.v7-row__t a:hover { text-decoration-color: var(--v7-mag); }
.v7-by time { white-space: nowrap; }

/* ─── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .v7-art__grid { grid-template-columns: minmax(0, 1fr); }
  .v7-rail { padding-top: 0; flex-direction: row; flex-wrap: wrap; margin-top: 48px; }
  .v7-rail > * { flex: 1 1 280px; }
  .v7-rail .v7-rail__promo { flex: 0 0 300px; }
  .v7-rail__sticky { position: static; }
  .v7-rail__sticky .v7-toc { max-height: none; }
}
@media (max-width: 960px) {
  .v7-rail__promo, .v7-rail__about { display: none; }   /* F1: one trust statement on phone */
  .v7-grid3 { gap: 24px 18px; }
  .v7-rows.is-two { grid-template-columns: minmax(0, 1fr); }
  .v7-rows.is-two > li:nth-child(2) { border-top: 1px solid var(--v7-rule); padding-top: 22px; }
}
@media (max-width: 640px) {
  .v7-art__head { padding-top: 28px; }
  .v7-crumb { margin-bottom: 22px; }
  .v7-art__h { font-size: 2.25rem; }
  .v7-art__dek { font-size: 1.18rem; }
  .v7-art__body { margin-top: 36px; }
  .v7-share .v7-ic { width: 44px; height: 44px; }
  .v7-art .v7-prose { font-size: 1.15rem; }
  .v7-art .v7-prose h2 { font-size: 1.7rem; }
  .v7-art .v7-prose > ol > li { padding-left: 48px; }
  .v7-share--end { flex-wrap: wrap; }
  .v7-share--end > span { width: 100%; margin-bottom: 8px; }
  .v7-art .v7-ad--infeed .v7-pr--wide .v7-pr__txt { max-width: 100%; padding: 18px 20px; }
  .v7-art .v7-prose .v7-pr__h { font-size: 1.62rem; }
  .v7-grid3 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .v7-grid3 > li { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .v7-grid3 > li > .v7-card__fig { grid-row: span 3; margin: 0; }
  .v7-rows > li { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  .v7-rows > li.is-text { grid-template-columns: minmax(0, 1fr); }
  .v7-row__t { font-size: 1.14rem; }
  .v7-tail { padding-bottom: var(--v7-gap-sec); }   /* A8 */
}
/* A7 · reduced motion, scoped to the article */
@media (prefers-reduced-motion: reduce) {
  .v7-art *, .v7-art *::before, .v7-art *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · PILLAR PAGES + ARCHIVES (v7 phase 4,
   docs/V7_PHASE4_HUBS_ARCHIVES_SIZING_2026-09-26.md)
   category.php renders the v7.1 mockup-A pillar page (source/mock_a.py hub(),
   pages/v7a-hub-ai.html + v7a-hub-hardware.html) inside `.v7-hub`; archive.php,
   author.php, search.php, 404.php and index.php render the supporting pages
   (source/pages_a.py, pages/v7a-arch-*.html) inside `.v7-arch`. Both on this
   sheet ALONE, like the article (functions.php ts_v7_is_hub_surface() /
   ts_v7_is_sheet_alone()). Values are the frozen v7a.css + v7a-pages.css with
   the title-wide key, the hairline rule and the solid selected tab resolved to
   their shipped state. The row, card, head, tab, label, byline, deep-dives
   list, Load more and status rules are §7's and §10's, unscoped and shared.

   PRODUCTION DELTAS from the mockup, each stated at its rule:
     P1. Class names: the mockup's `.h-*` / `.h5-*` / `.p-*` become `.v7-*`
         (h-hub → v7-hub, h-hero → v7-hero, h-tabs → v7-subtabs, h-lede →
         v7-lede, h5-cover → v7-cover, h-lead__fig → v7-cover__fig, h5-card →
         v7-cover__card, h-lead__h → v7-cover__h, h-lead__dek → v7-cover__dek,
         h-row → v7-hrow, h-card → v7-hcard, h-guides → v7-guides, p-arch →
         v7-arch, p-head/p-nokey → v7-arch__head, p-kick → v7-kick, p-count →
         v7-count, p-body → v7-arch__body, p-rows → v7-arch__rows, p-author →
         v7-author, p-search → v7-sbox, p-empty → v7-empty, p-suggest →
         v7-suggest, p-pill(s) → v7-pill(s), p-bigl/p-big → v7-bigl/v7-big,
         p-404 → v7-404); custom properties are --v7-*.
     P2. The page resets are stated at :where() (0,0,1)/(0,1,1), below every
         component class, the article's §10 pattern.
     P3. The page search pill shows focus on the pill (:focus-within, magenta
         border + 1px ring), the drawer's delta 4: the mockup took the input
         outline away and only darkened the border.
     P4. Reduced motion is scoped to these pages (the mockup's was global).
     P5. (v7 phase 5a) The pillar page carries no breadcrumb (owner amendment
         2026-09-26): the head is 80px down (56px phone) and `.v7-hero
         .v7-crumb` is gone with the crumb.
   ═════════════════════════════════════════════════════════════════════════ */

/* P2 · page resets */
.v7-hub, .v7-arch {
  background: var(--v7-paper); color: var(--v7-ink);
  font-family: var(--v7-f-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v7-hub, .v7-hub *, .v7-hub *::before, .v7-hub *::after,
.v7-arch, .v7-arch *, .v7-arch *::before, .v7-arch *::after { box-sizing: border-box; }
:where(.v7-hub, .v7-arch) :is(h1, h2, h3, h4) { font: inherit; margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
:where(.v7-hub, .v7-arch) :is(p, ul, ol, li, figure, nav) { margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
:where(.v7-hub, .v7-arch) :is(h1, h2, h3, p) { overflow-wrap: break-word; }
:where(.v7-hub, .v7-arch) a { color: inherit; text-decoration: none; }
:where(.v7-hub, .v7-arch) a:hover { color: inherit; }
:where(.v7-hub, .v7-arch) img { max-width: 100%; }
:where(.v7-hub, .v7-arch) :is(button, input) { font: inherit; }
.v7-hub .v7-head__t a:hover, .v7-arch .v7-head__t a:hover { color: var(--v7-k, var(--v7-mag)); }
html[data-theme="dark"] .v7-hub .v7-head__t a:hover, html[data-theme="dark"] .v7-arch .v7-head__t a:hover { color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) 82%, #fff); }
html body .v7-hub :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
html body .v7-arch :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v7-mag); outline-offset: 3px; border-radius: 2px;
}

/* ─── the pillar page head · the title-wide key, description, tabs ── */
/* P5 (v7 phase 5a, owner 2026-09-26 "breadcrumbs only on articles"): no crumb
   above the pillar / subtopic title, so the head starts where a supporting
   page's does, the key 80px under the masthead (56px phone) — the frozen
   page's 56px + the crumb it no longer carries. */
.v7-hub { padding-bottom: 120px; }
.v7-hero { padding-top: 80px; }
.v7-hero__h { font: var(--v7-hed-w) clamp(2.8rem, 5vw, 4.4rem)/1 var(--v7-f-hed); letter-spacing: -.022em; margin: 0 0 18px; position: relative; padding-top: 26px; width: fit-content; }
.v7-hero__h::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--v7-k); }
.v7-hero__d { font: 400 1.3rem/1.45 var(--v7-f-text); color: var(--v7-ink2); max-width: 60ch; margin: 0 0 34px; }
/* subtopic tabs · ellipse frames; selected = solid pillar colour + white (dark: page black, F7) */
.v7-subtabs { gap: 10px 10px; border-bottom: 0; padding-bottom: 0; margin: 0 0 8px; }
.v7-subtabs .v7-tab { border: 1px solid var(--v7-rule2); margin: 0; padding: 11px 18px; color: var(--v7-ink); }
.v7-subtabs .v7-tab:first-child { margin-left: 0; }
.v7-subtabs .v7-tab:hover { color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); background: color-mix(in srgb, var(--v7-k) var(--v7-hov-amt), transparent); border-color: transparent; }
.v7-subtabs .v7-tab.is-on { background: var(--v7-k); color: #fff; border-color: var(--v7-k); }
html[data-theme="dark"] .v7-subtabs .v7-tab.is-on { color: #0E0F12; }

/* ─── the lede · the cover photo with the bordered card, three photo cards ── */
.v7-lede { padding-top: 56px; }
.v7-cover { position: relative; }
.v7-cover__fig { aspect-ratio: 2.2 / 1; }
.v7-cover__fig img { animation: v7-settle 1.1s var(--v7-ease) .05s both; }
.v7-cover__card { position: relative; z-index: 2; background: var(--v7-paper); border: 1px solid var(--v7-ink); margin: -140px 60px 0; padding: 30px 34px; max-width: 820px; }
.v7-cover__h { font: var(--v7-hed-w) clamp(2rem, 3vw, 2.9rem)/1.06 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0 0 12px; text-wrap: balance; }
.v7-cover__h a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .13em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-cover__h a:hover { text-decoration-color: var(--v7-mag); }
.v7-cover__dek { font: 400 1.2rem/1.45 var(--v7-f-text); color: var(--v7-ink2); margin: 0; max-width: 54ch; }
.v7-cover__card .v7-by { color: var(--v7-ink2); }
.v7-hrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.v7-hcard { border-top: 1px solid var(--v7-rule); padding-top: 20px; }
/* F4 · "Guides in <pillar>": titles only, one column */
.v7-guides .v7-dd a { grid-template-columns: minmax(0, 1fr); }

/* ─── supporting pages · no breadcrumb, no key, the title 80px down ─────── */
.v7-arch__head { padding-top: 80px; }
.v7-arch__head .v7-hero__h { padding-top: 0; }
.v7-arch__head .v7-hero__h::before { content: none; }
.v7-kick { font: 600 16px/1 var(--v7-f-ui); color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) var(--v7-kt-amt), var(--v7-kt-mix)); margin: 0 0 18px; }
.v7-count { display: block; font: 600 16px/1 var(--v7-f-ui); color: var(--v7-ink3); margin-top: 14px; }
.v7-count--q { margin: 22px 0 0; display: block; }
.v7-arch__body { padding-top: 56px; padding-bottom: 120px; }
.v7-arch__rows > li > div > .v7-lab { display: block; margin-bottom: 8px; }
.v7-arch > .v7-wrap:last-child { padding-bottom: 120px; }
/* the author page */
.v7-author__in { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 36px; align-items: start; }
.v7-author__av { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; background: var(--v7-fog); }
.v7-author .v7-hero__h { margin-bottom: 16px; }
.v7-author .v7-hero__d { margin-bottom: 14px; }
/* the search pill · round, big (P3: focus on the pill) */
.v7-sbox { display: flex; align-items: center; gap: 10px; max-width: 720px; border: 1px solid var(--v7-rule2); border-radius: 999px; padding: 6px 6px 6px 22px; margin-top: 8px; transition: border-color var(--v7-t), box-shadow var(--v7-t); }
.v7-sbox:focus-within { border-color: var(--v7-mag); box-shadow: 0 0 0 1px var(--v7-mag); }
.v7-sbox__ic { display: grid; color: var(--v7-ink3); }
.v7-sbox__ic svg { width: 20px; height: 20px; }
.v7-sbox input[type="search"] { flex: 1; min-width: 0; height: auto; margin: 0; border: 0; border-radius: 0; outline: none; background: none; box-shadow: none; font: 500 19px/1.2 var(--v7-f-ui); color: var(--v7-ink); padding: 10px 0; }
.v7-sbox input[type="search"]::placeholder { color: var(--v7-ink3); opacity: 1; }
html body .v7-arch .v7-sbox input[type="search"]:focus-visible { outline: none; }
.v7-sbox button { font: 600 16px/1 var(--v7-f-ui); letter-spacing: normal; text-transform: none; min-height: 0; margin: 0; border: 0; border-radius: 999px; padding: 15px 24px; background: var(--v7-ink); color: var(--v7-paper); cursor: pointer; transition: background var(--v7-t), color var(--v7-t); }
.v7-sbox button:hover { background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); color: var(--v7-hov-ink); }
.v7-arch mark { background: color-mix(in srgb, var(--v7-mag) 14%, transparent); color: inherit; padding: 0 .08em; border-radius: 2px; }
/* no results + 404 · the way out */
.v7-empty h2 { font: var(--v7-hed-w) 2.3rem/1.1 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); margin: 0 0 10px; }
.v7-empty p { font: 400 1.2rem/1.5 var(--v7-f-text); color: var(--v7-ink2); margin: 0 0 56px; }
.v7-empty .v7-more { margin-left: -16px; }
.v7-suggest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding-top: 8px; }
.v7-suggest__h { font: 700 16px/1.2 var(--v7-f-ui); margin: 0 0 18px; }
.v7-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.v7-pill { font: 500 16px/1 var(--v7-f-ui); color: var(--v7-ink); padding: 11px 16px; border: 1px solid var(--v7-rule2); border-radius: 999px; transition: background var(--v7-t), color var(--v7-t), border-color var(--v7-t); }
.v7-pill:hover { border-color: transparent; color: color-mix(in srgb, var(--v7-k, var(--v7-mag)) var(--v7-kt-amt), var(--v7-kt-mix)); background: color-mix(in srgb, var(--v7-k, var(--v7-mag)) var(--v7-hov-amt), transparent); }
.v7-bigl { list-style: none; margin: 0; padding: 0; }
.v7-bigl li { padding: 16px 0; border-bottom: 1px solid var(--v7-rule); }
.v7-bigl li:first-child { padding-top: 0; }
.v7-bigl .v7-lab { display: block; margin-bottom: 8px; }
.v7-big { font: var(--v7-hed-w) 1.6rem/1.16 var(--v7-f-hed); letter-spacing: var(--v7-hed-track); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--v7-ul); text-underline-offset: .15em; transition: text-decoration-color .22s var(--v7-ease); }
.v7-big:hover { text-decoration-color: var(--v7-mag); }
.v7-404 .v7-hero__h { font-size: clamp(2.6rem, 4.6vw, 4rem); max-width: 18ch; }

/* ─── responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .v7-hrow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v7-suggest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v7-cover__card { margin: -40px 12px 0; padding: 20px; }
  /* owner 2026-10-03: the 2.2:1 band cut about a fifth of a 16:9 hero on a
     phone (a product's top went missing); phones show the whole hero. */
  .v7-cover__fig { aspect-ratio: 16 / 9; }
  .v7-hero, .v7-arch__head, .v7-author { padding-top: 56px; }
  .v7-author__in { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; }
  .v7-author__av { width: 84px; height: 84px; }
  .v7-sbox { padding-left: 16px; }
  .v7-sbox input[type="search"] { font-size: 17px; }
  .v7-sbox button { padding: 13px 18px; }
  .v7-big { font-size: 1.3rem; }
}
/* P4 · only the cover photograph settles on load; reduced motion stops it */
@media (prefers-reduced-motion: reduce) {
  .v7-hub *, .v7-hub *::before, .v7-hub *::after,
  .v7-arch *, .v7-arch *::before, .v7-arch *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · STATIC PAGES (v7 phase 5a,
   docs/V7_PHASE5_STATIC_WALL_RETIREMENT_SIZING_2026-09-26.md)
   page.php renders the nine static pages on ONE template (source/pages_a.py
   static(), pages/v7a-page-*.html) inside `.v7-art.v7-pg`, on this sheet ALONE
   (functions.php ts_v7_is_static_page() → ts_v7_is_sheet_alone()). Values are
   the frozen v7a-pages.css with the key resolved to its shipped state.

   PRODUCTION DELTAS from the mockup, each stated at its rule:
     S1. The root carries .v7-art as well as .v7-pg, so the page reads in §10's
         reading text (`.v7-art .v7-prose …`), its resets, its focus ring, its
         "On this page" list and its rail boxes: one prose system, not a copy.
         The frozen static pages share the article's `.v7-prose` too.
     S2. Class names: p-static → v7-pg, p-shead/p-nokey → v7-pg__head,
         h-hero__h → v7-pg__h, p-lede → v7-pg__lede, p-updated →
         v7-pg__updated, p-sgrid → v7-pg__grid, p-prose → v7-pg__body. How we
         evaluate keeps its live pr-eval__* names (the card), incl. p-facts →
         .pr-eval__facts.
     S2b. OWNER DEVIATION (2026-09-26): the mockup's side rail (p-rail: "On
         this page" + "Questions or a correction?") and the "More about
         techshooked" pill row (p-others) are NOT built — generic on a
         publication's static pages, and the footer links every page. The body
         is one reading column (max 760px) with the row's 120px gap before the
         footer. Guides keep their own "On this page" list (§10).
     S3. How we evaluate's modules are stated at `.v7-pg .v7-prose .pr-eval…`
         (0,3,x) so they win over §10's reading text (0,2,x), as the mockup's
         (0,2,x) won over v7-base's (0,1,x). Their numbered circles take the
         article's AA ink (84 % ink mix), not the mockup's raw magenta, which
         measures below 4.5:1 on its own 12 % tint.
     S4. Contact: the live WPForms markup, restyled — no form setting changes.
         WPForms' modern sheet reads CSS variables, so the container sets them;
         the rest is stated at `.v7-pg .v7-prose div.wpforms-container-full …`,
         above wpforms-full.min.css (≤ (0,4,2)). The mockup's Name + Email row is
         a grid on the field container. Focus is shown on the field itself (a
         magenta border + 1px ring, §11 P3), not only a darker border.
     S5. The standfirst's links carry the reading text's underline (the frozen
         p-lede left a link looking like plain text).
     S6. The rail sits under the admin bar when logged in (+32px), like §10.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── the head · no crumb, no key, the title 80px down ───────────────── */
.v7-pg__head { padding-top: 80px; }
.v7-pg__h { font: var(--v7-hed-w) clamp(2.8rem, 5vw, 4.4rem)/1 var(--v7-f-hed); letter-spacing: -.022em; margin: 0 0 22px; position: relative; width: fit-content; max-width: 100%; }
.v7-pg__lede { font: 400 1.45rem/1.5 var(--v7-f-text); color: var(--v7-ink2); max-width: 60ch; margin: 0 0 20px; text-wrap: pretty; }
.v7-pg__lede a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v7-mag) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--v7-t); }
.v7-pg__lede a:hover { color: var(--v7-mag); text-decoration-color: var(--v7-mag); }
.v7-pg__updated { font: 500 15px/1 var(--v7-f-ui); color: var(--v7-ink3); margin: 0; }
.v7-pg__updated time { white-space: nowrap; }

/* ─── the body + the sticky rail ─────────────────────────────────────── */
.v7-pg__grid { margin-top: 64px; padding-bottom: 120px; }
.v7-pg__body { max-width: 760px; }

/* ─── How we evaluate · the facts row (vertical dividers only) ───────── */
.v7-pg .pr-eval__facts { margin: 34px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1100px; }
.v7-pg .pr-eval__facts > div { padding: 4px 26px 4px 0; }
.v7-pg .pr-eval__facts > div + div { padding-left: 26px; border-left: 1px solid var(--v7-rule); }
.v7-pg .pr-eval__facts dt { font: 600 15px/1 var(--v7-f-ui); color: var(--v7-mag); margin: 0 0 10px; }
.v7-pg .pr-eval__facts dd { margin: 0; padding: 0; border: 0; font: 400 1.08rem/1.5 var(--v7-f-text); color: var(--v7-ink2); }
.v7-pg .pr-eval__facts a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v7-mag) 70%, transparent); text-underline-offset: .2em; transition: color var(--v7-t); }
.v7-pg .pr-eval__facts a:hover { color: var(--v7-mag); }

/* ─── How we evaluate · the modules, in the same system (S3) ─────────── */
.v7-pg .v7-prose .pr-eval section { margin: 0; }
.v7-pg .v7-prose .pr-eval__rules, .v7-pg .v7-prose .pr-eval__ladder { list-style: none; counter-reset: v7n; margin: 0 0 1.4em; padding: 0; }
.v7-pg .v7-prose .pr-eval__rules > li, .v7-pg .v7-prose .pr-eval__ladder > li { counter-increment: v7n; position: relative; padding: 0 0 0 54px; margin: 0 0 1em; min-height: 36px; }
.v7-pg .v7-prose .pr-eval__rules > li::before, .v7-pg .v7-prose .pr-eval__ladder > li::before {
  content: counter(v7n); position: absolute; left: 0; top: .06em; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 18px/1 var(--v7-f-ui); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--v7-k) var(--v7-kt-amt), var(--v7-kt-mix)); background: color-mix(in srgb, var(--v7-k) 12%, transparent);
}
.v7-pg .v7-prose .pr-eval__plates { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.v7-pg .v7-prose .pr-eval__plate { background: var(--v7-fog); padding: 24px 24px 8px; }
.v7-pg .v7-prose .pr-eval__route { font: 600 15px/1 var(--v7-f-ui); color: var(--v7-mag-on-fog); margin: 0 0 8px; }
.v7-pg .v7-prose .pr-eval__plate h3 { font: var(--v7-hed-w) 1.6rem/1.1 var(--v7-f-hed); margin: 0 0 10px; }
.v7-pg .v7-prose .pr-eval__scope { font-size: 1.05rem; color: var(--v7-ink2); }
.v7-pg .v7-prose .pr-eval__plate ul { list-style: none; padding: 0; margin: 0 0 1em; font-size: 1.05rem; }
.v7-pg .v7-prose .pr-eval__plate li { position: relative; padding-left: 26px; margin: 0 0 .7em; }
.v7-pg .v7-prose .pr-eval__plate li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 9px; height: 9px; background: var(--v7-mag); }
.v7-pg .v7-prose .pr-eval__note, .v7-pg .v7-prose .pr-eval__intro { color: var(--v7-ink2); }
html[data-theme="dark"] .v7-pg .v7-prose .pr-eval__plate { box-shadow: inset 0 0 0 1px var(--v7-rule); }
/* the rubric · weight bars scaled to 100 % (v7.1 F9): a 25 % weight fills a quarter */
.v7-pg .v7-prose .pr-eval__criteria { list-style: none; margin: 0 0 1.6em; padding: 0; border-top: 1px solid var(--v7-ink); }
.v7-pg .v7-prose .pr-eval__criteria > li { padding: 20px 0 18px; margin: 0; border-bottom: 1px solid var(--v7-rule); }
.v7-pg .v7-prose .pr-eval__crit { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; }
.v7-pg .v7-prose .pr-eval__weight { grid-row: span 2; font: 800 2.4rem/1 var(--v7-f-ui); color: var(--v7-mag); letter-spacing: -.03em; }
.v7-pg .v7-prose .pr-eval__weight small { font-size: .5em; margin-left: 2px; }
.v7-pg .v7-prose .pr-eval__crit h3 { margin: 0 0 6px; font: 700 1.2rem/1.3 var(--v7-f-ui); }
.v7-pg .v7-prose .pr-eval__crit p { margin: 0; font-size: 1.08rem; color: var(--v7-ink2); }
.v7-pg .v7-prose .pr-eval__bar { display: block; height: 4px; margin: 14px 0 0 112px; background: var(--v7-fog); position: relative; }
.v7-pg .v7-prose .pr-eval__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); background: var(--v7-mag); }
.v7-pg .v7-prose .pr-eval__bands dl { margin: 0; border-top: 1px solid var(--v7-rule); }
.v7-pg .v7-prose .pr-eval__bands dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--v7-rule); }
.v7-pg .v7-prose .pr-eval__bands dt { font: 700 16px/1.4 var(--v7-f-ui); margin: 0; }
.v7-pg .v7-prose .pr-eval__bands dd { margin: 0; padding: 0; border: 0; font-size: 1.08rem; }
.v7-pg .v7-prose .pr-eval__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ─── Contact · the WPForms form on a grey plate (S4) ────────────────── */
.v7-pg .v7-prose div.wpforms-container-full {
  --wpforms-field-border-radius: 10px; --wpforms-field-border-color: var(--v7-rule2); --wpforms-field-background-color: var(--v7-paper);
  --wpforms-field-text-color: var(--v7-ink); --wpforms-label-color: var(--v7-ink); --wpforms-label-error-color: var(--v7-mag-on-fog);
  --wpforms-button-border-radius: 999px; --wpforms-button-background-color: var(--v7-ink); --wpforms-button-border-color: var(--v7-ink);
  --wpforms-button-text-color: var(--v7-paper); --wpforms-button-size-margin-top: 0px;
  margin: 28px 0 40px; padding: 0;
}
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form { display: grid; gap: 18px; padding: 28px; margin: 0; background: var(--v7-fog); }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field { grid-column: 1 / -1; padding: 0; margin: 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field-name, .v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field-email { grid-column: auto; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field-label { font: 600 15px/1.2 var(--v7-f-ui); color: var(--v7-ink); margin: 0 0 8px; padding: 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-required-label { color: var(--v7-mag-on-fog); font-weight: inherit; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form :is(input[type="text"], input[type="email"], textarea) {
  display: block; width: 100%; max-width: 100%; height: auto; margin: 0;
  font: 400 17px/1.4 var(--v7-f-ui); color: var(--v7-ink); background: var(--v7-paper);
  border: 1px solid var(--v7-rule2); border-radius: 10px; padding: 13px 14px; box-shadow: none; outline: none;
  transition: border-color var(--v7-t), box-shadow var(--v7-t);
}
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form textarea { min-height: 171px; resize: vertical; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form :is(input[type="text"], input[type="email"], textarea):focus { border-color: var(--v7-mag); box-shadow: 0 0 0 1px var(--v7-mag); outline: none; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form label.wpforms-error, .v7-pg .v7-prose div.wpforms-container-full .wpforms-form em.wpforms-error { font: 500 14px/1.3 var(--v7-f-ui); color: var(--v7-mag-on-fog); margin: 6px 0 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container { padding: 0; margin: 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-submit-container { padding: 0; margin: 0; }
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form button[type="submit"] {
  justify-self: start; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 999px; padding: 16px 26px; box-shadow: none;
  font: 600 16px/1 var(--v7-f-ui); letter-spacing: normal; text-transform: none; background: var(--v7-ink); color: var(--v7-paper); cursor: pointer;
  transition: background var(--v7-t), color var(--v7-t);
}
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.v7-pg .v7-prose div.wpforms-container-full .wpforms-form button[type="submit"]:active {
  background: color-mix(in srgb, var(--v7-mag) var(--v7-hov-amt), transparent); color: var(--v7-hov-ink);
}
html[data-theme="dark"] .v7-pg .v7-prose div.wpforms-container-full .wpforms-form { box-shadow: inset 0 0 0 1px var(--v7-rule); }

/* ─── responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .v7-pg .pr-eval__facts { grid-template-columns: minmax(0, 1fr); }
  .v7-pg .pr-eval__facts > div + div { padding-left: 0; border-left: 0; }
  .v7-pg .v7-prose .pr-eval__plates, .v7-pg .v7-prose .pr-eval__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v7-pg__head { padding-top: 56px; }
  .v7-pg .v7-prose .pr-eval__crit { grid-template-columns: 70px minmax(0, 1fr); }
  .v7-pg .v7-prose .pr-eval__bar { margin-left: 90px; }
  .v7-pg .v7-prose div.wpforms-container-full .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); }
}