/* =========================================================
   chameleon · the desk that built the house
   Duotone teal like the project's own art: deep sea-teal
   grounds, mint silhouettes, isometric blocks and drafting lines.
   ========================================================= */

:root {
  /* grounds (sampled from the art) */
  --ink: #021d1f;
  --bg: #052b2c;
  --bg-2: #083738;
  --night: #04222a;          /* the navy-teal of the opening shot in tape 03 */
  --teal: #0d4645;
  --teal-2: #186c60;
  --jade: #2aa88e;

  /* the chameleon */
  --mint: #97fce4;
  --mint-soft: #c4f8ea;
  --skin: #cdf3d9;

  /* text */
  --text: #e2faf2;
  --text-2: #a3d3c6;
  --muted: #6b9f93;
  --line: rgba(151, 252, 228, 0.14);
  --line-2: rgba(151, 252, 228, 0.3);

  /* fee split (validated: lightness band, CVD and contrast on --bg) */
  --s-holders: #2aa88e;
  --s-montra: #b5853c;
  --s-lp: #4b86c9;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;

  --cham-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2234%20136%20412%20208%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M%20319%20140.5%20C%20308.1%20143.5%2C%20306.4%20156.4%2C%20313.6%20182.4%20C%20314%20183.6%2C%20314.2%20184.6%2C%20314.2%20184.7%20C%20314.1%20184.7%2C%20313.4%20184.8%2C%20312.6%20184.9%20C%20311.1%20185.1%2C%20311.1%20185.1%2C%20310.4%20184.2%20C%20305.5%20177.7%2C%20298.8%20177.4%2C%20297.5%20183.7%20C%20297.1%20185.6%2C%20296.9%20185.8%2C%20295.6%20185.8%20C%20294.6%20185.8%2C%20294.5%20185.7%2C%20293.9%20184.8%20C%20290.1%20178.8%2C%20283.5%20175%2C%20279.4%20176.6%20C%20277%20177.5%2C%20276.2%20179.1%2C%20276%20183.5%20L%20275.9%20186.6%20275%20186.8%20C%20274.3%20186.9%2C%20274.1%20186.9%2C%20273.6%20186.3%20C%20272.6%20184.9%2C%20269.3%20181.9%2C%20267.7%20180.9%20C%20263%20177.7%2C%20258.3%20177.4%2C%20255.7%20180%20C%20254.1%20181.6%2C%20253.7%20183.1%2C%20254.4%20186.5%20C%20255%20190%2C%20255%20190.1%2C%20254.1%20190.2%20C%20253.5%20190.3%2C%20252.9%20190%2C%20251.7%20189.1%20C%20246.7%20185.4%2C%20241.4%20184%2C%20237.6%20185.4%20C%20233.8%20186.7%2C%20232.9%20189.4%2C%20234.5%20194.2%20C%20234.9%20195.4%2C%20235.3%20196.6%2C%20235.3%20196.7%20C%20235.3%20197.4%2C%20234.1%20197.1%2C%20231.8%20196%20C%20226.1%20193.1%2C%20220.4%20192.9%2C%20217.1%20195.5%20C%20214.4%20197.6%2C%20214.2%20199.8%2C%20216.3%20204%20C%20218.1%20207.5%2C%20218%20207.8%2C%20215.5%20207.1%20C%20211.5%20206%2C%20205.5%20206.6%2C%20202.8%20208.5%20C%20198.2%20211.5%2C%20197.9%20214.4%2C%20201.5%20219%20C%20203.1%20221%2C%20202.9%20221.3%2C%20200.2%20221.6%20C%20192.5%20222.4%2C%20185.9%20227.1%2C%20185.9%20231.9%20C%20185.9%20233.6%2C%20186.5%20234.7%2C%20188.3%20236.2%20C%20189.8%20237.3%2C%20189.6%20237.8%2C%20187.6%20238.3%20C%20181.8%20239.5%2C%20176%20244.9%2C%20176%20249.2%20C%20176%20250.7%2C%20176.2%20251.3%2C%20177.4%20252.5%20L%20178.3%20253.5%20176.1%20256.8%20C%20161.5%20279.1%2C%20148.5%20291.6%2C%20131.3%20300.2%20C%20114.2%20308.8%2C%2094.6%20311.3%2C%2081.2%20306.8%20C%2069.2%20302.7%2C%2060.9%20292.4%2C%2060.9%20281.4%20C%2060.9%20270.5%2C%2067.8%20261.1%2C%2078.2%20258.1%20C%2092.5%20253.9%2C%20106.1%20266.4%2C%20100.4%20278.5%20C%2097.8%20283.9%2C%2091%20286.9%2C%2085.6%20285%20C%2080.3%20283.1%2C%2078.8%20276.5%2C%2083.1%20274.1%20C%2085.8%20272.5%2C%2089.1%20274.5%2C%2087.3%20276.6%20C%2086.1%20277.9%2C%2085.9%20278.4%2C%2086.3%20279.3%20C%2087.5%20282.3%2C%2093.4%20280.3%2C%2094.5%20276.5%20C%2096.5%20269.8%2C%2089.5%20263.6%2C%2081.8%20265.1%20C%2069.4%20267.5%2C%2065.6%20283%2C%2075%20292.5%20C%2086.7%20304.4%2C%20108.5%20299.3%2C%20116%20282.9%20C%20118.1%20278.4%2C%20118.6%20275.8%2C%20118.6%20270.4%20C%20118.6%20263%2C%20116.7%20257.3%2C%20112.2%20251.3%20C%20101.9%20237.6%2C%2079.5%20234.1%2C%2062%20243.5%20C%2053.3%20248.2%2C%2047.4%20254.4%2C%2043%20263.2%20C%2037.9%20273.6%2C%2036.9%20283.8%2C%2040%20295.1%20C%2045.2%20314%2C%2059.5%20328.3%2C%2078.6%20333.8%20C%2097.5%20339.3%2C%20123.3%20337.6%2C%20148.6%20329.3%20C%20157.4%20326.4%2C%20170.2%20320.7%2C%20177.7%20316.4%20C%20180.7%20314.6%2C%20181.9%20314.9%2C%20185%20318.1%20L%20186%20319.2%20185.2%20319.8%20C%20182.1%20321.9%2C%20180.5%20325.2%2C%20180.8%20329%20C%20181.2%20334.1%2C%20185.3%20337.2%2C%20192.4%20338%20C%20193.8%20338.1%2C%20201.1%20338.3%2C%20208.9%20338.3%20C%20222.6%20338.4%2C%20222.9%20338.4%2C%20224.4%20337.8%20C%20226.5%20337.1%2C%20228%20336%2C%20229.2%20334.1%20C%20231.1%20331.3%2C%20231.2%20331.3%2C%20239.6%20331.3%20C%20246.4%20331.2%2C%20248.2%20331%2C%20250.4%20330%20C%20253.2%20328.7%2C%20254.3%20327%2C%20256%20321.9%20C%20256.8%20319.4%2C%20257.2%20318.6%2C%20257.8%20318.1%20C%20258.6%20317.4%2C%20258.6%20317.4%2C%20262.6%20316.8%20C%20272.2%20315.2%2C%20281.8%20314.3%2C%20283.5%20314.8%20C%20284.8%20315.1%2C%20285.1%20315.6%2C%20286.1%20318.1%20C%20288.4%20324.1%2C%20290%20325.2%2C%20304.8%20331.7%20C%20319.4%20338.1%2C%20326.1%20339.9%2C%20336.3%20339.9%20C%20344.8%20339.9%2C%20348.2%20338.6%2C%20350.6%20334.5%20C%20351.8%20332.5%2C%20352.5%20332.2%2C%20355.9%20332.4%20C%20366.3%20332.9%2C%20369.1%20332.8%2C%20371.5%20331.7%20C%20375%20330.2%2C%20376.6%20326%2C%20375.2%20321.9%20C%20373.7%20317.4%2C%20369.6%20314.8%2C%20360.2%20312.4%20C%20350.9%20310%2C%20347%20308.3%2C%20344.3%20305.6%20C%20343.5%20304.8%2C%20342.8%20303.9%2C%20342.8%20303.7%20C%20342.8%20303.4%2C%20344.1%20303.4%2C%20350.4%20303.4%20C%20367.8%20303.3%2C%20383.7%20300.2%2C%20399.1%20293.7%20C%20419.3%20285.2%2C%20433.7%20274.7%2C%20439.1%20264.4%20C%20440.2%20262.3%2C%20441.5%20258.7%2C%20441.5%20257.6%20C%20441.5%20257.3%2C%20441.6%20257%2C%20441.8%20256.9%20C%20442%20256.7%2C%20442.1%20251.8%2C%20441.8%20251.8%20C%20441.7%20251.8%2C%20441.5%20250.9%2C%20441.3%20249.8%20C%20439.9%20241%2C%20433%20227.1%2C%20422.7%20212.4%20C%20408%20191.5%2C%20397.6%20184.2%2C%20380.1%20182.6%20C%20376.3%20182.3%2C%20375.8%20182.2%2C%20375.4%20181.7%20C%20375.2%20181.4%2C%20373.9%20179.6%2C%20372.5%20177.6%20C%20360.9%20161.8%2C%20348.2%20150.1%2C%20335.8%20143.9%20C%20328.7%20140.4%2C%20323.4%20139.3%2C%20319%20140.5%22%2F%3E%3C%2Fsvg%3E");

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --camo: var(--mint);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--mint);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------
   Atmosphere: drafting grid + grain
   --------------------------------------------------------- */
