*{box-sizing:border-box}
html{background:#17120d;color:#f9eedf}
body{margin:0;font-family:'Yu Mincho','Hiragino Mincho ProN',Georgia,serif}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 3.8vw;background:#eee9df;color:#30251a}
header>a:first-child{font:28px Georgia,serif;letter-spacing:-.04em}
header span{font:10px Arial;letter-spacing:.22em}
header>a:last-child{font:11px sans-serif}
main{height:260svh}
.window{position:sticky;top:0;height:100svh;min-height:400px;overflow:hidden;background:#2c1c0b;isolation:isolate}
.bread,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;display:block}
canvas{opacity:0;transition:none}
.ready canvas{opacity:1}
.glass-edge{position:absolute;inset:16px;border:1px solid #ffe6ba25;box-shadow:inset 0 0 20px #150d0718;pointer-events:none}
.intro{position:absolute;top:8%;left:6%;pointer-events:none}
.intro p,.final p{font:10px Arial;letter-spacing:.22em}
.intro h1{font-weight:400;font-size:clamp(34px,5.1vw,76px);margin:24px 0 18px;letter-spacing:.06em}
.intro span{font:12px sans-serif;letter-spacing:.08em;color:#e7d7be}
.final{position:absolute;left:6%;bottom:15%;pointer-events:none;text-shadow:0 2px 22px #0009}
.js .final{opacity:var(--finish,0);transform:translateY(calc((1 - var(--finish,0))*8px))}
.final h2{font-weight:400;font-size:clamp(34px,4.4vw,65px);margin:18px 0 0;letter-spacing:.035em}
.js .intro{opacity:var(--intro,1)}
.bottom{position:absolute;bottom:calc(36px + var(--header-offset,68px));left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:16px;font:10px Arial;letter-spacing:.14em}
.instruction{opacity:var(--cue,1)}
.instruction b{font-size:21px;margin-left:20px;font-weight:400}
.controls{display:flex;gap:8px}
button{font:11px sans-serif;color:#f5e9d7;border:1px solid #e9d7bd55;background:#241a1070;border-radius:25px;padding:11px 18px;cursor:pointer;backdrop-filter:blur(9px);min-height:44px}
button:hover{background:#49321dcc;border-color:#ecd0a6a0}
button:focus-visible,a:focus-visible{outline:2px solid #eba945;outline-offset:6px}
.cursor{position:absolute;left:0;top:0;width:50px;height:50px;border:1px solid #f7eadd66;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.cursor::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#f7eaddaa;top:calc(50% - 1.5px);left:calc(50% - 1.5px)}
.cursor span{display:none}
.window.pointing{cursor:none}
.window.pointing .cursor{opacity:1}
.window.pointing button{cursor:pointer}
footer{min-height:40svh;background:#eee9df;color:#32251c;padding:8vh 6%;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
footer p{font-weight:400;font-size:clamp(25px,4vw,52px);grid-column:1/-1;margin:0}
footer span,footer a{font:11px sans-serif}
footer i{margin:0 16px}
.js .window:not(.ready):not(.fallback) .bread{filter:blur(32px) brightness(.91) contrast(.73) sepia(.08);transform:scale(1.06)}
.fallback .intro,html:not(.js) .intro{display:none}
.js .fallback .final{opacity:1;transform:none}
.fallback .instruction,html:not(.js) .instruction{visibility:hidden}
html:not(.js) main,main:has(.fallback){height:auto}
html:not(.js) .window,main:has(.fallback) .window{position:relative}
@media(max-width:650px){
  header{height:58px;padding:0 6%}header>a:first-child{font-size:24px}
  .intro{top:8%;left:8%}.intro h1{font-size:42px;margin:20px 0 16px}.intro span{font-size:10px}
  .bread{object-position:center 56%}.glass-edge{inset:10px}
  .final{left:8%;bottom:20%}.final h2{font-size:33px}
  .bottom{bottom:calc(26px + var(--header-offset,58px));left:8%;right:8%;align-items:flex-start;flex-direction:column;gap:18px}
  .instruction{font-size:9px}button{font-size:10px;padding:10px 15px}
  .cursor{display:none}footer{grid-template-columns:1fr}footer p{grid-column:1}main{height:245svh}
}
@media(prefers-reduced-motion:reduce){
  main{height:auto}.window{position:relative}.intro{display:none}
  .js .final{opacity:1;transform:none}.instruction{visibility:hidden}
  .js .window:not(.ready):not(.fallback) .bread{filter:none;transform:none}
}
@media(max-height:520px) and (min-width:651px){
  .intro{top:8%}.intro h1{font-size:35px;margin:12px 0}.final h2{font-size:32px}
  .bottom{bottom:calc(26px + var(--header-offset,68px))}.final{bottom:23%}
}