/* ==========================================================================
   Van Pham — styles
   Dark editorial system adapted from DESIGN.md: cream-on-black interface,
   0px / 75px radii only, no shadows. Colour lives in the liquid gradient media.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Interface */
  --fg: #f1dac4;
  --inkstone: #d9cabd;
  --muted: #a69cac;
  --bg: #0a0910;
  --line: rgba(241, 218, 196, 0.14);
  --slate-pill: rgba(22, 27, 51, 0.78);

  /* Liquid media palette, darkest → lightest (gradient media only) */
  --night: #0d0c1d;
  --midnight: #161b33;
  --indigo: #474973;
  --mauve: #a69cac;
  --cream: #f1dac4;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-label: 11px;
  --text-caption: 12px;
  --text-body-sm: 16px;
  --text-body: 18px;
  --text-subheading: clamp(26px, 3.2vw, 39px);
  --text-heading: clamp(40px, 6.6vw, 78px);
  --text-heading-lg: clamp(48px, 8.4vw, 94px);
  --text-display: clamp(64px, 15.5vw, 225px);

  /* Motion */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --dur: 1.25s;
  --dur-md: 0.8s;
  --dur-sm: 0.4s;

  /* Layout */
  --max: 1078px;
  --max-wide: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(96px, 13vw, 152px);
  --gap: 14px;
  --radius-pill: 75px;
  --header-h: 84px;

  /* Textured black background (mottling + fine static + vignette), shared by
     the page and the homepage footer */
  --texture:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.65) 100%),
    radial-gradient(70% 55% at 50% 30%, rgba(71, 73, 115, 0.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .95  0 0 0 0 .85  0 0 0 0 .8  .11 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='1600' height='1000' filter='url(%23m)'/%3E%3C/svg%3E");
  --texture-size: auto, auto, 200px 200px, cover;
  --texture-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

/* Base -------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3 { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

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

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 300;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--text-caption);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--max-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }

/* Logo — <img> of the cream signature (assets/van-pham-signature-light.svg) */
.logo {
  display: block;
  height: auto;
  aspect-ratio: 1710 / 560;
}

/* Textured black background. The soft mottling is one SVG stretched over the
   whole viewport (no tiling, so no seams); only the fine static repeats, and
   its tile size is a whole multiple of the noise period so it stitches cleanly.
   */
body::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  /* Drifts very slightly with the pointer (--mx/--my set in main.js) */
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0);
  background-image: var(--texture);
  background-size: var(--texture-size);
  background-repeat: var(--texture-repeat);
  background-position: center;
}

/* Custom cursor: a small circle that inverts whatever is behind it (main.js
   adds .has-cursor on devices with a mouse) */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor.is-visible { opacity: 1; }

/* Animated film grain over everything */
body::after {
  content: "";
  position: fixed;
  top: -100%; left: -100%;
  width: 300%; height: 300%;
  z-index: 250;
  pointer-events: none;
  opacity: 0.075;
  transition: opacity 2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-4%, -8%); }
  33%  { transform: translate(-12%, 4%); }
  50%  { transform: translate(6%, -12%); }
  67%  { transform: translate(-4%, 12%); }
  83%  { transform: translate(12%, 0); }
  100% { transform: translate(0, 8%); }
}

/* Type -------------------------------------------------------------------- */

