:root {
  --latin: "Cormorant Garamond", "Noto Serif SC", "Songti SC", Georgia, serif;
  --cjk: "Noto Serif SC", "Songti SC", "Cormorant Garamond", serif;
  --gutter: clamp(20px, 6vw, 88px);
  --sky-top: #f3eee2;
  --sky-bottom: #f5f0e4;
  --text: #171c2e;
  --halo: rgba(255, 246, 235, .4);
  --orb: #c2402a;
}
.night {
  --sky-top: #0b1024;
  --sky-bottom: #151c3a;
  --text: #f6f1e6;
  --halo: rgba(10, 12, 30, .4);
  --orb: #ece4cf;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky-bottom); }
body, h1, h2, p, ol, ul, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
i, em, cite { font-family: var(--latin); }
a { color: inherit; }
body { background: var(--sky-top); color: var(--text); font-family: var(--cjk); font-weight: 300; }
/* 微信调大字号时按设计字号显示，字和画布上的日月海才对得上 */
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 从后到前：天空、日月星辰、文字、海。文字滚到海平线时沉到海面之下 */
.sky, #heaven, #sea { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; }
.sky { background: linear-gradient(var(--sky-top), var(--sky-bottom)); }
/* iOS Safari 的状态栏和工具栏取贴边固定元素的纯色，两条细边让它们跟着天色走。要压在最上层才取得到 */
.edge { display: none; position: fixed; z-index: 4; left: 0; right: 0; height: 10px; }
.edge.tick { height: 11px; }
.edge.top { top: 0; background: var(--sky-top); }
.edge.bottom { bottom: 0; background: var(--sky-bottom); }
@supports (-webkit-touch-callout: none) {
  .edge { display: block; }
}
/* 晨昏时天色上下反差大，字周围垫一层相反明度的光晕，任何高度都读得清 */
main { position: relative; z-index: 1; color: var(--text); text-shadow: 0 0 2px var(--halo), 0 0 12px var(--halo); transition: color .35s; }
#sea { z-index: 2; }

.clock {
  position: fixed; z-index: 3; top: clamp(20px, 5vh, 44px); right: var(--gutter);
  display: none; text-align: right; color: var(--text); transition: color .35s;
}
.js .clock { display: block; }
.clock time { display: block; font: 400 clamp(26px, 3vw, 38px)/1 var(--latin); font-variant-numeric: lining-nums tabular-nums; }
.clock p { margin-top: 6px; font: 300 clamp(13px, 1.1vw, 15px)/1.4 var(--cjk); letter-spacing: .14em; margin-right: -.14em; }

.hero { min-height: 100vh; min-height: 100svh; padding: clamp(20px, 5vh, 44px) var(--gutter); }
.js .hero, .js .clock, .js .verse, .js .dive { opacity: 0; }
/* 脚本万一出错，文字也要自己现身 */
.js .hero, .js .clock { animation: appear .01s 6s forwards; }
@keyframes appear { to { opacity: 1; } }

h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-weight: 400; }
h1 .en { font: 300 clamp(46px, 5.4vw, 78px)/.95 var(--latin); letter-spacing: -.012em; }
h1 b { font-weight: inherit; color: var(--orb); }
h1 .zh { font: 500 clamp(15px, 1.25vw, 18px)/1.4 var(--cjk); letter-spacing: .6em; }
.tags { display: grid; width: fit-content; gap: clamp(7px, 1.1vh, 11px); margin-top: clamp(16px, 2.8vh, 26px); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; }
.tags i { display: block; font-size: 1.16em; line-height: 1.25; opacity: .8; }
.mail, .back, .path a { border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration: none; }
.mail { display: inline-block; margin-top: clamp(12px, 2vh, 18px); font: italic 400 clamp(16px, 1.25vw, 18px)/1.3 var(--latin); }

/* 页面底部的测深线：一个 o 顺着细线沉下去，示意下面还有很深 */
.dive {
  position: fixed; z-index: 3; left: 50%; bottom: 0; width: 88px; height: clamp(84px, 12vh, 112px); margin-left: -44px;
  color: var(--text); -webkit-tap-highlight-color: transparent;
}
.dive::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(transparent, var(--orb) 22%, var(--orb));
}
.dive i { position: absolute; left: 50%; top: -14px; width: 34px; height: 34px; margin-left: -17px; border: 2px solid var(--orb); border-radius: 50%; background: var(--sky-bottom); font-size: 0; transform: translateY(24px); animation: sound 2.4s cubic-bezier(.55, 0, .35, 1) infinite; }
@keyframes sound {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  14%, 74% { opacity: 1; }
  100% { transform: translateY(calc(clamp(84px, 12vh, 112px) - 6px)) scale(1); opacity: 0; }
}

.verse {
  position: fixed; z-index: 3; top: clamp(112px, 18vh, 160px); right: var(--gutter);
  color: var(--text); writing-mode: vertical-rl; transition: color .35s;
}
#verse-text { transition: opacity .35s; font-size: clamp(14px, 1.2vw, 17px); line-height: 2.1; }
#verse-text span { display: block; letter-spacing: .3em; }
#verse-text cite { display: block; margin-top: 1.4em; font: 300 12px/2 var(--cjk); letter-spacing: .2em; }
#verse-text i { display: block; font-size: 15px; line-height: 1.5; }

