/* ==========================================================================
   TERRY GUO // ACTIVITY DOSSIER — 样式表

   与主站（terry-guo.pages.dev）共用一套设计语言：得意黑做标题、mono 做
   标签、证书卡（Award Array）的骨架一模一样。换掉的是底色——主站是深色
   霓虹，这里是暖白灰的纸面，红色从「发光体」退成「光源」：只在卡片顶边、
   悬停光晕、章节编号上出现。

   两条纪律：
   1. 网格轨道一律 minmax(0, 1fr)。`1fr` 的 min-content 下限会把装了长
      mono 字串的卡片顶宽，窄屏上直接撑破栏位。
   2. 媒体查询全部写在文件末尾。跟基础规则混排时，源顺序会反过来吃掉它。
   ========================================================================== */

@font-face {
  font-family: 'SmileySans-Oblique';
  src: url('fonts/SmileySans-Oblique.woff2') format('woff2');
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* 纸面。--paper 是主底，--paper-2 用来隔开相邻的章节，--card 是卡片面。 */
  --paper: #f4f1ec;
  --paper-2: #eae4db;
  --paper-3: #ded6ca;
  --card: #fbf9f6;
  --card-edge: rgba(27, 23, 20, 0.12);
  --card-edge-soft: rgba(27, 23, 20, 0.07);

  /* 墨。四级，够用了。 */
  --ink: #1b1714;
  --ink-2: #57504a;
  --ink-3: #8a827a;
  --ink-4: #b5aca2;

  /* 红。--red 是浅底上站得住的实色，--red-glow 只给光晕用。 */
  --red: #d7261e;
  --red-glow: #ff4136;
  --red-deep: #a81a14;
  --red-wash: rgba(215, 38, 30, 0.08);
  --red-line: rgba(215, 38, 30, 0.32);

  /* 金。主站用 #FFC53D，那个在纸面上会飘，压暗到能当文字色。 */
  --gold: #a9741a;
  --gold-wash: rgba(169, 116, 26, 0.1);
  --silver: #6f6a63;

  --font-display: 'SmileySans-Oblique', 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Space Grotesk', 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Courier New', monospace;

  --halo: 0 0 0 1px rgba(215, 38, 30, 0.16),
          0 14px 34px -18px rgba(168, 26, 20, 0.5),
          0 0 40px -10px rgba(255, 65, 54, 0.45);
  --lift: 0 2px 4px -2px rgba(27, 23, 20, 0.12),
          0 12px 28px -20px rgba(27, 23, 20, 0.5);

  --pad: clamp(18px, 4vw, 34px);
  --rail: clamp(20px, 5vw, 68px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: min(1240px, 100% - var(--rail) * 2);
  margin-inline: auto;
}

section[id] { scroll-margin-top: 74px; }

/* 纸面网格：极淡的一层，让白底不至于太空。 */
.paper-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(27, 23, 20, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 23, 20, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 236, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-edge-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  padding-block: 8px;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-brand em { font-style: normal; color: var(--red); }

.nav-links {
  display: flex;
  gap: clamp(10px, 1.6vw, 22px);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 2px 5px;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current='true'] {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* 阅读进度：一条红线，跟主站的 HUD 同义。 */
.nav-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--red-deep), var(--red-glow));
  transition: width 120ms linear;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}

/* 红光：整个站唯一一处大面积用光的地方。 */
.hero::before {
  content: '';
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 65, 54, 0.2) 0%, rgba(255, 65, 54, 0.07) 34%, transparent 66%);
  pointer-events: none;
}

.hero-inner { position: relative; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 3px;
  color: var(--red);
}
.eyebrow::before { content: '▍ '; color: var(--red-line); }

.hero-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 12vw, 148px);
  line-height: 0.92;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.hero-rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--red-line), transparent);
}
.hero-rule span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2.4px;
  color: var(--ink-3);
}

.hero-lede {
  max-width: 62ch;
  margin-top: 22px;
  font-size: clamp(15.5px, 1.9vw, 18px);
  line-height: 1.72;
  color: var(--ink-2);
}
.hero-lede b { color: var(--ink); }

