/* ==========================================================================
   MOTIVASHIRT — Chapter 001
   One word. One identity. One commitment.

   The garment's chest embroidery is tiny, centered and tightly set. That treatment
   is the site's structural device (.chest). Everything else is scale contrast
   against it.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

:root {
  --ink:        #151515;
  --ink-deep:   #0E0E0E;
  --ink-raised: #1D1D1D;
  --line:       #2A2A2A;
  --line-soft:  #202020;
  --bone:       #EDEAE4;
  --ash:        #8A8783;

  /* Studio backdrop for transparent flat shots — a black tee on --ink
     would be invisible without it. Echoes the concrete of the model shots. */
  --wash: radial-gradient(115% 88% at 50% 32%, #6A675F 0%, #4A4843 52%, #33322F 100%);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --band-y: clamp(88px, 13vh, 168px);
  --measure: 52ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 900ms;
}

/* --------------------------------------------------------------- 2. RESET */

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

/* Buttons and links set their own display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Fixed header clearance for in-page anchors. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

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

input {
  font: inherit;
  color: inherit;
}

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

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 12px 20px;
  background: var(--bone);
  color: var(--ink);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ----------------------------------------------------------- 3. TYPOGRAPHY */

/* The signature. Same proportions as the print on the chest of the shirt. */
.chest {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
}

/* The other extreme: wide, heavy, nearly untracked. */
.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-transform: uppercase;
}

.h-xl { font-size: clamp(2.9rem, 8.5vw, 8rem); }
.h-lg { font-size: clamp(2.1rem, 5.6vw, 5rem); }
.h-md { font-size: clamp(1.6rem, 3.2vw, 2.9rem); }

.lede {
  color: var(--ash);
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  max-width: var(--measure);
}

.muted { color: var(--ash); }

/* ---------------------------------------------------------- 4. LAYOUT ATOM */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1560px);
  margin-inline: auto;
}

.band { padding-block: var(--band-y); }

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

/* ------------------------------------------------------------- 5. BUTTONS */

/* Two buttons, one motion language, permanent hierarchy. The secondary fills
   upward from its own baseline; the solid one never inverts — otherwise the
   pair trade appearances mid-hover and read as the same block. */
.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 1.15rem 2.4rem;
  border: 1px solid var(--bone);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: color 400ms var(--ease), background-color 400ms var(--ease),
              transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deliberately a tint, not solid bone — a full fill would land the
     secondary on the same block as the primary and erase the hierarchy. */
  background: rgba(237, 234, 228, 0.12);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 460ms var(--ease);
}
.btn:hover::before { transform: scaleY(1); }

.btn:hover {
  color: var(--bone);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 3px;
}

.btn--block {
  width: 100%;
  padding-block: 1.35rem;
}

/* Primary. Already filled, so it has no wipe — it lifts and brightens. */
.btn--solid {
  background: var(--bone);
  color: var(--ink);
}
.btn--solid::before { content: none; }
.btn--solid:hover {
  background: #F5F2EC;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  border-color: var(--line);
  color: var(--ash);
  cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--ash);
  transform: none;
  box-shadow: none;
}
.btn[disabled]:hover::before,
.btn[aria-disabled="true"]:hover::before { transform: scaleY(0); }

/* -------------------------------------------------------------- 6. HEADER */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease),
              padding 500ms var(--ease);
}

/* Legibility scrim — the hero photo runs light behind the nav. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(14, 14, 14, 0.8), rgba(14, 14, 14, 0));
  transition: opacity 500ms var(--ease);
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header.is-scrolled {
  background: rgba(21, 21, 21, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  padding-block: 14px;
}

.brand { display: block; line-height: 0; }
.brand img {
  height: 42px;
  width: auto;
  transition: height 500ms var(--ease);
}
.site-header.is-scrolled .brand img { height: 30px; }

.nav {
  display: none;
  align-items: center;
  gap: clamp(24px, 3vw, 46px);
}

.nav a,
.nav button {
  position: relative;
  padding: 0;
  color: rgba(237, 234, 228, 0.78);
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.nav a:hover,
.nav button:hover {
  color: var(--bone);
  transform: translateY(-1px);
}
.nav a:active,
.nav button:active { transform: translateY(0); }

.nav a:focus-visible,
.nav button:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 6px;
}

/* Underline sweeps in on X, then gains weight on Y — the cart button carries
   the same rule so it is not the one nav item that behaves differently. */
