/* ============================================================
   thinkread.ai — home-stars.css
   「观星台 / The Observatory」  (A/B variant of the homepage)
   A deep night sky in which thinkread's few works hang as
   luminous celestial bodies. The visitor drifts across the
   sky (cursor parallax), brings one into focus (hover/keyboard),
   and walks into it (click). Same dark "night-sky of the mind"
   world as the reading portrait / theme constellation.
   Layers on base.css — REUSE its type/tokens, never redefine them.
   ============================================================ */

/* ============================================================
   LOCAL DARK PALETTE — matches themes.css / portrait.css exactly
   so the variant reads as one publication. Scoped to this page.
   ============================================================ */
:root {
  --sky-0:   #121419;   /* page ground */
  --sky-1:   #15171c;
  --sky-2:   #191b21;   /* the lit centre — barely lighter */
  --sky-line:    rgba(192,200,216,0.085);
  --sky-line-2:  rgba(192,200,216,0.16);
  --sky-line-3:  rgba(192,200,216,0.26);
  --cream:       #EAE7DE;
  --cream-soft:  #A6ACB8;
  --cream-mute:  #777D89;
  --accent:      #93A8C6;          /* restrained cool-slate */
  --accent-dim:  rgba(147,168,198,0.5);
  --gold:        #C9A24B;          /* flagship warmth (a touch brighter on dark) */
  --gold-deep:   #8C7330;
  --glass:       rgba(23,25,31,0.74);
  --glass-card:  rgba(20,22,28,0.88);

  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:      160ms;
  --t-base:      260ms;
  --t-slow:      640ms;
}

/* ---------- the deep-space page ground ---------- */
html, body { height: 100%; }
body {
  background:
    /* faint WARM pool toward the sun's side (upper-right) */
    radial-gradient(60% 55% at 78% 30%, rgba(120,96,44,0.13) 0%, transparent 60%),
    /* faint COOL pool toward the constellation's side (lower-left) */
    radial-gradient(58% 56% at 30% 70%, rgba(70,92,128,0.12) 0%, transparent 62%),
    /* the deep-space ground */
    radial-gradient(120% 90% at 50% 8%, #181a22 0%, var(--sky-0) 50%, #0c0e13 100%);
  color: var(--cream);
  overflow: hidden;                 /* a single immersive sky, no scroll */
  font-family: var(--font-serif);
}
/* faint fractal grain — same trick as themes.css, lifts it to a premium surface */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.022; mix-blend-mode: overlay;
}
::selection { background: rgba(147,168,198,0.30); color: var(--cream); }

/* CJK type — same rules as the dark works */
[lang="zh"] { font-family: var(--font-cjk-serif); }
[lang="zh"] .kicker,
[lang="zh"] .nav-link,
[lang="zh"] .note,
[lang="zh"] .body__no,
[lang="zh"] .body__cue,
[lang="zh"] .lang-btn,
[lang="zh"] .sky__trinity-word,
[lang="zh"] .sky__trinity-tag,
[lang="zh"] .sky__howto,
[lang="zh"] .sky__foot { font-family: var(--font-cjk-sans); }
[lang="zh"] .sky__line,
[lang="zh"] .sky__thesis,
[lang="zh"] .body__title,
[lang="zh"] .body__note { font-family: var(--font-cjk-serif); line-height: 1.7; }

/* ============================================================
   HEADER — dark glass, same language as the works
   ============================================================ */
.site-header {
  /* no bar — the wordmark + toggle float over one continuous sky */
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent;
  border-bottom: 0;
  pointer-events: none; /* let the sky receive cursor parallax; re-enable on controls */
}
.site-header a, .site-header .lang-toggle { pointer-events: auto; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 0; min-height: 56px;
}
.wrap { width: min(100% - 2.6rem, 1320px); margin-inline: auto; }
.wordmark__text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--cream); }
.wordmark__text .hl {
  color: var(--accent); -webkit-text-fill-color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 0.09em; background-position: 0 92%;
}
.wordmark__tld { color: var(--cream-mute); }
.site-nav { display: flex; align-items: center; gap: 1.2rem; }
.nav-link { font-family: var(--font-ui); font-size: 0.92rem; color: var(--cream-soft); transition: color var(--t-fast) var(--ease-soft); }
.nav-link:hover { color: var(--cream); }

