/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --surface: #111;
  --card: #161616;
  --card-hover: #1e1e1e;
  --text: #f0f0f0;
  --text-muted: #777;
  --accent: #e0e0e0;
  --border: #222;
  --radius: 10px;
  --header-h: 64px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ── HEADER ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s;
}

.logo:hover { opacity: 0.7; }

.nav {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--font);
  padding: 0;
}

.nav-link:hover,
.nav-link.active { color: var(--text); }

.styles-trigger { color: var(--text-muted); }

.styles-trigger.active {
  color: var(--text);
}

/* ── MOBILE MENU BUTTON ── */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 110;
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s;
  transform-origin: center;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── STYLES PANEL ── */
.styles-panel {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 90;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
  opacity: 0;
}

.styles-panel.open {
  max-height: 80vh;
  overflow-y: auto;
  opacity: 1;
}

.styles-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 48px;
  position: relative;
}

.close-panel {
  position: absolute;
  top: 12px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.close-panel:hover { color: var(--text); }

/* ── STYLES GRID ── */
.styles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.style-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.style-card:hover {
  background: var(--card-hover);
  border-color: #2a2a2a;
  transform: translateY(-2px);
}

.style-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.style-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  color: var(--text);
}

.style-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.style-tags span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
}

/* ── MOBILE NAV ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
  overflow: hidden;
}

body.nav-open {
  overflow: hidden;
}

.mobile-nav-link {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s;
}

.mobile-nav-link:hover { color: var(--text); }

/* ── MAIN CONTENT ── */
.main-content {
  min-height: 100vh;
  padding-top: var(--header-h);
}

/* ── PORTFOLIO GRID ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
}

/* ── PORTFOLIO SLIDER ── */
.portfolio-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.portfolio-slider::-webkit-scrollbar { display: none; }

.portfolio-slider > .portfolio-item {
  min-width: 100%;
  width: 100%;
  scroll-snap-align: start;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
}

.portfolio-slider > .portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-poster, .mc-video {
  display: block;
  object-fit: cover;
}

/* ── MAIN CHARACTER — TRANSFORMATION REEL COVER ── */
.mc-reel {
  position: relative;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.mc-reel .mc-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 1;
}
.mc-reel .mc-stage.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Sculpted stage: zoomed-in cover crop, anchored near the top so the
   head and beanie are always fully visible. The image's portrait aspect
   is taller than the 4:5 frame, so something has to crop — pinning the
   top means the legs crop at upper thigh instead of the head clipping. */
.mc-reel .mc-stage-3d {
  object-fit: cover;
  object-position: 50% 8%;
}

/* Drift removed — was cropping the figure when paired with object-fit:
   contain, since scale > 1 pushes parts of the character off the edges. */
@keyframes mcDrift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* Cinematic vignette so text always reads */
.mc-reel .mc-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 70%, rgba(0,0,0,0.7) 100%);
}

/* Gold flash that fires between stages */
.mc-reel .mc-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(201,168,76,0.55), rgba(201,168,76,0) 70%);
  mix-blend-mode: screen;
}
.mc-reel.is-flashing .mc-flash {
  animation: mcFlash 1.1s ease-out;
}
@keyframes mcFlash {
  0%   { opacity: 0; transform: scale(0.7); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Title — top left, lifted above vignette */
.mc-reel .mc-title {
  position: absolute !important;
  top: 8% !important;
  left: 6% !important;
  right: auto !important;
  bottom: auto !important;
  background: none !important;
  color: #c9a84c !important;
  font-family: 'Bagel Fat One', cursive !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  z-index: 5 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* Audio toggle */
.mc-reel .mc-audio-btn {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 6;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  cursor: pointer;
  color: #f3d77a;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(201,168,76,0.55),
    0 0 14px rgba(201,168,76,0.35),
    0 0 28px rgba(201,168,76,0.18);
  opacity: 0;
  transition: opacity 0.4s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
.mc-reel .mc-audio-btn.is-shown { opacity: 1; }
.mc-reel .mc-audio-btn:hover {
  transform: translateX(-50%) translateY(-1px);
  text-shadow:
    0 0 8px rgba(201,168,76,0.85),
    0 0 18px rgba(201,168,76,0.55),
    0 0 32px rgba(201,168,76,0.30);
}
.mc-audio-text-off { display: none; }
.mc-reel .mc-audio-btn[data-muted="0"] .mc-audio-text-on  { display: none; }
.mc-reel .mc-audio-btn[data-muted="0"] .mc-audio-text-off { display: inline; }

/* Gallery videos use the same gold text pattern at the bottom of each
   video tile. No SVG, no circle — just the words with a gold glow. */
.mc-audio-btn-gallery {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  cursor: pointer;
  color: #f3d77a;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(201,168,76,0.55),
    0 0 14px rgba(201,168,76,0.35),
    0 0 28px rgba(201,168,76,0.18);
  transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.mc-audio-btn-gallery:hover {
  transform: translateX(-50%) translateY(-1px);
  text-shadow:
    0 0 8px rgba(201,168,76,0.85),
    0 0 18px rgba(201,168,76,0.55),
    0 0 32px rgba(201,168,76,0.30);
}
.mc-audio-btn-gallery[data-muted="0"] .mc-audio-text-on  { display: none; }
.mc-audio-btn-gallery[data-muted="0"] .mc-audio-text-off { display: inline; }

/* Click-to-play videos park their button in the top-left corner so the
   bottom of the frame stays clean for the action. */
.mc-audio-btn-gallery.mc-audio-btn-clicktoplay,
.mc-audio-btn-gallery.mc-audio-btn-topleft {
  left: 18px;
  top: 18px;
  bottom: auto;
  transform: none;
}
.mc-audio-btn-gallery.mc-audio-btn-clicktoplay:hover,
.mc-audio-btn-gallery.mc-audio-btn-topleft:hover {
  transform: translateY(-1px);
}

/* Gold speaker glyph (gear page + select world videos). Sizing + glow live
   on .mc-audio-btn-icon so the same look works at any position
   (top-left class adds positioning; bottom uses the default placement). */
.mc-audio-btn-icon .mc-audio-text svg {
  display: block;
  width: 26px;
  height: 26px;
  filter:
    drop-shadow(0 0 6px rgba(201,168,76,0.55))
    drop-shadow(0 0 14px rgba(201,168,76,0.35));
}
.mc-audio-btn-icon:hover .mc-audio-text svg {
  filter:
    drop-shadow(0 0 8px rgba(201,168,76,0.85))
    drop-shadow(0 0 18px rgba(201,168,76,0.55));
}

/* Smaller CLICK TO PLAY text — used on click-to-play videos that pair the
   text with the speaker glyph, so the stopped state reads quieter. */
.mc-audio-text-small {
  font-size: 9px;
  letter-spacing: 2.5px;
}

/* Fade the speaker + image counter out once the viewer turns sound on,
   so the playing frame is clean. Tapping the video body restores them
   (handled in app.js). */
.gallery-img-wrap .mc-audio-btn-gallery,
.gallery-img-wrap .gallery-img-counter {
  transition: opacity 0.45s ease;
}
.gallery-img-wrap.wrap-controls-faded .mc-audio-btn-gallery,
.gallery-img-wrap.wrap-controls-faded .gallery-img-counter {
  opacity: 0;
  pointer-events: none;
}

/* Breathing room between stacked click-to-play clips. */
.gallery-img-wrap-clicktoplay + .gallery-img-wrap-clicktoplay {
  margin-top: 32px;
}

/* Stage indicator bar — the three transformation steps. Each step is a
   click target that interrupts the cycle and jumps to that stage; clicks
   stop-propagation so the parent <a href="/main-character"> doesn't fire. */
.mc-stage-bar {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font);
  pointer-events: none;   /* keep the rule + bar background passive */
}
.mc-stage-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  pointer-events: auto;   /* but each step IS clickable */
  cursor: pointer;
  padding: 6px 4px;       /* fatter hit target without changing layout much */
}
.mc-stage-step:hover {
  color: #f3d77a;
  text-shadow: 0 0 12px rgba(201,168,76,0.35);
}
.mc-stage-step .mc-stage-num {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  transition: color 0.5s ease;
}
.mc-stage-step.is-active {
  color: #f3d77a;
  transform: translateY(-1px);
  text-shadow: 0 0 18px rgba(201,168,76,0.45);
}
.mc-stage-step.is-active .mc-stage-num {
  color: #c9a84c;
}
.mc-stage-rule {
  flex: 0 1 32px;
  height: 1px;
  background: linear-gradient(to right, rgba(201,168,76,0.0), rgba(201,168,76,0.35), rgba(201,168,76,0.0));
}

/* CTA — bottom centered, pulses */
.mc-cta {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,0.5);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f3d77a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  animation: mcCtaPulse 2.6s ease-in-out infinite;
}
.mc-cta-arrow {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.3s ease;
  animation: mcArrowNudge 2s ease-in-out infinite;
}
@keyframes mcCtaPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201,168,76,0.0), 0 8px 24px rgba(0,0,0,0.4);
    border-color: rgba(201,168,76,0.5);
  }
  50% {
    box-shadow: 0 0 32px 6px rgba(201,168,76,0.18), 0 8px 24px rgba(0,0,0,0.4);
    border-color: rgba(201,168,76,0.85);
  }
}
@keyframes mcArrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
.mc-reel:hover .mc-cta {
  background: rgba(201,168,76,0.15);
  border-color: #c9a84c;
  color: #fff;
}
.mc-reel:hover .mc-cta-arrow {
  transform: translateX(6px);
}

