@font-face{font-family:Eiko;src:url('assets/eiko-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:HK;src:url('assets/hk-grotesk-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#fcf6ee;--blue:#0075ff;--mark:#1c40cf;--nav-inset:64px;--content-inset:96px;--section-space:128px}
*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--blue)}body{font-family:HK,Arial,sans-serif;font-size:18px;line-height:28px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}button:hover,a:hover{text-decoration:line-through}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}p,h1,h2{margin:0}h1,h2{font-family:Eiko,Georgia,serif;font-weight:400;letter-spacing:0}.page{min-height:max(100svh,900px);display:flex;flex-direction:column}.site-header{height:88px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--nav-inset);font-size:20px}.work-link{justify-self:start}.play-link{justify-self:end}.brand{display:flex;width:49px;height:23px}.brand img{display:block}.brand:hover{transform:rotate(-6deg)}main{flex:1;padding:var(--section-space) var(--content-inset);outline:none}.introduction{display:flex;flex-direction:column;gap:48px}.eyebrow{font-size:12px;line-height:18px}h1{font-size:88px;line-height:92px}h1 span{display:block}.intro-copy{max-width:700px;position:relative}.intro-copy:before{content:'';position:absolute;inset:0 auto 0 -12px;width:1px;background:var(--blue);opacity:.22}.menu-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}.menu-toggle span{width:24px;height:2px;background:var(--mark)}dialog{background:var(--paper);color:var(--blue);border:0}dialog::backdrop{background:rgb(0 30 80 / .2);backdrop-filter:blur(6px)}.close{font-family:HK,Arial,sans-serif;font-size:36px;line-height:44px;width:44px;height:44px}.detail{width:min(600px,calc(100% - 48px));padding:64px 48px}.detail .close{position:absolute;right:16px;top:12px}.detail h2{font-size:44px;line-height:1.1;margin:28px 0}.detail>p:not(.eyebrow){margin-bottom:32px}.detail>a{text-decoration:underline}.mobile-menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0 24px}.menu-header{height:88px;display:flex;align-items:center;justify-content:space-between}.mobile-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:48px;font-size:40px;line-height:48px}.skip-link{position:fixed;top:-100px;left:24px;padding:12px;background:var(--paper);z-index:10}.skip-link:focus{top:8px}.introduction{animation:arrive .65s ease-out both}.brand{transition:transform .2s ease}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1440px){.page{min-height:max(100svh,1000px)}}
@media(max-width:900px){:root{--nav-inset:32px;--content-inset:48px}h1{font-size:64px;line-height:1.08}}
@media(max-width:600px){:root{--nav-inset:24px;--content-inset:24px;--section-space:80px}.page{min-height:max(100svh,900px)}.site-header{display:flex;justify-content:space-between}.desktop-link{display:none}.menu-toggle{display:flex}.introduction{gap:32px}main{padding-bottom:96px}h1{font-size:44px;line-height:48px;max-width:342px}.intro-copy{max-width:342px}.detail{padding:64px 24px}.detail h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Combined Home + Work — Figma 1589:640 / 1589:693. */
@font-face{font-family:HK;src:url('assets/hk-grotesk-medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body:has(dialog[open]){overflow:hidden}
.page{min-height:0;display:block}
.site-header{position:fixed;inset:0 0 auto;z-index:5;background:var(--paper)}
main{padding:0;display:block}
.snap-section{scroll-snap-align:start;scroll-snap-stop:normal;outline:none;min-height:100svh}
.hero{position:relative;padding:216px var(--content-inset) 140px}
.introduction{max-width:1600px;margin-inline:auto}
h1{font-size:88px;line-height:92px}
.mobile-title{display:none}
.scroll-cue{position:absolute;bottom:32px;left:calc(50% - 22px);display:block;width:44px;height:44px}
.scroll-cue img{display:block;width:44px;height:44px}
.scroll-cue:hover{transform:translateY(4px)}
.work-section{display:flex;flex-direction:column}
.work-showcase{flex:1;min-height:calc(100svh - 124px);display:grid;grid-template-columns:minmax(0,560fr) minmax(0,592fr);gap:64px;align-items:center;padding:88px 64px 88px 160px}
.project-list{display:flex;flex-direction:column;min-width:0}
.project{display:flex;align-items:center;gap:24px;min-height:80px;width:100%;border-bottom:1px solid transparent;text-align:left;font-weight:500;font-size:32px;line-height:44px;letter-spacing:.4px;transition:opacity 180ms ease,border-color 180ms ease}
.project-index{flex:0 0 24px;font-size:12px;line-height:18px;font-weight:400;letter-spacing:0}
.project:hover{text-decoration:none}
.project-list.has-active .project:not(.is-active){opacity:.45}
.project.is-active{border-bottom-color:var(--blue)}
.project-preview{position:relative;display:grid;place-items:center;min-width:0;height:600px;max-height:calc(100svh - 220px);pointer-events:none}
.preview-art{grid-area:1 / 1;display:block;width:min(100%,560px);height:auto;max-height:100%;object-fit:contain;opacity:0;transition:opacity 180ms ease}
.preview-art.is-active{opacity:1}

.detail-preview{display:block;width:100%;max-height:300px;object-fit:contain;margin:0 0 24px}
.detail{max-height:calc(100dvh - 48px);overflow:auto}
@media(min-width:1600px){.hero{padding-top:clamp(216px,24svh,300px)}.work-showcase{padding-left:max(160px,calc((100vw - 1440px)/2 + 160px));padding-right:max(64px,calc((100vw - 1440px)/2 + 64px))}}
@media(max-width:1100px){.work-showcase{padding-inline:64px;gap:32px}.project{font-size:28px;line-height:36px}}
@media(max-width:900px){.hero{padding-top:168px}h1{font-size:64px;line-height:1.08}.work-showcase{padding-inline:48px}.project{font-size:24px;line-height:32px;gap:16px}}
@media(max-width:600px){.page{min-height:0}.hero{padding:168px 24px 140px}.desktop-title{display:none}.mobile-title{display:block}h1{font-size:44px;line-height:48px;max-width:342px}.introduction{margin:0}.work-showcase{display:flex;align-items:center;padding:88px 24px;min-height:calc(100svh - 124px)}.project-list{width:100%}.project{min-height:88px;font-size:24px;line-height:32px;letter-spacing:0}.project-preview{display:none}.project-list.has-active .project:not(.is-active){opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}.scroll-cue:hover{transform:none}}
/* Export includes the tablet's original shadow outside its 560px artboard. */
.preview-art[data-preview="whim-business"]{width:110.98%;max-width:657px;max-height:none;transform:translateY(10.1%)}

/* Persistent corner navigation is separate from the end-of-page footer. */
:root{--bottom-nav-height:calc(124px + env(safe-area-inset-bottom,0px))}
.bottom-navigation{position:fixed;inset:auto 0 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:40px var(--nav-inset) calc(40px + env(safe-area-inset-bottom,0px));font-size:20px;line-height:28px;pointer-events:none}
.bottom-navigation>a,.bottom-navigation>button{display:flex;align-items:center;min-height:44px;pointer-events:auto}
.work-section{padding-bottom:var(--bottom-nav-height)}
.work-showcase{min-height:calc(100svh - var(--bottom-nav-height))}
.site-footer{display:flex;flex-direction:column;gap:168px;padding:26px 74px calc(26px + var(--bottom-nav-height));font-size:18px;line-height:normal;letter-spacing:1px;scroll-snap-align:end}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:48px}
.footer-contact{display:flex;align-items:center;gap:74px;font-size:24px;min-height:44px}
.footer-contact img{flex:none;display:block}
.footer-links{display:flex;align-items:center;gap:42px;flex-wrap:wrap}
.footer-links>a,.footer-links>span{display:flex;align-items:center;min-height:44px}
.footer-links [aria-disabled="true"]{cursor:default}
.copyright{text-align:center}
@media(max-width:900px){.site-footer{padding-inline:var(--nav-inset)}.footer-contact{gap:24px}.footer-links{gap:24px}.footer-top{gap:32px;flex-wrap:wrap}}
@media(max-width:600px){.site-footer{gap:80px;padding-top:40px}.footer-top{flex-direction:column;align-items:flex-start}.footer-links{column-gap:24px;row-gap:8px;font-size:16px}.copyright{font-size:14px}.work-showcase{min-height:calc(100svh - var(--bottom-nav-height))}}