.paper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(24, 108, 96, 0.22) 0%, transparent 60%),
    linear-gradient(rgba(151, 252, 228, 0.045) 1px, transparent 1px) 0 0 / 240px 240px,
    linear-gradient(90deg, rgba(151, 252, 228, 0.045) 1px, transparent 1px) 0 0 / 240px 240px,
    linear-gradient(rgba(151, 252, 228, 0.022) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(151, 252, 228, 0.022) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 70;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------
   Buttons: flat and quiet. Mint for the one thing to do,
   frosted glass for everything else.
   --------------------------------------------------------- */
.btn {
  --h: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--mint);
  color: #04221f;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn:hover {
  background: #c2fdef;
}

.btn:active {
  background: #86eed5;
}

.btn__go {
  width: 16px;
  height: 16px;
  flex: none;
  margin-right: -4px;
  transition: transform 0.3s var(--ease-out);
}

.btn:hover .btn__go {
  transform: translate(2px, -2px);
}

.btn__x {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #eafff8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.btn--ghost:active {
  background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  --h: 38px;
  gap: 8px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 10px;
}

/* the contract: a hairline field with a copy button at the end */
.ca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  height: 50px;
  padding: 0 7px 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text-2);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.ca:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.ca__k {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}

.ca__v {
  min-width: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ca__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--mint);
  transition: background 0.25s, color 0.25s;
}

.ca__btn svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity 0.2s, transform 0.3s var(--ease-out);
}

.ca__ok {
  opacity: 0;
  transform: scale(0.6);
}

.ca:hover .ca__btn {
  background: rgba(255, 255, 255, 0.12);
}

.ca.is-copied .ca__btn {
  background: var(--mint);
  color: #032824;
}

.ca.is-copied .ca__copy {
  opacity: 0;
  transform: scale(0.6);
}

.ca.is-copied .ca__ok {
  opacity: 1;
  transform: scale(1);
}

