/* =========================================================
   朴树 · Celtis sinensis  —  数字植物展览
   style.css  |  palette: 米白 / 深绿 / 树皮灰褐
   ========================================================= */

/* ---------- 0. tokens ---------- */
:root{
  --paper:      #F2EEE4;
  --paper-2:    #EAE4D6;
  --paper-3:    #E0D9C8;
  --ink:        #1E2420;
  --ink-2:      #4A4438;
  --ink-3:      #7A7264;
  --hair:       rgba(30,36,32,.18);
  --hair-soft:  rgba(30,36,32,.10);

  --green-900:  #0F2A1F;
  --green-800:  #14372A;
  --green-700:  #1E4B38;
  --green-600:  #2F5D45;
  --green-300:  #8FA892;
  --cream:      #EFECE2;

  --bark-700:   #54473A;
  --bark-500:   #7A6A58;
  --bark-300:   #A79A85;
  --rust:       #A65A2E;
  --gold:       #C89B4A;

  --c-spring:  #2C5943;
  --c-summer:  #12321F;
  --c-autumn:  #6E4522;
  --c-winter:  #4B4D46;

  --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",Georgia,serif;
  --sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --latin: Georgia,"Times New Roman",serif;

  --pad-y: 14vh;
  --wrap: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.95; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:.02em; }
p{ margin:0 0 1.5em; }
a{ color:inherit; text-decoration:none; }
ol,ul{ margin:0; padding:0; list-style:none; }
dl,dd,dt{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--green-600); color:var(--cream); }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--green-800); color:var(--cream); padding:12px 20px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--green-600); outline-offset:4px; }

/* ---------- 2. reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
.fig{ overflow:hidden; }
.fig img{ transform:scale(1.07); transition:transform 1.8s var(--ease), filter 1.2s linear; }
.fig.is-in img{ transform:scale(1); }

[data-split] .ch{ display:inline-block; opacity:0; transform:translateY(.4em); }
[data-split].is-in .ch{ animation:charIn 1s var(--ease) forwards; animation-delay:calc(var(--i,0) * 80ms); }
@keyframes charIn{ to{ opacity:1; transform:none; } }

/* ---------- 3. rails ---------- */
.rail-top{ position:fixed; inset:0 0 auto 0; height:2px; background:var(--hair-soft); z-index:90; }
.rail-top__bar{ display:block; height:100%; width:0; background:var(--green-600); transition:width .12s linear; }

.rail-nav{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:80; mix-blend-mode:normal;
}
.rail-nav__list{ display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.rail-nav a{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.rail-nav i{
  display:block; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--ink-3); background:transparent; transition:.4s var(--ease);
}
.rail-nav em{
  font-style:normal; font-size:11px; letter-spacing:.16em; color:var(--ink-3);
  opacity:0; transform:translateX(8px); transition:.45s var(--ease); white-space:nowrap;
}
.rail-nav a:hover em,.rail-nav a:focus-visible em{ opacity:1; transform:none; }
.rail-nav a:hover i{ border-color:var(--green-600); }
.rail-nav li.is-active i{ background:var(--green-600); border-color:var(--green-600); transform:scale(1.25); }
.rail-nav li.is-active em{ opacity:1; transform:none; color:var(--ink); }

.to-top{
  position:fixed; right:26px; bottom:26px; z-index:80;
  display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none;
  transform:translateY(12px); transition:.6s var(--ease);
}
.to-top.is-on{ opacity:1; pointer-events:auto; transform:none; }
.to-top span{ font-size:18px; color:var(--ink-3); }
.to-top em{ font-style:normal; font-size:10px; line-height:1.3; letter-spacing:.14em; color:var(--ink-3); text-align:left; }
.to-top:hover em{ color:var(--green-600); }

/* ---------- 4. hero ---------- */
.hero{ position:relative; min-height:100svh; display:grid; align-content:space-between;
  padding:clamp(22px,4vh,48px) clamp(20px,6vw,90px) clamp(20px,3.4vh,40px); overflow:hidden; }
.hero__media{ position:absolute; inset:-12% 0 -8% 0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,26,20,.62) 0%, rgba(12,26,20,.34) 34%, rgba(12,26,20,.52) 72%, rgba(15,42,31,.86) 100%);
}
.hero__type{ position:relative; z-index:2; align-self:center; max-width:min(1100px,100%); }
.hero__eyebrow{ display:flex; align-items:center; gap:14px; margin:0 0 clamp(18px,3vh,34px);
  color:rgba(239,236,226,.86); font-size:11px; letter-spacing:.34em; text-transform:uppercase; }
