/* -------------------------------------------------------------
   Portfolio Styles
   ------------------------------------------------------------- */

/* Switzer (self-hosted, Fontshare FFL; licence in assets/fonts/switzer) */
@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer/Switzer-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer/Switzer-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer/Switzer-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer/Switzer-Semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer/Switzer-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader Display';
  src: url('assets/fonts/newsreader/woff/Newsreader-Variable.woff') format('woff');
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader Display';
  src: url('assets/fonts/newsreader/woff/Newsreader-Italic-Variable.woff') format('woff');
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
}

html {
  font-variation-settings: var(--display-axes);
}

:root {
  /* Type tiers for supporting copy.
     Intro: case-study intros, About bio, archive intro. Descriptor: project card descriptors. */
  --type-intro-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  --type-intro-tracking: -0.02em;
  --type-intro-leading: 1.5;
  /* Desktop display scale (at 1440px): section 49 · card/chapter 33 · lead 22 */
  --type-section-title: clamp(2rem, 3.4vw, 3.25rem);
  --type-card-title: clamp(1.5rem, 2.3vw, 2.2rem);
  --type-lead: clamp(1.1875rem, 1.55vw, 1.5rem);
  --type-descriptor-size: clamp(0.875rem, 1.05vw, 1rem);
  --type-descriptor-tracking: -0.01em;
  --type-descriptor-leading: 1.45;

  /* Warm Graphite Room */
  --color-bg: #0e0f11;
  --color-background: #0e0f11;
  --color-surface: #141518;
  --color-surface-hover: #191a1e;
  --color-surface-next: #222325;
  
  /* Hairline Rules */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-active: rgba(255, 255, 255, 0.18);
  
  /* Typographic Contrast */
  --color-text-hero: #f6f3ec; /* warmer — was #f6f5f2 */
  --color-text-display: #f3f0e8; /* bone, warmer — was #f3f2ef */
  --color-text-primary: #e9e6de; /* warmer — was #e9e8e5 */
  --color-text-secondary: rgba(243, 240, 232, 0.66); /* bone @66% — was #a7a7a5 */
  --color-text-project-meta: rgba(243, 240, 232, 0.58); /* bone @58% — was #949596 */
  --color-text-muted: rgba(243, 240, 232, 0.50); /* bone @50% — was #888a8d */
  --color-frame-text: #9a9791; /* ≥4.5:1 even where the 88% header sits over light imagery */
  --color-frame-active: #dcd8d0;
  
  /* Editorial display + neutral utility typography */
  --font-display: 'Newsreader Display', Georgia, 'Times New Roman', serif;
  /* Newsreader is variable (weight 300–400, optical size 40–72). A mid optical
     size gives sturdier hairlines than the Display cut; weight 350 sits between
     Light and Regular. Switzer is static, so these axes only affect Newsreader. */
  --display-axes: "wght" 350, "opsz" 52;
  --font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Grid Geometry */
  --grid-gutter: clamp(16px, 2.5vw, 36px);
  --page-margin: clamp(24px, 5vw, 84px);
  
  /* Restrained Object Curvature */
  --radius-object: 6px;
  
  /* Motion Kinetics */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  /* Section Spacing System */
  --space-section: 80px;
  --mobile-project-spacing: clamp(40px, 5.5vh, 48px);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Keep layout still when modals lock scrolling (classic scrollbars). */
  scrollbar-gutter: stable;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}

/* Text selection: bone on near-black, in step with the palette */
::selection { background: #f3f0e8; color: #0e0f11; }
::-moz-selection { background: #f3f0e8; color: #0e0f11; }
img::selection, video::selection { background: transparent; }
img::-moz-selection, video::-moz-selection { background: transparent; }

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  overflow-x: hidden;
  line-height: 1.5;
}

/* Deferred videos reserve their existing layout but do not reveal a poster or
   blank decoder frame. They resolve only after the first video frame is ready. */
video[data-deferred-video] {
  opacity: 0;
  transition: opacity 0.32s var(--ease-editorial);
}

video[data-deferred-video].is-media-ready {
  opacity: 1;
}

/* -------------------------------------------------------------
   Portfolio Frame
   ------------------------------------------------------------- */

.portfolio-frame {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top Rail */
.frame-top {
  pointer-events: auto;
  height: 54px;
  background: rgba(14, 15, 17, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-frame-text);
}

.frame-grid {
  height: 100%;
  align-items: center;
}

.frame-identity {
  grid-column: 1 / span 7;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.status-indicator {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2ee6a6;
  opacity: 1;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

.status-indicator::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #2ee6a6;
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  animation: status-indicator-pulse 5.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s infinite;
}

@keyframes status-indicator-pulse {
  0% {
    opacity: 0.18;
    transform: scale(1);
  }
  18% {
    opacity: 0.05;
    transform: scale(2);
  }
  24%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

.author-name {
  color: var(--color-text-hero);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s var(--ease-editorial);
}

.author-name:hover,
.author-name:focus-visible {
  opacity: 0.75;
}

.frame-bullet {
  color: var(--color-border);
  font-size: 0.45rem;
  line-height: 1;
  user-select: none;
}

.live-time {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0.05em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
}

.live-time.is-ready {
  visibility: visible;
  opacity: 1;
}

.author-location {
  color: var(--color-frame-text);
  font-weight: 400;
}

.frame-nav {
  grid-column: 8 / span 5;
  justify-self: end;
  display: flex;
  align-items: center;
}

.frame-nav-desktop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.frame-nav-link {
  color: var(--color-frame-text);
  text-decoration: none;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s var(--ease-editorial);
  cursor: pointer;
}

.frame-nav-link:hover,
.frame-nav-link:focus-visible {
  color: var(--color-text-hero);
}

.frame-nav-sep {
  color: var(--color-border);
  font-size: 0.55rem;
  line-height: 1;
  user-select: none;
}

.frame-menu-btn {
  display: none;
}

/* Bottom Rail */
.frame-bottom {
  pointer-events: auto;
  height: 42px;
  background: rgba(14, 15, 17, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-frame-text);
}

.frame-meta-slot {
  height: 100%;
  align-items: center;
}

.frame-project-id {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
}

.project-index {
  color: var(--color-frame-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.project-title-meta {
  color: var(--color-frame-active);
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.frame-discipline {
  grid-column: 5 / span 5;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.frame-origin {
  grid-column: 10 / span 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* -------------------------------------------------------------
   12-Column Grid
   ------------------------------------------------------------- */

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  padding: 0 var(--page-margin);
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
}

.col-span-12 { grid-column: span 12; }
.col-span-9  { grid-column: span 9; }
.col-span-8  { grid-column: span 8; }
.col-span-7  { grid-column: span 7; }
.col-span-6  { grid-column: span 6; }
.col-span-5  { grid-column: span 5; }
.col-span-4  { grid-column: span 4; }
.col-span-3  { grid-column: span 3; }

[class*="col-span-"] {
  min-width: 0;
}

.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }

/* Grid compounds: start + span combinations */
.col-span-8.col-start-3 { grid-column: 3 / span 8; }
.col-span-6.col-start-4 { grid-column: 4 / span 6; }
.col-span-10.col-start-2 { grid-column: 2 / span 10; }

/* Case study main container baseline */
.case-study,
.wt-page {
  padding-bottom: 0 !important;
}

/* -------------------------------------------------------------
   Project Header
   ------------------------------------------------------------- */

.project-header {
  padding-top: clamp(112px, 15vh, 168px);
  padding-bottom: clamp(56px, 7.5vh, 92px);
  width: 100%;
}

.project-title {
  font-size: clamp(3.25rem, 6.8vw, 5.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--color-text-hero);
  margin-bottom: clamp(20px, 2.5vh, 28px);
}

.project-proposition {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.48;
  color: var(--color-text-secondary);
  letter-spacing: -0.015em;
  max-width: 820px;
}

/* -------------------------------------------------------------
   Opening Hero
   ------------------------------------------------------------- */

.section-hero {
  width: 100%;
  padding-bottom: 0;
}

.hero-stage {
  width: 100%;
  padding: 0 var(--page-margin);
  max-width: 1720px;
  margin: 0 auto;
}

.hero-media-wrap {
  width: 100%;
  height: clamp(520px, 72vh, 840px);
  background: #08090a;
  position: relative;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}

/* Hero Integrated Logo Overlay */
.hero-logo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  padding: 0 clamp(20px, 4vw, 48px);
}

.hero-logo-svg {
  width: 100%;
  max-width: clamp(280px, 46vw, 640px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 36px rgba(0, 0, 0, 0.75));
}

/* Wonder Project Hero Cinematic Video Integration (Scoped strictly to Wonder Project) */
.hero-media-wrap.frame-hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Left edge feather: outer 5–8% (7%) dissolves into page background */
    linear-gradient(to right, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Right edge feather: outer 5–8% (7%) dissolves into page background */
    linear-gradient(to left, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Bottom edge fade: bottom 8–12% (10%) dissolves into page background */
    linear-gradient(to top, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.75) 2.5%, rgba(14, 15, 17, 0.4) 5%, rgba(14, 15, 17, 0.12) 7.5%, transparent 10%),
    /* Base dark overlay to deepen and richen footage (10% black) */
    rgba(0, 0, 0, 0.10);
}



/* -------------------------------------------------------------
   Context Section (Standard Introductory Narrative Primitive)
   ------------------------------------------------------------- */

.section-context {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  width: 100%;
}

.context-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
  display: block;
}

.context-lead {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-text-hero);
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  max-width: 840px;
}

.context-body {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.68;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  max-width: 840px;
}

.context-body + .context-body {
  margin-top: 16px;
}

/* -------------------------------------------------------------
   Wordmark Choreography
   ------------------------------------------------------------- */

.section-choreography {
  width: 100%;
  position: relative;
  background-color: #07080a;
}

/* Pinned Scroll Runway */
.choreo-runway {
  height: 400vh;
  position: relative;
  width: 100%;
  background-color: #07080a;
}

.choreo-sticky-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Visual Stage */
.choreo-world-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  will-change: clip-path, opacity;
}

.world-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: #060708;
  overflow: hidden;
}

.world-aerial-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.world-aerial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

/* Wordmark Stage */
.choreo-wordmark-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

.wordmark-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  pointer-events: none;
}

.svg-group-surrounding {
  fill: #ffffff;
  transition: opacity 0.15s ease-out;
}

.svg-group-q {
  fill: #ffffff;
}

.svg-letter-path,
.svg-q-path {
  fill: #ffffff;
}

/* Editorial Thoughts */
.choreo-thoughts-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
}

.choreo-thought-grid {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.choreo-thought {
  position: absolute;
  width: 100%;
  max-width: 620px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  pointer-events: none;
}

#thoughtSearch {
  top: calc(47% + clamp(64px, 11vh, 100px));
}

#thoughtRecognition {
  top: calc(47% + clamp(72px, 13vh, 110px));
}

.thought-lead {
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

.thought-punchline {
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.4;
  font-weight: 450;
  color: var(--color-text-hero);
  letter-spacing: -0.02em;
}

/* Mobile Choreography Adaptations (<= 860px) */
@media (max-width: 860px) {
  .section-choreography {
    margin-top: -clamp(80px, 14vh, 130px);
  }

  .choreo-runway {
    height: 220vh;
  }

  .world-canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .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;
  }

  .choreo-thought {
    padding: 0 24px;
    max-width: 480px;
  }

  #thoughtSearch {
    top: calc(44% + clamp(48px, 8vh, 68px));
  }

  #thoughtRecognition {
    top: calc(44% + clamp(56px, 9vh, 76px));
  }
}

/* -------------------------------------------------------------
   Project Gallery
   ------------------------------------------------------------- */

.section-gallery {
  width: 100%;
  padding-top: 0;
  padding-bottom: var(--space-section);
  position: relative;
  background: var(--color-background);
}

.gallery-block {
  margin-bottom: var(--space-section);
}

.gallery-block:last-child {
  margin-bottom: 0;
}

/* Column Vertical Offset */
.gallery-col-offset {
  margin-top: clamp(32px, 6vh, 72px);
}

/* Media Frame */
.gallery-media-frame {
  width: 100%;
  max-width: 100%;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  position: relative;
}

.gallery-media-frame:hover {
  border-color: var(--color-border-active);
}

.gallery-img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect Ratio Variations */
.frame-flatlay {
  aspect-ratio: 16 / 10.5;
}

.frame-macro {
  aspect-ratio: 1 / 1;
}

.frame-pattern {
  aspect-ratio: 1 / 1;
}

.frame-card-back {
  aspect-ratio: 1 / 1;
}

.frame-credential {
  aspect-ratio: 1 / 1;
}

