/* ============================================================
   SteelPaws — Landing Page Stylesheet
   Direction A: Architectural / Satoshi
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color */
  --canvas:       #ffffff;
  --band:         #f9f9f9;
  --ink:          #1a1a1a;
  --ink-80:       rgba(26, 26, 26, 0.80);
  --ink-60:       rgba(26, 26, 26, 0.60);
  --ink-40:       rgba(26, 26, 26, 0.40);
  --ink-12:       rgba(26, 26, 26, 0.12);
  --paper:        #ffffff;
  --paper-80:     rgba(255, 255, 255, 0.80);

  /* Type families */
  --font-display: "Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (PRD §4) */
  --fs-h1-d: 110px;
  --fs-h1-m: 54px;
  --fs-h2-d: 48px;
  --fs-h2-m: 32px;
  --fs-body-d: 18px;
  --fs-body-m: 16px;
  --fs-meta:   12px;
  --fs-meta-m: 10px;

  /* Spacing (8px base) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-8:  96px;
  --space-10: 128px;
  --space-12: 160px;

  /* Layout */
  --container:    1200px;
  --gutter-d:     32px;
  --gutter-m:     20px;

  /* Borders */
  --hairline:     0.5px solid var(--ink-12);
  --hairline-ink: 0.5px solid var(--ink);

  /* Motion */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     200ms;
  --dur:          400ms;
  --dur-slow:     800ms;
}


/* ------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Skip-link: keyboard-only path past the header to main content. */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-3);
  z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus {
  top: var(--space-3);
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
[id="main-content"]:focus {
  outline: none;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body-d);
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

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


/* ------------------------------------------------------------
   3. HEADER
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--gutter-d);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
  border-bottom: 0.5px solid transparent;
}

/* Over the dark hero, header text reads white */
.site-header[data-state="top"] {
  background: transparent;
  color: var(--paper);
}

/* Once scrolled past hero, header solidifies */
.site-header[data-state="scrolled"] {
  background: var(--canvas);
  color: var(--ink);
  border-bottom-color: var(--ink-12);
}

.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.site-header__nav {
  display: flex;
  gap: var(--space-4);
  justify-self: center;
}

.site-header__nav a {
  position: relative;
  padding: 6px 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.site-header__nav a:hover::after {
  transform: scaleX(1);
}

.site-header__utility {
  display: flex;
  gap: var(--space-3);
  justify-self: end;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-header__cart span {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}


/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  color: var(--paper);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source has the dog in the left third; default center crop hides
     him on portrait viewports. Anchor to ~20% so he stays in frame. */
  object-position: 20% center;
  filter: brightness(0.78) contrast(1.08);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px var(--gutter-d) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "eyebrow meta"
    "sub     ."
    "headline cta";
  gap: var(--space-3) var(--space-5);
}

.hero__eyebrow {
  grid-area: eyebrow;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero__meta-right {
  grid-area: meta;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero__sub {
  grid-area: sub;
  align-self: start;
  margin-top: var(--space-5);
  max-width: 38ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  opacity: 0.92;
}

.hero__headline {
  grid-area: headline;
  align-self: end;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(54px, 9vw, var(--fs-h1-d));
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 14ch;
}

.hero__cta {
  grid-area: cta;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 22px;
  border: 0.5px solid currentColor;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.hero__cta:hover {
  background: var(--paper);
  color: var(--ink);
}

.hero__cta span {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

.hero__cta:hover span {
  transform: translateX(4px);
}


/* ------------------------------------------------------------
   5. TRUST STRIP
   ------------------------------------------------------------ */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--hairline);
}

.trust-strip__item {
  padding: var(--space-3) var(--space-4);
  border-right: var(--hairline);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-80);
}

.trust-strip__item:last-child {
  border-right: none;
}


/* ------------------------------------------------------------
   6. SHARED — Section eyebrow + section heading utilities
   ------------------------------------------------------------ */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}


/* ------------------------------------------------------------
   7. PLACEHOLDER SECTIONS (Collection Wheel — Phase 4)
   ------------------------------------------------------------ */
.placeholder-section {
  min-height: 60vh;
  display: grid;
  place-items: center;
  border-bottom: var(--hairline);
  background: var(--band);
}

.placeholder-section__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   7B. COLLECTION WHEEL — scroll-jacked horizontal product reel
   ------------------------------------------------------------ */
.collection {
  position: relative;
  width: 100%;
  /* Desktop: 300vh creates a tight scroll runway — about two
     scroll-wheel flicks to clear the wheel. Drives horizontal
     translation across 6 products at ~40vh per step. */
  height: 300vh;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.collection__viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* Warm off-white fading to mushroom — gallery shelf for steel/chrome.
     Lets product PNGs' multiply blend hide cutout edges and grounds
     the wheel without an explicit floor line. */
  background: linear-gradient(180deg, #f3f1ee 0%, #e8e4dd 100%);
}

/* ---- Header (top-left eyebrow + top-right show-all) ---- */
.collection__header {
  position: absolute;
  top: var(--space-5);
  left: var(--gutter-d);
  right: var(--gutter-d);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

.collection__show-all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.collection__show-all span {
  font-size: 10px;
  margin-left: 2px;
}

/* ---- Backdrop image stack (cross-fades behind active product) ---- */
.collection__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.collection__bg {
  position: absolute;
  inset: 0;
  /* Always-on backdrop at 10%. No scroll-gated activation. */
  opacity: 0.10;
}

.collection__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  display: block;
}

/* ---- Horizontal product track ---- */
.collection__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6vw;
  padding: 0 var(--gutter-d);
  will-change: transform;
  z-index: 2;
  /* JS sets transform: translate3d(Xpx, 0, 0) */
}

/* ---- Product card ---- */
.product {
  flex-shrink: 0;
  width: 32vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0.32;
  transform: scale(0.92);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
}

.product[data-active] {
  opacity: 1;
  transform: scale(1);
}

.product__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
}

.product__image svg {
  width: 70%;
  max-height: 80%;
  height: auto;
  color: var(--ink);
  transition: color 600ms var(--ease);
}

.product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Multiply blend hides transparent PNG edge halos against the
     warm-bone wheel backdrop. Color preserved (no grayscale). */
  filter: contrast(1.05);
  mix-blend-mode: multiply;
}

