/* TOM — Personal Portfolio V1 | Derived in spirit, not structure, from TOM */
:root{--bg:#0b0b0b;--bg2:#151515;--paper:#eeeae3;--fg:#eeeae3;--muted:#92918f;--line:rgba(238,234,227,.19);--accent:#d95449;--gutter:clamp(22px,5.2vw,94px);--sans:'DM Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.dialog-open,body.menu-open{overflow:hidden}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.skip-link{position:fixed;top:-70px;left:16px;z-index:900;padding:12px 16px;background:#fff;color:#000}.skip-link:focus{top:16px}
.page-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:400;pointer-events:none}.page-progress span{display:block;width:0;height:100%;background:var(--accent);transition:width .12s linear}
.section-shell{padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow,.edition{font-size:10px;font-weight:700;letter-spacing:.2em;line-height:1.5}
.eyebrow{margin:0}.red-dot{display:inline-block;width:7px;height:7px;margin-right:11px;border-radius:50%;background:var(--accent);vertical-align:1px}
.site-header{position:relative;z-index:60;min-height:88px;padding:0 var(--gutter);display:flex;align-items:center;gap:clamp(20px,3vw,65px);border-bottom:1px solid var(--line);background:rgba(11,11,11,.95)}
.wordmark{font-family:var(--serif);font-size:47px;letter-spacing:-.065em;line-height:1}.wordmark span,.footer-brand span{color:var(--accent)}
.nav-subtitle{color:#91908e;font-size:8px;line-height:1.7;letter-spacing:.17em;white-space:nowrap}.nav-subtitle strong{font-weight:500;color:#d5d0ca}
.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.8vw,46px)}
.desktop-nav a{font-size:10px;font-weight:700;letter-spacing:.13em;white-space:nowrap;transition:color .25s ease}.desktop-nav a:hover{color:var(--accent)}.desktop-nav a span{font-size:8px;color:#646361;vertical-align:top;padding-left:3px}
.nav-contact{font-size:10px;font-weight:700;letter-spacing:.14em;padding:14px 17px;border:1px solid #74716d;white-space:nowrap;transition:background .3s,color .3s}.nav-contact:hover{background:var(--paper);color:#111}.nav-contact span{margin-left:18px;font-size:15px}
.menu-toggle{display:none;border:0;background:none;color:var(--fg);width:40px;height:42px;cursor:pointer;justify-content:center;flex-direction:column;gap:6px}.menu-toggle span{height:1px;width:26px;background:var(--fg);transition:transform .2s ease}.menu-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-open .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-nav{position:fixed;z-index:55;inset:70px 0 0;background:#0b0b0b;padding:40px var(--gutter);display:flex;flex-direction:column;gap:0}.mobile-nav[hidden]{display:none}.mobile-nav a{font-family:var(--serif);font-size:clamp(42px,8vw,64px);padding:17px 0;border-bottom:1px solid var(--line)}.mobile-nav a span{float:right;font-family:var(--sans);font-size:13px;color:var(--accent);margin-top:20px}
/* HERO */
.hero{position:relative;isolation:isolate;min-height:min(930px,calc(100svh - 88px));display:flex;flex-direction:column;padding-top:32px;overflow:hidden;background:radial-gradient(ellipse 60% 65% at 74% 44%,#1e1c1b 0%,#10100f 62%,#0b0b0b 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;z-index:-1;background-image:linear-gradient(90deg,transparent 50%,rgba(255,255,255,.05) 50%);background-size:3px 3px}
.hero-orbit{position:absolute;z-index:-1;width:52vw;height:52vw;border:1px solid rgba(255,255,255,.05);border-radius:50%;left:47%;top:4%;transform:translate(-10%,0)}.hero-orbit::after{content:"";position:absolute;inset:15%;border:1px solid rgba(255,255,255,.035);border-radius:50%}
.hero-topline,.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#a49e9a}.hero-topline .eyebrow{color:#a9a6a2}.edition{color:#8c8986}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.72fr);align-items:center;gap:4vw;flex:1;padding-top:clamp(38px,6vh,65px);padding-bottom:48px}
.hero-copy{position:relative;z-index:2}.hero-prelude{font-size:10px;letter-spacing:.32em;font-weight:700;color:#a6a09a;margin:0 0 28px}
.hero h1{font-family:var(--sans);font-weight:600;letter-spacing:-.075em;line-height:.98;font-size:clamp(60px,7vw,132px);margin:0;white-space:nowrap}.hero h1 em,.section-heading h2 em,.about-copy h2 em,.contact h2 em{font-family:var(--serif);font-size:1.075em;font-weight:400;letter-spacing:-.056em}.hero h1 .punct{color:var(--accent)}
.hero-intro{font-size:clamp(14px,1.05vw,17px);line-height:1.85;max-width:470px;margin:36px 0 31px;color:#aca8a4}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.primary-action{display:inline-flex;align-items:center;justify-content:space-between;gap:39px;border:1px solid #e5dfd7;padding:19px 22px;font-size:10px;font-weight:700;letter-spacing:.15em;white-space:nowrap;transition:background .25s ease,color .25s ease}.primary-action span{font-size:16px}.primary-action:hover{background:#e5dfd7;color:#111}
.text-action{font-size:10px;font-weight:700;letter-spacing:.1em;border-bottom:1px solid #777;padding:13px 0;transition:color .25s,border-color .25s}.text-action:hover{color:var(--accent);border-color:var(--accent)}.text-action span{padding-left:13px}
.hero-portrait{position:relative;justify-self:end;align-self:center;width:min(100%,440px);margin:0 0 0 12px}.portrait-frame{position:relative;height:clamp(360px,39vw,570px);overflow:hidden;background:#ece9e4}.portrait-frame::after{content:"";position:absolute;inset:0;border:12px solid rgba(0,0,0,.025);pointer-events:none}.portrait-frame img{height:100%;width:100%;object-fit:cover;object-position:51% 14%;filter:grayscale(1) contrast(1.06)}.portrait-mark{position:absolute;font-family:var(--serif);font-size:35px;bottom:16px;right:23px;color:#111}.portrait-mark span{color:var(--accent)}.hero-portrait figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:8px;font-weight:700;color:#898783;letter-spacing:.14em}
.hero-bottom{margin-top:auto;border-top:1px solid var(--line);height:69px;font-size:9px;font-weight:700;letter-spacing:.15em}.hero-bottom a{display:flex;align-items:center;gap:16px;transition:color .25s}.hero-bottom a:hover{color:var(--paper)}.scroll-arrow{border:1px solid #555;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:18px}
/* TICKER */
.manifesto-ticker{height:79px;background:var(--paper);color:#161514;display:flex;align-items:center;overflow:hidden}.ticker-track{white-space:nowrap;width:max-content;font-weight:700;font-size:13px;letter-spacing:.3em;animation:ticker 36s linear infinite}.ticker-track span{color:#c6453b;font-size:18px;margin:0 46px}@keyframes ticker{to{transform:translateX(-50%)}}
/* GENERIC HEADINGS */
.work,.practice{padding-top:clamp(94px,10vw,158px);padding-bottom:clamp(90px,11vw,155px)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:60px}.section-heading .eyebrow{color:#a5a19b}.section-heading h2{font-size:clamp(61px,7.3vw,124px);line-height:.94;letter-spacing:-.072em;font-weight:600;margin:19px 0 0}.section-heading>p{max-width:340px;font-size:14px;line-height:1.85;color:#aaa6a2;margin:0 0 9px}
/* PROJECTS */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;row-gap:68px}.project{min-width:0}.project-feature{grid-column:1/-1}.project-hit{display:block;border:0;background:transparent;color:inherit;text-align:left;padding:0;width:100%;cursor:pointer}.project-art{position:relative;width:100%;height:clamp(270px,30vw,475px);overflow:hidden;background:#171717}.project-feature .project-art{height:clamp(350px,43vw,660px)}.picture-art img{height:100%;width:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .5s ease}.project-hit:hover .picture-art img,.project-hit:focus-visible .picture-art img{transform:scale(1.045)}
.picture-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.14),transparent 45%)}.coffee-art img{object-position:center 50%}
.project-corner{position:absolute;left:22px;top:21px;font-size:9px;font-weight:700;letter-spacing:.2em;color:white;padding:10px 12px;background:rgba(0,0,0,.48);backdrop-filter:blur(8px)}
.project-info{padding:21px 1px 0;display:flex;justify-content:space-between;gap:22px}.project-tag{margin:0 0 12px;font-size:9px;font-weight:700;letter-spacing:.16em;color:#898580}.project-info h3{font-size:clamp(24px,2.15vw,37px);letter-spacing:-.043em;line-height:1.2;font-weight:500;margin:0 0 8px}.project-info h3 span{font-family:var(--serif);font-style:italic;color:#b5afa7}.project-info p:last-child{font-size:13px;color:#9c9893;line-height:1.6;margin:0}.project-arrow{display:grid;place-items:center;min-width:40px;width:40px;height:40px;border:1px solid #5e5a56;font-size:21px;transition:transform .25s,background .25s,color .25s}.project-hit:hover .project-arrow{background:var(--paper);color:#111;transform:translate(2px,-2px)}
.vsnt-art{display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at 55% 47%,#2e2d2b 0%,#141414 45%,#070707 100%)}.vsnt-art::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 47%,rgba(255,255,255,.09) 50%,transparent 53%);transform:translateX(-60%);transition:transform 1s ease}.project-hit:hover .vsnt-art::before{transform:translateX(65%)}.vsnt-rings{position:absolute;width:60%;aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 85px rgba(255,255,255,.013),0 0 0 175px rgba(255,255,255,.009)}.vsnt-art-logo{position:relative;display:flex;align-items:center;gap:27px;color:#f3eee9;font-weight:700}.vsnt-art-logo>span{font-family:var(--serif);font-size:clamp(90px,13vw,210px);font-weight:400;letter-spacing:-.09em;line-height:.9;border-right:1px solid rgba(255,255,255,.45);padding-right:35px}.vsnt-art-logo strong{font-size:clamp(70px,12vw,190px);letter-spacing:-.09em;line-height:.9}.red-punct{color:var(--accent)}.vsnt-art-bottom{position:absolute;bottom:25px;left:32px;right:32px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em;font-weight:700;color:#aaa}.vsnt-art-bottom span{color:var(--accent);font-size:19px}
.fka-art{background:radial-gradient(ellipse at 75% 35%,rgba(154,135,56,.35),transparent 53%),#12251b;padding:clamp(22px,3vw,50px);display:flex;flex-direction:column;justify-content:center}.fka-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:65px 65px;opacity:.45}.fka-small,.fka-bottom{position:relative;z-index:1;font-size:9px;letter-spacing:.2em;font-weight:700;color:#d1c08b}.fka-small{margin-bottom:24px}.fka-art strong{position:relative;z-index:1;color:#f5f0de;font-size:clamp(42px,5.1vw,79px);line-height:.92;letter-spacing:-.055em}.fka-art strong span{color:#c9a64a}.fka-bottom{margin-top:27px;color:#bdb8aa}
.work-end{margin-top:84px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:27px}.work-end p{font-size:9px;color:#85817c;letter-spacing:.2em}.work-end a{border-bottom:1px solid #aaa;font-size:10px;font-weight:700;letter-spacing:.11em;padding:11px 0}.work-end a span{padding-left:16px;color:var(--accent)}
/* INTERLUDE */
.interlude{position:relative;height:clamp(450px,54vw,790px);overflow:hidden;background:#141414;display:flex;align-items:center;justify-content:center;text-align:center}.interlude-image{position:absolute;inset:0}.interlude-image img{width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:grayscale(1) brightness(.53)}.interlude-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.14),rgba(0,0,0,.4))}.interlude-copy{position:relative;padding:30px}.interlude-copy .eyebrow{color:#d7d3cf}.interlude blockquote{font-size:clamp(38px,5.5vw,88px);line-height:1.11;font-weight:500;letter-spacing:-.055em;margin:32px 0 50px}.interlude blockquote em{font-family:var(--serif);font-size:1.12em;font-weight:400}.interlude-index{font-size:9px;font-weight:700;letter-spacing:.2em;color:#c8c1bb}
/* ABOUT */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(35px,9vw,148px);align-items:center;padding-top:clamp(110px,12vw,190px);padding-bottom:clamp(110px,12vw,190px)}
.about-image{position:relative;justify-self:start;width:min(100%,515px);height:clamp(470px,49vw,720px);background:#eae6df;overflow:hidden}.about-image img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;filter:grayscale(1) contrast(1.05)}.about-image-label{position:absolute;left:0;bottom:0;background:#0b0b0b;color:#ddd7d0;padding:19px 24px;font-size:9px;font-weight:700;letter-spacing:.17em;line-height:1.8}
.about-copy .eyebrow{color:#a8a39c}.about-copy h2{font-size:clamp(52px,5.7vw,93px);line-height:1;letter-spacing:-.07em;margin:29px 0 38px;font-weight:600}.about-copy h2 em{font-size:1.09em}.about-lead{font-size:clamp(17px,1.55vw,24px)!important;color:#e1ddd6!important;line-height:1.62!important;margin-bottom:26px!important}.about-copy>p:not(.eyebrow){font-size:14px;line-height:1.92;max-width:610px;margin:0 0 18px;color:#a9a5a0}.about-signoff{margin-top:40px;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:18px}.signature{font-family:var(--serif);font-style:italic;font-size:66px;line-height:1}.about-signoff>span:last-child{font-size:9px;line-height:1.9;color:#88847f;letter-spacing:.12em;text-align:right}
/* PRACTICE */
.practice{background:#121211}.practice-list{border-top:1px solid var(--line)}.practice-item{display:grid;grid-template-columns:56px minmax(200px,1.2fr) minmax(190px,.8fr) 34px;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding:36px 0;transition:padding .3s ease,background .3s ease}.practice-item:hover{padding-left:12px;background:rgba(255,255,255,.015)}.practice-no{font-size:10px;letter-spacing:.12em;color:var(--accent)}.practice-item h3{font-size:clamp(20px,2.1vw,34px);letter-spacing:-.035em;line-height:1.1;font-weight:600;margin:0}.practice-item p{font-size:13px;line-height:1.65;color:#95918c;margin:0;max-width:320px}.practice-glyph{font-size:24px;color:#aaa}
/* IMAGE RUN */
.image-run{padding:clamp(85px,9vw,140px) var(--gutter);background:#0b0b0b}.image-run-heading{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.18em;color:#a39e99;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px}.image-run-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.image-run figure{margin:0;min-width:0}.image-run img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(.2);transition:filter .35s ease}.image-run figure:hover img{filter:grayscale(0)}.image-run figcaption{padding-top:14px;font-size:9px;letter-spacing:.15em;color:#8d8984}
/* CONTACT */
.contact{background:#eae6df;color:#111;padding-top:clamp(90px,11vw,180px);padding-bottom:clamp(90px,11vw,160px)}.contact-top{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:25px}.contact-top .eyebrow{color:#49413d}.contact-top>span{font-size:9px;letter-spacing:.2em;font-weight:700}.contact h2{font-size:clamp(76px,12.2vw,225px);line-height:.9;letter-spacing:-.087em;font-weight:600;margin:68px 0 85px}.contact h2 em{font-size:1em}.contact h2>span{color:var(--accent)}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:35px;border-top:1px solid rgba(0,0,0,.2);padding-top:38px}.contact-bottom>p{font-size:16px;line-height:1.7;max-width:390px;margin:0;color:#504b47}.contact-email{font-size:clamp(23px,3vw,46px);letter-spacing:-.055em;font-weight:600;line-height:1.1;display:inline-block;border-bottom:1px solid #141414;padding-bottom:11px}.contact-email>span{font-size:26px;margin-left:24px;color:var(--accent)}.contact-email small{display:block;margin-top:10px;font-size:12px;letter-spacing:.02em;font-weight:400;color:#555}
.footer{padding:36px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.footer-brand{font-family:var(--serif);font-size:38px;letter-spacing:-.07em;line-height:1}.footer>span{font-size:9px;letter-spacing:.14em;color:#8c8781}.footer>div{display:flex;gap:24px;font-size:10px;letter-spacing:.11em;font-weight:700}.footer>div a:hover{color:var(--accent)}
/* PROJECT CASE STUDY DIALOG */
.project-dialog{padding:0;border:1px solid #67625d;width:min(790px,calc(100% - 32px));max-height:min(88vh,890px);background:#111;color:#efebe5;box-shadow:0 25px 120px rgba(0,0,0,.75)}.project-dialog::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(10px)}.dialog-inner{padding:clamp(24px,5vw,56px);max-height:88vh;overflow:auto}.dialog-close{display:flex;justify-content:end;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:#d8d1ca;cursor:pointer;font-size:10px;letter-spacing:.15em;font-weight:700;margin-bottom:45px}.dialog-close span{font-size:26px;font-weight:400}.dialog-inner .eyebrow{color:var(--accent)}.dialog-inner h2{font-size:clamp(45px,6vw,79px);line-height:.95;letter-spacing:-.067em;font-weight:600;margin:16px 0 13px}.dialog-status{color:#a29b94;font-size:12px;margin-bottom:25px;text-transform:uppercase;letter-spacing:.1em}.dialog-picture{height:clamp(180px,29vw,350px);background:#1c1c1c;overflow:hidden}.dialog-picture img{width:100%;height:100%;object-fit:cover}.dialog-picture .dialog-graphic{height:100%;display:grid;place-items:center;font-size:clamp(50px,7vw,94px);font-weight:700;letter-spacing:-.08em;background:radial-gradient(ellipse,#242424,#101010)}.dialog-picture .dialog-graphic.fka{background:radial-gradient(ellipse,#2e5335,#17291c)}.dialog-description{font-size:clamp(15px,1.5vw,19px);line-height:1.8;color:#d0cac3;margin:27px 0 30px}.dialog-bottom{border-top:1px solid var(--line);padding-top:21px;display:flex;justify-content:space-between;align-items:center;gap:20px}.dialog-bottom>span{font-size:10px;color:#918a84;letter-spacing:.1em}.dialog-bottom>a{font-size:11px;font-weight:700;letter-spacing:.12em;border-bottom:1px solid #aaa;padding-bottom:8px}.dialog-bottom>a span{margin-left:16px;color:var(--accent)}
/* REVEAL */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.18,.65,.2,1)}.js [data-reveal].is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1200px){.nav-subtitle{display:none}.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(270px,.85fr)}.hero h1{font-size:clamp(64px,7vw,103px)}.hero-portrait{width:min(100%,380px)}.portrait-frame{height:510px}}
@media(max-width:900px){.site-header{min-height:74px}.desktop-nav{gap:18px}.desktop-nav a span{display:none}.nav-contact{padding:12px}.nav-contact span{margin-left:8px}.hero{min-height:0}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);gap:22px;padding-top:100px;padding-bottom:95px}.hero h1{font-size:clamp(50px,7.8vw,78px)}.hero-intro{margin:26px 0 27px}.hero-portrait{width:min(100%,300px)}.portrait-frame{height:430px}.hero-actions{gap:18px}.primary-action{gap:18px;padding:16px 16px}.text-action{font-size:9px}.about{gap:50px}.about-copy h2{font-size:clamp(52px,5.8vw,76px)}.about-image{height:600px}.practice-item{grid-template-columns:35px 1fr minmax(130px,.7fr) 24px;gap:14px}}
@media(max-width:720px){:root{--gutter:23px}.site-header{height:70px;min-height:70px}.wordmark{font-size:40px}.desktop-nav,.nav-contact{display:none}.menu-toggle{display:flex;margin-left:auto}.hero{padding-top:24px;min-height:0}.hero-topline .eyebrow{font-size:8px}.edition{font-size:8px}.hero-grid{grid-template-columns:1fr;gap:40px;padding:75px 0 50px}.hero h1{font-size:clamp(60px,13.4vw,95px);white-space:normal}.hero-prelude{font-size:9px;margin-bottom:22px}.hero-intro{font-size:14px;max-width:390px;margin:30px 0}.hero-portrait{width:min(84%,380px);justify-self:end;margin-right:0}.portrait-frame{height:clamp(340px,105vw,540px)}.hero-portrait figcaption{font-size:7px;flex-wrap:wrap}.hero-bottom{font-size:8px}.hero-bottom>span{max-width:140px;line-height:1.6}.manifesto-ticker{height:65px}.ticker-track{font-size:10px}.ticker-track span{margin:0 25px}.section-heading{display:block;margin-bottom:38px}.section-heading h2{font-size:clamp(67px,13vw,108px)}.section-heading>p{margin-top:25px;font-size:13px}.work,.practice{padding-top:105px;padding-bottom:100px}.project-grid{grid-template-columns:1fr;gap:46px}.project-feature{grid-column:auto}.project-art,.project-feature .project-art{height:clamp(280px,75vw,430px)}.vsnt-art-logo{gap:12px}.vsnt-art-logo>span{font-size:clamp(70px,12vw,110px);padding-right:14px}.vsnt-art-logo strong{font-size:clamp(55px,11vw,105px)}.vsnt-art-bottom{font-size:8px;left:18px;right:18px;bottom:18px}.project-info h3{font-size:29px}.work-end{margin-top:58px;display:block}.work-end a{display:inline-block;margin-top:13px;font-size:9px}.interlude{height:540px}.interlude blockquote{font-size:clamp(42px,8vw,68px)}.about{grid-template-columns:1fr;gap:60px;padding-top:110px;padding-bottom:120px}.about-image{width:min(85%,490px);height:clamp(400px,115vw,610px)}.about-copy h2{font-size:clamp(57px,10.5vw,83px)}.about-lead{font-size:18px!important}.practice-item{grid-template-columns:34px 1fr 30px;row-gap:11px;padding:27px 0}.practice-item p{grid-column:2;grid-row:2;max-width:100%;font-size:12px}.practice-glyph{grid-column:3;grid-row:1}.practice-item h3{font-size:clamp(22px,5.4vw,32px)}.image-run{padding-top:100px;padding-bottom:105px}.image-run-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.image-run figure:last-child{grid-column:1/-1}.image-run figure:last-child img{aspect-ratio:1.65}.image-run figcaption{font-size:8px}.contact h2{font-size:clamp(68px,12vw,122px);margin:70px 0 90px}.contact-top>span{display:none}.contact-bottom{display:block}.contact-bottom>p{font-size:14px}.contact-email{margin-top:34px}.footer{padding-top:34px;padding-bottom:34px;justify-content:space-between}.footer>span{flex-basis:55%;line-height:1.6}.footer>span:last-child{flex-basis:100%}}
@media(max-width:420px){.hero-topline .eyebrow{letter-spacing:.09em}.edition{display:none}.hero h1{font-size:clamp(58px,14.5vw,72px)}.hero-actions{gap:16px}.text-action{padding:12px 0}.portrait-frame{height:470px}.about-image{width:92%}.contact h2{font-size:clamp(64px,13vw,85px)}.dialog-bottom{align-items:start;flex-direction:column}.fka-art strong{font-size:47px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.js [data-reveal]{opacity:1!important;transform:none!important}.ticker-track{transform:none!important}}


/* ================================================================
   TOM PERSONAL V2 — WHITE CINEMATIC HERO
   All changes are scoped to the hero and top navigation only.
   Original image (IMG2) is used without altering facial features.
   ================================================================ */
:root { --hero-paper:#f7f7f5; --hero-ink:#101010; --hero-muted:#5f5e5b; }
.site-header {
  background:rgba(248,248,246,.98); color:var(--hero-ink);
  border-bottom:1px solid rgba(12,12,12,.15);
}
.site-header .nav-subtitle{color:#73716e}
.site-header .nav-subtitle strong{color:#2e2c2a}
.site-header .desktop-nav a span{color:#8f8e8a}
.site-header .desktop-nav a:hover{color:var(--accent)}
.site-header .nav-contact{border-color:rgba(12,12,12,.55)}
.site-header .nav-contact:hover{background:#171717;color:#fff}
.site-header .menu-toggle{color:#111}
.site-header .menu-toggle span{background:#111}
.hero {
  background:var(--hero-paper); color:var(--hero-ink);
  min-height:clamp(740px,calc(100svh - 88px),950px);
  overflow:hidden; isolation:isolate;
  padding-top:31px;
}
/* Background film never blocks clicks; blur imitates TOM's cinematic treatment. */
.hero-motion{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-motion-video{
  position:absolute;left:-12%;top:-12%;width:124%;height:124%;
  object-fit:cover;object-position:center;
  filter:grayscale(1) blur(44px) contrast(1.15) brightness(1.22);
  opacity:.36;mix-blend-mode:multiply;transform:scale(1.02);
}
.hero-motion::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(248,248,246,.80) 0%,rgba(248,248,246,.62) 37%,rgba(248,248,246,.4) 100%),
             linear-gradient(0deg,rgba(248,248,246,.78) 0%,transparent 27%,transparent 79%,rgba(248,248,246,.56));
}
.hero::after{
  z-index:1;opacity:.24;inset:0;
  background-image:linear-gradient(90deg,transparent 50%,rgba(20,20,20,.017) 50%);
  background-size:4px 4px;
}
.hero-orbit{z-index:1;border-color:rgba(25,25,25,.075);left:49%;width:60vw;height:60vw;top:0}
.hero-orbit::after{border-color:rgba(25,25,25,.04)}
.hero-topline,.hero-grid,.hero-bottom{position:relative;z-index:3}
.hero-topline{color:#595854}
.hero-topline .eyebrow{color:#454442}
.hero-topline .edition{color:#686762}
.hero-grid{
  display:block;flex:1;position:relative;
  min-height:clamp(610px,calc(100svh - 216px),750px);
  padding-top:clamp(95px,12vh,155px);padding-bottom:72px;
}
.hero-copy{position:relative;z-index:4;width:100%;max-width:none}
.hero-prelude{margin-bottom:30px;color:#555450;font-size:10px}
.hero h1{
  color:#101011;position:relative;z-index:5;width:max-content;max-width:100%;
  font-weight:650;letter-spacing:-.076em;line-height:.945;
  font-size:clamp(74px,7.7vw,146px);white-space:nowrap;
}
.hero h1 em{color:#252421;font-weight:400}
.hero-intro{color:#3b3b39;font-size:clamp(14px,1.05vw,17px);max-width:380px;line-height:1.8;margin:39px 0 32px}
.hero-actions{position:relative;z-index:8}
.hero .primary-action{background:#111;color:#fff;border-color:#111}
.hero .primary-action:hover{background:#333;border-color:#333;color:#fff}
.hero .text-action{border-color:#74736f;color:#171717}
.hero .text-action:hover{color:var(--accent);border-color:var(--accent)}
.hero-portrait{
  position:absolute;z-index:2;right:-4%;bottom:-68px;
  width:clamp(510px,48vw,760px);height:clamp(630px,55vw,825px);
  margin:0;pointer-events:none;
}
.hero-portrait .portrait-frame{background:transparent;border:none;height:100%;overflow:visible}
.hero-portrait .portrait-frame::after{
  content:"";position:absolute;z-index:2;inset:-1px;border:0;pointer-events:none;
  background:
    linear-gradient(90deg,#f7f7f5 0%,rgba(247,247,245,.75) 12%,transparent 34%,transparent 82%,#f7f7f5 100%),
    linear-gradient(180deg,#f7f7f5 0%,rgba(247,247,245,.55) 7%,transparent 18%,transparent 84%,#f7f7f5 100%);
}
.hero-portrait .portrait-frame img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:grayscale(1) brightness(1.14) contrast(1.11);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 83%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 83%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 83%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 83%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.hero-portrait figcaption{
  display:flex;position:absolute;bottom:33px;right:0;gap:18px;
  font-size:9px;letter-spacing:.14em;color:#3e3d3a;
}
.hero-bottom{border-top:1px solid rgba(20,20,20,.20);color:#4a4945}
.hero-bottom a:hover{color:var(--accent)}
.hero-bottom .scroll-arrow{border-color:#888;color:#222}
/* Hero-only visual treatment returns to TOM-inspired dark work sections below. */
@media(min-width:1800px){.hero h1{font-size:clamp(108px,7.5vw,150px)}.hero-portrait{right:0;width:min(47vw,820px)}}
@media(max-width:1200px){
  .hero-grid{min-height:695px;padding-top:112px}
  .hero h1{font-size:clamp(67px,7.35vw,101px)}
  .hero-portrait{right:-7%;bottom:-55px;width:56vw;height:710px}
  .hero-intro{max-width:340px}
}
@media(max-width:900px){
  .hero{min-height:750px}
  .hero-grid{min-height:665px;padding-top:136px;padding-bottom:75px}
  .hero h1{font-size:clamp(58px,8.2vw,83px)}
  .hero-portrait{right:-15%;bottom:-40px;width:65vw;height:610px;opacity:.9}
  .hero-motion-video{filter:grayscale(1) blur(37px) contrast(1.15) brightness(1.22);opacity:.19}
}
@media(max-width:720px){
  .site-header{background:#f8f8f6}
  .mobile-nav{background:#f8f8f6;color:#111}
  .mobile-nav a{border-color:rgba(15,15,15,.14)}
  .hero{padding-top:23px;min-height:0}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-top:72px;padding-bottom:0}
  .hero-copy{order:0;z-index:4}
  .hero h1{font-size:clamp(52px,10.8vw,78px);white-space:normal;line-height:.98;letter-spacing:-.075em}
  .hero h1 .line-last{white-space:nowrap}
  .hero-intro{font-size:14px;max-width:340px;line-height:1.8;margin:27px 0 25px}
  .hero-prelude{font-size:9px;margin-bottom:26px}
  .hero-actions{gap:15px;max-width:430px}
  .hero-portrait{position:relative;order:1;right:auto;bottom:auto;align-self:center;margin-top:14px;width:min(112%,540px);height:clamp(380px,112vw,590px);opacity:1}
  .hero-portrait .portrait-frame img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-portrait figcaption{right:7%;bottom:9px;max-width:90%;font-size:7px}
  .hero-motion-video{opacity:.17}
  .hero-bottom{height:64px;z-index:4}
  .hero-orbit{width:100vw;height:100vw;left:34%;top:28%}
}
@media(max-width:420px){
  .hero h1{font-size:clamp(48px,12.1vw,57px)}
  .hero h1 .line-last{white-space:normal}
  .hero-topline .edition{display:none}
  .hero-actions{gap:13px}
  .hero .primary-action{font-size:9px;padding:17px 15px;gap:14px}
  .hero-portrait{margin-top:0;width:112%;height:clamp(410px,121vw,520px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-motion-video{display:none}
  .hero-motion{background:linear-gradient(120deg,#fff 0%,#eee 72%,#fafaf8 100%)}
}
/* Final edge feathering: alpha fade, never a rectangular colour overlay. */
.hero-portrait .portrait-frame::after { content:none !important; }
.hero-portrait .portrait-frame img {
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 51% 50%,#000 48%,#000 62%,transparent 100%) !important;
  mask-image:radial-gradient(ellipse 50% 50% at 51% 50%,#000 48%,#000 62%,transparent 100%) !important;
  -webkit-mask-composite:source-over;mask-composite:add;
}