/* =====================================================================
   Mush Love: Home
   video hero, then (after the Atlas) band, manifesto, collection, founder,
   inside the shop, reviews, journal teaser, mascot CTA.
   Built on base.css tokens; behaviour in js/home.js.
   ===================================================================== */

/* ------------------------------------------------------------ shared */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 800; line-height: 1.4;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  font-variation-settings: normal;
}
.kicker__n {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  transition: color .6s var(--ease);
}
.kicker__n::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.kicker--light { color: rgba(241, 235, 221, .66); }
.kicker--light .kicker__n { color: #ff8a7a; }
[data-glow="on"] .kicker--light .kicker__n { color: var(--glow); }

.home-title {
  font-size: clamp(42px, 6.2vw, 96px);
  line-height: .95;
  letter-spacing: -.042em;
  font-weight: 370;
}
.page-home .section-head p:not(.eyebrow):not(.kicker) { font-size: clamp(16px, 1.3vw, 18px); }
/* base `.section-head p:not(.eyebrow)` (0,2,1) would otherwise recolour/re-space the kickers */
.page-home .section-head .kicker { margin: 0 0 20px; max-width: none; color: var(--muted); }
.page-home .section-head .kicker--light { color: rgba(241, 235, 221, .72); }
/* split-text word masks: leave room for italic overhangs (the f of "shelf", the d of "chalkboard") */
.js .page-home main > :not(#atlas) [data-split] .w { padding-right: .1em; margin-right: -.1em; padding-bottom: .12em; margin-bottom: -.12em; }
/* Glow: an em text-shadow is clipped into a hard box by each word's overflow mask, so draw the glow
   on the mask itself (a filter isn't clipped by its own element's overflow). */
[data-glow="on"].js .page-home [data-split] em { text-shadow: none; }
[data-glow="on"].js .page-home [data-split] em .w { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 55%, transparent)); }
.js .page-home [data-split] em .w { transition: filter .6s var(--ease); }

/* Emphasis on fixed-dark surfaces: amanita red is too dark there, use a warm coral (mint in Glow). */
.section--dark :is(h2, .home-title) em,
.founder em { color: #ff8a7a; }
[data-glow="on"] .section--dark :is(h2, .home-title) em,
[data-glow="on"] .founder em { color: var(--glow); }

/* ========================================================= 1. video hero */
/* A full-bleed loop of the "I love you" hand in a mushroom forest. It runs from under the announcement
   bar to the bottom of the screen, behind the transparent sticky header. The hand stands in the middle
   of the frame (about 35% to 70% of its width), so the words keep to the lower left on wide screens
   and to the lower third on narrow ones, and never sit on the hand itself. */
.vhero {
  --vh-h: max(560px, calc(100vh - var(--announce-h)));
  --vh-ink: #f7f1e3;
  --vh-shade: 9, 11, 7;
  --vh-cue-b: clamp(14px, 2.6vh, 26px); /* scroll cue: distance from the bottom, and its height */
  --vh-cue-h: 72px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  height: var(--vh-h);
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #0b0f0a;
  color: var(--vh-ink);
}
@supports (height: 100svh) { .vhero { --vh-h: max(560px, calc(100svh - var(--announce-h))); } }
[data-glow="on"] .vhero { --vh-shade: 5, 10, 8; }

.vhero__media {
  position: absolute; inset: 0; z-index: -2;
  translate: 0 calc(var(--vp, 0) * 24%);
  animation: vh-media 2.6s var(--ease-out) both;
}
.vhero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
@keyframes vh-media {
  from { opacity: 0; transform: scale(1.1); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* legibility: a soft top band for the header, a deep pool where the words sit, a gentle vignette */
.vhero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--vh-shade), .55) 0, rgba(var(--vh-shade), 0) calc(var(--header-h) + 110px)),
    linear-gradient(0deg, rgba(var(--vh-shade), .92) 0%, rgba(var(--vh-shade), .7) 22%, rgba(var(--vh-shade), .22) 40%, rgba(var(--vh-shade), 0) 54%),
    radial-gradient(125% 100% at 52% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%);
}
.vhero__shade::after { /* Glow: a faint bioluminescent bloom under the words */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 55% at 6% 100%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 72%);
  transition: opacity .6s var(--ease);
}
[data-glow="on"] .vhero__shade::after { opacity: 1; }

