/* ==========================================================================
   Responsive layer. The 3D world re-lays itself out for portrait screens
   (see layout() in scene.js); this file re-flows the content layer.
   ========================================================================== */

/* large desktop */
@media (min-width: 1680px) {
  body { font-size: 17px; }
  .env--split .col { width: min(560px, 34vw); }
}

/* laptop */
@media (max-width: 1180px) {
  .nav__links a { padding: 8px 9px; }
  .log__msg { display: none; }
}

/* tablet & below: hamburger nav, compact log */
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; margin-right: -10px;
    position: relative; z-index: 41;
  }
  .nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--paper); transition: transform 0.5s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .log { right: 10px; }
  .log__list { gap: 18px; }
  .log__hash, .log__msg { display: none; }

  .env--split .col, .about__grid, .stage { width: min(520px, 100%); }
  .env--contact { grid-template-columns: 1fr; row-gap: 48px; padding-right: 34px; }
  .contact__head { padding-bottom: 0; }
}

/* portrait / mobile: the world is centred, text sits on readable ground below it */
@media (max-width: 768px), (max-aspect-ratio: 9/10) {
  .env { padding-left: 22px; padding-right: 34px; }
  .env--split, .env--about { align-items: flex-end; min-height: auto; padding-top: 70vh; padding-bottom: 14vh; }
  .env--split .col::before,
  .env--about .about__grid::before,
  .stage::before,
  .contact__head::before {
    inset: -10vh -34px -6vh -22px;
    background: linear-gradient(to bottom, rgba(4, 5, 10, 0) 0%, rgba(4, 5, 10, 0.86) 14vh, rgba(4, 5, 10, 0.9) 100%);
  }
  .stage { justify-content: flex-end; padding-bottom: 14vh; }
  .process__intro { justify-content: flex-start; padding-top: 4vh; }
  .process__hud { bottom: auto; top: calc(var(--nav-h) + 6px); }
  .about__body, .about__values { margin-left: 0; }
  .env--contact { padding-top: 58vh; }
  .hero__meta span:last-child { display: none; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  .hero__foot { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .hero__lede, .lede { font-size: 15.5px; }
  .scroll-cue { display: none; }
  .panel__inner { grid-template-columns: 1fr; padding: 26px 20px 22px; }
  .field--half { grid-column: 1 / -1; }
  .sheet {
    inset: auto 0 0 0; width: 100%; height: min(58vh, 560px);
    border-left: 0; border-top: 1px solid var(--line);
    transform: translateY(100%);
  }
  .sheet__kicker { margin-top: 18px; padding-top: 0; }
  .checkout { bottom: 18px; max-width: calc(100vw - 40px); white-space: nowrap; }
  .foot { flex-direction: column; gap: 10px; }
}

@media (max-width: 430px) {
  .brand__name { font-size: 10.5px; letter-spacing: 0.1em; }
  .hero__title { font-size: clamp(2.1rem, 11.2vw, 3.2rem); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  h2 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .index__item { grid-template-columns: 6.5ch 1fr auto; font-size: 14.5px; }
}

@media (max-width: 360px) {
  .env { padding-left: 16px; padding-right: 28px; }
  .brand__name { display: none; }
  .hero__title { font-size: 2rem; }
  .eyebrow { letter-spacing: 0.1em; gap: 8px; }
  .hero__meta { display: none; }
  .btn { padding: 14px 16px; }
}

/* short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .env--hero { padding-bottom: 5vh; }
  .hero__title { font-size: clamp(2rem, 6vw, 3.6rem); }
  .hero__meta, .log { display: none; }
}