@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300 400; font-display: swap; src: url(/fonts/SourceSerif4-Var-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/SourceSans3-Var-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/GeistMono-Regular.woff2) format("woff2"); }

/* arkhelion.ai home — ported from the settled draft (v28, round 18o) on 2026-09-19.
 * Source of truth for the look: docs/design/drafts/2026-09-16-site-craft/page/index.html.
 * Only the changes the live site needs are made here; each is marked `golive:`.
 * Type: Lyon Display + Whitney (locked); drawn with stand-ins Source Serif 4 + Source Sans 3.
 * Wordmark only in Geist Mono. One colour family: Linen, sampled from the hero fog. */
:root {
  --paper: #F3EDE2; --paper-2: #EBE4D7; --sheet: #F8F4EC;
  --ink: #2A2723; --ink-2: #57524A; --rule: rgba(42,39,35,.16); --line: rgba(42,39,35,.45);
  --deep: #2B2621; --on-deep: #F3EDE2; --on-deep-2: #D2C9BA; --deep-line: rgba(243,237,226,.55);
  --focus: #6B4A22; --focus-deep: #E7C995;
  /* golive: the dark-ground set, kept under its own names so the reserve section can
     switch between light-ground and dark-ground words (see the block at the end). */
  --deep-ground: #2B2621; --deep-fg: #F3EDE2; --deep-fg-2: #D2C9BA; --deep-hairline: rgba(243,237,226,.55); --deep-accent: #E7C995;
  --display: "Source Serif 4", "Lyon Display", Georgia, serif;
  --text: "Source Sans 3", "Whitney", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --statement: clamp(2.3rem, 1.25rem + 2.9vw, 3.5rem);
  --h2: clamp(1.9rem, 1.45rem + 1.3vw, 2.75rem);
  --h3: clamp(1.25rem, 1.15rem + .3vw, 1.45rem);
  --lead: clamp(1.125rem, 1.05rem + .25vw, 1.3125rem);
  --body: clamp(1.0625rem, 1rem + .1vw, 1.125rem);
  --section: clamp(7rem, 3.5rem + 10vw, 13.5rem);
  --band-rgb: 234 226 212; --band: rgb(var(--band-rgb));
  --margin: clamp(1.25rem, .5rem + 4vw, 4rem);
  --bleed: calc(-1 * (var(--margin) + max(0px, (100vw - 88rem) / 2)));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hero-dim: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --deep-ground: #12110F; --band-rgb: 35 32 28; --band: rgb(var(--band-rgb)); --paper: #1C1A17; --paper-2: #24211D; --sheet: #26231F; --ink: #EDE6DA; --ink-2: #BFB6A8; --rule: rgba(237,230,218,.15); --line: rgba(237,230,218,.5); --deep: #12110F; --focus: #E7C995; --hero-dim: .72; }
}
:root[data-theme="dark"] { --deep-ground: #12110F; --band-rgb: 35 32 28; --band: rgb(var(--band-rgb)); --paper: #1C1A17; --paper-2: #24211D; --sheet: #26231F; --ink: #EDE6DA; --ink-2: #BFB6A8; --rule: rgba(237,230,218,.15); --line: rgba(237,230,218,.5); --deep: #12110F; --focus: #E7C995; --hero-dim: .72; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the thank-you note showed under the form outside the artifact viewer */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font: 400 var(--body)/1.65 var(--text); -webkit-font-smoothing: antialiased; font-kerning: normal; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; text-wrap: balance; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wrap { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; }
.label { font: 500 .75rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.link { text-decoration: underline; text-decoration-color: var(--line); transition: text-decoration-color 200ms var(--ease); }
.link:hover { text-decoration-color: currentColor; }
.icon { width: 2.25rem; height: 2.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--hero-dim)); }
/* round 16: Phosphor Thin (MIT, no attribution) — 1.0–1.25px lines at this size; filled outlines, so no stroke */
.icon.ph { fill: currentColor; stroke: none; }
/* no single-word last lines anywhere ("in / order.", "never / diagnoses.") */
p, dd, figcaption { text-wrap: pretty; }
.invite-copy p, .sample figcaption { text-wrap: balance; }

