/* Hallmark · macrostructure: custom-illustration centerpiece · tone: soft, quiet, outdoorsy · anchor hue: ember 40°
 * theme: custom (vibe: "birch grove after a fire, first spring")
 *   paper oklch(97.6% 0.008 80) · forest oklch(28% 0.025 160) · accent ember oklch(57% 0.14 40)
 *   display Instrument Serif (roman only) + body Geist
 *   axes: light paper / classical-serif / warm accent
 */

@font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --color-paper: oklch(97.6% 0.008 80);
  --color-paper-2: oklch(94% 0.013 78);
  --color-ink: oklch(23% 0.02 50);
  --color-ink-2: oklch(46% 0.025 55);
  --color-rule: oklch(88% 0.015 75);
  --color-forest: oklch(28% 0.025 160);
  --color-forest-ink: oklch(94% 0.012 100);
  --color-forest-ink-2: oklch(80% 0.02 130);
  --color-ember: oklch(57% 0.14 40);
  --color-ember-deep: oklch(49% 0.13 38);
  --color-leaf: oklch(85% 0.12 125);
  --color-focus: oklch(62% 0.16 40);

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Geist', system-ui, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --text-4xl: clamp(2.5rem, 5.5vw, 4rem);
  --text-display: clamp(3.25rem, 9vw, 7.5rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7rem;

  --radius-sm: 10px;
  --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-slow: 1100ms;

  --measure: 34rem;
  --page: 74rem;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body);
}
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ember-deep); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; font-style: normal; line-height: 1.02; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
.shell { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-lg); }

/* ── Masthead: sits on the forest hero ─────────────────────────────── */
.masthead { position: absolute; inset: 0 0 auto; z-index: 2; }
.masthead .shell { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-forest-ink); }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand span { font: 400 1.875rem/1 var(--font-display); }
.masthead .jump { background: var(--color-paper); color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); }
.masthead .jump:hover { color: var(--color-ember-deep); }
.page-plain .masthead { position: static; }
.page-plain .brand { color: var(--color-ink); }
.page-plain .masthead .jump { background: var(--color-paper-2); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--color-forest); color: var(--color-forest-ink); min-height: min(100svh, 56rem); display: grid; isolation: isolate; }
.hero .shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-xl); width: 100%; }
.hero-copy { align-self: center; padding-block: 8rem var(--space-3xl); }
.hero h1 { font-size: var(--text-display); letter-spacing: -0.015em; }
.hero h1 .grow { color: var(--color-leaf); }
.hero .lede { margin-top: var(--space-lg); max-width: 30rem; font-size: var(--text-lg); color: var(--color-forest-ink-2); }
.grove { position: relative; margin-right: calc(var(--space-lg) * -1); }
.grove img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* ── The sign-up form (used twice) ─────────────────────────────────── */
.signup { margin-top: var(--space-xl); max-width: 30rem; }
.signup .field { display: flex; gap: var(--space-xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper); }
.signup input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--color-ink);
  font: 400 var(--text-base) var(--font-body); padding: 0.8rem 1.1rem; border-radius: var(--radius-pill);
}
.signup input::placeholder { color: var(--color-ink-2); }
.signup input:focus-visible { outline-offset: 0; }
.signup button {
  flex: none; border: 0; border-radius: var(--radius-pill); padding: 0.8rem 1.4rem; cursor: pointer;
  background: var(--color-ember); color: var(--color-paper); font: 600 var(--text-base) var(--font-body); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.signup button:hover { background: var(--color-ember-deep); }
.signup button:active { transform: translateY(1px); }
.signup .fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-forest-ink-2); }
.signup .fine a { color: inherit; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Rings ─────────────────────────────────────────────────────────── */
.rings { padding-block: var(--space-3xl); }
.rings .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.rings img { width: 100%; max-width: 30rem; justify-self: center; }
.rings h2 { font-size: var(--text-4xl); }
.rings p { margin-top: var(--space-lg); max-width: var(--measure); color: var(--color-ink-2); font-size: var(--text-lg); }
.rings p strong { color: var(--color-ink); font-weight: 500; }

/* ── The hard minute: a real sequence ──────────────────────────────── */
.minute { padding-block: var(--space-2xl) var(--space-3xl); border-top: var(--rule); }
.minute h2 { font-size: var(--text-4xl); max-width: 14ch; }
.steps { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
.steps li::before { content: counter(step); display: block; font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ember); margin-bottom: var(--space-sm); }
.steps h3 { font: 600 var(--text-base)/1.3 var(--font-body); }
.steps p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.minute .after { margin-top: var(--space-2xl); font: 400 var(--text-2xl)/1.2 var(--font-display); max-width: 30ch; }

/* ── Privacy statement ─────────────────────────────────────────────── */
.statement { background: var(--color-forest); color: var(--color-forest-ink); padding-block: var(--space-3xl); }
.statement p.big { font: 400 var(--text-4xl)/1.08 var(--font-display); max-width: 18ch; }
.statement p.small { margin-top: var(--space-lg); max-width: var(--measure); color: var(--color-forest-ink-2); }

/* ── Habits list ───────────────────────────────────────────────────── */
.habits { padding-block: var(--space-3xl) var(--space-2xl); }
.habits h2 { font-size: var(--text-2xl); }
.habits ul { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font: 400 var(--text-4xl)/1.15 var(--font-display); }
.habits li:first-child { color: var(--color-ember); }
.habits li + li::before { content: '·'; color: var(--color-rule); margin-right: var(--space-lg); }
.habits p { margin-top: var(--space-lg); max-width: var(--measure); color: var(--color-ink-2); }

/* ── Closing: name story + the form again ──────────────────────────── */
.closing { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-2xl); }
.closing .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
.closing h2 { font-size: var(--text-4xl); }
.closing .story { color: var(--color-ink-2); font-size: var(--text-lg); max-width: var(--measure); }
.closing .story p + p { margin-top: var(--space-md); }
.closing .signup { margin-top: var(--space-lg); }
.closing .signup .field { background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); }
.closing .signup .fine { color: var(--color-ink-2); }

