/* ═══════════════════════════════════════════════════════════════════════════
   $DREAMER — see DESIGN.md. White paper, black ink, one accent, no pills.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
  --paper:      #ffffff;
  --paper-alt:  #f6f5f1;
  --ink:        #0b0b0c;
  --ink-mid:    #55555c;
  --ink-soft:   #8e8e96;
  --rule:       rgba(11, 11, 12, .14);
  --rule-firm:  rgba(11, 11, 12, .30);
  --accent:     #1b44ff;

  --sans: "Archivo", "Archivo Expanded", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --fs-mega:  clamp(3.4rem, 11vw, 10rem);
  --fs-hero:  clamp(3.1rem, 9.1vw, 8.4rem);
  --fs-xl:    clamp(2.6rem, 6.4vw, 5.6rem);
  --fs-lg:    clamp(1.9rem, 3.1vw, 2.9rem);
  --fs-md:    clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-sm:    .95rem;
  --fs-label: .72rem;

  --gutter: clamp(20px, 4vw, 56px);
  --max:    1560px;
  --section: clamp(88px, 11vw, 176px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.u-sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; z-index: 200; inset: 12px auto auto 12px;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-label);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── layout primitives ───────────────────────────────────────────────────── */
.wrap { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 48px); }
/* no rules at section boundaries: they were cutting the clouds in half.
   Separation comes from the padding instead. */
.section { padding-block: var(--section); position: relative; }

/* ── shared type ─────────────────────────────────────────────────────────── */
.label {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--ink-mid);
  display: flex; align-items: baseline; gap: .7em;
}
.label i { font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.label i::after { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--rule-firm); margin-left: .7em; vertical-align: .3em; }

.outline {
  color: transparent;
  -webkit-text-stroke-width: clamp(1.4px, .28vw, 3.4px);
  -webkit-text-stroke-color: var(--ink);
}

.section__title {
  font-size: var(--fs-xl); font-weight: 900; font-stretch: 112%;
  letter-spacing: -.042em; line-height: .86; text-wrap: balance;
}
.section__title--tight { margin-bottom: clamp(28px, 3.5vw, 52px); }
.section__note { max-width: 46ch; color: var(--ink-mid); font-size: var(--fs-sm); }

/* title on the left, its aside set against it on the right baseline */
.section__head {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 48px);
  align-items: end; margin-bottom: clamp(40px, 5vw, 80px);
}
.section__head .label { grid-column: 1 / 13; margin-bottom: clamp(20px, 2.4vw, 32px); }
.section__head .section__title { grid-column: 1 / 8; }
.section__head .section__note { grid-column: 9 / 13; padding-bottom: .5em; }

/* ── controls ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 30px; border-radius: 4px;
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  transition: background-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }
.btn--sm { padding: 13px 20px; }
.btn--wide { padding: 22px 44px; font-size: .8rem; }

.link-arrow {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid var(--rule-firm); padding-bottom: 6px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════  INTRO  ══════════════════════════════════
   No JS, no intro: .intro stays display:none so nobody is ever stranded
   behind a curtain that never lifts. With JS, the whole sequence is pure
   CSS animation, so it also clears itself if the script later throws.      */
.intro { display: none; }
.js .intro {
  display: block; position: fixed; inset: 0; z-index: 200;
  background: var(--paper); overflow: hidden;
  animation: intro-clear .55s var(--ease) 2.5s both;
}
/* cloud-a's ink sits dead centre of its own viewBox, so a stage anchored at
   50/50 puts the middle of the cloud at the middle of the screen and the name
   can sit inside it. The stage carries the drift, so type and cloud lift as
   one piece. max-width has to be released here: the global reset caps every
   svg at 100% and was cropping the cloud. */
