/* Portfolio layer for 李斌作品集: full-bleed leaves, artwork across the gutter, grids, and typographic pages.
   Loaded after styles.css; the bundled reader and default page styles stay untouched. */
@font-face{font-family:"Noto Serif SC Book";src:url("assets/fonts/noto-serif-sc-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC Book";src:url("assets/fonts/noto-serif-sc-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{--book-serif:"Source Serif 4","Noto Serif SC Book","Songti SC","Noto Serif CJK SC",Georgia,serif;--cloth:#393a35;--quiet:#7c7f74;--rule:rgb(41 44 38 / 14%)}
.art-page.endpaper{background-color:#e3dfd3}
.art-page.white{background:#fff}

/* Photographs that fill the leaf edge to edge. */
.art-page img.bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-page .stack{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr}
.art-page .stack img{width:100%;height:100%;object-fit:cover}

/* One artwork laid across a spread: each leaf shows its own half of a shared canvas. */
.spread-window{position:absolute;inset:0;overflow:hidden}
.spread-canvas{position:absolute;inset-block:0;left:0;width:200%}
.recto .spread-canvas{left:-100%}
.spread-canvas img{position:absolute;object-fit:cover}

/* Single-page (phone) layout: show the whole artwork on the first leaf, a caption on the second. */
.phone-caption{display:none}
.book[data-layout="portrait"] .phone-whole .spread-canvas{left:0;width:100%}
.book[data-layout="portrait"] .phone-whole .spread-canvas img{left:5%!important;width:90%!important;top:50%!important;height:auto!important;transform:translateY(-50%)}
.book[data-layout="portrait"] .phone-whole.recto .spread-window{display:none}
.book[data-layout="portrait"] .phone-whole.recto .phone-caption{display:block;position:absolute;left:15%;right:13%;top:42%}
.phone-caption p{margin:0;font:400 3.4cqw/1.7 var(--book-serif);color:var(--ink)}
.phone-caption .k{font:400 2.6cqw/1.5 var(--book-sans);letter-spacing:.08em;color:var(--quiet);margin:0 0 3cqw}

/* Phones: the drop shadow is a filter over the whole book and is redrawn on every frame of a turn, which made
   turning stutter; the paper edge reads well enough against the room without it. */
.book[data-layout="portrait"]{filter:none}

/* A leaf whose photographs are still on their way shows a quiet pulse instead of bare paper. */
.book-page.art-page[data-loading]::after{content:"";position:absolute;left:50%;top:50%;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;border:1px solid rgb(41 44 38 / 24%);border-radius:50%;animation:leaf-loading 1.4s ease-in-out infinite}
@keyframes leaf-loading{50%{transform:scale(1.5);opacity:.3}}
@media (prefers-reduced-motion:reduce){.book-page.art-page[data-loading]::after{animation:none}}

/* Campaign key visuals, four to a leaf. */
.kv-grid{position:absolute;inset:9% 9% 11%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5% 6%}
.kv-grid img{width:100%;height:100%;object-fit:contain}

/* Typographic leaves. */
.art-page .type{position:absolute;left:15%;right:13%;margin:0}
.art-page .cover-title.zh{font-size:11cqw;letter-spacing:.12em;top:14%}
.art-page .cover-subtitle{top:31%;font-size:3.2cqw;letter-spacing:.06em}
.art-page .cover-plate{bottom:16%;width:56%}
.art-page .back-mark{font-size:2.8cqw;letter-spacing:.06em}
.title-page{top:29%}
.title-page h2{font:400 9.5cqw/1.1 var(--book-serif);letter-spacing:.12em;margin:0 0 2.5cqw}
.title-page .en{font:italic 400 4.6cqw/1.2 var(--book-serif);margin:0 0 13cqw}
.title-page .meta,.chapter .meta{font:400 2.9cqw/1.8 var(--book-serif);color:var(--quiet);margin:0}
.contents{top:14%}
.contents h2{font:400 4.8cqw/1.2 var(--book-serif);letter-spacing:.08em;margin:0 0 1.4cqw}
.contents .sub{font:400 2.3cqw/1.4 var(--book-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);margin:0 0 6cqw}
.contents ol{list-style:none;margin:0;padding:0}
.contents a{display:grid;grid-template-columns:7.5cqw 1fr auto;align-items:baseline;gap:2cqw;padding:2.2cqw 0;border-top:1px solid var(--rule);color:inherit;text-decoration:none;cursor:pointer}
.contents li:last-child a{border-bottom:1px solid var(--rule)}
.contents a>*{pointer-events:none}
.contents .n,.contents .p{font:400 2.4cqw/1 var(--book-sans);letter-spacing:.1em;color:var(--quiet)}
.contents .t{font:400 3.6cqw/1.3 var(--book-serif)}
.contents .t em{display:block;margin-top:.4cqw;font-size:2.6cqw;color:var(--quiet)}
.contents a:hover .t,.contents a:focus-visible .t{color:#8a5a2b}
.chapter{top:31%}
.chapter .num{font:400 2.6cqw/1 var(--book-sans);letter-spacing:.24em;color:var(--quiet);margin:0 0 7cqw}
.chapter h2{font:400 8cqw/1.18 var(--book-serif);letter-spacing:.06em;margin:0 0 2.6cqw}
.chapter .en{font:italic 400 4.4cqw/1.3 var(--book-serif);color:#4b4d46;margin:0 0 10cqw}
.chapter-numeral{position:absolute;left:10%;bottom:6%;margin:0;font:400 46cqw/.8 var(--book-serif);letter-spacing:-.04em;color:rgb(41 44 38 / 6.5%)}
.colophon-page{top:28%}
.colophon-page h2{font:400 4.8cqw/1.25 var(--book-serif);letter-spacing:.08em;margin:0 0 1.4cqw}
.colophon-page .en{font:italic 400 3cqw/1.3 var(--book-serif);margin:0 0 7cqw;color:#4b4d46}
.colophon-page p{font:400 2.7cqw/1.75 var(--book-serif);margin:0 0 3.2cqw}
.colophon-page .small{font:400 2.25cqw/1.7 var(--book-sans);color:var(--quiet)}


/* ===== The exhibition room ===================================================================================
   Everything outside the leaves. The book hangs in a dark hall under a light that takes the colour of the work
   on view; an entrance comes first, a wall label and a large wall title flank the book on wide screens, the
   route of the seven rooms runs along the bottom, and a guide lists the rooms. exhibit.js drives it. */
:root{--wall-deep:#080707;--ivory:#ece6da;--ivory-2:rgb(236 230 218 / 64%);--ivory-3:rgb(236 230 218 / 38%);--ivory-4:rgb(236 230 218 / 13%);--brass:#c4a776;
  --ease:cubic-bezier(.2,.7,.1,1);--ui-sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --chrome:176px;--side:clamp(240px,20vw,380px);background:var(--wall-deep)}
html,body{background:var(--wall-deep)}
body{color:var(--ivory)}
.room{position:relative;isolation:isolate;overflow:hidden;padding:max(18px,env(safe-area-inset-top)) clamp(18px,3vw,48px) max(14px,env(safe-area-inset-bottom));color:var(--ivory)}
button:focus-visible{outline:1px solid var(--ivory-2);outline-offset:4px}

/* Light and air: a warm vignette, the work's own colour spilling onto the wall, a track light from above,
   dust drifting in the beam and a fine moving grain. Only opacity and transforms ever animate. */
.ambience{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(130% 115% at 50% 46%,#1a1815 0%,#0f0e0c 48%,var(--wall-deep) 100%)}
.ambience>*{position:absolute}
.glow{inset:-14%;opacity:0;transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0);transition:opacity 2s var(--ease);
  background:radial-gradient(60% 62% at 50% 50%,rgb(var(--tone,198 184 160) / 40%),rgb(var(--tone,198 184 160) / 21%) 38%,rgb(var(--tone,198 184 160) / 7%) 64%,transparent 86%)}
.glow.is-on{opacity:1}
.spot{inset:0;transform:translate3d(calc(var(--px,0) * 18px),calc(var(--py,0) * 12px),0);
  background:radial-gradient(30% 20% at 50% 0%,rgb(255 242 222 / 9%),transparent 100%),
    conic-gradient(from 0deg at 50% -14%,transparent 0 151deg,rgb(255 240 218 / 5.5%) 166deg 194deg,transparent 209deg),
    radial-gradient(40% 46% at 50% 52%,rgb(255 238 214 / 6%),transparent 100%);
  -webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.dust{left:50%;top:50%;width:min(76vw,1180px);height:86vh;transform:translate3d(calc(-50% + var(--px,0) * 24px),calc(-50% + var(--py,0) * 16px),0)}
.dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:radial-gradient(circle,rgb(255 246 230 / 80%),rgb(255 246 230 / 0) 70%);animation:mote var(--d) linear var(--delay) infinite}
@keyframes mote{0%{opacity:0;transform:translate3d(0,0,0)}18%,82%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}
.grain{inset:-120px;opacity:.06;animation:grain 1.4s steps(5) infinite;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{20%{transform:translate3d(-38px,24px,0)}40%{transform:translate3d(26px,-42px,0)}60%{transform:translate3d(-18px,-14px,0)}80%{transform:translate3d(40px,30px,0)}}
.room.is-turning .grain,.room.is-turning .dust i{animation-play-state:paused} /* the turn gets the whole frame */

/* The book hangs larger on big screens, keeping room beside it for the label and the wall title. */
.stage{z-index:1}
.book-rig{--book-h:min(calc(100dvh - var(--chrome)),calc((100vw - 2 * var(--side)) / (2 * var(--page-ratio))),780px);width:min(100%,calc(var(--book-h) * var(--page-ratio) * 2));height:var(--book-h)}
.book{filter:drop-shadow(0 30px 38px rgb(0 0 0 / 58%)) drop-shadow(0 6px 10px rgb(0 0 0 / 30%))}

/* Header: the name on the left, the guide and full screen on the right. */
.book-header{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;width:100%;margin:0}
.brand{display:flex;align-items:baseline;gap:20px;min-width:0}
.book-header h1{margin:0;font:600 19px/1 var(--book-serif);letter-spacing:.5em;color:var(--ivory)}
.book-header .brand-en{font:400 10px/1 var(--ui-sans);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;color:var(--ivory-3)}
.tools{display:flex;align-items:center;gap:2px}
.tool{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;background:none;color:var(--ivory-2);font:400 13px/1 var(--book-serif);letter-spacing:.3em;cursor:pointer;transition:color .4s}
.tool em{font:400 10px/1 var(--ui-sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-3);transition:color .4s}
.tool:hover,.tool:hover em{color:var(--ivory)}
.tool-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.1}
#chapter-label{display:none}

/* The label and the wall title hang off the book itself: the label at its lower left, the title at its upper
   right. With only the cover (or the back) showing, the book sits a quarter further in, and so do they. */
.book-rig{--gap:clamp(28px,3vw,56px);--inset:0%;position:relative}
.room[data-edge="front"] .book-rig,.room[data-edge="back"] .book-rig{--inset:25%}

/* Wall label, museum style. */
.wall-label{position:absolute;right:calc(100% + var(--gap) - var(--inset));bottom:0;z-index:3;display:none;width:clamp(150px,13vw,230px);transition:right .76s ease,opacity 1.2s var(--ease)}
.wall-label p,.wall-label h2{margin:0}
.wall-label .wl-room{font:400 10px/1.6 var(--ui-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ivory-3)}
.wl-room b{font-weight:400;color:var(--brass)}
.wall-label .wl-title{margin:26px 0 10px;font:600 clamp(28px,2.3vw,36px)/1.22 var(--book-serif);letter-spacing:.14em;color:var(--ivory)}
.wall-label .wl-en{margin-bottom:30px;font:italic 400 17px/1.4 "Source Serif 4",Georgia,serif;color:var(--ivory-2)}
.wall-label .wl-kind{font:400 13px/1.9 var(--book-serif);letter-spacing:.08em;color:var(--ivory-2)}
.wl-kind span{display:block;font:400 11px/1.7 var(--ui-sans);letter-spacing:.06em;color:var(--ivory-3)}
.wall-label .wl-years{margin-top:8px;font:400 11px/1.6 var(--ui-sans);letter-spacing:.24em;font-variant-numeric:tabular-nums;color:var(--ivory-3)}
.wl-rule{display:block;width:40px;height:1px;margin-top:30px;background:var(--brass);transform-origin:left}
.wall-label.is-leaving>*{opacity:0;transform:translate3d(0,-8px,0);transition:opacity .3s ease,transform .3s ease}
.wall-label.is-entering>*{animation:wl-in 1s var(--ease) backwards}
.wall-label.is-entering>:nth-child(2){animation-delay:.07s}
.wall-label.is-entering>:nth-child(3){animation-delay:.14s}
.wall-label.is-entering>:nth-child(4){animation-delay:.21s}
.wall-label.is-entering>:nth-child(5){animation-delay:.28s}
.wall-label.is-entering .wl-rule{animation:wl-rule 1.3s var(--ease) .32s backwards}
@keyframes wl-in{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes wl-rule{from{transform:scaleX(0)}}

/* Wall title: the room's name in large outlined vertical type. */
.wall-title{position:absolute;top:0;left:calc(100% + var(--gap) - var(--inset));z-index:0;display:none;pointer-events:none;transform:translate3d(calc(var(--px,0) * -10px),calc(var(--py,0) * -6px),0);transition:left .76s ease}
.wt{position:absolute;top:0;left:0;display:flex;align-items:flex-start;gap:20px;margin:0;opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.4s var(--ease),transform 1.9s var(--ease)}
.wt.is-on{opacity:1;transform:none}
.wt-zh{writing-mode:vertical-rl;font:600 min(148px,calc(var(--book-h) * .92 / var(--n,2) / 1.22))/1 var(--book-serif);letter-spacing:.22em;color:rgb(236 230 218 / 3.5%);-webkit-text-stroke:1px rgb(236 230 218 / 18%)}
.wt-en{writing-mode:vertical-rl;padding-top:.3em;font:400 10px/1 var(--ui-sans);letter-spacing:.46em;text-transform:uppercase;white-space:nowrap;color:var(--ivory-3)}

/* Bottom: how to turn, the route of the seven rooms, the page count. */
.controls{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(760px,58vw)) minmax(0,1fr);align-items:end;gap:28px;width:100%;margin:0}
.hint{justify-self:start;margin:0;font:400 12px/1.5 var(--book-serif);letter-spacing:.16em;color:var(--ivory-3);transition:opacity 1.2s var(--ease)}
.room.has-turned .hint{opacity:0}
.route{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.route li{position:relative;flex:1 1 0;min-width:0}
.controls .route button{display:grid;gap:9px;width:100%;height:auto;padding:12px 0 6px;border:0;border-radius:0;background:none;color:var(--ivory-3);text-align:left;font:inherit;cursor:pointer}
.route-num{font:400 10px/1 var(--ui-sans);letter-spacing:.22em;transition:color .5s}
.route-name{position:absolute;left:0;bottom:calc(100% - 2px);white-space:nowrap;font:400 12px/1 var(--book-serif);letter-spacing:.16em;color:var(--ivory);opacity:0;transform:translate3d(0,4px,0);transition:opacity .35s,transform .35s;pointer-events:none}
.route button:hover .route-name{opacity:1;transform:none}
.route-bar{position:relative;display:block;height:1px;overflow:hidden;background:var(--ivory-4);transition:height .5s var(--ease)}
.route-bar i{position:absolute;inset:0;background:var(--ivory-2);transform-origin:left;transform:scaleX(var(--fill,0));transition:transform 1s var(--ease)}
.route li[data-state="here"] .route-num,.route button:hover .route-num{color:var(--ivory)}
.route li[data-state="here"] .route-bar{height:2px}
.route li[data-state="here"] .route-bar i{background:var(--ivory)}
.pager{justify-self:end;display:flex;align-items:center;gap:14px}
.status span{display:inline-block;font:400 11px/1 var(--ui-sans);letter-spacing:.26em;font-variant-numeric:tabular-nums;color:var(--ivory-2)}
.status span.tick{animation:tick .6s var(--ease)}
@keyframes tick{from{opacity:0;transform:translate3d(0,7px,0)}}
#previous svg,#next svg{fill:none;stroke:currentColor;stroke-width:1}

/* Turning arrows stand at the edges of the room on anything wider than a phone. */
@media (min-width:701px){
  #previous,#next{position:fixed;top:50%;z-index:5;display:grid;place-items:center;width:58px;height:150px;margin:-75px 0 0;padding:0;border:0;border-radius:0;background:none;color:var(--ivory);opacity:.36;cursor:pointer;transition:opacity .45s var(--ease),translate .6s var(--ease)}
  #previous{left:max(6px,env(safe-area-inset-left))}
  #next{right:max(6px,env(safe-area-inset-right))}
  #previous svg,#next svg{width:40px;height:12px}
  #previous:not(:disabled):hover{opacity:1;translate:-6px 0}
  #next:not(:disabled):hover{opacity:1;translate:6px 0}
  #previous:disabled,#next:disabled{opacity:.07;cursor:default}
}

/* Quiet mode: when the visitor only looks, the signage fades and the work stays. */
.book-header,.controls{transition:opacity 1.2s var(--ease)}
.room.is-idle .book-header,.room.is-idle .controls{opacity:.06}
.room.is-idle .wall-label{opacity:.42}
.room.is-idle #previous,.room.is-idle #next{opacity:0}
.room.is-idle .controls:hover{opacity:1}

/* Coming in from the entrance: the room lights up, the book rises into its light, then the signage. */
@keyframes room-in{from{opacity:0}}
@keyframes rise-in{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes stage-in{from{opacity:0;transform:translate3d(0,28px,0) scale(.985)}}
.room:not([data-phase="entrance"]) .ambience{animation:room-in 2.4s var(--ease) .15s backwards}
.room:not([data-phase="entrance"]) .stage{animation:stage-in 1.8s var(--ease) .4s backwards}
.room:not([data-phase="entrance"]) .book-header{animation:rise-in 1.3s var(--ease) .95s backwards}
.room:not([data-phase="entrance"]) .wall-label{animation:room-in 1.4s var(--ease) 1.1s backwards}
.room:not([data-phase="entrance"]) .wall-title{animation:room-in 2.2s var(--ease) 1.2s backwards}
.room:not([data-phase="entrance"]) .controls{animation:rise-in 1.3s var(--ease) 1.2s backwards}
.room:not([data-phase="entrance"]) #previous,.room:not([data-phase="entrance"]) #next{animation:room-in 1.4s var(--ease) 1.5s backwards}

/* Entrance: the exhibition's title wall over a slow sequence of the work. */
.entrance{position:fixed;inset:0;z-index:40;display:grid;align-items:center;overflow:hidden;background:var(--wall-deep);color:var(--ivory);cursor:pointer;transition:opacity 1.3s var(--ease) .25s,visibility 0s linear 1.6s}
.room[data-phase="entering"] .entrance{opacity:0;visibility:hidden;pointer-events:none}
.entrance-slides{position:absolute;inset:0;transition:transform 1.8s var(--ease)}
.room[data-phase="entering"] .entrance-slides{transform:scale(1.07)}
.entrance-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 2.6s ease,transform 11s cubic-bezier(.25,.1,.25,1)}
.entrance-slides img:nth-child(odd){transform-origin:68% 42%}
.entrance-slides img:nth-child(even){transform-origin:32% 58%}
.entrance-slides img.is-on{opacity:1;transform:scale(1)}
.entrance-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgb(8 7 7 / 92%) 0%,rgb(8 7 7 / 70%) 34%,rgb(8 7 7 / 28%) 70%,rgb(8 7 7 / 46%) 100%),linear-gradient(0deg,rgb(8 7 7 / 72%),transparent 42%)}
.entrance-copy{position:relative;padding:0 clamp(28px,8.5vw,150px);transition:opacity .7s var(--ease),transform 1s var(--ease)}
.room[data-phase="entering"] .entrance-copy{opacity:0;transform:translate3d(0,-20px,0)}
.entrance-copy>*{margin:0;animation:intro-in 1.4s var(--ease) backwards}
@keyframes intro-in{from{opacity:0;transform:translate3d(0,22px,0)}}
.entrance .kicker{display:flex;gap:22px;font:400 11px/1 var(--ui-sans);letter-spacing:.44em;text-transform:uppercase;color:var(--ivory-2);animation-delay:.25s}
.entrance .name{display:flex;gap:.28em;margin:.36em 0 .24em;font:600 clamp(76px,10.5vw,168px)/1 var(--book-serif);letter-spacing:0;animation:none}
.name span{display:inline-block;animation:name-in 1.8s var(--ease) backwards}
.name span:nth-child(1){animation-delay:.4s}
.name span:nth-child(2){animation-delay:.58s}
@keyframes name-in{from{opacity:0;transform:translate3d(0,.32em,0);filter:blur(12px)}}
.entrance .name-en{font:italic 400 clamp(19px,1.7vw,26px)/1.3 "Source Serif 4",Georgia,serif;color:var(--ivory-2);animation-delay:.8s}
.entrance .subtitle{margin-top:14px;font:400 clamp(14px,1.15vw,17px)/1.6 var(--book-serif);letter-spacing:.62em;color:var(--ivory-2);animation-delay:.92s}
.entrance .rule{display:block;width:76px;height:1px;margin:36px 0 26px;background:var(--brass);transform-origin:left;animation:rule-in 1.4s var(--ease) 1.1s backwards}
@keyframes rule-in{from{transform:scaleX(0)}}
.entrance .series{display:flex;flex-wrap:wrap;gap:8px 0;padding:0;list-style:none;font:400 13px/1.6 var(--book-serif);letter-spacing:.24em;color:var(--ivory-3);animation-delay:1.2s}
.series li:not(:last-child)::after{content:"·";margin:0 .7em 0 .46em;color:var(--ivory-4)}
.entrance .enter{display:inline-flex;align-items:center;gap:18px;margin-top:48px;padding:17px 26px 17px 30px;border:1px solid rgb(236 230 218 / 32%);background:rgb(8 7 7 / 22%);color:var(--ivory);font:400 14px/1 var(--book-serif);letter-spacing:.42em;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);animation:intro-in 1.4s var(--ease) 1.4s backwards,breathe 3.8s ease-in-out 3.2s infinite}
.enter em{font:italic 400 15px/1 "Source Serif 4",Georgia,serif;letter-spacing:.04em;color:var(--ivory-2);transition:color .5s}
.enter svg{width:30px;height:10px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .6s var(--ease)}
.enter:hover,.enter:focus-visible{border-color:var(--ivory);background:var(--ivory);color:#0c0b0a}
.enter:hover em,.enter:focus-visible em{color:#0c0b0a}
.enter:hover svg{transform:translateX(6px)}
@keyframes breathe{50%{box-shadow:0 0 0 7px rgb(236 230 218 / 6%)}}
.entrance-foot{position:absolute;left:clamp(28px,8.5vw,150px);right:clamp(28px,4vw,64px);bottom:max(26px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px;margin:0;font:400 11px/1.4 var(--book-serif);letter-spacing:.26em;color:var(--ivory-3);animation:intro-in 1.4s var(--ease) 1.7s backwards}

/* Guide: the seven rooms as a list; a small print of each follows the pointer. */
.guide{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:rgb(7 6 6 / 0);transition:background .55s var(--ease)}
.guide[hidden]{display:none}
.room.guide-open .guide{background:rgb(7 6 6 / 95%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.guide-inner{width:min(960px,100%);max-height:calc(100dvh - 48px);overflow:auto;opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s var(--ease),transform .8s var(--ease)}
.room.guide-open .guide-inner{opacity:1;transform:none}
.guide-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.guide-head p{margin:0;font:400 14px/1 var(--book-serif);letter-spacing:.4em;color:var(--ivory)}
.guide-head em,.guide-foot em{margin-left:14px;font:400 10px/1 var(--ui-sans);font-style:normal;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-3)}
.guide-close{display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;background:none;color:var(--ivory-2);cursor:pointer;transition:color .3s,transform .6s var(--ease)}
.guide-close:hover{color:var(--ivory);transform:rotate(90deg)}
.guide-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1}
.guide-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ivory-4)}
.guide-list button{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"num zh meta" "num en meta";align-items:baseline;column-gap:28px;width:100%;padding:clamp(12px,2vh,20px) 6px;border:0;border-bottom:1px solid var(--ivory-4);background:none;color:var(--ivory);text-align:left;cursor:pointer;transition:padding .6s var(--ease),background .6s var(--ease)}
.guide-list button:hover,.guide-list button:focus-visible{padding-left:22px;background:linear-gradient(90deg,rgb(236 230 218 / 5%),transparent 70%)}
.g-num{grid-area:num;font:400 11px/1 var(--ui-sans);letter-spacing:.26em;color:var(--ivory-3);transition:color .4s}
.guide-list button:hover .g-num{color:var(--brass)}
.g-zh{grid-area:zh;font:600 clamp(22px,min(2.6vw,3.6vh),36px)/1.15 var(--book-serif);letter-spacing:.16em}
.g-en{grid-area:en;margin-top:6px;font:italic 400 15px/1.4 "Source Serif 4",Georgia,serif;color:var(--ivory-2)}
.g-meta{grid-area:meta;font:400 12px/1.8 var(--book-serif);letter-spacing:.08em;text-align:right;color:var(--ivory-3)}
.room.guide-open .guide-list li{animation:rise-in .9s var(--ease) backwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
.guide-foot{display:flex;gap:8px;margin-top:22px}
.guide-foot button{padding:12px 14px;border:0;background:none;color:var(--ivory-2);font:400 13px/1 var(--book-serif);letter-spacing:.3em;cursor:pointer;transition:color .3s}
.guide-foot button:hover{color:var(--ivory)}
.guide-preview{position:fixed;left:0;top:0;z-index:31;width:240px;height:320px;margin:0;overflow:hidden;pointer-events:none;opacity:0;box-shadow:0 30px 60px rgb(0 0 0 / 50%);transition:opacity .45s var(--ease)}
.guide-preview img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.2s var(--ease)}
.guide-preview.is-on{opacity:1}
.guide-preview.is-on img{transform:scale(1)}
@media (hover:none){.guide-preview{display:none}}

/* Touch screens are told once how to turn. */
.swipe-hint{position:absolute;top:58%;left:50%;z-index:6;display:flex;align-items:center;gap:14px;margin:0;padding:12px 18px;translate:-50% 0;border-radius:999px;background:rgb(10 9 8 / 72%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:400 12px/1 var(--book-serif);letter-spacing:.24em;color:var(--ivory);opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.room.show-swipe-hint .swipe-hint{opacity:1}
.swipe-hint i{position:relative;width:18px;height:1px;background:currentColor}
.swipe-hint i::before{content:"";position:absolute;top:-3px;width:7px;height:7px;border:solid currentColor;border-width:1px 0 0 1px}
.swipe-hint i:first-child{--dir:-1}
.swipe-hint i:first-child::before{left:0;transform:rotate(-45deg)}
.swipe-hint i:last-child{--dir:1}
.swipe-hint i:last-child::before{right:0;transform:rotate(135deg)}
.room.show-swipe-hint .swipe-hint i{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(calc(var(--dir) * 5px))}}

/* Screen sizes: wide screens hang the label and the wall title beside the book; narrower ones put the room's
   name under the header; phones stack everything and turn by swiping. */
@media (min-width:1200px){.wall-label,.wall-title{display:block}}
@media (max-width:1199px){
  :root{--side:64px;--chrome:206px}
  #chapter-label{display:block;order:3;flex-basis:100%;font:400 12px/1.5 var(--book-serif);letter-spacing:.14em;text-align:center;color:var(--ivory-2)}
}
@media (max-width:700px){
  :root{--chrome:196px}
  .room{padding:max(12px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom))}
  .book-header{gap:6px 12px}
  .book-header h1{font-size:16px;letter-spacing:.42em}
  .book-header .brand-en,.tool em{display:none}
  .tool{padding:0 4px 0 12px}
  #chapter-label{font-size:11px;text-align:left}
  /* Exactly one page tall: PageFlip then has nothing to centre, so the leaf below never peeks out by a
     fraction of a pixel; the light from above fills the space over the book instead. */
  .stage{align-content:end}
  .book-rig{width:100%;height:min(calc(100dvh - var(--chrome)),calc((100vw - 24px) / var(--page-ratio)),780px)}
  .controls{grid-template-columns:minmax(0,1fr);gap:2px}
  .hint,.route-name{display:none}
  .route{gap:4px}
  .controls .route button{gap:6px;padding:8px 0 4px}
  .route-num{font-size:9px}
  .pager{justify-self:stretch;justify-content:space-between}
  #previous,#next{display:grid;place-items:center;width:48px;height:42px;padding:0;border:0;border-radius:0;background:none;color:var(--ivory-2)}
  #previous svg,#next svg{width:30px;height:10px}
  #previous:disabled,#next:disabled{opacity:.15}
  .entrance{align-items:end}
  .entrance-veil{background:linear-gradient(0deg,rgb(8 7 7 / 94%) 0%,rgb(8 7 7 / 76%) 38%,rgb(8 7 7 / 20%) 72%,rgb(8 7 7 / 42%) 100%)}
  .entrance-copy{padding:0 26px calc(84px + env(safe-area-inset-bottom))}
  .entrance .name{font-size:clamp(64px,22vw,110px)}
  .entrance .subtitle{letter-spacing:.5em}
  .entrance .rule{margin:24px 0 18px}
  .entrance .series{font-size:12px;letter-spacing:.14em}
  .entrance .enter{justify-content:center;width:100%;margin-top:30px}
  .entrance-foot{left:26px;right:26px;font-size:10px;letter-spacing:.2em}
  .guide{place-items:start stretch;padding:16px}
  .guide-list button{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"num zh" "num en";column-gap:14px;padding:16px 4px}
  .g-meta{display:none}
  .g-zh{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .room *,.room *::before,.room *::after{animation:none!important}
  .entrance-slides img{transition:opacity .4s}
}