/* ==========================================================================
   KIOSK — Glass
   Minimalist glass futurism for the KIOSK automotive magazine,
   radio, film gallery and store.

   Fonts: GeneralSans (body/display) + Instrument Serif (editorial accents)
   Palette: graphite / bone / glass. One functional signal colour, used
   only for "live" and "now playing" states.
   ========================================================================== */

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

:root,
.k-light {
  /* White theme (default) */
  --bg: #fbfaf8;
  --bg-2: #ffffff;
  --bg-3: #efeeea;
  --tile: #f1f0ec;
  --tile-hover: #ffffff;
  --ink: #0f0f10;
  --ink-2: rgba(15, 15, 16, 0.68);
  --ink-3: rgba(15, 15, 16, 0.48);
  --ink-4: rgba(15, 15, 16, 0.14);
  --line: rgba(15, 15, 16, 0.08);
  --line-2: rgba(15, 15, 16, 0.16);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-2: rgba(255, 255, 255, 0.85);
  --glass-3: rgba(15, 15, 16, 0.06);
  --glass-dark: rgba(255, 255, 255, 0.72);
  --glass-hover: rgba(255, 255, 255, 0.96);
  --sheet: rgba(251, 250, 248, 0.88);
  --nav-bg: rgba(251, 250, 248, 0.86);
  --bone: #0f0f10;
  --bone-ink: #ffffff;
  --signal: #ff5b23;
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 15, 16, 0.04);
  --shadow: 0 30px 80px -36px rgba(15, 15, 16, 0.35);
}

/* Dark scope — photo/film surfaces keep the cinematic look on the white site */
.k-dark,
.k-hero__frame,
.k-story-hero__frame,
.k-card,
.k-films__lead,
.k-radio__deck,
.k-tile--invert,
.k-dock,
.k-lightbox,
.k-pager a,
.k-slideshow,
.k-dispatch {
  --bg: #0b0b0c;
  --bg-2: #111113;
  --bg-3: #18181b;
  --tile: #141416;
  --tile-hover: #18181b;
  --ink: #f2f0eb;
  --ink-2: rgba(242, 240, 235, 0.66);
  --ink-3: rgba(242, 240, 235, 0.42);
  --ink-4: rgba(242, 240, 235, 0.18);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.085);
  --glass-3: rgba(255, 255, 255, 0.13);
  --glass-dark: rgba(14, 14, 16, 0.55);
  --glass-hover: rgba(30, 30, 33, 0.72);
  --sheet: rgba(8, 8, 9, 0.6);
  --bone: #f2f0eb;
  --bone-ink: #0d0d0e;
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  color: var(--ink);
}

:root {

  --blur: blur(22px) saturate(150%);
  --blur-strong: blur(36px) saturate(160%);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --gutter: clamp(16px, 3.2vw, 40px);
  --max: 1440px;
  --nav-h: 76px;

  --f-sans: 'General Sans', 'Generalsans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body.k {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: calc(16px * var(--type, 1));
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.k::before {
  /* Ambient light — warm key top-left, cool fill right */
  content: '';
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 12% 6%, rgba(214, 196, 168, 0.16), transparent 70%),
    radial-gradient(35% 40% at 92% 30%, rgba(170, 190, 210, 0.14), transparent 70%);
}

body.k::after {
  /* Film grain */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Resets use :where() so component classes always win */
:where(.k) img, :where(.k) video { display: block; max-width: 100%; }
:where(.k) a { color: inherit; text-decoration: none; }
:where(.k) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.k) input, :where(.k) select { font: inherit; color: inherit; }
:where(.k) :is(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
:where(.k) :is(h1, h2, h3, h4) { font-weight: 400; }
:where(.k) :is(ul, ol) { padding: 0; list-style: none; }
.k ::selection { background: var(--bone); color: var(--bone-ink); }
.k :focus-visible { outline: 1.5px solid var(--bone); outline-offset: 3px; border-radius: 6px; }

.k-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.k-skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bone);
  color: var(--bone-ink);
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease);
}
.k-skip:focus { transform: none; }

/* Column guides (AutoDealer-style hairlines) */
.k-guides {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.k-guides span { border-left: 1px solid rgba(15, 15, 16, 0.045); }
.k-guides span:last-child { border-right: 1px solid rgba(15, 15, 16, 0.045); }
@media (max-width: 767px) {
  .k-guides { grid-template-columns: repeat(2, 1fr); }
  .k-guides span:nth-child(n + 3) { display: none; }
}

.k-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.k-section { padding: clamp(72px, 11vw, 160px) 0; position: relative; }
.k-section--tight { padding: clamp(48px, 7vw, 96px) 0; }

/* ------------------------------------------------------------ type */

.k-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: calc(11px * var(--type, 1));
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.k-eyebrow b { color: var(--ink); font-weight: 500; }

.k-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(255, 91, 35, 0.6);
  animation: k-pulse 2s infinite;
}
@keyframes k-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 91, 35, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 91, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 35, 0); }
}

.k-display {
  font-weight: 400;
  font-size: calc(clamp(40px, 6.4vw, 96px) * var(--type, 1));
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.k-h2 {
  font-weight: 400;
  font-size: calc(clamp(32px, 4.4vw, 64px) * var(--type, 1));
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.k-h3 {
  font-weight: 450;
  font-size: calc(clamp(20px, 2vw, 26px) * var(--type, 1));
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.k-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Staggered multi-line headline: each line a block, alternate lines indented */
.k-stagger > span { display: block; }
.k-stagger > span:nth-child(2n) { padding-left: clamp(40px, 12vw, 200px); }

.k-lede {
  font-size: calc(clamp(18px, 1.6vw, 22px) * var(--type, 1));
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  max-width: 34em;
}
/* Two-tone sentence: white lead, grey continuation */
.k-duo { color: var(--ink-3); }
.k-duo strong, .k-duo b { color: var(--ink); font-weight: 450; }

.k-body { color: var(--ink-2); font-size: calc(15px * var(--type, 1)); line-height: 1.6; max-width: 38em; }
.k-small { font-size: calc(13px * var(--type, 1)); color: var(--ink-3); }
.k-mono { font-family: var(--f-mono); font-size: calc(12px * var(--type, 1)); letter-spacing: 0.02em; }

.k-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.k-section-head .k-eyebrow { margin-bottom: 18px; }
@media (min-width: 900px) {
  .k-section-head { grid-template-columns: 1.3fr 1fr; }
  .k-section-head > :last-child { justify-self: end; }
}

/* ---------------------------------------------------------- glass */

.k-glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--hairline);
}
.k-glass--dark { background: var(--glass-dark); }
.k-glass--strong { background: var(--glass-2); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); }

/* --------------------------------------------------------- buttons */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font-size: calc(14px * var(--type, 1));
  font-weight: 450;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.k-btn:hover { background: var(--glass-hover); border-color: var(--ink-4); }
.k-btn:active { transform: scale(0.98); }
.k-btn--solid { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }
.k-btn--solid:hover { background: var(--bone); border-color: var(--bone); opacity: 0.86; }
.k-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.k-btn[disabled], .k-btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.k-btn--sm { min-height: 36px; padding: 0 14px; font-size: calc(13px * var(--type, 1)); }
.k-btn--icon { width: 44px; padding: 0; }
.k-btn svg { width: 14px; height: 14px; flex: none; }
.k-btn [data-ico] { display: inline-grid; place-items: center; }
.k-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.k-arrow {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--bone);
  color: var(--bone-ink);
  transition: transform 0.4s var(--ease);
}
.k-arrow svg { width: 14px; height: 14px; }
.k-arrow--ring {
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}

/* "Book a Car" bar → label + square arrow */
.k-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 10px 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font-size: calc(15px * var(--type, 1));
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.k-bar:hover { background: var(--glass-hover); border-color: var(--line-2); }
.k-bar:hover .k-arrow { transform: rotate(45deg); }
.k-bar small { display: block; color: var(--ink-3); font-size: calc(12px * var(--type, 1)); margin-top: 2px; }

/* Chips + segmented control */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass);
  font-size: calc(13px * var(--type, 1));
  color: var(--ink-2);
  transition: all 0.3s var(--ease);
}
.k-chip:hover { color: var(--ink); border-color: var(--line-2); }
.k-chip[aria-pressed='true'], .k-chip.is-active {
  color: var(--bone-ink);
  background: var(--bone);
  border-color: var(--bone);
}
.k-chip .k-count { font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); opacity: 0.6; }

.k-seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.k-seg::-webkit-scrollbar { display: none; }
.k-seg button {
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: calc(11px * var(--type, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.k-seg button:hover { color: var(--ink); }
.k-seg button[aria-pressed='true'] { background: var(--glass-3); color: var(--ink); }

.k-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font-size: calc(12px * var(--type, 1));
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------- nav */

.k-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px var(--gutter);
  pointer-events: none;
}
.k-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
}
.k-nav__inner > * { pointer-events: auto; }

.k-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-size: calc(13px * var(--type, 1));
}
.k-logo__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--bone-ink);
}
.k-logo__mark .k-symbol { width: 24px; height: auto; display: block; }
/* Header: clock left, the symbol centred, controls right */
.k-nav__inner { display: grid !important; grid-template-columns: 1fr auto 1fr; }
.k-nav__inner > .k-nav__clock { grid-column: 1; justify-self: start; padding-left: 10px; }
.k-nav__inner > .k-logo { grid-column: 2; justify-self: center; padding: 0 6px; height: 44px; }
.k-nav__inner > .k-nav__actions { grid-column: 3; justify-self: end; }
.k-nav .k-logo__mark { width: auto; height: auto; border-radius: 0; background: none; color: var(--ink); transition: opacity .2s; will-change: opacity, transform; }
.k-nav .k-logo__mark .k-symbol { width: 54px; }
.k-symbol { display: block; fill: currentColor; }

.k-nav__links {
  display: none;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.k-nav__links a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: calc(13.5px * var(--type, 1));
  color: var(--ink-2);
  transition: all 0.3s var(--ease);
}
.k-nav__links a:hover { color: var(--ink); background: var(--glass-3); }
.k-nav__links a[aria-current='page'] { color: var(--bone-ink); background: var(--bone); }

.k-nav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.k-nav__radio {
  display: none;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: calc(11px * var(--type, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.k-nav__radio:hover { color: var(--ink); background: var(--glass-3); }
.k-nav__shop {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--bone);
  color: var(--bone-ink);
  font-size: calc(13.5px * var(--type, 1));
  font-weight: 500;
}
.k-nav__menu-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 100%;
  border-radius: var(--r-pill);
}
.k-nav__menu-btn span {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: transform 0.4s var(--ease), background 0.2s;
}
.k-nav__menu-btn span::before, .k-nav__menu-btn span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.k-nav__menu-btn span::before { transform: translateY(-5px); }
.k-nav__menu-btn span::after { transform: translateY(5px); }
.k-nav__menu-btn[aria-expanded='true'] span { background: transparent; }
.k-nav__menu-btn[aria-expanded='true'] span::before { transform: rotate(45deg); }
.k-nav__menu-btn[aria-expanded='true'] span::after { transform: rotate(-45deg); }

@media (min-width: 1000px) {
  .k-nav__links { display: inline-flex; }
  .k-nav__radio { display: inline-flex; }
  .k-nav__menu-btn { display: none; }
}

/* Mobile sheet */
.k-sheet {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 12px) var(--gutter) max(var(--gutter), env(safe-area-inset-bottom));
  background: var(--sheet);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.k-sheet.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
.k-sheet__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: calc(clamp(32px, 9vw, 48px) * var(--type, 1));
  letter-spacing: -0.03em;
  line-height: 1.05;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.k-sheet__links a span { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); letter-spacing: 0.06em; }
.k-sheet.is-open .k-sheet__links a { transform: none; opacity: 1; }
.k-sheet.is-open .k-sheet__links li:nth-child(2) a { transition-delay: 0.04s; }
.k-sheet.is-open .k-sheet__links li:nth-child(3) a { transition-delay: 0.08s; }
.k-sheet.is-open .k-sheet__links li:nth-child(4) a { transition-delay: 0.12s; }
.k-sheet.is-open .k-sheet__links li:nth-child(5) a { transition-delay: 0.16s; }
.k-sheet.is-open .k-sheet__links li:nth-child(6) a { transition-delay: 0.2s; }
.k-sheet__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* --------------------------------------------------------- plates */
/* Placeholder "plates" render while photography is still in post. */

.k-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  isolation: isolate;
}
.k-media > img, .k-media > video, .k-media > iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.k-media::after {
  /* Soft vignette so glass captions always read */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 45%, rgba(0, 0, 0, 0.55) 100%);
}
.k-media--clean::after { display: none; }
/* Media that fills a fixed-ratio parent */
.k-story-hero__thumbs button > .k-media,
.k-thumbs button > .k-media,
.k-radio__cover > .k-media,
.k-quote__inline > .k-media,
.k-row__thumb > .k-media,
.k-films__lead > .k-media { position: absolute; inset: 0; }

.plate {
  --a: #2a2a2e;
  --b: #0d0d0f;
  --c: rgba(255, 255, 255, 0.25);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 70% 78%, var(--c), transparent 70%),
    radial-gradient(120% 80% at 20% 0%, var(--a), transparent 70%),
    linear-gradient(180deg, var(--a) 0%, var(--b) 100%);
}
.plate::before {
  /* Horizon + road light streaks */
  content: '';
  position: absolute;
  left: -10%; right: -10%;
  top: 62%;
  height: 38%;
  background:
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(255, 255, 255, 0.05) 14% 14.2%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%);
  transform: perspective(400px) rotateX(58deg);
  transform-origin: top;
}
.plate::after {
  /* Moving light sweep */
  content: '';
  position: absolute;
  top: 58%;
  left: -40%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  filter: blur(1px);
  animation: k-sweep 7s var(--ease-io) infinite;
}
@keyframes k-sweep {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateX(420%); opacity: 0; }
}
.plate__mark {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: calc(clamp(64px, 18cqw, 280px) * var(--type, 1));
  line-height: 0.85;
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  user-select: none;
}
.plate__meta {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: calc(10px * var(--type, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.k-media { container-type: inline-size; }

.plate--sodium   { --a: #3a2416; --b: #0f0a08; --c: rgba(232, 137, 43, 0.38); }
.plate--chrome   { --a: #4a4d52; --b: #121315; --c: rgba(225, 232, 240, 0.32); }
.plate--desert   { --a: #5a3f26; --b: #150f0a; --c: rgba(231, 181, 106, 0.42); }
.plate--ice      { --a: #1d2a3a; --b: #0a0e14; --c: rgba(160, 200, 240, 0.32); }
.plate--ember    { --a: #3e1a14; --b: #0f0807; --c: rgba(220, 80, 50, 0.32); }
.plate--graphite { --a: #26262a; --b: #0b0b0c; --c: rgba(255, 255, 255, 0.18); }
.plate--moss     { --a: #23302a; --b: #0a0e0c; --c: rgba(160, 196, 160, 0.26); }

/* ------------------------------------------------------------- hero */

.k-hero {
  position: relative;
  padding: 10px;
  padding-top: 10px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}
.k-hero__frame {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--nav-h) + clamp(24px, 6vh, 72px)) var(--gutter) var(--gutter);
  min-height: calc(100svh - 20px);
}
.k-hero__bg { position: absolute; inset: 0; z-index: -1; }
.k-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 55%, rgba(0, 0, 0, 0.7) 100%);
}
.k-hero__wordmark {
  position: absolute;
  left: 0; right: 0;
  top: 18%;
  z-index: 0;
  text-align: center;
  font-weight: 600;
  font-size: calc(clamp(64px, 17vw, 290px) * var(--type, 1));
  line-height: 0.82;
  letter-spacing: -0.065em;
  color: rgba(255, 255, 255, 0.92);
  mix-blend-mode: overlay;
  pointer-events: none;
  user-select: none;
}
.k-hero__top { position: relative; z-index: 3; max-width: 760px; }
.k-hero__title { margin-top: 18px; }
.k-hero__dek { margin-top: 20px; max-width: 30em; }

.k-hero__bottom {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: end;
  margin-top: 48px;
}
.k-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: var(--r-md);
  overflow: hidden;
}
.k-hero__stats > div {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.k-hero__stats dt { font-size: calc(11px * var(--type, 1)); color: var(--ink-3); margin-bottom: 4px; }
.k-hero__stats dd { font-size: calc(14px * var(--type, 1)); }
.k-hero__aside { display: grid; gap: 10px; }

.k-feature-card {
  display: block;
  padding: 16px;
  border-radius: var(--r-md);
}
.k-feature-card .k-media { aspect-ratio: 16 / 9; border-radius: var(--r-sm); margin-top: 14px; }
.k-feature-card__title { font-size: calc(18px * var(--type, 1)); letter-spacing: -0.015em; }
.k-feature-card__sub { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); margin-top: 2px; }

.k-watch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  text-align: left;
  transition: background 0.3s var(--ease);
}
.k-watch:hover { background: var(--glass-hover); }
.k-watch__thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.k-watch__thumb .k-play { position: relative; z-index: 2; }
.k-watch b { display: block; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.k-watch small { display: block; color: var(--ink-3); font-size: calc(13px * var(--type, 1)); margin-top: 3px; }

.k-play {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--bone-ink);
}
.k-play svg { width: 12px; height: 12px; margin-left: 2px; }

@media (min-width: 768px) {
  .k-hero { padding: 12px; }
  .k-hero__stats { grid-template-columns: repeat(4, 1fr); }
  .k-hero__stats > div { border-bottom: 0; }
  .k-hero__stats > div:last-child { border-right: 0; }
}
@media (min-width: 1100px) {
  .k-hero__bottom { grid-template-columns: 1fr 340px; gap: 16px; }
}

.k-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: calc(11px * var(--type, 1));
  color: var(--ink-3);
}
.k-scroll-cue::after {
  content: '';
  width: 1px; height: 28px;
  background: linear-gradient(var(--ink-3), transparent);
  animation: k-cue 2.2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes k-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------- marquee */

.k-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.k-marquee__track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: k-marquee 40s linear infinite;
}
.k-marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  font-size: calc(clamp(22px, 2.6vw, 36px) * var(--type, 1));
  letter-spacing: -0.02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.k-marquee__track span::after { content: '✦'; font-size: 0.5em; color: var(--ink-4); }
.k-marquee__track .k-serif { color: var(--ink); }
@keyframes k-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------ garage cards */

.k-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 82vw);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin: 0 calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.k-rail::-webkit-scrollbar { display: none; }
.k-rail > * { scroll-snap-align: start; }
@media (min-width: 700px) { .k-rail { grid-auto-columns: minmax(300px, 44vw); } }
@media (min-width: 1100px) { .k-rail { grid-auto-columns: minmax(320px, calc((min(100vw, var(--max)) - var(--gutter) * 2 - 36px) / 4)); } }

.k-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.6s var(--ease), background 0.4s var(--ease);
}
.k-card:hover { border-color: var(--line-2); background: var(--glass-2); }
.k-card .k-media { aspect-ratio: 4 / 5; }
.k-card .k-media > img, .k-card .plate { transition: transform 1.2s var(--ease); }
.k-card:hover .k-media > img, .k-card:hover .plate { transform: scale(1.04); }
.k-card__top {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.k-card__caption {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  padding: 14px 16px;
  border-radius: var(--r-md);
}
.k-card__title { font-size: calc(19px * var(--type, 1)); letter-spacing: -0.02em; line-height: 1.15; }
.k-card__sub { font-size: calc(12px * var(--type, 1)); color: var(--ink-2); margin-top: 4px; }
.k-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: calc(10.5px * var(--type, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.k-save {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: all 0.3s var(--ease);
}
.k-save svg { width: 16px; height: 16px; }
.k-save[aria-pressed='true'] { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }
.k-save[aria-pressed='true'] svg path { fill: currentColor; }

/* ------------------------------------------------- manifesto / quote */

.k-quote {
  font-size: calc(clamp(26px, 3.8vw, 54px) * var(--type, 1));
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-weight: 450;
  max-width: 22ch;
}
.k-quote__inline {
  display: inline-block;
  vertical-align: middle;
  width: clamp(80px, 11vw, 160px);
  height: clamp(40px, 5vw, 64px);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
  margin: 0 0.15em;
  transform: translateY(-0.08em);
}
.k-quote__aside { display: inline-block; max-width: 26ch; vertical-align: bottom; text-transform: none; font-size: calc(13px * var(--type, 1)); letter-spacing: 0; line-height: 1.4; color: var(--ink-3); margin-left: 12px; }

/* ------------------------------------------------------------ bento */

.k-bento {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
.k-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 240px;
  padding: 20px;
  background: var(--bg-2);
  transition: background 0.4s var(--ease);
}
.k-tile:hover { background: var(--tile-hover); }
.k-tile__num { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); }
.k-tile__icon { width: 22px; height: 22px; color: var(--ink-2); }
.k-tile p { font-size: calc(clamp(17px, 1.5vw, 21px) * var(--type, 1)); line-height: 1.25; letter-spacing: -0.015em; }
.k-tile p.k-small { font-size: calc(13px * var(--type, 1)); letter-spacing: 0; line-height: 1.5; max-width: 30ch; margin-left: auto; }
.k-tile--invert { background: var(--bg-2); }
.k-tile--media { padding: 0; min-height: 320px; overflow: hidden; }
.k-tile--media .k-media { position: absolute; inset: 0; }
.k-tile--media .k-tile__over { position: relative; z-index: 3; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
@media (min-width: 700px) {
  .k-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .k-bento { grid-template-columns: repeat(4, 1fr); }
  .k-tile--wide { grid-column: span 2; }
  .k-tile--tall { grid-row: span 2; }
}

/* --------------------------------------------------- numbered rows */

.k-rows { border-top: 1px solid var(--line); }
.k-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 12px;
  border-bottom: 1px solid var(--line);
  transition: background 0.45s var(--ease), color 0.45s var(--ease), padding 0.45s var(--ease);
}
.k-row__num { font-family: var(--f-mono); font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-row__title { font-size: calc(clamp(18px, 2vw, 28px) * var(--type, 1)); letter-spacing: -0.02em; line-height: 1.15; }
.k-row__sub { font-size: calc(13px * var(--type, 1)); color: var(--ink-3); margin-top: 4px; }
.k-row__end { display: flex; align-items: center; gap: 14px; }
.k-row__meta { display: none; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.k-row:hover { background: var(--bone); color: var(--bone-ink); padding-left: 20px; padding-right: 20px; }
.k-row:hover .k-row__num, .k-row:hover .k-row__sub, .k-row:hover .k-row__meta { color: inherit; opacity: 0.6; }
.k-row:hover .k-arrow--ring { border-color: var(--bone-ink); background: var(--bone-ink); color: var(--bone); transform: rotate(-45deg); }
.k-row__thumb {
  position: absolute;
  right: 120px;
  top: 50%;
  width: 180px;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) scale(0.92) rotate(-2deg);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) and (min-width: 1000px) {
  .k-row:hover .k-row__thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(-2deg); }
}
@media (min-width: 768px) {
  .k-row { grid-template-columns: 80px 1fr auto; padding: 26px 12px; }
  .k-row__meta { display: block; }
}

/* ----------------------------------------------------- films layout */

.k-films { display: grid; gap: 24px; grid-template-columns: 1fr; }
.k-films__lead { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; }
.k-films__lead .k-media { position: absolute; inset: 0; }
.k-films__lead-over {
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.k-films__lead-over .k-glass { padding: 16px 18px; border-radius: var(--r-md); max-width: 460px; }
@media (min-width: 1100px) { .k-films { grid-template-columns: 1.15fr 1fr; align-items: start; } }

/* ------------------------------------------------------------ radio */

.k-radio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.k-radio__deck {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-xl);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.k-radio__deck .plate { opacity: 0.7; }
.k-radio__deck > *:not(.plate) { position: relative; z-index: 2; }
.k-radio__now { font-size: calc(clamp(36px, 5vw, 72px) * var(--type, 1)); letter-spacing: -0.035em; line-height: 0.98; }
.k-radio__mood { color: var(--ink-2); margin-top: 10px; }
.k-radio__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-radio__list { padding: 8px; border-radius: var(--r-xl); }
.k-radio__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-md);
  text-align: left;
  transition: background 0.3s var(--ease);
}
.k-radio__item:hover { background: var(--glass-3); }
.k-radio__item.is-active { background: var(--glass-3); }
.k-radio__cover { position: relative; width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; }
.k-radio__item b { display: block; font-weight: 450; font-size: calc(15px * var(--type, 1)); }
.k-radio__item small { display: block; color: var(--ink-3); font-size: calc(12px * var(--type, 1)); margin-top: 2px; }
.k-radio__item .k-mono { color: var(--ink-3); }
@media (min-width: 1000px) { .k-radio { grid-template-columns: 1.4fr 1fr; } }

.k-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
}
.k-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--ink-4);
  transition: background 0.3s;
}
.k-wave i.is-on { background: var(--ink); }
.is-playing .k-wave i { animation: k-eq 1.1s var(--ease-io) infinite alternate; }
@keyframes k-eq { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.k-wave i { transform-origin: bottom; }

.k-round {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--bone-ink);
  transition: transform 0.3s var(--ease);
}
.k-round:hover { transform: scale(1.05); }
.k-round svg { width: 20px; height: 20px; }
.k-round--ghost { background: var(--glass-2); color: var(--ink); border: 1px solid var(--line-2); width: 52px; height: 52px; }

/* Radio dock: one player for the whole site, with a live waveform */
.k-dock {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 120;
  width: min(760px, calc(100% - 24px));
  color: var(--ink);
  transform: translate(-50%, 160%);
  transition: transform 0.6s var(--ease);
}
.k-dock.is-visible { transform: translate(-50%, 0); }
.k-dock__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(16, 16, 18, 0.78);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow);
}
.k-dock__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--bone); color: var(--bone-ink);
  transition: transform 0.3s var(--ease);
}
.k-dock__btn:hover { transform: scale(1.06); }
.k-dock__btn svg { width: 14px; height: 14px; }
.k-dock.is-buffering .k-dock__btn { animation: k-pulse 1s var(--ease-io) infinite alternate; }
@keyframes k-pulse { from { opacity: 0.55; } to { opacity: 1; } }
.k-dock__info { min-width: 0; flex: 0 1 auto; display: grid; gap: 2px; max-width: 34%; }
.k-dock__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-dock__title { font-weight: 400; font-size: calc(14px * var(--type, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-dock__wave { flex: 1; min-width: 40px; height: 34px; color: var(--ink); }
.k-dock__time { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); flex: none; }
.k-dock__time:empty { display: none; }
.k-dock__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--ink-3); transition: color 0.2s, background 0.2s, transform 0.4s var(--ease); }
.k-dock__icon:hover { color: var(--ink); background: var(--glass-2); }
.k-dock__icon svg { width: 14px; height: 14px; }
.k-dock [data-dock-expand] { transform: rotate(-45deg); }
.k-dock.is-expanded [data-dock-expand] { transform: rotate(135deg); }
.k-dock:not(.has-embed) [data-dock-expand] { display: none; }
.k-dock__progress { position: absolute; left: 64px; right: 24px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ink-4); cursor: pointer; }
.k-dock__progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: 2px; }
/* The Spotify player lives here; it stays rendered (and playing) while folded away */
.k-dock__panel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 10px);
  padding: 10px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: rgba(16, 16, 18, 0.86);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.k-dock.is-expanded .k-dock__panel { opacity: 1; pointer-events: auto; transform: none; }
