@font-face{font-family:Segalecy;src:url('assets/segalecy.ttf')}@font-face{font-family:'IU Segalecy';src:url('assets/segalecy.ttf')}@font-face{font-family:'IU Sallim';src:url('assets/sallim.ttf')}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#181411;color:white}body{font-family:Segalecy,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #fff;outline-offset:5px}[hidden]{display:none!important}
#experience{position:fixed;inset:0;overflow:hidden;isolation:isolate}#movie{position:absolute;top:0;left:50%;width:calc(1920px * var(--scale,1));height:calc(1080px * var(--scale,1));transform:translateX(-50%);object-fit:cover;object-position:center top}
#chrome{position:absolute;inset:0;z-index:20;pointer-events:none;color:#fffaf5}.frost{position:absolute;top:-20px;left:0;right:0;height:115px;backdrop-filter:blur(14px) saturate(.8);background:linear-gradient(180deg,#2528317a,#747a852e);mask-image:linear-gradient(#000 0%,#000e 25%,#0006 62%,transparent)}header{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;padding:5px 27px;pointer-events:auto}header button{background:none;border:0;color:inherit}header .brand{justify-self:start;padding:0;display:flex}.brand img{width:28.5px;height:22.5px;object-fit:contain}header nav{display:flex;gap:25.5px;align-items:center}header nav button{font:400 9px Segalecy;letter-spacing:.3px;padding:7.5px 0;min-height:27px;opacity:.8;text-shadow:0 1px 6px #20232b66}header nav button:hover,header nav button[aria-current]{opacity:1;filter:drop-shadow(0 0 5px #fff6)}#search-toggle{justify-self:end;width:24px;height:24px;padding:5px}#search-toggle svg{width:12.75px;height:12.75px}#search-panel{position:absolute;right:27px;top:44px;width:280px;background:#f4f1ec;color:#302f32;padding:20px;pointer-events:auto;box-shadow:0 12px 40px #0003}#search-panel label{font-size:11px}#search-panel input{width:100%;margin-top:12px;padding:10px 0;background:none;border:0;border-bottom:1px solid #aaa;font:16px Arial}#results{display:grid}#results button{border:0;background:none;text-align:left;font-size:12px;padding:12px 0;color:inherit}
.loop-buffer{position:absolute;top:0;left:50%;width:calc(1920px * var(--scale,1));height:calc(1080px * var(--scale,1));transform:translateX(-50%);opacity:0;pointer-events:none;z-index:-1}
.scene-layer,#iu-letter-contact .scene,#iu-portfolio .stage{position:absolute;left:calc(50% - 960px * var(--scale));top:0;width:1920px;height:1080px;transform:scale(var(--scale));transform-origin:top left}
.copy-layer{position:absolute;z-index:3;transform-origin:center;will-change:filter,opacity,transform;text-shadow:0 2px 15px #24191055}#about{right:4%;top:13%;width:36%;max-height:80%;display:flex;flex-direction:column;gap:20px}.about-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.about-heading h1{font-size:clamp(24px,3.5vw,64px);line-height:1.15;margin:0;font-weight:400}.about-heading img{width:30%;aspect-ratio:3/4;object-fit:cover;object-position:66% 40%;border-radius:2px}#about-text{font-size:clamp(11px,1.03vw,19px);line-height:1.65;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff5 transparent;font-weight:400}#about-text p{margin:0 0 1em}#portfolio-intro{right:5%;top:13%;width:31%}#portfolio-intro h2{font-size:clamp(28px,3.5vw,64px);font-weight:400;margin:0 0 18px}#portfolio-intro p{font-size:clamp(13px,1.1vw,21px);line-height:1.8}
#book-buttons{z-index:4;pointer-events:none}#book-buttons button{position:absolute;width:66px;height:66px;border:1px solid #ffffffad;border-radius:50%;transform:translate(-50%,-50%);background:#ffffff18;backdrop-filter:blur(6px);box-shadow:inset 0 1px 8px #fff3,0 5px 30px #321c1740;color:white;pointer-events:auto;transition:background .2s,box-shadow .2s}#book-buttons button:hover{background:#fff4;box-shadow:0 0 25px #fffc}#book-buttons span{font-size:16px}
#iu-portfolio{position:absolute;inset:0;width:100%;height:100%;z-index:10;background:transparent;overflow:hidden}#iu-portfolio .book{position:absolute;inset:0;min-height:0!important;height:100%;aspect-ratio:auto;background:transparent}#iu-portfolio .stage{margin:0;top:0}#iu-portfolio .close-book{left:313px;top:124px}#iu-portfolio .close-book svg{width:30px;height:30px}#iu-portfolio .more{left:1422px;top:943px}#iu-portfolio .presentation{inset:10%;border-radius:0}#iu-portfolio .intro p{font-size:16px}#iu-portfolio .intro small{font-size:11px}#iu-portfolio .veil{position:absolute;inset:0}
#iu-letter-contact{position:absolute;inset:0;z-index:5;pointer-events:none}#iu-letter-contact .scene{--scene-scale:var(--scale)}#iu-letter-contact .field,#iu-letter-contact .send{pointer-events:auto}#iu-letter-contact .field{transform:matrix(1.008,.214,-.288,.989,0,0)}#iu-letter-contact .name{left:1125px;top:236px}#iu-letter-contact .mail{left:1100px;top:325px}#iu-letter-contact .message{left:1053px;top:445px}#iu-letter-contact .send{left:353px;top:564px}#contact-title{bottom:8%;left:5%;font-size:clamp(25px,3.2vw,62px);font-weight:400;margin:0}
#thank-you{position:absolute;right:13%;top:23%;text-align:center;z-index:4;pointer-events:none}#thank-you h2{font-size:clamp(30px,4vw,76px);font-weight:400;text-shadow:0 2px 20px #0005}
#scroll-hint{position:absolute;z-index:6;left:50%;bottom:5%;transform:translateX(-50%);height:5vh;min-height:32px;color:#fff;display:grid;justify-items:center;filter:drop-shadow(0 0 9px #fff9);animation:hint-glow 2s ease-in-out infinite;pointer-events:none}#scroll-hint svg{height:100%;width:auto;animation:bob 1.8s ease-in-out infinite}#scroll-hint>span{font-size:8px;letter-spacing:2px;margin-top:5px}.heart-shape{display:none}#scroll-hint.heart{height:58px;width:64px;filter:none;bottom:7%}#scroll-hint.heart .heart-shape{display:block;position:absolute;inset:5px 9px;background:#ff193b;transform:rotate(-45deg);animation:heartbeat 1.2s ease-in-out infinite}#scroll-hint.heart .heart-shape:before,#scroll-hint.heart .heart-shape:after{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:inherit}.heart-shape:before{top:-50%}.heart-shape:after{left:50%}#scroll-hint.heart svg{position:relative;height:38px;top:0;z-index:1}#scroll-hint.heart>span{margin-top:18px}#status{position:absolute;bottom:20px;left:20px;z-index:40;max-width:350px;padding:13px 18px;background:#241c17d9;backdrop-filter:blur(10px);font:14px/1.5 Arial;color:white}
#loading,#retry{position:absolute;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);font:12px Segalecy;letter-spacing:3px}#loading span{display:block;margin-top:15px;height:1px;background:white;animation:hint-glow 1s infinite}#retry{padding:18px;border:1px solid #fff7;background:#2b241ddd;color:white}
@keyframes hint-glow{50%{opacity:.45;filter:drop-shadow(0 0 18px white)}}@keyframes bob{50%{transform:translateY(7px)}}@keyframes heartbeat{0%,100%{transform:rotate(-45deg) scale(1)}20%{transform:rotate(-45deg) scale(1.15)}40%{transform:rotate(-45deg) scale(1)}60%{transform:rotate(-45deg) scale(1.1)}}
.about-heading img{height:18vh;width:auto;max-width:30%}#about-text{font-size:clamp(11px,.95vw,18px);line-height:1.55}#about-text p{margin-bottom:.8em}
@media(max-width:600px){header{padding:4px 10px;gap:8px}header nav{gap:10px}header nav button{font-size:7px}.brand img{width:23px;height:18px}#about{width:48%;right:4%;top:12%;max-height:72%;gap:12px}.about-heading h1{font-size:22px}#about-text{font-size:11px;line-height:1.6}.about-heading img{width:28%;height:auto}#portfolio-intro{width:48%;right:4%;top:11%}#portfolio-intro h2{font-size:23px}#portfolio-intro p{font-size:11px}#iu-portfolio .intro p{font-size:12px}#thank-you{right:8%;top:21%}}
@media(prefers-reduced-motion:reduce){#scroll-hint,#scroll-hint svg,#scroll-hint .heart-shape{animation:none!important}}
/* About glass and header revision */
header{gap:18px;padding:6px 32.4px}.brand img{width:34.2px;height:27px}header nav{gap:30.6px}header nav button{font-size:10.8px;letter-spacing:.36px;padding:9px 0;min-height:32.4px}#search-toggle{width:28.8px;height:28.8px;padding:6px}#search-toggle svg{width:15.3px;height:15.3px}#search-panel{top:52.8px;right:32.4px}
#about{top:11%;width:38%;max-height:84%;gap:0;perspective:1100px;transition:opacity .16s linear,filter .18s linear,transform .18s ease-out;text-shadow:0 1px 8px #17202855}
.about-glass{--rx:0deg;--ry:0deg;--tx:0px;--ty:0px;--light-x:70%;--light-y:20%;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px;min-height:0;padding:clamp(18px,1.7vw,32px);border:1px solid #ffffff70;border-radius:30px;background:linear-gradient(135deg,#ffffff2b,#ffffff08 48%,#ffffff1a),#1f293540;backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 1px #ffffffb0,inset 1px 0 1px #ffffff55,inset 0 -1px 2px #ffffff38,0 24px 70px #20180f30,0 5px 14px #20180f18;transform:translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.about-glass:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff5,transparent 58%);opacity:.65}
.about-glass:after{content:'';position:absolute;inset:3px;border-radius:27px;border:1px solid #ffffff16;pointer-events:none;z-index:-1}
.about-glass .about-heading{flex-shrink:0}.about-glass .about-heading h1{font-size:clamp(24px,3vw,58px)}.about-glass .about-heading img{height:14vh;border-radius:12px;box-shadow:0 8px 24px #1113}#about-text{min-height:0;font-size:clamp(11px,.9vw,17px);line-height:1.5}#about-text p:last-child{margin-bottom:0}
@media(max-width:600px){header{padding:4.8px 12px;gap:9.6px}header nav{gap:12px}header nav button{font-size:8.4px}.brand img{width:27.6px;height:21.6px}#about{width:60%;right:4%;top:12%;max-height:78%}.about-glass{padding:14px;gap:12px;border-radius:22px}.about-glass .about-heading h1{font-size:20px}.about-glass .about-heading img{height:9vh;max-width:32%}#about-text{font-size:10px}}
@media(prefers-reduced-motion:reduce){#about,.about-glass{transition:none}.about-glass{transform:none}}
/* Grift typography and soft opal glass, October 4 */
@font-face{font-family:'Grift';src:url('assets/grift-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Grift';src:url('assets/grift-black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
header{gap:21.6px;padding:7.2px 38.88px}.brand img{width:41.04px;height:32.4px}header nav{gap:36.72px}header nav button{font-size:12.96px;letter-spacing:.432px;padding:10.8px 0;min-height:38.88px}#search-toggle{width:34.56px;height:34.56px;padding:7.2px}#search-toggle svg{width:18.36px;height:18.36px}#search-panel{top:63.36px;right:38.88px}
#about{top:21%;right:5%;width:35%;max-height:73%;text-shadow:0 1px 12px #463b3026}
.about-glass{padding:clamp(26px,2.6vw,50px);gap:24px;border-radius:24px;border-color:#ffffff9e;background:linear-gradient(135deg,#fff9 0%,#eee8dc38 36%,#b9b6ae30 64%,#fff6 100%),#d5d0c022;backdrop-filter:blur(32px) saturate(.78);-webkit-backdrop-filter:blur(32px) saturate(.78);box-shadow:inset 0 1px 2px #ffffffe0,inset 1px 0 1px #ffffff88,inset 0 -1px 2px #ffffff66,0 25px 65px #392b1a24,0 3px 10px #392b1a10}
.about-glass:before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff9 0%,#fff2 30%,transparent 66%),linear-gradient(125deg,transparent 22%,#fff4 43%,transparent 61%);opacity:.7}
.about-glass:after{inset:2px;border-radius:22px;border-color:#ffffff30;box-shadow:inset 0 0 18px #ffffff12}
.about-glass .about-heading h1{font-family:'Grift',sans-serif;font-weight:900;font-size:clamp(32px,3.1vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0}
#about-text{font-family:'Grift',sans-serif;font-weight:500;font-size:clamp(15px,1.1vw,21px);line-height:1.6;letter-spacing:0;text-transform:none;color:#fff}#about-text p{margin-bottom:1em}
@media(max-width:600px){header{padding:5.76px 14.4px;gap:8px}header nav{gap:11px}header nav button{font-size:10.08px}.brand img{width:33.12px;height:25.92px}#about{top:19%;width:62%;right:5%;max-height:76%}.about-glass{padding:20px;gap:18px;border-radius:20px}.about-glass .about-heading h1{font-size:30px}#about-text{font-size:13px;line-height:1.5}}
/* Blokzo area titles and social controls */
@font-face{font-family:Blokzo;src:url('assets/blokzo.ttf') format('truetype');font-weight:400;font-display:swap}
#about-text{color:#142e50;text-shadow:none}
.social-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;flex-shrink:0}.social-button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:48px;flex:1;padding:12px 17px;border:1px solid #ffffffae;border-radius:16px;color:#142e50;font:500 15px Grift,sans-serif;background:linear-gradient(135deg,#ffffffaa,#ffffff32);box-shadow:inset 0 1px 1px #fff,0 7px 20px #293c5710;transition:transform .25s,box-shadow .25s,background .25s}.social-button:before{content:'';position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 40%,#fff9 50%,transparent 60%);transform:translateX(-75%);transition:transform .6s;pointer-events:none}.social-button:hover:before{transform:translateX(75%)}.social-button:hover{transform:translateY(-4px);background:#ffffffc9;box-shadow:0 12px 26px #203e5526,inset 0 1px white}.social-button svg{width:21px;height:21px;flex-shrink:0}.social-arrow{margin-left:auto;transition:transform .25s}.social-button:hover .social-arrow{transform:translate(2px,-2px)}
.area-title,#contact-title.area-title{position:absolute;top:auto;right:auto;bottom:7%;left:5%;width:auto;max-width:88%;margin:0;z-index:6;font:400 clamp(36px,5.3vw,100px)/1 Blokzo,sans-serif;color:#ff193b;letter-spacing:-.02em;text-shadow:0 0 16px #ff18352e;pointer-events:none;transform-origin:left bottom}
.glitch-text{display:inline-block;position:relative;animation:title-twitch 6.4s steps(1,end) infinite}.glitch-copy{position:absolute;inset:0;opacity:0;pointer-events:none}.glitch-copy.cyan{color:#51f8ff;animation:glitch-cyan 6.4s steps(1,end) infinite}.glitch-copy.pink{color:#fc70ff;animation:glitch-pink 6.4s steps(1,end) infinite}
@keyframes title-twitch{0%,88%,94%,100%{transform:translate(0) skewX(0)}89%{transform:translate(-2px,1px) skewX(-2deg)}91%{transform:translate(3px,-1px) skewX(2deg)}93%{transform:translate(-1px,0)}}
@keyframes glitch-cyan{0%,88%,94%,100%{opacity:0;transform:none}89%{opacity:.9;clip-path:inset(15% 0 63%);transform:translate(-5px,1px)}91%{opacity:.8;clip-path:inset(67% 0 12%);transform:translate(4px,-1px)}93%{opacity:.6;clip-path:inset(35% 0 46%);transform:translate(-3px)}}
@keyframes glitch-pink{0%,88%,94%,100%{opacity:0;transform:none}89%{opacity:.85;clip-path:inset(60% 0 14%);transform:translate(5px)}91%{opacity:.75;clip-path:inset(12% 0 72%);transform:translate(-4px,1px)}93%{opacity:.6;clip-path:inset(47% 0 30%);transform:translate(3px)}}
@media(max-width:600px){.social-links{gap:8px}.social-button{font-size:12px;padding:10px;gap:6px;min-height:42px}.social-button svg{width:17px;height:17px}.area-title,#contact-title.area-title{font-size:clamp(32px,9vw,52px);bottom:6%}}
@media(prefers-reduced-motion:reduce){.glitch-text,.glitch-copy{animation:none!important}.glitch-copy{display:none}.social-button,.social-button:before,.social-arrow{transition:none}}
/* Layered graffiti title treatment */
.area-title,#contact-title.area-title{font-size:clamp(43.2px,6.36vw,120px);line-height:.88;letter-spacing:-.025em;--edge-x:0px;--edge-y:0px;--edge-blur:4px;--edge-stretch:1.02}
.glitch-text{white-space:pre;isolation:isolate;animation:graffiti-jitter 2.4s steps(1,end) infinite;transform:rotate(-2deg)}
.title-face{position:relative;display:block;z-index:2;mask-image:linear-gradient(90deg,#000a,#000 7%,#000 93%,#000a)}
.title-ghost,.title-edge{position:absolute;inset:0;white-space:inherit;pointer-events:none}.title-ghost{color:#fff;z-index:0;transform:translate(10px,7px) skewX(-4deg);text-shadow:0 0 2px #fff8;animation:ghost-slip 2.4s steps(1,end) infinite}
.title-edge{z-index:3;color:#ff2341;mask-image:linear-gradient(90deg,#000 0%,transparent 18%,transparent 80%,#000 100%);filter:blur(var(--edge-blur));transform:translate(var(--edge-x),var(--edge-y)) scaleX(var(--edge-stretch));transition:transform .25s ease-out,filter .25s ease-out;mix-blend-mode:screen;opacity:.95}
.glitch-copy{z-index:4}.glitch-copy.cyan{animation:graffiti-cyan 2.4s steps(1,end) infinite}.glitch-copy.pink{color:#fff;animation:graffiti-white 2.4s steps(1,end) infinite}
.title-marks{position:absolute;inset:0;z-index:1;pointer-events:none}.title-marks i{position:absolute;display:block;background:#ff193b;clip-path:polygon(0 45%,88% 0,100% 58%,8% 100%);height:.075em;width:.85em;animation:mark-stretch 2.4s steps(2,end) infinite;animation-delay:calc(var(--i) * -.37s);transform-origin:center}
.title-marks i:nth-child(1){left:-.35em;top:8%;transform:rotate(-38deg)}.title-marks i:nth-child(2){right:-.36em;top:28%;background:white;width:.7em;transform:rotate(-28deg)}.title-marks i:nth-child(3){left:.1em;bottom:-.13em;background:white;width:1.45em;transform:rotate(-8deg)}.title-marks i:nth-child(4){right:.1em;bottom:-.1em;width:1.1em;transform:rotate(24deg)}.title-marks i:nth-child(5){left:45%;top:-.14em;width:.65em;background:white;transform:rotate(-16deg)}
@keyframes graffiti-jitter{0%,100%{transform:rotate(-2deg) translate(0)}20%{transform:rotate(-2deg) translate(1px,-1px)}40%{transform:rotate(-2deg) translate(-2px,0) skewX(-1deg)}60%{transform:rotate(-2deg) translate(1px,1px)}80%{transform:rotate(-2deg) translate(-1px,-1px) skewX(1deg)}}
@keyframes ghost-slip{0%,100%{transform:translate(10px,7px) skewX(-4deg)}25%{transform:translate(13px,5px) skewX(-3deg)}50%{transform:translate(8px,9px) skewX(-5deg)}75%{transform:translate(11px,6px) skewX(-3deg)}}
@keyframes graffiti-cyan{0%,100%{opacity:.45;clip-path:inset(14% 0 79%);transform:translate(-3px)}25%{opacity:.7;clip-path:inset(44% 0 49%);transform:translate(4px)}50%{opacity:.35;clip-path:inset(76% 0 18%);transform:translate(-4px)}75%{opacity:.6;clip-path:inset(27% 0 68%);transform:translate(2px)}}
@keyframes graffiti-white{0%,100%{opacity:.5;clip-path:inset(65% 0 31%);transform:translate(4px)}25%{opacity:.3;clip-path:inset(20% 0 76%);transform:translate(-4px)}50%{opacity:.65;clip-path:inset(49% 0 46%);transform:translate(5px)}75%{opacity:.35;clip-path:inset(83% 0 12%);transform:translate(-3px)}}
@keyframes mark-stretch{0%,100%{scale:1 1;translate:0 0}33%{scale:1.2 .8;translate:2px -1px}66%{scale:.85 1.15;translate:-2px 1px}}
@media(max-width:600px){.area-title,#contact-title.area-title{font-size:clamp(38.4px,10.8vw,62.4px)}}
@media(prefers-reduced-motion:reduce){.title-ghost,.title-marks i{animation:none!important}.title-edge{transform:none;transition:none}}
/* Canvas film, portfolio glass, and scene-specific colors */
#experience #movie,#experience .loop-buffer{position:fixed!important;left:-10px!important;top:-10px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;transform:none!important}
#film-screen{position:absolute;top:0;left:50%;width:calc(1920px * var(--scale,1));height:calc(1080px * var(--scale,1));transform:translateX(-50%);pointer-events:none}
#portfolio-intro{top:14%;right:5%;width:35%;display:flex;flex-direction:column;gap:30px;text-shadow:none}
#portfolio-title.area-title{position:relative;left:auto;bottom:auto;max-width:100%;font-size:clamp(38px,5.3vw,100px);color:#354962;--title-color:#354962}
.portfolio-glass{padding:clamp(24px,2.6vw,50px)}#portfolio-intro p{font:500 clamp(15px,1.1vw,21px)/1.6 Grift,sans-serif;color:#142e50;margin:0}
#contact-title.area-title{color:#8caf35;--title-color:#8caf35}
#portfolio-title .title-edge,#contact-title .title-edge{color:var(--title-color)}
#portfolio-title .title-marks i,#contact-title .title-marks i{background:var(--title-color)}
#portfolio-title .title-marks i:nth-child(2),#portfolio-title .title-marks i:nth-child(3),#portfolio-title .title-marks i:nth-child(5),#contact-title .title-marks i:nth-child(2),#contact-title .title-marks i:nth-child(3),#contact-title .title-marks i:nth-child(5){background:white}
#portfolio-title,#contact-title.area-title{text-shadow:0 0 16px #ffffff24}
@media(max-width:600px){#portfolio-intro{width:62%;top:16%;gap:24px}#portfolio-title.area-title{font-size:clamp(30px,8vw,48px)}#portfolio-intro p{font-size:13px}}
/* Illuminated bookmarks */
#book-buttons button{--book-light:#fbe2ae;width:66px;height:306px;padding:24px 12px 44px;border:0;border-radius:8px 8px 22px 22px;background:linear-gradient(90deg,#161b254d,#161b257d 48%,#161b2538);backdrop-filter:blur(7px) saturate(.9);box-shadow:inset 1px 0 #ffffff55,inset -1px 0 #ffffff22,0 12px 25px #17121826;transform:translate(-50%,-50%) rotate(-1deg);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s;color:#fff9eb;isolation:isolate}
#book-buttons button[data-book="1"]{--book-light:#ffc8bc}#book-buttons button[data-book="2"]{--book-light:#bceaff}#book-buttons button[data-book="3"]{--book-light:#ffd7e6}
#book-buttons .book-label{display:block;font:500 19px/1 Grift,sans-serif;letter-spacing:.35px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;margin:auto;max-height:100%;text-shadow:0 1px 10px #0004}
#book-buttons .book-rail{position:absolute;inset:-8px;border:1px solid #fff3;border-radius:12px 12px 28px 28px;pointer-events:none;transition:border-color .3s,box-shadow .3s}
#book-buttons .book-rail:before,#book-buttons .book-rail:after{content:'';position:absolute;width:3px;height:54px;background:linear-gradient(transparent,var(--book-light),transparent);filter:drop-shadow(0 0 5px var(--book-light));animation:bookmark-light 4s ease-in-out infinite;top:15%;left:-2px;opacity:.7}
#book-buttons .book-rail:after{left:auto;right:-2px;animation-delay:-2s}
#book-buttons .book-open{position:absolute;bottom:10px;left:50%;translate:-50% 0;display:grid;place-items:center;width:26px;height:26px;font:20px Grift,sans-serif;border:1px solid #ffffff5c;border-radius:50%;transition:background .3s,color .3s,transform .3s}
#book-buttons button:after{content:'';position:absolute;top:-12px;left:calc(50% - 3px);width:6px;height:6px;rotate:45deg;background:var(--book-light);box-shadow:0 0 12px var(--book-light)}
#book-buttons button:hover,#book-buttons button:focus-visible{transform:translate(-50%,calc(-50% - 10px)) rotate(0) scale(1.045);background:linear-gradient(90deg,#222b3860,#2e3440b3,#222b3860);box-shadow:inset 1px 0 #fff9,inset -1px 0 #fff5,0 20px 35px #17121840}
#book-buttons button:hover .book-rail,#book-buttons button:focus-visible .book-rail{border-color:var(--book-light);box-shadow:0 0 14px color-mix(in srgb,var(--book-light) 25%,transparent),inset 0 0 12px #fff1}
#book-buttons button:hover .book-open{background:var(--book-light);color:#293644;transform:rotate(45deg)}
@keyframes bookmark-light{0%,100%{top:9%;opacity:.3}50%{top:73%;opacity:1}}
@media(prefers-reduced-motion:reduce){#book-buttons button,#book-buttons .book-rail,#book-buttons .book-open{transition:none}#book-buttons .book-rail:before,#book-buttons .book-rail:after{animation:none}}
/* Medieval book ornaments: open centers preserve the book artwork */
#book-buttons button{width:66px;height:290px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0;box-shadow:none;padding:22px 8px 40px;color:#fff0ca;--book-light:#d9b873}
#book-buttons button[data-book]{--book-light:#d9b873}
#book-buttons .book-label{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:400;letter-spacing:.7px;text-shadow:0 1px 3px #201008,0 0 7px #30190abb}
#book-buttons .book-rail{inset:0 5px;border:0;border-left:1px solid #d9b87375;border-right:1px solid #d9b87375;border-radius:0;box-shadow:none;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
#book-buttons .book-rail:before,#book-buttons .book-rail:after{width:1px;height:40px;left:-1px;filter:drop-shadow(0 0 3px #f0c77b);opacity:.5;animation-duration:6s}
#book-buttons .book-rail:after{left:auto;right:-1px}
#book-buttons button:before{content:'';position:absolute;top:5px;left:50%;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);border:1px solid #e0c08a;background:transparent;box-shadow:0 0 0 3px #a77b3933}
#book-buttons button:after{top:auto;bottom:5px;left:calc(50% - 4px);width:8px;height:8px;rotate:45deg;background:#d9b873;box-shadow:0 0 6px #d9b87355}
#book-buttons .book-open{bottom:24px;width:22px;height:22px;border:0;border-radius:0;font-family:Georgia,serif;font-size:19px;color:#ead4a6;background:none}
#book-buttons button:hover,#book-buttons button:focus-visible{background:transparent;box-shadow:none;transform:translate(-50%,calc(-50% - 4px)) rotate(0);color:#fff9e9}
#book-buttons button:hover .book-rail,#book-buttons button:focus-visible .book-rail{border-color:#f0d296;box-shadow:none}
#book-buttons button:hover .book-label{text-shadow:0 1px 3px #201008,0 0 12px #ebc48099}
#book-buttons button:hover .book-open{background:none;color:#fff0cb;transform:translateY(-2px)}
#portfolio-intro{top:28%;gap:0}.portfolio-glass{display:none}
#portfolio-title.area-title{color:#fff;--title-color:#fff}
#portfolio-title .title-ghost{color:#354962;text-shadow:0 0 2px #35496288}
#portfolio-title .glitch-copy.pink{color:#354962}
#portfolio-title .title-marks i:nth-child(2),#portfolio-title .title-marks i:nth-child(3),#portfolio-title .title-marks i:nth-child(5){background:#354962}
@media(max-width:600px){#portfolio-intro{top:28%}}
/* Brass book seals: compact controls on the upper book faces */
#book-buttons button{width:54px;height:54px;padding:0;border:1px solid #cfa66a;border-radius:50%;background:radial-gradient(circle at 30% 20%,#917348,#46331e 68%,#261c14);backdrop-filter:none;box-shadow:inset 0 0 0 3px #322416,inset 0 0 0 4px #c9a66c88,0 3px 4px #170c0766;transform:translate(-50%,-50%) rotate(2deg);color:#f1d6a1;transition:transform .3s,box-shadow .3s,filter .3s}
#book-buttons button[data-book="0"]{rotate:3deg}#book-buttons button[data-book="1"]{rotate:-2deg}#book-buttons button[data-book="3"]{rotate:1deg}
#book-buttons button:before{inset:8px;width:auto;height:auto;border:1px dotted #d9b87366;border-radius:50%;transform:none;background:none;box-shadow:none}
#book-buttons button:after{display:none}
#book-buttons .book-rail{inset:-5px;border:1px solid #edd09b66;border-radius:50%;mask-image:none;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
#book-buttons .book-rail:before,#book-buttons .book-rail:after{display:none}
#book-buttons .book-open{inset:0;width:100%;height:100%;translate:none;border:0;background:none;border-radius:50%;font:700 17px/1 Georgia,serif;letter-spacing:-.5px;color:#f1d6a1;text-shadow:0 1px 1px #120c05;display:grid;place-items:center}
#book-buttons .book-label{position:absolute;bottom:calc(100% + 18px);left:50%;writing-mode:horizontal-tb;transform:translate(-50%,8px);white-space:nowrap;max-height:none;margin:0;padding:10px 16px;background:#302416ec;border:1px solid #b69862;border-radius:3px;font:500 17px/1.25 Grift,sans-serif;letter-spacing:.1px;color:#f9e9c8;text-shadow:none;box-shadow:0 6px 20px #17100733;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;pointer-events:none}
#book-buttons .book-label:after{content:'';position:absolute;bottom:-5px;left:calc(50% - 4px);width:8px;height:8px;background:#302416;border-bottom:1px solid #b69862;border-right:1px solid #b69862;rotate:45deg}
#book-buttons button:hover,#book-buttons button:focus-visible{transform:translate(-50%,-50%) scale(1.1);background:radial-gradient(circle at 30% 20%,#b79762,#594026 68%,#302114);box-shadow:inset 0 0 0 3px #322416,inset 0 0 0 4px #e9c486aa,0 0 18px #e3b96755,0 4px 6px #170c0766;z-index:5}
#book-buttons button:hover .book-rail,#book-buttons button:focus-visible .book-rail{opacity:1;transform:scale(1);border-color:#edd09b99}
#book-buttons button:hover .book-label,#book-buttons button:focus-visible .book-label{visibility:visible;opacity:1;transform:translate(-50%,0);text-shadow:none}
#book-buttons button:hover .book-open{transform:none;color:#fff1cd;background:none}
@media(pointer:coarse){#book-buttons .book-label{font-size:14px;visibility:visible;opacity:1;padding:5px 8px;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){#book-buttons .book-label{transition:none}}
/* Warm paper tags suspended from cloth bookmarks */
#book-buttons button,#book-buttons button[data-book]{--ribbon:#713e37;--lean:-3deg;rotate:0deg;width:88px;height:194px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;transform:translateX(-50%) rotate(var(--lean));transform-origin:44px 0;filter:drop-shadow(3px 5px 3px #38201355);transition:transform .4s ease,filter .4s ease}
#book-buttons button[data-book="3"]{--ribbon:#683932;--lean:2deg}
#book-buttons button[data-book="2"]{--ribbon:#34394d;--lean:-2deg}
#book-buttons button[data-book="0"]{--ribbon:#946331;--lean:3deg}
#book-buttons button:before,#book-buttons button:after,#book-buttons .book-open{display:none}
#book-buttons .book-rail{display:block;position:absolute;top:0;left:36px;right:auto;bottom:auto;width:16px;height:88px;border:0;border-radius:1px;background:repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 3px),linear-gradient(90deg,#0005,transparent 27%,#ffffff28 44%,transparent 70%,#0005),var(--ribbon);box-shadow:inset 1px 0 #ffdda233,inset -1px 0 #210f1355;opacity:1;mask-image:none;transform:none;clip-path:polygon(0 0,100% 0,100% 100%,50% 91%,0 100%);z-index:2}
#book-buttons .book-rail:before,#book-buttons .book-rail:after{display:none}
#book-buttons .book-label{display:flex;align-items:center;justify-content:center;position:absolute;top:67px;bottom:auto;left:0;width:88px;min-height:125px;padding:30px 8px 18px;margin:0;border:1px solid #8f633c77;border-radius:4px 4px 2px 2px;background:radial-gradient(ellipse at 20% 12%,#fff0d15c,transparent 65%),repeating-linear-gradient(4deg,#8d633808 0 1px,transparent 1px 4px),linear-gradient(120deg,#e9cda0,#d8b580 65%,#c59c68);color:#513522;font:500 15px/1.25 Grift,sans-serif;letter-spacing:.1px;text-align:center;text-shadow:0 1px #ffe4b84d;white-space:normal;writing-mode:horizontal-tb;visibility:visible;opacity:1;transform:none;max-height:none;box-shadow:inset 0 0 0 4px #efd6af,inset 0 0 0 5px #a5784655,inset 1px 1px 4px #fff2;pointer-events:none;transition:filter .3s}
#book-buttons .book-label:before{content:'';position:absolute;top:9px;left:calc(50% - 4px);width:8px;height:8px;border:1px solid #9b754a;border-radius:50%;background:#523829;box-shadow:0 1px 1px #ffe5bda6;z-index:3}
#book-buttons .book-label:after{content:'';position:absolute;bottom:10px;left:calc(50% - 12px);width:24px;height:1px;border:0;rotate:0deg;background:#946b4166}
#book-buttons button:hover,#book-buttons button:focus-visible{transform:translateX(-50%) rotate(0deg);background:none;box-shadow:none;filter:drop-shadow(5px 9px 5px #38201366);z-index:5}
#book-buttons button:hover .book-label,#book-buttons button:focus-visible .book-label{transform:none;filter:brightness(1.07);color:#513522;text-shadow:0 1px #ffe4b84d}
#book-buttons button:hover .book-rail,#book-buttons button:focus-visible .book-rail{transform:none;opacity:1;border:0;box-shadow:inset 1px 0 #ffdda233,inset -1px 0 #210f1355}
@media(prefers-reduced-motion:reduce){#book-buttons button,#book-buttons .book-label{transition:none}}
/* Rendered cloth and parchment prop replaces the CSS illustration */
#book-buttons button,#book-buttons button[data-book]{width:102px;height:212px;background: url('assets/book-tag-3d.png') center / 100% 100% no-repeat;border:0;box-shadow:none;transform-origin:51px 0;filter:drop-shadow(-2px 5px 3px #38201355);isolation:isolate}
#book-buttons .book-rail,#book-buttons button:before,#book-buttons button:after,#book-buttons .book-open{display:none!important}
#book-buttons .book-label{left:14px;top:111px;width:74px;height:76px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:0;box-shadow:none;font:500 14px/1.25 Grift,sans-serif;color:#65472f;text-shadow:0 1px #fbe5c133;transform:rotate(-1deg);mix-blend-mode:multiply;filter:none;z-index:3}
#book-buttons .book-label:before,#book-buttons .book-label:after{display:none}
#book-buttons button:hover,#book-buttons button:focus-visible{background:url('assets/book-tag-3d.png') center / 100% 100% no-repeat;box-shadow:none;filter:drop-shadow(-4px 8px 5px #38201355);transform:translateX(-50%) rotate(0deg)}
#book-buttons button:hover .book-label,#book-buttons button:focus-visible .book-label{background:none;filter:none;color:#65472f;text-shadow:0 1px #fbe5c133;transform:rotate(-1deg)}

/* Requested revision: narrow vertical glass buttons; previous design retained above. */
#book-buttons button,#book-buttons button[data-book]{width:48px;height:276px;padding:0;rotate:0deg;border:1px solid #ffffff55;border-radius:24px;background:linear-gradient(105deg,#ffffff35,#ffffff08 27%,#ffffff04 58%,#f2d1aa26);backdrop-filter:blur(3px) saturate(1.12);-webkit-backdrop-filter:blur(3px) saturate(1.12);box-shadow:inset 2px 1px 2px #fff6,inset -1px -1px 2px #fff3,0 5px 12px #21180e25;transform:translateX(-50%) rotate(1deg);transform-origin:50% 0;filter:none;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,background .35s ease;color:#fffaf0}
#book-buttons button:before{display:block!important;content:'';position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:inherit;background:linear-gradient(125deg,transparent 30%,#ffffff44 47%,transparent 64%);transform:none;box-shadow:none;translate:0 -110%;transition:translate .7s ease;pointer-events:none}
#book-buttons .book-label{position:absolute;inset:28px 0 39px;width:auto;height:auto;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;margin:auto;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font:500 16px/1 Grift,sans-serif;letter-spacing:.25px;color:#fffaf0;text-shadow:0 1px 4px #24180f88;mix-blend-mode:normal;pointer-events:none}
#book-buttons .book-open{display:block!important;position:absolute;inset:auto 0 12px;width:100%;height:auto;translate:none;border:0;background:none;border-radius:0;font-size:0;line-height:1;color:#fff8;text-shadow:none}
#book-buttons .book-open:after{content:'↗';font:18px/1 Grift,sans-serif}
#book-buttons button:hover,#book-buttons button:focus-visible{transform:translate(-50%,-4px) rotate(1deg);background:linear-gradient(105deg,#ffffff48,#ffffff0a 50%,#f2d1aa35);filter:none;box-shadow:inset 2px 1px 2px #fff9,inset -1px -1px 2px #fff5,0 9px 20px #21180e33,0 0 14px #ffe3b31a;outline:1px solid #ffedc977;outline-offset:3px}
#book-buttons button:hover .book-label,#book-buttons button:focus-visible .book-label{transform:rotate(180deg);color:#fffaf0;text-shadow:0 1px 4px #24180f88}
#book-buttons button:hover:before,#book-buttons button:focus-visible:before{translate:0 110%}
@media(prefers-reduced-motion:reduce){#book-buttons button,#book-buttons button:before{transition:none}}
/* Album contents develop within their existing perspective, one slot at a time. */
#iu-portfolio .projects > :nth-child(1),#iu-portfolio .projects > :nth-child(2){--reveal-delay:60ms}
#iu-portfolio .projects > :nth-child(3),#iu-portfolio .projects > :nth-child(4){--reveal-delay:170ms}
#iu-portfolio .projects > :nth-child(5),#iu-portfolio .projects > :nth-child(6){--reveal-delay:280ms}
#iu-portfolio .projects > :nth-child(7),#iu-portfolio .projects > :nth-child(8){--reveal-delay:390ms}
#iu-portfolio .projects > :nth-child(9),#iu-portfolio .projects > :nth-child(10){--reveal-delay:500ms}
#iu-portfolio .projects > :nth-child(11),#iu-portfolio .projects > :nth-child(12){--reveal-delay:610ms}
#iu-portfolio .projects > :nth-child(13),#iu-portfolio .projects > :nth-child(14){--reveal-delay:720ms}
#iu-portfolio .projects > :nth-child(15),#iu-portfolio .projects > :nth-child(16){--reveal-delay:830ms}
#iu-portfolio:not([hidden]) .project .cover{animation:album-cover-reveal 850ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards}
#iu-portfolio:not([hidden]) .nameplate{animation:album-label-reveal 650ms cubic-bezier(.22,1,.36,1) calc(var(--reveal-delay,0ms) + 160ms) backwards}
#iu-portfolio:not([hidden]) .close-book,#iu-portfolio:not([hidden]) .more{animation:album-label-reveal 600ms ease-out 180ms backwards}
@keyframes album-cover-reveal{
  0%{opacity:0;clip-path:inset(0 0 100% 0 round 3px);transform:translateY(7px) scale(.96);filter:blur(3px) brightness(1.12)}
  55%{opacity:.88;filter:blur(.5px) brightness(1.035)}
  100%{opacity:1;clip-path:inset(0 0 0 0 round 3px);transform:none;filter:none}
}
@keyframes album-label-reveal{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){#iu-portfolio:not([hidden]) .project .cover,#iu-portfolio:not([hidden]) .nameplate,#iu-portfolio:not([hidden]) .close-book,#iu-portfolio:not([hidden]) .more{animation:none}}
#rotate-notice{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:radial-gradient(ellipse at 80% 20%,#4b5266,transparent 65%),#202a3b;color:#fff7ec;font-family:Grift,sans-serif;touch-action:none}
#rotate-notice[hidden]{display:none}
#rotate-notice h1{font:500 30px/1.2 Grift,sans-serif;margin:34px 0 14px}
#rotate-notice p{font-size:15px;line-height:1.6;color:#d0c9c0;max-width:260px}
.rotate-phone{position:relative;width:90px;height:90px;display:grid;place-items:center;font:90px/1 Arial;color:#e4c397}
.rotate-phone span{position:absolute;width:27px;height:47px;border:2px solid #fff7ec;border-radius:6px;background:#303a4b;animation:phone-turn 2.8s ease-in-out infinite}
@keyframes phone-turn{0%,15%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rotate-phone span{animation:none;transform:rotate(90deg)}}
/* Branded intro loader */
#loading{position:fixed;inset:0;z-index:500;transform:none;background:#141820;letter-spacing:0;opacity:1;transition:opacity .45s ease;pointer-events:auto}
#loading.is-complete{opacity:0;pointer-events:none}
#loading .loader-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10vw;height:auto;display:block}
#loading .loader-details{position:absolute;left:50%;top:calc(50% + 5vw + 22px);transform:translateX(-50%);width:clamp(130px,14vw,250px)}
#loading .loader-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;font:500 10px/1.4 Grift,sans-serif;letter-spacing:1.5px;color:#e8e6e2}
#loading span{display:inline;margin:0;height:auto;background:none;animation:none}
#loading #loader-percent{font-variant-numeric:tabular-nums;letter-spacing:.5px;color:#ff435b}
#loading .loader-track{height:3px;border-radius:8px;background:#ffffff16;overflow:hidden}
#loading .loader-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff183b,#ff8390);box-shadow:0 0 12px #ff234177;transition:width .25s ease}
#retry{position:fixed;z-index:501;top:75%;font:500 11px Grift,sans-serif;letter-spacing:1px;border-radius:25px;background:#ffffff0d;backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:reduce){#loading,#loading .loader-fill{transition:none}}
/* Compact loader: percentage aligned to the right of the progress track. */
#loading .loader-details{display:flex;align-items:center;gap:12px}
#loading .loader-caption{display:contents}
#loading #loader-message{display:none}
#loading .loader-track{order:0;flex:1;min-width:0}
#loading #loader-percent{order:1;flex:0 0 34px;font:500 10px/1 Grift,sans-serif;letter-spacing:.5px;text-align:right}
/* Portrait-only film and top-aligned rotation guidance. */
#rotate-notice{padding:0;overflow:hidden;background:#202a3b}
#rotate-notice .rotate-background{position:absolute;bottom:0;left:0;width:100%;height:auto;max-width:none;display:block;pointer-events:none}
#rotate-notice .rotate-copy{position:absolute;top:5%;left:6%;width:88%;height:35%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;text-shadow:0 2px 12px #0005}
#rotate-notice .rotate-phone{flex-shrink:0;width:clamp(46px,9vh,76px);height:clamp(46px,9vh,76px);font-size:clamp(46px,9vh,76px)}
#rotate-notice h1{font-size:clamp(20px,3.5vh,30px);line-height:1.15;margin:12px 0 8px}
#rotate-notice p{font-size:clamp(12px,1.8vh,15px);line-height:1.4;margin:0;max-width:280px}
/* Contact shares the About social-button glass finish. */
#iu-letter-contact .send.social-button{left:353px;top:564px;width:280px;height:64px;min-height:0;display:flex;align-items:center;justify-content:flex-start;gap:13px;padding:16px 22px;border:1px solid #ffffffae;border-radius:21px;color:#142e50;font:500 20px/1 Grift,sans-serif;letter-spacing:0;background:linear-gradient(135deg,#ffffffaa,#ffffff32);backdrop-filter:blur(12px);box-shadow:inset 0 1px 1px #fff,0 7px 20px #293c5710;filter:none;transition:transform .25s,box-shadow .25s,background .25s}
#iu-letter-contact .send.social-button svg{width:28px;height:28px;flex-shrink:0}
#iu-letter-contact .send.social-button:hover{transform:translateY(-4px);background:#ffffffc9;box-shadow:0 12px 26px #203e5526,inset 0 1px white}
#iu-letter-contact .send.social-button:focus-visible{outline:2px solid #142e50;outline-offset:4px}
@media(prefers-reduced-motion:reduce){#iu-letter-contact .send.social-button{transition:none}}
/* Lettering printed onto the book faces; movement is measured from the film. */
#book-buttons button[data-book]{left:0!important;top:0!important;width:100px;height:300px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;filter:none;overflow:visible;rotate:0deg;transform-origin:0 0;translate:var(--track-x,0px) var(--track-y,0px);transition:none;outline-offset:5px}
#book-buttons button[data-book="1"]{--face-matrix:matrix(.74,0,0,.5167,877,683);mix-blend-mode:multiply}
#book-buttons button[data-book="3"]{--face-matrix:matrix(.68,.04,-.0233,.86,1000,690);mix-blend-mode:multiply}
#book-buttons button[data-book="2"]{--face-matrix:matrix(.65,0,-.05,.95,1098,713)}
#book-buttons button[data-book="0"]{--face-matrix:matrix(.72,.04,-.07,.84,1187,741)}
#book-buttons button[data-book],#book-buttons button[data-book]:hover,#book-buttons button[data-book]:focus-visible{transform:var(--face-matrix);background:none;box-shadow:none;filter:none}
#book-buttons button[data-book]:before,#book-buttons button[data-book]:after,#book-buttons button[data-book] .book-open,#book-buttons button[data-book] .book-rail{display:none!important}
#book-buttons button[data-book] .book-label,#book-buttons button[data-book]:hover .book-label,#book-buttons button[data-book]:focus-visible .book-label{inset:0;display:flex;width:100%;height:100%;padding:0;margin:0;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font:900 34px/.95 Grift,sans-serif;letter-spacing:-1px;color:#27221c;text-shadow:0 1px 1px #e4cc9955;background:none;mix-blend-mode:normal;filter:none;transition:filter .25s;white-space:nowrap}
#book-buttons button[data-book="1"] .book-label,#book-buttons button[data-book="1"]:hover .book-label,#book-buttons button[data-book="1"]:focus-visible .book-label{font-size:100px}
#book-buttons button[data-book="2"] .book-label,#book-buttons button[data-book="2"]:hover .book-label,#book-buttons button[data-book="2"]:focus-visible .book-label{font-size:48px;background:linear-gradient(90deg,#81521b,#f7dc8b 18%,#bd8a32 36%,#fff0b9 51%,#cb993d 73%,#8d5d1c);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(1px 1px .5px #402509);-webkit-text-stroke:.5px #dfb55e}
#book-buttons button[data-book="0"] .book-label,#book-buttons button[data-book="0"]:hover .book-label,#book-buttons button[data-book="0"]:focus-visible .book-label{font-size:63px;background:linear-gradient(90deg,#777674,#efeeeb 22%,#aaa9a5 39%,#fffdf6 54%,#92918d 79%,#dedad0);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(1px 1px .5px #483827);-webkit-text-stroke:.5px #d6d3cb}
#book-buttons button[data-book]:hover .book-label{filter:brightness(1.18) drop-shadow(0 0 2px #fff2)}
#book-buttons button[data-book]:focus-visible{outline:2px solid #f7e4b9}
/* Supplied PNG artwork, aligned from the top of each book face. */
#book-buttons button[data-book]{mix-blend-mode:normal;display:block}
#book-buttons button[data-book="1"]{height:147.2868px;--face-matrix:matrix(.74,0,0,.74,877,680)}
#book-buttons button[data-book="3"]{height:466.6667px;--face-matrix:matrix(.65,.025,-.022,.65,1001,686)}
#book-buttons button[data-book="2"]{height:305.2632px;--face-matrix:matrix(.65,0,-.036,.65,1098,708)}
#book-buttons button[data-book="0"]{height:222.7642px;--face-matrix:matrix(.72,.04,-.06,.72,1187,736)}
#book-buttons .book-art{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;transition:filter .25s}
#book-buttons button:hover .book-art{filter:brightness(1.07)}
@media(prefers-reduced-motion:reduce){#book-buttons .book-art{transition:none}}
/* PNG book hover: brightness only. Keyboard focus remains visible. */
#book-buttons button[data-book]:hover:not(:focus-visible){outline:none;border:0;box-shadow:none}
#book-buttons button[data-book]:hover .book-art{filter:brightness(1.07)}
/* Real project presentations: keep complete artwork visible. */
#iu-portfolio .project .cover{background:#fff}
#iu-portfolio .project img{object-fit:contain;filter:none}
#iu-portfolio .presentation{background:#eeeae4}
#iu-portfolio .slide.project-story{grid-template-columns:1.45fr 1fr;grid-template-rows:1fr 42px;gap:14px}
#iu-portfolio .project-story .hero-panel{grid-row:1 / 3}
#iu-portfolio .project-story .intro{gap:20px;padding:clamp(16px,2.5vw,36px)}
#iu-portfolio .project-story h2{font:900 clamp(22px,3.1vw,46px)/1.08 Grift,sans-serif;color:#263348}
#iu-portfolio .project-story .intro p{font:500 clamp(12px,1.2vw,17px)/1.65 Grift,sans-serif;color:#5c5d61}
#iu-portfolio .project-story small{font:500 10px/1.5 Grift,sans-serif;letter-spacing:1.1px;text-transform:uppercase}
#iu-portfolio .media-panel{min-width:0;min-height:0;background:white;display:flex;align-items:center;justify-content:center;overflow:hidden}
#iu-portfolio .media-panel img,#iu-portfolio .media-panel video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#iu-portfolio .slide.project-media{grid-template-columns:1fr 1fr;grid-template-rows:1fr 30px;gap:14px}
#iu-portfolio .slide.project-media.single{grid-template-columns:1fr}
#iu-portfolio .media-caption{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;font:500 11px Grift,sans-serif;color:#6c6158;gap:16px}
#iu-portfolio .project-signature{display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#263348;color:#f5f1e9;font:500 10px Grift,sans-serif;letter-spacing:1px}
#iu-portfolio .next-project{background:none;border:0;font:500 10px Grift,sans-serif;color:#263348;cursor:pointer}
#iu-portfolio .slide-nav button:disabled{opacity:.25;cursor:default}
#iu-portfolio .gallery img{background:#fff;object-fit:contain}
#iu-portfolio .empty-book{position:absolute;left:1080px;top:210px;font:500 22px Grift,sans-serif;color:#753029}
@media(max-height:500px){#iu-portfolio .project-story .intro{gap:9px;padding:14px}#iu-portfolio .project-story h2{font-size:24px}#iu-portfolio .project-story .intro p{font-size:12px}#iu-portfolio .slide.project-story{grid-template-rows:1fr 30px}}#iu-portfolio .media-panel img{cursor:zoom-in}
#iu-portfolio .media-panel img:focus-visible{outline:2px solid #263348;outline-offset:-3px}
#iu-portfolio .art-zoom{position:absolute;inset:0;z-index:20;background:#f4f1ec;padding:48px 20px 20px}
#iu-portfolio .zoom-close{position:absolute;top:6px;right:18px;width:38px;height:38px;font-size:30px;border:0;background:transparent;color:#263348;cursor:pointer}
#iu-portfolio .zoom-scroll{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;text-align:center}
#iu-portfolio .zoom-scroll img{max-width:100%;height:100%;object-fit:contain;cursor:zoom-in}
#iu-portfolio .art-zoom.zoomed .zoom-scroll img{height:auto;width:100%;max-width:none;cursor:zoom-out}/* Artwork collage reveal and glossy red site pointer. */
.project-collage{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;perspective:1200px}
.project-collage img{position:absolute;object-fit:contain;background:#f7f3ed;padding:8px;box-shadow:0 22px 70px #130d174d,0 2px 8px #130d1720;will-change:transform,opacity}
@media(hover:hover) and (pointer:fine){
 html,body,body *{cursor:url('assets/cursor-red.svg?v=rounded-small-4') 5 4,auto!important}
 input,textarea,[contenteditable=true]{cursor:text!important}
}
@media(prefers-reduced-motion:reduce){.project-collage{display:none}}
/* Persistent artwork collage: no Metro panel behind the cards. */
#iu-portfolio .presentation.collage-view{inset:5%;background:transparent;border:0;box-shadow:none;padding:12px;color:#fff;overflow:visible}
#iu-portfolio .collage-view .back,#iu-portfolio .collage-view .demo-tag{color:#fff}
#iu-portfolio .collage-view .detail{overflow:hidden}
#iu-portfolio .collage-track{display:flex;align-items:center;gap:24px;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:35px 22px;scrollbar-width:thin;scrollbar-color:#ffffff70 transparent}
#iu-portfolio .collage-note{flex:0 0 clamp(230px,25vw,380px);padding:28px;background:#f6f0e6;color:#263348;box-shadow:0 20px 60px #0003;align-self:center}
#iu-portfolio .collage-note small{font:12px Grift,sans-serif;text-transform:uppercase}
#iu-portfolio .collage-note h2{font:clamp(25px,3vw,46px) GriftBlack,Grift,sans-serif;line-height:1.05;margin:20px 0}
#iu-portfolio .collage-note p{font:clamp(13px,1.2vw,17px)/1.65 Grift,sans-serif;margin:0;max-height:45vh;overflow:auto}
#iu-portfolio .collage-art{flex:0 0 clamp(260px,34vw,520px);height:85%;max-height:650px;min-height:0;background:#faf7ef;padding:12px 12px 28px;box-shadow:0 20px 55px #0005;transform:rotate(var(--tilt));position:relative}
#iu-portfolio .collage-art:nth-child(odd){height:75%}
#iu-portfolio .collage-art .media-panel{width:100%;height:100%;background:#fff}
#iu-portfolio .collage-art>span{position:absolute;bottom:8px;right:14px;color:#263348;font:10px Grift,sans-serif}
#iu-portfolio .collage-controls{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;font:11px Grift,sans-serif}
#iu-portfolio .collage-controls .next-project{color:#fff}
#iu-portfolio .collage-view .art-zoom{overflow:hidden;color:#263348}
/* Reference revision: straight, layered artwork wall and camera travel. */
#iu-portfolio .presentation.collage-view{inset:0;padding:28px 4%;background:#191718;overflow:hidden}
#iu-portfolio .collage-view .presentation-top,#iu-portfolio .collage-view .back,#iu-portfolio .collage-view .demo-tag{position:relative;z-index:5}
#iu-portfolio .collage-view .detail{overflow:visible}
#iu-portfolio .collage-track{position:absolute;inset:0;display:block;padding:0;overflow:hidden;touch-action:none}
#iu-portfolio .wall-camera{position:absolute;inset:0;transition:transform 650ms cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
#iu-portfolio .wall-artworks{position:absolute;width:1290px;height:var(--wall-height);left:50%;top:55%;transform:translate(-50%,-50%);z-index:2}
#iu-portfolio .wall-backdrop{position:absolute;width:1700px;height:1420px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.65}
#iu-portfolio .wall-backdrop img{position:absolute;width:232px;height:300px;object-fit:contain;background:#eee9df}
#iu-portfolio .collage-art,#iu-portfolio .collage-art:nth-child(odd){position:absolute;left:var(--x);top:var(--y);width:310px;height:370px;max-height:none;transform:none;padding:0;background:#f7f4ed;box-shadow:0 18px 45px #0006}
#iu-portfolio .collage-art:nth-child(3n){height:310px;z-index:3}
#iu-portfolio .collage-art:nth-child(3n+1){width:345px;height:425px;z-index:4}
#iu-portfolio .collage-art .media-panel{background:#f7f4ed}
#iu-portfolio .collage-view .collage-note{position:absolute;left:4%;bottom:70px;z-index:6;width:260px;max-height:43%;overflow:auto;padding:20px;background:#f6f0e6ed;backdrop-filter:blur(15px)}
#iu-portfolio .collage-note h2{font-family:Grift,sans-serif;font-weight:900;font-size:26px;margin:12px 0}
#iu-portfolio .collage-note p{font-size:13px;line-height:1.5;max-height:none}
#iu-portfolio .collage-controls{position:absolute;bottom:12px;left:4%;right:4%;z-index:7;background:#191718bd;padding:14px}
#iu-portfolio .collage-view .art-zoom{z-index:20}
#iu-portfolio .collage-view .presentation-top{margin-top:40px;padding:12px;background:#191718c9;backdrop-filter:blur(12px)}
#iu-portfolio .wall-backdrop{pointer-events:none}
@media(prefers-reduced-motion:reduce){#iu-portfolio .wall-camera{transition:none}}
#iu-portfolio .wall-backdrop{width:2450px;height:2400px}
/* Mobile landscape navigation; portfolio destinations are always listed. */
#mobile-menu-toggle,#mobile-menu,#mobile-menu-backdrop{display:none}
@media(max-width:900px),(pointer:coarse) and (max-width:1366px){
 header nav,header #search-toggle{display:none}
 header{grid-template-columns:1fr auto}
 #mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;justify-self:end;width:44px;height:44px;padding:10px;position:relative;z-index:4}
 #mobile-menu-toggle span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
 #mobile-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 #mobile-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
 #mobile-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
 #mobile-menu{display:flex;position:absolute;right:0;top:54px;bottom:0;width:15%;padding:12px 1vw 20px;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;pointer-events:auto;background:linear-gradient(135deg,#28303bea,#151923ef);backdrop-filter:blur(22px);border-left:1px solid #ffffff30;box-shadow:-12px 0 35px #0003;transform:translateX(105%);visibility:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1),visibility .4s;z-index:3}
 #mobile-menu.is-open{transform:translateX(0);visibility:visible}
 #mobile-menu button{flex-shrink:0;min-height:36px;width:100%;padding:8px 0;border:0;background:transparent;color:#fff;text-align:left;white-space:nowrap;font:500 clamp(8px,1.15vw,13px) Grift,sans-serif;letter-spacing:.02em}
 #mobile-menu .mobile-category{color:#d5c9b7;font-size:clamp(8px,1.05vw,12px)}
 #mobile-menu button:hover,#mobile-menu button:focus-visible{color:#ff5265}
 #mobile-menu-backdrop{display:block;position:absolute;inset:54px 0 0;border:0;background:#0002;pointer-events:auto;z-index:2}
}
@media(prefers-reduced-motion:reduce){#mobile-menu,#mobile-menu-toggle span{transition:none}}
/* Fill album recesses with centered artwork; never add letterbox padding. */
#iu-portfolio .project .cover{background:transparent;overflow:hidden}
#iu-portfolio .project .cover img{width:100%;height:100%;object-fit:cover;object-position:center}
#iu-portfolio .gallery img{object-fit:cover;object-position:center;background:transparent}
#contact-keyboard{position:fixed;left:2vw;top:18vh;width:43vw;max-height:78vh;overflow:auto;z-index:80;padding:12px;border:1px solid #ffffff80;border-radius:18px;background:linear-gradient(130deg,#f6efe8ef,#e4d6c8ed);backdrop-filter:blur(22px);box-shadow:0 14px 55px #211b2250;color:#263348;font:500 12px Grift,sans-serif;animation:keyboard-slide .28s ease-out}
#contact-keyboard button{font:inherit;border:0;color:inherit;touch-action:manipulation}
.keyboard-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;font-size:10px;letter-spacing:1px}
.keyboard-head button{background:none;font-size:24px!important;width:30px;height:28px}
.keyboard-fields{display:flex;gap:5px;margin-bottom:10px}
.keyboard-fields button{flex:1;padding:7px 2px;background:#ffffff55;border-radius:7px}
.keyboard-fields button[aria-pressed=true]{background:#263348;color:white!important}
.keyboard-row{display:flex;justify-content:center;gap:4px;margin:4px 0}
.keyboard-row button{flex:1;min-width:0;height:clamp(30px,8vh,42px);padding:0;border-radius:6px;background:#fff9;box-shadow:0 2px 0 #54463325;font-size:clamp(12px,1.8vw,18px)!important}
.keyboard-row button:active{background:#ff4c61;color:white!important;transform:translateY(1px)}
.keyboard-actions button{font-size:11px!important;background:#c5c2c799}
.keyboard-actions .key-space{flex:3;background:#fff9}
@keyframes keyboard-slide{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#contact-keyboard{animation:none}}
/* Horizontal masonry: card dimensions follow the actual media ratio. */
#iu-portfolio .wall-artworks{left:5%;top:130px;transform:none;transform-origin:left center}
#iu-portfolio .wall-backdrop{left:-4%;top:95px;transform:none;transform-origin:left center;opacity:.3}
#iu-portfolio .wall-camera{transform-origin:left center}
#iu-portfolio .wall-artworks .collage-art,#iu-portfolio .wall-artworks .collage-art:nth-child(n){padding:0;max-height:none;min-height:0;background:transparent;border:0;overflow:hidden}
#iu-portfolio .wall-artworks .media-panel{padding:0;background:transparent;line-height:0}
#iu-portfolio .wall-artworks .media-panel img,#iu-portfolio .wall-artworks .media-panel video{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#iu-portfolio .wall-backdrop img{padding:0;background:transparent;object-fit:contain}
@media(max-height:500px){#iu-portfolio .wall-artworks{top:95px}}
/* The finale belongs to the film timeline, with or without a form submission. */
#thank-you{right:28%;transition:right 280ms cubic-bezier(.2,.7,.2,1)}
#thank-you:not([hidden]) h2{animation:thanks-entrance 950ms cubic-bezier(.16,1,.3,1) both}
#scroll-hint.heart:not([hidden]){animation:heart-entrance 950ms cubic-bezier(.16,1,.3,1) both}
@keyframes thanks-entrance{from{opacity:0;filter:blur(10px);transform:translateY(20px) scale(.92)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes heart-entrance{from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.65)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#thank-you{transition:none}#thank-you:not([hidden]) h2{animation:none}}
/* Shared portfolio typography and contact glass feedback. */
#iu-portfolio,#iu-portfolio .nameplate,#iu-portfolio .more,#iu-portfolio .presentation,#iu-portfolio .gallery strong,#iu-portfolio .gallery small,#iu-portfolio .collage-note,#iu-portfolio .collage-note p,#iu-portfolio .collage-note small{font-family:Grift,sans-serif;font-weight:500}
#iu-portfolio h2,#iu-portfolio .collage-note h2,#iu-portfolio .gallery-title{font-family:Grift,sans-serif;font-weight:900}
#status{position:fixed;top:90px;right:3vw;bottom:auto;left:auto;z-index:120;display:flex;align-items:center;gap:13px;max-width:min(390px,90vw);padding:16px 21px;border:1px solid #ffffffae;border-radius:18px;background:linear-gradient(135deg,#ffffffd9,#ffffff88);backdrop-filter:blur(22px);box-shadow:inset 0 1px 1px #fff,0 10px 30px #293c5726;color:#142e50;font:500 15px/1.4 Grift,sans-serif;pointer-events:none}
#status[hidden]{display:none}
#status .status-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;font:500 25px/1 Grift,sans-serif;background:#142e5010}
#status[data-kind=success] .status-icon{color:#188247;background:#18824718}
#status[data-kind=error] .status-icon{color:#ca3846;background:#ca384618}
#status .status-copy{display:flex;flex-direction:column;gap:4px}
#status small{font-size:11px;color:#465c73}
@media(max-height:500px){#status{top:64px;padding:11px 16px;font-size:13px}}
#rotate-notice .rotate-play{flex:0 0 auto;min-height:32px;margin-top:10px;padding:7px 15px;font-size:12px}
/* Touch layouts: compact social links, contained keyboard, two-line contact title. */
@media(pointer:coarse) and (max-width:1366px){
 #about .social-links{gap:10px}
 #about .social-button{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;justify-content:center;gap:0}
 #about .social-button>span{display:none}
 #about .social-button svg{width:22px;height:22px}
 #contact-title.area-title{left:5%;bottom:5%;font-size:clamp(30.24px,4.452vw,84px);line-height:.88;max-width:40%}
 #contact-title .glitch-text{display:block;width:min-content;white-space:normal;text-align:left}
 #contact-title .glitch-text>span:not(.title-marks){white-space:normal}
 #contact-keyboard{left:5vw;top:5vh;bottom:5vh;width:45vw;height:90vh;max-height:none;padding:clamp(6px,2vh,12px);display:flex;flex-direction:column;gap:clamp(3px,1vh,6px);overflow:hidden;box-sizing:border-box}
 #contact-keyboard .keyboard-head{flex:0 0 auto;padding:0;font-size:clamp(8px,2.5vh,10px)}
 #contact-keyboard .keyboard-head button{height:clamp(20px,7vh,28px)}
 #contact-keyboard .keyboard-fields{flex:0 0 auto;margin:0}
 #contact-keyboard .keyboard-fields button{padding:clamp(3px,1.8vh,7px) 2px}
 #contact-keyboard .keyboard-keys{flex:1;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(3px,1vh,6px)}
 #contact-keyboard .keyboard-row{min-height:0;margin:0;gap:clamp(2px,.5vw,4px)}
 #contact-keyboard .keyboard-row button{height:100%;min-height:0;font-size:clamp(11px,1.8vw,18px)!important}
 #contact-keyboard .keyboard-actions button{font-size:clamp(9px,1.3vw,12px)!important}
 @supports(height:100dvh){#contact-keyboard{top:5dvh;bottom:5dvh;height:90dvh}}
}
/* One shared camera offset keeps the video and its interactive surfaces registered. */
@media(pointer:coarse) and (max-width:1366px){
 #film-screen,.scene-layer,#iu-letter-contact .scene,#iu-portfolio .stage{top:var(--scene-offset-y,0px);transition:top 650ms cubic-bezier(.22,1,.36,1)}
 #iu-letter-contact .send.social-button{left:540px;top:564px;width:138px;height:64px;padding:12px 20px;justify-content:center;gap:0}
 #iu-letter-contact .send.social-button svg,#iu-letter-contact .send.social-button .social-arrow{display:none}
}
@media(pointer:coarse) and (max-width:1366px) and (prefers-reduced-motion:reduce){
 #film-screen,.scene-layer,#iu-letter-contact .scene,#iu-portfolio .stage{transition:none}
}