.intro__stage {
  position: absolute; left: 50%; top: 50%;
  width: min(92vw, 1500px);
  will-change: transform, opacity; backface-visibility: hidden;
  animation: intro-grow 2.9s cubic-bezier(.38, 0, .3, 1) both,
             intro-fade 2.9s linear both;
}
.intro__cloud { display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
/* drawn many times life size, so the pen gets finer to land at a normal weight */
.intro__cloud .ink { stroke-width: .68px; }
@media (max-width: 599px) { .intro__cloud .ink { stroke-width: 1.5px; } }

/* one centred stack, so the name and the line can never drift apart */
.intro__copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 1.5vw, 24px); text-align: center; padding-inline: 7%;
}
.intro__mark {
  font-size: clamp(1.7rem, 6.6vw, 5.8rem); font-weight: 900; font-stretch: 118%;
  letter-spacing: -.05em; line-height: 1; will-change: transform, opacity;
  animation: intro-mark 2.5s cubic-bezier(.3, .1, .2, 1) .35s both;
}
.intro__mark span { color: var(--accent); }
.intro__line {
  font-family: var(--hand); font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.4rem);
  color: var(--ink-mid); will-change: transform, opacity;
  animation: intro-line 2.3s cubic-bezier(.3, .1, .2, 1) .6s both;
}

/* Growth and fade are two separate animations on purpose. Interleaving them in
   one set of keyframes makes the scale pause between the opacity stops, which
   is what read as stuttering. Split like this, the cloud grows once, on a
   single curve, from the middle of the screen outward, and never stops. */
@keyframes intro-grow {
  from { transform: translate(-50%, -50%) scale(.9); }
  to   { transform: translate(-50%, -50%) scale(1.52); }
}
@keyframes intro-fade {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes intro-mark {
  0%   { opacity: 0; transform: scale(.9); }
  28%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.14); }
}
@keyframes intro-line {
  0%   { opacity: 0; transform: translateY(12px); }
  34%  { opacity: 1; transform: translateY(0); }
  68%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-16px); }
}
.intro__skip {
  position: absolute; left: 50%; bottom: clamp(24px, 4vh, 48px); transform: translateX(-50%);
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink-soft); white-space: nowrap;
  animation: intro-skip 2.2s var(--ease) .9s both;
}
@keyframes intro-skip {
  0%, 100% { opacity: 0; }
  30%, 72% { opacity: 1; }
}
@keyframes intro-clear { to { opacity: 0; visibility: hidden; } }

/* ── masthead ────────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--rule); }
.masthead__inner {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
  height: clamp(64px, 7vw, 86px);
}
.wordmark { display: flex; align-items: baseline; font-weight: 900; font-stretch: 118%; letter-spacing: -.04em; font-size: 1.32rem; }
.wordmark__sigil { color: var(--accent); }
.wordmark__text { }

.nav { display: flex; gap: clamp(18px, 2.2vw, 34px); margin-right: auto; }
.nav a {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-mid); padding: 6px 0; position: relative;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); }

.masthead__end { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* X — the only icon on the page, because a wordmark for it would read worse */
.icon-link {
  display: grid; place-items: center; width: 43px; height: 43px;
  border: 1px solid var(--rule-firm); border-radius: 4px; color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.x-icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* contract address — lives where you actually need it, in How to buy */
.ca {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap;
  border: 1px solid var(--ink); border-radius: 4px;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 3.2vw, 44px);
  font-size: clamp(.82rem, 1vw, .95rem); font-variant-numeric: tabular-nums;
}
.ca__key {
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase;
  letter-spacing: .18em; color: var(--ink-soft);
}
.ca__val { font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; margin-right: auto; }
.ca__copy {
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  border: 1px solid var(--rule-firm); border-radius: 4px; padding: 9px 14px; color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ca__copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ca.is-copied .ca__copy { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }

/* ── mobile menu ─────────────────────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 120; background: var(--paper);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .28s var(--ease);
}
.menu[hidden] { display: none; }   /* must beat the display above, or it eats every click */
.menu.is-open { opacity: 1; }
.menu__head { display: flex; align-items: center; justify-content: space-between; height: clamp(64px, 7vw, 86px); }
.menu__close { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.menu__nav { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid var(--rule); }
.menu__nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: clamp(18px, 4vw, 28px) 0; border-bottom: 1px solid var(--rule);
  font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.04em; line-height: 1;
}
.menu__nav i { font-style: normal; font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; color: var(--ink-soft); }
.menu__foot { margin-top: auto; padding-bottom: 32px; display: grid; gap: 20px; justify-items: center; }
.menu__foot .btn { width: 100%; }
.menu__x {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 1px solid var(--rule-firm); padding-bottom: 6px;
}

/* ── doodles: ink + clouds ───────────────────────────────────────────────── */
.ink {
  fill: none; stroke: var(--ink); stroke-width: 2.4px;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w); pointer-events: none; }