/* 飞行路径：一条虚线在 hero 里慢慢画过去。纯 CSS，没有 canvas。 */
.flight-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.flight-path path {
  fill: none;
  stroke: var(--red-line);
  stroke-width: 1.4;
  stroke-dasharray: 5 9;
  animation: trace 9s linear infinite;
}
.flight-path circle { fill: var(--red); }

@keyframes trace { to { stroke-dashoffset: -140; } }

/* 四个数字。 */
.stats {
  display: grid;
  gap: 1px;
  margin-top: clamp(30px, 5vw, 48px);
  /* 四格固定列数，不用 auto-fit：在 742px 这种宽度上 auto-fit 会排成三列，
     第四格孤零零落到第二行，空出来的两格露出网格底色——一块灰板。
     四个格子只该排成 1、2 或 4 列。 */
  grid-template-columns: 1fr;
  background: var(--card-edge-soft);
  border: 1px solid var(--card-edge-soft);
}
.stat {
  background: var(--paper);
  padding: 20px 22px 18px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ink);
}
.stat-num sup { font-size: 0.42em; vertical-align: super; letter-spacing: 0; }
.stat-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 1.7px;
  color: var(--ink-3);
}
.stat.is-key .stat-num { color: var(--red); }

/* ---------------------------------------------------------------- domain */
.domain {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 7vw, 86px) 0;
  border-top: 1px solid var(--card-edge-soft);
}
.domain.is-alt { background: var(--paper-2); }

.domain-head { max-width: 940px; }

.domain-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--red);
}

.domain-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 0.98;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.domain-lead {
  margin-top: 18px;
  max-width: 68ch;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  color: var(--ink-2);
}
.domain-lead b { color: var(--ink); }

.subhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(38px, 5vw, 58px) 0 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 2.6px;
  color: var(--ink-2);
}
.subhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--red-line) 0 6px, transparent 6px 13px);
}
.subhead b { color: var(--red); font-weight: 400; }

/* ---------------------------------------------------------------- grid */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- cred */
/* 卡片就是主站那张证书卡，搬到纸面上：顶边一条红线，四角括号，悬停漫光。 */
.cred {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: var(--lift);
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

/* Brown 那张没有原件可贴——档案里根本没有它的成绩单——而并排的 Harvard 那张
   有一页 713px 高的正式成绩单。默认的拉伸会让 Brown 空出八百多像素的白，
   看上去像图片没加载出来，而不像「这张卡内容本来就少」。
   让它按自己的内容收尾，白留在卡外，读作一张短卡。 */
.cred.is-short { align-self: start; }

.cred::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-glow) 62%, var(--red-line));
}

/* 四角括号。主站是画在深底上的亮框，这里是浅底上的淡墨。 */
.cred-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--red-line);
  opacity: 0.75;
  pointer-events: none;
}
.cred-corner.tl { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.cred-corner.br { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; }

.cred:hover,
.cred:focus-within {
  box-shadow: var(--halo);
  border-color: rgba(215, 38, 30, 0.42);
}

.cred-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.9px;
  color: var(--ink-3);
}
.cred-top span { white-space: nowrap; }
.cred-when { color: var(--red); }

.cred-title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.14;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.cred.is-gold .cred-title { color: var(--gold); }
.cred.is-red .cred-title { color: var(--red); }
.cred.is-silver .cred-title { color: var(--silver); }

/* 卡里那些指向站外的链接（TEDx 演讲、YouTube 之类）。 */
.cred-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 13px;
  padding: 8px 13px;
  background: var(--red-wash);
  border: 1px solid var(--red-line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--red);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.cred-link:hover { background: var(--red); color: #fff; }

.cred-rule {
  margin: 15px 0 13px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--red-line) 0 5px, transparent 5px 12px);
}

