/* ---- fonts.css ---- */
/* Self-hosted fonts (DESIGN-SYSTEM §2: no third-party font requests).
   Files live in aff-child/fonts/. Font CHOICE per site comes from
   variables.css (--font-display / --font-body); this file only declares
   the families the fleet hosts. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700; /* variable font */
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 600;
  font-stretch: 125%;
  font-display: swap;
  src: url('fonts/archivo-600.woff2') format('woff2');
}

/* ---- variables.css ---- */
/* GENERATED from instance 002 (outgearly.com) by sitesetup.sh v2 — do not hand-edit. */
:root {
  --ink: #1E293B;  --brand: #2F5D3A;  --cta: #E8871E;  --cta-text: #3A2101;
  --surface: #FAF9F6;  --body: #24292F;  --border: #E5E1D8;
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 8px;  --space-unit: 1rem;  --content-width: 720px;
}

/* ---- main.css ---- */
/* ============================================================
   aff-child / main.css — the fleet design system (niche-agnostic)
   RULE: no literal colors, fonts, or niche terms in this file.
   Every value reads a token from variables.css. A hex here is a bug.
   ============================================================ */

/* ---------- base ---------- */
/* The design never scrolls horizontally (perf baseline). clip guarantees a
   stray overflowing element can't widen the document and leave chrome bands
   (header/nav/hero/footer at 100%) looking cut short with a white strip. */
html { overflow-x: clip; }
body {
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px, but scales with the user's text-size setting */
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-branding .main-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
/* size-specific tracking + inverse leading: large type tightens, body stays
   loose (1.65) at ~0 tracking; small UPPERCASE labels keep positive tracking */
h1 { line-height: 1.08; letter-spacing: -0.02em; }
h2 { line-height: 1.15; letter-spacing: -0.01em; }
h3, h4, h5, h6 { line-height: 1.25; letter-spacing: 0; }
.site-branding .main-title { line-height: 1.1; letter-spacing: -0.015em; }

.entry-content a,
.entry-summary a,
.comment-content a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand), transparent 55%);
  text-underline-offset: 2px;
}
.entry-content a:hover {
  color: color-mix(in srgb, var(--brand), var(--ink) 30%);
  text-decoration-color: currentColor;
}

/* readable measure inside posts/pages */
.entry-content > * { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: calc(var(--content-width) + 240px); }
.entry-content > .alignfull { max-width: none; }
/* DESKTOP ONLY: GP sizes alignwide as calc(100% + padding) with negative
   margins that bleed into the article padding. Where we remove that padding
   (desktop), neutralize BOTH halves — width AND margins — or it overflows.
   On mobile GP's stock pairing is correct: leave it alone entirely. */
/* ALL WIDTHS since aff-components 0.10.2: that release strips the group
   inner container whose padding used to cancel GP's phone bleed, so on
   phones the bleed must be neutralized here too (owner QA 2026-10-14:
   category cards ran edge to edge). */
.entry-content > .wp-block-group.alignwide {
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* vertical rhythm */
.entry-content > * + * { margin-top: calc(var(--space-unit) * 1.25); }
.entry-content h2 { margin-top: calc(var(--space-unit) * 2.5); }
.entry-content h3 { margin-top: calc(var(--space-unit) * 1.75); }

/* ---------- header / nav chrome ---------- */
/* The NAV is the sticky element (A1 spec) — the title banner scrolls away,
   the links stay. */
.site-header {
  background: var(--ink);
}
.main-navigation {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink), transparent 70%);
}
.site-header .site-branding .main-title a,
.site-header .site-branding .main-title a:hover {
  color: var(--surface);
  font-family: var(--font-display);
}
.site-header .site-description { color: color-mix(in srgb, var(--surface), var(--ink) 35%); }

.main-navigation,
.main-navigation .navigation-branding .main-title a {
  background: var(--ink);
  color: var(--surface);
}
.main-navigation .main-nav ul li a {
  color: var(--surface);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: var(--brand);
  color: var(--surface);
}
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .mobile-bar-items a {
  color: var(--surface);
  background: var(--ink);
}
.main-navigation ul ul { background: var(--ink); }

