/* == tokens.css == */
/* ============ TOKENS — COMICS RETRO (2026-08-09) ============
   The site read as "dead": a calm navy/gold editorial palette with soft shadows.
   The owner asked for lively retro-comic. This file keeps every token NAME the rest
   of the CSS already uses and only changes the VALUES, so one file re-skins all 66
   pages instead of rewriting components. New treatments (halftone, panel borders,
   hard shadows, display lettering) live in comics.css, which loads last.

   Every colour here was chosen by MEASURING WCAG contrast before it was written,
   not by eye — check-a11y.js holds the same pairs and will fail the build otherwise.
   The split of one hue into fill vs text variants (--clay for large fills,
   --clay-text for small text) is the pattern the old gold used, kept deliberately:
   comic red at full strength is only 4.38:1 on cream, fine for display, not for body. */
:root {
  --paper:    #FFF4DE;   /* warm newsprint */
  --card:     #FFFBF0;   /* panel stock */
  --ink:      #1A1410;   /* comic ink        16.72:1 on paper */
  --muted:    #5A5047;   /*                   7.20:1 on paper */
  --line:     rgba(26,20,16,.22);
  --navy:     #152B3A;   /* dark panel band  13.38:1 with paper text */
  --navy-deep:#0E1E29;
  --gold:     #FFC733;   /* burst yellow — FILLS ONLY, ink sits on it at 11.70:1 */
  --gold-lt:  #FFE08A;
  --sage:     #0E6E63;   /* teal             5.61:1 on paper */
  /* Hard offset shadows, not soft blur. A comic panel has an edge, not a glow. */
  --shadow:   6px 6px 0 0 var(--ink);
  --shadow-sm:3px 3px 0 0 var(--ink);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Archivo Black", "Fraunces", Georgia, "Times New Roman", serif;
  /* Comic lettering, used for eyebrows, badges and bursts. */
  --display: "Bangers", "Archivo Black", Impact, "Haettenschweiler", sans-serif;

  --ivory:     #FFFBF0;
  --blue:      #155E86;  /* comic sky blue    6.46:1 on paper */
  --blue-soft: #7FB2CE;
  --clay:      #D8321B;  /* comic red — large/display only, 4.38:1 */
  --teal:      #0E6E63;

  /* text-safe accent variants (WCAG-checked in check-a11y.js) */
  --gold-text:  #B22712;  /* small accent text on paper/card, 6.03:1  (deep comic red) */
  --gold-large: #D8321B;  /* large/bold display accents, 4.38:1 */
  --clay-text:  #B22712;  /* error + small red text, 6.03:1 */

  /* FIXED-POLARITY tokens: these do NOT flip between light and dark.
     A yellow button is light in both themes, so its label must be dark in both. Using
     --ink here was a real bug caught by axe: in dark mode --ink becomes cream and the
     Shop button rendered cream-on-yellow at 1.21:1. Contrast on a fixed background
     needs a fixed foreground. */
  --red-deep:   #B22712;  /* badge BACKGROUND for small light text, 6.03:1 in both themes */
  --on-gold:    #1A1410;  /* text on any yellow fill — 11.70:1 on #FFC733, 12.79:1 on #FFD35C */
  --on-red:     #FFF4DE;  /* text on --red-deep — 6.03:1 */

  /* motion + geometry — comics are chunky, so radii shrink and borders appear */
  --rise: -3px;
  --ease-spring: cubic-bezier(.2,1.1,.35,1);
  --ease-out: cubic-bezier(.22,.8,.35,1);
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --bord: 3px;           /* the comic outline weight */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #141019;
    --card:     #1E1826;
    --ink:      #F5ECDC;   /* 16.02:1 on dark paper */
    --muted:    #B3A594;   /*  7.81:1 */
    --line:     rgba(245,236,220,.20);
    --navy:     #241B33;
    --navy-deep:#160F21;
    --gold:     #FFD35C;   /* 13.17:1 */
    --gold-lt:  #FFE9A8;
    --sage:     #6FD3C4;
    --shadow:   6px 6px 0 0 rgba(0,0,0,.85);
    --shadow-sm:3px 3px 0 0 rgba(0,0,0,.85);
    --ivory:    #1E1826;
    --blue:     #7FC4E8;   /* 9.03:1 on card */
    --blue-soft:#4E7F9B;
    --clay:     #FF7A5E;   /* 7.33:1 */
    --teal:     #6FD3C4;
    --gold-text:  #FFD35C;
    --gold-large: #FFD35C;
    --clay-text:  #FF7A5E;
    --red-deep:   #B22712;   /* fixed polarity, same in both themes */
    --on-gold:    #1A1410;   /* fixed polarity */
    --on-red:     #FFF4DE;   /* fixed polarity */
  }
}
:root[data-theme="light"] {
  --paper:#FFF4DE; --card:#FFFBF0; --ink:#1A1410; --muted:#5A5047; --line:rgba(26,20,16,.22);
  --navy:#152B3A; --navy-deep:#0E1E29; --gold:#FFC733; --gold-lt:#FFE08A; --sage:#0E6E63;
  --shadow:6px 6px 0 0 var(--ink); --shadow-sm:3px 3px 0 0 var(--ink);
  --ivory:#FFFBF0; --blue:#155E86; --blue-soft:#7FB2CE; --clay:#D8321B; --teal:#0E6E63;
  --gold-text:#B22712; --gold-large:#D8321B; --clay-text:#B22712;
  --red-deep:#B22712; --on-gold:#1A1410; --on-red:#FFF4DE;
}
:root[data-theme="dark"] {
  --paper:#141019; --card:#1E1826; --ink:#F5ECDC; --muted:#B3A594; --line:rgba(245,236,220,.20);
  --navy:#241B33; --navy-deep:#160F21; --gold:#FFD35C; --gold-lt:#FFE9A8; --sage:#6FD3C4;
  --shadow:6px 6px 0 0 rgba(0,0,0,.85); --shadow-sm:3px 3px 0 0 rgba(0,0,0,.85);
  --ivory:#1E1826; --blue:#7FC4E8; --blue-soft:#4E7F9B; --clay:#FF7A5E; --teal:#6FD3C4;
  --gold-text:#FFD35C; --gold-large:#FFD35C; --clay-text:#FF7A5E;
  --red-deep:#B22712; --on-gold:#1A1410; --on-red:#FFF4DE;
}

/* == base.css == */
/* ============ BASE ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(185,134,43,.06), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(11,57,84,.05), transparent 50%);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; }
h4, h5 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 26px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold);
  color: #23180a; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.block { padding: clamp(3rem, 6.5vw, 5.25rem) 0; }
.block-head { max-width: 640px; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.block-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.015em; line-height: 1.12; margin-top: 10px; }
.block-head .sub { color: var(--muted); margin-top: 12px; font-size: 1.02rem; }

/* Buttons (non-metallic). The metallic recipe lives in metallic.css. */
.btn {
  font-family: var(--sans); font-size: .92rem; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  transition: transform .16s var(--ease-spring), box-shadow .2s, background .2s, border-color .2s, color .2s;
}
/* Ghost: structural hairline + a real surface, so it sits ON the page rather
   than being a hole in it. Depth comes from shadow, not a heavier border. */