.vhero__content {
  position: relative;
  max-width: 640px;
  margin-inline: var(--gutter);
  padding-bottom: calc(var(--vh-cue-b) + var(--vh-cue-h) + 22px); /* clear of the scroll cue */
  translate: 0 calc(var(--vp, 0) * -70px);
  opacity: calc(1 - var(--vp, 0) * 1.25);
}
.vhero__eyebrow { align-items: flex-start; font-size: 11.5px; color: rgba(247, 241, 227, .86); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.vhero__eyebrow.eyebrow--dot::before { flex: none; margin-top: .4em; background: #ff8a7a; box-shadow: 0 0 0 4px rgba(255, 138, 122, .22); }
[data-glow="on"] .vhero__eyebrow.eyebrow--dot::before { background: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 22%, transparent), 0 0 14px var(--glow); }

.vhero__title {
  margin-top: 16px;
  font-size: clamp(40px, 9vw, 68px);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 340;
  color: var(--vh-ink);
}
.vhero__line { display: block; }
.vhero__title em { color: #ff8a7a; }
[data-glow="on"] .vhero__title em { color: var(--glow); text-shadow: none; }
/* each word rises out of its own mask; the shadow sits on the mask so the mask can't clip it */
.vhero__w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .12em .14em 0; margin: 0 -.12em -.14em 0;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, .4));
}
.vhero__w > span { display: inline-block; }
[data-glow="on"] .vhero__title em .vhero__w { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 60%, transparent)) drop-shadow(0 2px 18px rgba(0, 0, 0, .35)); }

.vhero__lede {
  display: none; /* narrow screens: the hand fills the frame, so the words stay few (shown on wide screens) */
  margin-top: clamp(16px, 2.4vh, 24px);
  max-width: 44ch;
  font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55;
  color: rgba(247, 241, 227, .86);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}
.vhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.4vh, 34px); }
.vhero__shop { --btn-bg: #f7f1e3; --btn-ink: #12160f; --btn-hover: #ff8a7a; --btn-hover-ink: #12160f; }
[data-glow="on"] .vhero__shop { --btn-bg: var(--glow); --btn-ink: #06110c; --btn-hover: #f7f1e3; --btn-hover-ink: #0c110b; }
.vhero__meet {
  --btn-bg: rgba(12, 16, 10, .22);
  border-color: rgba(247, 241, 227, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vhero__meet:hover .i { transform: translateY(2px); }
.vhero :focus-visible { outline-color: var(--vh-ink); }
[data-glow="on"] .vhero :focus-visible { outline-color: var(--glow); }

/* scroll cue: a bead running down a thin line, bottom centre */
.vhero__cue {
  position: absolute; left: 50%; bottom: var(--vh-cue-b); z-index: 1;
  translate: -50% 0;
  opacity: calc(1 - var(--vp, 0) * 8);
  pointer-events: none;
}
.vhero__cue > span {
  display: grid; justify-items: center; gap: 10px;
  padding-left: .34em;
  font-size: 10.5px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(247, 241, 227, .8);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.vhero__cue i { position: relative; display: block; width: 1px; height: 44px; margin-left: -.34em; background: rgba(247, 241, 227, .28); overflow: hidden; }
.vhero__cue i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%;
  background: var(--vh-ink);
  animation: vh-cue 2.2s var(--ease) infinite;
}
[data-glow="on"] .vhero__cue i::after { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
@keyframes vh-cue { from { transform: translateY(-100%); } 70%, to { transform: translateY(230%); } }

/* entrance: the film settles in, then the eyebrow, the headline word by word, the lede and the
   buttons. The inline script in the hero adds .is-ready once the display face is in. */
.js .vhero__in { opacity: 0; }
.js .vhero.is-ready .vhero__in { animation: vh-in 1.1s var(--ease-out) var(--t, 0s) both; }
.js .vhero__w > span { transform: translateY(112%); }
.js .vhero.is-ready .vhero__w > span { animation: vh-word 1.25s var(--ease-out) calc(.45s + var(--i, 0) * .11s) both; }
@keyframes vh-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vh-word { from { transform: translateY(112%) rotate(5deg); } to { transform: none; } }

/* wide screens: the words keep to the lower left, clear of the hand. With the film covering the hero,
   the hand's left edge lands at min(39% of the width, half the width minus 19.4% of the height). */
@media (min-width: 1200px) and (min-aspect-ratio: 5/4), (min-width: 1000px) and (min-aspect-ratio: 13/10) {
  .vhero {
    --vh-x: max(var(--gutter), calc(6vw - 42px));
    --vh-cw: calc(min(39vw, 50vw - var(--vh-h) * .194) - 36px - var(--vh-x));
  }
  .vhero__shade {
    background:
      linear-gradient(180deg, rgba(var(--vh-shade), .55) 0, rgba(var(--vh-shade), 0) calc(var(--header-h) + 110px)),
      radial-gradient(78% 92% at 0% 100%, rgba(var(--vh-shade), .88) 0%, rgba(var(--vh-shade), .62) 38%, rgba(var(--vh-shade), 0) 76%),
      linear-gradient(0deg, rgba(var(--vh-shade), .6) 0%, rgba(var(--vh-shade), 0) 34%),
      radial-gradient(125% 100% at 52% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%);
  }
  .vhero__content {
    width: var(--vh-cw); max-width: none;
    margin: 0 0 0 var(--vh-x);
    padding-bottom: clamp(52px, 9svh, 104px);
  }
  .vhero__title { font-size: clamp(42px, calc(var(--vh-cw) / 6.9), 112px); }
}
@media (min-width: 1200px) and (min-aspect-ratio: 5/4) {
  .vhero__lede { display: block; }
}

/* Over the film the header reads in light ink in both modes, until the page scrolls */
.page-home:not(.menu-open) .site-header:not(.is-scrolled) .brand { color: var(--dark-ink); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.page-home:not(.menu-open) .site-header:not(.is-scrolled) .site-nav a { color: rgba(247, 241, 227, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.page-home:not(.menu-open) .site-header:not(.is-scrolled) .site-nav a:hover { color: #fff; background: rgba(247, 241, 227, .14); }
.page-home:not(.menu-open) .site-header:not(.is-scrolled) .icon-btn:not([aria-pressed="true"]) {
  color: var(--dark-ink);
  background: rgba(12, 16, 10, .28);
  border-color: rgba(247, 241, 227, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-home:not(.menu-open) .site-header:not(.is-scrolled) .icon-btn:not([aria-pressed="true"]):hover { border-color: var(--dark-ink); }
.page-home:not(.menu-open) .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--dark-ink); }

/* ======================================================= 2. marquee band */
.band {
  --band-bg: #3f4a2f;
  --band-ink: #f1ebdd;
  --band-cap: #e4553f;
  --band-dot: #f6eedd;
  --band-line: rgba(241, 235, 221, .18);
  position: relative;
  background: var(--band-bg);
  color: var(--band-ink);
  padding-top: clamp(14px, 2vw, 26px);
  overflow: hidden;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
[data-glow="on"] .band {
  --band-bg: #0f160e;
  --band-ink: #efe9da;
  --band-cap: var(--glow);
  --band-dot: #0f160e;
  --band-line: color-mix(in srgb, var(--glow) 22%, transparent);
  border-block: 1px solid var(--band-line);
  box-shadow: inset 0 0 120px -40px color-mix(in srgb, var(--glow) 30%, transparent);
}
.band__shift { display: flex; flex: none; will-change: transform; }
.band__set { display: flex; flex: none; align-items: center; }
/* each track holds three copies of its set, so the never-ending loop travels exactly one copy */
.band .marquee__track { animation-name: band-marquee; }
@keyframes band-marquee { to { transform: translateX(calc(-100% / 3)); } }
.band__row--serif { --speed: 70s; }
.band__row--sans { --speed: 52s; margin-top: clamp(12px, 1.6vw, 22px); border-top: 1px solid var(--band-line); padding-block: 15px; }

.band__item {
  flex: none;
  padding-inline: .3em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(46px, 7.4vw, 118px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  white-space: nowrap;
}
.band__item--outline {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--band-ink);
}
[data-glow="on"] .band__item--outline {
  -webkit-text-stroke-color: var(--glow);
  text-shadow: 0 0 26px color-mix(in srgb, var(--glow) 45%, transparent);
}
.band__glyph { flex: none; width: clamp(30px, 3.6vw, 54px); height: auto; margin-inline: .2em; overflow: visible; }
.band__cap { fill: var(--band-cap); transition: fill .6s var(--ease); }
.band__dot { fill: var(--band-dot); }
.band__stem { fill: none; stroke: var(--band-ink); stroke-width: 2.4; stroke-linecap: round; }
[data-glow="on"] .band__glyph { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 70%, transparent)); }

.band__word {
  flex: none;
  padding-inline: 22px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap; opacity: .86;
}
.band__spark { width: 13px; height: 13px; color: var(--band-cap); flex: none; }

/* ========================================================== 3. manifesto */
.manifesto { overflow: clip; }
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.manifesto__aside {
  position: sticky; top: calc(var(--header-h) + 36px);
  display: grid; gap: 30px; justify-items: start;
}
.manifesto__aside .kicker { margin: 0; }
.seal { position: relative; width: clamp(120px, 13vw, 176px); aspect-ratio: 1; color: var(--ink-2); }
.seal svg { width: 100%; height: 100%; overflow: visible; }
.seal text { font-family: var(--font-sans); font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.seal__ring { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; }
.seal__inner { fill: var(--moss-tint); stroke: var(--line-2); stroke-width: 1; transition: fill .6s var(--ease); }
/* The hand is centred on its optical centre, not its box: the point that keeps every edge of the drawing
   (the left cap, the thumb, the wrist) about the same distance from the inner circle, nudged a touch
   toward the palm's weight. The tilt turns around that same point. At 32% of the seal the farthest
   edge sits at about 75% of the inner circle's radius, so it breathes evenly all round. */
.seal .seal__hand {
  position: absolute; left: 50%; top: 50%;
  width: 32%; height: auto;
  transform-origin: 42.5% 50.5%;
  transform: translate(-42.5%, -50.5%) rotate(-8deg);
}
[data-glow="on"] .seal__inner { fill: color-mix(in srgb, var(--glow) 10%, var(--panel)); stroke: color-mix(in srgb, var(--glow) 35%, transparent); }
[data-glow="on"] .seal text { fill: var(--glow); }

.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(31px, 4.35vw, 68px);
  font-weight: 360;
  line-height: 1.08;
  letter-spacing: -.032em;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--ink);
  text-wrap: pretty;
}
.manifesto__text em { font-style: italic; color: var(--accent); font-variation-settings: "SOFT" 100, "WONK" 1; transition: color .6s var(--ease); }
[data-glow="on"] .manifesto__text em { text-shadow: 0 0 26px color-mix(in srgb, var(--glow) 50%, transparent); }
.js .lw { opacity: calc(.14 + var(--o, 0) * .86); transition: opacity .25s linear; }

.proofs {
  list-style: none; padding: 0;
  margin-top: clamp(64px, 9vw, 130px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.proof { position: relative; display: grid; gap: 12px; align-content: start; padding: 30px 28px 6px 0; }
.proof + .proof { padding-left: 28px; border-left: 1px solid var(--line); }
.proof::before { /* draws in along the top rule */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) calc(var(--d, 0ms) + 200ms);
}
.proof.is-in::before { transform: scaleX(1); }
.proof__icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--moss-tint); color: var(--moss);
  transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease);
}
.proof__icon .i { width: 22px; height: 22px; }
[data-glow="on"] .proof__icon { color: var(--glow); box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent), 0 0 24px -6px color-mix(in srgb, var(--glow) 60%, transparent); }
.proof__title { margin-top: 6px; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.12; letter-spacing: -.02em; }
.proof__place { display: block; font-style: italic; color: var(--muted); font-variation-settings: "SOFT" 100, "WONK" 1; }
.proof__text { font-size: 14.5px; color: var(--muted); max-width: 32ch; }

/* ========================================================= 4. collection */
.collection {
  margin-inline: clamp(0px, 1.2vw, 18px);
  border-radius: var(--r-xl);
  background: var(--bg-2);
  transition: background-color .6s var(--ease);
}
[data-glow="on"] .collection { box-shadow: inset 0 0 0 1px var(--line); }
.collection__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: clamp(22px, 3vw, 34px); }
.collection__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.collection__status { font-size: 13px; font-weight: 700; color: var(--muted); }
.collection__grid { --cg: clamp(14px, 2vw, 24px); position: relative; gap: var(--cg); }
@media (min-width: 1081px) {
  .collection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* a filtered set keeps the same card width and sits centred instead of hugging the left */
  .collection__grid.is-filtered { grid-template-columns: repeat(auto-fit, calc((100% - 3 * var(--cg)) / 4 - .5px)); justify-content: center; }
}

/* bundle callout */
.bundle {
  --b-bg: #29311f;
  --b-ink: #f1ebdd;
  --b-muted: rgba(241, 235, 221, .7);
  --b-line: rgba(241, 235, 221, .2);
  position: relative;
  margin-top: clamp(44px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: var(--b-bg); color: var(--b-ink);
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
}
[data-glow="on"] .bundle {
  --b-bg: #111a10;
  --b-line: color-mix(in srgb, var(--glow) 25%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 28%, transparent), 0 40px 90px -40px color-mix(in srgb, var(--glow) 40%, transparent);
}
.bundle__media { position: relative; background: #fff; min-height: 100%; overflow: hidden; }
.js .bundle__media { clip-path: inset(0 0 0 100%); transition: clip-path 1.4s var(--ease); }
.js .bundle.is-in .bundle__media { clip-path: inset(0 0 0 0); }
.bundle__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--bs, 1.06)); transition: transform 1.2s var(--ease); }
.bundle:hover .bundle__img { --bs: 1.02; }
[data-glow="on"] .bundle__img { filter: brightness(.9) saturate(1.05); }
.bundle__body { position: relative; display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(32px, 5vw, 72px); }
.bundle__body::after { /* soft bioluminescent bloom in Glow, warm vignette by day */
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(228, 85, 63, .22), transparent);
}
[data-glow="on"] .bundle__body::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 22%, transparent), transparent); }
.bundle .eyebrow { color: var(--b-muted); }
.bundle .eyebrow--dot::before { background: #ff8a7a; box-shadow: 0 0 0 4px rgba(255, 138, 122, .2); }
[data-glow="on"] .bundle .eyebrow--dot::before { background: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 20%, transparent); }
.bundle__title { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -.035em; font-weight: 370; }
.bundle__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: #ff8a7a; transition: color .6s var(--ease); }
[data-glow="on"] .bundle__title em { color: var(--glow); }
.bundle__text { color: var(--b-muted); max-width: 46ch; font-size: 16px; }
.bundle__includes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bundle__includes a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--b-line); color: var(--b-ink); text-decoration: none; font-size: 13px; font-weight: 700;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.bundle__includes a:hover { background: var(--b-ink); color: var(--b-bg); border-color: var(--b-ink); }
.bundle__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.bundle__now { font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -.03em; }
.bundle__price s { font-family: var(--font-display); font-size: 22px; color: var(--b-muted); }
.bundle__save {
  align-self: center; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--amanita); color: #fff7f2; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
