/* ==========================================================================
   BUAS — night walk portfolio
   ========================================================================== */

:root {
  --ink: #0a0b09;
  --ink-2: #11130f;
  --ink-3: #1a1d17;
  --bone: #ebe5d5;
  --bone-2: rgba(235, 229, 213, 0.62);
  --bone-3: rgba(235, 229, 213, 0.32);
  --line: rgba(235, 229, 213, 0.14);
  --torch: #f5cb12; /* BUAS sun yellow */
  --torch-soft: rgba(245, 203, 18, 0.18);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 2.4vw, 40px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--torch); color: var(--ink); }
:focus-visible { outline: 1px solid var(--torch); outline-offset: 4px; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; }
.serif { font-family: var(--serif); }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; }
.kicker { color: var(--bone-2); }
em { font-style: italic; }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 90; opacity: 0.075;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--torch); }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--bone-3);
  display: grid; place-items: center;
  transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), background-color .4s, border-color .4s, opacity .3s;
}
.cursor__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ease);
  white-space: nowrap;
}
.cursor.is-label .cursor__ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--bone); border-color: var(--bone); }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--torch); }
.cursor.is-torch .cursor__ring { opacity: 0; }
.cursor.is-hidden { opacity: 0; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 150; background: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: var(--gutter); gap: 18px; clip-path: inset(0% 0% 0% 0%);
}
.loader__top, .loader__bottom { display: flex; justify-content: space-between; color: var(--bone-2); }
.loader__count { align-self: end; overflow: hidden; }
.loader__num {
  display: block; font-family: var(--display); font-weight: 200; line-height: .8;
  font-size: clamp(120px, 32vw, 520px); letter-spacing: -.02em; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.loader__bar { height: 1px; background: var(--line); }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--torch); transform-origin: left; transform: scaleX(0); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color: #fff;
}
.nav__spacer { min-height: 1px; }

