/* ═══════════════════════════════════════════════════════════════════
   SEKHEM — brand site
   Palette is lifted from the logo: cream on charcoal, nothing else.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #111110;
  --ink-2:      #1a1918;
  --ink-3:      #232120;
  --sand:       #e2cba6;
  --paper:      #f4ede2;
  --oxide:      #8a6a43;

  --sand-70:    rgba(226, 203, 166, .70);
  --sand-60:    rgba(226, 203, 166, .60);   /* faintest text that still passes WCAG AA (4.9:1) */
  --sand-20:    rgba(226, 203, 166, .20);
  --sand-10:    rgba(226, 203, 166, .10);
  --hair:       rgba(226, 203, 166, .14);

  --display:    'Instrument Serif', 'Times New Roman', serif;
  --ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gut:        clamp(1.25rem, 4vw, 4.5rem);
  --ease:       cubic-bezier(.22, 1, .36, 1);

  /* live scroll velocity, written by js/effects.js, clamped to ±1 */
  --vel: 0;

  /* Pulls every photograph toward the cream/charcoal duotone so a set
     of stock images reads as one shoot. Drop this when real campaign
     photography replaces the placeholders. */
  --tint: saturate(.5) sepia(.2) contrast(1.06) brightness(.94);
}

.hero__media img,
.shot__frame img,
.card__frame img,
.craft__sticky img,
.qv__media img { filter: var(--tint); }

/* ── reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--ink);
  color: var(--sand);
  font-family: var(--ui);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

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

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

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── the logo ───────────────────────────────────────────────────────
   The marks are transparent PNGs baked from the original JPEG card art
   by tools/lift-marks.rb — no blend-mode trickery needed at runtime.  */
.mark {
  user-select: none;
  -webkit-user-drag: none;
}

/* ── shared type ────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: .75em;
  font-size: clamp(.6rem, .72vw, .7rem);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sand-60);
}
.eyebrow i { flex: 0 0 clamp(20px, 4vw, 56px); height: 1px; background: var(--sand-20); }

.sec-head { padding: clamp(6rem, 14vh, 11rem) var(--gut) clamp(3rem, 6vh, 5rem); max-width: 1600px; margin-inline: auto; }
.sec-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: .3em 0 .35em;
}
.sec-lede { max-width: 42ch; color: var(--sand-70); font-size: clamp(.95rem, 1.2vw, 1.1rem); }

/* split-text units */
.line { display: block; overflow: hidden; }
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; will-change: transform; }

/* velocity-driven RGB fringe on big display type */
.rgb-split {
  text-shadow:
    calc(var(--vel) * -3px) 0 rgba(226, 203, 166, .38),
    calc(var(--vel) *  3px) 0 rgba(138, 106,  67, .45);
}

/* ═══ PRELOADER ═══════════════════════════════════════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: var(--ink);
}
.loader__mark { width: min(62vw, 620px); }
.loader__mark img {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.loader__bar {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(3rem, 8vh, 5rem);
  height: 1px; background: var(--sand-10);
}
.loader__bar span {
  display: block; height: 100%; width: 0%;
  background: var(--sand);
}
.loader__count {
  position: absolute; right: var(--gut); bottom: calc(clamp(3rem, 8vh, 5rem) + 1.1rem);
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1; color: var(--sand-70);
}
.loader__count i { font-size: .45em; font-style: normal; letter-spacing: .1em; }
.loader__curtain {
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(100%);
}
body.is-loading { overflow: hidden; }

/* ═══ GRAIN + CURSOR ══════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; z-index: 8000;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
}

.cursor {
  position: fixed; top: 0; left: 0; z-index: 8500;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  display: grid; place-items: center;
  opacity: 0;
  will-change: transform;
}
.cursor__ring {
  position: absolute; inset: 0;
  border: 1px solid var(--sand-70);
  border-radius: 50%;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.cursor__label {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); opacity: 0;
  transition: opacity .25s var(--ease);
}
.cursor.is-link .cursor__ring { transform: scale(.45); background: var(--sand); border-color: var(--sand); }
.cursor.is-view .cursor__ring { transform: scale(2.55); background: var(--sand); border-color: var(--sand); }
.cursor.is-view .cursor__label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ═══ NAV ═════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2.4vh, 1.75rem) var(--gut);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
}
.nav.is-stuck {
  background: rgba(17, 17, 16, .72);
  backdrop-filter: blur(14px);
  padding-block: clamp(.6rem, 1.6vh, 1rem);
  border-bottom: 1px solid var(--hair);
}
.nav__brand { width: clamp(96px, 9vw, 140px); flex: none; }
.nav__brand img { transform: translateZ(0); }

.nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav__links a {
  position: relative;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand-70);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--sand);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  flex: none;
  padding: .6em 1.4em;
  border: 1px solid var(--sand-20);
  border-radius: 100px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.nav__cta:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }

@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* ═══ 1. HERO ═════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
/* the skew wrapper is a plain block elsewhere, but here it has to carry
   a definite height or the img's height:100% resolves to auto */