/* ---------- footer chrome ---------- */
.site-footer,
.footer-widgets {
  background: var(--ink);
  color: color-mix(in srgb, var(--surface), var(--ink) 25%);
}
.site-footer a,
.footer-widgets a {
  color: color-mix(in srgb, var(--brand), var(--surface) 45%);
  text-decoration: none;
}
.site-footer a:hover,
.footer-widgets a:hover { color: var(--surface); }
.site-info { background: color-mix(in srgb, var(--ink), #000 20%); color: color-mix(in srgb, var(--surface), var(--ink) 35%); }

/* ---------- hero overlay treatment (uniform featured imagery) ---------- */
.aff-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.aff-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aff-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ink), transparent 55%) 0%,
    color-mix(in srgb, var(--brand), transparent 70%) 100%);
  pointer-events: none;
}

/* ---------- buttons: generic vs CTA ---------- */
/* generic buttons = brand (never the CTA color) */
.entry-content .wp-block-button__link,
button:not(.menu-toggle),
input[type="submit"] {
  background: var(--brand);
  color: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
}

/* CTA color is reserved for affiliate buttons ONLY (AAWP + aff-components) */
.aawp .aawp-button,
.aawp a.aawp-button,
.aawp a.aawp-button:visited,
.aff-cta {
  background: var(--cta) !important;
  border-color: color-mix(in srgb, var(--cta), #000 12%) !important;
  color: var(--cta-text) !important;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.aawp .aawp-button:hover,
.aff-cta:hover {
  background: color-mix(in srgb, var(--cta), #000 10%) !important;
  color: var(--cta-text) !important;
}

/* ---------- AAWP boxes/tables themed to tokens + zero CLS ---------- */
.aawp {
  /* reserve space so the CTA never moves as live data loads */
  min-height: 230px;
  contain: layout;
}
.aawp .aawp-product,
.aawp .aawp-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.aawp .aawp-product__title,
.aawp .aawp-product__title a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}
.aawp .aawp-product__price--current { color: var(--body); font-weight: 700; }
/* Amazon marketing copy never renders — belt-and-braces with the
   description_items=0 filter in functions.php. Boxes show ONLY:
   image, linked title, price+prime, CTA. */
.aawp .aawp-product__description { display: none !important; }
@media (max-width: 640px) {
  .aawp { min-height: 320px; } /* stacked mobile layout is taller */
}

/* ---------- tables (comparison-friendly) ---------- */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
.entry-content th {
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-weight: 600;
  text-align: left;
  padding: calc(var(--space-unit) * 0.6);
}
.entry-content td {
  border: 1px solid var(--border);
  padding: calc(var(--space-unit) * 0.6);
  background: #fff;
}
.entry-content tr:nth-child(even) td { background: color-mix(in srgb, #fff, var(--surface) 60%); }

/* ---------- quotes, meta, misc ---------- */
.entry-content blockquote {
  border-left: 4px solid var(--brand);
  background: color-mix(in srgb, var(--surface), #fff 40%);
  padding: var(--space-unit) calc(var(--space-unit) * 1.25);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
}
.entry-meta, .posted-on, .byline { color: color-mix(in srgb, var(--body), var(--surface) 35%); font-size: 0.875rem; }
/* post meta hidden (A1 round-1) EXCEPT the date — surfaced 2026-10-13 as
   an owner trust-signal (external review item 5): posted-on shows beside
   the reading time; author byline stays in the author box, not the header */
.entry-header .entry-meta > *:not(.posted-on),
footer.entry-meta,
.cat-links, .tags-links { display: none; }
.entry-header .posted-on { display: inline-block; }
/* comments disabled portfolio-wide — remove all comment UI */
.comments-area, .comment-respond, #comments { display: none; }
.entry-title a { color: var(--ink); }
.entry-title a:hover { color: var(--brand); }
hr, .wp-block-separator { border-color: var(--border); }

/* ---------- breadcrumbs ---------- */
.aff-breadcrumbs {
  max-width: var(--content-width);
  margin: var(--space-unit) auto 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--body), var(--surface) 35%);
}
/* underlined, not colour alone (WCAG link-in-text-block) */
.aff-breadcrumbs a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand), transparent 55%);
  text-underline-offset: 2px;
}
.aff-breadcrumbs a:hover { text-decoration-color: currentColor; }
@media (max-width: 768px) {
  .aff-breadcrumbs { padding: 0 30px; } /* match GP's phone content gutter */
}

