/* =====================================================================
   GVD v28 - restored hierarchy accents, stable mobile public work,
   and full-surface mobile scene gestures.
   ===================================================================== */

/* Homepage thesis: restore the original alternating visual hierarchy. */
.hero-thesis-v27 {
  display: block !important;
}
.hero-thesis-v27 .hero-thesis-segment {
  display: inline !important;
  color: var(--ink) !important;
}
.hero-thesis-v27 .hero-thesis-secondary {
  color: var(--gvd-title-gray, var(--type-secondary, #9fa0a6)) !important;
}

/* The section label was removed from markup; keep old cached nodes invisible. */
.capability-list-label { display: none !important; }

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  /* Custom depth navigation owns vertical touch gestures across every scene.
     Links still receive ordinary taps; the controller distinguishes tap/drag. */
  html.is-depth #depth-stage,
  html.is-depth #depth-stage .station,
  html.is-depth #depth-stage .station * {
    touch-action: none !important;
  }

  /* Public work: every element participates in normal document flow. No
     legacy absolute/translated media can cover a title or description. */
  html.is-depth .station-work {
    padding-top: var(--gvd-scene-top) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !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 {
    width: 100% !important;
    height: calc(100dvh - var(--gvd-scene-top) - 92px - env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }
  .station-work .work-layout > .scene-header {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 clamp(5px, .7vh, 9px) !important;
  }
  .station-work .scene-title {
    margin: 0 !important;
    font-size: clamp(30px, 8.8vw, 44px) !important;
    line-height: .88 !important;
  }
  .station-work .work-list {
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(4px, .65vh, 8px) !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 {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !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;
    background: transparent !important;
    transform: none !important;
  }
  .station-work .work-title,
  .station-work .work-row.is-active .work-title,
  .station-work .work-row:hover .work-title {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(42px, 1fr) auto !important;
    align-content: stretch !important;
    gap: clamp(2px, .35vh, 4px) !important;
    font-size: clamp(17px, 5.35vw, 25px) !important;
    line-height: .9 !important;
    transform: none !important;
    overflow: hidden !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:hover .work-title-segment {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    opacity: 1 !important;
    transform: none !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .station-work .work-title-before { grid-row: 1 !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 {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 42px !important;
    max-height: none !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-title-after { grid-row: 3 !important; }
  .station-work .work-row-meta {
    position: static !important;
    inset: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: baseline !important;
    gap: 8px !important;
    opacity: .82 !important;
    transform: none !important;
    font-size: clamp(6.8px, 1.8vw, 8.8px) !important;
    line-height: 1.15 !important;
  }
  .station-work .work-row-meta > span {
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
  }
  .station-work .work-row-meta > b {
    font-size: inherit !important;
    white-space: nowrap !important;
  }

  /* The cue remains outside the scene layout and cannot be covered by work. */
  html body #global-scroll-cue {
    z-index: 500 !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* Short phones receive more compact media but the same non-overlapping flow. */
@media (max-width: 430px) and (max-height: 740px) {
  html.is-depth .station-work {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-work .work-layout {
    height: calc(100dvh - var(--gvd-scene-top) - 80px - env(safe-area-inset-bottom)) !important;
  }
  .station-work .scene-title { font-size: clamp(27px, 8vw, 36px) !important; }
  .station-work .work-title {
    grid-template-rows: auto minmax(34px, 1fr) auto !important;
    font-size: clamp(15px, 4.8vw, 21px) !important;
  }
  .station-work .work-inline-media { min-height: 34px !important; }
  .station-work .work-row-meta { font-size: 6.4px !important; }
}