/* Desktop: each site section is a separate full-browser-screen view.
   Mobile/tablet widths <=850px retain the original continuous scroll layout. */
@media (min-width:851px) {
  html, body {
    height:100%;
    overflow:hidden !important;
    scroll-behavior:auto;
    scroll-snap-type:none !important;
  }
  body { height:100dvh; min-height:0; }
  main {
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }
  main > section {
    width:100%;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:100dvh;
    overflow:hidden;
    scroll-snap-align:none !important;
  }
  main > section:not(.page-active) { display:none !important; }
  .footer { display:none; }
  .hero { display:block; }
  .hero-stage { position:absolute; inset:0; }
  .hero-image { object-fit:contain; }
  .portal-demo {
    padding:clamp(78px,10vh,105px) 20px clamp(14px,3vh,30px);
  }
  .portal-demo-panel {
    max-height:calc(100dvh - 105px);
    overflow:auto;
    padding:clamp(20px,4vh,54px) clamp(22px,5vw,65px);
  }
  .oracles {
    padding:clamp(82px,10vh,115px) 22px clamp(18px,4vh,45px);
  }
  .oracles-content { max-height:calc(100dvh - 120px); overflow:auto; }
  .inspiration { padding:clamp(85px,10vh,125px) 18px 28px; }
  .about, .collections { min-height:0; }
  .about { grid-template-columns:46% 54%; }
  .about-copy {
    max-height:100dvh;
    overflow:auto;
    padding:clamp(82px,11vh,125px) clamp(25px,5vw,105px) 25px;
  }
  .about-visual, .collection-visual { min-height:0; height:100%; }
  .collections { grid-template-columns:50% 50%; }
  .collection-copy {
    max-height:100dvh;
    overflow:auto;
    padding:clamp(84px,11vh,126px) clamp(25px,5vw,105px) 25px;
  }
  .contact {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(80px,10vh,120px) 24px 24px;
  }
  .contact-inner { max-height:calc(100dvh - 120px); overflow:auto; }
}
/* Keep every element readable when a desktop browser is unusually short. */
@media (min-width:851px) and (max-height:650px) {
  .portal-demo-panel { padding:15px 28px; }
  .portal-demo h2 { font-size:clamp(48px,11vh,72px); margin:5px 0; }
  .portal-demo-subtitle { font-size:clamp(19px,3.8vh,28px); margin-bottom:10px; }
  .portal-demo-description { margin-bottom:9px; }
  .portal-demo-return { margin-top:10px; }
  .oracles { padding-top:75px; padding-bottom:10px; }
  .oracles-content { padding:12px 30px; }
  .brush-heading { font-size:clamp(46px,11vh,80px); }
  .about-copy, .collection-copy { padding-top:75px; padding-bottom:12px; }
  .inspiration { padding-top:75px; padding-bottom:10px; }
  .contact { padding-top:75px; padding-bottom:10px; }
  .script-kicker { font-size:clamp(30px,7vh,46px); }
}