/* ============================================================
   NUMA MIRA — component styles
   ============================================================ */

/* ---------- CUSTOM CURSOR (Studio Dado-style: native cursor by default,
   custom ring only over clickable elements / venue galleries) ---------- */
@media (pointer: fine) {
  .nm-cursor-on a, .nm-cursor-on button, .nm-cursor-on [role="link"],
  .nm-cursor-on .tlink, .nm-cursor-on .nm-link, .nm-cursor-on .nm-cta-link,
  .nm-cursor-on .mask-link, .nm-cursor-on .opt, .nm-cursor-on [data-cursor] { cursor: none; }
}
.nm-cursor {
  position: fixed; top: 0; left: 0; z-index: 900; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; opacity: 0;
  display: grid; place-items: center;
  transition: opacity 240ms var(--ease), width 360ms var(--ease), height 360ms var(--ease),
              margin 360ms var(--ease), border-color 300ms var(--ease), background 360ms var(--ease);
}
/* hovering a clickable element */
.nm-cursor.link { opacity: 1; border-color: var(--accent); }
.nm-cursor.link.down { background: rgba(200,132,30,0.14); }
/* hovering a venue gallery (carousel) */
.nm-cursor.carousel {
  opacity: 1; width: 82px; height: 82px; margin: -41px 0 0 -41px;
  border-color: rgba(240, 235, 226, 0.80); background: rgba(16, 14, 12, 0.32);
}
.nm-cursor.carousel.down { background: rgba(16, 14, 12, 0.55); }
.nm-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 901; pointer-events: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0;
  transition: opacity 220ms var(--ease);
}
.nm-cursor.carousel + .nm-cursor-dot { opacity: 0; }
.nm-cursor-label {
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 0.14em; color: rgba(240, 235, 226, 0.9);
  display: block; text-align: center; user-select: none;
}

/* ---------- BUTTONS & LINKS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1);
  letter-spacing: 0.04em; line-height: 1;
  padding: 16px 26px; border: 0; border-radius: 2px;
  background: var(--ink); color: var(--bone);
  text-decoration: none; cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.btn:hover { background: var(--ink-deep); }
.btn .arr { transition: transform var(--d-fast) var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-deep); color: var(--bone); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 0.5px solid var(--ink); padding: 15px 25px;
}
.btn-ghost:hover { background: var(--ink); color: var(--bone); }
.btn-on-dark { background: var(--bone); color: var(--ink); }
.btn-on-dark:hover { background: var(--white); }
/* compact modifier for "Begin a conversation" entry CTAs (roughly half weight) */
.btn-sm { padding: 8px 16px; gap: 8px; font-size: 12px; }
.btn-sm .arr { width: 12px; height: 12px; }

/* text link with quiet underline draw */
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1);
  letter-spacing: 0.04em; color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 0.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-fast) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arr { transition: transform var(--d-fast) var(--ease); }
.tlink:hover .arr { transform: translateX(4px); }
.tlink-accent { color: var(--accent-deep); }
/* inline prose link: inherits the surrounding text size/weight, oxblood, hover underline */
.inline-link {
  color: var(--accent); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px;
  transition: background-size var(--d-fast) var(--ease);
}
.inline-link:hover { background-size: 100% 1px; }

/* masked-text reveal (nav) */
.mask-link {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1);
  letter-spacing: 0.02em; color: inherit; text-decoration: none;
  background: none; border: 0; padding: 2px 0; cursor: pointer; line-height: 1.2;
}
.mask-link .mask-inner { display: block; transition: transform var(--d-fast) var(--ease); }
.mask-link .mask-inner::after {
  content: attr(data-label); position: absolute; left: 0; top: 100%;
  display: block;
}
.mask-link:hover .mask-inner { transform: translateY(-100%); }

.arr { display: inline-block; }

/* ---------- PRELOADER ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink-deep); color: var(--on-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity var(--d-slow) var(--ease), visibility var(--d-slow) var(--ease);
}
.preloader.done { opacity: 0; visibility: hidden; }
.pre-mark { width: 38px; height: 38px; opacity: 0.92; margin-bottom: 30px; }
.pre-word {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); line-height: 1;
  color: var(--on-dark); letter-spacing: 0.01em;
  opacity: 1;
  animation: preIn 1100ms var(--ease) 120ms backwards;
}
@keyframes preIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pre-count {
  position: absolute; bottom: 40px; right: var(--gutter);
  font-family: var(--sans); font-weight: 300; font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); color: var(--on-dark-soft);
  letter-spacing: 0.01em;
}
.pre-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 0; }

/* ---------- NAV (shared scroll state) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  color: var(--on-dark);
  background: transparent;
  border-bottom: 0.5px solid transparent;
  transition: transform 480ms var(--ease), color 380ms var(--ease), background 380ms var(--ease), border-color 380ms var(--ease);
}
/* ink context: over light content — light translucent bone surface, ink text */
.nav.ink { color: var(--ink); background: rgba(245, 241, 234, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hairline); }
.nav.hidden { transform: translateY(-110%); }

