/* ==========================================================================
   KARMA WEAR — design system
   Palette + type derived from the official style book:
   ink #111810 · gold #BD8D55 · wine #771011 · sage #C2C4A6 · stone #CEC6AF
   photography marigold #D69328 · Denton Regular Italic + Helvetica Neue
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink: #111810;
  --ink-soft: #43463e;
  --ink-faint: #7c7f74;
  --paper: #faf8f2;
  --card: #ffffff;
  --stone: #cec6af;
  --stone-soft: #e9e4d5;
  --sage: #c2c4a6;
  --gold: #bd8d55;
  --gold-deep: #a3763f;
  --wine: #771011;
  --marigold: #d69328;
  --hairline: rgba(17, 24, 16, 0.14);
  --hairline-soft: rgba(17, 24, 16, 0.08);

  --font-display: "Denton", "Georgia", "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-slow: 900ms;
  --dur-med: 600ms;
  --dur-fast: 350ms;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 5.5rem;

  --container: 84rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --mono-url: url("../assets/brand/monogram.svg");
}

@font-face {
  font-family: "Denton";
  src: url("../assets/fonts/Denton-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Leotaro";
  src: url("../assets/fonts/Leotaro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

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

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

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

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

[hidden] { display: none !important; }

::selection { background: var(--gold); color: var(--paper); }

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

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

.container--narrow { max-width: 46rem; }
.container--wide { max-width: 96rem; }

/* ---------- typography ---------- */
.display,
h1, h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
}

h1, .display-xl {
  font-size: clamp(2.75rem, 8vw, 5.5rem);
}

h2, .display-lg {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

.display-md { font-size: clamp(1.6rem, 3vw, 2.3rem); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.small { font-size: 0.85rem; color: var(--ink-faint); }

.text-link {
  position: relative;
  font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) ease;
}

.text-link:hover { color: var(--gold-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 1.05em 2.4em;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  will-change: transform;
}

.btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); transition-duration: 120ms; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--outline:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.btn--paper {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn--paper:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.btn--wide { width: 100%; }

.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select {
  padding: 0.9em 1em;
  background: var(--card);
  border: 1px solid var(--hairline);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  border-radius: 0;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111810' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.field input.invalid { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine); }

.field textarea {
  padding: 0.9em 1em;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 0;
  resize: vertical;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}


.field-error {
  font-size: 0.78rem;
  color: var(--wine);
  display: none;
}

.field.show-error .field-error { display: block; }

/* ==========================================================================
   announcement bar
   ========================================================================== */
.announce-bar {
  position: relative;
  background: linear-gradient(180deg, #d99a2e 0%, #d18e21 100%);
  color: var(--paper);
}

.announce-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.65rem var(--gutter);
  text-align: center;
}

.announce-bar p {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announce-bar__close {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--gutter);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--paper);
  opacity: 0.7;
  transition: opacity var(--dur-fast) ease;
}

.announce-bar__close:hover { opacity: 1; }

.announce-bar__close svg { width: 0.9rem; height: 0.9rem; }

.announce-bar.is-hidden { display: none; }

/* ==========================================================================
   header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) ease, background var(--dur-med) ease;
}

.site-header.scrolled { border-bottom-color: var(--hairline-soft); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.5rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: color var(--dur-fast) ease;
}

.site-header__logo:hover { color: var(--gold-deep); }

.site-header__logo svg { height: 1.05rem; width: auto; }

.site-nav {
  display: none;
  gap: 2.6rem;
  align-items: center;
}

.site-nav a {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-med) var(--ease-out), color var(--dur-fast) ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background-size: 100% 1px;
  color: var(--gold-deep);
}

.header-actions { display: flex; align-items: center; gap: 1.1rem; }

.cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem;
  color: var(--ink);
  transition: color var(--dur-fast) ease;
}

.cart-button:hover { color: var(--gold-deep); }

.cart-button svg { width: 1.25rem; height: 1.25rem; }

.header-social {
  display: inline-flex;
  color: var(--ink);
  transition: color var(--dur-fast) ease;
}

.header-social:hover { color: var(--gold-deep); }

.header-social svg { width: 1.25rem; height: 1.25rem; }

/* small optical nudge: mathematically centered, but the lang globe and
   Instagram glyphs read slightly high next to the heavier cart-bag icon */
.header-actions [data-lang-switch-header],
.header-actions .header-social { position: relative; top: 2px; }

.cart-count {
  position: absolute;
  top: -0.2rem;
  inset-inline-end: -0.45rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.cart-count.on { opacity: 1; transform: scale(1); }

.cart-count.bump { animation: bump 500ms var(--ease-out); }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
}

.burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) ease;
}

.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-inout), visibility 0s linear var(--dur-med);
}

.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.menu-overlay__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.menu-overlay__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  color: var(--gold);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.menu-open .menu-overlay__eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

.menu-overlay nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.menu-overlay nav a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), color var(--dur-fast) ease;
}

.menu-overlay__icon {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gold);
  opacity: 0.85;
  flex: none;
}

.menu-open .menu-overlay nav a {
  opacity: 1;
  transform: none;
}

.menu-open .menu-overlay nav a:nth-child(1) { transition-delay: 120ms; }
.menu-open .menu-overlay nav a:nth-child(2) { transition-delay: 190ms; }
.menu-open .menu-overlay nav a:nth-child(3) { transition-delay: 260ms; }
.menu-open .menu-overlay nav a:nth-child(4) { transition-delay: 330ms; }

.menu-overlay nav a:hover { color: var(--gold); }

.menu-overlay__secondary {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(250, 248, 242, 0.14);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.menu-open .menu-overlay__secondary {
  opacity: 1;
  transform: none;
  transition-delay: 380ms;
}

.menu-overlay__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color var(--dur-fast) ease;
}

.menu-overlay__contact svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.menu-overlay__contact:hover { color: var(--gold); }
.menu-overlay__contact:hover svg { transform: translateX(3px); }

.menu-overlay .menu-foot {
  position: absolute;
  z-index: 1;
  bottom: calc(var(--gutter) + 0.5rem);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--stone);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.menu-overlay .menu-foot svg { height: 2.2rem; width: auto; color: var(--gold); }

body.menu-open { overflow: hidden; }

@media (min-width: 60rem) {
  .site-nav { display: flex; }
  .burger, .menu-overlay { display: none; }
  .site-header__bar { height: 5.25rem; }
  .site-header__logo svg { height: 1.2rem; }
}

/* ==========================================================================
   loader + page transitions
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: opacity 700ms var(--ease-inout), visibility 0s linear 700ms;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader__mark {
  width: clamp(64px, 12vw, 96px);
  color: var(--gold);
  animation: breathe 2.4s var(--ease-inout) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.965); }
  50% { opacity: 1; transform: scale(1); }
}

/* short veil used between pages */
body.leaving .page {
  opacity: 0;
  transform: translateY(-14px);
}