/* Wheel cards set their finish color via inline style on the .product element;
   the SVG inherits via currentColor. */

.product__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-1);
  transition: color 600ms var(--ease);
}

.product__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color 600ms var(--ease);
}

.product[data-active] .product__name { color: var(--ink); }
.product[data-active] .product__type { color: var(--ink-60); }

/* ---- Index indicator (bottom-right, like Insubstance pagination) ---- */
.collection__indicator {
  position: absolute;
  bottom: var(--space-5);
  right: var(--gutter-d);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-60);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  z-index: 4;
}

.collection__indicator-active {
  color: var(--ink);
  font-weight: 500;
}

.collection__indicator-divider {
  opacity: 0.4;
}


/* ------------------------------------------------------------
   8. STANDARD — 3-pillar education
   ------------------------------------------------------------ */
.standard {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter-d) var(--space-10);
}

.standard__intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: end;
  padding-bottom: var(--space-8);
  border-bottom: var(--hairline);
  margin-bottom: var(--space-8);
}

.standard__intro-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.standard__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-h2-m), 4vw, var(--fs-h2-d));
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 18ch;
}

.standard__lede {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-80);
  max-width: 48ch;
  justify-self: end;
}

.standard__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pillar {
  padding: 0 var(--space-5);
  border-right: var(--hairline);
}
.pillar:first-child { padding-left: 0; }
.pillar:last-child { padding-right: 0; border-right: none; }

.pillar__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-10);
}

.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  max-width: 14ch;
}

.pillar__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-80);
  margin-bottom: var(--space-6);
  max-width: 32ch;
}

.pillar__datum {
  padding-top: var(--space-3);
  border-top: var(--hairline);
}

.pillar__datum dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-1);
}

.pillar__datum dd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
}


/* ------------------------------------------------------------
   9. LIFESTYLE BREAK — full-bleed editorial photo
   ------------------------------------------------------------ */
.lifestyle-break {
  position: relative;
  width: 100%;
  margin: 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  overflow: hidden;
  background: var(--ink);
}

.lifestyle-break__image {
  width: 100%;
  height: clamp(420px, 70vh, 720px);
  object-fit: cover;
  filter: brightness(0.85) contrast(1.05);
}

.lifestyle-break__caption {
  position: absolute;
  inset: auto auto var(--space-3) var(--gutter-d);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}


/* ------------------------------------------------------------
   10. COMPARISON TABLE
   ------------------------------------------------------------ */
.comparison {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter-d) var(--space-10);
}

.comparison__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 0.5px solid var(--ink);
  margin-bottom: var(--space-5);
}

.comparison__intro-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comparison__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-h2-m), 4vw, var(--fs-h2-d));
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.comparison__table th,
.comparison__table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--hairline);
  font-weight: 300;
  vertical-align: baseline;
}

.comparison__table thead th {
  padding-top: 0;
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-60);
}

.comparison__table thead th.comparison__head--us {
  color: var(--ink);
}

