/* ============================================================
   SHANHE — field archive x environmental humanities
   editorial visual system (paper / ink / moss / clay)
   Refactor: no external fonts/assets, no serif, no cropped
   content images, hover nav dropdowns, auto marquees.
   ============================================================ */

/* ---- Inter, self-hosted (latin subset, woff2) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --paper:#f2eee4;
  --paper-2:#e9e3d4;
  --paper-3:#ded6c3;
  --ink:#1e2b24;
  --ink-2:#45524a;
  --ink-3:#525b54;
  --pine:#14301f;
  --pine-2:#1d4029;
  --moss:#6f8f72;
  --clay:#a2603a;
  --clay-ink:#8f4f2c;
  --clay-soft:#c99a72;
  --line:rgba(30,43,36,.2);
  --line-strong:rgba(30,43,36,.42);
  --white:#fbfaf6;
  --cream:#fffdf6;
  --sans:'Inter','Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Roboto,'Noto Sans',Arial,sans-serif;
  --display:'Inter','Segoe UI Variable Display','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Roboto,'Noto Sans',Arial,sans-serif;
  --mono:'Inter','Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Noto Sans',Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);
  --header-h:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(162,96,58,.22)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
figure,blockquote,p,h1,h2,h3,h4,h5,ul,ol{margin:0}
ul,ol{padding:0}
li{list-style:none}
em{font-style:italic}
strong{font-weight:650;color:var(--ink)}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.wrap-wide{width:min(1440px,94vw);margin-inline:auto}

/* ---------- typography helpers ---------- */
.kicker,.eyebrow,.sec-tag{
  font-family:var(--mono);font-size:12.5px;font-weight:650;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);
}
.kicker{display:flex;align-items:center;gap:14px}
.kicker::before{content:'';width:34px;height:1px;background:var(--clay-soft);flex:none}
.on-dark.kicker,.kicker.on-dark{color:rgba(255,255,255,.9)}
.on-dark.kicker::before{background:rgba(255,255,255,.5)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--display);font-weight:620;line-height:1.12;letter-spacing:-.014em;color:var(--ink)}
h1{font-size:clamp(40px,6vw,74px)}
h2{font-size:clamp(28px,3.6vw,50px)}
h3{font-size:clamp(20px,2.2vw,28px)}
p{color:var(--ink-2)}
p strong{color:var(--ink)}
.lead{font-family:var(--display);font-weight:500;font-size:clamp(19px,2vw,25px);line-height:1.55;color:var(--ink-2);max-width:46em}
.muted{color:var(--ink-3)}
.small{font-size:14px;line-height:1.7}
.panel{background:var(--white);border:1px solid var(--line);border-radius:4px}
.rule{height:1px;background:var(--line-strong);border:0}

/* ============ top navigation ============ */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--header-h);
  display:flex;align-items:center;color:#fff;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-nav.solid,.site-nav.scrolled{
  background:rgba(247,244,237,.97);color:var(--ink);
  box-shadow:0 1px 0 rgba(30,43,36,.12),0 14px 34px rgba(15,30,22,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav-inner{width:min(1380px,94vw);margin-inline:auto;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;border:1px solid rgba(255,255,255,.35);background:#fff}
.site-nav.solid .brand-mark{border-color:var(--line-strong)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-name{font-family:var(--display);font-size:19px;letter-spacing:.1em;line-height:1;white-space:nowrap;font-weight:600}
.brand-sub{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.24em;opacity:.85;text-transform:uppercase;margin-top:4px}

.menu{display:flex;align-items:center;gap:2px}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{
  display:inline-flex;align-items:center;gap:7px;padding:10px 13px;font-size:13.5px;
  letter-spacing:.05em;color:inherit;opacity:.9;transition:opacity .2s;white-space:nowrap;border-radius:2px;
}
.menu>li>a:hover,.menu>li>button:hover{opacity:1}
.site-nav:not(.solid) .menu>li>a:hover{background:rgba(255,255,255,.14)}
.site-nav.solid .menu>li>a:hover{background:rgba(30,43,36,.07)}
.menu .caret{font-size:12px;margin-left:1px;transition:transform .22s var(--ease);display:inline-block}
.menu li:hover>.lvl>a .caret,.menu li:hover>a .caret{transform:rotate(180deg)}

/* dropdown: hover on <li> opens it; bridge band keeps hover alive */
.dropdown{
  position:absolute;top:calc(100% - 4px);left:50%;min-width:300px;
  background:var(--cream);border:1px solid rgba(30,43,36,.26);
  box-shadow:0 2px 4px rgba(20,35,26,.08),0 22px 52px rgba(10,25,17,.2);
  padding:10px;border-radius:4px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);
  transition:.22s var(--ease);z-index:85;
}
.dropdown::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.menu li:hover>.dropdown,.menu li:focus-within>.dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;
}
.dropdown a{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:3px;
  color:#17241d;font-weight:600;font-size:14px;opacity:1;
}
.dropdown a small{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.dropdown a:hover{background:#ece5d4}
.menu-btn{display:none;width:44px;height:44px;position:relative;z-index:95;color:inherit}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:'';display:block;width:24px;height:1.8px;background:currentColor;position:absolute;left:10px;top:21px;transition:.28s var(--ease);
}
.menu-btn span::before{top:-7px}
.menu-btn span::after{top:7px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{top:0;transform:rotate(45deg)}
body.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg)}

/* ============ hero ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,20,14,.78) 0%,rgba(9,20,14,.3) 32%,rgba(9,20,14,.15) 55%,rgba(15,28,21,.74) 100%);
}
.hero-content{width:min(1180px,92vw);margin-inline:auto;padding:150px 0 96px}
.hero-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
  color:rgba(255,255,255,.86);margin-bottom:26px;display:flex;align-items:center;gap:16px;
  text-shadow:0 1px 10px rgba(6,14,10,.5);
}
.hero-eyebrow::before{content:'';width:44px;height:1px;background:rgba(255,255,255,.5)}
.hero-title{
  color:#fff;text-shadow:0 2px 28px rgba(4,10,7,.55),0 1px 3px rgba(4,10,7,.3);
  font-family:var(--display);font-size:clamp(42px,7vw,92px);line-height:1.02;font-weight:640;letter-spacing:-.018em;
  max-width:15em;text-wrap:balance;
}
.hero-sub{max-width:660px;margin-top:26px;font-size:clamp(16px,1.55vw,19px);line-height:1.7;color:rgba(255,255,255,.96);text-shadow:0 1px 12px rgba(8,18,12,.5)}
.hero-meta{margin-top:52px;display:flex;flex-wrap:wrap;gap:10px}
.hero-meta span{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
  border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:99px;color:rgba(255,255,255,.9);
}
.hero.tall{min-height:88svh}
.hero.compact{min-height:62svh;align-items:flex-end}
.hero.compact .hero-content{padding:140px 0 70px}

/* interior page header band */
.pagehead{position:relative;padding:190px 0 110px;color:#fff;background:var(--pine);overflow:hidden}
.pagehead img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.pagehead::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,12,.62) 0%,rgba(8,17,12,.3) 42%,rgba(8,17,12,.72) 82%,rgba(8,17,12,.94) 100%);
}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;text-shadow:0 2px 26px rgba(6,14,10,.5);margin:22px 0 0;letter-spacing:-.018em;max-width:17em}
.pagehead .kicker{color:rgba(255,255,255,.78)}
.pagehead .lede{max-width:660px;margin-top:28px;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.95);text-shadow:0 1px 14px rgba(6,14,10,.4);border-left:2px solid rgba(255,255,255,.45);padding-left:18px}

/* ============ film slot（hero 下方自动播放区） ============ */
.filmslot{position:relative;background:var(--paper);padding-top:clamp(40px,5vw,72px)}
.film-player{position:relative;margin:0;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:#0b1210}
.film-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0b1210}
.film-cap{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);
}
.film-cap .c{color:var(--ink-2)}

