/*
Theme Name: Vellum — Based In
Theme URI: https://basedin.com/
Author: Bag of Apples
Author URI: https://bagofapples.com
Description: Per-site Vellum child theme for Based In. Pure black/white/red minimal palette; Jost (sans, Futura-style) throughout to match the wordmark.
Template: vellum
Version: 1.6.6
License: GPL-2.0-or-later
Text Domain: vellum-basedin
*/

/* ── FONTS ──
   Jost everywhere. It's a Futura-inspired Google Font that mirrors the
   geometric monoline of the BASED IN wordmark. One typeface, multiple weights. */
:root {
  --font-sans:    "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── PALETTE ──
   Pure black + pure white + brand red. No off-white. Borders for separation, not fills. */
:root {
  --color-bg:         #ffffff;
  --color-text:       #000000;
  --color-text-muted: #666666;
  --color-line:       #e6e6e6;
  --color-accent:     #1e83ed;
  --color-accent-dim: rgba(30, 131, 237, .08);

  /* Surface == bg in this palette. Variable kept for compat; do not fill sections with cream. */
  --color-surface:    #ffffff;
}

/* ── GLOBAL ── */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* All headings in the same thin-uppercase treatment as the BASED IN wordmark.
   Red, thin (200), wide tracking, smaller — meant to read as wordmark-kin. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
/* Reset font-size of inline-styled headings inside .wp-block-html so the
   defaults below take precedence. We can't beat inline style with CSS, so
   we set size via the cascade where there's no inline value. */
h1 { font-size: clamp(18px, 2vw, 24px); line-height: 1.2; }
h2 { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.25; }
h3 { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.3; }

/* Vellum parent CSS has high-specificity rules for its auto page-title banner
   (.vellum-page-title__title) and .display utility — both default to
   font-weight 800 and clamp(40px, 6.5vw, 96px). Override them so they match
   the wordmark-style: thin, small, red, wide-tracked. */
.vellum-page-title__title,
.vellum-page-title__title.display,
h1.display, h2.display, h3.display,
.vellum-hero__name {
  font-family: var(--font-display) !important;
  font-weight: 200 !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  line-height: 1.2 !important;
}

/* ── NAV WORDMARK ──
   Vellum renders the site name as text in .vellum-nav__wordmark. Replace
   that text with the actual BASED IN logo PNG. */
/* inline-flex + center so the logo span sits on the nav's vertical centre,
   level with the burger. (Plain inline-block left baseline/descender space
   below the mark, floating it ~4px above the hamburger on mobile.) */
.vellum-nav__mark { display: inline-flex; align-items: center; }
.vellum-nav__wordmark {
  display: inline-block;
  width: clamp(96px, 12vw, 140px);
  height: 28px;
  /* ?v=2 cache-busts the swap from the old red PNG to the official blue one —
     background-image url()s have no built-in versioning the way wp_enqueue_style
     gets, so a browser that already cached the red bytes at this exact URL
     would otherwise keep showing them until they expire on their own. */
  background: url("/wp-content/uploads/Logo-BasedIn-light-04-1.png?v=2") no-repeat left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  filter: url(#logo-bold);
}

/* ── BRAND WORDMARK ── */
.site-wordmark {
  display: inline-block;
  height: clamp(28px, 3vw, 40px);
  width: auto;
}
.hero .site-wordmark {
  height: clamp(56px, 9vw, 120px);
  margin-bottom: clamp(24px, 3vw, 48px);
}

/* ── COLOR-AS-EMPHASIS ──
   <em> renders as accent color, not italics. */
em, .em {
  font-style: normal;
  color: var(--page-accent, var(--color-accent));
}

/* ── STATEMENT SECTIONS ──
   Full-viewport hero-style sections for vision + safe-haven copy. */
.section--statement {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(64px, 12vh, 160px);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.section--statement p {
  max-width: min(22ch, 88vw);
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── PRICING CARD COMPARISON ──
   Two-card side-by-side on /membership/. Stack on mobile. */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap, 24px);
}
@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-lg, 48px); }
}
.pricing-card {
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pricing-card h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  margin: 0;
}
.pricing-card .price {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.pricing-card ul { list-style: none; padding: 0; margin: 0; }
.pricing-card li {
  padding-block: 14px;
  border-top: 1px solid var(--color-line);
  font-size: var(--type-body);
}
.pricing-card li:first-child { border-top: none; }

/* ── AMENITY GRID ── */
.amenity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap, 24px);
}
@media (min-width: 600px) { .amenity-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .amenity-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-lg, 48px); } }
.amenity-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--color-line);
}
.amenity-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.06em;
}
.amenity-card p {
  color: var(--color-text-muted);
  font-size: var(--type-small);
  margin: 0;
}
.amenity-card figure { margin: 0 0 8px; }
.amenity-card img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── BUTTONS / CTAs ──
   Square corners only. Never rounded. */
.btn,
button,
input[type="submit"],
input[type="button"],
.wpcf7-submit {
  border-radius: 0 !important;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  transition: background var(--dur-xs, .2s) var(--ease), color var(--dur-xs, .2s) var(--ease);
}
.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn--primary:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* ── STICKY MOBILE BOOK-A-TOUR BAR ── */
.sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  :root { --sticky-cta-h: 82px; } /* measured real height (12px pad + content + border) — vhs.css's
                                      timecode/controls clear this so they stop covering the button text */
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-text);
    z-index: 50;
    justify-content: center;
  }
  .sticky-cta .btn { width: 100%; justify-content: center; }
  body { padding-bottom: var(--sticky-cta-h); }
}

/* ── SUBWAY ICON GRAPHIC ── */
.subway-bullets {
  width: auto;
  max-width: min(480px, 100%);   /* never overflow the column on narrow screens */
  height: auto;
  display: block;
  margin-block: clamp(16px, 2vw, 24px);
}

/* ── GOOGLE MAPS EMBED ── */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin-block: clamp(24px, 4vw, 48px);
}

/* ── PHOTO GRID ── */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm, 16px);
}
@media (min-width: 600px) { .photo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--gap, 24px); } }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid figure { margin: 0; aspect-ratio: 4 / 3; }
.photo-grid figure.tall { aspect-ratio: 3 / 4; }
.photo-grid figure.wide { aspect-ratio: 16 / 9; grid-column: span 2; }
@media (max-width: 599px) { .photo-grid figure.wide { grid-column: span 1; } }

/* ── HOMEPAGE NAV LEGIBILITY OVER HERO ───────────────────────────────
   Parent Vellum hides .vellum-nav__mark on .vellum-homepage and runs the
   nav under mix-blend-mode:difference — both unreadable over a photo
   hero. Restore the mark and force solid white nav with a top scrim. */
.vellum-homepage .vellum-nav {
  mix-blend-mode: normal;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
}
.vellum-homepage .vellum-nav__mark { visibility: visible; }
.vellum-homepage .vellum-nav__wordmark {
  filter: brightness(0) invert(1);
}
/* color/opacity/text-shadow removed from here — this rule and the later
   site-wide ".vellum-nav__links a" rule used to share the SAME
   .vellum-homepage-scoped selector, so equal specificity meant source
   order correctly picked the later (blue) one. Making that later rule
   site-wide (dropping its .vellum-homepage scope, so it also covers every
   other page) also dropped its specificity — this rule, still homepage-
   scoped, would otherwise win back on the home page regardless of source
   order and silently undo the blue+bold fix there. */
.vellum-homepage .vellum-nav__burger span { background: #fff; }

/* ── HERO CROSSFADE ──
   Four images stacked, each fades in for ~2s, holds ~6s, fades out as the
   next fades in. 32s loop. Dark scrim + centered tagline on top. */
.hero-crossfade {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 540px;
  overflow: hidden;
  background: #000;
}
.hero-crossfade__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-crossfade 32s infinite linear;
  will-change: opacity;
}
/* will-change permanently force-promotes all 7 crossfade layers to their
   own GPU-composited layer for as long as the page lives — on real mobile
   Safari this measurably contributed to a bug where navigating AWAY from
   the home page left the next page's content unable to paint (confirmed:
   navigating between two pages with no video/crossfade never showed the
   bug; navigating away from home reliably did). The opacity keyframe
   animation still runs fine without the hint — will-change only pre-commits
   the promotion instead of letting the browser decide — so this trades a
   little animation smoothness margin for not starving the next page's
   compositor budget. See vhs-crt-mobile-paint-budget memory notes.
   Matched on (pointer: coarse), not just a narrow max-width — iPadOS
   Safari/Chrome render at a desktop-class viewport width by default, so a
   width-only query misses every iPad, which is exactly the device class
   this was confirmed on. pointer:coarse matches real touch input
   (finger, not mouse) regardless of the reported viewport width. */
