/* dzidzi page: the nav, the travelling wordmark, the hero and each section's layout. */

/* ---- skip link */
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 12px 16px; background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; transition: top .2s var(--ease-ui); }
.skip:focus { top: 12px; }

/* ---- nav */
.nav {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav__bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 20px; }
.slot { position: relative; display: block; width: 76px; height: 34px; flex: none; }
.slot__dot { position: absolute; left: 0; top: 50%; z-index: 22; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--accent); will-change: transform; }
.nav__right { display: flex; align-items: center; gap: 22px; }
.nav__links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
.nav__links a { position: relative; text-decoration: none; padding-block: 8px; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: none; }
.menu-btn { display: none; min-height: 36px; padding: 0 13px; font: 500 13px/1 var(--font-body); color: var(--fg); background: transparent; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer; }
@media (max-width: 899px) {
  .nav__links, .nav .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; }
  .nav__right { gap: 10px; }
}
/* the menu on phones: a panel of the same cells. It lies over the travelling wordmark (21), which while it rests in
   the rings is part of the page below; once in the nav, the wordmark is above the panel's top edge anyway. */
.menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 22; background: var(--bg); border-bottom: 1px solid var(--hair); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-ui), transform .35s var(--ease-out), visibility 0s .35s; }
.menu.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); border-bottom: 1px solid var(--hair); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; }
.menu a:not(.btn)::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); }
.menu__cta { padding: 18px var(--pad) 22px; }
.menu__cta .btn { width: 100%; }
@media (min-width: 900px) { .menu { display: none; } }

/* ---- the travelling wordmark */
.wm {
  position: fixed; left: 0; top: 0; z-index: 21; display: block; transform-origin: 0 0; will-change: transform;
  color: var(--fg); text-decoration: none; line-height: 0; visibility: hidden; /* shown by the script at its first placement */
}
.wm svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm .letters, .wm .dot { fill: currentColor; }
.wm .dot--accent { fill: var(--accent); }
.wm--split .dot--accent { visibility: hidden; }   /* with script: the rings keep it, and the nav's dot stands in (hero.js) */
.wm[data-home="hero"] { pointer-events: none; } /* in the rings it is part of the picture; in the nav it is the way home */
.wm--page { position: absolute; }   /* on the rings' side of its way it rides in the page, with the rings (hero.js) */
.wm:focus-visible { outline: calc(3px / var(--k, 1)) solid var(--focus); outline-offset: calc(5px / var(--k, 1)); }
/* without script the wordmark sits in the nav */
html:not(.js) .wm { position: absolute; visibility: visible; width: 76px; left: max(calc(var(--gutter) + 20px), calc(50% - var(--content) / 2 + 20px)); top: 18px; }
html:not(.js) .slot__dot { display: none; }
/* without script there is no canvas to draw: the page starts at the headline, the links are simply shown */
html:not(.js) .hero, html:not(.js) .mode, html:not(.js) .menu-btn { display: none; }
@media (max-width: 899px) { html:not(.js) .menu { position: static; opacity: 1; visibility: visible; transform: none; } }

/* ---- hero: the canvas is the section; the one rule where the grid ends is drawn by the canvas */
.hero { position: relative; height: calc(100svh / var(--z, 1) - var(--nav-h)); min-height: 520px; max-height: 880px; overflow: hidden; }
/* a whole number of grid rows tall, so the top row under the nav is a full cell (the grid counts up from the bottom) */
@supports (height: round(down, 100px, 40px)) { @media (min-width: 1232px) { .hero { height: round(down, calc(100svh / var(--z, 1) - var(--nav-h)), 40px); } } }
.hero canvas { position: absolute; inset: 0; display: block; }
@media (max-width: 899px) { .hero { height: min(78svh, 640px); min-height: 440px; } }
/* the cue: the one hint on the first screen. A word and a dot that drops along a short line, the step rail in
   miniature. It arrives a moment after the page, leaves as soon as the page is scrolled, and a press on it glides
   down to the headline (home.js). It sits under the rings, on the grid. */
