/* ========================================================================
   RESPONSIVE LAYOUT SYSTEM
   ------------------------------------------------------------------------
   One final source of truth for page geometry. This intentionally overrides
   accumulated device-specific patches while retaining the visual design in
   style.css: colour, typeface, artwork, card treatment and animation.
   Breakpoints: mobile <= 767px, tablet 768–1199px, desktop >= 1200px.
   ======================================================================== */

:root {
  --layout-gutter: clamp(18px, 4vw, 56px);
  --section-space: clamp(56px, 7vw, 104px);
}

/* iPad/tablet photo lightboxes: Safari can repaint backdrop-filter while the
   decoded image and modal opacity transition arrive in the same frame. Keep
   the dark overlay stable so opening and closing do not flash. */
@media (min-width: 600px) and (max-width: 1600px) {
  html.is-touch-tablet #lightbox.modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.is-touch-tablet #lightbox.open > #photo-prev,
  html.is-touch-tablet #lightbox.open > #photo-next {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Photo close must not animate the frame itself.  Portrait and landscape
   images have different measured boxes, so the shared translate/scale exit
   animation can visibly snap or bounce on only some photos. Fade the stable
   frame instead and let the overlay transition handle the dismissal. */
#lightbox > .lightbox-box {
  transition: opacity .28s ease !important;
  animation: none !important;
}
#lightbox.open > .lightbox-box {
  animation: none !important;
  transform: none !important;
}
#lightbox.photo-modal-leaving > .lightbox-box {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
  filter: none !important;
}

html, body { max-width: 100%; overflow-x: clip; }

#main-nav .nav-inner,
#showreel .showreel-shell,
#about > *,
#contact > *,
#cinematography,
#photography { min-width: 0; }

@media (min-width: 768px) and (max-width: 1199px) {
#cinematography,
#photography {
  box-sizing: border-box;
  padding-inline: var(--layout-gutter) !important;
  padding-block: var(--section-space) !important;
}

#cinematography::before,
#photography::before { inset: clamp(16px, 2.8vw, 38px) !important; }

#cinematography .section-header,
#photography .section-header {
  width: 100%;
  min-width: 0;
  margin-bottom: clamp(18px, 2.4vw, 32px) !important;
}

#cinematography .cat-tabs,
#photography .cat-tabs,
#cinematography .cat-select,
#photography .cat-select,
#video-grid-all,
#photo-grid-all,
#video-pagination,
#photo-pagination {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#video-grid-all,
#photo-grid-all {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: clip !important;
}

#video-grid-all > *,
#photo-grid-all > * { min-width: 0 !important; max-width: 100%; }

#video-pagination,
#photo-pagination {
  width: 100%;
  min-height: 48px;
  margin: clamp(22px, 3vw, 36px) 0 0 !important;
  padding-bottom: clamp(22px, 3vw, 36px) !important;
}

/* Video modal: one contained column. Metadata always belongs to the same
   box as the player and can scroll inside its own panel if necessary. */
#video-modal.open {
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) !important;
  overflow: auto !important;
  align-items: center !important;
}

#video-modal.open > .modal-box,
#video-modal.tablet-portrait-info > .modal-box {
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 960px) !important;
  max-width: 94vw !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#video-modal.open .modal-video-wrap {
  width: 100% !important;
  height: var(--responsive-video-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

#video-modal.open .modal-video-wrap iframe,
#video-modal.open .modal-video-wrap video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#video-modal.open .modal-info,
#video-modal.tablet-portrait-info .modal-info,
#video-modal.tablet-portrait-info .modal-info.modal-info--stacked {
  display: grid !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title category"
    "youtube category"
    "desc desc"
    "counter counter" !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 6px 14px !important;
  padding: 14px 18px 16px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#video-modal.open #modal-title,
#video-modal.tablet-portrait-info #modal-title { display: block !important; grid-area: title !important; }
#video-modal.open .modal-youtube-stats,
#video-modal.tablet-portrait-info .modal-youtube-stats { grid-area: youtube !important; }
#video-modal.open #modal-desc,
#video-modal.tablet-portrait-info #modal-desc { display: block !important; grid-area: desc !important; margin: 0 !important; max-height: none !important; overflow: visible !important; }
#video-modal.open #modal-category,
#video-modal.tablet-portrait-info #modal-category { grid-area: category !important; align-self: start !important; }
#video-modal.open #video-counter,
#video-modal.tablet-portrait-info #video-counter { display: inline-flex !important; grid-area: counter !important; justify-self: end !important; margin: 0 !important; }
}

