:root {
  --bg: #000;
  --ink: #fff;
  --text: #d9d9d9;
  --text-soft: #cfcfcf;
  --yellow: #fdf51d;
  --pink: #f42a91;
  --green: #33fd1d;
  --gray: #444;
  --cyan: #1dfdfd;
  --strike: #7a7a7a;
  --paper: #fff;
  --ink-dark: #333;
  --ink-deep: #111;
  --ink-soft: #1a1a1a;
  --muted: #8a8a8a;

  --f-display: "Open Sans", "Arial Narrow", sans-serif;
  --f-sans: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.hero__read:focus-visible { outline-color: var(--ink); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Open Sans Condensed ExtraBold from the mockup */
.display, .hero__title, .headline, .measure__label, .measure__bar, .slice__count, .signs__list b,
.other__tags, .duty__lead, .memory__self b, .thirst__title, .thirst__mark,
.final__title, .final__mark {
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
}

/*
  Desktop blocks are composed on a 1440-wide artboard (height: --h, 900 by default).
  1u = 1px of the mockup, scaled to the viewport and capped at 1440.
*/
.hero, .block { container-type: inline-size; background: var(--bg); color: var(--ink); }
.block--light { background: var(--paper); color: #000; }
.hero, .stage { --u: calc(min(100cqw, 1440px) / 1440); }

.stage {
  position: relative;
  max-width: 1440px;
  height: calc(var(--h, 900) * var(--u));
  margin: 0 auto;
  overflow: hidden;
}
.stage > * { position: absolute; }

/* ---------- shared: headline with marker ---------- */
.headline {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: calc(var(--gap, 10) * var(--u));
  font-size: calc(var(--size, 170) * var(--u));
  line-height: .9;
  letter-spacing: var(--track, -.03em);
  white-space: nowrap;
}
.headline__mark {
  padding: calc(var(--pad-t, 4) * var(--u)) calc(var(--pad, 22) * var(--u)) calc(var(--pad-b, 10) * var(--u));
  color: #000;
}
.headline__mark--pink { background: var(--pink); }
.headline__mark--yellow { background: var(--yellow); }
.headline__mark--black { background: #000; color: var(--ink); }

/* ---------- shared: quote ---------- */
.quote blockquote {
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-display);
  font-stretch: 100%;
  color: var(--text);
}
.quote figcaption {
  margin-top: calc(8 * var(--u));
  font: 700 max(12px, calc(16 * var(--u)))/1.5 var(--f-display);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent, var(--pink));
}
.quote--mono blockquote { font: 400 max(15px, calc(22 * var(--u)))/1.6 var(--f-mono); }
.quote--chip figcaption { margin-top: calc(10 * var(--u)); font-size: max(11px, calc(14 * var(--u))); }
.quote--chip figcaption span { display: inline-block; padding: 1px 8px; background: #000; }
.quote--mono figcaption {
  margin-top: calc(10 * var(--u));
  font: 700 max(11px, calc(14 * var(--u)))/1.6 var(--f-mono);
  color: var(--green);
}

/* Shared entrance for the longread's visible headings and body copy. Blocks
   with bespoke sequences (05–07 and 10) keep their own animation scripts. */
.is-motion-armed .longread-motion__title {
  opacity: 0;
  transform: translateY(min(10vw, 150px));
}
.is-motion-play .longread-motion__title {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.22, .65, .3, 1);
}
.is-motion-armed .longread-motion__copy { opacity: 0; }
.is-motion-armed .longread-motion__copy:is(.is-typing, .is-typed) {
  opacity: 1;
  transition: opacity .12s ease;
}
.longread-motion__copy.is-typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .9em;
  margin-left: .12em;
  background: currentColor;
  vertical-align: -.08em;
  animation: longread-caret .58s steps(1, end) infinite;
}
@keyframes longread-caret { 50% { opacity: 0; } }

/* ---------- 00 — HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  /* hands may spill over the bottom edge onto block 01; only the sides are clipped */
  overflow: clip visible;
  isolation: isolate;
  z-index: 3;
  background: none;   /* block 01's carousel shows through underneath the hands */
  /* the whole composition sits this much above centre; kept small so the upper hand
     leaves a band of black above it */
  --hero-lift: calc(10 * var(--u));
}
/* translate stacks on the hands' entrance transform; the copy is lifted with a margin instead,
   since a transform would open a stacking context and drop «Читать» under the fingers */