.frame-hero-still {
  aspect-ratio: 16 / 10;
  max-height: 800px;
}

/* Media Frame Variations */
.frame-hero-architectural {
  height: clamp(540px, 75vh, 880px);
}

.frame-kaizen-wide {
  aspect-ratio: 16 / 10.4;
  max-height: 820px;
}

.frame-kaizen-process {
  aspect-ratio: 16 / 11.3;
}

.frame-kaizen-detail {
  aspect-ratio: 1 / 1;
}

.frame-weightroom-aerial {
  aspect-ratio: 16 / 9.8;
}

.frame-weightroom-column {
  aspect-ratio: 1 / 1;
}

.frame-weightroom-door {
  aspect-ratio: 1 / 1;
}

.frame-pressure {
  aspect-ratio: 1 / 1;
}

.frame-pillar {
  aspect-ratio: 1 / 1.05;
}

.frame-corridor-slide {
  aspect-ratio: 1 / 1.05;
}

.frame-corridor-numbers {
  aspect-ratio: 1 / 1.05;
}

.frame-lockeroom-wide {
  aspect-ratio: 16 / 10.4;
  max-height: 820px;
}

.frame-lockeroom-detail {
  aspect-ratio: 1.18 / 1;
}

.frame-tunnel-sweep {
  aspect-ratio: 16 / 10;
}

.frame-tunnel-turn {
  aspect-ratio: 1 / 1.05;
}

.frame-dugout-stairs {
  aspect-ratio: 1 / 1.08;
}

.frame-field-view {
  aspect-ratio: 1 / 1.08;
}

/* Video Frame */
.frame-video {
  aspect-ratio: 16 / 9;
}

.gallery-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.gallery-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #08090a;
}

/* Campaign & Exhibition Frames */
.frame-panoramic-ooh {
  aspect-ratio: 1692 / 469;
}

.frame-panoramic-ooh img {
  object-fit: contain;
}

.frame-square {
  aspect-ratio: 1 / 1;
}

.frame-poster {
  aspect-ratio: 0.77 / 1;
}

.frame-poster-alt {
  aspect-ratio: 0.8 / 1;
}

.frame-exhibition-context {
  aspect-ratio: 16 / 10.6;
}

.frame-exhibition-close {
  aspect-ratio: 1 / 1.05;
}

/* Product Trio */
.product-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.product-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.product-frame:hover {
  border-color: var(--color-border-active);
}

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

/* Broadcast Storyboard Grid */
.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(10px, 1.4vw, 18px);
  row-gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
}

.storyboard-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  position: relative;
}

.storyboard-frame:hover {
  border-color: var(--color-border-active);
}

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

/* -------------------------------------------------------------
   Wonder Project Component Styles & Narrative Systems
   ------------------------------------------------------------- */

/* Editorial Narrative Rhythm */
.gallery-block-chapter {
  margin-bottom: clamp(96px, 12vh, 140px);
}

.gallery-block-paired {
  margin-bottom: clamp(28px, 3.5vh, 40px);
}

.gallery-block-single {
  margin-bottom: clamp(48px, 6vh, 72px);
}

/* Cinematic Full-Bleed Interstitial */
.cinematic-interstitial-wrap {
  width: 100%;
  margin-top: clamp(64px, 8vh, 96px);
  margin-bottom: clamp(80px, 10vh, 120px);
}

.cinematic-interstitial {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  position: relative;
}

.cinematic-interstitial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Chapter Headers */
.gallery-chapter-header {
  margin-bottom: clamp(32px, 4.5vh, 52px);
}

.gallery-chapter-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.gallery-chapter-title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.18;
  font-weight: 500;
  color: var(--color-text-hero);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.gallery-chapter-prose {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 820px;
  letter-spacing: -0.01em;
}

/* Studio & Platform Interstitial (Cinematic Transition Primitive) */
.cinematic-interstitial-stage {
  width: 100%;
  padding: 0 var(--page-margin);
  max-width: 1720px;
  margin: clamp(32px, 5vh, 64px) auto clamp(96px, 12vh, 140px) auto;
}

.cinematic-interstitial {
  width: 100%;
  aspect-ratio: 2.39 / 1;
  overflow: hidden;
  border-radius: var(--radius-object);
  background: #08090a;
  position: relative;
}

.cinematic-interstitial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 01 Brand Mark Stage */
.wonder-brand-mark-stage {
  width: 100%;
  padding: clamp(48px, 8vw, 84px) clamp(24px, 4vw, 48px);
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.wonder-brand-mark-stage:hover {
  border-color: var(--color-border-active);
}

.wonder-brand-mark-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

/* 02 Adventure in Wonder */
.aiw-logo-stage {
  width: 100%;
  padding: clamp(44px, 7vw, 76px) clamp(24px, 4vw, 48px);
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.aiw-logo-stage:hover {
  border-color: var(--color-border-active);
}

.aiw-logo-svg {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
}

.aiw-pair-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  align-items: end;
  width: 100%;
}

.frame-aiw-horizontal {
  aspect-ratio: 16 / 9;
}

.frame-aiw-vertical {
  aspect-ratio: 2 / 3;
}

.frame-firetv-hero {
  aspect-ratio: 16 / 9;
}

/* 03 Curated Slate Lineup */
.slate-lineup-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: clamp(10px, 1.3vw, 18px);
  row-gap: 16px;
  width: 100%;
}

.slate-poster-item {
  width: 100%;
}

.slate-poster-frame {
  aspect-ratio: 2 / 3;
  width: 100%;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.slate-poster-frame:hover {
  border-color: var(--color-border-active);
}

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

/* 03 Streaming Slate Wall — Breadth & Volume Contact Sheet */
.slate-grid-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(6px, 0.75vw, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: clamp(20px, 3vh, 32px);
  align-items: stretch;
  overflow-x: clip;
  box-sizing: border-box;
}

.slate-grid-tile {
  position: relative;
  overflow: hidden;
  background: #08090a;
  border-radius: var(--radius-object);
  border: none;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.slate-grid-tile img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

/* Desktop 12-Column Grid Spans (sum each row to 12) */
@media (min-width: 769px) {
  .slate-span-7 { grid-column: span 7; }
  .slate-span-5 { grid-column: span 5; }
  .slate-span-3 { grid-column: span 3; }
  .slate-span-2 { grid-column: span 2; }
}



/* 04 Platform Ecosystem */
.frame-platform-discover {
  aspect-ratio: 16 / 9;
}

.frame-platform-multi {
  aspect-ratio: 16 / 9;
}

.frame-platform-art {
  aspect-ratio: 16 / 10;
}

/* 05 House of David Campaign System */
.hod-input-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  align-items: center;
  width: 100%;
}

.hod-title-stage {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3.5vw, 40px);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: border-color 0.4s var(--ease-editorial);
}

.hod-title-stage:hover {
  border-color: var(--color-border-active);
}

.hod-title-stage img {
  width: 100%;
  max-width: 440px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 05 House of David — 3×2 Social Campaign Wall */
.hod-social-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
}

.hod-social-wall-item {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.hod-social-wall-item:hover {
  border-color: var(--color-border-active);
}

.hod-social-wall-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 05 House of David — Explore Page Contained Viewport */
.explore-viewport-frame {
  width: 100%;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  transition: border-color 0.4s var(--ease-editorial);
}

.explore-viewport-frame:hover {
  border-color: var(--color-border-active);
}

.explore-viewport-chrome {
  height: 34px;
  background: #191a1e;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.explore-viewport-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.explore-viewport-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.explore-viewport-hint {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}

.explore-viewport-scrollable {
  width: 100%;
  height: clamp(480px, 64vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #08090a;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.explore-viewport-scrollable::-webkit-scrollbar {
  width: 6px;
}

.explore-viewport-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.explore-viewport-scrollable img {
  width: 100%;
  height: auto;
  display: block;
}

/* 06 Owned Digital Experience */
.web-experience-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  align-items: start;
  width: 100%;
}

.web-browser-frame {
  width: 100%;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  transition: border-color 0.4s var(--ease-editorial);
}

.web-browser-frame:hover {
  border-color: var(--color-border-active);
}

.web-browser-chrome {
  height: 32px;
  background: #111214;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
}

.web-browser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b2d31;
  flex-shrink: 0;
}

.web-browser-address {
  margin-left: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #63666e;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.web-browser-viewport {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #08090a;
}

.web-browser-viewport img {
  width: 100%;
  height: auto;
  display: block;
}

.web-mobile-frame {
  width: 100%;
  max-width: 290px;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-object) * 2.2);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  padding: 8px 8px 12px 8px;
  margin: 0 auto;
  transition: border-color 0.4s var(--ease-editorial);
}

.web-mobile-frame:hover {
  border-color: var(--color-border-active);
}

.web-mobile-screen {
  width: 100%;
  aspect-ratio: 9 / 18.5;
  border-radius: calc(var(--radius-object) * 1.5);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #08090a;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.web-mobile-screen::-webkit-scrollbar {
  width: 4px;
}

.web-mobile-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.web-mobile-screen img {
  width: 100%;
  height: auto;
  display: block;
}

/* 08 Times Square Paired OOH Composition */
.ooh-paired-stage {
  display: grid;
  grid-template-columns: 0.6178fr 0.3508fr;
  gap: clamp(10px, 1.4vw, 20px);
  width: 100%;
  max-width: clamp(740px, 68vw, 920px);
  margin: 0 auto;
  align-items: stretch;
}

.ooh-paired-item {
  position: relative;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #08090a;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.ooh-paired-item:hover {
  border-color: var(--color-border-active);
}

.ooh-paired-photo {
  aspect-ratio: 1012 / 1638;
}

.ooh-paired-mockup {
  aspect-ratio: 576 / 1642;
}

.ooh-paired-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------
   09 Launch Control Case Study Styles
   ------------------------------------------------------------- */

/* Frame Aspect Ratios */
.frame-launch-hero {
  height: auto !important;
  aspect-ratio: 3024 / 1662;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  box-shadow: 0 20px 64px -16px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
}

.frame-launch-hero::after {
  display: none !important;
  content: none !important;
}

.frame-launch-hero video,
.frame-launch-hero .gallery-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.frame-launch-old-web {
  aspect-ratio: 3024 / 1664;
  background: #08090a;
}

.frame-launch-old-gfx {
  aspect-ratio: 800 / 526;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-launch-old-gfx img {
  object-fit: contain;
  padding: clamp(16px, 3vw, 32px);
}

.frame-launch-typo {
  aspect-ratio: 1590 / 1714;
  background: #ffffff;
}

.frame-launch-photo {
  aspect-ratio: 1 / 1;
}

.frame-launch-product {
  aspect-ratio: 1340 / 1418;
  background: #f0f7ff;
}

.frame-launch-ebook {
  aspect-ratio: 1720 / 1050;
  background: #f8fafc;
}

.frame-launch-motion {
  aspect-ratio: 1080 / 1350;
  background: #08090a;
}

.frame-launch-ad {
  aspect-ratio: 850 / 1063;
  background: #08090a;
}

/* Starting Point Comparative Grid */
.launch-starting-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  align-items: stretch;
  width: 100%;
}

.launch-starting-grid > * {
  min-width: 0;
}

/* Brand Tokens & Color Palette Strip */
.launch-token-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
  margin-top: clamp(20px, 3vh, 32px);
  margin-bottom: clamp(20px, 3vh, 32px);
}

.launch-color-chip {
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s var(--ease-editorial);
}

.launch-color-chip:hover {
  border-color: var(--color-border-active);
}

.launch-chip-color {
  width: 100%;
  height: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.launch-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.launch-chip-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.launch-chip-hex {
  font-size: 0.6875rem;
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
}

.launch-chip-role {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-top: 2px;
}

/* Iconography Strips & Grids */
.launch-icon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  width: 100%;
  margin-top: clamp(20px, 3vh, 32px);
}

.launch-icon-tile {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-object);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.5vw, 32px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.4s var(--ease-editorial);
}

.launch-icon-tile:hover {
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.45);
}

.launch-icon-tile img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
}

.launch-icon-tile-label {
  position: absolute;
  bottom: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  font-weight: 500;
}

/* Section 05: Kinetic Identity / Animated Icon Specimen Plate (Solid Pure White #FFFFFF) */
.launch-specimen-plate {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-object);
  padding: clamp(48px, 7vh, 84px) clamp(24px, 4vw, 64px);
  box-shadow: 0 24px 72px -16px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-specimen-plate:hover {
  border-color: rgba(0, 122, 255, 0.35);
}

.launch-specimen-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: clamp(32px, 5vh, 56px);
  column-gap: clamp(16px, 2.6vw, 40px);
  width: 100%;
  align-items: center;
  justify-items: center;
}

