/* ================================================
   TWOTONE — MAIN STYLESHEET
   ================================================ */

/* ---- FONTS ---- */
/* Self-hosted: identical files to the Google Fonts CDN (same weights,
   same "latin" subset — the only one this site's copy actually needs),
   just served same-origin. The Google stylesheet request was a render-
   blocking ~500ms freeze mid-loader; this removes that without changing
   how any text looks once loaded. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/bebas-neue-400.woff2') format('woff2');
}
/* Creato Display (SIL Open Font License 1.1, Lafontype) — self-hosted like the
   rest. Now the site's primary face for BOTH headings and body (Light for body
   copy, Medium for headings/labels, Bold for emphasis). Medium is registered
   across 400–500 so the many default-weight display headings render at Medium
   without per-rule weight declarations. */
@font-face {
  font-family: 'Creato Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/creato-display-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Creato Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/creato-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Creato Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/creato-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/barlow-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/barlow-300italic.woff2') format('woff2');
}

:root {
  --black: #0a0a0a;
  --black-soft: #1a1a1a;   /* hover state for solid black surfaces */
  --black-alt: #111;       /* footer on the dark archive page */
  --white: #f5f3ef;
  --grey: #888;
  --mid-grey: #bbb;
  --light-grey: #d8d6d2;
  --surface: #eeece8;      /* image placeholder behind lazy-loaded photos */
  --surface-dark: #161616; /* image placeholder on dark pages */

  /* The one colour outside the black/white/grey palette — a deliberate,
     client-requested accent used ONLY for the archive "recording light":
     the sold-out status dot ignites red on hover like a camera's rec LED. */
  --rec-red: #ff2b2b;
  --rec-red-glow: rgba(255, 43, 43, 0.55);

  --font-display: 'Creato Display', 'Bebas Neue', sans-serif;
  --font-body: 'Creato Display', 'Barlow', sans-serif;
  /* The big tartan ARCHIVE title keeps Bebas Neue (the condensed, dramatic
     look the client wanted there) even though the rest of the site is on
     Creato Display. Kept as its own token so the two never entangle. */
  --font-archive: 'Bebas Neue', sans-serif;

  --nav-h: 60px;

  /* spacing scale — one rhythm for the whole site; the 900px breakpoint
     tightens these once instead of every section redefining its padding */
  --gutter: 48px;         /* page-edge horizontal padding */
  --space-section: 80px;  /* vertical padding of major sections */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-y: scroll; }

/* ---- SCROLLBAR ---- */
/* thin neutral bar that sits quietly on both the light and dark pages */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 136, 0.5) transparent;
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.45);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(136, 136, 136, 0.7); }

/* visually hidden but announced to screen readers — e.g. the loading
   spinner, which drops its visible text label in favour of the mark alone */
.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;
}

/* Skip link — keyboard users bypass the nav and jump to content (WCAG 2.4.1).
   Off-screen until focused, then anchors to the top-left. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateY(-120%);
  padding: 12px 20px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* Keyboard focus must stay visible — never remove without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ---- LOADER ---- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

.loader--exit {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.loader__svg {
  width: clamp(160px, 28vw, 300px);
  height: auto;
}

.loader__path {
  fill: transparent;
  stroke: var(--white);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    fill 0.25s ease,
    stroke 0.25s ease;
}

.loader__path--filled {
  fill: var(--white);
  stroke: transparent;
}

/* ---- NAV ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  z-index: 500;
  transition:
    background var(--transition),
    border-color var(--transition),
    backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(245, 243, 239, 0.96);
  /* 10px reads identically at 96% background opacity but composites cheaper */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--light-grey);
}

.nav__left, .nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__right { justify-content: flex-end; }

.nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  width: clamp(142px, 16vw, 188px);
  height: 28px;
}
.nav__logo-img {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity var(--transition);
}
.nav__logo-img--dark { opacity: 0; }
.nav.scrolled .nav__logo-img--light { opacity: 0; }
.nav.scrolled .nav__logo-img--dark { opacity: 1; }

.nav__left a {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition);
}
.nav.scrolled .nav__left a { color: var(--black); }

.nav__left a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transition);
}
.nav__left a:hover::after,
.nav__left a.active::after { width: 100%; }

/* Icon-based nav right (search, account, bag) */
.nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  opacity: 0.72;
  transition: color var(--transition), opacity var(--transition);
  position: relative;
}
.nav__icon:hover { opacity: 1; }
.nav.scrolled .nav__icon { color: var(--black); }
.nav__icon svg { display: block; }

/* Currency selector — sits in the icon row next to search:
   flag + currency code when closed, flag + full country name + code per
   option when open. Inherits the nav's white/black colour swap via
   .nav__icon (same class the search/account/bag icons use). */
.nav__currency { position: relative; display: flex; align-items: center; }
.nav-currency__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.nav-currency__flag {
  display: block;
  width: 18px;
  height: 14px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
}
/* color lives on the bare selector so it also covers the interactive
   .nav-currency__btn (multi-currency state) — the rest of these properties
   are specific to the plain single-currency label */
