/*
 * The Round, Organise: The Virtual Organiser. A timesheet: paper with a cool
 * blue cast, navy ink, her orange only round the seal and on the call. The
 * dial is a punched time card. Phone first; side by side from 720 px; the full
 * timesheet from 1080 px. Overrides the system only through its semantic names.
 * Pairs computed in the direction brief, 12, and in the Organise report.
 */
:root {
  --ground: light-dark(#F4F7FB, #0E1522);
  --ground-raised: light-dark(#FFFFFF, #16213A);
  --ground-sunk: light-dark(#E3EAF5, #1B2740);
  --ink: light-dark(#142238, #E7EDF6);
  --ink-2: light-dark(#44536B, #A6B3C6);
  --line: light-dark(#D3DBE7, #25314A);
  --line-strong: light-dark(#7A817F, #7E868D);
  --accent: light-dark(#213969, #96B0E3);
  --accent-ink: light-dark(#F4F7FB, #0E1522);
  --unit-off: light-dark(#C9D3E3, #2A3446);
  --tint: var(--t-organise);
  --area: var(--a-organise);
  --area-tint: var(--t-organise);
  --face-display: "Instrument Sans", "Funnel Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --face-text: "Instrument Sans", "Funnel Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --passage-ground: var(--t-organise);
  --measure: 66ch;
  --punch: 140ms;
}
body { font-size: 1.0625rem; }
h1, h2, h3 { font-stretch: 80%; font-weight: 640; letter-spacing: -0.015em; }
.mono, .card-num, .ts-n { font-family: var(--face-measure); font-variant-numeric: tabular-nums; }
.caps { font-family: var(--face-text); font-stretch: 90%; letter-spacing: 0.2em; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.lede strong { color: var(--ink); font-weight: 600; }
.brand-name { font-family: var(--face-display); font-stretch: 85%; font-weight: 650; }
.brand-name small { font-stretch: 100%; }

/* Header: her pages from 1080 px; the Pages sheet below that; Clients and the theme everywhere. */
.header-link--page { display: none; }
.header-link[aria-current="page"] { background-size: calc(100% - 2 * var(--s-3)) 2px; }
.header-pages { border: 0; background-color: transparent; font: inherit; font-weight: 550; font-size: 0.9375rem; }
@media (min-width: 1080px) { .header-link--page { display: inline-flex; } .header-pages { display: none; } }
@media (max-width: 719px) { .header-pages { display: none; } .brand-name { font-size: 1rem; white-space: nowrap; } .brand-name small { font-size: 0.75rem; } }
@media (max-width: 359px) { .brand-name small { display: none; } }

/* ---------- The card: the punched time card, one dial for every page ---------- */
.dial--card { max-width: 600px; margin-inline: auto; }
.card-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card-face { fill: var(--ground-raised); }
.dial--card .rim-name { fill: var(--area); font-family: var(--face-family); }
.card-start { stroke: var(--seal); stroke-width: 5; stroke-linecap: round; }
.card-n { font-family: var(--face-measure); font-size: 24px; font-weight: 450; fill: var(--ink-2); }
.card-n--major, .card-n--zero { font-weight: 600; fill: var(--ink); }
.card-dot { fill: var(--line-strong); }
.hole { fill: var(--ground); stroke: var(--line-strong); stroke-width: 2.4; }
.hole--missing { fill: none; stroke: var(--seal); stroke-dasharray: 6 7; }
.punch, .slot-punch {
  fill: var(--accent); opacity: var(--on, 0);
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(0.6 + 0.4 * var(--on, 0)));
  transition: opacity var(--punch) ease-out, transform var(--punch) var(--ease-out);
  transition-delay: calc(max(0, var(--n, 0) - var(--from, 0)) * 38ms);
}
.slot { fill: var(--ground); stroke: var(--line-strong); stroke-width: 2.4; }
.plan-tick { stroke: var(--ink-2); stroke-width: 3; }
.plan-label { font-family: var(--face-family); font-size: 17px; font-weight: 600; letter-spacing: 0.2em; fill: var(--ink-2); }
.plan-mark { opacity: 0.7; transition: opacity var(--t-swap) ease-out; }
.dial[data-plan="essential"] .plan-mark--essential, .dial[data-plan="premium"] .plan-mark--premium, .dial[data-plan="executive"] .plan-mark--executive { opacity: 1; }
.dial[data-plan="essential"] .plan-mark--essential :is(.plan-tick), .dial[data-plan="premium"] .plan-mark--premium .plan-tick, .dial[data-plan="executive"] .plan-mark--executive .plan-tick { stroke: var(--accent); stroke-width: 6; }
.dial[data-plan="essential"] .plan-mark--essential .plan-label, .dial[data-plan="premium"] .plan-mark--premium .plan-label, .dial[data-plan="executive"] .plan-mark--executive .plan-label { fill: var(--accent); }

/* Layers: one reading at a time; changing reading re-graduates the card with a turn. */
.layer { opacity: 0; transform: rotate(-24deg); transition: opacity 260ms ease-out, transform var(--t-turn) var(--ease-turn); }
.dial[data-mode="hours"] .layer--hours, .dial[data-mode="hour"] .layer--hour, .dial[data-mode="inbox"] .layer--inbox,
.dial[data-mode="week"] .layer--week, .dial[data-mode="data"] .layer--data, .dial[data-mode="steps"] .layer--steps { opacity: 1; transform: none; }
.dial[data-mode="hour"] .slot-punch { --on: 1; }
.dial[data-mode="hour"][data-hour="before"] .slot-punch { --on: 0; }
.dial[data-mode="hour"] .slot-punch { transition-delay: calc(200ms + var(--n, 0) * 38ms); }

/* The inbox: messages pile at the slot, then file round the ring into trays. */
.tray { fill: var(--ground-sunk); stroke: var(--line); stroke-width: 2; }
.tray-label { font-family: var(--face-family); font-size: 17px; font-weight: 600; letter-spacing: 0.2em; fill: var(--ink-2); }
.inbox-slot { fill: none; stroke: var(--seal); stroke-width: 5; stroke-linecap: round; }
.msg { transform: rotate(var(--pile, 0deg)); transition: transform var(--t-turn) var(--ease-turn), opacity 240ms ease-out; transition-delay: calc(var(--i, 0) * 40ms); }
.msg rect { fill: var(--ground-raised); stroke: var(--ink-2); stroke-width: 2.2; }
.msg-flap { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.msg--enquiries rect { stroke: var(--accent); stroke-width: 3; }
.msg--news rect { stroke-dasharray: 4 4; }
.msg-reply { fill: var(--accent); opacity: 0; transition: opacity 200ms ease-out 500ms; }
.msg-tick { fill: none; stroke: var(--accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 200ms ease-out 500ms; }
.dial[data-inbox="sorted"] .msg { transform: rotate(var(--to, 0deg)); }
.dial[data-inbox="sorted"] .msg--news { opacity: 0; transform: rotate(var(--pile)) translateY(-40px); }
.dial[data-inbox="sorted"][data-detox="full"] :is(.msg-reply, .msg-tick) { opacity: 1; }
.dial[data-example] .msg:not(.msg--0) { opacity: 0; }

/* The week: the dial turns the chosen day to the pointer; the day names stay upright. */
.week-turn { transform: rotate(var(--turn, 0deg)); transition: transform var(--t-turn) var(--ease-turn); }
.day-label { font-family: var(--face-family); font-size: 22px; font-weight: 600; letter-spacing: 0.16em; fill: var(--ink-2); transform-box: fill-box; transform-origin: center; transform: rotate(calc(-1 * var(--turn, 0deg))); transition: transform var(--t-turn) var(--ease-turn), fill var(--t-swap); }
.day { fill: var(--ground-sunk); stroke: var(--line); stroke-width: 2; transition: fill var(--t-swap) ease-out; }
.week-pointer { fill: var(--seal); }
.is-arriving .week-turn, .is-arriving .day-label { transition-duration: 1250ms; transition-timing-function: var(--ease-out); }
.is-dragging .week-turn, .is-dragging .day-label, .is-instant .week-turn, .is-instant .day-label { transition: none; }
[data-faced="0"] .day--0, [data-faced="1"] .day--1, [data-faced="2"] .day--2, [data-faced="3"] .day--3, [data-faced="4"] .day--4, [data-faced="5"] .day--5, [data-faced="6"] .day--6 { fill: var(--accent); stroke: var(--accent); }
[data-faced="0"] .day-label--0, [data-faced="1"] .day-label--1, [data-faced="2"] .day-label--2, [data-faced="3"] .day-label--3, [data-faced="4"] .day-label--4, [data-faced="5"] .day-label--5, [data-faced="6"] .day-label--6 { fill: var(--ink); }

/* What a client might hand over. */
.share-arc { fill: var(--ground-sunk); stroke: var(--line-strong); stroke-width: 2; transition: fill var(--t-swap) ease-out; }
.data-label { font-family: var(--face-family); font-size: 19px; font-weight: 600; letter-spacing: 0.14em; fill: var(--ink-2); }
.dial[data-share~="inbox"] .share-arc--inbox, .dial[data-share~="diary"] .share-arc--diary, .dial[data-share~="enquiries"] .share-arc--enquiries, .dial[data-share~="records"] .share-arc--records, .dial[data-share~="social"] .share-arc--social { fill: var(--accent); stroke: var(--accent); }
.dial[data-share~="inbox"] .data-label--inbox, .dial[data-share~="diary"] .data-label--diary, .dial[data-share~="enquiries"] .data-label--enquiries, .dial[data-share~="records"] .data-label--records, .dial[data-share~="social"] .data-label--social { fill: var(--ink); }

/* The four steps after the call. */
.steps-arc { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 9; }
.step-hole { fill: var(--ground); stroke: var(--ink); stroke-width: 3; transition: fill var(--t-swap) ease-out, stroke var(--t-swap); }
.step-n { font-family: var(--face-measure); font-size: 30px; font-weight: 600; fill: var(--ink); transition: fill var(--t-swap); }
.dial[data-step="0"] .step-hole--0, .dial[data-step="1"] .step-hole--1, .dial[data-step="2"] .step-hole--2, .dial[data-step="3"] .step-hole--3 { fill: var(--accent); stroke: var(--accent); }
.dial[data-step="0"] .step-hole--0 + .step-n, .dial[data-step="1"] .step-hole--1 + .step-n, .dial[data-step="2"] .step-hole--2 + .step-n, .dial[data-step="3"] .step-hole--3 + .step-n { fill: var(--accent-ink); }

/* The centre reading. */
.dial--card .dial-centre { inset: 28%; gap: 2px; pointer-events: none; }
.card-num { font-size: clamp(2.5rem, 16cqi, 6rem); font-weight: 560; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); }
.card-unit { font-size: clamp(0.875rem, 3.3cqi, 1.125rem); color: var(--ink-2); font-weight: 500; line-height: 1.25; }
.card-plan { font-family: var(--face-family); font-weight: 650; font-size: clamp(0.9375rem, 3.6cqi, 1.25rem); color: var(--accent); margin-top: 2px; }
.card-swap { animation: card-swap 220ms var(--ease-out) both; }
@keyframes card-swap { from { opacity: 0.15; transform: translateY(6px); } }
.dial--card .dial-neighbour { background: transparent; font-size: 0.75rem; }
.dial--card .dial-neighbour { top: 1%; }
.dial--card .dial-neighbour--prev { left: -2%; } .dial--card .dial-neighbour--next { right: -2%; }

/* Arrival: the one authored moment on the front page, Essential's five holes punching in. */
@media (prefers-reduced-motion: no-preference) {
  .dial--arrive .punch { animation: punch-in var(--punch) var(--ease-out) both; animation-delay: calc(300ms + var(--n, 0) * 38ms); }
  html.lt-js:not(.lt-ready) .dial--arrive .punch { animation-play-state: paused; }
  .lt-arrived .strip-on { animation: punch-in var(--punch) var(--ease-out) both; animation-delay: calc(var(--n, 0) * 38ms); }
}
@keyframes punch-in { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .punch, .slot-punch, .msg, .msg-reply, .msg-tick, .layer, .week-turn, .day-label { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .layer { transform: none; transition: opacity 120ms ease-out !important; }
  .dial[data-inbox="sorted"] .msg--news { transform: rotate(var(--pile)); }
  .card-swap { animation: none; }
}

/* The flat strips that set the Power Hour beside Essential. */
.strip { width: 100%; height: auto; overflow: visible; }
.strip-slot, .strip-hole { fill: var(--ground); stroke: var(--line-strong); stroke-width: 1.6; }
.strip-slot.is-on, .strip-hole.is-on { fill: var(--accent); stroke: var(--accent); }

/* ---------- Page frames ---------- */
.page { padding: var(--s-4) var(--gutter) var(--s-8); max-width: 1320px; margin: 0 auto; }
.crumb { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); }
.crumb svg { width: 16px; height: 16px; transform: scaleX(-1); }
.crumb:hover { color: var(--ink); }
.section { margin-top: var(--s-8); }
.section > h2, .section-head h2 { font-size: var(--step-1); max-width: 22ch; }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head p { color: var(--ink-2); max-width: 52ch; }
.example-label { color: var(--ink-2); }
.her-words { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.her-src { font-size: var(--step-quiet); letter-spacing: 0.04em; color: var(--ink-2); margin-top: 4px; }
.scope { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.45; }
.scope-label { display: inline-block; margin-right: 6px; font-size: var(--step-quiet); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 8px; line-height: 1.6; }
.call-row { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.call-row .call-note { margin: 0; }
.call-row .call-note a { color: inherit; }
.legal-line { margin-top: var(--s-3); }
.go { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); font-weight: 600; text-decoration: none; color: var(--accent); }
.go svg { width: 18px; height: 18px; transition: transform var(--t-swap) var(--ease-out); }
.go:hover svg { transform: translateX(3px); }
.go:hover { text-decoration: underline; }

/* The split page: words and controls on one side, the card on the other. */
.split { display: grid; gap: var(--s-6); margin-top: var(--s-3); }
.split-card { display: grid; gap: var(--s-3); align-content: start; }
.split h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); max-width: 14ch; }
.split .lede { margin-top: var(--s-4); }
.split-body { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-rows: auto 1fr; grid-template-areas: "head card" "body card"; column-gap: var(--s-8); row-gap: var(--s-5); align-items: start; }
  .split-head { grid-area: head; }
  .split-body { grid-area: body; }
  .split-card { grid-area: card; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
@media (max-width: 899px) { .split-card .dial--card { max-width: min(100%, 440px); } }

/* ---------- The front page: the timesheet ---------- */
.ts { display: grid; gap: var(--s-6); padding: var(--s-4) var(--gutter) var(--s-7); max-width: 1320px; margin: 0 auto; }
.mast { display: grid; gap: 6px; }
.mast-name { font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); line-height: 0.95; letter-spacing: -0.025em; font-weight: 660; font-stretch: 78%; }
.mast-sub { font-family: var(--face-text); font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); font-stretch: 100%; }
.ts .lede { margin-top: var(--s-4); max-width: 34ch; color: var(--ink); }
.ledger { margin-top: var(--s-5); }
.ledger-head { font-size: 0.9375rem; color: var(--ink-2); padding-bottom: var(--s-2); max-width: 44ch; }
.ledger-rows { position: relative; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.ledger-glide { position: absolute; left: 0; right: 0; top: 0; height: var(--glide-h, 52px); background: var(--ground-sunk); transform: translateY(var(--glide-y, 0px)); transition: transform var(--t-slide) var(--ease-out), height var(--t-slide) var(--ease-out); pointer-events: none; z-index: 0; }
.ledger-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 22px 5.25rem minmax(0, 1fr); align-items: center; column-gap: var(--s-3);
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2); border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left;
  transition: transform var(--t-press) ease-out;
}
.ledger-row:first-of-type { border-top: 0; }
.ledger-row::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--ground); transition: background-color var(--t-swap), border-color var(--t-swap); }
.ledger-row[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
.ledger-row:active { transform: scale(0.99); }
.ledger-row:hover .price-item { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.ledger-kind { font-size: var(--step-quiet); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ledger-row .price-item { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.ledger-row:focus-visible { outline-offset: -2px; border-radius: 6px; }
html:not(.lt-js) .ledger-glide { display: none; }
@media (max-width: 719px) {
  .ledger-row { grid-template-columns: 20px minmax(0, 1fr); row-gap: 0; padding-block: 10px; }
  .ledger-kind { grid-column: 2; grid-row: 1; }
  .ledger-row .price-item { grid-column: 2; grid-row: 2; font-size: 1rem; }
  .ledger-row::before { grid-row: 1 / span 2; }
}
.ts-card { display: grid; gap: var(--s-3); align-content: start; }
.card-chips { justify-content: center; }
.card-chips .chip { font-size: 0.875rem; padding: 0 var(--s-3); }
@media (min-width: 720px) { .card-chips { display: none; } }
.reading { position: relative; padding: var(--s-4) var(--s-5); background: var(--ground-raised); border-radius: var(--radius); border: 1px solid var(--line); }
.reading-face { display: grid; gap: var(--s-2); }
.reading-face[hidden] { display: none; }
.reading-name { font-family: var(--face-display); font-stretch: 80%; font-weight: 650; font-size: 1.25rem; }
.reading .go { margin-top: var(--s-1); min-height: 36px; }
@media (any-pointer: coarse) { .reading .go { min-height: var(--target); } }
@media (min-width: 720px) {
  .ts { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); column-gap: var(--s-7); align-items: start; }
  .ts-card { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
@media (min-width: 1080px) {
  .ts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); padding-top: var(--s-5); }
  .ts-card .dial--card { width: min(100%, calc(100svh - var(--header-h) - 230px)); min-width: 380px; }
}

/* Three ways in. */
.ways-list { display: grid; gap: var(--s-3); }
.way { position: relative; display: grid; grid-template-columns: 1fr 24px; grid-template-areas: "n go" "name name" "line line"; row-gap: var(--s-2); align-items: start; padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: 0 0 var(--radius) var(--radius); background: var(--ground-raised); text-decoration: none; color: var(--ink); transition: background-color var(--t-swap), transform var(--t-press); }
.way:hover { background: var(--ground-sunk); }
.way:active { transform: scale(0.985); }
.way-n { grid-area: n; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.way-n b { font-family: var(--face-measure); font-weight: 560; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.way-n span { font-size: var(--step-small); color: var(--ink-2); }
.way-name { grid-area: name; font-family: var(--face-display); font-stretch: 80%; font-weight: 650; font-size: 1.5rem; line-height: 1.15; margin-top: var(--s-2); }
.way-line { grid-area: line; color: var(--ink-2); font-size: 1rem; }
.way-go { grid-area: go; width: 22px; height: 22px; color: var(--ink-2); transition: transform var(--t-swap) var(--ease-out); }
.way:hover .way-go { transform: translateX(4px); color: var(--ink); }
@media (min-width: 900px) { .ways-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } .way-n { display: grid; } }

/* Her words, set as the lines of a timesheet. */
.her-list { display: grid; border-top: 2px solid var(--ink); }
.her-row { display: grid; gap: 4px var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.her-row .caps { font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--area); font-weight: 650; }
.her-row q { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; quotes: "\201C" "\201D"; font-stretch: 92%; font-weight: 500; }
@media (min-width: 720px) { .her-row { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } }

/* The pairing. */
.pair-grid { display: grid; gap: var(--s-5); }
.pair-col { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--ground-raised); border: 1px solid var(--line); border-radius: var(--radius); align-content: start; }
.pair-col .price-item { font-size: 1.25rem; font-weight: 650; }
.pair-unit { font-family: var(--face-measure); font-size: 0.875rem; color: var(--accent); letter-spacing: 0.02em; }
.pair-col p:last-child { color: var(--ink-2); }
.pair-or { font-family: var(--face-display); font-stretch: 80%; font-weight: 650; color: var(--ink-2); text-align: center; align-self: center; }
@media (min-width: 900px) { .pair-grid { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }

/* The evening given back. */
.evening { display: grid; gap: var(--s-5); align-items: end; }
.evening figure img { width: 100%; border-radius: 18px; }
.evening h2 { font-size: var(--step-1); max-width: 16ch; }
.evening p { color: var(--ink-2); margin-top: var(--s-3); max-width: 38ch; }
.evening .btn { margin-top: var(--s-4); }
@media (min-width: 960px) { .evening { grid-template-columns: 1.6fr 1fr; gap: var(--s-7); } }

/* Do it yourself. */
.diy-list { display: grid; border-top: 1px solid var(--line); }
.diy-row { display: grid; gap: 2px var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.diy-row b { font-family: var(--face-display); font-stretch: 80%; font-weight: 650; font-size: 1.1875rem; }
.diy-row .price { font-size: 0.9375rem; }
@media (min-width: 900px) { .diy-row { grid-template-columns: 12rem 1fr 1.1fr; align-items: baseline; } }

/* The closing band: the call, then next door. */
.closing { display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: 20px; background: var(--tint); }
.closing h2 { font-size: var(--step-1); max-width: 20ch; }
.closing p { max-width: 52ch; }
.neighbours { display: grid; gap: var(--s-3); margin-top: var(--s-7); }
.neighbour { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); min-height: 56px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--ground-raised); transition: transform var(--t-swap) var(--ease-out), border-color var(--t-swap); }
.neighbour .caps { font-size: 0.6875rem; }
.neighbour-name { font-family: var(--face-family); font-weight: 650; font-size: 1.25rem; display: flex; align-items: center; gap: var(--s-2); }
.neighbour-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--area, var(--seal)); }
.neighbour--hub .neighbour-name::before { border-color: var(--seal); }
.neighbour-line { font-size: 0.9375rem; color: var(--ink-2); }
.neighbour:hover { border-color: var(--ink); }
.neighbour--prev:hover { transform: translateX(-4px); } .neighbour--next:hover { transform: translateX(4px); }
.neighbour:active { transform: scale(0.98); }
@media (min-width: 900px) { .neighbours { grid-template-columns: 1fr 1.2fr 1fr; } .neighbour--next { text-align: right; } .neighbour--next .neighbour-name { justify-content: flex-end; } }

/* ---------- Monthly hours ---------- */
.plans { margin-top: var(--s-6); display: grid; border-top: 2px solid var(--ink); }
.plan { display: grid; gap: var(--s-2); padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.plan-pick { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2); margin-left: calc(-1 * var(--s-2)); border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; transition: background-color var(--t-swap), transform var(--t-press); }
.plan-pick::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); }
.plan-pick[aria-pressed="true"] { background: var(--ground-sunk); }
.plan-pick[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }
.plan-pick:active { transform: scale(0.99); }
.plan-pick .price-item { font-size: 1.25rem; font-weight: 650; }
.plan-pick .plan-show { font-size: var(--step-quiet); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.plan-pick[aria-pressed="true"] .plan-show { color: var(--accent); }
.plan .her-words, .plan .her-src, .plan .scope { padding-left: calc(22px + var(--s-3) - var(--s-2)); }
.under-card { text-align: center; font-size: 0.9375rem; color: var(--ink-2); min-height: 1.5em; }

/* ---------- One-off fixes ---------- */
.fix-switch { margin-top: var(--s-5); display: grid; width: 100%; max-width: 440px; }
.fix-switch button { font-size: 0.9375rem; }
.fix { display: grid; gap: var(--s-3); margin-top: var(--s-5); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.lt-js .fix[hidden] { display: none; }
.fix h2 { font-size: var(--step-2); }
.fix .price-item { font-size: 1.25rem; font-weight: 650; }
.fix-scope { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .fix-scope { grid-template-columns: 1fr 1fr; } }
.fix-scope > div { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground-raised); transition: border-color var(--t-swap), background-color var(--t-swap); }
.fix-scope > div.is-on { border-color: var(--accent); background: var(--ground-sunk); }
.fix-scope h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.fix-scope p { font-size: 0.9375rem; color: var(--ink-2); }
.card-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; align-items: center; }
.seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.seq .chip { justify-content: center; padding: 0 var(--s-2); }
.seq-text { min-height: 3em; font-size: 0.9375rem; color: var(--ink-2); }
.pair-line { font-size: 1.0625rem; max-width: 60ch; padding: var(--s-4) var(--s-5); border-left: 0; background: var(--tint); border-radius: var(--radius); }
.setups { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .setups { grid-template-columns: 1fr 1fr; } }
.setup { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: var(--s-2); }
.setup p:last-child { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- A month: the week ---------- */
.week-root { display: grid; gap: var(--s-3); }
.week-root .dial--card { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.week-root.is-dragging .dial--card { cursor: grabbing; }
.days { justify-content: center; }
.days .chip { min-width: 52px; justify-content: center; padding: 0 var(--s-2); font-family: var(--face-text); }
.day-card { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--ground-raised); border: 1px solid var(--line); min-height: 7.5rem; }
.day-card h2 { font-size: 1.25rem; }
.day-card p { margin-top: var(--s-2); }
.rules { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .rules { grid-template-columns: 1fr 1fr; } }
.rule { padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.rule h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.rule p, .rule li { color: var(--ink-2); }
.rule ul { padding-left: 1.1em; display: grid; gap: 4px; }

h2.h3, .h3 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.section-rules { margin-top: var(--s-6); grid-template-columns: 1fr; }
.week-list { display: grid; gap: var(--s-3); }
.week-list.is-one li:not(.is-faced) { display: none; }
.week-list.is-one li.is-faced { animation: card-swap 220ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .week-list.is-one li.is-faced { animation: none; } }

/* ---------- A worked example ---------- */
.enquiry { position: relative; padding: var(--s-4) var(--s-5); border-radius: 18px 18px 18px 4px; background: var(--ground-raised); border: 1px solid var(--line); max-width: 30rem; transition: opacity 300ms ease-out, transform 420ms var(--ease-turn); }
.enquiry p { font-size: 1rem; }
.enquiry .meta { font-family: var(--face-measure); font-size: 0.75rem; color: var(--ink-2); margin-top: var(--s-2); }
.handed .enquiry { opacity: 0.45; transform: translateX(12px) rotate(1.5deg); }
.results { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.results[hidden] { display: none; }
@media (min-width: 900px) { .results { grid-template-columns: 1.3fr 1fr 1fr; } }
.result { padding: var(--s-4) var(--s-5); border-radius: var(--radius); border: 1px solid var(--line); background: var(--ground-raised); display: grid; gap: var(--s-2); align-content: start; }
.result h3 { font-size: 0.75rem; font-family: var(--face-text); font-stretch: 100%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); font-weight: 650; }
.reply-line { margin: 0; }
.typing .reply-line { opacity: 0; animation: line-in 220ms var(--ease-out) forwards; animation-delay: calc(var(--l, 0) * 60ms + 120ms); }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .typing .reply-line { animation: none; opacity: 1; } .handed .enquiry { transform: none; } }
.slot-entry { display: grid; grid-template-columns: 4.5rem 1fr; gap: 2px var(--s-3); padding: var(--s-3); border-radius: 10px; background: var(--ground-sunk); border-left: 0; }
.slot-entry .ts-n { font-size: 0.8125rem; color: var(--accent); font-weight: 600; }
.slot-entry b { font-weight: 600; }
.slot-entry span:last-child { grid-column: 2; font-size: 0.875rem; color: var(--ink-2); }
.record { display: grid; gap: 4px; font-size: 0.9375rem; }
.record div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--line); }
.record dt { color: var(--ink-2); font-size: 0.8125rem; }
.note { max-width: 40rem; padding: var(--s-5) var(--s-6); background: var(--ground-raised); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(20 34 56 / 0.4); }
.note h3 { font-size: 1.25rem; }
.note .meta { font-family: var(--face-measure); font-size: 0.75rem; color: var(--ink-2); margin: 4px 0 var(--s-4); }
.note h4 { font-family: var(--face-text); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: var(--s-4) 0 var(--s-2); font-weight: 650; }
.note ul { padding-left: 1.1em; display: grid; gap: 4px; }

/* ---------- Your data ---------- */
.hand-chips .chip { font-family: var(--face-text); }
.settle { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.settle li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.settle b { display: block; font-weight: 650; }
.settle-empty { color: var(--ink-2); }

/* ---------- Questions ---------- */
.qs { margin-top: var(--s-5); border-top: 2px solid var(--ink); }
.q { border-bottom: 1px solid var(--line); }
.q summary { list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; column-gap: var(--s-3); min-height: 56px; padding: var(--s-3) 0; cursor: pointer; font-family: var(--face-display); font-stretch: 85%; font-weight: 640; font-size: 1.125rem; line-height: 1.25; }
.q summary::-webkit-details-marker { display: none; }
.q summary::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color var(--t-swap), border-color var(--t-swap); }
.q[open] summary::before { background: var(--accent); border-color: var(--accent); }
.q summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); justify-self: center; transition: transform var(--t-swap) var(--ease-out); }
.q[open] summary::after { transform: rotate(-135deg); }
.q summary:focus-visible { outline-offset: 2px; }
.q-body { display: grid; gap: var(--s-3); padding: 0 0 var(--s-5) calc(22px + var(--s-3)); }
.q-body .price-item { font-weight: 600; }
.q-body ul { padding-left: 1.1em; display: grid; gap: var(--s-2); }
@media (prefers-reduced-motion: no-preference) { .q[open] .q-body { animation: card-swap 220ms var(--ease-out) both; } }

/* ---------- About ---------- */
.about { display: grid; gap: var(--s-7); margin-top: var(--s-3); }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; } .about-seal { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.about-seal { width: min(360px, 70vw); }
.about-seal svg { width: 100%; height: auto; overflow: visible; }
.about-seal .still-mono { color: var(--ink); }
.about-card { border-top: 2px solid var(--ink); }
.about-card h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); margin-top: var(--s-5); }
.about-trade { font-size: 0.875rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); margin-top: var(--s-3); }
.about-tag { font-family: var(--face-display); font-stretch: 85%; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; margin-top: var(--s-4); }
.about-desc { color: var(--ink-2); margin-top: 4px; }
.words-list { display: grid; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.words-list blockquote { display: grid; gap: 4px var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.words-list p { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; font-weight: 500; font-stretch: 92%; }
.words-list cite { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 650; color: var(--area); }
@media (min-width: 720px) { .words-list blockquote { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } .words-list cite { grid-row: 1; } }

/* ---------- Book the call ---------- */
.step-chips { justify-content: center; }
.step-chips .chip { font-family: var(--face-text); }
.routes { margin-top: var(--s-4); color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- The small print, as on the hub ---------- */
.print-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.print-ring--inner { stroke: var(--seal); stroke-dasharray: 2 4; }
.print-dot { fill: var(--seal); }
.print-steps { display: grid; gap: 2px; margin-top: var(--s-4); padding: 0; counter-reset: ps; }
.print-steps a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--target); font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); }
.print-steps a::before { counter-increment: ps; content: counter(ps); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--seal); font-family: var(--face-measure); font-weight: 600; font-size: 0.75rem; color: var(--ink); }
.print-steps a:hover { color: var(--ink); }
.print-foot { margin-top: var(--s-6); }
@media (max-width: 959px) { .print-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Not found ---------- */
.lost { display: grid; gap: var(--s-6); justify-items: center; text-align: center; padding: var(--s-6) var(--gutter) var(--s-8); }
.lost h1 { font-size: var(--step-1); }
.lost .lede { margin: var(--s-3) auto 0; }
.lost-card { position: relative; width: min(400px, 76vw); aspect-ratio: 1; }
.lost-card .card-svg .punch { --on: 1; }
.lost .doors { display: grid; gap: var(--s-2); width: min(420px, 100%); }
.lost .doors a { justify-content: space-between; min-height: 52px; }
@media (prefers-reduced-motion: no-preference) { .lost-card .card-layers { animation: lost-turn 600ms var(--ease-turn) both; } }
@keyframes lost-turn { from { transform: rotate(-60deg); } }

/* ---------- The dock and the Pages sheet ---------- */
.dock--site { gap: 6px; padding-inline: var(--s-2); }
.dock--site .dock-side { gap: 6px; min-width: var(--target); font-size: 0.875rem; color: var(--ink); padding: 0 var(--s-2); border-radius: var(--radius-pill); }
.dock--site .dock-side:active { background: var(--ground-sunk); }
.dock-mark { width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--area); flex: none; }
.dock--site .dock-ring { font-family: var(--face-family); font-size: 0.875rem; padding: 0 var(--s-3) 0 var(--s-2); white-space: nowrap; color: var(--ink); }
.dock--site .dock-ring svg { width: 26px; height: 26px; }
@media (max-width: 379px) { .dock--site .dock-ring svg { display: none; } .dock--site .dock-ring { padding: 0 var(--s-3); font-size: 0.8125rem; } .dock--site .dock-side { font-size: 0.8125rem; padding: 0 4px; } }
.sheet { width: min(100vw, 480px); max-width: 100vw; max-height: 92svh; margin: auto auto 0; padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; background: var(--ground); color: var(--ink); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.18); }
@media (min-width: 720px) { .sheet { margin: auto; border-radius: 24px; } }
.sheet::backdrop { background: color-mix(in srgb, var(--ink-family) 38%, transparent); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); }
.sheet-title { font-family: var(--face-family); font-weight: 650; font-size: 1.125rem; line-height: 1.15; }
.sheet-title small { display: block; font-family: var(--face-text); font-weight: 500; font-size: 0.8125rem; color: var(--ink-2); }
.sheet-pages { display: grid; border-top: 2px solid var(--ink); }
.sheet-pages a { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-2); border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 550; }
.sheet-pages a:active { background: var(--ground-sunk); }
.sheet-hole { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.sheet-pages a[aria-current="page"] .sheet-hole { background: var(--accent); border-color: var(--accent); }
.sheet-pages a[aria-current="page"] { font-weight: 700; }
.sheet-call { width: 100%; margin-top: var(--s-4); justify-content: space-between; }
.sheet-family { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); margin-top: var(--s-3); }
.sheet-family .btn { padding: 0 var(--s-3); gap: 6px; font-size: 0.875rem; }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up 300ms var(--ease-out) both; }
  .sheet[open] .sheet-pages li { animation: sheet-row 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms + 60ms); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-row { from { transform: translateY(8px); opacity: 0; } }