.page {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-inout), transform 420ms var(--ease-inout);
}

/* ---------- scroll reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
  will-change: opacity, transform;
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   components
   ========================================================================== */

/* monogram divider — the mark at pause points */
.mono-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: var(--space-4) 0;
  color: var(--gold);
}

.mono-divider::before,
.mono-divider::after {
  content: "";
  height: 1px;
  width: min(11rem, 26vw);
  background: linear-gradient(to var(--dir, right), transparent, var(--hairline));
}

.mono-divider::before { --dir: right; }
.mono-divider::after { --dir: left; }

.mono-divider svg { width: 2rem; height: auto; opacity: 0.95; }

/* the one instance that follows the chapter explaining what the mark
   actually means — sized up so the mark itself lands as the payoff,
   not a repeat of the small quiet dividers used elsewhere on the page */
.mono-divider--feature svg { width: 4.5rem; }

/* photo frame with monogram loading placeholder */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--stone-soft);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(72px, 26%);
  aspect-ratio: 208 / 208;
  background: currentColor;
  color: var(--gold);
  -webkit-mask: var(--mono-url) center / contain no-repeat;
  mask: var(--mono-url) center / contain no-repeat;
  opacity: 0.5;
  animation: breathe 2.4s var(--ease-inout) infinite;
  transition: opacity var(--dur-med) ease;
}

.frame img,
.frame video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-inout), transform 1400ms var(--ease-out);
}

.frame.loaded::before { opacity: 0; animation-play-state: paused; }
.frame.loaded img,
.frame.loaded video { opacity: 1; }

/* product card */
.product-card { display: block; }

.product-card .frame { aspect-ratio: 3 / 4; }

.product-card .frame img { transform: scale(1.001); }

.product-card:hover .frame img { transform: scale(1.045); }

.product-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
}

.product-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  transition: color var(--dur-fast) ease;
}

.product-card:hover .product-card__name { color: var(--gold-deep); }

.product-card__price { font-size: 0.9rem; color: var(--ink-soft); }

.product-card__swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-inline-end: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 16, 0.12);
  vertical-align: baseline;
}

/* grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  transition: opacity var(--dur-fast) ease;
}

.product-grid.swapping { opacity: 0; }

@media (min-width: 46rem) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media (min-width: 74rem) {
  .product-grid { gap: 2.6rem; }
}

/* shop page — all 8 colorways, 4 per row so the grid ends on a full
   row instead of the 3-column layout's uneven 3/3/2 split */
@media (min-width: 46rem) {
  #shop-grid { grid-template-columns: repeat(4, 1fr); }
}

/* the closing statement + divider that used to sit here were removed,
   so the grid needs its own bottom room before the dark footer starts */
.container--shop { padding-bottom: var(--space-6); }

/* the two lede lines read as one continuous thought split onto two
   lines, not separate paragraphs — no gap beyond normal line-height */
.lede-line { margin-top: 0; }

/* color chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55em 1.15em;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: transparent;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.chip .dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 16, 0.15);
}

.chip:hover { border-color: var(--gold); color: var(--gold-deep); }

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* accordion */
.accordion { border-top: 1px solid var(--hairline); }

.accordion__item { border-bottom: 1px solid var(--hairline); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 1.15rem 0;
  text-align: start;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}

.accordion__trigger:hover { color: var(--gold-deep); }

.accordion__icon {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-out);
}

.accordion__icon::before { width: 100%; height: 1px; }
.accordion__icon::after { width: 1px; height: 100%; }

.accordion__item.open .accordion__icon::after { transform: rotate(90deg); }

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-med) var(--ease-inout);
}

.accordion__content {
  padding: 0.2rem 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 60ch;
}

.accordion__content p + p { margin-top: 0.7em; }
[data-shipping-amount] { white-space: pre-line; }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transform: translate(-50%, 130%);
  transition: transform var(--dur-med) var(--ease-out);
  max-width: calc(100vw - 2 * var(--gutter));
}

.toast.on { transform: translate(-50%, 0); }

.toast svg { width: 1.1rem; height: auto; color: var(--gold); flex: none; }

.toast a { color: var(--gold); font-weight: 500; white-space: nowrap; }

/* section spacing */
.section { padding-block: var(--space-6); }

.section--tight { padding-block: var(--space-5); }

@media (min-width: 60rem) {
  .section { padding-block: var(--space-7); }
  .section--tight { padding-block: var(--space-6); }
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: var(--space-4);
}

.section-head--center { align-items: center; text-align: center; }

.section-head .between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

/* ==========================================================================
   home
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  min-height: calc(112svh - 4.5rem);
  grid-template-rows: minmax(60svh, 1fr) auto;
}

.hero__media { position: relative; overflow: hidden; }

.hero__media .frame { position: absolute; inset: 0; height: 100%; }

/* The hero photo's crop (incl. the mobile scale(1.2) zoom below) is meant to
   be a STATIC framing. It must never animate: on mobile, the URL-bar collapse
   on first scroll nudges the hero's height, which would otherwise re-run the
   inherited `transform 1.4s` transition and read as an awkward scroll-zoom.
   So the hero image keeps the opacity fade-in but never transitions transform.
   (Product cards keep their own hover-zoom transition — this is scoped here.) */
.hero__media .frame img {
  object-position: 50% 54%;
  transition: opacity 900ms var(--ease-inout);
}

.hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: var(--space-5) var(--gutter);
  overflow: hidden;
}

.hero__panel > * { position: relative; z-index: 2; }

.hero__panel .light-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__title {
  position: relative;
  max-width: 9.5em;
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 42%, var(--paper) 50%, var(--ink) 58%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}

/* mobile keeps the original background-position sweep as-is (untouched) */
@media (max-width: 59.99rem) {
  .hero__title.revealed {
    animation: kwCreamSweep 1.3s var(--ease-out) both;
    animation-delay: calc(var(--reveal-delay, 0) * 1ms);
  }
}

@keyframes kwCreamSweep {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

/* desktop-only: a single, soft pass of light through the title. A
   duplicate cream-coloured text layer is revealed through a wide,
   feathered gradient mask (not a hard clip-path edge — a hard edge cuts
   straight through letter strokes and reads as a jagged glitch rather
   than a glow) that drifts across once, fading in and back out at both
   ends rather than switching on/off abruptly. */
.hero__title-shine {
  position: absolute;
  inset: 0;
  color: var(--paper);
  background: none;
  -webkit-text-fill-color: var(--paper);
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg,
    transparent 0%, transparent 28%,
    rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0.45) 60%,
    transparent 72%, transparent 100%);
  mask-image: linear-gradient(100deg,
    transparent 0%, transparent 28%,
    rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0.45) 60%,
    transparent 72%, transparent 100%);
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-position: 130% 0;
  mask-position: 130% 0;
}

