/* A shorter media stage preserves the full vertical film in a compact frame. */
.showcase .showcase-head{margin-bottom:38px}
.showcase .reel-card:nth-child(n){margin-top:0}
.showcase .reel-visual{height:clamp(250px,34svh,390px);aspect-ratio:auto;background:#173338}
.showcase .good-stuff-video{object-fit:contain;background:#173338}
.showcase .reel-info{padding-top:17px}
.showcase .reel-type{margin-bottom:9px}
.showcase .reel-info h3{font-size:clamp(25px,2.4vw,36px)}
.showcase .reel-description{margin:8px 0 14px}
.reel-controls{display:none}
@media(max-width:690px){
 .showcase.section{padding-block:58px}
 .showcase .showcase-head{margin-bottom:25px}
 .showcase .showcase-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-inline:contain;padding:0 0 14px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
 .showcase .reel-card{flex:0 0 84%;scroll-snap-align:start;scroll-snap-stop:always}
 .showcase .reel-visual{height:clamp(230px,39svh,340px)}
 .showcase .reel-info h3{font-size:25px}
 .showcase .reel-type{font-size:10px;margin-bottom:8px}
 .showcase .reel-description{font-size:15px;margin:7px 0 12px}
 .showcase .reel-out{font-size:10px;padding:10px 13px}
 .reel-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
 .reel-control-buttons{display:flex;gap:8px}.reel-control-buttons button{width:42px;height:42px;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font-size:19px}.reel-control-buttons button:disabled{opacity:.3;cursor:default}
}
/* TV portrait follows the same size and ratio as one card in The Mix. */
.tv.section{padding-block:clamp(48px,5vw,80px)}
.tv-intro{grid-template-columns:minmax(0,1fr) calc((100% - 3 * clamp(13px,1.8vw,32px))/4);gap:5vw;margin-bottom:28px;align-items:center}
.tv-intro .screen-photo-wrap{width:100%;max-width:none;aspect-ratio:3/4;margin:0;border-width:5px;box-shadow:9px 10px 0 rgba(0,0,0,.16)}
.tv-intro .screen-chip{font-size:clamp(9px,1vw,13px);padding:9px 10px;left:-10px;max-width:calc(100% + 20px)}
.tv-grid{column-gap:28px}
.tv-card{padding:20px 0}
.tv-card small{margin-bottom:10px;min-height:0}
.tv-end{margin-top:22px;font-size:11px}
@media(max-width:690px){
 .tv.section{padding-block:40px}
 .tv .eyebrow{margin-bottom:24px}
 .tv-intro{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:27px}
 .tv-intro>.big-title{font-size:var(--section-title-size);line-height:.98;letter-spacing:-.045em}
 .tv-intro .screen-photo-wrap{width:100%;margin:0;aspect-ratio:3/4;border-width:5px}
 .tv-intro .screen-chip{font-size:8px;padding:7px 8px;left:-7px;max-width:calc(100% + 14px);letter-spacing:.025em;bottom:10px}
 .tv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .tv-card{padding:16px 0}
 .tv-card small{font-size:8px;letter-spacing:.055em;line-height:1.4;margin-bottom:8px}
 .tv-card h3{font-size:clamp(19px,5.2vw,27px);line-height:1.06}
 .tv-end{margin-top:18px;font-size:9px}
}
/* The mobile hero and its full ribbon share the first viewport. */
@media(max-width:690px){
 :root{--mobile-ribbon-height:clamp(70px,calc(4vw + 64px),92px)}
 .hero{height:calc(100svh - var(--mobile-ribbon-height));min-height:0;padding:82px var(--gutter) 30px;justify-content:flex-start}
 .hero-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:6px;height:100%;min-height:0;align-items:stretch}
 .hero-overline{font-size:10px;letter-spacing:.09em;line-height:1.3}
 .hero h1{font-size:clamp(60px,20vw,94px);line-height:.94;margin:16px 0 14px;padding:0 .05em 0 0}
 .hero-sub{font-size:clamp(18px,5.2vw,23px);line-height:1.2}
 .hero-small{margin-top:18px}
 .hero-small .round-link{font-size:11px;padding:11px 17px}
 .hero-art{height:auto;min-height:0;margin:0}
 .hero-photo{top:4%;height:84%;width:44%;max-width:230px;right:14%;border-width:5px}
 .hero-ticket{width:clamp(74px,22vw,100px);height:clamp(74px,22vw,100px);right:5%;bottom:5%}
 .hero-ticket span{font-size:clamp(10px,2.9vw,13px)}
 .hero .motion-toggle{bottom:9px;padding:6px 10px;font-size:9px}
 .ticker-viewport{height:var(--mobile-ribbon-height);padding:0;margin:0;display:flex;align-items:center}
 .ticker{width:100%;flex:0 0 100%;padding-block:10px;transform:rotate(-3deg) scale(1.06);margin:0}
 .ticker .copy{font-size:clamp(20px,5.8vw,30px);line-height:1.12}
}
/* Let only the top of the ribbon peek into the first mobile screen. */
@media(max-width:690px){
 .hero{height:calc(100svh - 22px)}
 .ticker-viewport{margin-top:-1px}
}
@media(max-width:690px){.ticker-viewport{background:var(--green)}}
/* Tighter transitions and a compact player-and-copy composition. */
.brands.section{padding-bottom:28px}
.contact.section{padding-top:48px;padding-bottom:48px}
.contact .eyebrow{margin-bottom:22px}
.contact .huge{margin:24px 0 36px}
.contact-bottom{margin-top:36px}
.youtube.section{padding-block:clamp(48px,5vw,72px)}
.youtube .youtube-head{margin-bottom:32px}
.youtube-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;gap:clamp(24px,4vw,60px)}
.youtube-player{max-width:236px;margin-inline:auto;box-shadow:9px 9px 0 var(--blue)}
.youtube-copy{padding-top:0}
.youtube-copy h3{font-size:clamp(25px,3vw,42px);margin-bottom:16px}
.youtube-copy p:not(.eyebrow){font-size:17px}
.youtube-copy .round-link{margin-top:20px}
@media(max-width:690px){
 .brands.section{padding-bottom:24px}
 .contact.section{padding-top:32px;padding-bottom:40px}
 .contact .eyebrow{margin-bottom:16px}
 .contact .huge{margin:22px 0 28px}
 .contact-bottom{margin-top:28px;gap:22px}
 .contact .mail{padding:13px 15px}
 .youtube.section{padding-block:40px}
 .youtube .youtube-head{margin-bottom:25px}
 .youtube .youtube-head .section-text{font-size:20px;line-height:1.25}
 .youtube-layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;align-items:center}
 .youtube-player{max-width:none;width:100%;margin:0;border-width:4px;box-shadow:6px 6px 0 var(--blue)}
 .youtube-copy{min-width:0}
 .youtube-copy .eyebrow{font-size:8px;letter-spacing:.09em;margin-bottom:12px}
 .youtube-copy h3{font-size:clamp(19px,5.2vw,27px);line-height:1.08;margin-bottom:12px}
 .youtube-copy p:not(.eyebrow){font-size:13px;line-height:1.4}
 .youtube-copy .round-link{font-size:9px;letter-spacing:.02em;padding:10px 12px;margin-top:16px}
 .youtube-fallback{font-size:10px;line-height:1.4;margin-top:15px}
}
/* Match mobile reel cards to the film's portrait ratio, without sidebars. */
@media(max-width:690px){
 .showcase .reel-card{flex:0 0 min(74vw,240px,calc(44svh * 9 / 16))}
 .showcase .reel-visual{width:100%;height:auto;aspect-ratio:9/16}
 .showcase .good-stuff-video{object-fit:cover}
}
/* Overlap the entire angled ribbon over the hero, with only a small first-screen hint. */
@media(max-width:690px){
 .hero{height:calc(100svh + 20px)}
 .hero .motion-toggle{bottom:42px}
 .ticker-viewport{background:transparent;margin-top:calc(-.5 * var(--mobile-ribbon-height));margin-bottom:0}
 .ticker{transform:rotate(-4deg) scale(1.06)}
}
/* Give YouTube room to watch, rather than squeezing it beside narrow copy. */
.youtube .youtube-head{margin-bottom:38px}
.youtube-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px)}
.youtube-player{max-width:320px}
.youtube-copy h3{font-size:var(--card-title-size)}
.youtube-copy p:not(.eyebrow){font-size:18px}
@media(max-width:690px){
 .youtube.section{padding-block:52px}
 .youtube .youtube-head{margin-bottom:34px}
 .youtube .youtube-head .section-text{font-size:var(--section-copy-size);line-height:1.3}
 .youtube-layout{grid-template-columns:1fr;gap:32px}
 .youtube-player{width:min(100%,280px);max-width:none;justify-self:center;margin:0;box-shadow:8px 8px 0 var(--blue);border-width:5px}
 .youtube-copy{width:100%;max-width:380px;justify-self:center}
 .youtube-copy .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:14px}
 .youtube-copy h3{font-size:var(--card-title-size);line-height:1.08;margin-bottom:14px}
 .youtube-copy p:not(.eyebrow){font-size:17px;line-height:1.4}
 .youtube-copy .round-link{font-size:11px;padding:12px 18px;margin-top:20px}
 .youtube-fallback{font-size:12px;line-height:1.5;margin-top:18px}
}
/* Lower the ribbon hint by a mobile toolbar's height without enlarging the portrait. */
@media(max-width:690px){
 .hero{height:calc(100svh + 92px);padding-bottom:102px}
}
/* Restore an even, more generous rhythm across the final three chapters. */
.tv.section,.brands.section,.contact.section{padding-block:clamp(64px,6vw,96px)}
@media(max-width:690px){
 .tv.section,.brands.section,.contact.section{padding-block:72px}
 .tv .eyebrow,.brands .eyebrow,.contact .eyebrow{margin-bottom:24px}
}
/* A slightly fuller ribbon and a more deliberate transition into chapter one. */
@media(max-width:690px){
 :root{--mobile-ribbon-height:clamp(82px,calc(4vw + 76px),104px)}
 .hero{height:calc(100svh + 98px);padding-bottom:108px}
 .ticker{padding-block:16px}
 .about.section{padding-top:60px}
}
.reel-controls-activate{position:absolute;inset:0;z-index:3;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reel-controls-activate:focus-visible{outline:3px solid var(--cream);outline-offset:-5px}
.tv-card-current{position:relative;background:rgba(245,238,226,.07);border-left:3px solid #b0c4d0;padding-left:18px}
.tv-card-current .on-air{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(245,238,226,.4);border-radius:30px;padding:6px 9px;margin:0 0 10px;font-size:8px;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#f5eee2}
.on-air:before{content:'';width:6px;height:6px;border-radius:50%;background:#c8dfcf;box-shadow:0 0 0 3px rgba(200,223,207,.1)}
.tv-card-current small{opacity:.8}
@media(max-width:690px){.tv-card-current{padding-left:10px}.tv-card-current .on-air{font-size:7px;padding:6px 7px;letter-spacing:.025em}}
/* An editorial contact signature rather than a boxed email button. */
.contact-email-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;line-height:1.5;margin:0 0 12px;opacity:.7}
.contact .mail,[data-theme=dark] .contact .mail{display:inline-flex;align-items:baseline;gap:clamp(12px,2vw,24px);font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(26px,4.2vw,68px);line-height:1.2;letter-spacing:-.04em;padding:6px 0 14px;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;color:inherit;max-width:100%;transition:opacity .2s}
.contact .mail .email-arrow{font-family:Arial,Helvetica,sans-serif;font-size:.55em;font-style:normal;letter-spacing:0;align-self:center}@media (hover:hover) and (pointer:fine){
.contact .mail:hover,[data-theme=dark] .contact .mail:hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7}}
@media(max-width:690px){.contact-email-label{font-size:9px;letter-spacing:.12em;margin-bottom:10px}.contact .mail,[data-theme=dark] .contact .mail{font-size:clamp(22px,5.8vw,34px);gap:12px;padding:7px 0 13px}}
@media(prefers-reduced-motion:reduce){.contact .mail{transition:none}}

/* Native one-tap activation on touch; keyboard focus remains independent. */
a,button{touch-action:manipulation}

/* A clean, readable mobile email link without decorative symbols. */
@media(max-width:690px){
 .contact .mail,[data-theme=dark] .contact .mail{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:700;font-size:clamp(18px,5.7vw,28px);letter-spacing:-.035em;line-height:1.3;display:inline-block;white-space:nowrap;padding:8px 0 12px;text-decoration:none}
}
/* Portrait frames without sidebars on desktop as well as mobile. */
@media(min-width:691px){
 .showcase .showcase-grid{grid-template-columns:repeat(3,minmax(0,240px));gap:clamp(18px,3vw,36px);max-width:792px;margin-inline:auto;justify-content:center}
 .showcase .reel-visual{width:100%;height:auto;aspect-ratio:9/16}
 .showcase .good-stuff-video{object-fit:cover}
}
/* Slightly smaller photographs, with the TV portrait kept at the same scale. */
.photo-item .photo-img{width:92%;margin-inline:auto}
.tv-intro .screen-photo-wrap{width:92%;justify-self:center}