/* ==========================================================================
   twinkiedeconstructed: design system
   Palette D (warm cream, espresso, olive, paprika, with a cool steel for the bands) with Bitter + Source Sans 3.

   Contents
     1. Fonts
     2. Tokens (colors, type, space, shape, layout)
     3. Reset and base
     4. Typography and prose
     5. Layout, sections and color contexts
     6. Buttons
     7. Badges, scores, stars
     8. Forms and search
     9. Cards and grids
    10. Logo, header and navigation
    11. Split hero and search overlay
    12. Product box and pros/cons
    13. Comparison table
    14. Table of contents
    15. FAQ
    16. Breadcrumbs, chips, category directory
    17. Disclosure
    18. Signup and newsletter form
    19. Footer
    20. AAWP compatibility
    21. Utilities, motion, print

   Rules this file enforces
     - BEM: block__element--modifier, single-class selectors. Documented
       exceptions: .prose, table internals inside .compare, "> li" of lists
       that core blocks generate, ARIA attribute selectors, AAWP selectors.
     - Mobile-first: base styles are the phone layout; @media (min-width) only.
     - Paprika is the only action color. Color contexts below are named like
       the classes WordPress generates for block background colors
       (.has-steel-background-color and friends), so markup moves to a block
       theme unchanged. Inside olive or espresso, buttons turn cream by
       themselves through the --action variables (paprika on olive is only
       2.0:1). Inside steel, links deepen to keep 4.5:1.
     - Pros and cons are marked with + and - signs, never by color alone.
     - Every interactive control is at least 44px tall (--target).

   Contrast (WCAG, computed)
     espresso on cream 16.4 | muted on cream 7.0 | olive on cream 10.4
     paprika on cream 5.1 | white on paprika 5.5 | cream on olive 10.4
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------
   Self-hosted. theme.json (settings.typography.fontFamilies) declares the two latin variable files in assets/fonts/ and WordPress prints the
   @font-face rules; there is nothing to load here. Italics are not loaded, so <em> uses the browser's slanted version. */


/* 2. Tokens -------------------------------------------------------------- */
:root {
  /* Brand colors */
  --cream: #FAF7F2;
  --steel: #D8DEDA;
  --white: #FFFFFF;
  --espresso: #1C1917;
  --olive: #2E4033;
  --paprika: #B94121;

  /* Derived colors */
  --muted: #5C534B;            /* 7.0:1 on cream, 5.5:1 on steel */
  --tint: #FBE7DD;             /* "Best overall" highlight */
  --cream-deep: #F3EDE3;       /* a quiet panel on the cream page (espresso 15.0:1, muted 6.5:1, paprika 4.7:1) */
  --line: #DDD5C8;             /* decorative dividers only */
  --border-strong: #7D7267;    /* inputs and controls, 3.5:1 or better everywhere */
  --paprika-hover: #9C3619;    /* hover link, hover button (white text 7.1:1) */
  --paprika-pressed: #862D16;  /* pressed button */
  --paprika-on-steel: #9C3619;   /* links on steel (5.2:1) */
  --star: #A85A00;             /* rating stars (4.3:1 or better) */
  --error: #9B2C1F;            /* form errors (7.1:1 on cream) */
  --muted-on-dark: #CFC7BB;    /* secondary text on olive or espresso (6.6:1) */

  /* Overlays and lines on dark surfaces */
  --line-faint-on-dark: rgba(250, 247, 242, 0.06);   /* the footer separator: barely there */
  --hover-on-dark: rgba(250, 247, 242, 0.12);
  --panel-on-dark: rgba(250, 247, 242, 0.08);   /* flat tinted rows and panels on olive or espresso */

  /* Roles: use these in components, not the raw colors */
  --bg: var(--cream);
  --surface: var(--white);
  --numeral: var(--steel);   /* decorative large numerals; context classes lighten it on dark bands */
  --text: var(--espresso);
  --text-muted: var(--muted);
  --text-quiet: #A5A3A2;   /* owner's value (2026-10-29) for the affiliate notice above a post title; about 2.4:1 on the cream page, below the AA minimum of 4.5:1 */
  --heading: var(--olive);
  --link: var(--paprika);
  --link-hover: var(--paprika-hover);
  --action: var(--paprika);
  --action-hover: var(--paprika-hover);
  --action-pressed: var(--paprika-pressed);
  --action-text: var(--white);
  --outline-hover-bg: var(--tint);
  --highlight: var(--tint);
  --pro: var(--olive);
  --con: var(--muted);
  --focus: var(--espresso);

  /* Type */
  --font-heading: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;   /* code only; system fonts, nothing to load */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-200: 0.7375rem;                                  /* 11.8px finest print: the affiliate notice above a post (owner's value) */
  --fs-300: 0.875rem;                                   /* 14px small print */
  --fs-400: 1.125rem;                                   /* 18px body */
  --fs-500: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem); /* lead text */
  --fs-600: 1.375rem;                                   /* small headings */
  --fs-700: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);    /* h3 */
  --fs-800: clamp(1.75rem, 1.45rem + 1.3vw, 2.375rem);  /* h2 */
  --fs-900: clamp(1.75rem, 0.9rem + 2.9vw, 3.5rem);     /* h1 and the secondary category names; keeps the h1 to three lines at every width */
  --fs-1000: clamp(3rem, 1rem + 5vw, 5.5rem);            /* display: the lead category name, used once */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Space (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-m: 0 6px 20px rgba(28, 25, 23, 0.09);
  --target: 2.75rem;           /* minimum height of any control: 44px */

  /* Layout */
  --container: 80rem;
  --container-narrow: 46rem;
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 1.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);   /* quick start, long soft landing */
  --duration-reveal: 0.7s;
  /* Breakpoints used in this file (custom properties cannot be used in
     media queries): 40em for tablets, 64em for desktops. Always min-width. */
}


