/* The heading sizes itself; artwork can never rise into the description. */
.feature-ribbon-stage{height:496px}
.feature-ribbon{height:450px}
.feature-ribbon .ribbon-card{height:430px;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.deck-card-heading{display:flex;flex-direction:column;gap:12px;min-height:126px;padding:22px 24px 16px;position:relative;z-index:2}
.feature-ribbon .ribbon-card .ribbon-card-title,.feature-ribbon .ribbon-card .deck-card-copy{display:block;position:static;inset:auto;margin:0}
.feature-ribbon .ribbon-card .ribbon-card-title{font-weight:700;line-height:1.3}
.feature-ribbon .ribbon-card .deck-card-copy{line-height:1.5}
.feature-ribbon .ribbon-card .ribbon-art{position:relative;inset:auto;display:block;min-height:0;width:100%;height:100%;transform:none;overflow:hidden}
.feature-ribbon .ribbon-card .ribbon-footer{position:relative;inset:auto;padding:16px 22px;min-height:52px}
.feature-ribbon:focus-visible{outline:none}
.feature-ribbon:focus-visible .ribbon-card[data-centered] .ribbon-footer{background:linear-gradient(120deg,#ffffff21,#ffffff08)}
.feature-ribbon:focus-visible .ribbon-card[data-centered] .ribbon-footer>span:nth-child(2){text-decoration:underline;text-underline-offset:4px}
.deck-art-scene{container-type:inline-size}
.deck-art-caption{position:absolute;left:5%;right:5%;bottom:13px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:clamp(9px,3.55cqw,17px);font-weight:500;line-height:1.5;color:#d4d4dc;text-align:center}
.deck-art-caption>.icon{width:1.3em;height:1.3em;flex-shrink:0;color:#f0ae7d}
.deck-display{top:10%;left:6%;right:6%;padding:3px;transform:perspective(850px) rotateY(-5deg) rotateZ(-1deg)}
.art-detail .deck-display{top:9%}
.deck-poster-fan{inset:9% 4% 22%}
.deck-poster{aspect-ratio:2/3;background-image:url('/design/v25/assets/studio/v17/clap-posters.webp');background-size:300% 100%;border:0}
.poster-virage{background-position:0 50%}
.poster-luciole{background-position:50% 50%}
.poster-note{background-position:100% 50%}
.deck-poster-fan .deck-poster{width:35%;max-height:95%;height:auto}
.deck-poster-fan .poster-virage{left:8%;top:8%;transform:rotate(-12deg)}
.deck-poster-fan .poster-note{left:57%;top:8%;transform:rotate(13deg)}
.deck-poster-fan .poster-luciole{left:33%;top:0;transform:translateZ(28px) rotate(2deg)}
.art-clap .deck-art-caption{bottom:12px}
.art-sports{mask-image:linear-gradient(0deg,#000 87%,transparent)}
.art-sports>img{height:100%;object-position:46% 50%}
.art-sports .deck-art-caption{color:white;text-shadow:0 2px 8px #000;bottom:17px}
.deck-phone{top:5%;height:78%;left:13%;transform:rotate(-6deg)}
.deck-traveller{height:89%;width:61%;right:1%;bottom:12%;object-fit:contain}
.art-offline .deck-art-caption{bottom:12px}
.art-cast .deck-display{top:8%;left:16%;right:5%;aspect-ratio:1693/929;transform:perspective(850px) rotateY(-4deg)}
.deck-cast-phone{left:8%;bottom:8%;height:60%;width:25%;padding:0;transform:rotate(-6deg)}
.cast-phone-video{top:13%;left:4px;right:4px;aspect-ratio:16/10}
.cast-phone-video>img{object-fit:cover;object-position:75% 50%}
.cast-phone-name{position:absolute;top:53%;left:3px;right:3px;font-size:clamp(6px,2.15cqw,13px);line-height:1.3}
.cast-phone-controls{position:absolute;left:0;right:0;bottom:13%;margin:0;gap:7px}
.cast-phone-controls>.icon{width:clamp(9px,3.3cqw,18px);height:clamp(9px,3.3cqw,18px)}
.deck-cast-wave{bottom:9%;left:56%;width:18%;height:22%}
.deck-cast-wave>.icon{width:60%;height:60%}

/* An actual programme grid: yesterday's shows and a clear replay affordance. */
.replay-guide{position:absolute;inset:3% 5% 9%;display:grid;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(145deg,#22222a,#111117);border:1px solid #ffffff28;border-radius:12px;box-shadow:0 16px 28px #0006;overflow:hidden;text-align:left}
.replay-guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 10px;border-bottom:1px solid #ffffff13;font-size:clamp(10px,3.9cqw,23px);color:#f3f3f6}
.replay-guide-head strong{font-weight:600}
.replay-guide-head>span{font-size:.83em;color:#d9b091;background:#e07b3912;border-radius:5px;padding:4px 6px}
.replay-guide-grid{display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.replay-programme{display:grid;grid-template-columns:22% minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border-top:1px solid #ffffff0b}
.programme-photo{display:block;aspect-ratio:965/543;border-radius:5px;background-image:url('/design/v25/assets/studio/v17/replay-thumbnails.webp');background-size:100% 300%;background-repeat:no-repeat;background-color:#1a1a21}
.programme-nature{background-position:50% 0}.programme-cuisine{background-position:50% 50%}.programme-stars{background-position:50% 100%}
.programme-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.programme-info strong{font-size:clamp(10px,3.9cqw,23px);font-weight:600;line-height:1.2;color:#eeeef3}
.programme-info>span{font-size:clamp(8px,3cqw,17px);line-height:1.3;color:#b1b1bf}
.programme-rewatch{display:flex;flex-direction:column;gap:3px;align-items:center;color:#e9c5aa;font-size:clamp(8px,2.8cqw,16px)}
.programme-rewatch>.icon{width:clamp(13px,4.5cqw,24px);height:clamp(13px,4.5cqw,24px)}

/* Fictional live broadcast in a TV player, distinct from the Sports calendar. */
.live-tv{position:absolute;left:5%;right:5%;top:8%;aspect-ratio:1672/941;border-radius:10px;border:1px solid #ffffff50;background:linear-gradient(155deg,#6b6b71,#101015 18%,#29292f);padding:4px;box-shadow:0 18px 28px #0007;transform:perspective(850px) rotateY(-4deg) rotateZ(-1deg)}
.live-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:6px;container-type:inline-size;background:#12121a}
.live-screen>img{width:100%;height:100%;object-fit:contain}
.live-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(#0005,transparent 30%,transparent 60%,#000c);pointer-events:none}
.live-score{position:absolute;top:9%;left:4%;display:flex;align-items:stretch;font-size:clamp(5px,2.4cqw,13px);line-height:1.8;z-index:1}
.live-score strong{display:flex;gap:.55em;padding:.1em .6em;background:#17171de8;font-weight:600;border-radius:3px 0 0 3px;color:#fafafa}
.live-score b{background:#e07b39;color:#fff;padding:0 .35em}
.live-score>span{display:flex;align-items:center;background:#f0f0f2;color:#25252c;padding:0 .5em;border-radius:0 3px 3px 0}
.live-channel{position:absolute;right:5%;top:10%;z-index:1;color:white;font:800 clamp(8px,4.5cqw,26px)/1 Sora;letter-spacing:-.04em;text-shadow:0 2px 6px #0008}
.live-channel small{display:block;margin-top:4px;font:500 .4em Sora;letter-spacing:.14em;text-align:right}
.live-controls{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.live-pause{display:flex;align-items:center;justify-content:center;gap:4px;width:clamp(26px,12cqw,60px);aspect-ratio:1;border-radius:50%;border:1px solid #ffffff60;background:linear-gradient(140deg,#ffffff27,#18181d75);box-shadow:0 4px 18px #0003}
.live-pause i{height:30%;width:7%;background:#fff;border-radius:1px}
.live-player-bottom{position:absolute;left:5%;right:5%;bottom:7%;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff}
.live-player-bottom>strong{font-size:clamp(8px,3.7cqw,21px);font-weight:600}
.live-player-bottom>span{display:flex;align-items:center;gap:4px;font-size:clamp(5px,2.6cqw,14px);white-space:nowrap;letter-spacing:.02em}
.live-player-bottom i{width:.5em;height:.5em;border-radius:50%;background:#f28b49}
.live-tv-foot{position:absolute;left:42%;right:42%;top:100%;height:8%;background:linear-gradient(90deg,#19191e,#6a6a73,#22222a);clip-path:polygon(35% 0,65% 0,70% 80%,100% 85%,100% 100%,0 100%,0 85%,30% 80%)}

/* A small, readable library rather than another full film-detail screenshot. */
.comfort-library{position:absolute;inset:3% 6% 8%;display:flex;flex-direction:column;padding:12px;background:linear-gradient(150deg,#1b1b22,#101015);border:1px solid #ffffff25;border-radius:12px;box-shadow:0 16px 28px #0005;overflow:hidden}
.comfort-nav{display:flex;align-items:center;gap:10px;font-size:clamp(8px,2.9cqw,16px);color:#a8a8b6;white-space:nowrap}
.comfort-nav b{margin-right:auto;font-size:clamp(9px,3.4cqw,20px);color:#e6e6ed;font-weight:650}
.comfort-nav>span:first-of-type{color:#edb087}
.comfort-heading{display:block;color:#e3e3eb;font-size:clamp(9px,3.4cqw,19px);font-weight:600;margin:13px 0 8px;text-align:left}
.comfort-continue{display:grid;grid-template-columns:30% minmax(0,1fr) auto;align-items:center;gap:9px}
.comfort-film{display:block;aspect-ratio:16/10;border-radius:5px;background:url('/design/v25/assets/studio/v17/clap-posters.webp') 0 20%/300% auto}
.comfort-continue>span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
.comfort-continue strong{font-size:clamp(9px,3.4cqw,19px);font-weight:550;line-height:1.2}
.comfort-continue small{color:#a9a9b8;font-size:clamp(8px,2.7cqw,15px)}
.comfort-continue>.icon{color:#e9c4a8;width:clamp(12px,4.5cqw,25px);height:clamp(12px,4.5cqw,25px)}
.comfort-progress{display:block;height:2px;background:#ffffff18;border-radius:2px}
.comfort-progress i{display:block;height:100%;width:42%;background:#e07b39;border-radius:2px}
.comfort-favorites{display:flex;gap:7px;min-height:0;flex:1}
.comfort-favorites .deck-poster{position:static;width:auto;height:100%;max-width:32%;flex-shrink:0;box-shadow:none;border-radius:4px}

/* The same illustration opens larger, without becoming a fake app control. */
.deck-dialog-art{width:min(100%,700px);aspect-ratio:1.38;margin:20px auto 0;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 50% 80%,#ffffff05,transparent 70%)}
.deck-dialog-art .deck-art-caption{bottom:4%}
.deck-dialog-art .deck-poster-fan{inset:4% 4% 14%}
.deck-dialog-art .replay-guide-head{padding:4%}
.deck-dialog-art .replay-programme{padding:3%;gap:4%}
.deck-dialog-art .comfort-library{padding:4%}
.deck-dialog-art .comfort-heading{margin:5% 0 3%}
.deck-dialog-art .comfort-continue{gap:4%}
.deck-dialog-art .comfort-favorites{gap:3%}

@media(max-width:700px){
 .feature-ribbon-stage{height:478px}
 .feature-ribbon{height:440px}
 .feature-ribbon .ribbon-card{height:414px}
 .deck-card-heading{padding:20px 20px 15px;gap:11px;min-height:120px}
 .feature-ribbon .ribbon-card .deck-card-copy{font-size:13px}
 .feature-ribbon .ribbon-card .ribbon-footer{padding:15px 18px;font-size:11px;min-height:49px}
 .replay-guide{inset:3% 4% 10%}
 .replay-guide-head{padding:10px 9px}
 .replay-programme{gap:7px;padding:7px 8px}
 .deck-dialog-art{aspect-ratio:1.05}
 .deck-dialog-art .deck-poster-fan{inset:10% 2% 21%}
 .deck-dialog-art .live-tv{top:18%}
 .deck-dialog-art .art-cast .deck-display{top:13%}
}