@media (min-width: 60rem) {
  .hero__title {
    background-image: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
  }

  .hero__title.revealed .hero__title-shine {
    /* a very gentle, almost-linear glide — slow enough to feel unhurried
       rather than a quick flash */
    animation: kwShineSweep 3.6s cubic-bezier(0.37, 0, 0.63, 1) both;
    animation-delay: calc(var(--reveal-delay, 0) * 1ms + 200ms);
  }
}

@keyframes kwShineSweep {
  0% {
    opacity: 0;
    -webkit-mask-position: 130% 0;
    mask-position: 130% 0;
  }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% {
    opacity: 0;
    -webkit-mask-position: -60% 0;
    mask-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title { background-position: -20% 0; }
  .hero__title.revealed { animation: none; }
  .hero__title.revealed .hero__title-shine { animation: none; }
  .hero__title-shine { opacity: 0; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 0.6rem;
}

.hero__note {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.hero__note svg { width: 1.25rem; height: auto; color: var(--gold); }

/* desktop only: this line renders immediately, no fade/slide-in — mobile
   keeps the reveal motion untouched */
@media (min-width: 60rem) {
  .hero__note[data-reveal],
  .hero__note[data-reveal].revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* mobile: the two-row grid (text row, then an image row that never gets a
   height because its only child is absolutely positioned) leaves the photo
   with nothing to show. Below 60rem the hero becomes a single full-bleed
   photo with the text panel overlaid starting 2/3 of the way down, so it
   reads like a proper mobile hero instead of text-then-blank-space. */
@media (max-width: 59.99rem) {
  .hero {
    display: block;
    position: relative;
    height: calc(100svh - 4.5rem);
    min-height: calc(100svh - 4.5rem);
  }

  .hero__media {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  /* zoom in slightly on mobile only — the tall crop otherwise leaves a lot
     of empty background above the turban before the panel takes over.
     translateY nudges the whole image up a touch more (object-position
     alone has no vertical slack to redistribute here — this crop is
     width-constrained under cover, not height-constrained). */
  .hero__media .frame img {
    transform: translateY(-4%) scale(1.2);
    transform-origin: 50% 62%;
  }

  .hero__panel {
    position: absolute;
    inset: 63% 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.9rem var(--gutter) var(--space-4);
    color: var(--paper);
    background: linear-gradient(180deg, rgba(17, 24, 16, 0) 0%, rgba(17, 24, 16, 0.5) 26%, rgba(17, 24, 16, 0.88) 60%, rgba(17, 24, 16, 0.88) 100%);
  }

  /* the box above is exactly 34% of the hero's height (2/3 down to the
     bottom), and eyebrow + title + CTA row alone are taller than that on
     most phones — so the button sits partly or fully below the fold unless
     everything here is kept deliberately compact. Lede/note are allowed to
     spill past the hero into normal scroll; the CTA is not. */
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 2.75rem); }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0;
  }

  /* the story link is redundant here on mobile — "Read our story" is
     already reachable from the nav and the story teaser section below */
  .hero__actions .text-link { display: none; }

  .hero__actions .btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
  }

  /* the panel's scrim gradient is close to transparent at its own top edge,
     right where the eyebrow sits, so the gold-on-cream eyebrow colour reads
     poorly against the bright photo there — force paper + a shadow so it
     stays legible over any part of the image */
  .hero__panel .eyebrow {
    color: var(--paper);
    text-shadow: 0 1px 5px rgba(17, 24, 16, 0.5);
  }

  /* the lede repeats the eyebrow/title's "one silhouette, eight shades"
     idea in more words — on the compact mobile panel that's redundant, and
     letting it sit in the flow (between title and actions) pushes the CTA
     button down past the visible box described above. Desktop keeps it. */
  .hero__panel .lede { display: none; }

  .hero__panel .hero__note {
    color: rgba(250, 248, 242, 0.9);
    text-shadow: 0 1px 5px rgba(17, 24, 16, 0.4);
  }

  .hero__panel .hero__note svg { color: var(--gold); }

  .hero__title {
    background-image: linear-gradient(100deg, var(--paper) 0%, var(--paper) 42%, var(--gold) 50%, var(--paper) 58%, var(--paper) 100%);
    filter: drop-shadow(0 1px 5px rgba(17, 24, 16, 0.4));
  }
}

@media (min-width: 60rem) {
  .hero {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    min-height: calc(112svh - 5.25rem);
  }

  .hero__panel { order: 1; padding-inline: clamp(2.5rem, 6vw, 6.5rem); }
  .hero__media { order: 2; }
}

/* brand statement */
.statement {
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}

.statement .display-lg { text-wrap: balance; }

.statement .lede { max-width: 40rem; margin: 1.6rem auto 0; text-wrap: balance; }

/* story teaser */
.teaser {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.teaser .frame { aspect-ratio: 4 / 5; }

.teaser__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  text-wrap: balance;
}

.teaser__body { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }

@media (min-width: 60rem) {
  .teaser { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); }
  .teaser--flip .teaser__media { order: 2; }
}

/* marigold editorial band */
.band {
  position: relative;
  color: var(--ink);
  background: linear-gradient(180deg, #a9b797 0%, #8fa07c 100%);
  overflow: hidden;
}

.band.section { padding-block: 0; }

.band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding-block: 5rem;
}

.band .frame { aspect-ratio: 3 / 4; max-width: 26rem; }

