/* Shared chapter rhythm across the full page. */
:root{--chapter-space:clamp(72px,7vw,112px)}
main>.section.section{padding-top:var(--chapter-space);padding-bottom:var(--chapter-space)}
/* Keep the same heading-then-speech-bubble sequence at every breakpoint. */
.about .about-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;padding-bottom:24px}
.about .about-main{padding:0}
.about .about-bubble{width:min(100% - 36px,640px);max-width:640px;justify-self:end;margin:0 14px 48px 22px}
@media(max-width:690px){
 :root{--chapter-space:64px}
 .about .about-layout{gap:28px;padding-bottom:20px}
 .about .about-bubble{width:calc(100% - 24px);margin:0 12px 42px;justify-self:start}
 /* The film rail has one scroll axis; dragging it cannot move vertically. */
 .showcase .showcase-grid{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;overscroll-behavior-y:none;align-items:flex-start}
 .showcase .reel-card,.showcase .reel-visual,.showcase .good-stuff-video,.showcase .reel-controls-activate{touch-action:pan-x}
}

/* Chapter colors follow the current content order in both themes. */
#about{background:#f5eee2;color:#244c50}
#mix{background:#d8e4de;color:#244c50}
#work{background:#f5eee2;color:#244c50}
#brands{background:#e0e5e9;color:#244c50}
#screen{background:#244c50;color:#f5eee2}
#youtube{background:#d8e4de;color:#244c50}
#contact{background:#f5eee2;color:#244c50}
[data-theme=dark] #about{background:#173338;color:#f1ebdf}
[data-theme=dark] #mix{background:#303f54;color:#f1ebdf}
[data-theme=dark] #work{background:#142d32;color:#f1ebdf}
[data-theme=dark] #brands{background:#34453f;color:#f1ebdf}
[data-theme=dark] #screen{background:#213b46;color:#f1ebdf}
[data-theme=dark] #youtube{background:#293344;color:#f1ebdf}
[data-theme=dark] #contact{background:#173b3e;color:#f1ebdf}
/* A prominent contact row, with a drawn arrow instead of an emoji. */
#contact .contact-email-label{opacity:1;letter-spacing:.18em;margin-bottom:16px}
#contact .mail{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1020px;padding:26px 0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(21px,5.8vw,78px);font-style:normal;font-weight:700;letter-spacing:-.055em;line-height:1.2;white-space:nowrap;border:0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;border-radius:0;background:transparent;color:inherit;text-decoration:none;transition:color .2s}
#contact .mail .mail-icon{display:grid;place-items:center;flex:0 0 clamp(32px,5vw,64px);width:clamp(32px,5vw,64px);height:clamp(32px,5vw,64px);border:1px solid currentColor;border-radius:50%;transition:background .2s,color .2s,transform .2s}
.mail-icon svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#contact .mail:focus-visible{outline:2px solid currentColor;outline-offset:6px}
@media(hover:hover) and (pointer:fine){#contact .mail:hover{opacity:1;background:transparent;color:inherit}#contact .mail:hover .mail-icon{background:#244c50;color:#f5eee2;transform:rotate(45deg)}[data-theme=dark] #contact .mail:hover .mail-icon{background:#f1ebdf;color:#173b3e}}
@media(max-width:690px){#contact .mail{padding:20px 0;letter-spacing:-.05em}#contact .contact-email-label{font-size:9px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){#contact .mail,#contact .mail .mail-icon{transition:none}}
/* Another small reduction keeps the photo collage airy. */
.photo-item .photo-img{width:86%}

/* A compact invitation makes the address part of an intentional contact button. */
#contact .mail{width:max-content;max-width:100%;padding:22px 28px;gap:36px;border:1px solid currentColor;border-radius:3px;white-space:normal;background:#244c50;color:#f5eee2;font-size:inherit}
#contact .mail-copy{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
#contact .mail-title{font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.1}
#contact .mail-address{font-size:clamp(14px,1.3vw,19px);font-weight:400;letter-spacing:.015em;line-height:1.3}
#contact .mail .mail-icon{flex-basis:42px;width:42px;height:42px}
[data-theme=dark] #contact .mail{background:#f1ebdf;color:#173b3e;border-color:#f1ebdf}
#contact .social-heading{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin:0 0 18px}
.social-block{min-width:0}
@media(hover:hover) and (pointer:fine){#contact .mail:hover{background:#365e63;color:#f5eee2}[data-theme=dark] #contact .mail:hover{background:#d8e4de;color:#173b3e}}
@media(max-width:690px){#contact .mail{width:100%;padding:20px;gap:14px}#contact .mail-title{font-size:24px}#contact .mail-address{font-size:14px;letter-spacing:0}#contact .mail .mail-icon{flex-basis:32px;width:32px;height:32px}#contact .social-heading{font-size:10px;margin-bottom:16px}}

/* The address itself is the contact signature: no button, icon or extra slogan. */
#contact .mail,[data-theme=dark] #contact .mail{display:inline-block;width:auto;max-width:100%;padding:0 0 9px;margin:0;background:transparent;color:inherit;border:0;border-bottom:1px solid currentColor;border-radius:0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(23px,5.5vw,80px);font-style:normal;font-weight:500;letter-spacing:-.055em;line-height:1.2;white-space:nowrap;text-decoration:none;transition:opacity .2s}
@media(hover:hover) and (pointer:fine){#contact .mail:hover,[data-theme=dark] #contact .mail:hover{background:transparent;color:inherit;opacity:.7}}
@media(max-width:690px){#contact .mail,[data-theme=dark] #contact .mail{font-size:clamp(22px,6.1vw,42px);letter-spacing:-.055em;padding-bottom:9px}}

/* One deliberate light palette and a contact signature attached to the heading. */
html{color-scheme:light}
#contact .huge{margin-bottom:18px}
#contact .mail{font-size:clamp(28px,5.5vw,80px);font-weight:500;border:0;padding:0;letter-spacing:-.055em;line-height:1.2}
@media(max-width:690px){#contact .huge{margin-bottom:16px}#contact .mail{font-size:clamp(26px,7.1vw,45px);border:0;padding:0}.nav .mobile-menu{margin-left:auto}}

/* An italic editorial signature contrasts with the bold display heading. */
#contact .mail{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(32px,6.1vw,88px);letter-spacing:-.045em;line-height:1.15;padding:0 .08em .1em 0;border:0}
#contact .huge{margin-bottom:22px}
@media(max-width:690px){#contact .mail{font-size:clamp(29px,7.8vw,49px);letter-spacing:-.055em;padding:0 .08em .1em 0}#contact .huge{margin-bottom:20px}}

/* Contact shares the Partnerships background. */
#contact{background:#e0e5e9}
[data-theme=dark] #contact{background:#34453f}

/* Match the hero portrait to the 4:5 framed portraits. */
.hero-photo{height:auto;aspect-ratio:4/5}
.hero-photo img{object-fit:cover;object-position:center}
/* Keep the portrait bottom aligned with its overlapping sticker on mobile. */
@media(max-width:690px){.hero-photo{top:auto;bottom:12%;height:auto;aspect-ratio:4/5}}
/* Match the framed portraits in Television. */
#mix .photo-img{box-shadow:9px 10px 0 rgba(0,0,0,.16)}
/* Give the hero selfie slightly more presence while preserving sticker overlap. */
@media(min-width:691px){.hero-photo{width:clamp(230px,24vw,350px)}}
@media(max-width:690px){.hero-photo{width:50%;max-width:260px;bottom:12%;top:auto}}
/* Reserve room for the offset shadow and rotated frame before captions. */
#mix .photo-label{margin-top:34px}
@media(max-width:690px){#mix .photo-label{margin-top:30px}}