.comparison__table tbody th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
  width: 28%;
}

.comparison__table tbody td:nth-child(2) {
  color: var(--ink-60);
}

.comparison__table tbody td:nth-child(3) {
  color: var(--ink);
  font-weight: 500;
}

.comparison__table tbody tr:last-child th,
.comparison__table tbody tr:last-child td {
  border-bottom: none;
}


/* ------------------------------------------------------------
   11. BRAND STORY — two column
   ------------------------------------------------------------ */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--hairline);
}

.story__media {
  margin: 0;
  position: relative;
  background: var(--band);
  min-height: 600px;
}

.story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.05);
  position: absolute;
  inset: 0;
}

.story__content {
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}

.story__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: 22ch;
}

.story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.story__body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-80);
  max-width: 50ch;
}


/* ------------------------------------------------------------
   12. NEWSLETTER — The Steel Club
   ------------------------------------------------------------ */
.newsletter {
  background: var(--band);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.newsletter__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter-d);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.newsletter__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  max-width: 18ch;
}

.newsletter__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-80);
  max-width: 38ch;
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.newsletter__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.newsletter__field {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid var(--ink);
}

.newsletter__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2) 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
}

.newsletter__input::placeholder {
  color: var(--ink-40);
}

.newsletter__submit {
  padding: var(--space-2) var(--space-3);
  font-size: 22px;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}

.newsletter__submit:hover {
  transform: translateX(4px);
}

.newsletter__fineprint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  margin-top: var(--space-1);
}


/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  border-top: var(--hairline);
  padding: var(--space-8) var(--gutter-d) var(--space-4);
  background: var(--canvas);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: var(--space-8);
  border-bottom: var(--hairline);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: start;
}

.site-footer__col-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-2);
}

/* Footer link buttons + anchors share one visual treatment */
.site-footer__action {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-80);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.site-footer__action:hover,
.site-footer__action:focus-visible {
  color: var(--ink);
}

/* Newsletter (The Index) */
.site-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  width: 100%;
  max-width: 360px;
}
.site-footer__newsletter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.site-footer__newsletter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
}
.site-footer__newsletter-row input {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  padding: var(--space-2) 0;
  letter-spacing: 0.01em;
}
.site-footer__newsletter-row input::placeholder {
  color: var(--ink-40);
}
.site-footer__newsletter-row button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0 0 0 var(--space-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.site-footer__newsletter-row button:hover,
.site-footer__newsletter-row button:focus-visible {
  color: var(--ink-60);
}
.site-footer__newsletter-msg {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 14px;
  margin: 0;
}
.site-footer__newsletter-msg[data-state="success"] { color: var(--ink); }
.site-footer__newsletter-msg[data-state="error"]   { color: var(--ink-60); }

.site-footer__brand {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
}

.site-footer__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.site-footer__legal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding-bottom: var(--space-2);
}


/* ------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Header */
  .site-header {
    grid-template-columns: 1fr 1fr;
    padding: 16px var(--gutter-m);
  }
  .site-header__nav { display: none; }
  .site-header__utility { gap: var(--space-2); }

  /* Collection Wheel — collapse to native horizontal swipe */
  .collection {
    height: auto;
    min-height: 88vh;
  }
  .collection__viewport {
    position: relative;
    height: auto;
    min-height: 88vh;
    padding: var(--space-10) 0 var(--space-8);
  }
  .collection__header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 var(--gutter-m);
    margin-bottom: var(--space-6);
  }
  .collection__track {
    position: relative;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--gutter-m);
    gap: var(--space-3);
    transform: none !important; /* override any JS transform */
  }
  .product {
    width: 86vw;
    opacity: 1;
    transform: none;
    scroll-snap-align: center;
  }
  .product__name { color: var(--ink); }
  .product__type { color: var(--ink-60); }
  .product__price { color: var(--ink); }
  /* No active state on mobile (no scroll-jack) — show actions persistently */
  .product__actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .collection__indicator { display: none; }
  .collection__bg { opacity: 0.06; }

  /* Hero */
  .hero {
    height: 88vh;
    min-height: 600px;
  }
  .hero__grid {
    padding: 96px var(--gutter-m) var(--space-5);
  }

  /* Trust strip */
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-strip__item:nth-child(2) { border-right: none; }
  .trust-strip__item:nth-child(-n + 2) { border-bottom: var(--hairline); }

  /* Standard */
  .standard,
  .comparison {
    padding: var(--space-10) var(--gutter-m) var(--space-8);
  }
  .standard__intro,
  .comparison__intro {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
  }
  .standard__lede {
    justify-self: start;
  }
  .standard__pillars {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .pillar {
    padding: var(--space-6) 0 0;
    border-right: none;
    border-top: var(--hairline);
  }
  .pillar:first-child { padding-top: 0; border-top: none; }
  .pillar__num { margin-bottom: var(--space-4); }

  /* Story */
  .story {
    grid-template-columns: 1fr;
  }
  .story__media {
    min-height: 420px;
  }
  .story__content {
    padding: var(--space-8) var(--gutter-m);
  }

  /* Newsletter */
  .newsletter__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-8) var(--gutter-m);
  }

  /* Footer */
  .site-footer {
    padding: var(--space-6) var(--gutter-m) var(--space-3);
  }
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }
  .site-footer__brand {
    flex-direction: column;
    align-items: start;
    gap: var(--space-3);
    padding-top: var(--space-4);
  }
  .site-footer__legal { padding-bottom: 0; }

  /* Index grid → 2 columns */
  .index-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--gutter-m);
  }
  .index-hero,
  .index-filter {
    padding-left: var(--gutter-m);
    padding-right: var(--gutter-m);
  }

  /* PDP → single column */
  .pdp {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--gutter-m) var(--space-10);
    gap: var(--space-6);
  }
  .pdp__media {
    position: relative;
    top: 0;
  }
}