.band h2 { color: #211703; }

.band p { color: rgba(33, 23, 3, 0.75); }

@media (min-width: 60rem) {
  .band__inner { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   shop
   ========================================================================== */
.page-head {
  padding-block: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); }

.page-head .lede { max-width: 34rem; }

.shop-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: var(--space-4);
}

.shop-toolbar .count { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.06em; }

/* mobile: the full colour chip row eats vertical space above the fold and
   pushes the product grid down. Collapse it behind a "Filters" toggle so
   the grid sits right under the intro copy; desktop keeps the chips inline
   as before. Plain checkbox + label instead of <details> — closed <details>
   content gets an internal content-visibility:hidden in Chromium that
   fights any author override of display. */
.filters { position: relative; border: 1px solid var(--hairline); }

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

.filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9em 1.15em;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.filters__toggle:focus-visible ~ .filters__summary {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.filters__icon {
  width: 0.62rem;
  height: auto;
  transition: transform var(--dur-fast) ease;
}

.filters__toggle:checked ~ .filters__summary .filters__icon { transform: rotate(180deg); }

.filters .chip-row { display: none; padding: 0 1.15em 1.15em; }

.filters__toggle:checked ~ .chip-row { display: flex; }

@media (min-width: 60rem) {
  .filters { border: 0; }
  .filters__summary { display: none; }
  .filters .chip-row { display: flex !important; padding: 0; }
}

/* ==========================================================================
   product detail
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-block: 1.4rem;
}

.breadcrumb a:hover { color: var(--gold-deep); }

.breadcrumb span[aria-hidden] { color: var(--stone); }

.pdp {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.pdp__gallery { display: grid; gap: 0.8rem; }

.pdp__main.frame {
  aspect-ratio: 3 / 4;
  touch-action: pan-y;
}

.pdp__main img {
  transition: opacity 750ms var(--ease-inout), transform 1400ms var(--ease-out);
  -webkit-user-drag: none;
  user-select: none;
}

.pdp__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.89rem;
  height: 2.89rem;
  color: var(--paper);
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.pdp__nav:hover,
.pdp__nav:focus-visible { opacity: 1; }

.pdp__nav:active { transform: translateY(-50%) scale(0.92); }

.pdp__nav--prev { left: 0.9rem; }
.pdp__nav--next { right: 0.9rem; }

.pdp__nav svg { width: 1.96rem; height: 1.96rem; }

@media (max-width: 59.99rem) {
  .pdp__nav { width: 1.43rem; height: 1.43rem; color: var(--paper); }
  .pdp__nav svg { width: 0.68rem; height: 0.68rem; }
}

@media (min-width: 60rem) {
  .pdp__nav { opacity: 0; }
  .pdp__main:hover .pdp__nav,
  .pdp__nav:focus-visible { opacity: 1; }
}

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}

.pdp__thumbs .frame {
  aspect-ratio: 3 / 4;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
  opacity: 0.75;
}

.pdp__thumbs .frame:hover { opacity: 1; }

.pdp__thumbs .frame.active { outline-color: var(--gold); opacity: 1; }

/* the thumbnail strip rebuilds every <img> from scratch on every reorder,
   so the monogram-loading placeholder (built for a genuine first-load
   wait) retriggers on every swipe even though these images are already
   cached — the FLIP slide already provides the transition, so skip the
   placeholder/fade system here entirely rather than race its timing. */
.pdp__thumbs .frame::before { display: none; }
.pdp__thumbs .frame img { opacity: 1; }

.pdp__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 34rem;
}

.pdp__title { font-size: clamp(2.1rem, 4.5vw, 3rem); }

.pdp__price { font-size: 1.15rem; color: var(--ink-soft); }

.pdp__desc { color: var(--ink-soft); }

.pdp__desc a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

.variant-row { display: flex; flex-direction: column; gap: 0.8rem; }

.variant-row .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.variant-row .label b { color: var(--ink); font-weight: 700; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.swatch {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 16, 0.15);
  transition: transform var(--dur-fast) var(--ease-out);
}

.swatch::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) ease;
}

.swatch:hover { transform: scale(1.06); }

.swatch.active::after { border-color: var(--gold); }

.size-note {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.pdp__aside { display: flex; flex-direction: column; gap: 2.2rem; }

@media (min-width: 60rem) {
  .pdp {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .pdp__gallery {
    position: sticky;
    top: 6.5rem;
    max-width: none;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .pdp__main.frame { width: 32rem; flex: none; }

  .pdp__thumbs {
    grid-template-columns: 1fr;
    width: 7.5rem;
    flex: none;
  }
}

/* ==========================================================================
   story
   ========================================================================== */
/* extra scroll room below the story header so it can stay pinned while the
   photo pans upward inside it; once the pan finishes the page scrolls on
   normally past it (see setupPinPan in main.js). The pan itself only uses
   the first stretch of this room (see the 0.7 fraction in main.js) so
   there's a brief still "hold" beat before the page catches up, instead
   of the pan finishing right as the page starts moving. */
.story-hero-pin { position: relative; height: calc(260svh - 4.5rem); }

@media (min-width: 60rem) {
  .story-hero-pin { height: calc(260svh - 5.25rem); }
}

.story-hero {
  position: sticky;
  top: 4.5rem;
  min-height: 80svh;
  display: flex;
  align-items: flex-start;
  color: var(--paper);
  overflow: hidden;
}

@media (min-width: 60rem) {
  .story-hero { top: 5.25rem; min-height: calc(100svh - 5.25rem); }
}

.story-hero .frame { position: absolute; inset: 0; height: 100%; }

.story-hero {
  /* how much taller than the frame the photo is rendered — the overhang is
     what the scroll-driven pan reveals. Smaller on mobile so the photo
     reads less zoomed-in and more of the face/turban fits in view. */
  --hero-oversize: 40%;
}

.story-hero .frame img {
  position: absolute;
  inset: 0;
  height: calc(100% + var(--hero-oversize));
  object-position: 22% 68%;
  transform: translateY(var(--hero-pan, 0px));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .story-hero .frame img { transform: none; }
}

@media (max-width: 59.99rem) {
  /* static, no scroll/pin/pan on mobile — a fixed, tightly-cropped frame
     instead. Desktop keeps the sticky pin-pan effect untouched above. */
  .story-hero-pin { height: auto; }

  .story-hero {
    position: static;
    top: auto;
    min-height: 0;
    height: calc(80svh + 2cm);
  }

  .story-hero .frame img {
    height: 100%;
    /* the mobile source is already pre-cropped to this framing, so no
       scale/translate compensation is needed here — object-fit:cover
       (global default) does the rest. */
    object-position: 50% 100%;
    transform: none;
  }
}

.story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(17, 24, 16, 0) 38%, rgba(17, 24, 16, 0.58) 100%);
}

.story-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(7.5rem, 24vh, 14rem);
  padding-bottom: var(--space-6);
}

.story-hero__text {
  margin-inline-start: auto;
  max-width: 33.2rem;
  text-align: start;
}

.story-hero__inner .eyebrow { color: var(--stone); }

.story-hero__text h1 {
  /* scoped down from the shared h1 clamp (2.75rem, 8vw, 5.5rem) — at the
     box width above, the unscaled size wraps "What You Give" onto two
     lines ("What You" / "Give"), which reads worse than a slightly
     smaller headline that holds each phrase on its own line. */
  font-size: clamp(2.75rem, 7.6vw, 5.2rem);
  background-image: linear-gradient(100deg, var(--paper) 0%, var(--paper) 42%, var(--gold) 50%, var(--paper) 58%, var(--paper) 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--paper);
}