/* ============ sections ============ */
section{position:relative}
.sec{padding:clamp(64px,8vw,112px) 0}
.sec.tight{padding:clamp(40px,5vw,70px) 0}
.sec-dark{background:var(--pine);color:#e9e4d7}
.sec-dark h2,.sec-dark h3,.sec-dark .lead{color:#f3eedf}
.sec-dark p{color:rgba(240,236,226,.92)}
.sec-deep{background:#0d2117;color:#efe9db}
.sec-moss{background:var(--moss)}

/* section opening: small category tag -> big title -> intro, all left */
.sec-head{display:block;margin-bottom:clamp(26px,3.5vw,44px)}
/* rule: every section title keeps clear air above it (client, 2026-09-26) */
.sec-head{padding-top:clamp(10px,1.6vw,22px)}
.sec>.wrap>.sec-head:first-child{padding-top:0}
.sec-head .sec-eyebrow:first-child+.aside,.sec-head .sec-eyebrow:first-child+h2{margin-top:0}
.sec-eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--clay-ink);display:block;margin-bottom:16px}
.sec-head h2{max-width:19em;margin:0}
.sec-head .aside{display:block;max-width:720px;margin:16px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-3)}
.sec-head .num{display:none}

/* ============ grids ============ */
.grid{display:grid;gap:26px;align-items:start}
.g2{grid-template-columns:1.15fr 1fr}
.g2b{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.align-center{align-items:center}
@media(max-width:1020px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.g3{grid-template-columns:1fr 1fr}.g2,.g2b{grid-template-columns:1fr}}
@media(max-width:620px){.g4,.g3{grid-template-columns:1fr}}

/* ============ content figures: complete image, never cropped ============ */
.fig{position:relative;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.fig img{width:100%;height:auto;display:block;transform:none!important}
.frame{border:1px solid var(--line-strong);padding:9px;background:var(--white);border-radius:2px}
.frame .fig{border-radius:2px}
figure>img{width:100%;height:auto}
.cap{display:flex;gap:12px;justify-content:space-between;align-items:baseline;margin-top:11px}
.cap .c{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cap .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--clay-ink);white-space:nowrap}
.stamp{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  background:rgba(20,35,26,.72);color:rgba(255,255,255,.94);padding:6px 10px;border-radius:2px;
}

/* ============ pull quote (left aligned) ============ */
.quote{padding:clamp(22px,3vw,40px) 0;max-width:64em}
.quote blockquote{
  font-family:var(--display);font-weight:520;font-size:clamp(22px,2.9vw,38px);line-height:1.32;
  color:var(--pine);letter-spacing:-.01em;text-wrap:balance;
}
.quote cite{display:block;margin-top:18px;font-family:var(--mono);font-style:normal;font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.quote .qmark{font-family:var(--display);color:var(--clay-soft);font-size:56px;line-height:0;display:block;margin-bottom:6px}

/* ============ labels / buttons ============ */
.labels{display:flex;flex-wrap:wrap;gap:9px}
.label{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-strong);border-radius:99px;color:var(--ink);
}
.label.fill{background:var(--pine);color:#fff;border-color:var(--pine)}
.label.clay{color:var(--clay);border-color:rgba(162,96,58,.4)}
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
  padding:14px 22px;border:1px solid var(--line-strong);border-radius:2px;color:var(--ink);transition:.25s var(--ease);
}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover{border-color:var(--pine);background:var(--pine);color:#fff}
.btn:hover .ar{transform:translateX(4px)}
.btn.solid{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.solid:hover{background:var(--pine-2);border-color:var(--pine-2)}
.btn.ghost-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn.ghost-light:hover{background:#fff;border-color:#fff;color:var(--pine)}
.btn.linkline{border:0;padding:6px 0;border-bottom:1px solid var(--clay-soft);letter-spacing:.12em;background:none}
.btn.linkline:hover{background:none;color:var(--clay)}
.btn.linkline:hover .ar{transform:translateX(4px)}

/* ============ auto marquee photo rail (full bleed, seamless) ============ */
.marquee{width:100%;overflow:hidden;--mq-dur:46s;padding:6px 0 10px}
.marquee .mq-track{display:flex;width:max-content;animation:mqScroll var(--mq-dur) linear infinite}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mqScroll{to{transform:translateX(-50%)}}
.mq-group{display:flex;gap:20px;padding-right:20px}
.mq-card{
  flex:none;background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:8px 8px 6px;display:flex;flex-direction:column;max-width:min(86vw,520px);
}
.mq-card img{height:clamp(210px,27vw,330px);width:auto;max-width:none;border-radius:2px}
.mq-card .cap{margin:9px 6px 3px}
.mq-card .cap .c{font-size:12px}
.mq-card .cap .n{font-size:12px}
.mq-dark .mq-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.mq-dark .mq-card .cap .c,.mq-dark .mq-card .cap .n{color:rgba(255,255,255,.8)}
.mq-dark .mq-card .cap .n{color:var(--clay-soft)}
@media(max-width:760px){
  .mq-card img{height:220px}
  .marquee{--mq-dur:34s}
}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .marquee{overflow-x:auto}
}

/* ============ stat strip ============ */
.datastrip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:30px 0}
.datastrip .ds{flex:1 1 220px;padding:20px 26px 18px 0;border-right:1px solid var(--line)}
.datastrip .ds:last-child{border-right:0}
.datastrip .v{font-family:var(--mono);font-size:clamp(19px,2.2vw,28px);color:var(--pine);letter-spacing:.02em}
.datastrip .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:7px;display:block;font-weight:600}

/* ============ process rail (semantic 01-07) ============ */
.rail{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.rail .node{background:var(--white);padding:18px 14px 16px;display:flex;flex-direction:column;gap:9px;min-height:140px}
.rail .node:hover{background:var(--paper-2)}
.rail .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--clay);font-weight:600}
.rail h4{font-size:15px;letter-spacing:.02em;line-height:1.3}
.rail small{font-size:12px;color:var(--ink-3);line-height:1.5}
@media(max-width:1000px){.rail{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.rail{grid-template-columns:repeat(2,1fr)}}

/* ============ split panels ============ */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);overflow:hidden}
.split .half{padding:clamp(34px,4.5vw,64px)}
.split .half.pad0{padding:0}
.split .half+.half{border-left:1px solid var(--line-strong)}
.split h3{font-size:clamp(23px,2.7vw,34px);margin-bottom:18px}
@media(max-width:880px){.split{grid-template-columns:1fr}.split .half+.half{border-left:0;border-top:1px solid var(--line-strong)}}

/* paired photo tiles inside split panels: equal height, images fully visible */
.pairtile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;background:var(--paper-2);padding:14px;border-right:1px solid var(--line);min-height:400px;height:100%;
}
.pairtile:last-child{border-right:0}
.pairtile img{width:100%;height:auto;border-radius:2px}
.pairtile figcaption{margin:0 4px}
@media(max-width:880px){.pairtile{border-right:0;border-bottom:1px solid var(--line);min-height:300px}.pairtile:last-child{border-bottom:0}}

