/* ── YapJar — "A day, folded" ────────────────────────────────────────────
   A scroll-journey through one day in origami paper: the sky scrubs dawn→
   night, a folded sun arcs over and sets while a paper moon + stars rise,
   your words transcribe into entries as you scroll, Gwen is the companion.
   Origami = crisp faceted paper (never grain). Palette + Fraunces are the
   committed brand identity (frontend/lib/theme.ts). Motion: main.js. ────── */

:root {
  --paper:      #F1E7D5;
  --paper-2:    #E9DBC3;
  --card:       #FBF4E7;
  --ink:        #241C14;
  --ink-2:      #574B3B;
  --ink-3:      #8A7D69;
  --rust:       #A64D2E;
  --rust-deep:  #833A22;
  --rust-soft:  #C56547;
  --cream:      #F4E8D4;     /* text on night */
  --cream-2:    #C3B29A;
  --rust-night: #E27A4C;
  --teal:       #35635F;     /* collage accent — used sparingly (riso offset, origami crane) */
  --mani:       #274E49;     /* deep-teal manifesto panel (the one bold non-cream band) */
  --amber:      #E7A93C;     /* warm pop for ticks/accents on the teal panel */
  --teal-ink:   rgba(53,99,95,.16);
  --line:       rgba(36,28,20,.14);
  --line-ink:   rgba(36,28,20,.42);   /* crisp hairline — replaces glassy borders */
  --line-night: rgba(244,232,212,.18);

  /* Liquid-glass chrome — ported from the app's `glass` object + darkColors
     (frontend/lib/theme.ts / GlassPanel.tsx) so site chrome uses the app's
     actual material. CHROME ONLY (nav, mock cards); content stays flat paper. */
  --glass-panel:     rgba(255,248,234,.72);
  --glass-strong:    rgba(255,248,234,.90);
  --glass-hair:      rgba(255,255,255,.60);
  --glass-dark:      rgba(30,24,17,.68);
  --glass-dark-line: rgba(70,58,43,.60);
  --glass-dark-hair: rgba(255,245,229,.10);

  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --wrap: 1120px;
  --r-pill: 999px;

  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-voice:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--rust); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), 100% - var(--s-6)); margin-inline: auto; }

/* ── Handcraft layer: paper grain over the whole page ─────────────────────
   Kills the "digital smooth" look. A static grayscale SVG-noise sheet,
   multiplied over everything at low opacity so it reads as printed paper,
   not a filter. Sits under the nav/progress so chrome stays crisp. */
.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .5;
  mix-blend-mode: multiply;
  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.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
/* a coarser halftone-dot wash for the dark panel (riso print tooth) */
.tooth { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: radial-gradient(rgba(255,255,255,.5) 22%, transparent 23%);
  background-size: 7px 7px; }

/* ── Fixed atmosphere ─────────────────────────────────────────────────── */
/* RETIRED: the day→night sky-scrub + sun/moon arc. The opaque hero + bands now
   carry day→night far more strongly, and the sky's stage (the see-through
   background) is gone. Airy sections (forget/lead) sit on the paper ground.
   Kept in the DOM but hidden so the markup/JS stays intact and reversible. */