/* Mobile — keep things readable */
@media (max-width: 640px) {
  .mc-reel .mc-title { font-size: 18px !important; }
  .mc-stage-bar { bottom: 24%; gap: 8px; }
  .mc-stage-step { font-size: 10px; letter-spacing: 1.5px; }
  .mc-stage-rule { flex-basis: 18px; }
  .mc-cta { font-size: 10px; padding: 10px 18px; letter-spacing: 2px; }

  /* MC reel: force both stages to fill the now-4:5 slider via cover.
     Keep the 3D image pinned near the top so the head doesn't crop. */
  .mc-reel .mc-stage,
  .mc-reel .mc-stage-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .mc-reel .mc-stage-3d {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 0% !important;
  }
}

.portfolio-info {
  min-width: 100%;
  scroll-snap-align: start;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Extra bottom padding reserves space for the absolutely-positioned
     .info-swipe-hint at bottom:28px so the centered price + location
     can't drift down into it (Main Character has the most info rows
     and was overlapping). */
  padding: 32px 28px 80px;
  text-align: center;
  gap: 0;
}

/* Per-card package offset — controlled by /admin Package Adjust mode.
   Translates every flex child except the absolutely-positioned PACKAGE
   badge and SWIPE hint as a single group along the Y axis. */
.portfolio-info > *:not(.info-badge):not(.info-swipe-hint) {
  transform: translateY(var(--package-offset, 0px));
}

/* ── SWIPE HINTS ── */

/* Base hint positioning */
.swipe-hint {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* 1. Arrow + "PRICING" text — bottom right */
.hint-arrow-text {
  bottom: 20px;
  right: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  animation: hintArrowSlide 2.5s ease-in-out infinite;
}

@keyframes hintArrowSlide {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.8; transform: translateX(5px); }
}

/* 2. Dot indicator — bottom center */
.hint-dots {
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.hint-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.hint-dots .dot.active {
  background: rgba(255, 255, 255, 0.8);
}

/* 3. Pulsing chevron — right edge center */
.hint-chevron {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  animation: hintChevronPulse 2s ease-in-out infinite;
}

@keyframes hintChevronPulse {
  0%, 100% { opacity: 0.2; transform: translateY(-50%) translateX(0); }
  50% { opacity: 0.7; transform: translateY(-50%) translateX(4px); }
}

/* 4. Swipe line — bottom center */
.hint-swipe-line {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.swipe-line-track {
  width: 48px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.swipe-line-bar {
  width: 20px;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  animation: hintSwipeLine 2.5s ease-in-out infinite;
}

@keyframes hintSwipeLine {
  0% { transform: translateX(-20px); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(48px); opacity: 0; }
}

/* 5. Fading text — bottom center */
.hint-fade-text {
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  animation: hintFadeText 3s ease-in-out infinite;
}

@keyframes hintFadeText {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 0.7; }
}

/* 6. Click/Slide text — bottom center */
.hint-slide-text {
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  animation: hintSlideText 3s ease-in-out infinite;
}

.glow-gold {
  animation: goldPulse 2s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(201, 168, 76, 0.4), 0 0 16px rgba(201, 168, 76, 0.2); }
  50% { text-shadow: 0 0 16px rgba(201, 168, 76, 0.8), 0 0 32px rgba(201, 168, 76, 0.5), 0 0 48px rgba(201, 168, 76, 0.3); }
}

@keyframes hintSlideText {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.9; transform: translateX(4px); }
}

