/*
 * Redesign C, "The Profile" (proposal). Modelled on the structure of 16Personalities (docs/design/inspiration/16personalities.md):
 * identity-first, big coloured bands per style, chaptered profiles, slanted dividers, pill buttons, bottom tab bar on phones.
 * Colour comes ONLY from tokens: palette roles (shared/palettes.css) and style colours (shared/styles.css). No colour literals here.
 * Type: Montserrat (display) + Inter (text), self-hosted in /theme/assets. Reading column <= 68ch (ADHD-03). Header 64px (ADHD-10).
 * Energy lives in the hero, cast bands, hubs and emblems. The reading column stays calm: one surface, no motion, no decoration.
 * HP2 colour rules (docs/design/palette-system/research.md s4, accent-sets.md): a card shows its category as a soft tint plus an emblem,
 * never as an edge strip; borders are neutral (--line, 1px) or the text colour; the highlight (--hl-1 = the brand accent) is only for
 * focus, selected, active and progress; --hl-2 is a quiet neutral for "done"; a category mark never sits on another category's tint;
 * no colour on gradients; products carry no category colour.
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/inter-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/montserrat-latin-var.woff2") format("woff2"); }

:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Montserrat", "Inter", system-ui, sans-serif;
  --hdr: 64px;
  --tabbar: 64px;
  --slant: clamp(24px, 4.5vw, 64px);
  --gutter: 16px;
  --r-card: 20px;
  --r-pill: 999px;
  --bg: var(--color-bg); --fg: var(--color-fg); --link: var(--color-link);
  /* no style: neutral (rule U4: a category colour never falls back to the brand accent) */
  --st: var(--muted-base); --st-soft: var(--color-surface); --st-ink: var(--color-fg);
  /* HP2 highlights: --hl-1 is the brand accent, --hl-2 a quiet neutral; accents.css overrides both per accent set */
  --hl-1: var(--color-accent);
  --hl-2: color-mix(in srgb, var(--color-fg) 52%, var(--color-bg));
  --muted-base: color-mix(in srgb, var(--color-fg) 62%, var(--color-bg));
  scroll-padding-top: calc(var(--hdr) + 64px);
}
@media (min-width: 48em) { :root { --gutter: 28px; } }
@media (min-width: 64em) { :root { --gutter: 40px; } }

/* derived tokens are re-declared where --bg/--fg change (custom properties resolve on the element that declares them) */
:root, .panel {
  --muted: color-mix(in srgb, var(--fg) 74%, var(--bg));
  --line: color-mix(in srgb, var(--fg) 22%, var(--bg));
  --tint: color-mix(in srgb, var(--fg) 5%, var(--bg));
  --shadow: 0 6px 20px color-mix(in srgb, var(--fg) 14%, transparent);
}

/* style scope: any element with data-style gets that style's three colours */
[data-style="secure"] { --st: var(--style-secure); --st-soft: var(--style-secure-soft); --st-ink: var(--style-secure-ink); }
[data-style="anxious"] { --st: var(--style-anxious); --st-soft: var(--style-anxious-soft); --st-ink: var(--style-anxious-ink); }
[data-style="dismissive"] { --st: var(--style-dismissive); --st-soft: var(--style-dismissive-soft); --st-ink: var(--style-dismissive-ink); }
[data-style="fearful"] { --st: var(--style-fearful); --st-soft: var(--style-fearful-soft); --st-ink: var(--style-fearful-ink); }

/* inside the reading panel (same mode as the page, owner rule 2026-10-10) the tint is a wash of the mark over the panel, and the ink is the panel text */
.panel, .panel [data-style] { --st-soft: color-mix(in oklab, var(--st) 14%, var(--bg)); --st-ink: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--fg); font: 400 1.0625rem/1.65 var(--sans); overflow-wrap: break-word; }
@media (min-width: 48em) { body { font-size: 1.125rem; } }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:visited { color: color-mix(in srgb, var(--link) 80%, var(--fg)); }
:focus-visible { outline: 3px solid var(--hl-1); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: var(--color-accent); color: var(--color-on-accent); padding: 8px 16px; border-radius: var(--r-pill); }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

