/* ==========================================================================
   NOVIQUE — PK STUDIO
   Design system + components
   --------------------------------------------------------------------------
   Palette taken directly from the brand sheet:
     #0B0B0D  ink        #1A1A1E  ink soft
     #6E6E73  muted      #D9D9DC  hairline
     #BFA67A  gold accent
   Background is white throughout, with a single black band used as contrast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --ink:        #0B0B0D;
  --ink-soft:   #1A1A1E;
  --muted:      #6E6E73;
  --muted-2:    #8E8E94;
  --line:       #E8E8EA;
  --line-strong:#D9D9DC;
  --gold:       #BFA67A;
  --gold-soft:  #D6C4A0;

  --bg:         #FFFFFF;
  --bg-soft:    #FAFAFA;
  --bg-tint:    #F4F4F5;

  --font-display: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: 1440px;
  --gutter: clamp(20px, 4.5vw, 60px);
  --header-h: 74px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 220ms var(--ease);
  --t-med: 420ms var(--ease);
  --t-slow: 900ms var(--ease);

  --radius: 0px;          /* the brand is sharp-edged — kept deliberately square */
  --shadow-soft: 0 24px 60px -32px rgba(11, 11, 13, 0.35);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

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

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

/* Utility icon-stroke style for all inline SVG icons */
.icon-btn svg, .btn__arrow, .subscribe__btn svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   3. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: 0.06em;
  font-weight: 200;
}

.section-lead {
  color: var(--muted);
  max-width: 54ch;
  margin-top: 16px;
  font-size: 15px;
}

.section {
  padding-block: clamp(64px, 9vw, 130px);
}

.section--tight { padding-block: clamp(48px, 6vw, 88px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 34px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), opacity var(--t-fast);
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--primary:not(:disabled):hover { --btn-bg: var(--ink-soft); --btn-bd: var(--ink-soft); }

.btn--ghost:not(:disabled):hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.4); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--minimal {
  border-color: transparent;
  padding-inline: 8px;
  border-bottom-color: var(--ink);
}

.btn--block { width: 100%; }
.btn--lg { padding: 18px 44px; }

.btn__arrow { width: 16px; height: 16px; transition: transform var(--t-fast); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--t-fast), gap var(--t-fast);
}
.link-arrow:hover { border-color: var(--ink); gap: 16px; }

