/* Pop presents the existing scenes. It never owns navigation or media state.
   Every rule is scoped to the selected look; Classic keeps its original CSS. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-700.ttf) format("truetype");
}
.ks-viewer[data-look="pop"] {
  --ks-paper: #fff;
  --ks-paper-deep: #fff5ce;
  --ks-ink: #111;
  --ks-muted: #51483f;
  --ks-gold: #8238bd;
  --ks-gilt: #ffd200;
  --ks-accent: #8238bd;
  --ks-title: "Cormorant Garamond", Georgia, serif;
  --ks-body: "Cormorant Garamond", Georgia, serif;
  --ks-script: "Cormorant Garamond", Georgia, serif;
  --pop-pink: #ff2a6d;
  --pop-blue: #05d9e8;
  --pop-yellow: #ffd200;
  --pop-purple: #9b51e0;
  --pop-rainbow: linear-gradient(90deg, var(--pop-pink), var(--pop-yellow), var(--pop-blue), var(--pop-purple), var(--pop-pink));
}
.ks-viewer[data-look="pop"] .ks-moment { background-image: none; }
.ks-viewer[data-look="pop"] .ks-caps { font-family: "Space Grotesk", "Manrope", Arial, sans-serif; font-weight: 700; letter-spacing: .3em; }
.ks-viewer[data-look="pop"] .ks-framed::before,
.ks-viewer[data-look="pop"] .ks-framed::after { display: none; }
.ks-viewer[data-look="pop"] .ks-badge { border: 1.5px solid #111; background: #fff; color: #111; box-shadow: none; backdrop-filter: none; }
.ks-viewer[data-look="pop"] .ks-badge::before { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--pop-pink), var(--pop-yellow), var(--pop-blue), var(--pop-purple), var(--pop-pink)); }
.ks-viewer[data-look="pop"] .ks-badge::after { display: none; }
.ks-viewer[data-look="pop"] .ks-progress span { background: var(--pop-rainbow); }
.ks-viewer[data-look="pop"] :focus-visible { outline-color: var(--pop-purple); }

/* Cover: a silkscreen portrait beside oversized type. */
.ks-viewer[data-look="pop"] .ks-cover { background: #fff; color: #111; }
.ks-viewer[data-look="pop"] .ks-cover::before,
.ks-viewer[data-look="pop"] .ks-sentence::after,
.ks-viewer[data-look="pop"] .ks-small::before { content: ""; display: block; position: absolute; inset: 0; border: 0; opacity: .26; pointer-events: none; background: radial-gradient(var(--pop-pink) 1.6px, transparent 1.7px) 0 0 / 18px 18px; mask-image: radial-gradient(ellipse at 70% 25%, #000, transparent 65%); }
.ks-viewer[data-look="pop"] .ks-cover .ks-background,
.ks-viewer[data-look="pop"] .ks-cover .ks-shade { inset: 12% 5.5% auto auto; width: min(36cqw, 49.6cqh); height: auto; aspect-ratio: 4 / 5; }
.ks-viewer[data-look="pop"] .ks-cover .ks-background { filter: grayscale(1) contrast(1.25); }
.ks-viewer[data-look="pop"] .ks-cover .ks-shade { background: var(--pop-pink); mix-blend-mode: multiply; opacity: .88; box-shadow: 18px 18px var(--pop-yellow); }
.ks-viewer[data-look="pop"] .ks-cover:not(.ks-has-photo) .ks-shade { display: none; }
.ks-viewer[data-look="pop"] .ks-cover-copy { position: relative; align-items: flex-start; max-width: 62%; margin-right: auto; padding-bottom: 28px; text-align: left; }
.ks-viewer[data-look="pop"] .ks-name { max-width: 100%; font-size: clamp(4.6rem, 14cqw, 15rem); line-height: .82; letter-spacing: -.05em; text-shadow: none; }
.ks-viewer[data-look="pop"] .ks-name::first-letter { color: var(--pop-pink); font-style: italic; }
.ks-viewer[data-look="pop"] .ks-rule { width: 100%; max-width: none; height: 2px; background: #111; transform-origin: left; }
.ks-viewer[data-look="pop"] .ks-rule::after { display: none; }
.ks-viewer[data-look="pop"] .ks-cover-meta { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 18px 28px; }
.ks-viewer[data-look="pop"] .ks-years { padding: .7rem 1.25rem; border: 3px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, var(--pop-rainbow) border-box; color: #111; rotate: -3deg; }
.ks-viewer[data-look="pop"] .ks-tagline { max-width: 36ch; font: 400 clamp(1.1rem, 1.5cqw, 1.45rem)/1.5 "Manrope", Arial, sans-serif; color: #44403c; }
.ks-viewer[data-look="pop"] .ks-scroll-cue { color: #111; }

/* Paper scenes, print plates, and labels. */
.ks-viewer[data-look="pop"] .ks-sentence::before,
.ks-viewer[data-look="pop"] .ks-candids::before { content: ""; position: absolute; left: 5.5%; right: 5.5%; top: clamp(72px, 11cqh, 100px); width: auto; height: 2px; transform: none; opacity: 1; background: #111; }
.ks-viewer[data-look="pop"] .ks-statement { line-height: 1; letter-spacing: -.025em; }
.ks-viewer[data-look="pop"] .ks-sentence .ks-statement { position: relative; z-index: 1; max-width: 20ch; font-size: clamp(2.4rem, 5.6cqw, 6rem); }
.ks-viewer[data-look="pop"] .ks-sentence em,
.ks-viewer[data-look="pop"] .ks-forever { background: var(--pop-rainbow); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: ks-pop-spectrum 5s linear infinite; }
.ks-viewer[data-look="pop"] .ks-print { --plate: var(--pop-pink); padding: 0; border-radius: 0; background: var(--plate); box-shadow: 18px 18px var(--plate); rotate: none; }
.ks-viewer[data-look="pop"] .ks-print-b { --plate: var(--pop-blue); }
.ks-viewer[data-look="pop"] .ks-remembrance .ks-print { --plate: var(--pop-purple); }
.ks-viewer[data-look="pop"] .ks-print img { filter: grayscale(1) contrast(1.3); }
.ks-viewer[data-look="pop"] .ks-print::after { inset: 0; border: 0; border-radius: 0; background: var(--plate); mix-blend-mode: multiply; opacity: .92; transition: opacity .35s ease; }
.ks-viewer[data-look="pop"] .ks-print:has(.ks-photo-empty)::after { display: none; }
.ks-viewer[data-look="pop"] .ks-candid-copy .ks-statement { font-size: clamp(1.9rem, 3.6cqw, 3.4rem); line-height: 1.05; }
.ks-viewer[data-look="pop"] .ks-caption-tag,
.ks-viewer[data-look="pop"] .ks-people-copy .ks-caps { display: inline-flex; align-self: flex-start; padding: .55rem 1.1rem; border-radius: 999px; background: var(--pop-yellow); color: #111; rotate: -2deg; }
.ks-viewer[data-look="pop"] .ks-caption-tag::before,
.ks-viewer[data-look="pop"] .ks-caption-tag::after,
.ks-viewer[data-look="pop"] .ks-ornament::before,
.ks-viewer[data-look="pop"] .ks-ornament::after { display: none; }
.ks-viewer[data-look="pop"] .ks-ornament { position: relative; padding: .9em 1.4em; border: 2px solid #111; border-radius: 999px; color: #111; }
.ks-viewer[data-look="pop"] .ks-small-list { position: relative; counter-reset: small-thing; }
.ks-viewer[data-look="pop"] .ks-small-list li { counter-increment: small-thing; }
.ks-viewer[data-look="pop"] .ks-small-list li::before { content: "No. " counter(small-thing); display: block; width: auto; height: auto; margin: 0 0 .45em; transform: none; background: none; font: 700 11px "Space Grotesk", "Manrope", Arial, sans-serif; letter-spacing: .3em; color: #bf174c; }
.ks-viewer[data-look="pop"] .ks-small-list li:nth-child(2)::before { color: #007d86; }
.ks-viewer[data-look="pop"] .ks-small-list li:last-child::before { color: var(--ks-accent); }
.ks-viewer[data-look="pop"] .ks-small-list li:last-child { color: #bf174c; }

/* Existing audio/video controls retain their behavior, captions, and empty states. */
.ks-viewer[data-look="pop"] .ks-sound { background: var(--pop-yellow); }
.ks-viewer[data-look="pop"] .ks-sound-title { font-style: italic; }
.ks-viewer[data-look="pop"] .ks-media-time { color: #44354d; }
.ks-viewer[data-look="pop"] .ks-sound { --ks-gilt: #111; --ks-gold: #111; }
.ks-viewer[data-look="pop"] .ks-film { background: #111; }
.ks-viewer[data-look="pop"] .ks-film-frame { border-block: 4px solid; border-image: var(--pop-rainbow) 1; }
.ks-viewer[data-look="pop"] .ks-film .ks-media-time { color: #fff; }

/* Full-bleed photos and the closing dedication. */
.ks-viewer[data-look="pop"] .ks-people,
.ks-viewer[data-look="pop"] .ks-closing { background: #23102e; color: #fff; }
.ks-viewer[data-look="pop"] .ks-people .ks-background,
.ks-viewer[data-look="pop"] .ks-closing .ks-background { filter: grayscale(1) contrast(1.15); }
.ks-viewer[data-look="pop"] .ks-people .ks-shade { background: linear-gradient(#9b51e099, #240d40e6); }
.ks-viewer[data-look="pop"] .ks-closing .ks-shade { background: linear-gradient(#ff2a6d66, #350b20ee); }
.ks-viewer[data-look="pop"] .ks-people .ks-statement em { color: var(--pop-yellow); }
.ks-viewer[data-look="pop"] .ks-passage-title { padding-top: .9em; border-top: 2px solid #111; color: #111; }
.ks-viewer[data-look="pop"] .ks-passage-title::after { display: none; }
.ks-viewer[data-look="pop"] .ks-paragraph:first-of-type::first-letter { color: var(--pop-pink); }
.ks-viewer[data-look="pop"] .ks-signature { font: 700 11px/1.5 "Space Grotesk", "Manrope", Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.ks-viewer[data-look="pop"] .ks-forever { font-style: italic; font-size: clamp(3.6rem, 11cqw, 11rem); line-height: .9; letter-spacing: -.035em; text-shadow: none; }
.ks-viewer[data-look="pop"] .ks-closing-copy > .ks-outline { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--pop-rainbow) border-box; color: #111; }
.ks-viewer[data-look="pop"] .ks-credit .ks-signature { font: italic 400 clamp(1.6rem, 3cqw, 2.3rem)/1 var(--ks-body); letter-spacing: -.01em; text-transform: none; color: var(--pop-yellow); }
.ks-viewer[data-look="pop"] .ks-hug-names span { font-style: italic; }

/* The embedded card stays a desktop canvas; fullscreen follows its own width. */
@container (max-width: 899px) {
  .ks-viewer[data-look="pop"] .ks-cover .ks-background,
  .ks-viewer[data-look="pop"] .ks-cover .ks-shade { left: 5.5%; right: auto; width: min(58cqw, 30.4cqh); }
  .ks-viewer[data-look="pop"] .ks-cover-copy { max-width: 100%; padding-bottom: 90px; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover { gap: 20px; padding-top: calc(max(90px, 12cqh) + min(62.5cqw, 30cqh) + 32px); padding-bottom: 128px; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover .ks-background,
  .ks-viewer[data-look="pop"].ks-full .ks-cover .ks-shade { top: max(90px, 12cqh); width: min(50cqw, 24cqh); }
  .ks-viewer[data-look="pop"].ks-full .ks-cover-copy { padding-bottom: 0; gap: 14px; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover-meta { gap: 12px; }
  .ks-viewer[data-look="pop"].ks-full .ks-scroll-cue { position: static; transform: none; align-self: center; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover:not(.ks-has-photo) { padding-top: 110px; }
}
@container (min-width: 641px) and (max-height: 600px) {
  .ks-viewer[data-look="pop"].ks-full .ks-cover { padding-top: 100px; padding-bottom: 96px; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover .ks-background,
  .ks-viewer[data-look="pop"].ks-full .ks-cover .ks-shade { left: auto; right: 5.5%; top: 22%; width: 38cqh; }
  .ks-viewer[data-look="pop"].ks-full .ks-cover-copy { max-width: 65%; padding-bottom: 0; }
  .ks-viewer[data-look="pop"].ks-full .ks-name { font-size: clamp(3rem, 20cqh, 7rem); }
  .ks-viewer[data-look="pop"].ks-full .ks-scroll-cue { display: none; }
  .ks-viewer[data-look="pop"] .ks-candid-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .ks-viewer[data-look="pop"] .ks-remembrance-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .ks-viewer[data-look="pop"] .ks-remembrance .ks-print { width: min(100%, 40cqh); }
}
.ks-viewer[data-look="pop"].ks-cover-only .ks-cover .ks-background,
.ks-viewer[data-look="pop"].ks-cover-only .ks-cover .ks-shade { top: 6%; width: 46cqw; }
.ks-viewer[data-look="pop"].ks-cover-only .ks-cover-copy { padding-bottom: 0; }
.ks-viewer[data-look="pop"].ks-cover-only .ks-name { font-size: clamp(2.6rem, 14cqw, 5rem); }
.ks-viewer[data-look="pop"].ks-cover-only .ks-cover-meta { gap: 12px; }
.ks-viewer[data-look="pop"].ks-cover-only .ks-years { font-size: 9px; padding: .5rem .8rem; }
.ks-viewer[data-look="pop"].ks-cover-only .ks-tagline { font-size: clamp(.85rem, 3.4cqw, 1.2rem); }
@media (hover: hover) {
  .ks-viewer[data-look="pop"] .ks-print:hover img { filter: none; }
  .ks-viewer[data-look="pop"] .ks-print:hover::after { opacity: 0; }
}
@keyframes ks-pop-spectrum { to { background-position: 200% 50%; } }