/* ── 1 · First screen: fills any screen, words sit in the fog above the dunes ── */
.hero { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; background: #EFE6D6; color: #2A2723; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: brightness(var(--hero-dim)); }
/* the dunes melt into the page instead of ending on a line */
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--paper) 0%, transparent), color-mix(in oklab, var(--paper) 40%, transparent) 45%, color-mix(in oklab, var(--paper) 85%, transparent) 78%, var(--paper)); }
.masthead { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: clamp(1.1rem, 1.8vw, 2rem); }
.wordmark { font-family: var(--mono); font-size: clamp(.9rem, .8rem + .3vw, 1.0625rem); letter-spacing: .26em; text-decoration: none; }
.masthead .link { font-size: .95rem; text-decoration-color: rgba(42,39,35,.45); }
/* The photo is top-aligned and covers the screen, so its drawn height is max(100svh, 56.25vw).
   Under the words the dunes begin at 53% of that height; the words end at 49%. */
.say { position: absolute; z-index: 1; left: 50%; bottom: max(14svh, calc(100svh - .49 * max(100svh, 56.25vw))); transform: translateX(-50%); width: min(100% - 2 * var(--margin), 50rem); text-align: center; }
.say h1 { font-size: var(--statement); line-height: 1.07; letter-spacing: -.022em; }
.say .sub { font-size: var(--lead); line-height: 1.5; margin: 1.1rem auto 0; max-width: 31rem; color: #3A3631; }
.cue { position: absolute; z-index: 1; left: 50%; bottom: 3svh; translate: -50% 0; display: grid; justify-items: center; gap: .6rem; font: 500 .6875rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.cue::after { content: ""; width: 1px; height: 2.4rem; background: currentColor; opacity: .45; }

/* quiet bar that appears once the first screen has gone */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); translate: 0 -100%; transition: translate 350ms var(--ease); }
.bar.on { translate: 0 0; }
.bar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* ── chapters: every section opens the same way, and grounds change through soft fades, never a line ── */
.chapter { display: grid; justify-items: center; gap: 1.1rem; text-align: center; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.chapter .rule { width: 1px; height: 3.5rem; background: var(--line); }
.band { position: relative; padding-block: var(--section);
  --band-fade: clamp(4rem, 8vw, 9rem);
  background: linear-gradient(to bottom,
    rgb(var(--band-rgb) / 0) 0,
    rgb(var(--band-rgb) / .28) calc(var(--band-fade) * .22),
    rgb(var(--band-rgb) / .72) calc(var(--band-fade) * .55),
    var(--band) var(--band-fade),
    var(--band) calc(100% - var(--band-fade)),
    rgb(var(--band-rgb) / .72) calc(100% - var(--band-fade) * .55),
    rgb(var(--band-rgb) / .28) calc(100% - var(--band-fade) * .22),
    rgb(var(--band-rgb) / 0) 100%); }
.band > * { position: relative; z-index: 1; }

/* ── 2 · The dots (round 14): one short line per screen, lots of air, the photo does the explaining.
   Pinned stage; everything is tied to scroll position and eased toward it, scroll speed itself is untouched. ── */
.scene { position: relative; height: 460svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* no film grain: TASTE_PROFILE rules it out (imagery research, 2026-09-15) */
.l.final .sub { margin-top: 1.1rem; font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.4 var(--text); letter-spacing: .01em; color: #3A3631; }
.piece { position: absolute; inset: 0; clip-path: inset(50% 50% 50% 50%); }
.piece img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: brightness(var(--hero-dim)); }
/* the calm view the pieces settle into; warmed toward Linen until the original is graded with the pipeline */
.whole-view { position: absolute; inset: 0; opacity: 0; }
.whole-view, .piece img { -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%); mask-image: linear-gradient(to bottom, #000 45%, transparent 98%); }
.whole-view img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(var(--hero-dim)); }
.veil { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(color-mix(in oklab, var(--paper) 50%, transparent), transparent 45%); }
.l { position: absolute; z-index: 2; left: 50%; top: 21svh; translate: -50% 0; width: min(100% - 2 * var(--margin), 56rem); text-align: center; visibility: hidden; }
.mask { display: block; overflow: hidden; padding-bottom: .14em; }
.rise { display: block; transform: translate3d(0, 110%, 0); }
.l p { font: 300 clamp(1.75rem, 1.05rem + 2.3vw, 3.1rem)/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.l.final { top: 19svh; color: #2A2723; }
.l.final p { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.3rem); letter-spacing: -.026em; }
/* without motion: the lines sit in order, then the whole photo */
:root:not(.motion) .scene { height: auto; }
:root:not(.motion) .stage { position: relative; height: auto; overflow: visible; display: grid; gap: 12svh; padding-top: 18svh; }
:root:not(.motion) .l { position: static; translate: none; margin-inline: auto; visibility: visible; }
:root:not(.motion) .rise { transform: none; }
:root:not(.motion) .piece { display: none; }
:root:not(.motion) .whole-view { opacity: 1; position: relative; height: 70svh; order: 9; }
:root:not(.motion) .veil { display: none; }
:root:not(.motion) .l.final { color: var(--ink); }

/* ── 3 · What it does: photo left, four parallel rows right ── */
.does { padding-block: var(--section); align-items: center; row-gap: 3rem; }
.does .photo { grid-column: 1 / span 6; margin-left: var(--bleed); aspect-ratio: 4 / 5; overflow: hidden; }
.does .photo img { object-position: 40% 50%; }
.does-copy { grid-column: 8 / span 5; }
.does-copy h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; }
.rows { list-style: none; margin-top: 2.8rem; }
.rows li { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-block: 1.6rem; border-top: 1px solid var(--rule); }
.rows h3 { font-size: var(--h3); line-height: 1.3; }
.rows p { color: var(--ink-2); margin-top: .25rem; max-width: 30ch; }

/* ── 4 · Privacy owns this section ── */
.kept { }
.kept-head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: 3.5rem; }
.kept .lede { color: var(--ink-2); max-width: 36ch; font-size: var(--lead); }
.kept-head h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; }
.kept .photo { aspect-ratio: 21 / 8; margin-inline: var(--bleed); overflow: hidden; }
.kept .photo img { object-position: 50% 60%; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-top: 3.5rem; }
.facts li { display: grid; gap: .45rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.facts strong { font: 400 var(--lead)/1.35 var(--display); }
.facts span { color: var(--ink-2); }
.kept .next { margin-top: 4rem; text-align: center; }

/* ── 5 · How a morning read works ── */
.morning { padding-block: var(--section); text-align: center; }
.morning h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; max-width: 22ch; margin-inline: auto; }
.three { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-top: 4rem; }
.three li { display: grid; justify-items: center; gap: 1rem; }
.three .icon { width: 2.75rem; height: 2.75rem; }
.three h3 { font-size: var(--h3); }
.three p { color: var(--ink-2); max-width: 22ch; }
.morning .fine { margin-top: 3rem; font-size: .9375rem; color: var(--ink-2); }

