:root { --ink:#1f1710; --gold:#936b2d; --paper:#f8f0e4; }
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); background:#f8f0e4; font-family:"Noto Serif SC", "Songti SC", serif; min-width:1050px; }
body.has-launch-screen { overflow:hidden; }
.skip-launch .launch-screen { display:none; }
.skip-launch .resource-loader { display:none; }
.resource-loader { position:fixed; z-index:6000; inset:0; display:grid; place-content:center; justify-items:center; color:#d9c29b; background:#17100a radial-gradient(circle at 50% 44%,rgba(116,75,35,.24),transparent 35%); opacity:1; visibility:visible; transition:opacity .75s ease,visibility .75s; }
.resource-loader::before { content:""; position:absolute; inset:24px; border:1px solid rgba(193,148,85,.18); pointer-events:none; }
.resource-loader::after { content:""; position:absolute; left:50%; top:50%; width:min(58vw,760px); height:1px; background:linear-gradient(90deg,transparent,rgba(190,143,76,.22),transparent); transform:translate(-50%,72px); }
.resource-loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-emblem { position:relative; display:grid; place-items:center; width:92px; height:92px; margin-bottom:23px; border:1px solid rgba(191,143,77,.5); transform:rotate(45deg); }
.loader-emblem::before,.loader-emblem::after { content:""; position:absolute; inset:7px; border:1px solid rgba(191,143,77,.2); }
.loader-emblem::after { inset:14px; }
.loader-emblem i { position:absolute; z-index:1; inset:-7px; border:0; background:none; transform-origin:50% 50%; animation:loader-turn 4s linear infinite; }
.loader-emblem i::before { content:""; position:absolute; left:50%; top:-51px; width:11px; height:116px; background:url("images/loading-brush.svg") center/contain no-repeat; filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25)); transform:translateX(-50%) rotate(90deg); }
.loader-emblem i::after { content:none; }
.loader-emblem span { position:relative; z-index:2; color:#d6ae70; font-family:"Ma Shan Zheng",cursive; font-size:25px; line-height:.9; text-align:center; transform:rotate(-45deg); }
.resource-loader>p { margin:0 0 9px; color:#94734d; font-size:11px; letter-spacing:.45em; }
.resource-loader>strong { font-size:15px; font-weight:500; letter-spacing:.38em; }
.loader-track { position:relative; width:min(260px,48vw); height:1px; margin-top:23px; overflow:hidden; background:rgba(216,183,132,.18); }
.loader-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,#765027,#e1b875); box-shadow:0 0 8px rgba(217,171,103,.72); transition:width .12s linear; }
.resource-loader>small { margin-top:10px; color:#8e7250; font:11px/1 Arial,sans-serif; letter-spacing:.12em; }
.resource-loader.is-complete .loader-emblem i { animation-duration:2s; }
.resource-loader.is-awaiting-entry { cursor:pointer; }
.resource-loader.is-awaiting-entry>strong { color:#e7c58e; text-shadow:0 0 12px rgba(220,173,101,.42); animation:loader-entry-pulse 1.35s ease-in-out infinite; }
.resource-loader.is-awaiting-entry .loader-emblem { border-color:rgba(220,173,101,.8); }
@keyframes loader-turn { to{transform:rotate(-360deg)} }
@keyframes loader-entry-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
.launch-screen { position:fixed; z-index:5000; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:9.5vh; overflow:hidden; background:#120c07; opacity:1; visibility:visible; transition:opacity 1.05s ease,visibility 1.05s; }
.launch-background { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:1; transform:translate3d(0,0,0); backface-visibility:hidden; }
.launch-screen.is-opening { opacity:0; visibility:hidden; pointer-events:none; }
.launch-screen.is-bursting .launch-background { animation:launch-background-out 1.05s cubic-bezier(.18,.72,.2,1) forwards; }
.launch-button { position:relative; z-index:2; min-width:180px; padding:8px 18px; color:#d9ad65; background:transparent; border:0; font:700 16px/1.4 "Noto Serif SC",serif; letter-spacing:.32em; text-shadow:0 0 10px rgba(238,181,87,.65); cursor:pointer; animation:launch-pulse 1.65s ease-in-out infinite; }
.launch-button::before { content:""; position:absolute; left:18%; right:18%; bottom:4px; height:1px; background:linear-gradient(90deg,transparent,#d7a85c,transparent); box-shadow:0 0 9px #d7a85c; }
.launch-button span { display:inline-block; color:#bb8239; font-size:10px; vertical-align:middle; }
.launch-button:hover { color:#ffe0a1; animation-duration:.75s; }
.is-bursting .launch-button { pointer-events:none; animation:launch-button-out .65s ease forwards; }
.is-playing-later .launch-button { pointer-events:none; animation:launch-button-out .45s ease forwards; }
.launch-screen.is-auto-sequence .launch-button { display:none; }
@keyframes launch-pulse { 0%,100%{opacity:.38;filter:brightness(.8)} 50%{opacity:1;filter:brightness(1.35)} }
@keyframes launch-button-out { to{opacity:0;filter:blur(5px);transform:scale(1.12)} }
@keyframes launch-background-out { 0%{opacity:1;transform:translate3d(0,0,0) scale(1)} 38%{opacity:.96;transform:translate3d(0,0,0) scale(1.045)} 72%{opacity:.72;transform:translate3d(0,0,0) scale(1.14)} 100%{opacity:.1;transform:translate3d(0,0,0) scale(1.24)} }
.nav { height:100px; display:flex; align-items:center; padding:0 4.1%; background:rgba(255,251,244,.94); border-bottom:1px solid #e7ddcf; position:sticky; top:0; z-index:1100; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.brand { color:#22170e; font-family:"Ma Shan Zheng", cursive; font-size:48px; text-decoration:none; letter-spacing:5px; white-space:nowrap; }
.brand-image { display:block; width:180px; height:60px; object-fit:contain; }
nav { align-self:stretch; margin-left:auto; width:min(65vw,1110px); display:flex; justify-content:space-between; position:relative; }
nav a { position:relative; padding:35px 20px; color:#1d1711; text-decoration:none; font-size:16px; font-weight:700; white-space:nowrap; transition:color .3s ease; }
nav a:not(:last-of-type) { letter-spacing:5px; padding-right:15px; }
nav a:not(:last-of-type)::after { content:""; position:absolute; right:-25px; top:37px; height:26px; border-right:1px solid #efe8df; }
nav .active { color:#b17b32; }
nav a:hover { color:#b17b32; }
nav a[href="#"]:not(.active) { cursor:default; }
.nav-indicator { position:absolute; bottom:0; height:5px; border-radius:50% 50% 0 0; background:#9d6c27; pointer-events:none; transition:none; }
.nav.nav-ready .nav-indicator { transition:transform .38s cubic-bezier(.22,.8,.28,1), width .38s cubic-bezier(.22,.8,.28,1); }
.hero { height:575px; position:relative; overflow:hidden; background-color:#f8f0e4; background-image:linear-gradient(90deg,rgba(251,244,234,.78),rgba(250,246,239,.6),rgba(249,242,231,.78)), url("images/landscape.png"); background-position:center, left center; background-size:100% 100%, 100% auto; background-repeat:no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(255,251,244,.94) 0%,rgba(255,250,241,.54) 45%,transparent 75%); }
.mist { position:absolute; left:10%; right:10%; bottom:55px; height:120px; background:linear-gradient(180deg,transparent,rgba(255,251,244,.88)); filter:blur(18px); }
.hero-copy { position:relative; z-index:10; text-align:center; padding-top:36px; pointer-events:none; }
h1 { margin:0; font-size:52px; letter-spacing:6px; line-height:1.5; font-weight:900; color:#563106; text-shadow:0 2px 0 #d2b98e; }
.hero-copy p { display:inline-flex; align-items:center; gap:24px; margin:10px 0; padding:0 28px; background:transparent; font-size:23px; font-weight:700; letter-spacing:1px; }
.subtitle-line { display:block; width:90px; height:auto; flex:0 0 auto; }
.subtitle-line-right { transform:scaleX(-1); }
.model-stage { position:absolute; z-index:2; left:0; right:0; top:178px; height:319px; overflow:hidden; }
.model-stage model-viewer { display:block; width:100%; height:100%; --poster-color:transparent; background:transparent; opacity:1; filter:drop-shadow(7px 11px 8px rgba(79,48,20,.14)); }
.model-stage model-viewer.is-ready { opacity:1; }
.scroll-hotspot { position:absolute; z-index:20; left:50%; top:50%; display:block; width:54px; height:54px; padding:0; color:#fff; background:transparent; border:0; border-radius:50%; opacity:1; cursor:pointer; pointer-events:auto; transform:translate(-50%,-50%); }
.scroll-hotspot::before { content:""; position:absolute; left:50%; top:50%; width:15px; height:15px; border:3px solid rgba(154,106,45,.72); border-radius:50%; background:rgba(255,255,255,.68); box-shadow:0 0 0 5px rgba(255,255,255,.42),0 0 0 8px rgba(154,106,45,.24),0 3px 14px rgba(45,27,13,.48); transform:translate(-50%,-50%); transition:transform .22s,box-shadow .22s; animation:scroll-hotspot-pulse 1.8s ease-in-out infinite; }
.scroll-hotspot span { position:absolute; left:50%; bottom:46px; width:max-content; padding:7px 13px; color:#fff; background:rgba(48,31,18,.82); border-radius:3px; font:700 13px/1.3 "Noto Serif SC",serif; letter-spacing:.12em; opacity:0; pointer-events:none; transform:translate(-50%,6px); transition:opacity .2s,transform .2s; }
.scroll-hotspot span::after { content:""; position:absolute; left:50%; top:100%; border:5px solid transparent; border-top-color:rgba(48,31,18,.82); transform:translateX(-50%); }
.scroll-hotspot:hover::before,.scroll-hotspot:focus-visible::before { transform:translate(-50%,-50%) scale(1.18); box-shadow:0 0 0 7px rgba(255,255,255,.3),0 2px 15px rgba(45,27,13,.65); }
.scroll-hotspot:hover span,.scroll-hotspot:focus-visible span { opacity:1; transform:translate(-50%,0); }
.scroll-hotspot.is-loading { cursor:progress; }
.scroll-hotspot.is-opening { opacity:0; pointer-events:none; transition:opacity .28s; }
.scroll-hotspot.is-view-ready { opacity:1; pointer-events:auto; }
.scroll-hotspot.is-view-ready::before { width:19px; height:19px; background:rgba(255,250,239,.9); box-shadow:0 0 0 6px rgba(255,255,255,.4),0 0 0 10px rgba(154,106,45,.25),0 4px 18px rgba(45,27,13,.48); }
@keyframes scroll-hotspot-pulse { 0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.4),0 0 0 8px rgba(154,106,45,.23),0 3px 14px rgba(45,27,13,.44)} 50%{box-shadow:0 0 0 7px rgba(255,255,255,.52),0 0 0 12px rgba(154,106,45,.12),0 4px 18px rgba(45,27,13,.55)} }
.scroll-viewer { position:fixed; z-index:7000; inset:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; align-items:center; padding:24px 2.2% 28px; color:#fff; background:rgba(12,10,8,.88); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .38s ease,visibility .38s; backdrop-filter:blur(4px); }
.scroll-viewer.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.scroll-viewer::before { content:""; position:absolute; inset:20px; border:1px solid rgba(197,151,83,.22); pointer-events:none; }
.scroll-viewer-title { position:relative; z-index:2; grid-column:1; justify-self:center; margin-bottom:12px; text-align:center; letter-spacing:.18em; }
.scroll-viewer-title small { margin:0 0 5px; color:#aa8b61; font-size:10px; }
.scroll-viewer-title strong { color:#ead6b6; font-size:17px; }
.scroll-viewer-viewport { position:relative; z-index:2; grid-column:1; width:100%; height:min(72vh,760px); display:flex; align-items:center; justify-content:center; overflow:hidden; outline:0; border-top:1px solid rgba(194,145,75,.55); border-bottom:1px solid rgba(194,145,75,.55); background:#6d4a22; cursor:grab; touch-action:none; box-shadow:0 18px 60px rgba(0,0,0,.55); }
.scroll-viewer-viewport.is-dragging { cursor:grabbing; }
.scroll-viewer-viewport img { display:block; flex:none; width:auto; max-width:none; height:min(65vh,690px); user-select:none; transform-origin:center; will-change:transform; filter:sepia(.04) contrast(1.04); }
.scroll-viewer-controls { position:relative; z-index:2; grid-column:1; display:flex; align-items:center; justify-content:center; gap:30px; margin-top:14px; color:#d8c5aa; font-size:12px; letter-spacing:.16em; }
.scroll-viewer-controls button { width:42px; height:42px; color:#fff; background:rgba(44,34,25,.7); border:1px solid rgba(223,195,153,.6); border-radius:50%; font-size:24px; cursor:pointer; }
body.is-viewing-scroll { overflow:hidden; }
.facts { position:relative; z-index:3; width:min(76.5%,1390px); height:115px; margin:-57.5px auto 18px; padding:18px 20px; display:grid; grid-template-columns:1.15fr 1.2fr .9fr 1.15fr; background:rgba(255,252,247,.92); box-shadow:0 2px 15px rgba(91,63,32,.08); border-radius:2px; }
.facts article { display:flex; align-items:center; gap:22px; padding:0 30px; border-right:1px solid #e2d1b9; }
.facts article:last-child { border:0; }
.fact-icon,.character { color:#b07b2d; font-size:47px; line-height:1; font-weight:400; }
.fact-image { display:block; width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
.fact-image-creation { width:40px; height:40px; }
.fact-image-size { width:45px; height:45px; }
.character { font-size:55px; }
small { display:block; font-size:16px; font-weight:700; margin-bottom:4px; } strong { font-size:15px; line-height:1.55; font-weight:600; white-space:nowrap; }
.cards { width:min(91%,1658px); margin:0 auto 36px; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.cards a { display:block; position:relative; min-width:0; overflow:hidden; border-radius:12px; background:#fffdf8; box-shadow:0 2px 10px rgba(76,52,26,.18); transition:transform .2s, box-shadow .2s; }
.cards a:hover { transform:translateY(-7px); box-shadow:0 12px 22px rgba(76,52,26,.2); }
.cards img { display:block; width:100%; height:auto; }
.card-copy { position:absolute; top:24.5%; left:8%; width:84%; min-height:31%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#1f1710; text-align:center; background:transparent; }
.card-copy b { font-size:clamp(21px,1.7vw,32px); line-height:1.25; font-weight:900; letter-spacing:.08em; }
.card-copy small { margin-top:8px; font-size:clamp(12px,.95vw,18px); line-height:1.35; font-weight:700; letter-spacing:.08em; }
footer { height:90px; display:flex; align-items:center; justify-content:center; gap:9px; background:rgba(255,252,247,.72); border-top:1px solid #eee4d7; color:#26347e; font-size:13px; }
footer i { height:40px; border-left:1px solid #e3d7c9; margin:0 50px; }
.footer-logo { display:block; width:auto; height:48px; object-fit:contain; }
.footer-logo-right { height:34px; }
.icp-record { margin-left:28px; color:#776b5d; font-size:12px; text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.icp-record:hover { color:#26347e; }

/* Page transitions */
.page-transition { position:fixed; z-index:1000; inset:0; pointer-events:none; opacity:0; background:#f8f0e4; }
.page-transition::after { content:""; position:absolute; inset:0; opacity:.045; background-image:url("images/landscape.png"); background-position:center; background-size:cover; filter:grayscale(1) sepia(.45); }
.has-page-transitions body > main,.has-page-transitions body > footer { opacity:0; transform:translateY(18px); }
.has-page-transitions body.is-entered > main,.has-page-transitions body.is-entered > footer { opacity:1; transform:none; transition:opacity .7s ease .14s,transform .9s cubic-bezier(.2,.75,.2,1) .14s; }
body.is-leaving > main,body.is-leaving > footer { opacity:0!important; transform:translateY(-14px)!important; transition:opacity .38s ease,transform .52s ease!important; }
body.is-leaving .page-transition { animation:paper-fade .62s ease forwards; }
.spa-loading > main,.spa-loading > footer { opacity:.45!important; transition:opacity .16s ease!important; }
@keyframes paper-fade { 0%{opacity:0} 100%{opacity:1} }

/* Overview */
.overview-page { background:#f7efe3; }
.overview-main { overflow:hidden; }
.overview-hero { position:relative; height:calc(100vh - 190px); min-height:620px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:48px; padding:58px 7% 76px; background:radial-gradient(circle at 32% 44%,rgba(255,251,244,.98),rgba(249,240,226,.69) 48%,rgba(246,235,218,.42)),url("images/landscape.png") center/cover no-repeat; }
.overview-hero::after { content:"概览"; position:absolute; right:8%; top:60px; color:rgba(137,94,37,.07); font:900 240px/1 "Noto Serif SC",serif; letter-spacing:.15em; }
.overview-kicker { position:relative; z-index:1; color:#8d6328; font-size:15px; font-weight:700; letter-spacing:.28em; }
.overview-kicker span { display:inline-grid; place-items:center; width:40px; height:40px; margin-right:15px; border:1px solid #b98a4d; border-radius:50%; letter-spacing:0; }
.overview-hero-copy { position:relative; z-index:2; }
.overview-hero h1 { position:relative; z-index:1; margin:30px 0 20px; font-size:58px; line-height:1.28; letter-spacing:.08em; text-align:left; text-shadow:none; }
.overview-hero h1 em { color:#9b6829; font-style:normal; }
.overview-hero h1.overview-quote-title { font-size:28px; line-height:1.72; letter-spacing:.03em; }
.quote-first-line { white-space:nowrap; }
.overview-lead { position:relative; z-index:1; margin:0; color:#554536; font-size:17px; line-height:2; letter-spacing:.07em; }
.hero-provenance-notes { margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; color:#625243; font-size:15px; line-height:1.58; list-style:none; }
.hero-provenance-notes li { position:relative; min-height:42px; padding:7px 12px 7px 120px; display:flex; align-items:center; white-space:nowrap; background:linear-gradient(90deg,rgba(255,250,241,.88),rgba(245,231,211,.34)); border-left:2px solid #b58040; box-shadow:0 5px 14px rgba(91,59,25,.045); transition:transform .25s ease,background .25s ease; }
.hero-provenance-notes li:nth-child(2) { width:calc(100% - 13px); margin-left:13px; }
.hero-provenance-notes li:nth-child(3) { width:calc(100% - 27px); margin-left:27px; }
.hero-provenance-notes li:hover { background:linear-gradient(90deg,#fffaf1,rgba(238,216,185,.55)); transform:translateX(4px); }
.hero-provenance-notes b { position:absolute; left:12px; top:50%; width:96px; color:#96682f; font-size:15px; letter-spacing:.08em; transform:translateY(-50%); }
.hero-provenance-notes b::after { content:""; position:absolute; right:0; top:50%; width:8px; border-top:1px solid #c39c6b; }
.hero-dimensions { position:relative; z-index:2; min-width:0; padding:20px 8px 18px; perspective:1100px; }
.hero-spec-title { display:flex; align-items:baseline; justify-content:space-between; margin:0 2% 46px; color:#8d6328; }
.hero-spec-title span { font-size:13px; font-weight:700; letter-spacing:.22em; }
.hero-spec-title strong { font-size:17px; letter-spacing:.08em; }
.hero-visual-comparison { width:100%; margin:0 auto; display:grid; grid-template-columns:7.39fr 100fr; align-items:start; gap:28px; }
.hero-scroll-block { min-width:0; }
.hero-scroll-perspective { position:relative; width:100%; transform:rotateX(7deg) rotateY(-10deg) rotateZ(2.2deg); transform-origin:center; transform-style:preserve-3d; filter:drop-shadow(12px 18px 14px rgba(70,43,17,.2)); }
.hero-scroll-perspective::after { content:""; position:absolute; left:4%; right:2%; bottom:-24px; height:26px; background:radial-gradient(ellipse,rgba(73,46,20,.22),transparent 70%); filter:blur(8px); transform:translateZ(-20px); }
.hero-scroll-perspective img { display:block; width:100%; height:auto; outline:1px solid rgba(123,79,31,.42); }
.hero-width-line { position:absolute; left:1%; right:1%; top:-28px; height:28px; color:#a06e32; font-size:11px; font-weight:700; letter-spacing:.08em; text-align:center; padding-top:5px; }
.hero-width-line::before { content:""; position:absolute; left:0; right:0; top:0; border-top:1px solid #b98547; transform:scaleX(0); transform-origin:left center; }
.hero-width-line::after { content:""; position:absolute; left:-1px; right:-1px; top:-4px; height:7px; border-left:1px solid #b98547; border-right:1px solid #b98547; opacity:0; }
.hero-width-line b { display:inline-block; opacity:0; transform:translateY(-5px); }
.hero-height-line { position:absolute; right:-34px; top:0; bottom:0; display:flex; align-items:center; color:#a06e32; padding-left:7px; font-size:10px; font-weight:700; writing-mode:vertical-rl; }
.hero-height-line::before { content:""; position:absolute; left:0; top:0; bottom:0; border-left:1px solid #b98547; transform:scaleY(0); transform-origin:center top; }
.hero-height-line::after { content:""; position:absolute; left:-3px; top:0; bottom:0; width:7px; border-top:1px solid #b98547; border-bottom:1px solid #b98547; opacity:0; }
.hero-height-line b { display:inline-block; opacity:0; transform:translateX(5px); }
.overview-hero.is-visible .hero-width-line::before { animation:dimension-width-in 1.25s .45s cubic-bezier(.2,.75,.22,1) forwards; }
.overview-hero.is-visible .hero-width-line::after { animation:dimension-mark-in .25s 1.62s ease forwards; }
.overview-hero.is-visible .hero-width-line b { animation:dimension-label-in .55s 1.28s ease forwards; }
.overview-hero.is-visible .hero-height-line::before { animation:dimension-height-in .82s .82s cubic-bezier(.2,.75,.22,1) forwards; }
.overview-hero.is-visible .hero-height-line::after { animation:dimension-mark-in .25s 1.54s ease forwards; }
.overview-hero.is-visible .hero-height-line b { animation:dimension-label-side-in .5s 1.42s ease forwards; }
@keyframes dimension-width-in { to{transform:scaleX(1)} }
@keyframes dimension-height-in { to{transform:scaleY(1)} }
@keyframes dimension-mark-in { to{opacity:1} }
@keyframes dimension-label-in { to{opacity:1;transform:translateY(0)} }
@keyframes dimension-label-side-in { to{opacity:1;transform:translateX(0)} }
@media (prefers-reduced-motion:reduce) {
  .overview-hero.is-visible .hero-width-line::before,.overview-hero.is-visible .hero-height-line::before { animation:none;transform:none; }
  .overview-hero.is-visible .hero-width-line::after,.overview-hero.is-visible .hero-height-line::after,.overview-hero.is-visible .hero-width-line b,.overview-hero.is-visible .hero-height-line b { animation:none;opacity:1;transform:none; }
}
.hero-scroll-notes { margin:38px 0 0; padding:0; color:#5f5042; font-size:16px; line-height:1.75; list-style:none; }
.hero-scroll-notes li { position:relative; margin-top:6px; padding-left:16px; }
.hero-scroll-notes li::before { content:"○"; position:absolute; left:0; top:0; color:#a27339; font-size:11px; }
.hero-scroll-notes b { color:#3f3024; font-weight:700; }
.hero-scroll-notes span { color:#796956; font-size:16px; }
.hero-a4-comparison { position:relative; width:100%; }
.hero-a4-paper { width:100%; aspect-ratio:21/29.7; display:grid; place-items:center; color:#55483c; background:linear-gradient(145deg,#fff,#e7e2da); border:1px solid #c8bba9; box-shadow:7px 10px 18px rgba(72,53,31,.16); font:700 10px/1 Arial,sans-serif; transform:rotateX(7deg) rotateY(-10deg) rotateZ(2.2deg); transform-style:preserve-3d; transform-origin:center; }
.hero-a4-comparison p { position:absolute; top:calc(100% + 13px); left:50%; width:100px; margin:0; color:#725b43; font-size:10px; line-height:1.5; text-align:center; transform:translateX(-50%); }
.hero-a4-comparison b,.hero-a4-comparison span { display:block; }.hero-a4-comparison b { color:#493729; font-size:14px; }.hero-a4-comparison span { letter-spacing:.08em; }
.scroll-cue { position:absolute; z-index:2; left:50%; bottom:38px; display:flex; flex-direction:column; align-items:center; gap:9px; color:#7d654c; font-size:12px; letter-spacing:.2em; text-decoration:none; transform:translateX(-50%); }
.scroll-cue span { width:1px; height:37px; background:linear-gradient(#a87c43,transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 50%{transform:scaleY(.55);transform-origin:top} }
.overview-section { padding:105px 11%; }
.section-heading { margin-bottom:58px; text-align:center; }
.section-heading span { color:#9b7138; font-size:14px; font-weight:700; letter-spacing:.3em; }
.section-heading h2 { margin:15px 0 0; color:#342519; font-size:39px; letter-spacing:.12em; }
.identity-section { background:#fffaf2; }
.identity-quote { position:relative; width:min(100%,1120px); margin:0 auto 64px; padding:42px 72px; border-top:1px solid #caaa7e; border-bottom:1px solid #caaa7e; text-align:center; }
.identity-quote::before { content:"“"; position:absolute; left:20px; top:4px; color:#c7a16d; font-size:80px; line-height:1; }
.identity-quote p { margin:0; color:#593b1c; font-size:28px; font-weight:700; line-height:1.8; letter-spacing:.06em; }
.value-grid { width:min(100%,1260px); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-grid article { min-height:260px; padding:34px 36px; background:linear-gradient(145deg,#faf2e6,#fffdf8); border:1px solid rgba(172,129,72,.25); box-shadow:0 13px 38px rgba(89,59,24,.07); }
.value-grid article b { color:#c49b64; font-size:15px; letter-spacing:.15em; }
.value-grid h3 { margin:36px 0 14px; font-size:25px; letter-spacing:.12em; }
.value-grid p { margin:0; color:#675848; font-size:16px; line-height:1.9; }
.physical-section { padding:90px 8% 105px; background:#f3e8d8; }
.physical-section .section-heading { margin-bottom:42px; }
.physical-layout { width:min(100%,1460px); margin:auto; display:block; }
.size-card { padding:48px 64px 38px; background:rgba(255,252,246,.9); box-shadow:0 18px 52px rgba(85,57,25,.1); }
.size-card-title { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid #dfcbae; }
.size-card-title span { color:#9b7138; font-size:15px; font-weight:700; letter-spacing:.2em; }
.size-card-title strong { font-size:20px; white-space:normal; }
.size-compare { position:relative; min-height:390px; padding:66px 54px 22px 34px; overflow:hidden; }
.scroll-specimen { position:relative; width:100%; margin:auto; }
.scroll-specimen img { display:block; width:100%; height:auto; outline:1px solid rgba(133,91,40,.38); box-shadow:0 8px 20px rgba(77,50,19,.14); }
.scroll-width { position:absolute; left:0; right:0; top:-31px; color:#8b632f; font-size:11px; font-weight:700; letter-spacing:.1em; text-align:center; }
.scroll-width i { position:absolute; left:0; right:0; bottom:-7px; border-bottom:1px solid #b28854; }
.scroll-width i::before,.scroll-width i::after { content:""; position:absolute; bottom:-3px; height:7px; border-left:1px solid #b28854; }
.scroll-width i::before { left:0; }.scroll-width i::after { right:0; }
.scroll-height { position:absolute; right:-35px; top:0; bottom:0; display:flex; align-items:center; color:#8b632f; font-size:10px; font-weight:700; letter-spacing:.06em; writing-mode:vertical-rl; }
.scroll-height i { position:absolute; left:-7px; top:0; bottom:0; border-left:1px solid #b28854; }
.scroll-height i::before,.scroll-height i::after { content:""; position:absolute; left:-3px; width:7px; border-top:1px solid #b28854; }
.scroll-height i::before { top:0; }.scroll-height i::after { bottom:0; }
.a4-reference { position:relative; min-height:145px; margin:48px 0 0 5%; display:flex; align-items:center; justify-content:flex-start; gap:30px; }
.a4-paper { width:7.39%; aspect-ratio:21/29.7; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7b6246; background:#fff; border:1px solid #c9b79f; box-shadow:0 5px 14px rgba(72,53,31,.12); }
.a4-paper span { font-size:11px; font-weight:800; }.a4-paper small { display:none; }
.a4-reference p { margin:0; color:#7b6855; font-size:11px; line-height:1.7; }
.a4-reference p strong { display:block; color:#946a35; font-size:12px; letter-spacing:.12em; }
.size-card > p { margin:10px 0 0; color:#806f5c; font-size:13px; text-align:center; }
.parameter-list { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.parameter-list article { display:grid; grid-template-columns:72px 1fr; align-items:center; min-height:142px; padding:25px 28px; background:rgba(255,252,246,.72); border-top:3px solid #b88649; }
.parameter-list article > span { color:#9d7138; font-size:14px; font-weight:700; letter-spacing:.15em; }
.parameter-list h3 { margin:0 0 7px; font-size:20px; }.parameter-list p { margin:0; color:#6e5d4b; font-size:14px; line-height:1.7; }
.status-section { background:linear-gradient(rgba(255,250,242,.9),rgba(248,238,224,.94)),url("images/landscape.png") center bottom/100% auto no-repeat; }
.status-timeline { position:relative; width:min(100%,1120px); margin:auto; }
.status-timeline::before { content:""; position:absolute; left:132px; top:20px; bottom:20px; border-left:1px solid #c5a578; }
.status-timeline article { position:relative; display:grid; grid-template-columns:110px 1fr; gap:54px; min-height:145px; }
.status-timeline article::before { content:""; position:absolute; left:126px; top:15px; width:11px; height:11px; border:2px solid #9d6c2c; border-radius:50%; background:#f9f0e3; }
.status-timeline time { padding-top:10px; color:#996d34; font-size:17px; font-weight:700; text-align:right; }
.status-timeline h3 { margin:0 0 10px; font-size:23px; letter-spacing:.06em; }.status-timeline p { margin:0; color:#665646; font-size:16px; line-height:1.8; }
.back-home { width:190px; height:54px; margin:48px auto 0; display:flex; align-items:center; justify-content:center; gap:20px; color:#6b481e; border:1px solid #af8249; border-radius:28px; text-decoration:none; font-weight:700; transition:.3s; }
.back-home:hover { color:#fffaf1; background:#936b2d; }.back-home span { font-size:23px; }
.reveal-block { opacity:0; transform:translateY(26px); transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal-block.is-visible { opacity:1; transform:none; }

/* Author */
.author-page { background:#f7efe3; }
.author-main { overflow:hidden; }
.author-onepage { height:calc(100vh - 190px); min-height:620px; display:grid; grid-template-columns:27% 73%; background:radial-gradient(circle at 72% 38%,rgba(255,252,246,.96),rgba(243,230,211,.76)),url("images/landscape.png") center/cover no-repeat; }
.author-onepage-portrait { position:relative; height:100%; min-height:620px; overflow:hidden; }
.author-onepage-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,239,226,.05),rgba(247,239,226,.12) 55%,#f7efe3 100%),linear-gradient(0deg,#f7efe3,transparent 32%); }
.author-onepage-portrait img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.72) sepia(.12); transform:scale(1.12); }
.author-onepage-portrait > span { position:absolute; z-index:2; left:10%; bottom:9%; color:rgba(130,83,34,.22); font:400 108px/.82 "Ma Shan Zheng",cursive; }
.author-dashboard { min-width:0; height:100%; padding:32px 5% 30px 3.5%; display:flex; flex-direction:column; justify-content:space-evenly; }
.author-dashboard-head { display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:end; padding-bottom:22px; border-bottom:1px solid #d7bd98; }
.author-dashboard-head h1 { margin:13px 0 0; color:#49301a; font-size:47px; line-height:1.15; text-align:left; text-shadow:none; }
.author-dashboard-head h1 em { color:#95662f; font-size:22px; font-style:normal; letter-spacing:.1em; }
.author-dashboard-head > p { margin:0; color:#685849; font-size:13px; line-height:1.85; }
.author-compact-section { display:grid; grid-template-columns:82px 1fr; gap:25px; margin-top:0; }
.compact-label { padding-top:4px; color:#93662f; }.compact-label span { display:block; font-size:12px; font-weight:800; letter-spacing:.2em; }.compact-label b { display:block; margin-top:7px; color:#9e7a51; font-size:13px; font-weight:600; }
.compact-label-reversed b { margin-top:0; }
.compact-label-reversed span { margin-top:7px; }
.compact-timeline { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }
.compact-timeline::before { content:""; position:absolute; left:5%; right:5%; top:27px; border-top:1px solid #c6a576; }
.compact-timeline article { position:relative; min-width:0; padding:0 6px; text-align:center; }
.compact-timeline article::before { content:""; position:absolute; left:50%; top:23px; width:7px; height:7px; border:2px solid #a67538; border-radius:50%; background:#f7eee1; transform:translateX(-50%); }
.compact-timeline article.featured::before { background:#a67538; box-shadow:0 0 0 5px rgba(166,117,56,.15); }
.compact-timeline time { display:block; color:#8c602d; font-size:14px; font-weight:900; }.compact-timeline b { display:block; margin-top:25px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.compact-timeline small { margin:4px 0 0; color:#887562; font-size:12px; font-weight:500; }
.compact-achievements { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.compact-achievements article { min-width:0; padding:16px 17px; background:rgba(255,251,244,.75); border-top:2px solid #b58143; box-shadow:0 5px 16px rgba(77,48,19,.05); }
.compact-achievements small { color:#a17847; font-size:12px; letter-spacing:.14em; }.compact-achievements h3 { margin:7px 0 5px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.compact-achievements p { margin:0; color:#716151; font-size:13px; line-height:1.55; white-space:nowrap; }
.compact-voices { margin:0 0 0 107px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.compact-voices blockquote { position:relative; margin:0; padding:12px 60px 12px 16px; color:#573a20; background:rgba(237,218,190,.5); border-left:1px solid #b8874e; font-size:14px; font-weight:700; line-height:1.55; }
.compact-voices cite { position:absolute; right:10px; top:50%; color:#9a7549; font-size:12px; font-style:normal; font-weight:600; transform:translateY(-50%); }
.author-hero { position:relative; min-height:620px; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:60px; padding:56px 12% 82px; background:radial-gradient(circle at 72% 42%,rgba(255,252,246,.95),rgba(246,235,218,.68)),url("images/landscape.png") center/cover no-repeat; }
.author-portrait { position:relative; align-self:stretch; overflow:hidden; }
.author-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(248,240,228,.1),rgba(248,240,228,.18) 56%,#f8f0e4 98%),linear-gradient(0deg,#f8f0e4,transparent 30%); }
.author-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 56%; filter:saturate(.72) sepia(.1); transform:scale(1.18); }
.author-intro { position:relative; z-index:1; }
.author-intro h1 { margin:30px 0 20px; font-size:72px; line-height:1.22; text-align:left; text-shadow:none; }
.author-intro h1 em { color:#9a6b32; font-size:34px; font-style:normal; letter-spacing:.12em; }
.author-intro > p { margin:0; color:#5f5142; font-size:18px; line-height:2; letter-spacing:.05em; }
.author-section { padding:105px 11%; }
.life-section { background:#fffaf2; }
.life-timeline { position:relative; width:min(100%,1030px); margin:auto; padding:12px 0; }
.life-timeline::before { content:""; position:absolute; left:183px; top:34px; bottom:34px; border-left:1px solid #c9a875; }
.life-timeline article { position:relative; min-height:150px; display:grid; grid-template-columns:145px 28px 1fr; gap:24px; align-items:start; }
.life-timeline time { padding-top:6px; color:#8f642d; font-size:33px; font-weight:900; letter-spacing:.06em; text-align:right; }
.life-timeline article > i { position:relative; width:15px; height:15px; margin:15px 0 0 7px; border:2px solid #a87a3e; border-radius:50%; background:#fffaf2; box-shadow:0 0 0 7px #fffaf2; }
.life-timeline article.featured > i { background:#a87a3e; box-shadow:0 0 0 7px #f2dec1; }
.life-timeline article > div { padding:0 0 38px 25px; }
.life-timeline small { color:#a57943; font-size:12px; font-weight:700; letter-spacing:.24em; }
.life-timeline h3 { margin:8px 0 9px; color:#35261a; font-size:23px; letter-spacing:.08em; }
.life-timeline p { margin:0; color:#6b5b4a; font-size:15px; line-height:1.8; }
.achievement-section { background:#f1e4d2; }
.achievement-grid { width:min(100%,1220px); margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.achievement-grid article { min-height:230px; display:grid; grid-template-columns:88px 1fr; gap:26px; padding:34px 38px; background:rgba(255,252,246,.86); border:1px solid rgba(168,119,60,.2); box-shadow:0 12px 34px rgba(79,50,18,.06); transition:transform .3s ease,box-shadow .3s ease; }
.achievement-grid article:hover { transform:translateY(-5px); box-shadow:0 18px 42px rgba(79,50,18,.11); }
.achievement-grid article > b { display:grid; place-items:center; align-self:start; width:70px; height:70px; color:#9a6a30; border:1px solid #c39b68; border-radius:50%; font-size:27px; font-weight:500; }
.achievement-grid small { color:#a27843; font-size:12px; letter-spacing:.22em; }
.achievement-grid h3 { margin:14px 0 12px; font-size:24px; letter-spacing:.08em; }
.achievement-grid p { margin:0; color:#665647; font-size:15px; line-height:1.85; }
.voices-section { background:linear-gradient(rgba(255,251,245,.91),rgba(247,237,222,.94)),url("images/landscape.png") center bottom/100% auto no-repeat; }
.voices-list { width:min(100%,1050px); margin:auto; }
.voices-list blockquote { position:relative; margin:0; padding:38px 210px 38px 72px; border-top:1px solid #d5bd9b; }
.voices-list blockquote:last-child { border-bottom:1px solid #d5bd9b; }
.voices-list blockquote::before { content:"“"; position:absolute; left:12px; top:12px; color:#c6a16f; font-size:70px; line-height:1; }
.voices-list p { margin:0; color:#4f351c; font-size:23px; font-weight:700; line-height:1.7; letter-spacing:.05em; }
.voices-list footer { position:absolute; right:24px; top:50%; height:auto; display:block; padding:0; background:none; border:0; color:#3d2b1e; font-size:17px; text-align:right; transform:translateY(-50%); }
.voices-list footer span { display:block; margin-bottom:6px; color:#a07848; font-size:12px; letter-spacing:.2em; }
.author-actions { margin:62px auto 0; display:flex; justify-content:center; gap:20px; }
.author-actions a { min-width:170px; padding:15px 24px; color:#6b481e; border:1px solid #af8249; border-radius:28px; text-align:center; text-decoration:none; font-weight:700; transition:.3s; }
.author-actions a:hover { color:#fffaf1; background:#936b2d; }
.site-footer { height:90px; }

/* Creation */
.creation-page { background:#f7efe3; }
.creation-main { overflow:hidden; }
.creation-onepage { height:calc(100vh - 190px); min-height:620px; padding:25px 5%; background:radial-gradient(circle at 48% 35%,rgba(255,252,246,.97),rgba(242,227,207,.78)),url("images/landscape.png") center/cover no-repeat; }
.creation-onepage-shell { height:100%; display:flex; flex-direction:column; }
.creation-onepage-head { height:102px; display:grid; grid-template-columns:185px 1fr 1fr; align-items:center; gap:25px; padding-bottom:18px; border-bottom:1px solid #d5ba92; }
.creation-onepage-head h1 { margin:0; color:#4a3018; font-size:40px; line-height:1.2; text-align:left; text-shadow:none; }
.creation-onepage-head > p { margin:0; color:#715f4e; font-size:13px; line-height:1.8; text-align:right; }
.creation-section-kicker { flex:0 0 auto; margin-bottom:16px; }
.creation-onepage-grid { flex:1; min-height:0; display:grid; grid-template-columns:.76fr 1.24fr; gap:24px; padding-top:0; }
.creation-background-panel,.creation-features-panel { min-width:0; padding:20px 22px; background:rgba(255,251,244,.76); border:1px solid rgba(161,112,54,.2); box-shadow:0 10px 30px rgba(75,46,17,.055); }
.creation-background-panel > header,.creation-features-panel > header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.creation-background-panel > header span,.creation-features-panel > header span { color:#a47b49; font-size:12px; letter-spacing:.17em; }
.creation-background-panel h2,.creation-features-panel h2 { margin:0; color:#3f2b1c; font-size:25px; letter-spacing:.12em; }
.creation-scroll-figure { margin:0 0 15px; padding:25px 15px 12px; background:linear-gradient(145deg,#e9d5b3,#fff8e9); overflow:hidden; }
.creation-scroll-figure img { display:block; width:100%; height:auto; outline:1px solid rgba(128,81,31,.32); box-shadow:7px 10px 15px rgba(73,43,15,.15); transform:rotateX(7deg) rotateY(-8deg) rotateZ(1.5deg); }
.creation-scroll-figure figcaption { margin-top:15px; color:#906a3b; font-size:12px; letter-spacing:.16em; text-align:center; }
.creation-story-list { position:relative; height:calc(100% - 42px); display:grid; grid-template-rows:repeat(3,1fr); gap:13px; }
.creation-story-list::before { content:""; position:absolute; z-index:1; left:58px; top:16%; bottom:16%; border-left:1px solid rgba(168,116,55,.45); }
.creation-story-list article { position:relative; display:grid; grid-template-columns:72px 1fr; gap:15px; align-items:center; padding:15px 16px 15px 8px; overflow:hidden; background:linear-gradient(105deg,rgba(225,199,161,.28),rgba(255,252,247,.58) 68%); border:1px solid rgba(168,119,60,.11); border-left:2px solid rgba(170,118,56,.72); box-shadow:0 5px 15px rgba(76,47,18,.028); }
.creation-story-list article > b { position:relative; z-index:2; display:grid; place-items:center; width:60px; height:60px; color:#8f5c24; background:#f8ecd9; border:1px solid #be9562; border-radius:50%; font-size:15px; line-height:1.35; letter-spacing:.05em; text-align:center; box-shadow:0 0 0 6px rgba(248,236,217,.72); }
.creation-story-list article > div { position:relative; z-index:2; }.creation-story-list h3 { display:inline-block; margin:0 0 9px; padding:4px 9px; color:#fffaf1; background:#9b6b32; font-size:14px; letter-spacing:.12em; }.creation-story-list h3::after { content:"："; }.creation-story-list p { margin:0; color:#655342; font-size:14px; line-height:1.72; }
.creation-feature-grid { height:calc(100% - 40px); display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:12px; }
.creation-feature-card { min-width:0; display:grid; grid-template-columns:42% 58%; align-items:center; gap:12px; padding:12px; background:linear-gradient(145deg,rgba(240,225,203,.75),rgba(255,252,246,.9)); border-top:2px solid #ae7c40; }
.creation-feature-card .feature-chart { height:86px; margin:0; }
.creation-feature-card .feature-chart > span { right:7px; bottom:6px; font-size:12px; }
.creation-feature-card .feature-manuscript { position:relative; overflow:hidden; border:1px solid rgba(123,79,31,.3); background:#d9b875; box-shadow:inset 0 0 12px rgba(75,44,17,.14); }
.creation-feature-card .feature-manuscript::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(70,40,16,.1),transparent 18% 78%,rgba(70,40,16,.12)); box-shadow:inset 0 0 0 1px rgba(255,245,222,.28); }
.creation-feature-card .feature-manuscript img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(2.45); filter:sepia(.12) saturate(.88) contrast(1.08); transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s; }
.creation-feature-card:hover .feature-manuscript img { transform:scale(2.62); filter:sepia(.02) saturate(1) contrast(1.12); }
.creation-feature-card .feature-manuscript > span { z-index:2; padding:4px 6px; color:#fff8e9; background:rgba(82,50,22,.72); text-shadow:0 1px 2px rgba(0,0,0,.25); }
.manuscript-stroke img { object-position:84% 48%; transform-origin:72% 48%; }
.creation-feature-card.feature-stroke-card { grid-template-columns:172px minmax(0,1fr); }
.creation-feature-card .manuscript-stroke { width:172px; height:172px; aspect-ratio:1; justify-self:center; }
.creation-feature-card .manuscript-stroke img { width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.creation-feature-card:hover .manuscript-stroke img { transform:scale(1.04); }
.creation-feature-card.feature-structure-card { grid-template-columns:172px minmax(0,1fr); }
.creation-feature-card .manuscript-structure { width:172px; height:172px; aspect-ratio:1; justify-self:center; }
.creation-feature-card .manuscript-structure img { width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.creation-feature-card:hover .manuscript-structure img { transform:scale(1.04); }
.creation-feature-card.feature-rhythm-card { grid-template-columns:172px minmax(0,1fr); }
.creation-feature-card .manuscript-rhythm { width:172px; height:172px; aspect-ratio:1; justify-self:center; }
.creation-feature-card .manuscript-rhythm img { width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.creation-feature-card:hover .manuscript-rhythm img { transform:scale(1.04); }
.creation-feature-card.feature-ink-card { grid-template-columns:172px minmax(0,1fr); }
.creation-feature-card .manuscript-ink { width:172px; height:172px; aspect-ratio:1; justify-self:center; }
.creation-feature-card .manuscript-ink img { width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.creation-feature-card:hover .manuscript-ink img { transform:scale(1.04); }
.manuscript-structure img { object-position:64% 52%; transform-origin:58% 52%; }
.manuscript-rhythm img { object-position:43% 50%; transform-origin:46% 50%; }
.manuscript-ink img { object-position:25% 48%; transform-origin:34% 48%; }
.creation-feature-card > div:last-child { min-width:0; }.creation-feature-card > div:last-child > b { color:#8f602a; font-size:15px; letter-spacing:.16em; }.creation-feature-card p { margin:8px 0 0; color:#625142; font-size:13px; line-height:1.65; }
.creation-feature-card .structure-chart i { font-size:42px; }
.creation-hero { position:relative; min-height:620px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding:70px 12% 92px; background:radial-gradient(circle at 70% 40%,rgba(255,252,246,.98),rgba(247,237,222,.7)),url("images/landscape.png") center/cover no-repeat; }
.creation-intro { position:relative; z-index:2; grid-column:2; }
.creation-intro h1 { margin:30px 0 20px; font-size:70px; line-height:1.2; text-align:left; text-shadow:none; }
.creation-intro h1 em { color:#9b6b31; font-style:normal; }
.creation-intro > p { color:#615142; font-size:18px; line-height:2; }
.creation-hero-art { position:absolute; left:8%; top:80px; width:42%; height:450px; }
.creation-hero-art::before { content:""; position:absolute; left:10%; right:5%; top:54%; height:3px; background:linear-gradient(90deg,transparent,#5a3921 12%,#9b713f 76%,transparent); transform:rotate(-13deg); filter:blur(.4px); }
.creation-hero-art span { position:absolute; left:18%; top:12%; width:26px; height:340px; border-radius:70% 35% 55% 30%; background:linear-gradient(90deg,#432719,#9a693e 40%,#2d1b12); transform:rotate(46deg); box-shadow:13px 2px 18px rgba(63,38,18,.2); }
.creation-hero-art span::after { content:""; position:absolute; left:-18px; bottom:-42px; width:65px; height:90px; background:linear-gradient(#50301c,#21140d); clip-path:polygon(50% 0,100% 100%,0 100%); }
.creation-hero-art i { position:absolute; left:20%; bottom:23%; width:310px; height:70px; border-radius:50%; background:radial-gradient(ellipse,rgba(56,35,18,.3),transparent 68%); transform:rotate(-8deg); filter:blur(6px); }
.creation-hero-art b { position:absolute; left:30%; right:8%; bottom:10%; height:105px; opacity:.46; background:repeating-linear-gradient(90deg,transparent 0 16px,#5b3b23 17px 19px,transparent 20px 34px); mask-image:linear-gradient(90deg,transparent,#000 15%,#000 80%,transparent); transform:skewX(-18deg); }
.creation-section { padding:105px 10.5%; }
.background-section { background:#fffaf2; }
.story-flow { width:min(100%,1250px); margin:auto; display:flex; flex-direction:column; gap:28px; }
.story-card { position:relative; min-height:285px; display:grid; grid-template-columns:150px 330px 1fr; align-items:center; gap:38px; padding:24px 46px 24px 24px; background:linear-gradient(105deg,#f0dfc7,#fffaf2 48%); border:1px solid rgba(167,119,60,.2); box-shadow:0 13px 36px rgba(79,50,18,.06); }
.story-card.reverse { grid-template-columns:150px 1fr 330px; background:linear-gradient(255deg,#ead5b9,#fffaf2 48%); }
.story-card.reverse .story-visual { grid-column:3; }.story-card.reverse .story-copy { grid-column:2; grid-row:1; }
.story-year { color:#7a5124; font-size:32px; font-weight:900; text-align:center; letter-spacing:.05em; }
.story-year small { margin-top:7px; color:#a17a4a; font-size:11px; letter-spacing:.12em; }
.story-visual { position:relative; height:230px; overflow:hidden; background:#f5ead9; }
.silk-visual { background:linear-gradient(145deg,#dfbe84,#f3dfad 55%,#d3aa6d); box-shadow:inset 0 0 35px rgba(91,55,17,.17); }
.silk-visual::after { content:""; position:absolute; inset:0; opacity:.25; background:repeating-linear-gradient(0deg,transparent 0 3px,#8b6837 4px); }
.silk-visual span,.silk-visual i { position:absolute; z-index:1; top:16px; width:14px; height:198px; border-radius:8px; background:linear-gradient(90deg,#67401d,#ba8240,#70451f); }
.silk-visual span { left:18px; }.silk-visual i { right:18px; }
.creek-visual { background:linear-gradient(#f6ecdd 5%,#d8e0d2 55%,#aabca9); }
.creek-visual::before,.creek-visual::after { content:""; position:absolute; bottom:25px; border-radius:55% 55% 0 0; background:#80937b; filter:blur(1px); }
.creek-visual::before { left:-30px; width:230px; height:110px; }.creek-visual::after { right:-35px; width:190px; height:145px; background:#9a9b7a; }
.creek-visual span { position:absolute; z-index:2; left:0; right:0; bottom:0; height:55px; background:linear-gradient(170deg,rgba(255,255,255,.75),rgba(129,157,151,.65)); }
.creek-visual i,.creek-visual b { position:absolute; z-index:3; bottom:30px; width:2px; height:65px; background:#58442b; }.creek-visual i{left:42%}.creek-visual b{left:55%;height:50px}
.brush-visual { background:linear-gradient(145deg,#e4c894,#f1dfb7); }
.brush-visual::before { content:"米"; position:absolute; left:50%; top:50%; color:#2f2018; font-family:"Ma Shan Zheng",cursive; font-size:140px; transform:translate(-50%,-52%) rotate(-5deg); }
.brush-visual span { position:absolute; left:10px; right:10px; top:14px; bottom:14px; border:1px solid rgba(120,81,35,.24); }
.story-copy > b { color:#9c713b; font-size:12px; letter-spacing:.2em; }
.story-copy h3 { margin:14px 0 14px; color:#38281b; font-size:24px; letter-spacing:.06em; }
.story-copy p { margin:0; color:#685949; font-size:15px; line-height:1.9; }
.features-section { background:linear-gradient(rgba(242,231,214,.95),rgba(249,242,232,.96)),url("images/landscape.png") center bottom/100% auto no-repeat; }
.feature-dashboard { width:min(100%,1280px); margin:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.feature-card { min-height:440px; padding:32px 38px; background:rgba(255,252,246,.86); border:1px solid rgba(151,105,48,.23); box-shadow:0 13px 36px rgba(77,49,19,.07); }
.feature-card header { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #dbc5a5; }
.feature-card header b { font-size:25px; letter-spacing:.16em; }.feature-card header span { color:#aa8657; font-size:10px; letter-spacing:.2em; }
.feature-chart { position:relative; height:178px; margin:25px 0 22px; overflow:hidden; background:#f1e4d1; }
.feature-chart > span { position:absolute; right:16px; bottom:12px; color:#8d6636; font-size:11px; font-weight:700; letter-spacing:.16em; }
.stroke-chart { display:flex; align-items:center; justify-content:center; gap:16px; }
.stroke-chart i { display:block; width:7px; background:#3c291b; transform-origin:center; }.stroke-chart i:nth-child(1){height:95px;transform:rotate(38deg)}.stroke-chart i:nth-child(2){height:135px;transform:rotate(-17deg);width:14px}.stroke-chart i:nth-child(3){height:80px;transform:rotate(66deg);width:4px}.stroke-chart i:nth-child(4){height:112px;transform:rotate(12deg);width:10px}
.structure-chart i { position:absolute; top:20px; color:#3c281a; font:500 104px/1 "Ma Shan Zheng",cursive; }.structure-chart i:first-child{left:27%;transform:rotate(-8deg)}.structure-chart i:nth-child(2){right:26%;top:37px;transform:rotate(9deg)}
.rhythm-chart { display:flex; align-items:center; justify-content:center; gap:25px; }
.rhythm-chart i { width:20px; border-radius:50%; background:#4a3220; }.rhythm-chart i:nth-child(1){height:45px}.rhythm-chart i:nth-child(2){height:105px}.rhythm-chart i:nth-child(3){height:68px}.rhythm-chart i:nth-child(4){height:132px}.rhythm-chart i:nth-child(5){height:82px}.rhythm-chart i:nth-child(6){height:55px}
.ink-chart { display:flex; align-items:center; justify-content:center; gap:17px; }
.ink-chart i { width:64px; height:108px; border-radius:48% 52% 43% 57%; background:#342319; filter:blur(.3px); }.ink-chart i:nth-child(2){opacity:.72;height:135px}.ink-chart i:nth-child(3){opacity:.43;height:92px}.ink-chart i:nth-child(4){opacity:.2;height:120px;background:repeating-linear-gradient(90deg,#342319 0 2px,transparent 3px 7px)}
.feature-card h3 { margin:0 0 12px; font-size:23px; letter-spacing:.07em; }.feature-card p { margin:0; color:#685847; font-size:15px; line-height:1.85; }
.feature-summary { width:min(100%,1000px); margin:58px auto 0; display:flex; align-items:center; justify-content:center; gap:22px; color:#704c22; font-size:16px; font-weight:700; letter-spacing:.13em; }
.feature-summary i { width:44px; border-bottom:1px solid #bb9666; }

/* Circulation */
.circulation-page { background:#f7efe3; }
.circulation-main { overflow:hidden; }
.circulation-onepage { height:calc(100vh - 190px); min-height:620px; padding:25px 5%; background:radial-gradient(circle at 55% 38%,rgba(255,252,246,.97),rgba(239,222,199,.78)),url("images/landscape.png") center/cover no-repeat; }
.circulation-onepage-shell { height:100%; display:flex; flex-direction:column; }
.circulation-section-kicker { flex:0 0 auto; margin-bottom:16px; }
.circulation-onepage-head { height:102px; display:grid; grid-template-columns:185px 1fr 1fr; align-items:center; gap:25px; padding-bottom:18px; border-bottom:1px solid #d5ba92; }
.circulation-onepage-head h1 { margin:0; color:#49301a; font-size:40px; text-align:left; text-shadow:none; }.circulation-onepage-head > p { margin:0; color:#705e4c; font-size:13px; line-height:1.8; text-align:right; }
.circulation-onepage-grid { flex:1; min-height:0; display:grid; grid-template-columns:.72fr 1.28fr; gap:28px; padding-top:0; }
.compact-provenance,.seal-panorama-panel { min-width:0; padding:20px 24px; background:rgba(255,251,244,.76); border:1px solid rgba(161,112,54,.2); box-shadow:0 10px 30px rgba(75,46,17,.055); }
.compact-provenance > header,.seal-panorama-panel > header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:17px; }.compact-provenance h2,.seal-panorama-panel h2 { margin:0; color:#3f2b1c; font-size:25px; letter-spacing:.1em; }.compact-provenance > header span,.seal-panorama-panel > header span { color:#9b764c; font-size:12px; letter-spacing:.12em; }
.compact-provenance-line { position:relative; height:calc(100% - 45px); display:grid; grid-template-rows:repeat(4,1fr); }
.compact-provenance-line::before { content:""; position:absolute; left:69px; top:9%; bottom:9%; border-left:1px solid #c6a372; }
.compact-provenance-line article { position:relative; display:grid; grid-template-columns:55px 1fr; gap:30px; align-items:center; min-height:0; }
.compact-provenance-line article::before { content:""; position:absolute; left:64px; top:50%; width:9px; height:9px; border:2px solid #a7763b; border-radius:50%; background:#f8eee0; transform:translateY(-50%); }.compact-provenance-line article:nth-child(3)::before { background:#a7763b; box-shadow:0 0 0 5px rgba(167,118,59,.14); }
.compact-provenance-line time { color:#855a2c; font-size:18px; font-weight:900; text-align:right; }.compact-provenance-line time small { margin-top:3px; color:#a88761; font-size:15px; letter-spacing:.12em; }.compact-provenance-line article > div { padding:9px 13px; background:rgba(240,224,201,.43); }.compact-provenance-line b { color:#9c713d; font-size:12px; letter-spacing:.15em; }.compact-provenance-line h3 { margin:4px 0; font-size:14px; }.compact-provenance-line p { margin:0; color:#746252; font-size:13px; }
.seal-panorama-panel { display:flex; flex-direction:column; overflow:hidden; }
.seal-panorama-panel > header { flex:0 0 auto; }
.seal-panorama-intro { margin:-5px 0 13px; color:#675646; font-size:12pt; line-height:1.65; }
.compact-provenance > header span { font-size:12pt; }
.seal-view-all { align-self:flex-end; margin:-4px 0 10px; padding:7px 14px; color:#7d5228; background:rgba(255,250,241,.72); border:1px solid rgba(158,105,47,.36); font:600 12px/1.4 "Noto Serif SC",serif; letter-spacing:.08em; cursor:pointer; transition:background .2s,color .2s; }
.seal-view-all:hover,.seal-view-all:focus-visible { color:#fffaf2; background:#80552e; outline:none; }
.seal-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.seal-metrics article { min-width:0; padding:10px 8px 9px; text-align:center; background:linear-gradient(145deg,rgba(236,216,185,.75),rgba(255,251,243,.82)); border-top:2px solid #a87439; }
.seal-metrics strong { display:block; color:#7f4f21; font-size:25px; line-height:1; white-space:normal; }.seal-metrics sup { font-size:12px; }.seal-metrics span { display:block; margin-top:7px; color:#78634e; font-size:12px; font-weight:700; white-space:nowrap; }
.seal-lineage { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:stretch; margin-top:13px; }
.seal-lineage::before { content:""; position:absolute; left:8%; right:8%; top:71px; border-top:1px solid rgba(165,114,54,.45); }
.seal-lineage article { position:relative; min-width:0; padding:51px 10px 11px; background:rgba(246,234,216,.55); border:1px solid rgba(158,105,47,.14); text-align:center; }
.seal-lineage article[role="button"] { cursor:pointer; box-shadow:0 2px 7px rgba(83,51,20,.045); transition:background .2s,border-color .2s,box-shadow .2s,transform .2s; }
.seal-lineage article[role="button"]::after { content:"↗"; position:absolute; right:8px; top:6px; color:#9b6d37; font:12px/1 Arial,sans-serif; opacity:.42; transition:opacity .2s,transform .2s; }
.seal-lineage article[role="button"]:hover,.seal-lineage article[role="button"]:focus-visible { background:rgba(255,249,239,.96); border-color:rgba(158,105,47,.42); box-shadow:0 10px 24px rgba(83,51,20,.14); outline:none; transform:translateY(-3px); }
.seal-lineage article[role="button"]:hover::after,.seal-lineage article[role="button"]:focus-visible::after { opacity:1; transform:translate(2px,-2px); }
.seal-lineage i { position:absolute; z-index:1; left:50%; top:50px; width:42px; height:42px; display:grid; place-items:center; color:#9b2e27; background:#f7ead6; border:2px solid #9b2e27; font:400 18px/1 "Ma Shan Zheng",cursive; transform:translateX(-50%) rotate(-3deg); box-shadow:0 0 0 4px #fbf4e9; transition:color .2s,background .2s,box-shadow .2s; }
.seal-lineage article[role="button"]:hover i,.seal-lineage article[role="button"]:focus-visible i { color:#b32620; background:#fff7eb; box-shadow:0 0 0 5px #fffaf2,0 5px 13px rgba(122,42,31,.18); }
.seal-lineage article > div { transform:translateY(53px); }
.seal-lineage b { display:block; color:#51351f; font-size:13px; line-height:1.4; }.seal-lineage span { display:block; margin-top:5px; color:#9a6e39; font-size:12px; line-height:1.4; }.seal-lineage small { margin:7px 0 0; color:#766453; font-size:12px; font-weight:500; line-height:1.55; }
.seal-story-dialog { width:min(820px,calc(100vw - 36px)); max-height:calc(100vh - 50px); padding:38px 42px 40px; overflow:auto; color:#3e2a1b; background:#f8eedf; border:1px solid #a97942; box-shadow:0 28px 90px rgba(42,25,12,.38); }
.seal-story-dialog::backdrop { background:rgba(39,28,20,.67); backdrop-filter:blur(4px); }
.seal-story-dialog.is-fallback-open { position:fixed; z-index:6000; inset:25px 0 auto; margin:auto; display:block; box-shadow:0 0 0 100vmax rgba(39,28,20,.67),0 28px 90px rgba(42,25,12,.38); }
body.seal-dialog-open { overflow:hidden; }
.seal-dialog-close { position:absolute; right:15px; top:12px; width:34px; height:34px; padding:0; color:#76512d; background:transparent; border:0; font:300 28px/1 Arial,sans-serif; cursor:pointer; }
.seal-dialog-heading { display:flex; align-items:center; gap:22px; padding-bottom:23px; border-bottom:1px solid #d4ba95; }
.seal-dialog-heading>i { flex:0 0 auto; width:62px; height:62px; display:grid; place-items:center; color:#a42f28; border:3px solid #a42f28; font:400 27px/1 "Ma Shan Zheng",cursive; transform:rotate(-3deg); }
.seal-dialog-heading small { color:#a07848; font-size:11px; letter-spacing:.18em; }
.seal-dialog-heading h2 { margin:7px 0 0; font-size:27px; letter-spacing:.08em; }
.seal-dialog-lead { margin:25px 0; color:#5f4d3d; font-size:15px; line-height:1.9; }
.seal-dialog-details { margin:0; background:rgba(235,216,188,.42); }
.seal-dialog-details>div { display:grid; grid-template-columns:90px 1fr; gap:18px; padding:13px 17px; border-bottom:1px solid rgba(174,132,82,.18); }
.seal-dialog-details>div:last-child { border:0; }
.seal-dialog-details dt { color:#9b713e; font-size:11px; font-weight:700; letter-spacing:.12em; }
.seal-dialog-details dd { margin:0; color:#4d3827; font-size:13px; font-weight:700; }
.seal-dialog-note { margin:22px 0 0; padding-left:16px; color:#74614f; border-left:2px solid #a97a42; font-size:13px; line-height:1.85; }
.seal-dialog-archive { margin-top:30px; padding-top:4px; border-top:1px solid #d4ba95; }
.seal-dialog-archive section { padding-top:22px; }
.seal-dialog-archive h3 { margin:0 0 15px; color:#5a381d; font-size:20px; letter-spacing:.04em; }
.seal-dialog-archive h4 { margin:20px 0 8px; color:#8f5e2d; font-size:15px; }
.seal-dialog-archive p,.seal-dialog-archive li { color:#5f4d3d; font-size:13px; line-height:1.85; }
.seal-dialog-archive p { margin:8px 0; }
.seal-dialog-archive ul { margin:8px 0; padding-left:22px; }
.seal-dialog-archive table { width:100%; margin:14px 0 22px; border-collapse:collapse; font-size:12px; }
.seal-dialog-archive th,.seal-dialog-archive td { padding:8px 10px; border:1px solid rgba(164,120,70,.25); text-align:left; }
.seal-dialog-archive th { color:#f8eedf; background:#76502d; }
.seal-dialog-archive tbody tr:nth-child(even) { background:rgba(225,202,169,.24); }
.seal-evidence-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }
.seal-evidence-row article { position:relative; padding:9px 12px 9px 17px; background:rgba(73,45,24,.9); }
.seal-evidence-row article::before { content:""; position:absolute; left:7px; top:9px; bottom:9px; border-left:2px solid #b43d31; }.seal-evidence-row b { display:block; color:#f4dfbd; font-size:13px; }.seal-evidence-row p { margin:3px 0 0; color:#cbb797; font-size:12px; }
.legend-card-stack { position:relative; height:calc(100% - 45px); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:8px 4px; overflow:hidden; perspective:1200px; }
.legend-stack-card { position:relative; flex:0 1 28%; width:28%; height:auto; max-height:88%; aspect-ratio:5 / 7; box-sizing:border-box; cursor:pointer; outline:none; transition:transform .45s cubic-bezier(.2,.75,.2,1),filter .35s; }
.legend-stack-card:nth-child(1) { z-index:3; transform:rotate(-1deg); }.legend-stack-card:nth-child(2) { z-index:2; transform:rotate(1deg); }.legend-stack-card:nth-child(3) { z-index:1; transform:rotate(-1deg); }
.legend-stack-card:hover { filter:brightness(1.04); }.legend-stack-card.is-active { z-index:10; }
.legend-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.7,.2,1); }.legend-stack-card.is-flipped .legend-card-inner { transform:rotateY(180deg); }
.legend-card-front,.legend-card-back { position:absolute; inset:0; padding:28px 24px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; backface-visibility:hidden; border:1px solid #91652f; outline:1px solid rgba(145,101,47,.35); outline-offset:-9px; box-shadow:0 18px 44px rgba(61,37,14,.2); }
.legend-card-front { color:#f8ebd8; background-color:#382319; background-image:radial-gradient(circle at 50% 35%,#5b3d28,#291a13 74%),repeating-linear-gradient(90deg,rgba(221,178,111,.025) 0 1px,transparent 1px 6px); }.legend-card-back { color:#432b18; background-color:#ead7b8; background-image:radial-gradient(circle at 50% 35%,rgba(255,250,234,.92),rgba(225,198,156,.72)),repeating-linear-gradient(0deg,rgba(112,70,29,.035) 0 1px,transparent 1px 5px); transform:rotateY(180deg); }
.legend-card-front::before,.legend-card-back::before { content:"◆"; position:absolute; left:50%; top:16px; color:rgba(145,94,39,.48); font-size:9px; transform:translateX(-50%); }
.legend-card-back { align-items:center; text-align:center; }
.legend-card-back h3 { margin:0; padding:0; }
.legend-card-back h3::after { display:none; }
.legend-card-front small,.legend-card-front > span { color:#c9a675; }
.legend-card-front i { color:rgba(232,198,144,.11); }
.legend-card-front h3,.legend-card-back h3 { margin-bottom:11px; padding-bottom:10px; font-size:20px; letter-spacing:.08em; white-space:nowrap; }
.legend-card-front p,.legend-card-back p { font-size:11px; line-height:1.75; letter-spacing:.03em; }
.legend-card-front::after,.legend-card-back::after { content:""; position:absolute; inset:14px; border:1px solid rgba(157,107,48,.4); border-radius:50% 50% 2px 2px / 7% 7% 2px 2px; pointer-events:none; }.legend-card-front small,.legend-card-back small { position:absolute; left:25px; top:24px; color:#956b3c; font-size:9px; letter-spacing:.22em; }.legend-card-front i { position:absolute; right:18px; bottom:4px; color:rgba(125,72,24,.13); font:400 120px/1 "Ma Shan Zheng",cursive; }.legend-card-front h3,.legend-card-back h3 { position:relative; margin:0 0 13px; padding-bottom:11px; font-size:24px; letter-spacing:.14em; }.legend-card-front h3::after,.legend-card-back h3::after { content:""; position:absolute; left:0; bottom:0; width:46px; border-top:1px solid currentColor; opacity:.38; }.legend-card-front p,.legend-card-back p { position:relative; margin:0; font-size:12px; line-height:1.8; letter-spacing:.04em; }.legend-card-front > span,.legend-card-back > span { position:absolute; right:25px; bottom:23px; color:#9a7449; font-size:8px; letter-spacing:.16em; }
.circulation-hero { position:relative; min-height:620px; display:flex; align-items:center; padding:65px 12% 92px; background:radial-gradient(circle at 70% 44%,rgba(255,252,246,.98),rgba(245,233,216,.69)),url("images/landscape.png") center/cover no-repeat; }
.circulation-intro { position:relative; z-index:2; }
.circulation-intro h1 { margin:30px 0 20px; font-size:70px; line-height:1.2; text-align:left; text-shadow:none; }
.circulation-intro h1 em { color:#9b6b31; font-style:normal; }
.circulation-intro > p { color:#615142; font-size:18px; line-height:2; }
.circulation-rings { position:absolute; right:11%; top:105px; width:390px; height:390px; display:grid; place-items:center; }
.circulation-rings i { position:absolute; inset:0; border:1px solid rgba(158,109,49,.22); border-radius:50%; animation:ring-turn 18s linear infinite; }
.circulation-rings i::before { content:""; position:absolute; left:50%; top:-5px; width:9px; height:9px; border-radius:50%; background:#a7773d; }
.circulation-rings i:nth-child(2) { inset:45px; animation-direction:reverse; animation-duration:13s; }.circulation-rings i:nth-child(3) { inset:90px; animation-duration:9s; }
.circulation-rings span { color:#7e5529; font-size:38px; font-weight:900; text-align:center; letter-spacing:.08em; }.circulation-rings span b { font-size:16px; letter-spacing:.35em; }
@keyframes ring-turn { to{transform:rotate(360deg)} }
.circulation-section { padding:105px 10.5%; }
.provenance-section { background:#fffaf2; }
.provenance-timeline { position:relative; width:min(100%,1080px); margin:auto; }
.provenance-timeline::before { content:""; position:absolute; left:180px; top:42px; bottom:42px; border-left:1px solid #c8a573; }
.provenance-timeline article { position:relative; min-height:190px; display:grid; grid-template-columns:140px 32px 1fr; gap:24px; }
.provenance-timeline time { color:#81582c; font-size:32px; font-weight:900; text-align:right; }.provenance-timeline time small { margin-top:6px; color:#ad8556; font-size:11px; letter-spacing:.18em; }
.provenance-timeline article > i { position:relative; width:17px; height:17px; margin:13px 0 0 8px; border:2px solid #a47237; border-radius:50%; background:#fffaf2; box-shadow:0 0 0 7px #fffaf2; }
.provenance-timeline article > div { position:relative; margin-left:15px; padding:0 115px 42px 30px; }
.provenance-timeline article > div > b { color:#a0733c; font-size:12px; letter-spacing:.22em; }.provenance-timeline h3 { margin:10px 0; font-size:23px; letter-spacing:.06em; }.provenance-timeline p { margin:0; color:#695949; font-size:15px; line-height:1.85; }
.provenance-timeline article > div > span { position:absolute; right:0; top:8px; padding:7px 12px; color:#9a703f; border:1px solid #d3b894; border-radius:20px; font-size:11px; }
.legend-section { background:#efe1ce; }
.legend-grid { width:min(100%,1250px); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.legend-grid article { position:relative; min-height:370px; padding:36px 34px; overflow:hidden; background:rgba(255,252,246,.9); border:1px solid rgba(159,112,55,.23); box-shadow:0 14px 36px rgba(78,49,18,.07); }
.legend-number { color:#c3a279; font-size:14px; font-weight:700; letter-spacing:.15em; }.legend-grid article > span { display:block; margin-top:58px; color:#a17239; font-size:13px; font-weight:700; letter-spacing:.2em; }.legend-grid h3 { margin:14px 0 15px; font-size:23px; line-height:1.5; }.legend-grid p { margin:0; color:#695949; font-size:15px; line-height:1.9; }.legend-grid article > i { position:absolute; right:-4px; bottom:-24px; color:rgba(157,105,43,.08); font:900 150px/1 "Ma Shan Zheng",cursive; }
.seals-section { background:linear-gradient(rgba(255,251,245,.94),rgba(247,236,221,.95)),url("images/landscape.png") center bottom/100% auto no-repeat; }
.seal-explorer { width:min(100%,1280px); margin:auto; display:grid; grid-template-columns:1fr 300px; background:#fffaf2; border:1px solid #d8c09e; box-shadow:0 15px 42px rgba(80,50,19,.08); }
.seal-map { position:relative; min-height:390px; overflow:hidden; background:linear-gradient(90deg,#d5ad70,#f0dbab 7%,#e6c58c 93%,#c99b5f); box-shadow:inset 0 0 35px rgba(91,56,18,.14); }
.seal-map::after { content:""; position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(0deg,transparent 0 3px,#76562d 4px); pointer-events:none; }
.seal-scroll-line { position:absolute; z-index:1; left:5%; right:5%; top:50%; display:flex; align-items:center; gap:16px; color:#846032; font-size:11px; letter-spacing:.15em; transform:translateY(-50%); }.seal-scroll-line i { flex:1; border-bottom:1px solid rgba(113,75,33,.35); }
.seal-mark { position:absolute; z-index:2; left:var(--x); top:var(--y); display:grid; place-items:center; width:55px; height:55px; padding:0; color:#a80e16; background:rgba(255,244,222,.15); border:4px double #b8171d; font:700 18px/1.05 "Noto Serif SC",serif; cursor:pointer; transform:translate(-50%,-50%) rotate(-4deg); transition:transform .25s,filter .25s; }.seal-mark.round { border-radius:50%; }.seal-mark.tall { width:45px; height:67px; }.seal-mark:nth-of-type(even){transform:translate(-50%,-50%) rotate(5deg)}.seal-mark:hover,.seal-mark.active { transform:translate(-50%,-50%) rotate(0) scale(1.14); filter:drop-shadow(0 5px 5px rgba(91,31,17,.23)); }
.seal-detail { padding:42px 34px; background:#2f2118; color:#f7ecdd; }.seal-detail > small { color:#bd9667; font-size:11px; letter-spacing:.22em; }.seal-detail > strong { display:block; margin:18px 0 30px; font-size:28px; letter-spacing:.1em; }.seal-detail dl { margin:0; }.seal-detail dl > div { padding:15px 0; border-top:1px solid rgba(255,255,255,.12); }.seal-detail dt { color:#b99a78; font-size:11px; letter-spacing:.12em; }.seal-detail dd { margin:7px 0 0; font-size:15px; }.seal-detail p { margin:25px 0 0; color:#bdae9f; font-size:12px; line-height:1.8; }
.seal-categories { width:min(100%,1100px); margin:32px auto 0; display:flex; justify-content:center; gap:36px; color:#6b5947; font-size:13px; }.seal-categories span { display:flex; align-items:center; gap:9px; }.seal-categories i { width:10px; height:10px; border:2px solid #b1181e; }

/* Interpretation */
.interpretation-page { background:#f3e8d7; }
.interpretation-main { min-height:900px; padding:30px 5% 90px; background:linear-gradient(rgba(250,244,234,.92),rgba(242,231,214,.96)),url("images/landscape.png") center top/cover fixed no-repeat; }
.interpretation-section-kicker { width:min(100%,1540px); margin:0 auto 16px; }
.interpretation-head { width:min(100%,1540px); margin:0 auto 38px; display:flex; align-items:flex-end; justify-content:space-between; }
.interpretation-head > div > span { color:#9b713b; font-size:13px; font-weight:700; letter-spacing:.25em; }.interpretation-head h1 { margin:14px 0 12px; font-size:47px; line-height:1.3; text-align:left; text-shadow:none; }.interpretation-head h1 em { color:#9a6830; font-style:normal; }.interpretation-head p { margin:0; color:#6b5a49; font-size:15px; }
.print-page { display:flex; align-items:center; gap:10px; padding:13px 22px; color:#65441e; background:rgba(255,251,244,.8); border:1px solid #ad814b; border-radius:25px; font:700 14px/1.2 "Noto Serif SC",serif; cursor:pointer; transition:.25s; }.print-page:hover { color:#fffaf1; background:#936b2d; }
.poem-nav { width:min(100%,1540px); margin:0 auto 24px; display:flex; direction:rtl; background:rgba(255,251,245,.78); border:1px solid #d8c2a2; }
.poem-nav button:nth-child(1){flex:0 0 155.72px}.poem-nav button:nth-child(2){flex:0 0 148.68px}.poem-nav button:nth-child(3){flex:0 0 147.75px}.poem-nav button:nth-child(4){flex:0 0 143.40px}.poem-nav button:nth-child(5){flex:0 0 144.87px}.poem-nav button:nth-child(6){flex:0 0 142.47px}.poem-nav button:nth-child(7){flex:0 0 146.29px}.poem-nav button:nth-child(8){flex:0 0 143.89px}
.poem-nav button { position:relative; min-width:0; height:96px; padding:15px 10px; color:#76624d; background:transparent; border:0; border-right:1px solid #dfceb5; font-family:"Noto Serif SC",serif; cursor:pointer; transition:.25s; }.poem-nav button:last-child{border-right:0}.poem-nav b { display:block; color:#b18a59; font-size:11px; letter-spacing:.12em; }.poem-nav span { display:block; margin-top:9px; overflow:hidden; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.poem-nav i { position:absolute; left:50%; bottom:0; width:0; height:4px; background:#9b6b2e; transform:translateX(-50%); transition:width .3s; }.poem-nav button:hover,.poem-nav button.active { color:#5d3c1b; background:#fffaf2; }.poem-nav button.active i { width:32px; }
.reading-workspace { width:min(100%,1540px); min-height:720px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; background:#fffaf3; border:1px solid #d4ba96; box-shadow:0 16px 42px rgba(74,46,17,.1); }
.facsimile-panel,.translation-panel { min-width:0; }
.facsimile-panel { padding:28px; background:#eee0c9; border-right:1px solid #c7aa82; }
.facsimile-panel > header { display:flex; justify-content:space-between; padding:0 5px 18px; color:#65431d; }.facsimile-panel > header span { font-size:15px; font-weight:800; letter-spacing:.15em; }.facsimile-panel > header small { font-size:11px; font-weight:600; }
.silk-sheet { min-height:625px; padding:18px; background:#dfbd89; border:1px solid rgba(116,78,38,.18); }
.facsimile-text { display:flex; flex-flow:column wrap; align-content:flex-end; gap:4px 14px; height:535px; direction:rtl; }.facsimile-text > * { direction:ltr; }
.character-button { width:58px; height:58px; padding:0; color:#302016; background:transparent; border:1px solid transparent; font:400 46px/1 "Ma Shan Zheng",cursive; cursor:zoom-in; transition:.22s; }.character-button:hover,.character-button.active { color:#7e321d; background:rgba(255,247,225,.4); border-color:rgba(136,74,42,.35); transform:scale(1.08); }.facsimile-text > span { width:24px; height:34px; color:#4b3020; font-size:24px; text-align:center; }
.translation-panel { display:flex; flex-direction:column; padding:28px 42px 34px; }
.translation-panel > header { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:8px; border-bottom:0; }.translation-panel > header small { color:#a37b49; font-size:11px; letter-spacing:.16em; }.translation-panel h2 { margin:0; color:#3d2b1e; font-size:24px; line-height:1.3; letter-spacing:.12em; }.translation-panel > header > span { color:#9a713e; font-size:12px; letter-spacing:.2em; }
.facsimile-panel > header,.translation-panel > header { box-sizing:border-box; height:52px; }
.transcription-text { flex:1; display:flex; align-items:center; min-height:520px; margin-top:0; padding:42px 38px; color:#423226; background:linear-gradient(135deg,rgba(244,231,210,.76),rgba(255,251,244,.45)); border-top:1px solid #dec6a4; border-bottom:1px solid #dec6a4; font-size:25px; line-height:2.35; letter-spacing:.14em; text-align:center; }.transcription-text p { width:100%; margin:0; }.transcription-text p span { display:block; }
.transcription-text.compact-text { font-size:19px; }
.transcription-text.dense-text { font-size:17px; }
.technique-note { padding:24px 26px; background:#f2e4d1; border-left:3px solid #9e6e32; }.technique-note > small { color:#987043; font-size:11px; font-weight:700; letter-spacing:.18em; }.technique-note > div { display:grid; grid-template-columns:76px 1fr; align-items:center; gap:22px; margin:18px 0; }.technique-note b { display:grid; place-items:center; width:72px; height:72px; color:#3d2518; background:#e7cc9b; font:400 55px/1 "Ma Shan Zheng",cursive; }.technique-note p { margin:0; color:#5f4d3d; font-size:14px; line-height:1.8; }.technique-note > strong { display:block; padding-top:15px; border-top:1px solid #d6b98f; color:#8a5d27; font-size:13px; font-weight:700; }
.interpretation-actions { margin:48px auto 0; display:flex; justify-content:center; gap:20px; }.interpretation-actions a { min-width:170px; padding:14px 24px; color:#67451f; border:1px solid #ae824c; border-radius:27px; text-align:center; text-decoration:none; font-weight:700; transition:.25s; }.interpretation-actions a:hover { color:#fffaf1; background:#936b2d; }
.character-dialog { width:520px; padding:0; overflow:visible; color:#3c2a1e; background:#f8eddc; border:1px solid #a9783e; box-shadow:0 25px 80px rgba(35,22,12,.38); }.character-dialog::backdrop { background:rgba(33,25,18,.66); backdrop-filter:blur(5px); }.dialog-close { position:absolute; right:-18px; top:-18px; width:38px; height:38px; color:#fff; background:#7c552b; border:0; border-radius:50%; font-size:24px; cursor:pointer; }.enlarged-character { height:360px; display:grid; place-items:center; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(108,72,31,.08) 4px),#e7ca94; font:400 270px/1 "Ma Shan Zheng",cursive; }.dialog-technique { padding:28px 34px 32px; }.dialog-technique span { color:#996b34; font-size:12px; font-weight:700; letter-spacing:.2em; }.dialog-technique p { margin:13px 0 0; font-size:15px; line-height:1.85; }

/* Full-scroll segment selector */
.scroll-selector { width:min(100%,1540px); margin:0 auto 24px; }
.scroll-selector-head { display:flex; align-items:baseline; gap:18px; margin-bottom:10px; color:#68481f; }
.scroll-selector-head span { font-size:14px; font-weight:800; letter-spacing:.16em; }
.scroll-selector-head small { color:#8e775c; font-size:11px; }
.scroll-overview { position:relative; display:flex; justify-content:center; overflow:hidden; background:#d8b574; border:1px solid #b48b54; box-shadow:0 8px 25px rgba(73,43,14,.12); }
.scroll-composite { display:flex; align-items:stretch; direction:rtl; gap:0; width:max-content; height:200px; min-height:200px; max-height:200px; margin:0; overflow:hidden; }
.scroll-segment { position:relative; isolation:isolate; flex:none; height:200px!important; min-height:200px; max-height:200px; margin:0; padding:0; overflow:hidden; background:#dfbd89; border:0; cursor:pointer; }
.scroll-segment img { display:block; width:auto; max-width:none; height:200px!important; min-height:200px; max-height:200px; object-fit:contain; }
.scroll-segment b { position:absolute; left:50%; bottom:8px; z-index:2; display:grid; place-items:center; width:30px; height:23px; color:#fff8e9; background:rgba(57,31,13,.68); font:700 10px/1 "Noto Serif SC",serif; transform:translateX(-50%); }
.scroll-segment::after { content:""; position:absolute; inset:4px; border:2px solid transparent; transition:.2s; }
.scroll-segment:hover::after,.scroll-segment.active::after { border-color:#8d311f; box-shadow:inset 0 0 0 1px rgba(255,248,219,.9); }
.scroll-overview .poem-nav { position:absolute; right:0; top:0; width:1173.07px; height:200px; margin:0; direction:rtl; background:transparent; border:0; }
.scroll-overview .poem-nav button { height:auto; padding:8px; direction:ltr; color:#fff8e9; background:rgba(50,30,12,.06); border-color:rgba(255,250,233,.42); text-shadow:0 1px 5px #27170a; }
.scroll-overview .poem-nav button::after { content:""; position:absolute; inset:5px; border:2px solid transparent; transition:.25s; }
.scroll-overview .poem-nav b { position:absolute; left:50%; bottom:8px; top:auto; z-index:1; display:grid; place-items:center; width:30px; height:23px; color:#fff8e9; background:rgba(57,31,13,.68); font-size:10px; transform:translateX(-50%); }
.scroll-overview .poem-nav i { display:none; }
.scroll-overview .poem-nav button:hover,.scroll-overview .poem-nav button.active { color:#fff8e9; background:rgba(255,248,220,.12); box-shadow:inset 0 0 0 3px #8d311f; }
.scroll-overview .poem-nav button.active::after { border-color:rgba(255,248,219,.9); }
.silk-sheet { padding:18px; }
.facsimile-crop { min-height:587px; background:#dfbd89 url("images/01.jpg") no-repeat center/contain; box-shadow:none; }
.transcription-character { display:inline; width:auto; height:auto; margin:0; padding:2px 3px; color:inherit; background:transparent; border:0; border-bottom:1px solid transparent; border-radius:3px; font:inherit; letter-spacing:inherit; cursor:zoom-in; }
.transcription-character:hover,.transcription-character.active { color:#8c331e; background:#f0ddc2; border-color:transparent transparent #9f6841; transform:none; }
.dialog-technique strong { display:block; margin-top:18px; padding-top:15px; color:#8a5d27; border-top:1px solid #d6b98f; font-size:13px; }

@media print {
  @page { margin:14mm; }
  .nav,.scroll-selector,.print-page,.interpretation-actions,.site-footer,.page-transition,.dialog-close { display:none!important; }
  body,.interpretation-page,.interpretation-main { min-width:0; padding:0; color:#000; background:#fff!important; }
  .interpretation-head { margin:0 0 10mm; }.interpretation-head h1 { font-size:26pt; }
  .reading-workspace { grid-template-columns:1fr 1fr; border:1px solid #777; box-shadow:none; break-inside:avoid; }
  .facsimile-panel { padding:8mm; }.silk-sheet { min-height:170mm; padding:8mm; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .facsimile-text { height:150mm; }.character-button { width:11mm;height:11mm;font-size:28pt; }
  .facsimile-crop { min-height:154mm; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .transcription-character { width:auto;height:auto;font-size:13pt; }
  .translation-panel { padding:8mm; }.transcription-text { font-size:13pt; }.technique-note { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

@media (max-width:1200px) { .brand{font-size:40px} nav a{font-size:18px;padding-left:10px;padding-right:10px} h1{font-size:43px}.facts{width:88%}.facts article{padding:0 15px;gap:12px}.cards{gap:10px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important} }