.link-quiet {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.link-quiet:hover { color: var(--ink); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  transition: opacity var(--t-fast);
  position: relative;
}
.icon-btn:hover { opacity: 0.6; }

/* --------------------------------------------------------------------------
   5. Announcement + header
   -------------------------------------------------------------------------- */

/* The header is injected into #site-header, but a sticky element can only
   stick within its own parent's box — and that wrapper is only as tall as
   the header itself, so the header would scroll away immediately.
   `display: contents` removes the wrapper's box so the announce bar and
   header become direct flow children of <body>, and the header can stay
   stuck for the length of the page. */
#site-header { display: contents; }

.announce {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 10px var(--gutter);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -18px rgba(11,11,13,.6);
}

/* Over the dark hero the header takes the hero's own ground rather than
   going transparent — it sits *above* the hero in flow, not on top of it,
   so transparency would just show the white page. Announce bar, header and
   hero then read as one dark block. Reverts to the white header the moment
   the hero scrolls past (see wireHeaderScroll in ui.js). */
.header--over {
  background: #17171a;
  backdrop-filter: none;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  color: #efe6d6;
}
.header--over .nav-link,
.header--over .icon-btn,
.header--over .brand { color: rgba(238, 230, 214, 0.86); }
.header--over .brand__mark { color: var(--gold-soft); }
.header--over .brand__sub { color: rgba(226, 214, 192, 0.5); }
.header--over .nav-link::after { background: currentColor; }
.header--over .bag-count { background: var(--gold); color: #17171a; }

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  gap: 16px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.nav-link {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 6px;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.header__burger { display: none; margin-left: -10px; }

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: center;
}
.brand__mark { width: 30px; height: 30px; color: var(--ink); flex: none; }
.brand__text { display: flex; flex-direction: column; align-items: center; }
.brand__word {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1;
  text-indent: 0.34em;
}
.brand__sub {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  text-indent: 0.44em;
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.icon-btn--bag { margin-right: -8px; }

.bag-count {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 17px; height: 17px;
  display: grid; place-items: center;
  padding: 0 4px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.bag-count.is-filled { opacity: 1; transform: scale(1); }

/* Search bar */
.header__search { border-top: 1px solid var(--line); background: var(--bg); }
.search-form { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.search-form__input {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.search-form__input::placeholder { color: var(--muted-2); }
.search-form__input:focus { outline: none; }

/* --------------------------------------------------------------------------
   6. Mobile navigation
   -------------------------------------------------------------------------- */

.mobile-nav { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.mobile-nav.is-open { pointer-events: auto; }

.mobile-nav__overlay {
  position: absolute; inset: 0;
  background: rgba(11, 11, 13, 0.35);
  opacity: 0;
  transition: opacity var(--t-med);
}
.mobile-nav.is-open .mobile-nav__overlay { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  inset-block: 0; left: 0;
  width: min(400px, 88vw);
  background: var(--bg);
  padding: 22px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--t-med);
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 44px;
}
.mobile-nav__mark { width: 30px; height: 30px; color: var(--ink); }

.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__tag {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Preview-mode banner
   -------------------------------------------------------------------------- */

/* A floating notice rather than a banner in the flow — it must not break up
   the announce bar / header / hero block on the homepage, and it disappears
   entirely once Shopify is connected. */
.demo-bar {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 120;
  max-width: min(420px, calc(100vw - 36px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.demo-bar strong { color: var(--ink); font-weight: 500; }
.demo-bar code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--line-strong);
  padding: 1px 5px;
}
.demo-bar__close {
  margin-left: auto;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

/* The homepage hero is the one dark surface on the site — the logo reveal is
   built on light: a spark, a gold aura, a specular sweep across the metallic
   mark. None of that reads on white, so the section carries its own ground
   and the page returns to white immediately below it.

   Every animated value below arrives as a custom property written by
   js/hero-reveal.js. The defaults here are the *finished* frame, so the hero
   still looks right if JavaScript never runs. */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: min(92vh, 900px);
  padding-block: clamp(60px, 10vw, 120px);
  overflow: hidden;
}

.hero--reveal {
  --hero-bg:   #17171a;
  --hero-deep: #0a0a0c;
  --hero-warm: rgba(214, 176, 110, 0.16);
  --hero-gold: #e6c88f;
  --mark-size: clamp(150px, 21vw, 360px);

  /* Finished-frame defaults (also the no-JS state) */
  --spark: 0; --spark-glow: 0; --spark-spread: 0; --spark-scale: 1;
  --ring-scale: 1.9; --ring-op: 0;
  --mark-op: 1; --mark-scale: 1; --mark-rot: 0; --mark-blur: 0;
  --sweep: 372; --sweep-tail: 358; --glow: 16;
  --band: 124; --star: 0; --star-len: 1;
  --aura-op: 0.5; --aura-rot: 0;
  --track: 0.3; --word-op: 1; --word-y: 0; --rule: 1; --tag-op: 1;
  --ui-op: 1; --ui-y: 0;

  background: var(--hero-bg);
  color: #efe6d6;
}

/* Ambient field: a warm pool behind the mark, deepening at the foot */
.hero__field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 50% 43%, var(--hero-warm) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(120% 120% at 50% 120%, var(--hero-deep) 30%, rgba(0,0,0,0) 100%);
}

.hero__inner { position: relative; z-index: 2; }

/* --- the reveal stage ----------------------------------------------------- */

.reveal__stage {
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
  margin: 0 auto clamp(26px, 4vw, 52px);
  display: grid;
  place-items: center;
}

.reveal__stage > * {
  position: absolute;
  left: 50%; top: 50%;
}

/* Slow rotating conic aura */
.reveal__aura {
  width: calc(var(--mark-size) * 2.75);
  height: calc(var(--mark-size) * 2.75);
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--aura-op);
  transform: translate(-50%, -50%) rotate(calc(var(--aura-rot) * 1deg));
  background: conic-gradient(from 0deg,
    rgba(230,200,143,0.10), rgba(0,0,0,0) 28%,
    rgba(230,200,143,0.07) 52%, rgba(0,0,0,0) 78%, rgba(230,200,143,0.10));
  filter: blur(52px);
}

/* Shockwave ring */
.reveal__ring {
  width: calc(var(--mark-size) * 0.85);
  height: calc(var(--mark-size) * 0.85);
  border-radius: 50%;
  border: 1px solid rgba(230, 200, 143, var(--ring-op));
  opacity: var(--ring-op);
  transform: translate(-50%, -50%) scale(var(--ring-scale));
}

/* The igniting point of light */
.reveal__spark {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff7e6;
  opacity: var(--spark);
  box-shadow: 0 0 calc(var(--spark-glow) * 1px) calc(var(--spark-spread) * 1px)
              rgba(240, 214, 160, 0.75);
  transform: translate(-50%, -50%) scale(var(--spark-scale));
}

/* The mark: outer node carries the glow and the bloom transform… */
.reveal__mark {
  width: var(--mark-size);
  height: var(--mark-size);
  opacity: var(--mark-op);
  transform: translate(-50%, -50%)
             scale(var(--mark-scale)) rotate(calc(var(--mark-rot) * 1deg));
  filter: blur(calc(var(--mark-blur) * 1px))
          drop-shadow(0 0 calc(var(--glow) * 1px) rgba(232, 198, 138, 0.45));
}

/* …and the inner node carries the conic mask that unfurls it. These must
   stay on separate elements — see the note in index.html. */
.reveal__clip {
  position: absolute;
  inset: 0;
  -webkit-mask-image: conic-gradient(from -95deg, #000 0deg,
    #000 calc(var(--sweep-tail) * 1deg), rgba(0,0,0,0) calc(var(--sweep) * 1deg),
    rgba(0,0,0,0) 360deg);
  mask-image: conic-gradient(from -95deg, #000 0deg,
    #000 calc(var(--sweep-tail) * 1deg), rgba(0,0,0,0) calc(var(--sweep) * 1deg),
    rgba(0,0,0,0) 360deg);
}

.reveal__mark img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* A brightened copy of the mark, revealed by a travelling band —
   this is what reads as light moving across metal. */
.reveal__mark-spec {
  mix-blend-mode: screen;
  filter: brightness(2.6) contrast(1.05);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(102deg,
    rgba(0,0,0,0) calc(var(--band) * 1% - 17%),
    rgba(0,0,0,0.95) calc(var(--band) * 1%),
    rgba(0,0,0,0) calc(var(--band) * 1% + 17%));
  mask-image: linear-gradient(102deg,
    rgba(0,0,0,0) calc(var(--band) * 1% - 17%),
    rgba(0,0,0,0.95) calc(var(--band) * 1%),
    rgba(0,0,0,0) calc(var(--band) * 1% + 17%));
}

/* Centre glint: two crossing streaks */
.reveal__glint {
  opacity: var(--star);
  transform: translate(-50%, -50%);
}
.reveal__glint i {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--mark-size) * 0.375 * var(--star-len));
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(255,246,226,0) 0%, #fff8ea 50%, rgba(255,246,226,0) 100%);
  filter: blur(0.4px);
}
.reveal__glint i:nth-child(1) { transform: translate(-50%, -50%); }
.reveal__glint i:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }

/* --- lockup --------------------------------------------------------------- */

.hero--reveal .hero__word,
.hero--reveal .hero__sub,
.hero--reveal .hero__divider,
.hero--reveal .hero__tag,
.hero--reveal .hero__actions { animation: none; }

.hero__word {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(38px, 8.4vw, 104px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  animation: fadeUp 1.3s var(--ease) 0.15s both;
}

.hero--reveal .hero__word {
  letter-spacing: calc(var(--track) * 1em);
  text-indent: calc(var(--track) * 1em);
  opacity: var(--word-op);
  transform: translateY(calc(var(--word-y) * 1px));
  color: #f3e8d2;
  text-shadow: 0 0 30px rgba(226, 196, 140, 0.35);
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(14px, 2vw, 22px);
  animation: fadeUp 1.3s var(--ease) 0.28s both;
}

.hero--reveal .hero__sub {
  color: rgba(226, 214, 192, 0.6);
  opacity: var(--word-op);
  transform: translateY(calc(var(--word-y) * 1px));
}

.hero__divider {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: clamp(28px, 4vw, 44px) auto;
  transform-origin: center;
  animation: lineIn 1.2s var(--ease) 0.4s both;
}

/* The rule draws out from the centre as a gold hairline */
.hero--reveal .hero__divider {
  width: clamp(150px, 21vw, 300px);
  background: linear-gradient(90deg,
    rgba(230,200,143,0) 0%, var(--hero-gold) 50%, rgba(230,200,143,0) 100%);
  transform: scaleX(var(--rule));
}

.hero__tag {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  animation: fadeUp 1.3s var(--ease) 0.48s both;
}

.hero--reveal .hero__tag {
  color: rgba(226, 214, 192, 0.66);
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  opacity: var(--tag-op);
}

.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(32px, 4.5vw, 52px);
  animation: fadeUp 1.3s var(--ease) 0.6s both;
}

.hero--reveal .hero__actions {
  opacity: var(--ui-op);
  transform: translateY(calc(var(--ui-y) * 1px));
}

/* Once the reveal has finished, JS stops and CSS keeps the mark breathing. */
.hero--reveal.is-settled .reveal__mark { animation: markBreathe 7s ease-in-out infinite; }

/* The negative delay starts the spin at whatever angle the reveal left the
   aura on, so the hand-off from JS to CSS doesn't snap it back to zero. */
.hero--reveal.is-settled .reveal__aura {
  animation: auraSpin 52s linear infinite;
  animation-delay: calc(var(--aura-rot, 0) / 360 * -52s);
}

@keyframes markBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.014); }
}
@keyframes auraSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes markIn {
  from { opacity: 0; transform: scale(0.82) rotate(-24deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lineIn {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   9. Marquee
   -------------------------------------------------------------------------- */

.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 18px;
  background: var(--bg);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 38s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.marquee__dot { width: 4px; height: 4px; background: var(--gold); flex: none; transform: rotate(45deg); }

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

/* --------------------------------------------------------------------------
   10. Product grid + cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(18px, 2.2vw, 34px) clamp(14px, 1.6vw, 26px);
}

.card { position: relative; }
.card__frame { position: relative; overflow: hidden; }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--bg-tint);
  overflow: hidden;
}

.card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Scale runs through a custom property so the reveal over-scale and the
     hover zoom can hand off to each other without one clobbering the other. */
  transform: scale(var(--img-scale, 1));
  transition: transform var(--t-slow), opacity var(--t-med);
}
.card__img--alt { opacity: 0; }

.card:hover .card__img { --img-scale: 1.045; }
.card:hover .card__img--alt { opacity: 1; }

.card.is-sold-out .card__img { opacity: 0.55; }

.card__flag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.card__flag--sale { background: var(--ink); color: #fff; }

/* Quick-add sits over the bottom of the image */
.card__quick {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.card:hover .card__quick,
.card:focus-within .card__quick { opacity: 1; transform: none; }
.card__quick:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.card__quick.is-busy { opacity: 0.6; }

.card__body { padding-top: 16px; }

.card__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card__title a { background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-med); }
.card__title a:hover { background-size: 100% 1px; }

.card__type {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.card__price {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.card__price s { color: var(--muted-2); font-size: 12px; }

/* Skeletons */
.skeleton {
  background: linear-gradient(100deg, var(--bg-tint) 20%, #ececee 40%, var(--bg-tint) 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton--line { height: 11px; margin-top: 10px; }
.card--skeleton .card__media { background: var(--bg-tint); }
@keyframes shimmer { to { background-position: -120% 0; } }

.ph { display: block; width: 100%; height: 100%; background: var(--bg-tint); }

/* Empty / error states */
.state {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 20px;
  border: 1px solid var(--line);
}
.state__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.state .btn { margin-top: 22px; }

/* --------------------------------------------------------------------------
   11. Statement band (the single dark section)
   -------------------------------------------------------------------------- */

.band {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(80px, 12vw, 168px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.band__mark {
  width: clamp(48px, 6vw, 74px);
  color: var(--gold);
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.band__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(24px, 4.4vw, 56px);
  letter-spacing: 0.08em;
  line-height: 1.25;
  max-width: 26ch;
  margin-inline: auto;
}
.band__title em { font-style: normal; color: var(--gold); }
.band__body {
  color: rgba(255,255,255,0.62);
  max-width: 52ch;
  margin: 26px auto 0;
}
.band__actions { margin-top: 40px; }

/* --------------------------------------------------------------------------
   12. Collections tiles
   -------------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--bg-tint);
  overflow: hidden;
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--img-scale, 1));
  transition: transform var(--t-slow);
}
.tile:hover img { --img-scale: 1.05; }
.tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,0.66) 0%, rgba(11,11,13,0.10) 34%, transparent 58%);
}
.tile__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tile__name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tile__go {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.tile:hover .tile__go { opacity: 1; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   13. Values / editorial columns
   -------------------------------------------------------------------------- */

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--line);
}
.value {
  padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.value:last-child { border-right: 0; }
.value__num {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--gold);
  margin-bottom: 20px;
}
.value__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.value__body { color: var(--muted); font-size: 14px; }

/* Split editorial */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.split__media {
  aspect-ratio: 4 / 5;
  background: var(--bg-tint);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__watermark { width: 34%; color: var(--line-strong); }

/* --------------------------------------------------------------------------
   14. Page header (shop / about / contact)
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(48px, 6.5vw, 96px) clamp(28px, 3.5vw, 48px);
  text-align: center;
}
.page-head__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 6vw, 76px);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
}
.page-head__lead { color: var(--muted); margin-top: 16px; }

.breadcrumb {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: center;
  padding-block: 20px;
}
.breadcrumb a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   15. Shop filter bar
   -------------------------------------------------------------------------- */

.filters {
  position: sticky;
  /* +1px for the header's own bottom border, otherwise a hairline of the
     product grid shows between the two sticky bars. */
  top: calc(var(--header-h) + 1px);
  z-index: 60;
  background: var(--bg);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.filters__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 12px;
}
.filters__pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding-block: 2px;
}
.filters__pills::-webkit-scrollbar { display: none; }

.pill {
  flex: none;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pill:hover { border-color: var(--ink); }
.pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.sort {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.sort__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.sort__select {
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line-strong);
}

.result-count {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.load-more { display: grid; place-items: center; margin-top: clamp(40px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   16. Product detail page
   -------------------------------------------------------------------------- */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 110px);
}

.gallery { display: grid; gap: 12px; }
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-tint);
  overflow: hidden;
}
.gallery__main img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
}
.thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-tint);
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--ink); }

.pdp__info { position: sticky; top: calc(var(--header-h) + 28px); }

.pdp__type {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pdp__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: 0.08em;
}
.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
}
.pdp__price s { color: var(--muted-2); font-size: 15px; }
.pdp__price .save {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-soft); padding: 3px 9px;
}
.pdp__tax { font-size: 12px; color: var(--muted); margin-top: 6px; }

.pdp__desc {
  margin-top: 26px;
  color: var(--muted);
  font-size: 14.5px;
}
.pdp__desc p + p { margin-top: 12px; }
.pdp__desc ul { margin-top: 12px; }
.pdp__desc li { padding-left: 18px; position: relative; }
.pdp__desc li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg);
}

