/* Shelf edition. Physical media without a continuously rendered 3D scene. */
:root{--shelf-paper:#dedbd2;--shelf-ink:#ece9e0;--shelf-dim:#a5a69e;--shelf-bg:#191b19}
html{scroll-behavior:smooth}
body{background:var(--shelf-bg);color:var(--shelf-ink)}
body:after{inset:0;opacity:.023;animation:none;background-size:160px 160px}
body:before{display:none}
.shelf-wrap{width:calc(100% - 128px);max-width:1320px;margin-inline:auto}
.site-header,.detail-route .site-header{height:86px;padding:0 64px;position:relative;background:transparent;border:0;backdrop-filter:none}
.wordmark{font:italic 35px Georgia,serif;letter-spacing:-.08em;color:#e7e5dc}
.wordmark span{color:#a5a494}
.site-header nav{font-size:12px;gap:32px}
.site-header nav button,.site-header nav a{color:#d0d1c7}
.site-header #motion-toggle{font-size:10px;color:#999e91}
.portfolio-intro{display:flex;justify-content:space-between;align-items:flex-end;padding:37px 0 55px;gap:55px}
.portfolio-intro .eyebrow{font-size:10px;margin-bottom:17px;letter-spacing:.14em;color:#b7b9aa}
.portfolio-intro h1{font-size:clamp(3.1rem,5.5vw,5.5rem);letter-spacing:-.065em;font-weight:500;line-height:1}
.portfolio-intro h1>span{color:#9da391}
.intro-description{font-size:14px;line-height:1.8;margin:0 0 3px;color:#c3c6b9;max-width:335px}
.intro-description>span{font-size:12px;color:#8f9788}
.shelf-section{position:relative}
.shelf-topline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #3a4035;padding-top:22px;position:relative;z-index:3}
.shelf-topline h2{font:11px var(--mono);letter-spacing:.06em;color:#b7bcb0}
.shelf-topline p{font-size:11px;color:#91998a;margin:0}
.shelf-topline p>span{font-size:18px;margin-left:12px}
.shelf-stage{position:relative;padding-top:48px;background:radial-gradient(ellipse at 56% 10%,#62675c24,transparent 70%)}
.case-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px;position:relative;z-index:2;padding-inline:10px}
.case-slot{min-width:0;position:relative;perspective:1200px}
.case-button{display:block;width:100%;aspect-ratio:.695;position:relative;padding:0;isolation:isolate;perspective:1000px;outline-offset:16px!important;z-index:2}
.case-button:focus-visible{outline:1px solid #eee4c8;border-radius:4px}
.case-object{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateY(-16deg) rotateZ(-.7deg);transition:transform .32s cubic-bezier(.2,.75,.3,1);filter:drop-shadow(12px 14px 8px #0007)}
.case-slot:nth-child(even) .case-object{transform:rotateY(-16deg) rotateZ(.5deg)}
.case-button:hover .case-object,.case-button:focus-visible .case-object{transform:translateY(-12px) rotateY(-7deg) rotateZ(0)}
.case-button.is-selected .case-object{transform:translateY(-13px) translateZ(15px) rotateY(-2deg)}
.case-back{position:absolute;inset:0;border-radius:7px;background:linear-gradient(100deg,#131611,#373d31 35%,#191e16 80%,#666d59);border:1px solid #7a8270;box-shadow:inset 0 0 0 2px #0c100b,inset 0 0 0 5px #2e3628,inset 0 0 20px #000b;display:block;transform:translateZ(-7px)}
.case-back:before,.case-back:after{content:"";position:absolute;left:12%;right:12%;height:3px;border:1px solid #444b3d;box-shadow:0 1px 1px #000;top:14px}
.case-back:after{top:auto;bottom:14px}
.disc-recess{position:absolute;left:6%;right:6%;top:19%;aspect-ratio:1;border-radius:50%;background:#0c110b;box-shadow:inset 1px 2px 5px #000,0 1px 1px #6d7563;padding:5px}
.case-disc{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:conic-gradient(from 35deg,#b2b5ac,#f1f1df 6%,#677268 16%,#b4bbae 24%,#ebddba 31%,#819492 37%,#eee8d8 45%,#a3a59f 55%,#f0f0e2 66%,#798886 77%,#c4b39a 83%,#f3f0e0 94%,#b2b5ac);box-shadow:0 2px 4px #0009,inset 0 0 0 1px #e9eee096}
.case-disc:before{content:"";position:absolute;inset:7%;border:1px solid #7b807759;border-radius:50%;background:radial-gradient(circle,transparent 24%,#e5e2d6 25% 93%,transparent 94%);box-shadow:inset 0 0 0 2px #f8f7e433}
.disc-label{position:absolute;z-index:1;top:25%;left:5%;right:5%;font:700 clamp(6px,.75vw,11px) Arial,sans-serif;letter-spacing:.02em;text-align:center;color:#3c433a}
.disc-center{position:absolute;inset:42%;border-radius:50%;background:#172014;box-shadow:0 0 0 4px #aeb3a4,inset 0 1px 3px #000,0 0 0 5px #7c8574}
.case-latch{position:absolute;right:2px;top:44%;width:3px;height:12%;background:linear-gradient(#7c826d,#20271a,#7c826d);border-radius:2px}
.case-spine{position:absolute;left:-9px;top:1px;bottom:1px;width:11px;transform-origin:right;transform:rotateY(-70deg);background:linear-gradient(90deg,#10160f,#b9bdaf 15%,#52594a 32%,#272e21 77%,#898e7c);border-radius:3px 0 0 3px;border:1px solid #9aa18b;box-shadow:inset 1px 0 1px #fff3}
.case-spine>span{position:absolute;left:1px;top:18px;writing-mode:vertical-rl;color:#e3e4d9;text-transform:uppercase;font:bold 7px Arial;letter-spacing:1px}
.case-spine>small{position:absolute;bottom:8px;left:1px;writing-mode:vertical-rl;font:5px monospace;color:#c3c8b7}
.case-cover{position:absolute;inset:0;border-radius:6px;transform-origin:2px 50%;transform-style:preserve-3d;transform:translateZ(5px);background:linear-gradient(100deg,#666c5d,#eeeede 2%,#373e30 5%,#a5aa99 97%,#242b1e);box-shadow:inset 1px 0 1px #f4f5e9b3,2px 0 2px #090d08;transition:transform .44s cubic-bezier(.25,.7,.25,1);padding:3px;display:block}
.case-button.is-selected .case-cover{transform:translateZ(5px) rotateY(-48deg)}
.case-cover:after{content:"";position:absolute;inset:2px;border-radius:5px;pointer-events:none;background:linear-gradient(115deg,#fff7 0%,#fff0 5%,#fff0 38%,#fff2 49%,#fff0 63%,#fff1 78%,#fff0 94%,#fff5 100%),repeating-linear-gradient(0deg,#fff0 0 2px,#fff1 2px 2.4px,#0001 2.4px 3px);opacity:.45;mix-blend-mode:screen}
.case-bevel{position:absolute;inset:0;border-radius:6px;pointer-events:none;box-shadow:inset 0 1px 1px #f5f5e4,inset 1px 0 1px #c5c8b6,inset -1px -2px 2px #000a;display:block}
.hinge{position:absolute;left:-2px;width:4px;height:12%;background:linear-gradient(90deg,#141912,#949d84,#333d29);border:1px solid #717b60;border-radius:3px;transform:translateZ(3px)}
.hinge-top{top:13%}.hinge-bottom{bottom:13%}
.cover-print{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:4px;text-align:left;background:#242823;color:#eae9df;box-shadow:inset 0 0 14px #0004}
.cover-top{position:absolute;top:7%;left:8%;right:7%;font:500 clamp(4px,.38vw,7px)/1.4 Arial,sans-serif;letter-spacing:.09em}
.cover-title{position:absolute;top:17%;left:8%;right:5%;font:bold clamp(18px,2.15vw,32px)/.94 Arial,sans-serif;letter-spacing:-.045em;z-index:2}
.cover-bottom{position:absolute;bottom:7%;left:8%;right:7%;font:600 clamp(4px,.47vw,8px)/1.4 Arial,sans-serif;letter-spacing:.07em;z-index:2}
.cover-bottom small{display:block;font:400 clamp(4px,.37vw,6px)/1.6 Arial,sans-serif;margin-top:7px;letter-spacing:.09em}
.case-downput .cover-print{background:radial-gradient(ellipse at 50% 69%,#8c3024,#361b16 41%,#121612 76%);color:#efe3cc}
.case-downput .cover-title{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(18px,2.12vw,33px);letter-spacing:.01em;color:#e9cbaa;text-shadow:1px 2px #6b3429,2px 3px #140f0e}
.dungeon-window{position:absolute;top:36%;left:0;right:0;height:45%;overflow:hidden}
.dungeon-floor{position:absolute;bottom:-8%;left:-20%;right:-20%;height:85%;background:url('/media/floorTile.png') repeat;background-size:32px 32px;image-rendering:pixelated;transform:perspective(150px) rotateX(48deg);opacity:.4;mask-image:linear-gradient(transparent,#000 45%)}
.cover-knight{position:absolute;left:32%;bottom:18%;width:42%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 7px #0009)}
.cover-slime{position:absolute;left:8%;bottom:13%;width:25%;height:auto;image-rendering:pixelated;opacity:.8}
.case-despair .cover-print{background:linear-gradient(150deg,#c4c3b5,#e1dccc 39%,#a9aea0);color:#292f28}
.case-despair .cover-title{top:16%;font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(19px,2.4vw,37px);letter-spacing:.015em}
.case-despair .cover-title small{display:block;font:500 9px Arial;margin-bottom:8px;letter-spacing:.11em}
.cover-diagram{position:absolute;top:31%;left:3%;width:96%;height:53%;color:#475b4d}
.case-blvdle .cover-print{background:#e2decc;color:#234237}
.case-blvdle .cover-title{font-size:clamp(25px,3vw,44px);letter-spacing:-.075em}
.case-blvdle .cover-title>span{font-size:.42em;margin-left:5px}
.cover-map{position:absolute;top:34%;left:-1%;width:102%;height:46%;color:#536952;opacity:.83}
.map-coordinates{position:absolute;bottom:22%;left:8%;font:4px monospace;letter-spacing:.07em;background:#e2decc;padding:2px}
.case-engenuo .cover-print{background:linear-gradient(125deg,#293c45,#46616b 49%,#233039);color:#e7ebe7}
.case-engenuo .cover-title{font-weight:500;font-size:clamp(22px,2.8vw,40px);letter-spacing:-.07em}
.case-engenuo .cover-title>span{font-size:.3em;vertical-align:top;margin-left:3px;letter-spacing:0}
.cover-nodes{position:absolute;top:31%;left:4%;width:90%;height:53%}
.case-verbantics .cover-print{background:linear-gradient(110deg,#be6649,#d37a57 50%,#b95940);color:#231e1a}
.case-verbantics .cover-title{font:bold italic clamp(24px,3.2vw,45px)/.82 Georgia,serif;letter-spacing:-.07em;top:17%}
.case-verbantics .cover-title>span{display:block;letter-spacing:-.08em}
.cover-quotes{position:absolute;top:35%;left:10%;right:10%;bottom:18%;display:block}
.cover-quotes i{position:absolute;font:italic 145px/1 Georgia;left:-2%;top:-8%;color:#e4d7c2;text-shadow:1px 1px #f1ddc244}
.cover-quotes i+i{color:#422d27;font-size:110px;left:38%;top:5%;transform:rotate(15deg)}
.case-rubber-duck .cover-print{background:linear-gradient(100deg,#c0a976,#e0c58c 55%,#baa372);color:#282e25}
.case-rubber-duck .cover-title{font:500 clamp(23px,2.8vw,40px)/.94 Georgia,serif;letter-spacing:-.055em}
.case-rubber-duck .cover-title>span{font-family:monospace;margin-left:2px}
.duck-mark{position:absolute;top:48%;left:7%;font:500 clamp(25px,3.2vw,48px)/1 var(--mono);letter-spacing:-.09em;color:#4b513e}
.duck-rule{position:absolute;top:66%;left:8%;right:8%;height:1px;background:#81774e}
.duck-code{position:absolute;top:68%;left:9%;font:clamp(4px,.45vw,7px)/1.35 var(--mono);letter-spacing:.08em}
.case-caption{display:flex;align-items:baseline;gap:10px;margin-top:27px;padding:14px 1px 0;position:relative;z-index:3;font-size:10px;color:#9ba58f;line-height:1.4}
.case-caption>span:first-child{font:9px var(--mono);color:#66735d}
.case-caption>span:last-child{color:#c7cebd}
.shelf-ledge{position:absolute;left:0;right:0;bottom:36px;height:27px;background:linear-gradient(#555d4a,#242c1e 2px,#0d130b 8px,#252e1e 12px,#353f2b 15px,#131b0e);border-top:1px solid #6d765c;box-shadow:0 17px 25px #0008,inset 0 -1px #69765b30;z-index:1}
.shelf-ledge:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#bcc1a508 3px 4px);pointer-events:none}
.selected-project{display:grid;grid-template-columns:1.04fr 1fr;gap:8%;padding:65px 0 60px;align-items:start;min-height:445px}
.project-brief .eyebrow{font-size:9px;margin-bottom:16px;color:#9fa791}
.project-brief h2{font-size:clamp(2rem,3.3vw,3.4rem);line-height:1.08;letter-spacing:-.05em;margin:0 0 20px}
.selected-summary{font-size:15px;color:#c1c6b7;max-width:510px;line-height:1.75;margin-bottom:22px}
.selected-facts{display:grid;grid-template-columns:1fr 1.3fr;margin:0;padding:17px 0;border-top:1px solid #414a36;border-bottom:1px solid #414a36;gap:24px}
.selected-facts dt{font:9px var(--mono);letter-spacing:.06em;color:#8c997b;margin-bottom:7px}
.selected-facts dd{font-size:11px;line-height:1.7;margin:0;color:#d1d7c6}
.selected-credit{font-size:11px;color:#929f83;line-height:1.8;max-width:520px;margin:18px 0}
.selected-links{display:flex;gap:25px;align-items:center;flex-wrap:wrap}
.selected-links .project-link{font-size:12px;border-color:#a4b294;gap:26px;padding:10px 0}
.selected-links .secondary-link{font-size:11px;color:#a4af98;border-color:#48583a;gap:14px}
.selected-visual{display:block;padding:13px 13px 15px;background:linear-gradient(135deg,#363b31,#262b22);border:1px solid #515747;box-shadow:0 18px 30px -20px #000b;transform:rotate(1.1deg);transition:transform .25s;max-width:560px;margin-top:1px}
.selected-visual:hover{transform:rotate(0)}
.visual-heading{display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);letter-spacing:.07em;color:#a7b199;margin-bottom:10px}
.visual-image{aspect-ratio:1.72;overflow:hidden;background:#080c08;border:1px solid #0c1407}
.visual-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.visual-downput .visual-image{aspect-ratio:1.72;background:#050505}
.visual-downput img{object-fit:contain}
.visual-caption{display:block;font:9px/1.6 var(--mono);color:#a8b498;margin-top:12px}
.selected-geometry{width:100%;height:100%;position:relative;background:linear-gradient(135deg,#d5d4c4,#aeb9a6);color:#1f3527;overflow:hidden}
.selected-geometry .cover-diagram{position:absolute;width:80%;height:115%;left:5%;top:-15%;color:#425d4b;transform:rotate(-8deg)}
.selected-geometry>span{position:absolute;bottom:17px;left:20px;right:20px;font:9px var(--mono);color:#314d37}
.portfolio-note{border-top:1px solid #394630;padding:43px 0 50px;display:flex;justify-content:space-between;gap:40px;align-items:center}
.portfolio-note>p{font-size:21px;line-height:1.55;letter-spacing:-.025em;margin:0;color:#b5c0a7}
.portfolio-note em{color:#929f84;font-size:22px}
.portfolio-note .project-link{font-size:12px;border-color:#6d7c5b}
.site-footer{background:transparent;border-top:1px solid #394630;padding:22px 0 30px;color:#839372;font-size:9px;gap:25px}
.detail-route .site-header{border-bottom:1px solid #394630}
.detail-route #detail-view{background:#161a13}
.detail-route .wrap{max-width:1250px}
.detail-route .site-footer{margin-top:0}
.no-motion *,.no-motion *:before,.no-motion *:after{animation:none!important;transition:none!important}
@media(min-width:1600px){.case-shelf{gap:43px}.case-caption{font-size:12px}.cover-top{font-size:6px}.cover-title{font-size:35px}}
@media(max-width:1100px){
.shelf-wrap{width:calc(100% - 80px)}.site-header{padding-inline:40px}.case-shelf{gap:23px}.case-caption{font-size:9px;gap:6px}.case-caption>span:first-child{font-size:8px}.case-spine>span{font-size:5px}
.portfolio-intro{padding-top:30px;padding-bottom:40px;gap:30px}.intro-description{font-size:12px;max-width:290px}.intro-description>span{font-size:11px}
.cover-quotes i{font-size:115px}.cover-quotes i+i{font-size:85px}.selected-project{gap:6%;padding-top:50px}.selected-summary{font-size:14px}.selected-facts{gap:15px}
}
@media(max-width:760px){
.shelf-wrap{width:calc(100% - 44px)}.site-header,.detail-route .site-header{padding:0 22px;height:72px}.wordmark{font-size:31px}.site-header nav{gap:22px;font-size:11px}.site-header #motion-toggle{font-size:9px}
.portfolio-intro{display:block;padding:28px 0 34px}.portfolio-intro h1{font-size:3.7rem}.portfolio-intro .eyebrow{font-size:8px;margin-bottom:13px}.intro-description{max-width:none;margin-top:23px;font-size:13px}.intro-description>span{font-size:11px}
.shelf-topline{padding-top:17px}.shelf-topline h2{font-size:10px}.shelf-topline p{font-size:9px}.shelf-topline p>span{display:none}
.case-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:33px 24px;padding-inline:6px}.shelf-stage{padding-top:34px}.case-object{transform:rotateY(-12deg)}.case-slot:nth-child(even) .case-object{transform:rotateY(-12deg)}
.case-button.is-selected .case-object{transform:translateY(-6px) rotateY(-2deg)}.case-button.is-selected .case-cover{transform:translateZ(5px) rotateY(-37deg)}
.case-caption{font-size:9px;margin-top:12px;padding-top:8px;gap:5px}.case-caption>span:first-child{font-size:7px}
.shelf-ledge{display:none}.case-slot:after{content:"";position:absolute;bottom:30px;height:13px;left:-12px;right:-12px;background:linear-gradient(#5b6650,#151d10 2px,#2d3923 6px,#141d0e);box-shadow:0 8px 12px #0007;z-index:0}
.cover-top{font-size:4px}.cover-title{font-size:27px}.cover-bottom{font-size:5px}.cover-bottom small{font-size:4px}
.case-downput .cover-title{font-size:24px}.case-despair .cover-title{font-size:27px}.case-despair .cover-title small{font-size:6px;margin-bottom:5px}
.case-blvdle .cover-title{font-size:34px}.case-engenuo .cover-title{font-size:30px}.case-verbantics .cover-title{font-size:34px}.case-rubber-duck .cover-title{font-size:30px}.duck-mark{font-size:34px}.duck-code{font-size:5px}.cover-quotes i{font-size:105px}.cover-quotes i+i{font-size:85px}
.selected-project{grid-template-columns:1fr;gap:35px;padding:39px 0 45px;min-height:0}.project-brief h2{font-size:2.5rem}.selected-summary{font-size:14px}.selected-facts dd{font-size:11px}.selected-visual{max-width:none;transform:none}
.portfolio-note{display:block;padding:30px 0}.portfolio-note>p,.portfolio-note em{font-size:19px}.portfolio-note .project-link{margin-top:20px}
.site-footer{font-size:8px;flex-wrap:wrap;justify-content:space-between;gap:15px}
}
@media(max-width:430px){
.case-shelf{gap:28px 17px}.cover-title{font-size:21px}.case-downput .cover-title{font-size:20px}.case-despair .cover-title{font-size:23px}.case-blvdle .cover-title{font-size:28px}.case-engenuo .cover-title{font-size:25px}.case-verbantics .cover-title{font-size:28px}.case-rubber-duck .cover-title{font-size:26px}.duck-mark{font-size:28px}.cover-quotes i{font-size:90px}.cover-quotes i+i{font-size:70px}.cover-bottom{font-size:4px}.cover-bottom small{font-size:3px;margin-top:4px}.cover-top{font-size:3px}.case-caption>span:first-child{display:none}.case-caption{font-size:8px}.case-spine{width:8px;left:-6px}
.portfolio-intro h1{font-size:clamp(2.6rem,13.3vw,3.25rem)}.case-caption{min-height:22px}.case-slot:after{bottom:27px}
}
@media(max-width:350px){.case-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.case-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}