.panel { min-height: 100vh; min-height: 100svh; padding: 18vh var(--gutter) 30vh; max-width: min(56rem, 68vw); }
h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; font-weight: 300; }
h2 span { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: .08em; }
h2 i { font-size: clamp(24px, 2.5vw, 34px); font-weight: 400; }
.epigraph { margin-bottom: clamp(44px, 8vh, 72px); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.8; letter-spacing: .04em; }
.epigraph i { display: block; font-size: 1.14em; line-height: 1.35; letter-spacing: 0; }
.epigraph cite { display: block; margin-top: 4px; font: 300 12px/1.8 var(--cjk); letter-spacing: .12em; opacity: .8; }

/* 三股线交织：每条履历骑在自己那股线上，线由 path.js 算出来 */
.weave { position: relative; }
.threads { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.threads path { fill: none; }
.threads text { fill: currentColor; font: italic 400 11px var(--latin); letter-spacing: .08em; opacity: .24; }
.path { position: relative; display: grid; gap: clamp(26px, 4.4vh, 40px); }
.path li { position: relative; max-width: calc(100% - var(--swing, 0px)); padding-left: 18px; transform: translateX(var(--x, 0)); }
.path li::before {
  content: ""; position: absolute; left: -4px; top: .72em; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor; background: var(--sky-top); transition: background .5s, border-color .5s;
}
.path li.seen::before { background: var(--orb); border-color: var(--orb); }
/* 收尾：不标年份，单独留一句，三股线在这里收成一点 */
.path li:last-child { margin-top: clamp(24px, 5vh, 48px); font-size: clamp(19px, 1.7vw, 24px); }
.path li:last-child::before { width: 12px; height: 12px; left: -6px; top: calc(.8em - 6px); }
.path .when { display: block; margin-bottom: 2px; font: italic 400 clamp(23px, 2vw, 29px)/1.2 var(--latin); font-synthesis: none; font-variant-numeric: lining-nums; }
.path .what { display: block; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; font-variant-numeric: lining-nums; text-wrap: pretty; }
.path .what i { display: block; font-size: 1.14em; line-height: 1.35; opacity: .8; }
.path [data-strand="world"] .what { font-size: clamp(14px, 1.1vw, 16px); }
.path [data-strand="world"] .what > i { font-size: 1.16em; }
.path li:last-child .what { font-size: inherit; line-height: 1.6; }
.path li:last-child .what > span { display: inline-block; }
.path li:last-child .what i { font-size: 1em; }

/* 圈点：朱笔圈下要找的词，和天上那个圈是一支笔。标点跟着词走，不落单 */
.keep { white-space: nowrap; }
.ring { position: relative; display: inline-block; margin: 0 .3em; background: none; color: inherit; }
.ring svg { position: absolute; overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--orb); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s .25s cubic-bezier(.45, 0, .3, 1); }
.seen .ring path { stroke-dashoffset: 0; }

.coda { padding: clamp(20px, 5vh, 44px) var(--gutter) 0; max-width: none; }
.coda blockquote { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.6; letter-spacing: .06em; }
.coda blockquote i { display: block; margin-top: 6px; font-size: .92em; line-height: 1.3; letter-spacing: 0; }
.coda cite { display: block; margin-top: 12px; font: 300 13px/1.6 var(--cjk); letter-spacing: .1em; }
.again { margin-top: 22px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.75; }
.again i { display: block; font-size: 1.2em; line-height: 1.4; }
.leave { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 16px; }
.leave .mail { margin-top: 0; }
.back { display: inline-block; padding: 2px 0; font-size: 13px; line-height: 1.6; }
.back i { margin-left: .5em; font-size: 15px; }

@media (max-height: 560px) {
  #verse-text i { display: none; }
}

@media (max-width: 720px) {
  #verse-text i { display: none; }
  .panel { max-width: none; padding-top: 14vh; }
  .coda { padding-top: clamp(84px, 13vh, 110px); }
  .threads text { font-size: 9px; letter-spacing: .04em; }
  .path li { max-width: none; padding-left: 52px; transform: none; }
  .path li::before { left: calc(var(--x, 0px) - 4px); }
  .path li:last-child::before { left: calc(var(--x, 0px) - 6px); }
  /* 手机上文字从时钟底下经过，顶部罩一层天色让它淡出 */
  main::before {
    content: ""; position: fixed; z-index: 1; top: 0; left: 0; right: 0; height: 104px;
    background: linear-gradient(var(--sky-top) 74%, transparent); pointer-events: none; opacity: var(--fog, 0);
  }
}

/* 手机首屏放不下两种文字，只留一种，另一种在履历里 */
@media (max-width: 480px), (max-height: 560px) {
  .tags { gap: clamp(10px, 1.6vh, 14px); font-size: clamp(14px, 4vw, 16px); }
  .tags i { display: none; }
  .lang-en .tags i { display: block; opacity: 1; }
  .lang-en .tags span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dive i { animation: none; }
  .ring path { transition: none; }
}