.cloud svg { width: 100%; height: auto; overflow: visible; }

/* four nested layers, each owning one transform:
   .cloud      → drifts in from the page edge on entry
   .cloud__drift  → scroll parallax (JS)
   .cloud__travel → the long crossing, for distant clouds only
   .cloud__float  → the breath                                        */
.js .cloud {
  opacity: 0; transform: translate3d(var(--from, -60px), 0, 0) scale(.94);
  transition: opacity 1.1s var(--ease) var(--cd, 0s), transform 1.4s var(--ease) var(--cd, 0s);
}
.js .cloud.is-in { opacity: 1; transform: none; }
.cloud__drift { will-change: transform; }
.cloud__float, .cloud__travel { will-change: transform; }
.cloud__float { animation: float var(--dur, 22s) ease-in-out var(--delay, 0s) infinite; }
.cloud__float { animation-duration: calc(var(--dur, 22s) * .72); }   /* livelier air */
.cloud__travel { animation: travel var(--travel, 96s) linear var(--travel-delay, 0s) infinite; }

/* The breath is folded into the float transform on purpose. Animating a scale
   on the <use> inside the SVG sits *under* the turbulence filter, so every
   frame re-rasterises the filter; out here it is a plain compositor transform. */

/* distance = thinner, paler ink */
.cloud--far .ink { stroke: var(--ink-soft); stroke-width: 1.6px; }
.cloud--far, .js .cloud--far.is-in { opacity: .85; }

/* a wandering figure-eight rather than a straight bob: reads as air, not a loop */
@keyframes float {
  0%,  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  18%       { transform: translate3d(22px, -15px, 0) rotate(1.4deg) scale(1.03); }
  40%       { transform: translate3d(38px, 2px, 0) rotate(-.6deg) scale(1.05); }
  62%       { transform: translate3d(20px, 18px, 0) rotate(-1.2deg) scale(1.02); }
  82%       { transform: translate3d(-9px, 8px, 0) rotate(.8deg) scale(1.01); }
}
@keyframes travel {
  from { transform: translateX(calc(-100% - 40px)); }
  to   { transform: translateX(calc(100vw + 40px)); }
}

/* ── speech bubbles ──────────────────────────────────────────────────────── */
.bubble {
  position: relative; display: inline-block; text-align: center;
  font-family: var(--hand); font-weight: 700; line-height: 1.06;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  color: var(--ink); background: var(--paper);
  border: 2.4px solid var(--ink);
  border-radius: 48% 52% 47% 53% / 55% 45% 55% 45%;
  padding: .7em 1.1em .75em;
  transform: rotate(var(--rot, -2deg));
  filter: url(#ink-wobble-soft);
  animation: bob 7s ease-in-out var(--bob, 0s) infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(var(--rot, -2deg)) translateY(0); }
  50%      { transform: rotate(var(--rot, -2deg)) translateY(-7px); }
}
.bubble::after {
  content: ""; position: absolute; left: 22%; bottom: -13px;
  width: 20px; height: 20px; background: var(--paper);
  border-right: 2.4px solid var(--ink); border-bottom: 2.4px solid var(--ink);
  border-radius: 0 0 8px 0;
  transform: rotate(38deg) skew(-6deg);
}
.bubble--lg { font-size: clamp(1.5rem, 2.6vw, 2.6rem); }
.bubble--right::after { left: auto; right: 22%; }

/* wojak figure treatment */
.wojak { display: block; height: auto; }
.figure { position: relative; }

