/* HeadOn Impact design system — measured from exoape.com 2026-09-02 @1280px.
   One file, every token. Amber budget: logo mark, link hover underline, one label per section. */

:root {
  /* palette (Exo Ape, unchanged) */
  --color-white: #ffffff;
  --color-off-white: #f8f8f8;
  --color-dark-grey: #0d0e13;
  --color-dark-grey-02: rgba(13,14,19,.2);
  --color-dark-grey-04: rgba(13,14,19,.4);
  --color-dark-grey-06: rgba(13,14,19,.6);
  --color-dark-grey-08: rgba(13,14,19,.8);
  --color-light-grey: #e4e0db;
  --color-light-grey-02: hsla(33,14%,88%,.2);
  --color-light-grey-06: hsla(33,14%,88%,.6);
  --color-sand: #e0ccbb;
  --color-sand-06: hsla(28,37%,81%,.6);
  --color-sand-08: hsla(28,37%,81%,.8);
  --color-story: #070707;
  --color-white-06: rgba(255,255,255,.6);
  --color-white-02: rgba(255,255,255,.2);
  /* HeadOn deviation: the logo mark's own amber (fill in headon-logo-CANONICAL.svg) */
  --color-amber: #f5a623;

  /* type — TWK Lausanne on the reference; Hanken Grotesk until D1 is bought */
  --font-sans: 'Hanken Grotesk', 'TWK Lausanne', -apple-system, BlinkMacSystemFont, sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;

  /* mobile-first scale (exoape :root) */
  --font-s-h0: 25.6vw;  --font-lh-h0: 25.6vw;  --font-ls-h0: -1.2vw;
  --font-s-h1: 16vw;    --font-lh-h1: 16vw;    --font-ls-h1: -0.4vw;
  --font-s-h2: 7.7333vw; --font-lh-h2: 9.0667vw; --font-ls-h2: -0.2667vw;
  --font-s-h3: 6.4vw;   --font-lh-h3: 8vw;     --font-ls-h3: -0.1333vw;
  --font-s-h4: 4.8vw;   --font-lh-h4: 6.4vw;   --font-ls-h4: 0;
  --font-s-p: 3.7333vw; --font-lh-p: 5.6vw;    --font-ls-p: 0.0267vw;
  --font-s-p-small: 3.7333vw; --font-lh-p-small: 5.6vw;
  --font-s-subtitle: 3.2vw; --font-lh-subtitle: 4.2667vw;
  --font-s-cta: 4.2667vw; --font-lh-cta: 4.2667vw;
  --font-s-label: 3.7333vw; --font-lh-label: 3.7333vw;

  /* layout */
  --container: 89.3333vw;      /* mobile: 335/375 */
  --section-pad: 26.6667vw;
  --gutter: 5.3333vw;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .5s;
}

@media (min-width: 601px) {
  :root {
    --font-s-h0: 17.3611vw; --font-lh-h0: 15.6944vw; --font-ls-h0: -0.7986vw;
    --font-s-h1: 10vw;      --font-lh-h1: 10vw;      --font-ls-h1: -0.3472vw;
    --font-s-h2: 3.6111vw;  --font-lh-h2: 4.4444vw;  --font-ls-h2: -0.1042vw;
    --font-s-h3: 2.2222vw;  --font-lh-h3: 2.7778vw;  --font-ls-h3: -0.0069vw;
    --font-s-h4: 1.6667vw;  --font-lh-h4: 2.2222vw;  --font-ls-h4: 0;
    --font-s-p: 1.1111vw;   --font-lh-p: 1.6667vw;   --font-ls-p: 0.0069vw;
    --font-s-p-small: 0.9722vw; --font-lh-p-small: 1.4583vw;
    --font-s-subtitle: 0.8333vw; --font-lh-subtitle: 1.1111vw;
    --font-s-cta: 1.1111vw; --font-lh-cta: 1.1111vw;
    --font-s-label: 0.9722vw; --font-lh-label: 0.9722vw;
    --container: 83.3333vw;   /* 1066/1280 */
    --section-pad: 14.3056vw; /* 183/1280 */
    --gutter: 2.7778vw;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--font-s-p);
  line-height: var(--font-lh-p);
  letter-spacing: var(--font-ls-p);
  color: var(--color-dark-grey);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }

/* ---------- type ramp ---------- */
.h0 { font-size: var(--font-s-h0); line-height: var(--font-lh-h0); letter-spacing: var(--font-ls-h0); font-weight: var(--fw-light); }
.h1 { font-size: var(--font-s-h1); line-height: var(--font-lh-h1); letter-spacing: var(--font-ls-h1); font-weight: var(--fw-light); }
.h2 { font-size: var(--font-s-h2); line-height: var(--font-lh-h2); letter-spacing: var(--font-ls-h2); font-weight: var(--fw-light); }
.h3 { font-size: var(--font-s-h3); line-height: var(--font-lh-h3); letter-spacing: var(--font-ls-h3); font-weight: var(--fw-light); }
.h4 { font-size: var(--font-s-h4); line-height: var(--font-lh-h4); font-weight: var(--fw-light); }
.p  { font-size: var(--font-s-p); line-height: var(--font-lh-p); letter-spacing: var(--font-ls-p); }
.p-small { font-size: var(--font-s-p-small); line-height: var(--font-lh-p-small); }
.subtitle { font-size: var(--font-s-subtitle); line-height: var(--font-lh-subtitle); }
.label { font-size: var(--font-s-label); line-height: var(--font-lh-label); font-weight: var(--fw-regular); }
.muted { opacity: .6; }

/* section eyebrow — exoape h2 12.44px/32.89px with ✦ */
.eyebrow {
  font-size: var(--font-s-label); line-height: 2.6em; font-weight: var(--fw-regular);
  display: flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: '✦'; font-size: .8em; color: var(--color-amber); } /* amber budget: 1 label per section */

/* ---------- layout ---------- */
.container { width: var(--container); margin: 0 auto; }
.section { padding: var(--section-pad) 0; position: relative; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.col-6 { grid-column: span 6; } .col-5 { grid-column: span 5; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@media (max-width: 600px) { .col-6, .col-5, .col-4, .col-3 { grid-column: span 12; } }

/* themes — background + text pairs the reference uses */
.light { background: var(--color-white); color: var(--color-dark-grey); }
.dark  { background: var(--color-dark-grey); color: var(--color-sand); }
.story { background: var(--color-story); color: var(--color-sand); }
.sand  { background: var(--color-sand); color: var(--color-dark-grey); }

/* ---------- link with underline reveal ---------- */
.link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--font-s-label); line-height: 1; font-weight: var(--fw-regular);
  position: relative; padding-bottom: .35em;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: left; transition: transform var(--dur) var(--ease), background var(--dur);
}
.link:hover::after { transform: scaleX(.4); background: var(--color-amber); } /* amber budget: hover only */
.link .arrow { transition: transform var(--dur) var(--ease); }
.link:hover .arrow { transform: translate(2px,-2px); }

/* ---------- tile (project card) ---------- */
.tile { display: block; position: relative; overflow: hidden; background: var(--color-light-grey); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover img, .tile:hover video { transform: scale(1.04); }
.tile-meta { margin-top: 1.2em; }
.tile-meta .h4 { font-weight: var(--fw-regular); }
.tile-meta .subtitle { opacity: .6; margin-top: .25em; }

/* ---------- nav ---------- */
.nav-links { display: flex; gap: 2.2vw; font-size: var(--font-s-label); font-weight: var(--fw-regular); }
.nav-links a { position: relative; padding-bottom: .3em; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }

/* ---------- logo ---------- */
.logo { display: block; height: 2.2vw; min-height: 28px; width: auto; }
.logo img { height: 100%; width: auto; }

/* ---------- reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(2.5vw); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-lines > * { display: block; overflow: hidden; }
.reveal-lines > * > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease); }
.reveal-lines.is-in > * > span { transform: none; }
.reveal-lines.is-in > *:nth-child(2) > span { transition-delay: .08s; }
.reveal-lines.is-in > *:nth-child(3) > span { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-lines > * > span { transition: none; opacity: 1; transform: none; } }

/* ---------- divider / small utilities ---------- */
.rule { height: 1px; background: currentColor; opacity: .2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }