/* =========================================================
   Dresses of Homecoming — editorial fashion site
   ========================================================= */

:root {
  --ink: #0a0807;
  --ink-2: #1a1513;
  --paper: #f4ede4;
  --paper-2: #ebe2d4;
  --cream: #e6d9c4;
  --gold: #c79a55;
  --gold-2: #e6c896;
  --rose: #b6645a;
  --line: rgba(244, 237, 228, 0.18);
  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* The reveal curve — gentle, decelerating, settles softly.
     Picked over expo-out because it keeps a touch of weight at the end
     instead of feeling weightless. */
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-dur: 1.5s;
}

/* =========================================================
   REVEAL — universal entrance system
   Default: opacity + translateY + slight blur. Long, soft.
   Override per-element via data-reveal-strong or .hero__line-wrap.
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(3px);
  transition:
    opacity   var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    filter    var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Heavier reveal for big editorial type (intro headline, etc.) */
[data-reveal-strong] {
  --reveal-dur: 1.9s;
  transform: translate3d(0, 48px, 0);
  filter: blur(6px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Casual-copy deterrent — blocks marquee text selection.
     Form inputs re-enable selection below. */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  color: var(--paper);
  mix-blend-mode: difference;
  transition: padding 0.4s var(--ease-out);
}
.nav.is-scrolled { padding-top: 14px; padding-bottom: 14px; }

.nav__brand { display: flex; align-items: baseline; gap: 12px; }
.nav__mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.nav__wordmark {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.92;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
}
.nav__links a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.5s var(--ease-out);
}
.nav__links a:not(.nav__cta):hover::after { right: 0; }

.nav__cta {
  border: 1px solid currentColor;
  padding: 10px 18px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .nav__wordmark { display: none; }
  .nav__links a:not(.nav__cta) { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: #100a08;
  color: var(--paper);
}

.hero__stage {
  position: absolute;
  inset: 0;
  perspective: 1px;
}

.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
/* Parallax composition — JS writes --py, CSS composes with any extras. */
.hero__layer--3d  { transform: translate3d(0, var(--py, 0px), 0); }
.hero__layer--mid { transform: translate3d(0, var(--py, 0px), 0); }

/* 3D hero plane. Holds a Three.js canvas with the dress-form scene.
   Background gradient is the bed the model sits against — visible
   while the GLB loads and behind transparent areas of the render. */
.hero__layer--3d {
  background:
    radial-gradient(120% 80% at 50% 35%, #2a1f1a 0%, #120c0a 55%, #08050485 100%),
    #08050a;
  /* Larger than viewport so parallax translate doesn't expose seams */
  height: 130%;
  top: -15%;
}
.hero__layer--3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Always visible. The renderer uses alpha=true, so until the model
     is added the canvas just renders transparent (the gradient bed
     below shows through). When the model loads, it appears in place. */
}

/* Mid plane — moves slightly faster, deepens shadows */
.hero__layer--mid {
  background:
    radial-gradient(60% 80% at 70% 40%, rgba(199, 154, 85, 0.10) 0%, transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(10,8,7,0.55) 0%, transparent 65%);
  height: 120%;
  top: -10%;
}

/* Film grain */
.hero__layer--grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Vignette */
.hero__layer--vignette {
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* Corner meta ticks */
.hero__meta {
  position: absolute;
  top: clamp(96px, 14vh, 132px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 237, 228, 0.78);
  z-index: 4;
}
.hero__meta--left  { left: clamp(20px, 4vw, 56px); }
.hero__meta--right { right: clamp(20px, 4vw, 56px); text-align: right; }
.tick { display: block; }

/* Hero content */
.hero__content {
  position: relative;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 96px);
  max-width: 1480px;
  margin: 0 auto;
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--gold-2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::before {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--gold-2);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 14vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0 0 36px;
  text-shadow: 0 8px 60px rgba(0,0,0,0.45);
}
/* Mask reveal for headline lines — overflow:hidden wrapper, inner
   rises from below. Combines with parallax via CSS variables. */
.hero__line-wrap {
  display: block;
  /* overflow:hidden was clipping the "g" descender in Night. at large
     display sizes. The wrapper already hides pre-reveal text via opacity:0
     (from [data-reveal]), so no overflow clipping is needed. */
  overflow: visible;
}
.hero__line-wrap[data-reveal] {
  /* this wrapper only fades opacity — the inner does the rise */
  transform: none;
  filter: none;
}
.hero__line-wrap[data-reveal].is-revealed {
  transform: none;
  filter: none;
}

.hero__line {
  display: block;
  /* Composed transform: reveal-Y (mask rise) + parallax-Y. */
  transform: translate3d(0, calc(var(--reveal-y, 105%) + var(--py, 0px)), 0);
  transition: transform 1.9s var(--reveal-ease) var(--reveal-delay, 0ms);
  will-change: transform;
}
.hero__line-wrap.is-revealed .hero__line { --reveal-y: 0%; }

.hero__line em {
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
}
.hero__line--accent {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(180deg, #f7e9cf 0%, #c79a55 60%, #8a6326 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-left: clamp(40px, 12vw, 200px);
  /* background-clip:text only paints where the gradient's background box
     reaches. With line-height:0.86 the element box is too short — the "g"
     descender falls below it and gets no gradient paint, so with
     color:transparent it's invisible. padding-bottom extends the background
     box far enough to cover any descender; negative margin cancels the
     layout impact so nothing else shifts. */
  padding-bottom: 0.45em;
  margin-bottom: -0.45em;
}

.hero__lede {
  max-width: 520px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(244, 237, 228, 0.86);
  margin: 0 0 40px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 999px;
  transition: transform 0.5s var(--ease-out), background 0.4s, color 0.4s, border-color 0.4s;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}
.btn--primary:hover { background: var(--gold-2); border-color: var(--gold-2); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(244, 237, 228, 0.5);
}
.btn--ghost:hover { border-color: var(--paper); }
.btn__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 4px rgba(230, 200, 150, 0.18);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: 64px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 237, 228, 0.7);
}
.hero__scroll-track {
  position: relative;
  width: 1px;
  height: 60px;
  background: rgba(244, 237, 228, 0.28);
  overflow: hidden;
}
.hero__scroll-thumb {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  background: var(--paper);
  animation: scrollThumb 2.4s var(--ease-out) infinite;
}
@keyframes scrollThumb {
  0%   { transform: translateY(0); }
  60%  { transform: translateY(90px); }
  100% { transform: translateY(90px); }
}