[data-glow="on"] .bundle__save { color: #1a0b08; }
.bundle__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.bundle__link { color: var(--b-ink); }

/* ============================================================ 5. founder */
.founder {
  position: relative;
  min-height: max(600px, 100svh);
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
  background: var(--dark); color: var(--dark-ink);
}
.founder__media { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.founder__video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.founder__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18, 22, 15, .72) 0%, rgba(18, 22, 15, .4) 42%, rgba(18, 22, 15, 0) 72%),
    linear-gradient(180deg, rgba(18, 22, 15, .5) 0%, rgba(18, 22, 15, .1) 30%, rgba(18, 22, 15, .45) 64%, rgba(18, 22, 15, .92) 100%);
}
[data-glow="on"] .founder__scrim {
  background:
    linear-gradient(180deg, rgba(12, 17, 11, .7) 0%, rgba(12, 17, 11, .25) 32%, rgba(12, 17, 11, .7) 64%, rgba(12, 17, 11, .96) 100%),
    radial-gradient(90% 70% at 85% 10%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%);
}
.founder__inner { position: relative; padding-block: clamp(120px, 14vw, 200px) clamp(56px, 7vw, 100px); }
.founder__quote { margin: 8px 0 clamp(28px, 4vw, 44px); }
.founder__quote p {
  font-family: var(--font-display); font-weight: 350;
  font-size: clamp(40px, 6.6vw, 108px); line-height: .97; letter-spacing: -.045em;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  max-width: 13.5ch;
  text-wrap: balance;
}
.founder__quote em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.founder__quote blockquote { margin: 0; }
.founder__mark {
  display: block; height: .5em; margin: 0 0 .02em -.04em;
  font-family: var(--font-display); font-size: clamp(90px, 11vw, 180px); line-height: .9; font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: #ff8a7a;
}
[data-glow="on"] .founder__mark { color: var(--glow); text-shadow: 0 0 30px color-mix(in srgb, var(--glow) 55%, transparent); }
.founder__quote .founder__more {
  margin-top: clamp(18px, 2vw, 26px); max-width: 44ch;
  font-family: var(--font-display); font-style: italic; font-weight: 340;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: rgba(241, 235, 221, .84);
}
.founder__quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-weight: 700; font-size: 15px; color: rgba(241, 235, 221, .8); }
.founder__line { width: 44px; height: 1px; background: currentColor; }
.founder :focus-visible { outline-color: #f1ebdd; }

/* ===================================================== 6. inside the shop */
.chalk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.inside { overflow: clip; }
.inside__stage { position: relative; margin: 0; padding-block: clamp(24px, 3vw, 40px) 0; }
.inside__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 60px 100px -60px rgba(var(--shadow), .6);
  container-type: inline-size;
}
/* The photo and its annotation overlay move together (parallax), so the marks stay on the words.
   The layer keeps the photo's own 4:3 ratio and is taller than the frame; js sets --pp (-.5 to .5). */
