/* ==========================================================================
   NOIR ÉLIXIR — Global stylesheet
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typography primitives
   04. Layout primitives
   05. Components
   06. Sections
   07. Footer
   08. Responsive
   09. Accessibility & print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --c-noir: #0a0908;
  --c-charcoal: #141312;
  --c-charcoal-2: #1c1a18;
  --c-charcoal-3: #262321;
  --c-champagne: #c9a86a;
  --c-champagne-lt: #e0c894;
  --c-ivory: #f2ede4;
  --c-burgundy: #4a0f1c;
  --c-burgundy-lt: #6d1a2a;

  /* ---- Semantic colour roles ------------------------------------------- */
  --bg: var(--c-noir);
  --bg-raised: var(--c-charcoal);
  --bg-inset: var(--c-charcoal-2);
  --text: var(--c-ivory);
  --text-muted: rgb(242 237 228 / 0.62);
  --text-faint: rgb(242 237 228 / 0.38);
  --accent: var(--c-champagne);
  --accent-soft: rgb(201 168 106 / 0.22);
  --line: rgb(242 237 228 / 0.12);
  --line-strong: rgb(242 237 228 / 0.24);
  --scrim: linear-gradient(
    to top,
    rgb(10 9 8 / 0.96) 0%,
    rgb(10 9 8 / 0.72) 34%,
    rgb(10 9 8 / 0.34) 68%,
    rgb(10 9 8 / 0.6) 100%
  );

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — min at 360px, max at 1440px */
  --fs-xs: clamp(0.68rem, 0.63rem + 0.2vw, 0.78rem);
  --fs-sm: clamp(0.8rem, 0.76rem + 0.18vw, 0.9rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.24vw, 1.08rem);
  --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-lg: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --fs-xl: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-2xl: clamp(2.6rem, 1.4rem + 5.2vw, 6rem);
  --fs-3xl: clamp(3.6rem, 1rem + 11vw, 11rem);

  --lh-tight: 0.92;
  --lh-snug: 1.14;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.2em;
  --ls-widest: 0.38em;

  /* ---- Spacing scale (fluid) ------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.14vw, 0.6rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.24vw, 0.9rem);
  --space-sm: clamp(1rem, 0.93rem + 0.32vw, 1.2rem);
  --space-md: clamp(1.5rem, 1.4rem + 0.48vw, 1.8rem);
  --space-lg: clamp(2rem, 1.77rem + 1.14vw, 2.75rem);
  --space-xl: clamp(3rem, 2.54rem + 2.27vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3.57rem + 4.55vw, 8rem);
  --space-3xl: clamp(6rem, 4.15rem + 9.09vw, 12rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 84rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);
  --header-h: clamp(4.5rem, 4rem + 2vw, 6rem);

  /* ---- Effects --------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-soft: 0 2.4rem 5rem rgb(0 0 0 / 0.55);
  --shadow-deep: 0 3rem 7rem rgb(0 0 0 / 0.7);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur-mid: 520ms;
  --dur-slow: 900ms;

  --z-base: 1;
  --z-header: 60;
  --z-nav: 70;
  --z-cursor: 90;
  --z-preloader: 100;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

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

/* Lenis drives the scroll; native smooth behaviour would fight it. */
html.lenis,
html.lenis body {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-normal);
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Film grain — sits above content, never intercepts input. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.has-js body.is-loading {
  overflow: hidden;
}

body.nav-open {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

address {
  font-style: normal;
}

::selection {
  background-color: var(--c-burgundy);
  color: var(--c-ivory);
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Anchor targets clear the fixed header. */
.anchor {
  display: block;
  position: relative;
  top: calc(var(--header-h) * -1);
}

:target {
  scroll-margin-top: var(--header-h);
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--c-ivory);
  color: var(--c-noir);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   03. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

em {
  font-style: italic;
  color: var(--accent);
}

p {
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--space-3xl);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--space-2xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* For heads nested inside a section that already owns the rhythm below. */
.section__head--flush {
  margin-bottom: 0;
}

.section__head .eyebrow {
  margin-bottom: var(--space-md);
}

.section__title {
  font-size: var(--fs-xl);
}

.section__head .lede {
  margin-top: var(--space-md);
}

/* ==========================================================================
   05. COMPONENTS
   ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-lg);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-fg);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}

.btn--gold {
  --btn-border: var(--accent);
  --btn-fg: var(--accent);
}

/* The gold fill itself is the wipe in animations.css. */
.btn--gold:hover,
.btn--gold:focus-visible {
  --btn-fg: var(--c-noir);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-border: var(--c-ivory);
  --btn-bg: rgb(242 237 228 / 0.06);
}

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

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  transition: background-color var(--dur-mid) var(--ease-out),
    backdrop-filter var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background-color: rgb(10 9 8 / 0.92);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
}

.header__brand {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  line-height: 1;
}

.header__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.header__brand-sub {
  font-size: 0.6rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Navigation -------------------------------------------------------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  margin-right: calc(var(--space-2xs) * -1);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text);
}

