/* Casa del Prat — "The Walk" (direction 2). Brand values: brand/BRAND.md of 2026-10-17.
   Colours and font names appear only in :root and @font-face (playbook R14). */
:root {
  --color-bg: #F5EFE3;
  --color-text: #23281C;
  --color-muted: #5B5D4C;
  --color-brand: #4A5C2F;
  --color-action: #A3442A;
  --color-on-action: #FFF8EE;
  --color-surface: #EADFC8;
  --color-dark: #1C2417;
  --color-dark-muted: #C9C2AE;
  --color-evening: #E7A27F;
  --color-on-brand-muted: #D9D2BE;
  --color-line: #C9BFA8;
  --color-field: #8D8A78;
  --color-action-hover: #8A3822;
  --color-hand-light: #F2C9A8;
  --color-shadow: rgb(35 40 28 / .45);
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --radius: 14px;
  --line: 2px;
  --space: 8px;
  /* type scale: phone 17 · 25.5 · 48 · 72 — desktop 18 · 27 · 48 · 96 · 144 (fine print 13) */
  --text-body: 17px;
  --text-lead: 26px;
  --text-mid: 26px;
  --hang: 72px;
  --text-head: 48px;
  --text-num: 72px;
  --text-fine: 13px;
  --pad: 64px;
  --ease-in: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --route-time: 2200ms;
}
@media (min-width: 1024px) {
  :root { --text-body: 18px; --text-lead: 27px; --text-mid: 48px; --text-head: 96px; --text-num: 144px; --pad: 128px; --hang: 120px; }
}

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin-full-normal.woff2?v=20261017) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin-full-italic.woff2?v=20261017) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin-wght-normal.woff2?v=20261017) format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/caveat-latin-wght-normal.woff2?v=20261017) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-padding-top: 16px; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-body)/1.6 var(--font-body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--color-action); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page grid with named outer tracks so pictures can bleed (library H2, principle 6) */
.grid { --max: 1240px; --gut: 16px; display: grid;
  grid-template-columns: [full-start] minmax(var(--gut), 1fr) [content-start] repeat(12, minmax(0, calc(var(--max) / 12))) [content-end] minmax(var(--gut), 1fr) [full-end]; }
@media (min-width: 700px) { .grid { --gut: 48px; } }
.grid > * { grid-column: content; }
.wrap { width: min(100% - 32px, 1240px); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 96px, 1240px); } }
section { padding-block: var(--pad); position: relative; }

/* ---------- type ---------- */
h1, h2, .claim { font: 600 var(--text-head)/1 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h3 { font: 700 var(--text-body)/1.3 var(--font-body); margin: 0; }
.hand { font: 600 var(--text-mid)/1 var(--font-hand); letter-spacing: 0; color: var(--color-action); display: inline-block; transform: rotate(-3deg); }
h1 .hand, h2 .hand { font-size: .5417em; }
@media (min-width: 1024px) { h1 .hand, h2 .hand { font-size: .5em; } }
.hand--line { display: block; width: max-content; transform-origin: 0 100%; margin: 0 0 .1em .04em; }
.lead { font-size: var(--text-lead); line-height: 1.35; margin: 0; max-width: 34ch; }
.fine { font-size: var(--text-fine); line-height: 1.4; }
p { max-width: 60ch; }

/* ---------- the device: a dotted route segment ending in a stop (section labels) ---------- */
.label { display: flex; align-items: center; gap: 12px; font: 700 var(--text-fine)/1.3 var(--font-body); letter-spacing: .02em; color: var(--color-brand); margin: 0 0 20px; }
.label::before { content: ""; flex: none; width: 46px; height: 10px;
  background: radial-gradient(circle at 50% 50%, currentColor 2px, transparent 2.5px) 0 50% / 9px 10px repeat-x; }
.label::after { content: ""; order: -1; display: none; }
.label .stop { order: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-action); flex: none; margin-left: -10px; }
.on-dark .label, .on-brand .label, .on-roof .label { color: inherit; }
.on-brand .hand, .on-roof .hand { color: var(--color-hand-light); }
.on-roof .label .stop, .on-brand .label .stop { background: var(--color-on-action); }
.on-dark .label .stop { background: var(--color-evening); }
.lockup { margin-bottom: 40px; }
@media (min-width: 1024px) { .lockup { margin-bottom: 64px; } }
.lockup .sub { margin-top: 24px; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5em; border-radius: var(--radius) var(--radius) var(--radius) 2px;
  background: var(--color-action); color: var(--color-on-action); font: 700 var(--text-body)/1.1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform 260ms var(--ease-in), box-shadow 260ms var(--ease-in), background-color 260ms; }