/* ---------- brand badge ---------- */
.brand {
  position: fixed; z-index: 81; top: 10px; left: var(--gutter);
  display: block; width: 54px; transform-origin: 50% 0;
  transition: width .7s var(--ease);
}
.brand img {
  width: 100%; height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.brand:hover img { transform: rotate(-9deg) scale(1.08); }
.brand.is-small { width: 42px; }

.nav__meta { display: flex; gap: 14px; align-items: center; }
.nav__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .15; } }
.nav__links { justify-self: end; display: flex; gap: 6px; }
.nav__links a { padding: 8px 10px; position: relative; display: inline-block; }
.nav__links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.nav__progress span { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.hero__stage { position: absolute; inset: 0; }
.hero__img {
  position: absolute; inset: -3%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero__img--dark { filter: brightness(.16) saturate(.25) contrast(1.1); }
.hero__img--lit {
  --x: 50%; --y: 50%; --r: 240px;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.35) 68%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.35) 68%, transparent 100%);
  filter: saturate(1.08) contrast(1.04);
}
.hero__beam {
  --x: 50%; --y: 50%; --r: 240px;
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle calc(var(--r) * 1.25) at var(--x) var(--y), rgba(255, 196, 110, .55), transparent 70%);
}
.hero::after { /* vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.7));
}
.hero__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; mix-blend-mode: overlay; }

.hero__title {
  position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 3;
  display: flex; justify-content: space-between; padding: 0 calc(var(--gutter) * .6);
  font-family: var(--display); text-transform: uppercase;
  font-size: min(42vw, 78vh); line-height: .72; letter-spacing: -.02em;
  pointer-events: none; user-select: none;
}
.hero__letter {
  display: inline-block; font-weight: 100;
  color: transparent; -webkit-text-stroke: 1px rgba(235, 229, 213, .5);
  transition: color .5s;
  will-change: transform;
}
.hero__def {
  position: absolute; z-index: 4; top: 22vh; right: var(--gutter); max-width: 280px; text-align: right;
}
.hero__def .mono { color: var(--torch); margin-bottom: 6px; }
.hero__def .mono em { font-style: normal; color: var(--bone-2); }
.hero__def .serif { font-size: clamp(20px, 2vw, 28px); line-height: 1.15; font-weight: 300; }
.hero__foot {
  position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 22px;
  display: flex; justify-content: space-between; gap: 16px; color: var(--bone-2);
}
.hero__hint { display: flex; align-items: center; gap: 10px; }
.hero__hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--torch); box-shadow: 0 0 0 0 var(--torch); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,203,18,.6); } 100% { box-shadow: 0 0 0 14px rgba(245,203,18,0); } }
.hero__plate b { color: var(--bone); font-weight: 500; }

/* ---------- manifesto ---------- */
.manifesto { padding: 22vh var(--gutter) 18vh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gutter); }
.manifesto .kicker { grid-column: 1 / 4; padding-top: 1.1em; }
.manifesto__text {
  grid-column: 4 / 13; font-size: clamp(28px, 4.1vw, 68px); line-height: 1.06; font-weight: 300; letter-spacing: -.015em;
  text-indent: 2.4em;
}
.manifesto__text .w { display: inline-block; opacity: .12; text-indent: 0; }
.manifesto__stats { grid-column: 4 / 13; margin-top: 10vh; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.manifesto__stats div { padding: 18px 0; display: flex; flex-direction: column; gap: 10px; color: var(--bone-2); }
.manifesto__stats b { font-family: var(--display); font-size: clamp(64px, 9vw, 140px); font-weight: 300; line-height: .8; color: var(--bone); }

/* ---------- field (infinite canvas) ---------- */
.field { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--ink-2); border-top: 1px solid var(--line); }
.field__head {
  position: absolute; z-index: 5; inset: 0; pointer-events: none;
  display: grid; place-items: center; text-align: center; align-content: center; gap: 16px;
}
.field__head .kicker { position: absolute; top: 80px; left: var(--gutter); }
.field__title {
  font-size: clamp(72px, 14vw, 240px); font-weight: 900;
  mix-blend-mode: difference; color: #fff;
}
.field__title span { display: inline-block; }
.field__hint { color: var(--bone-2); position: absolute; bottom: 26px; left: 0; right: 0; }
.field__viewport { position: absolute; inset: 0; touch-action: none; overflow: hidden; outline: none; }
.field__viewport.is-dragging .field__tile img { transition-duration: 0s; }
.field__plane { position: absolute; inset: 0; }
.field__tile {
  position: absolute; top: 0; left: 0; will-change: transform;
  display: block; padding: 0; background: var(--ink-3);
}
.field__tile-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.field__tile img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1s var(--ease), filter .6s;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.field__tile .field__cap {
  position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap;
  display: flex; gap: 10px; color: var(--bone-3);
  transition: color .4s;
}
.field__plane.has-hover .field__tile img { filter: brightness(.35) saturate(.3); }
.field__plane.has-hover .field__tile.is-hover img { filter: none; transform: scale(1.08); }
.field__plane.has-hover .field__tile.is-hover .field__cap { color: var(--bone); }
.field__legend {
  position: absolute; z-index: 6; right: var(--gutter); top: 80px; text-align: right; color: var(--bone-2);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
  padding: 10px 12px; background: rgba(10, 11, 9, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
.field__legend b { color: var(--torch); font-weight: 500; }

/* ---------- walkers ---------- */
.walkers { border-top: 1px solid var(--line); }
.walkers__intro { padding: 18vh var(--gutter) 12vh; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.walkers__intro .kicker { grid-column: 1 / 4; }
.walkers__intro h2 { grid-column: 4 / 13; font-size: clamp(64px, 10.5vw, 190px); }
.walkers__intro h2 em { font-family: var(--serif); text-transform: none; font-weight: 300; letter-spacing: -.03em; color: var(--torch); }

.walker { position: relative; border-top: 1px solid var(--line); background: var(--tone, var(--ink)); }
.walker__pin { height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; position: relative; }
.walker__track { display: flex; align-items: center; height: 100%; gap: 6vw; padding: 0 var(--gutter); will-change: transform; }
.walker__bignum {
  position: absolute; right: -2vw; bottom: -6vh; font-family: var(--display); font-weight: 900;
  font-size: 46vh; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none;
}
.walker__head { position: relative; flex: 0 0 auto; width: min(78vw, 1040px); height: 78%; display: grid; grid-template-columns: 1fr minmax(180px, 30%); grid-template-rows: auto 1fr auto; gap: 18px 3vw; }
.walker__no { grid-column: 1 / 3; display: flex; justify-content: space-between; color: var(--bone-2); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.walker__no b { color: var(--torch); font-weight: 500; }
.walker__name { grid-column: 1; align-self: center; font-size: clamp(76px, 12.5vw, 220px); }
.walker__name span { display: block; overflow: hidden; }
.walker__name span > i { display: block; font-style: normal; }
.walker__name span:nth-child(2) { -webkit-text-stroke: 1.5px var(--bone); color: transparent; padding-left: .5em; }
.walker__portrait { grid-column: 2; grid-row: 2; align-self: center; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.walker__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .8s, transform 1.2s var(--ease); transform: scale(1.06); }
.walker__portrait:hover img { filter: none; transform: scale(1); }
.walker__portrait figcaption { position: absolute; left: 10px; bottom: 10px; color: var(--bone); }
.walker__statement { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr minmax(180px, 30%); gap: 3vw; align-items: end; }
.walker__statement p.serif { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.22; font-weight: 300; max-width: 30ch; }
.walker__statement .mono { color: var(--bone-2); display: flex; flex-direction: column; gap: 4px; }

.plate { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; width: calc(var(--h) * var(--ar)); }
.plate__btn { position: relative; display: block; overflow: hidden; width: 100%; height: var(--h); background: rgba(0,0,0,.3); }
.plate__btn img { position: absolute; top: 0; left: -8%; width: 116%; max-width: none; height: 100%; object-fit: cover; will-change: transform; transition: filter .6s; }
.plate__btn::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .4s, inset .6s var(--ease); pointer-events: none; }
.plate__btn:hover::after { inset: 10px; border-color: rgba(235,229,213,.5); }
.plate__meta { display: grid; gap: 6px; width: 100%; }
.plate__meta .mono { color: var(--bone-2); }
.plate__meta .mono b { color: var(--torch); font-weight: 500; }
.plate__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: .01em; }
.plate__cap { font-size: 15px; line-height: 1.35; color: var(--bone-2); max-width: 44ch; }
.plate:nth-child(odd of .plate) { align-self: flex-start; margin-top: 9vh; }
.plate:nth-child(even of .plate) { align-self: flex-end; margin-bottom: 7vh; }

.walker__next { flex: 0 0 auto; width: 34vw; min-width: 280px; height: 70%; display: flex; flex-direction: column; justify-content: center; gap: 18px; border-left: 1px solid var(--line); padding-left: 4vw; margin-right: 4vw; }
.walker__next .mono { color: var(--bone-2); }
.walker__next a { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 6vw, 110px); text-transform: uppercase; line-height: .86; display: inline-block; }
.walker__next a span { color: var(--torch); display: inline-block; transition: transform .6s var(--ease); }
.walker__next a:hover span { transform: translateX(14px); }

/* ---------- index ---------- */
.index { position: relative; padding: 16vh var(--gutter) 18vh; border-top: 1px solid var(--line); }
.index__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 6vh; }
.index__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.index__filters button {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 100px; color: var(--bone-2);
  transition: background-color .3s, color .3s, border-color .3s;
}
.index__filters button sup { font-size: 9px; margin-left: 4px; color: var(--torch); }
.index__filters button:hover { border-color: var(--bone-3); color: var(--bone); }
.index__filters button.is-active { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.index__filters button.is-active sup { color: var(--ink); }
.index__list { list-style: none; border-top: 1px solid var(--line); }
.index__row { border-bottom: 1px solid var(--line); overflow: hidden; }
.index__row.is-out { display: none; }
.index__link {
  display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .8fr) 60px;
  align-items: center; gap: 20px; width: 100%; text-align: left; padding: 18px 0; position: relative;
}
.index__link::before {
  content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease); z-index: -1;
}
.index__row { position: relative; z-index: 0; }
.index__link > * { transition: transform .55s var(--ease), color .3s; }
.index__no { color: var(--bone-3); }
.index__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 58px); line-height: .9; }
.index__cap { font-size: 15px; color: var(--bone-2); line-height: 1.3; }
.index__who { color: var(--bone-2); }
.index__ar { color: var(--bone-3); text-align: right; }
.index__list.has-hover .index__link { opacity: .28; transition: opacity .4s; }
.index__list.has-hover .index__row.is-hover .index__link { opacity: 1; }
@media (hover: hover) {
  .index__row.is-hover .index__link::before { transform: scaleY(1); transform-origin: top; }
  .index__row.is-hover .index__link > * { color: var(--ink); }
  .index__row.is-hover .index__no { transform: translateX(14px); }
  .index__row.is-hover .index__title { transform: translateX(14px); }
  .index__row.is-hover .index__ar { transform: translateX(-14px); }
}
.index__float {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  width: 300px; margin: -150px 0 0 -150px; opacity: 0;
}
.index__float-inner { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; transition: aspect-ratio .5s var(--ease); }
.index__float-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer ---------- */
.foot { position: relative; border-top: 1px solid var(--line); padding: 14vh var(--gutter) 22px; overflow: hidden; background: var(--ink); }
.foot__top { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.foot__line { font-size: clamp(32px, 4.6vw, 78px); line-height: 1; font-weight: 300; letter-spacing: -.02em; max-width: 14ch; }
.foot__line em { color: var(--torch); }
.foot__up { padding: 12px 18px; border: 1px solid var(--line); border-radius: 100px; display: inline-block; transition: background-color .3s, color .3s; }
.foot__up:hover { background: var(--bone); color: var(--ink); }
.foot__word { position: relative;
  display: flex; justify-content: space-between; margin: 8vh calc(var(--gutter) * -.4) 2vh;
  font-family: var(--display); text-transform: uppercase; font-size: 41vw; line-height: .74; letter-spacing: -.02em;
  user-select: none;
}
.foot__sticker {
  position: absolute; z-index: 2; right: 7%; top: -14%;
  width: clamp(110px, 14vw, 230px); rotate: 9deg;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
  touch-action: none; user-select: none; -webkit-user-drag: none;
  transition: scale .5s cubic-bezier(.34, 1.56, .64, 1);
}
.foot__sticker:hover { scale: 1.05; }
.foot__sticker.is-held { scale: 1.12; }
.foot__word span { display: inline-block; font-weight: 900; font-variation-settings: "wght" 900; }
.foot__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--bone-2); border-top: 1px solid var(--line); padding-top: 18px; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.lb.is-open { visibility: visible; }
.lb__bg { position: absolute; inset: 0; background: var(--ink); opacity: 0; }
.lb__stage { position: absolute; inset: 0; touch-action: pan-y; }
.lb__frame { position: absolute; overflow: hidden; transform-origin: 0 0; background: #000; will-change: transform; }
.lb__img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.lb__ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lb__ui > * { pointer-events: auto; }
.lb__top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); color: var(--bone-2); }
.lb__count { color: var(--bone); }
.lb__close { padding: 8px 12px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; transition: background-color .3s, color .3s; }
.lb__close:hover { background: var(--bone); color: var(--ink); }
.lb__cap { position: absolute; left: var(--gutter); bottom: 96px; max-width: min(420px, 80vw); pointer-events: none; }
.lb__title { font-size: clamp(40px, 5vw, 84px); margin-bottom: 10px; }
.lb__text { font-size: 17px; line-height: 1.35; color: var(--bone-2); font-weight: 300; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); padding: 14px 12px; color: var(--bone-2); transition: color .3s; }
.lb__nav:hover { color: var(--torch); }
.lb__nav--prev { left: calc(var(--gutter) * .5); }
.lb__nav--next { right: calc(var(--gutter) * .5); }
.lb__strip { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 4px; padding: 0 var(--gutter); }
.lb__strip button { width: 34px; height: 46px; overflow: hidden; opacity: .3; transition: opacity .3s, transform .5s var(--ease); flex: 0 1 34px; min-width: 6px; }
.lb__strip button img { width: 100%; height: 100%; object-fit: cover; }
.lb__strip button:hover { opacity: .7; }
.lb__strip button.is-active { opacity: 1; transform: translateY(-8px); }

