/* The page has two zones. The booth (the quiz, the example result, palettes, swatches,
   compare, See your colors, Wear, the map and season cards, Try it) uses true grays only,
   so the only color on screen is the color being judged. The brand zone (wordmark,
   mark, header link, section headings and text links below the quiz, buttons outside
   the quiz, the footer) may use the --brand-* colors. test/visual_semantics.py checks
   both. Look: Plum Modern, from research/deliverables/K-style-variants/variants/
   (plum.css, modern-base.css, plum-modern.css), merged in that order at the end. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #f3f3f3;
  --paper: #ffffff;
  --ink: #1c1c1c;
  --mid: #555555;       /* on ground 6.72:1, on paper 7.46:1 */
  --edge: #a0a0a0;      /* control edges: on paper 2.61:1, on ground 2.36:1 */
  --rule: #dcdcdc;
  --track: #d6d6d6;
  /* Brand zone only. Plum on ground 9.43:1, on paper 10.84:1, white on plum 10.84:1. */
  --brand: #5B2A5E;
  --brand-ink: #5B2A5E;
  --brand-btn: #5B2A5E;
  --brand-btn-text: #ffffff;
  --brand-foot: #5B2A5E;
  --brand-foot-text: #ffffff;
  /* The mark's two grays, under its one plum chip. */
  --mark-light: #d2d2d2;
  --mark-dark: #3a3a3a;
  --gutter: 16px;
  --chip-radius: 10px;
  --lift: 0 1px 2px rgba(0, 0, 0, 0.1);
  /* Thin lines drawn on top of a color, so a pale swatch keeps its edge. */
  --swatch-line: rgba(0, 0, 0, 0.16);
  --swatch-line-mid: rgba(0, 0, 0, 0.14);
  --swatch-line-soft: rgba(0, 0, 0, 0.12);
  --print-ground: #ffffff;
  --print-edge: #cccccc;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Plum Modern components. */
  --r-tile: 14px;        /* answer images, color strips */
  --r-card: 20px;        /* surfaces: example, compare, map, use panels */
  --r-ctl: 14px;         /* rows, Try it, collar buttons */
  --r-btn: 999px;        /* buttons */
  --r-sw: 12px;          /* swatch cards */
  --hair: rgba(0, 0, 0, 0.1);
  /* The one lifted object on the first screen: the example result. */
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -14px rgba(0, 0, 0, 0.22);
  --h-weight: 700;       /* large headings */
  --h2-weight: 650;
  --h3-weight: 650;
  --section-gap: 72px;   /* space before each section below the quiz */
  --section-pad: 0px;
  --section-rule: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}

h1, h2, h3, h4, p, ul, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg, .art-img { display: block; width: 100%; height: 100%; }
.art-img { object-fit: cover; }
/* Layered art: a gray photo, with exact colors laid on through masks. Multiply keeps the
   photo's shading, and the gray base is lifted near white where a color goes, so the
   color shows as its hex. The masks crop exactly like the photo under them. */