/* ---- Strip nav (current) ---- */
.nav-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px,2vw,26px) var(--gutter);
}
.nav-logo { height: 46px; display: block; }
.nav-logo img { height: 100%; width: auto; display: block; filter: invert(1) brightness(1.9); transition: filter 380ms var(--ease); }
.nav.ink .nav-logo img { filter: none; }
.nav-links { display: flex; align-items: center; gap: clamp(22px,3vw,42px); }
.nav-cta { margin-left: 8px; }

/* ---- Masthead nav (Studio Dado-style) ---- */
.nav-mast {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(16px,2vw,24px) var(--gutter);
}
.nm-left { display: flex; align-items: center; }
.nm-logo { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.nm-logo img { height: 46px; width: auto; display: block; filter: invert(1) brightness(1.9); transition: filter 380ms var(--ease); }
.nav.ink .nm-logo img { filter: none; }
.nm-right { display: flex; align-items: flex-start; gap: clamp(28px,5vw,72px); }
.nm-slot { display: flex; flex-direction: column; gap: 4px; }
.nm-link {
  position: relative; align-self: flex-start;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.02em;
  color: inherit; text-decoration: none;
}
.nm-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-fast) var(--ease);
}
.nm-link:hover::after { transform: scaleX(1); }
.nm-sub-label { font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; color: var(--on-dark-soft); transition: color 380ms var(--ease); }
.nav.ink .nm-sub-label { color: var(--grey-warm); }
.nm-cta-link {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.02em;
  color: inherit; transition: opacity 200ms var(--ease);
}
.nm-cta-link:hover { opacity: 0.55; }
.nm-cta-link .arr { transition: transform 200ms var(--ease); }
.nm-cta-link:hover .arr { transform: translateX(3px); }

/* ---- Mobile / tablet menu ---- */
.nav-burger { display: none; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 125;
  background: rgba(16, 14, 12, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  backdrop-filter: blur(22px) saturate(118%);
  color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(22px, 3vh, 34px) var(--gutter) clamp(40px, 9vh, 80px);
  opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-10px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease), visibility 0s linear 380ms;
}
/* Fallback for engines without backdrop-filter — keep menu text legible */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mobile-menu { background: rgba(16, 14, 12, 0.92); }
}
/* While the menu is open, neutralise the (scrolled) nav's own backdrop-filter.
   A backdrop-filter on the nav makes it a "backdrop root", which clips the
   full-screen menu's own blur to the nav's box — so the menu loses its frosted
   background once the page has been scrolled. Dropping it here restores the blur;
   the nav is fully covered by the open menu, so this is visually invisible. */
html.menu-open .nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
}
.mobile-menu.show { opacity: 1; pointer-events: auto; visibility: visible; transform: none; transition: opacity 380ms var(--ease), transform 380ms var(--ease), visibility 0s; }
.mm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mm-logo { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.mm-logo img { height: 46px; width: auto; display: block; }
.mm-links { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 24px); margin-block: auto; }
.mm-link {
  background: none; border: 0; padding: 6px 0; text-align: left; cursor: pointer;
  font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.04;
  font-size: clamp(2.1rem, 1.2rem + 5.4vw, 3.4rem); color: var(--on-dark);
  transition: opacity 200ms var(--ease);
}
.mm-link:hover, .mm-link:active { opacity: 0.6; }
.mm-cta { align-self: flex-start; margin-top: clamp(28px, 5vh, 52px); }

