/* Christopher's — Investor Leave-Behind Page
 * v1.1, 2026-05-15
 *
 * Typography: production target Sangbleu Empire (Swiss Typefaces, licensed).
 * Prototype uses Cormorant Garamond as a structural fallback — same
 * high-contrast editorial-serif register. Swap when license is wired.
 *
 * Composition Strategy B (council-approved): four rotating modes
 *   .scene--full-below   — full-bleed image + tagline centered below   (sections 1, 3, 7)
 *   .scene--overlay      — full-bleed image + tagline absolute over it (sections 2, 5)
 *   .scene--asymmetric   — image 65% / tagline 35% side column         (section 4)
 *   .scene--contained    — image max-width centered + tagline below    (section 6)
 */

:root {
  /* Layered named whites from Round Club v3 brief */
  --color-bg: #FAF7EE;          /* chalk — page background */
  --color-bg-alt: #F4EFE6;      /* alabaster — fact card / footer */
  --color-ink: #1A1A1A;
  --color-ink-soft: #4A4742;
  --color-rule: #D9D2C4;
  --color-accent: #B5A684;      /* champagne nickel — CTA hover */

  --type-display: 'Cormorant Garamond', 'Sangbleu Empire', 'Sangbleu', Georgia, serif;
  --type-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  --max-text-width: 28ch;

  /* RGB triplet primitives — for use inside rgba() so semantic
   * alpha-layer tokens (scrims, shadows) stay in sync with the
   * brand colors above. */
  --color-bg-rgb: 250, 247, 238;    /* chalk — matches --color-bg */
  --color-ink-rgb: 26, 26, 26;      /* ink — matches --color-ink */

  /* Semantic shadow + scrim aliases.
   * --shadow-ambient: two-layer ink shadow for elevated surfaces (floor plan).
   * --scrim-overlay-*: chalk-toned gradient that protects tagline readability
   *   over varied render zones without breaking the cool-neutral white discipline.
   *   Direction varies by corner anchor (left → 135deg, right → 225deg). */
  --shadow-ambient: 0 2px 8px rgba(var(--color-ink-rgb), 0.06), 0 12px 40px rgba(var(--color-ink-rgb), 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--type-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

/* ===== HERO ===== */

.hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}

.wordmark {
  font-family: var(--type-display);
  font-weight: 400;
  font-size: clamp(4rem, 14vw, 11rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
}

.hero-subtitle {
  margin-top: var(--space-md);
  font-family: var(--type-body);
  font-weight: 400;
  /* Enlarged from 0.75rem to scale with viewport. Caps at 1.15rem on wide
   * screens; floors at 0.95rem on phones so the wide-tracking caps still
   * read clearly. */
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
}

/* No-wrap guard for each phrase in the hero subtitle. Combined with the
 * comma + space between the two .hs-phrase spans, this forces wrap to happen
 * cleanly between phrases (not mid-phrase, not at the Pre-Opening hyphen). */
.hero-subtitle .hs-phrase {
  white-space: nowrap;
}

/* Hero concept sentence — atmospheric one-liner below the city/year subtitle.
 * Italic display serif, restrained; sits between subtitle and the punchier
 * strapline below it ("A lantern in the sky." → "Not louder. Higher"). */
.hero-concept {
  margin-top: var(--space-sm);
  font-family: var(--type-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-ink-soft);
  text-align: center;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* Hero strapline — declarative positioning line below the atmospheric concept.
 * Non-italic display serif, bigger than .hero-concept, sized to read as a
 * standalone assertion. Carries the operator's positioning voice
 * ("Not louder. Higher"). No terminal punctuation on second clause —
 * intentional copy choice, gives the line its punch. */
.hero-strapline {
  margin-top: var(--space-md);
  font-family: var(--type-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-align: center;
}

/* ===== EDITORIAL ANCHOR ===== */
/* Operator-voice paragraph between visual narrative climax and structured data.
 * Hospitality restraint register — italic display serif, tight measure, generous
 * vertical breathing room. Separated from adjacent sections by a top hairline
 * rule (same idiom as .cta) so the eye registers it as a distinct register
 * (not another scene). */

.anchor {
  padding: var(--space-2xl) var(--space-md);
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-rule);
}

.anchor-text {
  font-family: var(--type-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--color-ink);
  text-align: center;
  max-width: 56ch;
  margin: 0;
}

/* ===== SCENES — SHARED BASE ===== */

.scene {
  padding: var(--space-xl) 0 var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scene figure,
.occupancy-card figure,
.portrait-video-figure {
  width: 100%;
  max-width: 100vw;
  position: relative;       /* anchors absolute-positioned overlay taglines */
  margin: 0;
}

.scene img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cinematic bottom vignette — a feathered darkening of the bottom ~38% of
 * each scene image, anchoring caption readability against varied content
 * (light cream dance-floor areas, marble tabletops, etc.). NOT a caption
 * box — it has no defined edges and reads as photographic finishing rather
 * than a UI scrim. Applied to photo/video scenes only; skipped on the
 * floor plan via :not() (transparent background, no image to darken). */
.scene:not(.scene--floorplan) figure::after,
.occupancy-card figure::after,
.portrait-video-figure::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(
    to top,
    rgba(var(--color-ink-rgb), 0.55) 0%,
    rgba(var(--color-ink-rgb), 0.20) 60%,
    rgba(var(--color-ink-rgb), 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== TAGLINE — APPEARING CAPTION ===== */
/* Editorial-magazine "caption on image" pattern. Anchored bottom-center over
 * its figure. No scrim box, no backdrop blur — text-shadow alone carries
 * readability against varied image content (light text + multi-layer ink
 * shadow handles both light and dark image regions). Fade-up reveal triggered
 * by IntersectionObserver in the inline script — captions appear as the
 * section crosses ~35% into viewport. */

.tagline {
  font-family: var(--type-display);
  font-weight: 400;
  /* Single-line caption — font scales by viewport width so 33-char copy fits
   * on a 390px mobile viewport AND reads at scale on desktop. Caps at 2.5rem
   * so wide screens don't get oversized captions. */
  font-size: clamp(1rem, 3.8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: left;
  white-space: nowrap;

  /* Off-center bottom-left anchor (editorial-magazine caption pattern). */
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);    /* right boundary prevents overflow on tiny viewports */
  bottom: 6%;
  margin: 0;
  z-index: 2;

  /* Chalk-toned text against varied image content. Layered ink text-shadow
   * carries readability against both dark and light image regions: a tight
   * crisp outline + medium soft halo + deep diffuse glow. No hard box edge —
   * feathered into the image. Heavier than typical to survive light-on-light
   * conditions (the dance-floor scenes have light cream undertones). */
  color: var(--color-bg);
  text-shadow:
    0 0 2px rgba(var(--color-ink-rgb), 0.85),
    0 2px 10px rgba(var(--color-ink-rgb), 0.75),
    0 4px 28px rgba(var(--color-ink-rgb), 0.55),
    0 0 60px rgba(var(--color-ink-rgb), 0.35);

  /* Appearing-caption reveal — initial state hidden + nudged down 14px.
   * .is-revealed (added by IntersectionObserver) clears both. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s cubic-bezier(.2, .7, .2, 1) 0.12s,
    transform 0.9s cubic-bezier(.2, .7, .2, 1) 0.12s;
}

.tagline.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.tagline-final {
  font-weight: 400;
}

/* ===== OCCUPANCY CAROUSEL ===== */
/* Horizontal scroll-snap slider showing the venue across its activation spectrum.
 * 3 slides (Empty / Populated / Peak), one visible at a time, with side-peek so
 * the swipe affordance is obvious. Auto-advance + dot navigation + keyboard arrows.
 * Per-slide tagline as subtitle. */

.scene--occupancy-slider {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--color-bg);
  overflow: hidden;
}

.occupancy-slider {
  position: relative;
  width: 100%;
}

.occupancy-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* No side-peek; slides fill the full track width for maximum image size.
   * Position is communicated via the dot pagination + auto-advance. */
  padding-left: 0;
  padding-right: 0;
}

.occupancy-track::-webkit-scrollbar { display: none; }

.occupancy-track:focus { outline: none; }

.occupancy-track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}

.occupancy-card {
  /* Full-width slide — maximum image size. No side-peek. */
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.occupancy-card figure { width: 100%; margin: 0; }

.occupancy-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tagline overrides for occupancy slides are inherited from the unified
 * .tagline rule (overlay-on-image with bottom-left anchor); no per-slide
 * tagline customizations needed. */

/* Dots — pagination + active-state indicator */
.occupancy-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-lg);
  padding: 0 var(--space-md);
}

.occupancy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rule);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease, width 0.4s ease;
  position: relative;
}

.occupancy-dot::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}