.btn-ghost {
  border: 0; color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(6,36,49,.06),
    0 6px 14px -10px rgba(6,36,49,.24);
  transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), color .2s;
}
.btn-ghost:hover {
  transform: translateY(-2px); color: var(--gold-text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(6,36,49,.08),
    0 14px 24px -12px rgba(6,36,49,.3);
}
.btn-ghost:active { transform: translateY(0) scale(.978); transition-duration: .09s; }
@media (prefers-reduced-motion: reduce) {
  .btn-ghost:hover, .btn-ghost:active { transform: none; }
}
.btn-quiet { color: var(--muted); background: transparent; padding: 12px 10px; }
.btn-quiet:hover { color: var(--ink); }

/* Reduced motion: global kill switch. Decorative animation opts in via
   (prefers-reduced-motion: no-preference) blocks; this catches the rest. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* == components.css == */
/* ============ ANNOUNCEMENT BAR ============ */
.announce { background: var(--navy-deep); color: #E7ECEA; }
.announce-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; font-size: .86rem; }
.announce a { color: var(--gold-lt); font-weight: 600; }
.announce-x {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  background: transparent; border: 0; color: #E7ECEA; cursor: pointer; border-radius: 6px; opacity: .75;
}
.announce-x:hover { opacity: 1; }

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .glyph {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: linear-gradient(155deg, #16577a, var(--navy) 55%, var(--navy-deep));
  position: relative; box-shadow: var(--shadow-sm);
}
.brand .glyph::before, .brand .glyph::after {
  content: ""; position: absolute; top: 8px; height: 18px; width: 9px; background: #FBFBF8; border-radius: 2px;
}
.brand .glyph::before { left: 7px; transform: perspective(40px) rotateY(14deg); transform-origin: right; }
.brand .glyph::after { right: 7px; transform: perspective(40px) rotateY(-14deg); transform-origin: left; }
.brand .spine { position: absolute; left: 50%; top: 7px; width: 2px; height: 20px; background: var(--gold-lt); transform: translateX(-50%); z-index: 2; }
.brand .name { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.brand .name b { color: var(--gold); font-weight: 600; }

nav.links { display: flex; align-items: center; gap: 18px; }
nav.links > a:not(.btn-metal):not(.icon-toggle) {
  text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--muted); transition: color .18s;
  padding: 4px 2px;
}
nav.links > a:not(.btn-metal):not(.icon-toggle):hover { color: var(--ink); }
nav.links > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

/* Collections disclosure */
.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--muted); padding: 4px 2px;
  transition: color .18s;
}
.nav-drop > button:hover, .nav-drop > button[aria-expanded="true"] { color: var(--ink); }
.nav-drop > button svg { transition: transform .18s; }
.nav-drop > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 8px; margin: 0; list-style: none; z-index: 60;
}
.nav-drop-menu[hidden] { display: none; }
.nav-drop-menu a {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  font-size: .92rem; font-weight: 500; color: var(--ink);
}
.nav-drop-menu a:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--ink); }

.icon-toggle {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); flex: none;
  background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center;
  font-size: 1rem; text-decoration: none; transition: border-color .18s, color .18s; position: relative;
}
.icon-toggle:hover { border-color: var(--gold); color: var(--gold); }
.saved-count {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--gold); color: #23180a; font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 4px;
}
.nav-shop { padding: 10px 20px; }
.menu-btn { display: none; }
.m-panel { display: none; }
@media (max-width: 980px) {
  nav.links > a:not(.icon-toggle):not(.btn-metal), .nav-drop { display: none; }
  nav.links .nav-shop { display: none; }
  nav.links { gap: 10px; }
  .menu-btn {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px;
    border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  }
  .m-panel { display: none; border-top: 1px solid var(--line); padding: 10px 0 16px; }
  .m-panel.open { display: block; }
  .m-panel a {
    display: block; padding: 12px 4px; text-decoration: none; color: var(--ink);
    font-size: 1.02rem; font-weight: 500; border-bottom: 1px solid var(--line);
  }
  .m-panel a:last-child { border-bottom: 0; }
  .m-panel .m-sub { padding-left: 18px; font-size: .95rem; color: var(--muted); }
}
@media (max-width: 460px) {
  /* The icon cluster overflows a 375px viewport; search and saved live in
     the menu panel too, so their header icons yield. Theme stays (button,
     not anchor — untouched by this selector). */
  .nav-in { gap: 8px; }
  nav.links { gap: 8px; }
  nav.links a.nav-tool { display: none; }
}

/* ============ HERO PLANNER (ported disorder→order animation) ============ */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600;
  color: var(--sage); border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent);
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  padding: 5px 13px; border-radius: 999px; margin-bottom: 22px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--gold-large); }
.hero .support { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--gold-large); margin-top: 16px; }
.hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); margin-top: 14px; max-width: 32em; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 0; list-style: none; }
.assure li { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); }
.assure svg { color: var(--gold); flex: none; }