.nav__currency, .nav-currency__btn { color: var(--white); }
.nav.scrolled .nav__currency, .nav.scrolled .nav-currency__btn { color: var(--black); }
.nav__currency:not(.nav__currency--active) { /* plain single-currency label */
  opacity: 0.72;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  gap: 6px;
}
.nav-currency__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.12);
  padding: 6px;
  z-index: 60;
}
.nav-currency__menu[hidden] { display: none; }
.nav-currency__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 9px 10px;
  font-size: 12px;
  color: var(--black);
  transition: background var(--transition);
}
.nav-currency__opt:hover { background: var(--surface); }
.nav-currency__opt.is-active { font-weight: 500; }
.nav-currency__opt .nav-currency__name { flex: 1; }
.nav-currency__opt .nav-currency__code { color: var(--grey); font-size: 11px; }

.nav__cart { position: relative; }

.cart-count {
  position: absolute;
  top: -5px; right: -7px;
  background: var(--white);
  color: var(--black);
  font-size: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.nav.scrolled .cart-count { background: var(--black); color: var(--white); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  margin-left: 4px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--white);
  transition: transform var(--transition), background var(--transition);
}
.nav.scrolled .nav__burger span { background: var(--black); }
/* the two bars fold into an X while the mobile menu is open */
.nav__burger.open span:first-child { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:last-child  { transform: translateY(-7px) rotate(-45deg); }

/* ---- MOBILE MENU ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 490;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--gutter);
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5rem);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 12px 0;
  border-bottom: 1px solid rgba(245,243,239,0.06);
  width: 100%;
  transition: opacity var(--transition);
}
.mobile-menu a:hover { opacity: 0.5; }
.mobile-menu a:last-child { border-bottom: none; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-block;
  padding: 13px 36px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: var(--transition);
  text-align: center;
  text-indent: 0.2em;
}
.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: var(--black-soft); }
.btn--white { background: var(--white); color: var(--black); }
.btn--white:hover { background: var(--light-grey); }
.btn--outline { border: 1px solid currentColor; }
.btn--outline:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--full { width: 100%; display: block; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- SPLIT HERO ---- */
/* Three editorial panels, each a link. Desktop: three-across, full-bleed
   under the fixed nav. ≤900px: they stack top → bottom. */
/* Three full-width horizontal bands, stacked at all sizes (client brief:
   "horizontal layering at all times"). Each is an editorial link with a
   centred, underlined label. */
.split-hero {
  display: flex;
  flex-direction: column;
  background: var(--black);
}
.split-hero__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46vh;
  min-height: 300px;
  border-bottom: 1px solid rgba(245, 243, 239, 0.12);
}
.split-hero__panel:last-child { border-bottom: none; }
.split-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%; /* the shots frame faces high — bias upward */
  transition: transform 0.9s var(--ease);
}
/* even scrim (the label sits centred); a touch darker top/bottom for the nav
   and for depth */
.split-hero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.46) 0%, rgba(10, 10, 10, 0.26) 26%,
    rgba(10, 10, 10, 0.26) 74%, rgba(10, 10, 10, 0.46) 100%);
  transition: background 0.4s var(--ease);
}
.split-hero__panel:hover .split-hero__img { transform: scale(1.04); }
.split-hero__panel:hover::after { background: rgba(10, 10, 10, 0.34); }
.split-hero__label {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.35vw, 1.2rem);
  letter-spacing: 0.24em;
  padding-left: 0.24em; /* optical-centre against the trailing letter-spacing */
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 13px;
  text-shadow: 0 1px 18px rgba(10, 10, 10, 0.45);
}
/* a short accent line, centred under the label, that draws wider on hover */
.split-hero__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 1px;
  background: var(--white);
  transform: translateX(-50%);
  transition: width 0.5s var(--ease-out);
}
.split-hero__panel:hover .split-hero__label::after { width: 56px; }
@media (prefers-reduced-motion: reduce) {
  .split-hero__img { transition: none; }
  .split-hero__label::after { transition: none; }
}

