/* Local review: a white studio introduction, then the existing dark collection. */
.project-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:28px 0;padding:24px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.project-facts dt{font:11px monospace;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.project-facts dd{font-size:14px;line-height:1.5;margin:0}
.exhibit-facts{width:100%;max-width:470px;margin-bottom:20px}
.exhibit-facts .project-facts{grid-template-columns:1fr 1fr;gap:18px;margin:0;padding:18px 0;border-color:#0003}
.build-notes{margin:64px 0 95px;padding:48px 0;border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff30}
.build-notes header{max-width:850px}
.build-notes h3{font-size:clamp(34px,4.5vw,66px);font-weight:500;line-height:1.08;letter-spacing:-.045em;margin:24px 0}
.build-notes h3 em{font-family:var(--serif);font-weight:400;color:var(--accent)}
.build-notes header>p{font-size:19px;line-height:1.7;max-width:640px;color:var(--muted)}
.build-notes-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;margin-top:45px}
.iteration-steps{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.iteration-steps li{border-top:1px solid #ffffff25;padding-top:24px}
.iteration-steps li>span{font:12px monospace;color:var(--accent)}
.iteration-steps h4{font-size:23px;font-weight:500;letter-spacing:-.025em;margin:14px 0}
.iteration-steps p,.iteration-proof>p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}
.iteration-proof{padding:30px;background:#1d241b;border:1px solid #ffffff16;align-self:start}
.comparison-bars{margin:30px 0 20px;display:grid;gap:24px}
.comparison-bars>div>span{display:block;font-size:14px;margin-bottom:10px}
.test-bar{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1);height:70px;display:flex;align-items:center;padding:0 16px;background:#ee6249;color:#17200e}
.test-bar strong{font-size:40px;font-weight:500;line-height:1}
.test-bar.after{width:20%;min-width:55px;background:var(--accent);transition-delay:.18s}
.build-notes.in-view .test-bar,.motion-off .test-bar{transform:scaleX(1)}
.iteration-proof .proof-unit{font:12px monospace;margin-bottom:20px}
.iteration-takeaway{margin:28px 0;border-top:1px solid #ffffff25;padding-top:22px}
.iteration-takeaway p{font-size:22px;line-height:1.5;margin:12px 0}
.build-notes footer{padding:28px 0 0;margin-top:36px;color:var(--muted);font:12px monospace;line-height:1.7}
@media(prefers-reduced-motion:reduce){.test-bar{transform:scaleX(1);transition:none}}
@media(max-width:800px){.project-facts{grid-template-columns:1fr 1fr;gap:20px}.build-notes{margin:45px 0 60px;padding:30px 0}.build-notes-grid{grid-template-columns:1fr;gap:32px}.iteration-proof{padding:22px}.build-notes footer{display:block}.build-notes header>p{font-size:17px}}
.portrait-intro{border-top:1px solid #26311944;margin-top:42px;padding-top:40px;width:100%}
.portrait-intro>div{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;align-items:start}
.portrait-intro .small-label{grid-column:1;grid-row:1;margin-bottom:20px}
.portrait-intro h3{grid-column:1;grid-row:2 / 4}
.portrait-intro p{grid-column:2;margin:0 0 20px}
.portrait-intro p:first-of-type{grid-row:1 / 3}
.portrait-intro p:last-of-type{grid-row:3}
.portrait-intro .resume-link{grid-column:2;justify-self:start;grid-row:4}
.hero-eyebrow{align-items:center;z-index:3}
.hero-portrait{display:flex;align-items:center;gap:16px;margin:0}
.hero-portrait img{width:68px;height:78px;object-fit:cover;object-position:50% 57%;border-radius:12px;border:3px solid #fff;box-shadow:0 5px 20px #171b1712}
.hero-portrait .portrait-frame{display:block;width:68px;height:78px;overflow:hidden;border-radius:12px;border:3px solid #fff;box-shadow:0 5px 20px #171b1712;flex-shrink:0}
.hero-portrait .portrait-frame img{width:100%;height:100%;border:0;box-shadow:none;border-radius:0;transform:scale(1.85);transform-origin:50% 62%}
@media(max-width:800px){.hero-portrait .portrait-frame{width:54px;height:64px}}
.hero-portrait figcaption{font:12px monospace;letter-spacing:.1em;color:#171b17}
.hero-portrait figcaption span{display:block;margin-top:7px;font:12px var(--sans);letter-spacing:0;color:#62675e}
.hero-eyebrow .hero-portrait figcaption span{display:block}
.hero-portrait .portrait-frame{width:156px;height:176px;border-radius:16px}
.hero-portrait .portrait-frame img{transform:scale(1.45);transform-origin:50% 64%}
.hero-portrait{gap:24px}
.hero-portrait figcaption{font-size:14px}
.hero{min-height:960px}
@media(max-width:800px){.hero-portrait{gap:20px}.hero-portrait figcaption{font-size:12px}}
@media(max-width:600px){.navigation{height:108px;flex-wrap:wrap;align-content:center;gap:12px}.navigation .brand{font-size:26px}.navigation nav{order:3;width:100%;justify-content:space-between;gap:8px}.navigation nav a{font-size:9px;letter-spacing:.02em;white-space:nowrap}.navigation .nav-contact{margin-left:auto}.hero-portrait figcaption{font-size:11px}}
@media(max-width:800px){.hero-eyebrow>span{display:none}.hero-portrait img{width:54px;height:64px}.hero-portrait{gap:12px}}
.portrait-intro figure{margin:0;max-width:360px;transform:rotate(-2deg)}
.portrait-intro img{display:block;width:100%;height:390px;object-fit:cover;object-position:50% 63%;border-radius:2px}
.portrait-intro figcaption{font:12px monospace;letter-spacing:.1em;margin-top:15px}
.portrait-intro h3{font-size:clamp(32px,3.8vw,58px);line-height:1.1;letter-spacing:-.04em;font-weight:500;margin:22px 0}
.portrait-intro h3 em{font-family:var(--serif);font-weight:400}
.portrait-intro p{font-size:18px;line-height:1.7;max-width:600px}
.portrait-intro .pill{margin-top:16px;border-color:#263119}
.case-decisions{margin:45px 0;padding-top:30px;border-top:1px solid var(--line)}
.case-decisions>h3{font-size:32px;font-weight:500}
.case-decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-decision-grid article{border-top:1px solid var(--line);padding-top:22px}
.case-decision-grid h4{font-size:22px;line-height:1.25;margin:12px 0}
.case-decision-grid p{font-size:16px;line-height:1.7;color:var(--muted)}
.case-decision-grid span{font:12px monospace;color:var(--accent)}
@media(max-width:800px){.portrait-intro{margin-top:30px;padding-top:30px}.portrait-intro>div{display:block}.portrait-intro h3{margin-top:16px}.portrait-intro p{margin-bottom:20px}.case-decision-grid{grid-template-columns:1fr}.navigation nav a:last-child{display:inline-block}}
.about-avatar{margin:25px 0 0;max-width:520px;isolation:isolate;position:relative}
.about-avatar video{position:absolute;opacity:0;pointer-events:none}
.about-avatar canvas{display:block;width:100%;height:auto}
.about-avatar video{display:block;width:100%;height:auto;border:0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
@media(max-width:800px){.about-avatar{max-width:400px;margin:20px auto 0}}
.avatar-about-link{display:block;width:100%;height:100%;min-height:0;cursor:pointer;flex:1}
.avatar-about-link:focus-visible{outline:2px solid #516b28;outline-offset:5px;border-radius:24px}
.diamond-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em}
.diamond-mark::before{content:'';display:block;width:.52em;height:.52em;background:currentColor;transform:rotate(45deg)}
.ticker-track>.diamond-mark{font-size:28px}
.brand>.diamond-mark{font-size:19px}
.asterisk.diamond-mark{font-size:65px}
@media(max-width:800px){.ticker-track>.diamond-mark{font-size:20px}.asterisk.diamond-mark{font-size:44px}}
.exhibit-copy>p{max-width:470px}
.exhibit-answer{max-width:470px}
.exhibit-story{max-width:470px;margin:0 0 24px}
.exhibit-story>span{font:12px monospace;letter-spacing:.08em}
.exhibit-story p{font-size:15px;line-height:1.65;margin:10px 0 0}
.exhibit h3{margin-top:28px}
@media(max-width:800px){.exhibit-story p{font-size:16px}.exhibit-story{margin-bottom:20px}}
.tomato-animation figcaption,.tomato-motion-toggle,.avatar-toggle{display:none}
#work>.section-heading{display:grid;grid-template-columns:44% 56%;grid-template-rows:auto 1fr;align-items:center;column-gap:0;row-gap:8px}
#work>.section-heading>.small-label{grid-column:1;grid-row:1;align-self:start}
#work>.section-heading>h2{grid-column:2;grid-row:1 / 3}
.tomato-animation{grid-column:1;grid-row:2;background:#101210;isolation:isolate;margin:0;width:100%;max-width:440px;text-align:center;position:relative}
.tomato-animation video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;mix-blend-mode:lighten}
.tomato-animation figcaption{position:static;margin-top:0;color:#b7bdb1;font:9px monospace;letter-spacing:.08em}
.stat strong{font-variant-numeric:tabular-nums}
.tomato-motion-toggle{background:none;color:#c3c9bd;border:0;border-bottom:1px solid #67715f;padding:8px 0;margin-top:10px;font-size:12px}
@media(max-width:800px){#work>.section-heading{grid-template-columns:1fr;row-gap:20px}#work>.section-heading>h2{grid-column:1;grid-row:2}.tomato-animation{grid-row:3;max-width:300px;margin:0 auto}.tomato-animation figcaption{font-size:9px}}
.tomato-story{margin:0 0 48px;background:#050505;padding:0 24px 18px}
.tomato-story video{display:block;width:100%;max-height:520px;aspect-ratio:16/9;object-fit:contain;mix-blend-mode:lighten}
.tomato-story figcaption{font-size:12px;color:#b8bdb3;line-height:1.6;margin:12px auto 0;max-width:820px;text-align:center}
@media(max-width:800px){.tomato-story{padding:0 8px 14px;margin-bottom:28px}.tomato-story figcaption{font-size:12px;text-align:left}}
body{background:#101210}
.navigation{background:#f8f8f7;color:#171b17}
.navigation .brand span{color:#526f1e}
.navigation .nav-contact{border-color:#92958a}
.hero{background:#f8f8f7;color:#171b17;isolation:isolate;overflow:hidden}
.hero .small-label,.hero-eyebrow,.hero-bottom{color:#62675e}
.hero-title{width:70%;font-size:clamp(80px,11.2vw,166px)}
.hero-title .outline-line{-webkit-text-stroke-color:#535d4b}
.hero-title em{color:#516b28}
.hero-object{display:none}
.hero-aside .pill{border-color:#929c86;background:transparent;color:#171b17}
.hero-aside .button-dot{background:#516b28}
.hero-avatar{position:absolute;z-index:1;right:3%;top:85px;width:35%;height:570px;margin:0;display:flex;align-items:center;flex-direction:column;mix-blend-mode:multiply}
.hero-avatar video{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 91%,transparent)}
.hero-avatar figcaption{font:12px monospace;letter-spacing:.12em;color:#536347;margin-top:-6px}
.avatar-toggle{margin-top:10px;border:0;border-bottom:1px solid #a0a797;padding:4px 0;background:transparent;color:#5b6352;font-size:12px}
.hero-avatar video{mask-image:radial-gradient(ellipse 52% 58% at 50% 48%,#000 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 52% 58% at 50% 48%,#000 65%,transparent 100%)}
.hero-composition{z-index:2;pointer-events:none}
.hero-avatar{mix-blend-mode:darken}.hero-avatar video{mix-blend-mode:normal}
.hero-aside{pointer-events:auto}
.ticker{margin-top:0}
@media(min-width:801px) and (max-height:850px){.hero-avatar{top:65px;height:500px}.hero-title{font-size:clamp(80px,10.7vw,158px)}}
@media(max-width:800px){
 .hero{min-height:980px}.hero-composition{min-height:830px;margin-top:95px}
 .hero-title{font-size:17vw;width:100%}
 .hero-avatar{top:330px;right:1%;width:58%;height:395px}
 .hero-aside{bottom:100px;width:43%}
 .hero-avatar figcaption{font-size:11px}
 .hero-bottom{bottom:28px}
}
@media(max-width:370px){.hero-avatar{top:310px;height:355px}.hero-aside{width:43%}}
/* A real portrait, not a tiny avatar. Keep these after compact hero overrides. */
.hero-portrait .portrait-frame{width:156px;height:176px}
.hero-composition{margin-top:218px}
.hero-avatar{top:210px}
@media(max-width:800px){.hero-portrait .portrait-frame{width:118px;height:140px}.hero-composition{margin-top:200px;min-height:760px}.hero{min-height:1060px}.hero-avatar{top:430px}}