.hero__media .frame__skew { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(17,17,16,.34) 0%, rgba(17,17,16,.86) 62%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(17,17,16,.7), rgba(17,17,16,.25) 40%, var(--ink) 97%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding: 8rem var(--gut) 2rem;
  text-align: center;
}
.hero__eyebrow { justify-content: center; }
.hero__mark { width: min(78vw, 860px); }
.hero__mark img { clip-path: inset(0 100% 0 0); will-change: clip-path; }
.hero__tag {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.1vw, 1.75rem);
  font-style: italic;
  color: var(--sand-70);
}

.hero__foot {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--gut) clamp(1.75rem, 5vh, 3rem);
}
.hero__cue {
  display: flex; align-items: center; gap: .8em;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sand-60);
}
.hero__cue i {
  width: 1px; height: 46px; background: linear-gradient(var(--sand), transparent);
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%        { transform: scaleY(0); opacity: 0; }
  35%       { transform: scaleY(1); opacity: 1; }
  70%, 100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}
.hero__note { font-size: .72rem; letter-spacing: .1em; color: var(--sand-60); text-align: right; max-width: 24ch; }
.hero__note em { font-style: italic; color: var(--sand); }

@media (max-width: 700px) {
  .hero__note { display: none; }
}

/* ═══ 2. MANIFESTO (pinned) ═══════════════════════════════════════ */
.manifesto { position: relative; background: var(--ink); }
.manifesto__pin {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(4rem, 10vh, 8rem) var(--gut);
  max-width: 1500px; margin-inline: auto;
  overflow: hidden;
}
.manifesto__seal {
  position: absolute; top: 50%; left: 50%;
  width: min(120vw, 1250px);
  transform: translate(-50%, -50%);
  opacity: .16;
  pointer-events: none;
  will-change: transform;
}
.manifesto__eyebrow { position: relative; }
.manifesto__text {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--paper);
  max-width: 20ch;
}
.manifesto__text .w { display: inline-block; opacity: .12; will-change: opacity, filter; }
.manifesto__sub {
  position: relative;
  max-width: 44ch;
  color: var(--sand-70);
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
}
.manifesto__sub span { display: block; }

/* ═══ 3. LOOKBOOK (pinned horizontal) ═════════════════════════════ */
.lookbook { position: relative; background: var(--ink); }
.lookbook__pin {
  position: relative;
  height: 100svh;
  display: grid;
  /* minmax(0,1fr) stops the over-wide track from stretching the column
     and dragging the header and counter off-screen with it */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(5rem, 12vh, 7rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  overflow: hidden;
}
.lookbook__head {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-inline: var(--gut);
}
.lookbook__count { font-family: var(--display); font-size: clamp(1rem, 1.8vw, 1.5rem); color: var(--sand-60); }
.lookbook__count b { color: var(--paper); font-weight: 400; }
.lookbook__count i { margin-inline: .35em; font-style: normal; }

.lookbook__track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: max-content;          /* free to overflow the clipped pin */
  padding-inline: var(--gut);
  will-change: transform;
}
.shot { flex: 0 0 auto; width: clamp(240px, 27vw, 420px); }
.shot__frame {
  overflow: hidden;
  background: var(--ink-2);
  clip-path: inset(0 0 100% 0);
}
.shot__frame img {
  width: 100%;
  aspect-ratio: 11 / 14.5;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
}
.shot figcaption {
  display: flex; flex-direction: column; gap: .2rem;
  padding-top: 1rem;
}
.shot figcaption b { font-family: var(--display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.35rem); color: var(--paper); }
.shot figcaption span { font-size: .72rem; letter-spacing: .1em; color: var(--sand-60); }

.lookbook__hint {
  padding-inline: var(--gut);
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--sand-60);
}

