/* =========================================================================
   Learning · 学习
   -------------------------------------------------------------------------
   A STUDY IN PROGRESS.
   SUBJECT → DISCOVER

   四页的分工：
     Gallery   PHOTO    → VIEW                我看东西
     Music     TRACK    → SHOWCASE → LISTEN   我听东西
     About     INTEREST → REVEAL              我还在变成什么样
     Learning  SUBJECT  → DISCOVER            我正在往哪儿走

   About 那一页的主角是「字」，这一页的主角是「一条还在延伸的线」。
   所以它的结构是一份目录：四个科目横排成行，指向谁，背景就浮出谁；
   点开谁，谁才交出细节。没有点开的那三项仍然是完整的条目，
   不是「未完成」——这一页不展示任何「已经掌握了多少」。

   这一页不加载 shared.css，和 Gallery / Music / About 一样自包含——
   理由同另外三页：它只有自己一个使用者，而 shared.css 把
   color-scheme 写死成 light，装到深色页上会翻掉滚动条和表单控件。

   色值沿用另外三页的数值（--l-* 与 --a-* / --m-* 逐字相同），
   所以四页是同一个调子，不需要任何额外的「统一」工作。

   这一页刻意没有的东西（brief 第二节）：
     技能百分比 / 进度条 / 等级 / 排名 / 连续打卡 / 学习天数
   因为它们都在回答「学得怎么样了」，而这一页只回答「在往哪走」。
   ========================================================================= */

:root {
  /* 与 gallery.css / music-flow.css / about.css 同源，保证四页是同一次呼吸 */
  --l-bg: #08080a;
  --l-fg: #f4f4f2;
  --l-soft: rgba(244, 244, 242, 0.6);
  --l-faint: rgba(244, 244, 242, 0.36);
  --l-ghost: rgba(244, 244, 242, 0.2);
  --l-line: rgba(244, 244, 242, 0.13);
  --l-line-2: rgba(244, 244, 242, 0.3);

  --l-x: clamp(20px, 5.4vw, 104px);
  --l-gap: clamp(16px, 2.6vw, 44px);
  --l-section-y: clamp(68px, 10vh, 148px);

  --l-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --l-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

html {
  color-scheme: dark;
  background: var(--l-bg);
  scroll-behavior: auto; /* 交给 Lenis，浏览器不要再平滑一次 */
  scrollbar-gutter: stable;
}

body.learning-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--l-bg);
  color: var(--l-fg);
  font-family: Inter, Geist, "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 重置用 :where() 包起来——它不贡献特异性，整条规则只剩 .learning-page
   的 (0,1,0)。music-flow.css 里同样的重置写成了 `body.music-page h2` 这种
   (0,1,2) 的形式，把 V1 的几条裸类名压成了 0（详见那次报告第 ① 条）。
   about.css 从一开始就不给自己埋这个坑，这里照做。 */
.learning-page :where(h1, h2, h3, p, dl, dt, dd, ol, ul, li, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.learning-page :where(ol, ul) {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--l-fg);
  outline-offset: 4px;
}

/* -------------------------------------------------------------- 阅读进度 */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: 1px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--l-fg);
  transform: scaleX(0);
  transform-origin: left;
}

/* ------------------------------------------------------- 阅读位置（右侧）
   四个序号，只回答「读到第几节了」。不可点击，不进 Tab 顺序，
   pointer-events: none 保证它永远不会挡住底下的东西。
   没有 JS 就整块不出现——一个停在 01 不动的序号是错的信息，
   不如不给。桌面端专属（见响应式段）。 */

.l-rail {
  display: none;
}

html.l-ready .l-rail {
  position: fixed;
  z-index: 50;
  top: 50%;
  right: 2vw;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.l-rail ol {
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: right;
}

.l-rail li {
  color: var(--l-ghost);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  line-height: 1;
  transition: color 0.45s var(--l-ease);
}

.l-rail li.is-on {
  color: var(--l-fg);
}

/* ---------------------------------------------------------------- 页头
   与 About 同一套：向下滚收起、向上滚回来。 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px var(--l-x);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--l-bg) 80%, transparent);
  backdrop-filter: blur(16px);
  transition: border-color 0.5s var(--l-ease), transform 0.55s var(--l-ease);
}

.site-header.is-scrolled {
  border-color: var(--l-line);
}

.site-header.is-hidden {
  transform: translateY(-101%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-mark {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--l-line);
  border-radius: 50%;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 头像保持原色，与首页一致。这里原本是 filter: grayscale(1)，
     结果是同一个头像在首页有颜色、在内页是黑白的。 */
}