/* ---------- The sibling passage: the page turns away about a centre far below ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.turning main, html.turning .site-footer { transform-origin: 50% 260vh; transition: transform 380ms var(--ease-in), opacity 380ms var(--ease-in); }
  html.turning-next main, html.turning-next .site-footer { transform: rotate(-7deg); opacity: 0; }
  html.turning-prev main, html.turning-prev .site-footer { transform: rotate(7deg); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  html.turning main, html.turning .site-footer { transition-duration: 320ms; }
  html.turning-next main, html.turning-next .site-footer { transform: translateX(-18%) rotate(-2deg); }
  html.turning-prev main, html.turning-prev .site-footer { transform: translateX(18%) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.turning main, html.turning .site-footer { transition: opacity 180ms ease-out; opacity: 0; }
}

/* Phone: the longer pages rest on their main readings, never a forced stop. */
@media (max-width: 719px) {
  html:has(body.snaps) { scroll-snap-type: y proximity; }
  .snap { scroll-snap-align: start; scroll-margin-top: calc(var(--header-h) + 8px); }
  .section { margin-top: var(--s-6); }
  .ts { padding-bottom: var(--s-4); }
  .call-row .call { width: 100%; }
  .closing { padding: var(--s-5); }
}

/* Book the call: the steps in words beside the card. */
.next-list { display: grid; gap: var(--s-2); padding-left: 1.4em; margin-top: var(--s-2); }
.next-list li::marker { font-family: var(--face-measure); color: var(--call); font-weight: 600; }
.next-list b { font-weight: 650; }
.print-body .crumb { margin: calc(-1 * var(--s-3)) 0 var(--s-3); }
.settle-wrap { margin-top: var(--s-2); }
.hand-chips { margin-top: var(--s-5); }
.hand-row { justify-content: flex-start; margin-top: var(--s-4); }
.days { gap: 6px; }
.days .chip { min-width: 44px; padding: 0 6px; }
@media (min-width: 900px) { .days .chip { min-width: 52px; } }
.hole { transition: stroke var(--t-swap) ease-out, stroke-width var(--t-swap) ease-out; }
.job { fill: var(--accent); }
[data-faced="0"] .job--0, [data-faced="1"] .job--1, [data-faced="2"] .job--2, [data-faced="3"] .job--3, [data-faced="4"] .job--4 { fill: var(--accent-ink); }
/* Until the page is live, nothing on the card transitions: a late style never plays as motion. */
html:not(.is-live) .card-svg * { transition: none !important; }
.lost-card .layer { opacity: 1; transform: none; }
.lost-card .card-svg { position: absolute; inset: 0; }
@media (min-width: 720px) and (max-width: 1179px) { .site-footer { grid-template-columns: 1fr; } .footer-links { justify-content: flex-start; margin-left: calc(-1 * var(--s-3)); } }
.dock-short { display: none; }
@media (max-width: 379px) {
  .site-header { gap: var(--s-2); padding-inline: var(--s-3); }
  .brand { gap: var(--s-2); }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 0.9375rem; }
  .header-nav { gap: 0; }
  .header-nav .header-link { padding: 0 var(--s-2); }
}
@media (max-width: 359px) { .dock-long { display: none; } .dock-short { display: inline; } }
@media (max-width: 379px) { .call { padding: 0 var(--s-4); font-size: 1rem; } }