/* Marquee */
.hero__marquee {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  overflow: hidden;
  z-index: 6;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 237, 228, 0.65);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  gap: 28px;
  animation: marquee 38s linear infinite;
}

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

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  background: var(--paper);
  padding: clamp(80px, 14vw, 180px) clamp(24px, 6vw, 96px);
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.intro__rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(10,8,7,0.55);
  border-top: 1px solid rgba(10,8,7,0.18);
  padding-top: 24px;
}
.intro__rule span:nth-child(2) { letter-spacing: 0.6em; }

.intro__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 18ch;
}
.intro__title em { font-style: italic; color: var(--rose); }

.intro__copy {
  max-width: 60ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: rgba(10,8,7,0.7);
  font-weight: 300;
}
.intro__link {
  align-self: start;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* =========================================================
   ATELIER — portfolio-grade editorial layout for The Edit.
   Big italic numeral, asymmetric grid, deliberate vh-based
   gaps between cards. Each card is a complete unit: framed
   image above, caption below — the caption settles a beat
   after the frame, so each card unfolds rather than appears.
   ========================================================= */

.atelier {
  max-width: 1520px;
  margin: 0 auto;
  padding:
    clamp(40px, 6vw, 100px)
    clamp(24px, 6vw, 96px)
    clamp(160px, 22vw, 320px);
}

.atelier__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: clamp(28px, 4vw, 72px);
  border-top: 1px solid rgba(10, 8, 7, 0.16);
  padding-top: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(140px, 20vw, 280px);
}
.atelier__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(96px, 13vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.atelier__label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(18px, 1.6vw, 28px);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(10, 8, 7, 0.55);
}
.atelier__rule {
  display: block;
  height: 1px;
  background: rgba(10, 8, 7, 0.24);
}

.atelier__foot {
  margin-top: clamp(120px, 18vw, 240px);
  border-top: 1px solid rgba(10, 8, 7, 0.16);
  padding-top: clamp(28px, 3vw, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 96px);
}
.atelier__foot-3d {
  width: clamp(160px, 18vw, 240px);
  aspect-ratio: 3 / 4;
  position: relative;
  cursor: pointer;
  /* The canvas is pure model on transparent BG — a soft drop shadow
     beneath grounds the dress form against the cream paper. */
  filter: drop-shadow(0 24px 32px rgba(10, 8, 7, 0.18));
}
.atelier__foot-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.atelier__link {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(10, 8, 7, 0.3);
  padding-bottom: 6px;
  transition: border-color 0.6s var(--reveal-ease),
              color 0.6s var(--reveal-ease);
}
.atelier__link:hover {
  border-color: var(--ink);
  color: var(--rose);
}

