/* ==========================================================================
   Alex Rivera - personal site prototype
   Visual language adapted from a bold editorial / motorsport style homepage.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Bodoni Moda", "Times New Roman", serif;
  --sans-wght: 750;
  --sans-wdth: 93;
  --sans-wide: 100;

  /* rhythm */
  --gutter: 1.25rem;
  --pad: 1.25rem;
  --nav-pad-y: 1.35rem;
  --radius-s: 0.75rem;
  --radius-m: 1.75rem;
  --radius-l: 4rem;

  /* display steps */
  --step-impact: 7.5rem;
  --step-title: 4.25rem;
  --step-lead: 2rem;
  --step-body: 1.0625rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   THEMES
   Every theme defines the same semantic token contract:

   surfaces   --surface-1  page base          --surface-2  band / section
              --surface-3  card, ticket       --surface-dark  dark section
              --surface-darkest               --surface-darkest-hover
   on light   --ink-1 primary  --ink-2 secondary  --ink-3 tertiary
              --line-on-light  hairline       --rule-dark  grid line on dark
   on dark    --paper-1 primary  --paper-2 secondary  --paper-3 tertiary
              --paper-dim unlit text  --line-on-dark  --line-on-dark-strong
   accent     --accent (solid fill)  --accent-hover  --accent-text (on fill)
              --accent-soft (display accent on dark)
              --accent-on-dark (small text / icons on dark)
              --accent-ink (accent on light)
              --accent-decor (decorative strokes)  --accent-track  --glow-accent
   utility    --shadow-ink  --veil-light  --veil-heavy
              --nav-scrim-light  --nav-scrim-dark  --field-bg  --field-border
              --focus

   Adding a theme = copy a block, change the values, add the name to
   THEMES in assets/js/main.js.
   ========================================================================== */

/* -- 1. Matcha: deep desaturated green + acid lime ----------------------- */
:root,
:root[data-theme="matcha"] {
  --surface-1: #f4f4ed;
  --surface-2: #efefe5;
  --surface-3: #efefe5;
  --surface-dark: #282c20;
  --surface-darkest: #111112;
  --surface-darkest-hover: #17181a;

  --ink-1: #282c20;
  --ink-2: #3b3c38;
  --ink-3: #535450;
  --line-on-light: #b4b8a5;
  --rule-dark: #3b3c38;

  --paper-1: #f4f4ed;
  --paper-2: #dde1d2;
  --paper-3: #b4b8a5;
  --paper-dim: rgba(244, 244, 237, 0.28);
  --line-on-dark: rgba(244, 244, 237, 0.18);
  --line-on-dark-strong: rgba(244, 244, 237, 0.32);

  --accent: #d2ff00;
  --accent-hover: #e2ff5c;
  --accent-text: #282c20;
  --accent-soft: #b2c73a;
  --accent-on-dark: #d2ff00;
  --accent-ink: #b2c73a;
  --accent-decor: #d2ff00;
  --accent-track: rgba(40, 44, 32, 0.22);
  --glow-accent: rgba(178, 199, 58, 0.16);

  --shadow-ink: rgba(40, 44, 32, 0.55);
  --veil-light: rgba(17, 17, 18, 0.12);
  --veil-heavy: rgba(17, 17, 18, 0.72);
  --nav-scrim-light: rgba(244, 244, 237, 0.86);
  --nav-scrim-dark: rgba(17, 17, 18, 0.72);
  --field-bg: rgba(244, 244, 237, 0.08);
  --field-border: rgba(244, 244, 237, 0.28);

  --focus: #e05200;
}

/* -- 2. Blush: blush / rose / lavender / iris ---------------------------- */
:root[data-theme="blush"] {
  --surface-1: #f8e8ee;   /* blush */
  --surface-2: #f1d8e2;   /* blush -> rose */
  --surface-3: #e8c5d0;   /* rose */
  --surface-dark: #2c213b;        /* deep iris */
  --surface-darkest: #1b1424;     /* deep iris, darker */
  --surface-darkest-hover: #251a31;

  --ink-1: #2c213b;
  --ink-2: #4a3c5c;
  --ink-3: #5d4e6f;
  --line-on-light: #bda3cb;
  --rule-dark: #3a2e4b;

  --paper-1: #f8e8ee;
  --paper-2: #dcc6e4;
  --paper-3: #b79ecb;
  --paper-dim: rgba(248, 232, 238, 0.30);
  --line-on-dark: rgba(248, 232, 238, 0.18);
  --line-on-dark-strong: rgba(248, 232, 238, 0.32);

  --accent: #c9a0dc;      /* lavender */
  --accent-hover: #d7b6e6;
  --accent-text: #2c213b;
  --accent-soft: #c9a0dc;
  --accent-on-dark: #c9a0dc;
  --accent-ink: #9b72cf;  /* iris */
  --accent-decor: #9b72cf;
  --accent-track: rgba(44, 33, 59, 0.22);
  --glow-accent: rgba(155, 114, 207, 0.28);

  --shadow-ink: rgba(44, 33, 59, 0.45);
  --veil-light: rgba(27, 20, 36, 0.10);
  --veil-heavy: rgba(27, 20, 36, 0.72);
  --nav-scrim-light: rgba(248, 232, 238, 0.86);
  --nav-scrim-dark: rgba(27, 20, 36, 0.72);
  --field-bg: rgba(248, 232, 238, 0.08);
  --field-border: rgba(248, 232, 238, 0.28);

  --focus: #8a5cc4;
}

