:root{--paper: #fff;--ink: #0f0f10;--ink-dim: #4a4744;--red: #dd2538;--step: 80ms;--serif: "EB Garamond Variable", Garamond, Georgia, "Times New Roman", serif;--typewriter: "Courier Prime", "Courier New", Courier, monospace}.copy{position:absolute;inset:0;display:grid;place-content:center;padding:4.5rem max(1.25rem,6vw);font-family:var(--serif);color:var(--ink)}.copy h1,.copy p{max-width:40rem;margin:0}.copy h1{margin-bottom:1.4rem;text-align:center;font-size:clamp(2.1rem,1.3rem + 3.2vw,3.8rem);font-weight:500;line-height:1.06;text-wrap:balance}.copy h1 span{display:inline-block}.copy p{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);line-height:1.5;text-align:justify;text-align-last:justify;color:var(--ink-dim)}.copy em{color:var(--ink)}.copy nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.75rem;margin-top:2rem}.copy :is(a,button){font-family:var(--typewriter);font-size:.85rem;letter-spacing:.06em;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;padding:.25rem 0}.copy button{background:none;border:0;cursor:pointer}.copy :is(a,button):hover{text-decoration-color:var(--red)}.copy :is(a,button):focus-visible{outline:1px solid var(--ink);outline-offset:4px}@keyframes rise{0%{opacity:0;translate:0 .5rem}}.inside{position:absolute;inset:0;overflow:auto;background:var(--paper);color:var(--ink);color-scheme:light}.inside .copy{position:relative;min-height:100%;padding-bottom:7rem}@media(width<40rem){.inside nav{flex-direction:column;align-items:center;gap:.75rem}}@media(width>=40rem){.inside nav{display:grid;grid-template-columns:1fr auto 1fr}.inside nav a:first-child{justify-self:start}.inside nav a:last-child{justify-self:end}}.inside :is(.out,.again){justify-self:center;margin-top:2.5rem}.signature{position:absolute;inset:auto 0 1.5rem;display:grid;justify-items:center;gap:.5rem}.signature small{font-family:var(--typewriter);font-size:.7rem;letter-spacing:.06em;color:var(--ink-dim)}.signature svg{width:2.8rem;height:auto;filter:url(#watercolour);mix-blend-mode:multiply;opacity:.35}.filters{position:absolute;width:0;height:0}:root{--night: #000;--light: #f4f1ea;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--light);font-family:var(--typewriter);-webkit-font-smoothing:antialiased}.studios{position:fixed;inset:0;overflow:hidden;background:var(--night);container-type:size}.scene{--band: calc(var(--ground) - var(--roof));--w: min( clamp( 100cqh * var(--ratio) / var(--band), 100cqw, 100cqh * var(--ratio) / (var(--ground) - var(--deepest)) ), 145cqw );--h: calc(var(--w) / var(--ratio));position:absolute;left:calc((100cqw - var(--w)) / 2);top:min(100cqh - var(--ground) * var(--h),(100cqh - var(--band) * var(--h)) / 2 - var(--roof) * var(--h));width:var(--w);will-change:transform;transition:transform .9s cubic-bezier(.3,0,.2,1),visibility 0s}.scene[data-picture=tall]{display:none}@container (aspect-ratio < 1){.scene[data-picture=wide]{display:none}.scene[data-picture=tall]{display:block}}.storefront{position:absolute;inset:0;width:100%;height:100%;display:block}.glass{position:absolute;display:block;opacity:0;transition:opacity 1.4s ease-out;mask-repeat:no-repeat}[data-phase=show] .glass{opacity:1}.pane{position:absolute;pointer-events:none}.door{position:absolute;color:transparent;font-size:0;cursor:pointer}.door:after{content:"";position:absolute;inset:5% 18% 23%;background:radial-gradient(ellipse 70% 55% at 50% 35%,rgba(255,236,190,.55),transparent);opacity:var(--ajar, 0);transition:opacity .4s}.door:focus-visible{outline:2px solid var(--light);outline-offset:-2px}.leaf{position:absolute;perspective:80cqh;background:radial-gradient(ellipse 90% 70% at 50% 40%,#fff4dc,#ffc56e 45%,#a8581a)}.panel{position:absolute;inset:0;overflow:hidden;container-type:size;transform-origin:100% 50%;transform:rotateY(calc(var(--ajar, 0) * -14deg));transition:transform .6s cubic-bezier(.3,0,.2,1)}.panel>img{position:absolute;display:block;max-width:none}.neon{position:absolute;top:9cqh;left:50%;translate:-50%;padding:.1em .35em .05em;font:450 15cqi/1.1 Jost Variable,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffc4c459;background:#0e080699;border-radius:.3em;--glow: calc(1 + var(--ajar, 0) / 2);--lit: 0 0 .05em #fff, 0 0 calc(.15em * var(--glow)) #ff3048, 0 0 calc(.4em * var(--glow)) #ff3048, 0 0 calc(.9em * var(--glow)) #ff1a35;transition:text-shadow .4s}.neon:before{content:"";position:absolute;bottom:100%;left:18%;right:18%;height:9cqh;border-inline:1px solid rgba(220,210,190,.45)}.gilt{position:absolute;top:60cqh;inset-inline:0;font:italic 600 16cqi / 1 var(--serif);text-align:center;color:transparent;background:linear-gradient(#fbe7a8,#c99632 55%,#f4d27b);background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}.spill{position:absolute;pointer-events:none;background:radial-gradient(ellipse 50% 100% at 50% 0,#ffc878,transparent 75%);mix-blend-mode:overlay;opacity:var(--ajar, 0);transition:opacity .4s}[data-phase=show] .neon{color:#fff1f1;text-shadow:var(--lit);animation:flicker 1.2s steps(1) 1.6s backwards}@keyframes flicker{0%,14%,34%{color:#ffc4c459;text-shadow:none}10%,30%,42%{color:#fff1f1;text-shadow:var(--lit)}}.studios[data-ajar] .scene,.scene:has(.door:focus-visible){--ajar: 1}@media(hover:hover){.scene:has(.door:hover){--ajar: 1}}.menu{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));padding:.35em .8em;font-family:var(--typewriter);font-size:.85rem;color:var(--light);background:#0009;border:0;cursor:pointer}.menu:focus-visible,.drawer a:focus-visible{outline:1px solid var(--light);outline-offset:3px}.drawer{position:absolute;inset:auto 0 0;display:grid;gap:1rem;padding:1.5rem max(1.5rem,env(safe-area-inset-left)) max(1.25rem,env(safe-area-inset-bottom));padding-right:max(7rem,env(safe-area-inset-right));background:#000000d1;backdrop-filter:blur(6px);font-family:var(--typewriter);transform:translateY(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}.studios[data-menu] .drawer{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.drawer ul{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin:0;padding:0;list-style:none}.drawer a{color:var(--light);font-size:1.05rem;text-decoration:none}.drawer a:hover{text-decoration:underline;text-underline-offset:.2em}.drawer .enter{color:#ffc878}.drawer .fine a{font-size:.8rem;opacity:.7}.inside{opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s .45s}.studios:is(:has(#inside:target),[data-leaving]) .panel{transform:rotateY(-80deg);transition-duration:.7s}.studios:is(:has(#inside:target),[data-leaving]) .spill{opacity:1}.studios:is(:has(#inside:target),[data-leaving]) .scene{transform:scale(7);visibility:hidden;transition:transform 1.25s cubic-bezier(.75,0,.3,1) .35s,visibility 0s 1.6s}.studios:is(:has(#inside:target),[data-leaving]) :is(.menu,.drawer){display:none}#inside:target{opacity:1;visibility:visible;transition:opacity .7s ease-in .9s}#inside:target .copy :is(h1 span,p,nav,.out,.signature){animation:rise .6s cubic-bezier(.2,.7,.2,1) calc(1.35s + var(--i) * var(--step)) both}@media(prefers-reduced-motion:reduce){.scene,.studios:is(:has(#inside:target),[data-leaving]) .scene,.inside,#inside:target,.glass,.door:after,.panel,.neon,.spill,.drawer,.studios[data-menu] .drawer{transition:none}#inside:target .copy :is(h1 span,p,nav,.out,.signature),[data-phase=show] .neon{animation:none}}