.cue { position: absolute; left: 50%; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 11px; padding: 3px 9px; transform: translateX(-50%); text-decoration: none; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .9s var(--ease-ui), visibility 0s .9s; }
.cue.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.cue .label { color: var(--fg); }
.cue i { position: relative; width: 1px; height: 16px; background: var(--hair-strong); }
.cue i::after { content: ""; position: absolute; left: -2.5px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); animation: cue-drop 2.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes cue-drop { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 72% { transform: translateY(16px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.cue:hover .label, .cue:focus-visible .label { text-decoration: underline; text-underline-offset: .3em; }
.reduce .cue i::after, html:not(.js) .cue i::after { animation: none; top: 5px; }
@media (prefers-reduced-motion: reduce) { .cue i::after { animation: none; top: 5px; } }
@media (max-height: 600px) and (min-width: 900px) { .cue { display: none; } }   /* no room under the rings */

/* ---- spacing. One scale, counted in eights, used the same way everywhere:
   a label sits 16 to 22 above its heading; a heading's second line sits close under it; the paragraph that
   explains them stands a clear step below; actions a smaller step below that; and a section keeps one large,
   equal space (--sec) between its content and the line that ends it. Things that belong together are close;
   things that do not are a full step apart. */

/* ---- lead: the page's opening. Label, the big line, a quieter line, the introduction, two buttons: one column,
   one rhythm. Then a line, and the three promises as cells. */
.lead { padding: 0; }
.lead__head { display: grid; justify-items: start; padding: var(--sec) var(--pad); }
.lead__head .label { margin-bottom: clamp(16px, 1.6vw, 22px); }
.lead__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 86px); line-height: .98; letter-spacing: -.038em; text-wrap: balance; }
.lead__sub { margin-top: clamp(10px, 1.15vw, 16px); font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 43px); line-height: 1.08; letter-spacing: -.016em; text-wrap: balance; }
@media (max-width: 899px) { .lead__sub { letter-spacing: .012em; } }
@media (min-width: 900px) { .lead__title { white-space: nowrap; } }
.lead__head .lede { margin-top: clamp(28px, 3.3vw, 48px); max-width: 50ch; color: var(--fg); }
.lead__head .actions { margin-top: clamp(24px, 2.3vw, 32px); }
.trio .cell { gap: 10px; }
.trio .mark { margin-bottom: clamp(14px, 1.6vw, 22px); }
.trio .cell p { max-width: 36ch; }

/* ---- sections. A section starts one large step under the line above it. What ends it is its own business:
   a group of cells, a band, a rule. */
.section { position: relative; padding-block: var(--sec) 0; }
.section__head { display: grid; gap: 16px; padding: 0 var(--pad) clamp(36px, 4.4vw, 60px); }
.section__head .h2 { max-width: 22ch; }
.section__head .lede { max-width: 58ch; margin-top: 4px; }
main > .section:last-child { padding-bottom: 0; }

/* ---- chapters: between one chapter and the next, a band of the grid (components.css). After the care panel the
   band's top line is the panel's last line. */
.care + .chapter { margin-top: -1px; }

/* ---- work: one group of cells. Above, the walkthrough on its stage and, beside it, what was asked and made.
   Below, across both, the client's own words: the line that says it on the left, the rest on the right, on the
   same two columns. */
/* The line between the two rows is the quote's own border, not a gap: beside the playing video, a 1px gap could
   be covered on some screens and zooms, and a border is always drawn at least one screen pixel wide. */