/* ---------- type ---------- */
.display { font: 900 clamp(2.5rem, 7.4vw, 5.5rem)/1 var(--display); letter-spacing: -0.03em; margin: 0 0 0.35em; text-wrap: balance; }
.display--sm { font-size: clamp(1.5rem, 4vw, 2.5rem); margin: 0; }
.display--sm a { color: inherit; text-decoration: none; }
.h1 { font: 800 clamp(1.9rem, 4.6vw, 3.1rem)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
.h2 { font: 800 clamp(1.5rem, 3.2vw, 2.1rem)/1.2 var(--display); letter-spacing: -0.015em; margin: 0 0 0.5em; }
.h3 { font: 700 1.2rem/1.3 var(--display); margin: 0 0 0.4em; }
.eyebrow { font: 700 0.8rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--muted); }
.lede { font-size: 1.2rem; max-width: 60ch; margin: 0 0 1.2rem; }
.sechead { margin-top: 2.5rem; }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0.3rem 1.05rem; border-radius: var(--r-pill); border: 2px solid currentColor; background: transparent; color: inherit; font: 700 0.92rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.pill:visited { color: inherit; }
.pill--solid { background: var(--st-ink); color: var(--st-soft); border-color: var(--st-ink); min-height: 28px; padding: 0.1rem 0.7rem; font-size: 0.8rem; }
.pill--solid:visited { color: var(--st-soft); }
.pill--go { background: var(--st-ink); color: var(--st-soft); border-color: var(--st-ink); }
.pill--go:visited { color: var(--st-soft); }
.pill--go:hover { background: transparent; color: var(--st-ink); }
.pill--main { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.pill--main:visited { color: var(--color-on-accent); }
.pill--main:hover { background: var(--color-on-accent); color: var(--color-accent); }
.pill--lg { min-height: 60px; padding-inline: 1.9rem; font-size: 1.15rem; }
.pill--soft { border-color: transparent; background: color-mix(in srgb, var(--fg) 9%, transparent); min-height: 32px; padding: 0.15rem 0.8rem; font-weight: 600; font-size: 0.85rem; cursor: default; }
button.pill--soft { cursor: pointer; border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.pill--chip { min-height: 38px; font-weight: 600; border-color: var(--line); }
.pill--chip[aria-pressed="true"], .pill--chip[aria-current="page"] { background: var(--st-ink); color: var(--st-soft); border-color: var(--st-ink); }
.pill--chip:hover:not([aria-pressed="true"], [aria-current="page"]) { border-color: var(--fg); }
.arrow { font-weight: 700; text-decoration: none; }
.arrow::after { content: " →"; }
.arrow:hover { text-decoration: underline; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }

/* ---------- header and tab bar ---------- */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: var(--color-bg); border-bottom: 1px solid var(--line); }
.hdr__bar { height: 100%; display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-fg); text-decoration: none; font: 800 1.05rem/1 var(--display); letter-spacing: -0.01em; }
.brand:visited { color: var(--color-fg); }
/* Logo mark: the artwork is a black square with red/white inside a centred circle; clip it round so it reads as a small badge, not a block. */
.brand__mark { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.brandblock { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.brandblock__logo { display: block; width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--color-fg); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.nav__item:visited { color: var(--color-fg); }
.nav__item:hover { background: color-mix(in srgb, var(--color-fg) 10%, transparent); }
.nav__item[aria-current="page"] { background: var(--color-fg); color: var(--color-bg); }
.hdr__tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--color-fg); text-decoration: none; }
.iconbtn:visited { color: var(--color-fg); }
button.iconbtn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.iconbtn:hover { background: color-mix(in srgb, var(--color-fg) 10%, transparent); }
.cartcount { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--color-accent); color: var(--color-on-accent); font: 700 0.7rem/18px var(--sans); text-align: center; }
.hdr .pill--main { margin-left: 6px; min-height: 44px; }
@media (max-width: 30em) { .brand__name { display: none; } .hdr .pill--main { padding-inline: 0.85rem; font-size: 0.85rem; } }
@media (min-width: 64em) { .nav { display: block; margin-left: 24px; } .hdr__tools { margin-left: auto; } }

.tabbar { display: none; position: fixed; inset: auto 0 0 0; z-index: 60; height: var(--tabbar); background: var(--color-bg); border-top: 1px solid var(--line); }
.tabbar ul { display: grid; grid-template-columns: repeat(5, 1fr); height: 100%; margin: 0; padding: 0; list-style: none; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; color: var(--muted); text-decoration: none; font: 700 0.72rem/1 var(--sans); }
.tabbar a:visited { color: var(--muted); }
.tabbar a[aria-current="page"] { color: var(--color-fg); box-shadow: inset 0 3px 0 var(--color-accent); }
@media (max-width: 63.99em) { .tabbar { display: block; } body { padding-bottom: var(--tabbar); } body .rd-switcher { bottom: calc(var(--tabbar) + 0.5rem); } }

/* ---------- slanted bands ---------- */
.band { position: relative; overflow: hidden; margin-top: calc(var(--slant) * -1 - 1px); padding: calc(var(--slant) + 2.5rem) 0; background: var(--st-soft); color: var(--st-ink); clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.band a:not(.pill) { color: inherit; }
.band .pill--go:hover { color: var(--st-ink); }
.band .muted { color: color-mix(in srgb, var(--st-ink) 78%, var(--st-soft)); }
.band--hero { margin-top: 0; padding-top: 2.5rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); background: var(--color-surface); color: var(--color-fg); }
.band--hero + .cast-lineup, .band--profile { }
.band--shop { background: var(--color-surface); color: var(--color-fg); margin-top: 0; padding-top: calc(var(--slant) + 1rem); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.band--shop { --link: var(--color-link); }
.band--compact { padding-block: 1rem calc(var(--slant) + 0.25rem); }
.band--compact .watermark { display: none; }
.band--profile { padding-top: 2rem; }
.watermark { position: absolute; inset: 0 auto 0 0; display: flex; align-items: flex-end; width: 100%; margin: 0; padding: 0 2vw 0.5rem; font: 900 clamp(3.5rem, 13vw, 10.5rem)/0.88 var(--display); letter-spacing: -0.04em; color: color-mix(in srgb, var(--st) 15%, transparent); pointer-events: none; user-select: none; text-transform: uppercase; }
.watermark::before { content: attr(data-name); } /* pseudo-element: decorative, not read, not text for contrast checks */
.band > .wrap { position: relative; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 0.75rem; }
.hero__facts { font-weight: 600; color: var(--muted); margin: 0; }
/* home hero (owner, 2026-10-13): the whole picture full-bleed, the text block centred directly under it on every screen size,
   never over the picture. Image-agnostic: the aspect ratio comes from the img width/height attributes (HERO_IMAGE w/h in home.js);
   if the max-height caps it, object-position (HERO_IMAGE.position) decides what is cropped, so keep it on the people. */
.band.band--hero.band--hero-cast { background: var(--color-surface); clip-path: none; padding: 0; }
.hero-cast { display: block; }
.hero__img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: cover; object-position: var(--hero-pos, 50% 50%); }
.hero-cast__text { text-align: center; padding: 1.25rem 16px 2rem; max-width: 76rem; margin-inline: auto; }
.hero-cast__text .display { font-size: clamp(1.7rem, 7.5vw, 4rem); line-height: 1.02; margin: 0 auto 0.4em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.hero-cast__text .hero__cta { justify-content: center; margin-bottom: 0.6rem; }
.hero-cast__text .hero__cta a { white-space: nowrap; }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.5em; }
.hero__facts span { white-space: nowrap; }
.hero__facts .sep { color: var(--muted); }
@media (min-width: 901px) { .hero__img { max-height: 58vh; } .hero-cast__text { padding-top: 1.5rem; } }
@media (max-height: 760px) and (min-width: 901px) { .hero__img { max-height: 52vh; } }
[data-palette="6"] .hero__img, [data-palette="10"] .hero__img, [data-palette="12"] .hero__img, [data-palette="14"] .hero__img, [data-palette="16"] .hero__img, [data-palette="18"] .hero__img, [data-palette="20"] .hero__img, [data-palette="22"] .hero__img { filter: brightness(0.72) saturate(0.9); }

