/* The home page: the notebook opens on the name, the logo is drawn in ink and painted, and the sapling grows as you scroll.
   Shared pieces (notebook paper, header, tabs, dragons, book) live in global.css. */

/* ---------- Hero ---------- */
.nb-hero { position: relative; overflow: hidden; }
.nb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-block: var(--space-8) var(--space-12); }
@media (min-width: 980px) { .nb-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--space-12); min-height: min(760px, calc(100vh - 20px)); padding-block: var(--space-12); } }
.nb-hero-text { display: grid; gap: var(--space-4); }
.nb-name { font-family: var(--font-display); font-size: clamp(88px, 15vw, 208px); line-height: .82; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; gap: 0 .18em; margin: 0; }
.nb-first { font-weight: 700; color: var(--ink); }
.nb-last { font-weight: 300; color: var(--leaf); }
.nb-name .char { display: inline-block; will-change: transform; }
.nb-role { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; font-weight: 440; color: var(--ink-muted); }
.nb-help { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.nb-help-lead { font-size: 19px; line-height: 28px; }
.rot { position: relative; display: block; height: 1.2em; font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.2; font-weight: 600; color: var(--ink); overflow: hidden; }
.rot-word { position: absolute; inset-inline-start: 0; top: 0; white-space: nowrap; opacity: 0; isolation: isolate; }
.rot-word.is-on { opacity: 1; }
.rot-word::after { content: ""; position: absolute; inset-inline: -4px; bottom: .12em; height: .32em; background: var(--sun-mark); z-index: -1; border-radius: .2em .05em .25em .08em; transform-origin: right center; transform: scaleX(var(--hl, 1)); }
.nb-lead { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 46ch; }
.nb-cta { margin-block: var(--space-1) var(--space-2); }

.nb-logo { display: grid; justify-items: center; gap: var(--space-2); }
.nb-stage { position: relative; width: min(440px, 80vw); aspect-ratio: 1 / 1; }
.nb-stage img, .nb-stage .lm { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-water { object-fit: contain; }
.lm { overflow: visible; }
.lm .lm-ring { fill: none; stroke: var(--ink); stroke-linecap: round; }
/* Stroke widths are in logo units (120 across), so they stay fine, like a pen line, at any size. */
.lm .lm-ring-out { stroke-width: 1; }
.lm .lm-ring-in { stroke-width: .5; }
.lm .lm-stem { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linecap: round; }
.lm .lm-mound { fill: var(--ink); }
.lm .lm-leaf-shape { fill: none; stroke: var(--leaf); stroke-width: .7; stroke-linejoin: round; }
.lm .lm-vein { fill: none; stroke: var(--leaf); stroke-width: .45; stroke-linecap: round; }
/* Without JavaScript (or with reduced motion) the painted emblem simply shows. */
.lm-hero, .lm-story { opacity: 0; }
.js-anim .lm-hero, .js-anim .lm-story { opacity: 1; }
.nb-note { position: relative; min-height: 56px; max-width: 32ch; text-align: center; }
@media (min-width: 980px) {
  /* The logo keeps its place whatever the quote's length: the note hangs below it, out of the layout,
     in space kept for it under the logo. A long quote only reaches further down. */
  .nb-logo { position: relative; margin-bottom: 120px; }
  .nb-note { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; margin-inline: auto; }
}
.nb-note-a { display: inline-block; transform: rotate(-2deg); }
.nb-note-b { display: none; }
.nb-note.is-done .nb-note-a { display: none; }
.nb-note.is-done .nb-note-b { display: grid; gap: 2px; }
.nb-quote { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 460; color: var(--ink); }
.nb-quote-src { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nb-quote-foot { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
/* Another quote, please: a small round button beside the source. */
.nb-again { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--paper-raised); color: var(--leaf); cursor: pointer; transition: border-color .2s ease-out, color .2s ease-out; }
.nb-again:hover { border-color: var(--leaf); color: var(--ink); }
.nb-again[hidden] { display: none; }
@media (max-width: 979px) {
  .nb-logo { order: -1; }
  .nb-stage { width: min(260px, 64vw); }
  .nb-name { font-size: clamp(76px, 22vw, 120px); }
}

/* ---------- Story: the sapling grows as you scroll ---------- */
/* clip, not hidden: the raised logo never draws over the notebook lines above, and sticky still works. */
.story { padding-block: var(--space-12); overflow: clip; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.story-visual { position: relative; justify-self: center; }
.story-stage { width: min(180px, 44vw); }
.story-steps { display: grid; gap: 0; align-content: start; }
.story-title { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 600; margin-bottom: var(--space-6); }
.step { display: grid; gap: var(--space-3); max-width: 56ch; padding: var(--space-8) 0; border-top: 1.5px solid var(--line); transition: border-color .3s ease-out; }
.step.is-active { border-top-color: var(--ink); }
.step-tag { font-size: 20px; line-height: 26px; }
.step-h { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 600; }
.step-link { font-weight: 600; }
@media (min-width: 980px) {
  .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-16); align-items: start; }
  /* The logo sticks just below the floating header, so the mound stays close to the line being read. */
  .story-visual { position: sticky; top: 108px; justify-self: stretch; align-self: start; display: grid; justify-items: center; pointer-events: none; }
  .story-stage { width: min(420px, 36vw, calc(100vh - 140px)); }
  .story-steps { padding-bottom: 12vh; }
  .step { padding-block: var(--space-10, 40px) var(--space-12); }
}

.me-frame { justify-self: center; }

@media (prefers-reduced-motion: reduce) { .step { transition: none; } }