/* Jo Gustafson - Spiritual Direction. One stylesheet for every page.
   Rule: ASCII only in this file. Colours are the named tokens below; change them here, nowhere else.
   Rooms: each section of the home page is a room with its own ground. The ground does the work; rules between rooms fade. */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* ---------- tokens: the light theme (paper, not screen) ---------- */
:root {
  --ground: #FAF6F1;          /* warm ivory */
  --ground-2: #F4EDEC;        /* the pause room: a slightly deeper wash */
  --ground-ember: #F8F0E3;    /* the "what changes" room: warm, a touch of ember light */
  --plum: #2E1F3F;            /* the dusk room and the dark theme ground */
  --plum-2: #3A2A4E;          /* raised surfaces inside the dusk room */
  --ink: #2A2131;
  --ink-soft: #4E4457;
  --muted: #6E6377;
  --rule: #E4DAD4;
  --accent: #6B4E9E;
  --accent-deep: #55397F;
  --accent-soft: #EEE6F5;
  --rose: #B4557C;
  --rose-soft: #F7E7EE;
  --ember: #C9A15C;           /* light only: never a button, never a block */
  --reed: #6B4E9E;
  --on-accent: #FFFFFF;

  /* the dusk room's own type colours */
  --dusk-ink: #F3ECE4;
  --dusk-soft: #D6CBDD;
  --dusk-muted: #B3A6BE;
  --dusk-rule: rgba(243, 236, 228, 0.16);

  /* the dawn: pale violet high, warm blush low */
  --dawn-top: #ECE3F3;
  --dawn-mid: #F9F3EE;
  --dawn-low: #F8E4DB;
  --window: rgba(255, 250, 240, 0.98);
  --window-2: rgba(201, 161, 92, 0.14);
  --ember-glow: rgba(201, 161, 92, 0.18);
  --blush-glow: rgba(180, 85, 124, 0.07);
  --violet-glow: rgba(107, 78, 158, 0.07);
  --water: rgba(107, 78, 158, 0.22);
  --shadow: rgba(46, 31, 63, 0.18);
  --portrait-shadow: 0 1px 2px rgba(46,31,63,0.08), 0 26px 48px -28px rgba(46,31,63,0.5);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 38rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --space-room: clamp(5rem, 12vw, 8.5rem);

  --rainbow: linear-gradient(90deg, #D9646B 0%, #E39A5C 17%, #DDC061 34%, #6FB08A 51%, #5D93C9 68%, #7A6BC2 85%, #B06CB5 100%);
}

/* ---------- tokens: the dark theme (dusk everywhere) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #221A2C;
    --ground-2: #1D1626;
    --ground-ember: #261C2A;
    --plum: #150F1C;
    --plum-2: #211828;
    --ink: #EFE8F0;
    --ink-soft: #D2C7DA;
    --muted: #AB9FB6;
    --rule: #3B2F47;
    --accent: #B69BE0;
    --accent-deep: #CBB6EC;
    --accent-soft: #2F2440;
    --rose: #E29AB8;
    --rose-soft: #35202B;
    --ember: #D8B370;
    --reed: #B69BE0;
    --on-accent: #1A1322;
    --dusk-ink: #F3ECE4;
    --dusk-soft: #D6CBDD;
    --dusk-muted: #A99CB5;
    --dusk-rule: rgba(243, 236, 228, 0.14);
    --dawn-top: #1C1427;
    --dawn-mid: #221A2C;
    --dawn-low: #2C1D2E;
    --window: rgba(182, 155, 224, 0.24);
    --window-2: rgba(216, 179, 112, 0.08);
    --ember-glow: rgba(216, 179, 112, 0.10);
    --blush-glow: rgba(226, 154, 184, 0.06);
    --violet-glow: rgba(182, 155, 224, 0.07);
    --water: rgba(182, 155, 224, 0.22);
    --shadow: rgba(0, 0, 0, 0.45);
    --portrait-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 26px 48px -28px rgba(0,0,0,0.8);
  }
}
:root[data-theme="dark"] {
  --ground: #221A2C;
  --ground-2: #1D1626;
  --ground-ember: #261C2A;
  --plum: #150F1C;
  --plum-2: #211828;
  --ink: #EFE8F0;
  --ink-soft: #D2C7DA;
  --muted: #AB9FB6;
  --rule: #3B2F47;
  --accent: #B69BE0;
  --accent-deep: #CBB6EC;
  --accent-soft: #2F2440;
  --rose: #E29AB8;
  --rose-soft: #35202B;
  --ember: #D8B370;
  --reed: #B69BE0;
  --on-accent: #1A1322;
  --dusk-ink: #F3ECE4;
  --dusk-soft: #D6CBDD;
  --dusk-muted: #A99CB5;
  --dusk-rule: rgba(243, 236, 228, 0.14);
  --dawn-top: #1C1427;
  --dawn-mid: #221A2C;
  --dawn-low: #2C1D2E;
  --window: rgba(182, 155, 224, 0.24);
  --window-2: rgba(216, 179, 112, 0.08);
  --ember-glow: rgba(216, 179, 112, 0.10);
  --blush-glow: rgba(226, 154, 184, 0.06);
  --violet-glow: rgba(182, 155, 224, 0.07);
  --water: rgba(182, 155, 224, 0.22);
  --shadow: rgba(0, 0, 0, 0.45);
  --portrait-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 26px 48px -28px rgba(0,0,0,0.8);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* paper grain: one tiny SVG tile, fixed so it never shimmers on scroll, under 1 KB */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { opacity: 0.06; } }
:root[data-theme="dark"] .grain { opacity: 0.06; }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 5vw, 2.9rem); }
h3 { font-size: clamp(1.5rem, 3.2vw, 1.85rem); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }
strong { font-weight: 600; }
em, i { font-style: italic; }
button { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.room--dusk :focus-visible, footer :focus-visible { outline-color: var(--dusk-ink); }

.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; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; border-radius: 4px; z-index: 60;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.stack > h2 { margin-bottom: 0.35rem; }
.center { align-items: center; text-align: center; }

/* ---------- rooms ---------- */
.room { position: relative; padding-block: var(--space-room); background: var(--ground); }
.room--light {
  background:
    radial-gradient(55% 40% at 8% 0%, var(--violet-glow) 0%, transparent 70%),
    radial-gradient(50% 45% at 100% 100%, var(--blush-glow) 0%, transparent 70%),
    var(--ground);
}
.room--pause {
  background:
    radial-gradient(60% 50% at 50% 55%, var(--window-2) 0%, transparent 70%),
    var(--ground-2);
}
.room--ember {
  background:
    radial-gradient(70% 55% at 85% 12%, var(--ember-glow) 0%, transparent 70%),
    var(--ground-ember);
}
.room--dusk { background: var(--plum); color: var(--dusk-ink); }
.room--dusk h2, .room--dusk h3 { color: var(--dusk-ink); }
.room--dusk a { color: var(--dusk-ink); }
.room--dusk a:hover { color: #FFFFFF; }
.room--dusk .note, .room--dusk .muted { color: var(--dusk-muted); }

/* a soft edge between two rooms that share a ground: a hairline that fades at both ends */
.edge { position: relative; }
.edge::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(28rem, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent);
}

/* an ember hairline under a heading, used sparingly: light, not decoration */
.h-ember { position: relative; padding-bottom: 0.7rem; }
.h-ember::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
}
.center .h-ember::after { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--ember), transparent); width: 4rem; }

