/* 光年纪 — 个人网站样式
   Nudge 变量：--site-bg --site-fg --site-accent --site-on-accent --site-surface
   --site-muted --site-border --site-font --site-radius --site-space --site-type --site-motion */

:root {
  --site-bg: #070b14;
  --site-fg: #ece7dc;
  --site-accent: #e3a558;
  --site-on-accent: #17120a;
  --site-surface: #0e1522;
  --site-muted: #8d96a8;
  --site-border: #1f2b3f;
  --site-font: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC",
    "Source Han Serif CN", "SimSun", Georgia, serif;
  --site-radius: 16px;
  --site-space: 1;
  --site-type: 1;
  --site-motion: 1;

  --font-ui: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --gutter: calc(24px * var(--site-space, 1));
  --quick: calc(180ms * var(--site-motion, 1));
  --slow: calc(520ms * var(--site-motion, 1));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(64px * var(--site-space, 1));
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font);
  font-size: calc(17px * var(--site-type, 1));
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

a { color: var(--site-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: color-mix(in srgb, var(--site-accent) 70%, var(--site-fg)); }

:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute;
  left: calc(-1 * var(--gutter) * 12);
  top: 0;
  z-index: 5;
  background: var(--site-accent);
  color: var(--site-on-accent);
  padding: calc(8px * var(--site-space, 1)) calc(16px * var(--site-space, 1));
  border-radius: 0 0 var(--site-radius) 0;
}
.skip:focus { left: 0; }

cite { font-style: normal; }

/* 顶栏 */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  max-width: 62rem;
  margin: 0 auto;
  padding: calc(26px * var(--site-space, 1)) var(--gutter) calc(4px * var(--site-space, 1));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--site-space, 1));
  color: var(--site-fg);
  text-decoration: none;
  font-size: calc(18px * var(--site-type, 1));
  letter-spacing: 0.14em;
}
.brand:hover { color: var(--site-fg); }

.mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--site-accent);
  box-shadow: 0 0 calc(14px * var(--site-space, 1)) var(--site-accent);
}

nav {
  display: flex;
  gap: calc(22px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  letter-spacing: 0.12em;
}

nav a {
  color: var(--site-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--quick) ease, border-color var(--quick) ease;
}
nav a:hover,
nav a[aria-current="true"] { color: var(--site-fg); border-bottom-color: var(--site-accent); }

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 开篇 */

.hero {
  position: relative;
  padding: calc(88px * var(--site-space, 1)) 0 calc(52px * var(--site-space, 1));
  max-width: 44rem;
}

.kicker {
  margin: 0 0 calc(22px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  letter-spacing: 0.28em;
  color: var(--site-muted);
  animation: enter var(--slow) ease both;
}

.hero h1 {
  margin: 0 0 calc(26px * var(--site-space, 1));
  font-size: calc(clamp(60px, 11vw, 128px) * var(--site-type, 1));
  line-height: 1;
  letter-spacing: 0.08em;
  background: linear-gradient(168deg, var(--site-fg) 30%, color-mix(in srgb, var(--site-accent) 60%, var(--site-fg)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: enter var(--slow) ease both;
  animation-delay: calc(60ms * var(--site-motion, 1));
}

.lede {
  margin: 0;
  max-width: 26rem;
  font-size: calc(18px * var(--site-type, 1));
  line-height: 2;
  color: color-mix(in srgb, var(--site-fg) 82%, var(--site-bg));
  animation: enter var(--slow) ease both;
  animation-delay: calc(120ms * var(--site-motion, 1));
}

@keyframes enter {
  from { opacity: 0; transform: translateY(calc(12px * var(--site-space, 1))); }
  to { opacity: 1; transform: none; }
}

.verse {
  position: absolute;
  right: 0;
  top: calc(72px * var(--site-space, 1));
  margin: 0;
  padding-right: calc(16px * var(--site-space, 1));
  border-right: 1px solid var(--site-border);
  writing-mode: vertical-rl;
  font-size: calc(15px * var(--site-type, 1));
  line-height: 2.2;
  letter-spacing: 0.24em;
  color: var(--site-muted);
}

.verse span {
  display: block;
  margin-top: calc(20px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(10px * var(--site-type, 1));
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--site-muted) 65%, var(--site-bg));
}

/* 光行读数 */

.odometer {
  position: relative;
  padding: calc(34px * var(--site-space, 1)) calc(32px * var(--site-space, 1)) calc(28px * var(--site-space, 1));
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  background:
    radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--site-accent) 9%, transparent), transparent 55%),
    color-mix(in srgb, var(--site-surface) 78%, transparent);
}