.inside__layer {
  --lw: 100%; --lx: 0%; --ly: -8%; --amp: -10%;
  position: absolute; top: 0; left: var(--lx);
  width: var(--lw); aspect-ratio: 4 / 3;
  transform: translate3d(0, calc(var(--ly) + var(--pp, 0) * var(--amp)), 0);
  will-change: transform;
}
.inside__img { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-glow="on"] .inside__img { filter: brightness(.8) saturate(.95); }
.inside__caption {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.inside__caption .i { width: 16px; height: 16px; color: var(--accent); }

/* chalk marks drawn over the real wall (viewBox = photo pixels) */
.inside__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mark { --chalk: #f7f2e6; }
.mark path {
  fill: none; stroke: var(--chalk); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  filter: url(#chalk-rough);
  transition: stroke-dashoffset 1.3s var(--ease) calc(.35s + var(--i) * .4s);
}
.mark .mark__arrow { transition-duration: .8s; transition-delay: calc(1.05s + var(--i) * .4s); }
.mark .mark__head { stroke-width: 7.5; transition-duration: .35s; transition-delay: calc(1.75s + var(--i) * .4s); }
.inside__stage.is-in .mark path { stroke-dashoffset: 0; }
.mark__badge { display: none; }
.mark__badge circle { fill: var(--chalk); }
.mark__badge text { fill: #1d231c; font-family: var(--font-display); font-style: italic; font-size: 40px; font-weight: 500; }
[data-glow="on"] .mark { --chalk: var(--glow); }
[data-glow="on"] .inside__marks { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 70%, transparent)); }

/* desktop: a small label beside each mark */
.inside__tag {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: inline-flex; align-items: center; gap: .75em;
  padding: .5em 1.1em .5em .5em;
  border-radius: 999px;
  background: rgba(16, 20, 14, .66);
  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2);
  color: #f7f2e6;
  box-shadow: 0 0 0 1px rgba(247, 242, 230, .2), 0 16px 34px -16px rgba(0, 0, 0, .7);
  font-size: clamp(11.5px, 1.08cqi, 14.5px); font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  white-space: nowrap;
  transition: opacity .7s var(--ease), translate .9s var(--ease);
  transition-delay: calc(1.5s + var(--i) * .4s);
}
.inside__tag--right { transform: translateY(-50%); }
.inside__tag--above { transform: translateY(-100%); }
.inside__tag > b {
  display: grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%;
  background: #f7f2e6; color: #1d231c;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1em; letter-spacing: 0;
}
.inside__tag span b { font-weight: 900; letter-spacing: .04em; }
.js .inside__tag { opacity: 0; translate: 0 10px; }
.js .inside__stage.is-in .inside__tag { opacity: 1; translate: none; }
[data-glow="on"] .inside__tag { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 40%, transparent), 0 0 30px -8px color-mix(in srgb, var(--glow) 55%, transparent); }
[data-glow="on"] .inside__tag > b { background: var(--glow); color: #0c110b; }

/* tablet/phone: numbered marks on the photo, phrases listed under it */
.inside__legend { display: none; list-style: none; padding: 0; }
.inside__ln {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-display); font-style: italic; font-size: 15px; font-weight: 500;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
[data-glow="on"] .inside__ln { background: var(--glow); color: #0c110b; box-shadow: 0 0 18px -4px var(--glow); }

/* values, in the chalkboard's own voice: big chalk numerals, hand-underlined titles */
.values {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(56px, 8vw, 110px);
}
.value { --rx: 0deg; --ry: 0deg; perspective: 900px; }
.value__card {
  position: relative; height: 100%;
  display: grid; align-content: start;
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--r-l);
  background: var(--panel); border: 1px solid var(--line);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease), background-color .6s var(--ease);
}
.value:hover .value__card { box-shadow: 0 30px 60px -30px rgba(var(--shadow), .35); border-color: var(--line-2); }
[data-glow="on"] .value:hover .value__card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--glow) 35%, transparent); }
.value__n {
  display: block; margin-bottom: clamp(22px, 2.6vw, 38px);
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(66px, 6.6vw, 108px); line-height: .8; letter-spacing: -.05em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--accent);
  transition: color .5s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.value:hover .value__n { color: var(--accent); }