/* -- 3. Frost (default): deep navy / steel blue / pale mint / white ------- */
:root[data-theme="frost"] {
  --surface-1: #ffffff;   /* white */
  --surface-2: #f1faee;   /* pale-mint */
  --surface-3: #e4edf4;   /* derived: pale steel tint */
  --surface-dark: #1d3557;        /* deep-navy */
  --surface-darkest: #132239;     /* derived */
  --surface-darkest-hover: #1a2b44;

  --ink-1: #1d3557;
  --ink-2: #3d5a80;
  --ink-3: #4c6a87;
  --line-on-light: #b4c6d4;
  --rule-dark: #2f4a6d;

  --paper-1: #f1faee;
  --paper-2: #c9d9e5;
  --paper-3: #9fb6c9;
  --paper-dim: rgba(241, 250, 238, 0.30);
  --line-on-dark: rgba(241, 250, 238, 0.18);
  --line-on-dark-strong: rgba(241, 250, 238, 0.32);

  /* steel-blue is a mid tone: it carries white labels as a fill (4.59:1),
     which is the opposite of the light accents in the other two themes.
     On dark surfaces it is too weak, so those rules use --accent-on-dark. */
  --accent: #457b9d;      /* steel-blue */
  --accent-hover: #3a6a88;
  --accent-text: #ffffff;
  --accent-soft: #8fc1de;
  --accent-on-dark: #8fc1de;
  --accent-ink: #457b9d;
  --accent-decor: #457b9d;
  --accent-track: rgba(255, 255, 255, 0.28);
  --glow-accent: rgba(69, 123, 157, 0.30);

  --shadow-ink: rgba(29, 53, 87, 0.45);
  --veil-light: rgba(19, 34, 57, 0.12);
  --veil-heavy: rgba(19, 34, 57, 0.72);
  --nav-scrim-light: rgba(255, 255, 255, 0.86);
  --nav-scrim-dark: rgba(19, 34, 57, 0.72);
  --field-bg: rgba(241, 250, 238, 0.08);
  --field-border: rgba(241, 250, 238, 0.28);

  --focus: #5a87aa;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge / IE */
}

/* hide the page scrollbar but keep the page scrollable */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body,
.menu {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.55;
  font-variation-settings: "wght" 420, "wdth" var(--sans-wide);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- helpers */

.sans {
  font-family: var(--font-sans);
  font-variation-settings: "wght" var(--sans-wght), "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0;
}

.serif {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 820, "opsz" 13;
  text-transform: uppercase;
  letter-spacing: 0;
}

.label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.2;
}

/* slanted monogram stand-in for a custom logo glyph */
.mono-mark {
  display: inline-block;
  font-family: var(--font-sans);
  font-variation-settings: "wght" 900, "wdth" 72;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
}
.mono-mark span { display: block; transform: skewX(-11deg); }

.section-title {
  font-size: var(--step-title);
  line-height: 0.9;
  letter-spacing: 0;
}
.section-title--dark { color: var(--ink-1); }
.section-title--light { color: var(--paper-1); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .ico { width: 1em; height: 1em; }

.btn--accent { background: var(--accent); color: var(--accent-text); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink-1); color: var(--paper-1); }
.btn--ink:hover { background: var(--surface-darkest); }
.btn--lg { padding: 0.95rem 1.5rem; font-size: 0.875rem; }

/* ------------------------------------------------------------------- loader */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: var(--accent);
  color: var(--accent-text);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader__mark { font-size: 4.5rem; }
.loader__label {
  position: absolute;
  bottom: 2rem;
  font-size: 0.6875rem;
  font-variation-settings: "wght" 750, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.loader__bar {
  position: absolute;
  left: 50%;
  bottom: 4.75rem;
  width: 8rem;
  height: 2px;
  background: var(--accent-track);
  transform: translateX(-50%);
  overflow: hidden;
}
.loader__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent-text);
  transition: width 0.3s linear;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: var(--nav-pad-y) var(--gutter);
  color: var(--ink-1);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.nav__brand {
  display: block;
  font-size: 1.375rem;
  line-height: 0.84;
  letter-spacing: 0;
  white-space: nowrap;
}
.nav__brand-serif {
  display: block;
  font-family: var(--font-serif);
  font-variation-settings: "wght" 800, "opsz" 14;
  text-transform: uppercase;
}
.nav__brand-sans {
  display: block;
  font-family: var(--font-sans);
  font-variation-settings: "wght" 850, "wdth" 80;
  text-transform: uppercase;
}

