/* ═══════════════════════════════════════════════════════════════════
   ARKHIVE v2 — design system
   ───────────────────────────────────────────────────────────────────
   A separate token layer from assets/arkhive.css. The v1 system is
   sharp-cornered (--ark-r*: 0) and Syne-based; v2 is rounded and set in
   Inter. Keeping them apart means the 20+ pages still on v1 are
   untouched while v2 is evaluated.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground ──────────────────────────────────────────────────── */
  --v2-bg:        #08090b;
  --v2-bg-deep:   #050608;
  --v2-panel:     rgba(255, 255, 255, 0.035);
  --v2-panel-2:   rgba(255, 255, 255, 0.055);
  --v2-panel-sol: #101114;

  /* ── Ink. Two-tone headline is the signature: line 1 near-white,
        line 2 dropped to -mid. Everything else hangs off these. ─── */
  --v2-text:      #f3f4f6;
  --v2-mid:       #8e9096;
  --v2-soft:      #a1a3a9;
  --v2-faint:     #76787e;
  /* #6b6d73 measured 3.85:1 against the #08090b ground — below the 4.5:1
     WCAG AA minimum for body text. Lifted to the smallest value on the
     same hue that clears it (4.51:1), so the step stays the quietest in
     the ramp: it is still well below --v2-mid at 6.24:1. */

  /* ── Lines ───────────────────────────────────────────────────── */
  --v2-line:      rgba(255, 255, 255, 0.09);
  --v2-line-2:    rgba(255, 255, 255, 0.14);

  /* ── Accent: the map's active-marker blue. Used sparingly —
        live/selected state only, never decoration. ──────────────── */
  --v2-accent:    #4f83f1;
  --v2-accent-dim: rgba(79, 131, 241, 0.18);

  /* ── Type ────────────────────────────────────────────────────── */
  --v2-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Display face. Instrument Sans is a tight grotesque with flat-cut
     terminals — the register that reads as engineered rather than
     friendly. Headings, nav and the brand only: its `l` and `I` are
     near-identical strokes, which is fine in a headline and bad in an
     invite code, so body copy and every form control stay on Inter. */
  --v2-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── Radii. The v1 system is square; v2 is round. ────────────── */
  --v2-r-sm:   8px;
  --v2-r:      12px;
  --v2-r-md:   16px;
  --v2-r-lg:   22px;
  --v2-pill:   999px;

  --v2-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: var(--v2-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
body { overflow-x: clip; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Inter is the only typeface in v2 — there is no monospace and no second
   family anywhere in the system. Two things leak other stacks in if left
   alone, so they are pinned here rather than per-component:
     1. Form controls do not inherit font-family by default, so an
        icon-only <button> silently computes to Arial. Invisible while it
        holds only an SVG, wrong the moment it holds text.
     2. mapbox-gl.css ships its own Helvetica/Arial stack and applies it
        to every control, popup and attribution it renders. */
button, input, select, textarea, optgroup { font-family: inherit; }

.mapboxgl-map,
.mapboxgl-ctrl,
.mapboxgl-ctrl *,
.mapboxgl-popup,
.mapboxgl-popup * { font-family: var(--v2-sans) !important; }

/* Respect the OS setting — the globe spin and every transition below
   is decorative, so none of it should fight a vestibular preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keyboard focus must stay visible on a dark ground. */
:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Top bar
   ═══════════════════════════════════════════════════════════════════ */
/* Pure #000, not the page's #08090b and not the old translucent
   gradient. Two reasons, and the first is the mark: arkhive-logo.webm
   has black baked into it — there is no alpha channel — so it only
   disappears into its background on a bar that is exactly black. On the
   old gradient the loop sat in a faintly visible square. The second is
   that the bar now reads as a fixed edge above the globe rather than a
   haze over it, which is what a black chrome buys you. */
.v2-top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(16px, 3vw, 34px);
  background: #000;
  /* #000 on the page's #08090b is a two-value difference — visible, but
     not a line. The hairline is what actually separates them. */
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.v2-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.v2-brand svg { width: 30px; height: 30px; display: block; }
/* The rotating mark. object-fit:contain rather than cover so the loop is
   never cropped, and pointer-events:none so the whole brand stays one
   link target instead of the video swallowing the click. */
.v2-brand-video {
  display: block;
  width: 42px; height: 42px;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  flex: 0 0 auto;
}
.v2-brand-poster { display: none; }
/* A logo that never stops turning is exactly the kind of perpetual
   motion 2.3.3 is about. Swap in the poster frame — same mark, still. */
@media (prefers-reduced-motion: reduce) {
  .v2-brand-video { display: none; }
  .v2-brand-poster { display: block; width: 42px; height: 42px; flex: 0 0 auto; }
}
.v2-brand span {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--v2-text);
  white-space: nowrap;
}

.v2-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.v2-nav a {
  font-size: 14.5px; font-weight: 400;
  color: var(--v2-mid);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s var(--v2-ease);
  white-space: nowrap;
}
.v2-nav a:hover { color: var(--v2-text); }
.v2-nav a.is-active { color: var(--v2-text); }
.v2-nav a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1.5px; background: var(--v2-text); border-radius: 2px;
}