/* ═══════════════════════════════  HERO  ═══════════════════════════════════ */
.hero { position: relative; padding-block: clamp(60px, 8.5vw, 128px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: end; }
.hero__type { grid-column: 1 / 8; }

.hero__title {
  font-size: var(--fs-hero); font-weight: 900; font-stretch: 114%;
  letter-spacing: -.05em; line-height: .9; margin-bottom: clamp(28px, 3.5vw, 48px);
}
/* each line rises out of its own clipped band */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__title i { display: block; font-style: normal; }
.js .hero__title i {
  transform: translateY(105%);
  transition: transform 1.05s cubic-bezier(.16, .84, .28, 1) var(--ld, 0s);
}
.js .hero__title.is-in i { transform: none; }
.hero__title .line:nth-child(2) i { --ld: .1s; }
.hero__title .line:nth-child(3) i { --ld: .2s; }
.hero__lede { max-width: 44ch; font-size: clamp(1.05rem, 1.45vw, 1.34rem); color: var(--ink-mid); margin-bottom: clamp(30px, 3.4vw, 44px); }
.hero__actions { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }

.hero__scene { grid-column: 8 / 13; position: relative; align-self: end; }
.hero__scene .wojak { width: 116%; max-width: none; margin-left: -8%; margin-bottom: -2%; transition: transform .5s var(--ease); }
.hero__scene .bubble { position: absolute; top: -14%; left: -6%; z-index: 2; }

/* ═══════════════════════════════  MARQUEE  ════════════════════════════════ */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding-block: clamp(14px, 1.6vw, 22px); }
.marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); }
.marquee__group b { font-size: clamp(1.1rem, 2.1vw, 2rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.marquee__group i { font-style: normal; opacity: .5; font-size: .9rem; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ═══════════════════════════════  MANIFESTO  ══════════════════════════════ */
.manifesto { overflow: hidden; }
.manifesto__grid { align-items: start; }
.manifesto .rail { grid-column: 1 / 4; grid-row: 1; position: relative; }
.manifesto .lede { grid-column: 4 / 12; grid-row: 1; }
.manifesto__answer { grid-column: 1 / 13; grid-row: 2; }
.manifesto__cols { grid-column: 4 / 12; grid-row: 3; }
.manifesto__close { grid-column: 4 / 13; grid-row: 4; }

/* the counter-example, set in the margin the lede leaves empty */
.manifesto__aside { grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: end; position: relative; width: min(100%, 230px); }
.manifesto__aside .wojak { width: 100%; }
.manifesto__aside .bubble { position: absolute; top: -22px; left: -46%; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.manifesto__aside figcaption {
  margin-top: 12px; text-align: right; font-size: var(--fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-soft);
}

.rail .label { margin-bottom: clamp(28px, 3vw, 44px); }
.rail__figure { position: relative; width: min(100%, 260px); }
.rail__figure .wojak { width: 100%; }
.rail__figure .bubble { position: absolute; top: -18px; right: -34px; }
.rail__caption {
  margin-top: 18px; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .16em; font-weight: 700; color: var(--ink-soft); max-width: 22ch; line-height: 1.7;
}
.rail__squiggle { width: min(100%, 210px); margin-top: clamp(24px, 3vw, 40px); overflow: visible; }
.rail__squiggle .ink { stroke-width: 2.6px; }

.lede { font-size: var(--fs-lg); font-weight: 500; line-height: 1.24; letter-spacing: -.02em; max-width: 24ch; }
.dropcap {
  float: left; font-size: 3.1em; line-height: .78; font-weight: 900; font-stretch: 112%;
  padding-right: .09em; margin-top: .04em; letter-spacing: -.04em;
}
/* runs the full measure of the container, edge to edge */
.manifesto__answer {
  font-size: clamp(3rem, 15.4vw, 16.4rem); font-weight: 900; font-stretch: 116%;
  letter-spacing: -.055em; line-height: .82; white-space: nowrap;
  margin: clamp(24px, 3vw, 48px) 0 clamp(34px, 4.4vw, 72px);
}
.manifesto__cols { columns: 2; column-gap: clamp(28px, 4vw, 72px); max-width: 76ch; color: var(--ink-mid); }
.manifesto__cols p { break-inside: avoid; margin-bottom: 1.2em; }
.manifesto__close {
  margin-top: clamp(36px, 4.4vw, 72px); padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-lg); font-weight: 900; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.05;
}

/* ═════════════════════════════  CROWD BAND  ═══════════════════════════════ */
.crowd { position: relative; overflow: hidden; padding-block: clamp(72px, 8.5vw, 130px); background: var(--paper-alt); }
.crowd__inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: center; }
.crowd__type { grid-column: 1 / 8; }
.crowd__title { font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 900; font-stretch: 114%; letter-spacing: -.048em; line-height: .86; }
.crowd__note { margin-top: 24px; max-width: 42ch; color: var(--ink-mid); font-size: var(--fs-sm); }
.crowd__art { grid-column: 9 / 13; position: relative; }
.crowd__art .wojak { width: 100%; }
.crowd__art .bubble { position: absolute; top: -8%; left: -22%; }

/* ═══════════════════════════════  HABITS  ═════════════════════════════════ */
.habits {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto;
}
.habit { position: relative; padding: clamp(32px, 3.4vw, 56px) clamp(20px, 2.4vw, 44px) clamp(40px, 4vw, 64px); border-right: 1px solid var(--rule); }
.habit:first-child { padding-left: 0; }
.habit:last-child { border-right: 0; padding-right: 0; }
.habit:nth-child(2) { transform: translateY(clamp(20px, 3vw, 56px)); }
.habit__num { display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: clamp(20px, 2.4vw, 36px); }
.habit__art { width: clamp(120px, 15vw, 210px); height: auto; margin-bottom: clamp(24px, 3vw, 44px); }
.habit:nth-child(2) .habit__art { width: clamp(130px, 16.5vw, 232px); }
.habit__title { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 900; font-stretch: 114%; letter-spacing: -.045em; line-height: .9; margin-bottom: 18px; }
.habit__body { color: var(--ink-mid); font-size: var(--fs-sm); max-width: 34ch; }

/* ═══════════════════════════════  SEQUENCE  ═══════════════════════════════ */
.sequence { position: relative; overflow: hidden; }
.phases { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; border-top: 1px solid var(--ink); position: relative; z-index: 1; }
.phase {
  display: grid; grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: clamp(16px, 3vw, 48px); align-items: start;
  padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--rule);
  position: relative;
}
.phase__num {
  font-size: clamp(2.2rem, 4.4vw, 4.2rem); font-weight: 900; font-stretch: 110%; line-height: .85;
  color: transparent; -webkit-text-stroke: 1.6px var(--ink);
}
.phase__title { font-size: clamp(1.7rem, 3.2vw, 3rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.04em; line-height: .95; }
.phase__body { color: var(--ink-mid); font-size: var(--fs-sm); max-width: 52ch; }
.phase__state { font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.phase:first-child .phase__state { color: var(--accent); }
/* stands in the gap between the body copy and the state label, never under it,
   and clear of the rule underneath */
.phase__art {
  position: absolute; right: clamp(100px, 11vw, 180px); bottom: 22px;
  width: clamp(78px, 9vw, 132px); opacity: .96; pointer-events: none;
}
/* REM is the shortest title on the page, so it is the one row with room to
   stand something in. Sits in the space the title leaves, never over the copy. */
.phase__art--tall { width: clamp(60px, 7vw, 104px); top: 6%; bottom: auto; left: 38%; right: auto; }

/* ═══════════════════════════════  BUY  ════════════════════════════════════ */
.buy .rail { grid-column: 1 / 4; }
.buy__body { grid-column: 4 / 12; }
.steps { border-top: 1px solid var(--ink); }
.step {
  display: grid; grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(14px, 2.6vw, 40px); align-items: baseline;
  padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--rule);
}
.step__num { font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 900; color: transparent; -webkit-text-stroke: 1.4px var(--ink); font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 900; font-stretch: 110%; letter-spacing: -.035em; line-height: 1.05; }
.step p { color: var(--ink-mid); font-size: var(--fs-sm); max-width: 52ch; }
.buy__warn {
  margin-top: clamp(32px, 3.6vw, 52px);
  font-size: var(--fs-sm); color: var(--ink-soft); max-width: 52ch;
  border-left: 2px solid var(--ink); padding-left: 18px;
}

/* ═══════════════════════════════  OUTRO  ══════════════════════════════════ */
.outro { position: relative; overflow: hidden; border-top: 1px solid var(--rule); padding-block: clamp(80px, 10vw, 160px); }
.outro__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.outro__title { font-size: var(--fs-mega); font-weight: 900; font-stretch: 116%; letter-spacing: -.05em; line-height: .94; margin-bottom: clamp(30px, 4vw, 56px); }
.outro__figure { position: relative; width: min(100%, clamp(220px, 26vw, 400px)); margin-bottom: clamp(44px, 5vw, 76px); }
.outro__figure img { width: 100%; }
.outro__bubble { position: absolute; white-space: nowrap; }
.outro__bubble--l { top: 4%; left: -44%; }
.outro__bubble--r { top: 34%; right: -50%; }

/* ═══════════════════════════════  FOOTER  ═════════════════════════════════ */
.footer { border-top: 1px solid var(--ink); padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(28px, 3vw, 40px); }
.footer__top {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 48px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.footer__links { grid-column: 1 / 7; display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 32px); align-content: start; }
.footer__links a {
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 1px solid var(--rule-firm); padding-bottom: 5px; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__links a:hover { color: var(--accent); border-color: var(--accent); }
.footer__legal { font-size: .82rem; color: var(--ink-soft); max-width: 70ch; line-height: 1.7; }

.footer__mark { border-top: 1px solid var(--rule); padding-top: clamp(20px, 2.4vw, 32px); }
.footer__mark span {
  display: block; font-size: clamp(2.5rem, 13.5vw, 14.4rem); font-weight: 900; font-stretch: 118%;
  letter-spacing: -.055em; line-height: .8; color: transparent;
  -webkit-text-stroke: clamp(1.2px, .2vw, 2.6px) var(--ink);
  white-space: nowrap;
}
.footer__base {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline;
  padding-top: clamp(20px, 2.4vw, 30px);
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--ink-soft);
}
.footer__top-link { margin-left: auto; color: var(--ink); border-bottom: 1px solid var(--rule-firm); padding-bottom: 4px; }
.footer__top-link:hover { color: var(--accent); border-color: var(--accent); }

.outro__zzz { position: absolute; top: -6%; right: -14%; width: clamp(48px, 6vw, 92px); z-index: 2; animation: bob 6s ease-in-out infinite; }

/* ── reveal — only ever hidden when JS is there to bring it back ─────────── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* a rule that draws itself rather than a block that fades */
.reveal--rule { position: relative; border-top: 0; }
.js .reveal--rule { opacity: 1; transform: none; }
.reveal--rule::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--ink);
  transform-origin: left;
}
.js .reveal--rule::before { transform: scaleX(0); transition: transform 1.1s var(--ease) var(--d, 0s); }
.js .reveal--rule.is-in::before { transform: scaleX(1); }