.nav a::after,
.nav button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0) scaleY(0.5);
  transform-origin: left bottom;
  transition: transform 400ms var(--ease);
}
.nav a:hover::after,
.nav button:hover::after { transform: scaleX(1) scaleY(1); }

.cart-count { font-variant-numeric: tabular-nums; }

/* Mobile trigger */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--bone);
  transition: transform 400ms var(--ease), opacity 300ms var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-content: center;
  gap: 34px;
  padding: 0 var(--gutter);
  background: var(--ink-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 450ms;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--display);
  font-variation-settings: "wdth" 110;
  font-weight: 600;
  font-size: clamp(2rem, 11vw, 3.4rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ---------------------------------------------------------------- 7. HERO */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Perspective gives the ±1–2° stage tilt real depth. */
  perspective: 1200px;
}

/* The stage carries the shared camera tilt (rotateX/Y); each layer inside
   drifts at its own rate. JS writes only transforms here — no reflow. */
.hero__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero__plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  /* Baseline overscan so drift + tilt never expose an edge. JS re-applies
     scale alongside the translate; this value is the no-JS fallback. */
  transform: scale(1.14);
  will-change: transform;
}

/* Foreground light — a soft highlight that shifts with the camera to fake a
   moving sun direction (kept within a few percent). */
.hero__light {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 22%,
    rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: screen;
  will-change: transform;
}

/* Dust motes — the nearest layer, so it drifts the most. */
.hero__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(21, 21, 21, 0.96) 0%, rgba(21, 21, 21, 0.55) 42%, rgba(21, 21, 21, 0.1) 78%),
    linear-gradient(to right, rgba(21, 21, 21, 0.6), rgba(21, 21, 21, 0) 60%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) clamp(56px, 9vh, 104px);
  max-width: 900px;
}

.hero__eyebrow { color: var(--ash); }

.hero h1 { margin: 34px 0 0; }
.hero h1 .line {
  display: block;
  overflow: hidden;
}
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1100ms var(--ease);
}

.hero__sub {
  margin-top: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

/* Load sequence — .is-ready is set on <body> by main.js */
.is-ready .hero h1 .line:nth-child(1) > span { transform: translateY(0); transition-delay: 180ms; }
.is-ready .hero h1 .line:nth-child(2) > span { transform: translateY(0); transition-delay: 290ms; }
.is-ready .hero h1 .line:nth-child(3) > span { transform: translateY(0); transition-delay: 400ms; }
.is-ready .hero__sub { opacity: 1; transform: none; transition-delay: 700ms; }
.is-ready .hero__cta { opacity: 1; transform: none; transition-delay: 840ms; }

/* Desktop: asymmetric split. The source is portrait, so a full-bleed
   letterbox crop would cut the garment — give the image its own column. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 44fr 56fr;
    align-items: center;
  }
  .hero__media {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    height: 100svh;
  }
  .hero__plane { object-position: 50% 18%; }
  .hero__scrim {
    background: linear-gradient(to right, var(--ink) 0%, rgba(21, 21, 21, 0.35) 22%, rgba(21, 21, 21, 0) 55%);
  }
  /* Top padding clears the fixed header's logo lockup — without it the
     eyebrow rides up under the MOTIVASHIRT wordmark on short viewports. */
  .hero__inner {
    grid-column: 1;
    grid-row: 1;
    padding: clamp(92px, 13vh, 150px) clamp(24px, 3vw, 56px) 0 var(--gutter);
    max-width: none;
  }
}

/* Scroll cue. Sits in flow under the CTAs — absolutely positioning it against
   the hero floor made it collide with the buttons on shorter viewports. */
