:root{--ink:#30231d;--paper:#eee1ce;--white:#fff6e9;--muted:#d6bda2;--accent:#d8ae79;--line:#bfa08366}
body{background:#b39a82;color:#30231d}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(#eee1ce9c,#e4cbb399),url('/assets/warm-stone.webp') left center / 550% auto no-repeat;pointer-events:none}
.site-header,.site-header.is-scrolled{background:#30231df2;color:#fff2de;isolation:isolate;border-bottom:1px solid #ddbb8833}
.site-header .brand{mix-blend-mode:normal;filter:none!important;background:transparent}
.site-header .brand .wordmark-crop{mix-blend-mode:screen}
.site-header .brand img{filter:invert(1) brightness(15);mix-blend-mode:screen}
.mobile-nav{background:#30231d;color:#fff2de}
.section-pad,.work-section,.new-vision,.expertise-section,.founder-section,.reviews-section,.contact-section,.home-account-invite{background:transparent;color:#30231d}
.chapter-head>p:not(.eyebrow),.vision-aside p,.founder-section p,.expertise-grid p,.contact-info p,.reviews-content p,.work-caption span{color:#584234}
.work-section,.reviews-section{background:#f7ead4a6}
.portfolio-note,.contact-form,.review-card{background:#ead6bd;color:#30231d}
.portfolio-note p:not(.eyebrow){color:#584234}
.solid-link,.portfolio-filters button[aria-pressed=true]{background:#493124;color:#fff3df;border-color:#493124}
.portfolio-filters button{color:#493124;border-color:#94755b}
.site-footer{background:#30231de8;color:#f5e3cb}
.founder-portrait{margin:0;max-width:530px;overflow:hidden}
.founder-portrait img{width:100%;height:auto;display:block;border-radius:2px}
.instagram-invite{text-align:center;border-top:1px solid #89684c66;padding-block:90px}
.instagram-invite h2{font-size:clamp(36px,5vw,72px);margin:22px auto;letter-spacing:-.04em}
.instagram-invite p:not(.eyebrow){max-width:520px;line-height:1.8;margin:0 auto 28px}
.hero .hero-project a{pointer-events:auto;border-bottom:1px solid #eed5b5;padding-bottom:8px}
.hero.closet-cinema .scroll-caption:last-child{left:50%;top:auto;bottom:15%;transform:translateX(-50%)!important;width:min(650px,90%);text-align:center}
.hero.closet-cinema .scroll-caption:last-child p{margin-inline:auto;max-width:530px}
.hero.closet-cinema .scroll-caption:last-child h2{font-size:clamp(36px,5vw,64px)}
.hero.closet-cinema .scroll-caption:last-child a{margin:24px auto 0;width:min(390px,100%);max-width:390px;background:#fff0d7;color:#39261b;box-shadow:0 10px 50px #21170d66;border:1px solid #d7b990;border-radius:40px;font-size:20px;padding:22px 30px}
.hero.closet-cinema .hero-shade{background:linear-gradient(0deg,#27170cec,transparent 75%)}
.umbra-intro{padding-top:150px}.umbra-intro h1{font-size:clamp(70px,13vw,180px);letter-spacing:-.05em;margin:20px 0}.umbra-intro .eyebrow{margin-top:40px}.umbra-intro>p:last-child{max-width:780px;line-height:1.85;font-size:18px}.umbra-gallery{display:grid;grid-template-columns:1fr 1fr;gap:45px 25px}.umbra-gallery figure:first-child{grid-column:1/-1}.umbra-gallery img{width:100%;height:auto}.umbra-gallery figcaption{font-size:14px;margin-top:12px}
/* One stable compass layer: the wordmark meets it at the same position. */
.intro-playing .intro-compass{animation:compass-smooth 3.4s cubic-bezier(.4,0,.2,1) both}
.intro-playing .intro-signature{animation:signature-smooth 3.4s ease both}
.intro-playing .intro-glint{display:none}
@keyframes compass-smooth{0%{opacity:0;transform:translateX(29.5%) scale(var(--compass-scale))}12%,22%{opacity:1;transform:translateX(29.5%) scale(var(--compass-scale))}52%,70%{opacity:1;transform:translateX(0) scale(1)}78%,100%{opacity:0;transform:translateX(0) scale(1)}}
@keyframes signature-smooth{0%,50%{opacity:0;transform:none;clip-path:inset(0)}70%,78%{opacity:1;transform:none;clip-path:inset(0)}100%{opacity:0;transform:none;clip-path:inset(0)}}
@media(max-width:700px){.umbra-gallery{grid-template-columns:1fr}.hero.closet-cinema .scroll-caption:last-child{bottom:12%}.hero.closet-cinema .scroll-caption:last-child a{padding:17px 24px;margin-top:16px;font-size:18px}.hero.closet-cinema .scroll-caption:last-child p{font-size:15px}.hero.closet-cinema .scroll-caption:last-child h2{font-size:34px;margin:8px 0}.founder-portrait{max-width:100%}}
.hero[data-scroll-video]{color:#fff3e2}
.contact-form input,.contact-form textarea,.contact-form select{color:#39291f;background:#fff5e6;border-color:#b4977d}
.brand-intro{color:white;background:#000}
.header-cart{display:inline-flex;gap:7px;align-items:center;min-height:44px;font-size:14px;white-space:nowrap;margin-left:10px}.header-cart b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#dec39d;color:#34271e;font-size:12px}.site-header nav{gap:16px}.founder-section .founder-portrait{grid-column:2;grid-row:1;align-self:end;background:transparent;overflow:visible}.founder-section>div{grid-column:1;grid-row:1}.founder-portrait img{mask-image:url('/assets/harold-mask.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/harold-mask.png');-webkit-mask-size:100% 100%}
@media(max-width:860px){.header-cart>span{display:none}.header-cart{margin-left:0}.site-header{gap:12px}.founder-section .founder-portrait{grid-column:1;grid-row:2;width:min(100%,470px);justify-self:end}.founder-section>div{grid-row:1}}
.founder-portrait{transform-origin:50% 90%;transition:transform 650ms cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.founder-portrait{transition:none!important;transform:none!important}}
.founder-portrait{position:relative;transition:none;transform:none!important}
.founder-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;mask-image:url('/assets/harold-mask.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/harold-mask.png');-webkit-mask-size:100% 100%;transition:opacity .3s}
.portrait-playing .founder-video{opacity:1}.portrait-playing>img{opacity:0}
.portrait-control{position:absolute;bottom:14px;right:14px;z-index:2;background:#30231de8;color:#fff2dd;border:1px solid #d5b58a88;border-radius:25px;padding:12px 18px;font-size:14px;min-height:44px}

/* A moving face must not use the still photograph's silhouette. */
.founder-video{object-fit:contain;mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);mask-mode:alpha;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 91%,transparent 100%);border-radius:18px 18px 0 0}
.founder-portrait:has(.founder-video){aspect-ratio:3/4}
.founder-portrait:has(.founder-video)>img{width:100%;height:100%;object-fit:contain}
.floating-bag{display:none!important}
/* Per-frame video alpha follows the real moving silhouette. */
.founder-matte-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.founder-cutout{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .25s}
.founder-portrait:has(.founder-cutout){aspect-ratio:3/4;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.portrait-playing .founder-cutout{opacity:1}
/* Phone layouts: full-height portrait films and comfortable reading. */
@media(max-width:680px){
 html{scroll-padding-top:76px}body{overflow-x:clip;--pad:20px}
 .site-header{padding:12px 16px;gap:10px;min-height:68px}.site-header .brand{max-width:145px;min-width:0}.site-header a,.menu-toggle{min-height:44px}.header-cart{min-width:44px;justify-content:center}.mobile-nav{max-height:calc(100svh - 68px);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
 .hero[data-scroll-video].has-scroll-video,.hero.closet-cinema.has-scroll-video{height:340svh}
 .hero[data-scroll-video] .hero-sticky{height:100svh;min-height:0}
 .hero[data-scroll-video] .hero-video,.hero.closet-cinema .hero-video{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
 .hero[data-scroll-video] .hero-image img{object-fit:cover;filter:none;transform:none}
 .hero[data-scroll-video] .hero-shade{background:linear-gradient(180deg,#20160e66,transparent 26%,#20160e22 45%,#20160ec9 100%)}
 .hero[data-scroll-video] .hero-heading{top:20%;left:20px;right:20px}.hero[data-scroll-video] .hero-heading h1{font-size:clamp(36px,10vw,60px);line-height:1.08}
 .hero[data-scroll-video] .scroll-caption,.hero.closet-cinema .scroll-caption{top:auto;bottom:15%;left:20px;right:20px;width:auto;max-width:none}
 .hero[data-scroll-video] .scroll-caption h2{font-size:clamp(32px,9vw,46px);line-height:1.08;margin:10px 0 12px}
 .hero[data-scroll-video] .scroll-caption p{font-size:16px;line-height:1.45;max-width:100%}.hero[data-scroll-video] .scroll-caption small{font-size:13px}
 .hero.closet-cinema .scroll-caption:last-child{bottom:14%;text-align:center}.hero.closet-cinema .scroll-caption:last-child a{display:flex;justify-content:center;align-items:center;min-height:54px;width:100%;max-width:360px;margin:18px auto 0;padding:15px 18px;font-size:17px}
 .hero[data-scroll-video] .hero-bottom{left:20px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));font-size:12px;gap:8px}.hero[data-scroll-video] .hero-project{bottom:88px;max-width:calc(100% - 40px)}
 .section-pad{padding:64px 20px}.form-grid,.work-grid,.project-dialog-layout,.founder-section,.footer-details{grid-template-columns:1fr!important;gap:24px}.work-photo{aspect-ratio:4/5}.work-caption{gap:12px;flex-wrap:wrap}.portfolio-filters{display:flex;overflow-x:auto;gap:8px;padding-bottom:8px}.portfolio-filters button{flex-shrink:0;min-height:44px}
 input,select,textarea{font-size:16px!important;max-width:100%}.solid-link,.line-link{min-height:48px}.founder-portrait{width:min(100%,380px)!important;margin-inline:auto}.instagram-invite{display:flex;flex-direction:column;align-items:flex-start;gap:20px}.workshop-map{min-width:0;width:100%}.workshop-map iframe{width:100%;height:300px}.footer-legal{flex-wrap:wrap;gap:16px}.project-dialog{width:calc(100% - 16px);max-height:calc(100svh - 24px);padding:16px}
}
/* Personal autograph, written once as the founder enters view. */
.founder-signature{position:absolute;right:-2%;bottom:5%;width:84%;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 4px #1e130c55)}
.founder-signature svg{display:block;width:100%;height:auto;overflow:visible}
.ink-stroke{stroke-dasharray:1;stroke-dashoffset:1}.ink-finish{opacity:0}
.is-signed .ink-stroke{animation:signature-ink var(--duration) cubic-bezier(.35,.1,.55,.95) var(--delay) both}
.is-signed .ink-finish{animation:signature-finish .35s ease 5.05s both}
@keyframes signature-ink{to{stroke-dashoffset:0}}@keyframes signature-finish{to{opacity:1}}
.signature-static .ink-finish{opacity:1}
@media(max-width:680px){.founder-signature{width:86%;right:0;bottom:6%}}
@media(prefers-reduced-motion:reduce){.founder-signature .ink-finish{opacity:1}}
.language-switch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}.language-switch span{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:20px}
@media(max-width:420px){.site-header{gap:6px;padding-inline:12px}.site-header .brand{max-width:110px}.language-switch{font-size:12px;gap:4px}.language-switch span{font-size:18px}}