@media (max-width: 767px), (pointer: coarse) {
  .hero-crossfade__img { will-change: auto; }
}
.hero-crossfade__img:nth-child(1) { animation-delay: 0s; }
.hero-crossfade__img:nth-child(2) { animation-delay: -8s; }
.hero-crossfade__img:nth-child(3) { animation-delay: -16s; }
.hero-crossfade__img:nth-child(4) { animation-delay: -24s; }
@keyframes hero-crossfade {
  0%, 18.75%   { opacity: 1; }
  25%, 93.75%  { opacity: 0; }
  100%         { opacity: 1; }
}
.hero-crossfade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.15) 28%,
      rgba(0,0,0,.15) 62%,
      rgba(0,0,0,.65) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-crossfade__caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 2;
  padding: clamp(24px, 6vw, 96px);
}
.hero-crossfade__tagline {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(22px, 3.6vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 24ch;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-crossfade__img { animation: none; }
  .hero-crossfade__img:nth-child(1) { opacity: 1; }
}
/* Freezing the crossfade to one still frame is the ONE mode proven
   reliable across every real-device test of the mobile paint-starvation
   bug (see vhs-crt-mobile-paint-budget notes) — applying it on real touch
   hardware too, not just reduced-motion visitors, since the bug reproduced
   on real iPhone/iPad regardless of that OS accessibility setting.
   pointer:coarse (not max-width) so it also catches iPadOS's desktop-width
   default viewport. */
@media (pointer: coarse) {
  .hero-crossfade__img { animation: none; }
  .hero-crossfade__img:nth-child(1) { opacity: 1; }
}

/* ── Real root cause of the mobile paint-starvation bug, found by
   elimination: NOT the video, crossfade, or VHS effect (all individually
   ruled out on real touch-device tests) — a plain, empty 4000px div
   injected into the shortest page on the site reproduced the exact same
   blank-content bug. This is a genuine WebKit compositing-layer-height
   limit on touch/iPad-width viewports: somewhere between ~3300px and
   ~4300px of total page height, content stops painting outright. The
   home page (the only page long enough to cross that line) was the only
   page that ever showed the bug — never the shorter ones.
   content-visibility:auto (the standard browser-native fix for exactly
   this) turned out to be a dead end in this WebKit build: it accepted the
   property but never implemented the actual containment behind it —
   confirmed via getComputedStyle().contain still reading 'none' — while
   its contain-intrinsic-size FALLBACK height was still being applied as a
   forced size on every section regardless of real content, making every
   section render at the placeholder height instead of its own. Removed;
   the real fix is just cutting real height out of the page — see the
   hero/photo-grid/home-feature/padding rules below and the section merges
   in page 7's own content. See vhs-crt-mobile-paint-budget notes. */

/* ── HERO REVISION (round 2) ────────────────────────────────────────
   - Drop the top scrim (nav + hero ::after top stop).
   - Restore red wordmark (remove invert filter).
   - Move tagline out of centered overlay into a flush bottom bar. */
.vellum-homepage .vellum-nav { background: transparent; }
.vellum-homepage .vellum-nav__wordmark { filter: none; }
/* text-shadow rule removed — same specificity trap as the block above:
   this was .vellum-homepage-scoped (0,2,1) and would beat the site-wide
   ".vellum-nav__links a { text-shadow: none; }" rule (0,1,1) on the home
   page regardless of source order, reintroducing the shadow the later
   "no shadow noise" round deliberately removed. */

.hero-crossfade::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)   55%,
    rgba(0,0,0,.28) 100%);
}

.hero-crossfade__caption { display: none; }

