/*
 * Design (design.laurathompson.uk): this site's own styles, on top of the
 * round 3 system (assets/system/, never edited here). The idea is the print
 * run: the round becomes a printer's registration mark, cards carry crop
 * marks like a proof, and the word "Design" arrives as two offset colour
 * ghosts sliding into register (brief 8.3). Colours come only from the
 * system's semantic tokens (tokens.css gives this site its ground and say).
 * Everything moves by transform and opacity; reduced motion is at the foot.
 */

/* ===================== page measure and bands ===================== */
.lane { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.lane--read { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.band { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); position: relative; }
.band--tint { background: var(--tint); }
.band--tint + .band--tint { padding-top: 0; }
.band-head { display: grid; gap: var(--s-4); max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.band-head .pair { gap: 0.4em; }
.band-head > p:not(.kicker):not(.subline) { color: var(--ink); max-width: 60ch; }
.kicker { display: flex; align-items: center; gap: 0.75rem; font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.kicker .divider { margin: 0; width: 40px; flex: none; }

/* ===================== the word in register (brief 8.3, Design's move) ===================== */
/* <span class="ghosted" data-ghost="Design">Design</span>: two offset colour copies slide into register. */
.ghosted { position: relative; display: inline-block; isolation: isolate; }
.ghosted::before, .ghosted::after {
  content: attr(data-ghost) / "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; white-space: inherit;
}
.ghosted::before { color: var(--ink-design); }
.ghosted::after { color: var(--ink-stage); }
@media (prefers-reduced-motion: no-preference) {
  .ghosted--arrive::before { animation: ghost-a 560ms var(--ease-out) 240ms both; }
  .ghosted--arrive::after { animation: ghost-b 560ms var(--ease-out) 240ms both; }
  html.lt-js:not(.lt-ready) .ghosted--arrive::before, html.lt-js:not(.lt-ready) .ghosted--arrive::after { animation-play-state: paused; }
  .area-nav-home:hover .ghosted::before, .area-nav-home:focus-visible .ghosted::before { animation: ghost-a 560ms var(--ease-out) both; }
  .area-nav-home:hover .ghosted::after, .area-nav-home:focus-visible .ghosted::after { animation: ghost-b 560ms var(--ease-out) both; }
}
@keyframes ghost-a { from { opacity: .75; transform: translate(-0.12em, -0.06em); } to { opacity: 0; transform: none; } }
@keyframes ghost-b { from { opacity: .7; transform: translate(0.1em, 0.07em); } to { opacity: 0; transform: none; } }
.area-nav-name { font-family: var(--face-caps); font-weight: 650; letter-spacing: 0.01em; }

/* ===================== crop marks: a card as a proof ===================== */
.cropped { position: relative; }
.cropped::before {
  content: ""; position: absolute; inset: -11px; pointer-events: none;
  --m: var(--boundary);
  background:
    linear-gradient(var(--m), var(--m)) left 0 top 10px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 10px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) right 0 top 10px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) left 0 bottom 10px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 10px bottom 0 / 1px 9px no-repeat,
    linear-gradient(var(--m), var(--m)) right 0 bottom 10px / 9px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 10px bottom 0 / 1px 9px no-repeat;
}

/* ===================== the front page's first screen ===================== */
.hero { padding-block: clamp(1.25rem, 0.5rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
}
.hero .pair--hero > h1 { max-width: 13ch; }
.answer { display: grid; gap: var(--s-3); max-width: 38rem; margin: var(--s-6) 0 0; padding: 0; list-style: none; counter-reset: answer; }
.answer li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 1.125rem; line-height: 1.45; }
.answer li::before {
  counter-increment: answer; content: counter(answer) / "";
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.05rem;
  border: 1.5px solid var(--accent); border-radius: 50%;
  font-family: var(--face-caps); font-size: 0.78rem; font-weight: 700; color: var(--accent);
}
.first-step { position: relative; display: grid; gap: var(--s-2); max-width: 34rem; margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.first-step .caps { margin: 0; }
.first-step .price-item { font-size: 1.3rem; }
.first-step .legal-line + .legal-line { margin-top: -2px; }
.hero-call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.hero-call .call-note { margin: 0; }

/* The round as a printer's registration mark, round a loupe on the work. */
.loupe { margin: 0; }
.loupe-ring { position: relative; width: min(100%, 33rem); aspect-ratio: 1; margin-inline: auto; }
.loupe-ring .frame--circle { position: absolute; inset: 10%; box-shadow: 0 30px 60px -36px rgb(31 27 22 / .45); }
.loupe-ring .frame--circle picture, .loupe-ring .frame--circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.reg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reg .reg-ring { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.reg .reg-ring--thin { stroke: var(--boundary); stroke-width: 0.8; stroke-dasharray: 1.5 4.5; }
.reg .reg-cross { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; }
.reg .reg-crop { fill: none; stroke: var(--boundary); stroke-width: 1; }
.reg .reg-dot { fill: var(--area-ink); }
.reg-ghost { opacity: 0; }
.reg-ghost--a .reg-ring, .reg-ghost--a .reg-cross { stroke: var(--ink-design); }
.reg-ghost--b .reg-ring, .reg-ghost--b .reg-cross { stroke: var(--ink-stage); }
@media (prefers-reduced-motion: no-preference) {
  .reg-ghost--a { animation: reg-a 900ms var(--ease-out) 300ms both; }
  .reg-ghost--b { animation: reg-b 900ms var(--ease-out) 300ms both; }
  html.lt-js:not(.lt-ready) .reg-ghost { animation-play-state: paused; }
}
@keyframes reg-a { from { opacity: .9; transform: translate(-7px, -4px); } to { opacity: 0; transform: none; } }
@keyframes reg-b { from { opacity: .85; transform: translate(6px, 5px); } to { opacity: 0; transform: none; } }
.loupe .caption { text-align: center; }

/* ===================== "One brand, everywhere": the kit, led piece by piece ===================== */
.process--kit { --process-top: 1rem; }
.kit { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--tint); container-type: inline-size; }
.kit-art { position: absolute; inset: 0; transform-origin: 0 0; transform: translate(var(--tx, 0%), var(--ty, 0%)) scale(var(--s, 1)); }
.kit-art > picture, .kit-art > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit--card .kit-art { --s: 2.4; --tx: -5.2%; --ty: 0%; }
.kit--post .kit-art { --s: 1.8; --tx: -36.4%; --ty: -11.2%; }
.kit--list .kit-art { --s: 1.75; --tx: 0%; --ty: -69%; }
.kit--sign .kit-art { --s: 1.75; --tx: -75%; --ty: -75%; }
.kit--card .fx-post { opacity: 0; }
/* The fictional business's words, live and true, set on the plain parts of the picture. */
.fx { position: absolute; margin: 0; font-family: var(--face-caps); color: light-dark(#1E4F4B, #14110E); line-height: 1.1; }
.fx-name { font-weight: 700; letter-spacing: 0.02em; }
.fx-line { font-family: var(--face-text); font-weight: 560; color: light-dark(#2A2F2D, #14110E); }
.fx-card-name { left: 21.2%; top: 11.6%; font-size: 1.32cqw; }
.fx-card-line { left: 21.2%; top: 14.6%; font-size: 0.74cqw; }
.fx-list { left: 11.2%; top: 56.4%; width: 19.6%; display: grid; gap: 1.05cqw; font-family: var(--face-text); font-size: 0.86cqw; color: light-dark(#2A2F2D, #14110E); }
.fx-list-head { font-family: var(--face-caps); font-weight: 700; font-size: 1.15cqw; color: light-dark(#1E4F4B, #14110E); letter-spacing: 0.04em; }
.fx-list-row { display: flex; justify-content: space-between; gap: 0.6cqw; padding-bottom: 0.45cqw; border-bottom: 0.08cqw solid currentColor; }
.fx-sign-name { left: 66%; top: 75.6%; font-size: 2.35cqw; }
.fx-sign-line { left: 66.2%; top: 80.6%; font-size: 1.02cqw; }
.fx-post { left: 39.2%; top: 21.5%; width: 17.6%; aspect-ratio: 1; display: grid; align-content: space-between; padding: 1.2cqw; border-radius: 0.4cqw; background: #A34A33; color: #FBF4EA; transform: rotate(-4deg); box-shadow: 0 1.2cqw 2cqw -1cqw rgb(20 20 20 / .5); }
.fx-post svg { width: 3.4cqw; height: 3.4cqw; }
.fx-post-head { font-family: var(--face-caps); font-weight: 700; font-size: 1.45cqw; line-height: 1.08; color: #FBF4EA; }
.fx-post-line { font-family: var(--face-text); font-size: 0.78cqw; font-weight: 560; color: #FBF4EA; }
.kit-note {
  left: 4%; bottom: 5%; max-width: 72%; margin: 0;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--raised); color: var(--ink);
  font-family: var(--face-note); font-weight: 600; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem); line-height: 1.3;
  box-shadow: 0 10px 24px -14px rgb(31 27 22 / .5);
}
.kit--sign .kit-note, .kit--list .kit-note { left: auto; right: 4%; }
.kit--all .kit-note { bottom: auto; top: 5%; }
.process-step .step-price { margin-top: var(--s-3); display: grid; gap: 2px; }
.process-step .example-label { margin-bottom: var(--s-2); }
/* In the sticky stage the kit keeps its 4:3, so the live words stay on the picture's plain parts. */
.process--kit .process-stage-frame .kit { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.process--kit.is-staged .process-stage-inner { height: auto; aspect-ratio: 4 / 3; width: min(100%, calc(42svh * 4 / 3)); }
@media (min-width: 1024px) {
  .process--kit.is-staged .process-stage { height: auto; top: 14svh; }
  .process--kit.is-staged .process-stage-inner { width: 100%; max-height: none; }
  .process--kit.is-staged .process-step { min-height: 72svh; }
}
.process-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.process-step h3 { font-size: var(--step-1); }

/* ===================== the ladder of packages ===================== */
.ladder { display: grid; gap: var(--s-6) var(--s-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rung { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); }
.rung-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.rung h3 { font-family: var(--face-caps); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; }
.rung .price-item { font-size: 1.35rem; white-space: nowrap; }
.rung p { color: var(--ink); }
.rung .who { font-family: var(--face-note); font-weight: 600; color: var(--ink-2); font-size: 1.05rem; }
.rung a.link-on { justify-self: start; display: inline-flex; align-items: center; min-height: var(--target); }
.rung--wide { grid-column: 1 / -1; }
@media (min-width: 1180px) { .rung--wide { grid-column: span 2; } }
.terms { display: grid; gap: var(--s-2); max-width: 60rem; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--hair); }
.terms .legal-line { font-size: var(--step-small); }

/* A package in full (/packages). */
.pack { display: grid; gap: var(--s-5); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); scroll-margin-top: var(--s-6); }
.pack + .pack { margin-top: var(--s-7); }
@media (min-width: 900px) { .pack { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); } }
.pack-head { display: grid; gap: var(--s-3); align-content: start; }
.pack-head h2 { font-family: var(--face-caps); font-weight: 700; font-size: var(--step-1); letter-spacing: 0; }
.pack-head .price-item { font-size: 1.6rem; }
.pack-files { display: grid; gap: var(--s-3); margin: 0; }
.pack-files div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px dashed var(--hair); }
@media (max-width: 519px) { .pack-files div { grid-template-columns: 1fr; gap: 2px; } }
.pack-files dt { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 0.2rem; }
.pack-files dd { margin: 0; }
.pack .disclosure:last-of-type { border-bottom: 0; }
.pack-legal { display: grid; gap: 4px; }

/* Add-ons: a price list set like one. */
.addons { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.addon h3 { font-family: var(--face-caps); font-weight: 700; font-size: 1.12rem; }
.addon .price-item { font-size: 1.15rem; text-align: right; white-space: nowrap; }
.addon p { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--step-small); max-width: 62ch; }
.addon-leader { grid-column: 1 / -1; height: 0; }

/* ===================== the steps round a small ring (how it starts) ===================== */
.steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.steps li { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-4) var(--s-4); border-top: 2px solid var(--accent); }
.steps li::before { counter-increment: step; content: counter(step) / ""; font-family: var(--face-head); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--accent); }
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--ink); font-size: var(--step-small); }

/* ===================== her own words, in a frame of their own ===================== */
.words { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .words { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); } }
.words .round-bezel { width: 120px; height: 120px; }
.words-frame { display: grid; gap: var(--s-4); }
.words-frame blockquote { margin: 0; font-family: var(--face-head); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.words-frame blockquote + blockquote { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.words-frame figcaption { font-size: var(--step-small); color: var(--ink-2); }

/* ===================== doors: the second door and the neighbours ===================== */
.doors { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.door { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none; transition: border-color var(--t-swap) ease-out, transform var(--t-press) var(--ease-out); }
.door .seal-icon { --seal-size: 52px; grid-row: span 3; transition: transform var(--t-swap) var(--ease-out); }
.door-name { font-family: var(--face-caps); font-weight: 700; font-size: 1.15rem; }
.door-line { color: var(--ink-2); font-size: var(--step-small); }
.door-go { font-weight: 650; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.door:hover { border-color: var(--boundary); }
.door:hover .seal-icon, .door:focus-visible .seal-icon { transform: rotate(30deg); }
.door:active { transform: scale(.97); }

/* ===================== the call band, at the foot of a page's story ===================== */
.call-band { display: grid; gap: var(--s-5); align-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: calc(var(--radius) + 10px); background: var(--raised); border: 1px solid var(--hair); }
@media (min-width: 900px) { .call-band { grid-template-columns: minmax(0, 1fr) auto; } }
.call-band .pair h2 { font-size: var(--step-display); }
.call-band-act { display: grid; justify-items: start; gap: var(--s-2); }

/* ===================== inner pages: a heading over a semi-circle ===================== */
.page-head { padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-head .pair { max-width: 48rem; }
.page-head .lede { margin-top: var(--s-5); max-width: 52ch; }
.page-head .round-semi { width: min(14rem, 50%); margin-top: var(--s-5); }

/* ===================== Your colours: the palette picker (brief 9.4) ===================== */
.picker { display: grid; gap: var(--s-5); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; }
.swatch {
  position: relative; display: grid; grid-template-columns: 2.6rem auto; align-items: center; gap: 0.6rem;
  min-height: var(--target); padding: 0.3rem 0.95rem 0.3rem 0.3rem;
  border: 1px solid var(--boundary); border-radius: var(--radius-pill); background: var(--raised); color: var(--ink);
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
  transition: border-color var(--t-swap) ease-out, transform var(--t-press) var(--ease-out);
}
.swatch:active { transform: scale(.97); }
.swatch[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch-chips { display: flex; width: 2.6rem; height: 2.1rem; border-radius: 999px; overflow: hidden; border: 1px solid rgb(31 27 22 / .25); }
.swatch-chips i { flex: 1; }
.lights { display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .lights { grid-template-columns: 1fr 1fr; } }
.light { display: grid; gap: var(--s-3); margin: 0; padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); border-radius: var(--radius); border: 1px solid var(--hair); }
.light figcaption { font-family: var(--face-note); font-weight: 600; font-size: 1.05rem; }
.light--day { background: #F8F4EC; color: #2A2622; }
.light--night { background: #1D1B1A; color: #EDE6DA; }
.light--day figcaption { color: #4E463D; }
.light--night figcaption { color: #CFC5B6; }
.mock { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-3); }
.mock > * { border-radius: 6px; transition: background-color 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out; }
.mock-card { display: grid; align-content: space-between; gap: 0.5rem; aspect-ratio: 85 / 55; padding: 0.85rem; background: var(--pc-paper); color: var(--pc-deep); border: 1px solid rgb(0 0 0 / .08); }
.mock-post { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: space-between; min-width: 0; padding: 0.95rem; background: var(--pc-main); color: var(--pc-on-main); }
.mock-list { display: grid; gap: 0.3rem; padding: 0.75rem 0.85rem; background: var(--pc-paper); color: var(--pc-deep); font-size: 0.8rem; border: 1px solid rgb(0 0 0 / .08); }
.mock-list span { display: flex; justify-content: space-between; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; }
.mock-mark { width: 1.8rem; height: 1.8rem; color: var(--pc-accent); }
.mock-name { font-family: var(--face-caps); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.mock-sub { font-size: 0.76rem; font-weight: 560; }
.mock-post .mock-name { font-size: 1.35rem; }
.mock-post .mock-mark { color: var(--pc-on-main); }
.light--night .mock-card, .light--night .mock-list { background: var(--pc-night); color: var(--pc-night-ink); border-color: rgb(255 255 255 / .1); }
.light--night .mock-post { background: var(--pc-night-main); color: var(--pc-night-on); }
.light--night .mock-post .mock-mark { color: var(--pc-night-on); }
.light--night .mock-mark { color: var(--pc-night-accent); }
.picker-result { font-family: var(--face-note); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
/* Eight palettes of the fictional brand: deep (words), main (the post), accent, paper; and their night forms. */
.picker.is-p0, .pal-0 { --pc-deep: #1E4F4B; --pc-main: #2E6B66; --pc-on-main: #FBF4EA; --pc-accent: #D27257; --pc-paper: #F4ECDD; --pc-night: #22302E; --pc-night-ink: #E9F1EE; --pc-night-main: #8FC3BB; --pc-night-on: #142624; --pc-night-accent: #F0A58F; }
.picker.is-p1, .pal-1 { --pc-deep: #6B3420; --pc-main: #A65236; --pc-on-main: #FBF3EC; --pc-accent: #D9A441; --pc-paper: #F6EDE2; --pc-night: #33231D; --pc-night-ink: #F6E9DF; --pc-night-main: #E59A7C; --pc-night-on: #2A140C; --pc-night-accent: #EBC77A; }
.picker.is-p2, .pal-2 { --pc-deep: #1F2F57; --pc-main: #2F4682; --pc-on-main: #F3F5FB; --pc-accent: #C7A15A; --pc-paper: #EEF0F4; --pc-night: #1D2436; --pc-night-ink: #E6EAF5; --pc-night-main: #9FB2E4; --pc-night-on: #121A30; --pc-night-accent: #E2C58E; }
.picker.is-p3, .pal-3 { --pc-deep: #4A2348; --pc-main: #74376F; --pc-on-main: #FBF2F8; --pc-accent: #D8A0B8; --pc-paper: #F5ECF1; --pc-night: #2E1F2D; --pc-night-ink: #F4E6F0; --pc-night-main: #D7A3D0; --pc-night-on: #2A1228; --pc-night-accent: #EDC2D4; }
.picker.is-p4, .pal-4 { --pc-deep: #2F4220; --pc-main: #4D6A35; --pc-on-main: #F6F8EF; --pc-accent: #C8A04A; --pc-paper: #F1F2E7; --pc-night: #222A1C; --pc-night-ink: #ECF1E2; --pc-night-main: #A9C68A; --pc-night-on: #18220F; --pc-night-accent: #E3C47F; }
.picker.is-p5, .pal-5 { --pc-deep: #6A1636; --pc-main: #A3264F; --pc-on-main: #FDF1F4; --pc-accent: #E7B04B; --pc-paper: #F8ECEF; --pc-night: #34191F; --pc-night-ink: #F8E6EB; --pc-night-main: #F09AB4; --pc-night-on: #33081A; --pc-night-accent: #F0CB80; }
.picker.is-p6, .pal-6 { --pc-deep: #4F3A08; --pc-main: #7A5A0E; --pc-on-main: #FDF8EC; --pc-accent: #3F6E73; --pc-paper: #F7F0DC; --pc-night: #2D2614; --pc-night-ink: #F5EDD7; --pc-night-main: #E6C25C; --pc-night-on: #2A1F04; --pc-night-accent: #8EC2C6; }
.picker.is-p7, .pal-7 { --pc-deep: #26282B; --pc-main: #3A3D42; --pc-on-main: #F4F3F0; --pc-accent: #D46A4E; --pc-paper: #F1F0EC; --pc-night: #232427; --pc-night-ink: #EEEDEA; --pc-night-main: #C9CCD2; --pc-night-on: #18191C; --pc-night-accent: #EE9A82; }
.swatch-chips i:nth-child(1) { background: var(--pc-deep); }
.swatch-chips i:nth-child(2) { background: var(--pc-main); }
.swatch-chips i:nth-child(3) { background: var(--pc-accent); }
.swatch-chips i:nth-child(4) { background: var(--pc-paper); }
.picker-tips { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .picker-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tip { padding-top: var(--s-4); border-top: 2px solid var(--accent); }
.tip h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }

/* ===================== questions, about, the call page ===================== */
.faq { max-width: 52rem; }
.faq .disclosure-body p { max-width: 62ch; }
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group > h2 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.about-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; } }
.about-grid .photo-slot { max-width: 22rem; }
.quotes { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.quotes blockquote { margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--accent); font-family: var(--face-head); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.35; }
.here-does { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.next-steps { counter-reset: step; }

/* ===================== the 404: the pattern torn at one edge ===================== */
.lost-area { display: grid; justify-items: start; gap: var(--s-5); padding-block: var(--s-7); }
.torn { position: relative; width: 100%; height: 96px; overflow: hidden; border-radius: var(--radius); background: var(--tint);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 96% 78%, 91% 66%, 86% 84%, 80% 70%, 74% 88%, 68% 72%, 61% 86%, 55% 70%, 49% 90%, 42% 74%, 36% 88%, 30% 70%, 24% 84%, 18% 68%, 12% 86%, 6% 72%, 0 84%); }
.torn .weave { position: absolute; inset: 0; width: 100%; height: 100%; }
.torn .weave rect { opacity: .55; }
.lost-doors { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  .door, .swatch { transition: none; }
  .door:hover .seal-icon, .door:focus-visible .seal-icon { transform: none; }
  .door:hover .door-name { text-decoration: underline; }
  .mock > * { transition: background-color 120ms linear, color 120ms linear; }
}

/* /packages: the summary always shown, the file-by-file list in the disclosure (9.6). */
.pack-body { display: grid; gap: var(--s-4); align-content: start; }
.pack-summary { font-size: 1.1rem; line-height: 1.5; }
.pack-body .disclosure-body { padding-top: var(--s-2); }

/* /add-ons: the list beside its picture or her words. */
.addons-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .addons-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .addons-figure { position: sticky; top: var(--s-6); }
}
.addons-figure .frame { aspect-ratio: 3 / 2; }
.words-frame--side { padding: var(--s-6); border-radius: var(--radius); background: var(--raised); border: 1px solid var(--hair); }
.words-frame--side .caps { margin: 0; }

/* /call: what to have to hand. */
.hand { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.hand li { position: relative; padding-left: 2rem; font-size: 1.08rem; }
.hand li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent); }
.quotes figure { margin: 0; display: grid; gap: var(--s-1); }
.quotes .caption { margin: 0 0 0 calc(var(--s-4) + 2px); }
.page-call .page-head .hero-call { margin-top: var(--s-5); }