.hero__eyebrow span:first-child{ border-bottom:1px solid rgba(239,236,226,.4); padding-bottom:4px; }
.hero__eyebrow i{ flex:0 0 46px; height:1px; background:rgba(239,236,226,.5); }

.hero__title{
  font-size:clamp(4.4rem,15.4vw,13.5rem); line-height:.84; color:var(--cream);
  margin:0 0 .05em; letter-spacing:.06em; text-shadow:0 2px 40px rgba(0,0,0,.22);
}
.hero__latin{ font-family:var(--latin); font-style:italic; font-size:clamp(1rem,2.1vw,2rem);
  color:rgba(239,236,226,.9); letter-spacing:.05em; margin:0 0 clamp(12px,1.8vh,22px); }
.hero__sub{ margin:0 0 clamp(14px,2.2vh,26px); font-size:12px; letter-spacing:.26em; color:rgba(239,236,226,.72); }
.hero__sub span{ font-family:var(--latin); font-style:italic; letter-spacing:.06em; }
.hero__lede{ max-width:34em; margin:0; color:rgba(239,236,226,.9); font-size:clamp(14px,.95vw,16px); line-height:1.95; }

.hero__foot{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.hero__note{ margin:0; color:rgba(239,236,226,.66); font-size:11px; letter-spacing:.16em; }
.hero__note b{ font-family:var(--latin); color:var(--gold); margin-right:8px; }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(239,236,226,.8); font-size:10px; letter-spacing:.28em; }
.scroll-cue i{ width:1px; height:56px; background:linear-gradient(180deg,rgba(239,236,226,.8),transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; inset:0 0 auto 0; height:16px; background:var(--cream); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-18px)} 60%,100%{transform:translateY(58px)} }
.scroll-cue:hover{ color:#fff; }

/* ---------- 5. chapter shell ---------- */
.ch{ position:relative; padding:var(--pad-y) 0; overflow:hidden; }
.ch--paper{ background:var(--paper); color:var(--ink); }
.ch--dark{ background:var(--green-800); color:var(--cream); }
.ch--dark .ch-kicker b{ color:var(--gold); }
.ch--dark .ch-kicker i{ background:rgba(239,236,226,.4); }
.wrap{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,6vw,72px); }
.wrap--narrow{ max-width:820px; }

.ch-head{ margin-bottom:clamp(48px,8vh,110px); }
.ch-kicker{ display:flex; align-items:center; gap:12px; margin:0 0 clamp(14px,2vh,24px);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); }
.ch--dark .ch-kicker{ color:rgba(239,236,226,.62); }
.ch-kicker b{ font-family:var(--latin); font-size:13px; letter-spacing:.1em; color:var(--bark-500); }
.ch--dark .ch-kicker b{ color:var(--gold); }
.ch-kicker i{ flex:0 0 42px; height:1px; background:var(--hair); }
.ch--dark .ch-kicker i{ background:rgba(239,236,226,.35); }

.ch-title{ font-size:clamp(2.4rem,6.4vw,5.4rem); line-height:1.06; letter-spacing:.03em; margin:0 0 .4em; }
.ch-latin{ margin:0; font-family:var(--latin); font-style:italic; font-size:clamp(.95rem,1.3vw,1.28rem);
  color:var(--ink-3); letter-spacing:.04em; }
.ch--dark .ch-title{ color:var(--cream); }
.ch--dark .ch-latin{ color:rgba(239,236,226,.6); }

.ch-num{
  position:absolute; z-index:1; right:-.04em; top:4vh; pointer-events:none;
  font-family:var(--latin); font-size:clamp(12rem,30vw,34rem); line-height:.7;
  color:var(--ink); opacity:.045; letter-spacing:-.02em;
}
.ch-num--invert{ color:var(--cream); opacity:.06; }

/* ---------- 6. prose ---------- */
.prose{ max-width:34em; margin-left:auto; margin-right:auto; }
.prose p{ font-size:clamp(1.02rem,1.2vw,1.28rem); line-height:2.1; }
.prose--lead p:first-child{ font-size:clamp(1.2rem,1.9vw,1.72rem); line-height:1.85; }
.prose b{ font-weight:400; border-bottom:1px solid var(--green-600); padding-bottom:1px; }
.prose--wide{ max-width:56em; margin:clamp(60px,10vh,120px) auto 0; }
.prose--wide p{ font-size:clamp(.98rem,1.05vw,1.12rem); color:var(--ink-2); }