/* language toggle (matches the works' minimal EN·中文) */
.lang-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
.lang-btn {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--cream-mute); padding: 0.2em 0.3em; line-height: 1;
  transition: color var(--t-fast) var(--ease-soft);
}
.lang-btn:hover { color: var(--cream-soft); }
.lang-btn.is-active { color: var(--cream); }
.lang-sep { color: var(--cream-mute); opacity: 0.5; }

.wordmark:focus-visible, .nav-link:focus-visible, .lang-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

/* ============================================================
   THE SKY — full viewport immersive field
   ============================================================ */
.sky {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  /* the whole sky fades in on load */
  opacity: 0;
  transition: opacity 1100ms var(--ease-soft);
}
.is-ready .sky { opacity: 1; }

/* star-dust canvases — three depths for parallax */
.sky__dust {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  will-change: transform;
}
.sky__dust--far  { z-index: 1; }
.sky__dust--mid  { z-index: 2; }
.sky__dust--near { z-index: 3; }

/* soft edge vignette over the dust, under the bodies — frames the works,
   keeps the centre airy and graduates a touch denser at the edges */
.sky__vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(118% 96% at 50% 44%, transparent 46%, rgba(8,9,13,0.42) 82%, rgba(6,7,11,0.66) 100%);
}

/* ---------- threshold copy ---------- */
.sky__threshold {
  position: absolute; z-index: 6;
  top: clamp(78px, 12vh, 124px); left: clamp(1.3rem, 5vw, 4rem);
  max-width: min(38rem, 62vw);
  pointer-events: none;
}

/* THINK · READ · AI — the trinity kicker (mono, spelled out) */
.sky__trinity {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.5em;
  font-family: var(--font-mono); line-height: 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-slow) var(--ease-soft) 200ms, transform var(--t-slow) var(--ease-soft) 200ms;
}
.sky__trinity-word {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--cream); text-transform: uppercase;
}
.sky__trinity-dot { font-size: 0.86rem; color: var(--accent); opacity: 0.8; }
.sky__trinity-tag {
  margin-left: 0.55em; padding-left: 0.75em;
  border-left: 1px solid var(--sky-line-2);
  font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--cream-mute); text-transform: uppercase;
}
[lang="zh"] .sky__trinity-word,
[lang="zh"] .sky__trinity-tag { letter-spacing: 0.14em; }

/* the clear thesis line — what thinkread does, lands first.
   a touch larger, a tight two-line block with generous air around it */
.sky__thesis {
  margin-top: 1.15rem;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.3vw, 2.8rem);
  line-height: 1.14; color: var(--cream);
  font-weight: 500; letter-spacing: -0.014em;
  text-wrap: balance;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-soft) 360ms, transform var(--t-slow) var(--ease-soft) 360ms;
}
.sky__thesis em, .sky__thesis b { font-weight: 600; color: var(--cream); }
/* signature underline on the payoff word (think / 想) — a crisp gilt stroke,
   lightened + thickened so it reads cleanly on the dark ground */
.sky__u {
  background-image: linear-gradient(var(--gilt, #D8B05C), var(--gilt, #D8B05C));
  background-repeat: no-repeat;
  background-size: 100% 0.1em;
  background-position: 0 0.98em;
  padding-bottom: 0.05em;
}

/* the original poetic line — demoted to a quieter secondary */
.sky__line {
  margin-top: 0.7rem;
  font-family: var(--font-serif);
  font-size: clamp(0.94rem, 1.4vw, 1.08rem);
  line-height: 1.5; color: var(--cream-soft);
  font-weight: 400; font-style: italic; letter-spacing: 0;
  text-wrap: balance;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease-soft) 480ms, transform var(--t-slow) var(--ease-soft) 480ms;
}

/* how-to cue — always-visible instruction making the interaction obvious */
.sky__howto {
  margin-top: 1.3rem;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-slow) var(--ease-soft) 620ms, transform var(--t-slow) var(--ease-soft) 620ms;
}
.sky__howto-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(147,168,198,0.5);
  animation: sky-hint-pulse 3.4s var(--ease-soft) infinite;
}
@keyframes sky-hint-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(147,168,198,0.45); opacity: 0.9; }
  60%  { box-shadow: 0 0 0 7px rgba(147,168,198,0); opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgba(147,168,198,0); opacity: 0.9; }
}
[lang="zh"] .sky__howto { letter-spacing: 0.02em; }