.work__grid { --split: minmax(0, 3fr) minmax(0, 2fr); grid-template-columns: var(--split); row-gap: 0; }
.work__stage { padding: 0; gap: 0; }
.work__note { gap: 16px; }
.work__note > .label { margin-bottom: 4px; }
.work__lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; color: var(--fg) !important; text-wrap: pretty; max-width: 44ch; }
.work__note > p:not(.label):not(.work__lede) { max-width: 56ch; }
.work__note .ticks { margin-top: 4px; padding-top: 20px; font-size: 16px; color: var(--fg); }
.work__note .actions { margin-top: auto; padding-top: 12px; }
.work__quote { grid-column: 1 / -1; display: grid; grid-template-columns: var(--split); gap: 0 1px; padding: 0; margin: 0; border-top: 1px solid var(--hair); }
.work__say, .work__more { display: grid; gap: 16px; align-content: start; margin: 0; padding: calc(var(--pad) * 1.15) var(--pad) calc(var(--pad) * 1.3); }
.work__say { align-content: center; }   /* the label, her line and her name together, level with the middle of her words */
.work__say blockquote { margin: 0; }
.work__pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.026em; color: var(--fg) !important; text-wrap: balance; max-width: 17ch; }
.work__quote figcaption { display: grid; gap: 6px; padding-top: 22px; }
.work__name { font-weight: 600; }
.work__more p { text-wrap: pretty; max-width: 62ch; }
/* side by side, the rest of her note starts level with the big line, not with the label above it */
@media (min-width: 1100px) { .work__more { padding-top: calc(var(--pad) * 1.15 + 32px); } }
@media (max-width: 1099px) {
  .work__grid, .work__quote { grid-template-columns: minmax(0, 1fr); }
  .work__grid { row-gap: 1px; } .work__quote { border-top: 0; }   /* stacked, the rows are lined by the gap again */
  .work__more { padding-top: 0; }
}

/* ---- fold-outs under the tiers: what is included, what is not, the add-ons. Three rows of one size; the last
   line of the tiers is the first line of the first row. One open at a time. */
.fold { border-bottom: 1px solid var(--hair); }
.fold > summary { transition: background-color .25s var(--ease-ui); display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 20px; align-items: center; padding: 26px var(--pad); cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.018em; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 22px; height: 22px; background: linear-gradient(var(--fg), var(--fg)) center / 100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1px 100% no-repeat; transition: transform .45s var(--ease-out); }
.fold[open] > summary::after { transform: rotate(45deg); }
.fold > summary:focus-visible { outline-offset: -3px; }
.fold::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease-out), content-visibility .55s allow-discrete; }
.fold[open]::details-content { block-size: auto; }
.fold .cells { padding-bottom: 0; }
.fold .rows .row:last-child { border-bottom: 0; }
.fold .row { padding-block: 20px; }
.fold .row__name, .check { font-size: 17px; line-height: 1.45; }
.fold .row__note { font-size: 15px; }
.fold .row__price { font-size: 20px; }
/* small cells, one line each: a dot for what is included, a dash for what is not */
.check { flex-direction: row; align-items: baseline; gap: 14px; padding-block: 22px; }
.check > span { color: var(--fg); }
.check::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); flex: none; transform: translateY(-2px); }
.check--no::before { width: 10px; height: 1px; border-radius: 0; transform: translateY(-5px); }
.check--no > span { color: var(--muted); }
.check--note > span { color: var(--muted); font-size: 15px; }
.check--note::before { background: var(--spark); }

/* ---- how it works: the heading stays while the steps pass. On the home page the line between them runs the
   whole height of the section, from the band above to the band below. */