.v2-top-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Pill buttons ───────────────────────────────────────────────────── */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 20px;
  border-radius: var(--v2-pill);
  border: 1px solid var(--v2-line-2);
  background: var(--v2-panel);
  color: var(--v2-text);
  font-family: inherit; font-size: 14.5px; font-weight: 450;
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--v2-ease), border-color 0.2s var(--v2-ease), transform 0.2s var(--v2-ease);
}
.v2-btn:hover { background: var(--v2-panel-2); border-color: rgba(255,255,255,0.22); }
.v2-btn:active { transform: translateY(1px); }

.v2-btn-light {
  background: #e9eaee; border-color: #e9eaee; color: #0a0b0d; font-weight: 500;
}
.v2-btn-light:hover { background: #fff; border-color: #fff; }

.v2-btn-icon {
  width: 42px; height: 42px; padding: 0; border-radius: var(--v2-pill);
}

/* ═══════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════════ */
.v2-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center;
  padding: clamp(120px, 15vh, 170px) 20px 0;
  overflow: hidden;
  isolation: isolate;
}

/* Fills the hero. The planet is positioned by Mapbox projection padding
   (see arkhive-v2-globe.js), not by CSS offsets: raising zoom to enlarge
   the sphere also flattens it, because the camera moves closer, so the
   sphere is kept at a low zoom and its centre is pushed below the fold
   instead. That yields a large, gently-curved lit arc. */
.v2-globe {
  /* Height is set by the globe module, which grows the canvas past the
     hero so the sphere's centre can sit below the fold. inset:0 would
     fight that, so only the top three edges are pinned; .v2-hero's
     overflow:hidden clips the overhang. */
  position: absolute; z-index: -3; top: 0; left: 0; right: 0; height: 100%;
  opacity: 0;
  transition: opacity 1.8s var(--v2-ease);
  pointer-events: none;
}
.v2-globe.is-on { opacity: 1; }

/* Starfield. Sits ABOVE the globe canvas — Mapbox paints its space
   colour opaquely, so a field behind it would never be seen. The module
   punches the sphere out of the field, so nothing lands on the planet. */
.v2-stars {
  position: absolute; z-index: -2; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: v2-stars-in 2.4s var(--v2-ease) 0.2s forwards;
}
@keyframes v2-stars-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .v2-stars { opacity: 1; animation: none; }
}

/* Soft ground shadow under the hero copy so it holds against the
   globe's bright rim at any viewport. */
.v2-hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(8,9,11,0.92) 0%, rgba(8,9,11,0.6) 45%, rgba(8,9,11,0) 75%);
  pointer-events: none;
}

.v2-eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.32em; text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--v2-faint);
  margin: 0 0 clamp(18px, 3vh, 26px);
}

/* Each line is its own block and never wraps — the two-line, two-tone
   split is the whole idea, so a mid-phrase wrap breaks it. 7.1vw is the
   size at which the longer line ("For travelling producers.") still fits
   the viewport, and the floor is low enough that 320px phones clear it
   too. Above ~1042px the cap takes over at 74px. */
.v2-h1 {
  margin: 0;
  font-family: var(--v2-display);
  font-size: clamp(24px, 7.1vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 400;
  text-align: center;
}
.v2-h1 .l1,
.v2-h1 .l2 { display: block; white-space: nowrap; }
.v2-h1 .l1 { color: var(--v2-text); }
.v2-h1 .l2 { color: var(--v2-mid); }

.v2-sub {
  margin: clamp(18px, 3vh, 26px) 0 0;
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--v2-soft);
  text-align: center;
  max-width: 46ch;
  text-wrap: balance;
}