/* Desktop ---------------------------------------------------------------- */
@media (min-width: 1200px) {
  #main-nav .nav-toggle { display: none !important; }
  #main-nav .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    max-height: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
  }
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: flex !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: none !important; }
}

/* Tablet ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --layout-gutter: clamp(28px, 5vw, 54px); --section-space: clamp(64px, 8vw, 92px); }
  #main-nav .nav-toggle { display: flex !important; }
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: none !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: block !important; width: min(260px, 100%) !important; }
  #video-modal.open > .modal-box { width: min(92vw, 860px) !important; }
  #video-grid-all,
  #photo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  #video-grid-all,
  #photo-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Large touch tablets can expose a desktop-sized CSS viewport (for example
   1280px in landscape), but retain the tablet interaction and fit rules. */
html.is-touch-tablet #video-modal.open .modal-info {
  max-height: none !important;
  overflow: visible !important;
}

/* Low-height landscape: reserve vertical room for metadata rather than
   letting a long description fall below the visible modal. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) and (max-height: 820px) {
  #video-modal.open > .modal-box { width: min(90vw, 880px, calc((100dvh - 190px) * 16 / 9)) !important; }
  #video-modal.open .modal-info { max-height: none !important; overflow: visible !important; }
}

/* Touch tablets in landscape use the desktop information architecture.  The
   compact controls in legacy rules are intentionally overridden here; only
   type and spacing are reduced a little to keep the header composed. */
@media (orientation: landscape) {
  html.is-touch-tablet #main-nav .nav-toggle {
    display: none !important;
  }

  html.is-touch-tablet #main-nav .nav-inner {
    padding-inline: clamp(20px, 2.5vw, 34px) !important;
    gap: clamp(16px, 2vw, 24px) !important;
  }

  html.is-touch-tablet #main-nav .nav-logo {
    gap: 8px !important;
    transform: none !important;
  }

  html.is-touch-tablet #main-nav .logo-img {
    width: 42px !important;
    height: 42px !important;
  }

  html.is-touch-tablet #main-nav .logo-name {
    font-size: clamp(.82rem, 1.2vw, .92rem) !important;
    letter-spacing: .12em !important;
  }

  html.is-touch-tablet #main-nav .logo-sub {
    font-size: clamp(.58rem, .82vw, .66rem) !important;
    letter-spacing: .09em !important;
  }

  html.is-touch-tablet #main-nav .nav-links {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 14px) !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Undo the touch-menu rule that makes every list item full-width. */
  html.is-touch-tablet #main-nav .nav-links li {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.is-touch-tablet #main-nav .nav-links a,
  html.is-touch-tablet #main-nav .nav-link {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 clamp(7px, .65vw, 10px) !important;
    border-radius: 999px !important;
    color: rgba(232,232,232,.58) !important;
    font-size: clamp(.62rem, .82vw, .7rem) !important;
    letter-spacing: .115em !important;
    text-align: left !important;
    transition: color .28s ease, background .28s ease, box-shadow .28s ease !important;
  }

  html.is-touch-tablet #main-nav .nav-link::after {
    display: none !important;
  }

  html.is-touch-tablet #main-nav .nav-link.active {
    color: #f4fbff !important;
    background: linear-gradient(180deg, rgba(106,176,212,.17), rgba(106,176,212,.07)) !important;
    box-shadow: inset 0 0 0 1px rgba(106,176,212,.2), 0 7px 20px rgba(0,0,0,.18) !important;
  }

  html.is-touch-tablet #cinematography .cat-tabs,
  html.is-touch-tablet #photography .cat-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 14px 0 30px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Match the compact tablet header navigation rhythm. */
  html.is-touch-tablet #cinematography .cat-tab,
  html.is-touch-tablet #photography .cat-tab {
    min-height: 32px !important;
    padding: 0 clamp(7px, .65vw, 10px) !important;
    font-size: clamp(.62rem, .82vw, .7rem) !important;
    letter-spacing: .115em !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  html.is-touch-tablet #cinematography .cat-select,
  html.is-touch-tablet #photography .cat-select {
    display: none !important;
  }
}