@media (max-width: 860px) {
  .nav-strip .nav-mid, .nav-strip .nav-cta { display: none; }
  .nm-right .nm-slot { display: none; }
  .nm-right { gap: 0; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 11px; background: none; border: 0;
    position: relative; z-index: 130; color: inherit; margin-left: 8px;
  }
  .nav-burger span { display: block; height: 1.5px; width: 100%; background: currentColor; border-radius: 2px; transition: transform 320ms var(--ease), opacity 200ms var(--ease); }
  .nav-burger.open { color: var(--on-dark); }
  .nav-burger.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-burger.open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

/* ---------- HERO ---------- */
.hero { position: relative; }

/* Variant A — Editorial Overlay (big serif over full-bleed warm photography) */
.hero-overlay { position: relative; min-height: 100svh; overflow: hidden; background: var(--ink-deep); display: flex; }
.hero-overlay .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; transform: scale(1.16); will-change: transform;
}
.hero-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,14,12,0.50) 0%, rgba(16,14,12,0.10) 20%, rgba(16,14,12,0.14) 52%, rgba(16,14,12,0.72) 100%);
}
.hero-overlay .hero-grid { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(20px, 4vh, 52px); }
.hero-rule { position: absolute; top: 47%; left: 0; right: 0; padding-inline: var(--gutter); color: var(--on-dark); }
.hero-rule .line {
  border-top: 0.5px solid rgba(240,235,226,0.42); padding-top: 18px;
  display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(20px,4vw,56px); align-items: start;
}
.hero-rule .ann-l { font-size: var(--step--1); letter-spacing: 0.04em; max-width: 18ch; }
.hero-rule .ann-c { display: flex; gap: 18px; }
.hero-rule .ann-c .tag { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; padding-top: 2px; }
.hero-rule .ann-c p { color: var(--on-dark); font-size: var(--step-0); max-width: 34ch; line-height: 1.5; }
.hero-rule .ann-r { justify-self: end; }
.hero-words {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  color: var(--on-dark); line-height: 0.9; letter-spacing: -0.012em;
  font-size: clamp(2.8rem, 0.6rem + 10vw, 9.6rem); margin: 0;
}
.hero-words .l1 { display: block; }
.hero-words .l2 { display: block; text-align: right; }
.hero-foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(18px, 4vh, 40px); flex-wrap: wrap; }
.hero-supp { color: var(--on-dark); font-size: var(--step-0); max-width: 38ch; line-height: 1.5; opacity: 0.92; }
@media (max-width: 860px) { .hero-supp { max-width: 30ch; font-size: var(--step--1); } }
@media (max-width: 860px) {
  .hero-rule { top: auto; bottom: 46%; }
  .hero-rule .line { grid-template-columns: 1fr; gap: 12px; }
  .hero-rule .ann-r { justify-self: start; }
  .hero-rule .ann-c p { display: none; }
  .hero-words .l2 { text-align: left; }
}

/* Variant A-min — Atmosphere (kept, minimal) */
.hero-atmo {
  min-height: 100svh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden; background: var(--ink-deep);
}
.hero-atmo .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
  transform: scale(1.16); will-change: transform;
}
.hero-atmo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(16,14,12,0.82) 0%, rgba(16,14,12,0.25) 40%, rgba(16,14,12,0.08) 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(16,14,12,0.55), transparent 60%);
}
.hero-atmo .hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(48px, 9vh, 120px); }
.hero-atmo .hero-line {
  color: var(--on-dark); font-size: var(--step-5); max-width: 16ch;
}
.hero-atmo .hero-sub { color: var(--on-dark); opacity: 0.92; }

/* Variant B — Editorial (split) */
.hero-edi {
  min-height: 100svh; display: grid; align-items: end;
  grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 80px);
  padding-top: clamp(120px, 18vh, 200px); padding-bottom: clamp(40px, 7vh, 96px);
  background: var(--bone);
}
.hero-edi .hero-line { font-size: var(--step-4); color: var(--ink); max-width: 13ch; }
.hero-edi .hero-fig {
  position: relative; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden;
  align-self: stretch; min-height: 60vh; background: var(--ink-deep);
}
.hero-edi .hero-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); will-change: transform; }
.hero-edi .hero-foot { display: flex; gap: clamp(24px,5vw,64px); align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-edi { grid-template-columns: 1fr; align-items: start; }
  .hero-edi .hero-fig { min-height: 52vh; order: 2; }
}

.hero-meta { display: flex; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; align-items: baseline; }
.hero-meta .mi-k { font-size: var(--step--1); letter-spacing: 0.04em; }

/* scroll cue — vertical (communicates downward scroll) */
.scrollcue { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; }
.scrollcue .line { display: inline-block; width: 0.5px; height: 46px; background: currentColor; position: relative; overflow: hidden; opacity: 0.55; }
.scrollcue .line::after { content:""; position:absolute; left:0; right:0; top:0; height: 45%; background: var(--accent); transform: translateY(-120%); animation: cueDown 2.4s var(--ease) infinite; }
@keyframes cueDown { 0%{transform:translateY(-120%);} 55%{transform:translateY(230%);} 100%{transform:translateY(230%);} }

/* ---------- SECTIONS ---------- */
.section { padding-block: clamp(64px, 12vh, var(--s-7)); }
.section-tight { padding-block: clamp(48px, 8vh, var(--s-6)); }
.eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: var(--s-3); }
.eyebrow-row .ix { font-variant-numeric: tabular-nums; color: var(--accent-deep); font-weight: 400; }

/* brand statement */
.statement { background: var(--bone); padding-block: clamp(48px, 8vh, var(--s-6)); }
.statement .big {
  font-family: var(--display); font-weight: 400; line-height: 1.12;
  font-size: var(--step-2); letter-spacing: -0.01em; max-width: 22ch; text-wrap: balance;
}
.statement .big em { font-style: italic; }

/* dark band */
.band-dark { background: var(--ink-deep); color: var(--on-dark); }
.band-dark .t-eyebrow { color: var(--on-dark-soft); }
.band-dark .t-body { color: var(--on-dark); opacity: 0.9; }

/* ---------- HOME FEATURED ESTATES (own component, fv-*) ----------
   Dedicated to the home page only. Deliberately NOT the collection's
   VenueCard (.vcard-*): stacked editorial chapters on desktop, swipe
   carousel on mobile/tablet. */