@media (max-width: 600px) {
  /* Hero */
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "sub"
      "headline"
      "cta";
    padding: 84px var(--gutter-m) var(--space-4);
  }
  .hero__meta-right { display: none; }
  .hero__sub { font-size: 15px; }
  .hero__cta { justify-self: start; }

  /* Comparison table — collapse to 2 columns on mobile */
  .comparison__table {
    font-size: 14px;
  }
  .comparison__table th,
  .comparison__table td {
    padding: var(--space-2);
  }
  .comparison__table tbody th {
    width: 38%;
  }

  /* Lifestyle break */
  .lifestyle-break__image {
    height: 60vh;
    min-height: 380px;
  }
  .lifestyle-break__caption {
    inset: auto auto var(--space-2) var(--gutter-m);
    font-size: 10px;
  }

  /* Footer */
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .site-footer__logo {
    font-size: clamp(48px, 14vw, 80px);
  }
  .footer-modal__title {
    font-size: 26px;
  }
  .info-drawer__title {
    font-size: 24px;
  }

  /* Index grid stays 2 columns on phones — single-column was too
     tall/empty; 2-up with tighter padding makes images dominate.
     Add-to-Cart hidden on mobile; tapping the card opens the PDP. */
  .index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .index-card__link {
    padding: var(--space-2);
  }
  .index-card__cta {
    display: none;
  }

  /* Cart drawer takes full width on phones */
  .cart-drawer__panel {
    width: 100vw;
    max-width: 100vw;
  }
  .cart-drawer__header,
  .cart-drawer__body,
  .cart-drawer__footer {
    padding-left: var(--gutter-m);
    padding-right: var(--gutter-m);
  }
  .cart-line {
    grid-template-columns: 64px 1fr auto;
    gap: var(--space-2);
  }
  .cart-line__image {
    width: 64px;
    height: 64px;
  }

  /* Trust strip → single column on phones; "Specified and Curated in Melbourne"
     reads cleanly instead of wrapping inside a cramped 2x2 cell */
  .trust-strip {
    grid-template-columns: 1fr;
  }
  .trust-strip__item {
    border-right: none;
    border-bottom: var(--hairline);
  }
  .trust-strip__item:last-child {
    border-bottom: none;
  }

  /* Wheel header on mobile: ensure SHOW ALL link doesn't crash into eyebrow */
  .collection__header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* PDP title on phones — prevent overshoot */
  .pdp__title {
    font-size: clamp(36px, 12vw, 56px);
  }
}


/* ------------------------------------------------------------
   7C. WHEEL PRODUCT — link, price, ADD TO SPEC button
   ------------------------------------------------------------ */
.product__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.product__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-60);
  margin-top: var(--space-2);
  transition: color 600ms var(--ease);
}

.product[data-active] .product__price { color: var(--ink); }

/* Action row — appears on hover of the active product.
   Holds the Detail link and Add to Cart button side-by-side. */
.product__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 350ms var(--ease),
    transform 350ms var(--ease);
}

.product[data-active]:hover .product__actions,
.product[data-active]:focus-within .product__actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* On touch devices (no hover) keep the actions persistently visible
   on the active product. */
@media (hover: none) {
  .product[data-active] .product__actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* Shared button styling — Detail (link) + Add to Cart (button) */
.product__btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 0.5px solid var(--ink);
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 350ms var(--ease),
    color 350ms var(--ease);
}

