/* 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}}