.option { margin-top: 30px; }
.option__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.option__name {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.option__value { font-size: 12px; color: var(--muted); }
.option__values { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  min-width: 52px;
  padding: 12px 16px;
  background: none;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.swatch:hover { border-color: var(--ink); }
.swatch.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.swatch.is-unavailable {
  color: var(--muted-2);
  border-style: dashed;
  text-decoration: line-through;
}

.pdp__buy { margin-top: 34px; display: flex; gap: 12px; align-items: stretch; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  flex: none;
}
.qty__btn {
  width: 44px; height: 100%;
  min-height: 50px;
  background: none; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1;
  color: var(--ink);
  transition: background var(--t-fast);
}
.qty__btn:hover { background: var(--bg-tint); }
.qty__value {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
}
.qty--sm { border-color: var(--line); margin-top: 10px; }
.qty--sm .qty__btn { width: 30px; min-height: 30px; font-size: 13px; }
.qty--sm .qty__value { min-width: 26px; font-size: 12px; }

.pdp__buy .btn { flex: 1; }

.pdp__secure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.pdp__secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.accordion { margin-top: 40px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  font-size: 16px;
  color: var(--muted);
  transition: transform var(--t-fast);
}
.accordion details[open] summary::after { content: '−'; }
.accordion__body { padding-bottom: 20px; color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------------------
   17. Basket drawer
   -------------------------------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.drawer.is-open { pointer-events: auto; }

.drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(11, 11, 13, 0.4);
  opacity: 0;
  transition: opacity var(--t-med);
}
.drawer.is-open .drawer__overlay { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0; right: 0;
  width: min(440px, 92vw);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-med);
  box-shadow: var(--shadow-soft);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 400;
}
.drawer__count { color: var(--muted); }

.drawer__body { flex: 1; overflow-y: auto; padding: 6px 22px; }
.drawer__foot { padding: 20px 22px 26px; border-top: 1px solid var(--line); }

.drawer__empty { text-align: center; padding: clamp(48px, 12vh, 110px) 10px; }
.drawer__empty-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.drawer__empty .btn { margin-top: 24px; }

.cart-lines > li + li { border-top: 1px solid var(--line); }
.cart-line {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  padding: 18px 0;
}
.cart-line__media { display: block; aspect-ratio: 4/5; background: var(--bg-tint); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cart-line__variant { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cart-line__price { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cart-line__end { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.cart-line__total { font-family: var(--font-display); font-size: 13px; }

.cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cart-subtotal__value { font-size: 17px; letter-spacing: 0.04em; }
.cart-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; margin-bottom: 16px; }
.cart-note--flag {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  padding: 10px 12px;
  margin-top: 12px;
  line-height: 1.5;
}
.cart-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.drawer__foot .btn + .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   18. Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 300;
  background: var(--ink);
  color: #fff;
  padding: 13px 24px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone='error'] { background: #7a1f1f; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding-top: clamp(48px, 6vw, 88px);
  margin-top: clamp(48px, 6vw, 96px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.footer__mark { width: 34px; color: var(--ink); margin-bottom: 18px; }
.footer__word {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
}
.footer__sub {
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  text-indent: 0.42em;
}
.footer__tag {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 24ch;
}

.footer__title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 13.5px; color: var(--muted); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--ink); }

.footer__blurb { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

.subscribe {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
  max-width: 340px;
}
.subscribe__input {
  flex: 1;
  border: 0; background: none;
  padding: 10px 0;
  font-size: 13.5px;
}
.subscribe__input:focus { outline: none; }
.subscribe__btn {
  background: none; border: 0; cursor: pointer;
  padding: 8px; color: var(--ink);
  transition: transform var(--t-fast);
}
.subscribe__btn:hover { transform: translateX(3px); }
.subscribe__note { font-size: 12px; color: var(--muted); margin-top: 10px; max-width: 340px; }

.footer__social { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.footer__social a {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer__social a:hover { color: var(--ink); border-color: var(--ink); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-block: 20px 26px;
  font-size: 11.5px;
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   20. Editorial / long-form (about, contact)
   -------------------------------------------------------------------------- */

.prose { max-width: 66ch; }
.prose p + p { margin-top: 18px; }
.prose h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.08em;
  margin-top: 44px;
  margin-bottom: 14px;
}
.prose p { color: var(--muted); }

.pull {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(22px, 3.2vw, 40px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--ink);
  border-left: 1px solid var(--gold);
  padding-left: clamp(20px, 3vw, 40px);
  margin-block: clamp(36px, 5vw, 64px);
  max-width: 24ch;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.info-card { border-top: 1px solid var(--line); padding-top: 22px; }
.info-card h3 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.info-card p { color: var(--muted); font-size: 14px; }
.info-card a { border-bottom: 1px solid var(--line-strong); }

.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  border: 1px solid var(--line-strong);
  background: none;
  padding: 13px 15px;
  font-size: 14px;
  transition: border-color var(--t-fast);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }

/* --------------------------------------------------------------------------
   21. Reveal on scroll
   -------------------------------------------------------------------------- */

/* Base: everything fades up unless a variant says otherwise.
   `--reveal-delay` is set by js/scroll.js from [data-stagger] / [data-delay]. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 950ms var(--ease), transform 950ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-reveal='fade']  { transform: none; }
[data-reveal='left']  { transform: translate3d(-30px, 0, 0); }
[data-reveal='right'] { transform: translate3d(30px, 0, 0); }
[data-reveal='scale'] { transform: scale(0.955); }

/* Editorial clip reveal: the frame wipes upward while the image settles
   back from a slight over-scale. Used on product cards and category tiles. */
[data-reveal='clip'] { transform: none; }

.card[data-reveal='clip'] .card__frame,
.tile[data-reveal='clip'],
.split__media[data-reveal='clip'] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.card[data-reveal='clip'].is-revealed .card__frame,
.tile[data-reveal='clip'].is-revealed,
.split__media[data-reveal='clip'].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* The over-scale is driven by a custom property so the hover rule can take
   it over cleanly once the reveal has finished. */
[data-reveal='clip']:not(.is-revealed) .card__img,
[data-reveal='clip']:not(.is-revealed) img { --img-scale: 1.12; }

/* Split-text headings: each word rises out of its own mask. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.w__i {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1000ms var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms + var(--reveal-delay, 0ms));
}
.is-revealed .w__i { transform: none; }

/* Parallax drift.
   Uses the independent `translate` property rather than `transform`, so an
   element can carry a reveal (which animates `transform`) and a parallax at
   the same time without either clobbering the other — and so the per-frame
   parallax updates are never caught by the reveal's 950ms transition. */
[data-parallax] {
  translate: 0 var(--py, 0px);
  will-change: translate;
}

/* Hero lifts and fades as it scrolls away */
/* `--hero-p` (0 → 1) is set on .hero by js/scroll.js and inherits down. */
.hero__inner {
  opacity: calc(1 - var(--hero-p, 0));
  transform: translate3d(0, calc(var(--hero-p, 0) * -70px), 0);
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   21b. Zoom page transition
   --------------------------------------------------------------------------
   Two halves of one move, on two different documents: the leaving page
   scales up and fades to the white canvas, the arriving page settles back
   out of it. Driven entirely by CSS so the arriving page animates from the
   very first paint — see js/page-transition.js for the hand-off.
   -------------------------------------------------------------------------- */

/* A scaled body enlarges the scrollable area, which flashes a horizontal
   scrollbar mid-transition. `clip` (not `hidden`) suppresses it without
   turning the root into a scroll container, so sticky positioning and
   vertical scrolling are left alone. */
.is-zooming-in,
.is-zooming-out { overflow-x: clip; }

.is-zooming-out body {
  animation: zoomOut 460ms cubic-bezier(0.55, 0, 0.85, 0.25) both;
}

.is-zooming-in body {
  transform-origin: 50% 45vh;    /* an arriving page is always at scroll 0 */
  animation: zoomIn 680ms var(--ease) both;
}

/* Nothing should be interactive while the page is on its way out. */
.is-zooming-out body { pointer-events: none; }

@keyframes zoomOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(1.14); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(1.07); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: center; }
  .brand__mark { width: 26px; height: 26px; }
  .brand__word { font-size: 16px; letter-spacing: 0.3em; }
  .brand__sub { font-size: 7px; }

  .pdp { grid-template-columns: 1fr; }
  .pdp__info { position: static; }
  .gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }

  .value { border-right: 0; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .card__quick { display: none; }
  .card__title { font-size: 12.5px; }
  .card__price { font-size: 12.5px; }
  .footer__grid { grid-template-columns: 1fr; }
  .filters__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .sort { justify-content: space-between; }
  .pdp__buy { flex-wrap: wrap; }
  .pdp__buy .btn { flex: 1 1 100%; }
  .announce { font-size: 9px; letter-spacing: 0.2em; }
}

/* Touch devices: quick-add can't rely on hover */
@media (hover: none) {
  .card__quick { opacity: 1; transform: none; }
  .card__img--alt { display: none; }
}

@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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .w__i { transform: none !important; }
  [data-parallax] { translate: none !important; }
  .hero__inner { opacity: 1 !important; transform: none !important; }
  .card[data-reveal='clip'] .card__frame,
  .tile[data-reveal='clip'],
  .split__media[data-reveal='clip'] { clip-path: none !important; }
  .is-zooming-in body,
  .is-zooming-out body { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .footer, .drawer, .announce, .demo-bar, .mobile-nav { display: none !important; }
}