.info-badge {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-package-name {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--text);
  margin-bottom: 6px;
  font-style: italic;
}

.info-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.info-details {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

.info-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-value {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.info-price {
  font-size: 36px;
  font-weight: 200;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 8px;
}

.info-location {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Main Character has 4 info rows + multi-line values, the most of any card.
   Bump bottom padding so the centered price + STUDIO label sit clear of the
   absolutely-positioned SWIPE hint at bottom:28px. */
.portfolio-info-mc {
  --package-offset: -6px;
  padding-bottom: 120px;
}
.portfolio-info-mc .info-location {
  margin-bottom: 24px;
}

/* ── Content Creation — drop down half-inch from the original 30px (= 75px)
      with smaller font sizes so all 4 rows + grace + price + location fit. */
.portfolio-info-cc {
  --package-offset: 25px;
}
.portfolio-info-cc .info-package-name { font-size: 22px; margin-bottom: 6px; }
.portfolio-info-cc .info-category { font-size: 11px; letter-spacing: 4px; margin-bottom: 26px; }
.portfolio-info-cc .info-details { gap: 14px; margin-bottom: 26px; max-width: 280px; }
.portfolio-info-cc .info-row { padding-bottom: 9px; }
.portfolio-info-cc .info-label { font-size: 11px; letter-spacing: 2px; }
.portfolio-info-cc .info-value { font-size: 12px; line-height: 1.35; }
.portfolio-info-cc .info-grace { font-size: 10px; line-height: 1.55; margin-bottom: 22px; max-width: 260px; }
.portfolio-info-cc .info-price { font-size: 32px; margin-bottom: 6px; }
.portfolio-info-cc .info-location { font-size: 11px; letter-spacing: 2px; }

/* ── Pitch Deck — same compact treatment as cc so the longer grace text
      and multi-line info-values fit inside the 4/5 aspect-ratio container.
      No package offset (only 3 info rows, so default centering fits and a
      downshift would collide the location line with the absolute SWIPE hint). */
.portfolio-info-pitch {
  --package-offset: 0px;
}
.portfolio-info-pitch .info-package-name { font-size: 22px; margin-bottom: 6px; }
.portfolio-info-pitch .info-category { font-size: 11px; letter-spacing: 4px; margin-bottom: 26px; }
.portfolio-info-pitch .info-details { gap: 14px; margin-bottom: 26px; max-width: 280px; }
.portfolio-info-pitch .info-row { padding-bottom: 9px; }
.portfolio-info-pitch .info-label { font-size: 11px; letter-spacing: 2px; }
.portfolio-info-pitch .info-value { font-size: 12px; line-height: 1.35; }
.portfolio-info-pitch .info-grace { font-size: 10px; line-height: 1.55; margin-bottom: 22px; max-width: 260px; }
.portfolio-info-pitch .info-price { font-size: 32px; margin-bottom: 6px; }
.portfolio-info-pitch .info-location { font-size: 11px; letter-spacing: 2px; }

/* ── Conceptual — package name renders on three stacked lines
      ("The Sketch" / & / "The Construct") to stop the original single-line
      title from overflowing. Whole block slides down to clear PACKAGE. */
.portfolio-info-conc {
  --package-offset: 18px;
}
.portfolio-info-conc .pkg-name-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.05;
}
.portfolio-info-conc .pkg-name-stacked .pkg-name-line {
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 3px;
  white-space: nowrap;
}
.portfolio-info-conc .pkg-name-stacked .pkg-name-amp {
  font-size: 16px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  margin: 2px 0;
}

/* ── Studio (The Glass) — drop centered block a quarter inch. */
.portfolio-info-studio {
  --package-offset: 12px;
}

/* ── Editorial (The Press) — drop centered block a quarter inch. */
.portfolio-info-editorial {
  --package-offset: 12px;
}

/* ── Headshots (Marvin's Eye) — drop centered block. */
.portfolio-info-headshot {
  --package-offset: 18px;
}

/* ── Beauty (Skin Deep) — slide centered block down. Pin SWIPE
      absolutely to the very bottom of the card so it always sits
      under Studio Only no matter how much the centered group shifts.
      Bump padding-bottom so the offset content can't crash into SWIPE. */
.portfolio-info-beauty {
  --package-offset: 50px;
  padding-bottom: 120px !important;
}
.portfolio-info-beauty > .info-swipe-hint {
  position: absolute !important;
  bottom: 14px !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  margin: 0 !important;
  transform: none !important;
  font-size: 9px;
  letter-spacing: 2.5px;
}

/* ── STYLE BREAKDOWN PANEL ── */
.portfolio-style-breakdown {
  min-width: 100%;
  scroll-snap-align: start;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 32px;
  text-align: center;
  gap: 0;
}

.style-breakdown-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.style-breakdown-title {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 24px;
}

.style-breakdown-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 320px;
  margin-bottom: 32px;
}

.style-breakdown-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.style-breakdown-tags span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
}

.info-swipe-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: 0;
  animation: hintSlideText 3s ease-in-out infinite;
}

/* Beauty panel — keep original sizing and position */
.portfolio-slider:first-child .info-swipe-hint {
  font-size: 9px;
  letter-spacing: 2.5px;
  position: static;
  margin-top: 16px;
}

.style-enter-btn {
  display: inline-block;
  margin-top: auto;
  padding: 14px 32px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font);
  transition: background 0.3s, border-color 0.3s;
}

.style-enter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 769px) {
  .portfolio-info {
    padding: 42px 34px 82px;
  }

  .info-package-name {
    font-size: 25px;
  }

  .info-category {
    font-size: 11px;
    margin-bottom: 26px;
  }

  .info-details {
    max-width: 330px;
    gap: 14px;
    margin-bottom: 26px;
  }

  .info-label {
    font-size: 11px;
  }

  .info-value {
    font-size: 13px;
  }

  .info-price {
    font-size: 40px;
  }

  .info-location {
    font-size: 11px;
  }

  .portfolio-style-breakdown {
    justify-content: center;
    padding: 54px 38px;
  }

  .style-breakdown-number {
    font-size: 12px;
    margin-bottom: 18px;
  }

  .style-breakdown-title {
    font-size: 34px;
    margin-bottom: 22px;
  }

  .style-breakdown-desc {
    font-size: 16px;
    max-width: 380px;
    margin-bottom: 28px;
  }

  .style-breakdown-tags span {
    font-size: 11px;
  }

  .style-enter-btn {
    margin-top: 34px;
    padding: 15px 34px;
    font-size: 11px;
  }
}