.launch-specimen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: transparent;
  border: none;
  contain: layout paint;
}

.launch-specimen-item img {
  width: clamp(60px, 5.8vw, 84px);
  height: clamp(60px, 5.8vw, 84px);
  object-fit: contain;
  display: block;
}

/* Feature Vignettes: Asymmetric Editorial System & Paired 50/50 Layouts */
.launch-feature-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-feature-pair-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.launch-feature-media-frame {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-feature-media-frame:hover {
  border-color: var(--color-border-active);
}

.launch-feature-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-feature-pair-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
}

.launch-feature-pair-card:hover {
  border-color: var(--color-border-active);
}

.launch-feature-pair-card img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-vignette-primary {
  width: 100%;
  background: #ffffff;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-vignette-primary:hover {
  border-color: var(--color-border-active);
}

.launch-vignette-primary img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-vignette-banner {
  width: 100%;
  background: #0066ff;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid rgba(0, 102, 255, 0.3);
  box-shadow: 0 16px 48px -12px rgba(0, 102, 255, 0.35);
  transition: transform 0.4s var(--ease-editorial), box-shadow 0.4s var(--ease-editorial);
}

.launch-vignette-banner:hover {
  box-shadow: 0 20px 56px -10px rgba(0, 102, 255, 0.45);
}

.launch-vignette-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-vignette-stat {
  width: 100%;
  background: #ffffff;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-vignette-stat:hover {
  border-color: var(--color-border-active);
}

.launch-vignette-stat img {
  width: 100%;
  height: auto;
  display: block;
}

/* Launch AI Diptych / Pair Grid */
.launch-ai-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-ai-pair-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.launch-ai-media-frame {
  position: relative;
  background: #050b14;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid rgba(43, 130, 246, 0.25);
  box-shadow: 0 20px 56px -12px rgba(0, 0, 0, 0.75);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-ai-media-frame:hover {
  border-color: rgba(43, 130, 246, 0.45);
}

.launch-ai-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-ai-pair-card {
  position: relative;
  background: #050b14;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid rgba(43, 130, 246, 0.25);
  box-shadow: 0 20px 56px -12px rgba(0, 0, 0, 0.75);
  transition: border-color 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
}

.launch-ai-pair-card:hover {
  border-color: rgba(43, 130, 246, 0.45);
}

.launch-ai-pair-card img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-ai-feature-card {
  width: 100%;
  background: #050b14;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid rgba(43, 130, 246, 0.25);
  box-shadow: 0 20px 56px -12px rgba(0, 0, 0, 0.75);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-ai-feature-card:hover {
  border-color: rgba(43, 130, 246, 0.45);
}

.launch-ai-feature-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 05: Everyday Brand Touchpoints (Deck, Social, Publications) */
.launch-deck-frame {
  position: relative;
  width: 100%;
  background: #11141a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 20px 60px -16px rgba(0, 0, 0, 0.65);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-deck-frame:hover {
  border-color: var(--color-border-active);
}

.launch-deck-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-everyday-social-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-everyday-social-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.launch-everyday-social-frame {
  position: relative;
  background: #0d1117;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-everyday-social-frame:hover {
  border-color: var(--color-border-active);
}

.launch-everyday-social-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-everyday-social-card {
  position: relative;
  background: #0d1117;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
}

.launch-everyday-social-card:hover {
  border-color: var(--color-border-active);
}

.launch-everyday-social-card img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-everyday-pub-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-everyday-pub-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.launch-everyday-pub-card {
  position: relative;
  background: #11141a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
}

.launch-everyday-pub-card:hover {
  border-color: var(--color-border-active);
}

.launch-everyday-pub-media {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3.5vw, 44px);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-everyday-pub-media:hover {
  border-color: var(--color-border-active);
}

.launch-everyday-pub-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Launch Control Website Showcase Components */
.launch-web-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-crop-card {
  position: relative;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
  display: flex;
  flex-direction: column;
}

.launch-crop-card:hover {
  border-color: var(--color-border-active);
}

.launch-crop-standalone {
  width: 100%;
  background: #0d0e12;
  overflow: hidden;
}

.launch-crop-standalone img {
  width: 100%;
  height: auto;
  display: block;
}

.launch-crop-window {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: #0d0e12;
}

.launch-crop-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crop-pos-top img {
  object-position: center top;
}

.crop-pos-mid-upper img {
  object-position: center 25%;
}

.crop-pos-mid img {
  object-position: center 50%;
}

.crop-pos-mid-lower img {
  object-position: center 70%;
}

.crop-pos-btm img {
  object-position: center 95%;
}

/* Features Paired Modular System (No browser chrome) */
.launch-features-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-feature-module-card {
  position: relative;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-feature-module-card:hover {
  border-color: var(--color-border-active);
}

.launch-feature-media {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}

.launch-feature-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Editorial Stage: Full-width static artifact container (No browser chrome/viewport) */
.launch-editorial-stage {
  width: 100%;
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-editorial-stage:hover {
  border-color: var(--color-border-active);
}

.launch-editorial-stage img {
  width: 100%;
  height: auto;
  display: block;
}

/* Browser Showcase (Full-view editorial container) */
.web-browser-showcase {
  width: 100%;
  background: #08090a;
  overflow: hidden;
}

.web-browser-showcase img {
  width: 100%;
  height: auto;
  display: block;
}

/* Supporting Pair: Tablet Dashboard + eBook */
.launch-supporting-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
  align-items: stretch;
}

.launch-supporting-card {
  background: #141518;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--ease-editorial);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}

.launch-supporting-card:hover {
  border-color: var(--color-border-active);
}

.launch-supporting-media {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #08090a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.launch-supporting-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Launch AI Dedicated Editorial Stage: Standalone visual moment (No browser chrome) */
.launch-ai-stage {
  width: 100%;
  background: #07090f;
  border: 1px solid rgba(0, 122, 255, 0.28);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 72px -16px rgba(0, 80, 220, 0.25), 0 12px 32px -8px rgba(0, 0, 0, 0.8);
  transition: border-color 0.4s var(--ease-editorial), box-shadow 0.4s var(--ease-editorial);
}

.launch-ai-stage:hover {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 28px 80px -16px rgba(0, 80, 220, 0.35), 0 16px 40px -8px rgba(0, 0, 0, 0.85);
}

.launch-ai-stage img {
  width: 100%;
  height: auto;
  display: block;
}

/* Launch AI Specialized Browser Frame & Dedicated Viewport */
.launch-ai-browser-frame {
  width: 100%;
  background: #0b0d14;
  border: 1px solid rgba(0, 122, 255, 0.28);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 72px -16px rgba(0, 80, 220, 0.22), 0 12px 32px -8px rgba(0, 0, 0, 0.8);
  transition: border-color 0.4s var(--ease-editorial), box-shadow 0.4s var(--ease-editorial);
}

.launch-ai-browser-frame:hover {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 28px 80px -16px rgba(0, 80, 220, 0.32), 0 16px 40px -8px rgba(0, 0, 0, 0.85);
}

.launch-ai-viewport {
  width: 100%;
  background: #07090f;
  overflow: hidden;
}

.launch-ai-viewport img {
  width: 100%;
  height: auto;
  display: block;
}

/* Video Stage & Motion Player Frames */
.launch-video-player-frame {
  width: 100%;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  aspect-ratio: 16 / 9;
  position: relative;
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-video-player-frame:hover {
  border-color: var(--color-border-active);
}

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

/* Section 05: Motion Identity 2-Up Showcase */
.launch-motion-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
}

.launch-motion-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Section 07: Performance Creative / Paid Video Acquisition Spotlight */
.launch-performance-video-showcase {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.launch-performance-video-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 72px -16px rgba(0, 0, 0, 0.7);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-performance-video-frame:hover {
  border-color: var(--color-border-active);
}

.launch-performance-video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section 06: Campaign Motion Showcase */
.launch-campaign-motion-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.launch-campaign-motion-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.launch-campaign-media-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-campaign-media-frame:hover {
  border-color: var(--color-border-active);
}

.launch-campaign-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Campaign 4:5 Ad Grid */
.launch-ad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  width: 100%;
}

.launch-ad-campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
}

.launch-ad-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #08090a;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease-editorial);
}

.launch-ad-card:hover {
  border-color: var(--color-border-active);
}

.launch-ad-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Independent Chapter Section & Narrative Architecture */
.wt-chapter-section {
  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);
}

.wt-chapter-narrative {
  position: sticky;
  top: 90px;
  align-self: start;
  padding-top: 6px;
  padding-bottom: 40px;
  display: block;
}

.wt-chapter-narrative .wt-title {
  padding-right: clamp(48px, 4.5vw, 64px);
}

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

@media (max-width: 860px) {
  .wt-chapter-section {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 48px);
    margin-bottom: clamp(64px, 10vh, 96px);
  }

  .wt-chapter-narrative {
    position: static;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
    gap: 0;
  }

  .wt-chapter-narrative .wt-title {
    padding-right: 0;
  }

  .launch-ad-campaign-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* =============================================================
   HRE Beauty Case Study
   ============================================================= */

/* Opening Hero */
.frame-hre-hero {
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #121110;
}

.frame-hre-hero .hero-img {
  object-fit: cover;
  object-position: center 36%;
}

/* Evidence-Only Starting Point Grid */
.hre-starting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
  width: 100%;
}

.hre-starting-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-object);
  overflow: hidden;
  background: #141312;
  border: 1px solid var(--color-border);
}

.hre-starting-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hre-starting-item:nth-child(5) img {
  object-position: center 22%;
}

/* Chapter 1: Editorial Mosaic */
.hre-editorial-mosaic {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 24px);
  width: 100%;
}

.hre-mosaic-row {
  width: 100%;
}

.hre-mosaic-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
}

.hre-mosaic-hero {
  width: 100%;
}

.hre-mosaic-frame-hero {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #121110;
}

.hre-mosaic-frame-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}

.hre-mosaic-3up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
}

.hre-mosaic-asymmetric {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}

.hre-mosaic-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #121110;
}

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

.hre-mosaic-frame-wide {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #121110;
}

.hre-mosaic-frame-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hre-mosaic-frame-narrow {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #121110;
}

.hre-mosaic-frame-narrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chapter 2: Repeatable Process Frame */
.hre-chapter-system {
  margin-bottom: clamp(140px, 18vh, 220px);
}

.hre-process-stage {
  width: 100%;
  max-width: 100%;
}

.hre-process-frame {
  width: 100%;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  background: #0d0e10;
  overflow: hidden;
}

.hre-process-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Chapter 3: Subchapter Spacing */
.hre-subchapter-slot {
  margin-top: clamp(48px, 6.5vh, 76px);
}

.hre-subchapter-header {
  margin-bottom: clamp(14px, 2vh, 20px);
}

/* 9:16 Performance Creative Wall */
.hre-ads-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
  width: 100%;
}

.hre-ad-card {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-object);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #121110;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.4s ease, box-shadow 0.5s ease;
}

.hre-ad-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.hre-ad-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lifecycle / Email Design System — 2x2 Equal Editorial Grid */
.hre-email-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  width: 100%;
}