@media (max-width: 720px) {
  .atelier__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    text-align: center;
  }
  .atelier__foot-3d {
    width: 200px;
    margin: 0 auto;
  }
}

/* ---------- Grid: asymmetric 12-col, no row-gap; rhythm
              comes from per-card grid-column + margin-top. */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2vw, 32px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card__frame {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(20px, 2.6vw, 40px);
}

.card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
  filter: saturate(1.02);
}
.card:hover .card__img {
  transform: scale(1.05);
  filter: saturate(1.12) brightness(1.04);
}

.card__img--one   { background-image: url("./images/card-01.jpg"); }
.card__img--two   { background-image: url("./images/card-02.jpg"); }
.card__img--three { background-image: url("./images/card-03.jpg"); }

.card__caption {
  display: grid;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10, 8, 7, 0.62);
  /* Caption settles a beat AFTER the frame finishes — the small
     lag makes each card unfold as a single, intentional gesture. */
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity   1.0s var(--reveal-ease),
    transform 1.0s var(--reveal-ease);
}
.card.is-revealed .card__caption {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.55s;
}

.card__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
}
.card__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
}

/* =========================================================
   PER-CARD: placement, caption composition, and reveal motion.
   Three distinct rhythms — same easing for cohesion, varied
   distance + duration so the sequence builds rather than loops.
   ========================================================= */

/* CARD 1 — Solène. Anchored left of center, sits at the top.
   Caption: number / name / fabric, baseline row across the bottom. */
.card--1 { grid-column: 2 / span 6; }
.card--1 .card__frame { aspect-ratio: 4 / 5; }
.card--1 .card__caption {
  grid-template-columns: auto 1fr auto;
  gap: 24px;
}
.card--1 .card__name { text-align: center; }

.card--1[data-reveal] {
  transform: translate3d(0, 64px, 0);
  transition:
    opacity   1.7s var(--reveal-ease),
    transform 1.7s var(--reveal-ease);
}
.card--1[data-reveal].is-revealed { transform: translate3d(0, 0, 0); }

/* CARD 2 — Marlowe. Anchored right; deep vh offset so it has
   its own scroll moment. Caption stacked, right-aligned. */
.card--2 {
  grid-column: 8 / span 4;
  margin-top: clamp(140px, 26vh, 320px);
}
.card--2 .card__frame { aspect-ratio: 3 / 4; }
.card--2 .card__caption {
  grid-template-columns: 1fr;
  justify-items: end;
  text-align: right;
  gap: 10px;
}
.card--2 .card__name { font-size: clamp(28px, 3vw, 44px); }

.card--2[data-reveal] {
  /* drifts in from beyond the right edge, settling leftward into place */
  transform: translate3d(40px, 80px, 0);
  transition:
    opacity   1.95s var(--reveal-ease),
    transform 1.95s var(--reveal-ease);
}
.card--2[data-reveal].is-revealed { transform: translate3d(0, 0, 0); }

/* CARD 3 — Linnea. Center-left, lowest of the three.
   Number rendered inside the frame, signature-style caption
   beneath. Image unveils via clip-path wipe — the climax. */
.card--3 {
  grid-column: 4 / span 5;
  margin-top: clamp(160px, 30vh, 360px);
}
.card--3 .card__frame { aspect-ratio: 4 / 5; }
.card--3 .card__num--corner {
  position: absolute;
  top: clamp(20px, 2vw, 32px);
  right: clamp(22px, 2.4vw, 36px);
  z-index: 2;
  color: var(--paper);
  font-size: clamp(13px, 1.1vw, 16px);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.card--3 .card__caption {
  grid-template-columns: auto 1fr;
  gap: 14px;
}
.card--3 .card__name { font-size: clamp(28px, 3vw, 44px); }
.card--3 .card__fab {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 19px);
  text-transform: none;
  letter-spacing: 0.005em;
  color: rgba(10, 8, 7, 0.65);
  align-self: center;
}

.card--3[data-reveal] {
  transform: translate3d(0, 96px, 0);
  transition:
    opacity   2.15s var(--reveal-ease),
    transform 2.15s var(--reveal-ease);
}
.card--3[data-reveal].is-revealed { transform: translate3d(0, 0, 0); }

