@font-face { font-family: Outfit; src: url('./Outfit-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('./InstrumentSerif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('./InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('./InstrumentSans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('./InstrumentSans-Italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
:root { --grain-image:none; --grain-size:256px 256px; --glass-tint:42%; --glass-lens:blur(10px) saturate(1.4) brightness(.8); --bar-fade:17,19,25; --serif:'Instrument Serif',Georgia,serif; --sans:'Instrument Sans',Arial,sans-serif; color-scheme:dark; --ink:#111319; --paper:#f3f1eb; --soft:#cbc9c1; --sage:#b6c1b1; --line:rgba(243,241,235,.28); --form-surface:#efede7; --form-text:#111319; --form-border:transparent; --hero-shade:rgba(17,19,25,.75); }
@media(prefers-color-scheme:light){
 :root { --glass-tint:30%; --glass-lens:blur(10px) saturate(1.4) brightness(1.5); --bar-fade:243,241,235; color-scheme:light; --ink:#f3f1eb; --paper:#111319; --soft:#555b58; --sage:#4d6252; --line:rgba(17,19,25,.25); --form-surface:#fffdfa; --form-text:#111319; --form-border:#c7cbc3; --hero-shade:rgba(17,19,25,.75); }
}
* { box-sizing:border-box; }
html { background:var(--ink); scrollbar-gutter:stable; }
html.project-open { overflow:hidden; }
body { margin:0; overflow-x:clip; min-height:100vh; color:var(--paper); font-family:var(--sans); isolation:isolate; transition:color .25s; }

/* Print-stipple texture: drawn once by texture.js (seamless, at the screen's real resolution) and
   set as --grain-image. It's a background on the page itself so it scrolls with the content. */
body { background-image:var(--grain-image); background-size:var(--grain-size); }
html.project-open body { background-image:none; }
.project-view { background-image:var(--grain-image); background-size:var(--grain-size); background-attachment:local; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
img { max-width:100%; }
.shell { width:min(100% - 48px,1440px); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:40; isolation:isolate; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); transition:color .25s ease, border-color .25s ease; }
.site-header nav { display:flex; gap:24px; align-items:center; transition:opacity .25s ease, transform .25s ease; }
.site-header nav a { font-size:13px; letter-spacing:.03em; opacity:.75; transition:opacity .2s; }
.site-header nav a:hover, .site-header nav a[aria-current] { opacity:1; }
.brand { position:relative; font-family:Outfit,Arial,sans-serif; font-weight:800; font-size:27px; letter-spacing:-.05em; line-height:1; transition:color .25s ease; }
.home-header { position:fixed; z-index:40; top:0; left:0; right:0; border-bottom:0; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; }
.serif { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
.serif em, .serif i { font-style:italic; }
.home-hero { width:100%; aspect-ratio:1; max-height:100vh; max-height:100svh; position:relative; overflow:hidden; isolation:isolate; background:#323c3b; }
.home-hero::before,.home-hero::after { content:''; position:absolute; inset:0 0 auto; height:clamp(180px,26vh,300px); pointer-events:none; }
.home-hero::before { z-index:2; background:var(--grain-image) repeat; background-size:var(--grain-size); -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1.0) 0%,rgba(0,0,0,0.8) 14%,rgba(0,0,0,0.556) 29%,rgba(0,0,0,0.344) 44%,rgba(0,0,0,0.189) 58%,rgba(0,0,0,0.089) 72%,rgba(0,0,0,0.033) 85%,rgba(0,0,0,0.009) 94%,rgba(0,0,0,0.0) 100%); mask-image:linear-gradient(to bottom,rgba(0,0,0,1.0) 0%,rgba(0,0,0,0.8) 14%,rgba(0,0,0,0.556) 29%,rgba(0,0,0,0.344) 44%,rgba(0,0,0,0.189) 58%,rgba(0,0,0,0.089) 72%,rgba(0,0,0,0.033) 85%,rgba(0,0,0,0.009) 94%,rgba(0,0,0,0.0) 100%); }
.home-hero::after { z-index:1; background:linear-gradient(to bottom,rgba(var(--bar-fade),0.9) 0%,rgba(var(--bar-fade),0.72) 14%,rgba(var(--bar-fade),0.5) 29%,rgba(var(--bar-fade),0.31) 44%,rgba(var(--bar-fade),0.17) 58%,rgba(var(--bar-fade),0.08) 72%,rgba(var(--bar-fade),0.03) 85%,rgba(var(--bar-fade),0.008) 94%,rgba(var(--bar-fade),0) 100%); }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about { color:var(--paper); padding:clamp(55px,8vw,110px) 0; }
.about .shell { width:min(100% - 128px,1120px); }
.about-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(50px,7vw,110px); align-items:center; }
.portrait-placeholder { aspect-ratio:.85; background:linear-gradient(150deg,#a6a399,#777c75 44%,#333d3c); position:relative; }
.portrait-placeholder span { position:absolute; bottom:18px; left:20px; color:#fff; font:600 10px/1 var(--sans); letter-spacing:.16em; }
.about h1 { font-size:clamp(45px,6vw,80px); line-height:1.02; margin:0 0 30px; }
.about p { font-size:clamp(18px,2vw,25px); line-height:1.38; max-width:750px; margin:0; }
.portfolio-lead { padding:40px 0 95px; }
.lead-top { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.lead-top h1 { font-size:clamp(80px,14vw,200px); line-height:.82; margin:0; }
.lead-top .eyebrow { align-self:start; padding-top:8px; }
.photo-panels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.clip-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.photo-panel,.clip-panel { min-width:0; position:relative; overflow:hidden; }
.photo-panel { aspect-ratio:4/5; }
.clip-panel { aspect-ratio:16/9; }
.photo-panel span,.clip-panel span { position:absolute; bottom:18px; left:18px; z-index:1; font-size:10px; font-weight:600; letter-spacing:.15em; color:#fff; text-shadow:0 1px 5px #111; }
.clip-panel { background:#374340; }
.clip-panel video { width:100%; height:100%; object-fit:cover; filter:brightness(.78); }
.clip-panel:nth-child(2) video { filter:sepia(.35) saturate(.65) brightness(.95); transform:scale(1.12); }
.clip-panel:nth-child(3) video { filter:sepia(.6) hue-rotate(155deg) saturate(.65) brightness(.8); transform:scale(1.2); }
.clip-panel:nth-child(4) video { filter:sepia(.25) hue-rotate(70deg) brightness(.85); transform:scale(1.08); }
.lead-link { display:inline-flex; align-items:center; gap:35px; border-bottom:1px solid currentColor; padding:16px 0 9px; margin-top:25px; font-size:14px; }
.lead-link span { font-size:20px; }
.work-index-heading { border-top:1px solid var(--line); padding:25px 0 42px; scroll-margin-top:20px; }
.work-index-heading h2 { font-size:clamp(48px,7vw,90px); line-height:1; margin:16px 0 0; }
.home-work { border-top:1px solid var(--line); }
.home-links { position:relative; width:min(100% - 128px,1120px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.home-links::after { content:''; position:absolute; top:24%; bottom:24%; left:50%; width:1px; background:var(--line); pointer-events:none; }
.home-link { display:flex; min-width:0; min-height:clamp(176px,15vw,228px); flex-direction:column; align-items:center; justify-content:center; padding:24px clamp(18px,3vw,48px); text-align:center; }
.home-link .eyebrow { display:block; }
.home-link-title { display:inline-block; margin-top:9px; font-family:var(--serif); font-size:clamp(40px,6vw,92px); letter-spacing:-.02em; line-height:1; padding-bottom:.06em; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .45s cubic-bezier(.32,.7,.2,1); }
.home-link:is(:hover,:focus-visible) .home-link-title { background-size:100% 1px; }
.footer--home { padding:26px 0 30px; }
.footer--home p { font-size:13px; }
.work-mosaic { padding:20px 0 0; }
.mosaic-grid { --mosaic-gap:10px; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:var(--mosaic-gap); height:clamp(750px,75vw,1060px); overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,0.995) 46.6%,rgba(0,0,0,0.965) 51.2%,rgba(0,0,0,0.896) 55.8%,rgba(0,0,0,0.790) 60.3%,rgba(0,0,0,0.653) 64.9%,rgba(0,0,0,0.500) 69.5%,rgba(0,0,0,0.347) 74.1%,rgba(0,0,0,0.210) 78.7%,rgba(0,0,0,0.104) 83.2%,rgba(0,0,0,0.035) 87.8%,rgba(0,0,0,0.005) 92.4%,transparent 97%); mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,0.995) 46.6%,rgba(0,0,0,0.965) 51.2%,rgba(0,0,0,0.896) 55.8%,rgba(0,0,0,0.790) 60.3%,rgba(0,0,0,0.653) 64.9%,rgba(0,0,0,0.500) 69.5%,rgba(0,0,0,0.347) 74.1%,rgba(0,0,0,0.210) 78.7%,rgba(0,0,0,0.104) 83.2%,rgba(0,0,0,0.035) 87.8%,rgba(0,0,0,0.005) 92.4%,transparent 97%); }
.mosaic-tile { position:relative; min-width:0; overflow:hidden; background:#343b3a; }
.mosaic-grid.is-enhanced { display:block; }
.mosaic-grid.is-enhanced .mosaic-tile { position:absolute; left:0; top:0; contain:strict; will-change:transform; transition:transform 1.45s cubic-bezier(.32,.7,.2,1),width 1.45s cubic-bezier(.32,.7,.2,1),height 1.45s cubic-bezier(.32,.7,.2,1),opacity .85s ease; }
.mosaic-grid.is-enhanced .mosaic-tile.is-entering, .mosaic-grid.is-enhanced .mosaic-tile.is-leaving { opacity:0; }
.mosaic-tile > img, .mosaic-tile > video { display:block; width:100%; height:100%; object-fit:cover; }
.mosaic-grid.is-enhanced:not(.is-ready) .mosaic-tile { transition:none; }
.mosaic-face { position:absolute; inset:0; opacity:0; transition:opacity .85s ease; }
.mosaic-face.is-visible { opacity:1; }
.mosaic-face img,.mosaic-face video { display:block; width:100%; height:100%; object-fit:cover; }
.mosaic-label { position:absolute; z-index:1; left:13px; bottom:12px; color:#fff; font-size:9px; font-weight:600; letter-spacing:.12em; text-shadow:0 1px 5px #111; }
.curated-section-title { max-width:1120px; margin:-35px auto 0; padding:12px 0 42px; scroll-margin-top:20px; }
.curated-section-title h1 { font-size:clamp(90px,11vw,170px); line-height:.9; margin:24px 0 0; }
.curated-work { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; row-gap:20px; max-width:1120px; margin-inline:auto; padding-bottom:145px; }
.curated-feature { grid-column:1 / -1; }
.curated-media { position:relative; overflow:hidden; aspect-ratio:1.45; background-color:#343b3a; }
.curated-feature .curated-media { aspect-ratio:16/9; }
.curated-media video { width:100%; height:100%; display:block; object-fit:cover; }
.curated-media::after { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(to bottom,transparent 25%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.74) 100%); transition:background-color .6s ease; }
.curated-media.is-active:not(.is-hero)::after, .curated-item:focus-visible .curated-media::after { background-color:rgba(0,0,0,.18); }
.curated-caption { position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:clamp(20px,3vw,42px); color:#fff; }
.curated-meta { display:flex; flex-direction:column; align-items:flex-start; gap:inherit; transform:translateY(var(--meta-offset,0px)); text-shadow:0 1px 8px rgba(0,0,0,.45); }
.curated-media:is(.is-hero,.is-traveling) .curated-meta { transition:transform var(--expand-duration) var(--expand-ease); }
.curated-caption h2 { font-size:clamp(30px,4vw,60px); line-height:1; margin:0; }
.curated-media.is-feature .curated-caption h2 { font-size:clamp(42px,6vw,85px); }
.curated-caption span { font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:600; }
.curated-caption .curated-date { font-weight:500; opacity:.72; margin-top:-4px; }
.curated-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.curated-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .6s ease,transform 1.6s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.curated-media.is-active .curated-preview { opacity:1; transform:scale(1); }
.curated-caption h2 { background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .45s cubic-bezier(.32,.7,.2,1); }
.curated-media.is-active:not(.is-hero) .curated-caption h2, .curated-item:focus-visible .curated-caption h2 { background-size:100% 1px; }
.curated-item:focus-visible { outline:2px solid var(--paper); outline-offset:4px; }
.page-intro { padding:clamp(80px,12vw,170px) 0 54px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.page-intro h1 { font-size:clamp(72px,13vw,190px); line-height:.85; margin:0; }
.page-intro p { font-size:15px; line-height:1.5; max-width:300px; margin:0; color:var(--soft); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px 20px; padding-bottom:140px; }
.project-card { display:block; }
.media-block { position:relative; overflow:hidden; background:#343b3a; }
.project-card .media-block { aspect-ratio:1.38; }
.media-block::after { content:'IMAGE PLACEHOLDER'; position:absolute; left:20px; bottom:19px; font-size:10px; letter-spacing:.16em; color:#fff; text-shadow:0 1px 5px #111; }
.project-card:hover .media-block { filter:brightness(1.14); }
.tone-wedding { background:linear-gradient(135deg,#787463,#b9ada0 38%,#42443e 76%,#242625); }
.tone-sports { background:linear-gradient(135deg,#232f32,#516661 38%,#9b9179 62%,#262c2a); }
.tone-city { background:linear-gradient(135deg,#3b464d,#746e6a 35%,#ab9f8c 62%,#363936); }
.tone-events { background:linear-gradient(135deg,#2d3339,#585355 40%,#a38770 72%,#302b2c); }
.tone-landscape { background:linear-gradient(145deg,#343e43,#647276 40%,#b3a28c 75%,#3b3e39); }
.tone-portrait { background:linear-gradient(135deg,#4c3c37,#a58f7f 42%,#656563 68%,#2c3031); }
.project-meta { display:flex; justify-content:space-between; gap:15px; padding-top:13px; border-top:1px solid var(--line); margin-top:15px; }
.project-meta h2 { font-family:var(--serif); font-size:clamp(23px,2.7vw,37px); font-weight:400; letter-spacing:-.015em; margin:0; }
.project-meta span { color:var(--soft); font-size:11px; text-transform:uppercase; letter-spacing:.12em; text-align:right; padding-top:8px; }
.film-list { padding-bottom:140px; }
.film-card { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; border-top:1px solid var(--line); padding:30px 0 70px; }
.film-card .media-block { aspect-ratio:16/9; }
.film-card .media-block::after { content:'FILM STILL PLACEHOLDER'; }
.film-card .media-block::before { content:'▶'; position:absolute; inset:0; display:grid; place-items:center; font-size:26px; color:#fff; z-index:1; }
.film-card h2 { font-size:clamp(36px,5vw,70px); line-height:1; margin:0 0 25px; }
.film-card .detail { display:flex; flex-direction:column; justify-content:space-between; }
.film-card .detail p { font-size:13px; color:var(--soft); margin:0; text-transform:uppercase; letter-spacing:.1em; }
.film-card .detail a { align-self:start; font-size:13px; border-bottom:1px solid currentColor; padding-bottom:5px; }
.project-title { padding:90px 0 40px; }
.project-title h1 { font-size:clamp(48px,8vw,118px); line-height:.95; margin:14px 0 22px; }
.project-title p { max-width:640px; line-height:1.5; color:var(--soft); }
.project-cover { aspect-ratio:1.7; }
.project-cover-video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#343b3a; }
[hidden] { display:none!important; }
.project-gallery { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:18px 0 60px; }
.project-gallery .media-block { aspect-ratio:1.2; }
.project-gallery .media-block:first-child { grid-column:span 2; aspect-ratio:1.8; }
.footer { border-top:1px solid var(--line); padding:40px 0 34px; }
.footer-grid { display:flex; justify-content:space-between; gap:20px; align-items:end; }
.footer h2 { font-family:var(--serif); font-size:clamp(45px,7vw,100px); font-weight:400; letter-spacing:-.02em; line-height:1; margin:8px 0 22px; }
.footer a { border-bottom:1px solid currentColor; padding-bottom:5px; }
.footer p { font-size:12px; color:var(--soft); margin:0; }
@media(max-width:780px){
 .site-header{grid-template-columns:1fr;justify-items:center;gap:18px}.site-header nav{grid-column:1;grid-row:2;justify-content:center;gap:22px}.brand{grid-column:1;grid-row:1}
}
@media(max-width:780px){
 .shell{width:min(100% - 32px,1440px)}
 .about .shell{width:min(100% - 64px,1120px)}.about-grid{grid-template-columns:1fr 1fr;gap:35px}.page-intro{display:block}.page-intro p{margin-top:25px}.film-card{grid-template-columns:1fr}.film-card .detail{min-height:180px}
 .photo-panels{gap:8px}
 .curated-caption{padding:25px}
}
@media(max-width:560px){
 .home-hero::before,.home-hero::after{height:200px}
 .about{padding:36px 0 42px}.about .shell{width:min(100% - 32px,1120px)}.about-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}.portrait-placeholder{width:min(100%,365px);max-height:430px}.about-copy{width:100%}.about h1{margin-bottom:12px}.about p{margin-inline:auto}.home-links{width:min(100% - 32px,1120px);grid-template-columns:1fr}.home-links::after{top:50%;bottom:auto;left:25%;right:25%;width:auto;height:1px}.home-link{min-height:118px;padding:20px 8px}.footer--home .footer-grid{display:flex}.footer--home .footer-grid>p{position:static}
 .project-grid{grid-template-columns:1fr;gap:52px;padding-bottom:90px}.project-card .media-block{aspect-ratio:1.23}.page-intro{padding:85px 0 45px}.page-intro h1{font-size:clamp(64px,17vw,100px)}.project-gallery{gap:10px}.project-title{padding-top:70px}.footer-grid{display:block;position:relative}.footer-grid>p{position:absolute;right:0;bottom:0;text-align:right}.footer--contact h2{margin-bottom:0}.footer--contact .footer-grid>p{position:static;margin-top:28px;text-align:right}
 .portfolio-lead{padding:55px 0 65px}.lead-top{display:block}.lead-top h1{font-size:clamp(70px,19vw,110px);margin-top:15px}.photo-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.clip-panels{grid-template-columns:1fr;gap:10px}.photo-panel span,.clip-panel span{font-size:8px;left:9px;bottom:9px;letter-spacing:.07em}.work-index-heading{padding-bottom:33px}
 .curated-section-title h1{font-size:clamp(78px,19vw,112px);line-height:.88}.curated-work{grid-template-columns:1fr;row-gap:12px;padding-bottom:95px}.curated-feature{grid-column:auto}.curated-media,.curated-feature .curated-media{aspect-ratio:1.3}.curated-caption{gap:7px;padding:18px}.curated-caption h2{font-size:clamp(31px,9vw,42px)}.curated-media.is-feature .curated-caption h2{font-size:clamp(31px,9vw,42px)}.curated-caption span{font-size:9px}
 .mosaic-grid{--mosaic-gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));height:790px}.mosaic-grid:not(.is-enhanced) .mosaic-tile:nth-child(n+7){display:none}.mosaic-label{font-size:7px;left:8px;bottom:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Contact */
.contact-page { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,9vw,150px); padding:clamp(90px,11vw,160px) 0 150px; min-height:78vh; align-items:start; }
.contact-intro h1 { font-size:clamp(64px,9vw,130px); line-height:.95; margin:22px 0 28px; }
.contact-intro p { color:var(--soft); font-size:16px; line-height:1.5; margin:0; }
.inquiry-form { padding-top:3px; }
.inquiry-form label { display:block; font-size:12px; letter-spacing:.015em; margin-bottom:21px; }
.inquiry-form label > span:not(.optional) { color:var(--sage); }
.inquiry-form .optional { color:var(--soft); }
.form-name-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-detail-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.inquiry-form input,.inquiry-form textarea,.inquiry-form select { display:block; width:100%; margin-top:10px; border:1px solid var(--form-border); border-radius:0; background:var(--form-surface); color:var(--form-text); font:15px/1.4 var(--sans); padding:13px 14px; outline:none; }
.inquiry-form input,.inquiry-form select { height:48px; }
.inquiry-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.inquiry-form textarea { min-height:185px; resize:vertical; }
.inquiry-form input:focus,.inquiry-form textarea:focus,.inquiry-form select:focus { border-color:#9cad9d; outline:2px solid #9cad9d; outline-offset:2px; }
.submit-button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; border:0; border-radius:0; background:var(--paper); color:var(--ink); cursor:pointer; padding:18px 20px; font-size:14px; font-weight:600; letter-spacing:.02em; transition:background .2s; }
.submit-button:hover { background:var(--soft); }
.submit-button:disabled { opacity:.6; cursor:wait; }
.submit-button { justify-content:center; }
.form-status { min-height:22px; color:var(--paper); font-size:12px; line-height:1.5; margin:14px 0 0; }
.inquiry-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:780px){ .contact-page{grid-template-columns:1fr;gap:65px;padding:80px 0 100px;min-height:0}.contact-intro h1{font-size:clamp(64px,14vw,110px)} }
@media(max-width:560px){ .contact-page{padding:70px 0 90px;gap:55px}.form-name-row,.form-detail-row{gap:10px}.inquiry-form textarea{min-height:160px} }

/* Pinned header states (nav.js): normal at the top, glass logo once scrolled, full bar when revealed */
.site-header::before { content:''; position:absolute; z-index:-1; top:0; left:50%; width:100vw; height:calc(100% + clamp(70px,11vh,130px)); transform:translateX(-50%); background:linear-gradient(to bottom,rgba(var(--bar-fade),0.9) 0%,rgba(var(--bar-fade),0.72) 14%,rgba(var(--bar-fade),0.5) 29%,rgba(var(--bar-fade),0.31) 44%,rgba(var(--bar-fade),0.17) 58%,rgba(var(--bar-fade),0.08) 72%,rgba(var(--bar-fade),0.03) 85%,rgba(var(--bar-fade),0.008) 94%,rgba(var(--bar-fade),0) 100%); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.site-header.is-floating { color:var(--paper); }
/* The header's hairline fades as soon as the page moves, so it never sits across the content. */
.site-header.is-scrolled { border-bottom-color:transparent; }
.site-header.is-floating.is-open::before { opacity:1; }
.site-header.is-floating:not(.is-open) nav { opacity:0; transform:translateY(-6px); pointer-events:none; }
.brand-glass { position:absolute; inset:0; pointer-events:none; background-color:transparent; -webkit-backdrop-filter:blur(0px) saturate(1); backdrop-filter:blur(0px) saturate(1); transition:background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; -webkit-mask:url('logo-mask.svg') center/contain no-repeat; mask:url('logo-mask.svg') center/contain no-repeat; }
.brand-text { color:transparent; }
/* Both logo layers on their own compositing layer so they snap to the pixel grid identically
   (the glass layer always gets one because of backdrop-filter; the solid one otherwise wouldn't). */
.brand-solid, .brand-glass { will-change:transform; }
.brand-solid { position:absolute; inset:0; pointer-events:none; background-color:currentColor; transition:background-color .3s ease; -webkit-mask:url('logo-mask.svg') center/contain no-repeat; mask:url('logo-mask.svg') center/contain no-repeat; }
/* Glass-only state: tinted to the page mode (smoked in light mode, frosted in dark mode) */
/* The solid layer draws the letters in every state; in the glass state it just thins to a tint, so the edges never move. */
.site-header.is-floating:not(.is-open) .brand-solid { background-color:color-mix(in srgb, currentColor var(--glass-tint), transparent); }
/* The glass layer only adds the blur of what's behind the letters; it has no fill of its own. */
.site-header.is-floating:not(.is-open) .brand-glass { -webkit-backdrop-filter:blur(6px) saturate(1.3); backdrop-filter:blur(6px) saturate(1.3); }

/* Project view (project-view.js): a work tile expands into a full-width 16:9 header */
.shell > main, body > .footer { transition:opacity .45s ease; }
/* Opening a project: the work page clears quickly, and the project content follows right behind it, so they never show on top of each other. */
.shell > main.is-receded, body > .footer.is-receded { opacity:0; visibility:hidden; transition:opacity .22s cubic-bezier(.4,0,1,1), visibility 0s linear .22s; }
.project-view { position:fixed; inset:0; z-index:30; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.project-view::-webkit-scrollbar { display:none; }
.project-hero-slot { position:relative; width:100%; aspect-ratio:16/9; max-height:100vh; max-height:100svh; }
.project-hero-slot > .curated-media { position:absolute; inset:0; }
.curated-media.is-hero, .project-hero-slot > .curated-media { aspect-ratio:auto; }
.project-body { padding:18px 0 120px; }
.project-view .project-body { opacity:0; transform:translateY(16px); transition:opacity .25s ease, transform .3s ease; }
.project-view.is-visible .project-body { opacity:1; transform:none; transition:opacity .4s ease-out .16s, transform .55s var(--expand-ease) .12s; }
:root { --expand-duration:.6s; --expand-ease:cubic-bezier(.35,.15,.1,1); }
.curated-caption { transition:padding var(--expand-duration) var(--expand-ease); }
.curated-caption :is(h1,h2) { margin:0; font-weight:400; transition:font-size var(--expand-duration) var(--expand-ease), background-size .45s cubic-bezier(.32,.7,.2,1); }
.curated-caption span { transition:font-size var(--expand-duration) var(--expand-ease); }
.curated-media::before { content:''; position:absolute; z-index:1; inset:0 0 auto; height:clamp(180px,26vh,300px); pointer-events:none; background:linear-gradient(to bottom,rgba(var(--bar-fade),0.9) 0%,rgba(var(--bar-fade),0.72) 14%,rgba(var(--bar-fade),0.5) 29%,rgba(var(--bar-fade),0.31) 44%,rgba(var(--bar-fade),0.17) 58%,rgba(var(--bar-fade),0.08) 72%,rgba(var(--bar-fade),0.03) 85%,rgba(var(--bar-fade),0.008) 94%,rgba(var(--bar-fade),0) 100%); opacity:0; transition:opacity var(--expand-duration) var(--expand-ease); }
.curated-media.is-hero::before { opacity:1; }
.curated-media.is-hero .curated-preview, .curated-media.is-traveling .curated-preview { opacity:1; transform:none; }
.curated-media.is-hero .curated-caption { padding:clamp(28px,5vw,72px) max(24px,calc((100vw - 1440px) / 2)); }
.curated-media.is-hero .curated-meta { transform:translateY(0); }
.curated-media.is-hero .curated-caption :is(h1,h2), .curated-media.is-hero.is-feature .curated-caption h2 { font-size:clamp(48px,8vw,120px); }
.site-header.over-hero:not(.is-floating) { border-bottom-color:transparent; }

/* "Back to work" glass pill, shown while a project is open */
.project-close { position:fixed; z-index:45; left:50%; translate:-50% 0; bottom:calc(22px + env(safe-area-inset-bottom)); padding:8px 20px 9px; font-family:var(--serif); font-size:20px; letter-spacing:-.01em; line-height:1.1; white-space:nowrap; color:var(--paper); background-color:rgba(var(--bar-fade),.08); -webkit-backdrop-filter:var(--glass-lens); backdrop-filter:var(--glass-lens); transition:background-color .25s ease; animation:glass-in .5s ease .2s both; }
.project-close:hover { background-color:rgba(var(--bar-fade),.2); }
.project-close.is-leaving { animation:glass-out .3s ease both; }
@keyframes glass-in { from { background-color:rgba(var(--bar-fade),0); color:transparent; -webkit-backdrop-filter:blur(0px) saturate(1) brightness(1); backdrop-filter:blur(0px) saturate(1) brightness(1); transform:scale(.85); } }
@keyframes glass-out { to { background-color:rgba(var(--bar-fade),0); color:transparent; -webkit-backdrop-filter:blur(0px) saturate(1) brightness(1); backdrop-filter:blur(0px) saturate(1) brightness(1); transform:scale(.85); } }
@media(max-width:780px){ .project-close{bottom:calc(18px + env(safe-area-inset-bottom));padding:9px 20px 10px} }
/* Narrow screens: a 16:9 header is too short for the stacked nav plus the title, so go taller */
@media(max-width:780px){ .project-hero-slot{aspect-ratio:4/3;max-height:80svh} }
@media(max-width:560px){ .project-hero-slot{aspect-ratio:4/5;max-height:78svh} .curated-media.is-hero .curated-caption{padding:24px 16px 26px;gap:8px} .curated-media.is-hero .curated-caption :is(h1,h2),.curated-media.is-hero.is-feature .curated-caption h2{font-size:clamp(40px,12vw,54px)} }