.eyebrow {
  font-size: var(--text-label);
  line-height: 1.36;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-display {
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.h-anchor {
  font-size: var(--text-heading-lg);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.h-whisper {
  font-size: var(--text-heading);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.h-sub {
  font-size: var(--text-subheading);
  font-weight: 300;
  line-height: 1.19;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--text-body);
  line-height: 1.58;
  color: var(--inkstone);
  max-width: 52ch;
}

.body-copy { color: var(--inkstone); max-width: 56ch; }
.body-copy + .body-copy { margin-top: 1em; }

.stack > * + * { margin-top: 28px; }
.stack--lg > * + * { margin-top: 40px; }

/* Buttons & tags ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 33px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-body-sm);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: letter-spacing var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
}
.btn:hover { letter-spacing: 0.05em; }
.btn__arrow { display: inline-block; transition: transform var(--dur-md) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--light { color: var(--fg); border-color: rgba(241, 218, 196, 0.3); }
.btn--light:hover { border-color: rgba(241, 218, 196, 0.9); }

.btn--sm { padding: 8px 22px; font-size: var(--text-caption); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap); }

.tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-caption);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur-sm) ease, background-color var(--dur-sm) ease, color var(--dur-sm) ease;
}
.tag:hover { border-color: var(--fg); }
.tag[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tag__count { font-size: 10px; opacity: 0.6; }


/* Loader / page transition -------------------------------------------------- */

.loader { display: none; }

.js .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  isolation: isolate;
  background: #000;
  color: var(--fg);
  /* Failsafe: never trap the page if scripts fail to run */
  animation: loader-failsafe 0s 8s forwards;
}
.js .loader.is-ready { animation: none; }

@keyframes loader-failsafe { to { visibility: hidden; } }

/* Once the logo has formed, the black falls away and the water swells in behind it */
.loader[data-state="out"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.6s ease, visibility 0s 1.6s;
}

/* The intro plays on the first page of a visit and on homepage refreshes
   (decided by the inline script in <head>, which sets .is-intro) */
.js:not(.is-intro) .loader { display: none; }
/* Homepage: no loader — the water is there from the start and the smoke
   logo (js/smoke-logo.js) does its own intro over it */
.js .page-home .loader { display: none; }
.is-intro .site-header { opacity: 0; }
/* Other pages: plain black first, then the water swells in */
.is-intro:not([data-page="home"]) body::after { opacity: 0; }
.is-intro:not([data-page="home"]) .liquid { opacity: 0; transform: scale(1.18); filter: brightness(1.6); }
.liquid { transition: opacity 2.8s var(--ease), transform 3.4s var(--ease), filter 3.4s var(--ease); }

/* Particles drift, then gather into the logo (main.js); the crisp logo then
   takes over in exactly the spot the page's own logo sits. */
.loader__pixels {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: opacity 0.8s ease;
}
.loader__logo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(64vw, 520px);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.loader.is-formed .loader__logo { opacity: 1; }
/* The logo finishes fading in just before the last particles land, then the particles melt away */
.loader.is-formed .loader__pixels { opacity: 0; transition: opacity 1.1s ease 0.5s; }

/* Page transitions: a slow cross-dissolve between pages.
   Chrome/Edge/Safari blend the old and new page natively (cross-document
   view transitions); the header holds still while everything else dissolves.
   Elsewhere (Firefox, or pages opened from disk) main.js falls back to a
   dissolve out through black and back in (.is-leaving / .is-arriving). */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 1.6s; }
::view-transition-old(root) { animation: dissolve-out 1.6s var(--ease-io) both; }
::view-transition-new(root) { animation: dissolve-in 1.6s var(--ease-io) both; }
.site-header { view-transition-name: site-header; }

@keyframes dissolve-out {
  to { opacity: 0; filter: blur(16px) brightness(0.7); transform: scale(1.03); }
}
@keyframes dissolve-in {
  from { opacity: 0; filter: blur(16px) brightness(1.3); transform: scale(0.985); }
}

.is-leaving body { animation: dissolve-out 0.9s var(--ease-io) both; }
.is-arriving body { animation: dissolve-in 1.4s var(--ease-io) backwards; }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  color: var(--fg);
  transition: transform var(--dur-md) var(--ease), background-color var(--dur-sm) ease, opacity 1.2s ease, color 1.2s ease;
}
.site-header.is-scrolled {
  background-color: rgba(10, 9, 16, 0.6);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand { opacity: 0; transition: opacity 1.4s var(--ease); }
.is-loaded .brand { opacity: 1; }
.page-home .brand { visibility: hidden; }
.brand .logo { width: clamp(92px, 9vw, 124px); }

.nav { display: flex; gap: clamp(20px, 3vw, 44px); }

.nav__link {
  position: relative;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity var(--dur-sm) ease;
}
.nav__link:hover { opacity: 0.6; }
.nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* Hero + liquid media ------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
}
.hero--full { height: 100vh; height: 100svh; min-height: 560px; }
.hero--band { height: clamp(260px, 34vh, 360px); }
.hero--band .h-display { font-size: clamp(56px, 10vw, 150px); }

.liquid {
  position: absolute;
  inset: 0;
  /* Static fallback until (or if) WebGL takes over */
  background:
    radial-gradient(45% 35% at 62% 38%, var(--mauve), transparent 70%),
    radial-gradient(30% 25% at 70% 30%, var(--cream), transparent 70%),
    radial-gradient(60% 50% at 30% 60%, var(--indigo), transparent 72%),
    linear-gradient(180deg, var(--midnight), var(--night));
  /* Fade the media itself out at the bottom so the textured page shows through */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
/* Scrim: keep the nav legible */
.liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 9, 16, 0.55), transparent 18%);
}
.liquid canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.liquid.is-live canvas { opacity: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--header-h) var(--gutter) clamp(20px, 3vw, 36px);
}

