/* ================================================================
   EKANA — v3 "MATCHDAY EDITORIAL / DAYLIGHT"
   Chalk-ivory paper as the dominant ground (the old site's feel),
   Ekana Blue #001F3D and Electrum #BAA53C demoted to accents.
   Palette, logo colorways and type rules follow the official
   EKANA Branding Guidelines (Electrum over dark grounds & imagery,
   Blue wordmark over light neutral; Khand primary, Hind ≥ Medium).
   House system: every size, space, duration and color lives here.
   ================================================================ */

:root {
  /* palette — official (guidelines p.13) */
  --ink: #001f3d;          /* Ekana Blue is the deepest ground */
  --navy: #001f3d;
  --navy-2: #0a2c50;
  --gold: #baa53c;         /* Ekana Electrum */
  --gold-2: color-mix(in srgb, var(--gold) 72%, #fff);
  --gold-deep: color-mix(in srgb, var(--gold) 60%, var(--navy));
  --steel: #5ea3c0;        /* Secondary Blue — band accent */
  --ivory: #f4f4ec;
  --ivory-2: #eceadd;
  --char: #2c2c2c;
  --silver: #bcbec0;       /* Secondary Grey */
  --line: color-mix(in srgb, var(--silver) 42%, transparent);
  --line-gold: color-mix(in srgb, var(--gold) 26%, transparent);

  /* poster type scale */
  --d1: clamp(3.4rem, 1.2rem + 8.4vw, 9.5rem);   /* hero poster */
  --d2: clamp(2.6rem, 1.2rem + 4.8vw, 5.6rem);   /* chapter head */
  --d3: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);   /* sub head */
  --t-lead: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --t-body: clamp(0.98rem, 0.93rem + 0.25vw, 1.08rem);
  --t-sm: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --t-xs: clamp(0.68rem, 0.65rem + 0.15vw, 0.75rem);

  /* rhythm */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem;
  --s-5: 4rem;  --s-6: 6.5rem; --s-7: 10rem;
  --gut: clamp(1.25rem, 3vw, 2.5rem);

  /* two radii, two shadows */
  --r-0: 0px;
  --r-1: 10px;
  --sh-1: 0 2px 10px rgba(0, 31, 61, 0.10);
  --sh-2: 0 18px 60px rgba(0, 31, 61, 0.30);

  /* motion */
  --ease: cubic-bezier(0.19, 0.75, 0.14, 1);
  --snap: cubic-bezier(0.6, 0.05, 0.1, 1);
  --dur-1: 500ms;
  --dur-2: 850ms;

  --font-d: "Khand", sans-serif;
  --font-b: "Hind", sans-serif;
  --wrap: 84rem;
  --wrap-narrow: 46rem;

  --stripe: repeating-linear-gradient(115deg,
    transparent 0 26px, rgba(244, 244, 236, 0.018) 26px 28px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- fonts (self-hosted; Hind only ≥ Medium per guidelines) ---------------- */
@font-face { font-family: "Khand"; font-weight: 400; font-display: swap; src: url("fonts/khand-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Khand"; font-weight: 500; font-display: swap; src: url("fonts/khand-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Khand"; font-weight: 600; font-display: swap; src: url("fonts/khand-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Khand"; font-weight: 700; font-display: swap; src: url("fonts/khand-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 500; font-display: swap; src: url("fonts/hind-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Hind"; font-weight: 600; font-display: swap; src: url("fonts/hind-600-latin.woff2") format("woff2"); }

/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--char);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-d);
  font-weight: 700;
  line-height: 0.94;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.008em;
  text-wrap: balance;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.mt-3 { margin-top: var(--s-3); }
.chap-head--bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gut);
  margin-bottom: var(--s-4);
}
.chap-head--bar .kicker { flex: none; }

/* outline lettering (the kit-print signature) */
.out { color: transparent; -webkit-text-stroke: 2px currentcolor; }
h1 .out, h2 .out { color: transparent; -webkit-text-stroke: 2px var(--navy); }
.dark-ground h1 .out, .dark-ground h2 .out, .band2 h1 .out, .band2 h2 .out { -webkit-text-stroke: 2px var(--ivory); }
@supports not (-webkit-text-stroke: 2px #fff) {
  .out, h1 .out, h2 .out { color: inherit; -webkit-text-stroke: 0; }
}

/* kicker: gold slash label */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold-deep);
}
.kicker::before { content: "//"; letter-spacing: 0; color: var(--gold); font-weight: 700; }
.plx .kicker, .band2 .kicker { color: var(--gold-2); }

/* social icon rows (header + footer) */
.social { display: inline-flex; align-items: center; gap: 0.9rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.social a:hover { color: var(--gold-deep); }
.site-foot .social a:hover { color: var(--gold-2); }
.social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ---------------- promo + header (light chrome) ---------------- */
.promo {
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-xs);
  text-align: center;
  padding: 0.5rem var(--s-2);
  position: relative;
  z-index: 60;
}
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  transition: background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 4.5rem;
  transition: min-height var(--dur-1) var(--ease);
}
.brand img { width: clamp(7.5rem, 13vw, 10rem); height: auto; transition: width var(--dur-1) var(--ease); }
/* condensed state once the page scrolls (class set by app.js) */
.site-head.is-scrolled {
  background: color-mix(in srgb, var(--ivory) 97%, transparent);
  box-shadow: var(--sh-1);
}
.site-head.is-scrolled .site-head__in { min-height: 3.7rem; }
.site-head.is-scrolled .brand img { width: clamp(6.75rem, 11vw, 8.75rem); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav a {
  font-family: var(--font-d);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-sm);
  color: var(--navy);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%; /* exits to the right… */
  transition: transform var(--dur-1) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; /* …enters from the left */ }
