/* =========================================================
   重见辛追 · Rediscover Xin Zhui
   Ardot「数字展览-重见辛追」 → static web
   Palette: E8E0D0 / 171717 / D6B989 / E3301E
            A55349 / 7A1A1C / A63D32 / C16034
   ========================================================= */

:root{
  --cream:   #E8E0D0;
  --ink:     #171717;
  --ink-2:   #222222;
  --tan:     #D6B989;
  --red:     #E3301E;
  --terra:   #A55349;
  --deep:    #7A1A1C;
  --collage: #A63D32;
  --brown:   #C16034;

  --serif-cn: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --serif-en: "Inria Serif", "Playfair Display", Georgia, serif;
  --mono: Consolas, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  --nav-h: 54px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--serif-cn); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--ink-2); color:#e8e5df;
  border-bottom:1px solid #000;
}
.nav .wrap{
  max-width:1166px; margin:0 auto; padding:0 24px;
  height:var(--nav-h); display:flex; align-items:center; gap:32px;
}
.brand{ line-height:1.15; }
.brand b{ font-size:15px; font-weight:700; letter-spacing:.02em; display:block; }
.brand span{ font-family:var(--mono); font-size:9px; letter-spacing:.22em; color:#9a968c; text-transform:uppercase; }
.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  font-size:13px; letter-spacing:.04em; color:#cfcbc3; position:relative; padding:4px 0;
}
.nav-links a .en{ font-family:var(--mono); font-size:12px; margin-left:2px; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--red); transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
.nav-links a.is-active{ color:#fff; }
.nav-links a.is-active::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid #4a4a4a; padding:5px 12px; color:#cfcbc3;
}
.nav-search svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; }
.nav-search input{
  background:none; border:0; outline:0; color:#eee;
  font-family:var(--mono); font-size:11px; width:78px;
}
.nav-search input::placeholder{ color:#6d6a64; }
.nav-heart{
  width:30px; height:30px; border:1px solid #4a4a4a; background:none;
  display:grid; place-items:center; color:#cfcbc3;
}
.nav-heart svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
.nav-heart:hover{ color:var(--red); border-color:var(--red); }

/* ================= HERO ================= */
.hero{
  background:var(--terra); color:var(--ink);
  overflow:hidden; position:relative;
}
.hero .wrap{
  max-width:1166px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 490px; gap:24px;
  align-items:center; min-height:640px;
}
.hero__left{ padding:60px 0 60px 40px; display:flex; gap:34px; }
.hero__titles{ display:flex; flex-direction:column; gap:18px; }
.hero__cn{
  font-family:var(--serif-cn); font-weight:900;
  font-size:clamp(64px,9vw,118px); line-height:1.04; letter-spacing:.04em;
  color:var(--ink);
}
.hero__en{
  font-family:var(--serif-en); font-style:italic; font-weight:500;
  font-size:clamp(20px,2.6vw,30px); color:var(--deep); letter-spacing:.01em;
}
.hero__vertical{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:14px; font-weight:600; letter-spacing:.42em;
  color:var(--ink); padding-top:8px; line-height:2.1;
  max-height:430px;
}
.hero__art{ position:relative; }
.hero__art img{ width:100%; height:auto; }
.hero__art::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(23,23,23,.25);
  pointer-events:none;
}