.nav-toggle__bars {
  position: relative;
  width: 1.5rem;
  height: 0.5rem;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(0.25rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-0.25rem) rotate(-45deg);
}

/* ---- Preloader --------------------------------------------------------- */

/* Only ever shown when scripting can also dismiss it — otherwise the curtain
   would stay up forever and the page would be unreachable. */
.preloader {
  display: none;
}

.has-js .preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-content: center;
  gap: var(--space-md);
  background-color: var(--c-noir);
  text-align: center;
}

.preloader__word {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.preloader__meta {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}

.preloader.is-done {
  visibility: hidden;
  pointer-events: none;
}

/* ---- Custom cursor ----------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  display: none;
  pointer-events: none;
}

.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor__dot {
  width: 5px;
  height: 5px;
  background-color: var(--accent);
}

.cursor__ring {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--accent-soft);
  transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Enabled by cursor.js only where a fine pointer exists. */
.cursor.is-active {
  display: block;
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button {
  cursor: none;
}

.cursor.is-hovering .cursor__ring {
  width: 4.5rem;
  height: 4.5rem;
  border-color: var(--accent);
  background-color: rgb(201 168 106 / 0.08);
}

/* ==========================================================================
   06. SECTIONS
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
}

/* Cinematic light is composed in CSS rather than baked into a photograph, so
   the hero stays crisp at any viewport and needs no oversized asset. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(38% 46% at 72% 42%, rgb(201 168 106 / 0.2) 0%, transparent 68%),
    radial-gradient(46% 40% at 18% 88%, rgb(74 15 28 / 0.42) 0%, transparent 72%),
    radial-gradient(90% 90% at 50% 0%, rgb(28 26 24 / 0.9) 0%, var(--c-noir) 62%);
}

.hero__inner {
  display: grid;
  gap: var(--space-2xl);
  width: 100%;
}

.hero__content {
  position: relative;
  z-index: var(--z-base);
}

.hero__media {
  position: relative;
  display: flex;
  justify-content: center;
}

/* A halo behind the flacon reads as studio backlight. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgb(201 168 106 / 0.16) 0%, transparent 70%);
}

.hero__bottle {
  width: 100%;
  max-width: 24rem;
  height: auto;
  object-fit: contain;
}

.hero__title {
  margin-block: var(--space-md) var(--space-lg);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hero__title-accent {
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Masks for the GSAP line reveal wired up later. */
.line {
  display: block;
  overflow: hidden;
}

.line__inner {
  display: block;
}

.hero__tagline {
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero__scroll-label {
  font-size: 0.6rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-faint);
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

/* ---- Manifesto --------------------------------------------------------- */

.manifesto__grid {
  display: grid;
  gap: var(--space-2xl);
}

.manifesto__body {
  display: grid;
  gap: var(--space-md);
  max-width: 40rem;
  color: var(--text-muted);
}

.stats {
  display: grid;
  gap: var(--space-lg);
  border-top: 1px solid var(--line);
  padding-top: var(--space-lg);
}

.stats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.stats__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.stats__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--accent);
}

.stats__unit {
  font-size: 0.5em;
  letter-spacing: var(--ls-wide);
}

/* ---- Notes ------------------------------------------------------------- */

.notes__list {
  display: grid;
  gap: var(--space-xl);
}

.note-card {
  display: grid;
  gap: var(--space-md);
}

.note-card__figure {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-inset);
  aspect-ratio: 4 / 5;
}

/* Transform is left to GSAP's scroll zoom; hover only touches the grade. */
.note-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) brightness(0.8);
  transition: filter var(--dur-slow) var(--ease-out);
}

.note-card:hover .note-card__figure img,
.note-card:focus-within .note-card__figure img {
  filter: grayscale(0) brightness(1.05);
}

.note-card__index {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--accent);
}

.note-card__title {
  margin-top: var(--space-2xs);
  font-size: var(--fs-lg);
}

.note-card__origin {
  margin-top: var(--space-3xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.note-card__text {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ---- Pull quote -------------------------------------------------------- */

.quote {
  background-color: var(--bg-raised);
  text-align: center;
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.quote__cite {
  margin-top: var(--space-lg);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.quote__cite span {
  color: var(--text-faint);
}

/* ---- Collection -------------------------------------------------------- */

.collection__grid {
  display: grid;
  gap: var(--space-xl);
}

.product__link {
  display: block;
}

.product__figure {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-inset);
  aspect-ratio: 3 / 4;
}

.product__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86);
  transition: filter var(--dur-slow) var(--ease-out);
}

.product__link:hover .product__figure img,
.product__link:focus-visible .product__figure img {
  filter: brightness(1.06);
}

.product__name {
  transition: color var(--dur-mid) var(--ease-out);
}

.product__link:hover .product__name,
.product__link:focus-visible .product__name {
  color: var(--accent);
}

.product__meta {
  display: grid;
  gap: var(--space-3xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  margin-top: var(--space-md);
}

.product__name {
  font-size: var(--fs-md);
  letter-spacing: var(--ls-normal);
}

.product__notes {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.product__price {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--accent);
}

.product__price span {
  color: var(--text-faint);
}

/* ---- Atelier ----------------------------------------------------------- */

.atelier {
  background-color: var(--bg-raised);
}

.atelier__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.atelier__figure {
  overflow: hidden;
  background-color: var(--bg-inset);
  aspect-ratio: 4 / 5;
}

.atelier__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  counter-reset: step;
}

.process__step {
  position: relative;
  padding-left: var(--space-xl);
  border-top: 1px solid var(--line);
  padding-top: var(--space-md);
  counter-increment: step;
}

.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--space-md);
  left: 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}

