/* =====================================================================
   All Around Space Agency — hero wordmark + observatory
   Extends style.css. Uses the existing tokens; adds no new palette.
   ===================================================================== */

/* ---------- hero ---------- */
.hero-sky{
  padding-block: clamp(48px,11vh,120px) clamp(30px,6vh,70px);
  text-align:center;
  position:relative;
}
.hero-sky .eyebrow{display:block;margin-bottom:clamp(20px,3vh,34px)}

.popwrap{
  perspective: 1100px;
  perspective-origin: 50% 42%;
  margin-inline:auto;
  width:max-content;
  max-width:100%;
}
#pop{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  font-family:var(--ff-body);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-0.012em;
  line-height:.92;
  font-size:clamp(2.3rem,9.3vw,7rem);
  white-space:nowrap;
}
#pop .pl{
  position:absolute;
  inset:0;
  display:block;
  color:#6E5420;                 /* the extruded flank */
  -webkit-user-select:none;user-select:none;
}
#pop .pl.face{
  position:relative;
  color:var(--brass-soft);
  text-shadow:
    0 0 28px rgba(228,197,120,.34),
    0 0 90px rgba(228,197,120,.16);
}
.agency-line{
  margin-top:clamp(14px,2.4vh,26px);
  font-family:var(--ff-mono);
  font-size:clamp(.72rem,1.5vw,1rem);
  letter-spacing:.62em;
  text-indent:.62em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-sky .lede{
  margin:clamp(26px,4vh,42px) auto 0;
  max-width:60ch;
  text-align:center;
  text-shadow:0 2px 18px rgba(6,9,18,.95),0 0 42px rgba(6,9,18,.8);
}
.hero-sky .sig,.hero-sky .skynote{text-shadow:0 2px 16px rgba(6,9,18,.95)}
.hero-sky .sig{
  margin-top:1.4rem;
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}

/* the strip that tells you the sky behind the type is real */
.skynote{
  margin-top:clamp(30px,5vh,52px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem 1.6rem;
  font-family:var(--ff-mono);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
}
.skynote b{color:var(--brass);font-weight:500}

/* ---------- observatory ---------- */
.obs-head{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:64ch;
  margin-bottom:clamp(26px,4vh,44px);
}
.obs-head h2{font-size:clamp(1.8rem,4vw,2.9rem)}

.glasswrap{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(20,28,54,.9), rgba(6,9,18,.96));
  overflow:hidden;
}
#skyglass{
  display:block;
  width:100%;
  height:clamp(320px,52vh,560px);
  cursor:grab;
  touch-action:none;
}
.glasstag{
  position:absolute;
  left:14px;top:12px;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dim);
  pointer-events:none;
}
.glasshint{
  position:absolute;
  right:14px;bottom:12px;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  pointer-events:none;
}

.obs-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
}
.obs-controls .grp{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-right:1.1rem;
}
.obs-controls .glabel{
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  margin-right:.3rem;
}
.chip{
  font-family:var(--ff-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:2px;
  padding:.42rem .74rem;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--brass-soft);border-color:var(--brass)}
.chip[aria-pressed="true"]{
  color:var(--ink);
  background:var(--brass-soft);
  border-color:var(--brass-soft);
}
.chip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.readout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin-top:1rem;
  background:var(--line);
  border:1px solid var(--line);
}
.readout div{
  background:var(--ink-2);
  padding:.85rem 1rem;
}
.readout dt{
  font-family:var(--ff-mono);
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
}
.readout dd{
  font-family:var(--ff-mono);
  font-size:1rem;
  color:var(--brass-soft);
  font-variant-numeric:tabular-nums;
  margin-top:.3rem;
}
.cat-credit{
  margin-top:1rem;
  font-family:var(--ff-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--dim);
  line-height:1.7;
}

@media (max-width:640px){
  .obs-controls .grp{margin-right:.5rem}
  #pop{letter-spacing:-0.02em}
}
@media (prefers-reduced-motion:reduce){
  #pop{transform:none!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the 8-item nav wraps between tablet and desktop — tighten it there */
@media (min-width:641px) and (max-width:1200px){
  .bar nav{gap:.9rem}
  .bar nav a{font-size:.64rem;letter-spacing:.1em}
  .mark img{width:42px;height:42px}
  .mark{font-size:.68rem;letter-spacing:.12em}
}

/* ---------- the crest, rebuilt as geometry ---------- */
.crest{
  position:relative;
  width:min(clamp(300px,54vw,600px), 92vw);
  aspect-ratio:1/1;
  margin:0 auto clamp(6px,1.6vh,18px);
}
.crest .crestcv{display:block;width:100%;height:100%}

/* the name now plays second to the mark */
#pop{font-size:clamp(1.5rem,5.4vw,3.5rem)}
#pop .pl.face{
  text-shadow:0 0 18px rgba(228,197,120,.30),0 0 60px rgba(228,197,120,.14);
}
.agency-line{font-size:clamp(.6rem,1.15vw,.78rem);letter-spacing:.5em;text-indent:.5em}

.crestnote{
  margin-top:.7rem;
  font-family:var(--ff-mono);
  font-size:clamp(.56rem,1.05vw,.68rem);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--dim);
  text-shadow:0 2px 16px rgba(6,9,18,.95);
}