.fv-track .fv-chapter + .fv-chapter { margin-top: clamp(56px, 10vh, 140px); }
.fv-dots { display: none; }
.fv-more { margin-top: clamp(8px, 2vh, 24px); }
.fv-chapter {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
.fv-chapter.flip .fv-shot { order: 2; }
.fv-shot { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--ink-deep); }
.fv-shot.wide { aspect-ratio: 4/3; }
.fv-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fv-chapter:hover .fv-shot img { transform: scale(1.04); }
.fv-num {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  width: 40px; height: 40px; border: 0.5px solid rgba(240,235,226,0.6); border-radius: 50%;
  display: grid; place-items: center; color: var(--on-dark); font-size: 13px; font-variant-numeric: tabular-nums;
}
.fv-tag {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark);
  padding: 7px 12px; background: rgba(16,14,12,0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 2px;
}
.fv-text { max-width: 40ch; }
.fv-name { font-size: var(--step-3); margin-bottom: 14px; }
.fv-facts { display: flex; gap: 28px; flex-wrap: wrap; margin: 22px 0 26px; }
.fv-fact .k { font-size: var(--step--1); color: var(--grey-warm); letter-spacing: 0.04em; }
.fv-fact .v { font-size: var(--step-0); }
@media (max-width: 860px) {
  .fv-chapter { grid-template-columns: 1fr; gap: 22px; }
  .fv-chapter.flip .fv-shot { order: 0; }

  /* Swipe carousel: 1 · 2 · 3 */
  .fv-track {
    display: flex; gap: clamp(16px, 4vw, 28px); align-items: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .fv-track::-webkit-scrollbar { display: none; }
  .fv-track .fv-chapter { flex: 0 0 86%; margin-top: 0 !important; scroll-snap-align: center; }
  .fv-track .fv-shot { aspect-ratio: 4/3; }
  .fv-dots { display: flex; justify-content: center; gap: 9px; margin-top: clamp(20px, 4vh, 28px); }
  .fv-dot {
    width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--grey-soft); transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
  }
  .fv-dot.on { background: var(--accent); transform: scale(1.3); }

  /* Carousel footer: centre the "See the collection" link under the dots so
     they read as one intentional control, and trim the trailing void below. */
  .fv-more { text-align: center; margin-top: 16px; }
  .fv-section { padding-bottom: clamp(40px, 8vh, 64px); }
}

/* ---------- HOW WE HOST teaser ---------- */
.host-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.host-step .step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.host-step .si { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bone); color: var(--ink-deep); font-family: var(--display); font-weight: 400; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.host-step .st { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-1); }
@media (max-width: 760px) { .host-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- CLOSE / FOOTER ---------- */
.close-band { background: var(--accent); color: var(--on-dark); padding-block: clamp(96px, 16vh, 184px); }
.close-band .t-eyebrow { color: var(--accent-soft); }
.close-line { font-family: var(--display); font-weight: 400; font-size: var(--step-3); line-height: 1.1; max-width: 18ch; }
.close-line em { font-style: italic; }
.footer { background: var(--ink-deep); color: var(--on-dark-soft); }
.footer a { color: var(--on-dark); text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: clamp(24px,4vw,48px); }
.footer-col h5 { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); font-weight: 500; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-logo { height: 46px; margin-bottom: 18px; }
.footer-logo img { height: 100%; filter: invert(1) brightness(1.8); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- VENUE DETAIL ---------- */
.vd-hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-deep); }
.vd-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); will-change: transform; }
.vd-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(16,14,12,0.88) 0%, rgba(16,14,12,0.52) 28%, rgba(16,14,12,0.24) 52%, rgba(16,14,12,0.06) 100%); }
.vd-hero .vd-hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 7vh, 90px); color: var(--on-dark); text-shadow: 0 1px 24px rgba(16,14,12,0.45); }
.vd-title { font-size: var(--step-5); color: var(--on-dark); }
.vd-metarow { display: flex; gap: clamp(28px,5vw,64px); flex-wrap: wrap; align-items: baseline; margin-top: 26px; }
.vd-metarow .k { font-size: var(--step--1); color: var(--on-dark-soft); letter-spacing: 0.12em; text-transform: uppercase; }
.vd-metarow .v { font-size: var(--step-1); color: var(--on-dark); font-family: var(--display); font-weight: 400; }

/* chapters: variant 1 — unfolding full-bleed alternating */
.chap-unfold .chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,80px); align-items: center; }
.chap-unfold .chapter + .chapter { margin-top: clamp(56px, 9vh, 130px); }
.chap-unfold .chapter.flip .ch-media { order: 2; }
.ch-media { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4/5; background: var(--ink-deep); }
.ch-media.wide { aspect-ratio: 16/11; }
.ch-media img { width: 100%; height: 100%; object-fit: cover; }
.ch-body { max-width: 44ch; }
.ch-num { font-variant-numeric: tabular-nums; color: var(--accent-deep); font-size: var(--step--1); letter-spacing: 0.1em; }
.ch-title { font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; margin: 12px 0 16px; }
@media (max-width: 860px) {
  .chap-unfold .chapter { grid-template-columns: 1fr; gap: 20px; }
  .chap-unfold .chapter.flip .ch-media { order: 0; }
}