.nav a[aria-current="page"] { color: var(--gold-deep); }
.head-tools { display: flex; align-items: center; gap: var(--s-3); }
.lang { display: flex; gap: 2px; border: 1px solid var(--line); padding: 2px; }
.lang a {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--char);
  padding: 0.14rem 0.6rem;
}
.lang a { transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.lang a[aria-current="true"] { background: var(--gold); color: var(--ink); }
.lang a:hover:not([aria-current="true"]) { color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-xs);
  padding: 0.55rem 1rem;
  cursor: pointer;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 0.9em 2.1em;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); transition-duration: 80ms; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-2); }
.btn--line { border-color: var(--gold); color: var(--gold-2); background: transparent; }
.btn--line:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.btn--line-navy { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--line-navy:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.btn--ink { background: var(--navy); color: var(--ivory); }
.btn--ink:hover { background: var(--navy-2); }
.btn .arr { font-family: var(--font-b); }

/* ================= HERO — full-viewport chapter, on paper ================= */
.hero2 {
  position: relative;
  background: var(--ivory);
  color: var(--char);
  min-height: min(100svh, 62rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero2__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(48%, 44rem);
  z-index: 0;
}
.hero2__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.9) contrast(1.04);
}
.hero2__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, transparent 55%, var(--ivory) 99%),
    linear-gradient(to top, color-mix(in srgb, var(--ivory) 72%, transparent), transparent 45%);
}
.hero2__content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-block: clamp(4rem, 10vh, 7rem) clamp(6rem, 14vh, 9rem);
  margin-block: auto;
}
.hero2__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.hero2__title {
  color: var(--navy);
  font-size: var(--d1);
  line-height: 0.86;
  letter-spacing: -0.01em;
  max-width: 12ch;
}
.hero2__title .mask, .band2__in .big .mask {
  display: block;
  overflow: hidden;
  /* extra top allowance so diacritics on capitals (Ñ, É) clear the clip;
     the negative margin gives the room back so the line rhythm is unchanged */
  padding-block: 0.14em 0.04em;
  margin-top: -0.1em;
}
.hero2__title .rise, .band2__in .big .rise { display: block; }
.hero2__title .mask--thin, .band2__in .big .mask--thin { padding-block: 0.04em; margin-block: -0.14em; }
.hero2__title .thin, .band2__in .big .thin {
  display: inline-block;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  font-size: 0.4em;
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: 0.2em;
  vertical-align: 0.32em;
  margin-inline-start: 0.15em;
}
.hero2__lead {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  max-width: 30rem;
  color: color-mix(in srgb, var(--char) 84%, var(--silver));
}
.hero2__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
/* scroll cue: a quiet gold line that draws itself at the hero's base */
.hero2__content::after, .band2__in::after {
  content: "";
  display: block;
  width: 1px;
  height: 3.2rem;
  margin-top: var(--s-4);
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue-draw 2200ms var(--ease) infinite;
  transform-origin: 50% 0;
}
@keyframes cue-draw {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  75%, 100% { transform: scaleY(1); opacity: 0; }
}

