/*
 * Organise (organise.laurathompson.uk), round 3: The Virtual Organiser.
 * Built on the system (assets/system/, never edited here) through its
 * semantic tokens; tokens.css already gives this site its orange-tinted paper,
 * its accent (her orange, the say tier) and Instrument Sans for headlines.
 * The idea: her punched time card. The round reforms on every page: the card
 * on the front, Monthly hours and Questions; a round window for each scroll
 * process; a semi-circle under every other heading. Punched holes in her
 * orange mark what is chosen, what is done and every step.
 * Geometry (each hole's angle) is in card.css, written by
 * _partials/tools/make-organise.mjs.
 */

/* ===================== Organise's voice ===================== */
html[data-site="organise"] :is(h1, h2, h3, h4, .area-nav-name) { font-stretch: 80%; }
:is(h1, h2, h3) { font-weight: 650; letter-spacing: -0.012em; }
h1 { line-height: 1.02; }
.pair--hero > h1 { font-size: clamp(2.5rem, 1.45rem + 3.3vw, 4.5rem); line-height: 0.98; letter-spacing: -0.02em; }
.h3 { font-size: var(--step-2); }
.lede { max-width: 52ch; }
.pair { align-content: start; }
main > .divider, .divider { margin-inline: auto; }
.go {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: var(--target);
  color: var(--accent); font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.25em;
}
.go svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--t-swap) var(--ease-out); }
.go:hover svg { transform: translateX(3px); }
.call-row { display: grid; justify-items: start; gap: 0; margin-top: var(--s-5); }
.call-note a { color: var(--ink); }
.example-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.example-row .caption { margin: 0; }
.section-head { display: grid; gap: var(--s-4); max-width: 48rem; margin-bottom: var(--s-6); }
.quiet { color: var(--ink-2); }

/* A punched hole: the one mark of Organise (chosen, done, a step). */
.hole-mark { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .28); }
.hole-mark--open { background: transparent; border: 1.6px solid var(--boundary); box-shadow: none; }

