/* ==========================================================================
   Responsive layer — loaded last.
   ≥1440  desktop as designed          · 901–1439  the desktop hero scales to fit (see ui/responsive.js)
   ≤1100  tablet: sections lose side-by-side layouts
   ≤900   mobile: stacked hero, bottom tab bar, single columns
   ========================================================================== */

/* the hero is designed on a 1440 px canvas; below that it is scaled to the width */
.hero {
  zoom: var(--hs, 1);
}

@media (max-width: 1100px) {
  section {
    padding: 100px 40px;
  }
  .nav-in {
    padding: 0 28px;
  }
  .links {
    gap: 20px;
  }
  .big {
    font-size: 60px;
  }
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .sec-head .sub {
    text-align: left;
  }
  .phil-stage {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .wwh {
    grid-template-columns: 1fr;
  }
  .wc + .wc {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
    margin-top: 40px;
    padding-top: 40px;
  }
  .co-grid,
  .co:nth-child(even) .co-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .profiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .builder {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .curio {
    grid-template-columns: 1fr;
  }
  .wish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .life-grid {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }
  .life-grid .l,
  .life-grid .intro-p {
    width: auto;
    max-width: 100%;
  }
  .life-img {
    width: 100%;
    max-width: 592px;
  }
  .lede,
  .copy p,
  .connect p {
    width: auto;
    max-width: 100%;
  }
  .phil-stage > div,
  .bcopy {
    min-width: 0;
    max-width: 100%;
  }
  .orbit {
    zoom: 0.85;
  }
  .bcopy .lede {
    width: auto !important;
  }
}

@media (max-width: 900px) {
  /* ---- nav: a bottom tab bar, like an app ---- */
  .links,
  .nav-in .snd {
    display: none;
  }
  .actions {
    gap: 10px;
  }
  .resume {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  /* ---- hero: stacked — words first, then the planet and the hill below ---- */
  .hero {
    --s: 0.74;
    --ty: calc(730px - 466px * var(--s));
    zoom: 1;
    height: calc(var(--ty) + 920px * var(--s));
    background: var(--sky-top, var(--bg));
  }
  .stage {
    left: 0;
    margin: 0;
    transform-origin: 0 0;
    transform: translate3d(calc(50vw - 1068px * var(--s)), var(--ty), 0) scale(var(--s));
  }
  .hero .ov {
    background: linear-gradient(
      180deg,
      rgb(var(--bg-rgb) / var(--ov)) 0,
      rgb(var(--bg-rgb) / 0.35) 52%,
      transparent 70%
    );
  }
  /* the scene starts partway down the stacked hero: fade its top edge into the page colour (no hard seam) ... */
  .stage {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%);
    mask-image: linear-gradient(180deg, transparent 0, #000 28%);
  }
  /* ... and keep a few stars above it so the sky doesn't go flat */
  .hero:before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--ty) + 180px);
    opacity: var(--star-op, 1);
    pointer-events: none;
    background:
      radial-gradient(3px 3px at 12% 9%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 28% 17%, #fff 0 22%, transparent 62%),
      radial-gradient(3px 3px at 47% 6%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 63% 14%, #fff 0 22%, transparent 62%),
      radial-gradient(3.4px 3.4px at 81% 8%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 92% 19%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 8% 31%, #fff 0 22%, transparent 62%),
      radial-gradient(3px 3px at 35% 38%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 58% 33%, #fff 0 22%, transparent 62%),
      radial-gradient(3px 3px at 76% 41%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 95% 47%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 20% 56%, #fff 0 22%, transparent 62%),
      radial-gradient(2.4px 2.4px at 69% 58%, #fff 0 22%, transparent 62%);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .copy {
    left: 22px;
    right: 22px;
    width: auto;
    top: 176px;
  }
  .copy h1 {
    font-size: 52px;
    line-height: 54px;
    margin-top: 18px;
  }
  .copy p.sup {
    font-size: 21px;
    line-height: 28px;
    margin-top: 18px;
  }
  .ctas {
    margin-top: 26px;
    gap: 22px;
    flex-wrap: wrap;
  }
  .annot,
  .annot-arrow,
  .scrollcue {
    display: none;
  }
  .earthchip {
    right: auto;
    left: 22px;
    top: 88px;
    align-items: flex-start;
  }
  .focus {
    left: 22px;
    right: 22px;
    height: auto;
    padding: 18px 0 24px;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .focus b {
    flex-basis: 100%;
  }

  /* ---- sections ---- */
  section {
    padding: 84px 22px;
  }
  .big,
  h2.big,
  .big.ln {
    font-size: 44px !important;
    line-height: 1.06 !important;
  }
  .wc .w {
    font-size: 96px;
  }
  .orbit {
    zoom: 0.62;
    margin: 0 auto;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .co {
    padding-left: 30px;
    margin-top: 72px;
  }
  .co-text h3 {
    font-size: 40px;
  }
  .co-art {
    height: auto;
    aspect-ratio: 560 / 340;
  }
  .co.edu .edu-in {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
  .co.edu h3 {
    font-size: 26px;
  }
  .stat b {
    font-size: 52px;
  }
  .heat {
    padding: 18px 16px;
    overflow-x: auto;
  }
  .heat-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .heat-sum {
    text-align: left;
  }
  #heatSvg {
    min-width: 640px;
  }
  .profiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .bquote {
    font-size: 26px;
  }
  .relief {
    max-width: 440px;
  }
  .ncard {
    flex-basis: 86%;
  }
  .ncard h3 {
    font-size: 26px;
  }
  .ncard .art,
  .soon-box {
    height: 200px;
  }
  .wish-grid,
  .cols {
    grid-template-columns: 1fr !important;
  }

  /* ---- closing scene ---- */
  .connect {
    height: 980px;
  }
  .connect .c {
    top: 84px;
    padding: 0 22px;
    gap: 22px;
  }
  .connect h2 {
    font-size: 56px;
  }
  .connect p {
    width: auto;
    font-size: 17px;
    line-height: 27px;
  }
  .cl {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
  }
  .connect .cstage {
    transform: translate3d(-150px, -70px, 0) scale(0.62);
    transform-origin: 50% 100%;
  }
  footer {
    left: 22px;
    right: 22px;
    bottom: 30px;
  }
  footer .r {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  footer nav {
    flex-wrap: wrap;
    gap: 16px 22px;
  }
  .bridge span {
    font-size: 20px;
    padding: 0 22px;
    text-align: center;
  }

  /* ---- notes pages ---- */
  .post-wrap {
    width: calc(100% - 44px);
    padding-top: 118px;
  }
  .post-title,
  .notes-index .post-title {
    font-size: 40px;
  }
  .post-lede {
    font-size: 20px;
    line-height: 29px;
  }
  .post-art {
    height: 200px;
  }
  .prose p,
  .prose li {
    font-size: 17px;
    line-height: 29px;
  }
  .prose h2 {
    font-size: 30px;
  }
  .prose blockquote {
    font-size: 22px;
    line-height: 31px;
  }
  .author {
    flex-wrap: wrap;
  }
  .pf-in {
    width: calc(100% - 44px);
  }
}

@media (min-width: 560px) and (max-width: 900px) {
  .hero {
    --s: 0.95;
    --ty: calc(800px - 466px * var(--s));
  }
  .copy {
    top: 150px;
  }
  .copy h1 {
    font-size: 76px;
    line-height: 78px;
  }
  .copy p.sup {
    font-size: 26px;
    line-height: 34px;
  }
  .co.edu h3 {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .nav-in .snd {
    display: none;
  }
  .profiles {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .wc .w {
    font-size: 80px;
  }
  .connect h2 {
    font-size: 46px;
  }
}

/* floating sound button: phones and tablets only (desktop keeps it in the header) */
.snd-fab {
  display: none;
}
@media (max-width: 900px) {
  .nav-in .snd {
    display: none;
  }
  .snd-fab {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 55;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: rgb(var(--bg-rgb) / 0.82);
    color: var(--accent);
    box-shadow: 0 8px 26px rgb(0 0 0 / 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.6s var(--ease),
      background-color 0.6s var(--ease),
      color 0.6s var(--ease);
  }
  .snd-fab:active {
    transform: scale(0.92);
  }
  .snd-fab.on {
    background: var(--accent);
    color: var(--bg);
  }
  .snd-fab.on:before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    animation: fab-ring 2.4s var(--ease) infinite;
    pointer-events: none;
  }
}
@keyframes fab-ring {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(1.55);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .snd-fab.on:before {
    animation: none;
  }
}

/* ---- bottom tab bar (phones and tablets) ---- */
.tabbar {
  display: none;
}
@media (max-width: 900px) {
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 56;
    display: flex;
    justify-content: space-between;
    padding: 6px;
    border-radius: 24px;
    background: rgb(var(--bg-rgb) / 0.94);
    border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
    box-shadow: 0 14px 40px rgb(0 0 0 / 0.38);
    animation: tab-in 1s var(--ease) 0.4s both;
  }
  .tabbar a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 7px;
    border-radius: 18px;
    color: var(--muted);
    font: 500 10px var(--sans);
    letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.6s var(--ease);
  }
  .tabbar a:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    opacity: 0;
    transform: scale(0.7);
    transition:
      opacity 0.6s var(--ease),
      transform 0.8s var(--ease);
  }
  .tabbar a .ic,
  .tabbar a span {
    position: relative;
  }
  .tabbar a .ic {
    transition: transform 0.7s var(--ease);
  }
  .tabbar a.on {
    color: var(--accent);
  }
  .tabbar a.on:before {
    opacity: 1;
    transform: none;
  }
  .tabbar a.on .ic {
    transform: translateY(-1px) scale(1.08);
  }
  .tabbar a:active .ic {
    transform: scale(0.88);
  }
  body.in-room .tabbar {
    display: none;
  }
  .snd-fab {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}
@keyframes tab-in {
  from {
    transform: translate3d(0, 120%, 0);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar {
    animation: none;
  }
}

/* notched phones: the page runs edge to edge (viewport-fit=cover), so keep the header clear of the status bar */
header.nav {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (max-width: 900px) {
  .nav-in {
    height: 68px;
  }
  .copy {
    top: calc(176px + env(safe-area-inset-top));
  }
  .earthchip {
    top: calc(84px + env(safe-area-inset-top));
  }
}