/* giant baseline marquee — Electrum over Ekana Blue (approved colorway) */
.tape {
  position: relative;
  z-index: 4;
  border-block: 1px solid var(--line-gold);
  background: var(--navy) var(--stripe);
  overflow: hidden;
  padding-block: 0.6rem;
}
.tape__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: tape-run 42s linear infinite;
}
.tape__item {
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: var(--t-lead);
  color: var(--gold);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
}
.tape__item .tape__logo { height: 1.5em; width: auto; flex: none; }
.tape__item .dot { width: 0.5em; height: 0.5em; background: var(--gold); rotate: 45deg; flex: none; }
@keyframes tape-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape:hover .tape__track { animation-play-state: paused; }

/* ================= chapters ================= */
.chapter { padding-block: var(--s-7); position: relative; }
.chapter--tight { padding-block: var(--s-6); }

.chap-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); align-items: end; margin-bottom: var(--s-5); }
.chap-head h1, .chap-head h2 { grid-column: 1 / span 9; font-size: var(--d2); }
.chap-head .side { grid-column: 10 / span 3; padding-bottom: 0.5rem; }
.chap-head .side p { font-size: var(--t-body); color: color-mix(in srgb, var(--char) 78%, var(--silver)); }
.chap-head .kicker { margin-bottom: var(--s-2); }

/* vertical side stamp */
.stamp {
  position: absolute;
  top: var(--s-6);
  right: calc(var(--gut) * 0.35);
  writing-mode: vertical-rl;
  font-family: var(--font-d);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: var(--t-xs);
  color: color-mix(in srgb, var(--gold) 55%, transparent);
  pointer-events: none;
  user-select: none;
}

/* looks — editorial broken grid, borderless on cream */
.looks2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
}
.looks2 figure { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-1); }
.looks2 img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
  filter: saturate(0.92);
}
.looks2 figure:hover img { transform: scale(1.05); filter: saturate(1.04); }
.looks2 .l1 { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.looks2 .l2 { grid-column: 5 / span 3; aspect-ratio: 3 / 4; margin-top: var(--s-6); }
.looks2 .l3 { grid-column: 8 / span 3; aspect-ratio: 3 / 4; margin-top: var(--s-3); }
.looks2 .l4 { grid-column: 11 / span 2; aspect-ratio: 3 / 4; margin-top: var(--s-7); }

/* ================= product rail (all 10, snap) ================= */
.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--s-2) var(--s-4);
  padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  overscroll-behavior-x: contain;
}
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(15rem, 21vw, 19rem); }
.rail-hint {
  font-family: var(--font-d);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
a.rail-hint { text-decoration: none; }
a.rail-hint:hover { text-decoration: underline; }

/* product card — borderless, quiet (modernized) */
.card {
  background: transparent;
  border: none;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-2) var(--ease);
}
.card:hover, .card:focus-visible { transform: translateY(-0.3rem); }
.card__media {
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-1);
  transition: box-shadow var(--dur-2) var(--ease);
}
.card:hover .card__media, .card:focus-visible .card__media { box-shadow: var(--sh-1); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease);
}
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.04); }
.card__body { padding: var(--s-2) 0.2rem 0; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.card__name {
  font-weight: 600;
  font-size: var(--t-body);
  line-height: 1.3;
  color: var(--navy);
  transition: color var(--dur-1) var(--ease);
}
.card:hover .card__name { color: var(--gold-deep); }
.card__tag { font-size: var(--t-sm); color: color-mix(in srgb, var(--char) 62%, var(--silver)); }
.card__price {
  margin-top: 0.4rem;
  font-weight: 600;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--char);
}

