@font-face{font-family:Bricolage;src:url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bricolage;src:url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';src:url(assets/fonts/dm-sans-latin.woff2) format('woff2');font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';src:url(assets/fonts/dm-sans-latin-ext.woff2) format('woff2');font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#211c18;--muted:#766e66;--line:#d8d1c8;--accent:#d8462f;--display:Bricolage,"DM Sans",Helvetica,Arial,sans-serif}
html{scroll-padding-top:24px}
body{color:var(--ink)}.mark{color:var(--accent)}.wordmark{font-family:var(--display);font-size:clamp(29px,2.7vw,39px);font-weight:800;font-stretch:80%;letter-spacing:-.095em}.site-header{position:relative;z-index:5}.site-header nav a{transition:opacity .2s}
/* Artwork and display type share the opening composition. */
.hero{min-height:min(850px,calc(100svh - 92px));padding-block:25px 38px;display:flex;flex-direction:column;justify-content:space-between}.hero-top{display:flex;justify-content:space-between;gap:20px;text-transform:uppercase;font-size:12px;letter-spacing:.025em}.hero-composition{position:relative;isolation:isolate;min-height:clamp(500px,46vw,750px);display:flex;align-items:center}.hero-composition h1{position:relative;z-index:2;width:100%;font-family:var(--display);font-size:clamp(76px,10.9vw,181px);font-stretch:80%;font-weight:750;letter-spacing:-.083em;line-height:.78;margin:0;padding:80px 0 65px;pointer-events:none}.hero-line{display:block;white-space:nowrap}.hero-line--first{margin-left:-.015em}.hero-line--second{margin-left:clamp(40px,12vw,190px);font-weight:500;font-stretch:100%;font-size:1.17em;letter-spacing:-.105em}.hero-line--third{margin-left:clamp(0px,4vw,70px);font-size:.92em;letter-spacing:-.092em}.hero-art{position:absolute;z-index:1;top:2%;right:clamp(8px,7vw,110px);width:clamp(205px,28vw,440px);aspect-ratio:1418/1985;transform:translate3d(var(--art-x,0px),var(--art-y,0px),0) rotate(-7deg);transition:transform .6s cubic-bezier(.2,.75,.2,1);overflow:hidden;background:#ef6fa9}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-art:hover{transform:translate3d(var(--art-x,0px),var(--art-y,0px),0) rotate(-4deg) scale(1.02)}.hero-side-note{position:absolute;right:0;bottom:10%;writing-mode:vertical-rl;text-transform:uppercase;font-size:11px;letter-spacing:.04em}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.hero-bottom p{font-size:clamp(15px,1.25vw,19px);line-height:1.45;letter-spacing:-.025em;margin:0}
/* A loose editorial wall with a twelve-column underlying grid. */
.work-section{padding-top:clamp(65px,8vw,130px);padding-bottom:clamp(120px,13vw,220px)}.work-intro{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--ink);padding-top:15px;margin-bottom:clamp(50px,7vw,105px)}.work-intro h2{font-family:var(--display);font-size:clamp(47px,7.3vw,113px);line-height:.9;letter-spacing:-.075em;font-weight:650;font-stretch:85%;margin:0}.work-intro h2 span{font-weight:400;font-stretch:100%}.work-intro p{font-size:12px;text-transform:uppercase;margin:0 0 6px;white-space:nowrap}.work-intro p span{font-size:18px;margin-left:18px}.work-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,34px);row-gap:clamp(80px,10vw,170px);align-items:start}.work-item{min-width:0}.work-item--01{grid-column:1/9;grid-row:1}.work-item--02{grid-column:10/13;grid-row:1;margin-top:clamp(160px,22vw,330px)}.work-item--03{grid-column:2/7;grid-row:2}.work-item--04{grid-column:8/13;grid-row:2;margin-top:clamp(115px,18vw,260px)}.work-item--05{grid-column:1/9;grid-row:3}.work-item--06{grid-column:9/13;grid-row:3;margin-top:clamp(190px,24vw,345px)}.work-item--07{grid-column:2/8;grid-row:4}.work-item--08{grid-column:9/13;grid-row:4;margin-top:clamp(140px,18vw,260px)}.work-item--09{grid-column:1/11;grid-row:5}.work-media{position:relative;overflow:hidden;background:transparent}.work-media img{width:100%;height:100%;object-fit:cover;transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.01);transition:transform .55s cubic-bezier(.2,.7,.2,1)}.work-link:hover .work-media img{transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.035)}.work-open{position:absolute;right:16px;top:12px;color:var(--paper);font-family:var(--display);font-size:clamp(29px,3vw,45px);line-height:1;opacity:0;transform:translate(-7px,7px);transition:opacity .2s,transform .3s;filter:drop-shadow(0 1px 5px #0008)}.work-link:hover .work-open,.work-link:focus-visible .work-open{opacity:1;transform:none}.work-item--01 .work-media{aspect-ratio:1.59}.work-item--02 .work-media{aspect-ratio:4/5}.work-item--03 .work-media{aspect-ratio:1418/1985}.work-item--04 .work-media{aspect-ratio:1.3}.work-item--05 .work-media{aspect-ratio:1.6}.work-item--06 .work-media{aspect-ratio:4/5}.work-item--07 .work-media{aspect-ratio:1.33}.work-item--08 .work-media{aspect-ratio:1}.work-item--09 .work-media{aspect-ratio:1.65}.work-caption{padding-top:14px}.work-caption-top{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:10px;color:var(--muted);font-size:12px}.work-caption-top,.work-fields{margin:0}.work-caption h3{font-family:var(--display);font-size:clamp(25px,3.5vw,58px);font-weight:650;font-stretch:85%;letter-spacing:-.065em;line-height:1.01;margin:17px 0 10px;max-width:880px;transition:transform .35s}.work-link:hover .work-caption h3{transform:translateX(6px)}.work-item--02 .work-caption h3,.work-item--06 .work-caption h3,.work-item--08 .work-caption h3{font-size:clamp(25px,2.5vw,43px)}.work-fields{font-size:12px;color:var(--muted);line-height:1.45}
/* The CV is quieter than the project wall. */
.cv-name{font-family:var(--display);font-size:clamp(62px,8.4vw,132px);font-stretch:85%;font-weight:650;line-height:.85;letter-spacing:-.08em}.cv-intro{grid-template-columns:1.12fr .88fr}.contact-section h2{font-family:var(--display);font-size:clamp(76px,10vw,165px);font-weight:650;font-stretch:85%;line-height:.87;letter-spacing:-.085em}.contact-section{border-color:var(--ink)}
/* Case studies share navigation and metadata, then diverge by media type. */
.case-intro{padding-bottom:clamp(58px,7vw,110px)}.case-intro h1{font-family:var(--display);font-size:clamp(65px,9vw,145px);font-weight:700;font-stretch:82%;letter-spacing:-.078em;line-height:.86;max-width:1450px;margin:clamp(70px,9vw,140px) 0 clamp(70px,8vw,125px);overflow-wrap:normal}.case-main--illustration-no-bad-days-work-in-progress .case-intro h1,.case-main--valvekliinik-social-media-branding-visuals .case-intro h1{font-size:clamp(59px,7.7vw,125px)}.case-content{display:block;padding-bottom:clamp(85px,10vw,160px)}.case-content>*+*{margin-top:clamp(65px,9vw,145px)}.case-copy{font-size:clamp(18px,1.85vw,27px)}.case-copy h1,.case-copy h2,.case-copy h3{font-family:var(--display)}.case-lead{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,7vw,110px);padding-bottom:clamp(10px,3vw,50px)}.case-lead::before{content:'The project';font-size:12px;line-height:1.5;text-transform:uppercase;letter-spacing:.025em}.case-lead .case-copy{width:auto;max-width:820px}.case-after-copy{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,7vw,110px)}.case-after-copy .case-copy{grid-column:2;width:auto;max-width:800px}.editorial-media{width:min(calc(100% - 2*var(--gutter)),1300px);margin-inline:auto}.editorial-media .case-media,.editorial-media .case-video{width:100%;margin:0}.editorial-media .case-media img{width:100%;height:auto}.editorial-media--full{width:min(calc(100% - 2*var(--gutter)),1500px)}.editorial-media--offset-right{width:min(62vw,920px);margin-right:max(var(--gutter),calc((100vw - var(--content))/2));margin-left:auto}.editorial-media--tall-composite{width:min(calc(100% - 2*var(--gutter)),1120px)}.editorial-media--cocktail{width:min(calc(100% - 2*var(--gutter)),1160px);margin-left:max(var(--gutter),calc((100vw - var(--content))/2))}.editorial-media--playful{width:min(calc(100% - 2*var(--gutter)),800px);margin-left:max(var(--gutter),calc((100vw - var(--content))/2))}.editorial-media--video{width:min(calc(100% - 2*var(--gutter)),640px)}.editorial-media--portrait-video{width:min(calc(100% - 2*var(--gutter)),500px);margin-left:max(var(--gutter),calc((100vw - var(--content))/2))}.editorial-duet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,.7fr);align-items:end;gap:clamp(35px,8vw,140px)}.editorial-duet .case-media{width:100%;margin:0}.editorial-duet .case-copy{width:auto;font-size:clamp(20px,2.5vw,36px);padding-bottom:10%;max-width:470px}.editorial-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(14px,3vw,50px)}.editorial-pair .media-collection{display:contents}.editorial-pair figure{margin:0}.editorial-pair img{width:100%;height:auto}.case-teaser{width:min(calc(100% - 2*var(--gutter)),1500px);margin-inline:auto;height:clamp(280px,56vw,760px);overflow:hidden}.case-teaser img{width:100%;height:100%;object-fit:cover}.next-project>a{font-family:var(--display);font-stretch:85%;font-weight:650;letter-spacing:-.07em;line-height:.95}
/* Native scrolling: wheel stays vertical; trackpad and touch can move sideways. */
.media-strip{width:100%;min-width:0}.strip-heading,.strip-bottom{display:flex;justify-content:space-between;gap:20px;text-transform:uppercase;font-size:12px;letter-spacing:.025em}.strip-heading{border-top:1px solid var(--ink);padding-top:12px;padding-bottom:24px}.strip-heading p{margin:0;font-weight:600}.strip-heading span{color:var(--muted)}.strip-heading span span{font-size:17px;vertical-align:-1px;margin-left:8px;color:var(--ink)}.strip-track{display:flex;gap:clamp(12px,2vw,32px);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}.strip-item{flex:none;margin:0;scroll-snap-align:start}.strip-item img{width:100%;height:auto}.media-strip--landscape .strip-item{width:clamp(580px,77vw,1200px)}.media-strip--portrait .strip-item{width:clamp(360px,47vw,700px)}.strip-bottom{align-items:center;padding-top:19px;color:var(--muted)}.strip-progress{display:block;width:min(170px,27vw);height:1px;background:var(--line);overflow:hidden}.strip-progress span{display:block;width:35%;height:100%;background:var(--ink);transform:translateX(var(--progress-x,0%));transition:transform .15s}.media-strip .collection-caption{margin-left:var(--gutter)}
@media(max-width:1100px){.hero-composition h1{font-size:10.8vw}.hero-art{width:31vw;right:3vw}.work-item--02,.work-item--06,.work-item--08{grid-column:9/13}.work-item--04{grid-column:7/13}.work-caption h3{font-size:clamp(25px,3.3vw,49px)}.case-intro h1{font-size:8.8vw}}
@media(max-width:800px){.site-header{min-height:80px}.hero{min-height:680px}.hero-composition{min-height:530px}.hero-composition h1{font-size:11.3vw}.hero-art{width:34vw;top:8%;right:4%}.hero-side-note{bottom:8%}.work-wall{row-gap:95px}.work-item--01{grid-column:1/10}.work-item--02{grid-column:10/13;margin-top:210px}.work-item--03{grid-column:1/7}.work-item--04{grid-column:7/13;margin-top:170px}.work-item--05{grid-column:1/10}.work-item--06{grid-column:10/13;margin-top:220px}.work-item--07{grid-column:1/8}.work-item--08{grid-column:8/13;margin-top:190px}.work-item--09{grid-column:1/12}.cv-intro{grid-template-columns:1fr;gap:45px}.cv-about-copy{max-width:650px}.case-intro h1{font-size:clamp(54px,9vw,80px)}.media-strip--portrait .strip-item{width:52vw}.media-strip--landscape .strip-item{width:84vw}}
@media(max-width:600px){.site-header{min-height:74px}.site-header nav{gap:16px}.site-header nav a{font-size:12px}.hero{min-height:calc(100svh - 74px);padding-top:21px;padding-bottom:25px}.hero-top{font-size:10px}.hero-top span:last-child{max-width:130px;text-align:right}.hero-composition{min-height:clamp(470px,125vw,650px);align-items:center}.hero-composition h1{font-size:clamp(55px,13.9vw,82px);line-height:.86;padding:120px 0 70px}.hero-line--second{margin-left:12vw}.hero-line--third{margin-left:0}.hero-art{width:49vw;top:2%;right:9%}.hero-side-note{right:1%;bottom:5%;font-size:10px}.hero-bottom{align-items:start}.hero-bottom p{font-size:14px}.work-section{padding-top:90px}.work-intro{align-items:end;margin-bottom:55px}.work-intro h2{font-size:clamp(50px,11vw,70px)}.work-intro p{font-size:10px}.work-intro p span{margin-left:4px}.work-wall{display:flex;flex-direction:column;gap:75px}.work-item{width:100%;margin:0}.work-item--02,.work-item--06,.work-item--08{width:78%;margin-left:auto}.work-item--03,.work-item--07{width:85%;margin-left:4%}.work-item--04{width:90%;margin-left:auto}.work-item--09{width:95%}.work-caption h3,.work-item--02 .work-caption h3,.work-item--06 .work-caption h3,.work-item--08 .work-caption h3{font-size:clamp(30px,7vw,44px)}.work-open{opacity:1;transform:none;font-size:31px}.cv-intro{grid-template-columns:1fr;padding:50px 0 90px}.cv-name{font-size:clamp(58px,13vw,82px);margin-top:45px}.cv-section{padding-bottom:75px}.cv-entry{grid-template-columns:1fr;gap:12px;padding:20px 0 26px}.cv-entry-time{flex-direction:row;align-items:baseline;gap:12px}.cv-description{margin-top:15px}.cv-skills{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.contact-section h2{font-size:clamp(64px,13.5vw,90px);margin:80px 0 46px}.site-footer{flex-wrap:wrap}.site-footer span:last-child{display:none}.case-intro{padding-top:38px;padding-bottom:60px}.case-intro h1,.case-main--illustration-no-bad-days-work-in-progress .case-intro h1,.case-main--valvekliinik-social-media-branding-visuals .case-intro h1{font-size:clamp(48px,12vw,72px);margin:70px 0 68px;letter-spacing:-.075em}.case-subline{font-size:11px}.case-lead{display:block}.case-lead::before{display:block;margin-bottom:25px}.case-content>*+*{margin-top:65px}.case-copy{font-size:18px}.case-after-copy{display:block}.editorial-media--offset-right{width:82%;margin-right:var(--gutter)}.editorial-media--cocktail,.editorial-media--playful,.editorial-media--portrait-video{margin-left:var(--gutter)}.editorial-duet{grid-template-columns:1fr;gap:34px}.editorial-duet .case-media{width:90%}.editorial-duet .case-copy{padding:0;max-width:450px}.case-teaser{height:64vw}.media-strip--portrait .strip-item{width:74vw}.media-strip--landscape .strip-item{width:84vw}.strip-heading{padding-bottom:19px}.strip-heading,.strip-bottom{font-size:10px}.next-project>a{font-size:clamp(48px,10vw,75px)}.case-details{grid-template-columns:1fr;gap:10px}}
@media(max-width:420px){.hero-composition h1{font-size:13.7vw}.hero-line--second{margin-left:9vw}.hero-art{top:6%;width:51vw}.hero-bottom{flex-direction:column;gap:28px}.work-intro h2{font-size:50px}.work-intro p{max-width:70px;white-space:normal;text-align:right}.cv-name{font-size:clamp(54px,12.6vw,61px)}.cv-skills li{font-size:14px}.case-kicker{font-size:11px}.case-intro h1,.case-main--illustration-no-bad-days-work-in-progress .case-intro h1,.case-main--valvekliinik-social-media-branding-visuals .case-intro h1{font-size:clamp(46px,11.6vw,54px)}.editorial-pair{gap:8px}}

/* Desktop media scale follows source dimensions for higher-density screens. */
@media(min-width:801px){
  .editorial-pair--chips .media-collection>figure{width:min(100%,clamp(280px,20vw,340px));justify-self:center;margin:0}
  .editorial-pair--chips .media-collection img{display:block;width:100%;height:auto}
  .editorial-media--valve-primary{width:min(calc(100% - 2*var(--gutter)),clamp(620px,34vw,660px))}
  .editorial-media--valve-primary .case-media{display:flex;justify-content:center}
  .editorial-media--valve-primary img{display:block;width:auto;max-width:100%;max-height:70vh;object-fit:contain}
  .editorial-media--valve-secondary{width:min(calc(100% - 2*var(--gutter)),clamp(560px,34vw,660px));margin-right:max(var(--gutter),calc((100vw - var(--content))/2));margin-left:auto}
  .editorial-media--valve-secondary img{display:block;width:auto;max-width:100%;max-height:70vh;object-fit:contain}
  .case-main--in-house-designs .case-teaser--in-house-designs{width:min(calc(100% - 2*var(--gutter)),404px)}
  .editorial-media--in-house{width:min(calc(100% - 2*var(--gutter)),720px)}
  .editorial-media--in-house img{display:block;width:100%;height:auto}
  .case-main--mossic-branding .case-teaser--mossic-branding{width:min(calc(100% - 2*var(--gutter)),600px)}
  .editorial-media--mossic{width:min(calc(100% - 2*var(--gutter)),540px)}
  .editorial-media--mossic img{display:block;width:100%;height:auto}
  .editorial-duet--fun{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);align-items:center;gap:clamp(44px,7vw,110px)}
  .editorial-duet--fun .case-media{width:100%;margin:0;display:flex;justify-content:center}
  .case-main--fun-personal-projects .editorial-duet--fun .case-media img{display:block;width:min(100%,clamp(300px,22vw,340px));height:auto;max-height:none;object-fit:contain}
  .editorial-duet--fun .case-copy{max-width:380px;padding:0;font-size:clamp(24px,2vw,31px);line-height:1.16}
}
@media(max-width:600px){
  .editorial-duet--fun{grid-template-columns:1fr;gap:24px}
  .editorial-duet--fun .case-media{width:min(74vw,360px);margin:0 auto}
  .case-main--fun-personal-projects .editorial-duet--fun .case-media img{display:block;width:100%;height:auto;max-height:none}
  .editorial-duet--fun .case-copy{max-width:35em;padding:0;font-size:18px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Optical adjustments for Bricolage: preserve its character without collisions. */
.wordmark{font-stretch:100%;letter-spacing:-.055em}
.hero-composition h1{font-stretch:100%;font-weight:700;letter-spacing:-.028em}
.hero-line--second{font-stretch:100%;letter-spacing:-.04em}
.hero-line--third{letter-spacing:-.03em;word-spacing:.11em}
.work-intro h2,.work-caption h3,.cv-name,.contact-section h2,.case-intro h1,.next-project>a{font-stretch:100%;letter-spacing:-.055em}
@media(max-width:600px){.hero-composition{align-items:end}.hero-composition h1{padding:0 0 56px}.hero-art{width:39vw;top:3%}.hero-line--second{margin-left:8vw}.hero-side-note{bottom:1%}}
@media(max-width:420px){.hero-composition h1{font-size:12.9vw}.hero-art{width:39vw;top:2%}}
.media-strip--portrait .strip-item{width:clamp(360px,54vw,820px)}
@media(max-width:800px){.media-strip--portrait .strip-item{width:62vw}}
@media(max-width:600px){.media-strip--portrait .strip-item{width:74vw}}
@media(min-width:601px) and (max-width:800px){.work-item--01,.work-item--05{grid-column:1/9}.work-item--02,.work-item--06{grid-column:9/13}}
.work-item--02 .work-media{aspect-ratio:4/3}
/* The three smaller cover crops stay near their native 808px width. */
.case-teaser{width:min(calc(100% - 2*var(--gutter)),808px);height:auto;aspect-ratio:808/632;margin-left:var(--gutter);margin-right:auto}
.case-main--in-house-designs .case-teaser{margin-left:clamp(var(--gutter),13vw,220px)}
.case-main--mossic-branding .case-teaser{margin-left:auto;margin-right:var(--gutter)}
@media(max-width:900px){.case-main--in-house-designs .case-teaser{margin-left:var(--gutter)}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-art:hover,.work-media img,.work-link:hover .work-media img{transform:none!important}}

/* Editorial CV hierarchy: employer / institution, exact dates, then quieter detail. */
.cv-entry{display:block;border-top:1px solid var(--line);padding:clamp(34px,4.4vw,68px) 0 clamp(40px,5vw,76px)}
.cv-entry-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:clamp(20px,5vw,80px)}
.cv-entry-heading h4{font-family:var(--display);font-size:clamp(31px,3.55vw,55px);font-weight:650;font-stretch:100%;letter-spacing:-.05em;line-height:1.02;margin:0;max-width:960px}
.cv-entry-time{display:block;font-size:clamp(13px,1.15vw,16px);line-height:1.4;letter-spacing:-.01em;color:var(--muted);white-space:nowrap;margin:0;text-align:right}
.cv-role,.cv-program{font-size:clamp(15px,1.35vw,18px);line-height:1.45;letter-spacing:-.012em;margin:clamp(12px,1.4vw,20px) 0 0;max-width:850px}
.cv-entry .cv-description{font-size:clamp(15px,1.25vw,18px);line-height:1.58;max-width:790px;margin:clamp(23px,2.7vw,38px) 0 0 clamp(0px,9vw,150px)}
.education-entry .cv-entry-heading h4{font-size:clamp(30px,3.2vw,50px)}
.education-entry .cv-program{max-width:900px}
@media(max-width:600px){.cv-entry{padding:30px 0 39px}.cv-entry-heading{display:block}.cv-entry-heading h4,.education-entry .cv-entry-heading h4{font-size:clamp(30px,8vw,42px)}.cv-entry-time{text-align:left;white-space:normal;margin-top:11px;font-size:14px}.cv-role,.cv-program{margin-top:18px;font-size:15px}.cv-entry .cv-description{margin:23px 0 0;font-size:15px}}

/* A few compositions come into focus once, without hiding content if JS is absent. */
html.motion-ready [data-reveal]{opacity:.86;filter:blur(5px);transform:translate3d(0,18px,0) scale(.987);transition:opacity .72s ease,filter .78s ease,transform .78s cubic-bezier(.18,.7,.2,1)}
html.motion-ready [data-reveal].is-revealed{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
html.motion-ready .media-strip[data-reveal],html.motion-ready .editorial-media--tall-composite[data-reveal],html.motion-ready .editorial-pair[data-reveal]{filter:none}
@media(max-width:600px){html.motion-ready [data-reveal]{opacity:.9;filter:blur(3px);transform:translate3d(0,10px,0) scale(.994)}}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .hero-composition h1{transform:translate3d(0,var(--hero-scroll-y,0px),0)}
  .hero-art{transform:translate3d(var(--art-x,0px),calc(var(--art-y,0px) + var(--hero-art-scroll-y,0px)),0) rotate(-7deg)}
  .hero-art:hover{transform:translate3d(var(--art-x,0px),calc(var(--art-y,0px) + var(--hero-art-scroll-y,0px)),0) rotate(-4deg) scale(1.02)}
  .case-intro h1{transform:translate3d(0,var(--case-title-y,0px),0)}
  .case-teaser img{transform:translate3d(0,var(--teaser-y,0px),0) scale(1.03)}
  .strip-item img{transition:filter .32s ease,transform .32s ease,opacity .32s ease}
  .strip-track.is-moving .strip-item img{filter:blur(var(--gallery-blur,0px));transform:scale(var(--gallery-scale,1));opacity:var(--gallery-opacity,1)}
}
@media(prefers-reduced-motion:reduce){html.motion-ready [data-reveal],html.motion-ready [data-reveal].is-revealed{opacity:1;filter:none;transform:none;transition:none}.hero-composition h1,.case-intro h1,.case-teaser img,.strip-item img{transform:none!important;filter:none!important;opacity:1!important}}

/* Shared structure, with a palette drawn from each project's artwork. */
:root{--background:#f7f6f2;--foreground:#211c18;--rule:#d8d1c8;--scribble:#211c18}
html{background:var(--background)}
html.theme-project{background:var(--background)}
body{background:var(--background);color:var(--foreground);transition:background-color .44s ease,color .44s ease}
html.theme-project body{color:var(--ink)}
body.theme-project .skip-link{background:var(--foreground);color:var(--background)}
body.theme-b-bet-case-study .case-content{background:#1A1A1A}
.bbet-artwork{width:min(100%,1600px);margin-inline:auto;background:#1A1A1A}
.bbet-artwork .case-media{width:100%;margin:0}
.bbet-artwork img{display:block;width:100%;height:auto}
.bbet-fullsize{margin:20px auto 0;text-align:right;font-size:13px;color:var(--muted)}
.bbet-fullsize a{border-bottom:1px solid currentColor;padding-bottom:4px;transition:color .2s ease}
.bbet-fullsize a:hover,.bbet-fullsize a:focus-visible{color:var(--foreground)}

/* One energetic pen circle for every navigation link, colored by the active theme. */
.site-header nav a{position:relative;display:inline-block;font-size:clamp(14px,1.15vw,17px);font-weight:600;line-height:1.2;padding:11px 1px;isolation:isolate}
.site-header nav a:hover{opacity:1}
.site-header nav a:focus-visible{outline:none}
.nav-scribble{position:absolute;left:-13px;top:50%;width:calc(100% + 26px);height:calc(100% + 19px);transform:translateY(-50%) rotate(-4deg);overflow:visible;pointer-events:none;color:var(--scribble);z-index:-1}
.nav-scribble path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:330;stroke-dashoffset:330;transition:stroke-dashoffset .38s cubic-bezier(.2,.7,.2,1)}
.site-header nav a:hover .nav-scribble path,.site-header nav a:focus-visible .nav-scribble path{stroke-dashoffset:0}

/* Hovering room creates literal space while the other two lines recede. */
.hero-line--second{pointer-events:none}
.room-word{display:inline-block;pointer-events:auto;letter-spacing:inherit;transform:translateX(0);transition:letter-spacing .52s cubic-bezier(.2,.65,.22,1),transform .52s cubic-bezier(.2,.65,.22,1);cursor:default}
.room-word:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.hero-line--first,.hero-line--third{transition:-webkit-filter .48s ease,filter .48s ease,opacity .48s ease}
.hero-composition.room-active .room-word{letter-spacing:.045em!important;transform:translateX(-.07em)!important}
.hero-composition.room-active .hero-line--first,.hero-composition.room-active .hero-line--third{-webkit-filter:blur(3px)!important;filter:blur(3px)!important;opacity:.78!important}
@media(max-width:800px){.hero-composition.room-active .room-word{letter-spacing:inherit!important;transform:none!important}.hero-composition.room-active .hero-line--first,.hero-composition.room-active .hero-line--third{-webkit-filter:none!important;filter:none!important;opacity:1!important}}
@media(max-width:600px){.site-header nav a{font-size:13px;padding:10px 1px}.nav-scribble{height:calc(100% + 14px)}}

/* Carry the departing palette over the next page for a brief native-feeling fade. */
html.theme-switch body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background:var(--previous-background);animation:theme-wash .4s cubic-bezier(.2,.75,.2,1) both}
@keyframes theme-wash{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){body{transition:none}.nav-scribble path{transition:none}.site-header nav a:hover .nav-scribble path,.site-header nav a:focus-visible .nav-scribble path{stroke-dashoffset:0}.room-word,.hero-line--first,.hero-line--third{transition:none}html.theme-switch body::after{display:none}}

/* Social marks stay quiet beside the portfolio contact link. */
.contact-socials{display:flex;align-items:center;gap:22px;list-style:none;padding:0;margin:32px 0 0}
.contact-socials a{display:grid;place-items:center;width:32px;height:32px;transition:transform .22s ease,opacity .22s ease}
.contact-socials a:hover,.contact-socials a:focus-visible{transform:translateY(-3px);opacity:.7}
.contact-socials svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.contact-socials .social-dot{fill:currentColor;stroke:none}

/* Native copies of the public project videos permit truly muted autoplay. */
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.case-main--casino-animations-collection .strip-item{width:auto}
.case-main--casino-animations-collection .strip-item img{display:block;width:auto;max-width:none;height:auto;max-height:70vh;object-fit:contain}
.case-main--casino-animations-collection .strip-item--video{width:min(39.4vh,72vw)}
.case-main--casino-animations-collection .strip-item--video .video-frame{max-height:70vh}

/* The local 1080px Mossic case study contains the 808px cover's exact crop. */
.work-item--mossic-branding .work-media img{object-position:50% 80%}
.case-main--mossic-branding .case-teaser img{object-position:50% 93%}

/* Final editorial rhythm: all nine projects remain visible without long gaps. */
.work-section{padding-top:clamp(54px,6vw,94px);padding-bottom:clamp(84px,9vw,140px)}
.work-intro{margin-bottom:clamp(30px,4vw,62px)}
.work-wall{row-gap:clamp(38px,5vw,82px)}
.work-item--02{margin-top:clamp(65px,9vw,135px)}
.work-item--04{margin-top:clamp(50px,8vw,120px)}
.work-item--06{margin-top:clamp(75px,10vw,145px)}
.work-item--08{margin-top:clamp(55px,8vw,120px)}
.work-item--03 .work-media{aspect-ratio:1/1}
.work-item--02 .work-media{aspect-ratio:1006/1852}
.work-item--05 .work-media{aspect-ratio:1.55}
.work-item--08 .work-media{aspect-ratio:4/5}
.work-item--09 .work-media{aspect-ratio:1.65}
.work-item--cocktail-bounce .work-media img{transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.5)}
.work-item--cocktail-bounce .work-link:hover .work-media img{transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.53)}
.work-caption h3{margin:12px 0 7px}
.work-summary{font-size:13px;line-height:1.42;color:var(--muted);max-width:440px;margin:9px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:800px){.work-item--02,.work-item--04,.work-item--06,.work-item--08{margin-top:clamp(40px,7vw,75px)}}
@media(max-width:600px){.work-wall{gap:clamp(44px,11vw,64px)}.work-item--02,.work-item--04,.work-item--06,.work-item--08{margin-top:0}.work-summary{font-size:13px}}