.layered { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.art-layer {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Art further down the page waits until it's near the screen. The photo is a lazy image;
   this does the same for its masks, which would otherwise load with the first screen. */
.layered.later { content-visibility: auto; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
h1:focus, h2:focus { outline: none; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.print-only { display: none; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header and footer ---------- */

.top { padding: 8px 0; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.mark { flex: none; width: 24px; height: 24px; }
.mark-light { fill: var(--mark-light); }
.mark-dark { fill: var(--mark-dark); }
.mark-chip { fill: var(--brand); }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; color: var(--mid); }

.foot { margin-top: 64px; padding: 24px 0 40px; border-top: 1px solid var(--rule); color: var(--mid); font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot p { margin-right: auto; }

/* ---------- Hero ---------- */

.hero { padding: 4px 0 18px; }
.keep-line { white-space: nowrap; }
h1 {
  font-size: clamp(30px, 2.4vw + 20.6px, 46px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.hero p { margin-top: 8px; color: var(--mid); }
.promises { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font-size: 14px; font-weight: 600; }
.promises li { display: flex; align-items: center; gap: 5px; }
.promises li::before { content: ''; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }

.has-result .hero, .has-result .top + .hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- Quiz layout ---------- */

.booth { display: block; }
#quiz { min-width: 0; }
#rail { margin-top: 24px; }

.step { display: flex; justify-content: space-between; font-size: 14px; color: var(--mid); margin-bottom: 6px; }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-bottom: 16px; }
.progress i { height: 5px; border-radius: 3px; background: var(--track); }
.progress i.done { background: var(--ink); }
.progress i.now { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.progress i.skipped { background: repeating-linear-gradient(135deg, var(--mid) 0 2px, var(--track) 2px 4px); }

.note { font-size: 15px; background: var(--paper); padding: 10px 12px; margin-bottom: 14px; border-left: 3px solid var(--ink); border-radius: 0 var(--chip-radius) var(--chip-radius) 0; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }

.q-text { display: block; width: 100%; }
.q-text h2 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; scroll-margin-top: 16px; }
.hint { color: var(--mid); font-size: 15px; margin: 4px 0 14px; max-width: 60ch; }

/* Chips: a color on top and a printed label below, like a paint chip. */

.chips { display: grid; gap: 8px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

.chip { position: relative; display: block; cursor: pointer; }
.chip input, .row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-body { display: block; position: relative; background: var(--paper); border-radius: var(--chip-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.chip-art { display: block; aspect-ratio: 5 / 3; background: var(--track); }
.cols-2 .chip-art { aspect-ratio: 16 / 9; }
.tall .chip-art { aspect-ratio: 1 / 1; }
.cols-2.tall .chip-art { aspect-ratio: 5 / 4; }
.chip-name { display: flex; align-items: center; min-height: 40px; padding: 5px 9px; font-size: 14px; line-height: 1.2; font-weight: 500; }

.rows { display: grid; gap: 8px; margin-top: 8px; }
.row { position: relative; display: block; cursor: pointer; }
.row-body { display: flex; align-items: center; position: relative; min-height: 46px; padding: 8px 12px; background: var(--paper); border-radius: var(--chip-radius); font-weight: 500; font-size: 15px; box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.row-quiet .row-body { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--mid); font-weight: 400; }

.tick { display: none; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; }
.tick circle { fill: var(--ink); }
.tick path { stroke: var(--paper); }
.row-body .tick { top: 11px; right: 12px; }

.chip input:checked + .chip-body, .row input:checked + .row-body { box-shadow: 0 0 0 4px var(--ink); }
.row input:checked + .row-body { color: var(--ink); }
input:checked + span .tick { display: block; }
.chip input:focus-visible + .chip-body, .row input:focus-visible + .row-body { outline: 3px solid var(--ink); outline-offset: 5px; }

@media (hover: hover) {
  .chip:hover input:not(:checked) + .chip-body, .row:hover input:not(:checked) + .row-body { box-shadow: 0 0 0 2px var(--mid); }
}

.try {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 8px; padding: 8px 12px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--chip-radius);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer;
}
.try::before { content: ''; flex: none; width: 32px; height: 24px; border-radius: 4px; background: var(--split); box-shadow: inset 0 0 0 1px var(--swatch-line); }

/* The bar takes no room until it holds something, so no gap sits under Q1. */
.nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.keys { display: none; color: var(--mid); font-size: 14px; }
.nav [data-action='next'] { margin-left: auto; }

.btn, .btn-plain {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 22px;
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none;
}
.btn { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.btn-plain { background: transparent; border: 2px solid var(--ink); }
.btn-plain[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

/* ---------- Meters ---------- */

.meter { margin: 10px 0 14px; font-size: 14px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; color: var(--mid); }
.meter-top b { color: var(--ink); font-weight: 600; text-align: center; }
.meter-line { position: relative; height: 2px; margin: 10px 7px 6px; background: var(--mid); }
.meter-line i { position: absolute; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--ground); }
.meter-empty .meter-line i { display: none; }

/* ---------- Rail ---------- */

.rail-title { margin-top: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.rail-lead { font-size: 15px; color: var(--mid); margin-bottom: 10px; }
.rail-note { font-size: 14px; color: var(--mid); margin-top: 10px; }
.rail-list { font-size: 15px; margin-top: 12px; }
.rail-list li { padding: 7px 0; border-top: 1px solid var(--rule); }
.rail-list li:first-child { border-top: 0; }

/* The example result: a small printed report on paper. */
.mini { padding: 12px 14px 14px; background: var(--paper); border-radius: var(--chip-radius); box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.mini-tag { font-size: 13px; font-weight: 600; color: var(--mid); }
.mini-name { font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
.mini .meter { margin: 8px 0 10px; font-size: 13px; }
.mini .meter-line { margin: 7px 7px 4px; }
.mini .meter-line i { box-shadow: 0 0 0 2px var(--paper); }
.mini-runner { font-size: 14px; font-weight: 500; }
.mini-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin-top: 10px; font-size: 13px; line-height: 1.2; }
.mini-colors li::before { content: ''; display: block; height: 30px; margin-bottom: 3px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px var(--swatch-line-soft); }

/* ---------- Result ---------- */

.drape { display: flex; height: 64px; }
.drape i { flex: 1; transform-origin: top; }
.drape-fall i { animation: fall 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes fall { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.res-head { padding: 18px 0 0; }
.res-label { font-weight: 600; font-size: 15px; color: var(--mid); }
.res-title {
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 4px 0 8px;
}
.res-title.two { font-size: clamp(34px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.res-match { font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.res-sub { font-size: 16px; max-width: 58ch; }
.jump { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.runner { max-width: 560px; margin-top: 16px; }
.runner-lead { font-size: 14px; color: var(--mid); }
.runner .meter { margin: 8px 0 0; }
.runner .meter-top { color: var(--ink); font-weight: 600; font-size: 15px; }
.runner-line { background: linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat, linear-gradient(var(--mid), var(--mid)) center / 100% 2px no-repeat; height: 10px; margin: 6px 7px 2px; }
.runner-line i { top: -2px; }
.runner-said { font-size: 14px; color: var(--mid); }

.res-block { margin-top: 32px; }
.res-block h2, .res-block h3 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; }
.res-block p { max-width: 62ch; }
.res-hint { color: var(--mid); font-size: 15px; margin-bottom: 10px; }
.showing { font-weight: 500; font-size: 15px; }

/* Each color family stays together: a labeled row on phones, a column on desktop. */
.palette { display: grid; gap: 14px; }
.pal-label { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.pal-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.swatch { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 0; border: 0; background: var(--paper); border-radius: 8px; overflow: hidden; text-align: left; cursor: copy; box-shadow: 0 0 0 1px var(--edge); }
.swatch-color { display: block; height: 52px; box-shadow: inset 0 -1px 0 var(--swatch-line); }
.swatch-text { display: block; padding: 5px 6px 6px; font-size: 13px; line-height: 1.25; color: var(--mid); font-variant-numeric: tabular-nums; }
.swatch-text b { display: block; color: var(--ink); font-weight: 600; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }

.avoid-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; font-size: 13px; line-height: 1.25; color: var(--mid); font-variant-numeric: tabular-nums; }
.avoid-strip li { padding: 0 8px 6px; background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); }
.avoid-strip li::before { content: ''; display: block; height: 40px; margin: 0 -8px 5px; background: var(--c); box-shadow: inset 0 -1px 0 var(--swatch-line); }
.avoid-strip b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.swap { display: block; font-variant-numeric: normal; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.swap::before { content: ''; display: block; height: 16px; margin-bottom: 4px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px var(--swatch-line-soft); }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 14px; padding: 2px var(--gutter); scrollbar-width: none; }
.tabs button { flex: none; min-height: 44px; padding: 0 14px; background: transparent; border: 2px solid transparent; border-radius: 22px; font-weight: 500; font-size: 15px; cursor: pointer; }
.tabs [aria-selected='true'] { background: var(--ink); color: var(--paper); }

.named { display: inline-flex; align-items: center; gap: 8px; margin: 3px 16px 3px 0; font-weight: 500; }
.named small { color: var(--mid); font-weight: 400; font-size: 13px; }
.dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--swatch-line-mid); }
.outfits li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.outfit-art { flex: none; display: block; width: 72px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; }
.outfit-text { min-width: 0; }
.tex-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; max-width: 640px; }
.tex-chips li { background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); }
.tex-art { display: block; aspect-ratio: 5 / 3; }
.tex-name { display: block; padding: 5px 8px 6px; font-size: 14px; line-height: 1.2; font-weight: 500; }
.tex-note { margin-top: 6px; color: var(--mid); font-size: 14px; }

/* The figure with a chosen collar: on phones it stays in view while the colors scroll. */
.drawn-fig { position: sticky; top: 8px; z-index: 1; padding-bottom: 8px; background: var(--ground); }
.drawn-art { max-width: 260px; aspect-ratio: 4 / 3; border-radius: var(--chip-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--edge); }
.drawn-fig figcaption { margin-top: 6px; font-size: 14px; }
.drawn-btns { margin-top: 4px; }
.collar-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.collar-btn { display: flex; align-items: center; gap: 8px; position: relative; min-height: 44px; padding: 4px 8px; background: var(--paper); border: 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--edge); font-size: 14px; line-height: 1.15; font-weight: 500; text-align: left; cursor: pointer; }
.collar-btn::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--swatch-line); }
.collar-btn[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--ink); font-weight: 700; }

.outfits li:first-child { border-top: 0; padding-top: 0; }
.pair { display: block; }
.pair-note { display: block; color: var(--mid); font-size: 15px; margin-top: 2px; }
.kv { padding: 10px 0; border-top: 1px solid var(--rule); }
.kv:first-of-type { border-top: 0; padding-top: 0; }
.kv-label { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.avoid { margin-bottom: 8px; }

.why li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.why { margin-top: 6px; }
.why-grid { display: block; }
.map-lead { margin-top: 20px; margin-bottom: 10px; }

.compare { background: var(--paper); padding: 16px; border-radius: var(--chip-radius); box-shadow: 0 0 0 1px var(--edge); }
.cmp-row { margin-top: 14px; }
.cmp-row h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.strip { height: 52px; margin-bottom: 8px; }

.keep { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* ---------- Supplementary content ---------- */

.sup { padding-top: 56px; }
.sup h2 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; max-width: 26em; scroll-margin-top: 16px; }
.sup-lead { margin-bottom: 16px; }
.sup > p { max-width: 66ch; }
.sup > p + p { margin-top: 10px; }
.sup-after { margin-top: 16px; }
.family-lead { margin-top: 28px; }

.axes { display: grid; gap: 22px; }
.axes h3 { font-size: 17px; font-weight: 700; }
.ramp { height: 28px; margin: 6px 0 8px; border-radius: 6px; }

/* The season map: positions come from --x and --y, written from POINTS. The card's
   top center is the season's exact spot, marked by a dot: filled warm, open cool. */
.map { margin: 0; padding: 20px 0 0; background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.map-plot {
  position: relative; height: 560px;
  background:
    linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 46% / 100% 1px no-repeat;
}
.map-ring { position: absolute; inset: 0; pointer-events: none; }
.map-ring polygon { fill: none; stroke: var(--edge); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.map-card {
  --w: 15%;
  position: absolute; left: calc(50% + var(--x) * 40%); top: calc(46% - var(--y) * 40%); width: var(--w); margin-left: calc(var(--w) / -2); min-height: 44px;
  background: var(--paper); border-radius: 6px; text-decoration: none; text-align: center;
  box-shadow: 0 0 0 1px var(--edge), var(--lift);
}
.map-card::before {
  content: ''; position: absolute; z-index: 1; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
}
.map-card[data-warmth='cool']::before { background: var(--paper); border: 2px solid var(--ink); }
.map-card .strip { height: 14px; margin: 0; border-radius: 6px 6px 0 0; }
/* A name stays readable if the You marker lands on it. The marker's dot and label are
   spaced so one of them always shows. */
.map-name { display: block; position: relative; z-index: 4; padding: 2px 0 3px; background: var(--paper); border-radius: 0 0 6px 6px; font-size: 14px; line-height: 1.15; font-weight: 600; }
.map-word { display: none; }
.map-tag { display: none; }
.map-card.is-near { box-shadow: 0 0 0 3px var(--ink); }
.map-card.is-near .map-name { font-weight: 800; }
.map-you {
  position: absolute; z-index: 3; left: calc(50% + var(--x) * 40%); top: calc(46% - var(--y) * 40%); pointer-events: none;
  transform: translate(-50%, -100%); margin-top: -12px; padding: 0 6px; background: var(--ink); color: var(--paper); border-radius: 9px; font-size: 13px; line-height: 18px; font-weight: 700;
}
.map-you::after {
  content: ''; position: absolute; left: 50%; bottom: -19px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--ink);
}
.map-fam { position: absolute; font-size: 17px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.map-fam small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--mid); }
.map-left { left: 10px; }
.map-right { right: 10px; text-align: right; }
.map-top { top: 0; }
.map-bottom { bottom: 8px; }
.map-axis { position: absolute; padding: 0 4px; background: var(--paper); font-size: 13px; line-height: 16px; color: var(--mid); }
.map-axis-top { top: -18px; left: 50%; transform: translateX(-50%); }
.map-axis-bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
.map-axis-left { top: 46%; left: 18%; transform: translateY(-50%); }
.map-axis-right { top: 46%; right: 18%; transform: translateY(-50%); }
.map figcaption { padding: 10px 12px 12px; border-top: 1px solid var(--rule); border-radius: 0 0 14px 14px; color: var(--mid); font-size: 14px; }

/* Season cards, grouped so no family splits across rows. */
.families { display: grid; gap: 24px; }
.family h3 { font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.family-cards { display: grid; gap: 8px; }
.season-card { display: block; padding: 10px 12px 12px; background: var(--paper); border-radius: var(--chip-radius); text-decoration: none; box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.season-card .strip { height: 34px; margin: 6px 0 8px; border-radius: 5px; }
.sc-name { display: block; font-size: 16px; line-height: 1.2; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sc-kind { font-weight: 400; }
/* On a season's own page its card is not a link, so it loses the link underline. */
.season-card.is-current .sc-name { text-decoration: none; }
.sc-words { display: block; font-size: 14px; line-height: 1.25; font-weight: 600; }
.sc-line { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--mid); }

/* Three uses of a season: each panel runs heading, sentence, drawing, caption. */
.use-panels, .use-col { display: grid; gap: 12px; }
.use-panel { padding: 14px; background: var(--paper); border-radius: var(--chip-radius); box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.use-panel h3 { font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.use-panel p { font-size: 15px; }
.use-fig { margin-top: 10px; }
.use-fig figcaption { margin-top: 8px; color: var(--mid); font-size: 14px; line-height: 1.3; }
.use-outfit { width: 104px; }
.use-makeup { margin-top: 0; }
.use-makeup li::before { height: 44px; }
.use-makeup b { font-weight: 700; }
.demo-art { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--edge); }
.demo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; font-weight: 500; }
.demo-pair .demo-art { margin-bottom: 4px; }
#collar-demo .collar-btns { margin-top: 8px; }

.facts { display: grid; gap: 8px; margin-top: 10px; }
.facts div { padding: 10px 14px 12px; background: var(--paper); border-radius: var(--chip-radius); box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.facts dt { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }
.facts dd { font-size: 15px; color: var(--mid); }

details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { display: flex; align-items: center; min-height: 48px; padding: 8px 0; font-weight: 600; cursor: pointer; }
details p { padding-bottom: 14px; }

/* ---------- Article pages ---------- */

.article { max-width: 760px; }
.article h1 { font-size: clamp(32px, 4vw, 46px); margin: 16px 0 12px; }
.article h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 36px 0 8px; }
.article p, .article ul { margin-top: 10px; max-width: 66ch; }
.article ul { list-style: disc; padding-left: 20px; }
.article li { margin: 4px 0; }
.tablewrap { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--paper); }
caption { padding: 0 0 6px; text-align: left; font-weight: 600; background: var(--ground); }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-weight: 600; }

.season-page .res-head { padding-top: 20px; }
.season-page h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.04em; line-height: 1; max-width: none; margin-bottom: 12px; }
.cta { margin-top: 16px; }

.scales { margin-top: 14px; max-width: 760px; }
.scales-lead { font-size: 15px; font-weight: 600; }
.scales .meter { margin: 8px 0 12px; }

.page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 18px; }
.page-links p { flex-basis: 100%; max-width: none; font-size: 15px; font-weight: 600; }
.page-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--paper); border-radius: 22px; box-shadow: 0 0 0 1px var(--edge); font-size: 15px; }

/* ---------- Try it, toast ---------- */

#try-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
#try-dialog[open] { display: flex; flex-direction: column; }
#try-dialog::backdrop { background: var(--ground); }
.try-fill { flex: 1; display: flex; min-height: 0; }
.try-half { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 12px 8px; }
.try-name { padding: 4px 12px; background: var(--paper); color: var(--ink); border-radius: 14px; font-size: 15px; font-weight: 600; text-align: center; }
.try-bar { background: var(--paper); padding: 12px var(--gutter); }
.try-bar p { font-size: 15px; margin-bottom: 8px; }
.try-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.try-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.try-colors .btn-plain { padding: 0 12px; font-size: 14px; white-space: nowrap; }
.try-actions .btn { margin-left: auto; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 22px; font-size: 15px; font-weight: 500; z-index: 10; overflow-wrap: anywhere; }

/* ---------- Larger screens ---------- */

@media (min-width: 370px) {
  .pal-list { grid-template-columns: repeat(4, 1fr); }
  .avoid-strip { grid-template-columns: repeat(4, 1fr); }
  .avoid-strip li { padding: 0 6px 6px; }
  .avoid-strip li::before { margin: 0 -6px 5px; }
}

@media (min-width: 600px) {
  .swatch-color { height: 64px; }
  .families { grid-template-columns: repeat(2, 1fr); }
  .scales-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .axes { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .tex-chips { grid-template-columns: repeat(4, 1fr); }
  .drawn { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
  .drawn-fig { background: transparent; }
  .drawn-btns { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .facts dt { font-size: 32px; }

  .map-plot { height: 672px; }
  .map-card { --w: 136px; border-radius: 8px; }
  .map-card .strip { height: 22px; border-radius: 8px 8px 0 0; }
  .map-name { padding: 5px 4px 6px; border-radius: 0 0 8px 8px; font-size: 15px; }
  .map-word { display: inline; }
  .map-tag { display: block; padding-bottom: 5px; font-size: 13px; line-height: 1; font-weight: 500; }
  .map-fam { font-size: 24px; }
  .map-fam small { font-size: 14px; }
  .map-left { left: 18px; }
  .map-right { right: 18px; }
  .map-bottom { bottom: 12px; }
  .map-axis { font-size: 14px; }
  .map figcaption { padding: 12px 18px 14px; }
}

@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .top { padding: 12px 0; }
  .hero { padding: 4px 0 22px; }
  .booth { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
  #rail { margin-top: 0; }
  .chip-name { min-height: 44px; font-size: 15px; }
  .chips.cols-3 .chip-art { aspect-ratio: 16 / 9; }
  .chips.tall .chip-art { aspect-ratio: 4 / 3; }
  .chips.cols-2.tall { max-width: 560px; }
  .chips.cols-3.tall { max-width: 640px; }
  .rows { grid-template-columns: repeat(2, 1fr); }

  .drape { height: 150px; }
  .res-head { padding-top: 28px; }
  .res-sub { font-size: 17px; }
  .palette { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .pal-label { min-height: 2.6em; line-height: 1.3; }
  .pal-list { grid-template-columns: 1fr; gap: 8px; }
  .why-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
  .why { margin-top: 10px; }
  .avoid-strip li { padding: 0 10px 8px; }
  .avoid-strip li::before { height: 56px; margin: 0 -10px 6px; }
  .avoid-strip { font-size: 14px; }
  .avoid-strip b { font-size: 15px; }
  .cmp-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .res-side { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .families { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .use-panels { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .use-clothing-fig { display: flex; align-items: center; gap: 14px; }
  .use-clothing-fig figcaption { margin-top: 0; }
  #collar-demo { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: start; }
  #collar-demo .collar-btns { grid-template-columns: 1fr; margin-top: 0; }
  #collar-demo .demo-pair { grid-column: 1 / -1; }
  .sc-line { min-height: 2.6em; }
  .tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1100px) {
  .pal-label { min-height: 0; }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .keys { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .drape-fall i { animation: none; }
}

@media print {
  body { background: var(--print-ground); }
  .top, .foot, .sup, .keep, .tabs, .jump, #toast, .res-hint, .compare, .map, .map-lead, #drawn { display: none !important; }
  .drape { height: 60px; }
  .res-title { font-size: 44px; }
  [role='tabpanel'] { display: block !important; margin-bottom: 16px; break-inside: avoid; }
  .print-only { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .palette { grid-template-columns: repeat(6, 1fr); }
  .pal-list { grid-template-columns: 1fr; }
  .swatch { break-inside: avoid; border: 1px solid var(--print-edge); box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Plum Modern ---------- */

/* From plum.css. */
/* Plum: deep plum (--brand) with Schibsted Grotesk, the font the site already uses.
   The owner's canvas recommends this, so it is the baseline. */
.brand { font-weight: 800; letter-spacing: -0.02em; }

/* ---- Brand zone only. Booth parts (quiz, rail, palettes, swatches, compare,
   See your colors, Wear, map and season cards, Try it) are not touched, so they
   keep the true grays from style.css. ---- */
.brand { color: var(--brand-ink); }
.top nav a { color: var(--brand-ink); }
.sup h2, .article h2 { color: var(--brand-ink); }
.sup p a:not([class]), .article a:not([class]) { color: var(--brand-ink); }
a.btn { background: var(--brand-btn); border-color: var(--brand-btn); color: var(--brand-btn-text); }
.foot { background: var(--brand-foot); color: var(--brand-foot-text); border-top-color: var(--brand-foot); }
.foot a { color: var(--brand-foot-text); }
.foot :focus-visible { outline-color: var(--brand-foot-text); }

/* From modern-base.css. */
/* Modern pass: components, spacing and type scale.
   Loaded after a color file (plum.css or ink.css) and before a direction file
   (plum-modern.css or ink-modern.css), which sets the tokens below.
   Only true grays here. Lines on judged colors are black with alpha, which stays gray. */

@media (min-width: 900px) {
  :root { --section-gap: 104px; }
}

/* ---------- Header and hero ---------- */

.top { padding: 12px 0; }
/* The wordmark was a 24 px tall link. Give it a 44 px target without moving it. */
.brand { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; }
@media (min-width: 900px) { .top { padding: 18px 0 14px; } }
h1 {
  font-size: clamp(30px, 2.4vw + 20.6px, 48px);
  line-height: 1.04;
  font-weight: var(--h-weight);
  letter-spacing: -0.035em;
}
.hero { padding: 6px 0 22px; }
.hero p { margin-top: 10px; }
.promises { gap: 4px 18px; margin-top: 10px; font-weight: 500; }
@media (min-width: 900px) {
  .hero { padding: 8px 0 28px; }
  .hero p { font-size: 18px; }
}

/* ---------- Quiz ---------- */

.step { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.progress { gap: 4px; margin-bottom: 20px; }
.progress i { height: 4px; border-radius: 2px; }
.q-text h2, .sup h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-weight: var(--h2-weight); letter-spacing: -0.022em; }
.hint { margin: 6px 0 16px; }

/* Answer cards: the image runs edge to edge, the label sits under it on the page,
   and the selected one gets a ring with a gap, not a heavy frame. */
.chips { gap: 12px 10px; }
.chip-body { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
.chip-art { border-radius: var(--r-tile); overflow: hidden; outline: 1px solid var(--hair); outline-offset: -1px; }
.chip-name { min-height: 0; padding: 7px 2px 0; font-size: 15px; font-weight: 500; }
.chip input:checked + .chip-body { box-shadow: none; }
.chip input:checked + .chip-body .chip-art { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }
.chip input:focus-visible + .chip-body { outline-offset: 4px; border-radius: var(--r-tile); }
.tick { top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
/* Bigger answer images (the strongest competitors give the image most of the card),
   while all 7 Q1 answers still fit the first screen at 1440x900 and 390x844. */
.chips.cols-3:not(.tall) .chip-art { aspect-ratio: 5 / 4; }
@media (min-width: 900px) { .chips.cols-3:not(.tall) .chip-art { aspect-ratio: 3 / 2; } }
@media (hover: hover) {
  .chip:hover input:not(:checked) + .chip-body { box-shadow: none; }
  .chip:hover input:not(:checked) + .chip-body .chip-art { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--mid); }
}
@media (min-width: 900px) { .chips { gap: 16px 12px; } }

.rows { gap: 10px; margin-top: 14px; }
.row-body { min-height: 52px; padding: 10px 16px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--edge); }
.row-quiet .row-body { box-shadow: inset 0 0 0 1px var(--edge); }
.row-body .tick { top: 13px; right: 14px; }
.row input:checked + .row-body { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) {
  .row:hover input:not(:checked) + .row-body { box-shadow: inset 0 0 0 1px var(--ink); }
}

/* Try it on you keeps a solid 2 px ink edge: it's a key feature, and the site's
   test asks that it has more presence than an outline. */
.try { min-height: 52px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: var(--r-ctl); box-shadow: none; }
.note { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }

/* ---------- Buttons: solid primary, quiet secondary ---------- */

.btn, .btn-plain { min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); font-size: 15px; font-weight: 600; }
.btn { border-width: 1px; }
.btn-plain { border: 1px solid var(--edge); }
.btn-plain[aria-pressed='true'] { border-color: var(--ink); }
.tabs button { border-radius: var(--r-btn); }

/* ---------- Rail ---------- */

.rail-title { font-size: 18px; font-weight: var(--h3-weight); }
.mini { padding: 16px 18px 18px; border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.mini-name { font-size: 26px; font-weight: var(--h-weight); }
.mini-colors li::before { border-radius: 6px; }
.rail-list li { padding: 9px 0; }

/* ---------- Result ---------- */

.res-title { font-weight: var(--h-weight); }
.res-block { margin-top: 48px; }
.res-block h2, .res-block h3 { font-size: 24px; font-weight: var(--h2-weight); letter-spacing: -0.02em; margin-bottom: 10px; }
@media (min-width: 900px) { .res-block { margin-top: 64px; } }

.compare { padding: 20px; border-radius: var(--r-card); box-shadow: none; }
.swatch { border-radius: var(--r-sw); box-shadow: 0 0 0 1px var(--hair); }
.avoid-strip li { border-radius: var(--r-sw); box-shadow: 0 0 0 1px var(--hair); }
.tex-chips li { border-radius: var(--r-sw); box-shadow: 0 0 0 1px var(--hair); }
.collar-btn { border-radius: var(--r-ctl); }
.drawn-art, .demo-art, .outfit-art { border-radius: var(--r-tile); box-shadow: 0 0 0 1px var(--hair); }
.outfits li { padding: 14px 0; }

/* ---------- Sections below the quiz ---------- */

.sup { margin-top: var(--section-gap); padding-top: var(--section-pad); border-top: var(--section-rule); }
.sup h2 { margin-bottom: 14px; }
.sup-lead { margin-bottom: 20px; }

.map { border-radius: var(--r-card); box-shadow: none; }
.map figcaption { border-radius: 0 0 var(--r-card) var(--r-card); }

/* Season cards: the strip is the card, the name sits under it. */
.family-cards { gap: 14px; }
.season-card { padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.season-card .strip { height: 40px; margin: 0 0 8px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--hair); }

.use-panel { padding: 20px 20px 22px; border-radius: var(--r-card); box-shadow: none; }

/* Facts: big numbers on a rule, no boxes. */
.facts { gap: 0 32px; margin-top: 16px; }
.facts div { padding: 14px 0 16px; background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid var(--ink); }
.facts dt { font-weight: var(--h-weight); }
@media (min-width: 600px) { .facts dt { font-size: 36px; } }

/* Questions: lighter lines and an open/close chevron. */
summary { min-height: 56px; justify-content: space-between; gap: 16px; font-size: 17px; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid var(--mid); border-bottom: 2px solid var(--mid);
  transform: translateY(-3px) rotate(45deg);
}
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details p { padding-bottom: 18px; color: var(--mid); }

.page-links a { border-radius: var(--r-btn); }

/* ---------- Footer ---------- */

.foot { margin-top: var(--section-gap); padding: 32px 0 48px; }

/* From plum-modern.css. */
/* Plum Modern: a calm product look. Light gray page, white soft surfaces with no
   outlines, generous rounding, pill buttons and plenty of air between sections.
   Loaded after plum.css and modern-base.css. */
.row-body { background: var(--paper); }
/* Answer tiles: image and label are one object, a white plate under the image,
   no outline. Selected: a ring with a gap around the whole tile, plus the check. */
.chip-body { height: 100%; background: var(--paper); border-radius: var(--r-tile); overflow: hidden; }
.chip-art { border-radius: 0; outline: 0; }
.chip-name { padding: 8px 9px 9px; font-size: 14px; }
@media (min-width: 900px) { .chip-name { padding: 9px 10px 10px; font-size: 15px; } }
.chip input:checked + .chip-body { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }
.chip input:checked + .chip-body .chip-art { box-shadow: none; }
@media (hover: hover) {
  .chip:hover input:not(:checked) + .chip-body { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--mid); }
  .chip:hover input:not(:checked) + .chip-body .chip-art { box-shadow: none; }
}
.res-title { letter-spacing: -0.045em; }

/* The palette as one image on each season page, after the named colors. */
.palette-figure { margin: 20px 0 0; }
.page-img { display: block; width: 100%; max-width: 720px; height: auto; border-radius: var(--r-tile); box-shadow: 0 0 0 1px var(--hair); }
.palette-figure figcaption { margin-top: 8px; color: var(--mid); font-size: 15px; }

/* Smaller phones (375x812, 360x800): the owner's first-screen rule still holds, all 7
   Q1 answers without scrolling. Answer images get a wider crop, and the description and
   annotations a size smaller. 390px and wider are unchanged. */
@media (max-width: 389px) {
  .chips.cols-3:not(.tall) .chip-art { aspect-ratio: 2 / 1; }
  .hero p { font-size: 15px; line-height: 22px; }
  .promises { gap: 4px 12px; font-size: 13px; }
}