.ca__short {
  display: none;
}

.ca--big {
  height: 64px;
  padding-left: 22px;
}

.ca--big .ca__v {
  font-size: clamp(14px, 1.7vw, 20px);
}

.ca--big .ca__btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

/* ---------------------------------------------------------
   Nav: one frosted-glass bar. Mark and wordmark left, links
   and the trade button right; a small dot under the section
   you're in. Light text on dark glass, so it reads over anything.
   --------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
  padding: 0 var(--gutter);
  background: rgba(3, 30, 28, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background 0.4s;
}

.nav.is-scrolled .nav__bar {
  background: rgba(3, 30, 28, 0.7);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: #f2fffb;
  text-decoration: none;
}

.nav__mark {
  width: 34px;
  height: 17px;
  fill: var(--mint);
}

.nav__brand span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.nav__links {
  display: flex;
  gap: 30px;
}

.nav__links a {
  position: relative;
  padding: 6px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(234, 255, 248, 0.74);
  text-decoration: none;
  transition: color 0.2s;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--mint);
  transform: scale(0);
  transition: transform 0.35s var(--ease-out);
}

.nav__links a:hover,
.nav__links a.is-active {
  color: #ffffff;
}

.nav__links a.is-active::after {
  transform: scale(1);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__cta .btn--sm {
  gap: 0;
}

.nav__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #eafff8;
  transition: background 0.2s, box-shadow 0.2s;
}

.nav__icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.nav__icon:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------
   Hero: the chameleon out on its branch. One looping clip,
   made from their art (start/end frames into Kling 3.0)
   --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: max(100vh, 720px);
  min-height: max(100svh, 720px);
  overflow: hidden;
  isolation: isolate;
  background: #062f2d;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 68% 100%;
  pointer-events: none;
}

/* keeps the words legible on the left and melts the bottom edge into the page */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 43, 44, 0) 78%, var(--bg) 100%),
    linear-gradient(95deg, rgba(5, 36, 34, 0.55) 0%, rgba(5, 36, 34, 0.2) 38%, rgba(5, 36, 34, 0) 55%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: none;
  /* set in from the edge, more on wider screens (owner: "I want some padding from the side"): about 100px at
     1440 and 150px at 1920, but little on small laptops, where the CA chip would run into the chameleon's snout */
  padding-left: max(var(--gutter), calc(10vw - 44px));
  padding-top: clamp(132px, 20vh, 220px);
  padding-bottom: 40px;
  pointer-events: none;
}

.hero__inner > * {
  pointer-events: auto;
}

.hero__word {
  width: fit-content;
  margin: 0 0 0 -0.04em;
  padding-bottom: 0.08em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, min(11vw, 19vh), 186px);
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: #f0fffa;
}

/* each letter surfaces out of the dark, like the animal coming out of camouflage */
.hero__word span {
  display: inline-block;
  animation: emerge 1.3s calc(var(--i) * 70ms + 0.15s) var(--ease-out) both;
}

@keyframes emerge {
  from {
    color: #0f4743;
    filter: blur(10px);
    transform: translateY(0.14em);
  }
}

.hero__sub {
  max-width: 500px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(226, 250, 242, 0.78);
}

.hero__sub em {
  display: block;
  margin-top: 2px;
  font-size: 1.3em;
  color: var(--mint);
}

.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__inner .ca {
  margin-top: 14px;
}

/* the hunt counter */
.hunt {
  position: absolute;
  right: var(--gutter);
  bottom: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(151, 252, 228, 0.22);
  border-radius: 11px;
  background: rgba(2, 36, 35, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}

.hunt svg {
  width: 26px;
  height: 13px;
  fill: currentColor;
  opacity: 0.6;
}

.hunt b {
  color: var(--text);
  font-weight: 800;
}

.hunt:hover {
  color: var(--text);
  border-color: rgba(151, 252, 228, 0.5);
}

.hunt.is-bumped {
  animation: bump 0.5s var(--ease-out);
}

.hunt.is-done {
  color: var(--mint);
  border-color: rgba(151, 252, 228, 0.6);
}

.hunt.is-done svg {
  fill: var(--mint);
  opacity: 1;
}

@keyframes bump {
  40% { transform: scale(1.12); }
}

/* ---------------------------------------------------------
   Tape: bids run one way, asks the other
   --------------------------------------------------------- */
.tape {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(2, 29, 31, 0.85);
}

.tape__row {
  overflow: hidden;
  padding: 14px 0;
}

.tape__row + .tape__row {
  border-top: 1px dashed var(--line);
}

.tape__track {
  display: flex;
  width: max-content;
  gap: 30px;
  align-items: center;
  padding-right: 30px;
  font-size: clamp(17px, 2vw, 25px);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: tape 64s linear infinite;
}

.tape__row--ask .tape__track {
  animation-direction: reverse;
  animation-duration: 72s;
}

.tape__track em {
  font-size: 1.12em;
  color: var(--mint-soft);
}

.tape__track b {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 8px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.35em;
}

.tape__row--bid b {
  background: var(--mint);
  color: var(--ink);
}

.tape__row--ask b {
  border: 1px solid var(--jade);
  color: var(--mint);
}

.tape__track i {
  font-style: normal;
  font-size: 10px;
  color: var(--jade);
}

@keyframes tape {
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   Section typography
   --------------------------------------------------------- */
section {
  position: relative;
}

/* section labels: a little chameleon walks in ahead of an italic word */
.kicker,
.chapter__place {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1;
  color: var(--mint-soft);
}

.kicker::before,
.chapter__place::before {
  content: "";
  flex: none;
  width: 34px;
  height: 17px;
  background: var(--mint);
  -webkit-mask: var(--cham-mask) center / contain no-repeat;
  mask: var(--cham-mask) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-22px);
  transition: transform 1.1s 0.15s var(--ease-out), opacity 0.6s 0.15s;
}

.is-in.kicker::before,
.is-in .chapter__place::before,
.no-js .kicker::before,
.no-js .chapter__place::before {
  opacity: 1;
  transform: none;
}

.display {
  margin: 0;
  text-wrap: balance;
  font-family: var(--sans);
  font-weight: 750;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.display em {
  display: inline-block;
  margin-top: 0.12em;
  font-size: 0.95em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--mint-soft);
  background: linear-gradient(90deg, var(--mint) 0%, var(--mint-soft) 55%, #e9fff9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--text);
}

.lede strong {
  color: var(--mint);
  font-weight: 650;
}

/* ---------------------------------------------------------
   Sees: the eye follows you
   --------------------------------------------------------- */
.sees {
  min-height: clamp(600px, 100vh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 50%, rgba(24, 108, 96, 0.18), transparent 70%),
    var(--night);
  border-bottom: 1px solid var(--line);
}

.sees__copy {
  position: relative;
  z-index: 2;
  padding-top: 110px;
  padding-bottom: 110px;
  pointer-events: none;
}

.sees__copy > * {
  max-width: 520px;
  pointer-events: auto;
}

.sees .display {
  font-size: clamp(36px, 4.6vw, 68px);
}

.sees .lede {
  margin-top: 28px;
}

.field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 36px 0 0;
}

.field div {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.field dt,
.stats dt,
.split__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 550;
}

.sees__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
}

.head {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 429 / 540;
  max-width: none;
  overflow: visible;
}

.head__skin,
.head__ball {
  fill: var(--skin);
}

.head__ring {
  fill: none;
  stroke: var(--night);
  stroke-width: 5;
}

.head__pupil {
  fill: var(--night);
}

.head__lid {
  fill: var(--skin);
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
}

.head__lid.is-blinking {
  animation: blink 0.32s ease-in-out;
}

@keyframes blink {
  45%, 55% { transform: scaleY(1); }
}

/* the order book the eye keeps checking */
.book {
  position: absolute;
  right: calc(61cqh + 28px);
  display: grid;
  gap: 7px;
  width: 150px;
}

.book--ask {
  top: 7%;
}

.book--bid {
  bottom: 6%;
  right: calc(53cqh + 28px);
}

.book__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.book__lvl {
  display: block;
  height: 7px;
  border-radius: 2px;
  background: rgba(151, 252, 228, 0.06);
  overflow: hidden;
}

.book__lvl i {
  display: block;
  height: 100%;
  width: calc(var(--w, 0.5) * 100%);
  border-radius: 2px;
  transition: width 0.6s var(--ease-out), opacity 0.3s;
}

.book--ask .book__lvl i {
  background: var(--jade);
  margin-left: auto;
}

.book--bid .book__lvl i {
  background: var(--mint);
}

.book__lvl.is-hit i {
  box-shadow: 0 0 12px rgba(151, 252, 228, 0.8);
}

.book.is-watched .book__label {
  color: var(--mint);
}

/* the target: the rings from the opening shot, wherever the eye is looking */
.target {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  pointer-events: none;
  will-change: transform;
}

.target i {
  position: absolute;
  inset: calc(var(--k) * 15px);
  border: 2px solid rgba(64, 146, 164, 0.75);
  border-radius: 50%;
}

.target i:nth-child(1) { --k: 0; }
.target i:nth-child(2) { --k: 1; }
.target i:nth-child(3) { --k: 2; }
.target i:nth-child(4) { --k: 3.4; background: rgba(64, 146, 164, 0.8); }

.target.is-locked i {
  border-color: rgba(151, 252, 228, 0.7);
}

.target.is-locked i:nth-child(4) {
  background: var(--mint);
}

/* ---------------------------------------------------------
   Story
   --------------------------------------------------------- */
.story {
  padding: 150px 0 120px;
}

.story__intro {
  position: relative;
}

.story__list {
  position: relative;
  display: grid;
  gap: clamp(90px, 12vw, 150px);
  margin-top: 90px;
  padding-left: calc(var(--gutter) + 56px);
}

.story__rail {
  position: absolute;
  left: calc(var(--gutter) + 10px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.story__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, rgba(151, 252, 228, 0), var(--mint));
}

.story__node {
  position: absolute;
  left: 0;
  top: calc(var(--p, 0) * 100%);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

.story__node i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--mint);
  border-radius: 50%;
}

.story__node i + i {
  inset: 8px;
  background: var(--mint);
  box-shadow: 0 0 14px rgba(151, 252, 228, 0.8);
}

.story__node i:first-child {
  animation: ping 2.2s ease-out infinite;
}

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.chapter:nth-of-type(even) .plate {
  order: -1;
}

.chapter__place {
  font-size: 21px;
}

.chapter__q {
  margin: 0;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 750;
  text-wrap: balance;
}

.chapter__q em {
  color: var(--mint-soft);
  font-size: 1.04em;
}

.chapter__p {
  margin: 22px 0 0;
  max-width: 480px;
  color: var(--text-2);
}

/* plates: each picture is set like a drawing on the board, construction lines and all */
.plate {
  position: relative;
  margin: 0;
}

.plate img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  outline: 1px solid var(--line-2);
  outline-offset: 8px;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.04);
  transition: clip-path 1.1s 0.1s var(--ease-out), transform 1.6s 0.1s var(--ease-out);
}

.plate.is-in img,
.no-js .plate img {
  clip-path: inset(0 0 0 0);
  transform: none;
}

.plate__lines i {
  position: absolute;
  display: block;
  background: rgba(151, 252, 228, 0.28);
  transition: transform 1.2s var(--ease-out);
}