.hre-email-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.hre-email-frame {
  background: #141312;
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.hre-email-card:hover .hre-email-frame {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Restrained, understated header */
.hre-email-frame-header {
  background: #161514;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hre-email-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.hre-email-subject {
  margin-left: 6px;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hre-email-viewport {
  width: 100%;
  height: clamp(480px, 58vh, 580px);
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
  -webkit-overflow-scrolling: touch;
}

.hre-email-viewport::-webkit-scrollbar {
  width: 4px;
}

.hre-email-viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.hre-email-img {
  width: 100%;
  height: auto;
  display: block;
}

.hre-email-inspect-badge {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 5;
  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;
  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;
  color: var(--color-text-secondary, #bab6ae);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  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);
}

.hre-email-inspect-badge svg {
  display: block;
  width: 10px;
  height: 10px;
  color: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

.hre-email-card:hover .hre-email-inspect-badge {
  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);
}

.hre-email-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
}

.hre-email-sublabel {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/* Lightbox Modal */
.hre-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.hre-lightbox-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hre-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 7, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hre-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.hre-lightbox-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(16px, 3vw, 36px);
  background: rgba(18, 17, 16, 0.94);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.hre-lightbox-info {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.hre-lightbox-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.hre-lightbox-subject {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  font-weight: 500;
}

.hre-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hre-lightbox-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hre-lightbox-nav-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hre-lightbox-nav-btn:hover {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.hre-lightbox-counter {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
}

.hre-lightbox-close {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.hre-lightbox-close:hover {
  color: var(--color-text-primary);
}

.hre-lightbox-scrollable {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vh, 40px) 16px 60px;
  -webkit-overflow-scrolling: touch;
}

.hre-lightbox-sheet {
  max-width: 640px;
  width: 100%;
  background: #fff;
  border-radius: calc(var(--radius-object) + 2px);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background-clip: padding-box; /* keep the white sheet from showing through the hairline */
  margin: auto 0;
}

.hre-lightbox-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption Block */
.gallery-caption-block {
  padding-top: clamp(16px, 2.5vh, 24px);
  max-width: 540px;
}

.gallery-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

.gallery-annotation {
  font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
  line-height: 1.48;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}

.gallery-narrative-prose {
  font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}

/* Contained Hero */
.gallery-contained-hero {
  width: 100%;
  margin: 0 auto;
}

/* Conclusion Ledger */
.gallery-conclusion-ledger {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  padding-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--color-border);
}

.ledger-col-meta {
  grid-column: 1 / span 3;
}

.ledger-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
  display: block;
}

.ledger-col-body {
  grid-column: 5 / span 8;
}

.conclusion-lead {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  max-width: 780px;
}

/* Gallery Lead Prose */
.gallery-lead-prose {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--color-text-primary);
  max-width: 820px;
  margin-bottom: clamp(32px, 5vh, 56px);
  letter-spacing: -0.015em;
}

/* Project Colophon */
.project-colophon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: 20px;
  padding-top: clamp(24px, 3vh, 36px);
  margin-top: clamp(24px, 3vh, 36px);
  border-top: 1px solid var(--color-border);
}

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

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

.colophon-value {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   Case Study Pagination (Editorial 30/70 Split Geometry)
   ------------------------------------------------------------- */

.wt-pagination,
.section-next-project,
.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: var(--type-section-title);
  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: var(--type-m-section-title);
    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);
  }
}

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

.next-project-header {
  margin-bottom: clamp(16px, 2.4vh, 22px);
}

.next-project-kicker {
  display: block;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
  margin-bottom: 8px;
  transition: color 0.3s var(--ease-editorial);
}

.next-project-title {
  font-size: clamp(1.85rem, 2.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-text-hero);
  margin: 0;
  transition: color 0.3s var(--ease-editorial);
}

.next-project-arrow {
  display: inline-block;
  font-weight: 300;
  font-size: 0.85em;
  color: var(--color-text-tertiary);
  margin-left: 6px;
  vertical-align: 1px;
  transition: color 0.3s var(--ease-editorial);
}

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

.next-project-link:hover .next-project-kicker {
  color: var(--color-text-secondary);
}

/* Next Project Visual Glimpse (Shallow Cinematic Preview) */
.next-project-glimpse {
  width: 100%;
}

.next-project-media-frame {
  width: 100%;
  aspect-ratio: 3.4 / 1;
  max-height: 280px;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s var(--ease-editorial);
}

.next-project-link:hover .next-project-media-frame {
  border-color: var(--color-border-subtle);
}

.next-project-media-frame .gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* -------------------------------------------------------------
   Global Footer
   ------------------------------------------------------------- */

.global-footer {
  width: 100%;
  position: relative;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-section, 80px);
  padding-bottom: clamp(72px, 10vh, 96px);
}

.global-footer-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text-display);
  font-weight: 300;
  margin-bottom: 4px;
}