/* iPad landscape often reports a desktop-width viewport.  Keep the modal a
   touch smaller on short displays so all metadata remains visible. */
@media (orientation: landscape) and (max-height: 820px) {
  html.is-touch-tablet #video-modal.open > .modal-box {
    width: min(88vw, 920px, calc((100dvh - 164px) * 16 / 9)) !important;
  }
  html.is-touch-tablet #video-modal.open .modal-info {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final mobile-landscape modal pass.  The previous split-panel layout used a
   flexible spacer row, which pushed the description away from the YouTube
   view count. Keep the metadata rows content-sized and grow the panel itself
   into the available vertical viewport instead. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.open > .modal-box {
    min-height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info {
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      "category counter" !important;
    align-content: start !important;
    align-self: stretch !important;
    row-gap: 2px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 12px 14px 16px !important;
  }

  #video-modal.open .modal-youtube-stats,
  html.is-touch-tablet #video-modal.open .modal-youtube-stats {
    margin: 0 !important;
    line-height: 1.18 !important;
  }

  #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-desc {
    margin: 0 !important;
    align-self: start !important;
  }

  /* The taller split panel must not stretch the media row. */
  #video-modal.open .modal-video-wrap,
  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    align-self: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }
}

/* The iPad landscape header uses the rendered hero frame as its horizontal
   ruler.  JavaScript writes the exact frame width into this custom property. */
@media (orientation: landscape) and (min-width: 768px) {
  html.is-touch-tablet #main-nav .nav-inner {
    width: var(--touch-tablet-nav-frame-width, calc(100% - 40px)) !important;
    max-width: var(--touch-tablet-nav-frame-width, calc(100% - 40px)) !important;
    padding-inline: 0 !important;
  }

  html.is-touch-tablet #main-nav .nav-links li:last-child .nav-link {
    padding-right: 0 !important;
  }
}

/* Compact phones share one landscape profile across common widths such as
   480, 568, 667, and 844 CSS pixels. Keep the established 3-column gallery
   and split media modal instead of letting intermediate widths fall into a
   different tablet/desktop rule set. */
@media (orientation: landscape) and (min-width: 480px) and (max-width: 767px) {
  #cinematography #video-grid-all,
  #photography #photo-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      max(12px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 58px)
      max(12px, env(safe-area-inset-left)) !important;
    align-items: center !important;
  }

  #video-modal.open > .modal-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(145px, .85fr) !important;
    width: calc(100vw - 24px) !important;
    max-width: 1120px !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    align-items: start !important;
  }

  #video-modal.open .modal-video-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      "category counter" !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 12px 12px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255,255,255,.1) !important;
    overflow: hidden !important;
    align-self: stretch !important;
    align-content: start !important;
    text-align: left !important;
  }

  #video-modal.open #modal-title,
  #video-modal.open .modal-youtube-stats,
  #video-modal.open #modal-desc,
  #video-modal.open #modal-category,
  #video-modal.open #video-counter {
    min-width: 0 !important;
    margin-left: 0 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #video-modal.open #modal-title {
    grid-area: title !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    font-size: clamp(.72rem, 2.1vw, .84rem) !important;
    line-height: 1.24 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #video-modal.open .modal-youtube-stats {
    grid-area: stats !important;
    margin-top: 4px !important;
    font-size: clamp(.58rem, 1.7vw, .68rem) !important;
    line-height: 1.18 !important;
  }

  #video-modal.open #modal-desc {
    grid-area: desc !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    margin-top: 8px !important;
    overflow: hidden !important;
    font-size: clamp(.58rem, 1.8vw, .72rem) !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
  }

  #video-modal.open #modal-category {
    grid-area: category !important;
    align-self: end !important;
    justify-self: start !important;
    margin-top: 8px !important;
    padding: 4px 6px !important;
    font-size: clamp(.48rem, 1.45vw, .58rem) !important;
  }

  #video-modal.open #video-counter {
    grid-area: counter !important;
    align-self: end !important;
    justify-self: end !important;
    padding: 4px 6px !important;
    font-size: clamp(.52rem, 1.55vw, .62rem) !important;
  }

  #video-modal.open.video-nav-below > #video-prev,
  #video-modal.open.video-nav-below > #video-next {
    display: inline-flex !important;
    position: fixed !important;
    width: min(140px, calc(50vw - 18px)) !important;
    min-width: min(140px, calc(50vw - 18px)) !important;
    height: 38px !important;
    min-height: 38px !important;
    transform: none !important;
    white-space: nowrap !important;
  }
}

@media (orientation: portrait) and (max-width: 767px) {
  #cinematography #video-grid-all,
  #photography #photo-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Portrait tablets: prevent older touch-modal transforms or offsets from
   pulling the metadata column away from the player. */
@media (orientation: portrait) and (min-width: 768px) {
  /* Keep the About and Contact glass surfaces on the same viewport ruler as
     the gallery panels. Their older max-width values made both borders
     visibly narrower on portrait iPad layouts. */
  html.is-touch-tablet {
    --tablet-glass-inset: clamp(16px, 2.8vw, 38px);
  }

  html.is-touch-tablet #showreel .showreel-shell,
  html.is-touch-tablet #about .about-inner,
  html.is-touch-tablet #contact .contact-inner {
    width: calc(100vw - (var(--tablet-glass-inset) * 2)) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + var(--tablet-glass-inset)) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html.is-touch-tablet #cinematography #video-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #photography #photo-grid-all {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #video-modal.open > .modal-box,
  html.is-touch-tablet #video-modal.tablet-portrait-info > .modal-box {
    overflow: hidden !important;
    transform: none !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info.modal-info--stacked {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title,
  html.is-touch-tablet #video-modal.open .modal-youtube-stats,
  html.is-touch-tablet #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-category,
  html.is-touch-tablet #video-modal.open #video-counter {
    min-width: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    translate: none !important;
  }
}

/* Tablet landscape landing composition: retain the full 16:9 showreel while
   fitting the complete hero and player within one available screen. */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1440px) {
  /* Align every major glass surface to the Photography/Cinematography frame.
     Those sections use a 36px visual inset on compact tablet landscape. */
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .showreel-shell,
  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: calc(100% - 72px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* About and Contact have their own section padding, so their inner glass
     panels must be measured from the viewport rather than that padded box. */
  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: calc(100vw - 72px) !important;
    margin-left: calc(50% - 50vw + 36px) !important;
    margin-right: 0 !important;
  }

  html.is-touch-tablet.is-compact-landscape-gallery #about.section-about,
  html.is-touch-tablet.is-compact-landscape-gallery #contact.section-contact {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: 100% !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #showreel.section-showreel {
    padding-top: 68px !important;
    padding-bottom: 28px !important;
  }

  html.is-touch-tablet #showreel .showreel-shell {
    width: min(calc(100% - 40px), 1080px) !important;
    margin-top: 10px !important;
    padding: 0 12px 8px !important;
    gap: 18px !important;
  }

  html.is-touch-tablet #showreel .showreel-shell .hero-intro {
    padding: 32px 18px 0 !important;
  }

  html.is-touch-tablet #showreel .hero-kicker {
    margin-bottom: 9px !important;
    font-size: .52rem !important;
    letter-spacing: .2em !important;
  }

  html.is-touch-tablet #showreel .hero-title {
    margin-bottom: 14px !important;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
    line-height: 1 !important;
  }

  html.is-touch-tablet #showreel .hero-role {
    margin-bottom: 14px !important;
    padding: 4px 8px !important;
    font-size: .54rem !important;
  }

  html.is-touch-tablet #showreel .hero-summary {
    margin-bottom: 16px !important;
    font-size: .74rem !important;
    line-height: 1.28 !important;
  }

  html.is-touch-tablet #showreel .hero-actions {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }

  html.is-touch-tablet #showreel .hero-btn {
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: .54rem !important;
  }

  html.is-touch-tablet #showreel .showreel-player {
    width: min(86vw, 900px, calc((100svh - 330px) * 16 / 9)) !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
  }
}