.odo-label {
  margin: 0 0 calc(6px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(13px * var(--site-type, 1));
  letter-spacing: 0.1em;
  color: var(--site-muted);
}

.odo-num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(4px * var(--site-space, 1)) calc(10px * var(--site-space, 1));
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.odo-num #km {
  font-size: calc(clamp(22px, 5.6vw, 58px) * var(--site-type, 1));
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--site-fg);
  text-shadow: 0 0 calc(26px * var(--site-space, 1)) color-mix(in srgb, var(--site-accent) 32%, transparent);
}

.odo-unit {
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  letter-spacing: 0.16em;
  color: var(--site-muted);
}

.odo-sub {
  margin: calc(4px * var(--site-space, 1)) 0 calc(18px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  letter-spacing: 0.08em;
  color: var(--site-muted);
}

.odo-alts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--site-space, 1)) calc(26px * var(--site-space, 1));
  margin: 0;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  color: var(--site-muted);
}

.odo-alts b {
  font-weight: 500;
  color: color-mix(in srgb, var(--site-fg) 85%, var(--site-bg));
  font-variant-numeric: tabular-nums;
}

/* 纪年刻度 */

.ruler {
  position: relative;
  height: calc(34px * var(--site-space, 1));
  margin: calc(40px * var(--site-space, 1)) 0 calc(14px * var(--site-space, 1));
  border-top: 1px solid var(--site-border);
}

.ruler::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(7px * var(--site-space, 1));
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--site-border) 90%, var(--site-fg)) 0 1px,
    transparent 1px calc(100% / 24)
  );
  opacity: 0.7;
}

.ruler .year {
  position: absolute;
  top: calc(13px * var(--site-space, 1));
  left: var(--p);
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: calc(11px * var(--site-type, 1));
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--site-muted) 80%, var(--site-bg));
  font-variant-numeric: tabular-nums;
}
.ruler .year:first-child { transform: none; }

.ruler .now {
  position: absolute;
  top: 0;
  left: var(--now-p, 78%);
  width: 9px;
  height: 9px;
  margin: calc(-5px * var(--site-space, 1)) 0 0 -4.5px;
  border-radius: 50%;
  background: var(--site-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--site-accent) 18%, transparent),
    0 0 calc(16px * var(--site-space, 1)) var(--site-accent);
  font-size: 0;
}

.ruler .now::before {
  content: "此刻";
  position: absolute;
  left: 50%;
  bottom: 170%;
  transform: translateX(-50%);
  font-size: calc(11px * var(--site-type, 1));
  letter-spacing: 0.14em;
  color: var(--site-accent);
  white-space: nowrap;
}

/* 起点 */

.origin {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--site-space, 1));
  margin: 0;
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  color: var(--site-muted);
}

.origin label { letter-spacing: 0.1em; }

input[type="date"] {
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  color: var(--site-fg);
  background: transparent;
  border: 1px solid var(--site-border);
  border-radius: calc(999px * var(--site-space, 1));
  padding: calc(5px * var(--site-space, 1)) calc(12px * var(--site-space, 1));
  transition: border-color var(--quick) ease;
}
input[type="date"]:hover { border-color: color-mix(in srgb, var(--site-accent) 60%, var(--site-border)); }

::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; opacity: 0.7; }

/* 章节 */

.chapter {
  position: relative;
  padding: calc(78px * var(--site-space, 1)) 0 calc(24px * var(--site-space, 1));
}

.chapter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: calc(26px * var(--site-space, 1));
  padding-bottom: calc(12px * var(--site-space, 1));
  border-bottom: 1px solid var(--site-border);
}

.chapter-head h2 {
  margin: 0;
  font-size: calc(26px * var(--site-type, 1));
  font-weight: 500;
  letter-spacing: 0.24em;
}

.chapter-head p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  letter-spacing: 0.1em;
  color: var(--site-muted);
}

/* 纪事 */

.entry {
  border-bottom: 1px solid color-mix(in srgb, var(--site-border) 65%, transparent);
}

.entry summary {
  display: flex;
  align-items: baseline;
  gap: calc(24px * var(--site-space, 1));
  padding: calc(20px * var(--site-space, 1)) 0;
  cursor: pointer;
  list-style: none;
}
.entry summary::-webkit-details-marker { display: none; }

.when {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: calc(10px * var(--site-space, 1));
  width: calc(9.5rem * var(--site-space, 1));
}

.when time {
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  letter-spacing: 0.06em;
  color: var(--site-muted);
  font-variant-numeric: tabular-nums;
}

.when .say {
  font-size: calc(11px * var(--site-type, 1));
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--site-accent) 70%, var(--site-muted));
}

.title {
  position: relative;
  font-size: calc(19px * var(--site-type, 1));
  letter-spacing: 0.02em;
  transition: color var(--quick) ease;
}