.footer-role,
.footer-focus,
.footer-location {
  font-size: 0.8125rem; /* 13px */
  color: var(--color-text-secondary);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.global-footer-links {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-link {
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s var(--ease-editorial);
}

.footer-link:hover {
  color: var(--color-text-primary);
}

.footer-sep {
  color: var(--color-border);
  font-size: 0.6875rem;
  user-select: none;
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .frame-identity {
    grid-column: 1 / span 8;
  }

  .frame-nav {
    grid-column: 9 / span 4;
    justify-self: end;
  }

  .frame-discipline {
    display: none;
  }

  .frame-project-id {
    grid-column: 1 / span 7;
  }

  .frame-origin {
    grid-column: 8 / span 5;
  }

  .ledger-col-meta {
    grid-column: 1 / span 12;
    margin-bottom: 12px;
  }

  .ledger-col-body {
    grid-column: 1 / span 12;
  }

  .next-project-canvas-stage {
    aspect-ratio: 16 / 9;
  }

  .slate-grid-wall,
  .slate-grid-row {
    gap: 8px;
  }
}

/* Mobile Navigation Overlay (Base) */
.mobile-menu-overlay {
  display: none;
}

@media (max-width: 768px) {
  .author-location,
  .live-time,
  .frame-identity .frame-bullet {
    display: none;
  }

  .frame-identity {
    grid-column: 1 / span 8;
  }

  .frame-nav {
    grid-column: 9 / span 4;
    justify-self: end;
  }

  .frame-nav-desktop {
    display: none;
  }

  .frame-menu-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-frame-text);
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    transition: color 0.2s var(--ease-editorial);
  }

  .frame-menu-btn:hover,
  .frame-menu-btn:focus-visible {
    color: var(--color-text-hero);
  }

  /* Mobile Navigation Overlay */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    top: 54px;
    left: 0;
    width: 100%;
    height: calc(100svh - 54px);
    background-color: #0e0f12; /* Simple near-opaque graphite surface */
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-editorial), visibility 0.2s var(--ease-editorial);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-panel {
    padding: clamp(36px, 6vh, 52px) var(--page-margin) 56px;
    display: flex;
    flex-direction: column;
    max-width: 480px;
  }

  .mobile-menu-primary {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .mobile-menu-primary .mobile-menu-link {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-text-display);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s var(--ease-editorial);
  }

  .mobile-menu-primary .mobile-menu-link:hover,
  .mobile-menu-primary .mobile-menu-link:focus-visible {
    color: var(--color-text-secondary);
  }

  .mobile-menu-divider {
    height: 1px;
    background-color: var(--color-border-subtle);
    margin: 32px 0 28px;
    width: 100%;
  }

  .mobile-menu-secondary {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mobile-menu-secondary .mobile-menu-link {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s var(--ease-editorial);
  }

  .mobile-menu-secondary .mobile-menu-link:hover,
  .mobile-menu-secondary .mobile-menu-link:focus-visible {
    color: var(--color-text-hero);
  }

  .mobile-menu-secondary .nav-arrow {
    font-size: 0.85em;
    color: var(--color-text-muted);
    transition: transform 0.2s var(--ease-editorial), color 0.2s var(--ease-editorial);
  }

  .mobile-menu-secondary .mobile-menu-link:hover .nav-arrow {
    transform: translate(2px, -2px);
    color: var(--color-text-hero);
  }

  body.nav-open {
    overflow: hidden;
  }

  .frame-bottom {
    font-size: 0.625rem;
  }

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

  .frame-bottom .frame-project-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .frame-bottom .project-index {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .frame-bottom .frame-project-id .frame-bullet {
    flex-shrink: 0;
  }

  .frame-bottom .project-title-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
  }

  .frame-bottom .frame-origin {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
    justify-self: auto;
  }

  .frame-origin .frame-origin-detail {
    display: none;
  }

  .project-header {
    padding-top: clamp(88px, 12vh, 116px);
    padding-bottom: clamp(40px, 5.5vh, 56px);
  }

  .project-title {
    font-size: clamp(2.5rem, 8vw, 3.75rem);
    margin-bottom: 16px;
  }

  .choreo-thought {
    padding: 0 20px;
  }

  #thoughtSearch {
    top: calc(50% + 44px);
  }

  #thoughtRecognition {
    top: calc(50% + 52px);
  }

  /* Establishing hero landscape ratio on mobile */
  .hero-media-wrap,
  .frame-hero-architectural,
  .frame-establishing-landscape {
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .hero-media-wrap.frame-launch-hero,
  .frame-launch-hero {
    aspect-ratio: 3024 / 1662 !important;
    height: auto !important;
  }

  /* Hero framing */
  #rangersHeroImg {
    object-position: 18% center;
  }

  #basquiatHeroImg {
    object-position: center center;
  }

  /* Mobile caption display */
  .caption-desktop-only {
    display: none !important;
  }

  /* -------------------------------------------------------------
     Mobile Vertical Rhythm: Tier 1 (Content within same thought)
     ------------------------------------------------------------- */

  /* Eyebrow / section label → primary text: 8–12px */
  .context-label {
    margin-bottom: 12px;
  }

  .next-project-kicker {
    margin-bottom: 12px;
  }

  .gallery-tag {
    margin-bottom: 8px;
  }

  /* Primary paragraph → supporting paragraph: 20–24px */
  .context-lead {
    margin-bottom: 20px;
  }

  /* -------------------------------------------------------------
     Mobile Vertical Rhythm: Tier 2 (Related content)
     ------------------------------------------------------------- */

  /* Narrative copy → associated image: 32–40px */
  .gallery-lead-prose {
    margin-bottom: 32px;
  }

  .gallery-narrative-prose {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Related image → image: 24–32px */
  .gallery-col-offset {
    margin-top: 28px;
  }

  .gallery-caption-block {
    padding-top: 12px;
  }

  /* -------------------------------------------------------------
     Mobile Vertical Rhythm: Tier 3 (Section & chapter transitions)
     ------------------------------------------------------------- */

  /* Hero → Context transition: 56px */
  .section-hero {
    padding-bottom: 0;
  }

  .section-context {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Context → Gallery transition: 56px */
  .section-gallery {
    padding-top: 0;
    padding-bottom: 56px;
  }

  /* Sequential chapter movements: 56px */
  .gallery-block {
    margin-bottom: 56px;
  }

  /* Conclusion ledger transition */
  .gallery-conclusion-ledger {
    padding-top: 28px;
    margin-top: 0;
  }

  /* Colophon metadata ledger transition */
  .project-colophon-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 28px;
    padding-top: 20px;
    margin-top: 20px;
  }

  /* Next project arrival transition */
  .section-next-project {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .next-project-header {
    margin-bottom: 16px;
  }

  .next-project-kicker {
    margin-bottom: 6px;
  }

  .next-project-title {
    font-size: clamp(1.4rem, 5.2vw, 1.75rem);
    line-height: 1.15;
  }

  .next-project-media-frame {
    aspect-ratio: 2.4 / 1;
    max-height: 180px;
  }

  /* Global footer on mobile */
  .global-footer {
    padding-top: 36px;
    padding-bottom: 76px;
  }

  .global-footer-links {
    margin-top: 24px;
    justify-content: flex-start;
  }

  /* Mobile Grid spans */
  .col-span-9,
  .col-span-8,
  .col-span-7,
  .col-span-6,
  .col-span-5,
  .col-span-4,
  .col-span-3,
  .col-span-8.col-start-3,
  .col-span-6.col-start-4,
  .col-span-10.col-start-2 {
    grid-column: 1 / span 12;
  }

  .col-start-2,
  .col-start-3,
  .col-start-4,
  .col-start-5 {
    grid-column-start: 1;
  }

  /* Product Trio reflow on mobile */
  .product-trio-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Storyboard 2x2 reflow on mobile */
  .storyboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .context-body + .context-body {
    margin-top: 14px;
  }

  /* Wonder Project mobile adaptations */
  .gallery-block-chapter {
    margin-bottom: 64px;
  }

  .gallery-block-paired {
    margin-bottom: 24px;
  }

  /* Slate Wall: 2-Column Mobile Mosaic */
  .slate-grid-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 24px;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .slate-grid-tile {
    grid-column: span 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .slate-grid-tile.tile-hero {
    grid-column: span 2;
  }

  .slate-grid-tile img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .aiw-pair-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .slate-lineup-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }

  .slate-poster-item {
    flex: 0 0 48%;
    min-width: 155px;
    scroll-snap-align: start;
  }

  .hod-input-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .hod-social-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .explore-viewport-scrollable {
    height: 380px;
  }

  .web-experience-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .web-browser-viewport {
    aspect-ratio: 16 / 12;
  }

  .ooh-paired-stage {
    grid-template-columns: 0.6178fr 0.3508fr;
    gap: 8px;
    max-width: 100%;
  }

  /* Launch Control Mobile Adaptations */
  .launch-starting-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .launch-token-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .launch-icon-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .launch-specimen-plate {
    padding: clamp(32px, 5vh, 48px) clamp(16px, 3vw, 28px);
  }

  .launch-specimen-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
    column-gap: 16px;
  }

  .launch-specimen-item img {
    width: clamp(56px, 14vw, 76px);
    height: clamp(56px, 14vw, 76px);
  }

  .launch-web-pair-grid,
  .launch-feature-pair-grid,
  .launch-ai-pair-grid,
  .launch-everyday-social-pair,
  .launch-everyday-pub-pair,
  .launch-features-pair,
  .launch-supporting-pair,
  .launch-motion-showcase-grid,
  .launch-campaign-motion-pair {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .launch-ad-grid,
  .launch-ad-campaign-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .launch-ad-card-motion-start,
  .launch-ad-card-static-start {
    grid-column: auto;
  }

  /* HRE Beauty Tablet Adaptations */
  .hre-starting-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .hre-mosaic-2up,
  .hre-mosaic-asymmetric {
    grid-template-columns: 1fr;
  }

  .hre-mosaic-3up {
    grid-template-columns: repeat(2, 1fr);
  }

  .hre-ads-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .hre-ad-card.hre-hide-mobile {
    display: none;
  }

  .hre-email-grid {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .hre-email-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .frame-bottom {
    font-size: 0.59375rem;
  }

  .frame-bottom .frame-project-id {
    gap: 6px;
  }

  .slate-grid-wall,
  .ooh-paired-stage {
    gap: 6px;
  }

  .hod-social-wall {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .project-colophon-grid {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .launch-token-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .launch-icon-strip {
    gap: 8px;
  }

  .launch-specimen-plate {
    padding: 28px 16px;
  }

  .launch-specimen-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 12px;
  }

  .launch-specimen-item img {
    width: clamp(52px, 18vw, 68px);
    height: clamp(52px, 18vw, 68px);
  }

  .launch-ad-grid,
  .launch-ad-campaign-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* HRE Beauty Mobile Adaptations */
  .hre-starting-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hre-starting-item {
    aspect-ratio: 1 / 1;
  }

  .hre-mosaic-3up {
    grid-template-columns: 1fr;
  }

  .hre-ads-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hre-email-viewport {
    height: 480px;
  }

  .hre-lightbox-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .hre-lightbox-actions {
    gap: 8px;
  }
}

/* =============================================================
   Prowaken Micro Case Study
   ============================================================= */

/* 01 Hero Video Stage */
.frame-prowaken-hero {
  position: relative;
  width: 100%;
  height: clamp(480px, 68vh, 780px);
  background: #08090a;
  overflow: hidden;
  border-radius: 0;
}

.frame-prowaken-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.frame-prowaken-hero.frame-hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Top edge feather dissolves softly into header */
    linear-gradient(to bottom, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Left edge feather dissolves into page background */
    linear-gradient(to right, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Right edge feather dissolves into page background */
    linear-gradient(to left, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Bottom edge fade dissolves into caption/content background */
    linear-gradient(to top, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.75) 2.5%, rgba(14, 15, 17, 0.4) 5%, rgba(14, 15, 17, 0.12) 7.5%, transparent 10%),
    /* Restrained ~30% dark overlay so motion becomes atmosphere and wordmark dominates */
    rgba(0, 0, 0, 0.30);
}

.prowaken-hero-logo {
  width: 100%;
  max-width: clamp(240px, 32vw, 520px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.75));
}

/* 02 Foundation Materials */
.prowaken-foundation-logo-card {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #5D6380;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-object, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.prowaken-foundation-logo-img {
  width: 100%;
  max-width: clamp(180px, 24vw, 320px);
  height: auto;
  display: block;
}

.prowaken-foundation-renders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
  margin-bottom: 10px;
}

.prowaken-foundation-render-item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141517;
  border-radius: var(--radius-object, 4px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.prowaken-foundation-render-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prowaken-foundation-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  width: 100%;
  margin-bottom: 10px;
}

.prowaken-foundation-photo-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #141517;
  border-radius: var(--radius-object, 4px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.prowaken-foundation-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 03 Disciplined 3x3 Portrait Grid (9:16) for Visual World & Campaign */
.prowaken-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
}

.prowaken-grid-card {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #141517;
  border-radius: var(--radius-object, 4px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.prowaken-grid-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 04 E-Commerce / PDP Section */
.prowaken-ecom-stage {
  width: 100%;
  margin-top: 0;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}

.prowaken-ecom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
  width: 100%;
  max-width: 100%;
}

/* Desktop Browser Frame */
.prowaken-browser-frame {
  position: relative;
  min-width: 0;
  max-width: 100%;
  background: #151618;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.prowaken-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111214;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.prowaken-browser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b2d31;
  flex-shrink: 0;
}

.prowaken-browser-address {
  margin-left: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #63666e;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.prowaken-browser-viewport {
  position: relative;
  min-width: 0;
  max-width: 100%;
  height: clamp(480px, 62vh, 660px);
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}

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

/* Mobile Phone Frame */
.prowaken-phone-frame {
  position: relative;
  min-width: 0;
  max-width: 340px;
  justify-self: center;
  width: 100%;
  background: #151618;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.prowaken-phone-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 6px;
}

.prowaken-phone-speaker {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: #2b2d31;
}

.prowaken-phone-viewport {
  position: relative;
  min-width: 0;
  max-width: 100%;
  height: clamp(460px, 59vh, 630px);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}

/* =============================================================
   Global Case-Study Website Explore Modal & Badge (HRE System Architecture)
   ============================================================= */

.wt-explore-preview-frame,
.web-browser-frame,
.prowaken-browser-frame,
.prowaken-phone-frame {
  position: relative !important;
}

.wt-explore-page-badge {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 5;
  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;
  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;
  color: var(--color-text-secondary, #bab6ae);
  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;
}

.wt-explore-page-badge svg {
  display: block;
  width: 10px;
  height: 10px;
  color: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

.wt-explore-page-badge: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);
}

.wt-explore-page-badge:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* Modal Shell — matches .hre-lightbox-modal architecture 1:1 */
.wt-explore-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wt-explore-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wt-explore-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 7, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}

.wt-explore-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.wt-explore-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(16px, 3vw, 36px);
  background: rgba(18, 17, 16, 0.94);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wt-explore-info {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.wt-explore-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.wt-explore-subject {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  font-weight: 500;
}

.wt-explore-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wt-explore-close {
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.wt-explore-close:hover {
  color: var(--color-text-primary);
}

.wt-explore-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 4vh, 40px) 16px 60px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.wt-explore-scrollable::-webkit-scrollbar {
  width: 6px;
}

.wt-explore-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.wt-explore-sheet {
  max-width: 1040px;
  width: 100%;
  background: #fff;
  border-radius: calc(var(--radius-object) + 2px);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background-clip: padding-box; /* keep the white sheet from showing through the hairline */
  margin: 0 auto;
}

.wt-explore-sheet.is-mobile-sheet {
  max-width: 380px;
}

.wt-explore-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive Adaptations for Prowaken */
@media (max-width: 860px) {
  .prowaken-ecom-grid {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .prowaken-browser-frame {
    display: none;
  }

  .prowaken-phone-frame {
    max-width: 320px;
    margin: 0 auto;
  }

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

  .prowaken-grid-card.prowaken-hide-mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  .frame-prowaken-hero {
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  .prowaken-phone-viewport {
    height: 440px;
  }

  .wt-explore-dialog {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
  }

  .wt-explore-scrollable {
    padding: 12px 8px;
  }
}

@media (max-width: 600px) {
  .prowaken-foundation-photo-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .prowaken-foundation-renders-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .prowaken-grid-3x3 {
    gap: 8px;
  }

  .prowaken-browser-viewport {
    height: 400px;
  }

  .prowaken-phone-viewport {
    height: 380px;
  }
}

/* -------------------------------------------------------------
   Rabbit Hole Media Lab Case Study Styles
   ------------------------------------------------------------- */

/* 01 Cinematic Motion Field Hero */
.frame-rh-hero {
  height: clamp(540px, 72vh, 840px) !important;
  background: #08090a;
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.frame-rh-hero video,
.rh-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.frame-rh-hero.frame-hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Top edge feather dissolves softly into header */
    linear-gradient(to bottom, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Left edge feather dissolves into page background */
    linear-gradient(to right, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Right edge feather dissolves into page background */
    linear-gradient(to left, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.7) 1.5%, rgba(14, 15, 17, 0.35) 3.5%, rgba(14, 15, 17, 0.1) 5.5%, transparent 7%),
    /* Bottom edge fade dissolves into context section */
    linear-gradient(to top, var(--color-bg, #0e0f11) 0%, rgba(14, 15, 17, 0.75) 2.5%, rgba(14, 15, 17, 0.4) 5%, rgba(14, 15, 17, 0.12) 7.5%, transparent 10%),
    /* Base dark overlay to deepen footage for title card contrast */
    rgba(0, 0, 0, 0.22);
}

.rh-hero-logo {
  width: 100%;
  max-width: clamp(280px, 36vw, 540px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 36px rgba(0, 0, 0, 0.85));
}

/* Context Body Paragraph */
.rh-context-body {
  margin-top: 1.25em;
  color: var(--color-text-muted);
  font-size: var(--text-body-size, 1.05rem);
  line-height: 1.65;
}

/* Kinetic Identity System: Rapid-Cut Motion Specimen */
.rh-kinetic-stage {
  position: relative;
  width: 100%;
  background-color: var(--rh-stage-bg, #210957);
  border-radius: var(--radius-object, 6px);
  overflow: hidden;
  padding: clamp(72px, 12vw, 140px) clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: none !important;
}

.rh-kinetic-viewport {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 269 / 82;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: 2px;
  box-sizing: border-box;
}

.rh-kinetic-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.rh-keyhole-path {
  fill: var(--rh-keyhole-fill, #CEF565);
  transition: none !important;
}

.rh-wordmark-group,
.rh-wordmark-group path {
  fill: var(--rh-wordmark-fill, #FFFFFF);
  transition: none !important;
}

/* Captions */
.rh-caption {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888888);
  letter-spacing: 0.02em;
  margin-top: clamp(12px, 1.8vh, 18px);
  padding-left: 2px;
}

/* Digital Experience / Website Stage */
.rh-web-stage {
  position: relative;
  width: 100%;
}

.rh-web-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2918 / 1440;
  background: #08090a;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 72px -16px rgba(0, 0, 0, 0.7);
}

.rh-web-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Promotional Language: The Poster Wall & Evidence Grid */
.rh-poster-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  width: 100%;
}

.rh-poster-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
}

.rh-poster-card {
  position: relative;
  aspect-ratio: 1000 / 1400;
  overflow: hidden;
  background: #111214;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  transition: border-color 0.35s ease;
}

.rh-poster-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.rh-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Breakout Acts & Section Headers */
.wt-breakout-act {
  width: 100%;
  margin-top: clamp(80px, 12vh, 140px);
  margin-bottom: clamp(96px, 14vh, 160px);
  position: relative;
}

.rh-section-header {
  margin-bottom: clamp(24px, 3.5vw, 40px);
  max-width: 840px;
}

.rh-section-intro {
  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;
}

/* Physical World Composition */
.rh-physical-composition {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
  width: 100%;
}

.rh-physical-row {
  width: 100%;
}

.rh-duo-asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.rh-duo-asymmetric-alt {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.rh-artifact-wrap {
  width: 100%;
  position: relative;
}

.rh-artifact-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0c0d0e;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.5);
  aspect-ratio: 16 / 11;
}

.rh-artifact-frame.is-wide {
  aspect-ratio: 16 / 11;
}

.rh-artifact-frame.is-square {
  aspect-ratio: 1 / 1;
}

.rh-artifact-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.wt-pair-grid .rh-artifact-frame img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.rh-artifact-caption {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  padding-left: 2px;
}

/* Ambient Open House Closing Breakout (Full-Rail Resolution) */
.rh-openhouse-breakout {
  width: 100%;
  margin-top: clamp(64px, 9vh, 112px);
  margin-bottom: clamp(72px, 10vh, 128px);
  position: relative;
}

.rh-openhouse-ambient-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050505;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-object);
  overflow: hidden;
  box-shadow: 0 24px 72px -16px rgba(0, 0, 0, 0.7);
}

.rh-openhouse-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 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;
}

/* Responsive Adaptations for Rabbit Hole */
@media (max-width: 860px) {
  .wt-breakout-act {
    margin-top: clamp(56px, 8vh, 80px);
    margin-bottom: clamp(64px, 9vh, 96px);
  }

  .rh-duo-asymmetric,
  .rh-duo-asymmetric-alt {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rh-artifact-frame,
  .rh-artifact-frame.is-square,
  .rh-artifact-frame.is-wide {
    aspect-ratio: 16 / 11 !important;
  }

  .rh-poster-wall,
  .rh-poster-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rh-openhouse-breakout {
    margin-top: clamp(48px, 6vh, 64px);
    margin-bottom: clamp(48px, 6vh, 64px);
  }

  .rh-kinetic-stage {
    padding: clamp(56px, 12vw, 88px) 20px;
  }
}

@media (max-width: 768px) {
  .frame-rh-hero {
    height: clamp(420px, 60vh, 560px) !important;
  }

  .rh-hero-logo {
    max-width: clamp(220px, 64vw, 320px);
  }
}

@media (max-width: 480px) {
  .rh-poster-evidence-grid .rh-poster-card:nth-child(9) {
    display: none;
  }

  .rh-hero-logo {
    max-width: clamp(200px, 60vw, 260px);
  }

  .rh-poster-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .rh-kinetic-viewport {
    max-width: clamp(210px, 68vw, 280px);
  }
}

@media (max-width: 640px) {
  .wonder-hide-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rh-kinetic-stage,
  .rh-keyhole-path,
  .rh-wordmark-group,
  .rh-wordmark-group path {
    transition: none !important;
  }
}

/* -------------------------------------------------------------
   Creative Archive (2015–2026) — Dense Image-First Gallery Wall
   ------------------------------------------------------------- */

.archive-main {
  width: 100%;
  min-height: 100vh;
  padding-bottom: clamp(64px, 10vh, 120px);
}

.archive-header {
  padding-top: clamp(84px, 11vh, 120px);
  padding-bottom: clamp(24px, 3.5vh, 40px);
  width: 100%;
}

.archive-header .grid-container {
  max-width: 1800px;
  padding: 0 clamp(16px, 2.5vw, 44px);
}

.archive-title {
  font-size: clamp(2.75rem, 5.5vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--color-text-hero);
  margin: 0 0 clamp(8px, 1.2vh, 14px) 0;
}

.archive-context {
  font-size: clamp(1.0625rem, 1.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-secondary);
  letter-spacing: -0.015em;
  max-width: 780px;
  margin: 0;
}

.archive-metadata {
  font-family: var(--font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.4;
}

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

.archive-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 12px);
  width: 100%;
  align-items: stretch;
}

.archive-tile {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  border-radius: 4px;
  min-width: 0;
  min-height: 0;
}

.archive-tile img,
.archive-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-tile-square {
  grid-column: span 1;
  aspect-ratio: 1 / 1;
}

.archive-tile-wide {
  grid-column: span 2;
  aspect-ratio: 1144 / 560;
}

.archive-tile-tall {
  grid-column: span 1;
  grid-row: span 2;
  aspect-ratio: 560 / 1144;
}

.archive-tile-hero {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}

.archive-tile-full {
  grid-column: span 4;
  aspect-ratio: 1144 / 560;
}

/* Tablet / Medium Screens: 2-column gallery wall */
@media (max-width: 860px) {
  .archive-header {
    padding-top: 76px;
    padding-bottom: 20px;
  }

  .archive-mosaic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 8px;
  }

  .archive-tile-full {
    grid-column: span 2;
  }

  .archive-tile-hero {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Mobile Screens */
@media (max-width: 480px) {
  .archive-mosaic-grid {
    gap: 6px;
  }
}

/* -------------------------------------------------------------
   Homepage Editorial Architecture & Project Sequence
   ------------------------------------------------------------- */

.home-main {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* -------------------------------------------------------------
   01. Full-Viewport Kinetic Creative Reel (Josh Carroll's Universe)
   ------------------------------------------------------------- */

.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 580px;
  background-color: var(--color-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Background Reel Stage: 80–90vw visual width, dominating viewport and bleeding into graphite */
.hero-reel-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* WebGL CRT-Inspired Optical Shader Canvas */
.hero-shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
  /* No CSS fade: the canvas is cleared to the page background (#0e0f11) and the
     shader performs its own power-on reveal, so there is never a surface crossfade. */
  /* Centered plate presentation: smoothly dissolved perimeter */
  -webkit-mask-image: radial-gradient(
    ellipse 86% 82% at 50% 50%,
    black 60%,
    rgba(0, 0, 0, 0.95) 74%,
    rgba(0, 0, 0, 0.5) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 86% 82% at 50% 50%,
    black 60%,
    rgba(0, 0, 0, 0.95) 74%,
    rgba(0, 0, 0, 0.5) 88%,
    transparent 100%
  );
}

/* Single-surface hero contract.
   WebGL path (html.hero-gl): the canvas is the only surface that ever shows hero
   imagery; the raw DOM reel never paints.
   Still path (html.hero-still or .no-shader): the DOM Rangers still is the hero and
   the canvas is removed from view (no WebGL, reduced motion, ?noshader, context loss,
   or performance fallback). */
html.hero-gl .hero-reel-stage:not(.no-shader) .hero-reel {
  opacity: 0;
  visibility: hidden;
}

html.hero-still .hero-shader-canvas,
.hero-reel-stage.no-shader .hero-shader-canvas {
  visibility: hidden;
}

.hero-reel-stage.no-shader .hero-reel {
  opacity: 1;
  visibility: visible;
}

.hero-reel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1840px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
  /* Broad peripheral falloff mask: center ~70–80% visually pristine, outer edges dissolve into near-black */
  -webkit-mask-image: radial-gradient(
    ellipse 82% 76% at 50% 50%,
    black 54%,
    rgba(0, 0, 0, 0.94) 68%,
    rgba(0, 0, 0, 0.45) 84%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 82% 76% at 50% 50%,
    black 54%,
    rgba(0, 0, 0, 0.94) 68%,
    rgba(0, 0, 0, 0.45) 84%,
    transparent 100%
  );
}

.reel-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

/* Instant hard cuts */
.reel-frame.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Subtle blend-cut only when explicitly flagged */
.reel-frame.blend-cut {
  transition: opacity 0.12s linear;
}

/* -------------------------------------------------------------
   Cinematic Layout Treatments & Varied Scales
   ------------------------------------------------------------- */

.reel-media {
  width: 100%;
  height: 100%;
  display: block;
}

/* Extreme Crop: Tight human presence, chiaroscuro atmosphere */
.reel-frame[data-layout="extreme-crop"] .reel-media {
  object-fit: cover;
  object-position: 55% 26%;
  transform: scale(1.22);
}

/* Oversized Type: Architectural graphic impact */
.reel-frame[data-layout="oversized-type"] .reel-media {
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.15);
}

/* Macro Texture: Close-up raw brushwork, oil stick & paint texture */
.reel-frame[data-layout="macro-texture"] .reel-media {
  object-fit: cover;
  object-position: 45% 50%;
  transform: scale(1.25);
}

/* Full Bleed: Edge-to-edge cinematic frame */
.reel-frame[data-layout="full-bleed"] .reel-media {
  object-fit: cover;
  object-position: center center;
}

/* Editorial Crop: Asymmetric high-fashion portrait */
.reel-frame[data-layout="editorial-crop"] .reel-media {
  object-fit: cover;
  object-position: 68% 36%;
  transform: scale(1.1);
}

/* Monumental: Environmental spatial scale */
.reel-frame[data-layout="monumental"] .reel-media {
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.04);
}

/* Quiet Center: Dark glowing portal into deep space */
.reel-frame[data-layout="quiet-center"] .reel-media {
  object-fit: cover;
  object-position: center 60%;
}

/* Macro Tactile: Executive stationery & textured blind deboss */
.reel-frame[data-layout="macro-tactile"] .reel-media {
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.16);
}

/* Asymmetric: Behind-the-scenes craft and studio direction */
.reel-frame[data-layout="asymmetric"] .reel-media {
  object-fit: cover;
  object-position: 65% 50%;
}

/* Monumental Scale: Enormous OOH concourse installation */
.reel-frame[data-layout="monumental-scale"] .reel-media {
  object-fit: cover;
  object-position: center 35%;
  transform: scale(1.06);
}

/* Cinematic World: Expansive landscape and atmosphere */
.reel-frame[data-layout="cinematic-world"] .reel-media {
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.03);
}

/* -------------------------------------------------------------
   Atmospheric Peripheral Vignette & Full-Width Darkness Falloff
   Center ~70–80% visually pristine; lower third progressively dissolves into the page background
   ------------------------------------------------------------- */
.hero-atmosphere-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  background: 
    /* 1. Full-width progressive darkness falloff across bottom ~38% of hero */
    linear-gradient(
      to top,
      var(--color-bg) 0%,
      rgba(14, 15, 17, 0.98) 12%,
      rgba(14, 15, 17, 0.88) 20%,
      rgba(14, 15, 17, 0.58) 28%,
      rgba(14, 15, 17, 0.22) 35%,
      transparent 42%
    ),
    /* 2. Broad peripheral vignette framing the centered plate: center 70–80% pristine */
    radial-gradient(
      ellipse 84% 78% at 50% 50%,
      transparent 50%,
      rgba(14, 15, 17, 0.28) 70%,
      rgba(14, 15, 17, 0.82) 88%,
      var(--color-bg) 100%
    ),
    /* 3. Subtle top rail veil for persistent navigation contrast */
    linear-gradient(
      to bottom,
      rgba(14, 15, 17, 0.45) 0%,
      rgba(14, 15, 17, 0.08) 4%,
      transparent 8%
    );
}