/* ---------- press feedback (apple-design subset: respond on press) ---------- */
.aawp .aawp-button, .aff-cta-wrap a, .aff-ptable__btn,
.entry-content .wp-block-button__link,
.aff-home-hero .wp-block-button__link { transition: transform 100ms ease-out; }
.aawp .aawp-button:active, .aff-cta-wrap a:active, .aff-ptable__btn:active,
.entry-content .wp-block-button__link:active,
.aff-home-hero .wp-block-button__link:active { transform: scale(0.97); }
a.aff-card:active { transform: translateY(-1px) scale(0.98); }

/* ---------- preference fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .aff-card, .aawp .aawp-button, .aff-cta-wrap a,
  .entry-content .wp-block-button__link,
  .aff-home-hero .wp-block-button__link { transition: none; }
  .aff-card:hover, a.aff-card:active,
  .aawp .aawp-button:active, .aff-cta-wrap a:active,
  .entry-content .wp-block-button__link:active,
  .aff-home-hero .wp-block-button__link:active { transform: none; }
}
@media (prefers-contrast: more) {
  .aff-card, .aff-rubric, .aawp .aawp-product,
  .aff-disclosure, .aff-hub-empty { border-color: var(--body); }
  .aff-card__blurb, .aff-author__bio, .aff-reading-time,
  .aff-hub-guides__meta, .aff-disclosure, .entry-meta { color: var(--body); }
}

/* ---------- accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.aawp .aawp-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand), var(--surface) 20%);
  outline-offset: 2px;
}
.site-header a:focus-visible,
.main-navigation a:focus-visible {
  outline-color: var(--surface);
}

/* ---------- homepage ---------- */
/* Collapse ALL chrome above the hero: hidden H1's wrapper, article padding,
   container margins — the hero must sit flush under the nav (no white bar). */
.home.page .entry-header { display: none; }
/* vertical collapse only is global (kills the white bar above the hero on
   all viewports); SIDE padding stays GP-stock on mobile — GP's alignwide/full
   bleed system depends on it */
.home.page .inside-article { padding-top: 0; padding-bottom: 0; background: transparent; }
.home.page .entry-content { margin-top: 0; }
.home.page .entry-content > .aff-home-hero:first-child { margin-top: 0; }
/* GP's phone margin on .site-main left a white strip above the hero (owner, 2026-10-15) */
.home.page .site-main { margin-top: 0; }
@media (min-width: 769px) {
  .home.page .site-main { margin: 0; }
  .home.page .inside-article { padding: 0; }
}

/* One shared content edge for all homepage sections: every section fills
   the GP content container itself (~1100px) — a single true left edge.
   DESKTOP ONLY: on mobile the GP defaults (inner padding, natural widths)
   are what keep content off the screen edges and the grid single-column.
   Article pages keep the 720px reading measure. */
@media (min-width: 769px) {
  /* :not(.alignfull) is CRITICAL — the hero's full-bleed depends on GP's
     breakout margins; forcing margin:auto on it boxes the hero (regression
     caught 2026-07-31). */
  .home.page .entry-content > :not(.alignfull) {
    max-width: min(1080px, 100%); /* one shared edge; can never exceed the viewport */
    margin-left: auto;
    margin-right: auto;
  }
  .home.page .entry-content > .alignfull { max-width: none; }

  /* GP injects 40px padding + its own max-width into group inner containers —
     that indents grids relative to section headings. */
  .entry-content .wp-block-group__inner-container { padding: 0; max-width: none; }
}

.aff-home-hero {
  background: linear-gradient(150deg, var(--ink) 0%, color-mix(in srgb, var(--ink), var(--brand) 55%) 100%);
  color: var(--surface);
  text-align: center;
  padding: calc(var(--space-unit) * 4) var(--space-unit);
  margin-top: 0;
}
.aff-home-hero h1 { color: var(--surface); font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.05; margin: 0 auto; max-width: 720px; }
.aff-home-hero p { color: color-mix(in srgb, var(--surface), var(--ink) 20%); max-width: 560px; margin: var(--space-unit) auto; }
.aff-home-hero .wp-block-buttons { justify-content: center; }

