*,*::before,*::after{box-sizing:border-box}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}h1,h2,h3,p,figure{margin:0}svg{display:block;vertical-align:middle;flex-shrink:0}img{max-width:100%}
:root {--background:#f1f2ef;--foreground:#171916;--primary:#0a5c42;--primary-foreground:#fff;--border:#cfd2cc;--ring:#16744f;--accent:#b2e9ba;--card:#e5e7e2;--card-foreground:#171916;--muted:#e5e7e2;--muted-foreground:#575e55;--radius:0.3rem;}
.dark {--background:#141713;--foreground:#f1f2ef;--primary:#b2e9ba;--primary-foreground:#172319;--border:#383e36;--ring:#b2e9ba;--card:#20251e;--card-foreground:#f1f2ef;--muted:#22281f;--muted-foreground:#aab1a6;}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #16875a;outline-offset:6px}::selection{background:#b2e9ba;color:#171916}p,h1,h2,h3{margin:0}img{display:block;width:100%;height:100%;object-fit:cover}.header,.hero,.discipline-bar,.section,footer{max-width:1680px;margin-inline:auto}.header{height:98px;padding:0 4.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.wordmark{font-size:25px;font-weight:750;letter-spacing:-1.4px}.brand-dot{color:#16764b}.header nav{display:flex;gap:40px;font-size:14px}.header nav a{display:flex;gap:8px;align-items:center}.header nav a:hover{color:#16764b}.hero{display:grid;grid-template-columns:1.12fr 1fr;min-height:650px;padding:28px 4.5% 35px;gap:30px}.hero-copy{display:flex;flex-direction:column;justify-content:space-between;padding:20px 0 10px;position:relative;z-index:1}.eyebrow,.section-index,.portrait-label,.discipline-bar{font-family:'Courier New',monospace;font-size:12px;letter-spacing:1px}.eyebrow{display:flex;gap:10px;align-items:center}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#16764b}h1{font-size:clamp(80px,9.6vw,156px);letter-spacing:-.09em;line-height:.86;font-weight:800;margin:50px 0 40px}.name-dot{color:#16764b}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.hero-bottom p{font-size:20px;line-height:1.4;letter-spacing:-.5px}.hero-bottom p span{color:#62685f}.button{display:inline-flex;gap:25px;justify-content:space-between;align-items:center;font-size:14px;padding:18px 20px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-3px)}.dark-button{color:#fff;background:#171916}.dark-button:hover{background:#0a5c42}.hero-portrait{position:relative;min-height:580px;overflow:hidden;background:#d4d7d0}.hero-portrait img{position:absolute;inset:0;object-position:50% 38%;filter:grayscale(1)}.portrait-label{position:absolute;bottom:24px;left:24px;padding:8px 11px;background:#f1f2ef;color:#171916;font-size:12px}.hero-asterisk{position:absolute;right:22px;top:25px;color:#b2e9ba}.discipline-bar{border-top:1px solid var(--border);padding:22px 4.5%;display:flex;align-items:center;justify-content:space-between;gap:15px}.discipline-bar>svg{color:#16764b}.section{padding:100px 4.5%}.about{background:#171b16;color:#f1f2ef;display:grid;grid-template-columns:1fr 3fr;gap:30px}.section-index{line-height:1.5}.about .section-index{color:#a7b0a2}.about h2{font-size:clamp(32px,4.2vw,65px);letter-spacing:-.05em;line-height:1.08;font-weight:500}.about h2 span{color:#b2e9ba}.about-description{max-width:550px;line-height:1.65;font-size:18px;color:#acb4a7;margin-top:35px}.projects h2{font-size:clamp(36px,5vw,72px);font-weight:500;letter-spacing:-.06em;margin:25px 0 45px}.project-preview{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-preview a{padding:40px;background:#dfe5dc;font-size:32px;display:flex;justify-content:space-between}.contact{background:#e2e8dd}.contact h2{font-size:clamp(55px,8vw,120px);letter-spacing:-.07em;line-height:.95;font-weight:500;margin:45px 0}.email{display:inline-flex;gap:35px;font-size:clamp(28px,4vw,55px);letter-spacing:-.04em;align-items:center;border-bottom:1px solid #9ba596;padding-bottom:12px}.email svg{width:40px;height:40px}.contact-links{display:flex;gap:45px;margin-top:45px;font-size:16px}.contact-links a{display:flex;gap:18px;align-items:center}.contact a:hover{color:#0a5c42}footer{padding:30px 4.5%;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#586050}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;padding:15px;background:#b2e9ba}.skip-link:focus{top:10px}
@media(min-width:1681px){.header,.hero,.discipline-bar,.section,footer{padding-left:75px;padding-right:75px}}
@media(max-width:1100px){.hero-bottom{flex-direction:column;align-items:flex-start;gap:25px}.hero{min-height:590px}.hero-portrait{min-height:530px}.about{grid-template-columns:1fr 2.5fr}.discipline-bar{font-size:12px;flex-wrap:wrap}}
@media(max-width:700px){.header{height:76px;padding-inline:6%}.wordmark{font-size:23px}.header nav{gap:18px;font-size:14px}.header nav a:first-child{display:none}.hero{display:flex;flex-direction:column;padding:30px 6%;gap:28px}.hero-copy{padding:0}.eyebrow{font-size:12px;letter-spacing:.2px}h1{font-size:clamp(76px,18vw,126px);margin:35px 0;letter-spacing:-.08em}.hero-bottom{flex-direction:row;align-items:flex-end;gap:12px}.hero-bottom p{font-size:16px}.button{font-size:14px;padding:16px 12px;gap:12px}.hero-portrait{min-height:430px}.hero-asterisk{width:65px;height:65px}.discipline-bar{padding:18px 6%;flex-wrap:wrap;justify-content:flex-start;gap:14px;font-size:12px}.discipline-bar>svg{width:14px}.discipline-bar>a{margin-left:auto}.section{padding:65px 6%}.about{display:block}.about .section-index{margin-bottom:30px}.about h2{font-size:35px}.about-description{font-size:16px}.project-preview{grid-template-columns:1fr}.projects h2{font-size:38px;margin-bottom:30px}.contact h2{font-size:65px;margin:35px 0}.contact-links{gap:25px;flex-wrap:wrap;font-size:14px}.email svg{width:25px;height:25px}footer{padding:25px 6%;gap:20px;flex-wrap:wrap}footer .wordmark{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.about-side{display:flex;flex-direction:column;justify-content:space-between;gap:55px}.about-photo{width:80%;max-width:250px;aspect-ratio:4/5;margin:0}.about-photo img{filter:saturate(.6)}.second-paragraph{margin-top:20px}.expertise{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.expertise span{border:1px solid #414a3d;padding:9px 12px;font-size:13px;color:#c6cec1}.text-link{display:inline-flex;align-items:center;gap:20px;font-size:14px;border-bottom:1px solid currentColor;padding:7px 0;transition:gap .2s}.text-link:hover{gap:30px}.about .text-link{color:#b2e9ba}.projects-heading{display:flex;justify-content:space-between;align-items:flex-end}.project-count{font-family:'Courier New',monospace;font-size:12px;letter-spacing:1px;margin-bottom:55px;color:#62695e}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.project-cover{display:flex;flex-direction:column;justify-content:space-between;padding:30px;min-height:440px;position:relative;overflow:hidden;transition:filter .25s}.project-cover:hover{filter:brightness(1.1)}.pastvision{background:#0b493b;color:#e0f2df;background-image:linear-gradient(135deg,transparent 50%,#ffffff05 50%)}.cover-top,.cover-bottom{display:flex;justify-content:space-between;gap:15px;font-family:'Courier New',monospace;font-size:12px;line-height:1.4;letter-spacing:1px;align-items:center}.past-title{font-size:clamp(60px,7.4vw,115px);line-height:.82;font-weight:600;letter-spacing:-.09em;position:relative;margin:40px 0}.past-title span{font-weight:400;color:#c4ddb4}.past-title svg{position:absolute;right:0;top:0;color:#aecdb2}.life-game{background:#d9edbe;color:#253321;background-image:linear-gradient(#2d4e2412 1px,transparent 1px),linear-gradient(90deg,#2d4e2412 1px,transparent 1px);background-size:55px 55px}.game-title{font-size:clamp(50px,5.8vw,88px);font-weight:750;line-height:.91;letter-spacing:-.06em;transform:rotate(-5deg);margin:30px 15px}.game-title span{color:#f1f4e9;background:#263c24;padding:0 12px;display:inline-block}.project-info{padding:26px 0 0}.project-meta{display:flex;justify-content:space-between;gap:10px;font-family:'Courier New',monospace;font-size:12px;color:#59634f;letter-spacing:.5px}.project h3{font-size:32px;letter-spacing:-1px;font-weight:500;margin:24px 0 15px}.project h3 a{display:flex;justify-content:space-between;align-items:center}.project-info p{font-size:17px;line-height:1.65;color:#5c6554;max-width:470px;min-height:85px;margin-bottom:20px}.contact-heading{display:flex;justify-content:space-between;align-items:center;gap:35px}.contact-heading>p{font-size:20px;line-height:1.5;color:#55614d;min-width:230px}.contact-heading>p span{color:#171916}.contact-links>a{width:240px;justify-content:space-between;border-top:1px solid #a4af9b;padding-top:20px}.contact-links small{display:block;font-size:13px;color:#5d6855;margin-top:8px}
@media(max-width:1100px){.project-cover{min-height:380px;padding:25px}.past-title svg{width:42px;height:42px}.contact-heading>p{min-width:170px}}
@media(max-width:700px){.about-photo{width:180px;aspect-ratio:1;max-width:none;margin-bottom:32px}.about-photo img{object-position:center 25%}.about-side{gap:0}.about h2{font-size:clamp(29px,7.7vw,46px)}.projects-heading{display:block}.project-count{display:block;margin:-12px 0 25px}.project-grid{grid-template-columns:1fr;gap:50px}.project-cover{min-height:400px;padding:25px}.past-title{font-size:clamp(68px,19vw,110px)}.game-title{font-size:clamp(58px,15vw,87px)}.project-info p{min-height:0;font-size:16px}.project h3{font-size:30px}.contact-heading{display:block}.contact-heading>p{margin:-10px 0 35px;font-size:17px}.contact-links{gap:25px}.contact-links>a{width:100%}.hero-bottom{flex-wrap:wrap}.header nav a{min-height:44px}.discipline-bar>a{padding:10px}.hero-portrait{aspect-ratio:4/5;min-height:0}}
@media(max-width:380px){.eyebrow{font-size:12px;flex-wrap:wrap}.contact h2{font-size:55px}.project-meta{font-size:12px;flex-wrap:wrap}.cover-top,.cover-bottom{font-size:12px;letter-spacing:0}.project-cover{padding:20px}.email{font-size:27px;gap:15px}.header nav{gap:12px}}
/* Selected portrait: preserve the face and window shadow across screen sizes. */
.hero-portrait img{object-position:50% 36%;filter:none}
.about-photo img{object-position:40% 29%;filter:none}
/* Full-body editorial first screen. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.hero.hero-editorial{display:block;position:relative;min-height:0;padding:0;isolation:isolate;background:#f1f2ef;gap:0}
.hero-editorial .editorial-image{display:block;width:100%;height:auto;object-fit:contain;margin:0}
.editorial-role{position:absolute;left:4.5%;top:6%;font-family:'Courier New',monospace;font-size:12px;letter-spacing:1.2px;line-height:1.6}
.editorial-intro{position:absolute;left:4.5%;bottom:10%;max-width:26%}
.editorial-intro p{font-size:clamp(16px,1.5vw,23px);line-height:1.4;letter-spacing:-.5px;margin-bottom:24px}
.editorial-intro .button{gap:24px}
.editorial-contact{position:absolute;right:5%;bottom:11%;font-family:'Courier New',monospace;font-size:12px;letter-spacing:1px;line-height:1.7;border-bottom:1px solid #7d827a;padding-bottom:7px}
@media(max-width:700px){.hero.hero-editorial{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 0 25px}.hero-editorial .editorial-image{grid-column:1/-1}.editorial-role{position:static;grid-column:1/-1;grid-row:2;margin:18px 6% 16px;font-size:12px;letter-spacing:.7px;line-height:1.5}.editorial-role br{display:none}.editorial-role br::after{content:' '}.editorial-intro{position:static;max-width:none;margin-left:12%;grid-column:1/2;grid-row:3}.editorial-intro p{font-size:16px;margin-bottom:16px}.editorial-intro .button{gap:12px;white-space:nowrap}.editorial-contact{position:static;align-self:end;justify-self:end;margin-right:12%;grid-column:2/3;grid-row:3;font-size:12px}.hero-editorial .editorial-image{min-height:0}}
/* Noir art direction: portrait, oversized name and red accents. */
:root{--background:#121214;--foreground:#f3f3f3;--border:#323237;--primary:#e82142;--ring:#e82142}
body{background:#121214;padding:0}main{background:#121214;max-width:1680px;margin:auto;overflow:hidden}.header{position:relative;z-index:5;background:#141416;border:0;height:88px;padding-inline:6%}.header .wordmark{color:#fff}.brand-dot,.name-dot{color:#ee2946}.header nav a:hover{color:#ee2946}.header nav{gap:35px;font-size:14px}.header nav a:last-child{margin-left:65px}
.hero.hero-noir{position:relative;display:block;isolation:isolate;padding:0;min-height:650px;height:min(760px,75vw);background:#141416;overflow:hidden}.noir-portrait{position:absolute;right:0;top:-45px;width:64%;height:calc(100% + 45px);z-index:-2}.noir-portrait img{height:100%;width:100%;object-fit:cover;object-position:50% 29%;filter:grayscale(1) brightness(.63) contrast(1.18)}.noir-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#141416 0%,#141416de 9%,#14141665 27%,transparent 55%),linear-gradient(0deg,#141416 0%,transparent 30%,transparent 83%,#1414168c 100%)}.hero-noir::before{content:'';position:absolute;inset:8% 42% 25% 18%;background-image:radial-gradient(#949497 0.6px,transparent .8px);background-size:7px 7px;opacity:.09;z-index:-1;mask-image:linear-gradient(180deg,#000,transparent)}.noir-copy{position:relative;padding-top:100px;margin-left:15%;width:49%}.noir-kicker{display:inline-block;border-top:2px solid #efefef;padding-top:15px;font-family:'Courier New',monospace;font-size:12px;letter-spacing:1.2px;color:#d4d4d8}.noir-copy h1{font-size:clamp(70px,8.7vw,132px);font-weight:750;line-height:.92;letter-spacing:-.065em;margin:24px 0 26px;color:#fff}.noir-description{font-size:16px;color:#bcbcc3;line-height:1.6}.noir-cta{display:inline-flex;gap:30px;align-items:center;color:#f34460;margin-top:28px;font-size:14px}.noir-cta span{font-size:30px;line-height:1;transition:transform .2s}.noir-cta:hover span{transform:translateX(8px)}.noir-side-link{position:absolute;right:0;top:23%;background:#d91033;color:#fff;width:65px;height:95px;display:grid;place-items:center;font-size:28px;transition:background .2s}.noir-side-link:hover{background:#f12348}.noir-scroll{position:absolute;left:6%;bottom:36px;display:flex;align-items:center;gap:18px;writing-mode:vertical-rl;font-size:11px;letter-spacing:1.5px;color:#ccc}.noir-scroll span{writing-mode:horizontal-tb;font-size:24px}.noir-social{position:absolute;right:6%;bottom:40px;display:flex;gap:28px;font-size:13px;color:#e0e0e3}.noir-social a:hover{color:#f34460}.discipline-bar{background:#17171a;border-top:1px solid #303035;color:#aaaab1}.discipline-bar>svg{color:#e82142}.about{background:#161619}.about h2 span{color:#a9a9b1}.about-description,.about .section-index{color:#b0b0b9}.expertise span{border-color:#3c3c44;color:#bcbcc5}.about .text-link{color:#f34460}.projects{background:#121214}.project-count,.project-meta{color:#a4a4ad}.project-info p{color:#b1b1bb}.pastvision{background:#242426;color:#f1f1f1;background-image:linear-gradient(135deg,transparent 50%,#ffffff04 50%)}.past-title span,.past-title svg{color:#aaaab2}.life-game{background-color:#301820;color:#faf2f4;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px)}.game-title span{background:#db1739;color:#fff}.contact{background:#1c1c20}.contact-heading>p,.contact-links small{color:#afafb9}.contact-heading>p span{color:#f4f4f5}.email,.contact-links>a{border-color:#4b4b53}.contact a:hover{color:#f34460}footer{background:#121214;color:#adadb5}.skip-link{background:#e82142;color:#fff}a:focus-visible{outline-color:#f34460}::selection{background:#b90d2b;color:#fff}
@media(min-width:1600px){.hero.hero-noir{height:760px}.noir-copy{padding-top:105px}}
@media(max-width:1000px){.header nav a:last-child{margin-left:15px}.hero.hero-noir{min-height:620px;height:70vw}.noir-copy{margin-left:10%;padding-top:100px;width:55%}.noir-portrait{width:70%}.noir-copy h1{font-size:95px}.noir-kicker{font-size:11px;letter-spacing:.5px}}
@media(max-width:700px){body{padding:0}.header{height:76px;padding-inline:6%}.header nav{gap:17px}.header nav a:last-child{margin-left:0}.hero.hero-noir{display:block;min-height:690px;height:auto}.noir-portrait{width:100%;height:560px;top:0;right:-16%;opacity:.78}.noir-portrait img{object-position:50% 23%}.noir-portrait::after{background:linear-gradient(90deg,#141416 0%,#141416a8 15%,transparent 60%),linear-gradient(0deg,#141416 0%,transparent 45%)}.noir-copy{margin-left:7%;width:85%;padding-top:185px}.noir-copy h1{font-size:clamp(74px,18vw,108px);margin-top:20px}.noir-kicker{font-size:11px;letter-spacing:.5px;max-width:75%}.noir-description{font-size:16px}.noir-side-link{top:65px;width:45px;height:65px;font-size:24px}.noir-scroll{display:none}.noir-social{left:7%;right:auto;bottom:25px;gap:30px}.noir-cta{margin-top:22px}.hero-noir::before{inset:15% 10% 20% 10%}.header .wordmark{font-size:22px}}
/* Motion: restrained editorial entrances and responsive details. */
@keyframes title-rise{from{opacity:0;transform:translate3d(0,105%,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes soft-enter{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes portrait-enter{from{opacity:0;transform:scale(1.055)}to{opacity:1;transform:scale(1)}}
@keyframes side-enter{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.title-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.title-line>span{display:block}
@media(prefers-reduced-motion:no-preference){
 .title-line>span{animation:title-rise 1s cubic-bezier(.16,1,.3,1) both;animation-delay:.2s}
 .title-line:nth-child(2)>span{animation-delay:.34s}
 .noir-kicker{animation:soft-enter .85s cubic-bezier(.16,1,.3,1) .08s both}
 .noir-description{animation:soft-enter .9s cubic-bezier(.16,1,.3,1) .5s both}
 .noir-cta{animation:soft-enter .9s cubic-bezier(.16,1,.3,1) .65s both}
 .noir-portrait img{animation:portrait-enter 1.6s cubic-bezier(.16,1,.3,1) both}
 .noir-side-link{animation:side-enter .85s cubic-bezier(.16,1,.3,1) .7s both}
 .noir-social{animation:soft-enter .8s ease .85s both}
 .noir-scroll span{animation:scroll-nudge 1.8s ease-in-out 1.5s 3}
}
.header nav a,.noir-social a{position:relative}
.header nav a::after,.noir-social a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#f34460;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.header nav a:hover::after,.header nav a:focus-visible::after,.noir-social a:hover::after,.noir-social a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.project-cover{transition:filter .4s ease,box-shadow .4s ease}
.project-cover .past-title,.project-cover .game-title{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.project-cover .cover-top svg,.project h3 svg,.text-link svg,.contact-links svg,.email svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.contact-links>a{transition:color .3s,border-color .3s}
@media(hover:hover) and (pointer:fine){
 .project-cover:hover{box-shadow:0 18px 50px #0003}
 .project-cover:hover .past-title{transform:translateY(-5px)}
 .project-cover:hover .game-title{transform:rotate(-2deg) translateY(-5px)}
 .project-cover:hover .cover-top svg,.project h3 a:hover svg,.text-link:hover svg,.contact-links a:hover svg,.email:hover svg{transform:translate(4px,-4px)}
 .contact-links>a:hover{border-color:#f34460}
}
@media(prefers-reduced-motion:reduce){.noir-portrait{transform:none!important}.title-line>span{opacity:1;transform:none}}
/* Language controls and mobile layout. */
html{overflow-anchor:none}
.header{gap:28px}.header nav{margin-left:auto}.language-switch{display:flex;align-items:center;gap:3px;flex-shrink:0;font-size:13px;color:#75757e}.language-switch button{border:0;background:none;color:#90909b;font:inherit;font-weight:600;min-width:38px;min-height:44px;cursor:pointer;padding:8px 4px;transition:color .2s}.language-switch button[aria-pressed=true]{color:#fff}.language-switch button:hover{color:#f34460}.language-switch button:focus-visible{outline:2px solid #f34460;outline-offset:2px}.header nav a:last-child{margin-left:0}
[tabindex="-1"]:focus{outline:none}
@media(max-width:700px){
 .header{height:auto;min-height:106px;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:10px 6% 8px}.header .wordmark{font-size:24px;letter-spacing:-1.2px}.language-switch{grid-column:2;grid-row:1}.header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;margin:0;gap:14px;border-top:1px solid #29292e;margin-top:4px}.header nav a:first-child{display:flex}.header nav a{min-height:40px;font-size:14px}.header nav a::after{bottom:3px}
 .hero.hero-noir{min-height:0;height:auto;display:flex;flex-direction:column;padding:0 6% 28px;overflow:hidden}
 .noir-portrait{right:0;top:0;width:100%;height:350px;opacity:1;z-index:-2}.noir-portrait img{object-position:50% 27%;filter:grayscale(1) brightness(.76) contrast(1.08)}
 .noir-portrait::after{background:linear-gradient(0deg,#141416 0%,#141416ed 8%,#14141660 34%,transparent 65%),linear-gradient(90deg,#14141665,transparent 55%)}
 .noir-copy{padding:250px 0 0;margin:0;width:100%}.noir-kicker{font-size:12px;line-height:1.6;max-width:100%;padding-top:12px;letter-spacing:.3px;border-top:1px solid #7b7b83}.noir-copy h1{font-size:clamp(56px,15vw,84px);line-height:.96;margin:18px 0 20px;letter-spacing:-.055em}.noir-description{font-size:16px;line-height:1.55;max-width:100%}.noir-cta{margin-top:21px;min-height:44px;font-size:15px}.noir-side-link{display:none}.noir-social{position:static;display:flex;margin-top:24px;padding-top:18px;border-top:1px solid #303035;gap:28px;font-size:14px}.noir-social a{min-height:35px;display:inline-flex;align-items:center}.hero-noir::before{display:none}
 .discipline-bar{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:22px 6%;font-size:12px;letter-spacing:.4px}.discipline-bar>svg,.discipline-bar>a{display:none}
 .section{padding:54px 6%}.about-side{display:grid;grid-template-columns:1fr 100px;gap:16px;align-items:start;margin-bottom:28px}.about .section-index{margin:0}.about-photo{margin:0;width:100px;aspect-ratio:4/5}.about h2{font-size:clamp(27px,7.5vw,38px);line-height:1.15;letter-spacing:-.035em}.about-description{margin-top:24px;font-size:16px}.expertise{gap:8px}.expertise span{font-size:13px;padding:8px 10px}.text-link{min-height:44px}
 .projects h2{font-size:clamp(30px,8vw,40px);line-height:1.12}.project-cover{min-height:330px;padding:22px}.past-title{font-size:clamp(62px,18vw,100px)}.past-title svg{width:35px;height:35px}.game-title{font-size:clamp(50px,14vw,80px)}.cover-top,.cover-bottom{font-size:12px;letter-spacing:0}.project-meta{flex-wrap:wrap;font-size:12px;gap:8px}.project h3{font-size:28px}.project-info p{font-size:16px;line-height:1.6}.project-grid{gap:38px}
 .contact h2{font-size:clamp(40px,11vw,62px);line-height:1.03;letter-spacing:-.055em;margin:28px 0}.contact-heading>p{font-size:16px;margin:0 0 28px}.email{font-size:clamp(25px,7vw,36px);gap:16px;max-width:100%}.contact-links{margin-top:28px}.contact-links>a{min-height:65px}.contact-links small{font-size:14px}footer{padding:25px 6%;font-size:13px}
}
@media(min-width:701px) and (max-width:950px){.header{gap:16px}.header nav{gap:20px}.noir-copy h1{font-size:clamp(74px,10vw,95px)}}
/* Consistent name line spacing in both languages. */
.noir-copy h1 .title-line + .title-line{margin-top:.13em}
/* Uppercase name in both languages. */
.noir-copy h1 .title-line>span{text-transform:uppercase}
/* Three evenly balanced columns, independent of label width. */
.discipline-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:12px;padding:26px 6%;text-align:center}
.discipline-bar>span{justify-self:stretch;font-size:14px;letter-spacing:.8px;overflow-wrap:anywhere}
.discipline-bar>svg{display:block;justify-self:center}
.discipline-bar>a{position:absolute;right:2%;top:50%;transform:translateY(-50%);padding:8px}
@media(max-width:700px){.discipline-bar{grid-template-columns:1fr;gap:13px;padding:26px 6%}.discipline-bar>span{font-size:14px;text-align:center}.discipline-bar>svg,.discipline-bar>a{display:none}}
/* Two-project coverflow, with readable content on the selected card. */
.projects{overflow:hidden}.project-grid.project-carousel{display:block;position:relative;perspective:1500px;margin-inline:-4.95%}
.carousel-stage{display:grid;grid-template-columns:1fr;align-items:start;perspective:1500px;padding:32px 0 40px;touch-action:pan-y;isolation:isolate}
.project-carousel .project{grid-area:1/1;width:68%;max-width:700px;margin:0 auto;padding:12px 12px 24px;background:#1c1c20;border:1px solid #45454c;border-radius:24px;transform-origin:center center;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s,border-color .5s,box-shadow .5s;box-shadow:0 24px 65px #0005;overflow:hidden;min-width:0}
.project-carousel .project:first-child{z-index:2}.project-carousel .project:nth-child(2){transform:translateX(66%) scale(.79) rotateY(-17deg);opacity:.5;z-index:1}
.project-carousel .project.is-active{transform:translateX(0) scale(1) rotateY(0);opacity:1;z-index:3;border-color:#8b3444;box-shadow:0 30px 80px #0008,0 0 0 1px #e8214218}
.project-carousel .project.is-before{transform:translateX(-66%) scale(.79) rotateY(17deg);opacity:.5;z-index:1;cursor:pointer}
.project-carousel .project.is-after{transform:translateX(66%) scale(.79) rotateY(-17deg);opacity:.5;z-index:1;cursor:pointer}
.project-carousel .project-cover{border-radius:15px;min-height:370px;padding:28px;box-shadow:none}.project-carousel .project-info{padding:24px 16px 0}.project-carousel .project h3{margin:18px 0 12px;font-size:30px}.project-carousel .project h3 svg{display:none}.project-carousel .project-info p{max-width:none;min-height:84px;margin-bottom:18px;font-size:16px}.project-carousel .past-title{font-size:clamp(68px,8vw,108px)}.project-carousel .game-title{font-size:clamp(55px,6.5vw,83px)}.project-carousel .text-link{font-size:14px}.project-carousel .project-meta{font-size:12px}
.carousel-controls{display:flex;justify-content:center;align-items:center;gap:20px;padding:4px 0 0}.carousel-controls>button{width:48px;height:48px;border:1px solid #4b4b54;border-radius:50%;background:#202024;color:#fff;font-size:22px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.carousel-controls>button:hover{background:#d91033;border-color:#d91033;transform:translateY(-2px)}.carousel-controls button:focus-visible{outline:2px solid #f34460;outline-offset:4px}.carousel-dots{display:flex;gap:0;align-items:center}.carousel-dots button{width:36px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}.carousel-dots button::after{content:'';display:block;margin:auto;width:7px;height:7px;border-radius:8px;background:#62626c;transition:width .3s,background .3s}.carousel-dots button[aria-pressed=true]::after{width:24px;background:#f34460}.carousel-counter{font:12px 'Courier New',monospace;color:#b3b3bb;min-width:55px}
@media(max-width:700px){.project-grid.project-carousel{margin-inline:-6.82%}.carousel-stage{padding:18px 0 26px}.project-carousel .project{width:82%;padding:8px 8px 20px;border-radius:19px}.project-carousel .project-cover{min-height:280px;padding:20px;border-radius:12px}.project-carousel .project-info{padding:18px 10px 0}.project-carousel .project-info p{min-height:0;font-size:15px;line-height:1.6}.project-carousel .project h3{font-size:26px}.project-carousel .past-title{font-size:clamp(60px,17vw,90px)}.project-carousel .game-title{font-size:clamp(48px,13.5vw,72px);margin-inline:5px}.project-carousel .cover-bottom{font-size:11px;gap:8px}.project-carousel .cover-top{font-size:12px}.project-carousel .project-meta{font-size:11px;gap:6px}.project-carousel .project.is-before{transform:translateX(-84%) scale(.88) rotateY(12deg)}.project-carousel .project.is-after{transform:translateX(84%) scale(.88) rotateY(-12deg)}.carousel-controls{gap:12px}}
@media(prefers-reduced-motion:reduce){.project-carousel .project,.carousel-controls button,.carousel-dots button::after{transition:none!important}}
/* Compact project carousel. */
.project-carousel .project{width:38%;max-width:370px;padding:8px 8px 16px;border-radius:17px}
.project-carousel .project-cover{min-height:200px;padding:18px;border-radius:11px}
.project-carousel .past-title{font-size:58px;margin:22px 0}
.project-carousel .past-title svg{width:30px;height:30px}
.project-carousel .game-title{font-size:46px;margin:20px 5px}
.project-carousel .cover-top,.project-carousel .cover-bottom{font-size:11px;letter-spacing:0}
.project-carousel .project-info{padding:16px 10px 0}
.project-carousel .project h3{font-size:24px;margin:14px 0 10px}
.project-carousel .project-info p{font-size:14px;line-height:1.55;min-height:0;margin-bottom:12px}
.project-carousel .project-meta{font-size:11px;flex-wrap:wrap;gap:6px}
.project-carousel .text-link{font-size:13px;min-height:40px}
.carousel-stage{padding:20px 0 26px}
@media(max-width:700px){.project-carousel .project{width:70%;max-width:300px}.project-carousel .project-cover{min-height:185px;padding:15px}.project-carousel .past-title{font-size:clamp(42px,12vw,58px)}.project-carousel .game-title{font-size:clamp(35px,10vw,46px)}.project-carousel .project h3{font-size:22px}.project-carousel .project-info{padding:14px 6px 0}.project-carousel .project-info p{font-size:14px}.project-carousel .cover-bottom{flex-wrap:wrap;gap:8px}.project-carousel .project.is-before{transform:translateX(-84%) scale(.88) rotateY(12deg)}.project-carousel .project.is-after{transform:translateX(84%) scale(.88) rotateY(-12deg)}}
/* Minimal carousel arrows, with generous invisible touch targets. */
.carousel-controls>button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#a4a4ae;box-shadow:none;transition:color .25s}
.carousel-controls>button:hover{background:transparent;border-color:transparent;transform:none;color:#f34460}
.carousel-controls>button svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.carousel-prev:hover svg{transform:translateX(-3px)}.carousel-next:hover svg{transform:translateX(3px)}}
.carousel-controls>button:focus-visible{outline:1px solid #f34460;outline-offset:0;border-radius:6px}
/* Endless coverflow: symmetric neighbours, recycling beyond the visible stage. */
.project-carousel .project[data-offset]{transform:translateX(0) scale(.6);opacity:0;visibility:hidden;pointer-events:none;z-index:0}
.project-carousel .project[data-offset="0"]{transform:translateX(0) scale(1) rotateY(0);opacity:1;visibility:visible;pointer-events:auto;z-index:3}
.project-carousel .project[data-offset="-1"]{transform:translateX(-76%) scale(.79) rotateY(17deg);opacity:.5;visibility:visible;pointer-events:auto;z-index:2;cursor:pointer}
.project-carousel .project[data-offset="1"]{transform:translateX(76%) scale(.79) rotateY(-17deg);opacity:.5;visibility:visible;pointer-events:auto;z-index:2;cursor:pointer}
.project-carousel .project[data-offset="-2"],.project-carousel .project[data-offset="-3"]{transform:translateX(-150%) scale(.6) rotateY(24deg)}
.project-carousel .project[data-offset="2"],.project-carousel .project[data-offset="3"]{transform:translateX(150%) scale(.6) rotateY(-24deg)}
@media(max-width:700px){.project-carousel .project[data-offset="-1"]{transform:translateX(-84%) scale(.88) rotateY(12deg)}.project-carousel .project[data-offset="1"]{transform:translateX(84%) scale(.88) rotateY(-12deg)}}
/* PastVision: two eras in one photographic cover. */
.project-carousel .project-cover.pastvision-photo{position:relative;isolation:isolate;min-height:0;aspect-ratio:3/2;padding:16px;display:flex;flex-direction:column;justify-content:space-between;background:#242426;overflow:hidden}
.pastvision-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pastvision-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0006 0%,transparent 34%,transparent 55%,#000a 100%);pointer-events:none}
.pastvision-photo .cover-top{color:#fff;font-size:11px;letter-spacing:.5px}.pastvision-photo-title{font-size:32px;font-weight:600;letter-spacing:-1.3px;line-height:1;color:#fff;text-shadow:0 2px 15px #0006}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.pastvision-photo:hover>img{transform:scale(1.035)}}
@media(max-width:700px){.project-carousel .project-cover.pastvision-photo{padding:13px;aspect-ratio:3/2;min-height:0}.pastvision-photo-title{font-size:28px}.pastvision-photo .cover-top{font-size:10px;letter-spacing:.2px}}
/* INREAZ artwork contains its own typography; show the complete composition. */
.project-carousel .project-cover.inreaz-photo{position:relative;display:block;padding:0;min-height:0;aspect-ratio:3/2;background:#19080f;overflow:hidden}
.inreaz-photo>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:filter .35s ease}
@media(hover:hover){.inreaz-photo:hover>img{filter:brightness(1.08)}}
@media(max-width:700px){.project-carousel .project-cover.inreaz-photo{padding:0;min-height:0;aspect-ratio:3/2}}
/* Product details, locally rendered in a native accessible dialog. */
html{scrollbar-gutter:stable}html.product-modal-open{overflow:hidden}
#product-dialog{width:min(760px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:1px solid #414147;border-radius:20px;background:#1b1b1f;color:#eee;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 120px #0009}
#product-dialog::backdrop{background:#08080bd9;backdrop-filter:blur(8px)}
.product-dialog-panel{position:relative}.product-dialog-close{position:sticky;top:12px;float:right;z-index:2;margin:12px 12px -56px 0;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff35;border-radius:50%;background:#101014de;color:#fff;cursor:pointer}.product-dialog-close:hover{background:#d91033}.product-dialog-close:focus-visible{outline:2px solid #f34460;outline-offset:3px}
.product-dialog-image{width:100%;height:auto;max-height:370px;object-fit:contain;background:#110d11}.product-dialog-text{padding:32px 38px 34px}.product-dialog-type{font:12px 'Courier New',monospace;letter-spacing:1px;color:#a2a2af;margin-bottom:15px}.product-dialog-text h2{font-size:42px;letter-spacing:-1.5px;line-height:1.1}.product-dialog-headline{font-size:23px!important;color:#fff!important;line-height:1.3!important;margin:14px 0 22px!important}.product-dialog-text p{font-size:16px;line-height:1.65;color:#bcbcc6}.product-dialog-text h3{font-size:18px;margin:26px 0 10px}.product-dialog-text ul{padding-left:20px;margin:20px 0 30px;color:#c8c8d1;font-size:15px;line-height:1.7}.product-dialog-text li{margin:8px 0}.product-dialog-text li::marker{color:#ef294b}.product-dialog-action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 23px;background:#d91033;color:#fff;border-radius:5px;font-size:15px;transition:background .2s}.product-dialog-action:hover{background:#ed2246}.product-dialog-note{font-size:12px!important;margin-top:10px;color:#92929f!important}
@keyframes dialog-entrance{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){#product-dialog[open]{animation:dialog-entrance .28s cubic-bezier(.16,1,.3,1)}}
@media(max-width:700px){#product-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:15px}.product-dialog-text{padding:24px 22px 28px}.product-dialog-text h2{font-size:34px}.product-dialog-headline{font-size:21px!important}.product-dialog-action{width:100%}.product-dialog-image{max-height:260px}}
.project-carousel .project.is-active{cursor:pointer}
/* Standalone project pages. */
.product-page{min-height:100vh}.product-page-intro{padding:40px 8% 55px}.product-back{display:inline-block;font-size:14px;color:#aaaab4;min-height:44px;margin-bottom:26px}.product-back:hover{color:#f34460}.product-page-type{font:12px 'Courier New',monospace;letter-spacing:1px;color:#a7a7b3}.product-page-intro h1{font-size:clamp(60px,9vw,120px);line-height:1;letter-spacing:-.065em;margin:20px 0}.product-page-headline{font-size:clamp(22px,3vw,35px);line-height:1.35;margin-bottom:30px;color:#c5c5cd}.product-page-art{margin:0 8%;background:#190e13;border-radius:16px;overflow:hidden}.product-page-art img{width:100%;height:auto;max-height:650px;object-fit:contain}.product-page-description{display:grid;grid-template-columns:1fr 2fr;gap:65px;padding:65px 8% 90px}.product-page-description h2{font-size:30px;letter-spacing:-1px;font-weight:500}.product-page-description p{font-size:18px;line-height:1.75;color:#bcbcc6;margin-bottom:24px}.product-page-description .product-page-credit{font-size:14px;margin-top:14px;color:#858590}.product-page-description ul{padding-left:21px;margin:25px 0 35px;font-size:16px;line-height:1.7;color:#ddd}.product-page-description li{margin:10px 0}.product-page-description li::marker{color:#f34460}.product-page-description .product-page-note{font-size:13px;margin:12px 0 0;color:#92929e}
@media(max-width:700px){.product-page-intro{padding:25px 6% 35px}.product-back{margin-bottom:16px}.product-page-intro h1{font-size:clamp(52px,14vw,80px)}.product-page-headline{font-size:23px}.product-page-art{margin:0 6%;border-radius:10px}.product-page-description{grid-template-columns:1fr;padding:35px 6% 55px;gap:16px}.product-page-description p{font-size:16px}.product-page-description h2{font-size:26px}.product-page .product-dialog-action{width:auto}.product-page .header nav{justify-content:flex-start}}
/* Project cards are informational; only side cards switch the carousel. */
.project-carousel .project.is-active,.project-carousel .project[data-offset="0"]{cursor:default}
.project-carousel .project h3{display:block}
/* Selected color portrait for About. */
.about-photo img{object-position:50% 40%;filter:none}
/* Mobile About: heading, full portrait, then text in a single reading order. */
@media(max-width:700px){
 .about{display:flex;flex-direction:column;gap:0}
 .about .about-side,.about .about-side+div{display:contents}
 .about .section-index{order:0;margin:0 0 22px}
 .about h2{order:1;margin:0 0 26px}
 .about .about-photo{order:2;width:100%;max-width:none;aspect-ratio:4/5;margin:0 0 28px}
 .about .about-photo img{object-fit:cover;object-position:50% 40%;border-radius:3px}
 .about .about-description{order:3;margin:0 0 20px}
 .about .second-paragraph{order:4;margin:0 0 24px}
 .about .expertise{order:5;margin:0 0 24px}
 .about .text-link{order:6;align-self:flex-start;margin:0}
}
/* Mobile About: portrait as a background, with text over a dark gradient. */
@media(max-width:700px){
 .about{position:relative;isolation:isolate;overflow:hidden;background:#161619;padding:34px 6% 42px}
 .about::before{content:'';position:absolute;inset:0;z-index:-2;background-image:url('assets/ilya-about.jpg');background-size:auto 660px;background-repeat:no-repeat;background-position:58% top;pointer-events:none}
 .about::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#16161930 0px,#16161915 120px,#16161955 220px,#161619de 350px,#161619fa 510px,#161619 660px);pointer-events:none}
 .about .about-photo{display:none}
 .about .section-index{margin:0 0 205px;color:#fff;text-shadow:0 1px 8px #000a}
 .about h2{margin:0 0 25px;color:#fff;text-shadow:0 2px 20px #0007}
 .about h2 span{color:#dadade}
 .about .about-description{color:#ededf0;line-height:1.65;margin:0 0 20px}
 .about .second-paragraph{margin-bottom:25px}
 .about .expertise span{background:#1616198c;border-color:#63636a;color:#e0e0e6}
 .about .text-link{color:#ff5572}
}
/* Keep the face clear and blend the photo into the section above. */
@media(max-width:700px){
 .about .section-index{margin-bottom:320px}
 .about::after{background:linear-gradient(180deg,#161619 0px,#161619dc 28px,#16161965 85px,#16161910 150px,#16161910 270px,#16161972 345px,#161619e8 425px,#161619fc 530px,#161619 660px)}
}
/* Desktop About: photographic background and a clear text column. */
@media(min-width:701px){
 .about{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:740px;padding:92px 6% 80px 48%;background:#161619}
 .about .about-side{display:contents}
 .about .about-photo{display:none}
 .about .section-index{position:absolute;left:6%;top:62px;z-index:1;color:#e6e6eb;text-shadow:0 1px 8px #0008}
 .about::before{content:'';position:absolute;inset:0;z-index:-2;background-image:url('assets/ilya-about.jpg');background-repeat:no-repeat;background-position:left center;background-size:53% auto;pointer-events:none}
 .about::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#16161912 0%,#16161908 26%,#16161980 39%,#161619ee 49%,#161619 57%),linear-gradient(180deg,#161619 0%,#16161980 8%,transparent 23%,transparent 70%,#161619a8 91%,#161619 100%);pointer-events:none}
 .about h2{font-size:clamp(38px,4.1vw,64px);line-height:1.08;margin:0;letter-spacing:-.045em}
 .about h2 span{color:#c0c0c9}
 .about-description{max-width:620px;color:#d4d4dd;font-size:18px;line-height:1.7}
 .about .second-paragraph{margin-top:22px}
 .about .expertise{max-width:620px}
 .about .expertise span{background:#16161980;border-color:#4b4b55}
}
@media(min-width:701px) and (max-width:1000px){
 .about{padding:100px 5% 64px 45%;min-height:700px}
 .about::before{background-size:auto 100%;background-position:28% center;width:58%}
 .about::after{background:linear-gradient(90deg,transparent 0%,#16161930 25%,#161619b3 39%,#161619f5 49%,#161619 59%),linear-gradient(180deg,#161619 0%,transparent 20%,transparent 70%,#161619 100%)}
 .about h2{font-size:38px}.about-description{font-size:16px}
}
/* More open tracking for headings across desktop, mobile and both languages. */
h1,h2,h3,.noir-copy h1,.about h2,.projects h2,.contact h2,.project-carousel .project h3,.pastvision-photo-title,.past-title,.game-title,.product-page-intro h1,.product-page-description h2{letter-spacing:0em}

/* Selected typography: poster style. */
body{font-family:'Segoe UI',Arial,sans-serif}h1,h2,h3,.noir-copy h1,.about h2,.projects h2,.contact h2,.project-carousel .project h3,.pastvision-photo-title{font-family:Bahnschrift,Arial,sans-serif;font-variation-settings:'wght' 650,'wdth' 75;letter-spacing:.015em}.noir-copy h1{font-size:clamp(80px,10.5vw,155px);font-variation-settings:'wght' 700,'wdth' 75;line-height:.95}.noir-kicker,.section-index{font-family:'Segoe UI',Arial,sans-serif;letter-spacing:.16em}@media(max-width:700px){.noir-copy h1{font-size:clamp(68px,19vw,108px)}.about h2{font-size:38px}}
/* Blend the About section into the projects background. */

.projects{background:linear-gradient(180deg,#161619 0,#121214 110px)}
/* Fade the photograph itself so its rectangular edge cannot show through. */
@media(min-width:1001px){
 .about::before{width:53%;background-size:100% auto;background-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%)}
}
@media(min-width:701px) and (max-width:1000px){
 .about::before{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 100%)}
}
/* Seamless transition between hero, disciplines and About. */
.discipline-bar{border-top:0;background:linear-gradient(180deg,#141416 0%,#161619 100%)}
/* Mission: monochrome portrait with soft edges and unobscured face. */
.mission{position:relative;isolation:isolate;overflow:hidden;background:#161619;min-height:700px;display:flex;align-items:center;padding:100px 6%;}
.mission-copy{width:54%;position:relative;z-index:1}.mission .section-index{color:#b0b0ba;margin-bottom:35px}.mission h2{font-family:Bahnschrift,Arial,sans-serif;font-variation-settings:'wght' 650,'wdth' 75;font-size:clamp(36px,3.65vw,58px);line-height:1.13;letter-spacing:.005em;font-weight:500;margin:0 0 30px}.mission h2 span{color:#bcbcc7}.mission-description{max-width:560px;font-size:18px;line-height:1.75;color:#d0d0d9}
.mission-portrait{position:absolute;right:0;top:0;bottom:0;width:49%;z-index:-1;pointer-events:none}.mission-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(1) brightness(.86);mask-image:linear-gradient(90deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%)}.mission-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#161619,transparent 20%,transparent 74%,#161619),linear-gradient(90deg,#161619 0%,#16161985 16%,transparent 42%,transparent 85%,#16161990 100%)}
@media(min-width:701px) and (max-width:1000px){.mission{padding:80px 6%;min-height:650px}.mission-copy{width:55%}.mission h2{font-size:36px}.mission-description{font-size:16px}.mission-portrait{width:48%}}
@media(max-width:700px){.mission{display:flex;flex-direction:column;min-height:0;padding:0 6% 55px}.mission-copy{display:contents;width:auto}.mission .section-index{order:0;align-self:flex-start;margin:24px 0 0;z-index:1}.mission-portrait{position:relative;order:1;top:auto;right:auto;bottom:auto;width:calc(100% + 14%);height:370px;margin:-30px -7% -10px;z-index:0}.mission-portrait img{object-position:50% 27%;mask-image:none;-webkit-mask-image:none}.mission-portrait::after{background:linear-gradient(180deg,#161619 0%,transparent 22%,transparent 63%,#161619 100%),linear-gradient(90deg,#16161990,transparent 20%,transparent 85%,#16161965)}.mission h2{order:2;align-self:stretch;font-size:clamp(30px,8vw,40px);line-height:1.15;margin:0 0 24px;position:relative;z-index:1}.mission-description{order:3;font-size:16px;line-height:1.7;max-width:none}}
/* Darken the upper edge of the About photograph. */
.about::before{box-shadow:inset 0 135px 95px -50px #161619c9}
/* Mobile mission: fade the portrait before the heading, with clear spacing. */
@media(max-width:700px){
 .mission-portrait{margin-bottom:14px;overflow:hidden}
 .mission-portrait img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 62%,transparent 100%)}
 .mission-portrait::after{background:linear-gradient(180deg,#161619 0%,transparent 22%,transparent 52%,#161619 100%)}
 .mission h2{margin-top:0;font-size:clamp(28px,7.5vw,38px);line-height:1.2;overflow-wrap:break-word}
}