/* ============================================================
   APSTL — STYLES
   Colours and fonts live in :root below if you want to tweak.
   ============================================================ */

/* ----- Baron Neue (drop font files into /fonts) ----- */
@font-face {
  font-family: "Baron Neue";
  src: url("../fonts/BaronNeue.woff2") format("woff2"), url("../fonts/BaronNeue.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Baron Neue";
  src: url("../fonts/BaronNeue-Bold.woff2") format("woff2"), url("../fonts/BaronNeue-Bold.otf") format("opentype");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Baron Neue";
  src: url("../fonts/BaronNeue-Black.woff2") format("woff2"), url("../fonts/BaronNeue-Black.otf") format("opentype");
  font-weight: 800 900;
  font-display: swap;
}

:root {
  --bg: #050505;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --line: rgba(255, 255, 255, 0.14);
  --card: #0d0d0d;
  --bar: rgba(5, 5, 5, 0.86);
  --home-shift: 2cm;   /* how far down the screen the home hero copy sits */
  --accent: #ffffff;            /* change this when you find your accent colour */
  --halo: rgba(255,255,255,0.10); /* soft monochrome light */
  --font-display: "Baron Neue", "Arial Black", Impact, sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --header-h: 72px;
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }

/* ============ HEADER ============ */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; z-index: 60;
  background: linear-gradient(rgba(5,5,5,0.85), rgba(5,5,5,0));
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

#headerLogo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.14em;
  /* no transform here — JS measures this box as the flight target for the
     hero lockup, so it must sit at its true resting position throughout */
  visibility: hidden; opacity: 0;
  transition: opacity 0.5s ease;
}
#headerLogo svg { width: 30px; height: 30px; }
body.docked-logo #headerLogo, body.subpage #headerLogo {
  visibility: visible; opacity: 1;
}

/* ---- header counter: number with "People Reached" beneath it ---- */
#counterDock {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-display);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  line-height: 1; text-align: center; cursor: pointer;
  visibility: hidden; opacity: 0;
  transform: translate(-50%, calc(-50% - 7px));
  transition: opacity 0.6s ease 0.08s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
#counterDock .n { font-size: 21px; letter-spacing: 0.08em; }
#counterDock .lbl {
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; padding-left: 0.34em;
}
body.docked-counter #counterDock, body.subpage #counterDock {
  visibility: visible; opacity: 1; transform: translate(-50%, -50%);
}

/* header right: bag + menu */
.hdr-right { display: flex; align-items: center; gap: 12px; }

#bagBtn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(5,5,5,0.6);
  display: none; place-items: center;
}
#bagBtn svg { width: 18px; height: 18px; }
#bagBtn .bag-count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 9px; background: var(--fg); color: var(--bg);
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
  font-family: var(--font-body);
}
body.has-cart #bagBtn { display: grid; }

/* menu button */
#menuBtn {
  width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(5,5,5,0.6);
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
}
#menuBtn span { display: block; width: 18px; height: 2px; background: var(--fg); position: relative; }
#menuBtn span::before, #menuBtn span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--fg);
}
#menuBtn span::before { top: -6px; } #menuBtn span::after { top: 6px; }
body.show-menu-btn #menuBtn, body.subpage #menuBtn {
  opacity: 1; transform: none; pointer-events: auto;
}

/* ============ MENU OVERLAY ============ */
#menuOverlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(3,3,3,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
}
body.menu-open #menuOverlay { opacity: 1; visibility: visible; }
#menuNav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#menuOverlay a {
  font-family: var(--font-display); font-size: clamp(34px, 7vw, 64px);
  letter-spacing: 0.1em; padding: 6px 18px; color: var(--fg);
  opacity: 0.85; transition: opacity 0.2s, letter-spacing 0.25s;
}
#menuOverlay a:hover { opacity: 1; letter-spacing: 0.18em; }
#menuOverlay a.current { opacity: 1; }
#menuOverlay a.current::after { transform: scaleX(1); }
#menuClose {
  position: absolute; top: 18px; right: 28px; font-size: 30px; background: none;
  border: none; color: var(--fg); cursor: pointer; font-family: var(--font-body);
}
#menuOverlay .overlay-cross { width: 60px; margin: 0 auto 28px; opacity: 0.9; }
#menuOverlay .overlay-cross svg { width: 100%; height: auto; display: block; }

/* ============ HERO LOCKUP (fixed, auto-plays on load) ============ */
#heroLock {
  position: fixed; top: 50%; left: 50%; z-index: 50;
  transform: translate(-50%, -50%);
  will-change: transform; cursor: default;
}
body.docked-logo #heroLock { visibility: hidden; }
/* Pre-paint state so nothing flashes at its final size before the timeline
   starts. The cross width mirrors JS frame 0 (1.75x of its resting clamp). */
body.intro-armed #heroLock .lock-wordwrap { width: 0; }
body.intro-armed .lock-cross svg { width: clamp(157px, 28vw, 315px); }
body.intro-armed #heroTagline { opacity: 0; }
body.intro-armed .scroll-hint { opacity: 0; }
.lock-inner { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
/* JS animates this width from ~1.7x down to 1x during the reveal */
.lock-cross svg { width: clamp(90px, 16vw, 180px); height: auto; display: block; }
.lock-wordwrap { overflow: hidden; }
.lock-word {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(64px, 13vw, 160px); letter-spacing: 0.05em; line-height: 0.9;
  white-space: nowrap; will-change: transform;
}
#heroTagline {
  position: fixed; top: calc(50% + clamp(120px, 18vw, 210px)); left: 50%;
  transform: translateX(-50%); z-index: 50;
  font-family: var(--font-display); font-size: clamp(12px, 1.6vw, 17px);
  letter-spacing: 0.6em; color: var(--muted); white-space: nowrap;
  will-change: opacity;
}
body.docked-logo #heroTagline { visibility: hidden; }
.scroll-hint {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.5em; color: var(--muted);
  animation: hint 2.2s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
/* transform only — JS owns .scroll-hint's opacity, and an animated opacity
   here would override the inline value and make the hint flicker */
@keyframes hint { 50% { transform: translate(-50%, 8px); } }

/* tooltip (positioned by JS, never scales) */
#counterTip {
  position: fixed; z-index: 80; max-width: 300px; padding: 14px 16px;
  background: #111; border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: #cfcfcf;
  opacity: 0; visibility: hidden; transition: opacity 0.25s;
  pointer-events: none;
}
#counterTip.show { opacity: 1; visibility: visible; }
#counterTip::after {
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: #111; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}

/* ============ HERO VIEWPORT ============ */
/* one screen of runway — the intro plays over it, the carousel is next.
   min-height (not height) so the copy can never be clipped on short screens. */
#introZone {
  /* a shade under a full screen: the hero copy is centred in here, so this
     height is most of what sets the gap down to the carousel */
  min-height: 88vh; min-height: 88svh;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 5;
}

/* The outro copy, relocated into the hero — hidden until the lockup lands.
   Scoped to #introZone so it outranks the generic .section rule below.

   --home-shift nudges the whole block down the screen. It is a relative
   offset, not margin, so the hero's height is unchanged and nothing below
   it moves — the gap down to the carousel simply closes by the same amount. */
#introZone .hero-outro {
  position: relative; top: var(--home-shift, 0);
  min-height: 0; padding: var(--header-h) 24px 44px; gap: 18px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.9s ease 0.35s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
body.docked-logo #introZone .hero-outro { opacity: 1; transform: none; pointer-events: auto; }

/* Arrived from elsewhere on the site: the intro is skipped, so everything it
   would have revealed is simply already there — no fades, no settling. */