.brand-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
}

.brand-note {
  display: block;
  color: var(--l-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* 主导航已移除「档案」（brief 第二十九节）。 */
.navbar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  min-width: 0;
}

.navbar a {
  position: relative;
  padding: 4px 0;
  color: var(--l-soft);
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.4s var(--l-ease);
}

.navbar a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--l-ease-out);
}

.navbar a:hover,
.navbar a.active {
  color: var(--l-fg);
}

.navbar a:hover::after,
.navbar a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ================================================================== 序章
   结构照搬另外三页的序章（标签 / 一句话 / 一行元数据），进页节奏才是
   同一个网站的节奏。这一页的标题走英文大写，和 Gallery / Music 一样
   把「页面身份」放在最前面，中文留给下面真正的目录。
   ==================================================================== */

.l-hero {
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(18px, 3vh, 40px);
  min-height: clamp(380px, 56svh, 600px);
  padding: clamp(48px, 7.5vh, 104px) var(--l-x) clamp(20px, 3vh, 36px);

  /* 滚动联动：JS 只写这三个变量，位移和淡出都交给 CSS 算。
     没有 JS（或减弱动效）时它们停在 0 / 0 / 1，序章就是静止的——
     这是这一节唯一需要成立的状态，其余都是加成。 */
  --hero-lift: 0px;
  --hero-lift-meta: 0px;
  --hero-fade: 1;
  opacity: var(--hero-fade);
}

.l-hero-title {
  align-self: center;
  font-size: clamp(42px, 8.4vw, 130px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* 位移写在 .line 上，不写在 .l-hero-title 上：标题同时挂着 .l-reveal，
   而 `html.l-ready .l-reveal.is-in` 把 transform 定成了 none——那条规则
   特异性 (0,3,1) 高于任何裸类名，写在外层会被它吃掉。写在孩子身上
   就互不干涉：父级 transform: none 不会抵消子级的 transform。 */
.l-hero-title .line {
  display: block;
  transform: translateY(var(--hero-lift));
}

.l-hero-spec {
  display: flex;
  flex-wrap: wrap;
  justify-self: end;
  gap: clamp(16px, 2.6vw, 48px);
}

/* 元数据比标题走得慢：同样的滚动量，位移只有它的四成左右。
   这个差值就是「滞后」，不是另做一套动画。 */
.l-hero-spec > div {
  transform: translateY(var(--hero-lift-meta));
}

.l-hero-spec dt {
  color: var(--l-ghost);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}

.l-hero-spec dd {
  margin-top: 6px;
  color: var(--l-fg);
  font-size: 13px;
  line-height: 1.4;
}

/* ================================================================== 版面
   编辑部式的错位：标签占左边三栏，内容从第四栏起。留出的那三栏不是
   装饰——它让每一节开头都有一块空白，读起来像一本杂志的栏目。 */

.l-section {
  padding: var(--l-section-y) var(--l-x);
}

.l-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--l-gap);
  align-items: start;
}

.l-block > .eyebrow {
  grid-column: 1 / span 3;
  padding-top: 5px;
}

.l-block > .l-subjects,
.l-block > .l-currently,
.l-block > .l-updated {
  grid-column: 4 / span 9;
}