/* -------------------------------------------------------------
   Hero Foreground Content Frame (Lower Viewport Geometry)
   ------------------------------------------------------------- */
.hero-content-frame {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-bottom: clamp(32px, 5.5vh, 52px);
  pointer-events: none;
}

.hero-bottom-bar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
}

.hero-intro-header {
  pointer-events: auto;
  max-width: min(1200px, 90vw);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Scroll-to-clarity: the headline drifts up slightly faster than the page as
   the hero scrolls away (--scroll-clarity: 0 → 1, set in script.js).
   Desktop only: on touch devices the scroll runs on the compositor while this
   transform updates on the main thread, so the headline visibly lagged/jittered. */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) and (hover: hover) {
  .hero-intro-header {
    transform: translate3d(0, calc(var(--scroll-clarity, 0) * -24px), 0);
  }
}

/* Editorial statement in Switzer Light (300, #F0EDE6 warm bone) */
.hero-statement {
  font-family: var(--font-family);
  font-size: clamp(3.25rem, 4.1vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #F0EDE6;
  margin: 0;
  max-width: min(1200px, 90vw);
  width: 100%;
  text-align: left;
}

/* Hold the editorial headline until its local display faces load, then bring it in
   quietly rather than swapping a fallback face or popping into view. */
.hero-statement {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

html.headline-font-loading .hero-statement {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
}

.hero-text-fixed {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}

.hero-text-dynamic {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}

.hero-word-clip {
  /* Word wrapper for the rotating headline. No clipping mask: the words fade
     as they drift, so a mask isn't needed, and masks cropped italic overhangs
     (the f in "of") in Safari. */
  display: inline-block;
  vertical-align: baseline;
}

.hero-word {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  /* Safari paints transformed/animated inline-blocks as layers cropped to
     their box, which cut off italic overhangs like the top of the f. Pad the
     box so the glyphs fit, and pull it back so spacing is unchanged. No
     will-change: GSAP promotes the words only while they animate. */
  padding: 0.25em 0.45em 0.35em;
  margin: -0.25em -0.45em -0.35em;
}

/* -------------------------------------------------------------
   02. Selected Work Chapter Marker
   ------------------------------------------------------------- */
.home-section-work-index {
  width: 100%;
  padding-top: clamp(64px, 10vh, 112px);
  padding-bottom: clamp(28px, 4vh, 44px);
  scroll-margin-top: 54px;
}

.home-work-index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.home-work-index-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-text-display);
}

.home-work-index-range {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   03. Wonder Project (Dominant Primary Anchor — Asymmetric Triptych)
   ------------------------------------------------------------- */
.home-section-wonder {
  padding-top: 0;
  padding-bottom: clamp(44px, 6.5vh, 76px);
  width: 100%;
}

.home-wonder-split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--grid-gutter);
  align-items: stretch;
}

.home-wonder-main-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: 100%;
}

.home-wonder-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
  justify-content: space-between;
}

.home-wonder-side-media {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Shared Project Presentation (Radically Simplified Language) */
.home-project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  position: relative;
}

.home-project-media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  border-radius: var(--radius-object);
  border: 1px solid var(--color-border-subtle);
  transition: border-color 0.4s var(--ease-editorial);
}

.home-project-card:hover .home-project-media {
  border-color: var(--color-border-active);
}

.home-project-media img,
.home-project-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hover reward: a slow settle-in on the project media. Uses the individual
   `scale` property so it never fights reveal transforms. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-project-media img,
  .home-project-media video {
    transition: scale 1.2s var(--ease-editorial);
  }

  .home-project-card:hover .home-project-media img,
  .home-project-card:hover .home-project-media video {
    scale: 1.03;
  }
}