/* ---------- 7. figures ---------- */
.fig{ margin:0 0 clamp(40px,7vh,86px); }
.fig figcaption{ margin-top:14px; font-size:11px; letter-spacing:.16em; color:var(--ink-3); }
.fig figcaption b{ font-family:var(--latin); font-style:italic; color:var(--ink); margin-right:10px; }
.fig--rule{ padding-top:clamp(20px,4vh,48px); border-top:1px solid var(--hair); }
.fig--full{ margin-inline:calc(50% - 50vw); height:clamp(420px,86vh,900px); }
.fig--full img{ width:100%; height:100%; object-fit:cover; }
.fig--pad{ border:1px solid var(--hair); padding:14px 14px 0; background:linear-gradient(180deg,#F6F3EB,#EFEADD); }
.fig--pad img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.fig--pad figcaption{ padding:14px 4px 4px; }
.fig--plate{ border:1px solid var(--hair); background:#F6F3EB; padding:clamp(14px,2vw,26px); }
.fig--plate-wide .plate{ aspect-ratio:auto; }
.fig--plate-dark{ background:var(--green-900); border-color:rgba(239,236,226,.16); }
.fig--plate-dark figcaption{ color:rgba(239,236,226,.6); }
.fig--plate-dark figcaption b{ color:var(--gold); }
.plate{ display:block; width:100%; height:auto; }

/* ---------- 8. split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; margin-bottom:clamp(48px,8vh,96px); }
.split--flip .split__media{ order:2; }
.split--tight{ gap:clamp(28px,4.5vw,72px); margin-bottom:0; }
.split__text p{ font-size:clamp(.98rem,1.05vw,1.1rem); color:var(--ink-2); }
.split--invert .split__text p{ color:rgba(239,236,226,.82); }
.split__media{ margin:0; }

/* ---------- 9. spec list ---------- */
.spec-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(40px,7vh,80px); border-top:1px solid var(--hair); }
.spec-list li{ padding:22px 18px 22px 0; border-bottom:1px solid var(--hair); }
.spec-list li:nth-child(3n+2),.spec-list li:nth-child(3n+3){ padding-left:18px; border-left:1px solid var(--hair-soft); }
.spec-list b{ display:block; font-weight:400; font-size:11px; letter-spacing:.24em; color:var(--ink-3); margin-bottom:6px; }
.spec-list span{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.45rem); }
.spec-list--tight{ margin-top:0; }

/* ---------- 10. taxonomy ---------- */
.ladder{ margin:0 0 clamp(60px,9vh,110px); }
.ladder li{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(12px,1.8vh,22px) 0; border-bottom:1px solid rgba(239,236,226,.16);
  transition:padding-left .6s var(--ease), opacity .6s;
  opacity:.72;
}
.ladder li:hover{ padding-left:14px; opacity:1; }
.ladder__cn{ font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.95rem); }
.ladder__la{ font-family:var(--latin); font-style:italic; font-size:clamp(.85rem,1.1vw,1.05rem); color:rgba(239,236,226,.55); }
.ladder .is-species{ border-bottom:0; opacity:1; }
.ladder .is-species .ladder__cn{ font-size:clamp(1.8rem,3.6vw,3rem); color:var(--cream); }
.ladder .is-species .ladder__la{ color:var(--gold); font-size:clamp(1rem,1.5vw,1.4rem); }

.note-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,52px); margin-bottom:clamp(60px,9vh,110px); }
.note-grid--two{ grid-template-columns:repeat(2,1fr); margin-bottom:0; }
.note h3{ font-size:clamp(1.1rem,1.5vw,1.4rem); margin:0 0 .8em; }
.note p{ font-size:.95rem; line-height:2; color:rgba(239,236,226,.72); margin:0; }
.note--outline{ border-top:1px solid var(--gold); padding-top:20px; }
.ch--paper .note p{ color:var(--ink-2); }
.ch--paper .note--outline{ border-top:1px solid var(--bark-500); }
.note i{ font-family:var(--latin); }
.note b{ font-weight:400; color:var(--cream); }
.ch--paper .note b{ color:var(--green-700); }

.table-wrap{ overflow-x:auto; }
.museum-table{ width:100%; border-collapse:collapse; min-width:760px; }
.museum-table caption{ text-align:left; font-size:11px; letter-spacing:.24em; color:rgba(239,236,226,.5);
  padding-bottom:18px; text-transform:uppercase; }
.museum-table th,.museum-table td{ border-top:1px solid rgba(239,236,226,.16); padding:16px 14px 16px 0;
  font-weight:400; font-size:.92rem; text-align:left; vertical-align:top; }
.museum-table thead th{ font-size:1rem; padding-bottom:22px; }
.museum-table thead th i{ display:block; font-family:var(--latin); font-style:italic; font-size:.78rem;
  color:rgba(239,236,226,.5); margin-top:4px; }
