/* =====================================================================
   GVD v31 - mobile safe-stage cleanup and public-work copy repair.
   ===================================================================== */

/* DESKTOP PUBLIC WORKS -------------------------------------------------
   The descriptive sentence owns the full row. It is not clamped to the old
   780px measure, so wide screens use the space that is already available. */
@media (min-width: 1101px) {
  .station-work .work-row-meta {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: baseline !important;
    gap: clamp(22px, 2.2vw, 42px) !important;
  }

  .station-work .work-row-meta > span {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .station-work .work-row-meta > b {
    align-self: baseline !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1500px) {
  .station-work .work-row-meta {
    font-size: clamp(9.6px, .61vw, 11.5px) !important;
    line-height: 1.3 !important;
  }

  .station-work .work-row-meta > span {
    white-space: nowrap !important;
  }
}

/* MOBILE SAFE STAGE --------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --v31-mobile-safe-top: calc(var(--gvd-header-h) + clamp(7px, 1dvh, 11px));
    --v31-mobile-safe-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  html.is-depth .station-work,
  html.is-depth .station-experience {
    box-sizing: border-box !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: var(--v31-mobile-safe-top) !important;
    padding-bottom: var(--v31-mobile-safe-bottom) !important;
    overflow: hidden !important;
  }

  html.is-depth .station-work .station-shell,
  html.is-depth .station-work .station-shell-wide,
  html.is-depth .station-experience .station-shell,
  html.is-depth .station-experience .station-shell-wide {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Keep the global cue in its own reserved zone, exactly centered. */
  html body #global-scroll-cue {
    left: 50% !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    transform: translateX(-50%) scale(.72) !important;
    transform-origin: center bottom !important;
  }

  /* PUBLIC WORKS: compact, readable, three complete rows in one viewport. */
  html.is-depth .station-work .work-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(5px, .7dvh, 8px) !important;
  }

  .station-work .work-layout > .scene-header {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .station-work .scene-title {
    max-width: 9.5ch !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(27px, min(8.1vw, 5.2dvh), 38px) !important;
    line-height: .82 !important;
  }

  .station-work .work-list {
    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, .58dvh, 7px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !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 {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !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 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(38px, 1fr) auto !important;
    align-content: stretch !important;
    align-items: stretch !important;
    gap: 1px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .station-work .work-title-segment,
  .station-work .work-row:hover .work-title-segment,
  .station-work .work-row.is-active .work-title-segment,
  .station-work .work-row.is-mobile-open .work-title-segment {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    text-align: left !important;
    font-size: clamp(15px, min(4.35vw, 2.9dvh), 19px) !important;
    line-height: .91 !important;
    transform: none !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(50px, 7.2dvh, 64px) !important;
    margin: 1px 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: hidden !important;
    border-radius: 0 clamp(14px, 3vw, 22px) 0 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .station-work .work-inline-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .station-work .work-row-meta {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: start !important;
    gap: clamp(6px, 1.8vw, 10px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: .9 !important;
    font-size: clamp(6.9px, min(1.9vw, 1.28dvh), 8.4px) !important;
    line-height: 1.16 !important;
    transform: none !important;
  }

  .station-work .work-row-meta > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .station-work .work-row-meta > b {
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* EXPERIENCE: reduce only density, not content. The full biography and link
     remain visible inside the same safe stage. */
  html.is-depth .station-experience .experience-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(8px, 1.15dvh, 12px) !important;
  }

  .station-experience .scene-header {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .station-experience .scene-title {
    max-width: 9.2ch !important;
    margin: 0 !important;
    font-size: clamp(28px, min(7.8vw, 5.25dvh), 39px) !important;
    line-height: .8 !important;
  }

  .station-experience .experience-copy {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .station-experience .experience-column {
    min-width: 0 !important;
  }

  .station-experience .experience-column p {
    margin: 0 0 clamp(4px, .62dvh, 6px) !important;
    font-size: clamp(8.2px, min(2.32vw, 1.42dvh), 10.1px) !important;
    line-height: 1.29 !important;
  }

  .station-experience .experience-link {
    margin-top: clamp(3px, .45dvh, 5px) !important;
    padding-bottom: 5px !important;
    font-size: clamp(7.2px, 2vw, 8.5px) !important;
    line-height: 1 !important;
  }
}

/* Short phones get a slightly denser composition instead of leaking into the
   fixed header or navigation cue zones. */
@media (max-width: 430px) and (max-height: 760px) {
  :root {
    --v31-mobile-safe-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .station-work .scene-title {
    font-size: clamp(24px, min(7.4vw, 4.8dvh), 31px) !important;
  }

  .station-work .work-title {
    grid-template-rows: auto minmax(30px, 1fr) auto !important;
  }

  .station-work .work-title-segment {
    font-size: clamp(13px, min(4vw, 2.75dvh), 16.5px) !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 {
    min-height: 30px !important;
    max-height: clamp(40px, 6.2dvh, 50px) !important;
  }

  .station-work .work-row-meta {
    font-size: clamp(6.1px, 1.72vw, 7.2px) !important;
    line-height: 1.12 !important;
  }

  .station-experience .scene-title {
    font-size: clamp(25px, min(7.1vw, 4.75dvh), 32px) !important;
  }

  .station-experience .experience-layout {
    gap: 6px !important;
  }

  .station-experience .experience-column p {
    margin-bottom: 3.5px !important;
    font-size: clamp(7.6px, 2.14vw, 8.8px) !important;
    line-height: 1.24 !important;
  }
}