/* /earthquake/ - the globe section. Everything else on the page (.hud, .seg,
   .stamp, .bodypanel, .chapter, .upnext) is the site's own, unchanged. */
.quake{position:relative;height:100svh;min-height:540px;background:#000;overflow:hidden;
  touch-action:none;cursor:grab}
.quake.dragging{cursor:grabbing}
.quake > canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.quake .nowebgl{display:none}

/* No WebGL2: a full-height black box reads as a broken page, so collapse the
   section to a band and let the message carry it. Same treatment as /space/. */
.quake.dead{height:auto;min-height:0;cursor:auto;
  padding:clamp(110px,14vw,180px) var(--pad) clamp(40px,6vw,70px);
  background:radial-gradient(120% 80% at 50% 0,rgba(196,150,74,.14),transparent 60%),#000}
.quake.dead > canvas,.quake.dead .hud,.quake.dead .quakepanel{display:none}
.quake.dead .nowebgl{display:block;max-width:52ch;font-size:12px;line-height:1.9;color:var(--dim)}

.stamp.sm{font-size:clamp(12px,1.2vw,15px);margin-top:14px;color:#d8d8d8}
.stamp.sm small{letter-spacing:.12em;text-transform:none;font-size:10px}

.depthkey{position:absolute;left:var(--pad);bottom:clamp(120px,15vw,170px);
  display:flex;gap:14px;list-style:none;margin:0;padding:0;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.depthkey li{display:flex;align-items:center;gap:6px}
.depthkey i{width:8px;height:8px;border-radius:50%;display:block}

/* the feed is a network call on a page that is otherwise instant, so say so */
.quake[data-loading] .hud-note{opacity:.5}

@media(max-width:760px){
  .quake{height:86svh}

  /* On a phone the globe sits behind the text rather than beside it, so every
     label needs its own shadow - dim grey on a lit ocean is unreadable. */
  .quake .hud-tl,.quake .col-h,.quake .hud-note,.quake .depthkey{
    text-shadow:0 1px 14px rgba(0,0,0,.92),0 0 4px rgba(0,0,0,.8)}
  .quake .stamp small{color:#c8cdd6}
  .quake .hud-note{color:#b6bcc6}

  /* Two rows of pill buttons at desktop size ate half the screen. */
  .quake .seg{border-radius:8px}
  .quake .seg button{padding:8px 9px;font-size:8.5px;letter-spacing:.1em}
  .quake .seg.tight button{padding:8px 8px}
  .quake .hud-ctl{gap:10px}
  .quake .ctl-right{gap:8px}

  /* Anchored under the stamps rather than above the controls: the control block
     is two wrapping rows and its height moves with the viewport, so anything
     measured from the bottom lands on top of it sooner or later. The place name
     is clamped to one line so the block above has a fixed height. */
  .quake .stamp.sm small{display:block;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:62vw}
  .depthkey{top:176px;bottom:auto;gap:9px;font-size:7.5px;letter-spacing:.1em}
  .quakepanel{top:auto;bottom:clamp(150px,24vw,190px)}
}