.btn:hover, .btn:focus-visible { background: var(--color-action-hover); transform: translateY(-3px); box-shadow: 0 6px 0 var(--color-text); }
.btn--light { background: var(--color-bg); color: var(--color-text); }
.btn--light:hover, .btn--light:focus-visible { background: var(--color-on-action); box-shadow: 0 6px 0 var(--color-dark); }
.text-link { font-weight: 700; padding: .7em 0; display: inline-block; }
.text-link:hover { text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
@media (max-width: 479px) { .actions .btn { width: 100%; } }

/* placeholders (R25): visible until the owner supplies them */
[data-placeholder] { outline: 2px dashed var(--color-action); outline-offset: 4px; }
.on-roof [data-placeholder], .on-dark [data-placeholder] { outline-color: var(--color-evening); }
.ph-note { display: inline-block; font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-action); border: 1px dashed currentColor; padding: 2px 8px; border-radius: 4px; }
.on-dark .ph-note, .on-roof .ph-note { color: var(--color-evening); }
.on-roof .ph-note { color: var(--color-on-action); }

/* ---------- header ---------- */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; }
.mark { font: 650 var(--text-lead)/1 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.bar .link { font-weight: 700; text-decoration: none; padding: .6em 0; white-space: nowrap; border-bottom: var(--line) solid var(--color-action); }

/* ---------- 1 · first screen (library H2 split-bleed + S5 arch/circle + route) ---------- */
.hero { position: relative; z-index: 2; padding-bottom: 0; padding-top: 0; overflow-x: clip; }
.hero .bar { grid-column: content; }
.hero__copy { grid-column: content; padding-top: 8px; position: relative; z-index: 3; }
.hero h1 { margin: 0 0 24px; max-width: 10ch; }
.hero .lead { margin-bottom: 28px; max-width: 30ch; }
.hero .price-line { margin: 20px 0 0; color: var(--color-muted); }
.hero__media { grid-column: content-start / full-end; position: relative; margin: 48px 0 -56px 40px; }
.hero__media .arch { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 0 0; }
.hero__media .guest { position: absolute; left: -32px; bottom: 15%; width: 150px; aspect-ratio: 1; margin: 0; z-index: 2; }
.hero__media .guest img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; outline: 8px solid var(--color-bg); }
.hero__media .guest figcaption { font: 600 var(--text-mid)/1 var(--font-hand); transform: rotate(-4deg); margin-top: 14px; width: max-content; }
.hero .route { position: absolute; left: -12%; top: -4%; width: 118%; height: 104%; pointer-events: none; color: var(--color-action); z-index: 1; overflow: visible; }
.route-dots { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 15; }
.route-stop { fill: currentColor; stroke: var(--color-bg); stroke-width: 4; }
.route-cap { fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; }
.hero .note { position: absolute; font: 600 var(--text-mid)/1 var(--font-hand); transform: rotate(-4deg); white-space: nowrap; pointer-events: none; z-index: 2; }
.hero .note--a { right: 8%; top: 68%; color: var(--color-on-action); }
@media (min-width: 960px) {
  .hero { min-height: min(100svh, 920px); grid-template-rows: auto 1fr; }
  .hero .bar { grid-column: content-start / span 7; }
  .hero__copy { grid-column: content-start / span 7; grid-row: 2; align-self: center; padding: 0 56px 72px 0; }
  .hero__media { grid-column: span 5 / full-end; grid-row: 1 / span 2; margin: 24px 0 -96px 0; }
  .hero__media .arch { aspect-ratio: auto; height: 100%; min-height: 720px; }
  .hero__media .guest { left: -150px; bottom: 15%; width: 260px; }
  .hero .route { left: -38%; width: 138%; top: -2%; height: 104%; }
}