.stage { position: relative; }
.stage { perspective: 1600px; }
.planner {
  background: var(--card); border-radius: var(--r-lg);
  border: 0; overflow: hidden; position: relative; z-index: 3;
  transform: rotateX(1.2deg) rotateY(-1.4deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),
    0 2px 4px rgba(6,36,49,.08),
    0 12px 24px -10px rgba(6,36,49,.20),
    0 44px 70px -30px rgba(6,36,49,.38);
}
@media (prefers-reduced-motion: reduce) { .planner { transform: none; } }
.planner-top {
  background: linear-gradient(150deg, #16577a, var(--navy) 60%, var(--navy-deep));
  color: #F3F4F1; padding: 18px 22px 20px; position: relative;
}
.planner-top .k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); }
.planner-top .t { font-family: var(--serif); font-size: 1.32rem; margin-top: 3px; }
.planner-top::after { content: ""; position: absolute; left: 22px; bottom: 12px; width: 46px; height: 3px; background: var(--gold-lt); border-radius: 2px; }
.planner-body { padding: 12px 22px 22px; }
.row { display: flex; align-items: center; gap: 13px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.box {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 2px solid var(--gold); background: var(--gold); position: relative;
}
.box::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #FBFBF8; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); transform-origin: center;
}
.row .label { font-size: .98rem; color: var(--ink); }
.row .seq { margin-left: auto; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip {
  position: absolute; font-size: .8rem; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; box-shadow: var(--shadow-sm); z-index: 1; white-space: nowrap;
}
.c1 { top: -18px; left: -14px; }
.c2 { top: 34px; right: -26px; }
.c3 { bottom: 24px; left: -30px; }
.c4 { bottom: -16px; right: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .row { opacity: 0; transform: translateY(10px); animation: riseIn .5s ease forwards; }
  .row:nth-child(1) { animation-delay: .35s } .row:nth-child(2) { animation-delay: .62s }
  .row:nth-child(3) { animation-delay: .89s } .row:nth-child(4) { animation-delay: 1.16s }
  .row:nth-child(5) { animation-delay: 1.43s }
  .box::after { transform: rotate(42deg) scale(0); animation: tick .32s cubic-bezier(.2,1.3,.4,1) forwards; }
  .row:nth-child(1) .box::after { animation-delay: .55s } .row:nth-child(2) .box::after { animation-delay: .82s }
  .row:nth-child(3) .box::after { animation-delay: 1.09s } .row:nth-child(4) .box::after { animation-delay: 1.36s }
  .row:nth-child(5) .box::after { animation-delay: 1.63s }
  .box { background: transparent; transition: background .3s; }
  .row:nth-child(1) .box { animation: fill 0s linear .55s forwards } .row:nth-child(2) .box { animation: fill 0s linear .82s forwards }
  .row:nth-child(3) .box { animation: fill 0s linear 1.09s forwards } .row:nth-child(4) .box { animation: fill 0s linear 1.36s forwards }
  .row:nth-child(5) .box { animation: fill 0s linear 1.63s forwards }
  .chip { animation: chipOut .8s ease forwards; }
  .c1 { animation-delay: 1.5s } .c2 { animation-delay: 1.7s } .c3 { animation-delay: 1.9s } .c4 { animation-delay: 2.05s }
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes tick { to { transform: rotate(42deg) scale(1); } }
@keyframes fill { to { background: var(--gold); } }
@keyframes chipOut { to { opacity: 0; transform: translateY(-8px) scale(.96); } }

/* ============ VALUE STRIP ============ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 55%, transparent); }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: clamp(2rem, 4vw, 3rem) 0; }
@media (max-width: 760px) { .strip-grid { grid-template-columns: 1fr; gap: 22px; } }
.val { display: flex; gap: 14px; align-items: flex-start; }
.val .vi { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.val h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; }
.val p { font-size: .92rem; color: var(--muted); margin-top: 3px; }

/* ============ PRODUCT CARD ============
   Elevation is built from four stacked shadows rather than one: a hairline
   contact edge, a tight contact shadow, a mid diffusion, and a wide ambient.
   One shadow reads as a sticker; four read as an object resting on paper. */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  perspective: 1400px; /* enables the hover tilt on children */
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.pcard {
  display: flex; flex-direction: column; background: var(--card);
  border: 0; border-radius: var(--r-lg); overflow: hidden;
  position: relative; transform-style: preserve-3d;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
    0 1px 2px rgba(6,36,49,.06),
    0 6px 12px -6px rgba(6,36,49,.12),
    0 18px 32px -20px rgba(6,36,49,.22);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.pcard:hover {
  transform: translateY(-7px) rotateX(1.6deg) scale(1.012);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
    0 2px 4px rgba(6,36,49,.08),
    0 14px 26px -10px rgba(6,36,49,.20),
    0 38px 60px -28px rgba(6,36,49,.34);
}
.pcard:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent),
    0 14px 26px -10px rgba(6,36,49,.2),
    0 38px 60px -28px rgba(6,36,49,.3);
}
/* The cover well: a lit navy recess, not a flat block. */
.pcard-media {
  position: relative; aspect-ratio: 560 / 396; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(168deg, #17597C 0%, var(--navy) 52%, var(--navy-deep) 100%);
}
/* Page-stack: two sheets behind the cover so it reads as a real booklet. */
.pcard-media::before,
.pcard-media::after {
  content: ""; position: absolute; left: 50%; top: 8%;
  width: 62%; height: 92%; border-radius: 3px 5px 0 0; background: #E9E6DC;
  transform: translateX(-50%) translateZ(-1px);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.55);
}
.pcard-media::before { transform: translateX(calc(-50% + 7px)) rotate(1.4deg); opacity: .5; }
.pcard-media::after  { transform: translateX(calc(-50% + 3.5px)) rotate(.7deg); opacity: .75; background: #F4F2EA; }
.pcard-media img {
  position: relative; z-index: 2;
  display: block; width: 62%; margin: 8% auto 0;
  border-radius: 3px 5px 0 0;
  outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px;
  box-shadow:
    -1px 0 0 rgba(0,0,0,.06),          /* spine edge */
    0 2px 4px rgba(0,0,0,.28),
    0 12px 26px -10px rgba(0,0,0,.55),
    0 26px 44px -22px rgba(0,0,0,.6);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.pcard:hover .pcard-media img { transform: translateY(-4px) scale(1.022); }
:root[data-theme="dark"] .pcard-media img,
html[data-area="dev"] .pcard-media img { outline-color: rgba(255,255,255,.12); }

/* Asset products (LUTs, presets, packs) — no booklet to depict.
   The default .pcard-media is a printable-product mockup: a portrait cover at 62% width sitting
   on two cream paper sheets. A landscape 16:9 preview in that box left the fake paper visibly
   showing beneath the image. Here the paper stack is removed and the preview fills the frame.
   Applied by render.js whenever a product's cover is wider than it is tall, so it covers any
   future wide-preview product without another code change. */
.pcard--asset .pcard-media { aspect-ratio: 16 / 9; }
.pcard--asset .pcard-media::before,
.pcard--asset .pcard-media::after { content: none; display: none; }
.pcard--asset .pcard-media img {
  width: 100%; height: 100%; margin: 0; object-fit: cover;
  border-radius: 0; outline: 0; box-shadow: none;
}
.pcard-save {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 0; color: var(--muted); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.24);
  transition: color .2s, box-shadow .2s, transform .3s cubic-bezier(.22,1,.36,1);
}
/* 44x44 touch target without growing the visible chip */
.pcard-save::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
.pcard-save:hover { color: var(--gold-lt); transform: scale(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.3); }
.pcard-save:active { transform: scale(.96); }
.pcard-save[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.pcard-save[aria-pressed="true"] svg { fill: currentColor; }
.pcard-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.pcard h3, .pcard h2 { font-size: 1.14rem; line-height: 1.25; text-wrap: balance; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; }
.pcard .desc { font-size: .9rem; color: var(--muted); flex: 1; text-wrap: pretty; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.spec {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  border-radius: 999px; padding: 4px 11px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  font-variant-numeric: tabular-nums;
}
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pcard-actions { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; }

/* ============ PRICE ============ */
.price {
  font-family: var(--serif); font-weight: 600; font-size: 1.22rem; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.price .was { font-family: var(--sans); font-size: .84rem; font-weight: 500; color: var(--muted); text-decoration: line-through; }
.price .note { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--sage); }

/* ============ COLLECTION CARD ============ */
.ccard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 218px; padding: 22px; border-radius: var(--r-lg); overflow: hidden;
  color: #F3F4F1; text-decoration: none; border: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 4px rgba(6,36,49,.14),
    0 14px 26px -12px rgba(6,36,49,.3);
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.ccard:hover {
  transform: translateY(-6px) scale(1.014);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-break) 75%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34),
    0 4px 8px rgba(6,36,49,.16),
    0 30px 50px -20px rgba(6,36,49,.46);
}
.ccard:hover .cn { transform: translateX(4px); }
.ccard .cn { transition: transform .42s cubic-bezier(.22,1,.36,1); }
/* Specular sheen sweeping the card face on hover — light passing over glass. */
.ccard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.ccard:hover::after { transform: translateX(120%); }
.ccard::before { content: ""; position: absolute; inset: 0; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .ccard:hover { transform: none; }
  .ccard::after { display: none; }
}
.ccard.navy::before { background: linear-gradient(150deg, #16577a, var(--navy) 55%, var(--navy-deep)); }
.ccard.teal::before { background: linear-gradient(150deg, #3B7470, var(--teal) 55%, #17403D); }
.ccard.green::before { background: linear-gradient(150deg, #2E7A4F, #0a5c36 60%, #06371F); }
.ccard.gold::before { background: linear-gradient(150deg, #C69A45, #9C7322 60%, #5F4512); }
.ccard > * { position: relative; }
.ccard .ck { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); font-weight: 700; }
.ccard.gold .ck { color: #F6EAC9; }
.ccard h3 { font-size: 1.35rem; }
.ccard p { font-size: .88rem; opacity: .85; }
.ccard .cn { font-size: .78rem; font-weight: 600; opacity: .9; margin-top: 4px; }

/* ============ FAQ ============ */
.faq-list { display: grid; gap: 10px; max-width: 760px; }
details.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px;
}
details.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-weight: 600; font-size: .98rem; padding: 16px 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; font-family: var(--sans); font-size: 1.2rem; color: var(--gold); flex: none;
  transition: transform .18s;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-a { padding: 0 0 16px; color: var(--muted); font-size: .94rem; max-width: 62ch; }

/* ============ FORMS ============ */
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 600; }
.field input[type="email"], .field input[type="text"], .field input[type="search"] {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: transparent; }
.field .err { font-size: .84rem; color: var(--clay-text); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* Gate-A email capture input. The width lives here rather than inline because
   build.js scans generated HTML for BRAND.md prohibited words and "100%" is on that
   list — an inline width:100% fails the build. CSS files are not scanned, and the
   guard is right to stay literal rather than try to tell copy from a style value. */
.sub-input { width: 100%; max-width: 320px; padding: 10px; margin: 8px 0; }

/* ============ STATES ============ */
.state {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: clamp(2rem, 5vw, 3.4rem) 20px; border: 1px dashed var(--line); border-radius: var(--r-lg);
  color: var(--muted);
}
.state .state-icon { color: var(--gold); }
.state h1, .state h2, .state h3 { font-family: var(--sans); font-size: 1.04rem; color: var(--ink); margin: 0; }
.state p { font-size: .92rem; max-width: 42ch; }
.state.error .state-icon { color: var(--clay); }

.skeleton { border-radius: var(--r-md); background: color-mix(in srgb, var(--muted) 14%, transparent); position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--card) 60%, transparent) 50%, transparent 70%);
    transform: translateX(-100%); animation: shimmer 1.4s ease infinite;
  }
  @keyframes shimmer { to { transform: translateX(100%); } }
}

/* ============ STICKY PURCHASE BAR (product pages) ============ */
.buybar {
  position: sticky; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 10px 0;
}
.buybar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.buybar .bb-title { font-weight: 600; font-size: .95rem; }
.buybar .bb-meta { font-size: .8rem; color: var(--muted); }
.buybar .bb-actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) { .buybar .bb-title-wrap { display: none; } }

/* ============ FOOTER ============ */
.site-foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 5rem); background: color-mix(in srgb, var(--card) 40%, transparent); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 30px; padding: clamp(2.4rem, 5vw, 3.6rem) 0 2rem; }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .foot-blurb { font-size: .9rem; color: var(--muted); margin-top: 14px; max-width: 30ch; }
.foot-standard { margin-top: 12px; font-size: .88rem; }
.foot-standard a { color: var(--gold-text); font-weight: 600; text-decoration: none; }
.foot-col h3 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-col a { text-decoration: none; font-size: .9rem; color: var(--ink); opacity: .85; }
.foot-col a:hover { opacity: 1; color: var(--gold); }
.site-foot .legal { border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 26px; }
.site-foot .legal p { font-size: .8rem; color: var(--muted); max-width: 90ch; }
.site-foot .legal a { color: var(--muted); }
.foot-copy { margin-top: 10px; }

/* ============ SCROLL REVEAL ============
   Soft, slow and slightly 3D: content rises from a little further away rather
   than sliding flatly. Long duration + quint ease is what makes motion read as
   expensive; anything under ~500ms feels like a webpage, not a product. */
/* Every hidden state below is scoped to html.js — only JS can undo opacity:0,
   so without JS these rules must never apply or the content is lost. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.985);
    transition:
      opacity .75s cubic-bezier(.22,1,.36,1),
      transform .75s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
  }
  .js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
  /* Staggered children — an entrance reads as choreography, not a jump. */
  .js .stagger > * {
    opacity: 0; transform: translate3d(0, 20px, 0);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .js .stagger.is-visible > * { opacity: 1; transform: none; }
  .js .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .js .stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
  .js .stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
  .js .stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
  .js .stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
  .js .stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

  /* Cinematic media settle: starts slightly over-scaled and eases to rest. */
  .js .media-settle img { transform: scale(1.08); transition: transform 1.5s cubic-bezier(.22,1,.36,1); }
  .js .media-settle.is-visible img { transform: scale(1); }
}

/* ============ RELATED STRIP ============ */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

/* == metallic.css == */
/* ============ METALLIC CONTROLS ============================================
   Brushed champagne / titanium. Applied ONLY to: primary CTAs, selected tabs,
   search submit, preview controls, key interactive cards, trust badges.

   Anatomy of a real metal edge, from outside in — each layer is one of the
   box-shadow entries below, and together they ARE the "lining":
     1. dark outer rim        the machined edge, separates it from the page
     2. bright inner hairline light catching the bevel (this is what reads as
                              metal; a single flat border never will)
     3. top specular highlight strong light source above
     4. bottom inner shade    the surface curving away from that light
     5. contact + ambient shadow  physical weight on the page

   The face is a 5-stop gradient with a deliberate hard-ish break at 50%:
   metal reflects the sky above and the ground below, so the value jumps at
   the horizon rather than fading smoothly. A smooth fade reads as plastic.
   Over that sits a 1px brushed texture and a cursor-tracked specular sweep. */

/* Champagne, not brass. Saturation stays low (these are near-neutral warms)
   because polished metal reflects its surroundings — a heavily saturated face
   reads as coloured plastic. The brand gold stays in the ink and the rim. */
:root {
  --m-top:    #FCF8EE;  /* extreme top edge, near-white catch */
  --m-upper:  #EFE4CB;  /* sky reflection */
  --m-break:  #DCCAA1;  /* horizon */
  --m-lower:  #C4AC79;  /* ground reflection */
  --m-bottom: #E2D3AF;  /* bounce light off the surface below */
  --m-rim:    #7A6132;  /* machined outer edge */
  --m-lining: rgba(255,255,255,.78); /* the bright inner hairline */
  --m-ink:    #2A1F0C;
}
:root[data-theme="dark"], html[data-area="dev"] {
  --m-top:    #EADCBB;
  --m-upper:  #D3BE8D;
  --m-break:  #AF9760;
  --m-lower:  #9C8654;  /* lightened from #8E784A: ink hit only 4.36:1 there */
  --m-bottom: #C2AD7C;
  --m-rim:    #4C3D1C;
  --m-lining: rgba(255,255,255,.46);
  --m-ink:    #1A1205;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-top: #EADCBB; --m-upper: #D3BE8D; --m-break: #AF9760;
    --m-lower: #8E784A; --m-bottom: #C2AD7C; --m-rim: #4C3D1C;
    --m-lining: rgba(255,255,255,.46); --m-ink: #1A1205;
  }
}

.btn-metal {
  --sx: 50%;
  position: relative;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 650;
  letter-spacing: .003em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 12px;
  border: 0;
  color: var(--m-ink);
  /* Engraving: a light edge under the glyphs, as if struck into the surface. */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background:
    /* 1. cursor-tracked specular sweep */
    linear-gradient(100deg,
      transparent calc(var(--sx) - 22%),
      rgba(255,255,255,.30) calc(var(--sx) - 6%),
      rgba(255,255,255,.52) var(--sx),
      rgba(255,255,255,.30) calc(var(--sx) + 6%),
      transparent calc(var(--sx) + 22%)) no-repeat,
    /* 2. brushed anisotropy — 1px vertical hairlines */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px,
      rgba(0,0,0,.022) 1px 2px,
      transparent 2px 4px),
    /* 3. the face, with its horizon break */
    linear-gradient(178deg,
      var(--m-top) 0%,
      var(--m-upper) 26%,
      var(--m-break) 49%,
      var(--m-lower) 51%,
      var(--m-bottom) 100%);
  box-shadow:
    0 0 0 1px var(--m-rim),                       /* outer rim */
    inset 0 0 0 1px var(--m-lining),              /* the lining */
    inset 0 1.5px 0 rgba(255,255,255,.85),        /* top specular */
    inset 0 -1.5px 1px rgba(78,54,10,.55),        /* bottom shade */
    inset 2px 0 2px -2px rgba(255,255,255,.5),    /* left bevel */
    inset -2px 0 2px -2px rgba(255,255,255,.5),   /* right bevel */
    0 1px 1px rgba(24,16,2,.18),                  /* contact */
    0 3px 6px -2px rgba(24,16,2,.20),
    0 10px 20px -8px rgba(24,16,2,.28);           /* ambient */
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    filter .2s ease;
  will-change: transform;
}
.btn-metal:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(78,54,10,.5),
    inset 2px 0 2px -2px rgba(255,255,255,.6),
    inset -2px 0 2px -2px rgba(255,255,255,.6),
    0 2px 2px rgba(24,16,2,.16),
    0 8px 14px -4px rgba(24,16,2,.22),
    0 20px 34px -12px rgba(24,16,2,.34);
}
/* Pressed: the piece seats into the page — highlight collapses, light inverts
   to an inner shadow, and it scales just under 1 so the eye reads travel. */