.is-ready .sky__trinity,
.is-ready .sky__thesis,
.is-ready .sky__line,
.is-ready .sky__howto { opacity: 1; transform: none; }

/* ---------- footer line ---------- */
.sky__foot {
  position: absolute; z-index: 6;
  bottom: clamp(1rem, 3.4vh, 2rem); left: clamp(1.3rem, 5vw, 4rem);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--cream-mute);
  display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
  opacity: 0; transition: opacity var(--t-slow) var(--ease-soft) 900ms;
}
.is-ready .sky__foot { opacity: 1; }
.sky__foot strong { color: var(--cream-soft); font-weight: 700; }
.sky__foot-sep { opacity: 0.5; }

/* ============================================================
   THE FIELD + CELESTIAL BODIES
   ============================================================ */
.field {
  position: absolute; inset: 0; z-index: 5;
  will-change: transform;
}

/* each body is anchored at (--bx,--by) of the field; --depth scales
   parallax + presence. The anchor point is the CENTRE of the core. */
.body {
  position: absolute;
  left: var(--bx); top: var(--by);
  transform: translate(-50%, -50%);
  display: block;
  color: inherit;
  cursor: pointer;
  /* entrance: bloom in (set per-body delay in JS via --in-delay) */
  opacity: 0;
  transition: opacity 1200ms var(--ease-out) var(--in-delay, 0ms);
}
.is-ready .body { opacity: 1; }
.body[data-faint] { cursor: default; }

/* core wrapper — holds the visual + provides the bloom scale */
.body__core {
  position: relative; display: block;
  width: var(--core, 56px); height: var(--core, 56px);
  transform: scale(0.4);
  transition: transform 1200ms var(--ease-out) var(--in-delay, 0ms);
}
.is-ready .body__core { transform: scale(1); }

/* halo — soft radial bloom behind every body */
.body__halo {
  position: absolute; left: 50%; top: 50%;
  width: var(--halo, 220px); height: var(--halo, 220px);
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms var(--ease-soft) var(--in-delay, 0ms),
              transform var(--t-slow) var(--ease-soft);
  background: radial-gradient(circle, var(--glow, rgba(147,168,198,0.42)) 0%, transparent 66%);
}
.is-ready .body__halo { opacity: var(--halo-op, 0.55); transform: translate(-50%, -50%) scale(1); }

/* ---- focus state: bloom + bring forward, dim the rest (depth of field) ---- */
.field.is-focusing .body:not(.is-focus) { opacity: 0.32; filter: saturate(0.6); }
.field.is-focusing .body:not(.is-focus) .body__halo { opacity: 0.16; }
.body.is-focus { z-index: 20; }
.body.is-focus .body__core { transform: scale(1.16); }
.body.is-focus .body__halo { opacity: calc(var(--halo-op, 0.55) + 0.35); transform: translate(-50%, -50%) scale(1.22); }
.body:focus-visible { outline: none; }
.body:focus-visible .body__core { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 50%; }

/* twinkle — a very subtle breathing pulse on the core's glow.
   amplitude kept tight so it's felt, never seen to flicker */
@keyframes sky-twinkle {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}

/* ============================================================
   № 001 — THE SUN (golden flagship, largest/brightest)
   ============================================================ */
.body--sun {
  --core: 96px; --halo: 380px;
  --glow: rgba(201,162,75,0.46);
  --halo-op: 0.56;
  z-index: 10;
}
.body__sun-corona {
  position: absolute; left: 50%; top: 50%;
  width: 200%; height: 200%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,206,148,0.5) 0%, rgba(201,162,75,0.2) 30%, transparent 62%);
  animation: sky-corona-pulse 11s var(--ease-soft) infinite;
}
/* a slow, gentle corona breath — barely perceptible */
@keyframes sky-corona-pulse {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}
.body__sun-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #FBF1D4 0%, #E6CE94 26%, #C9A24B 60%, #8C7330 100%);
  box-shadow:
    0 0 0 1px rgba(230,206,148,0.4),
    0 0 40px rgba(201,162,75,0.45),
    inset -8px -8px 24px rgba(80,62,24,0.5);
}
/* FLAGSHIP — restrained small gold mono lettering, no box / pill */
.body--sun .body__flag {
  position: absolute; left: 50%; top: calc(100% + 0.55rem);
  transform: translateX(-50%);
  color: var(--gold);
  border: 0; background: none; padding: 0; border-radius: 0;
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.56rem;
  letter-spacing: 0.28em; text-transform: uppercase; text-indent: 0.28em;
  text-shadow: 0 1px 8px rgba(8,9,13,0.85);
  opacity: 0; transition: opacity var(--t-base) var(--ease-soft);
}
.is-ready .body--sun .body__flag { opacity: 0.82; }