.occupancy-dot:hover { background: var(--color-ink-soft); }

.occupancy-dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.occupancy-dot.is-active {
  background: var(--color-ink);
  width: 24px;
  border-radius: 4px;
}

/* Visually-hidden utility — for SR-only labels (used by password input) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 3D FLOOR PLAN — static display ===== */
/* Floor plan PNG is alpha-keyed so its previously-pure-white exterior
 * background is transparent. The plan therefore sits directly on the page's
 * chalk background — no visible card/frame, no shadow. The in-plan labeled-
 * area captions + N compass indicator carry the section's information; no
 * page-level tagline overlay per operator direction 2026-05-17.
 * (Lightbox removed 2026-05-16; mobile couldn't escape the modal.) */

.scene--floorplan {
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.floorplan-figure {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  position: static;        /* no overlay tagline; no positioning context needed */
}

.floorplan-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== PORTRAIT VIDEO CLOSER ===== */
/* v12 9:16 vertical motion-asset (Seedance 10s 1080p multi-beat captain-call).
 * Replaces the prior v11 static 3:2 closer. On desktop the video centers with
 * chalk-toned space either side (max-width ~520px). On mobile the video fills
 * the viewport width naturally. Poster .webp loads first; video autoplays
 * muted+looped+playsinline. prefers-reduced-motion pauses autoplay via JS. */

.scene--portrait-video {
  padding: var(--space-xl) 0 var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait-video-figure {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.portrait-video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  background: var(--color-ink);
  border-radius: 2px;
  box-shadow: var(--shadow-ambient);
}

.scene--portrait-video .tagline {
  margin-top: var(--space-lg);
}

/* ===== FACT CARD ===== */

.fact-card {
  padding: var(--space-2xl) var(--space-md);
  background: var(--color-bg);
  display: flex;
  justify-content: center;
}

.fact-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}

.fact-card li {
  font-family: var(--type-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.4;
  color: var(--color-ink);
}

.fact-card li::before {
  content: "—";
  display: inline-block;
  margin-right: 0.6em;
  color: var(--color-rule);
}

/* ===== CTA ===== */

.cta {
  padding: var(--space-2xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 1px solid var(--color-rule);
}

.cta-label {
  font-family: var(--type-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-md);
}

.cta-link {
  display: inline-block;
  font-family: var(--type-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  max-width: 28ch;
  text-align: center;
  line-height: 1.4;
  transition: color 0.25s ease;
}

.cta-link:hover,
.cta-link:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Landing-page passcode entry (replaces phone CTA) */

.landing-gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
  max-width: 24ch;
  margin: 0 auto;
}

.landing-gate-input {
  font-family: var(--type-body);
  font-size: 1rem;
  font-weight: 400;
  padding: 0.8em 1em;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  color: var(--color-ink);
  text-align: center;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease;
}

.landing-gate-input:focus {
  outline: none;
  border-color: var(--color-ink);
}

.landing-gate-submit {
  font-family: var(--type-body);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.9em 2em;
  background: var(--color-ink);
  color: var(--color-bg);
  border: 1px solid var(--color-ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.landing-gate-submit:hover,
.landing-gate-submit:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  outline: none;
}

.landing-gate-error {
  margin-top: var(--space-md);
  font-family: var(--type-body);
  font-size: 0.75rem;
  color: var(--color-ink);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Soft-gate fallback — quiet alternate path for someone without a passcode.
   Always visible (not gated on the error state) so visitors don't have to
   fail first to find the alternative. */

.landing-gate-fallback {
  margin-top: var(--space-md);
  font-family: var(--type-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  text-align: center;
}

.landing-gate-fallback-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.landing-gate-fallback-link:hover,
.landing-gate-fallback-link:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  outline: none;
}

/* Clickable Raul Pierrend Design link in footer */

.credit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.credit-link:hover,
.credit-link:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  outline: none;
}

/* ===== FOOTER ===== */

footer {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-rule);
}

.footer-meta {
  font-family: var(--type-body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
  margin-bottom: var(--space-md);
}

.compliance {
  max-width: 70ch;
  margin: 0 auto;
  font-family: var(--type-body);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--color-ink-soft);
  text-align: center;
}

.copyright {
  margin-top: var(--space-md);
  font-family: var(--type-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Audit P1 fix: was color: var(--color-ink-soft) at opacity 0.7 (~3.2:1 contrast,
   * failed WCAG AA). Now full opacity at a slightly-lighter ink token equivalent. */
  color: #6A6660;
  text-align: center;
}

/* Designer attribution — terminal credit, separated from the venue copyright.
   Quieter than .copyright so it reads as a colophon, not a rights claim. */

.credit {
  margin-top: calc(var(--space-md) / 2);
  font-family: var(--type-body);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-ink-soft);
  text-align: center;
}

/* ===== RESPONSIVE — MOBILE / TABLET ===== */

@media (max-width: 768px) {
  .scene {
    /* Tighter mobile spacing — was 4rem top / 8rem bottom; now 2rem top / 4rem bottom for closer page rhythm */
    padding: var(--space-md) 0 var(--space-lg);
  }

  .tagline {
    /* Mobile: tighter left/right margins so the single-line caption fits
     * across narrow viewports. Letter-spacing slightly tightened to help
     * the longer copy (e.g., "Arrival is a sculptural threshold.") fit on
     * one line at sub-400px widths. */
    left: var(--space-sm);
    right: var(--space-sm);
    letter-spacing: -0.015em;
    bottom: 5%;
  }

  /* 3D plan section — mobile tuning */
  .scene--floorplan {
    padding: var(--space-lg) var(--space-md);
  }

  /* Portrait video closer — mobile: fills viewport width, tighter spacing */
  .scene--portrait-video {
    padding: var(--space-md) 0 var(--space-lg);
  }

  .portrait-video-figure {
    max-width: 100%;
    padding: 0 var(--space-sm);
  }

  /* Occupancy carousel — mobile tuning. Tighter section padding.
   * Slides remain full-width (no side-peek) per operator direction:
   * maximize image size. */
  .scene--occupancy-slider {
    padding: var(--space-md) 0 var(--space-md);
  }

  .occupancy-dots {
    margin-top: var(--space-sm);
  }

  /* Mobile: slides stay full-width (inherited from desktop rule).
   * No padding-left/right on track, no margin-right on cards — max image. */

  .fact-card,
  .cta {
    padding: var(--space-xl) var(--space-md);
  }

  /* Editorial anchor — same mobile padding reduction as .cta (8rem vs 12rem
   * default vertical) so the two prose sections share rhythm on narrow viewports. */
  .anchor {
    padding: var(--space-xl) var(--space-md);
  }

  .fact-card li::before {
    margin-right: 0.4em;
  }
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }

  /* Appearing-caption animation is disabled for reduced-motion users.
   * Captions appear in their final state immediately. */
  .tagline {
    opacity: 1;
    transform: translateY(0);
  }
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}