.nav__mark {
  font-size: 1.5rem;
  justify-self: center;
}

.nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.nav__menu-btn {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid currentColor;
  border-radius: 0.85rem;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.nav__menu-btn:hover { background: currentColor; }
.nav__menu-btn:hover .ico { stroke: var(--paper-1); }
/* when the nav sits over a dark section, currentColor is light, so the
   hovered button becomes light and its icon has to flip to the ink colour */
.nav.is-light .nav__menu-btn:hover .ico { stroke: var(--ink-1); }

/* preview-only theme switcher */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.42rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.theme-switch__dot {
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.theme-switch__dot[data-theme-set="matcha"] { --swatch: #d2ff00; }
.theme-switch__dot[data-theme-set="blush"] { --swatch: #9b72cf; }
.theme-switch__dot[data-theme-set="frost"] { --swatch: #457b9d; }
.theme-switch__dot:hover { transform: scale(1.12); }
.theme-switch__dot[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px currentColor;
}

.nav.is-solid {
  background: var(--nav-scrim-light);
  backdrop-filter: blur(14px);
}

.nav.is-light { color: var(--paper-1); }
.nav.is-light.is-solid { background: var(--nav-scrim-dark); }

/* --------------------------------------------------------------------- menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--nav-pad-y) var(--gutter) 2rem;
  background: var(--surface-dark);
  color: var(--paper-1);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

/* Mirrors the nav grid so the brand and the button land on the same pixels.
   Both the nav and this header use --nav-pad-y, so the hamburger and the
   close button occupy one and the same box in every scroll state. */
.menu__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 2.75rem;
}
.nav__brand--light { font-size: 1.375rem; }

.menu__close {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid currentColor;
  border-radius: 0.85rem;
  color: var(--paper-1);
}

.menu__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 3rem 0;
}
.menu__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line-on-dark);
  font-family: var(--font-sans);
  font-size: 3rem;
  font-variation-settings: "wght" 750, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  line-height: 1.05;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.menu__links a:hover { color: var(--accent-on-dark); padding-left: 0.75rem; }
.menu__links em {
  font-style: normal;
  font-size: 0.75rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  letter-spacing: 0.1em;
  color: var(--paper-3);
}

.menu__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
}
.menu__col .label { color: var(--paper-3); margin-bottom: 0.65rem; }
.menu__col li { padding: 0.2rem 0; font-size: 0.9375rem; }
.menu__col a:hover { color: var(--accent-on-dark); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: 8rem var(--gutter) 2.5rem;
  overflow: hidden;
  background: var(--surface-1);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; color: var(--line-on-light); }
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.hero__photo {
  position: absolute;
  top: -10%;
  right: -6%;
  width: 54%;
  height: 124%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.14;
  filter: grayscale(1) contrast(1.15);
  -webkit-mask-image: radial-gradient(58% 58% at 52% 42%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 78%);
  mask-image: radial-gradient(58% 58% at 52% 42%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 78%);
}

.hero__inner { position: relative; z-index: 2; grid-row: 1; align-self: end; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-variation-settings: "wght" 680, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
}
.hero__eyebrow i { display: block; width: 2.5rem; height: 1px; background: var(--line-on-light); }

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: 10rem;
  line-height: 1;
  letter-spacing: 0;
}
.hero__title .line { display: block; }
.hero__title .line--serif {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 850, "opsz" 13;
  text-transform: uppercase;
}
.hero__title .line--sans {
  font-family: var(--font-sans);
  font-variation-settings: "wght" 880, "wdth" 76;
  text-transform: uppercase;
  margin-top: -0.16em;
}

.hero__foot {
  position: relative;
  z-index: 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-top: 3rem;
}

.hero__sub {
  max-width: 32rem;
  justify-self: center;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--ink-2);
}

/* status ticket */
.ticket {
  width: 100%;
  padding: 1rem 1.1rem 1.15rem;
  background: var(--surface-3);
  border: 1px solid var(--line-on-light);
  border-radius: 1.25rem 1.25rem 0.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 18px 40px -30px var(--shadow-ink);
}
.ticket__label {
  font-size: 0.5625rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.ticket__strong {
  font-size: 0.8125rem;
  font-variation-settings: "wght" 800, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ticket__rule { height: 1px; margin: 0.55rem 0; background: var(--line-on-light); }
.ticket__seal { display: grid; gap: 0.4rem; place-items: center; padding: 0.15rem 0 0.35rem; }
.ticket__seal-mark { font-size: 1.5rem; color: var(--ink-1); }
.ticket__seal-text {
  font-size: 0.5rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--ink-3);
}

/* scroll ring */
.hero__scroll {
  justify-self: end;
}
.hero__scroll-ring { position: relative; display: grid; place-items: center; width: 6rem; height: 6rem; color: var(--ink-1); }
.hero__scroll-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scroll-ring text {
  font-family: var(--font-sans);
  font-size: 9.2px;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  letter-spacing: 0.18em;
  fill: currentColor;
}
.hero__scroll > .hero__scroll-ring > svg:first-child { animation: spin 18s linear infinite; }
.hero__scroll-ico { width: 1.5rem !important; height: 1.5rem !important; }

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

/* ------------------------------------------------------------------ ticker */

.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--surface-dark);
  color: var(--paper-1);
}
.ticker__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: marquee 34s linear infinite; }
.ticker__item {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ticker__dot { display: block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent-on-dark); flex: none; }

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