/* ===================== the time card ===================== */
.tc { position: relative; width: 100%; }
.tc-dial { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.tc-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tc-scallop { fill: var(--area-ink); }
.tc-band { fill: var(--area-pat); }
.tc-paper { fill: var(--raised); }
.tc-ticks { fill: none; stroke: var(--boundary); stroke-width: 1.4; stroke-linecap: round; }
.tc-rim { font-family: var(--face-caps); font-weight: 600; font-size: 15px; letter-spacing: 0.34em; fill: var(--ink-2); }
.tc-mark { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.tc-numeral { font-family: var(--face-organise); font-stretch: 80%; font-weight: 650; font-size: 17px; fill: var(--ink-2); }
.tc-inner { fill: none; stroke: var(--hair); stroke-width: 1.2; }
.tc-socket { fill: none; stroke: var(--boundary); stroke-width: 1.6; }
.tc-hole { transform: rotate(var(--a)); transition: transform var(--t-turn) var(--ease-turn); }
.tc-punch {
  fill: var(--accent);
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(1.7);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.tc-marks, .tc-holes { transition: opacity 300ms ease-out; }
/* The plan's hours punched, 38 ms apart, 140 ms each. */
.tc--n5 .tc-hole:nth-child(-n+5) .tc-punch,
.tc--n10 .tc-hole:nth-child(-n+10) .tc-punch,
.tc--n20 .tc-hole .tc-punch {
  opacity: 1; transform: none;
  transition: opacity 140ms ease-out calc(var(--n) * 38ms), transform 140ms var(--ease-out) calc(var(--n) * 38ms);
}
/* The Inbox Detox: the twenty holes file into four groups, then punch. */
.tc--detox .tc-hole { transform: rotate(var(--g)); }
.tc--detox .tc-hole .tc-punch { opacity: 1; transform: none; transition: opacity 140ms ease-out calc(240ms + var(--n) * 18ms), transform 140ms var(--ease-out) calc(240ms + var(--n) * 18ms); }
/* The Power Hour: one hour, in twelve five-minute marks. */
.tc-min-sockets path { fill: none; stroke: var(--hair); stroke-width: 1.2; opacity: 0; transition: opacity 240ms ease-out; }
.tc-min { fill: var(--accent); transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.tc--power .tc-min-sockets path { opacity: 1; }
.tc--power .tc-min { opacity: 1; transform: none; transition: opacity 160ms ease-out calc(140ms + var(--n) * 55ms), transform 180ms var(--ease-out) calc(140ms + var(--n) * 55ms); }
.tc--power .tc-holes, .tc--power .tc-marks { opacity: .16; }
.tc--detox .tc-marks { opacity: .3; }
/* Before the card is in view its holes wait, then punch once (arrival). */
@media (prefers-reduced-motion: no-preference) {
  html.lt-js [data-tc]:not(.is-live) .tc-punch,
  html.lt-js [data-tc]:not(.is-live) .tc-min { opacity: 0; transform: scale(1.7); transition: none; }
}
/* The 404: one hole lifted out of the card. */
.tc-chad { display: none; }
.tc--lost .tc-chad { display: block; }
.tc--lost .tc-chad circle { fill: var(--accent); }
.tc--lost .tc-h13 .tc-punch { opacity: 0; }
.tc--lost .tc-h13 .tc-socket { stroke-dasharray: 3 3; }

.tc-centre { position: absolute; inset: 28%; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; perspective: 400px; }
.tc-num { font-family: var(--face-organise); font-stretch: 80%; font-weight: 700; font-size: clamp(2.4rem, 15cqi, 6.2rem); line-height: .92; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tc-unit { margin-top: 0.15em; font-size: clamp(0.78rem, 3.2cqi, 1.1rem); line-height: 1.2; color: var(--ink-2); max-width: 14ch; }
.tc-plan { margin-top: 0.45em; font-family: var(--face-caps); font-weight: 650; font-size: clamp(0.62rem, 2.4cqi, 0.82rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .tc-centre.is-turning > * { animation: tc-turn var(--t-turn) var(--ease-turn); }
}
@keyframes tc-turn {
  45% { transform: rotateX(80deg) translateY(-4px); opacity: .1; }
  55% { transform: rotateX(-80deg) translateY(4px); opacity: .1; }
}
.tc-under { margin-top: var(--s-4); text-align: center; color: var(--ink-2); font-size: var(--step-small); }

/* What each reading means, under the front page's card. */
.tc-faces { margin-top: var(--s-5); }
.tc-face { display: grid; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
html.lt-js .tc-face:not(.is-shown) { display: none; }
html:not(.lt-js) .tc-face + .tc-face { margin-top: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  html.lt-js .tc-face.is-shown { animation: face-in 320ms var(--ease-out) both; }
}
@keyframes face-in { from { opacity: 0; transform: translateY(6px); } }
.tc-face-name { font-family: var(--face-caps); font-weight: 650; font-size: var(--step-quiet); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.tc-face-text { color: var(--ink); }
.tc-face .go { justify-self: start; }

/* Her words, quoted whole. */
.her p { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.35rem); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.her { margin: 0; }
.her--large p { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); }
.her-src { font-size: var(--step-quiet); color: var(--ink-2); }

/* ===================== the ledger: her five prices ===================== */
.ledger { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); box-shadow: 0 18px 44px -32px rgb(31 27 22 / .45); }
.ledger-title { font-family: var(--face-caps); font-weight: 650; font-size: var(--step-quiet); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.ledger-hint { font-family: var(--face-note); font-weight: 600; font-size: 1.02rem; color: var(--ink-2); }
.ledger-rows { margin: var(--s-2) 0 var(--s-2); padding: 0; list-style: none; border-top: 1px solid var(--boundary); }
.ledger-row {
  position: relative; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 18px; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 54px; padding: 0.55rem 0.6rem; border: 0; border-bottom: 1px dashed var(--hair); border-radius: 0;
  background: transparent; color: var(--ink); text-align: left;
  transition: background-color var(--t-slide) var(--ease-out);
}
.ledger-row::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--boundary); transition: background-color var(--t-swap) ease-out, border-color var(--t-swap) ease-out, transform var(--t-swap) var(--ease-out); }
.ledger-row:hover { background: color-mix(in srgb, var(--tint) 55%, transparent); }
.ledger-row[aria-pressed="true"] { background: var(--tint); }
.ledger-row[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .28); }
.ledger-row:active::after { transform: scale(.85); }
.ledger-row:focus-visible { outline-offset: -2px; border-radius: 6px; }
.ledger-kind { font-family: var(--face-caps); font-weight: 600; font-size: var(--step-quiet); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ledger-row .price-item { font-size: 1.06rem; }
@media (max-width: 420px) {
  .ledger { padding: var(--s-4); }
  .ledger-row { grid-template-columns: minmax(0, 1fr) 18px; row-gap: 0; }
  .ledger-kind { grid-column: 1; }
  .ledger-row .price-item { grid-column: 1; }
  .ledger-row::after { grid-column: 2; grid-row: 1 / span 2; }
}

/* ===================== the front page ===================== */
.hero {
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto;
  padding-block: clamp(1.25rem, 0.75rem + 2.5vw, 3rem) var(--s-7);
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "ledger" "card";
}
.hero-words { grid-area: words; display: grid; gap: var(--s-5); align-content: start; }
.hero-ledger { grid-area: ledger; }
.hero-card { grid-area: card; }
.hero-card .tc, .hero-card .tc-faces { width: min(100%, 34rem); margin-inline: auto; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-areas: "words card" "ledger card"; column-gap: clamp(2.5rem, 5vw, 5.5rem); row-gap: var(--s-6); align-items: start; }
  .hero-card { position: sticky; top: 1rem; }
}
.answer { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.answer li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.45; }
.answer .hole-mark { transform: translateY(2px); }
.answer li:last-child { font-weight: 650; }
.hero .call-row { margin-top: 0; }

.week .process { margin-top: var(--s-4); }
.after-process { margin-top: var(--s-6); }

.plate-grid, .words-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .plate-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .words-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .words-head { position: sticky; top: 1.5rem; }
}
.crossed .example-label { margin-bottom: var(--s-2); }
.words-head { display: grid; gap: var(--s-4); align-content: start; }
.her-list { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.her-list > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding-bottom: var(--s-5); border-bottom: 1px dashed var(--hair); }
.her-list > li::before { content: ""; width: 18px; height: 18px; margin-top: 0.35em; border-radius: 50%; background: var(--accent); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .28); }
.her-list--compact > li { padding-bottom: var(--s-4); gap: var(--s-3); }
.her-list--compact .her p { font-size: 1.08rem; }

.same-grid { display: grid; gap: var(--s-5); margin: var(--s-6) 0 var(--s-4); }
@media (min-width: 860px) { .same-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; } }
.same-col { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.same-col .price-item { font-size: var(--step-2); }
.same-unit { font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; color: var(--ink-2); }
.same-or { align-self: center; justify-self: center; font-family: var(--face-note); font-weight: 600; font-size: 1.4rem; color: var(--ink-2); }
.strip { display: block; width: 100%; max-width: 26rem; height: auto; }
.strip-cell { fill: none; stroke: var(--boundary); stroke-width: 1.6; }
.strip-cell.is-on { fill: var(--accent); stroke: var(--accent); }
.strip--hour { max-width: 18rem; }
@media (prefers-reduced-motion: no-preference) {
  .lt-arrived .strip-cell.is-on { transform-box: fill-box; transform-origin: center; animation: cell-in 260ms var(--ease-out) both; animation-delay: calc(200ms + var(--n) * 45ms); }
}
@keyframes cell-in { from { opacity: 0; transform: scale(.4); } }

.doors { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .doors { grid-template-columns: 1fr 1fr; } }
.door { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: center; min-height: 88px; padding: var(--s-4) 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, transform var(--t-press) var(--ease-out); }
.door .seal-icon { grid-row: span 2; transition: transform var(--t-turn) var(--ease-out); }
.door-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.15rem; }
.door-line { color: var(--ink-2); font-size: var(--step-small); }
.door:hover { border-color: var(--boundary); }
.door:hover .seal-icon { transform: rotate(30deg); }
.door:active { transform: scale(.98); }
.diy { margin-top: var(--s-7); }
.apps { display: grid; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); padding: 0; list-style: none; }
@media (min-width: 760px) { .apps { grid-template-columns: 1fr 1fr; } }
.app { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; min-height: 64px; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--tint); color: var(--ink); text-decoration: none; }
.app .seal-icon { --seal-size: 36px; grid-row: span 2; transition: transform var(--t-stamp) var(--ease-out); }
.app:hover .seal-icon { transform: scale(.92); }
.app-name { font-family: var(--face-caps); font-weight: 650; }
.app-line { font-size: var(--step-small); color: var(--ink-2); }