.card--3 .card__img {
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 2.2s var(--reveal-ease),
    transform 1.4s var(--ease-out),
    filter    1.4s var(--ease-out);
}
.card--3.is-revealed .card__img { clip-path: inset(0 0 0 0); }

/* Strip the base [data-reveal] blur — reads ugly on photographs. */
.card[data-reveal]              { filter: none; }
.card[data-reveal].is-revealed  { filter: none; }

@media (max-width: 900px) {
  .atelier__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }
  .atelier__label { padding-bottom: 0; }
  .card--1, .card--2, .card--3 { grid-column: 1 / -1; }
  .card--1 { margin-top: 0; }
  .card--2 { margin-top: clamp(80px, 16vw, 160px); }
  .card--3 { margin-top: clamp(80px, 16vw, 160px); }
  .card--1 .card__frame,
  .card--2 .card__frame,
  .card--3 .card__frame { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .card--3 .card__img { clip-path: none !important; }
  .card .card__caption {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 96px) 32px;
}
.foot__rule { height: 1px; background: var(--line); margin-bottom: 60px; }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  font-size: 14px;
}
.foot__brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  margin: 0 0 12px;
}
.foot__addr { color: rgba(244, 237, 228, 0.6); line-height: 1.6; margin: 0 0 14px; font-size: 13px; }
.foot__head {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: rgba(244, 237, 228, 0.55);
}
.foot__cols a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(244, 237, 228, 0.85);
}
.foot__cols a:hover { color: var(--gold-2); }

.foot__form { display: flex; gap: 8px; margin-top: 12px; }
.foot__form input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
}
.foot__form input::placeholder { color: rgba(244, 237, 228, 0.4); }
.foot__form button {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
}

.foot__legal {
  margin-top: 80px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 237, 228, 0.4);
  text-align: center;
}

@media (max-width: 760px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MOBILE — phones up to ~640 px wide
   WebGL is disabled in JS on mobile (see scene.js isMobile guard).
   These rules hide canvas wrappers so they don't reserve space,
   tighten spacing, and stack layouts for single-column reading.
   ========================================================= */
@media (max-width: 640px) {
  /* ---- Hero ---- */
  /* Hero 3D still renders on mobile (single context, DPR=1).
     No CSS hiding needed — the canvas fills the layer as usual. */

  /* Slightly smaller headline so it doesn't overflow a narrow viewport */
  .hero__title {
    font-size: clamp(52px, 15vw, 80px);
    line-height: 0.88;
    margin-bottom: 24px;
  }

  /* Corner meta ticks overlap content on narrow screens */
  .hero__meta { display: none; }

  /* Stack CTA buttons */
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Scroll indicator is redundant on touch */
  .hero__scroll { display: none; }

  .hero__lede { font-size: 14px; margin-bottom: 28px; }

  /* ---- Intro ---- */
  .intro {
    padding: clamp(56px, 10vw, 100px) clamp(20px, 5vw, 40px);
    gap: 24px;
  }

  /* ---- Atelier header ---- */
  .atelier {
    padding:
      clamp(32px, 6vw, 60px)
      clamp(20px, 5vw, 40px)
      clamp(80px, 14vw, 160px);
  }

  .atelier__num {
    font-size: clamp(72px, 20vw, 120px);
  }

  .atelier__head {
    margin-bottom: clamp(60px, 12vw, 120px);
  }

  /* ---- Shatter figure: smaller on mobile but still visible ---- */
  .atelier__foot-3d { width: 120px; }

  .atelier__foot {
    border-top: 1px solid rgba(10, 8, 7, 0.16);
    padding-top: clamp(20px, 3vw, 36px);
    margin-top: clamp(60px, 10vw, 120px);
  }

  /* ---- Footer ---- */
  .foot__cols { grid-template-columns: 1fr; gap: 32px; }
}

/* Tighten nav on the smallest phones */
@media (max-width: 400px) {
  .nav__mark { font-size: 18px; }
  .nav__cta  { padding: 8px 14px; font-size: 11px; }
}

/* =========================================================
   Reduced motion — kill the parallax theatrics
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__layer--grain { animation: none; }
  .hero__scroll-thumb { animation: none; }
  .marquee__track { animation: none; }
  .hero__layer--bg,
  .hero__layer--mid { transform: none !important; }
  .hero__line { transform: none !important; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}