/* ============ boards (cards with full images) ============ */
.board{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:block;color:inherit}
a.board{transition:.25s var(--ease)}
a.board:hover{border-color:var(--line-strong);box-shadow:0 10px 26px rgba(20,35,26,.08)}
.board .im{overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.board .im img{width:100%;height:auto;display:block}
.board .bd{padding:20px 24px 24px}
.board h3{font-size:21px;margin-bottom:10px;line-height:1.28}
.board p{font-size:14.5px;margin:0;line-height:1.66}
.board .tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--clay);text-transform:uppercase;display:block;margin-bottom:10px;font-weight:600}
.board .im.cover-panel{background:linear-gradient(150deg,#163423,#0c2215);display:flex;align-items:center;justify-content:center;border-bottom:0}
.board .im.cover-panel .inner{text-align:center;color:#efe9d7;padding:30px}

/* ---- 成对卡片等高（全站统一）------------------------------------------
   左右并排的两张「图片 + 标签 + 标题 + 正文 + 引导按钮」卡片，正文长度天然
   不同（例如 ART 区左卡正文 3 行、右卡 2 行），整卡就会差几十像素；用户要求
   成对组件一律等高。做法：让卡片本身铺满所在网格行（grid 的 stretch），
   正文区吸收剩余高度，引导按钮用 margin-top:auto 贴到卡底并左右对齐。
   只作用于「两栏网格里的 .board」——align-center 的文字/配图版块是刻意的
   不等高构图，不在范围内。 */
.grid.g2>.board,
.grid.g2b>.board{display:flex;flex-direction:column;height:100%}
.grid.g2>.board>.im,
.grid.g2b>.board>.im{flex:0 0 auto;height:auto}
.grid.g2>.board>.bd,
.grid.g2b>.board>.bd{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}
.grid.g2>.board>.bd>p:last-child,
.grid.g2b>.board>.bd>p:last-child{margin:auto 0 0;padding-top:20px}

/* ============ expandable protocol steps ============ */
details.step{background:var(--white);border:1px solid var(--line);border-radius:4px;margin-bottom:14px;overflow:hidden}
details.step summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:20px 24px;transition:background .2s}
details.step summary::-webkit-details-marker{display:none}
details.step summary:hover{background:var(--paper-2)}
details.step[open] summary{background:var(--paper-2)}
details.step .sno{font-family:var(--mono);font-size:12px;color:var(--clay);letter-spacing:.14em;font-weight:600}
details.step h3{font-size:21px;flex:1}
details.step .ch{font-family:var(--mono);font-size:18px;color:var(--ink-3);transition:transform .25s}
details.step[open] .ch{transform:rotate(45deg)}
details.step .body{display:grid;grid-template-columns:minmax(200px,240px) 1fr;gap:28px;padding:8px 24px 28px}
details.step .body img{width:100%;height:auto;border-radius:3px}
details.step .body p{font-size:15px;line-height:1.75;margin:0 0 10px}
details.step .body .why{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
@media(max-width:760px){details.step .body{grid-template-columns:1fr}}

/* ============ gallery wall (regular grid, no masonry overlap) ============ */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wall figure{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.wall img{width:100%;height:auto}
.wall figcaption{
  padding:12px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;
}
.wall figcaption em{color:var(--clay);font-style:normal}
.wall .leadcap{grid-column:1/-1}
@media(max-width:900px){.wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wall{grid-template-columns:1fr}}

/* ============ content rows ============ */
.rows>div{padding:34px 0;border-top:1px solid var(--line-strong);display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:40px}
.rows>div:last-child{border-bottom:1px solid var(--line-strong)}
.rows h3{font-size:clamp(21px,2.2vw,30px);line-height:1.22;text-wrap:balance}
.rows p{margin:0 0 12px;max-width:74ch}
.rows .rno{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--clay-ink);display:block;margin-bottom:14px;font-weight:600}
.rows .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:840px){.rows>div{grid-template-columns:1fr;gap:10px}}

/* ============ species archive grid: complete images + captions ============ */
.spgrid{display:block;columns:5 150px;column-gap:12px}
.spgrid a{
  display:inline-block;width:100%;margin:0 0 12px;background:var(--white);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;padding:7px;transition:border-color .2s,box-shadow .2s;
}
.spgrid a:hover{border-color:var(--line-strong);box-shadow:0 8px 20px rgba(20,35,26,.08)}
.spgrid img{width:100%;height:auto;display:block}
.spgrid .capn{display:flex;flex-direction:column;gap:3px;padding:9px 5px 5px;opacity:1}
.spgrid .capn i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
.spgrid .capn b{font-weight:600;font-size:12px;font-family:var(--display);color:var(--ink);letter-spacing:.02em}




/* ============ timeline ============ */
.tl{margin:0;padding:0;list-style:none;counter-reset:tl}
.tl>li{position:relative;padding:0 0 26px 92px}
.tl>li::before{
  counter-increment:tl;content:counter(tl,decimal-leading-zero);
  position:absolute;left:0;top:-4px;width:56px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--clay);font-weight:600}
}
.tl>li::after{content:'';position:absolute;left:0;top:24px;bottom:-2px;width:1px;background:var(--line)}
.tl>li:last-child::after{display:none}
.tl h3{font-size:23px;margin-bottom:7px}
.tl p{margin:0;max-width:58ch}

/* ============ QR cards (unified) ============ */
.qr{display:flex;gap:24px;flex-wrap:wrap}
.qr figure{
  width:150px;background:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;
  padding:8px 8px 12px;text-align:center;
}
.qr img{width:132px;height:132px;object-fit:contain;border-radius:6px;background:#fff;margin:0 auto}
.qr figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-top:9px;font-weight:600}
.qr-light figure{border-color:rgba(30,43,36,.2)}
.qr-light figcaption{color:var(--ink-3)}