.split { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split__side { position: sticky; top: calc(var(--nav-h) + var(--cell)); display: grid; gap: 16px; padding: 0 var(--pad) calc(var(--cell) * 1.5); }
.split__side .lede { margin-top: 4px; }
.split__main { position: relative; }
.split:not(.split--lined) .split__main::before { content: ""; position: absolute; left: 0; top: -40px; bottom: -40px; width: 1px; background: linear-gradient(transparent, var(--hair) 90px, var(--hair) calc(100% - 90px), transparent); }
.section--flush { padding-block: 0; }
/* on the home page the split is 2 to 3, so its line stands on a line of the grid above it (column 12 of 30) */
.split--lined { padding-block: var(--sec); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split--lined::before { content: ""; position: absolute; left: 40%; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.split--lined .split__side { padding-bottom: 0; }
.steps--open .step { align-items: baseline; padding-block: 20px; }
.steps--open .step:first-child { padding-top: 0; }   /* the first step starts level with the label beside it */
.steps--open .step:last-child { padding-bottom: 0; }
.steps--open .step__dot { align-self: center; }
.steps--open .step__body { grid-template-rows: 1fr; }
.steps--open .step__title { cursor: default; }
.steps--open::before { top: var(--rail-top, 16px); bottom: var(--rail-bottom, 60px); }
.steps--fold .step { padding-block: 12px; }
.steps--open.steps--fold .step__body { grid-template-rows: 0fr; }
.steps--open.steps--fold .step.is-active .step__body { grid-template-rows: 1fr; }
.steps--fold .step__title { cursor: pointer; }
.step__toggle { display: block; width: 100%; margin: 0; padding: 4px 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* One right-hand column for the whole page: the steps' text, the About text, the care text and the form all start
   on the same vertical, half way across plus one pad. The steps get there by sizing the column that holds the
   step number: a sixth of the steps' width is a tenth of the page. */
.split--lined .split__main { container-type: inline-size; }
@media (min-width: 900px) { .split--lined .step { column-gap: 21px; grid-template-columns: 11px max(24px, calc(100cqw / 6 - 53px)) minmax(0, 1fr) auto; } }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split__side { position: static; padding-bottom: var(--cell); } .split--lined .split__side { padding-bottom: var(--cell); } .split__main::before, .split--lined::before { display: none !important; } }

/* ---- care: a panel of the hero's grid with the small sun and its orbits in it, and the words beside it. The
   panel runs from the band above to the band below; its inner edge is one line. */
.care__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.care__moon { position: relative; min-height: 640px; }
.care__moon::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--hair); }
.care__moon canvas { position: absolute; inset: 0; }
.care__text { display: grid; gap: 18px; align-content: center; padding: var(--sec) var(--pad); }
.care__text .h2 { margin-top: -2px; }
.care__text .ticks { margin-top: 4px; padding-top: 22px; font-size: 16px; }
.care__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.035em; }
html:not(.js) .care__moon { display: none; }
html:not(.js) .care__grid { grid-template-columns: 1fr; }
@media (max-width: 899px) { .care__grid { grid-template-columns: 1fr; } .care__moon { min-height: 320px; border-bottom: 1px solid var(--hair); } .care__moon::after { display: none; } .care__text { padding: calc(var(--sec) * .8) var(--pad) var(--sec); } }

/* ---- about: the portrait and the words */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px calc(var(--pad) * 2); align-items: center; padding: 0 var(--pad) var(--sec); }
.about__text { display: grid; gap: 18px; align-content: center; }
.about__text .label { margin-bottom: -2px; }
.about__text .h2 { margin-bottom: 6px; }
.about__text .body { color: var(--muted); max-width: 46ch; }
.frame { max-width: 560px; width: 100%; }
.frame__stack { position: relative; overflow: hidden; }
@media (max-width: 899px) { .about__grid { grid-template-columns: 1fr; } }

