/* =========================================================
 * 曾晨个人网站 · 样式
 *
 * 底层原则：黄金比例 φ = 1.618
 *   · 字号：正文 1.0625rem（浏览器默认字号下 = 17px，随访客的字号偏好缩放）× φ^(n/4)，每升 4 级正好放大一个 φ（令牌 --t-*）
 *   · 间距：斐波那契数列 3 5 8 13 21 34 55 89 144 377（相邻两项之比趋近 φ，令牌 --s-*）
 *   · 行高：正文 φ，标题 √φ
 *   · 比例：并排两栏 φ : 1；卡片封面 φ : 1；首屏的梧桐树画幅 610 × 987 与台历 144 × 233 皆 1 : φ；页面宽度 = 阅读宽度 × φ
 *   · 圆角、动效时长同样取斐波那契数
 * 以后新增或修改外观，只用这里的令牌；需要新数值时，也必须能由 φ 推出。
 * ========================================================= */

/* ---------- 字体：自托管，由 tools/subset-fonts.py 生成 ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* 中文字体只含网站用到的字 */
@font-face {
  font-family: "Noto Serif SC";
  src: url("../assets/fonts/noto-serif-sc.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 黄金比例 ===== */
  --phi: 1.618;
  --sqrt-phi: 1.272;

  /* 字号：--t-n = 正文 × φ^(n/4) */
  --t-base: 1.0625rem; /* 浏览器默认 16px 时 = 17px */
  --t--3: calc(var(--t-base) * .6971); /* 11.9 */
  --t--2: calc(var(--t-base) * .7862); /* 13.4 */
  --t--1: calc(var(--t-base) * .8867); /* 15.1 */
  --t-0: var(--t-base);                /* 17   */
  --t-1: calc(var(--t-base) * 1.1278); /* 19.2 */
  --t-2: calc(var(--t-base) * 1.2720); /* 21.6 */
  --t-3: calc(var(--t-base) * 1.4346); /* 24.4 */
  --t-4: calc(var(--t-base) * 1.6180); /* 27.5 */
  --t-6: calc(var(--t-base) * 2.0582); /* 35.0 */
  --t-8: calc(var(--t-base) * 2.6180); /* 44.5 */
  --t-10: calc(var(--t-base) * 3.3302); /* 56.6 */
  --t-12: calc(var(--t-base) * 4.2361); /* 72.0 */

  /* 间距：斐波那契 */
  --s-1: 3px;
  --s-2: 5px;
  --s-3: 8px;
  --s-4: 13px;
  --s-5: 21px;
  --s-6: 34px;
  --s-7: 55px;
  --s-8: 89px;
  --s-9: 144px;

  /* 行高 */
  --lh: 1.618;
  --lh-tight: 1.272;

  /* 圆角 */
  --r-1: 5px;
  --r-2: 8px;
  --r-3: 13px;
  --r-4: 21px;
  --r-5: 34px;
  --r-pill: 999px;

  /* 动效时长 */
  --d-1: .21s;
  --d-2: .34s;
  --d-3: .55s;
  --d-4: .89s;
  --d-step: 89ms;  /* 入场动画逐个错开的间隔 */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* 版面 */
  --measure: 42rem;                                  /* 阅读宽度 */
  --maxw: calc(var(--measure) * 1.618);              /* 内容宽度 = 阅读宽度 × φ */
  --gutter: clamp(var(--s-4), 4vw, var(--s-6));
  --header-h: var(--s-7);
  --cols-phi: minmax(0, 1.618fr) minmax(0, 1fr);     /* 并排两栏 φ : 1 */
  --art-h: 610px;                                    /* 首屏右栏画面的高度：树从底边长出，顶部被裁掉，像在街上抬头看一棵大树 */
  --card-min: 322px;                                 /* 卡片最小宽 = 89 + 233（卢卡斯数，相邻两项之比同样趋近 φ） */

  /* 纸张与墨色 */
  --paper: #f6f0e4;
  --paper-deep: #eee5d4;
  --card: #fbf8f1;
  --ink: #2b2520;
  --ink-soft: #594f46;
  --ink-faint: #6b5f51;
  --line: #dccfba;

  /* 点缀色：赤陶红 + 鼠尾草绿 */
  --accent: #a94f28;
  --accent-hover: #8c3d1b;
  --accent-tint: #f1dcc8;
  --on-accent: #fffaf2;
  --accent-inv: #eba47c; /* 用在深色联系卡片上 */
  --sage: #566a4b;

  /* 首屏梧桐树的颜色：平时是绿叶（秋季主题里换成金黄，见文件末尾的秋季块） */
  --tree-leaf-1: #7b9452;   /* 树冠：亮绿 */
  --tree-leaf-2: #55703f;
  --tree-leaf-3: #a9b96f;
  --tree-trunk-1: #e6dfc4;  /* 树干：剥落后露出的奶白 */
  --tree-trunk-2: #b8b18a;
  --tree-trunk-3: #97a08e;
  --tree-seed: #8e7a58;
  --tree-leaf-4: #3f5530;
  --tree-bark-4: #726c54;
  --tree-twig: #6b5f49;
  /* 老梧桐新增的三个令牌：深影里的叶、老树皮 / 背光的枝、细枝（四种状态各一组值，秋季块和深色块里另有） */

  --shadow: 0 1px 2px rgb(70 45 20 / .06), 0 13px 34px -13px rgb(70 45 20 / .25);

  --font-display: "Fraunces", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-body: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;

  /* 纸张颗粒纹理 */
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='144' height='144'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .2 0'/></filter><rect width='144' height='144' filter='url(%23n)'/></svg>");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1814;
    --paper-deep: #241f1a;
    --card: #28221c;
    --ink: #efe6d7;
    --ink-soft: #c9bdab;
    --ink-faint: #9a8d7d;
    --line: #3b332b;

    --accent: #e3895a;
    --accent-hover: #f0a074;
    --accent-tint: #46291b;
    --on-accent: #1c1814;
    --accent-inv: #9b421b;
    --sage: #a7bc95;

  --tree-leaf-1: #7a955a;
  --tree-leaf-2: #52683f;
  --tree-leaf-3: #a3b26f;
  --tree-trunk-1: #5a5444;
  --tree-trunk-2: #6e6b4f;
  --tree-trunk-3: #5d685a;
  --tree-seed: #9c8a66;
  --tree-leaf-4: #34452b;
  --tree-bark-4: #3f3b30;
  --tree-twig: #857a65;

    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 13px 34px -13px rgb(0 0 0 / .7);
    --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='144' height='144'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .08 0'/></filter><rect width='144' height='144' filter='url(%23n)'/></svg>");

    color-scheme: dark;
  }
}

/* ---------- 基础 ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.013em;
  text-wrap: balance;
}

html[lang="zh-CN"] :is(h1, h2, h3, h4) { letter-spacing: .034em; }

p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 600; color: var(--ink); }

::selection { background: var(--accent-tint); color: var(--ink); }

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

/* 仅英文时使用斜体（中文没有真正的斜体） */
.it:lang(en) { font-style: italic; }

.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: calc(-1 * var(--s-7));
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

.noscript {
  max-width: var(--measure);
  margin: var(--s-9) auto;
  padding: 0 var(--s-4);
  text-align: center;
}

