/* =========================================================================
   左锡宁 · Zuo Xining — Personal Cosmos
   Design tokens + components. Two themes (light/dark), two directions
   (stele / observatory). Calm, restrained, monument-quiet.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sel); color: var(--ink); }

/* ---------- Tokens: shared ---------- */
:root {
  --font-serif: 'Source Serif 4', 'Noto Serif SC', Georgia, 'Songti SC', serif;
  --font-sans: 'Hanken Grotesk', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;

  /* type scale (fluid) */
  --t-mono: clamp(10px, 0.72rem, 12px);
  --t-meta: clamp(11px, 0.8rem, 13px);
  --t-body: clamp(15px, 1.02rem, 17px);
  --t-lead: clamp(17px, 1.2rem, 20px);
  --t-h3: clamp(19px, 1.45rem, 24px);
  --t-h2: clamp(24px, 2.2rem, 34px);
  --t-h1: clamp(34px, 4.6vw, 58px);
  --t-display: clamp(52px, 9vw, 124px);

  /* spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px; --s11: 200px;

  /* radius — iPhone-soft */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --d-1: .35s; --d-2: .6s; --d-3: .95s; --d-4: 1.4s;

  --maxw: 1180px;
  --measure: 66ch;
  --measure-read: 38em;

  --accent-h: 209; /* hue knob (Tweaks) */
}

/* ---------- Light theme: warm paper + 青花 cobalt ---------- */
:root, [data-theme="light"] {
  --bg:        #f3efe6;
  --bg-2:      #ece6da;
  --raised:    #fbf9f3;
  --raised-2:  #f7f3ea;
  --ink:       #1a2935;
  --ink-2:     #475a6a;
  --ink-3:     #8694a1;
  --ink-4:     #aab4bd;
  --line:      rgba(26,41,53,.13);
  --line-2:    rgba(26,41,53,.07);
  --line-strong: rgba(26,41,53,.22);
  --primary:   oklch(.5 .09 var(--accent-h));
  --primary-2: oklch(.42 .1 var(--accent-h));
  --primary-tint: oklch(.5 .09 var(--accent-h) / .1);
  --warm:      #a87f56;
  --warm-2:    #8a6743;
  --warm-tint: rgba(168,127,86,.12);
  --sel:       oklch(.5 .09 var(--accent-h) / .16);
  --shadow-1:  0 1px 2px rgba(26,41,53,.05), 0 4px 14px rgba(26,41,53,.05);
  --shadow-2:  0 2px 6px rgba(26,41,53,.06), 0 18px 48px rgba(26,41,53,.10);
  --glow:      0 0 0 rgba(0,0,0,0);
  --emblem-blend: normal;
  --emblem-opacity: 1;
  --star-opacity: 0;
  --cosmos-opacity: 0;
  color-scheme: light;
}

/* ---------- Dark theme: night cosmos ---------- */
[data-theme="dark"] {
  --bg:        #0a111b;
  --bg-2:      #0c1420;
  --raised:    #111c2a;
  --raised-2:  #14202f;
  --ink:       #e9eef4;
  --ink-2:     #a0b1c2;
  --ink-3:     #647688;
  --ink-4:     #4a596a;
  --line:      rgba(176,200,224,.14);
  --line-2:    rgba(176,200,224,.06);
  --line-strong: rgba(176,200,224,.26);
  --primary:   oklch(.72 .09 var(--accent-h));
  --primary-2: oklch(.82 .07 var(--accent-h));
  --primary-tint: oklch(.72 .09 var(--accent-h) / .16);
  --warm:      #d9b78d;
  --warm-2:    #e6cba8;
  --warm-tint: rgba(217,183,141,.14);
  --sel:       oklch(.72 .09 var(--accent-h) / .22);
  --shadow-1:  0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.4);
  --shadow-2:  0 4px 12px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.55);
  --glow:      0 0 60px oklch(.72 .09 var(--accent-h) / .14);
  --emblem-blend: screen;
  --emblem-opacity: .96;
  --star-opacity: 1;
  --cosmos-opacity: .26;
  color-scheme: dark;
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .005em;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
  overflow-x: hidden;
}

#root { position: relative; z-index: 1; }

