/* One committed look: flat color blocks in brown, cherry, pink, butter. Single theme by design. */
:root{
  --brown:#2A1812; --brown-2:#3A241B; --cherry:#C8193C; --pink:#F5B6C8; --butter:#F6E08C; --cream:#FBF3E4;
  --display:'Bricolage Grotesque', 'Arial Black', Arial, sans-serif;
  --body:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Azeret Mono', ui-monospace, Menlo, monospace;
  --r:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--brown); scroll-behavior:smooth}
body{background:var(--brown); color:var(--cream); font-family:var(--body); font-size:17px; line-height:1.55; margin:0}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--butter); outline-offset:3px}
p{margin:0}
.gutter{padding-inline:clamp(16px,4vw,48px)}
.mono{font-family:var(--mono); font-size:13px; letter-spacing:.06em}
h1,h2,h3{font-family:var(--display); margin:0; letter-spacing:-.02em; text-wrap:balance}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--brown); display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; font-family:var(--display); font-weight:600; font-size:18px}
.logo span.face{width:44px; height:44px; border-radius:50%; background:var(--pink) url(img/avatar.png) center/cover no-repeat; flex:none}
.nav ul{display:flex; gap:clamp(12px,2.4vw,28px); list-style:none; margin:0; padding:0}
.nav ul a{text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.nav ul a:hover{color:var(--pink)}
@media (max-width:560px){ .nav ul li:nth-child(n+3){display:none} }

/* hero */
.hero{background:var(--cherry); color:var(--cream); position:relative; overflow:hidden; min-height:clamp(560px,86vh,820px); display:grid; grid-template-rows:auto 1fr auto; padding-block:28px 32px}
.hero .top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.hero .name{font-family:var(--display); font-weight:600; font-size:clamp(20px,2vw,26px)}
.stage{position:relative; display:grid; place-items:center; padding-block:24px}
.disc{width:min(520px,78vw); aspect-ratio:1; border-radius:50%; background:var(--pink); position:relative}
.disc{overflow:hidden; border:0; padding:0; cursor:pointer; display:block; font:inherit}
.disc-wrap{position:relative}
.disc .d-sketch{position:absolute; left:50%; top:2%; height:100%; width:auto; max-width:none; transform:translateX(-50%); transition:opacity .5s ease, transform .6s ease}
.disc .d-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .5s ease, transform .6s ease}
.disc:hover .d-photo,.disc:focus-visible .d-photo,.disc[aria-pressed="true"] .d-photo{opacity:1; transform:scale(1)}
.disc:hover .d-sketch,.disc:focus-visible .d-sketch,.disc[aria-pressed="true"] .d-sketch{opacity:0; transform:translateX(-50%) scale(.97)}
.disc:focus-visible{outline:3px solid var(--butter); outline-offset:6px}
.hero h1{position:absolute; left:0; right:0; bottom:9%; text-align:center; font-weight:800; font-size:clamp(64px,13.5vw,210px); line-height:.85; color:var(--cream); mix-blend-mode:normal; pointer-events:none}
.hero h1 .ol{color:transparent; -webkit-text-stroke:2px var(--cream)}
.hero .bottom{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap}
.hero .role{font-family:var(--mono); font-style:italic; font-size:clamp(14px,1.4vw,18px)}
.tick{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--butter); margin-right:8px; vertical-align:middle}

/* intro */
.intro{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,72px); text-align:center}
.intro p.big{font-family:var(--display); font-weight:600; font-size:clamp(28px,4.4vw,56px); line-height:1.12; max-width:18em; margin-inline:auto; text-wrap:balance}
.c-pink{color:var(--pink)} .c-butter{color:var(--butter)} .c-cherry{color:#FF6B82}
.marquee{overflow:hidden; border-block:1px solid var(--brown-2); padding-block:18px; margin-top:clamp(48px,7vw,80px)}
.track{display:flex; gap:40px; width:max-content; animation:slide 38s linear infinite}
.track span{font-family:var(--mono); font-size:14px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:40px}
.track span::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--cherry)}
@keyframes slide{to{transform:translateX(-50%)}}