/* index.html 里写死的一小段简介：给不运行 JS 的搜索引擎和抓取器看；浏览器开着 JS 时不显示，页面渲染后会被整个替换 */
.prerender { padding-block: var(--s-8); }
.prerender h1 { margin-bottom: var(--s-4); }
.prerender p { margin-bottom: var(--s-4); max-width: var(--measure); }
.js .prerender { display: none; }

/* ---------- 顶部导航 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 85.4%, transparent); /* 旧浏览器的退路见文件末尾的 @supports */
  -webkit-backdrop-filter: saturate(1.272) blur(13px);
  backdrop-filter: saturate(1.272) blur(13px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-2);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* html 的 scroll-padding-top 是为了正文不被吸顶导航挡住；导航自己的按钮不需要它，
 * 否则页面中途用 Tab 键经过导航时，每按一次页面都会往上跳 */
.site-header * { scroll-margin-top: calc(-1 * (var(--header-h) + var(--s-5))); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t--1);
  line-height: 1;
}

.nav-right { display: flex; align-items: center; gap: var(--s-4); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: var(--t--1);
  text-decoration: none;
  transition: color var(--d-1), background-color var(--d-1);
}
.nav-links a:hover { color: var(--ink); background: var(--paper-deep); }
.nav-links a[aria-current] { color: var(--accent); }

.lang-switch {
  display: inline-flex;
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
}

.lang-switch button {
  appearance: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--t--2);
  line-height: var(--lh);
  cursor: pointer;
  transition: color var(--d-1), background-color var(--d-1);
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.menu-toggle { display: none; }

/* ---------- 按钮与标签 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .618em;
  padding: .618em 1.618em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-size: var(--t--1);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-1), background-color var(--d-1), border-color var(--d-1), color var(--d-1);
}
.btn .arrow { transition: transform var(--d-1); }
.btn:hover .arrow { transform: translateX(var(--s-1)); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(calc(-1 * var(--s-1))); }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-faint); background: var(--card); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: var(--s-1) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--t--2);
  line-height: var(--lh);
}
.tag-sm { padding: 1px var(--s-3); font-size: var(--t--3); }

/* ---------- 首屏 ---------- */

.hero {
  --hero-pt: clamp(var(--s-6), 8vw, var(--s-8));  /* 首屏顶部留白；右栏画面向上伸进这段 */
  --hero-gap: clamp(var(--s-6), 7vw, var(--s-8)); /* 两栏之间的空当；树冠左边的叶子可以探进来 */
  padding-block: var(--hero-pt) clamp(var(--s-7), 8vw, var(--s-8));
}

.hero-grid {
  display: grid;
  grid-template-columns: var(--cols-phi);
  gap: var(--hero-gap);
  align-items: center;
}

.hero-hello {
  margin-bottom: .382em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--t-1);
}

.hero-name {
  margin-bottom: .236em;
  font-size: clamp(var(--t-8), 8vw, var(--t-12));
}
html[lang="zh-CN"] .hero-name { letter-spacing: .09em; }

.hero-role {
  margin-bottom: var(--s-5);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: clamp(var(--t-0), 2vw, var(--t-2));
}

.hero-intro {
  max-width: 34em;
  margin-bottom: var(--s-6);
  color: var(--ink-soft);
  font-size: var(--t-1);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  color: var(--ink-faint);
  font-size: var(--t--1);
}

.hero-loc, .status { display: inline-flex; align-items: center; gap: var(--s-3); }
.status { color: var(--sage); }

.status-dot {
  position: relative;
  width: var(--s-3);
  height: var(--s-3);
  border-radius: 50%;
  background: var(--sage);
}

/* 呼吸圈画在 ::after 上，只动 transform 和 opacity，由合成线程完成，不必每帧重绘页面。
 * 8px 的点向外扩到 3 倍（两侧各多 8px） */
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sage);
  opacity: 0;
  animation: pulse 2.33s ease-out infinite;
}

@keyframes pulse {
  0%          { transform: scale(1); opacity: .618; }
  61.8%, 100% { transform: scale(3); opacity: 0; }
}

/* 首屏右栏：一棵老梧桐。画面从右栏左边一直铺到视口右边缘，高 610（--art-h）；
 * 树（viewBox 610 × 987，1 : φ）以 xMidYMax slice 填满画面：从底边长出，顶部被裁掉，像在街上抬头看一棵大树。
 * 台历站在画面左下角（树脚旁）。树和台历叠在同一格：容器高 = 两者中较高者，访客把字号放大时台历不会顶到上面的信息行 */
.hero-art {
  --bleed: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); /* 右栏边缘到视口右边缘的距离 */
  position: relative;
  display: grid;
  justify-self: start;
  width: calc(100% + var(--bleed));
  margin-top: calc(-1 * var(--hero-pt)); /* 画面向上伸进首屏的顶部留白，树冠一直顶到导航栏下沿，裁切线就是导航栏 */
  margin-right: calc(-1 * var(--bleed));
}
.hero-art .tree, .hero-art .cal { grid-area: 1 / 1; }

.tree {
  display: block;
  width: 100%;
  height: calc(var(--art-h) + var(--hero-pt));
  align-self: end;
  /* 树冠在画面左边不被切成一条直线：viewBox 左边以外的叶子和枝梢可以探进两栏之间的空当（--hero-gap），上、右、下仍按画面裁 */
  overflow: visible;
  clip-path: inset(0 0 0 calc(-1 * var(--hero-gap)));
}

/* 三组树冠轻轻摇：main.js 把每组搬进一层独立的 <svg>（.tree-layer，与底层同框同 viewBox），整层只动 transform、
 * 各绕自己的枝基部（转轴由 main.js 换算成像素）转 ±.618°，由合成器完成，主线程不用逐帧重画。只在桌面开（手机省电） */
@media (min-width: 761px) {
  .tree-layer { animation: tree-sway 21s ease-in-out infinite alternate; will-change: transform; }
  .tree-layer-b { animation-duration: 34s; animation-delay: -13s; }
  .tree-layer-c { animation-delay: -8s; }
}
@keyframes tree-sway {
  from { transform: rotate(-.618deg); }
  to   { transform: rotate(.618deg); }
}

/* ---------- 首屏：树脚下的台历 ---------- */
/* 一张 144 × 233（1 : φ）的纸。顶上是撕掉上一页后留下的 13px 纸头，纸头下沿一排针孔（3px 孔、8px 一个）；
 * 卡片底下露出后面两页的边（各 3px 高）。只用令牌：字号 --t-*，间距 --s-*，圆角 --r-*，颜色 --card/--line/--ink/--accent。 */
.cal {
  --cal-w: 144px;
  position: relative;
  width: var(--cal-w);
  min-height: calc(var(--cal-w) * 1.618);
  padding: calc(var(--s-4) * 2) var(--s-4) var(--s-4);   /* 顶部 = 纸头 13 + 留白 13 */
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--card);
  color: var(--ink);
  box-shadow:
    0 3px 0 -1px var(--card), 0 4px 0 -1px var(--line),   /* 后面第一页 */
    0 7px 0 -2px var(--card), 0 8px 0 -2px var(--line),   /* 后面第二页 */
    var(--shadow);
  font-family: var(--font-display);
  font-size: var(--t--3);
  line-height: var(--lh-tight);
  text-align: center;
}
.cal p { margin: 0; }

