@font-face{font-family:Instrument;src:url('/assets/fonts/instrument-serif.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:DM;src:url('/assets/fonts/dm-sans.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:light;--paper:#eeeae1;--ink:#4b4d43;--muted:#8c8a7e}
*{box-sizing:border-box}html{min-width:320px;background:var(--paper)}body{margin:0;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);font-family:DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{-webkit-tap-highlight-color:transparent}button,a,[tabindex]{outline-offset:6px}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #867357}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:27px 4.45vw 0}.monogram{font-family:Instrument,Georgia,serif;font-size:46px;letter-spacing:-2px;line-height:1}.address{font-size:13px;letter-spacing:.04em;color:var(--muted)}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 10px 0;min-height:730px}.intro{text-align:center}.intro h1{font-size:23px;font-weight:400;line-height:1.4;margin:0 0 33px}.figure-section{width:min(100%,900px);display:flex;flex-direction:column;align-items:center}.figure-stage{width:100%;aspect-ratio:900/640;position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate;border-radius:28%}.figure-stage.dragging{cursor:grabbing}.figure-glow{position:absolute;inset:3% -4% -3%;z-index:-2;background:radial-gradient(ellipse,#ffffffd9,transparent 69%)}.ground{position:absolute;left:36%;bottom:5.2%;width:28%;height:5%;background:radial-gradient(ellipse,#544d4022,transparent 70%);z-index:-1}#scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}#portrait{position:absolute;pointer-events:none;left:16.25%;top:.5%;width:67.5%;height:auto;object-fit:contain;transition:opacity .2s}.figure-stage.drawn #scene{opacity:1}.figure-stage.drawn #portrait{opacity:0}.figure-controls{display:flex;gap:11px;justify-content:center;align-items:center;min-height:30px;margin-top:-8px;font-size:12px;letter-spacing:.02em;color:var(--muted);position:relative}.figure-controls button{border:1px solid #c8c5b9;border-radius:50%;width:27px;height:27px;padding:6px;background:transparent;color:#817c6e;display:grid;place-items:center;cursor:pointer}.figure-controls button:hover{background:#ffffff50}.figure-controls button[hidden]{display:none}.figure-controls svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.figure-controls .play-icon{display:none}.figure-controls button[aria-pressed=true] .play-icon{display:block}.figure-controls button[aria-pressed=true] .pause-icon{display:none}footer{display:flex;justify-content:space-between;align-items:center;padding:31px 4.45vw 34px;font-size:10px;letter-spacing:.17em;color:var(--muted)}footer>span:last-child{display:flex;align-items:center;gap:14px}footer>span:last-child span{font-size:18px;line-height:1}.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}.noscript-note{font-size:12px;color:var(--muted)}
@media(max-width:600px){.masthead{padding:26px 25px 0}.monogram{font-size:39px}.address{font-size:10px}main{padding:42px 0 20px;min-height:540px;overflow:hidden}.intro h1{font-size:20px;margin-bottom:44px}.figure-section{width:122%;max-width:none}.figure-stage{width:100%}.figure-controls{margin-top:19px;font-size:11px}.figure-controls button{width:29px;height:29px}footer{padding:26px 25px;font-size:8px}footer>span:last-child span{font-size:15px}}
@media(max-height:800px) and (min-width:601px){main{min-height:590px;padding-top:27px}.intro h1{margin-bottom:15px}.figure-section{max-width:700px}footer{padding-top:20px;padding-bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
.figure-stage.unavailable{cursor:default}

/* Fit the complete composition to the usable viewport rather than hiding page overflow. */
html{min-width:0;min-height:100%;}
body{height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.masthead{padding:clamp(12px,3vh,27px) clamp(20px,4.45vw,64px) 0;}
.monogram{font-size:clamp(30px,5.4vh,46px);}
main{min-height:0;padding:clamp(8px,2vh,20px) 16px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,2vh,24px);justify-items:center;align-items:stretch;overflow:visible;}
.intro h1{font-size:clamp(17px,2.8vh,23px);margin:0;line-height:1.35;}
.figure-section{width:100%;max-width:none;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 44px;gap:4px;align-items:stretch;}
.figure-viewport{width:100%;height:100%;min-height:0;display:grid;place-items:center;container-type:size;overflow:clip;border-radius:20px;}
.figure-viewport:has(.figure-stage:focus-visible)+.figure-controls #hint-text{outline:2px solid #867357;outline-offset:5px;border-radius:2px;}
.figure-stage{width:min(900px,100cqw,calc(100cqh * 1.40625));max-width:none;min-width:0;outline:none!important;}
.figure-controls{min-height:44px;margin:0;gap:10px;}
.figure-controls button{width:40px;height:40px;padding:12px;}
footer{padding:8px clamp(20px,4.45vw,64px) clamp(10px,2.6vh,24px);font-size:clamp(8px,1.25vh,10px);line-height:1.4;}
@media(max-width:600px){.figure-stage{width:min(900px,122cqw,calc(100cqh * 1.40625));}.figure-controls{font-size:11px;}.monogram{font-size:clamp(30px,5.4vh,39px);}}
@media(max-height:440px){main{padding-top:6px;padding-bottom:4px;gap:4px;}.masthead{padding-top:10px;}.monogram{font-size:29px;}.intro h1{font-size:17px;}footer{padding-bottom:10px;}.figure-section{grid-template-rows:minmax(0,1fr) 40px;gap:0;}}
main{grid-template-columns:minmax(0,1fr);justify-content:stretch;}

#glasses-toggle[aria-pressed=true] .glasses-slash{display:none;}
#glasses-toggle[aria-busy=true]{opacity:.55;}
.figure-controls svg{width:16px;height:16px;}

.monogram{display:block;line-height:0;font-size:0!important;letter-spacing:normal;}
.monogram img{display:block;width:210px;height:auto;max-height:52px;object-fit:contain;}
@media(max-width:600px){.monogram img{width:172px;max-height:42px;}}
@media(max-height:440px){.monogram img{width:150px;max-height:35px;}}