/* grid version (shop / core) */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--s-5) var(--gut);
}

/* ================= parallax band — fixed layer the page scrolls over
   (position:fixed inside a clip-path'd section; works on iOS, unlike
   background-attachment:fixed) ================= */
.plx {
  position: relative;
  min-height: min(88svh, 52rem);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  clip-path: inset(0);
  isolation: isolate;
  background: var(--navy);
}
.plx__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100lvh;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
}
.plx::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100lvh;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 82%, transparent) 8%, color-mix(in srgb, var(--ink) 34%, transparent) 45%, color-mix(in srgb, var(--ink) 12%, transparent));
}
.plx::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
}
.plx__in {
  position: relative;
  z-index: 1;
  padding-block: var(--s-6);
  max-width: 46rem;
}
.plx__in h2 { color: var(--ivory); font-size: var(--d2); }
.plx__in h2 .out { -webkit-text-stroke: 2px var(--ivory); }
.plx__in p { margin-top: var(--s-3); font-size: var(--t-lead); color: color-mix(in srgb, var(--ivory) 86%, var(--silver)); max-width: 34rem; }
.plx__in .cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.plx .gold { color: var(--gold); }
.plx--quiet { min-height: min(66svh, 40rem); align-items: center; text-align: center; }
.plx--quiet .plx__in { margin-inline: auto; }
.plx--quiet .plx__in p { margin-inline: auto; }

/* ================= full-bleed photo band (page hero) ================= */
.band2 {
  position: relative;
  min-height: min(92svh, 56rem);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.band2__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.88) contrast(1.05);
  z-index: 0;
}
.band2::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 4%, color-mix(in srgb, var(--ink) 55%, transparent) 38%, color-mix(in srgb, var(--ink) 18%, transparent) 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--ink) 66%, transparent), transparent 60%);
  z-index: 1;
}
.band2::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  z-index: 2;
  pointer-events: none;
}
.band2__in {
  position: relative;
  z-index: 3;
  padding-block: var(--s-6);
  max-width: 51rem; /* wide enough that the outlined poster line ("UNSTOPPABLE") clears its mask */
}
.band2__in h1, .band2__in h2 { color: var(--ivory); font-size: var(--d2); }
.band2__in .big { font-size: var(--d1); line-height: 0.86; letter-spacing: -0.01em; max-width: none; }
.band2__in h1 .out, .band2__in h2 .out { -webkit-text-stroke: 2px var(--ivory); }
.band2__in p { margin-top: var(--s-3); font-size: var(--t-lead); color: color-mix(in srgb, var(--ivory) 86%, var(--silver)); max-width: 34rem; }
.band2__in .cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.band2 .gold { color: var(--gold); }

/* ================= split editorial ================= */
.split2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: center;
}
.split2__media { grid-column: 1 / span 6; position: relative; overflow: hidden; border-radius: var(--r-1); }
.split2__media img { width: 100%; height: auto; filter: saturate(0.92); }
.split2__copy { grid-column: 8 / span 5; }
.split2--flip .split2__media { grid-column: 7 / span 6; order: 2; }
.split2--flip .split2__copy { grid-column: 1 / span 5; order: 1; }
.split2__copy h1, .split2__copy h2 { font-size: var(--d3); margin-top: var(--s-2); }
.split2__copy .prose p { margin-top: var(--s-3); }
.split2__copy .cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* pull-line: giant editorial statement */
.pull {
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--d3);
  line-height: 1.02;
  color: var(--navy);
  max-width: 24ch;
}
.pull .gold { color: var(--gold-deep); }