/* ============ closing band ============ */
.closing{position:relative;padding:clamp(84px,11vw,170px) 0;text-align:center;overflow:hidden;background:var(--pine);color:#fff}
.closing .bg{position:absolute;inset:0;opacity:.12;object-fit:cover;width:100%;height:100%}
.closing::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 45%,rgba(4,10,7,0),rgba(4,10,7,.55))}
.closing .wrap{position:relative}
.closing h2{font-size:clamp(34px,5.6vw,72px);font-weight:640;color:#fff;max-width:15em;margin-inline:auto;letter-spacing:-.016em}
.closing p{color:rgba(255,255,255,.94);max-width:660px;margin:22px auto 0}
.closing .linkrow{margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px}
.closing .linkrow a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:5px;transition:.2s;font-weight:600}
.closing .linkrow a:hover{color:#fff;border-color:#fff}

/* centered emphasis band (allowed; text kept short) */
.band-center{text-align:center}
.band-center h2{margin-inline:auto}

/* ============ footer ============ */
.site-footer{background:#0c1a12;color:rgba(242,238,229,.92);padding:0 0 30px}
.site-footer .top{display:grid;grid-template-columns:1.5fr .85fr 1fr 1fr;gap:42px;padding:66px 0 52px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer h5{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0 0 18px;font-weight:400}
.site-footer .fbrand{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.site-footer .fbrand img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff}
.site-footer .fbrand b{font-family:var(--display);font-weight:620;font-size:21px;letter-spacing:.09em;color:#fff}
.site-footer p{font-size:13.5px;line-height:1.8;color:rgba(242,238,229,.8);max-width:46ch;margin:0}
.site-footer .loc{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:rgba(242,238,229,.6);text-transform:uppercase;font-weight:600}
.site-footer ul{display:grid;gap:11px}
.site-footer a{font-size:13.5px;color:rgba(242,238,229,.92);transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center}
.site-footer .bottom p{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(242,238,229,.6);text-transform:uppercase;font-weight:600}
@media(max-width:980px){.site-footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.site-footer .top{grid-template-columns:1fr}}

/* ============ reveal on scroll ============ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ============ mobile nav ============ */
.mob-nav{display:none}
@media(max-width:1040px){
  .menu{display:none}
  .menu-btn{display:block}
  .mob-nav{
    position:fixed;inset:0;background:rgba(12,26,18,.98);z-index:90;color:#fff;
    display:block;padding:110px 7vw 40px;overflow:auto;
    opacity:0;visibility:hidden;transition:.28s var(--ease);
  }
  body.menu-open .mob-nav{opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}
  .mob-nav>a,.mob-nav .grp>.top{
    display:block;color:#fff;font-family:var(--display);font-weight:620;font-size:27px;
    padding:12px 0;letter-spacing:.02em;
  }
  .mob-nav .grp{position:relative}
  .mob-nav .grp>.top{padding-right:52px}
  .mob-nav .grp .tgl{
    position:absolute;right:0;top:8px;width:46px;height:46px;color:rgba(255,255,255,.65);
    font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .mob-nav .grp .tgl span{display:inline-block;transition:transform .25s var(--ease)}
  .mob-nav .grp.open .tgl span{transform:rotate(45deg)}
  .mob-nav .sub{display:none;grid-template-columns:1fr;gap:2px;margin:2px 0 12px;padding:2px 0 2px 18px;border-left:1px solid rgba(255,255,255,.25)}
  .mob-nav .grp.open .sub{display:grid}
  .mob-nav .sub a{font-family:var(--sans);font-size:14.5px;color:rgba(255,255,255,.78);padding:7px 0;letter-spacing:.02em}
}


/* ============ Atlas page — native argument modules ============ */
.atlas-arg{padding:clamp(54px,7vw,92px) 0;border-top:1px solid var(--line-strong)}
.atlas-arg .arg-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay-ink);display:flex;align-items:center;gap:12px;font-weight:600}
.atlas-arg .arg-kicker::before{content:'';width:26px;height:1px;background:var(--clay-soft)}
.atlas-arg h2{font-size:clamp(26px,3.4vw,46px);margin:14px 0 0;max-width:16em}
.atlas-arg .arg-thesis{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.9vw,22px);line-height:1.55;color:var(--pine);max-width:46em;margin-top:16px}
.atlas-arg .arg-body{color:var(--ink-2);font-size:15.5px;line-height:1.85;max-width:72ch}
.justice-note{margin-top:26px;padding:18px 20px;border-left:2px solid var(--clay);background:var(--white);max-width:820px}
.justice-note .k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);display:block;margin-bottom:8px;font-weight:600}
.justice-note p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--ink)}
.livegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:34px}
.livecard{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.livecard img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.livecard .lc{display:flex;flex-direction:column;gap:7px;padding:14px 14px 16px}
.livecard b{font-size:13.5px;letter-spacing:.02em}
.livecard i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
.livecard small{font-size:12px;line-height:1.6;color:var(--ink-3)}
@media(max-width:980px){.livegrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.livegrid{grid-template-columns:1fr 1fr}}
.claimgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.claim{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.claim img{width:100%;aspect-ratio:16/10.4;object-fit:cover}
.claim .cc{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.claim b{font-size:14px}
.claim small{font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.claim .driver{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
@media(max-width:860px){.claimgrid{grid-template-columns:1fr}}
.flow6{display:grid;grid-template-columns:repeat(6,1fr);margin:30px 0 8px;border:1px solid var(--line-strong)}
.flow6 .fn{padding:18px 14px;border-right:1px solid var(--line);position:relative;background:var(--white)}
.flow6 .fn:last-child{border-right:0}
.flow6 .fn::after{content:'\2192';position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--clay);z-index:2;background:var(--paper);padding:0 2px;font-size:13px}
.flow6 .fn:last-child::after{display:none}
.flow6 .no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--clay);font-weight:600}
.flow6 b{display:block;font-size:12px;line-height:1.35;margin-top:8px}
.flow6 small{display:block;font-size:12px;color:var(--ink-3);line-height:1.55;margin-top:6px}
@media(max-width:1020px){.flow6{grid-template-columns:repeat(3,1fr)}.flow6 .fn:nth-child(3){border-right:0}}
@media(max-width:640px){.flow6{grid-template-columns:1fr 1fr}}
.capture{display:grid;grid-template-columns:170px 1fr;gap:10px 18px;align-items:center;margin-top:22px;max-width:760px}
.capture .who{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right;font-weight:600}
.capture .track{height:14px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.capture .track i{display:block;height:100%;background:linear-gradient(90deg,var(--pine-2),var(--moss));border-radius:99px}
.capture .track.local i{background:linear-gradient(90deg,var(--clay-soft),var(--clay))}
@media(max-width:640px){.capture{grid-template-columns:1fr}.capture .who{text-align:left}}
.photos3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.photos3 figure{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:0}
.photos3 img{width:100%;aspect-ratio:3/2.4;object-fit:cover}
.photos3 figcaption{padding:10px 14px;display:flex;justify-content:space-between;gap:8px}
.photos3 .c{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
@media(max-width:760px){.photos3{grid-template-columns:1fr}}
.keepergrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px}
.keeper{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.keeper img{width:100%;aspect-ratio:1/1;object-fit:cover}
.keeper .kc{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px}
.keeper b{font-size:12.5px;line-height:1.3}
.keeper small{font-size:12px;line-height:1.6;color:var(--ink-3)}
@media(max-width:900px){.keepergrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.keepergrid{grid-template-columns:1fr 1fr}}
.ladder{margin-top:30px;border-left:1px solid var(--line-strong);padding-left:0;display:flex;flex-direction:column;max-width:820px}
.ladder .rung{display:flex;gap:18px;align-items:baseline;padding:12px 0 12px 22px;position:relative}
.ladder .rung::before{content:'';position:absolute;left:-3.5px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--paper);border:2px solid var(--clay)}
.ladder .rung:last-child::before{background:var(--clay)}
.ladder b{font-size:14px;min-width:150px}
.ladder small{font-size:13px;color:var(--ink-3);line-height:1.6}
@media(max-width:560px){.ladder .rung{flex-direction:column;gap:4px;padding-top:8px;padding-bottom:8px}}
.tb-wrap{margin-top:32px;max-width:900px}
.tb-row{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tb-row:first-of-type{border-top:1px solid var(--line)}
.tb-who b{display:block;font-size:13.5px}
.tb-who small{font-size:12px;color:var(--ink-3);line-height:1.5;display:block;margin-top:3px}
.tb-bar{display:flex;height:30px;border-radius:3px;overflow:hidden;border:1px solid var(--line-strong)}
.tb-bar span{display:block;height:100%}
.tb-bar .rest{background:#e2dbc9}
.tb-bar .care{background:#b9a16f}
.tb-bar .work{background:#1d4029}
.tb-bar .work-m{background:#43634a}
.tb-bar .free{background:#d8c3a0}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
@media(max-width:640px){.tb-row{grid-template-columns:1fr;gap:6px}}
.ptable{width:100%;border-collapse:collapse;margin-top:30px;font-size:13px}
.ptable th{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-strong);font-weight:400}
.ptable td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.ptable td.actor{font-weight:600;color:var(--ink)}
.dots{white-space:nowrap;letter-spacing:3px;font-size:12px}
.dots .on{color:var(--pine)}
.dots .off{color:var(--paper-3)}
.ptable .mode{font-size:12px;color:var(--ink-3)}
@media(max-width:900px){
  .ptable thead{display:none}
  .ptable, .ptable tbody, .ptable tr, .ptable td{display:block;width:100%}
  .ptable tr{border-bottom:2px solid var(--line-strong);padding:6px 0}
  .ptable td{padding:7px 12px;border:0;display:flex;gap:10px}
  .ptable td::before{content:attr(data-l);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-ink);min-width:96px;flex:none;font-weight:600}
  .ptable td.actor{font-size:14px}
  .ptable td.actor::before{content:'';display:none}
}
.mx{display:grid;grid-template-columns:200px repeat(3,1fr);border-top:1px solid var(--line-strong);margin-top:30px}
.mx .cell{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:16px 18px;background:var(--white)}
.mx .rowlab{border-left:0;background:var(--paper-2);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);display:flex;align-items:center;font-weight:600}
.mx .colh{border-bottom:1px solid var(--line-strong);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600}
.mx .cell p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-2)}
.mx .cell b{display:block;font-size:12px;margin-bottom:6px;color:var(--ink)}
@media(max-width:860px){.mx{grid-template-columns:1fr}.mx .rowlab{min-height:auto;padding:14px 18px;border-bottom:1px solid var(--line)}}

.pagehead-dark::after{background:linear-gradient(180deg,rgba(6,13,9,.72) 0%,rgba(6,13,9,.5) 38%,rgba(6,13,9,.66) 78%,rgba(6,13,9,.94) 100%)}

/* ============ timeline (homepage, replaces the ad-hoc bottom nav treatment) ============ */
.timeline{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--line-strong)}
.tl-item{
  display:grid;grid-template-columns:112px 1fr;gap:clamp(18px,4vw,54px);
  padding:24px 0 24px 26px;position:relative;border-bottom:1px solid var(--line);
}
.tl-item::before{
  content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line-strong);
}
.tl-item:first-child::before{top:34px}
.tl-item:last-child::before{bottom:auto;height:34px}
.tl-dot{
  position:absolute;left:0;top:32px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--clay);z-index:1;
}
.tl-year-start .tl-dot{background:var(--clay);border-color:var(--clay)}
.tl-when{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.tl-when b{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
.tl-when span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3);font-weight:600}
.tl-body h3{font-size:clamp(17px,1.9vw,20px);line-height:1.35;margin:0 0 8px;letter-spacing:.01em}
.tl-body p{font-size:15px;line-height:1.78;color:var(--ink-2);margin:0;max-width:64ch}
.tl-now .tl-dot{background:var(--pine);border-color:var(--pine);box-shadow:0 0 0 4px rgba(20,52,35,.12)}
.tl-now .tl-when b{color:var(--pine)}
.tl-now .tl-body h3{font-style:italic}
@media(max-width:640px){
  .tl-item{grid-template-columns:1fr;gap:8px;padding-left:22px}
  .tl-when{flex-direction:row;align-items:baseline;gap:9px}
}
/* ---- hero background rotation (client-supplied frames) ---- */
.hero-media .hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;
}
.hero-media .hero-slide.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-media .hero-slide{transition:none}}