/* ---------- arrival (the hero) ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 7vh, 5rem) 3.5rem;
  isolation: isolate;
  background:
    radial-gradient(42% 34% at 58% 34%, var(--window) 0%, transparent 72%),
    radial-gradient(40% 30% at 36% 62%, var(--window-2) 0%, transparent 70%),
    linear-gradient(180deg, var(--dawn-top) 0%, var(--dawn-mid) 48%, var(--dawn-low) 100%);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.hero .rainbow { width: 5.5rem; height: 3px; margin-block: -0.4rem 0.2rem; }

/* (the old hero reed rules were replaced in V4; see the V4 block at the end) */

/* the name, present rather than diminished */
.mark { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.mark .mark-over { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mark .mark-name { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 1.85rem); font-weight: 500; color: var(--ink); letter-spacing: 0.01em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 4.4rem);
  font-weight: 500;
  max-width: 16ch;
}
.hero .lede {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 32ch;
  text-wrap: balance;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  min-height: 44px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.cta:hover { background: var(--accent-deep); color: var(--on-accent); }
.cta:active { transform: translateY(1px); }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.quiet-link { font-size: 1rem; color: var(--muted); }
.quiet-link:hover { color: var(--accent-deep); }

.welcome {
  margin-top: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  color: var(--muted);
  font-size: 1rem;
  max-width: 36ch;
  text-wrap: balance;
}
.welcome .puzzled { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.rainbow { width: 9rem; height: 4px; border-radius: 999px; background: var(--rainbow); }

/* ---------- ornaments: the reed's family, one per room ---------- */
.orn { display: block; width: 9rem; height: auto; overflow: visible; margin-bottom: 0.4rem; }
.center .orn { margin-inline: auto; }
.orn .ln { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.orn .ln-soft { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; opacity: 0.55; }
.orn .em { fill: var(--ember); }
.orn .ac { fill: var(--accent); opacity: 0.85; }
.orn .em-ln { fill: none; stroke: var(--ember); stroke-width: 1.2; stroke-linecap: round; }
.orn .hair { fill: none; stroke: var(--rule); stroke-width: 1; }
.room--dusk .orn .ln, .room--dusk .orn .ln-soft { stroke: var(--dusk-soft); }
.room--dusk .orn .hair { stroke: var(--dusk-rule); }

/* anything marked .reveal eases in the first time it is seen; without JS, everything simply shows */
html.js .reveal { opacity: 0; transform: translateY(0.75rem); }
html.js .reveal.seen { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .reveal.seen.d1 { transition-delay: 0.12s; }
html.js .reveal.seen.d2 { transition-delay: 0.24s; }
html.js .reveal.seen.d3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* ripples: a word said out loud, landing on water */
.orn-ripples .rip { fill: none; stroke: var(--accent); stroke-width: 1.2; transform-origin: 60px 42px; opacity: 0.5; }
.orn-ripples .rip-2 { opacity: 0.35; }
.orn-ripples .rip-3 { opacity: 0.22; }
@media (prefers-reduced-motion: no-preference) {
  .orn-ripples.seen .rip { animation: ripple 7s ease-out infinite; }
  .orn-ripples.seen .rip-2 { animation-delay: 1.4s; }
  .orn-ripples.seen .rip-3 { animation-delay: 2.8s; }
}
@keyframes ripple { 0% { transform: scale(0.55); opacity: 0.6; } 70% { opacity: 0.12; } 100% { transform: scale(1.25); opacity: 0; } }

/* seeds: a reed head letting go, the seed drifting off on its own */
.orn-seeds .seed { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .orn-seeds.seen .seed { animation: drift 9s ease-in-out infinite; }
  .orn-seeds.seen .seed-2 { animation-delay: 3s; }
  .orn-seeds.seen .seed-3 { animation-delay: 6s; }
}
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translate(26px, -22px); opacity: 0; } }

/* dawn: a low sun on a still horizon */
.orn-dawn .sun { fill: var(--ember); opacity: 0.4; }
.orn-dawn .glow { fill: var(--ember); opacity: 0.14; }
@media (prefers-reduced-motion: no-preference) {
  .orn-dawn.seen .glow { animation: glow 6s ease-in-out infinite; }
}
@keyframes glow { 0%, 100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.22; transform: scale(1.12); } }
.orn-dawn .glow { transform-origin: 60px 46px; }

/* the door: an arch with light in it */
.orn-door .arch { fill: none; stroke: var(--dusk-soft); stroke-width: 1.4; stroke-linecap: round; }
.orn-door .inner { fill: var(--ember); opacity: 0.22; }
@media (prefers-reduced-motion: no-preference) {
  .orn-door.seen .inner { animation: doorlight 7s ease-in-out infinite; }
}
@keyframes doorlight { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.32; } }