.hero__hand { translate: 0 calc(-1 * var(--hero-lift)); }
.hero__content { margin-top: calc(-2 * var(--hero-lift)); }
.hero__hand {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: opacity, transform;
}
.hero__hand img {
  width: 100%; height: auto;
  max-width: none;
  will-change: transform;
}
.hero__hand--upper {
  left: calc(-140 * var(--u)); top: calc(70 * var(--u));
  width: calc(900 * var(--u));
  animation: hero-hand-enter-upper 1.25s cubic-bezier(.16, 1, .3, 1) both;
}
.hero__hand--lower {
  right: calc(-140 * var(--u)); top: calc(410 * var(--u));
  width: calc(900 * var(--u));
  animation: hero-hand-enter-lower 1.25s cubic-bezier(.16, 1, .3, 1) .12s both;
}
.hero__hand--upper img { animation: hero-hand-reach-upper 2.2s ease-in-out 1.35s infinite alternate; }
.hero__hand--lower img { animation: hero-hand-reach-lower 2.2s ease-in-out 1.47s infinite alternate; }
@keyframes hero-hand-enter-upper {
  from { opacity: 0; transform: translateX(-38%); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-hand-enter-lower {
  from { opacity: 0; transform: translateX(38%); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-hand-reach-upper {
  from { transform: translate(-12px, -5px) rotate(-.35deg); }
  to { transform: translate(18px, 7px) rotate(.35deg); }
}
@keyframes hero-hand-reach-lower {
  from { transform: translate(12px, 6px) rotate(.3deg); }
  to { transform: translate(-18px, -7px) rotate(-.3deg); }
}
.hero__content {
  position: relative;
  z-index: 3;   /* the hands (z-index 2) pass behind «Гедонизм» */
  display: flex; flex-direction: column; align-items: center;
  gap: calc(10 * var(--u));
  padding-bottom: calc(43 * var(--u));
}
.hero__title {
  font-size: calc(250 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.hero__read {
  position: relative;
  z-index: 3;
  padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u));
  background: var(--yellow);
  font: 800 max(18px, calc(32 * var(--u)))/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .02em; text-transform: uppercase;
  color: #000;
  text-decoration: none;
}
.hero__read:hover { background: var(--ink); }

/* ---------- 01 — ТЫ ХОЧЕШЬ ВСЁ ---------- */
.want, .bought { position: relative; z-index: 2; overflow: visible; }
.want .stage, .bought .stage { overflow: visible; }
.want__carousel {
  /* shifted left; widened by the same amount so the right end stays off screen */
  left: -26%; top: calc(80 * var(--u));
  width: 136%; height: calc(720 * var(--u));
  overflow: visible;
  transform: rotate(-30deg);
  transform-origin: center;
}
.want__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: want-carousel-scroll 4s linear infinite;
  will-change: transform;
}
.want__set {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--u));
  padding-right: calc(24 * var(--u));
}
.want__set img {
  flex: none;
  max-width: none;
  object-fit: cover;
}
.want__set img:nth-child(1) { width: calc(360 * var(--u)); height: calc(680 * var(--u)); }
.want__set img:nth-child(2) { width: calc(620 * var(--u)); height: calc(430 * var(--u)); margin-top: calc(130 * var(--u)); }
.want__set img:nth-child(3) { width: calc(410 * var(--u)); height: calc(720 * var(--u)); margin-top: calc(40 * var(--u)); }
.want__set img:nth-child(4) { width: calc(700 * var(--u)); height: calc(500 * var(--u)); margin-top: calc(170 * var(--u)); }
@keyframes want-carousel-scroll { to { transform: translateX(-50%); } }
.want__title { left: calc(618 * var(--u)); top: calc(363 * var(--u)); z-index: 2; }
.want__quote { left: calc(618 * var(--u)); top: calc(745 * var(--u)); width: calc(560 * var(--u)); }
/* retyped headlines (js/retype.js, blocks 01 and 08): empty lines keep their height,
   the marker hides while empty */
.is-type-armed .headline :is(.headline__line, .headline__mark):empty::before { content: "\200b"; }
.is-type-armed .headline .headline__mark:empty { visibility: hidden; }
.is-type-armed .headline :is(.is-typing, .is-deleting)::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .78em;
  margin-left: .04em;
  background: currentColor;
  vertical-align: .02em;
  animation: longread-caret .58s steps(1, end) infinite;
}

/* ---------- 02 — МЕРКА ЭПИКУРА ---------- */
.measure__label {
  left: calc(40 * var(--u)); top: calc(270 * var(--u));
  font-size: calc(28 * var(--u)); line-height: 1.2;
  letter-spacing: .04em;
}
.measure__scale {
  left: calc(40 * var(--u)); top: calc(320 * var(--u));
  width: calc(1360 * var(--u));
  display: flex; align-items: flex-start; gap: calc(12 * var(--u));
}
.measure__bar {
  display: flex; align-items: center; justify-content: center;
  height: calc(104 * var(--u));
  font-size: calc(24 * var(--u)); line-height: 1.35;
}
.measure__bar--needed  { flex: 0 0 calc(300 * var(--u)); background: var(--green); color: #000; }
.measure__bar--natural { flex: 0 0 calc(340 * var(--u)); background: var(--gray); margin-top: calc(-30 * var(--u)); }
.measure__bar--empty {
  flex: 1 1 0;
  height: calc(208 * var(--u));
  background: url("../images/measure-empty.jpg") center / cover no-repeat;
}
.measure__bar--empty span {
  padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u));
  background: #000;
  color: var(--yellow);
  font-size: calc(28 * var(--u));
}
.measure.is-motion-armed .measure__bar {
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform-origin: center;
  will-change: opacity, clip-path, transform;
}
.measure.is-motion-play .measure__bar {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: opacity .35s ease, clip-path .9s cubic-bezier(.16, 1, .3, 1);
  animation: measure-contract 1.45s ease-in-out var(--measure-pulse-delay) infinite alternate;
}
.measure.is-motion-play .measure__bar--needed  { --measure-scale: .72; --measure-pulse-delay: 1.05s; transition-delay: .08s; }
.measure.is-motion-play .measure__bar--natural { --measure-scale: .6; --measure-pulse-delay: 1.25s; transition-delay: .28s; }
.measure.is-motion-play .measure__bar--empty   { --measure-scale: .82; --measure-pulse-delay: 1.45s; transition-delay: .48s; }
@keyframes measure-contract { to { transform: scaleX(var(--measure-scale)); } }
.measure__text {
  left: calc(40 * var(--u)); top: calc(520 * var(--u));
  width: calc(520 * var(--u));
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-sans);
  color: var(--text-soft);
}
.measure__quote { left: calc(40 * var(--u)); top: calc(720 * var(--u)); width: calc(520 * var(--u)); }