/* hero buttons: white outline — presence on the dark gradient without
   touching CTA orange (reserved) or brand green (melts into the gradient) */
.aff-home-hero .wp-block-button__link {
  background: transparent !important;
  color: var(--surface) !important;
  border: 2px solid var(--surface) !important;
  border-radius: var(--radius) !important;
  font-weight: 600;
}
.aff-home-hero .wp-block-button__link:hover,
.aff-home-hero .wp-block-button__link:focus {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* ============ mad article style pack — M1 (2026-10-13) ============
   Theme-only restyles per fleet-hq
   contracts/reference/mad-article-style-pack-reference.md:
   S1 bordered section h2s, S6 content-h4 section labels.
   Zero content change — restyles every live article on deploy.
   Scoped to single posts; hub/legal pages keep their chrome. */

/* pack-wide derived + semantic constants (fleet-defined per reference):
   shadow tint derives from brand so every site's offset shadows match
   its palette; pro/con are semantic, identical on every site */
:root {
  --shadow-tint: color-mix(in srgb, var(--brand) 18%, var(--surface));
  --pro: #1D6B3C;
  --con: #A03B2E;
}

.single-post .entry-content h2 {
  font-weight: 700;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 10px;
}
.single-post .entry-content h4 {
  font-weight: 800;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============ mad article style pack — Phase C: M3 registry CSS ============
   The 9-class aff-* registry (output-contract amendment 2026-10-13).
   Phase C puts these classes on CORE blocks; every treatment lives here.
   Source geometry: contracts/reference/mad-article-style-pack-reference.md */

/* aff-eyebrow — small-caps accent kicker above a section h2 (S1) */
/* the repeated class is a deliberate specificity bump to (0,4,1): block
   paragraphs carry wp-block-paragraph, and a core/GP spacing rule
   (.entry-content > [class*="wp-block-"]:not(...):not(...)) hits (0,4,0)
   and was overriding the 4px — found by live-DOM rule walk, 2026-10-13 */
.entry-content p.aff-eyebrow.aff-eyebrow.aff-eyebrow {
  margin-bottom: 4px;
  font-weight: 800; font-size: 0.78em; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand);
}
.entry-content .aff-eyebrow + h2 { margin-top: 0; }

/* aff-h2-chip — chip-style heading (BEFORE YOU BUY, S1 variant) */
.single-post .entry-content h2.aff-h2-chip {
  display: inline-block; background: var(--ink); color: var(--surface);
  font-size: 1em; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 18px; border-bottom: 0;
}

/* aff-facts-box — bordered offset-shadow box (S3) */
.entry-content .aff-facts-box {
  box-sizing: border-box;
  border: 3px solid var(--ink);
  box-shadow: 9px 9px 0 var(--shadow-tint);
  padding: 24px 24px 8px; margin: 0 auto 48px;
}
.aff-facts-box p { margin: 0 0 16px; }
.aff-facts-box p > strong:first-child::before {
  content: ''; display: inline-block; width: 9px; height: 9px;
  background: var(--brand); transform: rotate(45deg); margin: 0 10px 1px 0;
}

/* aff-grid-2 — responsive two-column grid (S3 inner / S8) */
.entry-content .aff-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(280px, 40%), 1fr));
  gap: 22px 40px; margin: 26px auto 40px;
}
/* the facts box holds FLAT heading/body paragraph pairs, so a 2-col grid
   splits each pair across columns (owner QA 2026-10-13: heading left,
   body right = wrong). The approved original stacks them — block flow
   here; aff-grid-2 stays a real grid where children are card wrappers. */
