/*
 * Celebrate, round 3: "Be at the party, not running it."
 * The system (assets/system/) gives the ground, ink, accent and kanoko pattern
 * (tokens.css, html[data-site="celebrate"]); everything here is this site's own:
 * Instrument Serif set at its true weight, the party clock in purple with its
 * kanoko rim, the run sheet, the growing set of packages, the invitation
 * stylings, the two halves of a children's party and the page compositions.
 * Phone first; the tablet from 720 px; the laptop composition from 1024 px.
 * Every pair added here is in docs/plan/panel/round3/report-celebrate.md.
 */
:root {
  /* the clock's unlit half hours and weeks: decoration, never information alone */
  --unlit: light-dark(#E6D9E9, #43374A);
  --unlit-week: light-dark(#EFE6EE, #3A2F3F);
  --clock-face: light-dark(#FCF8F6, #2D2630);
  /* a soft plum shadow for lifted cards; never animated */
  --lift: 0 18px 40px -26px light-dark(rgb(60 24 80 / .45), rgb(0 0 0 / .7));
}

/* ---------- headings: Instrument Serif at its one weight (the system's --display-weight) ---------- */
h1, h2, h3, h4 { letter-spacing: 0; }
h1 { font-size: calc(var(--step-display) * 1.12); line-height: 1.04; }
h2 { font-size: calc(var(--step-1) * 1.14); line-height: 1.08; }
h3 { font-size: calc(var(--step-2) * 1.12); line-height: 1.15; }
.area-nav-name { font-size: 1.45rem; }
.pair--hero > h1 { font-size: calc(var(--step-hero) * 1.08); line-height: 1; }
.pair em, h1 em, h2 em { font-style: italic; color: var(--accent); }
.pair .line { display: block; }

/* ---------- page measure and rhythm ---------- */
.page-head { padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.page-head .kicker { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.page-head .kicker .seal-icon { --seal-size: 28px; }
.page-head .round-semi { width: min(13rem, 52%); margin-top: var(--s-5); }
.page-head .lede { margin-top: var(--s-5); }
.band { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.band--tint { background: var(--tint); }
.band + .band:not(.band--tint) { padding-top: 0; }
.band-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 48rem; }
.band-head .lede { color: var(--ink-2); font-size: 1.1rem; }
.example-label { margin-bottom: var(--s-2); }
.more { display: inline-flex; align-items: center; gap: 0.5em; min-height: var(--target); font-weight: 650; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.more svg { width: 1.05em; height: 1.05em; transition: transform var(--t-swap) var(--ease-out); }
.more:hover svg { transform: translateX(3px); }
.divider { display: block; }

/* ---------- prices: plain, each with its lines beside it ---------- */
.prices { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.prices > li { display: grid; gap: 2px; padding: var(--s-3) 0; border-top: 1px solid var(--hair); }
.prices > li:last-child { border-bottom: 1px solid var(--hair); }
.prices .price-item { font-size: 1.125rem; }
.price-lines { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.price-lines .legal-line { max-width: 46ch; }

/* ---------- the front page's opening: the answer first, then the clock ---------- */
.c-hero { display: grid; gap: var(--s-7); padding-top: clamp(1.25rem, 0.8rem + 2vw, 3rem); }
.c-hero .kicker { margin-bottom: var(--s-4); }
.c-hero .pair--hero { gap: 0.6em; }
.answer { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; max-width: 40rem; }
.answer li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: 1.1rem; line-height: 1.45; }
.answer li::before { content: ""; width: 14px; height: 14px; margin-top: 0.3em; border-radius: 3px; transform: rotate(45deg); background: var(--area-ink); box-shadow: inset 0 0 0 4px var(--raised); outline: 1.5px solid var(--area-ink); outline-offset: -1.5px; }
.c-hero .prices { margin-top: var(--s-5); max-width: 34rem; }
.c-hero .call-row { margin-top: var(--s-5); }
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.call-row .call-note { margin: 0; }
@media (max-width: 719px) {
  .c-hero { gap: var(--s-6); }
  .c-hero .pair--hero > h1 { font-size: clamp(2.35rem, 1.4rem + 5vw, 3rem); }
  .c-hero .pair--hero > h1 ~ .subline { font-size: 18px; }
  .answer { margin-top: var(--s-4); gap: var(--s-2); }
  .answer li { font-size: 1rem; }
  .c-hero .prices { margin-top: var(--s-4); gap: 0; }
  .c-hero .prices > li { padding: var(--s-2) 0; }
}
.c-hero-sheet { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) {
  .c-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "words clock" "sheet clock"; column-gap: clamp(2.5rem, 5vw, 5.5rem); row-gap: var(--s-8); align-items: start; }
  .c-hero-words { grid-area: words; }
  .c-hero-clock { grid-area: clock; position: sticky; top: 1.5rem; }
  .c-hero-sheet { grid-area: sheet; }
  .c-hero-sheet .runsheet { grid-template-columns: 1fr; }
}
.pkgs-q { font-size: 1.15rem; color: var(--ink); text-align: center; }
.set-head { margin: var(--s-6) 0 var(--s-2); }
.occasion-img .photo-slot-frame { height: 100%; border-radius: inherit; }

/* ---------- the party clock (9.9, 11.4) ---------- */
.party { position: relative; }
.party-clock { display: grid; gap: var(--s-4); justify-items: center; }
.clock { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.clock-svg, .weeks-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clock-face { fill: var(--clock-face); }
.band-wash { fill: var(--wash-celebrate); }
.band-dots { opacity: .9; }
.band-line { fill: none; stroke: var(--boundary); stroke-width: 1.6; }
.ring-line, .inner-line { fill: none; stroke: var(--boundary); stroke-width: 1.6; }
.window-line { fill: none; stroke: var(--hair); stroke-width: 2; }
.tick { stroke: var(--boundary); stroke-width: 2; }
.tick--hour { stroke: var(--ink-2); stroke-width: 3; }
.hr { font-family: var(--face-caps); font-size: 25px; font-weight: 600; fill: var(--ink-2); letter-spacing: .02em; }
.hr--doors { fill: var(--accent); font-size: 30px; }
.arc-label { font-family: var(--face-caps); font-size: 21px; font-weight: 650; letter-spacing: .3em; fill: var(--ink-2); }
.rim-name { font-family: var(--face-caps); font-size: 30px; font-weight: 650; letter-spacing: .5em; fill: var(--accent); }
.cell { fill: none; stroke: var(--unlit); stroke-width: 34; transition: stroke 240ms var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
.wk { fill: none; stroke: var(--unlit-week); stroke-width: 22; transition: stroke 240ms var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
/* Lit: Laura's part of the day under the chosen package; each package keeps the ones below it lit. */
.party:has(input[value="set"]:checked) .scale--6 .ph-setup,
.party:has(input[value="day"]:checked) .scale--6 .cell,
.party[data-fixed="day"] .scale--6 .cell,
.party:has(input[value="wed"]:checked) .scale--10 .cell,
.party:has(input[value="tog"]:checked) .scale--10 .cell,
.party[data-fixed="wed"] .scale--10 .cell { stroke: var(--accent); }
.party:has(input[value="plan"]:checked) .wk.in-plan, .party:has(input[value="set"]:checked) .wk.in-plan, .party:has(input[value="day"]:checked) .wk.in-plan,
.party:has(input[value="wed"]:checked) .wk.in-wed, .party[data-fixed="wed"] .wk.in-wed, .party:has(input[value="tog"]:checked) .wk { stroke: var(--area-ink); }
.scale { transition: opacity var(--t-turn) var(--ease-turn), transform var(--t-turn) var(--ease-turn); transform-origin: 0 0; }
.party:has(input[value="wed"]:checked, input[value="tog"]:checked) .scale--6,
.party:not(:has(input[value="wed"]:checked, input[value="tog"]:checked)) .scale--10 { opacity: 0; transform: rotate(-8deg); }
.party:has(input[value="wed"]:checked, input[value="tog"]:checked) .clock { --doors: -8.8deg; }
.party-still .scale--10 { opacity: 0; }
/* the round window onto the room: before the doors, then the lights */
.clock-window { position: absolute; inset: 25.9%; border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 0 0 4px var(--clock-face), 0 0 0 5.5px var(--hair); }
.clock-window picture, .clock-window img { position: absolute; inset: 0; width: 100%; height: 100%; }
.clock-window img { object-fit: cover; }
.win-lit { opacity: 0; transition: opacity 240ms ease-out; }
.clock[data-lights="on"] .win-lit { opacity: 1; }
.clock.lights-slow .win-lit { transition-duration: 900ms; }
/* the doors mark at twelve o'clock and the hand */
.doors-mark { position: absolute; left: 50%; top: 0; width: 7%; transform: translateX(-50%) rotate(var(--doors, 0deg)); transform-origin: 50% 714%; transition: transform var(--t-turn) var(--ease-turn); }
.doors-mark svg { width: 100%; }
.doors-mark path { fill: var(--seal-orange); }
.hand { position: absolute; inset: 0; pointer-events: none; transform: rotate(var(--hand, 0deg)); transition: transform 420ms var(--ease-out); }
.hand-line { position: absolute; left: calc(50% - 1.5px); top: 21%; width: 3px; height: 29%; border-radius: 3px; background: var(--ink); }
.hand-line::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); }
.hand-knob { position: absolute; left: 50%; top: calc(16.7% - 22px); width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none; }
.hand-knob::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--clock-face), 0 0 0 5.5px var(--accent); transition: transform var(--t-press) var(--ease-out); }
.hand-knob:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hand-knob:active { cursor: grabbing; }
.hand-knob:active::before, .clock.is-dragging .hand-knob::before { transform: scale(1.12); }
.clock.is-dragging .hand, .clock.is-instant .hand { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  html.lt-js .clock[data-clock-arrive]:not(.has-arrived) { --hand: 272deg; }
  html.lt-js .clock[data-clock-arrive]:not(.has-arrived) .cell { stroke: var(--unlit); transition: none; }
  html.lt-js .clock[data-clock-arrive]:not(.has-arrived) .win-lit { opacity: 0; transition: none; }
  .clock.is-arriving .hand { transition: transform 1000ms cubic-bezier(.3, 0, .2, 1) 300ms; }
  .clock.is-arriving .cell { transition-duration: 200ms; }
  .clock.is-arriving .win-lit { transition: opacity 900ms ease-out 1300ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hand, .doors-mark, .scale, .cell, .wk, .win-lit { transition: none !important; }
}
/* the reading under the clock */
.reading { display: grid; justify-items: center; gap: 2px; min-height: 4.6rem; text-align: center; }
.reading-time { font-family: var(--face-display); font-size: 2rem; line-height: 1; }
.reading-what { font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.reading-who { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pkg-sum { display: none; max-width: 36rem; text-align: center; color: var(--ink-2); }
.party:has(input[value="plan"]:checked) .pkg-sum--plan,
.party:has(input[value="set"]:checked) .pkg-sum--set,
.party:has(input[value="day"]:checked) .pkg-sum--day,
.party:has(input[value="wed"]:checked) .pkg-sum--wed,
.party:has(input[value="tog"]:checked) .pkg-sum--tog { display: block; }
.clock-caption { text-align: center; }

/* the package choice: a radio group of pills */
.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 560px; margin: 0 auto; padding: 0; border: 0; }
.pkgs legend { grid-column: 1 / -1; margin: 0 auto var(--s-2); text-align: center; float: none; padding: 0; }
.pkgs legend.caps { width: 100%; }
.pkg { position: relative; display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 60px; padding: 8px 6px; border: 1px solid var(--boundary); border-radius: 16px; background: var(--raised); cursor: pointer; text-align: center; transition: background-color var(--t-swap) ease-out, color var(--t-swap) ease-out, border-color var(--t-swap) ease-out, transform var(--t-press) var(--ease-out); }
.pkg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pkg-name { font-weight: 650; font-size: 0.95rem; line-height: 1.2; }
.pkg-adds { font-size: var(--step-quiet); line-height: 1.25; color: var(--ink-2); }
.pkg:hover { border-color: var(--ink); }
.pkg:active { transform: scale(.97); }
.pkg:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--clock-face); }
.pkg:has(input:checked) .pkg-adds { color: inherit; }
.pkg:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pkgs:has(input[value="set"]:checked) .pkg--plan, .pkgs:has(input[value="day"]:checked) :is(.pkg--plan, .pkg--set) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce) { .pkg { transition: none; } .pkg:active { transform: none; } }

/* the run sheet: who runs each half hour, under the chosen package */
.runsheet { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .runsheet { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
.rs-col .caps { margin-bottom: var(--s-2); }
.rs-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rs-row { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: var(--s-3); align-items: baseline; width: 100%; min-height: var(--target); padding: var(--s-2) var(--s-2); border: 0; border-bottom: 1px dashed var(--hair); background: none; text-align: left; border-radius: 6px; transition: background-color var(--t-swap) ease-out; }
.rs-row:hover { background: var(--raised); }
.rs-time { font-variant-numeric: tabular-nums; font-weight: 650; font-size: var(--step-small); color: var(--ink-2); }
.rs-what { font-size: 0.98rem; line-height: 1.4; }
.whom { display: none; font-family: var(--face-caps); font-size: 0.72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.whom.is-laura { color: var(--accent); }
.rs-row > .rs-who > .whom:only-child { display: inline; }
.party:has(input[value="plan"]:checked) .whom--plan, .party:has(input[value="set"]:checked) .whom--set, .party:has(input[value="day"]:checked) .whom--day { display: inline; }
.party:not(:has(input[type="radio"]:checked)) .whom--day { display: inline; }
.rs-item.is-now .rs-row { background: var(--tint); }
.rs-item.is-now .rs-time { color: var(--accent); }
.rs-item--doors .rs-what { font-weight: 650; }

/* the band under the front page's clock */
.hours-band .wrap { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .hours-band .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; } }

/* ---------- occasions: three doors, each opening on its own room ---------- */
.occasions { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .occasions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.occasion { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform var(--t-swap) var(--ease-out), border-color var(--t-swap) ease-out; }
.occasion:hover { border-color: var(--boundary); transform: translateY(-2px); }
.occasion:active { transform: scale(.985); }
.occasion-img { position: relative; aspect-ratio: 3 / 2; border-radius: 999px 999px 0 0; margin: var(--s-3) var(--s-3) 0; overflow: hidden; background: var(--tint); }
.occasion-img picture, .occasion-img img { width: 100%; height: 100%; object-fit: cover; }
.occasion-body { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.occasion-name { font-family: var(--face-display); font-size: 1.75rem; line-height: 1.05; }
.occasion-line { color: var(--ink-2); }
.occasion-go { display: inline-flex; align-items: center; gap: 0.45em; margin-top: var(--s-2); font-weight: 650; color: var(--accent); }
.occasion-go svg { width: 1.05em; height: 1.05em; transition: transform var(--t-swap) var(--ease-out); }
.occasion:hover .occasion-go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .occasion, .occasion:hover, .occasion:active { transform: none; } }

/* ---------- the growing set: each package includes the one below ---------- */
.ladder { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rung; }
.rung { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--hair); }
.rung:last-child { border-bottom: 1px solid var(--hair); }
.rung-ring { position: relative; width: 44px; height: 44px; flex: none; }
.rung-ring svg { width: 100%; height: 100%; overflow: visible; }
.rung-ring circle { fill: none; stroke: var(--boundary); stroke-width: 2; }
.rung-ring circle.on { stroke: var(--accent); stroke-width: 3; }
.rung .price-item { font-size: 1.15rem; }
.rung .price-what { font-size: 0.98rem; }
.ladder-wrap { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .ladder-wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.yours { padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.yours ul { display: grid; gap: var(--s-1); margin: var(--s-3) 0 var(--s-4); padding-left: 1.1rem; }
.yours li::marker { color: var(--area-ink); }

/* ---------- other doors: the app, the neighbours ---------- */
.doors-pair { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .doors-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.side-door { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-items: start; min-height: 100%; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); color: var(--ink); text-decoration: none; transition: border-color var(--t-swap) ease-out; }
.side-door:hover { border-color: var(--boundary); }
.side-door .seal-icon { --seal-size: 48px; grid-row: span 2; transition: transform var(--t-swap) var(--ease-out); }
.side-door:hover .seal-icon { transform: rotate(30deg); }
.side-door b { font-family: var(--face-caps); font-weight: 650; font-size: 1.05rem; }
.side-door span { color: var(--ink-2); font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .side-door:hover .seal-icon { transform: none; } }

/* ---------- her own words ---------- */
.words { display: grid; gap: var(--s-5); }
.quote { position: relative; margin: 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); border-left: 3px solid var(--area-ink); background: var(--raised); border-radius: 0 var(--radius) var(--radius) 0; }
.quote p { font-family: var(--face-display); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.quote-fig { margin: 0; }
.quote-by { display: block; margin-top: var(--s-3); font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.words-lede { color: var(--ink-2); }

/* ---------- the call band ---------- */
.call-band { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; background: var(--tint); text-align: center; }
.call-band .wrap { display: grid; justify-items: center; gap: var(--s-4); }
.call-band .pair { justify-items: center; }
.call-band .subline { padding-left: 0; text-align: center; }
.call-band .divider { margin: 0 auto; }
.call-band .routes { margin-top: var(--s-2); }

/* ---------- inner pages: a head beside its instrument ---------- */
.split { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); }
  .split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split .sticky { position: sticky; top: 1.5rem; }
}
.facts { display: grid; gap: 0; }

/* ---------- the packages page: the growing set as choices ---------- */
.pk-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; border: 0; }
.pk-list legend { margin-bottom: var(--s-3); padding: 0; }
.pk { position: relative; border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); transition: border-color var(--t-swap) ease-out, box-shadow var(--t-swap) ease-out; }
.pk-choose { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-1) var(--s-4); align-items: center; min-height: 72px; padding: var(--s-4) var(--s-5); cursor: pointer; }
.pk-choose input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pk-name.price-item { font-family: var(--face-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.pk-mark { width: 44px; height: 44px; }
.pk-mark svg { width: 100%; height: 100%; overflow: visible; }
.pk-mark circle { fill: none; stroke: var(--boundary); stroke-width: 2; transition: stroke var(--t-swap) ease-out; }
.pk-name { font-family: var(--face-display); font-size: 1.55rem; line-height: 1.1; }
.pk-price { font-weight: 650; font-variant-numeric: tabular-nums; }
.pk-body { padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 44px + var(--s-4)); }
.pk-body > p { color: var(--ink); }
.pk-meta { margin-top: var(--s-2); font-size: var(--step-small); color: var(--ink-2); }
.pk-body .disclosure { margin-top: var(--s-3); }
.pk-body .disclosure:last-of-type { border-bottom: 0; }
.pk:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pk:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pk:has(input:checked) .pk-mark circle { stroke: var(--accent); }
/* each package lights the rings of the ones it includes */
.pk-list:has(#pk-set:checked) :is(.pk--plan) .pk-mark circle,
.pk-list:has(#pk-day:checked) :is(.pk--plan, .pk--set) .pk-mark circle,
.pk-list:has(#pk-wed:checked) :is(.pk--wed) .pk-mark circle,
.pk-list:has(#pk-tog:checked) :is(.pk--wed, .pk--tog) .pk-mark circle { stroke: var(--accent); }
.pk-mark circle.ring-1 { stroke-width: 3; }
@media (max-width: 719px) {
  .pk-body { padding-left: var(--s-5); }
}
.dial-centre-text { position: absolute; inset: 27%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.dial-centre-text .one { display: none; }
.dial-centre-text .big { display: block; font-family: var(--face-display); font-size: clamp(1.6rem, 5.4vw, 2.6rem); line-height: 1; }
.dial-centre-text .small { display: block; max-width: 15ch; margin: var(--s-2) auto 0; font-family: var(--face-note); font-weight: 600; font-size: clamp(0.9rem, 2.4vw, 1.05rem); line-height: 1.3; color: var(--ink-2); }
.party:has(input[value="plan"]:checked) .one--plan, .party:has(input[value="set"]:checked) .one--set, .party:has(input[value="day"]:checked) .one--day,
.party:has(input[value="wed"]:checked) .one--wed, .party:has(input[value="tog"]:checked) .one--tog { display: block; }
.bigger { padding: var(--s-5); border: 1px dashed var(--boundary); border-radius: calc(var(--radius) + 4px); }
.bigger .price-item { font-family: var(--face-display); font-weight: 400; font-size: 1.55rem; }

/* ---------- the day: the scroll process in the clock face's round ---------- */
.process-step .when { font-family: var(--face-caps); font-size: var(--step-quiet); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-3); display: block; }
.process-step h3 { margin-top: var(--s-1); font-size: calc(var(--step-1) * 1.05); }
.who-runs { display: grid; gap: 2px; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--tint); font-size: var(--step-small); max-width: 26rem; }
.who-runs div { display: flex; justify-content: space-between; gap: var(--s-4); }
.who-runs dt { color: var(--ink-2); }
.who-runs dd { margin: 0; font-weight: 650; }
.who-runs dd.is-laura { color: var(--accent); }
.process-stage-frame .photo-slot-frame, .process-figure .photo-slot-frame { height: 100%; border-radius: 0; }
.process-figure .photo-slot-frame { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.process-stage-frame .photo-slot-frame { aspect-ratio: auto; }
.note-chip { left: 50%; transform: translateX(-50%); display: inline-grid; justify-items: center; gap: 0; padding: 0.45rem 1rem 0.5rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--raised) 92%, transparent); color: var(--ink); text-align: center; box-shadow: var(--lift); white-space: nowrap; }
.note-chip b { font-family: var(--face-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.note-chip span { font-family: var(--face-caps); font-size: 0.7rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.note-chip--time { top: 9%; }
.note-chip--who { bottom: 11%; }
.frame--circle .note-chip--time { top: 12%; }
.frame--circle .note-chip--who { bottom: 13%; }
.process-figure .note-chip { position: absolute; }
.process { --process-top: 0px; }
.process-stage-inner.frame--circle { box-shadow: 0 0 0 8px var(--clock-face), 0 0 0 9.5px var(--boundary); }
.process-stage-inner.frame--circle::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--wash-celebrate) 70%, transparent); }
.process-stage .press { z-index: 4; right: 10%; bottom: 10%; }
@media (max-width: 1023px) {
  .process.is-staged .process-stage { padding-bottom: var(--s-2); }
  .note-chip { padding: 0.3rem 0.75rem 0.35rem; }
  .note-chip b { font-size: 1.05rem; }
  .note-chip span { font-size: 0.62rem; }
}
.shop { display: grid; gap: 0; margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.shop li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px dashed var(--hair); font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; }
.shop .qty { font-family: var(--face-text); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent); }
.pack-card { padding: var(--s-6); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); box-shadow: var(--lift); }
.sheet-table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.sheet-table th, .sheet-table td { padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.sheet-table thead th { font-family: var(--face-caps); font-size: 0.72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sheet-table td.is-laura { color: var(--accent); font-weight: 650; }
.sheet-table .t { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.table-scroll { overflow-x: auto; }

/* ---------- children's parties: one round, two halves ---------- */
.halves-round { display: grid; gap: 6px; }
.half { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--raised); border: 1px solid var(--hair); }
.half--laura { border-radius: 999px 999px var(--radius) var(--radius); padding-top: clamp(3rem, 8vw, 4.5rem); background: color-mix(in srgb, var(--wash-celebrate) 55%, var(--raised)); }
.half--parents { border-radius: var(--radius) var(--radius) 999px 999px; padding-bottom: clamp(3rem, 8vw, 4.5rem); }
.half h2 { text-align: center; font-size: calc(var(--step-1) * 0.95); }
.half ul { display: grid; gap: var(--s-2); max-width: 26rem; margin: var(--s-4) auto 0; padding: 0; list-style: none; }
.half li { position: relative; padding-left: 1.4rem; }
.half li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--area-ink); }
.half--parents li::before { background: transparent; outline: 1.5px solid var(--ink-2); outline-offset: -1.5px; }
@media (min-width: 1024px) {
  .halves-round { grid-template-columns: 1fr 1fr; }
  .half--laura { border-radius: 999px var(--radius) var(--radius) 999px; padding: var(--s-7) var(--s-6) var(--s-7) clamp(3rem, 6vw, 5rem); }
  .half--parents { border-radius: var(--radius) 999px 999px var(--radius); padding: var(--s-7) clamp(3rem, 6vw, 5rem) var(--s-7) var(--s-6); }
}

/* ---------- invitations: three stylings of one invitation ---------- */
.styles-pick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.styles-pick legend { width: 100%; margin-bottom: var(--s-2); padding: 0; }
.style-chip { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; min-height: var(--target); padding: 0 1rem 0 0.55rem; border: 1px solid var(--boundary); border-radius: var(--radius-pill); background: var(--raised); cursor: pointer; font-weight: 600; transition: border-color var(--t-swap) ease-out, background-color var(--t-swap) ease-out; }
.style-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.style-chip .swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--boundary); }
.style-chip:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint); }
.style-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.swatch--spots { background: radial-gradient(circle at 30% 30%, #E7A9C1 0 18%, transparent 20%), radial-gradient(circle at 70% 65%, #A9CBE7 0 18%, transparent 20%), #FBF3EC; }
.swatch--linen { background: linear-gradient(135deg, #DCE5D2, #B8C9A8); }
.swatch--candle { background: radial-gradient(circle at 50% 40%, #E9C987 0 22%, transparent 26%), #3B2340; }
.invite-stage { display: grid; gap: var(--s-5); }
.invite { --inv-bg: #FBF3EC; --inv-ink: #3A2230; --inv-accent: #9C3D63; --inv-edge: #E7C3D2; position: relative; width: min(100%, 26rem); aspect-ratio: 5 / 7; margin-inline: auto; padding: 12% 10%; display: grid; align-content: center; justify-items: center; gap: var(--s-3); text-align: center; background: var(--inv-bg); color: var(--inv-ink); border-radius: 6px; box-shadow: var(--lift), 0 0 0 1px var(--inv-edge); overflow: hidden; transition: background-color 240ms ease-out, color 240ms ease-out, box-shadow 240ms ease-out; }
.invite::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity 240ms ease-out; background: radial-gradient(circle, #E7A9C1 0 3px, transparent 3.5px) 0 0 / 34px 34px, radial-gradient(circle, #A9CBE7 0 3px, transparent 3.5px) 17px 17px / 34px 34px; -webkit-mask: linear-gradient(#000, #000) top / 100% 16% no-repeat, linear-gradient(#000, #000) bottom / 100% 16% no-repeat; mask: linear-gradient(#000, #000) top / 100% 16% no-repeat, linear-gradient(#000, #000) bottom / 100% 16% no-repeat; }
.invite-kicker { font-family: var(--face-caps); font-size: 0.75rem; font-weight: 650; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent); }
.invite-name { font-family: var(--face-celebrate); font-size: clamp(2.2rem, 1.5rem + 3vw, 3.2rem); line-height: 1; }
.invite-name em { font-style: italic; color: var(--inv-accent); }
.invite-line { font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; }
.invite-meta { font-size: 0.85rem; letter-spacing: .02em; }
.invite-stage:has(input[value="linen"]:checked) .invite, .invite-stage:has(input[value="linen"]:checked) .suite-piece { --inv-bg: #EEF1E6; --inv-ink: #23301F; --inv-accent: #4D6B3A; --inv-edge: #C3D0B5; }
.invite-stage:has(input[value="candle"]:checked) .invite, .invite-stage:has(input[value="candle"]:checked) .suite-piece { --inv-bg: #3B2340; --inv-ink: #F6EBDD; --inv-accent: #E9C987; --inv-edge: #5C3A63; }
.invite-stage:has(input[value="linen"]:checked) .invite::before { background: repeating-linear-gradient(0deg, rgb(77 107 58 / .08) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgb(77 107 58 / .07) 0 1px, transparent 1px 5px); -webkit-mask: none; mask: none; }
.invite-stage:has(input[value="candle"]:checked) .invite::before { background: radial-gradient(ellipse at 50% 0%, rgb(233 201 135 / .28), transparent 60%); -webkit-mask: none; mask: none; }
.suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .suite { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.suite-piece { --inv-bg: #FBF3EC; --inv-ink: #3A2230; --inv-accent: #9C3D63; --inv-edge: #E7C3D2; display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 8.5rem; padding: var(--s-4) var(--s-3); border-radius: 5px; background: var(--inv-bg); color: var(--inv-ink); text-align: center; box-shadow: 0 0 0 1px var(--inv-edge); transition: background-color 240ms ease-out, color 240ms ease-out; }
.sp-kind { font-family: var(--face-caps); font-size: 0.66rem; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.sp-main { font-family: var(--face-celebrate); font-size: 1.5rem; line-height: 1.05; }
.sp-sub { font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .invite, .invite::before, .suite-piece { transition: none; } }

/* ---------- what's included: a table that grows by package ---------- */
.inc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.inc-table th, .inc-table td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.inc-table thead th { position: sticky; top: 0; background: var(--ground); font-family: var(--face-display); font-weight: 400; font-size: 1.15rem; line-height: 1.15; vertical-align: bottom; }
.inc-table thead th span { display: block; font-family: var(--face-text); font-size: var(--step-small); font-weight: 650; color: var(--ink-2); }
.inc-table td.y { color: var(--accent); font-weight: 650; white-space: nowrap; }
.inc-table td.n { color: var(--ink-2); }
.inc-table tbody th { font-weight: 500; }
.inc-table col.c-day { background: color-mix(in srgb, var(--wash-celebrate) 40%, transparent); }
.mark-y { display: inline-block; width: 12px; height: 12px; margin-right: 0.4em; border-radius: 2px; transform: rotate(45deg); background: var(--area-ink); vertical-align: -1px; }
.yours-big ul { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: 0.98rem; }
.yours-big li { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }

/* ---------- book the call ---------- */
.weeks-ring { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin-inline: auto; }
.wcell { fill: none; stroke: var(--unlit); stroke-width: 34; }
.wcell-1, .wcell-2 { stroke: color-mix(in srgb, var(--accent) 35%, var(--unlit)); }
.wnum { font-size: 24px; }
.lead-line { stroke: var(--accent); stroke-width: 3; }
.lead-dot { fill: var(--accent); }
.weeks-centre { position: absolute; inset: 30%; display: grid; place-content: center; text-align: center; }
.weeks-centre .big { font-family: var(--face-display); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; }
.weeks-centre .small { font-family: var(--face-note); font-weight: 600; color: var(--ink-2); }
.lead-list { display: grid; margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.lead-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
.lead-list b { font-weight: 650; }
.lead-list .when { color: var(--ink-2); }
.next-steps { display: grid; gap: var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.next-steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent); font-family: var(--face-display); font-size: 1.35rem; color: var(--accent); background: var(--raised); }

/* ---------- about ---------- */
.about-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.about-grid .photo-slot { max-width: 26rem; }
.tagline-big { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; color: var(--ink); }

/* ---------- the 404: an hour missing from the run sheet ---------- */
.lost-clock { position: relative; width: min(22rem, 76vw); aspect-ratio: 1; margin-inline: auto; }
.lost-clock .clock-svg { position: absolute; inset: 0; }
.lost-clock .scale--6 .cell { stroke: var(--accent); }
.lost-centre { position: absolute; inset: 28%; display: grid; place-content: center; text-align: center; }
.lost-centre .big { font-family: var(--face-display); font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1; }
.lost-centre .small { font-family: var(--face-note); font-weight: 600; color: var(--ink-2); font-size: 0.95rem; }
.lost-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  .lost-turn { animation: lost-wobble 1400ms var(--ease-out) 300ms both; transform-origin: 50% 50%; }
}
@keyframes lost-wobble { 0% { transform: rotate(-14deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.lost-turn { position: absolute; inset: 0; }

/* ---------- photo slots: a stable name and ratio for her own photographs later ---------- */
.photo-slot .caption { margin-top: var(--s-2); }
.photo-slot--wide .photo-slot-frame { aspect-ratio: 3 / 2; }
.photo-slot--arch .photo-slot-frame { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius) var(--radius); }
.photo-slot-frame.frame--edged::after { border-radius: inherit; }

/* ---------- rhythm fixes found in the captures ---------- */
.band--tint + .band, .call-band + .band { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.pair + .lede, .pair + .prices, .pair + p, .pair + .tagline, .pair + .is-round { margin-top: var(--s-5); }
.page-head .prices, .page-head .call-row, .page-head .price-lines + .quiet { margin-top: var(--s-5); }
.page-head .price-lines + .call-row { margin-top: var(--s-5); }
.band-tight { margin-top: var(--s-7); }
.facts > h2.caps { margin: var(--s-6) 0 var(--s-2); }
.facts > h2.caps:first-child { margin-top: 0; }
.pk-list + .pk-list, .pk-list + .bigger { margin-top: var(--s-6); }
.split .runsheet, .c-hero-sheet .runsheet { grid-template-columns: 1fr; }
.half :is(h2, h3) { text-align: center; font-size: calc(var(--step-1) * 0.95); }
.styles-pick + .invite { margin-top: var(--s-4); }
.invite + .caption { margin-top: var(--s-4); }
.yours-big ul + * { margin-top: var(--s-4); }
.routes { margin-top: var(--s-4); }
/* the call band runs into the footer's tint, with no strip of ground between */
main:has(> .call-band:last-child) + .site-footer { margin-top: 0; }
@media (max-width: 719px) {
  .crossed-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .crossed { padding: var(--s-5); }
}
@media (max-width: 1023px) {
  .note-chip { max-width: 78%; white-space: normal; }
  .note-chip--time { top: 7%; }
  .note-chip--who { bottom: 7%; }
  .process-stage .press { --seal-size: 52px; right: 4%; bottom: 4%; }
  /* the packages' clock rides at the top of a phone while the list scrolls beneath it */
  .page-packages .party-clock { order: -1; position: sticky; top: 0; z-index: 5; gap: var(--s-1); padding: var(--s-2) 0 var(--s-3); background: var(--ground); }
  .page-packages .party-clock .clock { width: min(36svh, 64vw); }
  .page-packages .party-clock .pkg-sum { display: none !important; }
  .page-packages .party-clock .clock-caption { max-width: 34ch; margin-inline: auto; font-size: 0.75rem; }
  .page-packages .dial-centre-text .small { display: none; }
}
.pkgs--two { grid-template-columns: 1fr 1fr; max-width: 400px; }
@media (max-width: 719px) {
  /* What's included, on a phone: each line its own card, the three packages beneath it */
  .inc-table, .inc-table tbody, .inc-table tr { display: block; }
  .inc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inc-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); }
  .inc-table tbody th { display: block; padding: 0 0 var(--s-2); border: 0; font-weight: 600; }
  .inc-table td { display: flex; justify-content: space-between; gap: var(--s-3); padding: 2px 0; border: 0; }
  .inc-table td::before { content: attr(data-label); color: var(--ink-2); font-weight: 400; }
}