:root{
  --paper:#f1ede5;--paper-2:#e7dfd3;--ink:#151310;--muted:#6c665f;--wine:#7d302e;--olive:#70705b;--line:rgba(21,19,16,.16);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--script:"Marck Script","Segoe Print","Bradley Hand",cursive;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body:before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.035;background-image:repeating-radial-gradient(circle at 17% 33%,#000 0 .45px,transparent .55px 3px);background-size:5px 5px;mix-blend-mode:multiply}::selection{background:var(--wine);color:#fff}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit}.skip{position:fixed;left:12px;top:-60px;z-index:999;background:#fff;padding:10px 14px}.skip:focus{top:12px}.section{padding:110px clamp(24px,5vw,82px)}
.masthead{position:fixed;z-index:100;top:0;left:0;right:0;height:78px;padding:0 clamp(20px,4vw,60px);display:flex;align-items:center;gap:30px;color:#fff;mix-blend-mode:difference;transition:background .35s ease,color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}.masthead.is-scrolled{mix-blend-mode:normal;background:rgba(241,237,229,.78);color:var(--ink);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 1px 0 rgba(21,19,16,.08)}.brand{display:flex;flex-direction:column;text-decoration:none;font:600 1.13rem/.85 var(--serif);letter-spacing:.01em;margin-right:auto}.desktop-nav{display:flex;gap:28px}.desktop-nav a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.desktop-nav a:hover{text-decoration:underline;text-underline-offset:5px}.menu-button{display:none;border:0;background:none;color:inherit;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:12px}.mobile-drawer{display:none}
.hero{position:relative;min-height:100vh;min-height:100svh;background:#1c1714;color:#fff;overflow:hidden}.hero-media,.hero-frame,.hero-overlay{position:absolute;inset:0}.hero-frame{margin:0;opacity:0;transform:translate3d(0,var(--hero-shift,0px),0) scale(1.07);filter:saturate(.9) contrast(1.02);transition:opacity 1.25s cubic-bezier(.22,.61,.36,1),transform 8s cubic-bezier(.2,.65,.25,1),filter 1.2s ease}.hero-frame.is-active{opacity:1;transform:translate3d(0,var(--hero-shift,0px),0) scale(1);filter:saturate(1) contrast(1)}.hero-frame:nth-child(1) img{object-position:50% 78%}/* red doors: face + seated pose */
.hero-frame:nth-child(2) img{object-position:50% 48%}/* blue sweatshirt: face centered */
.hero-frame:nth-child(3) img{object-position:50% 12%}/* trench close portrait: protect head */
.hero-frame:nth-child(4) img{object-position:50% 50%}/* playful landscape */.hero-overlay{background:linear-gradient(90deg,rgba(17,12,10,.65) 0%,rgba(17,12,10,.18) 45%,rgba(17,12,10,.25) 100%),linear-gradient(0deg,rgba(13,9,8,.62) 0%,transparent 46%,rgba(13,9,8,.18) 100%)}
.hero-type{position:absolute;z-index:2;font:400 clamp(6rem,16vw,16rem)/.74 var(--serif);letter-spacing:-.075em;color:rgba(255,255,255,.94);white-space:nowrap;pointer-events:none;text-shadow:0 1px 24px rgba(0,0,0,.12);transform:translateZ(0)}.hero-type--first{left:-.025em;top:12vh}.hero-type--second{right:-.035em;bottom:9vh}.hero-content{position:relative;z-index:4;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;width:min(620px,52vw);padding:0 0 9vh clamp(24px,5vw,82px)}.hero-kicker{font-size:.68rem;letter-spacing:.2em;margin:0 0 24px}.hero h1{margin:0;font:400 clamp(2.8rem,5.5vw,6rem)/.94 var(--serif);letter-spacing:-.045em}.hero h1 em,.work h2 em,.contact h2 em{font-weight:400;color:#d9c6b8}.hero-intro{max-width:520px;margin:24px 0 0;font-size:clamp(.98rem,1.3vw,1.18rem);line-height:1.65;color:rgba(255,255,255,.84)}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:30px}.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease}.cta:after{content:"";position:absolute;inset:0;background:currentColor;opacity:.07;transform:translateX(-105%);transition:transform .45s cubic-bezier(.22,.61,.36,1)}.cta:hover:after{transform:translateX(0)}.cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.14)}.cta:active{transform:translateY(0)}.cta--light{background:#f2eee7;color:#171411}.cta--dark{background:#171411;color:#fff}.text-link{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;text-underline-offset:4px}.text-link--light{color:#fff}.signature,.contact-signature{position:absolute;z-index:5;font:400 clamp(1.55rem,2.4vw,2.7rem)/1 var(--script);transform:rotate(-4deg)}.signature{right:4vw;bottom:4vh;color:#fff}.signature span,.contact-signature span{font-family:var(--serif);font-size:.75em}.hero-control-slot{position:absolute;z-index:6;right:4vw;top:50%;transform:translateY(-50%)}.hero-controls{display:grid;gap:11px}.hero-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.8);padding:0;background:transparent;cursor:pointer}.hero-dot.is-active{background:#fff}.scroll-cue{position:absolute;z-index:6;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}.scroll-cue i{display:block;width:1px;height:34px;background:rgba(255,255,255,.62)}
.editorial-label{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start}.editorial-label--light{color:rgba(255,255,255,.62)}.manifest{display:grid;grid-template-columns:55px 1fr;gap:6vw;min-height:84vh;align-items:center}.manifest-copy{max-width:1200px}.manifest-small{font:italic 1.05rem/1.4 var(--serif);color:var(--wine);margin:0 0 28px}.manifest h2{max-width:1120px;margin:0;font:400 clamp(3rem,6.5vw,7.8rem)/.92 var(--serif);letter-spacing:-.055em}.manifest h2 span{color:var(--wine)}.manifest-columns{display:grid;grid-template-columns:1fr 1fr;gap:8vw;max-width:880px;margin:54px 0 0 auto}.manifest-columns p{margin:0;color:#4f4a45;font-size:1rem;line-height:1.75}
.story{display:grid;grid-template-columns:55px 1fr;gap:6vw;background:#ddd5c8}.story-grid{display:grid;grid-template-columns:1.02fr .78fr;grid-template-rows:auto auto;gap:clamp(22px,3vw,48px);align-items:start}.story-copy{padding:4vh 4vw 0 0}.story-note{max-width:520px;border-top:1px solid rgba(21,19,16,.32);padding:18px 0 50px}.story-note--offset{margin-left:16%;margin-top:10vh}.story-note span{font-size:.64rem;letter-spacing:.16em}.story-note h3{margin:24px 0 16px;font:400 clamp(2.4rem,4.6vw,5.4rem)/.92 var(--serif);letter-spacing:-.045em}.story-note p{max-width:430px;color:#504b45;line-height:1.7}.story-media{position:relative;overflow:hidden;background:#cfc6b8}.story-media img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .8s ease}.story-media:hover img{transform:scale(1.035);filter:saturate(1.05)}.story-media--tall{height:min(78vh,920px)}.story-media--wide{height:360px;margin-top:-120px;width:76%;justify-self:end}.story-media--tall img{object-position:50% 45%}.story-media--wide img{object-position:62% 48%}.story-media--quiet img{object-position:50% 35%}.story-media--quiet{height:540px;width:72%;margin-top:30px}.image-caption{position:absolute;left:12px;bottom:10px;background:rgba(244,240,233,.86);padding:5px 8px;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase}
.work{display:grid;grid-template-columns:1.08fr .92fr;gap:8vw;background:#1a1714;color:#fff}.work-intro{position:sticky;top:110px;align-self:start;display:grid;grid-template-columns:55px 1fr;column-gap:4vw}.work-intro .editorial-label{grid-row:1/6}.work h2{grid-column:2;margin:0;font:400 clamp(3.4rem,6vw,7rem)/.9 var(--serif);letter-spacing:-.055em}.work-intro>p{grid-column:2;max-width:580px;margin:30px 0;color:rgba(255,255,255,.68);line-height:1.75}.work-intro>.cta{grid-column:2;justify-self:start}.work-list{border-top:1px solid rgba(255,255,255,.25)}.work-list article{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:34px 0;border-bottom:1px solid rgba(255,255,255,.25)}.work-list article>span{font-size:.64rem;letter-spacing:.15em;color:rgba(255,255,255,.55)}.work-list h3{margin:0;font:400 clamp(1.8rem,3vw,3.2rem)/1 var(--serif);letter-spacing:-.025em}.work-list p{grid-column:2;margin:12px 0 0;color:rgba(255,255,255,.58);font-size:.85rem;line-height:1.55;text-transform:uppercase;letter-spacing:.06em}
.portrait-break{position:relative;height:100vh;min-height:760px;overflow:hidden;background:#000}.portrait-break img{filter:grayscale(1);object-position:50% 12%}.portrait-break:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.03) 45%,rgba(0,0,0,.56))}.portrait-word{position:absolute;z-index:2;left:-.03em;bottom:4vh;color:rgba(255,255,255,.82);font:400 clamp(5rem,14vw,14rem)/.75 var(--serif);letter-spacing:-.075em;white-space:nowrap}.portrait-break blockquote{position:absolute;z-index:3;right:5vw;top:18vh;width:min(430px,35vw);margin:0;color:#fff;font:italic clamp(1.6rem,2.6vw,3rem)/1.22 var(--serif)}
.portfolio{padding-bottom:70px}.portfolio-head{display:grid;grid-template-columns:55px 1fr minmax(220px,330px);gap:5vw;align-items:end;margin-bottom:66px}.portfolio-head h2{margin:0;font:400 clamp(3.2rem,6vw,7rem)/.9 var(--serif);letter-spacing:-.055em}.portfolio-head>p{margin:0;color:var(--muted);line-height:1.6}.mosaic{display:grid;grid-template-columns:1.05fr .75fr .75fr .9fr;grid-template-rows:280px 320px 280px;grid-template-areas:"a b c c" "a d e f" "g g e h";gap:10px;background:var(--paper)}.mosaic figure{margin:0;overflow:hidden;background:#d8d0c4}.mosaic figure img{transition:transform .9s cubic-bezier(.22,.61,.36,1),filter .8s ease}.mosaic figure:hover img{transform:scale(1.035);filter:saturate(1.06)}.mosaic-a{grid-area:a}.mosaic-b{grid-area:b}.mosaic-c{grid-area:c}.mosaic-d{grid-area:d}.mosaic-e{grid-area:e}.mosaic-f{grid-area:f}.mosaic-g{grid-area:g}.mosaic-h{grid-area:h}.mosaic-a img{object-position:50% 42%}.mosaic-b img{object-position:50% 30%}.mosaic-c img{object-position:62% 50%}.mosaic-d img{object-position:50% 35%}.mosaic-e img{object-position:50% 43%}.mosaic-f img{object-position:50% 35%}.mosaic-g img{object-position:50% 45%}.mosaic-h img{object-position:50% 38%}.mosaic-note{text-align:right;color:var(--muted);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin:14px 0 0}
.contact{position:relative;display:grid;grid-template-columns:55px 1fr;gap:6vw;min-height:78vh;background:var(--wine);color:#fff;align-items:center}.contact-inner{display:grid;grid-template-columns:1fr .8fr;gap:7vw;align-items:end}.contact h2{margin:0;font:400 clamp(3.8rem,7.7vw,9rem)/.88 var(--serif);letter-spacing:-.06em}.contact-links{border-top:1px solid rgba(255,255,255,.35)}.contact-links a{display:grid;grid-template-columns:90px 1fr 24px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.35);text-decoration:none}.contact-links span{font-size:.58rem;letter-spacing:.16em;color:rgba(255,255,255,.62)}.contact-links strong{font-size:.92rem;overflow-wrap:anywhere}.contact-links b{font-weight:400}.contact-signature{right:4vw;bottom:4vh;color:#fff}.footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(24px,5vw,82px);font-size:.7rem;color:#68615a;background:#e5ded3}.footer div{display:flex;gap:24px}.footer a{text-underline-offset:3px}

/* v4.1 — progressive editorial motion */
h1,h2,h3,.hero-type,.portrait-word{text-wrap:balance}
a{transition:opacity .2s ease}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.brand{font-weight:500}.brand span:first-child{font-style:italic;font-weight:400}
.desktop-nav a{position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .3s ease}.desktop-nav a:hover{text-decoration:none}.desktop-nav a:hover:after{right:0}
.hero h1 em,.work h2 em,.contact h2 em{font-family:var(--serif);font-style:italic;font-weight:300}
.hero-type,.portrait-word{font-weight:300}.manifest h2,.story-note h3,.work h2,.portfolio-head h2,.contact h2{font-weight:300}
.signature,.contact-signature{font-family:var(--script);font-weight:400;letter-spacing:.01em}
.ticker{overflow:hidden;background:var(--wine);color:#fff;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:15px 0}.ticker-track{width:max-content;display:flex;align-items:center;gap:24px;white-space:nowrap;animation:tickerMove 28s linear infinite;font-size:.68rem;font-weight:600;letter-spacing:.2em}.ticker-track span{padding-left:8px}.ticker-track i{font:400 .8rem/1 var(--serif);opacity:.58}@keyframes tickerMove{to{transform:translateX(-50%)}}
.js-ready [data-reveal]{opacity:0;transform:translateY(34px);clip-path:inset(0 0 10% 0);transition:opacity .85s ease,transform .9s cubic-bezier(.22,.61,.36,1),clip-path 1s cubic-bezier(.22,.61,.36,1)}.js-ready [data-reveal].is-revealed{opacity:1;transform:none;clip-path:inset(0)}
.hero-content>*{animation:heroIn .9s both cubic-bezier(.22,.61,.36,1)}.hero-content>*:nth-child(1){animation-delay:.12s}.hero-content>*:nth-child(2){animation-delay:.22s}.hero-content>*:nth-child(3){animation-delay:.34s}.hero-content>*:nth-child(4){animation-delay:.46s}@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.scroll-cue i{transform-origin:top;animation:scrollPulse 1.8s ease-in-out infinite}@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@supports (font-variation-settings:normal){body{font-optical-sizing:auto}}
@media(max-width:980px){.desktop-nav{display:none}.menu-button{display:block}.mobile-drawer{position:fixed;inset:0;z-index:150;background:#eee8de;color:#171411;padding:90px 28px 36px;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:.25s}.mobile-drawer.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.mobile-drawer a{text-decoration:none;font:400 3.2rem/1.12 var(--serif);padding:12px 0;border-bottom:1px solid rgba(0,0,0,.15)}.mobile-drawer small{margin-top:auto;color:#777}.menu-close{position:absolute;right:18px;top:20px;border:0;background:none;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.hero-type{font-size:clamp(5.5rem,19vw,12rem)}.hero-content{width:min(650px,72vw)}.manifest-columns{margin-left:0}.work{grid-template-columns:1fr}.work-intro{position:relative;top:auto}.portrait-break blockquote{width:min(420px,46vw)}.portfolio-head{grid-template-columns:55px 1fr}.portfolio-head>p{grid-column:2}.contact-inner{grid-template-columns:1fr}.contact-links{max-width:620px}}
@media(max-width:760px){.masthead{height:64px;padding:0 18px}.section{padding:72px 18px}.hero{min-height:100vh;min-height:100dvh}.hero-type--first{left:-.02em;top:12vh}.hero-type--second{right:-.02em;bottom:14vh}.hero-type{font-size:clamp(4.8rem,25vw,7.5rem)}.hero-content{width:auto;min-height:100vh;min-height:100dvh;padding:0 18px 118px;justify-content:flex-end}.hero h1{font-size:clamp(2.75rem,13vw,4.4rem)}.hero-kicker{font-size:.58rem;margin-bottom:14px}.hero-intro{font-size:.9rem;line-height:1.55;max-width:92%}.hero-actions{gap:18px;margin-top:20px}.signature{right:18px;bottom:66px;font-size:1.45rem}.hero-control-slot{right:17px;top:42%}.scroll-cue{display:none}.hero-overlay{background:linear-gradient(0deg,rgba(16,11,9,.8) 0%,rgba(16,11,9,.5) 42%,rgba(16,11,9,.15) 72%,rgba(16,11,9,.26) 100%)}.hero-frame:nth-child(1) img{object-position:50% 58%}.hero-frame:nth-child(2) img{object-position:50% 42%}.hero-frame:nth-child(3) img{object-position:50% 38%}.hero-frame:nth-child(4) img{object-position:48% 50%}.portrait-break img{object-position:50% 40%}.editorial-label{writing-mode:horizontal-tb;transform:none;margin-bottom:24px}.manifest,.story,.contact{display:block}.manifest{min-height:0}.manifest h2{font-size:clamp(2.7rem,13vw,4.6rem)}.manifest-columns{grid-template-columns:1fr;gap:18px;margin-top:34px}.story-grid{display:block}.story-copy{padding:0}.story-note--offset{margin:0}.story-note{padding-bottom:34px}.story-note h3{font-size:clamp(2.4rem,12vw,4.1rem)}.story-media{width:100%;margin:0 0 12px}.story-media--tall{height:70vh}.story-media--wide{height:46vh}.story-media--quiet{height:64vh}.work{display:block}.work-intro{display:block}.work h2{font-size:clamp(3rem,14vw,5rem)}.work-intro>p{margin:24px 0}.work-list{margin-top:55px}.work-list article{padding:28px 0}.portrait-break{height:88vh;min-height:620px}.portrait-break blockquote{left:20px;right:20px;top:auto;bottom:96px;width:auto;font-size:1.65rem}.portrait-word{font-size:23vw;bottom:3vh}.portfolio-head{display:block;margin-bottom:34px}.portfolio-head h2{font-size:clamp(3rem,14vw,4.8rem)}.portfolio-head>p{margin-top:14px}.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:44vw;grid-template-areas:"a b" "a c" "d e" "f e" "g h";gap:7px}.mosaic-a{grid-area:a}.mosaic-b{grid-area:b}.mosaic-c{grid-area:c}.mosaic-d{grid-area:d}.mosaic-e{grid-area:e}.mosaic-f{grid-area:f}.mosaic-g{grid-area:g}.mosaic-h{grid-area:h}.mosaic-note{text-align:left}.contact{min-height:0}.contact h2{font-size:clamp(3.3rem,16vw,5.6rem)}.contact-links{margin-top:48px}.contact-links a{grid-template-columns:74px 1fr 18px;gap:10px}.contact-signature{position:relative;right:auto;bottom:auto;margin:66px 0 0;text-align:right}.footer{display:block;padding:24px 18px}.footer div{display:grid;gap:6px;margin-top:12px}.mobile-drawer a{font-size:2.75rem}}
@media(max-width:390px){.hero-intro{max-width:100%}.hero-actions{display:grid;grid-template-columns:1fr auto}.cta{padding:0 17px}.mosaic{grid-auto-rows:46vw}}
@media(orientation:landscape) and (max-height:620px){.masthead{height:56px}.hero-content{width:56vw;min-height:100vh;padding:56px 0 54px 24px;justify-content:flex-end}.hero-type{font-size:14vw}.hero-type--first{top:13vh}.hero-type--second{bottom:10vh}.hero h1{font-size:7.5vw;line-height:.88}.hero-intro{font-size:.76rem;line-height:1.45;margin-top:12px;max-width:480px}.hero-kicker{margin-bottom:10px}.hero-actions{margin-top:14px}.cta{min-height:40px}.signature{bottom:15px;font-size:1.25rem}.hero-control-slot{top:48%;right:16px}.section{padding:56px 26px}.manifest h2{font-size:7.5vw}.manifest-columns{grid-template-columns:1fr 1fr;gap:5vw;margin-top:24px}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.story-copy{grid-column:1}.story-media--tall{grid-column:2;grid-row:1;height:72vh}.story-media--wide,.story-media--quiet{height:55vh;width:100%;margin:0}.work-list article{padding:22px 0}.portrait-break{height:100vh;min-height:0}.portrait-break blockquote{left:auto;right:28px;bottom:64px;width:36vw;font-size:1.35rem}.portfolio-head{display:grid;grid-template-columns:1fr 1fr;gap:25px}.mosaic{grid-template-columns:repeat(4,1fr);grid-template-rows:34vh 34vh;grid-template-areas:"a b c d" "e f g h"}.contact-inner{grid-template-columns:1.1fr 1fr;align-items:center}.contact h2{font-size:7vw}.contact-links{margin:0}.contact-signature{position:absolute;right:24px;bottom:18px;margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-frame,.story-media img,.mosaic figure img,.mobile-drawer,.cta,.masthead,[data-reveal]{transition:none!important}.ticker-track,.scroll-cue i,.hero-content>*{animation:none!important}.js-ready [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}}

/* v4.2 — repository-aligned creator identity */
.life-system{display:grid;grid-template-columns:55px 1fr;gap:6vw;background:#e8e0d5;color:var(--ink)}
.life-head{max-width:1150px}.life-head>p{margin:0 0 20px;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.life-head h2{margin:0;font:300 clamp(2.7rem,5.8vw,6.6rem)/.92 var(--serif);letter-spacing:-.045em}.life-head h2 em{font-style:italic;font-weight:300;color:var(--wine)}
.life-grid{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid rgba(20,16,13,.2);border-bottom:1px solid rgba(20,16,13,.2)}
.life-grid article{position:relative;padding:26px 24px 34px 0;min-height:250px;border-right:1px solid rgba(20,16,13,.17)}.life-grid article:not(:first-child){padding-left:24px}.life-grid article:last-child{border-right:0}.life-grid article>span{position:absolute;right:18px;top:20px;font:300 2.1rem/1 var(--serif);opacity:.18}.life-grid small{display:block;font-size:.58rem;font-weight:600;letter-spacing:.16em;color:var(--wine);margin-bottom:52px}.life-grid h3{margin:0 0 14px;font:400 clamp(1.8rem,2.6vw,3rem)/.96 var(--serif);letter-spacing:-.035em}.life-grid p{margin:0;color:#5e5750;font-size:.86rem;line-height:1.65}.life-quote{grid-column:2;display:grid;grid-template-columns:180px minmax(0,820px);gap:35px;margin-top:60px;align-items:start}.life-quote>span{font-size:.58rem;letter-spacing:.16em;color:var(--muted);padding-top:12px}.life-quote blockquote{margin:0;font:italic 300 clamp(2rem,4.3vw,4.7rem)/1 var(--serif);letter-spacing:-.035em}
.hero-intro{max-width:690px}.hero-kicker{letter-spacing:.18em}.manifest-small{letter-spacing:.02em}.work-intro>p{max-width:660px}.portrait-break blockquote{font-style:italic}.portfolio{background:#f1ede5}
@media(max-width:1050px){.life-grid{grid-template-columns:1fr 1fr}.life-grid article:nth-child(2){border-right:0}.life-grid article:nth-child(-n+2){border-bottom:1px solid rgba(20,16,13,.17)}.life-grid article:nth-child(3){padding-left:0}.life-quote{grid-template-columns:120px 1fr}}
@media(max-width:760px){.life-system{display:block}.life-grid{display:block;margin-top:44px}.life-grid article,.life-grid article:not(:first-child),.life-grid article:nth-child(3){padding:24px 0 28px;border-right:0;border-bottom:1px solid rgba(20,16,13,.17);min-height:0}.life-grid article:last-child{border-bottom:0}.life-grid small{margin-bottom:28px}.life-grid article>span{right:0}.life-quote{display:block;margin-top:42px}.life-quote>span{display:block;margin-bottom:18px}.life-quote blockquote{font-size:clamp(2.2rem,11vw,3.8rem)}.hero-intro{max-width:100%}}
@media(orientation:landscape) and (max-height:620px){.life-system{display:grid;grid-template-columns:1fr 1fr;gap:30px}.life-system>.editorial-label{grid-column:1/-1}.life-head{grid-column:1}.life-grid{grid-column:2;display:grid;grid-template-columns:1fr 1fr;margin-top:0}.life-grid article,.life-grid article:not(:first-child),.life-grid article:nth-child(3){padding:16px 12px;min-height:0}.life-grid small{margin-bottom:14px}.life-grid h3{font-size:1.45rem}.life-grid p{font-size:.69rem;line-height:1.45}.life-quote{grid-column:1/-1;display:grid;grid-template-columns:130px 1fr;margin-top:10px}.life-quote blockquote{font-size:3.4vw}}

/* v4.3 cache-safe / rendering safety */
html:not(.js-ready) [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
img{background:#d9d1c5;color:transparent}
@media (orientation:landscape) and (max-height:620px){.hero-frame:nth-child(1) img{object-position:50% 78%}.hero-frame:nth-child(2) img{object-position:50% 48%}.hero-frame:nth-child(3) img{object-position:50% 12%}.hero-frame:nth-child(4) img{object-position:50% 50%}.portrait-break img{object-position:50% 12%}}


/* v4.5 semantic crop system: protect faces across portrait/landscape layouts */
.hero-frame picture,.story-media picture{display:block;width:100%;height:100%}
.hero-frame picture img,.story-media picture img{display:block;width:100%;height:100%;object-fit:cover}
.portrait-label{position:absolute;z-index:3;left:5vw;bottom:5vh;color:rgba(255,255,255,.78);font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media (min-width:761px){
  .portrait-break{background:#0d0d0d}
  .portrait-break>img{width:64%;height:100%;object-fit:contain;object-position:left center;background:#0d0d0d}
  .portrait-break:after{background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.96) 100%)}
  .portrait-break blockquote{right:5vw;top:50%;transform:translateY(-50%);width:min(390px,28vw)}
  .portrait-label{left:auto;right:5vw;bottom:10vh}
}
@media(max-width:760px){
  .portrait-break>img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
  .portrait-label{left:20px;bottom:32px;font-size:.55rem}
  .portrait-break blockquote{bottom:112px}
}
@media(orientation:landscape) and (max-height:620px){
  .hero-type{font-size:11vw}
  .hero-type--first{top:10vh}
  .hero-type--second{bottom:4vh}
  .hero-content{width:52vw;padding-bottom:38px}
  .hero h1{font-size:6.5vw}
  .story-media--tall,.story-media--wide,.story-media--quiet{height:58vh}
  .story-media--tall img,.story-media--wide img,.story-media--quiet img{object-position:50% 50%}
  .mosaic-d img{object-position:50% 22%}
  .mosaic-f img{object-position:50% 62%}
  .mosaic-h img{object-position:50% 30%}
  .portrait-break>img{width:58%;object-fit:contain;object-position:left center}
  .portrait-break blockquote{right:28px;top:50%;bottom:auto;transform:translateY(-50%);width:34vw}
  .portrait-label{right:28px;bottom:18px;left:auto}
}


/* ==========================================================
   v4.7 BEGET VISUAL SAFE
   Hero: one decoded portrait asset per slide + semantic focal points.
   This deliberately avoids orientation <source> switching in the hero.
   ========================================================== */

.hero-media,
.hero-frame {
  width: 100%;
  height: 100%;
}

.hero-frame {
  overflow: hidden;
  background: #171310;
}

.hero-frame > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  background: #171310;
}

/* Desktop / laptop: protect the complete head first, then preserve useful body context. */
@media (min-width: 761px) {
  .hero-frame:nth-child(1) > img { object-position: 50% 64% !important; } /* red doors */
  .hero-frame:nth-child(2) > img { object-position: 50% 40% !important; } /* blue look */
  .hero-frame:nth-child(3) > img { object-position: 50% 35% !important; } /* trench */
  .hero-frame:nth-child(4) > img { object-position: 50% 42% !important; } /* playful */

  /* Keep typography clear of the portrait focal area. */
  .hero-type--first { top: 10vh; }
  .hero-type--second { bottom: 7vh; }
  .hero-content { width: min(600px, 46vw); }

  /* Stronger editorial gradient on the text side, almost transparent around the face. */
  .hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(15,10,8,.74) 0%,
        rgba(15,10,8,.46) 27%,
        rgba(15,10,8,.13) 58%,
        rgba(15,10,8,.08) 100%),
      linear-gradient(0deg,
        rgba(12,8,7,.54) 0%,
        rgba(12,8,7,.10) 49%,
        rgba(12,8,7,.15) 100%);
  }
}

/* Phone portrait: keep the face and full head safely inside the viewport. */
@media (max-width: 760px) {
  .hero-frame:nth-child(1) > img { object-position: 50% 52% !important; }
  .hero-frame:nth-child(2) > img { object-position: 50% 43% !important; }
  .hero-frame:nth-child(3) > img { object-position: 50% 40% !important; }
  .hero-frame:nth-child(4) > img { object-position: 50% 48% !important; }
}

/* Short landscape phones/tablets: do not let the top of the head disappear. */
@media (orientation: landscape) and (max-height: 620px) {
  .hero-frame:nth-child(1) > img { object-position: 50% 58% !important; }
  .hero-frame:nth-child(2) > img { object-position: 50% 38% !important; }
  .hero-frame:nth-child(3) > img { object-position: 50% 34% !important; }
  .hero-frame:nth-child(4) > img { object-position: 50% 42% !important; }
}

/* Fallback if an image is still loading: dark cinematic field instead of a grey block. */
img { background-color: #171310; }



/* ==========================================================
   v4.9 BEGET HERO — NO EXTRA DESKTOP ASSETS
   Uses only existing hero-01/02/03/04-v48.jpg files.
   No <img>, no object-fit, no desktop-generated JPG dependencies.
   ========================================================== */

.hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  background: #1a1512 !important;
}

.hero-media,
.hero-frame,
.hero-overlay {
  position: absolute !important;
  inset: 0 !important;
}

.hero-frame {
  margin: 0 !important;
  opacity: 0;
  transform: none !important;
  filter: none !important;
  transition: opacity .75s ease !important;
  background-repeat: no-repeat !important;
  background-color: #1a1512 !important;
}

.hero-frame.is-active {
  opacity: 1;
}

/* Desktop: portrait photos are shown in full height at the right.
   This deliberately prevents head/body cropping. */
@media (min-width: 761px) {
  .hero-frame:nth-child(1) {
    background-image:
      linear-gradient(90deg, #1a1512 0%, #1a1512 37%, rgba(26,21,18,.82) 49%, rgba(26,21,18,.10) 72%, rgba(26,21,18,0) 100%),
      url("assets/hero-04-v48.jpg");
    background-size: 100% 100%, auto 100%;
    background-position: center, right center;
  }

  .hero-frame:nth-child(2) {
    background-image:
      linear-gradient(90deg, #1a1512 0%, #1a1512 37%, rgba(26,21,18,.82) 49%, rgba(26,21,18,.10) 72%, rgba(26,21,18,0) 100%),
      url("assets/hero-03-v48.jpg");
    background-size: 100% 100%, auto 100%;
    background-position: center, right center;
  }

  .hero-frame:nth-child(3) {
    background-image:
      linear-gradient(90deg, #1a1512 0%, #1a1512 37%, rgba(26,21,18,.82) 49%, rgba(26,21,18,.10) 72%, rgba(26,21,18,0) 100%),
      url("assets/hero-01-v48.jpg");
    background-size: 100% 100%, auto 100%;
    background-position: center, right center;
  }

  .hero-frame:nth-child(4) {
    background-image:
      linear-gradient(90deg, rgba(20,15,12,.70) 0%, rgba(20,15,12,.30) 48%, rgba(20,15,12,.12) 100%),
      url("assets/hero-02-v48.jpg");
    background-size: 100% 100%, cover;
    background-position: center, center;
  }

  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(12,8,7,.58) 0%, rgba(12,8,7,.08) 48%, rgba(12,8,7,.15) 100%) !important;
  }
}

/* Mobile portrait: full-bleed photographic hero. */
@media (max-width: 760px) {
  .hero-frame:nth-child(1) { background-image:url("assets/hero-04-v48.jpg"); background-size:cover; background-position:50% 52%; }
  .hero-frame:nth-child(2) { background-image:url("assets/hero-03-v48.jpg"); background-size:cover; background-position:50% 46%; }
  .hero-frame:nth-child(3) { background-image:url("assets/hero-01-v48.jpg"); background-size:cover; background-position:50% 42%; }
  .hero-frame:nth-child(4) { background-image:url("assets/hero-02-v48.jpg"); background-size:cover; background-position:50% 50%; }

  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(15,10,8,.78) 0%, rgba(15,10,8,.38) 44%, rgba(15,10,8,.12) 72%, rgba(15,10,8,.20) 100%) !important;
  }
}

/* Landscape phone/tablet: preserve the portrait subject on the right instead of cropping the head. */
@media (orientation: landscape) and (max-height: 620px) {
  .hero-frame:nth-child(1),
  .hero-frame:nth-child(2),
  .hero-frame:nth-child(3) {
    background-size: 100% 100%, auto 100% !important;
    background-position: center, right center !important;
  }
}

/* There are intentionally no hero <img> elements in v4.9. */
.hero-frame img,
.hero-frame picture {
  display:none !important;
}

/* ==========================================================
   v5.1 — ORIENTATION-AWARE FULL-BLEED HERO SLIDESHOW
   Portrait viewport => portrait assets.
   Landscape viewport => landscape assets.
   No side filler fields; every slide fills the screen.
   ========================================================== */
.hero51{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#171310;
  color:#fff;
}
.hero51__media,.hero51__slide,.hero51__slide picture,.hero51__shade{position:absolute;inset:0}
.hero51__media{z-index:0}
.hero51__slide{margin:0;opacity:0;visibility:hidden;transition:opacity 1s cubic-bezier(.22,.61,.36,1),visibility 1s linear;will-change:opacity}
.hero51__slide.is-active{opacity:1;visibility:visible}
.hero51__slide picture{display:block;width:100%;height:100%}
.hero51__slide img{width:100%!important;height:100%!important;object-fit:cover!important;background:#171310!important}

/* Landscape assets — each focal point protects the face/head on wide screens. */
@media (orientation:landscape){
  .hero51__slide:nth-child(1) img{object-position:64% 47%!important}
  .hero51__slide:nth-child(2) img{object-position:58% 44%!important}
  .hero51__slide:nth-child(3) img{object-position:58% 56%!important}
  .hero51__slide:nth-child(4) img{object-position:58% 45%!important}
}
/* Portrait assets — 2:3 sources mostly crop at the sides, not across the head. */
@media (orientation:portrait){
  .hero51__slide:nth-child(1) img{object-position:50% 52%!important}
  .hero51__slide:nth-child(2) img{object-position:50% 31%!important}
  .hero51__slide:nth-child(3) img{object-position:50% 39%!important}
  .hero51__slide:nth-child(4) img{object-position:50% 34%!important}
}

.hero51__shade{
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,9,7,.73) 0%,rgba(14,9,7,.47) 31%,rgba(14,9,7,.13) 61%,rgba(14,9,7,.09) 100%),
    linear-gradient(0deg,rgba(12,8,7,.64) 0%,rgba(12,8,7,.09) 48%,rgba(12,8,7,.20) 100%);
}
.hero51__display,.hero51__surname{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;font:300 clamp(6.5rem,15vw,15rem)/.72 var(--serif);letter-spacing:-.075em;color:rgba(255,255,255,.92);text-shadow:0 2px 24px rgba(0,0,0,.12)}
.hero51__display{left:-.03em;top:12vh}
.hero51__surname{right:-.04em;bottom:8vh}
.hero51__content{position:relative;z-index:4;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;width:min(620px,50vw);padding:0 0 9vh clamp(24px,5vw,82px)}
.hero51__kicker{margin:0 0 22px;font-size:.67rem;letter-spacing:.2em}
.hero51 h1{margin:0;font:300 clamp(3rem,5.5vw,6rem)/.93 var(--serif);letter-spacing:-.045em;text-wrap:balance}
.hero51 h1 em{font-weight:300;color:#dcc9bb}
.hero51__intro{max-width:560px;margin:24px 0 0;font-size:clamp(.96rem,1.18vw,1.12rem);line-height:1.65;color:rgba(255,255,255,.82)}
.hero51__actions{display:flex;align-items:center;gap:26px;margin-top:30px}
.hero51__signature{position:absolute;z-index:5;right:4vw;bottom:3.8vh;font:400 clamp(1.55rem,2.4vw,2.7rem)/1 var(--script);transform:rotate(-4deg)}
.hero51__signature span{font-family:var(--serif);font-size:.75em}
.hero51__dots{position:absolute;z-index:6;right:4vw;top:50%;transform:translateY(-50%);display:grid;gap:11px}
.hero51__dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.82);padding:0;background:transparent;cursor:pointer;transition:background .2s ease,transform .2s ease}
.hero51__dot:hover{transform:scale(1.18)}
.hero51__dot.is-active{background:#fff}
.hero51__scroll{position:absolute;z-index:6;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase}
.hero51__scroll i{display:block;width:1px;height:34px;background:rgba(255,255,255,.62);transform-origin:top;animation:scrollPulse 1.8s ease-in-out infinite}

/* Head-safe lower photo mosaic. Wide cells use their wide source where available. */
.mosaic picture{display:block;width:100%;height:100%}
.mosaic-b img{object-position:50% 18%!important}
.mosaic-d img{object-position:50% 22%!important}
.mosaic-g img{object-position:50% 22%!important}
.mosaic-h img{object-position:50% 22%!important}
@media (min-width:761px){.mosaic-g img{object-position:50% 50%!important}}

@media(max-width:980px){
  .hero51__content{width:min(650px,68vw)}
  .hero51__display,.hero51__surname{font-size:18vw}
}
@media(max-width:760px){
  .hero51{min-height:100vh;min-height:100dvh}
  .hero51__shade{background:linear-gradient(0deg,rgba(13,8,6,.86) 0%,rgba(13,8,6,.54) 36%,rgba(13,8,6,.10) 67%,rgba(13,8,6,.25) 100%)}
  .hero51__display{top:10vh;left:-.025em;font-size:25vw}
  .hero51__surname{right:-.025em;bottom:15vh;font-size:23vw;color:rgba(255,255,255,.80)}
  .hero51__content{width:auto;min-height:100vh;min-height:100dvh;padding:0 18px 112px;justify-content:flex-end}
  .hero51__kicker{font-size:.56rem;margin-bottom:14px}
  .hero51 h1{font-size:clamp(2.8rem,13vw,4.5rem)}
  .hero51__intro{max-width:94%;font-size:.89rem;line-height:1.56;margin-top:18px}
  .hero51__actions{gap:18px;margin-top:20px;flex-wrap:wrap}
  .hero51__signature{right:18px;bottom:55px;font-size:1.4rem}
  .hero51__dots{right:auto;left:18px;top:auto;bottom:64px;transform:none;display:flex;gap:10px}
  .hero51__dot{width:8px;height:8px}
  .hero51__scroll{display:none}
}
@media(orientation:landscape) and (max-height:620px){
  .hero51__display{top:10vh;font-size:14vw}
  .hero51__surname{bottom:7vh;font-size:13vw}
  .hero51__content{width:58vw;min-height:100vh;padding:56px 0 45px 24px}
  .hero51 h1{font-size:7vw;line-height:.9}
  .hero51__kicker{font-size:.52rem;margin-bottom:9px}
  .hero51__intro{font-size:.72rem;line-height:1.42;margin-top:10px;max-width:470px}
  .hero51__actions{margin-top:12px}.hero51__actions .cta{min-height:40px}
  .hero51__signature{right:18px;bottom:14px;font-size:1.15rem}
  .hero51__dots{right:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero51__slide,.hero51__dot{transition:none!important}
  .hero51__scroll i{animation:none!important}
}


/* ==========================================================
   v5.2 — MOBILE COMPOSITION + EDITORIAL FULLSCREEN GALLERY
   ========================================================== */

/* Mobile hero: remove decorative collisions and keep a clean lower-third hierarchy. */
@media (max-width:760px){
  .hero51{
    min-height:100svh !important;
    height:100svh;
  }

  .hero51__shade{
    background:
      linear-gradient(0deg,
        rgba(12,8,6,.91) 0%,
        rgba(12,8,6,.73) 27%,
        rgba(12,8,6,.42) 47%,
        rgba(12,8,6,.08) 70%,
        rgba(12,8,6,.24) 100%) !important;
  }

  .hero51__display{
    top:11.5svh !important;
    left:-.018em !important;
    font-size:21.5vw !important;
    line-height:.72 !important;
    opacity:.94;
  }

  /* On a phone the second giant word competes with the CTA/signature.
     The brand is already present in the masthead and signature. */
  .hero51__surname{
    display:none !important;
  }

  .hero51__content{
    width:auto !important;
    min-height:100svh !important;
    padding:
      0 20px
      calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content:flex-end !important;
  }

  .hero51__kicker{
    margin-bottom:10px !important;
    font-size:.51rem !important;
    letter-spacing:.17em !important;
  }

  .hero51 h1{
    max-width:94%;
    font-size:clamp(2.55rem,10.9vw,3.35rem) !important;
    line-height:.91 !important;
    letter-spacing:-.045em !important;
  }

  .hero51__intro{
    max-width:100% !important;
    margin-top:13px !important;
    font-size:.82rem !important;
    line-height:1.45 !important;
    color:rgba(255,255,255,.88) !important;
  }

  .hero51__actions{
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    column-gap:18px !important;
    margin-top:15px !important;
  }

  .hero51__actions .cta{
    min-height:47px !important;
    padding:0 20px !important;
    white-space:nowrap;
  }

  .hero51__actions .text-link{
    justify-self:start;
    white-space:nowrap;
    font-size:.73rem;
  }

  .hero51__dots{
    left:20px !important;
    right:auto !important;
    top:auto !important;
    bottom:calc(27px + env(safe-area-inset-bottom, 0px)) !important;
    transform:none !important;
    display:flex !important;
    gap:11px !important;
  }

  .hero51__dot{
    width:8px !important;
    height:8px !important;
  }

  .hero51__signature{
    right:19px !important;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    font-size:1.32rem !important;
    transform:rotate(-3deg) !important;
  }
}

/* Compact iPhones / short browser viewport. */
@media (max-width:390px), (max-width:760px) and (max-height:720px){
  .hero51__content{
    padding-left:17px !important;
    padding-right:17px !important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hero51__display{font-size:20vw !important}
  .hero51 h1{font-size:clamp(2.35rem,10.3vw,3rem) !important}
  .hero51__intro{font-size:.78rem !important;line-height:1.4 !important}
  .hero51__actions{margin-top:12px !important;column-gap:14px !important}
  .hero51__actions .cta{min-height:43px !important;padding:0 16px !important}
  .hero51__actions .text-link{font-size:.68rem}
  .hero51__signature{font-size:1.18rem !important}
}

/* Gallery crop safety. Keep faces closer to the upper part of narrow tiles. */
.mosaic-b img{object-position:50% 13% !important}
.mosaic-d img{object-position:50% 17% !important}
.mosaic-f img{object-position:50% 20% !important}
.mosaic-h img{object-position:50% 18% !important}
@media (min-width:761px){
  .mosaic-b img{object-position:50% 16% !important}
  .mosaic-d img{object-position:50% 20% !important}
  .mosaic-f img{object-position:50% 23% !important}
  .mosaic-h img{object-position:50% 22% !important}
}

/* Gallery affordance: subtle editorial hover, not a large popover. */
.mosaic figure[data-gallery52]{
  position:relative;
  cursor:zoom-in;
  outline:none;
}
.mosaic figure[data-gallery52]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(12,8,6,0) 58%,rgba(12,8,6,.28) 100%);
  opacity:0;
  transition:opacity .35s ease;
}
.mosaic figure[data-gallery52]::after{
  content:"VIEW  ↗";
  position:absolute;
  z-index:3;
  right:14px;
  bottom:13px;
  pointer-events:none;
  color:#fff;
  font:600 .55rem/1 var(--sans);
  letter-spacing:.18em;
  text-shadow:0 1px 12px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1);
}
.mosaic figure[data-gallery52]:hover::before,
.mosaic figure[data-gallery52]:focus-visible::before{opacity:1}
.mosaic figure[data-gallery52]:hover::after,
.mosaic figure[data-gallery52]:focus-visible::after{opacity:1;transform:none}
.mosaic figure[data-gallery52]:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
}

/* Full-screen lightbox. */
body.lightbox52-open{overflow:hidden}

.lightbox52{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  color:#fff;
}
.lightbox52.is-open{display:block}

.lightbox52__backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,10,9,.90);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.lightbox52__stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:84px minmax(0,1fr) 84px;
  align-items:center;
  padding:
    max(22px,env(safe-area-inset-top,0px))
    max(22px,env(safe-area-inset-right,0px))
    max(18px,env(safe-area-inset-bottom,0px))
    max(22px,env(safe-area-inset-left,0px));
}

.lightbox52__figure{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  justify-items:center;
}

.lightbox52__img{
  display:block;
  width:auto !important;
  max-width:100%;
  height:auto !important;
  max-height:calc(100vh - 92px);
  max-height:calc(100dvh - 92px);
  object-fit:contain !important;
  object-position:center !important;
  box-shadow:0 20px 70px rgba(0,0,0,.20);
  transform:scale(.985);
  opacity:0;
  transition:opacity .25s ease,transform .38s cubic-bezier(.22,.61,.36,1);
}
.lightbox52.is-open .lightbox52__img{opacity:1;transform:none}

.lightbox52__meta{
  width:min(100%,880px);
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:0 3px;
  color:rgba(255,255,255,.72);
  font-size:.63rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.lightbox52__counter{white-space:nowrap;color:rgba(255,255,255,.45)}

.lightbox52__close,
.lightbox52__nav{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

.lightbox52__close{
  position:absolute;
  z-index:4;
  top:max(18px,env(safe-area-inset-top,0px));
  right:max(20px,env(safe-area-inset-right,0px));
  width:44px;
  height:44px;
  font:300 2rem/1 var(--sans);
  opacity:.82;
  transition:opacity .2s ease,transform .25s ease;
}
.lightbox52__close:hover{opacity:1;transform:rotate(4deg)}

.lightbox52__nav{
  z-index:3;
  width:56px;
  height:56px;
  justify-self:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  font:300 1.3rem/1 var(--sans);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.lightbox52__nav:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.52);
  transform:scale(1.04);
}

@media (max-width:760px){
  .mosaic figure[data-gallery52]::after{display:none}
  .mosaic figure[data-gallery52]::before{display:none}

  .lightbox52__stage{
    grid-template-columns:1fr;
    padding:
      max(58px,env(safe-area-inset-top,0px))
      14px
      max(18px,env(safe-area-inset-bottom,0px));
  }
  .lightbox52__figure{
    grid-column:1;
    grid-row:1;
    gap:12px;
  }
  .lightbox52__img{
    max-height:calc(100dvh - 118px);
    max-width:100%;
  }
  .lightbox52__meta{
    padding:0 2px;
    font-size:.56rem;
    gap:16px;
  }
  .lightbox52__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    background:rgba(10,8,7,.32);
    border-color:rgba(255,255,255,.22);
  }
  .lightbox52__nav:hover{transform:translateY(-50%)}
  .lightbox52__nav--prev{left:10px}
  .lightbox52__nav--next{right:10px}
  .lightbox52__close{top:max(8px,env(safe-area-inset-top,0px));right:8px}
}

@media (prefers-reduced-motion:reduce){
  .lightbox52__img,
  .mosaic figure[data-gallery52]::before,
  .mosaic figure[data-gallery52]::after{transition:none !important}
}


/* ==========================================================
   v5.3 — ROBUST MOBILE / TOUCH LAYOUT
   Handles normal mobile viewport AND Android "desktop site"
   via .touch-ui, without changing desktop mouse layouts.
   ========================================================== */

/* Normal phone viewport */
@media (max-width:760px) {
  .hero51__surname{display:none!important}
  .hero51__scroll{display:none!important}
  .hero51__display{
    top:12svh!important;
    left:-.02em!important;
    font-size:clamp(5.2rem,21vw,7rem)!important;
    line-height:.72!important;
  }
  .hero51__content{
    width:auto!important;
    min-height:100svh!important;
    padding:0 20px calc(104px + env(safe-area-inset-bottom,0px))!important;
    justify-content:flex-end!important;
  }
  .hero51__kicker{
    margin-bottom:9px!important;
    font-size:.52rem!important;
    letter-spacing:.16em!important;
  }
  .hero51 h1{
    max-width:96%!important;
    font-size:clamp(2.5rem,11vw,3.25rem)!important;
    line-height:.9!important;
    letter-spacing:-.045em!important;
  }
  .hero51__intro{
    max-width:100%!important;
    margin-top:12px!important;
    font-size:.82rem!important;
    line-height:1.43!important;
  }
  .hero51__actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:12px 18px!important;
    margin-top:15px!important;
  }
  .hero51__actions .cta{
    min-height:46px!important;
    padding:0 19px!important;
    white-space:nowrap!important;
  }
  .hero51__actions .text-link{
    white-space:nowrap!important;
    font-size:.72rem!important;
  }
  .hero51__dots{
    left:20px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(26px + env(safe-area-inset-bottom,0px))!important;
    transform:none!important;
    display:flex!important;
    gap:11px!important;
  }
  .hero51__signature{
    right:18px!important;
    bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
    font-size:1.28rem!important;
    transform:rotate(-3deg)!important;
  }
  .mosaic{
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:44vw!important;
    grid-template-rows:none!important;
    grid-template-areas:"a b" "a c" "d e" "f e" "g h"!important;
    gap:7px!important;
  }
  .mosaic [data-gallery53]::after,
  .mosaic [data-gallery53]::before{display:none!important}
}

/* Touch device asking for a desktop-width layout (common Android browser option).
   We still present the intentional mobile composition. */
@media (pointer:coarse) and (min-width:761px) and (max-width:1100px) {
  .hero51__surname{display:none!important}
  .hero51__scroll{display:none!important}
  .hero51__display{
    top:9vh!important;
    left:-.02em!important;
    font-size:clamp(7rem,18vw,11rem)!important;
    line-height:.72!important;
  }
  .hero51__content{
    width:72%!important;
    min-height:100vh!important;
    padding:0 0 11vh 4.5vw!important;
    justify-content:flex-end!important;
  }
  .hero51__kicker{
    margin-bottom:10px!important;
    font-size:1rem!important;
    letter-spacing:.16em!important;
  }
  .hero51 h1{
    max-width:100%!important;
    font-size:clamp(5rem,9.5vw,7.2rem)!important;
    line-height:.89!important;
  }
  .hero51__intro{
    max-width:86%!important;
    margin-top:13px!important;
    font-size:1.45rem!important;
    line-height:1.42!important;
  }
  .hero51__actions{
    display:flex!important;
    align-items:center!important;
    gap:24px!important;
    margin-top:18px!important;
  }
  .hero51__actions .cta{
    min-height:58px!important;
    padding:0 28px!important;
    font-size:1.1rem!important;
  }
  .hero51__actions .text-link{
    font-size:1rem!important;
    white-space:nowrap!important;
  }
  .hero51__dots{
    left:4.5vw!important;
    right:auto!important;
    top:auto!important;
    bottom:3.8vh!important;
    transform:none!important;
    display:flex!important;
    gap:14px!important;
  }
  .hero51__signature{
    right:3.5vw!important;
    bottom:3.1vh!important;
    font-size:2rem!important;
  }
  .section{padding-left:4.5vw!important;padding-right:4.5vw!important}
  .portfolio-head{display:block!important;margin-bottom:38px!important}
  .portfolio-head h2{font-size:clamp(4.5rem,7vw,6.4rem)!important}
  .portfolio-head>p{margin-top:14px!important;max-width:720px!important;font-size:1.25rem!important}
  .editorial-label{writing-mode:horizontal-tb!important;transform:none!important;margin-bottom:22px!important}
  .mosaic{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:none!important;
    grid-auto-rows:42vw!important;
    grid-template-areas:"a b" "a c" "d e" "f e" "g h"!important;
    gap:9px!important;
  }
  .mosaic [data-gallery53]::after,
  .mosaic [data-gallery53]::before{display:none!important}
}

/* JS-added fallback for touch environments where media queries are spoofed. */
.touch-ui .mosaic [data-gallery53]{cursor:zoom-in!important}
.touch-ui .mosaic [data-gallery53]::after,
.touch-ui .mosaic [data-gallery53]::before{display:none!important}

/* Safer face crops in the contact-sheet mosaic. */
.mosaic-b img{object-position:50% 12%!important}
.mosaic-d img{object-position:50% 16%!important}
.mosaic-f img{object-position:50% 18%!important}
.mosaic-h img{object-position:50% 16%!important}

/* ==========================================================
   v5.3 — GALLERY AFFORDANCE
   ========================================================== */
.mosaic [data-gallery53]{
  position:relative;
  cursor:zoom-in;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.mosaic [data-gallery53]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,5,0) 55%,rgba(8,6,5,.32) 100%);
  opacity:0;
  transition:opacity .28s ease;
}
.mosaic [data-gallery53]::after{
  content:"VIEW  ↗";
  position:absolute;
  z-index:3;
  right:14px;
  bottom:13px;
  pointer-events:none;
  color:#fff;
  font:600 .55rem/1 var(--sans);
  letter-spacing:.18em;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .mosaic [data-gallery53]:hover::before{opacity:1}
  .mosaic [data-gallery53]:hover::after{opacity:1;transform:none}
}
.mosaic [data-gallery53]:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.92);
}

/* ==========================================================
   v5.3 — FULLSCREEN EDITORIAL LIGHTBOX
   DOM is generated by interactions-v53.js.
   ========================================================== */
html.kellan-gallery-open,
body.kellan-gallery-open{overflow:hidden!important}

.kg53{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  color:#fff;
  font-family:var(--sans);
}
.kg53.is-open{display:block!important}
.kg53__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,9,8,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.kg53__stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 76px;
  align-items:center;
  gap:6px;
  padding:
    max(22px,env(safe-area-inset-top,0px))
    max(18px,env(safe-area-inset-right,0px))
    max(18px,env(safe-area-inset-bottom,0px))
    max(18px,env(safe-area-inset-left,0px));
}
.kg53__figure{
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:12px;
}
.kg53__img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100dvh - 88px)!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  box-shadow:0 20px 75px rgba(0,0,0,.28);
}
.kg53__meta{
  width:min(100%,920px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:rgba(255,255,255,.70);
  font-size:.63rem;
  line-height:1.3;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.kg53__counter{white-space:nowrap;color:rgba(255,255,255,.45)}
.kg53 button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  color:#fff;
  cursor:pointer;
  font-family:inherit;
}
.kg53__close{
  position:absolute;
  z-index:5;
  top:max(14px,env(safe-area-inset-top,0px));
  right:max(14px,env(safe-area-inset-right,0px));
  width:48px;
  height:48px;
  padding:0;
  background:rgba(20,16,14,.24);
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:50%;
  font-size:30px;
  font-weight:300;
  line-height:44px;
}
.kg53__nav{
  z-index:4;
  width:52px;
  height:52px;
  justify-self:center;
  padding:0;
  background:rgba(20,16,14,.20);
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:50%;
  font-size:20px;
  line-height:48px;
}
@media (max-width:760px), (pointer:coarse) and (max-width:1100px){
  .kg53__stage{
    grid-template-columns:1fr;
    padding:
      max(58px,env(safe-area-inset-top,0px))
      10px
      max(14px,env(safe-area-inset-bottom,0px));
  }
  .kg53__figure{grid-column:1;grid-row:1}
  .kg53__img{max-height:calc(100dvh - 112px)!important}
  .kg53__meta{padding:0 3px;font-size:.56rem}
  .kg53__nav{
    position:absolute;
    top:50%;
    width:42px;
    height:42px;
    transform:translateY(-50%);
    background:rgba(8,6,5,.40);
  }
  .kg53__nav--prev{left:8px}
  .kg53__nav--next{right:8px}
  .kg53__close{top:max(8px,env(safe-area-inset-top,0px));right:8px}
}


/* ==========================================================
   v5.4 — MENU / PORTRAIT BREAK / MOBILE HERO NAME
   ========================================================== */

/* 1) The drawer is a child of a masthead that normally uses mix-blend-mode:difference.
      Disable that compositing only while the menu is open, otherwise the underlying
      hero becomes a photographic negative. */
html.kellan-menu-open,
body.kellan-menu-open{
  overflow:hidden !important;
}

.masthead.menu-open{
  mix-blend-mode:normal !important;
  color:#171411 !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

.masthead.menu-open .brand,
.masthead.menu-open .menu-button{
  position:relative;
  z-index:190;
  color:#171411 !important;
}

.mobile-drawer{
  background:rgba(241,237,229,.72) !important;
  color:#171411 !important;
  -webkit-backdrop-filter:blur(24px) saturate(118%) !important;
  backdrop-filter:blur(24px) saturate(118%) !important;
  box-shadow:inset 0 -1px 0 rgba(20,16,13,.08);
}

.mobile-drawer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 42%,rgba(225,217,205,.16) 100%);
}

.mobile-drawer a{
  color:#171411 !important;
  border-bottom-color:rgba(23,20,17,.18) !important;
}

.mobile-drawer small,
.mobile-drawer .menu-close{
  color:rgba(23,20,17,.72) !important;
}

/* On real touch devices keep the translucency slightly stronger for legibility. */
.touch-ui .mobile-drawer{
  background:rgba(241,237,229,.76) !important;
}

/* 2) Restore KILLAN directly below NASTYA on portrait/touch layouts.
      Same display size, same left edge. Desktop mouse layout remains untouched. */
@media (max-width:760px){
  .hero51__display,
  .hero51__surname{
    left:-.02em !important;
    right:auto !important;
    font-size:clamp(5.2rem,21vw,7rem) !important;
    line-height:.72 !important;
    letter-spacing:-.075em !important;
  }

  .hero51__display{
    top:11.5svh !important;
  }

  .hero51__surname{
    display:block !important;
    top:calc(11.5svh + 15.5vw) !important;
    bottom:auto !important;
    color:rgba(255,255,255,.92) !important;
  }
}

@media (pointer:coarse) and (min-width:761px) and (max-width:1100px){
  .hero51__display,
  .hero51__surname{
    left:-.02em !important;
    right:auto !important;
    font-size:clamp(7rem,18vw,11rem) !important;
    line-height:.72 !important;
    letter-spacing:-.075em !important;
  }

  .hero51__display{
    top:9vh !important;
  }

  .hero51__surname{
    display:block !important;
    top:calc(9vh + 13.2vw) !important;
    bottom:auto !important;
    color:rgba(255,255,255,.92) !important;
  }
}

/* 3) The monochrome portrait section must read as a full-screen editorial image
      on phones, including Android browsers that expose a 761–1100px CSS viewport. */
@media (max-width:760px){
  .portrait-break{
    height:100svh !important;
    min-height:0 !important;
  }

  .portrait-break>img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 42% !important;
  }

  .portrait-break:after{
    background:
      linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.04) 66%,rgba(0,0,0,.16) 100%) !important;
  }
}

@media (pointer:coarse) and (min-width:761px) and (max-width:1100px){
  .portrait-break{
    height:100svh !important;
    min-height:0 !important;
  }

  .portrait-break>img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 42% !important;
    background:#0d0d0d !important;
  }

  .portrait-break:after{
    background:
      linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.19) 37%,rgba(0,0,0,.03) 67%,rgba(0,0,0,.15) 100%) !important;
  }

  .portrait-break blockquote{
    left:4.5vw !important;
    right:4.5vw !important;
    top:auto !important;
    bottom:10vh !important;
    width:auto !important;
    transform:none !important;
    font-size:clamp(2.35rem,5.6vw,4rem) !important;
    line-height:1.04 !important;
  }

  .portrait-label{
    left:4.5vw !important;
    right:auto !important;
    bottom:3.5vh !important;
  }
}

@media (max-width:390px), (max-width:760px) and (max-height:720px){
  .hero51__display,
  .hero51__surname{
    font-size:clamp(4.9rem,20vw,6.4rem) !important;
  }
  .hero51__surname{
    top:calc(11.5svh + 14.8vw) !important;
  }
}