/* --------------------------------------------------------------- statement */

.statement {
  position: relative;
  padding: 8rem var(--gutter) 7rem;
  background: var(--surface-dark);
  color: var(--paper-1);
  overflow: hidden;
}
.statement__glow {
  position: absolute;
  top: -30%; left: 50%;
  width: 70rem; height: 70rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 62%);
  pointer-events: none;
}
.statement__inner { position: relative; max-width: 62rem; margin: 0 auto; text-align: center; }

.statement__badge { display: grid; justify-items: center; gap: 0.7rem; margin-bottom: 3.5rem; }
.statement__badge-mark {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 50%;
  font-size: 1.25rem;
}
.statement__badge .label { color: var(--paper-3); }

.statement__text {
  font-family: var(--font-sans);
  font-size: var(--step-impact);
  font-variation-settings: "wght" 740, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0;
}
.statement__text em {
  font-family: var(--font-serif);
  font-style: normal;
  font-variation-settings: "wght" 820, "opsz" 13;
}
.statement__text .w { color: var(--paper-dim); transition: color 0.5s var(--ease); }
.statement__text .w.is-on { color: var(--paper-1); }
.statement__text em.w { color: var(--paper-dim); }
.statement__text em.w.is-on { color: var(--accent-soft); }

.statement__sub {
  max-width: 40rem;
  margin: 3rem auto 0;
  font-size: 1.0625rem;
  color: var(--paper-2);
}

/* ----------------------------------------------------------------- gallery */

.gallery { position: relative; background: var(--surface-2); height: 340vh; }
.gallery__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 5rem 0 3rem;
}

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--gutter) 2.5rem;
}
.gallery__head-copy { max-width: 26rem; color: var(--ink-2); }

.gallery__track {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding-left: var(--gutter);
  width: max-content;
  will-change: transform;
}

.shot { position: relative; flex: none; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.35rem;
  filter: saturate(0.9);
  transition: filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.shot:hover img { filter: saturate(1.05); transform: scale(1.015); }
.shot figcaption {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0.45rem;
  font-size: 0.5625rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-3);
}
.shot--tall { width: 20rem; }
.shot--tall img { height: 26rem; }
.shot--wide { width: 30rem; }
.shot--wide img { height: 20rem; }
.shot.low { margin-top: 5.5rem; }

.gallery__quote {
  flex: none;
  width: 22rem;
  align-self: center;
  padding: 0 1rem;
  text-align: center;
}
.gallery__quote p {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 620, "opsz" 12;
  font-size: 1.5rem;
  line-height: 1.28;
  text-transform: none;
}
.gallery__quote cite {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.5625rem;
  font-style: normal;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-3);
}

.gallery__meter {
  position: relative;
  margin: 2.5rem var(--gutter) 0;
  height: 1px;
  background: var(--line-on-light);
}
.gallery__meter i {
  display: block;
  height: 2px;
  margin-top: -0.5px;
  width: 20%;
  background: var(--ink-1);
  transition: width 0.15s linear;
}

/* ------------------------------------------------------------------- about */

.about { padding: 7rem var(--gutter); background: var(--surface-1); }
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: center;
  max-width: 78rem;
  margin: 0 auto;
}
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.5rem; }
.about__media figcaption {
  position: absolute;
  left: 0; bottom: 1rem;
  padding: 0.35rem 0.6rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 0.3rem;
  font-size: 0.5625rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.about__lead {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-variation-settings: "wght" 620, "opsz" 12;
  line-height: 1.16;
}
.about__copy { margin-top: 1.25rem; max-width: 38rem; color: var(--ink-2); }

.about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-light);
}
.about__stats dt {
  font-size: 0.5625rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-3);
}
.about__stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-variation-settings: "wght" 800, "wdth" var(--sans-wdth);
  text-transform: uppercase;
}

.signature {
  margin-top: 2.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: "wght" 560, "opsz" 14;
  font-size: 1.75rem;
  color: var(--accent-ink);
}

/* ------------------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  color: var(--paper-1);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.tile:hover img { transform: scale(1.05); filter: grayscale(0.15) contrast(1.05); }
.tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, var(--veil-light) 0%, var(--veil-heavy) 78%);
}
.tile__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  padding: 2.5rem var(--gutter) 2.75rem;
  text-align: center;
}
.tile__kicker {
  font-size: 0.625rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  letter-spacing: 0.16em;
  color: var(--accent-on-dark);
}
.tile__title { font-size: 4.5rem; line-height: 0.9; }
.tile__copy { max-width: 20rem; font-size: 0.9375rem; color: var(--paper-2); }
.tile__go {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  transition: transform 0.45s var(--ease);
}
.tile:hover .tile__go { transform: translateY(-3px) rotate(6deg); }

/* -------------------------------------------------------------- work grid */