.plate__lines i:nth-child(1),
.plate__lines i:nth-child(2) {
  left: -48px;
  right: -48px;
  height: 1px;
  transform: scaleX(0);
}

.plate__lines i:nth-child(1) { top: -9px; }
.plate__lines i:nth-child(2) { bottom: -9px; transition-delay: 0.12s; }

.plate__lines i:nth-child(3),
.plate__lines i:nth-child(4) {
  top: -48px;
  bottom: -48px;
  width: 1px;
  transform: scaleY(0);
  transition-delay: 0.08s;
}

.plate__lines i:nth-child(3) { left: -9px; }
.plate__lines i:nth-child(4) { right: -9px; transition-delay: 0.2s; }

.plate.is-in .plate__lines i,
.no-js .plate__lines i {
  transform: none;
}

.plate::after {
  content: attr(data-fig);
  position: absolute;
  right: -9px;
  bottom: -36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
}

/* ---------------------------------------------------------
   Tapes: footage on the desk's monitors
   --------------------------------------------------------- */
.tapes {
  padding: 140px 0 120px;
}

.tapes .wrap:first-child {
  position: relative;
}

.desk {
  position: relative;
  margin-top: 64px;
  padding-bottom: 46px;
}

.monitor--main {
  position: relative;
  max-width: 960px;
  margin: 0 auto 70px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(180deg, #032325, var(--ink));
  box-shadow: 0 30px 80px -40px rgba(151, 252, 228, 0.35);
}

.monitor__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink);
}

.monitor__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* faint scanlines over the screen */
.monitor__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(2, 29, 31, 0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.monitor__hud {
  position: absolute;
  inset: 14px 16px auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--mint-soft);
  pointer-events: none;
}

.monitor__hud > span {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(2, 29, 31, 0.66);
}

.monitor__rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.monitor__rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: rec 1.4s steps(2, jump-none) infinite;
}

@keyframes rec {
  50% { opacity: 0.2; }
}

.monitor__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border: 0;
  border-radius: 14px;
  background: var(--mint);
  box-shadow: 0 6px 0 #2aa88e, 0 18px 30px -12px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: opacity 0.3s, transform 0.14s;
}

.monitor__play svg {
  width: 28px;
  height: 28px;
  fill: #03211d;
}

.monitor__play .i-pause {
  display: none;
}

.desk.is-playing .monitor__play {
  opacity: 0;
}

.desk.is-playing .monitor__screen:hover .monitor__play,
.desk.is-playing .monitor__play:focus-visible {
  opacity: 1;
}

.desk.is-playing .monitor__play .i-play {
  display: none;
}

.desk.is-playing .monitor__play .i-pause {
  display: block;
}

.monitor__play:active {
  transform: translateY(5px);
}

.monitor__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: rgba(151, 252, 228, 0.12);
}

.monitor__progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mint);
  transform-origin: left;
  transform: scaleX(0);
}

.monitor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 6px 8px;
}

.monitor__cap {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
}

/* the stand: line art, like the monitors in tape 01 */
.monitor__neck {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 150px;
  height: 58px;
  transform: translateX(-50%);
  pointer-events: none;
}

.monitor__neck::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  bottom: 6px;
  width: 26px;
  transform: translateX(-50%);
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
}

.monitor__neck::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px 6px 2px 2px;
}

.sound {
  flex: none;
}

.sound svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound .sound__spk {
  fill: currentColor;
  stroke: none;
}

.sound .sound__waves {
  display: none;
}

.sound[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: #032824;
}

.sound[aria-pressed="true"] .sound__waves {
  display: block;
}

.sound[aria-pressed="true"] .sound__mute {
  display: none;
}

/* the rack of smaller monitors on the desk */
.rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
}

.mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 7px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 29, 31, 0.55);
  text-align: left;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.3s, border-color 0.3s, transform 0.35s var(--ease-out), box-shadow 0.3s;
}

.mini:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.mini.is-active {
  opacity: 1;
  border-color: rgba(151, 252, 228, 0.55);
  box-shadow: 0 5px 0 #146058;
}

.mini__screen {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16 / 9;
}

.mini__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.mini:hover .mini__screen img {
  transform: scale(1.05);
}

.mini__name {
  padding: 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.1;
  color: var(--text);
}

.mini__name b {
  margin-right: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--mint);
  vertical-align: 0.15em;
}

.desk__top {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 26px;
  border-top: 1px solid var(--line-2);
}

.desk__top::before,
.desk__top::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 26px;
  background: var(--line-2);
}

.desk__top::before { left: 6%; }
.desk__top::after  { right: 6%; }

/* ---------------------------------------------------------
   Token
   --------------------------------------------------------- */
.token {
  padding: 140px 0 140px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(2, 29, 31, 0.5), transparent 40%);
}

.token__ca {
  margin-top: 44px;
}

.token__warn {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.token__grid {
  display: grid;
  gap: 56px;
  margin-top: 72px;
}

.stats {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}

.stats div {
  padding: 20px 0 0;
  border-top: 1px solid var(--line-2);
}

.stats dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats dd {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stats__supply dd {
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

/* the fee split: one stacked bar, 2px surface gaps, labelled directly */
.split {
  max-width: 760px;
  margin: 0;
}

.split__bar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 16px;
  margin-top: 14px;
}

.split__seg {
  position: relative;
  flex: 0 0 calc(var(--w) * 1% - 1.34px);
  height: 100%;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out), filter 0.2s;
  outline-offset: 2px;
  cursor: default;
}

.split__seg:nth-child(1) { border-radius: 4px 0 0 4px; }
.split__seg:nth-child(2) { transition-delay: 0.25s; }
.split__seg:nth-child(3) { border-radius: 0 4px 4px 0; transition-delay: 0.45s; }

.split.is-in .split__seg,
.no-js .split__seg {
  transform: none;
}

.split__seg:hover,
.split__seg:focus-visible {
  filter: brightness(1.2);
}

/* hit area taller than the mark */
.split__seg::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.split__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--ink);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.15s;
}