/* 纸头 + 针孔：针孔画在纸头下沿上，一半在纸头里一半在纸上，所以 ::before 比纸头多 2px */
.cal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--s-4) + 2px);
  border-radius: var(--r-1) var(--r-1) 0 0;
  background:
    radial-gradient(circle, var(--paper) 1.5px, transparent 1.6px) 50% calc(var(--s-4) - 1.5px) / var(--s-3) 3px repeat-x,
    linear-gradient(var(--paper-deep), var(--paper-deep)) 0 0 / 100% var(--s-4) no-repeat;
  pointer-events: none;
}

.cal-month {
  color: var(--ink-faint);
  font-size: var(--t--3);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* 大日期：--t-10（56.6px = 正文 × φ^2.5），行高 1，字重 600 */
.cal-day {
  margin-top: var(--s-1);
  font-size: var(--t-10);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.034em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cal-day time { display: inline-block; }

.cal-week {
  margin-top: var(--s-2);
  color: var(--ink-soft);
  font-size: var(--t--2);
}

.cal-lunar {
  margin-top: var(--s-1);
  color: var(--ink-faint);
  font-size: var(--t--3);
}

/* 一小段横线，34px 宽（= 卡宽 × .236） */
.cal-rule {
  width: var(--s-6);
  height: 0;
  margin: var(--s-3) auto;
  border: 0;
  border-top: 1px solid var(--line);
}

.cal-term {
  color: var(--accent);
  font-size: var(--t--2);
  font-weight: 600;
}
/* 节气当天：只把字号升一级（--t--1），不加任何底色 */
.cal.is-term-day .cal-term { font-size: var(--t--1); }
/* 英文里 "Today is" / "day 3" 是小字，各占一行 */
.cal-term small {
  display: block;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: var(--t--3);
  font-weight: 400;
}

/* 「宜」一行：正文字体，小字；「宜」字本身是一枚小小的朱印 */
.cal-yi {
  margin-top: var(--s-2);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t--3);
  line-height: var(--lh);
  text-wrap: pretty;
}
.cal-yi b {
  display: inline-block;
  margin-right: .236em;
  padding: 0 .236em;
  border: 1px solid currentColor;
  border-radius: var(--s-1);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  vertical-align: .09em;
}
.cal[lang="en"] .cal-yi b { border: 0; padding: 0; font-style: italic; font-weight: 400; vertical-align: baseline; }
/* 英文的 Good for 要三行，用紧行高、横线少留一点，整张纸才回到 1 : φ（中文正好 233，英文 234） */
.cal[lang="en"] .cal-yi { line-height: var(--lh-tight); }
.cal[lang="en"] .cal-rule { margin-block: var(--s-2); }
.cal-yi { overflow-wrap: anywhere; }

/* 秋天：一片梧桐叶落在纸头上（只在 data-season="autumn" 时出现） */
.cal-leaf {
  display: none;
  position: absolute;
  top: calc(-1 * var(--s-3));
  right: var(--s-3);
  width: var(--s-5);
  height: var(--s-5);
  color: var(--leaf-deep);
  transform: rotate(-34deg);
  pointer-events: none;
}
[data-season="autumn"] .cal-leaf { display: block; }

.hero-art .cal { position: relative; align-self: end; justify-self: start; }

/* 信息行里的「暂停动画」小按钮 */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-6);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
  transition: color var(--d-1), background-color var(--d-1);
}
.motion-toggle { margin-inline: calc(-1 * var(--s-3)); } /* 抵消内边距，图标落在信息行 21px 的节奏上 */
.motion-toggle:hover { color: var(--ink); background: var(--paper-deep); }
.motion-toggle svg { width: var(--s-4); height: var(--s-4); fill: currentColor; }
.motion-toggle .bi-play, .motion-off .motion-toggle .bi-pause { display: none; }
.motion-off .motion-toggle .bi-play { display: inline; }

/* 访客点了暂停：求职状态的小圆点不再闪 */
.motion-off .status-dot::after { animation: none; }

/* ---------- 区块通用 ---------- */

.section { padding-block: clamp(var(--s-7), 9vw, var(--s-8)); }
/* 开场那一刻先不排版下面的区块（610 = 斐波那契数，只是占位高度），首屏能更早画出来 */
.js.is-booting .section, .js.is-booting .quote { content-visibility: auto; contain-intrinsic-size: auto 610px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-7));
}

.section-head::after {
  content: "";
  flex: 1;
  min-width: var(--s-6);
  height: 1px;
  align-self: center;
  background: var(--line);
}

.section-no {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--t-0);
}

.section-title { font-size: clamp(var(--t-4), 4.5vw, var(--t-8)); }

.section-alt {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: var(--t-0);
}

.sub-head {
  margin: clamp(var(--s-7), 8vw, var(--s-8)) 0 var(--s-5);
  font-size: var(--t-3);
}
.section-head + .sub-head { margin-top: 0; }

.section-intro {
  max-width: 34em;
  margin: calc(clamp(var(--s-6), 5vw, var(--s-7)) * -.382) 0 clamp(var(--s-5), 4vw, var(--s-6));
  color: var(--ink-soft);
  font-size: var(--t-0);
}

/* ---------- 关于我 ---------- */

.about-grid {
  display: grid;
  grid-template-columns: var(--cols-phi);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  align-items: start;
}

.about-text p {
  margin-bottom: 1em;
  color: var(--ink-soft);
  font-size: var(--t-0);
}
.about-text p:last-child { margin-bottom: 0; }

/* 首字下沉：高度正好两行（2 × φ 倍字号） */
.about-text p:first-child::first-letter {
  float: left;
  margin: .09em .146em 0 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: calc(2em * 1.618);
  font-weight: 600;
  line-height: 1;
}
/* 英文第一个词是单个字母 I 时，浮动的首字会把后面的空格吃掉（读屏念成 Imoved）；
 * content.js 里写成 I&nbsp;moved，这里把那点多出来的间距收回（φ⁻³） */
html[lang="en"] .about-text p:first-child { text-indent: -.236em; }

.facts {
  margin: 0;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--card);
}

/* 标签 : 内容 = 1 : φ² */
.fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.618fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--line);
}
.fact:last-child { border-bottom: 0; }

.fact dt { padding-top: .09em; color: var(--ink-faint); font-size: var(--t--2); }
.fact dd { margin: 0; font-size: var(--t--1); }

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 233px), 1fr));
  gap: clamp(var(--s-5), 3vw, var(--s-6));
}

.skill-group { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.skill-group h4 { margin-bottom: var(--s-1); font-size: var(--t-2); }
.skill-desc { margin-bottom: var(--s-4); color: var(--ink-soft); font-size: var(--t--1); }

/* ---------- 作品 ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: clamp(var(--s-5), 3vw, var(--s-6));
}

.project {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--card);
  transition: transform var(--d-2), box-shadow var(--d-2);
}
.project:hover { transform: translateY(calc(-1 * var(--s-2))); box-shadow: var(--shadow); }

.project-cover {
  position: relative;
  aspect-ratio: 1.618 / 1;
  overflow: hidden;
  background: var(--c);
}
/* 不支持 aspect-ratio 的旧浏览器（微信内置的旧内核等）：用内边距撑出同样的 φ : 1 */
@supports not (aspect-ratio: 1) {
  .project-cover::before { content: ""; display: block; padding-top: 61.8%; }
}

.project-cover img,
.cover-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-4) var(--ease);
}
.project:hover .project-cover img,
.project:hover .cover-art { transform: scale(1.034); }

