/* ---- 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');
}

/* Instance 003 (pickleballsportinggoods.com), owner OK at gate 1 2026-10-21:
   Sora + Public Sans, SIL OFL, latin subsets from Google Fonts. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800; /* variable font */
  font-display: swap;
  src: url('fonts/sora-var.woff2') format('woff2');
}

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

/* Aquarium Tales (instance 004, owner pick 2026-10-23): both SIL OFL, Latin subset, variable */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('fonts/nunito-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-var.woff2') format('woff2');
}

/* Notebook design family (2026-10-23): SIL OFL, Latin subset */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/ibm-plex-sans-var.woff2') format('woff2'); }

/* Sporty design family (2026-10-23): SIL OFL, Latin subset */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-800i.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }

/* Magazine design family (2026-10-23): SIL OFL, Latin subset */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/fraunces-var.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('fonts/fraunces-italic-var.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-var.woff2') format('woff2'); }

/* Lab/Spec design family (2026-10-23): SIL OFL, Latin subset */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); }
/* Sporty: metric fallbacks (no layout shift when the web fonts swap in). Arial and Liberation Sans share widths;
   size-adjust = measured Barlow width / Arial width (2026-10-23: condensed 800 0.694, 400 0.968, 600 0.915). */
@font-face { font-family: 'Barlow Condensed Fallback'; font-weight: 500 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 69.4%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Helvetica'), local('Roboto'), local('Roboto-Regular'); size-adjust: 96.8%; }
@font-face { font-family: 'Barlow Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 91.5%; }

/* ---- variables.css ---- */
/* GENERATED from instance 003 (pickleballsportinggoods.com) by sitesetup.sh v2 — do not hand-edit. */
:root {
  --ink: #102542;  --brand: #1D4FB8;  --cta: #F2C230;  --cta-text: #231A00;
  --surface: #F6F8FA;  --body: #1F2933;  --border: #DDE3EA;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Public Sans", 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: 999px !important; /* all Amazon buttons are pills (owner 2026-10-19) */
  text-shadow: none !important;
  box-shadow: none !important;
}
.entry-content a.aff-cta { text-decoration: none !important; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; box-sizing: border-box; } /* standalone CTA links (review closers): button, not underlined text */
.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: 14px 24px; margin: 20px auto 28px; /* side by side: equal heights (clean bottom edge); stacked on phones: each fits its content */
}
/* 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: 14px 16px 12px;
}
.entry-content .aff-grid-2 > .wp-block-group ul { margin-bottom: 0; }
.entry-content .aff-grid-2 > .wp-block-group li { margin: 4px 0; line-height: 1.45; }
.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) */
/* aff-components appends the price note, the related list and the author box
   after the article text: the closer goes on the last real paragraph, i.e.
   the one right before whichever of those comes first */
.single-post .entry-content > p:last-child:not(.aff-price-note)::after,
.single-post .entry-content > p:not(.aff-price-note):has(+ p.aff-price-note)::after,
.single-post .entry-content > p:not(.aff-price-note):has(+ .aff-related)::after,
.single-post .entry-content > p:not(.aff-price-note):has(+ .aff-author)::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) auto; overflow-x: auto; } /* auto: centred on the column like every other block (content relay 2026-10-20) */
.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-cta,
.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; }

/* ---- one column on wide screens (owner spacing review 2026-10-18):
   the title block follows the same 720px measure as the text, boxed
   components keep their padding inside that measure, and the phone footer
   shares the 30px gutter of everything above it ---- */
.single .inside-article > .entry-header,
.page .inside-article > .entry-header { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.entry-content > .aff-disclosure, .entry-content > .aff-rbox { box-sizing: border-box; }
@media (max-width: 768px) {
  /* GP pads .site-info 10px itself on phones: 10 + 20 = the 30px gutter */
  .inside-footer-widgets { padding-left: 30px; padding-right: 30px; }
  .inside-site-info { padding-left: 20px; padding-right: 20px; }
}

/* ---- sticky menu: hide on scroll down, show on scroll up (phones/tablets; script in functions.php) */
.main-navigation, .aff-header--inline .site-header { transition: transform 200ms ease-out; }
.aff-nav-hidden { transform: translateY(calc(-100% - 12px)); } /* -12px also hides the bar's shadow */
@media (prefers-reduced-motion: reduce) {
  .main-navigation, .aff-header--inline .site-header { transition: none; }
  .aff-nav-hidden { transform: none; }
}


/* ---- compact post header (owner 2026-10-20): on articles the site header slims
   down and the featured card shrinks, so the title, short answer and first picks
   come up on the first screen. The card keeps its proportions (it carries text),
   it is only smaller; the share image itself is unchanged. */
.single-post .site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }
.single-post .site-header .site-description { display: none; }
.single-post .page-header-image-single { margin-bottom: calc(var(--space-unit) * 0.75); text-align: center; }
.single-post .page-header-image-single img { width: auto !important; max-width: 100%; height: 300px; object-fit: contain; border-radius: var(--radius); } /* fixed height: the width comes from the width/height attributes before the image loads, so the article text never jumps (desktop CLS 0.115 -> 0, 2026-10-22) */
@media (max-width: 768px) {
  .single-post .site-header .inside-header { padding-top: 10px; padding-bottom: 10px; }
  body:not(.aff-header--inline).single-post .site-header .main-title { font-size: 1.25rem; } /* bar style only; inline keeps one logo size site-wide */
  .single-post .page-header-image-single { margin-top: 4px; }
  .single-post .page-header-image-single img { height: 150px; }
  .single-post .aff-breadcrumbs { margin-top: 8px; }
}

/* ---- compact phone article header (owner 2026-10-21; body.aff-phone-compact) ---- */
.aff-nav-brand { display: none; }
@media (max-width: 768px) {
  .aff-phone-compact.single-post:not(.aff-header--inline) .site-header { display: none; }
  .aff-phone-compact.single-post:not(.aff-header--inline) .main-navigation .inside-navigation {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 0 20px;
  }
  .aff-phone-compact.single-post .aff-nav-brand {
    display: block; order: 1; color: var(--surface); text-decoration: none;
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1; padding: 14px 0;
  }
  .aff-phone-compact.single-post:not(.aff-header--inline) .main-navigation .menu-toggle { order: 2; width: auto; margin-left: auto; padding-left: 12px; padding-right: 0; }
  .aff-phone-compact.single-post:not(.aff-header--inline) .main-navigation .main-nav { order: 3; flex-basis: 100%; }
  .aff-phone-compact.single-post .page-header-image-single { display: none; }
  .aff-phone-compact.single-post .entry-header .aff-reading-time,
  .aff-phone-compact.single-post .entry-header .entry-meta { display: inline; margin: 0; font-size: 0.8125rem; }
  .aff-phone-compact.single-post .entry-header .entry-meta::before { content: "\00B7"; margin: 0 6px; color: color-mix(in srgb, var(--body), var(--surface) 35%); }
  .aff-phone-compact.single-post .entry-header .entry-title { margin-bottom: 6px; }
  .aff-phone-compact.single-post .aff-breadcrumbs { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 8px auto 8px; line-height: 1.4; }
  .aff-phone-compact.single-post .aff-breadcrumbs p { margin: 0; }
  .aff-phone-compact.single-post .inside-article { padding-top: 18px; }
  .aff-phone-compact.single-post .aff-breadcrumbs * { white-space: nowrap; }
}


