/*
 * Declutter and Stage: the parts these two area sites share, on top of the
 * round 3 system (assets/system/). The same file sits in sites/declutter and
 * sites/stage; change both together. Nothing here changes a system part:
 * it adds the area page's own pieces (the hero and its three plain lines,
 * the ledger of prices, the ways in, the scroll process's annotations and
 * HTML illustrations, the welcome book's spread, the call band, the 404's
 * torn pattern) and reads only the system's semantic tokens, so both themes
 * and both sites come out right.
 */

/* ===================== page rhythm ===================== */
.page { padding-bottom: var(--s-6); }
.band { padding-block: clamp(3.25rem, 2.25rem + 4vw, 6rem); }
.band--tint { background: var(--tint); }
.band + .band:not(.band--tint) { padding-top: 0; }
.band--tint + .band { padding-top: clamp(3.25rem, 2.25rem + 4vw, 6rem); }
.band-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); max-width: 48rem; }
.band-head .divider { margin: 0; }
.kicker { display: inline-flex; align-items: center; gap: 0.6rem; }
.kicker .seal-icon { --seal-size: 28px; }

/* ===================== the front page's hero: the answer before any instrument ===================== */
.hero { display: grid; gap: var(--s-6); padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
}
.hero-words { display: grid; gap: var(--s-5); align-content: start; }
.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 1fr; gap: var(--s-3); align-items: baseline; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.45; }
.answer-tile { display: block; width: 14px; height: 14px; border-radius: 3px; overflow: hidden; outline: 1px solid var(--boundary); outline-offset: 1px; transform: translateY(1px); }
.answer-tile .weave { height: 100%; }
.answer-tile .weave rect { opacity: 1; }
.answer b { font-weight: 650; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hero-act .call-note { margin: 0; max-width: 24rem; }
.hero-figure { margin: 0; display: grid; gap: var(--s-3); justify-items: center; }
.hero-frame { width: min(100%, 32rem); }
.hero-frame.frame--arch { aspect-ratio: 4 / 5; }
.hero-figure .caption { text-align: center; max-width: 30rem; }
.smallest { display: grid; gap: 4px; padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent); background: var(--raised); border-radius: 0 var(--radius) var(--radius) 0; max-width: 34rem; }
.smallest .caps { margin-bottom: 2px; }
.smallest .price-item { font-size: 1.15rem; }

/* ===================== the area's name, doing what it says once (front page only) ===================== */
.name-move { display: inline-flex; }
.name-move > span { display: inline-block; }

/* ===================== the ledger: every price on one page, in one place ===================== */
.ledger { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.ledger-row { border-bottom: 1px solid var(--hair); }
.ledger-row > a, .ledger-row > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-5); align-items: baseline;
  min-height: 56px; padding: var(--s-3) var(--s-2); color: var(--ink); text-decoration: none; border-radius: var(--radius-sm);
  transition: background-color var(--t-swap) ease-out;
}
.ledger-row > a:hover { background: var(--raised); }
.ledger-name { font-weight: 650; }
.ledger-price { font-weight: 650; font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
@media (max-width: 559px) { .ledger-price { white-space: normal; max-width: 11rem; } }
.ledger-price--long { grid-column: 1 / -1; text-align: left; white-space: normal; }
.ledger-what { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--step-small); max-width: 60ch; }
.ledger-group { margin: var(--s-6) 0 var(--s-2); }
.ledger-group:first-child { margin-top: 0; }
.ledger-foot { display: grid; gap: var(--s-2); margin-top: var(--s-4); }

/* ===================== ways in: one card per item, with what is included ===================== */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ways--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way { display: grid; gap: var(--s-3); align-content: start; min-width: 0; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); scroll-margin-top: var(--s-6); }
.way-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: baseline; }
.way-head h3 { font-size: var(--step-2); }
.way-price { font-weight: 650; font-size: 1.2rem; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.way-head--long { grid-template-columns: minmax(0, 1fr); }
.way-head--long .way-price { text-align: left; }
.way-line { color: var(--ink); max-width: 52ch; }
.way-good { font-family: var(--face-note); font-weight: 600; font-size: 1.05rem; color: var(--ink-2); }
.way .disclosure > summary { font-size: 1rem; min-height: 48px; }
.way .disclosure:last-of-type { border-bottom: 0; }
.way ul { margin: 0; padding-left: 1.15rem; }
.way li + li { margin-top: var(--s-1); }
.way-tag { justify-self: start; }

/* ===================== scenes: who it is for, as two illustrative situations ===================== */
.scenes { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .scenes { grid-template-columns: 1fr 1fr; } }
.scene { position: relative; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 10px); border-radius: var(--radius); background: var(--raised); }
.scene::before { content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5); width: 4px; border-radius: 4px; background: var(--area-ink); }
.scene p { font-family: var(--face-note); font-weight: 600; font-size: 1.15rem; line-height: 1.45; }
.scene .scene-then { margin-top: var(--s-3); font-family: var(--face-text); font-weight: 400; font-size: 1rem; color: var(--ink); }

