@font-face{font-family:Saira;src:url('./assets/saira-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('./assets/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--page-background:#fbf7ff;--surface-radius:16px;color-scheme:light;font-family:Inter,Arial,sans-serif;color:#25272f;background:var(--page-background);font-synthesis:none;scrollbar-color:#b6a9c2 var(--page-background)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:var(--page-background)}
[hidden]{display:none!important}
::selection{background:#d8b5f3;color:#241634}
a{color:inherit;text-decoration:none;text-underline-offset:.2em}
button{font:inherit}
a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid #713caf;outline-offset:5px}
.site-header{height:60px;margin:0 clamp(24px,4.6vw,80px);border-bottom:1px solid #d5d0d6;display:flex;align-items:center}
.site-header a{display:inline-flex;align-items:center;min-height:44px}
.site-header img{display:block;width:190px;height:auto;mix-blend-mode:multiply}
.exhibition{max-width:1480px;margin:auto;padding:16px 48px;display:flex;justify-content:center;align-items:center;gap:clamp(48px,10vw,160px);min-height:calc(100svh - 60px)}
/* Reserve the demo toolbar height so the copy aligns with the artwork itself. */
.story{flex:0 1 440px;min-width:0;max-width:440px;width:100%;padding-bottom:52px;justify-self:center}
h1{font-family:Saira,sans-serif;font-size:clamp(44px,4vw,64px);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0 0 28px}
.title-link{display:block;width:fit-content;max-width:100%;border-radius:4px}
.title-link span{display:block}
.title-link .active-word{color:#7700db}
.title-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.title-link:active{opacity:.85}
.story p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;max-width:38ch;margin:0 0 22px;color:#41434e}
.contact{display:inline-flex;align-items:center;justify-content:center;gap:22px;margin-top:8px;min-height:56px;padding:16px 24px;border-radius:var(--surface-radius);background:linear-gradient(105deg,#f5c184,#ef9d4f);color:#171410;font-size:16px;font-weight:600;transition:background-color 160ms,transform 160ms}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.contact:hover{background:#f1b273;transform:translateY(-2px)}
.contact:active{transform:translateY(0)}
.presentation{flex:0 1 min(calc((100svh - 144px)*9/16),600px);display:flex;justify-content:center;min-width:0}
.viewer{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}
.stage{width:100%;aspect-ratio:9/16;border-radius:var(--surface-radius);overflow:hidden;background:#03050c;box-shadow:0 3px 8px -2px #1917242e,0 18px 36px -10px #19172433,0 38px 64px -24px #19172438}
iframe,video{display:block;width:100%;height:100%;border:0;border-radius:inherit;background:#03050c}
video{object-fit:contain}
.actions{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:8px;min-height:52px}
.actions button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 4px;background:none;border:0;color:#27252e;font-size:14px;font-weight:500;cursor:pointer;border-radius:5px}
.actions button:hover{color:#713caf}
.actions button:active{color:#492172}
.action-divider{height:24px;width:1px;background:#cfc6d5}
#status{max-width:42ch;font-size:13px;line-height:1.5;text-align:center;color:#514759;margin:12px 0 0}
.viewer:fullscreen,.viewer.focus-mode{background:var(--page-background);width:100%;height:100%;padding:20px;justify-content:center;overflow:auto}
.viewer:fullscreen .stage,.viewer.focus-mode .stage{width:min(calc((100svh - 112px)*9/16),calc(100vw - 40px),1080px);flex-shrink:0}
.viewer.focus-mode{position:fixed;inset:0;z-index:100}
body.has-focus-mode{overflow:hidden}
@media(min-width:801px) and (max-height:650px){.exhibition{min-height:574px}.presentation{flex-basis:300px}h1{font-size:48px}}
@media(max-width:800px){.site-header{height:60px;margin-inline:20px}.site-header img{width:166px}.exhibition{display:grid;grid-template-columns:1fr;gap:28px;padding:32px 16px 24px}.story{padding:0 8px;max-width:560px;margin:auto;width:100%}h1{font-size:clamp(42px,8vw,60px);margin-bottom:22px}.story p{max-width:42ch;font-size:17px;margin-bottom:18px}.stage{width:min(100%,480px)}.actions{gap:16px}}
@media(prefers-reduced-motion:reduce){.contact{transition:none}}