.v2-hero-cta { margin-top: clamp(26px, 4.5vh, 40px); }
.v2-hero-cta .v2-btn {
  height: 52px; padding: 0 26px; font-size: 15.5px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 14px 44px rgba(0,0,0,0.55), 0 0 60px rgba(180,200,255,0.10);
}
.v2-hero-cta svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════
   Feature bar — 4-up, sits at the base of the hero
   ═══════════════════════════════════════════════════════════════════ */
.v2-features {
  width: min(1340px, calc(100% - clamp(24px, 5vw, 60px)));
  margin: auto auto clamp(20px, 4vh, 34px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-lg);
  background: rgba(16, 17, 20, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.v2-feature {
  display: flex; align-items: flex-start; gap: 15px;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 26px);
  border-right: 1px solid var(--v2-line);
}
.v2-feature:last-child { border-right: 0; }
.v2-feature-ico {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r);
  background: rgba(255,255,255,0.03);
  color: var(--v2-soft);
}
.v2-feature-ico svg { width: 19px; height: 19px; }
.v2-feature h3 {
  margin: 1px 0 5px;
  font-size: 15px; font-weight: 500; color: var(--v2-text);
  letter-spacing: -0.005em;
}
.v2-feature p {
  margin: 0;
  font-size: 13px; line-height: 1.48; color: var(--v2-mid);
  max-width: 30ch;
}

@media (max-width: 1000px) {
  .v2-features { grid-template-columns: repeat(2, 1fr); }
  .v2-feature:nth-child(2) { border-right: 0; }
  .v2-feature:nth-child(-n+2) { border-bottom: 1px solid var(--v2-line); }
}
@media (max-width: 560px) {
  .v2-features { grid-template-columns: 1fr; }
  .v2-feature { border-right: 0; }
  .v2-feature:not(:last-child) { border-bottom: 1px solid var(--v2-line); }
  .v2-feature p { max-width: none; }
}

/* ── Mobile nav: the centred links collapse; brand + CTA remain. ─── */
/* ═══════════════════════════════════════════════════════════════════
   Mobile navigation
   ───────────────────────────────────────────────────────────────────
   Below 900px the centred nav does not fit, but hiding it outright left
   Discover / Map / How it works / For Studios / Account with no route on
   a phone. The links move into a sheet behind a menu button.

   Toggled with display, not opacity/visibility: a transition on those
   two can leave the panel applied-but-invisible, which is exactly how
   the map's filter sheet failed earlier.
   ═══════════════════════════════════════════════════════════════════ */
.v2-menu-btn { display: none; }
.v2-menu { display: none; }

@media (max-width: 900px) {
  .v2-nav { display: none; }
  .v2-menu-btn { display: inline-flex; }

  .v2-menu {
    position: fixed; inset: 74px 12px auto 12px; z-index: 70;
    padding: 8px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: rgba(14, 15, 18, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  }
  .v2-menu.is-open {
    display: block;
    animation: v2-menu-in 0.2s var(--v2-ease);
  }
  @keyframes v2-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  .v2-menu a {
    display: flex; align-items: center;
    height: 48px; padding: 0 14px;
    border-radius: var(--v2-r);
    font-size: 16px; color: var(--v2-soft);
  }
  .v2-menu a + a { margin-top: 2px; }
  .v2-menu a:hover,
  .v2-menu a.is-active { background: rgba(255,255,255,0.06); color: var(--v2-text); }

  /* Scrim closes the sheet on an outside tap without trapping scroll. */
  .v2-menu-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,0.5); }
  .v2-menu-scrim[hidden] { display: none; }
}

/* The landing globe is decorative chrome, not a map product surface, so
   the Mapbox control logo is suppressed here. The v2 map page keeps its
   attribution visible (bottom-right), which is where it belongs. */
.v2-hero .mapboxgl-ctrl-logo,
.v2-hero .mapboxgl-ctrl-bottom-left,
.v2-hero .mapboxgl-ctrl-bottom-right { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Map page
   ═══════════════════════════════════════════════════════════════════ */
.v2-map-shell { position: fixed; inset: 0; overflow: hidden; }
.v2-map { position: absolute; inset: 0; }
.v2-map .mapboxgl-ctrl-bottom-left { display: none; }

/* Shared surface for every floating panel on the map. */
.v2-surface {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-lg);
  background: rgba(14, 15, 18, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}

/* ── Left rail ─────────────────────────────────────────────────── */
.v2-rail {
  position: absolute; z-index: 20;
  top: 92px; left: clamp(12px, 1.6vw, 24px);
  width: 316px;
  max-height: calc(100svh - 210px);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; overscroll-behavior: contain;
}

.v2-search { display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 12px;
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r);
  background: rgba(255,255,255,0.04);
}
.v2-search svg { width: 16px; height: 16px; color: var(--v2-faint); flex: 0 0 auto; }
.v2-search input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--v2-text); font-family: inherit; font-size: 14px;
}
.v2-search input::placeholder { color: var(--v2-faint); }
.v2-search button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--v2-faint); display: grid; place-items: center; }
.v2-search button:hover { color: var(--v2-text); }