/* ---- MARQUEE ---- */
.marquee {
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(245, 243, 239, 0.08);
  border-bottom: 1px solid rgba(245, 243, 239, 0.08);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { white-space: nowrap; }
.marquee__dot {
  opacity: 0.25;
  font-size: 0.6rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- STORY / ABOUT ---- */
/* An artsy scattered image mosaic beside the founder's note.
   Top-aligned so the note reads as a letter starting level with the imagery. */
.story {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  padding: var(--space-section) var(--gutter);
  align-items: start;
  border-top: 1px solid var(--light-grey);
}
/* Abstract mosaic, no overlap: a 6-column grid where each image gets a
   different row/column span. `grid-auto-flow: dense` packs each into the
   first slot that fits, so cells never collide and gaps never appear — the
   asymmetry comes from the varied sizes, not manual overlap math. Every image
   rests desaturated and drifts at its own rate on scroll (parallax via --py);
   on hover it wakes to full colour and lifts slightly. */
.story__collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 78px;
  grid-auto-flow: dense;
  gap: 10px;
}
.story__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
  filter: grayscale(0.6);
  transform: translate3d(0, var(--py, 0px), 0);
  transition: scale 0.5s var(--ease), filter 0.5s var(--ease), box-shadow 0.4s var(--ease);
  will-change: transform;
}
.story__collage img:hover {
  position: relative;
  z-index: 2;
  scale: 1.03;
  filter: grayscale(0);
  box-shadow: 0 10px 32px rgba(10, 10, 10, 0.22);
}
.story__collage img:nth-child(1) { grid-column: span 3; grid-row: span 5; }
.story__collage img:nth-child(2) { grid-column: span 3; grid-row: span 3; }
.story__collage img:nth-child(3) { grid-column: span 2; grid-row: span 3; }
.story__collage img:nth-child(4) { grid-column: span 4; grid-row: span 3; }
.story__collage img:nth-child(5) { grid-column: span 3; grid-row: span 4; }
.story__collage img:nth-child(6) { grid-column: span 3; grid-row: span 3; }
.story__collage img:nth-child(7) { grid-column: span 2; grid-row: span 3; }
@media (prefers-reduced-motion: reduce) {
  .story__collage img { transition: filter 0.4s var(--ease); }
}
.story__text { max-width: 460px; }
.story__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}
.story__copy {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.9;
  margin-bottom: 16px;
}
/* the founder's closing line, pulled out as a quiet statement */
.story__quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--black);
  margin: 26px 0 20px;
  padding-left: 18px;
  border-left: 2px solid var(--black);
}
.story__signoff {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--black);
  margin-bottom: 20px;
}
.story__link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.story__link:hover { opacity: 0.5; }

/* ---- ARCHIVE TEASER ---- */
/* Minimal full-bleed photo band; the whole band is a single link. Matches the
   hero's centred-label + growing-underline treatment for consistency. */
.archive-teaser {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(42vh, 400px);
  overflow: hidden;
  text-align: center;
  color: var(--white);
}
.archive-teaser__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.archive-teaser:hover .archive-teaser__bg { transform: scale(1.04); }
.archive-teaser::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.52);
  transition: background 0.4s var(--ease);
}
.archive-teaser:hover::after { background: rgba(10, 10, 10, 0.42); }
.archive-teaser__inner { position: relative; z-index: 1; }
.archive-teaser__eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  margin-bottom: 14px;
}
.archive-teaser__title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  padding-bottom: 14px;
  text-transform: uppercase;
  text-shadow: 0 1px 20px rgba(10, 10, 10, 0.4);
}
.archive-teaser__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: var(--white);
  transform: translateX(-50%);
  transition: width 0.5s var(--ease-out);
}
.archive-teaser:hover .archive-teaser__title::after { width: 64px; }
@media (prefers-reduced-motion: reduce) {
  .archive-teaser__bg, .archive-teaser__title::after { transition: none; }
}


/* ---- FOOTER ---- */
.footer {
  background: var(--black);
  color: var(--white);
  padding: 64px var(--gutter) 36px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer__logo {
  display: block;
  color: var(--white);
  opacity: 0.8;
  transition: opacity var(--transition);
  margin-bottom: 16px;
}
.footer__logo:hover { opacity: 1; }
.footer__logo img {
  width: 180px;
  height: auto;
  display: block;
  object-fit: contain;
}
.footer__brand-tagline {
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.28;
  line-height: 1.7;
  font-weight: 300;
}

/* Newsletter signup — minimal underline field + arrow, on the dark footer */
.footer__signup { margin-top: 24px; max-width: 280px; }
.footer__signup-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 12px;
  font-weight: 500;
}
.footer__signup-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(245, 243, 239, 0.25);
  transition: border-color var(--transition);
}
.footer__signup-row:focus-within { border-color: rgba(245, 243, 239, 0.6); }
.footer__signup-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 0;
}
.footer__signup-input::placeholder { color: rgba(245, 243, 239, 0.4); }
.footer__signup-input:focus { outline: none; }
.footer__signup-btn {
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  padding: 4px 2px 4px 12px;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.footer__signup-btn:hover { opacity: 1; }

.footer__col-title {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.3;
  margin-bottom: 18px;
  font-weight: 500;
  display: block;
}

.footer__col a, .footer__socials a, .footer__nav a {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity var(--transition);
  padding: 4px 0;
  line-height: 1.2;
}
.footer__col a:hover, .footer__socials a:hover, .footer__nav a:hover { opacity: 1; }

.footer__links { display: flex; flex-direction: column; }
.footer__links a {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity var(--transition);
  padding: 4px 0;
}
.footer__links a:hover { opacity: 1; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__nav {
  display: flex;
  gap: 24px;
}

.footer__copy,
.footer__meta { font-size: 10px; letter-spacing: 0.08em; opacity: 0.18; }

/* Currency selector — the footer meta becomes an interactive picker only when
   the store presents more than one currency (Shopify Markets). Kept quiet to
   match the footer, but more legible than the static label so it reads as
   clickable. Opens upward: the footer sits at the very bottom of the page. */
.footer__meta.currency { opacity: 1; position: relative; }
.currency__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--white);
  opacity: 0.5;
  transition: opacity var(--transition);
}
.currency__flag {
  display: block;
  width: 16px;
  height: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(245, 243, 239, 0.2);
}
.currency__btn::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(-45deg); /* up-caret — the menu opens upward */
  opacity: 0.8;
}
.currency__btn:hover { opacity: 1; }
.currency__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--black);
  border: 1px solid rgba(245, 243, 239, 0.15);
  box-shadow: 0 -12px 32px rgba(10, 10, 10, 0.3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.currency__menu[hidden] { display: none; }
.currency__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--white);
  opacity: 0.6;
  padding: 8px 10px;
  transition: opacity var(--transition), background var(--transition);
}
.currency__opt:hover { opacity: 1; background: rgba(245, 243, 239, 0.08); }
.currency__opt.is-active { opacity: 1; font-weight: 500; }
.currency__opt .currency__name { flex: 1; }
.currency__opt .currency__code { color: rgba(245, 243, 239, 0.5); font-size: 10px; }