/* ---------- 2 · proof band on the meadow (library P1 band / H5 ledger) ---------- */
.on-brand { background: var(--color-brand); color: var(--color-bg); }
.proof { padding-top: calc(var(--pad) + 72px); overflow-x: clip; }
@media (min-width: 960px) { .proof { padding-top: calc(var(--pad) + 96px); } }
.proof h2 { font-size: var(--text-mid); max-width: 22ch; }
.ledger { list-style: none; margin: 40px 0 0; padding: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; position: relative; }
.ledger::before { content: ""; position: absolute; left: 0; right: -48px; top: 0; height: 10px;
  background: radial-gradient(circle, var(--color-on-brand-muted) 2.5px, transparent 3px) 0 50% / 15px 10px repeat-x; }
.ledger li { position: relative; padding-top: 16px; }
.ledger li::before { content: ""; position: absolute; left: 0; top: -33px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-on-action); box-shadow: 0 0 0 4px var(--color-brand); }
.ledger li:first-child { grid-column: 1 / -1; }
.ledger b { display: block; font: 600 var(--text-num)/.9 var(--font-heading); font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.ledger span { display: block; margin-top: 12px; color: var(--color-on-brand-muted); max-width: 26ch; }
.ledger a { color: var(--color-bg); font-weight: 700; }
@media (min-width: 960px) {
  .ledger { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.1fr); column-gap: 48px; }
  .ledger li:first-child { grid-column: auto; }
}

/* ---------- 3 · their words (statement) ---------- */
.words .grid-in { display: grid; gap: 40px; }
.words blockquote { margin: 0; }
.words .big { font: 600 var(--text-head)/1.02 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.025em; margin: 0; max-width: 16ch; text-wrap: balance; }
.words .big i { font-style: normal; color: var(--color-action); }
.words .tr { margin: 16px 0 0; font-size: var(--text-lead); line-height: 1.35; color: var(--color-muted); }
.words .tr cite { font-style: normal; }
.saying { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.saying li { font: 600 var(--text-mid)/1.1 var(--font-hand); border-top: 1px solid var(--color-line); padding-top: 16px; }
.saying li .fine { display: block; font-family: var(--font-body); font-weight: 400; color: var(--color-muted); margin-top: 6px; }
.words .circle { margin: 0; width: min(62vw, 260px); justify-self: end; margin-top: -24px; }
.words .circle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.words .result { font-size: var(--text-lead); line-height: 1.35; margin: 0; max-width: 30ch; }
.words .result b { color: var(--color-brand); }
@media (min-width: 1024px) {
  .words .grid-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 96px; align-items: start; }
  .words .circle { width: 340px; position: absolute; right: max(48px, (100vw - 1240px) / 2 - 80px); top: -110px; margin: 0; }
  .words .side { padding-top: 220px; }
}

/* ---------- 4 · who it is for (library P5) ---------- */
.on-soft { background: var(--color-surface); }
.segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .segs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.seg { background: var(--color-bg); border: var(--line) solid transparent; border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 22px; display: grid; gap: 10px; align-content: start;
  transition: transform 260ms var(--ease-in), border-color 260ms; }