/* ---------- Cosmos backdrop (very faint) ---------- */
.cosmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.cosmos__img {
  position: absolute; inset: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  opacity: var(--cosmos-opacity);
  filter: saturate(.85);
  transition: opacity var(--d-3) var(--ease);
  mix-blend-mode: var(--emblem-blend);
}
[data-theme="light"] .cosmos__img { filter: saturate(.5) brightness(1.05); }
.cosmos__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent, var(--bg) 72%),
    linear-gradient(var(--bg), transparent 18%, transparent 82%, var(--bg));
}
[data-theme="light"] .cosmos__veil {
  background:
    radial-gradient(90% 60% at 50% -16%, var(--warm-tint), transparent 58%),
    radial-gradient(70% 50% at 50% 8%, var(--primary-tint), transparent 60%);
}
.stars {
  position: absolute; inset: 0;
  opacity: var(--star-opacity);
  transition: opacity var(--d-3) var(--ease);
}
.stars i {
  position: absolute; border-radius: 50%;
  background: #cfe0f2;
  animation: twinkle var(--dur,6s) var(--ease-soft) infinite alternate;
  animation-delay: var(--del, 0s);
}
@keyframes twinkle { from { opacity: .15; } to { opacity: .9; } }

/* ---------- Layout primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s6); }
.col-narrow { max-width: 720px; margin-inline: auto; }
.section { position: relative; }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.hairline { height: 1px; background: var(--line-2); }

/* ---------- Mono meta label ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.serif { font-family: var(--font-serif); }
.cjk-serif { font-family: 'Noto Serif SC', var(--font-serif); }

/* =========================================================================
   App chrome
   ========================================================================= */

/* top mini-nav (inner pages + hover on home) */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px,2.4vw,22px) clamp(16px,4vw,40px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.brand.show { opacity: 1; transform: none; }
.brand:hover { opacity: .8; }
.brand__mark { width: 30px; height: 30px; border-radius: 50%; }
.brand__name { font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .02em; }
.brand__name small { font-family: var(--font-mono); font-size: .56em; letter-spacing: .2em; color: var(--ink-3); margin-left: .5em; text-transform: uppercase; }

/* control cluster (theme + lang) */
.controls { display: inline-flex; align-items: center; gap: var(--s2); }
.ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-width: 38px; padding: 0 12px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--raised) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.ctl:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.ctl:active { transform: translateY(0) scale(.97); }
.ctl svg { width: 16px; height: 16px; display: block; }
.ctl__seg { padding: 0 4px; }
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-full);
  background: color-mix(in oklab, var(--raised) 70%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.seg button {
  height: 30px; padding: 0 12px; border-radius: var(--r-full); white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); transition: color var(--d-1) var(--ease);
}
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--bg); box-shadow: var(--shadow-1); }
.seg button:hover { color: var(--ink-2); }

/* =========================================================================
   Emblem
   ========================================================================= */
.emblem {
  display: block; border-radius: 50%;
  mix-blend-mode: var(--emblem-blend);
  opacity: var(--emblem-opacity);
  filter: drop-shadow(var(--glow));
}
[data-theme="light"] .emblem { mix-blend-mode: multiply; }
.emblem--hero { width: min(40vw, 300px); aspect-ratio: 1; }
.emblem-halo { position: relative; display: inline-grid; place-items: center; }
.emblem-halo::before {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-tint), transparent 64%);
  opacity: .8; z-index: -1;
}

/* =========================================================================
   HOME — shared
   ========================================================================= */
.home { position: relative; }

.hero {
  min-height: 100svh;
  display: grid;
  padding: var(--s9) var(--s6) var(--s8);
  position: relative;
}
.hero__name {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.01em;
}
.hero__name .cjk { font-family: 'Noto Serif SC', var(--font-serif); font-weight: 600; }
.hero__romaji {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 30ch;
}