/* ---------- 03 — ДЕСЯТЫЙ КУСОК ---------- */
.slice__plate { left: calc(395 * var(--u)); top: calc(149 * var(--u)); width: calc(700 * var(--u)); aspect-ratio: 1; background: var(--pink); }
.slice__pie   { left: calc(450 * var(--u)); top: calc(204 * var(--u)); width: calc(590 * var(--u)); height: auto; aspect-ratio: 1; object-fit: contain; }
/* the swarm: ten more pieces land one by one (js/slice.js); 1k = 1px of the layout's grid */
.slice__swarm { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; --k: var(--u); }
.slice__sq {
  position: absolute;
  left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k));
  width: calc(var(--s) * var(--k)); aspect-ratio: 1;
  padding: calc(var(--s) * .09 * var(--k));
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink) 45%, #fff 100%);
  opacity: 0;
  transform: scale(.4) rotate(var(--r, 0deg));
  transition: opacity .13s ease-out, transform .23s cubic-bezier(.2, 1.5, .4, 1);
}
.slice__sq.is-on { opacity: 1; transform: none; }
.slice__sq img { width: 100%; height: 100%; object-fit: contain; }
.slice__count {
  left: calc(112 * var(--u)); top: calc(402 * var(--u));
  display: flex; align-items: center;
  height: calc(360 * var(--u));
  font-size: calc(400 * var(--u)); line-height: 1;
  letter-spacing: -.04em;
  color: var(--yellow);
}
.slice__title { left: calc(99 * var(--u)); top: calc(773 * var(--u)); --size: 124; --gap: 8; --pad: 20; }
.slice__text {
  left: calc(100 * var(--u)); top: calc(1040 * var(--u));
  width: calc(500 * var(--u));
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-sans);
  color: var(--ink-dark);
}

/* ---------- 04 — ТВОИ ЖЕЛАНИЯ КУПЛЕНЫ ---------- */
.bought__img { object-fit: cover; max-width: none; }
.bought__img--couple { left: calc(552 * var(--u)); top: calc(220 * var(--u)); width: calc(829 * var(--u)); height: calc(612 * var(--u)); }
.bought__img--tag    { left: calc(-57 * var(--u)); top: calc(117 * var(--u)); width: calc(575 * var(--u)); height: calc(425 * var(--u)); }
.bought__chaos { inset: 0; overflow: visible; pointer-events: none; z-index: 1; }
.bought.is-chaos .bought__img { opacity: 0; }
.bought__chaos-card {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: auto;
  max-width: none;
  opacity: 0;
  object-fit: cover;
  will-change: opacity, transform;
  animation: bought-chaos-pop var(--life) cubic-bezier(.2, .75, .25, 1) both;
}
@keyframes bought-chaos-pop {
  0%   { opacity: 0; transform: translateY(calc(70 * var(--u))) scale(.22) rotate(calc(var(--r) - 7deg)); }
  14%  { opacity: 1; }
  38%  { opacity: 1; transform: translateY(0) scale(1.04) rotate(var(--r)); }
  72%  { opacity: 1; transform: translateY(calc(-12 * var(--u))) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translateY(calc(-65 * var(--u))) scale(.78) rotate(var(--r2)); }
}
.bought__title { left: calc(62 * var(--u)); top: calc(573 * var(--u)); --size: 120; --pad: 20; --track: -.02em; z-index: 20; }
.bought__quote { left: calc(62 * var(--u)); top: calc(848 * var(--u)); width: calc(520 * var(--u)); z-index: 20; }

/* ---------- 05 — МЫ ПОТРЕБЛЯЕМ ЗНАКИ ---------- */
.signs { --accent: var(--cyan); }
.signs__receipt { max-width: none; height: auto; }
.signs__receipt--green  { left: calc(364 * var(--u)); top: calc(-12 * var(--u)); width: calc(489 * var(--u)); }
.signs__receipt--pink   { left: calc(151 * var(--u)); top: calc(722 * var(--u)); width: calc(337 * var(--u)); }
.signs__receipt--yellow { left: calc(842 * var(--u)); top: calc(314 * var(--u)); width: calc(359 * var(--u)); }
.signs__list {
  left: calc(440 * var(--u)); top: calc(478 * var(--u));
  display: flex; flex-direction: column; gap: calc(20 * var(--u));
}
.signs__list li {
  display: flex; align-items: center; gap: calc(14 * var(--u));
  white-space: nowrap;
}
.signs__list s, .signs__arrow {
  font: 400 max(14px, calc(22 * var(--u)))/1.3 var(--f-display);
}
.signs__list s { color: var(--strike); position: relative; text-decoration: none; }
/* the strike is drawn as a line so it can be animated */
.signs__list s::after {
  content: "";
  position: absolute; left: -2%; right: -2%; top: 54%;
  height: max(1px, .07em);
  background: currentColor;
}
.signs__arrow { color: var(--cyan); }
.signs__list b { font-size: max(18px, calc(30 * var(--u))); line-height: 1.3; }
.signs__quote { left: calc(440 * var(--u)); top: calc(788 * var(--u)); width: calc(330 * var(--u)); }

/* The receipts loop from right to left forever. Row by row the old word is
   struck out and its substitute slides into place. */
.signs { --row: .5s; --list-start: .7s; }
.signs.is-armed .signs__receipt { transform: translateX(calc(100vw + 100%)) rotate(28deg); }
.signs.is-armed .signs__list s { color: var(--text); }
.signs.is-armed .signs__list s::after { transform: scaleX(0); transform-origin: left; }
.signs.is-armed :is(.signs__arrow, .signs__list b) { opacity: 0; transform: translateX(-16px); }
.signs.is-armed .signs__quote { opacity: 0; transform: translateY(16px); }