/* small marks beside the three movements */
.ic { width: 2.25rem; height: 2.25rem; flex: none; overflow: visible; }
.ic .ln { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic .em { fill: var(--ember); opacity: 0.75; }
.ic .halo { fill: none; stroke: var(--ember); stroke-width: 1; opacity: 0.6; }

/* ---------- the pause ---------- */
.room--pause .wrap { gap: 1.6rem; }
.h-small { font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-style: italic; font-weight: 400; color: var(--ink-soft); }
.breath-intro { color: var(--muted); font-size: 1.05rem; max-width: 34ch; }
.breath { width: 13rem; height: 13rem; display: grid; place-items: center; margin-block: 0.25rem; position: relative; }
.breath > * { grid-area: 1 / 1; }
.breath-ring { width: 10.5rem; height: 10.5rem; border-radius: 50%; border: 1px solid var(--ember); opacity: 0.5; }
.breath-ripple { width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid var(--ember); opacity: 0; }
.breath-circle {
  width: 7rem; height: 7rem; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.75) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, var(--accent-soft) 0%, var(--rose-soft) 60%, var(--ground) 100%);
  box-shadow: 0 0 0 1px var(--ember), 0 24px 44px -26px var(--shadow), 0 0 40px -10px var(--window-2);
  transform: scale(1);
  transition: transform 0.6s ease;
}
.room--pause .breath-circle { background-color: var(--ground-2); }
.breath.is-breathing .breath-circle { animation: breathe 12s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
.breath.is-breathing .breath-ripple { animation: breathe-ripple 12s ease-out infinite; }
@keyframes breathe-ripple {
  0%   { transform: scale(1); opacity: 0.45; }
  40%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.breath-phase { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--muted); min-height: 1.4em; margin-top: -0.9rem; opacity: 0; transition: opacity 0.9s ease; }
.breath-phase.is-on { opacity: 1; }
@keyframes breathe {
  0%    { transform: scale(1); }
  33.3% { transform: scale(1.42); }   /* grow, 4 s */
  50%   { transform: scale(1.42); }   /* hold, 2 s */
  100%  { transform: scale(1); }      /* release, 6 s */
}
@media (prefers-reduced-motion: reduce) { .breath.is-breathing .breath-circle, .breath.is-breathing .breath-ripple { animation: none; } }
.breath-count { font-family: var(--serif); font-size: 1.25rem; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.6em; margin-top: -0.75rem; }
.breath-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn-quiet {
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
  border-radius: 999px; padding: 0.7rem 1.4rem; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 1rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-quiet:hover { background: var(--accent); color: var(--on-accent); }
.breath-end { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.6rem); color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.breath-end a { font-family: var(--sans); font-size: 1rem; }
.breath-end.is-in { animation: rise 0.9s ease-out both; }
@media (prefers-reduced-motion: reduce) { .breath-end.is-in { animation: none; } }

/* ---------- what people bring ---------- */
.opener { color: var(--muted); font-size: 1rem; }
.said { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.said li, .voice-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 3.6vw, 1.85rem);
  line-height: 1.32;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.said li { padding-left: 1.1rem; border-left: 2px solid var(--rule); }
.said li:nth-child(2n) { border-color: var(--rose-soft); }
.after { color: var(--muted); margin-top: 0.4rem; }

/* ---------- what changes ---------- */
.moves { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; width: 100%; }
.moves li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; }
.moves .ic { margin-top: 0.2rem; }
.moves h3 { margin-bottom: 0.4rem; }
.moves p { color: var(--ink-soft); max-width: 60ch; }
.reed-line { color: var(--muted); font-size: 1.05rem; max-width: 58ch; font-style: italic; font-family: var(--serif); font-size: 1.25rem; margin-top: 1rem; }
.small-line { color: var(--muted); font-size: 1.05rem; max-width: 58ch; }
.quote {
  width: 100%; margin: 2.5rem 0 0; padding-block: 2.5rem; text-align: center;
  display: flex; flex-direction: column; gap: 0.75rem; align-items: center;
}
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 4.6vw, 2.4rem); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.quote cite { font-style: normal; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.quote::before { content: ""; width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); margin-bottom: 1rem; }

/* ---------- what it is: lead and expanders ---------- */
.serif-lead { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.6rem); line-height: 1.45; color: var(--ink-soft); }
details { width: 100%; border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px;
}
summary:hover { color: var(--accent-deep); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  display: grid; place-items: center;
  transition: transform 0.24s ease, background-color 0.18s ease, color 0.18s ease;
}
summary:hover::after { background: var(--accent); color: var(--on-accent); }
details[open] summary::after { content: "\2013"; transform: rotate(180deg); }
details .body { padding: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; color: var(--ink-soft); }
details .body p { max-width: 62ch; }
.room--dusk details, .room--dusk details:last-of-type { border-color: var(--dusk-rule); }
.room--dusk summary { color: var(--dusk-ink); }
.room--dusk summary::after { color: var(--dusk-soft); border-color: var(--dusk-soft); }
.room--dusk details .body { color: var(--dusk-soft); }

/* ---------- Jo ---------- */
.jo-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; width: 100%; }
@media (min-width: 40rem) { .jo-grid { grid-template-columns: 12rem 1fr; gap: 2.75rem; } }
.portrait {
  width: 12rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: 6rem 6rem 1rem 1rem;
  box-shadow: var(--portrait-shadow);
}
.jo-text { display: flex; flex-direction: column; gap: 1rem; }
.credential { color: var(--muted); font-size: 1rem; letter-spacing: 0.02em; }
.jo-text .voice-line { font-size: clamp(1.3rem, 3vw, 1.55rem); }