/* ---- SEARCH OVERLAY ---- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.97);
  z-index: 800;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.search-overlay__header {
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.search-overlay__input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.search-overlay__input {
  flex: 1;
  width: 100%;
  padding-right: 36px; /* room for the clear button */
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  letter-spacing: 0.06em;
}
/* a full outline overwhelms the oversized input — underline instead */
.search-overlay__input:focus-visible {
  outline: none;
  border-bottom-color: rgba(245, 243, 239, 0.4);
}
.search-overlay__input::placeholder { color: rgba(245,243,239,0.18); }
/* The browser's native type="search" clear icon renders in system UI
   colours (blue on Chrome/Edge) that don't match the brand palette —
   hidden in favour of the on-brand .search-overlay__clear button below. */
.search-overlay__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search-overlay__clear {
  display: none;
  position: absolute;
  right: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: rgba(245,243,239,0.45);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}
.search-overlay__clear:hover { color: var(--white); }
.search-overlay__clear.visible { display: flex; }
.search-overlay__close {
  color: rgba(245,243,239,0.45);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-body);
  transition: color var(--transition);
  white-space: nowrap;
  cursor: pointer;
}
.search-overlay__close:hover { color: var(--white); }
.search-overlay__results {
  flex: 1;
  overflow-y: auto;
  padding: 36px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  align-content: start;
}
.search-overlay__empty {
  grid-column: 1/-1;
  color: rgba(245,243,239,0.22);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 24px 0;
  font-family: var(--font-body);
}

/* .product-card is shared with the light home/archive grids, where its
   text inherits var(--black) from body. Re-colour it here for the
   overlay's near-black backdrop, or titles/prices go black-on-black. */
.search-overlay__results .product-card__name { color: var(--white); }
.search-overlay__results .product-card__price { color: rgba(245,243,239,0.55); }

/* ---- POLICY PAGE ---- */
.policy-body {
  padding: 60px var(--gutter) var(--space-section);
  max-width: 760px;
}
.policy-body__inner h1,
.policy-body__inner h2,
.policy-body__inner h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin: 36px 0 12px;
}
.policy-body__inner h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.policy-body__inner h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.policy-body__inner p,
.policy-body__inner li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--grey);
  margin-bottom: 14px;
}
.policy-body__inner ul,
.policy-body__inner ol { padding-left: 20px; margin-bottom: 14px; }
.policy-body__inner a { text-decoration: underline; }
.policy-body__empty {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--grey);
  text-transform: uppercase;
}

/* ---- SHOP PAGE ---- */
.shop-hero {
  padding-top: calc(var(--nav-h) + 52px);
  padding-bottom: 28px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-bottom: 1px solid var(--light-grey);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/* Policy pages are utilitarian content, not a hero moment — a right-sized
   heading, not the outsized display scale used for editorial titles. */
.shop-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.shop-loading {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 120px 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.24em;
  color: var(--light-grey);
}
/* spinning 2T mark — one image, inverted via filter on dark surfaces
   rather than swapping to a second asset (same trick as the archive
   page's dimmed/greyscale treatment). The mark alone reads as "loading"
   without a text label; eased rotation + a soft scale/opacity throb
   reads as considered rather than a mechanical constant spin. */
.spinner {
  width: 40px;
  height: 40px;
}
.spinner__mark {
  width: 100%;
  height: 100%;
  animation: spinner-spin 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes spinner-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 1; }
  50%  { transform: rotate(180deg) scale(0.86); opacity: 0.5; }
  100% { transform: rotate(360deg) scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner__mark { animation: none; }
}
.shop-empty {
  grid-column: 1/-1;
  padding: 80px 0;
  text-align: center;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.shop-empty a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }
/* designed dead-end (e.g. product not found) — message plus a way back */
.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 120px 28px 160px;
  text-align: center;
}
.page-error .shop-empty { padding: 0 0 24px; }

