/* Full-bleed linen and wheat. The reading rhythm belongs to the visitor. */
body[data-page=opening]{--paper:#e9e4d9;--ink:#3c352b;background:var(--paper);color:#f3ead8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.opening{height:540svh;position:relative;background:#332b20}
.opening-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.opening-art,.opening-shade,.paper-arrival{position:absolute;inset:0;pointer-events:none}
.opening-art{background:#332b20;overflow:hidden}
.opening-art img,.passage-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opening-cloth{object-position:50% 18%}.opening-wheat{opacity:0;object-position:50% 50%}
.passage-canvas{opacity:0}.passage-canvas.is-ready{opacity:1}
.opening-shade{background:linear-gradient(90deg,#1c170d50,transparent 60%),linear-gradient(180deg,#17140f36,transparent 30%,transparent 75%,#201b1260)}
.opening-header{position:absolute;z-index:4;inset:max(18px,env(safe-area-inset-top)) 4vw auto;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em}
.opening-header a{display:flex;min-height:44px;align-items:center;gap:18px;text-shadow:0 1px 6px #21190d}.preview-return{opacity:.64}.skip-opening{border-bottom:1px solid #eee5d24d}
.opening-title{position:absolute;left:10vw;top:46%;transform:translateY(-50%);pointer-events:none;text-shadow:0 2px 24px #21190d55}
.opening-wordmark{font:400 clamp(27px,3vw,44px)/1.2 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:.1em}.opening-wordmark span{font:400 12px Georgia,serif;letter-spacing:.32em;vertical-align:middle;margin-left:14px}
.opening-title h1{font:400 clamp(15px,1.4vw,19px)/2 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:.28em;margin-top:31px}.title-rule{display:block;width:24px;height:1px;background:#e7d7b896;margin-top:32px}
.passage-copy{position:absolute;inset:0;pointer-events:none}.copy-panel{position:absolute;left:10vw;top:45%;width:min(450px,55vw);opacity:0;transform:translateY(-40%)}
.copy-index{display:block;font:10px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:.24em;margin-bottom:28px;color:#dfd0b5}
.copy-panel p{font:400 clamp(21px,2.25vw,34px)/1.95 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:.13em;text-shadow:0 2px 18px #24190970}
.copy-panel .name-line{font-size:clamp(17px,1.8vw,25px);margin-bottom:18px;letter-spacing:.16em}.copy-panel[data-copy="0"] p:last-child{font-size:clamp(16px,1.35vw,20px);letter-spacing:.12em}
.one-mm{white-space:nowrap;font-family:Georgia,serif;font-size:1.3em;letter-spacing:.02em}.one-mm small{font-size:.6em;margin-left:3px}
.opening-bottom{position:absolute;z-index:4;inset:auto 4vw max(30px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.14em}
.opening-caption,.reading-hint{color:#e1d6c2;font-size:9px}.passage-next{padding:12px 8px;display:flex;align-items:center;gap:32px;min-height:48px;border-bottom:1px solid #eee5d27a;font-size:12px;letter-spacing:.2em}.next-arrow{font-size:19px;line-height:1;font-family:serif}
.passage-progress{position:absolute;bottom:0;left:0;right:0;height:1px;background:#eee5d21c}.passage-progress span{display:block;width:100%;height:100%;background:#e5d2a5;transform:scaleX(0);transform-origin:left}
.paper-arrival{z-index:5;background:linear-gradient(180deg,transparent 55%,var(--paper));opacity:0}
.hibi-room{background:var(--paper);color:var(--ink);min-height:100svh;padding:64px 6vw 28px;outline:none}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:68px;gap:20px}
.room-header h2{font:400 32px/1.5 "Songti SC",serif;letter-spacing:.1em}.room-header h2 span{font:10px Georgia,serif;letter-spacing:.22em;margin-left:22px;vertical-align:middle}.replay-opening{font-size:10px;letter-spacing:.08em;min-height:44px;display:flex;align-items:center;gap:18px}
.room-entries{display:grid;grid-template-columns:1.75fr 1fr 1fr;gap:3.3vw;align-items:start}.room-entry{display:block;min-width:0}.room-entry figure{overflow:hidden;background:#d7cec0}.room-entry img{width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.2,.65,.3,1)}.room-entry:hover img{transform:scale(1.025)}
.bread-entry figure{aspect-ratio:1.35}.about-entry{margin-top:66px}.about-entry figure{aspect-ratio:.83}.days-entry{margin-top:132px}.days-entry figure{aspect-ratio:.83}.about-entry img{object-position:50% 50%}.days-entry img{object-position:48% 65%}
.entry-heading{display:flex;align-items:baseline;gap:12px;border-top:1px solid #695c433b;margin-top:24px;padding-top:17px}.entry-number{font:10px Georgia,serif;color:#776b57}.entry-heading h3{font:400 clamp(16px,1.55vw,24px)/1.5 "Songti SC",serif;letter-spacing:.07em;margin:0}.entry-arrow{margin-left:auto;font-size:18px;color:#786b55}.room-entry>p{font-size:11px;letter-spacing:.1em;color:#746a59;margin:10px 0 0 26px;line-height:1.8}
.room-footer{display:flex;justify-content:space-between;gap:20px;margin-top:95px;padding-top:20px;border-top:1px solid #695c4330;font-size:9px;letter-spacing:.16em;color:#7a705f}
body[data-page=opening] .draft-note{background:var(--paper);color:#7a705f;padding-top:20px;font-size:9px}body[data-page=opening] .draft-note a{display:block}
@media(max-width:760px){
 .opening{height:510svh}.opening-header{left:25px;right:25px;top:max(12px,env(safe-area-inset-top));font-size:9px}.opening-title{left:9vw;top:46%}.opening-wordmark{font-size:32px}.opening-wordmark span{font-size:10px;margin-left:12px}.opening-title h1{font-size:15px;letter-spacing:.18em;margin-top:24px}
 .opening-bottom{left:26px;right:26px;bottom:max(30px,env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:space-between;row-gap:8px}.opening-caption{display:none}.passage-next{font-size:11px;gap:24px}.reading-hint{font-size:8px;letter-spacing:.06em}
 .copy-panel{left:9vw;top:47%;width:83vw}.copy-panel p{font-size:23px;line-height:2.05;letter-spacing:.09em}.copy-panel .name-line{font-size:20px}.copy-panel[data-copy="0"] p:last-child{font-size:16px}.copy-index{font-size:9px;margin-bottom:24px}
 .opening-shade{background:linear-gradient(90deg,#211a0d75,#211a0d0a),linear-gradient(180deg,#211a0d22,transparent 25%,transparent 70%,#211a0d60)}
 .hibi-room{padding:40px 25px 24px}.room-header{margin-bottom:42px}.room-header h2{font-size:26px}.room-header h2 span{display:block;font-size:8px;margin:8px 0 0;letter-spacing:.2em}.replay-opening{font-size:9px}
 .room-entries{grid-template-columns:1fr;gap:48px}.about-entry,.days-entry{margin-top:0}.bread-entry figure{aspect-ratio:1.2}.about-entry figure{aspect-ratio:1.3}.days-entry figure{aspect-ratio:1.15}.days-entry img{object-position:50% 73%}.entry-heading{margin-top:19px;padding-top:15px}.entry-heading h3{font-size:21px}.room-entry>p{font-size:11px}.room-footer{margin-top:58px;font-size:8px}
}
@media(max-height:560px){.opening-title{top:44%}.opening-title h1{margin-top:16px}.title-rule{margin-top:15px}.copy-panel{top:44%}.copy-panel p{font-size:20px;line-height:1.75}.copy-index{margin-bottom:12px}.opening-bottom{bottom:16px}}
@media(prefers-reduced-motion:reduce){.opening-art img{transform:none!important}.passage-canvas{display:none}.room-entry img{transition:none}.copy-panel{transform:translateY(-40%)!important}}
/* The gallery arrives inside Lee's actual painting, not on a new flat page. */
.paper-arrival{overflow:hidden;background:#453e31;mask-image:linear-gradient(transparent,black 75%);-webkit-mask-image:linear-gradient(transparent,black 75%)}
.paper-arrival img{width:100%;height:100%;object-fit:cover;transform:scale(2.1) rotate(-15deg);opacity:.7}
.hibi-room{position:relative;isolation:isolate;overflow:clip;background:#453e31;color:#f3ead9;padding-top:75px;padding-bottom:40px}
.room-painting{position:sticky;top:0;height:100svh;width:calc(100% + 12vw);margin:-75px -6vw calc(75px - 100svh);z-index:-2;pointer-events:none;overflow:hidden}
.room-painting img{width:100%;height:100%;object-fit:cover;transform:scale(2.1) rotate(-15deg);opacity:.75}
.room-painting:after{content:"";position:absolute;inset:0;background:linear-gradient(#453e3180,#382d2540 35%,#332b2590)}
.room-header{position:relative;margin-bottom:65px}.room-header h2{font-size:30px}.replay-opening{color:#f3ead9}
.room-entry{background:#ece4d5;color:#453c2e;box-shadow:0 25px 45px #21190f50,0 1px 0 #ffffff77 inset;padding:12px 12px 23px;transition:transform 400ms ease,box-shadow 400ms ease}
.room-entry:hover{transform:translateY(-5px);box-shadow:0 32px 55px #21190f66}
.entry-heading{margin:18px 7px 0;padding-top:14px}.room-entry>p{margin-left:33px;font-size:10px}
.room-footer{color:#e8dbc2;border-color:#eee0c240;margin-top:80px}
body[data-page=opening] .draft-note{background:#332b25;color:#bfb39d}
@media(max-width:760px){.hibi-room{padding:45px 25px 28px}.room-header{margin-bottom:36px}.room-entry{padding:9px 9px 19px}.room-entries{gap:36px}.room-painting{width:calc(100% + 50px);margin:-45px -25px calc(45px - 100svh)}.room-painting img{height:100%;object-fit:cover;object-position:58% 50%;transform:scale(2.1) rotate(-15deg)}.room-footer{margin-top:45px}.room-entry:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.room-entry{transition:none}.room-entry:hover{transform:none}}
body[data-page=opening] .gate{background:#332b25;color:#f0e5ce}

/* One fixed reading cue, with no duplicate captions or chapter-entry numbers. */
.opening-bottom{justify-content:flex-end;flex-wrap:nowrap}.opening-bottom .passage-next{font-size:10px;gap:18px;border-bottom:0;letter-spacing:.16em;color:#eee4d2;text-shadow:0 1px 8px #21190d}.opening-bottom .next-arrow{font-size:16px}.room-entry>p{margin-left:7px;margin-right:7px;overflow-wrap:anywhere}

/* A real threshold: the arrival and destination share exactly one photograph. */
.paper-arrival img,.room-painting img{transform:scale(1.03)!important;object-position:50% 54%;filter:blur(3px) brightness(.72) saturate(.72);opacity:1}
@media(max-width:760px){.paper-arrival img,.room-painting img{object-position:50% 52%;filter:blur(2px) brightness(.66) saturate(.72)}}

/* The three destinations are typography within one continuous shop photograph. */
.hibi-room{height:100svh;min-height:560px;padding:0;overflow:hidden;background:#2f2923}
.room-painting{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-1}
.room-painting img{width:100%;height:100%;object-fit:cover;transform:scale(1.018)!important;filter:blur(1.4px) brightness(.69) saturate(.8);opacity:1}
.room-painting:after{background:linear-gradient(90deg,#1a1713a8 0%,#17140f3a 42%,#17140f90 100%),linear-gradient(0deg,#17140fd9 0%,transparent 35%,#17140f40 100%)}
.room-header{position:absolute;z-index:2;left:5vw;right:5vw;top:max(20px,env(safe-area-inset-top));margin:0;align-items:start}
.room-header h2{margin:0;line-height:1}.room-header h2 img{display:block;width:clamp(170px,17vw,245px);height:auto;filter:brightness(0) invert(.94);opacity:.92}
.replay-opening{padding:8px 0;font-size:11px;text-shadow:0 1px 10px #21190d}
.room-entries{position:absolute;z-index:1;inset:0;display:block}
.room-entry,.room-entry:hover{position:absolute;display:block;width:max-content;max-width:min(31vw,440px);min-width:0;margin:0;padding:14px 10px 16px;background:none;color:#f5ecd9;box-shadow:none;transform:none;text-shadow:0 1px 15px #1b1611,0 2px 3px #1b1611aa}
.bread-entry{left:7.2vw;top:43%}.about-entry{left:41vw;top:55%}.days-entry{right:8vw;top:34%}
.entry-heading{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0}
.entry-heading h3{font-size:clamp(28px,3vw,46px);line-height:1.35;letter-spacing:.045em;white-space:nowrap}
.entry-arrow{font-size:19px;color:inherit;opacity:0;transform:translate(-5px,5px);transition:opacity .25s ease,transform .25s ease}
.room-entry>p{margin:8px 0 0;min-height:1.4em;font-size:clamp(11px,.95vw,14px);line-height:1.7;letter-spacing:.08em;color:#e1d2b8}
.room-entry:hover .entry-arrow,.room-entry:focus-visible .entry-arrow{opacity:1;transform:none}
.room-entry:hover h3,.room-entry:focus-visible h3{color:#fff9ec}
.room-entry:focus-visible{outline:1px solid #f1ddad;outline-offset:5px}
.room-footer{display:none}
@media(max-width:760px){
 .hibi-room{min-height:540px}
 .room-painting img{object-position:50% 52%;filter:blur(1px) brightness(.65) saturate(.76)}
 .room-painting:after{background:linear-gradient(180deg,#17140f65 0%,transparent 31%,#17140f55 49%,#17140ff2 100%)}
 .room-header{left:24px;right:24px;top:max(16px,env(safe-area-inset-top));margin:0;align-items:start}
 .room-header h2 img{width:165px}.replay-opening{font-size:10px}
 .room-entries{inset:auto 25px max(28px,env(safe-area-inset-bottom)) 25px;display:grid;gap:2px}
 .room-entry,.room-entry:hover{position:relative;left:auto;right:auto;top:auto;max-width:100%;width:100%;padding:10px 0 12px}
 .entry-heading h3{font-size:clamp(24px,6vw,31px);white-space:normal}
 .entry-arrow{opacity:.8;margin-left:auto;font-size:15px;transform:none}
 .room-entry>p{font-size:11px;margin-top:4px}
}
@media(max-height:620px) and (min-width:761px){.room-entry>p{margin-top:3px}.bread-entry{top:38%}.about-entry{top:59%}.days-entry{top:33%}}
@media(prefers-reduced-motion:reduce){.entry-arrow{transition:none}}
/* Draw navigation marks as vectors so iOS never substitutes a color emoji. */
.text-arrow,.entry-arrow{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex:none}
.text-arrow svg,.entry-arrow svg{display:block;width:100%;height:100%}
@media(max-width:760px){
 .opening-header,.opening-bottom,.copy-index,.replay-opening{font-size:12px}
 .room-entry>p{font-size:13px}
}

/* Keep the supplied brand mark sized before its image finishes loading. */
.opening-wordmark img{display:block;width:clamp(180px,21vw,300px);height:auto;filter:brightness(0) invert(1)}
@media(max-width:760px){.opening-wordmark img{width:205px}}