/* =====================================================================
   GVD v30 - spacing, mobile gesture, one-screen public work, hierarchy.
   ===================================================================== */

/* HERO ---------------------------------------------------------------- */
/* The body copy is a primary message on the dark opening scene. */
.station-hero .hero-description,
.station-hero .hero-audience {
  opacity: .96 !important;
}
html[data-theme="dark"] .station-hero .hero-description,
html[data-theme="dark"] .station-hero .hero-audience { color: #f4f3ef !important; }
html[data-theme="light"] .station-hero .hero-description,
html[data-theme="light"] .station-hero .hero-audience { color: #09090a !important; }

/* IMPACT / EXPERIENCE NUMBERS ---------------------------------------- */
/* Gray value -> white meaning -> muted proof. */
.station-impact .impact-item strong {
  color: var(--gvd-title-gray, var(--type-secondary, #9fa0a6)) !important;
}
.station-impact .impact-item p b { opacity: 1 !important; }
html[data-theme="dark"] .station-impact .impact-item p b { color: #f4f3ef !important; }
html[data-theme="light"] .station-impact .impact-item p b { color: #09090a !important; }
.station-impact .impact-item p span {
  color: var(--muted) !important;
  opacity: .92 !important;
}

/* LARGE DESKTOP EDITORIAL SPACING ------------------------------------ */
@media (min-width: 1321px) {
  /* Keep the process title inside its own column and create a deliberate
     cinematic channel before the four process blocks. */
  .station-process .process-layout {
    grid-template-columns: minmax(560px, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(92px, 6.4vw, 132px) !important;
  }
  .station-process .scene-header {
    max-width: 620px !important;
  }
  .station-process .scene-title {
    max-width: 8.7ch !important;
  }

  /* Pull the biography columns toward the headline. The previous first
     column and gutter created an empty vertical strip in the composition. */
  .station-experience .experience-layout {
    grid-template-columns: minmax(500px, .76fr) minmax(0, 1.24fr) !important;
    gap: clamp(26px, 2.4vw, 48px) !important;
  }
  .station-experience .scene-header {
    max-width: 560px !important;
  }
  .station-experience .experience-copy {
    max-width: 940px !important;
  }
}

/* TOUCH / MOBILE ------------------------------------------------------ */
@media (max-width: 1100px) {
  html.is-depth,
  html.is-depth body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html.is-depth #depth-stage,
  html.is-depth #depth-stage .station.is-interactive {
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

  /* On compact viewports the control must always describe the physical
     finger gesture, even when DevTools or a hybrid device reports a fine
     pointer. Forward = finger moves upward. */
  #global-scroll-cue .gesture-device-mouse {
    display: none !important;
  }
  #global-scroll-cue .gesture-device-touch {
    display: grid !important;
  }
  #global-scroll-cue[data-direction="next"] .gesture-touch-arrow {
    transform: none !important;
  }
  #global-scroll-cue[data-direction="next"] .gesture-touch-dot {
    animation-name: gvdTouchRailForward !important;
  }
  #global-scroll-cue[data-direction="previous"] .gesture-touch-arrow {
    transform: translateY(37px) rotate(180deg) !important;
  }
  #global-scroll-cue[data-direction="previous"] .gesture-touch-dot {
    animation-name: gvdTouchRailBack !important;
  }

  /* PUBLIC WORK: one viewport, three rows, no native page scrolling. */
  html.is-depth .station-work {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: var(--gvd-scene-top) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-work .work-layout {
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(100dvh - var(--gvd-scene-top)) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(4px, .65dvh, 7px) !important;
  }

  .station-work .work-layout > .scene-header {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .station-work .scene-label {
    display: none !important;
  }
  .station-work .scene-title {
    margin: 0 !important;
    padding: 0 0 .08em !important;
    max-width: 9.4ch !important;
    font-size: clamp(29px, 8.2vw, 40px) !important;
    line-height: .84 !important;
  }

  .station-work .work-list {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    align-content: stretch !important;
    gap: clamp(4px, .7dvh, 7px) !important;
  }

  .station-work .work-row,
  .station-work .work-row.is-active,
  .station-work .work-row.is-mobile-open,
  .station-work .work-row:hover,
  .station-work .work-row:focus,
  .station-work .work-row:focus-visible {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: 2px !important;
    background: transparent !important;
    transform: none !important;
  }

  .station-work .work-title,
  .station-work .work-row.is-active .work-title,
  .station-work .work-row.is-mobile-open .work-title,
  .station-work .work-row:hover .work-title,
  .station-work .work-row:focus .work-title {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(38px, 1fr) auto !important;
    align-items: stretch !important;
    align-content: stretch !important;
    gap: 1px !important;
    font-size: clamp(15px, 4.45vw, 20px) !important;
    line-height: .9 !important;
    transform: none !important;
  }

  .station-work .work-title-segment,
  .station-work .work-title-before,
  .station-work .work-title-after,
  .station-work .work-row.is-active .work-title-segment,
  .station-work .work-row.is-mobile-open .work-title-segment,
  .station-work .work-row:hover .work-title-segment,
  .station-work .work-row:focus .work-title-segment {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    opacity: 1 !important;
    transform: none !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .station-work .work-title-before { grid-row: 1 !important; }
  .station-work .work-title-after { grid-row: 3 !important; }

  .station-work .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media,
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row:focus .work-inline-media {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-height: clamp(54px, 7.4dvh, 72px) !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  .station-work .work-inline-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .station-work .work-row-meta {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: baseline !important;
    gap: 7px !important;
    opacity: .86 !important;
    transform: none !important;
    font-size: clamp(6.4px, 1.75vw, 8px) !important;
    line-height: 1.1 !important;
  }
  .station-work .work-row-meta > span {
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .station-work .work-row-meta > b {
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  html body #global-scroll-cue {
    z-index: 1200 !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

/* Compact-height phones: preserve all three work rows without clipping the
   header or the navigation control. */
@media (max-width: 430px) and (max-height: 760px) {
  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-work .work-layout {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .station-work .scene-title {
    font-size: clamp(25px, 7.6vw, 33px) !important;
  }
  .station-work .work-title {
    grid-template-rows: auto minmax(30px, 1fr) auto !important;
    font-size: clamp(13px, 4.05vw, 17px) !important;
  }
  .station-work .work-inline-media {
    min-height: 30px !important;
    max-height: clamp(40px, 6.4dvh, 52px) !important;
  }
  .station-work .work-row-meta {
    font-size: 5.9px !important;
  }
}