/* touch / narrow fallback: real horizontal scrolling, no pin */
.lookbook.is-native .lookbook__pin { height: auto; }
.lookbook.is-native .lookbook__track {
  width: auto;                 /* back inside the column so it can scroll natively */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.lookbook.is-native .lookbook__track::-webkit-scrollbar { display: none; }
.lookbook.is-native .shot { scroll-snap-align: center; width: min(74vw, 340px); }
.lookbook.is-native .shot__frame { clip-path: none; }

/* ═══ 4. COLLECTION ═══════════════════════════════════════════════ */
.collection { position: relative; background: var(--ink); padding-bottom: clamp(5rem, 12vh, 9rem); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.2vw, 2.25rem) clamp(.75rem, 1.6vw, 1.75rem);
  padding-inline: var(--gut);
  max-width: 1600px; margin-inline: auto;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  will-change: transform;
}
/* staggered baseline so the grid reads as an editorial layout */
.card:nth-child(4n + 2) { margin-top: clamp(1.5rem, 5vw, 4.5rem); }
.card:nth-child(4n + 4) { margin-top: clamp(.75rem, 2.5vw, 2.25rem); }
@media (max-width: 800px) {
  .card:nth-child(4n + 2), .card:nth-child(4n + 4) { margin-top: 0; }
  .card:nth-child(2n) { margin-top: clamp(1rem, 6vw, 3rem); }
}

.card__frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 3 / 4;
  clip-path: inset(0 0 100% 0);
}
.card__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), opacity .7s var(--ease);
}
.card__frame img.is-alt { opacity: 0; }
.card:hover .card__frame img       { transform: scale(1.06); }
.card:hover .card__frame img.is-alt { opacity: 1; }

.card__tag {
  position: absolute; top: .85rem; left: .85rem;
  padding: .35em .8em;
  background: rgba(17, 17, 16, .7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--sand-20);
  border-radius: 100px;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand);
}
.card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .9rem;
}
.card__name { font-family: var(--display); font-weight: 400; font-size: clamp(.95rem, 1.35vw, 1.25rem); color: var(--paper); }
.card__price { font-size: .78rem; letter-spacing: .06em; color: var(--sand-60); white-space: nowrap; }
.card__sub { padding-top: .15rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sand-60); }

.collection__foot {
  padding: clamp(3rem, 8vh, 5rem) var(--gut) 0;
  max-width: 1600px; margin-inline: auto;
  color: var(--sand-60);
  font-size: clamp(.9rem, 1.1vw, 1rem);
}
.collection__foot a { color: var(--sand); border-bottom: 1px solid var(--sand-20); padding-bottom: 2px; }
.collection__foot a:hover { border-color: var(--sand); }

/* ═══ 5. MARQUEE ══════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  border-block: 1px solid var(--hair);
  background: var(--ink);
}
.marquee__row { display: flex; width: max-content; will-change: transform; }
.marquee__set {
  display: flex; align-items: center; gap: .4em;
  padding-right: .4em;
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
}
.marquee__set i { font-style: normal; font-size: .3em; color: var(--oxide); transform: translateY(-.4em); }

/* ═══ 6. CRAFT (sticky) ═══════════════════════════════════════════ */
.craft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(5rem, 14vh, 10rem) var(--gut);
  max-width: 1600px; margin-inline: auto;
}
.craft__sticky {
  position: sticky; top: 14vh;
  overflow: hidden;
  background: var(--ink-2);
}
.craft__sticky img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.craft__text { display: grid; gap: clamp(2.5rem, 7vh, 5rem); align-content: start; padding-top: clamp(1rem, 6vh, 4rem); }
.craft__text article { display: grid; gap: .8rem; max-width: 46ch; }
.craft__text h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.05; color: var(--paper);
}
.craft__text p { color: var(--sand-70); font-size: clamp(.92rem, 1.1vw, 1.02rem); }

@media (max-width: 860px) {
  .craft { grid-template-columns: 1fr; }
  .craft__sticky { position: relative; top: 0; }
}

/* ═══ 7. SEAL ═════════════════════════════════════════════════════ */
.seal {
  display: grid; place-items: center; gap: clamp(1rem, 4vh, 2.5rem);
  padding: clamp(5rem, 16vh, 11rem) var(--gut);
  text-align: center;
}
.seal__wrap { position: relative; width: min(86vw, 720px); }
.seal__img { width: 100%; opacity: .92; will-change: transform; }
.seal__shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(244,237,226,.22) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.seal__cap {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.3vw, 1.9rem);
  color: var(--sand-70);
}
.seal__cap em { font-style: italic; color: var(--paper); }