/* Segmented control */
.v2-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: var(--v2-r); background: rgba(255,255,255,0.045); }
.v2-seg button {
  height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--v2-mid);
  font-family: inherit; font-size: 13.5px; font-weight: 450;
  transition: background 0.18s var(--v2-ease), color 0.18s var(--v2-ease);
}
.v2-seg button[aria-selected="true"] { background: rgba(255,255,255,0.10); color: var(--v2-text); }

.v2-rail-head { display: flex; align-items: baseline; justify-content: space-between; }
.v2-rail-head h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--v2-text); }
.v2-rail-head button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--v2-mid); font-family: inherit; font-size: 13px;
}
.v2-rail-head button:hover { color: var(--v2-text); }

.v2-field { display: flex; flex-direction: column; gap: 7px; }
.v2-field > label { font-size: 12.5px; color: var(--v2-mid); }
.v2-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 42px; padding: 0 13px; width: 100%;
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r);
  background: rgba(255,255,255,0.025);
  color: var(--v2-soft); font-family: inherit; font-size: 14px;
  cursor: pointer; text-align: left;
  transition: border-color 0.18s var(--v2-ease), background 0.18s var(--v2-ease);
}
.v2-select:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.05); }
.v2-select svg { width: 15px; height: 15px; color: var(--v2-faint); flex: 0 0 auto; }

.v2-rail .v2-btn-light { width: 100%; height: 46px; margin-top: 2px; }

.v2-rail-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--v2-mid);
}
.v2-rail-foot svg { width: 15px; height: 15px; }

/* ── Map controls, top right ───────────────────────────────────── */
.v2-mapctl {
  position: absolute; z-index: 20; top: 92px; right: clamp(12px, 1.6vw, 24px);
  display: flex; flex-direction: column; gap: 8px;
}
.v2-mapctl .grp { display: flex; flex-direction: column; overflow: hidden; }
.v2-mapctl button {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--v2-soft);
  transition: background 0.18s var(--v2-ease), color 0.18s var(--v2-ease);
}
.v2-mapctl .grp button + button { border-top: 1px solid var(--v2-line); }
.v2-mapctl button:hover { background: rgba(255,255,255,0.07); color: var(--v2-text); }
.v2-mapctl svg { width: 17px; height: 17px; }
.v2-mapctl .v2-surface { border-radius: var(--v2-r); }

/* ── Count pill ────────────────────────────────────────────────── */
.v2-count {
  position: absolute; z-index: 20; top: 92px; right: calc(clamp(12px, 1.6vw, 24px) + 56px);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; cursor: pointer;
  border-radius: var(--v2-r-md);
}
.v2-count .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--v2-accent); flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--v2-accent-dim);
}
.v2-count b { display: block; font-size: 15px; font-weight: 500; color: var(--v2-text); }
.v2-count span { display: block; font-size: 12.5px; color: var(--v2-mid); margin-top: 1px; }
.v2-count svg { width: 15px; height: 15px; color: var(--v2-faint); margin-left: 4px; }