.emblem { display: inline-flex; color: var(--st); line-height: 0; }
.cast { display: grid; gap: 1.5rem; align-items: center; }
.cast__emblem .emblem svg { width: clamp(110px, 24vw, 220px); height: auto; aspect-ratio: 1; }
.cast__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0.75rem; padding: 0; }
.cast__tags .pill:not(.pill--solid) { min-height: 30px; padding: 0.1rem 0.8rem; font-size: 0.82rem; border-color: color-mix(in srgb, var(--st-ink) 45%, transparent); }
.cast__name { font: 900 clamp(2rem, 5vw, 3.4rem)/1.05 var(--display); letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.cast__line { font-size: 1.2rem; max-width: 46ch; margin: 0 0 1rem; }
.cast__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1rem 0 0; }
.cast__chips-l { font-weight: 700; font-size: 0.85rem; }
.cast__chips .pill { min-height: 32px; font-size: 0.82rem; padding-inline: 0.8rem; font-weight: 600; border-color: color-mix(in srgb, var(--st-ink) 45%, transparent); }
.cast__chips .pill:hover { background: var(--st-ink); color: var(--st-soft); }
@media (min-width: 48em) { .cast { grid-template-columns: 240px 1fr; gap: 3rem; } .band--cast:nth-of-type(even) .cast { grid-template-columns: 1fr 240px; } .band--cast:nth-of-type(even) .cast__emblem { order: 2; justify-self: end; } }
.band--cast .cast__emblem .emblem { filter: drop-shadow(0 8px 0 color-mix(in srgb, var(--st-ink) 12%, transparent)); }

.index { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; list-style: none; margin: 0; padding: 1.5rem 0; }
.index a { color: var(--fg); text-decoration: none; font-weight: 600; }
.index a:hover { text-decoration: underline; }
.index strong { font: 900 2rem/1 var(--display); margin-right: 0.15em; }
.whocard { display: grid; gap: 0.25rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 32px; background: var(--st-soft); color: var(--st-ink); }
.whocard a:not(.pill) { color: inherit; }
.whocard .eyebrow { color: color-mix(in srgb, var(--st-ink) 85%, var(--st-soft)); }
.whocard .muted { color: color-mix(in srgb, var(--st-ink) 78%, var(--st-soft)); }
.whocard .lede { margin-bottom: 1rem; }

/* ---------- sections, cards ---------- */
.sec { padding-block: 2.5rem; }
.pagehead { padding-top: 1rem; padding-bottom: 0.5rem; }
.band--page { margin-top: 0.5rem; padding-block: 0.5rem calc(var(--slant) + 0.5rem); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-fg); }
.crumbs { padding-top: 1rem; font-size: 0.9rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.crumbs a { color: var(--fg); }
.grid-cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 40em) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid-cards { grid-template-columns: repeat(3, 1fr); } .chapter .grid-cards { grid-template-columns: repeat(2, 1fr); } }
.grid-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 40em) { .grid-cards--2 { grid-template-columns: repeat(2, 1fr); } }
.card, .bigcard { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.3rem 1.2rem; border-radius: var(--r-card); background: var(--tint); color: var(--fg); border: 1px solid var(--line); }
.card[data-style] { background: var(--st-soft); color: var(--st-ink); border-color: transparent; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 0.85rem; }
.card__meta .emblem svg { width: 22px; height: 22px; }
.card[data-style] .card__summary, .card[data-style] .card__why, .card[data-style] .card__time { color: color-mix(in srgb, var(--st-ink) 80%, var(--st-soft)); }
.card__time { color: var(--muted); font-weight: 600; }
.card__title { font: 700 1.2rem/1.3 var(--display); margin: 0; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.card:hover .card__link, .card__link:hover { text-decoration: underline; }
.card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.card__link:focus-visible { outline: none; }
.card__summary { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }
.card__why { margin: 0; font-size: 0.85rem; color: var(--muted); }
.card .pill--solid { cursor: default; }
.bigcard { background: var(--st-soft); color: var(--st-ink); border-color: transparent; }
.bigcard .eyebrow, .bigcard .card__time { color: color-mix(in srgb, var(--st-ink) 80%, var(--st-soft)); }
.bigcard .emblem svg { width: 32px; height: 32px; vertical-align: middle; }
.bigcard .h3 { display: flex; align-items: center; gap: 8px; }

.grid-products { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .grid-products { grid-template-columns: repeat(4, 1fr); } .chapter .grid-products { grid-template-columns: repeat(3, 1fr); } }
.pcard { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.75rem 1rem; border-radius: var(--r-card); background: var(--tint); color: var(--fg); border: 1px solid var(--line); }
.pcard__media { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg); }
.pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__name { font: 700 1rem/1.3 var(--display); margin: 0.4rem 0 0; }
.pcard__name a { color: inherit; text-decoration: none; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.pcard__name a:hover { text-decoration: underline; }
.pcard:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pcard__name a:focus-visible { outline: none; }
.pcard__meta { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 0.85rem; color: var(--muted); }
.price { font-weight: 800; color: var(--fg); }
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linklist li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 4px 12px; align-items: center; }
.linklist li > .pill { justify-self: start; }