.start-card { display: grid; gap: var(--s-5); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: calc(var(--radius) + 10px); background: var(--tint); }
.steps4 { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 900px) { .start .steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.steps4 li { position: relative; padding-left: 32px; }
.steps4 .hole-mark { position: absolute; left: 0; top: 0.2em; }
.start .steps4 li { padding: 30px 0 0; }
.start .steps4 .hole-mark { top: 0; }
.steps4 b { font-weight: 650; }
.steps4--large li { font-size: 1.08rem; padding: var(--s-3) 0 var(--s-3) 34px; border-bottom: 1px dashed var(--hair); }
.steps4--large .hole-mark { top: calc(var(--s-3) + 0.25em); }
@media (prefers-reduced-motion: no-preference) {
  .lt-arrived .steps4 .hole-mark { animation: hole-in 240ms var(--ease-out) both; }
  .lt-arrived .steps4 li:nth-child(2) .hole-mark { animation-delay: 180ms; }
  .lt-arrived .steps4 li:nth-child(3) .hole-mark { animation-delay: 360ms; }
  .lt-arrived .steps4 li:nth-child(4) .hole-mark { animation-delay: 540ms; }
}
@keyframes hole-in { from { opacity: 0; transform: scale(1.7); } }

/* ===================== the scroll process: a round window ===================== */
.process.is-staged .process-stage-inner.frame--circle { box-shadow: 0 30px 60px -36px rgb(31 27 22 / .55); }
@media (max-width: 1023px) {
  .process.is-staged .process-stage { padding-bottom: var(--s-2); }
}
.process.is-staged .process-stage .press { right: 14%; bottom: 12%; }
.process.is-staged .process-stage-inner.frame--circle .ui { font-size: clamp(0.72rem, 0.6rem + 0.5vw, 0.92rem); }
@media (max-width: 1023px) {
  .process.is-staged .process-stage .press { right: auto; left: calc(50% - 26px); bottom: 4%; --seal-size: 52px; }
  .process.is-staged .process-step { display: flex; flex-direction: column; justify-content: center; }
}
.step-day { margin-top: var(--s-3); font-family: var(--face-caps); font-weight: 650; font-size: var(--step-quiet); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.process-step h3 { margin-top: var(--s-1); }
.process-step .press { margin-top: var(--s-4); }
.process-mark { border-radius: 50%; }
/* With no script (or before it runs), each step's notes sit under its picture. */
.process:not(.is-staged) .process-figure [data-note] { position: static; margin: var(--s-3) 0 0; max-width: none; width: auto; }
.process:not(.is-staged) .process-figure .ui-tag { display: none; }

/* The fictional screens over the photograph: live HTML, so every word is true and readable. */
.ui {
  inset: 0; margin: auto; width: min(70%, 23rem); height: max-content;
  padding: 0.8em 1em; border: 1px solid var(--hair); border-radius: 14px;
  background: color-mix(in srgb, var(--raised) 95%, transparent); color: var(--ink);
  box-shadow: 0 18px 40px -16px rgb(20 14 8 / .55);
  font-size: 0.92rem; line-height: 1.4; text-align: left;
}
.ui--high { inset: 15% 0 auto 0; width: min(58%, 19rem); }
.ui--low { inset: auto 0 15% 0; }
.ui--faint { opacity: .78; }
.process-stage-frame .ui--faint.is-in { opacity: .78; }
.ui-app { font-family: var(--face-caps); font-weight: 650; font-size: 0.72em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ui-from { font-weight: 650; }
.ui-app + .ui-from, .ui-app + .ui-text { margin-top: 0.25em; }
.ui-text { margin-top: 0.2em; }
.ui-meta { display: flex; align-items: center; gap: 0.45em; margin-top: 0.45em; font-size: 0.84em; color: var(--ink-2); }
.ui-tick { position: relative; width: 1em; height: 1em; flex: none; border-radius: 50%; background: var(--accent); }
.ui-tick::after { content: ""; position: absolute; left: 0.33em; top: 0.18em; width: 0.28em; height: 0.5em; border: solid var(--raised); border-width: 0 0.12em 0.12em 0; transform: rotate(40deg); }
.ui-reply { background: color-mix(in srgb, var(--area-wash) 95%, transparent); }
.ui-slot { display: flex; gap: 0.6em; margin-top: 0.35em; padding: 0.35em 0 0.35em 0.6em; border-left: 3px solid var(--accent); }
.ui-slot span { font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-slot--quiet { border-left-color: var(--hair); color: var(--ink-2); }
.ui-record dl { margin: 0.3em 0 0; }
.ui-record dl div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 0.5em; padding: 0.22em 0; border-top: 1px dashed var(--hair); }
.ui-record dt { color: var(--ink-2); }
.ui-record dd { margin: 0; font-weight: 600; }
.ui-note { background: color-mix(in srgb, var(--raised) 97%, transparent); }
.ui-note-title { font-family: var(--face-note); font-weight: 600; font-size: 1.12em; }
.ui-note-head { margin-top: 0.4em; font-family: var(--face-caps); font-weight: 650; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.ui-note ul, .ui-list ul { margin: 0.2em 0 0; padding-left: 1.1em; }
.ui-list ul.ui-done { padding: 0; list-style: none; }
.ui-done li { display: flex; align-items: center; gap: 0.5em; padding: 0.2em 0; }
.ui-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3em; margin: 0.4em 0 0; padding: 0; list-style: none; }
.ui-days li { min-height: 3.6em; padding: 0.3em; border: 1px solid var(--hair); border-radius: 8px; }
.ui-days b { display: block; font-size: 0.8em; color: var(--ink-2); }
.ui-days i { display: block; height: 0.45em; margin-top: 0.3em; border-radius: 3px; background: var(--accent); }
.ui-days .is-moved { border-color: var(--accent); }
.ui-tag {
  inset: 8% 0 auto 0; margin-inline: auto; width: max-content; height: max-content;
  padding: 0.15rem 0.6rem; border: 1px solid var(--boundary); border-radius: var(--radius-pill);
  background: var(--raised); color: var(--ink-2); font-size: 0.72rem; font-weight: 650;
}

/* ===================== inner pages: heading, split, rules ===================== */
.page-head { display: grid; gap: var(--s-4); padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.page-head .round-semi { margin-top: 0; width: min(13rem, 55%); }
.page-head + .section { padding-top: var(--s-7); }
.jump { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.jump a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--accent); font-weight: 650; }

.split {
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "body";
}
.split-head { grid-area: head; display: grid; gap: var(--s-4); }
.split-card { grid-area: card; }
.split-body { grid-area: body; display: grid; gap: var(--s-5); align-content: start; }
.split-card .tc { width: min(100%, 30rem); margin-inline: auto; }
.split--questions .split-card .tc { width: min(100%, 17rem); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head card" "body card"; column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
  .split-card { position: sticky; top: 1.5rem; }
  .split--questions .split-card .tc { width: min(100%, 28rem); }
}

.plans { display: grid; gap: var(--s-4); }
.plan { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); scroll-margin-top: 1.5rem; transition: border-color var(--t-swap) ease-out; }
.plan:has(.plan-pick[aria-pressed="true"]) { border-color: var(--accent); }
.plan-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  width: calc(100% + 2 * var(--s-3)); min-height: 56px; margin: calc(-1 * var(--s-3)); padding: var(--s-3);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); text-align: left;
  transition: background-color var(--t-slide) var(--ease-out);
}
.plan-pick:hover { background: color-mix(in srgb, var(--tint) 55%, transparent); }
.plan-pick[aria-pressed="true"] { background: var(--tint); }
.plan-pick .price-item { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); }
.plan-show { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--face-caps); font-weight: 650; font-size: var(--step-quiet); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.plan-show::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--boundary); }
.plan-pick[aria-pressed="true"] .plan-show { color: var(--accent); }
.plan-pick[aria-pressed="true"] .plan-show::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .28); }
.plan-scope { padding-top: var(--s-3); border-top: 1px dashed var(--hair); color: var(--ink); }
.terms { display: grid; gap: var(--s-2); color: var(--ink); }
.where-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .where-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.qs { margin-top: var(--s-5); max-width: 48rem; }
.split-body .qs { margin-top: 0; }
.more-q { margin-top: var(--s-4); }
.disclosure-body ul { padding-left: 1.2rem; }
.disclosure-body li + li { margin-top: var(--s-2); }