.title::after {
  content: "+";
  display: inline-block;
  margin-left: calc(10px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(14px * var(--site-type, 1));
  color: color-mix(in srgb, var(--site-muted) 80%, var(--site-bg));
  transition: transform var(--quick) ease;
}
.entry [open] .title::after { content: "−"; }
.entry summary:hover .title { color: var(--site-accent); }

.entry .body {
  max-width: 38rem;
  padding: 0 0 calc(24px * var(--site-space, 1)) calc(9.5rem * var(--site-space, 1) + 24px * var(--site-space, 1));
  color: color-mix(in srgb, var(--site-fg) 80%, var(--site-bg));
}
.entry .body p { margin: 0 0 calc(14px * var(--site-space, 1)); }
.entry .body p:last-child { margin-bottom: 0; }

/* 星野 */

.plates {
  display: grid;
  gap: calc(34px * var(--site-space, 1));
}

figure { margin: 0; }

figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--site-radius);
  background: var(--site-surface);
}

figcaption {
  margin-top: calc(12px * var(--site-space, 1));
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  line-height: 1.9;
  color: var(--site-muted);
}

figcaption span {
  display: block;
  margin-bottom: calc(4px * var(--site-space, 1));
  font-family: var(--site-font);
  font-size: calc(16px * var(--site-type, 1));
  letter-spacing: 0.1em;
  color: var(--site-fg);
}

/* 架上 */

.shelf {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shelf li {
  display: grid;
  grid-template-columns: calc(2.2rem * var(--site-space, 1)) minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: calc(14px * var(--site-space, 1));
  padding: calc(13px * var(--site-space, 1)) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
  font-size: calc(17px * var(--site-type, 1));
}

.kind {
  font-family: var(--font-ui);
  font-size: calc(11px * var(--site-type, 1));
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--site-accent) 75%, var(--site-muted));
}

.who {
  color: var(--site-muted);
  font-size: calc(14px * var(--site-type, 1));
  white-space: nowrap;
}

.state {
  font-family: var(--font-ui);
  font-size: calc(11px * var(--site-type, 1));
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--site-muted) 75%, var(--site-bg));
  border: 1px solid color-mix(in srgb, var(--site-border) 90%, transparent);
  border-radius: calc(999px * var(--site-space, 1));
  padding: calc(2px * var(--site-space, 1)) calc(9px * var(--site-space, 1));
  white-space: nowrap;
}

/* 页脚 */

.colophon {
  max-width: 62rem;
  margin: calc(60px * var(--site-space, 1)) auto 0;
  padding: calc(28px * var(--site-space, 1)) var(--gutter) calc(46px * var(--site-space, 1));
  border-top: 1px solid var(--site-border);
}

.write {
  margin: 0 0 calc(10px * var(--site-space, 1));
  font-family: var(--font-ui);
  font-size: calc(13px * var(--site-type, 1));
  line-height: 1.9;
  color: var(--site-muted);
}

.write a { color: color-mix(in srgb, var(--site-fg) 80%, var(--site-muted)); }
.write a:hover { color: var(--site-accent); }

.mini {
  margin-left: calc(8px * var(--site-space, 1));
  padding: 0 0 1px;
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  color: var(--site-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--site-border);
  cursor: pointer;
  transition: color var(--quick) ease, border-color var(--quick) ease;
}
.mini:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }

.status { margin-left: calc(10px * var(--site-space, 1)); color: var(--site-accent); }

.legal {
  margin: calc(22px * var(--site-space, 1)) 0 0;
  font-family: var(--font-ui);
  font-size: calc(12px * var(--site-type, 1));
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--site-muted) 80%, var(--site-bg));
}

.legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--site-border);
}
.legal a:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }

.sep { margin: 0 calc(8px * var(--site-space, 1)); }

/* 入场 */

.reveal {
  opacity: 0;
  transform: translateY(calc(14px * var(--site-space, 1)));
  transition: opacity var(--slow) ease, transform var(--slow) ease;
}
.reveal.in { opacity: 1; transform: none; }

/* 宽屏：图片错落 */

@media (min-width: 56rem) {
  .plates { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .plates figure:nth-child(2) { margin-top: calc(64px * var(--site-space, 1)); }
}

/* 窄屏 */

@media (max-width: 60rem) {
  .verse { display: none; }
}

@media (max-width: 46rem) {
  .hero { padding-top: calc(58px * var(--site-space, 1)); }
  .odometer { padding: calc(26px * var(--site-space, 1)) calc(20px * var(--site-space, 1)) calc(22px * var(--site-space, 1)); }
  .entry summary { flex-direction: column; gap: calc(4px * var(--site-space, 1)); }
  .when { width: auto; }
  .entry .body { padding-left: 0; }
  .shelf li { grid-template-columns: calc(2rem * var(--site-space, 1)) minmax(0, 1fr) auto; row-gap: calc(2px * var(--site-space, 1)); }
  .shelf .who { display: none; }
  .masthead { padding-top: calc(20px * var(--site-space, 1)); }
}

/* 减少动效 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}