/* ============ fieldwork voices: single-column lede (horizontal, no sidebar figure) ============ */
.sh-lede{max-width:960px}
.sh-lede .sec-head h2{margin-bottom:clamp(18px,2.4vw,28px)}

/* ============ fieldwork voices: field map with portrait pins ============ */
.sh-map{position:relative;width:100%;margin-top:clamp(24px,3.4vw,44px);border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--paper-2)}
.sh-map>img{display:block;width:100%;height:auto}
.sh-map-pin{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:clamp(34px,4.2vw,54px);height:clamp(34px,4.2vw,54px);padding:0;
  border-radius:50%;border:2px solid var(--white);background:var(--paper);
  box-shadow:0 3px 10px rgba(12,26,18,.28);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
  z-index:2;
}
.sh-map-pin img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sh-map-pin:hover,.sh-map-pin:focus-visible,.sh-map-pin.is-open{
  transform:translate(-50%,-50%) scale(1.16);border-color:var(--clay);
  box-shadow:0 8px 22px rgba(12,26,18,.34);outline:none;
}
.sh-map-pin:focus-visible{box-shadow:0 0 0 3px var(--clay-ink),0 8px 22px rgba(12,26,18,.34)}
.sh-map-card{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
  width:min(290px,78vw);padding:14px 16px 15px;text-align:left;
  background:var(--white);border:1px solid var(--line-strong);border-radius:3px;
  box-shadow:0 14px 34px rgba(12,26,18,.22);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),visibility .18s;
  z-index:5;
}
.sh-map-pin.is-open .sh-map-card{opacity:1;visibility:visible}
.sh-map-pin:hover .sh-map-card{opacity:1;visibility:visible}
.sh-map-card::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--white);
}
.sh-map-card b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.sh-map-card i{display:block;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-ink);line-height:1.5;margin-bottom:9px}
.sh-map-card q{display:block;quotes:none;font-size:14.5px;line-height:1.66;color:var(--ink-2)}
.sh-map-legend{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
}
@media(max-width:640px){
  .sh-map-card{width:min(240px,72vw);padding:12px 13px 13px}
  .sh-map-card q{font-size:13.5px}
}

/* ============ about: responsive video placeholder (16:9) ============ */
.sh-video{margin:clamp(26px,3.6vw,48px) 0 0;max-width:820px}
.sh-video-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;
  background:var(--paper-2);
}
.sh-video-frame video{display:block;width:100%;height:100%;object-fit:cover;background:var(--paper-2)}
.sh-video-frame img{display:block;width:100%;height:100%;object-fit:cover}
.sh-video.is-missing .sh-video-frame video{display:none}
.sh-video-note{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 18px;background:rgba(20,48,31,.86);color:rgba(250,247,236,.96);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
}
.sh-video.is-missing .sh-video-note{background:rgba(20,48,31,.92)}
.sh-video .cap{margin-top:11px}
/* ============ SHANHE round-2 additions (.sh- prefixed, additive only) ============ */
/* Equal-height media panels for linked board cards (Atlas / Voices) */
.sh-board-media{aspect-ratio:16/10;width:100%;display:block}
.sh-board-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Readable micro-labels: raise inline overrides to a legible floor */
.sh-micro{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.75;text-transform:uppercase;color:var(--clay-ink)}
.sh-micro--soft{color:var(--ink-2)}
.sh-note{font-size:13px;font-weight:600;line-height:1.8;color:var(--ink-2)}
.sh-pair-tag{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;line-height:1.7;text-transform:uppercase}

/* ============ HOMEPAGE round-3 additions (additive only) ============ */
/* Hero location line: display face, larger, heavier, clearly legible over photo */
.hero-meta span{
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.13em;
  line-height:1.2;padding:9px 18px;border-width:1px;border-color:rgba(255,255,255,.42);
  background:rgba(10,24,17,.26);color:#fff;
  text-shadow:0 1px 10px rgba(6,16,10,.6);
}
@media(max-width:640px){.hero-meta span{font-size:13px;padding:8px 15px;letter-spacing:.11em}}
/* Hazard chips: keep four on one line on desktop, wrap on narrow screens */
.labels-inline{flex-wrap:nowrap;align-items:center}
.labels-inline .label{white-space:nowrap}
@media(max-width:760px){.labels-inline{flex-wrap:wrap}}
/* Long quotation: wider measure, calmer size */
.quote blockquote{font-size:clamp(19px,2.2vw,28px);line-height:1.6}
/* Classification belt under CONSERVATION IN THE CITY: legible at a glance */
.belt-line{
  font-size:14px;font-weight:700;letter-spacing:.12em;line-height:2.1;
  text-wrap:pretty;
}
@media(max-width:640px){.belt-line{font-size:13px;letter-spacing:.08em;line-height:1.9}}

/* ============ ABOUT: round-4 title case + real film (additive overrides only) ============ */
/* Titles render in the case written in the markup; the .label/.cap/.tag micro-labels stay uppercase. */
.sec-head h2,.sec-head h3,.sec .rows h3,h1{
  text-transform:none;letter-spacing:-.005em;
}
h1{letter-spacing:-.012em}
.sec-head h2{line-height:1.14}
/* Real film: the media box keeps the site radius, only the failure state is drawn now. */
.sh-video-frame video{object-fit:contain;background:#0d1a12}
.sh-video-note{
  position:static;padding:0;background:none;color:var(--ink-3);
  letter-spacing:.04em;text-transform:none;font-weight:600;
}
.sh-video.is-missing .sh-video-frame{aspect-ratio:auto}
.sh-video.is-missing .sh-video-frame video{display:none}
.sh-video.is-missing .sh-video-frame img{display:block;width:100%;height:auto}
.sh-video.is-missing .sh-video-note{
  position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:rgba(20,48,31,.88);color:rgba(250,247,236,.96);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
}
/* ============ VOICES: individual interview pages (.sh-voice-, additive only) ============ */
/* Title Case override: headings in this block keep authorial capitalisation,
   the site default is uppercase for eyebrows / captions / micro-labels. */
.sh-voice .sec-eyebrow,
.sh-voice .cap .c,
.sh-voice .cap .n,
.sh-voice .sh-map-card i,
.sh-voice .label,
.sh-voice .kicker,
.sh-voice .site-footer h5,
.sh-voice .site-footer .loc,
.sh-voice .site-footer .bottom p{text-transform:none;letter-spacing:.06em}
.sh-voice .pagehead h1{text-transform:none;letter-spacing:-.022em}

/* header: portrait sitting in the pagehead, offset from the title column */
.sh-voice-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
.sh-voice-portrait{
  width:clamp(132px,15vw,208px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.7);
  box-shadow:0 20px 48px rgba(4,12,7,.48),0 0 0 10px rgba(255,255,255,.09);
  background:rgba(255,255,255,.1);flex:none;
}
.sh-voice-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.sh-voice-head .lede{margin-top:22px}

/* body: reading column + sticky-ish identity rail */
.sh-voice-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:clamp(28px,4.4vw,72px);align-items:start}
.sh-voice-prose{max-width:64ch}
.sh-voice-prose p{line-height:1.95;font-size:16.5px;color:var(--ink)}
.sh-voice-prose p+p{margin-top:18px}
/* a paragraph that also carries a quoted line gets a quiet clay rule */
.sh-voice-prose p.has-quote{border-left:2px solid var(--clay-soft);padding-left:20px}