.btn-metal:active,
.btn-metal.is-pressed {
  transform: translateY(0) scale(.978);
  filter: brightness(.97);
  transition-duration: .09s;
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 3px 6px rgba(70,48,8,.42),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 1px 1px rgba(24,16,2,.2);
}
.btn-metal:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
:root[data-theme="dark"] .btn-metal:focus-visible,
html[data-area="dev"] .btn-metal:focus-visible { outline-color: #F0DCAC; }

.btn-metal[disabled],
.btn-metal[aria-disabled="true"] {
  filter: grayscale(.85) brightness(.99);
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow:
    0 0 0 1px rgba(110,83,32,.4),
    inset 0 0 0 1px rgba(255,255,255,.4),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-metal.is-loading { color: transparent; pointer-events: none; }
.btn-metal.is-loading::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--m-ink);
  border-top-color: transparent;
  animation: metal-spin .7s linear infinite;
}
@keyframes metal-spin { to { transform: rotate(360deg); } }

/* Small metal control (preview zoom / full screen / search submit) — the
   radius steps down with the padding so nesting stays concentric. */
.btn-metal.pv-btn,
.btn-metal.btn-metal-sm {
  padding: 9px 16px;
  font-size: .84rem;
  border-radius: 9px;
}

/* ---- Selected tab / active filter chip: the same metal, seated rather than
   raised. These share one rule so a chip can never drift from a button. ---- */