.hero-crossfade__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: var(--color-bg);
  border-top: 1px solid var(--color-text);
  padding: clamp(18px, 2.6vw, 32px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.hero-crossfade__bar p {
  margin: 0 auto;
  max-width: 64ch;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.35;
  color: var(--color-accent);
}

/* ── NAV, SITE-WIDE: blue + bold everywhere, not just the home page ──
   Was scoped to .vellum-homepage only — every other page (About,
   Membership, etc.) fell back to the parent theme's default nav color/
   weight instead of matching. Jordan: "blue and bold across the site
   like on the home page." White nav text needed a heavy text-shadow to
   read over light photos — ugly. Match the wordmark color instead: blue
   on whatever's behind it, no shadow noise. */
.vellum-nav__links a {
  color: var(--color-accent);
  opacity: 1;
  text-shadow: none;
  font-weight: 700; /* was inheriting the parent theme's 500 — too thin to read clearly */
}
/* Default hover: white. Jordan's correction — every page BUT the home
   page shows a black nav from the start (not just after scrolling), so
   black hover text there was invisible from the first paint, not just
   in some scrolled edge case. */
.vellum-nav__links a:hover { color: #fff; }
/* Home page ONLY, and only while its nav is still the transparent/over-
   photo state: black holds up against bright photo frames and the light
   top gradient better than white does. Needs .vellum-homepage in the
   selector (not just relying on source order) so it actually outranks
   the site-wide white-hover rule above regardless of where either rule
   sits in the file. */
.vellum-homepage .vellum-nav__links a:hover { color: #000; }
/* Home page ONCE scrolled: it now shares the exact same near-black
   --nav-scrolled-bg background every other page already has, so black
   hover text goes invisible there too — back to white, same as
   everywhere else. Extra specificity (.vellum-homepage AND .is-scrolled
   both present) is what lets this beat the black-hover rule just above
   without caring about source order. */
.vellum-homepage .vellum-nav.is-scrolled .vellum-nav__links a:hover { color: #fff; }
.vellum-nav__burger span { background: var(--color-accent); }
/* Parent theme's gap is clamp(16px, 3vw, 40px) — 20% tighter here. */
.vellum-nav__links { gap: clamp(12.8px, 2.4vw, 32px); }

/* ── HOMEPAGE: subtle white top gradient for nav legibility ──────────
   Pure photo backgrounds make red type wobble on some frames.
   A short white fade across the top of the hero gives the logo + nav
   a stable, brand-consistent backdrop without darkening the image. */
.hero-crossfade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(255,255,255,.78)  0%,
    rgba(255,255,255,.55)  6%,
    rgba(255,255,255,.18) 18%,
    rgba(255,255,255,0)   34%);
  pointer-events: none;
}

/* ── ROUND 32: raise the hamburger breakpoint, not "always hamburger" ──
   Correction from Jordan: NOT hamburger at every width — the regular
   horizontal nav should stay on real desktop/laptop widths; only switch
   to hamburger earlier than the parent's own 860px, specifically to
   cover iPad portrait (up to and including 12.9" Pro at 1024px logical
   width), where "DAY" / "PASS" and "BOOK" / "A" / "TOUR" were wrapping
   mid-phrase even though the parent's breakpoint considered that width
   "desktop." 9 items (About/Membership/Amenities/Neighborhood/Members/
   Contact/Day Pass/Book a Tour/Log In) plus the logo need roughly
   1050-1150px to lay out on one line without wrapping at this font/
   letter-spacing — 1180px clears every iPad portrait width with margin,
   while still showing the full horizontal row on ordinary laptop/desktop
   widths (1280px+). white-space:nowrap on the links themselves is a
   belt-and-suspenders backstop: if some in-between width still doesn't
   have quite enough room, the failure mode becomes a slightly cramped
   row rather than a phrase splitting mid-word again. */
@media (max-width: 1180px) {
  .vellum-nav__links { display: none !important; }
  .vellum-nav__burger { display: flex !important; }
}
@media (min-width: 1181px) {
  .vellum-nav__links a { white-space: nowrap; }
}

/* ── ROUND 4: mobile polish + 7-image hero ──────────────────────────── */

/* 1. Mobile nav overlay — was a fade-in, thin headline treatment;
   Jordan's later call (now that this overlay is the ONLY nav, every
   viewport, per ROUND 32 above) — bold instead of thin, and the items
   spaced out vertically (li margin below), not just packed by their own
   line-height. 700 is the heaviest weight Jost is loaded at (enqueued
   200;300;400;500;700 — see functions.php §1). */
.vellum-nav-overlay li { overflow: visible !important; margin-bottom: clamp(12px, 2vw, 24px); }
.vellum-nav-overlay li:last-child { margin-bottom: 0; }
.vellum-nav-overlay a {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  transform: none !important;
  opacity: 0;
  transition: opacity var(--dur-md, .35s) var(--ease) !important;
}
.vellum-nav-overlay.is-open a {
  transform: none !important;
  opacity: 1;
}
.vellum-nav-overlay a:hover { color: var(--color-text) !important; }

/* 2. Keep the X visible while the overlay is open — nav must sit above it.
   Parent z-indices: --z-overlay=100, --z-nav=60. Bump nav above overlay. */
.vellum-nav { z-index: 110; }

/* 3. Mobile page titles — readable headline size, not 18px. */
@media (max-width: 767px) {
  .vellum-page-title__title,
  .vellum-page-title__title.display,
  h1.display, h2.display, h3.display,
  .vellum-hero__name {
    font-size: clamp(28px, 6.5vw, 36px) !important;
  }
}

/* 4. Mobile logo — at least as tall as the 24px burger. */
@media (max-width: 767px) {
  .vellum-nav__wordmark {
    width: clamp(160px, 44vw, 220px);
    height: 32px;
  }
}

/* 5. 7-image hero crossfade.
   42s cycle, 6s per slot, 1.5s crossfade overlap. */
.hero-crossfade__img { animation-duration: 42s; }
.hero-crossfade__img:nth-child(1) { animation-delay: 0s; }
.hero-crossfade__img:nth-child(2) { animation-delay: -6s; }
.hero-crossfade__img:nth-child(3) { animation-delay: -12s; }
.hero-crossfade__img:nth-child(4) { animation-delay: -18s; }
.hero-crossfade__img:nth-child(5) { animation-delay: -24s; }
.hero-crossfade__img:nth-child(6) { animation-delay: -30s; }
.hero-crossfade__img:nth-child(7) { animation-delay: -36s; }
@keyframes hero-crossfade {
  0%, 10.71%       { opacity: 1; }
  14.29%, 96.43%   { opacity: 0; }
  100%             { opacity: 1; }
}

/* ── ROUND 5: hero never-black base + scroll-aware nav backdrop ───────── */

/* 1. Base photo behind the crossfade. If a slide is mid-fade or a frame
      hasn't painted yet, the fallback is slide 1 — never pure black.
      Slide 1 is already preloaded, so this costs nothing extra. */
.hero-crossfade {
  background-color: #1c1a17;
  background-image: url(/repo/basedin2/wp-content/uploads/based-in-01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 2. White backdrop behind the fixed nav once the user scrolls.
      Transparent at the very top; fades to white for contrast on scroll.
      Applies on desktop and mobile. Red wordmark + links already read
      strongly on white, so no colour change is needed. */
.vellum-nav {
  transition: background-color var(--dur-md, .35s) var(--ease, ease),
              box-shadow var(--dur-md, .35s) var(--ease, ease);
}
.vellum-nav.is-scrolled,
.vellum-homepage .vellum-nav.is-scrolled {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .06);
}

/* 3. When the mobile menu is open, drop the white bar so it matches the
      full-screen overlay (no stray white strip behind the X). */
.vellum-nav.is-open,
.vellum-nav.is-open.is-scrolled {
  background: transparent;
  box-shadow: none;
}

/* ── ROUND 6: About gallery layout + white lightbox + click-to-zoom ───── */

/* About page image gallery: full-width frames + one two-up row. */
.about-gallery { display: flex; flex-direction: column; gap: var(--gap, 24px); }
.about-gallery figure { margin: 0; overflow: hidden; }
.about-gallery img { display: block; width: 100%; cursor: zoom-in; }
.about-full img { height: auto; }            /* natural ratio — never crops the water tower */
.about-pair { display: grid; grid-template-columns: 1fr; gap: var(--gap, 24px); }
@media (min-width: 700px) { .about-pair { grid-template-columns: 1fr 1fr; } }
.about-pair img { aspect-ratio: 4 / 3; object-fit: cover; }  /* equal heights side by side */

/* Home photo-grid images become zoomable too. */
.photo-grid img { cursor: zoom-in; }

/* White lightbox overlay (override Vellum's near-black default) with dark
   controls so the X + chevrons stay visible on white. */
.vellum-lightbox { background: rgba(255, 255, 255, .975); }
.vellum-lightbox__img {
  background: transparent;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
  border-radius: 2px;
}
.vellum-lightbox__caption { color: var(--color-text-muted); }
.vellum-lightbox__prev::before,
.vellum-lightbox__next::before {
  border-top-color: var(--color-text);
  border-left-color: var(--color-text);
}
.vellum-lightbox__close::before,
.vellum-lightbox__close::after { background: var(--color-text); }

/* ── ROUND 7: tighten home vertical rhythm ───────────────────────────────
   The statement band was min-height:80vh + 160px padding — a near-full
   screen of whitespace. Collapse to content height with breathing room. */
.section--statement {
  min-height: 0;
  padding-block: clamp(40px, 7vw, 88px);
}

/* ── ROUND 8: Neighborhood guide (member-curated local spots) ─────────── */
.nbh-head {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) clamp(24px, 5vw, 86px) clamp(20px, 3vw, 36px);
  text-align: center;
}
.nbh-head__eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.nbh-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0;
  color: var(--color-accent);
}
.nbh-head__intro {
  max-width: 58ch;
  margin: 18px auto 0;
  color: var(--color-text-muted);
}
.nbh-head__intro p { margin: 0; }

.nbh-cat {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(24px, 5vw, 86px);
}
.nbh-cat__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .04em;
  margin: 0 0 clamp(20px, 3vw, 34px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}

.nbh-list { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }

.nbh-entry { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 40px); }
@media (min-width: 760px) {
  .nbh-entry { grid-template-columns: minmax(0, 42%) 1fr; align-items: center; }
}
.nbh-entry__media { margin: 0; overflow: hidden; background: var(--color-surface, #efe7d6); }
.nbh-entry__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }

.nbh-entry__cat {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--color-accent);
  margin: 0 0 10px;
}
.nbh-entry__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.nbh-entry__desc { color: var(--color-text); }
.nbh-entry__desc p { margin: 0 0 12px; }
.nbh-entry__why {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 4px 0 16px;
}
.nbh-entry__why span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--color-text);
  margin: 0 0 3px;
}
.nbh-entry__addr {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}
.nbh-entry__link { display: inline-block; }

/* ── ROUND 9: Neighborhood intro tidy + Amenities tighter grid & lightbox ── */

/* Neighborhood intro styling is carried by inline styles in the page content
   (lead + muted body), mirroring the About page — no .nbh-intro p rule, so the
   two pages render identically. See Round 11. */
.nbh-cat:first-of-type { padding-top: clamp(8px, 2vw, 24px); }

/* Amenities: tighter gaps so each box (and its photo) reads larger.
   Images become click-to-zoom lightbox items. */
.amenity-grid { gap: clamp(10px, 1.4vw, 16px) !important; }
@media (min-width: 1024px) {
  .amenity-grid { gap: clamp(12px, 1.2vw, 18px) !important; }
}
.amenity-card img { cursor: zoom-in; }

/* ── ROUND 10: heavier page titles ───────────────────────────────────────
   The page-title banner was font-weight 200 (hairline) and read too thin.
   Bump to 400 (Jost is loaded 200;300;400;500) across every page title. */
.vellum-page-title__title,
.vellum-page-title__title.display,
h1.display, h2.display, h3.display,
.vellum-hero__name {
  font-weight: 400 !important;
}

/* ── ROUND 11: title weight dial-back, neighborhood intro = about text,
   mobile logo matched to the burger height ───────────────────────────────── */

/* 1. Page titles read too bold at 400. Step down to 300 — heavier than the
   old hairline 200, lighter than 400. */
.vellum-page-title__title,
.vellum-page-title__title.display,
h1.display, h2.display, h3.display,
.vellum-hero__name {
  font-weight: 300 !important;
}

/* 2. Neighborhood intro now mirrors the About page exactly: the page content
   (page 432) carries the same inline-styled markup the About page uses — a
   black lead paragraph (font-size clamp(18px,1.8vw,22px), <em> = red) over a
   muted-grey body paragraph (max-width:60ch). No .nbh-intro p override here,
   so both pages style this content identically via those inline styles. */