/* pull quote: the opening line of the interview, given the display size */
.sh-voice-pull{margin:0 0 clamp(30px,4vw,52px);max-width:60ch}
.sh-voice-pull blockquote{
  font-family:var(--display);font-weight:520;font-size:clamp(23px,3.05vw,40px);
  line-height:1.3;letter-spacing:-.012em;color:var(--pine);text-wrap:balance;
}
.sh-voice-pull .qmark{
  display:block;font-family:var(--display);font-size:54px;line-height:0;
  color:var(--clay-soft);margin-bottom:10px;
}
.sh-voice-pull figcaption{
  margin-top:20px;font-family:var(--mono);font-size:12.5px;font-weight:650;
  letter-spacing:.06em;color:var(--ink-2);text-transform:none;
}

/* quotations inside the running text */
.sh-voice-prose blockquote{
  margin:26px 0;padding:2px 0 2px 22px;border-left:2px solid var(--clay);
  font-family:var(--display);font-size:clamp(17px,1.85vw,21px);font-weight:500;
  line-height:1.62;color:var(--pine-2);text-wrap:pretty;
}
.sh-voice-prose blockquote+.sh-voice-prose blockquote{margin-top:20px}

/* identity rail */
.sh-voice-facts{
  position:sticky;top:calc(var(--header-h) + 26px);
  border:1px solid var(--line-strong);border-radius:3px;background:var(--white);
  padding:22px 22px 24px;
}
.sh-voice-facts h3{
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:none;color:var(--clay-ink);margin-bottom:14px;
}
.sh-voice-facts dl{display:grid;gap:13px}
.sh-voice-facts dt{
  font-family:var(--mono);font-size:12px;font-weight:650;letter-spacing:.05em;
  text-transform:none;color:var(--ink-3);margin-bottom:4px;
}
.sh-voice-facts dd{font-size:15px;line-height:1.62;color:var(--ink)}
.sh-voice-facts .sh-voice-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.72;color:var(--ink-3)}

/* secondary plate photo under the prose */
.sh-voice-plate{margin:clamp(30px,4vw,54px) 0 0}
.sh-voice-plate .frame{border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--paper-2)}
.sh-voice-plate img{width:100%;height:auto;display:block}

/* prev / next navigation, wraps at the ends of the archive */
.sh-voice-nav{
  margin-top:clamp(34px,4.6vw,64px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-strong);
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
}
.sh-voice-nav a{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--mono);font-size:12.5px;font-weight:650;letter-spacing:.06em;
  text-transform:none;color:var(--ink-2);transition:color .2s var(--ease);
}
.sh-voice-nav a:hover{color:var(--clay)}
.sh-voice-nav a b{font-family:var(--display);font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:0}
.sh-voice-nav a:hover b{color:var(--clay-ink)}
.sh-voice-nav .nx{align-items:flex-end;text-align:right}
.sh-voice-nav .back{
  flex-direction:row;align-items:center;gap:9px;padding:12px 18px;
  border:1px solid var(--line-strong);border-radius:99px;white-space:nowrap;
}
.sh-voice-nav .back:hover{border-color:var(--pine);background:var(--pine);color:#fff}

/* the map pin is now a link: keep the button affordance, add a cue */
.sh-map-pin{cursor:pointer}
.sh-map-card a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.sh-map-card a:hover,.sh-map-card a:focus-visible{color:var(--clay-ink);border-bottom-color:var(--clay-soft);outline:none}
.sh-map-card .sh-map-open{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:var(--mono);font-size:12px;font-weight:650;letter-spacing:.05em;
  color:var(--clay-ink);text-transform:none;
}
.sh-map-admin .sh-map-pin{outline-offset:3px}

/* photo wall: multi-column, gap-free, staggered blocks */
.sh-wall{
  columns:4;column-gap:0;margin:0;padding:0;
  -webkit-column-fill:balance;column-fill:balance;
}
.sh-wall figure{
  break-inside:avoid;margin:0;padding:0;display:block;
  position:relative;overflow:hidden;background:var(--paper-3);
}
.sh-wall figure img{width:100%;height:auto;display:block;vertical-align:bottom}
.sh-wall figure:nth-child(4n+2){padding-top:clamp(14px,2.6vw,38px)}
.sh-wall figure:nth-child(4n+3){padding-bottom:clamp(14px,2.6vw,38px)}
.sh-wall figure:nth-child(4n){padding-top:clamp(8px,1.6vw,22px)}
@media(max-width:1020px){
  .sh-wall{columns:3}
  .sh-wall figure:nth-child(4n+2),.sh-wall figure:nth-child(4n+3),.sh-wall figure:nth-child(4n){padding:0}
  .sh-wall figure:nth-child(3n+2){padding-top:clamp(12px,2.2vw,26px)}
}
@media(max-width:680px){
  .sh-wall{columns:2}
  .sh-wall figure:nth-child(3n+2){padding:0}
  .sh-wall figure:nth-child(2n){padding-top:clamp(10px,3vw,20px)}
}

@media(max-width:860px){
  .sh-voice-head{grid-template-columns:1fr;align-items:start}
  .sh-voice-portrait{width:clamp(110px,26vw,150px);order:-1}
  .sh-voice-body{grid-template-columns:1fr}
  .sh-voice-facts{position:static}
  .sh-voice-nav{grid-template-columns:1fr;gap:12px}
  .sh-voice-nav .nx{align-items:flex-start;text-align:left}
  .sh-voice-nav .back{justify-content:center;order:-1}
}
/* ============ SHANHE round-4 fixes (.sh- prefixed, additive only) ============ */
/* --- A1: pull-quote mark must not escape its block and collide with the
   heading above or the testimony below. The global .qmark uses
   font-size:56px with line-height:0, which makes the ink overflow upward. --- */
.sh-quote-fix{padding-top:clamp(14px,2vw,26px);overflow:hidden}
.sh-quote-fix .qmark{
  font-size:clamp(26px,3vw,34px);line-height:1;display:block;
  margin:0 0 2px;overflow:hidden;height:.78em;
}

/* --- A6: status note reads as normal body copy, not as an uppercase micro-label.
   Overrides the .sh-micro uppercase treatment it previously inherited. --- */
.sh-status{
  font-family:var(--sans);font-size:15.5px;font-weight:400;line-height:1.75;
  letter-spacing:normal;text-transform:none;color:var(--ink-2);max-width:64ch;
}

/* --- B3: headings keep Title Case. The uppercase styling for h1-h4 and the
   two heading-level eyebrow classes is neutralised here; small labels
   (.label, .cap, .tag, .driver, .kicker, .rung, .legend, footer) keep theirs. --- */
h1,h2,h3,h4{text-transform:none}
.sec-eyebrow,.arg-kicker{text-transform:none;letter-spacing:.06em}

/* --- B2: crossing mosaic for multi-column vertical photo walls.
   No forced height: every image keeps its own ratio, so no white letterboxing.
   column layout drops each figure into the shortest column, which produces the
   staggered crossing between columns without per-row alignment. --- */
.sh-mosaic{columns:3;column-gap:12px;margin:clamp(24px,3.4vw,44px) 0 0}
.sh-mosaic figure{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block;margin:0 0 12px;
}
.sh-mosaic figure:last-child{margin-bottom:0}
.sh-mosaic img{width:100%;height:auto;display:block}
@media(max-width:900px){.sh-mosaic{columns:2}}

/* ============================================================
   HOMEPAGE round-4 (additive only)
   1. Title Case headings, 2. hero eyebrow white,
   3. horizontal timeline (.tl2-), 4. pair comparison,
   5. documentary modal player
   ============================================================ */

/* ---- 1. Title Case: stop the display face from shouting ----
   Scoped to headings and heading-like labels only. .label, .cap,
   .tag, .eyebrow, nav and footer micro-type stay uppercase. */
.hero-title,
.sec-head h2,
.sec h1,.sec h2,.sec h3,.sec h4,
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4,
.sec-deep h1,.sec-deep h2,.sec-deep h3,.sec-deep h4,
.closing h2,
.rail h4,
.board h3,
.tl2 h3,
.doc-modal-title{text-transform:none}

/* .sec-head .sec-eyebrow is a section title line, not a micro-label:
   it is authored in sentence case, so it must not be forced to caps. */
.sec-head .sec-eyebrow{text-transform:none;letter-spacing:.06em}

/* The closing band styles its own label; keep it caps-free too. */
.closing>.wrap>.eyebrow{text-transform:none;letter-spacing:.14em}

/* ---- 2. hero eyebrow: white on the photograph ---- */
.hero-eyebrow{
  color:#fff;
  letter-spacing:.22em;
  text-shadow:0 1px 3px rgba(4,10,7,.75),0 2px 18px rgba(4,10,7,.6);
}
.hero-eyebrow::before{background:rgba(255,255,255,.75)}
@media(max-width:640px){.hero-eyebrow{letter-spacing:.16em}}

/* ---- 3. horizontal timeline (.tl2-) ----
   Old vertical .timeline / .tl-item / .tl-dot rules are left untouched. */
.tl2-hint{
  display:inline-block;margin-left:10px;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.14em;color:var(--clay-ink);white-space:nowrap;
}
.tl2-scroller{
  position:relative;overflow-x:auto;overflow-y:hidden;
  /* 不做 scroll-snap：吸附会把首个节点对齐到视口左缘（snap 按 scrollport 边缘
     计算、不吃 padding），结果首张卡片被切掉一半，且 scroll-padding 与"把 gutter
     挪到滚动容器"都救不回来（实测两种写法首卡 left 都是 0）。去掉吸附后首卡正确
     内缩到 .wrap 左缘。 */
  padding:0 0 26px;
  /* 滚动条默认隐藏，hover 到该区域才出现 */
  scrollbar-width:thin;scrollbar-color:transparent transparent;
  transition:scrollbar-color .25s var(--ease);
}
.tl2-scroller:hover{scrollbar-color:var(--paper-3) transparent}
.tl2-scroller::-webkit-scrollbar{height:7px}
.tl2-scroller::-webkit-scrollbar-track{background:transparent;border-radius:99px}
.tl2-scroller::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;transition:background .25s var(--ease)}
.tl2-scroller:hover::-webkit-scrollbar-thumb{background:var(--paper-3)}
.tl2-scroller:hover::-webkit-scrollbar-thumb:hover{background:var(--clay-soft)}
:root{--tl2-gutter:calc((100vw - min(1180px,92vw)) / 2)}
.tl2{
  /* single source of truth: the axis height drives dots, stems and cards.
     The axis is drawn on .tl2 and the dot is placed on .tl2-item, so the
     item carries the same padding-top, keeping the two coordinates equal. */
  --tl2-axis:64px;   /* distance from the top of .tl2 down to the axis line */
  --tl2-stem:38px;   /* visible stem length from the dot down to the card */
  position:relative;display:flex;align-items:stretch;gap:0;
  list-style:none;margin:0;padding:0;
  /* gutter so the first card starts at the .wrap edge and the last one can
     be scrolled until it sits at the same edge. The trailing gutter is a real
     flex child (::after) instead of padding-right on the last item: padding on
     the last item ate its own content box and squeezed the card to 46px wide,
     which wrapped the copy one character per line and stretched every card to
     948px tall. */
  padding-inline:var(--tl2-gutter);
}
.tl2::after{content:"";flex:0 0 auto;width:var(--tl2-gutter);align-self:stretch}
/* the axis itself: one continuous hairline through every node */
.tl2::before{
  content:"";position:absolute;left:0;right:0;top:var(--tl2-axis);height:1px;
  background:var(--line-strong);
}
.tl2-item{
  position:relative;flex:0 0 auto;width:clamp(238px,25vw,300px);
  padding:var(--tl2-axis) 22px 0 0;
  display:flex;flex-direction:column;
}
/* dot sits centred ON the axis line, then a stem runs down to the card */
.tl2-dot{
  position:absolute;top:calc(var(--tl2-axis) - 6px);left:0;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--clay);z-index:2;
}
.tl2-dot::after{
  content:"";position:absolute;left:4.5px;top:10px;
  width:1px;height:var(--tl2-stem);background:var(--line-strong);
}
.tl2-year-start .tl2-dot{background:var(--clay);border-color:var(--clay)}
.tl2-now .tl2-dot{background:var(--pine);border-color:var(--pine);box-shadow:0 0 0 4px rgba(20,52,35,.12)}
.tl2-card{
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:20px 22px 22px;display:flex;flex-direction:column;
  margin-top:calc(var(--tl2-stem) + 18px);
  flex:1 1 auto;                       /* all cards share the tallest height */
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.tl2-item:hover .tl2-card{border-color:var(--line-strong);box-shadow:0 10px 26px rgba(20,35,26,.08)}
.tl2-when{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.tl2-when b{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink)}
.tl2-when span{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-3)}
.tl2 h3{font-size:17px;line-height:1.32;margin:0 0 10px;letter-spacing:-.005em}
.tl2 p{font-size:14px;line-height:1.72;margin:0;color:var(--ink-2)}
.tl2-now .tl2-when b{color:var(--pine)}
.tl2-now h3{font-style:italic}
@media(max-width:880px){
  /* 左右内缩改成与 .wrap（92vw，两侧 4vw）对齐，而不是 6vw，
     避免小屏上时间线比标题多缩进 7px */
  .tl2{padding-inline:4vw}
  .tl2::after{width:4vw}
  .tl2-item{width:min(78vw,290px)}
}
@media(max-width:640px){
  .tl2{--tl2-axis:56px}
  .tl2-card{margin-top:calc(var(--tl2-stem) + 16px);padding:17px 18px 19px}
}

