/* Foreword — the living dark, on the web.
   Brand-locked: Instrument Serif speaks, Source Serif 4 explains.
   Graphite field, cream ink, gold only where practice lives. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: oklch(0.13 0.006 70);            /* warm graphite, never pure black */
  --bg-deep: oklch(0.10 0.005 70);
  --ink: oklch(0.95 0.012 85);            /* cream */
  --ink-2: oklch(0.95 0.012 85 / 0.6);
  --ink-3: oklch(0.95 0.012 85 / 0.36);
  --gold: oklch(0.74 0.09 85);
  --hairline: oklch(0.95 0.012 85 / 0.12);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-heavy: cubic-bezier(0.32, 0.72, 0, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 340;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain on a fixed pane — physical, not digital */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Floating pill nav ---------- */
.nav {
  position: fixed; top: 24px; left: 50%; translate: -50% 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  background: oklch(0.13 0.006 70 / 0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  opacity: 0; translate: -50% -12px;
  animation: navIn 900ms var(--ease-out-quint) 400ms forwards;
}
@keyframes navIn { to { opacity: 1; translate: -50% 0; } }
.nav .wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 21px; color: var(--ink); text-decoration: none;
}
.nav .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--bg-deep);
  font-size: 14px; font-weight: 500;
  text-decoration: none; border-radius: 999px; padding: 9px 9px 9px 18px;
  transition: transform 500ms var(--ease-heavy);
}
.nav .cta:active { transform: scale(0.97); }
.nav .cta .disc {
  width: 26px; height: 26px; border-radius: 999px;
  background: oklch(0.13 0.006 70 / 0.12);
  display: grid; place-items: center; font-size: 12px;
  transition: transform 500ms var(--ease-heavy);
}
.nav .cta:hover .disc { transform: translate(2px, -1px) scale(1.06); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100dvh;
  display: grid; place-items: center; text-align: center;
  position: relative; padding: 0 24px;
}
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero .eyebrow {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 16px; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-3); margin-bottom: 28px;
}
.hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 9vw, 104px);
  line-height: 1.04; letter-spacing: -0.015em;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block; translate: 0 110%;
  animation: riseUp 1100ms var(--ease-out-quint) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: 140ms; font-style: italic; color: var(--ink-2); }
@keyframes riseUp { to { translate: 0 0; } }
.hero .lead {
  font-size: clamp(17px, 2vw, 20px); line-height: 1.7;
  color: var(--ink-2); max-width: 52ch; margin: 32px auto 0;
  opacity: 0; translate: 0 16px; filter: blur(6px);
  animation: fadeUp 1000ms var(--ease-out-quint) 700ms forwards;
}
.hero .actions {
  margin-top: 44px; display: flex; justify-content: center; gap: 16px;
  opacity: 0; translate: 0 16px; filter: blur(6px);
  animation: fadeUp 1000ms var(--ease-out-quint) 950ms forwards;
}
@keyframes fadeUp { to { opacity: 1; translate: 0 0; filter: blur(0); } }
.appstore {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--bg-deep);
  border-radius: 999px; padding: 14px 14px 14px 26px;
  text-decoration: none; transition: transform 500ms var(--ease-heavy);
}
.appstore:active { transform: scale(0.97); }
.appstore .label { text-align: left; line-height: 1.2; }
.appstore .label small { display: block; font-size: 11px; opacity: 0.6; letter-spacing: 0.04em; }
.appstore .label strong { font-size: 16px; font-weight: 500; }
.appstore .disc {
  width: 38px; height: 38px; border-radius: 999px;
  background: oklch(0.13 0.006 70 / 0.12);
  display: grid; place-items: center;
  transition: transform 500ms var(--ease-heavy);
}
.appstore:hover .disc { transform: translate(2px, -2px) scale(1.05); }
.appstore .disc svg { width: 17px; height: 17px; }
.hero .soon-note {
  margin-top: 18px; font-size: 12.5px; font-style: italic; color: var(--ink-3);
  opacity: 0; animation: fadeUp 900ms var(--ease-out-quint) 1150ms forwards;
}