/* ===================== "Plainly": what Laura does and does not do ===================== */
.plainly { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--boundary); border-radius: var(--radius); background: var(--ground); max-width: 52rem; }
.plainly ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.plainly li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); align-items: baseline; }
.plainly li::before { content: ""; width: 10px; height: 2px; background: var(--ink-2); transform: translateY(-4px); }

/* ===================== her words: HERS rows only, quoted whole ===================== */
.words { display: grid; gap: var(--s-5); justify-items: start; max-width: 52rem; }
.words-quotes { display: grid; gap: var(--s-5); margin: 0; }
.words-quotes blockquote { margin: 0; padding-left: var(--s-5); border-left: 2px solid var(--area-ink); font-family: var(--face-head); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.35; }
.words-cite { font-family: var(--face-note); font-weight: 600; color: var(--ink-2); }

/* ===================== the second door, and the two neighbours ===================== */
.doors-two { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .doors-two { grid-template-columns: 1fr 1fr; } }
.door-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) 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-card .seal-icon { --seal-size: 52px; grid-row: span 2; transition: transform var(--t-swap) var(--ease-out); }
.door-card:hover { border-color: var(--boundary); }
.door-card:hover .seal-icon, .door-card:focus-visible .seal-icon { transform: translateY(-2px) rotate(30deg); }
.door-card:active { transform: scale(.98); }
.door-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.05rem; }
.door-line { color: var(--ink-2); font-size: var(--step-small); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) {
  .door-card:hover .seal-icon, .door-card:focus-visible .seal-icon { transform: none; }
  .door-card:hover .door-name { text-decoration: underline; }
  .door-card:active { transform: none; }
}

/* ===================== the call band, closing every page ===================== */
.call-band { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .call-band { grid-template-columns: 1fr 1.2fr; align-items: start; gap: var(--s-7); } }
.next-steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .next-steps { grid-template-columns: 1fr 1fr; } }
.next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); align-items: baseline; }
.next-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--boundary); border-radius: 50%; font-family: var(--face-head); font-weight: 600; font-size: 1.1rem; background: var(--raised); }
.call-band-act { display: grid; gap: var(--s-2); justify-items: start; }
.call-band-act .call-note { margin: 0; }

/* ===================== an inner page's head: the round as a semi-circle under the heading ===================== */
.page-head { display: grid; gap: var(--s-4); padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--s-6); }
.page-head .round-semi { margin-top: 0; width: min(13rem, 52%); }
.page-head .lede { max-width: 50ch; }
.page-head .smallest { margin-top: var(--s-2); }
@media (min-width: 960px) {
  .page-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .page-head--split > .page-head-words { display: grid; gap: var(--s-4); }
}
.page-head-words { display: grid; gap: var(--s-4); }
.page-figure { margin: 0; display: grid; gap: var(--s-2); }
.page-figure .frame { width: 100%; }
.page-figure .frame--arch { aspect-ratio: 4 / 5; max-height: 72svh; }

/* ===================== the scroll process, as these two sites use it ===================== */
.process-intro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.process-intro .caption { margin: 0; }
.process-step .step-time { font-family: var(--face-caps); font-weight: 650; font-size: var(--step-quiet); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-top: var(--s-3); }
.process-step .step-time + h3 { margin-top: var(--s-1); }
.process-step .price-line { margin-top: var(--s-3); font-weight: 650; }
.process-figure, .process-stage-inner { container-type: inline-size; }
/* The stage keeps the picture's own 4:3, so every annotation stays on the thing it names. */
@media (min-width: 1024px) {
  .process.is-staged .process-stage { height: auto; top: 16svh; }
  .process.is-staged .process-stage-inner { height: auto; aspect-ratio: 4 / 3; max-height: 76svh; max-width: calc(76svh * 4 / 3); margin-inline: auto; }
}
.process-stage-frame > .ill { width: 100%; height: 100%; }