/* ---- 4. Lijiang / Beijing comparison pair (equal 16:10 frames) ---- */
.paircmp{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:clamp(26px,3.4vw,42px) 0;
}
/* the divider is a real grid child, so it always occupies the middle column
   and spans the full height of the row */
.paircmp-rule{background:var(--line-strong);width:1px}
.paircmp-side{margin:0;display:flex;flex-direction:column}
.paircmp-side:first-child{padding-right:clamp(20px,3.4vw,46px)}
.paircmp-side:last-child{padding-left:clamp(20px,3.4vw,46px)}
.paircmp-frame{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:3px;background:var(--paper-2);border:1px solid var(--line);
}
.paircmp-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  display:block;transition:transform .6s var(--ease);
}
.paircmp-side:hover .paircmp-frame img{transform:scale(1.03)}
.paircmp-cap{
  display:flex;flex-direction:column;gap:6px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
}
.paircmp-k{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink)}
.paircmp-n{font-family:var(--display);font-size:clamp(14px,1.5vw,16.5px);font-weight:500;line-height:1.5;color:var(--ink)}
.paircmp-cta{display:flex;justify-content:center;margin-top:clamp(24px,3vw,38px)}
@media(max-width:820px){
  .paircmp{grid-template-columns:1fr;row-gap:0;padding:22px 0}
  .paircmp-rule{display:none}
  .paircmp-side:first-child{padding-right:0;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .paircmp-side:last-child{padding-left:0;padding-top:22px}
}

/* ---- 5. documentary card + modal player ---- */
.doc-card{display:flex;flex-direction:column}
.doc-cover{
  position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;
  border-bottom:1px solid var(--line);background:var(--paper-2);
  overflow:hidden;cursor:pointer;text-align:left;
}
.doc-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.doc-card:hover .doc-cover img{transform:scale(1.035)}
.doc-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,14,.1) 0%,rgba(9,20,14,.18) 45%,rgba(9,20,14,.82) 100%);
}
.doc-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,24,17,.46);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:.28s var(--ease);
}
.doc-cover:hover .doc-play,.doc-cover:focus-visible .doc-play{
  background:rgba(255,253,246,.94);color:var(--pine);border-color:#fff;transform:translate(-50%,-50%) scale(1.07);
}
.doc-cover:focus-visible{outline:3px solid var(--clay);outline-offset:-3px}
.doc-cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 20px 18px;
  display:flex;flex-direction:column;gap:5px;
}
.doc-cap-k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(4,10,7,.6)}
.doc-cap-t{font-family:var(--display);font-size:clamp(17px,1.9vw,21px);font-weight:620;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(4,10,7,.7)}
.doc-watch{cursor:pointer}
.doc-card:hover .doc-watch{color:var(--clay);border-color:var(--clay)}
.doc-card:hover .doc-watch{color:var(--clay);border-color:var(--clay)}