.k-dock__embed iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
.k-dock__embed[hidden], .k-dock__note[hidden] { display: none; }
.k-dock__note { padding: 8px 4px 0; }
body.is-radio-on { padding-bottom: 84px; }
@media (max-width: 640px) {
  .k-dock__info { max-width: 42%; }
  .k-dock__time { display: none; }
  .k-dock__embed iframe { height: 280px; }
}

/* Live waveforms (drawn by the radio engine into canvas[data-wave]) */
canvas[data-wave] { display: block; }
.k-radio__wave { width: 100%; height: clamp(64px, 9vw, 110px); color: var(--ink); }
.k-nav__wave { display: none; width: 34px; height: 16px; color: var(--ink); }
body.is-radio-playing .k-nav__wave { display: block; }
body.is-radio-playing .k-nav__radio .k-live { display: none; }

/* Radio page playlist cards */
.k-radio-card { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 700px) { .k-radio-card { grid-template-columns: minmax(160px, 0.8fr) 1.2fr; } }
.k-radio-card__cover { position: relative; aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .k-radio-card__cover { aspect-ratio: auto; min-height: 100%; } }
.k-radio-card__cover > .k-media { position: absolute; inset: 0; }
.k-radio-card__body { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 3vw, 28px); }
.k-radio-card__wave { width: 100%; height: 44px; color: var(--ink); }

/* ------------------------------------------------------- song wheel */
/* Radio page: a playlist's songs as covers on a turning 3D drum (songWheel in kiosk-glass.js) */

.k-wheel {
  --pad: clamp(18px, 3vw, 32px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  padding: var(--pad) 0;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 0%, #1b1b1f 0%, #0b0b0c 72%);
  color: var(--ink);
  box-shadow: var(--elev-2);
}
.k-wheel [hidden] { display: none !important; }
.k-wheel__ambient { position: absolute; inset: -12%; z-index: -1; pointer-events: none; }
.k-wheel__ambient img { width: 100%; height: 100%; object-fit: cover; filter: blur(64px) saturate(1.5); opacity: 0.5; animation: k-wheel-fade 0.8s var(--ease) both; }
.k-wheel__ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0.15) 0%, rgba(11, 11, 12, 0.55) 55%, rgba(11, 11, 12, 0.9) 100%); }
@keyframes k-wheel-fade { from { opacity: 0; } }

.k-wheel__head { display: grid; gap: 14px; padding: 0 var(--pad); }
.k-wheel__mixes {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1);
  padding: 2px var(--pad);
  scroll-snap-type: x proximity;
}
.k-wheel__mixes::-webkit-scrollbar { display: none; }
.k-wheel__mix {
  flex: none;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.k-wheel__mix:hover { background: var(--glass-3); }
.k-wheel__mix[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.k-wheel__mix-cover { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; }
.k-wheel__mix-cover > .k-media { position: absolute; inset: 0; }
.k-wheel__mix-cover .k-media::after { display: none; }
.k-wheel__mix b { display: block; font-weight: 450; font-size: calc(13px * var(--type, 1)); white-space: nowrap; }
.k-wheel__mix small { display: block; font-size: calc(11px * var(--type, 1)); opacity: 0.6; white-space: nowrap; }

.k-wheel__stage {
  --card: clamp(150px, 24vw, 270px);
  position: relative;
  height: calc(var(--card) * 1.5);
  perspective: calc(var(--card) * 3.6);
  perspective-origin: 50% 38%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}
.k-wheel__stage.is-dragging { cursor: grabbing; }
.k-wheel__stage:focus-visible { outline: none; box-shadow: none; }
.k-wheel__stage:focus-visible::after {
  content: '';
  position: absolute;
  inset: 4px var(--pad);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 2px var(--signal);
  pointer-events: none;
}
.k-wheel__drum {
  position: absolute;
  inset: 0 0 calc(var(--card) * 0.3);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r, 600px) * -1)) rotateX(-7deg);
}
.k-wheel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card);
  height: var(--card);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  color: #fff;
  cursor: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 28px 50px -24px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-box-reflect: below 8px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.22));
}
.k-wheel__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; animation: k-wheel-fade 0.4s var(--ease) both; }
.k-wheel__card::after {
  /* Covers turned away from the front fall into shadow */
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--shade, 0) * 0.85);
  pointer-events: none;
}
.k-wheel__card.is-front { box-shadow: 0 40px 70px -26px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.k-wheel__badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0b0b0c;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.k-wheel__badge > svg { width: 12px; height: 14px; margin-left: 2px; }
.k-wheel__card.is-front .k-wheel__badge,
.k-wheel__card.is-playing .k-wheel__badge { opacity: 1; transform: none; }
.k-wheel__eq { display: none; gap: 3px; align-items: end; height: 14px; }
.k-wheel__eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: k-wheel-eq 0.9s ease-in-out infinite; }
.k-wheel__eq i:nth-child(2) { animation-delay: -0.3s; }
.k-wheel__eq i:nth-child(3) { animation-delay: -0.6s; }
.k-wheel__card.is-playing .k-wheel__eq { display: flex; }
.k-wheel__card.is-playing .k-wheel__badge > svg { display: none; }
.k-wheel__card.is-playing .k-wheel__badge { background: var(--signal); color: #fff; }
@keyframes k-wheel-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.k-wheel__card .plate::after { animation: none; }

.k-wheel__now {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 0 var(--pad);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.k-wheel__step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.k-wheel__step:hover { background: var(--glass-3); }
.k-wheel__step svg { width: 16px; height: 16px; }
.k-wheel__info { display: grid; gap: 4px; justify-items: center; text-align: center; min-height: 86px; align-content: center; }
.k-wheel__count { color: var(--ink-3); }
.k-wheel__title {
  font-weight: 450;
  font-size: calc(clamp(22px, 3vw, 36px) * var(--type, 1));
  letter-spacing: -0.025em;
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-wheel__artist { color: var(--ink-2); font-size: calc(15px * var(--type, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.k-wheel__controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 var(--pad); }
.k-wheel__wave { width: 120px; height: 30px; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='full']) .k-wheel__eq i,
  html:not([data-motion='full']) .k-wheel__card > img,
  html:not([data-motion='full']) .k-wheel__ambient img { animation: none; }
}
html[data-motion='reduced'] .k-wheel__eq i,
html[data-motion='reduced'] .k-wheel__card > img,
html[data-motion='reduced'] .k-wheel__ambient img { animation: none; }

/* Films on Vimeo */
.k-vimeo__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.k-vimeo__card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  background: #0e0e10;
}
.k-vimeo__thumb, .k-vimeo__thumb .plate, .k-vimeo__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-vimeo__thumb img { transition: transform 1s var(--ease); }
.k-vimeo__card:hover .k-vimeo__thumb img { transform: scale(1.04); }
.k-vimeo__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72)); }
.k-vimeo__play { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bone); color: var(--bone-ink); transition: transform 0.3s var(--ease); }
.k-vimeo__card:hover .k-vimeo__play { transform: scale(1.08); }
.k-vimeo__play svg { width: 14px; height: 14px; }
.k-vimeo__meta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 4px; }
.k-vimeo__meta b { font-weight: 400; font-size: calc(clamp(16px, 1.6vw, 20px) * var(--type, 1)); letter-spacing: -0.01em; }

/* ------------------------------------------------------ dispatch / form */

.k-dispatch {
  background: #0e0e10;
  border-color: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  gap: 32px;
}
@media (min-width: 1000px) { .k-dispatch { grid-template-columns: 1fr 1fr; align-items: end; } }
.k-input {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--bone);
  color: var(--bone-ink);
  box-shadow: var(--shadow);
}
.k-input input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--f-serif);
  font-size: calc(clamp(22px, 2.4vw, 30px) * var(--type, 1));
  color: var(--bone-ink);
  padding: 4px 2px;
}
.k-input input::placeholder { color: currentColor; opacity: 0.42; }
.k-input__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.k-input__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.k-input__chips label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(127, 127, 127, 0.14);
  font-size: calc(13px * var(--type, 1));
  cursor: default;
  user-select: none;
}
.k-input__chips input { width: auto; font-size: calc(13px * var(--type, 1)); accent-color: var(--bone-ink); }
.k-input__send {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bone-ink);
  color: var(--bone);
}
.k-input__send svg { width: 16px; height: 16px; }
.k-input__send[disabled] { opacity: 0.5; }
.k-form-msg { font-size: calc(13px * var(--type, 1)); min-height: 20px; color: var(--ink-2); }
.k-form-msg.is-error { color: #ff9b85; }

/* ------------------------------------------------------------ footer */

.k-footer { padding: 72px 0 calc(48px + 80px); border-top: 1px solid var(--line); }
.k-footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.k-footer__mark {
  font-size: calc(clamp(80px, 20vw, 320px) * var(--type, 1));
  line-height: 0.8;
  letter-spacing: -0.07em;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-4);
  margin-top: 48px;
  user-select: none;
}
.k-footer h4 { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 14px; }
.k-footer li + li { margin-top: 8px; }
.k-footer a { color: var(--ink-2); font-size: calc(14px * var(--type, 1)); transition: color 0.2s; }
.k-footer a:hover { color: var(--ink); }
.k-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
@media (min-width: 900px) { .k-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }

/* ------------------------------------------------------------ archive */

.k-page-head { padding: calc(var(--nav-h) + clamp(48px, 9vw, 120px)) 0 clamp(32px, 5vw, 56px); }

.k-archive { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .k-archive { grid-template-columns: 300px 1fr; gap: 32px; } }

.k-filters { padding: 20px; border-radius: var(--r-lg); }
@media (min-width: 1000px) { .k-filters { position: sticky; top: calc(var(--nav-h) + 16px); } }
.k-filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.k-filters__head h2 { font-size: calc(18px * var(--type, 1)); font-weight: 450; letter-spacing: -0.01em; }
.k-filters__reset { font-size: calc(13px * var(--type, 1)); color: var(--ink-3); }
.k-filters__reset:hover { color: var(--ink); }
.k-filter { padding: 18px 0; border-top: 1px solid var(--line); }
.k-filter:first-of-type { border-top: 0; }
.k-filter__label { display: block; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.k-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass);
}
.k-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.k-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: calc(14px * var(--type, 1)); }
.k-search input::placeholder { color: var(--ink-3); }

.k-filters-toggle { display: inline-flex; }
@media (min-width: 1000px) { .k-filters-toggle { display: none; } }
@media (max-width: 999px) {
  .k-filters[data-collapsed='true'] .k-filter, .k-filters[data-collapsed='true'] .k-filters__reset { display: none; }
  .k-filters[data-collapsed='true'] { padding-bottom: 12px; }
}

.k-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.k-results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.k-results-head h2 { font-size: calc(clamp(24px, 2.6vw, 34px) * var(--type, 1)); font-weight: 400; letter-spacing: -0.025em; }
.k-empty { padding: 64px 24px; text-align: center; border-radius: var(--r-lg); border: 1px dashed var(--line-2); color: var(--ink-3); }

/* ------------------------------------------------------------ story */

.k-story-hero {
  position: relative;
  padding: 10px;
  min-height: 100svh;
  display: flex;
}
.k-story-hero__frame {
  position: relative;
  flex: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: calc(var(--nav-h) + 32px) var(--gutter) var(--gutter);
  align-content: end;
  min-height: calc(100svh - 20px);
}
.k-story-hero__bg { position: absolute; inset: 0; z-index: -1; }
.k-story-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 35%, transparent 50%, rgba(0, 0, 0, 0.75));
}
.k-story-hero__head { align-self: start; }
.k-story-hero__code {
  font-weight: 400;
  font-size: calc(clamp(88px, 17vw, 260px) * var(--type, 1));
  line-height: 0.82;
  letter-spacing: -0.06em;
  margin-top: 12px;
}
.k-story-hero__tagline { margin-top: 18px; font-size: calc(clamp(22px, 2.4vw, 32px) * var(--type, 1)); letter-spacing: -0.02em; max-width: 22ch; }
.k-story-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.k-story-hero__panel { padding: 20px; border-radius: var(--r-lg); }
.k-story-hero__panel p.k-duo { font-size: calc(clamp(18px, 1.7vw, 23px) * var(--type, 1)); line-height: 1.25; letter-spacing: -0.015em; }
.k-story-hero__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.k-story-hero__thumbs button { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line-2); }

@media (min-width: 1000px) {
  .k-story-hero__frame {
    grid-template-columns: 1fr 340px;
    grid-template-rows: 1fr auto;
    align-content: stretch;
  }
  .k-story-hero__head { grid-column: 1; grid-row: 1; }
  .k-story-hero__side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
  .k-story-hero__thumbs { grid-template-columns: 1fr; }
  .k-story-hero__thumbs button { aspect-ratio: 16 / 10; }
  .k-story-hero__panel { grid-column: 1; grid-row: 2; max-width: 720px; }
}

.k-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.k-spec { padding: 18px 20px; background: var(--bg-2); }
.k-spec dt { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.k-spec dd { font-size: calc(clamp(18px, 1.6vw, 22px) * var(--type, 1)); letter-spacing: -0.015em; }
@media (min-width: 900px) { .k-specs { grid-template-columns: repeat(4, 1fr); } }

.k-story-layout { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .k-story-layout { grid-template-columns: 300px 1fr; } }
.k-story-aside { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1000px) { .k-story-aside { position: sticky; top: calc(var(--nav-h) + 16px); } }
.k-meta-list { padding: 6px 20px; border-radius: var(--r-lg); }
.k-meta-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: calc(13px * var(--type, 1)); }
.k-meta-list div:last-child { border-bottom: 0; }
.k-meta-list dt { color: var(--ink-3); }
.k-meta-list dd { text-align: right; }

.k-prose { display: grid; gap: 28px; max-width: 760px; }
.k-prose__text { font-size: calc(clamp(18px, 1.55vw, 22px) * var(--type, 1)); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink-3); }
.k-prose__text strong { color: var(--ink); font-weight: 450; }
.k-prose__heading { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--type, 1)); letter-spacing: -0.025em; font-weight: 400; margin-top: 16px; }
.k-prose__quote {
  margin: 16px 0;
  padding-left: clamp(16px, 4vw, 48px);
  border-left: 1px solid var(--line-2);
}
.k-prose__quote p { font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(30px, 3.6vw, 48px) * var(--type, 1)); line-height: 1.08; letter-spacing: -0.015em; }
.k-prose__quote cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-prose__figure { border-radius: var(--r-lg); overflow: hidden; }
.k-prose__figure .k-media { aspect-ratio: 16 / 10; }
.k-prose__figure figcaption { padding: 12px 4px 0; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }

/* Subjects */
.k-subjects { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.k-subject { padding: 20px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; }
.k-subject__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-3); font-family: var(--f-serif); font-style: italic; font-size: calc(24px * var(--type, 1)); }
.k-subject h3 { font-size: calc(20px * var(--type, 1)); font-weight: 450; letter-spacing: -0.015em; }
.k-subject .k-eyebrow { margin-top: 4px; }

/* Spec sheet */
.k-machines { display: grid; gap: 12px; }
.k-machine { padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-lg); display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 1000px) { .k-machine { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } .k-machine__plans { position: sticky; top: calc(var(--nav-h) + 24px); } }
.k-machine__plans { display: grid; gap: 18px; }
.k-machine__plan, .k-machine__factory { margin: 0; }
.k-machine__paper { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(10px, 2vw, 24px); }
.k-machine__paper img { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; }
.k-machine__factory figcaption span { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0.02em; }
.k-machine__svg {
  --sx-paper: var(--bg-2);
  color: var(--ink);
  background-color: var(--bg-2);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.k-machine__svg svg, .k-machine__svg img { display: block; width: 100%; height: auto; }
html[data-theme='dark'] .k-machine__svg img { filter: invert(1); }
.k-machine__plan figcaption, .k-machine__factory figcaption { padding: 10px 4px 0; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.k-machine__body h3 { font-size: calc(clamp(26px, 2.6vw, 34px) * var(--type, 1)); font-weight: 450; letter-spacing: -0.02em; margin: 6px 0 18px; }
.k-machine__stats { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.k-machine__stats div { display: grid; grid-template-columns: minmax(96px, 0.42fr) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.k-machine__stats dt { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.k-machine__stats dd { font-size: calc(14px * var(--type, 1)); }
.k-machine__facts { display: grid; gap: 12px; margin-top: 22px; }
.k-machine__facts li { position: relative; padding-left: 22px; font-size: calc(14.5px * var(--type, 1)); line-height: 1.55; color: var(--ink-2); }
.k-machine__facts li::before { content: '—'; position: absolute; left: 0; color: var(--ink-4); }
.k-machine__manual { margin-top: 22px; }
.k-machine__sources { margin-top: 20px; font-size: calc(12px * var(--type, 1)); line-height: 1.6; color: var(--ink-3); }
.k-machine__sources a { text-decoration: underline; text-underline-offset: 2px; }
.k-machine__sources a:hover { color: var(--ink); }

/* Garage: the Street File (garage.html) */
.k-machine__manual + .k-machine__manual { margin-top: 8px; }
.k-collection { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .k-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-collection > :first-child { grid-column: span 2; } }
@media (min-width: 1100px) { .k-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-collection > :first-child .k-coll__plate img { max-width: 760px; margin: 0 auto; }
.k-coll { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 18px; border-radius: var(--r-lg); transition: transform .3s var(--ease); }
.k-coll:hover { transform: translateY(-3px); }
.k-coll__plate { display: block; margin-bottom: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fbfaf8; overflow: hidden; }
.k-coll__plate img { display: block; width: 100%; height: auto; }
html[data-theme='dark'] .k-coll__plate { background: #040507; }
html[data-theme='dark'] .k-coll__plate img { filter: invert(1); }
.k-coll__meta { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-coll__role { color: var(--signal); }
.k-coll__name { padding: 0 6px; font-size: calc(clamp(26px, 2.6vw, 34px) * var(--type, 1)); font-weight: 450; letter-spacing: -0.03em; line-height: 1.05; }
.k-coll__sub { padding: 0 6px; font-size: calc(12.5px * var(--type, 1)); color: var(--ink-3); }
.k-coll__stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: auto 6px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: calc(16px * var(--type, 1)); }
.k-coll__stat small { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-tape { border-top: 1px solid var(--line-2); }
.k-tape__row { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr 1.2fr; gap: 16px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--type, 1)); transition: background 0.3s; }
a.k-tape__row:hover { background: var(--glass-3); }
.k-tape__row b { display: block; font-size: calc(clamp(18px, 1.8vw, 24px) * var(--type, 1)); font-weight: 450; letter-spacing: -0.02em; }
.k-tape__row small { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.k-tape__row--head { padding-block: 10px; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) {
  .k-tape__row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .k-tape__row > span:nth-child(2) { display: none; }
  .k-tape__row > span:nth-child(3) { text-align: right; }
  .k-tape__row > span:nth-child(4) { grid-column: 1 / -1; }
  .k-tape__row--head { display: none; }
}
.k-file { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 12px); }
.k-file__head { display: grid; gap: clamp(12px, 3vw, 40px); align-items: start; margin-bottom: clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .k-file__head { grid-template-columns: auto 1fr; } }
.k-file__num { font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(64px, 11vw, 168px) * var(--type, 1)); line-height: 0.8; letter-spacing: -0.04em; color: var(--ink-4); }
.k-file__num small { font-family: var(--f-mono); font-style: normal; font-size: calc(12px * var(--type, 1)); letter-spacing: 0.08em; margin-left: 8px; vertical-align: top; }
.k-file__title { font-size: calc(clamp(48px, 8vw, 120px) * var(--type, 1)); font-weight: 450; line-height: 0.92; letter-spacing: -0.045em; margin: 10px 0 18px; }
.k-file__dek { max-width: 46ch; }
.k-file__plates .k-machine__plans { position: static; }
@media (min-width: 1000px) { .k-file__plates .k-machine__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .k-file__plates .k-machine__plans > :only-child { grid-column: 1 / -1; max-width: 1040px; } }
.k-file__grid { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .k-file__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.k-file__grid .k-eyebrow { margin-bottom: 14px; }
.k-file__numbers { display: grid; gap: 10px; }
.k-file__numbers > div { padding: 18px 20px; border-radius: var(--r-lg); }
.k-file__numbers dt { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-file__numbers dd { font-size: calc(clamp(28px, 3.2vw, 44px) * var(--type, 1)); font-weight: 450; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.k-file__numbers small { display: block; margin-top: 6px; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-file__seen { display: grid; gap: 8px; }
.k-file__secrets { counter-reset: secret; display: grid; gap: 0; border-top: 1px solid var(--line); }
.k-file__secrets li { counter-increment: secret; display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: calc(clamp(15px, 1.25vw, 17px) * var(--type, 1)); line-height: 1.55; }
.k-file__secrets li::before { content: counter(secret, decimal-leading-zero); font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.06em; color: var(--signal); padding-top: 4px; }
.k-file__sheet { margin-top: 22px; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 0 16px; }
.k-file__sheet summary { cursor: pointer; padding: 14px 0; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.k-file__sheet[open] { padding-bottom: 16px; }
.k-file__signoff { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); display: grid; gap: 14px; max-width: 900px; }

/* Slideshow */
.k-slideshow { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.k-slideshow__stage { position: relative; aspect-ratio: 3 / 4; background: var(--bg-3); }
@media (min-width: 700px) { .k-slideshow__stage { aspect-ratio: 16 / 9; } }
.k-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.9s var(--ease), transform 1.6s var(--ease);
}
.k-slide.is-active { opacity: 1; transform: none; z-index: 1; }
.k-slide .k-media { position: absolute; inset: 0; }
.k-slideshow__ui {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.k-slideshow__caption { padding: 14px 18px; border-radius: var(--r-md); max-width: 520px; }
.k-slideshow__caption b { display: block; font-weight: 450; font-size: calc(15px * var(--type, 1)); }
.k-slideshow__caption small { display: block; color: var(--ink-3); font-size: calc(12px * var(--type, 1)); margin-top: 4px; font-family: var(--f-mono); }
.k-slideshow__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
}
.k-slideshow__nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: background 0.3s; }
.k-slideshow__nav button:hover { background: var(--glass-3); }
.k-slideshow__nav svg { width: 16px; height: 16px; }
.k-slideshow__count { font-family: var(--f-mono); font-size: calc(12px * var(--type, 1)); padding: 0 10px; color: var(--ink-2); }
.k-slideshow__progress { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 4px; padding: 14px; }
.k-slideshow__progress i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; }
.k-slideshow__progress i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.k-slideshow__progress i.is-done::after { transform: scaleX(1); }
.k-slideshow__progress i.is-active::after { animation: k-progress var(--dur, 6s) linear forwards; }
.k-slideshow.is-paused .k-slideshow__progress i.is-active::after { animation-play-state: paused; }
@keyframes k-progress { to { transform: scaleX(1); } }
.k-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 0; scrollbar-width: none; }
.k-thumbs::-webkit-scrollbar { display: none; }
.k-thumbs button { position: relative; flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; opacity: 0.45; border: 1px solid transparent; transition: opacity 0.3s, border-color 0.3s; }
.k-thumbs button.is-active { opacity: 1; border-color: var(--line-2); }

/* Colour guide */
.k-palette { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.k-swatch { display: flex; flex-direction: column; background: var(--bg-2); text-align: left; }
.k-swatch__chip { height: clamp(120px, 14vw, 200px); background: var(--swatch); position: relative; }
.k-swatch__chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%); }
.k-swatch__body { padding: 14px 16px 16px; }
.k-swatch__name { font-size: calc(15px * var(--type, 1)); letter-spacing: -0.01em; }
.k-swatch__hex { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-3); margin-top: 4px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.k-swatch__note { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); margin-top: 6px; }
.k-swatch:hover .k-swatch__hex { color: var(--ink); }
.k-palette-strip { display: flex; height: 6px; border-radius: 6px; overflow: hidden; }
.k-palette-strip i { flex: 1; background: var(--swatch); }

/* Behind the scenes */
.k-bts { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .k-bts { grid-template-columns: repeat(3, 1fr); } .k-bts__notes { grid-column: span 3; } }
.k-bts__card { padding: 20px; border-radius: var(--r-lg); }
.k-bts__card h3 { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 14px; }
.k-bts__card li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--type, 1)); }
.k-bts__card li:last-child { border-bottom: 0; }
.k-bts__card li span { color: var(--ink-3); }
.k-bts__gear li { justify-content: flex-start; }
.k-bts__gear li::before { content: '—'; color: var(--ink-4); }
.k-bts__label { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin: 8px 0 14px; }
.k-bts__clip { margin: 0; }
.k-spotify { display: block; width: 100%; border: 0; border-radius: 12px; background: rgba(0,0,0,.25); position: relative; z-index: 1; }
.k-bts__clip figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px 0; font-size: calc(13px * var(--type, 1)); }
.k-bts__clip figcaption span { white-space: nowrap; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* Interview */
.k-qa { display: grid; gap: 0; border-top: 1px solid var(--line); }
.k-qa__item { display: grid; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.k-qa__q { font-family: var(--f-mono); font-size: calc(12px * var(--type, 1)); letter-spacing: 0.04em; color: var(--ink-3); }
.k-qa__a { font-size: calc(clamp(20px, 2vw, 28px) * var(--type, 1)); line-height: 1.3; letter-spacing: -0.02em; }
@media (min-width: 900px) { .k-qa__item { grid-template-columns: 1fr 2fr; gap: 32px; } }

/* Timeline (AEON-style) */
.k-timeline { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); position: relative; padding-top: 24px; }
.k-timeline::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--line-2); }
.k-timeline li { position: relative; padding-right: 16px; }
.k-timeline li::before { content: ''; position: absolute; top: -24px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-3); }
.k-timeline li:last-child::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); }
.k-timeline b { display: block; font-family: var(--f-mono); font-size: calc(12px * var(--type, 1)); letter-spacing: 0.1em; font-weight: 400; }
.k-timeline span { display: block; font-size: calc(13px * var(--type, 1)); color: var(--ink-3); margin-top: 6px; max-width: 18ch; }