.info-grace {
  font-size: 9px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 24px;
  max-width: 280px;
  line-height: 1.6;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #000;
  text-decoration: none;
  cursor: pointer;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0, 0.2, 1), filter 0.4s;
  filter: brightness(1);
}

.portfolio-item:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}

.portfolio-label {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 28px 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #c9a84c;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 1;
  transform: translateY(0);
}

.portfolio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border);
}

/* ── PAGE CONTAINERS ── */
.page-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.page-heading {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 48px;
  color: var(--text);
}

/* ── ABOUT ── */
.about-hero {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
}

.about-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(0.7);
}

.about-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 24px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-hero-name {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
  text-align: center;
}

.about-hero-tagline {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 2.4;
  text-align: center;
}

.about-section {
  margin-bottom: 48px;
}

.about-section h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.about-section p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 16px;
}

.cant-mark {
  text-decoration-line: underline;
  text-decoration-color: #c9a84c;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

.proof-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 0 3px;
  padding: 4px 11px;
  border: 1px solid rgba(201, 168, 76, 0.42);
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.1);
  color: #d7bd6a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: baseline;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.proof-pill:hover {
  border-color: rgba(201, 168, 76, 0.78);
  background: rgba(201, 168, 76, 0.18);
  color: #f2d776;
  transform: translateY(-1px);
}

.spidey-proof-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.spidey-proof-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.spidey-proof-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(5, 5, 6, 0.82);
  backdrop-filter: blur(16px);
}

.spidey-proof-card {
  position: relative;
  width: min(86vw, 560px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #090909;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
  transform: scale(0.96);
  transition: transform 0.28s ease;
}

.spidey-proof-overlay.active .spidey-proof-card {
  transform: scale(1);
}

.spidey-proof-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spidey-proof-img-two {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.spidey-proof-overlay.show-second .spidey-proof-img-two {
  opacity: 1;
}

.about-social {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.social-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

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

/* ── CONTACT FORM ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-group input,
.form-group textarea {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #444;
}

.form-submit {
  align-self: flex-start;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 14px 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.2s;
}

.form-submit:hover { opacity: 0.85; }

/* ── GALLERY ── */
.gallery-hero {
  height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.gallery-hero-inner {
  opacity: 0;
  transform: translateY(30px);
  animation: galleryReveal 1s cubic-bezier(0.25, 0, 0.2, 1) 0.2s forwards;
}

@keyframes galleryReveal {
  to { opacity: 1; transform: translateY(0); }
}

.gallery-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.gallery-title {
  font-size: 56px;
  font-weight: 300;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}

.gallery-desc {
  max-width: 520px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
  padding: 0 24px;
}
.gallery-desc p {
  margin: 0 0 14px;
}
.gallery-desc p:last-child {
  margin-bottom: 0;
}

.gallery-scroll-hint {
  margin-top: 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  animation: hintPulse 2s ease-in-out 0.5s infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.6; transform: translateY(6px); }
}

.gallery-images {
  display: flex;
  flex-direction: column;
}

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

.gallery-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.4s cubic-bezier(0.25, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.25, 0, 0.2, 1);
}

.gallery-img-wrap[data-aspect] img,
.gallery-img-wrap[data-aspect] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-img-wrap .gallery-color-block {
  width: 100%;
  height: 100vh;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.8s cubic-bezier(0.25, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.25, 0, 0.2, 1);
}

.gallery-img-wrap.visible img,
.gallery-img-wrap.visible .gallery-color-block {
  opacity: 1;
  transform: scale(1);
}

.gallery-img-counter {
  position: absolute;
  bottom: 24px;
  right: 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}

/* Per-item caption — used by gear / inventory tiles. Sits at the bottom
   of the image with a soft gradient so it reads cleanly against the art. */
.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 24px 18px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f3d77a;
  text-align: center;
  text-shadow:
    0 0 8px rgba(201,168,76,0.45),
    0 0 18px rgba(201,168,76,0.25),
    0 2px 6px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55));
  pointer-events: none;
}

/* Inline CTA card sits between gallery items, framed in gold and pulses
   subtly on hover. Routes to another gallery on click. */
.gallery-cta-card {
  display: block;
  width: 100%;
  margin: 56px auto;
  padding: 56px 28px;
  text-align: center;
  text-decoration: none;
  color: #f3d77a;
  background: linear-gradient(180deg, rgba(15,15,15,0.92), rgba(8,8,8,0.96));
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 0 0 0 rgba(201,168,76,0);
}
.gallery-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.08), transparent 60%);
  opacity: 0.6;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.gallery-cta-card:hover {
  border-color: rgba(201,168,76,0.85);
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(201,168,76,0.12);
}
.gallery-cta-card:hover::before {
  opacity: 1;
}
.gallery-cta-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 5px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  margin-bottom: 14px;
}
.gallery-cta-title {
  margin: 0;
  font-size: 38px;
  letter-spacing: 6px;
  font-weight: 800;
  text-transform: uppercase;
  color: #f3d77a;
  text-shadow:
    0 0 14px rgba(201,168,76,0.35),
    0 0 30px rgba(201,168,76,0.18);
}
.gallery-cta-tagline {
  margin: 16px auto 28px;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
}
.gallery-cta-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f3d77a;
  border-bottom: 1px solid rgba(201,168,76,0.45);
  padding: 6px 0;
  transition: border-color 0.3s ease, gap 0.3s ease;
}
.gallery-cta-card:hover .gallery-cta-action {
  border-color: rgba(201,168,76,0.95);
  gap: 14px;
}
.gallery-cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.gallery-cta-card:hover .gallery-cta-arrow {
  transform: translateX(4px);
}
@media (max-width: 600px) {
  .gallery-cta-card { padding: 40px 18px; margin: 36px auto; }
  .gallery-cta-title { font-size: 26px; letter-spacing: 4px; }
  .gallery-cta-tagline { font-size: 12px; }
}