/* ---- PRODUCT CARD ---- */
.product-card__link { display: block; }
.product-card__img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 18px;
}
.product-card__img {
  position: absolute;
  inset: 0;
  transition: opacity 0.55s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card__img--primary { opacity: 1; }
.product-card__img--hover { opacity: 0; }
.product-card__link:hover .product-card__img--primary { opacity: 0; }
.product-card__link:hover .product-card__img--hover { opacity: 1; }
.product-card__link:hover .product-card__img { transform: scale(1.04); }
/* Same status chip + recording-light dot as the archive, for consistency:
   a blurred dark chip with a dot that ignites red and breathes on hover. */
.product-card__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 243, 239, 0.85);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 243, 239, 0.12);
}
.product-card__badge::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245, 243, 239, 0.6);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.product-card--sold .product-card__link:hover .product-card__badge::before,
.product-card--sold .product-card__link:focus-visible .product-card__badge::before {
  background: var(--rec-red);
  box-shadow: 0 0 6px 1px var(--rec-red), 0 0 11px 2px var(--rec-red-glow);
  animation: rec-light 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .product-card--sold .product-card__link:hover .product-card__badge::before { animation: none; }
}

/* Sold-out pieces stay on the grid (sorted below the available ones) but read
   as unavailable: the image is desaturated and dimmed. Dimming lives on the
   wrap (not the two swap images) so the hover image-swap still works. */
.product-card--sold .product-card__img-wrap { opacity: 0.72; }
.product-card--sold .product-card__img { filter: grayscale(1); }
.product-card--sold .product-card__link:hover .product-card__img-wrap { opacity: 0.85; }
.product-card--sold .product-card__price { color: var(--mid-grey); }

/* title stacked above price, left-aligned — the editorial card info layout
   used across the catalogue grids */
.product-card__info { display: flex; flex-direction: column; gap: 6px; }
.product-card__name { font-size: 12px; letter-spacing: 0.14em; font-weight: 500; }
.product-card__price { font-size: 12px; letter-spacing: 0.06em; color: var(--grey); }

/* ---- PRODUCT PAGE ---- */
.product-page { padding-top: var(--nav-h); min-height: 100vh; }
.product-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 200px 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.24em;
  color: var(--light-grey);
}
.product-back {
  display: inline-block;
  padding: 20px var(--gutter);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
  opacity: 0.38;
  transition: opacity var(--transition);
}
.product-back:hover { opacity: 1; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 0 var(--gutter) var(--space-section); }
.product-gallery__main {
  /* Fills the full column width and is the visual centrepiece — the way
     premium fashion product pages present the product.
     It IS meant to be large; being tall and reaching toward the fold is
     correct, because every buy control (size, price, add-to-bag) lives in
     the right column above the fold. Do NOT cap its height to "fit the
     viewport" — that shrinks the width via aspect-ratio and leaves the
     image a small, off-centre box in a half-empty column. */
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 10px;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.product-gallery__main:hover img { transform: scale(1.03); }
.product-gallery__thumbs { display: flex; gap: 8px; }
.product-thumb {
  width: 68px;
  flex-shrink: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--transition);
  cursor: pointer;
}
.product-thumb.active, .product-thumb:hover { border-color: var(--black); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-details { padding-top: 12px; }
.product-details__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.product-details__price { font-size: 16px; font-weight: 300; letter-spacing: 0.06em; margin-bottom: 24px; color: var(--grey); }
.product-details__desc { font-size: 14px; line-height: 1.9; color: var(--grey); margin-bottom: 36px; max-width: 400px; }
.product-details__desc p { margin-bottom: 12px; }
.product-details__sizes { margin-bottom: 28px; }
.product-details__label { font-size: 9px; letter-spacing: 0.22em; font-weight: 500; display: block; margin-bottom: 14px; color: var(--grey); text-transform: uppercase; }
.size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  width: 52px; height: 52px;
  border: 1px solid var(--light-grey);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-family: var(--font-body);
  transition: var(--transition);
}
.size-btn:hover:not([disabled]) { border-color: var(--black); }
.size-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
.size-btn--sold { opacity: 0.22; text-decoration: line-through; }
.product-details__meta { margin-top: 36px; border-top: 1px solid var(--light-grey); }
.product-accordion { border-bottom: 1px solid var(--light-grey); }
.product-accordion summary {
  padding: 18px 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.product-accordion summary::after { content: '+'; font-size: 16px; font-weight: 300; }
.product-accordion[open] summary::after { content: '−'; }
.product-accordion p { font-size: 13px; line-height: 1.9; color: var(--grey); padding-bottom: 20px; }

/* ---- TOAST ---- */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--black);
  color: var(--white);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 500;
  z-index: 600;
  transition: transform 0.45s var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast a { border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px; }