/* ================= TAB BAR ================= */
.tabbar{ background:var(--ink); border-top:1px solid #000; }
.tabbar .grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.tabbar a{
  display:grid; place-items:center; text-align:center;
  min-height:96px; padding:18px 26px;
  font-family:var(--mono); font-weight:700; letter-spacing:.02em;
  color:var(--red); background:var(--ink); line-height:1.5;
  border-right:1px solid #000; transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.tabbar a:last-child{ border-right:0; }
.tabbar a:hover, .tabbar a.is-active{ background:var(--tan); }

/* ================= SECTION SHELL ================= */
.sec{ position:relative; overflow:hidden; }
.wrap{ max-width:1166px; margin:0 auto; padding:0 24px; }

/* ---- 1972 discovery ---- */
.discovery{ background:var(--ink); }
.discovery__grid{ display:grid; grid-template-columns:529px 1fr; min-height:717px; }
.discovery__left{ display:flex; flex-direction:column; }
.disc-red{
  background:var(--terra); flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:70px 40px;
}
.disc-red .ghost{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif-en); font-weight:700;
  font-size:clamp(160px,22vw,300px); line-height:1;
  color:rgba(23,23,23,.07); user-select:none; pointer-events:none;
}
.disc-content{ position:relative; text-align:center; max-width:340px; }
.disc-content h2{ font-size:26px; font-weight:700; letter-spacing:.08em; color:var(--ink); }
.disc-content .loc{ font-size:15px; color:#3d2320; margin-top:8px; letter-spacing:.14em; }
.disc-content .en{
  font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  color:var(--ink); margin-top:26px; font-weight:700;
}
.disc-content p{
  margin-top:24px; font-size:19px; line-height:2.1; font-weight:700; color:var(--ink);
}
.disc-dark{
  background:var(--ink-2); padding:44px 48px 52px;
}
.disc-dark h3{ font-size:30px; font-weight:600; color:#fff; }
.disc-dark .sub{ font-size:16px; color:#b9b4ab; margin-top:12px; }
.disc-dark .arrow{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  color:#fff; font-family:var(--mono); font-size:13px; letter-spacing:.12em;
}
.disc-dark .arrow svg{ width:30px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .3s; }
.disc-dark .arrow:hover svg{ transform:translateX(8px); }
.disc-paint{ position:relative; overflow:hidden; background:#2a2018; }
/* 帛画为竖幅（1274×1668），contain 完整显示，不裁切；
   深色底衬出挂轴感，画心在格子内居中 */
.disc-paint img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
}

/* ---- ORIGIN / archive carousel ---- */
.origin{ background:#000; }
.origin__grid{ display:grid; grid-template-columns:1fr 541px; min-height:719px; }
.origin__text{ padding:78px 64px 60px 70px; display:flex; flex-direction:column; }
.origin__text h2{ font-size:32px; font-weight:700; color:#fff; letter-spacing:.06em; }
.origin__text .kicker{
  font-family:var(--mono); font-size:15px; letter-spacing:.34em;
  color:#cfcbc3; margin-top:12px; text-transform:uppercase;
}
.origin__text p.desc{
  margin-top:auto; margin-bottom:auto; padding:44px 0;
  font-size:19px; line-height:2.35; font-weight:600; color:#e8e5df;
}
.origin__pager{
  display:flex; align-items:center; gap:6px; justify-content:flex-end;
  color:#fff; font-size:22px; font-weight:700; font-family:var(--serif-cn);
}
.origin__pager button{
  width:40px; height:40px; background:none; border:0; color:#fff;
  display:grid; place-items:center; transition:transform .25s, color .25s;
}
.origin__pager button svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.origin__pager button:hover{ color:var(--red); transform:scale(1.15); }
.origin__pager .frac{ min-width:64px; text-align:center; letter-spacing:.1em; }

.origin__stage{
  position:relative; background:var(--terra); overflow:hidden;
}
.origin__stage .marble{
  position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px);
  object-fit:cover; opacity:.22; transform:rotate(3deg);
  filter:grayscale(.35) contrast(.9);
}
.years{
  position:absolute; top:76px; right:26px; z-index:5;
  display:flex; flex-direction:column; gap:34px;
  font-family:var(--mono); font-weight:700; font-size:21px; color:#171717;
}
.years .yr{ display:flex; align-items:center; gap:10px; }
.years .dot{
  width:12px; height:12px; border-radius:50%;
  border:2px solid #171717; background:transparent; flex:none;
}
.years .yr.is-active .dot{ background:#171717; }

.archive-card{
  position:absolute; left:44%; top:120px; transform:translateX(-50%);
  width:228px; z-index:4; text-align:center;
}
.archive-card .nail{
  width:16px; height:16px; border-radius:50%; background:#0d0d0d;
  margin:0 auto; box-shadow:0 2px 5px rgba(0,0,0,.45);
}
.archive-card .strings{
  display:block; width:128px; height:56px; margin:-2px auto 0;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.archive-card .card{
  background:#0d0d0d; width:228px; margin:-2px auto 0;
  padding:30px 18px 24px; box-shadow:10px 10px 22px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.archive-card .cn{ color:var(--red); font-size:17px; letter-spacing:.28em; font-weight:600; }
.archive-card .fig{ height:118px; display:grid; place-items:center; }
.archive-card .fig img{ max-height:118px; width:auto; }
.archive-card .en{
  color:var(--red); font-family:var(--serif-en); font-style:italic;
  font-size:17px; letter-spacing:.04em;
}
.archive-card .btn{
  display:inline-block; margin-top:8px; border:1px solid var(--red); color:var(--red);
  background:none; font-size:13px; letter-spacing:.24em;
  padding:7px 16px 7px 20px; transition:all .25s;
}
.archive-card .btn:hover{ background:var(--red); color:#fff; }
.origin__stage .arch-label{
  position:absolute; left:0; right:120px; bottom:56px; z-index:5;
  text-align:center; font-family:var(--mono); font-weight:700;
  font-size:19px; letter-spacing:.2em; color:#171717;
}

/* slides */
.slide{ display:none; }
.slide.is-active{ display:block; animation:fadeUp .55s cubic-bezier(.22,.61,.36,1); }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.slide.is-active .archive-card{ animation:swing .7s cubic-bezier(.34,1.4,.5,1) both; transform-origin:top center; }
@keyframes swing{
  from{ transform:translateX(-50%) rotate(-3deg); }
  to{ transform:translateX(-50%) rotate(0); }
}

/* ================= OBJECTS ================= */
.objects{ background:#000; padding-bottom:0; }
.objects .sec-title{
  font-family:var(--mono); font-weight:700; letter-spacing:.02em;
  font-size:clamp(22px,3.4vw,34px); color:#fff;
  padding:56px 24px 30px; max-width:1166px; margin:0 auto;
}
.objects__collage{ position:relative; max-width:1166px; margin:0 auto; }
.objects__collage img{ display:block; width:100%; height:auto; }
.objects__collage figcaption{
  position:absolute; left:24px; bottom:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:rgba(232,224,208,.75); text-transform:uppercase;
}

/* ================= FOOTER ================= */
.faq{ background:#000; padding-top:26px; }
.faq__grid{
  max-width:1166px; margin:0 auto; padding:56px 24px 64px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px;
}
.faq h2{ font-size:30px; color:#fff; font-weight:700; }
.faq .kicker{ font-family:var(--mono); font-size:14px; letter-spacing:.14em; color:#8d897f; margin-top:10px; }
.faq__addr{ margin-top:56px; }
.faq__addr h3{ font-size:22px; color:#fff; }
.faq__addr p{ margin-top:18px; font-size:17px; color:#d8d4cb; }
.faq__nav{
  margin-top:34px; display:inline-flex; align-items:center; gap:12px;
  color:#fff; font-size:18px; font-weight:600;
}
.faq__nav svg{ width:30px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .3s; }
.faq__nav:hover svg{ transform:translateX(8px); }
.faq__links{ display:flex; flex-direction:column; gap:30px; padding-top:14px; }
.faq__links a{ font-size:19px; color:#e8e5df; width:fit-content; position:relative; }
.faq__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--red); transition:width .3s;
}
.faq__links a:hover{ color:var(--red); }
.faq__links a:hover::after{ width:100%; }
.footer-bar{ border-top:1px solid #2a2a2a; }
.footer-bar .inner{
  max-width:1166px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:#7a766e; letter-spacing:.04em;
}
.footer-bar .links{ display:flex; gap:26px; }
.footer-bar .links a{ color:#8d897f; }
.footer-bar .links a:hover{ color:#fff; }

/* ================= reveal ================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* back to top */
.totop{
  position:fixed; right:26px; bottom:26px; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--terra); background:var(--ink);
  color:var(--cream); display:grid; place-items:center; z-index:90;
  opacity:0; pointer-events:none; transition:all .3s;
}
.totop.show{ opacity:1; pointer-events:auto; }
.totop:hover{ background:var(--terra); }
.totop svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

/* =========================================================
   ARCHIVE DETAIL PAGES (LIFE ARCHIVE 01-04)
   ========================================================= */

/* top crumb strip */
.crumb{
  background:#000; border-bottom:1px solid #1e1e1e;
}
.crumb .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:#8d897f;
}
.crumb a{ color:#cfcbc3; transition:color .25s; }
.crumb a:hover{ color:var(--red); }
.crumb .frac b{ color:var(--tan); }

/* ---- detail hero: black text | terra collage ---- */
.dhero{ display:grid; grid-template-columns:1fr 541px; min-height:640px; background:#000; }
.dhero__left{
  padding:64px 64px 56px 70px; position:relative; display:flex; flex-direction:column;
}
.dhero__left .kick{
  font-family:var(--mono); font-weight:700; font-size:14px;
  letter-spacing:.3em; color:var(--tan); text-transform:uppercase;
}
.dhero__left h1{
  margin-top:22px; font-size:clamp(44px,6vw,72px); font-weight:900;
  letter-spacing:.08em; color:#fff; line-height:1.15;
}
.dhero__left .en{
  margin-top:14px; font-family:var(--serif-en); font-style:italic; font-weight:500;
  font-size:clamp(20px,2.4vw,28px); color:var(--tan);
}
.dhero__left .lead{
  margin-top:auto; padding-top:40px; max-width:560px;
  font-size:18px; line-height:2.2; font-weight:600; color:#e8e5df;
}
.dhero__left .ghostnum{
  position:absolute; right:40px; top:34px;
  font-family:var(--serif-en); font-weight:700;
  font-size:150px; line-height:1; color:rgba(232,224,208,.06);
  user-select:none; pointer-events:none;
}
.dhero__right{
  position:relative; background:var(--terra); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.dhero__right .marble{
  position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px);
  object-fit:cover; opacity:.2; transform:rotate(3deg);
  filter:grayscale(.35) contrast(.9);
}
.dhero__right .art{ position:relative; z-index:2; padding:40px; max-width:78%; }
.dhero__right .art img{ filter:drop-shadow(14px 14px 26px rgba(0,0,0,.4)); max-height:470px; width:auto; max-width:100%; }
.dhero__right .label{
  position:absolute; left:0; right:0; bottom:44px; z-index:3;
  text-align:center; font-family:var(--mono); font-weight:700;
  font-size:18px; letter-spacing:.22em; color:#171717;
}
.dhero__right .cap{
  position:absolute; left:0; right:0; top:40px; z-index:3;
  text-align:center; font-family:var(--mono); font-weight:700;
  font-size:15px; line-height:1.7; color:#171717;
}

/* ---- body sections ---- */
.dbody{ background:#000; padding:96px 0 20px; }
.dsec{
  max-width:1000px; margin:0 auto 110px; padding:0 24px;
  display:grid; grid-template-columns:280px 1fr; gap:56px;
}
.dsec__head .no{
  font-family:var(--serif-en); font-style:italic; font-weight:700;
  font-size:18px; color:var(--red);
}
.dsec__head h2{
  margin-top:14px; font-size:26px; font-weight:700; color:#fff; letter-spacing:.1em;
}
.dsec__head .sub{
  margin-top:10px; font-size:17px; font-weight:600; color:var(--tan); letter-spacing:.14em;
}
.dsec__head .en{
  margin-top:16px; font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; color:#8d897f; text-transform:uppercase;
}
.dsec__body p{
  font-size:16.5px; line-height:2.15; color:#d8d4cb; font-weight:500;
}
.dsec__body p + p{ margin-top:22px; }
.dsec__body em{
  font-style:normal; color:var(--tan); font-weight:700;
}
.dsec__body .mark{
  border-left:2px solid var(--deep); padding-left:16px; color:#a8a49b;
}

/* figure rows inside sections */
.dfig{ margin-top:36px; display:flex; gap:26px; align-items:flex-start; }
.dfig img{ max-height:200px; width:auto; }
.dfig figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:#8d897f; text-transform:uppercase; line-height:1.9;
}

/* ---- full-bleed visual band (beliefs style) ---- */
.dband{ position:relative; background:#000; }
.dband .img{
  display:block; width:min(720px,86%); margin:0 auto; position:relative; z-index:1;
}
.dband .strip{
  background:var(--tan); color:var(--ink);
  font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.06em;
  padding:22px 56px; margin-top:-40px; position:relative; z-index:2;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.dband .strip span:last-child{ opacity:.65; }

/* ---- key fact band ---- */
.keyfact{
  background:var(--deep); padding:64px 24px; text-align:center;
}
.keyfact .num{
  font-family:var(--serif-en); font-weight:700;
  font-size:clamp(56px,8vw,96px); line-height:1; color:var(--tan);
}
.keyfact .lab{
  margin-top:14px; font-size:18px; font-weight:600; color:#f2e7d5; letter-spacing:.2em;
}
.keyfact .note{
  margin-top:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; color:rgba(242,231,213,.55); text-transform:uppercase;
}

/* ---- chain (identity: social position) ---- */
.chain{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#2a2a2a;
}
.chain li{
  background:#111; padding:22px 18px; text-align:center;
}
.chain li .t{ font-size:17px; font-weight:700; color:#fff; letter-spacing:.1em; }
.chain li .e{
  margin-top:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; color:#8d897f; text-transform:uppercase;
}
.chain li.is-her{ background:var(--terra); }
.chain li.is-her .t{ color:var(--ink); }
.chain li.is-her .e{ color:#3d2320; }

/* ---- pager between archives ---- */
.dpager{
  background:#000; border-top:1px solid #1e1e1e;
}
.dpager .wrap{
  display:flex; align-items:stretch; justify-content:space-between;
}
.dpager a{
  flex:1; padding:36px 24px; display:block;
  transition:background .3s;
}
.dpager a:hover{ background:#111; }
.dpager .dir{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:#8d897f;
}
.dpager .name{
  margin-top:10px; font-size:20px; font-weight:700; color:#fff; letter-spacing:.12em;
}
.dpager .name i{
  font-style:normal; color:var(--red); margin:0 12px;
  font-family:var(--serif-en); font-weight:700;
}
.dpager a.next{ text-align:right; }
.dpager .back{
  flex:0 0 auto; align-self:center; padding:36px 34px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:#cfcbc3;
}
.dpager .back:hover{ color:var(--red); background:none; }

@media (max-width:980px){
  .dhero{ grid-template-columns:1fr; }
  .dhero__right{ min-height:460px; }
  .dsec{ grid-template-columns:1fr; gap:24px; margin-bottom:80px; }
  .chain{ grid-template-columns:repeat(2,1fr); }
  .dpager .back{ display:none; }
}

/* ================= responsive ================= */
@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; padding-bottom:50px; }
  .hero__left{ padding:44px 8px 10px; }
  .hero__art{ max-width:490px; margin:0 auto; }
  .origin__grid, .discovery__grid{ grid-template-columns:1fr; }
  .disc-paint{ min-height:420px; }
  .disc-paint img{ position:static; width:100%; height:auto; }
  .origin__stage{ min-height:660px; }
  .faq__grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .nav-links{ display:none; }
  .tabbar .grid{ grid-template-columns:1fr 1fr; }
  .tabbar a{ border-bottom:1px solid #000; min-height:76px; font-size:13px; }
  .origin__text{ padding:48px 26px 40px; }
  .years{ right:14px; gap:22px; font-size:16px; }
  .archive-card{ left:50%; top:96px; }
  .hero__cn{ font-size:56px; }
  .hero__vertical{ display:none; }
  .disc-red{ padding:56px 20px; }
}