.work { padding: 6rem 0 5rem; background: var(--surface-darkest); color: var(--paper-1); }
.work__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  padding: 0 var(--gutter) 3rem;
}
.work__head-copy { max-width: 30rem; color: var(--paper-3); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-dark);
}
.card { border-bottom: 1px solid var(--rule-dark); border-right: 1px solid var(--rule-dark); }
.card:nth-child(4n) { border-right: 0; }
.card a {
  position: relative;
  display: block;
  height: 100%;
  min-height: 17rem;
  padding: 0.9rem 1rem 1.1rem;
  transition: background-color 0.45s var(--ease);
}
.card a:hover { background: var(--surface-darkest-hover); }

.card__meta {
  position: absolute;
  top: 0.9rem;
  font-size: 0.5625rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--paper-3);
}
.card__meta--left { left: 1rem; }
.card__meta--right { right: 1rem; color: var(--accent-on-dark); }

.card__frame {
  display: grid;
  place-items: center;
  height: 12.5rem;
  margin: 2.25rem auto 0.75rem;
  overflow: hidden;
  border-radius: 0.35rem;
}
.card__frame img {
  width: 88%;
  height: 88%;
  object-fit: cover;
  border-radius: 0.35rem;
  transition: transform 0.7s var(--ease), width 0.7s var(--ease), height 0.7s var(--ease);
}
.card a:hover .card__frame img { width: 100%; height: 100%; }

.card__name {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-variation-settings: "wght" 780, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0;
}

.work__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 2.5rem var(--gutter) 0;
}
.work__note { color: var(--paper-3); }

/* --------------------------------------------------------------- featured */

.featured { padding: 7rem var(--gutter); background: var(--surface-2); }
.featured__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  max-width: 78rem;
  margin: 0 auto;
}
.featured__eyebrow { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.75rem; }
.featured__mark {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--ink-1);
  border-radius: 50%;
  font-size: 0.8125rem;
}
.featured__eyebrow .label { color: var(--ink-3); }

.featured__title { font-size: var(--step-title); line-height: 0.88; }
.featured__title .serif { display: block; }
.featured__title .sans { display: block; }
.featured__copy { max-width: 32rem; margin-top: 1.5rem; color: var(--ink-2); }
.featured__body .btn { margin-top: 2rem; }

.featured__media { position: relative; }
.featured__main img { width: 100%; height: 34rem; object-fit: cover; border-radius: 0.5rem; }
.featured__inset {
  position: absolute;
  left: -2.5rem; bottom: 3.5rem;
  width: 11rem;
  border: 6px solid var(--surface-2);
  border-radius: 0.5rem;
  overflow: hidden;
}
.featured__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured__chip {
  position: absolute;
  right: -1.5rem; top: 2.5rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 0.5rem;
  transform: rotate(3deg);
}
.featured__chip strong {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 800, "opsz" 14;
  font-size: 1.75rem;
  line-height: 1;
}

/* ------------------------------------------------------------------ tools */

.tools {
  position: relative;
  padding: 4rem 0 4.5rem;
  background: var(--surface-2);
  border-top: 1px solid var(--line-on-light);
  overflow: hidden;
}
.tools__scribble {
  position: absolute;
  left: -4%; top: 50%;
  width: 108%; height: 16rem;
  transform: translateY(-46%);
  color: var(--accent-decor);
  opacity: 0.55;
}
.tools__scribble path { stroke-width: 14; }
.tools__row {
  position: relative;
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.tools__item {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-variation-settings: "wght" 750, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-1);
}
.tools__note {
  position: relative;
  margin: 2.75rem var(--gutter) 0;
  text-align: center;
  font-size: 0.75rem;
  font-variation-settings: "wght" 650, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- socials */

.socials { padding: 6rem 0 7rem; background: var(--surface-2); text-align: center; }
.socials__head { display: grid; justify-items: center; gap: 1rem; padding: 0 var(--gutter); }
.socials__badge {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  color: var(--ink-3);
}
.socials__badge .ico { width: 1.1rem; height: 1.1rem; }
.socials__title { font-size: var(--step-title); line-height: 0.9; }
.socials__title .sans { display: block; }
.socials__title .serif { display: block; }
.socials__sub { max-width: 26rem; color: var(--ink-2); }

.socials__cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding: 0 var(--gutter);
}
.socials__cards li { flex: 0 1 15rem; }
.socials__cards a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem 0.75rem 0.35rem 0.35rem;
  transition: transform 0.5s var(--ease);
}
.socials__cards img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.socials__cards li:nth-child(1) a { transform: rotate(-4deg) translateY(1.5rem); }
.socials__cards li:nth-child(2) a { transform: rotate(-1.5deg) translateY(0.4rem); }
.socials__cards li:nth-child(3) a { transform: rotate(1.5deg) translateY(0.4rem); }
.socials__cards li:nth-child(4) a { transform: rotate(4deg) translateY(1.5rem); }
.socials__cards a:hover { transform: rotate(0deg) translateY(0) scale(1.03); }
.socials__cards span {
  position: absolute;
  left: 0.65rem; bottom: 0.65rem;
  padding: 0.3rem 0.55rem;
  background: var(--accent);
  border-radius: 0.3rem;
  font-size: 0.5625rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent-text);
}