/* Home hero */
.hero--full .hero__inner { display: grid; grid-template-rows: 1fr auto; }
.hero__title { place-self: center; margin-top: -4vh; }
.hero__link { display: block; }
/* The smoke canvas draws the logo; the image stays as the link + text alternative */
.hero__smoke {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: opacity 1s ease, filter 1.8s var(--ease);
}
.hero__smoke.is-hidden { opacity: 0; }
/* First load: the logo comes in out of a blur */
.hero__smoke.is-blurred { opacity: 0; filter: blur(18px); }
.has-smoke .hero__logo { opacity: 0; }
.hero__logo { width: min(72vw, 940px); will-change: transform; }

.hero__foot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 24px;
  color: var(--fg);
}
.hero__meta {
  font-size: var(--text-label);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

/* Inner-page band hero */
.hero--band .hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: var(--fg);
}
.hero--band .h-display { margin-bottom: -0.08em; }

/* Editorial layouts -------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--gap) clamp(24px, 5vw, 64px);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(48px, 8vw, 96px);
}

/* Product art (gradient placeholder or photo) */
.art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--midnight);
}
.art__fill, .art__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.art__fill { inset: -4%; width: 108%; height: 108%; }
a.art:hover .art__fill, a.art:hover .art__img { transform: scale(1.05); }

/* Featured rows (home) */
.feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: clamp(20px, 4vw, 48px);
}
.feature + .feature { margin-top: clamp(72px, 11vw, 140px); }
.feature__media { grid-column: 1 / 8; }
.feature__body { grid-column: 8 / 13; }
.feature:nth-child(even) .feature__media { grid-column: 6 / 13; order: 2; }
.feature:nth-child(even) .feature__body { grid-column: 1 / 6; order: 1; }
.feature__body > * + * { margin-top: 18px; }
.feature__body .btn { margin-top: 28px; }
.feature__blurb { color: var(--inkstone); max-width: 40ch; }
.feature__price { font-size: var(--text-caption); color: var(--muted); letter-spacing: 0.04em; }

/* Marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(20px, 3vw, 36px);
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee__track span {
  padding-right: 0.35em;
  font-size: var(--text-heading-lg);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Shop -------------------------------------------------------------------- */

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 28px;
  margin-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }

.sort { display: inline-flex; align-items: center; gap: 12px; }
.sort select { width: auto; padding: 6px 22px 6px 0; font-size: var(--text-caption); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 56px) var(--gap);
}

.card__media { display: block; }
.card__cta {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 8px 20px;
  border: 1px solid rgba(241, 218, 196, 0.5);
  border-radius: var(--radius-pill);
  background: var(--slate-pill);
  color: var(--fg);
  font-size: var(--text-caption);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-sm) ease, transform var(--dur-md) var(--ease);
}
.card__media:hover .card__cta, .card__media:focus-visible .card__cta { opacity: 1; transform: none; }
@media (hover: none) { .card__cta { opacity: 1; transform: none; } }

.card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding-top: 14px;
}
.card__name { font-size: var(--text-body-sm); font-weight: 400; line-height: 1.3; }
.card__price { font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; }
.card__meta { grid-column: 1 / -1; font-size: var(--text-caption); color: var(--muted); }

.empty { padding-block: 64px; color: var(--muted); }

/* About ------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.story__media { grid-column: 1 / 6; }
.story__body { grid-column: 7 / 13; }

.values { border-bottom: 1px solid var(--line); }
.value {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 16px clamp(24px, 4vw, 48px);
  align-items: baseline;
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

/* Contact ----------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(48px, 8vw, 120px);
}
.info > * + * { margin-top: 40px; }
.info__block > * + * { margin-top: 8px; }
.info__value { font-size: var(--text-body); line-height: 1.5; }
.info__value a { border-bottom: 1px solid transparent; transition: border-color var(--dur-sm) ease; }
.info__value a:hover { border-color: currentColor; }

/* Forms ------------------------------------------------------------------- */

.form { display: grid; gap: 32px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input, .field select, .field textarea, .sort select, .newsletter input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-body);
  line-height: 1.4;
  outline: none;
  transition: border-color var(--dur-sm) ease;
  -webkit-appearance: none;
          appearance: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select, .sort select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f1dac4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus,