/* ---------- filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 1.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sortbox { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.input { min-height: 44px; padding: 0.4rem 0.9rem; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--color-surface); color: var(--color-fg); font: inherit; max-width: 100%; }
.input--qty { width: 5.5rem; }
.results__count { font-weight: 600; color: var(--muted); margin: 0 0 1rem; }
.pager ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 2rem 0 0; }
.endmark { margin-top: 1.5rem; font-weight: 700; }
.searchform { display: flex; flex-wrap: wrap; gap: 10px; max-width: 38rem; }
.searchform .input { flex: 1 1 14rem; }

/* ---------- guides hub ---------- */
.guiderow { margin-bottom: 1.5rem; padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: 28px; background: var(--st-soft); color: var(--st-ink); }
.guiderow.chsec > .h2 { border: 0; padding-top: 0; }
.rowh { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 1rem; }
.rowh .emblem svg { width: 44px; height: 44px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 64em) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; min-height: 170px; height: 100%; padding: 1rem; border-radius: 20px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); text-decoration: none; transition: transform 0.15s; }
.tile:visited { color: var(--fg); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile__emblems { display: flex; align-items: center; gap: 6px; }
.tile .emblem svg { width: 52px; height: 52px; }
.tile__plus { font: 800 1.2rem var(--display); }
/* the partner emblem sits on the reader's tile: neutral, so one category colour per tile */
.tile__plus ~ .emblem { color: var(--muted); }
.tile__t { font: 800 1.05rem/1.25 var(--display); }
.tile__m { font-size: 0.85rem; font-weight: 600; }

/* ---------- quizzes hub ---------- */
.quizlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.quizcard { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem clamp(1.1rem, 3vw, 2rem); border-radius: 28px; background: var(--st-soft); color: var(--st-ink); }
.quizcard .card__link::after { display: none; }
.quizcard a:not(.pill) { color: inherit; }
.quizcard .pill--go { grid-column: 2; justify-self: start; }
.quizcard .pill--go { color: var(--st-soft); }
.quizcard__n { font: 900 4rem/1 var(--display); margin: 0; color: color-mix(in srgb, var(--st) 55%, transparent); }
.quizcard__facts { font-weight: 700; margin: 0 0 0.4rem; }
.quizcard__main p { margin: 0 0 0.4rem; max-width: 60ch; }
.quizcard .h2 { margin-bottom: 0.2rem; }
@media (min-width: 48em) { .quizcard { grid-template-columns: 3.5rem 1fr auto; } .quizcard .pill--go { grid-column: 3; } }

/* ---------- profile page ---------- */
.phero { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.phero__emblem .emblem svg { width: clamp(88px, 22vw, 240px); height: auto; aspect-ratio: 1; }
.band--compact .phero__emblem .emblem svg { width: clamp(56px, 10vw, 96px); }
.profile { display: grid; gap: 1.5rem; padding-block: 1.5rem 3rem; }
@media (min-width: 64em) { .profile { grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.side { display: none; }
@media (min-width: 64em) { .side { display: block; position: sticky; top: calc(var(--hdr) + 16px); max-height: calc(100vh - var(--hdr) - 32px); overflow-y: auto; } }
.side__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 1.05rem var(--display); }
.side__h .emblem svg { width: 32px; height: 32px; }
.chlist, .subch { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chlist a, .subch a { display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.3; border: 2px solid transparent; }
.chlist a:visited { color: var(--fg); }
.chnum { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 10%, transparent); font-size: 0.8rem; font-weight: 800; }
.charrow { opacity: 0.55; }
.chlist a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.chlist a:hover .charrow, .chlist [aria-current="page"] .charrow { opacity: 1; }
.chlist a[aria-current="page"] { background: var(--st-soft); color: var(--st-ink); border-color: var(--line); font-weight: 800; }
.chlist a[aria-current="page"]:visited { color: var(--st-ink); }
.chlist [aria-current="page"] .chnum { background: var(--st-ink); color: var(--st-soft); }
.subch { margin: 4px 0 4px 2.4rem; }
.subch a { grid-template-columns: 1fr; padding: 6px 12px; font-size: 0.9rem; }
.subch a[aria-current="page"] { background: var(--st-soft); color: var(--st-ink); border-color: var(--line); }
.side__pos { margin: 14px 0 0; font-weight: 700; font-size: 0.9rem; color: var(--muted); }
.side__others { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.side__oh { margin: 0 0 8px; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.side__others ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.side__others a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.side__others a:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.side__others .emblem svg { width: 26px; height: 26px; }

.tabs { position: sticky; top: var(--hdr); z-index: 40; background: var(--color-bg); border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-top: calc(var(--slant) * -0.4); }
.tabs::-webkit-scrollbar { display: none; }
.tabs ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 10px var(--gutter); width: max-content; }
.tabs a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 700; font-size: 0.92rem; white-space: nowrap; scroll-snap-align: center; }
.tabs a:visited { color: var(--fg); }
.tabs .chnum { width: 1.4rem; height: 1.4rem; font-size: 0.72rem; }
.tabs .charrow { display: none; }
.tabs a[aria-current="page"] { background: var(--st-ink); color: var(--st-soft); border-color: var(--st-ink); }
.tabs [aria-current="page"] .chnum { background: var(--st-soft); color: var(--st-ink); }
@media (min-width: 64em) { .tabs { display: none; } }

/* ---------- the reading panel (calm) ---------- */
.panel { --bg: var(--color-reading-bg); --fg: var(--color-reading-fg); --link: var(--color-reading-link); background: var(--bg); color: var(--fg); border-radius: 28px; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); }
.chapter { max-width: 54rem; }
@media (max-width: 40em) { .panel { padding: 1.1rem; border-radius: 22px; } .tldr { padding: 1rem 1rem 1.1rem; } }
.chapter > * { max-width: 100%; }
.chhead__t { display: flex; align-items: center; gap: 14px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.chhead__t .emblem svg { width: 44px; height: 44px; flex: none; }
.chhead .back { font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.25rem; }
.tldr { max-width: 68ch; margin: 0 0 2rem; padding: 1.1rem 1.4rem 1.2rem; border-radius: 20px; background: var(--st-soft); color: var(--st-ink); }
.tldr a:not(.pill) { color: inherit; }
.tldr__t { font: 900 0.95rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.6rem; }
.tldr ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
/* Section breaks (docs/design/redesign/section-breaks.md): no rules above headings. Space and type hierarchy separate
   sections: about 3x the paragraph gap above an h2, a tight gap below it so it binds to its own text, ~1.75rem above an h3. */
.chsec { margin-block: 0 3.25rem; }
.chsec > .h2 { max-width: 68ch; margin-bottom: 0.5rem; }
.chsec > p, .chsec .terms, .chsec .pairs { max-width: 68ch; }
.prose { max-width: 68ch; }
.prose h2 { font: 800 clamp(1.5rem, 3.2vw, 2.1rem)/1.2 var(--display); letter-spacing: -0.015em; margin: 3.5rem 0 0.5rem; }
.prose h3 { font: 700 1.3rem/1.3 var(--display); margin: 1.75rem 0 0.4rem; }
.prose > h2:first-child { margin-top: 0; }
@media (max-width: 40em) { .prose h2 { margin-top: 2.75rem; } .chsec { margin-bottom: 2.75rem; } }
/* A folded short section: its heading, word for word, as a run-in bold lead (js/sections.js). */
.runin { font-family: var(--display); font-weight: 800; }
.runin[data-sep]::after { content: "."; }
.prose p.leadin { margin-bottom: 0.25rem; }
/* The one quiet ornament for a page's big turn: a short brush mark, never a full-width line (js/reading.js ornament). */
.secbreak { margin: 3.5rem 0 0; line-height: 0; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.secbreak svg { display: block; width: 60px; height: 6px; overflow: visible; }
.secbreak + h2 { margin-top: 1.1rem; }
@media (max-width: 40em) { .secbreak { margin-top: 2.75rem; } }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.25rem; border-left: 2px solid var(--fg); font: 700 1.2rem/1.45 var(--display); }
.prose blockquote p { margin: 0.4rem 0; }
.prose sup a { padding: 0 2px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
@media (max-width: 40em) { .prose table { display: block; max-width: 100%; overflow-x: auto; } } /* wide tables scroll inside the column instead of widening the page */
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.more[hidden] { display: none; }
.more { margin-top: 0; }
.more__row { margin: 0.5rem 0 1rem; }
.expandall { margin: 0 0 1rem; }
.terms dt { font-weight: 800; margin-top: 0.8rem; }
.terms dd { margin: 0.1rem 0 0; color: var(--muted); }
.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pairs li { padding: 1rem 1.25rem; border-radius: 20px; background: var(--st-soft); color: var(--st-ink); }
.pairs a:not(.pill) { color: inherit; }
.pairs .h3 { display: flex; align-items: center; gap: 8px; }
.pairs .emblem svg { width: 28px; height: 28px; }
.pairs p { margin: 0.4rem 0 0; max-width: 62ch; }
.sources { margin: 2rem 0 0; max-width: 68ch; font-size: 0.95rem; }
.sources summary { cursor: pointer; font-weight: 800; padding: 8px 0; }
.sources ol { padding-left: 1.4rem; display: grid; gap: 8px; }

.chend { margin-top: 3rem; display: grid; gap: 1.5rem; }
.stopcue { margin: 0; padding: 0.9rem 1.2rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); font-weight: 700; text-align: center; }
.nextcard { display: flex; flex-direction: column; gap: 6px; padding: 1.5rem 1.75rem; border-radius: 24px; background: var(--st-ink); color: var(--st-soft); text-decoration: none; transition: transform 0.15s; }
.nextcard:visited { color: var(--st-soft); }
.nextcard:hover { transform: translateY(-3px); }
.nextcard__k { font: 700 0.8rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.nextcard__t { font: 900 clamp(1.4rem, 3vw, 2rem)/1.15 var(--display); }
.endprod { padding: 1.25rem; border-radius: 24px; background: var(--st-soft); color: var(--st-ink); display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 14rem); }
.endprod .eyebrow { color: color-mix(in srgb, var(--st-ink) 80%, var(--st-soft)); margin: 0; }
.endprod .pcard { background: var(--bg); }
.reading { max-width: 60rem; padding-block: 1.5rem 3rem; }
.notfound { padding-block: 3rem; }

/* ---------- shop and product ---------- */
.product { display: grid; gap: 2rem; padding-block: 1.5rem 2.5rem; }
@media (min-width: 48em) { .product { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }
.gallery__main { aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--tint); border: 1px solid var(--line); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery__thumb { width: 72px; height: 72px; padding: 0; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: none; cursor: pointer; }
.gallery__thumb[aria-pressed="true"] { border-color: var(--hl-1); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wording { font: 800 1.2rem/1.3 var(--display); padding-left: 1rem; border-left: 2px solid var(--fg); }
.price--lg { font: 900 2rem var(--display); }
.buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin: 1.25rem 0 0.5rem; }
.field { display: grid; gap: 4px; font-weight: 700; }
.addstatus { min-height: 1.6em; font-weight: 700; }

/* ---------- footer ---------- */
.foot { margin-top: 2rem; padding: 3rem 0 2rem; background: var(--color-surface); color: var(--color-fg); border-top: 1px solid var(--line); --link: var(--color-link); }
.foot__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .foot__grid { grid-template-columns: repeat(4, 1fr); } }
.foot__h { font: 800 1rem var(--display); margin: 0 0 0.6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { display: inline-block; padding: 6px 0; }
.consent { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.consent input { width: 1.2rem; height: 1.2rem; vertical-align: middle; margin-right: 6px; }
.consent__note, .foot__note { color: var(--muted); font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (hover: none) { .tile:hover, .nextcard:hover  }

/* ======================================================================
   TC: full theme. Gradients (--grad-*) from shared/gradients.css, style colours from shared/styles.css.
   Rules (docs/design/adhd/rules.json): no animated gradients, calm reading panel, one mood band per page
   (home: the "Who are they?" card; profile: the next-chapter card).
   ====================================================================== */
/* hero bands: soft gradient with a glow (home and profile heroes, and page heads) */
.band--hero { background: var(--grad-glow), var(--grad-hero); }
.band--page { background: var(--grad-glow), var(--grad-hero); }

/* cast bands keep their style tint */
/* HP2: no category glow, the band is the tint (one category signal) */
.band--cast { background: var(--st-soft); }

/* primary pills: accent gradient (hover swaps to the plain inverse, as before) */
.pill--main { background-image: var(--grad-accent); border-color: transparent; }
.pill--main:hover { background-image: none; border-color: var(--color-accent); }
.pill--chip[aria-pressed="true"], .pill--chip[aria-current="page"] { background-image: var(--grad-accent); background-color: transparent; color: var(--color-on-accent); border-color: transparent; }

/* active chapter markers: accent gradient on the number (the highlight = "you are here") */
.chlist [aria-current="page"] .chnum, .tabs [aria-current="page"] .chnum { background: var(--grad-accent); color: var(--color-on-accent); }

/* the one mood band per page: home = "Who are they?" card */
.whocard { background: var(--grad-mood); color: var(--grad-mood-fg); }
.whocard .eyebrow, .whocard .muted, .whocard a:not(.pill) { color: var(--grad-mood-fg); }
.whocard .pill--go, .whocard .pill--go:visited { background: transparent; color: var(--grad-mood-fg); border-color: var(--grad-mood-fg); }
.whocard .pill--go:hover { background: color-mix(in srgb, var(--grad-mood-fg) 14%, transparent); }

/* profile = next-chapter card */
.nextcard { background: var(--grad-mood); color: var(--grad-mood-fg); }
.nextcard:visited { color: var(--grad-mood-fg); }

/* ======================================================================
   QZ: quizzes (intro, parts of 12, results as hubs). Same tokens as above; no colour literals.
   Scale circles follow the 16Personalities test: big at both ends, small in the middle, coloured by side.
   HP2: both sides are neutral (the circle sizes and the end labels carry the meaning); only the picked answer takes the highlight.
   ====================================================================== */
.visually-hidden-input, .dot__in, .choice__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.band--lead { margin-top: 0; padding-top: 2.5rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }

/* intro */
.qintro { padding-bottom: 1rem; }
.qback { margin: 0 0 1rem; }
.qback a { font-weight: 700; color: var(--color-link); }
.qfacts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.qfacts .pill--soft { cursor: default; min-height: 36px; font-size: 0.9rem; }
.qtips { display: grid; gap: 12px; list-style: none; margin: 0 0 1.5rem; padding: 0; }
@media (min-width: 48em) { .qtips { grid-template-columns: repeat(3, 1fr); } }
.qtip { display: flex; gap: 12px; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-card); background: var(--tint); font-size: 1rem; line-height: 1.5; }
.qtip__n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill); background: var(--grad-accent); color: var(--color-on-accent); font: 800 0.9rem var(--display); }
.qnote { color: var(--muted); max-width: 62ch; }
.qlast { margin: 1rem 0; padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--tint); border: 1px solid var(--line); }
.qlast p { margin: 0 0 0.5rem; }
.qlast__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 0; }
.qactions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 1.5rem 0 1rem; }
.qactions .qnote { flex-basis: 100%; margin: 0; }