/* Chapter banner — non-clickable interlude. Crimson palette + thin rules
   above and below so it reads as a tonal shift, not another link. Used to
   announce live-action footage following the rendered game-trailer block. */
.gallery-banner-card {
  display: block;
  width: 100%;
  margin: 64px auto 20px;
  padding: 44px 28px 48px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20,8,8,0.96), rgba(8,4,4,0.98));
  border: 1px solid rgba(196,74,61,0.35);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.gallery-banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(196,74,61,0.10), transparent 65%);
  opacity: 0.85;
  pointer-events: none;
}
.gallery-banner-rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(196,74,61,0.7), transparent);
}
.gallery-banner-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 6px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,200,190,0.7);
  margin: 18px 0 10px;
  position: relative;
}
.gallery-banner-title {
  margin: 0 0 12px;
  font-size: 38px;
  letter-spacing: 5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #f6e7e3;
  position: relative;
  text-shadow:
    0 0 18px rgba(196,74,61,0.45),
    0 0 36px rgba(196,74,61,0.20);
}
.gallery-banner-tagline {
  margin: 0 auto 22px;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.5px;
  color: rgba(255,235,230,0.72);
  position: relative;
}
@media (max-width: 600px) {
  .gallery-banner-card { padding: 32px 16px 36px; margin: 40px auto; }
  .gallery-banner-title { font-size: 24px; letter-spacing: 3px; }
  .gallery-banner-tagline { font-size: 12px; }
  .gallery-banner-eyebrow { letter-spacing: 4px; }
}

/* Purple variant — used to mark the 3D animation chapter break so it
   reads as a different tonal shift than the crimson live-action banner. */
.gallery-banner-card.gallery-banner-purple {
  background: linear-gradient(180deg, rgba(18,10,28,0.96), rgba(8,4,16,0.98));
  border-color: rgba(139,95,180,0.42);
}
.gallery-banner-card.gallery-banner-purple::before {
  background: radial-gradient(ellipse at center, rgba(139,95,180,0.14), transparent 65%);
}
.gallery-banner-card.gallery-banner-purple .gallery-banner-rule {
  background: linear-gradient(90deg, transparent, rgba(168,132,201,0.75), transparent);
}
.gallery-banner-card.gallery-banner-purple .gallery-banner-eyebrow {
  color: rgba(220,200,240,0.72);
}
.gallery-banner-card.gallery-banner-purple .gallery-banner-title {
  color: #efe4f8;
  text-shadow:
    0 0 18px rgba(139,95,180,0.55),
    0 0 36px rgba(139,95,180,0.25);
}
.gallery-banner-card.gallery-banner-purple .gallery-banner-tagline {
  color: rgba(235,225,245,0.74);
}

/* Lock down gallery videos: no save sheet on long-press, no text/element
   selection, no pinch-zoom gesture targeting the video element. */
.mc-gallery-video {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
  pointer-events: auto;
}

.gallery-back {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  left: 32px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: var(--font);
  padding: 10px 18px;
  cursor: pointer;
  z-index: 95;
  transition: color 0.2s, border-color 0.2s;
  display: none;
}

.gallery-back.visible {
  display: block;
}

.gallery-back:hover {
  color: var(--text);
  border-color: #444;
}

/* ── APPS PAGE ── */
.apps-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px;
}

.apps-hero-inner {
  max-width: 640px;
  opacity: 0;
  transform: translateY(30px);
  animation: galleryReveal 1s cubic-bezier(0.25, 0, 0.2, 1) 0.2s forwards;
}

.apps-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 24px;
}

.apps-title {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 24px;
}

.apps-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.85;
}

.apps-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.app-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.app-card:hover {
  background: var(--card-hover);
  border-color: #2a2a2a;
  transform: translateY(-3px);
}

.app-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #c9a84c;
  margin-bottom: 20px;
}

.app-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}

.app-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-tags span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 5px;
  color: rgba(201, 168, 76, 0.6);
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 5px 12px 5px 11px;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.78);
}

.app-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9a84c;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.55);
  animation: app-status-pulse 1.8s ease-in-out infinite;
}

@keyframes app-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* ── ABOUT — STORY ENTRY ── */
.story-enter {
  display: block;
  position: relative;
  padding: 36px 28px 32px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(180, 168, 140, 0.04), rgba(255,255,255,0));
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.story-enter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(180,168,140,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.story-enter:hover {
  border-color: rgba(180,168,140,0.55);
  transform: translateY(-2px);
}
.story-enter:hover::before { opacity: 1; }

.story-enter-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b4a88c;
  margin-bottom: 14px;
}
.story-enter-title {
  display: block;
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: var(--text);
}
.story-enter-cue {
  display: inline-block;
  margin-top: 42px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid rgba(180,168,140,0.35);
  padding-top: 12px;
  min-width: 120px;
  text-align: center;
  transform: translateX(4px);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.story-enter:hover .story-enter-cue {
  color: #b4a88c;
  border-color: #b4a88c;
}

/* ── TIMELINE / THEN. NOW. ── */
#page-timeline {
  background: #050309;
  color: var(--text);
}

.timeline-cover {
  height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 0 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(180,168,140,0.10), transparent 65%),
    #050309;
}
.timeline-cover-inner {
  opacity: 0;
  transform: translateY(30px);
  animation: timelineCoverReveal 1.2s cubic-bezier(0.25, 0, 0.2, 1) 0.2s forwards;
}
@keyframes timelineCoverReveal {
  to { opacity: 1; transform: translateY(0); }
}
.timeline-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #b4a88c;
  margin-bottom: 28px;
}
.timeline-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}
.timeline-sub {
  margin-top: 36px;
  color: var(--text-muted);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.timeline-scroll-hint {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
  animation: timelineScrollBob 2.4s ease-in-out infinite;
}
@keyframes timelineScrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

.timeline-stage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 0;
}

.timeline-spine {
  position: absolute;
  top: 0;
  bottom: 220px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(180,168,140,0.45) 8%,
    rgba(180,168,140,0.45) 92%,
    transparent 100%
  );
  pointer-events: none;
}

.timeline-chapter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.timeline-chapter.visible {
  opacity: 1;
  transform: translateY(0);
}

.chapter-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #b4a88c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 28px rgba(180,168,140,0.55),
    0 0 0 6px rgba(180,168,140,0.10);
  z-index: 3;
}
.chapter-node-num {
  position: absolute;
  top: 50%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-muted);
  white-space: nowrap;
  transform: translateY(-50%);
}
.chapter-left  .chapter-node-num { right: calc(100% + 14px); }
.chapter-right .chapter-node-num { left:  calc(100% + 14px); }