/* ── 6 · A note from me ── */
.note { align-items: center; row-gap: 3rem; }
.note .next { margin-top: 2.4rem; }
.note-copy { grid-column: 2 / span 5; }
.note-copy blockquote { font: 300 clamp(1.35rem, 1.2rem + .5vw, 1.7rem)/1.5 var(--display); }
.note-copy blockquote p + p { margin-top: 1.3rem; }
.note-copy .sig { margin-top: 1.8rem; color: var(--ink-2); }
.note-copy .status { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9375rem; }
.note .photo { grid-column: 8 / span 4; aspect-ratio: 4 / 5; overflow: hidden; }

/* ── 7 · Questions ── */
.faq { padding-block: var(--section); }
.faq h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; }
.faq > div:first-child { grid-column: 1 / span 4; }
.faq .list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding-block: 1.35rem; font: 400 var(--h3)/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.5rem/1 var(--text); color: var(--ink-2); transition: rotate 250ms var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding-bottom: 1.5rem; color: var(--ink-2); max-width: 52ch; }

/* ── 8 · The invitation (the one dark section) ── */
.invite { background: var(--deep); color: var(--on-deep); }
.invite .grid { align-items: stretch; }
.invite .photo { grid-column: 1 / span 6; margin-left: var(--bleed); min-height: 40rem; overflow: hidden; }
.invite .photo img { object-position: 70% 60%; }
.invite-copy { grid-column: 8 / span 5; align-self: center; padding-block: var(--section); display: grid; gap: 1.5rem; justify-items: start; }
.invite-copy .label { color: var(--on-deep-2); }
.invite-copy h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; }
.invite-copy p { color: var(--on-deep-2); max-width: 30ch; }
.invite-copy .price { font: 300 var(--h3)/1.45 var(--display); color: var(--on-deep); }
.form { display: grid; gap: .8rem; width: 100%; max-width: 26rem; margin-top: .5rem; }
.form label { font-size: .875rem; color: var(--on-deep-2); }
.form input { width: 100%; padding: .95rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--deep-line); color: var(--on-deep); font: 400 1.125rem/1.3 var(--text); border-radius: 0; transition: border-color 150ms var(--ease); }
.form input::placeholder { color: rgba(243,237,226,.45); }
.form input:focus { outline: none; border-bottom-color: var(--on-deep); }
.form input:focus-visible { outline: 2px solid var(--focus-deep); outline-offset: 4px; }
.reserve { justify-self: start; margin-top: .6rem; padding: .95rem 2.2rem; border: 1px solid var(--on-deep); background: var(--on-deep); color: var(--deep); font: 500 1rem/1.2 var(--text); border-radius: 0; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.reserve:hover { background: transparent; color: var(--on-deep); }
.reserve:active { opacity: .9; }
.invite :focus-visible { outline-color: var(--focus-deep); }
.invite .small { font-size: .9375rem; }
.invite .consent a { color: var(--on-deep); text-decoration-color: var(--deep-line); }
.thanks { display: grid; gap: .6rem; }
.source-ask { display: grid; gap: .5rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--deep-line); }
.source-ask-q { font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em; color: var(--on-deep-2); margin: 0; }
.source-ask-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.source-ask-option {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em;
  color: var(--on-deep); background: transparent;
  border: 1px solid var(--deep-line); border-radius: 999px;
  padding: .38em .85em; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.source-ask-option:hover { background: rgba(243, 237, 226, .08); border-color: var(--on-deep-2); }
.source-ask-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.thanks h3 { font-size: var(--h3); }

footer { padding-block: 3rem 3.5rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9375rem; display: grid; gap: 1.5rem; }
footer .top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; }
footer .sign { font: 300 var(--h3)/1.3 var(--display); color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
footer .legal { font-size: .8125rem; }

/* ── arrivals: hidden only when motion is allowed, and only below the first screen ── */
.motion .arrive { opacity: 0; translate: 0 14px; transition: opacity 800ms var(--ease), translate 800ms var(--ease); }
.motion .arrive.in { opacity: 1; translate: 0 0; }
.motion .photo.arrive { translate: 0 0; }
.motion .photo.arrive img { scale: 1.05; transition: scale 1600ms cubic-bezier(.2, 0, 0, 1); }
.motion .photo.arrive.in img { scale: 1; }
.motion .say { opacity: 0; }
.motion .hero > img { filter: brightness(var(--hero-dim)) blur(10px) saturate(.75); scale: 1.03; }
.motion.lifted .say { opacity: 1; transition: opacity 1000ms var(--ease) 450ms; }
.motion.lifted .hero > img { filter: brightness(var(--hero-dim)) blur(0) saturate(1); scale: 1; transition: filter 2000ms cubic-bezier(.2, 0, 0, 1), scale 2200ms cubic-bezier(.2, 0, 0, 1); }
.icon.draw * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .arrive .icon.draw * { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease) 200ms; }
.motion .arrive.in .icon.draw * { stroke-dashoffset: 0; }