/* 3. Reset and base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-400) / var(--lh-body) var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }
hr { border: 0; margin: var(--space-6) 0; }   /* spacing only: no rule is drawn */
button, input, select, textarea { font: inherit; color: inherit; }

/* Keyboard focus: always visible, never removed */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--tint); color: var(--espresso); }


/* 4. Typography and prose ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-600); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); }
.lead { font-size: var(--fs-500); line-height: 1.55; max-width: 52ch; }
small, .small { font-size: var(--fs-300); }
.text-muted { color: var(--text-muted); }
strong, b { font-weight: var(--fw-bold); }

/* Links: always underlined in running text so color is never the only cue */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 0.14em;
}

/* Long-form article body (the Post Content block). Tag selectors are allowed here: editors cannot add classes to this markup.

   Vertical rhythm. Every gap is a step of the space scale (4 px to 96 px), so the same element is spaced the same way on every page.
   The text is 18 to 21 px on a 1.65 line, so one text line is about 30 to 35 px; the steps below are multiples of 8 px.

     Between blocks (paragraph, list, quote, figure, table, component)   --flow      24 px
     Above a heading            h2 64 px    h3 48 px    h4 to h6 32 px
     Heading to the text under it (tight)   h2 16 px    h3 12 px    h4 to h6 8 px
     Heading to a component under it        h2 32 px    h3 24 px     (FAQ, pros and cons, product box, table wrapper)
     List items 8 px; a nested list or a paragraph inside an item 8 px; list indent 24 px
     Quote: 24 px indent behind a 4 px bar, 12 px between its parts; figure caption 8 px under the image
     Divider (hr): 48 px above and below, no line drawn; code block padding 16 px

   Headings have no bottom margin here: the element under them sets the gap, so there is one rule per pair and nothing collapses by accident.
   An element that comes first in the prose has no top margin. Change a step here, never in a template or a component. */
.prose { --flow: var(--space-5); max-width: var(--measure); overflow-wrap: break-word; }   /* a long URL in the text wraps instead of widening the page */
.prose > * + * { margin-top: var(--flow); margin-bottom: 0; }
.prose > :where(h2, h3, h4, h5, h6) { margin-bottom: 0; }
.prose > h2 { margin-top: var(--space-8); }
.prose > h3 { margin-top: var(--space-7); }
.prose > :where(h4, h5, h6) { margin-top: var(--space-6); }
.prose > h2 + * { margin-top: var(--space-4); }
.prose > h3 + * { margin-top: var(--space-3); }
.prose > :where(h4, h5, h6) + * { margin-top: var(--space-2); }
/* A component block right after a heading gets a larger gap than text does */
.prose > h2 + :where(div, section, figure, table, .products) { margin-top: var(--space-6); }
.prose > h3 + :where(div, section, figure, table, .products) { margin-top: var(--space-5); }

/* Lists. :where keeps these at the lowest specificity, so lists inside components (.proscons__list, .toc__list) keep their own spacing. */
.prose :where(ul, ol) { padding-left: var(--space-5); }
.prose :where(li + li) { margin-top: var(--space-2); }
.prose :where(li > ul, li > ol) { margin-top: var(--space-2); }
.prose :where(li > p + p) { margin-top: var(--space-2); }
.prose :where(li > p) { margin-bottom: 0; }
.prose dt { font-weight: var(--fw-bold); }
.prose dd { margin: 0 0 var(--space-3) var(--space-5); }

/* Quote: a bar, an indent, the heading font; its parts are 12 px apart and its source line is small */
.prose blockquote {
  margin-inline: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 4px solid var(--paprika);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}