/* ---- homepage side gutter between phone and full desktop widths (769–1160px the
   sections touched the screen edge; owner screenshot 2026-10-21) ---- */
@media (min-width: 769px) {
  .home.page .entry-content > :not(.alignfull) { max-width: min(1080px, calc(100% - 60px)); margin-left: auto; margin-right: auto; }
}

/* ---- inline header: one compact bar, no tagline line (the hero carries it) ---- */
.aff-header--inline .site-header .site-description { display: none; }
.aff-header--inline .site-header .inside-header { padding-top: 10px; padding-bottom: 10px; align-items: center; }


/* ---- families.css ---- */
/* ==========================================================================
   Design families (owner 2026-10-23): whole-site looks on top of the shared
   components. A site picks one with the option `aff_design_family` (instance
   conf DESIGN_FAMILY); the theme adds body class `aff-family--<name>`. No
   class = "field guide", the original look. Families only restyle: markup,
   tokens (variables.css) and the content contract are the same everywhere.
   The CTA colour stays buttons-only; a family's own accent is --fam-accent.
   ========================================================================== */

/* ---------- NOTEBOOK: monospace field-notebook / tool feel ----------------
   Space Mono for headings, labels and navigation; IBM Plex Sans for reading;
   one marker accent; numbered homepage sections; pill buttons with an offset
   shadow; light cream bands instead of a photo hero. */
body.aff-family--notebook {
  --fam-accent: var(--accent, #ffd23f);
  --fam-band: color-mix(in srgb, var(--surface), #e9e3d3 45%);
  --fam-line: color-mix(in srgb, var(--border), var(--ink) 8%);
  --fam-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fam-read: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--fam-read);
  background: #fff;
}
.aff-family--notebook h1, .aff-family--notebook h2, .aff-family--notebook h3, .aff-family--notebook h4,
.aff-family--notebook .main-title, .aff-family--notebook .main-navigation,
.aff-family--notebook .aff-gcard__title, .aff-family--notebook .aff-card__title,
.aff-family--notebook .aff-rbox__name, .aff-family--notebook .aff-compare__name,
.aff-family--notebook .aff-callout__label, .aff-family--notebook .aff-breadcrumbs,
.aff-family--notebook .entry-meta, .aff-family--notebook .aff-reading-time,
.aff-family--notebook .site-footer {
  font-family: var(--fam-mono);
  letter-spacing: 0;
}
.aff-family--notebook h1, .aff-family--notebook h2, .aff-family--notebook h3 { font-weight: 400; }
.aff-family--notebook .entry-content h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }

/* header: white strip, hairline, small mono nav */
.aff-family--notebook .site-header .site-branding .main-title,
.aff-family--notebook .site-header .site-branding .main-title a,
.aff-family--notebook .main-navigation .main-nav ul li a,
.aff-family--notebook .main-navigation .menu-toggle { font-family: var(--fam-mono) !important; }
.aff-family--notebook .site-header .site-branding .main-title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.aff-family--notebook .main-navigation .inside-navigation, .aff-family--notebook .main-navigation .main-nav { border: 0 !important; }
.aff-family--notebook .site-header, .aff-family--notebook.aff-header--inline .site-header { background: #fff; border-bottom: 1px solid var(--fam-line); }
.aff-family--notebook .main-navigation { background: #fff; border-bottom: 0 !important; box-shadow: none !important; }
.aff-family--notebook .main-navigation .main-nav ul li a { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.aff-family--notebook .main-title a { font-weight: 700; letter-spacing: -0.02em; }

/* marker accent: under headings on the homepage, highlighted words anywhere */
.aff-family--notebook mark, .aff-family--notebook .aff-hl {
  background: linear-gradient(transparent 58%, var(--fam-accent) 58%);
  color: inherit; padding: 0 2px;
}
.aff-family--notebook.home .entry-content > h2, .aff-family--notebook .aff-home-hero h1 {
  text-decoration: underline; text-decoration-color: var(--fam-accent);
  text-decoration-thickness: 0.38em; text-underline-offset: -0.18em; text-decoration-skip-ink: none;
}

/* numbered homepage sections: "01 —" eyebrow above each section heading */
.aff-family--notebook.home .entry-content { counter-reset: aff-sec; }
.aff-family--notebook.home .entry-content > h2 { counter-increment: aff-sec; margin-top: calc(var(--space-unit) * 4); position: relative; }
/* absolutely positioned: text decorations (the marker) never propagate to out-of-flow boxes */
.aff-family--notebook.home .entry-content > h2::before {
  content: counter(aff-sec, decimal-leading-zero) " \2014  " attr(data-eyebrow);
  position: absolute; left: 0; bottom: 100%; margin-bottom: 0.7em; white-space: nowrap;
  font-size: 0.75rem; letter-spacing: 0.22em; color: var(--ink);
}

/* hero: a light cream band with dark mono type instead of the photo panel */
.aff-family--notebook .aff-home-hero,
.aff-family--notebook.has-hero-photo .aff-home-hero {
  background: var(--fam-band) !important; color: var(--ink);
  text-align: left; padding: calc(var(--space-unit) * 3.5) max(24px, calc(50vw - 520px));
  border-bottom: 1px solid var(--fam-line);
}
.aff-family--notebook .aff-home-hero::before, .aff-family--notebook .aff-home-hero::after { display: none !important; }
.aff-family--notebook .aff-home-hero h1 { color: var(--ink); text-shadow: none; margin: 0; max-width: 820px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.12; }
.aff-family--notebook .aff-home-hero p { color: var(--body); text-shadow: none; margin: var(--space-unit) 0; max-width: 620px; }
.aff-family--notebook .aff-home-hero .wp-block-buttons { justify-content: flex-start; }

/* buttons: pills with a 3px offset shadow (affiliate buttons keep --cta) */
.aff-family--notebook .wp-block-button__link, .aff-family--notebook .aff-cta-wrap a,
.aff-family--notebook .aff-rbox__btn, .aff-family--notebook .aff-cta {
  border-radius: 999px !important; border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important; font-family: var(--fam-mono); font-weight: 700;
}
.aff-family--notebook .aff-home-hero .wp-block-button__link { background: #fff !important; color: var(--ink) !important; text-decoration: none !important; }
.aff-family--notebook .aff-home-hero .wp-block-button:first-child .wp-block-button__link { background: var(--fam-accent) !important; }
.aff-family--notebook .wp-block-button__link:active, .aff-family--notebook .aff-cta-wrap a:active { box-shadow: 1px 1px 0 var(--ink) !important; transform: translate(2px, 2px); }

/* cards: hairline, round corners, pill kicker, mono meta */
.aff-family--notebook .aff-gcard, .aff-family--notebook .aff-card {
  border: 1px solid var(--fam-line); border-radius: 16px; box-shadow: none; background: #fff;
}
.aff-family--notebook .aff-gcard__kicker, .aff-family--notebook .aff-card__badge {
  align-self: flex-start; font-family: var(--fam-mono); font-size: 0.6875rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  background: var(--fam-band); border: 1px solid var(--fam-line); border-radius: 999px; padding: 3px 10px;
}
.aff-family--notebook .aff-gcard__title, .aff-family--notebook .aff-card__title { font-weight: 400; font-size: 1.0625rem; }
.aff-family--notebook .aff-gcard__meta { font-family: var(--fam-mono); font-size: 0.75rem; }
.aff-family--notebook .aff-chiplink { font-family: var(--fam-mono); font-weight: 700; font-size: 0.875rem; border-color: var(--fam-line); }
.aff-family--notebook .aff-chiplink:hover { background: var(--fam-accent); border-color: var(--ink); }

/* articles: mono labels, reading font for prose, accent rule on the short answer */
.aff-family--notebook .aff-callout { border-left: 4px solid var(--fam-accent); background: var(--fam-band); }
.aff-family--notebook .aff-callout__label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; }
.aff-family--notebook .entry-content > p, .aff-family--notebook .entry-content li { font-size: 1.0625rem; line-height: 1.7; }
.aff-family--notebook .aff-rbox, .aff-family--notebook .aff-compare__row { border-radius: 16px; border-color: var(--fam-line); }

/* footer: cream band, mono, readable */
.aff-family--notebook .site-footer, .aff-family--notebook .site-footer .footer-widgets,
.aff-family--notebook .site-footer .inside-footer-widgets, .aff-family--notebook .site-info {
  background: var(--fam-band) !important; color: var(--ink) !important; border-top: 1px solid var(--fam-line);
}
.aff-family--notebook .site-footer a, .aff-family--notebook .site-footer .widget-title,
.aff-family--notebook .site-footer li, .aff-family--notebook .site-footer p { color: var(--ink) !important; }

@media (max-width: 768px) {
  .aff-family--notebook .aff-home-hero { padding: calc(var(--space-unit) * 2.5) 20px; }
  .aff-family--notebook h1, .aff-family--notebook .entry-title { font-size: 1.75rem !important; letter-spacing: -0.03em; line-height: 1.18; }
  .aff-family--notebook .entry-content h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
  .aff-family--notebook .aff-home-hero h1 { font-size: 1.9rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .aff-family--notebook .wp-block-button__link:active, .aff-family--notebook .aff-cta-wrap a:active { transform: none; }
}

/* notebook: section pages v2 */
.aff-family--notebook .aff-hubx__stats, .aff-family--notebook .aff-hubx__chips label,
.aff-family--notebook .aff-hubx__learn a { font-family: var(--fam-mono); }
.aff-family--notebook .aff-hubx__chips label { border-color: var(--fam-line); font-size: 0.8125rem; }
.aff-family--notebook .aff-hubx__chips input:checked + label { background: var(--fam-accent); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.aff-family--notebook .aff-hubx__learn a { border-left-color: var(--fam-accent); border-radius: 14px; font-weight: 400; }
.aff-family--notebook .aff-hubx__h { text-decoration: underline; text-decoration-color: var(--fam-accent); text-decoration-thickness: 0.38em; text-underline-offset: -0.18em; text-decoration-skip-ink: none; }
.aff-family--notebook .aff-hubx__more label { font-family: var(--fam-mono); border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.aff-family--notebook .aff-hubx__more label:hover { background: var(--fam-accent); color: var(--ink); }

/* ---------- SOFT & FRIENDLY: rounded, soft-tinted, gentle (2026-10-23) ----
   Keeps the site's own fonts and colours (variables.css); changes shape and
   mood: large radii, soft brand-tinted bands, shadows instead of borders,
   an inset rounded photo hero, wavy section dividers, bubble markers. */
body.aff-family--soft {
  --fam-r: 22px;
  --fam-tint: color-mix(in srgb, var(--brand), #fff 92%);
  --fam-tint-2: color-mix(in srgb, var(--brand), #fff 84%);
  --fam-shadow: 0 10px 30px color-mix(in srgb, var(--brand), transparent 86%), 0 2px 6px rgba(15, 23, 42, .05);
  background: #fff;
}
.aff-family--soft h1, .aff-family--soft h2, .aff-family--soft h3 { letter-spacing: -0.01em; }

/* header: white, menu items as soft pills on hover */
.aff-family--soft .site-header { background: #fff; border-bottom: 0 !important; box-shadow: 0 1px 0 var(--fam-tint-2); }
.aff-family--soft .main-navigation, .aff-family--soft .main-navigation .inside-navigation { background: #fff; border: 0 !important; box-shadow: none !important; }
.aff-family--soft .main-navigation .main-nav ul li a { border-radius: 999px; }
.aff-family--soft .main-navigation .main-nav ul li:hover > a,
.aff-family--soft .main-navigation .main-nav ul li[class*="current-menu-"] > a { background: var(--fam-tint); color: var(--ink); }

/* hero: the photo panel becomes an inset rounded card */
.aff-family--soft .aff-home-hero {
  margin: 18px max(16px, calc(50vw - 560px)) 0 !important; border-radius: calc(var(--fam-r) + 8px);
  overflow: hidden; box-shadow: var(--fam-shadow);
}
.aff-family--soft .aff-home-hero h1 { font-weight: 800; }
.aff-family--soft .aff-home-hero .wp-block-button__link { border-radius: 999px !important; box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* section headings: a soft bubble before them; homepage sections sit on tinted bands */
.aff-family--soft .entry-content > h2::before, .aff-family--soft .aff-hubx__h::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; vertical-align: 0.1em;
  border-radius: 50%; background: var(--brand); box-shadow: 0.32em -0.22em 0 -0.12em var(--fam-tint-2);
}
.aff-family--soft.home .entry-content > .aff-guide-cards,
.aff-family--soft.home .entry-content > ul.aff-guide-cards { background: var(--fam-tint); border-radius: calc(var(--fam-r) + 6px); padding: 18px; }

/* cards: no hard borders, round, soft shadow, tinted pill kicker */
.aff-family--soft .aff-gcard, .aff-family--soft .aff-card {
  border: 0; border-radius: var(--fam-r); box-shadow: var(--fam-shadow); background: #fff;
}
.aff-family--soft .aff-gcard__img, .aff-family--soft .aff-gcard__image { border-radius: var(--fam-r) var(--fam-r) 0 0; }
.aff-family--soft .aff-gcard__kicker, .aff-family--soft .aff-card__badge {
  align-self: flex-start; background: var(--fam-tint-2); color: color-mix(in srgb, var(--brand), var(--ink) 35%);
  border-radius: 999px; padding: 3px 10px; text-transform: none; letter-spacing: 0; font-size: 0.75rem;
}
.aff-family--soft .aff-gcard__title { font-size: 1.0625rem; }
@media (max-width: 768px) {
  .aff-family--soft .aff-gcard__img, .aff-family--soft .aff-gcard__image { border-radius: 14px; }
}

/* chips and buttons: soft pills */
.aff-family--soft .aff-chiplink, .aff-family--soft .aff-hubx__chips label {
  border: 0; background: var(--fam-tint); color: var(--ink); box-shadow: none;
}
.aff-family--soft .aff-chiplink:hover, .aff-family--soft .aff-hubx__chips label:hover { background: var(--fam-tint-2); }
.aff-family--soft .aff-hubx__chips input:checked + label { background: var(--brand); color: #fff; }
.aff-family--soft .wp-block-button__link, .aff-family--soft .aff-cta-wrap a, .aff-family--soft .aff-rbox__btn,
.aff-family--soft .aff-cta, .aff-family--soft .aff-hubx__more label { border-radius: 999px !important; }
.aff-family--soft .aff-cta-wrap a, .aff-family--soft .aff-rbox__btn, .aff-family--soft .aff-cta { box-shadow: 0 6px 16px color-mix(in srgb, var(--cta), transparent 60%) !important; }
.aff-family--soft .aff-hubx__more label { border: 0; background: var(--fam-tint); }
.aff-family--soft .aff-hubx__more label:hover { background: var(--brand); color: #fff; }

/* articles: rounded tinted boxes, soft product boxes */
.aff-family--soft .aff-callout { border: 0; border-radius: var(--fam-r); background: var(--fam-tint); }
.aff-family--soft .aff-callout__label { color: color-mix(in srgb, var(--brand), var(--ink) 30%); }
.aff-family--soft .aff-rbox, .aff-family--soft .aff-compare__row, .aff-family--soft .aff-vcard,
.aff-family--soft .aff-disclosure { border-radius: var(--fam-r) !important; }
.aff-family--soft .aff-rbox { border-color: transparent; box-shadow: var(--fam-shadow); }
.aff-family--soft .aff-hubx__learn a { border: 0; border-radius: 18px; background: var(--fam-tint); }
.aff-family--soft .aff-breadcrumbs a { border-radius: 999px; }

/* footer: tinted, with a soft wave on top */
.aff-family--soft .site-footer { position: relative; background: var(--fam-tint) !important; margin-top: 48px; }
.aff-family--soft .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: var(--fam-tint);
  -webkit-mask: radial-gradient(28px 20px at 50% 100%, #000 98%, transparent) 0 0 / 56px 28px repeat-x;
          mask: radial-gradient(28px 20px at 50% 100%, #000 98%, transparent) 0 0 / 56px 28px repeat-x;
}
.aff-family--soft .site-footer .footer-widgets, .aff-family--soft .site-footer .inside-footer-widgets,
.aff-family--soft .site-info { background: transparent !important; color: var(--ink) !important; }
.aff-family--soft .site-footer a, .aff-family--soft .site-footer li, .aff-family--soft .site-footer p { color: var(--ink) !important; }

/* ---------- SPORTY: bold, condensed, high contrast, angled (2026-10-23) ---
   Barlow Condensed (uppercase, heavy, italic for the hero) + Barlow for reading.
   Dark ink bands with angled edges, slanted bars before headings, square-cut
   cards with a thick brand top edge, skewed tags and chips, scoreboard numbers. */
body.aff-family--sporty {
  --fam-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", system-ui, sans-serif;
  --fam-read: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fam-cut: 28px;
  font-family: var(--fam-read);
  background: #f4f5f7;
}
.aff-family--sporty h1, .aff-family--sporty h2, .aff-family--sporty h3,
.aff-family--sporty .main-title, .aff-family--sporty .site-header .site-branding .main-title a,
.aff-family--sporty .main-navigation .main-nav ul li a, .aff-family--sporty .main-navigation .menu-toggle,
.aff-family--sporty .aff-gcard__title, .aff-family--sporty .aff-card__title, .aff-family--sporty .aff-rbox__name,
.aff-family--sporty .aff-compare__name, .aff-family--sporty .aff-callout__label,
.aff-family--sporty .aff-hubx__chips label, .aff-family--sporty .aff-chiplink, .aff-family--sporty .aff-hubx__more label {
  font-family: var(--fam-display) !important; text-transform: uppercase; letter-spacing: 0.01em;
}
.aff-family--sporty h1, .aff-family--sporty h2 { font-weight: 800; line-height: 1.02; }
.aff-family--sporty h3 { font-weight: 800; }
.aff-family--sporty .entry-content h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.aff-family--sporty .entry-title { font-size: clamp(2.2rem, 5vw, 3.2rem); }

/* header: dark bar, white type */
.aff-family--sporty .site-header, .aff-family--sporty .main-navigation, .aff-family--sporty .main-navigation .inside-navigation {
  background: var(--ink) !important; border: 0 !important; box-shadow: none !important;
}
.aff-family--sporty .site-header .site-branding .main-title a, .aff-family--sporty .main-navigation .main-nav ul li a,
.aff-family--sporty .main-navigation .menu-toggle { color: #fff !important; font-weight: 800; }
.aff-family--sporty .site-header .site-branding .main-title { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.aff-family--sporty .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.aff-family--sporty .main-navigation .main-nav ul li:hover > a { box-shadow: inset 0 -4px 0 var(--brand); }
.aff-family--sporty .main-navigation ul ul { background: var(--ink) !important; }

/* hero: dark, angled bottom edge, huge italic headline */
.aff-family--sporty .aff-home-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fam-cut)), 0 100%);
  padding-bottom: calc(var(--space-unit) * 4 + var(--fam-cut)) !important; text-align: left;
  padding-left: max(24px, calc(50vw - 540px)) !important; padding-right: max(24px, calc(50vw - 540px)) !important;
}
.aff-family--sporty .aff-home-hero h1 { font-style: italic; font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 0; max-width: 900px; line-height: 0.95; }
.aff-family--sporty .aff-home-hero p { margin-left: 0; font-size: 1.125rem; }
.aff-family--sporty .aff-home-hero .wp-block-buttons { justify-content: flex-start; }

/* section headings: a slanted brand bar first */
.aff-family--sporty .entry-content > h2::before, .aff-family--sporty .aff-hubx__h::before {
  content: ""; display: inline-block; width: 0.38em; height: 0.82em; margin-right: 0.35em; vertical-align: -0.06em;
  background: var(--brand); transform: skewX(-14deg);
}

/* cards: square-cut, thick brand top, uppercase titles, skewed kicker tag */
.aff-family--sporty .aff-gcard, .aff-family--sporty .aff-card {
  border: 0; border-top: 5px solid var(--brand); border-radius: 4px; background: #fff;
  box-shadow: 0 2px 0 rgba(15,23,42,.06), 0 10px 22px rgba(15,23,42,.06);
}
.aff-family--sporty .aff-gcard__title, .aff-family--sporty .aff-card__title { font-weight: 800; font-size: 1.2rem; line-height: 1.05; }
.aff-family--sporty .aff-gcard__kicker, .aff-family--sporty .aff-card__badge {
  align-self: flex-start; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 0;
  transform: skewX(-12deg); font-family: var(--fam-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
/* scoreboard numbers on the homepage and section card grids */
.aff-family--sporty .aff-guide-cards { counter-reset: aff-card; }
.aff-family--sporty .aff-guide-cards > li { counter-increment: aff-card; position: relative; }
.aff-family--sporty .aff-guide-cards > li::after {
  content: counter(aff-card, decimal-leading-zero); position: absolute; right: 12px; bottom: 8px; pointer-events: none;
  font-family: var(--fam-display); font-weight: 800; font-style: italic; font-size: 2rem; line-height: 1;
  color: color-mix(in srgb, var(--ink), transparent 88%);
}

/* chips and buttons: skewed, square, bold */
.aff-family--sporty .aff-hubx__chips label, .aff-family--sporty .aff-chiplink {
  border-radius: 0 !important; transform: skewX(-12deg); border: 2px solid var(--ink) !important; background: #fff; color: var(--ink);
  font-weight: 800;
}
.aff-family--sporty .aff-hubx__chips input:checked + label, .aff-family--sporty .aff-chiplink:hover { background: var(--ink) !important; color: #fff !important; }
.aff-family--sporty .wp-block-button__link, .aff-family--sporty .aff-cta-wrap a, .aff-family--sporty .aff-rbox__btn,
.aff-family--sporty .aff-cta, .aff-family--sporty .aff-hubx__more label {
  border-radius: 2px !important; font-family: var(--fam-display) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.aff-family--sporty .aff-home-hero .wp-block-button__link { transform: skewX(-10deg); }
.aff-family--sporty .aff-hubx__more label { border: 2px solid var(--ink); }

/* articles: dark short-answer band, square boxes */
.aff-family--sporty .aff-callout { border: 0; border-left: 6px solid var(--brand); border-radius: 0; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.aff-family--sporty .aff-callout__label { font-weight: 800; letter-spacing: .08em; }
.aff-family--sporty .aff-rbox, .aff-family--sporty .aff-compare__row { border-radius: 4px !important; }
.aff-family--sporty .entry-content > p, .aff-family--sporty .entry-content li { font-size: 1.0625rem; line-height: 1.65; }
.aff-family--sporty .inside-article { background: #fff; }
.aff-family--sporty .aff-hubx__learn a { border: 0; border-left: 5px solid var(--brand); border-radius: 0; font-family: var(--fam-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; }

/* footer: dark, angled top, a diagonal stripe band */
.aff-family--sporty .site-footer { background: var(--ink) !important; clip-path: polygon(0 var(--fam-cut), 100% 0, 100% 100%, 0 100%); padding-top: var(--fam-cut); margin-top: 40px; position: relative; }
.aff-family--sporty .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--fam-cut); height: 6px;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 12px, transparent 12px 22px); opacity: .9;
}
.aff-family--sporty .site-footer .footer-widgets, .aff-family--sporty .site-footer .inside-footer-widgets,
.aff-family--sporty .site-info { background: transparent !important; }
.aff-family--sporty .site-footer, .aff-family--sporty .site-footer a, .aff-family--sporty .site-footer li,
.aff-family--sporty .site-footer p { color: #fff !important; }

@media (max-width: 768px) {
  .aff-family--sporty { --fam-cut: 18px; }
  .aff-family--sporty .aff-guide-cards > li::after { font-size: 1.5rem; }
}

/* ---------- MAGAZINE: editorial, serif, ruled (2026-10-23) -----------------
   Fraunces for headlines, Source Serif 4 for article prose, the site's own sans
   for small-caps labels and navigation. White pages, ink rules instead of boxes,
   a double-ruled masthead, borderless image-first cards, drop caps, a
   pull-quote short answer. Colour comes from the site's tokens. */
body.aff-family--magazine {
  --fam-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --fam-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fam-rule: var(--ink);
  --fam-hair: color-mix(in srgb, var(--border), var(--ink) 12%);
  background: #fff;
}
.aff-family--magazine h1, .aff-family--magazine h2, .aff-family--magazine h3, .aff-family--magazine h4,
.aff-family--magazine .main-title, .aff-family--magazine .site-header .site-branding .main-title a,
.aff-family--magazine .aff-gcard__title, .aff-family--magazine .aff-card__title, .aff-family--magazine .aff-featured__title,
.aff-family--magazine .aff-rbox__name, .aff-family--magazine .aff-compare__name, .aff-family--magazine .aff-vcards__name {
  font-family: var(--fam-serif) !important; letter-spacing: -0.015em; text-transform: none;
}
.aff-family--magazine h1, .aff-family--magazine h2 { font-weight: 600; line-height: 1.08; }
.aff-family--magazine h3, .aff-family--magazine h4 { font-weight: 600; }
.aff-family--magazine .entry-title { font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 650; }
/* small-caps labels in the site's sans */
.aff-family--magazine .aff-gcard__kicker, .aff-family--magazine .aff-card__badge, .aff-family--magazine .aff-featured__kicker,
.aff-family--magazine .aff-callout__label, .aff-family--magazine .aff-hubx__stats,
.aff-family--magazine .main-navigation .main-nav ul li a, .aff-family--magazine .aff-hubx__chips label, .aff-family--magazine .aff-chiplink {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700;
}

/* masthead: white, big serif name, double rule underneath */
.aff-family--magazine .site-header, .aff-family--magazine .main-navigation, .aff-family--magazine .main-navigation .inside-navigation {
  background: #fff !important; box-shadow: none !important;
}
.aff-family--magazine .main-navigation, .aff-family--magazine .main-navigation .inside-navigation { border: 0 !important; }
.aff-family--magazine .site-header { border-bottom: 4px double var(--fam-rule) !important; }
.aff-family--magazine .site-header .site-branding .main-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.aff-family--magazine .site-header .site-branding .main-title a { color: var(--ink) !important; font-weight: 700; letter-spacing: -0.03em; }
.aff-family--magazine .main-navigation .main-nav ul li a, .aff-family--magazine .main-navigation .menu-toggle { color: var(--ink) !important; }
.aff-family--magazine .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.aff-family--magazine .main-navigation .main-nav ul li:hover > a { box-shadow: inset 0 -2px 0 var(--ink); }

/* cover: the photo stays, a white cover-line panel carries the words */
.aff-family--magazine .aff-home-hero { text-align: left; padding-left: max(24px, calc(50vw - 540px)) !important; padding-right: max(24px, calc(50vw - 540px)) !important; }
.aff-family--magazine .aff-home-hero h1, .aff-family--magazine .aff-home-hero p,
.aff-family--magazine .aff-home-hero .wp-block-buttons { position: relative; width: min(640px, 100%); max-width: none; box-sizing: border-box; margin-left: 0 !important; }
.aff-family--magazine .aff-home-hero h1 {
  background: #fff; color: var(--ink) !important; text-shadow: none !important; padding: 22px 28px 10px; margin: 0 !important;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 600; line-height: 1.02;
}
.aff-family--magazine .aff-home-hero p {
  background: #fff; color: var(--body) !important; text-shadow: none !important; margin: 0 !important; padding: 4px 28px 18px;
  font-family: var(--fam-text); font-style: italic; font-size: 1.125rem;
}
.aff-family--magazine .aff-home-hero .wp-block-buttons { background: #fff; padding: 0 28px 24px; justify-content: flex-start; }
.aff-family--magazine .aff-home-hero .wp-block-button__link { background: var(--ink) !important; color: #fff !important; border: 0 !important; text-shadow: none; }
.aff-family--magazine .aff-home-hero .wp-block-button + .wp-block-button .wp-block-button__link { background: #fff !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.aff-family--magazine .aff-home-hero h1::before {
  content: ""; display: block; width: 56px; height: 4px; background: var(--brand); margin-bottom: 16px;
}

/* section heads: a heavy ink rule above, serif headline under it */
.aff-family--magazine .entry-content > h2, .aff-family--magazine .aff-hubx__h {
  border-top: 3px solid var(--fam-rule); padding-top: 0.45em; border-bottom: 0;
}
.aff-family--magazine.home .entry-content > h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.aff-family--magazine .entry-content h2 { font-size: clamp(1.55rem, 3vw, 2rem); }

/* an eyebrow label above a section head takes the rule instead */
.aff-family--magazine .entry-content > p.aff-eyebrow { border-top: 3px solid var(--fam-rule); padding-top: 0.7em; margin-bottom: 0.2em; }
.aff-family--magazine .entry-content > p.aff-eyebrow + h2 { border-top: 0; padding-top: 0; margin-top: 0; }

/* cards: borderless, image first, small-caps kicker, serif title, hairline below */
.aff-family--magazine .aff-gcard, .aff-family--magazine .aff-card {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent;
  border-bottom: 1px solid var(--fam-hair) !important; padding-bottom: 10px;
}
.aff-family--magazine .aff-gcard:hover { transform: none; }
.aff-family--magazine .aff-gcard__img, .aff-family--magazine .aff-gcard__image, .aff-family--magazine .aff-featured__img { border-radius: 0 !important; }
@media (min-width: 601px) { .aff-family--magazine .aff-gcard__body { padding-left: 0 !important; padding-right: 0 !important; } }
.aff-family--magazine .aff-breadcrumbs { font-family: var(--fam-text); font-style: italic; }
.aff-family--magazine .aff-gcard__kicker, .aff-family--magazine .aff-card__badge, .aff-family--magazine .aff-featured__kicker {
  background: none !important; border: 0 !important; padding: 0 !important; color: var(--brand) !important; font-size: 0.6875rem;
}
.aff-family--magazine .aff-gcard__title, .aff-family--magazine .aff-card__title { font-size: 1.25rem; font-weight: 600; line-height: 1.18; color: var(--ink); }
.aff-family--magazine .aff-gcard:hover .aff-gcard__title { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
.aff-family--magazine .aff-gcard__meta, .aff-family--magazine .aff-featured__meta { font-family: var(--fam-text); font-style: italic; }
.aff-family--magazine .aff-featured { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--fam-hair) !important; }
.aff-family--magazine .aff-featured__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; }
.aff-family--magazine .aff-featured__summary { font-family: var(--fam-text); }

/* chips: underlined small-caps links; the chosen one gets a heavy rule */
.aff-family--magazine .aff-chiplink, .aff-family--magazine .aff-hubx__chips label {
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: inset 0 -1px 0 var(--fam-hair) !important; color: var(--ink) !important;
}
.aff-family--magazine .aff-chiplink:hover, .aff-family--magazine .aff-hubx__chips label:hover,
.aff-family--magazine .aff-hubx__chips input:checked + label { box-shadow: inset 0 -3px 0 var(--ink) !important; }
.aff-family--magazine .wp-block-button__link, .aff-family--magazine .aff-cta-wrap a, .aff-family--magazine .aff-rbox__btn,
.aff-family--magazine .aff-cta, .aff-family--magazine .aff-hubx__more label { border-radius: 0 !important; }
.aff-family--magazine .aff-hubx__more label { border: 1.5px solid var(--ink); background: #fff; color: var(--ink); letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; }
.aff-family--magazine .aff-hubx__more label:hover { background: var(--ink); color: #fff; }

/* articles: serif prose, drop cap, pull-quote short answer, ruled boxes */
.aff-family--magazine .entry-content > p, .aff-family--magazine .entry-content > ul li, .aff-family--magazine .entry-content > ol li {
  font-family: var(--fam-text); font-size: 1.125rem; line-height: 1.68;
}
/* drop cap on the first prose paragraph (labels such as p.aff-eyebrow are skipped) */
.aff-family--magazine.single-post .entry-content > p:not([class*="aff-"]):not(p:not([class*="aff-"]) ~ p)::first-letter {
  font-family: var(--fam-serif); font-weight: 700; float: left; font-size: 3.6em; line-height: 0.82; margin: 0.06em 0.1em 0 0; color: var(--brand);
}
.aff-family--magazine .aff-callout {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
  border-top: 3px solid var(--fam-rule) !important; border-bottom: 1px solid var(--fam-rule) !important; padding: 14px 0 16px !important;
}
.aff-family--magazine .aff-callout p:not(.aff-callout__label) { font-family: var(--fam-text); font-size: 1.1875rem; line-height: 1.6; }
.aff-family--magazine .aff-callout__label { color: var(--brand); }
.aff-family--magazine .aff-disclosure { border-radius: 0 !important; background: none !important; border: 0 !important; border-left: 2px solid var(--fam-hair) !important; font-style: italic; }
.aff-family--magazine .aff-rbox, .aff-family--magazine .aff-compare__row, .aff-family--magazine .aff-vcards__card { border-radius: 0 !important; }
.aff-family--magazine .aff-hubx__learn a { border: 0; border-top: 1px solid var(--fam-rule); border-radius: 0; background: none; font-family: var(--fam-serif); font-weight: 600; font-size: 1.05rem; padding-left: 0; }

/* footer: white with a double rule, quiet */
.aff-family--magazine .site-footer, .aff-family--magazine .site-footer .footer-widgets,
.aff-family--magazine .site-footer .inside-footer-widgets, .aff-family--magazine .site-info { background: #fff !important; color: var(--ink) !important; }
.aff-family--magazine .site-footer { border-top: 4px double var(--fam-rule); margin-top: 48px; }
.aff-family--magazine .site-footer a, .aff-family--magazine .site-footer li, .aff-family--magazine .site-footer p { color: var(--ink) !important; }

@media (max-width: 768px) {
  .aff-family--magazine .aff-home-hero h1 { padding: 18px 18px 8px; font-size: 2.1rem; }
  .aff-family--magazine .aff-home-hero p { padding: 4px 18px 14px; font-size: 1.0625rem; }
  .aff-family--magazine .aff-home-hero .wp-block-buttons { padding: 0 18px 18px; }
  .aff-family--magazine .entry-title { font-size: 2rem !important; }
  .aff-family--magazine .aff-gcard { padding-bottom: 8px; }
  .aff-family--magazine .aff-gcard__img { margin-left: 0 !important; }
  .aff-family--magazine .aff-gcard__body { padding-left: 14px !important; }
}

/* ---------- LAB: technical datasheet / spec sheet (2026-10-23) ------------
   Space Grotesk for headings, JetBrains Mono for labels, data and navigation,
   the site's own sans for reading. A dark blueprint-grid hero, hairline rules,
   crop marks around cards, bracketed labels, datasheet tables with tabular
   figures, a spec-box short answer with an ink header strip. */
body.aff-family--lab {
  --fam-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fam-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fam-line: color-mix(in srgb, var(--border), var(--ink) 18%);
  --fam-grid: color-mix(in srgb, var(--brand), #fff 30%);
  --fam-grid-a: color-mix(in srgb, var(--fam-grid), transparent 72%);
  --fam-grid-b: color-mix(in srgb, var(--fam-grid), transparent 88%);
  --fam-paper: #f7f8fa;
  background: #fff;
}
.aff-family--lab h1, .aff-family--lab h2, .aff-family--lab h3, .aff-family--lab h4,
.aff-family--lab .main-title, .aff-family--lab .site-header .site-branding .main-title a,
.aff-family--lab .aff-gcard__title, .aff-family--lab .aff-card__title, .aff-family--lab .aff-featured__title,
.aff-family--lab .aff-rbox__name, .aff-family--lab .aff-compare__name, .aff-family--lab .aff-vcards__name {
  font-family: var(--fam-head) !important; letter-spacing: -0.02em; text-transform: none;
}
.aff-family--lab h1, .aff-family--lab h2 { font-weight: 700; line-height: 1.08; }
.aff-family--lab .entry-title { font-size: clamp(2rem, 4.4vw, 2.9rem); }
/* mono: navigation, labels, meta, data */
.aff-family--lab .main-navigation .main-nav ul li a, .aff-family--lab .main-navigation .menu-toggle,
.aff-family--lab .aff-gcard__kicker, .aff-family--lab .aff-card__badge, .aff-family--lab .aff-featured__kicker,
.aff-family--lab .aff-gcard__meta, .aff-family--lab .aff-featured__meta, .aff-family--lab .aff-breadcrumbs,
.aff-family--lab .entry-meta, .aff-family--lab .aff-reading-time, .aff-family--lab .aff-callout__label,
.aff-family--lab .aff-hubx__stats, .aff-family--lab .aff-hubx__chips label, .aff-family--lab .aff-chiplink,
.aff-family--lab .aff-hubx__more label, .aff-family--lab .aff-eyebrow, .aff-family--lab .site-footer {
  font-family: var(--fam-mono) !important; letter-spacing: 0;
}
.aff-family--lab .main-navigation .main-nav ul li a { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; }

/* header: white, hairline, the site name in Space Grotesk */
.aff-family--lab .site-header, .aff-family--lab .main-navigation, .aff-family--lab .main-navigation .inside-navigation {
  background: #fff !important; box-shadow: none !important;
}
.aff-family--lab .main-navigation, .aff-family--lab .main-navigation .inside-navigation { border: 0 !important; }
.aff-family--lab .site-header { border-bottom: 1px solid var(--fam-line) !important; }
.aff-family--lab .site-header .site-branding .main-title a, .aff-family--lab .main-navigation .main-nav ul li a,
.aff-family--lab .main-navigation .menu-toggle { color: var(--ink) !important; }
.aff-family--lab .site-header .site-branding .main-title a { font-weight: 700; }
.aff-family--lab .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.aff-family--lab .main-navigation .main-nav ul li:hover > a { box-shadow: inset 0 -2px 0 var(--brand); }

/* hero: dark blueprint band with a fine grid instead of the photo */
.aff-family--lab .aff-home-hero, .aff-family--lab.has-hero-photo .aff-home-hero {
  background-color: var(--ink) !important;
  background-image:
    linear-gradient(var(--fam-grid-a) 1px, transparent 1px),
    linear-gradient(90deg, var(--fam-grid-a) 1px, transparent 1px),
    linear-gradient(var(--fam-grid-b) 1px, transparent 1px),
    linear-gradient(90deg, var(--fam-grid-b) 1px, transparent 1px) !important;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px !important;
  background-position: -1px -1px !important; background-repeat: repeat !important;
  text-align: left; padding-left: max(24px, calc(50vw - 540px)) !important; padding-right: max(24px, calc(50vw - 540px)) !important;
}
.aff-family--lab .aff-home-hero::before, .aff-family--lab .aff-home-hero::after { display: none !important; }
.aff-family--lab .aff-home-hero h1 { color: #fff !important; text-shadow: none !important; margin: 0; max-width: 860px; font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.aff-family--lab .aff-home-hero p { color: color-mix(in srgb, #fff, var(--ink) 25%) !important; text-shadow: none !important; margin: 14px 0 0 !important; max-width: 640px; font-family: var(--fam-mono); font-size: 0.9375rem; line-height: 1.6; }
.aff-family--lab .aff-home-hero .wp-block-buttons { justify-content: flex-start; margin-top: 22px; }
.aff-family--lab .aff-home-hero .wp-block-button__link { background: #fff !important; color: var(--ink) !important; border: 1px solid #fff !important; text-shadow: none; }
.aff-family--lab .aff-home-hero .wp-block-button + .wp-block-button .wp-block-button__link { background: transparent !important; color: #fff !important; }
.aff-family--lab .aff-home-hero h1::before {
  /* a small ruler */
  content: ""; display: block; width: 145px; height: 9px; margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand), #fff 45%);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand), #fff 45%) 0 1px, transparent 1px 12px) left bottom / 100% 5px no-repeat,
              repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand), #fff 45%) 0 1px, transparent 1px 48px) left bottom / 100% 9px no-repeat;
}

/* section heads: a hairline with a small brand block at its start */
.aff-family--lab .entry-content > h2, .aff-family--lab .aff-hubx__h {
  border-top: 1px solid var(--fam-line); padding-top: 0.6em; position: relative; border-bottom: 0 !important; padding-bottom: 0 !important;
}
.aff-family--lab .entry-content > h2::before, .aff-family--lab .aff-hubx__h::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 44px; height: 5px; background: var(--brand);
}
.aff-family--lab .entry-content > p.aff-eyebrow { border-top: 1px solid var(--fam-line); padding-top: 0.7em; margin-bottom: 0.2em; position: relative; }
.aff-family--lab .entry-content > p.aff-eyebrow::before { content: ""; position: absolute; left: 0; top: -3px; width: 44px; height: 5px; background: var(--brand); }
.aff-family--lab .entry-content > p.aff-eyebrow + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.aff-family--lab .entry-content > p.aff-eyebrow + h2::before { display: none; }

/* cards: hairline box, crop marks outside the corners, bracketed mono kicker */
.aff-family--lab .aff-gcard, .aff-family--lab .aff-card {
  border: 1px solid var(--fam-line) !important; border-radius: 0 !important; box-shadow: none !important; background: #fff;
}
.aff-family--lab .aff-gcard:hover, .aff-family--lab .aff-card:hover { border-color: var(--ink) !important; transform: none; }
.aff-family--lab .aff-gcard__img, .aff-family--lab .aff-gcard__image, .aff-family--lab .aff-featured__img { border-radius: 0 !important; }
.aff-family--lab .aff-guide-cards > li, .aff-family--lab .aff-cards > li { position: relative; }
.aff-family--lab .aff-guide-cards > li::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 10px 1px, linear-gradient(var(--ink), var(--ink)) left top / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) right top / 10px 1px, linear-gradient(var(--ink), var(--ink)) right top / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) left bottom / 10px 1px, linear-gradient(var(--ink), var(--ink)) left bottom / 1px 10px,
    linear-gradient(var(--ink), var(--ink)) right bottom / 10px 1px, linear-gradient(var(--ink), var(--ink)) right bottom / 1px 10px;
  background-repeat: no-repeat;
}
.aff-family--lab .aff-gcard__kicker, .aff-family--lab .aff-card__badge, .aff-family--lab .aff-featured__kicker {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  color: var(--brand) !important; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
}
.aff-family--lab .aff-gcard__kicker::before, .aff-family--lab .aff-card__badge::before, .aff-family--lab .aff-featured__kicker::before { content: "[ "; }
.aff-family--lab .aff-gcard__kicker::after, .aff-family--lab .aff-card__badge::after, .aff-family--lab .aff-featured__kicker::after { content: " ]"; }
.aff-family--lab .aff-gcard__title, .aff-family--lab .aff-card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.aff-family--lab .aff-gcard__meta, .aff-family--lab .aff-featured__meta { font-size: 0.75rem; }
.aff-family--lab .aff-featured { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--fam-line) !important; }

/* chips and buttons: square, hairline, mono */
.aff-family--lab .aff-chiplink, .aff-family--lab .aff-hubx__chips label {
  border-radius: 0 !important; border: 1px solid var(--fam-line) !important; background: #fff !important; color: var(--ink) !important;
  box-shadow: none !important; font-size: 0.8125rem; font-weight: 600;
}
.aff-family--lab .aff-chiplink:hover, .aff-family--lab .aff-hubx__chips label:hover { border-color: var(--ink) !important; }
.aff-family--lab .aff-hubx__chips input:checked + label { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.aff-family--lab .wp-block-button__link, .aff-family--lab .aff-cta-wrap a, .aff-family--lab .aff-rbox__btn,
.aff-family--lab .aff-cta, .aff-family--lab .aff-hubx__more label { border-radius: 0 !important; }
.aff-family--lab .wp-block-button__link, .aff-family--lab .aff-hubx__more label { font-family: var(--fam-mono) !important; font-weight: 600; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.04em; }
.aff-family--lab .aff-hubx__more label { border: 1px solid var(--ink); background: #fff; color: var(--ink); }
.aff-family--lab .aff-hubx__more label:hover { background: var(--ink); color: #fff; }

/* articles: spec-box short answer, datasheet tables, square product boxes */
.aff-family--lab .aff-callout {
  border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; padding: 0 18px 14px !important;
}
.aff-family--lab .aff-callout__label {
  display: block; margin: 0 -18px 12px !important; padding: 6px 18px; background: var(--ink); color: #fff !important;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.aff-family--lab .aff-disclosure { border-radius: 0 !important; background: var(--fam-paper) !important; border: 1px dashed var(--fam-line) !important; font-family: var(--fam-mono); font-size: 0.75rem; }
.aff-family--lab .aff-rbox, .aff-family--lab .aff-compare__row, .aff-family--lab .aff-vcards__card,
.aff-family--lab .aff-spec-table, .aff-family--lab .aff-spec-stack, .aff-family--lab .aff-ptable { border-radius: 0 !important; }
.aff-family--lab .entry-content table { border-collapse: collapse; border: 1px solid var(--ink); }
.aff-family--lab .entry-content table th { background: var(--ink); color: #fff; font-family: var(--fam-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.aff-family--lab .entry-content table td { font-variant-numeric: tabular-nums; border-color: var(--fam-line); }
.aff-family--lab .entry-content table tbody tr:nth-child(even) td { background: var(--fam-paper); }
.aff-family--lab .aff-compare__spec-v, .aff-family--lab .aff-spec-stack__value, .aff-family--lab .aff-vcards__spec,
.aff-family--lab .aff-vcards__count { font-family: var(--fam-mono); font-size: 0.75rem; }
.aff-family--lab .aff-vcards__count { white-space: nowrap; }
.aff-family--lab .aff-hubx__learn a { border: 1px solid var(--fam-line); border-left: 4px solid var(--brand); border-radius: 0; background: #fff; font-family: var(--fam-head); font-weight: 600; }

/* footer: dark with the blueprint grid, mono */
.aff-family--lab .site-footer {
  background-color: var(--ink) !important; margin-top: 48px;
  background-image: linear-gradient(var(--fam-grid-b) 1px, transparent 1px), linear-gradient(90deg, var(--fam-grid-b) 1px, transparent 1px) !important;
  background-size: 48px 48px !important; background-repeat: repeat !important;
}
.aff-family--lab .site-footer .footer-widgets, .aff-family--lab .site-footer .inside-footer-widgets,
.aff-family--lab .site-info { background: transparent !important; }
.aff-family--lab .site-footer, .aff-family--lab .site-footer a, .aff-family--lab .site-footer li,
.aff-family--lab .site-footer p { color: #fff !important; font-size: 0.8125rem; }

@media (max-width: 768px) {
  .aff-family--lab .aff-home-hero h1 { font-size: 2.1rem; }
  .aff-family--lab .entry-title { font-size: 1.9rem !important; }
}
@media (max-width: 600px) {
  .aff-family--lab .aff-guide-cards > li::before { display: none; } /* stacked rows: marks would collide */
}

/* ---------- calculators (aff/tool, aff-components 0.36.0) in each family -- */
.aff-family--notebook .aff-tool { border-radius: 16px; border-color: var(--fam-line); box-shadow: 3px 3px 0 var(--ink); }
.aff-family--notebook .aff-tool__title, .aff-family--notebook .aff-tool__out dd,
.aff-family--notebook .aff-tool__switch label { font-family: var(--fam-mono); }
.aff-family--notebook .aff-tool__title { font-weight: 400; }
.aff-family--notebook .aff-tool__out > div { background: var(--fam-band); border-left-color: var(--fam-accent); }
.aff-family--soft .aff-tool { border: 0; border-radius: var(--fam-r); box-shadow: var(--fam-shadow); }
.aff-family--soft .aff-tool__input, .aff-family--soft .aff-tool__out > div { border-radius: 14px; }
.aff-family--soft .aff-tool__out > div { border-left: 0; background: var(--fam-tint); }
.aff-family--soft .aff-tool__title::before { border-radius: 50%; }
.aff-family--sporty .aff-tool { border: 0; border-top: 5px solid var(--brand); border-radius: 4px; box-shadow: 0 10px 22px rgba(15,23,42,.06); }
.aff-family--sporty .aff-tool__title, .aff-family--sporty .aff-tool__out dd { font-family: var(--fam-display); text-transform: uppercase; font-weight: 800; }
.aff-family--sporty .aff-tool__title { font-size: 1.5rem; }
.aff-family--sporty .aff-tool__out dd { font-size: 1.5rem; font-style: italic; }
.aff-family--sporty .aff-tool__title::before { border-radius: 0; transform: skewX(-14deg); }
.aff-family--sporty .aff-tool__switch label, .aff-family--sporty .aff-tool__input, .aff-family--sporty .aff-tool__out > div { border-radius: 2px; }
.aff-family--magazine .aff-tool { border: 0; border-top: 3px solid var(--fam-rule); border-bottom: 1px solid var(--fam-rule); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.aff-family--magazine .aff-tool__title, .aff-family--magazine .aff-tool__out dd { font-family: var(--fam-serif); }
.aff-family--magazine .aff-tool__title { font-weight: 600; font-size: 1.5rem; }
.aff-family--magazine .aff-tool__title::before { display: none; }
.aff-family--magazine .aff-tool__switch label, .aff-family--magazine .aff-tool__input { border-radius: 0; }
.aff-family--magazine .aff-tool__out > div { border-radius: 0; background: none; border-left: 0; border-top: 1px solid var(--fam-hair); padding-left: 0; }
.aff-family--magazine .aff-tool__note { font-family: var(--fam-text); font-style: italic; }
.aff-family--lab .aff-tool { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; padding-top: 0; }
.aff-family--lab .aff-tool__title { margin: 0 -22px 16px; padding: 8px 22px; background: var(--ink); color: #fff; font-family: var(--fam-mono); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.aff-family--lab .aff-tool__title::before { display: none; }
.aff-family--lab .aff-tool__switch label, .aff-family--lab .aff-tool__input, .aff-family--lab .aff-tool__out > div { border-radius: 0; }
.aff-family--lab .aff-tool__switch label, .aff-family--lab .aff-tool__unit, .aff-family--lab .aff-tool__input input,
.aff-family--lab .aff-tool__out dd, .aff-family--lab .aff-tool__out dt, .aff-family--lab .aff-tool__note { font-family: var(--fam-mono); }
.aff-family--lab .aff-tool__out > div { background: var(--fam-paper); border: 1px solid var(--fam-line); border-left: 3px solid var(--brand); }
@media (max-width: 600px) {
  .aff-family--lab .aff-tool__title { margin: 0 -14px 14px; padding: 8px 14px; }
}