/* ============================================================
   № 002 — THE CONSTELLATION (cluster joined by faint lines)
   ============================================================ */
/* the constellation is the COOL twin of the warm sun — equal visual weight,
   differentiated by temperature + position, not by big-bright vs small-dim.
   Larger scale, an ice-blue glow halo comparable to the sun's, bright stars
   + bright connecting lines so it reads unmistakably as a work-star. */
.body--constellation {
  --core: 150px; --halo: 360px;
  --glow: rgba(150,180,228,0.5);
  --halo-op: 0.6;
}
.body__constellation { width: 100%; height: 100%; overflow: visible; position: relative; z-index: 1; }
/* a soft cool pool centred on the cluster — gives the constellation a
   luminous body comparable in weight to the sun's disc, not just dots */
.body--constellation .body__core::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 62%; height: 62%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(176,200,242,0.5) 0%, rgba(132,162,216,0.22) 38%, transparent 70%);
  filter: blur(2px);
  animation: sky-corona-pulse 12s var(--ease-soft) infinite;
}
.body__constellation .cn-line {
  stroke: rgba(196,212,244,0.6); stroke-width: 1.3;
  stroke-dasharray: 360; stroke-dashoffset: 360;
  filter: drop-shadow(0 0 3px rgba(150,180,228,0.5));
  transition: stroke-dashoffset 1600ms var(--ease-out) calc(var(--in-delay, 0ms) + 300ms),
              stroke var(--t-base) var(--ease-soft);
}
.is-ready .body--constellation .cn-line { stroke-dashoffset: 0; }
.body__constellation .cn-stars circle {
  fill: #F2F6FF;
  filter: drop-shadow(0 0 7px rgba(196,214,250,1)) drop-shadow(0 0 14px rgba(150,180,228,0.55));
}
.body__constellation .cn-stars circle:nth-child(odd) { animation: sky-twinkle 6.5s var(--ease-soft) infinite; }
.body__constellation .cn-stars circle:nth-child(even) { animation: sky-twinkle 8s var(--ease-soft) infinite 1.2s; }
.body--constellation.is-focus .cn-line { stroke: rgba(214,226,250,0.88); }

/* ============================================================
   № 003 — THE ROUNDTABLE (a luminous ring of seats — Decision Room)
   ============================================================ */
.body--table {
  --core: 86px; --halo: 300px;
  --glow: rgba(201,162,75,0.32);
  --halo-op: 0.5;
  z-index: 9;
}
.body__table { width: 100%; height: 100%; overflow: visible; position: relative; z-index: 1; }
.body__table .tbl-ring {
  fill: none; stroke: rgba(201,162,75,0.6); stroke-width: 2;
  transition: stroke 600ms var(--ease-soft);
}
.body__table .tbl-center { fill: rgba(201,162,75,0.42); }
.body__table .tbl-seat { fill: rgba(233,214,166,0.9); }
.body__table .tbl-seat:nth-child(odd)  { animation: sky-twinkle 6.5s var(--ease-soft) infinite; }
.body__table .tbl-seat:nth-child(even) { animation: sky-twinkle 8s var(--ease-soft) infinite 1.1s; }
.body--table.is-focus .tbl-ring { stroke: rgba(233,214,166,0.95); }
.body--table.is-focus .tbl-seat { fill: #F3E6C2; }
/* gold panel accents, kin to the flagship */
.body--table .body__no,
.body--table .body__cue { color: var(--gold); }
.body--table .body__label-tag { color: var(--gold); opacity: 0.85; }

/* ============================================================
   № 003 — THE NEBULA (a soft glowing opening cloud + ring)
   ============================================================ */
.body--nebula {
  --core: 120px; --halo: 320px;
  --glow: rgba(150,170,205,0.4);
  --halo-op: 0.5;
}
.body__nebula-cloud {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 40%, rgba(214,224,245,0.7) 0%, rgba(147,168,198,0.42) 28%, rgba(80,98,135,0.2) 55%, transparent 74%);
  filter: blur(2px);
  animation: sky-twinkle 8s var(--ease-soft) infinite;
}
.body__nebula-ring {
  position: absolute; left: 50%; top: 50%;
  width: 78%; height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(202,214,242,0.5);
  box-shadow: 0 0 18px rgba(147,168,198,0.4), inset 0 0 14px rgba(147,168,198,0.3);
}
.body__nebula-spark {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #F2F5FF;
  box-shadow: 0 0 12px rgba(230,238,255,0.95);
}
.body--nebula.is-focus .body__nebula-ring {
  width: 88%; height: 88%;
  transition: width var(--t-slow) var(--ease-out), height var(--t-slow) var(--ease-out);
}