.rules { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--s-5); }
.rule { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--boundary); }
.rule ul { padding-left: 1.1rem; }

/* ===================== one-off fixes ===================== */
.fix-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .fix-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .fix-head { position: sticky; top: 1.5rem; } }
.fix-head { display: grid; gap: var(--s-3); align-content: start; }
.fix-price { font-size: var(--step-2); }
.fix-art { margin-top: var(--s-3); padding: var(--s-5); border-radius: calc(var(--radius) + 4px); background: var(--tint); }
.fix-art-note { margin-top: var(--s-3); font-family: var(--face-note); font-weight: 600; font-size: 1.1rem; color: var(--ink-2); }
.fix-body { display: grid; gap: var(--s-5); align-content: start; }
.tiers { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tier { padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.tier h3 { margin-bottom: var(--s-3); }
.ticks { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.ticks li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.hour-steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .hour-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hour-steps li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border-radius: var(--radius); background: var(--raised); border: 1px solid var(--hair); }
.hour-steps b { font-family: var(--face-display); font-stretch: 80%; font-size: var(--step-2); }
.pairing { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: calc(var(--radius) + 4px); background: var(--tint); }
.setups { display: grid; gap: var(--s-4); margin: var(--s-6) 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.setup { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); }
.setup .price-item { font-size: var(--step-2); }

/* ===================== a month, the example ===================== */
.out-grid, .note-grid, .settle-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .out-grid, .note-grid, .settle-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}
.out-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.out-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px dashed var(--hair); font-size: 1.08rem; }
.out-mark { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--boundary); transform: translateY(3px); }
.out-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--boundary); transform: translate(-50%, -50%) rotate(-45deg); }
.paper-note { position: relative; display: grid; gap: var(--s-2); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border: 1px solid var(--hair); border-radius: 6px 6px 22px 6px; background: var(--raised); box-shadow: 0 24px 50px -32px rgb(31 27 22 / .5); transform: rotate(-0.6deg); }
.paper-note h3 { font-family: var(--face-note); font-weight: 600; font-stretch: normal; font-size: var(--step-1); letter-spacing: 0; }
.paper-note h4 { margin-top: var(--s-3); font-family: var(--face-caps); font-stretch: normal; font-size: var(--step-quiet); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.paper-note ul { padding-left: 1.2rem; }
.paper-note-meta { color: var(--ink-2); font-size: var(--step-small); }
.paper-note .example-label { justify-self: start; }
.paper-note .press { position: absolute; right: 1.25rem; bottom: 1.25rem; --seal-size: 56px; }
@media (prefers-reduced-motion: reduce) { .paper-note { transform: none; } }

/* ===================== your data ===================== */
.settle-note { margin-top: var(--s-3); max-width: 36ch; }
.settle-card { display: grid; margin: 0; padding: var(--s-3) var(--s-5); list-style: none; border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); }
.settle-card li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px dashed var(--hair); }
.settle-card li:last-child { border-bottom: 0; }
.settle-card .hole-mark { grid-row: span 2; margin-top: 0.2em; }
.settle-card b { font-weight: 650; }
.settle-card li > span:last-child { color: var(--ink-2); }