/* ── Studio card ───────────────────────────────────────────────── */
.v2-card {
  /* Clears the zoom/locate stack, which shares this column and ends at
     223px. At the old 158px the card sat on top of the locate button:
     visible in the comp, unreachable on the page. */
  position: absolute; z-index: 20;
  top: 240px; right: clamp(12px, 1.6vw, 24px);
  width: 390px; max-width: calc(100vw - 24px);
  padding: 14px;
  border-radius: var(--v2-r-lg);
}
.v2-card-media {
  position: relative; border-radius: var(--v2-r-md); overflow: hidden;
  aspect-ratio: 16 / 9; background: #14161a;
}
.v2-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: var(--v2-pill);
  background: rgba(8,9,11,0.72); backdrop-filter: blur(10px);
  border: 1px solid var(--v2-line-2);
  font-size: 12px; color: var(--v2-text);
}
.v2-badge svg { width: 13px; height: 13px; }
.v2-fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(8,9,11,0.72); backdrop-filter: blur(10px);
  border: 1px solid var(--v2-line-2); color: var(--v2-text);
}
.v2-fav svg { width: 15px; height: 15px; }
.v2-fav[aria-pressed="true"] svg { fill: #ff6b81; color: #ff6b81; }

.v2-card h3 { margin: 14px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.v2-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--v2-soft); white-space: nowrap; }
.v2-rating svg { width: 14px; height: 14px; color: var(--v2-text); }
.v2-card-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--v2-mid); margin-top: 7px; }
.v2-card-loc svg { width: 14px; height: 14px; flex: 0 0 auto; }
.v2-dist { font-size: 13.5px; color: var(--v2-mid); white-space: nowrap; }

.v2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.v2-chip {
  height: 29px; padding: 0 11px; display: inline-flex; align-items: center;
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-sm);
  font-size: 12.5px; color: var(--v2-soft); white-space: nowrap;
}

.v2-avail {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--v2-line);
  font-size: 13.5px;
}
.v2-avail .k { color: var(--v2-mid); }
.v2-avail .v { color: var(--v2-text); }

.v2-card-actions { display: flex; gap: 9px; margin-top: 13px; }
.v2-card-actions .v2-btn-light { flex: 1 1 auto; height: 46px; }
.v2-card-actions .v2-btn-icon { width: 46px; height: 46px; flex: 0 0 auto; }

/* Empty state — shown when the catalogue has no studios yet. */
.v2-empty { padding: 22px 16px; text-align: center; }
.v2-empty h3 { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.v2-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--v2-mid); }

/* ── Map page feature bar sits along the bottom ────────────────── */
.v2-map-features {
  position: absolute; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: clamp(12px, 2vh, 22px);
  width: min(1240px, calc(100% - 48px));
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .v2-map-features { display: none; }
  .v2-rail { max-height: calc(100svh - 120px); }
}
/* Toggle that reveals the filter rail on small screens. Hidden on
   desktop, where the rail is always open. */
.v2-filter-toggle { display: none; }

@media (max-width: 860px) {
  /* The rail and the studio card both want the same space on a phone, so
     the rail collapses behind a Filters button and the card becomes a
     bottom sheet. Stacking them the way the desktop layout does made the
     two overlap on top of each other. */
  .v2-filter-toggle {
    display: inline-flex;
    position: absolute; z-index: 25; top: 82px; left: 12px;
  }

  /* display, not opacity/visibility: transitioning visibility here left
     the panel stuck at opacity 0 even with .is-open applied. A discrete
     display swap cannot get into that state, and the open animation is
     handled by a keyframe instead so it still feels like a sheet. */
  .v2-rail {
    display: none;
    top: 82px; bottom: 12px; left: 12px; right: 12px; width: auto;
    max-height: none;
  }
  /* opacity is declared on the rule itself, not left to the keyframe's
     fill mode — with fill `both` the panel could rest on the `from`
     frame and stay invisible. The animation is now pure decoration; the
     resting state is correct with or without it. */
  .v2-rail.is-open {
    display: flex;
    opacity: 1;
    animation: v2-sheet-in 0.22s var(--v2-ease);
  }
  @keyframes v2-sheet-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  .v2-card {
    top: auto; bottom: 12px; right: 12px; left: 12px; width: auto;
  }
  /* The filter sheet and the studio card both claim the lower half of a
     phone screen. When the sheet is open it owns the screen — otherwise
     the card sits on top of the filters and both become unusable.
     (.v2-card follows .v2-rail in the DOM, hence the sibling combinator.) */
  .v2-rail.is-open { z-index: 30; }
  .v2-rail.is-open ~ .v2-card { display: none; }
  .v2-card .v2-card-media { aspect-ratio: 2 / 1; }

  .v2-count { top: 82px; right: 12px; left: auto; padding: 9px 13px; }
  .v2-count span span { display: none; }        /* one line on mobile */
  .v2-mapctl { top: 140px; }

  /* The top bar only has room for the brand and one action — but not at
     the cost of the menu button, which is the only route to the nav on a
     phone. This selector is (0,2,0) and would otherwise outrank
     .v2-menu-btn's (0,1,0) and hide it. */
  .v2-top-right .v2-btn-icon:not(.v2-menu-btn) { display: none; }
}

