@font-face{font-family:Manrope;src:url('assets/manrope-light.ttf') format('truetype');font-weight:300;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--paper:#f7f6f2;--ink:#252421;--muted:#8c8a83;--line:#25242126;--pad:clamp(22px,4vw,72px);--header:92px;--header-space:var(--header)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-space)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #7a564f;outline-offset:6px}img{display:block;max-width:100%}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em}::selection{background:#d8c5b8;color:#252421}[hidden]{display:none!important}.mono,.eyebrow{font-family:'Courier New',monospace;font-size:10px;line-height:1.5;letter-spacing:.035em}.muted{color:var(--muted)}.skip-link{position:fixed;z-index:200;top:-100px;background:var(--ink);color:var(--paper);padding:15px}.skip-link:focus{top:10px}.site-header{position:fixed;inset:0 0 auto;height:calc(var(--header) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--pad) 0;display:flex;align-items:center;gap:6vw;z-index:60;background:#f7f6f2ed;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}.wordmark{font-size:23px;letter-spacing:-1.6px;white-space:nowrap;font-weight:600}.wordmark>span{font-size:11px;vertical-align:top;letter-spacing:0;margin-left:3px}.header-role{font-size:10px;line-height:1.65;color:#73716a}.site-header nav{display:flex;gap:34px;margin-left:auto;font-size:11px}.site-header nav a{padding:10px 0}.site-header sup{font-size:7px;color:var(--muted);margin-left:3px}.site-header nav a:hover{color:#8a675b}.menu-toggle,.mobile-nav{display:none}.hero{padding:calc(var(--header-space) + 46px) var(--pad) 0;min-height:100svh;display:flex;flex-direction:column}.hero-kicker{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.04em}.hero h1{font-size:clamp(72px,11.3vw,190px);line-height:.97;letter-spacing:-.085em;margin:58px 0 60px}.hero h1 em{font-size:1.14em;line-height:.83}.hero-bottom{display:grid;grid-template-columns:1fr 1.1fr auto;gap:30px;align-items:end;margin-top:auto;padding:0 0 35px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.8}.hero-signature span{color:var(--muted);font-size:10px}.hero-bottom p{max-width:380px}.round-link{display:flex;align-items:center;gap:30px}.round-link span{border:1px solid var(--line);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:20px;transition:background .2s}.round-link:hover span{background:var(--ink);color:var(--paper)}.section-top{display:flex;justify-content:space-between;align-items:start;gap:25px}.section-top>p{font-size:11px;line-height:1.7}.expertise-section{height:350svh;position:relative}.expertise-sticky{position:sticky;top:var(--header-space);height:calc(100svh - var(--header-space));min-height:610px;padding:32px var(--pad);display:flex;flex-direction:column;justify-content:space-between}.expertise-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start;margin:35px 0 25px}.expertise-intro h2,.about-intro h2{font-size:clamp(46px,5.6vw,90px);line-height:1.05;letter-spacing:-.065em}.skill-counter{display:block;font-size:clamp(110px,13vw,210px);letter-spacing:-.08em;line-height:1;margin-top:40px;color:#d4d0c7}.skill-counter>span{font-size:11px;letter-spacing:0;margin-left:15px;color:#77746d}.scroll-note{font-size:8px;letter-spacing:.05em;margin-top:18px;color:#7a776f}.skill-list{border-top:1px solid var(--line)}.skill{width:100%;display:flex;align-items:center;gap:25px;text-align:left;border-bottom:1px solid var(--line);padding:15px 0;color:#b2afa6;transition:color .3s}.skill-num{font-size:9px;width:18px;color:inherit}.skill>span:nth-child(2){font-size:clamp(26px,3.2vw,49px);letter-spacing:-.06em;line-height:1.1}.skill.active,.skill:hover{color:var(--ink)}.skill-description{padding-top:24px;min-height:144px;max-width:480px}.skill-panel:not([hidden]){animation:description-in .4s both}.skill-panel h3{font-size:16px;letter-spacing:-.03em;margin-bottom:9px}.skill-panel p{font-size:11px;color:#77746d;line-height:1.8;max-width:440px}.skill-panel .mono{display:block;font-size:8px;color:#8e8980;margin-top:14px}.expertise-progress{height:1px;background:var(--line)}.expertise-progress span{display:block;width:20%;height:1px;background:var(--ink);transition:width .2s}@keyframes description-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.about-section{padding:60px var(--pad) 100px;border-top:1px solid var(--line);background:#eeece5}.about-section .section-top>.mono{color:#858178;font-size:8px}.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin:75px 0 80px}.about-copy{max-width:510px}.about-copy .about-lead{font-size:26px;letter-spacing:-.04em;line-height:1.35;margin-bottom:25px}.about-copy>p:not(.about-lead){font-size:12px;line-height:1.9;color:#706c63;margin-bottom:17px}.about-tags,.experience-tags,.skill-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:25px}.about-tags span,.experience-tags span,.skill-tags span{font-size:8px;padding:7px 10px;border:1px solid var(--line);border-radius:30px;color:#777166}.experience-block{display:grid;grid-template-columns:1fr 2.1fr;gap:7vw;padding-top:30px;border-top:1px solid var(--line)}.experience-label p{font-size:12px;line-height:1.6;margin-top:20px}.experience-item{border-bottom:1px solid var(--line)}.experience-row{display:grid;grid-template-columns:1fr 1.3fr auto 15px;gap:20px;align-items:center;list-style:none;padding:22px 0;cursor:pointer}.experience-row::-webkit-details-marker{display:none}.experience-row::marker{content:''}.experience-item:first-child .experience-row{padding-top:0}.exp-company{font-size:19px;letter-spacing:-.045em}.experience-row>span:nth-child(2){font-size:10px;color:#79746b}.experience-row .mono{font-size:8px;white-space:nowrap;color:#938b80}.experience-toggle{font-size:20px;transition:transform .25s}.experience-item[open] .experience-toggle{transform:rotate(45deg)}.experience-description{padding:0 50px 25px 0}.experience-description p{font-size:11px;line-height:1.9;color:#797268}.experience-tags{margin-top:14px}.experience-tags span{font-size:7px;padding:4px 8px}
/* A loose collection of draggable images, with a quiet index alternative. */
.work-section{padding:65px var(--pad) 0;background:var(--paper);scroll-margin-top:0}.work-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:55px}.work-heading h2{font-size:clamp(50px,6.2vw,100px);letter-spacing:-.07em;line-height:1.03;margin-top:30px}.work-heading-note{font-size:12px;line-height:1.8;padding-bottom:8px;max-width:320px}.work-heading-note .mono{display:block;color:#969083;font-size:8px;margin-top:30px}.work-toolbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;gap:25px;align-items:center;font-size:9px}.view-switch{display:flex;gap:22px}.view-switch button{padding:4px 0;color:#a19b91}.view-switch button[aria-pressed=true]{color:var(--ink);border-bottom:1px solid}.view-switch span{font-size:7px;vertical-align:top;margin-left:2px}.board-hint{margin:auto;color:#888176}.board-actions{display:flex;gap:20px}.board-actions button{font-size:8px;padding:5px 0}.project-board{position:relative;height:88svh;min-height:790px;max-height:1100px;isolation:isolate;overflow:hidden;margin:0 calc(-1*var(--pad));touch-action:pan-y}.board-background{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#d8d4ca;font-size:clamp(60px,9vw,155px);letter-spacing:-.075em;line-height:1}.board-background em{font-size:1.15em}.board-coordinate{position:absolute;bottom:28px;left:var(--pad);font-family:'Courier New',monospace;font-size:7px;line-height:1.8;color:#a19a8e;pointer-events:none}.floating-project{position:absolute;left:var(--x);top:var(--y);width:clamp(185px,21vw,320px);padding:0;transform:translate(-50%,-50%) rotate(var(--angle));text-align:left;touch-action:none;cursor:grab;will-change:left,top;user-select:none;-webkit-user-select:none;z-index:2}.floating-image{display:block;animation:float 7s ease-in-out infinite;animation-delay:var(--delay);filter:drop-shadow(0 18px 18px #3a31231f);transition:filter .3s}.floating-image img{width:100%;height:auto;aspect-ratio:1.06;object-fit:cover;pointer-events:none}.floating-label{display:flex;justify-content:space-between;gap:12px;font-size:8px;line-height:1.4;letter-spacing:-.02em;margin-top:8px;opacity:.65;transition:opacity .2s}.floating-project:hover .floating-image{filter:drop-shadow(0 24px 25px #3a312333)}.floating-project:hover .floating-label,.floating-project:focus-visible .floating-label{opacity:1}.floating-project.dragging{cursor:grabbing}.floating-project.dragging .floating-image{animation-play-state:paused;filter:drop-shadow(0 30px 22px #3a312340)}.floating-project.dragging .floating-label{opacity:1}.tile-1{width:clamp(165px,17vw,255px)}.tile-2{width:clamp(170px,18vw,270px)}.tile-4,.tile-5,.tile-6,.tile-7{width:clamp(115px,12vw,185px)}.tile-4 img,.tile-5 img,.tile-7 img{aspect-ratio:.8}.tile-6 img{aspect-ratio:1.3}.tile-6{z-index:1}.floating-paused .floating-image,.board-offscreen .floating-image{animation-play-state:paused}@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}.project-index{padding:35px 0 60px}.index-project{width:100%;display:flex;text-align:left;gap:40px;align-items:center;border-bottom:1px solid var(--line);padding:26px 0}.index-project>.mono{color:#9a9287;font-size:9px}.index-project img{width:110px;height:90px;object-fit:cover;transition:transform .3s}.index-project:hover img{transform:rotate(-5deg)}.index-name{font-size:clamp(26px,4vw,65px);letter-spacing:-.065em}.index-name small{display:block;font-size:10px;letter-spacing:0;color:#90877b;margin-top:8px}.index-arrow{margin-left:auto;font-size:35px}.work-footnote{padding:25px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;font-size:10px}.work-footnote p{color:#8a8276}.contact-section{padding:45px var(--pad) 0;background:#252421;color:var(--paper)}.contact-section .section-top{font-size:8px;color:#bdb7aa}.contact-section .section-top>.mono{font-size:8px}.contact-big{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:90px 0 60px}.contact-big h2{font-size:clamp(45px,7.1vw,120px);letter-spacing:-.07em;line-height:1.1}.contact-big>span{font-size:clamp(50px,7vw,115px);align-self:end}.contact-big em{color:#c4b9a7}.contact-details{display:flex;justify-content:space-between;gap:25px;padding:30px 0 65px;font-size:12px}.contact-details>div{display:flex;gap:30px}.contact-section footer{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #ffffff20;padding:30px 0}.contact-section footer>.mono{font-size:8px;color:#b9b1a3}
/* Opaque, full-viewport project layer: preview first, then the complete overview. */
body.modal-open main,body.modal-open>.site-header,body.modal-open>.mobile-nav{visibility:hidden}.project-dialog{inset:0;width:100%;height:100%;height:100dvh;min-height:100svh;max-width:none;max-height:none;border:0;margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);background:var(--paper);color:var(--ink);overscroll-behavior:contain;isolation:isolate}.project-dialog::backdrop{background:var(--paper)}.project-dialog.is-entering::backdrop{background:transparent}body.dialog-entering main,body.dialog-entering>.site-header{visibility:visible}.page-scrim{position:fixed;inset:0;z-index:9998;background:var(--paper);opacity:0;pointer-events:none}.case-nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:25px var(--pad);height:80px;background:#f7f6f2f5;border-bottom:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.case-nav button{font-size:11px;padding:8px 0}.case-nav>div{display:flex;gap:32px}.case-nav-name{font-size:9px;color:#968b7f}.case-nav #close-project{display:flex;gap:20px;align-items:center}.case-nav #close-project span{font-size:22px}.case-nav #open-overview{border-bottom:1px solid #51473a}.preview-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);min-height:calc(100dvh - 80px);animation:preview-in .45s both}.preview-visual{background:#e8e5dd;display:grid;place-items:center;padding:clamp(40px,6vw,100px);overflow:hidden}.preview-visual img{max-width:100%;max-height:calc(100svh - 190px);object-fit:contain;box-shadow:0 25px 60px #28211b25;transform:rotate(-3deg)}.preview-copy{padding:80px 4vw 45px;display:flex;flex-direction:column;justify-content:center}.preview-copy>.eyebrow{font-size:8px;color:#8c8171}.preview-copy h1{font-size:clamp(50px,5vw,85px);line-height:1.04;letter-spacing:-.07em;margin:25px 0}.preview-tagline{font-family:Georgia,serif;font-size:25px;font-style:italic;line-height:1.3;letter-spacing:-.045em}.preview-description{font-size:12px;color:#898074;line-height:1.9;margin-top:30px;max-width:350px}.preview-meta{display:grid;gap:20px;margin:32px 0;font-size:11px}.preview-meta>div>span{display:block;font-size:8px;color:#a19483;margin-bottom:7px}.overview-button{display:flex;align-items:center;justify-content:space-between;width:100%;border-top:1px solid var(--line);padding:20px 0;font-size:13px}.overview-button>span{font-size:25px}.preview-count{font-size:8px;color:#a19483;margin-top:35px}.case-header{padding:70px var(--pad) 50px}.case-header>.eyebrow{font-size:9px;color:#9b8e7e}.case-header h1{font-size:clamp(70px,12vw,190px);letter-spacing:-.085em;line-height:1.05;margin-top:30px}.case-subtitle{font-family:Georgia,serif;font-style:italic;font-size:clamp(24px,3.4vw,50px);letter-spacing:-.04em;margin-top:25px}.case-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-top:60px;padding-top:25px;border-top:1px solid var(--line)}.case-meta span{display:block;font-size:9px;color:#948572;margin-bottom:10px}.case-meta p{font-size:12px}.case-hero{width:100%;max-height:100svh;object-fit:contain;background:#e9e6df}.case-story{display:grid;grid-template-columns:1fr 1.6fr;gap:10vw;padding:75px var(--pad) 35px}.story-label{font-size:16px;line-height:1.6;max-width:340px}.story-block{margin-bottom:50px}.story-block h2{font-size:32px;line-height:1.2;letter-spacing:-.05em;margin-bottom:20px}.story-block p,.story-block ul{font-size:13px;line-height:1.9;color:#847768;margin-bottom:12px}.story-block ul{padding-left:17px}.case-gallery{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:30px}.case-gallery figure:first-child{grid-column:1/-1}.case-gallery img{width:100%}.case-gallery figcaption{font-size:9px;color:#a1917e;padding:15px 0;line-height:1.6}.case-outro{margin:50px var(--pad) 0;display:flex;justify-content:space-between;align-items:start;gap:60px;border-top:1px solid var(--line);padding:35px 0 70px}.case-outro p{font-family:Georgia,serif;font-style:italic;font-size:28px;letter-spacing:-.04em;max-width:700px}.case-outro a{font-size:11px;white-space:nowrap;padding-top:6px}.next-case{display:block;width:100%;text-align:left;padding:50px var(--pad);background:#eae6dd}.next-case .eyebrow{font-size:9px;color:#9a8a75}.next-case>div{display:flex;justify-content:space-between;gap:30px;font-size:clamp(45px,8vw,115px);letter-spacing:-.075em;margin-top:20px}.noscript-note{padding:30px var(--pad)}@keyframes preview-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(min-width:1800px){.hero h1{margin-top:80px}.hero{padding-top:160px}.expertise-layout{max-width:1600px;width:100%;margin-left:auto;margin-right:auto}}
@media(max-width:1050px){.header-role{display:none}.expertise-layout{gap:5vw}.experience-block{grid-template-columns:1fr 3fr;gap:35px}.experience-row{gap:12px;grid-template-columns:1fr 1.2fr auto 12px}.work-toolbar{gap:15px}.board-hint{font-size:8px}.board-actions{gap:14px}.preview-layout{grid-template-columns:1.1fr 1fr}.preview-copy{padding-top:55px}.preview-visual{padding:35px}}
@media(max-width:760px){:root{--header:72px;--pad:22px}.site-header{gap:20px}.wordmark{font-size:21px}.site-header nav{display:none}.menu-toggle{margin-left:auto;display:flex;flex-direction:column;gap:6px;padding:12px 0}.menu-toggle span{width:27px;height:1px;background:var(--ink);transition:transform .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mobile-nav{position:fixed;inset:var(--header-space) 0 0;background:var(--paper);z-index:55;display:flex;flex-direction:column;gap:25px;padding:50px var(--pad);font-size:40px;letter-spacing:-.06em;visibility:hidden}.mobile-nav.open{visibility:visible}.hero{padding-top:calc(var(--header-space) + 30px);min-height:calc(94svh);min-height:max(650px,94svh)}.hero-kicker{font-size:7px}.hero-kicker>span:nth-of-type(2){display:none}.hero h1{font-size:clamp(52px,12.6vw,95px);margin:70px 0 65px;line-height:1.04}.hero h1 em{font-size:1.14em}.hero-bottom{grid-template-columns:1fr auto;gap:25px 15px;padding-bottom:28px}.hero-signature{font-size:10px}.hero-signature span{font-size:8px}.hero-bottom p{grid-column:1/-1;grid-row:1;font-size:11px;line-height:1.9}.round-link{font-size:9px;gap:12px}.round-link span{width:32px;height:32px;font-size:16px}.section-top .eyebrow{font-size:8px}.section-top>p{font-size:9px}.expertise-section{height:320svh}.expertise-sticky{padding:25px var(--pad) 22px;min-height:600px}.expertise-layout{display:block;margin:22px 0 16px}.expertise-intro{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.expertise-intro h2{font-size:40px}.skill-counter{font-size:68px;margin-top:0;white-space:nowrap}.skill-counter>span{font-size:8px;margin-left:8px}.scroll-note{display:none}.skill{padding:11px 0;gap:17px}.skill>span:nth-child(2){font-size:27px}.skill-num{font-size:8px}.skill-description{padding-top:19px;min-height:131px}.skill-panel h3{font-size:14px;margin-bottom:7px}.skill-panel p{font-size:10px;line-height:1.8}.skill-panel .mono{font-size:6px;margin-top:10px}.about-section{padding-top:35px;padding-bottom:55px}.about-section .section-top>.mono{display:none}.about-intro{display:block;margin:45px 0}.about-intro h2{font-size:47px}.about-copy{margin-top:40px}.about-copy .about-lead{font-size:24px}.about-copy>p:not(.about-lead){font-size:11px}.about-tags{margin-top:20px}.about-tags span{font-size:7px;padding:5px 8px}.experience-block{display:block;padding-top:25px}.experience-label{display:flex;justify-content:space-between;align-items:start;margin-bottom:30px}.experience-label .eyebrow{font-size:8px}.experience-label p{font-size:10px;margin:0}.experience-row{grid-template-columns:1fr auto 14px;gap:7px 15px;padding:20px 0}.exp-company{grid-column:1;grid-row:1;font-size:18px}.experience-row>span:nth-child(2){grid-column:1;grid-row:2;font-size:9px}.experience-row>.mono{grid-column:2;grid-row:1/3;font-size:7px}.experience-toggle{grid-column:3;grid-row:1/3}.experience-description{padding-right:0}.experience-description p{font-size:10px}.work-section{padding-top:40px}.work-heading{display:block;margin-bottom:30px}.work-heading h2{font-size:50px;margin-top:25px}.work-heading-note{margin-top:25px;font-size:10px}.work-heading-note .mono{font-size:7px;margin-top:18px}.work-toolbar{flex-wrap:wrap;gap:17px;padding:14px 0}.view-switch{gap:18px;font-size:9px}.board-actions{margin-left:auto;gap:13px}.board-actions button{font-size:7px}.board-hint{order:3;flex-basis:100%;margin:0;font-size:8px}.project-board{height:1050px;min-height:0;max-height:none}.floating-project{width:43vw;max-width:225px;min-width:0}.tile-1,.tile-2,.tile-3{width:41vw}.tile-4,.tile-5,.tile-6,.tile-7{width:31vw;max-width:160px}.floating-label{font-size:6px;margin-top:6px}.board-background{font-size:16vw;text-align:center;line-height:1.05}.board-coordinate{font-size:6px;bottom:20px}.work-footnote{font-size:8px;gap:22px;line-height:1.7;padding-bottom:30px}.work-footnote p{max-width:155px}.work-footnote a{white-space:nowrap}.project-index{padding:12px 0 35px}.index-project{gap:17px;padding:24px 0}.index-project img{width:65px;height:72px}.index-project>.mono{font-size:7px}.index-name{font-size:25px}.index-name small{font-size:7px;line-height:1.5;letter-spacing:-.02em;max-width:150px}.index-arrow{font-size:22px}.contact-section{padding-top:30px}.contact-section .section-top>.mono{display:none}.contact-big{margin:60px 0 35px;gap:15px}.contact-big h2{font-size:clamp(32px,7.5vw,55px)}.contact-big>span{font-size:33px}.contact-details{display:block;padding:15px 0 45px;font-size:10px}.contact-details>div{margin-top:30px;gap:25px}.contact-section footer{gap:20px;padding:23px 0}.contact-section footer>.mono{font-size:6px}.contact-section .wordmark{font-size:19px}.case-nav{height:70px;padding:16px 22px;gap:15px}.case-nav button{font-size:9px}.case-nav-name{display:none}.case-nav>div{gap:20px}.case-nav #close-project{gap:8px}.case-nav #close-project span{font-size:20px}.preview-layout{display:block;min-height:0}.preview-visual{padding:45px 45px}.preview-visual img{max-height:47svh;max-width:85vw}.preview-copy{padding:35px 25px 45px}.preview-copy h1{font-size:53px;margin:20px 0}.preview-tagline{font-size:24px}.preview-description{font-size:11px;margin-top:22px;max-width:none}.preview-meta{display:grid;grid-template-columns:1fr 1fr;font-size:10px;gap:20px;margin:25px 0}.preview-meta>div>span{font-size:7px}.preview-count{margin-top:20px;font-size:7px}.case-header{padding-top:40px;padding-bottom:35px}.case-header>.eyebrow{font-size:7px}.case-header h1{font-size:clamp(50px,14vw,100px);margin-top:25px}.case-subtitle{font-size:25px;margin-top:18px}.case-meta{grid-template-columns:1fr 1fr;gap:24px;margin-top:35px;padding-top:20px}.case-meta>div:last-child{grid-column:1/-1}.case-meta p{font-size:10px;line-height:1.6}.case-meta span{font-size:7px;margin-bottom:7px}.case-story{display:block;padding-top:35px;padding-bottom:5px}.story-label{font-size:15px;max-width:none;margin-bottom:35px}.story-block{margin-bottom:35px}.story-block h2{font-size:28px;margin-bottom:18px}.story-block p,.story-block ul{font-size:11px;line-height:1.9}.case-gallery{display:block}.case-gallery figure{margin-bottom:16px}.case-gallery figcaption{font-size:7px;padding:10px 0}.case-outro{display:block;margin-top:25px;padding:28px 0 40px}.case-outro p{font-size:23px}.case-outro a{display:inline-block;font-size:9px;margin-top:24px}.next-case{padding-top:30px;padding-bottom:40px}.next-case .eyebrow{font-size:7px}.next-case>div{font-size:43px;margin-top:15px}}
@media(max-height:720px) and (min-width:761px){.hero h1{font-size:10vw;margin:35px 0 45px}.hero{padding-top:125px;min-height:720px}.expertise-sticky{min-height:590px}.expertise-layout{margin:25px 0 20px}.expertise-intro h2{font-size:60px}.skill-counter{font-size:115px;margin-top:35px}.skill{padding:11px 0}.skill>span:nth-child(2){font-size:32px}.preview-copy{padding-top:35px;padding-bottom:35px}.preview-description{margin-top:20px}.preview-meta{margin:25px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.expertise-section{height:auto}.expertise-sticky{position:relative;top:0;height:auto;min-height:0;padding-top:40px;padding-bottom:40px}.expertise-layout{margin-bottom:25px}}
@media(max-height:580px) and (orientation:landscape){.expertise-section{height:auto}.expertise-sticky{position:relative;top:0;height:auto;min-height:0}.hero{min-height:700px}}
/* The intro draws the supplied monogram as two true SVG paths. */
.site-loader{display:none;position:fixed;inset:0;z-index:200;background:var(--paper);color:#151515;outline:none;align-items:center;justify-content:center;transition:opacity .42s ease,visibility .42s;overscroll-behavior:none}
html.is-loading{overflow:hidden}.is-loading .site-loader{display:flex}.site-loader.is-leaving{opacity:0;visibility:hidden}.loader-content{display:flex;align-items:center;flex-direction:column;gap:32px;transform:translateY(-10px)}.loader-logo{display:block;width:clamp(145px,17vw,205px);height:auto;overflow:visible}.loader-logo path{stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0}.loader-percent{display:flex;align-items:baseline;justify-content:center;gap:5px;font-family:Manrope,Arial,sans-serif;font-size:clamp(46px,5.5vw,72px);font-weight:400;line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.loader-percent-sign{font-size:.38em;letter-spacing:-.03em}
/* About deliberately passes in front of the pinned expertise stage. */
.expertise-section{z-index:1;isolation:isolate;background:var(--paper)}.expertise-sticky{background:var(--paper);overflow:hidden;min-height:0}.about-section{position:relative;z-index:2;margin-top:-24px;border-radius:26px 26px 0 0;box-shadow:0 -18px 45px #2524210a;background:#eeece5}.experience-row{touch-action:manipulation}.experience-row:focus-visible{outline:2px solid #7a564f;outline-offset:4px}.experience-row[aria-expanded=true] .experience-toggle{transform:rotate(45deg)}.experience-row[aria-expanded=false] .experience-toggle{transform:none}.experience-description{overflow:hidden}
@media(max-width:760px){.about-section{margin-top:-18px;border-radius:20px 20px 0 0;padding-top:42px}.loader-content{gap:28px}.loader-logo{width:155px}}
@media(max-width:760px) and (max-height:800px){.expertise-sticky{padding-top:20px;padding-bottom:20px}.expertise-layout{margin-top:18px;margin-bottom:14px}.expertise-intro{margin-bottom:16px}.expertise-intro h2{font-size:28px}.skill-counter{font-size:55px}.skill{padding:6px 0}.skill>span:nth-child(2){font-size:24px}.skill-description{padding-top:12px;min-height:100px}.skill-panel h3{font-size:13px;margin-bottom:6px}.skill-panel p{font-size:9px;line-height:1.75}.skill-panel .mono{margin-top:8px}}
@media(max-width:760px) and (max-height:650px){.expertise-section{height:auto}.expertise-sticky{position:relative;top:0;height:auto;overflow:visible}.about-section{margin-top:0}}
@media(prefers-reduced-motion:reduce){.site-loader{transition:none}.about-section{margin-top:0}.expertise-sticky{overflow:visible}.experience-toggle{transition:none}}

@media(min-width:761px) and (max-height:850px){.expertise-layout{margin-top:22px;margin-bottom:18px}.expertise-intro h2{font-size:60px}.skill-counter{font-size:115px;margin-top:28px}.skill{padding:10px 0}.skill>span:nth-child(2){font-size:32px}.skill-description{min-height:132px;padding-top:20px}}

/* Finish the skills first, then let a full-height opaque sheet cover the pinned stage. */
.expertise-section{height:calc(450svh - var(--header-space));--about-cover:0}
.expertise-sticky{transform-origin:50% 30%;transform:translateY(calc(-16px * var(--about-cover))) scale(calc(1 - .035 * var(--about-cover)));opacity:1}
.about-section{margin-top:calc(var(--header-space) - 100svh);background:var(--paper);border-top:0;box-shadow:0 -16px 40px #2524210d}
/* Project imagery spans the viewport, without the inset, rotated thumbnail treatment. */
.preview-layout{display:block;min-height:0}.preview-visual{display:block;width:100%;padding:0;background:var(--paper);overflow:visible}.preview-visual img{display:block;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto;object-fit:initial;box-shadow:none;transform:none}.preview-copy{padding:55px var(--pad) 65px;max-width:none}.preview-description{max-width:680px}.preview-meta{grid-template-columns:1fr 1fr;max-width:900px}.preview-copy h1{font-size:clamp(60px,8vw,120px)}.overview-button{margin-top:15px}.case-hero{width:100%;height:auto;max-height:none;object-fit:initial;background:var(--paper)}.case-gallery{display:block;padding:0}.case-gallery figure{margin:0 0 35px}.case-gallery img{width:100%;height:auto}.case-gallery figcaption{padding:15px var(--pad)}
@media(max-width:760px){.expertise-section{height:calc(420svh - var(--header-space))}.about-section{margin-top:calc(var(--header-space) - 100svh);background:var(--paper)}.preview-copy{padding:35px var(--pad) 45px}.preview-copy h1{font-size:53px}.preview-visual{padding:0}.preview-visual img{max-width:none;max-height:none}.case-gallery figure{margin-bottom:20px}.case-gallery figcaption{padding:12px var(--pad)}}
@media(prefers-reduced-motion:reduce){.expertise-section{height:auto}.expertise-sticky{transform:none;opacity:1}.about-section{margin-top:0;box-shadow:none;border-radius:0}}
@media(max-width:760px) and (max-height:650px){.expertise-section{height:auto}.expertise-sticky{transform:none;opacity:1}.about-section{margin-top:0}}
@media(max-height:580px) and (orientation:landscape){.expertise-section{height:auto}.expertise-sticky{transform:none;opacity:1}.about-section{margin-top:0}}

/* One viewport SVG path moves between these empty, measured composition anchors. */
.living-line{position:fixed;inset:0;display:block;width:100%;height:100%;z-index:8;pointer-events:none;overflow:hidden;opacity:0;color:var(--ink)}.is-loading .living-line,body.modal-open .living-line{visibility:hidden}
.hero{position:relative}.hero-kicker{position:relative}.living-logo-anchor{position:absolute;right:0;top:calc(100% + 32px);width:clamp(145px,16vw,220px);aspect-ratio:1;pointer-events:none}
.living-skill-anchor{width:clamp(190px,22vw,320px);height:clamp(150px,17vw,245px);margin-top:24px;pointer-events:none}.living-about-anchor{width:clamp(180px,21vw,290px);height:210px;margin-top:35px;pointer-events:none}.living-work-anchor{width:180px;height:110px;margin:20px 0 0 auto;pointer-events:none}.contact-big>.living-contact-anchor{display:block;position:relative;flex:0 0 clamp(90px,11vw,150px);width:clamp(90px,11vw,150px);height:clamp(90px,11vw,150px);align-self:center}
@media(min-width:761px) and (max-height:850px){.living-skill-anchor{height:175px;width:235px;margin-top:20px}}
@media(max-width:760px){.living-logo-anchor{width:66px;right:0;top:-10px}.living-skill-anchor{width:105px;height:82px;margin:0;flex:0 0 105px}.expertise-intro{align-items:center}.living-about-anchor{width:155px;height:105px;margin:28px 0 0 auto}.living-work-anchor{width:125px;height:75px;margin-top:14px}.contact-big>.living-contact-anchor{flex-basis:46px;width:46px;height:46px;align-self:center}}
@media(max-width:760px) and (max-height:800px){.living-skill-anchor{width:88px;flex-basis:88px;height:63px}}

/* The case study starts with a concise decision-oriented reading path. */
.case-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:45px;padding-top:24px;border-top:1px solid var(--line)}.case-summary .eyebrow{display:block;color:#948572;font-size:8px;margin-bottom:12px}.case-summary p{font-size:11px;line-height:1.85;color:#6e655a}.case-visual-note{padding:16px var(--pad);font-size:10px;line-height:1.8;color:#897d6d;background:var(--paper);border-bottom:1px solid var(--line)}
@media(max-width:1050px){.case-summary{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:760px){.case-summary{grid-template-columns:1fr;gap:20px;margin-top:30px;padding-top:23px}.case-summary .eyebrow{font-size:7px;margin-bottom:8px}.case-summary p{font-size:11px;line-height:1.8}.case-visual-note{font-size:9px;padding-top:13px;padding-bottom:13px}}
/* Karimi: original screens and photographic presentations. */
.case-karimi .case-hero{display:block;width:100%;height:92svh;min-height:560px;object-fit:contain;background:#edeaf6}.case-karimi .case-story{padding-bottom:35px}.karimi-visual-story{background:#edeaf5;color:#30105d}.karimi-chapter{padding:80px var(--pad) 0;overflow:hidden}.karimi-chapter:nth-child(2){background:#34105d;color:#fff}.karimi-chapter:nth-child(3){background:#f2eeea}.karimi-chapter>header{display:grid;grid-template-columns:1fr 1fr;gap:22px 8vw;margin-bottom:65px}.karimi-chapter .eyebrow{grid-column:1/-1;font-size:9px;letter-spacing:.12em;opacity:.6}.karimi-chapter h2{font-size:clamp(36px,4.6vw,72px);letter-spacing:-.065em;line-height:1.08;max-width:600px}.karimi-chapter header p{font-size:13px;line-height:1.9;max-width:480px;align-self:end;opacity:.75}.karimi-screen-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(25px,4vw,70px);max-width:1440px;margin:0 auto;padding-bottom:75px}.karimi-screen-row figure{flex:1;min-width:0;max-width:340px}.karimi-screen-row[style="--screens:3"] figure{max-width:310px}.karimi-device{display:block;padding:7px;border-radius:43px;background:linear-gradient(115deg,#dedee2,#555259 20%,#17151a 47%,#b7b5bc 80%,#f4f4f6);box-shadow:0 25px 45px #160b3020}.karimi-device img{display:block;width:100%;height:auto;border-radius:36px}.karimi-screen-row figcaption{display:flex;justify-content:space-between;gap:12px;padding:20px 3px 0;font-size:10px;line-height:1.6}.karimi-screen-row figcaption span{font-size:7px;letter-spacing:.1em;opacity:.6;white-space:nowrap}.karimi-photo{margin:0 calc(-1 * var(--pad));background:#edeaf5}.karimi-photo img{width:100%;height:auto;display:block}.karimi-photo figcaption{padding:16px var(--pad) 25px;font-size:9px;line-height:1.7;color:#6e5c80}.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual{background:#edeaf6}.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual>img{height:88svh;min-height:520px;object-fit:contain;background:#edeaf6}
@media(max-width:760px){.case-karimi .case-hero{height:auto;min-height:0;object-fit:contain}.karimi-chapter{padding-top:45px}.karimi-chapter>header{display:block;margin-bottom:35px}.karimi-chapter .eyebrow{display:block;font-size:7px;margin-bottom:17px}.karimi-chapter h2{font-size:39px}.karimi-chapter header p{font-size:11px;margin-top:22px}.karimi-screen-row{flex-wrap:wrap;gap:35px;padding-bottom:45px}.karimi-screen-row figure,.karimi-screen-row[style="--screens:3"] figure{flex:0 0 100%;max-width:340px}.karimi-device{padding:5px;border-radius:38px}.karimi-device img{border-radius:33px}.karimi-screen-row figcaption{font-size:10px;padding-top:14px}.karimi-photo figcaption{font-size:8px}.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual>img{height:auto;min-height:0}.karimi-photo{margin-top:0}}


/* Compact case imagery; screenshots are presentation-only. */
.case-karimi .case-hero{height:72svh;min-height:0;max-height:760px}.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual>img{height:70svh;min-height:0;max-height:740px;object-fit:contain}.karimi-chapter{padding-top:55px}.karimi-chapter>header{margin-bottom:40px}.karimi-screen-row{gap:30px;padding-bottom:45px;max-width:940px}.karimi-screen-row figure,.karimi-screen-row[style="--screens:3"] figure{max-width:250px}.karimi-device{padding:5px;border-radius:32px}.karimi-device img{border-radius:27px}.karimi-photo{max-width:900px;margin:0 auto}.karimi-photo figcaption{padding:13px 0 24px}.karimi-screen-row figcaption{padding-top:12px}
@media(max-width:760px){.case-karimi .case-hero,.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual>img{height:58svh;min-height:0;max-height:540px;object-fit:contain}.karimi-chapter{padding-top:32px}.karimi-chapter>header{margin-bottom:26px}.karimi-chapter h2{font-size:33px}.karimi-chapter header p{margin-top:16px}.karimi-screen-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;max-width:480px;padding-bottom:30px}.karimi-screen-row figure,.karimi-screen-row[style="--screens:3"] figure{width:100%;max-width:210px;justify-self:center}.karimi-screen-row figure:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - 16px)/2)}.karimi-device{padding:3px;border-radius:22px;box-shadow:0 12px 24px #160b301a}.karimi-device img{border-radius:19px}.karimi-screen-row figcaption{font-size:8px;line-height:1.5;padding-top:10px}.karimi-photo{max-width:480px;margin:0 auto}.karimi-photo figcaption{padding:10px 0 20px}}

/* Wide cover uses intrinsic ratio: no letterboxing or cropped content. */
.case-karimi .case-hero,.preview-layout:has(img[src="assets/karimi-cover-wide.webp"]) .preview-visual>img{display:block;width:100%;height:auto;min-height:0;max-height:none;max-width:none;aspect-ratio:auto;object-fit:contain;padding:0}

/* Rounded floating covers; Karimi's text-free mockup retains its full frame. */
.floating-project .floating-image{border-radius:16px;overflow:hidden}.floating-project .floating-image img{display:block;border-radius:inherit}.floating-project[data-project="karimi"] .floating-image img{aspect-ratio:3/2;object-fit:contain}
@media(max-width:760px){.floating-project .floating-image{border-radius:12px}}

/* Insurance app: compact, original screens plus presentation photography. */
.insurance-visual-story{background:#eaf0f4;color:#1d2c37}.insurance-visual-story .karimi-chapter:nth-child(2){background:#101a25;color:#eef6fb}.insurance-visual-story .karimi-photo{background:#eaf0f4}.insurance-visual-story .karimi-photo figcaption{color:#5d6e7c}.case-insurance .case-hero{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.floating-project[data-project="insurance"] .floating-image img{aspect-ratio:3/2;object-fit:contain}

/* Project priority and quiet, text-only card labels. */
.floating-project.tile-0,.floating-project.tile-1{width:clamp(200px,24vw,355px);z-index:3}.floating-project.tile-2,.floating-project.tile-3{width:clamp(165px,18vw,270px)}.floating-project.tile-4{width:clamp(155px,17vw,250px)}.floating-project.tile-4 img{aspect-ratio:1.06}.floating-label{display:block;font-size:9px;letter-spacing:0;opacity:.85}.footer-arrow{display:inline-block;width:17px;height:17px;vertical-align:middle;margin-left:7px;flex:none}.contact-details a,footer>a:last-child{display:inline-flex;align-items:center}
@media(max-width:760px){.floating-project.tile-0,.floating-project.tile-1{width:43vw;max-width:225px}.floating-project.tile-2,.floating-project.tile-3{width:40vw}.floating-project.tile-4{width:37vw;max-width:190px}.floating-label{font-size:8px}.footer-arrow{width:14px;height:14px;margin-left:5px}}
/* Opaque pages move as overlapping cards inside the project dialog. */
#case-content{position:relative;z-index:3;background:var(--paper);min-height:calc(100dvh - 80px);transform-origin:top center}.project-dialog.case-transitioning{overflow:hidden}.case-transitioning #case-content{pointer-events:none;overflow:hidden;box-shadow:0 -20px 70px #25242126;will-change:transform}.case-outgoing{position:fixed;inset:80px 0 0;z-index:2;background:var(--paper);overflow:hidden;pointer-events:none;transform-origin:50% 0}.case-outgoing #case-content,.case-outgoing>div{min-height:100%;background:var(--paper)}.preview-layout{animation:none}.overview-hint{margin:8px 0 16px;font-size:12px;line-height:1.8;color:#746d63}.overview-button{justify-content:center;width:fit-content;min-width:260px;max-width:100%;border:1px solid var(--ink);border-radius:100px;padding:20px 30px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.overview-button:hover{transform:translateY(-3px);background:#46443e;box-shadow:0 9px 24px #2524211a}.overview-button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.floating-project.returning .floating-image{animation-play-state:paused}
@media(max-width:760px){#case-content{min-height:calc(100dvh - 70px)}.overview-hint{font-size:11px;max-width:280px}.overview-button{width:100%;min-width:0;padding:18px 22px;font-size:13px}.case-nav>div{gap:16px}.case-nav button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.overview-button{transition:none}.overview-button:hover{transform:none}}
/* A small downward entrance in the hero; character reveal follows About scroll. */
.hero-title-line,[data-hero-line]{display:block}.scroll-text-word{white-space:nowrap}.text-motion-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;user-select:none}.scroll-text-char{opacity:1}.scroll-text-visual{display:inline}
@media(prefers-reduced-motion:reduce){.scroll-text-char{opacity:1!important;filter:none!important}[data-hero-line]{opacity:1!important;transform:none!important}}
/* The dark reading screen holds while the cream About sheet slides over it. */
:root{--about-heading-size:clamp(46px,5.6vw,90px)}
.statement-section{--context-cover:0;position:relative;z-index:2;isolation:isolate;height:calc(320svh - var(--header-space) - var(--header-space));margin-top:calc(var(--header-space) - 100svh);background:var(--ink);color:#fff;box-shadow:0 -16px 40px #2524210d}
.statement-stage{position:sticky;top:var(--header-space);height:calc(100svh - var(--header-space));display:flex;align-items:center;padding:55px var(--pad);background:var(--ink);transform-origin:50% 45%;transform:translateY(calc(-12px * var(--context-cover))) scale(calc(1 - .025 * var(--context-cover)))}
.statement-text,.about-intro h2{font-size:var(--about-heading-size)}.statement-text{width:100%;max-width:1550px;margin:0 auto;font-family:inherit;font-weight:400;line-height:1.14;letter-spacing:-.065em}
.about-section{position:relative;z-index:3;margin-top:calc(var(--header-space) - 100svh);background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -16px 40px #25242112}
.about-intro{gap:4vw;margin-top:50px}.about-copy>p:first-child{margin-top:0}
.living-about-anchor{position:absolute;right:calc(var(--pad) * .35);top:145px;width:25px;height:min(58svh,520px);margin:0}
[data-hero-line]{backface-visibility:hidden}
@media(max-width:760px){:root{--about-heading-size:clamp(36px,12vw,47px)}.statement-stage{padding:35px var(--pad)}.statement-text{line-height:1.18}.statement-section,.about-section{border-radius:20px 20px 0 0}.about-intro{margin-top:35px}.about-copy{margin-top:24px}.living-about-anchor{right:5px;top:95px;width:16px;height:58svh;margin:0}}
@media(max-width:760px) and (max-height:650px){.statement-section{margin-top:0}}
@media(max-height:580px) and (orientation:landscape){.statement-section{margin-top:0}.statement-stage{padding-top:20px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.statement-section{height:auto;margin-top:0;box-shadow:none}.statement-stage{position:relative;top:0;height:auto;min-height:80svh;transform:none;opacity:1}.about-section{margin-top:0;border-radius:0;box-shadow:none}.statement-text .scroll-text-char{opacity:1!important;filter:none!important}}
/* Type hierarchy (v37). Display headlines keep their fluid clamp() sizes; every other text uses one of these steps on all viewports.
   lead 18 · body 16 · small 14 · caption 12 · micro 10 (superscript counters only). Weights: light 300 · regular 400 · semibold 600. */
:root{--fs-lead:18px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;--fs-micro:10px;--fw-light:300;--fw-regular:400;--fw-semibold:600}
/* Header */
.site-header nav{font-size:var(--fs-small)}.site-header nav a{font-weight:var(--fw-regular)}.site-header sup{font-size:var(--fs-micro);line-height:0}
.site-header .header-role{font-size:var(--fs-caption);line-height:1.5;font-weight:var(--fw-light)}
/* Hero */
.hero .hero-kicker{font-size:var(--fs-caption)}
.hero-bottom .hero-signature,.hero-bottom .hero-signature span,.hero-bottom p,.hero-bottom .round-link{font-size:var(--fs-small)}
.hero-bottom .round-link:hover,.work-footnote a:hover,.contact-details a:hover{color:#8a675b}
/* Section labels: numbered titles and their side notes */
.section-top .eyebrow,.work-heading .eyebrow,.experience-block .experience-label .eyebrow{font-size:var(--fs-caption)}
.section-top>p,.section-top>.mono,.about-section .section-top>.mono,.contact-section .section-top>.mono{font-size:var(--fs-small);font-weight:var(--fw-light)}
/* Expertise */
.skill-list .skill-num{font-size:var(--fs-caption)}
.expertise-intro .scroll-note{font-size:var(--fs-caption)}
.skill-description .skill-panel h3{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.skill-description .skill-panel p{font-size:var(--fs-body);font-weight:var(--fw-light)}
.skill-description .skill-tags{margin-top:16px}.skill-description .skill-tags span{font-size:var(--fs-small);font-weight:var(--fw-light)}
/* About */
.about-section .about-copy>p:not(.about-lead){font-size:var(--fs-body)}
.about-section .about-tags span{font-size:var(--fs-small);font-weight:var(--fw-light)}
.experience-block .experience-label p{font-size:var(--fs-body);font-weight:var(--fw-light)}
.experience-list .exp-company{font-size:var(--fs-lead)}
.experience-list .experience-row>span:nth-child(2){font-size:var(--fs-body);font-weight:var(--fw-regular)}
.experience-list .experience-row>.mono{font-size:var(--fs-small);font-weight:var(--fw-light)}
.experience-list .experience-description p{font-size:var(--fs-body);font-weight:var(--fw-light)}
.experience-list .experience-tags span{font-size:var(--fs-small);font-weight:var(--fw-light)}
/* Selected work */
.work-heading .work-heading-note{max-width:380px}.work-heading .work-heading-note p{font-size:var(--fs-body)}.work-heading .work-heading-note .mono{font-size:var(--fs-caption)}
.work-toolbar .view-switch button,.work-toolbar .board-hint,.work-toolbar .board-actions button{font-size:var(--fs-small);font-weight:var(--fw-light)}.work-toolbar .view-switch span{font-size:var(--fs-micro)}
.project-board .floating-label{font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.project-board .board-coordinate{font-size:var(--fs-caption);font-weight:var(--fw-light)}
.work-footnote p,.work-footnote a{font-size:var(--fs-small);font-weight:var(--fw-light)}
@media(max-width:760px){.work-footnote p{max-width:220px}}
/* Contact and footer */
.contact-section .contact-details{font-size:var(--fs-small)}
.contact-section footer>.mono{font-size:var(--fs-caption)}
/* Work toolbar on narrow phones: one aligned column instead of a right-aligned orphan row. Desktop untouched. */
@media(max-width:520px){.work-toolbar{display:grid;grid-template-columns:1fr;justify-items:start;row-gap:14px;padding:16px 0}.work-toolbar .board-actions{margin-left:0;gap:24px}.work-toolbar .board-actions button{padding:0}.work-toolbar .board-hint{margin:0}}
/* Mobile bottom bar for the creative-space controls. On desktop the stage is layout-neutral and the controls stay in the toolbar. */
.board-stage{display:contents}
@media(max-width:760px){.board-stage{display:block;position:relative}.board-stage>.board-actions{position:sticky;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;margin:0 calc(-1*var(--pad));padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}.board-stage>.board-actions button{padding:4px 0}}
@media(max-width:760px){.board-stage>.board-actions button{font-size:var(--fs-small);font-weight:var(--fw-light)}}
@media(max-width:760px){.board-stage .project-board{height:1110px}}
/* Desktop: landscape covers span the dialog (recap, case hero and the outgoing recap snapshot during the transition). */
@media(min-width:761px){#project-dialog .preview-layout .preview-visual{background:var(--paper);padding:0}#project-dialog .preview-layout .preview-visual>img,#project-dialog .case-hero{--ratio:2.3273;display:block;width:min(100%,calc(78svh * var(--ratio)));max-width:none;height:auto;aspect-ratio:var(--ratio);max-height:none;min-height:0;margin:0 auto;padding:0;object-fit:cover;border-radius:0;box-shadow:none;transform:none;background:transparent}#project-dialog .preview-visual>img[src*="hexabot-0-hd"],#project-dialog .preview-visual>img[src*="oval-0-hd"],#project-dialog .case-hero[src*="hexabot-0-hd"],#project-dialog .case-hero[src*="oval-0-hd"],#project-dialog .preview-visual>img[src*="lifto-preview-wide"],#project-dialog .preview-visual>img[src*="lifto-wide-2"],#project-dialog .case-hero[src*="lifto-wide-2"]{--ratio:2}}
/* Project dialog: same type hierarchy as the homepage (recap, case study and the transition snapshot). */
#project-dialog .eyebrow,#project-dialog .preview-count,#project-dialog .case-nav-name,#project-dialog figcaption{font-size:var(--fs-caption)}
#project-dialog .case-nav button{font-size:var(--fs-small)}
#project-dialog .preview-meta>div>span,#project-dialog .case-meta>div>span{font-size:var(--fs-caption)}
#project-dialog .preview-meta>div>p,#project-dialog .case-meta>div>p{font-size:var(--fs-small)}
#project-dialog .preview-description{font-size:var(--fs-body)}
#project-dialog .overview-hint{font-size:var(--fs-small);font-weight:var(--fw-light)}
#project-dialog .overview-button{font-size:var(--fs-small);font-weight:var(--fw-semibold)}
#project-dialog .case-summary p{font-size:var(--fs-body);font-weight:var(--fw-light)}
#project-dialog .case-story .story-label{font-size:var(--fs-lead)}
#project-dialog .story-block p,#project-dialog .story-block ul{font-size:var(--fs-body);font-weight:var(--fw-light)}
#project-dialog .karimi-chapter header p{font-size:var(--fs-body);font-weight:var(--fw-light)}
#project-dialog .case-outro a{font-size:var(--fs-small);font-weight:var(--fw-light)}#project-dialog .case-outro a:hover{color:#8a675b}
/* Comfortable reading measure on wide screens. */
@media(min-width:761px){#project-dialog .story-block p,#project-dialog .story-block ul{max-width:680px}}
/* Large screens: chapter headers use the story grid, so descriptions sit in the reading column, top-aligned with the title. */
@media(min-width:1051px){#project-dialog .karimi-chapter>header{grid-template-columns:1fr 1.6fr;column-gap:10vw;align-items:start}#project-dialog .karimi-chapter header p{align-self:start;max-width:680px;margin-top:6px}}
/* Desktop gallery rows: small screenshots side by side at one height, capped so they are never upscaled. */
@media(min-width:761px){#project-dialog .case-gallery .gallery-row{display:flex;gap:24px;align-items:flex-start;box-sizing:border-box;width:100%;max-width:calc(var(--row-max) + 2 * var(--pad));margin:0 auto 35px;padding:0 var(--pad)}#project-dialog .gallery-row figure{flex:var(--r) 1 0;min-width:0;margin:0}#project-dialog .gallery-row img{width:100%;height:auto}#project-dialog .gallery-row figcaption{padding-left:0;padding-right:0}}
/* ===== Motion layer (motion.js). Hidden states exist only when JS motion is active and reduced motion is off. ===== */
html.smooth-scroll{scroll-behavior:auto}
.rv-word{display:inline-block;overflow:hidden;padding:.14em .09em .22em;margin:-.14em -.09em -.22em}
.motion-ready .rv-heading .rv-word-in{display:inline-block;transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1);will-change:transform}
.motion-ready .rv-heading.rv-in .rv-word-in,.rv-measure .rv-word-in{transform:none}
.rv-measure .rv-word-in{transition:none!important}
.motion-ready .rv-fade{opacity:0;translate:0 26px;transition:opacity .9s cubic-bezier(.16,1,.3,1),translate 1.1s cubic-bezier(.16,1,.3,1)}
.motion-ready .rv-fade.rv-in{opacity:1;translate:none}
.motion-ready img.rv-media{clip-path:inset(100% 0 0 0);scale:1.1;transition:clip-path 1.3s cubic-bezier(.16,1,.3,1),scale 1.7s cubic-bezier(.16,1,.3,1)}
.motion-ready img.rv-media.rv-in{clip-path:inset(0 0 0 0);scale:1}
.rv-frame{display:block}
.rv-done .rv-word-in,.rv-done.rv-fade{will-change:auto}
/* Curtain between page and project sheet */
.page-curtain{position:fixed;inset:0;z-index:9998;background:var(--ink);transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
.page-curtain::after{content:'will.mecheri';color:var(--paper);font-size:23px;letter-spacing:-1.6px;font-weight:600;opacity:.9}
/* Custom cursor: one blended layer that inverts whatever is beneath it */
.cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483646;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-visible{opacity:1}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transition:opacity .2s}
.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid #fff;display:grid;place-items:center;transition:width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),margin .5s cubic-bezier(.16,1,.3,1),background-color .3s}
.cursor-label{font-size:12px;font-weight:600;letter-spacing:.02em;color:#000;opacity:0;transition:opacity .25s}
.cursor.is-link .cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:#fff}
.cursor.is-label .cursor-ring{width:86px;height:86px;margin:-43px 0 0 -43px;background:#fff}
.cursor.is-label .cursor-label{opacity:1}
.cursor.is-link .cursor-dot,.cursor.is-label .cursor-dot{opacity:0}
.cursor.is-down .cursor-ring{width:28px;height:28px;margin:-14px 0 0 -14px}
@media(hover:none),(pointer:coarse){.cursor{display:none}}
/* Mobile menu links arrive one by one */
.motion-ready .mobile-nav a{opacity:0;translate:0 28px;transition:opacity .6s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1)}
.motion-ready .mobile-nav.open a{opacity:1;translate:none}
.motion-ready .mobile-nav.open a:nth-child(2){transition-delay:.06s}.motion-ready .mobile-nav.open a:nth-child(3){transition-delay:.12s}.motion-ready .mobile-nav.open a:nth-child(4){transition-delay:.18s}
/* The case title receives focus programmatically for screen readers; it is not a control, so no ring. */
#case-title:focus{outline:none}
.motion-ready .rv-fade.rv-soft{translate:none}
/* Hero brush strokes: sit behind the copy, in the empty areas measured by motion.js. */
.hero-strokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hero-strokes path{stroke:#e6ddd0;stroke-linecap:round;stroke-linejoin:round;stroke-width:0}
.hero>*:not(.hero-strokes){position:relative;z-index:1}
/* Ribbon band between hero and expertise */
.ribbon-band{position:relative;height:clamp(150px,22vw,330px);overflow:hidden;margin:clamp(10px,2vw,30px) 0 0}
.ribbon-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ribbon-bg{stroke:var(--ink)}
.ribbon-text{fill:var(--paper);font-family:Manrope,Arial,sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* The custom cursor replaces the system pointer on mouse devices. */
@media(hover:hover) and (pointer:fine){html.has-cursor,html.has-cursor *{cursor:none!important}}

/* Lifto: screens arrive with their own device frame, on a dark stage with the lime accent. */
.lifto-visual-story{background:#0c0c0d;color:#f2f2ee}.lifto-visual-story .karimi-chapter header .eyebrow{color:#aaff00}.lifto-visual-story .karimi-device{padding:0;border-radius:0;background:none;box-shadow:none}.lifto-visual-story .karimi-device img{border-radius:0;filter:drop-shadow(0 24px 40px #00000080)}.lifto-visual-story .karimi-screen-row figcaption{color:#a9a9a2}
.lifto-visual-story .karimi-chapter:nth-child(2),.lifto-visual-story .karimi-chapter:nth-child(3){background:#151516;color:#f2f2ee}

/* Dragged covers follow the pointer with easing and lean slightly into the movement (--tilt from project-space.js). */
.floating-project{transform:translate(-50%,-50%) rotate(calc(var(--angle) + var(--tilt,0deg)))}.floating-project .floating-image{transition:filter .3s,scale .35s cubic-bezier(.22,1,.36,1)}.floating-project.dragging .floating-image{scale:1.035}
.lifto-visual-story .karimi-chapter:nth-child(3){background:#0c0c0d}

/* Next project name: words stay together with normal spacing (the heading is split into words for its reveal) and scale down on narrow phones instead of overflowing. */
.next-case>div{display:block}
@media(max-width:760px){.next-case>div{font-size:clamp(30px,11vw,43px);overflow-wrap:break-word}}

/* Desktop hero: the whole hero, down to its divider, fits the viewport height. The title keeps its width-based clamp but never
   grows past what the height allows (each px of title adds ~4.42px to the hero; ~400px is header, spacing and the bottom row),
   and leaves room under it, proportional to its size, for the left brush stroke (motion.js fine-tunes any remaining overflow). */
@media(min-width:761px){.hero h1{font-size:min(clamp(72px,11.3vw,190px),max(44px,calc((100svh - 400px) / 4.42)));margin-bottom:calc(1.5em + 50px)}}
@media(min-width:761px) and (min-height:581px){.hero{min-height:100svh}}