/* ==========================================================================
   Grashka — The Long Table
   Layout is a 1:1 reproduction of Grashka_invest_www.pdf (1920 × 12747.4).
   Every length below is expressed in design units via --u, so the page is an
   exact proportional scale of the artwork at any desktop width.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Malinton';
  src: url('../fonts/malinton/MalintontrialversionBlack-1jo2M.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Malinton';
  src: url('../fonts/malinton/MalintontrialversionRegular-nA2r4.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monument Mono';
  src: url('../fonts/monument-grotesk/ABCMonumentGroteskSemi-Mono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monument Mono';
  src: url('../fonts/monument-grotesk/ABCMonumentGroteskSemi-Mono-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monument Mono';
  src: url('../fonts/monument-grotesk/ABCMonumentGroteskSemi-Mono-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------- placement registry --
   Coordinates must not leak from a card into the text inside it, so every
   placement property is registered as non-inheriting. A missing value means
   "0", which makes the baseline correction below collapse to nothing for
   elements that are positioned by their top-left corner instead. */
@property --x  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --y  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --b  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --w  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --fs { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --lh { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --a  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --c  { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --w-auto { syntax: '*'; inherits: false; }

/* --------------------------------------------------------------- tokens -- */
:root {
  /* colours sampled from the artwork */
  --dark:    #051C18;
  --cream:   #F6E3C1;
  --red:     #AC0000;
  --green:   #0DC959;
  --purple:  #B27ADC;
  --orange:  #ED630A;
  --white:   #FFFFFF;
  --black:   #000000;
  --hairline:#CCCCCC;

  --f-display: 'Malinton', 'Arial Black', sans-serif;
  --f-mono: 'Monument Mono', ui-monospace, 'Courier New', monospace;

  /* One design pixel. 100vw includes the classic scrollbar, so main.js
     replaces this with the real layout width as soon as it runs. */
  --u: calc(100vw / 1920);

  /* vertical metrics of the two families, as a fraction of the em box.
     Used to place text by its baseline exactly like the artwork does. */
  --mal-a: .75;    --mal-c: 1;
  --mono-a: 1.009; --mono-c: 1.384;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Stop growing once the artwork is 20% oversized; the page then centres. */
@media (min-width: 2304px) {
  :root { --u: 1.2px; }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--f-mono);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; margin: 0; }

:focus-visible {
  outline: calc(3 * var(--u)) solid var(--orange);
  outline-offset: calc(3 * var(--u));
}

.skip-link {
  position: fixed;
  top: calc(10 * var(--u));
  left: calc(10 * var(--u));
  z-index: 200;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  background: var(--cream);
  color: var(--dark);
  font-size: calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------ layout skeleton -- */
section, .site-footer { position: relative; }

.canvas {
  position: relative;
  width: calc(1920 * var(--u));
  height: 100%;
  margin-inline: auto;
}

/* Direct children of a layout box are placed at their artwork coordinates.
   --x / --y  : top-left corner
   --b        : first baseline (text), replaces --y
   --fs / --lh: type size and leading
   --a / --c  : ascent and content height of the family in use */
.canvas > *,
.trust-illu > *,
.tier > *,
.sup-card > *,
.become > *,
.member > *,
.stat > *,
.contact-form > *,
.contact-form .row > *,
.footer-social > li {
  position: absolute;
  margin: 0;
  left: calc(var(--x) * var(--u));
  top: calc((
      var(--y) + var(--b)
      - (var(--lh) - var(--c) * var(--fs)) / 2
      - var(--a) * var(--fs)
    ) * var(--u));
  width: var(--w-auto, calc(var(--w) * var(--u)));
}

/* families ---------------------------------------------------------------- */
.mal { font-family: var(--f-display); font-weight: 900; --a: var(--mal-a); --c: var(--mal-c); }
.mono { font-family: var(--f-mono); font-weight: 500; --a: var(--mono-a); --c: var(--mono-c); }

.hero-not, .hero-lovin, .hero-h,
.trust-kicker, .trust-h, .took-kicker, .took-h,
.future-kicker, .future-h, .future-lead,
.stake-h, .stat-num,
.sup-h, .sup-sub, .sup-card-kicker, .sup-card-title, .sup-card-price,
.tiers-h, .tier-kicker, .tier-name, .tier-price, .example-h,
.lt-h, .contact-h,
.team-h, .member-name, .become-h,
.rip, .rip-sub, .footer-claim {
  font-family: var(--f-display);
  font-weight: 900;
  --a: var(--mal-a);
  --c: var(--mal-c);
}

.hero-copy, .bubble-text, .trust-copy, .took-copy, .future-copy, .stake-copy,
.stat-lbl, .sup-kicker, .sup-card-get, .sup-card-list, .sup-card-note,
.tiers-copy, .tier-equity, .tier-desc, .tier-get, .tier-list, .tier-invest-as,
.example-copy, .example-fine, .lt-copy,
.contact-kicker, .contact-copy, .contact-form label, .contact-form .fake-value,
.member-role, .member-bio, .rip-kicker, .footer-nav {
  font-family: var(--f-mono);
  font-weight: 500;
  --a: var(--mono-a);
  --c: var(--mono-c);
}

/* Tracking. The artwork leaves character spacing at zero everywhere except the
   oversized display lines, which are set to -0.04em (Tc in the source file). */
.future-kicker, .future-l1, .future-l2,
.become-h,
.rip, .rip-sub, .footer-claim { letter-spacing: -0.04em; }

.hero-not { letter-spacing: -0.01em; }

/* Centred lines carry the trailing letter-space inside their advance width,
   which pushes the glyphs half a space to the right. Only the two giant lines
   are big enough for that to show. */
.future-l1, .future-l2 { text-indent: -0.04em; }

/* Type size and leading come from the same registry. */
.canvas > *,
.trust-illu > *,
.tier > *,
.sup-card > *,
.become > *,
.member > *,
.stat > *,
.contact-form > *,
.contact-form .row > *,
.footer-social > li {
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
}

/* The burger and its speech balloon are one unit; on the artwork they sit at
   absolute canvas coordinates, on small screens the caption rides along. */
.trust-illu { display: contents; }

.hero-not, .hero-lovin { font-weight: 400; }

/* Paragraph blocks: one blank line between paragraphs, as in the artwork. */
.hero-copy p + p,
.trust-copy p + p,
.took-copy p + p,
.future-copy p + p,
.stake-copy p + p,
.tiers-copy p + p,
.example-copy p + p,
.lt-copy p + p { margin-top: 1lh; }

.contact-copy p + p { margin-top: 0; }

/* -------------------------------------------------------------- buttons -- */
.btn-pill {
  display: block;
  border-radius: 999px;
  text-align: center;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.btn-pill > span {
  display: block;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  /* label baseline sits 41.3 below the pill top in the artwork */
  padding-top: calc((41.3 - (24 - 1.384 * 20) / 2 - 1.009 * 20) * var(--u));
}
.btn-pill-white { background: var(--white); color: var(--black); }
.btn-pill-green { background: var(--green); color: var(--white); }
.btn-pill:hover { transform: translateY(calc(-2 * var(--u))); filter: brightness(1.04); }
.btn-pill:active { transform: none; }

.btn-outline-red {
  --x: 941.8;
  --y: 1126.6;
  --w: 274.8;
  height: calc(51.5 * var(--u));
  border: calc(2.9 * var(--u)) solid var(--red);
  border-radius: 999px;
  color: var(--red);
  text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-outline-red > span {
  display: block;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  padding-top: calc((33.7 - 2.9 - (24 - 1.384 * 20) / 2 - 1.009 * 20) * var(--u));
}
.btn-outline-red:hover { background: var(--red); color: var(--cream); }

/* ═════════════════════════════════════════════════════════ header + menu ═ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: calc(220 * var(--u));
  z-index: 80;
  pointer-events: none;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header .canvas { height: 100%; }
.site-header.is-stuck {
  background: rgba(5, 28, 24, .9);
  backdrop-filter: blur(calc(10 * var(--u)));
  height: calc(170 * var(--u));
}
.brand {
  --x: 88; --y: 72; --w: 245;
  pointer-events: auto;
  transition: top .35s var(--ease), width .35s var(--ease);
}
.brand img { width: 100%; height: auto; }

/* The artwork positions the logo for the tall transparent header. Once the bar
   condenses, the logo would hang past its bottom edge, so shrink it a little
   and centre it: 210 wide is 88.3 tall, leaving 40.9 clear above and below. */
.site-header.is-stuck .brand { --y: 40.9; --w: 210; }
.site-header.is-stuck .burger { --y: 67.3; }

.burger {
  --x: 1768.6;
  --y: 84.5;
  --w: 51.4;
  height: calc(35.4 * var(--u));
  pointer-events: auto;
  transition: top .35s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 90;
}
.burger span {
  display: block;
  height: calc(6.95 * var(--u));
  background: var(--cream);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(14.245 * var(--u))) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-14.245 * var(--u))) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--dark);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.menu[hidden] { display: grid; }
.menu.is-open { opacity: 1; visibility: visible; }
.menu-inner { text-align: center; }
.menu-list li + li { margin-top: calc(24 * var(--u)); }
.menu-list a {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: calc(64 * var(--u));
  line-height: 1.1;
  color: var(--cream);
  transition: color .25s var(--ease);
}
.menu-list a:hover { color: var(--green); }
.menu-cta {
  display: inline-block;
  margin-top: calc(56 * var(--u));
  padding: calc(20 * var(--u)) calc(48 * var(--u));
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-family: var(--f-mono);
  font-size: calc(20 * var(--u));
  text-transform: uppercase;
}
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════ 1 · hero ═══ */
.s-hero {
  height: calc(1983.4 * var(--u));
  background: var(--dark);
  z-index: 5;
}
.hero-photo {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: calc(1080.6 * var(--u));
  object-fit: cover;
}
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(880 * var(--u));
  height: calc(220 * var(--u));
  background: linear-gradient(to bottom, rgba(5, 28, 24, 0), var(--dark));
}

.hero-arc { --x: 460; --y: 275; --w: 1000; height: auto; }
.hero-arc, .hero-not, .hero-lovin, .hero-h, .hero-copy { color: var(--cream); }

.hero-not   { --b: 527.7; --fs: 77.2; --lh: 77.2; left: 0; right: 0; width: auto; text-align: center; }
.hero-lovin { --b: 600.8; --fs: 77.2; --lh: 77.2; left: 0; right: 0; width: auto; text-align: center; }
.hero-h     { --b: 971.2; --fs: 65;   --lh: 74;   left: 0; right: 0; width: auto; text-align: center; }
.hero-copy  { --b: 1119.3; --fs: 20;  --lh: 24;   left: 0; right: 0; width: auto; text-align: center; }

.video { --x: 253.9; --y: 1321.7; --w: 1412.2; height: calc(783.8 * var(--u)); z-index: 3; }
.video-btn {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(50.4 * var(--u));
  overflow: hidden;
  background: var(--dark);
}
.video-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.video-btn:hover img { transform: scale(1.02); filter: brightness(1.08); }
.video.is-playing .video-btn { display: none; }
.video iframe, .video video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(50.4 * var(--u));
  background: var(--dark);
}
.video-note {
  position: absolute;
  inset: auto 0 calc(28 * var(--u));
  text-align: center;
  color: var(--cream);
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
}

/* ══════════════════════════════════════════════════ 2 · hard to trust ═══ */
.s-trust {
  height: calc(1443.6 * var(--u));
  background: var(--cream);
  z-index: 1;
}
.s-trust :is(p, h2, a, ul) { color: var(--red); }

.trust-kicker { --x: 247; --b: 323.1; --fs: 31; --lh: 31; --w-auto: auto; }
.trust-h      { --x: 247; --b: 387.8; --fs: 65; --lh: 65; --w-auto: auto; }
.trust-copy   { --x: 247; --b: 452.0; --fs: 20; --lh: 24; --w-auto: auto; }

/* Drawings are placed by width only, so the height has to follow the artwork's
   own proportions -- otherwise the box keeps the pixel height from the markup
   and the drawing letterboxes inside it at every scale but 1:1. The two packs
   and the photo panels set a height of their own further down and are exempt. */
.illu-burger  { --x: 930; --y: 206.6; --w: 680; height: auto; }

/* The caption is set on a baseline tilted to match the balloon it sits in, so
   --x / --b place the *centre of the first baseline* and the block turns about
   that same point rather than about the middle of its box. */
.bubble-text {
  --tilt: -12.278deg;
  --x: 1353.3; --b: 280.2; --fs: 26.9; --lh: 26.1; --w: 250;
  text-align: center;
  transform: rotate(var(--tilt));
  transform-origin: 50% calc((
      (var(--lh) - var(--c) * var(--fs)) / 2 + var(--a) * var(--fs)
    ) * var(--u));
}

.illu-globe   { --x: 243; --y: 766.6; --w: 537; height: auto; }

.took-kicker  { --x: 941.8; --b: 807.6; --fs: 31; --lh: 31; --w-auto: auto; }
.took-h       { --x: 941.8; --b: 873.0; --fs: 65; --lh: 65; --w-auto: auto; }
.took-copy    { --x: 941.8; --b: 934.3; --fs: 20; --lh: 24; --w-auto: auto; }

/* ═════════════════════════════════════════ 3 · long live the future ═════ */
.s-future {
  height: calc(881.7 * var(--u));
  background: var(--white);
  z-index: 2;
}
.s-future p, .s-future h2 { color: var(--red); }

.future-kicker { --b: -70.2; --fs: 58.3; --lh: 58.3; left: 0; right: 0; width: auto; text-align: center; }
.future-h { left: 0; right: 0; width: auto; top: 0; text-align: center; }
.future-h span { display: block; }
.future-l1 {
  font-size: calc(254 * var(--u));
  line-height: calc(254 * var(--u));
  margin-top: calc((131.3 - (254 - 254) / 2 - .75 * 254) * var(--u));
}
.future-l2 {
  font-size: calc(227 * var(--u));
  line-height: calc(227 * var(--u));
  margin-top: calc((311.3 - 131.3 - 254 + .75 * 254 - .75 * 227 + (254 - 254) / 2) * var(--u));
}

.pr-patty-sm { --x: 1589.6; --y: -199.0; --w: 219.8; height: calc(180.2 * var(--u)); }
.pr-patty-lg { --x: 304.9;  --y: 202.5;  --w: 327.3; height: calc(224.4 * var(--u)); }
.pr-chiko {
  --x: 1377.3; --y: 145.7; --w: 301.9;
  height: calc(349.2 * var(--u));
  transform-origin: 0 0;
  transform: rotate(14.89deg);
}
.pr-kojibar {
  --x: -92.8; --y: 311.8; --w: 363.6;
  height: calc(597.7 * var(--u));
  transform-origin: 0 0;
  transform: rotate(-14.06deg);
}

.future-lead { --b: 408.1; --fs: 37; --lh: 37; left: 0; right: 0; width: auto; text-align: center; }
.future-copy { --b: 460.2; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; }

/* ═══════════════════════════════════════════════════ 4 · own a stake ═══ */
.s-stake {
  height: calc(419 * var(--u));
  background: var(--cream);
  z-index: 1;
}
.s-stake p, .s-stake h2 { color: var(--red); }
.stake-h    { --b: 140.4; --fs: 80; --lh: 80; left: 0; right: 0; width: auto; text-align: center; }
.stake-copy { --b: 294.5; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; }

/* ════════════════════════════════════════════════════════ 5 · stats ════ */
.s-stats {
  height: calc(396.4 * var(--u));
  background: var(--white);
  z-index: 1;
}
/* Each column is 520 wide and centred on its artwork axis
   (340.8 / 751.9 / 1224.9 / 1639.4). */
.stat {
  --w: 520;
  text-align: center;
  height: calc(300 * var(--u));
}
.stat-1 { --x: 80.8; }
.stat-2 { --x: 491.9; }
.stat-3 { --x: 964.9; }
.stat-4 { --x: 1379.4; }
.stat-num { --b: 187.6; --fs: 74; --lh: 74; left: 0; width: 100%; color: var(--red); }
.stat-lbl { --b: 232.7; --fs: 20; --lh: 24; left: 0; width: 100%; color: var(--red); }

/* ════════════════════════════════════════════════════ 6 · supporter ════ */
.s-supporter {
  height: calc(741.3 * var(--u));
  overflow: hidden;
  z-index: 1;
}
.sup-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44.7%;
}
.sup-kicker { --x: 247.1; --b: 278.9; --fs: 20; --lh: 24; --w-auto: auto; color: var(--orange); }
.sup-h      { --x: 247;   --b: 358.2; --fs: 65; --lh: 78; --w-auto: auto; color: var(--white); }
.sup-sub    { --x: 247;   --b: 490.2; --fs: 30; --lh: 30; --w-auto: auto; color: var(--white); }