.signs.is-play .signs__receipt {
  animation: signs-receipt-flight 3.3s linear infinite both;
  will-change: opacity, transform;
}
.signs.is-play .signs__receipt--yellow { animation-delay: -1.1s; }
.signs.is-play .signs__receipt--pink   { animation-delay: -2.2s; }
.signs.is-play .signs__list s { color: var(--strike); transition: color .25s calc(var(--list-start) + var(--i) * var(--row) + .12s); }
.signs.is-play .signs__list s::after {
  transform: none;
  transition: transform .35s cubic-bezier(.6, 0, .3, 1) calc(var(--list-start) + var(--i) * var(--row));
}
.signs.is-play :is(.signs__arrow, .signs__list b) {
  opacity: 1; transform: none;
  transition: opacity .28s, transform .35s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--list-start) + var(--i) * var(--row) + .32s);
}
.signs.is-play .signs__list b { transition-delay: calc(var(--list-start) + var(--i) * var(--row) + .38s); }
.signs.is-play .signs__quote {
  opacity: 1; transform: none;
  transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--list-start) + 4 * var(--row) + .3s);
}
@keyframes signs-receipt-flight {
  0%   { opacity: 0; transform: translateX(calc(100vw + 100%)) rotate(24deg); }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-100vw - 100%)) rotate(-24deg); }
}

/* ---------- 06 — ТЫ ХОЧЕШЬ ЧУЖОЕ ---------- */
.other { background: linear-gradient(to left, var(--paper) 14.964%, var(--paper) 81.461%, #f32fab); }
.other__img { object-fit: cover; }
.other__img--car      { left: calc(308 * var(--u)); top: calc(1000 * var(--u)); width: calc(542 * var(--u)); height: calc(511 * var(--u)); }
.other__img--cat      { left: calc(683 * var(--u)); top: calc(73 * var(--u)); width: calc(689 * var(--u)); height: calc(888 * var(--u)); object-position: bottom; }
.other__img--backpack { left: calc(706 * var(--u)); top: calc(887 * var(--u)); width: calc(349 * var(--u)); height: calc(369 * var(--u)); object-position: 50% 55%; }
.other__tags {
  left: calc(506 * var(--u)); top: calc(280 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(16.94 * var(--u));
  font-size: calc(84.7 * var(--u)); line-height: 1;
  color: #000;
}
.other__tags li { padding: calc(5.65 * var(--u)) calc(19.76 * var(--u)) calc(11.3 * var(--u)); background: var(--cyan); }
.other__quote { left: calc(271 * var(--u)); top: calc(670 * var(--u)); width: calc(412 * var(--u)); }
.other__quote blockquote { color: var(--ink-deep); }

/* The three objects rise into the composition in reverse DOM order (3 -> 2 -> 1),
   then the cyan labels are typed one after another. JS only adds the armed/play
   states, so the complete composition stays visible when scripting is unavailable. */
.other.is-armed .other__img {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  filter: blur(calc(8 * var(--u)));
  transform: translateY(calc(180 * var(--u))) scale(.97);
  will-change: opacity, clip-path, filter, transform;
}
.other.is-play .other__img {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: none;
  transform: none;
  transition:
    opacity .45s ease,
    clip-path 1.15s cubic-bezier(.22, 1, .36, 1),
    filter .85s ease,
    transform 1.15s cubic-bezier(.16, 1, .3, 1);
}
.other.is-play .other__img--backpack { transition-delay: .08s; }
.other.is-play .other__img--cat      { transition-delay: .5s; }
.other.is-play .other__img--car      { transition-delay: .92s; }

.other.is-armed .other__tags li {
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
}
.other.is-armed .other__tags li.is-typing,
.other.is-armed .other__tags li.is-typed {
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.other__tags li::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .78em;
  margin-left: .08em;
  background: currentColor;
  vertical-align: -.02em;
  opacity: 0;
}
.other__tags li:is(.is-typing, .is-deleting)::after {
  opacity: 1;
  animation: other-caret .62s steps(1, end) infinite;
}
@keyframes other-caret { 50% { opacity: 0; } }

/* after the entrance the three objects keep drifting, each at its own pace;
   individual translate/rotate properties stack on top of the entrance transform */
.other.is-play .other__img { animation: other-drift var(--drift, 5s) ease-in-out var(--drift-delay, 1.8s) infinite alternate; }
.other.is-play .other__img--backpack { --drift: 1.7s; --drift-delay: 1.4s; --tilt: 9deg;  --lift: -70; --sway: 46; }
.other.is-play .other__img--cat      { --drift: 2.6s; --drift-delay: 1.8s; --tilt: -5deg; --lift: -48; --sway: -38; }
.other.is-play .other__img--car      { --drift: 2.1s; --drift-delay: 2.2s; --tilt: 7deg;  --lift: -80; --sway: -54; }
@keyframes other-drift {
  from { translate: calc(var(--sway) * -.5 * var(--u)) 0; rotate: calc(var(--tilt) * -.4); }
  to   { translate: calc(var(--sway) * .5 * var(--u)) calc(var(--lift) * var(--u)); rotate: var(--tilt); }
}

/* ---------- 07 — СЧАСТЬЕ КАК ОБЯЗАННОСТЬ ---------- */
.duty__aside {
  left: calc(40 * var(--u)); top: calc(360 * var(--u));
  width: calc(360 * var(--u));
  display: flex; flex-direction: column; gap: calc(40 * var(--u));
}
.duty__lead { font-size: max(16px, calc(22 * var(--u))); line-height: 1.3; }
.duty__list {
  left: calc(460 * var(--u)); top: calc(130 * var(--u));
  display: flex; flex-direction: column; gap: calc(40 * var(--u));
  font: 400 calc(30 * var(--u))/calc(44 * var(--u)) var(--f-mono);
  text-transform: uppercase;
  color: var(--yellow);
}
.duty__list li {
  display: flex; align-items: center; gap: calc(24 * var(--u));
  opacity: var(--o, 1);
  white-space: nowrap;
}
.duty__list li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: calc(44 * var(--u)); aspect-ratio: 1;
  background: var(--yellow) url("../images/duty-check.svg") center / calc(24 * var(--u)) no-repeat;
}
.duty__list .duty__undone { padding-top: calc(24 * var(--u)); color: var(--pink); }
.duty__list .duty__undone::before { background: none; border: calc(4 * var(--u)) solid var(--pink); }
.duty__undone s { position: relative; text-decoration: none; }
.duty__undone s::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 52%;
  height: max(2px, .08em);
  background: currentColor;
  transform-origin: left;
}

/* The checklist is completed from top to bottom. The final item is rejected
   with a strike instead of a check, then the heading and quote enter. */
.duty.is-armed .duty__list li {
  opacity: 0;
  transform: translateY(calc(18 * var(--u)));
}
.duty.is-armed .duty__list li::before {
  background-color: transparent;
  background-image: none;
  border: calc(2 * var(--u)) solid currentColor;
  transform: scale(.86);
}
.duty.is-armed .duty__list .duty__undone::before {
  border-width: calc(4 * var(--u));
}
.duty.is-armed .duty__list li.is-visible {
  opacity: var(--o, 1);
  transform: none;
  transition: opacity .12s ease, transform .175s cubic-bezier(.2, .8, .2, 1);
}
.duty.is-armed .duty__list li.is-checked::before {
  background-color: var(--yellow);
  background-image: url("../images/duty-check.svg");
  border-color: var(--yellow);
  transform: scale(1);
  animation: duty-check-pop .158s cubic-bezier(.2, .9, .25, 1.35) both;
}
.duty.is-armed .duty__undone s::after { transform: scaleX(0); }
.duty.is-armed .duty__undone.is-struck s::after {
  transform: scaleX(1);
  transition: transform .193s cubic-bezier(.65, 0, .25, 1);
}
.duty.is-armed :is(.duty__lead, .duty__aside .quote) {
  opacity: 0;
  transform: translateY(calc(22 * var(--u)));
}
.duty.is-armed :is(.duty__lead, .duty__aside .quote).is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
@keyframes duty-check-pop {
  0% { transform: scale(.86); }
  65% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- 08 — ДАЖЕ ТЕЛО — ПРОЕКТ ---------- */
.body__img { left: calc(206.6 * var(--u)); top: calc(85 * var(--u)); width: calc(1450 * var(--u)); height: auto; max-width: none; }
.body__title { left: calc(291 * var(--u)); top: calc(470 * var(--u)); --size: 80; --pad-t: 6; --pad-b: 12; }
.body__text {
  left: calc(180 * var(--u)); top: calc(690 * var(--u));
  width: calc(526 * var(--u));
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-sans);
  color: var(--text);
}
.body__list {
  left: calc(454 * var(--u)); top: calc(850 * var(--u));
  display: flex; flex-direction: column; gap: calc(16 * var(--u));
  font: 700 max(14px, calc(20 * var(--u)))/1.35 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
}
.body__status { color: var(--pink); }
.body.is-motion-armed .body__img {
  opacity: 0;
  transform: translateY(calc(520 * var(--u)));
  will-change: opacity, transform;
}
.body.is-motion-play .body__img {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease .5s,
    transform 1.65s cubic-bezier(.16, 1, .3, 1) .5s;
}
/* after rising in, the figure keeps floating; translate/rotate stack on the entrance transform */
.body.is-motion-play .body__img { animation: body-float 3.6s ease-in-out 2.2s infinite alternate; }
@keyframes body-float {
  from { translate: calc(-24 * var(--u)) calc(30 * var(--u)); rotate: -1.6deg; }
  to   { translate: calc(30 * var(--u)) calc(-70 * var(--u)); rotate: 2deg; }
}
.body.is-motion-armed .body__list :is(.body__metric, .body__status) {
  display: inline-block;
  opacity: 0;
  transform: translateY(calc(28 * var(--u)));
  will-change: opacity, transform;
}
.body.is-motion-armed .body__list :is(.body__metric, .body__status).is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
.body__list span.is-typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .9em;
  margin-left: .12em;
  background: currentColor;
  vertical-align: -.08em;
  animation: longread-caret .58s steps(1, end) infinite;
}