.atmos { display: none; }
.atmos--legacy { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky { position: absolute; inset: 0; will-change: opacity; }
.sky--dawn  { opacity: 1; background: linear-gradient(180deg, #F2C079 0%, #F0D9AE 52%, #E7D4BA 100%); }
.sky--day   { opacity: 0; background: linear-gradient(180deg, #E4CF9C 0%, #F1E4CB 100%); }
.sky--dusk  { opacity: 0; background: linear-gradient(180deg, #C77A54 0%, #E0A06B 46%, #7A4A5A 100%); }
.sky--night { opacity: 0; background: linear-gradient(180deg, #191426 0%, #2A1E30 55%, #100D12 100%); }
.stars { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.star { position: absolute; border-radius: 1px; background: #FBF3DF; }
.celestial { position: absolute; inset: 0; }
.orb { position: absolute; width: clamp(84px, 12vw, 150px); height: clamp(84px, 12vw, 150px); left: 0; top: 0; will-change: transform; }
.orb--sun  { filter: drop-shadow(0 10px 30px rgba(226,148,51,.5)); }
.orb--moon { opacity: 0; filter: drop-shadow(0 8px 26px rgba(0,0,0,.4)); }

/* content sits above atmosphere */
.nav, main, .foot { position: relative; z-index: 2; }

/* ── Scroll progress ──────────────────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.progress__bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #E2A23A, var(--rust) 55%, #6B4A6E); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Liquid-glass chrome (the app's GlassPanel material): a translucent warm-cream
   panel + a light top-edge hairline that mimics glass refraction. Kept ~0.9
   opaque (panelStrong) because it floats over the scrubbing day→night sky and
   must stay legible even over the night ground. */
/* Nav "breaks off" on scroll (the SaaS pattern): starts inline + transparent
   at the top, then the inner row detaches into a floating glass PILL that
   persists. Glass is used HERE, purposefully — not smeared across all chrome. */
.nav { position: sticky; top: 0; z-index: 50; background: transparent; }
/* At the very top (pre-glass) the nav is grounded as an editorial MASTHEAD by a
   thin letterpress print rule spanning the content column — so it reads as a
   printed header, not floating chrome. The rule fades out as the glass pill
   forms on scroll (the pill's own border/shadow takes over). */
.nav::after { content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: min(1080px, 100% - 40px); height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(60,40,20,.34) 8%, rgba(60,40,20,.34) 92%, transparent);
  opacity: 1; transition: opacity .3s ease; }
.nav--scrolled::after { opacity: 0; }
/* SMOOTH: width/padding/radius are CONSTANT (no layout animation = no jank). The
   pill is always the same box; scrolling only fades in the glass bg + shadow and
   drops it a hair. backdrop-filter is set at rest and just becomes visible. */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  width: min(1080px, 100% - 40px); margin-block: 10px; min-height: 56px; padding: 6px 8px 6px 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; box-shadow: 0 0 0 0 rgba(40,26,12,0);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  transform: translateY(-6px);
  transition: background .35s ease, box-shadow .4s ease, border-color .35s ease, transform .45s var(--ease-expo); }
.nav--scrolled .nav__inner {
  background: rgba(251,244,231,.72);
  border-color: var(--glass-hair);
  box-shadow: 0 16px 40px -20px rgba(40,26,12,.5), inset 0 1px 0 var(--glass-hair);
  transform: translateY(0); }
/* keep the blur from tinting the hero before the bar "arrives" */
.nav:not(.nav--scrolled) .nav__inner { -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__face { width: 34px; height: 34px; border-radius: 50%; background: #EFE1C8; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -.03em; color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__links a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: .95rem; transition: color .2s; }
.nav__links a:hover { color: var(--rust-deep); }
.nav__cta { padding: 9px 16px; border-radius: var(--r-pill); background: var(--rust); color: #fff !important; font-weight: 600; }
.nav__cta:hover { background: var(--rust-deep); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 800; line-height: .98; letter-spacing: -.04em; margin: 0; text-wrap: balance;
  /* riso misregistration: a teal + rust ghost offset behind the ink — reads as
     a two-plate screenprint, not a clean digital heading. --rx/--ry are the
     plate offset; main.js tweens them from wide → tight so headlines "print in". */
  --rx: .05em; --ry: .05em;
  text-shadow: var(--rx) var(--ry) 0 rgba(53,99,95,.26), calc(var(--rx) * -.6) calc(var(--ry) * -.6) 0 rgba(166,77,46,.20); }
h1.display { font-size: clamp(2.9rem, 6.8vw, 5rem); }
h2.display { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.kicker { display: inline-block; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--rust-deep); margin: 0 0 var(--s-5); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: none; border-radius: var(--r-pill); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease-expo), scale .12s var(--ease-expo), background .18s, color .18s; }
.btn--primary { background: var(--rust); color: #fff; box-shadow: 0 8px 20px -6px rgba(166,77,46,.5); }
.btn--primary:hover { background: var(--rust-deep); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,253,247,.5); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--rust); color: var(--rust-deep); }
/* Press feedback (Emil): scale longhand composes with the magnetic transform. */
.btn:active { scale: .97; }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: wait; transform: none; scale: 1; }
.linkbtn { background: none; border: none; color: var(--ink-3); font-weight: 500; font-size: .92rem; cursor: pointer; padding: 8px 2px; }
.linkbtn:hover { color: var(--rust-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ── Acts (full-viewport scroll journey) ─────────────────────────────── */
.act { position: relative; padding: clamp(var(--s-8), 10vh, 130px) 0; }
/* Immersive but BOUNDED (px cap) so acts never explode on tall/headless
   viewports and never leave dead space. */
.act--hero    { min-height: min(88vh, 840px); display: flex; align-items: center; }
.act--morning, .act--night { min-height: min(74vh, 680px); display: flex; align-items: center; }
.act__inner { max-width: 920px; }

/* ── Hero (dawn) — the FIRST band: warm dawn panel + Gwen's field, 3px seam ─ */
/* overflow clip lets the manifesto card overlap the copy panel on top while its
   bottom gets cut off at the section edge (instead of the banner clipping its left) */
.act--hero { padding: 0; align-items: stretch; overflow: hidden; }
/* paper tooth over the light day acts so no section is flat digital beige —
   dark multiply dots read as printed grain, shared with the hero + bottom bands
   so the whole page prints on one paper. (night carries its own dark texture.) */
.act--hero::after,
.act--forget::after,
.act--lead::after,
.act--morning::after,
.act--jar::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: multiply; opacity: .5; background-size: 6px 6px;
  background-image: radial-gradient(rgba(60,35,15,.5) 22%, transparent 23%); }
/* grain must not eat pointer events on the interactive jar mockup section */
.act--jar::after { opacity: .38; }
.hero__grid { flex: 0 0 47%; min-width: 320px; width: auto; max-width: none; margin: 0;
  display: flex; align-items: center; box-sizing: border-box;
  background: linear-gradient(165deg, #EFCB86, #E7D2AC);
  padding: clamp(var(--s-6), 4vh, var(--s-8)) clamp(var(--s-6), 5vw, var(--s-9)); }
.hero__copy { max-width: 540px; }
.hero h1 { color: var(--ink); }
/* type-forward hero: the headline IS the art — bigger, tighter, screenprinted */
.act--hero h1.display { font-size: clamp(3.4rem, 9vw, 6.6rem); line-height: .9; letter-spacing: -.045em; }
/* one sub, not two — the category line, sized up to sit under the big head */
.hero__label { margin: var(--s-5) 0 0; max-width: 26ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.hero__sub { margin: var(--s-4) 0 0; max-width: 34ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
/* fine print, but still AA-legible on the warm panel (ink-3 was ~2.4:1 here) */
.hero__foot { margin: var(--s-4) 0 0; font-size: .9rem; color: var(--ink-2); }
.hero__grid { position: relative; z-index: 2; }
/* Gwen's field is the band's "photo" half — edge to edge, split from the panel
   by the same 3px paper seam as the morning/night/days bands. */
.hero__banner { position: relative; z-index: 1; flex: 1 1 auto; display: grid; place-items: center;
  overflow: hidden; border-left: 3px solid var(--paper); }
.hero__burst { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.42); z-index: 0; will-change: transform; }
/* recolor the loud rainbow burst into the locked palette: mix-blend color keeps
   the burst's luminance/rays but forces every hue into a rust→amber duotone. */
.hero__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, var(--rust), var(--amber) 72%); mix-blend-mode: color; opacity: .62; }
/* paper tooth over the burst too, so both halves share one grain. */
.hero__banner::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: multiply; opacity: .4; background-size: 6px 6px;
  background-image: radial-gradient(rgba(40,20,8,.55) 22%, transparent 23%); }
.hero__gwen { position: relative; z-index: 2; width: min(66%, 340px);
  /* hard offset "print" shadow, not a soft blur — matches the site's ink motif. */
  filter: drop-shadow(7px 9px 0 rgba(35,20,8,.32)); will-change: transform; }
/* the REAL manifesto card (main.js clones it here), reused at hero scale — bled
   off the banner edge and tucked behind Gwen (collage, cut off). Positioner only;
   the card styles itself via .mfcard below. */
.hero__mani { position: absolute; z-index: 5; left: 36%; bottom: -6%; width: min(42%, 292px);
  transform: rotate(-6deg); box-shadow: 9px 11px 0 rgba(20,14,8,.28); }
.hero__mani .mfcard { border-right: 3px solid var(--paper); }

.plane { position: absolute; width: 84px; height: 50px; filter: drop-shadow(3px 4px 0 rgba(80,44,22,.20)); }
.plane--1 { top: -6%; right: 6%; transform: rotate(-8deg); will-change: transform; }

.scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: var(--ink-3); font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
.scrollcue svg { width: 22px; height: 13px; animation: bob 1.8s var(--ease-expo) infinite; }
.scrollcue { transition: opacity .4s var(--ease-expo); }
.scrollcue.is-gone { opacity: 0; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }

/* keyboard focus ring (mouse users unaffected) */
:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; border-radius: 3px; }
.btn:focus-visible, .nav__cta:focus-visible { outline-offset: 4px; }

/* ── Flow labels + big entries (morning / night) ─────────────────────── */
.flow-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; letter-spacing: .01em; margin: 0 0 var(--s-4); }
.flow-label .ico { width: 26px; height: 26px; }
.flow-label--am { color: var(--rust-deep); }
.flow-label--pm { color: var(--rust-night); }
.act__do { margin: 0 0 var(--s-6); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; color: var(--ink); }
.act__do--pm { color: var(--cream); }
.act__note { margin: var(--s-6) 0 0; color: var(--ink-2); max-width: 52ch; font-size: 1.05rem; }
.act__note--pm { color: var(--cream-2); }

/* ── The forgetting (the problem, centered over the day sky) ─────────── */
.act--forget { min-height: min(58vh, 500px); display: flex; align-items: center; text-align: center; }
.forget__wrap { max-width: 760px; }
.forget__l { margin: 0 0 var(--s-4); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.28; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.forget__l--fade { color: var(--ink-3); }
.forget__turn { margin: var(--s-6) 0 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; font-weight: 600; color: var(--rust-deep); }

/* ── Pull quote — a real line resolving in where the sample entry was ── */
.pull { margin: 0; font-family: var(--font-voice); font-size: clamp(1.85rem, 4.4vw, 3.4rem); line-height: 1.24; color: var(--ink); text-wrap: pretty; }
.pull .w { display: inline; }               /* full opacity by default (no-JS safe) */
.pull--pm { color: var(--cream); }
.pull__cite { display: block; margin: var(--s-4) 0 0; font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: var(--ink-3); }
.pull__cite::before { content: "\2014\00a0"; }
.pull__cite--pm { color: var(--cream-2); }

/* ── Lead-in (airy, on the sky, between the forgetting and the two beats) ─ */
/* left-aligned lead: eyebrow + big Bricolage header (with a Newsreader-italic
   spoken aside) + small Hanken sub. Header/sub own their sizes; not centered. */
.act--lead { min-height: 0; padding: clamp(var(--s-7), 12vh, 150px) 0 clamp(var(--s-6), 7vh, 90px); }
/* asymmetric layout: big head upper-LEFT, small sub dropped to the lower-RIGHT
   and right-aligned — a diagonal read that breaks the left column (the night
   band uses the same right-align motif). Collapses back to left on mobile. */
.lead__wrap { max-width: none; }
.lead__head { margin: 0; max-width: 14ch; font-family: var(--font-display); font-weight: 800; line-height: 1.0;
  letter-spacing: -.04em; font-size: clamp(2.8rem, 6.5vw, 4.6rem); color: var(--ink); text-wrap: balance;
  text-shadow: .03em .028em 0 rgba(53,99,95,.22), -.016em -.016em 0 rgba(166,77,46,.18); }
.lead__sub { margin: var(--s-7) 0 0 auto; max-width: 42ch; text-align: right; font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.58; color: var(--ink-2); }
.lead__sub em { font-family: var(--font-voice); font-style: italic; font-weight: 500; color: var(--ink); }
.lead__sub strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .lead__sub { margin-top: var(--s-5); max-width: none; text-align: left; }
}

/* ── Morning / Night as full-bleed DUOTONE-PHOTO BANDS ───────────────────
   Siblings of the manifesto banner: a solid text panel + an edge-to-edge riso
   photo, split by the same 3px paper seam as the days band. This is what makes
   the top half cohere with the bottom — bands, not airy columns on the sky.
   Morning: text LEFT / bright street photo RIGHT. Night mirrors: photo LEFT /
   dark text panel RIGHT. Quote pull is the hero of each beat. */
.band { padding: 0; min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
.band .band__text { flex: 0 0 46%; min-width: 300px; display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-4); padding: clamp(var(--s-6), 5.5vw, var(--s-9)); position: relative; z-index: 1;
  min-height: min(78vh, 660px); }
.band .band__img { flex: 1 1 auto; background-size: cover; background-position: center; }
/* morning — warm cream panel, bright "into the day" street photo */
.band--am .band__text { background: var(--paper-2); color: var(--ink); }
.band--am .band__img { background-image: url("assets/brand/photo_pexels-gabriel-tovar-2156003919-34033981.png");
  background-position: center 30%; border-left: 3px solid var(--paper); }
/* night — deep-plum panel, cozy duotone photo on the LEFT (mirror) */
.band--pm .band__text { background: #221826; color: var(--cream); text-align: right; align-items: flex-end; }
.band--pm .band__img { background-image: url("assets/brand/photo_pexels-flickr-146080.png");
  background-position: center 42%; border-right: 3px solid var(--paper); }
.band--pm .flow-label { flex-direction: row-reverse; }
.band .act__note { max-width: 42ch; margin-top: var(--s-2); }
.band .act__do { margin-bottom: var(--s-2); }
.band .pull { margin: var(--s-2) 0; }
@media (max-width: 760px) {
  .band { flex-direction: column; }
  .band .band__text { flex: none; min-width: 0; min-height: 0; padding: var(--s-7) var(--s-5); }
  .band .band__img { min-height: 42vh; border-left: none; border-right: none;
    border-top: 3px solid var(--paper); }
  .band--pm { flex-direction: column-reverse; }        /* photo stays visually first */
  .band--pm .band__text { text-align: left; align-items: flex-start; }
  .band--pm .flow-label { flex-direction: row; }
}

/* ── The jar (folds back to paper) ───────────────────────────────────── */
.act--jar {
  background: var(--paper); overflow: hidden;
  clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);  /* origami fold from night → paper */
  margin-top: -1px; padding-top: clamp(var(--s-9), 14vh, 180px);
}
.jar__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--s-6), 6vw, var(--s-9)); align-items: center; }
.jar__copy h2 { color: var(--ink); }
.jar__lede { margin: var(--s-5) 0 0; max-width: 44ch; color: var(--ink-2); font-size: 1.1rem; }
.jar__vis { display: grid; place-items: center; }
.jar__svg { width: min(100%, 300px); overflow: visible; }
.jar__note { opacity: 1; }  /* visible by default (no-JS); motion animates from 0 */

/* ── Section intros (eyebrow + lede) ─────────────────────────────────── */
.section-eyebrow { display: block; margin: 0 0 var(--s-4); font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--rust-deep); }
.section-lede { margin: 0 0 var(--s-7); max-width: 34ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; }

/* ── Keeping (copy + phone; phone is the screenshot slot) ────────────── */
.keep__grid { display: grid; grid-template-columns: 1fr .84fr; gap: clamp(var(--s-6), 6vw, var(--s-9)); align-items: center; }
.keep__copy h2 { color: var(--ink); }
.keep__lede { margin: var(--s-5) 0 0; max-width: 30ch; color: var(--ink-2); font-size: 1.1rem; }
.phone { display: grid; place-items: center; position: relative; }
/* the real halftone brand burst behind the app window (Granola-style), radially
   faded into the page so the phone sits in the middle of the explosion */
.comic-burst { position: absolute; inset: -20% -24%; z-index: 0; pointer-events: none; transform: rotate(-3deg);
  background-image: url("assets/brand/burst.png"); background-size: cover; background-position: center;
  -webkit-mask: radial-gradient(closest-side, #000 42%, transparent 80%); mask: radial-gradient(closest-side, #000 42%, transparent 80%); }
/* recolor into the locked palette, same duotone as the hero burst (parent mask
   clips this overlay with the image). */
.comic-burst::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--rust), var(--amber) 72%); mix-blend-mode: color; opacity: .6; }
.phone__body { position: relative; z-index: 1; width: min(300px, 84%); aspect-ratio: 300 / 620; background: linear-gradient(160deg, #2A2016, #14100A); border-radius: 46px; padding: 10px;
  box-shadow: 14px 16px 0 -2px rgba(36,28,20,.16), 0 44px 90px -36px rgba(40,26,12,.78), inset 0 0 0 1.5px rgba(255,255,255,.06); will-change: transform; }
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 20px; background: #0B0805; border-radius: 0 0 13px 13px; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 37px; background: radial-gradient(130% 80% at 50% -8%, #241B12, #130F0A 62%); color: var(--cream); padding: 40px 15px 15px; overflow: hidden; display: flex; flex-direction: column; gap: 11px; }
.phone__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.phone__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.phone__brand img { width: 22px; height: 22px; border-radius: 50%; }
.phone__date { color: var(--cream-2); font-size: .74rem; }
/* The mock cards ARE the app's dark GlassPanel — same rgba fill + border + a
   lighter top hairline, so the pictured app matches the real one. */
.phone__card { background: var(--glass-dark); border: 1px solid var(--glass-dark-line); border-top-color: var(--glass-dark-hair); border-radius: 16px; padding: 13px 14px; }
.phone__card--ghost { opacity: .5; }
.phone__flow { display: block; margin-bottom: 5px; color: var(--rust-night); font-weight: 700; font-size: .7rem; letter-spacing: .03em; }
.phone__entry { margin: 0; font-family: var(--font-voice); font-size: .9rem; line-height: 1.5; color: var(--cream); }
.phone__mic { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--rust); color: #fff; border-radius: var(--r-pill); padding: 12px; font-weight: 600; font-size: .82rem; }
.phone__mic span { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }

/* ── Stitched "days" gallery (real photos, edge to edge) ─────────────── */
/* Native position:sticky horizontal scroll. `.daysband` is a TALL scroll-track
   (height set by JS = viewport + strip overflow, for a ~1:1 scroll feel); the
   sticky child holds at the top while JS scrubs the strip sideways, then
   releases — vertical flows into horizontal with no hard pin/freeze.
   IMPORTANT: the section must NOT clip (no overflow) or sticky won't stick;
   the sticky child does the clipping. */
.daysband { position: relative; z-index: 2; width: 100%; background: var(--ink); }
.daysband__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.daysband__strip { display: flex; align-items: stretch; height: min(72vh, 640px); width: max-content; will-change: transform; }
.daysband__strip img { flex: 0 0 auto; width: clamp(300px, 50vw, 540px); height: 100%; object-fit: cover; border-right: 3px solid var(--paper); }
.daysband__strip img:last-child { border-right: none; }
/* the intro card that leads into the river of days */
.daysband__lead { flex: 0 0 auto; width: min(90vw, 540px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(var(--s-6), 5vw, var(--s-9)); background: var(--ink); color: var(--cream); border-right: 3px solid var(--paper); }
.daysband__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: var(--rust-night); margin: 0 0 var(--s-4); }
.daysband__h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: .98; letter-spacing: -.03em; color: var(--cream);
  text-shadow: .026em .024em 0 rgba(226,122,76,.3), -.014em -.014em 0 rgba(53,99,95,.24); }
.daysband__cue { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-6); font-weight: 600; font-size: .9rem; letter-spacing: .04em; color: var(--cream-2); }
.daysband__cue svg { width: 34px; height: 12px; }
@media (max-width: 760px) {
  .daysband { height: auto !important; }
  .daysband__sticky { position: static; height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .daysband__strip { height: 340px; width: max-content; }
  .daysband__strip img { width: 74vw; }
  .daysband__lead { width: 82vw; }
}

/* ── Who (single-column mirror statement) ─────────────────────────────────
   The one DARK panel — a folded-paper insert between the light acts. High
   contrast is the point: it's the sentence you want to land hardest. */
.act--who { position: relative; overflow: hidden;
  background: var(--ink); color: var(--cream);
  clip-path: polygon(0 2.4vw, 100% 0, 100% calc(100% - 2.4vw), 0 100%);
  margin-block: calc(-2.4vw + 1px) 0; padding-block: clamp(var(--s-9), 15vh, 190px); }
.who__wrap { position: relative; z-index: 1; max-width: 820px; }
.who__h { max-width: 18ch; margin: 0 0 var(--s-6); color: var(--cream);
  text-shadow: .028em .028em 0 rgba(226,122,76,.24), -.016em -.016em 0 rgba(53,99,95,.22); }
.who__body { margin: 0; max-width: 56ch; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.6; color: var(--cream-2); }
.who__body strong { color: var(--cream); font-weight: 600; }

/* ── Why I made this (founder note) ──────────────────────────────────── */
.act--why { background: var(--paper); }
.why__wrap { max-width: 660px; }
.why__note { border-left: 3px solid var(--rust); padding-left: clamp(var(--s-5), 3vw, var(--s-6)); }
.why__note p { margin: 0 0 var(--s-5); font-size: clamp(1.12rem, 1.7vw, 1.34rem); line-height: 1.6; color: var(--ink); }
.why__note p:last-child { margin-bottom: 0; }
.why__sign { font-family: var(--font-display); font-weight: 700; color: var(--rust-deep); }

/* ── Manifesto panel — a kinetic typographic riso collage (the belief IS the art) ─ */
/* ── Manifesto: grid-locked typographic collage — one anchor, ledger spine, orthogonal strays ──
   Rules from the research: ONE hidden grid governs every angle (only 0/90/180/270); one loud anchor
   with a 6–10× size cliff; numbers as rhythm; texture in the field, crisp text; warm not dystopian. */
.act--mani { position: relative; overflow: hidden; background: var(--mani); color: var(--cream); padding: 0; }
.mani__banner { display: flex; height: 82vh; min-height: 560px; }
/* handwritten word laid over the card, on top after — under the calendar, overlapping, allowed to run off */
.mani__scribble { position: absolute; z-index: 5; left: -2%; top: 10.5%; transform: rotate(-6deg); pointer-events: none;
  font-family: "Caveat", var(--font-voice); font-weight: 700; font-size: clamp(2.2rem, 7vh, 4rem); color: var(--cream); }
.mani__slot { position: relative; width: 46vw; min-width: 340px; overflow: hidden; background: var(--mani); display: grid; place-items: center; }
.mani__bimg { flex: 1; background: center / cover no-repeat url("assets/brand/photo_pexels-himanuuu-36989884.png"); }
/* section placement: the card is authored horizontal, stood vertical by a -90° turn */
.mani__slot .mfcard { width: 82vh; transform: rotate(-90deg); }

/* ── .mfcard — the reusable manifesto card ────────────────────────────────
   Scale-invariant: a fixed 7:6 frame whose every inner size + offset is in
   container-query units (1cqw = 1% of the card's OWN width), so the same node
   renders identically at section scale AND as a small hero peek. The parent
   sets its width; nothing here is tied to the viewport. Cloned into the hero
   by main.js — one source of truth. */
.mfcard { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 7 / 6;
  background: var(--mani); color: var(--cream); overflow: hidden; box-sizing: border-box; }
.mfcard__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E");
  background-size: 26cqw 26cqw; }
.mfcard__sig { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mfcard__sig path { stroke: var(--amber); opacity: .8; fill: none; }
.mfcard__head { position: absolute; z-index: 2; left: 5.5cqw; top: 4cqw; margin: 0;
  font-family: "Caveat", var(--font-voice); font-weight: 700; line-height: .88; color: var(--cream); font-size: 15cqw; }
.mfcard__belief { position: absolute; z-index: 2; left: 5.5cqw; top: 30cqw; margin: 0; max-width: 56%;
  font-family: "Special Elite", monospace; line-height: 1.5; color: rgba(244,232,212,.9); font-size: 3.5cqw; }
.mfcard__belief::first-line { color: var(--amber); }
.mfcard__cal { position: absolute; z-index: 2; right: 5.5cqw; top: 5cqw; bottom: 5cqw; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  font-family: "Special Elite", monospace; color: rgba(244,232,212,.5); font-size: 2.7cqw; text-align: right; }
.mfcard__cal li { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.mfcard__cal span { color: var(--amber); margin-right: .45em; text-transform: uppercase; letter-spacing: .14em; font-size: .8em; }
@media (max-width: 760px) {
  .mani__banner { flex-direction: column; height: auto; }
  .mani__slot { width: 100%; height: auto; min-width: 0; }
  .mani__slot .mfcard { width: 100%; transform: none; }   /* upright + full-width on mobile */
  .mani__bimg { height: 26vh; }
  .mani__scribble { display: none; }
}
/* (legacy scatter styles below are unused by the current banner build) */
/* flat printed grain — NOT a photoreal paper texture */
.mani__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .6; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='mn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23mn)'/%3E%3C/svg%3E");
  background-size: 170px 170px; }
/* ben-day dot field rising from the bottom-left corner (riso shading, not soft opacity) */
.mani__dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(231,169,60,.6) 1.5px, transparent 1.7px); background-size: 15px 15px;
  -webkit-mask: radial-gradient(120% 115% at -8% 108%, #000 0%, transparent 50%);
          mask: radial-gradient(120% 115% at -8% 108%, #000 0%, transparent 50%); }
/* vertical index-rail label */
.mani__rail { position: absolute; z-index: 3; left: clamp(10px, 1.6vw, 26px); top: 50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: "Space Mono", monospace; font-weight: 700; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(231,169,60,.75); }
/* torn cream card the stacked block sits on (peeling paste-up) */
.mani__card { position: absolute; z-index: 1; left: 55.5%; top: 51%; width: clamp(150px, 15vw, 230px); height: clamp(150px, 20vh, 240px);
  background: var(--cream); pointer-events: none; box-shadow: 6px 10px 26px -12px rgba(0,0,0,.55);
  clip-path: polygon(3% 2%, 26% 0, 55% 3%, 82% 0, 99% 4%, 97% 30%, 100% 62%, 98% 92%, 74% 100%, 44% 97%, 18% 100%, 2% 96%, 4% 60%, 1% 33%); }
.mani__card::after { content: ""; position: absolute; right: -2px; top: 8%; width: 16%; height: 24%;
  background: var(--paper); transform: rotate(8deg); box-shadow: -3px 3px 6px -2px rgba(0,0,0,.3); }

/* the scatter field */
.mani__scatter { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fr { position: absolute; transform: translateY(var(--ty, 0px)) rotate(var(--r, 0deg)); transform-origin: left top;
  line-height: .84; white-space: nowrap; color: var(--cream); }
/* type voices — display / mono ledger / handwriting / serif; capped families */
.fr.disp  { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.fr.mono  { font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: .04em; }
.fr.hand  { font-family: "Caveat", var(--font-voice); font-weight: 700; letter-spacing: .01em; }
.fr.voice { font-family: var(--font-voice); font-style: italic; font-weight: 400; letter-spacing: 0; }
.fr.mark  { font-family: "Permanent Marker", var(--font-display); font-weight: 400; letter-spacing: .01em; }
.fr.type  { font-family: "Special Elite", "Space Mono", monospace; font-weight: 400; letter-spacing: .02em; }
/* sizes — the cliff: xxl anchor vs s strays ≈ 8–10× */
.fr.mega { font-size: clamp(4rem, 14.5vw, 13rem); }
.fr.xxl { font-size: clamp(3.4rem, 11.5vw, 10rem); }
.fr.xl  { font-size: clamp(2.6rem, 7vw, 6rem); }
.fr.l   { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
.fr.m   { font-size: clamp(1.2rem, 2.7vw, 2.3rem); }
.fr.s   { font-size: clamp(.82rem, 1.4vw, 1.1rem); }
/* inks */
.fr.cream { color: var(--cream); }
.fr.amber { color: var(--amber); }
.fr.rust  { color: var(--rust); }
.fr.teal  { color: var(--mani); }
.fr.dim   { color: rgba(244,232,212,.5); }
.fr.dim2  { color: rgba(244,232,212,.4); }
.fr.faint { color: rgba(244,232,212,.32); }
.fr.ghost { color: transparent; -webkit-text-stroke: 1.4px rgba(244,232,212,.42); text-stroke: 1.4px rgba(244,232,212,.42); }
/* anchor gets the crisp single-plate rust misregistration */
.fr.anchor { text-shadow: .026em .024em 0 var(--rust); }
/* stacked block — 2–4 words vertical, tight, seated on the cream card */
.fr.stack { display: flex; flex-direction: column; line-height: .8; }
.fr.stack b { font-weight: 800; }
.fr.stack b:nth-child(2) { font-size: 1.18em; margin-left: .12em; }
/* calendar date-column — the "when" spine, typewriter, tabular */
.cal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.18; text-align: right; font-variant-numeric: tabular-nums; }
.cal b { font-weight: 400; font-size: clamp(.85rem, 1.35vw, 1.1rem); color: rgba(244,232,212,.5); }
.cal .lbl { font-size: .68em; letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin-bottom: .35em; }
.cal .on { color: var(--mani); background: var(--amber); padding: 0 .3em; font-weight: 700; }
/* origami paper accent (folded note) */
.mani__fold { position: absolute; z-index: 2; width: clamp(56px, 6vw, 94px); height: auto; transform: rotate(8deg);
  pointer-events: none; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.3)); }

/* hand-drawn scrawl marks (draw in on reveal) — underline on anchor, ring on "worth it" */
.scr { position: absolute; overflow: visible; pointer-events: none; }
.scr path { fill: none; opacity: .95; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.scr--under { left: 0; bottom: -.14em; width: 100%; height: .38em; }
.scr--under path { stroke: var(--amber); stroke-width: 6; }
.scr--ring  { left: -22%; top: -30%; width: 144%; height: 166%; }
.scr--ring path { stroke: var(--rust); stroke-width: 7; }
/* cross-out through a word (a rescheduled thought) */
.scr--strike { left: -6%; top: 34%; width: 112%; height: .4em; }
.scr--strike path { stroke: var(--rust); }
/* connective arrow between fragments (the "this → that" of a braindump) */
.mani__arrow { z-index: 2; width: clamp(74px, 8vw, 128px); height: auto; }
.mani__arrow path { stroke: var(--amber); }
/* draw-in is driven by GSAP (c-mani) for reliable triggering */

@media (max-width: 760px) {
  .act--mani { min-height: 80vh; }
  .mani__rail, .mani__card, .fr.stack { display: none; }
  /* thin the scatter so mobile isn't mush — keep the anchor + a few ledger beats */
  .fr.s, .fr.faint, .fr.ghost { display: none; }
  .fr.xxl { font-size: clamp(2.8rem, 15vw, 5rem); }
  .fr.l   { font-size: clamp(1.8rem, 9vw, 3rem); }
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.act--cta { background: var(--paper); }
.cta__inner { max-width: 660px; position: relative; }
.plane--2 { top: -12px; right: 0; transform: rotate(12deg); }
.cta__date { color: var(--rust-deep); font-weight: 600; font-size: .92rem; }
.act--cta h2 { margin: var(--s-3) 0 var(--s-3); color: var(--ink); }
.cta__lede { margin: 0 0 var(--s-6); color: var(--ink-2); font-size: 1.1rem; max-width: 48ch; }

.form { display: block; max-width: 560px; }
.form__step { display: none; }
.form__step.is-on { display: block; }
.form__q, .form__pre { display: block; margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.form__row, .form__actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
/* quiet escape hatch out of the two-step gate — keeps the question primary */
.form__skip { display: block; margin: var(--s-3) auto 0; }
.form input, .form textarea { width: 100%; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--font-body); font-size: 1rem; transition: border-color .18s, box-shadow .18s; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-3); transition: opacity .3s; }
.form input { flex: 1 1 220px; height: 52px; padding: 0 18px; }
.form textarea { display: block; min-height: 116px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(166,77,46,.16); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form__err { margin: var(--s-4) 0 0; color: var(--rust-deep); font-weight: 500; font-size: .94rem; }
.thanks h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--rust-deep); }
.thanks p { margin: 0; color: var(--ink-2); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot { position: relative; z-index: 2; background: var(--paper); border-top: 1px solid var(--line); padding: var(--s-7) 0 0; overflow: hidden; }
/* giant wordmark across the bottom (Granola-style) */
.foot__mark { display: block; margin: var(--s-6) 0 -.14em; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; line-height: .82;
  font-size: clamp(3.4rem, 23vw, 19rem); color: var(--ink);
  text-shadow: .02em .02em 0 var(--teal-ink), -.012em -.012em 0 rgba(166,77,46,.16); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.foot__nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.foot__nav a { color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.foot__nav a:hover { color: var(--rust-deep); }
.foot__tiny { width: 100%; margin: var(--s-3) 0 0; color: var(--ink-2); font-size: .86rem; }

/* ── "Scrolled too far" easter egg — full-width band below the footer ─── */
.toofar { position: relative; z-index: 2; width: 100%; height: min(66vh, 540px);
  overflow: hidden; background: var(--ink); border-top: 1px solid var(--line); }
.toofar__stage { position: absolute; inset: 0; }
.toofar__f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.toofar__f:first-child { opacity: 1; }   /* static default (no-JS / reduced) */
html.no-motion .toofar__f { opacity: 0; } html.no-motion .toofar__f:first-child { opacity: 1; }

/* ── Legal / support / reset pages (shared) ──────────────────────────── */
.legal-page, .reset-page { position: relative; z-index: 2; padding: var(--s-8) 0 var(--s-9); }
.legal-page, .reset-page, .support-panel, .reset-card { width: min(760px, 100% - var(--s-6)); margin-inline: auto; }
.legal-hero { margin-bottom: var(--s-7); }
.legal-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.035em; margin: 0 0 var(--s-4); }
.legal-hero p { color: var(--ink-2); font-size: 1.1rem; }
.legal-section { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.legal-section:first-of-type { border-top: none; padding-top: 0; }
.legal-section h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 var(--s-3); }
.legal-section p { color: var(--ink-2); line-height: 1.65; }
.plain-list { padding-left: 1.2rem; color: var(--ink-2); line-height: 1.65; }
.plain-list li + li { margin-top: 10px; }
.support-panel { margin: var(--s-6) auto var(--s-7); padding: var(--s-6); background: var(--card); border-radius: 14px; box-shadow: 0 18px 44px -24px rgba(60,44,28,.5); }
.support-panel h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.4rem, 4vw, 2rem); word-break: break-word; }
.support-panel p { color: var(--ink-2); }
.support-button { margin-top: var(--s-3); }
.reset-page { min-height: calc(100svh - 160px); display: grid; place-items: center; }
.reset-card { max-width: 600px; padding: var(--s-7); background: var(--card); border-radius: 14px; box-shadow: 0 18px 44px -24px rgba(60,44,28,.5); }
.reset-card p { color: var(--ink-2); line-height: 1.6; }
.legal-page .eyebrow, .reset-page .eyebrow, .support-panel .eyebrow, .legal-page .label { color: var(--rust-deep); font-weight: 700; }
/* pre-redesign header/footer markup on legal pages */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); width: min(var(--wrap), 100% - var(--s-6)); margin-inline: auto; min-height: 64px; position: relative; z-index: 2; }
.site-footer { border-top: 1px solid var(--line); margin-top: var(--s-8); padding: var(--s-7) 0; }
.site-header nav, .site-footer nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.site-header nav a, .site-footer nav a { color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.site-header nav a:hover, .site-footer nav a:hover { color: var(--rust-deep); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; letter-spacing: -.03em; color: var(--ink); }
.tricolor, .mark, .mini-mark, .mini-brand, .phone-tabs, .feed-card, .swipe-row, .phone-path, .card-type { display: none; }

/* ── Ambient micro-details (killed under reduced-motion by the * rule) ─── */
@keyframes tw { 0%, 100% { opacity: var(--tw, .6); } 50% { opacity: .12; } }
@keyframes micePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.22); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.04); } }
.phone__mic span { animation: micePulse 2.4s ease-in-out infinite; }
.act > .wrap { position: relative; z-index: 1; }   /* text above the deco parallax layer */
.deco { will-change: transform; }