.story-hero__text h1.revealed {
  animation: kwCreamSweep 1.3s var(--ease-out) both;
  animation-delay: calc(var(--reveal-delay, 0) * 1ms);
}

@media (prefers-reduced-motion: reduce) {
  .story-hero__text h1 { background-position: -20% 0; }
  .story-hero__text h1.revealed { animation: none; }
}

/* was a small rightward offset for a single accent word (e.g. "Return");
   heroTitleWord is a two-word phrase now, and the offset staggered its
   wrapped lines out of alignment with the line above, so it's off. */
.story-hero__nudge { display: inline-block; }

.prose {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.prose p + p { margin-top: 1.4em; }

/* a line that continues the same thought on its own line, not a new
   paragraph — no paragraph margin, just the line-height gap */
.prose p + p.prose-line { margin-top: 0; }

.story-signoff { font-weight: 700; }

.prose .opener::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding-inline-end: 0.14em;
  color: var(--ink);
}

.pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  max-width: 48rem;
  margin-inline: auto;
  padding-block: var(--space-5);
}

.container--story { max-width: 68rem; }

.story-chapters { display: flex; flex-direction: column; gap: var(--space-6); }

.story-chapter h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

.story-chapter .story-figure { margin-top: var(--space-4); margin-bottom: 0; }

.story-chapter--text-only { max-width: 40rem; margin-inline: auto; text-align: center; }

/* the mark itself, shown once, at the one chapter that explains what it
   means — sized as a visual reference the reader can check the copy
   against, not a decorative flourish */
.story-chapter__mark { color: var(--gold); }
.story-chapter__mark svg { width: 5.5rem; height: auto; margin-inline: auto; }

/* for video/portrait content shot in its native, tall shape — too tall
   to sit level with a short paragraph in the side-by-side grid below
   without floating in a lot of dead space. Reads as a caption over an
   inset portrait instead: centered, contained, its own quiet moment. */
.story-chapter--tall {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

/* a chapter can carry two text blocks off one image (e.g. one figure,
   two beats of copy) — without this they'd run together with nothing
   marking where the first one ends and the second begins */
.story-chapter--tall .story-chapter__text + .story-chapter__text { margin-top: var(--space-4); }

/* photo leads, caption follows — reads as "look, then read" rather than
   a placard sitting ahead of the thing it describes */
/* align-self:center (not margin:auto) — as a flex item, auto margins on
   the cross axis suppress the default stretch behavior the frame's
   aspect-ratio needs to resolve a height from, and it collapsed to 0×0 */
.story-chapter--tall .story-figure {
  order: -1;
  align-self: center;
  width: 26rem;
  max-width: 100%;
  /* .story-chapter .story-figure (above) puts the gap above the figure,
     sized for when it was the last element with text ahead of it — now
     it's first, so that gap needs to fall after it instead, or the text
     sits flush against it with no breathing room at all. */
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* the lead figure (first chapter, right under the hero) gets more room
   to be the biggest thing on the page after the hero itself */
.story-chapter--tall .story-figure.story-figure--lead { width: 32rem; }

/* cascading rows: text and photo side by side, alternating which side
   the photo sits on so the page reads left-to-right, right-to-left down
   the column instead of every chapter stacking the same way. The title
   and paragraph are grouped in one .story-chapter__text block (a single
   grid item) so they stay a tight, cohesive unit vertically centered
   against the photo — keeping them as separate grid items each in their
   own auto row let the tall photo stretch the rows apart and split them. */
.story-chapter--media {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--space-5);
  /* top-aligned, not centered: a centered short photo against a much
     taller text block (or vice versa) floated with visible dead space
     above/below one side — starting both at the heading reads deliberate. */
  align-items: start;
}

/* both pinned to row 1 explicitly — without this, auto-placement doesn't
   backfill column 1 once the flip variant's DOM order visits column 2
   first, so the figure fell to a row of its own below the text */
/* capped narrower than the 7fr column gives it — the fr-share sets the
   photo's size, not the text's; at the full share, a short paragraph
   stretched edge to edge read as sparse, half-empty lines. Capping it
   wraps into more, fuller lines instead, with the leftover column width
   reading as a deliberate gutter next to the photo, not wasted space. */
/* justify-self:end so the capped-width text hugs the gap next to the
   photo — without it, the leftover column width (the photo's column is
   narrower, so the text's column is wider than the 24rem it's capped to)
   sits between text and photo instead, on top of the intended gap. The
   flip variant doesn't need this: its text column is second, so the
   text already starts flush against the gap by default. */
.story-chapter--media .story-chapter__text { grid-row: 1; max-width: 24rem; }
.story-chapter--media:not(.story-chapter--flip) .story-chapter__text { grid-column: 1; justify-self: end; }

/* two beats of copy stacked in one text column, off one photo — same gap
   rule as the two-beat --tall chapter, just scoped to this layout too */
.story-chapter__beat + .story-chapter__beat { margin-top: var(--space-4); }

.story-chapter--media .story-figure {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  width: 100%;
}

/* flip mirrors which side the photo sits on, but keeps the same text:photo
   proportions (7:5) rather than swapping the column sizes themselves */
.story-chapter--media.story-chapter--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.story-chapter--media.story-chapter--flip .story-figure { grid-column: 1; }

.story-chapter--media.story-chapter--flip .story-chapter__text { grid-column: 2; }

@media (max-width: 60rem) {
  .story-chapter--media,
  .story-chapter--media.story-chapter--flip { grid-template-columns: 1fr; }
  .story-chapter--media .story-figure,
  .story-chapter--media.story-chapter--flip .story-figure { grid-column: 1; grid-row: 1; margin-top: 0; margin-bottom: 0; }
  .story-chapter--media .story-chapter__text,
  .story-chapter--media.story-chapter--flip .story-chapter__text { grid-column: 1; grid-row: 2; margin-top: var(--space-4); }
}

.story-figure { margin-block: var(--space-5); }

.story-figure .frame { aspect-ratio: 4 / 5; }

/* a phone portrait shot full-length, edge to edge — any crop cuts off
   either the head or the legs, so this one shows the whole frame at its
   own native shape instead of conforming to the 4:5 every other story
   photo uses. */
.story-figure .frame.frame--native { aspect-ratio: 9 / 16; }

.story-figure figcaption {
  padding-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.story-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-block: var(--space-5);
}

.story-grid .frame { aspect-ratio: 3 / 4; }

.story-grid .frame:nth-child(2) { transform: translateY(2.4rem); }

/* behind-the-scenes shoot-day clip: kept close to its native portrait shape
   (3:4) rather than the 4:5 every other story photo uses, so the chapter
   gets its own taller frame instead of losing more of the picture to match
   the others. The source .mov is pre-cropped to this same 3:4 before it
   ever reaches the browser (see assets/video/story-shoot-day.mp4) — that
   pass trims a baked-in CapCut export mark and an @karmawearofficial handle
   off the bottom of every frame, so nothing further needs cropping here. */
.story-figure .story-video.frame { aspect-ratio: 3 / 4; }

/* second clip is shown at its own native shape rather than conformed to
   the 3:4 above — it's cleaner footage (no export mark to crop around)
   and tall enough that forcing it to match would cut real content. */
.story-figure .story-video--native.frame { aspect-ratio: 540 / 966; }

.story-video { position: relative; }

.story-video__toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(17, 24, 16, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  transition: background var(--dur-fast) ease;
}

.story-video__toggle:hover,
.story-video__toggle:focus-visible { background: rgba(17, 24, 16, 0.58); }

.story-video__toggle svg { width: 1.05rem; height: 1.05rem; }

.story-video__toggle .icon-play { display: none; }
.story-video__toggle.is-paused .icon-pause { display: none; }
.story-video__toggle.is-paused .icon-play { display: block; }

/* ==========================================================================
   cart / checkout
   ========================================================================== */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding-block: var(--space-4) var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

.checkout-steps .step { display: flex; align-items: center; gap: 0.9rem; }

.checkout-steps .step.current { color: var(--ink); }

.checkout-steps .step.done { color: var(--gold-deep); }

.checkout-steps .sep { width: 2.4rem; height: 1px; background: var(--hairline); }

.cart-layout {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  align-items: start;
}

@media (min-width: 60rem) {
  .cart-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 5rem); }
}