/* ============================================================
   № 004 — THE BINARY STAR (two bodies orbiting: HE pale / SHE ink)
   ============================================================ */
.body--binary {
  --core: 104px; --halo: 290px;
  --glow: rgba(160,180,212,0.36);
  --halo-op: 0.44;
}
.body__binary-orbit {
  position: absolute; inset: 0;
  animation: sky-orbit 16s linear infinite;
}
@keyframes sky-orbit { to { transform: rotate(360deg); } }
.body__binary-star {
  position: absolute; top: 50%; border-radius: 50%;
}
.body__binary-star--he {
  left: 8%; width: 30px; height: 30px; transform: translateY(-50%);
  background: radial-gradient(circle at 38% 34%, #FBFCFF 0%, #D7DEEC 60%, #A9B4CC 100%);
  box-shadow: 0 0 18px rgba(215,222,236,0.7);
}
.body__binary-star--she {
  right: 8%; width: 26px; height: 26px; transform: translateY(-50%);
  background: radial-gradient(circle at 40% 36%, #5E74A0 0%, #2B3C63 64%, #1C2A49 100%);
  box-shadow: 0 0 16px rgba(43,60,99,0.85), 0 0 0 1px rgba(147,168,198,0.4);
}
/* counter-rotate the panel anchor isn't needed; keep stars upright via parent only */

/* ============================================================
   THE FOCUS PANEL — label + curatorial note (frosted dark glass)
   ============================================================ */
.body__panel {
  position: absolute;
  top: 50%; left: calc(100% + 1.1rem);
  transform: translateY(-50%) translateX(10px);
  width: min(20rem, 42vw);
  padding: 1.05rem 1.2rem;
  background: var(--glass-card);
  backdrop-filter: saturate(1.1) blur(14px);
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  border: 1px solid var(--sky-line-2);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 0.5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.body__panel--left {
  left: auto; right: calc(100% + 1.1rem);
  transform: translateY(-50%) translateX(-10px);
}
.body__panel--bare { padding: 0.5rem 0.8rem; width: auto; white-space: nowrap; }

.body.is-focus .body__panel {
  opacity: 1; visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              visibility 0s;
}

.body__no {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.body--sun .body__no { color: var(--gold); }
.body__title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  line-height: 1.22; letter-spacing: -0.01em; color: var(--cream);
}
.body__note {
  font-family: var(--font-serif); font-size: 0.86rem; line-height: 1.55;
  color: var(--cream-soft);
}
.body__note--faint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--cream-mute); text-transform: none; }
.body__cue {
  margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.45em;
}
.body--sun .body__cue { color: var(--gold); }
.body__arrow { transition: transform var(--t-fast) var(--ease-soft); }
.body.is-focus .body__cue .body__arrow { transform: translateX(3px); }

/* small mono catalogue tag, dark-skinned */
.note {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim);
  padding: 0.28em 0.55em; border-radius: 3px;
}

/* ============================================================
   ALWAYS-ON LABEL — quiet title + type tag under each work, so
   at first glance the sky reads as FOUR NAMED WORKS, not mystery
   lights. Stays low-opacity so it never fights the atmosphere;
   brightens (and yields) when the fuller panel blooms on focus.
   ============================================================ */