/* ---------- 09 — МЫ ЖИВЁМ РАДИ ВОСПОМИНАНИЙ ---------- */
.memory { --accent: var(--cyan); }
.memory__img { object-fit: cover; }
.memory__img--caliper { left: calc(128 * var(--u)); top: calc(142 * var(--u)); width: calc(435 * var(--u)); height: calc(580 * var(--u)); }
.memory__img--dessert { left: calc(323 * var(--u)); top: calc(679 * var(--u)); width: calc(362 * var(--u)); height: calc(543 * var(--u)); }
.memory.is-motion-armed .memory__img {
  opacity: 0;
  scale: .08;
  clip-path: inset(43% 43%);
  transform-origin: center;
  will-change: opacity, scale, clip-path, transform;
}
.memory.is-motion-armed .memory__img.is-materialized {
  animation:
    memory-materialize 1.8s cubic-bezier(.16, 1, .3, 1) forwards,
    memory-breathe 2.2s ease-in-out 1.8s infinite alternate;
}
@keyframes memory-materialize {
  0%   { opacity: 0; scale: .08; clip-path: inset(43% 43%); }
  8%   { opacity: 1; scale: .08; clip-path: inset(43% 43%); }
  20%  { opacity: 1; scale: .08; clip-path: inset(43% 43%); }
  82%  { opacity: 1; scale: 1.045; clip-path: inset(0); }
  100% { opacity: 1; scale: 1; clip-path: inset(0); }
}
@keyframes memory-breathe {
  from { transform: scale(.93); }
  to   { transform: scale(1.07); }
}
.memory__title { left: calc(593 * var(--u)); top: calc(356 * var(--u)); --size: 80; --gap: 0; line-height: .88; }
.memory__selves {
  left: calc(594 * var(--u)); top: calc(523 * var(--u));
  width: calc(620 * var(--u)); height: calc(102 * var(--u));
  display: flex; gap: calc(16 * var(--u));
}
.memory__self {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u));
}
.memory.is-motion-armed .memory__self {
  opacity: 0;
  scale: .08;
  clip-path: inset(42% 42%);
  transform-origin: center;
  will-change: opacity, scale, clip-path;
}
.memory.is-motion-armed .memory__self.is-materialized {
  animation: memory-card-materialize 1.35s cubic-bezier(.16, 1, .3, 1) forwards;
}
.memory.is-motion-armed .memory__self--story.is-materialized { animation-delay: .16s; }
@keyframes memory-card-materialize {
  0%   { opacity: 0; scale: .08; clip-path: inset(42% 42%); }
  12%  { opacity: 1; scale: .08; clip-path: inset(42% 42%); }
  80%  { opacity: 1; scale: 1.04; clip-path: inset(0); }
  100% { opacity: 1; scale: 1; clip-path: inset(0); }
}
.memory__self b { font-size: calc(26 * var(--u)); line-height: 1.35; }
.memory__self span {
  font: 400 max(10px, calc(12 * var(--u)))/1.2 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.memory__self--now   { background: var(--cyan); color: #000; }
.memory__self--story { border: 1px solid var(--ink-dark); }
.memory__self--story span { color: var(--muted); }
.memory__quote { left: calc(754 * var(--u)); top: calc(722 * var(--u)); width: calc(600 * var(--u)); }
.memory__quote blockquote { font-family: var(--f-sans); }
.memory__quote figcaption {
  margin-top: calc(10 * var(--u));
  font: 700 max(11px, calc(13 * var(--u)))/1.5 var(--f-mono);
}

/* ---------- 10 — ЖАЖДА ---------- */
.thirst__title {
  left: calc(324.5 * var(--u)); top: calc(-5 * var(--u));
  min-width: 3.4em;
  min-height: 1em;
  font-size: calc(240 * var(--u)); line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.thirst__snake {
  left: calc(376 * var(--u)); top: calc(120 * var(--u));
  width: calc(689 * var(--u)); height: auto;
  transform-origin: 50% 50%;
  animation: thirst-snake-spin 16s linear infinite;
  will-change: transform;
}
@keyframes thirst-snake-spin { to { transform: rotate(1turn); } }
.thirst__text {
  left: calc(760 * var(--u)); top: calc(760 * var(--u));
  width: calc(520 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u));
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-display);
  font-stretch: 100%;
  color: var(--ink-soft);
}
.thirst__mark {
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  background: var(--green);
  color: #000;
  font-size: max(16px, calc(24 * var(--u))); line-height: 1.1;
}
.thirst.is-armed .thirst__title {
  opacity: 0;
  transform: translateY(calc(150 * var(--u)));
  will-change: opacity, transform;
}
.thirst.is-play .thirst__title {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.22, .65, .3, 1);
}
.thirst__title:is(.is-typing, .is-deleting)::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .78em;
  margin-left: .04em;
  background: currentColor;
  vertical-align: .02em;
  animation: thirst-caret .58s steps(1, end) infinite;
}
.thirst.is-armed .thirst__text > span { opacity: 0; }
.thirst.is-armed .thirst__text > :is(.is-typing, .is-typed) {
  opacity: 1;
  transition: opacity .12s ease;
}
.thirst__text span.is-typing::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .9em;
  margin-left: .12em;
  background: currentColor;
  vertical-align: -.08em;
  animation: thirst-caret .58s steps(1, end) infinite;
}
@keyframes thirst-caret { 50% { opacity: 0; } }

