/* -------------------------------------------------------------
   Case Study Architecture System (case-study.css)
   Pacing: DENSITY → FOCUS → DENSITY → FOCUS → CRESCENDO → QUIET → RESOLUTION
   ------------------------------------------------------------- */

/* Prevent horizontal scroll without breaking position: sticky */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* Scoped page baseline */
.wt-page {
  background-color: var(--color-bg, #0e0f11);
  color: var(--color-text-primary, #ebe7e0);
  padding-top: 74px;
  padding-bottom: 0;
  min-height: 100vh;
  overflow: visible; /* Essential: must remain visible for position: sticky to work */
}

.wt-container {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
  box-sizing: border-box;
}

/* =============================================================
   TYPOGRAPHY SYSTEM — SANS-SERIF METADATA & UTILITY
   Enforces consistent portfolio sans-serif across all informational,
   structural, and metadata typography. Zero monospace.
   Hierarchy is preserved through size, weight, tracking, opacity,
   case, and spacing.
   ============================================================= */
:root {
  --wt-font-sans: var(--font-family, 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.wt-kicker,
.wt-next-kicker,
.wt-context-kicker,
.wt-intro-label,
.wt-intro-val,
.wt-meta-label,
.wt-meta-val,
.wt-caption,
.wt-ooh-label,
.wt-colophon-label,
.wt-colophon-val,
.frame-bottom,
.frame-meta-slot,
.frame-project-id,
.project-index,
.project-title-meta,
.frame-discipline,
.frame-origin,
.frame-top,
.frame-identity,
.frame-nav,
.frame-nav-link,
.frame-menu-btn {
  font-family: var(--wt-font-sans) !important;
}

/* Chapter Kickers & Project Numbering (e.g. 01 / BRAND ECOSYSTEM) */
.wt-kicker,
.wt-next-kicker {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.4;
}

/* Context & Ownership Section Kickers */
.wt-context-kicker {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.4;
}

/* Informational Metadata Labels (Tracked, uppercase, lower contrast) */
.wt-meta-label,
.wt-colophon-label {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.35;
}

/* Informational Metadata Values (Slightly more prominent, natural tracking) */
.wt-meta-val,
.wt-colophon-val {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: var(--color-text-secondary, #bab6ae);
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* Restrained Editorial Section Label (e.g. TIMES SQUARE / NEW YORK) */
.wt-ooh-label {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.4;
}

/* Image Captions */
.wt-caption {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.75rem; /* 12px */
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text-muted, #726f68);
}

/* Bottom Peripheral Project Rail */
.frame-bottom {
  font-family: var(--wt-font-sans) !important;
}

.frame-bottom .project-index {
  font-family: var(--wt-font-sans) !important;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.frame-bottom .project-title-meta {
  font-family: var(--wt-font-sans) !important;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.frame-discipline span,
.frame-origin span {
  font-family: var(--wt-font-sans) !important;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------
   1. ORIENT — Project Introduction & Metadata
   ------------------------------------------------------------- */
.wt-orient {
  padding-top: clamp(32px, 5vh, 60px);
  padding-bottom: clamp(36px, 5vh, 60px);
}

.wt-intro {
  margin-bottom: clamp(36px, 5.5vh, 52px);
}

.wt-intro-title {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--color-text-hero, #f7f5f0);
  margin: 0 0 clamp(16px, 2.2vh, 22px) 0;
  text-wrap: balance;
}

.wt-intro-desc {
  font-size: clamp(1.0625rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--color-text-secondary, #bab6ae);
  max-width: 760px;
  margin: 0;
  text-wrap: pretty;
}

.wt-orient--strategic .wt-intro {
  margin-bottom: 0;
}

.wt-orient--strategic {
  padding-bottom: clamp(24px, 3.5vh, 40px);
}

.wt-page--brief-layout {
  display: grid;
}

.wt-page--brief-layout > .wt-orient {
  grid-row: 1;
}

.wt-page--brief-layout > .wt-brief-strip {
  grid-row: 2;
}

.wt-page--brief-layout > .wt-immerse,
.wt-page--brief-layout > .section-choreography {
  grid-row: 3;
}

.wt-page--brief-layout > .wt-container {
  grid-row: 4;
}

.wt-page--brief-layout > .wt-pagination {
  grid-row: 5;
}

.wt-brief-strip {
  width: 100%;
  padding-bottom: clamp(36px, 5vh, 60px);
}

.wt-brief-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 40px);
  padding-top: clamp(20px, 2.5vh, 28px);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  align-items: start;
}

.wt-brief-strip-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wt-brief-strip-item dt {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
}

.wt-brief-strip-item dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--color-text-secondary, #bab6ae);
  text-wrap: pretty;
}

@media (max-width: 1023px) {
  .wt-brief-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
}

@media (max-width: 639px) {
  .wt-brief-strip-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Restrained Colophon-like Metadata Row */
.wt-intro-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: 20px;
  padding-top: clamp(24px, 3.5vh, 36px);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  align-items: start;
}

.wt-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wt-meta-label {
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
}

.wt-meta-val {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.45;
  color: var(--color-text-secondary, #bab6ae);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   2. IMMERSE — Universal Full-Bleed Opening Hero & Bottom Optical Falloff
   ------------------------------------------------------------- */
.wt-immerse {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(20px, 3vh, 40px);
  margin-bottom: clamp(48px, 8vh, 88px);
  position: relative;
  overflow: hidden;
}

.wt-hero-stage {
  position: relative;
  width: 100%;
  background-color: var(--color-bg, #0e0f11);
  overflow: hidden;
}

.wt-hero-video,
.wt-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* Project-Specific Hero Art Direction & Framing */
.wt-hero-basquiat {
  aspect-ratio: 16 / 9;
  object-position: center 25%;
}

.wt-hero-rangers {
  aspect-ratio: 16 / 9;
  object-position: center 35%;
}

.wt-hero-hre {
  aspect-ratio: 16 / 9;
  object-position: center center;
}

.wt-hero-prowaken {
  aspect-ratio: 16 / 9;
  object-position: center center;
}

/* Restrained Bottom Optical Falloff: Dissolves lower portion into page background (#0e0f11) */
.wt-hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 55%,
    rgba(14, 15, 17, 0.15) 68%,
    rgba(14, 15, 17, 0.52) 80%,
    rgba(14, 15, 17, 0.88) 92%,
    var(--color-bg, #0e0f11) 100%
  );
}

/* Explicit No-Fade / Natural Resolve Modifier (e.g. naturally dark graphic canvases) */
.wt-hero-stage.is-no-fade::after,
.wt-hero-stage.is-natural-resolve::after {
  display: none !important;
}

/* -------------------------------------------------------------
   3. CONTEXT SECTION
   Unified editorial context bridge establishing ground truth (~30/70 split)
   ------------------------------------------------------------- */
.wt-context-section {
  width: 100%;
  padding-top: clamp(32px, 3.5vw, 48px);
  padding-bottom: clamp(60px, 7.5vw, 96px);
}

.wt-context-grid {
  display: grid;
  grid-template-columns: minmax(340px, 380px) 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.wt-context-label-col {
  display: flex;
  flex-direction: column;
}

.wt-context-kicker {
  display: block;
  font-family: var(--wt-font-sans) !important;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

.wt-context-content {
  display: flex;
  flex-direction: column;
}

.wt-context-lead {
  font-size: clamp(1.1875rem, 1.45vw, 1.375rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text-hero, #f7f5f0);
  letter-spacing: -0.015em;
  margin: 0 0 clamp(18px, 2.2vh, 26px) 0;
  text-wrap: pretty;
}

.wt-context-body {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.62;
  color: var(--color-text-secondary, #bab6ae);
  letter-spacing: -0.008em;
  margin: 0;
  text-wrap: pretty;
}

.wt-context-content--strategic {
  gap: clamp(24px, 3vw, 36px);
}

.wt-context-content--strategic .wt-context-lead {
  margin-bottom: 0;
}

.wt-context-receipts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.wt-context-receipt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wt-context-receipt dt {
  font-family: var(--wt-font-sans) !important;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
}

.wt-context-receipt dd {
  margin: 0;
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  line-height: 1.52;
  letter-spacing: -0.008em;
  color: var(--color-text-secondary, #bab6ae);
  text-wrap: pretty;
}

/* Backwards-compatibility helper for legacy markup */
.wt-context-text {
  font-size: clamp(1rem, 1.12vw, 1.125rem);
  line-height: 1.68;
  color: var(--color-text-secondary, #bab6ae);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   4. PERSISTENT SPLIT-VIEW SYSTEM (Desktop Architecture)
   ------------------------------------------------------------- */
.wt-split-act {
  display: grid;
  grid-template-columns: minmax(340px, 380px) 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
  position: relative;
  margin-bottom: clamp(96px, 14vh, 160px);
}

/* Persistent Sticky Narrative Rail (Desktop) */
.wt-narrative-rail,
.wt-story-desktop {
  position: sticky;
  top: 90px;
  align-self: start; /* CRITICAL: prevents height stretch so element travels with scroll */
  padding-top: 6px;
  padding-bottom: 40px;
  max-height: calc(100vh - 104px);
  z-index: 10;
  display: block;
}

/* Stable stage where all narrative thoughts sit in the SAME spatial location */
.wt-narrative-stage,
.wt-story-slot {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  position: relative;
  width: 100%;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wt-narrative-stage.is-hidden,
.wt-story-slot.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Individual chapter narrative thoughts inside the stage */
.wt-narrative-state,
.wt-story-state {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  transform: translateY(32px);
  pointer-events: none;
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Active Resting State (Arrival: ~750–900ms settling into exact same resting position) */
.wt-narrative-state.is-active,
.wt-story-state.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Outgoing Upward State (Departure: ~650–800ms upward to -28px out of view) */
.wt-narrative-state.is-exiting,
.wt-story-state.is-exiting,
.wt-narrative-state.is-past,
.wt-story-state.is-past {
  opacity: 0;
  transform: translateY(-28px);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Future State (Waiting below at +32px) */
.wt-narrative-state.is-future,
.wt-story-state.is-future {
  opacity: 0;
  transform: translateY(32px);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile Narrative Header (hidden on desktop) */
.wt-story-mobile {
  display: none;
}

/* Common Typography for Story Content */
.wt-kicker {
  display: block;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 18px;
  text-wrap: balance;
}

.wt-title {
  font-size: clamp(1.65rem, 2.42vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-text-hero, #f7f5f0);
  margin: 0 0 11px 0;
  text-wrap: balance;
}

.wt-body {
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.62;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary, #bab6ae);
  margin: 0;
  text-wrap: pretty;
}

.wt-body + .wt-body {
  margin-top: 10px;
}

.wt-story-utility {
  margin-top: 16px;
}

.wt-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wt-font-sans, "Switzer", -apple-system, sans-serif);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-secondary, #bab6ae);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wt-utility-link:hover {
  color: var(--color-text-hero, #f7f5f0);
}

.wt-utility-link .nav-arrow {
  font-size: 0.75em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.wt-utility-link:hover .nav-arrow {
  transform: translate(2px, -2px);
}


/* Continuous Visual Evidence Stream (Right Column) */
.wt-evidence-stream {
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 14vh, 160px); /* Chapter-to-chapter breathing room */
  min-width: 0;
}

.wt-chapter-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wt-chapter-evidence {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
  min-width: 0;
}

/* -------------------------------------------------------------
   Restrained Entrance Reveal Animation (.wt-reveal-group)
   Legacy class neutralized in favor of shared GSAP motion system
   ------------------------------------------------------------- */
.wt-reveal-group {
  opacity: 1;
  transform: none;
  transition: none;
}

.wt-reveal-group.is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

/* -------------------------------------------------------------
   Visual Media Components & Compositions
   ------------------------------------------------------------- */
.wt-media-item {
  width: 100%;
  position: relative;
}

.wt-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-object, 4px);
  background-color: var(--color-surface, #141518);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.wt-caption {
  font-size: 0.75rem; /* 12px */
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text-muted, #726f68);
  margin-top: 10px;
}

/* Opening Proof: 3-Column x 2-Row Editorial Title Grid (Chapter 01) */
.wt-title-grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
}

.wt-title-grid-3x2 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

/* -------------------------------------------------------------
   Chapter 01 Continuous Tessellated Creative Wall
   Dense mosaic communicating catalog breadth and multi-format scale
   ------------------------------------------------------------- */
.wt-creative-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2px, 0.25vw, 4px);
  width: 100%;
  box-sizing: border-box;
}

.wt-wall-tile {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #141518);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  align-self: stretch;
}

.wt-wall-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Native Aspect Ratios */
.wt-wall-tile.wt-ratio-16-9 { aspect-ratio: 16 / 9; }
.wt-wall-tile.wt-ratio-4-5  { aspect-ratio: 4 / 5; }
.wt-wall-tile.wt-ratio-9-16 { aspect-ratio: 9 / 16; }
.wt-wall-tile.wt-ratio-2-3  { aspect-ratio: 2 / 3; }

/* Desktop 12-Column Grid Spans */
.wt-span-7 { grid-column: span 7; }
.wt-span-5 { grid-column: span 5; }
.wt-span-3 { grid-column: span 3; }
.wt-span-2 { grid-column: span 2; }

/* Supporting Grid Structures (Chapter 02 & Chapter 03) */
.wt-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.wt-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}

.wt-trio-grid img,
.wt-pair-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background-color: var(--color-surface, #141518);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

/* Adaptability Trio: “Stories That Inspire” Studio-Level Multi-Format System (16:9 + 4:5 + 9:16) */
.wt-adaptability-trio {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.75fr;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: end;
}

.wt-adaptability-trio img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background-color: var(--color-surface, #141518);
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}

/* Art-Directed Social Campaign Territories (Chapter 03) */
.wt-social-composition {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.wt-social-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 16px);
}

.wt-social-composition img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  background-color: var(--color-surface, #141518);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}

/* House of David Title Art Identity Stage */
.wt-titleart-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(28px, 4.5vh, 60px) 0;
  background: transparent;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
   Basquiat & Multi-Case Media Support Components
   Video players, storyboards, product trios, and monumental frames
   ------------------------------------------------------------- */
.wt-hero-monumental {
  width: 100%;
  margin-bottom: clamp(32px, 4.5vh, 52px);
  position: relative;
}

.wt-monumental-frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-object, 4px);
  background-color: var(--color-surface, #141518);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4);
}

.wt-monumental-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.wt-video-frame {
  width: 100%;
  position: relative;
  border-radius: var(--radius-object, 4px);
  overflow: hidden;
  background-color: var(--color-surface, #141518);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.wt-video-frame video,
.wt-video-player {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Standardized Media Sound Control (Global Portfolio UI) */
.media-sound-toggle,
.rh-sound-toggle {
  position: absolute;
  bottom: clamp(12px, 1.8vw, 18px);
  right: clamp(12px, 1.8vw, 18px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 4px 9px;
  width: auto;
  max-width: max-content;
  background: rgba(14, 15, 17, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--color-text-secondary, #bab6ae);
  font-family: var(--font-family, 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.5625rem; /* ~9px */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: background 0.25s var(--ease-editorial, ease), 
              border-color 0.25s var(--ease-editorial, ease), 
              color 0.25s var(--ease-editorial, ease), 
              transform 0.25s var(--ease-editorial, ease);
  pointer-events: auto;
}

.media-sound-toggle:hover,
.rh-sound-toggle:hover {
  transform: scale(1.02);
  background: rgba(22, 24, 28, 0.95);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color-text-hero, #f7f5f0);
}

.media-sound-toggle.is-unmuted,
.rh-sound-toggle.is-unmuted {
  color: var(--color-text-hero, #f7f5f0);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(22, 24, 28, 0.92);
}

.media-sound-toggle:focus-visible,
.rh-sound-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.media-sound-icon,
.rh-sound-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.media-sound-svg,
.rh-sound-svg {
  display: block;
  width: 10px;
  height: 10px;
  color: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

.media-sound-text,
.rh-sound-text {
  display: inline-block;
  line-height: 1;
}

.wt-storyboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  width: 100%;
}

.wt-storyboard-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-surface, #141518);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.wt-storyboard-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-product-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
}

.wt-product-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-surface, #141518);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.wt-product-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-titleart-img {
  display: block;
  width: clamp(300px, 68%, 580px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 44px rgba(0, 0, 0, 0.75));
}

/* Scrollable Interactive Frame for Long-Scroll Assets (Explore Page & Web DTC) */
.wt-explore-frame,
.wt-web-desk,
.wt-web-mobile {
  width: 100%;
  height: clamp(380px, 50vh, 540px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #0c0d0f;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-object, 4px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.wt-explore-frame::-webkit-scrollbar,
.wt-web-desk::-webkit-scrollbar,
.wt-web-mobile::-webkit-scrollbar {
  width: 5px;
}

.wt-explore-frame::-webkit-scrollbar-thumb,
.wt-web-desk::-webkit-scrollbar-thumb,
.wt-web-mobile::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.wt-explore-frame img,
.wt-web-desk img,
.wt-web-mobile img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------
   4. EMPHASIZE — Times Square / OOH Two-Photograph Composition
   Direct editorial pairing across full normal site rail (Level 1)
   ------------------------------------------------------------- */
.wt-ooh-section {
  width: 100%;
  margin-top: clamp(96px, 14vh, 160px);
  margin-bottom: clamp(120px, 18vh, 200px);
  position: relative;
}

.wt-ooh-header {
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

.wt-ooh-label {
  display: block;
  font-family: var(--font-family, 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  line-height: 1.4;
}

.wt-ooh-duo {
  display: grid;
  grid-template-columns: 1.16fr 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
  width: 100%;
}

.wt-ooh-col {
  width: 100%;
}

.wt-ooh-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* -------------------------------------------------------------
   5. RESET — Adventure in Wonder (Quiet Exhale & Negative Space)
   ------------------------------------------------------------- */
.wt-reset-stage {
  width: 100%;
  padding: clamp(72px, 12vw, 130px) clamp(32px, 6vw, 80px);
  background: #111215;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-object, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  margin-bottom: clamp(14px, 2.2vh, 24px);
}

.wt-reset-stage svg {
  max-width: 100%;
  height: auto;
  max-height: 130px;
}

.wt-pair-aiw {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
}

/* -------------------------------------------------------------
   6. RESOLVE — Direct-to-Consumer Marketing Experience
   ------------------------------------------------------------- */
.wt-web-pair {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: end;
}

/* -------------------------------------------------------------
   7. DECOMPRESSION & COLOPHON
   ------------------------------------------------------------- */
.wt-decompression {
  padding-top: clamp(64px, 10vh, 120px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  margin-bottom: clamp(64px, 10vh, 120px);
}

.wt-conclusion-lead {
  font-family: var(--font-display, 'Newsreader Display', Georgia, 'Times New Roman', serif);
  font-size: clamp(1.3rem, 1.98vw, 1.65rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text-display, #f3f2ef);
  max-width: 860px;
  margin-bottom: clamp(40px, 6vh, 64px);
  text-wrap: pretty;
}

.wt-colophon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(24px, 3vh, 36px);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
}

.wt-colophon-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wt-colophon-label {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
}

.wt-colophon-val {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #bab6ae);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   8. CANONICAL CASE STUDY PAGINATION (Editorial 30/70 Split Geometry)
   ------------------------------------------------------------- */
.wt-pagination,
.wt-next-project {
  width: 100%;
  position: relative;
  background: var(--color-surface-next, #18191b);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.04));
  padding-top: clamp(44px, 5.5vh, 68px);
  padding-bottom: clamp(44px, 5.5vh, 68px);
  margin-bottom: 0 !important;
}

.wt-pagination-grid {
  display: grid;
  grid-template-columns: minmax(340px, 380px) 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: stretch;
  width: 100%;
}

/* Left Column (~30%): Top Next Project Header + Bottom Previous Utility Link */
.wt-pagination-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.wt-pagination-next-block {
  display: flex;
  flex-direction: column;
}

.wt-next-kicker {
  display: block;
  font-family: var(--wt-font-sans, var(--font-family, sans-serif));
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 clamp(12px, 1.8vh, 18px) 0;
}

.wt-next-title-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.wt-next-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-text-hero, #f7f5f0);
  margin: 0;
  transition: color 0.3s var(--ease-editorial, ease);
}

.wt-next-arrow {
  display: inline-block;
  font-weight: 300;
  color: var(--color-text-muted, #726f68);
  margin-left: 10px;
  transition: color 0.3s var(--ease-editorial, ease), transform 0.3s var(--ease-editorial, ease);
}

.wt-next-title-link:hover .wt-next-title,
.wt-next-title-link:hover .wt-next-arrow {
  color: #ffffff;
}

.wt-next-title-link:hover .wt-next-arrow {
  transform: translateX(6px);
}

.wt-pagination-prev-block {
  margin-top: clamp(32px, 4.5vh, 48px);
}

.wt-prev-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--wt-font-sans, var(--font-family, sans-serif));
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #726f68);
  font-weight: 500;
  line-height: 1;
  transition: color 0.25s var(--ease-editorial, ease);
  cursor: pointer;
}

.wt-prev-link:hover {
  color: var(--color-text-hero, #f7f5f0);
}

/* Right Column (~70%): Panoramic Project Preview Image */
.wt-pagination-right {
  width: 100%;
  min-width: 0;
}

.wt-next-media-link {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.wt-next-media {
  width: 100%;
  aspect-ratio: 2.35 / 1;
  max-height: clamp(240px, 32vh, 340px);
  border-radius: var(--radius-object, 6px);
  overflow: hidden;
  background: #08090a;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.55);
  transition: border-color 0.3s var(--ease-editorial, ease);
}

.wt-next-media-link:hover .wt-next-media {
  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.16));
}

.wt-next-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

@media (max-width: 860px) {
  .wt-pagination,
  .section-next-project,
  .wt-next-project {
    padding-top: clamp(36px, 5vh, 48px);
    padding-bottom: clamp(40px, 5.5vh, 56px);
  }

  .wt-pagination-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wt-pagination-left {
    display: contents;
  }

  .wt-pagination-next-block {
    order: 1;
  }

  .wt-next-kicker {
    font-size: 0.625rem;
    margin-bottom: 8px;
  }

  .wt-next-title {
    font-size: clamp(1.65rem, 6.5vw, 2.25rem);
    margin-bottom: 0;
  }

  .wt-pagination-right {
    order: 2;
  }

  .wt-next-media {
    aspect-ratio: 2.2 / 1;
    max-height: 260px;
  }

  .wt-pagination-prev-block {
    order: 3;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .wt-prev-link {
    font-size: 0.625rem;
  }
}

/* Mobile Opening Decompression Default (Desktop Hidden) */
.wt-mobile-decompression,
.wt-mobile-opening-footer {
  display: none;
}

/* -------------------------------------------------------------
   9. RESPONSIVE TRANSFORMATION (Mobile <= 860px)
   ------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --page-margin: clamp(20px, 5.2vw, 32px);
  }

  /* Bottom Peripheral Project Rail: ALWAYS Fixed to Bottom on Mobile */
  .frame-bottom {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(42px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1000;
    pointer-events: auto;
    background: rgba(14, 15, 17, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  .frame-bottom .frame-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 12px;
  }

  .frame-bottom .frame-discipline {
    display: none !important;
  }

  .frame-bottom .frame-project-id {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.59375rem; /* 9.5px */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-hero, #f7f5f0);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .frame-bottom .frame-origin {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.59375rem; /* 9.5px */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #726f68);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
  }

  .wt-page {
    padding-top: 68px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Mobile Opening: Orient quickly (Title -> Descriptor -> Hero) */
  .wt-orient {
    padding-top: clamp(16px, 2.5vh, 24px);
    padding-bottom: clamp(20px, 3vh, 28px);
  }

  .wt-intro {
    margin-bottom: 0;
  }

  .wt-orient--strategic .wt-intro {
    margin-bottom: 0;
  }

  .wt-page--brief-layout > .wt-immerse,
  .wt-page--brief-layout > .section-choreography {
    grid-row: 2;
  }

  .wt-page--brief-layout > .wt-brief-strip {
    grid-row: 3;
  }

  .wt-brief-strip {
    padding-top: clamp(36px, 5vh, 48px);
    padding-bottom: clamp(72px, 10vh, 96px);
  }

  .wt-brief-strip-grid {
    padding-top: 20px;
  }

  .wt-intro-title {
    font-size: clamp(2.2rem, 8.5vw, 2.75rem);
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 0 0 12px 0;
  }

  .wt-intro-desc {
    font-size: clamp(0.9375rem, 3.8vw, 1.0625rem);
    line-height: 1.5;
    color: var(--color-text-secondary, #bab6ae);
    margin: 0;
    max-width: 100%;
  }

  /* Universal Mobile Rule: Suppress large opening metadata block on mobile */
  .wt-intro-meta {
    display: none !important;
  }

  .wt-immerse {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: clamp(14px, 2vh, 22px);
    margin-bottom: 0;
  }

  .wt-hero-video,
  .wt-hero-img {
    width: 100%;
    height: auto;
    object-position: center center;
  }

  /* -------------------------------------------------------------
     Tall Immersive Mobile Hero Media
     (Wonder, Basquiat, HRE Beauty, Texas Rangers, Prowaken)
     Rabbit Hole is managed via .frame-rh-hero; Launch Control & Silent Quadrant are art-directed exceptions.
     ------------------------------------------------------------- */
  .wt-hero-stage-tall,
  .wt-hero-stage-wonder,
  .wt-hero-stage-basquiat,
  .wt-hero-stage-hre,
  .wt-hero-stage-rangers,
  .wt-hero-stage-prowaken {
    height: clamp(420px, 60vh, 560px);
  }

  .wt-hero-stage-tall .wt-hero-video,
  .wt-hero-stage-tall .wt-hero-img,
  .wt-hero-stage-wonder .wt-hero-video,
  .wt-hero-stage-basquiat .wt-hero-img,
  .wt-hero-stage-hre .wt-hero-img,
  .wt-hero-stage-rangers .wt-hero-img,
  .wt-hero-stage-prowaken .wt-hero-video,
  .wt-hero-tall {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }

  /* Project-Specific Mobile Focal Alignments */
  .wt-hero-basquiat {
    object-position: center 20%;
  }

  .wt-hero-hre {
    object-position: center 25%;
  }

  .wt-hero-rangers {
    object-position: center 35%;
  }

  .wt-hero-prowaken {
    object-position: center center;
  }

  .wt-hero-wonder {
    object-position: center center;
  }

  /* Silent Quadrant Choreography Aerial containment on mobile */
  .world-aerial-picture {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .world-aerial-img {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  .wt-context-section {
    padding-top: clamp(56px, 10vh, 96px);
  }

  /* Suppress legacy in-flow duplicate footer */
  .wt-mobile-opening-footer {
    display: none !important;
  }

  /* Collapse desktop split act into vertical single-column editorial document flow */
  .wt-split-act {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: clamp(48px, 8vh, 72px);
  }

  .wt-narrative-rail,
  .wt-story-desktop {
    display: none !important;
  }

  .wt-evidence-stream {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 8vh, 80px);
    width: 100%;
  }

  .wt-chapter-block {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.5vh, 24px);
    width: 100%;
  }

  /* Chapter Narrative on Mobile: Normal Editorial Document Flow */
  .wt-story-mobile,
  .wt-chapter-narrative {
    display: block;
    position: static;
    top: auto;
    padding: 0;
    margin: 0;
    opacity: 1;
    transform: none;
    transition: none;
    gap: 0;
  }

  .wt-story-mobile.is-revealed,
  .wt-chapter-narrative.is-revealed {
    opacity: 1;
    transform: none;
  }

  .wt-story-mobile .wt-kicker,
  .wt-chapter-narrative .wt-kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    margin-top: 0;
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .wt-story-mobile .wt-title,
  .wt-chapter-narrative .wt-title {
    font-size: clamp(1.54rem, 6.05vw, 1.98rem);
    line-height: 1.18;
    margin-top: 0;
    margin-bottom: 11px;
    padding-right: 0;
    text-wrap: balance;
  }

  .wt-story-mobile .wt-body,
  .wt-chapter-narrative .wt-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-top: 0;
    margin-bottom: 0;
    text-wrap: pretty;
  }

  .wt-story-mobile .wt-body:last-child,
  .wt-chapter-narrative .wt-body:last-child {
    margin-bottom: 0;
  }

  .wt-story-mobile .wt-body + .wt-body,
  .wt-chapter-narrative .wt-body + .wt-body {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .wt-story-mobile .wt-story-utility,
  .wt-chapter-narrative .wt-story-utility {
    margin-top: 16px;
    margin-bottom: 0;
  }

  .wt-chapter-evidence {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .wt-creative-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
  }

  .wt-wall-tile {
    grid-column: span 1;
    height: auto;
  }

  .wt-wall-tile.wt-ratio-16-9,
  .wt-wall-tile.wt-ratio-2-3 {
    grid-column: span 2;
  }

  .wt-cluster-asym,
  .wt-pair-grid,
  .wt-pair-aiw,
  .wt-social-composition {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Universal Mobile Rule: Single primary web view on mobile */
  .wt-web-pair {
    display: block;
    width: 100%;
  }

  .wt-web-pair .wt-web-mobile,
  .wt-web-companion {
    display: none !important;
  }

  .wt-web-pair .wt-web-desk,
  .wt-web-primary {
    width: 100%;
    height: clamp(340px, 50vh, 460px);
  }

  .wt-adaptability-trio {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wt-adaptability-trio img:first-child {
    grid-column: span 2;
  }

  .wt-title-grid-3x2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .wt-trio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wt-storyboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .wt-product-trio {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wt-ooh-section {
    margin-top: clamp(56px, 9vh, 80px);
    margin-bottom: clamp(64px, 10vh, 96px);
  }

  .wt-ooh-duo {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 20px);
  }

  .wt-context-section {
    padding-top: clamp(36px, 5vh, 48px);
    padding-bottom: clamp(72px, 10vh, 96px);
    margin-bottom: 0;
  }

  .wt-context-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wt-context-lead {
    font-size: clamp(1.125rem, 4.2vw, 1.25rem);
    line-height: 1.48;
    margin-bottom: 14px;
  }

  .wt-context-body {
    font-size: clamp(0.9375rem, 3.6vw, 1rem);
    line-height: 1.58;
  }

  .wt-context-receipts {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wt-titleart-stage {
    padding: 24px 0;
  }

  .wt-titleart-img {
    width: clamp(260px, 85%, 440px);
  }

  .wt-colophon-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .wt-colophon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  .wt-social-subgrid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* -------------------------------------------------------------
   Reduced Motion Accessibility
   In reduced-motion mode, transition states cleanly via opacity alone,
   with no translateY displacement.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wt-narrative-state,
  .wt-story-state {
    transform: none !important;
    transition: opacity 400ms ease !important;
  }

  .wt-narrative-state.is-past,
  .wt-narrative-state.is-future,
  .wt-narrative-state.is-exiting,
  .wt-story-state.is-past,
  .wt-story-state.is-future,
  .wt-story-state.is-exiting {
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .wt-narrative-state.is-active,
  .wt-story-state.is-active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .wt-story-mobile,
  .wt-story-mobile.is-revealed,
  .wt-reveal-group,
  .wt-reveal-group.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SHARED CASE STUDY MOTION SYSTEM — PRE-PAINT / FOUC PROTECTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-orientation-animated]:not(.is-revealed),
  [data-evidence-item]:not(.is-revealed),
  [data-heading-animated]:not(.is-revealed),
  [data-standalone-statement]:not(.is-revealed),
  .wt-pagination [data-next-image]:not(.is-revealed),
  .wt-pagination .wt-next-media img:not(.is-revealed),
  .wt-pagination .wt-next-kicker:not(.is-revealed),
  .wt-pagination .wt-next-title-link:not(.is-revealed),
  .wt-pagination .wt-pagination-prev-block:not(.is-revealed) {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
  }

  [data-orientation-animated].is-revealed,
  [data-evidence-item].is-revealed,
  [data-heading-animated].is-revealed,
  [data-standalone-statement].is-revealed,
  .wt-pagination [data-next-image].is-revealed,
  .wt-pagination .wt-next-media img.is-revealed,
  .wt-pagination .wt-next-kicker.is-revealed,
  .wt-pagination .wt-next-title-link.is-revealed,
  .wt-pagination .wt-pagination-prev-block.is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-orientation-animated],
  [data-evidence-item],
  [data-heading-animated],
  [data-standalone-statement],
  .wt-pagination [data-next-image],
  .wt-pagination .wt-next-media img,
  .wt-pagination .wt-next-kicker,
  .wt-pagination .wt-next-title-link,
  .wt-pagination .wt-pagination-prev-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================
   EDITORIAL DISPLAY TYPOGRAPHY — NEWSREADER
   ============================================================= */
.wt-intro-title,
.wt-next-title {
  font-family: var(--font-display, 'Newsreader Display', Georgia, 'Times New Roman', serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-text-display, #f0e7da);
}

.wt-title {
  font-family: var(--font-display, 'Newsreader Display', Georgia, 'Times New Roman', serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-text-display, #f0e7da);
}

/* Contextual Cursor System (VIEW → / EXPLORE ↗) */
@media (hover: hover) and (pointer: fine) {
  [data-cursor],
  [data-cursor] *,
  .wt-pagination-right .wt-next-media-link,
  .wt-pagination-right .wt-next-media-link * {
    cursor: none !important;
  }
}

.wt-cursor-wrapper,
.sq-cursor-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}

.wt-cursor-body,
.sq-cursor-body {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  background-color: var(--color-text-hero, #f7f5f0);
  color: #07080a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0.2, 1),
              transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: opacity, transform;
}

.wt-cursor-wrapper.is-visible .wt-cursor-body,
.sq-cursor-wrapper.is-visible .sq-cursor-body {
  opacity: 1;
  transform: scale(1);
}

/* EXPLORE ↗ Semantic Sizing State (70px diameter with balanced horizontal breathing room) */
.wt-cursor-wrapper.is-explore .wt-cursor-body,
.sq-cursor-wrapper.is-explore .sq-cursor-body {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
}

.wt-cursor-wrapper.is-visible.is-pressed .wt-cursor-body,
.sq-cursor-wrapper.is-visible.is-pressed .sq-cursor-body {
  transform: scale(0.93);
}

.wt-cursor-label,
.sq-cursor-label {
  font-family: var(--font-family, 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wt-cursor-body,
  .sq-cursor-body,
  .wt-cursor-wrapper,
  .sq-cursor-wrapper {
    transition: none !important;
  }
}

/* ==========================================================================
   GLOBAL PAGE TRANSITION OVERLAY
   Restrained fade into site background (#0e0f11) on internal navigation
   ========================================================================== */
.wt-page-transition-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-bg, #0e0f11);
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .wt-page-transition-overlay {
    transition: none !important;
    animation: none !important;
  }
}