/* chapters: variant 2 — indexed columns (sticky left index) */
.chap-indexed { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px,5vw,80px); align-items: start; }
.chap-indexed .ix-rail { position: sticky; top: 120px; align-self: start; }
.chap-indexed .ix-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chap-indexed .ix-rail li { display: flex; gap: 12px; padding: 9px 0 9px 10px; font-size: var(--step-0); color: var(--grey-warm); border-top: 0.5px solid var(--hairline); border-left: 2px solid transparent; cursor: pointer; transition: color var(--d-fast) var(--ease), border-left-color var(--d-fast) var(--ease); }
.chap-indexed .ix-rail li .n { font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.chap-indexed .ix-rail li.active { color: var(--ink); border-left-color: var(--accent); }
.chap-indexed .ix-rail li.active .n { color: var(--accent); }
.chap-indexed .col-body .chapter + .chapter { margin-top: clamp(48px, 8vh, 110px); }
.chap-indexed .col-body .ch-media { aspect-ratio: 16/10; margin-bottom: 22px; }
.chap-indexed .ch-body { max-width: 56ch; }
@media (max-width: 860px) {
  .chap-indexed { grid-template-columns: 1fr; }
  .chap-indexed .ix-rail { display: none; }
}

/* ---------- DRAGGABLE GALLERY ---------- */
.gallery { position: relative; }
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; }
.gal-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; cursor: grab; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track.drag { cursor: grabbing; }
.gal-item { flex: 0 0 auto; width: clamp(260px, 42vw, 540px); aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; scroll-snap-align: start; background: var(--ink-deep); }
.gal-item.tall { aspect-ratio: 3/4; width: clamp(220px, 32vw, 420px); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gal-drag-cue { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-warm); }

/* ---------- CONVERSATION OVERLAY ---------- */
.conv-scrim { position: fixed; inset: 0; z-index: 400; overflow: hidden; background: var(--ink-deep); opacity: 0; pointer-events: none; transition: opacity var(--d-base) var(--ease); }
.conv-scrim.show { opacity: 1; pointer-events: auto; }
.conv-scrim-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: blur(16px) brightness(0.5); }
.conv-scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,14,12,0.40) 0%, rgba(16,14,12,0.64) 72%); pointer-events: none; }
.conv {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 401;
  width: min(560px, 100vw); background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--d-base) var(--ease);
  box-shadow: -20px 0 60px rgba(16,14,12,0.18);
  pointer-events: none;
}
.conv.show { transform: none; pointer-events: auto; }
.conv-top { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 26px var(--s-4); min-height: 96px; border-bottom: 0.5px solid var(--hairline); color: var(--paper); }
.conv-top-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.conv-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(16,14,12,0.42) 0%, rgba(16,14,12,0.74) 100%); z-index: 1; pointer-events: none; }
.conv-top > *:not(.conv-top-img) { position: relative; z-index: 2; }
.conv-top .t-eyebrow { color: var(--paper); }
.conv-progress { display: flex; gap: 6px; align-items: center; }
.conv-progress .seg { width: 26px; height: 2px; background: rgba(250,249,245,0.34); border-radius: 2px; transition: background var(--d-fast) var(--ease); }
.conv-progress .seg.on { background: var(--accent); }
.conv-close { width: 36px; height: 36px; border-radius: 50%; border: 0.5px solid rgba(250,249,245,0.45); background: transparent; color: var(--paper); display: grid; place-items: center; }
.conv-close:hover { background: rgba(250,249,245,0.16); }
.conv-body { flex: 1; overflow-y: auto; padding: clamp(28px,4vw,46px) var(--s-4); }
.conv-ctx { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--grey-warm); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.conv-ctx .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.conv-q { font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.12; margin-bottom: 28px; text-wrap: balance; }
.conv-opts { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 18px 22px; border-radius: 3px;
  border: 0.5px solid var(--hairline); background: var(--white); color: var(--ink);
  font-size: var(--step-0); font-weight: 300;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.opt:hover { border-color: var(--ink); }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt .tick { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.opt.sel .tick { opacity: 1; }
.conv-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.conv-field label { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--grey-warm); }
.conv-field input, .conv-field textarea {
  font-family: var(--sans); font-weight: 300; font-size: var(--step-0); color: var(--ink);
  background: var(--white); border: 0.5px solid var(--hairline); border-radius: 3px; padding: 14px 16px;
  width: 100%; resize: vertical;
}
.conv-field input:focus, .conv-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.conv-foot { padding: 20px var(--s-4); border-top: 0.5px solid var(--hairline); display: flex; flex-direction: column; gap: 14px; }
.conv-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conv-escape { font-size: var(--step--1); color: var(--grey-warm); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.conv-escape:hover { color: var(--ink); }
.conv-back { font-size: var(--step--1); color: var(--grey-warm); background: none; border: 0; cursor: pointer; }
.conv-back:hover { color: var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step--1); color: var(--grey-warm); line-height: 1.5; }
.consent input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }

/* success */
.conv-success { text-align: left; }
.conv-success .ok-mark { width: 54px; height: 54px; border-radius: 50%; border: 0.5px solid var(--accent); display: grid; place-items: center; margin-bottom: 26px; }
.conv-success .ok-line { font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.14; margin-bottom: 18px; text-wrap: balance; }
.conv-recap { margin-top: 26px; border-top: 0.5px solid var(--hairline); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.conv-recap .row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step--1); }
.conv-recap .row .k { color: var(--grey-warm); letter-spacing: 0.04em; }

/* meeting calendar */
.conv-note { font-size: var(--step--1); color: var(--grey-warm); line-height: 1.55; margin-bottom: 24px; max-width: 44ch; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-month { font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--ink); }
.cal-nav { width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid var(--hairline); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.cal-nav:hover:not(:disabled) { background: var(--bone-warm); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow-c { text-align: center; font-size: var(--step--1); letter-spacing: 0.05em; color: var(--grey-warm); padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border: 0.5px solid transparent; border-radius: 4px; background: none; color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: var(--step-0); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.cal-cell:hover:not(:disabled):not(.empty) { border-color: var(--hairline); background: var(--bone-warm); }
.cal-cell.sel { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.cal-cell.past { color: var(--grey-soft); cursor: default; }
.cal-cell.empty { cursor: default; }
.cal-times { margin-top: 22px; padding-top: 20px; border-top: 0.5px solid var(--hairline); }
.cal-times-label { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--grey-warm); margin-bottom: 13px; }
.cal-time-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-time { padding: 9px 17px; border: 0.5px solid var(--hairline); border-radius: 999px; background: none; color: var(--ink); font-family: var(--sans); font-size: var(--step--1); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.cal-time:hover { background: var(--bone-warm); }
.cal-time.sel { background: var(--accent); color: var(--paper); border-color: var(--accent); }

@media (max-width: 560px) {
  .conv { width: 100vw; }
}

/* soft entrance for conv body content */
.conv-step { animation: stepIn var(--d-base) var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------- CORAL ACCENT MARKS ---------- */
/* pull-quote left rule (home statement) */
.coral-quote {
  border-left: 3px solid var(--accent);
  padding-left: clamp(18px, 2.8vw, 30px);
}

/* venue hero: sport category pill */
.vd-sport-pill {
  display: inline-block;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  padding: 6px 14px; border-radius: 2px;
  margin-bottom: 18px;
}

/* promote hero title lines for GPU compositing */
.hero-words .l1, .hero-words .l2 { will-change: transform; }
.hero-words { will-change: opacity; }

/* ---------- STAT STRIP ---------- */
.stat-strip { background: var(--bone); border-top: 0.5px solid var(--hairline); border-bottom: 0.5px solid var(--hairline); }
.stat-inner { display: flex; padding-block: clamp(26px, 4vh, 42px); }
.stat-item { flex: 1; padding-inline: clamp(14px, 2.4vw, 30px); border-left: 0.5px solid var(--hairline); }
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-k { font-family: var(--sans); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-warm); margin-bottom: 9px; }
.stat-v { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 0.5rem + 1.6vw, 1.9rem); color: var(--ink); line-height: 1.1; }
@media (max-width: 620px) {
  .stat-inner { flex-wrap: wrap; }
  .stat-item { flex: 0 0 50%; padding: 16px 0 16px 14px; border-top: 0.5px solid var(--hairline); }
  .stat-item:nth-child(-n+2) { border-top: none; }
  .stat-item:nth-child(odd) { padding-left: 0; border-left: none; }
}

/* ---------- PROGRAMME SECTION ---------- */
.programme-section { background: var(--bone); }
.programme-list { display: flex; flex-direction: column; margin-top: var(--s-4); }
.prog-item { display: grid; grid-template-columns: 56px 1fr; gap: 0 clamp(18px, 3vw, 40px); padding: clamp(22px, 3.5vh, 34px) 0; border-top: 0.5px solid var(--hairline); align-items: start; }
.prog-n { font-family: var(--display); font-weight: 400; font-size: var(--step-3); color: var(--accent); line-height: 1; padding-top: 3px; }
.prog-t { font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.prog-b { font-size: var(--step-0); color: var(--grey-warm); max-width: 50ch; line-height: 1.55; }

/* ---------- VENUE FOOT NAV ---------- */
.venue-footnav { background: var(--bone); border-top: 0.5px solid var(--hairline); }
.vfn-inner { display: grid; grid-template-columns: 1fr 1fr; }
.vfn-item { display: flex; flex-direction: column; gap: 6px; padding: clamp(30px, 5vh, 54px) 0; background: none; border: 0; cursor: pointer; text-align: left; transition: opacity var(--d-fast) var(--ease); }
.vfn-item:hover { opacity: 0.55; }
.vfn-prev { padding-right: clamp(24px, 4vw, 56px); }
.vfn-next { text-align: right; align-items: flex-end; border-left: 0.5px solid var(--hairline); padding-left: clamp(24px, 4vw, 56px); }
.vfn-dir { font-family: var(--sans); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.vfn-name { font-family: var(--display); font-weight: 400; font-size: var(--step-2); color: var(--ink); line-height: 1.08; }
.vfn-region { color: var(--grey-warm); margin-top: 4px; }
@media (max-width: 600px) {
  .vfn-inner { grid-template-columns: 1fr; }
  .vfn-next { text-align: left; align-items: flex-start; border-left: none; border-top: 0.5px solid var(--hairline); padding-left: 0; padding-top: clamp(24px, 4vh, 40px); }
}

/* ---------- VENUE HIGHLIGHTS + RESERVE ---------- */
.venue-reserve { background: var(--bone); }
.reserve-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,84px); align-items: start; }
.hl-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; }
.hl-item { padding: clamp(18px,2.6vh,28px) 0; border-top: 0.5px solid var(--hairline); }
.hl-item:last-child { border-bottom: 0.5px solid var(--hairline); }
.hl-k { font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--ink); margin-bottom: 6px; }
.hl-v { font-size: var(--step-0); color: var(--grey-warm); max-width: 44ch; line-height: 1.5; }
.reserve-card { background: var(--paper); border: 0.5px solid var(--hairline); border-radius: 6px; padding: clamp(24px,3vw,38px); }
.reserve-price { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; }
.rp-num { font-family: var(--display); font-weight: 400; font-size: var(--step-3); color: var(--ink); line-height: 1; }
.rp-unit { font-size: var(--step--1); color: var(--grey-warm); letter-spacing: 0.02em; }
.reserve-facts { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; border-top: 0.5px solid var(--hairline); padding-top: 22px; }
.reserve-facts .rf { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.reserve-facts .rf .k { font-size: var(--step--1); color: var(--grey-warm); letter-spacing: 0.04em; }
.reserve-facts .rf .v { font-size: var(--step-0); color: var(--ink); text-align: right; }
.reserve-btn { width: 100%; justify-content: center; }
.reserve-note { font-size: var(--step--1); color: var(--grey-warm); margin-top: 14px; line-height: 1.5; }
@media (max-width: 860px) { .reserve-grid { grid-template-columns: 1fr; gap: clamp(28px,5vh,44px); } }

/* ---------- COLLECTION GRID (Venues index) ---------- */
.vcol-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(22px,4vw,64px); flex-wrap: wrap; }
.vcol-head-l { min-width: min(100%, 18ch); }
.vcol-title { font-size: var(--step-4); max-width: 15ch; }
.vcol-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.fpill {
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.02em;
  color: var(--ink); background: transparent; border: 0.5px solid var(--hairline);
  padding: 10px 19px; border-radius: 999px; cursor: pointer; line-height: 1;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.fpill:hover { border-color: var(--ink); }
.fpill.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* tools row: search (left) + sport pills (right), beneath the title */
.vcol-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px,3vw,40px); flex-wrap: wrap;
  margin-top: clamp(24px,4vh,44px);
}
.vsearch {
  display: flex; align-items: center; gap: 10px; flex: 0 1 340px; min-width: 0;
  background: transparent; border: 0.5px solid var(--hairline); border-radius: 999px;
  padding: 10px 16px; color: var(--grey-warm);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.vsearch:focus-within { border-color: var(--ink); color: var(--ink); }
.vsearch-icon { flex: 0 0 auto; }
.vsearch-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-weight: 300; font-size: var(--step--1); color: var(--ink);
}
.vsearch-input::placeholder { color: var(--grey-warm); }
.vsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.vsearch-clear {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: none; color: var(--grey-warm); cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.vsearch-clear:hover { background: var(--bone-warm); color: var(--ink); }
.vcol-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(40px,8vh,90px) 0;
}