.entry-content .aff-facts-box.aff-grid-2 { display: block; margin: 0 auto 48px; }
/* S8 bordered cards + pro/con headers (header = card's first paragraph) */
.entry-content .aff-grid-2 > .wp-block-group {
  border: 2px solid var(--ink); padding: 20px 22px;
}
.entry-content .aff-grid-2 > .wp-block-group > p:first-child {
  font-weight: 800; font-size: 0.82em; letter-spacing: 0.1em;
  text-transform: uppercase; padding-bottom: 8px; margin-top: 0;
}
.entry-content .aff-grid-2 > .wp-block-group:has(.aff-list-pro) > p:first-child {
  color: var(--pro); border-bottom: 2px solid var(--pro);
}
.entry-content .aff-grid-2 > .wp-block-group:has(.aff-list-con) > p:first-child {
  color: var(--con); border-bottom: 2px solid var(--con);
}

/* aff-list-diamond — diamond-bullet list (S7) */
.entry-content ul.aff-list-diamond { list-style: none; padding-left: 0; }
.entry-content .aff-list-diamond li {
  position: relative; padding-left: 19px; margin-bottom: 9px;
}
.entry-content .aff-list-diamond li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 9px; background: var(--brand); transform: rotate(45deg);
}

/* aff-list-pro / aff-list-con — +/− lists (S8) */
.entry-content ul.aff-list-pro, .entry-content ul.aff-list-con {
  list-style: none; padding-left: 0;
}
.entry-content .aff-list-pro li, .entry-content .aff-list-con li {
  margin-bottom: 9px; padding-left: 1.4em; text-indent: -1.4em;
}
.entry-content .aff-list-pro li::before,
.entry-content .aff-list-con li::before {
  display: inline-block; width: 1.4em; text-indent: 0; font-weight: 800;
}
.entry-content .aff-list-pro li::before { content: '+'; color: var(--pro); }
.entry-content .aff-list-con li::before { content: '\2212'; color: var(--con); }

/* aff-cards-numbered — numbered card grid, CSS counters (S9) */
.entry-content .aff-cards-numbered {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(280px, 40%), 1fr));
  gap: 28px 40px; margin: 26px auto 40px; counter-reset: aff-card;
}
.entry-content .aff-cards-numbered > * {
  border-top: 3px solid var(--ink); padding-top: 12px;
  counter-increment: aff-card; margin-top: 0;
}
.entry-content .aff-cards-numbered > *::before {
  content: counter(aff-card, decimal-leading-zero);
  display: block; margin: 0 0 2px; font-size: 1.7em; font-weight: 800;
  line-height: 1; color: var(--brand);
}
.entry-content .aff-cards-numbered > * > p:first-of-type {
  font-weight: 700; letter-spacing: 0.02em; margin: 0 0 7px;
}
.entry-content .aff-cards-numbered > * > p { margin: 0; }

/* aff-rules — top-rule rows: criteria, exclusions, FAQ (S10/S11) */
.entry-content .aff-rules > p {
  border-top: 1px solid var(--ink); padding: 12px 0 2px; margin: 0 0 10px;
}
.entry-content .aff-rules > h3 {
  border-top: 1px solid var(--ink); padding-top: 14px; margin: 0 0 6px;
}
.entry-content .aff-rules > h3 > strong:first-child { color: var(--brand); font-weight: 800; }
.entry-content .aff-rules p em {
  font-size: 0.88em; font-style: italic;
  color: color-mix(in srgb, var(--body), var(--surface) 30%);
}

/* verdict closer — rotated accent square after the article's last paragraph (S11) */
.single-post .entry-content > p:last-child::after {
  content: ''; display: inline-block; width: 10px; height: 10px;
  background: var(--brand); transform: rotate(45deg); margin-left: 10px;
}

/* ============ style pack alignment, round 2 (2026-10-13) ============
   Shrink-to-fit (inline-block) children of .entry-content fall out of
   the auto-margin centering that block children get (same family as the
   0.6.1 group fix). Give them the column's left offset explicitly so
   they sit flush on the content column edge like the original design. */
.single-post .entry-content > h2.aff-h2-chip,
.entry-content > p.aff-spec-table__heading {
  margin-left: max(0px, calc((100% - var(--content-width)) / 2));
  margin-right: 0;
}

/* quiet ink name links in component product slots — outrank the theme's
   generic .entry-content a underline rule */
.entry-content .aff-spec-stack__name a,
.entry-content .aff-vcards__name a,
.entry-content .aff-rbox__name a {
  color: var(--ink);
  text-decoration: none;
}