.prose blockquote > * { margin-bottom: 0; }
.prose blockquote > * + * { margin-top: var(--space-3); }
.prose blockquote :where(cite, footer) { display: block; color: var(--text-muted); font: normal var(--fw-semibold) var(--fs-300) / 1.4 var(--font-body); }

/* Figures, rules, code */
.prose img { border-radius: var(--radius); }
.prose figure img { display: block; }   /* an inline image leaves a gap under it for the text descender */
.prose figcaption { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-300); }
.prose > hr { margin-block: var(--space-7); }
.prose pre { margin-bottom: 0; padding: var(--space-4); overflow-x: auto; background: var(--cream-deep); border-radius: var(--radius); font: var(--fw-regular) var(--fs-300) / 1.5 var(--font-mono); }
.prose code { padding: 0.1em 0.35em; background: var(--cream-deep); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: 0.9em; }
.prose pre code { padding: 0; background: none; font-size: inherit; }

/* Tables and embeds */
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: var(--space-3); text-align: left; }
.prose tr:nth-child(even) > * { background: var(--cream-deep); }
.prose th { color: var(--heading); font-weight: var(--fw-bold); }
.prose iframe, .prose video { width: 100%; border-radius: var(--radius); }


/* 5. Layout, sections and color contexts ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--flush-top { padding-top: 0; }

.section__head { margin-bottom: var(--space-6); }
.section__lede { max-width: 60ch; margin-bottom: 0; color: var(--text-muted); }
.section__link { justify-self: start; font-weight: var(--fw-bold); }
/* Heading on the left, link on the right (stacked on phones) */
.section__head--row { display: grid; gap: var(--space-3); }
.section__intro { max-width: 60ch; }
@media (min-width: 40em) {
  .section__head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3) var(--space-6); }
}

/* Color contexts. These are the same class names WordPress generates when the
   theme.json palette has the slugs "steel", "olive" and "espresso", so the
   markup needs no renaming in the block theme. */
.has-steel-background-color {
  background-color: var(--steel);
  --link: var(--paprika-on-steel);
}
.has-olive-background-color,
.has-espresso-background-color {
  color: var(--cream);
  --numeral: var(--hover-on-dark);
  --text: var(--cream);
  --heading: var(--cream);
  --text-muted: var(--muted-on-dark);
  --link: var(--cream);
  --link-hover: var(--white);
  --focus: var(--cream);
  /* buttons turn cream here, with no extra selectors */
  --action: var(--cream);
  --action-hover: var(--white);
  --action-pressed: var(--steel);
  --action-text: var(--espresso);
  --outline-hover-bg: var(--hover-on-dark);
}
.has-white-background-color { background-color: var(--white); }
.has-cream-deep-background-color { background-color: var(--cream-deep); }
.has-olive-background-color { background-color: var(--olive); }
.has-espresso-background-color { background-color: var(--espresso); }

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius-s);
}
.skip-link:focus { top: var(--space-3); }

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


/* 6. Buttons --------------------------------------------------------------
   Colors come from the --action variables, so a button restyles itself inside
   any color context. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--target);
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--action);
  border-radius: var(--radius-s);
  background: var(--action);
  color: var(--action-text);
  font: var(--fw-bold) 1rem / 1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--action);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.08s, transform 0.08s;
}
.btn:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--action-hover);
}
.btn:active {
  background: var(--action-pressed);
  border-color: var(--action-pressed);
  box-shadow: 0 1px 0 var(--action-pressed);
  transform: translateY(2px);
}
.btn--lg { min-height: 3.25rem; padding: 0.9rem 1.6rem; font-size: 1.125rem; }
.btn--block { display: flex; width: 100%; }
.btn--arrow::after { content: "\2192"; }   /* right arrow */

/* Outline button: uses the link color, so it deepens on steel and turns cream on dark */
.btn--outline {
  background: transparent;
  color: var(--link);
  border-color: currentColor;
  box-shadow: none;
}
.btn--outline:hover,
.btn--outline:active {
  background: var(--outline-hover-bg);
  color: var(--link-hover);
  border-color: currentColor;
  box-shadow: none;
}


/* 7. Badges, scores, stars --------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  background: var(--highlight);
  color: var(--espresso);
  border-radius: var(--radius-pill);
  font: var(--fw-bold) 0.8125rem / 1 var(--font-body);
}

.score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--olive);
  color: var(--white);
  border-radius: var(--radius-s);
  font: var(--fw-bold) 1.0625rem / 1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.stars { color: var(--star); letter-spacing: 0.12em; white-space: nowrap; }


/* 8. Forms and search ----------------------------------------------------- */
label { font-weight: var(--fw-semibold); }