/* 没有封面图时自动生成的封面：高光落在黄金分割点 */
.cover-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 61.8% 38.2%, rgb(255 255 255 / .3), transparent 38.2%),
    radial-gradient(circle at 0 100%, rgb(0 0 0 / .22), transparent 61.8%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 13px),
    var(--c);
}

.cover-no {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-2);
  color: rgb(255 255 255 / .9);
  font-family: var(--font-display);
  font-size: clamp(var(--s-7), 8vw, var(--s-8));
  font-style: italic;
  line-height: 1;
}

.project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--ink-faint);
  font-size: var(--t--2);
}

.project-title { font-size: var(--t-2); }
.project-desc { color: var(--ink-soft); font-size: var(--t--1); }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--s-8), 1fr));
  gap: var(--s-4) var(--s-5);
  margin: var(--s-2) 0 var(--s-1);
  padding: var(--s-4) 0;
  border-block: 1px dashed var(--line);
}
.metrics > div { display: flex; flex-direction: column-reverse; }
.metric-value {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--t-4);
  line-height: var(--lh-tight);
}
.metric-label { color: var(--ink-faint); font-size: var(--t--2); }

.project-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-3);
}

.project-link {
  color: var(--accent);
  font-size: var(--t--1);
  text-decoration: none;
  white-space: nowrap;
}
.project-link:hover { text-decoration: underline; text-underline-offset: var(--s-2); }

@media (min-width: 761px) {
  .work-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 横向大卡片：封面 : 文字 = 1 : φ，大的一份留给文字 */
  .project.is-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  }
  .project.is-featured .project-cover { aspect-ratio: auto; min-height: 377px; }
  .project.is-featured .project-body { justify-content: center; padding: clamp(var(--s-6), 4vw, var(--s-7)); }
  .project.is-featured .project-title { font-size: clamp(var(--t-3), 2.6vw, var(--t-6)); }
  .project.is-featured .project-foot { margin-top: var(--s-3); }
  .project.is-featured .cover-no { font-size: clamp(var(--s-8), 11vw, var(--s-9)); }
}

/* ---------- 经历 ---------- */

.exp-grid {
  display: grid;
  grid-template-columns: var(--cols-phi);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
}

.group-label {
  margin-bottom: var(--s-5);
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: .146em;
  text-transform: uppercase;
}
html[lang="zh-CN"] .group-label { letter-spacing: .236em; }
.group-label-spaced { margin-top: var(--s-7); }

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

.tl-item {
  position: relative;
  margin-left: var(--s-2);
  padding: 0 0 var(--s-6) var(--s-6);
  border-left: 1px solid var(--line);
}
.tl-item:last-child { padding-bottom: var(--s-1); border-left-color: transparent; }

.tl-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--s-4) + 1px) / 2); /* 圆点压在 1px 的竖线正中 */
  top: var(--s-2);
  width: var(--s-4);
  height: var(--s-4);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
}
.tl-item:first-child::before { background: var(--accent); }

.tl-period { color: var(--ink-faint); font-size: var(--t--2); }
.tl-role { margin: .236em 0 .09em; font-size: var(--t-2); }
.tl-org { color: var(--accent); }
.tl-desc { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--t--1); }
.tl-points { margin: var(--s-3) 0 0; padding-left: 1.272em; list-style: disc; color: var(--ink-soft); font-size: var(--t--1); }
.tl-points li { margin-bottom: var(--s-2); }
.tl-points li::marker { color: var(--accent); }

.awards { margin: 0; padding: 0; list-style: none; }
.award {
  display: grid;
  grid-template-columns: 3.33em minmax(0, 1fr); /* 3.33 = φ^2.5 */
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t--1);
}
.award:last-child { border-bottom: 0; }
.award-year { color: var(--accent); font-family: var(--font-display); }

/* ---------- 引言 ---------- */

.quote {
  padding-block: clamp(var(--s-7), 11vw, var(--s-9));
  border-block: 1px solid var(--line);
  background: var(--paper-deep);
  text-align: center;
}

.quote blockquote { max-width: var(--measure); margin: 0 auto; }

.quote-mark {
  display: block;
  height: .382em;
  color: var(--accent);
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--s-8);
  line-height: .786;
}

.quote p {
  margin-top: .382em;
  font-family: var(--font-display);
  font-size: clamp(var(--t-2), 3vw, var(--t-4));
  line-height: var(--lh);
  text-wrap: balance;
}
.quote p:lang(en) { font-style: italic; }

.quote cite {
  display: block;
  margin-top: var(--s-5);
  color: var(--ink-faint);
  font-size: var(--t--1);
  font-style: normal;
  letter-spacing: .056em;
}

/* ---------- 影像 ---------- */

.gallery {
  columns: 3 233px;
  column-gap: clamp(var(--s-4), 2vw, var(--s-5));
}

.gallery-item {
  margin: 0 0 clamp(var(--s-4), 2vw, var(--s-5));
  break-inside: avoid;
}
.gallery:not(.show-all) .is-extra { display: none; }

.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-2);
  background: var(--paper-deep);
  cursor: zoom-in;
}

.gallery-open img {
  width: 100%;
  height: auto;
  transition: transform var(--d-3) var(--ease);
}
.gallery-open:hover img { transform: scale(1.034); }

.gallery-more { margin-top: var(--s-5); text-align: center; }

/* ---------- 随笔 ---------- */

.notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: clamp(var(--s-4), 2.5vw, var(--s-5));
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--card);
  text-decoration: none;
  transition: transform var(--d-2), box-shadow var(--d-2), border-color var(--d-1);
}
.note-card:hover {
  transform: translateY(calc(-1 * var(--s-1)));
  border-color: color-mix(in srgb, var(--accent) 38.2%, var(--line));
  box-shadow: var(--shadow);
}

.note-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-faint);
  font-size: var(--t--2);
}
.note-title { font-size: var(--t-2); }
.note-summary { color: var(--ink-soft); font-size: var(--t--1); }
.note-more { margin-top: auto; padding-top: var(--s-2); color: var(--accent); font-size: var(--t--1); }

.note-draft {
  display: inline-block;
  padding: 0 var(--s-3);
  border: 1px dashed var(--accent);
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: var(--t--3);
  line-height: var(--lh);
}

/* ---------- 联系 ---------- */

.contact-card {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--s-6), 7vw, var(--s-8));
  border-radius: var(--r-5);
  background: var(--ink);
  color: var(--paper);
}