/* gold CTA band */
.gold-band {
  background: var(--gold);
  color: var(--ink);
  padding-block: var(--s-6);
}
.gold-band .in {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: center;
}
.gold-band h2 {
  grid-column: 1 / span 8;
  color: var(--ink);
  font-size: var(--d2);
}
.gold-band .act { grid-column: 9 / span 4; justify-self: end; }
.gold-band .btn--ink:hover { background: var(--ink); }

/* ================= how it works — process strip ================= */
.process {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--gut);
  margin-top: var(--s-5);
}
.process__step { counter-increment: step; position: relative; padding-top: var(--s-3); border-top: 2px solid var(--line); }
.process__step::before {
  content: "0" counter(step);
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(2.2rem, 3vw, 3rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
  display: block;
  margin-bottom: var(--s-2);
}
@supports not (-webkit-text-stroke: 1px #fff) { .process__step::before { color: var(--gold); } }
.process__step h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--s-1); }
.process__step p { font-size: var(--t-sm); color: color-mix(in srgb, var(--char) 78%, var(--silver)); }
.process__note { margin-top: var(--s-4); font-size: var(--t-sm); color: color-mix(in srgb, var(--char) 66%, var(--silver)); }

/* ================= facts strip (true numbers only) ================= */
.strip {
  background: #fff;
  border-block: 1px solid var(--line);
  padding-block: var(--s-4);
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3) var(--gut);
}
.strip__item { text-align: center; padding-inline: var(--s-2); }
.strip__item + .strip__item { border-inline-start: 1px solid var(--line); }
.strip__item .v {
  display: block;
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--navy);
}
.strip__item .l {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-sm);
  color: color-mix(in srgb, var(--char) 70%, var(--silver));
}

/* ================= values (official brand copy) ================= */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--gut);
}
@media (max-width: 64rem) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 46rem) { .values { grid-template-columns: 1fr; } }
.values__item { border-top: 2px solid var(--line-gold); padding-top: var(--s-3); }
.values__item h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--s-1); }
.values__item p { font-size: var(--t-sm); color: color-mix(in srgb, var(--char) 78%, var(--silver)); }

/* ================= instagram — real imagery, linking out ================= */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}
.ig-grid a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-1);
  aspect-ratio: 1 / 1;
}
.ig-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
  filter: saturate(0.94);
}
.ig-grid a:hover img, .ig-grid a:focus-visible img { transform: scale(1.05); filter: saturate(1.04); }
.ig-cta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