/* ---------- split-text helpers ---------- */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr; }
  .brand { width: 44px; top: 8px; }
  .brand.is-small { width: 38px; }
  .nav__meta { display: none; }
  .nav__links a { padding: 8px 6px; }
  .hero__def { top: 15vh; right: var(--gutter); max-width: 220px; }
  .hero__title { bottom: 11vh; font-size: min(66vw, 60vh); }
  .hero__foot { flex-wrap: wrap; }
  .hero__foot > span:first-child { display: none; }
  .manifesto, .walkers__intro { display: block; }
  .manifesto .kicker, .walkers__intro .kicker { margin-bottom: 28px; }
  .manifesto__text { text-indent: 0; }
  .manifesto__stats { grid-template-columns: repeat(3, 1fr); }

  .walker__pin { height: auto; display: block; padding: 10vh 0 8vh; }
  .walker__track {
    height: auto; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    gap: 18px; padding-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .walker__track::-webkit-scrollbar { display: none; }
  .walker__head { width: 86vw; height: auto; grid-template-columns: 1fr 38%; scroll-snap-align: start; }
  .walker__name { font-size: 19vw; }
  .walker__statement { grid-template-columns: 1fr; }
  .walker__bignum { font-size: 40vw; bottom: auto; top: 0; }
  .plate { scroll-snap-align: center; margin: 0 !important; align-self: flex-start !important; }
  .plate { width: 78vw; }
  .plate__btn { height: auto; aspect-ratio: var(--ar); }
  .plate--tall { width: calc(56vh * var(--ar)); }
  .walker__next { width: 70vw; height: auto; min-height: 50vh; scroll-snap-align: start; }

  .index__link { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .index__cap, .index__ar { display: none; }
  .lb__cap { bottom: 86px; }
  .lb__nav { top: auto; bottom: 120px; transform: none; }
  .lb__nav--prev { left: auto; right: 90px; }
  .lb__strip button { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}