:root { color-scheme: light; --paper:#fafaf7; --ink:#191919; --accent:#4564b6; }
* { box-sizing: border-box; }
body { margin:0; min-height:100svh; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
.page-art { position:fixed; bottom:-1rem; right:0; width:min(78rem,100vw); height:auto; pointer-events:none; z-index:0; opacity:.32; mask-image:linear-gradient(to right, rgb(0 0 0 / .25), #000); -webkit-mask-image:linear-gradient(to right,rgb(0 0 0 / .25),#000); }
.room { position:relative; z-index:1; max-width:68rem; margin-inline:auto; padding:clamp(4rem,12vh,8rem) clamp(1.5rem,4vw,3rem); }
.room h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:clamp(2.5rem,6vw,4rem); letter-spacing:-.025em; margin:0 0 1rem; }
.room p { font-size:1.125rem; line-height:1.6; margin:0 0 1.5rem; }
.back { display:inline-block; padding:.6rem 1rem; border:1px solid #aeb9cf; color:var(--ink); text-decoration:none; background:var(--paper); }
.back:hover { border-color:var(--accent); color:var(--accent); }
.back:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
/* Quiet upper corner balances the staircase without crowding the message. */
body { position:relative; isolation:isolate; }
.page-overhang { position:fixed; top:0; right:0; width:min(60rem,85vw); height:auto; pointer-events:none; z-index:0; opacity:.12; mask-image:linear-gradient(to right,transparent,#000); -webkit-mask-image:linear-gradient(to right,transparent,#000); }
.room p { max-width:38ch; }
@media(max-width:42rem) { .page-overhang { opacity:.08; } .page-art { opacity:.2; } }

@media (max-width:42rem) {
  .page-art { width:100%; height:clamp(18rem,85vw,28rem); object-fit:cover; object-position:right bottom; }
  .page-overhang { width:100%; height:clamp(16rem,75vw,24rem); object-fit:cover; object-position:right top; }
}

/* Mirror the paper-like corner onto the left edge; stairs stay on the right. */
.page-overhang { left:0; right:auto; transform:scaleX(-1); }