.body__label {
  position: absolute;
  top: calc(100% + 0.6rem); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
  width: max-content; max-width: min(15rem, 40vw);
  padding: 0.5rem 1.1rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-soft) var(--in-delay, 0ms);
}
/* a soft radial scrim behind the label so it stays crisp over any starfield */
.body__label::before {
  content: ""; position: absolute; inset: -0.3rem -0.2rem;
  z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(8,9,13,0.78) 0%, rgba(8,9,13,0.42) 55%, transparent 80%);
}
.is-ready .body__label { opacity: 0.86; }
.body__label-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.85rem; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(8,9,13,0.85), 0 0 2px rgba(8,9,13,0.9);
}
[lang="zh"] .body__label-title { font-family: var(--font-cjk-serif); }
.body--sun .body__label-title { color: var(--cream); }
.body__label-tag {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); opacity: 0.72;
}
[lang="zh"] .body__label-tag { font-family: var(--font-cjk-sans); letter-spacing: 0.06em; }
.body--sun .body__label-tag { color: var(--gold); opacity: 0.85; }

/* the sun's flag pushes its label a touch lower so they don't collide */
.body--sun .body__label { top: calc(100% + 1.8rem); }

/* on focus: the label brightens, then the rich panel takes over.
   Dim sibling labels along with their bodies (depth of field). */
.body.is-focus .body__label { opacity: 1; }
.body.is-focus .body__label-title { color: var(--cream); }
.body.is-focus .body__label-tag { opacity: 0.9; }
.field.is-focusing .body:not(.is-focus) .body__label { opacity: 0.3; }

/* ============================================================
   FORTHCOMING — faint, distant, un-charted stars
   ============================================================ */
.body--faint {
  --core: 16px; --halo: 90px;
  --glow: rgba(150,162,186,0.2);
  --halo-op: 0.22;
  z-index: 4;
}
.body__faint-dot {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(190,198,214,0.55);
  box-shadow: 0 0 6px rgba(170,182,206,0.5);
  animation: sky-twinkle 9s var(--ease-soft) infinite;
}
.body--faint:hover .body__faint-dot,
.body--faint:focus-visible .body__faint-dot { background: rgba(210,218,234,0.85); }
.field.is-focusing .body--faint.is-focus { opacity: 1; }

/* ============================================================
   RESPONSIVE — below ~720px the sky reflows into a vertical
   stack of glowing entries (still atmospheric, still usable)
   ============================================================ */
@media (max-width: 720px) {
  body { overflow-y: auto; overflow-x: hidden; }
  .sky { position: relative; min-height: 100vh; height: auto; padding-bottom: 3rem; }
  .sky__vignette { position: fixed; }
  .sky__dust { position: fixed; }

  .sky__threshold {
    position: relative; top: 0; left: 0;
    max-width: none; padding: 88px clamp(1.2rem, 6vw, 2rem) 0;
  }
  .sky__thesis { font-size: clamp(1.18rem, 5.6vw, 1.56rem); }
  .sky__line { font-size: clamp(0.96rem, 3.6vw, 1.1rem); }

  /* the field becomes a flow column of glowing cards */
  .field {
    position: relative; inset: auto;
    display: flex; flex-direction: column; gap: 1.1rem;
    padding: 1.8rem clamp(1.2rem, 6vw, 2rem) 0;
    transform: none !important;   /* no parallax stage on mobile */
  }
  .body {
    position: relative; left: auto; top: auto;
    transform: none; opacity: 1;
    display: grid; grid-template-columns: 64px 1fr; align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--glass-card);
    backdrop-filter: saturate(1.1) blur(12px);
    -webkit-backdrop-filter: saturate(1.1) blur(12px);
    border: 1px solid var(--sky-line-2);
    border-radius: 12px;
  }
  .body__core {
    position: relative; width: 64px !important; height: 64px !important;
    transform: scale(0.7) !important; place-self: center;
  }
  .body__halo {
    --halo: 130px !important;
    opacity: 0.5 !important; transform: translate(-50%,-50%) !important;
  }
  /* on mobile the panel is always visible, in-flow */
  .body__panel,
  .body__panel--left,
  .body__panel--bare {
    position: relative; left: auto; right: auto; top: auto;
    transform: none !important; width: auto;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto;
    background: none; border: none; box-shadow: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; padding: 0;
    grid-column: 2;
  }
  /* in-flow card: the panel already shows the title, so reflow the
     always-on label into the text column as a quiet type-tag row and
     hide its duplicate title */
  .body__label {
    position: static; transform: none; opacity: 1 !important;
    grid-column: 2; align-items: flex-start; text-align: left;
    max-width: none; width: auto; margin: 0 0 0.1rem; gap: 0;
    order: -1;
  }
  .body__label::before { display: none; }
  .body__label-title { display: none; }
  .body__label-tag { font-size: 0.58rem; }
  .body--sun .body__label { top: auto; }
  .body--sun .body__flag { position: static; transform: none; margin-top: 0.3rem; display: inline-block; }
  .body--sun .body__core { transform: scale(0.62) !important; }
  /* faint stars: compact, label always shown */
  .body--faint { grid-template-columns: 64px 1fr; opacity: 0.7; }
  .body--faint .body__core { transform: scale(0.4) !important; }
  /* dim-the-rest focus effect off on mobile */
  .field.is-focusing .body:not(.is-focus) { opacity: 1; filter: none; }
  .sky__foot { position: relative; bottom: auto; left: auto; padding: 2rem clamp(1.2rem,6vw,2rem) 0; }
}