/* ---- CART PAGE ---- */
.cart-page { padding-top: var(--nav-h); min-height: 80vh; padding-bottom: var(--space-section); }
.cart-page__header { padding: 64px var(--gutter) 40px; border-bottom: 1px solid var(--light-grey); }
.cart-page__header h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 0.95; letter-spacing: 0.01em; }
.cart-page__body {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}
.cart-items { display: flex; flex-direction: column; }
.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--light-grey);
}
.cart-item__img { aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.cart-item__name { display: block; font-size: 11px; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 4px; }
.cart-item__variant { display: block; font-size: 11px; color: var(--grey); letter-spacing: 0.08em; margin-bottom: 8px; }
.cart-item__price { display: block; font-size: 11px; letter-spacing: 0.08em; color: var(--grey); }
.cart-item__qty { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; }
.qty-btn { width: 28px; height: 28px; border: 1px solid var(--light-grey); font-size: 16px; font-weight: 300; transition: var(--transition); }
.qty-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.cart-item__remove { font-size: 12px; color: var(--grey); transition: color var(--transition); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.cart-item__remove:hover { color: var(--black); }
.cart-summary { background: var(--white); padding: 36px; border: 1px solid var(--light-grey); }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 12px; }
.cart-summary__note { font-size: 11px; color: var(--grey); margin-bottom: 28px; line-height: 1.75; }
.cart-summary .btn { margin-bottom: 12px; }
.cart-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 100px 0; }
.cart-empty p { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: 0.1em; color: var(--light-grey); }

/* ---- HOME PRODUCTS ---- */
.home-products {
  padding: var(--space-section) var(--gutter);
  border-bottom: 1px solid var(--light-grey);
}
.home-products__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--light-grey);
}
.home-products__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 500;
  color: var(--grey);
  text-transform: uppercase;
}
/* capped card width + centred tracks: cards stay a sane size at full
   screen and rows self-centre while the catalogue is still small.
   Column count naturally lands on 3 at desktop widths (~1280-1440px);
   gap sizing is tuned to that card rhythm (60px column / 64px row at a
   408px card width). */
.home-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  justify-content: center;
  gap: 48px 40px;
}

/* ---- NAV WITHOUT CENTRE LOGO ---- */
/* pages that drop the centre wordmark must pin the icon group to col 3,
   otherwise it auto-places into the centred middle column */
.nav--nologo .nav__right { grid-column: 3; }

/* ---- NAV DARK VARIANT (archive page) ---- */
/* archive page uses a black background so the scrolled state inverts */
.nav--archive.scrolled {
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: rgba(245, 243, 239, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav--archive.scrolled .nav__left a,
.nav--archive.scrolled .nav__right a,
.nav--archive.scrolled .nav__icon,
.nav--archive.scrolled .nav__currency,
.nav--archive.scrolled .nav-currency__btn { color: var(--white); }
.nav--archive.scrolled .nav__logo-img--light { opacity: 1; }
.nav--archive.scrolled .nav__logo-img--dark { opacity: 0; }
.nav--archive.scrolled .cart-count { background: var(--white); color: var(--black); }
.nav--archive.scrolled .nav__burger span { background: var(--white); }

/* ---- ARCHIVE PAGE ---- */
.archive-page {
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
}
.archive-page__hero {
  padding: calc(var(--nav-h) + 96px) var(--gutter) 88px;
  border-bottom: 1px solid rgba(245, 243, 239, 0.07);
  text-align: center;
}
.archive-page__title-wrap {
  position: relative;
  display: inline-block;
}
/* Tartan sett fills the glyphs: two crossing band patterns whose
   semi-transparent overlaps brighten at intersections (the "weave"),
   a sharp pinstripe overcheck, and a 45° twill hairline for fabric grain */
.archive-page__title {
  font-family: var(--font-archive);
  font-size: clamp(5rem, 18vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  background-image:
    repeating-linear-gradient(45deg, rgba(10, 10, 10, 0.4) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,
      rgba(245, 243, 239, 0.20) 0 21px,
      transparent 21px 23px,
      rgba(245, 243, 239, 0.65) 23px 25px,
      transparent 25px 27px,
      rgba(245, 243, 239, 0.33) 27px 38px,
      transparent 38px 40px,
      rgba(245, 243, 239, 0.65) 40px 42px,
      transparent 42px 44px,
      rgba(245, 243, 239, 0.20) 44px 64px,
      rgba(245, 243, 239, 0.95) 64px 66px),
    repeating-linear-gradient(90deg,
      rgba(245, 243, 239, 0.20) 0 21px,
      transparent 21px 23px,
      rgba(245, 243, 239, 0.65) 23px 25px,
      transparent 25px 27px,
      rgba(245, 243, 239, 0.33) 27px 38px,
      transparent 38px 40px,
      rgba(245, 243, 239, 0.65) 40px 42px,
      transparent 42px 44px,
      rgba(245, 243, 239, 0.20) 44px 64px,
      rgba(245, 243, 239, 0.95) 64px 66px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
/* Wordmark sits dead-centre over the tartan lettering; the drop-shadow
   separates it from the pattern behind */
.archive-page__wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(150px, 26vw, 340px);
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(10, 10, 10, 0.9)) drop-shadow(0 4px 34px rgba(10, 10, 10, 0.7));
  pointer-events: none;
}
.archive-page__sub {
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 500;
  opacity: 0.38;
  text-transform: uppercase;
}
/* plain fade + rise keeps the tartan pattern crisp for the whole
   entrance — a clip-path curtain shears the weave mid-animation */
@keyframes archive-title-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes archive-wordmark-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.14); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes archive-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { transform: translateY(0); }
}
/* archive-fade-up ends at the element's own opacity (eyebrow/sub are
   deliberately dimmed) so no `to` opacity is declared */

/* Entrance is JS-gated: initArchiveReveal() adds .is-revealed after the first
   paint (double rAF), so the full sequence is always seen — a plain CSS
   load-triggered animation here fired during initial parse/paint and was
   routinely missed (or only its tail seen) on warm/fast loads. The whole
   hide-until-revealed step lives inside prefers-reduced-motion: no-preference,
   so reduced-motion users simply get the final visible state, no animation,
   and no dependency on the class ever being added. */
@media (prefers-reduced-motion: no-preference) {
  .archive-page__title,
  .archive-page__wordmark { opacity: 0; }
  .archive-page__sub { opacity: 0; }
  .archive-page__hero.is-revealed .archive-page__title {
    animation: archive-title-in 0.7s var(--ease-out) both;
  }
  .archive-page__hero.is-revealed .archive-page__wordmark {
    animation: archive-wordmark-in 0.55s var(--ease-out) 0.26s both;
  }
  .archive-page__hero.is-revealed .archive-page__sub {
    opacity: 0.38;
    animation: archive-fade-up 0.55s var(--ease-out) 0.4s both;
  }
}
.archive-page__grid-section {
  padding: 64px var(--gutter) 100px;
}
.archive-page__index-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(245, 243, 239, 0.08);
  padding-bottom: 18px;
  margin-bottom: 48px;
}
.archive-page__count,
.archive-page__range {
  font-size: 9px;
  letter-spacing: 0.24em;
  font-weight: 500;
  opacity: 0.3;
  text-transform: uppercase;
}
.archive-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.archive-card {
  position: relative;
  display: block;
}
.archive-card__img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--surface-dark);
  margin-bottom: 18px;
}
/* archived pieces rest desaturated + dimmed and wake on hover —
   quieter "no longer available" signal than an overlay stamp */