.split__tip.is-shown {
  opacity: 1;
}

.split__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-2);
}

.split__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.split__legend li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c);
}

.split__legend b {
  color: var(--text);
  font-weight: 700;
}

/* how to get it */
.howto {
  margin-top: 110px;
}

.howto__title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

/* the dashed route between the step blocks */
.steps::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 46px;
  border-top: 1.5px dashed var(--line-2);
}

.step {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(2, 29, 31, 0.8);
  transition-delay: calc(var(--i) * 0.12s);
}

.step__no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mint);
  font-size: 15px;
  font-weight: 800;
  color: #03211d;
}

.step h4 {
  margin: 20px 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.step p {
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
}

.step a {
  color: var(--mint);
}

.howto__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}

/* ---------------------------------------------------------
   Specimens: the fortress at night, the portal lit up in mint
   --------------------------------------------------------- */
.specimens {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 150px 0 160px;
  background: #062724;
}

.specimens__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.specimens__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 0%;
}

/* melt the top into the token section and darken the floor under the cards */
.specimens__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 43, 44, 0) 16%),
    linear-gradient(180deg, rgba(4, 30, 28, 0) 45%, rgba(4, 30, 28, 0.55) 72%, rgba(3, 26, 25, 0.92) 100%),
    linear-gradient(90deg, rgba(4, 33, 31, 0.5) 0%, rgba(4, 33, 31, 0) 50%);
}

.specimens .wrap {
  position: relative;
  z-index: 1;
}

.specimens__hint {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(120px, 18vw, 260px);
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(3, 26, 25, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  text-align: left;
  cursor: zoom-in;
  transition: box-shadow 0.3s, transform 0.4s var(--ease-out), opacity 0.8s, translate 0.8s var(--ease-out);
  transition-delay: 0s, 0s, calc(var(--i) * 0.1s), calc(var(--i) * 0.1s);
}

.spec:hover {
  box-shadow: inset 0 0 0 1px rgba(151, 252, 228, 0.32), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  transform: translateY(-6px);
}

.spec__id {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
}

.spec__img {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1;
}

.spec__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.spec:hover .spec__img img,
.spec:focus-visible .spec__img img {
  transform: scale(1.04);
  animation: hue 3.2s linear infinite;
}

@keyframes hue {
  0%   { filter: hue-rotate(0deg) saturate(1.1); }
  100% { filter: hue-rotate(360deg) saturate(1.1); }
}

.spec__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -35%;
  height: 35%;
  background: linear-gradient(180deg, rgba(151, 252, 228, 0), rgba(151, 252, 228, 0.28) 70%, rgba(151, 252, 228, 0.7) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.spec:hover .spec__scan {
  opacity: 1;
  animation: scan 1.6s linear infinite;
}

@keyframes scan {
  to { top: 100%; }
}

.spec__name {
  padding: 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text);
}

/* ---------------------------------------------------------
   Outro: the block spiral from tape 03
   --------------------------------------------------------- */
.outro {
  display: grid;
  place-items: center;
  min-height: 92vh;
  padding: 150px 0 140px;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(13, 70, 69, 0.55), transparent 75%);
}

/* the spiral is centred on the little chameleon above the headline, as in the shot */
.outro__core {
  position: relative;
  width: 84px;
  height: 42px;
  margin-bottom: 40px;
}

.outro__spiral {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1200px, 160vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
}

.outro__spiral svg.spiral {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 140s linear infinite;
}

.spiral rect {
  fill: var(--teal-2);
  stroke: rgba(151, 252, 228, 0.35);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.5s var(--ease-out), fill 0.6s;
}

.spiral rect.is-lit {
  fill: rgba(151, 252, 228, 0.75);
}

.outro.is-in .spiral rect {
  transform: scale(1);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.outro__cham {
  position: relative;
  width: 84px;
  height: 42px;
  fill: var(--mint);
  filter: drop-shadow(0 0 10px rgba(151, 252, 228, 0.6));
}

.outro__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.outro__title {
  margin: 0 0 46px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(50px, 7.6vw, 114px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: #eafff8;
  text-wrap: balance;
  text-shadow: 0 6px 40px rgba(2, 29, 31, 0.9);
}

.outro__title em {
  color: var(--mint);
}

.outro__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------------------------------------------------------
   Footer: the title block of a drawing sheet
   --------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  padding: 56px 0 48px;
}

.sheet {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--line-2);
}

.sheet__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--ink);
}

.sheet__cell--name {
  grid-column: span 3;
}

.sheet__cell--ca,
.sheet__cell--links {
  grid-column: span 3;
}

.sheet__cell--notes {
  grid-column: 1 / -1;
}

.sheet__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet__v {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}

.sheet__word {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 0.9;
  color: var(--text);
  text-decoration: none;
}

.sheet__ca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.sheet__addr {
  min-width: 0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sheet__copy {
  flex: none;
  padding-left: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mint);
}

.sheet__ca.is-copied .sheet__copy {
  font-size: 0;
}

.sheet__ca.is-copied .sheet__copy::after {
  content: attr(data-done) " ✓";
  font-size: 13px;
}

.sheet__ca:hover .sheet__addr {
  color: var(--text);
}

.sheet__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.sheet__links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.sheet__links a svg {
  width: 13px;
  height: 13px;
  color: var(--mint);
}

.sheet__links a:hover {
  color: var(--mint);
}

.sheet__cell--notes p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------------------------------------------------------
   Hidden chameleons: seven of them, blended into the page
   --------------------------------------------------------- */