/* ---------- the map panels want room ---------- */
.glasswrap.wide,
section .shell > .glasswrap{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(96vw,1680px);
}
#skyglass,#spaceglass{
  display:block;
  width:100%;
  height:clamp(440px,78vh,900px);
  cursor:grab;
  touch-action:none;
}
.glasswrap.wide{margin-inline:auto}

/* ---------- one star's history ---------- */
.starcard{
  margin-top:1rem;
  border:1px solid var(--line-strong);
  border-left:2px solid var(--brass);
  background:var(--ink-2);
  padding:clamp(16px,2.4vw,26px);
}
.sc-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.sc-head h3{font-family:var(--ff-display);font-size:clamp(1.3rem,3vw,2rem);font-weight:500}
.sc-sp{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);
}
.sc-kind{margin-top:.35rem;color:var(--muted);font-size:1.02rem}
.sc-grid{margin-top:1rem}
.sc-fate{
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--parchment);font-size:1.02rem;max-width:70ch;
}
.scale-note{
  margin-top:1.1rem;max-width:72ch;color:var(--muted);
  font-size:1.02rem;line-height:1.7;
}
.scale-note b{color:var(--brass-soft);font-weight:500}

.nadir-chip{border-color:var(--brass);color:var(--brass-soft)}
.nadir-chip:hover{background:var(--brass-soft);color:var(--ink)}
.nadir-note{
  margin-top:.7rem;max-width:64ch;color:var(--dim);
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;line-height:1.7;
}


/* ---------- the entrance ---------- */
.popwrap{animation:slam 1.05s cubic-bezier(.16,1.45,.32,1) .92s both}
.agency-line{animation:rise .6s ease-out 1.55s both}
.crestnote{animation:rise .6s ease-out 1.7s both}
.hero-sky .lede{animation:rise .7s ease-out 1.85s both}
.hero-sky .sig,.hero-sky .skynote{animation:rise .7s ease-out 2s both}
@keyframes slam{
  0%{transform:scale(3.4);opacity:0;filter:blur(8px)}
  45%{opacity:1;filter:blur(0)}
  100%{transform:none;opacity:1;filter:none}
}
@keyframes rise{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .popwrap,.agency-line,.crestnote,.hero-sky .lede,.hero-sky .sig,.hero-sky .skynote{animation:none}
}


/* ---------- Space Songs ---------- */
.songs-row{margin-top:clamp(18px,3vh,28px);animation:rise .7s ease-out 2.1s both}
.songs-chip{border-color:var(--brass);color:var(--brass-soft);font-size:.72rem;padding:.55rem 1rem}
.songs-chip:hover,.songs-chip[aria-expanded="true"]{background:var(--brass-soft);color:var(--ink)}
.songs{text-align:left;margin:1.2rem auto 0;max-width:760px}
.songlist{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.songlist li{background:var(--ink-2);padding:.9rem 1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:start}
.song-main{display:flex;flex-direction:column;gap:.15rem}
.song-title{font-family:var(--ff-display);font-size:1.15rem;color:var(--parchment)}
.song-meta{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.song-fact{grid-column:1;margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:60ch}
.song-links{grid-column:2;grid-row:1/3;display:flex;gap:.4rem;align-self:center}
.song-links .chip{text-decoration:none}
@media (max-width:560px){.songlist li{grid-template-columns:1fr}.song-links{grid-column:1;grid-row:auto;margin-top:.4rem}.song-fact{grid-column:1}}
@media (prefers-reduced-motion:reduce){.songs-row{animation:none}}


/* ---------- provenance: dataset / frame / epoch / method ---------- */
.prov{margin-top:.6rem;border:1px solid var(--line);border-top:0;background:rgba(15,21,40,.55)}
.provstrip{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;padding:.55rem .9rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);line-height:1.6}
.provstrip b{font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-right:.35rem}
.provstrip .prov-clock{color:var(--parchment);font-variant-numeric:tabular-nums}
.provmore{border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:.68rem;color:var(--muted)}
.provmore summary{cursor:pointer;padding:.5rem .9rem;letter-spacing:.2em;text-transform:uppercase;font-size:.6rem;color:var(--dim);list-style:none}
.provmore summary::-webkit-details-marker{display:none}
.provmore summary::before{content:'+';display:inline-block;width:1.1em;color:var(--brass)}
.provmore[open] summary::before{content:'\2212'}
.provmore summary:hover{color:var(--brass-soft)}
.provmore dl{margin:0;padding:.2rem .9rem .9rem;display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;font-family:var(--ff-body);font-size:.88rem;line-height:1.55}
.provmore dt{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);padding-top:.25rem}
.provmore dd{margin:0;color:var(--muted);max-width:72ch}
.provmore dd code{font-family:var(--ff-mono);font-size:.8em;color:var(--parchment)}
.provmore dd a{color:var(--brass-soft);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.provmore dd a:hover{color:var(--parchment)}
@media (max-width:560px){.provmore dl{grid-template-columns:1fr;gap:.15rem .5rem}.provmore dt{padding-top:.5rem}}