.archive-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: grayscale(1);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, filter 0.55s ease;
}
.archive-card:hover .archive-card__img,
.archive-card:focus-visible .archive-card__img {
  transform: scale(1.04);
  opacity: 1;
  filter: grayscale(0);
}
.archive-card__status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 243, 239, 0.85);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 243, 239, 0.12);
  pointer-events: none;
}
.archive-card__status::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245, 243, 239, 0.6);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* The status dot ignites like a camera's recording light when a piece is
   woken on hover/focus — red, glowing, gently breathing. The pulse is
   opacity-only (cheap, composited) and only ever runs while hovered, so
   nothing animates at rest. */
.archive-card:hover .archive-card__status::before,
.archive-card:focus-visible .archive-card__status::before {
  background: var(--rec-red);
  box-shadow: 0 0 6px 1px var(--rec-red), 0 0 11px 2px var(--rec-red-glow);
  animation: rec-light 1.4s ease-in-out infinite;
}
@keyframes rec-light {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-card:hover .archive-card__status::before,
  .archive-card:focus-visible .archive-card__status::before { animation: none; }
}
.archive-card__drop {
  font-size: 9px;
  letter-spacing: 0.26em;
  opacity: 0.3;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.archive-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  letter-spacing: 0.03em;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.archive-card__price {
  font-size: 12px;
  opacity: 0.35;
  letter-spacing: 0.08em;
  text-decoration: line-through;
  text-decoration-color: rgba(245, 243, 239, 0.4);
  text-decoration-thickness: 1px;
}
.archive-page .footer {
  background: var(--black-alt);
  border-top: 1px solid rgba(245, 243, 239, 0.06);
}
/* loading state inverted for the dark archive background */
.archive-page .shop-loading { color: rgba(245, 243, 239, 0.25); }
.archive-page .spinner__mark { filter: invert(1); }
.archive-empty {
  padding: 80px 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  opacity: 0.3;
}

/* ---- PROMO POPUP ---- */
.promo {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.promo--open { opacity: 1; pointer-events: all; }

/* Photo-led split: image fills the left column, copy + form
   sit in the right. Stacks to image-over-content below 500px. */
.promo__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  transform: translateY(14px);
  transition: transform 0.35s var(--ease-out);
}
.promo--open .promo__card { transform: translateY(0); }
/* Programmatic focus target on open — no visible ring on the container itself;
   the interactive controls inside still show their own keyboard focus. */
.promo__card:focus { outline: none; }

.promo__media { position: relative; overflow: hidden; }
.promo__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.promo__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 40px 34px;
  text-align: center;
  overflow-y: auto;
}
.promo__heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
}
.promo__copy {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.7;
}
.promo__code {
  border: 1px dashed var(--grey);
  padding: 12px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.promo__form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.promo__input {
  border: 1px solid var(--grey);
  background: var(--white);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--black);
  width: 100%;
}
.promo__input:focus { outline: none; border-color: var(--black); }

/* Phone field's placeholder stand-in: "Phone" matches the email placeholder's
   colour, "(optional)" reads lighter — a native placeholder can't mix two
   colours in one string, so this decorative overlay replaces it. */