.seg:hover { transform: translateY(-3px); }
.seg h3 { font: 600 var(--text-mid)/1.1 var(--font-heading); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; }
.seg p { margin: 0; color: var(--color-muted); }
.seg .me { justify-self: start; margin-top: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--radius) var(--radius) var(--radius) 2px; border: var(--line) solid var(--color-text);
  background: transparent; color: var(--color-text); font: 700 var(--text-body)/1 var(--font-body); cursor: pointer; transition: background-color 200ms, color 200ms; }
.seg .me:hover { background: var(--color-surface); }
.seg:has(.me[aria-pressed="true"]) { border-color: var(--color-brand); }
.seg .me[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-action); }
.nextstep { margin-top: 20px; background: var(--color-text); color: var(--color-bg); border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 24px; display: grid; gap: 16px; }
@media (min-width: 900px) { .nextstep { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 32px 40px; } }
.nextstep p { margin: 0; }
.nextstep .k { font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-dark-muted); margin-bottom: 6px; }
.fit { display: grid; gap: 16px; margin-top: 64px; }
@media (min-width: 900px) { .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; } }
.fit .col { border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 28px; }
@media (min-width: 1024px) { .fit .col { padding: 48px; } }
.fit h3 { font: 600 var(--text-mid)/1.1 var(--font-heading); margin: 0 0 18px; }
.fit ul { margin: 0; padding: 0; list-style: none; }
.fit li { padding: 12px 0; border-top: 1px solid currentColor; display: grid; gap: 2px; }
.fit .for { background: var(--color-brand); color: var(--color-bg); }
.fit .for li { border-color: var(--color-on-brand-muted); }
.fit .for li span { color: var(--color-on-brand-muted); }
.fit .notfor { background: var(--color-bg); }
.fit .notfor li { border-color: var(--color-line); }
.fit .notfor li span { color: var(--color-muted); }
@media (min-width: 900px) { .fit .notfor { margin: 96px 0 0 -48px; position: relative; box-shadow: 0 24px 48px -32px var(--color-shadow); } .fit .for { padding-right: 96px; } }

/* ---------- 5 · a day here ★ (library 05 SVG route draw) ---------- */
.day .layout { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .day .layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } .map { position: sticky; top: 24px; } }
.map { margin: 0; }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map figcaption { margin-top: 8px; color: var(--color-muted); }
.map .fence { fill: none; stroke: var(--color-text); stroke-width: 2.5; stroke-dasharray: 10 6; }
.map .tree { fill: var(--color-brand); }
.map .house { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2.5; }
.map .roof { fill: var(--color-action); stroke: var(--color-text); stroke-width: 2.5; stroke-linejoin: round; }
.map .gate { fill: none; stroke: var(--color-text); stroke-width: 3; stroke-linecap: round; }
.map .route-line { fill: none; stroke: var(--color-action); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.map .route-halo { fill: none; stroke: var(--color-bg); stroke-width: 14; stroke-linecap: round; opacity: .8; }
.map .pin circle { fill: var(--color-action); stroke: var(--color-bg); stroke-width: 4; }
.map .pin text { fill: var(--color-on-action); font: 700 24px var(--font-body); text-anchor: middle; dominant-baseline: central; }
.map .tag { font: 600 30px var(--font-hand); fill: var(--color-text); }
/* THE TECHNIQUE (05): pathLength=1, dash of 1, offset 1 → 0; pins pop at their share of the route */
.motion .map .route-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .map.is-in .route-line { stroke-dashoffset: 0; transition: stroke-dashoffset var(--route-time) var(--ease-move); }
.motion .map .pin { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.motion .map.is-in .pin { transform: none; transition: transform 420ms var(--ease-back); transition-delay: calc(var(--at) * var(--route-time)); }
.stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; display: grid; gap: 32px; }
.stops li { counter-increment: stop; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.stops li::before { content: counter(stop); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-action); color: var(--color-on-action); font: 700 var(--text-body)/1 var(--font-body); }
.stops time, .stops .when { display: block; font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-brand); margin-bottom: 4px; }
.stops p { margin: 6px 0 0; color: var(--color-muted); }
.stops .hl { font: 600 var(--text-lead)/1.2 var(--font-heading); font-variation-settings: "SOFT" 100; }
.day .band { grid-column: full; margin: 96px 0 calc(-1 * (var(--pad) + var(--hang))); position: relative; z-index: 2; }
.day .band img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; }
.day .band figcaption { padding: 10px 16px 0; font-size: var(--text-fine); color: var(--color-muted); }
@media (min-width: 960px) {
  .day .band { grid-column: content-start / span 9; margin-top: 128px; }
  .day .band img { aspect-ratio: 21 / 9; }
  .day .band figcaption { position: absolute; right: -24px; bottom: 50%; transform: translateX(100%); width: 22ch; padding: 0; }
}