/* Annotations pinned to a picture: a dot on the thing, a pencilled note beside it. */
.pin { position: absolute; display: flex; align-items: center; gap: 6px; width: max-content; transform: translate(-7px, -50%); pointer-events: none; z-index: 2; }
.pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.pin-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--raised), 0 2px 6px rgb(0 0 0 / .35); }
.pin-note {
  max-width: 15em; padding: 0.3em 0.6em; border-radius: 8px; background: var(--raised); color: var(--ink);
  font-family: var(--face-note); font-weight: 600; font-size: clamp(11px, 2.3cqi, 16px); line-height: 1.25;
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / .45); border: 1px solid var(--hair);
}
.pin-note b { font-family: var(--face-caps); font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.process-figure .pin { transform: translate(-7px, -50%); }
.process-figure .pin--l { transform: translate(calc(-100% + 7px), -50%); }
/* On the stage the system slides each note in with translate (none under reduced motion); the pin keeps its own placing transform. */

/* A label in the frame's corner naming the step (its verb), set in the area's voice. */
.frame-tag { position: absolute; left: 3cqi; top: 3cqi; z-index: 3; display: inline-flex; align-items: baseline; gap: 0.45em; padding: 0.35em 0.75em; border-radius: var(--radius-pill); background: var(--raised); color: var(--ink); border: 1px solid var(--boundary); font-family: var(--face-caps); font-weight: 650; font-size: clamp(11px, 2.2cqi, 15px); }
.frame-tag b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ===================== HTML illustrations (fictional, labelled), drawn on paper in the area's colour ===================== */
.ill {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
  border-radius: var(--radius); background: var(--tint); color: var(--ink);
  font-size: clamp(10px, 2.3cqi, 17px); line-height: 1.35;
}
.ill .weave.ill-ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.ill-sheet {
  position: relative; width: 78%; padding: 5cqi 5.5cqi; border-radius: 4px; background: var(--raised);
  box-shadow: 0 1px 0 var(--hair), 0 18px 36px -18px rgb(0 0 0 / .45); transform: rotate(-1.2deg);
}
.ill-sheet--b { transform: rotate(.9deg); }
.ill-title { font-family: var(--face-head); font-weight: 600; font-size: 1.45em; line-height: 1.15; }
.ill-sub { margin-top: .3em; font-family: var(--face-note); font-weight: 600; color: var(--ink-2); }
.ill-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqi; margin-top: 1.1em; }
.ill-col .ill-col-head { font-family: var(--face-caps); font-weight: 700; font-size: .8em; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-bottom: .3em; border-bottom: 2px solid var(--area-ink); }
.ill-col p { margin-top: .45em; font-family: var(--face-note); font-weight: 600; font-size: .95em; }
.ill-list { display: grid; gap: .55em; margin: 1em 0 0; padding: 0; list-style: none; }
.ill-list li { display: grid; grid-template-columns: 1.3em 1fr; gap: .5em; align-items: baseline; font-family: var(--face-note); font-weight: 600; }
.ill-list li::before { content: ""; width: .8em; height: .8em; border: 2px solid var(--boundary); border-radius: 3px; transform: translateY(.1em); }
.ill-list--ticked li::before { background: var(--accent); border-color: var(--accent); }
.ill-row { display: flex; justify-content: space-between; gap: 1em; margin-top: .9em; padding-top: .6em; border-top: 1px dashed var(--hair); font-family: var(--face-note); font-weight: 600; }
.ill-row span:last-child { color: var(--ink-2); }
.ill-hours { display: grid; gap: 1em; margin-top: 1.1em; }
.ill-hour { display: grid; gap: .35em; }
.ill-hour p { font-family: var(--face-note); font-weight: 600; }
.ill-squares { display: flex; gap: .35em; }
.ill-squares span { width: 1.6em; height: 1.6em; border-radius: 3px; border: 1.5px solid var(--boundary); background: var(--ground); overflow: hidden; }
.ill-squares span svg { width: 100%; height: 100%; display: block; }
.ill-squares span svg rect { fill: var(--area-pat); opacity: 1; }
.ill-squares .half { width: .8em; }
.ill-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4cqi; padding: 0 6cqi; position: relative; }
.ill-tag { position: relative; display: grid; gap: .3em; min-width: 9.5em; padding: 1.1em 1.1em 1em 2em; background: var(--raised); border-radius: 4px 14px 14px 4px; box-shadow: 0 14px 28px -16px rgb(0 0 0 / .5); transform: rotate(-3deg); }
.ill-tag:nth-child(2) { transform: rotate(2deg) translateY(1.2em); }
.ill-tag:nth-child(3) { transform: rotate(-1deg) translateY(.4em); }
.ill-tag::before { content: ""; position: absolute; left: .7em; top: 50%; width: .6em; height: .6em; margin-top: -.3em; border-radius: 50%; border: 2px solid var(--boundary); background: var(--tint); }
.ill-tag b { font-family: var(--face-caps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85em; color: var(--accent); }
.ill-tag span { font-family: var(--face-note); font-weight: 600; }
.ill-screen { position: relative; width: 80%; border-radius: 14px; overflow: hidden; background: #1F1B16; padding: 1.6cqi; box-shadow: 0 18px 36px -18px rgb(0 0 0 / .5); }
.ill-screen picture, .ill-screen img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ill-screen-bar { position: absolute; left: 3cqi; bottom: 3cqi; display: inline-flex; align-items: center; gap: .5em; padding: .3em .7em; border-radius: var(--radius-pill); background: var(--raised); color: var(--ink); font-family: var(--face-caps); font-weight: 650; font-size: .85em; }
.ill-screen-bar::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--accent); }
.ill-card { position: relative; width: 70%; padding: 5cqi; border-radius: 18px; background: var(--raised); box-shadow: 0 18px 36px -18px rgb(0 0 0 / .45); }