[data-glow="on"] .value__n { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 45%, transparent)); }
.value__title {
  font-style: italic; font-weight: 380; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1.02; letter-spacing: -.03em;
}
.value__line { width: min(80%, 230px); height: 12px; margin-top: 4px; overflow: visible; color: var(--accent); }
.value__line path {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease) calc(var(--d, 0ms) + 450ms);
}
.js .value.is-in .value__line path, html:not(.js) .value__line path { stroke-dashoffset: 0; }
[data-glow="on"] .value__line { filter: drop-shadow(0 0 5px var(--glow)); }
.value__text { margin-top: 16px; color: var(--muted); font-size: 15px; }

/* ============================================================ 7. reviews */
.reviews { overflow: hidden; isolation: isolate; }
.reviews__glow {
  position: absolute; inset: -30% -10% auto auto; width: min(70vw, 900px); aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(228, 85, 63, .14), transparent);
}
[data-glow="on"] .reviews__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 14%, transparent), transparent); }
.reviews .section-head { align-items: end; }
.page-home .section-head .reviews__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; font-size: 13.5px; font-weight: 700; color: rgba(241, 235, 221, .72); }
.reviews__note .i { width: 16px; height: 16px; color: #b5c98f; }
.reviews__grid {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.review--lead { grid-row: span 2; }
.review__fig {
  position: relative; height: 100%; margin: 0;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(26px, 3.4vw, 48px);
  border-radius: var(--r-l);
  background: rgba(241, 235, 221, .05);
  border: 1px solid rgba(241, 235, 221, .12);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .6s var(--ease);
}
.review:hover .review__fig { border-color: rgba(241, 235, 221, .3); transform: translateY(-4px); }
.review--lead .review__fig { background: #efe7d6; color: var(--dark); border-color: transparent; }
[data-glow="on"] .review--lead .review__fig { background: color-mix(in srgb, var(--glow) 8%, #131a12); color: var(--dark-ink); border-color: color-mix(in srgb, var(--glow) 35%, transparent); box-shadow: 0 0 60px -20px color-mix(in srgb, var(--glow) 40%, transparent); }
[data-glow="on"] .review:not(.review--lead):hover .review__fig { border-color: color-mix(in srgb, var(--glow) 40%, transparent); }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.review__q { width: 44px; height: 44px; color: #ff8a7a; }
.review--lead .review__q { width: clamp(52px, 5vw, 72px); height: auto; aspect-ratio: 1; color: var(--amanita); }
[data-glow="on"] .review__q, [data-glow="on"] .review--lead .review__q { color: var(--glow); }
/* five big, warm gold stars: the first thing to read on every card */
.review__stars { gap: 4px; color: #ecb85a; }
.review__stars .i { width: 30px; height: 30px; }
.review--lead .review__stars { color: #b27a1c; }
[data-glow="on"] .review__stars,
[data-glow="on"] .review--lead .review__stars {
  color: #f5c86a;
  filter: drop-shadow(0 0 7px rgba(245, 200, 106, .55)) drop-shadow(0 0 18px rgba(245, 200, 106, .22));
}
.review__text { margin: 0; flex: 1; }
.review__text p {
  font-family: var(--font-display); font-weight: 380; letter-spacing: -.02em; line-height: 1.18;
  font-size: clamp(21px, 1.9vw, 28px); font-variation-settings: "SOFT" 100, "WONK" 0;
}
.review--lead .review__text { display: flex; align-items: center; }
.review--lead .review__text p { font-size: clamp(32px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -.032em; }
.review__by { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.review__by > span:last-child { display: grid; gap: 2px; }
.review__by b { font-weight: 800; font-size: 15px; }
.review__by a, .review__by span span { color: inherit; opacity: .72; font-weight: 600; text-decoration: none; }
.review__by a:hover { opacity: 1; text-decoration: underline; }
.review__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 20px; font-style: italic;
  background: rgba(241, 235, 221, .12); color: inherit;
}
.review--lead .review__avatar { background: var(--dark); color: #efe7d6; }
[data-glow="on"] .review--lead .review__avatar { background: var(--glow); color: #0c110b; }
.reviews :focus-visible { outline-color: #f1ebdd; }

/* ===================================================== 8. journal teaser */
.notes {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px); align-items: start;
}
.note__link { display: grid; gap: 20px; height: 100%; color: inherit; text-decoration: none; align-content: start; }
.note__media { position: relative; height: clamp(240px, 27vw, 400px); border-radius: var(--r-l); overflow: hidden; background: var(--chip); }
.note__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.note__link:hover .note__media img { transform: scale(1.05); }
[data-glow="on"] .note__media img { filter: brightness(.88); }
.note__body { display: grid; gap: 12px; justify-items: start; }
.note__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.note__mi { white-space: nowrap; }
/* the separator belongs to the item after it, so a wrap never strands it at a line end */
.note__mi--sep::before { content: "\00B7"; content: "\00B7" / ""; margin-right: 10px; }
.note__title {
  font-size: clamp(22px, 2vw, 30px); line-height: 1.12;
  background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease);
  padding-bottom: 2px;
}
.note--feature .note__title { font-size: clamp(28px, 3vw, 44px); line-height: 1.04; letter-spacing: -.03em; }
.note--side .note__title { font-size: clamp(20px, 1.75vw, 25px); }
.note__link:hover .note__title { background-size: 100% 1px; }
.note__summary { color: var(--muted); font-size: 16px; max-width: 54ch; }
.note__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.note__more .i { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.note__link:hover .note__more .i { transform: translateX(4px); }

/* ========================================================== 9. mascot CTA */
.journal-teaser { padding-bottom: calc(var(--section) * .7); }
.mascot { text-align: center; overflow: clip; padding-top: calc(var(--section) * .5); }
.mascot::before { /* soft light pool behind the headline */
  content: ""; position: absolute; left: 50%; top: 52%; width: min(90vw, 1100px); aspect-ratio: 2 / 1; z-index: -1;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--amanita) 9%, transparent), transparent);
}
[data-glow="on"] .mascot::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 16%, transparent), transparent); }
.mascot__inner { display: grid; justify-items: center; }
.mascot__title {
  max-width: 12.5ch;
  font-size: clamp(44px, 8.6vw, 140px);
  line-height: 1; letter-spacing: -.048em; font-weight: 350;
}
.mascot__pill {
  --mp: 1;
  position: relative; top: -.07em;
  display: inline-block; vertical-align: middle;
  width: calc(1.1em + var(--mp) * 1.05em);
  height: .8em;
  margin-inline: .04em;
  border-radius: 999px; overflow: hidden;
  background: var(--dark);
  box-shadow: 0 18px 40px -18px rgba(var(--shadow), .55);
  transform: scale(.3); opacity: 0;
  transition: transform 1.2s var(--ease) .35s, opacity .6s var(--ease) .35s, box-shadow .6s var(--ease);
}
.js .mascot__title.is-in .mascot__pill, html:not(.js) .mascot__pill { transform: none; opacity: 1; }
.mascot__pill video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
[data-glow="on"] .mascot__pill { box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow) 45%, transparent), 0 0 50px -6px color-mix(in srgb, var(--glow) 55%, transparent); }
.mascot__lede { margin-top: clamp(24px, 3vw, 36px); max-width: 52ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }
.mascot__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px); }

/* =========================================================== responsive */
@media (max-width: 1080px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: 28px; }
  .manifesto__aside { position: static; display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .seal { width: 112px; }
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 26px; }

  /* collection: a snap scroller instead of four rows of near-identical cards */
  .collection__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(42%, 320px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 20px;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .collection__grid::-webkit-scrollbar { display: none; }
  .collection__grid > .pcard { scroll-snap-align: start; }
  .bundle { grid-template-columns: 1fr; }
  .bundle__media { aspect-ratio: 16 / 10; min-height: 0; }

  .inside__tag { display: none; }
  .mark .mark__arrow, .mark .mark__head { display: none; }
  .mark__badge { display: inline; }
  .js .mark__badge { opacity: 0; transition: opacity .6s var(--ease) calc(1.1s + var(--i) * .4s); }
  .js .inside__stage.is-in .mark__badge { opacity: 1; }
  .mark path { stroke-width: 8.5; }
  .inside__legend {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
  }
  .inside__legend li {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.15; letter-spacing: -.01em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  .values { grid-template-columns: 1fr; }
  .value__card { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 48px); align-items: start; }
  .value__card > :not(.value__n) { grid-column: 2; }
  .value__n { grid-column: 1; grid-row: 1 / span 3; margin: 0; font-size: 88px; min-width: 1.2em; }
  .value__text { max-width: 60ch; margin-top: 12px; }

  .reviews__grid { grid-template-columns: 1fr; }
  .review--lead { grid-row: auto; }
  .notes { grid-template-columns: 1fr 1fr; }
  .note--feature { grid-column: 1 / -1; }
  .note--feature .note__media { height: clamp(260px, 48vw, 460px); }
  .note--side .note__media { height: clamp(200px, 30vw, 300px); }
}

@media (max-width: 760px) {
  /* Phones: the 16:9 film would be cropped to a sliver of the hand at full height, so it fills the top
     two thirds (whole hand and both caps in view) and melts into the dark ground where the words sit. */
  .vhero__media {
    inset: 0 0 auto 0; height: 68%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .vhero__video { object-position: 54% 40%; }
  .vhero__eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  .vhero__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .vhero__actions .btn { width: 100%; height: 48px; }
  .vhero { --vh-cue-h: 54px; }
  .vhero__cue > span { gap: 8px; font-size: 9.5px; }
  .vhero__cue i { height: 30px; }
  .review__stars { gap: 3px; }
  .review__stars .i { width: 26px; height: 26px; }

  .kicker__n::after { width: 18px; }
  .band__word { padding-inline: 16px; font-size: 11.5px; }
  .proofs { grid-template-columns: 1fr; }
  .proof, .proof + .proof { padding: 26px 0 4px; border-left: 0; }
  .proof + .proof { border-top: 1px solid var(--line); margin-top: 22px; }
  .proof:nth-child(n + 3) { margin-top: 22px; }

  .collection { margin-inline: 0; border-radius: var(--r-l); }
  .collection__grid { grid-auto-columns: min(78%, 300px); }
  .collection__status { width: 100%; }
  .bundle { border-radius: var(--r-l); }
  .bundle__media { aspect-ratio: 1 / 1; }
  .bundle__actions .btn { width: 100%; }

  .founder { min-height: max(560px, 92svh); }

  /* portrait crop of the chalk wall: the layer is sized from the frame height */
  .inside__frame { aspect-ratio: 4 / 5; border-radius: var(--r-l); }
  .inside__layer { --lw: 186.7%; --lx: 0%; --ly: -5.3%; --amp: -7%; }
  .mark path { stroke-width: 9.5; }
  .inside__legend { grid-template-columns: 1fr; gap: 12px; }

  .notes { grid-template-columns: 1fr; }
  .note--side .note__link { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; }
  .note--side .note__media { height: auto; aspect-ratio: 1; border-radius: var(--r); }
  .note--side .note__title { font-size: 19px; }
  .note--side .note__more { display: none; }

  .value__card { grid-template-columns: 1fr; }
  .value__card > :not(.value__n) { grid-column: auto; }
  .value__n { grid-column: auto; grid-row: auto; margin-bottom: 20px; font-size: 64px; }

  .mascot__title { max-width: 11ch; }
  .mascot__pill {
    display: block; top: 0;
    width: min(100%, 300px); height: auto; aspect-ratio: 5 / 4;
    margin: .22em auto .18em;
    border-radius: 999px 999px 28px 28px;
  }
  .mascot__actions { width: 100%; }
  .mascot__actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .bundle__body { padding: 28px 22px 30px; }
  .bundle__includes a { height: 30px; padding: 0 12px; font-size: 12.5px; }
}

/* no js: show the drawn states */
html:not(.js) .mark path { stroke-dashoffset: 0; }

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* the hero film keeps playing; only the entrance and the scroll parallax step aside */
  .vhero__media, .js .vhero__in, .js .vhero__w > span { animation: none !important; opacity: 1; transform: none; }
  .vhero__media, .vhero__content { translate: none; }
  .vhero__content { opacity: 1; }
  .js .lw { opacity: 1; }
  .band__shift, .founder__media, .seal__ring { transform: none !important; }
  .inside__layer { --pp: 0 !important; }
  .mark path, .value__line path { stroke-dashoffset: 0 !important; }
  .js .inside__tag, .js .mark__badge { opacity: 1 !important; translate: none; }
  .mascot__pill { transform: none !important; opacity: 1 !important; }
}