/* Mobile landscape video modal: use horizontal space deliberately.
   ‹ | player | information | › */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      max(12px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 12px)
      max(12px, env(safe-area-inset-left)) !important;
    align-items: center !important;
  }

  #video-modal.open > .modal-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(175px, .85fr) !important;
    width: 100% !important;
    max-width: 1120px !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  #video-modal.open .modal-video-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      ". ."
      "category counter" !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255,255,255,.1) !important;
    overflow: hidden !important;
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    text-align: left !important;
    align-content: start !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #video-modal.open #modal-title,
  #video-modal.open .modal-youtube-stats,
  #video-modal.open #modal-desc,
  #video-modal.open #modal-category,
  #video-modal.open #video-counter {
    min-width: 0 !important;
    margin: 0 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #video-modal.open #modal-title {
    grid-area: title !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    font-size: .84rem !important;
    line-height: 1.24 !important;
    letter-spacing: .075em !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #video-modal.open .modal-youtube-stats {
    grid-area: stats !important;
    margin-top: 4px !important;
    font-size: .68rem !important;
    text-align: left !important;
  }

  #video-modal.open #modal-desc {
    grid-area: desc !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    margin-top: 12px !important;
    overflow: hidden !important;
    font-size: .72rem !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #video-modal.open #modal-category {
    grid-area: category !important;
    align-self: end !important;
    justify-self: start !important;
    margin-top: 8px !important;
    padding: 5px 8px !important;
    font-size: .58rem !important;
    text-align: left !important;
  }

  #video-modal.open #video-counter {
    grid-area: counter !important;
    align-self: end !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: .62rem !important;
  }

  #video-modal.open .modal-nav {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 6 !important;
    width: 38px !important;
    height: 58px !important;
    min-width: 38px !important;
    transform: translateY(-50%) !important;
  }

  #video-modal.open .modal-nav--prev {
    left: 6px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }
  #video-modal.open .modal-nav--next {
    right: 6px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  /* A phone in desktop-width Safari can also receive the tablet class.
     Preserve the split-panel presentation over those older tablet rules. */
  html.is-touch-tablet #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      ". ."
      "category counter" !important;
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open #modal-category {
    place-self: end start !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #video-modal.open #video-counter {
    place-self: end !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title {
    display: -webkit-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open #modal-desc {
    display: -webkit-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}

/* Final mobile-landscape modal pass: no flexible spacer between the view
   count and description, and use the available vertical viewport. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.open > .modal-box {
    min-height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info {
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      "category counter" !important;
    align-content: start !important;
    align-self: stretch !important;
    row-gap: 2px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 12px 14px 16px !important;
  }

  #video-modal.open .modal-youtube-stats,
  html.is-touch-tablet #video-modal.open .modal-youtube-stats {
    margin: 0 !important;
    line-height: 1.18 !important;
  }

  #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-desc {
    margin: 0 !important;
    align-self: start !important;
  }
}

/* The split modal must size its single grid row from the 16:9 player.  A
   viewport-height minimum here leaves a black tail below the player.  Keep
   the info panel stretched to that same row, then use its internal flexible
   track to pin category and counter to the bottom. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.open > .modal-box {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
  }

  #video-modal.open .modal-video-wrap,
  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    align-self: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.open .modal-info {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      ". ."
      "category counter" !important;
    align-content: stretch !important;
    row-gap: 2px !important;
    padding: 12px 14px 16px !important;
  }

  #video-modal.open #modal-category,
  html.is-touch-tablet #video-modal.open #modal-category {
    align-self: end !important;
    margin: 0 !important;
  }

  #video-modal.open #video-counter,
  html.is-touch-tablet #video-modal.open #video-counter {
    align-self: end !important;
    margin: 0 !important;
  }
}

/* Desktop gallery containment: some browsers expose a coarse secondary
   pointer even on a wide desktop viewport, which can activate the legacy
   tablet-landscape width rules.  The glass frame remains capped, so the
   desktop grids must use the same capped canvas and never run full-bleed. */