.cart-lines { display: flex; flex-direction: column; }

.cart-line {
  display: grid;
  grid-template-columns: 5.6rem 1fr auto;
  gap: 1.1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: center;
}

.cart-line .frame { aspect-ratio: 3 / 4; }

.cart-line__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}

.cart-line__meta { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.15rem; }

.cart-line__price { font-size: 0.95rem; text-align: end; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  margin-top: 0.7rem;
}

.qty button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.qty button:hover { background: var(--stone-soft); color: var(--gold-deep); }

.qty output {
  min-width: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
}

.line-remove {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.55rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--dur-fast) ease;
}

.line-remove:hover { color: var(--wine); }

.summary {
  background: var(--card);
  border: 1px solid var(--hairline-soft);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.summary h2 { font-size: 1.5rem; }

.summary .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.summary .row.total {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}

.summary .small { font-size: 0.78rem; }

.checkout-form { display: flex; flex-direction: column; gap: 2rem; }

.featured-community { padding-bottom: var(--space-6); }

.checkout-form fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.checkout-form legend {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  margin-bottom: 1.1rem;
}

.form-row { display: grid; gap: 1.1rem; }

@media (min-width: 46rem) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: 2fr 1fr 1fr; }
}

.demo-note {
  display: flex;
  gap: 0.8rem;
  padding: 0.95rem 1.1rem;
  background: var(--stone-soft);
  border-inline-start: 2px solid var(--gold);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.empty-state {
  text-align: center;
  padding-block: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.empty-state svg { width: 4rem; color: var(--stone); }

/* ==========================================================================
   faq / contact
   ========================================================================== */
.faq-layout {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

@media (min-width: 60rem) {
  .faq-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(3rem, 7vw, 7rem); }

  /* sticky sidebar only makes sense once the layout is two columns and
     there's a taller left column to scroll past it — on the single-column
     mobile stack this isn't needed and was pushing #contact's anchor-jump
     landing spot too far down (see scroll-margin-top above) */
  .contact-card { position: sticky; top: 6.5rem; }
}

.faq-group { margin-bottom: var(--space-4); }

.faq-group h2 { font-size: 1.6rem; margin-bottom: 1rem; }

.contact-card {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-self: start;
  /* the mobile "Contact us" menu link jumps straight to #contact — this
     compensates for the sticky 4.5rem header so the card lands just
     below it instead of partly hidden underneath, with a little air.
     (Was wrongly set to 5.25rem — the desktop header's height, not
     mobile's — reserving more gap than needed and landing it lower
     than it should.) */
  scroll-margin-top: 4.6rem;
}

.contact-card h2 { font-size: 1.7rem; }

.contact-card p { color: var(--stone); font-size: 0.92rem; }

.contact-card a.mail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  transition: color var(--dur-fast) ease;
}

.contact-card a.mail:hover { color: var(--paper); }

.contact-card .mono { width: 2.4rem; color: var(--gold); opacity: 0.9; }

.contact-card form { display: flex; flex-direction: column; gap: 0.8rem; }

.contact-card .field label { color: var(--stone); }

.contact-card .field input,
.contact-card .field textarea { color: var(--ink); }

.contact-card .field input { padding: 0.72em 1em; }

.contact-card .btn {
  background: transparent;
  border-color: var(--gold);
  color: var(--paper);
}

.contact-card .success {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold);
}

.contact-card.sent form { display: none; }

.contact-card.sent .success { display: block; }

@media (max-width: 59.99rem) {
  .contact-card { background: var(--sage); color: var(--ink); }
  .contact-card p { color: var(--ink-soft); }
  .contact-card p.small { color: var(--ink-faint) !important; }
  .contact-card a.mail { color: var(--gold-deep); }
  .contact-card a.mail:hover { color: var(--ink); }
  .contact-card .mono { color: var(--gold-deep); }
  .contact-card .field label { color: var(--ink-soft); }
  .contact-card .btn { border-color: var(--gold-deep); color: var(--ink); }
}

/* ==========================================================================
   footer + newsletter
   ========================================================================== */
.newsletter {
  background: #131210;
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.newsletter__inner {
  position: relative;
  z-index: 2;
  padding-block: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.3rem;
}

.newsletter h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 18em; }

.newsletter p { color: var(--stone); max-width: 34rem; font-size: 0.95rem; white-space: pre-line; }

.newsletter form {
  display: flex;
  width: 100%;
  max-width: 30rem;
  border: 1px solid rgba(250, 248, 242, 0.28);
  transition: border-color var(--dur-fast) ease;
}

.newsletter form:focus-within { border-color: var(--gold); }

.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 1em 1.2em;
  background: transparent;
  border: 0;
  color: var(--paper);
}

.newsletter input::placeholder { color: rgba(250, 248, 242, 0.45); }

.newsletter input:focus { outline: none; }

.newsletter button {
  padding: 1em 1.6em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.newsletter button:hover { background: var(--paper); }

.newsletter .mono-note {
  color: var(--gold);
  width: 2.1rem;
  margin-bottom: 0.4rem;
}

.newsletter .success {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold);
}

.newsletter.subscribed form { display: none; }

.newsletter.subscribed .success { display: block; }