.eyebrow {
  color: var(--l-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ================================================== 02 WHAT I'M LEARNING
   这是整页的核心，也是 Learning 的专属互动：SUBJECT → DISCOVER。

   每一行分两层：
     上面是条目本身（编号 / 科目 / 一句真实描述 / 状态 / DISCOVER），
     始终在页面上，关掉 JS、关掉动效、用读屏软件都读得到；
     点开之后才在下面交出「正在探索什么」。

   所以「发现」发现的不是内容本身，而是细节——没有点开的三项
   仍然是完整的条目，不是待办事项。

   下面这组用 grid-template-rows: 0fr → 1fr 收放，不用 max-height：
   高度是算出来的，不写死数字，改文案不用回来改 CSS。
   ================================================================ */

/* 回声要有一个定位祖先。这里刻意不设 overflow: hidden——
   裁切由回声自己做，容器保持干净。 */
.l-subjects {
  position: relative;
}

/* 每一行带一个「激活」变量 --on（0 或 1）。悬停和键盘焦点都只是把它翻成 1，
   位移、变亮、描边读的都是同一个变量——两种输入共享一份数值，
   不会各写一遍然后在某次改动里悄悄漂开。 */
.l-subject {
  --on: 0;
  --shift: 10px;
  --rule: var(--l-line);
  --num: var(--l-ghost);
  --desc: var(--l-faint);
  position: relative;
  z-index: 1; /* 压在回声之上，否则背景大字会盖住正文 */
  border-top: 1px solid var(--rule);
  transition: border-color 0.4s var(--l-ease);
}

.l-subject:last-child {
  border-bottom: 1px solid var(--l-line);
}

/* 键盘焦点给一套和悬停等量的反馈。用 :has() 从按钮反查整行，
   不需要 :focus-within——那个在失焦后还留着，会跟 is-open 混在一起。

   注意这里只给「轻反馈」（位移 / 变亮 / DISCOVER 出现），不展开面板：
   让焦点也展开的话，键盘用户会看到内容已经露出来、而 aria-expanded
   还是 false——两个状态对不上。展开统一由点击 / 回车负责。 */
.l-subject:has(.l-subject-head:focus-visible) {
  --on: 1;
  --rule: var(--l-line-2);
  --num: var(--l-soft);
  --desc: var(--l-soft);
}

.l-subject-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 44px);
  width: 100%;
  padding: clamp(18px, 2.6vh, 30px) 0;
  text-align: left;
}

.l-subject-num {
  color: var(--num);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  transition: color 0.35s var(--l-ease);
}

/* 整个标题区一起右移，不是只移动那个单词——只动单词的话，
   下面那行中文描述会留在原地，看起来像两件事。 */
.l-subject-body {
  display: block;
  transform: translateX(calc(var(--on) * var(--shift)));
  transition: transform 0.42s var(--l-ease-out);
}

.l-subject-name {
  display: block;
  color: var(--l-fg);
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* 英文科目名是「身份」，这行中文是「它到底是什么」。
   两个都留着：只留英文会让这一页变成一张课程表。 */
.l-subject-cn {
  display: block;
  margin-top: 9px;
  color: var(--l-soft);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.04em;
}

.l-subject-desc {
  display: block;
  max-width: 42em;
  margin-top: 10px;
  color: var(--desc);
  font-size: clamp(12.5px, 0.98vw, 14px);
  line-height: 1.85;
  transition: color 0.35s var(--l-ease);
}

/* ---------------------------------------------------------------- 状态
   只有「LEARNING」这一个值。它不是等级，是现在进行时——
   四个科目全都还在这条线上，所以四行写的是同一件事。 */

.l-subject-status {
  display: grid;
  gap: 5px;
  text-align: right;
}

.l-subject-status-cap {
  color: var(--l-ghost);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.l-subject-status-val {
  color: var(--l-soft);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------ DISCOVER 指示
   静止时完全隐藏，指向它才出现。它读的也是 --on——悬停、键盘焦点、
   已展开三种来源翻的是同一个数，和标题的位移、编号的变亮同步，
   不会各写一遍然后在某次改动里悄悄漂开。

   触屏没有 hover，所以那时它一律显示（见下面的 pointer: coarse 段），
   否则手机上就没有任何「这里能点」的提示了。 */

.l-subject-go {
  color: var(--l-soft);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--on);
  transform: translateX(calc((1 - var(--on)) * -6px));
  transition:
    opacity 0.3s var(--l-ease),
    transform 0.42s var(--l-ease-out),
    color 0.35s var(--l-ease);
}

.l-subject-go span {
  display: inline-block;
  margin-left: 7px;
}

/* 触屏上没有 hover，而 DISCOVER 是「这里能展开」的唯一提示。
   所以粗指针设备上一律显示——它在这里退回成一个静态记号，不是动画。 */
@media (hover: none), (pointer: coarse) {
  .l-subject-go {
    opacity: 1;
    transform: none;
  }
}

/* 已经点开的那一行持续保持「激活」：状态、描边、DISCOVER 都留在亮的一侧，
   不需要鼠标一直停在上面才能知道「开着的是这一项」。 */
.l-subject.is-open {
  --on: 1;
  --rule: var(--l-line-2);
  --num: var(--l-soft);
  --desc: var(--l-soft);
}

/* ------------------------------------------------------------ 展开面板 */

.l-subject-panel {
  display: grid;
  grid-template-rows: 1fr;
}

.l-subject-inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: clamp(20px, 2.8vh, 34px);
}

html.l-ready .l-subject-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.44s var(--l-ease-out);
}