/* works: stacked cards */
.works{padding-block:clamp(56px,8vw,96px)}
.sec-title{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.sec-title h2{font-weight:800; font-size:clamp(44px,7vw,96px); line-height:.9}
.stack{display:grid; gap:28px}
.card{position:sticky; border-radius:var(--r); padding:clamp(24px,4vw,56px); color:var(--brown); overflow:hidden; box-shadow:0 -10px 30px rgba(20,10,6,.35)}
.card:nth-child(1){top:84px} .card:nth-child(2){top:108px} .card:nth-child(3){top:132px} .card:nth-child(4){top:156px}
.card.pink{background:var(--pink)} .card.butter{background:var(--butter)} .card.cherry{background:var(--cherry); color:var(--cream)} .card.cream{background:var(--cream)}
.card-head{display:flex; justify-content:space-between; align-items:start; gap:16px; flex-wrap:wrap}
.card h3{font-weight:800; font-size:clamp(36px,5.4vw,72px); line-height:.92}
.card .kicker{font-family:var(--display); font-weight:600; font-size:clamp(20px,2.4vw,28px); margin-top:10px}
.chip{display:inline-block; border:1.5px solid currentColor; border-radius:999px; padding:5px 14px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.card-body{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); margin-top:clamp(24px,4vw,40px); align-items:center}
.card-body .copy{display:grid; gap:18px; max-width:32em; font-size:18px}
.photos{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative}
.photos img{border-radius:18px; aspect-ratio:2/3; object-fit:cover; width:100%}
.photos img:nth-child(2){transform:translateY(-28px)}
.sticker{position:absolute; pointer-events:none}
.photos .sticker{right:-6%; top:-18%; width:26%; transform:rotate(8deg)}
.acts{display:grid; gap:10px}
.acts div{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; padding:14px 18px; background:rgba(42,24,18,.07); border-radius:14px}
.acts b{font-family:var(--display); font-weight:600; font-size:20px}
.btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px; font-weight:500; text-decoration:none; border:2px solid var(--brown); transition:transform .15s}
.btn.solid{background:var(--brown); color:var(--cream)}
.btn:hover{transform:translateY(-2px)}
.small-card .card-body{grid-template-columns:1fr; margin-top:18px}
@media (max-width:820px){ .card-body{grid-template-columns:1fr} .card{position:relative; top:auto!important} .photos img:nth-child(2){transform:none} }

/* about */
.about{background:var(--pink); color:var(--brown); padding-block:clamp(64px,9vw,120px)}
.about-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,88px); align-items:center; max-width:1200px; margin-inline:auto}
.frame{position:relative; max-width:400px}
.frame img.photo{border-radius:var(--r); aspect-ratio:2/3; object-fit:cover; width:100%}
.frame .sticker{left:-14%; bottom:-8%; width:44%; transform:rotate(-7deg)}
.about h2{font-weight:800; font-size:clamp(40px,6vw,76px); line-height:.92; margin-bottom:22px}
.about .copy{display:grid; gap:14px; font-size:18px; max-width:34em}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px}
.stats b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(40px,5vw,64px); line-height:1}
.stats span{font-size:14px}
@media (max-width:820px){ .about-in{grid-template-columns:1fr} .frame{margin-inline:auto} }
@media (max-width:480px){ .stats{grid-template-columns:1fr 1fr} }

/* faq */
.faq{padding-block:clamp(64px,9vw,120px); max-width:980px; margin-inline:auto}
.faq h2{font-weight:800; font-size:clamp(40px,6vw,76px); line-height:.92; text-align:center; margin-bottom:36px}
details{background:var(--cream); color:var(--brown); border-radius:18px; margin-bottom:12px}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:20px 24px; font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,23px)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); font-size:22px; line-height:1; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 24px 22px; max-width:44em}

/* contact */
.contact{background:var(--cherry); color:var(--cream); padding-block:clamp(72px,10vw,130px) 40px; position:relative; overflow:hidden}
.contact h2{font-weight:800; font-size:clamp(52px,10vw,150px); line-height:.86; max-width:9em}
.contact .links{display:flex; gap:12px; flex-wrap:wrap; margin-top:36px}
.contact .btn{border-color:var(--cream); color:var(--cream)}
.contact .btn.solid{background:var(--cream); color:var(--cherry)}
.contact .sticker{right:clamp(16px,6vw,96px); bottom:-40px; width:clamp(120px,18vw,240px); transform:rotate(6deg); opacity:.9}
.foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:clamp(64px,9vw,120px)}
@media (max-width:640px){ .contact .sticker{display:none} }