.product__btn:hover {
  background: var(--ink);
  color: var(--paper);
}


/* ------------------------------------------------------------
   7D. SITE HEADER — Cart button is now <button>, not <a>
   ------------------------------------------------------------ */
.site-header__cart {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0;
}


/* ------------------------------------------------------------
   13B. CART DRAWER
   ------------------------------------------------------------ */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

.cart-drawer[data-open] {
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cart-drawer[data-open] .cart-drawer__overlay { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--canvas);
  border-left: var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 500ms var(--ease);
}

.cart-drawer[data-open] .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline);
}

.cart-drawer__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.cart-drawer__close {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}

.cart-drawer__empty {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-40);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-8) 0;
}

/* Line item */
.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  align-items: start;
}

.cart-line:last-child { border-bottom: none; }

.cart-line__image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: var(--canvas);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-line__image svg {
  width: 70%;
  height: 70%;
  color: inherit;
}

.cart-line__image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: contrast(1.05);
  mix-blend-mode: multiply;
}

.cart-line__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-line__finish {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 4px;
  margin-bottom: var(--space-2);
}

.cart-line__qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.cart-line__qty button {
  width: 22px;
  height: 22px;
  background: none;
  border: 0.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.cart-line__qty button:hover { background: var(--ink); color: var(--paper); }

.cart-line__qty span {
  min-width: 1.5em;
  text-align: center;
  font-weight: 500;
}

.cart-line__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}

.cart-drawer__footer {
  border-top: var(--hairline);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.cart-drawer__subtotal span:last-child {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.cart-drawer__checkout {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 22px;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

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

.cart-drawer__note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  text-align: center;
}


/* ------------------------------------------------------------
   13B. FOOTER MODALS + INFO DRAWER
   - Two centered modals: Story, Materials & Care
   - One right-side drawer: Shipping & Warranty
   Markup is injected by footer.js at the end of <body>.
   Sharp corners (0px radii); low-contrast text per brand system.
   ------------------------------------------------------------ */

/* ---- Centered modal ---- */
.footer-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.footer-modal[data-open] {
  visibility: visible;
  pointer-events: auto;
}

.footer-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.footer-modal[data-open] .footer-modal__overlay { opacity: 1; }

.footer-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 92vw);
  max-height: 82vh;
  background: var(--canvas);
  border: var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(0.985);
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.footer-modal[data-open] .footer-modal__panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.footer-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--hairline);
}
.footer-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0;
}
.footer-modal__close {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.footer-modal__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.footer-modal__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0;
}

.footer-modal__dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-modal__dl dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding-top: var(--space-2);
  border-top: var(--hairline);
}
.footer-modal__dl dd {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-80);
  margin: 4px 0 0;
}

/* ---- Right-side info drawer (Shipping & Warranty) ---- */
.info-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.info-drawer[data-open] {
  visibility: visible;
  pointer-events: auto;
}

.info-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.info-drawer[data-open] .info-drawer__overlay { opacity: 1; }

.info-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 460px;
  max-width: 92vw;
  height: 100vh;
  background: var(--canvas);
  border-left: var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 500ms var(--ease);
}
.info-drawer[data-open] .info-drawer__panel { transform: translateX(0); }

.info-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline);
}
.info-drawer__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0;
}
.info-drawer__close {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.info-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.info-drawer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.info-drawer__section {
  padding-top: var(--space-3);
  border-top: var(--hairline);
}
.info-drawer__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.info-drawer__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 var(--space-2);
}
.info-drawer__section p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0;
}

/* "All sales final" callout — visually distinct so customers can't miss it
   before checkout, per brand request. */
.info-drawer__section--alert {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4);
  border-top: 0;
  margin: var(--space-2) calc(-1 * var(--space-5));
}
.info-drawer__section--alert .info-drawer__heading {
  color: var(--paper);
  opacity: 0.6;
}
.info-drawer__section--alert p {
  color: var(--paper);
}
.info-drawer__alert-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
  margin: 0 0 var(--space-2);
}


/* ------------------------------------------------------------
   13B-bis. HEADER SEARCH (command palette)
   - Anchored at top-12vh (typical Cmd-K placement, not centered)
   - Live filter list w/ selectable rows + arrow-key nav
   ------------------------------------------------------------ */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.search-modal[data-open] {
  visibility: visible;
  pointer-events: auto;
}

.search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.search-modal[data-open] .search-modal__overlay { opacity: 1; }

.search-modal__panel {
  position: absolute;
  top: 12vh;
  left: 50%;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--canvas);
  border: var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 280ms var(--ease);
}
.search-modal[data-open] .search-modal__panel {
  transform: translate(-50%, 0);
  opacity: 1;
}