/* ---------- 11 — ДИСЦИПЛИНИРОВАННЫЕ ПОТРЕБИТЕЛИ ---------- */
.drill__img { object-fit: cover; }
.drill__img--face   { left: calc(188 * var(--u)); top: calc(244 * var(--u)); width: calc(447 * var(--u)); height: calc(758 * var(--u)); object-position: top; }
.drill__img--spikes { left: calc(519 * var(--u)); top: calc(67 * var(--u)); width: calc(233 * var(--u)); height: calc(413 * var(--u)); }
.drill__title { left: calc(392 * var(--u)); top: calc(499 * var(--u)); --size: 77.94; --gap: 9.74; --pad: 19.49; --pad-t: 4.87; --pad-b: 9.74; --track: -.02em; }
.drill__text {
  left: calc(434 * var(--u)); top: calc(1046 * var(--u));
  width: calc(573 * var(--u));
  font: 400 max(15px, calc(22 * var(--u)))/1.5 var(--f-display);
  font-stretch: 100%;
  color: var(--text);
}
.drill .stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: max(2px, calc(3 * var(--u)));
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, var(--cyan) 28%, var(--cyan) 72%, transparent 96%);
  box-shadow: 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--cyan) 70%, transparent);
}
.drill.is-motion-play .stage::after {
  animation: drill-scan 3.2s linear 1.2s infinite;
}
.drill.is-motion-armed .drill__img {
  opacity: 0;
  scale: .88;
  will-change: opacity, scale, clip-path, transform;
}
.drill.is-motion-armed .drill__img--face { clip-path: inset(0 100% 0 0); }
.drill.is-motion-armed .drill__img--spikes { clip-path: inset(100% 0 0 0); }
.drill.is-motion-play .drill__img--face {
  animation:
    drill-image-reveal 1.15s cubic-bezier(.16, 1, .3, 1) .08s forwards,
    drill-spike-tension .62s steps(3, end) 1.66s infinite alternate;  /* same jerk as the spikes, half a beat later */
}
.drill.is-motion-play .drill__img--spikes {
  animation:
    drill-image-reveal .95s cubic-bezier(.16, 1, .3, 1) .38s forwards,
    drill-spike-tension .62s steps(3, end) 1.35s infinite alternate;
}
.drill.is-motion-armed .drill__title > * {
  opacity: 0;
  transform: translateX(var(--drill-from, calc(-120 * var(--u))));
  will-change: opacity, transform;
}
.drill.is-motion-armed .drill__title > :nth-child(2) { --drill-from: calc(120 * var(--u)); }
.drill.is-motion-play .drill__title > * {
  animation: drill-line-in .68s cubic-bezier(.16, 1, .3, 1) forwards;
}
.drill.is-motion-play .drill__title > :nth-child(1) { animation-delay: .22s; }
.drill.is-motion-play .drill__title > :nth-child(2) { animation-delay: .48s; }
.drill.is-motion-play .drill__title > :nth-child(3) {
  animation: drill-stamp-in .58s cubic-bezier(.2, 1.35, .35, 1) .78s forwards;
}
@keyframes drill-image-reveal {
  to { opacity: 1; scale: 1; clip-path: inset(0); }
}
@keyframes drill-line-in {
  to { opacity: 1; transform: none; }
}
@keyframes drill-stamp-in {
  0% { opacity: 0; transform: scale(1.45) rotate(-2deg); }
  70% { opacity: 1; transform: scale(.96) rotate(.4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes drill-spike-tension {
  from { transform: translate(calc(-14 * var(--u)), calc(-30 * var(--u))) rotate(-4deg) scale(.97); }
  to   { transform: translate(calc(16 * var(--u)), calc(30 * var(--u))) rotate(4.5deg) scale(1.05); }
}
@keyframes drill-scan {
  0% { opacity: 0; transform: translateY(calc(-10 * var(--u))); }
  8%, 92% { opacity: .32; }
  100% { opacity: 0; transform: translateY(calc(1358 * var(--u))); }
}

/* ---------- 12 — ФИНАЛ ---------- */
.final__title {
  left: 0; right: 0; top: calc(300 * var(--u));
  height: calc(200 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(220 * var(--u)); line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.final__title s { text-decoration-thickness: from-font; }
.final__text {
  left: 0; right: 0; top: calc(557 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(13 * var(--u));
  text-align: center;
  font: 600 max(15px, calc(27.5 * var(--u)))/1.4 var(--f-display);
  font-stretch: 100%;
  color: var(--text);
}
.final__mark {
  padding: calc(7.5 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  background: var(--cyan);
  color: #000;
  font-size: max(15px, calc(27.5 * var(--u))); line-height: 1.2;
  letter-spacing: .02em;
}

/* ---------- mobile: artboard turns into a flow ---------- */
@media (max-width: 899px) {
  .stage { --u: 1px; height: auto; padding: 72px var(--gutter); }
  .stage > * { position: static; inset: auto; }

  .headline {
    font-size: calc((100vw - 2 * var(--gutter)) / var(--ratio, 4.9));
    gap: 6px;
  }
  .headline__mark { padding: 2px 10px 6px; }

  .quote blockquote { font-size: 17px; }
  .quote figcaption { font-size: 13px; }
  .quote--mono blockquote { font-size: 16px; }
  .quote--mono figcaption { font-size: 12px; }

  /* hero */
  .hero { --hero-lift: 48px; }
  .hero__content { gap: 8px; padding: 0 var(--gutter) 24px; }
  .hero__title { font-size: calc((100vw - 2 * var(--gutter)) / 4.6); }
  .hero__read { padding: 6px 16px 8px; font-size: 24px; }
  .hero__hand { width: 145vw; }
  .hero__hand--upper { left: -95vw; top: 27%; }
  .hero__hand--lower { right: -95vw; top: 49%; }

  /* 01 */
  .want .stage { display: flex; flex-direction: column; }
  .want__carousel {
    width: calc(175% + 2 * var(--gutter));
    height: 620px;
    margin-left: calc(-50% - var(--gutter));
  }
  .want__set { gap: 14px; padding-right: 14px; }
  .want__set img:nth-child(1) { width: 270px; height: 520px; }
  .want__set img:nth-child(2) { width: 470px; height: 330px; margin-top: 100px; }
  .want__set img:nth-child(3) { width: 320px; height: 560px; margin-top: 30px; }
  .want__set img:nth-child(4) { width: 520px; height: 370px; margin-top: 130px; }
  .want__title { position: relative; margin-top: -74px; }
  .want__quote { width: auto; margin-top: 40px; }

  /* 02 */
  .measure__label { font-size: 22px; }
  .measure__scale { width: auto; margin-top: 16px; flex-direction: column; gap: 8px; }
  .measure__bar { height: 64px; font-size: 20px; }
  .measure__bar--needed  { flex: none; width: 72%; }
  .measure__bar--natural { flex: none; width: 86%; margin-top: 0; }
  .measure__bar--empty   { flex: none; width: 100%; height: 128px; }
  .measure__bar--empty span { padding: 3px 12px 5px; font-size: 22px; }
  .measure__text { width: auto; margin-top: 40px; font-size: 17px; }
  .measure__quote { width: auto; margin-top: 40px; }

  /* 03: the plate stays a collage, drawn on a 375-wide grid */
  .slice .stage { --m: calc(100cqw / 375); padding-top: calc(310 * var(--m)); }
  .slice .stage > :is(.slice__plate, .slice__pie, .slice__swarm, .slice__count) { position: absolute; }
  .slice__plate { left: calc(56 * var(--m)); top: calc(56 * var(--m)); width: calc(280 * var(--m)); }
  .slice__pie   { left: calc(76 * var(--m)); top: calc(76 * var(--m)); width: calc(240 * var(--m)); }
  .slice__swarm { left: 0; top: 0; height: calc(310 * var(--m)); --k: var(--m); }
  .slice__count { left: calc(12 * var(--m)); top: calc(110 * var(--m)); height: auto; font-size: calc(190 * var(--m)); }
  .slice__title { --ratio: 6.8; position: relative; }
  .slice__text  { width: auto; margin-top: 24px; font-size: 17px; }

  /* 04 */
  .bought .stage { display: grid; }
  .bought__img { height: auto !important; }
  .bought__img--tag    { order: -1; width: 80%; margin-left: calc(-1 * var(--gutter)); aspect-ratio: 575 / 425; }
  .bought__img--couple { width: 90%; justify-self: end; margin-top: -24px; aspect-ratio: 829 / 612; }
  .bought__title { --ratio: 6.7; position: relative; margin-top: -40px; }
  .bought__quote { width: auto; margin-top: 32px; position: relative; }
  .bought__chaos { position: absolute; inset: 0; }

  /* 05 */
  .signs .stage {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 12px; align-items: end;
  }
  .signs__receipt--green  { grid-area: 1 / 1 / 2 / 3; width: 60%; justify-self: center; }
  .signs__list   { grid-area: 2 / 1 / 3 / 3; margin-top: 40px; gap: 14px; }
  .signs__list li { flex-wrap: wrap; gap: 4px 10px; white-space: normal; }
  .signs__list s, .signs__arrow { font-size: 16px; }
  .signs__list b { font-size: 22px; }
  .signs__quote  { grid-area: 3 / 1 / 4 / 3; width: auto; margin-top: 32px; }
  .signs__receipt--pink   { grid-area: 4 / 1; width: 100%; margin-top: 40px; }
  .signs__receipt--yellow { grid-area: 4 / 2; width: 100%; }

  /* 06 */
  .other .stage { display: grid; grid-template-columns: 1fr 1fr; }
  .other__img { width: 100%; height: auto !important; }
  .other__img--cat  { grid-area: 1 / 1 / 2 / 3; justify-self: end; width: 86%; aspect-ratio: 689 / 888; }
  .other__tags { grid-area: 1 / 1 / 2 / 3; align-self: start; margin-top: 30%; gap: 8px; font-size: 40px; position: relative; }
  .other__tags li { padding: 2px 10px 6px; }
  .other__quote { grid-area: 2 / 1 / 3 / 3; width: auto; margin-top: 32px; }
  .other__img--car      { grid-area: 3 / 1 / 4 / 3; width: 78%; margin-top: 88px; aspect-ratio: 542 / 511; }
  .other__img--backpack { grid-area: 3 / 2; justify-self: end; width: 88%; margin-top: 40px; aspect-ratio: 349 / 369; position: relative; }

  /* 07 */
  .duty__list { gap: 20px; font-size: 18px; line-height: 1.3; }
  .duty__list li { gap: 14px; white-space: normal; }
  .duty__list li::before { width: 32px; background-size: 18px; }
  .duty__list .duty__undone { padding-top: 12px; }
  .duty__list .duty__undone::before { border-width: 3px; }
  .duty__aside { width: auto; margin-top: 56px; gap: 28px; }
  .duty__lead { font-size: 20px; }

  /* 08 */
  .body .stage { display: flex; flex-direction: column; }
  .body__img { order: -1; width: 100%; margin-top: -24px; }
  .body__title { --ratio: 5.3; position: relative; margin-top: -80px; }
  .body__text { width: auto; margin-top: 24px; font-size: 17px; }
  .body__list { margin-top: 24px; gap: 12px; font-size: 16px; }

  /* 09 */
  .memory .stage { display: flex; flex-direction: column; }
  .memory__img { height: auto !important; }
  .memory__img--caliper { width: 78%; aspect-ratio: 435 / 580; }
  .memory__title { --ratio: 9.8; position: relative; margin-top: -48px; }
  .memory__selves { width: auto; height: auto; margin-top: 20px; flex-direction: column; gap: 8px; }
  .memory__self { padding: 14px 18px; gap: 6px; }
  .memory__self b { font-size: 22px; }
  .memory__quote { width: auto; margin-top: 32px; }
  .memory__img--dessert { order: 1; width: 70%; align-self: flex-end; margin-top: 40px; aspect-ratio: 362 / 543; }

  /* 10 */
  .thirst .stage { display: flex; flex-direction: column; align-items: center; padding-top: 48px; }
  .thirst__title { font-size: calc((100vw - 2 * var(--gutter)) / 3.4); }
  .thirst__snake { width: 92%; margin-top: -18%; position: relative; }
  .thirst__text { width: auto; align-self: stretch; margin-top: 16px; font-size: 17px; }
  .thirst__mark { font-size: 20px; }

  /* 11 */
  .drill .stage { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: start; }
  .drill__img { width: 100%; height: auto !important; }
  .drill__img--face   { grid-area: 1 / 1; margin-top: 48px; aspect-ratio: 447 / 758; }
  .drill__img--spikes { grid-area: 1 / 2; aspect-ratio: 233 / 413; }
  .drill__title { grid-area: 2 / 1 / 3 / 3; --ratio: 11.6; position: relative; margin-top: -40px; white-space: normal; }
  .drill__text { grid-area: 3 / 1 / 4 / 3; width: auto; margin-top: 24px; font-size: 17px; }

  /* 12 */
  .final .stage { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
  .final__title { height: auto; font-size: 140px; }
  .final__text { gap: 10px; font-size: 15px; }
  .final__mark { padding: 4px 12px 6px; font-size: 16px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slice__sq { transition: none; }
  .thirst__snake { animation: none; }
  .want__track { animation: none; }
  .hero__hand, .hero__hand img { animation: none; }
}