.site-footer {
  background: #131210;
  color: var(--stone);
  border-top: 1px solid rgba(250, 248, 242, 0.08);
}

.site-footer__inner {
  padding-block: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__brand { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }

.site-footer__brand svg.wordmark { height: 1.1rem; width: auto; color: var(--paper); }

.site-footer__brand p { font-size: 0.85rem; max-width: 20rem; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.site-footer__col h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1rem;
}

.footer-social {
  display: inline-flex;
  color: var(--paper);
  margin-bottom: 1rem;
  transition: color var(--dur-fast) ease;
}

.footer-social:hover { color: var(--gold); }

.footer-social svg { width: 1.4rem; height: 1.4rem; }

.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }

.site-footer__col a {
  font-size: 0.88rem;
  transition: color var(--dur-fast) ease;
}

.site-footer__col a:hover { color: var(--gold); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(250, 248, 242, 0.1);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(206, 198, 175, 0.7);
}

.site-footer__base svg { width: 1.4rem; color: var(--gold); opacity: 0.85; }

/* ---------- language switcher ---------- */
/* mount points are plain divs from index.html; without this, their
   inline-flex child sits at the CSS text baseline instead of the true
   vertical center, reading as "higher" than sibling header icons */
[data-lang-switch-header],
[data-lang-switch-footer],
[data-region-switch-footer] { display: inline-flex; align-items: center; }

.lang-switch { position: relative; display: inline-flex; align-items: center; }

.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
  padding: 0.35rem 0.1rem;
  transition: color var(--dur-fast) ease;
}

.lang-switch__trigger:hover { color: var(--gold-deep); }

.lang-switch__current { white-space: nowrap; }

.lang-switch__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* mobile header: icon only, to leave room for the cart + burger — the
   full native name still appears in the dropdown menu itself */
@media (max-width: 40rem) {
  .site-header .lang-switch__current { display: none; }
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  min-width: 9rem;
  padding: 0.4rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: 0 1.2rem 2.5rem rgba(17, 24, 16, 0.14);
}

.lang-switch.open .lang-switch__menu { display: flex; }

.lang-switch__opt {
  text-align: start;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.lang-switch__opt:hover { background: var(--stone-soft); }

.lang-switch__opt.active { color: var(--gold-deep); font-weight: 700; }

/* footer variant sits on the dark #131210 background */
.site-footer .lang-switch__trigger { color: var(--stone); }

.site-footer .lang-switch__trigger:hover { color: var(--gold); }

.site-footer .lang-switch__menu {
  top: auto;
  bottom: calc(100% + 0.5rem);
  inset-inline-end: auto;
  inset-inline-start: 0;
  background: #1c1a16;
  border-color: rgba(250, 248, 242, 0.14);
}

.site-footer .lang-switch__opt { color: var(--stone); }

.site-footer .lang-switch__opt:hover { background: rgba(250, 248, 242, 0.06); }

.site-footer .lang-switch__opt.active { color: var(--gold); }

/* footer language + ship-to selectors sit side by side, wrapping on narrow viewports */
.footer-switchers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.8rem;
}

/* ---------- ship-to / region switcher (footer only) ---------- */
.region-switch { position: relative; }

.region-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--stone);
  padding: 0.35rem 0.1rem;
  transition: color var(--dur-fast) ease;
}

.region-switch__trigger:hover { color: var(--gold); }

.region-switch__current { white-space: nowrap; }

.region-switch__icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.region-switch__menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  inset-inline-start: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.4rem;
  background: #1c1a16;
  border: 1px solid rgba(250, 248, 242, 0.14);
  box-shadow: 0 1.2rem 2.5rem rgba(17, 24, 16, 0.14);
}

.region-switch.open .region-switch__menu { display: flex; }

.region-switch__opt {
  text-align: start;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--stone);
  padding: 0.55rem 0.7rem;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.region-switch__opt:hover { background: rgba(250, 248, 242, 0.06); }

.region-switch__opt.active { color: var(--gold); font-weight: 700; }

@media (min-width: 60rem) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .site-footer__cols { grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
}

/* light-field canvas */
.light-field { display: block; width: 100%; height: 100%; }

/* four-up variant used on the home page */
@media (min-width: 60rem) {
  .product-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* "you may also like" on the product page: 3 picks fill the desktop
   3-column .product-grid row exactly. Below the grid's own 46rem
   breakpoint it's back to 2 columns, where a 3rd card would orphan alone
   in its own row — so mobile only, hide it and keep the pair. */
@media (max-width: 45.99rem) {
  #related-grid > :nth-child(3) { display: none; }
}

.newsletter input.invalid { box-shadow: inset 0 -2px 0 var(--wine); }

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

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

  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   cookie consent — banner + preferences modal
   Scoped under .consent-* / .lang-switch-style naming so it can't leak into
   the rest of the site. Buttons inherit .btn / .btn--outline exactly as-is
   (same padding/size/weight) so "Accept all" and "Reject all" carry equal
   visual weight, per GDPR guidance — no new button style was invented.
   ========================================================================== */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 92;
  padding: 1.1rem 1.3rem;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-top: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
}

.consent-banner.on { transform: translateY(0); }

.consent-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.consent-banner__title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.1rem;
}

/* the title is redundant with the sentence right below it once space is
   tight — mobile drops it and keeps just the (short) explanation */
@media (max-width: 39.99rem) {
  .consent-banner__title { display: none; }
}

.consent-banner__body {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46rem;
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.consent-banner__actions .btn {
  padding: 0.6em 1.3em;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.consent-banner__actions .text-link { font-size: 0.74rem; }

/* desktop: a little more breathing room than the compact mobile bar (which
   is deliberately tight), but nowhere near the original's bulky --gutter
   padding — a middle ground between the two, mobile is untouched above */
@media (min-width: 60rem) {
  .consent-banner { padding: 1.5rem 2rem; }
  .consent-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .consent-banner__title { font-size: 0.86rem; margin-bottom: 0.2rem; }
  .consent-banner__body { font-size: 0.82rem; line-height: 1.5; }
  .consent-banner__actions { flex-shrink: 0; gap: 0.8rem 1.3rem; }
  .consent-banner__actions .btn { padding: 0.7em 1.5em; font-size: 0.7rem; }
  .consent-banner__actions .text-link { font-size: 0.76rem; }
}

/* preferences modal */
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 40rem) {
  .consent-modal { align-items: center; }
}

.consent-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 16, 0.55);
  opacity: 0;
  transition: opacity var(--dur-med) ease;
}

.consent-modal.on .consent-modal__scrim { opacity: 1; }

.consent-modal__panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 75svh;
  overflow-y: auto;
  background: var(--card);
  padding: 1.5rem var(--gutter) 1.3rem;
  transform: translateY(24px);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) ease;
}