/* ===================== about ===================== */
.about { display: grid; gap: var(--s-7); padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); align-items: start; } .about-side { position: sticky; top: 1.5rem; } }
.about-side { width: min(100%, 22rem); }
@media (max-width: 959px) { .about-side { width: min(62%, 15rem); } }
.about-main { display: grid; gap: var(--s-4); }
.about-main .round-semi { margin-top: 0; }
.about-tag { font-size: var(--step-1); line-height: 1.2; color: var(--ink); }
.about-desc { color: var(--ink-2); font-size: 1.1rem; }
.about-portrait .photo-slot-frame { border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius); }
.about-portrait .photo-slot-frame.frame--edged::after { border-color: color-mix(in srgb, var(--area-ink) 30%, transparent); }
.words-list { display: grid; gap: var(--s-5); margin: var(--s-5) 0; }
.words-list > div { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: 1px dashed var(--hair); }
.words-list dd { margin: 0; }

/* ===================== the call ===================== */
.call-page { display: grid; gap: var(--s-7); padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .call-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.call-head { display: grid; gap: var(--s-4); }
.call-head .round-semi { margin-top: 0; }
.next-card { display: grid; gap: var(--s-4); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 6px); background: var(--raised); }

/* ===================== the 404 ===================== */
.lost-page { display: grid; justify-items: center; gap: var(--s-6); padding: var(--s-7) var(--gutter) 0; text-align: center; }
.lost-card { width: min(20rem, 72vw); }
.lost-words { display: grid; justify-items: center; gap: var(--s-5); }
.lost-words .pair { justify-items: center; }
.lost-words .subline { padding-left: 0; }
.lost-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ===================== reduced motion: every state shown, nothing travels ===================== */
@media (prefers-reduced-motion: reduce) {
  .tc-hole, .tc-punch, .tc-min, .tc-min-sockets path, .tc-marks, .tc-holes { transition: none !important; }
  .door, .door .seal-icon, .app .seal-icon, .go svg, .ledger-row::after { transition: none; }
  .door:hover .seal-icon, .app:hover .seal-icon, .go:hover svg { transform: none; }
}