/* 右上角的同心圆装饰：377 的圆，外圈宽 34 和 55 */
.contact-card::before {
  content: "";
  position: absolute;
  right: calc(-1 * var(--s-9));
  top: calc(-1 * var(--s-9));
  width: 377px;
  height: 377px;
  border: 1px solid color-mix(in srgb, var(--paper) 14.6%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 var(--s-6) color-mix(in srgb, var(--paper) 3.4%, transparent),
    0 0 0 var(--s-8) color-mix(in srgb, var(--paper) 2.1%, transparent);
  pointer-events: none;
}

.contact-card > * { position: relative; }
.contact-card :focus-visible { outline-color: var(--accent-inv); }

.contact-kicker {
  margin-bottom: var(--s-5);
  color: var(--accent-inv);
  font-family: var(--font-display);
  font-size: var(--t--1);
}

.contact-title {
  max-width: 13em;
  margin-bottom: .382em;
  font-size: clamp(var(--t-6), 5vw, var(--t-10));
}

.contact-text {
  max-width: 34em;
  color: color-mix(in srgb, var(--paper) 76.4%, transparent);
  font-size: var(--t-0);
}

.contact-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin: clamp(var(--s-6), 4vw, var(--s-7)) 0;
}

.contact-email a {
  padding-bottom: var(--s-2);
  background: linear-gradient(var(--accent-inv), var(--accent-inv)) 0 100% / 100% 2px no-repeat;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(var(--t-2), 4vw, var(--t-6));
  line-height: var(--lh-tight);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--d-1);
}
.contact-email a:hover { color: var(--accent-inv); }

.copy-btn {
  appearance: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--paper) 38.2%, transparent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: var(--t--2);
  cursor: pointer;
  transition: border-color var(--d-1), background-color var(--d-1);
}
.copy-btn:hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 9%, transparent); }

.contact-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--s-9)), 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 14.6%, transparent);
  list-style: none;
}

.contact-links a,
.cl-static {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  color: var(--paper);
  text-decoration: none;
}

.cl-label {
  color: color-mix(in srgb, var(--paper) 61.8%, transparent);
  font-size: var(--t--2);
  letter-spacing: .056em;
}
.cl-value { font-size: var(--t-0); transition: color var(--d-1); }
.contact-links a:hover .cl-value { color: var(--accent-inv); }

/* ---------- 页脚 ---------- */

.site-footer {
  padding-block: var(--s-3) var(--s-7);
  color: var(--ink-faint);
  font-size: var(--t--1);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
}

.back-top { text-decoration: none; transition: color var(--d-1); }
.back-top:hover { color: var(--accent); }

/* ---------- 提示 ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t--1);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--s-4));
  transition: opacity var(--d-2), transform var(--d-2);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 弹出层：图片查看器、随笔阅读 ---------- */

html:has(dialog[open]) { overflow: hidden; }
html.dialog-open { overflow: hidden; }

/* 没有 <dialog> 的旧浏览器里，查看器和阅读页是用 <div> 模拟的 */
div.lightbox, div.reader { position: fixed; inset: 0; z-index: 70; display: none; }
div.lightbox[open] { display: grid; background: rgb(18 14 11 / .94); }
div.reader[open] { display: block; }

/* 只给读屏软件读的文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lightbox,
.reader {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.lightbox {
  overflow: hidden;
  background: transparent;
  touch-action: pan-y pinch-zoom;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(18 14 11 / .94); }
.lightbox :focus-visible { outline-color: #fff; }

.lb-figure { display: grid; justify-items: center; gap: var(--s-4); margin: 0; }

/* 尺寸按原图比例（--ar）和宽度（--w）算出，缩略图换大图时不跳动；左右各留 89px 给按钮 */
.lb-img {
  display: block;
  width: min(var(--w, 1597px), calc(100vw - 2 * var(--s-8)), calc((100vh - var(--s-9)) * var(--ar, 1.618)));
  height: auto;
  aspect-ratio: var(--ar, 1.618);
  border-radius: var(--r-1);
  box-shadow: 0 var(--s-5) var(--s-7) rgb(0 0 0 / .5);
}

.lb-count {
  color: rgb(255 255 255 / .7);
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: .09em;
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--s-7);
  height: var(--s-7);
  padding: 0;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 50%;
  background: rgb(18 14 11 / .6);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--d-1);
}
.lb-btn:hover { background: rgb(18 14 11 / .82); }
.lb-btn svg { width: var(--s-5); height: var(--s-5); }
.lb-close { top: var(--s-5); right: var(--s-5); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: var(--s-5); }
.lb-next { right: var(--s-5); }

.reader {
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
}
.reader::backdrop { background: var(--paper); }

.reader-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 85.4%, transparent);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
}

.reader-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
}

.reader-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-6);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--t--1);
  cursor: pointer;
}
.reader-back:hover { border-color: var(--ink-faint); }
.reader-back svg { width: var(--s-5); height: var(--s-5); }
.reader-date { color: var(--ink-faint); font-size: var(--t--2); }

.reader-inner {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(var(--s-6), 6vw, var(--s-7)) var(--gutter) var(--s-8);
}
.reader-title { margin: var(--s-4) 0 var(--s-6); font-size: clamp(var(--t-4), 4.5vw, var(--t-6)); }
.reader-note { margin-bottom: var(--s-5); color: var(--ink-faint); }
.reader-note:lang(en) { font-style: italic; }

/* 正文：字号 φ^(1/4) 级，行高 φ */
.prose { font-size: var(--t-1); line-height: var(--lh); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure { margin: 0 0 1em; }
.prose h2 { margin: 1.618em 0 .618em; font-size: var(--t-3); }
.prose h3, .prose h4 { margin: 1.272em 0 .618em; font-size: var(--t-2); }
.prose ul, .prose ol { padding-left: 1.272em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-underline-offset: var(--s-1); }
.prose img { border-radius: var(--r-2); }
.prose hr { margin: 1.618em 0; border: 0; border-top: 1px solid var(--line); }
.prose code { padding: .09em .382em; border-radius: var(--r-1); background: var(--paper-deep); font-size: .786em; }
.prose blockquote {
  padding: .236em 0 .236em 1.272em;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.272em;
}

.reader-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.reader-nav a { display: flex; flex-direction: column; gap: var(--s-1); max-width: calc(50% - var(--s-3)); text-decoration: none; }
.reader-nav a.is-next { margin-left: auto; text-align: right; }
.reader-nav small { color: var(--ink-faint); font-size: var(--t--2); }
.reader-nav span { color: var(--accent); }

/* ---------- 音乐播放器 ---------- */

.player { position: fixed; left: var(--s-5); bottom: var(--s-5); z-index: 60; }

.player-toggle {
  display: grid;
  place-items: center;
  width: var(--s-7);
  height: var(--s-7);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--d-1);
}
.player-toggle:hover { transform: translateY(calc(-1 * var(--s-1))); }
.player-toggle svg { width: var(--s-5); height: var(--s-5); }
.pt-icon, .pt-bars { grid-area: 1 / 1; }
.pt-icon { display: grid; }

.pt-bars { display: none; align-items: flex-end; gap: var(--s-1); height: var(--s-5); }
.pt-bars i {
  width: var(--s-1);
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: bars var(--d-4) ease-in-out infinite;
}
.pt-bars i:nth-child(2) { animation-delay: calc(-1 * var(--d-2)); }
.pt-bars i:nth-child(3) { animation-delay: calc(-1 * var(--d-3)); }
.player.is-playing .pt-icon { display: none; }
.player.is-playing .pt-bars { display: flex; }