.tab-metal[aria-selected="true"],
.tab-metal[aria-pressed="true"],
.filter-chip[aria-current],
.filter-chip[aria-pressed="true"] {
  color: var(--m-ink);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px),
    linear-gradient(178deg, var(--m-top) 0%, var(--m-upper) 30%,
      var(--m-break) 49%, var(--m-lower) 51%, var(--m-bottom) 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 1px var(--m-rim),
    inset 0 0 0 1px var(--m-lining),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(78,54,10,.4);
}

/* ---- Metal hairline for panels that earn it (no face gradient). Used by the
   quiz, trust panel and lead-magnet panel so all three read as one family. -- */
.metal-rim,
.quiz,
.trust-panel,
.lead-panel {
  border: 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 62%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(24,16,2,.08),
    0 14px 30px -18px rgba(24,16,2,.28);
}

/* ---- Trust badge: ivory face, metal edge, so it reads as a struck token --- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 999px;
  border: 0;
  background:
    linear-gradient(178deg,
      color-mix(in srgb, var(--ivory) 96%, #fff) 0%,
      var(--ivory) 52%,
      color-mix(in srgb, var(--ivory) 88%, var(--m-break)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m-rim) 55%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(24,16,2,.1),
    0 6px 14px -8px rgba(24,16,2,.22);
}
.trust-badge svg { color: var(--m-lower); flex: none; }
:root[data-theme="dark"] .trust-badge,
html[data-area="dev"] .trust-badge { color: var(--ink); }
:root[data-theme="dark"] .trust-badge svg,
html[data-area="dev"] .trust-badge svg { color: var(--m-top); }

/* Reduced motion: keep every state legible, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .btn-metal { transition: none; will-change: auto; }
  .btn-metal:hover, .btn-metal:active, .btn-metal.is-pressed { transform: none; }
}

/* == pages.css == */
/* ============ PAGE-SPECIFIC LAYOUTS ============ */