/* ================= product page ================= */
.pd { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); align-items: start; }
.pd__media {
  grid-column: 1 / span 6;
  position: sticky;
  top: 6.5rem;
  background: #fff;
  border-radius: var(--r-1);
  overflow: hidden;
}
.pd__media img { width: 100%; height: auto; transition: transform var(--dur-2) var(--ease); }
.pd__media:hover img { transform: scale(1.025); }
.pd__info { grid-column: 8 / span 5; }
.pd__info h1 { font-size: var(--d3); }
.pd__tagline { margin-top: var(--s-2); font-size: var(--t-lead); color: color-mix(in srgb, var(--char) 74%, var(--silver)); }
.pd__price {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  margin-block: var(--s-3);
  line-height: 1;
}
.spec { border-top: 1px solid var(--line); padding-block: var(--s-3); }
.spec dt {
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: var(--t-xs);
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.spec dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  border: 1px solid var(--silver);
  border-radius: 999px;
  padding: 0.2em 0.9em;
  font-family: var(--font-d);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: var(--t-sm);
  text-transform: uppercase;
  color: var(--char);
}
.pd__desc { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.pd__order { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.pd__order .btn { width: 100%; }
.pd__order .hint { font-size: var(--t-sm); color: color-mix(in srgb, var(--char) 68%, var(--silver)); }
.crumbs {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-4);
  color: color-mix(in srgb, var(--char) 60%, var(--silver));
}
.crumbs a { color: var(--gold-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ================= legal ================= */
.legal h1 { font-size: var(--d3); }
.legal .updated { color: color-mix(in srgb, var(--char) 66%, var(--silver)); font-size: var(--t-sm); margin-top: var(--s-1); margin-bottom: var(--s-4); }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-top: var(--s-4); margin-bottom: var(--s-2); text-transform: none; letter-spacing: 0; }
.legal p { margin-bottom: var(--s-2); }
.legal ul { padding-inline-start: 1.2em; margin-bottom: var(--s-2); }
.legal li { margin-bottom: var(--s-1); }

/* ================= faq ================= */
.faq h1 { font-size: var(--d3); }
.faq .faq-list { margin-top: var(--s-4); }
.faq details { border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: var(--s-3);
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.faq summary { transition: color var(--dur-1) var(--ease); }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::-webkit-details-marker { display: none; }
/* smooth open/close — progressive (Chromium 129+); others keep the instant toggle */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      transition: block-size var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease),
                  content-visibility var(--dur-1) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
  }
}
.faq summary::after {
  content: "+";
  font-family: var(--font-b);
  font-weight: 600;
  color: var(--gold-deep);
  flex: none;
  transition: rotate var(--dur-1) var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details > div { padding-bottom: var(--s-3); max-width: 60ch; }
.faq details p + p { margin-top: var(--s-2); }
.faq details a { color: var(--gold-deep); }

/* ================= about ================= */
.about-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.about-photos figure { overflow: hidden; margin: 0; border-radius: var(--r-1); }
.about-photos img { width: 100%; height: 100%; object-fit: cover; }
.prose p + p { margin-top: var(--s-3); }
.prose .lead { font-size: var(--t-lead); color: var(--navy); }

/* ================= footer (Ekana Blue accent ground) ================= */
.site-foot {
  background: var(--ink) var(--stripe);
  color: var(--silver);
  position: relative;
  overflow: hidden;
}
.site-foot::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  pointer-events: none;
}
.foot-word {
  display: block;
  width: min(72vw, 56rem);
  margin: var(--s-5) auto 0;
  opacity: 0.14;
  user-select: none;
  pointer-events: none;
}
.foot-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line-gold);
}
.foot-grid h3 {
  color: var(--gold);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.24em;
  margin-bottom: var(--s-2);
}
.foot-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.site-foot a { color: var(--ivory); text-decoration: none; transition: color var(--dur-1) var(--ease); text-underline-offset: 0.25em; }
.site-foot a:hover { color: var(--gold-2); text-decoration: underline; }
.foot-brand img { width: 10rem; margin-bottom: var(--s-2); }
.foot-brand p { font-size: var(--t-sm); max-width: 26rem; }
.foot-note {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-block: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
}
.foot-note__brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.foot-note__brand img { height: 1rem; width: auto; }
.foot-note .social { color: var(--ivory); }

/* ================= motion ================= */
/* Hidden pre-states are gated on html.js so the no-JS page shows everything statically.
   The clip lives on the img INSIDE .wipe, never on .wipe itself: Chrome computes the
   IntersectionObserver rect after the element's own clip-path, so a fully-clipped
   observed element never intersects and the reveal never fires. */
