/* ---------- Responsive + low-power tweaks (loaded last) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

/* ===== Tablets in portrait: fill the hero instead of leaving it empty ===== */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .hero__title { top: clamp(120px, 17svh, 200px); font-size: clamp(80px, 19vw, 200px); }
  .hero__copy {
    top: auto; bottom: clamp(110px, 17svh, 200px);
    left: 4.5vw; max-width: 340px; font-size: 15px;
  }
  .hero__lead { margin-left: 0; }
  .hero__meta { top: auto; bottom: clamp(110px, 17svh, 200px); right: 4.5vw; }
  .hero__stone { top: 38%; }
}

/* ===== Phones ===== */
@media (max-width: 640px) {
  /* the hero stone is the star on a small screen: bigger, with the title sitting behind it */
  .hero__title { top: 104px; font-size: 27vw; }
  .hero__stone { top: 46%; width: 128%; margin-left: -64%; }
  .hero__copy { bottom: 118px; font-size: 14px; }
  .hero__meta { bottom: 262px; }
  .scroll-cue { bottom: 16px; }

  .jungle__title { font-size: clamp(44px, 14vw, 64px); }
  .me__copy { font-size: 16px; }
  .lab__title { font-size: clamp(40px, 12.5vw, 56px); top: 96px; }
  .lab__about { bottom: 24px; }
  .lab__about-body { font-size: 12px; }
  .lab__card { width: min(250px, 72vw); }
  .why__bar span:nth-child(2), .why__bar span:nth-child(3) { display: none; }
  .stack__title { font-size: clamp(32px, 9.4vw, 44px); }
  .foot { padding-left: 16px; padding-right: 16px; }
  .foot__title { font-size: clamp(38px, 11.5vw, 60px); }
  .foot__bar { gap: 10px 18px; font-size: 11px; }
  .foot__social { flex-wrap: wrap; gap: 12px; }
}

/* ===== Short landscape screens (phones turned sideways) ===== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__title { top: 80px; font-size: 20vh; }
  .hero__copy, .hero__meta { display: none; }
  .scroll-cue, .jungle__follow, .lab__threads, .me__facts, .lab__time { display: none; }
  .me__copy { bottom: 4vh; }
  .why__pin { padding-top: 70px; padding-bottom: 46px; }
  .why__title { font-size: 7vh; }
  .why__copy { font-size: 12px; }
}

/* ===== Big screens: keep line lengths sensible ===== */
@media (min-width: 1800px) {
  .hero__copy { max-width: 300px; font-size: 16px; }
}

/* ===== Lite mode: phones, tablets and weaker laptops (set by the inline script in index.html) ===== */
html.lite .bg__noise { display: none; }                         /* a 200%-size noise layer = a lot of GPU memory */
html.lite .bg__blob { filter: blur(44px); opacity: .75; will-change: auto; }
html.lite .bg__cursor { display: none; }
html.lite .sparkle:nth-child(n + 4) { display: none; }
html.lite .stack::after { display: none; }                      /* scanline overlay with a blend mode */
html.lite .hero__meta,
html.lite .mobile-menu,
html.lite .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lite .mobile-menu { background: rgba(255, 255, 255, .96); }
html.lite .hero__stone { filter: none; }                        /* drop-shadow on a big image is costly while it floats */
html.lite .foot__canvas, html.lite .me__canvas { filter: none; }
html.lite .lab__stage canvas { image-rendering: auto; }

/* never animate things the user can't see */
@media (prefers-reduced-motion: reduce) {
  .sparkle, .stack__sticker, .dot { animation: none !important; }
}

/* without Lenis (touch devices) anchor links still glide */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Touch: finger-sized tap targets (padding + equal negative margin, so the layout doesn't move) ===== */
@media (pointer: coarse) {
  .foot__bar a, .foot__mail, .foot__cta, .nav__logo { padding: 10px 6px; margin: -10px -6px; }
  .flex-carousel__link { padding: 12px 16px; }
  .lab__card-link { padding: 10px 0; }
  .lab__marker::after { inset: 3px; }
  .lab__marker { box-shadow: 0 0 0 10px transparent; }       /* widens the hit area without changing the look */
  .loader__cut { padding: 10px 14px; }
}
/* the project reel never needs a mouse cursor on touch */
@media (hover: none) { .flex-carousel { cursor: auto; } }