:root{--accent:#cedc2a;--accent-pink:#e03c95}
@font-face{font-family:Kira;src:local('Arial')}*{box-sizing:border-box}html{background:#111210;color:#eeeee8;scroll-behavior:smooth}body{margin:0;font:16px/1.4 Arial,Helvetica,sans-serif}body.home{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}::selection{color:#111210;background:var(--accent)}[hidden]{display:none!important}.skip{position:fixed;top:-100px;background:var(--accent);color:#111;padding:12px;z-index:100}.skip:focus{top:0}.eyebrow{font-size:12px;color:#999b94;display:block}.shell{position:fixed;inset:0 0 auto;z-index:20;padding:25px 28px;display:grid;grid-template-columns:130px 1fr 1fr auto;gap:35px;pointer-events:none}.shell>*{pointer-events:auto}.wordmark{font-weight:800;font-size:40px;letter-spacing:-3px;line-height:.85;position:relative;width:min-content}.wordmark span{display:block;font-size:12px;letter-spacing:1px;margin-top:8px}.wordmark sup{position:absolute;right:-13px;top:0;font-size:12px;letter-spacing:0}.nav-group .eyebrow{margin-bottom:24px}nav{display:flex;align-items:flex-start;flex-direction:column;font-size:21px;font-weight:600;line-height:1.03;letter-spacing:-1px}nav a,nav button{position:relative;transition:color .2s}nav .active{color:var(--accent);padding-left:22px}nav .active:before{content:'—';position:absolute;left:0}nav:has(a:hover) a:not(:hover),nav:has(button:hover) a{color:#666}.header-time{display:flex;gap:18px;font-size:12px}.header-index{font-size:12px;text-align:right}.header-index span{display:block;color:#999b94;margin-top:3px}#menu-toggle{display:none}.view{min-height:100svh}#work{position:relative;height:100svh;overflow:hidden}#stage{position:absolute;inset:0;cursor:grab;touch-action:none}#stage:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.stage-hint{position:absolute;left:50%;top:74%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;opacity:0;pointer-events:none;background:#111b;padding:8px 14px;border-radius:20px}.stage-hint span{margin-left:18px}#stage:hover .stage-hint{opacity:1}#fallback-cover{position:absolute;width:42%;height:50%;object-fit:contain;left:29%;top:25%}.project-meta{position:absolute;left:28px;top:52%;display:flex;gap:45px;pointer-events:none;font-size:13px}.project-meta p{margin:8px 0}.project-info{position:absolute;right:4%;top:48%;width:22%;max-width:310px;text-align:center;transform:translateY(-50%)}.project-info h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,2.4vw,38px);font-weight:400;line-height:1.05;letter-spacing:-1px;margin:12px 0;text-transform:uppercase;text-wrap:balance}.short-line{display:block;height:1px;width:18px;background:#666;margin:24px auto}.project-info p{font-size:13px;line-height:1.4;max-width:235px;margin:0 auto;color:#b8bab3}#palette{display:flex;justify-content:center;gap:4px;margin-top:32px}#palette i{width:14px;height:14px;border:1px solid #ffffff15}.counter{position:absolute;left:14%;bottom:70px;pointer-events:none}.counter>div{display:flex;gap:20px;align-items:flex-start}.counter #current{font-size:clamp(90px,12vw,175px);letter-spacing:-.09em;line-height:1}.total{font-size:14px;margin-top:17px}.work-bottom{position:absolute;bottom:24px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.4px}.step-buttons{display:flex;align-items:center;gap:18px}.step-buttons button,#index-toggle{padding:8px 0}.step-buttons span{color:#666}#index-toggle span{margin-left:16px;font-size:17px}.page{padding:220px 28px 70px}.page-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:45px;border-bottom:1px solid #393b35;padding-bottom:26px}.page-heading h1{font:400 clamp(50px,8vw,115px)/.9 Georgia,serif;margin:0;letter-spacing:-5px}.page-heading p{color:#999b94;font-size:13px;max-width:270px}.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px 20px}.archive-card .image-wrap{overflow:hidden;aspect-ratio:1.33;background:#1a1c18}.archive-card img{height:100%;width:100%;object-fit:cover;transition:transform .6s}.archive-card:hover img{transform:scale(1.035)}.archive-card h2{font-size:17px;font-weight:400;margin:13px 0 5px}.archive-card .card-meta{display:flex;justify-content:space-between;font-size:12px;color:#97998f}.about-top{display:grid;grid-template-columns:1fr 2fr;gap:60px}.about-top h1{font-size:clamp(55px,8vw,115px);font-weight:500;line-height:.95;letter-spacing:-6px;margin:0}.about-top em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.about-top .intro{font-size:25px;max-width:740px;margin:40px 0 80px;line-height:1.3;color:#b8bab3}.about-label{font-size:12px;color:#999}.about-image{width:100%;max-height:620px;object-fit:cover}.about-details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:60px;margin:70px 0}.about-details h2{font-size:13px;color:#aaa;font-weight:400}.about-details p{font-size:20px;line-height:1.6}.project-top{display:grid;grid-template-columns:24% 1fr;gap:7%;margin-bottom:70px}.project-summary{position:sticky;top:220px;align-self:start}.project-summary p{font-size:14px;line-height:1.6;color:#b8bab3}.project-summary h1{font:400 34px/1.1 Georgia,serif;margin:15px 0 32px}.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #3a3b35;margin-top:30px;padding-top:20px;font-size:13px}.project-gallery{display:flex;flex-direction:column;gap:22px;min-width:0}.project-gallery img,.project-gallery video{display:block;width:100%;height:auto;background:#1a1c18}.project-gallery a{display:block}.project-gallery figure{margin:0}.project-gallery figcaption{padding:8px 0;font-size:11px;color:#888}.external-videos{padding:25px;border:1px solid #444}.external-videos a{margin:12px 0;text-decoration:underline}.next-project{display:block;border-top:1px solid #444;padding:45px 0}.next-project h2{font:400 clamp(35px,7vw,90px)/1.1 Georgia;margin:15px 0;letter-spacing:-2px}.project-return{font-size:12px;text-decoration:underline;margin-bottom:25px;display:inline-block}.site-footer{display:flex;justify-content:space-between;border-top:1px solid #444;margin-top:70px;padding-top:25px;color:#aaa;font-size:12px}dialog{background:#20221d;color:#eee;border:1px solid #484b40;width:min(650px,calc(100% - 32px));padding:50px;box-shadow:0 40px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(9px)}.dialog-close{position:absolute;right:22px;top:22px;font-size:11px}dialog h2{font-size:55px;line-height:1;letter-spacing:-2px;font-weight:500;margin:40px 0}dialog em{font-family:Georgia;font-weight:400;color:var(--accent)}dialog p{color:#aaa;max-width:420px}.contact-link{display:inline-block;margin:30px 0;padding-bottom:7px;border-bottom:1px solid #eee;font-size:13px}.contact-footer{display:block;font-size:10px;color:#aaa;letter-spacing:1px;margin-top:30px}#transition{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;background:var(--accent);color:#111;transform:translateY(101%)}#transition span{font-size:clamp(35px,7vw,100px);letter-spacing:-3px}#loader{position:fixed;inset:0;z-index:60;background:#111210;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:clamp(35px,6vw,90px);letter-spacing:-3px}#loader small{font-size:11px;letter-spacing:1px;margin-top:24px;color:#999}.loader-serif{font:italic 1em Georgia;color:var(--accent)}@media(min-width:1800px){.project-info{right:7%}.project-meta{left:40px;font-size:15px}}@media(max-width:1000px){.project-meta{display:none}.shell{grid-template-columns:110px 1fr 1fr auto;gap:20px}.project-info{right:2%;width:25%}.project-top{grid-template-columns:27% 1fr;gap:4%}.archive-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.shell{padding:20px;display:block}.wordmark{position:absolute;left:50%;transform:translateX(-50%);font-size:30px}.wordmark span{font-size:9px;margin-top:6px}.wordmark sup{font-size:10px;right:-12px}.nav-group .eyebrow,.header-time,.header-index{display:none}#menu-toggle{display:block;width:35px;height:30px;position:relative;z-index:32}#menu-toggle i{display:block;height:1px;width:32px;background:#eee;position:absolute;top:10px;transition:transform .3s}#menu-toggle i+ i{top:18px}#menu-toggle[aria-expanded=true] i{transform:translateY(4px) rotate(45deg)}#menu-toggle[aria-expanded=true] i+i{transform:translateY(-4px) rotate(-45deg)}nav{display:none;position:fixed;inset:0;background:#111210;justify-content:center;padding:40px;z-index:30;font-size:50px;line-height:1.1;letter-spacing:-2px}nav.open{display:flex}.wordmark{z-index:31}.project-info{right:auto;left:15%;width:70%;max-width:none;top:auto;bottom:87px;transform:none}.project-info h1{font-size:29px;max-width:320px;margin:8px auto}.project-info .short-line{margin:14px auto}.project-info p{font-size:12px;max-width:255px}.project-info .eyebrow{font-size:12px}#palette{margin-top:20px}#palette i{width:11px;height:11px}.counter{top:112px;left:20px;bottom:auto}.counter>.eyebrow{display:none}.counter #current{font-size:80px}.counter>div{gap:15px}.counter .total{font-size:12px;margin-top:11px}.work-bottom{bottom:17px;left:20px;right:20px;font-size:9px}.work-bottom>span{display:none}.stage-hint{display:none}.page{padding:150px 20px 40px}.page-heading{display:block}.page-heading h1{font-size:64px;letter-spacing:-3px}.page-heading p{margin-top:25px}.archive-grid{gap:30px 12px}.archive-card h2{font-size:14px}.archive-card .card-meta{font-size:10px}.archive-card .card-meta span:first-child{max-width:100px}.about-top{display:block}.about-label{margin-bottom:40px}.about-top h1{font-size:60px;letter-spacing:-3px}.about-top .intro{font-size:21px;margin-bottom:40px}.about-details{grid-template-columns:1fr;gap:15px;margin:35px 0}.about-details p{font-size:18px}.project-top{display:flex;flex-direction:column;gap:35px}.project-summary{position:static}.project-summary h1{font-size:45px}.project-facts{margin-top:20px}.project-gallery{gap:12px}.next-project h2{font-size:43px}.site-footer{font-size:10px;gap:20px}dialog{padding:40px 25px}dialog h2{font-size:44px}#fallback-cover{left:12%;width:76%;top:25%;height:35%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.archive-card:hover img{transform:none}}

.work-bottom{z-index:3;background:linear-gradient(transparent,#111210 40%);padding-top:18px}.project-info{z-index:3}@media(max-width:700px){.work-bottom{background:#111210e8;padding:8px 10px;left:10px;right:10px;bottom:9px}.project-info{background:linear-gradient(transparent,#111210 12%,#111210);padding-top:12px}}
/* Keep the caption readable above the continuous page stack. */
@media(max-width:700px){.project-info{left:0;width:100%;bottom:65px;padding:35px 24px 12px;background:linear-gradient(transparent,#111210 24%)}.project-info h1{font-size:clamp(23px,7vw,29px)}.counter{z-index:2}.project-info .short-line{margin:12px auto}#palette{margin-top:16px}.shell{background:linear-gradient(#111210cc,transparent)}}
@media(min-width:701px) and (max-width:1000px) and (orientation:portrait){.project-info{top:auto;bottom:80px;right:3%;width:36%;transform:none;background:linear-gradient(transparent,#111210 20%);padding-top:25px}.counter{left:5%}}
@media(max-height:600px) and (max-width:700px){.counter{top:85px}.counter #current{font-size:48px}.project-info{bottom:48px;padding-top:18px}.project-info p,.project-info .short-line,#palette{display:none}.project-info h1{font-size:22px}}

/* A cursor-following cue only appears when a real cover is hit. */
#stage .stage-hint{top:0;left:0;transform:none;z-index:5;white-space:nowrap;opacity:0;background:var(--accent);color:#111210;font-size:11px;padding:11px 15px;transition:opacity .18s;box-shadow:0 5px 25px #0003}
#stage:hover .stage-hint{opacity:0}#stage.cover-hover .stage-hint{opacity:1}#stage.cover-hover{cursor:pointer}#stage:active{cursor:grabbing}
.cover-instruction{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.5px;border-bottom:1px solid #777;padding-bottom:4px;color:var(--accent)}
@media(max-width:700px){.cover-instruction{margin-top:12px;font-size:10px}.project-info{padding-top:30px}#palette{margin-top:12px}}
@media(hover:none){#stage .stage-hint{display:none}}

.wordmark{font-size:29px;letter-spacing:-1.7px}.wordmark span{font-size:13px;letter-spacing:1px}.portrait{display:block;width:100%;margin-top:35px;aspect-ratio:1;object-fit:cover}.about-bio{font-size:18px;line-height:1.6;color:#b8bab3;max-width:740px}.experience{margin-top:70px}.experience>h2{font:400 48px Georgia,serif}.experience article{display:grid;grid-template-columns:1fr 2fr;gap:60px;border-top:1px solid #393b35;padding:26px 0}.experience article>span{font-size:14px;color:#aaa}.experience h3{margin:0;font-size:22px;font-weight:400}.experience p{max-width:750px;color:#b8bab3;line-height:1.6}.contact-methods{display:grid;gap:18px;margin:30px 0}.contact-methods a{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #555;padding-bottom:12px;font-size:20px}.contact-methods span{font-size:11px;color:var(--accent);align-self:center}.social-links{display:flex;gap:25px;font-size:14px}.about-top .intro{margin-bottom:25px}
@media(max-width:700px){.wordmark{font-size:26px;letter-spacing:-1.4px}.wordmark span{font-size:11px}.portrait{max-width:380px;margin:25px auto 40px}.experience article{grid-template-columns:1fr;gap:10px}.experience h3{font-size:20px}.contact-methods a{font-size:16px}.contact-methods span{font-size:10px}.about-bio{font-size:16px}}
.portrait{height:auto}

#loader{--reveal:0%;display:block;overflow:hidden;background:#191a17;letter-spacing:0;pointer-events:auto}#loader-name{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent);filter:blur(2px);transform:scale(.98);line-height:.82;font-size:clamp(45px,11vw,170px);letter-spacing:-.055em;font-weight:500}#loader-name em{font-family:Georgia,serif;font-weight:400}#loader-name small{font:400 clamp(18px,2.3vw,32px)/1.5 Arial;color:#eee;margin-top:30px;letter-spacing:0}.loader-curtain{position:absolute;inset:0 0 0 var(--reveal);background:#080908}.loader-mark{position:absolute;top:50%;left:clamp(0px,var(--reveal),105%);transform:translate(-115%,-50%) rotate(-8deg);font-size:clamp(38px,6vw,90px);font-weight:800;letter-spacing:-.1em;color:var(--accent)}.loader-mark span{display:inline-block;font-weight:400;margin-left:10px;animation:loader-push .7s ease-in-out infinite alternate}#loader-counter{position:absolute;right:24px;top:50%;transform:translateY(-50%);font:400 clamp(48px,6vw,90px)/1 Georgia;color:#eee;mix-blend-mode:difference}.loader-caption{position:absolute;bottom:30px;left:28px;font-size:11px;letter-spacing:1px;color:#bbb}#transition{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;background:#111210;color:var(--accent);visibility:hidden;opacity:0;transform:none;pointer-events:none}#transition small{font-size:11px;letter-spacing:2px;color:#999}#transition-title{font:400 clamp(30px,7vw,105px)/1.05 Georgia,serif;text-align:center;max-width:85%;letter-spacing:-.04em;text-wrap:balance}.scroll-reveal{opacity:0;filter:blur(10px);transform:translateY(45px) scale(.98);transition:opacity .85s ease,filter .85s ease,transform 1s cubic-bezier(.2,.65,.25,1)}.scroll-reveal.revealed{opacity:1;filter:blur(0);transform:none}.scroll-arrow{display:inline-block;font-size:19px;margin-right:12px;font-style:normal;animation:scroll-cue 1.7s ease-in-out infinite}.neighbor-title{position:absolute;right:4%;width:22%;max-width:310px;text-align:center;font:400 clamp(16px,1.7vw,25px)/1.15 Georgia,serif;text-transform:uppercase;opacity:.14;filter:blur(1.2px);pointer-events:none;z-index:1}#neighbor-before{top:22%}#neighbor-after{top:76%}.archive-card{perspective:900px}.archive-card:hover .image-wrap{transform:translateY(-6px);transition:transform .5s}.project-gallery figure img{transition:transform 1s cubic-bezier(.2,.65,.25,1)}.project-gallery figure a{overflow:hidden}.project-gallery figure:hover img{transform:scale(1.018)}@keyframes scroll-cue{0%,100%{transform:translateY(-4px);opacity:.35}55%{transform:translateY(4px);opacity:1}}@keyframes loader-push{to{transform:translateX(8px)}}@media(max-width:1000px){.neighbor-title{display:none}}@media(max-width:700px){#loader-name{font-size:13vw;line-height:.95}#loader-counter{top:75%;right:20px;font-size:55px}.loader-mark{font-size:35px}.loader-caption{font-size:9px;left:20px}#transition-title{font-size:11vw}.scroll-reveal{transform:translateY(25px)}}@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;filter:none;transform:none}.scroll-arrow,.loader-mark span{animation:none}}

/* Original project module sequence, with the persistent summary beside it. */
.project-gallery{gap:0}.gallery-block{margin-inline:auto;min-width:0;max-width:100%}.gallery-grid{display:flex;flex-wrap:wrap;gap:0;align-items:flex-start}.gallery-tile{min-width:0;max-width:100%}.gallery-tile figure,.gallery-tile a{height:100%}.gallery-columns{display:flex;gap:24px;align-items:flex-start}.gallery-text{padding:28px 20px;line-height:1.6;font-size:15px;color:#b8bab3;overflow-wrap:anywhere}.gallery-text p{margin:0;white-space:pre-line}.gallery-film{aspect-ratio:16/9;display:grid;place-items:center;background:#171916}.gallery-film a{padding:25px;font-size:14px;color:var(--accent)}.gallery-compare{--compare:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}.gallery-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.compare-after{clip-path:inset(0 calc(100% - var(--compare)) 0 0)}.compare-divider{position:absolute;left:var(--compare);top:0;height:100%;border-left:2px solid white;display:flex;align-items:center;pointer-events:none;color:white;font-size:24px}.gallery-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.project-gallery figure:hover img{transform:none}@media(max-width:700px){.project-gallery{gap:0}.gallery-columns{gap:14px}.gallery-text{font-size:13px;padding:16px 8px}}@media(max-width:420px){.gallery-columns{flex-direction:column}.gallery-columns>div{width:100%}}
.project-summary{min-width:0;overflow-wrap:anywhere}.project-top>*{max-width:100%}

/* Supplied Kareem identity: original transparent icon and brand palette. */
.wordmark{display:block;width:88px;line-height:0}.wordmark img{display:block;width:100%;height:auto}.wordmark:hover img{filter:drop-shadow(0 0 12px #e03c9533)}
#loader-name{color:var(--accent-pink)}#loader-name em{color:var(--accent)}.loader-mark{width:clamp(80px,10vw,150px);line-height:0;letter-spacing:0}.loader-mark img{width:100%;height:auto;display:block;animation:brand-float 1.2s ease-in-out infinite alternate}.short-line{background:var(--accent-pink)}.scroll-arrow{color:var(--accent-pink)}.about-top em,dialog em{color:var(--accent-pink)}.social-links a:hover,.header-index:hover{color:var(--accent)}
@keyframes brand-float{from{transform:translateY(-4px) rotate(-3deg)}to{transform:translateY(4px) rotate(3deg)}}
@media(max-width:700px){.wordmark{width:68px;top:14px}.loader-mark{width:80px}}
@media(prefers-reduced-motion:reduce){.loader-mark img{animation:none}}

/* Theme controls stay available across all views and remember the visitor choice. */
.theme-toggle{position:fixed;right:28px;top:78px;display:flex;gap:7px;align-items:center;font-size:10px;letter-spacing:1px;z-index:35;padding:8px 11px;border:1px solid #ffffff35;border-radius:30px;background:#111210cc;backdrop-filter:blur(12px)}.theme-toggle>span:first-child{font-size:19px;line-height:1}.cv-download{display:inline-block;margin:24px 0 4px;border-bottom:1px solid var(--accent);color:var(--accent);font-size:12px;letter-spacing:1px;padding-bottom:7px}
html[data-theme=light]{color-scheme:light;background:#f4f3ee;color:#191a17;--accent:#687600;--accent-pink:#b51c72}
[data-theme=light] body{background:#f4f3ee}[data-theme=light] .wordmark{background:#111210;border-radius:9px;padding:6px;width:88px}
[data-theme=light] .theme-toggle{background:#f4f3eecc;border-color:#191a1738}
[data-theme=light] .eyebrow,[data-theme=light] .header-index span,[data-theme=light] .about-label,[data-theme=light] .archive-card .card-meta,[data-theme=light] .experience article>span{color:#63665d}
[data-theme=light] .project-info p,[data-theme=light] .project-summary p,[data-theme=light] .about-bio,[data-theme=light] .about-top .intro,[data-theme=light] .experience p,[data-theme=light] .page-heading p,[data-theme=light] .gallery-text{color:#565a50}
[data-theme=light] .work-bottom{background:linear-gradient(transparent,#f4f3ee 40%)}[data-theme=light] #transition{background:#f4f3ee}
[data-theme=light] #stage .stage-hint,[data-theme=light] ::selection{background:#cedc2a;color:#111210}
[data-theme=light] #menu-toggle i{background:#191a17}[data-theme=light] nav.open{background:#f4f3ee}
[data-theme=light] .site-footer,[data-theme=light] .about-details h2{color:#63665d}[data-theme=light] .project-facts,[data-theme=light] .experience article,[data-theme=light] .page-heading,[data-theme=light] .site-footer,[data-theme=light] .next-project{border-color:#191a1738}
[data-theme=light] dialog{background:#f4f3ee;color:#191a17;border-color:#bbb}[data-theme=light] dialog p,[data-theme=light] .contact-footer{color:#565a50}[data-theme=light] .gallery-film{background:#e7e7df}
[data-theme=light] #loader{background:#efeee8}[data-theme=light] .loader-curtain{background:#e2e3d9}[data-theme=light] #loader-counter{color:#191a17;mix-blend-mode:normal}[data-theme=light] .loader-caption{color:#565a50}[data-theme=light] .loader-mark img{background:#111210;border-radius:8px;padding:6px}
@media(max-width:700px){.theme-toggle{right:16px;top:20px;font-size:9px;padding:6px 8px}[data-theme=light] .wordmark{width:68px;padding:4px}[data-theme=light] .shell{background:linear-gradient(#f4f3eedd,transparent)}[data-theme=light] .work-bottom{background:#f4f3eef2}[data-theme=light] .project-info{background:linear-gradient(transparent,#f4f3ee 24%)}}
@media(min-width:701px) and (max-width:1000px) and (orientation:portrait){[data-theme=light] .project-info{background:linear-gradient(transparent,#f4f3ee 20%)}}

.wordmark{align-self:start}[data-theme=light] .wordmark,[data-theme=light] .loader-mark img{background:none;border-radius:0;padding:0}

/* Preserve each project's image composition instead of wrapping 3 into 2+1. */
.gallery-row{display:contents}
@media(max-width:700px){
 .project-gallery{width:100%;min-width:0}
 .gallery-grid{display:block}
 .gallery-row{display:flex;flex-wrap:nowrap;align-items:flex-start;width:100%;gap:0}
 .gallery-row>.gallery-tile{flex-basis:0!important;min-width:0}
 .gallery-tile figure,.gallery-tile a{height:auto}
 .gallery-columns{flex-direction:column;gap:14px}
 .gallery-columns>div{flex:none!important;width:100%;min-width:0}
 .project-gallery img,.project-gallery video{max-width:100%}
}

/* The digital collection extends the existing portfolio, with its own routes. */
.category-filters{position:relative;inset:auto;padding:0;z-index:auto;justify-content:flex-start;align-content:flex-start;background:transparent!important;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;font-size:14px;line-height:1.3;letter-spacing:0;margin:0 0 24px;font-weight:400}
.category-filters a{display:flex;gap:15px;align-items:center;border:1px solid #7775;padding:13px 18px;border-radius:30px;transition:background .2s,color .2s}
.category-filters a span{font-size:11px;opacity:.65}.category-filters a[aria-current=page]{background:var(--accent);color:#111210;border-color:var(--accent)}
.category-filters a:hover{border-color:var(--accent);color:inherit!important}.category-filters a[aria-current=page]:hover{color:#111210!important}
.collection-count{font-size:11px;letter-spacing:1px;color:#90938a;margin:0 0 30px}.digital-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 28px}
.digital-card .image-wrap{aspect-ratio:1.44;position:relative;padding-top:22px;background:#272923;border:1px solid #7774;border-radius:9px 9px 0 0}
.digital-card img{object-fit:cover;object-position:top}.browser-dots{position:absolute;left:10px;top:4px;letter-spacing:3px;font-size:8px;color:#85877e}.archive-card h2{display:flex;justify-content:space-between;gap:12px}.archive-card h2>span{color:var(--accent)}
#digital .page-heading h1{font-size:clamp(52px,7vw,100px);line-height:1}.page-heading em{color:var(--accent-pink);font-weight:400}
.project-tags{list-style:none;padding:0;margin:28px 0;display:flex;gap:7px;flex-wrap:wrap}.project-tags li{font-size:11px;border:1px solid #7775;border-radius:24px;padding:6px 10px}
.digital-gallery{gap:28px}.digital-gallery>.gallery-block{width:100%}.desktop-frame{overflow:hidden;border:1px solid #7775;border-radius:12px 12px 0 0}.frame-bar{display:flex;justify-content:space-between;padding:13px 16px;background:#262822;font-size:10px;letter-spacing:1px;color:#c0c1ba}
.responsive-board{padding:55px 35px;background:#1d2019;display:grid;grid-template-columns:1fr 45%;gap:28px;align-items:center}.responsive-copy h2{font:400 clamp(30px,3.5vw,48px)/1.08 Georgia,serif;letter-spacing:-1.5px;margin:20px 0}.responsive-copy em{color:var(--accent-pink)}.responsive-copy p{font-size:14px;color:#aaa;line-height:1.7;max-width:250px}.responsive-size{display:block;font-size:10px;letter-spacing:1px;margin-top:35px;color:#aaa}.phone-frame{padding:7px;border:1px solid #7776;border-radius:25px;background:#080908;overflow:hidden;max-width:320px;width:100%;justify-self:center}.phone-frame figure{border-radius:19px;overflow:hidden}
html[data-theme=light] .responsive-board{background:#e6e6de}html[data-theme=light] .responsive-copy p,html[data-theme=light] .responsive-size{color:#61665b}html[data-theme=light] .frame-bar{background:#ddded5;color:#43483d}
@media(min-width:701px){.page{padding-top:250px}.project-summary{top:250px}}
@media(max-width:700px){.digital-grid{grid-template-columns:1fr;gap:32px}.category-filters{gap:8px}.category-filters a{padding:10px 13px;font-size:12px;gap:9px}#digital .page-heading h1{font-size:55px;letter-spacing:-3px}.responsive-board{padding:28px 20px;gap:22px;grid-template-columns:1fr}.responsive-copy h2{font-size:38px}.responsive-copy p{max-width:100%}.responsive-size{margin-top:16px}.phone-frame{width:82%;max-width:300px}.digital-gallery{gap:18px}.frame-bar{font-size:9px;padding:10px}.project-tags{margin:20px 0}.digital-project .project-summary{margin-bottom:12px}}

/* Separate graphic and digital collections, with direct website access. */
.work-switch{position:absolute;z-index:8;left:50%;top:110px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;border:1px solid #7775;border-radius:40px;padding:5px;background:#111210d9;backdrop-filter:blur(12px);font-size:11px;white-space:nowrap;letter-spacing:.4px}
.work-switch-current,.work-switch>a{padding:12px 18px;display:flex;align-items:center;gap:13px}.work-switch-current{color:#b8bab3}.work-switch small{font-size:9px;opacity:.6}.work-switch>a{border-radius:30px;background:var(--accent);color:#111210;transition:transform .3s,box-shadow .3s}.work-switch>a:hover{transform:translateY(-2px);box-shadow:0 5px 25px #cedc2a20}.work-switch>a>span{font-size:18px}
.project-actions{display:grid;gap:14px;margin:0 0 30px}.visit-website{display:flex;align-items:center;justify-content:space-between;gap:22px;background:var(--accent);color:#111210!important;padding:16px 19px;border-radius:5px;font-size:13px;letter-spacing:.5px;transition:transform .3s,box-shadow .3s}.visit-website span{font-size:23px;transition:transform .3s}.visit-website:hover{transform:translateY(-3px);box-shadow:0 9px 30px #cedc2a20}.visit-website:hover span{transform:translate(3px,-3px)}.source-link{font-size:11px;text-decoration:underline;text-underline-offset:4px;color:#aeb0a6}
.technology-panel{padding:38px;background:#1c1e19;border:1px solid #7773}.technology-panel h2{font:400 46px/1 Georgia,serif;letter-spacing:-2px;margin:15px 0 28px}.technology-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}.technology-list li{border:1px solid #7775;padding:10px 15px;border-radius:25px;font-size:13px;background:#111210;color:#e7e8df}
.project-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.highlight-item{border-top:1px solid #7775;padding:24px 4px}.highlight-number{font:italic 36px/1 Georgia,serif;color:var(--accent-pink)}.highlight-item h3{font-size:18px;line-height:1.3;font-weight:400;margin:25px 0 14px}.highlight-item p{font-size:14px;line-height:1.7;color:#aeb0a6;margin:0}
.scroll-reveal .technology-list li,.scroll-reveal .highlight-item{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;transition-delay:calc(var(--order)*80ms)}.scroll-reveal.revealed .technology-list li,.scroll-reveal.revealed .highlight-item{opacity:1;transform:none}
html[data-theme=light] .work-switch{background:#f4f3eee8}html[data-theme=light] .work-switch-current{color:#555b4e}html[data-theme=light] .source-link,html[data-theme=light] .highlight-item p{color:#5b6155}html[data-theme=light] .technology-panel{background:#e9eae2}html[data-theme=light] .technology-list li{background:#f4f3ee;color:#30362a}
@media(max-width:1000px){.work-switch{top:205px}.project-highlights{grid-template-columns:1fr}.highlight-item{padding:20px 4px}.highlight-item h3{margin-top:14px}}
@media(max-width:700px){.work-switch{top:91px;width:calc(100% - 40px);justify-content:space-between;font-size:10px;padding:4px}.work-switch-current,.work-switch>a{padding:10px 12px;gap:7px}.counter{top:162px}.technology-panel{padding:25px 20px}.technology-panel h2{font-size:38px}.technology-list{gap:8px}.technology-list li{font-size:12px;padding:9px 12px}.project-highlights{gap:0}.project-actions{margin-bottom:24px}.visit-website{font-size:13px}.source-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal .technology-list li,.scroll-reveal .highlight-item{opacity:1;transform:none}.work-switch>a:hover,.visit-website:hover{transform:none}}

@media(max-width:700px){#archive .page-heading h1{font-size:clamp(42px,15vw,64px)}.archive-card{min-width:0}.archive-card h2{overflow-wrap:anywhere}}

html[data-theme=light] .visit-website,html[data-theme=light] .work-switch>a,html[data-theme=light] .category-filters a[aria-current=page],html[data-theme=light] .category-filters a[aria-current=page]:hover{color:#fff!important}

/* Keep the decorative clock from intercepting collection links. */
.shell .header-time,.shell .header-time *{pointer-events:none}

/* A quiet, interactive layer underneath the paper gallery. */
.brand-mist{position:absolute;inset:18% 0 10%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;isolation:isolate;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mist-row{height:112px;flex-shrink:0;position:relative}
.mist-track{display:flex;width:max-content;animation:brand-drift calc(125s + var(--row)*17s) linear infinite;will-change:transform}
.mist-row:nth-child(even) .mist-track{animation-direction:reverse}
.mist-set{display:flex;gap:44px;padding-right:44px;flex-shrink:0}
.mist-logo{width:158px;height:108px;display:grid;place-items:center;flex:none;border-radius:22px;filter:grayscale(1) blur(5px);opacity:.18;transform:translateZ(0) scale(.92);transition:filter .65s,opacity .65s,transform .65s,background .65s;pointer-events:none}
.mist-logo img{width:90%;height:82%;object-fit:contain}
.mist-logo.is-clear,.mist-logo:focus-visible{filter:none;opacity:1;transform:translateZ(0) scale(1.06);background:#faf9f1;box-shadow:0 0 36px #d2df3b20}
.mist-row.is-held .mist-track,.brand-mist.is-paused .mist-track,.brand-mist.is-inactive .mist-track{animation-play-state:paused}
.mist-controls{position:absolute;z-index:8;right:28px;bottom:70px;display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:1px;color:#9b9d92}
.mist-controls button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff30;border-radius:50%;font-size:12px;color:var(--accent)}
.impact-metrics{margin:80px 0 95px;padding:50px 0;border-block:1px solid #ffffff25}
.impact-heading{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:50px}
.impact-heading h2{font-family:Georgia,serif;font-size:clamp(30px,4vw,58px);font-weight:400;line-height:1.04;margin:0;width:66%}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.metric-card{min-width:0;border-left:1px solid #ffffff25;padding-left:24px}
.metric-number{font-size:clamp(58px,8vw,112px);line-height:1.05;letter-spacing:-.065em;font-weight:500;font-variant-numeric:tabular-nums;color:#d2df3b;white-space:nowrap}
.metric-card:nth-child(2) .metric-number{color:#e53798}
.metric-number sup{font-size:.4em;vertical-align:top;display:inline-block;margin:10px 0 0 6px;letter-spacing:0}
.metric-card p{font-size:13px;color:#a6a89d;margin:18px 0 0}
.metric-card.is-counting .metric-number{background:linear-gradient(100deg,#d2df3b 15%,#e53798 55%,#d2df3b 90%);background-size:220% auto;background-clip:text;-webkit-text-fill-color:transparent;animation:metric-color 1.5s linear infinite}
html[data-theme=light] .mist-logo{opacity:.22}
html[data-theme=light] .mist-logo.is-clear,html[data-theme=light] .mist-logo:focus-visible{opacity:1}
html[data-theme=light] .impact-metrics,html[data-theme=light] .metric-card{border-color:#16181125}
html[data-theme=light] .metric-number{color:#677408}
html[data-theme=light] .metric-card:nth-child(2) .metric-number{color:#ad1265}
html[data-theme=light] .metric-card p,html[data-theme=light] .mist-controls{color:#5f6157}
html[data-theme=light] .mist-controls button{border-color:#16181130}
@keyframes brand-drift{to{transform:translateX(-50%)}}
@keyframes metric-color{to{background-position:220% center}}
@media(max-width:700px){
 .brand-mist{inset:24% 0 15%}.mist-row{height:72px}.mist-logo{width:100px;height:70px;filter:grayscale(1) blur(3px);opacity:.21}.mist-set{gap:22px;padding-right:22px}
 .mist-controls{right:16px;bottom:55px;font-size:7px;letter-spacing:.5px}.mist-controls span{max-width:120px;text-align:right}.mist-controls button{width:28px;height:28px}
 .impact-metrics{margin:45px 0;padding:30px 0}.impact-heading{display:block;margin-bottom:28px}.impact-heading h2{width:auto;margin-top:18px;font-size:38px}
 .metric-grid{gap:12px}.metric-card{padding-left:10px}.metric-number{font-size:clamp(38px,12vw,76px)}.metric-number sup{margin:4px 0 0 2px}.metric-card p{font-size:10px;line-height:1.5;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.mist-track,.metric-card.is-counting .metric-number{animation:none}.mist-logo{transition:none}.mist-controls{display:none}}

.mist-logo[data-tone=dark].is-clear,.mist-logo[data-tone=dark]:focus-visible{background:#242522}
