/* Figma foundations: Space Grotesk / DM Sans, lime #b8f762, 1440px desktop / 390px mobile. */
:root{color-scheme:dark;--surface:#0f120f;--text:#f4f7ef;--muted:#b2bcae;--raised:#21271f;--card:#232a21;--line:#3b4536;--accent:#b8f762;--accent-text:#b8f762;--on-accent:#141a10;--blue:#1e2938;--green:#203022;--intro-bg:#0f120f;--intro-text:#f4f7ef;--intro-muted:#b2bcae;--intro-accent:#b8f762;--gutter:80px;--section-space:72px;--heading:64px}
:root[data-theme=light]{color-scheme:light;--surface:#fafbf7;--text:#161a15;--muted:#5e655b;--raised:#edf1e6;--card:#fff;--line:#d8ded2;--accent-text:#26371c;--blue:#e4ebf6;--green:#dfe8d5;--intro-bg:#fafbf7;--intro-text:#161a15;--intro-muted:#5e655b;--intro-accent:#26371c}
/* The initial desktop composition retains the approved white hero and charcoal body.
   Explicitly choosing a theme gives a consistent light or dark page at every size. */
@media(min-width:901px){:root:not([data-theme-chosen]){--intro-bg:#fafbf7;--intro-text:#161a15;--intro-muted:#5e655b;--intro-accent:#26371c}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--surface);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:18px;line-height:1.4;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default}
p,h1,h2,h3,figure,dl,dd{margin:0}
h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.1}
h1,h2{font-size:var(--heading)}
h3{font-size:38px}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:6px;border-radius:4px}
.nav-pill :focus-visible,.site-footer :focus-visible{outline-color:currentColor}
.container{width:calc(100% - var(--gutter)*2);max-width:1280px;margin-inline:auto;min-width:0}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.stack>*{max-width:100%}
.section{padding-block:var(--section-space)}
.raised{background:var(--raised)}
.muted{color:var(--muted)}
.accent-text,.eyebrow,.text-link{color:var(--accent-text)}
.eyebrow{font-size:14px;font-weight:700;line-height:1.3}
.readable{max-width:950px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:16px 24px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;line-height:1.25;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0002}
.button:active{transform:translateY(0)}
.button-secondary{background:var(--text);color:var(--surface)}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:700;background:none;border:0;padding:0;text-align:left}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.skip-link{position:fixed;z-index:100;top:10px;left:20px;background:var(--accent);color:var(--on-accent);padding:12px 18px;transform:translateY(-200%);border-radius:30px;font-size:16px}
.skip-link:focus{transform:translateY(0)}
/* Shared navigation. All interactive controls keep a 44px minimum hit height. */
.site-header{padding-block:20px;background:var(--intro-bg);color:var(--intro-text)}
.nav-pill{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 28px;border-radius:999px;background:#161a15;color:#fafbf7;min-height:72px}
.wordmark{font-family:'Space Grotesk',Arial,sans-serif;font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.25;flex-shrink:0}
.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.desktop-nav a{font-size:16px;min-height:44px;display:flex;align-items:center}
.desktop-nav a:hover,.desktop-nav [aria-current=page]{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.mobile-project-link{display:none}
.theme-toggle{width:56px;height:44px;border:0;padding:0;background:none;display:grid;place-items:center;flex-shrink:0}
.theme-track{position:relative;display:block;width:56px;height:30px;border:1px solid #d8ded2;border-radius:99px;background:#161a15}
.theme-thumb{position:absolute;left:2px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--accent);transform:translateX(26px);transition:transform .3s cubic-bezier(0,0,.58,1)}
:root[data-theme=light] .theme-thumb{transform:translateX(0)}
.sun-icon,.moon-icon{position:absolute;top:6px;width:16px;height:16px;font-size:20px;line-height:16px;display:grid;place-items:center;transition:color .3s ease;color:#fafbf7}
.sun-icon{left:6px}.moon-icon{right:6px;color:#141a10}
:root[data-theme=light] .sun-icon{color:#141a10}:root[data-theme=light] .moon-icon{color:#fafbf7}
.theme-track svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round}
.menu-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:0;background:none}
.menu-toggle span{display:block;width:20px;height:2px;border-radius:1px;background:currentColor}
.mobile-menu{position:fixed;inset:0;margin:0;max-height:100dvh;max-width:none;height:100dvh;width:100%;border:0;padding:28px max(24px,env(safe-area-inset-right)) 32px;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain}
.mobile-menu::backdrop{background:#0008}
.mobile-menu[open]{animation:menu-entrance .2s ease-out both;display:flex;flex-direction:column}
.menu-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}
.menu-heading h2{font-size:28px}.menu-close{height:44px;width:44px;border:1px solid var(--line);border-radius:50%;background:none;font-size:32px;line-height:1}
.mobile-menu nav{display:flex;flex-direction:column;gap:8px}
.mobile-menu nav a{font-family:'Space Grotesk',Arial,sans-serif;font-size:36px;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.mobile-menu nav a::after{content:'↗';font-size:28px}.mobile-menu nav a[aria-current]{color:var(--accent-text)}
.mobile-menu>p{font-size:16px;margin-top:auto;padding-top:48px}.mobile-menu>p span{color:var(--muted);font-size:14px}
@keyframes menu-entrance{from{opacity:0}to{opacity:1}}
/* Intro and portrait composition from the approved frames. */
.home-hero,.page-intro{background:var(--intro-bg);color:var(--intro-text);border-radius:0 0 72px 72px}
.home-hero .muted,.page-intro .intro-copy{color:var(--intro-muted)}
.home-hero .text-link{color:var(--intro-text)}
.page-intro .eyebrow,.page-intro .accent-text,.page-intro .text-link,.page-intro .project-counts{color:var(--intro-accent)}
.home-hero{padding:60px 0 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,400fr) minmax(0,430fr) minmax(0,330fr);gap:60px;align-items:center}
.hero-copy h1{font-size:clamp(30px,3.34vw,48px);line-height:1.03;letter-spacing:-.035em}
.hero-kicker{font-size:14px;color:var(--intro-muted)}
.hero-copy .button{min-width:220px}
.hero-portrait{padding:16px 16px 20px;background:var(--card);border-radius:28px;min-width:0}
.hero-portrait img{width:100%;height:440px;object-fit:cover;object-position:center 38%;border-radius:20px}
.hero-portrait figcaption{margin-top:20px;font-size:12px;line-height:1.18;color:var(--muted);text-align:center}
.hero-role{gap:26px}.hero-role h2{font-size:36px;line-height:1.18;letter-spacing:-.035em}
.hero-role .text-link{font-family:'Space Grotesk',Arial,sans-serif;font-size:14px}
.page-intro{padding-block:72px}.intro-copy{font-size:22px;line-height:1.25;max-width:850px}
.project-counts{font-size:14px;font-weight:700;line-height:1.5}
/* Project cards remain two columns even on phones. */
.project-stats{padding-top:56px;padding-bottom:16px}
.project-stats dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 32px;background:var(--raised);border-radius:24px}
.project-stats dl>div{display:flex;flex-direction:column-reverse;gap:8px}
.project-stats dd{font-family:'Space Grotesk',Arial,sans-serif;font-size:48px;font-weight:700;line-height:1.18;color:var(--accent-text)}
.project-stats dt{font-size:16px;color:var(--muted)}
.work-section{gap:36px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;width:100%}
.project-card{display:flex;flex-direction:column;gap:18px;min-width:0;align-self:start}
.project-cover{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:330px;padding:32px;border-radius:24px;color:#161a15;transition:transform .25s ease,box-shadow .25s ease;min-width:0}
.project-cover.blue{background:#e4ebf6}.project-cover.sand{background:#edf1e6}.project-cover.green{background:#dfe8d5}
.project-cover h3{font-size:60px;line-height:1.08;letter-spacing:-.035em;overflow-wrap:normal}
.cover-category,.cover-link{font-size:14px;line-height:1.25;font-weight:700;color:#26371c}
.project-card:hover .project-cover{transform:translateY(-4px);box-shadow:0 8px 24px #0002}
.project-card:focus-visible .project-cover{outline:3px solid var(--accent-text);outline-offset:5px}
.project-caption{display:flex;flex-direction:column;gap:10px;min-width:0}.project-caption>span{font-size:18px}.project-caption p{font-size:14px;font-weight:700;color:var(--muted);line-height:1.35}
/* About, education and contact. */
.about-grid{display:grid;grid-template-columns:minmax(0,440fr) minmax(0,768fr);gap:72px;align-items:start}
.about-portrait{background:var(--card);border-radius:32px;overflow:hidden;padding:16px}
.about-portrait img{width:100%;height:454px;object-fit:cover;object-position:50% 35%;border-radius:22px}
.about-portrait figcaption{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:22px 8px 12px}
.about-story h2{font-size:46px}.about-story p{line-height:1.4}
.skills{gap:28px}.skills h3{font-size:32px;line-height:1.25}.skills>div{display:flex;flex-direction:column;gap:20px}
.education-cards{display:flex;flex-direction:column;gap:40px}.education-card{padding:32px;background:var(--card);gap:18px}.education-card h2{font-size:42px}
.contact-content{gap:28px}.email-display{font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(24px,3.48vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.email-display:hover{text-decoration:underline;text-underline-offset:8px}.contact-note{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:58px;line-height:1.1;letter-spacing:-.035em}
/* Case studies. */
.role-section.blue{background:var(--blue)}.role-section.green{background:var(--green)}.role-section.sand{background:var(--raised)}
.role-section .stack{gap:18px}.role-section h2{font-size:40px}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project-gallery figure{min-width:0}.project-gallery img{width:100%;aspect-ratio:2/1;object-fit:contain;border-radius:24px}
figcaption{font-size:14px;color:var(--muted);line-height:1.4;margin-top:16px}
.design-preview{width:100%}.design-preview>a{display:block;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card)}
.browser-chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 24px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.browser-chrome>span:first-child{font-size:9px;letter-spacing:3px}.design-window{aspect-ratio:16/10;overflow:hidden;background:var(--raised)}.design-window img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
.case-detail{padding-top:24px}.case-detail .stack{gap:30px}.feature-list>div{display:flex;flex-direction:column;gap:18px}
.site-footer{padding:48px 0 40px;background:var(--accent);color:var(--on-accent)}.site-footer .stack{gap:28px}.site-footer .eyebrow{color:inherit}.site-footer h2{font-size:60px}.site-footer .button{background:#161a15;color:#fafbf7}.footer-email{font-size:18px;overflow-wrap:anywhere}.footer-email:hover{text-decoration:underline}.copyright{font-size:14px;font-weight:700}
.toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;z-index:120;background:var(--text);color:var(--surface);box-shadow:0 8px 30px #0003;font-size:14px;text-align:center}
/* Figma motion values, consolidated by animation. Entrance runs once for reading comfort. */
@keyframes name-entrance{0%{animation-timing-function:ease-out;opacity:0}30%,100%{opacity:1}}
.name-entrance{animation:name-entrance 2s linear both}
@keyframes card-entrance{0%{animation-timing-function:ease-out;opacity:0;translate:0 10px}22.5%,100%{opacity:1;translate:0 0}}
.motion-ready .project-card{opacity:0}.motion-ready .project-card.is-visible{animation:card-entrance 2s linear both;animation-delay:var(--card-delay,0s)}
.card-2{--card-delay:.1s}.card-3{--card-delay:.2s}
.theme-changing,.theme-changing .site-header,.theme-changing .home-hero,.theme-changing .page-intro,.theme-changing .raised,.theme-changing .role-section,.theme-changing .education-card,.theme-changing .hero-portrait,.theme-changing .about-portrait,.theme-changing .project-stats dl{transition:background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out}
@media(max-width:1200px){:root{--gutter:48px}.hero-grid{gap:30px}.hero-role h2{font-size:30px}.hero-portrait img{height:400px}.desktop-nav{gap:22px}.about-grid{gap:48px}.project-cover h3{font-size:48px}}
@media(max-width:900px){:root{--gutter:32px;--section-space:56px;--heading:52px}.nav-pill{gap:16px;padding:8px 10px 8px 18px;min-height:60px}.wordmark{font-size:26px}.desktop-nav{display:none}.mobile-project-link{display:flex;align-items:center;min-height:44px;font-size:16px}.menu-toggle{display:flex}.hero-grid{grid-template-columns:1fr 1fr;gap:32px}.hero-copy h1{font-size:clamp(32px,4.4vw,42px)}.hero-role{grid-column:1/-1}.hero-portrait img{height:360px}.hero-role h2{font-size:32px}.home-hero,.page-intro{border-radius:0 0 48px 48px}.about-grid{grid-template-columns:1fr 1.35fr;gap:32px}.about-story h2{font-size:36px}.about-portrait img{height:400px}.project-cover{height:260px;padding:24px}.project-cover h3{font-size:40px}.contact-note{font-size:44px}.site-footer h2{font-size:48px}.education-card h2{font-size:36px}}
@media(max-width:600px){:root{--gutter:24px;--section-space:42px;--heading:38px}.site-header{padding:20px 0}.nav-pill{gap:8px}.home-hero{padding:32px 0 44px}.hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:32px}.hero-copy h1{font-size:36px;line-height:1.03}.hero-kicker{font-size:12px}.hero-role h2{font-size:28px}.hero-copy .button{min-width:220px}.hero-portrait img{height:350px}.home-hero,.page-intro{border-radius:0 0 36px 36px}.page-intro{padding:42px 0}.page-intro .eyebrow{font-size:11px}.page-intro h1{font-size:38px;line-height:1.25}.page-intro h1 .accent-text{font-size:42px;line-height:1.1}.intro-copy{font-size:18px;line-height:1.4}.project-counts{font-size:11px}.project-stats{padding-top:32px;padding-bottom:0}.project-stats dl{grid-template-columns:1fr;padding:28px 32px;gap:24px}.project-stats dd{font-size:40px}.work-section{gap:28px}.section h2>.accent-text{font-size:42px}.project-grid{gap:28px 12px}.project-card{gap:12px}.project-cover{height:180px;padding:16px 14px;border-radius:18px}.project-cover h3{font-size:24px;line-height:1.08}.cover-category,.cover-link{font-size:11px;line-height:1.3}.project-caption{gap:6px}.project-caption>span{font-size:16px}.project-caption p{font-size:12px;line-height:1.35}.about-grid{display:flex;flex-direction:column;gap:32px}.about-portrait{width:100%}.about-portrait img{height:380px}.about-story h2{font-size:32px}.skills h3{font-size:28px}.skills>div{gap:16px}.education-cards{gap:40px}.education-card h2{font-size:28px;line-height:1.25}.education-card .eyebrow{font-size:11px}.education-card{padding:32px}.contact-note{font-size:34px;line-height:1.25}.email-display{font-size:24px}.actions{gap:16px}.role-section h2{font-size:30px}.project-gallery{grid-template-columns:1fr;gap:28px}.feature-list h3{font-size:28px}.design-preview>a{border-radius:18px}.browser-chrome{padding:12px;font-size:10px}.case-detail{padding-top:0}.site-footer h2{font-size:38px}.footer-email{font-size:18px}}
@media(max-width:359px){:root{--gutter:16px}.nav-pill{padding-left:16px}.wordmark{font-size:24px}.mobile-project-link{font-size:14px}.nav-actions{gap:4px}.hero-copy h1{font-size:31px}.project-cover{padding:14px 10px}.project-cover h3{font-size:21px}.cover-category,.cover-link{font-size:10px}.education-card{padding:24px}.page-intro h1{font-size:34px}.page-intro h1 .accent-text{font-size:36px}.section h2>.accent-text{font-size:36px}.email-display{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .project-card{opacity:1;translate:none}.name-entrance{opacity:1}.button:hover,.project-card:hover .project-cover{transform:none}}
@media print{.site-header,.site-footer,.mobile-menu,.copy-email,.toast{display:none!important}body{background:#fff;color:#111}*{animation:none!important;box-shadow:none!important}.project-card{opacity:1!important}.section{padding-block:24px}.page-intro{padding-block:24px}.container{width:100%}.muted,.accent-text,.eyebrow{color:#333}.education-card{break-inside:avoid}.hero-portrait img{height:300px}}
/* Original Figma vector assets, kept at their exported 16×16 geometry. */
.sun-icon img,.moon-icon img{position:absolute;inset:0;width:16px;height:16px}
.icon-light{opacity:0}.icon-dark{opacity:1}
:root[data-theme=light] .icon-light{opacity:1}:root[data-theme=light] .icon-dark{opacity:0}
@media(min-width:901px){:root:not([data-theme-chosen]) .hero-portrait{background:#fff}:root:not([data-theme-chosen]) .hero-portrait figcaption{color:#5e655b}}
/* Project galleries and visual case studies. */
.project-back{font-size:14px;color:var(--intro-muted);min-height:32px;display:inline-flex;align-items:center}
.project-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.project-meta span{font-size:12px;border:1px solid var(--line);padding:9px 14px;border-radius:30px;color:var(--intro-text)}
.project-jump{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 8px 26px #00000008}
.project-jump .container{display:flex;gap:32px;overflow:auto;scrollbar-width:none}
.project-jump a{white-space:nowrap;padding:20px 0;font-size:14px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.project-jump a:hover,.project-jump a.is-current{color:var(--accent-text);border-color:var(--accent-text)}
#overview,#screens,#case-study{scroll-margin-top:72px}
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:52px}
.brief-grid article{display:flex;flex-direction:column;gap:20px}
.brief-grid h2{font-size:34px;max-width:400px}.brief-grid p{max-width:520px}
.project-banner{border-radius:28px;overflow:hidden;background:var(--raised)}
.project-banner img{width:100%;max-height:780px;object-fit:cover;object-position:center}
.section-heading{width:100%;display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:22px}
.section-heading h2{margin-top:14px}.section-heading>p{max-width:300px;font-size:16px}
.screen-grid{display:grid;gap:32px 24px;width:100%}
.mobile-screens{grid-template-columns:repeat(4,minmax(0,1fr))}
.desktop-screens{grid-template-columns:repeat(2,minmax(0,1fr))}
.screen-card{min-width:0}.screen-open{position:relative;display:block;background:var(--card);border:1px solid var(--line);padding:10px;border-radius:22px;transition:transform .3s ease,box-shadow .3s ease}
.screen-viewport{aspect-ratio:390/780;overflow:hidden;border-radius:14px;background:#f1f4f1}
.screen-viewport img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .55s ease}
.screen-zoom{position:absolute;right:20px;bottom:20px;background:#161a15;color:#b8f762;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:0 4px 16px #0003}
.screen-card figcaption{margin-top:14px;font-size:14px;font-weight:500;color:var(--text)}
.desktop-screens .screen-viewport{aspect-ratio:16/10}
.desktop-screens .screen-open{border-radius:18px;padding:8px}.desktop-screens .screen-viewport{border-radius:12px}
@media(hover:hover){.screen-open:hover{transform:translateY(-5px);box-shadow:0 16px 35px #0002}.screen-open:hover img{transform:scale(1.025)}}
.desktop-preview{width:100%;margin-top:32px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.desktop-preview summary{cursor:pointer;padding:24px;font-size:16px;font-weight:700;list-style:none;display:flex;justify-content:space-between}.desktop-preview summary::-webkit-details-marker{display:none}
.desktop-image{display:block;max-height:650px;overflow:hidden}.desktop-image img{width:100%;height:auto}
.case-container{margin-top:36px;max-width:1440px}.case-artwork{border-radius:24px;overflow:hidden;line-height:0;background:var(--raised)}
.case-artwork figure,.case-artwork img{margin:0;width:100%;height:auto}.case-artwork a{display:block;cursor:zoom-in}
.image-viewer{position:fixed;inset:0;width:min(1500px,96vw);height:94dvh;max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);overflow:hidden;box-shadow:0 30px 120px #0008}
.image-viewer::backdrop{background:#090d09d9;backdrop-filter:blur(8px)}
.image-viewer[open]{display:flex;flex-direction:column;animation:viewer-in .22s ease-out}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.viewer-bar h2{font-family:'DM Sans',sans-serif;font-size:16px;letter-spacing:0;line-height:1.4}
.viewer-controls{display:flex;gap:8px;flex-shrink:0}.viewer-controls button{height:44px;width:44px;border-radius:50%;border:1px solid var(--line);background:var(--raised);font-size:24px}
.viewer-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:24px;min-height:0;display:block;text-align:center}
.viewer-image{width:auto;max-width:100%;height:auto;margin:0 auto;background:white}
.viewer-hint{font-size:12px;color:var(--muted);text-align:center;padding:12px;border-top:1px solid var(--line)}
body.viewer-open{overflow:hidden}.back-top{position:fixed;right:24px;bottom:24px;background:var(--text);color:var(--surface);height:44px;width:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:1px solid var(--line);z-index:15;box-shadow:0 5px 22px #0002;opacity:0;visibility:hidden;transition:opacity .2s}
.back-top.shown{opacity:1;visibility:visible}
.project-cover{position:relative;overflow:hidden;isolation:isolate;background:#17271f!important;color:white}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .6s ease,opacity .5s ease;opacity:.75}
.project-cover::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08140d66,transparent 25%,#08140d55 45%,#08140de8)}
.project-cover h3{margin-top:auto;margin-bottom:20px;font-size:48px;text-shadow:0 3px 20px #0005}.cover-category,.cover-link{color:#fff}.project-card:hover .card-art{transform:scale(1.04)}
.gallery-note{font-size:14px;color:var(--muted);max-width:760px}
.gallery-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.gallery-filter button{border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--text);padding:12px 18px;font-size:14px}.gallery-filter button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@keyframes viewer-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes soft-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.motion-enhanced .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.motion-enhanced .reveal.is-visible{opacity:1;transform:none}
.hero-portrait{animation:soft-rise .8s .1s both}.hero-role{animation:soft-rise .8s .2s both}
@media(max-width:1000px){.mobile-screens{grid-template-columns:repeat(3,minmax(0,1fr))}.brief-grid{gap:36px}.project-cover h3{font-size:38px}}
@media(max-width:600px){.mobile-screens{grid-template-columns:repeat(2,minmax(0,1fr))}.desktop-screens{grid-template-columns:1fr}.screen-grid{gap:24px 14px}.screen-open{padding:6px;border-radius:17px}.screen-viewport{border-radius:12px}.screen-zoom{width:30px;height:30px;right:12px;bottom:12px}.screen-card figcaption{font-size:12px}.brief-grid{grid-template-columns:1fr;gap:32px;margin-bottom:32px}.brief-grid h2{font-size:28px}.section-heading{align-items:start;flex-direction:column;gap:18px}.section-heading h2{font-size:34px}.section-heading h2>.accent-text{font-size:36px}.project-jump .container{gap:24px}.project-jump a{font-size:12px;padding:17px 0}.project-meta span{font-size:11px;padding:8px 11px}.project-banner{border-radius:20px}.case-container{width:100%}.case-artwork{border-radius:0}.viewer-body{padding:12px}.viewer-bar{padding:12px;gap:8px}.viewer-bar h2{font-size:13px}.viewer-controls{gap:4px}.viewer-controls button{height:40px;width:40px}.viewer-hint{font-size:10px}.image-viewer{width:98vw;height:96dvh;border-radius:14px}.back-top{right:16px;bottom:16px}.project-cover h3{font-size:24px;margin-bottom:14px}.project-cover{height:210px}.project-banner img{max-height:none}.desktop-preview summary{padding:20px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.motion-enhanced .reveal{opacity:1;transform:none}.hero-portrait,.hero-role{animation:none}.screen-open:hover,.project-card:hover .card-art,.screen-open:hover img{transform:none}}
.social-links{display:flex;gap:12px;flex-wrap:wrap}.social-links a{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:12px 18px;border:1px solid currentColor;border-radius:999px;font-size:14px;font-weight:600;transition:transform .2s,background .2s}.social-links a:hover{transform:translateY(-3px);background:#ffffff18}.social-symbol{font-size:19px;font-weight:700;line-height:1;width:25px;text-align:center}.site-footer .social-links{margin-block:8px}

/* Preserve the full admin interface in each gallery preview. */
.admin-gallery .screen-viewport{aspect-ratio:1.91;background:#091520}
.admin-gallery .screen-viewport img{object-fit:contain}

.project-cover.sapphire{background:linear-gradient(135deg,#133550,#071b31);color:#f6faff}
.project-cover.sapphire::after{display:none}
.project-cover.sapphire h3,.project-cover.sapphire .cover-category,.project-cover.sapphire .cover-link{color:#f6faff}