/* Subtle media metadata badges for complex multi-asset spreads */
.home-media-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-family);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 9px;
  border-radius: 3px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.home-project-meta {
  margin-top: clamp(10px, 1.4vh, 14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.home-project-title {
  font-size: var(--type-card-title);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-text-hero);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  transition: color 0.3s var(--ease-editorial);
}

.home-project-arrow {
  display: inline-block;
  font-size: 1.05em;
  transition: transform 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial);
  color: var(--color-text-muted);
}

.home-project-card:hover .home-project-arrow {
  transform: translateX(5px);
  color: var(--color-text-hero);
}

.home-project-descriptor {
  font-size: var(--type-descriptor-size);
  color: var(--color-text-project-meta);
  line-height: var(--type-descriptor-leading);
  letter-spacing: var(--type-descriptor-tracking);
  margin: 0;
}

/* 03. Rabbit Hole (Primary Anchor 2 — Asymmetric World & Offset Cadence) */
.home-section-rabbithole {
  padding-bottom: clamp(44px, 6.5vh, 76px);
  width: 100%;
}

.home-rh-split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--grid-gutter);
  align-items: stretch;
}

.home-rh-main-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: 100%;
}

.home-rh-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
  justify-content: space-between;
}

.home-rh-poster-media {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* 04. Silent Quadrant (Secondary 1 — Tactile Restraint & Monolithic Reset) */
.home-section-sq {
  padding-top: clamp(36px, 5vh, 64px);
  padding-bottom: clamp(48px, 7vh, 84px);
  width: 100%;
}

.home-sq-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--grid-gutter);
  align-items: center;
}

.home-sq-card-media {
  aspect-ratio: 16 / 10;
  width: 100%;
}

.home-sq-overhead-media {
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* 05. Basquiat (Secondary 2 — Cultural Energy, Public Scale & Motion Spread) */
.home-section-basquiat {
  padding-bottom: clamp(44px, 6.5vh, 76px);
  width: 100%;
}

.home-basquiat-composition {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--grid-gutter);
  align-items: stretch;
}

.home-basquiat-concourse {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: 100%;
  position: relative;
}

.home-basquiat-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
  justify-content: space-between;
}

.home-basquiat-deck {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #08080a;
  position: relative;
}

.home-basquiat-campaign {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #08080a;
  position: relative;
}

/* 06. Supporting Work (Compressed Curated Pairings) */
.home-section-supporting {
  padding-bottom: clamp(72px, 11vh, 130px);
  width: 100%;
}

.home-supporting-pair {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--grid-gutter);
  margin-bottom: clamp(32px, 5vh, 48px);
}

.home-supporting-pair.equal-pair {
  grid-template-columns: 1fr 1fr;
}

.home-supporting-pair:last-child {
  margin-bottom: 0;
}

.home-supporting-pair .home-project-title {
  font-size: clamp(1.265rem, 1.65vw, 1.595rem);
}

.home-supporting-media {
  aspect-ratio: 16 / 10;
  width: 100%;
}

.home-supporting-media.portrait-ratio {
  aspect-ratio: 4 / 3;
}

/* -------------------------------------------------------------
   07. Creative Archive (2017–2026) Horizontal Slice
   Full-width stream of mixed aspect ratios interrupting page architecture
   ------------------------------------------------------------- */
.home-section-archive {
  background-color: #161719;
  padding-top: clamp(72px, 11vh, 130px);
  padding-bottom: clamp(72px, 11vh, 130px);
  width: 100%;
}

.home-archive-lead {
  max-width: 680px;
  margin-bottom: clamp(24px, 3.5vh, 40px);
}

.home-archive-kicker {
  font-family: var(--font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}

.home-archive-title {
  font-size: var(--type-section-title);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--color-text-hero);
  margin: 0 0 14px 0;
}

.home-archive-desc {
  font-size: var(--type-intro-size);
  color: var(--color-text-secondary);
  line-height: var(--type-intro-leading);
  letter-spacing: var(--type-intro-tracking);
  margin: 0;
}

/* Full-width stream wrapper bleeding edge-to-edge beyond viewport */
/* Keyboard focus for the strip link (the section's only link to the archive). */
.home-archive-stream-wrap:focus-visible {
  outline: 1px solid var(--color-text-hero);
  outline-offset: -1px;
}

.home-archive-stream-wrap {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.home-archive-stream {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  /* Strip height lives in one variable so each tile's width can be derived from it
     (see .archive-stream-item.aspect-*). iOS Safari sizes the strip from the images'
     intrinsic widths otherwise, leaving scrollable blank space after the last tile. */
  --archive-h: clamp(264px, 34vh, 408px);
  height: var(--archive-h);
  width: max-content;
  padding: 0 clamp(20px, 4vw, 56px);
  animation: archiveStreamDrift 30s ease-in-out infinite alternate;
}

.home-archive-stream:hover {
  animation-play-state: paused;
}

/* GSAP drives the drift (eased turnarounds, soft hover deceleration). */
.home-archive-stream.is-gsap-driven {
  animation: none;
}

@keyframes archiveStreamDrift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1200px);
  }
}

.archive-stream-item {
  height: 100%;
  flex-shrink: 0;
  border-radius: var(--radius-object);
  overflow: hidden;
  background-color: #101114;
  border: 1px solid var(--color-border-subtle);
  transition: border-color 0.3s var(--ease-editorial);
  position: relative;
}

.archive-stream-item:hover {
  border-color: var(--color-border-active);
}

.archive-stream-item img,
.archive-stream-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mixed aspect ratios slicing through the archive mosaic */
/* Explicit widths (height x ratio) so the strip's max-content width is exact in every engine. */
.archive-stream-item.aspect-4-5 { aspect-ratio: 4 / 5; width: calc(var(--archive-h) * 0.8); }
.archive-stream-item.aspect-1-1 { aspect-ratio: 1 / 1; width: var(--archive-h); }
.archive-stream-item.aspect-2-3 { aspect-ratio: 2 / 3; width: calc(var(--archive-h) * 0.6667); }
.archive-stream-item.aspect-2-1 { aspect-ratio: 2 / 1; width: calc(var(--archive-h) * 2); }
.archive-stream-item.aspect-16-10 { aspect-ratio: 16 / 10; width: calc(var(--archive-h) * 1.6); }
.archive-stream-item.aspect-3-4 { aspect-ratio: 3 / 4; width: calc(var(--archive-h) * 0.75); }
.archive-stream-item.aspect-16-9 { aspect-ratio: 16 / 9; width: calc(var(--archive-h) * 16 / 9); }

.home-archive-link-slot {
  display: flex;
  align-items: center;
}

/* Mobile-only: the strip's VIEW cursor doesn't exist on touch, so this link carries the affordance. */
.home-archive-link-slot--mobile {
  display: none;
}

/* Restrained text link */
.home-archive-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-hero);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s var(--ease-editorial);
}

.home-archive-text-link .archive-arrow {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: 1em;
  transition: transform 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial);
}

.home-archive-text-link:hover {
  color: #ffffff;
}

.home-archive-text-link:hover .archive-arrow {
  transform: translateX(5px);
  color: #ffffff;
}

/* -------------------------------------------------------------
   08. Info & Practice (Person, Breadth, History, Thinking)
   ------------------------------------------------------------- */
.home-section-career {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(64px, 9vh, 100px);
  width: 100%;
}

.home-info-block {
  margin-bottom: clamp(64px, 9vh, 104px);
}

.home-info-block:last-child {
  margin-bottom: 0;
}

.home-info-kicker {
  font-family: var(--font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: clamp(14px, 2vh, 20px);
}

/* 01. About / Point of View */
.home-about-portrait-col {
  display: flex;
  align-items: flex-start;
}

.home-about-portrait-wrap {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-object);
  overflow: hidden;
}

.home-about-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 25%;
  display: block;
}

.home-about-content-col {
  display: flex;
  flex-direction: column;
}

.home-about-headline {
  font-size: var(--type-section-title);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text-hero);
  margin: 0 0 clamp(16px, 2.5vh, 24px) 0;
  max-width: 680px;
}

.home-about-body {
  font-size: var(--type-intro-size);
  color: var(--color-text-secondary);
  line-height: var(--type-intro-leading);
  letter-spacing: var(--type-intro-tracking);
  max-width: 620px;
  margin: 0;
}

.home-about-body + .home-about-body {
  margin-top: 1em;
}

/* 02. Selected Clients Marquee */
.home-clients-marquee-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  margin-top: clamp(12px, 2vh, 20px);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.home-clients-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.home-clients-track {
  display: flex;
  width: max-content;
  animation: clientsMarqueeDrift 38s linear infinite;
  will-change: transform;
}

.home-clients-group {
  display: flex;
  align-items: center;
  gap: clamp(68px, 8.4vw, 115px);
  padding-right: clamp(68px, 8.4vw, 115px);
  flex-shrink: 0;
}

@keyframes clientsMarqueeDrift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.client-logo {
  height: clamp(58px, 6.7vw, 74px);
  width: auto;
  max-width: 268px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(0.85);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-editorial);
}

.client-logo.logo-ranger {
  height: clamp(67px, 8.0vw, 88px);
  max-width: 302px;
}

.client-logo.logo-gwb {
  height: clamp(67px, 8.0vw, 88px);
  max-width: 302px;
}

.client-logo.logo-jmb {
  height: clamp(64px, 7.6vw, 80px);
}

.client-logo.logo-equinox {
  height: clamp(47px, 5.8vw, 60px);
  max-width: 286px;
}

.client-logo.logo-blade {
  height: clamp(50px, 6.0vw, 64px);
}

.client-logo.logo-boost {
  height: clamp(54px, 6.4vw, 67px);
}

.client-logo.logo-wonder {
  height: clamp(54px, 6.4vw, 67px);
}

.client-logo.logo-verizon {
  height: clamp(50px, 5.9vw, 64px);
}

/* 03. Experience Chronology */
.home-experience-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.home-experience-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(14px, 2vh, 18px) 0;
  border-bottom: 1px solid var(--color-border);
}

.home-experience-item:first-child {
  border-top: 1px solid var(--color-border);
}

.home-experience-primary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-experience-company {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  font-weight: 500;
  color: var(--color-text-hero);
  letter-spacing: -0.015em;
}

.home-experience-note {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--color-text-muted);
}

.home-experience-role {
  font-size: clamp(0.875rem, 1vw, 0.95rem);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

.home-experience-years {
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.8125rem, 0.95vw, 0.875rem);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: right;
}

/* 04. Writing / Thinking */
.home-writing-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.home-writing-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(14px, 2vh, 18px) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease-editorial);
}

.home-writing-item:hover {
  border-color: var(--color-border-active);
}

.home-writing-primary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.home-writing-title {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  font-weight: 500;
  color: var(--color-text-hero);
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s var(--ease-editorial);
}

.home-writing-arrow {
  display: inline-block;
  font-size: 0.9em;
  color: var(--color-text-muted);
  transition: transform 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial);
}

.home-writing-item:hover .home-writing-title {
  color: #ffffff;
}

.home-writing-item:hover .home-writing-arrow {
  transform: translate(3px, -3px);
  color: #ffffff;
}

.home-writing-meta {
  font-family: var(--font-family);
  font-size: clamp(0.875rem, 1vw, 0.95rem);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   09. Homepage Contact Invitation ("Say Hello ↗")
   ------------------------------------------------------------- */
.home-section-contact {
  padding-top: clamp(48px, 8vh, 80px);
  padding-bottom: clamp(64px, 10vh, 104px);
  width: 100%;
}

.home-contact-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-contact-link {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text-hero);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.15;
  transition: color 0.25s var(--ease-editorial);
}

.home-contact-link:hover,
.home-contact-link:focus-visible {
  color: #ffffff;
}

.home-contact-link .contact-arrow {
  display: block;
  width: 0.72em;
  height: 0.72em;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial);
}

