/* Nexplora — touch, small screens and reduced-motion refinements.
   Loaded after the base and event styles; desktop composition stays intact. */
button, a, summary { -webkit-tap-highlight-color: transparent; }
.button, .text-button, .menu-toggle, .back-top, .dialog-close {
  touch-action: manipulation;
}
.button:active { transform: translateY(1px) scale(.975); transition-duration: .09s; }
.text-button:active, .back-top:active { opacity: .7; }
.dialog-close:active, .menu-toggle:active { background-color: #b296ff20; }
.dialog-close { min-width: 44px; min-height: 44px; }
dialog { overscroll-behavior: contain; }

@media (max-width: 780px) {
  :root { --page: clamp(20px, 4.5vw, 32px); scroll-padding-top: 94px; }
  body { min-width: 280px; }
  .site-header {
    height: calc(76px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(var(--page), env(safe-area-inset-left, 0px));
    padding-right: max(var(--page), env(safe-area-inset-right, 0px));
  }
  .site-header.scrolled { height: calc(68px + env(safe-area-inset-top, 0px)); }
  .brand { min-height: 44px; }
  .brand small { font-size: 8px; letter-spacing: 1.1px; }
  .menu-toggle { width: 48px; height: 48px; margin-right: -8px; }
  #nav-panel {
    gap: 2px;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
  #nav-panel > a { min-height: 48px; font-size: 18px; }
  #nav-panel .button { min-height: 48px; font-size: 12px; }
  .button-small, .text-button, .back-top, #motion-toggle { min-height: 44px; }

  /* Content-sized rows prevent fixed-height overlaps on small phones. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    padding-top: calc(100px + env(safe-area-inset-top, 0px));
    padding-bottom: 20px;
    min-height: 0;
    height: auto;
    max-height: none;
  }
  .hero-topline { grid-row: 1; gap: 16px; font-size: 8px; line-height: 1.6; letter-spacing: .5px; }
  .hero-topline .status-dot { margin-right: 6px; width: 5px; height: 5px; }
  .hero-location { gap: 6px; white-space: nowrap; }
  .hero-title-wrap { grid-row: 2; margin-top: 23px; }
  .hero h1 { font-size: clamp(56px, 19.1vw, 148px); letter-spacing: -.09em; }
  .title-star { right: -.6em; top: -.11em; }
  .hero-title-sub { font-size: 8px; line-height: 1.6; letter-spacing: .65px; margin-top: 13px; gap: 14px; }
  .hero-title-sub span:last-child { white-space: nowrap; }
  #scene-stage {
    grid-row: 3;
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + 2 * var(--page));
    height: clamp(210px, 49vw, 305px);
    margin: -4px calc(-1 * var(--page)) -9px;
    opacity: 1;
  }
  .scene-fallback { width: 70%; left: 15%; top: 7%; }
  .orbit-label { display: none; }
  .hero-copy {
    grid-row: 4;
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 18px;
  }
  .hero-copy > .eyebrow {
    grid-column: 1 / -1;
    max-width: none;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .45px;
    color: #ada2ba;
  }
  .hero-copy h2 { grid-column: 1; font-size: clamp(38px, 6.6vw, 49px); letter-spacing: -2px; margin-top: 10px; }
  .hero-copy > p:not(.eyebrow) { display: none; }
  .hero-copy .button { grid-column: 2; grid-row: 2; margin: 0 0 3px; min-height: 50px; padding: 14px 18px; font-size: 12px; gap: 25px; }
  .hero-date {
    grid-row: 5;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 18px;
    align-items: center;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    backdrop-filter: none;
  }
  .hero-date > .eyebrow { grid-column: 1; font-size: 8px; letter-spacing: .6px; }
  .hero-date > p { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 46px; letter-spacing: -3px; gap: 13px; }
  .hero-date > p > span { font-size: 10px; line-height: 1.5; }
  .hero-date > div { grid-column: 1; border: 0; padding-top: 4px; justify-content: flex-start; gap: 16px; font-size: 9px; letter-spacing: .4px; }
  .hero-date > div > span:last-child { font-size: 13px; }
  .hero-bottom { grid-row: 6; position: relative; inset: auto; margin-top: 18px; min-width: 0; gap: 12px; }
  .scroll-cue { min-height: 44px; font-size: 9px; letter-spacing: .4px; gap: 10px; }
  .scroll-cue > span { height: 35px; width: 26px; flex: 0 0 auto; }
  .hero-bottom #motion-toggle { font-size: 9px; padding-right: 0; white-space: nowrap; }
  .hero-host { display: none; }
  .marquee { margin-top: 0; padding: 15px 0; }
  .marquee-track { font-size: 30px; gap: 26px; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-meta { gap: 18px; align-items: flex-start; margin-bottom: 32px; }
  .section-meta > .eyebrow, .faq-intro > .eyebrow { font-size: 10px; letter-spacing: .7px; }
  .section-meta .micro { font-size: 8px; line-height: 1.6; letter-spacing: .5px; text-align: right; }
  .section-meta .micro span { margin-left: 8px; }
  .intro-main h2 { font-size: clamp(34px, 6.5vw, 43px); }
  .intro-main > p { font-size: 14px; line-height: 1.8; }
  .chapter { min-height: 216px; }
  .chapter-top { font-size: 9px; letter-spacing: .6px; }
  .chapter-copy h3 { font-size: clamp(23px, 4.5vw, 28px); }
  .chapter-copy p { font-size: 12px; line-height: 1.65; }
  .countdown-section { padding-top: 34px; padding-bottom: 36px; }
  .countdown-intro > .eyebrow { font-size: 9px; line-height: 1.6; letter-spacing: .5px; max-width: 200px; }
  .countdown-intro h2 { font-size: 20px; }
  .countdown { margin-top: 28px; gap: 8px; }
  .countdown span { font-size: 9px; letter-spacing: .8px; }
  .countdown strong { font-size: clamp(37px, 8.8vw, 58px); }
  .pill { font-size: 8px; line-height: 1.5; padding: 7px 10px; letter-spacing: .3px; }
  .section-heading > p, .partner-heading > p, .venue-copy > p:not(.venue-name) { font-size: 14px; line-height: 1.8; }
  .partner-caption { font-size: 9px; letter-spacing: .3px; line-height: 1.7; }
  .partner-caption > span:last-child { flex-shrink: 0; }
  .orbit-word { font-size: 8px; }
  .destination-pin > span:last-child, .destination-bottom { font-size: 9px; letter-spacing: .8px; }
  .venue-copy > .button { min-height: 50px; font-size: 12px; }
  .faq-section { padding-top: 0; }
  .faq-list summary { min-height: 60px; font-size: 15px; line-height: 1.5; padding: 18px 0; }
  .faq-list details > p { font-size: 14px; line-height: 1.8; }
  .faq-list .text-button { font-size: 12px; }
  .closing-content > .eyebrow { font-size: 9px; line-height: 1.7; letter-spacing: .7px; }
  .closing-content h2 { font-size: clamp(39px, 8.2vw, 60px); }
  .closing-actions { flex-wrap: wrap; }
  .closing-actions .button { min-height: 50px; font-size: 12px; gap: 22px; padding: 14px 17px; }
  .closing-note { font-size: 10px; line-height: 1.6; }
  .site-footer { padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); }
  .footer-top > .brand small { font-size: 7px; letter-spacing: .8px; }
  .footer-top > p { font-size: 11px; line-height: 1.8; }
  .back-top { font-size: 9px; letter-spacing: .2px; }
  .footer-wordmark { max-width: 100%; font-size: 18.5vw; }
  .footer-bottom { font-size: 10px; line-height: 1.6; gap: 16px; }
  .footer-bottom > a { display: inline-flex; align-items: center; min-height: 44px; }
  .toast { bottom: max(20px, env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 32px); font-size: 13px; line-height: 1.5; padding: 14px 18px; }
  dialog {
    width: calc(100% - 24px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dialog-close { top: 10px; right: 10px; }
  .dialog-copy { padding: 28px 24px; }
  .dialog-copy > .eyebrow { font-size: 9px; letter-spacing: .8px; }
  .dialog-copy > p { font-size: 14px; }
  .dialog-copy .button { width: 100%; }
  .motion-ready .reveal { transform: translateY(18px); transition-duration: .55s; }
  .motion-ready .reveal.is-visible { transform: translateY(0); }
}

@media (max-width: 480px) {
  .hero-topline { font-size: 8px; gap: 12px; }
  .hero-topline .crosshair { display: none; }
  .hero-title-wrap { margin-top: 20px; }
  .hero-title-sub { font-size: 7px; letter-spacing: .25px; gap: 8px; }
  #scene-stage { height: clamp(182px, 54vw, 244px); }
  .hero-copy { display: block; }
  .hero-copy > .eyebrow { font-size: 8px; letter-spacing: .25px; }
  .hero-copy h2 { font-size: clamp(36px, 10.7vw, 46px); letter-spacing: -1.8px; margin-top: 9px; }
  .hero-copy .button { margin-top: 17px; min-height: 48px; width: 100%; font-size: 12px; }
  .hero-date { margin-top: 22px; gap: 0 10px; }
  .hero-date > .eyebrow { font-size: 7px; letter-spacing: .3px; }
  .hero-date > p { font-size: clamp(36px, 10.8vw, 47px); letter-spacing: -2.5px; gap: 9px; }
  .hero-date > p > span { font-size: 9px; }
  .hero-date > div { font-size: 8px; gap: 8px; }
  .hero-bottom { margin-top: 15px; }
  .scroll-cue { font-size: 8px; }
  .hero-bottom #motion-toggle { font-size: 8px; }
  .section-meta .micro { font-size: 8px; max-width: 120px; }
  .chapter { padding: 18px; grid-template-columns: 1.12fr 1fr; gap: 0 4px; }
  .chapter-copy p { font-size: 12px; }
  .chapter-copy h3 { font-size: 23px; }
  .chapter-art { height: 160px; }
  .countdown-intro { align-items: flex-start; gap: 16px; }
  .countdown-intro > .eyebrow { font-size: 8px; max-width: 145px; }
  .countdown-intro h2 { font-size: 19px; }
  .countdown span { font-size: 8px; letter-spacing: .5px; }
  .partner-caption { flex-direction: column; gap: 10px; }
  .partner-caption > span:first-child { max-width: none; }
  .closing-actions { flex-direction: column; }
  .closing-actions .button { width: 100%; }
  .footer-top { column-gap: 10px; }
  .footer-top > .brand { font-size: 16px; gap: 8px; }
  .footer-top > .brand .brand-symbol { width: 32px; height: 22px; }
  .footer-top > .brand small { font-size: 6px; letter-spacing: .2px; }
  .back-top { font-size: 8px; gap: 8px; }
  .footer-bottom { column-gap: 12px; font-size: 9px; }
  .footer-bottom > span:nth-child(2) { margin-left: 0; }
}

@media (max-width: 359px) {
  :root { --page: 18px; }
  .hero-topline { align-items: flex-start; }
  .hero-topline > span:first-child { max-width: 140px; }
  .hero-location { padding-top: 1px; font-size: 7px; }
  .hero-title-sub { font-size: 6.5px; letter-spacing: 0; }
  .hero-copy > .eyebrow { max-width: 260px; }
  .hero-date { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .hero-date > .eyebrow { max-width: 110px; line-height: 1.6; }
  .hero-date > div { font-size: 7px; }
  .hero-date > div > span:last-child { display: none; }
  .chapter { display: block; }
  .chapter-art { height: 170px; }
  .chapter-copy { padding-bottom: 5px; }
  .chapter-copy p { max-width: 100%; }
  .countdown strong { font-size: 36px; }
  .countdown > b { font-size: 20px; }
  .section-meta { gap: 10px; }
  .section-meta > .eyebrow { font-size: 9px; }
  .footer-top > .brand small { font-size: 5.5px; }
}

@media (max-height: 500px) and (min-width: 481px) and (max-width: 950px) and (orientation: landscape) {
  .hero { min-height: 0; height: auto; max-height: none; }
  #scene-stage { height: 220px; }
  #nav-panel { max-height: calc(100dvh - 72px); }
  .dialog-logo { height: 100px; }
  .dialog-copy { padding-top: 22px; }
}

/* Wide phones in landscape retain the compact header and compose the
   sculpture next to the introduction rather than overflowing a short view. */
@media (min-width: 781px) and (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  :root { --page: 30px; }
  .site-header { height: 70px; }
  .site-header.scrolled { height: 64px; }
  .brand { font-size: 18px; }
  .brand small { font-size: 7px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 48px; height: 48px; }
  .menu-toggle span { height: 1px; width: 26px; background: #ddd0ee; transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  #nav-panel { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; padding: 18px var(--page); gap: 0; background: #0a080ffa; overflow: auto; border-bottom: 1px solid var(--line); }
  #nav-panel.is-open { display: flex; }
  #nav-panel > a { min-height: 44px; font-size: 16px; }
  #nav-panel .button { align-self: flex-start; min-height: 44px; margin-top: 8px; }
  .hero { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 30px; padding-top: 92px; padding-bottom: 22px; }
  .hero-topline { grid-column: 1 / -1; font-size: 8px; }
  .hero-title-wrap { grid-column: 1 / -1; margin-top: 20px; }
  .hero h1 { font-size: 18.5vw; }
  .hero-title-sub { font-size: 8px; margin-top: 14px; }
  #scene-stage { grid-column: 2; grid-row: 3 / 5; position: relative; top: auto; right: auto; width: 100%; height: 305px; }
  .scene-fallback { width: 92%; left: 4%; top: 21%; }
  .hero-copy { grid-column: 1; grid-row: 3; position: relative; bottom: auto; left: auto; margin-top: 26px; }
  .hero-copy > .eyebrow { font-size: 8px; }
  .hero-copy h2 { font-size: 40px; margin-top: 10px; }
  .hero-copy > p:not(.eyebrow) { display: none; }
  .hero-copy .button { min-height: 46px; padding: 12px 18px; margin-top: 18px; }
  .hero-date { grid-column: 1; grid-row: 4; position: relative; bottom: auto; right: auto; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 16px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
  .hero-date > .eyebrow { grid-column: 1; font-size: 7px; }
  .hero-date > p { grid-column: 2; grid-row: 1 / 3; font-size: 40px; letter-spacing: -2px; margin: 0; }
  .hero-date > p > span { font-size: 9px; }
  .hero-date > div { grid-column: 1; border: 0; padding-top: 4px; font-size: 8px; }
  .hero-bottom { grid-column: 1 / -1; grid-row: 5; position: relative; inset: auto; margin-top: 20px; }
  .hero-host, .orbit-label { display: none; }
  .scroll-cue, #motion-toggle { min-height: 44px; font-size: 9px; }
}

@media (hover: none) {
  .button:hover { transform: none; }
  .button:active { transform: scale(.975); }
  .button:hover span { transform: none; }
  .chapter:hover { border-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .button:active, .motion-ready .reveal, .motion-ready .reveal.is-visible { transform: none; }
  .motion-ready .reveal { transition: none; }
}