/* BEFORE YOU BUY refinements (owner QA 2026-10-13, match the original):
   the chip sits ATTACHED to its facts box — chip bottom meets the box's
   top border — and a heading-only paragraph (lone <strong>) inside the
   box is a label line: tight to its body text below. */
.single-post .entry-content > h2.aff-h2-chip { margin-bottom: 0; }
.entry-content h2.aff-h2-chip + .aff-facts-box { margin-top: 0 !important; }
.aff-facts-box p:has(> strong:only-child) { margin-bottom: 6px; }

/* review headings (owner QA 2026-10-13): the per-product h3s carry the
   jump-index anchors, so id^="review-" targets exactly them. Brand
   underline = the pack's sub-level marker (h2 keeps the heavy ink rule),
   so the heading hierarchy reads at a glance. */
.single-post .entry-content h3[id^="review-"] {
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
}

/* ============ homepage hero photo (2026-10-14) ============
   Active only when the site has a hero photo (body.has-hero-photo, set by
   functions.php from the aff_hero_image option). The token gradient sits
   OVER the photo so every site's hero is on-palette and the white text
   keeps its contrast whatever the photo is; without a photo the plain
   gradient hero above is untouched. */
.has-hero-photo .aff-home-hero {
  background-color: var(--ink);
  background-image:
    linear-gradient(150deg,
      color-mix(in srgb, var(--ink) var(--hero-overlay-a, 74%), transparent) 0%,
      color-mix(in srgb, color-mix(in srgb, var(--ink), var(--brand) 55%) var(--hero-overlay-b, 55%), transparent) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: var(--hero-position, center);
  background-repeat: no-repeat;
  padding-top: calc(var(--space-unit) * 5.5);
  padding-bottom: calc(var(--space-unit) * 5.5);
}
.has-hero-photo .aff-home-hero p { color: var(--surface); }
/* soft ink halo keeps the text legible over busy parts of any photo */
.has-hero-photo .aff-home-hero h1,
.has-hero-photo .aff-home-hero p { text-shadow: 0 1px 14px color-mix(in srgb, var(--ink) 70%, transparent); }

/* ============ core tables (2026-10-14) ============
   Phase C's Learn "comparisons" format emits plain core/table blocks (no
   classes, per the output contract). Same visual family as the spec
   table: ink header row, hairline rows, scrolls sideways on phones. Emit
   a <thead> so the header row gets the ink treatment. */
.entry-content .wp-block-table { margin: calc(var(--space-unit) * 1.25) 0; overflow-x: auto; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content .wp-block-table th {
  background: var(--ink); color: var(--surface); text-align: left;
  font-weight: 600; padding: 10px 12px; border: 0;
}
.entry-content .wp-block-table td {
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); vertical-align: top;
}
.entry-content .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface), var(--border) 35%); }
.entry-content .wp-block-table figcaption {
  font-size: 0.85em; font-style: italic; margin-top: 6px;
  color: color-mix(in srgb, var(--body), var(--surface) 30%);
}

/* ======================= LEVEL-2 FOOTPRINT OPTIONS =======================
   Owner decision 2026-10-14. Each block below is one per-site option,
   switched on by a body class from functions.php. All selectors are
   descendant-based, so a QA page can preview several options side by
   side by wrapping sections in the same classes. No class = the
   original look. */

/* ---- HEADER: inline (one light row; GP nav-float-right supplies layout) */
.aff-header--inline .site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.aff-header--inline .site-header .site-branding .main-title a,
.aff-header--inline .site-header .site-branding .main-title a:hover { color: var(--ink); }
.aff-header--inline .site-header .site-description { color: color-mix(in srgb, var(--body), var(--surface) 30%); }
.aff-header--inline .main-navigation,
.aff-header--inline .main-navigation .navigation-branding .main-title a {
  background: transparent; color: var(--ink); position: static; box-shadow: none;
}
.aff-header--inline .main-navigation .main-nav ul li a { color: var(--ink); }
.aff-header--inline .main-navigation .main-nav ul li:hover > a,
.aff-header--inline .main-navigation .main-nav ul li.sfHover > a,
.aff-header--inline .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: transparent; color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand);
}
.aff-header--inline .main-navigation ul ul { background: var(--surface); border: 1px solid var(--border); }
.aff-header--inline .main-navigation ul ul li a { color: var(--ink); }