/* About reveal */
.about__lead { font-size: var(--t-lead); color: var(--ink); line-height: 1.7; }
.about__more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-3) var(--ease), opacity var(--d-2) var(--ease);
  opacity: 0;
}
.about__more > div { overflow: hidden; }
.about.open .about__more { grid-template-rows: 1fr; opacity: 1; }
.about__body p { color: var(--ink-2); margin: 0 0 1.1em; }
.about__body p:last-child { margin-bottom: 0; }
.disclosure {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
  padding: 6px 0; transition: gap var(--d-1) var(--ease), opacity var(--d-1) var(--ease);
}
.disclosure:hover { gap: 12px; }
.disclosure svg { width: 13px; height: 13px; transition: transform var(--d-2) var(--ease); }
.about.open .disclosure svg { transform: rotate(180deg); }

/* Section header */
.sec-head { display: flex; align-items: baseline; gap: var(--s4); }
.sec-head__idx { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--primary); letter-spacing: .18em; }
.sec-head__title { font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 500; letter-spacing: -.01em; }
.sec-head__title .cjk { font-family: 'Noto Serif SC', var(--font-serif); font-weight: 600; }
.sec-head__en { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

/* Writing list (Dario-style) */
.entries { display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s4);
  padding: var(--s5) 0; border-top: 1px solid var(--line);
  position: relative; transition: padding-left var(--d-2) var(--ease);
}
.entries .entry:last-child { border-bottom: 1px solid var(--line); }
.entry:hover { padding-left: 14px; }
.entry::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--primary); transform: translateY(-50%);
  transition: width var(--d-2) var(--ease); opacity: 0;
}
.entry:hover::before { width: 6px; opacity: 1; }
.entry__main { min-width: 0; }
.entry__title { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.005em; color: var(--ink); transition: color var(--d-1) var(--ease); }
.entry__title .cjk { font-family: 'Noto Serif SC', var(--font-serif); font-weight: 600; }
.entry:hover .entry__title { color: var(--primary); }
.entry__dek { color: var(--ink-2); font-size: var(--t-body); margin-top: 4px; }
.entry__meta { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); letter-spacing: .12em; white-space: nowrap; text-align: right; }
.entry__meta .tag { display:block; color: var(--ink-4); margin-top: 3px; letter-spacing:.16em; }
.entry--draft { opacity: .5; }
.entry--draft .entry__title { font-style: italic; }

/* Empty state */
.empty {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px,5vw,56px);
  background: linear-gradient(var(--raised), var(--raised-2));
  display: grid; gap: var(--s4); justify-items: start;
  position: relative; overflow: hidden;
}
.empty__watermark {
  position: absolute; right: -40px; bottom: -50px; width: 220px; opacity: .06;
  mix-blend-mode: var(--emblem-blend); pointer-events: none;
}
.empty__q { font-family: var(--font-serif); font-style: italic; font-size: var(--t-lead); color: var(--ink-2); max-width: 34ch; line-height: 1.5; }

/* =========================================================================
   LAB / modules — platform shell
   ========================================================================= */
.modules { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.module {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); background: var(--raised);
  display: grid; gap: var(--s4); align-content: start; min-height: 196px;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.module:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.module__top { display: flex; align-items: center; justify-content: space-between; }
.module__glyph {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg);
  font-family: 'Noto Serif SC', var(--font-serif); font-size: 22px; color: var(--primary);
}
.module__status {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px;
}
.module__status::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--ink-4); }
.module--dormant .module__status::before { background: var(--warm); box-shadow: 0 0 8px var(--warm); }
.module__name { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500; }
.module__name .cjk { font-family:'Noto Serif SC', var(--font-serif); font-weight:600; }
.module__desc { color: var(--ink-2); font-size: var(--t-meta); line-height: 1.55; }
.module__cta { margin-top: auto; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.12em; text-transform: uppercase; color: var(--ink-3); display:inline-flex; gap:8px; align-items:center; white-space: nowrap; }
.module__cta svg { width: 15px; height: 15px; flex: none; }
.module:hover .module__cta { color: var(--primary); }

/* module placeholder (add slot) */
.module--slot {
  border-style: dashed; background: transparent; place-items: center; place-content: center;
  color: var(--ink-3); text-align: center; gap: var(--s2);
}
.module--slot .plus { font-size: 26px; color: var(--ink-4); font-family: var(--font-serif); }

/* =========================================================================
   READING view
   ========================================================================= */