/* visibility 必须跟着一起收。0fr + overflow:hidden 会把内容压成零高，
   但里面的「关闭」按钮仍然留在 Tab 顺序里——键盘会跳到一个看不见的
   按钮上。visibility: hidden 把它移出顺序，只有展开之后才 Tab 得到。
   收起时给 visibility 一个 0.44s 的延迟，等淡出走完再消失；
   展开时不给延迟，立刻可见。 */
html.l-ready .l-subject-inner {
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.34s var(--l-ease),
    transform 0.46s var(--l-ease-out) 0.06s,
    padding-bottom 0.44s var(--l-ease-out),
    visibility 0s linear 0.44s;
}

html.l-ready .l-subject.is-open .l-subject-panel {
  grid-template-rows: 1fr;
}

html.l-ready .l-subject.is-open .l-subject-inner {
  padding-bottom: clamp(20px, 2.8vh, 34px);
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.34s var(--l-ease),
    transform 0.46s var(--l-ease-out) 0.06s,
    padding-bottom 0.44s var(--l-ease-out),
    visibility 0s linear 0s;
}

/* --------------------------------------------------- hover 只是「预览」
   桌面端指向某一行，面板也会打开，但只展开到术语为止：
   状态和「关闭」要等真的点开才出现（见下面的 opacity / visibility 门控）。
   所以 hover 回答的是「这里面大概有什么」，点击才交出完整的记录。

   触屏上没有这一段——「点一下」由 .is-open 负责，两者分开，
   手机上不会出现「点开关不掉」的粘滞悬停。 */
@media (hover: hover) and (pointer: fine) {
  html.l-ready .l-subject:hover .l-subject-panel {
    grid-template-rows: 1fr;
  }

  html.l-ready .l-subject:hover .l-subject-inner {
    padding-bottom: clamp(20px, 2.8vh, 34px);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.34s var(--l-ease),
      transform 0.46s var(--l-ease-out) 0.06s,
      padding-bottom 0.44s var(--l-ease-out),
      visibility 0s linear 0s;
  }

  /* 悬停就是「激活」的另一个来源，翻的还是同一个 --on。 */
  .l-subject:hover {
    --on: 1;
    --rule: var(--l-line-2);
    --num: var(--l-soft);
    --desc: var(--l-soft);
  }
}

.l-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "terms meta"
    "terms close";
  column-gap: clamp(24px, 4vw, 80px);
  row-gap: clamp(16px, 2.2vh, 26px);
  align-items: start;
}

.l-panel-main {
  grid-area: terms;
}

.l-panel-cap {
  color: var(--l-ghost);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 术语竖排、两列。竖排让它读起来像一份清单而不是一排标签，
   和上面那行散文式的描述区分开。 */
.l-subject-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px clamp(18px, 2.4vw, 40px);
  margin-top: 15px;
}

.l-subject-terms li {
  color: var(--l-soft);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.7;
}

.l-subject-meta {
  grid-area: meta;
  display: flex;
  gap: clamp(20px, 3vw, 48px);
}