/* ---- contact and footer. A low light rises behind the footer: the page ends the way it began. */
.contact { overflow: clip; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px calc(var(--pad) * 2); align-items: start; padding-inline: var(--pad); }
.contact__say { display: grid; gap: 20px; }
.contact__say .label { margin-bottom: -4px; }
@media (min-width: 900px) { .contact__form { margin-top: -4px; } }   /* the first field's label sits level with the section label */
.contact__ways { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--hair); }
.contact__ways a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-weight: 500; }
.contact__ways a span:last-child { color: var(--muted); font-weight: 400; }
.contact__ways a:hover span:last-child { color: var(--fg); }
.contact__ways a span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.contact__ways a span:last-child::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease-ui), transform .35s var(--ease-out); }
.contact__ways a:hover span:last-child::after, .contact__ways a:focus-visible span:last-child::after { opacity: 1; transform: none; }
.contact__quote { display: grid; gap: 8px; margin: 28px 0 0; }
.contact__quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.018em; }
.pagefoot .pool { --size: min(1500px, 260vw); --pool-a: 26%; left: calc(50% - var(--size) / 2); bottom: calc(var(--size) * -.62); }
:root[data-mode="dark"] .pagefoot .pool { --pool-a: 20%; }
@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }
.form__status { font-size: 15px; line-height: 1.5; margin-top: -8px; }
.form__status:empty { position: absolute; }   /* out of the form's rows while it has nothing to say, so it leaves no gap */
.form__done { display: grid; gap: 14px; align-content: center; min-height: 320px; }
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select.input option { color: #171512; background: #EDE2DE; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the footer: the wordmark and a line; then the site, contact and elsewhere on the page's right-hand column; then
   the small print on its own line */
.foot { display: grid; grid-template-columns: 50% minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px var(--pad); padding: clamp(40px, 4.6vw, 64px) var(--pad) 0; }
.foot__brand { display: grid; gap: 18px; align-content: start; padding-right: var(--pad); }
.foot__brand p { color: var(--muted); max-width: 30ch; }
.foot__wm { display: block; width: 104px; color: var(--fg); line-height: 0; }
.foot__wm svg { display: block; width: 100%; height: auto; overflow: visible; }
.foot__wm .letters, .foot__wm .dot { fill: currentColor; }
.foot__wm .dot--accent { fill: var(--accent); }
.foot__col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot__col .label { margin-bottom: 6px; }
.foot__col a[href^="mailto"] { white-space: nowrap; }
.foot__col a, .foot__links a { text-decoration: none; color: var(--muted); transition: color .2s var(--ease-ui); }
.foot__col a:hover, .foot__links a:hover { color: var(--fg); }
.foot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; margin-inline: calc(-1 * var(--pad)); padding: 22px var(--pad) 30px; border-top: 1px solid var(--hair); }   /* the line runs from rail to rail */
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
@media (max-width: 899px) {
  .foot { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .foot__brand { grid-column: 1 / -1; padding-right: 0; }
}
/* On a phone the footer's links are rows on the line, like the menu's: each one the full width, with the rose dot
   at its end, the site's links and then the contact ones. The small print's links spread along their line, with
   the copyright under them. Chosen by Giorgi on 4 October from three trials (these rows, a two-column grid,
   centred end credits). */
@media (max-width: 599px) {
  .foot { grid-template-columns: minmax(0, 1fr); gap: 34px var(--pad); }
  .foot__col { gap: 0; font-size: 17px; }
  .foot__col .label { margin-bottom: 12px; }
  .foot__col a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hair); color: var(--fg); }
  .foot__col a:last-child { border-bottom: 1px solid var(--hair); }
  .foot__col a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); flex: none; }
  .foot__base { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .foot__links { justify-content: space-between; }
  .foot__links a { padding-block: 5px; margin-block: -5px; }   /* a taller place to press, the same look */
}

/* ---- inner pages */
.nav__wm { display: block; width: 76px; flex: none; color: var(--fg); line-height: 0; }
.nav__wm svg { display: block; width: 100%; height: auto; overflow: visible; }
.nav__wm .letters, .nav__wm .dot { fill: currentColor; }
.nav__wm .dot--accent { fill: var(--accent); }
.nav__links a[aria-current="page"]::after { transform: none; }
.pagehead { padding-block: clamp(56px, 7vw, 104px) 0; }
.pagehead .inset { display: grid; gap: 20px; }
.pagehead .d1 { font-size: clamp(40px, 5.6vw, 76px); max-width: 16ch; }
.prose { max-width: calc(64ch + 2 * var(--pad)); padding: 0 var(--pad); display: grid; gap: 14px; }
.prose h2 { margin-top: calc(var(--cell) * .9); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); text-wrap: pretty; }
.steps--all .step .step__dot { background: var(--bg); border-color: var(--hair-strong); }
.steps--all .step .step__title { color: var(--fg); }
.steps--all .step:first-child .step__dot { background: var(--spark); border-color: var(--spark); }
.pagefoot { position: relative; padding-top: var(--sec); }   /* padding, not margin: the rails run on through it */
.pagefoot--home { overflow: clip; }   /* the home page's low light ends with the page */

.lost { position: relative; min-height: calc(100svh / var(--z, 1) - var(--nav-h) - 96px); display: grid; }
.lost > .shell, .lost .care__grid { display: grid; }
.lost .care__grid { border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .lost .care__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }