/* =====================================================================
   story_detail.css — /free-stories/story/{slug}/, the public free-story
   page on base_landing.html (the sc- chrome), goal 17
   (bmad-output/redesign-site/decisions.md §3, §10).

   The page is ds.css's grammar — ds-page → ds-section bands → ds-inner
   --narrow; breadcrumb, label, H1, lede, pills; the shared player from
   components/player.css; the story as ds-passage paragraphs; a forest
   closing band. This sheet carries only what the grammar lacks.

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES AN sd- ONE (design contract
   §4.6). ⛔ NO CUSTOM PROPERTIES (contract §1.6). Literals only; the palette
   is ds.css's; no shadow, no gradient.
   ===================================================================== */

/* The story's glyph above the label — the system's one icon device, at the
   scale's 40px (stands in for an illustration). */
.sd-emoji {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin: 0 0 14px;
}

/* Category pills: links, so each is a 44px target */
.sd-meta {
    margin: 0 0 20px;
}

.sd-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

/* The player (or the "audio on its way" note) between the lede and the text */
.sd-player {
    margin: 8px 0 32px;
}

.sd-note {
    margin: 8px 0 32px;
}

/* The story: Lora passage paragraphs, one measure, a paragraph's breath between */
.sd-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 700px;
}

/* The closing band's lede reads the genre-free line; its button is the
   parchment invert. */
.sd-cta-lede {
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .sd-emoji { margin: 0 0 18px; }
    .sd-meta { margin: 0 0 24px; }
    .sd-player, .sd-note { margin: 8px 0 40px; }
    .sd-text { gap: 22px; }
}