.museum-table tbody th{ color:rgba(239,236,226,.55); font-size:.82rem; letter-spacing:.1em; width:1%; white-space:nowrap; }
.museum-table td{ color:rgba(239,236,226,.78); }
.museum-table .is-key{ color:var(--gold); }

/* ---------- 11. bark / leaf ---------- */
.ch--bark .split__text p:last-child{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.4rem); color:var(--ink); line-height:1.95; }
.ch--leaf .split--tight .split__media{ order:2; }

/* 叶片章节：实拍大图 + 编号标记 + 图说，与尺寸图版并置 */
.leaf-plate{ display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(26px,4vw,64px);
  align-items:stretch; margin:0 0 clamp(46px,8vh,92px); }
.leaf-plate__frame{ background:#F6F3EB; border:1px solid var(--hair); padding:clamp(12px,1.5vw,22px);
  display:flex; flex-direction:column; }
.leaf-shot{ position:relative; aspect-ratio:14/13; overflow:hidden; background:var(--paper-3); }
.leaf-shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.78) contrast(1.06) brightness(1.02); }
.leaf-shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(158deg, rgba(47,93,69,.40) 0%, rgba(20,55,42,.74) 100%);
  mix-blend-mode:multiply; }
.anol{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(239,236,226,.85); color:var(--cream);
  font-family:var(--latin); font-size:12px; line-height:1;
  background:rgba(20,55,42,.34); box-shadow:0 1px 10px rgba(0,0,0,.25); }
.leaf-plate figcaption{ margin-top:16px; font-size:11px; letter-spacing:.14em; color:var(--ink-3); }
.leaf-plate figcaption b{ font-family:var(--latin); font-style:italic; color:var(--ink); margin-right:10px; }

.key{ align-self:center; margin:0; }
.key li{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:clamp(12px,1.6vh,18px) 0; border-top:1px solid var(--hair); }
.key li:last-child{ border-bottom:1px solid var(--hair); }
.key b{ font-family:var(--latin); font-weight:400; font-size:13px; color:var(--bark-500); padding-top:.45em; }
.key h3{ font-size:clamp(1.02rem,1.35vw,1.24rem); margin:0 0 .35em; }
.key p{ margin:0; font-size:.9rem; line-height:1.95; color:var(--ink-2); }

.leaf-band{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px);
  align-items:center; margin:0 0 clamp(46px,8vh,92px); }
.leaf-measure{ margin:0; border-top:1px solid var(--hair); }
.leaf-measure > div{ display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--hair-soft); }
.leaf-measure dt{ font-size:11px; letter-spacing:.24em; color:var(--ink-3); }
.leaf-measure dd{ font-family:var(--serif); font-size:clamp(1rem,1.4vw,1.32rem); }
.leaf-band .fig--plate{ margin:0; }

/* =========================================================
   摄影版式 · 大幅摄影 + 细线标注 + 大留白（04–07 章）
   ========================================================= */

/* --- 图版外壳 --- */
.photo{ margin:0 0 clamp(46px,8vh,96px); }
.photo figcaption{ margin-top:18px; font-size:11px; letter-spacing:.16em; color:var(--ink-3); }
.photo figcaption b{ font-family:var(--latin); font-style:italic; color:var(--ink); margin-right:10px; }
.photo__frame{ position:relative; overflow:hidden; background:var(--paper-3); }
.photo__frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04);
  transition:transform 2s var(--ease); }
.photo.is-in .photo__frame img{ transform:scale(1); }

/* --- 全幅出血 --- */
.photo--full{ margin-inline:calc(50% - 50vw); }
.photo--full .photo__frame{ height:clamp(420px,84vh,900px); }

/* --- 竖幅 / 横带 / 宽幅：帧比例与源文件一致，细线标注不偏移 --- */
.photo--tall{ max-width:min(520px,42vw); }
.photo--tall .photo__frame{ aspect-ratio:3/4; }
.photo--portrait{ max-width:min(540px,44vw); }
.photo--portrait .photo__frame{ aspect-ratio:880/947; }
.photo--band{ max-width:min(920px,80vw); margin-inline:auto; }
.photo--band .photo__frame{ aspect-ratio:1400/569; }
.photo--wide{ max-width:min(1180px,94vw); margin-inline:auto; }
.photo--wide .photo__frame{ aspect-ratio:3/2; }

/* --- 细线标注层 --- */
.ann{ position:absolute; inset:0; pointer-events:none; }
.ann > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ann__lead{ stroke:var(--cream); stroke-width:1; fill:none; opacity:.85; }
.ann__pt{ stroke:var(--cream); stroke-width:5; stroke-linecap:round; opacity:.9; }
.ann__bar{ stroke:var(--cream); stroke-width:1; fill:none; opacity:.9; }
.ann__lg{ position:absolute; left:var(--x); top:var(--y); transform:translateY(-50%);
  white-space:nowrap; fill:var(--cream); font-family:var(--latin); font-size:13px;
  letter-spacing:.08em; paint-order:stroke fill;
  stroke:rgba(15,24,19,.55); stroke-width:3px; }