.promo__field { position: relative; }
.promo__field-hint {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grey);
  pointer-events: none;
  transition: opacity var(--transition);
}
.promo__field-hint--light { font-size: 11px; opacity: 0.55; }
.promo__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--grey);
  text-align: left;
}
.promo__consent input { margin-top: 1px; flex-shrink: 0; accent-color: var(--black); }
.promo__consent a { color: var(--black); text-decoration: underline; }

/* Sits over the white content column, so it's a clean dark mark — no chip,
   no ring. (Flips to white over the photo when the card stacks on mobile.) */
.promo__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  z-index: 2;
  transition: opacity var(--transition);
}
.promo__close:hover { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .promo__card { transition: none; transform: none; }
}

/* ---- DROP LOCK SCREEN ---- */
/* Full-screen launch gate. z-index tops even the entrance loader (9000) so it
   covers every page completely while a drop is scheduled. */
.drop-lock {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--gutter);
  background: var(--black);
  color: var(--white);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.drop-lock--open { opacity: 1; }
.drop-lock__bg { position: absolute; inset: 0; overflow: hidden; }
.drop-lock__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
/* scrim keeps the copy legible over any photo */
.drop-lock__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.82) 100%);
}
.drop-lock__inner {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.drop-lock__eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 243, 239, 0.7);
}
.drop-lock__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.drop-lock__timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
}
.drop-lock__seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: clamp(52px, 15vw, 92px);
}
.drop-lock__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 0.9;
  font-weight: 500;
  /* tabular figures stop the countdown from shifting width each second */
  font-variant-numeric: tabular-nums;
}
.drop-lock__cap {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 243, 239, 0.5);
}
.drop-lock__sep {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4.2rem);
  line-height: 0.9;
  color: rgba(245, 243, 239, 0.35);
}
.drop-lock__body {
  font-size: 13px;
  line-height: 1.7;
  max-width: 42ch;
  color: rgba(245, 243, 239, 0.72);
}
.drop-lock .promo__form { width: min(360px, 100%); margin-top: 2px; }
.drop-lock__confirm {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  letter-spacing: 0.05em;
  line-height: 1.2;
  width: min(400px, 100%);
}
/* Consent line sits on the dark lock, not a white card — lighten it so it reads */
.capture--on-dark .promo__consent { color: rgba(245, 243, 239, 0.6); }
.capture--on-dark .promo__consent a { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .drop-lock { transition: none; }
}

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  :root {
    --nav-h: 56px;
    --gutter: 28px;
    --space-section: 56px;
  }

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav__left { display: none; }
  /* On mobile: hide account icon; keep search + bag visible */
  .nav__right > a.nav__icon:not(.nav__cart) { display: none; }
  .nav__right { gap: 18px; }
  .nav__burger { display: flex; }
  .nav__logo { width: clamp(128px, 34vw, 168px); }
  /* logo-less nav: only the icon group remains once .nav__left hides */
  .nav--nologo { justify-content: flex-end; }

  /* split hero: shorter bands on tablet (still full-width horizontal) */
  .split-hero__panel { height: 42vh; min-height: 280px; }

  .archive-teaser { min-height: min(60vh, 520px); }

  /* story: text above the collage, collage widens to fill */
  .story { grid-template-columns: 1fr; gap: 40px; }
  .story__text { order: -1; max-width: none; }

  .footer { padding: 48px var(--gutter) 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 40px; margin-bottom: 28px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  /* meta is left-aligned on mobile — open the menu rightward so it can't spill
     off the left edge */
  .currency__menu { left: 0; right: auto; }
  .policy-body { padding: 48px var(--gutter) 64px; }

  .shop-hero { padding: calc(var(--nav-h) + 48px) var(--gutter) 32px; flex-direction: column; align-items: flex-start; gap: 8px; }

  .product-layout { grid-template-columns: 1fr; padding: 0 var(--gutter) 60px; }
  .product-gallery__main { aspect-ratio: 4/5; }

  .cart-page__header { padding: 40px var(--gutter) 28px; }
  .cart-page__body { grid-template-columns: 1fr; padding: 40px var(--gutter); gap: 40px; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item__qty { grid-column: 2; }
  .cart-item__remove { grid-row: 1; grid-column: 3; align-self: start; justify-self: end; }

  .archive-page__hero { padding: calc(var(--nav-h) + 48px) var(--gutter) 56px; }
  .archive-page__grid-section { padding: 48px var(--gutter) 72px; }
  .archive-page__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 500px) {
  :root { --gutter: 22px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }

  .promo__card { grid-template-columns: 1fr; }
  .promo__media { aspect-ratio: 16 / 10; }
  .promo__body { padding: 26px 24px 30px; }
  /* stacked: the X now sits over the top image, so it goes white + a soft
     shadow for legibility on any photo */
  .promo__close { color: var(--white); filter: drop-shadow(0 1px 3px rgba(10, 10, 10, 0.5)); }

  .nav__logo { width: min(144px, 38vw); }

  .split-hero__panel { height: 40vh; min-height: 240px; }

  .home-products__grid { grid-template-columns: 1fr; }

  .archive-page__grid { grid-template-columns: 1fr; }
}