.cred-body {
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.cred-body b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 1.4px;
  color: var(--ink);
}
.cred-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--ink-3);
}
.cred-roster { color: var(--ink-3); }
.cred-note {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.66;
  color: var(--ink-3);
}
.cred-facts {
  margin-top: 11px;
  display: grid;
  gap: 4px;
}
.cred-facts li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.cred-facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--red);
}

.cred-foot {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 1.7px;
  color: var(--ink-3);
}

/* 卡上那张实拍图：证书、奖杯、现场。跟主站一样，图本身就是证据，
   点开看原件，而不是放一个「验证」按钮。 */
.cred-shot { margin: 16px 0 0; }
.cred-shot a {
  display: block;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--card-edge);
  text-decoration: none;
  transition: border-color 180ms ease;
}
.cred-shot img { display: block; width: 100%; height: auto; }
.cred-shot.is-tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 32%; }
/* 整页文档（评估表、成绩单）按原比例铺开会失去分寸：Pioneer 那张占满 1180px 宽，
   高 1528px，整张卡被撑到 1981px——一屏装不下，一节的内容全让给一张扫描件。
   给它一个天花板，从页首往下裁：抬头、姓名、成绩都在最上面那几栏，
   剩下的四页本来就在 OPEN 后面。 */
.cred-shot.is-page img { max-height: 620px; object-fit: cover; object-position: top; }
.cred-shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  color: var(--ink-3);
}
.cred-shot a:hover { border-color: var(--red); }
.cred-shot a:hover figcaption { color: var(--red); }

/* 宽卡：占两到三栏，用来放一组小图（四个社的海报、三张 StemCo 证书）。 */
.cred.is-wide { grid-column: 1 / -1; }

.mini-set {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.mini-set a {
  display: block;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--card-edge);
  text-decoration: none;
  transition: border-color 180ms ease;
}
.mini-set a:hover { border-color: var(--red); }
.mini-set img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
/* 竖框是给海报和证书用的。横拍的现场照塞进 4/5 会被裁成中间一条，
   所以那组小图换成横框。用哪一组由 class 明说，别让它自己猜。 */
.mini-set.is-landscape img {
  aspect-ratio: 4 / 3;
  object-position: center 42%;
}
.mini-set figcaption {
  margin-top: 7px;
  padding-inline: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: 1.3px;
  color: var(--ink-2);
}
.mini-set figcaption b {
  display: block;
  color: var(--red);
  font-weight: 400;
}

/* ---------------------------------------------------------------- plate */
/* 全宽的一张图，用来给一节定调——跟主站那张奖杯全幅是同一个角色。 */
.plate {
  margin-top: clamp(26px, 3.5vw, 40px);
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: var(--lift);
}
.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 38%;
}
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 11px 6px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.7px;
  color: var(--ink-3);
}
.plate figcaption b { color: var(--red); font-weight: 400; }

/* ---------------------------------------------------------------- ledger */
.ledger {
  margin-top: 26px;
  border-top: 1px solid var(--card-edge);
}
.ledger-row {
  display: grid;
  gap: 4px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--card-edge-soft);
}
.ledger-when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--red);
}
.ledger-what { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.ledger-what b { color: var(--ink); }
.ledger-where {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- panel */
/* 成绩面板。SAT / AP 那两份原件印着家庭住址，所以不发布文档，
   分数改用 HTML 排出来——顺带也比扫描件好读。 */
.panel {
  margin-top: 22px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow: var(--lift);
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
}
.panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.panel-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--ink-3);
}