.ann__lg--cn{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; }
/* 亮底照片：改用深墨线 */
.ann--ink .ann__lead,.ann--ink .ann__bar{ stroke:rgba(20,32,24,.8); }
.ann--ink .ann__pt{ stroke:rgba(18,40,28,.85); }
.ann--ink .ann__lg{ fill:var(--green-900); stroke:rgba(242,238,228,.72); }

/* --- 图文对开（杂志跨页） --- */
.spread{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(30px,6vw,110px); align-items:center; }
.spread--flip .photo{ order:2; }
.spread--inv{ align-items:start; }
.spread__text p{ color:var(--ink-2); }
.spread--inv .spread__text p{ color:rgba(239,236,226,.82); }
.spread__text > p{ margin-bottom:1.4em; }
.spread__cite{ margin-top:clamp(24px,4vh,44px); padding-top:18px;
  border-top:1px solid var(--hair); font-size:.86rem; color:var(--ink-3); }
.spread--inv .spread__cite{ border-color:rgba(239,236,226,.22); color:rgba(239,236,226,.6); }

/* --- 编号图说（照片旁的知识，不绘制器官） --- */
.notes{ margin:clamp(22px,3.4vh,38px) 0 0; }
.notes li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:16px 0; border-top:1px solid var(--hair-soft); }
.notes li:last-child{ border-bottom:1px solid var(--hair-soft); }
.notes b{ font-family:var(--latin); font-weight:400; font-size:12px;
  color:var(--bark-500); padding-top:.5em; letter-spacing:.06em; }
.notes h3{ font-size:clamp(.98rem,1.25vw,1.16rem); margin:0 0 .3em; }
.notes p{ margin:0; font-size:.88rem; line-height:1.9; color:var(--ink-3); }
.spread--inv .notes li{ border-color:rgba(239,236,226,.14); }
.spread--inv .notes b{ color:var(--gold); }
.spread--inv .notes h3{ color:var(--cream); }
.spread--inv .notes p{ color:rgba(239,236,226,.62); }

/* --- 章节小标题 --- */
.sub-h{ font-size:clamp(1.24rem,2vw,1.8rem); margin:0 0 .5em; }
.sub-h span{ display:block; font-family:var(--latin); font-style:italic;
  font-size:.72rem; letter-spacing:.2em; color:var(--ink-3); margin-top:.5em; }
.spread--inv .sub-h{ color:var(--cream); }
.spread--inv .sub-h span{ color:rgba(239,236,226,.5); }

/* --- 尺寸尺标 --- */
.ruler{ display:flex; align-items:center; gap:14px; margin-top:clamp(20px,3vh,32px);
  padding-top:16px; border-top:1px solid var(--hair); }
.ruler svg{ width:min(260px,44%); height:24px; overflow:visible; }
.ruler__t{ font-size:11px; letter-spacing:.2em; color:var(--ink-3); line-height:1.7; }
.spread--inv .ruler{ border-color:rgba(239,236,226,.2); }
.spread--inv .ruler__t{ color:rgba(239,236,226,.6); }

/* =========================================================
   08 分布与海拔 · 纯信息图
   ========================================================= */
.ig{ margin:clamp(30px,6vh,70px) 0 0; }
.ig__ttl{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--ink); }
.ig__ttl span{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.35rem); }
.ig__ttl em{ font-style:normal; font-family:var(--latin); font-size:11px;
  letter-spacing:.24em; color:var(--ink-3); }
.ig__ttl--sub{ border-bottom-color:var(--hair); }

.ig__scale{ display:flex; justify-content:space-between; margin-top:clamp(46px,8vh,86px); }
.ig__scale span{ font-family:var(--latin); font-size:11px; letter-spacing:.18em; color:var(--ink-3); }

.ig__bar{ position:relative; height:clamp(180px,25vh,240px); margin-top:14px; }
.ig__rail{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair); }
.ig__pts{ position:absolute; inset:0; }
.ig__pt{ position:absolute; left:var(--p); bottom:0;
  opacity:0; transform:translateX(-50%) translateY(10px);
  transition:opacity .9s var(--ease), transform .9s var(--ease); }
.ig.is-in .ig__pt{ opacity:1; transform:translateX(-50%); }
.ig__pt i{ display:block; width:1px; height:clamp(26px,4vh,40px);
  background:var(--ink); margin:0 auto; }