.consent-modal.on .consent-modal__panel { transform: translateY(0); opacity: 1; }

@media (min-width: 40rem) {
  .consent-modal__panel { border-radius: 2px; }
}

.consent-modal__close {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--gutter);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-faint);
  transition: color var(--dur-fast) ease;
}

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

.consent-modal__panel h2 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  padding-inline-end: 2rem;
}

.consent-modal__panel > p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.consent-category {
  padding-block: 0.65rem;
  border-top: 1px solid var(--hairline-soft);
}

.consent-category__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.consent-category .small {
  margin-top: 0.25rem;
  color: var(--ink-faint);
  font-size: 0.74rem;
  line-height: 1.45;
}

.consent-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 2.1rem;
  height: 1.25rem;
}

.consent-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.consent-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--stone-soft);
  border: 1px solid var(--hairline);
  transition: background var(--dur-fast) ease;
}

.consent-toggle__track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(17, 24, 16, 0.25);
  transition: transform var(--dur-fast) var(--ease-out);
}

.consent-toggle input:checked + .consent-toggle__track { background: var(--gold); border-color: var(--gold); }

.consent-toggle input:checked + .consent-toggle__track::after { transform: translateX(0.85rem); }

.consent-toggle input:focus-visible + .consent-toggle__track { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.consent-toggle--locked {
  background: var(--stone-soft);
  border: 1px solid var(--hairline);
  opacity: 0.7;
}

.consent-toggle--locked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: calc(100% - 1.05rem);
  width: 0.95rem;
  height: 0.95rem;
  background: var(--card);
}

.consent-modal__panel .text-link {
  display: inline-block;
  font-size: 0.78rem;
  margin-top: 0.7rem;
  margin-bottom: 0.9rem;
}

.consent-modal__panel .btn--wide { margin-top: 0.2rem; padding-block: 0.85em; }

/* ==========================================================================
   legal document pages (privacy / cookies / terms / impressum)
   Reuses .prose for paragraph rhythm; adds only what .prose doesn't cover
   (headings, lists, a simple table) so the plain-text policy content reads
   cleanly. Placeholders like [INSERT_BRAND_NAME] are left as literal
   bracketed text — a well-understood template convention — so they stay
   easy to find without inventing new highlight styling.
   ========================================================================== */
.legal-doc { max-width: 46rem; margin-inline: auto; }

.legal-doc__notice {
  font-size: 0.85rem;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  padding: 0.9rem 1.2rem;
  margin-bottom: var(--space-4);
}

.legal-doc__updated {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}

.legal-doc h2 {
  font-size: 1.3rem;
  margin-top: var(--space-4);
  margin-bottom: 0.8rem;
}

.legal-doc section:first-of-type h2 { margin-top: 0; }

.legal-doc ul,
.legal-doc ol {
  margin: 1em 0 1em 1.3em;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.85;
}

.legal-doc li + li { margin-top: 0.4em; }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.92rem;
}

.legal-doc th,
.legal-doc td {
  text-align: start;
  padding: 0.65em 0.9em;
  border: 1px solid var(--hairline);
  vertical-align: top;
}

.legal-doc th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--stone-soft);
}

.legal-doc table + p,
.legal-doc p + table { margin-top: 1em; }

/* ==========================================================================
   RIGHT-TO-LEFT (Arabic) — the site's first RTL locale.
   i18n.js sets <html dir="rtl"> synchronously for `ar`, so every rule below
   is inert for the six LTR locales — their layout is byte-for-byte unchanged.
   Most of the site is flexbox or logical properties (margin-inline,
   inset-inline, text-align:start) that mirror on their own; this block is
   only the handful of things that can't: fonts, cursive-safe tracking, and
   the transform/float/position flips.
   ========================================================================== */
[dir="rtl"] {
  /* Denton (Latin-only, extracted from the style-book PDF) and Helvetica Neue
     carry no Arabic glyphs, so swap in a system Arabic stack led by SF Arabic
     (macOS/iOS) — clean and modern for the designer's review, with Segoe /
     Noto covering Windows / Android / Linux. A licensed Arabic display face
     can replace --font-display later for more editorial character (ties into
     the parked font web-licence task). */
  --font-body: "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-display: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", serif;
}

[dir="rtl"] * {
  /* Arabic is a connected script — positive letter-spacing pulls the joins
     apart and wrecks legibility, so neutralise the caps/eyebrow tracking used
     throughout. !important is deliberate: some tracked rules out-specify a
     plain [dir="rtl"] * and 0 tracking is always correct for Arabic. */
  letter-spacing: 0 !important;
  /* Arabic has no italic; block the browser from faux-slanting the display
     face (its rules keep font-style: italic, harmless once un-synthesised). */
  font-synthesis: none;
}

/* PDP photo arrows: mirror both the position and the glyph so "previous"
   points the natural RTL way (rightwards) and sits on the right. */
[dir="rtl"] .pdp__nav--prev { left: auto; right: 0.9rem; }
[dir="rtl"] .pdp__nav--next { right: auto; left: 0.9rem; }
[dir="rtl"] .pdp__nav svg { transform: scaleX(-1); }

/* Story drop cap floats to the reading-start side (right in RTL). The gap to
   the body text is already padding-inline-end, so it flips on its own. */
[dir="rtl"] .prose .opener::first-letter { float: right; }

/* Contact-link hover nudge follows the reading direction (leftwards in RTL). */
[dir="rtl"] .menu-overlay__contact:hover svg { transform: translateX(-3px); }

/* Consent cookie toggles: rest the knob on the right, travel left when on,
   so "off → on" reads start → end in RTL (locked = always-on, knob at start). */
[dir="rtl"] .consent-toggle__track::after { left: auto; right: 1px; }
[dir="rtl"] .consent-toggle input:checked + .consent-toggle__track::after { transform: translateX(-0.85rem); }
[dir="rtl"] .consent-toggle--locked::after { left: auto; right: calc(100% - 1.05rem); }

/* ==========================================================================
   TEMPORARY — coming-soon overlay. Delete this whole section (and the
   matching HTML block + js/coming-soon.js) when the site is ready to launch.
   ========================================================================== */
.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: opacity 800ms var(--ease-inout), visibility 0s linear 800ms;
}

.coming-soon.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.coming-soon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 26rem;
  padding: 2rem;
  text-align: center;
}

.coming-soon__mark {
  width: clamp(48px, 9vw, 72px);
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.coming-soon__eyebrow { color: var(--gold-deep); }
.coming-soon__title { margin: 0; }
.coming-soon__body { margin: 0; }

.coming-soon__skip {
  margin-top: 0.6rem;
}