/* 3. Mobile logo as tall as the 24px burger. The logo PNG has ~8px of
   transparent padding top/bottom (ink ratio .87), and the previous 32px box
   got width-limited, so the mark rendered shorter than the burger. Give it a
   height-limited box: 28px tall → ~24px of visible ink, matching the burger. */
@media (max-width: 767px) {
  .vellum-nav__wordmark {
    width: 188px;
    height: 28px;
  }
}

/* ── ROUND 12: Contact page — location + map side by side ──────────────────
   The top of /contact/ was three stacked sections (info, then map, then form).
   Put the location details and the map in a two-column row so they scan
   together; the HR + contact form stay as a separate section below. Stacks
   to one column on narrow screens. */
.contact-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 56px);
}
@media (min-width: 860px) {
  .contact-twocol { grid-template-columns: 1fr 1fr; }
  /* Map column fills the row height so it balances the taller info column. */
  .contact-col-map { display: flex; flex-direction: column; }
  .contact-twocol .map-embed {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 360px;
    margin-block: 0;
  }
}

/* ── ROUND 13: full-width atmosphere image bands on home ──────────────────
   Three full-bleed photo bands break up the lower half of the home page and
   add depth/atmosphere — member lounge after Memberships, pressed-tin ceiling
   after the Statement, and the rooftop skyline before Visit. They match the
   hero's full-viewport width and keep a consistent height + vertical rhythm so
   the page reads richer without crowding the existing sections. */
.home-feature {
  width: 100%;
  margin-block: clamp(8px, 2vw, 28px);
  overflow: hidden;
  background: var(--color-bg, #fff);
}
.home-feature img, .home-feature video {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 560px);
  object-fit: cover;
  object-position: center;
}
@media (max-width: 600px) {
  .home-feature { margin-block: clamp(6px, 4vw, 18px); }
  .home-feature img, .home-feature video { height: clamp(220px, 58vw, 340px); }
}

/* ── home page height reduction (mobile paint-limit fix) ──────────────────
   Folds the lounge/ceiling break images into the sections around them
   (statement text, amenities) instead of each being its own full-bleed
   .home-feature band — two fewer sections, two fewer sets of section
   padding, and each image is now a smaller inline element rather than a
   clamp(300px,44vw,560px) full-width band. Part of getting the home page's
   total height under the ~3300-4300px WebKit compositing limit found on
   touch/iPad-width viewports — see vhs-crt-mobile-paint-budget notes. */
.home-highlight__img {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 240px);
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.section--statement__text {
  max-width: min(28ch, 90vw);
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

/* further home-page height reduction, pointer:coarse only — the hero at
   88vh alone was ~1050px on iPad's viewport height, the photo grid was
   2 rows at this width (its 3-column breakpoint doesn't kick in until
   1024px), and the rooftop band was still the old clamp(300px,44vw,560px)
   full-size treatment the lounge/ceiling images moved away from above.
   Same threshold-fix effort as the section merges — see
   vhs-crt-mobile-paint-budget notes. */
@media (pointer: coarse) {
  .hero-crossfade { height: 60vh; min-height: 420px; }
  .photo-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-sm, 10px); }
  /* !important: a later same-specificity rule ("ROUND 14") sets
     height:auto; max-height:86vh (intrinsic aspect ratio, ~86vh cap) which
     otherwise wins on source order and silently no-ops this override. */
  .home-feature img, .home-feature video { height: clamp(160px, 26vw, 240px) !important; max-height: none !important; }
  /* every remaining Home section sets its own inline clamp()-based padding
     (page-content, not a class) — !important is the only way to reach
     those from here. Still comfortably legible at these sizes, just not
     the desktop-generous version. */
  .vellum-homepage main section:not(.hero-crossfade) {
    padding-top: clamp(16px, 3vw, 32px) !important;
    padding-bottom: clamp(16px, 3vw, 32px) !important;
  }
}

/* ── ROUND 14: home image bands — show more of the photo + sit flush to the
   rule lines. Previous fixed height cropped ~45% off each frame; switch to
   intrinsic height (uncropped) with a tall-screen safety cap. margin-block:0
   lets each band meet the adjacent 1px rule (statement/visit borders) flush —
   killing the sliver of white that sat between a band and the line — while the
   neighbouring sections' own padding still provides breathing room elsewhere. */
.home-feature { margin-block: 0; }
.home-feature img, .home-feature video {
  height: auto;
  max-height: 86vh;
  object-fit: cover;
  object-position: center;
}

/* ── ROUND 15: vertically center the statement copy ────────────────────────
   .section--statement is display:grid; place-items:center, but the parent's
   default paragraph margin left a 56px margin-bottom on the <p>, so the
   centred grid item carried dead space below — pushing the text visually high
   in the band. Zero the margin so the copy sits true-centre between the rules. */
.section--statement p { margin: 0; }

/* ── ROUND 16: kill the mobile tap-highlight box ───────────────────────────
   iOS/Android paint a faint dark box (-webkit-tap-highlight-color) around a
   tapped link for a beat before navigation — most visible on the mobile nav
   overlay items right before the page transition. Zero it out site-wide. */
.vellum-nav-overlay a,
.vellum-nav__links a,
.vellum-nav a,
a, button, .btn, .vellum-btn,
summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* ── ROUND 17: lift the transition curtain above the mobile menu overlay ────
   The curtain (z 50) sat BELOW the open mobile nav overlay (z 100), so on a
   nav-link tap the overlay's white menu panel fades out OVER the rising
   curtain and its links are still partly visible at the navigation instant —
   a flicker where the outgoing page/menu doesn't fully fade. Lift the curtain
   to 105: ABOVE the overlay (100) so it fully covers the menu before we
   navigate, but BELOW the nav bar (110) so the desktop nav still stays put
   through the fade (desktop behaviour unchanged — it has no overlay). */
:root { --z-curtain: 105; }
.vellum-curtain { z-index: 105; }

/* ── ROUND 18: Book-a-tour Calendly embed — kill cookie banner, tighten, ───
   enlarge on mobile. The calendar is a cross-origin Calendly iframe, so we
   can't touch ITS internal margins, but on the embed URL we now (a) load the
   embed-optimised layout (embed_type=Inline) which fills the frame and drops
   Calendly's page chrome, and (b) hide its cookie/GDPR banner
   (hide_gdpr_banner=1). Here we trim OUR padding + size the frame per
   breakpoint so the calendar gets more room and less white edge. */
.book-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px) clamp(28px, 5vw, 56px);
}
.book-embed {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 640px;
}
.book-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.book-note { margin-top: 20px; color: var(--color-text-muted); max-width: 60ch; }
.book-note a { color: var(--color-accent); text-decoration: none; }

@media (max-width: 860px) {
  .book-section { padding: 0 8px clamp(24px, 6vw, 40px); }
  .book-embed   { height: 86vh; min-height: 600px; }
}

/* ── ROUND 19: mobile legibility — raise the type floor ────────────────────
   Body copy rendered at 15px on phones (the clamp floor) and small labels at
   11-12px — below the ~16px modern mobile baseline (also the iOS no-zoom-on-
   focus threshold). We raise the token FLOORS only; the desktop maximums are
   unchanged, so the refined desktop scale is untouched and only small screens
   get larger, more legible text. Headlines already sit at 28px+ on mobile, so
   only h4 (was 16px) gets a nudge. Override the variables, not the rules. */
:root {
  --type-body:    clamp(16.5px, 1.3vw, 18px);  /* mobile floor 15  -> 16.5 */
  --type-small:   clamp(13px,   1vw,   14px);  /* mobile floor 12  -> 13   */
  --type-eyebrow: clamp(12px,   .85vw, 13px);  /* mobile floor 11  -> 12   */
  --type-h4:      clamp(18px,   1.8vw, 24px);  /* mobile floor 16  -> 18   */
}

/* ── ROUND 20: Book-a-tour — tighten the vertical space around the calendar ─
   Two gaps were oversized: (1) the parent page-title banner adds
   clamp(40px,6vh,80px) BELOW the "Book a tour" title before our section
   (which has 0 top padding) — a big title-to-calendar gap; (2) the embed
   frame used a tall vh height, so on roomy screens the Calendly calendar
   (shorter now that the event-details panel is hidden) leaves empty space
   below it before the helper text. Pull the title closer and cap the frame
   height so it fits the calendar. Scoped to this page (.page-id-52). */