@media (max-width: 420px) {
  .v2-brand span { font-size: 13px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .v2-brand-video, .v2-brand-poster { width: 34px; height: 34px; }
  .v2-brand { gap: 9px; }
  .v2-top-right .v2-btn { height: 38px; padding: 0 15px; font-size: 13.5px; }
}

/* ── Map markers ───────────────────────────────────────────────── */
.v2-marker {
  width: 13px; height: 13px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; border: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.16), 0 0 14px 3px rgba(220,235,255,0.55);
  transition: transform 0.2s var(--v2-ease), box-shadow 0.2s var(--v2-ease);
}
.v2-marker:hover { transform: scale(1.25); }
.v2-marker.is-active {
  background: var(--v2-accent);
  box-shadow: 0 0 0 4px var(--v2-accent-dim), 0 0 20px 5px rgba(79,131,241,0.55);
  transform: scale(1.2);
}

/* Landing: keep the feature bar clear of the CTA once the hero stops
   being tall enough for margin:auto to do the spacing. */
@media (max-width: 860px) {
  .v2-features { margin-top: clamp(40px, 8vh, 72px); }
}

/* Demo-mode flag. Only rendered when ?demo=1 is set — it exists to make
   sample content unmistakable, so it must never be subtle. */
.v2-demo-flag {
  position: absolute; z-index: 40;
  left: 50%; top: 78px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: var(--v2-pill);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  color: #fff; background: #6b5ce0;
}
@media (max-width: 860px) {
  /* Clear of the Filters button and count pill, which occupy 82px. */
  .v2-demo-flag { top: 132px; }
  /* The flag is appended last, so it is a following sibling of the rail.
     Hide it while the filter sheet owns the screen. */
  .v2-rail.is-open ~ .v2-demo-flag { display: none; }
}

/* ── Display face application ─────────────────────────────────────
   Headings, navigation and the wordmark. Everything a person types
   into, and everything they read at length, stays on Inter. */
.v2-brand span,
.v2-nav a,
.v2-menu a,
.v2-eyebrow,
.v2-feature h3,
.v2-card-row h3,
.v2-btn {
  font-family: var(--v2-display);
}

/* ═══════════════════════════════════════════════════════════════════
   Touch targets
   ───────────────────────────────────────────────────────────────────
   The icon buttons render at 32px and the chips at 28-29px, all below
   the 44px floor in WCAG 2.5.5. These are the map's zoom, locate and
   menu controls — used one-handed, on a phone, often standing up.

   The hit area is grown with a pseudo-element rather than by resizing
   the control: the layout keeps the size it was designed at, and the
   finger gets the area it needs. Pointer events land on the parent
   because the ::after inherits them.
   ═══════════════════════════════════════════════════════════════════ */
.v2-btn-icon,
.v2-menu-btn,
.v2-mapctl button,
.v2-chip,
.v2-fav {
  position: relative;
}
.v2-btn-icon::after,
.v2-menu-btn::after,
.v2-mapctl button::after,
.v2-chip::after,
.v2-fav::after {
  content: '';
  position: absolute;
  /* 32 + 6 + 6 = 44. Chips at 28 get 44 the same way. */
  inset: -6px;
  border-radius: inherit;
}
.v2-chip::after { inset: -8px -4px; }

/* One of the four hero features is a link — the founding-rooms one,
   which is also the studio-owner entrance. It has to sit in the same row
   without breaking the rhythm: the anchor inherits the feature layout
   and only reveals itself on hover and focus. */
a.v2-feature-link { text-decoration: none; color: inherit; transition: background .18s var(--v2-ease); }
a.v2-feature-link:hover { background: rgba(255,255,255,0.03); }
a.v2-feature-link:focus-visible { outline: 2px solid var(--v2-accent, #4f83f1); outline-offset: -2px; }
.v2-feature-go { display: inline-block; margin-left: 5px; font-size: .78em; color: var(--v2-mid);
  transform: translateY(-1px); transition: transform .18s var(--v2-ease), color .18s var(--v2-ease); }
a.v2-feature-link:hover .v2-feature-go { transform: translate(2px, -3px); color: var(--v2-text); }
@media (prefers-reduced-motion: reduce) {
  a.v2-feature-link, .v2-feature-go { transition: none; }
  a.v2-feature-link:hover .v2-feature-go { transform: translateY(-1px); }
}