.hero__cue {
  display: none;
  align-items: center;
  gap: 14px;
  margin: clamp(44px, 6vh, 72px) 0 0;
  color: var(--ash);
}
.hero__cue::after {
  content: "";
  width: 54px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cueSweep 2600ms var(--ease) infinite;
}
@keyframes cueSweep {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}
@media (min-width: 1200px) { .hero__cue { display: flex; } }

/* ------------------------------------------------------- 8. SECTION HEADS */

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 34px;
  margin-bottom: clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--line-soft);
}
.band-head .chest { color: var(--ash); }

/* ------------------------------------------------------------ 9. PRODUCTS */

/* Contained deliberately. The grid does not fill the wrap — the gutters
   either side are the point, and the pair reads as one object. */
.product-grid {
  display: grid;
  gap: clamp(40px, 6vw, 96px) clamp(18px, 2.4vw, 40px);
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
}

.product-card { display: block; }

.product-card__figure {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-raised);
}
.product-card__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 700ms var(--ease), transform 1400ms var(--ease);
}
.product-card__figure .alt {
  opacity: 0;
}
.product-card:hover .product-card__figure .alt { opacity: 1; }
.product-card:hover .product-card__figure img { transform: scale(1.03); }

.product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}
.product-card__word {
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.product-card__colour {
  display: block;
  margin-top: 7px;
  color: var(--ash);
}
.product-card__price { font-variant-numeric: tabular-nums; }

/* Edition counts. Reads live from Chapter.editions — see assets/js/chapter.js */
.stock {
  margin-top: 10px;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.stock[data-state="closed"] { color: var(--bone); }

/* --------------------------------------------------- 9b. CHAPTER HEADING */

.chapter-meta {
  padding-bottom: clamp(48px, 7vh, 88px);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(64px, 9vh, 120px);
}
.chapter-meta .display { margin: 14px 0 18px; }
.chapter-meta__spec { color: var(--ash); }

/* ------------------------------------------------------------ 9c. THE WORD */

/* Left-anchored: the statement runs wide, the meta is a byline directly under
   it, and the film carries the full width below. No side split, no empty gap. */
.word-lead {
  margin-bottom: clamp(48px, 7vh, 88px);
}
.word-statement {
  max-width: 46ch;
}
.word-byline {
  margin-top: clamp(22px, 3vh, 36px);
  color: var(--ash);
}
.word-byline__word { color: var(--bone); }

/* Holds the campaign film. Cropped to a cinematic band so a portrait
   still stands in for the loop without running the page height away. */
.word-film {
  margin: 0;
  overflow: hidden;
  background: var(--ink-raised);
}
.word-film img,
.word-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Crop to the chest, where the embroidery is — not through the face. */
  object-position: 50% 46%;
}
@media (min-width: 760px) {
  .word-film img,
  .word-film video { aspect-ratio: 21 / 9; }
}

/* Pull quote on the product page, above the specification list. */
.word-note {
  margin: 44px 0 0;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

/* -------------------------------------------------------- 9d. ARCHIVE */

.archive {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive__row {
  display: grid;
  gap: 8px;
  padding: clamp(28px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  .archive__row {
    grid-template-columns: 12ch 1fr auto;
    align-items: baseline;
    gap: 32px;
  }
}
.archive__no { color: var(--ash); }
.archive__state { color: var(--ash); }
.archive__state[data-state="closed"] { color: var(--bone); }

/* -------------------------------------------------------- 10. BRAND CREED */

.creed {
  display: grid;
  place-items: center;
  min-height: 82vh;
  text-align: center;
}
.creed p + p { margin-top: 0.12em; }

/* --------------------------------------------------------- 11. LIFESTYLE */

.lifestyle { display: grid; gap: clamp(72px, 11vh, 150px); }

.look {
  display: grid;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .look { grid-template-columns: 1fr 1fr; }
  .look--flip .look__media { order: 2; }
}

.look__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-raised);
}
.look__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 2600ms var(--ease);
}
.look.is-visible .look__media img { transform: scale(1); }

.look__body { max-width: var(--measure); }
.look__body .chest { color: var(--ash); }
.look__body h3 { margin: 20px 0 18px; }

/* ----------------------------------------------------------- 12. CONCEPT */

.concept {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .concept { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
/* Capped at the measure, then pushed to the column end so the slack falls
   between the two masses as a gutter, not off the right edge. */
.concept__body { max-width: var(--measure); }
@media (min-width: 900px) {
  .concept__body { justify-self: end; }
}
.concept__body p { margin-top: 22px; }
.concept__body p:first-of-type {
  /* Pull the cap-height up to sit on the same line as the cadence list's
     first row (border-top + 16px padding on the left column). */
  margin-top: 10px;
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--bone);
}
/* The terms of a chapter, stated plainly. Carries the left column so the
   section is not prose against dead space. */
.cadence {
  align-self: start;
  /* 2px nudge so CADENCE's cap sits on the exact line as the right column. */
  margin: 2px 0 0;
  border-top: 1px solid var(--line-soft);
}
.cadence > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cadence dt {
  color: var(--ash);
  white-space: nowrap;
}
.cadence dd {
  margin: 0;
  color: var(--bone);
  text-align: right;
}

/* -------------------------------------------------------- 13. NEWSLETTER */

.signup {
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.signup__inner {
  max-width: 640px;
  margin-inline: auto;
}
.signup p { margin-top: 20px; }
.signup .lede { margin-inline: auto; }

.signup__form {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  border-bottom: 1px solid var(--line);
  transition: border-color 400ms var(--ease);
}
.signup__form:focus-within { border-bottom-color: var(--bone); }

.signup__form input {
  flex: 1;
  min-width: 0;
  padding: 14px 2px;
  background: none;
  border: 0;
  text-align: left;
}
.signup__form input::placeholder { color: var(--ash); }
.signup__form input:focus { outline: none; }

.signup__submit {
  padding: 12px 6px;
  color: var(--ash);
  transition: color 300ms var(--ease), transform 400ms var(--ease);
}
.signup__submit:hover {
  color: var(--bone);
  transform: translateX(4px);
}

.signup__status {
  min-height: 1.4em;
  margin-top: 16px;
  text-align: left;
  color: var(--ash);
}
.signup__status[data-state="error"] { color: var(--bone); }

/* ------------------------------------------------------------ 14. FOOTER */

.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(64px, 9vh, 110px) 40px;
}

.footer__top {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.footer__brand img { height: 52px; width: auto; }
.footer__brand p { margin-top: 22px; }

.footer__cols {
  display: grid;
  gap: 40px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer__cols h4 {
  margin: 0 0 20px;
  color: var(--ash);
  font-weight: inherit;
}
.footer__cols li + li { margin-top: 12px; }
.footer__cols a {
  color: var(--ash);
  transition: color 300ms var(--ease);
}
.footer__cols a:hover { color: var(--bone); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  margin-top: clamp(56px, 8vh, 90px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  color: var(--ash);
}

/* -------------------------------------------------------- 15. PRODUCT PAGE */

.pdp {
  padding-top: clamp(96px, 12vh, 140px);
  display: grid;
  gap: clamp(32px, 4vw, 72px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.pdp__gallery { display: grid; gap: clamp(10px, 1.4vw, 20px); }

.pdp__shot {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raised);
}
.pdp__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Transparent PNGs need a lit backdrop or the black tee disappears. */
.pdp__flats {
  display: grid;
  gap: clamp(10px, 1.4vw, 20px);
  grid-template-columns: 1fr 1fr;
}
.pdp__flat {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--wash);
}
.pdp__flat img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
}
.pdp__flat figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: rgba(237, 234, 228, 0.62);
}

.pdp__info {
  position: sticky;
  top: 104px;
  padding-left: clamp(0px, 2vw, 28px);
}

.pdp__eyebrow { color: var(--ash); }
.pdp__title { margin: 18px 0 0; }
.pdp__edition {
  margin-top: 14px;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.pdp__price {
  margin-top: 18px;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.pdp__finite { margin-top: 12px; color: var(--ash); }
.pdp__blurb { margin-top: 26px; }
.stock--pdp { margin-top: 16px; }

.field { margin-top: 38px; }
.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.field__head .chest { color: var(--ash); }
.field__value { color: var(--bone); }

.swatches { display: flex; gap: 10px; }
.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  color: var(--ash);
  transition: border-color 300ms var(--ease), color 300ms var(--ease);
}
.swatch:hover { border-color: var(--ash); color: var(--bone); }
.swatch[aria-pressed="true"] {
  border-color: var(--bone);
  color: var(--bone);
}
.swatch__chip {
  width: 15px;
  height: 15px;
  border: 1px solid var(--line);
}
.swatch__chip--black { background: #0B0B0B; }
.swatch__chip--white { background: #F2F0EC; }

.sizes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.size {
  padding: 15px 4px;
  border: 1px solid var(--line);
  color: var(--ash);
  text-align: center;
  transition: border-color 300ms var(--ease), color 300ms var(--ease),
              background-color 300ms var(--ease);
}
.size:hover:not([disabled]) { border-color: var(--ash); color: var(--bone); }
.size[aria-pressed="true"] {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.size[disabled] {
  color: #4A4845;
  border-color: var(--line-soft);
  text-decoration: line-through;
  cursor: not-allowed;
}

.pdp__add { margin-top: 34px; }

.pdp__note {
  margin-top: 16px;
  min-height: 1.4em;
  color: var(--ash);
}

.specs { margin-top: 46px; border-top: 1px solid var(--line-soft); }

.spec { border-bottom: 1px solid var(--line-soft); }
.spec summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  color: var(--bone);
}
.spec summary::-webkit-details-marker { display: none; }
.spec summary::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ash);
  transition: transform 400ms var(--ease);
}
.spec[open] summary::after {
  content: "–";
}
.spec__body { padding: 0 0 26px; }
.spec__body dl {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 10px 24px;
  margin: 0;
  color: var(--ash);
}
.spec__body dt { color: var(--ash); }
.spec__body dd { margin: 0; color: var(--bone); }

/* --------------------------------------------------------- 16. CART DRAWER */

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms var(--ease), visibility 450ms;
}
.cart-scrim.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100dvh;
  background: var(--ink-deep);
  border-left: 1px solid var(--line-soft);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 520ms var(--ease), visibility 520ms;
}
.cart.is-open { transform: none; visibility: visible; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.cart__close {
  padding: 6px;
  color: var(--ash);
  transition: color 300ms var(--ease);
}
.cart__close:hover { color: var(--bone); }

.cart__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 28px;
}

.cart__empty {
  display: grid;
  align-content: center;
  gap: 20px;
  height: 100%;
  text-align: center;
  color: var(--ash);
}

.cart__list { padding: 8px 0; }
.cart__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
.cart__thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raised);
}
.cart__thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart__lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.cart__remove {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  color: var(--ash);
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.cart__remove:hover { color: var(--bone); border-bottom-color: var(--bone); }

.cart__foot {
  padding: 24px 28px 30px;
  border-top: 1px solid var(--line-soft);
}
.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}
.cart__foot .muted { margin-top: 14px; text-align: center; }

/* ------------------------------------------------------------ 17. REVEALS */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="1"] { transition-delay: 120ms; }
[data-reveal="2"] { transition-delay: 240ms; }
[data-reveal="3"] { transition-delay: 360ms; }

/* --------------------------------------------------- 18. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .hero__sub,
  .hero__cta {
    opacity: 1;
    transform: none;
  }
  .hero h1 .line > span { transform: none; }
  .hero__media img,
  .look__media img { transform: none; }

  /* Hover keeps its colour change, drops the lift and the wipe. */
  .btn:hover,
  .nav a:hover,
  .nav button:hover {
    transform: none;
    box-shadow: none;
  }
  .btn::before { display: none; }
  .btn:hover { background: rgba(237, 234, 228, 0.12); }
  .btn--solid:hover { background: #F5F2EC; }
}