.page-id-52 .vellum-page-title { padding-bottom: clamp(16px, 2.5vh, 28px); }
.book-embed { height: clamp(560px, 70vh, 660px); min-height: 0; }
.book-note  { margin-top: 14px; }
@media (max-width: 860px) {
  .page-id-52 .vellum-page-title { padding-bottom: clamp(12px, 2vh, 20px); }
  .book-embed { height: clamp(520px, 80vh, 720px); }
}

/* ── ROUND 21: Book-a-tour — auto-resizing Calendly embed + tighter bottom ──
   Switched from a fixed-height iframe to Calendly's official inline widget
   (widget.js, enqueued on this page), which sizes the frame to the calendar's
   real height — so there's no empty band below the calendar before the helper
   text. We set width only; widget.js owns the height. Also pull the helper
   text in and trim the footer gap on this short page so it doesn't float. */
.calendly-inline-widget { width: 100%; min-width: 320px; }
.book-section { padding-bottom: clamp(16px, 3vw, 28px); }
.book-note    { margin-top: 16px; }
.page-id-52 .vellum-footer { margin-top: clamp(28px, 5vw, 48px); }
@media (max-width: 860px) {
  .book-section { padding-bottom: 12px; }
  .page-id-52 .vellum-footer { margin-top: 28px; }
}

/* ── ROUND 22: Book-a-tour — robust raw iframe at a FIXED px height ─────────
   Reverts R21's widget.js inline embed: Calendly inline does NOT auto-resize
   (it needs an explicit height), so with no height the frame collapsed and
   clipped the calendar grid. Root cause of the earlier empty space was the
   vh-based height ballooning on tall screens — a FIXED px height fits the
   calendar on any device. The raw iframe always renders and scrolls
   internally if a selected date adds time slots, so nothing is ever cut off. */
.book-embed { height: 660px; min-height: 0; }
.book-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .book-embed { height: 620px; } }

/* ── ROUND 23: FAQ accordion + Day Pass page ───────────────────────────────
   New pages: /faq (native <details> accordion, no JS) and /day-pass (mirrors
   the book-a-tour layout; the embed is a placeholder pending the Calendly
   Day Pass event link). Both created as drafts. */
.faq-section { padding: 0 clamp(24px,5vw,86px) clamp(40px,6vw,72px); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details { border-top: 1px solid var(--color-line); padding: clamp(16px,2.4vw,24px) 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--color-line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px,1.8vw,21px); color: var(--color-text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--color-accent); font-size: 1.5em; line-height: 1; transition: transform var(--dur-sm,.25s) var(--ease,ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 14px 0 0; max-width: 64ch; color: var(--color-text-muted); }
.faq-list a { color: var(--color-accent); text-decoration: none; }
.faq-list a:hover { text-decoration: underline; }

/* Day Pass copy + placeholder embed */
.daypass-intro { max-width: 760px; margin: 0 auto clamp(28px,4vw,44px); text-align: center; }
.daypass-lead { font-size: clamp(18px,1.6vw,22px); max-width: 46ch; margin: 0 auto 20px; }
.daypass-price { font-family: var(--font-display); font-size: clamp(26px,3vw,40px); margin: 0 0 10px; }
.daypass-price strong { color: var(--color-accent); font-weight: 500; }
.daypass-includes { color: var(--color-text-muted); max-width: 52ch; margin: 0 auto 16px; }
.daypass-credit { color: var(--color-accent); font-family: var(--font-display); letter-spacing: .02em; margin: 0 auto; max-width: 46ch; }
.daypass-pending { display: grid; place-items: center; background: var(--color-accent-dim); border: 1px dashed var(--color-line); color: var(--color-text-muted); text-align: center; padding: 24px; }

/* ── ROUND 24: Day Pass "launching soon" state ─────────────────────────────
   Day Pass published before the Calendly booking exists, so the embed is
   replaced by a launch-soon message + tour/email CTA. Swap back to the
   bookable layout (book-embed iframe + price) once the Calendly link lands. */
.daypass-soon { color: var(--color-text-muted); max-width: 52ch; margin: 14px auto 0; }
.daypass-intro a { color: var(--color-accent); text-decoration: none; }
.daypass-intro a:hover { text-decoration: underline; }

/* ── ROUND 25: Book-a-tour — remove the desktop calendar scrollbar ──────────
   Calendly's desktop month calendar runs slightly taller than the 660px
   frame, so it showed an internal scrollbar on desktop (mobile content fit
   620px fine, hence no scrollbar there). Raise the desktop frame so the
   calendar fits without scrolling; mobile height unchanged. Selecting a date
   shows the time column beside the calendar (same height), so this is the
   tallest desktop state. */
.book-embed { height: 740px; }
@media (max-width: 860px) { .book-embed { height: 620px; } }

/* ── ROUND 26: Day Pass — Based In "movie ticket" hero ─────────────────────
   Replaces the launching-soon text with a branded admission-ticket graphic
   that animates in, plus a "Get a Day Pass" CTA that is a no-op placeholder
   (a <button> with no handler) to be wired to the real booking later. The
   generic page-title banner is suppressed so the ticket is the page hero; the
   ticket's <h1> carries the page heading. Old .daypass-soon/-intro CSS is now
   inert. */
.page-id-462 .vellum-page-title { display: none; }
.daypass { max-width: 900px; margin: 0 auto; text-align: center;
  padding: clamp(90px,12vh,140px) clamp(24px,5vw,48px) clamp(48px,6vw,72px); }
.daypass-lead2 { max-width: 42ch; margin: 0 auto clamp(28px,4vw,44px);
  color: var(--color-text-muted); font-size: clamp(16.5px,1.4vw,18px); }

.ticket { position: relative; display: flex; width: min(640px,100%); margin: 0 auto;
  background: #fff; border: 1.5px solid var(--color-text); text-align: left;
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.45);
  animation: ticket-in .9s cubic-bezier(.2,.75,.2,1) both .12s; }
.ticket__main { flex: 1; padding: clamp(24px,3.5vw,40px); }
.ticket__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 12px;
  color: var(--color-accent); font-weight: 500; margin: 0 0 16px; }
.ticket__title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(40px,6vw,66px); line-height: .92; letter-spacing: .01em; margin: 0 0 12px; }
.ticket__sub { text-transform: uppercase; letter-spacing: .14em; font-size: 13px;
  color: var(--color-text-muted); margin: 0 0 24px; }
.ticket__list { list-style: none; padding: 0; margin: 0; }
.ticket__list li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--color-line); }
.ticket__list li:first-child { border-top: 0; }

.ticket__stub { width: clamp(96px,16vw,134px); background: var(--color-accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 24px 0; position: relative; border-left: 2px dashed rgba(255,255,255,.5); }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; left: -10px;
  width: 18px; height: 18px; background: var(--color-bg); border-radius: 50%;
  border: 1.5px solid var(--color-text); }
.ticket__stub::before { top: -10px; }
.ticket__stub::after { bottom: -10px; }
.ticket__admit { writing-mode: vertical-rl; transform: rotate(180deg);
  text-transform: uppercase; letter-spacing: .32em; font-size: 13px; font-weight: 600; }