body.no-intro #introZone .hero-outro,
body.no-intro #headerLogo,
body.no-intro #counterDock,
body.no-intro #menuBtn,
body.no-intro .scroll-hint { transition: none !important; }
.hero-outro-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-outro-extra { margin-top: 4px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.hero-outro-extra a { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.25s, border-color 0.25s; }
.hero-outro-extra a:hover { color: var(--fg); border-color: var(--fg); }

/* ============ CAROUSEL ============ */
/* One screen, no scroll runway — the ring is driven by wheel and drag now,
   so the section no longer needs height for scroll to travel through. */
#carouselSection { position: relative; }
.carousel-sticky {
  position: relative; height: 82vh; height: 82svh; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.carousel-heading {
  font-size: clamp(26px, 4.5vw, 52px); letter-spacing: 0.18em; margin-bottom: 8px;
  /* a relative nudge, so only the heading moves — the ring stays put */
  position: relative; top: 18px; z-index: 2;
}
/* The stage is the wheel-capture zone, so it is deliberately NOT full width:
   the margins either side let the page scroll past without the pointer
   having to leave the carousel entirely. Wide enough to still cover the ring. */
.carousel-stage {
  width: min(1040px, 94vw); margin: 0 auto; flex: 0 0 auto; height: 396px;
  perspective: 1700px; perspective-origin: 50% 40%;
  display: grid; place-items: center;
  /* horizontal drags spin the ring; vertical ones still scroll the page */
  touch-action: pan-y;
}
.ring {
  position: relative; width: 1px; height: 1px;
  transform-style: preserve-3d; will-change: transform;
}
/* floating, double-sided items */
.card {
  position: absolute; top: -170px; left: -120px; width: 240px; height: 340px;
  transform-style: preserve-3d; cursor: pointer;
}
.card .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);            /* explicit plane so Chrome hides backfaces reliably */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.card .face.back { transform: rotateY(180deg); }
.card .face img {
  width: 100%; height: 278px; object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.6));
  transition: transform 0.3s;
}
.card:hover .face img { transform: scale(1.04); }
.card .meta {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  padding: 14px 6px 0; width: 100%;
}
.card .meta .nm { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.13em; }
.card .meta .pr { font-size: 12px; color: var(--muted); }
.carousel-hint { margin-top: 30px; font-size: 10px; letter-spacing: 0.4em; color: #555; }

/* ============ OUTRO / GENERIC SECTIONS ============ */
.section {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 24px; gap: 22px;
}
.section h2 { font-size: clamp(30px, 5vw, 60px); letter-spacing: 0.1em; }
.section p { max-width: 560px; color: var(--muted); line-height: 1.7; }
.btn {
  display: inline-block; padding: 15px 42px; border: 1px solid var(--fg);
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3em;
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: var(--fg); color: var(--bg); }

/* ============ SUBPAGES ============ */
.page-wrap { padding: calc(var(--header-h) + 60px) 24px 80px; max-width: 1080px; margin: 0 auto; }
.page-title { font-size: clamp(40px, 7vw, 84px); letter-spacing: 0.08em; text-align: center; }
.page-intro { text-align: center; color: var(--muted); max-width: 600px; margin: 18px auto 0; line-height: 1.7; }
.page-intro p { margin: 0; }
.page-intro p + p { margin-top: 22px; }
/* the stacked opening lines read as a statement of purpose, not body copy */
.page-intro .intro-lede {
  color: var(--fg); font-family: var(--font-display);
  font-size: clamp(14px, 1.7vw, 18px); letter-spacing: 0.12em; line-height: 2;
}

/* A scripture heading is a phrase, not a two-word title. It breaks out of the
   1080px page column so it can run on one line well past that width, and only
   wraps on phones.

   Centred with margin only — NOT transform. The subpage "pageIn" animation
   below animates transform with fill-mode:both, and animations outrank normal
   declarations, so any transform set here would be overwritten and the heading
   would sit half a column to the right. */
.page-title--verse {
  font-size: clamp(26px, 4.4vw, 48px); line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: none; text-wrap: balance;
  width: min(1280px, 92vw); max-width: none;
  margin-left: calc(50% - min(640px, 46vw));
}
.page-title--verse::before { content: "\201C"; }
.page-title--verse::after  { content: "\201D"; }
.verse-ref {
  text-align: center; margin: 18px 0 0; color: var(--muted);
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.42em;
  text-transform: uppercase;
}
.verse-ref[hidden] { display: none; }

/* mission */
.mission-total { text-align: center; margin: 70px 0 10px; }
.mission-total .big, .mt-flyer {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(70px, 13vw, 170px); line-height: 1;
}
.mission-total .lbl { letter-spacing: 0.5em; color: var(--muted); font-family: var(--font-display); font-size: 13px; margin-top: 12px; }

/* ---- the travelling number ------------------------------------------------
   A fixed clone that shares .big's type and gradient (see the grouped
   selectors above), so scale 1 is pixel-identical to its destination.

   It is full-viewport-width with text-align:center rather than a shrink-to-fit
   box positioned by its measured width. Both the header number and the mission
   total are already centred on the viewport's vertical axis, so letting layout
   do the centring removes any dependence on measuring text — which is what
   made it drift off-centre while scaling. Only its height is measured. */
.mt-flyer {
  /* above #menuOverlay (90) — the flight can start from the open menu, and
     the number has to stay visible while that overlay fades away */
  position: fixed; left: 0; top: 0; width: 100%; z-index: 95;
  text-align: center; white-space: nowrap;
  transform-origin: 50% 50%;
  pointer-events: none; will-change: transform;
}
/* the real number stays hidden until the flyer lands on it */
body.mi-armed #missionTotal .big { visibility: hidden; }

/* On the mission page the number lives in the page itself, so the header
   copy is gone for good — it flew down here. Placed after the body.subpage
   rule above, which it ties with on specificity. */
body[data-page="mission"] #counterDock { display: none; }

/* Everything that fades while the number is in flight. Targets body's own
   children so it works on every page layout (main/section/footer/#introZone),
   and switches off "pageIn" first — those keyframes animate opacity with
   fill-mode:both and would otherwise outrank these declarations. */
body.mi-run > main,
body.mi-run > section,
body.mi-run > footer,
body.mi-run > #introZone,
body.mi-run .scroll-hint,
body.mi-run #headerLogo,
body.mi-run .hdr-right {
  animation: none !important;
  transition: opacity 0.5s ease;
}
body.mi-dim > main,
body.mi-dim > section,
body.mi-dim > footer,
body.mi-dim > #introZone,
body.mi-dim .scroll-hint,
body.mi-dim #headerLogo,
body.mi-dim .hdr-right { opacity: 0; }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 70px; }
.bk-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px;
  background: var(--card); display: flex; flex-direction: column; gap: 10px;
}
.bk-card .val { font-family: var(--font-display); font-weight: 800; font-size: 44px; }
.bk-card .lab { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; }
.bk-card .desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.bk-card .bar { height: 3px; background: #1d1d1d; border-radius: 2px; overflow: hidden; margin-top: 8px; }
.bk-card .bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width 1.2s ease; }

/* store grid */
/* ---- filter bar ----
   A full-bleed band rather than a panel inset in the text column — inset,
   it read as a floating box. Width breaks out with margin (not transform,
   which the subpage pageIn animation would overwrite). */
.shop-filters {
  position: sticky; top: var(--header-h); z-index: 40;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: 20px 24px 16px; margin-top: 40px; margin-bottom: 4px;
  background: var(--bar); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.shop-genders, .shop-types {
  display: flex; justify-content: center; flex-wrap: wrap;
}
.shop-genders[hidden], .shop-types[hidden] { display: none; }

/* the ranges are the shop's main navigation — big, and set apart */
.shop-genders {
  gap: clamp(16px, 4vw, 52px);
  padding-bottom: 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.shop-range {
  position: relative; cursor: pointer; white-space: nowrap;
  background: none; border: none; padding: 2px 0;
  font-family: var(--font-display); color: var(--muted);
  font-size: clamp(18px, 3.1vw, 33px); font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  transition: color 0.25s;
}
.shop-range:hover, .shop-range.on { color: var(--fg); }
.shop-range::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--fg); transform: scaleX(0);
  transition: transform 0.35s var(--ease-cine);
}
.shop-range.on::after { transform: scaleX(1); }
.shop-range.empty { opacity: 0.38; }
.shop-range.empty.on { opacity: 1; }

/* categories stay small and quiet underneath */
.shop-types { gap: 7px; }
.shop-chip {
  font-family: var(--font-display); cursor: pointer; white-space: nowrap;
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 8px 16px;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.shop-chip:hover { color: var(--fg); border-color: var(--fg); }
.shop-chip.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.shop-chip.empty { opacity: 0.42; }
.shop-chip.empty.on { opacity: 1; }

.shop-count {
  text-align: center; color: var(--muted); margin: 6px 0 0;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  font-family: var(--font-display);
}
.shop-empty { text-align: center; color: var(--muted); margin: 70px 0; line-height: 1.7; }
.shop-more { display: flex; justify-content: center; margin: 54px 0 10px; }
.shop-more button {
  font-family: var(--font-display); cursor: pointer;
  background: none; border: 1px solid var(--fg); color: var(--fg);
  padding: 15px 46px; font-size: 12px; letter-spacing: 0.3em;
  transition: background 0.25s, color 0.25s;
}
.shop-more button:hover { background: var(--fg); color: var(--bg); }
.shop-more button[hidden] { display: none; }

/* ---- product tiles ----
   Wide and tight: the grid breaks out of the 1080px text column so the
   photos carry the page, with square corners and no card chrome. */
.store-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 44px 8px; margin-top: 28px;
  width: min(1720px, 96vw);
  margin-left: calc(50% - min(860px, 48vw));
}
.store-card { position: relative; }
.sc-link { display: block; color: inherit; }
.sc-imgwrap {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border: none; border-radius: 0;
  background: #161616;
}
.sc-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* image dots */
.sc-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
  display: flex; gap: 6px; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
}
.store-card:hover .sc-dots { opacity: 1; }
.sc-dot {
  width: 22px; height: 3px; border-radius: 0; padding: 0; cursor: pointer;
  border: none; background: rgba(255,255,255,0.35); transition: background 0.25s;
}
.sc-dot.on { background: #fff; }

/* quick-add size row */
.sc-sizes {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 9px 8px; border-radius: 0;
  background: rgba(10,10,10,0.72); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.28s var(--ease-cine), transform 0.28s var(--ease-cine);
}
.store-card:hover .sc-sizes { opacity: 1; transform: none; pointer-events: auto; }
.sc-size {
  min-width: 34px; cursor: pointer; border-radius: 0; padding: 7px 8px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em;
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sc-size:hover { background: #fff; color: #000; border-color: #fff; }

/* colourway swatches */
.sc-swatches { display: flex; gap: 7px; margin: 11px 2px 0; }
.sc-swatch {
  width: 13px; height: 13px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--sw); border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-swatch:hover { transform: scale(1.15); }
.sc-swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }

.sc-meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px 0; }
.sc-name { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.12em; }
.sc-price { font-size: 12px; color: var(--muted); }

/* quick-add confirmation */
#bagToast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 100; max-width: min(420px, 92vw);
  padding: 14px 22px; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-cine);
}
#bagToast.show { opacity: 1; transform: translate(-50%, 0); }

/* Touch devices have no hover to reveal anything, so the size row and the
   image dots are simply always on. Dots move up top to clear the sizes. */
@media (hover: none) {
  .sc-sizes { opacity: 1; transform: none; pointer-events: auto; }
  .sc-dots { opacity: 1; bottom: auto; top: 10px; }
}
/* The ring must stay inside .carousel-stage, because the stage is what
   captures the wheel — a card sticking out past it would not respond.
   So the cards shrink in step with the stage as the viewport narrows. */
