/* ===========================================================================
   todo.am landing page.

   The page is a checklist: seven lines, each one an act, each one ticking off
   as you pass it. The world is paper and ink, with one sunrise. There is no
   photography anywhere, on purpose: every other thing on this machine is a
   dark glass dashboard, and a product about mornings should look like a page
   you could have written on.
   =========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrumentsans.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('/fonts/azeretmono.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap; font-style: normal;
}

:root {
  --paper: #FAF6EE;
  --paper-2: #F3EDE1;
  --ink: #17140F;
  --ink-soft: #554E44;
  --faint: #8C8376;
  --line: #E2D8C7;
  --dawn: #D9542F;  --sun: #EFA04B;
  --calm: #2F6B58;
  --night: #141821;
  --night-2: #1E2430;

  --display: 'Fraunces', ui-serif, Georgia, serif;
  --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Azeret Mono', ui-monospace, Menlo, monospace;

  --rail-w: 232px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use, .modes svg, .bubble--voice svg, .btn svg {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn svg, .modes svg, .bubble--voice svg, .photoblock svg { width: 1em; height: 1em; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 99; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* The engine drives the width of this itself; the page only says what colour
   it is and how loud. */
[data-sc-progress] { background: var(--dawn); height: 2px; opacity: .85; }

/* ---- type ---------------------------------------------------------------- */