/* ═══ 8. FOOTER ═══════════════════════════════════════════════════ */
.foot { background: var(--ink); border-top: 1px solid var(--hair); overflow: hidden; }
.foot__top {
  padding: clamp(4rem, 12vh, 8rem) var(--gut) clamp(3rem, 8vh, 5rem);
  max-width: 1600px; margin-inline: auto;
}
.foot__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--paper);
  margin: .35em 0 .3em;
  max-width: 16ch;
}
.foot__sub { color: var(--sand-60); max-width: 36ch; font-size: clamp(.88rem, 1.05vw, 1rem); }

/* pill fields and button of the access gate */
.gate__field input {
  min-width: 0;
  padding: 1em 1.2em;
  background: transparent;
  border: 1px solid var(--sand-20);
  border-radius: 100px;
  font-size: .9rem;
  transition: border-color .35s var(--ease);
}
.gate__field input:focus { border-color: var(--sand-70); outline: none; }
.gate__field input[aria-invalid="true"] { border-color: var(--oxide); }
.gate__submit {
  padding: 1em 2em;
  background: var(--sand);
  color: var(--ink);
  border-radius: 100px;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.gate__submit:hover { background: var(--paper); }
/* iPhones zoom the whole page into any field under 16px when it is tapped */
@media (pointer: coarse) {
  .gate__field input { font-size: 16px; }
}

.foot__mark {
  padding: 0 var(--gut);
  clip-path: inset(0 0 100% 0);
}
.foot__mark img { width: 100%; }

.foot__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--gut);
  border-top: 1px solid var(--hair);
  font-size: .7rem; letter-spacing: .1em;
  color: var(--sand-60);
}
.foot__links { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.foot__links a { transition: color .3s var(--ease); }
.foot__links a:hover { color: var(--paper); }
.foot__credit { color: var(--sand-60); }

/* ═══ QUICK VIEW ══════════════════════════════════════════════════ */
.qv { position: fixed; inset: 0; z-index: 7500; display: grid; place-items: center; }
.qv[hidden] { display: none; }
.qv__scrim {
  position: absolute; inset: 0;
  background: rgba(10, 10, 9, .8);
  backdrop-filter: blur(10px);
  opacity: 0;
}
.qv__panel {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  /* minmax(0, 1fr) caps the row at the panel's max-height, so a long
     body scrolls inside itself instead of being clipped off the bottom */
  grid-template-rows: minmax(0, 1fr);
  width: min(1040px, calc(100vw - 2 * var(--gut)));
  max-height: min(86vh, 760px);
  background: var(--ink-2);
  border: 1px solid var(--hair);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(.985);
}
.qv__media { overflow: hidden; background: var(--ink-3); }
.qv__media img { width: 100%; height: 100%; object-fit: cover; }
.qv__body {
  display: grid; align-content: start; gap: 1rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow-y: auto;
}
.qv__body h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.05; color: var(--paper);
}
.qv__price { font-size: 1rem; color: var(--sand); letter-spacing: .05em; }
.qv__desc { color: var(--sand-70); font-size: .93rem; }

.qv__sizes { border: 0; display: grid; gap: .7rem; }
.qv__sizes legend {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-60);
  margin-bottom: .2rem;
}
.qv__sizes div { display: flex; flex-wrap: wrap; gap: .5rem; }
.qv__sizes button {
  min-width: 3.1em; padding: .55em .8em;
  border: 1px solid var(--sand-20); border-radius: 100px;
  font-size: .74rem; letter-spacing: .1em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.qv__sizes button:hover:not(:disabled) { border-color: var(--sand-70); }
.qv__sizes button[aria-pressed="true"] { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.qv__sizes button:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.qv__notify {
  margin-top: .5rem; padding: 1.05em 2em;
  background: var(--sand); color: var(--ink);
  border-radius: 100px;
  font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: background .35s var(--ease);
}
.qv__notify:hover { background: var(--paper); }
.qv__notify.is-done { background: transparent; color: var(--sand); border: 1px solid var(--sand-20); }
.qv__fine { font-size: .68rem; letter-spacing: .08em; color: var(--sand-60); }

.qv__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(17, 17, 16, .72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--sand-20);
  border-radius: 50%;
  transition: background .3s var(--ease);
}
.qv__close:hover { background: var(--ink); }
.qv__close svg { width: 15px; height: 15px; fill: none; stroke: var(--sand); stroke-width: 1.4; }

@media (max-width: 760px) {
  .qv__panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: 88vh; }
  .qv__media { max-height: 38vh; }
}