.ticket__barcode { width: 56%; height: 48px;
  background-image: repeating-linear-gradient(90deg,#fff 0,#fff 2px,transparent 2px,transparent 5px); }
.ticket__no { font-size: 11px; letter-spacing: .12em; opacity: .85; }

.daypass-cta-wrap { margin: clamp(30px,4vw,44px) 0 0; }
.daypass-cta { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.daypass-cta:hover { background: #c4291f; border-color: #c4291f; color: #fff; }
.daypass .book-note { margin: clamp(22px,3vw,34px) auto 0; }

@keyframes ticket-in {
  0%   { opacity: 0; transform: translateY(56px) rotate(-5deg) scale(.9); }
  62%  { opacity: 1; transform: translateY(-9px) rotate(1.6deg) scale(1.014); }
  100% { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ticket { animation: none; } }

@media (max-width: 600px) {
  .ticket { flex-direction: column; width: min(420px,100%); }
  .ticket__stub { width: auto; flex-direction: row; gap: 18px; justify-content: center;
    border-left: 0; border-top: 2px dashed rgba(255,255,255,.5); padding: 16px 22px; }
  .ticket__stub::before { left: -10px; top: -10px; bottom: auto; }
  .ticket__stub::after { left: auto; right: -10px; top: -10px; bottom: auto; }
  .ticket__admit { writing-mode: horizontal-tb; transform: none; letter-spacing: .2em; }
  .ticket__barcode { width: 130px; height: 34px; }
}

/* ── ROUND 27: Day Pass ticket — remove the perforation notch circles ───────
   The two white-with-black-outline circles at the top and bottom of the
   white/red seam read as stray dots, not ticket notches. Remove them; the
   dashed perforation line stays. */
.ticket__stub::before, .ticket__stub::after { display: none; }

/* ── ROUND 28: Footer nav — wrap links on narrow screens ───────────────────
   The footer menu (.vellum-footer__links) was a single non-wrapping flex row;
   with 7 links it overflowed off the right edge on mobile. Allow it to wrap,
   and tighten the gap a touch on small screens so wrapped rows sit neatly. */
.vellum-footer__links { flex-wrap: wrap; }
@media (max-width: 600px) {
  .vellum-footer__links { gap: 12px 18px; }
}

/* ── ROUND 29: Members page — section headings + member card grid ─────────
   New /members/ page spotlights current + former Based In members. Section
   headings reuse the Neighborhood page's .nbh-cat__title treatment (Jost 300,
   bottom rule) under new .member-section classes so this page doesn't couple
   to the neighborhood plugin templates. Cards mirror .amenity-card (border,
   padding, figure+h3+p) with added support for a small multi-photo row for
   team/duo credits, plus an external "Visit their site" link styled off the
   accent color. All spacing/line/motion values are the existing tokens. */
.member-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(24px, 5vw, 86px);
}
.member-section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .04em;
  margin: 0 0 clamp(20px, 3vw, 34px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap, 24px);
}
@media (min-width: 1024px) {
  .member-grid { gap: var(--gap-lg, 48px); }
}

.member-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--color-line);
}
.member-card__photo { margin: 0 0 8px; }
.member-card__photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.member-card__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
/* ROUND 30: was hard-locked at 56x56 (tiny thumbnails); now scales to fill
   the row like .member-card__photo, 2-up by default and wrapping cleanly
   into a 2x2 grid for 4-photo cards. */
.member-card__photos img {
  flex: 1 1 calc(50% - 4px);
  min-width: 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;
}
.member-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  margin: 0;
  letter-spacing: .02em;
}
.member-card__names {
  font-size: var(--type-small);
  color: var(--color-text-muted);
  margin: -8px 0 0;
}
.member-card__desc {
  color: var(--color-text-muted);
  font-size: var(--type-small);
  margin: 0;
  flex: 1;
}
.member-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-small);
  color: var(--color-accent);
  text-decoration: none;
  margin-top: 4px;
  transition: color var(--dur-xs, .2s) var(--ease, ease);
}
.member-card__link:hover { text-decoration: underline; }

/* ── ROUND 31: dark color scheme (basedin2 clone only, CRT/VHS glaze pass) ──
   Inverts the underlying site from Vellum's default light palette to a deep
   near-black background with light/cream text — done entirely via the
   token override convention (redeclare the same custom properties the
   parent + Round 1 palette already define; touch no component selectors)
   so every already-tokenized rule across this stylesheet, components.css,
   and the CF7 form styles (all built on --color-* and --page-* tokens) repaints
   automatically. --color-accent is deliberately left untouched: the brand
   red already matches the CRT effect's own "REC" red, and the near-black
   background is the same --tape:#0a0910 the reference CRT piece itself was
   designed against — this is the correct pairing for the glaze, not an
   unrelated restyle.

   Two hardcoded (non-token) colors elsewhere in this file assumed a light
   page and would otherwise break under this inversion — a literal white
   scrolled-nav backdrop and a literal white Day-Pass ticket card, both of
   which would leave now-light token-driven text sitting on a now-wrong
   white surface. Both are overridden below to reference the (also
   overridden) tokens instead, rather than staying hardcoded. The Round 6
   "white lightbox" override needed the same fix — its background was the
   one hardcoded value in that block; its caption/chevron/close-icon colors
   already referenced --color-text/--color-text-muted and repaint correctly
   on their own. */
:root {
  --color-bg:          #0a0910;
  --color-text:        #e4e2d6;
  --color-text-muted:  rgba(228, 226, 214, .64);
  --color-line:        rgba(228, 226, 214, .14);
  --color-accent-dim:  rgba(30, 131, 237, .16);   /* was .08 — needs more alpha to read against near-black */
  --color-surface:     var(--color-bg);          /* "surface == bg" per the palette's own original comment — stays true in the dark version */

  --nav-scrolled-bg:   rgba(10, 9, 16, .92);      /* Vellum token; Round 5 below overrides it to reference this instead of a literal #fff */
}

/* Round 5's scrolled-nav backdrop was a literal #fff, not the
   --nav-scrolled-bg token it should have used — harmless on the original
   light palette (its default is a near-white rgba anyway) but wrong now.
   Point it at the token, which is dark in this scheme. */
.vellum-nav.is-scrolled,
.vellum-homepage .vellum-nav.is-scrolled {
  background: var(--nav-scrolled-bg);
}

/* Round 6's lightbox override went white to put dark controls over a
   light overlay; the controls (caption/chevrons/close) already read off
   --color-text/--color-text-muted so they flip automatically, but the
   overlay itself was a literal near-white rgba. Dark overlay + now-light
   controls reproduces the same relative contrast the original design had. */
.vellum-lightbox { background: rgba(10, 9, 16, .975); }

/* Round 26's Day-Pass ticket card was a literal #fff "paper" card; its own
   text (ticket__sub, ticket__list) relies on --color-text/--color-text-muted,
   which are now light — a light-on-white card would go illegible. Match the
   card to the page instead of keeping it a light paper card. */
.ticket { background: var(--color-bg); }

/* VHS glaze legibility pass: the site's thin-uppercase heading treatment
   (200 base, 300 on page-title banners per ROUND 10/11) reads fine on a
   crisp screen but goes soft/hard-to-read once vhs.js's blur + chromatic
   aberration + desaturation are layered on top. Bump both to 500 — the
   boldest weight Jost is already loaded at (200;300;400;500), so this adds
   no new font request. Base h1/h2/h3 covers in-content headings the
   ROUND 10/11 .display-scoped rules below don't reach; both need bumping
   since neither alone accounted for the glaze sitting on top of it. */
h1, h2, h3 {
  font-weight: 500;
}
.vellum-page-title__title,
.vellum-page-title__title.display,
h1.display, h2.display, h3.display,
.vellum-hero__name {
  font-weight: 500 !important;
}

/* ── ROUND 32: light mode drops the VHS blur + chromatic aberration ────────
   The tape signal chain reads as a tape artifact on the dark scheme, but on
   the light scheme (cream ground, blue type) the red/cyan split and the
   0.55px gaussian stopped reading as "tape" and just read as out-of-focus
   text and photos. So light mode rebuilds #vellum-main's filter list from
   assets/css/vhs.css WITHOUT blur() and WITHOUT url(#vhs-ca). The tear
   burst and the colour grade stay, so light mode still moves and still
   grades like tape, it is just crisp.

   Done as a CSS override rather than by zeroing --vhs-ca, because vhs.js
   only re-reads that variable inside applyCA(), which fires on wear change
   and on init but NOT on a theme toggle — so a variable override would sit
   inert until the next wear change. --vhs-blur is pure CSS and would have
   worked, but keeping both halves of the fix in one rule beats splitting it
   across two mechanisms.

   Specificity: (0,1,1,1) here vs (0,1,0,0) for the base #vellum-main rule,
   so this wins regardless of sheet order. Dark mode is untouched. */
html[data-theme="light"] #vellum-main {
	filter:
		url(#vhs-tear)
		saturate(calc(1 + (var(--vhs-sat) - 1) * var(--vhs-wear)))
		contrast(calc(1 + (var(--vhs-contrast) - 1) * var(--vhs-wear)))
		brightness(calc(1 + (var(--vhs-bright) - 1) * var(--vhs-wear)));
}