@media (max-width: 380px) {
  .body { grid-template-columns: 52px 1fr; gap: 0.8rem; }
  .body__core { width: 52px !important; height: 52px !important; }
}

/* hide nav links that don't fit on the very narrowest screens */
@media (max-width: 420px) { .sky-hide-xs { display: none; } }

/* ============================================================
   REDUCED MOTION — a static, fully-legible luminous sky.
   No drift / parallax / twinkle / orbit / entrance. Everything
   visible at rest, all bodies + labels readable.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sky { opacity: 1 !important; transition: none; }
  .sky__trinity, .sky__thesis, .sky__line, .sky__howto, .sky__foot {
    opacity: 1 !important; transform: none !important; transition: none;
  }
  .sky__howto-dot { animation: none !important; }
  .body, .body__core, .body__halo { opacity: 1 !important; transform: translate(-50%,-50%) !important; transition: none; }
  .body { transform: translate(-50%,-50%) !important; }
  .body__core { transform: scale(1) !important; }
  .body__halo { transform: translate(-50%,-50%) scale(1) !important; opacity: var(--halo-op,0.5) !important; }
  .body--sun .body__flag { opacity: 0.92 !important; }
  .body__constellation .cn-line { stroke-dashoffset: 0 !important; transition: none; }
  .body__table .tbl-ring { stroke-dashoffset: 0 !important; transition: none; }

  /* kill all the ambient animations */
  .body__sun-corona, .body__nebula-cloud, .body__binary-orbit,
  .body__faint-dot, .cn-stars circle, .body__table .tbl-seat,
  .body--constellation .body__core::before { animation: none !important; }

  /* labels: make every panel visible at rest so the sky is fully readable */
  .body__panel, .body__panel--left, .body__panel--bare {
    position: static; transform: none !important; width: auto;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto;
    margin-top: 0.6rem; box-shadow: none;
    background: var(--glass-card);
  }
  /* lay bodies out as a readable column when motion is reduced */
  body { overflow-y: auto; }
  .sky { position: relative; height: auto; min-height: 100vh; }
  .field {
    position: relative; inset: auto;
    display: flex; flex-direction: column; gap: 1.4rem;
    padding: 1.8rem clamp(1.3rem,5vw,4rem) 3rem;
  }
  .body {
    position: relative !important; left: auto !important; top: auto !important;
    transform: none !important;
    display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 1.4rem;
  }
  .body__core { position: relative; place-self: center; }
  /* reflow the always-on label into the text column as a tag row,
     hide its duplicate title (the static panel already shows it) */
  .body__label {
    position: static !important; transform: none !important; opacity: 1 !important;
    grid-column: 2; align-items: flex-start; text-align: left;
    max-width: none; width: auto; margin: 0 0 0.1rem; gap: 0; order: -1;
  }
  .body--sun .body__label { top: auto; }
  .body__label::before { display: none; }
  .body__label-title { display: none; }
  .field.is-focusing .body:not(.is-focus) { opacity: 1 !important; filter: none; }
  .field.is-focusing .body:not(.is-focus) .body__label { opacity: 1 !important; }
  .sky__threshold { position: relative; top: 0; left: 0; max-width: none; padding: 92px clamp(1.3rem,5vw,4rem) 0; }
  .sky__foot { position: relative; bottom: auto; left: auto; padding: 2rem clamp(1.3rem,5vw,4rem) 0; }
}