/* ---------- 6 · how it works on the roof field (library P6) ---------- */
.on-roof { background: var(--color-action); color: var(--color-on-action); }
.after-hang { padding-top: calc(var(--pad) + var(--hang)); }
.how .layout { display: grid; gap: 48px; }
@media (min-width: 1024px) { .how .layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; } .how .summary { position: sticky; top: 32px; } }
.how .summary p { color: var(--color-on-action); }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 25px; top: 28px; bottom: 28px; width: 6px;
  background: radial-gradient(circle, var(--color-on-action) 2.5px, transparent 3px) 50% 0 / 6px 15px repeat-y; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-action); border: var(--line) solid var(--color-on-action); color: var(--color-on-action); font: 700 var(--text-body)/1 var(--font-body); transition: background-color 300ms, color 300ms; }
.step .card { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 20px 22px; transition: box-shadow 300ms, transform 300ms var(--ease-in); }
.step .card h3 { font: 600 var(--text-lead)/1.2 var(--font-heading); font-variation-settings: "SOFT" 100; margin: 0 0 12px; }
.step dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.step dl > div:first-child { grid-column: 1 / -1; }
@media (min-width: 700px) { .step dl { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .step dl > div:first-child { grid-column: auto; } }
.step dt { font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-muted); }
.step dd { margin: 2px 0 0; }
.step.current .num { background: var(--color-on-action); color: var(--color-action); }
.step.current .card { box-shadow: 0 0 0 3px var(--color-text); }

