/* ==========================================================
   天青 Sky Celadon — One vessel, a thousand years
   ========================================================== */
/* ---------- self-hosted fonts (OFL) ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/cormorant.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(../fonts/cormorant-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300 400; font-display: swap;
  src: url(../fonts/dm-mono-400.woff2) format('woff2'); }
/* the brand seal needs one brush character in every language: a 1.4KB subset */
@font-face { font-family: 'Ma Shan Zheng'; font-style: normal; font-weight: 400; font-display: block;
  src: url(../fonts/seal-tian.woff2) format('woff2'); unicode-range: U+5929; }

@property --ink    { syntax: '<color>'; inherits: true; initial-value: #efe6d8; }
@property --muted  { syntax: '<color>'; inherits: true; initial-value: rgba(239,230,216,.62); }
@property --line   { syntax: '<color>'; inherits: true; initial-value: rgba(239,230,216,.18); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #e07a3c; }
@property --card   { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,.04); }

:root {
  --f-cn: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --f-brush: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  --f-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;
  --pad-x: clamp(20px, 3.6vw, 64px);
  --hdr-h: 88px;
  --tl-h: 112px;
  --era-h: clamp(92px, 15vh, 148px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- chapter themes ---------- */
body { --ink: #1b1712; --muted: rgba(27,23,18,.72); --line: rgba(27,23,18,.16); --card: rgba(255,255,255,.38); }
body.t-dark { --ink: #efe6d8; --muted: rgba(239,230,216,.70); --line: rgba(239,230,216,.16); --card: rgba(255,255,255,.035); }
body.t-0 { --accent: #e07a3c; }
body.t-1 { --accent: #315f51; }
body.t-2 { --accent: #3b6474; }
body.t-3 { --accent: #d65037; }
body.t-4 { --accent: #866725; }
body.t-5 { --accent: #2f5d50; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #18110c;
  color: var(--ink);
  font-family: var(--f-cn);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: --ink 1.2s var(--ease), --muted 1.2s var(--ease), --line 1.2s var(--ease), --accent 1.2s var(--ease), --card 1.2s var(--ease);
}
body:not(.is-touch), body:not(.is-touch) a, body:not(.is-touch) button { cursor: none; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
em { font-style: normal; }
::selection { background: var(--accent); color: #fff; }

/* ==========================================================
   LOADER
   ========================================================== */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; color: #efe6d8; }
.loader__half { position: absolute; left: 0; right: 0; height: 50.5%; background: #0f0a07; }
.loader__half--top { top: 0; }
.loader__half--bot { bottom: 0; background: #0f0a07 radial-gradient(ellipse 60% 90% at 50% 100%, rgba(224,122,60,.22), transparent 70%); }
.loader__inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 14px; }
.loader__vase { width: 110px; height: 190px; overflow: visible; }
.loader__vase path { fill: none; stroke: #e9c9a0; stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(224,122,60,.6)); }
.loader__seal { position: absolute; top: 72px; font-family: var(--f-brush); font-size: 34px; color: #b8322a; opacity: .9; }
.loader__title { font-size: 26px; letter-spacing: .5em; font-weight: 600; margin-top: 10px; }
.loader__title span { font-family: var(--f-en); font-style: italic; letter-spacing: .2em; font-weight: 300; opacity: .6; font-size: 18px; }
.loader__sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; opacity: .5; text-transform: uppercase; }
.loader__count { font-family: var(--f-en); font-size: 64px; font-weight: 300; line-height: 1; margin-top: 12px; color: #f0b27a; }
.loader__count i { font-size: 22px; font-style: italic; margin-left: 4px; opacity: .7; }

/* ==========================================================
   STAGE LAYERS
   ========================================================== */
.stage { position: fixed; inset: 0; overflow: hidden; }
.bgs, .bg { position: absolute; inset: 0; }
.bgs { z-index: 0; }
/* ---------- era mark: the dynasty, set above the vessel like a gallery plaque ---------- */
@property --rule { syntax: '<number>'; inherits: true; initial-value: 1; }
.era {
  --w: min(44vw, 560px);
  position: absolute; z-index: 4; left: 50%; top: var(--hdr-h); width: var(--w); margin-left: calc(var(--w) / -2);
  height: var(--era-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; user-select: none; text-align: center;
}
.era__word { display: block; font-family: var(--f-brush); font-size: calc(var(--era-h) * .84); line-height: 1; color: var(--accent); white-space: nowrap; }
.era.is-latin .era__word { font-family: var(--f-en); font-weight: 400; font-size: calc(var(--era-h) * .54); letter-spacing: .2em; margin-right: -.2em; text-transform: uppercase; color: var(--ink); }
.era__cap { display: flex; align-items: center; gap: 14px; margin-top: calc(var(--era-h) * .06); font-family: var(--f-cn); font-size: 12px; letter-spacing: .32em; color: var(--muted); white-space: nowrap; }
.era.is-latin .era__cap { font-family: var(--f-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.era__cap::before, .era__cap::after { content: ''; width: calc(var(--rule) * 44px); height: 1px; background: var(--accent); opacity: .8; }
.particles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vase-wrap {
  position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto;
  top: calc(var(--hdr-h) + var(--era-h)); bottom: var(--tl-h);
  width: min(54vh, 36vw); pointer-events: none;
}
/* the float moves an HTML box on the compositor; animating the SVG itself would repaint the whole vessel every frame */
.vase-float { width: 100%; height: 100%; will-change: transform; animation: vase-float 6.4s ease-in-out infinite alternate; }
.vase { width: 100%; height: 100%; overflow: visible; }
@keyframes vase-float { from { transform: translateY(0); } to { transform: translateY(-1.1%); } }
.vase-wrap { will-change: transform; }
.scenes { position: absolute; inset: 0; z-index: 5; }
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- backgrounds per era ---------- */
/* backgrounds swap instantly under the transition effect, so the idle ones are taken out entirely:
   their pans, fires and embers stop and their layers are released */
.bg { display: none; overflow: hidden; }
.bg.is-active { display: block; }

.bg-0 { background: radial-gradient(ellipse 80% 60% at 50% 110%, #5a2a12 0%, #2a1509 45%, #140d08 80%); }
.kiln-glow { position: absolute; left: 50%; bottom: -30vh; width: 90vw; height: 60vh; margin-left: -45vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,140,60,.5), rgba(210,80,30,.18) 55%, transparent); filter: blur(30px); animation: flicker 3.2s ease-in-out infinite alternate; }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55)); }
/* origins · the potter's craft from an old woodblock book, its lines glowing like embers in the kiln, unrolled slowly */
.kiln-craft { position: absolute; left: 0; right: 0; top: 9vh; height: 64vh; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent); }
.kiln-craft__fade { height: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 34%, #000 46%, #000 64%, rgba(0,0,0,.4) 74%, rgba(0,0,0,.4) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) 34%, #000 46%, #000 64%, rgba(0,0,0,.4) 74%, rgba(0,0,0,.4) 100%); }
.kiln-craft img { display: block; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity 2s ease;
  will-change: transform; animation: scrollPan 170s ease-in-out infinite alternate; }
.kiln-craft img.is-in { opacity: 1; animation: scrollPan 170s ease-in-out infinite alternate, kilnLight 3.4s ease-in-out infinite alternate; }
@keyframes kilnLight { from { filter: brightness(.8); } to { filter: brightness(1.12); } }
/* origins · everyday vessels drift past in three depths (transform-only, paused when idle or off-screen) */
.drift { position: absolute; inset: 0; pointer-events: none; }
.drift__defs { position: absolute; }
.drift__row { position: absolute; left: 0; display: flex; width: 200%; height: 12.5vw; will-change: transform; animation: driftRow linear infinite; }
.drift__row svg { flex: 0 0 50%; height: 100%; }
.drift__row use { fill: #3a1f11; stroke: rgba(255,160,90,.45); stroke-width: 1.2; }
.drift__row.r1 { bottom: 42vh; opacity: .35; animation-duration: 210s; }
.drift__row.r2 { bottom: 24vh; opacity: .5; animation-duration: 140s; }
.drift__row.r3 { bottom: 9vh; opacity: .7; animation-duration: 90s; }
@keyframes driftRow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes flicker { 0%{opacity:.7; transform:scale(1)} 30%{opacity:1} 55%{opacity:.8; transform:scale(1.04)} 100%{opacity:1; transform:scale(.98)} }

.bg-1 { background: linear-gradient(180deg, #dfe8e1 0%, #c3d4c9 45%, #a9bfb2 100%); }
/* rise · Guo Xi's Early Spring (1072): the camera climbs slowly from the stream to the peak in the mist */
.spring { --ph: 100vh; position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.spring__fade { position: absolute; top: 0; bottom: 0; left: 18vw; right: 18vw;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 32%, #000 70%, transparent); }
.spring img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 2s ease; filter: grayscale(.55) sepia(.15) contrast(1.05);
  will-change: transform; animation: springRise 120s ease-in-out infinite alternate; }
.spring img.is-in { opacity: .62; }
@keyframes springRise { from { transform: translateY(calc(var(--ph) - 100%)); } to { transform: translateY(-4%); } }
.spring-credit { position: absolute; right: clamp(16px, 4vw, 64px); bottom: calc(11vh + 6px); max-width: 30em; margin: 0; text-align: right;
  font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: rgba(34,52,44,.8); text-shadow: 0 0 6px #d4e1d8, 0 0 12px #d4e1d8; }
.spring-credit em { font-style: italic; }
.mist { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; background: radial-gradient(closest-side, #f4f7f3, transparent); animation: drift 26s ease-in-out infinite alternate; }
.m1 { width: 70vw; height: 30vh; left: -10vw; top: 8vh; }
.m2 { width: 60vw; height: 26vh; right: -14vw; top: 40vh; animation-duration: 34s; }
.m3 { width: 80vw; height: 30vh; left: 10vw; bottom: -8vh; background: radial-gradient(closest-side, rgba(95,138,121,.35), transparent); animation-duration: 40s; }
@keyframes drift { to { transform: translateX(8vw) translateY(-2vh); } }

/* zenith · the sky-blue of Ru ware: a pale, rain-washed sky with one soft break of light */
.bg-2 { background: linear-gradient(180deg, #e8eef0 0%, #d6e2e5 50%, #bfd0d4 100%); }
.sky-light { position: absolute; left: 50%; top: -20vh; width: 90vw; height: 80vh; margin-left: -45vw; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.75), transparent 70%); animation: drift 22s ease-in-out infinite alternate; }

/* zenith · two Northern Song hand-scrolls of the same years, panned slowly like a scroll being unrolled:
   Wang Ximeng's blue-green mountains far off, Zhang Zeduan's Bianjing (rainbow bridge → camel train at the gate) close by */
.scroll-land, .scroll-city { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; }
.scroll-land img, .scroll-city img { display: block; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity 1.6s ease;
  will-change: transform; animation: scrollPan 220s ease-in-out infinite alternate; }
.scroll-land img.is-in, .scroll-city img.is-in { opacity: 1; }
.scroll-land { top: 16vh; height: 52vh; mix-blend-mode: multiply; opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 38%, #000 70%, transparent); }
.scroll-land img { animation-duration: 300s; filter: saturate(.8); }
.scroll-city { bottom: 11vh; height: 40vh; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 86%, transparent); }
/* the painting stays quiet under the text column and comes up to full strength towards the right */
.scroll-city__fade { height: 100%; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 36%, #000 56%); mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 36%, #000 56%); }
.scroll-credit { position: absolute; right: clamp(16px, 4vw, 64px); bottom: calc(11vh + 6px); max-width: 30em; margin: 0; text-align: right;
  font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: rgba(34,50,58,.82); text-shadow: 0 0 6px #e4ecee, 0 0 12px #e4ecee; }
.scroll-credit em { font-style: italic; }
/* the right-hand note sits over the busy city: give it the same frosted card as the kiln list */
#s2 .note { background: var(--card); padding: 10px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* start on the rainbow bridge (right end) and unroll leftwards to the city gate, as a hand-scroll is read */
@keyframes scrollPan { from { transform: translateX(calc(100vw - 100%)); } to { transform: translateX(0); } }

.bg-3 { background: radial-gradient(ellipse 90% 70% at 50% 100%, #3a0f06, #150a07 55%, #0b0807); }
/* plunder · the Qingming gate of Bianjing burns, drawn by a WebGL pass (war.js) */
.burn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.bg-3.burn-ready .burn { opacity: 1; }
/* no WebGL: the painting stays, darkened and scorched */
.bg-3.no-burn { background: linear-gradient(0deg, rgba(120,40,10,.55), transparent 60%), url(../img/war-bianjing.webp) center 40% / cover no-repeat; background-blend-mode: screen, normal; }
.bg-3.no-burn .burn { display: none; }
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffc070; box-shadow: 0 0 6px 1px rgba(255,120,40,.8);
  animation: ember var(--d) linear var(--delay) infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate(var(--dx), -90vh); opacity: 0; } }
.war-credit { position: absolute; right: clamp(16px, 4vw, 64px); bottom: calc(11vh + 6px); max-width: 30em; margin: 0; text-align: right; font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: rgba(240,220,205,.72); text-shadow: 0 0 6px #0b0706, 0 0 14px #0b0706; }
.war-credit span { display: none; }
.bg-3:not([data-act]) .c-a, .bg-3[data-act="a"] .c-a, .bg-3[data-act="b"] .c-b, .bg-3[data-act="c"] .c-c { display: block; }
/* keeps both text columns readable over the pictures */
.war-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,7,6,.88) 0%, rgba(11,7,6,.72) 30%, rgba(11,7,6,.25) 46%, rgba(11,7,6,.2) 60%, rgba(11,7,6,.7) 72%, rgba(11,7,6,.8) 100%), linear-gradient(180deg, rgba(11,7,6,.55), transparent 30%); }
/* the vessel stands in the firelight */
/* (no filter on .vase-wrap: a filter over the animated vessel made Chrome drop the layer every few frames) */
.war-glow { position: absolute; left: 0; right: 0; bottom: -10vh; height: 50vh; background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(212,71,45,.45), transparent 70%); animation: flicker 2.2s ease-in-out infinite alternate; }
.smoke { position: absolute; width: 90vw; height: 70vh; border-radius: 50%; filter: blur(80px); background: radial-gradient(closest-side, rgba(90,80,75,.35), transparent); animation: drift 22s ease-in-out infinite alternate; }
.s1 { left: -30vw; top: -10vh; } .s2 { right: -40vw; top: 20vh; animation-duration: 30s; }

/* today · a darkened museum hall: the few Ru pieces that survive light up one after another (30 s loop),
   and the vessel in the middle stands under its own case light */
.bg-4 { background: radial-gradient(ellipse 70% 60% at 50% 45%, #1c1a17, #0d0c0b 70%, #080807); }
.hall-pic { position: absolute; left: 71vw; right: 3vw; top: 63vh; bottom: 17vh; background: center / contain no-repeat; opacity: 0;
  filter: brightness(.95) contrast(1.05); mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 82%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 82%); }
.hall-pic.is-in.h-a { animation: hallA 30s ease-in-out infinite, hallZoom 30s linear infinite; }
.hall-pic.is-in.h-b { animation: hallB 30s ease-in-out infinite, hallZoom 30s linear infinite; }
.hall-pic.is-in.h-c { animation: hallC 30s ease-in-out infinite, hallZoom 30s linear infinite; }
.hall-pic.h-a { background-size: 84% auto; }
.hall-pic.h-b { background-size: auto 118%; }
@keyframes hallA { 0% { opacity: 0; } 5%, 28% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes hallB { 0%, 31% { opacity: 0; } 38%, 61% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes hallC { 0%, 64% { opacity: 0; } 71%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hallZoom { from { transform: scale(1.06); } to { transform: scale(.98); } }

.hall-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, transparent, rgba(8,8,7,.55)); }
/* the case light over the vessel, with dust drifting in the beam */
.hall-beam { position: absolute; left: 50%; top: -6vh; width: 34vw; height: 96vh; margin-left: -17vw; pointer-events: none;
  background: radial-gradient(ellipse 36% 100% at 50% 0%, rgba(255,236,200,.2), rgba(255,236,200,.06) 60%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.hall-credit { position: absolute; right: clamp(16px, 4vw, 64px); bottom: calc(11vh + 6px); max-width: 30em; margin: 0; text-align: right; font-size: 11.5px; line-height: 1.5; letter-spacing: .03em; color: rgba(236,228,214,.66); text-shadow: 0 0 6px #080807, 0 0 14px #080807; }
.hall-credit span { position: absolute; right: 0; bottom: 0; width: 30em; max-width: 80vw; opacity: 0; }
.hall-credit .c-a { animation: hallA 30s ease-in-out infinite; }
.hall-credit .c-b { animation: hallB 30s ease-in-out infinite; }
.hall-credit .c-c { animation: hallC 30s ease-in-out infinite; }
body.t-4.t-dark { --accent: #c9a45a; }
/* Sky Celadon · a gift of state: three honours on gold rules, then the wish */
.honours { list-style: none; margin: 18px 0 0; padding: 0; max-width: 30em; }
.honours li { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(160,120,50,.35); font-size: 13px; line-height: 1.5; color: var(--muted); }
.honours li:last-child { border-bottom: 1px solid rgba(160,120,50,.35); }
.honours b { font-family: var(--f-en); font-weight: 400; font-size: 17px; color: #8a6a2c; letter-spacing: .04em; }
html[lang="zh-CN"] .honours b, html[lang="zh"] .honours b { font-family: inherit; font-size: 15px; }
.wish { margin: 18px 0 22px; padding-left: 14px; border-left: 2px solid var(--accent); font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 30em; }
html[lang="en"] .wish { font-family: var(--f-en); font-style: italic; font-size: 18px; }
html[lang="en"] .honours li { grid-template-columns: 6.6em 1fr; }
/* short screens: the finale's left column tightens so the buttons clear the timeline */
@media (max-height: 800px) and (min-width: 901px) {
  #s5 .title { font-size: clamp(30px, 4.4vw, 52px); }
  #s5 .sub { margin-bottom: 6px; }
  #s5 .body { margin-bottom: 0; line-height: 1.6; }
  .honours { margin-top: 10px; }
  .honours li { padding: 4px 0; font-size: 12px; }
  .honours b { font-size: 14px; }
  html[lang="en"] .honours b { font-size: 15px; }
  .wish { margin: 10px 0 12px; font-size: 13.5px; }
  html[lang="en"] .wish { font-size: 15.5px; }
  #s5 .cta .btn { padding-top: 10px; padding-bottom: 10px; }
  #s5 .cta { display: flex; flex-wrap: wrap; gap: 10px; }
  #s5 .cta .btn { margin: 0; }
  #s5 .sub { display: none; }
  html[lang="en"] #s5 .title { font-size: clamp(28px, 3.3vw, 44px); }
  #s5 .cta .btn { padding-left: 16px; padding-right: 16px; }
}
/* Sky Celadon · the drawn meiping hands over to the photograph of the real piece, in the same place */
body.t-5 .vase-wrap { opacity: 0 !important; transition: opacity 1.4s ease .6s; }
/* Sky Celadon · a gift of state: the whole page is a painting of today — in a quiet modern home, the host offers
   the Floral Meiping in its box with both hands, and the guest reaches out with both hands to receive it.
   The drawn vessel steps aside for the one in the painting. */
.bg-5 { background: #ece6dc; }
.gift-scene { position: absolute; inset: 0; background: 62% 50% / cover no-repeat; opacity: 0; transition: opacity 1.8s ease .3s; transform-origin: 66% 50%; }
/* a keyframe fade, not a transition: the page is display:none until it becomes active, so a transition would never run */
.bg-5.is-active .gift-scene.is-in { opacity: 1; animation: giftIn 1.8s ease .2s both, giftPush 28s ease-in-out infinite alternate; }
@keyframes giftIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes giftPush { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* paper-light wash where the words sit, so the painting's own empty wall becomes the page */
.gift-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(236,230,220,.9) 0%, rgba(236,230,220,.7) 28%, rgba(236,230,220,0) 44%),
  linear-gradient(180deg, rgba(236,230,220,.5), transparent 20%, transparent 82%, rgba(236,230,220,.6)); }
body.t-5 .honours b { color: #8a6a2c; }
/* the painting's box and hands sit at 57–83vw: the shop cards become a slim column over the guest's dark coat at the far right */
@media (min-width: 901px) {
  #s5 .col-r { grid-column: 12 / 13; justify-self: end; width: 13.5vw; min-width: 170px; max-width: 210px; margin-right: -1vw; }
  #s5 .cats { grid-template-columns: 1fr; gap: 8px; }
  #s5 .cats li:last-child:nth-child(odd) { grid-column: auto; }
  #s5 .cats a { min-height: 0; padding: 12px 14px; background: rgba(28,24,20,.5); border-color: rgba(236,226,210,.22);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #efe6d8; }
  #s5 .cats a::after { display: none; }
  #s5 .cats b { font-size: 17px; margin-top: 4px; color: #efe6d8; }
  #s5 .cats em { font-size: 12px; color: rgba(239,230,216,.72); }
  #s5 .cats i, #s5 .cats .cat-n { color: rgba(239,230,216,.6); }
  #s5 .cats a:hover { border-color: #d4b06a; }
  /* the chapter mark gets a soft paper halo where it crosses the lid of the box */
  body.t-5 .era__word, body.t-5 .era__cap { text-shadow: 0 0 18px #ece6dc, 0 0 36px #ece6dc; }
  /* four characters instead of two: set the chapter mark smaller so it stays clear of the box */
  body.t-5 .era:not(.is-latin) .era__word { font-size: calc(var(--era-h) * .56); }
}
.vase-wrap { transition: opacity .6s ease; }

.bg-5 { background: linear-gradient(160deg, #f3eee6 0%, #ebe5da 50%, #ddd3c3 100%); }
.window-light { position: absolute; inset: -20%;
  background: repeating-linear-gradient(115deg, transparent 0 9vw, rgba(255,250,240,.55) 9vw 15vw, transparent 15vw 22vw);
  filter: blur(26px); opacity: .8; animation: drift 30s ease-in-out infinite alternate; }

/* ==========================================================
   VASE PARTS
   ========================================================== */
.vase .ring { fill: none; stroke: #3d2215; }
.vase .slip { fill: #e4b98f; opacity: .35; }
.vase .crackle { fill: none; stroke: #3c5a4c; stroke-width: .7; opacity: .45; }
.vase .crackle.gold { stroke: #8a6a2c; stroke-width: 1.1; opacity: .5; }
.vase .crackle.ru { stroke: #3f6a58; stroke-width: .45; opacity: .4; }
/* the carved plum branch: a lit face and a shadow a little below and to the right */
.vase .v-plum path { fill: none; stroke-linecap: round; }
.vase .plum-lit path { stroke: rgba(236,248,241,.42); }
.vase .plum-lit circle { fill: rgba(236,248,241,.4); }
.vase .plum-lit .core { fill: rgba(236,248,241,.62); }
.vase .plum-shade path { stroke: rgba(20,52,40,.26); }
.vase .plum-shade circle { fill: rgba(20,52,40,.24); }
.vase .gilt { fill: #c9a34e; }
.vase .turq { fill: #3f9e97; opacity: .8; }
.vase .fret { fill: none; stroke: #c9576f; stroke-width: 1.4; }
.vase .branch { fill: none; stroke: #6e4f33; stroke-width: 2.4; stroke-linecap: round; }
.vase .branch.thin { stroke-width: 1.4; }
.vase .leaf { fill: #5f8a55; opacity: .9; }
.vase .rose1 { fill: #e493a3; }
.vase .rose2 { fill: #d4677e; }
.vase .rose3 { fill: #a63d57; }
.vase .blue { fill: #6d88c4; }
.vase .rib { stroke: #000; stroke-opacity: .045; stroke-width: 1; }
.vase .band { fill: #7fa596; }
.vase .v-outline { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.t-dark .vase .v-outline { stroke: rgba(255,210,170,.35); }
.vase .v-sepia { fill: #9b6f3a; mix-blend-mode: multiply; }
.vase .v-cracks polyline, .vase .v-cracks path { fill: none; stroke: #120804; stroke-width: 2.2; stroke-linejoin: round; }
.vase .v-seams polyline { fill: none; stroke: #d9ae4c; stroke-width: 3.2; stroke-linejoin: round; stroke-dasharray: 520; }
.vase .staple rect, .vase .staple circle { fill: #b06a3a; stroke: #5d321a; stroke-width: .8; }
.vase .wood { fill: none; stroke: #6d4a28; stroke-width: 3; stroke-linejoin: round; }
.vase .wood.thin { stroke-width: 1.5; }
.vase .corner { fill: #4a3220; }
.vase .straw { stroke: #b88f4a; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.vase .tag rect { fill: #efe2c2; stroke: #8a6a3a; }
.vase .tag .hole { fill: #8a6a3a; }
.vase .tag text { font-family: var(--f-cn); font-size: 11px; font-weight: 600; fill: #7d2a1e; text-anchor: middle; letter-spacing: 1px; }
.vase .tag.is-latin text { font-family: var(--f-mono); font-size: 7.4px; font-weight: 400; letter-spacing: .5px; }
.vase .cup, .vase .bowl { fill: #eeeae3; }
.vase .cup-rim { fill: #d9d3c8; stroke: #fff; stroke-width: .8; }
.vase .band2 { fill: #7fa596; }

/* ==========================================================
   SCENES
   ========================================================== */
.scene {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center;
  padding: var(--hdr-h) var(--pad-x) var(--tl-h);
  visibility: hidden; pointer-events: none;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.scene::-webkit-scrollbar { display: none; }
.scene.is-active { visibility: visible; pointer-events: auto; }
.col-l { grid-column: 1 / 5; max-width: 480px; }
.col-r { grid-column: 9 / 13; justify-self: end; width: 100%; max-width: 380px; display: grid; gap: 18px; }

.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; white-space: nowrap; }
.k-num { color: var(--accent); font-size: 12px; }
.k-line { display: block; width: 44px; height: 1px; background: var(--accent); transform-origin: left; }

.title { font-weight: 900; font-size: clamp(38px, 4.3vw, 78px); line-height: 1.12; letter-spacing: .02em; margin-bottom: 18px; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ln > span { display: inline-block; will-change: transform; }
.sub { font-family: var(--f-en); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.5vw, 24px); color: var(--muted); margin-bottom: 22px; }
.sub .cn { display: inline-block; font-family: var(--f-cn); font-style: normal; font-weight: 600; font-size: .62em; letter-spacing: .28em; color: var(--accent); margin-right: 14px; vertical-align: .2em; }
.body { font-size: 15px; line-height: 2; color: var(--ink); opacity: .86; font-weight: 400; text-align: justify; }
.body em { font-family: var(--f-en); font-style: italic; font-size: 1.2em; color: var(--accent); }

.steps { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 26px; border-top: 1px solid var(--line); }
.steps li { padding: 12px 0 0; font-size: 13px; letter-spacing: .12em; display: grid; gap: 6px; border-right: 1px solid var(--line); padding-left: 10px; }
.steps li:last-child { border-right: 0; }
.steps li i { font-style: normal; font-family: var(--f-brush); color: var(--accent); font-size: 18px; }
.steps--gold li i { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; }

.quote { margin-top: 26px; padding: 18px 0 0 24px; border-top: 1px solid var(--line); position: relative; font-size: 17px; letter-spacing: .08em; line-height: 1.8; }
.quote > span { position: absolute; left: -2px; top: 6px; font-family: var(--f-en); font-size: 48px; color: var(--accent); line-height: 1; }
.quote small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 6px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags li { font-size: 12px; letter-spacing: .15em; padding: 7px 14px; border: 1px solid var(--accent); color: var(--accent); border-radius: 100px; }

/* right column */
.stat { display: grid; grid-template-columns: auto auto 1fr; align-items: end; column-gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stat b { font-family: var(--f-en); font-weight: 300; font-size: clamp(52px, 5vw, 84px); line-height: .85; letter-spacing: -.02em; color: var(--ink); }
.stat sup { font-size: 14px; color: var(--accent); align-self: start; margin-top: 6px; }
.stat p { font-size: 13px; line-height: 1.5; padding-left: 14px; letter-spacing: .06em; }
.stat p em { display: block; font-family: var(--f-en); font-style: italic; font-size: 14px; color: var(--muted); letter-spacing: 0; }

.card { background: var(--card); border: 1px solid var(--line); padding: 16px 18px 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card figcaption { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .14em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.card figcaption em { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.card--dark { background: rgba(0,0,0,.25); }

.note { font-size: 12.5px; line-height: 1.8; color: var(--muted); padding-left: 14px; border-left: 2px solid var(--accent); }
.note em { font-family: var(--f-en); font-style: italic; font-size: 1.15em; color: var(--ink); }

.chart { width: 100%; height: 100px; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-dasharray: 2 4; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 600; filter: drop-shadow(0 0 6px var(--accent)); }
.chart-dot { fill: var(--accent); }
.chart-axis { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-top: 8px; }

.kilns li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.kilns li:last-child { border-bottom: 0; }
.kilns b { font-family: var(--f-brush); font-size: 24px; font-weight: 400; color: var(--accent); line-height: 1; }
.kilns em { font-size: 11.5px; color: var(--muted); }

.route { width: 100%; height: auto; overflow: visible; }
.route-coast { fill: none; stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.route-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 600; }
.route-pts circle { fill: var(--accent); }
.route-pts text { font-size: 10px; fill: var(--ink); font-family: var(--f-cn); }
.route-pts.small text { font-size: 9px; fill: var(--muted); }

.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: p; }
.plates li { background: #f4eadb; padding: 7px 6px 6px; font-size: 11px; letter-spacing: .04em; counter-increment: p; position: relative; transition: background .3s, color .3s; }
.plates li::before { content: counter(p, decimal-leading-zero); display: block; font-family: var(--f-mono); font-size: 9px; color: var(--accent); margin-bottom: 3px; }
.plates li:hover { background: var(--accent); color: #fff; }
.plates li:hover::before { color: #fff; }

.chron li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; }
.chron li:last-child { border-bottom: 0; }
.chron b { font-family: var(--f-en); font-size: 22px; font-weight: 400; color: var(--accent); line-height: 1.1; }

.record > div { display: grid; grid-template-columns: 48px 1fr; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.record > div:last-child { border-bottom: 0; }
.record dt { color: var(--muted); letter-spacing: .15em; }
.record dd b { font-family: var(--f-en); font-size: 20px; font-weight: 400; color: var(--accent); }
.card--record { background-image: linear-gradient(135deg, rgba(169,129,47,.07), transparent 60%); }

/* chapter 08 */
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; font-size: 14px; letter-spacing: .18em; overflow: hidden; isolation: isolate; }
.btn em { font-family: var(--f-en); font-style: italic; letter-spacing: .02em; font-size: 15px; opacity: .7; }
.btn i { font-style: normal; transition: transform .5s var(--ease); }
.btn--solid { background: var(--ink); color: #f3eee6; }
.btn--solid::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.btn--solid:hover::before { transform: scaleY(1); }
.btn:hover i { transform: translateX(5px); }
.btn--ghost { border: 1px solid var(--ink); }
.btn--ghost:hover i { transform: translate(3px, -3px); }

.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cats a { position: relative; display: grid; gap: 2px; padding: 18px 16px 16px; min-height: 124px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color .5s, transform .6s var(--ease); }
.cats a::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9d2c6 60%, #b9b0a1); opacity: .55; transition: transform .8s var(--ease); }
.cats a:hover { border-color: var(--accent); transform: translateY(-3px); }
.cats a:hover::after { transform: scale(1.25) translate(-10px, -10px); }
.cat-n { font-family: var(--f-mono); font-size: 10px; color: var(--accent); }
.cats b { font-size: 22px; font-weight: 600; letter-spacing: .1em; margin-top: 12px; }
.cats em { font-family: var(--f-en); font-style: italic; font-size: 14px; color: var(--muted); }
.cats i { font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--muted); margin-top: 8px; position: relative; z-index: 1; }

.letter label { display: block; font-size: 12.5px; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.letter div { display: flex; border-bottom: 1px solid var(--ink); }
.letter input { flex: 1; background: none; border: 0; outline: 0; padding: 12px 0; font-family: var(--f-en); font-size: 18px; color: var(--ink); }
.letter input::placeholder { color: var(--muted); font-style: italic; }
.letter button { background: none; border: 0; font-family: var(--f-cn); font-size: 14px; letter-spacing: .2em; color: var(--accent); padding: 0 4px; }
.letter__ok { display: none; font-size: 12.5px; color: var(--accent); margin-top: 10px; }
.letter.is-sent .letter__ok { display: block; }

/* ==========================================================
   CHROME: header, rail, timeline, cursor
   ========================================================== */
.hdr { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: var(--hdr-h); padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.seal { display: grid; place-items: center; width: 34px; height: 34px; background: #b8322a; color: #f6e9d8; font-family: var(--f-brush); font-size: 22px; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(246,233,216,.35); }
.brand__txt { font-size: 18px; font-weight: 600; letter-spacing: .14em; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt em { font-family: var(--f-mono); font-size: 9px; letter-spacing: .5em; color: var(--muted); font-weight: 400; }
.hdr__mid { font-size: 12px; letter-spacing: .3em; color: var(--muted); }
.hdr__mid span { font-family: var(--f-en); font-style: italic; letter-spacing: .05em; font-size: 14px; }
.hdr__nav { display: flex; gap: 30px; font-size: 13px; letter-spacing: .2em; }
.hdr__nav a { position: relative; padding: 6px 0; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.rail { position: absolute; z-index: 20; left: calc(var(--pad-x) * .45); top: 50%; transform: translateY(-50%); display: none; }

.tl { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--tl-h); padding: 0 var(--pad-x) 26px; display: grid; grid-template-columns: 250px 1fr 180px; align-items: end; gap: 40px; }
.tl__year { display: grid; }
.tl__year span { font-family: var(--f-en); font-size: 56px; font-weight: 300; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tl__year em { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); margin-top: 8px; white-space: nowrap; }
.tl__trackwrap { position: relative; padding-bottom: 8px; }
.tl__bar { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line); }
.tl__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.tl__track { position: relative; display: flex; justify-content: space-between; }
.tl__track li { position: relative; display: grid; justify-items: center; }
.tl__track li > button { all: unset; box-sizing: border-box; display: grid; justify-items: inherit; gap: 10px; cursor: pointer; padding: 0 4px 2px; border-radius: 4px; }
.tl__track li:first-child { justify-items: start; } .tl__track li:last-child { justify-items: end; }
.tl__track li i { width: 11px; height: 11px; border-radius: 50%; background: var(--bgc, #fff); border: 1px solid var(--muted); transition: all .6s var(--ease); background: transparent; backdrop-filter: blur(4px); }
.tl__track li span { font-size: 13px; letter-spacing: .1em; color: var(--muted); transition: color .4s; }
.tl__track li.is-past i { background: var(--accent); border-color: var(--accent); transform: scale(.6); }
.tl__track li.is-on i { background: var(--accent); border-color: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.tl__track li.is-on span, .tl__track li:hover span { color: var(--ink); }
.tl__hint { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 12px; letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.mouse { width: 18px; height: 28px; border: 1px solid var(--muted); border-radius: 10px; position: relative; flex: none; }
.mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; margin-left: -1px; background: var(--accent); border-radius: 2px; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(10px)} }

.cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }
.cursor__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursor__ring::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 50%; opacity: .45; transition: transform .5s var(--ease), background .4s, opacity .4s; }
.cursor__ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .1em; color: #fff; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cursor.is-hover .cursor__ring::before { transform: scale(2); background: var(--accent); border-color: transparent; opacity: .92; }
.cursor.is-hover .cursor__ring span { opacity: 1; }
.cursor.is-hover .cursor__dot { opacity: 0; }
.cursor.is-out { opacity: 0; }
.is-touch .cursor { display: none; }

/* ==========================================================
   TRANSITION FX
   ========================================================== */
.fx > * { position: absolute; }
.fx-fire { width: 280vmax; height: 280vmax; border-radius: 50%;
  background: radial-gradient(closest-side, #fff4dc 0%, #ffd08a 12%, #ff8a3d 26%, #c8431b 40%, rgba(90,20,5,.9) 52%, rgba(30,8,2,0) 70%); }
.fx-fire__core { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #fbfaf3 0%, #e4ece6 40%, #c3d4c9 60%, rgba(195,212,201,0) 72%); }
.fx-ink, .fx-shatter, .fx-burn { inset: 0; width: 100%; height: 100%; }
.fx-screens { inset: 0; display: flex; }
.fx-screen { flex: 1; height: 100%; position: relative; border-right: 1px solid rgba(201,163,78,.6); display: grid; place-items: center;
  box-shadow: inset 0 0 0 10px rgba(201,163,78,.0), inset -30px 0 60px rgba(0,0,0,.06); }
.fx-screen:nth-child(odd) { background-image: linear-gradient(90deg, rgba(0,0,0,.04), transparent 40%) !important; }
.fx-screen::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(201,163,78,.45); }
.fx-screen span { font-family: var(--f-brush); font-size: 5vw; color: rgba(176,72,93,.8); }
html[lang="en"] .fx-screen span { font-family: var(--f-en); font-size: 2.2vw; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }
.fx-shatter .cracks path { fill: none; stroke: #f7e9d2; stroke-width: 1.4; filter: drop-shadow(0 0 4px rgba(255,160,80,.9)); }
.fx-shatter polygon { stroke: rgba(212,71,45,.35); stroke-width: .6; }
.fx-shatter .flash { fill: #fff3e3; opacity: 0; }
.fx-burn .edge { fill: none; stroke: #ffb35c; stroke-width: 3; filter: drop-shadow(0 0 6px #ff7a2a) drop-shadow(0 0 16px #d4472d); }
.fx-burn .char { fill: none; stroke: #1a0b05; stroke-width: 26; opacity: .75; filter: blur(8px); }
.fx-seam { inset: 0; }
.fx-seam__half { position: absolute; left: 0; right: 0; height: 50.2%; }
.fx-seam__half.top { top: 0; } .fx-seam__half.bot { bottom: 0; }
.fx-seam__line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, #d9ae4c 10%, #f5dc92 50%, #d9ae4c 90%, transparent); box-shadow: 0 0 18px rgba(217,174,76,.9); }
.fx-staple { position: absolute; top: 50%; width: 6px; height: 34px; margin: -17px 0 0 -3px; border-radius: 3px; background: linear-gradient(90deg, #a47a2a, #f3d68a, #a47a2a); box-shadow: 0 0 10px rgba(217,174,76,.8); }
.fx-iris { inset: 0; }
.fx-ring { width: 80px; height: 80px; border-radius: 50%; border: 1px solid #a9812f; }
.fx-pour { inset: -6vh 0; display: grid; place-items: center; align-content: center; border-radius: 0 0 50% 50% / 0 0 8vh 8vh; }
.fx-pour span { font-family: var(--f-brush); font-size: 40vh; line-height: 1; }
html[lang="en"] .fx-pour span { font-family: var(--f-en); font-weight: 300; font-size: 16vw; letter-spacing: .08em; text-transform: uppercase; }
.fx-pour em { font-family: var(--f-mono); font-size: 12px; letter-spacing: .4em; margin-top: 10px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 1500px) {
  .rail { display: grid; gap: 18px; justify-items: center; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
  .rail__num b { color: var(--accent); font-weight: 400; }
  .rail__era { writing-mode: vertical-rl; font-family: var(--f-cn); font-size: 12px; letter-spacing: .5em; color: var(--ink); }
  .col-l { grid-column: 2 / 5; }
}
@media (max-width: 1180px) {
  .hdr__mid { display: none; }
  .col-l { grid-column: 1 / 6; }
  .col-r { grid-column: 9 / 13; max-width: 320px; }
  .vase-wrap { width: min(50vh, 34vw); }
  .tl { grid-template-columns: 200px 1fr 150px; gap: 24px; }
}
@media (max-width: 900px), (max-height: 620px) and (max-width: 1100px) {
  :root { --hdr-h: 68px; --tl-h: 84px; }
  .hdr__nav a:not(.bag) { display: none; }
  .vase-wrap { position: fixed; top: var(--hdr-h); bottom: auto; margin: 0 auto; width: 40vh; max-width: 70vw; height: 36vh; }
  .era { --w: auto; left: 16px; margin-left: 0; top: calc(var(--hdr-h) + 6px); height: 36vh; align-items: flex-start; justify-content: flex-start; }
  .era__word { font-size: 60px; }
  .era.is-latin .era__word { writing-mode: vertical-rl; font-size: 30px; letter-spacing: .24em; margin: 0; }
  .era__cap { display: none; }
  .scene { display: block; padding-top: calc(var(--hdr-h) + 36vh + 16px); padding-bottom: calc(var(--tl-h) + 24px); }
  .scene {
    -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--hdr-h) + 4vh), #000 calc(var(--hdr-h) + 22vh), #000 calc(100% - var(--tl-h) - 10px), transparent calc(100% - var(--tl-h) + 20px));
            mask-image: linear-gradient(180deg, transparent calc(var(--hdr-h) + 4vh), #000 calc(var(--hdr-h) + 22vh), #000 calc(100% - var(--tl-h) - 10px), transparent calc(100% - var(--tl-h) + 20px));
  }
  .col-l, .col-r { max-width: 620px; margin: 0 auto; }
  .col-r { margin-top: 28px; justify-self: auto; }
  .title { font-size: clamp(34px, 9vw, 56px); }
  .tl { grid-template-columns: 1fr; padding-bottom: 14px; gap: 10px; }
  .tl__year, .tl__hint { display: none; }
  .tl__track li span { font-size: 11px; }
  .cats a { min-height: 104px; }
  /* phones: the scrolls live in the picture area behind the vase, the text below stays on plain sky */
  .kiln-craft { top: var(--hdr-h); height: 36vh; }
  .kiln-craft__fade { -webkit-mask-image: none; mask-image: none; opacity: .8; }
  .spring { --ph: calc(var(--hdr-h) + 36vh); bottom: auto; height: var(--ph); }
  .spring__fade { left: 0; right: 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .spring-credit { top: calc(var(--hdr-h) + 36vh - 22px); bottom: auto; left: 16px; right: 16px; max-width: none; font-size: 9.5px; }
  .scroll-land { top: var(--hdr-h); height: 30vh; }
  .scroll-city { top: calc(var(--hdr-h) + 12vh); bottom: auto; height: 24vh; }
  .scroll-city__fade { opacity: .75; -webkit-mask-image: none; mask-image: none; }
  .war-credit { top: calc(var(--hdr-h) + 36vh - 22px); bottom: auto; left: 16px; right: 16px; max-width: none; font-size: 9.5px; }
  .bg-5.is-active .gift-scene.is-in { animation: none; }
  .gift-scene { background-position: 72% 30%; }
  .gift-shade { background: linear-gradient(180deg, rgba(236,230,220,0) 0%, rgba(236,230,220,.2) 30%, rgba(236,230,220,.92) 50%, #ece6dc 100%); }
  .hall-credit { top: calc(var(--hdr-h) + 36vh - 22px); bottom: auto; left: 16px; right: 16px; max-width: none; font-size: 9.5px; }
  .hall-credit span { top: 0; bottom: auto; left: 0; width: auto; max-width: none; }
  .hall-pic, .hall-credit { display: none; }
  .scroll-credit { top: calc(var(--hdr-h) + 36vh - 22px); bottom: auto; left: 16px; right: 16px; max-width: none; font-size: 9.5px; }
}
@media (max-width: 480px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li:nth-child(3) { border-right: 0; }
  .btn { width: 100%; justify-content: space-between; }
  .plates { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .mist, .kiln-glow, .war-glow, .sky-light, .smoke, .window-light, .drift__row, .kiln-craft img, .spring img, .scroll-land img, .scroll-city img, .hall-pic, .hall-credit span, .gift-scene, .gift-light, .embers i, .mouse i { animation: none !important; }
  .hall-pic.h-a.is-in, .hall-credit .c-a { opacity: 1; }
  .embers { display: none; }
}


/* ==========================================================
   LANGUAGE SWITCH
   ========================================================== */
.lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 100px; margin-left: 6px; }
.lang button { background: none; border: 0; color: var(--muted); font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; width: 30px; height: 24px; border-radius: 100px; transition: background .4s, color .4s; }
.lang button[data-lang="zh"] { font-family: var(--f-cn); font-size: 12px; letter-spacing: 0; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper, #f3eee6); }
.t-dark .lang button[aria-pressed="true"] { color: #140d08; }
.hdr__nav { align-items: center; }
.bag__n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; margin-left: 4px; }

/* ==========================================================
   ENGLISH TYPOGRAPHY (primary language)
   ========================================================== */
html[lang="en"] .brand__txt { font-family: var(--f-en); font-weight: 500; font-size: 19px; letter-spacing: .16em; white-space: nowrap; }
html[lang="en"] .brand__txt em { font-family: var(--f-cn); letter-spacing: .6em; font-size: 10px; }
html[lang="en"] .hdr__mid { font-family: var(--f-en); font-style: italic; font-size: 15px; letter-spacing: .04em; }
html[lang="en"] .hdr__mid span { font-family: var(--f-cn); font-style: normal; font-size: 11px; letter-spacing: .3em; }
html[lang="en"] .hdr__nav > a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

html[lang="en"] .col-l { max-width: 540px; }
html[lang="en"] .title { font-family: var(--f-en); font-weight: 400; font-size: clamp(38px, 3.9vw, 68px); line-height: 1.02; letter-spacing: -.01em; }
html[lang="en"] .title .ln:nth-child(2) > span { font-style: italic; font-weight: 300; }
html[lang="en"] .ln { padding-bottom: .1em; }
html[lang="en"] .sub { font-size: clamp(17px, 1.35vw, 21px); }
html[lang="en"] .body { font-family: var(--f-en); font-size: clamp(16.5px, 1.18vw, 18.5px); line-height: 1.6; text-align: left; opacity: .92; hyphens: auto; }
html[lang="en"] .body em { font-size: 1.05em; }
html[lang="en"] .kicker { font-size: 10.5px; }
html[lang="en"] .steps li { font-family: var(--f-en); font-size: 15px; letter-spacing: .02em; }
html[lang="en"] .quote p { font-family: var(--f-en); font-style: italic; font-size: 19px; line-height: 1.45; letter-spacing: 0; }
html[lang="en"] .quote small { font-family: var(--f-mono); font-style: normal; font-size: 10px; letter-spacing: .08em; line-height: 1.6; margin-top: 10px; }
html[lang="en"] .tags li { font-family: var(--f-en); font-size: 14px; letter-spacing: .04em; font-style: italic; }

html[lang="en"] .stat sup { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
html[lang="en"] .stat p { font-family: var(--f-en); font-size: 16px; letter-spacing: .01em; line-height: 1.3; }
html[lang="en"] .stat p em { font-family: var(--f-cn); font-style: normal; font-size: 11.5px; letter-spacing: .12em; margin-top: 4px; }
html[lang="en"] .card figcaption { font-family: var(--f-en); font-size: 17px; letter-spacing: .01em; }
html[lang="en"] .card figcaption em { font-family: var(--f-cn); letter-spacing: .1em; text-transform: none; font-size: 10.5px; }
html[lang="en"] .chart-axis { text-transform: uppercase; font-size: 9px; }
html[lang="en"] .note { font-family: var(--f-en); font-size: 15px; line-height: 1.5; }
html[lang="en"] .kilns li { grid-template-columns: 52px 1fr auto; font-family: var(--f-en); font-size: 14.5px; gap: 6px; }
html[lang="en"] .kilns b { font-family: var(--f-en); font-style: italic; font-weight: 500; font-size: 21px; }
html[lang="en"] .kilns em { font-family: var(--f-en); font-style: italic; font-size: 13.5px; text-align: right; }
html[lang="en"] .route-pts text { font-family: var(--f-en); font-size: 11px; font-style: italic; }
html[lang="en"] .plates li { font-family: var(--f-en); font-size: 12.5px; line-height: 1.15; letter-spacing: 0; padding: 6px 6px 7px; }
html[lang="en"] .chron li { grid-template-columns: 56px 1fr; font-family: var(--f-en); font-size: 15px; line-height: 1.35; }
html[lang="en"] .record > div { grid-template-columns: 84px 1fr; font-family: var(--f-en); font-size: 15px; align-items: baseline; }
html[lang="en"] .record dt { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }

html[lang="en"] .btn span { font-family: var(--f-en); font-size: 17px; letter-spacing: .02em; font-weight: 500; }
html[lang="en"] .btn em { font-family: var(--f-cn); font-style: normal; font-size: 11px; letter-spacing: .2em; }
html[lang="en"] .cats b { font-family: var(--f-en); font-weight: 500; font-size: 23px; letter-spacing: .01em; line-height: 1.1; }
html[lang="en"] .cats em { font-family: var(--f-cn); font-style: normal; font-size: 12px; letter-spacing: .3em; margin-top: 2px; }
html[lang="en"] .cats i { text-transform: uppercase; letter-spacing: .12em; }
html[lang="en"] .letter label { font-family: var(--f-en); font-style: italic; font-size: 15px; letter-spacing: 0; }
html[lang="en"] .letter button { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
html[lang="en"] .letter__ok { font-family: var(--f-en); font-size: 15px; font-style: italic; }

html[lang="en"] .tl__year em, html[lang="en"] .tl__hint { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
html[lang="en"] .tl__track li span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
html[lang="en"] .rail__era { font-family: var(--f-en); font-style: italic; font-size: 14px; letter-spacing: .1em; }
html[lang="en"] .fx-pour em { text-transform: uppercase; }
html[lang="en"] .tl { grid-template-columns: 250px 1fr 200px; }
html[lang="en"] #hint { white-space: nowrap; }

@media (max-width: 900px), (max-height: 620px) and (max-width: 1100px) {
  html[lang="en"] .title { font-size: clamp(34px, 9.5vw, 56px); }
  .hdr__nav { gap: 14px; }
}

/* short laptop screens: keep every English chapter on one screen */
@media (min-width: 901px) and (max-height: 820px) {
  html[lang="en"] .title { font-size: clamp(36px, 3.5vw, 58px); margin-bottom: 12px; }
  html[lang="en"] .sub { margin-bottom: 14px; }
  html[lang="en"] .body { font-size: 16px; line-height: 1.5; }
  html[lang="en"] .quote { margin-top: 16px; padding-top: 12px; }
  html[lang="en"] .quote p { font-size: 17px; }
  html[lang="en"] .steps { margin-top: 16px; }
  .kicker { margin-bottom: 14px; }
}

/* ---------- chapter 06 · three routes west ---------- */
.card--exodus { --r1: #8a4b22; --r2: #c07a3a; --r3: #5a3a24; }
.route--exodus { margin: 2px 0 4px; }
.route--exodus .route-line { stroke-width: 2.2; stroke-linecap: round; fill: none; }
.route--exodus .exo-trunk { stroke: var(--ink); opacity: .55; stroke-dasharray: 600; }
.route--exodus .exo-r1 { stroke: var(--r1); }
.route--exodus .exo-r2 { stroke: var(--r2); }
.route--exodus .exo-r3 { stroke: var(--r3); }
.exo-city circle { fill: var(--card-solid, #efe3c8); stroke: var(--ink); stroke-width: 1.4; }
.exo-city text { font-family: var(--f-en); font-style: italic; font-size: 13px; fill: var(--ink); }
.exo-end circle { stroke: none; }
.exo-end .e1 circle { fill: var(--r1); } .exo-end .e2 circle { fill: var(--r2); } .exo-end .e3 circle { fill: var(--r3); }
.exo-end text { font-family: var(--f-mono); font-size: 9.5px; fill: #fff; text-anchor: middle; }
.exo-west { fill: none; stroke: var(--muted); stroke-width: 1; }
.exo-dir { font-family: var(--f-mono); font-size: 8px; letter-spacing: .2em; fill: var(--muted); text-transform: uppercase; }
.exo-legend { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.exo-legend li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.exo-legend li:last-child { border-bottom: 0; padding-bottom: 0; }
.exo-legend i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-family: var(--f-mono); font-size: 11px; }
.exo-legend .e1 i { background: var(--r1); } .exo-legend .e2 i { background: var(--r2); } .exo-legend .e3 i { background: var(--r3); }
.exo-legend div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.exo-legend b { font-weight: 600; font-size: 14px; letter-spacing: .12em; }
.exo-legend span { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
html[lang="en"] .exo-legend b { font-family: var(--f-en); font-weight: 500; font-size: 17px; letter-spacing: .01em; }
html[lang="en"] .exo-legend span { font-family: var(--f-en); font-style: italic; font-size: 15.5px; letter-spacing: 0; }
html[lang="zh-CN"] .exo-city text { font-family: var(--f-cn); font-style: normal; font-size: 12px; }
html[lang="zh-CN"] .exo-dir { font-family: var(--f-cn); font-size: 9px; letter-spacing: .3em; }

/* empty secondary lines (English mode drops the Chinese echoes) */
.stat p em:empty, .card figcaption em:empty, .btn em:empty, .sub .cn:empty { display: none; }

/* English refinements */
html[lang="en"] .steps li i { font-family: var(--f-en); font-style: italic; font-size: 17px; }
html[lang="en"] .cats em { font-family: var(--f-en); font-style: italic; font-size: 14px; letter-spacing: 0; line-height: 1.25; }

/* crate stencils (chapter 06) */
.vase .plank { fill: #b98d55; opacity: .35; }
.vase .stencil { font-family: var(--f-cn); font-weight: 600; font-size: 13px; letter-spacing: 3px; fill: #8a2a1c; opacity: .75; text-anchor: middle; }
.vase .stencil-side { font-size: 11px; }
html[lang="en"] .vase .stencil { font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 2.5px; }
html[lang="en"] .vase .stencil-side { font-size: 9.5px; }

/* English: Latin base face, so no Chinese font is ever requested */
html[lang="en"] body { font-family: var(--f-en); }

/* ---------- battery: only the chapter on screen animates; moving blurs stay on the GPU ---------- */
.bg:not(.is-active), .bg:not(.is-active) * { animation-play-state: paused !important; }
.kiln-glow, .mist, .smoke, .war-glow, .sky-light, .window-light, .grain { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .vase-float { animation: none; } }
/* after 45s without input the page rests: ambient loops hold their current frame */
.is-idle .vase-float, .is-idle .grain, .is-idle .bg * , .is-idle .mouse i { animation-play-state: paused !important; }

/* ---------- accessibility (board #10) ---------- */
/* a visible focus ring for keyboard users, in the chapter's colour */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible,
.tl__track li > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
.btn:focus-visible { outline-offset: 3px; }
.tl__track li > button:focus-visible span { color: var(--ink); }
/* small labels: never below 11px */
.era.is-latin .era__cap, .card figcaption em, .cat-n, .cats i, .tl__year em, .lang button,
html[lang="en"] .kicker, html[lang="en"] .quote small, html[lang="en"] .stat sup,
html[lang="en"] .tl__year em, html[lang="en"] .tl__hint, html[lang="en"] .tl__track li span { font-size: 11px; }
.chart-axis, html[lang="en"] .chart-axis { font-size: 10.5px; }
.plates li::before { font-size: 10px; }
/* the custom cursor is decoration: people who ask their system for more contrast,
   forced colours or less motion get their own pointer back */
@media (prefers-contrast: more), (forced-colors: active), (prefers-reduced-motion: reduce) {
  body:not(.is-touch), body:not(.is-touch) a, body:not(.is-touch) button { cursor: auto; }
  body:not(.is-touch) a, body:not(.is-touch) button, .tl__track li > button { cursor: pointer; }
  .cursor { display: none; }
}

/* ---------- shortcuts to the collection (board #6) ---------- */
.skip { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 11px 18px; border: 1px solid var(--accent); border-radius: 100px; color: var(--ink); font-size: 14px; letter-spacing: .06em; transition: background .4s, color .4s; }
.skip i { font-style: normal; color: var(--accent); transition: transform .4s var(--ease), color .4s; }
.skip:hover { background: var(--accent); color: #fff; }
.skip:hover i { color: #fff; transform: translateX(4px); }
html[lang="en"] .skip { font-family: var(--f-en); font-size: 16px; letter-spacing: .01em; }
/* "Today" on the timeline reads as the way in, not just the last dot */
.tl__today:not(.is-on) span { color: #fff; background: var(--accent); padding: 3px 10px 3px 11px; border-radius: 100px; }
.tl__today:not(.is-on) span::after { content: ' →'; }
.tl__today:not(.is-on) i { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.tl__today:not(.is-on) button:hover span { filter: brightness(1.1); }
/* bright accents on the two dark chapters take dark text */
.t-dark .tl__today:not(.is-on) span, .t-dark .skip:hover { color: #140d08; }
.t-dark .skip:hover i { color: #140d08; }