.sup-card {
  --x: 972.4; --y: 165.6; --w: 696.7;
  height: calc(467.4 * var(--u));
  background: var(--purple);
  border-radius: calc(75 * var(--u));
}
/* the kicker sits 6.9 further in than the rest of the card, as drawn */
.sup-card-kicker { --x: 58.4; --b: 85.6;  --fs: 31; --lh: 31; --w-auto: auto; color: var(--white); }
.sup-card-title  { --x: 51.5; --b: 150.3; --fs: 65; --lh: 65; --w-auto: auto; color: var(--white); }
.sup-card-price  { --x: 51.5; --b: 226.5; --fs: 50; --lh: 50; --w-auto: auto; color: var(--black); }
.sup-rule-1      { --x: 51.5; --y: 247.2; --w: 251.7; height: 1px; background: var(--white); }
.sup-rule-2      { --x: 51.5; --y: 345.7; --w: 251.7; height: 1px; background: var(--white); }
.sup-card-get    { --x: 51.5; --b: 279.2; --fs: 20; --lh: 24; --w-auto: auto; color: var(--white); }
.sup-card-list   { --x: 51.5; --b: 303.2; --fs: 20; --lh: 24; --w: 300; color: var(--black); }
.sup-card-note   { --x: 51.5; --b: 375.2; --fs: 20; --lh: 24; --w-auto: auto; color: var(--white); }
.sup-card-btn    { --x: 416.2; --y: 338.1; --w: 211.1; height: calc(68.5 * var(--u)); }

