/* Existing NOISY brand; type, spacing and radii from .design-library/noisy-v23.
   Each sample is mobile-first and stays at phone width on a large screen. */
:root{color-scheme:dark;--paper:#0a090d;--surface:#141318;--ink:#f7f5fa;--muted:#aaa6b2;--line:#29262f;--accent:#e85bc0;font:500 16px/1.5 Manrope,system-ui,sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:disabled{opacity:.3;cursor:default}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.intro{max-width:960px;margin:auto;padding:40px 20px 28px}
.intro>img{margin-bottom:32px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
h1{font:500 28px/1.25 Unbounded,Manrope,sans-serif;letter-spacing:-.03em;margin:12px 0 16px}
.intro>.eyebrow{font-size:15px;letter-spacing:.06em}
.intro-text{font-size:15px;color:var(--muted);max-width:360px}
.jump{position:sticky;top:0;z-index:10;background:#0a090df5;border-block:1px solid var(--line)}
.jump-inner{position:relative;max-width:960px;display:flex;gap:4px;align-items:center;margin:auto;padding:8px 16px;overflow-x:auto;scrollbar-width:none}
.jump-inner::-webkit-scrollbar{display:none}
.jump-inner>span{display:none}
.jump a{position:relative;display:grid;place-items:center;flex:0 0 44px;min-width:44px;height:44px;border-radius:8px;font-size:14px;font-weight:700;color:var(--muted)}
.jump a.favorite::after{content:"";position:absolute;bottom:5px;left:20px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.jump a[aria-current="location"]{background:#27212c;color:#fff}
main{max-width:960px;margin:auto}
.variant{min-width:0;padding:40px 20px 48px;scroll-margin-top:62px;border-bottom:1px solid var(--line)}
.variant-heading{margin-bottom:24px;max-width:390px}
h2{font:500 22px/1.25 Unbounded,Manrope,sans-serif;letter-spacing:-.02em;margin:8px 0 12px}
.variant-heading>p:last-child{font-size:15px;line-height:1.5;color:var(--muted);max-width:340px}
.sample{width:100%;max-width:390px}
.module{--tint:#22132b;position:relative;min-width:0;isolation:isolate}
.module.theatre{--tint:#271c36}
.module.arena{--tint:#102a26}
.module.showtime{--tint:#361c25}
.module.newsroom{--tint:#15273b}
.photo{width:100%;height:100%;object-fit:cover}
.photo.arena{object-position:50% 70%}
.photo.showtime{object-position:40% 22%}
.photo.newsroom{object-position:50% 45%}
.brand{width:128px;height:auto}
.copy h3{font-size:16px;font-weight:600;line-height:1.4}
.chevron{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
/* 01: edge-to-edge cinema strips. Photo is confined to the right half;
   text stays on a dark reading surface, independent of the image. */
.strips{display:flex;flex-direction:column;gap:12px}
.strips .module{display:flex;align-items:center;min-height:112px;padding:20px;border-radius:12px;overflow:hidden;background:var(--tint)}
.strips .photo{position:absolute;inset:0 0 0 auto;width:62%;z-index:-2}
.strips .module::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--tint) 25%,color-mix(in srgb,var(--tint) 80%,transparent) 50%,#0a090d10 100%)}
.strips .copy{display:flex;flex-direction:column;gap:12px;flex:1}
.strips .copy h3{font-size:15px;max-width:240px}
.strips .chevron{align-self:center;margin-left:8px;filter:drop-shadow(0 1px 4px #000)}
/* 02: a real poster grid. Text never overlaps the photograph. */
.posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.posters .module{display:flex;flex-direction:column;border-radius:12px;background:var(--surface);overflow:hidden}
.poster-art{position:relative;height:156px;background:var(--tint)}
.poster-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a090d00 35%,#0a090d33 65%,#141318 100%)}
.posters .brand{width:120px;max-width:calc(100% - 24px);position:absolute;left:12px;bottom:12px;z-index:1}
.posters .copy{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;padding:12px;min-height:72px}
.posters .copy h3{font-size:15px;line-height:1.5;font-weight:600}
.posters .chevron{width:16px;height:20px;margin-top:2px}
/* 03: native horizontal scrolling, no touch interception or autoplay. */
.carousel{overflow:hidden}
.carousel-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 4px 8px;scroll-padding-inline:4px}
.carousel-track::-webkit-scrollbar{display:none}
.carousel .module{display:flex;flex:0 0 86%;min-height:320px;align-items:flex-end;padding:24px;border-radius:12px;overflow:hidden;scroll-snap-align:start;background:var(--tint)}
.carousel .photo{position:absolute;inset:0;z-index:-2}
.carousel .module::after,.feature-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0a090d00 10%,#0a090d33 35%,#0a090de8 76%,#0a090d 100%)}
.carousel .copy{width:100%}
.carousel .brand{width:156px;margin-bottom:20px}
.carousel .copy h3{font-size:22px;font-weight:600;line-height:1.3;max-width:220px}
.explore{display:flex;align-items:center;gap:8px;font-size:15px;color:#d1cdd7;margin-top:20px}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 0}
.counter{font-size:14px;font-weight:700;letter-spacing:.04em}
.counter-total{color:var(--muted);font-weight:400;margin-left:8px}
.arrows{display:flex;gap:8px}
.arrows button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid #49444f}
.arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
/* 04: four explicit tabs and one large linked panel. */
.module-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.module-tabs button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;font-weight:600;padding:8px}
.module-tabs button[aria-selected="true"]{background:#2c1b2d;border-color:#df66c1;color:#fff}
.spotlight-panels>[hidden]{display:none}
.feature-card{display:flex;align-items:flex-end;min-height:300px;border-radius:12px;overflow:hidden;background:var(--tint);padding:24px}
.feature-card .photo{position:absolute;inset:0;z-index:-2}
.feature-card .brand{width:164px;margin-bottom:20px}
.feature-card .copy{width:100%}
.feature-card h3{font-size:24px;line-height:1.25;font-weight:600;max-width:260px}
.feature-card .explore{justify-content:space-between;font-size:15px;color:#eee8f1;margin-top:24px}
/* 05: quiet compact navigation. */
.list .module{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.list .module:first-child{padding-top:0}
.list .module:last-child{border-bottom:0;padding-bottom:0}
.list .photo{width:80px;height:80px;border-radius:8px;flex:none}
.list .copy{flex:1;min-width:0}
.list .brand{width:112px;margin-bottom:12px}
.list .copy h3{font-size:15px;line-height:1.4;font-weight:500;color:#d4d0d9}
.list .chevron{color:var(--muted)}
/* 06: one tall frame, two smaller frames and a wide fourth frame. */
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:140px 140px 112px;gap:12px}
.mosaic .module{display:flex;align-items:flex-end;padding:16px;border-radius:12px;overflow:hidden;background:var(--tint)}
.mosaic .module:first-child{grid-row:span 2}
.mosaic .module:last-child{grid-column:span 2}
.mosaic .photo{position:absolute;inset:0;z-index:-2}
.mosaic .module::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0a090d00 0%,#0a090d44 30%,#0a090de6 72%,#0a090d 100%)}
.mosaic .copy{min-width:0;flex:1}
.mosaic .brand{width:120px;max-width:100%;margin-bottom:12px}
.mosaic .copy h3{font-size:15px;line-height:1.4}
.mosaic .chevron{position:absolute;right:12px;top:12px;width:16px;height:16px}
.mosaic .module:last-child .photo{width:64%;left:auto;object-position:50% 40%}
.mosaic .module:last-child::after{background:linear-gradient(90deg,var(--tint) 10%,color-mix(in srgb,var(--tint) 90%,transparent) 35%,color-mix(in srgb,var(--tint) 33%,transparent) 75%,transparent 100%)}
@media(max-width:734px){
/* 06 motion: colors/easing/timings from v30 mq29.css; layout stays the mosaic. */
.motion-demo .module{--ease:cubic-bezier(.2,.7,.2,1);--light-x:88%;--light-y:24%;--blend-x:52%;--blend-y:100%;--warm-x:2%;--warm-y:80%}
.motion-demo .theatre{--light-a:168,85,247;--light-b:214,70,190;--light-c:110,96,226;--light-x:92%;--light-y:20%;--blend-x:50%;--warm-x:0%;--warm-y:40%}
.motion-demo .arena{--light-a:49,202,186;--light-b:86,156,68;--light-c:64,123,174;--light-x:96%;--light-y:60%;--blend-x:62%;--warm-x:0%;--warm-y:18%}
.motion-demo .showtime{--light-a:255,70,70;--light-b:229,46,100;--light-c:238,110,80;--light-x:90%;--light-y:22%;--blend-x:48%;--warm-x:0%;--warm-y:70%}
.motion-demo .newsroom{--light-a:80,140,255;--light-b:72,191,206;--light-c:120,110,220;--light-x:8%;--light-y:38%;--blend-x:38%;--warm-x:100%;--warm-y:10%}
.motion-demo .photo{opacity:.22;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.motion-demo .module::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 64% 100% at var(--light-x) var(--light-y),rgba(var(--light-a),.28),transparent 72%),radial-gradient(ellipse 76% 86% at var(--blend-x) var(--blend-y),rgba(var(--light-b),.20),transparent 72%),radial-gradient(ellipse 52% 90% at var(--warm-x) var(--warm-y),rgba(var(--light-c),.10),transparent 72%),rgba(13,12,18,.55);transition:opacity .8s var(--ease)}
.motion-demo .module::after{opacity:0;transition:opacity .8s var(--ease)}
.motion-demo .brand{transition:transform .8s var(--ease)}
.motion-demo .module:is(.is-active,:focus-visible) .photo{opacity:1;transform:scale(1)}
.motion-demo .module:is(.is-active,:focus-visible)::before{opacity:0}
.motion-demo .module:is(.is-active,:focus-visible)::after{opacity:1}
.motion-demo .module:is(.is-active,:focus-visible) .brand{transform:translateY(-3px)}
@media(hover:hover){
 .motion-demo .module:hover .photo{opacity:1;transform:scale(1)}
 .motion-demo .module:hover::before{opacity:0}
 .motion-demo .module:hover::after{opacity:1}
 .motion-demo .module:hover .brand{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
 .motion-demo .photo,.motion-demo .brand,.motion-demo .module::before,.motion-demo .module::after{transition:none;transform:none!important}
 .motion-demo .photo{opacity:1}.motion-demo .module::before{opacity:0}.motion-demo .module::after{opacity:1}
}
}
/* 07: vertical disclosures, using native accessible summary controls. */
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;padding:16px 0;cursor:pointer;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::marker{content:""}
.accordion summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.accordion-title{display:flex;flex-direction:column;gap:12px;font-size:15px}
.accordion-title .brand{width:128px}
.accordion summary>.chevron{transform:rotate(90deg);width:20px;height:20px}
.accordion details[open] summary>.chevron{transform:rotate(-90deg);color:var(--accent)}
.accordion-card{display:flex;align-items:flex-end;height:180px;overflow:hidden;border-radius:8px;margin-bottom:16px;background:var(--tint);padding:16px}
.accordion-card .photo{position:absolute;inset:0;z-index:-2}
.accordion-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0a090d00 15%,#0a090d55 60%,#0a090de6 100%)}
.accordion-card .explore{width:100%;justify-content:space-between;color:#fff}
/* 08: no imagery. Brand colors and a generous logo do the work. */
.color-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.color-tiles .module{display:flex;align-items:flex-end;min-height:188px;padding:16px;border-radius:12px;background:var(--tint);border-top:3px solid var(--tile-accent)}
.color-tiles .theatre{--tile-accent:#a873d8}.color-tiles .arena{--tile-accent:#55bfa6}.color-tiles .showtime{--tile-accent:#ee697b}.color-tiles .newsroom{--tile-accent:#73a0e9}
.tile-index{position:absolute;left:16px;top:16px;font:500 28px/1 Unbounded,Manrope,sans-serif;color:var(--tile-accent)}
.color-tiles .copy{width:100%}
.color-tiles .brand{width:140px;max-width:100%;margin-bottom:16px}
.color-tiles .copy h3{font-size:15px;line-height:1.4;min-height:42px;font-weight:500}
.color-tiles .chevron{position:absolute;right:12px;top:16px;width:16px;height:16px;color:var(--tile-accent)}
/* 09: circular images with overlapping brand marks and separate captions. */
.circles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
.circles .module{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:4px}
.circle-art{width:calc(100% - 12px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tint)}
.circles .copy{width:100%;display:flex;flex-direction:column;align-items:center}
.circles .brand{position:relative;width:140px;max-width:calc(100% - 16px);margin-top:-24px;margin-bottom:16px;filter:drop-shadow(0 2px 6px #0a090d)}
.circles .copy h3{font-size:15px;font-weight:500;line-height:1.4;max-width:156px}
/* 10: a light editorial alternative, with alternating rectangular imagery. */
.editorial{background:#f3f0f4;color:#17141d;padding:16px;border-radius:12px}
.editorial .module{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid #d6d0d9;align-items:center}
.editorial .module:first-child{padding-top:0}.editorial .module:last-child{padding-bottom:0;border:0}
.editorial .photo{height:136px;min-width:0;object-fit:cover}
.editorial .module:nth-child(even) .photo{grid-column:2;grid-row:1}
.editorial .module:nth-child(even) .copy{grid-column:1;grid-row:1}
.editorial .brand{width:128px;max-width:100%;margin-bottom:16px}
.editorial .copy h3{font-size:15px;font-weight:600;line-height:1.4}
.editorial .chevron{margin-top:16px;width:16px;height:16px;color:#615567}
/* 11–15 extend the chosen mosaic, using the same imagery and type scale. */
.panorama{grid-template-rows:176px 156px 112px}
.panorama .module:first-child{grid-column:span 2;grid-row:auto}
.panorama .module:first-child .photo{object-position:50% 35%}
.sport-focus .module:first-child{grid-row:auto}
.sport-focus .arena{grid-column:2;grid-row:1 / span 2}
.sport-focus .newsroom{grid-column:1;grid-row:2}
.sport-focus .arena .photo{object-position:60% 65%;transform:scale(1.5);transform-origin:50% 100%}
.joined{gap:1px;border-radius:12px;overflow:hidden;background:#49444f;grid-template-rows:156px 156px 128px}
.joined .module{border-radius:0}
.joined .module:first-child::after{background:linear-gradient(180deg,#0a090d00 20%,#0a090d33 50%,#0a090de6 100%)}
.staggered{grid-template-rows:224px 224px;gap:12px}
.staggered .module:first-child{grid-row:auto}
.staggered .arena{height:176px;align-self:end}
.staggered .newsroom{height:176px;align-self:start}
.staggered .module:last-child{grid-column:auto}
.staggered .module:last-child .photo{width:100%;left:0;object-position:40% 22%}
.staggered .module:last-child::after{background:linear-gradient(180deg,#0a090d00 0%,#0a090d44 30%,#0a090de6 72%,#0a090d 100%)}
.caption-mosaic{grid-template-rows:188px 188px 132px}
.caption-mosaic .module{padding:0}
.caption-mosaic .module::after{display:none}
.caption-mosaic .copy{position:relative;z-index:1;flex:none;width:100%;padding:12px;background:var(--tint);min-height:96px}
.caption-mosaic .brand{margin-bottom:8px}
.caption-mosaic .module:last-child .copy{width:58%;min-height:132px;display:flex;flex-direction:column;justify-content:center}
.caption-mosaic .module:last-child .photo{width:60%;object-position:40% 22%}
.caption-mosaic .chevron{filter:drop-shadow(0 1px 3px #000)}
footer{max-width:960px;margin:0 auto;padding:40px 20px;color:var(--muted);font-size:15px}
footer>img{margin-bottom:16px}
@media(min-width:700px){
 .intro{padding:56px 32px 32px}h1{font-size:40px}.jump-inner{padding-inline:32px;gap:8px}.variant{scroll-margin-top:62px}
 main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.variant{padding:40px 32px 56px}.variant:nth-child(odd){border-right:1px solid var(--line)}.variant-heading{min-height:132px}.sample{margin-inline:auto}footer{padding:40px 32px}
}
@media(max-width:359px){.intro,.variant{padding-left:16px;padding-right:16px}.jump-inner{padding-inline:12px;gap:0}.strips .module{padding:16px}.strips .copy h3{font-size:14px}.posters{gap:8px}.posters .copy{padding:10px;gap:4px}.list .module{gap:12px}.list .photo{width:64px;height:72px}.mosaic{gap:8px}.mosaic .module,.color-tiles .module{padding:12px}.color-tiles{gap:8px}.editorial{padding:12px}.editorial .module{gap:12px}.editorial .photo{height:128px}}
@media(max-width:359px){.caption-mosaic .module{padding:0}}
@media(prefers-reduced-motion:no-preference){.module-tabs button{transition:background-color .2s,border-color .2s}}

/* 16: same mosaic as06; the softened background stays still on mobile. */
@media(max-width:734px){
 .soft-demo .photo{filter:blur(2px);opacity:.6;transform:scale(1.06)}
 .soft-demo .module::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,9,13,.24)}
 .soft-demo .chevron{display:none}
 .soft-demo .copy h3{font-size:16px;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.65)}
}

/* Keep the mobile16 sample at full preview width before the desktop breakpoint. */
@media(min-width:700px) and (max-width:734px){#v16{grid-column:1 / -1}}

.soft-demo .coming-soon{display:none}
@media(max-width:734px){
 .soft-demo{grid-template-rows:156px 156px 112px}
 .soft-demo .coming-soon{display:block;position:absolute;top:10px;left:12px;padding:3px 6px;border-radius:4px;background:rgba(10,9,13,.78);color:#e5e1ea;font-size:9px;font-weight:700;line-height:12px;letter-spacing:.08em}
}

@media(max-width:734px){.soft-demo .keep-together{white-space:nowrap}}