@keyframes bars {
  0%, 100% { transform: scaleY(.382); }
  50%      { transform: scaleY(1); }
}

.player-panel {
  position: absolute;
  left: 0;
  bottom: calc(var(--s-7) + var(--s-4));
  width: 377px;
  max-height: calc(100vh - var(--s-8) - var(--s-5));
  padding: var(--s-4) var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  background: var(--card);
  box-shadow: var(--shadow);
}

.player-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-1); }
.player-kicker { color: var(--accent); font-size: var(--t--2); letter-spacing: .09em; }

.player-x {
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}
.player-x:hover { background: var(--paper-deep); color: var(--ink); }
.player-x svg { width: var(--s-5); height: var(--s-5); }

.player-title { font-family: var(--font-display); font-size: var(--t-1); line-height: var(--lh-tight); }
.player-artist { color: var(--ink-faint); font-size: var(--t--2); }
.player-credit { margin-top: var(--s-1); color: var(--ink-faint); font-size: var(--t--3); }
.player-credit a { color: var(--accent); text-underline-offset: var(--s-1); }

.player-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
  color: var(--ink-faint);
  font-size: var(--t--3);
  font-variant-numeric: tabular-nums;
}
.pt-range { width: 100%; accent-color: var(--accent); }

.player-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-2) 0 var(--s-3); }

.pc-btn {
  display: grid;
  place-items: center;
  width: var(--s-6);
  height: var(--s-6);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.pc-btn:hover { background: var(--paper-deep); }
.pc-btn svg { width: var(--s-5); height: var(--s-5); }
.pc-play { width: var(--s-7); height: var(--s-7); background: var(--accent); color: var(--on-accent); }
.pc-play:hover { background: var(--accent-hover); }

.player-list {
  max-height: var(--s-9);
  margin: 0;
  padding: var(--s-3) 0 0;
  overflow-y: auto;
  border-top: 1px dashed var(--line);
  list-style: none;
}

.player-list button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t--1);
  text-align: left;
  cursor: pointer;
}
.player-list button:hover { background: var(--paper-deep); }
.player-list button[aria-current] { color: var(--accent); }
.pl-artist { color: var(--ink-faint); font-size: var(--t--3); }

.has-player .site-footer { padding-bottom: var(--s-8); }

/* ---------- 动效 ---------- */

/* 入场淡入；同一组里的第 n 个元素（style="--i:n"）晚 n × 89ms 出现 */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--s-5));
  transition:
    opacity var(--d-4) var(--ease) calc(var(--i, 0) * var(--d-step)),
    transform var(--d-4) var(--ease) calc(var(--i, 0) * var(--d-step));
}
.js .reveal.is-visible { opacity: 1; transform: none; }

#main, .site-footer, .nav { transition: opacity var(--d-1); }
.is-switching #main,
.is-switching .site-footer,
.is-switching .nav { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tree-layer { animation: none; will-change: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .status-dot::after, .pt-bars i { animation: none; }
  .project, .project-cover img, .cover-art, .gallery-open img, .note-card { transition: none; }
}

/* ---------- Windows 高对比度模式：系统会抹掉背景色，几处靠背景色表达的元素改用描边 ---------- */

@media (forced-colors: active) {
  .menu-toggle span, .status-dot, .status-dot::after { forced-color-adjust: none; background: CanvasText; }
  .lang-switch button[aria-pressed="true"] { outline: 2px solid ButtonText; outline-offset: calc(-1 * var(--s-1)); }
  .nav-links a[aria-current], .player-list button[aria-current] { text-decoration: underline; text-underline-offset: var(--s-2); }
  .brand-mark { border: 1px solid CanvasText; }
  .motion-toggle { border: 1px solid ButtonText; }
  .cal-month { position: relative; z-index: 1; } /* 大日期的强制色底板会盖住月份行，让月份行画在上面 */
}

/* ---------- 打印：去掉装饰和动效，联系卡片改成白底 ---------- */

@media print {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .site-header, .skip-link, .motion-toggle, .autumn-sky, .seed-hang, .bark-band, .sprite, .player, .toast,
  .gallery-more, .copy-btn, .back-top, body::before { display: none; }
  .section { padding-block: var(--s-6); }
  .quote { background: none; }
  .contact-card { background: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); }
  .contact-card::before { display: none; }
  .contact-card :is(.contact-text, .cl-label, .cl-value, .contact-email a, .contact-links a, .cl-static) { color: inherit; }
  .contact-kicker { color: var(--accent); }
  .contact-email a { background: none; text-decoration: underline; }
  .project, .note-card, .tl-item, .fact, .skill-group, .award, .hero-art { break-inside: avoid; }
  .section-head, .sub-head, .project-title { break-after: avoid; }
}

/* ---------- 平板：导航收紧 ---------- */

@media (min-width: 761px) and (max-width: 987px) {
  .nav-links a { padding: var(--s-2) var(--s-3); }
}

/* 桌面但屏幕不高（1366 × 768、1280 × 720 的笔记本）：画面矮一级（树被裁得更多），台历才不会被首屏的折线切掉 */
@media (min-width: 988px) and (max-height: 843px) {
  :root { --art-h: 521px; } /* 322 × φ */
}
@media (min-width: 988px) and (max-height: 700px) {
  :root { --art-h: 377px; }
}

/* ---------- 手机（断点按内容排布需要设定） ---------- */

@media (max-width: 760px) {
  :root {
    --t-base: 1rem; /* 16px */
    --art-h: 377px; /* 手机上画面矮一些，只露出树的下半部分 */
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    width: var(--s-6);
    height: var(--s-6);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: var(--s-5);
    height: var(--s-1);
    border-radius: var(--r-pill);
    background: currentColor;
    transition: transform var(--d-1);
  }
  /* 打开时两条线移到中间交叉：线宽和间距都是 3px，各移 3px 正好重合 */
  .menu-open .menu-toggle span:first-child { transform: translateY(var(--s-1)) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(calc(-1 * var(--s-1))) rotate(-45deg); }

  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - var(--header-h));
    padding: var(--s-3) var(--gutter) var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
  }
  .menu-open .nav-links { display: flex; }
  .nav-links a { padding: var(--s-4); border-radius: var(--r-2); font-size: var(--t-0); }

  .hero { padding-top: var(--s-6); }
  .hero-grid, .about-grid, .exp-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: var(--s-6); }
  .hero-art { margin-top: var(--s-5); } /* 手机上树在文字下面，不再向上伸 */
  /* 手机上画面占满一行、排在文字下面：叶子不往左探；画面顶边不再是一条横着切过树冠的直线，而是 55px 内渐渐显出来 */
  .tree {
    height: var(--art-h);
    clip-path: inset(0);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--s-7));
    mask-image: linear-gradient(to bottom, transparent, #000 var(--s-7));
  }

  .facts { padding: var(--s-1) var(--s-4); }
  .contact-card { border-radius: var(--r-4); }

  .gallery { columns: 2; }
  .lb-prev, .lb-next { top: auto; bottom: var(--s-5); transform: none; }
  .lb-img {
    width: min(var(--w, 1597px), 100vw, calc((100vh - var(--s-9) - var(--s-5)) * var(--ar, 1.618)));
    border-radius: 0;
  }

  .player { left: var(--s-4); bottom: var(--s-4); }
  .player-panel { width: calc(100vw - 2 * var(--s-4)); }
  .pc-btn, .pc-play { width: var(--s-7); height: var(--s-7); }
  .player-list button { justify-content: center; min-height: var(--s-7); }
}