/* The artwork indents the tier lists further than the supporter list. */
.sup-card-list li, .tier-list li {
  position: relative;
  padding-left: calc(19.3 * var(--u));
}
.tier-list li { padding-left: calc(27.1 * var(--u)); }
.sup-card-list li::before, .tier-list li::before {
  content: '>';
  position: absolute;
  left: 0;
}

/* ══════════════════════════════════════════════════════ 7 · tiers ══════ */
.s-tiers {
  height: calc(1739.9 * var(--u));
  background: var(--white);
  z-index: 1;
}
.tiers-h    { --b: 183.8; --fs: 80; --lh: 80; left: 0; right: 0; width: auto; text-align: center; color: var(--green); }
.tiers-copy { --b: 342.4; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; color: var(--black); }

.tier {
  --y: 491.9;
  --w: 480.8;
  background: var(--green);
  border-radius: calc(75 * var(--u));
}
.tier-1 { --x: 214.6;  height: calc(878.4 * var(--u)); }
.tier-2 { --x: 719.6;  height: calc(896.4 * var(--u)); }
.tier-3 { --x: 1224.6; height: calc(853.0 * var(--u)); }

.tier-kicker { --x: 51.5; --b: 85.6;  --fs: 31; --lh: 31; --w-auto: auto; color: var(--white); }
.tier-name   { --x: 51.5; --b: 140.3; --fs: 53; --lh: 53; --w-auto: auto; color: var(--white); }
.tier-price  { --x: 51.5; --b: 212.5; --fs: 50; --lh: 50; --w-auto: auto; color: var(--black); }
.tier-equity { --x: 51.5; --b: 256.1; --fs: 20; --lh: 24; --w-auto: auto; color: var(--black); }
.tier-desc   { --x: 51.5; --b: 304.1; --fs: 20; --lh: 24; --w-auto: auto; color: var(--white); }
.tier-rule-a { --x: 51.5; --y: 387.5; --w: 251.7; height: 1px; background: var(--white); }
.tier-get    { --x: 51.5; --b: 429.0; --fs: 20; --lh: 24; --w-auto: auto; color: var(--white); }
.tier-list   { --x: 51.5; --b: 453.0; --fs: 20; --lh: 24; --w: 385; color: var(--black); }
.tier-rule-b { --x: 51.5; --y: 675.0; --w: 251.7; height: 1px; background: var(--white); }
.tier-invest-as { --x: 51.5; --b: 717.0; --fs: 20; --lh: 24; --w-auto: auto; color: var(--white); }
.tier-btn    { --x: 51.5; --y: 767.0; --w: 156.1; height: calc(68.6 * var(--u)); }