footer.site { background: var(--color-paper-2); padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }
footer.site .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); border-top: var(--rule); padding-top: var(--space-lg); }
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
footer.site a { white-space: nowrap; }
footer.site .crisis { flex-basis: 100%; }

/* ── Plain pages: support, legal, thanks ───────────────────────────── */
.plain { padding-block: var(--space-xl) var(--space-3xl); }
.plain .shell > * { max-width: 44rem; }
.plain h1 { font-size: var(--text-4xl); margin-bottom: var(--space-lg); }
.plain h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-sm); }
.plain h3 { font: 600 var(--text-base)/1.4 var(--font-body); margin: var(--space-lg) 0 var(--space-xs); }
.plain p, .plain ul, .plain ol { margin: 0 0 var(--space-md); }
.plain li + li { margin-top: var(--space-2xs); }
.plain .lede { font-size: var(--text-lg); color: var(--color-ink-2); }
.plain blockquote { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-ember); background: var(--color-paper-2); }
.plain table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); display: block; overflow-x: auto; }
.plain th, .plain td { border: var(--rule); padding: var(--space-xs); text-align: left; vertical-align: top; }
.plain code { font-size: 0.9em; overflow-wrap: anywhere; }
.plain hr { border: 0; border-top: var(--rule); margin: var(--space-xl) 0; }
.notice { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-sm); }
.plain footer.site, .page-plain footer.site { background: transparent; }

/* ── One orchestrated moment: the grove grows in ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .grove img { animation: rise var(--dur-slow) var(--ease-out) both; }
}
@keyframes rise { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Small screens ─────────────────────────────────────────────────── */
@media (max-width: 52rem) {
  .hero { min-height: 0; }
  .hero .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { padding-block: 6.5rem var(--space-xl); }
  .grove { height: 20rem; margin-inline: calc(var(--space-lg) * -1); }
  .rings .shell, .closing .shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .rings img { max-width: 20rem; order: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .signup .field { flex-direction: column; border-radius: 22px; }
  .signup button { width: 100%; }
  .masthead .jump { display: none; }
}