@media (min-width: 1601px) {
  #cinematography > .video-grid,
  #photography > .photo-grid,
  #behind-scene > .video-grid,
  #behind-scene > .photo-grid,
  #ai-visuals > .ai-grid {
    width: min(100%, 1540px) !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: clip !important;
    box-sizing: border-box !important;
  }

  #cinematography > .video-grid > *,
  #photography > .photo-grid > *,
  #behind-scene > .video-grid > *,
  #behind-scene > .photo-grid > *,
  #ai-visuals > .ai-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Mobile landscape video modal: keep navigation below the frame and the
   close control above its top-right corner.  These rules are deliberately at
   EOF so the old side-arrow landscape block cannot win in the cascade. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.open.video-nav-below {
    align-items: center !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px) !important;
  }

  #video-modal.open.video-nav-below > .modal-box {
    transform: translateY(6px) !important;
  }

  #video-modal.open.video-nav-below > #video-prev,
  #video-modal.open.video-nav-below > #video-next {
    display: inline-flex !important;
    position: fixed !important;
    width: 140px !important;
    min-width: 140px !important;
    height: 38px !important;
    min-height: 38px !important;
    transform: none !important;
    white-space: nowrap !important;
    text-transform: none !important;
  }

  #video-modal.open.video-nav-below > #modal-close {
    position: fixed !important;
    z-index: 32 !important;
    transform: none !important;
  }
}

/* Touch tablets can expose many viewport sizes: iPad mini, standard iPad,
   large iPad, and Android tablets with similar CSS dimensions. Keep every
   landscape tablet on the same desktop-style modal and gallery profile. */
@media (orientation: landscape) and (min-width: 768px) {
  html.is-touch-tablet #cinematography #video-grid-all {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #photography #photo-grid-all {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  /* Keep side arrows fully visible on iPad/Android tablet landscapes. The
     modal itself may scroll for metadata, but its fixed navigation controls
     must not be clipped by the overlay scrollport. */
  html.is-touch-tablet #video-modal.open {
    overflow: visible !important;
  }

  html.is-touch-tablet #video-modal.open > .modal-nav {
    z-index: 2025 !important;
  }

  html.is-touch-tablet #video-modal.open {
    align-items: center !important;
    overflow: auto !important;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) !important;
  }

  html.is-touch-tablet #video-modal.open > .modal-box {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html.is-touch-tablet #video-modal.open .modal-video-wrap {
    width: 100% !important;
    height: var(--responsive-video-height, auto) !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title category"
      "youtube category"
      "desc desc"
      "counter counter" !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 14px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 18px 16px !important;
    border-top: 1px solid var(--border) !important;
    border-left: 0 !important;
    overflow: visible !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title,
  html.is-touch-tablet #video-modal.open .modal-youtube-stats,
  html.is-touch-tablet #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-category,
  html.is-touch-tablet #video-modal.open #video-counter {
    min-width: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    translate: none !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title {
    grid-area: title !important;
    display: block !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html.is-touch-tablet #video-modal.open .modal-youtube-stats { grid-area: youtube !important; }
  html.is-touch-tablet #video-modal.open #modal-desc {
    grid-area: desc !important;
    display: block !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html.is-touch-tablet #video-modal.open #modal-category {
    grid-area: category !important;
    align-self: start !important;
  }
  html.is-touch-tablet #video-modal.open #video-counter {
    grid-area: counter !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #video-modal.open.video-nav-below {
    padding-bottom: clamp(24px, 4vw, 56px) !important;
  }
  html.is-touch-tablet #video-modal.open.video-nav-below > #video-prev,
  html.is-touch-tablet #video-modal.open.video-nav-below > #video-next {
    width: 44px !important;
    min-width: 44px !important;
    height: 58px !important;
    min-height: 58px !important;
    white-space: normal !important;
  }
}