/* modal */
.doc-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vh 5vw}
.doc-modal[hidden]{display:none}
.doc-modal-scrim{position:absolute;inset:0;background:rgba(6,13,9,.9);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.doc-modal-panel{
  position:relative;width:min(1040px,100%);max-height:90vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:5px;
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 30px 90px rgba(3,9,6,.6);
  animation:docIn .28s var(--ease);
}
@keyframes docIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.doc-modal-panel{animation:none}}
.doc-modal-close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--white);
  transition:.2s var(--ease);
}
.doc-modal-close:hover{background:var(--pine);border-color:var(--pine);color:#fff}
.doc-modal-close:focus-visible{outline:3px solid var(--clay);outline-offset:2px}
.doc-modal-kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);margin:0 0 10px;padding-right:52px}
.doc-modal-title{font-size:clamp(22px,2.6vw,32px);margin:0 0 18px;padding-right:52px}
.doc-modal-video{
  position:relative;background:#0c1a12;border:1px solid var(--line-strong);
  border-radius:3px;overflow:hidden;aspect-ratio:16/9;
}
.doc-modal-video video{display:block;width:100%;height:100%;object-fit:contain;background:#0c1a12}
.doc-modal.is-missing video{display:none}
/* 降级文案默认不显示。必须显式复位 [hidden]：本规则声明了 display:flex，
   会覆盖浏览器对 hidden 属性的内置 display:none，导致视频上线后文案仍浮在播放器之上 */
.doc-modal-note[hidden]{display:none}
.doc-modal-note{
  position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(20px,4vw,44px);color:rgba(250,247,236,.92);
  font-family:var(--display);font-size:clamp(15px,1.7vw,19px);line-height:1.65;
  background:linear-gradient(160deg,#16321f,#0b1d13);
}
.doc-modal-desc{margin:18px 0 0;font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:74ch}
body.doc-open{overflow:hidden}


/* =====================================================================
   SHANHE 2026-09-27 : conservation / beijing / art page rework
   Appended block only. No existing rule above this line is modified.
   Prefix: .sh-
   ===================================================================== */

/* ---- A1  通栏轮播与紧随其后的引用之间留出安全间距 ----------------------------------
   .marquee 是全宽通栏块，紧随其后的 .wrap 内容在窄屏或纵向文字回流时
   容易与轮播边缘贴死/重叠。这里只给「轮播 + 引用」组合加隔离带，
   不触碰全局 .marquee 定义。 */
.sh-garden-spacing{display:block;height:clamp(28px,4.4vw,68px)}
.sh-quote-gap{margin-top:clamp(26px,3.6vw,52px)}
.sh-garden-spacing+.wrap .quote,
.sh-garden-spacing~.wrap .quote{margin-top:0}
/* 引用块自身的呼吸区（覆盖 .quote 的默认 padding 不会超界，只加强留白） */
.sh-quote-gap.sh-quote-gap{padding-top:clamp(10px,2vw,26px)}

/* ---- A5/B3/C3  多列竖向照片墙（去白缝 / 列内紧挨 / 交叉错落） -------------------
   与全局 .wall / .spgrid 无关，独立实现。
   columns 给出等宽列；figure 断列避让；列内 0 间距、列间 12px。 */
.sh-mosaic{display:block;columns:3;column-gap:12px;margin-top:clamp(24px,3vw,40px)}
.sh-mosaic.sh-mosaic-4{columns:4}
.sh-mosaic.sh-mosaic-5{columns:5}
.sh-mosaic figure,
.sh-mosaic a{
  display:block;width:100%;margin:0 0 12px;padding:0;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  background:none;border:0;border-radius:0;overflow:visible;
}
.sh-mosaic figure:last-child,.sh-mosaic a:last-child{margin-bottom:0}
.sh-mosaic img{
  display:block;width:100%;height:auto;border-radius:2px;background:transparent;
  box-shadow:0 1px 0 rgba(30,43,36,.10);
}
.sh-mosaic a:hover img{box-shadow:0 6px 18px rgba(20,35,26,.14)}
@media(max-width:1020px){.sh-mosaic{columns:3}.sh-mosaic.sh-mosaic-4,.sh-mosaic.sh-mosaic-5{columns:3}}
@media(max-width:760px){.sh-mosaic,.sh-mosaic.sh-mosaic-4,.sh-mosaic.sh-mosaic-5{columns:2}}
@media(max-width:460px){.sh-mosaic,.sh-mosaic.sh-mosaic-4,.sh-mosaic.sh-mosaic-5{columns:1}}

/* A LIVING RECORD：保留橙色小序号，去掉黑色学名标题 */
.sh-mosaic .capn{display:block;padding:7px 2px 0;opacity:1}
.sh-mosaic .capn i{
  font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:650;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);display:block;
}
.sh-mosaic .capn b{display:none}

/* ---- A2  A LIVING RECORD 闪烁治理 ------------------------------------------------
   128 张图 + multi-column + data-reveal 位移动画 = 滚动时反复整列重排（"闪烁"）。
   方案：① 容器改用 contain:content 把重排限制在容器内部，不再推动文档流；
        ② 关闭该容器的 data-reveal 位移/淡入（元素自身不再 transform）；
        ③ content-visibility:auto + contain-intrinsic-size 让屏外列跳过绘制。 */
.sh-spgrid-stable{contain:content;display:block;columns:5 150px;column-gap:12px}
.sh-spgrid-stable a{
  display:inline-block;width:100%;margin:0 0 12px;background:var(--white);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;padding:7px;
  content-visibility:auto;contain-intrinsic-size:auto 300px;
  transition:border-color .2s,box-shadow .2s;
}
.sh-spgrid-stable a:hover{border-color:var(--line-strong);box-shadow:0 8px 20px rgba(20,35,26,.08)}
.sh-spgrid-stable img{width:100%;height:auto;display:block}
.sh-spgrid-stable .capn{display:flex;flex-direction:column;gap:3px;padding:9px 5px 5px;opacity:1}
.sh-spgrid-stable .capn i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-ink);font-weight:600}
.sh-spgrid-stable .capn b{display:none}
.sh-no-reveal,.sh-no-reveal.in{
  opacity:1!important;transform:none!important;transition:none!important;
}
@media(max-width:1020px){.sh-spgrid-stable{columns:4 150px}}
@media(max-width:760px){.sh-spgrid-stable{columns:3 130px}}
@media(max-width:480px){.sh-spgrid-stable{columns:2 120px}}

/* ---- A4/B2/C2  Title Case：取消标题的强制大写 ------------------------------------
   只作用于本页正文标题层级，不动 .label / .cap / .tag / .kicker / .eyebrow /
   .sec-eyebrow 等标签类（它们按设计保持大写）。 */
.sh-titlecase h1,
.sh-titlecase h2,
.sh-titlecase h3,
.sh-titlecase h4,
.sh-titlecase .pagehead h1{
  text-transform:none;
}
/* 协议步骤标题（details.step summary h3）在新结构里已直接写 Title Case，
   这里仅保证不被任何继承的大写规则覆盖 */
.sh-titlecase details.step h3{text-transform:none}
/* 小标签显式保持大写，避免被上面的规则连带影响 */
.sh-titlecase .label,
.sh-titlecase .cap,
.sh-titlecase .tag,
.sh-titlecase .kicker,
.sh-titlecase .eyebrow,
.sh-titlecase .sec-eyebrow,
.sh-titlecase .stamp,
.sh-titlecase .rno,
.sh-titlecase .sno,
.sh-titlecase .small-caps{
  text-transform:uppercase;
}

/* map card: the name is a link now, so it carries the <b> type treatment */
.sh-map-card .sh-map-name{
  display:block;font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--ink);margin-bottom:4px;
}
/* the revealed card must accept pointer events, otherwise the map artwork
   underneath swallows clicks meant for the name link inside the card */
.sh-map-pin:hover .sh-map-card,
.sh-map-pin.is-open .sh-map-card,
.sh-map-pin:focus-within .sh-map-card{pointer-events:auto}
/* keep the pin visually above the artwork while its card is being read */
.sh-map-pin:hover,.sh-map-pin:focus-within,.sh-map-pin.is-open{z-index:6}
.sh-map-pin{z-index:2}
.sh-map-pin:hover,.sh-map-pin:focus-within,.sh-map-pin.is-open{z-index:6}