.chapter-spur {
  position: absolute;
  top: 50%;
  height: 1px;
  background: rgba(180,168,140,0.35);
  z-index: 1;
}
.chapter-left  .chapter-spur { right: 50%; width: 60px; transform: translateY(-50%); }
.chapter-right .chapter-spur { left:  50%; width: 60px; transform: translateY(-50%); }

.chapter-frame {
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(180,168,140,0.10);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.chapter-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.timeline-chapter.visible .chapter-frame {
  transform: scale(1);
}
.chapter-left  .chapter-frame { justify-self: end;   margin-right: 60px; }
.chapter-right .chapter-frame { justify-self: start; margin-left:  60px; order: 2; }

.chapter-text {
  max-width: 420px;
}
.chapter-left  .chapter-text { justify-self: start; padding-left: 20px; }
.chapter-right .chapter-text { justify-self: end;   padding-right: 20px; text-align: right; order: 1; }

.chapter-era {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #b4a88c;
  margin-bottom: 18px;
}
.chapter-caption {
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text);
}
.chapter-caption em {
  color: #b4a88c;
  font-style: italic;
}

.timeline-closer {
  position: relative;
  padding: 140px 0 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.timeline-closer.visible {
  opacity: 1;
  transform: translateY(0);
}
.timeline-closer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(180,168,140,0.45), transparent);
  transform: translateX(-50%);
}

.closer-frame {
  width: min(92vw, 880px);
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 50px 120px rgba(0,0,0,0.7),
    0 0 80px rgba(180,168,140,0.18);
}
.closer-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.closer-line {
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
  max-width: 880px;
  margin: 0 auto;
}
.closer-line em {
  color: #b4a88c;
  font-style: italic;
}
.closer-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.timeline-back {
  position: fixed;
  top: 80px;
  left: 32px;
  background: rgba(10,10,10,0.7);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font);
  backdrop-filter: blur(10px);
  transition: color 0.2s, border-color 0.2s;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.2s ease, border-color 0.2s ease;
}
.timeline-back.visible {
  opacity: 1;
  pointer-events: auto;
}
.timeline-back:hover {
  color: var(--text);
  border-color: rgba(180,168,140,0.6);
}

/* Timeline mobile */
@media (max-width: 720px) {
  .timeline-stage { padding: 40px 16px 0; }
  .timeline-spine { left: 28px; bottom: 200px; }

  .timeline-chapter {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 50px 0 50px 56px;
  }
  .chapter-node { left: 28px; }
  .chapter-node-num {
    left: calc(100% + 14px) !important;
    right: auto !important;
  }
  .chapter-spur {
    left: 28px !important;
    right: auto !important;
    width: 22px !important;
    top: 90px;
    transform: none;
  }
  .chapter-frame,
  .chapter-text {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: start !important;
    max-width: 100% !important;
    order: unset !important;
  }
  .chapter-frame { max-width: 320px; }
  .chapter-caption { font-size: 22px; }

  .timeline-closer { padding: 90px 16px 160px; }
  .timeline-closer::before { left: 28px; }

  .timeline-back { top: 76px; left: 16px; }
}

/* ── DESKTOP GALLERY — constrain image sizes ── */
@media (min-width: 901px) {
  .gallery-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 4px;
  }

  .gallery-img-wrap {
    aspect-ratio: 4 / 5;
  }

  .gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .styles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Pose Deck — home portfolio card overlay ── */
.pose-deck-top {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 10px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 32px rgba(0,0,0,0.6);
  z-index: 3;
  pointer-events: none;
}

.pose-deck-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  padding: 0 22px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0,0,0,0.9);
}

.pose-deck-chap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .4em;
  color: #c8102e;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 0 8px rgba(200,16,46,0.55), 0 2px 12px rgba(0,0,0,0.9);
}

.pose-deck-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 38px;
  line-height: .92;
  letter-spacing: -.02em;
  color: #f4ecdf;
  margin-bottom: 14px;
}

.pose-deck-title em {
  font-style: italic;
  font-weight: 400;
  color: #c8102e;
}

.pose-deck-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244,236,223,0.85);
  max-width: 360px;
  margin: 0 auto;
}

.pose-deck-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Pose Deck — /pose-deck inline iframe page ── */
body.pd-fullscreen .site-header,
body.pd-fullscreen .mobile-nav { display: none !important; }

body.pd-fullscreen {
  overflow: hidden;
  scrollbar-width: none;
}

body.pd-fullscreen::-webkit-scrollbar {
  display: none;
}

#page-pose-deck {
  padding: 0;
  margin: 0;
  background: #070708;
  overflow: hidden;
  scrollbar-width: none;
}

#page-pose-deck::-webkit-scrollbar {
  display: none;
}

.pd-preview-frame {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  border: 0;
  background: #070708;
}

.pd-back-link {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 100;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(244,236,223,0.7);
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  background: rgba(7,7,8,0.55);
  border: 1px solid rgba(244,236,223,0.18);
  border-radius: 2px;
  mix-blend-mode: difference;
  transition: color 0.2s, border-color 0.2s;
}

.pd-back-link:hover {
  color: #fff;
  border-color: #c8102e;
}

