/* Final shared layout safeguards for phones, tablets, zoom and short screens. */
html { scroll-padding-top: 100px; }
.shell, .page-shell, .header-tools, .main-nav,
.about-main, .contact-data, .signal-panel, .metric-card, .event-card {
  min-width: 0;
}
.event-title, .metric-sub, .portfolio-badge, .contact-data a, .footer-attribution {
  overflow-wrap: anywhere;
}
.filter-pills, .footer-right { flex-wrap: wrap; }
.site-footer { gap: 20px; }
.event-card img[hidden] { display: none; }
input[type="text"] { font-size: 16px; }
.filter-pill, .card-action-link, .perf-toggle-btn { min-height: 44px; }
.main-nav { gap: clamp(12px, 2vw, 30px); }
.mobile-menu-toggle { display: none; }

@media (max-width: 1180px) {
  html { scroll-padding-top: 130px; }
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 56px 44px;
    gap: 0 12px;
    min-height: 100px;
    padding: 0 16px;
    background: rgba(3, 3, 3, .96);
    backdrop-filter: none;
  }
  .wordmark { grid-column: 1; grid-row: 1; }
  .header-tools { grid-column: 2; grid-row: 1; gap: 10px; }
  .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--faint);
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 200, 255, .3) transparent;
    overscroll-behavior-x: contain;
  }
  .main-nav a {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 40px;
    font-size: 11px;
    white-space: nowrap;
  }
  /* The labeled year control below remains available; keep the nav compact. */
  .archive-nav .year-dropdown, .archive-nav > select { display: none; }
  .page-hero { padding-top: 146px; }
  .works-sticky { top: 110px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 76px; }
  .site-header.nav-ready .perf-toggle-btn { display: none !important; }
  .site-header.nav-ready {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 60px;
    min-height: calc(60px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .site-header.nav-ready .wordmark { grid-column: 1; grid-row: 1; }
  .site-header.nav-ready .header-tools { grid-column: 2; grid-row: 1; }
  .site-header.nav-ready .header-tools::after { display: none; }
  .site-header.nav-ready .mobile-menu-toggle { display: grid; }
  .site-header.nav-ready .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    grid-column: auto;
    grid-row: auto;
    gap: 0;
    max-height: calc(100svh - 76px);
    overflow: auto;
    padding: 10px 18px max(14px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(242, 240, 234, .1);
    border-bottom: 1px solid rgba(168, 200, 255, .22);
    background: rgba(5, 7, 11, .98);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .5);
    scrollbar-width: thin;
  }
  .site-header.nav-ready .main-nav.is-open {
    display: grid;
  }
  .site-header.nav-ready .main-nav > a,
  .site-header.nav-ready .main-nav .archive-nav > a {
    width: 100%;
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(242, 240, 234, .08);
    font-size: 13px;
    letter-spacing: .15em;
  }
  .site-header.nav-ready .main-nav .archive-nav {
    display: contents;
  }
  .site-header.nav-ready .main-nav .archive-nav .year-dropdown,
  .site-header.nav-ready .main-nav .archive-nav > select { display: none; }
  .hero-scene { padding-top: 130px !important; }
  /* Keep the layered hero wordmark crisp on phone GPUs: fractional text blur,
     filter shadows, and the entrance transform can soften thin serif strokes. */
  .hero-copy h1 {
    filter: none !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
  .hero-copy h1 span {
    animation: none !important;
    transform: none !important;
  }
  .hero-copy .outline-word {
    color: rgba(242, 240, 234, .08) !important;
    -webkit-text-stroke: 1.35px rgba(242, 240, 234, .72) !important;
    filter: none !important;
  }
  .cinema-rail-top { top: 100px; }
  .page-hero { padding-top: 100px; }
  .page-wrapper .site-header.nav-ready + .page-shell .page-hero { padding-top: 100px; }
  .mobile-menu-toggle {
    display: none;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(168, 200, 255, .25);
    border-radius: 50%;
    color: var(--paper);
    background: rgba(168, 200, 255, .045);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-toggle span,
  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after {
    position: absolute;
    display: block;
    width: 17px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .18s ease, background-color .18s ease;
  }
  .mobile-menu-toggle span { position: relative; }
  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after { content: ''; left: 0; }
  .mobile-menu-toggle span::before { transform: translateY(-5px); }
  .mobile-menu-toggle span::after { transform: translateY(5px); }
  .mobile-menu-toggle[aria-expanded="true"] span { background: transparent; }
  .mobile-menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }
  .mobile-menu-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .operator-card .operator-avatar,
  .operator-card .operator-avatar.has-img {
    box-sizing: border-box;
    flex: 0 0 80px;
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
    height: 80px !important;
    min-height: 80px;
    max-height: 80px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    align-self: flex-start;
  }
  .operator-card .operator-img {
    display: block;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
  }
  .back-avatar-row .back-avatar-img {
    box-sizing: border-box;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }
  .operator-name, .operator-role { min-width: 0; overflow-wrap: anywhere; }
  .squad-list {
    padding-inline: max(4px, calc((100% - 290px) / 2)) !important;
    scroll-padding-inline: max(4px, calc((100% - 290px) / 2));
  }
  .squad-list > .operator-card {
    flex: 0 0 min(275px, calc(100% - 36px)) !important;
    width: min(275px, calc(100% - 36px));
    min-width: min(230px, calc(100% - 36px)) !important;
    max-width: 275px !important;
    scroll-snap-align: center;
  }
  .hero-scene { padding-top: 130px !important; }
  .cinema-rail-top { top: 100px; }
  .page-title { overflow-wrap: anywhere; line-height: 1; }
  .sync-pill { max-width: 100%; letter-spacing: .05em; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .site-footer, .footer-right { align-items: flex-start; }
  .footer-right { display: flex; gap: 14px; }
  .about-identity, .panel-actions { flex-wrap: wrap; }
  .signal-panel { max-height: none !important; }
  .page-desc { max-width: 100%; }
  .search-box input { font-size: 16px; }
}

@media (max-width: 520px) {
  .wordmark { font-size: 11px; letter-spacing: .12em; }
  .header-tools .ctf-link { display: none; }
  .perf-toggle-btn { padding: 7px 9px; min-width: 44px; }
  .metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-pills { gap: 8px; }
  .filter-pill { flex: 1 1 auto; padding: 10px; }
  .countdown-grid { gap: 6px; }
  .date-row { flex-wrap: wrap; gap: 6px; }
  .event-title { font-size: clamp(23px, 7vw, 32px); }
}

/* Extra-narrow phones: keep controls readable and prevent filter overflow. */
@media (max-width: 360px) {
  .page-shell { width: calc(100% - 24px); }
  .site-header.nav-ready { padding-inline: 12px; }
  .site-header.nav-ready .wordmark { gap: 7px; font-size: 10px; }
  .site-header.nav-ready .wordmark-mark { width: 25px; height: 25px; }
  .site-header.nav-ready .mobile-menu-toggle { flex-basis: 40px; width: 40px; height: 40px; }
  .filter-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .filter-pill { min-width: 0; padding-inline: 8px; font-size: 10px; }
  .filter-pill:last-child { grid-column: 1 / -1; }
}

/* In short landscape viewports, let the hero grow instead of clipping copy. */
@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
  .hero-scene {
    min-height: 640px !important;
    max-height: none !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .scroll-render video, .hero-media video, .signal-stage video { display: none !important; }
}

@media (hover: none) {
  .event-card:hover, .metric-card:hover { transform: none; }
}