.home-contact-link:hover .contact-arrow,
.home-contact-link:focus-visible .contact-arrow {
  transform: translate(4px, -4px);
  color: var(--color-text-hero);
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .hero-reel {
    width: 94vw;
  }

  .home-wonder-split,
  .home-rh-split,
  .home-sq-split,
  .home-basquiat-composition,
  .home-supporting-pair,
  .home-supporting-pair.equal-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  /* Preserve one typographic rank for every project name on mobile. */
  .home-project-title,
  .home-supporting-pair .home-project-title {
    font-size: var(--type-m-card-title);
  }

  /* Uniform mobile project spacing cadence across all 8 case studies */
  .home-section-wonder {
    padding-top: 0;
    padding-bottom: var(--mobile-project-spacing);
  }

  .home-section-rabbithole {
    padding-top: 0;
    padding-bottom: var(--mobile-project-spacing);
  }

  .home-section-sq {
    padding-top: 0;
    padding-bottom: var(--mobile-project-spacing);
  }

  .home-section-basquiat {
    padding-top: 0;
    padding-bottom: var(--mobile-project-spacing);
  }

  .home-section-supporting {
    padding-top: 0;
    padding-bottom: clamp(64px, 9vh, 88px);
  }

  .home-supporting-pair,
  .home-supporting-pair.equal-pair {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-project-spacing);
    margin-bottom: var(--mobile-project-spacing);
  }

  .home-supporting-pair:last-child {
    margin-bottom: 0;
  }

  /* Project metadata hugs the bottom of its media */
  .home-project-meta {
    margin-top: 10px;
    gap: 4px;
  }

  /* Simplify multi-image editorial compositions on mobile to one strong canonical visual */
  .home-wonder-side-stack,
  .home-rh-side-stack,
  .home-sq-overhead-media,
  .home-basquiat-side-stack {
    display: none;
  }

  .home-wonder-split,
  .home-rh-split,
  .home-sq-split,
  .home-basquiat-composition {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-wonder-main-media,
  .home-rh-main-media,
  .home-basquiat-concourse {
    height: auto;
    aspect-ratio: 16 / 10;
    width: 100%;
  }

  /* Keep Creative Archive horizontally expressive and touch-scrollable */
  .home-section-archive {
    padding-top: clamp(56px, 8vh, 80px);
    padding-bottom: clamp(56px, 8vh, 80px);
  }

  .home-archive-stream-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .home-archive-stream-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Touch strip stays still: no drift at all (a paused animation can still leave the strip
     offset on iOS, which shows up as blank scrollable space past the last tile). */
  .home-archive-stream {
    animation: none;
    transform: none;
  }

  .home-archive-link-slot--mobile {
    display: flex;
  }

  /* Single-column reading sequence for Info / Career */
  .home-section-career {
    padding-top: clamp(56px, 8vh, 80px);
    padding-bottom: clamp(56px, 8vh, 80px);
  }

  .home-info-block {
    margin-bottom: clamp(48px, 7vh, 64px);
  }

  .home-about-portrait-col {
    width: 100%;
    margin-bottom: clamp(24px, 4vh, 32px);
  }

  .home-about-portrait-wrap {
    width: 78%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    margin-bottom: 0;
  }

  .home-about-portrait {
    object-position: 55% 30%;
  }

  .home-info-sidebar {
    margin-bottom: 12px;
  }

  .home-experience-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .home-experience-years {
    text-align: left;
  }

  .home-writing-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  /* Fill the full screen (large viewport), so the next section never peeks
     out beneath mobile browser toolbars, e.g. Safari's floating bottom bar. */
  .home-hero {
    height: 100svh;
    height: 100lvh;
    min-height: 520px;
  }

  .hero-reel {
    width: 100%;
  }

  /* Ensure headline and scroll cue appear comfortably above mobile browser chrome */
  /* Headline stays anchored to the visible area above the toolbar (small
     viewport): the lvh–svh difference is added back, then 24px lower than before. */
  .hero-content-frame {
    padding-bottom: clamp(36px, 8vh, 52px);
    padding-bottom: calc(clamp(36px, 8vh, 52px) + (100lvh - 100svh) - 24px);
    transform: translateY(10%);
  }

  .hero-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .hero-intro-header {
    max-width: 100%;
    gap: 0;
  }

  .hero-statement {
    font-size: var(--type-m-page-title);
    line-height: 1.06;
    max-width: 100%;
  }

  .hero-text-fixed {
    display: block;
    margin-right: 0;
  }

  .hero-text-dynamic {
    display: block;
    margin-top: 0.04em;
    max-width: 94%;
    min-height: 3.18em;
  }

  .home-project-meta {
    margin-top: 10px;
    gap: 4px;
  }

  .home-archive-stream {
    --archive-h: 216px;
    height: var(--archive-h);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line {
    animation: none;
  }

  .home-archive-stream {
    animation: none;
  }

  .home-clients-track {
    animation: none;
  }

  .home-clients-marquee-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}

/* ==========================================================================
   SHARED 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;
}

/* Finish cross-page deep-link transitions on the destination page. The class
   is applied in the homepage head so the charcoal field exists before paint. */
html.is-page-arriving::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background-color: var(--color-bg, #0e0f11);
  animation: site-page-arrival 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes site-page-arrival {
  0%, 10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

  html.is-page-arriving::after {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE WORK SECTION — PRE-PAINT / FOUC PROTECTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-work-item]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
  }

  [data-work-item].is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-indicator::after {
    animation: none;
  }

  [data-work-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   EDITORIAL DISPLAY TYPOGRAPHY — NEWSREADER
   ========================================================================== */
.hero-statement,
.home-archive-title,
.home-about-headline,
.home-contact-link,
.next-project-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--color-text-display);
}

/* The mid optical size is set a touch looser than the Display cut, so the
   hero tracks in slightly more than smaller headings. */
.hero-statement {
  letter-spacing: -0.02em;
  /* The hero is the largest type on the site, so it sits a touch lighter. */
  font-variation-settings: "wght" 320, "opsz" 52;
}

.home-project-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--color-text-display);
}

.hero-text-fixed,
.hero-text-dynamic,
.hero-word {
  font-weight: 300;
  letter-spacing: inherit;
}

.hero-text-dynamic,
.hero-text-dynamic .hero-word {
  font-style: italic;
}


/* ==========================================================================
   404 — "NO SIGNAL"
   A dead channel in the hero's CRT language, built in CSS so it loads
   instantly: scanlines, faint static, a slow roll bar and a tube glow.
   ========================================================================== */
.nf-main {
  position: relative;
}

.nf-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-bg);
  isolation: isolate;
}

/* Tube glow + scanlines + edge vignette */
.nf-signal {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, transparent 55%, rgba(14, 15, 17, 0.85) 100%),
    repeating-linear-gradient(to bottom, rgba(246, 245, 242, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(246, 245, 242, 0.07), transparent 70%);
}

/* Static: a tiled noise texture that jitters in discrete steps (compositor-only) */
.nf-signal::after {
  content: '';
  position: absolute;
  inset: -64px;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: screen;
}

/* Roll bar: a soft band drifting down the screen, like a detuned set */
.nf-signal::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(246, 245, 242, 0.035) 50%, transparent);
}

.nf-content {
  position: relative;
  width: 100%;
  padding-top: 120px;
  padding-bottom: clamp(56px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nf-kicker {
  margin: 0 0 18px;
  font-family: var(--font-family);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nf-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text-display);
  text-wrap: balance;
}

.nf-body {
  margin: clamp(20px, 3vh, 28px) 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.nf-links {
  margin-top: clamp(32px, 5vh, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}

@media (prefers-reduced-motion: no-preference) {
  .nf-signal::after {
    animation: nf-static 0.5s steps(5) infinite;
  }

  .nf-signal::before {
    animation: nf-roll 9s linear infinite;
  }

  /* Power-on: the tube brightens, then the message comes in */
  .nf-signal {
    animation: nf-power-on 0.9s var(--ease-editorial) both;
  }

  .nf-kicker,
  .nf-title,
  .nf-body,
  .nf-links {
    animation: nf-tune-in 0.8s var(--ease-editorial) both;
  }

  .nf-kicker { animation-delay: 0.25s; }
  .nf-title { animation-delay: 0.35s; }
  .nf-body { animation-delay: 0.5s; }
  .nf-links { animation-delay: 0.62s; }
}

@keyframes nf-static {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-22px, 14px); }
  40% { transform: translate(18px, -26px); }
  60% { transform: translate(-30px, -8px); }
  80% { transform: translate(26px, 20px); }
  100% { transform: translate(0, 0); }
}

@keyframes nf-roll {
  from { transform: translateY(0); }
  to { transform: translateY(460%); }
}

@keyframes nf-power-on {
  0% { opacity: 0; transform: scaleY(0.02); filter: brightness(3); }
  45% { opacity: 1; transform: scaleY(1); filter: brightness(1.6); }
  100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}

@keyframes nf-tune-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Mobile intro tier: a clear step above 15px body copy, with gentler tracking at small sizes. */
@media (max-width: 860px) {
  :root {
    --type-intro-size: clamp(1rem, 4.2vw, 1.125rem);
    --type-intro-tracking: -0.01em;
    /* Mobile display scale (~390px phone): page 38 · section 30 · card/chapter 24 · lead 18 */
    --type-m-page-title: clamp(2.25rem, 9.8vw, 2.75rem);
    --type-m-section-title: clamp(1.75rem, 7.7vw, 2.125rem);
    --type-m-card-title: 1.5rem;
    --type-m-lead: 1.125rem;
  }

  .home-archive-title,
  .home-about-headline {
    font-size: var(--type-m-section-title);
  }
}

/* Rabbit Hole notebook tile: static hand over concentric rings that pulse outward */
@property --rh-ring-phase {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.home-rh-notebook-media {
  container-type: inline-size;
  background-color: #5c1030;
}

.home-rh-notebook-media .rh-rings {
  position: absolute;
  inset: 0;
  --rh-ring: 3.75cqw;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    #5c1030 var(--rh-ring-phase),
    #5c1030 calc(var(--rh-ring-phase) + var(--rh-ring) * 0.5),
    #b950b3 calc(var(--rh-ring-phase) + var(--rh-ring) * 0.5 + 0.5px),
    #b950b3 calc(var(--rh-ring-phase) + var(--rh-ring) - 0.5px),
    #5c1030 calc(var(--rh-ring-phase) + var(--rh-ring))
  );
  animation: rhRingsPulse 2.4s linear infinite;
}

@keyframes rhRingsPulse {
  to { --rh-ring-phase: 3.75cqw; }
}

.home-rh-notebook-media .rh-notebook-hand {
  position: absolute;
  top: 4.5%;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .home-rh-notebook-media .rh-rings { animation: none; }
}

/* Logo overlays on homepage tiles: anchored bottom left, static */
.home-project-media .tile-logo {
  position: absolute;
  left: 5%;
  bottom: 5%;
  width: 30%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Bottom scrim on the large left tiles so the logo reads on any frame */
.home-rh-main-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 9, 11, 0.62) 0%,
    rgba(8, 9, 11, 0.38) 22%,
    rgba(8, 9, 11, 0.12) 42%,
    rgba(8, 9, 11, 0) 60%
  );
  pointer-events: none;
}

.home-project-media .tile-logo {
  z-index: 1;
}

/* Basquiat: spinning crown over the gallery shot, merch loop on black */
.home-bq-gallery-media .bq-crown {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: auto;
  max-width: none;
  object-fit: contain;
  translate: -50% -50%;
  pointer-events: none;
}

.home-bq-merch-media {
  background-color: #000;
}

/* Basquiat: exhibition stills crossfade behind the lockup */
.home-bq-slideshow .bq-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: bqSlide 17.5s ease-in-out infinite;
}
.home-bq-slideshow .bq-slide:nth-of-type(1) { opacity: 1; animation-delay: -0.5s; }
.home-bq-slideshow .bq-slide:nth-of-type(2) { animation-delay: 3s; }
.home-bq-slideshow .bq-slide:nth-of-type(3) { animation-delay: 6.5s; }
.home-bq-slideshow .bq-slide:nth-of-type(4) { animation-delay: 10s; }
.home-bq-slideshow .bq-slide:nth-of-type(5) { animation-delay: 13.5s; }

@keyframes bqSlide {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .home-bq-slideshow .bq-slide { animation: none; }
  .home-bq-slideshow .bq-slide:not(:first-of-type):not(.tile-logo) { display: none; }
}

/* Layout option 2: Silent Quadrant + Launch Control as a pair, then a three-up row */
.home-section-supporting {
  padding-bottom: clamp(56px, 8vh, 96px);
}

.home-supporting-media.trio-media {
  aspect-ratio: 1 / 1;
}

@media (min-width: 961px) {
  .home-supporting-pair.home-supporting-trio {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Rabbit Hole flips the composition: detail stack left, lead tile right */
  .home-rh-split {
    grid-template-columns: 0.75fr 1.25fr;
  }

  .home-rh-main-media {
    order: 2;
  }

  .home-rh-side-stack {
    order: 1;
    flex-direction: column-reverse;
  }
}

/* Mobile: no logo overlays or scrims; every project tile shares one 16:10 frame */
@media (max-width: 768px) {
  .home-rh-main-media::after {
    display: none;
  }

  /* Rabbit Hole is the one logo that stays on mobile, centered over the vortex */
  .home-rh-main-media .tile-logo {
    left: 50%;
    bottom: auto;
    top: 50%;
    width: 44%;
    transform: translate(-50%, -50%);
  }

  .home-supporting-media,
  .home-supporting-media.trio-media,
  .home-supporting-media.portrait-ratio {
    aspect-ratio: 16 / 10;
  }
}