.ig__pt b{ display:block; width:9px; height:9px; border-radius:50%;
  background:var(--green-800); margin:0 auto -5px; position:relative; z-index:1; }
.ig__pt u{ display:block; text-decoration:none; white-space:nowrap;
  font-family:var(--serif); font-size:clamp(.95rem,1.3vw,1.2rem); }
.ig__pt em{ display:block; font-style:normal; white-space:nowrap; margin-top:4px;
  font-size:11px; letter-spacing:.18em; color:var(--ink-3); }

.ig__alt{ margin-top:clamp(56px,9vh,104px); }
.ig__altbar{ position:relative; height:52px; border:1px solid var(--hair);
  border-top:0; background:linear-gradient(180deg,transparent,rgba(47,93,69,.06)); }
.ig__altfill{ position:absolute; left:0; top:0; bottom:0; width:var(--w);
  background:var(--green-600); opacity:.16;
  transform:scaleX(0); transform-origin:left center; transition:transform 1.6s var(--ease) .3s; }
.ig.is-in .ig__altfill{ transform:scaleX(1); }
.ig__altline{ position:absolute; left:var(--p); top:-8px; bottom:-8px; width:1px;
  background:var(--green-700); opacity:.45; }
.ig__altline::after{ content:""; position:absolute; left:-4px; top:-4px;
  width:9px; height:9px; border-radius:50%; background:var(--green-700); }
.ig__altrow{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:11px; letter-spacing:.18em; color:var(--ink-3); }
.ig__altrow b{ font-family:var(--serif); font-weight:400; font-size:.95rem;
  letter-spacing:0; color:var(--ink-2); }
.ig__note{ margin-top:clamp(30px,5vh,56px); font-size:11px;
  letter-spacing:.16em; color:var(--ink-3); }

/* --- 页脚图片来源 --- */
.credits{ margin:clamp(40px,7vh,80px) auto 0; padding-top:26px;
  border-top:1px solid var(--hair); }
.credits h2{ font-size:clamp(1rem,1.4vw,1.2rem); margin:0 0 6px; }
.credits p{ margin:0 0 clamp(20px,3vh,34px); font-size:.8rem;
  letter-spacing:.14em; color:var(--ink-3); }
.credits table{ width:100%; border-collapse:collapse; }
.credits th,.credits td{ text-align:left; vertical-align:top;
  padding:12px 16px 12px 0; border-bottom:1px solid var(--hair-soft);
  font-size:.8rem; line-height:1.75; }
.credits th{ font-weight:400; font-size:10px; letter-spacing:.22em;
  color:var(--ink-3); border-bottom-color:var(--hair); }
.credits td.k{ font-family:var(--serif); font-size:.95rem; white-space:nowrap; }
.credits td a{ border-bottom:1px solid var(--hair); }
.credits td a:hover{ border-color:var(--green-600); }

@media (max-width:900px){
  .leaf-plate,.leaf-band{ grid-template-columns:1fr; }
  .leaf-plate__frame{ order:1; } .key{ order:2; }
  .key li{ grid-template-columns:auto 1fr; }

  .spread{ grid-template-columns:1fr; gap:clamp(28px,6vw,48px); }
  .spread--flip .photo{ order:0; }
  .photo--tall,.photo--portrait{ max-width:min(520px,86vw); }
  .photo--tall .photo__frame,.photo--portrait .photo__frame{ aspect-ratio:4/5; }
  .photo--band{ max-width:92vw; }
  .photo--band .photo__frame{ aspect-ratio:16/9; }
  .photo--full .photo__frame{ height:62vh; }
  .ann__lg{ font-size:11px; stroke-width:2.5px; }
  .ann__lg--cn{ font-size:10.5px; }
  .ig__bar{ height:clamp(190px,34vh,260px); }
  .ig__pt u{ font-size:.86rem; } .ig__pt em{ font-size:10px; letter-spacing:.12em; }
  .credits table{ font-size:.74rem; }
  .credits th,.credits td{ padding:10px 10px 10px 0; }
}

/* ---------- 12. dark chapters ---------- */
.ch--flower .split__text p{ font-size:clamp(.98rem,1.05vw,1.08rem); }
.fact{ border-top:1px solid rgba(239,236,226,.3); padding-top:22px; }
.fact__k{ margin:0 0 4px; font-size:10px; letter-spacing:.26em; color:rgba(239,236,226,.5); }
.fact__v{ margin:0 0 22px; font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.8rem); }