.field {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65rem 0.9rem;
  background: var(--white);
  color: var(--espresso);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-s);
}
.field--lg { min-height: 3.5rem; padding: 0.8rem 1.1rem; font-size: 1.25rem; }
.field::placeholder { color: var(--muted); opacity: 1; }
.field:hover { border-color: var(--espresso); }
.field[aria-invalid="true"] { border-color: var(--error); }

.form-message { margin: var(--space-2) 0 0; font-size: var(--fs-300); }
.form-message--error { color: var(--error); font-weight: var(--fw-semibold); }
.form-message--hint { color: var(--text-muted); }

.search { display: flex; gap: var(--space-2); max-width: 36rem; }
.search__field { flex: 1 1 auto; min-width: 0; }



/* 9. Cards and grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.card {
  /* A card is always white, so it sets its own text roles. This keeps it readable on olive or espresso bands. */
  --heading: var(--olive);
  --text: var(--espresso);
  --text-muted: var(--muted);
  --link: var(--paprika);
  --focus: var(--espresso);
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-m); }
.card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Tile: a row with a square thumbnail on phones, a picture-on-top card from 40em */
/* Row: a square thumbnail beside the text at every width */
.card--row { flex-direction: row; align-items: center; }
.card__image--row { flex: none; width: 6.5rem; aspect-ratio: 1; }
@media (min-width: 64em) {
  .card__image--row { width: 7.5rem; }
}
.card--tile { flex-direction: row; align-items: center; }
.card__image--tile { flex: none; width: 6.5rem; aspect-ratio: 1; }
@media (min-width: 40em) {
  .card--tile { flex-direction: column; align-items: stretch; }
  .card__image--tile { width: 100%; aspect-ratio: 16 / 9; }
}
.card__body { min-width: 0; padding: var(--space-4) var(--space-5) var(--space-5); }   /* min-width lets a long title shrink inside a row card instead of pushing it wider */
.card__title {
  margin: 0 0 var(--space-2);
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* headings stay at three lines; the full title is still in the HTML */
  line-clamp: 3;
  overflow: hidden;
}
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.card__link:hover { text-decoration: underline; }
/* Flat card: image and title on the page, no box (related posts) */
.card--flat { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.card--flat:hover { box-shadow: none; }
.card__image--round { border-radius: var(--radius); }
.card__body--flat { padding-inline: 0; }



/* 10. Logo, header and navigation ------------------------------------------ */
.logo { display: inline-block; }
.logo__image { display: block; height: 2.75rem; width: auto; }
/* Header logo that shrinks so the Menu button fits beside it on narrow phones */
.logo--shrink { max-width: 14rem; min-width: 0; }
.logo__image--fluid { width: 100%; height: auto; }
@media (min-width: 40em) {
  .logo--shrink { max-width: 17rem; }
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "logo search menu" "nav nav nav";
  align-items: center;
  column-gap: var(--space-1);
  padding-block: var(--space-3);
}
.site-header__logo { grid-area: logo; justify-self: start; }

/* Navigation. Phones: big tappable rows with an arrow, inside a panel that opens and closes smoothly.
   From 64em: plain inline links. */
.site-nav__list {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  margin: 0;
  padding: 0 var(--space-2);
  overflow: hidden;   /* clips the list while its panel is collapsed */
  list-style: none;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--target);
  padding: var(--space-3) var(--space-5);
  background: var(--panel-on-dark);
  border-radius: var(--radius);
  color: var(--link);
  font: var(--fw-semibold) var(--fs-500) / var(--lh-snug) var(--font-heading);
  text-decoration: none;
}
.site-nav__link::after { content: "\2192"; font-family: var(--font-body); }   /* right arrow, phones only */
.site-nav__link:focus-visible { outline-offset: -3px; }   /* the ring stays inside the row, so the list can clip */
@media (hover: hover) {
  .site-nav__link:hover { background: var(--hover-on-dark); }
}
.site-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.12em; }
@media (min-width: 64em) {
  .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); padding: 0; overflow: visible; opacity: 1; transform: none; transition: none; }
  .site-nav__link { display: inline-flex; justify-content: flex-start; padding: 0; background: none; border-radius: 0; font: var(--fw-semibold) 1rem / 1.5 var(--font-body); }
  .site-nav__link::after { content: none; }
  .site-nav__link:focus-visible { outline-offset: 3px; }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.12em; background: none; }
}


