.main-folder{width:52%;margin-top:-30px}.main-folder img{height:340px;object-fit:contain}.cursor{bottom:13%}.poster strong{font-size:21px}.poster-two strong{font-size:23px;letter-spacing:-1px}.poster-index{letter-spacing:.4px}.project-one{right:14%}.identity{margin-top:0}.main-folder{z-index:1}.hero{z-index:0}.file{z-index:1}
@media(max-width:900px){.main-folder{width:58%;margin-top:-12px}.main-folder img{height:280px}.project-one{right:12%}.hero{top:270px}.resume,.project-two{top:630px}.project-three{top:855px}.notes{top:835px}.contact{top:880px}.desktop{height:1070px}}
@media(max-width:520px){.hero{top:273px}.main-folder{width:70%;margin-top:0}.main-folder img{height:230px}.identity{margin-top:4px}.resume,.project-two{top:650px}.project-one{right:10%}.project-three{top:875px}.notes{top:855px}.contact{top:1010px}.desktop{height:1125px}.poster strong{font-size:18px}.poster-two strong{font-size:20px}.poster-index{font-size:7px;letter-spacing:0}.cursor{bottom:6%}}
.note-paper{gap:6px}.note-paper small{margin-top:0;font-size:9px;line-height:1.3}.paper .note-heading{font-size:21px!important}
.navigation{max-width:none;width:100%;padding:22px clamp(24px,4vw,90px)}
body{min-height:100dvh;padding-bottom:62px}
footer{position:fixed;inset:auto 0 0;z-index:5;max-width:none;width:100%;min-height:54px;padding:18px clamp(24px,4vw,90px);background:var(--cream);align-items:center}
@media(min-width:901px){
 .desktop{width:1380px;max-width:none;height:850px;zoom:var(--desktop-scale,1)}
 .hero{top:145px}.hero h1{font-size:190px}.script{font-size:134px}
 .project-three,.notes{top:645px}.contact{top:677px}
}
@media(pointer:fine){html,body,body *,dialog::backdrop{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='40' viewBox='0 0 64 80'%3E%3Cpath d='M5 4L57 40 34 44 47 67 35 74 23 51 7 67Z' fill='%23fffdf7' stroke='%23321e19' stroke-width='4'/%3E%3C/svg%3E") 3 2,default}}
@media(max-width:520px){footer{min-height:48px;padding:14px 18px}footer span:nth-child(2){font-size:10px}.navigation{padding:18px 21px}}
.project-folders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-folder.work-link{display:flex;flex-direction:column;gap:8px;border:0;background:none;text-align:center;padding:12px 4px}.project-folder img{width:100%;max-width:150px}.project-folder small{font-size:12px;color:var(--muted)}.project-folder:hover{background:#e5eadb;border-radius:8px}.back-to-works{font-size:14px;padding:8px 0;margin-bottom:18px;color:#506a40;text-decoration:underline;text-underline-offset:5px}.experience-list{padding-left:22px;color:#726958;font-size:16px}.experience-list li{margin:10px 0}.window-content h3{font-weight:500;margin:28px 0 8px}@media(max-width:520px){.project-folders{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The identity card is an information surface; other file windows keep their layout. */
dialog.about-window{width:min(860px,calc(100vw - 32px));background:#e8eddf;border-color:#cad4bf}
.about-window .window-bar{background:#e5e9dd}
.about-window .window-content{padding:0}
.badge-stage{padding:76px 42px 60px;background:radial-gradient(ellipse at 12% 15%,#fffffff2,transparent 55%),radial-gradient(ellipse at 95% 85%,#c1cfb4,transparent 65%),#e8eddf}
.identity-badge{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;padding:38px 34px 28px;border:2px solid #fffffff0;border-radius:28px;background:linear-gradient(125deg,#ffffff80,#ffffff35);box-shadow:0 20px 32px #40553520,inset 0 0 0 1px #cbd7bf80;backdrop-filter:blur(10px)}
.badge-slot{position:absolute;top:12px;left:calc(50% - 28px);width:56px;height:7px;border-radius:8px;background:#78906a50;box-shadow:inset 0 2px 3px #35412d25}
.badge-monogram{border-radius:14px;display:flex;flex-direction:column;justify-content:center;padding:24px 16px;color:#586d49;border:1px solid #a6b99455;background:#dce6d24d}
.badge-monogram>span{font-size:12px;letter-spacing:2px}.badge-monogram b{font:italic 86px/.88 Georgia,serif;letter-spacing:-8px;margin:28px 0}.badge-monogram small{font-size:13px;letter-spacing:2px}
.badge-information .badge-kicker{font-size:12px;letter-spacing:2px;margin:0 0 10px;color:#596b4b}.badge-information h2{font-size:36px;margin:0 0 16px}.badge-label{display:inline-block;background:#c3d894;border-radius:50%;padding:10px 20px;font-size:14px;transform:rotate(-3deg);color:#354629}
.badge-details{margin:26px 0 20px}.badge-details>div{display:grid;grid-template-columns:70px 1fr;gap:12px;margin:12px 0;font-size:14px;line-height:1.6}.badge-details dt{color:#6b7562}.badge-details dd{margin:0;color:#2f3c28;overflow-wrap:anywhere}
.badge-bars{height:30px;opacity:.7;background:repeating-linear-gradient(90deg,#31412a 0 2px,transparent 2px 4px,#31412a 4px 5px,transparent 5px 9px,#31412a 9px 13px,transparent 13px 15px,#31412a 15px 16px,transparent 16px 21px);max-width:240px}
.badge-information .badge-signature{font-size:10px;letter-spacing:3px;margin:7px 0 0;color:#627455}
@media(max-width:600px){.badge-stage{padding:42px 18px 28px}.identity-badge{grid-template-columns:1fr;gap:24px;padding:34px 24px 24px;border-radius:22px}.badge-monogram{padding:16px;display:grid;grid-template-columns:1fr auto;align-items:center}.badge-monogram b{font-size:52px;letter-spacing:-4px;margin:0;grid-column:2;grid-row:1/3}.badge-monogram b br{display:none}.badge-monogram small{font-size:12px}.badge-information h2{font-size:30px}.badge-details>div{grid-template-columns:64px 1fr;gap:8px}}
dialog.about-window{background:transparent;border:0;box-shadow:none;border-radius:0;width:min(860px,calc(100vw - 24px));max-height:95dvh;overflow:auto}
.about-window .window-bar{display:none}.about-window .window-content{padding:0}.about-window::backdrop{background:#28332135;backdrop-filter:blur(6px)}
.about-window .badge-stage{background:none;padding:76px 24px 38px}
.about-window .identity-badge{grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;padding:32px 36px 0 20px;background:linear-gradient(125deg,#ffffff9c 0%,#ffffff38 38%,#dcead12e 70%,#ffffff80 100%);border:1px solid #ffffffe6;border-radius:30px;backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 2px 2px 3px #fff,inset -2px -2px 5px #ffffffb0,0 22px 34px #23351c30}
.badge-portrait{align-self:end;line-height:0;border:0;background:none}.badge-portrait img{width:100%;height:380px;object-fit:contain;object-position:center bottom;filter:grayscale(1);border:0;border-radius:0 0 0 25px}
.about-window .badge-information{padding:10px 0 28px}.badge-clip{position:absolute;left:calc(50% - 30px);top:-65px;font-family:'Segoe UI Emoji',sans-serif;font-size:64px;line-height:1.3;filter:grayscale(1) drop-shadow(2px 4px 2px #0003);transform:rotate(-12deg)}
.badge-close{position:absolute;right:14px;top:12px;width:30px;height:30px;padding:0;font-size:25px;color:#4c5945;border-radius:50%;z-index:2}.badge-close:hover{background:#ffffff70}.badge-details a{color:inherit;text-decoration:none}.badge-details a:hover{text-decoration:underline}
@media(max-width:600px){.about-window .badge-stage{padding:66px 10px 24px}.about-window .identity-badge{grid-template-columns:1fr;gap:12px;padding:28px 24px 20px}.badge-portrait{order:2;max-width:220px;justify-self:center}.badge-portrait img{height:230px;border-radius:0}.about-window .badge-information{padding:8px 0}.badge-clip{font-size:52px;top:-53px;left:calc(50% - 26px)}}
.badge-portrait img{filter:none}
.about-window .badge-close{left:14px;right:auto;top:12px;display:grid;place-items:center;width:30px;height:30px;padding:0;line-height:1;font-size:0;background:#ffffff65}
.about-window .badge-close::before,.about-window .badge-close::after{content:"";position:absolute;width:12px;height:1.5px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.about-window .badge-close::after{transform:rotate(-45deg)}
.about-window .badge-portrait{align-self:center;display:flex;align-items:center;justify-content:center}
.about-window .badge-portrait img{object-position:center;border-radius:0}
@media(min-width:601px){.about-window .identity-badge{padding-top:32px;padding-bottom:32px}.about-window .badge-information{padding-top:0;padding-bottom:0}}
/* Shared glass material for all file windows; About retains its standalone badge. */
:root{--window-glass:linear-gradient(125deg,#ffffffb3 0%,#ffffff70 38%,#e0ebd959 72%,#ffffffa6 100%);--window-glass-shadow:inset 2px 2px 3px #fffffff0,inset -2px -2px 5px #ffffffb0,0 22px 45px #23351c30}
dialog:not(.about-window){background:var(--window-glass);border:1px solid #ffffffe6;border-radius:24px;box-shadow:var(--window-glass-shadow);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6)}
dialog::backdrop{background:#28332135;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog:not(.about-window) .window-bar{background:linear-gradient(110deg,#ffffff80,#edf3e666);border-bottom:1px solid #ffffff90;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
dialog:not(.about-window) .window-content{background:transparent}
dialog:not(.about-window) .window-content p,dialog:not(.about-window) .experience-list{color:#4b5344}
dialog:not(.about-window) .detail-labels{color:#58614f}
dialog:not(.about-window) .placeholder{background:#ffffff38;border-color:#899a7580}
dialog:not(.about-window) .project-cover{background:linear-gradient(120deg,#d4e0c780,#ffffff55)}
dialog:not(.about-window) .project-folder:hover{background:#ffffff50}
:root{--close-button-background:#d2d1d0}
#close-window,.about-window .badge-close,.about-window .badge-close:hover{background:var(--close-button-background);color:#3d3d3b}
:root{--body-text-size:1rem;--body-text-color:#2b3125}
#window .window-content p:not(.eyebrow):not(.badge-kicker):not(.badge-signature),
#window .window-content .detail-labels,
#window .window-content .experience-list,
#window .window-content .badge-details,
#window .window-content .badge-details>div,
#window .window-content .badge-details dt,
#window .window-content .badge-details dd,
#window .window-content .badge-label,
#window .window-content .project-folder span,
#window .window-content .project-folder small,
#window .window-content .back-to-works{font-size:var(--body-text-size);color:var(--body-text-color)}
#window .window-content .detail-labels span,#window .window-content .experience-list li{font-size:inherit;color:inherit}
@media(min-width:901px){
 dialog.about-window{width:min(1060px,calc(100vw - 48px))}
 .about-window .identity-badge{gap:40px;padding:40px 48px 40px 28px}
 .about-window .badge-portrait img{height:460px}
 .about-window .badge-information h2{font-size:42px}
}
.desktop .resume{left:auto;right:4%;top:405px;transform:rotate(4deg)}
.desktop .project-two{left:5%;right:auto;top:415px;transform:rotate(-5deg)}
.desktop .contact{left:auto;right:26%;top:645px}
@media(max-width:900px){.desktop .resume{right:3%;top:630px}.desktop .project-two{left:3%;top:630px}.desktop .contact{right:37%;top:835px}}
@media(max-width:520px){.desktop .resume{right:10%;top:650px}.desktop .project-two{left:7%;top:650px}.desktop .contact{right:11%;top:855px}.desktop{height:1030px}}
.desktop .resume:hover,.desktop .project-two:hover{transform:translateY(-7px) rotate(-2deg)}
.main-folder .filename{display:block;width:60px;max-width:100%;margin:-32px auto 33px;padding:5px 0;font-style:normal;font-weight:600;text-align:center;position:relative}
dialog.resume-window{width:min(1080px,calc(100vw - 32px));height:90dvh;max-height:90dvh}
.resume-window .window-content{padding:20px;height:calc(100% - 50px);display:flex;flex-direction:column;gap:16px}
.resume-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.resume-toolbar h2{margin:0;font-size:24px}.resume-actions{display:flex;align-items:center;gap:20px;font-size:16px}
.resume-actions .resume-download{background:#d2d1d0;color:#2b3125;border-radius:8px;padding:10px 16px;text-decoration:none}
.resume-viewer{display:block;width:100%;flex:1;min-height:250px;border:0;border-radius:8px;background:#ffffff80}
@media(max-width:600px){.resume-window .window-content{padding:14px}.resume-toolbar h2{font-size:20px}.resume-actions{gap:14px}}
.project-folders .project-folder span{max-width:100%;overflow-wrap:anywhere}
.project-folders .project-folder small:empty{display:none}
.contact-details{margin:24px 0 0;font-size:var(--body-text-size);color:var(--body-text-color);line-height:1.8}
.contact-details>div{display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px;padding:10px 0}
.contact-details dt,.contact-details dd{margin:0}
.contact-details dd{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.contact-details dd span{overflow-wrap:anywhere;user-select:text}
.contact-copy{flex-shrink:0;padding:5px 12px;border:1px solid #ffffff90;border-radius:8px;background:#ffffff50;color:inherit;font:inherit;font-size:14px}
.contact-copy:hover{background:#ffffff90}
.contact-copy:focus-visible{outline:2px solid #738965;outline-offset:3px}
.copy-status{min-height:1.8em;margin:10px 0 0}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contact-heading h2{margin:0}
.project-experience-item{padding:24px 0;border-bottom:1px solid #ffffff80}
.project-experience-item:first-child{padding-top:0}
.project-experience-item:last-child{padding-bottom:0;border-bottom:0}
.project-experience-item h3{margin:0 0 12px;font-size:20px;line-height:1.5}
.project-experience-item .detail-labels{margin:0 0 12px;flex-wrap:wrap}
.project-experience-item p{margin:0;line-height:1.85}
.phone-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:24px}
.phone-preview{min-width:0;text-align:center}
.phone-device{display:block;position:relative;width:100%;max-width:230px;margin:0 auto;padding:7px;border:2px solid #93958e;border-radius:36px;background:#161714;box-shadow:inset 0 0 0 2px #42443d,0 14px 24px #26301f25;text-decoration:none;color:inherit;transition:transform .2s}
a.phone-device:hover{transform:translateY(-4px)}
.phone-device::after{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);width:32%;height:18px;background:#090a08;border-radius:20px;pointer-events:none}
.phone-screen{display:block;aspect-ratio:9/19.5;overflow:hidden;border-radius:27px;background:linear-gradient(145deg,#e9ede3,#bdcab1)}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover}
.phone-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#536348;font-size:20px}
.phone-empty small{font-size:14px;font-weight:400}
.phone-caption{margin:18px 0 0}
@media(max-width:520px){.phone-gallery{gap:16px}.phone-device{padding:5px;border-radius:24px}.phone-screen{border-radius:17px}.phone-device::after{top:12px;height:12px}.phone-empty{font-size:16px}.phone-empty small{font-size:12px}}
@media(max-width:520px){.contact-details>div{grid-template-columns:72px minmax(0,1fr);gap:6px}.contact-details dd{gap:8px;flex-wrap:wrap}}

.hero h1.interactive-title{display:flex;align-items:baseline;justify-content:center;pointer-events:auto}
.title-slot{display:inline-block;position:relative;flex:0 0 auto;padding:0;transition:padding .55s cubic-bezier(.2,1.4,.3,1)}
.title-letter{display:block;position:relative;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;border:0;padding:0;background:none}
.title-glyph{display:block;transition:opacity .2s,transform .5s}
.title-letter img{position:absolute;left:50%;top:50%;width:.95em;height:1.05em;max-width:none;object-fit:cover;border-radius:.065em;box-shadow:0 .035em .07em #321e192b;opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg) scale(.35);transition:transform .6s cubic-bezier(.2,1.5,.3,1),opacity .3s}
.title-slot.is-active{padding-inline:.08em;z-index:3}
.title-slot.is-active .title-glyph{opacity:0;transform:scale(.7)}
.title-slot.is-active img{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}
.title-slot:nth-child(even).is-active img{transform:translate(-50%,-50%) rotate(6deg) scale(1)}
.title-letter:focus-visible{outline:2px solid #758b62;outline-offset:4px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.title-slot,.title-glyph,.title-letter img{transition:none}}
/* Artwork is clipped to the glyph, preserving the letter silhouette. */
.title-letter img{display:none}
.title-glyph{background-image:var(--letter-image);background-size:auto 100%;background-position:center;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;transition:transform .55s cubic-bezier(.2,1.4,.3,1),color .2s}
.title-slot.is-active .title-glyph{opacity:1;color:transparent;-webkit-text-fill-color:transparent;transform:scale(1.08) rotate(-4deg);filter:drop-shadow(0 2px 1px #321e1930)}
.title-slot:nth-child(even).is-active .title-glyph{transform:scale(1.08) rotate(4deg)}
/* Include glyph overhang and descenders in the image clipping area. */
.title-glyph{padding:.12em .14em .2em;margin:-.12em -.14em -.2em;background-size:cover;line-height:1.15}
/* Reference phone frame: mask removes the baked checkerboard around and inside it. */
.phone-device{padding:0;border:0;border-radius:0;background:none;box-shadow:none;aspect-ratio:728/1098;max-width:280px}
.phone-device::after{display:none}
.phone-frame-art{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mask:url("assets/phone-mask.svg") center/100% 100%;-webkit-mask:url("assets/phone-mask.svg") center/100% 100%}
.phone-device .phone-screen{position:absolute;left:18.5%;top:2.7%;width:63.6%;height:91.2%;aspect-ratio:auto;border-radius:12% / 6%;overflow:hidden}
.phone-device .phone-screen img{object-fit:cover}
.phone-gallery{gap:20px}