/* =========================================================
 * 季节主题 · 秋：上海的梧桐
 * content.js 里 season: "autumn" 时，<html> 带 data-season="autumn"，下面这些才生效。
 * 想恢复平时的外观，把 season 改成 "" 即可，不用动这里。
 * 尺寸、时长、比例、透明度仍然只取 φ 和斐波那契数；颜色按对比度定（正文全部 ≥ 4.5 : 1）。
 * ========================================================= */

/* 浅色：午后的太阳照在武康路的墙上 */
:root[data-season="autumn"] {
  --paper: #f5ecda;
  --paper-deep: #ede2cb;
  --card: #fbf6eb;
  --ink: #2d241b;
  --ink-soft: #5b4b3b;
  --ink-faint: #695745;  /* 比平时深一点：落在树皮上也 ≥ 4.5 : 1 */
  --line: #dccaa9;
  --accent: #963d17;
  --accent-hover: #7a2f0f;
  --accent-tint: #f2d9bb;
  --on-accent: #fff9ef;
  --accent-inv: #eaa86a;
  --sage: #56683f;

  /* 以下只用于装饰，不承载文字 */
  --leaf: #c9932f;       /* 金黄的梧桐叶 */
  --leaf-deep: #b0612b;  /* 赭红的梧桐叶 */
  --leaf-dry: #d8bd8e;   /* 干枯卷边的叶子 */
  --seed: #8a5a33;       /* 悬铃 */
  --bark-1: #e6dfc4;     /* 树皮：剥落后露出的奶白 */
  --bark-2: #b8b18a;     /* 树皮：橄榄黄 */
  --bark-3: #97a08e;     /* 树皮：灰绿 */
  --shade: #3b2b1c;      /* 树影（夜里不用它：树影由路灯光的遮罩画出，--lamp 只在深色模式定义） */

  /* 首屏的梧桐树换成秋天的颜色（深色模式下这些 var 会跟着上面深色块的值变） */
  --tree-leaf-1: var(--leaf);
  --tree-leaf-2: var(--leaf-deep);
  --tree-leaf-3: var(--leaf-dry);
  --tree-trunk-1: var(--bark-1);
  --tree-trunk-2: var(--bark-2);
  --tree-trunk-3: var(--bark-3);
  --tree-seed: var(--seed);
  --tree-leaf-4: #7d4420;
  --tree-bark-4: #6e644b;
  --tree-twig: #6a583f;
  --paper-seen: #ece2ce; /* 纸色加上颗粒纹理后眼睛看到的平均色，用于文字的晕，这样晕在纸上看不出来 */
}