.tier-2 .tier-list      { --b: 477.0; }
.tier-2 .tier-rule-b    { --y: 699.1; }
.tier-2 .tier-invest-as { --b: 741.0; }
.tier-2 .tier-btn       { --y: 777.8; }

.tier-3 .tier-name      { --fs: 45; --lh: 45; }
.tier-3 .tier-price     { --b: 213.4; }
.tier-3 .tier-equity    { --b: 257.0; }
.tier-3 .tier-desc      { --b: 305.0; }
.tier-3 .tier-rule-a    { --y: 360.8; }
.tier-3 .tier-get       { --b: 402.3; }
.tier-3 .tier-list      { --b: 450.3; }
.tier-3 .tier-rule-b    { --y: 625.3; }
.tier-3 .tier-invest-as { --b: 666.3; }
.tier-3 .tier-btn       { --y: 743.6; }

.example-h    { --b: 1487.7; --fs: 60; --lh: 60; left: 0; right: 0; width: auto; text-align: center; color: var(--green); }
.example-copy { --b: 1535.7; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; color: var(--black); }
.example-fine {
  --b: 1648.5; --fs: 14; --lh: 16.8;
  left: 0; right: 0; width: auto;
  /* keep the legal note legible once the artwork is scaled below ~1500px */
  font-size: max(12px, calc(14 * var(--u)));
  text-align: center;
  color: var(--black);
  font-weight: 300;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════ 8 · long table ════ */
.s-longtable {
  height: calc(1005.4 * var(--u));
  background: var(--white);
  z-index: 1;
}
.lt-panel {
  --x: 66.8; --y: 0; --w: 1786.4;
  height: calc(1005.4 * var(--u));
  border-radius: calc(84.3 * var(--u));
  overflow: hidden;
}
.lt-photo { width: 100%; height: 100%; object-fit: cover; }
.lt-h    { --x: 292.2; --b: 273.0; --fs: 80; --lh: 80; --w-auto: auto; color: var(--cream); }
.lt-copy { --x: 933.6; --b: 227.0; --fs: 20; --lh: 24; --w-auto: auto; color: var(--cream); }
.lt-btn  { --x: 933.6; --y: 462.9; --w: 156.1; height: calc(68.6 * var(--u)); }

/* ═════════════════════════════════════════════════════ 9 · contact ═════ */
.s-contact {
  height: calc(1219.9 * var(--u));
  background: var(--white);
  z-index: 1;
}
.contact-kicker { --b: 119.3; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; color: var(--orange); }
.contact-h      { --b: 208.2; --fs: 80; --lh: 80; left: 0; right: 0; width: auto; text-align: center; color: var(--green); }
.contact-copy   { --b: 366.8; --fs: 20; --lh: 24; left: 0; right: 0; width: auto; text-align: center; color: var(--black); }

.contact-form { --x: 0; --y: 0; left: 0; right: 0; width: auto; top: 0; height: 100%; }
.contact-form .row { display: contents; }

.contact-form label {
  --x: 409.3; --fs: 20; --lh: 24; --w-auto: auto;
  color: var(--black);
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"] {
  --x: 589; --w: 895.7;
  height: calc(42.9 * var(--u));
  border: 1px solid var(--hairline);
  border-radius: calc(7.4 * var(--u));
  background: var(--white);
  padding: 0 calc(14 * var(--u));
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: calc(20 * var(--u));
  color: var(--black);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(13, 201, 89, .25);
}
.contact-form input:user-invalid { border-color: var(--red); }

.row:nth-of-type(1) label { --b: 629.9; }
.row:nth-of-type(2) label { --b: 701.9; }
.row:nth-of-type(3) label { --b: 773.9; }
.row:nth-of-type(4) label { --b: 845.9; }
.row-select label         { --b: 917.9; }

.row:nth-of-type(1) input { --y: 601.3; }
.row:nth-of-type(2) input { --y: 677.3; }
.row:nth-of-type(3) input { --y: 753.4; }
.row:nth-of-type(4) input { --y: 829.4; }

.select-wrap {
  --x: 589; --y: 905.5; --w: 229.3;
  height: calc(42.9 * var(--u));
  border: 1px solid var(--hairline);
  border-radius: calc(7.4 * var(--u));
  background: var(--white);
}
.select-wrap::after {
  content: '';
  position: absolute;
  left: calc(197 * var(--u));
  top: calc(18.6 * var(--u));
  width: 0;
  height: 0;
  border-left: calc(7.7 * var(--u)) solid transparent;
  border-right: calc(7.7 * var(--u)) solid transparent;
  border-top: calc(7.7 * var(--u)) solid var(--black);
  pointer-events: none;
}
.select-wrap select {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  padding: 0 calc(40 * var(--u)) 0 calc(19.4 * var(--u));
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  color: var(--black);
  cursor: pointer;
}
.select-wrap select:focus { outline: none; }
.select-wrap:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(13, 201, 89, .25);
}

