/* The Sky — the opening experience (amendment of 2026-07-11, owner-ordered):
   on the desk, nothing moves without a hand; in the sky, everything moves
   by gravity. The eleven rooms are constellations over the house. Loaded
   on index.html only. Palette is the Atlas: indigo cloth, cream stars,
   brass lines, one vermilion ecliptic. */

@font-face { font-family: "Zodiak"; src: url("../fonts/Zodiak-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../fonts/Zodiak-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../fonts/Zodiak-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

body.sky {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><circle cx="9.5" cy="9.5" r="5" fill="none" stroke="%23fdf6e0" stroke-width="1" opacity=".8"/><path d="M9.5 0v5M9.5 14v5M0 9.5h5M14 9.5h5" stroke="%23fdf6e0" stroke-width="1" opacity=".6"/></svg>') 9 9, auto;
  font-family: "Zodiak", "Sentient", "Iowan Old Style", Palatino, Georgia, serif;
  /* night — the resting state of an observatory */
  --void:    #10151f;
  --void-2:  #1a2231;
  --star:    #fdf6e0;
  --star-dim:#cfc5ac;
  --brass:   #c2a35e;
  --brass-hi:#e4c87e;
  --myth:    #b3a98f;
  --horizon: #0e0a06;
  background: var(--void);
  color: var(--star);
  overflow-x: hidden;
}
@media (prefers-color-scheme: light) {
  body.sky {
    /* dawn — the stars barely holding on */
    --void:    #37405a;
    --void-2:  #6d6079;
    --star:    #f5efe4;
    --star-dim:#d8ccb8;
    --brass:   #c8ab6d;
    --brass-hi:#f0e0b0;
    --myth:    #e6dbc9;
    --horizon: #241a10;
  }
  body.sky { background: linear-gradient(to bottom, #2c3247 0%, var(--void) 30%, #6d6079 62%, #c8a184 84%, #ede5d5 100%); }
}
html[data-light="night"] body.sky {
  --void:#161d2b; --void-2:#1f2839; --star:#f0e9d8; --star-dim:#cfc5ac;
  --brass:#a68a4d; --brass-hi:#e4c87e; --myth:#8f8873; --horizon:#0e0a06;
  background: var(--void);
}
html[data-light="day"] body.sky {
  --void:#37405a; --void-2:#6d6079; --star:#f5efe4; --star-dim:#d8ccb8;
  --brass:#c8ab6d; --brass-hi:#f0e0b0; --myth:#e6dbc9; --horizon:#241a10;
  background: linear-gradient(to bottom, #2c3247 0%, var(--void) 30%, #6d6079 62%, #c8a184 84%, #ede5d5 100%);
}
/* the second thought, on night cloth */
.titlecard .second-thought .was { color: var(--myth); }

.cosmos {
  position: relative;
  min-height: max(100svh, 720px);
  overflow: hidden;
  background:
    radial-gradient(1000px 700px at 84% -4%, rgba(255, 214, 150, 0.10), transparent 60%),
    radial-gradient(900px 640px at 82% 108%, rgba(60, 74, 105, 0.5), transparent 68%),
    transparent;
}
/* the milky way: a grain-of-light band, drawn by mathematics not a stock photo */
.cosmos::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900"><filter id="mw"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="9"/><feColorMatrix type="matrix" values="0 0 0 0 0.99 0 0 0 0 0.96 0 0 0 0 0.88 0.35 0.35 0.35 0 -0.62"/></filter><rect width="900" height="900" filter="url(%23mw)" opacity="0.75"/></svg>'),
    radial-gradient(42% 9% at 52% 46%, rgba(253, 246, 224, 0.05), transparent 100%),
    radial-gradient(55% 12% at 48% 50%, rgba(230, 236, 248, 0.04), transparent 100%);
  background-size: 900px 900px, 100% 100%, 100% 100%;
  transform: rotate(-16deg);
  mask-image: radial-gradient(60% 14% at 50% 48%, black 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 14% at 50% 48%, black 35%, transparent 100%);
  opacity: 0.8;
}
#dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- the moon, waning: grey rock, softly lit, no caption needed ---- */
.moon {
  position: absolute;
  left: 4.5%; top: 4.5%; right: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="r"><feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="3" seed="6"/><feColorMatrix type="matrix" values="0 0 0 0 0.42 0 0 0 0 0.41 0 0 0 0 0.38 0.5 0.5 0.5 0 -0.62"/></filter><rect width="120" height="120" filter="url(%23r)" opacity="0.4"/></svg>'),
    radial-gradient(20px 16px at 60% 28%, rgba(146, 142, 132, 0.5), transparent 72%),
    radial-gradient(13px 11px at 38% 50%, rgba(150, 146, 136, 0.45), transparent 72%),
    radial-gradient(9px 9px at 56% 66%, rgba(138, 134, 124, 0.42), transparent 72%),
    radial-gradient(6px 6px at 28% 32%, rgba(150, 146, 138, 0.35), transparent 74%),
    radial-gradient(circle at 38% 40%, #f2efe7, #dad5c7 60%, #b6b0a1 100%);
  background-size: 120px 120px, auto, auto, auto, auto, auto;
  box-shadow:
    0 0 20px 4px rgba(240, 238, 230, 0.26),
    0 0 84px 26px rgba(236, 236, 242, 0.07);
  pointer-events: none;
}
.moon.waxing { transform: scaleX(-1); }
.moon::before {          /* the disc: clipped independently so the halo can breathe outside it */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: inherit;
}
.moon::after {          /* the terminator: soft edge, a breath of earthshine */
  content: "";
  position: absolute;
  left: var(--term, 27%); top: -8%;
  width: 112%; height: 116%;
  border-radius: 50%;
  background: #141a28;
  opacity: 0.93;
  filter: blur(2.5px);
  clip-path: circle(50% at 50% 50%);
}

/* ---------- constellations: the eleven rooms ------------------------------ */
.constellation {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  text-decoration: none;
  color: var(--star);
  will-change: transform;
  z-index: 3;
  /* (Move 1) dark adaptation: fainter stars (higher --mag) start a little
     dimmer and settle to full brightness quickly — a hint of hierarchy, not
     a multi-minute wait. Tuned down from an earlier pass that dimmed too
     far and took ~78s: real visitors judge in seconds, not minutes. */
  opacity: calc(1 - (var(--mag, 1) - 1) * 0.05);
  transition: opacity 2400ms ease;
}
.cosmos.dark-adapted .constellation { opacity: 1; }
.constellation:hover, .constellation:focus-visible { z-index: 44; }
.constellation .cname, .constellation .cmyth, .constellation.spine::after {
  text-shadow:
    0 0 6px var(--void), 0 0 12px var(--void),
    1px 1px 2px var(--void), -1px -1px 2px var(--void);
}
.constellation svg { display: block; overflow: visible; }
.constellation svg line, .constellation svg polyline {
  stroke: var(--brass);
  stroke-width: 1.3;
  opacity: 0.85;
  transition: opacity 300ms ease, stroke 300ms ease;
  /* (Move 4) hand-inked, not vector-perfect — see #inkline */
  filter: url(#inkline);
}
.constellation svg circle {
  fill: var(--star);
  filter: drop-shadow(0 0 5px rgba(253, 246, 224, 0.95)) drop-shadow(0 0 14px rgba(253, 246, 224, 0.35));
  animation: starbreath 6.5s ease-in-out infinite alternate;
  transition: r 300ms ease;
}
.constellation svg circle:nth-child(odd) { animation-delay: -2.2s; }
.constellation svg circle:nth-child(3n) { animation-delay: -4.1s; animation-duration: 8s; }
@keyframes starbreath {
  from { opacity: 0.68; }
  to   { opacity: 1; }
}
.constellation .cname {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--star);
  white-space: nowrap;
}
.constellation .cmyth {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--myth);
  max-width: 26ch;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.constellation:hover .cmyth, .constellation:focus-visible .cmyth {
  opacity: 1; transform: none;
}
.constellation:hover svg line, .constellation:hover svg polyline,
.constellation:focus-visible svg line, .constellation:focus-visible svg polyline {
  stroke: var(--brass-hi); opacity: 1;
  animation: trace 650ms ease-out;
}
@keyframes trace {
  from { stroke-dashoffset: 1; stroke-dasharray: 1; }
  to   { stroke-dashoffset: 0; stroke-dasharray: 1; }
}
.constellation:focus-visible, .horizon a:focus-visible,
body.sky .finding-aid summary:focus-visible {
  outline: 1.5px solid var(--star);
  outline-offset: 8px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(253, 246, 224, 0.14), 0 0 22px rgba(253, 246, 224, 0.25);
}
/* memory as magnitude: visited rooms burn brighter; the stayed room brightest */
.constellation.seen svg circle { filter: drop-shadow(0 0 3px rgba(240, 233, 216, 0.9)); }
.constellation.seen .cname { color: var(--star); }
.constellation.spine svg circle { filter: drop-shadow(0 0 6px rgba(255, 214, 150, 1)); fill: #ffe9c2; }
.constellation.spine::after {
  content: "the sky remembers where you stayed";
  position: absolute; left: 0; top: calc(100% + 6px);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--myth);
  white-space: nowrap;
}

/* ---------- the title card: what this place is ---------------------------- */
.titlecard {
  position: absolute;
  left: 7%; top: 15%;
  max-width: min(46ch, 78vw);
  will-change: transform;
}
.titlecard .kick {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  color: var(--brass-hi);
}
.titlecard h1 {
  margin: 0.55rem 0 0.7rem;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-family: "Zodiak", serif; font-weight: 700; letter-spacing: -0.01em;
  font-weight: 500;
  line-height: 1.18;
  color: var(--star);
}
.titlecard h1 .second-thought { border-bottom-color: var(--vermilion); }
.titlecard h1 .second-thought::after { color: var(--verm-lt, #c96a4e); }
.titlecard p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--star-dim);
  max-width: 46ch;
}
.titlecard #greet:not(:empty) { font-style: italic; color: var(--myth); }

/* ---------- the ecliptic --------------------------------------------------- */
.ecliptic {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* ---------- the horizon: the desk waits below ------------------------------ */
.horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 74px;
  z-index: 5;
  background: linear-gradient(to bottom, transparent, rgba(14, 10, 6, 0.72) 34%, var(--horizon));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 1.4rem 0.9rem;
}
.horizon a.descend {
  color: var(--star-dim);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  border-bottom: 1px dotted var(--brass);
  padding-bottom: 2px;
}
.horizon a.descend:hover, .horizon a.descend:focus-visible { color: var(--star); border-bottom-color: var(--brass-hi); }
.horizon .seal {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: rgba(185, 176, 154, 0.6);
}
.horizon .seal b { color: #c96a4e; font-weight: normal; }

/* ---------- finding aid (shared component, dark dress) --------------------- */
body.sky .finding-aid {
  position: fixed;
  left: 1.2rem; bottom: 86px;
  z-index: 60;
  width: min(340px, 86vw);
}
body.sky .finding-aid summary {
  display: inline-block;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  padding: 0.45rem 0.7rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
body.sky .finding-aid summary::marker { content: ""; }
body.sky .finding-aid .aid-body {
  background: var(--paper);
  color: var(--ink);
  padding: 0.9rem 1rem;
  margin-top: 0.4rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  max-height: min(56vh, 30rem);
  overflow: auto;
}

/* ---------- arrival: the sky clears ---------------------------------------- */
#veil {
  position: fixed; inset: 0;
  z-index: 70;
  background: #0a0d14;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- small screens: the sky becomes a chart strip ------------------- */
@media (max-width: 820px) {
  .cosmos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 1rem;
    align-content: start;
    padding: 1rem 1.2rem 110px;
  }
  .titlecard { position: static; grid-column: 1 / -1; order: 1; max-width: none; margin-top: 2.6rem; }
  .constellation { position: static; order: 3; }
  .constellation .cmyth { opacity: 1; transform: none; }   /* no hover on glass — myths always told */
  .constellation svg { transform: scale(0.82); transform-origin: left top; margin-bottom: -8px; }
  .constellation.spine::after { position: static; display: block; margin-top: 4px; white-space: normal; }
  body.sky .finding-aid { position: static; grid-column: 1 / -1; order: 10; width: auto; margin-top: 0.6rem; }
  .horizon { position: fixed; left: 0; right: 0; bottom: 0; }
  .moon { left: auto; right: 6%; top: 26px; transform: scale(0.72); transform-origin: top right; }
  .ecliptic { display: none; }
  .chart-note { display: none; }
}

/* ---------- stillness, honestly -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .constellation, .titlecard, .cosmos { transform: none !important; }
}

/* ---------- the invocation: three whispered lines on arrival -------------
   Driven by JS setTimeout + short CSS transitions, not a long animation-
   delay (proven unreliable: verified stuck at opacity 0 at t=13s despite
   a correctly-configured 12s delay). Silence first, meaning after. ------- */
.invocation {
  position: absolute;
  left: 7%; top: 56%;
  z-index: 6;
  pointer-events: none;
}
.invocation span {
  display: block;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--star-dim);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1100ms ease, transform 1100ms ease;
}
.invocation span.show { opacity: 0.92; transform: none; }
/* the emotional center does not leave: it settles rather than vanishes */
.invocation span.stay { opacity: 0.55; transition-duration: 1600ms; }
@media (prefers-reduced-motion: reduce) {
  .invocation { display: none !important; }
}

/* ---------- a meteor, for the patient ------------------------------------- */
.meteor {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffe9c2;
  box-shadow: 0 0 8px 3px rgba(255, 214, 150, 0.85);
  pointer-events: none;
  z-index: 4;
}
.meteor::after {
  content: "";
  position: absolute;
  left: 2px; top: 1px;
  width: 150px; height: 1.5px;
  background: linear-gradient(to right, rgba(255, 224, 165, 0.9), transparent);
  transform: rotate(18deg);
  transform-origin: left center;
}
.meteor.shoot { animation: shoot 1.5s ease-in forwards; }
@keyframes shoot {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-46vw, 26vh, 0); }
}

/* ---------- the sky notices the ones who stay ------------------------------ */
.staynote {
  position: absolute;
  left: 1.4rem; bottom: 100px;
  z-index: 6;
  font-style: italic;
  font-size: 1rem;
  color: var(--myth);
  opacity: 0;
  transition: opacity 1600ms ease;
  pointer-events: none;
}
.staynote.on { opacity: 0.95; }
@media (max-width: 820px) { .staynote { display: none; } }

/* the sky assembles on arrival — east to west, as night falls */
html.relit .constellation { animation: rise 900ms ease-out both; }
html.relit .constellation:nth-of-type(1) { animation-delay: 2.0s; }
html.relit .constellation:nth-of-type(2) { animation-delay: 2.15s; }
html.relit .constellation:nth-of-type(3) { animation-delay: 2.3s; }
html.relit .constellation:nth-of-type(4) { animation-delay: 2.45s; }
html.relit .constellation:nth-of-type(5) { animation-delay: 2.6s; }
html.relit .constellation:nth-of-type(6) { animation-delay: 2.75s; }
html.relit .constellation:nth-of-type(7) { animation-delay: 2.9s; }
html.relit .constellation:nth-of-type(8) { animation-delay: 3.05s; }
html.relit .constellation:nth-of-type(9) { animation-delay: 3.2s; }
html.relit .constellation:nth-of-type(10) { animation-delay: 3.35s; }
html.relit .constellation:nth-of-type(11) { animation-delay: 3.5s; }
@keyframes rise { from { opacity: 0; } to { opacity: calc(1 - (var(--mag, 1) - 1) * 0.05); } }

/* (Move 2) one movement owns the frame: the whole sky pulls back from the
   alpha star (001, the room the rest of the chart is plotted around) as the
   veil clears, instead of many small independent drifts */
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  html.relit .cosmos { transform-origin: 29% 9%; animation: zoomopen 2.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes zoomopen { from { transform: scale(1.8); } to { transform: scale(1); } }
}

/* (9) the headline glows like the chart it titles */
.titlecard h1 { text-wrap: balance; text-shadow: 0 0 26px rgba(253, 246, 224, 0.18); }
.titlecard p { text-wrap: pretty; }

/* (13) descend: a real landing zone */
.horizon a.descend { padding: 0.9rem 0.2rem 0.65rem 0.9rem; transition: color 200ms ease, letter-spacing 300ms ease; }
.horizon a.descend:hover { letter-spacing: 0.22em; }

/* (15) the finding aid dims the sky behind it; ▸ turns */
body.sky .finding-aid[open]::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(10, 13, 20, 0.55);
  backdrop-filter: blur(2px);
  z-index: -1;
}
body.sky .finding-aid summary::before { content: "▸ "; color: var(--vermilion); }
body.sky .finding-aid[open] summary::before { content: "▾ "; }

/* (16) prefers-contrast: the chart in its clearest hand */
@media (prefers-contrast: more) {
  body.sky { --star: #ffffff; --star-dim: #f0e9d8; --myth: #d8ccb8; --brass: #d9bc7a; --brass-hi: #f0e0b0; }
  .constellation svg line, .constellation svg polyline { stroke-width: 1.7; opacity: 1; }
  .constellation svg circle { animation: none; filter: none; }
  .titlecard h1 { text-shadow: none; }
}

/* (17) save-data: the sky travels light */
body.sky.lite .cosmos::before { display: none; }
body.sky.lite .moon { box-shadow: 0 0 18px 4px rgba(253, 246, 224, 0.25); }

/* (18) printed, the sky becomes a chart in ink */
@media print {
  body.sky { background: #fff !important; color: #111; cursor: auto; }
  #dust, .cosmos::before, .moon, .moon-label, .horizon, .ecliptic, #veil, .invocation, .staynote { display: none !important; }
  .cosmos { background: none; min-height: auto; }
  .constellation { position: absolute; }
  .constellation svg circle { fill: #111; filter: none; animation: none; }
  .constellation svg line, .constellation svg polyline { stroke: #666; }
  .constellation .cname { color: #111; text-shadow: none; }
  .constellation .cmyth { color: #555; opacity: 1; text-shadow: none; }
  .titlecard h1, .titlecard p { color: #111; text-shadow: none; }
}

/* (19) a brass rule and a star to close the address */
.titlecard::after {
  content: "· ✳ ·";
  display: block;
  margin-top: 0.9rem;
  color: var(--brass);
  font-size: 0.8rem;
  letter-spacing: 0.6em;
  opacity: 0.8;
}

/* ---------- the deep field turns behind the fixed chart -------------------
   True sidereal drift: nebula and star-dust wheel about the pole star,
   one revolution per forty minutes, while the charted constellations hold.
   Leave the tab open and the sky has visibly turned. */
#firmament {
  position: absolute; inset: -22%;
  transform-origin: 74% 22.6%;   /* the pole star's coordinates in this layer */
}
#firmament .nebula, #firmament #dust { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  #firmament { animation: sidereal 2400s linear infinite; }
  @keyframes sidereal { to { transform: rotate(360deg); } }
}

/* the pole star: fixed while all heaven turns around it */
.polestar {
  position: absolute;
  left: auto; right: 15.5%; top: 10.5%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 2px rgba(255, 253, 244, 0.9),
    0 0 18px 6px rgba(253, 246, 224, 0.4);
  z-index: 4;
  pointer-events: none;
}
.polestar::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 240, 0.35), transparent 70%);
  animation: polepulse 5s ease-in-out infinite;
}
@keyframes polepulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .polestar::after { animation: none; } }

/* ---------- the nebula: far weather behind everything --------------------- */
.nebula {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 30% at 30% 62%, rgba(96, 116, 156, 0.16), transparent 75%),
    radial-gradient(34% 22% at 58% 38%, rgba(140, 110, 96, 0.10), transparent 75%),
    radial-gradient(40% 26% at 74% 70%, rgba(84, 104, 148, 0.12), transparent 75%);
  filter: blur(6px);
}

/* ---------- stars become bodies: bloom + hierarchy ------------------------- */
.constellation svg circle { filter: url(#starglow); }
.constellation svg circle.alpha { filter: url(#starglow) drop-shadow(0 0 7px rgba(255, 250, 232, 0.9)); }
.constellation svg line, .constellation svg polyline { opacity: 0.5; }

/* ---------- foreground motes: dust between you and the sky ---------------- */
.mote {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(circle at 40% 35%, rgba(253, 248, 232, 0.16), rgba(253, 248, 232, 0.03) 60%, transparent 75%);
}

@media (max-width: 820px) { .polestar, .nebula { display: none; } #heavens { position: static; inset: auto; animation: none; display: contents; } }

/* ---------- (Move 3) 006 stays a bare point of light until you come back --
   sky.js adds .unresolved only when it's true; without JS the full room is
   there, per the site's own progressive-enhancement rule. */
.constellation.unresolved svg polyline { display: none; }
.constellation.unresolved svg circle:not(.alpha) { display: none; }
.constellation.unresolved .cname, .constellation.unresolved .cmyth { display: none; }

/* ---------- (Move 4) the correction beside 006, not inside its link ------- */
.chart-note {
  position: absolute;
  left: calc(var(--x) * 1% + 3.2%);
  top: calc(var(--y) * 1% - 3.4%);
  z-index: 6;
  font-size: 0.8rem;
  color: var(--myth);
}
.chart-note .now { font-size: 0.9rem; }
.chart-note .was { max-width: 22ch; display: none; }
.chart-note.showing .was { display: inline-block; }
.chart-note.showing .now { display: none; }

/* ---------- (Move 5) the blurb waits for a first look ---------------------
   Reveals on first hover/focus of any constellation (sky.js), with a
   generous fallback timer so it never stays hidden for a visitor who never
   hovers (touch, keyboard-only skip-link users, reduced motion). */
.titlecard .blurb {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.titlecard .blurb.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .titlecard .blurb { opacity: 1; transform: none; transition: none; }
}