/* ── ROUND 33: light mode — crisp everything OUTSIDE #vellum-main ──────────
   ROUND 32 only cleaned the main content filter. The header sits outside
   #vellum-main, so the wordmark and the side borders kept their own
   edge-softening filters and still read as blurry next to now-crisp body
   copy. Audited the live page for every element with a computed filter in
   light mode; these were the two that touch what you actually look at.

   .vellum-nav__wordmark carried url(#logo-bold), an feMorphology dilate at
   radius 0.55 that thickens the mark. On the dark scheme that reads as a
   heavier logo; on the light scheme, against the cream ground, the dilated
   edge reads as a doubled ghost outline.

   .vhs-border-fx carried blur(2.5px) plus two opposed white drop-shadows,
   which is the red/cyan-style fringe tracing the wavy side strips. The
   strips themselves stay; only the fringe and blur go.

   Not touched: the grain canvas and the .vhs-grade tint. Neither softens an
   edge, and .vhs-grade is what gives light mode its cream cast — removing it
   would flip the background to stark white, a bigger change than asked for. */
html[data-theme="light"] .vellum-nav__wordmark { filter: none; }
html[data-theme="light"] .vhs-border-fx { filter: none; }

/* ── ROUND 33b: "Design by BOA" footer credit ─────────────────────────────
   Rendered by vellum_child_render_footer() in functions.php. Sits inline
   next to the copyright so the whole credit reads as one bottom-left line;
   wraps to its own line on narrow screens rather than crowding the year. */
/* Sentence-punctuated credit: "(c) 2026 Based In. Design by BOA" — the period
   does the separating, so the span needs no left margin beyond the space
   already in the markup. Sized down to the house --type-small token rather
   than an arbitrary px value, so it tracks the rest of the scale. */
.vellum-footer__credit { font-size: var(--type-small); }
.vellum-footer__by { margin-left: 0; }
.vellum-footer__by a { color: var(--color-accent); text-decoration: none; }
.vellum-footer__by a:hover,
.vellum-footer__by a:focus-visible { text-decoration: underline; }

/* ── ROUND 41: mobile footer credit — one line, below the links ───────────
   The earlier 480px rule dropped "Design by BOA" onto its own line, which
   made the credit two lines tall and left it stranded ABOVE the footer
   links. Both wrong: it should read as a single line and sit at the very
   bottom, under the links.

   .vellum-footer__inner is already display:flex, so `order` does the
   reordering without touching vellum_child_render_footer()'s markup —
   which matters, because the DOM order is the correct reading order for
   screen readers and for desktop, and only the visual order changes here.
   width:100% forces it onto its own flex line rather than trying to sit
   beside the links.

   nowrap on the whole credit, not just the span: without it the line can
   still break between "Based In." and "Design", which is the same two-line
   result by another route. Measured at 14px Jost the full string is ~195px,
   so it fits comfortably even on a 320px iPhone SE.

   Breakpoint raised 480 -> 600 to match the footer-links wrap rule, so both
   footer adjustments start at the same width instead of one kicking in
   partway through the other. */
@media (max-width: 600px) {
	.vellum-footer__inner { flex-wrap: wrap; }
	.vellum-footer__links  { order: 1; }
	.vellum-footer__credit {
		order: 2;
		width: 100%;
		white-space: nowrap;
	}
	/* margin-left:0, matching desktop. The 6px here was left over from when
	   this span sat on its own line and needed separating; inline, it stacks
	   on top of the word space already in the markup and reads as a double
	   space after "Based In." The period is the separator now. */
	.vellum-footer__by { display: inline; margin-left: 0; margin-top: 0; }
}

/* ── ROUND 34: light mode — header nav hover is black, never white ─────────
   The dark scheme layers three hover rules: white site-wide, black on the
   unscrolled homepage (over the photo hero), then white again once the
   homepage nav picks up the near-black --nav-scrolled-bg. Light mode
   redefines --nav-scrolled-bg to #fff, so the two white-hover rules put
   white text on a white bar and the link vanished on hover.

   Two rules, because the dark-scheme ones sit at different specificities
   and this has to outrank BOTH:
     .vellum-nav__links a:hover                                    (0,0,2,1)
     .vellum-homepage .vellum-nav__links a:hover                   (0,0,3,1)
     .vellum-homepage .vellum-nav.is-scrolled .vellum-nav__links a:hover  (0,0,5,1)
   The first rule below is (0,0,3,2) so it takes the first two; the second
   mirrors the scrolled selector at (0,0,6,2) so it takes the third. Source
   order is irrelevant either way, which is the point.

   :focus-visible rides along so keyboard users get the same affordance —
   the dark-scheme rules only ever styled :hover. */