.block-tint { background: color-mix(in srgb, var(--card) 55%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-link { margin-top: 26px; font-size: .95rem; }
.more-link a:not(.btn):not(.btn-metal) { color: var(--gold-text); font-weight: 600; text-decoration: none; }

/* Trust badge row (homepage strip) */
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 18px 26px; }

/* Collection card grid */
.ccard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .ccard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ccard-grid { grid-template-columns: 1fr; } }

/* Look-inside teaser */
.inside-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .inside-teaser { grid-template-columns: 1fr; } }
/* Decorative (aria-hidden). overflow:hidden guarantees the rotated cards can
   never push the page wider than the viewport at any breakpoint — WCAG 1.4.10
   reflow was failing by 6px at 320px before this. */
.teaser-fan { position: relative; height: 340px; overflow: hidden; }
.teaser-fan img {
  position: absolute; width: 200px; height: 283px; object-fit: cover; object-position: top;
  border-radius: 6px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: #fff;
}
.teaser-fan img:nth-child(1) { left: 4%; top: 30px; transform: rotate(-5deg); }
.teaser-fan img:nth-child(2) { left: 32%; top: 0; z-index: 2; }
.teaser-fan img:nth-child(3) { left: 60%; top: 36px; transform: rotate(5deg); }
@media (max-width: 560px) {
  .teaser-fan { height: 260px; }
  .teaser-fan img { width: 150px; height: 212px; }
  .teaser-fan img:nth-child(1) { left: 2%; }
  .teaser-fan img:nth-child(2) { left: 25%; }
  .teaser-fan img:nth-child(3) { left: 50%; }
}
@media (max-width: 420px) {
  .teaser-fan { height: 205px; }
  .teaser-fan img { width: 116px; height: 164px; }
  .teaser-fan img:nth-child(1) { left: 0; top: 22px; }
  .teaser-fan img:nth-child(2) { left: 26%; }
  .teaser-fan img:nth-child(3) { left: 52%; top: 26px; }
}

/* How it works + scroll progress line */
.hiw { position: relative; padding-left: 34px; }
.hiw-line { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hiw-line-fill { display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: top; }
@media (prefers-reduced-motion: reduce) { .hiw-line-fill { transform: scaleY(1) !important; } }
.hiw-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.hiw-steps li { position: relative; max-width: 46em; }
.hiw-n {
  position: absolute; left: -34px; top: 2px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--gold); color: #23180a; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center;
}
.hiw-steps h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.hiw-steps p { color: var(--muted); font-size: .95rem; margin-top: 4px; }