/* ---- HEADER: masthead (centred wordmark, ruled menu; GP centre alignment) */
.aff-header--masthead .site-header { background: var(--surface); text-align: center; }
.aff-header--masthead .site-header .site-branding .main-title a,
.aff-header--masthead .site-header .site-branding .main-title a:hover { color: var(--ink); }
.aff-header--masthead .site-header .site-branding .main-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.aff-header--masthead .site-header .site-description {
  color: color-mix(in srgb, var(--body), var(--surface) 25%);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem;
}
.aff-header--masthead .main-navigation,
.aff-header--masthead .main-navigation .navigation-branding .main-title a {
  background: var(--surface); color: var(--ink);
  border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink);
  box-shadow: none;
}
.aff-header--masthead .main-navigation .main-nav > ul { justify-content: center; }
.aff-header--masthead .main-navigation .main-nav ul li a { color: var(--ink); }
.aff-header--masthead .main-navigation .main-nav ul li:hover > a,
.aff-header--masthead .main-navigation .main-nav ul li.sfHover > a,
.aff-header--masthead .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: transparent; color: var(--brand);
}
.aff-header--masthead .main-navigation ul ul { background: var(--surface); border: 1px solid var(--border); text-align: left; }
.aff-header--masthead .main-navigation ul ul li a { color: var(--ink); }

/* ---- CARDS: raised (no border, soft shadow, rounder) */
.aff-cards--raised .aff-card {
  border-color: transparent; border-radius: calc(var(--radius) * 2.5);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 16%, transparent);
}
.aff-cards--raised .aff-card:hover {
  border-color: transparent; transform: translateY(-4px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 22%, transparent);
}
.aff-cards--raised .aff-vcards__card {
  border-color: transparent; border-radius: calc(var(--radius) * 2.5);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 16%, transparent);
  overflow: hidden; /* clips the bleeding badge to the rounded corner */
}
.aff-cards--raised .aff-vcards__badge { margin-left: -12px; }
.aff-cards--raised .aff-rbox {
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- CARDS: ruled (square, no box, heavy top rule — editorial) */
.aff-cards--ruled .aff-card {
  background: transparent; border: 0; border-top: 3px solid var(--ink);
  border-radius: 0; padding-left: 0; padding-right: 0;
}
.aff-cards--ruled .aff-card:hover { border-top-color: var(--brand); transform: none; }
.aff-cards--ruled .aff-vcards__card {
  background: transparent; border: 0; border-top: 3px solid var(--ink);
  border-radius: 0; box-shadow: none;
}
.aff-cards--ruled .aff-rbox { border-radius: 0; box-shadow: none; }

/* ---- BUTTON SHAPE: square (rounded = original; "pill" dropped after
   owner QA — today's buttons are already near-pill, so it added nothing) */
.aff-btn--square .aawp .aawp-button, .aff-btn--square .aff-cta-wrap a,
.aff-btn--square .aff-vcards__btn a, .aff-btn--square .aff-rbox__btn a, .aff-btn--square .aff-ptable__btn,
.aff-btn--square .aff-home-hero .wp-block-button__link { border-radius: 2px !important; }

/* ---- BUTTON SHADOW: soft / offset (none = original) */
.aff-btnshadow--soft .aawp .aawp-button, .aff-btnshadow--soft .aff-cta-wrap a,
.aff-btnshadow--soft .aff-vcards__btn a, .aff-btnshadow--soft .aff-rbox__btn a, .aff-btnshadow--soft .aff-ptable__btn {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 25%, transparent) !important;
}
.aff-btnshadow--offset .aawp .aawp-button, .aff-btnshadow--offset .aff-cta-wrap a,
.aff-btnshadow--offset .aff-vcards__btn a, .aff-btnshadow--offset .aff-rbox__btn a, .aff-btnshadow--offset .aff-ptable__btn {
  box-shadow: 3px 3px 0 var(--ink) !important;
}

