/* Multi-Stream Theme - Minimal Base Styles

   ORGANISATION. The file is grouped by component, in this order:
      1. Tokens and themes            8. Apps
      2. Base and layout              9. Shared page furniture
      3. Site chrome                 10. Music (cards, release page, projects,
      4. Home page                       performances, credits, report, lists)
      5. Bio, social and contact     11. Genres
      6. Blog and Jogger             12. Print
      7. Shortcodes                  13. Utilities
   A component's responsive behaviour lives directly under its base rules, in
   this order: narrow (max-width: 767px), tablet (768-1023px), wide (min-width:
   1024px). There is no separate "mobile styles" section; see "CSS Architecture"
   in Docs/2025-11-12-multi-stream-theme.md. */

/* ==========================================================================
   1. TOKENS AND THEMES
   ========================================================================== */

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Charter, "Sitka Text", Georgia, "Palatino Linotype", "Book Antiqua", serif;
}

/* Light mode (default) */

:root {
    --bg-primary: #f5f5f7;
    --bg-secondary: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #a1a1a6;
    --border-color: #d2d2d7;
    --accent: #0071e3;
}

/* Dark mode */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #000000;
        --bg-secondary: #1d1d1f;
        --text-primary: #f5f5f7;
        --text-secondary: #a1a1a6;
        --text-tertiary: #6e6e73;
        --border-color: #424245;
        --accent: #2997ff;
    }
}

/* ==========================================================================
   2. BASE AND LAYOUT
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    padding: 0 0.25em;
}

/* Narrow screens: width is scarce, so content (cards, text, everything)
   uses the full viewport — no side padding. Wide screens: width is
   abundant, so a gutter is added instead of leaving content stretched
   edge-to-edge. Cards never need to bleed/cancel this — there's
   nothing to cancel on narrow screens in the first place. */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

/* ==========================================================================
   3. SITE CHROME AND GLOBAL ELEMENTS
   ========================================================================== */

/* Header */

.site-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    position: relative;
    z-index: 100;
}

.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.site-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

/* Breadcrumb trail in the header: Site > Section > Page */

.site-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.site-breadcrumb li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

.site-crumb {
    color: var(--text-secondary);
    text-decoration: none;
}

.site-crumb:hover {
    color: var(--accent);
}

.site-crumb-current {
    color: var(--text-primary);
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hamburger toggle button */

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--text-secondary);
    text-decoration: none;
}

.nav-menu a:hover {
    color: var(--accent);
}

/* Narrow screens: shorter header, and the nav collapses into the hamburger menu. */
@media (max-width: 767px) {
    .site-header {
        padding: 10px 0;
    }

    /* Mobile navigation */

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
        flex-direction: column;
        gap: 1rem;
        min-width: 200px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin: 0;
    }

    .nav-menu a {
        display: block;
        padding: 0.5rem;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* Main content */

main {
    min-height: 60vh;
    padding: 0 0 40px 0;
}

/* Footer */

.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 40px 0;
    text-align: center;
    color: var(--text-secondary);
}

/* Links */

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    line-height: 1.2;
    margin-bottom: 0.5rem; /* Reduced by half */
    margin-top: 1rem;
}

/* Card title: one heading level below a stream's h2, used by every
   preview card (music, app, blog, post-card) */

.music-preview h3,
.app-preview h3,
.blog-post-preview h3,
.post-card-content h3 {
    font-size: 1.25rem;
    margin: 0 0 0 0;
}

/* ==========================================================================
   4. HOME PAGE
   ========================================================================== */

/* Hero section */

.hero {
    padding: 60px 0 40px 0;
}

.hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 720px;
    margin: 0 auto;
}

.hero-intro {
    flex-basis: 100%;
    width: 100%;
    margin-top: 1.5rem;
    color: var(--text-secondary);
}

.hero-intro p:last-child {
    margin-bottom: 0;
}

.hero-photo {
    flex-shrink: 0;
    margin-right: 1rem;
}

.hero-photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
}