/* ---------- Narrative sections ---------- */
main { position: relative; z-index: 2; }
section.feature {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) 24px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
section.feature:nth-of-type(even) .copy { order: 2; }
section.feature .eyebrow {
  /* A running header, not a SaaS eyebrow: italic serif, lowercase,
     like the small titles in a book's margins. */
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 17px; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); margin-bottom: 14px; font-weight: 400;
}
section.feature h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 20px;
}
section.feature p { font-size: 17px; line-height: 1.75; color: var(--ink-2); max-width: 46ch; }
section.feature p + p { margin-top: 14px; }
section.feature .fineprint { font-size: 13.5px; font-style: italic; color: var(--ink-3); margin-top: 18px; }

/* Scroll reveal */
.reveal { opacity: 0; translate: 0 40px; filter: blur(8px);
  transition: opacity 1000ms var(--ease-out-quint), translate 1000ms var(--ease-out-quint), filter 1000ms var(--ease-out-quint); }
.reveal.in { opacity: 1; translate: 0 0; filter: blur(0); }

/* ---------- The stage (visual side of each feature) ---------- */
.stage {
  position: relative; border-radius: 32px; padding: 8px;
  background: oklch(0.95 0.012 85 / 0.04);
  border: 1px solid var(--hairline);
}
.stage .core {
  border-radius: 24px; overflow: hidden; position: relative;
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  box-shadow: inset 0 1px 1px oklch(0.95 0.012 85 / 0.08);
}
.core.sage  { background: radial-gradient(120% 100% at 40% 25%, oklch(0.50 0.055 165) 0%, oklch(0.22 0.03 165) 78%); }
.core.rose  { background: radial-gradient(120% 100% at 40% 25%, oklch(0.50 0.06 15) 0%, oklch(0.22 0.03 15) 78%); }
.core.ember { background: radial-gradient(120% 100% at 40% 25%, oklch(0.52 0.06 55) 0%, oklch(0.22 0.03 55) 78%); }
.core.night { background: radial-gradient(120% 100% at 40% 25%, oklch(0.42 0.05 255) 0%, oklch(0.18 0.025 255) 78%); }
.core.graphite { background: radial-gradient(120% 100% at 40% 25%, oklch(0.19 0.008 70) 0%, var(--bg-deep) 80%); }

/* In-stage vignettes */
.caption-demo { text-align: center; padding: 0 40px; }
.caption-demo .dim { color: oklch(0.95 0.012 85 / 0.42); }
.caption-demo .lit { color: var(--ink); text-shadow: 0 0 24px oklch(0.74 0.09 85 / 0.3); }
.wave { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 30px; height: 26px; }
.wave i { width: 3px; border-radius: 2px; background: var(--gold); animation: waveB 1.5s ease-in-out infinite; }
.wave i:nth-child(1){height:10px;animation-delay:0ms}
.wave i:nth-child(2){height:20px;animation-delay:140ms}
.wave i:nth-child(3){height:26px;animation-delay:280ms}
.wave i:nth-child(4){height:16px;animation-delay:420ms}
.wave i:nth-child(5){height:22px;animation-delay:560ms}
@keyframes waveB { 0%,100%{transform:scaleY(0.5)} 50%{transform:scaleY(1)} }