.l-subject-meta dt {
  color: var(--l-ghost);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.l-subject-meta dd {
  margin-top: 5px;
  color: var(--l-soft);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 状态和「关闭」只在真正点开（.is-open）时才出现，hover 预览里看不到。
   用 opacity 而不是 display，展开过程中不会跳一下。

   「关闭」是这一页唯一的隐藏按钮：没有 JS 时它整个 display: none——
   一个点了没反应的按钮比没有按钮更糟（而且那时所有面板本来就是展开的）。 */
.l-panel-close {
  display: none;
}

html.l-ready .l-panel-close {
  display: inline-flex;
  grid-area: close;
  align-items: center;
  justify-self: end;
  gap: 9px;
  color: var(--l-faint);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition:
    color 0.3s var(--l-ease),
    opacity 0.3s var(--l-ease),
    visibility 0s linear 0.44s;
}

.l-panel-close:hover {
  color: var(--l-fg);
}

.l-panel-close-mark {
  font-size: 15px;
  line-height: 1;
}

html.l-ready .l-subject-meta {
  opacity: 0;
  transition: opacity 0.3s var(--l-ease);
}

html.l-ready .l-subject.is-open .l-subject-meta {
  opacity: 1;
  transition: opacity 0.3s var(--l-ease) 0.12s;
}

html.l-ready .l-subject.is-open .l-panel-close {
  opacity: 1;
  visibility: visible;
  transition:
    color 0.3s var(--l-ease),
    opacity 0.3s var(--l-ease) 0.12s,
    visibility 0s linear 0s;
}

/* ------------------------------------------------------ 巨大的背景回声
   四个科目名叠在同一处，谁被指向谁浮上来（opacity 0 → 0.055，
   外加 14px 的位移）。它不承载信息，只让四行有不同的「空间身份」，所以：
   aria-hidden、pointer-events: none、不可选中、低到几乎看不见。

   裁切放在这一层：字号是 vw 单位、文字 nowrap，万一某档宽度下装不下，
   裁掉的是它自己，绝不会撑出横向滚动。 */
.l-echo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.l-echo i {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--l-fg);
  /* 字号按「最长的那个词（MATHEMATICS，十一个字母）正好落在内容栏内」定。
     vw 档位再往上调，它就会越过左边界被切掉笔画——低对比度下远看是
     纹理，凑近就是一个渲染 bug。7vw 在 1440 宽下约 101px，
     十一个字母约占 690px，内容栏有 1280px，余量充足。 */
  font-size: clamp(52px, 7vw, 112px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.82;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(calc(-50% + 14px));
  transition: opacity 0.5s var(--l-ease), transform 0.6s var(--l-ease-out);
}

.l-subjects[data-echo="0"] .l-echo i:nth-child(1),
.l-subjects[data-echo="1"] .l-echo i:nth-child(2),
.l-subjects[data-echo="2"] .l-echo i:nth-child(3),
.l-subjects[data-echo="3"] .l-echo i:nth-child(4) {
  opacity: 0.055;
  transform: translateY(-50%);
}

/* ========================================================== 03 CURRENTLY
   不是技能表，是「现在正在干什么」。三行都是进行时，所以它们会过期——
   这正是不写成进度条的原因。

   版式和 About 的 CURRENTLY 刻意不同：这里只有两栏、没有箭头、
   没有悬停位移。上面那份目录已经有足够多的反馈了，这一节安静下来，
   读起来才像一句话的结尾而不是又一份清单。 */

.l-currently-row {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(13px, 1.9vh, 20px) 0;
  border-top: 1px solid var(--l-line);
}

.l-currently-row:last-child {
  border-bottom: 1px solid var(--l-line);
}

.l-currently dt {
  color: var(--l-ghost);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
}

.l-currently dd {
  color: var(--l-soft);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.6;
}

/* ======================================================= 04 LAST UPDATED
   一个日期，不是时间线。这一页不记录「连续多少天」，
   它只说明这份目录是什么时候被重新看过的。 */

.l-updated-date {
  color: var(--l-fg);
  font-size: clamp(26px, 3.2vw, 44px);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 32px;
  padding: clamp(36px, 5.5vh, 64px) var(--l-x) clamp(30px, 4.5vh, 52px);
  border-top: 1px solid var(--l-line);
  color: var(--l-faint);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.l-still {
  color: var(--l-ghost);
}

.site-record a {
  transition: color 0.25s var(--l-ease);
}

.site-record a:hover,
.site-record a:focus-visible {
  color: var(--l-soft);
}

/* ================================================================ 揭示
   滚动到才出现。只是淡入 + 上移 16px——删掉这条规则，内容一个字不少。
   揭示挂在 html.l-ready 之下：脚本没跑，就没有隐藏态，
   内容不会停在 opacity: 0。 */

.l-reveal {
  transition: opacity 0.7s var(--l-ease-out), transform 0.7s var(--l-ease-out);
}

html.l-ready .l-reveal {
  opacity: 0;
  transform: translateY(16px);
}

html.l-ready .l-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================ 响应式 */

/* 平板：错位收小，字号回到中间档。editorial 的感觉留着，但不再拉开 */
@media (max-width: 1023px) {
  :root {
    --l-x: clamp(24px, 5.6vw, 60px);
  }

  .l-block > .eyebrow {
    grid-column: 1 / span 3;
  }

  .l-block > .l-subjects,
  .l-block > .l-currently,
  .l-block > .l-updated {
    grid-column: 4 / span 9;
  }

  .l-hero-spec {
    justify-self: start;
  }

  /* 位移减半。平板是「手臂伸得更远」的阅读距离，
     同样的 10px 在这里显得比桌面端更跳。 */
  .l-subject {
    --shift: 6px;
  }

  /* 右侧序号在这一档关掉：834 的两侧留白有限，一个 fixed 的序号会
     贴到正文边上，破坏 editorial 的呼吸。它只是辅助信息，宁可不要。 */
  html.l-ready .l-rail {
    display: none;
  }
}

/* 手机：不缩小桌面版，改成纵向阅读。
   网格列数降到 1，所以每条 grid-column 都必须重设一次——
   留着 4 / span 9 会撑出隐式列，直接变成横向滚动。 */
@media (max-width: 640px) {
  :root {
    --l-section-y: clamp(52px, 7.5vh, 70px);
  }

  .site-header {
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .brand-note {
    display: none;
  }

  .navbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .navbar::-webkit-scrollbar {
    display: none;
  }

  .navbar a {
    font-size: 13px;
  }

  .l-hero {
    min-height: 0;
    padding-top: clamp(36px, 6vh, 56px);
  }

  .l-hero-title {
    font-size: clamp(38px, 13vw, 64px);
  }

  .l-hero-spec {
    gap: 14px 26px;
  }

  .l-block {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .l-block > .eyebrow,
  .l-block > .l-subjects,
  .l-block > .l-currently,
  .l-block > .l-updated {
    grid-column: 1;
  }

  .l-block > .eyebrow {
    padding-top: 0;
  }

  /* 标签和内容挤在一列里，靠一条线分开，不然会读成同一段 */
  .l-block > .eyebrow::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 10px;
    background: var(--l-line-2);
  }

  /* 手机：编号和 DISCOVER 一行，科目和描述占满下一行，状态退回左对齐。
     brief 第二十三节要的纵向顺序就是：编号 / 科目 / 描述 / 状态。 */
  .l-subject-head {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 13px;
    padding: 17px 0;
  }

  .l-subject-num {
    grid-column: 1;
  }

  .l-subject-go {
    grid-column: 2;
    justify-self: end;
  }

  .l-subject-body {
    grid-column: 1 / -1;
  }

  .l-subject-name {
    font-size: clamp(23px, 7.6vw, 34px);
  }

  .l-subject-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 9px;
    text-align: left;
  }

  .l-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "terms"
      "meta"
      "close";
    row-gap: 18px;
  }

  .l-subject-terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .l-subject-meta {
    gap: 26px;
  }

  .l-panel-close {
    justify-self: start;
  }

  /* 巨大回声在手机上关掉：390 宽下 7vw 只有 27px，既不成其为「巨大」，
     又会在已经排满的一列里添乱。brief 第十五节明确说 Mobile 可以直接关闭。 */
  .l-echo {
    display: none;
  }

  .l-currently-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
    padding: 14px 0;
  }

  .site-footer {
    flex-direction: column;
  }
}

/* ======================================================== 减弱动效
   全部内容照常显示，只是不再有过渡。
   面板照常开合、键盘照常可用——「展开」是内容的一部分，
   和纯粹装饰的进场动画不是一回事，所以它留下来，只是不再有过渡。 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.l-ready .l-reveal {
    opacity: 1;
    transform: none;
  }

  /* 序章的滚动位移整个不写（JS 那侧也会清掉变量），
     这里再兜一次：万一样式先于脚本生效，它也停在原位。 */
  .l-hero {
    opacity: 1;
  }

  .l-hero-title .line {
    transform: none;
  }

  /* 位移全部归零：状态还在（颜色、描边、DISCOVER 仍然会变），
     只是不再移动位置。 */
  .l-subject {
    --shift: 0px;
  }

  .l-echo i {
    transform: translateY(-50%);
  }
}