/* 深色：路灯下的秋夜 */
@media (prefers-color-scheme: dark) {
  :root[data-season="autumn"] {
    --tree-leaf-4: #6c3e22;
    --tree-bark-4: #3d372c;
    --tree-twig: #8c7657;
    --paper: #1c1611;
    --paper-deep: #251d16;
    --card: #2b2219;
    --ink: #f2e6d0;
    --ink-soft: #cfbea2;
    --ink-faint: #a59178;
    --line: #40342a;
    --accent: #e6a265;
    --accent-hover: #f2b97f;
    --accent-tint: #4a3019;
    --on-accent: #1c1611;
    --accent-inv: #9b421b;
    --sage: #a9ba8a;

    --leaf: #d7a442;
    --leaf-deep: #c46a33;
    --leaf-dry: #8a7152;
    --seed: #a9764a;
    --bark-1: #5a5444;
    --bark-2: #6e6b4f;
    --bark-3: #5d685a;
    --lamp: #f0b46e;     /* 路灯的光 */
    --paper-seen: #251f1a;
  }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 首屏：树影 + 落叶 ---------- */

[data-season="autumn"] .hero { position: relative; }
[data-season="autumn"] .hero-grid { position: relative; z-index: 1; }

/* 铺满整个视口宽度，从导航栏下面开始（导航栏半透明，能隐约看到树影） */
.autumn-sky {
  position: absolute;
  top: calc(-1 * var(--header-h));
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
}

/* 树影：从右上角伸进来，四边各多出 21px，摇动时不露边。
 * 模糊和夜里的路灯光都画在 SVG 里，这里不用 filter 和混合模式：浏览器只需平移一张现成的图 */
.leaf-shadow {
  position: absolute;
  top: calc(-1 * var(--s-5));
  right: calc(-1 * var(--s-5));
  /* 超宽屏上不再跟着变大（上限 = 内容宽度 × φ），免得树枝伸到正文下面 */
  width: min(calc(100% + 2 * var(--s-5)), calc(var(--maxw) * 1.618));
  height: calc(100% + 2 * var(--s-5));
  color: var(--shade);
  opacity: .146;
  /* 底边前 89px 渐隐，首屏底边不留一道硬线 */
  -webkit-mask-image: linear-gradient(to top, transparent var(--s-5), #000 calc(var(--s-5) + var(--s-8)));
  mask-image: linear-gradient(to top, transparent var(--s-5), #000 calc(var(--s-5) + var(--s-8)));
  transform-origin: 100% 0;
  animation: shadow-sway 21s ease-in-out infinite;
  will-change: transform;
}

@keyframes shadow-sway {
  0%, 100% { transform: none; }
  38.2%    { transform: rotate(-.618deg) translate(calc(-1 * var(--s-2)), var(--s-1)); }
  61.8%    { transform: rotate(.236deg) translate(var(--s-1), calc(-1 * var(--s-1))); }
}

/* 白天直接画树冠的影子；夜里换成右上角一团暖黄的路灯光，用树冠做遮罩，在光里挖出树影（光外什么也不画） */
.leaf-shadow .ls-lamp { display: none; }

@media (prefers-color-scheme: dark) {
  .leaf-shadow { opacity: 1; }
  .leaf-shadow .ls-shade { display: none; }
  .leaf-shadow .ls-lamp { display: inline; }
}

/* 落叶：每片叶子是一条和首屏一样高的「轨道」，叶子贴在轨道底部；
 * 轨道从上往下平移，叶子就从顶落到底，落完停在首屏底边 */
.leaf-fall { position: absolute; inset: 0; }
/* 1200px 以上树比文字栏高、树脚就是网格底边：让叶子落在树脚那条线上，而不是落在首屏最底下 89px 的留白里 */
@media (min-width: 1200px) { .leaf-fall { bottom: var(--s-8); } }

.fall-leaf {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: 100%;
  color: var(--tone);
  animation: leaf-fall var(--dur) linear var(--delay) 1 both;
}

/* 两层各只有一条透明度动画：轨道 span 只负责淡入（0 → 1），叶片 svg 负责空中 .382、落地后 .618（leaf-land）。
 * 两条透明度动画叠在同一个元素上时 Chrome 会放弃合成器、每一帧都回主线程重算样式 */
.fall-leaf svg {
  position: absolute;
  bottom: var(--lift);
  width: var(--s);
  height: var(--s);
  transform-origin: 50% 38.2%;
  animation:
    leaf-sway var(--sway) ease-in-out var(--delay) var(--sway-n) alternate both,
    leaf-land .382s ease-out calc(var(--delay) + var(--dur)) 1 both;
}

/* 空中的叶子只有 .382 不透明，从字后面经过时字仍然清楚；
 * 落地之后（leaf-land，已在所有文字下方）才在 .382 秒里清晰到 .618，像镜头对上了焦 */
@keyframes leaf-fall {
  from { transform: translateY(-100%); opacity: 0; }
  9%   { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

@keyframes leaf-land {
  from { opacity: .382; }
  to   { opacity: .618; }
}

@keyframes leaf-sway {
  from { transform: translateX(calc(-1 * var(--s-5))) rotate(-34deg); }
  to   { transform: translateX(var(--s-5)) rotate(34deg); }
}

/* 已经落地（切换语言后重新渲染、系统要求减少动态、访客之前点过暂停）：
 * 不另写落地姿势，而是把同一组动画直接快进到终点，所以和真的落完一模一样，切换语言时不会跳 */
.autumn-sky.is-settled .fall-leaf,
.autumn-sky.is-settled .fall-leaf svg { animation-delay: calc(-1 * var(--dur)); }

/* 首屏移出视口、或访客点了暂停时，一切停在原处 */
.hero.is-still :is(.autumn-sky, .hero-art) *,
.motion-off :is(.autumn-sky, .hero-art) *,
.motion-off .seed-hang.is-visible .seed-branch { animation-play-state: paused; }

/* 首屏文字：树影和落叶会从字后面经过。给字一圈纸色的晕，再把几处小字加深一级，任何时候都 ≥ 4.5 : 1 */
[data-season="autumn"] :is(.hero-hello, .hero-name, .hero-role, .hero-intro, .hero-meta) {
  --halo: .09em;
  --halo-blur: .146em;
  text-shadow:
    var(--halo) 0 var(--halo-blur) var(--paper-seen), calc(-1 * var(--halo)) 0 var(--halo-blur) var(--paper-seen),
    0 var(--halo) var(--halo-blur) var(--paper-seen), 0 calc(-1 * var(--halo)) var(--halo-blur) var(--paper-seen),
    var(--halo) var(--halo) var(--halo-blur) var(--paper-seen), calc(-1 * var(--halo)) var(--halo) var(--halo-blur) var(--paper-seen),
    var(--halo) calc(-1 * var(--halo)) var(--halo-blur) var(--paper-seen), calc(-1 * var(--halo)) calc(-1 * var(--halo)) var(--halo-blur) var(--paper-seen),
    0 0 calc(var(--halo-blur) * 1.618) var(--paper-seen);
}
/* 15px 的小字，晕再放大一级；72px 的名字，晕收紧（φ⁻⁷、φ⁻⁶），只护住笔画边缘，看不出光圈 */
[data-season="autumn"] .hero-meta { --halo: .146em; --halo-blur: .236em; }
[data-season="autumn"] .hero-name { --halo: .034em; --halo-blur: .056em; }
/* 首屏的线框按钮垫一层纸色，叶子从后面经过时不影响字 */
[data-season="autumn"] .hero .btn-ghost { background: var(--paper-seen); }
[data-season="autumn"] .hero .btn-ghost:hover { background: var(--card); }
/* 几处小字各加深一级（向 --ink 靠 38.2%）；深色模式里 --ink 是浅色，同样的写法会让字更亮，对比度一样提高 */
[data-season="autumn"] .hero-hello { color: var(--accent-hover); }
[data-season="autumn"] :is(.hero-intro, .hero-meta) { color: color-mix(in srgb, var(--ink-soft) 61.8%, var(--ink)); }
[data-season="autumn"] .status { color: color-mix(in srgb, var(--sage) 61.8%, var(--ink)); }

/* ---------- 引言：左右是梧桐树皮，顶边垂下两串悬铃 ---------- */

/* 顶部多留到 144px（手机 89px），悬铃垂在引文上方，任何宽度都碰不到字 */
[data-season="autumn"] .quote { position: relative; overflow: hidden; isolation: isolate; padding-top: var(--s-9); }

.bark-band {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .236;
  /* 只留左右两边，像引言站在两棵梧桐树干之间 */
  -webkit-mask-image: linear-gradient(to right, #000, transparent 23.6%, transparent 76.4%, #000);
  mask-image: linear-gradient(to right, #000, transparent 23.6%, transparent 76.4%, #000);
}

/* z-index: -1：万一碰到字，也画在字的下面 */
.seed-hang {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 23.6%;
  width: var(--s-9);
}
/* 出场时从上面垂下来，而不是像别的元素那样从下往上浮 */
.js .seed-hang.reveal { transform: translateY(calc(-1 * var(--s-6))); }
.js .seed-hang.reveal.is-visible { transform: none; }

.seed-branch {
  display: block;
  width: 100%;
  height: auto;
  color: var(--seed);
  transform-origin: 50% 0;
}
/* 出现后轻轻晃 8 个来回（约 40 秒）就停 */
.seed-hang.is-visible .seed-branch { animation: seed-swing 5s ease-in-out .89s 8 alternate both; }

@keyframes seed-swing {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(5deg); }
}

/* 系统要求减少动态：树影和悬铃不动，叶子直接快进到落地（页面开着时切换这个设置也有效） */
@media (prefers-reduced-motion: reduce) {
  .leaf-shadow, .seed-hang.is-visible .seed-branch { animation: none; }
  .fall-leaf, .fall-leaf svg { animation-delay: calc(-1 * var(--dur)); }
}

@media (max-width: 760px) {
  .fall-leaf:nth-child(n+6) { display: none; } /* 手机上只落 5 片 */
  .leaf-shadow { height: 61.8%; } /* 树影留在标题上方 */
  [data-season="autumn"] .quote { padding-top: var(--s-8); }
  .seed-hang { right: 9%; width: var(--s-8); }
}

/* =========================================================
 * 旧浏览器的退路。含 var() 的声明要到计算时才会失效，所以不能靠「前一行写备用值」，只能用 @supports
 * ========================================================= */

/* 没有 color-mix()（微信、QQ 浏览器的旧内核等）：导航栏和阅读页顶栏退回不透明的纸色，复制按钮的边框给个固定色 */
@supports not (color: color-mix(in srgb, red, blue)) {
  .site-header, .reader-bar { background: var(--paper); }
  .copy-btn { border: 1px solid rgb(255 255 255 / .382); }
}

/* 支持 dvh 的浏览器（手机地址栏收起时视口会变高）用 dvh；基础规则里是 vh */
@supports (height: 1dvh) {
  .lb-img { width: min(var(--w, 1597px), calc(100vw - 2 * var(--s-8)), calc((100dvh - var(--s-9)) * var(--ar, 1.618))); }
  .player-panel { max-height: calc(100dvh - var(--s-8) - var(--s-5)); }
  @media (max-width: 760px) {
    .nav-links { max-height: calc(100dvh - var(--header-h)); }
    .lb-img { width: min(var(--w, 1597px), 100vw, calc((100dvh - var(--s-9) - var(--s-5)) * var(--ar, 1.618))); }
  }
}