@font-face{font-family:Newsreader;src:url('fonts/newsreader-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
:root{--paper:#fbf8f0;--ink:#171713;--serif:Newsreader,Georgia,'Times New Roman',serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:var(--serif);font-weight:350;-webkit-font-smoothing:antialiased}
.site{position:relative;isolation:isolate;min-height:650px;height:100svh;overflow:hidden}
#art{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-1}
.statement{position:absolute;left:13%;top:50%;transform:translateY(-52%);width:420px;max-width:35%;font-size:21px;font-weight:350;line-height:1.43;letter-spacing:-.005em}
.statement h1{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.025em;margin:0 0 28px}
.statement p{margin:0 0 21px}.statement p:last-child{margin-bottom:0}
.scene-note{position:absolute;left:66%;bottom:13%;font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#929086;display:flex;align-items:center;gap:9px;white-space:nowrap}
.phase-mark{width:4px;height:4px;background:#99968e;border-radius:50%}
.scene-caption{position:absolute;left:13%;bottom:38px;font-size:13px;font-weight:350;color:#837f76}
/* The visual page stays spare; keyboard and screen-reader users retain a motion control. */
#motion-toggle{position:absolute;right:24px;bottom:24px;border:0;background:var(--paper);font:13px var(--serif);color:var(--ink);padding:9px 12px;cursor:pointer}
#motion-toggle:not(:focus-visible){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#motion-toggle:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media(min-width:1600px){.statement{left:15%;font-size:22px;width:440px}.statement h1{font-size:22px}.scene-caption{left:15%}}
@media(max-width:1200px){.statement{left:9%;max-width:37%;font-size:20px;width:390px}.statement h1{font-size:20px}.scene-caption{left:9%}}
@media(max-width:900px){.statement{left:8%;max-width:42%;font-size:19px}.statement h1{font-size:19px}.scene-caption{left:8%}.scene-note{left:63%;font-size:8px}}
@media(max-width:640px){.site{min-height:780px}.statement{left:27px;top:64px;width:calc(100% - 54px);max-width:440px;transform:none;font-size:20px;line-height:1.4;letter-spacing:-.006em}.statement h1{font-size:20px;margin-bottom:23px;white-space:nowrap}.statement p{margin-bottom:18px}.scene-caption{left:27px;bottom:28px;font-size:12px}.scene-note{left:auto;right:27px;bottom:65px;font-size:8px;gap:7px}}
@media(max-width:359px){.site{min-height:760px}.statement{left:22px;width:calc(100% - 44px);font-size:18px}.statement h1{font-size:18px}.scene-caption{left:22px}.scene-note{right:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}