/* ---------- 7 · voices (library P2, 3 quotes) ---------- */
.voices .layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .voices .layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.feature { margin: 0; }
.feature p { font: 600 var(--text-head)/1.02 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.02em; margin: 0; max-width: 18ch; text-wrap: balance; }
.who { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-style: normal; }
.who .ini { width: 48px; height: 48px; border-radius: 50%; background: var(--color-brand); color: var(--color-bg); display: grid; place-items: center; font: 700 var(--text-body)/1 var(--font-body); flex: none; }
.who b { display: block; }
.who span { color: var(--color-muted); }
.minor { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.minor li { background: var(--color-surface); border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 24px; transition: transform 260ms var(--ease-in); }
.minor li:hover { transform: translateY(-3px); }
.minor blockquote { margin: 0; }
.minor blockquote p { margin: 0; font-size: var(--text-lead); line-height: 1.3; font-family: var(--font-heading); font-variation-settings: "SOFT" 100; }
.guests { display: flex; gap: 20px; align-items: end; margin: 40px 0 0; }
.guests figure { margin: 0; }
.guests img { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.guests figure:nth-child(2) img { width: 110px; }
.guests figcaption { font: 600 var(--text-mid)/1 var(--font-hand); margin-top: 8px; transform: rotate(-3deg); }
@media (min-width: 1024px) { .guests img { width: 220px; } .guests figure:nth-child(2) img { width: 160px; } .guests figure:nth-child(2) { margin-bottom: 60px; } }
.rating { margin: 32px 0 0; }

/* ---------- 8 · the offer, written like a farm menu (library P4) ---------- */
.offer { padding-bottom: 0; }
.offer .layout { display: grid; gap: 40px; }
@media (min-width: 1024px) { .offer .layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } .offer .side { position: sticky; top: 32px; } }
.guarantee { margin-top: 32px; padding: 20px 0 0; border-top: var(--line) solid var(--color-text); }
.guarantee b { display: block; font: 600 var(--text-lead)/1.2 var(--font-heading); font-variation-settings: "SOFT" 100; margin-bottom: 8px; }
.guarantee p { margin: 0; }
.menu { position: relative; z-index: 2; background: var(--color-bg); border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 24px; margin-bottom: -96px;
  box-shadow: 10px 10px 0 var(--color-text); border: var(--line) solid var(--color-text); }
@media (min-width: 1024px) { .menu { padding: 48px; margin-bottom: -160px; box-shadow: 16px 16px 0 var(--color-text); } }
.menu h3 { font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-brand); margin: 24px 0 4px; }
.menu h3:first-child { margin-top: 0; }
.prices { list-style: none; margin: 0; padding: 0; }
.prices li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.prices .item { font: 600 var(--text-lead)/1.2 var(--font-heading); font-variation-settings: "SOFT" 100; }
.prices .item small { display: block; font: 400 var(--text-body)/1.4 var(--font-body); color: var(--color-muted); }
.prices .dots { flex: 1; min-width: 24px; align-self: end; margin-bottom: .55em; height: 6px; background: radial-gradient(circle, var(--color-text) 1.5px, transparent 2px) 0 50% / 9px 6px repeat-x; }
.prices .p { font: 600 var(--text-mid)/1 var(--font-heading); font-variation-settings: "SOFT" 100; font-variant-numeric: lining-nums; white-space: nowrap; }
.prices li:first-child .p { color: var(--color-action); }
.incl { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.incl li { padding-left: 22px; position: relative; }
.incl li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-action); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0; }
.facts div { background: var(--color-surface); border-radius: 12px; padding: 10px 12px; }
.facts dt { font: 700 var(--text-fine)/1.3 var(--font-body); color: var(--color-muted); }
.facts dd { margin: 4px 0 0; }
.menu .cta { display: grid; gap: 14px; }
.menu .cta .btn { width: 100%; }
.menu .secondary { margin: 0; text-align: center; }

/* ---------- 9 · the people (library P3) ---------- */
.people { padding-top: calc(var(--pad) + 96px); }
@media (min-width: 1024px) { .people { padding-top: calc(var(--pad) + 160px); } }
.founder { display: grid; gap: 56px; }
@media (min-width: 1024px) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: start; } }
.pics { position: relative; padding-bottom: 22%; }
.place { margin: 0 0 0 30%; }
.place img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; border-radius: 999px 999px 0 0; }
.portraits { position: absolute; left: 0; bottom: 0; width: 58%; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.portrait { margin: 0; aspect-ratio: 4 / 5; background: var(--color-bg); color: var(--color-brand); display: grid; align-content: space-between; padding: 14px; box-shadow: 0 0 0 6px var(--color-brand); }
.portrait .ini { font: 600 var(--text-head)/.8 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1; }
.portrait figcaption { line-height: 1.3; color: var(--color-text); }
.portrait figcaption b { display: block; }
.portrait .ph-note { margin-top: 6px; }
.story p { margin: 0 0 1em; }
.story .lead { margin: 24px 0 24px; color: var(--color-on-brand-muted); }
.pull { margin: 40px 0; padding: 0; }
.pull::before { content: ""; display: block; width: 46px; height: 10px; margin-bottom: 20px; background: radial-gradient(circle, var(--color-bg) 2px, transparent 2.5px) 0 50% / 9px 10px repeat-x; }
.pull p { margin: 0; font: 600 var(--text-mid)/1.1 var(--font-heading); font-variation-settings: "SOFT" 100, "WONK" 1; font-style: italic; text-wrap: balance; max-width: 22ch; }
.creds { list-style: none; margin: 32px 0 0; padding: 0; }
.creds li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-on-brand-muted); }
.creds li:last-child { border-bottom: 1px solid var(--color-on-brand-muted); }
.creds b { font-weight: 700; }