.js .reveal { opacity: 0; transform: translateY(1.6rem); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.js .wipe > img { clip-path: inset(0 100% 0 0); }
.js .wipe.is-in > img { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-2) var(--snap); }
.js .stagger > * { opacity: 0; transform: translateY(1.6rem); }
.stagger.is-in > * { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.stagger.is-in > :nth-child(2) { transition-delay: 80ms; }
.stagger.is-in > :nth-child(3) { transition-delay: 160ms; }
.stagger.is-in > :nth-child(4) { transition-delay: 240ms; }
.stagger.is-in > :nth-child(5) { transition-delay: 320ms; }
.stagger.is-in > :nth-child(6) { transition-delay: 400ms; }
.stagger.is-in > :nth-child(7) { transition-delay: 480ms; }
.stagger.is-in > :nth-child(8) { transition-delay: 560ms; }
.stagger.is-in > :nth-child(9) { transition-delay: 640ms; }
.stagger.is-in > :nth-child(10) { transition-delay: 720ms; }

@keyframes rise-in { from { transform: translateY(115%); } to { transform: translateY(0); } }
.js .hero2__title .rise, .js .band2__in .big .rise { animation: rise-in var(--dur-2) var(--snap) both; }
.js .hero2__title .mask:nth-child(2) .rise, .js .band2__in .big .mask:nth-child(2) .rise { animation-delay: 120ms; }
.js .hero2__title .mask:nth-child(3) .rise, .js .band2__in .big .mask:nth-child(3) .rise { animation-delay: 240ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
.js .hero2__meta { animation: fade-up var(--dur-2) var(--ease) 60ms both; }
.js .hero2__lead, .js .hero2__cta { animation: fade-up var(--dur-2) var(--ease) 480ms both; }
.js .hero2__media { animation: fade-up 1200ms var(--ease) both; }
/* cinematic settle: page-hero imagery eases from a slight zoom to rest */
@keyframes hero-settle { from { transform: scale(1.045); } to { transform: none; } }
.js .hero2__media img, .js .band2__bg { animation: hero-settle 1800ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero2__title .rise, .js .hero2__meta, .js .hero2__lead, .js .hero2__cta, .js .hero2__media { animation: none; }
  .js .band2__in .big .rise, .js .hero2__media img, .js .band2__bg { animation: none; }
  .tape__track { animation: none; }
  .js .reveal, .js .stagger > * { opacity: 1; transform: none; }
  .js .wipe > img { clip-path: none; }
  .card__media img, .looks2 img, .ig-grid img { transition: none; }
  .card, .card__media, .btn, .site-head, .site-head__in, .brand img, .nav a::after { transition: none; }
  .card:hover, .card:focus-visible, .btn:hover, .btn:active { transform: none; }
  .looks2 figure:hover img, .ig-grid a:hover img, .ig-grid a:focus-visible img,
  .card:hover .card__media img, .card:focus-visible .card__media img { transform: none; }
  .hero2__content::after, .band2__in::after { animation: none; }
  .js .nav.is-open a { animation: none; }
  .pd__media img { transition: none; }
  .pd__media:hover img { transform: none; }
}

/* ================= responsive ================= */
@media (max-width: 64rem) {
  .hero2 { min-height: 0; }
  .hero2__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(20rem, 55vw, 30rem);
    order: -1;
  }
  .hero2__media::after {
    background: linear-gradient(to top, var(--ivory) 2%, transparent 45%);
  }
  .hero2__content { padding-block: var(--s-5) var(--s-6); }
  .hero2__title { max-width: none; }
  .chap-head { grid-template-columns: 1fr; gap: var(--s-2); }
  .chap-head h1, .chap-head h2, .chap-head .side { grid-column: auto; }
  .looks2 .l1 { grid-column: 1 / span 6; }
  .looks2 .l2 { grid-column: 7 / span 6; margin-top: var(--s-5); }
  .looks2 .l3 { grid-column: 1 / span 6; margin-top: calc(var(--s-3) * -1); }
  .looks2 .l4 { grid-column: 7 / span 6; margin-top: var(--s-3); }
  .split2__media, .split2--flip .split2__media { grid-column: 1 / -1; order: 0; }
  .split2__copy, .split2--flip .split2__copy { grid-column: 1 / -1; order: 1; }
  .pd__media { grid-column: 1 / -1; position: static; }
  .pd__info { grid-column: 1 / -1; }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__item:nth-child(3) { border-inline-start: none; }
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gold-band h2 { grid-column: 1 / -1; }
  .gold-band .act { grid-column: 1 / -1; justify-self: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .stamp { display: none; }
}
@media (max-width: 46rem) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s-3);
    gap: var(--s-2);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .js .nav.is-open a {
    animation: fade-up 400ms var(--ease) both;
  }
  .js .nav.is-open a:nth-child(2) { animation-delay: 50ms; }
  .js .nav.is-open a:nth-child(3) { animation-delay: 100ms; }
  .js .nav.is-open a:nth-child(4) { animation-delay: 150ms; }
  .js .nav.is-open a:nth-child(5) { animation-delay: 200ms; }
  .nav-toggle { display: inline-flex; }
  .head-tools .social { display: none; }
  .looks2 { grid-template-columns: repeat(6, 1fr); }
  .looks2 .l1 { grid-column: 1 / span 4; }
  .looks2 .l2 { grid-column: 5 / span 2; margin-top: var(--s-4); }
  .looks2 .l3 { grid-column: 1 / span 3; margin-top: calc(var(--s-2) * -1); }
  .looks2 .l4 { grid-column: 4 / span 3; margin-top: 0; aspect-ratio: 3 / 4; }
  .process { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: 1fr; }
  .strip__item + .strip__item { border-inline-start: none; border-top: 1px solid var(--line); padding-top: var(--s-2); }
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ================= skip link (keyboard a11y) ================= */
.skip {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 100;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--font-d);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-sm);
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-1);
  transition: transform 200ms var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* ================= optical cap trim on display type (progressive) ================= */