/* CalmKit Standard band */
.standard-band { background: linear-gradient(150deg, #16577a, var(--navy) 55%, var(--navy-deep)); color: #F3F4F1; }
.standard-band .eyebrow { color: var(--gold-lt); }
.standard-band .block-head .sub { color: rgba(243,244,241,.75); }
.standard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .standard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .standard-grid { grid-template-columns: 1fr; } }
.std-point {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 18px;
}
.std-point h3 { font-family: var(--sans); font-size: .98rem; font-weight: 700; display: flex; gap: 9px; align-items: flex-start; }
.std-point h3 svg { color: var(--gold-lt); flex: none; margin-top: 3px; }
.std-point p { font-size: .87rem; color: rgba(243,244,241,.75); margin-top: 8px; }
.standard-band .btn-ghost { border-color: rgba(255,255,255,.3); color: #F3F4F1; }
.standard-band .btn-ghost:hover { border-color: var(--gold-lt); color: var(--gold-lt); }

/* Quiz */
.quiz { background: var(--card); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem); }
.quiz h3 { font-size: 1.35rem; }
.quiz-q { font-weight: 600; margin-top: 16px; }
.quiz-links { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.quiz-links a, .quiz-opt {
  display: block; width: 100%; text-align: left; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: border-color .18s, background .18s, transform .16s var(--ease-spring);
}
.quiz-links a:hover, .quiz-opt:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.quiz-result { margin-top: 18px; }
.quiz-back { margin-top: 14px; }

/* Reassurance */
.reassure-band { text-align: center; }
.reassure-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.reassure-body { color: var(--muted); font-size: 1.05rem; margin-top: 14px; }

/* Final CTA */
.final-cta .dev-crosslink { margin-top: 34px; font-size: .88rem; color: var(--muted); }
.final-cta .dev-crosslink a { color: var(--gold-text); font-weight: 600; text-decoration: none; }

/* ============ CATALOG / COLLECTION PAGES ============ */
.page-head { padding: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.02em; }
.page-head .sub { color: var(--muted); margin-top: 12px; max-width: 46em; font-size: 1.04rem; }
.breadcrumbs { font-size: .82rem; color: var(--muted); padding-top: 18px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current] { color: var(--ink); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.filter-chip {
  font-size: .84rem; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  background: transparent; transition: color .18s, border-color .18s;
}
.filter-chip:hover { color: var(--ink); border-color: var(--gold); }
/* Active state (metal face + lining) is defined once in metallic.css. */
.filter-chip[aria-current], .filter-chip[aria-pressed="true"] { border-color: transparent; }

/* Compare bar */
.compare-bar {
  position: sticky; bottom: 0; z-index: 40; display: none;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 10px 0;
}
.compare-bar.active { display: block; }
.compare-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pcard-compare { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); position: relative; z-index: 2; }
.compare-table-wrap { overflow-x: auto; margin-top: 20px; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; }
.compare-table th { font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Journey presentation (single-product collections) */
.journey { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 30px; }
@media (max-width: 900px) { .journey { grid-template-columns: 1fr; } }

/* ============ PRODUCT PAGE ============ */
.prod-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); padding: clamp(2rem, 4.5vw, 3.4rem) 0; align-items: start; }
@media (max-width: 900px) { .prod-hero { grid-template-columns: 1fr; } }
.prod-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; }
.prod-title-sub { color: var(--muted); margin-top: 10px; font-size: 1.02rem; }
.prod-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: .86rem; color: var(--muted); align-items: center; }
.review-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sage); }
.prod-buy { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.prod-delivery { font-size: .84rem; color: var(--muted); margin-top: 12px; }
.prod-section { padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.prod-section h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 16px; }
.prod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 800px) { .prod-cols { grid-template-columns: 1fr; } }
.inc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.inc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.inc-list svg { color: var(--gold); flex: none; margin-top: 4px; }
.chapter-map { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: chap; }
.chapter-map li { display: flex; gap: 14px; align-items: baseline; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.chapter-map li:last-child { border-bottom: 0; }
.chap-n { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; font-size: .8rem; }
.who-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.who-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.who-list svg { flex: none; margin-top: 4px; }
.who-for svg { color: var(--sage); }
.limits ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; }
.limits li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.limits li::before { content: "—"; color: var(--clay); font-weight: 700; flex: none; }
.limit-note { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.limit-line { margin-top: 12px; font-size: .9rem; color: var(--sage); }
.src-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.src-list li { font-size: .82rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.src-fallback { color: var(--muted); font-size: .92rem; }
.trust-panel { background: var(--card); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.trust-panel h2 { display: flex; align-items: center; gap: 10px; }
.trust-panel .tp-line { font-size: .92rem; color: var(--muted); margin-top: 10px; }
.trust-panel .tp-line em { color: var(--sage); font-style: normal; font-weight: 600; }

/* ============ VIEWER ============ */
.viewer { display: grid; gap: 14px; }
.pv-stage-wrap { margin: 0; }
.pv-stage { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); max-width: 560px; }
.pv-stage img { display: block; width: 100%; height: auto; }
.pv-stage.zoomed { overflow: auto; max-height: 76vh; }
.pv-stage.zoomed img { width: 175%; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .pv-stage img { transition: opacity .2s ease, transform .2s ease; }
  .pv-stage img.switching { opacity: 0; transform: translateY(6px); }
}
.pv-note { font-size: .8rem; color: var(--muted); margin-top: 10px; }
.pv-rail { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-thumb {
  padding: 3px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: border-color .18s, transform .16s var(--ease-spring);
}
.pv-thumb img { display: block; border-radius: 5px; background: #fff; }
.pv-thumb:hover { transform: translateY(var(--rise)); }
.pv-controls { display: flex; gap: 10px; }
.pv-btn { padding: 9px 16px; font-size: .84rem; }
.pv-dialog { border: 0; border-radius: var(--r-lg); padding: 22px; background: var(--card); color: var(--ink); max-width: min(92vw, 720px); box-shadow: var(--shadow); }
.pv-dialog::backdrop { background: rgba(4, 18, 26, .72); backdrop-filter: blur(3px); }
.pv-dialog img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; }
.pv-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.pv-dialog-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; font-variant-numeric: tabular-nums; }

/* ============ LEAD MAGNET ============ */
.lead-panel {
  background: var(--card);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
}
.lead-panel h2 { font-size: 1.45rem; margin-top: 6px; }
.lead-panel .sub { color: var(--muted); font-size: .96rem; }
.lead-note { color: var(--muted); font-size: .84rem; margin-top: 12px; }

/* ============ CONTENT / LEGAL PAGES ============ */
.legal-prose { display: grid; gap: 10px; }
.legal-prose h2 { font-size: 1.25rem; margin-top: 1.4rem; }
.legal-prose p, .legal-prose li { color: var(--muted); font-size: .96rem; }
.legal-prose ul { display: grid; gap: 8px; margin-top: 6px; }
.legal-prose a { color: var(--gold-text); }
.legal-date { font-size: .82rem !important; margin-top: 1.6rem; }
.std-quote {
  margin: 14px 0 0; padding: 18px 22px; border-left: 3px solid var(--gold);
  background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif); font-style: italic; font-size: 1.06rem;
}
.li-buy { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============ STYLEGUIDE ============ */
.sg-section { margin-top: 2.6rem; }
.sg-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sg-swatch { width: 130px; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--card); }
.sg-swatch .sw { height: 64px; }
.sg-swatch .sw-name { font-size: .74rem; font-weight: 600; padding: 8px 10px; }

/* == labs.css == */
/* ============ DEV / LABS AREA — "Physical Digital" dark treatment ============
   Scoped under html[data-area="dev"]. The consumer store never gets this. */
html[data-area="dev"] body {
  background: #070C10;
  color: #E4E9EC;
  background-image:
    radial-gradient(110% 80% at 85% -10%, rgba(94,126,150,.14), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(185,134,43,.08), transparent 50%);
}
/* The dev/labs area is deliberately dark in BOTH themes — the theme toggle
   must not flip it to light tokens (:root[data-theme] would otherwise win
   the specificity race), so the same values are pinned for every state. */
html[data-area="dev"],
:root[data-theme="light"][data-area="dev"],
:root[data-theme="dark"][data-area="dev"] {
  --paper: #070C10;
  --card: #121A21;
  --ink: #E4E9EC;
  --muted: #91A0AB;
  --line: rgba(255,255,255,.1);
  --shadow: 0 20px 50px -24px rgba(0,0,0,.8);
  --shadow-sm: 0 8px 20px -12px rgba(0,0,0,.7);
  --gold: #DBB35B;
  --gold-lt: #EBCE86;
  --sage: #7FA089;
}
html[data-area="dev"] header.nav {
  background: rgba(7,12,16,.72);
}

/* Liquid-glass CTA: frosted void-black over blur, brushed-metal rim. */
html[data-area="dev"] .btn-glass {
  font-family: var(--sans); font-size: .92rem; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px; text-decoration: none;
  color: #F2E9D8;
  background:
    linear-gradient(105deg,
      transparent calc(var(--sx, 50%) - 16%),
      rgba(255,255,255,.14) var(--sx, 50%),
      transparent calc(var(--sx, 50%) + 16%)) no-repeat,
    rgba(5,8,11,.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--m-rim);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 8px 22px -10px rgba(0,0,0,.8);
  transition: transform .16s var(--ease-spring), box-shadow .2s ease;
  will-change: transform;
}
html[data-area="dev"] .btn-glass:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 16px 30px -12px rgba(0,0,0,.85);
}
html[data-area="dev"] .btn-glass:active { transform: scale(.97); }
html[data-area="dev"] .btn-glass:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

/* Magnetic pull applied by sheen.js only inside this area (pointer: fine,
   no reduced motion). The transform is set inline; this just eases release. */
html[data-area="dev"] .magnetic { transition: transform .35s cubic-bezier(.16,1.4,.3,1); will-change: transform; }

/* Custom cursor ring (dev/labs only; default cursor is NEVER hidden —
   the ring trails it as an accent, so accessibility is unaffected). */