/* sticky orientation strip */
.qbar { position: sticky; top: var(--hdr); z-index: 40; background: var(--color-bg); border-bottom: 1px solid var(--line); }
.qbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-block: 10px; }
.qbar__name { font: 800 0.95rem var(--display); margin: 0; }
.qbar__t { font-weight: 700; color: var(--muted); font-size: 0.95rem; }
.qbar__parts { display: flex; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.qbar__parts li { width: 34px; height: 8px; border-radius: var(--r-pill); background: var(--line); }
.qbar__parts li[data-part="done"] { background: var(--hl-2); }
.qbar__parts li[data-part="now"] { background: var(--hl-1); }

/* a part: all its statements visible, current one lit, upcoming ones faded (never hidden) */
.qpart { max-width: 48rem; padding-block: 1.5rem 3rem; }
.qpart__h { font: 900 clamp(1.7rem, 4vw, 2.4rem)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.qpart__k { margin: 0 0 1.5rem; color: var(--muted); font-weight: 600; }
.qlist { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 14px; }
.qlist > .q { min-width: 0; }
.q { padding: 1.1rem 0.9rem 1.25rem 1rem; border-radius: var(--r-card); background: var(--tint); border: 1px solid var(--line); transition: opacity 0.15s; }
.q[data-state="current"] { background: var(--color-surface); border-color: var(--hl-1); box-shadow: inset 0 0 0 1px var(--hl-1), var(--shadow); }
.q[data-state="upcoming"] { opacity: 0.6; }
.q[data-state="upcoming"]:hover, .q:focus-within { opacity: 1; }
.q__field { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__text { padding: 0; margin: 0 0 1rem; font: 700 1.1rem/1.4 var(--display); }
.q__n { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; margin-right: 0.6rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 12%, transparent); font: 800 0.8rem var(--display); vertical-align: 0.1em; }
.q__stem { color: var(--muted); font-weight: 600; }

.scale { --dot-base: 18px; --dot-step: 8px; }
@media (min-width: 48em) { .scale { --dot-base: 30px; --dot-step: 13px; } }
.scale__dots { display: flex; justify-content: space-between; align-items: center; gap: 4px; max-width: 32rem; margin-inline: auto; }
.dot { --sz: calc(var(--dot-base) + var(--d) * var(--dot-step)); position: relative; display: grid; place-items: center; width: calc(var(--sz) + 8px); height: calc(var(--sz) + 8px); cursor: pointer; border-radius: 50%; }
.dot { --sc: var(--muted); }
.dot__c { width: var(--sz); height: var(--sz); border-radius: 50%; border: 3px solid var(--sc); background: transparent; transition: background-color 0.1s; }
.dot:hover .dot__c { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.dot__in:checked + .dot__c { background: var(--hl-1); border-color: var(--hl-1); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--hl-1); }
.dot__in:focus-visible + .dot__c, .choice__in:focus-visible ~ .choice__mark { outline: 3px solid var(--hl-1); outline-offset: 4px; }
.scale__ends { display: flex; justify-content: space-between; gap: 12px; max-width: 32rem; margin: 0.5rem auto 0; font-size: 0.85rem; font-weight: 700; }
.scale__ends { color: var(--muted); } .scale__ends span:last-child { text-align: right; }
.scale__picked { min-height: 1.5em; margin: 0.4rem 0 0; text-align: center; font-weight: 700; color: var(--muted); font-size: 0.9rem; }

.choices { display: grid; gap: 10px; }
.choice { position: relative; display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.8rem 1rem; border: 2px solid var(--line); border-radius: 18px; background: var(--bg); cursor: pointer; font-weight: 600; line-height: 1.45; }
.choice:hover { border-color: var(--fg); }
.choice__mark { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 3px solid var(--muted); }
.choice__in:checked ~ .choice__mark { background: var(--hl-1); border-color: var(--hl-1); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--hl-1); }
.choice:has(.choice__in:checked) { border-color: var(--hl-1); background: color-mix(in srgb, var(--hl-1) 10%, var(--bg)); }

.qnav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.qnav__note { flex-basis: 100%; margin: 0; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.qnav .pill[disabled] { opacity: 0.45; cursor: not-allowed; }

/* results: a hub, not a dead end */
.qresult .cast__tags { margin-bottom: 0.75rem; }
.res-cta { margin-block: 1.5rem 0; }
.res-cta__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; border-radius: 28px; background: var(--st-soft); color: var(--st-ink); }
.res-cta__in .emblem svg { width: 56px; height: 56px; }
.res-cta__t { flex: 1 1 14rem; }
.res-cta__k { margin: 0; font: 900 1.25rem/1.2 var(--display); }
.res-cta__n { margin: 0.25rem 0 0; }
.qscores { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48em) { .qscores { grid-template-columns: minmax(280px, 360px) 1fr; } }
.qc { width: 100%; max-width: 380px; height: auto; display: block; }
.qc__r { fill: var(--st-soft); stroke: var(--line); stroke-width: 1; }
.qc__quad.is-active .qc__r { stroke: var(--hl-1); stroke-width: 3; }
.qc__ql { fill: var(--st-ink); font: 700 11px var(--sans); }
.qc__frame { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.qc__mid { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.6; }
.qc__tick, .qc__axis { fill: var(--fg); font: 600 11px var(--sans); }
.qc__dot { fill: var(--fg); stroke: var(--bg); stroke-width: 3; }
.qscorelist { margin: 0 0 1rem; display: grid; gap: 14px; }
.qscore dt { font-weight: 800; }
.qscore dd { margin: 0.2rem 0 0; }
.qscore__track { display: block; height: 12px; margin-top: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.qscore__track > span { display: block; height: 100%; border-radius: inherit; background: var(--grad-accent); } /* progress = the highlight */
.qscore__big { margin: 0 0 0.25rem; font-size: 1.3rem; }
.qscore__small { margin: 1rem 0 0.25rem; }
.qex { max-width: 44rem; margin-inline: auto; }
.qlean { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--r-card); background: var(--st-soft); color: var(--st-ink); }
.qpanel { max-width: 54rem; margin-inline: auto; }
.qresult .pairs a.arrow { color: inherit; }
.remember, .signup { max-width: 44rem; margin-inline: auto; padding: 1.25rem 1.4rem; border-radius: var(--r-card); background: var(--tint); }
.remember input, .signup .check input { width: 1.2rem; height: 1.2rem; vertical-align: middle; margin-right: 6px; }
.remember__n, .remember__s { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; }
.signup { display: grid; gap: 1rem; }
.signup > * { margin: 0; }
.signup .pill { justify-self: start; }
.signup .field { display: grid; gap: 4px; font-weight: 700; }
.signup__interest { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.signup__interest legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.field__error { color: var(--color-error); font-weight: 600; font-size: 0.9rem; }
.notice { padding: 0.8rem 1rem; border-radius: var(--r-card); background: var(--color-surface); border: 2px solid var(--line); }
.check { display: block; font-weight: 500; }
.qshare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 44rem; margin-inline: auto; }
.qshare__s { margin: 0; color: var(--muted); font-weight: 600; }
.qclose { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cart ---------- */
.cart { display: grid; gap: 2rem; padding-block: 1.5rem 3rem; }
@media (min-width: 64em) { .cart { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.clines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cline { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px 16px; align-items: start; padding: 0.9rem; border-radius: var(--r-card); background: var(--tint); }
@media (min-width: 40em) { .cline { grid-template-columns: 112px 1fr auto; padding: 1rem; } }
.cline__img { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg); }
.cline__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cline__name { font: 700 1.1rem/1.3 var(--display); margin: 0 0 0.2rem; }
.cline__name a { color: inherit; }
.cline__total { margin: 0; font-size: 1.1rem; white-space: nowrap; }
.qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0.5rem; }
.qty__b { min-width: 44px; min-height: 44px; justify-content: center; padding-inline: 0.6rem; font-size: 1.2rem; }
.qty__value { min-width: 2ch; text-align: center; font-weight: 800; }
.csum { padding: 1.4rem; border-radius: 28px; background: var(--grad-mood); color: var(--grad-mood-fg); display: grid; gap: 1rem; }
.csum a, .csum .muted { color: var(--grad-mood-fg); }
.csum .h3 { margin: 0; }
.csum dl { margin: 0; display: grid; gap: 8px; }
.csum__row { display: flex; justify-content: space-between; gap: 12px; }
.csum__row dt { font-weight: 600; } .csum__row dd { margin: 0; font-weight: 800; text-align: right; }
.csum__row[data-total] { padding-top: 8px; border-top: 2px solid currentColor; font-size: 1.15rem; }
.csum .pill[disabled] { opacity: 0.8; cursor: not-allowed; background: transparent; background-image: none; color: var(--grad-mood-fg); border-color: var(--grad-mood-fg); justify-content: center; }
.csum p { margin: 0; }

/* list resets and result-band tuning */
ul.grid-cards { list-style: none; margin: 0; padding: 0; }
.qresult__band .watermark { font-size: clamp(2.5rem, 9vw, 7rem); }

/* illustration slots (EM): fixed aspect, quiet style tint, big shape, small caption; swapped for art from art/manifest.json */
.illo { position: relative; margin: 0; width: 100%; overflow: hidden; border-radius: var(--r-card); background: color-mix(in srgb, var(--st-ink) 7%, var(--st-soft)); }
.illo--portrait { aspect-ratio: 4 / 5; }
.illo--result { aspect-ratio: 4 / 3; }
.illo--pairing { aspect-ratio: 16 / 9; margin: 0 0 1.25rem; } /* spans its column (owner, 2026-10-12): no max-width caps on pictures */
.illo__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.75rem; text-align: center; }
.illo__ph .emblem { filter: none; opacity: 0.9; }
.illo__ph .emblem svg { width: clamp(64px, 40%, 150px); height: auto; aspect-ratio: 1; }
.illo--pairing .illo__ph .emblem svg { width: clamp(56px, 18%, 110px); }
.illo__cap { font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.02em; color: var(--st-ink); opacity: 0.75; }
.illo__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Portraits (owner rule, 2026-10-12): 4:5 only where they are a side column beside text (cast grid at 48em+, whose column is 240px, and the
   profile hero, a 150-240px column in the hero grid), so they fill that column. Stacked on their own row (phones, quiz result) they span the
   full width, cropped to 4:3 with the focus kept high on the face, so they never tower. */
.phero__emblem .illo { width: clamp(150px, 22vw, 240px); }
@media (max-width: 47.999em) { .cast__emblem .illo { aspect-ratio: 4 / 3; } .cast__emblem .illo__img { object-position: 50% 20%; } }
.band--cast .cast__emblem .illo .emblem { filter: none; }
.illo--pairing { background: color-mix(in srgb, var(--st) 12%, var(--tint)); }
.illo--pairing .illo__cap { color: var(--fg); }
/* Inline situation scenes inside long text (art/scenes.json). */
.prose .illo--scene { margin: 0.5rem 0 1.5rem; } /* full text column, 16:9 crop (the art is 16:9), centre focus */

/* No big contrasting blocks (owner rule, 2026-10-10; checked by tests/color-blocks.spec.ts).
   Dark palettes (10, 22): the illustrations keep their cream paper, so they get a softer edge. Chosen treatment: a brightness reduction
   to 0.92 on the art (cream #fdf7ef reads as #e9e3dc, not a glaring slab) inside the existing rounded .illo frame, whose background is a
   dark tint. The other options (inner fade, opacity) were rejected: a fade eats the art's edges, opacity muddies the colours. */
[data-palette="10"] .illo__img, [data-palette="22"] .illo__img,
[data-palette="10"] .pcard__media img, [data-palette="22"] .pcard__media img,
[data-palette="10"] .gallery__main img, [data-palette="22"] .gallery__main img { filter: brightness(0.92); }

/* ======================================================================
   PC: profile pages carry their style colour (owner, 2026-10-12). Hero tint, active chapter markers, rules and accents use
   --st / --st-soft / --st-ink, never the brand accent. The global header and the quiz button keep the brand colours.
   ====================================================================== */
.band--profile { background: linear-gradient(180deg, var(--st-soft) 0%, color-mix(in oklab, var(--st-soft) 82%, var(--color-bg)) 100%); color: var(--st-ink); }
.band--profile .muted, .band--profile .eyebrow { color: color-mix(in srgb, var(--st-ink) 80%, var(--st-soft)); }
.band--profile a:not(.pill) { color: inherit; }
.band--profile .watermark { color: color-mix(in srgb, var(--st) 22%, transparent); }
.band--profile .pill--chip, .band--profile .pill--go { border-color: color-mix(in srgb, var(--st-ink) 45%, transparent); }
.chlist [aria-current="page"] .chnum, .tabs [aria-current="page"] .chnum { background: var(--st-ink); color: var(--st-soft); }
.tabs a[aria-current="page"], .chlist a[aria-current="page"], .subch a[aria-current="page"] { background: var(--st-soft); color: var(--st-ink); border-color: var(--st-ink); }
.tabs a[aria-current="page"] .chnum, .chlist a[aria-current="page"] .chnum { background: var(--st-ink); color: var(--st-soft); }
.tabs { border-bottom-color: color-mix(in srgb, var(--st) 45%, var(--line)); }
.tabs a:hover, .chlist a:hover, .side__others a:hover { background: color-mix(in srgb, var(--st) 14%, transparent); }
.chnum { background: color-mix(in srgb, var(--st) 22%, transparent); }
.profile .secbreak { color: color-mix(in srgb, var(--st) 60%, transparent); }
.side__others { border-top-color: color-mix(in srgb, var(--st) 45%, var(--line)); }
.prose blockquote { border-left-color: var(--st-ink); }
.nextcard { background: var(--st-soft); color: var(--st-ink); border: 2px solid var(--st); }
.nextcard:visited { color: var(--st-ink); }

/* SEO WP1 CLS stopgap: until a page's script fills <main> (mount removes aria-busy), keep it a full screen tall so the footer does not jump. */
main[aria-busy="true"] { min-height: 100vh; }

/* Home: the ex-quiz card runs edge to edge (owner, 2026-10-13); content stays in the page column. */
.whocard--full { border-radius: 0; padding-inline: 0; }
.whocard__inner { display: grid; gap: 0.25rem; }