/* hover life */
.habit__art { transition: transform .45s var(--ease); }
.habit:hover .habit__art { transform: translateY(-6px); }
.marquee:hover .marquee__track { animation-play-state: paused; }
.wordmark__sigil { transition: transform .3s var(--ease); display: inline-block; }
.wordmark:hover .wordmark__sigil { transform: translateY(-2px) rotate(-6deg); }

/* ═══════════════════════════════  RESPONSIVE  ═════════════════════════════ */
@media (max-width: 1199px) {
  .hero__type { grid-column: 1 / 8; }
  .hero__scene { grid-column: 8 / 13; }
  /* the rail lies down: label across the top, drawing beside its caption */
  .manifesto .rail, .buy .rail {
    grid-column: 1 / 13; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: start; gap: 4px clamp(20px, 3vw, 40px); margin-bottom: clamp(32px, 4vw, 56px);
  }
  .manifesto .rail { grid-row: 1; }
  .rail .label { grid-column: 1 / 3; margin-bottom: clamp(20px, 3vw, 32px); }
  .rail__figure { grid-column: 1; width: clamp(120px, 22vw, 210px); }
  .rail__squiggle { grid-column: 1; margin-top: 0; width: clamp(140px, 24vw, 210px); }
  .rail__caption { grid-column: 2; margin-top: 0; align-self: end; padding-bottom: 6px; }
  .buy__body { grid-column: 1 / 13; }
  .manifesto .lede { grid-column: 1 / 10; grid-row: 2; }
  .manifesto__aside { grid-column: 10 / 13; grid-row: 2; width: min(100%, 190px); }
  .manifesto__answer { grid-row: 3; }
  .manifesto__cols { grid-column: 1 / 13; grid-row: 4; }
  .manifesto__close { grid-column: 1 / 13; grid-row: 5; }
  .crowd__type { grid-column: 1 / 8; }
  .crowd__art { grid-column: 8 / 13; }
  .section__head .section__title { grid-column: 1 / 9; }
  .section__head .section__note { grid-column: 1 / 8; padding-top: 28px; padding-bottom: 0; }
}