.hold-demo { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.hold-demo .ring {
  position: absolute; width: 150px; height: 150px; border-radius: 999px;
  border: 1px solid oklch(0.74 0.09 85 / 0.4);
  animation: ringOut 3.2s var(--ease-out-quint) infinite;
}
.hold-demo .ring:nth-child(2) { animation-delay: 1.05s; }
.hold-demo .ring:nth-child(3) { animation-delay: 2.1s; }
@keyframes ringOut { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
/* The aura, translated from the app's Metal shader: a crisp sphere-lit
   liquid orb — NO blur, NO outline; the rim light is the edge. It
   wobbles organically, and pressing deepens rather than inflates. */
.hold-demo .orb {
  width: 120px; height: 120px;
  --dx: 0px; --dy: 0px;
  background:
    radial-gradient(circle at 34% 28%,
      oklch(0.92 0.07 85) 0%,
      oklch(0.78 0.09 85) 26%,
      oklch(0.58 0.085 85) 55%,
      oklch(0.38 0.06 85) 82%,
      oklch(0.30 0.05 85) 100%);
  border-radius: 48% 52% 51% 49% / 53% 47% 52% 48%;
  animation: orbMorph 9s ease-in-out infinite;
  transform: translate(var(--dx), var(--dy)) scale(1);
  transition: transform 900ms var(--ease-out-quint), filter 900ms ease;
  will-change: transform, border-radius;
}
@keyframes orbMorph {
  0%, 100% { border-radius: 48% 52% 51% 49% / 53% 47% 52% 48%; }
  25%      { border-radius: 52% 48% 47% 53% / 49% 53% 46% 54%; }
  50%      { border-radius: 47% 53% 54% 46% / 52% 48% 53% 47%; }
  75%      { border-radius: 53% 47% 49% 51% / 46% 54% 49% 51%; }
}
.hold-demo.holding .orb {
  transform: translate(var(--dx), var(--dy)) scale(1.08);
  filter: brightness(1.18) saturate(1.08);
  animation-duration: 4s;
}
.hold-demo .hint {
  position: absolute; bottom: 34px; font-size: 12.5px; font-style: italic;
  color: oklch(0.95 0.012 85 / 0.55); letter-spacing: 0.02em;
}

.practice-list { display: grid; gap: 0; width: 86%; }
.practice-list .row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 4px; border-bottom: 1px solid oklch(0.95 0.012 85 / 0.14);
  /* Each method arrives on its own beat when the phone enters */
  opacity: 0; translate: 0 18px;
  transition: opacity 800ms var(--ease-out-quint), translate 800ms var(--ease-out-quint);
}
.practice-list.in .row { opacity: 1; translate: 0 0; }
.practice-list.in .row:nth-child(2) { transition-delay: 180ms; }
.practice-list.in .row:nth-child(3) { transition-delay: 360ms; }
.practice-list .row:last-child { border-bottom: none; }
.practice-list .p-icon {
  flex: none; width: 34px; height: 34px; margin-top: 3px;
  display: grid; place-items: center; border-radius: 10px;
  background: oklch(0.95 0.012 85 / 0.10);
  color: var(--ink);
}
.practice-list .p-icon svg { width: 17px; height: 17px; }
.practice-list .name { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; color: var(--ink); }
.practice-list .desc { font-size: 13px; color: oklch(0.95 0.012 85 / 0.55); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .practice-list .row { transition: none; opacity: 1; translate: 0 0; }
}

.widget-demo { width: 200px; border-radius: 42px; padding: 16px;
  background: oklch(0.95 0.012 85 / 0.06); border: 1px solid oklch(0.95 0.012 85 / 0.14); }
.widget-demo .face {
  border-radius: 28px; aspect-ratio: 1; padding: 18px;
  background: radial-gradient(120% 100% at 40% 25%, oklch(0.46 0.05 165), oklch(0.26 0.03 165));
  display: flex; flex-direction: column; justify-content: space-between;
}
.widget-demo .face .line { font-family: "Instrument Serif", Georgia, serif; font-size: 16.5px; line-height: 1.35; }
.widget-demo .face .sig { font-size: 6.5px; letter-spacing: 0.22em; opacity: 0.55; }

.story-demo { width: 78%; }
.story-demo .node { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.story-demo .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--gold); margin-top: 8px; flex: none; }
.story-demo .dot.hollow { background: transparent; border: 1px solid oklch(0.95 0.012 85 / 0.4); }
.story-demo .txt { font-family: "Instrument Serif", Georgia, serif; font-size: 17px; line-height: 1.45; color: oklch(0.95 0.012 85 / 0.85); }
.story-demo .date { font-size: 10.5px; letter-spacing: 0.14em; color: oklch(0.95 0.012 85 / 0.4); font-style: italic; }

/* ---------- Closing invitation ---------- */
.closing { text-align: center; padding: 160px 24px 128px; }
.closing h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px); line-height: 1.08;
}
.closing h2 em { color: var(--ink-2); }
.closing .actions { margin-top: 40px; display: flex; justify-content: center; }