.hero-text {
    flex-shrink: 1;
    min-width: 0;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.hero .tagline {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Mobile: drop photo and big title, keep tagline + social icons */
@media (max-width: 767px) {
    .hero-photo {
        display: none;
    }

    .hero h1 {
        display: none;
    }

    .hero-content {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .hero-text {
        text-align: center;
    }

    .hero-intro {
        text-align: center;
    }

    .hero .tagline {
        color: var(--text-secondary);
    }

    .hero {
        padding: 15px 0 10px 0;
    }
}

/* Stream columns */

.stream-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Increase gap on wider screens */

@media (min-width: 768px) {
    .stream-columns {
        gap: 2rem;
    }
}

/* Mobile: Stack Music on top, then Apps, then Bio */

@media (min-width: 768px) and (max-width: 1023px) {
    .stream-columns {
        grid-template-columns: 1fr;
    }

    /* Order on tablet: Music, Apps, Bio */
    .music-stream { order: 1; }
    .apps-stream { order: 2; }
    .bio-stream { order: 3; }
}

/* Desktop: Three columns */

@media (min-width: 1024px) {
    .stream-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.stream-column h2 {
    margin-bottom: 1.5rem;
}

.stream-column h2 a {
    color: var(--text-primary);
    text-decoration: none;
}

.stream-column h2 a:hover {
    color: var(--accent);
}

@media (max-width: 767px) {
    .music-stream h2,
    .apps-stream h2 {
        display: none;
    }
}

.stream-content {
    /* Removed background - individual items will have their own containers */
}

/* Spacing between cards lives on the list container (gap), not on
   each card (margin-bottom). A card's own margin can't tell whether
   it's followed by a sibling, so reusing .music-preview/.app-preview
   in a longer list (e.g. /music/) needs a separate reset for every
   width the list can appear at — gap doesn't have that problem.
   Scoped to music/apps only: bio-stream's .stream-content holds
   prose and .blog-post-preview, which have their own spacing and
   would double up if this applied there too. */

.music-stream .stream-content,
.apps-stream .stream-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Music preview on homepage */

.music-preview {
    position: relative;
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: 12px;
}

.music-preview h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.music-preview h3 a:hover {
    color: var(--accent);
}

/* Card text is three lines at every width: title / artist / genres •
   month. Each line stays on one line (ellipsis) so long collaborator
   lists can't grow the card. */

.music-preview-artist,
.music-preview-details {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-preview-artist {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.music-preview-details {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 0;
    margin-bottom: 1rem;
}

.music-preview-details a {
    color: inherit;
    text-decoration: none;
}

/* Service logos at the foot of a card; above the card's stretched link so
   they open the service directly. */

.music-preview-services {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    align-items: center;
}

.music-preview-services a {
    position: relative;
    z-index: 2;
    display: block;
    line-height: 0;
}

.music-preview-services img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* "Presave" chip: a release whose only link is the pre-save page. */

.presave-chip {
    display: inline-block;
    padding: 0.05rem 0.6rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.music-quick-links a.presave-chip,
.music-quick-links a.presave-chip:hover {
    color: var(--accent);
    text-decoration: none;
}

.music-preview-services a.presave-chip {
    line-height: 1.5;
}

/* Unreleased music: unreleased.js adds .is-unreleased to the card. The
   overlay is hidden by default so no-JS visitors see a normal card. Its
   geometry (and radius) mirror the image's at each breakpoint below. */

.music-preview-image {
    position: relative;
}

.unreleased-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    pointer-events: none;
}

.is-unreleased .unreleased-overlay {
    display: block;
}

/* Narrow screens: see "Card row" in section 9 for the shared row layout. */

@media (max-width: 767px) {
    /* Row layout, artwork and text column come from the shared .card-row component. The
       artwork wrapper is display:contents, so the overlay is positioned against
       the card: same box as the image (120px wide, up to 120px tall,
       flush with the card's top/left edges). */
    .unreleased-overlay {
        inset: 0 auto 0 0;
        width: 120px;
        max-height: 120px;
        border-radius: 12px;
    }

    /* Half the desktop gap between the last text line and the service logos.
       Nothing below the logos may make the card taller than the 120px artwork:
       three text lines (~72px) + 0.3rem + the 20px row come to ~97px, but only 88px
       fit between the card's paddings, so the column's bottom margin is pulled into
       the card's bottom padding (the column's own box, and so the row, stay whole). */
    .music-preview-services {
        margin-top: 0.3rem;
    }

    .music-preview-content:has(.music-preview-services) {
        margin-bottom: -0.55rem;
    }

    .music-preview-services a.presave-chip {
        padding: 0 0.6rem;
        line-height: 18px;
    }
}

/* Tablet horizontal layout */

@media (min-width: 768px) and (max-width: 1023px) {
    .music-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 0.1rem;
        align-items: flex-start;
    }

    .music-preview-image {
        flex-shrink: 0;
        margin-right: 0.75rem;
    }

    .music-preview-image img,
    .music-preview-image .waveform-placeholder {
        display: block;
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .music-preview-image img:hover,
    .music-preview-image .waveform-placeholder:hover {
        opacity: 0.85;
    }

    .unreleased-overlay {
        border-radius: 6px;
    }

    .music-preview-content {
        flex: 1;
        min-width: 0;
    }
}

/* Full width image on wide screens */

@media (min-width: 1024px) {
    .music-preview-image {
        margin: -1.25rem -1.25rem 1rem;
    }

    .music-preview-image img,
    .music-preview-image .waveform-placeholder {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px 12px 0 0;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .music-preview-image img:hover,
    .music-preview-image .waveform-placeholder:hover {
        opacity: 0.85;
    }

    .unreleased-overlay {
        border-radius: 12px 12px 0 0;
    }
}

@media (max-width: 767px) {
    .music-preview-desktop-only {
        display: none;
    }
}

/* Apps preview on homepage */

.app-preview {
    position: relative;
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: 12px;
}

.app-preview h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.app-preview .app-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-preview-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    flex-shrink: 0;
}

/* Blog preview on homepage */

.blog-post-preview {
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.blog-post-preview:last-of-type {
    margin-bottom: 1rem;
}

.blog-post-preview h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.app-preview h3 a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.app-preview .app-type {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.app-preview .app-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

@media (max-width: 767px) {
    .app-preview-desktop-only {
        display: none;
    }
}

/* Default: hide mobile link, show desktop link */

.view-all-link-mobile {
    display: none;
}

.view-all-link-desktop {
    display: inline-block;
}

@media (max-width: 767px) {
    .view-all-link-mobile {
        display: inline-block !important;
    }

    .view-all-link-desktop {
        display: none !important;
    }
}

.stream-footer {
    margin-top: 0;
    text-align: center;
}

.view-all-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   5. BIO, SOCIAL AND CONTACT
   ========================================================================== */

/* Bio stream content */

.bio-stream .bio-summary {
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: 12px;
}

.bio-stream .bio-summary h2 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.bio-stream .bio-summary h2:first-child {
    margin-top: 0;
}

.bio-stream .bio-summary p {
    margin-bottom: 1rem;
}

.stream-content ul,
.stream-content ol,
main ul,
main ol
{
    margin: 0;
    padding-left: 1.5rem;
}

.stream-content li {
    margin-bottom: 0;
}

.bio-stream .bio-summary hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
    opacity: 0.5;
}

/* Social links */

.social {
    margin: 1.5rem 0;
}

.social ul {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.social li {
    margin: 0;
}

.social a {
    font-size: 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.social a:hover {
    color: var(--accent);
}

.social a.bluesky-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    position: relative;
    top: 0.25em;
}

.social a.text-icon {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Contact section on homepage */

.contact {
    margin-top: 2em;
    padding: 1em 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.contact h2 {
    margin-bottom: 1rem;
}

.contact .social ul {
    justify-content: center;
}

.contact .contact-subheading {
    margin-top: 1.5rem;
}

/* ==========================================================================
   6. BLOG AND JOGGER
   ========================================================================== */

/* Post content */

.post-content {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: large;
}

/* Ensure all embedded media within post content are responsive */

.post-content img,
.post-content video,
.post-content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

.post-content img {
    border-radius: 12px;
    margin: 2rem 0;
}

.post-content p {
    text-indent: 0; /* Removed text indentation */
    margin-bottom: 0.45rem; /* Increased by 50% from 0.3rem */
}

.post-content blockquote,
.stream-content blockquote,
.section-intro blockquote,
.post-summary blockquote {
    position: relative;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
}

.post-content blockquote::before,
.stream-content blockquote::before,
.section-intro blockquote::before,
.post-summary blockquote::before {
    content: '“';
    position: absolute;
    top: -0.2em;
    left: 0.1em;
    font-size: 4em;
    color: var(--border-color);
    opacity: 0.6;
    line-height: 1;
}

.post-content blockquote p,
.stream-content blockquote p,
.section-intro blockquote p,
.post-summary blockquote p {
    text-indent: 0;
    margin-bottom: 0;
}

.post-content ul,
.post-content ol {
    margin: 0;
    padding-left: 1.5rem;
}

.post-content li {
    margin-bottom: 0;
}

.post-content li p {
    text-indent: 0;
}

.post-content table,
.stream-content table,
.section-intro table {
    width: 100%;
    border-collapse: separate; /* Allows for border-spacing */
    border-spacing: 0; /* Vertical spacing between rows */
    margin-bottom: 1rem;
}

.post-content th,
.post-content td,
.stream-content th,
.stream-content td,
.section-intro th,
.section-intro td {
    padding: 0 0.25rem; /* Further reduced horizontal padding for column margin */
    text-align: left;
    vertical-align: top;
}

.post-content th,
.stream-content th,
.section-intro th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.post-content tr:nth-child(even),
.stream-content tr:nth-child(even),
.section-intro tr:nth-child(even) {
    background-color: var(--bg-secondary);
}

@media (max-width: 767px) {
    .post-content img {
        width: 100%;
        margin: 1rem 0;
    }

    /* Figure-shortcode images cap height instead of stretching to width on mobile */
    .post-content figure img,
    .stream-content figure img {
        width: auto;
        max-height: 300px;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
}

.post-header {
    margin-bottom: 2rem;
}

.post-illustration {
    width: 100%;
    aspect-ratio: 3 / 1;
    margin: 0 auto 2rem auto;
    overflow: hidden;
    border-radius: 12px;
}

.post-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
}

@media (max-width: 767px) {
    /* Banner image: taller ratio on narrow screens so subjects aren't over-cropped */
    .post-illustration {
        aspect-ratio: 16 / 9;
    }
}

.post-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.page-updated {
    color: var(--text-tertiary);
}

.post-date-link {
    color: inherit;
    text-decoration: none;
}

.post-date-link:hover {
    text-decoration: underline;
}

.posts-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

@media (max-width: 767px) {
    .posts-list {
        gap: 0.25rem;
    }
}

/* Post cards */

.post-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden; /* To contain child elements with border-radius */
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Card styling shared by every whole-card link (Jogger/blog post
   cards, homepage music/app cards, apps list cards): shadow by
   default, bordered highlight on hover. Named for what it does
   (drop a shadow, ring on hover), not for which card first used it —
   .card-shadow is applied directly by music/app preview cards; post
   and genre cards bake the same rule in under their own name. */

.post-card,
.card-shadow,
.genre-card,
.project-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.post-card:hover,
.card-shadow:hover,
.genre-card:hover,
.project-card:hover {
    box-shadow: 0 0 0 2px var(--text-secondary);
}

.post-card-image {
    flex-shrink: 0;
    width: 200px; /* Adjust as needed */
    border-radius: 8px;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-posts-list .post-card-content {
    display: flex;
    flex-direction: column;
}

/* Blog post cards aren't whole-card links (title/image/read-more are
   separately clickable), so don't show the whole-card hover affordance */

.blog-posts-list .post-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.blog-posts-list .read-more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-weight: 500;
    color: var(--accent);
}

.post-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-card-content .post-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.post-card-content .post-description {
    margin-top: auto; /* Push description to bottom to ensure consistent card height */
}

@media (max-width: 767px) {
    .post-card {
        background: none;
        margin-bottom: 0; /* no margins on narrow screens */
        padding: 0;
    }

    .post-card .post-meta {
        margin-bottom: 0;
    }

    /* Narrow screens drop the description. */
    .post-card-content .post-description {
        /* Don't display the description on narrow screens. */
        display: none;
    }

    /* Blog list cards keep the full card look (not whole-card links). */
    .blog-posts-list .post-card-image {
        width: 100%;
        max-height: 200px; /* Adjust as needed */
    }

    .blog-posts-list img {
    }

    .blog-posts-list .post-card {
        flex-direction: column;
        padding: 1.25rem; /* Restore padding for jogger cards */
        background: var(--bg-secondary); /* Restore background for jogger cards */
        border-radius: 12px; /* Restore border-radius for jogger cards */
        margin-bottom: 1rem; /* Restore margin for jogger cards */
        border-bottom: none; /* Remove the generic border */
    }

    .blog-posts-list .post-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* no whole-card hover affordance; card isn't whole-card clickable */
    }

    .blog-posts-list .post-card .post-meta,
    .blog-posts-list .post-card .post-description {
        display: block; /* Restore meta and description for jogger cards */
    }
}

/* ==========================================================================
   7. SHORTCODES
   ========================================================================== */

/* Reminders shortcode */

.reminders-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

@media (max-width: 767px) {
    .reminders-container {
        flex-direction: column;
    }
}

.reminder-card {
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.reminder-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.reminder-body {
    font-size: 1rem;
    color: var(--text-secondary);
}

.reminder-body p {
    text-indent: 0;
    margin-bottom: 0;
}

/* Priority Task shortcode */

.priority-task-container {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reminder-card.priority-task {
    max-width: 300px; /* Or adjust as needed */
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.2);
}

/* Separators that used to be <hr> elements: a border on the item, not a rule element. */

.toc-block {
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.events-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   8. APPS
   ========================================================================== */

.testflight-banner {
    background: #28A745;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.testflight-banner a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    display: block;
}

.testflight-banner a:hover {
    opacity: 0.9;
}

.app-category {
    color: var(--text-secondary);
}

.apps-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .apps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.app-card {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
}

.stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.app-card .app-download-banner,
.app-card .app-download-link {
    position: relative;
    z-index: 2;
}

.app-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.app-card-header h2 {
    margin: 0 0 0.25rem;
}

.app-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    flex-shrink: 0;
}

.app-card .app-description {
    margin: 0 0 1rem;
}

.app-card .app-download-banner {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .app-card {
        padding: 1.25rem;
    }
}

.app-download-banner {
    background: #28A745;
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 1rem;
    text-align: center;
}

.app-download-banner a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.app-download-banner a:hover {
    opacity: 0.9;
}

.app-download-banner .download-text {
    font-size: 1.25rem;
    font-weight: 600;
}

.app-download-banner .download-caption {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.9;
}

/* ==========================================================================
   9. SHARED PAGE FURNITURE
   ========================================================================== */

.section-header {
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .section-header {
        margin-bottom: 0.5rem;
    }
}

.section-intro {
    background: var(--bg-secondary);
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.7;
}

.section-intro p {
    margin: 0 0 1rem 0;
}

.section-intro p:last-child {
    margin-bottom: 0;
}

.section-intro ul,
.section-intro ol {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

.section-intro li {
    margin-bottom: 0.5rem;
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Card row: on narrow screens a card is a row with the artwork flush to its left, top and
   bottom edges (120px square) and the text column beside it. Shared by every artwork card
   (.music-preview, .project-card) so they look the same; markup is
   .card-row > .card-row-art > img  +  .card-row-body. Wider layouts are per card.

   Row height is driven by the text column, not the artwork.
   `.card-row-art` is `display:contents` — it stops existing as a box, so its child <img>
   becomes the actual flex item and sizes using the IMG's own intrinsic ratio (no hardcoded
   aspect-ratio). height:100% + width:auto lets it stretch to match the text column.

   The row's actual height comes from .card-row-body's natural (now-bounded) size, not a
   fixed number: every line inside the body is individually clamped (nowrap+ellipsis), which
   bounds its natural height tightly and predictably. The body does NOT carry a max-height —
   one bigger than what the clamped text needs would pad the body out via align-items:stretch,
   leaving blank card background below the real last line. The img's max-height:120px exists
   for a different reason: source covers are huge (2000px+), so without a cap the image would
   dominate the flex algorithm's pre-stretch size measurement and inflate the row to its
   native resolution regardless of how short the text is. */

@media (max-width: 767px) {
    .card-row {
        display: flex;
        align-items: stretch;
        gap: 1rem;
        overflow: hidden;
        padding: 1rem;
    }

    .card-row-art {
        display: contents;
    }

    .card-row-art img,
    .card-row-art .waveform-placeholder {
        flex-shrink: 0;
        width: 120px;
        height: 100%;
        max-height: 120px;
        aspect-ratio: 1;
        object-fit: cover;
        display: block;
        margin: -1rem 0 -1rem -1rem;
        /* All four corners: the image is flush with the card's top-left (the card's
           overflow clip matches), but when the text column is taller than the
           image (e.g. the service-logo row) its bottom-left corner is exposed. */
        border-radius: 12px;
    }

    .card-row-body {
        min-width: 0;
        overflow: hidden;
    }

    /* Title and secondary lines: one line each, same size and spacing in every card. */
    .card-row .card-row-title,
    .card-row .card-row-meta {
        display: block;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-row .card-row-title {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .card-row .card-row-meta {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* ==========================================================================
   10. MUSIC
   ========================================================================== */

/* Music page */

.music-page,
.music-project-page {
    padding: 2rem 0;
}

@media (max-width: 767px) {
    .music-page,
    .music-project-page {
        padding: 0;
    }
}

/* Shared by /music/, /music/projects/<name>/, and /genres/<term>/ —
   whichever of .music-preview or .music-card the page uses. Spacing
   is gap, not each card's own margin-bottom, so it's correct at any
   list length and any width without a per-breakpoint reset. */

.music-productions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Two-column grid on wide screens */

@media (min-width: 1024px) {
    .music-productions {
        max-width: 1200px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.music-card {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 12px;
    break-inside: avoid;
}

.music-card-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.music-image {
    flex-shrink: 0;
}

.music-image img {
    width: auto;
    height: 6em;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.music-header {
    min-width: 0;
}

.music-header h2 {
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.music-meta {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.music-meta > span {
    display: inline;
}

.music-meta .artist {
    font-weight: 500;
}

.music-genre,
.music-genre a {
    color: var(--text-tertiary);
    text-decoration: none;
}

@media (max-width: 767px) {
    .music-card {
        padding: 1.25rem 1rem;
    }
}

.music-description {
    margin: 1rem 0;
}

/* Release page: dedicated layout, description/links/tracks reuse music-content styles */

.music-release {
    margin-bottom: 2rem;
}

.music-release-grid {
    display: grid;
    grid-template-areas:
        "header"
        "cover"
        "body";
    gap: 1.5rem;
}

.music-release-header {
    grid-area: header;
}

.music-quick-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 0.3rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.music-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.music-quick-links .play-icon {
    font-size: 0.7em;
}

.music-quick-links .service-icon {
    width: 1.1em;
    height: 1.1em;
}

.music-quick-links a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.music-quick-links .share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font: inherit;
    font-size: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.music-quick-links .share-button:hover,
.music-quick-links .share-button.copied {
    color: var(--accent);
}

.music-release-header h1 {
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.presave-button {
    display: inline-block;
    margin: 0.25rem 0 0.5rem;
    padding: 0.7rem 1.75rem;
    background: var(--accent);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
}

.presave-button:hover {
    filter: brightness(1.1);
}

.presave-button[hidden] {
    display: none;
}

.music-release-cover {
    grid-area: cover;
}

.music-release-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.music-release-body {
    grid-area: body;
}

.music-release .music-playback {
    margin-top: 1.5rem;
}

.music-release .music-playback .music-links:first-child {
    margin-top: 0;
}

.music-playback-heading {
    display: none;
}

@media (min-width: 1024px) {
    .music-release .music-playback-heading {
        display: block;
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .music-release-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header cover"
            "body cover";
        align-items: start;
        gap: 2rem;
    }

    .music-release-cover img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 90vh;
        margin-left: auto;
        margin-right: 0;
    }
}

.music-credits {
    margin: 1rem 0;
    font-size: 0.95rem;
}

.music-credits ul {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.music-credits li {
    margin: 0.25rem 0;
    color: var(--text-secondary);
}

.music-links {
    margin-top: 1.5rem;
}

.embed {
    margin: 1rem 0;
}

.embed iframe {
    max-width: 100%;
    border-radius: 8px;
}

.youtube-embed {
    max-width: 560px;
}

.instagram-link a,
.streaming-link a,
.listen-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.instagram-link a:hover,
.streaming-link a:hover,
.listen-links a:hover {
    opacity: 0.9;
}

.listen-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.music-footer {
    max-width: 800px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ================================================
   Projects feature
   ================================================ */

/* Current-projects summary line on /music/ */

.music-projects-summary {
    margin-bottom: 2.5rem;
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .music-projects-summary {
        margin-bottom: 1rem;
    }
}

.music-projects-summary a {
    color: var(--text-primary);
}

.music-releases-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.music-releases-years {
    list-style: none;
    margin: 0;
    padding: 0;
}

.music-releases-year {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.music-releases-year:last-child {
    border-bottom: none;
}

@media (max-width: 767px) {
    .music-releases-year {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

.music-releases-year-label {
    flex-shrink: 0;
    width: 3.5rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.music-releases-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.release-chip {
    display: inline-flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 0.6rem 0 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 2rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.release-chip.no-thumb {
    padding-left: 0.6rem;
}

.release-chip-thumb {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.release-chip:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Small uppercase heading that introduces a group on a page: Active / Past on the
   projects list, Performances / Releases on a project page. */

.section-label {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 2rem 0 1rem;
}

.section-label:first-of-type {
    margin-top: 0;
}

/* Project cards grid on /music/projects/ */

.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Project card: title, years and counts. On narrow screens the shared .card-row layout
   (section 9) puts the artwork flush left like the /music/ cards; wider screens show a
   small thumbnail beside the title. */

.project-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
}

.project-card:hover {
    text-decoration: none;
}

@media (min-width: 768px) {
    .project-card {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.5rem;
    }
}

.project-card .card-row-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 767px) {
    .project-card .card-row-body {
        gap: 0;
    }
}

.project-card-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.project-card-titles {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.project-card-titles h2 {
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.3;
}

.project-years {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .project-card-titles {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

.project-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Same gap under the text as the music cards' logo row. */
@media (max-width: 767px) {
    .project-stats {
        margin-top: 0.3rem;
    }
}

.project-stats span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* "More from this project" link on music cards and previews */

.music-project-link {
    margin-top: 2rem;
}

.music-project-link a {
    font-size: 0.875rem;
    color: var(--accent);
    text-decoration: none;
}

.music-project-link a:hover {
    text-decoration: underline;
}

/* Individual project page */

.music-project-page .section-header dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.music-project-page .section-header dt {
    color: var(--text-secondary);
    font-weight: 500;
}

.music-project-page .section-header dd {
    margin: 0;
}

.music-project-page section {
    margin-top: 2.5rem;
}

.music-project-page section ul {
    list-style: none;
    padding: 0;
}

.music-project-page section ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.music-project-page section ul li:last-child {
    border-bottom: none;
}

/* ============================================================
   Simple performances table (/music/performances/)
   ============================================================ */

.performances-simple-table {
    width: 100%;
    border-collapse: collapse;
}

.performances-simple-table td {
    padding: 0.3em 0.8em 0.3em 0;
    vertical-align: top;
    border-bottom: 1px solid var(--muted-border-color, #e0e0e0);
    font-size: 0.95rem;
}

.performances-simple-table td.perf-date {
    white-space: nowrap;
    color: var(--secondary);
    width: 10em;
}

.performances-simple-table td.perf-name {
    font-weight: 500;
}

.performances-simple-table td.perf-venue {
    color: var(--secondary);
}

/* ============================================================
   Music Credits (/music/credits/)
   ============================================================ */

.credits-toc {
    margin-bottom: 1.5rem;
}

.credits-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.credits-toc li {
    font-size: 0.9rem;
}

.credits-divider,
.credits-person {
    border-style: solid;
    border-width: 0;
    border-color: var(--text-tertiary);
}

.credits-divider {
    border-top-width: 1px;
    margin: 0 0 1.5rem;
}

.credits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.credits-person {
    padding-bottom: 0.5rem;
    border-bottom-width: 1px;
    scroll-margin-top: 1rem;
    break-inside: avoid;
}

.credits-person:last-child {
    border-bottom: none;
}

.credits-person h2 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.credits-person-primary h2 {
    font-size: 1.3rem;
}

.credits-role {
    margin-left: 1rem;
}

@media (min-width: 1024px) {
    .credits-roles {
        column-width: 16rem;
        column-gap: 2.5rem;
    }

    .credits-role {
        break-inside: avoid;
    }
}

.credits-role-single {
    font-size: 0.9rem;
    color: var(--secondary);
    margin-top: 0.15em;
    margin-bottom: 0.15em;
}

.credits-role summary {
    cursor: default;
    font-size: 0.9rem;
    color: var(--secondary);
    margin: 0.15em 0;
    list-style: none;
}

.credits-role summary::-webkit-details-marker {
    display: none;
}

.credits-toggle-link {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.credits-toggle-link:hover {
    text-decoration: none;
}

.credits-release-list {
    margin: 0.2rem 0 0.4rem;
    padding-left: 1.5rem;
    font-size: 0.9rem;
}

/* ============================================================
   Music Activity Report (/music/report/)
   ============================================================ */

.music-report {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.6;
}

.report-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid currentColor;
}

.report-header h1 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.report-meta {
    border-collapse: collapse;
    margin-bottom: 1.2rem;
}

.report-meta td {
    padding: 0.15em 1.5em 0.15em 0;
    vertical-align: top;
    font-size: 0.95rem;
}

.report-meta td:first-child {
    color: var(--secondary);
    white-space: nowrap;
}

.report-intro {
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.report-print-link {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.report-section {
    margin-bottom: 3rem;
}

.report-section h2 {
    font-size: 1.2rem;
    border-bottom: 1px solid var(--secondary);
    padding-bottom: 0.3rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.report-count {
    font-size: 0.9rem;
    color: var(--secondary);
    margin-bottom: 1rem;
}

/* Summary tables */

.report-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.report-summary-table th {
    text-align: left;
    padding: 0.4em 0.5em;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report-summary-table td {
    padding: 0.35em 0.5em;
    border-bottom: 1px solid var(--muted-border-color, #ddd);
}

.report-summary-table td:nth-child(3),
.report-summary-table td:nth-child(4),
.report-summary-table th:nth-child(3),
.report-summary-table th:nth-child(4) {
    text-align: right;
}

/* Projects table */

.report-projects-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.report-projects-table th {
    text-align: left;
    padding: 0.4em 0.5em;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.report-projects-table td {
    padding: 0.5em 0.5em;
    vertical-align: top;
    border-bottom: 1px solid var(--muted-border-color, #ddd);
}

.report-details-cell {
    padding: 0 !important;
}

.report-detail-section {
    display: block;
    padding: 0.4em 0.5em;
    border-bottom: 1px solid var(--muted-border-color, #eee);
    font-size: 0.88rem;
}

.report-detail-section:last-child {
    border-bottom: none;
}

.report-detail-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary);
    margin-bottom: 0.2em;
}

.report-detail-value {
    display: block;
}

.report-releases-list {
    margin: 0;
    padding-left: 1.2em;
}

.report-releases-list li {
    word-break: break-all;
}

/* Performances list */

.report-perf-list {
    list-style: decimal;
    padding-left: 2.2em;
    margin: 0;
}

.report-perf-item {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--muted-border-color, #eee);
}

.report-perf-item:last-child {
    border-bottom: none;
}

.report-perf-header {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.report-perf-date {
    font-weight: bold;
    font-family: var(--font-sans);
}

.report-perf-name {
    font-weight: 600;
}

.report-perf-venue {
    color: var(--secondary);
}

.report-perf-details {
    font-size: 0.85rem;
    color: var(--secondary);
    font-family: var(--font-sans);
}

.report-perf-details span::after {
    content: " · ";
}

.report-perf-details span:last-child::after {
    content: "";
}

/* Per-streaming-service song lists (/music/spotify, /music/apple) */

.streaming-list {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
}

.streaming-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.streaming-item-art {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
}

.streaming-item-art > img,
.streaming-item-art .waveform-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Service logo (or the generic external-link icon) in the artwork's top right corner. */

.streaming-item-art-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.streaming-item-art-icon img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.streaming-item-art-icon-generic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

.streaming-item-title {
    font-size: 1.1rem;
    margin: 0;
}

.streaming-item-title small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.streaming-item-link {
    color: var(--accent);
    text-decoration: none;
}

.streaming-item-link:hover {
    text-decoration: underline;
}

.streaming-item-link .external-icon {
    margin-left: 0.3em;
    vertical-align: -0.05em;
}

/* ==========================================================================
   11. GENRES
   ========================================================================== */

.genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.genre-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    aspect-ratio: 1 / 1;
    padding: 1rem 1.25rem 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
}

.genre-card:hover {
    text-decoration: none;
}

.genre-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.genre-card-name {
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1;
}

.genre-card-count {
    color: var(--text-secondary);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.genre-card-examples {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.genre-card-examples li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.genre-card-examples img,
.genre-card-examples .waveform-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.genre-card-examples span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .genres-grid {
        grid-auto-rows: auto;
    }

    .genre-card {
        aspect-ratio: auto;
    }
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */

/* Print styles */

@media print {
    nav, .site-header, .site-footer, .report-print-link, .no-print {
        display: none !important;
    }

    .music-report {
        max-width: 100%;
        padding: 0;
        font-size: 10pt;
        line-height: 1.5;
        color: #000;
    }

    .report-header h1 { font-size: 16pt; }
    .report-section h2 { font-size: 12pt; }

    .report-perf-item {
        break-inside: avoid;
    }

    .report-section {
        break-before: auto;
    }

    a { color: #000; text-decoration: none; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}