@media (max-width: 899px) {
  .nav { display: none; }
  .burger { display: flex; }
  .masthead__end .btn { display: none; }
  .ca { padding: 7px 10px; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__type { grid-column: 1; }
  .hero__scene { grid-column: 1; margin-top: clamp(44px, 9vw, 72px); width: min(100%, 560px); }
  .hero__scene .wojak { width: 100%; margin-left: 0; }
  .hero__scene .bubble { top: -12%; left: 0; }

  .manifesto__cols { columns: 1; }
  .manifesto .lede { grid-column: 1 / 13; }
  .manifesto__aside { display: none; }   /* one drawing per fold — the Atlas holds this one */
  .buy .rail__squiggle { display: none; }
  .habits { grid-template-columns: 1fr; }
  .habit { border-right: 0; border-bottom: 1px solid var(--rule); padding-inline: 0; }
  .habit:nth-child(2) { transform: none; }
  .habit:last-child { border-bottom: 0; }
  .habit__art { width: clamp(120px, 30vw, 180px); }

  .phase { grid-template-columns: clamp(56px, 14vw, 90px) 1fr; gap: 12px 20px; }
  .phase__title { grid-column: 2; }
  .phase__num { grid-row: 1 / 3; }
  .phase__body { grid-column: 2; }
  .phase__state { grid-column: 2; }
  .phase__art { width: clamp(70px, 20vw, 120px); bottom: auto; top: 12px; right: 0; opacity: .5; }
  .phase__art--tall { display: none; }

  .step { grid-template-columns: clamp(48px, 12vw, 72px) 1fr; gap: 8px 16px; }
  .step h3 { grid-column: 2; }
  .step p { grid-column: 2; }
  .step__num { grid-row: 1 / 3; }

  .crowd__inner { grid-template-columns: 1fr; }
  .crowd__type, .crowd__art { grid-column: 1; }
  .crowd__art { width: min(74%, 320px); margin-top: 40px; }
  .crowd__art .bubble { left: auto; right: -12%; top: -12%; }

  .outro__figure { width: min(72%, 300px); }
  .outro__bubble--l { top: -12%; left: -26%; }
  .outro__bubble--r { top: auto; bottom: 4%; right: -28%; }
  .footer__base { gap: 10px 24px; }
  .footer__top-link { margin-left: 0; }
}

@media (max-width: 599px) {
  /* one drawing per fold: the crossing clouds and the filler marks stand down */
  .cloud--far, .cloud[data-mobile="hide"] { display: none; }

  .masthead__inner { gap: 12px; }
  .ca { font-size: .6rem; padding: 6px 8px; gap: 7px; }
  .ca__key { letter-spacing: .1em; }
  .ca__val { max-width: 10ch; }
  .hero__title { line-height: .86; }
  .hero__actions { gap: 20px; }
  .hero__actions .btn { flex: 1 0 auto; }
  .lede { max-width: none; }
  .dropcap { font-size: 2.6em; }
  .outro__figure { width: min(72%, 260px); }
  .outro__bubble { font-size: 1.1rem; }
  .outro__bubble--l { top: 2%; left: -20%; }
  .outro__bubble--r { top: auto; bottom: 8%; right: -20%; }
  .outro__zzz { right: -6%; }
  .buy__warn { padding-left: 14px; }
  .marquee__group b { font-size: 1.1rem; }
}

/* ── reduced motion ──────────────────────────────────────────────────────────
   Client direction: the weather is the personality of this site, so the clouds,
   bubbles and marquee keep drifting for everyone. What we do drop is the motion
   that hijacks the reader — scroll-linked parallax, jumpy entrances, and
   smooth-scroll — so nothing moves *because* you moved.                        */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition-duration: .001ms; }
  .js .hero__title i { transform: none; transition-duration: .001ms; }
  .js .cloud { opacity: 1; transform: none; transition-duration: .001ms; }
  .js .cloud--far.is-in { opacity: .85; }
  .js .reveal--rule::before { transform: scaleX(1); transition-duration: .001ms; }
  .cloud__drift { transform: none !important; }   /* parallax off, drift stays on */
}