.search-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline);
}
.search-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0;
}
.search-modal__close {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.search-modal__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border-bottom: var(--hairline);
}
.search-modal__field input {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  padding: var(--space-3) 0;
  letter-spacing: 0.01em;
}
.search-modal__field input::placeholder {
  color: var(--ink-40);
}
/* Strip native search-input clear button so it doesn't fight the brand */
.search-modal__field input::-webkit-search-cancel-button { display: none; }

.search-modal__kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  border: 0.5px solid var(--ink-12);
  padding: 4px 8px;
  white-space: nowrap;
}

.search-modal__results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.search-modal__empty {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-60);
  text-align: center;
  padding: var(--space-5);
  margin: 0;
}
.search-modal__empty a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-left: 4px;
}

.search-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.search-result:last-child { border-bottom: 0; }
.search-result[data-selected],
.search-result:hover {
  background: var(--band);
}

.search-result__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fafafa;
  border: var(--hairline);
}
.search-result__icon svg {
  width: 70%;
  max-height: 70%;
}

.search-result__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-result__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.search-result__finish {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0;
}

.search-result__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   13C. SHOP INDEX PAGE — THE INDEX
   ------------------------------------------------------------ */
.page-shop,
.page-pdp,
.page-legal {
  /* Pages with the header always solid (no hero) */
  padding-top: 60px;
}

.index-hero {
  border-bottom: var(--hairline);
  padding: var(--space-10) var(--gutter-d) var(--space-8);
}

.index-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.index-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(54px, 9vw, var(--fs-h1-d));
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: var(--space-3);
}

.index-hero__lede {
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-80);
  margin-top: var(--space-3);
  max-width: 50ch;
}

/* Filter bar */
.index-filter {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--gutter-d);
  max-width: var(--container);
  margin: 0 auto;
  border-bottom: var(--hairline);
}

.index-filter__btn {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-60);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) 0;
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--dur) var(--ease);
}

.index-filter__btn span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-left: 4px;
  color: var(--ink);
  opacity: 0.7;
}

.index-filter__btn:hover { color: var(--ink); }
.index-filter__btn[data-active] { color: var(--ink); font-weight: 500; }

.index-filter__btn[data-active]::after {
  content: "";
  position: absolute;
  inset: auto 0 -12px 0;
  height: 0.5px;
  background: var(--ink);
}

/* Grid */
.index-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-d);
  display: grid;
  /* 2 columns at every breakpoint — caps the catalogue cleanly
     regardless of viewport. With 5 SKUs this gives 2 + 2 + 1, with
     an empty cell at row-3 col-2. Outer border lives on the grid so
     the empty cell's right + bottom edges are drawn regardless. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: var(--hairline);
  margin-bottom: var(--space-12);
}

.index-card {
  display: flex;
  flex-direction: column;
  /* Internal dividers — bottom border draws horizontal between rows
     and the empty-cell top edge; right border draws vertical between
     col 1 and col 2. Col 2 cards skip the right border to avoid
     doubling up with the grid's outer right border (see below). */
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  background: var(--canvas);
  position: relative;
}

.index-card:nth-child(2n) {
  border-right: 0;
}

.index-card[hidden] { display: none; }

.index-card__link {
  display: block;
  padding: var(--space-3) var(--space-2) var(--space-3);
  text-decoration: none;
  color: inherit;
}

.index-card__image {
  background: var(--canvas);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.index-card__image svg {
  width: 56%;
  max-height: 70%;
}

.index-card__image img {
  /* Fill the card image area — larger product, no padding around it */
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.05);
  mix-blend-mode: multiply;
  transition: transform var(--dur) var(--ease);
}

.index-card__link:hover .index-card__image img {
  transform: scale(1.03);
}

.index-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.index-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.index-card__finish {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Price moved to PDP only — keep markup so JS still has a hook,
   but hide from the catalogue view per the design brief. */
.index-card__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink);
  margin-top: var(--space-2);
}

.index-card__cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  border-top: var(--hairline);
  padding: var(--space-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  margin-top: auto;
}

.index-card__cta:hover {
  background: var(--ink);
  color: var(--paper);
}

.index-empty {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: var(--space-12) var(--gutter-d);
  max-width: var(--container);
  margin: 0 auto;
}


/* ------------------------------------------------------------
   13D. PRODUCT DETAIL PAGE (PDP)
   ------------------------------------------------------------ */
/* PDP — Zara-style single column: large image carousel, then tabs,
   then product meta. Container caps at 720px so the page reads like
   a tall mobile-style PDP even on desktop. */
.pdp {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter-d) var(--space-10);
  display: block;
}