.sort select:focus, .newsletter input:focus { border-color: var(--fg); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-note { min-height: 1.4em; font-size: var(--text-caption); color: var(--muted); }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: 28px;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  gap: 40px var(--gap);
}
.footer__label {
  margin-bottom: 14px;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer__text, .footer__list {
  font-size: var(--text-caption);
  line-height: 1.7;
  color: var(--muted);
}
.footer__list a, .footer__base a { color: var(--fg); transition: opacity var(--dur-sm) ease; }
.footer__list a:hover, .footer__base a:hover { opacity: 0.6; }

.newsletter__row { display: flex; align-items: flex-end; gap: var(--gap); }
.newsletter input { font-size: var(--text-body-sm); }
.newsletter .form-note { margin-top: 10px; }

.footer__logo {
  width: 100%;
  margin-top: clamp(56px, 9vw, 112px);
  margin-bottom: 28px;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Reveal motion ----------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
[data-split] .w > span { display: inline-block; }
.js [data-split] .w > span {
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js [data-split].is-in .w > span { transform: none; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 900px) {
  .split, .contact { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature, .story { grid-template-columns: 1fr; }
  .feature__media, .feature__body,
  .feature:nth-child(even) .feature__media,
  .feature:nth-child(even) .feature__body,
  .story__media, .story__body { grid-column: auto; order: 0; }
  .feature__media { max-width: 560px; }
  .story__media { max-width: 480px; }
  .value { grid-template-columns: 48px minmax(0, 1fr); }
  .value > :last-child { grid-column: 2; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .newsletter { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .hero__title { margin-top: -8vh; }
  .hero__logo { width: 80vw; }
  .hero--band .hero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { gap: 32px 10px; }
  .card__body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  body::after { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Homepage scroll stage ----------------------------------------------------
   The hero stays pinned while the first ~80vh of scrolling shrinks the logo
   to a third and brings in the full-screen carousel beneath it
   (main.js sets --logo-scale and .is-collection). */

.home-stage { position: relative; }
.home-stage__room { height: 110vh; } /* logo shrink, then a pause on the carousel before the footer rises */
.home-stage .hero {
  position: sticky;
  top: 0;
  /* A dark band above the pinned hero, so nothing peeks through while a phone's
     address bar slides away (an element's own shadow isn't clipped by its overflow) */
  box-shadow: 0 -240px 0 0 #0e0d19;
}
.home-stage__end { position: absolute; top: 50vh; left: 0; width: 1px; height: 1px; }
.hero__link { transform: scale(var(--logo-scale, 1)); }

.scroll-cue { transition: opacity 0.6s ease; }

/* Layering: carousel over the water, logo + labels over the carousel */
.home-stage .hero__smoke { z-index: 3; }
/* hero__inner stays out of the stacking order so the logo can blend with the carousel */
.home-stage .hero__inner { z-index: auto; pointer-events: none; }
.home-stage .hero__title,
.home-stage .hero__foot { position: relative; z-index: 3; }
.home-stage .hero__inner a { pointer-events: auto; }
/* Once the carousel is in, the smoke canvas hands over to the crisp vector
   logo (no smoke on hover, and sharp at nav size), which turns white and
   inverts whatever is behind it, like the cursor */
.home-stage .hero__smoke { transition: opacity 0.6s ease; }
.is-collection .home-stage .hero__smoke { opacity: 0; }
.home-stage .hero__logo { transition: opacity 0.6s ease, filter 0.8s ease; }
.is-collection .home-stage.home-stage .hero__logo { opacity: 1; filter: brightness(0) invert(1); }
.is-collection .home-stage .hero__title { mix-blend-mode: difference; }
/* The homepage nav stays put and clear over the stage */
.page-home .site-header.is-hidden { transform: none; }
.page-home .site-header.is-scrolled { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Scroll prompt */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3.5vh, 36px);
  z-index: 2;
  width: 16px;
  height: 40px;
  margin-left: -8px;
  color: var(--fg);
}
.scroll-cue svg { display: block; width: 100%; height: 100%; animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue {
  0% { transform: translateY(-8px); opacity: 0; }
  35%, 65% { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}
.is-intro .scroll-cue, .is-scrolled-home .scroll-cue { opacity: 0; pointer-events: none; }

/* Carousel: full-screen, four tall images across, black and white until
   hovered; drifts sideways and can be dragged with the mouse (main.js) */
.carousel {
  --per-view: 4;
  --carousel-gap: 18px;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.is-collection .carousel { pointer-events: auto; }
/* Centred band of 4:5 images, leaving space above and below */
.carousel__viewport { display: flex; align-items: center; height: 100%; overflow: hidden; }
.carousel.is-dragging { cursor: grabbing; }
.carousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--carousel-gap);
  will-change: transform;
  -webkit-user-select: none;
          user-select: none;
}
.carousel__item {
  flex: 0 0 auto;
  width: min(calc((100vw - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view)), 64vh);
  /* Smoky entrance: out of a blur, staggered */
  opacity: 0;
  filter: blur(22px);
  transform: scale(1.04);
  transition: opacity 1.4s ease, filter 1.8s var(--ease), transform 1.8s var(--ease);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
.is-collection .carousel__item { opacity: 1; filter: none; transform: none; }

/* Edge warp: set every frame by main.js — images (with their caption) stretch
   and blur off like smoke as they enter or leave the screen; the rest of the
   row stays flat */
.carousel__arch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  will-change: transform, filter, opacity;
}
.carousel__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.carousel__media,
.carousel__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.9s ease, transform 1.4s var(--ease);
  -webkit-user-drag: none;
}
.carousel__item:hover .carousel__media,
.carousel__item:hover .carousel__frame img { filter: grayscale(0) brightness(1); transform: scale(1.03); }
.carousel__media--ph {
  background:
    radial-gradient(80% 60% at 30% 25%, var(--b), transparent 70%),
    linear-gradient(160deg, var(--a), var(--b));
}

/* Name and price under each image */
.carousel__info {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.carousel__info span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Overlay on hover: size selector, then an add-to-cart button once a size is
   picked (visual only for now) */
.carousel__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-sm) ease, transform var(--dur-md) var(--ease);
}
.carousel__item:hover .carousel__overlay,
.carousel__overlay:focus-within { opacity: 1; transform: none; }
.carousel__sizes { display: flex; justify-content: center; gap: 6px; }
.carousel__add {
  padding: 8px 26px;
  border: 1px solid var(--fg);
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.has-size .carousel__add { opacity: 1; transform: none; pointer-events: auto; }
.carousel__size {
  min-width: 40px;
  padding: 7px 12px;
  border: 1px solid rgba(241, 218, 196, 0.5);
  border-radius: var(--radius-pill);
  background: var(--slate-pill);
  color: var(--fg);
  font-size: var(--text-caption);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-sm) ease, color var(--dur-sm) ease, border-color var(--dur-sm) ease;
}
.carousel__size:hover { border-color: var(--fg); }
.carousel__size[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* Phones: 4:5 images, one and a half on screen, swiped by hand (no drift,
   no edge warp, and a plain fade in rather than the smoky blur) */
@media (max-width: 700px) {
  .carousel { --per-view: 1.5; --carousel-gap: 12px; }
  .carousel__item {
    filter: none;
    transform: none;
    transition: opacity 0.6s ease;
    transition-delay: 0s;
  }
  .carousel__overlay { display: none; } /* no size selector on phones */
}
/* Touch screens: horizontal swipes move the carousel, vertical ones scroll the page */
@media (hover: none) {
  .carousel { touch-action: pan-y; }
}

/* Homepage corner label sits too low for the scroll-reveal trigger; it fades in with the page */
.js .hero--full .hero__meta { opacity: 0; transition: opacity 1.2s ease 0.4s, color 1.2s ease; }
.is-loaded .hero--full .hero__meta { opacity: 1; }

/* Homepage footer: a curtain that rises over the pinned hero. It lives inside
   .home-stage (so the hero stays stuck behind it) and its top edge fades in
   through a soft gradient rather than a hard line. */
.site-footer--curtain {
  position: relative;
  z-index: 5;
  border-top: 0;
  /* Same textured black as the rest of the site, fixed to the screen so it lines up */
  background-color: var(--bg);
  background-image: var(--texture);
  background-size: var(--texture-size);
  background-repeat: var(--texture-repeat);
  background-position: center;
  background-attachment: fixed;
}
.site-footer--curtain::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: clamp(140px, 24vh, 260px);
  /* The footer's own texture, faded in, so there's no seam where it starts */
  background-color: var(--bg);
  background-image: var(--texture);
  background-size: var(--texture-size);
  background-repeat: var(--texture-repeat);
  background-position: center;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 55%, #000);
          mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 55%, #000);
  pointer-events: none;
}