@media (max-width: 640px) {
  .nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .mobile-nav { display: flex; }

  .header-inner { padding: 0 20px; }

  .styles-grid { grid-template-columns: 1fr; }

  .styles-panel-inner { padding: 24px 20px 32px; }
  .style-card { padding: 22px; }

  .hero-title {
    font-size: 36px;
    letter-spacing: 4px;
  }

  .hero-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .page-container { padding: 48px 20px 80px; }

  .page-heading {
    font-size: 28px;
    letter-spacing: 2px;
    margin-bottom: 36px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  /* Phone fix: pin the SLIDER itself to 4:5 (every card was rendering
     at the slider's height, so the only reliable way to enforce 4:5 on
     phones is to set the slider's aspect-ratio directly). All children
     stretch to fill, so the photo, info card, and style breakdown are
     each exactly 4:5 with no gaps between sliders. Keep horizontal
     scroll alive — overflow-x:auto, overflow-y:hidden. */
  .portfolio-slider {
    aspect-ratio: 4 / 5;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .portfolio-slider > .portfolio-item,
  .portfolio-slider > .portfolio-info,
  .portfolio-slider > .portfolio-style-breakdown {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .portfolio-info {
    padding: 32px 24px 80px;
  }
  .portfolio-style-breakdown {
    padding: 32px 24px;
  }

  .info-badge { font-size: 11px; letter-spacing: 4px; top: 24px; left: 24px; }
  .info-package-name {
    font-size: 26px;
    margin-bottom: 8px;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
  .info-category { font-size: 12px; letter-spacing: 4px; margin-bottom: 28px; }
  .info-details { max-width: 320px; gap: 16px; margin-bottom: 28px; }
  .info-row { padding-bottom: 12px; }
  .info-label { font-size: 11px; letter-spacing: 2px; }
  .info-value { font-size: 14px; line-height: 1.4; }
  .info-price { font-size: 32px; margin-bottom: 8px; }
  .info-location { font-size: 11px; letter-spacing: 2px; }

  /* Main Character has the most info rows — keep its content scaled
     down a touch so all 4 rows + location + swipe hint fit cleanly
     inside the same 4:5 phone card. */
  .portfolio-info.portfolio-info-mc {
    padding: 28px 20px 72px;
  }
  .portfolio-info.portfolio-info-mc .info-package-name { font-size: 22px; }
  .portfolio-info.portfolio-info-mc .info-category { margin-bottom: 18px; }
  .portfolio-info.portfolio-info-mc .info-details { gap: 12px; margin-bottom: 18px; }
  .portfolio-info.portfolio-info-mc .info-row { padding-bottom: 8px; }
  .portfolio-info.portfolio-info-mc .info-value { font-size: 12px; line-height: 1.35; }
  .portfolio-info.portfolio-info-mc .info-location {
    margin-bottom: 0;
  }
  .portfolio-info.portfolio-info-mc .info-swipe-hint {
    bottom: 14px;
  }
  /* Floating price — sits in the empty space between Studio and SWIPE
     without joining the flex flow so it doesn't shift any other element. */
  .info-price.info-price-floating {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    text-align: center;
    font-size: 32px;
    font-weight: 200;
    letter-spacing: 2px;
    color: var(--text);
    margin: 0;
    transform: none;
  }


  .gallery-title {
    font-size: 32px;
    letter-spacing: 5px;
  }

  .gallery-back {
    left: 16px;
  }

  .apps-grid {
    grid-template-columns: 1fr;
    padding: 0 20px 60px;
  }

  .apps-hero { padding: 48px 20px; min-height: 60vh; }
  .apps-title { font-size: 32px; letter-spacing: 4px; }

  .pd-hero { padding: 48px 20px 24px; min-height: 32vh; }
  .pd-title { font-size: 32px; letter-spacing: 5px; }
  .pd-chooser { grid-template-columns: 1fr; padding: 0 20px 60px; gap: 14px; }
  .pd-gender { padding: 44px 20px; }
  .pd-gender-label { font-size: 22px; letter-spacing: 7px; }
  .pd-viewer { padding: 0 12px 50px; }
  .pd-nav { width: 40px; height: 56px; font-size: 24px; }
  .pd-controls { padding: 14px 4px 0; }
  .pd-back, .pd-play { padding: 9px 14px; font-size: 10px; }
  .pd-cta { padding: 32px 20px 80px; }
}

/* ── APPS SHOWCASE — auto carousel + LightVault spotlight ── */
.apps-stage {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px 0 90px;
}

/* warm floor glow under the carousel — fades out in spotlight mode */
.apps-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 42% at 50% 80%, rgba(201, 168, 76, 0.06), transparent 70%);
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.apps-stage.spotlight::before { opacity: 0; }

/* room darkener */
.apps-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 1.2s ease;
  pointer-events: none;
  z-index: 1;
}
.apps-stage.spotlight::after { background: rgba(0, 0, 0, 0.45); }

.apps-stage-head {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 60px;
  transition: opacity 1.1s ease;
}
.apps-stage-head .apps-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.apps-stage-title {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 12px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
}
.apps-stage.spotlight .apps-stage-head { opacity: 0.18; }

.apps-carousel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  height: 340px;
  perspective: 1200px;
  pointer-events: none; /* nothing clickable until the spotlight invite */
}
.apps-stage.invite .apps-carousel { pointer-events: auto; }

.app-slab {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 300px;
  margin: -150px 0 0 -115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(160deg, #1a1a1a, #0f0f0f);
  border: 1px solid #262626;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text);
  --hue: 201, 168, 76;
  transform: translate3d(0, 0, -500px) scale(0.6);
  opacity: 0;
  filter: brightness(0.5) saturate(0.7);
  transition:
    transform 1s cubic-bezier(0.22, 0.9, 0.24, 1),
    opacity 1s ease,
    filter 1s ease,
    border-color 0.7s ease,
    box-shadow 1s ease;
  will-change: transform, opacity, filter;
}
.app-slab[data-slab="lightvault"] { --hue: 201, 168, 76; }
.app-slab[data-slab="breakdown"]  { --hue: 226, 85, 85; }
.app-slab[data-slab="posedeck"]   { --hue: 139, 92, 246; }
.app-slab[data-slab="captions"]   { --hue: 56, 189, 248; }
.app-slab[data-slab="instantink"] { --hue: 52, 211, 153; }

.slab-mono {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgb(var(--hue));
  background: rgba(var(--hue), 0.08);
  border: 1px solid rgba(var(--hue), 0.28);
  box-shadow: 0 0 28px rgba(var(--hue), 0.16);
}
.slab-logo {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(var(--hue), 0.28);
  box-shadow: 0 0 28px rgba(var(--hue), 0.16);
}
.slab-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

/* cover-flow positions — data-pos set by app.js */
.app-slab[data-pos="0"] {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: brightness(1) saturate(1);
  z-index: 5;
  border-color: #343434;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(var(--hue), 0.10);
}
.app-slab[data-pos="1"] {
  transform: translate3d(245px, 0, -220px) rotateY(-24deg) scale(0.84);
  opacity: 0.85;
  z-index: 4;
}
.app-slab[data-pos="2"] {
  transform: translate3d(440px, 0, -430px) rotateY(-32deg) scale(0.68);
  opacity: 0.5;
  z-index: 3;
}
.app-slab[data-pos="3"] {
  transform: translate3d(-440px, 0, -430px) rotateY(32deg) scale(0.68);
  opacity: 0.5;
  z-index: 3;
}
.app-slab[data-pos="4"] {
  transform: translate3d(-245px, 0, -220px) rotateY(24deg) scale(0.84);
  opacity: 0.85;
  z-index: 4;
}

/* spotlight mode: kill the room, keep the star */
.apps-stage.spotlight .app-slab { filter: brightness(0.15) saturate(0.3); }
.apps-stage.spotlight .app-slab[data-pos="0"] {
  filter: brightness(1.08) saturate(1.05);
  border-color: rgba(var(--hue), 0.5);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 90px rgba(var(--hue), 0.22);
}
.apps-stage.invite .app-slab[data-pos="0"]:hover {
  transform: translate3d(0, -8px, 0) scale(1.03);
}
.apps-stage.invite a.app-slab[data-pos="0"] { cursor: pointer; }

/* the drop-down light */
.apps-beam {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 50%;
  top: 0;
  width: 560px;
  height: 56%;
  margin-left: -280px;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom,
    rgba(255, 241, 194, 0.5),
    rgba(255, 241, 194, 0.16) 55%,
    rgba(255, 241, 194, 0));
  filter: blur(6px);
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.5s ease;
}
.apps-stage.spotlight .apps-beam {
  transform: scaleY(1);
  opacity: 1;
}

/* the invite */
.slab-clickme {
  position: absolute;
  bottom: -54px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  white-space: nowrap;
  color: #ffe9ad;
  text-shadow: 0 0 18px rgba(201, 168, 76, 0.85), 0 0 40px rgba(201, 168, 76, 0.4);
  opacity: 0;
  pointer-events: none;
}
.apps-stage.invite .app-slab[data-pos="0"] .slab-clickme {
  animation: clickme-breathe 1.7s ease-in-out infinite;
}
@keyframes clickme-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .apps-stage { min-height: calc(100svh - var(--header-h)); padding: 12px 0 70px; }
  .apps-stage-head { margin-bottom: 38px; }
  .apps-stage-title { font-size: 26px; letter-spacing: 8px; }
  .apps-carousel { height: 270px; perspective: 900px; }
  .app-slab { width: 172px; height: 232px; margin: -116px 0 0 -86px; gap: 15px; }
  .slab-mono, .slab-logo { width: 52px; height: 52px; }
  .slab-mono { font-size: 13px; }
  .slab-name { font-size: 12px; letter-spacing: 2.5px; }
  .app-slab[data-pos="1"] { transform: translate3d(135px, 0, -190px) rotateY(-26deg) scale(0.8); }
  .app-slab[data-pos="2"] { transform: translate3d(235px, 0, -360px) rotateY(-34deg) scale(0.62); }
  .app-slab[data-pos="3"] { transform: translate3d(-235px, 0, -360px) rotateY(34deg) scale(0.62); }
  .app-slab[data-pos="4"] { transform: translate3d(-135px, 0, -190px) rotateY(26deg) scale(0.8); }
  .apps-beam { width: 340px; margin-left: -170px; height: 52%; }
  .slab-clickme { bottom: -44px; }
}