/* ----------------------------------------------------------------- footer */

.footer { background: var(--surface-2); padding: 0 var(--gutter); }
.footer__panel {
  position: relative;
  padding: 5rem var(--gutter) 2rem;
  background: var(--surface-dark);
  color: var(--paper-1);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  overflow: hidden;
}
.footer__scribble {
  position: absolute;
  left: 50%; top: -0.5rem;
  width: 38rem; height: 9rem;
  transform: translateX(-50%);
  color: var(--accent-soft);
  opacity: 0.7;
}
.footer__scribble path { stroke-width: 12; }

.footer__statement {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  padding-top: 1.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 4.25rem;
  font-variation-settings: "wght" 760, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  line-height: 0.9;
}
.footer__statement em {
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: "wght" 780, "opsz" 13;
}
.footer__statement .w { color: var(--paper-dim); transition: color 0.5s var(--ease); }
.footer__statement .w.is-on { color: var(--paper-1); }
.footer__statement em.w { color: var(--paper-dim); }
.footer__statement em.w.is-on { color: var(--accent-soft); }

.footer__figure {
  position: relative;
  width: 9rem;
  margin: 2.5rem auto 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.footer__figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.footer__cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 2.5rem;
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-on-dark);
}
.footer__col .label { color: var(--paper-3); margin-bottom: 0.85rem; }
.footer__col li { padding: 0.2rem 0; }
.footer__col a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.footer__col a:hover { color: var(--accent-on-dark); }
.footer__col--end { justify-self: end; text-align: right; }
.footer__col--end .label { text-align: right; }

.footer__signup-copy { font-size: 0.9375rem; color: var(--paper-2); margin-bottom: 1rem; }
.footer__form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer__form input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.7rem 1rem;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 999px;
  color: var(--paper-1);
  font-size: 0.875rem;
}
.footer__form input::placeholder { color: var(--paper-3); }
.footer__form-msg { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--accent-on-dark); min-height: 1.2em; }

.footer__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 2.5rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wdth);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper-2);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.75rem;
  color: var(--paper-3);
}
.footer__mail { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--paper-1); }
.footer__mail:hover { color: var(--accent-on-dark); }
.footer__links { display: flex; gap: 1.25rem; }
.footer__links a:hover { color: var(--paper-1); }

/* ------------------------------------------------------------- animations */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-hero-line] { display: block; overflow: hidden; line-height: 1; }
[data-hero-line] .line__inner { display: block; line-height: 1; white-space: nowrap; }
[data-hero-line] .ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}
[data-hero-line] .ch > i {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease);
}
body.is-ready [data-hero-line] .ch > i { transform: translateY(0); }

/* ------------------------------------------------------------------ gsap
   When GSAP + ScrollTrigger + Lenis are present the JS owns these
   transforms outright. The CSS above stays as the no-JS / reduced-motion
   fallback, and these rules hand control over without double-animating.
   ------------------------------------------------------------------------ */

html.has-gsap { scroll-behavior: auto; }
html.has-gsap body { scroll-behavior: auto; }

/* hero letters: GSAP sets the transform, so kill the CSS transition */
html.has-gsap [data-hero-line] .ch > i { transform: none; transition: none; }

/* reveals: GSAP owns y + opacity */
html.has-gsap [data-reveal] { transform: none; transition: none; }

/* marquees become GSAP tweens so scroll velocity can modulate them */
html.has-gsap .ticker__track,
html.has-gsap .tools__row { animation: none; }

/* tiles are parallaxed + hover-scaled by GSAP, so drop the CSS hover scale */
html.has-gsap .tile:hover img { transform: none; }
/* extra bleed so the parallax shift never exposes an edge of the image */
html.has-gsap .tile img { top: -8%; height: 116%; }

/* the horizontal gallery is pinned by ScrollTrigger instead of using the
   sticky + 340vh scroll-travel trick */
@media (min-width: 821px) {
  html.has-gsap .gallery { height: 100svh; }
  html.has-gsap .gallery__sticky { position: static; height: 100%; }
}

/* ------------------------------------------------------------ iris curtain
   One solid circle, scaled on the compositor. The JS sets its diameter so it
   always clears the farthest corner from the chosen origin, plus left/top.
   ------------------------------------------------------------------------ */