@supports (text-box: trim-both cap alphabetic) {
  .pull, .split2__copy h2, .pd__info h1, .legal h1, .faq h1 { text-box: trim-both cap alphabetic; }
}

/* ================= cross-document view transitions (progressive) =================
   Same-origin navigations crossfade; product imagery morphs card → product page
   via the per-product vt-* names below. Duplicate names on a page make the browser
   skip the transition, so each product's name appears at most once per document. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
  ::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease); }
}
.vt-kana-fitted-top { view-transition-name: vt-kana-fitted-top; }
.vt-ekana-sleeveless-shirt { view-transition-name: vt-ekana-sleeveless-shirt; }
.vt-kana-long-sleeve-top { view-transition-name: vt-kana-long-sleeve-top; }
.vt-ekana-womens-longsleeve { view-transition-name: vt-ekana-womens-longsleeve; }
.vt-kana-oversized-shirt { view-transition-name: vt-kana-oversized-shirt; }
.vt-ekana-14-zip-pullover { view-transition-name: vt-ekana-14-zip-pullover; }
.vt-performance-sports-bra { view-transition-name: vt-performance-sports-bra; }
.vt-womens-active-shorts { view-transition-name: vt-womens-active-shorts; }
.vt-ekana-mens-athletic-shorts { view-transition-name: vt-ekana-mens-athletic-shorts; }
.vt-straight-leg-leggings { view-transition-name: vt-straight-leg-leggings; }
@media (prefers-reduced-motion: reduce) {
  .vt-kana-fitted-top, .vt-ekana-sleeveless-shirt, .vt-kana-long-sleeve-top,
  .vt-ekana-womens-longsleeve, .vt-kana-oversized-shirt, .vt-ekana-14-zip-pullover,
  .vt-performance-sports-bra, .vt-womens-active-shorts, .vt-ekana-mens-athletic-shorts,
  .vt-straight-leg-leggings { view-transition-name: none; }
}

@media print {
  .promo, .site-head, .tape, .site-foot, .plx { display: none; }
}