html[data-area="dev"] .cursor-ring {
  position: fixed; left: 0; top: 0; width: 30px; height: 30px; border-radius: 999px;
  border: 1.5px solid rgba(228,190,106,.65); pointer-events: none; z-index: 200;
  transform: translate(-100px, -100px);
  transition: width .2s, height .2s, border-color .2s;
}
html[data-area="dev"] .cursor-ring.is-hovering { width: 44px; height: 44px; border-color: rgba(242,228,198,.9); }

/* Kinetic type reveal: headings slide up from behind a baseline mask. */
@media (prefers-reduced-motion: no-preference) {
  html[data-area="dev"] .kinetic { overflow: hidden; }
  html[data-area="dev"] .kinetic > span { display: inline-block; transform: translateY(110%); transition: transform .7s var(--ease-out); }
  html[data-area="dev"] .kinetic.is-visible > span { transform: none; }
  /* Slow-ease media scaling on scroll entry (110% → 100%). */
  html[data-area="dev"] .media-scale { overflow: hidden; border-radius: var(--r-lg); }
  html[data-area="dev"] .media-scale img { transform: scale(1.1); transition: transform 1.2s var(--ease-out); }
  html[data-area="dev"] .media-scale.is-visible img { transform: scale(1); }
}

/* Dev book cards */
html[data-area="dev"] .pcard { background: var(--card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-area="dev"] .pcard-media { background: #04070A; }

/* == comics.css == */
/* ============ COMICS RETRO LAYER ============
   Loads LAST, so it overrides the editorial styling in components/metallic/pages
   without deleting it. tokens.css already carries the palette; this file adds the
   things that make it read as a comic rather than a recoloured brochure:

     1. Ben-Day halftone dots on the page ground
     2. hard black outlines and offset shadows instead of soft blur
     3. comic lettering for eyebrows, badges and headings
     4. flat poster buttons in place of the champagne-metal treatment
     5. panel-style cards with a torn top rule

   metallic.css is deliberately left in place rather than deleted: check-a11y.js
   still validates its gradient stops, and nothing here depends on it being gone. */

/* ---------- 1. the halftone ground ---------------------------------------- */
/* Two offset dot grids at low alpha read as printed newsprint. Kept on the body
   background rather than an overlay element so it never intercepts clicks. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(var(--line) 1px, transparent 1.4px),
    radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
  background-attachment: fixed;
}

/* ---------- 2. lettering -------------------------------------------------- */
.eyebrow {
  font-family: var(--display);
  letter-spacing: .06em;
  font-size: 1.15rem;
  color: var(--gold-text);
  -webkit-text-stroke: 0;
}
h1, h2, h3, .bb-title, .pcard-body h3 {
  font-family: var(--serif);
  letter-spacing: -.015em;
}
h1 {
  /* A comic title sits on the page, so give it a printed offset rather than a glow. */
  text-shadow: 3px 3px 0 var(--gold);
}
:root[data-theme="dark"] h1,
html[data-area="dev"] h1 { text-shadow: 3px 3px 0 var(--navy); }

/* ---------- 3. panels ----------------------------------------------------- */
.pcard, .trust-panel, .limits, .compare-table, .faq-list details,
.collection-card, .quiz, .buybar {
  border: var(--bord) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--card);
}
.pcard { overflow: hidden; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.pcard:hover { transform: translate(-2px, var(--rise)); box-shadow: var(--shadow); }
.pcard-media { border-bottom: var(--bord) solid var(--ink); }

/* The trust/limits panels are the "narration box" of a comic page. */
.trust-panel, .limits {
  background:
    linear-gradient(0deg, rgba(255,199,51,.10), rgba(255,199,51,.10)),
    var(--card);
}
.trust-panel h2, .limits h3 { font-family: var(--serif); }

/* ---------- 4. buttons: flat poster, not brushed metal -------------------- */
.btn-metal, .btn, .btn-ghost, .tab-metal, .filter-chip, .pv-btn {
  font-family: var(--sans);
  font-weight: 700;
  border: var(--bord) solid var(--ink) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  background-image: none !important;
  text-shadow: none !important;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
/* --on-gold, NOT --ink. --ink flips to cream in dark mode, and axe caught the Shop button
   rendering cream-on-yellow at 1.21:1 on four pages. The fill colour is fixed, so the text
   colour must be too. */
.btn-metal, .nav-shop {
  background: var(--gold) !important;
  color: var(--on-gold) !important;   /* 11.70:1 light, 12.79:1 dark */
}
.btn-ghost, .tab-metal, .filter-chip, .pv-btn {
  background: var(--card) !important;
  color: var(--ink) !important;
}
/* Press: the button physically moves onto its shadow. */
.btn-metal:active, .btn:active, .btn-ghost:active, .nav-shop:active,
.tab-metal:active, .filter-chip:active, .pv-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--ink) !important;
}
.btn-metal:hover, .nav-shop:hover { transform: translate(-1px, -1px); }

/* ---------- 5. price + badges: the burst ---------------------------------- */
.price {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}
.price .was {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  text-decoration: line-through;
}
.spec, .badge, .trust-badge {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .74rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
}
/* Cream on bright red is only 4.38:1, so small text on red uses --red-deep (6.03:1). */
/* --on-red, not --paper: --paper is dark in dark mode, which would put near-black on mid-red. */
.badge--hot, .sale-flag { background: var(--red-deep); color: var(--on-red); border-color: var(--ink); }

/* ---------- 6. the header: a masthead ------------------------------------- */
.nav {
  border-bottom: var(--bord) solid var(--ink);
  background: var(--card);
}
.nav .brand .name { font-family: var(--serif); letter-spacing: -.02em; }
.links a { font-weight: 600; }
/* The current-page pill is a yellow fill, so it needs the fixed dark text too — it inherited
   --muted and measured 1.68:1. */
.links a[aria-current="page"] {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 2px 8px;
}

/* ---------- 7. dark bands stay dark, but get an edge ---------------------- */
.band, .standard-band, footer.foot, .foot {
  border-top: var(--bord) solid var(--ink);
}

/* ---------- 8. reduced motion -------------------------------------------- */
/* qa-extended.js asserts nothing stays stuck at opacity 0 under reduced motion, and
   that no page scrolls horizontally at 320px. Transforms are the only motion added
   above, so they are simply switched off rather than re-timed. */
@media (prefers-reduced-motion: reduce) {
  .pcard, .btn-metal, .btn, .btn-ghost, .nav-shop, .tab-metal, .filter-chip, .pv-btn {
    transition: none;
  }
  .pcard:hover, .btn-metal:hover, .nav-shop:hover { transform: none; }
}

/* Hard shadows extend 6px past the box; without this a card at the right edge of a
   320px viewport pushes the document wider and fails the reflow check. */
@media (max-width: 420px) {
  :root { --shadow: 4px 4px 0 0 var(--ink); --shadow-sm: 2px 2px 0 0 var(--ink); --bord: 2px; }
  h1 { text-shadow: 2px 2px 0 var(--gold); }
}