/* ── Origami Gwen — the mascot as identity, one sizeable pose per section ── */
.gwen { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.gwen__art { width: 100%; height: auto; display: block; filter: drop-shadow(4px 5px 0 rgba(80,44,22,.18)); }
.gwen--morning { right: 6%; bottom: 9%; width: 138px; }
.gwen--keep    { left: 3%; bottom: 0; width: 128px; }
.gwen--why     { right: 5%; bottom: 13%; width: 172px; }
.gwen--cta     { left: 4%; bottom: 11%; width: 138px; }
@media (max-width: 1000px) { .gwen { width: 104px !important; } .gwen--why { width: 132px !important; } }
@media (max-width: 700px)  { .gwen { display: none; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* stack: copy on cream, then the full-width banner below it (no overlap) */
  .act--hero { display: block; padding-bottom: 0; min-height: auto; }
  .hero__banner { position: relative; width: 100%; height: min(56vh, 420px); margin-top: 0;
    border-left: none; border-top: 3px solid var(--paper); box-shadow: none; }
  .hero__mani { display: none; }
  .hero__grid { padding-top: clamp(var(--s-8), 12vh, 120px); }
}
@media (max-width: 880px) {
  .hero__copy { max-width: none; }
  .hero__gwen { width: min(60%, 300px); }
  .keep__grid { grid-template-columns: 1fr; gap: var(--s-7); justify-items: start; }
  .keep__lede { max-width: 42ch; }
  .phone { order: -1; }
  .phone__body { width: min(260px, 70%); }
  .night__gwen { width: 150px; opacity: .85; }
  .orb { width: clamp(70px, 16vw, 110px); height: clamp(70px, 16vw, 110px); }
}
@media (max-width: 560px) {
  .nav__links .nav-desk { display: none; }
  .form__row, .form__actions { flex-direction: column; }
  .btn { width: 100%; }
  .act { padding: clamp(var(--s-8), 10vh, 110px) 0; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion / no-JS: everything static + legible ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .sky--dawn { opacity: 0; }
  .sky--day  { opacity: 1; }       /* settle on a neutral bright day */
  .celestial, .scrollcue { display: none; }
  .progress { display: none; }
  * { animation: none !important; transition-duration: .01ms !important; }
}
html.no-motion .celestial, html.no-motion .progress, html.no-motion .scrollcue { display: none; }
html.no-motion .sky--dawn { opacity: 0; } html.no-motion .sky--day { opacity: 1; }
/* No sky journey in static/reduced mode → the night act carries its own dark
   ground so its cream text stays readable. */
html.no-motion .act--night { background: linear-gradient(180deg, #191426, #100D12); }
@media (prefers-reduced-motion: reduce) { .act--night { background: linear-gradient(180deg, #191426, #100D12); } }