/* ═══ THE CASE DOSSIER — the globe band (homepage only; tiers/laws live in pages.css) ═══ */

.globeband{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,460px);gap:3rem;align-items:center}
@media (max-width:900px){.globeband{grid-template-columns:1fr}}
#globe{display:block;margin-inline:auto;cursor:grab;touch-action:none}
#globe:active{cursor:grabbing}
.globe-side .arealinks{display:grid;gap:.7rem;margin-top:1.6rem}
.globe-side .arealinks a{
  display:flex;justify-content:space-between;gap:1rem;text-decoration:none;color:var(--ink);
  background:linear-gradient(176deg,#F3ECDA,#E7DDC6);border-radius:2px;padding:.7rem .9rem;
  box-shadow:0 4px 10px rgba(0,0,0,.32);font:700 .78rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.globe-side .arealinks a span{color:var(--stamp-ink)}
.globe-side .arealinks a:hover{transform:translateX(3px)}


/* ═══ THE COVERAGE MARKER — press it and the files open ═══════════════════════════════
   PROGRESSIVE, NOT HIDDEN. The ten links are in the HTML unconditionally; globe.js adds
   `is-collapsible` on load, and only then does CSS fold them away. With JS off (or before
   it runs) the full list is simply there — the files are the point of the section, so they
   are never content that only a script can reveal. */
.areas-open{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.5rem;cursor:pointer;
  background:linear-gradient(176deg,#F3ECDA,#E7DDC6);color:var(--ink);border:0;border-radius:2px;
  padding:.75rem 1rem;box-shadow:0 4px 10px rgba(0,0,0,.32);
  font:700 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.areas-open:hover{transform:translateX(3px)}
.areas-open:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.areas-open .ao-dot{width:9px;height:9px;border-radius:50%;background:var(--stamp);
  box-shadow:0 0 0 3px rgba(179,64,46,.22)}
.areas-open .ao-n{margin-left:.2rem;padding:.15rem .45rem;border-radius:2px;
  background:rgba(28,26,23,.10);color:var(--ink-soft)}
.areas-open[aria-expanded="true"] .ao-dot{background:var(--lamp);box-shadow:0 0 0 3px rgba(232,185,106,.26)}

/* The folder opening: a height/opacity reveal rather than display:none, so it reads as the
   drawer sliding out that the copy promises. */
.globeband .arealinks.is-collapsible{
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease,margin-top .42s}
.globeband .arealinks.is-collapsible.is-open{max-height:44rem;opacity:1;margin-top:1.2rem}
@media (prefers-reduced-motion:reduce){
  .globeband .arealinks.is-collapsible{transition:none}
}
/* The button is the keyboard route to the same thing the canvas marker does; hide it only
   when there is no script to make it mean anything. */
.areas-open:not(.is-live){display:none}