/* 1. Variables */
:root {
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;
  --color-background: #0b1324;
  --color-background-alt: #111c31;
  --color-gold: #e8d6a3;
  --color-cream: #f6f1e3;
  --color-text: #f6f1e3;
  --color-text-muted: #c7c3b8;
  --color-divider: rgba(232, 214, 163, 0.45);
  --content-width: 82rem;
  --page-padding: clamp(1rem, 4vw, 2.5rem);
  --section-space: clamp(4rem, 8vw, 7rem);
  --radius: 1rem;
}

/* 2. Reset/base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: break-word; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; }
img, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 4px; }
ul { margin: 0; padding: 0; }

/* 3. Typography */
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { color: var(--color-cream); font-family: var(--font-display); line-height: 1.1; }
h1 { max-width: 11ch; margin-block-end: 1.5rem; font-size: clamp(3rem, 7vw, 6.5rem); }
h2 { margin-block-end: 1rem; font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { margin-block-end: 0.75rem; font-size: 1.5rem; }
p { margin-block-end: 1rem; }
.eyebrow { margin-block-end: 0.8rem; color: var(--color-gold); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* 4. Layout/container */
.container { width: min(100% - (2 * var(--page-padding)), var(--content-width)); margin-inline: auto; }
.section { padding-block: var(--section-space); border-block-start: 1px solid var(--color-divider); }
.section-alt { background: var(--color-background-alt); }
.section-intro { max-width: 46rem; }
.skip-link { position: fixed; z-index: 100; inset: 0 auto auto 1rem; padding: 0.75rem 1rem; transform: translateY(-150%); background: var(--color-cream); color: var(--color-background); }
.skip-link:focus { transform: translateY(1rem); }

/* 5. Header/navigation */
.site-header { border-block-end: 1px solid var(--color-divider); }
.header-layout, .footer-layout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 5rem; }
.brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.site-nav ul, .site-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; }
.site-nav a, .site-footer a { text-underline-offset: 0.25em; }

/* 6. Hero */
.hero { border-block-start: 0; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); min-height: min(50rem, calc(100svh - 5rem)); }
.hero-copy, .hero-artwork { min-width: 0; }
.hero-description { max-width: 38rem; color: var(--color-text-muted); font-size: clamp(1rem, 1.5vw, 1.25rem); }
.artwork-placeholder { display: grid; aspect-ratio: 16 / 10; place-items: center; padding: 2rem; border: 1px dashed var(--color-divider); border-radius: var(--radius); background: linear-gradient(145deg, rgba(232,214,163,0.1), rgba(17,28,49,0.5)); color: var(--color-text-muted); text-align: center; }
.hero-artwork picture, .hero-artwork img { width: 100%; border-radius: var(--radius); }
.store-badge-placeholder { display: inline-flex; min-height: 3.5rem; align-items: center; justify-content: center; margin-block-start: 1rem; padding: 0.75rem 1rem; border: 1px dashed var(--color-divider); border-radius: 0.5rem; color: var(--color-text-muted); font-size: 0.85rem; }

/* 7. Generic sections */
.personalization, .story-variety, .age-groups, .story-moods, .artwork-styles, .narration, .storyline, .sample-stories, .privacy { min-height: 17rem; }

/* 8. Cards/grids */
.foundation-grid { display: grid; gap: 1.25rem; margin-block-start: 2rem; }
.foundation-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foundation-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-divider); border-radius: var(--radius); }
.foundation-card p { margin-block-end: 0; color: var(--color-text-muted); }

/* 9. Media/video */
.media-layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(20rem, 1.25fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.video-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius); background: #050912; }
.video-frame video { width: 100%; height: 100%; object-fit: contain; }

/* 10. CTA */
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta-panel h2 { margin-block-end: 0; }

/* 11. Footer */
.site-footer { padding-block: 2rem; border-block-start: 1px solid var(--color-divider); }
.site-footer p { margin: 0; color: var(--color-text-muted); }

/* 12. Tablet breakpoint */
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); gap: 2.5rem; min-height: auto; }
  .hero-artwork .artwork-placeholder { aspect-ratio: 1; }
  .media-layout { grid-template-columns: 1fr; }
}