/* Icon buttons (search, menu, close): 44px, drawn with CSS only */
.icon-button {
  position: relative;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--link);
  cursor: pointer;
  transition: background-color 0.15s;
}
@media (hover: hover) {
  .icon-button:hover { background-color: var(--outline-hover-bg); }
}
.icon-button::before,
.icon-button::after {
  content: "";
  position: absolute;
  transition: all 0.25s ease;
}
/* Search: a ring and a handle */
.icon-button--search::before { left: 10px; top: 10px; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.icon-button--search::after { left: 23px; top: 23px; width: 9px; height: 2px; background: currentColor; transform-origin: 0 50%; transform: rotate(45deg); }
/* Close: a cross */
.icon-button--close::before,
.icon-button--close::after { left: 12px; top: 21px; width: 20px; height: 2px; background: currentColor; }
.icon-button--close::before { transform: rotate(45deg); }
.icon-button--close::after { transform: rotate(-45deg); }
/* Menu: three bars, which turn into a cross while the menu is open */
.icon-button--menu { background: linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat; transition: background-color 0.15s, background-size 0.25s ease; }
.icon-button--menu::before,
.icon-button--menu::after { left: 12px; width: 20px; height: 2px; background: currentColor; }
.icon-button--menu::before { top: 14px; }
.icon-button--menu::after { top: 28px; }
.icon-button--menu[aria-expanded="true"] { background-size: 0 2px; }
.icon-button--menu[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
.icon-button--menu[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }

/* Header placement. Phones: logo, search icon, menu icon; the nav opens below.
   From 64em: logo left, nav and search icon right. Search opens the full-screen
   .finder. Without JavaScript, css/no-js.css shows the nav and the finder inline. */
.site-header__search-toggle { grid-area: search; }
.site-header__toggle { grid-area: menu; }
/* The panel is always in the page but collapsed to zero height and hidden from keyboard and screen readers
   (visibility) until the Menu button opens it. The height animates through the grid row, so no height is hard-coded. */
.site-header__panel {
  grid-area: nav;
  display: grid;
  grid-template-rows: 0fr;
  padding-block: 0;   /* the open state adds the space, so the collapsed panel is exactly 0 high */
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
}
.site-header__panel--open { grid-template-rows: 1fr; padding-block: var(--space-2) var(--space-4); visibility: visible; transition: grid-template-rows 0.3s ease, padding 0.3s ease, visibility 0s; }
.site-header__panel--open .site-nav__list { opacity: 1; transform: none; }

@media (min-width: 64em) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav search";
    column-gap: var(--space-6);
  }
  .site-header__toggle { display: none; }
  .site-header__panel { display: block; justify-self: end; padding-block: 0; visibility: visible; transition: none; }
  .site-header__search-toggle { margin-left: calc(var(--space-4) * -1); }
}


/* 11. Split hero and search overlay ----------------------------------------------------------------
   Photo hero. The overlay is espresso, so a paprika button still has a
   visible shape (3.2:1). Keep the overlay at 0.6 or darker behind the text. */

/* Split hero: text on the page color, photo beside it (stacked on phones).
   No text sits on a photo, so there is no overlay to measure. */
.hero-split { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.hero-split__inner { display: grid; gap: var(--space-6) var(--space-8); align-items: center; }
.hero-split__title { max-width: 24ch; margin-bottom: var(--space-4); }
.hero-split__lead { max-width: 46ch; margin-bottom: var(--space-6); }
.hero-split__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}
@media (min-width: 64em) {
  .hero-split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}


/* Finder: full-screen search with category tiles. A native <dialog>, so the
   browser handles focus, Escape and the inert page behind it. */
.finder {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text);
}
/* Opening: the overlay fades in and the content rises a little after it. Closing (header.js adds .finder--closing
   and waits for the animation to end before it calls close()): both fade out. The parent's state drives its child,
   which is one of the documented selector exceptions. Reduced motion shortens all of it through the global rule. */
.finder[open] { display: block; animation: finder-fade-in 0.25s ease both; }
.finder--closing[open] { animation: finder-fade-out 0.2s ease both; }
.finder[open] .finder__inner { animation: finder-rise 0.4s ease-out 0.06s both; }
.finder--closing[open] .finder__inner { animation: finder-sink 0.2s ease both; }
@keyframes finder-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes finder-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes finder-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}
@keyframes finder-sink {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(0.5rem); }
}
.finder__bar { padding-block: var(--space-3); }
.finder__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.finder__inner { display: grid; gap: var(--space-5); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem); }
.finder__title { margin: 0; }
.finder__form { max-width: none; }
.finder__subtitle { margin: var(--space-4) 0 0; font-size: var(--fs-700); }
.is-locked { overflow: hidden; }


/* 12. Product box and pros/cons -------------------------------------------- */
.product {
  position: relative;
  display: grid;
  gap: var(--space-5) var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
@media (min-width: 40em) {
  .product { grid-template-columns: minmax(0, 15rem) 1fr; }
}
.product__ribbon { position: absolute; top: -0.8rem; left: var(--space-5); }
.product__image { display: block; width: 100%; border-radius: var(--radius-s); }
.product__title { margin-bottom: var(--space-2); font-size: var(--fs-700); }
.product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--text-muted); font-size: 1rem; }
.product__note { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-300); }

.proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4) var(--space-6); margin: var(--space-4) 0 var(--space-5); }
.proscons__group { min-width: 0; }
.proscons__group--pro { --mark: "+"; --mark-color: var(--pro); }
.proscons__group--con { --mark: "\2212"; --mark-color: var(--con); }   /* minus sign */
.proscons__title { margin-bottom: var(--space-2); color: var(--text); font: var(--fw-bold) 1rem / 1.2 var(--font-body); }
.proscons__list { margin: 0; padding: 0; list-style: none; }
/* "> li" is allowed: the List block gives the <ul> a class but not its items.
   The + and minus signs carry the meaning, color only reinforces it. */
.proscons__list > li { position: relative; margin: var(--space-2) 0; padding-left: 2rem; }
.proscons__list > li::before {
  content: var(--mark);
  position: absolute;
  left: 0;
  top: 0.2em;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--mark-color);
  font: var(--fw-bold) 0.9rem / 1 var(--font-body);
}


/* 13. Comparison table -----------------------------------------------------
   .compare is the scroll container (give it tabindex="0", role="region" and a
   label so keyboard users can scroll it). Tag selectors for the table
   internals are allowed because the Table block and AAWP tables give cells no
   classes. .is-best is a state class on the highlighted column. */
.compare { position: relative; overflow-x: auto; background: var(--surface); border-radius: var(--radius); }   /* relative: the visually-hidden spans inside the table are absolutely positioned and would otherwise escape the scroll area and widen the page */
.compare table { width: 100%; min-width: 40rem; table-layout: fixed; border-collapse: collapse; font-size: 1rem; }
.compare caption { padding: var(--space-3) var(--space-4); color: var(--text-muted); font-size: var(--fs-300); text-align: left; caption-side: bottom; }
.compare th, .compare td { padding: var(--space-3) var(--space-4); text-align: center; vertical-align: middle; }
.compare tbody th, .compare td:first-child { width: 6rem; color: var(--text-muted); font-weight: var(--fw-semibold); text-align: left; }
.compare thead th { padding-inline: var(--space-3); color: var(--heading); font: var(--fw-semibold) 1rem / 1.2 var(--font-heading); vertical-align: bottom; }
.compare tbody tr:nth-child(even) > :not(.is-best) { background: var(--cream); }
.compare .is-best { background: var(--highlight); }
.compare__brand { display: block; margin-top: 0.15rem; color: var(--text-muted); font: var(--fw-regular) 0.875rem / 1.3 var(--font-body); }
.compare .is-best .compare__brand { color: var(--text); }
/* 13b. Product list --------------------------------------------------------
   The AAWP table, one card per product: name and brand, then the facts as label and value pairs, then the button. Replaces
   the wide .compare table for AAWP output, which squeezed six products into 100 px columns. One column on phones; from 40em
   the button sits at the right of the card. A card with a photo (Amazon data) adds .products__item--image. */
.products { display: grid; gap: var(--space-4); padding: 0; list-style: none; }   /* no margin here: .prose sets the space above and below */
.products__item { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-5); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.products__item--best { background: var(--highlight); }
.products__image { width: 6rem; height: auto; border-radius: var(--radius-s); }
.products__name { color: var(--heading); font: var(--fw-semibold) var(--fs-600) / var(--lh-snug) var(--font-heading); }
.products__brand { display: block; margin-top: var(--space-1); color: var(--text-muted); font: var(--fw-regular) var(--fs-300) / 1.3 var(--font-body); }
.products__item--best .products__brand { color: var(--text); }
.products__link { color: inherit; text-decoration: none; }   /* the name links to the same Amazon page as the button */
@media (hover: hover) {
  .products__link:hover { text-decoration: underline; }
}
.products__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; }
.products__spec { margin: 0; }
.products__label { display: block; color: var(--text-muted); font-size: var(--fs-300); line-height: 1.3; }
.products__item--best .products__label { color: var(--text); }
.products__value { display: block; font-size: 1rem; font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.products__buy { justify-self: start; }
@media (min-width: 40em) {
  .products__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name buy" "specs buy"; align-items: center; column-gap: var(--space-6); }
  .products__item--image { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "image name buy" "image specs buy"; }
  .products__image { grid-area: image; }
  .products__name { grid-area: name; }
  .products__specs { grid-area: specs; }
  .products__buy { grid-area: buy; justify-self: end; }
}


/* 14. Table of contents ---------------------------------------------------
   A numbered list beside a 3px track; the section being read (aria-current="location", set by js/article.js)
   darkens its part of the track and its text. The numbers are decorative CSS counters (empty alt text).
   It is a white card; the post template turns it into a panel that an icon opens (.contents in article.css). The small size keeps a long list short;
   rows are 44px high on phones and 36px from 64em, where a mouse is the usual pointer. */
.toc { padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface); border-radius: var(--radius); counter-reset: toc; }
.toc__title { margin: 0 0 var(--space-2); color: var(--heading); font: var(--fw-bold) 1rem / 1.2 var(--font-body); }
.toc__list { margin: 0; padding: 0; list-style: none; }
.toc__item { margin: 0; counter-increment: toc; }
.toc__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--target);
  padding: 0.5rem 0 0.5rem var(--space-3);
  border-left: 3px solid var(--steel);
  color: var(--text-muted);
  font-size: var(--fs-300);
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.toc__link::before { content: counter(toc, decimal-leading-zero) / ""; flex: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .toc__link:hover { color: var(--text); }
}
@media (min-width: 64em) {
  .toc__link { min-height: 2.25rem; padding-block: 0.35rem; }
}
.toc__link[aria-current="location"] { border-left-color: var(--heading); color: var(--text); font-weight: var(--fw-semibold); }