/* ---------- 13. distribution chart ---------- */
.band{ transform:scaleX(0); transform-origin:left center; transition:transform 1.6s var(--ease); }
.band.is-in{ transform:scaleX(1); }
.band--alt{ transition-delay:.2s; }
.dots circle{ opacity:0; transform:translateY(-10px); transform-origin:center; transition:opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; }
.dots circle{ transition-delay:calc(.9s + var(--d,0) * 120ms); }
.dots.is-in circle{ opacity:1; transform:none; }
.plate--chart{ padding:20px 0 0; }

/* ---------- 14. habitat ---------- */
.habitat{ display:grid; gap:clamp(48px,8vh,100px); }
.habitat__row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,4vw,60px); align-items:center;
  border-top:1px solid var(--hair); padding-top:clamp(28px,5vh,56px); }
.habitat__row--flip .habitat__nums,.habitat__row--flip .habitat__text{ order:2; }
.habitat__row--flip .habitat__ico{ order:1; }
.habitat__num{ font-family:var(--latin); font-size:clamp(2.6rem,5vw,4.6rem); line-height:1; color:var(--green-300); font-style:italic; }
.habitat__text{ max-width:44em; }
.habitat__text h3{ font-size:clamp(1.4rem,2.6vw,2.3rem); margin:0 0 .6em; }
.habitat__text p{ margin:0; color:var(--ink-2); font-size:clamp(.95rem,1.05vw,1.08rem); }
.habitat__ico{ width:clamp(84px,9vw,140px); }
.ico{ width:100%; height:auto; }

/* ---------- 15. seasons ---------- */
.ch--seasons{ background:var(--c-spring); padding-bottom:0; transition:background-color 1.1s var(--ease); }
.ch--seasons[data-season-state="summer"]{ background:var(--c-summer); }
.ch--seasons[data-season-state="autumn"]{ background:var(--c-autumn); }
.ch--seasons[data-season-state="winter"]{ background:var(--c-winter); }
.seasons-rail{ position:fixed; right:22px; bottom:0; z-index:60; margin-bottom:44vh;
  font-family:var(--latin); font-size:12px; letter-spacing:.3em; color:rgba(239,236,226,.72); opacity:0; transition:opacity .6s; }
.seasons-rail.is-on{ opacity:1; }
.season{ display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(30px,5vw,80px); align-items:center;
  min-height:82vh; padding:6vh 0; border-top:1px solid rgba(239,236,226,.14); }
.season__col{ max-width:32em; }
.season__k{ margin:0 0 18px; font-size:11px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }
.season__t{ font-size:clamp(1.7rem,3.6vw,3.1rem); line-height:1.14; margin:0 0 .7em; color:var(--cream); }
.season__col p:last-child{ margin:0; color:rgba(239,236,226,.78); font-size:clamp(.96rem,1.05vw,1.08rem); }
.season__art{ position:sticky; top:14vh; }
@keyframes leafIn{ from{ opacity:0; } to{ opacity:var(--o,1); } }
/* 四季章节是深色底，章节标题必须反白 */
.ch--seasons .ch-kicker{ color:rgba(239,236,226,.62); }
.ch--seasons .ch-kicker i{ background:rgba(239,236,226,.35); }
.ch--seasons .ch-kicker b{ color:var(--gold); }
.ch--seasons .ch-title{ color:var(--cream); }
.ch--seasons .ch-latin{ color:rgba(239,236,226,.6); }
.ch--seasons .ch-num{ color:var(--cream); opacity:.07; }
.plate--season{ border:1px solid rgba(239,236,226,.18); background:rgba(255,255,255,.03); padding:clamp(16px,2.4vw,34px); }

/* ---------- 16. eco ---------- */
.eco-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,5vw,80px); counter-reset:eco; }
.eco-list li{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  padding:clamp(26px,4vh,46px) 0; border-top:1px solid var(--hair); }
.eco-list__n{ font-family:var(--latin); font-size:13px; letter-spacing:.14em; color:var(--bark-500); padding-top:.5em; }
.eco-list h3{ font-size:clamp(1.15rem,1.9vw,1.7rem); margin:0 0 .5em; }
.eco-list p{ margin:0; color:var(--ink-2); font-size:.96rem; }

/* ---------- 17. people ---------- */
.people li{ padding:clamp(30px,5vh,58px) 0; border-top:1px solid var(--hair); counter-increment:peo; }
.people{ counter-reset:peo; }
.people li:last-child{ border-bottom:1px solid var(--hair); }
.people h3{ font-size:clamp(1.5rem,3vw,2.5rem); margin:0 0 .5em; }
.people h3::before{ content:counter(peo,decimal-leading-zero)" · "; font-family:var(--latin); font-size:.42em; color:var(--bark-500); letter-spacing:.1em; }
.people p{ max-width:38em; margin:0; color:var(--ink-2); font-size:clamp(.96rem,1.05vw,1.08rem); }