h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.06; margin: 0; }
.h2 { font-size: clamp(30px, 4.6vw, 52px); max-width: 17ch; }
.h2--dark { color: #F6F1E6; }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 56ch; margin: 18px 0 0; }
.lede--dark { color: #C6C0B4; }
.foot { margin: 26px 0 0; font-size: 15px; color: var(--faint); max-width: 52ch; }
.stamp, .eyebrow, .when__label {
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 18px; display: flex; align-items: center; gap: 9px;
}
.eyebrow--dark { color: #8E8879; }

.tickbox {
  width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px;
  display: inline-block; position: relative; opacity: .7;
}
.act--done .tickbox { background: var(--dawn); border-color: var(--dawn); }
.act--done .tickbox::after {
  content: ''; position: absolute; inset: 2px 2px auto 2px; height: 4px;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: 550 15px var(--text); transition: .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn--go { background: var(--dawn); border-color: var(--dawn); color: #fff; }
.btn--go:hover { filter: brightness(1.07); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover { color: var(--ink); }
.btn--lg { padding: 13px 22px; font-size: 16px; }

/* ---- top bar ------------------------------------------------------------- */

.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center;
  gap: 16px; padding: 14px 22px;
  background: linear-gradient(to bottom, rgba(250,246,238,.92), rgba(250,246,238,0));
  backdrop-filter: blur(6px);
  transition: color .4s;
}
.bar--dark { color: #F3EEE3; background: linear-gradient(to bottom, rgba(20,24,33,.9), rgba(20,24,33,0)); }
.bar--dark .btn { background: transparent; border-color: rgba(243,238,227,.28); color: #F3EEE3; }
.bar--dark .btn--go { background: var(--dawn); border-color: var(--dawn); }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bar__word { font: 600 21px/1 var(--display); letter-spacing: -.02em; }
.bar__word span { color: var(--dawn); }
.bar__nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bar__link { text-decoration: none; color: inherit; opacity: .75; font-size: 15px; padding: 8px 10px; }
.bar__link:hover { opacity: 1; }

.mark { width: 28px; height: 28px; }
.mark--sm { width: 20px; height: 20px; }
.mark__ink { fill: var(--dawn); }

/* ---- the checklist rail -------------------------------------------------- */

.rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 45;
  width: var(--rail-w); pointer-events: auto;
  opacity: 0; transition: opacity .5s;
}
.rail--on { opacity: 1; }
.rail--dark { color: #EDE7DB; }
.rail__head { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.rail--dark .rail__head { color: #8E8879; }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail__list a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--faint);
  font-size: 13.5px; padding: 5px 8px; border-radius: 8px; transition: .2s;
}
.rail--dark .rail__list a { color: #7E7869; }
.rail__list a:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.rail--dark .rail__list a:hover { color: #F3EEE3; background: rgba(255,255,255,.06); }
.rail__list i {
  width: 13px; height: 13px; flex: none; border: 1.5px solid currentColor; border-radius: 3px;
  position: relative;
}
.rail__list a.on { color: var(--ink); }
.rail--dark .rail__list a.on { color: #F6F1E6; }
.rail__list a.done { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(217,84,47,.6); }
.rail__list a.done i { background: var(--dawn); border-color: var(--dawn); }
.rail__list a.done i::after {
  content: ''; position: absolute; left: 2.6px; top: 1.6px; width: 4px; height: 7px;
  border-right: 1.7px solid #fff; border-bottom: 1.7px solid #fff; transform: rotate(40deg);
}

/* ---- shared act frame ---------------------------------------------------- */

.act { position: relative; padding: 108px 22px; }
.act__in { max-width: 1040px; margin: 0 auto; padding-left: 0; }
.act__in--narrow { max-width: 760px; }
@media (min-width: 1120px) {
  .act__in { padding-left: calc(var(--rail-w) + 26px); }
}

/* ===========================================================================
   HERO
   =========================================================================== */

.hero { position: relative; }
.hero__stage {
  /* The engine sticks the stage through .sc-stage; this repeats it because
     site.css loads after the engine sheet and would otherwise win. */
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
}

.hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(239,160,75,.55) 0%, rgba(217,84,47,.22) 26%, transparent 58%),
    linear-gradient(180deg, #10141C 0%, #1B2130 46%, #35323A 74%, #6B5646 92%, #8A6A51 100%);
  /* The night does not dissolve, the paper wipes it: the sky only goes once
     the sheet has already covered the screen. */
  opacity: clamp(0, calc((.95 - var(--sc-p, 0)) * 12), 1);
}
.hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 32%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 66% 26%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 91% 34%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 57% 40%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 20% 48%, #fff, transparent);
  opacity: clamp(0, calc(.9 - var(--sc-p, 0) * 2.4), .9);
}
.hero__sun {
  position: absolute; left: 50%; bottom: -28vh; width: min(72vh, 78vw); height: min(72vh, 78vw);
  transform: translate(-50%, calc(28vh - var(--sc-p, 0) * 46vh));
}
.hero__sun span {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFE7B8 0%, var(--sun) 42%, var(--dawn) 72%, rgba(217,84,47,0) 73%);
  filter: blur(.2px);
  opacity: clamp(.25, calc(.45 + var(--sc-p, 0) * .9), 1);
}
/* The paper edge. It holds off until the copy has faded, then takes the
   screen in one move, passing UNDER the settled list so those lines read as
   ink arriving on a page rather than as something disappearing. */
.hero__paper {
  position: absolute; inset: auto 0 0; height: 130vh; z-index: 2;
  background: linear-gradient(180deg, rgba(250,246,238,0) 0%, var(--paper) 7%, var(--paper) 100%);
  transform: translateY(calc(100% - clamp(0, (var(--sc-p, 0) - .70) * 3.6, 1) * 100%));
  pointer-events: none;
}

/* The loose thoughts. --k is the settle amount: 0 scattered and tilted in the
   dark, 1 straightened into a column with a checkbox in front. Each one
   settles a little after the one before it, so the column assembles rather
   than snapping. */
.hero__thoughts { position: absolute; inset: 0; z-index: 3; }
.hero__thoughts span {
  --k: clamp(0, calc((var(--sc-p, 0) - .40 - var(--d) * .022) * 6), 1);
  /* --w: how much of this line has turned into ink. The paper arrives from
     below, so the bottom of the column converts first. */
  /* Each line turns to ink exactly as the paper edge reaches it, which is why
     the trigger is computed from the same numbers as the wipe. */
  --w: clamp(0, calc((var(--sc-p, 0) - .828 + var(--d) * .017) * 20), 1);
  position: absolute;
  left: calc(var(--x) + (var(--tx) - var(--x)) * var(--k));
  top: calc(var(--y) + (var(--ty) - var(--y)) * var(--k));
  font: 400 15px/1 var(--mono); letter-spacing: -.01em;
  color: color-mix(in srgb, #17140F calc(var(--w) * 100%), #EAE2D4);
  background: rgba(255,255,255,calc(.07 - var(--k) * .07));
  border: 1px solid rgba(255,255,255,calc(.16 - var(--k) * .16));
  padding: 7px 11px 7px calc(11px + var(--k) * 15px);
  border-radius: 99px; white-space: nowrap;
  transform: rotate(calc(var(--r) * (1 - var(--k))));
}
.hero__thoughts span::before {
  content: ''; position: absolute; left: 9px; top: 50%; width: 11px; height: 11px;
  margin-top: -5.5px; border-radius: 3px;
  border: 1.4px solid color-mix(in srgb, var(--dawn) calc(var(--w) * 100%), rgba(239,160,75,.9));
  opacity: calc(var(--k) * var(--k));
}

.hero__copy {
  z-index: 4;
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  padding: 0 22px; max-width: 1040px; margin: 0 auto;
}
@media (min-width: 1120px) { .hero__copy { padding-left: calc(var(--rail-w) + 48px); } }
.hero__copy .stamp { color: #E9DFCF; }
.hero__title {
  font-size: clamp(38px, 6.4vw, 78px); max-width: 12ch; color: #FBF6EC;
  text-shadow: 0 2px 30px rgba(10,12,18,.42);
}
.hero__sub { margin: 22px 0 0; max-width: 46ch; color: #E4DCCD; font-size: clamp(16px, 1.6vw, 19px); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.hero__cta .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); color: #FBF6EC; }
.hero__cta .btn--go { background: var(--dawn); border-color: var(--dawn); }
.hero__scrollcue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(251,246,236,.5); margin: 0;
  opacity: clamp(0, calc(1 - var(--sc-p, 0) * 6), 1);
}

/* ===========================================================================
   1. SEND
   =========================================================================== */

.thread { margin: 44px 0 0; display: grid; gap: 10px; max-width: 620px; }
.thread__row { display: flex; }
.thread__row--out { justify-content: flex-end; }
.bubble {
  background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 5px;
  padding: 13px 16px; font-size: 15.5px; line-height: 1.5; max-width: 86%;
  box-shadow: 0 1px 2px rgba(23,20,15,.04), 0 12px 28px -20px rgba(23,20,15,.4);
}
.bubble b { font-weight: 600; }
.bubble i { font-style: normal; color: var(--dawn); font-family: var(--mono); font-size: 12.5px; }
.bubble--out {
  background: var(--ink); color: #F7F2E8; border-color: var(--ink);
  border-radius: 16px 16px 5px 16px;
}
.bubble--photo, .bubble--voice { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.photoblock {
  width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); font-size: 17px;
}
.bubble--voice svg { font-size: 17px; }
.asks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.asks em {
  font-style: normal; font: 500 12.5px var(--text); padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: var(--paper);
}
.asks b { font-size: 13px; margin-right: 2px; }

.modes { list-style: none; margin: 42px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.modes li { border-top: 2px solid var(--ink); padding-top: 12px; }
.modes svg { font-size: 19px; display: block; margin-bottom: 8px; color: var(--dawn); }
.modes b { display: block; font-weight: 600; }
.modes span { font-size: 14.5px; color: var(--ink-soft); }

/* ===========================================================================
   2. THE DEADLINE
   =========================================================================== */

.act--when { padding: 0; }
.when__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: grid; align-items: center; padding: 96px 22px 60px; background: var(--paper-2); }
.when__grid {
  margin: 38px 0 0; display: grid; gap: 12px;
  grid-template-columns: 1fr 46px 1fr; align-items: start;
}
.when__label { margin: 0 0 14px; }
.phrase, .date {
  margin: 0 0 10px; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.3;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s;
  transition-delay: calc(var(--i) * .06s);
}
.when--on .phrase, .when--on .date { opacity: 1; transform: none; }
.phrase { font-family: var(--mono); color: var(--ink-soft); }
.phrase--none { color: var(--faint); }
.date { font-family: var(--display); font-weight: 600; }
.date small { display: block; font: 400 12.5px/1.3 var(--text); color: var(--faint); }
.date--ask { color: var(--dawn); }
.date--ask .asks { margin-top: 8px; }
.when__arrows { display: grid; gap: 10px; padding-top: 0; }
.when__arrows span {
  display: block; height: calc(1.3em + 10px); position: relative;
  opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * .06s + .1s);
}
.when--on .when__arrows span { opacity: 1; }
.when__arrows span::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  border-top: 1px dashed var(--faint);
}
.when__arrows span::before {
  content: ''; position: absolute; right: 4px; top: 50%; width: 5px; height: 5px;
  border-top: 1px solid var(--faint); border-right: 1px solid var(--faint);
  transform: translateY(-50%) rotate(45deg);
}

/* ===========================================================================
   3. THE WEEK (pan)
   =========================================================================== */

.act--week { padding: 0; }
.week__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
.week__head { max-width: 1040px; margin: 0 auto; padding: 0 22px; width: 100%; }
@media (min-width: 1120px) { .week__head { padding-left: calc(var(--rail-w) + 48px); } }
.week__rail { display: flex; gap: 16px; padding: 0 22px; align-items: flex-start; }
@media (min-width: 1120px) { .week__rail { padding-left: calc(var(--rail-w) + 48px); } }
.day {
  flex: none; width: 268px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; min-height: 210px;
  box-shadow: 0 1px 2px rgba(23,20,15,.04), 0 16px 34px -26px rgba(23,20,15,.5);
}
.day--today { border-color: var(--dawn); box-shadow: 0 0 0 3px rgba(217,84,47,.1); }
.day--quiet { background: transparent; box-shadow: none; border-style: dashed; }
.day--open { width: 320px; background: var(--paper-2); }
.day__name { font: 600 14px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.day__name span { color: var(--faint); font-weight: 400; }
.day__none { color: var(--faint); font-size: 14px; margin: 0; }
.day__note { font-size: 13.5px; color: var(--faint); margin: 12px 0 0; }
.card {
  margin: 0 0 8px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; font-size: 14.5px; line-height: 1.35;
}
.card em { display: block; font-style: normal; font: 500 11.5px var(--mono); color: var(--faint); margin-top: 3px; }
.card--late { border-color: rgba(217,84,47,.5); background: #FCEFE9; }
.card--late em { color: var(--dawn); }
.card--ghost { background: transparent; border-style: dashed; color: var(--ink-soft); }

/* ===========================================================================
   4. THE QUIET ENGINE (peak)
   =========================================================================== */

.act--quiet { padding: 0; }
.quiet__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; color: #F3EEE3;
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  padding: 92px 22px 34px;
  background: radial-gradient(120% 90% at 50% 0%, #1E2430 0%, #14181F 62%);
}
.quiet__copy { max-width: 1040px; margin: 0 auto; width: 100%; }
@media (min-width: 1120px) { .quiet__copy { padding-left: calc(var(--rail-w) + 48px); } }
.quiet__copy .lede { max-width: 50ch; }

.engine {
  position: relative; width: 100%; max-width: 1080px; margin: 0 auto;
  /* The field is absolutely positioned inside this, so it needs a floor:
     squeezed to nothing by the copy, every chip piles up on one line. */
  min-height: 300px;
}
.engine__field { position: absolute; inset: 0; pointer-events: none; }
.chip {
  position: absolute; left: var(--x); top: var(--y);
  font: 400 11.5px/1 var(--mono); color: #CFC7B7;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  /* Absorbed, not deleted: each one shrinks into the gate line and dims to
     almost nothing, so the line stays a line rather than becoming a smear. */
  transform: translate(calc(var(--dx) * 1px * var(--k, 0)), calc(var(--dy) * 1px * var(--k, 0))) scale(calc(1 - var(--k, 0) * .62));
  opacity: calc(1 - var(--k, 0) * .92);
  filter: blur(calc(var(--k, 0) * 1.4px));
}
.chip--out {
  color: #14181F; background: #F3EEE3; border-color: #F3EEE3; font-weight: 500;
}

.engine__gate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 82vw); height: 2px; background: linear-gradient(90deg, transparent, rgba(243,238,227,.55), transparent);
}
.engine__gate::after {
  content: ''; position: absolute; inset: -46px 0 auto; height: 92px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(239,160,75,.16), transparent 70%);
}
.engine__held {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  margin: 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #9A9384; white-space: nowrap;
}
.engine__held b { color: #F3EEE3; font-size: 15px; }

.engine__hours { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(560px, 82vw); }
.hours__track {
  position: relative; height: 34px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
}
.hours__tick {
  position: absolute; top: 40px; left: calc(var(--h) / 23 * 100%); transform: translateX(-50%);
  font: 400 10.5px var(--mono); color: #7E7869;
}
.hours__quiet {
  position: absolute; top: 0; bottom: 0; left: calc(22 / 23 * 100%); right: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 5px, transparent 5px 10px);
  border-radius: 0 99px 99px 0;
}
.hours__knob {
  position: absolute; top: 50%; left: calc(8 / 23 * 100%); transform: translate(-50%, -50%);
  height: 30px; padding: 0 14px; border-radius: 99px; border: 0; cursor: grab;
  background: var(--dawn); color: #fff; font: 600 13px var(--mono); letter-spacing: .04em;
  box-shadow: 0 6px 20px -6px rgba(217,84,47,.8); touch-action: none;
}
.hours__knob:active { cursor: grabbing; }

.engine__out {
  position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%);
  opacity: 0; transition: opacity .3s;
}
.engine__out.on { opacity: 1; }
.engine__msg {
  margin: 0; font: 600 14px var(--mono); color: #14181F; background: #F3EEE3;
  padding: 7px 14px; border-radius: 8px; white-space: nowrap;
}
.quiet__drag {
  margin: 0; text-align: center; font: 400 12.5px var(--mono); color: #7E7869;
  letter-spacing: .06em;
}

/* ===========================================================================
   5. THE MESSAGE
   =========================================================================== */

.phone {
  margin: 38px 0 0; max-width: 430px; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(23,20,15,.05), 0 30px 60px -40px rgba(23,20,15,.7);
}
.phone__top {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font: 600 14px var(--text); background: var(--paper-2);
}
.phone__top em { margin-left: auto; font-style: normal; font: 400 12px var(--mono); color: var(--faint); }
.phone__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--calm); }
.phone__body { padding: 16px; display: grid; gap: 8px; }
.bubble--wide { max-width: 100%; border-radius: 14px 14px 14px 5px; }
.keys { display: flex; gap: 6px; }
.keys span {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); font: 500 12.5px var(--text); color: var(--ink-soft);
}
.keys--wide span { flex: none; width: 100%; }

.rules { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rules li { padding: 14px 16px; background: var(--paper-2); border-radius: 12px; }
.rules b { display: block; font-weight: 600; margin-bottom: 3px; }
.rules span { font-size: 14px; color: var(--ink-soft); }

/* ===========================================================================
   6. LETTING GO
   =========================================================================== */

.act--letgo { padding: 0; }
.letgo__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: grid; align-items: center; padding: 92px 22px 60px; }
.letgo__item {
  margin: 34px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; max-width: 540px;
}
.letgo__title { margin: 0; font: 600 22px/1.2 var(--display); }
.letgo__stamps { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.letgo__stamps span {
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dawn); border: 1px solid rgba(217,84,47,.45); border-radius: 4px; padding: 5px 7px;
  transform: rotate(calc((var(--i) - 2) * 1.6deg)) scale(.8); opacity: 0;
  transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * .09s);
}
.letgo--on .letgo__stamps span { opacity: 1; transform: rotate(calc((var(--i) - 2) * 1.6deg)) scale(1); }
.letgo__age { color: var(--ink) !important; border-color: var(--line) !important; }
.letgo__ask { margin: 16px 0 0; font-size: 17px; }
.letgo__keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.letgo__keys em {
  font-style: normal; font: 500 12.5px var(--text); padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: var(--paper);
}

/* ===========================================================================
   7. CLOSE
   =========================================================================== */

.act--start { padding-bottom: 0; }
.done-list { list-style: none; counter-reset: d; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; }
.done-list li {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 11px;
  font-size: 17px; border: 1px solid transparent;
}
.done-list li i {
  width: 19px; height: 19px; flex: none; border: 1.6px solid var(--faint); border-radius: 5px;
  position: relative; transition: background .3s, border-color .3s;
}
.done-list li.on i { background: var(--dawn); border-color: var(--dawn); }
.done-list li.on i::after {
  content: ''; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
}
.done-list li.on { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(217,84,47,.5); }
.done-list__cta { padding: 0 !important; }
.done-list__cta a {
  display: flex; align-items: center; gap: 13px; padding: 15px 14px; width: 100%;
  text-decoration: none; color: var(--ink); font-weight: 600; border-radius: 11px;
  border: 1px solid var(--dawn); background: #fff; transition: .16s;
}
.done-list__cta a:hover { background: var(--dawn); color: #fff; }
.done-list__cta a:hover i { border-color: #fff; }
.done-list__cta i { border-color: var(--dawn) !important; background: transparent !important; }
.start__note { margin: 26px 0 0; font-size: 15px; color: var(--faint); max-width: 54ch; }

.foot-bar { margin-top: 96px; border-top: 1px solid var(--line); background: var(--paper-2); }
.foot-bar__in { max-width: 1040px; margin: 0 auto; padding: 34px 22px 46px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
@media (min-width: 1120px) { .foot-bar__in { padding-left: calc(var(--rail-w) + 48px); } }
.foot-bar__brand { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 18px var(--display); }
.foot-bar__nav { display: flex; gap: 16px; margin-left: auto; }
.foot-bar__nav a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.foot-bar__nav a:hover { color: var(--ink); }
.foot-bar__small { width: 100%; margin: 0; font-size: 13px; color: var(--faint); }

/* ===========================================================================
   Narrow screens. The rail becomes a strip under the bar, the pinned acts
   let go of the viewport, and nothing relies on hover.
   =========================================================================== */

@media (max-width: 1119px) {
  /* No room for a list of labels, so the rail becomes what it always was
     underneath: a row of boxes that tick. It sits at the bottom, out of the
     way of both the top bar and the reading line. */
  .rail {
    position: fixed; left: 50%; right: auto; top: auto; bottom: 14px;
    transform: translateX(-50%); width: auto; padding: 7px 10px; z-index: 44;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    border: 1px solid var(--line); border-radius: 99px;
    backdrop-filter: blur(8px);
  }
  .rail--dark {
    background: rgba(20,24,31,.8); border-color: rgba(243,238,227,.18);
  }
  .rail__head { display: none; }
  .rail__list { display: flex; gap: 8px; justify-content: center; }
  .rail__list li { flex: none; }
  .rail__list a { padding: 2px; font-size: 0; gap: 0; }
  .rail__list a:hover, .rail__list a.on { background: transparent; }
  .rail__list i { width: 10px; height: 10px; border-radius: 3px; }
  .rail__list a.on i { border-color: var(--dawn); }
  .rail__list a.done i::after { left: 1.6px; top: .8px; width: 3px; height: 5.5px; border-width: 1.4px; }
}

@media (max-width: 860px) {
  .act { padding: 74px 18px; }
  .when__grid { grid-template-columns: 1fr; gap: 0; }
  .when__arrows { display: none; }
  .when__col + .when__col { margin-top: 26px; }
  .phrase { margin-bottom: 4px; }
  .date { margin-bottom: 16px; }
  .day { width: 240px; min-height: 180px; }
  .day--open { width: 260px; }
  /* The peak on a phone: fewer chips, so the swarm still reads as a swarm
     instead of a solid block, and the gate keeps room to breathe. */
  .quiet__stage { padding: 92px 16px 58px; gap: 10px; }
  .quiet__copy .lede { font-size: 15.5px; }
  .engine__hours { width: 90vw; bottom: 30px; }
  .hours__tick { top: 38px; }
  .chip { font-size: 10px; padding: 4px 7px; }
  .chip:nth-child(n+23) { display: none; }
  .engine__held { top: -28px; font-size: 11px; }
  .quiet__drag { font-size: 11.5px; }

  /* The landing column moves to the left margin: at 70% the longer notes ran
     off the side of a phone. */
  .hero__thoughts span {
    font-size: 12.5px; padding: 5px 9px;
    --tx: 6% !important;
  }
  .hero__thoughts span:nth-child(n+6) { display: none; }
  .bar { padding: 10px 14px; }
  .bar__link { display: none; }
  .modes li { border-top-width: 1.5px; }
}

/* ---- reduced motion ------------------------------------------------------
   Fewer and gentler, not nothing. The sun still sits risen, the thoughts
   still land, the engine still shows one message getting through.          */

@media (prefers-reduced-motion: reduce) {
  .hero__sun { transform: translate(-50%, -18vh); }
  .hero__sky { opacity: .25; }
  .hero__stars { opacity: 0; }
  .hero__paper { transform: translateY(4%); }
  /* The notes are shown where they land, already ink: the same story the
     wipe tells, held still. */
  .hero__thoughts span {
    transform: none; opacity: 1;
    left: var(--tx); top: var(--ty);
    color: var(--ink-soft); padding-left: 26px;
  }
  .hero__thoughts span::before { opacity: 1; border-color: var(--dawn); }
  .hero__title, .hero__sub, .hero__cta { color: var(--ink); }
  .hero__copy .stamp { color: var(--faint); }
  .hero__title { color: var(--ink); text-shadow: none; }
  .hero__sub { color: var(--ink-soft); }
  .hero__cta .btn { background: #fff; border-color: var(--line); color: var(--ink); }
  .hero__cta .btn--go { background: var(--dawn); border-color: var(--dawn); color: #fff; }
  .phrase, .date, .when__arrows span, .letgo__stamps span { opacity: 1; transform: none; }
  .chip { transform: none; opacity: .9; }
  .engine__out { opacity: 1; }
}