/* ===================== the day's arc (Stage): the round as the sun's path from eight to eight ===================== */
.day { position: absolute; right: 3cqi; top: 3cqi; z-index: 3; display: grid; justify-items: center; gap: 2px; padding: 1.4cqi 2cqi 1.2cqi; border-radius: 14px; background: var(--raised); border: 1px solid var(--boundary); }
.day svg { width: clamp(64px, 15cqi, 120px); height: auto; overflow: visible; }
.day-track { fill: none; stroke: var(--boundary); stroke-width: 2; }
.day-ticks { fill: none; stroke: var(--boundary); stroke-width: 1.5; }
.day-hand line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.day-hand circle { fill: var(--accent); }
.day-ends { font-family: var(--face-caps); font-size: 9px; font-weight: 650; fill: var(--ink-2); }
.day-time { font-family: var(--face-caps); font-weight: 700; font-size: clamp(11px, 2.4cqi, 16px); letter-spacing: .06em; color: var(--ink); }

/* ===================== the welcome book: a fictional spread, drawn in HTML ===================== */
.book { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius); background: var(--tint); overflow: hidden; container-type: inline-size; }
.book .weave.ill-ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 88%; aspect-ratio: 1.55; box-shadow: 0 26px 50px -24px rgb(0 0 0 / .55); }
.spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgb(0 0 0 / .14) 45%, rgb(0 0 0 / .2) 50%, rgb(0 0 0 / .14) 55%, transparent); pointer-events: none; }
.leaf { position: relative; display: grid; align-content: start; gap: .7em; padding: 6cqi 5cqi; background: var(--book-paper); color: var(--book-ink); font-size: clamp(9px, 1.9cqi, 15px); line-height: 1.4; overflow: hidden; }
.leaf--l { border-radius: 6px 0 0 6px; }
.leaf--r { border-radius: 0 6px 6px 0; }
.leaf-kicker { font-family: var(--face-caps); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .72em; color: var(--book-say); }
.leaf .leaf-title { font-family: var(--face-head); font-weight: 600; font-size: 1.7em; line-height: 1.1; color: var(--book-ink); }
.leaf p { font-family: var(--face-text); }
.leaf .leaf-note { font-family: var(--face-note); font-weight: 600; color: var(--book-ink-2); }
.leaf dl { display: grid; grid-template-columns: auto 1fr; gap: .35em .9em; margin: 0; }
.leaf dt { font-family: var(--face-caps); font-weight: 700; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--book-say); padding-top: .15em; }
.leaf dd { margin: 0; }
.leaf-num { position: absolute; bottom: 3cqi; font-family: var(--face-caps); font-size: .75em; color: var(--book-ink-2); }
.leaf--l .leaf-num { left: 5cqi; }
.leaf--r .leaf-num { right: 5cqi; }
.leaf-art { width: 46%; height: auto; margin-top: .4em; color: var(--book-say); }
.leaf-art * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.leaf-rule { width: 3.2em; height: 3px; border-radius: 3px; background: var(--area-ink); }
@container (max-width: 520px) {
  .spread { grid-template-columns: 1fr; width: 64%; aspect-ratio: .78; }
  .spread::after, .leaf--l { display: none; }
  .leaf--r { border-radius: 6px; font-size: clamp(9px, 3cqi, 14px); }
}
/* The phone-friendly copy, beside the book at the last page. */
.phone-copy { position: absolute; right: 5%; bottom: 7%; width: 22%; aspect-ratio: 9 / 18; padding: 2.2cqi 1.4cqi; border-radius: 16px; background: #1F1B16; box-shadow: 0 20px 36px -16px rgb(0 0 0 / .6); z-index: 2; }
.phone-copy-screen { display: grid; align-content: start; gap: .5em; height: 100%; padding: 1.6cqi 1.4cqi; border-radius: 10px; background: var(--book-paper); color: var(--book-ink); font-size: clamp(6px, 1.25cqi, 11px); overflow: hidden; }
.phone-copy-screen b { font-family: var(--face-head); font-weight: 600; font-size: 1.3em; }
.phone-copy-screen span { display: block; height: .55em; border-radius: 3px; background: var(--book-line); }
.phone-copy-screen span:nth-child(odd) { width: 80%; }
@container (max-width: 520px) { .phone-copy { width: 26%; right: 4%; } }

/* ===================== two paths over the same items (Stage's front page) ===================== */
.paths { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .paths { grid-template-columns: 1fr 1fr; } }
.path { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6) var(--s-5) var(--s-5); border: 1px solid var(--hair); border-radius: 22px 22px var(--radius) var(--radius); background: var(--raised); position: relative; overflow: hidden; }
.path::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--area-ink); opacity: .55; }
.path h3 { font-size: var(--step-1); }
.path .ledger { margin-top: var(--s-2); }
.path-go { justify-self: start; }