/* lanes + dinner additions */
.lanes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:900px; margin:0 auto}
.lane{display:flex; flex-direction:column; gap:4px; padding:22px; border-radius:22px; text-decoration:none; color:var(--brown); text-align:left; transition:transform .15s}
.lane:hover{transform:translateY(-3px) rotate(-1deg)}
.lane b{font-family:var(--display); font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1}
.l-cherry{background:var(--cherry); color:var(--cream)} .l-pink{background:var(--pink)} .l-butter{background:var(--butter)}
@media (max-width:560px){ .lanes{grid-template-columns:1fr} }
.lane-tag{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; opacity:.85}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 0}
.facts div{border-top:1.5px solid currentColor; padding-top:8px}
.facts .wide{grid-column:1/-1}
.facts dt{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.facts dd{margin:2px 0 0; font-size:16px}
.facts div:not(.wide) dd{font-family:var(--display); font-weight:800; font-size:36px; line-height:1.05}
.photos.three{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
.photos.three img.big{grid-column:1/-1; aspect-ratio:4/3; object-position:50% 70%}
.photos.three img:nth-child(2){transform:none}
.photos.three img:not(.big){aspect-ratio:3/4}
.card.cherry .chip{color:var(--cream)}
.proof{display:inline-block; margin-top:6px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-decoration:underline; text-underline-offset:4px}
.next{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.next.two{grid-template-columns:repeat(2,1fr)}
.role-list{margin:6px 0 0; display:grid; gap:6px}
.role-list dt{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-top:8px}
.role-list dd{margin:0; padding-left:18px; position:relative}
.role-list dd::before{content:"★"; position:absolute; left:0; font-size:12px; top:3px; color:var(--cherry)}
.next > div{display:grid; gap:10px; align-content:start; padding:20px; border:1.5px solid var(--brown); border-radius:18px}
.next b{font-family:var(--display); font-weight:800; font-size:26px; line-height:1.05}
.next .chip{justify-self:start}
@media (max-width:820px){ .next,.next.two{grid-template-columns:1fr} }

.dinner-top{display:grid; grid-template-columns:minmax(260px,400px) 1fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:clamp(24px,4vw,40px)}
.dinner-top .copy{display:grid; gap:18px; max-width:34em; font-size:18px}
.plan-page{margin:0; background:var(--cream); padding:12px 12px 10px; border-radius:6px; transform:rotate(-2deg); box-shadow:0 14px 34px rgba(20,10,6,.35); display:grid; gap:8px}
.plan-page img{width:100%; height:auto; border-radius:2px}
.plan-page figcaption{color:var(--brown); font-size:12px; text-align:center}
.night{margin-top:clamp(32px,5vw,56px)}
.night-label{margin-bottom:12px; text-transform:uppercase; letter-spacing:.12em; font-size:12px}
.night-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.night-row img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:18px}
@media (max-width:820px){ .dinner-top{grid-template-columns:1fr} .plan-page{max-width:380px; margin-inline:auto} }
@media (max-width:520px){ .night-row{grid-template-columns:1fr 1fr} .night-row img:first-child{grid-column:1/-1; aspect-ratio:4/3} }

.sheetbox{border:0; padding:0; background:transparent; max-width:min(94vw,860px); max-height:94vh; overflow:visible}
.sheetbox::backdrop{background:rgba(42,24,18,.88)}
.sheetbox img{width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:var(--cream)}
.sheetbox .close{position:absolute; top:-18px; right:-18px; width:44px; height:44px; border-radius:50%; border:0; background:var(--butter); color:var(--brown); font:600 22px/1 var(--display); cursor:pointer}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .track{animation:none} *{transition:none!important} }

/* Interactive edition — Mischa's sketchbook, brought to life. */
:root { --ease:cubic-bezier(.2,.75,.25,1); --nav-height:80px; }
[hidden] { display:none!important }
button { font:inherit; cursor:pointer; color:inherit }
button,a { -webkit-tap-highlight-color:transparent }
button { touch-action:manipulation }
button:disabled { cursor:default }
:focus-visible { outline:3px solid currentColor; outline-offset:6px }
html { scroll-padding-top:100px }
body { overflow-x:clip }
body.dialog-open { overflow:hidden }
::selection { color:var(--brown); background:var(--butter) }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip-link { position:fixed; left:20px; top:10px; z-index:100; padding:12px 20px; background:var(--butter); color:var(--brown); transform:translateY(-180%); border-radius:12px }
.skip-link:focus { transform:none }
.scroll-progress { position:fixed; inset:0 0 auto; height:3px; z-index:90; background:var(--butter); transform:scaleX(0); transform-origin:left; pointer-events:none }
.gutter { padding-inline:clamp(22px,4.5vw,80px) }
.eyebrow { font:400 11px/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px }
.nav { height:var(--nav-height); background:var(--cherry); color:var(--cream); top:0; padding-block:15px; border-bottom:1px solid rgba(251,243,228,.22); gap:32px }
.logo { font-weight:800; font-size:23px; letter-spacing:-.05em }
.logo span.face { width:36px; height:36px }
.logo-star { color:var(--butter); font-size:25px; margin-left:0 }
.nav nav { margin-left:auto }
.nav ul { gap:32px }
.nav ul a { display:inline-block; padding:6px 0; position:relative; font-size:11px }
.nav ul a::after { content:''; position:absolute; bottom:0; left:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease) }
.nav ul a:hover::after,.nav ul a[aria-current]::after { transform:scaleX(1) }
.menu-toggle { background:transparent; border:1px solid rgba(251,243,228,.55); border-radius:99px; padding:9px 15px; display:flex; align-items:center; gap:14px; font:11px var(--mono); text-transform:uppercase; transition:background .2s,color .2s }
.menu-toggle:hover { color:var(--cherry); background:var(--cream) }
.menu-icon { display:grid; gap:4px; width:15px }
.menu-icon i { display:block; height:1px; width:100%; background:currentColor }
.hero { min-height:660px; height:calc(100svh - var(--nav-height)); max-height:960px; grid-template-rows:auto 1fr auto; padding-block:25px 28px; isolation:isolate; --pointer-x:0px; --pointer-y:0px }
.hero .top { align-items:center; z-index:2 }
.hero .top .mono { font-size:10px; letter-spacing:.07em }
.availability { text-decoration:none }
.availability:hover { color:var(--butter) }
.tick { width:7px; height:7px }
.stage { padding:0 0 80px; min-height:0; }
.disc-wrap { transform:translate(var(--pointer-x),var(--pointer-y)); transition:transform .55s var(--ease); z-index:1 }
.disc { width:clamp(280px,35vw,470px); background:var(--pink); isolation:isolate; box-shadow:0 0 0 1px rgba(251,243,228,.15); transition:transform .65s var(--ease),box-shadow .4s }
.disc .d-sketch { height:106%; top:1%; }
.disc .d-photo { object-position:50% 50%; transform:scale(1.1) rotate(-5deg) }
.disc:hover .d-photo,.disc:focus-visible .d-photo { opacity:0; transform:scale(1.1) rotate(-5deg) }
.disc:hover .d-sketch,.disc:focus-visible .d-sketch { opacity:1; transform:translateX(-50%) }
.disc:hover { box-shadow:0 0 0 10px rgba(251,243,228,.12); transform:rotate(-3deg) }
.disc[aria-pressed="true"] { transform:rotate(3deg) }
.disc[aria-pressed="true"] .d-photo { opacity:1; transform:scale(1) rotate(0) }
.disc[aria-pressed="true"] .d-sketch { opacity:0; transform:translateX(-50%) scale(.95) }
.portrait-orbit { position:absolute; top:13%; right:-135px; transform:rotate(13deg); font-family:var(--display); font-size:17px; font-style:italic; color:var(--butter); pointer-events:none }
.disc-hint { position:absolute; left:50%; transform:translateX(-50%) rotate(-6deg); bottom:25%; background:var(--butter); color:var(--brown); border-radius:99px; padding:10px 17px; font-size:10px; white-space:nowrap; pointer-events:none; box-shadow:0 3px 0 rgba(42,24,18,.2) }
.hero h1 { font-size:clamp(95px,18.8vw,300px); line-height:.77; letter-spacing:-.075em; bottom:80px; z-index:2; }
.hero h1 .ol { -webkit-text-stroke:1.5px var(--cream) }
.name-period { color:var(--butter) }
.hero-note { position:absolute; font:500 16px/1.4 var(--display) }
.note-left { left:2%; top:26%; transform:rotate(-8deg) }
.note-star { font-size:65px; line-height:1; display:block; color:var(--butter); margin-bottom:20px; animation:gentle-turn 18s linear infinite; width:65px; text-align:center }
.note-right { right:2%; top:30%; font-size:24px; transform:rotate(7deg); text-align:right }
.note-right svg { width:85px; height:65px; margin-top:10px; color:var(--butter) }
.hero .bottom { z-index:3; flex-wrap:nowrap }
.hero .bottom .mono { font-size:10px }
.scroll-cue { text-decoration:none; display:flex; align-items:center; gap:18px }
.scroll-cue span { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(251,243,228,.6); border-radius:50%; font-size:17px; transition:transform .3s }
.scroll-cue:hover span { transform:translateY(4px) }
@keyframes gentle-turn { to { transform:rotate(360deg) } }
.intro { background:var(--cream); color:var(--brown); padding-block:105px 78px; }
.intro h2 { font-size:clamp(48px,7.2vw,104px); line-height:.97; letter-spacing:-.045em; position:relative; width:fit-content; margin:0 auto }
h2 em,h3 em { font-weight:400; font-family:Georgia,'Times New Roman',serif; letter-spacing:-.055em }
.intro h2 em { color:var(--cherry); }
.inline-spark { position:absolute; width:55px; right:-85px; top:20px; color:var(--cherry); transform:rotate(-15deg) }
.intro-caption { font-size:16px; margin:26px auto 48px; line-height:1.7; color:#65544b }
.lanes { max-width:none; gap:18px; text-align:left; }
.lane { border-radius:12px; padding:26px 28px; min-height:192px; justify-content:space-between; overflow:hidden; position:relative; transition:transform .4s var(--ease); isolation:isolate }
.lane-top { display:flex; justify-content:space-between; align-items:center; font-size:10px; z-index:2 }
.lane-top > span { font-size:24px; line-height:1; transition:transform .35s }
.lane b { font-size:clamp(36px,4vw,58px); letter-spacing:-.035em; z-index:2; margin-top:22px; }
.lane-bottom { font-size:13px; z-index:2 }
.lane-peek { position:absolute; width:105px; height:140px; object-fit:cover; right:33px; top:38px; z-index:1; opacity:0; transform:translate(35px,65px) rotate(16deg); transition:transform .45s var(--ease),opacity .3s; border:5px solid var(--cream); box-shadow:0 3px 12px #2a18122a; pointer-events:none }
.lane:hover,.lane:focus-visible { transform:translateY(-7px) }
.lane:hover .lane-peek,.lane:focus-visible .lane-peek { transform:translate(0,0) rotate(8deg); opacity:1 }
.lane:hover .lane-top > span { transform:rotate(45deg) }
.marquee { margin:0; padding:20px 0; color:var(--cream); border-block:1px solid #ffffff2b; }
.track { animation-duration:48s; gap:36px }
.track span { font-family:var(--display); font-size:20px; letter-spacing:-.01em; text-transform:none; gap:36px; }
.track span::after { content:'✳'; background:transparent; color:var(--pink); width:auto; height:auto; font-size:26px; line-height:1; }
.marquee:hover .track { animation-play-state:paused }
.works { padding-block:100px 90px; }
.sec-title { margin-bottom:34px }
.sec-title h2 { font-size:clamp(48px,7.2vw,104px); letter-spacing:-.055em }
.sec-title .eyebrow { margin-bottom:18px; color:var(--pink) }
.work-index { font-size:10px; padding-bottom:5px; color:#c6b4aa }
.work-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { background:transparent; border:1px solid #ffffff50; border-radius:99px; font-size:12px; padding:10px 19px; transition:background .25s,color .25s,border-color .25s; }
.filters button[aria-pressed="true"] { background:var(--cream); color:var(--brown); border-color:var(--cream) }
.filters button:hover { border-color:var(--pink) }
.filters button span { margin-left:6px; font:9px var(--mono); opacity:.65 }
#filterStatus { font-size:10px; color:#c6b4aa; flex-shrink:0 }
.project-list { display:grid; gap:24px; }
.project-preview { display:grid; grid-template-columns:1fr 1fr; min-height:500px; border-radius:18px; overflow:hidden; color:var(--brown); background:var(--pink); scroll-margin-top:100px; }
.preview-fashion { background:var(--pink) }
.preview-dinner { background:var(--cream) }
.preview-campaign { background:var(--butter) }
.project-art { padding:0; position:relative; border:0; display:block; overflow:hidden; border-radius:0; background:var(--cherry); min-width:0; isolation:isolate }
.project-art > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .8s var(--ease); }
.dinner-art > img { object-position:center 57%; }
.dinner-art::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#170d0790); pointer-events:none }
.art-label { position:absolute; bottom:24px; left:26px; color:var(--cream); font-size:10px; z-index:2; }
.view-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-35%) rotate(-8deg) scale(.8); opacity:0; border-radius:50%; width:112px; height:112px; background:var(--butter); color:var(--brown); display:grid; place-items:center; font:600 15px var(--display); transition:transform .35s var(--ease),opacity .25s; z-index:3 }
.project-art:hover > img { transform:scale(1.04) }
.project-art:hover .view-badge,.project-art:focus-visible .view-badge { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1) }
.project-art:focus-visible { outline-offset:-8px; z-index:2 }
.project-summary { padding:clamp(28px,4vw,58px); display:flex; flex-direction:column; align-items:flex-start; }
.project-meta { display:flex; justify-content:space-between; gap:20px; width:100%; font-size:9px; letter-spacing:.07em; margin-bottom:42px; }
.project-meta span:last-child { opacity:.68; text-align:right; }
.project-summary h3 { font-size:clamp(38px,4.5vw,68px); line-height:.95; letter-spacing:-.045em; margin-bottom:22px; }
.project-summary > p { font-size:15px; line-height:1.75; max-width:31em; }
.project-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:23px; margin-bottom:38px; }
.project-tags span { font-size:10px; border:1px solid #2a181240; padding:5px 10px; border-radius:99px }
.project-link { background:transparent; border:0; border-top:1px solid #2a181238; width:100%; margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding:18px 0 0; font-weight:500; font-size:14px; text-align:left }
.arrow-circle { display:grid; place-items:center; width:42px; height:42px; border:1px solid currentColor; border-radius:50%; font-size:24px; transition:transform .35s var(--ease),background .25s,color .25s }
.project-link:hover .arrow-circle { transform:rotate(45deg); color:var(--cream); background:var(--brown); border-color:var(--brown) }
.preview-fashion .project-art { order:2 }
.fashion-art { background:#eaa0b7; }
.fashion-art .fashion-main { width:72%; height:83%; left:17%; top:8%; transform:rotate(5deg); border:9px solid var(--cream); box-shadow:0 12px 30px #2a181235; object-position:center; }
.fashion-art .fashion-sketch { width:26%; height:69%; top:23%; left:2%; object-fit:contain; transform:rotate(-12deg); filter:drop-shadow(4px 8px 5px #2a181229) }
.fashion-art .art-label { color:var(--brown); }
.fashion-art:hover .fashion-main { transform:rotate(0) scale(1.04) }
.fashion-art:hover .fashion-sketch { transform:rotate(-5deg) translateY(-8px) }
.campaign-art { background:#e9ce76; }
.campaign-wordmark { position:absolute; left:9%; top:12%; font-family:Georgia,serif; text-align:center; font-size:clamp(20px,2.5vw,36px); line-height:1.1; letter-spacing:.04em; transform:rotate(-8deg) }
.campaign-wordmark span { font-size:clamp(36px,4.5vw,66px); font-style:italic; letter-spacing:-.05em }
.campaign-art > img { width:56%; height:75%; left:38%; top:16%; transform:rotate(9deg); object-fit:contain; filter:drop-shadow(0 14px 18px #2a181239) }
.campaign-art:hover > img { transform:rotate(3deg) scale(1.03) }
.campaign-art .art-label { color:var(--brown); }
.current-roles { position:static; box-shadow:none; margin-top:90px; border-radius:18px; padding:38px 42px; }
.current-roles h3 { font-size:clamp(34px,4vw,56px); letter-spacing:-.04em; }
.current-roles .lane-tag { font-size:10px; margin-bottom:20px }
.current-roles .tick { background:var(--cherry) }
.current-roles .kicker { font-family:var(--body); font-size:15px; font-weight:400; }
.current-roles .next { margin-top:32px; gap:35px; }
.current-roles .next > div { border:0; border-top:1px solid #2a181235; border-radius:0; padding:24px 0 0; font-size:14px; }
.current-roles .next b { font-size:26px; }
.current-roles .chip { font-size:9px; padding:4px 10px; }
.current-roles .role-list dt { font-size:10px; }
.about { padding-block:100px; overflow:clip; }
.about-in { grid-template-columns:1fr 1fr; gap:clamp(38px,8vw,110px) }
.frame { max-width:350px; margin-inline:auto; width:85%; transform:rotate(-5deg); padding:12px 12px 36px; background:var(--cream); box-shadow:0 12px 0 #2a181211; }
.frame img.photo { border-radius:0; }
.frame .sticker { width:38%; left:auto; right:-15%; bottom:-6%; transform:rotate(15deg); }
.about .eyebrow { margin-bottom:24px; }
.about h2 { font-size:clamp(46px,5.6vw,84px); letter-spacing:-.045em; }
.about .copy { font-size:16px; line-height:1.8; }
.stats { margin-top:38px; padding-top:24px; border-top:1px solid #2a181238; gap:20px; }
.stats b { font-size:55px; margin-bottom:10px; font-variant-numeric:tabular-nums; }
.stats span { font-size:11px; line-height:1.5; display:block; }
.faq { max-width:none; display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; background:var(--cream); color:var(--brown); padding-block:100px; }
.faq h2 { font-size:clamp(40px,5.2vw,76px); text-align:left; letter-spacing:-.04em; }
.faq .eyebrow { color:var(--cherry); }
.faq-list details { background:none; border-radius:0; border-top:1px solid #2a181235; margin:0; }
.faq-list details:last-child { border-bottom:1px solid #2a181235; }
.faq-list summary { padding:22px 0; align-items:center; font-size:19px; line-height:1.3; letter-spacing:-.015em; }
.faq-list summary::after { width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; border:1px solid #2a181238; font-size:19px; }
.faq-list details p { padding:0 36px 24px 0; font-size:14px; line-height:1.8; color:#65544b; }
.faq-list details[open] summary { color:var(--cherry); }
.faq-list details[open] p { animation:answer-in .35s var(--ease); }
@keyframes answer-in { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }
.contact { padding-top:50px; padding-bottom:26px; }
.contact-top { display:flex; justify-content:space-between; gap:20px; margin-bottom:65px; align-items:baseline }
.contact-top .mono { font-size:9px; }
.contact h2 { font-size:clamp(66px,12.6vw,190px); line-height:.9; letter-spacing:-.06em; max-width:none; position:relative; }
.contact h2 em { color:var(--butter); }
.contact-star { position:absolute; right:4%; top:10%; font-size:clamp(100px,16vw,240px); color:var(--pink); animation:gentle-turn 35s linear infinite; line-height:1; }
.contact-bottom { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-top:45px; }
.contact-bottom p { font-size:16px; line-height:1.7; }
.contact .links { margin:0; align-items:center; gap:10px; }
.contact .btn { font-size:12px; padding:12px 20px; border-width:1px; gap:25px; transition:transform .25s,background .25s }
.contact .copy-email { background:transparent; }
.social-link { display:block; font:10px var(--mono); margin-left:15px; text-underline-offset:5px; }
.contact .copy-status { min-height:22px; margin-top:16px; font-size:11px; text-align:right; }
.foot { margin-top:60px; border-top:1px solid #fbf3e43b; padding-top:22px; font-size:9px; align-items:center; }
.footer-controls { display:flex; gap:26px; align-items:center; }
.foot button { padding:0; border:0; background:none; font:inherit; text-transform:uppercase; display:flex; gap:8px; align-items:center; }
.foot a { text-decoration:none; }
.motion-dot { width:6px; height:6px; background:var(--butter); border-radius:50%; }
.motion-paused .track,.motion-paused .note-star,.motion-paused .contact-star { animation-play-state:paused }
.motion-paused *, .motion-paused *::before,.motion-paused *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
html:has(.motion-paused) { scroll-behavior:auto; }
.motion-ready [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.motion-ready [data-reveal].is-visible,.motion-paused [data-reveal] { opacity:1; transform:none; }
/* Native dialogs keep focus and keyboard navigation inside the open surface. */
dialog { margin:auto; color:var(--brown); }
dialog::backdrop { background:#21110ce0; backdrop-filter:blur(6px); }
dialog[open] { animation:dialog-in .35s var(--ease); }
@keyframes dialog-in { from { opacity:0; transform:translateY(20px) scale(.985) } to { opacity:1; transform:none } }
.menu-panel { background:var(--pink); width:100vw; max-width:none; height:100dvh; max-height:none; border:0; padding:30px clamp(24px,6vw,90px); }
.menu-top { display:flex; justify-content:space-between; align-items:center; }
.menu-close { background:transparent; padding:10px 18px; border:1px solid currentColor; border-radius:99px; font:12px var(--mono); }
.menu-panel nav { margin:55px 0 40px; }
.menu-panel nav a { display:flex; gap:30px; align-items:center; text-decoration:none; font:600 clamp(40px,7vw,105px)/1.15 var(--display); letter-spacing:-.06em; padding:10px 0; border-bottom:1px solid #2a181238; transition:color .2s,padding-left .3s; }
.menu-panel nav a .mono { font-size:11px; font-weight:400; letter-spacing:0; }
.menu-panel nav a span:last-child { margin-left:auto; font-size:.7em; font-weight:400; }
.menu-panel nav a:hover { padding-left:14px; color:var(--cherry) }
.menu-panel > p { font-size:10px; line-height:1.9; }
.project-dialog { width:min(1150px,94vw); max-width:none; max-height:92dvh; padding:0; border:0; border-radius:20px; overscroll-behavior:contain; background:var(--cream); }
.project-dialog-bar { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:var(--brown); color:var(--cream); }
.project-dialog-bar .mono { font-size:10px; }
.project-close { display:flex; gap:18px; align-items:center; border:0; background:transparent; font-size:12px; padding:6px; }
.project-close span { font-size:27px; line-height:1; }
.project-dialog .card { position:relative; top:auto!important; border-radius:0; box-shadow:none; padding:clamp(25px,4vw,55px); overflow:hidden; }
.project-dialog .card h3 { font-size:clamp(38px,5vw,68px); }
.project-dialog .card .kicker { font-size:22px; }
.project-dialog .card .copy { font-size:16px; }
.project-dialog .card .chip { font-size:10px; }
.project-dialog .btn { font-size:13px; }
.project-dialog .card img { cursor:zoom-in; }
.gallery-trigger { display:block; background:transparent; border:0; border-radius:12px; padding:0; width:100%; transition:transform .35s var(--ease); }
.gallery-trigger:hover { transform:scale(1.015) }
.photos > .gallery-trigger:nth-child(2) { transform:translateY(-20px); }
.photos > .gallery-trigger img { transform:none; height:100%; }
.night-row .gallery-trigger img { height:100%; }
.project-dialog .btn.solid { font-family:var(--body); }
.gallery-dialog { background:var(--brown); color:var(--cream); width:min(1050px,94vw); max-width:none; border:0; padding:52px 30px 20px; max-height:95dvh; border-radius:16px; overscroll-behavior:contain; }
.gallery-dialog figure { margin:0; }
#galleryImage { width:100%; max-height:calc(95dvh - 175px); object-fit:contain; margin:auto; }
#galleryCaption { max-width:700px; margin:14px auto 0; text-align:center; font-size:12px; line-height:1.5; }
.gallery-close { position:absolute; right:14px; top:8px; width:36px; height:36px; border:1px solid #ffffff60; background:none; border-radius:50%; font-size:24px; }
.gallery-controls { display:flex; gap:25px; align-items:center; justify-content:center; margin-top:12px; }
.gallery-controls button { border:1px solid #ffffff60; border-radius:50%; background:none; width:38px; height:38px; font-size:19px; }
#galleryCounter { font-size:11px; }
@media(min-width:1600px) { .gutter { padding-inline:max(60px,calc((100vw - 1440px)/2)) } }
@media(max-width:1000px) { .hero-note { font-size:14px } .note-right { font-size:20px } .portrait-orbit { right:-85px; font-size:13px } .project-meta { flex-wrap:wrap; gap:6px; margin-bottom:30px } .project-meta span:last-child { text-align:left } .project-summary { padding:30px } .project-preview { min-height:460px } .contact-bottom { align-items:start; flex-direction:column } .faq { gap:35px } .contact-star { right:0 } }
@media(max-width:720px) {
 :root { --nav-height:70px }
 .nav { gap:16px }
 .logo { font-size:20px }
 .nav nav { display:none }
 .menu-toggle { margin-left:auto }
 .hero { min-height:650px; height:calc(92svh - 70px); max-height:800px; padding-top:23px; }
 .hero .top .mono { font-size:9px }
 .hero .top { align-items:start; gap:8px }
 .availability { max-width:155px; text-align:right; }
 .stage { padding-bottom:60px; }
 .disc { width:clamp(260px,57vw,380px); }
 .hero-note.note-left { top:19%; left:-1%; font-size:12px; }
 .note-left > span:last-child { display:none; }
 .note-star { font-size:45px; width:45px; }
 .note-right { top:auto; bottom:18%; right:1%; font-size:15px; }
 .note-right svg { width:48px; height:39px; margin-top:4px; }
 .portrait-orbit { right:-34px; top:6%; font-size:12px; }
 .hero h1 { font-size:19.2vw; bottom:94px; }
 .hero .bottom { align-items:end; }
 .hero .bottom .mono { font-size:8px; }
 .scroll-cue { max-width:145px; gap:9px; text-align:right; }
 .scroll-cue span { min-width:26px; width:26px; height:26px; }
 .intro { padding-block:70px 55px; }
 .intro h2 { font-size:clamp(42px,8.3vw,60px); }
 .inline-spark { width:30px; right:-34px; top:0; }
 .intro-caption { font-size:14px; margin:24px auto 35px; }
 .lanes { gap:10px; }
 .lane { min-height:150px; padding:18px; border-radius:10px; }
 .lane-top { font-size:8px; }
 .lane b { font-size:30px; margin-top:18px; }
 .lane-bottom { font-size:11px; }
 .lane-peek { width:65px; height:90px; right:15px; top:35px; }
 .works { padding-block:65px; }
 .work-index { display:none; }
 .work-toolbar { gap:10px; align-items:start; }
 .filters { gap:6px; }
 .filters button { font-size:11px; padding:9px 13px; }
 #filterStatus { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .project-preview { grid-template-columns:1fr; }
 .project-art { height:370px; }
 .preview-fashion .project-art { order:0; }
 .project-summary { padding:28px; }
 .project-meta { margin-bottom:25px; justify-content:space-between; flex-wrap:nowrap; font-size:8px; }
 .project-summary h3 { font-size:45px; }
 .project-summary > p { max-width:none; font-size:14px; }
 .project-tags { margin:20px 0 25px; }
 .campaign-wordmark { font-size:30px; top:15%; }
 .campaign-wordmark span { font-size:56px; }
 .campaign-art > img { width:55%; height:82%; top:8%; }
 .fashion-art .fashion-main { width:60%; left:29%; }
 .fashion-art .fashion-sketch { width:24%; left:8%; }
 .current-roles { margin-top:55px; padding:28px; }
 .current-roles .next { gap:26px; }
 .about { padding-block:70px; }
 .about-in { grid-template-columns:1fr; gap:55px; }
 .frame { max-width:285px; width:75%; }
 .about h2 { font-size:54px; }
 .about .copy { font-size:15px; }
 .stats { grid-template-columns:repeat(3,1fr); gap:20px; }
 .stats b { font-size:46px; }
 .faq { grid-template-columns:1fr; gap:14px; padding-block:65px; }
 .faq h2 { font-size:49px; margin-bottom:20px; }
 .faq h2 br { display:none; }
 .faq-list summary { font-size:18px; }
 .contact { padding-top:35px; }
 .contact-top { margin-bottom:45px; }
 .contact-top > .mono { display:none; }
 .contact-top .eyebrow { font-size:9px; }
 .contact h2 { font-size:14vw; }
 .contact-star { font-size:19vw; top:15%; }
 .contact-bottom { margin-top:35px; gap:22px; }
 .contact-bottom p { font-size:14px; }
 .contact .links { gap:9px; }
 .contact .btn { padding:11px 17px; }
 .social-link { margin-left:0; margin-top:10px; flex-basis:100%; }
 .foot { margin-top:40px; gap:18px; font-size:8px; }
 .footer-controls { flex-basis:100%; justify-content:space-between; }
 .project-dialog { width:96vw; max-height:94dvh; border-radius:12px; }
 .project-dialog .card h3 { font-size:39px; }
 .project-dialog .card .kicker { font-size:19px; }
 .project-dialog .card .copy { font-size:15px; }
 .project-dialog .dinner-top { margin-top:32px; }
 .project-dialog-bar { padding:10px 18px; }
 .gallery-dialog { padding:48px 16px 18px; }
 .gallery-trigger { min-width:0; }
}
@media(max-width:560px) {
 .lanes { grid-template-columns:1fr; }
 .lane { min-height:122px; padding:19px 23px; }
 .lane b { font-size:37px; margin-top:5px; }
 .lane-bottom { position:absolute; right:24px; bottom:21px; font-size:10px; max-width:140px; text-align:right; }
 .lane-peek { width:88px; height:112px; top:10px; right:70px; }
 .hero { min-height:590px; }
 .hero h1 { bottom:105px; }
 .portrait-orbit { right:-17px; top:2%; }
 .disc-hint { bottom:22%; font-size:9px; padding:8px 13px; }
 .night-row { grid-template-columns:1fr 1fr; }
 .night-row > .gallery-trigger:first-child { grid-column:1/-1; }
 .night-row > .gallery-trigger:first-child img { aspect-ratio:4/3; }
 .night-row img:first-child { grid-column:auto; aspect-ratio:3/4; }
 .project-art { height:320px; }
 .campaign-wordmark { font-size:23px; }
 .campaign-wordmark span { font-size:45px; }
 .project-summary { padding:24px; }
 .project-tags span { font-size:9px; }
 .menu-panel { padding:25px; }
 .menu-panel nav { margin-top:60px; }
 .menu-panel nav a { font-size:49px; padding:19px 0; gap:20px; }
 .menu-panel nav a .mono { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto!important }
 *,*::before,*::after { animation:none!important; transition:none!important }
 .motion-ready [data-reveal] { opacity:1; transform:none }
 .disc-wrap { transform:none!important }
}
@media(max-width:560px) {
 .inline-spark { right:-5px; top:-26px; width:25px; }
 .logo { white-space:nowrap; }
}
@media(max-width:380px) {
 .logo { font-size:18px; gap:8px; }
 .logo span.face { width:30px; height:30px; }
 .logo-star { display:none; }
 .hero .top { flex-wrap:nowrap; gap:12px; }
 .hero .top > .mono { max-width:135px; font-size:8px; }
 .hero .top .availability { max-width:130px; }
 .note-right { bottom:24%; font-size:12px; }
 .note-right svg { display:none; }
 .hero .bottom .mono { font-size:7px; }
}