/* 02-how · DESKTOP (1024 px and wider) · V3-HOW-D
   No phones. The whole story in three big lines: "Pick it. Do a little. Write a line."
   The three steps climb from left to right like soft terraces: each step's big title and one short line sit above Mira,
   and Mira stands on her own terrace of the Today sky. The terraces are one ground line drawn by js/02-how.desktop.js
   through Mira's feet, so the ground always meets the art at every width. The ground keeps rising past the last step
   (there is always a next one). Mira is cast once, in three poses: reaching for the goal, on the stepping stones, writing. */

#how .v-desktop { background: #fff; }
#how .v-desktop .how-d {
  --rise: clamp(56px, 5.4vw, 78px);            /* the height of one terrace step */
  --gap: clamp(32px, 3.4vw, 56px);
  position: relative;
  padding: var(--section-y-tight) 0 var(--section-y);   /* white after the hero's white hill: tight top */
  overflow: clip;
}

/* ---- the ground (full bleed, behind everything) ---- */
#how .v-desktop .how-d-ground {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  transition: clip-path 1.6s var(--ease) .1s;
}
#how .v-desktop .how-d:not(:has(.how-d-text.in)) .how-d-ground { clip-path: inset(0 100% 0 0); }   /* draws in, left to right */
#how .v-desktop .how-d-ground-edge { fill: none; stroke: none; }   /* no outline (founder: no lines); the soft fill is the ground */

#how .v-desktop .how-d .wrap { position: relative; z-index: 1; }
#how .v-desktop .how-d-stage { position: relative; }

/* ---- the section title: centred above the staircase, like the other sections' titles; never overlaps the steps ---- */
#how .v-desktop .how-d-intro { text-align: center; margin: 0 auto clamp(52px, 4.6vw, 68px); }
#how .v-desktop .how-d-kicker {
  font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; color: var(--accent-edge);
}
#how .v-desktop .how-d-heading {
  margin-top: 12px;
  font-size: clamp(48px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.028em;   /* = the other v3 section titles */
  white-space: nowrap;
}

/* ---- the three steps: a staircase, lowest on the left ---- */
#how .v-desktop .how-d-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
#how .v-desktop .how-d-step { display: flex; flex-direction: column; min-width: 0; }
#how .v-desktop .how-d-step-1 { margin-top: calc(var(--rise) * 2); }
#how .v-desktop .how-d-step-2 { margin-top: var(--rise); }

/* the step number (founder 30 Sep: the "1 —" hairline was "not nice"): a small solid coin in the step's own colour,
   with the app's pressed-button edge and a soft coloured glow, like a badge you could tap */
#how .v-desktop .how-d-num {
  --n: var(--accent);
  display: inline-grid; place-items: center; align-self: flex-start;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), var(--n);
  box-shadow: inset 0 -2.5px 0 rgba(0,0,0,.16), 0 8px 18px -6px var(--n);
  font-size: 17px; line-height: 1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
  transform: rotate(-6deg);
}
#how .v-desktop .how-d-step-1 .how-d-num { --n: #F2A100; }
#how .v-desktop .how-d-step-2 .how-d-num { --n: var(--leaf); transform: rotate(4deg); }
#how .v-desktop .how-d-step-3 .how-d-num { --n: var(--accent); transform: rotate(-3deg); }
#how .v-desktop .how-d-title {
  margin-top: 14px;
  font-size: clamp(30px, 2.7vw, 40px); line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; color: var(--ink);
  white-space: nowrap;
}
#how .v-desktop .how-d-line {
  margin-top: 14px;
  font-size: clamp(16px, 1.15vw, 17px); line-height: 1.5; font-weight: 350; color: var(--body); text-wrap: balance;
}

/* ---- Mira, standing on her terrace ----
   Every art box is the same height with the art on its floor, so the three feet sit exactly one --rise apart. */
#how .v-desktop .how-d-mira {
  --art-h: clamp(106px, 9.3vw, 138px);   /* 20% smaller (founder: "reduce the size little") */
  position: relative; width: max-content; height: var(--art-h);
  display: flex; align-items: flex-end;
  margin-top: clamp(22px, 2.2vw, 32px);
}
#how .v-desktop .how-d-step-1 .how-d-pose { width: calc(var(--art-h) * 468 / 456); }
#how .v-desktop .how-d-step-2 .how-d-pose { width: calc(var(--art-h) * .8 * 468 / 364); }
#how .v-desktop .how-d-step-3 .how-d-pose { width: calc(var(--art-h) * .94 * 540 / 536); }
#how .v-desktop .how-d-step-3 .how-d-mira { margin-left: 13%; }   /* the writer stands a little in from the edge: a gentler climb to her */
#how .v-desktop .how-d-pose { display: block; }
#how .v-desktop .how-d-pose img { display: block; width: 100%; transform-origin: 50% 92%; transition: transform .6s var(--spring); }
#how .v-desktop .how-d-step-3 .how-d-pose { animation-delay: -3s; }

/* the app's little contact shadow on the ground, under each foot (level with the terrace, not bobbing) */
#how .v-desktop .how-d-mira::after {
  content: ""; position: absolute; z-index: -1; bottom: -9px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .16), rgba(15, 26, 43, 0));
}
#how .v-desktop .how-d-step-1 .how-d-mira::after { left: 3%; width: 36%; }   /* under the small star, not the gold one */
#how .v-desktop .how-d-step-2 .how-d-mira::after { left: -2%; right: -2%; bottom: -8px; opacity: .8; }
#how .v-desktop .how-d-step-3 .how-d-mira::after { left: 26%; width: 50%; }

@media (hover: hover) {
  #how .v-desktop .how-d-step-1:hover .how-d-pose img { transform: translateY(-6px) rotate(-5deg); }
  #how .v-desktop .how-d-step-2:hover .how-d-pose img { transform: translateY(-4px) scale(1.03); }
  #how .v-desktop .how-d-step-3:hover .how-d-pose img { transform: translateY(-6px) rotate(6deg); }
}

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#how .v-desktop .how-d-heading { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#how .v-desktop .how-d-title { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
#how .v-desktop .how-d-line { font-size: 17px; font-weight: 350; line-height: 1.5; color: var(--body); }

/* ==== CUTE PASS (founder 30 Sep: "reduce the size little and make the entire site cute") · RT-LOOP-D ====
   Rounder shapes, the app's pastel tints instead of lines, tiny playful motion on the art (never under reduced motion). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #how .v-desktop .how-d-step:hover .how-d-num { animation: how-d-coin-hop .5s var(--spring); }
}
@keyframes how-d-coin-hop { 40% { translate: 0 -4px; rotate: -8deg; } 70% { rotate: 5deg; } }