.score-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.score-table caption {
  text-align: left;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--red);
}
.score-table th,
.score-table td {
  padding: 9px 12px 9px 0;
  text-align: left;
  border-bottom: 1px solid var(--card-edge-soft);
  vertical-align: baseline;
}
.score-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.6px;
  color: var(--ink-3);
}
.score-table td:first-child { color: var(--ink); }
.score-table td:last-child,
.score-table th:last-child { text-align: right; padding-right: 0; }
.score-table .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink);
  white-space: nowrap;
}
.score-table .num.is-top { color: var(--red); }
.score-table tr:last-child th,
.score-table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- archive */
.archive-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.doc {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-edge);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.doc:hover { box-shadow: var(--halo); border-color: rgba(215, 38, 30, 0.42); color: inherit; }
.doc-thumb {
  position: relative;
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid var(--card-edge-soft);
}
.doc-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}
.doc-thumb.is-tall img { aspect-ratio: 3 / 4; }
/* 横版的信件：4/3 的框会把它裁成一截，改用接近信件本身的宽比。 */
.doc-thumb.is-wide img { aspect-ratio: 2 / 1; }
.doc-kind {
  position: absolute;
  top: 12px; left: 12px;
  padding: 3px 7px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--ink-3);
}
/* 横版信件的框比竖版矮一截，同一行里它的标题就会比邻座高出一行。
   把说明压到卡片底部，一行里的标题、日期、OPEN 就都对齐了。 */
.doc-meta { margin-top: auto; padding: 12px 13px 14px; }
.doc-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: var(--ink);
}
.doc-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--ink-3);
}
.doc:hover .doc-sub { color: var(--red); }

/* ---------------------------------------------------------------- contact */
.contact {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--card-edge-soft);
}
.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.contact-lede {
  max-width: 60ch;
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.74;
  color: var(--ink-2);
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn:hover { box-shadow: var(--halo); border-color: rgba(215, 38, 30, 0.42); color: var(--red); }
.btn.is-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn.is-primary:hover { color: #fff; box-shadow: var(--halo); }

.foot {
  position: relative;
  z-index: 1;
  padding: 26px 0 40px;
  border-top: 1px solid var(--card-edge-soft);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--red); }

/* ---------------------------------------------------------------- motion */
/* 入场动画只在 JS 确实跑起来时才隐藏内容。.js 由 <head> 里那行内联脚本挂上；
   万一脚本被拦，页面就是完全可见的静态稿，而不是一片空白。 */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive
   全部媒体查询压在文件末尾：跟基础规则混排时源顺序会反过来吃掉它们。 */
@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-row { grid-template-columns: 108px minmax(0, 1fr) 168px; align-items: baseline; }
  .ledger-where { text-align: right; }
}

@media (min-width: 1000px) {
  .grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-title { letter-spacing: 4px; }
}

@media (max-width: 999px) {
  /* 六个栏目一行要 654px：加上品牌和间距，得 910px 往上才摆得开。
     900px 上「06 CONTACT」已经缺一角——滚动条是藏起来的，看不出还能滚，
     只像页面坏了。所以 1000px 以下都折行：品牌占一行，栏目另起一行，
     宽度够时它们是整齐的一行，不够才折第二行。全都在，不用滚。 */
  .nav-inner { flex-wrap: wrap; gap: 0 14px; padding-block: 7px 0; }
  .nav-links {
    order: 1;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 1px 16px;
  }
  .nav-links a { padding: 5px 0 6px; }
  /* 导航条比桌面高一截，锚点跳转的落点也要跟着往下让。 */
  section[id] { scroll-margin-top: 96px; }
}

@media (max-width: 619px) {
  .nav-inner { min-height: 52px; }
  .nav-brand { font-size: 15px; }
  .nav-links a { font-size: 10.5px; letter-spacing: 1.3px; padding: 5px 0 6px; }
  .cred { padding: 19px 17px 17px; }
  .cred-title { font-size: 21px; }
  .score-table th:nth-child(2),
  .score-table td:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flight-path path { animation: none; }
  .cred, .doc, .btn { transition: none; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .nav, .flight-path, .paper-grid, .contact-actions, .hero-rule i { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero::before { display: none; }
  .domain { padding: 12px 0; break-inside: avoid; }
  .cred, .panel, .doc {
    box-shadow: none !important;
    border-color: #999 !important;
    break-inside: avoid;
  }
  .cred::before { background: #000 !important; }
  .cred-title, .cred-body b, .domain-title, .hero-title, .stat-num { color: #000 !important; }
  a { color: #000 !important; text-decoration: none; }
}