@media (max-width: 1100px) {
  .card { width: 210px; height: 300px; left: -105px; top: -150px; }
  .card .face img { height: 244px; }
  .carousel-stage { height: 356px; }
  .carousel-sticky { min-height: 500px; }
}
@media (max-width: 900px) {
  /* narrow enough that side margins no longer give a useful escape route, so
     the stage spans the full width and the ring is sized to sit inside it */
  .card { width: 175px; height: 250px; left: -87.5px; top: -125px; }
  .card .face img { height: 202px; }
  .carousel-stage { height: 306px; width: 100%; }
  .carousel-sticky { min-height: 430px; }
}
@media (max-width: 1180px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  /* two across, the way the shops you liked do it */
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 6px; margin-top: 18px; width: 100%; margin-left: 0; }
  .shop-filters { margin-top: 26px; padding: 15px 14px 12px; }
  .shop-genders { gap: 14px; padding-bottom: 12px; margin-bottom: 11px; }
  .shop-range { font-size: 16px; letter-spacing: 0.06em; }
  .shop-chip { font-size: 9.5px; letter-spacing: 0.13em; padding: 7px 11px; }
  .sc-sizes { gap: 4px; padding: 6px 5px; left: 0; right: 0; bottom: 0; }
  .sc-size { min-width: 0; flex: 1 1 auto; padding: 6px 3px; font-size: 10px; }
  .sc-name, .sc-price { font-size: 11px; }
  .sc-meta { gap: 8px; padding-top: 10px; }
}

/* ============ PRODUCT PAGE ============ */
/* wider than the standard text column so the tall shot has room */
.pd-page { max-width: 1360px; }
.pd-back { font-size: 11px; letter-spacing: 0.3em; color: var(--muted); transition: color 0.25s; }
.pd-back:hover { color: var(--fg); }

.pd-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 54px; margin-top: 34px; align-items: start; }

/* ---- gallery: rail of thumbs, then one tall shot ---- */
.pd-gallery {
  display: grid; grid-template-columns: 78px 1fr; gap: 14px;
  position: sticky; top: calc(var(--header-h) + 18px);
}
/* the rail is as tall as the main shot and scrolls when there are more
   photos than fit (contain: size stops it stretching the row) */
.pd-rail {
  display: flex; flex-direction: column; gap: 10px;
  contain: size; overflow-y: auto; scrollbar-width: none;
}
.pd-rail::-webkit-scrollbar { display: none; }
.pd-rail .pd-thumb { flex: 0 0 auto; }
.pd-rail[hidden] { display: none; }
.pd-gallery:has(.pd-rail[hidden]) { grid-template-columns: 1fr; }
.pd-thumb {
  width: 78px; aspect-ratio: 3/4; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: var(--card);
  transition: border-color 0.3s, opacity 0.3s;
  opacity: 0.62;
}
.pd-thumb:hover { opacity: 1; }
.pd-thumb.on { border-color: var(--fg); opacity: 1; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* tall main shot */
.pd-stage { aspect-ratio: 3/4.2; display: grid; place-items: center; border-radius: 0; overflow: hidden; }
.pd-stage img { width: 100%; height: 100%; object-fit: cover; }

/* ---- what this piece funds ---- */
/* Set in the body face, sentence case — it is a sentence about the mission,
   not a spec label, and Baron Neue in caps made it read as shouted. */
.pd-funds {
  margin-top: 16px; padding: 13px 17px;
  border: 1px solid var(--line); border-left: 2px solid var(--fg);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  letter-spacing: 0.01em; text-transform: none;
  line-height: 1.6; color: var(--fg);
}
.pd-funds[hidden] { display: none; }

.pd-block { margin-top: 28px; }
.pd-block[hidden] { display: none; }
.pd-chosen { color: var(--fg); letter-spacing: 0.14em; margin-left: 10px; text-transform: none; }
.pd-note-inline { color: #c77; letter-spacing: 0.05em; margin-left: 10px; }

/* ---- colour: photo swatches ---- */
.pd-swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.pd-swatch {
  width: 60px; aspect-ratio: 3/4; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: var(--card);
  transition: border-color 0.25s, opacity 0.25s;
  opacity: 0.7;
}
.pd-swatch:hover { opacity: 1; }
.pd-swatch.on { border-color: var(--fg); opacity: 1; box-shadow: inset 0 0 0 1px var(--fg); }
.pd-swatch img { width: 100%; height: 100%; object-fit: cover; }
/* a Woo product carries colour names but no per-colour photo */
.pd-swatch.flat {
  width: auto; aspect-ratio: auto; padding: 9px 15px 9px 34px; position: relative;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em;
  color: var(--fg); text-transform: uppercase; opacity: 1;
}
.pd-swatch.flat::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sw); border: 1px solid rgba(255,255,255,0.35);
}

/* ---- the design's story ---- */
.pd-inspo {
  margin-top: 52px; padding: 52px 24px 60px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.pd-inspo[hidden] { display: none; }
.pd-inspo-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.pd-inspo h2 {
  font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.24em; margin-bottom: 30px;
}
.pd-verse {
  margin: 0 0 30px; font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 28px); line-height: 1.45; letter-spacing: 0.02em;
  text-transform: none; text-wrap: balance;
}
.pd-verse[hidden] { display: none; }
.pd-verse span::before { content: "\201C"; }
.pd-verse span::after { content: "\201D"; }
.pd-verse cite {
  display: block; margin-top: 16px; font-style: normal;
  font-size: 11px; letter-spacing: 0.42em; color: var(--muted); text-transform: uppercase;
}
.pd-verse cite[hidden] { display: none; }
.pd-inspo-text { color: var(--muted); line-height: 1.85; font-size: 15px; text-wrap: pretty; }
.pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: 0.08em; line-height: 1.1; }
.pd-price { font-family: var(--font-display); font-size: 22px; margin-top: 12px; color: var(--muted); }
.pd-desc { margin-top: 22px; color: var(--muted); line-height: 1.75; font-size: 14.5px; }
.pd-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.3em; margin: 30px 0 12px; color: #ccc; }
.size-row { display: flex; gap: 10px; flex-wrap: wrap; }
.size-pill {
  min-width: 52px; padding: 12px 0; text-align: center; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; background: none; color: var(--fg);
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.size-pill:hover { border-color: var(--fg); }
.size-pill.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.qty-row { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 8px; width: max-content; }
.qty-row button { width: 44px; height: 46px; background: none; border: none; color: var(--fg); font-size: 18px; cursor: pointer; }
.qty-row .q { width: 40px; text-align: center; font-family: var(--font-display); font-size: 15px; }
.add-btn {
  margin-top: 30px; width: 100%; padding: 18px; background: var(--fg); color: var(--bg);
  border: 1px solid var(--fg); font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.3em; cursor: pointer; transition: opacity 0.2s;
}
.add-btn:hover { opacity: 0.85; }
.add-btn.added { background: var(--bg); color: var(--fg); }
.pd-note { margin-top: 14px; font-size: 12px; color: #666; text-align: center; }
.viewbag-link { display: none; margin-top: 12px; text-align: center; font-size: 12px; letter-spacing: 0.2em; text-decoration: underline; }
.viewbag-link.show { display: block; }

/* ============ CART PAGE ============ */
.cart-list { margin-top: 50px; display: flex; flex-direction: column; gap: 14px; }
.cart-row {
  display: grid; grid-template-columns: 90px 1fr auto auto auto; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; background: var(--card);
}
.cart-row img { width: 90px; height: 100px; object-fit: contain; }
.cart-row .cr-name { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; }
.cart-row .cr-size { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cart-row .cr-line { font-family: var(--font-display); font-size: 15px; }
.cart-row .cr-x { background: none; border: none; color: #666; font-size: 20px; cursor: pointer; }
.cart-row .cr-x:hover { color: var(--fg); }
.cart-total {
  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 24px;
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.1em;
}
.cart-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.cart-empty { text-align: center; margin-top: 80px; color: var(--muted); }
.cart-empty .btn { margin-top: 26px; }
.checkout-note { margin-top: 16px; font-size: 12px; color: #666; }

/* ============ PROFILE PAGE ============ */
.profile-form { max-width: 560px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 26px; }
.pf-section { border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: var(--card); }
.pf-section h3 { font-size: 13px; letter-spacing: 0.3em; margin-bottom: 20px; color: #ccc; }
.pf-field { margin-bottom: 16px; }
.pf-field label { display: block; font-size: 11px; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; }
.pf-field input, .pf-field select {
  width: 100%; padding: 13px 14px; background: #0a0a0a; border: 1px solid var(--line);
  border-radius: 8px; color: var(--fg); font-size: 14px; font-family: var(--font-body);
}
.pf-field input:focus, .pf-field select:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-note { font-size: 12.5px; color: #777; line-height: 1.6; }
.pf-save { align-self: center; padding: 16px 60px; background: var(--fg); color: var(--bg); border: none; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3em; cursor: pointer; }
.pf-saved { text-align: center; font-size: 12px; letter-spacing: 0.2em; color: #7c7; visibility: hidden; }
.pf-saved.show { visibility: visible; }

/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--line); padding: 46px 28px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
}
footer .f-links { display: flex; gap: 22px; }
footer a:hover { color: var(--fg); }

/* ============ MOBILE ============ */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .site-header { padding: 0 16px; }
  #headerLogo { font-size: 16px; } #headerLogo svg { width: 24px; height: 24px; }
  #counterDock .n { font-size: 16px; }
  .card { width: 175px; height: 250px; left: -87.5px; top: -125px; }
  .card .face img { height: 202px; }
  .carousel-stage { height: 300px; width: 100%; touch-action: pan-y; }
  .carousel-sticky { height: auto; min-height: 0; padding: 44px 0 40px; }
  #introZone { min-height: 92vh; min-height: 92svh; }
  :root { --home-shift: 1cm; }
  #introZone .hero-outro { padding: var(--header-h) 20px 34px; }
  /* height comes from .carousel-sticky now — no runway to shorten */
  .pd-grid { grid-template-columns: 1fr; gap: 28px; }
  /* rail moves under the shot and scrolls sideways */
  .pd-gallery { position: static; grid-template-columns: 1fr; }
  .pd-rail {
    flex-direction: row; order: 2; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; contain: none; overflow-y: hidden;
  }
  .pd-rail::-webkit-scrollbar { display: none; }
  .pd-thumb { width: 62px; flex: 0 0 auto; }
  .pd-stage { order: 1; aspect-ratio: 3/4; }
  .pd-inspo { margin-top: 38px; padding: 40px 20px 46px; }
  .cart-row { grid-template-columns: 70px 1fr auto; }
  .cart-row .cr-line { grid-column: 2; }
  .pf-grid2 { grid-template-columns: 1fr; }
}

/* ============================================================
   ███  CINEMATIC MONOCHROME LAYER  ███
   Depth, light, grain and motion. Added on top of the base.
   ============================================================ */

/* ---- richer base canvas ---- */
body {
  background:
    radial-gradient(140% 90% at 50% -10%, #141414 0%, #0a0a0a 38%, #050505 70%, #020202 100%);
  background-attachment: fixed;
}

/* ---- ambient drifting light (behind all content) ---- */
.fx-ambient {
  position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(46vmax 46vmax at 82% 78%, rgba(255,255,255,0.045), transparent 62%);
  filter: blur(8px);
  animation: ambientDrift 26s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);   opacity: 0.9; }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.08); opacity: 1; }
  100% { transform: translate3d(1%, -2%, 0) scale(1.04); opacity: 0.85; }
}

/* ---- vignette to focus the frame ---- */
.fx-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- film grain (animated, very subtle) ---- */
.fx-grain {
  position: fixed; inset: -120px; z-index: 2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 25%{transform:translate(-30px,12px)}
  50%{transform:translate(18px,-22px)} 75%{transform:translate(-12px,26px)}
  100%{transform:translate(22px,8px)}
}

/* keep real content above the fx layers */
.site-header { z-index: 60; }
#heroLock { z-index: 50; }
.page-wrap, .section, #carouselSection, footer { position: relative; z-index: 5; }

/* ---- cursor spotlight (desktop, fine pointer only) ---- */
.fx-cursor {
  position: fixed; top: 0; left: 0; width: 540px; height: 540px; z-index: 3;
  margin: -270px 0 0 -270px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 40%, transparent 68%);
  opacity: 0; transition: opacity 0.5s ease;
  will-change: transform;
}
body.cursor-live .fx-cursor { opacity: 1; }
@media (hover: none), (pointer: coarse) { .fx-cursor { display: none; } }

/* ---- touch / mobile: drop heavy always-on effects for smooth scrolling ---- */
@media (hover: none), (pointer: coarse) {
  body { background-attachment: scroll; }
  .fx-grain { display: none; }
  .fx-ambient { animation: none; opacity: 0.7; }
  .site-header, body.scrolled .site-header,
  #menuOverlay, .car-arrow, .wm-tip, .wm-detail {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.scrolled .site-header { background: linear-gradient(rgba(5,5,5,0.96), rgba(5,5,5,0.55)); }
}

/* ---- top scroll progress line ---- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 100;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), #fff);
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
  transition: width 0.12s linear;
}

/* ---- universal scroll-reveal ---- */
.reveal { opacity: 0; transform: translateY(34px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine);
}

/* ============ HERO — light & depth ============ */
#heroLock::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 70vmax; height: 70vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 58%);
  filter: blur(20px); z-index: -1; pointer-events: none;
}
.lock-cross svg { filter: drop-shadow(0 0 22px rgba(255,255,255,0.28)); }
#heroTagline { text-shadow: 0 0 20px rgba(255,255,255,0.15); }
.scroll-hint::after {
  content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0;
  background: linear-gradient(rgba(255,255,255,0.6), transparent);
}