.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px,4vh,56px) clamp(22px,2.4vw,40px); }
.vcard { cursor: pointer; display: flex; flex-direction: column; }
.vcard-media { position: relative; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; background: var(--ink-deep); }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vcard:hover .vcard-media img { transform: scale(1.04); }
/* swipeable preview gallery */
.vcard-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vcard-track::-webkit-scrollbar { display: none; }
.vcard-shot { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.vcard-dots { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; justify-content: flex-end; gap: 5px; pointer-events: none; }
.vcard-dot {
  width: 16px; height: 2px; border-radius: 2px; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  background: rgba(250,249,245,0.45); box-shadow: 0 0 0 0.5px rgba(16,14,12,0.18);
  transition: background var(--d-fast) var(--ease), width var(--d-fast) var(--ease);
}
.vcard-dot.on { background: var(--accent); width: 26px; }
.vcard-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,14,12,0.36) 0%, rgba(16,14,12,0) 24%, rgba(16,14,12,0) 60%, rgba(16,14,12,0.50) 100%);
}
.vcard-sport { position: absolute; top: 13px; left: 13px; z-index: 2; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark); background: rgba(16,14,12,0.5); padding: 5px 10px; border-radius: 999px; }
.vcard-price { position: absolute; top: 13px; right: 13px; z-index: 2; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; color: var(--ink); background: var(--paper); padding: 5px 10px; border-radius: 999px; }
.vcard-badge { position: absolute; top: 13px; right: 13px; z-index: 2; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 5px 10px; border-radius: 999px; }
.vcard-caption { position: absolute; bottom: 15px; left: 16px; right: 16px; z-index: 2; font-size: var(--step--1); color: var(--on-dark); opacity: 0.94; }
.vcard-foot { padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.vcard-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vcard-region { color: var(--grey-warm); font-size: 0.7rem; }
.vcard-arrow { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0.5px solid var(--hairline); display: grid; place-items: center; color: var(--ink); transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.vcard:hover .vcard-arrow { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vcard-arrow .arr { transition: none; }
.vcard-name { font-family: var(--display); font-weight: 400; font-size: var(--step-1); line-height: 1.08; margin: 0; }
.vcard-type { font-size: var(--step--1); color: var(--grey-warm); }
@media (max-width: 920px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .vcol-tools { flex-direction: column; align-items: stretch; }
  .vsearch { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .vgrid { grid-template-columns: 1fr; gap: 40px; }
  .vcard-media { aspect-ratio: 4/5; }
}

/* ---------- PAGE TRANSITION (gentle dip-through) ---------- */
.page-wipe {
  position: fixed; inset: 0; z-index: 350;
  background: var(--ink-deep);
  pointer-events: none; opacity: 0;
  animation: pageFade 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes pageFade {
  0%   { opacity: 0; }
  44%  { opacity: 1; }
  56%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- SPA page transitions (Astro <ClientRouter />) ----
   A restrained branded cross-dissolve: the outgoing page fades out while the
   incoming page fades up. Replaces the hard white reload flash. Honoured only
   when the View Transitions API is present; older browsers swap instantly. */
::view-transition-old(root) { animation: nmVtOut 260ms var(--ease) both; }
::view-transition-new(root) { animation: nmVtIn 460ms var(--ease) both; }
@keyframes nmVtOut { to { opacity: 0; } }
@keyframes nmVtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* stack 2-column inline grids on mobile (overrides inline grid-template-columns) */
@media (max-width: 760px) {
  .m-stack { grid-template-columns: 1fr !important; }
}

/* ---------- JOURNAL (hub: featured + grid) ---------- */
.jfeat {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px,4vw,56px);
  align-items: center; color: inherit; text-decoration: none;
  margin-bottom: clamp(48px,8vh,96px);
}
.jfeat-media { border-radius: 4px; overflow: hidden; aspect-ratio: 3/2; background: var(--ink-deep); }
.jfeat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jfeat:hover .jfeat-media img { transform: scale(1.04); }
.jfeat-body { display: flex; flex-direction: column; gap: 14px; }
.jfeat-title { font-size: var(--step-3); max-width: 18ch; line-height: 1.06; }
.jcard-meta { color: var(--grey-warm); }
.jcard-stand { color: var(--grey-warm); max-width: 52ch; }

.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px,4vh,56px) clamp(22px,2.4vw,40px); list-style: none; margin: 0; padding: 0; }
.jcard { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.jcard-media { border-radius: 4px; overflow: hidden; aspect-ratio: 3/2; background: var(--ink-deep); margin-bottom: 2px; }
.jcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jcard:hover .jcard-media img { transform: scale(1.04); }
.jcard-title { font-family: var(--display); font-weight: 400; font-size: var(--step-1); line-height: 1.12; max-width: 22ch; margin: 0; }
.jcard-read { margin-top: 2px; }
@media (max-width: 900px) {
  .jfeat { grid-template-columns: 1fr; }
  .jgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .jgrid { grid-template-columns: 1fr; } }

/* article pull-quote (coral-ruled, after the first paragraph) */
.jpull {
  margin: var(--s-5) 0; padding-left: clamp(18px,2vw,28px);
  border-left: 2px solid var(--accent);
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: var(--step-2); line-height: 1.22; max-width: 24ch; color: var(--ink);
}

@media (prefers-reduced-motion: reduce) { .conv-step, .pre-word { animation: none !important; } .hero-atmo .hero-img, .hero-edi .hero-fig img, .vd-hero img { transform: none !important; } .page-wipe { display: none !important; } .mobile-menu, .mm-link, .nav-burger span { transition: none !important; } .mobile-menu, .mm-link { transform: none !important; } }