/* ═══ ACCESS GATE ═════════════════════════════════════════════════
   Stands in for the whole site until the visitor holds an approved
   access link. html.is-gated is set by the inline script in <head>
   before first paint; js/gate.js runs the form.                     */
.gate { display: none; }

html.is-gated .loader,
html.is-gated .nav,
html.is-gated main,
html.is-gated .qv { display: none; }

html.is-gated .gate {
  position: fixed; inset: 0; z-index: 7800;   /* under the grain and cursor */
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2.5rem, 8vh, 5rem) var(--gut);
  background: radial-gradient(110% 80% at 50% 28%, var(--ink-2) 0%, var(--ink) 65%);
}
.gate [hidden] { display: none !important; }

/* margin:auto centres it, but unlike place-items it never clips a
   form taller than a short phone screen */
.gate__inner {
  width: min(100%, 30rem);
  margin: auto;
  display: grid; gap: 1.1rem;
  text-align: center;
}
.gate__mark {
  width: min(72vw, 300px);
  aspect-ratio: 2 / 1;            /* trims the PNG's empty band above and below the word */
  object-fit: cover;
  margin: 0 auto .4rem;
}
.gate__eyebrow { justify-content: center; color: var(--sand-70); }
.gate__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--paper);
}
.gate__lede { max-width: 38ch; margin-inline: auto; color: var(--sand-70); font-size: clamp(.92rem, 1.1vw, 1rem); }
.gate__note {
  padding: .8em 1.1em;
  border: 1px solid var(--sand-20); border-radius: 14px;
  color: var(--sand); font-size: .85rem;
}

.gate__form { display: grid; gap: 1rem; margin-top: .9rem; text-align: left; }
.gate__field { display: grid; gap: .45rem; }
.gate__field label {
  padding-left: 1.25rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand-70);
}
.gate__field input { width: 100%; }
.gate__at { position: relative; }
.gate__at span {
  position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%);
  font-size: .9rem; color: var(--sand-70);
  pointer-events: none;
}
.gate__at input { padding-left: 2.5rem; }
@media (pointer: coarse) { .gate__at span { font-size: 16px; } }   /* match the 16px field */
.gate__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gate__submit { width: 100%; margin-top: .35rem; padding-block: 1.15em; }
.gate__submit:disabled { opacity: .6; cursor: progress; }
.gate__msg { min-height: 1.4em; text-align: center; font-size: .78rem; letter-spacing: .04em; color: var(--sand-70); }
.gate__msg.is-err { color: #c9925a; }   /* oxide, lifted to stay readable on ink */

.gate__done {
  display: grid; gap: .8rem;
  margin-top: .9rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--hair); border-radius: 18px;
  background: rgba(26, 25, 24, .6);
}
.gate__done:focus { outline: none; }
.gate__done h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.05; color: var(--paper);
}
.gate__done p { color: var(--sand-70); }
.gate__again {
  justify-self: center;
  margin-top: .3rem; padding-bottom: 2px;
  border-bottom: 1px solid var(--sand-20);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sand);
  transition: border-color .3s var(--ease);
}
.gate__again:hover { border-color: var(--sand); }

.gate__inner > *              { animation: gate-rise 1s var(--ease) both; }
.gate__inner > .gate__mark    { animation: gate-mark 1.6s var(--ease) .1s both; }
.gate__inner > .gate__eyebrow { animation-delay: .35s; }
.gate__inner > .gate__title   { animation-delay: .45s; }
.gate__inner > .gate__lede    { animation-delay: .55s; }
.gate__inner > .gate__form,
.gate__inner > .gate__done    { animation-delay: .65s; }
.gate.is-settled .gate__inner > .gate__form,
.gate.is-settled .gate__inner > .gate__done { animation-delay: 0s; }

@keyframes gate-mark { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gate-rise { from { opacity: 0; transform: translateY(14px); } }

/* ═══ REDUCED MOTION ══════════════════════════════════════════════
   Everything that a scrub or timeline would have revealed is shown
   outright, so the page reads completely with zero animation.       */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .loader { display: none; }
  .grain { display: none; }
  .cursor { display: none; }
  .hero__media img { transform: none; }
  .hero__mark img, .loader__mark img { clip-path: none; }
  .shot__frame, .card__frame, .foot__mark { clip-path: none !important; }
  .shot__frame img, .card__frame img { transform: none; }
  .manifesto__text .w { opacity: 1 !important; filter: none !important; }
  .rgb-split { text-shadow: none; }
  .lookbook__hint { display: none; }
  .gate, .gate * { animation: none !important; }
}