.reader { padding: var(--s11) var(--s6) var(--s9); position: relative; }
.reader__inner { max-width: 38em; margin: 0 auto; }
.reader__kicker { display:flex; gap: var(--s3); align-items:center; justify-content:center; margin-bottom: var(--s5); }
.reader__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.015em;
  text-align: center; text-wrap: balance;
}
.reader__title .cjk { font-family:'Noto Serif SC', var(--font-serif); font-weight: 600; }
.reader__sub { text-align:center; color: var(--ink-2); font-family: var(--font-serif); font-style: italic; font-size: var(--t-lead); margin-top: var(--s4); }
.reader__meta { display:flex; gap: var(--s4); justify-content:center; margin-top: var(--s5); }
.reader hr.rule { width: 56px; height:1px; background: var(--line-strong); border:0; margin: var(--s7) auto; }
.prose {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.18rem, 20px);
  line-height: 1.78; color: var(--ink);
  letter-spacing: .003em;
}
.prose p { margin: 0 0 1.4em; }
.prose .cjk-serif, .prose [lang="zh"] { font-family: 'Noto Serif SC', var(--font-serif); }
.prose .lead:first-letter {
  initial-letter: 2.4; -webkit-initial-letter: 2.4;
  font-weight: 600; color: var(--primary); margin-right: .08em;
}
.prose blockquote {
  margin: 1.8em 0; padding-left: var(--s5);
  border-left: 2px solid var(--primary);
  font-style: italic; color: var(--ink-2);
}
.prose h2 { font-size: var(--t-h3); font-weight: 600; margin: 2em 0 .6em; letter-spacing: -.01em; }
.back-link {
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing:.1em; text-transform: uppercase;
  color: var(--ink-3); transition: gap var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.back-link:hover { color: var(--ink); gap: 12px; }
.back-link svg { width:14px; height:14px; }
.colophon { text-align:center; margin-top: var(--s8); color: var(--ink-3); }

/* =========================================================================
   Footer
   ========================================================================= */
.foot { position: relative; padding: var(--s9) var(--s6) var(--s7); margin-top: var(--s9); }
.foot__ridge { position:absolute; left:0; right:0; top:0; height: 80px; pointer-events:none; opacity:.5; }
.foot__ridge path { fill:none; stroke: var(--line-strong); stroke-width: 1; }
.foot__inner { max-width: var(--maxw); margin: 0 auto; display:flex; flex-wrap: wrap; gap: var(--s5); align-items:center; justify-content: space-between; }
.foot__mark { display:flex; align-items:center; gap: var(--s3); color: var(--ink-2); }
.foot__mark img { width: 26px; height:26px; border-radius:50%; }
.foot__seal { font-family:'Noto Serif SC', var(--font-serif); font-size: 12px; color: var(--ink-3); letter-spacing:.1em; }
.foot__note { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); letter-spacing:.1em; }

/* =========================================================================
   DIRECTION A — 碑 / Stele  (axial, centered, monumental)
   ========================================================================= */
[data-dir="stele"] .hero { place-items: center; text-align: center; align-content: center; gap: var(--s5); }
[data-dir="stele"] .hero__emblem { margin-bottom: var(--s2); }
[data-dir="stele"] .hero__name { font-size: var(--t-h1); display:grid; gap: 10px; justify-items:center; }
[data-dir="stele"] .hero__name .cjk { font-size: 1.5em; letter-spacing: .06em; }
[data-dir="stele"] .hero__tag { margin: 0 auto; text-align: center; }
[data-dir="stele"] .hero__scroll {
  position: absolute; bottom: var(--s7); left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; color: var(--ink-3);
}
[data-dir="stele"] .hero__scroll .line { width: 1px; height: 38px; background: linear-gradient(var(--line-strong), transparent); }

[data-dir="stele"] .about { text-align: center; }
[data-dir="stele"] .about .disclosure { margin: var(--s5) auto 0; }
[data-dir="stele"] .about__body { text-align: left; }
[data-dir="stele"] .sec-head { flex-direction: column; align-items: center; text-align: center; gap: var(--s2); margin-bottom: var(--s6); }
[data-dir="stele"] .stele-seal {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 64px; height: 64px; opacity: .9;
}