/* ── round 13: no hard lines anywhere; space and tone do the separating ── */
.rows li { border-top: 0; padding-block: 1.2rem; }
.bar { border-bottom: 0; }
footer { border-top: 0; padding-top: 5rem; }
/* round 16 phone pass: the footer was the only left-aligned block on a centred page; sentences break where they end */
footer { justify-items: center; text-align: center; }
footer .top { flex-direction: column; align-items: center; gap: 1.2rem; }
footer nav { justify-content: center; }
.brk { display: block; }
/* round 17 — privacy as three separate facts */
.facts3 { list-style: none; margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; max-width: 64rem; }
.facts3 li { display: grid; justify-items: center; align-content: start; text-align: center; gap: .7rem; border: 0; padding: 0; }
.facts3 .icon { width: 2.5rem; height: 2.5rem; }
.facts3 h3 { font: 400 var(--h3)/1.3 var(--display); }
.facts3 p { color: var(--ink-2); max-width: 24ch; }
@media (max-width: 760px) { .facts3 { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; } }
/* the sample reads as a morning message, not a quote */
.sample .when { font: 500 .75rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
/* what a member gets, in the dark section */
.gets { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .9rem; justify-items: start; }
.gets li { display: flex; gap: .8rem; align-items: center; color: var(--on-deep); }
.gets .icon { width: 1.6rem; height: 1.6rem; color: var(--on-deep-2); }
.invite-copy .gets { justify-self: center; }
.center { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.center h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -.012em; max-width: 24ch; }
.strip { aspect-ratio: 32 / 9; margin-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.strip img { object-position: 50% 58%; }
.plainlist { gap: 1.4rem; }
.plainlist p { font: 300 var(--h3)/1.45 var(--display); max-width: 34ch; text-wrap: balance; }
.morning { padding-block: var(--section); }
.sample { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 1.6rem; justify-items: center; }
.sample p { font: 300 clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem)/1.35 var(--display); max-width: 28ch; text-wrap: balance; }
.sample figcaption { color: var(--ink-2); font-size: .9375rem; max-width: 40ch; }
.letter blockquote { font: 300 clamp(1.45rem, 1.15rem + 1vw, 2.05rem)/1.5 var(--display); max-width: 30ch; text-wrap: balance; margin-top: .6rem; }
.letter blockquote p + p { margin-top: 1.2rem; }
.letter .sig { color: var(--ink-2); margin-top: .6rem; }
.letter .status { color: var(--ink-2); font-size: .9375rem; margin-top: 1.8rem; }
.qa { padding-block: var(--section) 0; }
.qa dl { margin: clamp(3rem, 2rem + 3vw, 5rem) auto 0; max-width: 46rem; display: grid; gap: 2.4rem; }
.qa dt { font: 400 var(--h3)/1.35 var(--display); }
.qa dd { margin: .35rem 0 0; color: var(--ink-2); }
.qa .again { margin-top: 4rem; }
/* questions, folded under the reserve button */
.asks { width: 100%; max-width: 26rem; margin-top: .4rem; }
.asks summary { list-style: none; cursor: pointer; display: inline-flex; gap: .6rem; align-items: baseline; font-size: .9375rem; color: var(--on-deep-2); text-decoration: underline; text-decoration-color: var(--deep-line); text-underline-offset: .28em; }
.asks summary::-webkit-details-marker { display: none; }
.asks summary::after { content: "+"; display: inline-block; text-decoration: none; transition: rotate 250ms var(--ease); }
.invite-copy .asks summary { display: flex; justify-content: center; }
.asks[open] summary::after { rotate: 45deg; }
.asks dl { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.asks dt { color: var(--on-deep); font-size: .9875rem; }
.asks dd { margin: .15rem 0 0; color: var(--on-deep-2); font-size: .9375rem; }
.invite-copy .asks { justify-self: center; text-align: left; }


@media (max-width: 860px) {
  .does .photo, .does-copy, .note-copy, .note .photo, .invite .photo, .invite-copy, .faq > div:first-child, .faq .list { grid-column: 1 / -1; }
  .does .photo { margin-inline: calc(-1 * var(--margin)); aspect-ratio: 4 / 3; }
  .kept .photo { aspect-ratio: 4 / 3; }
  .facts, .three { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .note .photo { grid-row: 1; }
  .note-copy { grid-row: 2; }
  .faq > div:first-child { margin-bottom: 2rem; }
  .invite .photo { min-height: 18rem; margin-inline: calc(-1 * var(--margin)); }
  .invite-copy { padding-block: 4.5rem 5.5rem; }
  .masthead .link { font-size: .875rem; }
}
@media (max-width: 380px) { .masthead .link { font-size: .8125rem; } .wordmark { letter-spacing: .18em; } }

/* ── round 18e: light / dark switch, for everyone (sun / moon, top right) ── */
.mast-r { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }
.theme { appearance: none; background: none; border: 0; padding: .35rem; margin: -.35rem; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font: 400 .95rem/1 var(--text); }
.icon.ti { width: 1.15rem; height: 1.15rem; stroke-width: 1.2; }
.theme .moon { display: none; }
/* in dark, the icon shows the moon and the word offers the way back */
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme .sun { display: none; }
  :root:not([data-theme]) .theme .moon { display: block; }
}
.theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hero .theme { color: #2A2723; }
@media (max-width: 380px) { .mast-r { gap: .7rem; } }

/* ── round 18f: sample versions ── */
.sample { margin-top: 0; }
.pattern { width: min(100%, 46rem); height: auto; overflow: visible; }
.pattern .b { fill: var(--ink-2); opacity: .28; }
.pattern .b.busy { opacity: .75; }
.pattern .hard { fill: var(--focus); }
.pattern .base { stroke: var(--rule); stroke-width: 1; }
.sv-b .key { display: flex; gap: 1.6rem; justify-content: center; font-size: .875rem; color: var(--ink-2); }
.sv-b .key span { display: inline-flex; align-items: center; gap: .5rem; }
.k-busy { width: .5rem; height: 1rem; background: var(--ink-2); opacity: .75; }
.k-hard { width: .6rem; height: .6rem; border-radius: 50%; background: var(--focus); }
.sv-b p { font: 300 clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem)/1.2 var(--display); letter-spacing: -.015em; }

/* Option B · Cinematic — every locked photo gets a whole screen of its own; the words follow, centred, in the quiet after it. */
.does, .note { display: flex; flex-direction: column; align-items: center; padding-block: 0 var(--section); }
.does .photo, .note .photo { width: auto; align-self: stretch; height: 100svh; aspect-ratio: auto; margin: 0 var(--bleed) clamp(4rem, 3rem + 5vw, 8rem); }
.note { flex-direction: column-reverse; }
.note .photo { margin-bottom: clamp(4rem, 3rem + 5vw, 8rem); }
.does-copy, .note-copy { max-width: 42rem; text-align: center; display: grid; justify-items: center; }
.does-copy h2 { max-width: 20ch; }
.rows { text-align: left; }
.strip { aspect-ratio: auto; height: 100svh; }
.invite .grid { display: block; padding-inline: 0; }
.invite .photo { height: 100svh; min-height: 0; margin: 0 var(--bleed); }
.invite-copy { max-width: 34rem; margin-inline: auto; justify-items: center; text-align: center; }
.invite-copy .reserve { justify-self: center; }
/* round 15: phone had no side margin here; small lines sat off-centre */
.invite-copy { padding-inline: var(--margin); box-sizing: content-box; }
.invite-copy p { margin-inline: auto; }
.form { justify-items: center; text-align: center; margin-inline: auto; }
.form input { text-align: center; }
.form .small { max-width: 36ch; margin-inline: auto; }
.asks { justify-self: center; margin-inline: auto; text-align: center; }
.asks dl { text-align: left; }
@media (max-width: 860px) { .does .photo, .note .photo, .strip, .invite .photo { height: 78svh; } }

/* ── round 18g: no hard edges. Every full-screen photo fades into what is above and below it. ── */
.does .photo, .strip, .invite .photo {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
/* the reserve section is the one dark ground: it now starts as the page and darkens under its photo */
.invite { background: linear-gradient(to bottom, var(--paper) 0, var(--deep) 60svh); }
@media (max-width: 860px) { .invite { background: linear-gradient(to bottom, var(--paper) 0, var(--deep) 50svh); } }

/* round 18h: fresh-eyes review applied (honesty, who it is for, what $480 buys) */
.invite-copy .places { color: var(--on-deep-2); margin-top: -.6rem; }

.gets li span { text-align: left; }
.asks summary { text-decoration: none; }
.asks summary span { text-decoration: underline; text-decoration-color: var(--deep-line); text-underline-offset: .28em; }

/* ── round 18j (operator picks): privacy photo as a thin strip; reserve = photo left, words right on a
   wide screen (phones keep the stacked, blended version); "Questions?" lower and larger; labels stay ink. ── */
.strip { height: auto; aspect-ratio: 32 / 9; margin-inline: 0; }
@media (max-width: 860px) { .strip { aspect-ratio: 4 / 3; height: auto; } }
@media (min-width: 861px) {
  .invite .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; padding-inline: var(--margin); align-items: stretch; }
  .invite .photo { grid-column: 1 / span 6; height: auto; min-height: 46rem; margin: 0 0 0 var(--bleed); }
  .invite-copy { grid-column: 8 / span 5; margin: 0; padding-inline: 0; justify-items: start; text-align: left; padding-block: var(--section); }
  .invite-copy .reserve, .asks, .form { justify-self: start; justify-items: start; text-align: left; margin-inline: 0; }
  .form input { text-align: left; }
  .invite-copy .asks summary { justify-content: flex-start; }
  .invite-copy .gets { justify-self: start; }
  .invite-copy p { margin-inline: 0; text-align: left; }
  .invite-copy .asks, .invite-copy .form .small { justify-self: start; margin-inline: 0; text-align: left; }
  /* the section still eases in and out of the page; the photo sits wholly inside the brown */
  .invite { background: linear-gradient(to bottom, var(--paper) 0, var(--deep) 9rem, var(--deep) calc(100% - 9rem), var(--paper) 100%); }
  .invite .grid { padding-block: 9rem; }
  .invite-copy { padding-block: 3rem; align-self: center; }
  /* the photo's right edge: framed like a print (round 18l) */
  .invite .photo { margin: clamp(3rem, 5vw, 5rem) 0 clamp(3rem, 5vw, 5rem) 0; min-height: 40rem; -webkit-mask-image: none; mask-image: none; }
}
.asks { margin-top: 2.4rem; }
.asks summary { font-size: 1.125rem; color: var(--on-deep); }

/* ── round 18k: the page's ground darkens as the reserve section arrives (scroll-linked), so there is no band,
   no line and no muddy fade; the footer lives on the brown, so the page never has to come back. ── */
/* golive: v28 darkened the ground with `background: color-mix(…var(--t)…)` on <body>.
   It looks the same, but the computed value is then an oklab() colour, and the
   contrast check (and anything else that reads a background) cannot parse it —
   it fell back to "near-black page" and called 27 dark-on-light nodes
   unreadable at 1.33:1. The ground is now a plain layer behind everything,
   faded by the same --t, so <body> keeps a normal rgb background. */
body { background: var(--paper); }  /* js/home.js paints the darkened ground over this as a plain rgb */
html body .invite { background: transparent; }
@media (min-width: 861px) { html body .invite .grid { padding-block: 4rem; } }
/* 2026-10-08: `#reserve` is the words column now, not the section (index.html says why: on a phone
   the section opens with a full-screen photo). On a wide screen that column starts exactly one grid
   padding below the section's top, so without this the "Reserve early access" link stopped 4rem
   lower than it always had (measured in CI: section top at -64). Stopping 4rem early puts the
   landing point back. KEEP EQUAL to the padding-block on the line above; scripts/verify-site.mjs
   ("Reserve link lands on the form") fails if the two drift apart. */
@media (min-width: 861px) { .invite-copy { scroll-margin-top: 4rem; } }
footer { color: var(--on-deep-2); }
footer .sign { color: var(--on-deep); }
footer .link { text-decoration-color: var(--deep-line); }
/* questions: under the button, quiet, with a down arrow that turns when open */
.form .asks { margin-top: .3rem; justify-self: start; }
.invite-copy .form .asks summary { justify-content: flex-start; align-items: center; gap: .55rem; font-size: 1rem; }
.asks summary::after { content: ""; width: .42em; height: .42em; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; rotate: 45deg; translate: 0 -.12em; transition: rotate 250ms var(--ease), translate 250ms var(--ease); }
.asks[open] summary::after { rotate: 225deg; translate: 0 .12em; }
.form .asks dl { max-width: 30rem; }
/* the fine print is fine print */
.invite .consent { font-size: .75rem; line-height: 1.5; opacity: .85; }
@media (max-width: 860px) { .form .asks { justify-self: center; } .invite-copy .form .asks summary { justify-content: center; } }

/* the founder note's words lighten with the ground, so they never go grey-on-grey */
.note blockquote { color: var(--ink); }
.note .label, .note .sig, .note .status { color: var(--ink-2); }
:root.ground-dark .note blockquote { color: var(--on-deep); }
:root.ground-dark .note .label, :root.ground-dark .note .sig, :root.ground-dark .note .status { color: var(--on-deep-2); }

/* round 18o: words rise in as each block arrives (headings, the sample line, the founder note) */
.motion .arrive .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.motion .arrive .w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1000ms var(--ease); }
.motion .arrive.in .w > span { transform: none; }

/* ── golive additions ─────────────────────────────────────────────────────────────── */
/* the site's CSP drops style="" attributes, so the draft's three inline spacings are classes */
.mt-1 { margin-top: 1rem; }
.mt-14 { margin-top: 1.4rem; }
.note { padding-block: var(--section); }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 30; padding: .6rem 1rem; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the form's working parts: the bot trap, the one status line, the human check */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 0; font-size: .9375rem; color: var(--on-deep); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--focus-deep); }
.form button[disabled] { opacity: .7; cursor: progress; }
.cf-turnstile { margin-top: .4rem; }
.thanks { color: var(--on-deep); }
.thanks p { color: var(--on-deep-2); }
.thanks:focus { outline: none; }

/* anything that moves, stops, for people who ask the system for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .bar, .cue, .theme { display: none !important; }
  .motion .arrive, .motion .say { opacity: 1 !important; translate: none !important; }
}

/* ── golive: words that follow the ground ────────────────────────────────────────────
   The reserve section and the footer have no ground of their own: they sit on the
   page, which darkens as they arrive (js/home.js). So their words are defined against
   that ground — ink while it is still light, the Linen set once it has darkened. The
   switch happens at the crossover, the one point where dark and light read equally
   well, and it is what stops the "grey on grey" half-screen v28 had.
   It also means every word on this page can be measured against a real colour: the
   site's contrast check reads the ground as a plain rgb and the words as what they
   are at that moment, instead of guessing. */
.invite, footer { --on-deep: var(--ink); --on-deep-2: var(--ink-2); --deep-line: var(--line); --deep: var(--paper); --focus-deep: var(--focus); }
:root.ground-dark .invite, :root.ground-dark footer {
  --on-deep: var(--deep-fg); --on-deep-2: var(--deep-fg-2); --deep-line: var(--deep-hairline);
  --deep: var(--deep-ground); --focus-deep: var(--deep-accent);
}

/* golive round 19: the questions live on /questions/ now. Opening them here grew the
   copy column, and the reserve photo is stretched to match it, so the photograph
   changed height when someone asked a question. A link cannot do that. */
.asks-link { margin-top: 2rem; font-size: 1.125rem; color: var(--on-deep); }
@media (min-width: 861px) { .invite-copy .asks-link { align-self: start; text-align: left; } }