/* iPad mini portrait can be narrower than 768px while still exposing a
   touch-tablet viewport. Keep it on the same portrait tablet profile as the
   larger iPads; phones do not receive this because they lack is-touch-tablet. */
@media (orientation: portrait) {
  html.is-touch-tablet #cinematography #video-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #photography #photo-grid-all {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Navigation buttons: remove the sideways hover/layout motion. Hover only
   changes emphasis; the actual movement happens while the button is pressed. */
#video-modal .modal-nav--prev:hover,
#video-modal .modal-nav--next:hover,
#lightbox .modal-nav--prev:hover,
#lightbox .modal-nav--next:hover {
  transform: translateY(-50%) !important;
}

#video-modal.video-nav-below .modal-nav--prev:hover,
#video-modal.video-nav-below .modal-nav--next:hover,
#lightbox.photo-nav-below .modal-nav--prev:hover,
#lightbox.photo-nav-below .modal-nav--next:hover {
  transform: none !important;
}

#video-modal .modal-nav:active,
#lightbox .modal-nav:active {
  background: rgba(201, 169, 110, .28) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  filter: brightness(.82) !important;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .42), 0 5px 16px rgba(0, 0, 0, .28) !important;
  transition: transform .08s ease, filter .08s ease, background .08s ease !important;
}

#video-modal:not(.video-nav-below) .modal-nav:active,
#lightbox:not(.photo-nav-below) .modal-nav:active {
  transform: translateY(-50%) scale(.92) !important;
}

#video-modal.video-nav-below .modal-nav:active,
#lightbox.photo-nav-below .modal-nav:active {
  transform: scale(.94) !important;
}

/* A modal arrow may remain logically disabled at a list boundary, but never
   communicate that state by dimming the control. This keeps NEXT visually
   identical to PREVIOUS when another item is available and removes the old
   dark overlay effect from both photo and video navigation. */
#video-modal .modal-nav:disabled,
#video-modal .modal-nav[disabled],
#lightbox .modal-nav:disabled,
#lightbox .modal-nav[disabled] {
  opacity: 1 !important;
  filter: none !important;
  color: rgba(255, 255, 255, .92) !important;
  background: rgba(5, 5, 5, .7) !important;
  border-color: var(--border2) !important;
  box-shadow: none !important;
}

/* Final iPad/Android-tablet landscape rail. Use the frame coordinates that
   the modal script publishes on the overlay so the controls do not fall back
   to the overlay's centered grid position while an iframe is settling. */
@media (orientation: landscape) and (min-width: 768px) {
  html.is-touch-tablet #video-modal.open > #modal-close {
    position: fixed !important;
    top: max(8px, calc(var(--modal-media-top, 64px) - 64px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(8px, calc(var(--modal-media-right, 100vw) - 54px)) !important;
    transform: none !important;
    z-index: 2035 !important;
  }

  html.is-touch-tablet #video-modal.open > #video-prev,
  html.is-touch-tablet #video-modal.open > #video-next {
    position: fixed !important;
    top: var(--modal-media-center, 50vh) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 2035 !important;
  }

  html.is-touch-tablet #video-modal.open > #video-prev {
    left: max(8px, calc(var(--modal-media-left, 64px) - 62px)) !important;
  }

  html.is-touch-tablet #video-modal.open > #video-next {
    left: min(calc(100vw - 60px), calc(var(--modal-media-right, 100vw) + 10px)) !important;
  }
}