/* Separate editorial experiment. Keep approved typefaces and brand colours. */
body.emotional{--accent:#8abed0;background:#0c0c0e}
.hero-role{font:500 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.2em;color:#f4f2ec;margin:0 0 24px}
.hero-bottom #hero-copy{font-size:15px;line-height:1.6;max-width:330px}
.work-header{display:flex;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ffffff24;margin-bottom:28px}
.works{overflow:visible}
.works .work-header h2,.emotional .works .work-header h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-style:normal;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin:0;padding:0;border:0}
.works .work-header h2 span{color:var(--ink);font-weight:400}
.card img{opacity:1;filter:none}
.card:after{background:linear-gradient(transparent 52%,#000a 100%)}
.card .label{background:linear-gradient(transparent,#000b);padding-top:32px}
.card .label strong{font-weight:600;text-shadow:0 1px 8px #0008}
.card .label>span{font-size:9px}
.work-end{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0 0}
.work-end .showcase-link{margin-top:0;font-size:11px;letter-spacing:.045em}
.other-category{background:none;border:0;border-bottom:1px solid #ffffff55;padding:10px 0;font-size:18px;line-height:1.3;color:var(--ink);cursor:pointer;text-align:left}
.other-category span{margin-left:24px;color:var(--accent)}
.bio{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(48px,8vw,120px);row-gap:28px;align-items:start;padding-top:90px;padding-bottom:90px;border-top:1px solid #ffffff1c;margin-top:36px}
#about>.about-label{grid-column:1/-1;margin:0;color:#aaa;font-size:10px}
.bio .about-intro{display:flex;flex-direction:column;gap:28px}
.bio .about-intro h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.04;letter-spacing:-.04em;margin:0}
.bio .about-intro h2 em{font-style:normal;color:var(--accent)}
.bio .about-intro .eyebrow{margin:0;color:#aaa;font-size:10px}
.bio .about-intro .about-location{font-size:14px;line-height:1.6;color:#92928c}
.bio .about-copy{gap:26px}
.bio .about-copy h3{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(23px,2.5vw,32px);font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:0;color:var(--ink)}
.bio .about-copy p:not(.eyebrow),.bio .bio-recognition p{font-size:15px;line-height:1.75;color:#bdbdb9}
.bio-recognition{border-top:1px solid #ffffff20;padding-top:24px}
.clients{gap:8px}.clients span{font-size:12px;padding:8px 12px}
.project-contact{border-top:1px solid #ffffff25;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 0 10px;margin-top:32px}
.project-contact p{color:#a5a5a0;margin:0}.project-contact a{font-size:24px;letter-spacing:-.025em}.project-contact a span{color:var(--accent);margin-left:20px}
@media(max-width:809px){.hero-role{font-size:9px;margin-bottom:20px}.hero-bottom #hero-copy{font-size:14px;line-height:1.55}.work-header{gap:16px;padding:16px 0;flex-wrap:wrap;margin-bottom:20px}.works .work-header h2,.emotional .works .work-header h2{font-size:30px}.work-end{align-items:flex-start;flex-direction:column;gap:18px;padding-top:24px}.other-category{font-size:18px}.bio{grid-template-columns:1fr;gap:36px;margin-top:16px;padding-top:48px;padding-bottom:56px}.bio .about-intro{gap:20px}.bio .about-intro h2{font-size:42px}.bio .about-intro .about-location{display:none}.bio .about-copy{gap:22px}.bio .about-copy h3{font-size:25px}.project-contact{align-items:flex-start;flex-direction:column;gap:14px}}
.works .work-header h2,.emotional .works .work-header h2{height:auto;min-height:0}.card .label>span{font-size:10px}@media(max-width:809px){.works .work-header h2,.emotional .works .work-header h2{font-size:28px}}

/* Emotion: an editorial italic, with natural wrapping on narrow screens. */
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/instrument-serif-italic.ttf") format("truetype")}
.emotional .hero-content h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;font-synthesis:none;font-size:clamp(72px,15.8vw,226px);line-height:.92;letter-spacing:-.025em;max-width:100%;white-space:normal;text-wrap:wrap}
@media(max-width:809px){.emotional .hero-content h1{font-size:clamp(60px,18vw,110px);line-height:.9;max-width:3.8em}}

/* The selected black-and-white portrait, centered within the About introduction. */
.bio .about-portrait{display:block;width:clamp(280px,30vw,380px);max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;align-self:center}
@media(max-width:809px){.bio .about-portrait{width:min(300px,100%)}}

.bio .studio-affiliations a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bio .studio-affiliations a:hover{color:var(--accent)}

/* Brand icons retain labels for assistive technology and a generous tap area. */
#contact .footer-social.social-icons{gap:12px;align-items:center}
#contact .footer-social .social-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;color:var(--ink);line-height:1;text-decoration:none;border-radius:4px;transition:color .2s}
#contact .footer-social span.social-icon{color:#92928c;cursor:default}
#contact .footer-social .social-icon svg{display:block;width:24px;height:24px;fill:currentColor}
#contact .footer-social a.social-icon:hover{color:var(--accent)}
#contact .footer-social a.social-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* One section label above the two aligned About columns. */
@media(max-width:809px){.bio{row-gap:20px}.bio .about-copy{margin-top:16px}}