/* =========================================================================
   DIRECTION B — 观星台 / Observatory (editorial, asymmetric, spatial)
   ========================================================================= */
[data-dir="observatory"] .hero {
  grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s7);
  text-align: left; max-width: var(--maxw); margin: 0 auto;
}
[data-dir="observatory"] .hero__text { display: grid; gap: var(--s6); align-content: center; }
[data-dir="observatory"] .hero__name { font-size: clamp(40px, 5.4vw, 76px); display:grid; gap: 12px; }
[data-dir="observatory"] .hero__name .cjk { font-size: 1.35em; letter-spacing: .04em; }
[data-dir="observatory"] .hero__aside { display:grid; place-items:center; position: relative; }
[data-dir="observatory"] .hero__tag { margin: 0; }
[data-dir="observatory"] .meridian {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(transparent, var(--line) 12%, var(--line) 88%, transparent);
}
[data-dir="observatory"] .sec-head { margin-bottom: var(--s6); }
/* observatory keeps brand always visible top-left */
[data-dir="observatory"] .home .brand { opacity: 1; transform: none; }

/* shared content rhythm */
.stack { display: grid; gap: var(--s10); }
.block { position: relative; }

/* =========================================================================
   Buttons / links
   ========================================================================= */
.link-quiet { color: var(--primary); border-bottom: 1px solid var(--primary-tint); transition: border-color var(--d-1) var(--ease); }
.link-quiet:hover { border-color: var(--primary); }

/* page transitions — transform only so content is never hidden if frozen */
.view { animation: viewIn var(--d-3) var(--ease) both; }
@keyframes viewIn { from { transform: translateY(12px); } to { transform: none; } }

/* reveal on scroll — opacity stays 1 (never hidden); only a gentle slide */
.rise { transform: translateY(16px); transition: transform var(--d-3) var(--ease); }
.rise.in { transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 880px) {
  :root { --s10: 96px; --s11: 130px; --s9: 72px; }
  [data-dir="observatory"] .hero { grid-template-columns: 1fr; text-align: center; gap: var(--s6); padding-top: var(--s10); }
  [data-dir="observatory"] .hero__text { gap: var(--s5); justify-items: center; }
  [data-dir="observatory"] .hero__name { justify-items: center; }
  [data-dir="observatory"] .hero__aside { order: -1; }
  [data-dir="observatory"] .hero__tag { text-align: center; margin-inline: auto; }
  [data-dir="observatory"] .meridian { display: none; }
  [data-dir="observatory"] .home .brand { opacity: 0; }
  .wrap { padding: 0 var(--s5); }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry__meta { text-align: left; }
  .reader { padding-left: var(--s5); padding-right: var(--s5); }
}
@media (max-width: 540px) {
  .controls .ctl span.lbl { display: none; }
  .hero { padding-left: var(--s5); padding-right: var(--s5); }
  .foot__inner { flex-direction: column; align-items: flex-start; gap: var(--s4); }
}

/* safe-area (mobile) */
@supports (padding: max(0px)) {
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .foot { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
}

/* ---------- concept direction dock (prototype affordance) ---------- */
.dir-dock {
  position: fixed; z-index: 45; right: 22px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border-radius: var(--r-full);
  background: color-mix(in oklab, var(--raised) 78%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  opacity: .55; transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.dir-dock:hover { opacity: 1; transform: translateY(-2px); }
.dir-dock__label { color: var(--ink-3); letter-spacing: .2em; }
@media (max-width: 540px) { .dir-dock { bottom: 16px; right: 12px; padding-left: 12px; } .dir-dock__label { display: none; } }

/* ---------- motif intensity ---------- */
[data-motif="off"] .stars { opacity: 0 !important; }
[data-motif="off"] .cosmos__img { opacity: .015 !important; }
[data-theme="dark"][data-motif="lush"] .cosmos__img { opacity: .42 !important; }
[data-theme="dark"][data-motif="lush"] .stars { opacity: 1 !important; }
[data-theme="light"][data-motif="lush"] .cosmos__img { opacity: .1 !important; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rise { opacity: 1; transform: none; }
  .stars i { animation: none; opacity: .5; }
}
@media print {
  .rise, .view { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cosmos { display: none; }
}