/* A <button> centres its content box vertically; the label sits on a measured
   baseline instead, so opt out of that centring. */
.form-submit {
  --x: 589; --y: 990.2; --w: 156;
  height: calc(68.6 * var(--u));
  display: grid;
  align-content: start;
}

.form-status {
  --x: 589; --y: 1075; --w: 900;
  font-family: var(--f-mono);
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.form-status.is-visible { opacity: 1; }
.form-status.is-ok { color: var(--green); }
.form-status.is-error { color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ════════════════════════════════════════════════════════ 10 · team ════ */
.s-team {
  height: calc(1885.5 * var(--u));
  background: var(--cream);
  z-index: 4;
}
.team-h { --b: 210.0; --fs: 80; --lh: 80; left: 0; right: 0; width: auto; text-align: center; color: var(--red); }

.member { --w: 420; height: calc(1000 * var(--u)); }
.m-1 { --x: 333.6; }
.m-2 { --x: 815.6; }
.m-3 { --x: 1297.7; }

/* Each portrait is a full rectangle clipped to a 289 circle. The rectangle is
   framed slightly differently per person, so the crop window is per member.
   The source files are already greyscale. */
.member-photo { --x: 0; --y: 0; }
.m-1 .member-photo {
  --x: -11.9; --y: 288.4; --w: 314.8; height: calc(319.3 * var(--u));
  clip-path: circle(calc(144.5 * var(--u)) at calc(156.8 * var(--u)) calc(156.5 * var(--u)));
}
.m-2 .member-photo {
  --x: -24.6; --y: 285.4; --w: 336.4; height: calc(327.1 * var(--u));
  clip-path: circle(calc(145 * var(--u)) at calc(169 * var(--u)) calc(160 * var(--u)));
}
.m-3 .member-photo {
  --x: -13.1; --y: 287.6; --w: 309.8; height: calc(321 * var(--u));
  clip-path: circle(calc(145 * var(--u)) at calc(157.4 * var(--u)) calc(157.8 * var(--u)));
}
.member-name { --x: 0; --b: 703.9; --fs: 65; --lh: 64;   --w-auto: auto; color: var(--red); }
.member-role { --x: 0; --b: 807.5; --fs: 33; --lh: 39.6; --w-auto: auto; color: var(--red); }
.member-bio  { --x: 0; --b: 895.1; --fs: 20; --lh: 24;   --w-auto: auto; color: var(--red); }

.become {
  --x: 88.1; --y: 1397.5; --w: 1743.8;
  height: calc(645.5 * var(--u));
  border-radius: calc(74.2 * var(--u));
  overflow: hidden;
  z-index: 3;
}
.become-photo {
  --x: -88.1; --y: -312.4; --w: 1920;
  height: calc(1280 * var(--u));
  max-width: none;
  object-fit: cover;
}
.become-h {
  --b: 285.3; --fs: 82.4; --lh: 78;
  left: 0; right: 0; width: auto;
  text-align: center;
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════ footer ════ */
.site-footer {
  height: calc(1031.3 * var(--u));
  background: var(--orange);
  color: var(--cream);
  z-index: 3;
}
.rip-kicker   { --x: 190.3; --b: 314.7; --fs: 32.5;  --lh: 32.5;  --w-auto: auto; }
.rip          { --x: 182.6; --b: 475.3; --fs: 193.4; --lh: 193.4; --w-auto: auto; }
.rip-sub      { --x: 182.6; --b: 528.6; --fs: 53.3;  --lh: 53.3;  --w-auto: auto; }
.footer-claim { --x: 988.8; --b: 372.6; --fs: 115.1; --lh: 88.45; --w-auto: auto;
                font-family: var(--f-display); font-weight: 900;
                --a: var(--mal-a); --c: var(--mal-c); }
.footer-stamp { --x: 1508; --y: 93.9; --w: 296; height: auto; }

.footer-nav { --x: 992.8; --b: 623.0; --fs: 20; --lh: 38; --w-auto: auto; }
.footer-nav a { transition: opacity .25s var(--ease); }
.footer-nav a:hover { opacity: .65; }

.footer-social { --x: 0; --y: 0; --w: 1920; height: calc(1031.3 * var(--u)); pointer-events: none; }
.footer-social li { pointer-events: auto; }
.footer-social a { display: block; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.footer-social a:hover { transform: translateY(calc(-3 * var(--u))); opacity: .8; }
.footer-social img { width: 100%; height: auto; }
.footer-social li:nth-child(1) { --x: 985;  --y: 721.9; --w: 25; }
.footer-social li:nth-child(2) { --x: 1055; --y: 726.9; --w: 27; }
.footer-social li:nth-child(3) { --x: 1129; --y: 724.9; --w: 31; }
.footer-social li:nth-child(4) { --x: 1206; --y: 728.9; --w: 31; }

.footer-logo { --x: 990.4; --y: 843.5; --w: 245; }
.footer-logo img { width: 100%; height: auto; }

/* ════════════════════════════════════════════════ reveal on scroll ════ */
.reveal {
  opacity: 0;
  transform: translateY(calc(26 * var(--u)));
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* the two tilted packs keep their rotation while they rise */
.pr-chiko.reveal { transform: translateY(calc(26 * var(--u))) rotate(14.89deg); }
.pr-chiko.reveal.is-in { transform: rotate(14.89deg); }
.pr-kojibar.reveal { transform: translateY(calc(26 * var(--u))) rotate(-14.06deg); }
.pr-kojibar.reveal.is-in { transform: rotate(-14.06deg); }
/* likewise the balloon caption keeps its tilt */
.bubble-text.reveal { transform: translateY(calc(26 * var(--u))) rotate(var(--tilt)); }
.bubble-text.reveal.is-in { transform: rotate(var(--tilt)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════ tablet and phone layout ════ */
/* Above 1200 the artwork is reproduced 1:1 and simply scaled. Below it the
   scale would drop body copy under 13px, so the page switches to a single
   column flow that keeps the same order, colours and components. */
@media (max-width: 1199.98px) {
  :root {
    --u: clamp(.4px, 100vw / 900, .95px);
    --pad: clamp(20px, 5.5vw, 56px);
    --gap: clamp(14px, 3vw, 26px);
    --block: clamp(56px, 11vw, 104px);
  }

  /* ---- flow ---- */
  /* stays positioned so the flow content paints above the section photos */
  .canvas {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 780px;
    margin-inline: auto;
    padding-inline: var(--pad);
  }
  /* the artwork heights are set per section class, so match that specificity */
  main section[class], footer.site-footer { height: auto; }
  main section > .canvas,
  .site-footer > .canvas { padding-block: var(--block); }

  .canvas > *, .trust-illu > *,
  .tier > *, .sup-card > *, .become > *, .member > *, .stat > *,
  .contact-form > *, .contact-form .row > *, .footer-social > li {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin: 0 0 var(--gap);
    text-align: left;
  }
  .canvas > *:last-child,
  .tier > *:last-child,
  .sup-card > *:last-child,
  .member > *:last-child { margin-bottom: 0; }

  /* the artwork's hand-set line breaks are for a 1920 canvas */
  main br, .site-footer br { display: none; }
  .softbrk { display: none; }

  /* ---- type ---- */
  .canvas > *, .tier > *, .sup-card > *, .become > *, .member > *, .stat > *,
  .contact-form > *, .contact-form .row > *, .footer-social > li,
  .btn-pill > span, .btn-outline-red > span {
    font-size: clamp(14px, 1.1vw + 10px, 18px);
    line-height: 1.55;
  }
  .example-fine { font-size: clamp(12px, .8vw + 9px, 14px); }
  .bubble-text  { font-size: clamp(15px, 1.6vw + 9px, 22px); line-height: 1.15; }

  .hero-h, .trust-h, .took-h, .stake-h, .tiers-h, .lt-h, .contact-h,
  .team-h, .sup-h, .sup-card-title, .member-name, .example-h, .become-h,
  .hero-not, .hero-lovin, .stat-num, .future-kicker, .future-l1, .future-l2,
  .tier-name, .tier-price, .sup-card-price, .rip, .rip-sub, .footer-claim,
  .future-lead, .trust-kicker, .took-kicker, .tier-kicker, .sup-card-kicker,
  .sup-sub, .member-role, .rip-kicker { line-height: 1.08; }

  .future-l1    { font-size: clamp(38px, 11.5vw, 118px); }
  .future-l2    { font-size: clamp(34px, 10.3vw, 106px); }
  .rip          { font-size: clamp(56px, 17vw, 170px); }
  .footer-claim { font-size: clamp(32px, 9.5vw, 98px); line-height: 1; }
  .become-h     { font-size: clamp(24px, 6.4vw, 62px); }
  .stake-h, .tiers-h, .lt-h, .contact-h, .team-h,
  .hero-not, .hero-lovin { font-size: clamp(28px, 6.6vw, 66px); }
  .stat-num     { font-size: clamp(28px, 6.2vw, 60px); }
  .hero-h, .trust-h, .took-h, .sup-h,
  .sup-card-title, .member-name { font-size: clamp(24px, 5.4vw, 54px); }
  .example-h    { font-size: clamp(22px, 4.8vw, 48px); }
  .future-kicker, .tier-name, .rip-sub { font-size: clamp(19px, 4.1vw, 42px); }
  .tier-3 .tier-name { font-size: clamp(17px, 3.6vw, 36px); }
  .tier-price, .sup-card-price { font-size: clamp(20px, 4vw, 40px); }
  .future-lead  { font-size: clamp(17px, 2.6vw, 30px); }
  .member-role  { font-size: clamp(15px, 2vw, 24px); }
  .trust-kicker, .took-kicker, .tier-kicker, .sup-card-kicker,
  .sup-sub, .rip-kicker { font-size: clamp(15px, 2.1vw, 26px); }

  /* ---- header and menu ---- */
  .site-header { height: auto; }
  .site-header.is-stuck { height: auto; }
  .site-header .canvas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: clamp(12px, 2.6vw, 22px);
  }
  .brand { width: clamp(112px, 26vw, 168px); margin: 0; }
  .burger {
    width: 34px;
    height: 24px;
    margin: 0;
    flex: none;
  }
  .burger span { height: 4px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  .menu-list a { font-size: clamp(26px, 7.4vw, 52px); }
  .menu-list li + li { margin-top: clamp(10px, 2.6vw, 20px); }
  .menu-cta {
    margin-top: clamp(26px, 6vw, 48px);
    padding: 14px 30px;
    font-size: clamp(13px, 1vw + 9px, 16px);
  }

  /* ---- hero ---- */
  .s-hero > .canvas { padding-top: clamp(96px, 24vw, 190px); }
  .hero-photo { inset: 0; height: 100%; }
  .hero-fade {
    inset: 0;
    height: auto;
    background: linear-gradient(to bottom,
      rgba(5, 28, 24, .45) 0%, rgba(5, 28, 24, .25) 28%, var(--dark) 82%);
  }
  .hero-arc { width: min(100%, 460px); margin-inline: auto var(--gap); }
  .hero-not, .hero-lovin, .hero-h, .hero-copy { text-align: center; }
  .hero-not { margin-bottom: 0; }

  .video {
    aspect-ratio: 1412 / 784;
    height: auto;
    margin-top: var(--block);
  }
  .video-btn { border-radius: clamp(14px, 4vw, 40px); }
  .video iframe, .video video { border-radius: clamp(14px, 4vw, 40px); }
  .video-note { inset: auto 0 12px; font-size: 14px; line-height: 1.4; }

  /* ---- hard to trust ---- */
  .trust-illu {
    display: block;
    position: relative;
    container-type: inline-size;
    width: min(100%, 420px);
    margin: 0 auto var(--gap);
  }
  .illu-burger, .illu-globe { width: 100%; margin: 0 auto; }
  .illu-globe { width: min(100%, 420px); }
  /* The balloon's centre is at 80.6%/16.9% of the 680x450 artwork; pin the
     caption's own centre there so it stays put however the illustration is
     scaled. Type is sized off the illustration, not the viewport, for the same
     reason -- the artwork sets it at 3.95% of the drawing's width. */
  .bubble-text,
  .bubble-text.reveal,
  .bubble-text.reveal.is-in {
    position: absolute;
    left: 80.6%;
    top: 16.9%;
    width: 40%;
    margin: 0;
    text-align: center;
    font-size: max(12px, 3.95cqw);
    line-height: .97;
    transform: translate(-50%, -50%) rotate(var(--tilt));
    transform-origin: 50% 50%;
  }
  .bubble-text br { display: revert; }
  .took-kicker { margin-top: var(--block); }
  .btn-outline-red {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 14px 26px;
    border-width: 2px;
  }
  .btn-outline-red > span { padding-top: 0; }

  /* ---- the future of food ---- */
  .future-kicker, .future-h, .future-lead, .future-copy { text-align: center; }
  .future-l1, .future-l2 { margin-top: 0; text-indent: 0; }
  .pr-patty-sm, .pr-patty-lg { display: none; }
  .pr-chiko, .pr-kojibar,
  .pr-chiko.reveal, .pr-kojibar.reveal,
  .pr-chiko.reveal.is-in, .pr-kojibar.reveal.is-in {
    transform: none;
    width: min(46%, 200px);
    height: auto;
    margin-inline: auto;
  }

  /* ---- own a stake ---- */
  .stake-h, .stake-copy { text-align: center; }

  /* ---- stats ---- */
  .s-stats > .canvas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--block) var(--gap);
  }
  .stat { height: auto; text-align: center; margin: 0; }
  .stat-num, .stat-lbl { text-align: center; }

  /* ---- supporter ---- */
  .s-supporter { overflow: hidden; }
  .sup-photo { position: absolute; inset: 0; height: 100%; }
  .s-supporter > .canvas { position: relative; }
  .s-supporter > .canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 28, 24, .55);
  }
  .s-supporter > .canvas > * { position: relative; left: auto; top: auto; }
  .sup-card {
    height: auto;
    padding: clamp(24px, 5vw, 44px);
    border-radius: clamp(24px, 6vw, 60px);
    margin-top: var(--block);
  }
  .sup-rule-1, .sup-rule-2, .tier-rule-a, .tier-rule-b { width: 100%; margin-block: var(--gap); }

  /* ---- tiers ---- */
  .tiers-h, .tiers-copy, .example-h, .example-copy, .example-fine { text-align: center; }
  .tier {
    height: auto;
    padding: clamp(24px, 5vw, 44px);
    border-radius: clamp(24px, 6vw, 60px);
    margin-bottom: var(--gap);
  }
  .sup-card-list li, .tier-list li { padding-left: 1.4em; }
  .sup-card-list li::before, .tier-list li::before { left: 0; }
  .example-h { margin-top: var(--block); }

  /* ---- long table ---- */
  .lt-panel { height: auto; border-radius: clamp(20px, 5vw, 60px); }
  .lt-photo { height: auto; }

  /* ---- contact ---- */
  .contact-kicker, .contact-h, .contact-copy { text-align: center; }
  .contact-form .row { display: block; margin-bottom: var(--gap); }
  .contact-form label { display: block; margin-bottom: 6px; }
  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"],
  .select-wrap {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    padding-inline: 14px;
  }
  .select-wrap { padding-inline: 0; position: relative; }
  .select-wrap::after { left: auto; right: 16px; top: 21px; border-width: 7px 7px 0; }
  .select-wrap select { padding: 0 40px 0 14px; }
  .contact-form input, .select-wrap select { font-size: 16px; }
  .form-status { margin-top: var(--gap); font-size: 14px; line-height: 1.5; }

  /* ---- team ---- */
  .member { height: auto; margin-bottom: var(--block); }
  .member-photo,
  .m-1 .member-photo, .m-2 .member-photo, .m-3 .member-photo {
    width: clamp(150px, 42vw, 230px);
    aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    clip-path: none;
    border-radius: 50%;
    margin-inline: auto;
  }
  .become {
    height: auto;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: clamp(20px, 5vw, 60px);
    padding: var(--pad);
  }
  .become-photo {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
  }
  .become-h { grid-area: 1 / 1; text-align: center; z-index: 1; margin: 0; }

  /* ---- footer ---- */
  .footer-stamp { width: clamp(120px, 30vw, 200px); margin-block: var(--block) var(--gap); }
  .footer-nav a { display: inline-block; padding-block: 7px; }
  .footer-nav li + li { margin-top: 2px; }
  .skip-link { top: 10px; left: 10px; padding: 12px 20px; font-size: 15px; border-radius: 8px; }
  .footer-social {
    height: auto;
    display: flex;
    gap: 22px;
    align-items: center;
    pointer-events: auto;
    margin-top: var(--gap);
  }
  .footer-social li { margin: 0; }
  .footer-social li:nth-child(1) { width: 22px; }
  .footer-social li:nth-child(2) { width: 24px; }
  .footer-social li:nth-child(3) { width: 27px; }
  .footer-social li:nth-child(4) { width: 27px; }
  .footer-logo { width: clamp(140px, 34vw, 210px); margin-top: var(--block); }

  /* ---- buttons ---- */
  .btn-pill {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 15px 32px;
  }
  .btn-pill > span { padding-top: 0; }

  :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
}

/* Two columns for the card grids while there is still room for them. */
@media (min-width: 700px) and (max-width: 1199.98px) {
  .s-stats > .canvas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════ debug overlay ══ */
.debug-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 999;
  max-width: 340px;
  max-height: 45vh;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(5, 28, 24, .92);
  color: #9BE8B6;
  font: 11px/1.45 ui-monospace, monospace;
  white-space: pre-wrap;
}
.debug-panel b { color: #FFD37A; }
.debug-grid {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(255, 0, 0, .25) 0 1px, transparent 1px calc(100 * var(--u)));
}