/* 13. Mobile breakpoint */
@media (max-width: 600px) {
  :root { --section-space: 3.5rem; }
  .header-layout, .footer-layout, .cta-panel { align-items: flex-start; flex-direction: column; }
  .header-layout { padding-block: 1rem; }
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0.25rem 1rem; }
  .hero-layout { display: flex; flex-direction: column; gap: 2rem; }
  .hero-artwork { order: -1; width: 100%; }
  .hero-artwork .artwork-placeholder { aspect-ratio: 4 / 5; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(2.7rem, 14vw, 4.25rem); }
  .foundation-grid-three { grid-template-columns: 1fr; }
  .video-frame { border-radius: 0.75rem; }
  .footer-layout { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* Part 2 visual identity */
:root { --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --color-bg:#0b1324; --color-bg-alt:#111c31; --color-bg-deep:#070d18; --color-gold-strong:#e8c978; --space-content:clamp(1.5rem,4vw,3rem); --shadow-soft:0 1.5rem 4rem rgba(0,0,0,.28); }
body { overflow-x:hidden; line-height:1.7; }
h1 { max-width:none; font-size:clamp(3.1rem,5.6vw,5.8rem); font-weight:400; letter-spacing:-.035em; }
h1 span { display:block; }
.section-deep { background:var(--color-bg-deep); }
.section-heading { max-width:50rem; }
.site-header { border-block-end-color:rgba(232,214,163,.18); background:rgba(7,13,24,.9); }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-size:1.15rem; font-weight:400; }
.brand-mark { width:.7rem; height:.7rem; border:1px solid var(--color-gold); transform:rotate(45deg); }
.site-nav a,.site-footer a { color:var(--color-text-muted); text-decoration-color:transparent; text-underline-offset:.35em; transition:color 180ms ease,text-decoration-color 180ms ease; }
.site-nav a:hover,.site-footer a:hover { color:var(--color-cream); text-decoration-color:var(--color-gold); }
.hero { isolation:isolate; overflow:hidden; background:radial-gradient(circle at 78% 30%,rgba(90,104,133,.16),transparent 34%),linear-gradient(145deg,var(--color-bg-deep),var(--color-bg) 55%,#101a2f); }
.hero-tagline { max-width:20ch; margin-block:1.25rem; color:var(--color-gold); font-family:var(--font-display); font-size:clamp(1.55rem,2.8vw,2.35rem); line-height:1.2; }
.hero-description { font-size:clamp(1rem,1.25vw,1.13rem); }
.gold-divider { display:flex; align-items:center; gap:.8rem; width:min(100%,18rem); }
.gold-divider::before,.gold-divider::after { height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--color-divider)); content:""; }
.gold-divider::after { background:linear-gradient(90deg,var(--color-divider),transparent); }
.gold-divider span { width:.48rem; height:.48rem; border:1px solid var(--color-gold-strong); transform:rotate(45deg); }
.hero-actions { display:flex; align-items:flex-end; gap:2rem; margin-block-start:2rem; }
.store-caption { margin-block-end:.45rem; color:var(--color-gold); font-size:.75rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; }
.secondary-action { display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; font-size:.9rem; text-underline-offset:.35em; }
.artwork-placeholder { position:relative; overflow:hidden; border-style:solid; background:radial-gradient(circle at 50% 45%,rgba(70,94,130,.3),transparent 40%),linear-gradient(155deg,#17243c,#080f1d); box-shadow:var(--shadow-soft); }
.placeholder-moon { position:absolute; top:18%; width:clamp(3rem,8vw,5.5rem); aspect-ratio:1; border-radius:50%; box-shadow:1rem -.15rem 0 -.2rem rgba(232,214,163,.3); transform:rotate(-12deg); }
.placeholder-label { margin-block-start:7rem; font-family:var(--font-display); }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-content); margin-block-start:2rem; }
.feature-card { padding:clamp(1.25rem,3vw,2rem); border:1px solid rgba(232,214,163,.22); border-radius:var(--radius); background:rgba(27,41,67,.62); box-shadow:0 1rem 2.5rem rgba(0,0,0,.12); }
.feature-card p { margin:0; color:var(--color-text-muted); }
.sample-story-layout { display:grid; grid-template-columns:minmax(16rem,.65fr) minmax(28rem,1.35fr); align-items:center; gap:clamp(3rem,7vw,7rem); }
.media-frame { display:grid; width:100%; aspect-ratio:16/9; place-content:center; justify-items:center; gap:1rem; border:1px solid rgba(232,214,163,.35); border-radius:var(--radius); background:#030710; box-shadow:var(--shadow-soft); color:var(--color-text-muted); }
.play-symbol { width:0; height:0; border-block:.75rem solid transparent; border-inline-start:1.15rem solid var(--color-gold); }
.cta-area { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--space-content); padding:clamp(2rem,6vw,4rem); border-block:1px solid var(--color-divider); background:linear-gradient(100deg,rgba(232,214,163,.06),transparent 62%); }
.cta-copy { max-width:48rem; }
.cta-copy h2 { max-width:18ch; }
.footer-brand { display:grid; gap:.2rem; }
.footer-brand strong { font-family:var(--font-display); font-weight:400; }
.footer-brand span { color:var(--color-text-muted); font-size:.82rem; }
@media (max-width:1024px) { .hero-layout { grid-template-columns:1fr; gap:3rem; text-align:center; } .hero-copy { max-width:46rem; margin-inline:auto; } .gold-divider,.hero-tagline,.hero-description { margin-inline:auto; } .hero-actions { justify-content:center; } .hero-artwork { width:min(100%,42rem); margin-inline:auto; } .sample-story-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .hero-actions { align-items:center; flex-direction:column; gap:1rem; } .store-cta { width:100%; text-align:center; } .feature-grid { grid-template-columns:1fr; } .cta-area { grid-template-columns:1fr; align-items:start; padding-inline:0; background:none; } .cta-area .store-cta { text-align:left; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }


/* Part 3 content layouts */
.card-number,.panel-note { color:var(--color-gold); font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.inline-media-placeholder { display:grid; min-height:6.5rem; place-items:center; margin-block-start:1.5rem; border:1px dashed rgba(232,214,163,.25); border-radius:.5rem; color:var(--color-text-muted); font-size:.75rem; }
.feature-card-image { display:block; width:100%; height:auto; margin-block-start:1.5rem; border:1px solid rgba(232,214,163,.25); border-radius:.5rem; }
.personalization-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(32rem,1.15fr); align-items:center; gap:clamp(3rem,7vw,7rem); }
.supporting-copy { max-width:38rem; margin-block-start:2.5rem; padding-inline-start:1.5rem; border-inline-start:1px solid var(--color-gold); }
.supporting-copy p { margin-block-end:0; color:var(--color-text-muted); }
.personalization-panel { padding:clamp(1.5rem,4vw,3rem); border:1px solid rgba(232,214,163,.3); border-radius:var(--radius); background:linear-gradient(145deg,rgba(27,41,67,.88),rgba(7,13,24,.82)); box-shadow:var(--shadow-soft); }
.panel-note { margin-block-end:1.5rem; }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; }
.detail-list div { padding:1rem; border-block-start:1px solid rgba(232,214,163,.14); }
.detail-list .detail-wide { grid-column:1/-1; }
.detail-list dt { color:var(--color-text-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.detail-list dd { margin:.2rem 0 0; color:var(--color-cream); font-family:var(--font-display); font-size:1.08rem; }
.story-path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); margin-block-start:3rem; }
.story-path-grid article { padding-block-start:1.4rem; border-block-start:1px solid var(--color-divider); }
.story-path-grid p { margin:0; color:var(--color-text-muted); }
.age-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin-block-start:3rem; }
.age-grid .feature-card { padding:clamp(1.15rem,2vw,1.75rem); }
.section-note { max-width:48rem; margin:2rem 0 0; color:var(--color-gold); font-family:var(--font-display); font-size:1.15rem; }
.mood-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-content); margin-block-start:3rem; }
.mood-panel { position:relative; overflow:hidden; min-height:18rem; padding:clamp(2rem,5vw,4rem); border:1px solid rgba(232,214,163,.24); border-radius:var(--radius); }
.mood-panel p { max-width:34rem; color:var(--color-text-muted); }
.mood-bedtime { background:linear-gradient(145deg,#101d34,#080e1a); }
.mood-anytime { background:linear-gradient(145deg,#253047,#111a2b); }
.mood-symbol { display:block; width:2.5rem; aspect-ratio:1; margin-block-end:2rem; }
.moon-symbol { border-radius:50%; box-shadow:.7rem -.1rem 0 -.15rem var(--color-gold); }
.sun-symbol { border:1px solid var(--color-gold); border-radius:50%; box-shadow:0 0 1.5rem rgba(232,201,120,.16); }
.style-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem; margin:3rem 0 0; list-style:none; }
.style-item { position:relative; min-height:12rem; overflow:hidden; border:1px solid rgba(232,214,163,.2); border-radius:.5rem; background:linear-gradient(145deg,rgba(232,214,163,.08),rgba(7,13,24,.6)); color:var(--color-cream); font-family:var(--font-display); }
.style-item img { width:100%; height:100%; object-fit:cover; transition:transform 300ms ease; }
.style-item span { position:absolute; inset:auto 0 0; z-index:1; padding:2.5rem 1rem 1rem; background:linear-gradient(transparent,rgba(7,13,24,.95)); }
.style-item:hover img { transform:scale(1.04); }
@media (prefers-reduced-motion:reduce) { .style-item img { transition:none; } }
.video-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-block-start:3rem; border:1px solid rgba(232,214,163,.2); background:rgba(232,214,163,.2); }
.video-feature-grid article { padding:clamp(1.5rem,4vw,3rem); background:var(--color-bg); }
.video-feature-grid p { color:var(--color-text-muted); }
.format-grid { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0 0; list-style:none; }
.format-grid li { display:grid; justify-items:center; gap:.5rem; color:var(--color-text-muted); font-size:.75rem; }
.format-grid span { display:block; border:1px solid var(--color-gold); background:rgba(232,214,163,.04); }
.format-landscape span { width:3.5rem; aspect-ratio:16/9; }
.format-portrait span { width:1.8rem; aspect-ratio:9/16; }
.format-square span { width:2.6rem; aspect-ratio:1; }
.narration-layout,.privacy-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.75fr); gap:clamp(3rem,7vw,7rem); align-items:center; }
.narration-layout .section-heading>p:not(.eyebrow),.privacy-layout p { color:var(--color-text-muted); }
.sample-status,.privacy-pending { display:inline-block; padding:.75rem 1rem; border:1px dashed var(--color-divider); border-radius:.4rem; color:var(--color-text-muted); font-size:.78rem; }
.narrator-samples>p { color:var(--color-text-muted); }
.narrator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-block-start:1.5rem; }
.narrator-card { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid rgba(232,214,163,.2); border-radius:.5rem; background:rgba(27,41,67,.62); box-shadow:0 1rem 2.5rem rgba(0,0,0,.12); }
.narrator-card h4 { min-width:0; margin:0; overflow-wrap:anywhere; color:var(--color-cream); font-size:1.05rem; }
.narrator-card audio { display:none; }
.narrator-listen-button { min-width:6.6rem; min-height:2.75rem; padding:.65rem .85rem; border:1px solid var(--color-gold); border-radius:.4rem; background:transparent; color:var(--color-gold); font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.06em; cursor:pointer; transition:background 180ms ease,color 180ms ease,border-color 180ms ease; }
.narrator-listen-button:hover,.narrator-listen-button:focus-visible,.narrator-listen-button.is-playing { border-color:var(--color-gold-strong); background:var(--color-gold-strong); color:var(--color-bg-deep); }
.storyline-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(22rem,1.2fr); gap:clamp(2rem,6vw,6rem); align-items:center; }
.quote-panel { position:relative; margin:0; padding:clamp(2rem,5vw,4rem); border-block:1px solid var(--color-divider); color:var(--color-gold); font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,2.2rem); line-height:1.4; }
.quote-panel p { margin:0; }
.storyline-outro { grid-column:2; color:var(--color-text-muted); }
.sample-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-content); margin-block-start:3rem; }
.sample-card { display:grid; grid-template-columns:minmax(9rem,.8fr) minmax(0,1.2fr); overflow:hidden; border:1px solid rgba(232,214,163,.2); border-radius:var(--radius); background:rgba(7,13,24,.46); }
.sample-thumb { min-height:13rem; background:radial-gradient(circle at 50% 40%,rgba(232,214,163,.12),transparent 18%),linear-gradient(145deg,#1a2944,#080e1a); }
.sample-card-copy { padding:clamp(1.25rem,3vw,2rem); }
.sample-meta { color:var(--color-text-muted); font-size:.8rem; }
.sample-action { display:inline-block; color:var(--color-gold); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:1024px) { .personalization-layout { grid-template-columns:1fr; } .story-path-grid,.age-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .style-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .sample-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .mood-grid,.video-feature-grid,.narration-layout,.privacy-layout,.storyline-layout { grid-template-columns:1fr; } .storyline-outro { grid-column:auto; } }
@media (max-width:600px) { .detail-list,.story-path-grid,.age-grid,.narrator-grid { grid-template-columns:1fr; } .detail-list .detail-wide { grid-column:auto; } .style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .mood-panel { min-height:0; } .sample-card { grid-template-columns:1fr; } .sample-thumb { min-height:11rem; } }

/* Sample video gallery */
.sample-story-gallery .section-heading { margin-inline:auto; text-align:center; }
.sample-story-gallery .section-intro { margin-inline:auto; }
.sample-supporting-copy { margin-block:1.5rem 0; color:var(--color-gold); font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.35rem); }
.sample-player-shell { width:100%; aspect-ratio:var(--sample-aspect-ratio,16 / 9); overflow:hidden; margin:clamp(2rem,5vw,3.5rem) auto 0; border:1px solid rgba(232,214,163,.35); border-radius:var(--radius); background:#000; box-shadow:var(--shadow-soft); transition:max-width 220ms ease; }
.sample-player-landscape { max-width:960px; }
.sample-player-portrait { max-width:430px; }
.sample-player-square { max-width:680px; }
.sample-player-shell iframe { display:block; width:100%; height:100%; border:0; background:#000; }
.active-story-details { max-width:60rem; margin:1.5rem auto 0; text-align:center; }
.active-story-details h3 { margin-block-end:.4rem; }
.active-story-details p { margin:0; color:var(--color-text-muted); }
.sample-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-block-start:clamp(2rem,5vw,3.5rem); }
.sample-selector-card { min-width:0; padding:0; overflow:hidden; border:1px solid rgba(232,214,163,.2); border-radius:var(--radius); background:rgba(27,41,67,.62); box-shadow:0 1rem 2.5rem rgba(0,0,0,.12); color:var(--color-text); font:inherit; text-align:left; cursor:pointer; transition:border-color 180ms ease,transform 180ms ease,background 180ms ease; }
.sample-selector-card:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(232,214,163,.5); }
.sample-selector-card.is-selected { border-color:var(--color-gold-strong); background:rgba(232,214,163,.09); box-shadow:0 0 0 1px rgba(232,201,120,.28),0 1rem 2.5rem rgba(0,0,0,.18); }
.sample-selector-card:disabled { cursor:not-allowed; opacity:.58; }
.sample-thumbnail-media { position:relative; display:block; overflow:hidden; aspect-ratio:16 / 9; background:#030710; }
.sample-selector-card img { width:100%; height:100%; object-fit:cover; transition:transform 220ms ease,filter 220ms ease; }
.sample-selector-card:hover:not(:disabled) img { transform:scale(1.025); filter:brightness(.88); }
.sample-thumbnail-play { position:absolute; top:50%; left:50%; display:grid; width:2.65rem; aspect-ratio:1; place-items:center; border:1px solid rgba(246,241,227,.75); border-radius:50%; transform:translate(-50%,-50%); background:rgba(7,13,24,.72); box-shadow:0 .4rem 1.2rem rgba(0,0,0,.32); }
.sample-thumbnail-play::after { width:0; height:0; margin-inline-start:.18rem; border-block:.36rem solid transparent; border-inline-start:.58rem solid var(--color-cream); content:""; }
.sample-selector-card.is-selected .sample-thumbnail-play { border-color:var(--color-gold-strong); background:rgba(7,13,24,.84); }
.sample-selector-copy { display:block; padding:1rem; }
.sample-selector-title { display:block; margin-block-end:.4rem; color:var(--color-cream); font-family:var(--font-display); font-size:1.08rem; line-height:1.25; }
.sample-selector-meta { display:block; color:var(--color-text-muted); font-size:.78rem; line-height:1.5; }
.sample-unavailable { display:block; margin-block-start:.55rem; color:var(--color-gold); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:768px) { .sample-selector { display:flex; gap:1rem; overflow-x:auto; padding:.2rem .2rem 1rem; scroll-snap-type:x proximity; scrollbar-color:var(--color-divider) transparent; } .sample-selector-card { flex:0 0 min(19rem,82vw); scroll-snap-align:start; } }
@media (max-width:600px) { .sample-player-shell { border-radius:.75rem; } }