/* ---------- Footer ---------- */
footer {
  max-width: 1080px; margin: 0 auto; padding: 40px 24px 56px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
}
footer .mark { font-family: "Instrument Serif", Georgia, serif; font-size: 18px; margin-right: auto; }
footer a { font-size: 13px; color: var(--ink-3); text-decoration: none; transition: color 200ms ease; }
footer a:hover { color: var(--ink-2); }

/* ---------- Legal / subpages ---------- */
.doc { max-width: 640px; margin: 0 auto; padding: 160px 24px 80px; }
.doc .meta { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.doc h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(36px, 5vw, 48px); margin-bottom: 16px; }
.doc h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 25px; margin: 44px 0 12px; }
.doc p, .doc li { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: 14px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--gold); }
.doc strong { color: var(--ink); font-weight: 500; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  section.feature { grid-template-columns: 1fr; gap: 36px; padding: 80px 24px; }
  section.feature:nth-of-type(even) .copy { order: 0; }
  .nav { gap: 16px; padding: 8px 8px 8px 18px; }
  .stage .core { aspect-ratio: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav, .hero h1 .line > span, .hero .lead, .hero .actions, .hero .soon-note {
    animation: none; opacity: 1; translate: -50% 0; filter: none;
  }
  .hero h1 .line > span, .hero .lead, .hero .actions, .hero .soon-note { translate: 0 0; }
  .reveal { opacity: 1; translate: 0 0; filter: none; transition: none; }
  .wave i, .hold-demo .ring, .hold-demo .fingerprint { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- The frontispiece: the book opens ---------- */
.frontispiece {
  position: fixed; inset: 0; z-index: 100;
  perspective: 1600px; background: var(--bg);
}
.frontispiece .page {
  position: absolute; inset: 0;
  background: oklch(0.94 0.015 85);   /* cream paper */
  color: oklch(0.2 0.01 70);
  display: grid; place-content: center; text-align: center; gap: 10px;
  transform-origin: left center;
  box-shadow: -30px 0 80px oklch(0 0 0 / 0.4);
}
.frontispiece .fm-small { font-size: 10px; letter-spacing: 0.34em; opacity: 0.45; }
.frontispiece .fm-title { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(44px, 7vw, 72px); }
.frontispiece .fm-sub { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 17px; opacity: 0.55; }
.frontispiece.turn { pointer-events: none; background: transparent; }
.frontispiece .page { will-change: transform; }
.frontispiece.turn .page {
  transition: transform 1100ms var(--ease-heavy), opacity 1100ms ease;
  transform: rotateY(-112deg);
  opacity: 0.98;
}
body.holding { overflow: hidden; }

/* ---------- FAQ ---------- */
.faq-section { max-width: 720px; margin: 0 auto; padding: clamp(96px, 14vh, 160px) 24px; }
.faq-section h2 {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 4.5vw, 52px); margin-bottom: 28px;
}
.faq-section .eyebrow {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 17px; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); margin-bottom: 14px;
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  font-family: "Instrument Serif", Georgia, serif; font-size: 21px;
  padding: 22px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: "Source Serif 4", serif; font-size: 20px;
  color: var(--ink-3); transition: rotate 400ms var(--ease-out-quint);
}
.faq-item[open] summary::after { rotate: 45deg; }
.faq-item p { font-size: 16px; line-height: 1.7; color: var(--ink-2); padding: 0 0 22px; }
.faq-item a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }


/* ---------- The Riddle moment ---------- */
.riddle-section { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; text-align: center; }
.riddle-frame { position: relative; }
.riddle-prompt {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 26px;
}
.riddle-field {
  position: relative;
  max-width: 480px; margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 400ms ease;
}
.riddle-field:focus-within { border-color: oklch(0.74 0.09 85 / 0.5); }
.riddle-input {
  width: 100%; background: none; border: none; outline: none;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px; color: var(--ink);
  /* symmetric side padding = the text axis IS the page axis */
  padding: 14px 52px; text-align: center;
  caret-color: var(--gold);
  transition: opacity 600ms ease;
}
.riddle-input::placeholder { color: var(--ink-3); font-style: italic; }
.riddle-go {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  background: none; border: 1px solid var(--hairline); color: var(--ink-2);
  width: 44px; height: 44px; border-radius: 999px; font-size: 15px;
  cursor: pointer;
  transition: border-color 300ms ease, color 300ms ease, transform 150ms var(--ease-out-quint);
}
.riddle-go:active { transform: scale(0.94); }
.riddle-go:hover { border-color: oklch(0.74 0.09 85 / 0.5); color: var(--ink); }
.riddle-ink {
  position: absolute; left: 0; right: 0; top: 64px;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 24px; color: var(--ink); pointer-events: none;
  opacity: 0;
}
.absorbing .riddle-input { opacity: 0; }
.absorbing .riddle-ink {
  opacity: 1;
  animation: inkSink 1150ms var(--ease-heavy) forwards;
}
@keyframes inkSink {
  0%   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  55%  { opacity: 0.75; filter: blur(2px); }
  100% { opacity: 0; filter: blur(10px); transform: translateY(16px) scale(0.96); }
}
.riddle-answer {
  min-height: 64px; margin-top: 34px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(26px, 3.6vw, 36px); line-height: 1.3; color: var(--ink);
}
.answering .riddle-answer::after {
  content: ""; display: inline-block; width: 2px; height: 0.9em;
  background: var(--gold); margin-left: 3px; vertical-align: -0.12em;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.riddle-follow {
  margin-top: 22px; font-size: 15px; font-style: italic; color: var(--ink-2);
  opacity: 0; translate: 0 10px;
  transition: opacity 900ms var(--ease-out-quint), translate 900ms var(--ease-out-quint);
}
.riddle-follow.shown { opacity: 1; translate: 0 0; }
.riddle-follow em { color: var(--gold); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .absorbing .riddle-ink { animation: none; opacity: 0; }
  .answering .riddle-answer::after { animation: none; }
  .riddle-stage .riddle-field, .hero .riddle-answer, .riddle-again { transition: none; }
}


/* ---------- Hero v3: the open book ---------- */
.corner-mark {
  position: fixed; top: 26px; left: 28px; z-index: 50;
  font-family: "Instrument Serif", Georgia, serif; font-size: 20px;
  color: var(--ink-2); text-decoration: none;
  opacity: 0; animation: fadeUp 900ms var(--ease-out-quint) 600ms forwards;
}
.hero-inner { max-width: 680px; padding: 0 8px; will-change: transform, opacity; }
.book-brand {
  margin-bottom: clamp(64px, 13vh, 128px);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 21px; color: var(--ink-2);
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.book-brand .bb-mark { color: var(--ink); }
.book-brand em { font-style: italic; font-size: 21px; color: var(--ink-3); }
.book-brand .bb-dot { color: var(--gold); }
.hero-question {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  /* One line at every width; modest by design — the QUESTION is the
     prompt, the visitor's manifestation is the display. */
  font-size: clamp(18px, 3vw, 27px);
  line-height: 1.2; letter-spacing: -0.005em;
  min-height: 1.25em;
  color: var(--ink);
  white-space: nowrap;
  /* The box hugs the text and pins to the page axis — nowrap overflow
     can never lean it (overflow otherwise extends right only). */
  width: max-content; max-width: none;
  margin-left: 50%; translate: -50% 0;
  transition: color 700ms ease, opacity 700ms ease;
}
/* After the answer the question only DIMS — no size morph (the
   font-size tween re-laid-out the whole column and read as a glitch). */
.answered .hero-question {
  color: var(--ink-3); opacity: 0.75;
}
.riddle-frame { opacity: 0; translate: 0 14px; transition: opacity 900ms var(--ease-out-quint), translate 900ms var(--ease-out-quint); }
.riddle-frame.ready { opacity: 1; translate: 0 0; }
.hero .actions { opacity: 0; translate: 0 14px; filter: blur(6px); animation: none;
  transition: opacity 900ms var(--ease-out-quint), translate 900ms var(--ease-out-quint), filter 900ms var(--ease-out-quint); }
.hero .actions.shown { opacity: 1; translate: 0 0; filter: blur(0); }
.hero .soon-note { animation: none; opacity: 0; transition: opacity 900ms ease 200ms; }
.hero .soon-note.shown { opacity: 1; }
.folio {
  position: absolute; bottom: 26px; left: 50%; translate: -50%;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 14px; color: var(--ink-3); letter-spacing: 0.1em;
  opacity: 0; animation: fadeUp 900ms var(--ease-out-quint) 2400ms forwards;
}

/* Riddle inside the hero: generous air, no box */
.hero .riddle-frame { position: relative; margin-top: clamp(28px, 4vh, 44px); }
.hero .riddle-field { max-width: 420px; }
.hero .riddle-answer {
  position: relative;
  opacity: 0; translate: 0 8px;
  /* exit (unlit) runs faster than entrance */
  transition: opacity 360ms var(--ease-out-quint), translate 360ms var(--ease-out-quint);
  min-height: 64px; margin-top: 30px;
  font-style: italic;
  font-size: clamp(32px, 4.8vw, 50px); line-height: 1.18;
}
.hero .riddle-answer.lit {
  opacity: 1; translate: 0 0;
  transition-duration: 450ms, 450ms;
}
.hero .riddle-answer:not(:empty)::before,
.hero .riddle-answer:not(:empty)::after {
  font-family: "Instrument Serif", Georgia, serif;
  color: var(--gold); font-style: normal;
}
.hero .riddle-answer:not(:empty)::before { content: "“ "; }
.hero .riddle-answer:not(:empty)::after { content: " ”"; }
.hero .riddle-follow { line-height: 1.6; font-size: 14px; max-width: 44ch; margin-left: auto; margin-right: auto; }
.hero .actions { margin-top: clamp(28px, 4vh, 40px); }

@media (prefers-reduced-motion: reduce) {
  .corner-mark { animation: none; opacity: 1; }
  .riddle-frame { transition: none; }
  .folio { animation: none; opacity: 1; }
}


/* ---------- Phones: the value props live in the device ---------- */
.phone {
  width: min(78%, 300px); margin: 0 auto;
  aspect-ratio: 9 / 19;
  border-radius: 48px; padding: 9px;
  background: oklch(0.18 0.008 70);
  border: 1px solid oklch(0.95 0.012 85 / 0.16);
  box-shadow:
    0 40px 90px -30px oklch(0 0 0 / 0.55),
    inset 0 1px 1px oklch(0.95 0.012 85 / 0.10);
  transition: transform 900ms var(--ease-heavy);
}
.phone .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 40px; overflow: hidden;
  display: grid; place-items: center;
}
.phone .island {
  position: absolute; top: 12px; left: 50%; translate: -50%;
  width: 76px; height: 22px; border-radius: 999px;
  background: oklch(0.08 0.004 70); z-index: 3;
}
.tilt-l, .tilt-r { transform: none; }
.tilt-l:hover { transform: rotate(-2deg) translateY(-6px); }
.tilt-r:hover { transform: rotate(2deg) translateY(-6px); }
.screen.sage  { background: radial-gradient(130% 100% at 42% 22%, oklch(0.50 0.055 165), oklch(0.20 0.028 165) 82%); }
.screen.rose  { background: radial-gradient(130% 100% at 42% 22%, oklch(0.50 0.06 15), oklch(0.20 0.028 15) 82%); }
.screen.night { background: radial-gradient(130% 100% at 42% 22%, oklch(0.42 0.05 255), oklch(0.17 0.024 255) 82%); }
.screen.graphite { background: radial-gradient(130% 100% at 42% 22%, oklch(0.20 0.008 70), oklch(0.10 0.005 70) 84%); }
.screen.wallpaper { background: radial-gradient(140% 110% at 30% 15%, oklch(0.30 0.035 255), oklch(0.13 0.012 255) 80%); }

/* In-phone type scales up to feel like the app */
.phone .caption-demo { padding: 0 26px; }
.phone .practice-list { width: 80%; }
.phone .practice-list .name { font-size: 21px; }
.phone .story-demo { width: 80%; }
.phone .story-demo .txt { font-size: 19px; line-height: 1.45; }
.phone .story-demo .date { font-size: 11.5px; }
.phone .hold-demo .hint { bottom: 46px; }

/* ---------- The faked Home Screen ---------- */
.homescreen {
  width: 100%; height: 100%; padding: 52px 18px 26px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
.hs-row { display: flex; gap: 12px; justify-content: space-between; align-items: stretch; }
.hs-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: oklch(0.95 0.012 85 / 0.10);
}
.hs-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.hs-widget.dim {
  flex: 1; border-radius: 18px; min-height: 100px;
  background: oklch(0.95 0.012 85 / 0.08);
}
.hs-widget.ours {
  border-radius: 20px; padding: 18px; min-height: 150px;
  background: radial-gradient(120% 100% at 40% 25%, oklch(0.46 0.05 165), oklch(0.24 0.03 165));
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 14px 34px -14px oklch(0 0 0 / 0.5);
}
.hs-widget.ours .line { font-family: "Instrument Serif", Georgia, serif; font-size: 19px; line-height: 1.32; color: var(--ink); }
.hs-widget.ours .sig {
  /* SF in the app — system sans here, matching the real widget */
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 7.5px; font-weight: 500; letter-spacing: 0.24em;
  color: oklch(0.95 0.012 85 / 0.5);
}

@media (max-width: 768px) {
  .phone { width: min(72%, 270px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone { transition: none; }
}


/* ---------- Colophon: the book closes with its own mark ---------- */
.closing { position: relative; overflow: hidden; }
.closing .colophon-f {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(300px, 44vw, 560px); line-height: 0.8;
  color: oklch(0.95 0.012 85 / 0.045);
  position: absolute; left: 50%; top: 50%;
  translate: -50% -54%; pointer-events: none; user-select: none;
}
.closing .kicker {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 18px; letter-spacing: 0.01em; text-transform: none;
  color: var(--gold); margin-bottom: 22px;
}
.closing h2 { position: relative; }
.closing .sub {
  position: relative; margin: 20px auto 0; max-width: 46ch;
  font-size: 16.5px; line-height: 1.7; color: var(--ink-2);
}

/* ---------- Footer v2: the back cover ---------- */
footer {
  display: block; border-top: 1px solid var(--hairline);
  max-width: none; padding: 0;
}
.footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 56px 24px 64px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.footer-inner .mark {
  font-family: "Instrument Serif", Georgia, serif; font-size: 30px; margin: 0;
}
.footer-inner .mark small {
  display: block; font-family: "Source Serif 4", Georgia, serif;
  font-style: italic; font-size: 13.5px; color: var(--ink-3); margin-top: 6px;
}
.footer-col h4 {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 5px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-base {
  max-width: 1080px; margin: 0 auto; padding: 0 24px 40px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}


/* ---------- Riddle v2: one slot, two states, no shifting ---------- */
.riddle-stage { position: relative; min-height: 140px; }
.riddle-stage .riddle-field,
.riddle-stage .riddle-ink,
.riddle-stage .riddle-answer {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%;
  margin: 0 auto;
}
.riddle-stage .riddle-field {
  transition: opacity 450ms var(--ease-out-quint);
}
.riddle-frame.answered-state .riddle-field { opacity: 0; pointer-events: none; }
.riddle-stage .riddle-ink { top: 50%; }
.riddle-stage .riddle-answer { min-height: 0; margin-top: 0; }

.riddle-again {
  background: none; border: none; cursor: pointer;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 13.5px; font-style: italic; color: var(--ink-3);
  text-decoration: underline; text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  padding: 10px 16px; margin-top: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 450ms var(--ease-out-quint), color 200ms ease;
}
.riddle-again:hover { color: var(--ink-2); }
.riddle-again:active { transform: scale(0.97); }
.riddle-frame.answered-state .riddle-again { opacity: 1; pointer-events: auto; }


/* ---------- The hold demo actually holds ---------- */
.hold-demo { touch-action: none; cursor: pointer; }

.hold-demo.holding .ring { animation-duration: 1.6s; }
.hold-demo .hint { transition: opacity 500ms ease; }
.hold-demo.holding .hint { opacity: 0; }
/* Pressing is not hovering: the phone stays flat during a hold */
.phone:has(.hold-demo.holding) { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hold-demo .orb { animation: none; transition: none; }
}


/* ---------- The loop demo plays ---------- */
.loop-play {
  margin: 22px auto 0; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: oklch(0.95 0.012 85 / 0.12);
  border: 1px solid oklch(0.95 0.012 85 / 0.25);
  color: var(--ink); cursor: pointer;
  transition: transform 150ms var(--ease-out-quint), background 200ms ease;
}
.loop-play:hover { background: oklch(0.95 0.012 85 / 0.18); }
.loop-play:active { transform: scale(0.94); }
.loop-play svg { width: 20px; height: 20px; display: none; }
.loop-play .ic-play { display: block; margin-left: 2px; }
.playing .loop-play .ic-play, .played .loop-play .ic-play { display: none; }
.playing .loop-play .ic-pause { display: block; }
.played .loop-play .ic-replay { display: block; }
.caption-demo .wave { opacity: 0.35; }
.caption-demo .wave i { animation-play-state: paused; }
.playing .wave { opacity: 1; }
.playing .wave i { animation-play-state: running; }

/* ---------- Home screen v2: widgets anchored top, real density ---------- */
.homescreen { justify-content: flex-start; gap: 13px; padding: 50px 16px 18px; }
/* Real widget anatomy (ForewordWidgets.swift): line centered between
   spacers, SF-caps signature at the foot. */
.hs-widget.ours {
  min-height: 112px; padding: 13px 14px;
  display: flex; flex-direction: column;
}
.hs-widget.ours .line {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 17px; line-height: 1.32; color: var(--ink);
  margin: auto 0; /* the Spacer/line/Spacer sandwich */
}
.hs-widget.ours .sig {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 7px; font-weight: 500; letter-spacing: 0.19em;
  color: oklch(0.95 0.012 85 / 0.45);
}
/* Practice widget: meta top-left, content anchored bottom, flat graphite. */
.hs-widget.ours.practice {
  background: oklch(0.13 0.006 70);
  border: 1px solid oklch(0.95 0.012 85 / 0.13);
  min-height: 96px; box-shadow: none;
}
.pw-meta {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 8px; font-weight: 500; letter-spacing: 0.11em;
  color: oklch(0.95 0.012 85 / 0.38);
}
.pw-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px; color: var(--ink); margin-top: auto;
}
.pw-sub {
  font-family: "Source Serif 4", Georgia, serif; font-style: italic;
  font-size: 11px; color: oklch(0.95 0.012 85 / 0.6); margin-top: 2px;
}
.hs-row { justify-content: space-around; }
.hs-icon { width: 40px; height: 40px; border-radius: 11px; }
.hs-row.dock {
  margin-top: auto; padding: 9px 10px; border-radius: 22px;
  background: oklch(0.95 0.012 85 / 0.07);
}


/* Synced captions: every line keeps ONE size — emphasis moves through
   color, blur, opacity, and a hairline GPU scale. Nothing reflows. */
.caption-demo .cap,
.phone .caption-demo .cap {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 19px; line-height: 1.5; margin: 10px 0;
  transition: color 420ms ease, filter 420ms ease, opacity 420ms ease,
              transform 420ms var(--ease-out-quint);
  will-change: transform;
}
.caption-demo .cap.dim {
  color: oklch(0.95 0.012 85 / 0.42); filter: blur(1.3px);
  opacity: 0.85; transform: scale(1);
}
.caption-demo .cap.lit {
  color: var(--ink); filter: blur(0);
  opacity: 1; transform: scale(1.08);
}


/* Chapters arrive one at a time, like pages being written */
.story-demo .node {
  opacity: 0; translate: 0 18px;
  transition: opacity 800ms var(--ease-out-quint), translate 800ms var(--ease-out-quint);
}
.story-demo.in .node { opacity: 1; translate: 0 0; }
.story-demo.in .node:nth-child(2) { transition-delay: 220ms; }
.story-demo.in .node:nth-child(3) { transition-delay: 440ms; }
@media (prefers-reduced-motion: reduce) {
  .story-demo .node { transition: none; opacity: 1; translate: 0 0; }
}