html[data-theme="light"] .vellum-nav__links a:hover,
html[data-theme="light"] .vellum-nav__links a:focus-visible { color: #000; }

html[data-theme="light"] .vellum-homepage .vellum-nav.is-scrolled .vellum-nav__links a:hover,
html[data-theme="light"] .vellum-homepage .vellum-nav.is-scrolled .vellum-nav__links a:focus-visible { color: #000; }

/* ── ROUND 35: the Off toggle is genuinely clean, in BOTH themes ───────────
   vhs.css calls :root.vhs-off "the reachable, genuinely-clean state" and
   gets most of the way there: grain, head-switch, border, grade, timecode
   and dropout are all forced to opacity 0, and --vhs-wear ramps to 0 so
   #vellum-main's blur and colour terms lerp to neutral.

   Two things that state never reached, which is why Off still looked soft:

   1. .vellum-nav__wordmark's url(#logo-bold) — an feMorphology dilate that
      is a flat filter, not a function of --vhs-wear, so no amount of wear
      ramping removes it. The logo kept its doubled edge with the tape off.
   2. #vellum-main's filter only becomes neutral IF --vhs-wear truly lands
      on 0. Every term is calc()-driven off that one scalar, so a ramp that
      stops slightly short leaves a fractional blur and a live url(#vhs-ca)
      in the chain. Asserting filter:none removes the dependency entirely
      rather than trusting the ramp to finish exactly.

   .vhs-border-fx is included for the same reason as ROUND 33: its child
   .vhs-border is already opacity 0 here so nothing renders, but leaving a
   blur + two drop-shadows on a live element is a GPU pass for nothing.

   Specificity note: this is (1,2,0) against ROUND 32's light-mode rule at
   (1,1,1), so Off wins in light mode too — which is correct. Off should
   mean off regardless of which theme you are in. */
:root.vhs-off #vellum-main { filter: none; }
:root.vhs-off .vellum-nav__wordmark { filter: none; }
:root.vhs-off .vhs-border-fx { filter: none; }

/* ── ROUND 36 (revised): paused tape collapses the bar, with animation ─────
   With the effect off there is nothing for the Tracking slider to act on,
   so it sat there disabled at opacity .35 — visible, dead, and holding the
   bar at full width. Off now collapses the label and the slider so only the
   transport button and the theme button remain; play restores them, since
   vhs.js drops .is-off from .vhs-controls.

   First version used display:none, which popped. This animates instead:
   max-width 0 + opacity 0 + overflow hidden, so both items shrink to
   nothing and the bar's width follows continuously.

   The negative margin is the part that is easy to get wrong. .vhs-controls__bar
   is a flex row with gap:10px and four children, so three gaps, 30px. Items
   collapsed to zero width still sit in the row and still generate their
   gaps, so without compensation the "collapsed" bar would keep 30px of gap
   and visibly fail to close up. margin-right:-10px on each collapsed item
   cancels exactly the two gaps they contribute, leaving the single 10px gap
   between the two buttons:
       0 (-10) + 0 (-10) + btn + btn + 30  =  btn + btn + 10
   Both are transitioned too, otherwise the width would animate while the
   gap jumped in one step.

   Explicit max-width on the open state is required — a transition cannot
   interpolate from `auto`, so the values are the natural widths (the slider
   is exactly 110px; the label gets headroom for the uppercase tracking).
   pointer-events:none stops the invisible slider swallowing clicks mid-
   collapse. Height and the bottom-right anchor are untouched throughout. */
.vhs-controls__label,
.vhs-controls input[type="range"] {
	overflow: hidden;
	/* Explicit durations, NOT --dur-md/--dur-sm. Those tokens resolve to
	   .9s and .4s here — they are tuned for page-level motion (section
	   reveals, hero transitions) and made this little bar crawl closed over
	   most of a second. A control that responds to a click wants UI timing,
	   ~300ms. The easing token is still used, so it stays in the site's
	   motion character. Opacity leads slightly so the items read as fading
	   out while the width closes, rather than sliding as solid blocks. */
	transition:
		max-width    .18s var(--ease, cubic-bezier(.4, 0, .2, 1)),
		opacity      .1s  var(--ease, cubic-bezier(.4, 0, .2, 1)),
		margin       .18s var(--ease, cubic-bezier(.4, 0, .2, 1));
}
.vhs-controls__label { max-width: 120px; }
.vhs-controls input[type="range"] { max-width: 110px; }

.vhs-controls.is-off .vhs-controls__label,
.vhs-controls.is-off input[type="range"] {
	max-width: 0;
	/* min-width:0 is load-bearing. Flex items default to min-width:auto, which
	   refuses to shrink below their content — the label is white-space:nowrap,
	   so max-width:0 alone left a couple of stray pixels and the collapsed bar
	   sat 2px off-centre, more padding on the left than the right. */
	min-width: 0;
	opacity: 0;
	/* margin shorthand, not margin-right: the range input carries a UA-default
	   margin-left of 2px that vhs.css never zeroes (it sets width, padding and
	   border but not margin). Those 2px survived the collapse and pushed the
	   button pair right, so the "even" padding measured 12px left against 10px
	   right. Zeroing all sides here fixes the asymmetry at its cause instead
	   of fudging the -10px compensation to -12px and hiding it. */
	margin: 0 -10px 0 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.vhs-controls__label,
	.vhs-controls input[type="range"] { transition: none; }
}

/* ── ROUND 37: light mode is RED again, not blue ──────────────────────────
   ROUND 31 moved the site to the blue camcorder palette (#1e83ed). Light
   mode goes back to the original Based In red. Only five hardcoded blues
   exist in the whole child theme, and four of them flow from these two
   tokens, so overriding the tokens recolours buttons, links, rules, the
   burger and every accent in one move.

   #e63329 is the real original from vellum-basedin's own --color-accent,
   not a guess or an eyedropper off a screenshot.

   The logo is a background-image PNG, so a token cannot reach it. The red
   artwork already existed on the server as the backup taken the day it was
   swapped to blue — confirmed by sampling both files rather than trusting
   the filename, which was misleading: the file named ".bak-blue" is the RED
   one (rgb 237,28,36) and the live file is the blue one (rgb 30,131,237).
   Copied to a real name so nothing depends on a backup file. */
html[data-theme="light"] {
	--color-accent:     #e63329;
	--color-accent-dim: rgba(230, 51, 41, .08);
}
html[data-theme="light"] .vellum-nav__wordmark {
	background-image: url("/wp-content/uploads/Logo-BasedIn-red-04-1.png?v=1");
}
/* the tape controls' border is a hardcoded blue in vhs.css (two places), the
   only accent the tokens above cannot reach */
html[data-theme="light"] .vhs-controls__bar { border-color: rgba(230, 51, 41, .4); }

/* ── ROUND 38: touch devices get the plain light site, no tape ────────────
   The VHS layer is a desktop flourish; on a phone it reads as distraction
   and the controls are a third of the screen. Touch pointers now get light
   mode, no effect, and no toggles at all.

   Scoped to (pointer: coarse) deliberately — the same query vhs.css already
   uses to force #vellum-main's filter off on touch after the effect was
   confirmed to crash real mobile hardware. Matching that boundary keeps one
   definition of "touch" rather than inventing a second one from pixel
   widths, which would also have broken on iPhone landscape.

   NOTE: this covers iPad as well as iPhone. Say the word and it narrows.

   The theme is forced in the boot script in functions.php, not here, since
   CSS cannot set data-theme and light mode is driven by that attribute.
   That script also sets vhs.js's own "vhsOff" flag so the effect boots into
   its real Off path and every canvas interval and timer stops, rather than
   being merely hidden while still burning battery behind display:none. */
@media (pointer: coarse) {
	.vhs-controls,
	.vhs-glass,
	.vhs-timecode { display: none !important; }

	#vellum-main,
	.vellum-nav__wordmark { filter: none !important; }
}

/* ── ROUND 40: light mode — red homepage wordmark + original type weights ──
   TWO fixes, same cause in both cases: things that were changed to survive
   the VHS glaze, in a mode that no longer has one.

   1. The homepage's second wordmark is an <img class="site-wordmark"> in the
      page CONTENT, not a CSS background like the nav mark, so ROUND 37's
      background-image swap could not reach it and it stayed blue. CSS cannot
      rewrite an img's src, but `content:` replaces a replaced element's box
      in every current browser. Both PNGs are 769x123, so nothing reflows.
      Done here rather than by editing the post content, because the content
      is theme-agnostic and dark mode must keep the blue mark.

   2. Heading weights. The block above bumped h1/h2/h3 and the .display
      headings from their original 200/300 up to 500, and says why: the light
      weights went soft once vhs.js layered blur, chromatic aberration and
      desaturation over them. Light mode drops all three (ROUNDS 32/33), so
      the bump is compensating for something that is no longer there, and
      what is left just reads heavy. First pass restored the pre-glaze
      values exactly (200 base / 300 banners) and that overshot the other
      way, too thin on a crisp screen at these display sizes. 300 was still
      thin, so light mode now sits at 400 throughout — matched to the
      "Amenities" page-title banner, which Jordan picked out as the weight
      that reads right. 400 is a real Jost weight already loaded
      (200;300;400;500), so no extra font request.

      Note this deliberately flattens the old 200/300 base-vs-banner split:
      the banners are already separated by size and letter-spacing (24px at
      2.88px tracking against 36px body headings), so they do not need a
      weight step as well, and matching one target weight is easier to keep
      consistent than two.

   !important is required only because the rules being overridden use it;
   the specificity here would otherwise be enough on its own.

   Dark mode keeps 500 — it still has the glaze to fight. */
html[data-theme="light"] .site-wordmark {
	content: url("/wp-content/uploads/Logo-BasedIn-red-04-1.png?v=1");
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 { font-weight: 400; }

/* page-title banners sat at 300, one step up from base — kept distinct.
   (0,3,1) here beats the .display rule below at (0,2,2), so a
   .vellum-page-title__title.display lands on 300, not 200. */
html[data-theme="light"] .vellum-page-title__title,
html[data-theme="light"] .vellum-page-title__title.display { font-weight: 400 !important; }

html[data-theme="light"] h1.display,
html[data-theme="light"] h2.display,
html[data-theme="light"] h3.display,
html[data-theme="light"] .vellum-hero__name { font-weight: 400 !important; }

/* ── ROUND 42: light mode — thin the mobile nav overlay links too ──────────
   Same treatment as ROUND 40's headings, same reasoning. The overlay links
   sit at 700 !important here (the parent ships 800), heavy enough to hold
   up under the VHS glaze. Light mode has no glaze, and on touch it is the
   ONLY mode — ROUND 38 forces light and hides the toggles — so on a phone
   these were the last thing still drawn at glaze weight while every heading
   around them had come down to 400.

   Matched to 400, the same weight as the "Amenities" banner the rest of the
   light-mode type is tuned to, so the overlay reads as part of the same
   system rather than a bolder island.

   !important only because the rule being overridden uses it; (0,2,2) here
   against (0,1,1) would carry it on specificity alone. Dark mode keeps 700. */
html[data-theme="light"] .vellum-nav-overlay a { font-weight: 400 !important; }

/* ── ROUND 43: mobile nav overlay opens faster ────────────────────────────
   Both the overlay backdrop and its links were fading on --dur-md, which
   resolves to .9s. That token is page-scale motion (hero and section
   reveals); on a menu you tapped, nearly a second of fade reads as lag.

   Measured before changing anything: container .9s, links .9s, and the
   parent's .05s-.40s per-item stagger NOT running at all — the child's
   `transition: opacity ... !important` shorthand resets transition-delay to
   0, so every item has always faded in unison. Left as-is rather than
   revived; in unison is the right call when the whole thing is this quick,
   and a stagger would put the last item back where we started.

   Explicit .25s/.28s rather than a token: the scale only offers .2s, .4s,
   .9s and 1.4s, and .4s is still slow for a tap response while .2s pops.
   Backdrop leads the links slightly so the ground is there before the type
   resolves on it, instead of both arriving flat together. */
.vellum-nav-overlay {
	transition: opacity .25s var(--ease) !important;
}
.vellum-nav-overlay a {
	transition: opacity .28s var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
	.vellum-nav-overlay,
	.vellum-nav-overlay a { transition: none !important; }
}