/* A quiet, contained cinema for portrait stories. */
.qq-web-stories { margin-block: clamp(2.5rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.qq-web-stories [hidden] { display: none !important; }
.qq-web-stories__layout { background: #111114; color: #fff; border-block-start: 4px solid var(--qq-brand, #ee0d4d); padding: clamp(1rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; min-width: 0; }
.qq-web-stories__layout > * { min-width: 0; }
.qq-web-stories__intro { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.qq-web-stories__mark { display: none; font-family: var(--qq-font-serif, Georgia, serif); font-size: 4rem; line-height: 1; }
.qq-web-stories__mark span { color: #ff76a0; }
.qq-web-stories__description { margin: 0; font-size: 1rem; line-height: 1.5; }
.qq-web-stories__hint { color: #c5c5ce; font-size: .75rem; line-height: 1.5; margin: 0; }
.qq-web-stories__now { width: 100%; }
.qq-web-stories__now > :is(h3, .qq-eyebrow) { display: none; }
.qq-web-stories__now h3 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.25; margin-block: .6rem 1rem; overflow-wrap: anywhere; }
.qq-web-stories__now a, .qq-web-stories__layout a { color: #fff; }
.qq-web-stories__layout a:hover { color: #ffb3cd; }
.qq-web-stories__stage { width: min(100%, 20rem); justify-self: center; }
.qq-web-stories__screen { position: relative; aspect-ratio: 3 / 5; width: 100%; background: #242429; overflow: hidden; border-radius: .4rem; }
.qq-web-stories__screen amp-story-player { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.qq-web-stories__screen amp-story-player > a { display: none; }
.qq-web-stories__controls { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-block-start: .75rem; }
.qq-web-stories__controls button { background: #242429; color: #fff; border: 1px solid #85858f; min-height: 44px; min-width: 44px; padding: .35rem .6rem; border-radius: 2rem; font: inherit; font-size: .72rem; cursor: pointer; }
.qq-web-stories__controls span { font-size: .72rem; white-space: nowrap; }
.qq-web-stories__controls button:hover { background: #45454e; }
.qq-web-stories__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; align-content: start; }
.qq-web-stories__list li { min-width: 0; }
.qq-web-stories__card { width: 100%; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem; border: 1px solid #656570; border-radius: .4rem; text-align: start; background: transparent; color: #fff; font: inherit; text-decoration: none; cursor: pointer; }
.qq-web-stories__card[aria-current="true"] { border-color: #ff76a0; background: #30212a; }
.qq-web-stories__card img { width: 3.5rem; height: auto; aspect-ratio: 3 / 5; object-fit: cover; border-radius: .2rem; }
.qq-web-stories__card small { display: block; color: #ffb3cd; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; margin-block-end: .3rem; }
.qq-web-stories__card strong { display: block; font-weight: 500; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.qq-web-stories__card:hover { background: #30212a; }
.qq-web-stories__status { font-size: .85rem; }
.qq-web-stories__status:empty { display: none; }
.qq-web-stories :is(a, button):focus-visible { outline: 3px solid #ffb3cd; outline-offset: 3px; }
@media (min-width: 48rem) {
 .qq-web-stories__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 .qq-web-stories.is-enhanced .qq-web-stories__intro { grid-column: 1 / -1; }
 .qq-web-stories__list { max-height: 35rem; overflow-y: auto; padding: .2rem; scrollbar-color: #85858f #111114; }
}
@media (min-width: 68rem) {
 .qq-web-stories.is-enhanced .qq-web-stories__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
 .qq-web-stories.is-enhanced .qq-web-stories__intro { grid-column: auto; }
 .qq-web-stories__intro { gap: 1.25rem; }
 .qq-web-stories__mark { display: block; font-size: 5rem; }
 .qq-web-stories__description { font-size: clamp(1.15rem, 1.7vw, 1.5rem); max-width: 30ch; }
 .qq-web-stories__now { border-block-start: 1px solid #656570; padding-block-start: 1.25rem; }
 .qq-web-stories__now > :is(h3, .qq-eyebrow) { display: block; }
}