/* 15. FAQ ------------------------------------------------------------------ */
.faq__item { margin: 0 0 var(--space-3); background: var(--cream-deep); border-radius: var(--radius); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; flex: none; color: var(--link); font: var(--fw-bold) 1.5rem / 1 var(--font-body); }
.faq__item[open] .faq__question::after { content: "\2212"; }
.faq__item.is-closing .faq__question::after { content: "+"; }   /* js/faq.js: the icon flips as the answer starts to slide shut */
.faq__answer { padding: 0 var(--space-5) var(--space-4); }
.faq__answer > :last-child { margin-bottom: 0; }


/* 16. Breadcrumbs, chips, category directory --------------------------------- */
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: var(--space-2); color: var(--text-muted); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chips__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--target);
  padding: 0.4rem 0.95rem;
  background: var(--surface);
  color: var(--espresso);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.chips__link:hover,
.chips__link[aria-current="true"] { background: var(--olive); color: var(--white); border-color: var(--olive); }

/* Browse by category: intro on the left (sticky from 64em), one panel per category on the right */
.browse { display: grid; gap: var(--space-6) var(--space-8); }
.browse__lede { max-width: 32ch; margin: 0 0 var(--space-5); color: var(--text-muted); font-size: var(--fs-500); }
@media (min-width: 64em) {
  .browse { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; }
  .browse__intro { position: sticky; top: var(--space-6); }
}

.directory { display: grid; grid-auto-rows: 1fr; gap: var(--space-5); counter-reset: topic; }
.directory__group {
  display: grid;
  align-content: start;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5);
  color: var(--text);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  counter-increment: topic;
}
.directory__head::before {
  content: counter(topic, decimal-leading-zero) / "";   /* decorative numeral */
  display: block;
  margin-bottom: var(--space-2);
  color: var(--numeral);
  font: var(--fw-semibold) 2.75rem / 1 var(--font-heading);
  font-variant-numeric: tabular-nums;
}
.directory__title { margin: 0; font-size: var(--fs-800); }
.directory__list { margin: 0; padding: 0; list-style: none; }
.directory__item { padding: var(--space-1) 0; }
.directory__link {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-6) var(--space-2) 0;
  color: var(--text);
  font-weight: var(--fw-semibold);
  text-decoration-color: var(--link);
  text-underline-offset: 0.25em;
}
.directory__link::after { content: "\2192"; position: absolute; right: var(--space-1); top: var(--space-2); color: var(--link); transition: transform 0.15s; }
@media (hover: hover) {
  .directory__link:hover::after { transform: translateX(0.25rem); }
}
.directory__all { font-weight: var(--fw-bold); }
@media (min-width: 40em) {
  .directory__group { grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.5fr); padding: var(--space-6); }
  .directory__head { grid-row: 1 / 3; }
  .directory__head::before { font-size: 4rem; }
  .directory__all { grid-column: 2; }
}

/* Stacking cards: every panel sticks at the same spot and the next one slides over it,
   so the panels are the same height and the last one covers the others completely.
   Only with motion allowed and a tall enough screen, so no card is ever taller than the view. */