.pdp__loading {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  padding: var(--space-10);
}

/* ---- Image carousel ---- */
.pdp__carousel {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-5);
}

.pdp__carousel-viewport {
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--canvas);
}

.pdp__carousel-track {
  display: flex;
  height: 100%;
  transition: transform 500ms var(--ease);
  will-change: transform;
}

.pdp__slide {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
}

.pdp__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Primary cutout slide: warm-bone backdrop + multiply blend so the
   transparent PNG edges hide cleanly (mirrors wheel + lightbox). */
.pdp__slide--primary {
  background: linear-gradient(180deg, #f3f1ee 0%, #e8e4dd 100%);
}

.pdp__slide--primary img {
  width: 84%;
  height: 84%;
  filter: contrast(1.05);
  mix-blend-mode: multiply;
}

.pdp__carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-60);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.pdp__carousel-nav:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
}

.pdp__carousel-nav--prev { left: var(--space-2); }
.pdp__carousel-nav--next { right: var(--space-2); }

.pdp__carousel-dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--space-1);
}

/* 24px tap target (WCAG AA 2.5.8), 6px visual dot via ::after.
   Keeps the visual unchanged while making the target accessible. */
.pdp__carousel-dot {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.pdp__carousel-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-12);
  transform: translate(-50%, -50%);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.pdp__carousel-dot[aria-current="true"]::after {
  background: var(--ink);
  transform: translate(-50%, -50%) scale(1.25);
}

/* ---- Tabs ---- */
.pdp__details {
  padding-top: var(--space-4);
}

.pdp__tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--hairline);
  margin-bottom: var(--space-4);
}

.pdp__tab {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Was --ink-40 — fails AA contrast (~3.2:1 on white).
     --ink-80 gives ~8.8:1, well above the 4.5:1 minimum. */
  color: var(--ink-80);
  background: none;
  border: none;
  padding: var(--space-2) 0;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.pdp__tab:hover {
  color: var(--ink);
}

.pdp__tab[aria-selected="true"] {
  color: var(--ink);
}

.pdp__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.5px 0;
  height: 1px;
  background: var(--ink);
}

.pdp__panel {
  display: none;
}

.pdp__panel[data-active] {
  display: block;
}

.pdp__panel p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-80);
  margin-bottom: var(--space-1);
}

.pdp__spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pdp__spec th,
.pdp__spec td {
  padding: var(--space-2) 0;
  border-bottom: var(--hairline);
  text-align: left;
  font-weight: 300;
}

.pdp__spec th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
  width: 42%;
}

/* ---- Meta block (category, title, price, CTA) ---- */
.pdp__category {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.pdp__category a {
  color: inherit;
}

.pdp__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 4px;
}

.pdp__price {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  margin-top: 4px;
}

.pdp__cta {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper);
  background: var(--ink);
  border: 0.5px solid var(--ink);
  padding: 16px 28px;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.pdp__cta:hover {
  background: transparent;
  color: var(--ink);
}

.pdp__back {
  margin-top: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.pdp__back a:hover { color: var(--ink); }

.pdp__notfound {
  text-align: center;
  padding: var(--space-12) 0;
}

.pdp__notfound-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 80px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin: var(--space-4) 0;
}

.pdp__notfound-body {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}


/* ------------------------------------------------------------
   13E. LEGAL PAGES (Privacy, Terms) + 404
   Single-column reading layout. Used by privacy.html, terms.html,
   404.html, and the PDP not-found fallback.
   ------------------------------------------------------------ */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-10) var(--gutter-d) var(--space-12);
}

.legal-page__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.legal-page__updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-6);
}

.legal-page__body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-80);
}

.legal-page__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-page__body p {
  margin-bottom: var(--space-3);
}

.legal-page__body ul {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.legal-page__body ul li {
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
  position: relative;
}

.legal-page__body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-60);
}

.legal-page__body strong {
  font-weight: 500;
  color: var(--ink);
}

.legal-page__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 600px) {
  .legal-page {
    padding: var(--space-8) var(--gutter-m) var(--space-10);
  }
  .legal-page__body { font-size: 16px; }
}


/* ------------------------------------------------------------
   15. POLISH — Reveals + focus + micro-interactions
   ------------------------------------------------------------ */

/* Scroll reveals: only hide if JS is enabled (avoids no-JS blank-page).
   Children of [data-reveal-stagger] get a per-index delay set by JS. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 700ms var(--ease),
    transform 900ms var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}

.js [data-reveal][data-revealed] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Focus-visible — keyboard users get a clear, brand-aligned outline.
   Mouse users see no outline. */
*:focus { outline: none; }

*:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
}