/* ===================== a timeline, for moves ===================== */
.timeline { position: relative; display: grid; gap: var(--s-5); margin: 0; padding: 0 0 0 2.25rem; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--boundary); }
.timeline li { position: relative; display: grid; gap: var(--s-1); }
.timeline li::before { content: ""; position: absolute; left: calc(-2.25rem + 4px); top: .35em; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--boundary); background: var(--ground); }
.timeline li.is-laura::before { background: var(--accent); border-color: var(--accent); }
.timeline .when { 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); }
.timeline li.is-laura .when { color: var(--accent); }
.timeline h3 { font-size: 1.2rem; }

/* ===================== questions ===================== */
.faq { max-width: 52rem; }
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group > h2 { font-size: var(--step-2); margin-bottom: var(--s-3); }

/* ===================== about: her portrait slot and her words ===================== */
.about-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: start; gap: var(--s-8); } }
.about-grid .photo-slot { position: sticky; top: var(--s-6); }
.about-tagline { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.photo-slot-empty .seal-icon { --seal-size: 38%; }

/* ===================== the 404: the pattern torn at one edge ===================== */
.torn { position: relative; width: min(100%, 26rem); height: 120px; margin-inline: auto; overflow: hidden; }
.torn .weave { position: absolute; inset: 0; width: 100%; height: 100%; }
.torn { clip-path: polygon(0 0, 100% 0, 100% 62%, 94% 70%, 88% 58%, 81% 74%, 74% 61%, 67% 77%, 60% 63%, 52% 79%, 45% 64%, 38% 76%, 31% 60%, 24% 73%, 17% 59%, 10% 71%, 4% 62%, 0 70%); }
.lost .seal-icon { --seal-size: 96px; margin-top: -48px; position: relative; }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ===================== small details ===================== */
.price-what b { font-weight: 650; color: var(--ink); }
.fine { font-size: var(--step-small); color: var(--ink-2); max-width: 60ch; }
.inline-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.inline-list a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 600; }
.split2 { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .split2 { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s-7); } }

/* ===================== woven strengths these two sites add (9.2) ===================== */
/* The system sets --weave-mark and --weave-ground per theme; an illustration's woven ground takes the ground strength. */
.ill .weave.ill-ground rect, .book .weave.ill-ground rect { opacity: var(--weave-ground); }
.torn .weave rect { opacity: .55; }