/* The homepage biography changes tone without changing the portfolio shell. */
.about-section{background:#211c18;color:#f7f6f2;--ink:#f7f6f2;--muted:#d2c8bd;--line:#746b62;--accent:#e17a61;--scribble:#F6EE43;padding:clamp(44px,6vw,90px) 0 clamp(75px,9vw,140px)}
.about-section .section-line{border-color:var(--line)}
.about-section .cv-intro{padding:clamp(54px,6vw,85px) 0 clamp(65px,8vw,118px)}
.cv-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(55px,7vw,120px)}
.cv-primary{grid-column:2;grid-row:1}.cv-secondary{grid-column:1;grid-row:1}
.cv-columns .cv-section{padding-bottom:clamp(54px,6vw,95px)}
.cv-columns .cv-section-heading{border-color:var(--line)}
.cv-columns .cv-entry{padding:clamp(28px,3vw,46px) 0 clamp(33px,3.3vw,51px)}
.cv-columns .cv-entry-heading h4{font-size:clamp(28px,2.8vw,42px);line-height:1.08}
.cv-columns .cv-entry-time{font-size:clamp(12px,1vw,14px)}
.cv-columns .cv-entry .cv-description{margin:clamp(18px,2vw,28px) 0 0;max-width:660px}
.cv-columns .cv-skills{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.cv-entry-heading h4 a.scribble-link{display:inline-block;position:relative;text-decoration:none;padding:.12em .55em .12em 0}
.cv-entry-heading h4 .external-marker{position:absolute;right:0;top:.15em;z-index:2;width:1em;height:1em;font-family:inherit;font-size:.47em;font-weight:400;transition:transform .2s ease}
.cv-entry-heading h4 a:hover .external-marker,.cv-entry-heading h4 a:focus-visible .external-marker{transform:translate(2px,-2px)}
@media(max-width:850px){.cv-columns{grid-template-columns:1fr;gap:0}.cv-primary,.cv-secondary{grid-column:1;grid-row:auto}.about-section .cv-intro{padding-bottom:75px}}
@media(max-width:600px){.about-section{padding:42px 0 76px}.about-section .cv-intro{padding:44px 0 65px}.cv-columns .cv-entry-heading h4{font-size:clamp(30px,8vw,42px)}.cv-columns .cv-skills{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* One stop-motion ink language: the mark changes frame, never the lettering. */
.hand-mark{color:var(--scribble);overflow:visible;pointer-events:none}
.hand-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:none}
.hand-frame{opacity:0}
.hand-stroke--1{stroke-width:2.15}
.hand-stroke--2{stroke-width:1.35;opacity:.77}
.nav-scribble{position:absolute;left:-14px;top:50%;width:calc(100% + 28px);height:calc(100% + 23px);opacity:0;transform:translateY(-50%) rotate(-5deg);transition:opacity .12s linear;z-index:-1}
html:not([class*="theme-"]) .nav-scribble{color:#fff;filter:drop-shadow(0 0 .8px var(--ink))}
.site-header nav a:hover .nav-scribble,.site-header nav a:focus-visible .nav-scribble{opacity:1}
.scribble-link{position:relative}
.scribble-link .link-scribble{position:absolute;left:-3px;bottom:-.1em;width:calc(100% + 6px);height:.46em;opacity:0;overflow:visible}
.scribble-link:hover .link-scribble,.scribble-link:focus-visible .link-scribble{opacity:1}
.link-label,.external-marker{position:relative;z-index:1}
.hand-frame--1{opacity:1}
.site-header nav a:hover .hand-frame--1,.site-header nav a:focus-visible .hand-frame--1,.scribble-link:hover .hand-frame--1,.scribble-link:focus-visible .hand-frame--1{animation:ink-frame-one .63s steps(1,end) infinite}
.site-header nav a:hover .hand-frame--2,.site-header nav a:focus-visible .hand-frame--2,.scribble-link:hover .hand-frame--2,.scribble-link:focus-visible .hand-frame--2{animation:ink-frame-two .63s steps(1,end) infinite}
.site-header nav a:hover .hand-frame--3,.site-header nav a:focus-visible .hand-frame--3,.scribble-link:hover .hand-frame--3,.scribble-link:focus-visible .hand-frame--3{animation:ink-frame-three .63s steps(1,end) infinite}
.site-header nav a:hover .hand-mark path,.site-header nav a:focus-visible .hand-mark path,.scribble-link:hover .hand-mark path,.scribble-link:focus-visible .hand-mark path{animation:ink-draw .22s steps(12,end) both}
@keyframes ink-frame-one{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes ink-frame-two{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes ink-frame-three{0%,65%{opacity:0}66%,100%{opacity:1}}
@keyframes ink-draw{to{stroke-dashoffset:0}}
@media(max-width:600px){.site-header nav a{font-size:13px;padding:10px 1px}.nav-scribble{height:calc(100% + 14px)}}
@media(prefers-reduced-motion:reduce){.hand-mark path{animation:none!important;transition:none;stroke-dashoffset:0}.hand-frame{animation:none!important;opacity:0}.hand-frame--1{opacity:1}.nav-scribble{opacity:0}.site-header nav a:hover .nav-scribble,.site-header nav a:focus-visible .nav-scribble,.scribble-link:hover .link-scribble,.scribble-link:focus-visible .link-scribble{opacity:1}}

/* One expressive weight change makes the interactive word the headline's anchor. */
.hero-line--second .room-word{font-weight:800;letter-spacing:-.06em}
.hero-composition.room-active .room-word{letter-spacing:.045em}

/* Text is the foreground layer when artwork approaches headlines. */
.hero-composition h1,.case-intro{position:relative;z-index:2}
.hero-art{position:absolute;z-index:1}
.case-content{position:relative;z-index:1}
.site-header{position:relative;z-index:5}

/* Short projects use compositions; five related animations retain the strip. */
.editorial-pair--valve{gap:clamp(16px,3vw,48px)}
.editorial-pair--valve .case-media{display:flex;justify-content:center}
.editorial-pair--valve img{width:auto;max-width:100%;max-height:72vh;object-fit:contain}
.editorial-pair--newsletter .case-media{width:100%}
.editorial-pair--newsletter img{width:100%;height:auto;max-height:72vh;object-fit:contain}
.editorial-duet .case-media img{width:auto;max-width:100%;max-height:76vh;object-fit:contain}
.media-strip .strip-item{width:auto}
.media-strip .strip-item img{display:block;width:auto;max-width:min(82vw,1200px);max-height:72vh;object-fit:contain}
.case-main--casino-animations-collection .strip-item img{max-height:70vh}
@media(max-width:600px){.editorial-pair--valve,.editorial-pair--newsletter{display:block}.editorial-pair--valve .case-media,.editorial-pair--newsletter .case-media{width:90%;margin:0 0 22px}.editorial-pair--valve .case-media:nth-child(2),.editorial-pair--newsletter .case-media:nth-child(2){margin-left:auto}.editorial-pair--valve img{max-height:68vh}.media-strip .strip-item img{max-width:74vw;max-height:70vh}}

/* The GIF's useful blue area is x=260..1340, y=130..1055 of 1600×1200. */
.cocktail-window{position:relative;width:min(calc(100% - 2*var(--gutter)),1080px,84vh);aspect-ratio:1080/925;margin-inline:auto;overflow:hidden}
.cocktail-window .case-media{position:absolute;inset:0;width:100%;height:100%;margin:0}
.cocktail-window img{position:absolute;left:-24.074%;top:-14.054%;width:148.148%;height:auto;max-width:none}

.project-browse{display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 clamp(38px,5vw,75px)}
.project-browse a{color:var(--foreground);text-underline-offset:4px}
.project-browse a:hover,.project-browse a:focus-visible{text-decoration:underline}
@media(max-width:600px){.project-browse{display:block}.project-browse span{display:block;margin-top:12px;font-size:11px}}
/* Contact text is inserted after the page loads; keep the CV composition unchanged. */
.cv-birth{font-size:12px;line-height:1.4;color:var(--muted);margin:16px 0 0;letter-spacing:.015em}
.contact-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);max-width:820px;margin-bottom:34px}
.contact-details[hidden]{display:none}
.contact-details p{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.contact-label{font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.contact-details .contact-link{font-size:clamp(17px,1.7vw,22px);overflow-wrap:anywhere;border:0;padding:0;transition:opacity .2s}
.contact-details .contact-phone:not(a){display:inline-block}
.contact-fallback{font-size:15px;line-height:1.5;margin:0 0 26px}
@media(max-width:600px){.contact-details{grid-template-columns:1fr;gap:22px}}

/* Give WebKit extra real line-box space for the expanded display word. */
.hero-top{position:relative;z-index:2}
.hero-composition{z-index:1}
.hero-composition h1{line-height:.92;overflow:visible}
.hero-line,.hero-line--second{overflow:visible}
.hero-line--second{line-height:1.08}
.room-word{padding-inline:.12em;margin-inline:-.12em}
html .hero-composition.room-active .hero-line--first,html .hero-composition.room-active .hero-line--third{-webkit-filter:blur(3px)!important;filter:blur(3px)!important;opacity:.78!important}

/* The Fun Personal sequence shares a baseline and remains touch-scrollable. */
.case-main--fun-personal-projects .media-strip .strip-track{align-items:flex-end}
.case-main--fun-personal-projects .media-strip .strip-item{display:flex;align-items:flex-end}
.case-main--fun-personal-projects .media-strip .strip-item img{max-height:72vh}

/* External navigation marks are drawn as small current-color SVGs on every device. */
.arrow-icon{display:inline-block;width:.72em;height:.72em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.06em}
.external-link{white-space:normal}
.external-arrow{margin-inline-start:.22em;transition:transform .2s ease}
.external-link:hover .external-arrow,.external-link:focus-visible .external-arrow{transform:translate(1px,-1px)}
.work-open{width:1em;height:1em;stroke:currentColor;stroke-width:1.35;filter:drop-shadow(0 1px 5px #0008)}
.cv-entry-heading h4 .external-marker{stroke-width:1.8}
.next-project-arrow{width:.8em;height:.8em;margin-inline-start:.18em;transition:transform .25s ease}
.next-project>a:hover .next-project-arrow,.next-project>a:focus-visible .next-project-arrow{transform:translate(3px,-3px)}
.site-footer .back-to-top{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap}
.back-to-top .arrow-icon{width:.9em;height:.9em;transition:transform .25s ease}
.back-to-top:hover .arrow-icon,.back-to-top:focus-visible .arrow-icon{transform:translateY(-2px)}
.about-section .scribble-link .link-scribble{color:#F6EE43}

/* Mobile gets its own poster composition; desktop art direction stays intact. */
@media(max-width:600px){
  .hero{min-height:max(0px,calc(100svh - 74px));padding-top:16px;padding-bottom:22px}
  .hero-top{position:relative;z-index:3;align-items:flex-start;font-size:10px;line-height:1.35}
  .hero-top span:first-child{flex:none}
  .hero-top span:last-child{max-width:145px;text-align:right}
  .hero-composition{min-height:clamp(440px,calc(100svh - 340px),540px);align-items:stretch;margin-top:4px;overflow:visible}
  .hero-composition h1{position:absolute;left:0;right:0;bottom:1.5%;z-index:3;margin:0;padding:0;font-size:clamp(56px,15vw,68px);line-height:.82;letter-spacing:-.09em;overflow:visible}
  .hero-line{white-space:nowrap}
  .hero-line--first{margin-left:-.01em}
  .hero-line--second{margin-left:10vw;font-size:1.12em;line-height:.96;letter-spacing:-.075em}
  .hero-line--third{margin-left:1vw;font-size:.9em;letter-spacing:-.085em}
  .hero-art{left:50%;right:auto;top:1.5%;z-index:1;width:min(76vw,320px);height:auto;transform:translate3d(calc(-50% + var(--art-x,0px)),var(--art-y,0px),0) rotate(-7deg);overflow:hidden}
  .hero-art:hover{transform:translate3d(calc(-50% + var(--art-x,0px)),var(--art-y,0px),0) rotate(-7deg)}
  .hero-side-note{top:47%;right:-1%;bottom:auto;z-index:2;font-size:9px}
  .hero-bottom{position:relative;z-index:2;align-items:flex-start;gap:22px}
  .hero-bottom p{font-size:13px;line-height:1.4}
  .site-header nav{gap:clamp(11px,3.5vw,16px)}
  .site-header nav a{min-height:42px;display:flex;align-items:center;padding:9px 2px;font-size:13px}
}
@media(max-width:374px){
  .hero-top{font-size:9px;gap:10px}
  .hero-top span:last-child{max-width:136px}
  .hero-composition{min-height:clamp(430px,calc(100svh - 320px),510px)}
  .hero-composition h1{font-size:clamp(53px,14.5vw,58px)}
  .hero-line--second{margin-left:9vw}
  .hero-side-note{right:-2%;font-size:8px}
}

/* Directional project transitions are brief and leave media still. */
@keyframes project-exit-left{to{opacity:.78;transform:translateX(-12px)}}
@keyframes project-exit-right{to{opacity:.78;transform:translateX(12px)}}
@keyframes project-enter-from-right{from{opacity:.72;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes project-enter-from-left{from{opacity:.72;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:no-preference){
  body.project-swipe-exit-next .case-intro,body.project-swipe-exit-next .case-lead .case-copy,body.project-swipe-exit-next .case-after-copy .case-copy,body.project-swipe-exit-next .case-details,body.project-swipe-exit-next .source-line,body.project-swipe-exit-next .next-project{animation:project-exit-left .3s cubic-bezier(.42,0,.8,.55) both}
  body.project-swipe-exit-previous .case-intro,body.project-swipe-exit-previous .case-lead .case-copy,body.project-swipe-exit-previous .case-after-copy .case-copy,body.project-swipe-exit-previous .case-details,body.project-swipe-exit-previous .source-line,body.project-swipe-exit-previous .next-project{animation:project-exit-right .3s cubic-bezier(.42,0,.8,.55) both}
  html[data-project-enter-direction="next"] .case-intro,html[data-project-enter-direction="next"] .case-lead .case-copy,html[data-project-enter-direction="next"] .case-after-copy .case-copy,html[data-project-enter-direction="next"] .case-details,html[data-project-enter-direction="next"] .source-line,html[data-project-enter-direction="next"] .next-project{animation:project-enter-from-right .42s cubic-bezier(.2,.75,.25,1) both}
  html[data-project-enter-direction="previous"] .case-intro,html[data-project-enter-direction="previous"] .case-lead .case-copy,html[data-project-enter-direction="previous"] .case-after-copy .case-copy,html[data-project-enter-direction="previous"] .case-details,html[data-project-enter-direction="previous"] .source-line,html[data-project-enter-direction="previous"] .next-project{animation:project-enter-from-left .42s cubic-bezier(.2,.75,.25,1) both}
}
@media(prefers-reduced-motion:reduce){body.project-swipe-exit-next *,body.project-swipe-exit-previous *,html[data-project-enter-direction] *{animation:none!important;transition:none!important}}

/* No Bad Days is nested as a small companion work under Fun Personal Projects. */
.work-subproject{display:grid;grid-template-columns:64px minmax(0,1fr) 18px;align-items:center;gap:14px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink)}
.work-subproject img{display:block;width:64px;height:86px;object-fit:contain;background:#e9a4bd}
.work-subproject span{display:block;min-width:0}
.work-subproject small{display:block;color:var(--muted);font-size:10px;line-height:1.4}
.work-subproject strong{display:block;margin-top:3px;font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:600;line-height:1.05;letter-spacing:-.04em;transition:transform .25s}
.work-subproject:hover strong,.work-subproject:focus-visible strong{transform:translateX(4px)}
.work-subproject .related-arrow{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;transition:transform .25s}
.work-subproject:hover .related-arrow,.work-subproject:focus-visible .related-arrow{transform:translate(2px,-2px)}
.nested-project--no-bad-days{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);align-items:center;gap:clamp(28px,6vw,92px);padding:clamp(30px,6vw,90px);background:#e9a4bd;color:#211c18}
.nested-project-copy{max-width:640px}
.nested-project-copy h2{font-family:var(--display);font-size:clamp(52px,7vw,104px);font-weight:700;line-height:.9;letter-spacing:-.065em;margin:18px 0 24px}
.nested-project-copy>p:not(.eyebrow){max-width:36em;font-size:clamp(16px,1.5vw,21px);line-height:1.55}
.nested-project-copy .external-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:inherit}
.nested-project-media{margin:0;width:100%;background:#e9a4bd}
.nested-project-media img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain}
@media(max-width:700px){.nested-project--no-bad-days{grid-template-columns:1fr;gap:22px;padding:24px var(--gutter)}.nested-project-copy h2{font-size:clamp(47px,12vw,68px);margin:14px 0 18px}.nested-project-media{width:min(100%,480px);margin-inline:auto}.nested-project-media img{max-height:72vh}.work-subproject{grid-template-columns:58px minmax(0,1fr) 16px;gap:11px}.work-subproject img{width:58px;height:78px}}

/* The last visible primary project is Cocktail Bounce after No Bad Days is nested. */
.work-item--cocktail-bounce{grid-column:1/11;grid-row:5;margin-top:0}
.work-item--cocktail-bounce .work-media{aspect-ratio:1.65}
@media(max-width:1100px) and (min-width:601px){.work-item--cocktail-bounce{grid-column:1/12;grid-row:5;margin-top:0}}
@media(max-width:600px){.work-item--cocktail-bounce{width:95%;margin:0}}