/* Prev/next */
.k-pager { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .k-pager { grid-template-columns: 1fr 1fr; } }
.k-pager a { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; padding: 20px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); isolation: isolate; }
.k-pager a .k-media { position: absolute; inset: 0; z-index: -1; }
.k-pager a:last-child { text-align: right; align-items: flex-end; }
.k-pager b { font-size: calc(clamp(24px, 3vw, 40px) * var(--type, 1)); font-weight: 400; letter-spacing: -0.03em; }

/* ---------------------------------------------------------- lightbox */

.k-lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(6, 6, 7, 0.82);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.k-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
.k-lightbox__inner { width: min(1200px, 100%); }
.k-lightbox__screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.k-lightbox__screen > video, .k-lightbox__screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-lightbox__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; z-index: 2; }
.k-lightbox__empty p { max-width: 32ch; margin: 12px auto 20px; color: var(--ink-2); }
.k-lightbox__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.k-lightbox__close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line-2); }

/* ------------------------------------------------------------- toast */

.k-toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100% - 32px));
  padding: 11px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, #111214 82%, transparent);
  color: #f4f2ee;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 14px 34px -14px rgba(0, 0, 0, 0.55);
  font-size: calc(14px * var(--type, 1));
  line-height: 1.35;
  text-align: left;
  transform: translate(-50%, 14px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(.3, 1.3, .5, 1), opacity 0.3s var(--ease);
}
.k-toast.is-visible { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
@media (max-width: 760px) { .k-toast { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); } }
/* Clear of the radio dock while it's open */
body.is-radio-on .k-toast { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 92px); }
@media (max-width: 760px) { body.is-radio-on .k-toast { bottom: calc(var(--tabbar-h) + 84px); } }
.k-toast__ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.k-toast__ico svg { width: 15px; height: 15px; }
html[data-theme='dark'] .k-toast { background: color-mix(in srgb, #f4f2ee 88%, transparent); color: #111214; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 34px -14px rgba(0,0,0,.7); }
html[data-theme='dark'] .k-toast__ico { background: rgba(0, 0, 0, 0.08); }

/* Tooltips for icon-only buttons (desktop) */
.k-hint {
  position: fixed; z-index: 2000; left: 0; top: 0; pointer-events: none;
  max-width: 240px; padding: 6px 10px; border-radius: 9px;
  background: color-mix(in srgb, #111214 88%, transparent); color: #f4f2ee;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 12px; line-height: 1.3; letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s var(--ease);
}
.k-hint[data-side='below'] { transform: translateY(-4px); }
.k-hint.is-visible { opacity: 1; transform: none; }
html[data-theme='dark'] .k-hint { background: color-mix(in srgb, #f4f2ee 92%, transparent); color: #111214; }

/* ------------------------------------------------------------ reveal */

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay='1'] { transition-delay: 0.08s; }
[data-reveal-delay='2'] { transition-delay: 0.16s; }
[data-reveal-delay='3'] { transition-delay: 0.24s; }
html.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .k-marquee__track { animation: none; }
}

/* Utility */
.k-stack { display: grid; gap: 12px; }
.k-row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.k-mt-s { margin-top: 12px; }
.k-mt-m { margin-top: 24px; }
.k-mt-l { margin-top: 48px; }
.k-hide { display: none !important; }
.k-divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   SHOP — KIOSK Supply (skateshop)
   ========================================================================== */

.k-mockup, .k-product-img { display: block; width: 100%; height: 100%; }
.k-product-img { object-fit: contain; }

/* Ticker strip */
.k-ticker {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 0;
  font-family: var(--f-mono);
  font-size: calc(11.5px * var(--type, 1));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.k-ticker__track { display: flex; width: max-content; gap: 28px; animation: k-marquee 38s linear infinite; }
.k-ticker__track span { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; }
.k-ticker__track span::after { content: '✦'; opacity: 0.6; }
.k-ticker-wrap { overflow: hidden; padding: 16px 0; }
.k-ticker--tilt { transform: rotate(-1.2deg) scaleX(1.04); }

/* Shop hero: copy + a "wall" of product tiles */
.k-shop-hero { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: end; }
.k-shop-hero__title {
  font-weight: 600;
  font-size: calc(clamp(64px, 13vw, 200px) * var(--type, 1));
  line-height: 0.82;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.k-shop-hero__title em { font-family: var(--f-serif); font-weight: 400; text-transform: none; letter-spacing: -0.03em; }
.k-wall { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 6 / 5; }
.k-wall__item {
  position: relative;
  border-radius: var(--r-md);
  background: var(--tile);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: transform 0.6s var(--ease);
}
.k-wall__item:hover { transform: translateY(-4px); }
.k-wall__item .k-mockup, .k-wall__item .k-product-img { width: 92%; height: 92%; }
.k-wall__item--tall { grid-row: span 2; }
.k-wall__item span {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 1000px) { .k-shop-hero { grid-template-columns: 1fr 1.05fr; gap: 40px; } }

/* Shop by category */
.k-cats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); }
.k-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--tile);
  overflow: hidden;
  transition: background 0.3s var(--ease);
}
.k-cat:hover, .k-cat[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.k-cat .k-mockup, .k-cat .k-product-img { position: absolute; inset: 14% 10% 10%; width: 80%; height: 76%; transition: transform 0.6s var(--ease); }
.k-cat:hover .k-mockup, .k-cat:hover .k-product-img { transform: scale(1.06) rotate(-2deg); }
.k-cat b { position: relative; z-index: 1; font-weight: 500; font-size: calc(14px * var(--type, 1)); }
.k-cat small { position: relative; z-index: 1; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); opacity: 0.6; align-self: flex-end; }

/* Toolbar */
@media (max-width: 759px) {
  .k-toolbar .k-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .k-toolbar .k-chips::-webkit-scrollbar { display: none; }
  .k-toolbar .k-chip { flex: none; }
}
.k-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.k-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  padding: 0 34px 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23777' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: calc(13px * var(--type, 1));
  color: var(--ink);
  cursor: pointer;
}

/* Product grid + card */
.k-shop-grid { display: grid; gap: 20px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .k-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; } }
@media (min-width: 1180px) { .k-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k-shop-grid--3 { }
@media (min-width: 1180px) { .k-shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.k-shop-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k-shop-card__tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--tile);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}
.k-shop-card__img { position: absolute; inset: 6% 6% 4%; transition: transform 0.8s var(--ease), opacity 0.3s; }
.k-shop-card__img > img { width: 100%; height: 100%; object-fit: contain; }
.k-shop-card__tile:hover .k-shop-card__img { transform: scale(1.05) translateY(-1%); }
.k-shop-card__img.is-swapping { opacity: 0; }
.k-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
  border-radius: 6px;
  background: var(--ink); color: var(--bg);
  font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase;
}
.k-badge--soft { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); }
.k-badge--sticker { transform: rotate(-4deg); background: var(--signal); color: #111; }
.k-shop-card__status {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.k-shop-card__quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: calc(13px * var(--type, 1)); font-weight: 500;
  transform: translateY(8px); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), background 0.2s;
}
.k-shop-card__quick:hover { background: var(--ink); color: var(--bg); }
.k-shop-card__tile:hover .k-shop-card__quick, .k-shop-card__quick:focus-visible { transform: none; opacity: 1; }
@media (hover: none) { .k-shop-card__quick { display: none; } }

.k-shop-card__info { display: grid; gap: 6px; padding: 0 2px; }
.k-shop-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.k-shop-card__title { font-size: calc(15px * var(--type, 1)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.k-shop-card__title a::after { content: ''; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; }
.k-shop-card__price { font-size: calc(14px * var(--type, 1)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-shop-card__sub { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }

.k-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-dot {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s var(--ease);
}
.k-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; transition: border-color 0.2s; }
.k-dot[aria-pressed='true']::after { border-color: var(--ink); }
.k-dot:hover { transform: scale(1.1); }
.k-dot--lg { width: 26px; height: 26px; }
.k-dots__name { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); margin-left: 4px; }

/* Matches row (Shop the look) */
.k-match { display: flex; flex-wrap: wrap; gap: 4px; }
.k-match span { font-family: var(--f-mono); font-size: calc(9.5px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: var(--bg-3); color: var(--ink-2); }

/* Quick view */
.k-qv {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-2);
  color: var(--ink);
  max-height: calc(100svh - 2 * var(--gutter));
  overflow-y: auto;
}
.k-qv__media { position: relative; background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; }
.k-qv__media .k-mockup, .k-qv__media img { width: 86%; height: 86%; object-fit: contain; }
.k-qv__thumbs { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.k-qv__thumbs button { width: 54px; height: 54px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); padding: 4px; }
.k-qv__thumbs button[aria-pressed='true'] { border-color: var(--ink); }
.k-qv__body { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.k-qv__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.k-qv__title { font-size: calc(clamp(26px, 3vw, 38px) * var(--type, 1)); line-height: 1.02; letter-spacing: -0.03em; }
.k-qv__price { font-size: calc(20px * var(--type, 1)); font-variant-numeric: tabular-nums; }
.k-qv__close { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); }
.k-qv__close svg { width: 14px; height: 14px; }
.k-qv__label { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; justify-content: space-between; }
.k-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.k-size {
  min-width: 52px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line-2);
  font-size: calc(13px * var(--type, 1)); font-variant-numeric: tabular-nums;
  transition: all 0.2s var(--ease);
}
.k-size:hover { border-color: var(--ink); }
.k-size[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-qv__cta { display: grid; gap: 8px; }
.k-qv__cta .k-btn { min-height: 52px; font-size: calc(15px * var(--type, 1)); width: 100%; }
.k-qv__list { border-top: 1px solid var(--line); }
.k-qv__list div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: calc(13px * var(--type, 1)); }
.k-qv__list dt { color: var(--ink-3); }
.k-qv__seen { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 860px) {
  .k-qv { grid-template-columns: 1.1fr 1fr; }
  .k-qv__media { aspect-ratio: auto; min-height: 560px; }
}
.k-lightbox__inner:has(.k-qv) { width: min(1080px, 100%); }

/* ---------------------------------------------------------- journal / blog */
.k-byline { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.k-byline b { color: var(--ink); font-weight: 400; }
.k-chapter { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.k-chapter__num { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.k-chapter__num code { font: inherit; color: var(--ink); }
.k-chapter--draft { padding: 20px; border: 1px dashed var(--line-2, var(--line)); border-radius: var(--r-lg); background: var(--glass, transparent); }
.k-chapter--draft .k-prose__heading { margin-top: 0; color: var(--ink-3); }
.k-chapter--draft .k-prose__text { font-style: italic; }
.k-chapter__more { margin-top: clamp(24px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--line); }
.k-journal { display: grid; gap: clamp(28px, 5vw, 64px); }
.k-post { display: grid; gap: clamp(16px, 3vw, 40px); grid-template-columns: 1fr; align-items: start; padding-bottom: clamp(28px, 5vw, 64px); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .k-post { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.k-post__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; }
.k-post__media > .k-media { position: absolute; inset: 0; }
.k-post__media img { transition: transform 1s var(--ease); }
.k-post__media:hover img { transform: scale(1.03); }
.k-post__body { display: grid; gap: 10px; }
.k-post__body h2 a { color: inherit; text-decoration: none; }
.k-post__body h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.k-post__body .k-byline { margin: 8px 0 0; }
.k-post__chapters { list-style: none; counter-reset: ch; display: grid; gap: 0; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.k-post__chapters li { counter-increment: ch; display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--type, 1)); color: var(--ink-3); }
.k-post__chapters li::before { content: counter(ch, decimal-leading-zero); font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); color: var(--ink-4, var(--ink-3)); padding-top: 2px; }
.k-post__chapters li.is-done { color: var(--ink); }

/* ======================================================= magazine layouts */

/* Horizontal scroll rail: drag, arrows, progress */
.k-hscroll-wrap { position: relative; }
.k-hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78%, 1fr);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  outline-offset: 6px;
  cursor: grab;
}
.k-hscroll::-webkit-scrollbar { display: none; }
.k-hscroll > * { scroll-snap-align: start; }
.k-hscroll.is-dragging, .k-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.k-hscroll.is-dragging *, .k-rail.is-dragging * { pointer-events: none; }
.k-hscroll__ui { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.k-hscroll__bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.k-hscroll__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0.08); transition: transform 0.2s linear; }
.k-hscroll__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); background: var(--glass); transition: opacity 0.2s, background 0.2s; }
.k-hscroll__btn:hover { background: var(--glass-3); }
.k-hscroll__btn svg { width: 16px; height: 16px; }
.is-start [data-rail-prev], .is-end [data-rail-next] { opacity: 0.35; pointer-events: none; }
.is-static .k-hscroll__ui { display: none; }
@media (min-width: 700px) { .k-hscroll { grid-auto-columns: minmax(300px, 44%); } }
@media (min-width: 1100px) { .k-hscroll { grid-auto-columns: calc((100% - 36px) / 4); } }
.k-hscroll-wrap--depts .k-hscroll { grid-auto-columns: minmax(82%, 1fr); }
@media (min-width: 700px) { .k-hscroll-wrap--depts .k-hscroll { grid-auto-columns: minmax(340px, 46%); } }
@media (min-width: 1100px) { .k-hscroll-wrap--depts .k-hscroll { grid-auto-columns: calc((100% - 24px) / 2.6); } }
.k-hscroll-wrap--look .k-hscroll { grid-auto-columns: minmax(86%, 1fr); }
@media (min-width: 700px) { .k-hscroll-wrap--look .k-hscroll { grid-auto-columns: minmax(380px, 58%); } }
@media (min-width: 1100px) { .k-hscroll-wrap--look .k-hscroll { grid-auto-columns: calc((100% - 12px) / 2.25); } }

/* Department cards (magazine "sections") */
.k-dept {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(380px, 46vw, 560px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  color: #f4f2ee;
  background: #121214;
}
.k-dept__media { position: absolute; inset: 0; z-index: -2; }
.k-dept__media > .k-media { position: absolute; inset: 0; }
.k-dept__media img { transition: transform 1.2s var(--ease); }
.k-dept:hover .k-dept__media img { transform: scale(1.04); }
.k-dept::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.k-dept--fashion { background: #e9e6df; color: #121214; }
.k-dept--fashion::after { background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(233,230,223,.95) 100%); }
.k-dept__product { position: absolute; inset: 6% 14% 22%; }
.k-dept__product > * { width: 100%; height: 100%; object-fit: contain; }
.k-dept__top { display: flex; justify-content: space-between; align-items: center; }
.k-dept__top .k-eyebrow { color: inherit; opacity: 0.8; }
.k-dept__n { font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(28px, 3vw, 40px) * var(--type, 1)); line-height: 1; }
.k-dept__body { display: grid; gap: 8px; }
.k-dept__title { font-weight: 400; font-size: calc(clamp(44px, 6vw, 92px) * var(--type, 1)); letter-spacing: -0.04em; line-height: 0.92; }
.k-dept__dek { max-width: 32ch; font-size: calc(clamp(15px, 1.3vw, 18px) * var(--type, 1)); opacity: 0.85; }

/* Mosaic: Pinterest-style masonry */
.k-mosaic__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.k-mosaic { list-style: none; margin: 0; padding: 0; columns: 2 160px; column-gap: 10px; }
@media (min-width: 700px) { .k-mosaic { columns: 3; column-gap: 12px; } }
@media (min-width: 1100px) { .k-mosaic { columns: 4; column-gap: 14px; } }
.k-mosaic__tile { break-inside: avoid; margin: 0 0 12px; }
@media (min-width: 1100px) { .k-mosaic__tile { margin-bottom: 14px; } }
.k-mosaic__tile[hidden] { display: none; }
.k-mosaic__tile > button, .k-mosaic__tile > a, .k-mosaic__tile > div {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  background: var(--bg-2);
  isolation: isolate;
}
.k-mosaic__tile img { display: block; width: 100%; height: auto; transition: transform 0.9s var(--ease); }
.k-mosaic__tile > *:hover img { transform: scale(1.03); }
.k-mosaic__cap {
  display: grid;
  gap: 3px;
  padding: 12px 14px 14px;
}
.k-mosaic__tile--photo .k-mosaic__cap, .k-mosaic__tile--film .k-mosaic__cap, .k-mosaic__tile--mix .k-mosaic__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-top: 40px;
  color: #f4f2ee;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66));
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.k-mosaic__tile > *:hover .k-mosaic__cap, .k-mosaic__tile > *:focus-visible .k-mosaic__cap,
.k-mosaic__tile--film .k-mosaic__cap, .k-mosaic__tile--mix .k-mosaic__cap { opacity: 1; transform: none; }
@media (hover: none) { .k-mosaic__tile--photo .k-mosaic__cap { opacity: 1; transform: none; } }
.k-mosaic__cap b { font-weight: 400; font-size: calc(15px * var(--type, 1)); letter-spacing: -0.01em; line-height: 1.2; }
.k-mosaic__cap small { font-size: calc(12px * var(--type, 1)); opacity: 0.72; }
.k-mosaic__desk { font-family: var(--f-mono); font-size: calc(9.5px * var(--type, 1)); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; }
.k-mosaic__frame { position: relative; display: block; }
.k-mosaic__frame .plate, .k-mosaic__frame img, .k-mosaic__frame > .k-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-mosaic__tile--film .k-mosaic__frame { aspect-ratio: 4 / 5; }
.k-mosaic__tile--mix .k-mosaic__frame { aspect-ratio: 1; }
.k-mosaic__play { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bone); color: var(--bone-ink); }
.k-mosaic__play svg { width: 13px; height: 13px; }
.k-mosaic__wave { position: absolute; left: 14px; right: 14px; top: 42%; height: 38px; z-index: 2; color: #f4f2ee; }
.k-mosaic__tile--product > button { background: var(--bg-2); border: 1px solid var(--line); }
.k-mosaic__product { display: block; aspect-ratio: 5 / 6; padding: 8% 10% 0; }
.k-mosaic__product > * { width: 100%; height: 100%; object-fit: contain; }
.k-mosaic__tile--palette > a { border: 1px solid var(--line); }
.k-mosaic__swatches { display: grid; grid-template-columns: repeat(3, 1fr); aspect-ratio: 3 / 2; }
.k-mosaic__swatches span { display: block; }
.k-mosaic__tile--quote > a {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  background: #121214;
  color: #f4f2ee;
}
.k-mosaic__tile--quote q { font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(26px, 2.6vw, 38px) * var(--type, 1)); line-height: 1.04; letter-spacing: -0.01em; quotes: none; }
.k-mosaic__more { display: inline-flex; align-items: center; gap: 10px; font-size: calc(13px * var(--type, 1)); }
.k-mosaic__more .k-arrow { width: 28px; height: 28px; }

/* Shop lookbook slides */
.k-look { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); min-height: clamp(320px, 34vw, 460px); }
.k-look__photo { position: relative; display: block; }
.k-look__photo > .k-media { position: absolute; inset: 0; }
.k-look__product { position: relative; display: block; padding: 12% 8% 34%; }
.k-look__product > * { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease); }
.k-look__product:hover > * { transform: scale(1.04) rotate(-1deg); }
.k-look__cap { position: absolute; right: 0; bottom: 0; width: calc(100% / 2.15); display: grid; gap: 4px; padding: 16px 18px 18px; }
.k-look__cap b { font-weight: 400; font-size: calc(clamp(16px, 1.4vw, 20px) * var(--type, 1)); letter-spacing: -0.015em; }
.k-look__cap small { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }

/* Photo viewer (lightbox) */
.k-photo { position: relative; margin: 0; }
.k-photo img { display: block; width: 100%; max-height: 76vh; object-fit: contain; border-radius: var(--r-lg); background: #000; }
.k-photo figcaption { padding: 12px 4px 0; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-photo__nav { position: absolute; top: calc(50% - 30px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(16,16,18,.6); color: #f4f2ee; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.k-photo__nav svg { width: 18px; height: 18px; }
.k-photo__nav--prev { left: 12px; }
.k-photo__nav--next { right: 12px; }

/* Product image flip (quote back → front on hover) and lifestyle photo */
.k-flip { position: relative; display: block; width: 100%; height: 100%; }
.k-flip > img { position: absolute; inset: 0; transition: opacity 0.45s var(--ease); }
.k-flip__alt { opacity: 0; }
:where(a, button, .k-shop-card__tile):hover .k-flip > img:first-child { opacity: 0; }
:where(a, button, .k-shop-card__tile):hover .k-flip__alt { opacity: 1; }
.k-product-img--photo { object-fit: cover !important; border-radius: var(--r-lg); }
.k-qv__views { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; z-index: 3; }
.k-qv__views .k-chip:not([aria-pressed='true']) { background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* ============================================ editorial futurism · day / night */

/* Day: paper white, black type */
:root { --bg: #ffffff; --bg-2: #ffffff; --bg-3: #f3f3f1; --tile: #f4f4f2; --nav-bg: rgba(255, 255, 255, 0.72); --sheet: rgba(255, 255, 255, 0.9); }

/* Night: the whole site goes dark (set on <html data-theme="dark"> before paint) */
html[data-theme='dark'],
html[data-theme='dark'] .k-light {
  --bg: #0a0a0b;
  --bg-2: #111113;
  --bg-3: #18181b;
  --tile: #141416;
  --tile-hover: #1a1a1d;
  --ink: #f2f0eb;
  --ink-2: rgba(242, 240, 235, 0.68);
  --ink-3: rgba(242, 240, 235, 0.46);
  --ink-4: rgba(242, 240, 235, 0.16);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.085);
  --glass-3: rgba(255, 255, 255, 0.12);
  --glass-dark: rgba(14, 14, 16, 0.6);
  --glass-hover: rgba(30, 30, 33, 0.72);
  --sheet: rgba(8, 8, 9, 0.82);
  --nav-bg: rgba(10, 10, 11, 0.62);
  --bone: #f2f0eb;
  --bone-ink: #0d0d0e;
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
html[data-theme='dark'] body.k { background: var(--bg); color: var(--ink); }
html { transition: background-color 0.5s var(--ease); }

/* Glass header: logo · clock · theme · radio · menu */
.k-nav__inner {
  padding: 8px 8px 8px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--blur-strong);
  backdrop-filter: var(--blur-strong);
  box-shadow: var(--hairline);
}
.k-nav__inner > .k-logo { border: 0; background: none; box-shadow: none; }
.k-nav__links { display: none !important; }
.k-nav__shop { display: none !important; }
.k-nav__actions { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; gap: 6px; }
.k-nav__menu-btn { display: grid !important; width: 44px; height: 44px; border-radius: 50%; background: var(--bone); color: var(--bone-ink); place-items: center; }
.k-nav__menu-btn span, .k-nav__menu-btn span::before, .k-nav__menu-btn span::after { background: currentColor; }
.k-nav__menu-btn[aria-expanded='true'] span { background: transparent; }
.k-nav__clock {
  display: none;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: calc(13px * var(--type, 1));
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.k-nav__clock small { font-size: calc(10px * var(--type, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 760px) { .k-nav__clock { display: inline-flex; } }
.k-nav__theme { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); border: 1px solid var(--line-2); transition: background 0.2s; }
.k-nav__theme:hover { background: var(--glass-3); }
.k-nav__theme svg { width: 18px; height: 18px; }
.k-nav__radio { display: inline-flex !important; height: 40px; border: 1px solid var(--line-2); }
@media (max-width: 520px) { .k-nav__radio-label { display: none; } .k-nav__radio { width: 40px; justify-content: center; padding: 0 !important; } }

/* Menu sheet: editorial index */
.k-sheet { justify-content: space-between; }
.k-sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.k-sheet__clock { font-family: var(--f-mono); font-size: calc(clamp(22px, 4vw, 40px) * var(--type, 1)); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.k-sheet__clock small { font-size: calc(11px * var(--type, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.k-sheet__links { max-width: var(--max); width: 100%; margin: 0 auto; }
.k-sheet__links a { font-size: calc(clamp(36px, 7.4vw, 104px) * var(--type, 1)); letter-spacing: -0.045em; padding: 10px 0; }
.k-sheet__links a:hover { font-family: var(--f-serif); font-style: italic; letter-spacing: -0.02em; }
.k-sheet__links a[aria-current='page'] { font-family: var(--f-serif); font-style: italic; }
@media (min-width: 1000px) { .k-sheet__links { columns: 2; column-gap: 48px; } .k-sheet__links li { break-inside: avoid; } }

/* ------------------------------------------------ cover: full-screen video */
.k-cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  color: #f4f2ee;
  background: #0a0a0b;
}
.k-cover__media { position: absolute; inset: 0; z-index: -2; }
.k-cover__media .k-media { position: absolute !important; inset: 0; }
.k-cover__media video, .k-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.k-cover__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 28%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.7) 100%); }
.k-cover__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 28px) var(--gutter) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: clamp(14px, 2vw, 22px);
}
.k-cover__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.k-cover__top .k-eyebrow { color: rgba(244,242,238,.8); }
.k-cover__edition [data-clock] { font-variant-numeric: tabular-nums; color: #f4f2ee; }
.k-cover__title { align-self: center; display: grid; justify-items: center; text-align: center; margin: 0; font-weight: 400; line-height: 0.8; }
.k-cover__kicker { font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(28px, 4.4vw, 64px) * var(--type, 1)); letter-spacing: -0.01em; }
.k-cover__word { font-size: calc(clamp(96px, 26vw, 420px) * var(--type, 1)); letter-spacing: -0.065em; font-weight: 500; margin-right: -0.06em; mix-blend-mode: normal; }
.k-cover__dek { max-width: 46ch; margin: 0 auto; text-align: center; font-size: calc(clamp(16px, 1.5vw, 21px) * var(--type, 1)); line-height: 1.35; color: rgba(244,242,238,.9); }
.k-cover__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.k-cover__cta .k-btn { color: #f4f2ee; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.k-cover__pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: min(100%, 340px);
  padding: 18px 26px;
  border-radius: var(--r-pill);
  background: #ffffff; color: #0f0f10;
  font-size: calc(18px * var(--type, 1)); letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease);
}
.k-cover__pill:hover { transform: translateY(-2px); }
.k-cover__pill .k-arrow { background: #0f0f10; color: #fff; }
.k-cover__index { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; border-top: 1px solid rgba(255,255,255,.22); }
.k-cover__index a { display: inline-flex; align-items: baseline; gap: 8px; font-size: calc(14px * var(--type, 1)); color: rgba(244,242,238,.86); }
.k-cover__index a:hover { color: #fff; }
.k-cover__index span { font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.1em; color: rgba(244,242,238,.55); }
.k-cover .k-watch { color: #f4f2ee; }
@media (max-width: 640px) {
  .k-cover__shade { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 30%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.78) 100%); }
  .k-cover__dek { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
  .k-cover__word { font-size: calc(31vw * var(--type, 1)); }
  .k-cover__pill { width: 100%; }
  .k-cover__cta [data-mount='hero-watch'] { display: none; }
}


/* ------------------------------------------------------------ orbit cover
 * Home, under the sky intro: the Earth far below, banks of cloud, and the
 * carousel of jumping-off points floating in between. Colours come from the
 * intro's hour (--sky-* copied from .k-sky by mountOrbit). */
.k-orbit {
  --sky-top: #23305f; --sky-mid: #6a4a86; --sky-low: #e2766a; --sky-hor: #ffb36b; --sky-fog: #f3d6c8;
  --sky-sun: rgba(255,150,80,.9); --sky-sun-x: 70%; --sky-sun-y: 40%; --sky-sun-s: 55%;
  background: var(--sky-top); color: #fff;
}
.k-orbit__scene { overflow: hidden; }
.k-orbit__sky { position: absolute; inset: 0; background:
  radial-gradient(var(--sky-sun-s) calc(var(--sky-sun-s) * .7) at var(--sky-sun-x) var(--sky-sun-y), var(--sky-sun) 0%, rgba(255,255,255,0) 60%),
  linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 30%, var(--sky-low) 44%, var(--sky-hor) 52%, var(--sky-hor) 100%); }
.k-orbit__stars { position: absolute; inset: 0 0 40%; opacity: 0; transition: opacity 2s; background:
  radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 12%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 84% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 42%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 52% 24%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 91% 8%, rgba(255,255,255,.7) 50%, transparent 51%); }
.k-orbit[data-phase='midnight'] .k-orbit__stars, .k-orbit[data-phase='firstlight'] .k-orbit__stars { opacity: .9; }
/* The second deck: a sea of cumulus just below the carousel, drawn by the
 * intro's renderer (js/kiosk-sky.js cloudDeck); its horizon sits at 50% */
.k-orbit__deck { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.k-orbit.has-deck .k-orbit__deck { opacity: 1; }
/* Overhead: the underside of the intro's cloud layer we just came through */
.k-orbit__ceiling { position: absolute; left: -15%; right: -15%; top: -6%; height: 34%; pointer-events: none; filter: blur(14px); animation: k-orbit-drift 80s ease-in-out infinite alternate-reverse;
  background:
    radial-gradient(30% 70% at 12% 20%, var(--sky-fog) 0%, transparent 72%), radial-gradient(26% 80% at 38% 10%, var(--sky-fog) 0%, transparent 70%),
    radial-gradient(30% 70% at 64% 22%, var(--sky-fog) 0%, transparent 72%), radial-gradient(26% 75% at 90% 12%, var(--sky-fog) 0%, transparent 70%),
    linear-gradient(180deg, var(--sky-fog) 0%, color-mix(in srgb, var(--sky-fog) 55%, transparent) 30%, transparent 100%); opacity: .85; }
/* Cloud banks: soft blobs in the hour's fog colour, drifting */
.k-orbit__clouds { position: absolute; left: -25%; right: -25%; pointer-events: none; filter: blur(10px); animation: k-orbit-drift 60s ease-in-out infinite alternate; background:
  radial-gradient(22% 55% at 8% 60%, var(--sky-fog) 0%, transparent 70%), radial-gradient(26% 60% at 30% 55%, var(--sky-fog) 0%, transparent 70%),
  radial-gradient(20% 50% at 52% 65%, var(--sky-fog) 0%, transparent 70%), radial-gradient(28% 60% at 74% 55%, var(--sky-fog) 0%, transparent 70%),
  radial-gradient(22% 55% at 95% 62%, var(--sky-fog) 0%, transparent 70%); }
.k-orbit__clouds--back { bottom: 30%; height: 18%; opacity: .55; animation-duration: 90s; }
.k-orbit.has-deck .k-orbit__clouds--back, .k-orbit.has-deck .k-orbit__clouds--mid { display: none; }
.k-orbit__clouds--mid { bottom: 6%; height: 38%; opacity: .88; animation-direction: alternate-reverse; }
.k-orbit__clouds--front { bottom: -10%; height: 30%; opacity: .9; z-index: 1; animation-duration: 45s; }
/* Arriving from the sky intro the cover rises out of the cloud: a fog bank
 * hangs from its top edge (the same colour the intro whites out into) and
 * shrinks away as the cover settles (--orbit-fog: 1 → 0, set on scroll). */
.k-orbit::after { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none;
  height: calc(var(--orbit-fog, 0) * 140%);
  background: linear-gradient(180deg, var(--sky-fog) 0%, var(--sky-fog) 32%, color-mix(in srgb, var(--sky-fog) 75%, transparent) 55%, color-mix(in srgb, var(--sky-fog) 30%, transparent) 78%, color-mix(in srgb, var(--sky-fog) 0%, transparent) 100%); }
@keyframes k-orbit-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
/* Layout */
.k-orbit .k-cover__inner.k-orbit__inner { grid-template-rows: auto auto 1fr auto; align-items: center; position: relative; z-index: 2; }
.k-orbit__head { display: grid; justify-items: center; gap: 10px; text-align: center; text-shadow: 0 2px 24px rgba(10,14,30,.35); }
.k-orbit__title { margin: 0; font-size: calc(clamp(40px, 5vw, 76px) * var(--type, 1)); font-weight: 450; letter-spacing: -0.04em; line-height: .95; }
.k-orbit__dek { max-width: 52ch; margin: 0; font-size: calc(clamp(14px, 1.2vw, 17px) * var(--type, 1)); line-height: 1.4; color: rgba(255,255,255,.88); }
.k-orbit__carousel { position: relative; isolation: isolate; }
/* The carousel sits in a cloud: a bank swelling up behind the cards, and
 * wisps drifting across their lower edge (both let touches through) */
.k-orbit__carousel::before, .k-orbit__carousel::after { content: ''; position: absolute; left: -12%; right: -12%; pointer-events: none; animation: k-orbit-drift 38s ease-in-out infinite alternate; }
.k-orbit__carousel::before { z-index: -1; top: 18%; bottom: 12%; filter: blur(22px); opacity: .9; background:
  radial-gradient(24% 46% at 22% 62%, color-mix(in srgb, var(--sky-fog) 92%, #fff) 0%, transparent 70%),
  radial-gradient(30% 56% at 50% 58%, color-mix(in srgb, var(--sky-fog) 85%, #fff) 0%, transparent 72%),
  radial-gradient(24% 46% at 78% 64%, color-mix(in srgb, var(--sky-fog) 92%, #fff) 0%, transparent 70%),
  radial-gradient(60% 34% at 50% 92%, var(--sky-fog) 0%, transparent 75%); }
.k-orbit__carousel::after { z-index: 1; top: 38%; height: 30%; filter: blur(12px); opacity: .7; animation-duration: 26s; animation-direction: alternate-reverse; background:
  radial-gradient(16% 34% at 10% 60%, var(--sky-fog) 0%, transparent 72%), radial-gradient(14% 30% at 30% 72%, color-mix(in srgb, var(--sky-fog) 70%, transparent) 0%, transparent 72%),
  radial-gradient(18% 30% at 70% 70%, color-mix(in srgb, var(--sky-fog) 70%, transparent) 0%, transparent 72%), radial-gradient(16% 34% at 92% 58%, var(--sky-fog) 0%, transparent 72%); }
.k-orbit .k-herowheel__now, .k-orbit .k-herowheel__cta { position: relative; z-index: 2; }
/* The carousel floats: a slow bob, cards lit like objects in open air */
.k-orbit .k-herowheel { color: #fff; }
.k-orbit .k-herowheel__stage { --card: clamp(220px, min(22vw, 30svh), 310px); animation: k-orbit-float 7s ease-in-out infinite; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
@keyframes k-orbit-float { 50% { transform: translateY(-12px); } }
.k-orbit .k-herowheel .k-wheel__card { -webkit-box-reflect: unset; box-shadow: 0 36px 60px -24px rgba(12,18,40,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
.k-orbit .k-herowheel .k-wheel__card::after { background: var(--sky-fog); opacity: calc(var(--shade, 0) * 0.65); }
.k-orbit .k-tcard__img.is-paper { object-fit: contain; background: #fbfaf8; padding: 18% 8% 34%; }
.k-orbit .k-herowheel__now, .k-orbit .k-herowheel__cta .k-btn { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.k-orbit .k-herowheel__now { padding: 6px; border-radius: 999px; background: rgba(12,16,32,.32); border: 1px solid rgba(255,255,255,.18); }
.k-orbit .k-herowheel__note { color: rgba(255,255,255,.86); }
.k-orbit .k-wheel__count { color: rgba(255,255,255,.7); }
.k-orbit .k-wheel__step { background: rgba(255,255,255,.14); color: #fff; }
.k-orbit .k-herowheel__cta .k-btn { background: #fff; color: #0f0f10; border-color: #fff; }
.k-orbit .k-cover__index { border-top-color: rgba(255,255,255,.3); }
@media (max-width: 760px) {
  .k-orbit__dek { display: none; }
  .k-orbit__title { font-size: calc(34px * var(--type, 1)); }
  .k-orbit .k-herowheel__stage { --card: min(64vw, 270px); }
  .k-orbit .k-cover__inner.k-orbit__inner { gap: 10px; padding-top: calc(var(--nav-h) + 4px); }
  .k-orbit .k-herowheel__note { font-size: calc(13px * var(--type, 1)); }
}
@media (max-height: 820px) { .k-orbit__dek { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .k-orbit__ceiling, .k-orbit__clouds, .k-orbit .k-herowheel__stage { animation: none; }
}

/* --------------------------------------------------- marketplace: hunt + stores */
.k-pickup { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); border: 1px dashed var(--ink-3); font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.k-pickup svg { width: 13px; height: 13px; }
.k-shop-card__quote { margin-top: 6px; font-family: var(--f-serif); font-style: italic; font-size: calc(15px * var(--type, 1)); line-height: 1.2; color: var(--ink-2); }
.k-hunt { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 4vw, 48px); border-radius: var(--r-xl); background: #0d0d0e; color: var(--ink); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0); background-size: 18px 18px; }
@media (min-width: 1000px) { .k-hunt { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.k-hunt__steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.k-hunt__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: calc(15px * var(--type, 1)); color: var(--ink-2); }
.k-hunt__steps b { font-family: var(--f-mono); font-weight: 400; font-size: calc(11px * var(--type, 1)); color: var(--ink-3); padding-top: 3px; }
.k-hunt__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.k-hunt .k-shop-card__tile { background: #18181b; }
.k-stores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.k-store { display: block; padding: 22px; border-radius: var(--r-lg); text-align: left; min-height: 200px; }
.k-store--join { border: 1px dashed var(--line-2); background: transparent; color: var(--ink); width: 100%; }
.k-store--join:hover { background: var(--glass-3); }

/* ------------------------------------------------- around the globe section */
.k-globe-wrap { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .k-globe-wrap { grid-template-columns: 0.8fr 1.2fr; } }
.k-globe { position: relative; aspect-ratio: 1; width: 100%; max-width: 760px; justify-self: center; color: var(--ink);
  background-image: radial-gradient(circle at 1px 1px, var(--ink-4) 1px, transparent 0); background-size: 22px 22px;
  border-radius: 50%; }
.k-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.k-globe canvas.is-dragging { cursor: grabbing; }
.k-globe-stats { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.k-globe-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.k-globe-stats dt { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.k-globe-stats dd { margin: 0; font-family: var(--f-mono); font-size: calc(13px * var(--type, 1)); font-variant-numeric: tabular-nums; text-align: right; }
.k-globe-stats dd b { font-weight: 500; }
.k-globe-stats small { font-size: calc(10px * var(--type, 1)); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }

/* Raw footage reel (clips played from Google Drive) */
.k-hscroll-wrap--reel .k-hscroll { grid-auto-columns: 148px; gap: 8px; }
.k-reel__clip { position: relative; display: grid; align-content: space-between; aspect-ratio: 16 / 11; padding: 12px; border-radius: var(--r-md); text-align: left; color: #f4f2ee; background: linear-gradient(160deg, #1b1b1e, #0d0d0e); border: 1px solid var(--line-2); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.2s; }
.k-reel__clip:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.4); }
.k-reel__time { font-family: var(--f-mono); font-size: calc(20px * var(--type, 1)); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.k-reel__time small { font-size: calc(10px * var(--type, 1)); color: rgba(244,242,238,.5); }
.k-reel__play { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f4f2ee; color: #0d0d0e; }
.k-reel__play svg { width: 10px; height: 10px; }
.k-reel__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(12px * var(--type, 1)); color: rgba(244,242,238,.8); }
.k-reel__meta small { font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); color: rgba(244,242,238,.45); }

/* Rails inside grids must not stretch their container */
.k-bts__notes, .k-hscroll-wrap, .k-bts > * { min-width: 0; }
.k-bts { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .k-bts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   App shell: reader settings, hero slideshow, depth, tab bar, settings sheet
   ========================================================================== */

/* ------------------------------------------- settings → tokens (<html data-*>) */
:root { --type: 1; --tabbar-h: 0px; --elev-1: 0 1px 2px rgba(15,15,16,.05), 0 10px 30px -18px rgba(15,15,16,.28); --elev-2: 0 2px 6px rgba(15,15,16,.06), 0 30px 60px -28px rgba(15,15,16,.42); }
html[data-theme='dark'] { --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7); --elev-2: 0 2px 8px rgba(0,0,0,.45), 0 34px 70px -26px rgba(0,0,0,.85); }
html[data-depth='off'] { --elev-1: none; --elev-2: none; }

html[data-type='s'] { --type: 0.9; }
html[data-type='l'] { --type: 1.12; }
html[data-type='xl'] { --type: 1.26; }

html[data-accent='cobalt'] { --signal: #2f5bff; }
html[data-accent='acid'] { --signal: #9ed600; }
html[data-accent='rose'] { --signal: #ff3d8b; }
html[data-accent='gold'] { --signal: #e2a72e; }
html[data-accent='mono'] { --signal: #8d8d92; }

html[data-corners='square'] { --r-xs: 2px; --r-sm: 2px; --r-md: 3px; --r-lg: 3px; --r-xl: 4px; --r-pill: 4px; }

html[data-density='compact'] .k-section { padding: clamp(40px, 6vw, 92px) 0; }
html[data-density='compact'] .k-section--tight { padding: clamp(28px, 4vw, 60px) 0; }
html[data-density='compact'] .k-section-head { margin-bottom: clamp(18px, 2.4vw, 32px); }
html[data-density='compact'] .k-rail, html[data-density='compact'] .k-shop-grid { gap: 10px; }

html[data-motion='reduced'] *, html[data-motion='reduced'] *::before, html[data-motion='reduced'] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
html[data-motion='reduced'] [data-reveal] { opacity: 1; transform: none; }

/* Another language is loading: hold the page for a moment (never longer than 1.6s) */
html.is-i18n body { opacity: 0; animation: k-i18n-safe 0s linear 1.6s forwards; }
@keyframes k-i18n-safe { to { opacity: 1; } }
body.k { transition: opacity 0.25s var(--ease); }

/* ------------------------------------------------------- hero slideshow */
.k-heroshow { position: absolute; inset: 0; overflow: hidden; background: #0a0a0b; }
.k-heroshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.k-heroshow__slide.is-active { opacity: 1; z-index: 1; }
.k-heroshow__slide video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.k-heroshow__slide.is-active video { transform: scale(1); }
.k-cover.is-paused .k-heroshow__slide.is-active video { transition-duration: 0.6s; }

.k-heroshow__bars { display: flex; gap: 6px; }
.k-heroshow__bars:empty, .k-heroshow__ui:empty { display: none; }
.k-heroshow__bar { position: relative; flex: 1; height: 18px; padding: 0; background: none; border: 0; cursor: pointer; }
.k-heroshow__bar i { position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.k-heroshow__bar i::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.k-heroshow__bar.is-active i::after { background: var(--signal); }
.k-heroshow__bar:hover i { background: rgba(255,255,255,.45); }

.k-heroshow__ui { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.k-heroshow__caption { display: grid; gap: 2px; min-width: 0; color: #f4f2ee; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.k-heroshow__kicker { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,242,238,.72); }
.k-heroshow__caption b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: calc(clamp(24px, 2.6vw, 34px) * var(--type, 1)); line-height: 1.05; }
.k-heroshow__caption small { font-size: calc(13px * var(--type, 1)); color: rgba(244,242,238,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-heroshow__caption:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.k-heroshow__btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.k-heroshow__count { font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.1em; color: rgba(244,242,238,.75); margin-right: 6px; font-variant-numeric: tabular-nums; }
.k-heroshow__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #f4f2ee; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background 0.2s, transform 0.2s var(--ease); }
.k-heroshow__btn:hover { background: rgba(255,255,255,.2); }
.k-heroshow__btn svg { width: 15px; height: 15px; }
.k-heroshow__btn[data-hero-toggle] svg { width: 11px; height: 12px; }
.k-cover__inner { grid-template-rows: auto auto 1fr auto auto auto auto; }
@media (max-width: 640px) {
  .k-heroshow__ui { align-items: center; }
  .k-heroshow__count, .k-heroshow__btn[data-hero-prev], .k-heroshow__btn[data-hero-next] { display: none; }
  .k-heroshow__caption small { white-space: normal; }
}

/* ------------------------------------------------------------------ depth */
/* The cover stays put and sinks back while the issue slides up over it */
html:not([data-depth='off']) main > .k-cover { position: sticky; top: 0; z-index: 0; }
html:not([data-depth='off']) main > .k-cover ~ * { position: relative; z-index: 1; background: var(--bg); }
html:not([data-depth='off']) main > .k-cover + * { margin-top: -28px; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -24px rgba(0,0,0,.55); }
html:not([data-depth='off']) .k-cover__media { transform: scale(calc(1 + var(--hero-p, 0) * 0.1)); filter: brightness(calc(1 - var(--hero-p, 0) * 0.5)); will-change: transform; }
html:not([data-depth='off']) .k-cover__inner { opacity: calc(1 - var(--hero-p, 0) * 1.5); transform: translateY(calc(var(--hero-p, 0) * -70px)) scale(calc(1 - var(--hero-p, 0) * 0.05)); }
html:not([data-depth='off']) .k-marquee { padding-top: 28px; -webkit-mask-image: none; mask-image: none; }
html:not([data-depth='off']) .k-marquee::before, html:not([data-depth='off']) .k-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 12%; pointer-events: none; }
html:not([data-depth='off']) .k-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
html:not([data-depth='off']) .k-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* Lifted surfaces */
.k-card, .k-tile, .k-feature-card, .k-glass, .k-vimeo__card, .k-shop-card__media, .k-dept, .k-radio__deck { box-shadow: var(--elev-1); }
.k-card, .k-tile, .k-feature-card, .k-shop-card__media, .k-vimeo__card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease); }
.is-tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px); box-shadow: var(--elev-2); z-index: 2; }
html[data-depth='off'] .is-tilt { transform: none; }

/* Sections rise into view */
/* (the section's own background stays solid so the cover never shows through) */
[data-reveal='rise'] { opacity: 1; transform: none; }
[data-reveal='rise'] > * { opacity: 0; transform: translateY(72px) scale(0.985); transform-origin: 50% 0; transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); }
[data-reveal='rise'] > :nth-child(2) { transition-delay: 0.08s; }
[data-reveal='rise'].is-in > * { opacity: 1; transform: none; }
html[data-depth='off'] [data-reveal='rise'] > * { transform: translateY(32px); }
html[data-depth='off'] [data-reveal='rise'].is-in > * { transform: none; }
html.no-js [data-reveal='rise'] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion='full']) [data-reveal='rise'] > * { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- app feel */
html { -webkit-tap-highlight-color: transparent; }
.k-btn:active, .k-round:active, .k-heroshow__btn:active, .k-tabbar__item:active, .k-cover__pill:active, .k-set__langs button:active { transform: scale(0.96); }
.k-card:active, .k-tile:active, .k-feature-card:active { transform: scale(0.985); }
.k-nav { transition: transform 0.45s var(--ease), opacity 0.3s; }
html.is-reading:not(.is-sheet-open):not(.is-settings-open) .k-nav { transform: translateY(-130%); }
html.is-scrolled .k-nav__inner { box-shadow: var(--hairline), var(--elev-1); }

/* Page changes: the chrome stays put while the page changes underneath
   (the curtain itself is in css/kiosk-editorial.css) */
/* Names go on the glass itself, not its wrapper: an ancestor with a
   view-transition-name is a backdrop root, so backdrop-filter would blur
   only the empty wrapper instead of the page behind it. */
.k-nav__inner { view-transition-name: k-nav; }
.k-tabbar__pill { view-transition-name: k-tabbar; }
.k-tabbar__more { view-transition-name: k-tabbar-more; }
.k-dock { view-transition-name: k-dock; }

.k-nav__settings svg { width: 18px; height: 18px; }
.k-sheet__foot .k-btn svg { width: 16px; height: 16px; }
.k-sheet__foot [data-settings-open] { gap: 8px; }

/* ------------------------------------------------------ mobile tab bar */
.k-tabbar { display: none; }
@media (max-width: 760px) {
  :root { --tabbar-h: calc(64px + max(12px, env(safe-area-inset-bottom))); }
  .k-tabbar {
    position: fixed; z-index: 110;
    left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px;
    pointer-events: none;
  }
  .k-tabbar > * { pointer-events: auto; }
  /* Liquid Glass: a clear, bright layer that bends the page behind it,
     lit rims (bright top-left, soft bottom-right) and a glass lens that
     slides under the active tab. Icons are full-ink with a soft halo so
     they read over photos. */
  .k-tabbar {
    --lg-tint: color-mix(in srgb, var(--bg) 50%, transparent);
    --lg-rim: rgba(255, 255, 255, 0.85);
    --lg-rim-soft: rgba(255, 255, 255, 0.22);
    --lg-shade: rgba(0, 0, 0, 0.10);
    --lg-halo: color-mix(in srgb, var(--bg) 85%, transparent);
  }
  html[data-theme='dark'] .k-tabbar {
    --lg-tint: color-mix(in srgb, var(--bg) 52%, transparent);
    --lg-rim: rgba(255, 255, 255, 0.38);
    --lg-rim-soft: rgba(255, 255, 255, 0.08);
    --lg-shade: rgba(0, 0, 0, 0.35);
  }
  .k-tabbar__pill, .k-tabbar__more {
    position: relative; isolation: isolate;
    border: 0;
    background:
      radial-gradient(120% 140% at 20% -20%, rgba(255, 255, 255, 0.28), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
      var(--lg-tint);
    -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.08);
    backdrop-filter: blur(26px) saturate(1.9) brightness(1.08);
    box-shadow:
      inset 0 1px 0.5px var(--lg-rim),
      inset 0 -1px 1px var(--lg-rim-soft),
      inset 1px 0 0.5px var(--lg-rim-soft),
      inset 0 0 18px -6px rgba(255, 255, 255, 0.35),
      0 0 0 0.5px var(--lg-shade),
      0 8px 24px -10px rgba(0, 0, 0, 0.30),
      0 18px 40px -22px rgba(0, 0, 0, 0.35);
  }
  /* Lit rim: a hairline that catches the light at the top-left and bottom-right */
  .k-tabbar__pill::before, .k-tabbar__more::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, var(--lg-rim) 0%, var(--lg-rim-soft) 28%, transparent 50%, var(--lg-rim-soft) 78%, var(--lg-rim) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0.9;
  }
  .k-tabbar__pill {
    position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr);
    height: 62px; padding: 5px; border-radius: 31px; max-width: 360px;
  }
  /* The lens under the active tab: brighter glass with its own highlight */
  .k-tabbar__glow {
    position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n));
    border-radius: 26px;
    background:
      radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
      color-mix(in srgb, var(--ink) 9%, rgba(255, 255, 255, 0.35));
    box-shadow:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(255, 255, 255, 0.25),
      0 0 0 0.5px var(--lg-shade),
      0 4px 12px -6px rgba(0, 0, 0, 0.35);
    transform: translateX(calc(var(--i) * 100%));
    transition: transform .55s cubic-bezier(.3, 1.35, .45, 1), opacity .3s;
  }
  html[data-theme='dark'] .k-tabbar__glow {
    background:
      radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%),
      rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(255, 255, 255, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
  }
  .k-tabbar__pill[data-idle] .k-tabbar__glow { opacity: 0; }
  .k-tabbar__item {
    position: relative; z-index: 1; display: grid; place-items: center;
    min-width: 0; padding: 0; border: 0; border-radius: 26px; background: none;
    color: color-mix(in srgb, var(--ink) 78%, transparent); -webkit-tap-highlight-color: transparent;
    transition: color .25s, transform .25s var(--ease);
  }
  .k-tabbar__item svg {
    width: 26px; height: 26px; overflow: visible;
    filter: drop-shadow(0 0 1.5px var(--lg-halo)) drop-shadow(0 0 4px var(--lg-halo));
    transition: transform .35s var(--ease);
  }
  .k-tabbar__item svg [stroke] { stroke-width: 1.85; }
  .k-tabbar__item[aria-current='page'] { color: var(--ink); }
  .k-tabbar__item[aria-current='page'] svg { transform: scale(1.08); }
  .k-tabbar__item[aria-current='page'] svg [stroke] { stroke-width: 2.1; }
  .k-tabbar__item:active svg { transform: scale(.88); }
  .k-tabbar__more { flex: none; width: 62px; height: 62px; border-radius: 50%; color: var(--ink); margin-left: auto; }
  .k-tabbar__more[aria-expanded='true'] { background: var(--ink); color: var(--bg); }
  .k-tabbar__more[aria-expanded='true'] svg { filter: none; }
  @media (prefers-reduced-transparency: reduce) {
    .k-tabbar { --lg-tint: color-mix(in srgb, var(--bg) 92%, transparent); }
  }
  body.is-radio-playing .k-tabbar__item[data-tab='radio']::after { content: ''; position: absolute; top: 11px; right: calc(50% - 15px); width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: k-pulse 1s var(--ease-io) infinite alternate; }

  /* On the home page the top pill waits until the ꓘIOSK wordmark has flown into it */
  .k-nav__inner { transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), -webkit-backdrop-filter .45s, backdrop-filter .45s; }
  html.is-mark-pending .k-nav__inner { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* The top bar keeps just the logo (and tucks away as you read) */
  .k-nav__actions { display: none !important; }
  .k-nav__inner { padding: 4px 14px; }
  .k-nav { padding-top: max(10px, env(safe-area-inset-top)); }
  .k-nav__inner { justify-content: center; width: max-content; grid-template-columns: auto; }
  .k-nav__inner > .k-logo { grid-column: 1; }
  .k-nav__clock { display: none !important; }

  body.k { padding-bottom: calc(var(--tabbar-h) + 8px); }
  .k-dock { bottom: calc(var(--tabbar-h) + 10px); }
  .k-sheet { padding-bottom: calc(var(--tabbar-h) + 16px); padding-top: calc(var(--nav-h) + max(10px, env(safe-area-inset-top))); }
  .k-cover__inner { padding-bottom: calc(var(--tabbar-h) + 16px); }
  .k-cover__index { display: none; }
}

/* ---------------------------------------------------------- settings sheet */
.k-set { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.5s; }
.k-set.is-open { visibility: visible; pointer-events: auto; transition: none; }
.k-set__scrim { position: absolute; inset: 0; background: rgba(8,8,9,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s var(--ease); }
.k-set.is-open .k-set__scrim { opacity: 1; }
.k-set__panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: min(460px, calc(100% - 24px));
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  box-shadow: var(--elev-2), var(--hairline);
  transform: translateX(calc(100% + 24px)); transition: transform 0.55s var(--ease);
}
html:not([data-theme='dark']) .k-set__panel { background: rgba(251,250,248,.94); }
.k-set.is-open .k-set__panel { transform: none; }
.k-set__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px 22px; }
.k-set__grab { display: none; }
.k-set__title { margin: 0; font-size: calc(26px * var(--type, 1)); font-weight: 500; letter-spacing: -0.03em; }
.k-set__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); background: var(--glass); }
.k-set__x svg { width: 16px; height: 16px; }
.k-set__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 18px; }
.k-set__group { padding: 18px 0 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.k-set__group:first-child { border-top: 0; padding-top: 6px; }
.k-set__group h3 { margin: 0 0 2px; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.k-set__row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.k-set__row > span { font-size: calc(15px * var(--type, 1)); }
.k-set__seg { flex-wrap: nowrap; }
.k-set__seg button[aria-checked='true'], .k-seg button[aria-checked='true'] { background: var(--bone); color: var(--bone-ink); }
.k-set__seg big { font-size: 1.2em; }
.k-set__seg small { font-size: 0.8em; }
.k-set__langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.k-set__langs button { padding: 11px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); font-size: calc(14px * var(--type, 1)); text-align: left; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.k-set__langs button:hover { border-color: var(--ink-3); }
.k-set__langs button[aria-checked='true'] { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }
.k-set__swatches { display: flex; gap: 8px; }
.k-set__swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); box-shadow: inset 0 0 0 1px var(--line-2); outline-offset: 2px; transition: transform 0.2s var(--ease); }
.k-set__swatches button[style*='currentColor'] { background: linear-gradient(135deg, var(--ink) 50%, var(--bg-3) 50%); }
.k-set__swatches button[aria-checked='true'] { border-color: var(--bg); box-shadow: 0 0 0 2px var(--ink); }
.k-set__swatches button:hover { transform: scale(1.08); }
.k-set__switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--glass-3); cursor: pointer; }
.k-set__switch span { display: grid; gap: 2px; }
.k-set__switch b { font-weight: 500; font-size: calc(14px * var(--type, 1)); }
.k-set__switch small { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-set__switch.is-off { cursor: default; opacity: 0.75; }
.k-set__switch input, .k-set__mini input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-set__switch i, .k-set__mini i { position: relative; flex-shrink: 0; width: 42px; height: 26px; border-radius: 13px; background: var(--ink-4); transition: background 0.25s; }
.k-set__switch i::after, .k-set__mini i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 0.3s var(--ease); }
.k-set__switch input:checked + i, .k-set__mini input:checked + i { background: var(--signal); }
.k-set__switch input:checked + i::after, .k-set__mini input:checked + i::after { transform: translateX(16px); }
.k-set__switch input:focus-visible + i, .k-set__mini input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.k-set__label { margin: 4px 0 0; font-size: calc(15px * var(--type, 1)); }
.k-set__hint { margin: -8px 0 2px; font-size: calc(12.5px * var(--type, 1)); color: var(--ink-3); }
.k-set__sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.k-set__sections li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--glass); }
.k-set__sections li.is-drag { opacity: 0.5; }
.k-set__handle { width: 18px; height: 18px; flex-shrink: 0; cursor: grab; background: radial-gradient(circle, var(--ink-3) 1.2px, transparent 1.6px) 0 0 / 6px 6px; }
.k-set__name { flex: 1; min-width: 0; font-size: calc(14px * var(--type, 1)); }
.k-set__sections li:has(input:not(:checked)) .k-set__name { color: var(--ink-3); text-decoration: line-through; }
.k-set__mv { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); background: none; }
.k-set__mv svg { width: 13px; height: 13px; transform: rotate(90deg); }
.k-set__mv[data-move='-1'] svg { transform: rotate(90deg) scaleX(1); }
.k-set__mv:disabled { opacity: 0.3; }
.k-set__mini { position: relative; display: inline-flex; cursor: pointer; }
.k-set__mini i { width: 38px; height: 24px; }
.k-set__mini i::after { width: 18px; height: 18px; }
.k-set__mini input:checked + i::after { transform: translateX(14px); }
.k-set__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.k-set__foot p { flex: 1 1 100%; margin: 0 0 4px; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-set__foot .k-btn--solid { margin-left: auto; }

@media (max-width: 760px) {
  /* Phones: a bottom sheet you can reach with a thumb */
  .k-set__panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 92svh; border-radius: 28px 28px 0 0; border-bottom: 0;
    transform: translateY(105%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-corners='square'] .k-set__panel { border-radius: 4px 4px 0 0; }
  .k-set__grab { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--ink-4); }
  .k-set__head { padding-top: 22px; }
  .k-set__langs { grid-template-columns: repeat(3, 1fr); }
}
html.is-settings-open, html.is-settings-open body { overflow: hidden; }

/* ==========================================================================
   Terminal store: frosted panels, departures board, gates, boarding passes,
   product panel (PDP), search results
   ========================================================================== */
:root {
  --frost: rgba(255, 255, 255, 0.58);
  --frost-2: rgba(255, 255, 255, 0.78);
  --frost-line: rgba(255, 255, 255, 0.75);
  --frost-edge: rgba(15, 15, 16, 0.08);
  --board: #0d0e10;
  --board-ink: #f3e9c6;
}
html[data-theme='dark'] { --frost: rgba(28, 29, 33, 0.58); --frost-2: rgba(34, 35, 40, 0.8); --frost-line: rgba(255, 255, 255, 0.1); --frost-edge: rgba(255, 255, 255, 0.06); }
.k-glass-panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--frost-line);
  background: var(--frost);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px var(--frost-edge), var(--elev-1);
}
html[data-theme='dark'] .k-glass-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--frost-edge), var(--elev-1); }

/* ------------------------------------------------------------ hero */
.k-term__hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + 36px) 0 clamp(36px, 5vw, 64px); }
.k-term__backdrop { position: absolute; inset: 0; z-index: -1; }
.k-term__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.15); transform: scale(1.15); opacity: 0.55; }
.k-term__backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 40%, var(--bg) 100%); }
.k-term__hero-inner { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 1080px) { .k-term__hero-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; } .k-term__sign { grid-column: 1; } .k-term__search { grid-column: 1; align-self: start; } .k-board { grid-column: 2; grid-row: 1 / span 2; } }
.k-term__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.k-term__t { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 6px; background: var(--signal); color: #111; font-weight: 600; letter-spacing: 0.04em; }
.k-term__clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.k-term__clock small { color: var(--ink-3); }
.k-term__title { margin: 0 0 14px; font-size: calc(clamp(52px, 8.4vw, 132px) * var(--type, 1)); line-height: 0.86; letter-spacing: -0.06em; font-weight: 500; }
.k-term__title em { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.02em; }

/* ------------------------------------------------------------ search */
.k-term__search { position: relative; padding: 8px; z-index: 5; }
.k-term__field { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 58px; border-radius: calc(var(--r-lg) - 6px); background: var(--frost-2); }
.k-term__field svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-3); }
.k-term__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: calc(17px * var(--type, 1)); color: var(--ink); }
.k-term__field input::placeholder { color: var(--ink-3); }
.k-term__field input::-webkit-search-cancel-button { filter: grayscale(1); }
.k-term__field kbd { font-family: var(--f-mono); font-size: 11px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-3); }
.k-term__field:focus-within { box-shadow: 0 0 0 2px var(--signal); }
.k-sr-list { position: absolute; left: 8px; right: 8px; top: calc(100% - 2px); max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--frost-line); background: var(--sheet); -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: var(--elev-2); }
html:not([data-theme='dark']) .k-sr-list { background: rgba(251,250,248,.94); }
.k-sr-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--r-sm); text-align: left; color: var(--ink); background: none; border: 0; }
.k-sr-row:hover, .k-sr-row:focus-visible { background: var(--glass-3); outline: none; }
.k-sr-row b { display: block; font-weight: 500; font-size: calc(15px * var(--type, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-sr-row small { display: block; font-size: calc(12px * var(--type, 1)); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-sr-row i svg { width: 14px; height: 14px; color: var(--ink-3); }
.k-sr-row__img { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-3); display: grid; place-items: center; }
.k-sr-row__img img, .k-sr-row__img svg { width: 100%; height: 100%; object-fit: cover; }
.k-sr-row__img--store { background: var(--bone); color: var(--bone-ink); font-family: var(--f-serif); font-style: italic; font-size: 24px; }
.k-sr-empty { margin: 0; padding: 14px; font-size: calc(14px * var(--type, 1)); color: var(--ink-3); }

/* ---------------------------------------------------- departures board */
.k-board { padding: 16px; background: color-mix(in srgb, var(--board) 88%, transparent); color: var(--board-ink); border-color: rgba(255,255,255,.08); }
.k-board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 4px 12px; }
.k-board__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: calc(22px * var(--type, 1)); font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.k-board__title svg { width: 26px; height: 26px; color: var(--signal); }
.k-board__sub { margin: 0; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243,233,198,.55); }
.k-board__cols, .k-board__row { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 2.2em 5em 7.4em; gap: 10px; align-items: center; }
.k-board__cols { padding: 0 8px 8px; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,233,198,.5); border-bottom: 1px solid rgba(255,255,255,.08); }
.k-board__rows { list-style: none; margin: 0; padding: 0; }
.k-board__row { width: 100%; padding: 9px 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: none; color: inherit; text-align: left; font-family: var(--f-mono); font-size: calc(12.5px * var(--type, 1)); border-radius: 8px; transition: background 0.2s; }
.k-board__row:hover, .k-board__row:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.k-board__fare { font-variant-numeric: tabular-nums; color: #fff; }
.k-flap { display: inline-flex; gap: 1.5px; max-width: 100%; overflow: hidden; }
.k-flap i { position: relative; display: inline-grid; place-items: center; width: 0.92em; height: 1.45em; font-style: normal; font-weight: 600; color: var(--board-ink); background: linear-gradient(180deg, #1b1c20 49%, #0a0a0c 51%); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.k-flap i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.75); }
.k-flap i.is-flip { color: #b9ad85; }
.k-board__status { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.k-board__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.k-board__status--boarding { color: #4ade80; background: rgba(74,222,128,.12); }
.k-board__status--boarding::before { animation: k-pulse 1.2s var(--ease-io) infinite alternate; }
.k-board__status--soon { color: #fbbf24; background: rgba(251,191,36,.12); }
.k-board__status--pickup { color: var(--signal); background: color-mix(in srgb, var(--signal) 16%, transparent); }
@media (max-width: 640px) {
  .k-board { padding: 10px; }
  .k-board__cols, .k-board__row { grid-template-columns: 5.4em minmax(0, 1fr) 4.4em; }
  .k-board__cols span:nth-child(3), .k-board__cols span:nth-child(5), .k-board__row .k-board__gate, .k-board__row .k-board__status { display: none; }
  .k-board__dest .k-flap i:nth-child(n+13) { display: none; }
}

/* ------------------------------------------------------------- gates */
.k-gates { position: sticky; top: calc(var(--nav-h) - 6px); z-index: 20; padding: 10px 0; }
html.is-reading .k-gates { top: 6px; }
.k-gates__track { display: flex; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.k-gates__track::-webkit-scrollbar { display: none; }
.k-gate { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 6px 14px 6px 6px; border-radius: 14px; border: 1px solid var(--frost-line); background: var(--frost); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: var(--ink); box-shadow: 0 0 0 1px var(--frost-edge), var(--elev-1); transition: background 0.2s, transform 0.2s var(--ease); }
.k-gate b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #111214; color: var(--signal); font-size: calc(17px * var(--type, 1)); font-weight: 600; }
.k-gate span { font-size: calc(14px * var(--type, 1)); white-space: nowrap; }
.k-gate small { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }
.k-gate[aria-pressed='true'] { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }
.k-gate[aria-pressed='true'] small { color: inherit; opacity: 0.6; }
.k-gate:hover { transform: translateY(-1px); }

/* ------------------------------------------------- boarding-pass cards */
.k-term__toolbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }

/* Shop view switch: carousel (3D drum) or list (card grid) */
.k-viewtoggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass); }
.k-viewtoggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: calc(13px * var(--type, 1));
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.k-viewtoggle button:hover { color: var(--ink); }
.k-viewtoggle button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.k-viewtoggle svg { width: 16px; height: 16px; }

/* Shop carousel: the song wheel's drum with portrait product cards */
.k-shopwheel { padding-top: clamp(10px, 2vw, 20px); }
.k-shopwheel__stage { --card: clamp(170px, 24vw, 270px); height: calc(var(--card) * 1.72); }
.k-shopwheel__stage .k-wheel__drum { inset: 0 0 calc(var(--card) * 0.28); }
.k-shopwheel__card { height: calc(var(--card) * 1.25); background: var(--bg-3, #18181b); }
.k-shopwheel__media { position: absolute; inset: 0; display: block; pointer-events: none; }
.k-shopwheel__media .k-tcard__img { transition: none; }
.k-shopwheel__media .k-tcard__img--alt { display: none; }
.k-shopwheel__status { position: absolute; left: 10px; top: 10px; z-index: 2; pointer-events: none; }
.k-shopwheel__empty { text-align: center; color: var(--ink-2); padding: 80px 20px; }
.k-shopwheel__fare { font-family: var(--f-mono); font-size: calc(16px * var(--type, 1)); color: var(--ink); }
.k-shopwheel .k-shopwheel__wish { position: static; flex: none; }
.k-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 560px) { .k-term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.k-tcard { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--frost-line); background: var(--frost); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 0 0 1px var(--frost-edge), var(--elev-1); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.k-tcard:hover { box-shadow: 0 0 0 1px var(--frost-edge), var(--elev-2); }
.k-tcard__media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--bg-3); overflow: hidden; cursor: pointer; }
.k-tcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease), transform 1.2s var(--ease); }
.k-tcard__img--alt { opacity: 0; }
.k-tcard__media:hover .k-tcard__img--alt, .k-tcard__media:focus-visible .k-tcard__img--alt { opacity: 1; }
.k-tcard__media:hover .k-tcard__img { transform: scale(1.03); }
.k-tcard__flat { position: absolute; inset: 0; display: grid; place-items: center; padding: 10%; }
.k-tcard__flat > * { max-width: 100%; max-height: 100%; }
.k-tcard__flat:has(.k-mockup--sketch) { padding: 0; }
.k-tcard__flat .k-mockup--sketch { width: 100%; height: 100%; }
/* Tech sketches: one ink, one paper, swapped with the theme */
.k-mockup--sketch { --sk-ink: #111111; --sk-paper: #ffffff; }
html[data-theme='dark'] .k-mockup--sketch { --sk-ink: #ecebe6; --sk-paper: #131417; }
.k-mockup--sketch [fill='#111111'] { fill: var(--sk-ink); }
.k-mockup--sketch [stroke='#111111'] { stroke: var(--sk-ink); }
.k-mockup--sketch [fill='#ffffff'] { fill: var(--sk-paper); }
.k-mockup--sketch [stroke='#ffffff'] { stroke: var(--sk-paper); }
.k-tcard__status { position: absolute; top: 10px; left: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(10,10,12,.62); }
.k-tcard__gate { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(10,10,12,.72); color: var(--signal); font-weight: 600; font-size: 15px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.k-tcard__pass { position: relative; display: grid; gap: 4px; padding: 14px 14px 12px; border-top: 1.5px dashed var(--line-2); }
.k-tcard__pass::before, .k-tcard__pass::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); }
.k-tcard__pass::before { left: -9px; } .k-tcard__pass::after { right: -9px; }
.k-tcard__row { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-family: var(--f-mono); font-size: calc(10px * var(--type, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.k-tcard__row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tcard__title { margin: 2px 0 0; font-size: calc(16px * var(--type, 1)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.k-tcard__title button { text-align: left; }
.k-tcard__sub { margin: 0; font-size: calc(12.5px * var(--type, 1)); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.k-tcard__fare { font-family: var(--f-mono); font-size: calc(14px * var(--type, 1)); font-variant-numeric: tabular-nums; }
.k-tcard .k-dots { gap: 5px; }
@media (max-width: 560px) { .k-tcard__pass { padding: 12px 10px 10px; } .k-tcard__row span:last-child { display: none; } .k-tcard .k-dot { width: 14px; height: 14px; } }

/* -------------------------------------------------------------- lounge */
.k-lounge { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 340px); aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); box-shadow: var(--elev-1); scroll-snap-align: start; }
.k-lounge img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.k-lounge:hover img { transform: scale(1.04); }
.k-lounge__tag { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 10px 12px; text-align: left; border-radius: 12px; color: #f4f2ee; background: rgba(12,12,14,.42); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,.14); }
.k-lounge__tag b { font-weight: 500; font-size: calc(14px * var(--type, 1)); }
.k-lounge__tag small { font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.06em; color: rgba(244,242,238,.75); }

/* ------------------------------------------------------------ in-flight */
.k-inflight { display: grid; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 4vw, 48px); border-radius: var(--r-xl); background: #0d0d0f radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--signal) 22%, transparent), transparent 60%); color: var(--ink); }
@media (min-width: 1000px) { .k-inflight { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.k-inflight__list { display: grid; gap: 8px; }
.k-inflight__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 10px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04); color: inherit; text-align: left; transition: background 0.2s; }
.k-inflight__row:hover { background: rgba(255,255,255,.09); }
.k-inflight__thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #18181b; }
.k-inflight__thumb > * { max-width: 100%; max-height: 100%; }
.k-inflight__row b { display: block; font-weight: 500; }
.k-inflight__row small { display: block; color: var(--ink-3); font-size: calc(12.5px * var(--type, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-inflight__fare { font-family: var(--f-mono); }

/* ----------------------------------------------------------- concourse */
.k-concourse { display: grid; gap: clamp(12px, 2vw, 20px); }
@media (min-width: 900px) { .k-concourse { grid-template-columns: 1.1fr 0.9fr; } }
.k-concourse__card { display: block; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--r-xl); color: var(--ink); }
.k-concourse__card--hunt { background: #0b0c0e radial-gradient(90% 70% at 85% 20%, color-mix(in srgb, var(--signal) 28%, transparent), transparent 65%); background-size: cover; position: relative; overflow: hidden; }
.k-concourse__card--hunt::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0); background-size: 16px 16px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.k-concourse__stores { display: grid; gap: 6px; margin-top: 16px; }
.k-store-chip { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); background: var(--frost-2); }
.k-store-chip .k-sr-row__img { width: 40px; height: 40px; font-size: 20px; }
.k-store-chip b { display: block; font-weight: 500; }
.k-store-chip small { display: block; color: var(--ink-3); font-size: 12px; }

.k-customs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.k-customs li { display: grid; gap: 10px; padding: 18px; }
.k-customs b { font-family: var(--f-mono); font-size: 11px; color: var(--signal); }
.k-customs p { margin: 0; font-size: calc(14px * var(--type, 1)); color: var(--ink-2); }
.k-customs strong { color: var(--ink); font-weight: 500; }
.k-customs a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- product panel (PDP) */
.k-pdp { position: fixed; inset: 0; z-index: 180; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.55s; }
.k-pdp.is-open { visibility: visible; pointer-events: auto; transition: none; }
.k-pdp__scrim { position: absolute; inset: 0; background: rgba(8,8,9,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.45s var(--ease); }
.k-pdp.is-open .k-pdp__scrim { opacity: 1; }
.k-pdp__panel {
  position: absolute; inset: 6vh max(16px, calc(50% - 560px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--frost-line);
  background: rgba(251,250,248,.86); color: var(--ink);
  -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--elev-2);
  opacity: 0; transform: translateY(24px) scale(0.98);
  transition: inset 0.6s var(--ease), border-radius 0.6s var(--ease), opacity 0.4s var(--ease), transform 0.55s var(--ease);
}
.k-pdp.is-open .k-pdp__panel { opacity: 1; transform: none; }
.k-pdp.is-full .k-pdp__panel { inset: 0; border-radius: 0; }
.k-pdp__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px dashed var(--line-2); }
.k-pdp__flight { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.k-pdp__flight b { color: var(--ink); font-weight: 600; }
.k-pdp__flight .k-board__status--boarding { color: #15803d; background: rgba(22,163,74,.12); }
.k-pdp__flight .k-board__status--soon { color: #a16207; background: rgba(202,138,4,.14); }
.k-pdp__tools { display: flex; gap: 6px; }
.k-pdp__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); }
.k-pdp__icon svg { width: 15px; height: 15px; }
.k-pdp__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.k-pdp__media { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 14px; min-height: 0; }
.k-pdp__stage { position: relative; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); display: grid; place-items: center; }
.k-pdp__stage img { width: 100%; height: 100%; object-fit: cover; animation: k-pdp-in 0.5s var(--ease); }
.k-pdp__stage.is-flat img { object-fit: contain; padding: 6%; }
.k-pdp__stage > svg { max-width: 80%; max-height: 80%; }
@keyframes k-pdp-in { from { opacity: 0; transform: scale(1.02); } }
.k-pdp__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.k-pdp__thumbs button { flex: 0 0 auto; width: 64px; height: 80px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--bg-3); opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; }
.k-pdp__thumbs button[aria-pressed='true'] { border-color: var(--ink); opacity: 1; }
.k-pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.k-pdp__info { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
.k-pdp__info .k-eyebrow a { text-decoration: underline; text-underline-offset: 3px; }
.k-pdp__title { margin: -6px 0 0; font-size: calc(clamp(26px, 2.6vw, 36px) * var(--type, 1)); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.k-pdp__price { margin: -6px 0 0; font-family: var(--f-mono); font-size: calc(18px * var(--type, 1)); }
.k-pdp__opt { display: grid; gap: 8px; }
.k-pdp__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.k-pdp__buy { flex: 1 1 220px; justify-content: center; }
.k-pdp__buy:disabled { opacity: 0.6; }
.k-pdp__detail { margin: 0; font-size: calc(14px * var(--type, 1)); color: var(--ink-2); }
.k-pdp__more { display: grid; gap: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.k-pdp__more[hidden] { display: none; }
.k-pdp__desc { margin: 0; font-size: calc(17px * var(--type, 1)); line-height: 1.55; color: var(--ink); max-width: 60ch; }
.k-pdp__store { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--glass); }
.k-pdp__store small { display: block; font-size: 11.5px; color: var(--ink-3); }
.k-pdp__store b { display: block; font-weight: 500; }
.k-pdp__store i svg { width: 14px; height: 14px; }
.k-pdp__related { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.k-pdp__related button { display: grid; gap: 4px; text-align: left; padding: 0; border: 0; background: none; color: var(--ink); }
.k-pdp__related span { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--bg-3); display: grid; place-items: center; }
.k-pdp__related span img { width: 100%; height: 100%; object-fit: cover; }
.k-pdp__related span svg { max-width: 80%; max-height: 80%; }
.k-pdp__related b { font-weight: 500; font-size: 13px; }
.k-pdp__related small { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.k-pdp .k-arrow svg { width: 12px; height: 12px; }
/* Full product page: a tall gallery beside the scrolling details */
.k-pdp.is-full .k-pdp__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.k-pdp.is-full .k-pdp__media { padding: 18px; }
.k-pdp.is-full .k-pdp__info { padding: 32px clamp(24px, 3vw, 48px) 48px; }
html.is-pdp-open, html.is-pdp-open body { overflow: hidden; }
@media (max-width: 760px) {
  .k-pdp__panel { inset: 7svh 0 0 0; border-radius: 26px 26px 0 0; border-bottom: 0; transform: translateY(40px); }
  .k-pdp.is-full .k-pdp__panel { inset: 0; }
  .k-pdp__body, .k-pdp.is-full .k-pdp__body { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  .k-pdp__media, .k-pdp.is-full .k-pdp__media { grid-template-rows: auto auto; min-height: auto; padding: 10px; }
  .k-pdp__stage { aspect-ratio: 4 / 5; }
  .k-pdp__info { overflow: visible; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
  .k-pdp__bar { padding: 10px 10px 10px 14px; }
  .k-pdp__bar::before { content: ''; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--ink-4); }
  .k-pdp:not(.is-full) .k-pdp__bar { padding-top: 16px; }
}
html[data-theme='dark'] .k-pdp__panel { background: rgba(18,18,21,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--elev-2); }

/* ------------------------------------------------------- partner stores */
.k-storedir .k-term__search { max-width: 720px; }
.k-mt-l { margin-top: clamp(28px, 4vw, 48px); }
.k-storegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.k-scard { display: grid; overflow: hidden; padding: 0; color: var(--ink); text-align: left; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.k-scard:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.k-scard__cover { display: block; aspect-ratio: 16 / 9; background: var(--bg-3) linear-gradient(135deg, color-mix(in srgb, var(--signal) 30%, transparent), transparent); overflow: hidden; }
.k-scard__cover img { width: 100%; height: 100%; object-fit: cover; }
.k-scard__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px 6px; }
.k-scard__body .k-sr-row__img { width: 44px; height: 44px; margin-top: -34px; box-shadow: 0 0 0 3px var(--bg); }
.k-scard__body b { display: block; font-weight: 500; font-size: calc(17px * var(--type, 1)); }
.k-scard__body small { display: block; color: var(--ink-3); font-size: calc(12.5px * var(--type, 1)); }
.k-scard__note { display: block; padding: 0 16px 16px; font-size: calc(13.5px * var(--type, 1)); color: var(--ink-2); }
.k-scard--join { align-content: start; gap: 10px; padding: 22px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-2); background: none; min-height: 200px; }

.k-brand { position: relative; isolation: isolate; padding: calc(var(--nav-h) + 30px) 0 0; }
.k-brand__cover { position: absolute; inset: 0 0 30% 0; z-index: -1; overflow: hidden; background: #111; }
.k-brand__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.k-brand__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%, var(--bg)); }
.k-brand__inner { display: grid; gap: 14px; padding-top: clamp(120px, 22vw, 260px); }
.k-brand__back { justify-self: start; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; color: #fff; background: rgba(10,10,12,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: absolute; top: calc(var(--nav-h) + 26px); }
.k-brand__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center; padding: clamp(18px, 2.6vw, 30px); }
@media (min-width: 900px) { .k-brand__card { grid-template-columns: auto minmax(0, 1fr) auto; } }
.k-brand__logo { display: grid; place-items: center; width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); border-radius: 22px; background: var(--bone); color: var(--bone-ink); font-family: var(--f-serif); font-style: italic; font-size: clamp(34px, 4.6vw, 54px); }
.k-brand__name { margin: 2px 0 4px; font-size: calc(clamp(34px, 5vw, 64px) * var(--type, 1)); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; }
.k-brand__note { margin: 0; color: var(--ink-2); }
.k-brand__cta { display: grid; gap: 8px; justify-items: start; grid-column: 1 / -1; }
@media (min-width: 900px) { .k-brand__cta { grid-column: auto; justify-items: end; text-align: right; } }
.k-brand__cta small { font-size: 12px; color: var(--ink-3); }
.k-brand__cta .k-btn { display: inline-flex; gap: 10px; align-items: center; }
.k-brand__about .k-lede { max-width: 60ch; }

/* ==========================================================================
   The Hunt: full-screen globe with a HUD
   ========================================================================== */
html.is-hunt, html.is-hunt body { overflow: hidden; height: 100%; }
html.is-hunt .k-footer, html.is-hunt .k-guides { display: none; }
html.is-hunt body.k { padding-bottom: 0; background: #06070a; }
.k-hunt-app { position: fixed; inset: 0; z-index: 0; background: #06070a; color: #eef0f4; --ink: #eef0f4; --ink-2: rgba(238,240,244,.7); --ink-3: rgba(238,240,244,.48); }
.k-hunt-app .k-hmap { position: absolute; inset: 0; }   /* beats maplibregl-map{position:relative} */
.k-hmap .maplibregl-canvas { outline: none; }
.k-hmap__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); }
.k-hunt-app:not(.is-ready) .k-hmap { opacity: 0; }
.k-hmap { transition: opacity 1s var(--ease); }
.k-hmap .maplibregl-ctrl-attrib { background: rgba(10,10,12,.6) !important; color: rgba(255,255,255,.6); font-size: 10px; }
.k-hmap .maplibregl-ctrl-attrib a { color: rgba(255,255,255,.75); }
.k-hmap .maplibregl-ctrl-attrib-button { filter: invert(1); }
.k-hmap .maplibregl-ctrl-bottom-right { bottom: calc(var(--tabbar-h) + 4px); }

.k-hud-glass { border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(14,15,19,.55); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.7); }
.k-hud { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--nav-h) + 14px) var(--gutter) calc(var(--tabbar-h) + 14px); gap: 12px; }
.k-hud > * { pointer-events: none; }
.k-hud__top { display: grid; gap: 12px; align-items: start; }
@media (min-width: 960px) { .k-hud__top { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }
.k-hud__title { pointer-events: none; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.k-hud__kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.k-hud__h { margin: 6px 0 0; font-size: calc(clamp(26px, 3.4vw, 46px) * var(--type, 1)); line-height: 0.98; letter-spacing: -0.04em; font-weight: 500; max-width: 14ch; }
.k-hud__h em { font-family: var(--f-serif); font-weight: 400; }
.k-hud__search { pointer-events: auto; position: relative; padding: 6px; }
.k-hud__search .k-term__field { height: 50px; background: rgba(255,255,255,.07); }
.k-hud__search .k-term__field input { color: #fff; }
.k-hud__search { z-index: 3; }
html .k-hunt-app .k-hud__search .k-sr-list { background: rgba(14,15,19,.94); color: #eef0f4; border-color: rgba(255,255,255,.1); --glass-3: rgba(255,255,255,.08); --bg-3: #1a1b20; }
.k-hud__clear { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; }
.k-hud__filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 2px 0; }
.k-hud__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(238,240,244,.85); font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: 0.08em; text-transform: uppercase; }
.k-hud__chip[aria-pressed='false'] { opacity: 0.45; }
.k-beacon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.k-beacon-dot--store { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc; }

.k-hud__tele { pointer-events: auto; justify-self: end; align-self: start; width: 188px; padding: 12px; }
.k-hud__tele dl { margin: 0 0 10px; display: grid; gap: 5px; }
.k-hud__tele dl div { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); font-variant-numeric: tabular-nums; }
.k-hud__tele dt { color: rgba(238,240,244,.45); letter-spacing: 0.12em; text-transform: uppercase; }
.k-hud__tele dd { margin: 0; color: #fff; }
.k-hud__ctrl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.k-hud__ctrl button { display: grid; place-items: center; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; font-family: var(--f-mono); font-size: 15px; transition: background 0.2s; }
.k-hud__ctrl button:hover { background: rgba(255,255,255,.14); }
.k-hud__ctrl button[aria-pressed='true'] { background: var(--signal); color: #111; border-color: var(--signal); }
.k-hud__ctrl svg { width: 16px; height: 16px; transition: transform 0.3s; }
.k-hud__bottom { display: grid; gap: 8px; align-self: end; }
.k-hud__status { margin: 0; justify-self: start; max-width: min(100%, 640px); padding: 7px 12px; border-radius: 10px; background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: 0.04em; color: rgba(238,240,244,.85); }
.k-hud__drops { pointer-events: auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.k-hud__drops::-webkit-scrollbar { display: none; }
.k-drop { flex: 0 0 auto; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(320px, 78vw); padding: 7px 12px 7px 7px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(14,15,19,.62); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); color: #eef0f4; text-align: left; transition: transform 0.25s var(--ease), border-color 0.2s; }
.k-drop:hover { border-color: var(--signal); transform: translateY(-2px); }
.k-drop img, .k-drop .k-beacon__logo { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
.k-drop b { display: block; font-weight: 500; font-size: calc(14px * var(--type, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-drop small { display: block; font-size: calc(11.5px * var(--type, 1)); color: rgba(238,240,244,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-drop i { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--signal); }
.k-drop--store i { color: #7dd3fc; }
.k-beacon__logo { display: grid; place-items: center; background: #f2f0eb; color: #111; font-family: var(--f-serif); font-style: italic; font-size: 22px; }

/* Beacons: glowing icons on the map */
.k-beacon { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; --c: var(--signal); }
.k-beacon--store { --c: #7dd3fc; }
.k-beacon__core { position: absolute; inset: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 2px var(--c), 0 0 22px 6px color-mix(in srgb, var(--c) 55%, transparent); }
.k-beacon__pulse { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--c); animation: k-beacon 2.2s var(--ease-io) infinite; }
@keyframes k-beacon { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.k-beacon__card { position: absolute; left: 50%; bottom: calc(100% + 10px); display: none; grid-template-columns: 40px auto; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; transform: translateX(-50%); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: rgba(12,13,16,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #eef0f4; text-align: left; white-space: nowrap; box-shadow: 0 0 24px -6px var(--c); }
.k-beacon__card img, .k-beacon__card .k-beacon__logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; font-size: 18px; }
.k-beacon__card b { display: block; font-weight: 500; font-size: 13px; }
.k-beacon__card small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: rgba(238,240,244,.6); }
.k-hunt-app.is-near .k-beacon__card { display: grid; animation: k-pop 0.4s var(--ease); }
.k-hunt-app.is-near .k-beacon { width: 30px; height: 30px; }
.k-hunt-app.is-near .k-beacon__core { inset: 8px; }
@keyframes k-pop { from { opacity: 0; transform: translate(-50%, 8px) scale(0.96); } }

/* Search cards around the globe */
.k-tip { position: relative; width: 0; height: 0; }
.k-tip__line { position: absolute; left: 0; top: 0; }
.k-tip__line line { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.k-tip::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.k-tip__card { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 34px auto; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(14,15,19,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #eef0f4; text-align: left; white-space: nowrap; animation: k-tip-in 0.45s var(--ease) both; box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); }
.k-tip__card:hover { border-color: var(--signal); }
.k-tip__card img, .k-tip__card .k-beacon__logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; font-size: 16px; }
.k-tip__card b { display: block; font-weight: 500; font-size: 12.5px; }
.k-tip__card small { display: block; font-family: var(--f-mono); font-size: 10px; color: rgba(238,240,244,.6); }
@keyframes k-tip-in { from { opacity: 0; scale: 0.9; } }
.k-hunt-app.is-near .k-tip { display: none; }
.k-me { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #2f6bff; box-shadow: 0 0 0 6px rgba(47,107,255,.25); }

.k-hunt-fallback { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--nav-h) + 200px) var(--gutter) calc(var(--tabbar-h) + 40px); }
.k-hunt-app.is-fallback .k-hud__tele, .k-hunt-app.is-fallback .k-hud__bottom { display: none; }

@media (max-width: 760px) {
  .k-hud { padding-top: calc(var(--nav-h) + 4px); grid-template-rows: auto 1fr auto; }
  .k-hud__title { display: none; }
  .k-hud__tele { width: auto; justify-self: end; padding: 8px; }
  .k-hud__tele dl { display: none; }
  .k-hud__ctrl { grid-template-columns: 1fr; }
  .k-hud__ctrl button { width: 42px; height: 40px; }
  .k-hud__filters { display: none; }
  .k-hud__search:focus-within + * { display: none; }
}
.k-hud__search input::-webkit-search-cancel-button { display: none; }
@media (max-width: 760px) { html .k-hunt-app .k-hud__search .k-sr-list { max-height: 32vh; } }
.k-term__field input, .k-term__field input:focus, .k-term__field input:focus-visible { border: 0; outline: none; box-shadow: none; padding: 0; background: none; height: auto; }

/* ---------------------------------------------------------- account + cart */
.k-nav__account.is-hidden,
.k-nav__cart.is-hidden,
.k-sheet__foot .is-hidden { display: none !important; }
.k-nav__cart { position: relative; }
.k-nav__cart-icon { display: grid; place-items: center; }
.k-nav__cart-icon svg,
.k-nav__account svg { width: 18px; height: 18px; }
.k-nav__cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--signal); color: #fff;
  font-family: var(--f-mono); font-size: 9px; line-height: 16px; text-align: center;
}
.k-sheet__foot .k-nav__cart-count { position: static; margin-left: 6px; }

.k-acct, .k-cart { position: fixed; inset: 0; z-index: 310; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.5s; }
.k-acct.is-open, .k-cart.is-open { visibility: visible; pointer-events: auto; transition: none; }
.k-acct__scrim, .k-cart__scrim { position: absolute; inset: 0; background: rgba(8,8,9,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s var(--ease); }
.k-acct.is-open .k-acct__scrim, .k-cart.is-open .k-cart__scrim { opacity: 1; }
.k-acct__panel, .k-cart__panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: min(420px, calc(100% - 24px));
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  box-shadow: var(--elev-2), var(--hairline);
  transform: translateX(calc(100% + 24px)); transition: transform 0.55s var(--ease);
}
html:not([data-theme='dark']) .k-acct__panel,
html:not([data-theme='dark']) .k-cart__panel { background: rgba(251,250,248,.94); }
.k-acct.is-open .k-acct__panel, .k-cart.is-open .k-cart__panel { transform: none; }
.k-acct__head, .k-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px 22px; position: relative; }
.k-acct__grab, .k-cart__grab { display: none; }
.k-acct__title, .k-cart__title { margin: 0; font-size: calc(26px * var(--type, 1)); font-weight: 500; letter-spacing: -0.03em; }
.k-acct__x, .k-cart__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); background: var(--glass); }
.k-acct__x svg, .k-cart__x svg { width: 16px; height: 16px; }
.k-acct__body, .k-cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px 24px; display: grid; gap: 14px; align-content: start; }
.k-acct__cta { justify-self: start; min-height: 44px; }
.k-acct__hint { margin: 0; font-size: calc(12.5px * var(--type, 1)); color: var(--ink-3); }
.k-acct__hello { margin: 0; font-size: calc(22px * var(--type, 1)); font-weight: 500; letter-spacing: -0.02em; }
.k-acct__email { margin: 0; color: var(--ink-3); }
.k-acct__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.k-acct__actions .k-btn { min-height: 44px; }
/* The sheet body scrolls; its blocks keep their full height (a grid here squeezed them to fit) */
.k-acct__body { display: flex; flex-direction: column; }
.k-acct__body > * { flex: none; }
.k-acct__body > .k-acct__out { align-self: flex-start; }

/* Member card: a boarding pass for the account sheet */
.k-member {
  position: relative;
  display: grid; gap: 6px; padding: 18px 20px 16px; min-height: max-content; flex: none;
  border-radius: 22px; color: #f4f2ee;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--signal) 38%, transparent), transparent 55%),
    linear-gradient(160deg, #1d1e22, #0d0d0f 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}
.k-member__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.k-member__brand { font-weight: 600; letter-spacing: 0.2em; }
.k-member__kind { opacity: 0.6; }
.k-member__name { margin: 14px 0 0; font-size: calc(30px * var(--type, 1)); font-weight: 450; letter-spacing: -0.03em; line-height: 1; }
.k-member__email { margin: 0; font-size: 13px; opacity: 0.6; }
.k-member__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.22); }
.k-member__stats dt { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.k-member__stats dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-acct__soon { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); }
.k-acct__soon p { margin: 0; font-size: calc(14px * var(--type, 1)); color: var(--ink-2); line-height: 1.45; }
.k-acct__soon b { color: var(--ink); font-weight: 500; }
.k-acct__cta { justify-self: stretch; text-align: center; justify-content: center; min-height: 48px; }
.k-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.k-perks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.k-perks li:last-child { border-bottom: 0; }
.k-perks i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.k-perks i svg { width: 17px; height: 17px; }
.k-perks b { display: block; font-weight: 500; font-size: calc(14px * var(--type, 1)); }
.k-perks small { display: block; color: var(--ink-3); font-size: calc(12.5px * var(--type, 1)); line-height: 1.35; }
.k-acct__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.k-acct__tile { display: grid; gap: 8px; justify-items: start; padding: 12px; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none; transition: background .25s, transform .2s var(--ease); }
.k-acct__tile:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.k-acct__tile:active { transform: scale(.97); }
.k-acct__tile i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.k-acct__tile i svg { width: 16px; height: 16px; }
.k-acct__tile span { display: grid; gap: 1px; font-size: 13.5px; font-weight: 500; }
.k-acct__tile small { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.k-acct__out { justify-self: start; min-height: 44px; color: var(--ink-2); }

/* Email-code sign-in in the account sheet */
.k-signin { display: grid; gap: 12px; }
.k-field { display: grid; gap: 6px; }
.k-field > span { font-size: calc(13px * var(--type, 1)); font-weight: 500; color: var(--ink-2); }
.k-field > span small { font-weight: 400; color: var(--ink-3); }
.k-field input {
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink);
  font: inherit; font-size: 16px;   /* 16px stops iOS zooming in */
  transition: border-color .2s, box-shadow .2s;
}
.k-field input::placeholder { color: var(--ink-3); }
.k-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.k-otp { text-align: center; font-family: var(--f-mono) !important; font-size: 28px !important; letter-spacing: 0.4em; min-height: 62px !important; padding-left: 0.4em !important; }
.k-signin__lead { margin: 0; font-size: calc(14.5px * var(--type, 1)); line-height: 1.45; color: var(--ink-2); }
.k-signin__lead b { color: var(--ink); font-weight: 500; word-break: break-all; }
.k-signin__msg { margin: 0; min-height: 1.2em; font-size: 13px; color: #d4381b; }
.k-signin__msg:empty { min-height: 0; }
html[data-theme='dark'] .k-signin__msg { color: #ff7a5c; }
.k-signin__link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k-signin__link:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }

.k-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.k-cart__line { display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; align-items: start; }
.k-cart__thumb { width: 64px; height: 80px; border-radius: var(--r-sm); overflow: hidden; background: var(--glass-3); }
.k-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.k-cart__meta { display: grid; gap: 2px; }
.k-cart__meta b { font-weight: 500; font-size: calc(14px * var(--type, 1)); }
.k-cart__meta small, .k-cart__meta span { color: var(--ink-3); font-size: calc(12.5px * var(--type, 1)); }
.k-cart__qty { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.k-cart__qty button { min-width: 44px; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--glass); color: var(--ink); }
.k-cart__remove { margin-left: auto; font-size: 12px; color: var(--ink-3); border: 0; background: none; min-width: auto; padding: 0 8px; }
.k-cart__foot { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.k-cart__total { display: flex; justify-content: space-between; margin: 0; font-size: calc(15px * var(--type, 1)); }
.k-cart__foot .k-btn { min-height: 48px; justify-content: center; }

.k-pdp__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.k-pdp__cta .k-btn { min-height: 44px; }
.k-pdp__cart { flex: 1 1 auto; }

.k-acct-page { padding: calc(var(--nav-h) + 32px) 0 calc(var(--tabbar-h) + 48px); }
.k-acct-page .k-display { margin: 8px 0 12px; }
.k-acct-grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 768px) {
  .k-acct-grid { grid-template-columns: 1fr 1fr; }
}
.k-acct-grid .k-glass-panel { padding: 20px; display: grid; gap: 12px; align-content: start; }
.k-acct-grid h2 { margin: 0; font-size: calc(18px * var(--type, 1)); font-weight: 500; }
.k-acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-acct-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--type, 1)); }
.k-acct-list li small { display: block; color: var(--ink-3); font-size: 12px; }
.k-acct-empty { margin: 0; color: var(--ink-3); font-size: calc(14px * var(--type, 1)); }
.k-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.k-acct-dl { margin: 0; display: grid; gap: 10px; }
.k-acct-dl div { display: flex; justify-content: space-between; gap: 12px; }
.k-acct-dl dt { color: var(--ink-3); }
.k-acct-dl dd { margin: 0; }

@media (max-width: 760px) {
  .k-acct__panel, .k-cart__panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 92svh; border-radius: 28px 28px 0 0; border-bottom: 0;
    transform: translateY(105%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-corners='square'] .k-acct__panel,
  html[data-corners='square'] .k-cart__panel { border-radius: 4px 4px 0 0; }
  .k-acct__grab, .k-cart__grab { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--ink-4); }
  .k-acct__head, .k-cart__head { padding-top: 22px; }
}
html.is-account-open, html.is-account-open body,
html.is-cart-open, html.is-cart-open body { overflow: hidden; }

/* Product guide: size chart, materials, care, colours, FAQ */
.k-guide { border-top: 1px solid var(--line); margin-top: 4px; }
.k-guide__sec { border-bottom: 1px solid var(--line); }
.k-guide__sec > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; font-size: calc(14px * var(--type, 1)); font-weight: 500; }
.k-guide__sec > summary::-webkit-details-marker { display: none; }
.k-guide__sec > summary i { font-style: normal; font-family: var(--f-mono); color: var(--ink-3); transition: transform 0.3s var(--ease); }
.k-guide__sec[open] > summary i { transform: rotate(45deg); }
.k-guide__body { padding: 0 0 16px; display: grid; gap: 12px; font-size: calc(13.5px * var(--type, 1)); color: var(--ink-2); }
.k-guide__body p { margin: 0; }
.k-guide__body a { color: var(--ink); }
.k-guide__list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.k-guide__note { font-size: calc(12px * var(--type, 1)); color: var(--ink-3); }
.k-guide__units { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; justify-self: start; }
.k-guide__units button { border: 0; background: none; color: var(--ink-3); font: inherit; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; }
.k-guide__units button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.k-guide__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-guide__table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.k-guide__table th, .k-guide__table td { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.k-guide__table thead th { font-weight: 400; color: var(--ink-3); font-size: 10.5px; letter-spacing: .04em; white-space: normal; vertical-align: bottom; }
.k-guide__table thead th b { color: var(--ink); }
.k-guide__table tbody th { color: var(--ink); font-weight: 600; }
.k-guide__table tr.is-on td, .k-guide__table tr.is-on th { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.k-guide__sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.k-guide__sws li { display: flex; align-items: center; gap: 10px; }
.k-guide__sws b { display: block; font-weight: 500; color: var(--ink); font-size: 13px; }
.k-guide__sws small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; }
.k-guide__sw { width: 34px; height: 34px; border-radius: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); flex: none; }
.k-guide__faq { margin: 0; display: grid; gap: 12px; }
.k-guide__faq dt { color: var(--ink); font-weight: 500; }
.k-guide__faq dd { margin: 2px 0 0; }

/* Product image carousel: swipe (scroll-snap), arrows, dots */
.k-pdp__stage { display: block; }
.k-car { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.k-car::-webkit-scrollbar { display: none; }
.k-car__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
.k-car__slide img { width: 100%; height: 100%; object-fit: cover; }
.k-car__slide.is-flat img { object-fit: contain; padding: 6%; }
.k-car__slide.is-sketch { background: var(--bg-3); padding-bottom: 26px; }
.k-car__slide.is-sketch svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.k-car__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--frost-line, var(--line)); background: var(--frost, rgba(0,0,0,.4)); color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: .85; transition: opacity .2s; z-index: 2; }
.k-car__nav:hover { opacity: 1; }
.k-car__nav--prev { left: 12px; }
.k-car__nav--next { right: 12px; }
.k-car__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; z-index: 2; }
.k-car__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .3; transition: opacity .2s, width .2s; }
.k-car__dots i.is-on { opacity: .9; width: 18px; border-radius: 3px; }
.k-pdp__thumbs button.is-sketch svg { width: 100%; height: 100%; display: block; }
@media (hover: none) { .k-car__nav { display: none; } }

/* ------------------------------------------------------------ terminal
 * Site-wide airport wayfinding: terminal signs on every page header, the
 * main concourse directory, boarding-pass rows on story cards and the
 * boarding pass on story pages. Boards reuse .k-board from the shop.
 * -------------------------------------------------------------------- */
.k-term__t--sm { min-width: 26px; height: 20px; padding: 0 6px; font-size: 10px; border-radius: 5px; margin-right: 8px; vertical-align: 1px; }
.k-page-head--term { position: relative; isolation: isolate; }
.k-page-head--term::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--signal) 9%, transparent), transparent 60%); pointer-events: none; }
.k-page-board .k-board__rows { max-height: none; }
a.k-board__row { display: grid; text-decoration: none; }
.k-board__status--landed { color: rgba(243,233,198,.85); background: rgba(255,255,255,.08); }
.k-board__status--landed::before { opacity: .6; }

.k-concourse-home__inner { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 1000px) { .k-concourse-home__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.k-dir { display: grid; gap: 8px; }
.k-dir__sign { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--board); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.06); transition: transform .25s var(--ease), background .25s; }
.k-dir__sign:hover, .k-dir__sign:focus-visible { transform: translateX(4px); background: color-mix(in srgb, var(--board) 88%, var(--signal)); outline: none; }
.k-dir__t { display: inline-grid; place-items: center; min-width: 38px; height: 30px; border-radius: 6px; background: var(--signal); color: #111; font-family: var(--f-mono); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.k-dir__name b { display: block; font-weight: 500; font-size: calc(16px * var(--type, 1)); letter-spacing: -0.01em; }
.k-dir__name small { display: block; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: .08em; text-transform: uppercase; color: rgba(243,233,198,.6); margin-top: 2px; }
.k-dir__arrow { width: 16px; height: 16px; color: var(--signal); }

.k-card__pass { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,.28); font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.k-pass { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0 0 16px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--board) 88%, transparent); color: #fff; font-family: var(--f-mono); font-size: calc(11.5px * var(--type, 1)); letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.k-pass > span { padding: 7px 12px; border-left: 1px dashed rgba(255,255,255,.22); }
.k-pass > span:first-child { border-left: 0; }
.k-pass small { display: block; font-size: 8.5px; letter-spacing: .16em; color: rgba(243,233,198,.6); }
.k-pass__t { display: grid; place-items: center; background: var(--signal); color: #111; font-weight: 600; }

/* ------------------------------------------------------------- films
 * films.html: streaming-style screening room. Billboard + rows of tiles.
 * -------------------------------------------------------------------- */
.k-films { padding-bottom: clamp(48px, 8vw, 96px); }
.k-billboard { position: relative; isolation: isolate; min-height: min(86svh, 820px); display: grid; align-content: end; overflow: hidden; color: #fff; background: #0b0b0c; }
.k-billboard__media { position: absolute; inset: 0; z-index: -2; }
.k-billboard__media img, .k-billboard__media .plate { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-billboard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,9,.88) 0%, rgba(8,8,9,.55) 38%, rgba(8,8,9,0) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(8,8,9,0) 34%); }
.k-billboard__inner { position: relative; min-width: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(40px, 7vw, 96px); }
.k-billboard .k-term__strip { color: rgba(255,255,255,.75); max-width: 640px; }
.k-billboard .k-term__clock { color: #fff; }
.k-billboard__title { margin: 0; max-width: 14ch; font-size: calc(clamp(44px, 7vw, 108px) * var(--type, 1)); line-height: .9; letter-spacing: -0.05em; font-weight: 500; }
.k-billboard__meta { margin: 14px 0 0; font-family: var(--f-mono); font-size: calc(11.5px * var(--type, 1)); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.k-billboard__blurb { margin: 12px 0 0; max-width: 46ch; font-size: calc(17px * var(--type, 1)); color: rgba(255,255,255,.86); }
.k-billboard__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.k-billboard__cta .k-btn { color: #fff; border-color: rgba(255,255,255,.35); }
.k-billboard__cta .k-btn--solid { background: #fff; color: #0b0b0c; border-color: #fff; }
.k-films__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3.5vw, 40px); margin-top: clamp(-60px, -4vw, -24px); position: relative; }
.k-frow__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.k-frow__title { margin: 0; font-size: calc(clamp(18px, 1.8vw, 24px) * var(--type, 1)); font-weight: 500; letter-spacing: -0.02em; }
.k-frow__count { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.k-hscroll-wrap--films .k-hscroll { grid-auto-columns: clamp(200px, 23vw, 320px); gap: 12px; padding-top: 8px; padding-bottom: 18px; }
.k-ftile { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.k-ftile__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-3); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.k-ftile__media img, .k-ftile__media .plate { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-ftile__media .plate__mark { font-size: clamp(34px, 4vw, 56px); }
.k-ftile:hover .k-ftile__media, .k-ftile:focus-visible .k-ftile__media { transform: scale(1.04); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.k-ftile:focus-visible { outline: none; }
.k-ftile:focus-visible .k-ftile__media { box-shadow: 0 0 0 2px var(--signal); }
.k-ftile__play { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #0b0b0c; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s var(--ease); }
.k-ftile:hover .k-ftile__play, .k-ftile:focus-visible .k-ftile__play { opacity: 1; transform: none; }
.k-ftile__soon { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fbbf24; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); }
.k-ftile__info { display: block; padding: 10px 2px 0; }
.k-ftile__info b { display: block; font-weight: 500; font-size: calc(14.5px * var(--type, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ftile__info small { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (hover: none) { .k-ftile__play { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- atlas */
.k-lib__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.k-lib__search { flex: 1 1 320px; border: 1px solid var(--line); background: var(--bg-2); }
.k-lib__search svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.k-lib__filters { display: grid; gap: 10px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k-lib__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.k-lib__label { min-width: 74px; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.k-lib__count { margin: 16px 0 14px; font-family: var(--f-mono); letter-spacing: .06em; }
.k-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.k-lib-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.k-lib-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.k-lib-card__media .k-media { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.k-lib-card__media img { transition: transform .8s var(--ease); }
.k-lib-card:hover .k-lib-card__media img { transform: scale(1.04); }
.k-lib-card__type { position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.k-lib-card__type--video { background: var(--signal); color: #111; }
.k-lib-card__body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.k-lib-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.k-lib-card__title { margin: 0; font-size: calc(21px * var(--type, 1)); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.k-lib-card__title a { color: inherit; text-decoration: none; }
.k-lib-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.k-lib-card__sub { margin: 0; color: var(--ink-2); font-size: calc(14px * var(--type, 1)); }
.k-lib-card__dek, .k-lib-card__hit { margin: 0; color: var(--ink-2); font-size: calc(14.5px * var(--type, 1)); }
.k-lib-card__hit mark { background: color-mix(in srgb, var(--signal) 35%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.k-lib-card__foot { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: calc(12.5px * var(--type, 1)); color: var(--ink-3); }
.k-lib-tag { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; }
.k-lib-tag:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------ atlas (home) */
.k-wl { overflow: hidden; }
.k-wl__inner { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .k-wl__inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } }
.k-wl__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.k-wl__list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: padding .25s var(--ease); }
.k-wl__list a:hover, .k-wl__list a:focus-visible { padding-left: 8px; outline: none; }
.k-wl__n { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.k-wl__list b { display: block; font-weight: 500; }
.k-wl__list small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.k-wl__go { display: inline-grid; width: 14px; height: 14px; color: var(--ink-3); }
.k-wl__go svg { width: 100%; height: 100%; }
@media (max-width: 999px) { .k-wl__stage { order: -1; max-width: 560px; } }
.k-wl__stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 760px; justify-self: center; color: var(--ink); }
.k-wl__globe { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; color: var(--ink); }
.k-wl__globe.is-dragging { cursor: grabbing; }
.k-wl__nodes { position: absolute; inset: 0; pointer-events: none; }
.k-wl-node { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; color: inherit; text-decoration: none; will-change: transform, opacity; transition: opacity .3s; }
.k-wl-node__pin { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); }
.k-wl-node__pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--signal); animation: k-wl-ping 2.4s var(--ease-io) infinite; }
@keyframes k-wl-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.k-wl-node__line { position: absolute; left: 0; top: 0; height: 1px; width: var(--len); background: currentColor; opacity: .55; transform-origin: 0 50%; transform: rotate(var(--ang)); }
.k-wl-node__card { position: absolute; left: var(--ox); top: var(--oy); transform: translate(-50%, -50%); display: grid; gap: 6px; width: clamp(104px, 15vw, 150px); }
.k-wl-node--hero .k-wl-node__card { width: clamp(128px, 19vw, 200px); }
.k-wl-node__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 14px 30px -14px rgba(0,0,0,.55); transition: transform .3s var(--ease); }
.k-wl-node:hover .k-wl-node__thumb, .k-wl-node:focus-visible .k-wl-node__thumb { transform: scale(1.06); }
.k-wl-node:focus-visible { outline: none; }
.k-wl-node:focus-visible .k-wl-node__thumb { box-shadow: 0 0 0 2px var(--signal); }
.k-wl-node__label { display: block; text-align: center; }
.k-wl-node__label b { display: block; font-size: calc(12.5px * var(--type, 1)); font-weight: 500; line-height: 1.2; }
.k-wl-node__label small { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-3); margin-top: 2px; }
/* The hero slideshow, flipped into the first pin */
.k-cover__media.is-thumb { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; }
.k-cover__media.is-thumb .k-heroshow, .k-cover__media.is-thumb .k-heroshow__slide, .k-cover__media.is-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .k-wl-node__label small { display: none; } .k-wl-node__card { width: 96px; } .k-wl-node--hero .k-wl-node__card { width: 120px; } }

.k-lib__more > summary { cursor: pointer; list-style: none; font-family: var(--f-mono); font-size: calc(10.5px * var(--type, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.k-lib__more > summary::-webkit-details-marker { display: none; }
.k-lib__more > summary::after { content: ' +'; }
.k-lib__more[open] > summary::after { content: ' −'; }
.k-lib__more[open] > summary { margin-bottom: 10px; }
.k-lib__more { display: grid; gap: 10px; }
.k-films__rows > * { min-width: 0; }

/* The KIOSK wordmark's first K faces backwards (ꓘIOSK) */
.k-wm { white-space: nowrap; }
.k-rk { display: inline-block; transform: scaleX(-1); letter-spacing: 0; margin-right: 0; }
/* the mirrored K carries its context's letter-spacing on the right */
.k-logo .k-rk { margin-right: 0.14em; }
.k-cover__word .k-rk { margin-right: -0.065em; }
.k-footer__mark .k-rk { margin-right: -0.07em; }

/* ------------------------------------------------------- above the clouds
 * Home opening (js/kiosk-sky.js). Without JS it is a plain first screen;
 * with it (.is-live) the layer is fixed and the section is the scroll
 * runway for the descent into the clouds. */
.k-sky { position: relative; height: 100svh; }
.k-sky.is-live { height: 175svh; }
.k-sky__layer { position: absolute; left: 0; right: 0; top: 0; height: 100svh; overflow: hidden; z-index: 50; background: #8db6e4; color: #fff; }
.k-sky.is-live .k-sky__layer { position: fixed; inset: 0; height: auto; pointer-events: none; }
.k-sky { background: var(--sky-fog); }   /* the fog the layer whites out into, so the cover rises out of the same colour */
.k-sky { --sky-top: #154aa6; --sky-mid: #2a68c9; --sky-low: #6c9fe0; --sky-hor: #dbe7f4; --sky-sun: rgba(255,255,255,.32); --sky-sun-x: 78%; --sky-sun-y: 8%; --sky-sun-s: 70%; --sky-streak: rgba(255,255,255,.7); --sky-fog: #eef1f5; }
.k-sky__air { position: absolute; inset: 0; background:
  radial-gradient(var(--sky-sun-s) calc(var(--sky-sun-s) * .7) at var(--sky-sun-x) var(--sky-sun-y), var(--sky-sun) 0%, rgba(255,255,255,0) 60%),
  linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 30%, var(--sky-low) 50%, var(--sky-hor) 58%, var(--sky-hor) 100%); }
.k-sky__streaks { position: absolute; left: -10%; right: -10%; top: 42%; height: 15%; pointer-events: none; background:
  radial-gradient(38% 9% at 70% 40%, var(--sky-streak) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(30% 6% at 28% 62%, var(--sky-streak) 0%, rgba(255,255,255,0) 100%),
  radial-gradient(45% 7% at 55% 80%, var(--sky-streak) 0%, rgba(255,255,255,0) 100%);
  filter: blur(2px); }
.k-sky__space { position: absolute; inset: 0; opacity: 0; background:
  radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 12%, #fff 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 84% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 72%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 52% 34%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 22% 52%, rgba(255,255,255,.6) 50%, transparent 51%),
  radial-gradient(1px 1px at 91% 82%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 6% 88%, rgba(255,255,255,.6) 50%, transparent 51%),
  radial-gradient(120% 90% at 50% 50%, #0b1630 0%, #04070f 70%); }
.k-sky.is-boot .k-sky__space { opacity: 1; }
.k-sky__globe, .k-sky__fog, .k-sky__earth { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-sky__earth { display: block; opacity: 0; pointer-events: none; }
.k-sky:not(.is-live) .k-sky__earth { display: none; }
.k-sky__fogcss { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 52%; pointer-events: none; display: none;
  background: radial-gradient(40% 60% at 20% 70%, var(--sky-fog) 0%, rgba(255,255,255,0) 70%), radial-gradient(40% 60% at 60% 75%, var(--sky-fog) 0%, rgba(255,255,255,0) 70%), radial-gradient(45% 55% at 92% 70%, var(--sky-fog) 0%, rgba(255,255,255,0) 70%), linear-gradient(0deg, var(--sky-fog) 0%, var(--sky-fog) 45%, rgba(255,255,255,0) 100%);
  filter: blur(6px); }
.k-sky.is-nogl .k-sky__fogcss, .k-sky:not(.is-live) .k-sky__fogcss { display: block; }
.k-sky__title { position: absolute; left: 0; right: 0; top: 0; height: 100svh; z-index: 105; pointer-events: none; }
.k-sky.is-live .k-sky__title { position: fixed; }
.k-sky__word { position: absolute; left: 50%; top: calc(64% - .76em); margin: 0; translate: -50% 0; color: #fff; font-size: calc(clamp(118px, 27vw, 470px) * var(--type, 1)); line-height: .8; letter-spacing: -0.065em; font-weight: 600; white-space: nowrap; transform-origin: 50% 50%; will-change: transform, opacity;
  --cut: 200%; --feather: 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--cut), transparent calc(var(--cut) + var(--feather)));
  mask-image: linear-gradient(180deg, #000 0, #000 var(--cut), transparent calc(var(--cut) + var(--feather)));
  text-shadow: 0 10px 50px rgba(10,30,70,.18); }
.k-sky__word .k-rk { margin-right: -0.065em; }
.k-sky.is-boot .k-sky__word { opacity: 0; }
.k-sky__tagline { position: absolute; left: 0; right: 0; top: 70%; margin: 0; padding: 0 var(--gutter); text-align: center; color: var(--sky-ink, #13223d); font-family: var(--f-serif); font-style: italic; font-size: calc(clamp(22px, 2.6vw, 40px) * var(--type, 1)); line-height: 1.15; letter-spacing: -0.01em; }
.k-sky[data-phase='midnight'] .k-sky__tagline { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.k-sky:not([data-phase='midnight']) .k-sky__tagline { text-shadow: 0 1px 14px rgba(255,255,255,.55); }
.k-sky__route { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 12px); margin: 0; font-family: var(--f-mono); font-size: calc(11px * var(--type, 1)); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.k-sky__hint { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(20,40,80,.45); opacity: 0; transition: opacity .8s var(--ease); }
.k-sky.is-settled .k-sky__hint { opacity: .8; }
.k-sky__hint i { width: 1px; height: 28px; background: currentColor; animation: k-sky-hint 1.6s var(--ease-io) infinite; transform-origin: top; }
@keyframes k-sky-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* the cover below takes the logo's place: no second wordmark */
.k-sky ~ .k-cover .k-cover__title { display: none; }

/* ---------------------------------------------------------- satellite Earth
 * js/kiosk-earth.js: map labels in the style of a flight tracker */
.k-earth-label { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: #fff; font-family: var(--f-sans); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.45); will-change: transform, opacity; transition: opacity .25s; }
.k-earth-label--city { translate: -4px -50%; display: flex; align-items: center; gap: 5px; }
.k-earth-label--city i { width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.8); }
.k-earth-label--land { translate: -50% -50%; font-size: 15px; letter-spacing: .32em; text-transform: uppercase; font-weight: 700; }
.k-earth-label--sea { translate: -50% -50%; color: #a9d3ff; font-style: italic; font-weight: 600; font-size: 12px; letter-spacing: .12em; }
@media (max-width: 760px) { .k-earth-label { font-size: 11.5px; } .k-earth-label--land { font-size: 13px; } .k-earth-label--sea { font-size: 10.5px; } }

/* ------------------------------------------------------------- the Atlas */
.k-atlas-hero { position: relative; height: min(86svh, 860px); min-height: 560px; overflow: hidden; background: #000; color: #fff; isolation: isolate; }
.k-atlas-hero__earth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); cursor: grab; color: #dfe9ff; }
.k-atlas-hero__earth:active { cursor: grabbing; }
.k-atlas-hero.is-ready .k-atlas-hero__earth { opacity: 1; }
.k-atlas-hero.is-nogl { background: radial-gradient(120% 90% at 50% 110%, #12305c 0, #061226 45%, #000 70%); }
.k-atlas-hero__labels, .k-atlas-hero__pins { position: absolute; inset: 0; pointer-events: none; }
.k-atlas-hero__labels { opacity: 0; transition: opacity 1s .4s; }
.k-atlas-hero.is-ready .k-atlas-hero__labels { opacity: 1; }
.k-atlas-hero__pins { z-index: 2; color: #fff; }
/* Wireframe globe backdrop and zoom buttons */
.k-atlas-hero { background: radial-gradient(90% 70% at 62% 40%, #0b1730 0%, #04070f 60%, #000 100%); }
.k-atlas-hero__zoom { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 24px); z-index: 4; display: grid; gap: 6px; }
.k-atlas-hero__zoom button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20,24,34,.55); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: background .25s, transform .2s var(--ease); }
.k-atlas-hero__zoom button:hover { background: rgba(40,46,62,.75); }
.k-atlas-hero__zoom button:active { transform: scale(.94); }
.k-atlas-hero__zoom svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .k-atlas-hero__zoom { top: calc(var(--nav-h) + max(10px, env(safe-area-inset-top)) + 8px); } .k-atlas-hero__zoom button { width: 36px; height: 36px; } }
.k-atlas-pin .k-wl-node__label b { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.k-atlas-pin .k-wl-node__label small { color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.k-atlas-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45) 0, transparent 22%, transparent 55%, rgba(0,0,0,.55) 82%, var(--bg) 100%); }
.k-atlas-hero__inner { position: absolute; left: 0; right: 0; bottom: clamp(22px, 5vh, 56px); z-index: 3; pointer-events: none; }
.k-atlas-hero__inner > * { pointer-events: auto; }
.k-atlas-hero .k-term__strip { color: rgba(255,255,255,.8); }
.k-atlas-hero__title { margin: 10px 0 0; font-size: calc(clamp(52px, 9vw, 128px) * var(--type, 1)); line-height: .9; letter-spacing: -0.05em; font-weight: 500; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.k-atlas-hero__lede { max-width: 46ch; margin: 12px 0 0; color: rgba(255,255,255,.82); font-size: calc(15.5px * var(--type, 1)); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.k-atlas-hero__search { margin-top: 18px; max-width: 560px; background: rgba(20,22,28,.55) !important; border-color: rgba(255,255,255,.18) !important; color: #fff; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.k-atlas-hero__search input { color: #fff; }
.k-atlas-hero__search input::placeholder { color: rgba(255,255,255,.6); }
.k-atlas-hero__search svg { width: 18px; height: 18px; flex: none; }
html[data-theme='dark'] .k-atlas-hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.45) 0, transparent 22%, transparent 55%, rgba(0,0,0,.6) 82%, var(--bg) 100%); }
@media (max-width: 760px) {
  .k-atlas-hero { height: 78svh; min-height: 520px; }
  .k-atlas-hero__lede { font-size: 14px; }
  .k-atlas-pin .k-wl-node__card { width: 92px; }
}
.k-atlas-browse { padding-top: 6px !important; }
.k-atlas-browse .k-lib__filters { margin-bottom: 8px; }
.k-atlas-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vw, 26px); }
.k-atlas-rows > * { min-width: 0; }
.k-earth-label.is-hidden { opacity: 0 !important; }
.k-atlas-rows[hidden], [data-atlas-results][hidden] { display: none !important; }
.k-atile { display: block; text-decoration: none; }
.k-atile .k-ftile__media > .k-media { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.k-atile .k-ftile__media .k-media img, .k-atile .k-ftile__media .k-media .plate { width: 100%; height: 100%; object-fit: cover; }
.k-atile .k-lib-card__type { left: 10px; top: 10px; }
.k-hscroll-wrap--atlas-big .k-hscroll { grid-auto-columns: clamp(270px, 44vw, 620px); }
.k-atile--big .k-ftile__media { aspect-ratio: 16 / 9; }
.k-atile__over { position: absolute; inset: auto 0 0 0; display: grid; gap: 3px; padding: 44px 16px 14px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); }
.k-atile__over small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.k-atile__over b { font-weight: 500; font-size: calc(clamp(17px, 2vw, 26px) * var(--type, 1)); letter-spacing: -0.02em; line-height: 1.1; }
.k-atile__over em { font-family: var(--f-serif); font-size: calc(clamp(14px, 1.4vw, 18px) * var(--type, 1)); opacity: .85; }

/* ------------------------------------------------------------- flights
 * flights.html: a satellite globe behind a dark sheet (side panel on wide
 * screens), in the spirit of a flight tracker app. */
body[data-page='flights'] { background: #000; }
body[data-page='flights'] .k-footer { display: none; }
.k-flights { position: relative; min-height: 100svh; color: #f4f4f5; }
.k-flights__stage { position: fixed; inset: 0; z-index: 0; background: #000; }
.k-flights__earth, .k-flights__air { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.k-flights__earth { opacity: 0; transition: opacity 1.2s var(--ease); touch-action: pan-y; cursor: grab; }
.k-flights.is-ready .k-flights__earth { opacity: 1; }
.k-flights.is-nogl .k-flights__stage { background: radial-gradient(120% 80% at 60% 110%, #12305c 0, #061226 45%, #000 70%); }
.k-flights__air { pointer-events: none; }
.k-flights__labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s .4s; }
.k-flights.is-ready .k-flights__labels { opacity: 1; }
.k-flights__stage { pointer-events: none; }
.k-flights__stage .k-flights__earth { pointer-events: auto; }
.k-flights__panel {
  position: relative; z-index: 2;
  display: grid; gap: 14px; align-content: start;
  background: rgba(22,23,27,.9); color: #f4f4f5;
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  --ink: #f4f4f5; --ink-2: rgba(244,244,245,.78); --ink-3: rgba(244,244,245,.55); --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.16);
}
.k-flights__grab { display: none; }
.k-flights__head .k-term__strip { color: rgba(255,255,255,.7); }
.k-flights__title { margin: 6px 0 0; font-size: calc(clamp(34px, 4vw, 46px) * var(--type, 1)); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.k-flights__sub { margin: 8px 0 0; color: var(--ink-2); font-size: calc(14.5px * var(--type, 1)); min-height: 2.6em; }
.k-flights__search .k-term__field { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #fff; }
.k-flights__search input { color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.k-flights__search input::placeholder { color: rgba(255,255,255,.45); text-transform: none; letter-spacing: 0; }
.k-flights__search svg { width: 18px; height: 18px; flex: none; }
.k-flights__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.k-flights .k-btn { border-color: rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.06); }
.k-flights .k-btn--solid { background: #fff; color: #0b0b0c; border-color: #fff; }
.k-flights__note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.k-flights__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.k-fcard { display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.k-fcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.k-fcard__airline { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.k-fcard__cs { margin: 2px 0 0; font-family: var(--f-mono); font-size: calc(30px * var(--type, 1)); font-weight: 600; letter-spacing: .02em; }
.k-fcard__state { flex: none; padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.1); }
.k-fcard__state--climb { background: rgba(52,199,89,.18); color: #5ee083; }
.k-fcard__state--descend { background: rgba(255,159,10,.18); color: #ffb648; }
.k-fcard__state--cruise { background: rgba(10,132,255,.2); color: #6cb6ff; }
.k-fcard__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.k-fcard__route > div:not(.k-fcard__track) b { display: block; font-family: var(--f-mono); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.k-fcard__route > div:not(.k-fcard__track) small { display: block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-3); }
.k-fcard__route > div:last-child { text-align: right; }
.k-fcard__track { position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,.18); }
.k-fcard__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 2px; background: #fff; }
.k-fcard__track span { position: absolute; top: 50%; left: calc(var(--p) * 100%); translate: -50% -50%; font-size: 16px; color: #ff7a3d; text-shadow: 0 0 10px rgba(255,122,61,.7); }
.k-fcard__left { margin: -6px 0 0; font-size: 12px; color: var(--ink-3); }
.k-fcard__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin: 0; }
.k-fcard__grid dt { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.k-fcard__grid dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 500; }
.k-fcard__grid dd small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.k-fcard__grid .k-mono { font-size: 12px; }
.k-fcard__seen { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.k-fcard__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.k-fcard__cta [aria-pressed='true'] { background: rgba(255,122,61,.18); border-color: rgba(255,122,61,.5); color: #ffb58f; }
/* Flight status (Aviationstack): departure / arrival boards inside the flight card */
.k-fstat { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.k-fstat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.k-fstat__pill { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.1); }
.k-fstat__pill--active { background: rgba(10,132,255,.2); color: #6cb6ff; }
.k-fstat__pill--scheduled { background: rgba(255,255,255,.12); color: #f4f4f5; }
.k-fstat__pill--landed { background: rgba(52,199,89,.18); color: #5ee083; }
.k-fstat__pill--cancelled, .k-fstat__pill--incident, .k-fstat__pill--diverted { background: rgba(255,69,58,.2); color: #ff8a80; }
.k-fstat__delay { font-size: 12px; font-weight: 600; color: #ffb648; }
.k-fstat__day { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.k-fstat__ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.k-fstat__end small { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.k-fstat__end b { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.k-fstat__end > span { display: block; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-fstat__end dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 0; }
.k-fstat__end dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.k-fstat__end dd { margin: 2px 0 0; font-family: var(--f-mono); font-size: 15px; font-weight: 600; }
.k-fstat__end dd.is-late { color: #ffb648; }
.k-fstat__end dd.is-ok { color: #5ee083; }
.k-fstat__note { margin: 0; font-size: 11px; color: var(--ink-3); }
.k-flights__list-title { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.k-flights__list ul { list-style: none; margin: 0; padding: 0; display: grid; }
.k-flights__list button { width: 100%; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 11px 4px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.k-flights__list button:hover { background: rgba(255,255,255,.04); }
.k-flights__cs { font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; }
.k-flights__al { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-flights__alt { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
@media (min-width: 760px) {
  .k-flights__panel { position: fixed; left: max(16px, calc((100vw - var(--max)) / 2)); top: calc(var(--nav-h, 76px) + 24px); bottom: 20px; width: min(420px, 38vw); padding: 22px; border-radius: 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 759px) {
  .k-flights { padding-top: 54svh; }
  .k-flights__panel { margin: 0 8px; padding: 10px 18px calc(var(--tabbar-h, 80px) + 24px); border-radius: 30px 30px 0 0; min-height: 50svh; border-bottom: 0; }
  .k-flights__grab { display: block; justify-self: center; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
  .k-fcard__cs { font-size: 26px; }
  .k-fcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page='flights'].k { padding-bottom: 0; }
}
@media (max-width: 760px) { .k-sky__hint { bottom: calc(var(--tabbar-h) + 18px); } }

/* ------------------------------------------------------------ menu sheet
 * Everything in one view on a phone: compact links that rise in one after
 * another, a row of icon buttons (settings, theme, check-in, account, cart)
 * and a strip of small pills, all clear of the tab bar. */
.k-sheet__links li { --d: calc(var(--i, 0) * 35ms + 60ms); }
.k-sheet.is-open .k-sheet__links li a { transition-delay: var(--d); }
.k-sheet__foot { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.k-sheet.is-open .k-sheet__foot { opacity: 1; transform: none; transition-delay: calc(var(--i, 8) * 35ms + 80ms); }
.k-sheet__quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); gap: 8px; width: 100%; }
.k-sheet__q {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 60px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .25s, border-color .25s, transform .2s var(--ease);
}
.k-sheet__q:hover, .k-sheet__q:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.k-sheet__q:active { transform: scale(.97); }
.k-sheet__q > i { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--ink); color: var(--bg); }
.k-sheet__q > i svg { width: 18px; height: 18px; }
.k-sheet__q > span { display: grid; gap: 1px; min-width: 0; font-size: calc(14px * var(--type, 1)); font-weight: 500; letter-spacing: -0.01em; }
.k-sheet__q > span small { font-size: calc(11.5px * var(--type, 1)); font-weight: 400; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-sheet__q .k-nav__cart-count { position: absolute; top: -4px; right: -4px; }
.k-sheet__q.is-hidden { display: none !important; }
.k-sheet__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
html.is-sheet-open .k-sky__title { opacity: 0 !important; visibility: hidden; }
@media (max-width: 760px) {
  .k-sheet {
    justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(max(10px, env(safe-area-inset-top)) + 70px) 20px calc(var(--tabbar-h) + 18px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
    transform: translateY(18px); transition: opacity .4s var(--ease), transform .55s cubic-bezier(.2, .9, .25, 1), visibility 0s linear .45s;
  }
  .k-sheet.is-open { transform: none; transition: opacity .4s var(--ease), transform .55s cubic-bezier(.2, .9, .25, 1); }
  .k-sheet__top { padding-bottom: 10px; }
  .k-sheet__top .k-eyebrow { font-size: 10px; }
  .k-sheet__clock { font-size: 20px; }
  .k-sheet__links a { font-size: calc(clamp(24px, 7vw, 30px) * var(--type, 1)); padding: 9px 0; letter-spacing: -0.025em; }
  .k-sheet__links a span { font-size: 10px; }
  .k-sheet__foot { margin-top: 18px; }
  .k-sheet__pills { flex-wrap: nowrap; overflow-x: auto; margin: 14px -20px 0; padding: 0 20px 2px; scrollbar-width: none; }
  .k-sheet__pills::-webkit-scrollbar { display: none; }
  .k-sheet__pills .k-btn { flex: none; }
}
/* Desktop keeps the big editorial index; icons and notes are for the phone grid */
.k-sheet__links a > i, .k-sheet__links a > small { display: none; }
.k-sheet__links a > b { font-weight: inherit; }

/* Phones: one screen, nothing under the tab bar. The destinations sit in a
 * two-column grid of tiles, the quick actions in one swipeable row, and the
 * tab bar folds away to a single close button while the menu is open. */
@media (max-width: 760px) {
  .k-sheet { background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .k-sheet__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; columns: auto; }
  .k-sheet__links li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .k-sheet__links a {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
    min-height: 62px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 18px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    font-size: calc(16px * var(--type, 1)); letter-spacing: -0.01em; line-height: 1.15;
    -webkit-tap-highlight-color: transparent;
  }
  .k-sheet__links a:hover { font-family: inherit; font-style: normal; letter-spacing: -0.01em; }
  .k-sheet__links a:active { transform: scale(.97); }
  .k-sheet__links a > i { display: grid; place-items: center; grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line-2); }
  .k-sheet__links a > i svg { width: 18px; height: 18px; }
  .k-sheet__links a > b { font-weight: 500; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .k-sheet__links a > small { display: block; align-self: start; font-size: calc(11px * var(--type, 1)); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .k-sheet__links a > span { display: none; }
  .k-sheet__links a[aria-current='page'] { font-family: inherit; font-style: normal; background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .k-sheet__links a[aria-current='page'] > i { border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
  .k-sheet__links a[aria-current='page'] > small { color: color-mix(in srgb, var(--bg) 65%, transparent); }

  .k-sheet__quick { display: flex; gap: 8px; overflow-x: auto; width: calc(100% + 40px); margin: 0 -20px; padding: 0 20px 2px; scrollbar-width: none; }
  .k-sheet__quick::-webkit-scrollbar { display: none; }
  .k-sheet__q { flex: none; grid-template-columns: 30px auto; gap: 8px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 999px; }
  .k-sheet__q > i { width: 30px; height: 30px; border-radius: 50%; }
  .k-sheet__q > i svg { width: 16px; height: 16px; }
  .k-sheet__q > span { font-size: calc(13px * var(--type, 1)); }
  .k-sheet__q > span small { font-size: calc(10.5px * var(--type, 1)); }

  .k-tabbar__pill { transition: opacity .3s var(--ease), transform .45s var(--ease); }
  html.is-sheet-open .k-tabbar__pill { opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .k-sheet__links a { min-height: 54px; padding: 8px 10px; }
}

/* --------------------------------------------------------- check-in */
.k-ob { position: fixed; inset: 0; z-index: 320; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
.k-ob.is-open { visibility: visible; pointer-events: auto; transition: none; }
.k-ob__scrim { position: absolute; inset: 0; background: rgba(6,7,10,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .45s var(--ease); }
.k-ob.is-open .k-ob__scrim { opacity: 1; }
.k-ob__panel {
  position: absolute; left: 50%; top: 50%; width: min(620px, calc(100% - 32px)); max-height: min(780px, calc(100% - 48px));
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong); box-shadow: var(--elev-2), var(--hairline);
  translate: -50% -46%; opacity: 0; transition: translate .6s cubic-bezier(.2, .9, .25, 1), opacity .4s var(--ease);
}
html:not([data-theme='dark']) .k-ob__panel { background: rgba(251,250,248,.96); }
.k-ob.is-open .k-ob__panel { translate: -50% -50%; opacity: 1; }
.k-ob__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding: 18px 20px 12px; }
.k-ob__step { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.k-ob__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.k-ob__x svg { width: 16px; height: 16px; }
.k-ob__route { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.k-ob__route li { height: 3px; border-radius: 3px; background: var(--line-2); transition: background .4s var(--ease); }
.k-ob__route li.is-done { background: var(--ink-3); }
.k-ob__route li.is-now { background: var(--signal); }
.k-ob__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; }
.k-ob__title { margin: 6px 0 0; font-size: calc(clamp(28px, 5vw, 40px) * var(--type, 1)); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; outline: none; animation: k-ob-in .55s var(--ease) both; }
.k-ob__sub { margin: 10px 0 18px; max-width: 48ch; color: var(--ink-2); font-size: calc(15px * var(--type, 1)); animation: k-ob-in .55s .05s var(--ease) both; }
.k-ob__body > :nth-child(n+3) { animation: k-ob-in .55s .1s var(--ease) both; }
@keyframes k-ob-in { from { opacity: 0; transform: translateY(10px); } }
.k-ob__field { display: grid; gap: 8px; margin-bottom: 14px; }
.k-ob__field span { font-size: 13px; color: var(--ink-2); }
.k-ob__field input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); font: inherit; font-size: 17px; }
.k-ob__field input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); }
.k-ob__fine { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.k-ob__label { margin: 18px 0 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.k-ob__label small { letter-spacing: .04em; text-transform: none; font-family: var(--f-sans); }
.k-ob__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.k-ob__tile { position: relative; display: grid; gap: 3px; text-align: left; padding: 14px 40px 14px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.k-ob__tile b { font-weight: 500; font-size: 15.5px; }
.k-ob__tile small { font-size: 12px; color: var(--ink-3); }
.k-ob__tile i { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .2s, border-color .2s; }
.k-ob__tile[aria-pressed='true'] { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.k-ob__tile[aria-pressed='true'] i { border-color: var(--signal); background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.k-ob__tile:active, .k-ob__chip:active, .k-ob__sw:active { transform: scale(.97); }
.k-ob__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-ob__chip { height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.k-ob__chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-ob__segs { display: flex; flex-wrap: wrap; gap: 6px; }
.k-ob__seg { min-width: 48px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.k-ob__segs--sizes .k-ob__seg { font-family: var(--f-mono); font-size: 13px; padding: 0 10px; }
.k-ob__seg[aria-checked='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-ob__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.k-ob__sw { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.k-ob__sw i { width: 40px; height: 40px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.k-ob__sw[aria-pressed='true'] i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 0 0 2px var(--bg), 0 0 0 4px var(--signal); }
.k-ob__sw[aria-pressed='true'] span { color: var(--ink); }
.k-ob__toggles { display: grid; gap: 8px; }
.k-ob__toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.k-ob__toggle b { display: block; font-weight: 500; font-size: 15px; }
.k-ob__toggle small { display: block; font-size: 12.5px; color: var(--ink-3); }
.k-ob__toggle i { flex: none; position: relative; width: 46px; height: 28px; border-radius: 99px; background: var(--line-2); transition: background .25s; }
.k-ob__toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.k-ob__toggle[aria-pressed='true'] i { background: var(--signal); }
.k-ob__toggle[aria-pressed='true'] i::after { transform: translateX(18px); }
.k-ob__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.k-ob__right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.k-ob__skip { height: 40px; padding: 0 14px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; cursor: pointer; }
.k-ob__foot .k-btn--solid { min-width: 128px; justify-content: center; }
/* the boarding pass */
.k-ob__pass { position: relative; display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: linear-gradient(160deg, #15171c, #0b0c0f); color: #f4f4f5; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); animation: k-ob-pass .8s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes k-ob-pass { from { opacity: 0; transform: translateY(24px) rotate(-1.5deg) scale(.97); } }
.k-ob__pass::before, .k-ob__pass::after { content: ''; position: absolute; top: 58%; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); }
html:not([data-theme='dark']) .k-ob__pass::before, html:not([data-theme='dark']) .k-ob__pass::after { background: rgb(251,250,248); }
.k-ob__pass::before { left: -11px; } .k-ob__pass::after { right: -11px; }
.k-ob__pass-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.k-ob__pass-name { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.k-ob__pass-name small, .k-ob__pass-grid dt { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.k-ob__pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.k-ob__pass-route b { display: block; font-family: var(--f-mono); font-size: 34px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.k-ob__pass-route small { display: block; margin-top: 4px; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(255,255,255,.65); }
.k-ob__pass-route > div:last-child { text-align: right; }
.k-ob__pass-route > span { justify-self: center; color: var(--signal); font-size: 20px; position: relative; width: 100%; text-align: center; }
.k-ob__pass-route > span::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(255,255,255,.3); z-index: 0; }
.k-ob__pass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.2); }
.k-ob__pass-grid dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ob__pass-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.k-ob__pass-tags span { padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 11.5px; }
.k-ob__pass-code { height: 38px; border-radius: 4px; background: repeating-linear-gradient(90deg, #f4f4f5 0 2px, transparent 2px 4px, #f4f4f5 4px 5px, transparent 5px 9px, #f4f4f5 9px 12px, transparent 12px 14px); opacity: .85; }
html.is-onboard-open, html.is-onboard-open body { overflow: hidden; }
@media (max-width: 640px) {
  .k-ob__panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: calc(100% - max(16px, env(safe-area-inset-top))); border-radius: 28px 28px 0 0; translate: 0 100%; }
  .k-ob.is-open .k-ob__panel { translate: 0 0; }
  .k-ob__tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .k-ob__tile { padding: 12px 34px 12px 12px; }
  .k-ob__tile i { right: 10px; top: 10px; }
  .k-ob__swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .k-ob__pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* check-in cards in the account sheet and page */
.k-checkin { display: grid; gap: 8px; margin-top: 16px; padding: 16px; border-radius: 18px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.k-checkin--new { border-style: dashed; }
.k-checkin__eyebrow { margin: 0; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.k-checkin__line { margin: 0; font-size: 15px; }
.k-checkin .k-btn { justify-self: start; }
.k-checkin--page { max-width: 520px; margin-top: 28px; }
.k-acct-dl--taste dd { display: flex; flex-wrap: wrap; gap: 5px; }
.k-acct-tag { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: 12.5px; }
.k-acct-taste .k-btn { margin-top: 12px; }
.k-atlas-checkin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 18px; border: 1px dashed var(--line-2); }
.k-atlas-checkin p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* The local time under ꓘIOSK, in place of a subheadline: heavy, tight and
 * white, with a soft shadow so it holds against any sky or cloud */
.k-sky__time { top: 66%; font-family: 'Inter Tight', var(--f-sans); font-style: normal; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 28px rgba(0,0,0,.35) !important; }
.k-sky[data-phase='noon'] .k-sky__time, .k-sky[data-phase='evening'] .k-sky__time { text-shadow: 0 1px 3px rgba(10,25,50,.45), 0 8px 34px rgba(10,25,50,.45) !important; }
.k-sky__time time { display: inline-flex; align-items: baseline; gap: .04em; font-variant-numeric: tabular-nums; }
.k-sky__time b { font-weight: 800; font-size: calc(clamp(44px, 6.4vw, 92px) * var(--type, 1)); letter-spacing: -0.045em; line-height: 1; }
.k-sky__time small { font-weight: 700; font-size: calc(clamp(15px, 1.7vw, 24px) * var(--type, 1)); letter-spacing: -0.01em; }
.k-sky__time small:empty { display: none; }
.k-ob__x { grid-row: 1; grid-column: 2; }
/* ==========================================================================
   Elysium terminal — luxury shop + Lost & Found
   White/black gradient frosted glass, sharp hairlines, thin+bold type.
   Scoped to shop pages; airport theme kept as accents (gates, flights).
   ========================================================================== */
:root {
  --lux-glass: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.42));
  --lux-glass-dark: linear-gradient(160deg, rgba(28,29,33,.78), rgba(14,15,18,.52));
  --lux-line: rgba(15, 15, 16, 0.12);
  --lux-line-hi: rgba(255, 255, 255, 0.72);
  --lux-ink-thin: 300;
  --lux-ink-bold: 600;
  --lux-track: 0.14em;
}
html[data-theme='dark'] {
  --lux-glass: var(--lux-glass-dark);
  --lux-line: rgba(255, 255, 255, 0.12);
  --lux-line-hi: rgba(255, 255, 255, 0.1);
}

body[data-page='vault'] .k-term__title,
body[data-page='store'] .k-term__title {
  font-weight: var(--lux-ink-thin);
  letter-spacing: -0.055em;
}
.k-lux-panel,
.k-cmd,
.k-filter,
.k-finds,
.k-qa,
.k-mapstyle {
  border: 1px solid var(--lux-line);
  background: var(--lux-glass);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--lux-line-hi), 0 0 0 1px var(--frost-edge), var(--elev-1);
  border-radius: var(--r-lg);
}

/* Compact bento hero */
body[data-page='vault'] .k-term__hero { padding: calc(var(--nav-h) + 20px) 0 clamp(20px, 3vw, 36px); }
body[data-page='vault'] .k-term__title { font-size: calc(clamp(40px, 6.4vw, 88px) * var(--type, 1)); }
body[data-page='vault'] .k-board__rows { max-height: 11.5rem; }
.k-term__bento { display: grid; gap: clamp(12px, 1.8vw, 20px); }
.k-term__bento .k-term__life { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--lux-line); min-height: 220px; aspect-ratio: 4 / 5; }
.k-term__bento .k-term__life img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1080px) {
  .k-term__bento {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: 'sign board' 'life board';
    align-items: stretch;
  }
  .k-term__bento .k-term__sign { grid-area: sign; align-self: end; }
  .k-term__bento .k-term__life { grid-area: life; min-height: 280px; aspect-ratio: auto; }
  .k-term__bento .k-board { grid-area: board; align-self: stretch; }
}

/* Sticky command bar */
.k-cmd {
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 10px 12px; margin: 0 0 clamp(16px, 2vw, 24px);
  border-radius: 28px;
}
.k-cmd__search { flex: 1 1 180px; min-width: 0; }
.k-cmd__search .k-term__field { height: 44px; background: transparent; padding: 0 8px; }
.k-cmd__gates { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px; }
.k-cmd__gates::-webkit-scrollbar { display: none; }
.k-cmd__meta { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.k-cmd__count { font-family: var(--f-mono); font-size: 11px; letter-spacing: var(--lux-track); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.k-cmd__filter { position: relative; }
.k-cmd__filter .k-btn { min-height: 44px; min-width: 44px; }
.k-cmd__gates .k-gate { min-height: 44px; }
.k-cmd__badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bone); color: var(--bone-ink);
  font-size: 10px; font-weight: 600; display: grid; place-items: center;
}
.k-cmd__filter[data-count='0'] .k-cmd__badge { display: none; }

/* Filters: desktop rail + mobile sheet */
.k-shop { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 1000px) {
  .k-shop { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .k-filter { position: sticky; top: calc(var(--nav-h) + 72px); padding: 18px 16px; max-height: calc(100svh - var(--nav-h) - 96px); overflow-y: auto; visibility: visible !important; pointer-events: auto !important; }
  .k-filter__panel { display: contents; }
  .k-filter__scrim, .k-filter__grab, .k-filter__apply { display: none; }
}
.k-filter__title { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: var(--lux-track); text-transform: uppercase; }
.k-filter__group { margin: 0 0 18px; padding: 0; border: 0; }
.k-filter__group legend { font-size: 11px; font-weight: 600; letter-spacing: var(--lux-track); text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; padding: 0; }
.k-filter__opt { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.k-filter__opt input { accent-color: var(--ink); width: 16px; height: 16px; }
.k-filter__opt small { margin-left: auto; color: var(--ink-3); font-family: var(--f-mono); font-size: 11px; }
.k-filter__range { width: 100%; display: grid; gap: 8px; }
.k-filter__range input[type='range'] { width: 100%; accent-color: var(--ink); }
@media (max-width: 999px) {
  .k-filter {
    position: fixed; inset: 0; z-index: 280; visibility: hidden; pointer-events: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0;
  }
  .k-filter.is-open { visibility: visible; pointer-events: auto; }
  .k-filter__scrim { position: absolute; inset: 0; background: rgba(8,8,9,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .k-filter__panel {
    position: relative; max-height: 78svh; overflow-y: auto; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0; border: 1px solid var(--lux-line); background: var(--lux-glass);
    -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
    transform: translateY(24px); transition: transform .4s var(--ease);
  }
  .k-filter.is-open .k-filter__panel { transform: none; }
  .k-filter__grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--ink-4); margin: 4px auto 12px; }
  .k-filter__apply { display: block; width: 100%; margin-top: 12px; }
}

/* Mobile: a compact command bar (search / gates / count + filter + sort),
   not sticky, so it never sits over the pieces */
@media (max-width: 719px) {
  .k-cmd {
    position: relative; top: auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    padding: 8px; border-radius: 22px;
  }
  .k-cmd__search .k-term__field { height: 40px; padding: 0 6px; }
  .k-cmd__search kbd { display: none; }
  .k-cmd__gates {
    margin: 0 -8px; padding: 2px 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent);
  }
  .k-cmd__gates .k-gate { min-height: 40px; padding: 4px 12px 4px 4px; gap: 8px; border-radius: 12px; }
  .k-cmd__gates .k-gate b { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .k-cmd__gates .k-gate span { font-size: 13px; }
  .k-cmd__meta { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; margin: 0; padding-top: 8px; border-top: 1px solid var(--lux-line); }
  .k-cmd__count { padding-left: 6px; font-size: 10.5px; }
  .k-cmd__filter .k-btn { min-height: 40px; padding: 0 16px; }
  .k-cmd__meta .k-select { min-height: 40px; width: 100%; min-width: 0; }
  .k-term__toolbar { align-items: center; }
  .k-term__toolbar .k-h2 { font-size: calc(30px * var(--type, 1)); }
}

/* Mobile filter sheet: shorter, scrolls on its own (the page stays put),
   options as wrapping chips, Apply always in reach */
@media (max-width: 999px) {
  html.is-filter-open, html.is-filter-open body { overflow: hidden; }
  .k-filter__scrim { display: block; }
  .k-filter__scrim[hidden] { display: none; }
  .k-filter__panel {
    max-height: min(68svh, 560px); padding-bottom: 0;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
  }
  .k-filter__panel > [data-mount='filter-body'] { flex: 1 1 auto; }
  .k-filter__title { margin-bottom: 10px; }
  .k-filter__group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
  .k-filter__group legend { width: 100%; margin-bottom: 8px; }
  .k-filter__opt {
    position: relative; min-height: 36px; padding: 0 14px; gap: 6px;
    border: 1px solid var(--line-2); border-radius: 999px; background: var(--glass);
    font-size: 13px; transition: background 0.2s, color 0.2s;
  }
  .k-filter__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .k-filter__opt:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .k-filter__opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .k-filter__opt small { margin-left: 2px; color: inherit; opacity: 0.6; }
  .k-filter__range { padding: 0 2px; }
  .k-filter__apply {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); flex: none; z-index: 2;
    width: 100%; min-height: 50px; margin: 6px 0 calc(12px + env(safe-area-inset-bottom));
    border-radius: 999px; box-shadow: 0 -10px 28px 8px var(--lux-glass, rgba(255, 255, 255, 0.8));
  }
}

/* Clear carousels (shop): no panel behind the drum, its sides fade out */
.k-wheel--clear { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; color: var(--ink); padding: 0; }
.k-wheel--clear .k-wheel__ambient { display: none; }
.k-wheel--clear .k-wheel__stage {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.k-wheel--clear .k-wheel__card { box-shadow: 0 24px 40px -26px rgba(15, 15, 16, 0.55); -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255, 255, 255, 0.18)); }
.k-wheel--clear .k-wheel__card::after { background: var(--bg); opacity: calc(var(--shade, 0) * 0.7); }
.k-wheel--clear .k-wheel__step { background: var(--glass-2, var(--glass)); }

/* Shop hero: collections and promotions on the drum */
.k-term__bento .k-term__carousel { border: 0; border-radius: 0; overflow: visible; aspect-ratio: auto; min-height: 0; }
.k-herowheel { gap: 10px; }
.k-herowheel__stage { --card: clamp(180px, 22vw, 250px); height: calc(var(--card) * 1.55); }
.k-herowheel__stage .k-wheel__drum { inset: 0 0 calc(var(--card) * 0.2); }
.k-herowheel__card { height: calc(var(--card) * 1.3); background: var(--bg-3, #18181b); }
.k-herowheel__card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 9, 0.78) 100%);
}
.k-herowheel__tag { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: grid; gap: 4px; text-align: left; color: #fff; pointer-events: none; }
.k-herowheel__tag small { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.k-herowheel__tag b { font-weight: 450; font-size: calc(clamp(20px, 2.2vw, 26px) * var(--type, 1)); letter-spacing: -0.02em; line-height: 1.05; }
.k-herowheel__card.is-promo .k-herowheel__tag small { color: var(--signal); opacity: 1; }
.k-herowheel__now { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; max-width: 560px; width: 100%; margin: 0 auto; }
.k-herowheel__info { display: grid; gap: 4px; justify-items: center; text-align: center; min-height: 52px; align-content: center; }
.k-herowheel__note { color: var(--ink-2); font-size: calc(15px * var(--type, 1)); }
.k-herowheel__cta { display: flex; justify-content: center; }

/* Luxury product cards */
.k-term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .k-term-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .k-term-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.k-tcard { border-radius: var(--r-xl); }
.k-tcard__media { background: transparent; aspect-ratio: 4 / 5; }
.k-tcard__flat { background: transparent; }
.k-tcard__flat:has(.k-mockup--sketch) { background: transparent; }
.k-tcard__wish, .k-tcard__qa {
  position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--lux-line); background: var(--lux-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0;
}
.k-tcard__wish { top: 10px; right: 10px; }
.k-tcard__wish[aria-pressed='true'] { color: #e11; }
.k-tcard__wish svg, .k-tcard__qa svg { width: 16px; height: 16px; }
.k-tcard__qa { bottom: 10px; right: 10px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--ease); }
.k-tcard:hover .k-tcard__qa, .k-tcard:focus-within .k-tcard__qa { opacity: 1; transform: none; }
@media (hover: none) { .k-tcard__qa { opacity: 1; transform: none; } }
.k-tcard__pass { padding: 14px 14px 16px; }
.k-tcard__title { font-weight: var(--lux-ink-bold); letter-spacing: -0.02em; }
.k-tcard__fare {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--bone); color: var(--bone-ink);
  font-weight: 600; font-size: 13px; letter-spacing: -0.01em;
}
.k-tcard__more { display: block; width: 100%; margin-top: 18px; }
.k-qa {
  position: absolute; z-index: 5; right: 10px; bottom: 56px; min-width: 168px; padding: 10px;
  display: grid; gap: 6px;
}
.k-qa[hidden] { display: none; }
.k-qa p { margin: 0 0 4px; font-size: 11px; letter-spacing: var(--lux-track); text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.k-qa__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.k-qa__sizes button {
  min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 12px; cursor: pointer;
}
.k-qa__sizes button:hover, .k-qa__sizes button[aria-pressed='true'] { background: var(--bone); color: var(--bone-ink); border-color: var(--bone); }

/* Schematics: no sheet backgrounds; garment paper matches the surface */
.k-car__slide.is-sketch { background: transparent; padding-bottom: 0; }
.k-tcard__media { background: transparent; }
.k-mockup--sketch { --sk-paper: var(--bg); }
html[data-theme='dark'] .k-mockup--sketch { --sk-paper: var(--bg); --sk-ink: #ecebe6; }
html:not([data-theme='dark']) .k-mockup--sketch { --sk-ink: #111111; }

/* PDP luxury */
.k-pdp__title { font-weight: var(--lux-ink-thin); letter-spacing: -0.035em; }
.k-pdp__pricebar {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 10px 10px 10px 18px; border-radius: var(--r-pill); background: var(--bone); color: var(--bone-ink);
}
.k-pdp__pricebar b { font-size: calc(22px * var(--type, 1)); font-weight: 600; letter-spacing: -0.02em; margin-right: auto; }
.k-pdp__pricebar .k-btn { background: #fff; color: #0f0f10; border-color: #fff; border-radius: var(--r-pill); }
.k-pdp__sticky {
  display: none; position: sticky; bottom: 0; z-index: 4; margin: 0 -4px;
  padding: 12px 4px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--sheet) 28%);
}
.k-pdp__sticky-inner {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px;
  border-radius: var(--r-pill); background: var(--bone); color: var(--bone-ink);
}
.k-pdp__sticky-inner b { margin-right: auto; font-size: 18px; }
.k-pdp__sticky .k-btn { border-radius: var(--r-pill); background: #fff; color: #0f0f10; border-color: #fff; }
.k-pdp__sticky .k-pdp__wish { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
@media (max-width: 820px) {
  .k-pdp__sticky { display: block; }
  .k-pdp__cta { display: none; }
}
.k-pdp__collect { display: grid; gap: 10px; margin: 18px 0; padding: 16px; border-radius: var(--r-md); border: 1px dashed var(--line-2); }
.k-pdp__collect ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.k-pdp__collect li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 14px; }
.k-pdp__collect b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bone); color: var(--bone-ink); font-size: 12px; }
.k-pdp__related { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.k-pdp__related button { flex: 0 0 140px; scroll-snap-align: start; }

/* Color chips with names */
.k-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.k-swatch i { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px transparent; }
.k-swatch[aria-pressed='true'] i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--ink); }
.k-swatch[aria-pressed='true'] { color: var(--ink); font-weight: 600; }

/* Cart luxury polish */
.k-cart__line { align-items: center; }
.k-cart__foot .k-btn { width: 100%; border-radius: var(--r-pill); min-height: 52px; }
.k-cart__ship { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }

/* Lost & Found: finds panel + map styles */
.k-hud__ctrl { display: flex; flex-direction: column; gap: 6px; }
.k-hud__ctrl-row { display: flex; flex-direction: column; gap: 6px; }
.k-mapstyle { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: var(--r-md); max-width: 200px; }
.k-mapstyle button {
  flex: 1 1 42%; min-height: 44px; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: inherit; font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; display: grid; gap: 4px; justify-items: center;
}
.k-mapstyle button[aria-pressed='true'] { border-color: var(--signal); background: rgba(255,255,255,.08); }
.k-mapstyle__sw { width: 100%; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); }
.k-mapstyle__sw--night { background: linear-gradient(90deg, #06070a, #1b2030); }
.k-mapstyle__sw--day { background: linear-gradient(90deg, #f4f1ea, #c9c4b8); }
.k-mapstyle__sw--satellite { background: linear-gradient(90deg, #1a3a2a, #6b8f5a 40%, #3d5a2c); }
.k-mapstyle__sw--blueprint { background: repeating-linear-gradient(90deg, #111 0 1px, #fafafa 1px 6px); }
.k-mapstyle__sw--terrain { background: linear-gradient(90deg, #0d1b2a, #3d5a2c, #c96a3c); }
.k-hud__proj {
  min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.k-hud__tele-toggle { display: none; }
@media (max-width: 760px) {
  .k-hud__tele { max-height: 0; overflow: hidden; opacity: 0; padding: 0; border: 0; transition: max-height .35s, opacity .3s; }
  .k-hud__tele.is-open { max-height: 280px; opacity: 1; padding: 10px; border: 1px solid rgba(255,255,255,.12); }
  .k-hud__tele-toggle {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(10,10,12,.55); color: #fff; font-weight: 600;
  }
  .k-mapstyle { max-width: none; position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h, 80px) + 120px); z-index: 6; }
  .k-mapstyle:not(.is-open) { display: none; }
}

.k-finds {
  position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 10px;
  background: var(--lux-glass-dark); color: #f4f4f5;
  border-color: rgba(255,255,255,.12);
}
.k-finds__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 2px; }
.k-finds__title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: var(--lux-track); text-transform: uppercase; }
.k-finds__sort { margin-left: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; }
.k-finds__chips { display: flex; gap: 6px; }
.k-finds__list { display: grid; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.k-find {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: inherit; text-align: left; cursor: pointer; width: 100%; font: inherit;
}
.k-find.is-on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.k-find img, .k-find__logo { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.08); display: grid; place-items: center; font-weight: 600; }
.k-find b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.k-find small { display: block; margin-top: 3px; font-size: 12px; color: rgba(244,244,245,.65); }
.k-find__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; grid-column: 2; }
.k-find__acts .k-btn { min-height: 34px; padding: 0 12px; font-size: 12px; border-color: rgba(255,255,255,.2); color: #fff; }
.k-find__acts .k-btn--solid { background: #fff; color: #0b0b0c; border-color: #fff; }
@media (min-width: 900px) {
  .k-finds {
    top: calc(var(--nav-h) + 16px); right: 16px; bottom: 16px; width: min(360px, 34vw);
    padding: 14px; border-radius: 24px;
  }
  .k-hud__bottom .k-hud__drops { display: none; }
}
@media (max-width: 899px) {
  .k-finds {
    left: 8px; right: 8px; bottom: 0; max-height: 72svh;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0; border-bottom: 0;
    transform: translateY(calc(100% - 88px)); transition: transform .4s var(--ease);
  }
  .k-finds[data-snap='half'] { transform: translateY(42%); }
  .k-finds[data-snap='full'] { transform: translateY(0); }
  .k-finds__grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 2px auto 8px; }
}
@media (min-width: 900px) { .k-finds__grab { display: none; } }

.k-hunt-fallback .k-finds-static { display: grid; gap: 12px; padding: 20px var(--gutter); }