/* opaque dark backing guards any transparency/inversion quirk (2026-06-12) */
.slab-logo { background: #0d0d13; }

/* ROUND 2026-06-12C: MC home card video + LightVault spotlight tagline */
.chapter-media video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; pointer-events: none; }
.slab-tagline {
  position: absolute; bottom: -94px; left: 50%; transform: translate(-50%, 14px);
  font-size: 13px; font-style: italic; letter-spacing: 0.04em; white-space: nowrap;
  color: rgba(245, 222, 160, 0.88);
  text-shadow: 0 0 22px rgba(201, 168, 76, 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s ease 0.55s, transform 1.1s ease 0.55s;
}
.apps-stage.invite .app-slab[data-pos="0"] .slab-tagline { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) {
  .slab-tagline { bottom: -76px; font-size: 11px; white-space: normal; width: 86vw; text-align: center; }
}

/* slab-logo rendered as a CSS BACKGROUND (2026-06-12): dark-mode browser
   extensions invert <img> elements — Marvin's desktop showed the icon
   white/inverted. Backgrounds are left alone. Same look, invert-proof. */
.slab-logo { background: #0d0d13 url('/lightvault-icon.png') center / cover no-repeat; }

/* FORCED-DARK / INVERT DEFENSE (2026-06-12): declare the page dark so
   Chrome Auto Dark Mode and kin skip it entirely (they were inverting the
   dark LightVault icon to white-with-gold on Marvin desktop); and if the
   OS itself is running inverted colors, counter-invert the icon. */
:root { color-scheme: dark; }
@media (inverted-colors: inverted) {
  .slab-logo { filter: invert(1) hue-rotate(180deg); }
}

/* LightVault REVEAL CASCADE (Marvin, 2026-06-12, both widths): during the
   lap the card shows the name only — when the light lands, the app icon
   reveals itself, then CLICK ME, then the tagline. */
.app-slab[data-slab="lightvault"] .slab-logo {
  opacity: 0; transform: scale(0.72);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.9, 0.3, 1.2);
}
.apps-stage.spotlight .app-slab[data-pos="0"] .slab-logo {
  opacity: 1; transform: scale(1);
  transition-delay: 0.45s;
}

/* ── Soft SPA page cross-fade (nav transition smoothing, 2026-06-12) ──
   navigate() dips the content out, swaps the page, breathes it back in. */
.main-content { transition: opacity 0.3s ease; }
.main-content.page-fade-out { opacity: 0; transition-duration: 0.18s; }

/* ── LAPTOP VIEWPORT OVERRIDE (2026-06-12) ──
   On the MacBook's built-in display (viewport height ≤ 1200px — 16" MBP is
   1117pt) the top band of the page sits behind the camera-housing/notch
   when shown fullscreen (TripleView wall panels + fullscreen windows),
   clipping the top half of the MARVIN ROSS wordmark. Grow the header and
   drop the wordmark + hamburger row to its bottom edge so both sit fully
   inside the visible area and stay clickable. Everything keyed off
   --header-h (styles panel, mobile nav, main-content padding) follows
   automatically. The docked/big-monitor case (viewport height > 1200px,
   external display is 1440pt tall) NEVER matches this query — its
   positioning is untouched. */
@media (max-height: 1200px) {
  :root { --header-h: 108px; }
  .header-inner {
    align-items: flex-end;
    padding-bottom: 16px;
  }
}