/* ---------- 10 · questions (library P7 / 14) ---------- */
.faq .layout { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq .layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; } .faq .head { position: sticky; top: 32px; } }
.qa { border-top: var(--line) solid var(--color-text); }
.qa details { border-bottom: 1px solid var(--color-line); }
.qa summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 16px; align-items: center; min-height: 64px; padding: 16px 0; cursor: pointer; font-weight: 700; }
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { position: relative; width: 32px; height: 32px; border-radius: 50%; border: var(--line) solid var(--color-text); transition: background-color 200ms; }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 300ms var(--ease-move); }
.qa .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa details[open] .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa summary:hover .pm { background: var(--color-surface); }
.qa .a { padding: 0 48px 22px 0; color: var(--color-muted); }
.qa .a p { margin: 0; }
.qa details::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--ease-move), content-visibility 320ms allow-discrete; }
.qa details[open]::details-content { block-size: auto; }
.objection { margin-top: 40px; background: var(--color-surface); border-radius: var(--radius) var(--radius) var(--radius) 2px; padding: 24px; }
.objection b { font: 600 var(--text-lead)/1.2 var(--font-heading); font-variation-settings: "SOFT" 100; display: block; margin-bottom: 6px; }
.objection p { margin: 0; }

/* ---------- 11 · closing at 19:00 + footer (library P7) ---------- */
.on-dark { background: var(--color-dark); color: var(--color-bg); }
.closing .layout { display: grid; gap: 48px; }
@media (min-width: 1024px) { .closing .layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; align-items: end; } }
.closing .route-end { width: 100%; max-width: 560px; height: auto; color: var(--color-evening); margin-bottom: 24px; overflow: visible; }
.closing .route-end .route-stop { stroke: var(--color-dark); }
.closing .route-end text { font: 600 27px var(--font-hand); fill: var(--color-evening); }
.closing h2 { color: var(--color-bg); }
.closing h2 .hand { color: var(--color-evening); }
.closing p { color: var(--color-dark-muted); }
.closing .facts-dark { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 0; }
.closing .facts-dark li { padding: 12px 0; border-top: 1px solid var(--color-muted); display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.closing .facts-dark b { color: var(--color-evening); }
.closing .text-link { color: var(--color-bg); }
.foot { padding-block: 48px; border-top: 1px solid var(--color-muted); }
.foot .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 900px) { .foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } }
.foot .about { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot .about { grid-column: auto; } }
.foot .about p { margin: 10px 0 0; color: var(--color-dark-muted); max-width: 34ch; }
.foot h3 { font: 700 var(--text-fine)/1.3 var(--font-body); margin: 0 0 12px; color: var(--color-dark-muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot li a, .foot li span { display: block; padding-block: 10px; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.foot li a:hover { text-decoration: underline; }
.foot .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-muted); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--color-dark-muted); }
.foot .legal p { margin: 0; }

/* ---------- quiet helper: picture reveal on scroll (library 01) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .motion .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 5% entry 85%; }
    @keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.how .summary .sub { margin-top: 24px; }
.closing { padding-block: var(--pad); }
@media (max-width: 959px) {
  .day .band figcaption { color: var(--color-on-action); }
  .step { padding-bottom: 16px; gap: 12px; }
  .step .card { padding: 14px 16px; }
  .step .card h3 { margin-bottom: 6px; }
  .step dl { gap: 6px 12px; }
}
/* tap targets ≥ 44 px for links inside text and the name (rubric 15) */
.mark { display: inline-block; padding-block: 9px; }
.rating a, .menu .secondary a, .ledger a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.story p { max-width: 58ch; }