/* ---------- 18. coda ---------- */
.ch--coda{ padding:clamp(110px,20vh,220px) 0 clamp(70px,12vh,140px); text-align:left; }
.coda-quote{ margin:0 0 clamp(40px,7vh,80px); }
.coda-quote p{ font-family:var(--serif); font-size:clamp(1.9rem,5.2vw,4.2rem); line-height:1.3; color:var(--cream); margin:0 0 .6em; }
.coda-quote cite{ font-style:normal; font-size:12px; letter-spacing:.24em; color:var(--gold); }
.coda-text{ font-size:clamp(1.02rem,1.35vw,1.3rem); line-height:2.15; color:rgba(239,236,226,.84); max-width:34em; margin:0 0 clamp(50px,9vh,100px); }
.label-card{ border:1px solid rgba(239,236,226,.22); padding:clamp(24px,3.4vw,46px); max-width:640px; }
.label-card__k{ margin:0 0 20px; font-size:10px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }
.label-card dl{ display:grid; gap:0; margin:0; }
.label-card dl > div{ display:flex; gap:24px; padding:11px 0; border-top:1px solid rgba(239,236,226,.14); }
.label-card dt{ flex:0 0 88px; font-size:11px; letter-spacing:.16em; color:rgba(239,236,226,.5); padding-top:3px; }
.label-card dd{ font-family:var(--serif); font-size:1.02rem; color:var(--cream); }
.coda-end{ margin:clamp(46px,8vh,90px) 0 20px; font-size:12px; letter-spacing:.24em; color:rgba(239,236,226,.5); }
.coda-top{ font-size:12px; letter-spacing:.24em; color:var(--gold); border-bottom:1px solid rgba(200,155,74,.4); padding-bottom:4px; }

.foot{ background:var(--green-900); color:rgba(239,236,226,.42); padding:0 clamp(20px,6vw,72px) clamp(40px,7vh,80px); }
.foot, .foot p{ font-size:11px; letter-spacing:.16em; }
.foot p{ margin:0 0 .7em; max-width:56em; }
.foot__sub{ color:rgba(239,236,226,.26); line-height:1.9; }

/* ---------- 19. responsive ---------- */
@media (max-width:1100px){
  .rail-nav em{ display:none; }
  .note-grid{ grid-template-columns:1fr; }
  .spec-list{ grid-template-columns:repeat(2,1fr); }
  .spec-list li:nth-child(3n+2),.spec-list li:nth-child(3n+3){ padding-left:0; border-left:0; }
  .spec-list li:nth-child(2n){ padding-left:18px; border-left:1px solid var(--hair-soft); }
}
@media (max-width:900px){
  :root{ --pad-y:10vh; }
  .split{ grid-template-columns:1fr; }
  .split--flip .split__media,.ch--leaf .split--tight .split__media{ order:0; }
  .split__media{ margin-bottom:8px; }
  .split--tight .split__media{ margin-bottom:26px; }
  .eco-list{ grid-template-columns:1fr; }
  .habitat__row{ grid-template-columns:auto 1fr; }
  .habitat__ico{ display:none; }
  .season{ grid-template-columns:1fr; min-height:auto; padding:10vh 0 14vh; }
  .season__art{ position:relative; top:auto; max-width:420px; margin:0 auto 34px; }
  .ch-num{ font-size:clamp(8rem,34vw,16rem); top:2vh; }
  .hero__title{ font-size:clamp(4.6rem,26vw,9rem); }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:26px; }
  .scroll-cue{ flex-direction:row; align-items:center; gap:12px; }
  .scroll-cue i{ width:40px; height:1px; background:linear-gradient(90deg,rgba(239,236,226,.8),transparent); }
  .scroll-cue i::after{ width:12px; height:1px; animation:cueX 2.4s var(--ease) infinite; }
  @keyframes cueX{ 0%{transform:translateX(-14px)} 60%,100%{transform:translateX(42px)} }
  .to-top em{ display:none; }
  .seasons-rail{ display:none; }
}
@media (max-width:600px){
  .spec-list{ grid-template-columns:1fr; }
  .spec-list li:nth-child(2n){ padding-left:0; border-left:0; }
  .label-card dd{ font-size:.95rem; }
  .fig--full{ height:62vh; }
}

/* ---------- 20. a11y / motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  [data-reveal]{ opacity:1; transform:none; }
  [data-split] .ch{ opacity:1; transform:none; }
  .fig img{ transform:none; }
  .band{ transform:none; }
  .dots circle{ opacity:1; transform:none; }
}
@media print{
  .rail-nav,.to-top,.rail-top,.seasons-rail{ display:none; }
  .ch{ padding:20px 0; page-break-inside:avoid; }
}