/* ---- HOMEPAGE: compact hero for the "featured" arrangement */
.aff-home-hero.aff-home-hero--compact { padding-top: calc(var(--space-unit) * 2.5); padding-bottom: calc(var(--space-unit) * 2.5); }
.has-hero-photo .aff-home-hero.aff-home-hero--compact { padding-top: calc(var(--space-unit) * 3.5); padding-bottom: calc(var(--space-unit) * 3.5); }

/* ---- light headers on phones (owner QA 2026-10-14). The base theme paints
   GP's phone menu button ink; on the light headers it must stay light. */
.aff-header--inline .main-navigation .menu-toggle,
.aff-header--inline .main-navigation .menu-toggle:hover,
.aff-header--inline .mobile-menu-control-wrapper .menu-toggle,
.aff-header--inline .mobile-menu-control-wrapper .menu-toggle:hover,
.aff-header--masthead .main-navigation .menu-toggle,
.aff-header--masthead .main-navigation .menu-toggle:hover {
  background: transparent; color: var(--ink);
}
@media (max-width: 768px) {
  .aff-header--inline .inside-header { padding-top: 12px; padding-bottom: 12px; }
  .aff-header--inline .site-header .site-description { display: none; }
  /* one row on phones: wordmark left, menu button right; the opened menu
     takes the full width underneath */
  /* grid, not flex: GP gives the nav display:block at full width, which
     wrapped it onto its own row in a flex row (Phase C QA, round 2) */
  .aff-header--inline .inside-header {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; text-align: left;
  }
  .aff-header--inline .site-header .site-branding { grid-column: 1; margin: 0 !important; }
  .aff-header--inline .site-header #site-navigation { grid-column: 2; width: auto !important; margin: 0 !important; }
  .aff-header--inline .site-header #site-navigation .inside-navigation { justify-content: flex-end; }
  .aff-header--inline .site-header #site-navigation .menu-toggle { flex-grow: 0; padding: 0 12px; }
  /* the button stays put when the menu opens; only the list drops below,
     full width, under the header (owner: no jump) */
  .aff-header--inline .inside-header { position: relative; }
  /* GP positions the nav and its inner wrapper; unposition both so the
     opened list measures against the full header, not the button column */
  .aff-header--inline .site-header #site-navigation,
  .aff-header--inline .site-header #site-navigation .inside-navigation { position: static !important; }
  .aff-header--inline .site-header #site-navigation.toggled .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 12%, transparent); z-index: 99;
  }
  .aff-header--inline .main-navigation.toggled .main-nav > ul,
  .aff-header--masthead .main-navigation.toggled .main-nav > ul { background: var(--surface); }
  .aff-header--masthead .main-navigation .menu-toggle { width: 100%; text-align: center; }
  .aff-header--masthead .inside-header { padding-top: 20px; padding-bottom: 16px; }
}

/* ---- homepage: a section with no guides yet is hidden, heading and all
   (owner QA 2026-10-14). Hub pages keep their "on the way" message. */
.home .entry-content > .wp-block-heading:has(+ .aff-hub-empty),
.home .entry-content > .aff-hub-empty { display: none; }

/* featured image (Phase C share card) runs edge to edge on phones instead of
   sitting inside the article's 30px padding (external review 2026-10-14) */
@media (max-width: 768px) {
  .single-post .inside-article > .featured-image {
    margin-left: -30px; margin-right: -30px; max-width: none;
  }
  .single-post .inside-article > .featured-image img { width: 100%; height: auto; }
}

/* in-article images (core/image, allowed from 2026-10-14): full column
   width, rounded like the cards, quiet caption */
.entry-content .wp-block-image img { height: auto; border-radius: var(--radius); }
.entry-content .wp-block-image figcaption {
  font-size: 0.85em; text-align: center; margin-top: 6px;
  color: color-mix(in srgb, var(--body), var(--surface) 30%);
}

/* AAWP product images carry no width/height; reserve a square so boxes and
   tables don't shift while images load (layout shift / CLS, Lighthouse backlog) */
.aawp .aawp-product__image, .aawp .aawp-product__img { aspect-ratio: 1 / 1; object-fit: contain; height: auto; }