.iris-curtain {
  position: fixed;
  inset: 0;
  /* above the nav (90) and the menu overlay (150) so a menu-link transition
     can close the menu behind the curtain; below the loader (200) */
  z-index: 160;
  display: none;
  overflow: hidden;           /* keeps raster work bounded to the viewport */
  pointer-events: none;
  contain: layout paint;
}
.iris-curtain > span {
  position: absolute;
  border-radius: 50%;
  /* mirrors motion-plus: the covering element reads its fill from --curtain */
  background: var(--curtain, var(--surface-dark));
  transform: scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1200px) {
  :root {
    --step-impact: 5.75rem;
    --step-title: 3.5rem;
  }
  .hero__title { font-size: 7rem; }
  .hero__foot { grid-template-columns: 11.5rem minmax(0, 1fr) auto; gap: 1.5rem; }
  .footer__statement { font-size: 3.5rem; }
  .tile__title { font-size: 3.5rem; }
}

/* shorter laptop screens: keep the hero and its footer row on one screen */
@media (min-width: 1201px) and (max-height: 840px) {
  .hero__title { font-size: 8.25rem; }
  .hero { padding-top: 6.5rem; }
}

@media (max-width: 1024px) {
  :root {
    --step-impact: 4.5rem;
    --step-title: 3rem;
  }
  .hero__title { font-size: 5.5rem; }
  .about__inner,
  .featured__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__media { max-width: 26rem; }
  .featured__media { max-width: 30rem; }
  .featured__main img { height: 28rem; }
  .featured__inset { left: -1rem; }
  .featured__chip { right: 0; }
  .work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card:nth-child(4n) { border-right: 1px solid var(--rule-dark); }
  .card:nth-child(3n) { border-right: 0; }
  .socials__cards { flex-wrap: wrap; }
  .socials__cards li { flex: 0 1 12rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col--end { justify-self: start; text-align: left; }
  .footer__col--end .label { text-align: left; }
}

@media (max-width: 820px) {
  .gallery { height: auto; }
  .gallery__sticky { position: static; height: auto; padding: 5rem 0 4rem; }
  .gallery__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .gallery__track {
    flex-direction: column;
    width: auto;
    padding: 0 var(--gutter);
    gap: 2.5rem;
    transform: none !important;
  }
  .shot--tall,
  .shot--wide { width: 100%; }
  .shot--tall img { height: 22rem; }
  .shot--wide img { height: 15rem; }
  .shot.low { margin-top: 0; }
  .gallery__quote { width: 100%; padding: 0; }
  .gallery__meter { display: none; }

  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 3; }

  .work__head { grid-template-columns: 1fr; gap: 1.25rem; }
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(3n) { border-right: 1px solid var(--rule-dark); }
  .card:nth-child(2n) { border-right: 0; }

  .hero { padding-top: 7rem; }
  .hero__title { font-size: 4.25rem; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; justify-items: start; margin-top: 2.25rem; }
  .hero__sub { justify-self: start; text-align: left; max-width: 28rem; }
  .ticket { width: min(100%, 16rem); }
  .hero__scroll { display: none; }

  .statement { padding: 5.5rem var(--gutter) 5rem; }
  .statement__badge { margin-bottom: 2.5rem; }
  .statement__sub { margin-top: 2rem; }

  .footer__statement { font-size: 2.75rem; }
  .footer__panel { padding: 3.5rem var(--gutter) 1.75rem; border-radius: var(--radius-m) var(--radius-m) 0 0; }
  .footer__cols { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
  .footer__scribble { width: 30rem; }
  .featured__main img { height: 24rem; }
}

@media (max-width: 560px) {
  :root {
    --step-impact: 2.75rem;
    --step-title: 2.25rem;
    --step-body: 1rem;
    --gutter: 1rem;
    --pad: 1rem;
  }
  .nav { grid-template-columns: 1fr auto; }
  .nav__mark { display: none; }
  .nav__brand { font-size: 1.125rem; }
  .nav__cta span { display: none; }

  .hero { padding: 6.5rem var(--gutter) 2rem; }
  .hero__title { font-size: 3.25rem; }
  .hero__sub { max-width: none; }

  .menu__links a { font-size: 2rem; }
  .menu__foot { grid-template-columns: 1fr; }

  .statement__text { font-size: var(--step-impact); }
  .about__lead { font-size: 1.625rem; }
  .about__stats { gap: 1.5rem; }
  .tile { aspect-ratio: 3 / 4; }
  .tile__title { font-size: 3rem; }

  .work__grid { grid-template-columns: 1fr; }
  .card { border-right: 0 !important; }

  .socials__cards { gap: 0.85rem; }
  .socials__cards li { flex: 0 1 46%; }
  .socials__cards li:nth-child(n) a { transform: none; }

  .footer__statement { font-size: 2rem; }
  .footer__logos { gap: 1rem 1.5rem; font-size: 0.875rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }

  .featured__inset { width: 7.5rem; left: -0.5rem; bottom: 1.5rem; }
  .featured__chip { right: 0; top: 0.75rem; }
}

@media (max-width: 380px) {
  .hero__title { font-size: 2.75rem; }
  .footer__statement { font-size: 1.75rem; }
  .tile__title { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .gallery { height: auto; }
  /* no pinning and no scroll-scrub here, so the rail becomes a native
     horizontal scroller instead of being clipped by overflow: hidden */
  .gallery__sticky { position: static; height: auto; overflow-x: auto; overflow-y: hidden; }
  .gallery__track { padding-bottom: 1.5rem; }
  /* the iris wipe is scroll-driven, so it is disabled entirely here */
  .iris-curtain { display: none !important; }
}

/* ==========================================================================
   Menu settings - language + theme, both live inside the menu overlay
   ========================================================================== */

/* an author display rule would otherwise beat the UA [hidden] rule */
.theme-switch[hidden] { display: none; }

.menu__settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-on-dark);
}
.menu__setting { display: grid; gap: 0.7rem; justify-items: start; }
.menu__setting .label { color: var(--paper-3); }

