/* Reuse the original hero's size, spacing, image crop and link treatment. */
.hero-carousel::after{display:none}
.hero-slide{position:absolute;inset:0;isolation:isolate;touch-action:pan-y pinch-zoom}
.hero-slide.is-active{z-index:2}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c172caa,#111b2920 75%),linear-gradient(0deg,#11192365,transparent 45%)}
.hero-carousel .hero-title{font-size:clamp(36px,4vw,56px);line-height:1.65;letter-spacing:.08em;margin:0 0 15px;font-weight:800;text-shadow:0 2px 16px #0002}
.hero-carousel .hero-bottom{right:6%}
.hero-carousel .hero-bottom small{position:absolute;right:0;bottom:48px}
.hero-controls{position:absolute;right:6%;bottom:34px;display:flex;align-items:center;gap:10px;z-index:3}
.hero-control,.hero-dot{display:grid;place-items:center;flex-shrink:0;background:transparent;color:#fff;cursor:pointer;padding:0}
.hero-control{width:36px;height:36px;border:1px solid #ffffff70;border-radius:50%;background:#17222845;transition:background-color .2s,border-color .2s}
.hero-control .icon{width:17px;height:17px}
.hero-control:hover{background:#ffffff24;border-color:#fff}
.hero-control:focus-visible,.hero-dot:focus-visible{outline-color:#fff;outline-offset:3px}
.hero-playback{margin-left:3px;width:30px;height:30px;border:0}
.hero-playback .icon{width:15px;height:15px}
.hero-dots{display:flex;align-items:center;gap:1px}
.hero-dot{width:24px;height:32px}
.hero-dot span{display:block;width:5px;height:5px;border:1px solid #fff9;border-radius:50%;transition:background-color .2s,scale .2s}
.hero-dot[aria-current] span{background:#fff;border-color:#fff;scale:1.35}
.hero-counter{font:10px Arial,sans-serif;color:#ffffffa8;white-space:nowrap;margin-inline:2px 5px}
.hero-counter b{color:#fff;font-weight:500}
@media(max-width:800px){.hero-carousel .hero-title{font-size:43px}}
@media(max-width:600px){
 .hero-carousel .hero-title{font-size:clamp(22px,7vw,30px);line-height:1.75;letter-spacing:.01em;margin-bottom:20px}
 .hero-slide::after{background:linear-gradient(90deg,#101d33b3,#131f2730),linear-gradient(0deg,#101b2a85,transparent 45%)}
 .hero-controls{left:22px;right:18px;bottom:33px;gap:10px}
 .hero-controls .hero-dots{margin-left:2px}
 .hero-counter{margin-right:auto}
 .hero-control{width:32px;height:32px}
 .hero-playback{width:28px;height:28px}
 .hero-carousel .hero-bottom{left:22px;right:18px;bottom:34px}
 .hero-carousel .hero-bottom>span{display:none}
 .hero-carousel .hero-bottom small{bottom:41px;font-size:7px}
}
@media(max-width:360px){.hero-counter{display:none}.hero-controls{gap:6px}}
@media print{.hero-controls{display:none!important}}

/* Real article titles may be longer than the main catchphrase. */
.hero-carousel .is-article-slide .hero-title{font-size:clamp(28px,3.2vw,44px);line-height:1.55;letter-spacing:.025em;max-width:1000px;overflow-wrap:anywhere;text-wrap:pretty}
.hero-carousel .is-article-slide .hero-description{max-width:820px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-dots{max-width:240px;overflow-x:auto;scrollbar-width:none}.hero-dots::-webkit-scrollbar{display:none}
@media(max-width:600px){
 .hero-carousel .is-article-slide .hero-title{font-size:clamp(21px,5.8vw,27px);line-height:1.55;margin-bottom:12px}
 .hero-carousel .is-article-slide .hero-content{padding-top:32px;padding-bottom:88px}
 .hero-carousel .is-article-slide .hero-description{font-size:12px;line-height:1.8}
 .hero-dots{min-width:0;flex-shrink:1}
}

/* Keep the destination link at a consistent height across slides. */
.hero-carousel .hero-content{height:100%;box-sizing:border-box;padding-bottom:136px}
.hero-carousel .hero-discover{position:absolute;left:6%;bottom:94px;max-width:88%}
@media(max-width:600px){
 .hero-carousel .hero-content,.hero-carousel .is-article-slide .hero-content{padding-bottom:132px}
 .hero-carousel .hero-discover{left:22px;bottom:92px;max-width:calc(100% - 44px)}
}
/* Context for the automatically selected editorial and festival slides. */
.hero-published{font-size:10px;font-weight:400;letter-spacing:0;color:#ffffffe0;margin-left:8px;white-space:nowrap}
.hero-subtitle{font-size:16px;line-height:1.7;font-weight:500;margin:0 0 9px;max-width:960px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-carousel .is-article-slide .hero-eyebrow{margin-bottom:12px;flex-wrap:wrap;row-gap:4px}
:is(.hero-article-terms,.hero-related-terms){display:flex;gap:8px 12px;align-items:center;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px 0 5px;font-size:11px}
:is(.hero-article-terms,.hero-related-terms)::-webkit-scrollbar{display:none}
:is(.hero-article-terms,.hero-related-terms) a{flex-shrink:0;color:#fff;text-decoration:none;line-height:1.7}
.hero-article-category{border:1px solid #ffffff80;border-radius:3px;padding:1px 7px;background:#17222845}
.hero-article-tag{padding:2px 0}
:is(.hero-article-terms,.hero-related-terms) a:hover{text-decoration:underline}:is(.hero-article-terms,.hero-related-terms) a:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media(max-width:600px){
 .hero-carousel .is-article-slide .hero-content{padding-top:24px}
 .hero-carousel .is-article-slide .hero-eyebrow{font-size:10px;letter-spacing:.04em;margin-bottom:10px}
 .hero-published{font-size:9px;margin-left:0}
 .hero-subtitle{font-size:12px;line-height:1.65;margin-bottom:6px}
 .hero-carousel .is-article-slide .hero-title{font-size:clamp(20px,5.4vw,25px);line-height:1.5;margin-bottom:10px}
 :is(.hero-article-terms,.hero-related-terms){gap:9px;font-size:10px}
}

:is(.hero-article-terms,.hero-related-terms){margin-bottom:8px}
.hero-festival-footer{position:absolute;left:6%;bottom:94px;width:88%;max-width:820px}
.hero-carousel .hero-festival-footer .hero-description{margin:0 0 14px}
.hero-carousel .hero-festival-footer .hero-discover{position:static;max-width:100%}
@media(max-width:600px){.hero-festival-footer{left:22px;bottom:92px;width:calc(100% - 44px)}}

/* Lower the link into the space released by the former bottom caption. */
.hero-carousel .hero-discover,.hero-festival-footer{bottom:60px}
@media(max-width:600px){
 .hero-carousel .hero-discover,.hero-festival-footer{bottom:76px}
 .hero-controls{bottom:30px}
}

@media(max-width:600px){
 .hero-carousel .hero-discover{left:auto;right:22px}
 .hero-festival-footer{text-align:right}
 .hero-carousel .hero-festival-footer .hero-description{text-align:left}
}
.hero-link-row{display:contents}
@media(max-width:600px){
 .hero-link-row{position:absolute;left:22px;right:22px;bottom:76px;display:flex;align-items:center;justify-content:flex-end;gap:14px}
 .hero-festival-footer .hero-link-row{position:static}
 .hero-link-row :is(.hero-article-terms,.hero-related-terms){flex:1;min-width:0;margin:0;padding-block:3px;text-align:left}
 .hero-carousel .hero-link-row .hero-discover{position:static;flex-shrink:0;max-width:100%;white-space:nowrap}
}

/* Category links accompany the destination link on both screen sizes. */
.hero-link-row{position:absolute;left:6%;right:6%;bottom:60px;display:flex;align-items:center;gap:18px}
.hero-festival-footer .hero-link-row{position:static}
.hero-carousel .hero-link-row .hero-discover{position:static;flex-shrink:0;max-width:100%;white-space:nowrap}
.hero-link-row :is(.hero-article-terms,.hero-related-terms){flex:0 1 auto;min-width:0;margin:0;padding-block:3px}
@media(min-width:601px){.hero-link-row{right:340px}.hero-festival-footer .hero-link-row{padding-right:200px}}
@media(max-width:600px){
 .hero-link-row{left:22px;right:22px;bottom:76px;gap:14px}
 .hero-link-row :is(.hero-article-terms,.hero-related-terms){order:-1;flex:1}
}

.hero-topline{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hero-carousel .hero-topline .hero-eyebrow{margin:0;min-width:0;flex:0 1 auto}
.hero-topline .hero-article-terms{margin:0 0 0 auto;min-width:0;max-width:50%;flex:0 1 auto;justify-content:safe flex-end}
@media(max-width:600px){
 .hero-topline{gap:10px;margin-bottom:10px}
 .hero-topline .hero-article-terms{max-width:45%}
 .hero-topline .hero-eyebrow>span{width:16px;flex-shrink:0}
}

@media(max-width:600px){
 .hero-carousel .hero-description,
 .hero-carousel .hero-festival-footer .hero-description{margin-bottom:0}
}
@media(min-width:601px){
 .hero-topline .hero-related-terms{margin:0 0 0 auto;min-width:0;max-width:40%;flex:0 1 auto;justify-content:safe flex-end}
 .hero-topline .hero-related-terms+.hero-article-terms{margin-left:0}
 .hero-topline .hero-eyebrow{flex-shrink:0}
}

.hero-location{font-size:13px;line-height:1.7;color:#ffffffe0;margin:0;letter-spacing:.03em}
@media(max-width:600px){.hero-location{font-size:11px}}

.hero-carousel .hero-title,.hero-carousel .is-article-slide .hero-title{margin-bottom:0}

/* Gentle background motion, restarted whenever a slide becomes visible. */
.hero-carousel .hero-photo{overflow:hidden}
.hero-carousel .hero-photo img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;transform:none}
.hero-carousel .hero-photo-motion{position:absolute;inset:0;transform-origin:center}
.hero-carousel .hero-slide:not([hidden]) .hero-photo-motion{animation:hero-photo-zoom 3.6s ease-out both;will-change:transform}
@keyframes hero-photo-zoom{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-slide:not([hidden]) .hero-photo-motion{animation:none;will-change:auto}}
/* Clip transformed image layers from the first paint, including rounded corners. */
.hero-carousel{--hero-clip-radius:19px;clip-path:inset(0 round var(--hero-clip-radius))}
.hero-carousel .hero-slide,.hero-carousel .hero-photo{border-radius:inherit;overflow:hidden}
@media(max-width:600px){.hero-carousel{--hero-clip-radius:12px}}
/* Keep a stationary masked layer around the independently composited zoom. */
.hero-carousel .hero-photo{isolation:isolate;transform:translateZ(0);-webkit-mask-image:linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff);clip-path:inset(0 round var(--hero-clip-radius))}

/* Stationary outside-corner covers also hide stale first-frame compositor pixels.
   These live outside the clipped/animated carousel and match the page surface. */
.hero-carousel-frame{position:relative;isolation:isolate;--hero-corner-radius:19px}
.hero-carousel-frame::before,.hero-carousel-frame::after{content:"";position:absolute;top:0;width:var(--hero-corner-radius);height:var(--hero-corner-radius);z-index:5;pointer-events:none;transform:translateZ(0)}
.hero-carousel-frame::before{left:0;background:radial-gradient(circle at bottom right,transparent calc(var(--hero-corner-radius) - .5px),var(--paper) var(--hero-corner-radius))}
.hero-carousel-frame::after{right:0;background:radial-gradient(circle at bottom left,transparent calc(var(--hero-corner-radius) - .5px),var(--paper) var(--hero-corner-radius))}
@media(max-width:600px){.hero-carousel-frame{--hero-corner-radius:12px}}

.hero-related-terms{text-shadow:0 0 8px rgba(0,0,0,1)}
