/* Breakpoints, in order:
     ≤1100px  desktop → small laptop / large tablet
     ≤900px   tablet  → large phone
     ≤520px   phone

   The solar-system `.system` box uses aspect-ratio: 16/9 by default so that
   preserveAspectRatio="xMidYMid meet" fills the container without gutters. At
   ≤520px the frame is taller (16:11) so the phone layout has more vertical
   space; `meet` then scales by width with subtle gutters above/below the art.

   SVG <text> font-size is in viewBox user-units, so it shrinks proportionally
   as the container shrinks. We bump font-sizes per breakpoint to keep labels
   readable on smaller viewports. */

/* ───── tablet ≤1100 ───── */
@media (max-width: 1100px) {
  section { padding: 100px 40px; }
  .hero { padding: 120px 40px 80px; }
  .solar-head { gap: 24px; }
  .system .hud { font-size: 9px; }
  .system .hud.tl, .system .hud.bl { left: 16px; }
  .system .hud.tr, .system .hud.br { right: 16px; }

  /* compensate for the SVG rendering smaller — keep labels legible */
  .planet-label        { font-size: 13px; }
  .planet-label.earth  { font-size: 14px; }
  .planet-label.sol    { font-size: 15px; }
  .rocker-pin .pin-label { font-size: 16px; }
  .rocker-pin .pin-paren { font-size: 13px; }
}

/* ───── small tablet / large phone ≤900 ───── */
@media (max-width: 900px) {
  .topbar { padding: 14px 20px; gap: 12px; }
  .topbar .mono { font-size: 9px; }
  .topbar > *:nth-child(3) { display: none; }

  section { padding: 80px 24px; }
  .hero { padding: 100px 24px 60px; }
  .hero-eyebrow { gap: 14px; flex-wrap: wrap; }
  .hero-eyebrow .line { max-width: 60px; }
  .hero-sub { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .hero-sub .col.right { text-align: left; justify-self: start; }
  .hero-sub .center { text-align: left; }
  .hero h1 .cheer { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.5em; }

  .quote { padding: 120px 24px; }
  .quote::before, .quote::after { height: 50px; }
  .quote::before { top: 50px; }
  .quote::after { bottom: 50px; }

  .solar { padding: 100px 24px 120px; }
  .solar-head { grid-template-columns: 1fr; gap: 20px; }
  .solar-head .meta { text-align: left; justify-self: start; }
  /* keep .system aspect-ratio at default 16/9 — see file header */
  #systemSvg .planet-label:not(.earth):not(.sol) { display: none; }
  .planet-label.earth  { font-size: 18px; }
  .planet-label.sol    { font-size: 18px; }
  .rocker-pin .pin-label { font-size: 22px; }
  .rocker-pin .pin-paren { font-size: 18px; }

  .stats { grid-template-columns: repeat(2, 1fr); padding: 40px 0; }
  .stats .cell { padding: 28px 20px; }
  .stats .num { font-size: 44px; }

  .ledger { padding: 100px 24px; }
  .ledger ul { margin-top: 24px; }
  .ledger li { grid-template-columns: 36px 1fr; gap: 16px; padding: 18px 0; }
  .ledger li .body { font-size: 15px; }
  .ledger li .tag { display: none; }

  footer { grid-template-columns: 1fr; padding: 60px 24px 40px; gap: 28px; }
  footer .right { text-align: left; }
  footer .skull-row { justify-content: flex-start; }

  .deco svg { max-width: 56px; max-height: 56px; }
}

/* ───── phone ≤520 ───── */
@media (max-width: 520px) {
  .topbar > *:nth-child(1) .mono,
  .topbar .mono { font-size: 8px; letter-spacing: 0.12em; }
  .hero h1 { font-size: clamp(40px, 13vw, 80px); }

  .stats { grid-template-columns: 1fr 1fr; }
  .stats .num { font-size: 36px; }

  /* corner HUDs — pulled tighter against the corners; the default 32px
     horizontal offset floats them too far into the box at this size. */
  .system .hud { font-size: 7px; }
  .system .hud.tl, .system .hud.tr { top: 12px; }
  .system .hud.bl, .system .hud.br { bottom: 12px; }
  .system .hud.tl, .system .hud.bl { left: 14px; }
  .system .hud.tr, .system .hud.br { right: 14px; }

  /* Taller frame than desktop 16:9 — more breathing room on narrow phones. */
  .system {
    aspect-ratio: 16 / 11;
  }

  /* drop Jupiter (planet, label, orbit) so the inner system can fill the
     box — js/orbit.js also tightens the viewBox at this breakpoint to
     zoom in on what's left. */
  #systemSvg .jupiter { display: none; }

  .planet-label.earth  { font-size: 22px; }
  .planet-label.sol    { font-size: 20px; }

  /* pin font-sizes only — actual y-positions and path d= are set per
     breakpoint by js/orbit.js (setAttribute on the SVG nodes), since CSS
     `y:` / `d:` properties have inconsistent browser support. */
  .rocker-pin .pin-label { font-size: 18px; letter-spacing: 0.08em; }
  .rocker-pin .pin-paren { font-size: 13px; letter-spacing: 0.12em; }

  .deco svg { max-width: 38px; max-height: 38px; }
}