.camo {
  position: absolute;
  z-index: 3;
  width: 40px;
  height: 21px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(151, 252, 228, 0.07);
  transform: rotate(var(--rot, 0deg));
  cursor: pointer;
  transition: color 0.4s, filter 0.4s;
}

.camo svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.camo:hover {
  color: rgba(151, 252, 228, 0.2);
}

.camo--inline {
  position: relative;
  display: block;
  margin: 18px 0 0;
}

.camo--desk {
  right: 14%;
  bottom: 1px;
}

.camo--foot {
  right: 18px;
  bottom: 16px;
}

.camo--ridge {
  color: rgba(151, 252, 228, 0.08);
}

.camo.is-found {
  color: var(--mint);
  filter: drop-shadow(0 0 8px rgba(151, 252, 228, 0.8));
  cursor: default;
  animation: found 0.7s var(--ease-out);
}

@keyframes found {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1); }
  40%  { transform: rotate(var(--rot, 0deg)) scale(1.6); }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); }
}

.plus-one {
  position: fixed;
  z-index: 80;
  font-size: 13px;
  font-weight: 800;
  color: var(--mint);
  pointer-events: none;
  animation: float-up 1s var(--ease-out) forwards;
}

@keyframes float-up {
  to { transform: translateY(-36px); opacity: 0; }
}