/* ============ CAROUSEL — stage, floor, fog ============ */
.carousel-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,0.06), transparent 70%);
}
/* spotlight pool on the floor */
.carousel-stage::after {
  content: ""; position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: min(620px, 70vw); height: 90px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.16), transparent 70%);
  filter: blur(14px);
}
.carousel-heading {
  text-shadow: 0 0 30px rgba(255,255,255,0.12);
}
.card .face::after { /* contact-shadow under each garment */
  content: ""; position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  width: 60%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 72%);
  filter: blur(7px); z-index: -1;
}
.card .face img { transition: transform 0.5s var(--ease-cine), filter 0.5s; }
.card:hover .face img { transform: scale(1.06) translateY(-6px); filter: drop-shadow(0 40px 45px rgba(0,0,0,0.7)); }
.carousel-hint { animation: hint 2.4s ease-in-out infinite; }

/* ============ BRAND BAND (marquee) ============ */
.brand-band {
  position: relative; z-index: 5; overflow: hidden;
  padding: 30px 0; margin: 10px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.band-track { display: flex; width: max-content; animation: bandScroll 38s linear infinite; }
.brand-band:hover .band-track { animation-play-state: paused; }
.band-track span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 6vw, 78px); letter-spacing: 0.06em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.32);
  padding-right: 10px;
}
@keyframes bandScroll { to { transform: translateX(-50%); } }

/* ============ BUTTONS — sweep fill + lift ============ */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.35s var(--ease-cine), transform 0.35s var(--ease-cine), box-shadow 0.35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%);
  background: var(--fg); transition: transform 0.4s var(--ease-cine);
}
.btn:hover { background: transparent; color: var(--bg); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.btn:hover::before { transform: translateY(0); }

/* ============ STORE — depth ============ */
/* No lift or shadow: tiles sit shoulder to shoulder, so movement on hover
   would break the grid. The image zoom carries the interaction instead. */
.sc-imgwrap { background: radial-gradient(ellipse at 50% 35%, #1c1c1c, #0c0c0c 75%); }
.sc-imgwrap img { transition: transform 0.7s var(--ease-cine), opacity 0.25s; }
.store-card:hover .sc-imgwrap img { transform: scale(1.05); }
.sc-price { transition: color 0.3s; }
.store-card:hover .sc-price { color: var(--fg); }

/* ============ PRODUCT — lit stage + zoom ============ */
.pd-stage {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #1b1b1b, #0a0a0a 72%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
}
.pd-stage img { transition: transform 0.6s var(--ease-cine); cursor: zoom-in; }
.pd-stage:hover img { transform: scale(1.12); }
.pd-info h1 { background: linear-gradient(180deg,#fff,#cfcfcf); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.size-pill, .add-btn { transition: background 0.3s var(--ease-cine), color 0.3s, border-color 0.3s, transform 0.25s, box-shadow 0.3s; }
.size-pill:hover { transform: translateY(-2px); }
.add-btn:hover { box-shadow: 0 16px 40px rgba(255,255,255,0.18); transform: translateY(-2px); }
.add-btn.added { box-shadow: none; }

/* ============ MISSION — alive stats ============ */
.mission-total .big, .mt-flyer {
  background: linear-gradient(180deg,#fff 0%, #cdcdcd 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 0 70px rgba(255,255,255,0.16);
}
.bk-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#101010,#090909);
  transition: transform 0.5s var(--ease-cine), border-color 0.35s, box-shadow 0.45s;
}
.bk-card::before { /* corner glow */
  content: ""; position: absolute; top: -40%; right: -30%; width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 65%);
  pointer-events: none; opacity: 0; transition: opacity 0.5s;
}
.bk-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.4); box-shadow: 0 24px 50px rgba(0,0,0,0.5); }
.bk-card:hover::before { opacity: 1; }
.bk-card .ico {
  width: 30px; height: 30px; opacity: 0.85; margin-bottom: 2px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.bk-card .ico svg { width: 100%; height: 100%; display: block; }
.bk-card .val { background: linear-gradient(180deg,#fff,#c9c9c9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bk-card .bar { height: 4px; background: #161616; }
.bk-card .bar i {
  background: linear-gradient(90deg, rgba(255,255,255,0.5), #fff);
  box-shadow: 0 0 14px rgba(255,255,255,0.5);
}

/* ============ MENU OVERLAY — depth ============ */
#menuOverlay { backdrop-filter: blur(6px); background: rgba(3,3,3,0.94); }
#menuOverlay a { position: relative; }
#menuOverlay a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 1px;
  background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-cine);
}
#menuOverlay a:hover::after { transform: scaleX(1); }
body.menu-open #menuNav a { animation: menuIn 0.6s var(--ease-cine) both; }
body.menu-open #menuNav a:nth-child(2){animation-delay:.05s}
body.menu-open #menuNav a:nth-child(3){animation-delay:.10s}
body.menu-open #menuNav a:nth-child(4){animation-delay:.15s}
body.menu-open #menuNav a:nth-child(5){animation-delay:.20s}
body.menu-open #menuNav a:nth-child(6){animation-delay:.25s}
body.menu-open #menuNav a:nth-child(7){animation-delay:.30s}
@keyframes menuIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.85; transform: none; } }

/* ============ HEADER — glass on scroll ============ */
.site-header { transition: backdrop-filter 0.4s, background 0.4s; }
body.scrolled .site-header { backdrop-filter: blur(10px); background: linear-gradient(rgba(5,5,5,0.92), rgba(5,5,5,0.25)); }

/* ============ FOOTER ============ */
footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }
footer .f-links a { position: relative; }
footer .f-links a::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--fg);
  transform: scaleX(0); transform-origin:left; transition: transform 0.3s var(--ease-cine);
}
footer .f-links a:hover::after { transform: scaleX(1); }