.seg {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 999px;
}
.seg__btn {
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  color: var(--paper-2);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-variation-settings: "wght" 700, "wdth" var(--sans-wide);
  letter-spacing: 0.06em;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.seg__btn:hover { color: var(--paper-1); }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

/* ==========================================================================
   Chinese typography
   Archivo and Bodoni Moda carry no Han glyphs, so Chinese needs its own font
   stacks. Han characters also read larger and denser than Latin at the same
   size, and the tracking that helps Latin capitals looks wrong on them.
   ========================================================================== */
html[lang^="zh"] {
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC",
    "Source Han Serif SC", serif;
  --step-impact: 4.75rem;
  --step-title: 3.25rem;
  --sans-wdth: 100;
  --sans-wght: 700;
}

html[lang^="zh"] .label,
html[lang^="zh"] .hero__eyebrow,
html[lang^="zh"] .ticket__label,
html[lang^="zh"] .ticket__seal-text,
html[lang^="zh"] .shot figcaption,
html[lang^="zh"] .card__meta,
html[lang^="zh"] .ticker__item,
html[lang^="zh"] .tools__note,
html[lang^="zh"] .footer__legal,
html[lang^="zh"] .menu__links em { letter-spacing: 0.02em; }

html[lang^="zh"] .statement__text { line-height: 1.14; }
html[lang^="zh"] .footer__statement { font-size: 3.25rem; line-height: 1.12; }
html[lang^="zh"] .section-title { line-height: 1.06; }
html[lang^="zh"] .about__lead { font-size: 1.875rem; line-height: 1.5; }
html[lang^="zh"] .gallery__quote p { font-size: 1.375rem; line-height: 1.55; }
html[lang^="zh"] .tile__title { font-size: 3.75rem; }
html[lang^="zh"] .hero__sub,
html[lang^="zh"] .statement__sub,
html[lang^="zh"] .gallery__head-copy,
html[lang^="zh"] .about__copy,
html[lang^="zh"] .work__head-copy,
html[lang^="zh"] .featured__copy,
html[lang^="zh"] .socials__sub,
html[lang^="zh"] .footer__signup-copy { line-height: 1.8; }

@media (max-width: 1024px) {
  html[lang^="zh"] { --step-impact: 3.5rem; --step-title: 2.5rem; }
  html[lang^="zh"] .tile__title { font-size: 3rem; }
}

@media (max-width: 820px) {
  .menu__settings { grid-template-columns: 1fr; gap: 1.25rem; }
  html[lang^="zh"] .footer__statement { font-size: 2.25rem; }
}

@media (max-width: 560px) {
  html[lang^="zh"] { --step-impact: 2.25rem; --step-title: 1.875rem; }
  html[lang^="zh"] .about__lead { font-size: 1.5rem; }
  html[lang^="zh"] .footer__statement { font-size: 1.75rem; }
  html[lang^="zh"] .tile__title { font-size: 2.25rem; }
}

/* ==========================================================================
   Mobile tap behaviour

   What shows up as a stray blue "selected" state on phones is three separate
   browser defaults stacking on top of the design:

     1. the OS tap overlay   - WebKit/Blink paint a translucent highlight over
                               whatever you tap (-webkit-tap-highlight-color)
     2. text selection       - a tap that drifts a pixel selects the label
                               inside the control, painted in the system blue
     3. iOS button chrome    - <button> keeps -webkit-appearance: button, which
                               paints its own background behind the tap overlay

   Fix all three, then give intentional text selection the brand accent so it
   never falls back to blue.
   ========================================================================== */

html {
  -webkit-tap-highlight-color: transparent;
}

/* Controls are not text: nothing to select, no long-press callout, and no
   double-tap zoom delay. Body copy stays selectable on purpose. */
button,
a,
summary,
label,
.btn,
.nav__menu-btn,
.menu__close,
.menu__links a,
.theme-switch,
.seg__btn,
.shot,
.tile,
.card a {
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* keep the display type from being selected by a stray drag over a heading */
.hero__title,
.statement__text,
.footer__statement,
.section-title,
.ticker,
.tools__row,
.footer__logos {
  -webkit-user-select: none;
  user-select: none;
}

/* when text is selected on purpose, use the theme accent instead of blue */
::selection {
  background: var(--accent);
  color: var(--accent-text);
}
::-moz-selection {
  background: var(--accent);
  color: var(--accent-text);
}