/* THROWAWAY style studies. Layer scale: content 0, focused elements 1, controls 10, skip link 20.
   Motion only introduces hierarchy and acknowledges interaction. No scroll interception. */
@font-face{font-family:Bricolage;src:url('./assets/fonts/bricolage-grotesque.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Manrope;src:url('./assets/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:light;--paper:#ece9f6;--ink:#272039;--muted:#605970;--accent:#b83b29;--button:#b83b29;--button-text:#fff7f3;--line:#cdc7da;--raised:#f6f4fb;--puzzle:#e0daee;--control:#f9f8fc;--control-ink:#292333;--round:6px}
:root[data-theme=dark]{color-scheme:dark;--paper:#211e2d;--ink:#f0eaf9;--muted:#c1b8cf;--accent:#ff9a7e;--button:#ff9a7e;--button-text:#302023;--line:#524a61;--raised:#2c273b;--puzzle:#3b334e;--control:#f9f8fc;--control-ink:#292333}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:26px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 Manrope,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{touch-action:manipulation}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,h3,p,figure{margin:0}button{border:0;background:none}img{display:block;max-width:100%;height:auto}button:active,.primary:active{transform:scale(.98)}[hidden]{display:none!important}.skip{position:fixed;z-index:20;top:-100px;left:20px;background:var(--control);color:var(--control-ink);padding:12px}.skip:focus{top:10px}.navigation{max-width:1360px;margin:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 48px}.brand{display:flex;align-items:baseline;gap:18px;font:750 23px Bricolage,Arial,sans-serif;letter-spacing:-1px}.brand>span{font:11px Manrope,sans-serif;color:var(--muted);letter-spacing:0}.navigation nav{display:flex;align-items:center;gap:28px;font-size:12px}.navigation .resume{border:1px solid var(--line);padding:8px 15px;border-radius:var(--round)}.navigation .theme-toggle{font:600 12px Manrope,Arial,sans-serif;color:var(--ink);background:var(--raised);border:1px solid var(--line);padding:8px 14px;border-radius:var(--round);cursor:pointer;line-height:1;display:inline-flex;align-items:center;transition:border-color .15s ease,background .15s ease}.navigation .theme-toggle:hover{border-color:var(--accent)}main{max-width:1360px;margin:auto}.hero{position:relative}.name{font-size:11px;letter-spacing:.025em;color:var(--muted)}h1{font:750 clamp(42px,4.5vw,66px)/1.06 Bricolage,Arial,sans-serif;letter-spacing:-2.9px}h1>span{color:var(--accent)}.intro{max-width:370px;font-size:15px;line-height:1.8;color:var(--muted)}.primary{display:inline-flex;align-items:center;gap:35px;font-weight:700;font-size:12px;white-space:nowrap;background:var(--button);color:var(--button-text);padding:14px 22px;border-radius:var(--round);width:max-content}.primary:hover{text-decoration:none;filter:brightness(1.1)}.primary span{font:20px Arial}.artwork img{width:100%;height:100%;object-fit:cover}.artwork figcaption{font-size:9px;line-height:1.4;margin-top:10px;color:var(--muted)}.discovery{display:flex;gap:25px;justify-content:space-between;align-items:center;width:100%;padding:14px 0;font-size:12px;font-weight:650;text-align:left}.discovery>span{color:var(--accent);font-size:22px;font-weight:400}.discovery[aria-expanded=true]>span{transform:rotate(45deg)}.puzzle{padding:24px;background:var(--raised);border-radius:var(--round);border:1px solid var(--line)}.puzzle-title-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.puzzle h2{font:700 18px/1.2 Bricolage,sans-serif;letter-spacing:-.3px}.puzzle-reset{font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:8px}.puzzle>p{font-size:11px;color:var(--muted);margin-top:8px}.puzzle-play{display:grid;grid-template-columns:144px 1fr;gap:22px;align-items:center;margin-top:18px}.pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;aspect-ratio:1}.piece{position:relative;aspect-ratio:1;background:var(--puzzle);border-radius:3px;overflow:hidden;border:1px solid transparent}.piece:hover{border-color:var(--accent)}.piece:focus-visible{outline-offset:0;z-index:1}.pipe-wrap{position:absolute;inset:0}.pipe{position:absolute;left:50%;top:50%;width:51%;height:51%;border-top:6px solid var(--accent);border-left:6px solid var(--accent);border-top-left-radius:18px;transform:translate(-3px,-3px)}.puzzle-status{font-size:12px;line-height:1.5;font-weight:700}.puzzle-reward{font-size:11px;line-height:1.7;color:var(--muted);margin-top:8px}.hint-button{font-size:10px;padding:9px 0;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}#puzzle-hint{font-size:10px;color:var(--muted);line-height:1.6}.solved .piece{background:var(--paper);border-color:var(--accent)}.solved .puzzle-status{color:var(--accent)}.work{margin:20px 48px 0;padding:48px 0 30px;border-top:1px solid var(--line)}.work>h2{font:650 32px/1.2 Bricolage,sans-serif;letter-spacing:-1px;margin-bottom:30px}.project-list details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 1.3fr 20px;gap:30px;align-items:center;padding:21px 0}summary::-webkit-details-marker{display:none}.project-name{font:650 23px Bricolage,sans-serif;letter-spacing:-.6px}.project-short{font-size:12px;color:var(--muted)}.disclosure{font-size:22px;color:var(--accent)}details[open] .disclosure{transform:rotate(45deg)}.project-detail{padding:0 0 23px;max-width:580px;font-size:13px;color:var(--muted)}.stack{font-size:10px;margin-top:10px}.about{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:26px;margin:30px 48px 0;padding:25px 0 45px}.about img{width:76px;height:76px;object-fit:cover;border-radius:var(--round)}.about h2{font:650 20px Bricolage,sans-serif;margin-bottom:8px}.about p{font-size:12px;color:var(--muted);max-width:570px}.about>a{font-weight:650;font-size:12px}.about>a>span{color:var(--accent);margin-left:20px}footer{display:flex;justify-content:space-between;gap:20px;max-width:1264px;margin:0 auto;padding:35px 48px 45px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.study-switcher{display:none!important}
.project-detail p+p{margin-top:12px}
/* A: expressive poster typography, diagonal picture, optional puzzle unfolds below it. */
.direction-a .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:65px 48px 48px;align-items:center}.direction-a .introduction{padding-bottom:50px}.direction-a h1{font-size:clamp(40px,4.6vw,66px);line-height:1.07;margin:28px 0 25px;font-variation-settings:'wdth' 85}.direction-a h1>span{display:inline-block;transform:rotate(-2deg);transform-origin:left}.direction-a .primary{margin-top:28px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)}.direction-a .primary:active{transform:rotate(0) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.direction-a .artwork{margin:0 7px 0 0}.direction-a .artwork img{height:385px;clip-path:polygon(0 7%,95% 0,100% 92%,5% 100%);object-position:39% center}.direction-a .artwork figcaption{padding-left:5px}.direction-a .discovery{padding:14px 6px 8px;max-width:96%;transform:rotate(-1deg)}.direction-a .puzzle{margin-top:10px}.direction-a .work{margin-top:0}.direction-a .project-name{transform:rotate(-1deg)}
/* B: a large scene with a solid reading area; quiet type and a discovery below the frame. */
.direction-b .hero{margin:12px 24px 0;min-height:565px;display:flex;align-items:center;background:var(--raised);isolation:isolate;overflow:hidden;border-radius:var(--round)}.direction-b .scene{position:absolute;inset:0 0 0 38%;z-index:-1}.direction-b .artwork{height:100%}.direction-b .artwork img{object-position:43% center}.direction-b .artwork figcaption{display:none}.direction-b .introduction{position:relative;width:55%;padding:45px 35px;background:var(--raised);clip-path:polygon(0 0,86% 0,100% 100%,0 100%)}.direction-b h1{font:500 clamp(38px,3.7vw,53px)/1.12 Manrope,sans-serif;letter-spacing:-2.4px;margin:25px 0;max-width:550px}.direction-b .intro{max-width:310px;font-size:13px}.direction-b .primary{margin-top:27px;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:11px}.direction-b .primary:hover{border-color:var(--accent)}.direction-b .below-scene{margin:0 48px 0 auto;max-width:460px}.direction-b .below-scene:before{content:'Original AI-generated concept illustration for this style study.';display:block;text-align:right;font-size:9px;color:var(--muted);padding-top:10px}.direction-b .discovery{font-size:11px}.direction-b .work{margin-top:25px}.direction-b .project-list{display:grid;grid-template-columns:1fr 1fr;gap:48px}.direction-b summary{grid-template-columns:1fr 24px;gap:10px}.direction-b .project-short{grid-column:1;grid-row:2}.direction-b .disclosure{grid-column:2;grid-row:1 / span 2}.direction-b .project-name{font:500 26px Manrope,sans-serif;letter-spacing:-1px}
/* C: compact heading, landscape study, and an immediately playable mechanism. */
.direction-c .hero{padding:42px 48px 0}.direction-c .introduction{display:grid;grid-template-columns:1.6fr 1fr;column-gap:50px;align-items:start}.direction-c .name{grid-column:1;margin-bottom:20px}.direction-c h1{grid-column:1;font-size:clamp(40px,4.1vw,59px);line-height:1.03;letter-spacing:-2.5px;font-weight:800;margin-bottom:32px}.direction-c h1>span{color:var(--ink)}.direction-c .intro{grid-column:2;grid-row:2;font-size:13px;max-width:340px;margin-top:2px}.direction-c .primary{grid-column:2;grid-row:2;margin-top:90px;background:transparent;color:var(--accent);padding:0;font-size:11px}.direction-c .exploration{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;align-items:start}.direction-c .artwork img{height:305px;object-position:center 44%;border-radius:var(--round)}.direction-c .puzzle{background:transparent;border:0;padding:0}.direction-c .puzzle h2{font-size:20px}.direction-c .puzzle-play{grid-template-columns:156px 1fr;gap:20px;margin-top:30px}.direction-c .pieces{gap:5px}.direction-c .piece{background:var(--raised);border:1px solid var(--line)}.direction-c .work{display:grid;grid-template-columns:.8fr 1.8fr;gap:50px;margin-top:35px;padding-top:30px}.direction-c .work h2{font-size:25px;max-width:230px}.direction-c .project-list summary{padding-top:0;padding-bottom:18px;grid-template-columns:1fr 1.1fr 20px;gap:20px}.direction-c .project-list details+details summary{padding-top:18px}.direction-c .project-name{font-size:21px}.direction-c .project-short{font-size:11px}
@media(prefers-reduced-motion:no-preference){.introduction{animation:introduce .55s cubic-bezier(.16,1,.3,1) both}.artwork{animation:introduce .65s .1s cubic-bezier(.16,1,.3,1) both}.pipe-wrap{transition:transform .32s cubic-bezier(.2,.9,.25,1.15)}.primary,.discovery>span,.disclosure{transition:transform .2s ease,box-shadow .2s ease}.solved .pieces{animation:solved .4s ease both}#discovery-panel:not([hidden]){animation:introduce .25s ease both}.direction-a .artwork:hover img{transform:rotate(1deg)}.direction-a .artwork img{transition:transform .35s ease}@keyframes introduce{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes solved{50%{transform:scale(1.035)}100%{transform:scale(1)}}}
@media(min-width:1600px){.direction-a h1{font-size:66px}.direction-c h1{font-size:59px}}
@media(max-width:1100px){.navigation{padding-inline:30px}.brand>span{display:none}.direction-a .hero{padding:45px 30px 30px;gap:28px;grid-template-columns:1.12fr 1fr}.direction-a h1{font-size:48px}.direction-a .introduction{padding-bottom:20px}.direction-a .artwork img{height:320px}.work{margin-inline:30px}.about{margin-inline:30px}footer{margin-inline:30px}.direction-b .hero{min-height:510px;margin-inline:20px}.direction-b .introduction{padding-left:25px;width:57%}.direction-b h1{font-size:40px}.direction-c .hero{padding:35px 30px 0}.direction-c .introduction,.direction-c .exploration{grid-template-columns:1.3fr 1fr;gap:25px}.direction-c h1{font-size:44px}.direction-c .intro{font-size:12px}.direction-c .puzzle-play{grid-template-columns:130px 1fr;gap:15px}.direction-c .artwork img{height:290px}.direction-c .puzzle h2{font-size:17px}.puzzle-play{grid-template-columns:120px 1fr;gap:16px}.puzzle{padding:18px}.direction-c .work{gap:25px;grid-template-columns:.75fr 1.7fr}}
@media(max-width:767px){.navigation{padding-inline:22px;min-height:70px;gap:15px}.brand{font-size:21px;white-space:nowrap}.navigation nav{gap:14px;font-size:10px}.navigation nav>a:first-child{display:none}.navigation .resume{padding:7px 10px}.navigation .theme-toggle{padding:7px 10px;font-size:10px}.name{font-size:10px}h1{letter-spacing:-2px}.intro{font-size:13px;max-width:350px}.direction-a .hero{grid-template-columns:1fr;padding:32px 22px 0;gap:28px}.direction-a .introduction{padding-bottom:0}.direction-a h1{font-size:clamp(34px,7.7vw,54px);margin:22px 0 20px;letter-spacing:-1.5px}.direction-a .primary{margin-top:24px}.direction-a .artwork img{height:330px}.direction-a .artwork{margin:0}.direction-a .discovery{max-width:100%}.direction-a .puzzle{margin-bottom:20px}.work{margin:28px 22px 0;padding:32px 0 20px}.work>h2{font-size:27px;margin-bottom:18px}summary{grid-template-columns:1fr 20px;gap:7px;padding:20px 0}.project-short{grid-column:1;grid-row:2;font-size:11px}.disclosure{grid-column:2;grid-row:1 / span 2}.project-name{font-size:23px}.project-detail{font-size:12px}.about{margin:10px 22px 0;padding:22px 0 30px;grid-template-columns:56px 1fr;gap:17px}.about img{width:56px;height:56px}.about h2{font-size:19px;line-height:1.3}.about p{font-size:11px}.about>a{grid-column:2;width:max-content;font-size:11px}.about>a>span{margin-left:14px}footer{margin-inline:22px;padding-bottom:125px;font-size:9px}.puzzle-play{grid-template-columns:132px 1fr;gap:16px}.puzzle h2{font-size:17px}.puzzle{padding:18px}.puzzle-response{min-width:0}.direction-b .hero{margin:10px 15px 0;display:flex;flex-direction:column;align-items:stretch;min-height:0;background:transparent;overflow:visible}.direction-b .scene{position:static;order:2;z-index:0}.direction-b .artwork img{height:330px;object-position:40% center;border-radius:var(--round)}.direction-b .introduction{width:100%;clip-path:none;background:transparent;padding:24px 7px 30px}.direction-b h1{font-size:clamp(32px,7.6vw,51px);line-height:1.16;letter-spacing:-1.8px;margin:22px 0}.direction-b .intro{max-width:340px;font-size:13px}.direction-b .primary{margin-top:24px}.direction-b .below-scene{margin:0 22px;max-width:none}.direction-b .below-scene:before{text-align:left;font-size:8px}.direction-b .project-list{display:block}.direction-b .project-name{font-size:24px}.direction-b .work{margin-top:15px}.direction-c .hero{padding:32px 22px 0}.direction-c .introduction{display:block}.direction-c h1{font-size:clamp(34px,7.8vw,54px);line-height:1.08;letter-spacing:-1.7px;margin:22px 0}.direction-c .intro{font-size:13px;max-width:350px}.direction-c .primary{margin:20px 0 30px;padding:12px 0}.direction-c .exploration{grid-template-columns:1fr;gap:25px}.direction-c .artwork img{height:250px}.direction-c .puzzle{padding:22px 0;border-top:1px solid var(--line)}.direction-c .puzzle h2{font-size:21px}.direction-c .puzzle-play{grid-template-columns:155px 1fr;gap:22px;margin-top:22px}.direction-c .work{display:block;margin-top:10px;padding-top:30px}.direction-c .work h2{max-width:none;font-size:27px}.direction-c .project-list summary{grid-template-columns:1fr 20px;gap:7px;padding-block:20px}.direction-c .project-name{font-size:23px}.study-context{display:none}.study-switcher{bottom:12px;padding:8px;gap:6px;max-width:calc(100% - 16px)}.study-name{width:180px;max-width:calc(100vw - 150px)}.study-name strong{font-size:9px}.study-name small{font-size:8px}.study-switcher button{min-width:32px;padding-inline:7px}.study-switcher .theme-toggle{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}