/* On dark surfaces (hero before scroll, lifestyle break) outline goes white */
.hero *:focus-visible,
.site-header[data-state="top"] *:focus-visible {
  outline-color: var(--paper);
}

/* Indicator counter — smooth number swap */
.collection__indicator-active {
  display: inline-block;
  min-width: 1.5em;
  text-align: right;
}


/* ------------------------------------------------------------
   15. PRODUCT LIGHTBOX — homepage wheel quickview gallery
   ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.lightbox[data-active] {
  visibility: visible;
  opacity: 1;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Contained pop-up card. Sized via max-width/height so the dimmed
   overlay shows clearly around it. */
.lightbox__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  height: min(78vh, 600px);
  background: #f3f1ee;
  border: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  transform: scale(0.97);
  transition: transform var(--dur) var(--ease);
}

.lightbox[data-active] .lightbox__panel {
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 5;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-60);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.lightbox__close:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
}

.lightbox__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
}

/* ---- Gallery side ---- */
.lightbox__gallery {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #f3f1ee 0%, #e8e4dd 100%);
  overflow: hidden;
}

.lightbox__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lightbox__track {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 600ms var(--ease);
  will-change: transform;
}

.lightbox__slide {
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  place-items: center;
  /* Bottom padding leaves clearance for the dots row */
  padding: var(--space-3) var(--space-3) var(--space-5);
}

.lightbox__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Primary cutout (slide 1) keeps the multiply blend so its
   transparent edges hide cleanly against the warm-bone gradient.
   Alt-view JPGs render in full color, no blending. */
.lightbox__slide img[src$=".png"] {
  filter: contrast(1.05);
  mix-blend-mode: multiply;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ink-60);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transition:
    color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.lightbox__nav:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
}

.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }

.lightbox__counter {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}

.lightbox__dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--space-1);
}

.lightbox__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-12);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.lightbox__dot[aria-selected="true"] {
  background: var(--ink);
  transform: scale(1.25);
}

/* ---- Info side ---- */
.lightbox__info {
  padding: var(--space-5) var(--space-4);
  border-left: var(--hairline);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.lightbox__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.lightbox__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-top: var(--space-2);
}

.lightbox__finish {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: var(--space-2);
}

.lightbox__price {
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  margin-top: var(--space-3);
  letter-spacing: -0.01em;
}

.lightbox__desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-80);
  margin-top: var(--space-3);
  max-width: 38ch;
}

.lightbox__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.lightbox__cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border: 0.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.lightbox__cta:hover {
  background: transparent;
  color: var(--ink);
}

.lightbox__detail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 0.5px solid var(--ink-12);
  padding-bottom: 4px;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.lightbox__detail:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Mobile: full-bleed image area, info column below. Panel takes the
   whole viewport so the image runs edge to edge with no visible border. */
@media (max-width: 900px) {
  .lightbox {
    padding: 0;
  }
  .lightbox__panel {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .lightbox__layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .lightbox__info {
    padding: var(--space-4) var(--gutter-m) var(--space-5);
    border-left: none;
    border-top: var(--hairline);
  }
  .lightbox__nav {
    width: 36px;
    height: 36px;
  }
  .lightbox__slide {
    padding: 0;
  }
  /* Dots and counter overlay the image now; give them a frosted pill
     so they stay legible against any underlying photo. */
  .lightbox__dots {
    background: rgba(255, 255, 255, 0.7);
    padding: 6px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .lightbox__counter {
    background: rgba(255, 255, 255, 0.7);
    padding: 4px 8px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}


/* ------------------------------------------------------------
   15B. MOBILE NAV — hamburger toggle + slide-in drawer
   ------------------------------------------------------------ */
.site-header__menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: currentColor;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.site-header__menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
}

@media (max-width: 1024px) {
  .site-header__menu-toggle {
    display: flex;
  }
}

/* ---- Drawer ---- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 950;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.mobile-nav[data-active] {
  visibility: visible;
  opacity: 1;
}

.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 360px);
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
}

.mobile-nav[data-active] .mobile-nav__panel {
  transform: translateX(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter-m);
  border-bottom: var(--hairline);
}

.mobile-nav__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.mobile-nav__close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ink-60);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.mobile-nav__close:hover {
  color: var(--ink);
}

.mobile-nav__links {
  padding: var(--space-5) var(--gutter-m);
  display: flex;
  flex-direction: column;
}

.mobile-nav__links a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  transition: color var(--dur-fast) var(--ease);
}

.mobile-nav__links a:hover {
  color: var(--ink-60);
}


/* ------------------------------------------------------------
   16. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }

  /* Reveals: just be visible, skip the slide */
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}