.toast {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  max-width: min(360px, calc(100vw - 132px));
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(3, 30, 28, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.4s var(--ease-out);
}

.toast.is-shown {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   Companion: perched bottom-right, picks up each section's colour
   --------------------------------------------------------- */
.buddy {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 96px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 0.5s, transform 0.6s var(--ease-out);
}

.buddy.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.buddy__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.buddy__body,
.buddy__ball {
  fill: var(--camo);
  transition: fill 1.4s ease;
}

.buddy__ball {
  stroke: var(--bg);
  stroke-width: 3.5;
}

.buddy__pupil {
  fill: var(--bg);
}

.buddy__perch {
  stroke: var(--line-2);
  stroke-width: 4;
  stroke-linecap: round;
}

.buddy__tongue {
  stroke: var(--mint-soft);
  stroke-width: 7;
  stroke-linecap: round;
}

.buddy:hover .buddy__svg {
  animation: sway 0.9s ease-in-out;
}

@keyframes sway {
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(2deg); }
}

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */
.lightbox {
  max-width: min(92vw, 900px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--ink);
  color: var(--text);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(2, 20, 22, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox img {
  width: 100%;
  height: auto;
  max-height: calc(92vh - 60px);
  object-fit: contain;
}

.lightbox__cap {
  margin: 0;
  padding: 14px 18px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}

.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(3, 30, 28, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #eafff8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out);
}

.reveal.is-in,
.no-js .reveal {
  opacity: 1;
  translate: none;
}

/* split and plate animate their own children; keep them in place */
.split.reveal,
.plate.reveal {
  opacity: 1;
  translate: none;
}

/* ---------------------------------------------------------
   Load-in: while the page loads, the chameleon walks on the spot
   on a branch that slides under it (its own walk from the hero
   clip, one stride looped). Then it blends into the dark, the
   name types out, and the name settles into the hero's wordmark
   (js/main.js, "Load-in"). Only with html.has-intro, which
   <head> sets unless reduced motion.
   --------------------------------------------------------- */
.intro {
  display: none;
}

html.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 65; /* over the nav and the companion, under the grain so the texture carries on */
  display: block;
  overflow: hidden;
  background-color: #062f2d;
  transition: background-color 0.8s ease;
}

html.intro-done .intro {
  display: none;
}

html.has-intro .intro.is-out {
  background-color: rgba(6, 47, 45, 0);
  pointer-events: none;
}

/* sized in em: 1em is the walker's width */
.intro__loader {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 1em;
  height: 0.475em; /* a frame is 360 x 171 */
  font-size: clamp(130px, 13vw, 190px);
  transform: translate(-50%, -50%);
  transition: opacity 0.45s ease, filter 0.45s ease;
}

/* it blends back into the dark before the name types out */
.intro__loader.is-gone {
  opacity: 0;
  filter: brightness(0.35);
}

/* 18 frames (0.75s at the clip's 24 fps) of the hero clip's walk, 8.44s to 9.19s, cut out and set on a treadmill */
.intro__walker {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url("../assets/img/intro/walk.webp") 0 0 / 1800% 100% no-repeat;
  animation: walk-cycle 0.75s steps(18, jump-none) infinite;
}

@keyframes walk-cycle {
  to { background-position: 100% 0; }
}

/* a soft shadow on the branch, as in the clip */
.intro__loader::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 12%;
  bottom: -0.035em;
  height: 0.07em;
  background: radial-gradient(closest-side, rgba(0, 12, 12, 0.45), rgba(0, 12, 12, 0));
}

/* the branch slides back at the walk's own pace: a stride carries it 0.1836em, four strides make one tile */
.intro__branch {
  position: absolute;
  top: calc(100% - 0.03em);
  left: 50%;
  width: 2.2em;
  height: 0.1444em;
  margin-left: -1.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 26'%3E%3Cpath d='M0 4.5H132' stroke='%231d6f66' stroke-width='4'/%3E%3Cpath d='M24 3q6-3.5 12 0' stroke='%231d6f66' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M74 6q6 7 15 9' stroke='%231d6f66' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M89 15q8-6 16 1q-8 6-16-1z' fill='%23237f73'/%3E%3C/svg%3E") 0 0 / 0.7344em 0.1444em repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  animation: belt 3s linear infinite;
}

@keyframes belt {
  to { background-position: -0.7344em 0; }
}

/* the hero's wordmark, letter for letter: it lands exactly on it */
.intro__word {
  position: absolute;
  width: max-content;
  margin: 0;
  padding-bottom: 0.08em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: #f0fffa;
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro__word:not(.is-set) {
  visibility: hidden;
}

.intro__word span {
  position: relative;
  display: inline-block;
  opacity: 0;
}

.intro__word span.is-typed {
  opacity: 1;
  animation: type-in 0.24s ease-out;
}

@keyframes type-in {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(0.05em);
  }
}

.intro__caret {
  position: absolute;
  top: 0.12em;
  bottom: 0.16em;
  left: 0;
  width: 0.035em;
  border-radius: 1px;
  background: var(--mint);
  transition: opacity 0.2s;
}

.intro__caret.is-idle {
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

.intro.is-out .intro__caret {
  opacity: 0;
  animation: none;
}

/* the hero waits underneath: its wordmark is the intro's word, the rest rises in after it lands */
html.has-intro:not(.intro-done) .hero__word {
  visibility: hidden;
}

html.has-intro .hero__word span {
  animation: none;
}

html.has-intro:not(.intro-done) .hero__sub,
html.has-intro:not(.intro-done) .hero__btns,
html.has-intro:not(.intro-done) .hero__inner .ca,
html.has-intro:not(.intro-done) .hunt {
  opacity: 0;
}

html.has-intro.intro-done .hero__sub { animation: rise-in 0.9s var(--ease-out) backwards; }
html.has-intro.intro-done .hero__btns { animation: rise-in 0.9s 0.08s var(--ease-out) backwards; }
html.has-intro.intro-done .hero__inner .ca { animation: rise-in 0.9s 0.16s var(--ease-out) backwards; }
html.has-intro.intro-done .hunt { animation: rise-in 0.9s 0.32s var(--ease-out) backwards; }

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav__links {
    display: none;
  }
}

/* squarer screens: slide the clip over so the whole animal stays in frame */
@media (max-aspect-ratio: 3/2) {
  .hero__video {
    object-position: 80% 100%;
  }
}

@media (max-width: 1180px) {
  /* the eye section stacks: copy first, then the head on a stage of its own */
  .sees {
    display: block;
    min-height: 0;
  }

  .sees__copy {
    padding-top: 96px;
    padding-bottom: 24px;
  }

  .sees__stage {
    position: relative;
    inset: auto;
    height: min(96vw, 600px);
  }

  .book {
    width: 120px;
  }

  .head {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }

  .book--ask,
  .book--bid {
    right: auto;
    left: var(--gutter);
  }

  .book--ask { top: 16%; }
  .book--bid { bottom: 10%; }
}

@media (max-width: 860px) {
  .chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
  }

  .chapter .plate,
  .chapter:nth-of-type(even) .plate {
    order: -1;
    margin: 0 18px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }

  .stats__supply {
    grid-column: 1 / -1;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps::before {
    left: 46px;
    right: auto;
    top: 30px;
    bottom: 30px;
    border-top: 0;
    border-left: 1.5px dashed var(--line-2);
  }

  .drawer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the cards stack tall here: the scene sits behind the heading only */
  .specimens__bg {
    bottom: auto;
    height: min(175vw, 1100px);
  }

  .specimens__bg img {
    object-position: 84% 0%;
  }

  .specimens__bg::after {
    background:
      linear-gradient(180deg, var(--bg) 0%, rgba(5, 43, 44, 0) 14%),
      linear-gradient(180deg, rgba(6, 39, 36, 0) 50%, #062724 100%);
  }

  .rack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor__bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet__cell--name,
  .sheet__cell--ca,
  .sheet__cell--links {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .nav__bar {
    height: 60px;
    gap: 12px;
  }

  .nav__mark {
    width: 30px;
    height: 15px;
  }

  .nav__brand span {
    font-size: 25px;
  }

  .nav__cta {
    gap: 6px;
  }

  .nav__sym {
    display: none;
  }

  .hero__word {
    font-size: clamp(64px, 21vw, 110px);
  }

  .hero__btns {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__inner .ca {
    width: 100%;
  }

  .ca__v {
    flex: 1;
  }

  .ca__full {
    display: none;
  }

  .ca__short {
    display: inline;
  }

  .hunt {
    right: 12px;
    bottom: 12px;
    height: 34px;
    font-size: 12px;
  }

  .story__list {
    padding-left: calc(var(--gutter) + 30px);
  }

  .story__rail {
    left: calc(var(--gutter) + 4px);
  }

  .chapter .plate,
  .chapter:nth-of-type(even) .plate {
    margin: 0 10px;
  }

  .plate__lines i:nth-child(1),
  .plate__lines i:nth-child(2) {
    left: -20px;
    right: -20px;
  }

  .field {
    grid-template-columns: minmax(0, 1fr);
  }

  .drawer {
    grid-template-columns: minmax(0, 1fr);
  }

  .monitor--main {
    padding: 6px;
    border-radius: 12px;
  }

  .monitor__play {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
  }

  .outro__btns {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }

  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet__cell {
    grid-column: 1 / -1;
  }

  .buddy {
    width: 70px;
  }
}

/* tall, narrow screens: the clip becomes a picture at the top, the words follow */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 76px;
    background: var(--bg);
  }

  .hero__inner {
    padding-top: 4px;
    padding-bottom: 0;
    padding-left: var(--gutter);
  }

  .hero__stage {
    position: relative;
    inset: auto;
    z-index: 0;
    flex: none;
    width: 100%;
    height: min(82vw, 56vh, 620px);
    margin-top: 60px;
  }

  .hero__video {
    object-position: 84% 100%;
  }

  .hero__shade {
    background: linear-gradient(180deg, rgba(5, 43, 44, 0) 70%, var(--bg) 100%);
  }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .grain,
  .tape__track,
  .spec:hover .spec__img img,
  .spec:hover .spec__scan {
    animation: none !important;
  }
}