/* her voice: a small player with a graceful "recording coming" state */
.voice { width: 100%; margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--rule); border-radius: 1rem; background: var(--ground); }
@media (min-width: 40rem) { .voice { gap: 1.5rem; padding: 1.5rem 1.75rem; } }
.voice-player { display: flex; align-items: center; gap: 1rem; }
.voice-btn {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  display: grid; place-items: center; cursor: pointer; flex: none; padding: 0;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.voice-btn:hover:not([disabled]) { background: var(--accent); color: var(--on-accent); }
.voice-btn[disabled] { opacity: 0.45; cursor: default; }
.voice-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.voice-btn .pause-icon { display: none; }
.voice-btn[aria-pressed="true"] .play-icon { display: none; }
.voice-btn[aria-pressed="true"] .pause-icon { display: block; }
.voice-label { font-weight: 600; font-size: 1rem; }
.voice-state { color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.voice-transcript { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--ink-soft); max-width: 52ch; border-top: 1px solid var(--rule); padding-top: 1rem; }
.voice-transcript small { display: block; font-family: var(--sans); font-style: normal; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }

/* ---------- the door (dusk room) ---------- */
.room--dusk .cta { background: var(--dusk-ink); color: var(--plum); }
.room--dusk .cta:hover { background: #FFFFFF; color: var(--plum); }
.room--dusk .lede-dusk { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.55rem); line-height: 1.45; color: var(--dusk-soft); max-width: 40ch; }
.room--dusk .note { font-size: 1rem; }
.door-block { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; width: 100%; }
.money { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin-top: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--dusk-rule); }
.money p { max-width: 58ch; color: var(--dusk-soft); }
.doors { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: 100%; }
.doors a {
  display: block; text-align: center; padding: 1.1rem 0.5rem 0.9rem; border-radius: 0.9rem; text-decoration: none;
  background: var(--plum-2); border: 1px solid var(--dusk-rule); color: var(--dusk-ink);
  transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.doors a:hover { border-color: var(--ember); transform: translateY(-2px); color: var(--dusk-ink); }
.doors .amount { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; color: var(--dusk-ink); }
.doors small { display: block; margin-top: 0.4rem; color: var(--dusk-muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.doors .go { display: block; margin-top: 0.6rem; font-size: 0.9rem; color: var(--ember); }
.money h3 { font-size: 1.5rem; }
.money { margin-top: 2rem; }
.fourth { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--dusk-ink); }

.paid-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.pill {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 0.7rem 1.2rem; border-radius: 999px; min-height: 44px;
  border: 1.5px solid var(--accent); color: var(--accent);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.pill:hover { background: var(--accent); color: var(--on-accent); }
.room--dusk .pill { border-color: var(--dusk-soft); color: var(--dusk-ink); }
.room--dusk .pill:hover { background: var(--dusk-ink); color: var(--plum); }

/* offline: booking lives on Cal.com and cannot work offline */
.offline-note { display: none; color: var(--rose); font-size: 1rem; }
.room--dusk .offline-note { color: #F2C4D6; }
body.is-offline .offline-note { display: block; }
body.is-offline .book { opacity: 0.55; pointer-events: none; }

/* ---------- footer (dusk) ---------- */
footer { background: var(--plum); color: var(--dusk-muted); padding-block: 3rem 4rem; font-size: 0.95rem; border-top: 1px solid var(--dusk-rule); }
.room--dusk + footer { border-top-color: var(--dusk-rule); }
footer .wrap { display: flex; flex-direction: column; gap: 0.9rem; }
footer a { color: var(--dusk-soft); }
footer a:hover { color: #FFFFFF; }
footer .rainbow { width: 4rem; height: 3px; opacity: 0.85; }
footer .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; margin: 0; padding: 0; }
footer .quiet { font-size: 0.85rem; }

/* ---------- the other pages ---------- */
.page-head { padding-block: 1.5rem; }
.page-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.35rem; }
.home:hover { color: var(--accent-deep); }
.home svg { width: 26px; height: 40px; overflow: visible; }
.home .home-text { display: flex; flex-direction: column; line-height: 1.15; }
.home .home-sub { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.home .blade { fill: none; stroke: var(--reed); stroke-width: 1.5; stroke-linecap: round; opacity: 0.85; }
.home .stem { fill: none; stroke: var(--reed); stroke-width: 2.4; stroke-linecap: round; }
.home .head { fill: var(--reed); }
.page-body { padding-block: clamp(2rem, 6vw, 4rem) var(--space-room); display: flex; flex-direction: column; gap: 1.25rem; }
.page-body h1 { font-size: clamp(2.3rem, 6vw, 3.2rem); margin-bottom: 0.5rem; }
.page-body h2 { font-size: clamp(1.6rem, 3.6vw, 2rem); margin-top: 1.75rem; }
.page-body h3 { font-size: 1.3rem; margin-top: 0.5rem; }
.page-body p, .page-body li { max-width: 62ch; color: var(--ink-soft); }
.page-body ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.page-body .serif-lead { color: var(--ink-soft); }
.page-body .cta-block { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.draft-note {
  font-size: 0.95rem; color: var(--muted); border: 1px dashed var(--rule); border-radius: 0.6rem; padding: 0.6rem 0.9rem;
  max-width: 62ch;
}
.sig { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 40rem) { .sig { grid-template-columns: 1fr 1fr; } }
.sig div { border-top: 1px solid var(--ink); padding-top: 0.5rem; font-size: 0.95rem; color: var(--muted); }
.plain { font-size: 1rem; color: var(--muted); }
.business .page-body h1 { font-size: clamp(2rem, 5vw, 2.7rem); }

/* ---------- the booking sheet ---------- */
.book-sheet {
  border: 0; padding: 0; margin: auto; width: min(34rem, calc(100vw - 2rem)); max-height: min(90svh, 46rem);
  background: var(--ground); color: var(--ink); border-radius: 1.25rem;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5);
}
.book-sheet::backdrop { background: rgba(46, 31, 63, 0.55); backdrop-filter: blur(2px); }
.book-inner { padding: clamp(1.25rem, 4vw, 2rem); display: flex; flex-direction: column; gap: 1rem; }
.book-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.book-head h2 { font-size: clamp(1.6rem, 4vw, 2rem); }
.book-close { background: transparent; border: 1.5px solid var(--rule); color: var(--muted); width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; flex: none; }
.book-close:hover { border-color: var(--accent); color: var(--accent); }
.book-preview { font-size: 0.9rem; color: var(--muted); border: 1px dashed var(--rule); border-radius: 0.6rem; padding: 0.55rem 0.8rem; }
.book-step { display: flex; flex-direction: column; gap: 0.75rem; }
.book-step h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; color: var(--ink-soft); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.cal .dow { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 0.25rem; }
.cal button { aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 0.95rem; cursor: default; }
.cal button.free { color: var(--ink); border-color: var(--rule); background: var(--accent-soft); cursor: pointer; }
.cal button.free:hover, .cal button.picked { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cal .blank { aspect-ratio: 1; }
.cal-month { font-family: var(--serif); font-size: 1.25rem; }
.slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slots button { border: 1.5px solid var(--accent); background: transparent; color: var(--accent); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; font-size: 0.95rem; min-height: 40px; }
.slots button:hover, .slots button.picked { background: var(--accent); color: var(--on-accent); }
.book-form { display: grid; gap: 0.75rem; }
.book-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.book-form input { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--ground); color: var(--ink); }
.book-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.book-summary { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-soft); }
.book-done { display: flex; flex-direction: column; gap: 0.75rem; }
.book-done h3 { font-size: 1.8rem; }
.book-note { font-size: 0.9rem; color: var(--muted); }
.book-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* ---------- print ---------- */
@media print {
  .grain, .skip, footer .rainbow, .page-head svg, .offline-note, body::before { display: none !important; }
  html, body { background: #FFFFFF; color: #000000; }
  body { font-size: 11pt; line-height: 1.45; }
  .page-body p, .page-body li, .page-body .serif-lead, .draft-note { color: #000000; max-width: none; }
  .page-body h1, .page-body h2, .page-body h3 { color: #000000; page-break-after: avoid; }
  .page-body h2 { margin-top: 0.9rem; font-size: 1.5rem; }
  .page-body { gap: 0.8rem; }
  .sig { page-break-inside: avoid; }
  a { color: #000000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  footer { background: #FFFFFF; color: #000000; border-top: 1px solid #000000; font-size: 9pt; }
  footer a { color: #000000; }
  footer .links, footer p:nth-last-of-type(-n+2) { display: none; }
  footer { padding-block: 1rem 0; margin-top: 1.5rem; }
  .sig div { border-top-color: #000000; color: #000000; }
  .draft-note { border-color: #000000; }
  .page-body { padding-block: 0; }
  .cta-block, .screen-only { display: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   V4 (15 Sept 2026): the hero scene with five versions, the symbol family,
   the bowing-reed expander, the reed pull-out, hours in two time zones.
   Everything below overrides what is above it where they meet.
   ===================================================================== */

/* ---------- ink: deep plum, never black ---------- */
:root {
  --ink: #2A1F36;
  --ink-soft: #3E3149;
  --muted: #6F6479;
  --dawn-low: #F7E8E4;         /* blush, not yellow, at the foot of the hero */
  --ground-ember: #F8EFEA;     /* the "what changes" room: warm ivory with a blush */
  --ember-glow: rgba(201, 161, 92, 0.11);
  --window-2: rgba(180, 85, 124, 0.10);
  --sun-core: rgba(243, 217, 168, 0.85);
  --sun-mid: rgba(240, 201, 192, 0.42);
  --sun-edge: rgba(233, 221, 242, 0);
  --mist: rgba(255, 255, 255, 0.9);
  --mist-edge: rgba(255, 255, 255, 0);
  --reed: #7C5BB5;
  --reed-soft: rgba(124, 91, 181, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EFE8F0; --ink-soft: #D2C7DA; --muted: #AB9FB6;
    --dawn-low: #2C1D2E; --ground-ember: #261C2A;
    --sun-core: rgba(216, 179, 112, 0.30); --sun-mid: rgba(226, 154, 184, 0.12); --sun-edge: rgba(0,0,0,0);
    --mist: rgba(182, 155, 224, 0.16); --mist-edge: rgba(182, 155, 224, 0);
    --reed: #B69BE0; --reed-soft: rgba(182, 155, 224, 0.30);
  }
}
:root[data-theme="dark"] {
  --ink: #EFE8F0; --ink-soft: #D2C7DA; --muted: #AB9FB6;
  --dawn-low: #2C1D2E; --ground-ember: #261C2A;
  --sun-core: rgba(216, 179, 112, 0.30); --sun-mid: rgba(226, 154, 184, 0.12); --sun-edge: rgba(0,0,0,0);
  --mist: rgba(182, 155, 224, 0.16); --mist-edge: rgba(182, 155, 224, 0);
  --reed: #B69BE0; --reed-soft: rgba(182, 155, 224, 0.30);
}

/* ---------- the hero scene ---------- */
.hero {
  background:
    radial-gradient(46% 36% at 50% 30%, var(--window) 0%, transparent 72%),
    radial-gradient(40% 30% at 40% 70%, var(--window-2) 0%, transparent 70%),
    linear-gradient(180deg, var(--dawn-top) 0%, var(--dawn-mid) 50%, var(--dawn-low) 100%);
  padding-block: clamp(2rem, 6vh, 4rem) 5rem;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.hero-words { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; text-align: center; }

.scene { width: min(100%, 24.5rem); height: auto; overflow: visible; display: block; margin-bottom: 0.1rem; }
.scene .stem, .scene .bstem { fill: none; stroke: var(--reed); stroke-linecap: round; }
.scene .stem { stroke-width: 2.3; }
.scene .spike { fill: none; stroke: var(--reed); stroke-width: 1.3; stroke-linecap: round; opacity: 0.8; }
.scene .head { fill: var(--reed); }
.scene .head-light { fill: url(#reedHead); opacity: 0.85; }
.scene .cast { fill: var(--shadow); opacity: 0.35; }
.scene .water { fill: none; stroke: var(--water); stroke-width: 1; stroke-linecap: round; }
.scene .ripple { fill: none; stroke: var(--reed); stroke-width: 1; stroke-linecap: round; opacity: 0.22; }
.scene .bstem { stroke-width: 2; opacity: 0.32; }
.scene .bhead { fill: var(--reed); opacity: 0.32; }
.scene .lay-mirror { opacity: 0.45; }
.scene .lay-mirror .head { fill: var(--reed); }

.scene .sway { transform-origin: 200px 300px; animation: sway 10s ease-in-out infinite; }
.scene .sway-soft { transform-origin: 200px 300px; animation: sway 13s ease-in-out -4s infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.6deg); }
}
.scene .lay-mirror .sway { animation-name: sway-mirror; }
@keyframes sway-mirror {
  0%, 100% { transform: rotate(2.2deg); }
  50%      { transform: rotate(-2.6deg); }
}

/* which layers each version shows */
.lay { transition: opacity 0.9s ease; }
.hero .lay-sun, .hero .lay-bank, .hero .lay-mirror { opacity: 0; }
.hero[data-hero="bank"] .lay-bank { opacity: 1; }
.hero[data-hero="dawn"] .lay-bank { opacity: 1; }
.hero[data-hero="dawn"] .lay-sun { opacity: 1; }
.hero[data-hero="beside"] .lay-bank { opacity: 1; }
.hero[data-hero="sun"] .lay-sun { opacity: 1; }
.hero[data-hero="sun"] .lay-mirror { opacity: 0.45; }
.hero[data-hero="water"] .lay-mirror { opacity: 0.45; }

/* version 3: the reed beside the words, on wide screens only */
@media (min-width: 60rem) {
  .hero[data-hero="beside"] .hero-inner { flex-direction: row; align-items: center; justify-content: center; gap: 3rem; max-width: 72rem; }
  .hero[data-hero="beside"] .scene { width: 31rem; flex: none; margin-bottom: 0; align-self: flex-end; }
  .hero[data-hero="beside"] .hero-words { align-items: flex-start; text-align: left; max-width: 36rem; }
  .hero[data-hero="beside"] .mark { align-items: flex-start; }
  .hero[data-hero="beside"] .cta-row { align-items: flex-start; }
  .hero[data-hero="beside"] .welcome { align-items: flex-start; text-align: left; }
  .hero[data-hero="beside"] h1 { font-size: clamp(3rem, 5vw, 4.6rem); max-width: 15ch; }
}

/* on load the reed draws itself, then the words rise in order */
.scene .stem { stroke-dasharray: 240; stroke-dashoffset: 0; }
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .intro .lay-reed .stem { animation: draw 1.7s cubic-bezier(0.4, 0, 0.2, 1) both; }
  .intro .lay-reed .head, .intro .lay-reed .head-light, .intro .lay-reed .spike, .intro .lay-reed .cast { animation: appear 0.7s ease-out 1.2s both; }
  .intro .lay-water, .intro .lay-bank, .intro .lay-mirror, .intro .lay-sun { animation: appear-lay 1.6s ease-out 1.1s both; }
  .intro .rise { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .intro .rise-1 { animation-delay: 1.0s; }
  .intro .rise-2 { animation-delay: 1.12s; }
  .intro .rise-3 { animation-delay: 1.24s; }
  .intro .rise-4 { animation-delay: 1.36s; }
  .intro .rise-5 { animation-delay: 1.48s; }
  .intro .rise-6 { animation-delay: 1.6s; }
}
@keyframes draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: var(--o, 1); } }
@keyframes appear-lay { from { opacity: 0; } }
.scene .head-light { --o: 0.85; }
.scene .spike { --o: 0.8; }
.scene .cast { --o: 0.35; }
@keyframes rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scene .sway, .scene .sway-soft { animation: none; }
  .intro .lay-reed .stem, .intro .lay-reed .head, .intro .rise, .intro .lay-water, .intro .lay-bank, .intro .lay-mirror, .intro .lay-sun { animation: none; }
}
/* once the intro has played, a version switch must not replay it */
.hero.settled .lay-reed .stem, .hero.settled .lay-reed .head, .hero.settled .lay-reed .head-light, .hero.settled .lay-reed .spike, .hero.settled .lay-reed .cast,
.hero.settled .lay-water, .hero.settled .lay-bank, .hero.settled .lay-mirror, .hero.settled .lay-sun, .hero.settled .rise { animation: none; }

/* the review arrows: at the edges, quiet, gone after a few seconds, back on any touch or key */
.hero-pick { position: absolute; inset: 0; pointer-events: none; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255,255,255,0.55);
  color: var(--accent); cursor: pointer; padding: 0; display: grid; place-items: center;
  pointer-events: auto; opacity: 0; transition: opacity 0.6s ease, background-color 0.18s ease;
}
.hero-arrow svg { width: 1.3rem; height: 1.3rem; }
.hero-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.hero-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.hero-pick.is-awake .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: rgba(255,255,255,0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-arrow { background: rgba(0,0,0,0.25); border-color: var(--rule); } :root:not([data-theme="light"]) .hero-arrow:hover { background: rgba(0,0,0,0.45); } }
:root[data-theme="dark"] .hero-arrow { background: rgba(0,0,0,0.25); } :root[data-theme="dark"] .hero-arrow:hover { background: rgba(0,0,0,0.45); }
.hero-toast {
  position: fixed; left: 50%; top: 1.1rem; transform: translateX(-50%); z-index: 55;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  background: rgba(255,255,255,0.6); padding: 0.4rem 0.9rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.hero-toast.is-on { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-toast { background: rgba(0,0,0,0.3); } }
:root[data-theme="dark"] .hero-toast { background: rgba(0,0,0,0.3); }
@media (prefers-reduced-motion: reduce) { .hero-arrow, .hero-toast { transition: none; } }

/* ---------- the symbol family ---------- */
.sym { display: block; width: 7rem; height: 7rem; overflow: visible; margin-bottom: 0.2rem; }
.center .sym { margin-inline: auto; }
.sym .s { fill: none; stroke: var(--accent); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sym .s2 { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0.5; }
.sym .em { fill: none; stroke: var(--ember); stroke-width: 1.8; stroke-linecap: round; }
.sym .emf { fill: var(--ember); opacity: 0.22; }
.sym .lf { fill: var(--reed); opacity: 0.16; }
.sym .dot { fill: var(--rose); }
.sym .hdf { fill: var(--reed); opacity: 0.9; }
.room--dusk .sym .s, .room--dusk .sym .s2 { stroke: var(--dusk-soft); }
.room--dusk .sym .hdf { fill: var(--dusk-soft); }
.room--dusk .sym .lf { fill: var(--dusk-soft); }

/* a word landing: the drop falls, the water answers */
@media (prefers-reduced-motion: no-preference) {
  .sym-drop.seen .drop { animation: dropfall 7s ease-in infinite; }
  .sym-drop.seen .arc { animation: arcripple 7s ease-out infinite; transform-origin: 60px 78px; }
  .sym-drop.seen .arc-2 { animation-delay: 0.35s; }
  .sym-drop.seen .arc-3 { animation-delay: 0.7s; }
}
@keyframes dropfall { 0%, 60% { transform: translateY(0); opacity: 1; } 78% { transform: translateY(34px); opacity: 0; } 79%, 100% { transform: translateY(0); opacity: 0; } 99% { opacity: 0; } }
@keyframes arcripple { 0%, 76% { transform: scale(0.7); opacity: 0; } 82% { opacity: 0.55; } 100% { transform: scale(1.15); opacity: 0; } }
.sym-drop .arc { opacity: 0.5; }

/* the bending reed: the wind moves through it */
@media (prefers-reduced-motion: no-preference) {
  .sym-bend.seen .bend { animation: bend 9s ease-in-out infinite; transform-origin: 52px 108px; }
  .sym-bend.seen .wind { animation: wind 9s ease-in-out infinite; }
}
@keyframes bend { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes wind { 0%, 100% { opacity: 0.25; transform: translateX(-3px); } 50% { opacity: 0.6; transform: translateX(4px); } }

/* first light: the sun breathes */
.sym-dawn .emf { transform-origin: 60px 58px; }
@media (prefers-reduced-motion: no-preference) { .sym-dawn.seen .emf { animation: glow 6s ease-in-out infinite; } }
@keyframes glow { 0%, 100% { opacity: 0.16; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.1); } }

/* light through the reeds, in the dusk room */
.room--dusk .sym-light .emf { opacity: 0.3; transform-origin: 62px 56px; }
@media (prefers-reduced-motion: no-preference) { .room--dusk .sym-light.seen .emf { animation: glow 7s ease-in-out infinite; } }

/* the three movements carry their own symbols */
.moves li { grid-template-columns: 5.25rem 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 30rem) { .moves li { grid-template-columns: 4rem 1fr; gap: 0.8rem; } }
.moves .sym { width: 5.25rem; height: 5.25rem; margin: -0.35rem 0 0; }
@media (max-width: 30rem) { .moves .sym { width: 4rem; height: 4rem; } }

/* the reed, in her words: a pull-out instead of a caption */
.reed-note {
  width: 100%; margin: 1.8rem 0 0; padding: 1.4rem 1.6rem 1.3rem;
  border-left: 2px solid var(--ember); border-radius: 0 1rem 1rem 0;
  background: rgba(255, 255, 255, 0.38);
  display: flex; flex-direction: column; gap: 0.5rem;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reed-note { background: rgba(255,255,255,0.05); } }
:root[data-theme="dark"] .reed-note { background: rgba(255,255,255,0.05); }
.reed-note p { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 3.2vw, 1.6rem); line-height: 1.4; color: var(--ink-soft); max-width: 40ch; }
.reed-note .who { font-family: var(--sans); font-style: normal; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- the pause: a gentle invitation ---------- */
.room--pause .sym { width: 6.75rem; height: 6.75rem; }

/* ---------- expanders: a small reed that bows when the section opens ---------- */
summary::after {
  content: "";
  border: 0; border-radius: 0;
  width: 2rem; height: 2rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 25 C 15 19, 14 13, 16 6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cellipse cx='16.2' cy='6' rx='1.8' ry='4.6' transform='rotate(7 16.2 6)' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 25 C 15 19, 14 13, 16 6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cellipse cx='16.2' cy='6' rx='1.8' ry='4.6' transform='rotate(7 16.2 6)' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s ease;
}
summary:hover::after { background: var(--accent-deep); }
details[open] summary::after {
  content: "";
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 25 C 10 19, 12 13, 22 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='8' rx='1.7' ry='4.3' transform='rotate(60 23 8)' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 25 C 10 19, 12 13, 22 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3Cellipse cx='23' cy='8' rx='1.7' ry='4.3' transform='rotate(60 23 8)' fill='%23000'/%3E%3C/svg%3E");
  transform: rotate(6deg);
}
.room--dusk summary::after { background: var(--dusk-soft); }
summary { color: var(--ink); }
summary:hover { color: var(--accent-deep); }

/* ---------- the door: clearer words, hours in two time zones, the email in plain sight ---------- */
.hours { color: var(--dusk-soft); font-size: 1rem; max-width: 40ch; }
.hours .yours { color: var(--dusk-ink); }
.write { color: var(--dusk-soft); }
.write a { color: var(--dusk-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; white-space: nowrap; }
.write { overflow-wrap: normal; }

/* the booking sheet: the visitor's own time first, Pacific beside */
.slots button { display: inline-flex; flex-direction: column; align-items: center; gap: 0.05rem; line-height: 1.15; padding: 0.55rem 1rem 0.5rem; }
.slots button small { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; }
.slots button:hover small, .slots button.picked small { color: inherit; opacity: 0.8; }

/* ---------- the other pages carry a symbol above the title ---------- */
.page-body .sym { width: 6rem; height: 6rem; margin-bottom: -0.4rem; }
.home svg { width: 22px; height: 40px; }

footer .sym-foot { width: 3.4rem; height: 3.4rem; margin: 0 0 -0.4rem -0.3rem; }
footer .sym-foot .s, footer .sym-foot .s2 { stroke: var(--dusk-soft); }
footer .sym-foot .hdf { fill: var(--dusk-soft); }


/* =====================================================================
   V6 (16 Sept 2026): the settled colour ("heather, warmed"), one hero (dawn) in the new order,
   the first screen sized to the screen actually visible, the sky's visitors, colour in the words.
   Everything below overrides what is above it where they meet. Tokens first.
   ===================================================================== */

/* ---------- the colour: purple carries the page, rose and apricot warm it, every room its own ground ---------- */
:root {
  --sky-top: #DCCFEF;          /* lavender, the first pixel of the page: the strip above it takes this colour */
  --sky-mid: #F1E8F2;
  --sky-low: #F8DDD6;          /* the warmth of the dusk at the foot of the sky */
  --g-pause: #EAE0F0;          /* lilac */
  --g-said: #FBF3EE;           /* warm paper, with a rose glow */
  --g-changes: #F8E7DA;        /* pale apricot: the ember room */
  --g-what: #F7F1EA;           /* ivory */
  --g-jo: #ECE4F1;             /* heather, so the portrait sits on colour */
  --rose-deep: #93405F;
  --red: #B8404F;
  --bird: #55397F;
  --dawn-top: var(--sky-top); --dawn-mid: var(--sky-mid); --dawn-low: var(--sky-low);
  --ground-2: var(--g-pause); --ground-ember: var(--g-changes);
  --window: rgba(255, 252, 248, 0.7);
  --sun-core: rgba(252, 222, 176, 0.92); --sun-mid: rgba(246, 198, 186, 0.46);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top: #1C1427; --sky-mid: #241A30; --sky-low: #2E1D2F;
    --g-pause: #1D1626; --g-said: #221A2C; --g-changes: #281D2A; --g-what: #221A2C; --g-jo: #1F1829;
    --rose-deep: #E9A9C3; --red: #E88A93; --bird: #CBB6EC;
    --sun-core: rgba(216, 179, 112, 0.30); --sun-mid: rgba(226, 154, 184, 0.12);
    --window: rgba(182, 155, 224, 0.2);
  }
}
:root[data-theme="dark"] {
  --sky-top: #1C1427; --sky-mid: #241A30; --sky-low: #2E1D2F;
  --g-pause: #1D1626; --g-said: #221A2C; --g-changes: #281D2A; --g-what: #221A2C; --g-jo: #1F1829;
  --rose-deep: #E9A9C3; --red: #E88A93; --bird: #CBB6EC;
  --sun-core: rgba(216, 179, 112, 0.30); --sun-mid: rgba(226, 154, 184, 0.12);
  --window: rgba(182, 155, 224, 0.2);
}

/* the strip above the page (iOS 26 and 27, Safari and a saved app) takes its colour from the root: on the home page
   that is the sky's first pixel, on every other page the ground. Safari's own toolbar still reads the body. */
html { overscroll-behavior-x: none; }
html:has(.hero) { background: var(--sky-top); }
*, *::before, *::after { touch-action: manipulation; }
button, .cta, .book, summary, .btn-quiet { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- the rooms: a real step of hue between them, gentle, never stark ---------- */
.room--pause { background: radial-gradient(60% 50% at 50% 55%, rgba(255,255,255,0.35) 0%, transparent 70%), var(--g-pause); }
.room--said { background: radial-gradient(55% 40% at 8% 0%, rgba(180,85,124,0.12) 0%, transparent 70%), var(--g-said); }
.room--ember { background: radial-gradient(70% 55% at 85% 12%, rgba(201,161,92,0.16) 0%, transparent 70%), var(--g-changes); }
.room--what { background: radial-gradient(50% 45% at 100% 100%, rgba(107,78,158,0.09) 0%, transparent 70%), var(--g-what); }
.room--jo { background: var(--g-jo); }
.room--dusk { background: radial-gradient(60% 50% at 50% 0%, var(--plum-2) 0%, transparent 70%), var(--plum); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .room--pause { background: var(--g-pause); } }
:root[data-theme="dark"] .room--pause { background: var(--g-pause); }

/* ---------- colour in the words, not only behind them ---------- */
h2 { color: var(--accent-deep); }
.room--dusk h2, footer h2 { color: var(--dusk-ink); }
.h-ember::after { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rose), var(--ember), transparent); }
.center .h-ember::after { background: linear-gradient(90deg, transparent, var(--rose), var(--ember), transparent); }
.said li { color: var(--rose-deep); border-left-color: var(--rose-soft); }
.said li:nth-child(2n) { border-color: var(--accent-soft); }
.room--ember .sym .s { stroke: var(--rose); }
.room--ember .sym .hdf { fill: var(--rose); }
.room--said .sym .s { stroke: var(--rose); }
.room--said .sym .s2 { stroke: var(--rose); }
.reed-note { border-left-color: var(--rose); }

/* ---------- the hero: one screen, four things, pinned to the top ---------- */
.hero {
  display: block; min-height: 0; padding: 0; overflow: hidden;
  background:
    radial-gradient(46% 36% at 50% 30%, var(--window) 0%, transparent 72%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%); } }
:root[data-theme="dark"] .hero { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%); }
.hero .first {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 1.4rem) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.hero .sky {
  position: relative; width: 100%; flex: none;
  height: clamp(9rem, 38svh, 30rem); height: clamp(9rem, 38dvh, 30rem);
  padding-top: 0.75rem;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 60rem) { .hero .sky { height: clamp(12rem, 42dvh, 32rem); } }
/* a short screen (an older phone, a landscape phone): the sky gives way first, then the type */
@media (max-height: 40rem) { .hero .sky { height: clamp(7rem, 32dvh, 30rem); } .hero h1 { font-size: clamp(2rem, 6vw, 4.4rem); } .hero .lede { font-size: clamp(1.1rem, 2.8vw, 1.7rem); } .hero-words { gap: 0.6rem; } }
.hero .scene { height: 100%; width: auto; max-width: 100%; margin: 0; }
.hero-words { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; padding-top: 0.9rem; }
@media (min-width: 60rem) { .hero-words { gap: 1rem; padding-top: 1.4rem; } }
.hero h1 { font-size: clamp(2.25rem, 6.4vw, 4.4rem); max-width: 17ch; color: var(--accent-deep); }
.hero .lede { font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.36; max-width: 30ch; }
.hero .rainbow { margin-block: 0 0.1rem; }
.hero .cta-row { margin-top: 0.3rem; gap: 0.6rem; }
.hero .cta { box-shadow: 0 10px 24px -14px var(--accent-deep); }
.hero .welcome { position: relative; z-index: 1; margin: 0 auto; padding: 0.6rem var(--gutter) 3.75rem; max-width: 40ch; }
.hero .welcome .quiet-link { margin-bottom: 0.4rem; }
.hero .lay-bank, .hero .lay-sun { opacity: 1; }

/* the intro: the words rise in their new order; the welcome comes last */
@media (prefers-reduced-motion: no-preference) {
  .intro .rise-1 { animation-delay: 1.0s; } .intro .rise-2 { animation-delay: 1.14s; } .intro .rise-3 { animation-delay: 1.26s; }
  .intro .rise-4 { animation-delay: 1.38s; } .intro .rise-5 { animation-delay: 1.5s; } .intro .rise-6 { animation-delay: 1.7s; }
}

/* ---------- the sky's visitors ---------- */
/* the sky the visitors cross is the first screen: 1000 units wide, scaled to the width, so a bird is the same size on every phone */
.flock { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; height: 100dvh; pointer-events: none; z-index: 0; overflow: visible; }
.bird { fill: var(--bird); opacity: 0; transform-box: view-box; }
.bird .bob { transform-box: fill-box; transform-origin: 50% 50%; }
.bird.on { animation: cross var(--dur, 28s) linear both; }
.v3 .bird.on { animation-name: rise-away; animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
.bird.on .bob { animation: bob 3.1s ease-in-out infinite; }
.bird.b2.on .bob { animation-duration: 3.6s; animation-delay: -1.2s; }
.bird.b3.on .bob { animation-duration: 2.8s; animation-delay: -0.5s; }
@keyframes cross {
  0%   { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s, 0.7)); }
  9%   { opacity: 0.42; }
  50%  { transform: translate(var(--xm), var(--ym)) scale(var(--s, 0.7)); }
  91%  { opacity: 0.42; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s, 0.7)); }
}
@keyframes rise-away {
  0%   { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s, 0.7)); }
  12%  { opacity: 0.4; }
  60%  { transform: translate(var(--xm), var(--ym)) scale(calc(var(--s, 0.7) * 0.82)); }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(calc(var(--s, 0.7) * 0.6)); }
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(2px) rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .flock { display: none; } }


/* =====================================================================
   V7 (16 Sept 2026): under the fold, the three things stand apart and the way in reads as a link;
   fewer sizes in the hero.
   ===================================================================== */
.hero .welcome { gap: 1.15rem; padding-top: 1.2rem; max-width: 38ch; }
.hero .welcome .puzzled { font-size: 1.3rem; line-height: 1.4; color: var(--ink-soft); }
.hero .welcome .welcome-line { font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.hero .quiet-link {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.5rem 0 0;
  padding: 0.6rem 1.15rem; border-radius: 999px; border: 1px solid var(--rule); background: rgba(255,255,255,0.4);
  font-weight: 600; font-size: 0.95rem; color: var(--accent-deep); text-decoration: none; min-height: 44px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.hero .quiet-link:hover { border-color: var(--accent); background: rgba(255,255,255,0.7); color: var(--accent-deep); }
.hero .quiet-link .arrow { font-family: var(--sans); font-weight: 400; opacity: 0.7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .quiet-link { background: rgba(255,255,255,0.06); color: var(--accent); } :root:not([data-theme="light"]) .hero .quiet-link:hover { background: rgba(255,255,255,0.12); } }
:root[data-theme="dark"] .hero .quiet-link { background: rgba(255,255,255,0.06); color: var(--accent); }

/* =====================================================================
   V11 (16 Sept 2026): the strip above the page on iOS, and the room edges in the dark.
   Everything below overrides what is above it where they meet.
   ===================================================================== */

/* the strip above the page. iOS reads the page colour as the body blended over the root, so an opaque body
   hides whatever the root carries: in V10 the strip came out as the ivory ground, not the sky. The body is now
   transparent and the ground rides on a fixed layer the height of the large viewport, so it also reaches under
   Safari's bottom bar. The root keeps the sky on the home page (html:has(.hero) above) and the ground elsewhere. */
body { background: transparent; }
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: 100vh; height: 100lvh;
  background: var(--ground);
}

/* the rooms in the dark: their grounds sit a few shades apart, so a straight edge between them read as a band,
   and the rose glow at the corner of You can say it here started on that edge. In the dark each room now fades in
   from the one before it over the top of its own padding, and the glows stay in the light where they belong. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero + .room--pause { background: linear-gradient(180deg, var(--sky-low), var(--g-pause) 7rem); }
  :root:not([data-theme="light"]) .room--pause + .room--said { background: linear-gradient(180deg, var(--g-pause), var(--g-said) 7rem); }
  :root:not([data-theme="light"]) .room--said + .room--ember { background: linear-gradient(180deg, var(--g-said), var(--g-changes) 7rem); }
  :root:not([data-theme="light"]) .room--ember + .room--what { background: linear-gradient(180deg, var(--g-changes), var(--g-what) 7rem); }
  :root:not([data-theme="light"]) .room--what + .room--jo { background: linear-gradient(180deg, var(--g-what), var(--g-jo) 7rem); }
}
:root[data-theme="dark"] .hero + .room--pause { background: linear-gradient(180deg, var(--sky-low), var(--g-pause) 7rem); }
:root[data-theme="dark"] .room--pause + .room--said { background: linear-gradient(180deg, var(--g-pause), var(--g-said) 7rem); }
:root[data-theme="dark"] .room--said + .room--ember { background: linear-gradient(180deg, var(--g-said), var(--g-changes) 7rem); }
:root[data-theme="dark"] .room--ember + .room--what { background: linear-gradient(180deg, var(--g-changes), var(--g-what) 7rem); }
:root[data-theme="dark"] .room--what + .room--jo { background: linear-gradient(180deg, var(--g-what), var(--g-jo) 7rem); }

/* the grain under Safari's bottom bar. The grain was fixed with inset: 0, and on iOS a fixed layer's bottom is the
   top of Safari's bar while the page itself carries on beneath the bar. So the last strip of the screen had no grain
   and read as a band a shade darker than the page, and it grew and shrank as the bar did. The grain is now the height
   of the large viewport, like the ground layer above, so it reaches the bottom of the glass on every phone. */
.grain { inset: auto; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; }