/* ---------- Fonts (Noto Serif SC, SIL OFL — subset to the characters on this page) ---------- */
@font-face{font-family:"WTG Serif";font-weight:400;font-display:swap;src:url(../fonts/NotoSerifSC-Regular.woff) format("woff")}
@font-face{font-family:"WTG Serif";font-weight:600;font-display:swap;src:url(../fonts/NotoSerifSC-SemiBold.woff) format("woff")}
@font-face{font-family:"WTG Serif";font-weight:700;font-display:swap;src:url(../fonts/NotoSerifSC-Bold.woff) format("woff")}
@font-face{font-family:"WTG Serif";font-weight:900;font-display:swap;src:url(../fonts/NotoSerifSC-Black.woff) format("woff")}

/* ---------- Tokens, taken from the Figma file ---------- */
:root{
  --paper:#f3e6d2;
  --ink:#28221b;
  --ink-deep:#0b0a06;
  --cinnabar:#b5331d;
  --brown:#6e5945;
  --gold:#b58755;
  --u:.3385px;            /* 1 design px; set precisely by JS */
  --vh:100vh;             /* real viewport height; set by JS */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"WTG Serif","Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:none;-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
b{font-weight:inherit}
[hidden]{display:none!important}

/* language switching: both versions live in the markup */
html:not([lang="en"]) .en{display:none!important}
html[lang="en"] .zh{display:none!important}

.wx-thumb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* rice paper stays put while pages move over it */
.paper{position:fixed;inset:0;z-index:-1;overflow:hidden}
.paper img{width:100%;height:100%;object-fit:cover}

/* ---------- Page + stage: each page is the 1152×2048 Figma frame, scaled to fit the screen ---------- */
.page{position:relative;height:var(--vh);overflow:hidden}

/* Paged mode (set by JS): one swipe = one page. Nothing scrolls; pages slide. */
html.fp,html.fp body{height:100%;overflow:hidden;overscroll-behavior:none}
html.fp body{position:fixed;inset:0;touch-action:none}
html.fp main{position:absolute;left:0;top:0;width:100%;will-change:transform}
.stage{
  position:absolute;left:50%;top:50%;
  width:calc(1152*var(--u));height:calc(2048*var(--u));
  transform:translate(-50%,-50%);
}
.a{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u))}
.a > img, img.a{width:calc(var(--w)*var(--u));height:auto}
[style*="--fs"]{font-size:calc(var(--fs)*var(--u))}