@media (prefers-reduced-motion: no-preference) and (min-height: 44rem) {
  .directory__group { position: sticky; top: var(--space-5); box-shadow: var(--shadow-m); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .directory__group { animation: directory-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes directory-in {
  from { opacity: 0; transform: translateY(3rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}


/* 17. Disclosure ----------------------------------------------------------- */
.disclosure { margin: var(--space-3) 0 0; max-width: 70ch; color: var(--text-muted); font-size: 0.9375rem; }


/* 18. Signup and newsletter form ------------------------------------------------------- */
/* One pill: the email field and the button are joined inside a single outlined shape */
.newsletter__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem;
  border: 2px solid var(--olive);
  border-radius: var(--radius-pill);
}
.newsletter__form:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.newsletter__field { border-color: transparent; border-radius: var(--radius-pill); background: transparent; color: var(--text); }
.newsletter__field:hover { border-color: transparent; }
.newsletter__field:focus-visible { outline: none; }
.newsletter__field::placeholder { color: var(--text-muted); }
.newsletter__button { border-radius: var(--radius-pill); box-shadow: none; }
.newsletter__note { margin: var(--space-3) 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-300); }

/* Signup panel (used on the homepage and at the end of posts and archives): one white panel on cream,
   text on the left and the pill form (.newsletter__form) on the right */
.signup {
  display: grid;
  gap: var(--space-5) var(--space-8);
  align-items: center;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.signup__title { margin: 0 0 var(--space-2); font-size: var(--fs-800); }
.signup__text { max-width: 34ch; margin: 0; color: var(--text-muted); font-size: var(--fs-500); }
@media (min-width: 64em) {
  .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-7); }
}


/* 19. Footer ---------------------------------------------------------------- */
.site-footer { padding-block: var(--space-8) 0; font-size: 1rem; }
.site-footer__grid { display: grid; gap: var(--space-7) var(--space-6); margin-bottom: var(--space-6); }
.site-footer__logo { margin-bottom: var(--space-4); }
.site-footer__about { max-width: 30ch; margin: 0; color: var(--text-muted); font-size: var(--fs-500); line-height: 1.5; }
.site-footer__title { margin-bottom: var(--space-3); font-size: var(--fs-600); }
.site-footer__list { margin: 0; padding: 0; list-style: none; }
.site-footer__item { padding: var(--space-1) 0; }
.site-footer__link { text-decoration: none; }
.site-footer__link--credit { display: inline-block; padding-block: var(--space-2); }
@media (hover: hover) {
  .site-footer__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
.site-footer__bar { margin-top: var(--space-5); padding-block: var(--space-4); border-top: 1px solid var(--line-faint-on-dark); }   /* full-width separator below the disclaimer, requested by the owner; barely visible */
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-5); }
.site-footer__legal { max-width: 62ch; margin: 0; color: var(--muted-on-dark); font-size: 0.8125rem; line-height: 1.5; }
.site-footer__copyright { margin: 0; color: var(--muted-on-dark); font-size: 0.9375rem; }
.site-footer__credit { margin: 0; font-size: 0.9375rem; font-weight: var(--fw-semibold); }
@media (min-width: 40em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__about-block { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__about-block { grid-column: auto; }
}


/* 20. AAWP compatibility ----------------------------------------------------
   The product boxes and tables stay AAWP shortcodes. These rules restyle the
   plugin's own markup (class names taken from the old theme's aawp templates)
   so the boxes match this system. They are the only descendant chains allowed,
   because the markup belongs to the plugin. Load this file after AAWP's
   stylesheet. Not yet tested against live AAWP output: the live site had no
   AAWP product data when this file was written. */
.aawp .aawp-product {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: center;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}
.aawp .aawp-product__title { color: var(--heading); font: var(--fw-semibold) var(--fs-600) / var(--lh-snug) var(--font-heading); text-decoration: none; }
.aawp .aawp-product__title:hover { text-decoration: underline; }
.aawp .aawp-product__price { color: var(--text); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.aawp .aawp-product__price--old { color: var(--text-muted); font-weight: var(--fw-regular); }
.aawp .aawp-product__reviews { color: var(--text-muted); }
.aawp a.aawp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0.75rem 1.25rem;
  background: var(--action);
  border: 2px solid var(--action);
  border-radius: var(--radius-s);
  color: var(--action-text);
  font: var(--fw-bold) 1rem / 1.2 var(--font-body);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--action);
}
.aawp a.aawp-button:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-text); }
@media (min-width: 40em) {
  .aawp a.aawp-button { margin-inline-start: auto; }   /* the button sits at the right edge of the box; on phones it wraps under the name */
}
.aawp .aawp-tb__head { color: var(--text-muted); font-weight: var(--fw-semibold); }
.aawp .aawp-tb__row--highlight, .aawp .aawp-tb__data--highlight { background: var(--highlight); }


/* 21. Utilities, motion, print ---------------------------------------------- */
/* Reveal on scroll. js/reveal.js adds .reveal only to elements that start below the fold, then .is-revealed when they
   scroll into view, so with JavaScript off, or with reduced motion, nothing is ever hidden. The script sets each
   element's transition-delay (a short stagger) and removes both classes when the transition ends. */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}
.is-revealed { opacity: 1; transform: none; }
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .btn, .chips__link, .badge, .score { border: 2px solid ButtonText; }
}

@media print {
  .site-header, .site-footer, .toc, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; }
}