/* ============ subpage entrance ============ */
body.subpage .page-wrap > * { animation: pageIn 0.9s var(--ease-cine) both; }
body.subpage .page-title { animation-delay: 0.05s; }
body.subpage .verse-ref { animation-delay: 0.10s; }
body.subpage .page-intro { animation-delay: 0.14s; }
@keyframes pageIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ============ ABOUT PAGE ============ */
.about-lead {
  text-align: center; max-width: 760px; margin: 64px auto 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 4.4vw, 52px); line-height: 1.12; letter-spacing: 0.04em;
  background: linear-gradient(180deg,#fff,#bdbdbd); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 80px; }
.about-col {
  border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px;
  background: linear-gradient(180deg,#101010,#090909);
  transition: transform 0.5s var(--ease-cine), border-color 0.35s, box-shadow 0.45s;
}
.about-col:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.4); box-shadow: 0 26px 54px rgba(0,0,0,0.55); }
.about-k { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.3em; color: var(--muted); }
.about-col h3 { font-size: 20px; letter-spacing: 0.06em; margin: 16px 0 12px; }
.about-col p { color: var(--muted); line-height: 1.75; font-size: 14.5px; }
.about-cta { text-align: center; margin: 90px 0 10px; }
.about-cta p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; line-height: 1.7; }
.about-cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) { .about-cols { grid-template-columns: 1fr; } }

/* ============ CAROUSEL CONTROLS ============ */
.car-controls { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; transition: opacity 0.5s var(--ease-cine); }
.carousel-sticky.controls-on .car-controls { opacity: 1; }
.car-arrow {
  pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: rgba(10,10,10,0.5); border: 1px solid var(--line); color: var(--fg);
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.car-arrow svg { width: 22px; height: 22px; }
.car-arrow.car-prev { left: clamp(12px, 5vw, 60px); }
.car-arrow.car-next { right: clamp(12px, 5vw, 60px); }
.car-arrow:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateY(-50%) scale(1.07); }
@media (max-width: 640px) {
  .car-arrow { width: 44px; height: 44px; }
  .car-arrow svg { width: 18px; height: 18px; }
}

/* ============ WORLD MAP (persecution + revival) ============ */
.apstl-worldmap { width: 100%; }
.wm-legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  margin: 0 auto 22px; max-width: 760px;
}
.wm-leg {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  font-family: var(--font-display);
}
.wm-leg i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.wm-leg[data-cat="red"] i { box-shadow: 0 0 12px #ff3b30; }
.wm-leg[data-cat="orange"] i { box-shadow: 0 0 12px #ff9500; }
.wm-leg[data-cat="yellow"] i { box-shadow: 0 0 12px #ffd60a; }
.wm-leg[data-cat="green"] i { box-shadow: 0 0 12px #34c759; }
.wm-leg[data-cat="blue"] i { box-shadow: 0 0 12px #0a84ff; }
.wm-leg[data-cat="purple"] i { box-shadow: 0 0 12px #bf5af2; }

.wm-stage {
  position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  /* same ocean tone as the globe atlas */
  background: radial-gradient(130% 130% at 50% 28%, #0e1016, #080a0e 74%);
  border: 1px solid var(--line);
}
html[data-theme="light"] .wm-stage {
  background: radial-gradient(130% 130% at 50% 28%, #f1efe8, #e6e3da 74%);
}
.wm-svg { display: block; width: 100%; height: auto; }

/* white world */
.wm-land {
  fill: #f4f4f5; stroke: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
  transition: opacity 0.35s, fill 0.35s;
}

/* per-region layers (invisible until hover) */
.wm-rg { cursor: pointer; }
.wm-hit { fill: #fff; opacity: 0; pointer-events: all; }   /* catches hover, invisible */
.wm-glow {
  pointer-events: none; opacity: 0; stroke: none;
  filter: blur(7px); transition: opacity 0.4s;
}
.wm-edge {
  pointer-events: none; fill: none; stroke-width: 1.6; opacity: 0;
  vector-effect: non-scaling-stroke; transition: opacity 0.3s;
  stroke-linejoin: round;
}
.wm-rg.wm-red    .wm-glow { fill: #ff3b30; } .wm-rg.wm-red    .wm-edge { stroke: #ff3b30; }
.wm-rg.wm-orange .wm-glow { fill: #ff9500; } .wm-rg.wm-orange .wm-edge { stroke: #ff9500; }
.wm-rg.wm-yellow .wm-glow { fill: #ffd60a; } .wm-rg.wm-yellow .wm-edge { stroke: #ffd60a; }
.wm-rg.wm-green  .wm-glow { fill: #34c759; } .wm-rg.wm-green  .wm-edge { stroke: #34c759; }
.wm-rg.wm-blue   .wm-glow { fill: #0a84ff; } .wm-rg.wm-blue   .wm-edge { stroke: #0a84ff; }
.wm-rg.wm-purple .wm-glow { fill: #bf5af2; } .wm-rg.wm-purple .wm-edge { stroke: #bf5af2; }

/* on hover: light the region's outline + soft feathered glow */
.wm-rg.active .wm-glow { opacity: 0.55; }
.wm-rg.active .wm-edge { opacity: 1; }
.wm-svg.wm-focus .wm-land { fill: #cfcfd2; }

/* supported region — glowing animated gold outline (always on) */
.wm-support {
  fill: none; stroke: #ffd60a; stroke-width: 1.8; pointer-events: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(255,214,10,0.9));
  stroke-dasharray: 5 4; animation: wmDash 22s linear infinite;
}
@keyframes wmDash { to { stroke-dashoffset: -400; } }

/* tooltip */
.wm-tip {
  position: absolute; top: 0; left: 0; z-index: 4; width: min(330px, 76vw);
  background: rgba(10,10,10,0.95); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s; pointer-events: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.wm-tip.show { opacity: 1; visibility: visible; transform: none; }
.wm-tip-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wm-badge {
  align-self: flex-start; font-family: var(--font-display); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  color: var(--bc); border: 1px solid var(--bc);
  background: color-mix(in srgb, var(--bc) 16%, transparent);
}
.wm-tip h4 { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.05em; }
.wm-star { color: #ffd60a; }
.wm-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); }
.wm-stat span { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #777; }
.wm-stat b { font-size: 13px; color: #e8e8e8; font-weight: 500; line-height: 1.45; }
.wm-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 6px; }
.wm-mini { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.wm-more { margin-top: 10px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #9a9a9a; }
.wm-hint {
  position: absolute; bottom: 12px; right: 16px; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #555; pointer-events: none;
}

/* detail panel (mission) */
.wm-detail {
  position: absolute; top: 0; right: 0; height: 100%; width: min(400px, 92%); z-index: 6;
  background: linear-gradient(180deg, rgba(12,12,12,0.98), rgba(8,8,8,0.98));
  border-left: 1px solid var(--line); padding: 30px 28px; overflow-y: auto;
  transform: translateX(102%); transition: transform 0.5s var(--ease-cine);
  box-shadow: -30px 0 60px rgba(0,0,0,0.55); backdrop-filter: blur(10px);
}
.wm-detail.show { transform: none; }
.wm-detail h3 { font-family: var(--font-display); font-size: clamp(24px,3vw,34px); letter-spacing: 0.05em; margin: 14px 0 4px; }
.wm-detail .wm-badge { margin-bottom: 4px; }
.wm-detail-text { color: var(--muted); line-height: 1.7; font-size: 14px; margin: 14px 0 8px; }
.wm-dl { margin-top: 8px; }
.wm-support-tag {
  display: inline-block; margin-top: 12px; font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.14em; color: #ffd60a; border: 1px solid rgba(255,214,10,0.5);
  padding: 6px 12px; border-radius: 999px; background: rgba(255,214,10,0.08);
}
.wm-x {
  position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--fg); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.wm-x:hover { background: rgba(255,255,255,0.1); transform: rotate(90deg); }

/* map section wrapper */
.map-section { max-width: 1180px; margin: 0 auto; padding: 30px 24px 10px; position: relative; z-index: 5; }
.map-section .map-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.map-section .map-head h2 { font-size: clamp(28px, 4.6vw, 52px); letter-spacing: 0.08em; }
.map-section .map-head p { color: var(--muted); line-height: 1.7; margin-top: 16px; }
.map-source { text-align: center; font-size: 11px; letter-spacing: 0.1em; color: #555; margin: 18px auto 0; }
.map-source a { text-decoration: underline; }

@media (max-width: 640px) {
  .wm-legend { gap: 6px 14px; }
  .wm-leg { font-size: 10px; }
  .wm-hint { display: none; }
  .wm-detail { width: 100%; height: 70%; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--line); transform: translateY(102%); border-radius: 16px 16px 0 0; }
  .wm-detail.show { transform: none; }
}

/* ============ accessibility — respect reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-ambient, .lock-wordwrap::after, .scroll-hint { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   ☀ LIGHT MODE
   The site follows the visitor's system setting automatically
   (set by the tiny script in each page's <head>), and the
   sun/moon button in the header lets them override it.
   Dark remains the default; html[data-theme="light"] flips it.
   ============================================================ */
html[data-theme="light"] {
  --bg: #f6f5f1;
  --fg: #101010;
  --muted: #5c5c5c;
  --line: rgba(0, 0, 0, 0.14);
  --card: #ffffff;
  --bar: rgba(246, 245, 241, 0.9);
  --accent: #101010;
  --halo: rgba(0, 0, 0, 0.05);
  color-scheme: light;
}
html[data-theme="light"] body {
  background:
    radial-gradient(140% 90% at 50% -10%, #ffffff 0%, #f6f5f1 38%, #efede7 70%, #e8e5de 100%);
  background-attachment: fixed;
}

/* header + chrome */
html[data-theme="light"] .site-header { background: linear-gradient(rgba(246,245,241,0.9), rgba(246,245,241,0)); }
html[data-theme="light"] body.scrolled .site-header { background: linear-gradient(rgba(246,245,241,0.95), rgba(246,245,241,0.3)); }
html[data-theme="light"] #bagBtn,
html[data-theme="light"] #menuBtn,
html[data-theme="light"] #themeBtn { background: rgba(255,255,255,0.7); }
html[data-theme="light"] #menuOverlay { background: rgba(246,245,241,0.96); }
html[data-theme="light"] #counterTip { background: #ffffff; color: #454545; box-shadow: 0 18px 50px rgba(0,0,0,0.15); }
html[data-theme="light"] #counterTip::after { background: #ffffff; }
html[data-theme="light"] #scrollProgress { background: linear-gradient(90deg, rgba(0,0,0,0.3), #111); box-shadow: none; }

/* cinematic fx layers */
html[data-theme="light"] .fx-ambient {
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, rgba(0,0,0,0.035), transparent 60%),
    radial-gradient(46vmax 46vmax at 82% 78%, rgba(0,0,0,0.028), transparent 62%);
}
html[data-theme="light"] .fx-vignette { background: radial-gradient(120% 100% at 50% 42%, transparent 62%, rgba(0,0,0,0.09) 100%); }
html[data-theme="light"] .fx-grain { mix-blend-mode: multiply; opacity: 0.035; }
html[data-theme="light"] .fx-cursor { background: radial-gradient(circle, rgba(0,0,0,0.045), rgba(0,0,0,0.015) 40%, transparent 68%); }

/* hero + counter */
html[data-theme="light"] #heroLock::before { background: radial-gradient(circle, rgba(0,0,0,0.05), transparent 58%); }
html[data-theme="light"] .lock-cross svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.18)); }
html[data-theme="light"] #heroTagline { text-shadow: none; }
html[data-theme="light"] .scroll-hint::after { background: linear-gradient(rgba(0,0,0,0.5), transparent); }
html[data-theme="light"] .mission-total .big,
html[data-theme="light"] .mt-flyer,
html[data-theme="light"] .pd-info h1,
html[data-theme="light"] .about-lead,
html[data-theme="light"] .bk-card .val {
  background: linear-gradient(180deg, #101010 0%, #4c4c4c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: none;
}

/* carousel */
html[data-theme="light"] .carousel-sticky::before { background: radial-gradient(60% 50% at 50% 38%, rgba(0,0,0,0.04), transparent 70%); }
html[data-theme="light"] .carousel-stage::after { background: radial-gradient(ellipse at center, rgba(0,0,0,0.16), transparent 70%); }
html[data-theme="light"] .carousel-heading { text-shadow: none; }
html[data-theme="light"] .card .face img { filter: drop-shadow(0 18px 24px rgba(0,0,0,0.22)); }
html[data-theme="light"] .card:hover .face img { filter: drop-shadow(0 28px 34px rgba(0,0,0,0.3)); }
html[data-theme="light"] .car-arrow { background: rgba(255,255,255,0.6); }
html[data-theme="light"] .band-track span { -webkit-text-stroke: 1px rgba(0,0,0,0.3); }

/* cards + store */
html[data-theme="light"] .bk-card,
html[data-theme="light"] .about-col { background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
html[data-theme="light"] .bk-card:hover,
html[data-theme="light"] .about-col:hover { border-color: rgba(0,0,0,0.3); box-shadow: 0 24px 50px rgba(0,0,0,0.13); }
html[data-theme="light"] .bk-card::before { background: radial-gradient(circle, rgba(0,0,0,0.04), transparent 65%); }
html[data-theme="light"] .bk-card .bar { background: #e8e5de; }
html[data-theme="light"] .bk-card .bar i { background: linear-gradient(90deg, rgba(0,0,0,0.5), #101010); box-shadow: none; }
html[data-theme="light"] .bk-card .ico { filter: none; }
html[data-theme="light"] .sc-imgwrap { background: radial-gradient(ellipse at 50% 35%, #ffffff, #eceae3 75%); }
html[data-theme="light"] .sc-dot { background: rgba(0,0,0,0.28); }
html[data-theme="light"] .sc-dot.on { background: #101010; }
html[data-theme="light"] .sc-swatch { border-color: rgba(0,0,0,0.3); }

/* product */
html[data-theme="light"] .pd-stage { background: radial-gradient(ellipse at 50% 42%, #ffffff, #eceae3 72%); box-shadow: inset 0 0 40px rgba(0,0,0,0.05); }
html[data-theme="light"] .pd-swatch.flat::before { border-color: rgba(0,0,0,0.3); }
html[data-theme="light"] .pd-label { color: #454545; }
html[data-theme="light"] .pd-note,
html[data-theme="light"] .checkout-note { color: #8a8a8a; }
html[data-theme="light"] .add-btn:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.18); }

/* profile + forms */
html[data-theme="light"] .pf-field input,
html[data-theme="light"] .pf-field select { background: #fbfaf7; }
html[data-theme="light"] .pf-field input:focus,
html[data-theme="light"] .pf-field select:focus { border-color: rgba(0,0,0,0.5); }
html[data-theme="light"] .pf-section h3 { color: #454545; }
html[data-theme="light"] .pf-saved { color: #2c7a39; }

/* footer */
html[data-theme="light"] footer { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04)); }

/* world map */
html[data-theme="light"] .wm-stage { background: radial-gradient(120% 120% at 50% 30%, #ffffff, #eceae3 72%); }
html[data-theme="light"] .wm-land { fill: #26262b; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.18)); }
html[data-theme="light"] .wm-svg.wm-focus .wm-land { fill: #3f3f46; }
html[data-theme="light"] .wm-tip { background: rgba(255,255,255,0.97); box-shadow: 0 24px 60px rgba(0,0,0,0.16); }
html[data-theme="light"] .wm-detail { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,247,243,0.98)); box-shadow: -30px 0 60px rgba(0,0,0,0.12); }
html[data-theme="light"] .wm-stat b { color: #262626; }
html[data-theme="light"] .wm-x:hover { background: rgba(0,0,0,0.06); }
html[data-theme="light"] .wm-hint, html[data-theme="light"] .map-source { color: #999; }

/* ============ THEME TOGGLE BUTTON ============ */
#themeBtn {
  width: 44px; height: 44px; border: 1px solid var(--line); background: rgba(5,5,5,0.6);
  border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--fg);
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
}
#themeBtn:hover { transform: translateY(-1px); border-color: var(--fg); }
#themeBtn svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  #themeBtn { width: 40px; height: 40px; }
}

/* ============================================================
   🌍 THE GLOBE — fullscreen fold-out world
   ============================================================ */
body.globe-open { overflow: hidden; }
.globe-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: radial-gradient(120% 120% at 50% 35%, #101014, #050506 75%);
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease-cine), visibility 0.45s;
}
.globe-overlay.show { opacity: 1; visibility: visible; }
html[data-theme="light"] .globe-overlay { background: radial-gradient(120% 120% at 50% 35%, #ffffff, #eae7e0 75%); }

.globe-top {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 24px; flex-wrap: wrap;
}
.globe-title { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.22em; display: flex; flex-direction: column; gap: 4px; }
.globe-title span { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.globe-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.globe-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.globe-legend i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.globe-x {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--fg); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background 0.2s, transform 0.25s;
}
.globe-x:hover { background: rgba(255,255,255,0.1); transform: rotate(90deg); }
html[data-theme="light"] .globe-x:hover { background: rgba(0,0,0,0.06); }

.globe-stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
.globe-stage canvas { position: absolute; inset: 0; }

/* filter chips */
.globe-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.globe-chips .chip {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--muted); cursor: pointer;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.2s;
}
.globe-chips .chip:hover { color: var(--fg); border-color: var(--fg); transform: translateY(-1px); }
.globe-chips .chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---- country choropleth (Joshua Project style — matches the globe atlas) ---- */
.atlas-svg { display: block; width: 100%; height: auto; }
.wm-cty {
  stroke: rgba(255,255,255,0.22); stroke-width: 0.7; cursor: pointer;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke-width 0.2s ease;
}
html[data-theme="light"] .wm-cty { stroke: rgba(0,0,0,0.24); }
/* hover / pinned: the country lights up (fill set in JS) with a slightly
   stronger border in the SAME hairline colour — no hard black/white edge. */
.wm-cty.on { stroke: rgba(255,255,255,0.6); stroke-width: 1.1; }
html[data-theme="light"] .wm-cty.on { stroke: rgba(0,0,0,0.5); }
.wm-isle { stroke-width: 1; }
.map-chips { margin-bottom: 18px; justify-content: center; }
.globe-legend-row { padding: 0 24px 10px; margin: 0 auto; }
.wm-srcnote { margin-top: 16px; font-size: 10px; letter-spacing: 0.1em; color: #777; text-transform: uppercase; }
.globe-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.3em; color: #555; pointer-events: none; white-space: nowrap;
}
.globe-tip {
  position: absolute; z-index: 5; width: min(280px, 74vw); padding: 14px 16px;
  background: rgba(10,10,10,0.95); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
.globe-tip.show { opacity: 1; visibility: visible; transform: none; }
html[data-theme="light"] .globe-tip { background: rgba(255,255,255,0.97); box-shadow: 0 24px 60px rgba(0,0,0,0.16); }
.globe-tip h4 { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.05em; margin: 8px 0 4px; }
.globe-tip p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.gt-badge {
  display: inline-block; font-family: var(--font-display); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  color: var(--bc); border: 1px solid var(--bc);
  background: color-mix(in srgb, var(--bc) 14%, transparent);
}
.gt-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.gt-row span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #777; }
.gt-row b { font-size: 12.5px; font-weight: 600; }
.gt-pray { font-style: italic; }

.globe-stats { padding: 14px 24px 20px; text-align: center; }
.globe-stats p { font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 720px; margin: 0 auto; }
.globe-stats .globe-src { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; }
.globe-stats a { text-decoration: underline; }
@media (max-width: 640px) {
  .globe-top { padding: 14px 16px; }
  .globe-legend { gap: 10px; }
  .globe-legend span { font-size: 9px; }
  .globe-hint { display: none; }
  .globe-stats { padding: 10px 16px 16px; }
  .globe-stats p:first-child { display: none; }
}

/* smooth colour hand-off when the theme flips */
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim .bk-card,
html.theme-anim .store-card,
html.theme-anim .about-col,
html.theme-anim .pd-stage,
html.theme-anim footer { transition: background 0.45s ease, background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease; }

/* ============================================================
   RESOURCES
   ============================================================ */
.rs-page { max-width: 1240px; }
.rs-section { margin-top: 78px; }
.rs-head {
  font-size: clamp(22px, 3vw, 38px); letter-spacing: 0.16em; text-align: center;
}
.rs-sub {
  text-align: center; color: var(--muted); max-width: 620px;
  margin: 14px auto 0; line-height: 1.75; font-size: 14.5px;
}

/* ---- free download cards ---- */
.rs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; margin-top: 38px;
}
.rs-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--card);
  transition: border-color 0.28s, transform 0.4s var(--ease-cine);
}
.rs-card:hover { border-color: rgba(255,255,255,0.42); transform: translateY(-4px); }
.rs-cover {
  aspect-ratio: 16/9; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1b1b1b, #0b0b0b 76%);
  display: grid; place-items: center;
}
.rs-cover img { width: 100%; height: 100%; object-fit: cover; }
.rs-cover.empty img { display: none; }
.rs-cover svg { width: 42px; height: 42px; color: #5e5e5e; }
.rs-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.rs-badge {
  align-self: flex-start; font-family: var(--font-display);
  font-size: 9.5px; letter-spacing: 0.28em; color: var(--muted);
  border: 1px solid var(--line); padding: 5px 9px; margin-bottom: 14px;
}
.rs-title { font-size: 15px; letter-spacing: 0.1em; line-height: 1.35; }
.rs-meta {
  margin-top: 8px; font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase;
}
.rs-desc { margin-top: 13px; color: var(--muted); line-height: 1.7; font-size: 13.5px; flex: 1 1 auto; }
.rs-get {
  margin-top: 20px; align-self: flex-start;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em;
  border: 1px solid var(--fg); padding: 12px 26px;
  transition: background 0.25s, color 0.25s;
}
.rs-get:hover { background: var(--fg); color: var(--bg); }

/* ---- optional updates box ---- */
.rs-signup {
  margin: 44px auto 0; max-width: 620px; text-align: center;
  border: 1px solid var(--line); padding: 30px 26px;
}
.rs-signup[hidden] { display: none; }
.rs-signup-label {
  display: block; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}
.rs-signup-note { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 10px; }
.rs-signup-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.rs-signup-row input {
  flex: 1 1 220px; min-width: 0; padding: 13px 15px;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-body); font-size: 14px;
}
.rs-signup-row input:focus { outline: none; border-color: var(--fg); }
.rs-signup-row button {
  cursor: pointer; background: var(--fg); color: var(--bg); border: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.24em;
  padding: 13px 24px; transition: opacity 0.25s;
}
.rs-signup-row button:hover { opacity: 0.85; }
.rs-signup-done { margin-top: 14px; font-size: 13px; color: var(--muted); }
.rs-signup-done[hidden] { display: none; }

/* ---- packs ---- */
.rs-packs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; margin-top: 38px;
}
.rs-pack {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--card);
  transition: border-color 0.28s;
}
.rs-pack:hover { border-color: rgba(255,255,255,0.42); }
.rs-pack-img { aspect-ratio: 4/3; overflow: hidden; background: #141414; }
.rs-pack-img img { width: 100%; height: 100%; object-fit: cover; }
.rs-pack-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.rs-pack-title { font-size: clamp(16px, 1.9vw, 21px); letter-spacing: 0.11em; line-height: 1.3; }
.rs-pack-blurb { margin-top: 13px; color: var(--muted); line-height: 1.72; font-size: 14px; }
.rs-pack-label {
  margin-top: 24px; font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.3em; color: #ccc; text-transform: uppercase;
}
.rs-pack-list { list-style: none; margin-top: 12px; flex: 1 1 auto; }
.rs-pack-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  color: var(--muted); font-size: 13.5px; line-height: 1.6;
}
.rs-pack-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 1px; background: var(--fg); opacity: 0.7;
}
.rs-request {
  margin-top: 24px; cursor: pointer; width: 100%;
  background: var(--fg); color: var(--bg); border: none;
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.26em;
  padding: 15px 20px; transition: opacity 0.25s;
}
.rs-request:hover { opacity: 0.86; }

/* ---- request dialog ---- */
.rs-modal {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; padding: 24px;
  background: rgba(3,3,3,0.72); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.rs-modal[hidden] { display: none; }
body.rs-modal-open { overflow: hidden; }
.rs-modal-box {
  position: relative; width: min(520px, 100%);
  background: var(--bg); border: 1px solid var(--line);
  padding: 38px 32px 34px; margin: auto;
}
.rs-modal-close {
  position: absolute; top: 12px; right: 16px; cursor: pointer;
  background: none; border: none; color: var(--fg); font-size: 26px; line-height: 1;
  font-family: var(--font-body);
}
.rs-modal-box h3 { font-size: clamp(19px, 2.4vw, 26px); letter-spacing: 0.14em; }
.rs-modal-pack {
  margin-top: 8px; font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.26em; color: var(--muted); text-transform: uppercase;
}
#rsRequestForm { margin-top: 24px; }
#rsRequestForm label {
  display: block; margin-bottom: 16px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.24em;
  color: #ccc; text-transform: uppercase;
}
.rs-opt { color: #6d6d6d; letter-spacing: 0.16em; }
#rsRequestForm input, #rsRequestForm textarea {
  display: block; width: 100%; margin-top: 8px; padding: 12px 14px;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-body); font-size: 14.5px; letter-spacing: normal;
  text-transform: none; resize: vertical;
}
#rsRequestForm input:focus, #rsRequestForm textarea:focus { outline: none; border-color: var(--fg); }
.rs-modal-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 640px) {
  .rs-section { margin-top: 54px; }
  .rs-grid, .rs-packs { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .rs-modal { padding: 0; }
  .rs-modal-box { border: none; min-height: 100%; padding: 60px 20px 34px; }
}

/* ---- light theme ---- */
html[data-theme="light"] .rs-cover { background: radial-gradient(ellipse at 50% 40%, #ffffff, #eceae3 76%); }
html[data-theme="light"] .rs-cover svg { color: #b4b0a6; }
html[data-theme="light"] .rs-card:hover,
html[data-theme="light"] .rs-pack:hover { border-color: rgba(0,0,0,0.34); }
html[data-theme="light"] .rs-modal { background: rgba(246,245,241,0.75); }

/* ============================================================
   FUND THE MISSION DIRECTLY
   ============================================================ */
.fund-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin: 34px auto 0; max-width: 780px;
  padding: 20px 24px;
  border: 1px solid var(--line); border-left: 2px solid var(--fg);
  background: var(--card);
}
.fund-banner-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fund-banner-title {
  font-family: var(--font-display); font-size: clamp(14px, 1.9vw, 18px);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.fund-banner-sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.fund-cta {
  flex: 0 0 auto; cursor: pointer;
  background: var(--fg); color: var(--bg); border: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em;
  padding: 13px 26px; transition: opacity 0.25s;
}
.fund-cta:hover { opacity: 0.85; }
/* on the mission page it follows the breakdown cards, so it needs more air
   above it than it does sitting directly under the store's intro line */
body[data-page="mission"] .fund-banner { margin-top: 64px; }

/* ---- the panel it grows into ---- */
.fund-panel {
  position: fixed; z-index: 96; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line);
  opacity: 0.25;
  transition: top 0.42s var(--ease-cine), left 0.42s var(--ease-cine),
              right 0.42s var(--ease-cine), bottom 0.42s var(--ease-cine),
              opacity 0.3s ease, border-radius 0.42s;
}
.fund-panel[hidden] { display: none; }
.fund-panel.grown { opacity: 1; }
body.fund-open { overflow: hidden; }
.fund-panel-inner {
  max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vh, 84px) 24px 70px;
  opacity: 0; transition: opacity 0.3s ease 0.18s;
}
.fund-panel.grown .fund-panel-inner { opacity: 1; }
.fund-close {
  position: absolute; top: 16px; right: 22px; z-index: 2; cursor: pointer;
  background: none; border: none; color: var(--fg); font-size: 30px; line-height: 1;
  font-family: var(--font-body);
}
.fund-panel-title {
  text-align: center; font-size: clamp(22px, 3.4vw, 42px); letter-spacing: 0.14em;
}
.fund-panel-text {
  text-align: center; color: var(--muted); max-width: 580px;
  margin: 16px auto 0; line-height: 1.75; font-size: 14.5px;
}

/* ---- the three options, as shop tiles ---- */
.fund-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 44px;
}
.fund-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--card);
  padding: 30px 26px 28px;
  transition: border-color 0.28s;
}
.fund-card:hover { border-color: rgba(255,255,255,0.42); }
.fund-ico {
  width: 46px; height: 46px; color: var(--fg); opacity: 0.85; margin-bottom: 20px;
}
.fund-ico svg { width: 100%; height: 100%; }
.fund-title { font-size: clamp(16px, 2vw, 20px); letter-spacing: 0.12em; line-height: 1.3; }
.fund-rate {
  margin-top: 10px; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg);
}
.fund-desc { margin-top: 14px; color: var(--muted); line-height: 1.7; font-size: 13.5px; flex: 1 1 auto; }
.fund-steps { display: flex; gap: 7px; margin-top: 22px; flex-wrap: wrap; }
.fund-step {
  cursor: pointer; min-width: 52px;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.12em;
  padding: 11px 12px;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.fund-step:hover { color: var(--fg); border-color: var(--fg); }
.fund-step.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.fund-step-custom { letter-spacing: 0.18em; }
.fund-custom { display: block; margin-top: 14px; }
.fund-custom[hidden] { display: none; }
.fund-custom-label {
  display: block; font-family: var(--font-display);
  font-size: 9.5px; letter-spacing: 0.24em; color: #ccc; text-transform: uppercase;
}
.fund-custom input {
  display: block; width: 100%; margin-top: 8px; padding: 12px 14px;
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-body); font-size: 15px;
}
.fund-custom input:focus { outline: none; border-color: var(--fg); }
.fund-total {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em;
}
.fund-add {
  margin-top: 18px; cursor: pointer; width: 100%;
  background: var(--fg); color: var(--bg); border: none;
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.26em;
  padding: 15px 18px; transition: opacity 0.25s, background 0.25s, color 0.25s;
}
.fund-add:hover { opacity: 0.86; }
.fund-add:disabled { opacity: 0.35; cursor: not-allowed; }
.fund-add.added { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.fund-viewbag {
  display: none; margin: 34px auto 0; width: max-content;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em;
  border-bottom: 1px solid var(--fg); padding-bottom: 4px;
}
.fund-viewbag.show { display: block; }

@media (max-width: 640px) {
  .fund-banner { padding: 18px 18px; margin-top: 26px; }
  body[data-page="mission"] .fund-banner { margin-top: 44px; }
  .fund-cta { width: 100%; }
  .fund-panel-inner { padding: 56px 18px 54px; }
  .fund-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 32px; }
}

/* ---- light theme ---- */
html[data-theme="light"] .fund-card:hover { border-color: rgba(0,0,0,0.34); }

/* ============================================================
   HOME — the carousel is held back until the intro has landed, so no part
   of it (its heading especially) can be seen behind the lockup animation.
   docked-logo is set the frame the lockup reaches the header, and is also
   set immediately when the intro is skipped.
   ============================================================ */
#carouselSection { opacity: 0; transition: opacity 0.7s ease 0.15s; }
body.docked-logo #carouselSection { opacity: 1; }
body.no-intro #carouselSection { transition: none; }

/* ============================================================
   HOME — WHO WE ARE
   ============================================================ */
.home-about { padding: clamp(64px, 9vh, 104px) 24px clamp(56px, 8vh, 92px); }
.home-about[hidden] { display: none; }
.home-about-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.home-about h2 {
  font-size: clamp(20px, 2.7vw, 32px); letter-spacing: 0.22em; margin-bottom: 26px;
}
.ha-body p { color: var(--muted); line-height: 1.85; font-size: 14.5px; margin-bottom: 16px; }
.ha-body p:last-child { margin-bottom: 0; }
/* scoped rather than !important — this has to outrank .ha-body p above */
.ha-body .ha-lead {
  color: var(--fg); font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 19px); letter-spacing: 0.05em;
  line-height: 1.6; margin-bottom: 22px;
  text-wrap: balance;
}
.ha-btn {
  display: inline-block; margin-top: 32px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 26px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ha-btn:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* ============================================================
   PRODUCT PAGE — BUILT FROM THE WOOCOMMERCE DESCRIPTION
   ============================================================ */
.pd-desc[hidden], .pd-details[hidden], .pd-sg-slot[hidden],
.pd-inspo-text[hidden], .pd-inspo-more[hidden], .pd-inspo-care[hidden] { display: none; }
.pd-desc p + p { margin-top: 12px; }

/* details: bullets, label rows, care, small print */
.pd-details { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.pd-points { list-style: none; display: grid; gap: 10px; }
.pd-points li {
  position: relative; padding-left: 22px;
  color: var(--muted); font-size: 14px; line-height: 1.65;
}
.pd-points li::before {
  content: ""; position: absolute; left: 2px; top: 0.8em;
  width: 9px; height: 1px; background: var(--fg);
}
.pd-points + .pd-specs, .pd-points + .pd-care, .pd-specs + .pd-care,
.pd-extra-table + .pd-care { margin-top: 22px; }
.pd-specs { display: grid; }
.pd-spec {
  display: grid; grid-template-columns: minmax(104px, 36%) 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.pd-spec:first-child { border-top: 1px solid var(--line); }
.pd-details > .pd-specs:first-child .pd-spec:first-child { border-top: 0; padding-top: 0; }

/* colour options: round dots in the colour itself */
.pd-swatches.dots { gap: 12px; }
.pd-swatch.dot {
  position: relative; width: 36px; height: 36px; aspect-ratio: auto; padding: 0;
  border-radius: 50%; background: transparent; border: 1px solid var(--line); opacity: 1;
}
.pd-swatch.dot::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--sw, #8a8a8a); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  transition: background 0.3s;
}
.pd-swatch.dot:hover { border-color: rgba(255,255,255,0.55); }
.pd-swatch.dot.on { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.pd-spec dt, .pd-care-k {
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: #ccc; padding-top: 3px;
}
.pd-spec dd { color: var(--muted); font-size: 14px; line-height: 1.6; }
.pd-care-k { margin-bottom: 6px; padding-top: 0; }
.pd-care p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.pd-fine { margin-top: 18px; color: #6f6f6f; font-size: 12px; line-height: 1.6; }
.pd-extra-table { margin-top: 18px; }

/* size guide — folds open under the size buttons */
.pd-sg-slot { margin-top: 16px; }
.pd-sizeguide summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
  transition: color 0.25s, border-color 0.25s;
}
.pd-sizeguide summary::-webkit-details-marker { display: none; }
.pd-sizeguide summary::after { content: "+"; font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
.pd-sizeguide[open] summary::after { content: "\2212"; }
.pd-sizeguide summary:hover, .pd-sizeguide[open] summary { color: var(--fg); border-color: var(--fg); }
.pd-sg-body { margin-top: 16px; padding: 18px; border: 1px solid var(--line); background: var(--card); }
.pd-sg-intro { color: var(--muted); font-size: 13px; line-height: 1.65; margin-bottom: 14px; }
.pd-sg-units { display: flex; gap: 8px; margin-bottom: 14px; }
.pd-sg-unit {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.22em;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.pd-sg-unit:hover { color: var(--fg); border-color: var(--fg); }
.pd-sg-unit.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pd-sg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-sg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-sg-table th, .pd-sg-table td {
  padding: 9px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.pd-sg-table thead th, .pd-sg-table tbody tr:first-child th:not(:first-child) {
  font-family: var(--font-display); font-weight: 400; font-size: 11px;
  letter-spacing: 0.16em; color: var(--fg);
}
.pd-sg-table tbody th { text-align: left; font-weight: 400; color: #ccc; font-size: 12.5px; }
.pd-sg-table td { color: var(--muted); font-variant-numeric: tabular-nums; }

/* the story: several paragraphs, then extra sections like "The Meaning" */
.pd-inspo-text p + p { margin-top: 14px; }
.pd-inspo-sec { margin-top: 44px; padding-top: 38px; border-top: 1px solid var(--line); }
.pd-inspo-sec h3 { font-size: 12px; letter-spacing: 0.34em; margin-bottom: 18px; }
.pd-inspo-sec p, .pd-inspo-sec li {
  color: var(--muted); line-height: 1.85; font-size: 15px; text-wrap: pretty;
}
.pd-inspo-sec p + p { margin-top: 14px; }
.pd-inspo-sec ul { list-style: none; margin-top: 12px; }
.pd-inspo-sec .pd-sg-scroll { margin-top: 18px; }
@media (max-width: 760px) {
  .pd-spec { grid-template-columns: 1fr; gap: 4px; }
  .pd-sg-body { padding: 14px; }
  .pd-sg-table th, .pd-sg-table td { padding: 8px 6px; font-size: 12px; }
}

/* ============================================================
   PRODUCT PAGE — PHOTO VIEWER (click the main photo)
   ============================================================ */
.pd-stage { cursor: zoom-in; }
.pd-stage:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.pd-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 5, 5, 0.94);
  animation: pdLbIn 0.35s var(--ease-cine, ease) both;
}
/* the page behind is blurred and darkened; browsers without blur keep
   the near-solid background above */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pd-lb {
    background: rgba(5, 5, 5, 0.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.1);
    backdrop-filter: blur(28px) saturate(1.1);
  }
}
.pd-lb[hidden] { display: none; }
@keyframes pdLbIn { from { opacity: 0; } to { opacity: 1; } }
.pd-lb-scroll {
  position: absolute; inset: 0; overflow: auto;
  display: grid; place-items: center;
  padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(56px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain; scrollbar-width: none;
}
.pd-lb-scroll::-webkit-scrollbar { display: none; }
.pd-lb-img {
  max-width: 100%; object-fit: contain;
  max-height: calc(100vh - 126px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 126px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
}
.pd-lb.zoomed .pd-lb-scroll { display: block; padding: 0; }
.pd-lb.zoomed .pd-lb-img { max-width: none; max-height: none; display: block; cursor: zoom-out; }
.pd-lb.zoomed .pd-lb-prev, .pd-lb.zoomed .pd-lb-next, .pd-lb.zoomed .pd-lb-hint { display: none; }

.pd-lb-btn {
  position: absolute; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(5, 5, 5, 0.6); color: var(--fg);
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pd-lb-btn:hover, .pd-lb-btn:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pd-lb-btn[hidden] { display: none; }
.pd-lb-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.pd-lb-prev, .pd-lb-next { top: 50%; transform: translateY(-50%); }
.pd-lb-prev { left: 16px; }
.pd-lb-next { right: 16px; }
.pd-lb-count, .pd-lb-hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted); pointer-events: none; white-space: nowrap;
}
.pd-lb-count { top: calc(30px + env(safe-area-inset-top, 0px)); }
.pd-lb-hint { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .pd-lb-prev, .pd-lb-next { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .pd-lb-hint { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .pd-lb { animation: none; } }