.t{line-height:1.5}
.c{text-align:center}
.semi{font-weight:600}
.bold{font-weight:700}
.black{font-weight:900}
.red,.red *{color:var(--cinnabar)}
b.red{color:var(--cinnabar)}
.brown{color:var(--brown)}
.footer{color:#383029;letter-spacing:.17em;line-height:1.4}

.vline{position:absolute;display:block;width:max(1px,calc(2*var(--u)));height:calc(var(--h)*var(--u))}
.vline.gold{background:var(--gold)}
.vline.red{background:var(--cinnabar);width:max(1px,calc(1.3*var(--u)))}

/* ---------- 封面 ---------- */
.cover-t1{font-weight:700;color:#383029;letter-spacing:.17em;line-height:1.4}
.cover-t2{font-weight:600;color:#665c4f;letter-spacing:.36em;line-height:1.4}
.cue{
  position:absolute;left:50%;top:calc(50% + 90*var(--u));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.3em;color:var(--brown);opacity:0;
}
.cue i{width:1px;height:28px;background:linear-gradient(var(--brown),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ink-wipe reveal used for the calligraphy (brush direction: upper-left to lower-right) */
.cover-wan{
  --m:0;
  -webkit-mask-image:linear-gradient(118deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
          mask-image:linear-gradient(118deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:calc(100% - var(--m)*1%) 0;mask-position:calc(100% - var(--m)*1%) 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ---------- 壹 ---------- */
.p1-num .n{line-height:1.12;letter-spacing:-.018em;white-space:nowrap}
.p1-num .wan{display:inline-block;font-size:.8em;margin-left:.06em;letter-spacing:0}
html[lang="en"] .p1-num .wan{font-size:.36em;margin-left:.25em;font-weight:700}
.p1-num .u{line-height:1.3;color:var(--ink);letter-spacing:.12em;margin-left:calc(6*var(--u))}
html[lang="en"] .p1-num .u{letter-spacing:.02em}
.p1-fan{
  --a:0;
  /* fan opens around its hinge, like the real thing */
  -webkit-mask-image:conic-gradient(from -102deg at 50.6% 89%,#000 calc(var(--a)*1deg),transparent calc(var(--a)*1deg + .6deg));
          mask-image:conic-gradient(from -102deg at 50.6% 89%,#000 calc(var(--a)*1deg),transparent calc(var(--a)*1deg + .6deg));
}
.p1-poem p{line-height:1.5}
html[lang="en"] .p1-poem{font-size:calc(28*var(--u))}
.p1-stat .t{line-height:1.25}
.count{font-variant-numeric:tabular-nums}

/* ---------- 貳 ---------- */
.p2-title p{line-height:1.5}
.p2-boywrap{height:calc(938*var(--u))}
.p2-boy{width:100%;height:100%;object-fit:contain}
.p2-body p{line-height:calc(70*var(--u))}
html[lang="en"] .p2-body{font-size:calc(40*var(--u))}
html[lang="en"] .p2-title{font-size:calc(60*var(--u))}
.p2-why{display:inline-block}

/* ---------- 參 ---------- */
.p3-title p{line-height:1.5}
html[lang="en"] .p3-title{font-size:calc(80*var(--u))}
.p3-stats{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:calc(135*var(--u))}
.p3-stats .vline{position:static;height:calc(96*var(--u));margin-top:calc(14*var(--u))}
.stat-row{display:flex;align-items:baseline;justify-content:center;gap:calc(12*var(--u));white-space:nowrap}
.stat-row .n{line-height:1.22}
html[lang="en"] .stat-row .u{white-space:normal;font-size:calc(30*var(--u));line-height:1.25;max-width:calc(300*var(--u))}
.tile{position:absolute}
.tile img.pic{width:100%;height:auto}
.stamp{position:absolute;width:calc(53*var(--u));height:calc(54*var(--u))}
.stamp-cap{position:absolute;font-size:calc(24*var(--u));font-weight:600;color:var(--brown);text-align:center;white-space:nowrap;line-height:1}

/* ---------- 肆 ---------- */
.inkmask{
  --r:140;  /* ink spreading from the centre; JS animates 0 → 140 */
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at var(--mx,50%) var(--my,55%),#000 calc(var(--r)*1%),transparent calc(var(--r)*1% + 18%));
          mask-image:radial-gradient(ellipse 62% 58% at var(--mx,50%) var(--my,55%),#000 calc(var(--r)*1%),transparent calc(var(--r)*1% + 18%));
}
.p4-label{letter-spacing:.17em;line-height:1.32}
.p4-big{line-height:1.15;white-space:nowrap}
.p4-big .grad{
  background:linear-gradient(180deg,#b6251e 0%,#ce2c23 22%,#df4936 40%,#d93b2b 50%,#c62a21 67%,#b6251e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(calc(1.4*var(--u)) calc(2.8*var(--u)) 0 rgba(156,43,32,.55));
}
.p4-big .ink-c{color:var(--ink)}
html[lang="en"] .p4-big .ink-c{font-size:calc(70*var(--u))}
.p4-title{line-height:1.9}
html[lang="en"] .p4-title{font-size:calc(66*var(--u))}
.p4-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;text-align:center}
.p4-stats > div p:first-child{line-height:1.11;white-space:nowrap}
.p4-stats small{font-size:calc(42*var(--u));font-weight:600;margin-left:calc(5*var(--u))}
.p4-stats > div p + p{line-height:1.23}
.p4-stats .vline{position:static;height:calc(121*var(--u));margin-top:calc(9*var(--u))}

/* ---------- 伍 长卷 ---------- */
/* ---------- 伍 A/B/C: on-site photos. Resting state is the Figma grid; the reel plays over it ---------- */
.rl-head{display:flex;justify-content:space-between;align-items:center;color:#a82b1b;font-size:calc(32*var(--u));line-height:1.5}
.rl-head .n{font-size:calc(30*var(--u));font-variant-numeric:tabular-nums}
.rl-title{color:#291f16;font-weight:700;font-size:calc(86*var(--u))}
.rl-title p{line-height:1.5}
html[lang="en"] .rl-title{font-size:calc(70*var(--u))}
html[lang="en"] .rl-title p{line-height:1.3}
/* the deck: one big card in front, the next one peeking in from the right */
.car{position:absolute;left:calc(-1*var(--gx,0px));width:calc(1152*var(--u) + 2*var(--gx,0px));overflow:hidden;touch-action:none;cursor:grab}
.car:active{cursor:grabbing}
.car-track{position:absolute;top:0;bottom:0;left:calc(72*var(--u) + var(--gx,0px))}
.car-card{
  position:absolute;top:0;bottom:0;width:calc(960*var(--u));margin:0;
  padding:calc(14*var(--u));border-radius:calc(34*var(--u));
  background:linear-gradient(155deg,#8f6a3e 0%,#6e4f2e 55%,#5a3f24 100%);--dim:0;
  box-shadow:inset 0 0 0 1px rgba(233,200,140,.45),0 0 0 1px rgba(60,40,20,.5),0 calc(24*var(--u)) calc(50*var(--u)) calc(-10*var(--u)) rgba(80,50,20,.38);
}
.car-card .ph{position:relative;width:100%;height:100%;border-radius:calc(22*var(--u));overflow:hidden;background:#3a2e24}
.car-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;will-change:transform}
.car-card .ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(30,18,8,.28));pointer-events:none}
.car-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(243,230,210,var(--dim));pointer-events:none}
.car-no{
  position:absolute;left:calc(44*var(--u));bottom:calc(36*var(--u));z-index:1;
  color:#fff;font-size:calc(30*var(--u));font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.car-ct{position:absolute;right:0;top:calc(2*var(--u));color:var(--brown);font-size:calc(32*var(--u));font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.car-ct b{font-weight:900;color:var(--cinnabar);display:inline-block;font-size:1.3em}
.car-info{height:calc(300*var(--u))}
.car-info .ci{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.car-info .ci:not(.on) > *{opacity:0}
.car-info .era{display:inline-block;background:var(--cinnabar);color:#fbeee0;font-weight:700;font-size:calc(32*var(--u));line-height:1;padding:calc(12*var(--u)) calc(18*var(--u));border-radius:calc(6*var(--u))}
.car-info .nm{font-weight:900;color:var(--ink);font-size:calc(92*var(--u));line-height:1.25;margin-top:calc(18*var(--u));letter-spacing:.02em}
html[lang="en"] .car-info .nm{font-size:calc(72*var(--u));line-height:1.15;letter-spacing:0}
.car-info .ln{font-weight:600;color:var(--ink);font-size:calc(40*var(--u));line-height:1.5;margin-top:calc(12*var(--u))}
html[lang="en"] .car-info .ln{font-size:calc(36*var(--u));line-height:1.4}
.car-bars{display:flex;align-items:center;gap:calc(12*var(--u))}
.car-bars button{flex:0 0 calc(92*var(--u));height:calc(40*var(--u));display:flex;align-items:center}
.car-bars i{display:block;width:100%;height:calc(6*var(--u));min-height:2px;border-radius:9px;background:var(--cinnabar);transform-origin:0 50%;transform:scaleX(0)}
.car-bars button{position:relative}
.car-bars button::after{content:"";position:absolute;left:0;right:0;top:50%;height:calc(6*var(--u));min-height:2px;margin-top:calc(-3*var(--u));border-radius:9px;background:rgba(110,89,69,.22);z-index:-1}
.car-hint{margin-left:auto;display:flex;align-items:center;gap:calc(12*var(--u));color:var(--brown);font-size:calc(26*var(--u));letter-spacing:.1em}
.car-hint svg{width:calc(56*var(--u));height:calc(17*var(--u));animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(10*var(--u)))}}
@media (prefers-reduced-motion:reduce){.car-hint svg{animation:none}}

/* ---------- 陸 ---------- */
.p6-title p{line-height:1.13}
.p6-l1{padding-left:calc(118*var(--u))}
.p6-l2{text-align:right}
html[lang="en"] .p6-title{font-size:calc(96*var(--u))}
.p6-qhd{color:#fff;line-height:1.17;pointer-events:none}
html[lang="en"] .p6-qhd{font-size:calc(22*var(--u));writing-mode:vertical-rl;margin:auto;letter-spacing:.2em;top:calc(698*var(--u))!important}
.city{position:absolute;width:calc(350*var(--u));text-align:center;font-weight:700;color:var(--ink)}
.city .nm{font-size:calc(36*var(--u));line-height:1.22}
.city .dt{font-size:calc(30*var(--u));line-height:1.33}
html[lang="en"] .city .dt{font-size:calc(26*var(--u))}
.p6-note{line-height:1.33}
.card{
  position:absolute;width:calc(508*var(--u));
  background:rgba(181,51,29,.18);border:1px solid rgba(181,51,29,.1);border-radius:calc(19.4*var(--u));
  padding:calc(16*var(--u)) calc(24*var(--u)) 0 calc(33*var(--u));
}
.card .hd{display:flex;align-items:center;gap:calc(14.6*var(--u));height:calc(71.6*var(--u))}
.card .hd img{width:calc(121.5*var(--u));height:calc(71.6*var(--u));object-fit:contain}
.card .hd p{font-size:calc(48.6*var(--u));font-weight:700}
.card .bd{margin-top:calc(36*var(--u));font-size:calc(32*var(--u));font-weight:600;color:#261f17;text-align:center;line-height:calc(44*var(--u))}
.card .bd b{color:#b82e1a}
html[lang="en"] .card .bd{font-size:calc(28*var(--u));line-height:calc(40*var(--u))}
html[lang="en"] .card .hd p{font-size:calc(42*var(--u))}

/* ---------- 柒 ---------- */
.p7-title p{line-height:1.72}
html[lang="en"] .p7-title{font-size:calc(70*var(--u))}
html[lang="en"] .p7-title p{line-height:1.6}
.p7-cols{display:flex;color:var(--ink);text-align:center}
.p7-cols > div{width:calc(var(--cw)*var(--u));display:flex;flex-direction:column;gap:calc(11*var(--u))}
.p7-cols p:first-child{line-height:1.3}
.p7-cols p + p{line-height:calc(46*var(--u))}
html[lang="en"] .p7-cols p:first-child{font-size:calc(36*var(--u))}
html[lang="en"] .p7-cols p + p{font-size:calc(28*var(--u));line-height:calc(40*var(--u))}
.p7-fmt p:first-child{line-height:1.35}
.p7-fmt p + p{line-height:1.35;margin-top:calc(10*var(--u))}
html[lang="en"] .p7-fmt p{letter-spacing:.04em!important}

/* ---------- 捌 ---------- */
.p8-title{color:var(--ink-deep);letter-spacing:.07em}
.p8-title p{line-height:1.44}
html[lang="en"] .p8-title{font-size:calc(92*var(--u));letter-spacing:0}
html[lang="en"] .p8-title p{line-height:1.55}
html[lang="en"] .p8-title p:first-child{padding-top:calc(30*var(--u))}
.p8-sign{display:flex;align-items:center;justify-content:center;gap:calc(17*var(--u));color:#3b2e21;line-height:1.43}
.p8-sign img{width:calc(53.3*var(--u));height:calc(53.3*var(--u))}
html[lang="en"] .p8-sign{font-size:calc(34*var(--u))}
.p8-bookwrap{perspective:calc(1600*var(--u))}
.p8-book{width:100%;height:auto;transform-origin:50% 72%}
.p8-contact{text-align:right;color:var(--ink-deep)}
.p8-contact p:first-child{line-height:1.45}
.p8-tel{display:block;line-height:1.45;margin-top:calc(8*var(--u));white-space:nowrap}
.p8-tel .en{font-size:.6em}
.p8-contact p:last-child{margin-top:calc(30*var(--u));line-height:1.45}
html[lang="en"] .p8-contact p:last-child{font-size:calc(24*var(--u))}
.p8-qr{-webkit-touch-callout:default;user-select:auto;pointer-events:auto}
.p8-qrlabel{color:var(--ink-deep);line-height:1.3}

/* ---------- Chrome: language (top right), page ticks (right edge), swipe hint ---------- */
/* on wide screens these hug the page column instead of the window edge */
.ui{
  position:fixed;z-index:20;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  display:flex;gap:8px;
}
.ui-btn{
  height:34px;min-width:34px;padding:0 9px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:13px;font-weight:700;letter-spacing:.04em;
}
.ui-btn svg{width:15px;height:15px;flex:none}
.ui-lang{background:var(--cinnabar);color:#fbeee0;box-shadow:inset 0 0 0 2px rgba(251,238,224,.35)}
.ui-btn:focus-visible,.p8-tel:focus-visible,.dots button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.dots{
  position:fixed;z-index:20;right:3px;top:50%;transform:translateY(-50%);
  display:none;flex-direction:column;
}
html.fp .dots{display:flex}
.dots button{width:14px;height:16px;display:flex;align-items:center;justify-content:flex-end}
.dots button i{display:block;width:5px;height:1.5px;background:var(--brown);opacity:.45;transition:width .35s,opacity .35s,background-color .35s}
.dots button[aria-current="true"] i{width:11px;height:2px;opacity:1;background:var(--cinnabar)}

.hint{
  position:fixed;z-index:20;left:50%;bottom:calc(6px + env(safe-area-inset-bottom));margin-left:-12px;
  width:24px;height:24px;color:var(--brown);display:none;pointer-events:none;
  animation:hint 1.8s ease-in-out infinite;
}
html.fp .hint{display:block}
.hint.corner{left:auto;margin-left:0;right:6px}
.hint.off{opacity:0;animation:none;transition:opacity .3s}
.hint svg{width:100%;height:100%}
@keyframes hint{0%,100%{transform:translateY(2px);opacity:.35}50%{transform:translateY(-4px);opacity:.9}}

@media (prefers-reduced-motion:reduce){
  .cue i,.hint{animation:none}
  }

/* English: proportional punctuation and a few size adjustments */
html[lang="en"] body{font-feature-settings:"palt"}
.nowrap{white-space:nowrap}
.en-small{font-size:.8em;letter-spacing:.06em}
html[lang="en"] .cover-t2{letter-spacing:.12em}
html[lang="en"] .card .hd p{font-size:calc(38*var(--u))}

/* screens wider than the 9:16 page: soften the cut edges of full-width illustrations into the paper */
html.wide .cover-land,html.wide .p2-boy{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

/* 伍: "selected" seal, stamped like the cover's 天工 seal */
.rl-seal{height:calc(170*var(--u));display:flex;align-items:center;justify-content:center;
  background:var(--cinnabar);color:#fbeee0;border-radius:calc(14*var(--u));transform:rotate(-6deg);
  box-shadow:inset 0 0 0 calc(6*var(--u)) var(--cinnabar),inset 0 0 0 calc(9*var(--u)) rgba(251,238,224,.75)}
.rl-seal .zh{display:flex;flex-direction:column;align-items:center;line-height:1.02;font-weight:900;font-size:calc(62*var(--u))}
.rl-seal .en b{font-weight:900;font-size:calc(27*var(--u));letter-spacing:.06em}
.rl-seal b{font-weight:inherit}
.rl-head{color:var(--cinnabar)!important;font-weight:700}
html[lang="en"] .rl-head{font-size:calc(28*var(--u))}
html[lang="en"] .rl-title{font-size:calc(58*var(--u))}
html[lang="en"] .rl-seal{width:calc(150*var(--u))!important;height:calc(150*var(--u));left:calc(910*var(--u))!important}
.rl-head{font-size:calc(34*var(--u))}
html[lang="en"] .rl-seal .en b{font-size:calc(21*var(--u));letter-spacing:.04em}