.process__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2xs);
}

.process__step p {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

/* ---- Invitation -------------------------------------------------------- */

.invitation {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.invitation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 0%, rgb(74 15 28 / 0.5) 0%, transparent 70%);
}

.signup {
  display: grid;
  gap: var(--space-sm);
  max-width: 32rem;
  margin-inline: auto;
  text-align: left;
}

.signup__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.signup__input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.signup__input::placeholder {
  color: var(--text-faint);
}

.signup__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.signup__input[aria-invalid="true"] {
  border-bottom-color: var(--c-burgundy-lt);
}

.signup__submit {
  justify-self: start;
}

.signup__note {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-faint);
}

.signup__note.is-error {
  color: var(--c-burgundy-lt);
}

.signup__note.is-success {
  color: var(--accent);
}

/* ==========================================================================
   07. FOOTER
   ========================================================================== */

.footer {
  padding-block: var(--space-2xl) var(--space-lg);
  border-top: 1px solid var(--line);
  background-color: var(--c-noir);
}

.footer__top {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: rgb(242 237 228 / 0.14);
}

.footer__tagline {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}

.footer__heading {
  margin-bottom: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.footer__list {
  display: grid;
  gap: var(--space-2xs);
}

.footer__list a,
.footer__address {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.footer__list a {
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__list a:hover,
.footer__list a:focus-visible,
.footer__address a:hover,
.footer__address a:focus-visible {
  color: var(--text);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-faint);
}

.footer__legal {
  display: flex;
  gap: var(--space-md);
}

/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */

/* ---- Small tablet and up ---------------------------------------------- */
@media (min-width: 40em) {
  .notes__list,
  .collection__grid,
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats__item {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2xs);
  }

  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Desktop ---------------------------------------------------------- */
@media (min-width: 64em) {
  .manifesto__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: end;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .stats__item {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
  }

  .stats__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .notes__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .collection__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .atelier__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
    align-items: center;
  }

  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }

  /* Safe here only because the desktop nav is not a fixed overlay —
     backdrop-filter would otherwise become its containing block. */
  .header.is-scrolled {
    background-color: rgb(10 9 8 / 0.72);
    backdrop-filter: blur(14px) saturate(140%);
  }

  .hero__bottle {
    max-width: none;
    max-height: min(76vh, 34rem);
    width: auto;
  }
}

/* ---- Mobile navigation ------------------------------------------------- */
@media (max-width: 63.999em) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav);
    display: grid;
    place-content: center;
    background-color: rgb(10 9 8 / 0.98);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-mid) var(--ease-out),
      visibility var(--dur-mid) var(--ease-out);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    gap: var(--space-lg);
    text-align: center;
  }

  .nav__link {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-wide);
    color: var(--text);
    text-transform: uppercase;
  }

  .nav__link::after {
    display: none;
  }

  /* The toggle must stay tappable above the open overlay. */
  .nav-toggle {
    position: relative;
    z-index: calc(var(--z-nav) + 1);
  }
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 39.999em) {
  .header__brand-sub {
    display: none;
  }

  .nav-toggle__label {
    display: none;
  }

  /* On phones the flacon goes full-bleed behind the type, so the hero stays
     exactly one screen tall instead of pushing the product shot past the fold. */
  .hero {
    align-items: flex-end;
  }

  /* Overscanned top and bottom so the parallax drift never exposes an edge. */
  .hero__media {
    position: absolute;
    inset: -8% 0;
    z-index: -1;
  }

  .hero__media::before {
    display: none;
  }

  /* Graded so the type sits on near-solid black and the flacon survives only
     as a silhouette — its own label must not compete with the headline. */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      var(--c-noir) 36%,
      rgb(10 9 8 / 0.94) 54%,
      rgb(10 9 8 / 0.58) 78%,
      rgb(10 9 8 / 0.72) 100%
    );
  }

  .hero__bottle {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 20%;
  }

  .hero__content {
    padding-bottom: var(--space-lg);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__scroll {
    display: none;
  }

  .footer__bottom {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   09. ACCESSIBILITY & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor {
    display: none !important;
  }
}

@media print {
  body::after,
  .header,
  .cursor,
  .preloader,
  .hero__scroll {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}