/* Lost Shards — the layout and type of sethstenzel.me (static/css/styles.css
   there), set in a dark palette for reading the story at night. */

:root {
    color-scheme: dark;

    --page: #0a0f15;            /* behind the card */
    --surface: #111922;         /* the card */
    --surface-raised: #16202b;  /* player, prev/next boxes, blockquotes */
    --surface-hover: #1b2836;
    --border: #243241;
    --track: #2b3a4a;           /* unplayed part of the seek bar */

    --text-strong: #e9eef3;     /* titles, nav */
    --text: #d3dbe3;            /* story prose */
    --text-soft: #a9b5c1;
    --muted: #8391a0;
    --heading: #dce7f2;

    /* The site blue (#1d6096) for fills, lifted for text and lines on dark. */
    --accent: #1d6096;
    --accent-hover: #2873b3;
    --accent-line: #3b7fbf;
    --accent-text: #79b0e6;
    --accent-soft: #5898d4;
    --on-accent: #ffffff;

    --card-shadow: rgba(0, 0, 0, 0.55);
    --button-shadow: rgba(0, 0, 0, 0.45);
}

*, *::before, *::after {box-sizing: border-box;}

html {scroll-behavior: smooth; background-color: var(--page);}

::selection {background-color: var(--accent); color: var(--on-accent);}

body {
    margin: 0;
    background-color: var(--page);
    color: var(--text-strong);
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
}

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

/* --- Card shell ----------------------------------------------------------- */

.main-content-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: solid;
    border-color: var(--border);
    border-width: 0 0 1px 0;
    border-radius: 4px;
    width: 90%;
    max-width: 1150px;
    margin: 20px auto;
    background-color: var(--surface);
    box-shadow: 4px 24px 60px var(--card-shadow);
    overflow: hidden;
}

.card-inner-row {
    width: calc(100% - 2rem);
    max-width: 1060px;
    margin: 2rem 1rem;
}

.sectioning-hr {
    border: none;
    background-color: var(--border);
    height: 1px;
    width: 100%;
    margin: 0;
}

.card-inner-row-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 5rem;
    padding: 1rem;
    color: var(--on-accent);
    background-color: var(--accent);
    text-align: center;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

.site-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.5;
    color: var(--text-strong);
    text-decoration: none;
}

.nav-bar-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.nav-bar-links a {color: var(--text-strong); text-decoration: none;}
.nav-bar-links a:hover {text-decoration: underline;}

.active-page-link {
    color: var(--accent-text) !important;
    border-bottom: 2px solid var(--accent-line);
    margin-bottom: -2px;
}

/* --- Two-column layout: story left, chapters right ------------------------ */

.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 3rem;
    min-height: 440px;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.story-main {min-width: 0;}

.chapter-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
}

.sidebar-heading,
.blog-nav-heading {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent-text);
    margin-bottom: 0.6rem;
}

.chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chapter-list li {margin: 0 0 0.25rem 0;}

.chapter-list a {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.75rem;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
    text-decoration: none;
    color: var(--text-strong);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.chapter-list a:hover {
    background-color: var(--surface-hover);
    border-left-color: var(--accent-soft);
}

.chapter-list li.current a {
    background-color: var(--surface-hover);
    border-left-color: var(--accent-line);
}

.chapter-list-number {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

.chapter-list-title {
    font-weight: 500;
    color: var(--accent-text);
}

/* --- Index page ----------------------------------------------------------- */

.blog-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.blog-page-title {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--accent-text);
    margin: 0;
}

.blog-page-subtitle {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.6;
    margin: -0.35rem 0 0 0;
}

.start-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-soft);
}

.start-button {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    border-radius: 4px;
    background-color: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    box-shadow: 0 1px 5px var(--button-shadow);
    transition: background-color 0.12s ease;
}

.start-button:hover {background-color: var(--accent-hover);}

.index-section-heading {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--heading);
    margin: 0.5rem 0 0 0;
    scroll-margin-top: 1rem;
}

.index-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.index-chapter-list li {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
}

.index-chapter-list li:last-child {border-bottom: none;}

a.blog-card-title {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-strong);
    text-decoration: none;
}

a.blog-card-title:hover {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-card-date,
.blog-post-date {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.chapter-kicker {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent-text);
}

.blog-empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
}

.blog-empty-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--accent-text);
}

/* --- Chapter page --------------------------------------------------------- */

.blog-post {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 760px;
}

.blog-post-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.blog-post-title {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-strong);
    margin: 0;
}

/* --- Narration player ----------------------------------------------------- */

.narration {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-line);
    border-radius: 6px;
    background-color: var(--surface-raised);
}

.narration-play {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    box-shadow: 0 1px 5px var(--button-shadow);
    transition: background-color 0.12s ease;
}

.narration-play:hover {background-color: var(--accent-hover);}
.narration-play:focus-visible,
.narration-speed:focus-visible {outline: 2px solid var(--accent-soft); outline-offset: 2px;}

.narration-play svg {width: 22px; height: 22px; fill: currentColor;}
.narration .icon-pause {display: none;}
.narration.playing .icon-play {display: none;}
.narration.playing .icon-pause {display: block;}

.narration-body {
    flex: 1 1 auto;
    min-width: 0;
}

.narration-label {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent-text);
    line-height: 1.4;
}

.narration-track {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.narration-time {
    flex: 0 0 auto;
    min-width: 2.6rem;
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.narration-time[data-duration] {text-align: right;}

.narration-seek {
    --progress: 0%;
    flex: 1 1 auto;
    min-width: 0;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent) var(--progress), var(--track) var(--progress));
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.narration-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--accent-line);
}

.narration-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
}

.narration-speed {
    flex: 0 0 auto;
    min-width: 3.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--surface);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.narration-speed:hover {border-color: var(--accent-line);}

.blog-prose {
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.blog-prose > *:first-child {margin-top: 0;}
.blog-prose p {margin: 0 0 1.15rem 0;}

.blog-prose h1,
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
    font-weight: 500;
    line-height: 1.3;
    color: var(--heading);
    margin: 2.2rem 0 0.85rem 0;
}

.blog-prose h1 {font-size: 2.1rem;}
.blog-prose h2 {font-size: 1.75rem;}
.blog-prose h3 {font-size: 1.42rem;}
.blog-prose h4 {font-size: 1.2rem;}

.blog-prose a {
    color: var(--accent-text);
    text-underline-offset: 2px;
}

.blog-prose blockquote {
    margin: 1.4rem 0;
    padding: 0.35rem 0 0.35rem 1.15rem;
    border-left: 3px solid var(--accent-line);
    background-color: var(--surface-raised);
    color: var(--text-soft);
    font-style: italic;
}

.blog-prose blockquote p:last-child {margin-bottom: 0;}

/* Scene breaks: a markdown "---" or "***" line becomes a centered ornament. */
.blog-prose hr {
    border: none;
    margin: 2.2rem 0;
    text-align: center;
    height: auto;
}

.blog-prose hr::after {
    content: "\25C6   \25C6   \25C6";
    var(--surface)-space: pre;
    color: var(--accent-soft);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

.blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 1.4rem auto;
}

.blog-prose strong {font-weight: 700;}
.blog-prose em {font-style: italic;}

/* --- Previous / next ------------------------------------------------------ */

.blog-nav {
    margin-top: 0.5rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--accent-line);
}

.blog-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.blog-nav-slot {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 240px;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface-raised);
    text-decoration: none;
    color: var(--text-strong);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

a.blog-nav-slot:hover {
    border-color: var(--accent-line);
    background-color: var(--surface-hover);
}

.blog-nav-slot-right {
    text-align: right;
    align-items: flex-end;
}

.blog-nav-slot-empty {
    opacity: 0.45;
    background-color: var(--surface-raised);
}

.blog-nav-caption {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

.blog-nav-title {
    font-weight: 500;
    line-height: 1.4;
    color: var(--accent-text);
}

.blog-nav-slot-empty .blog-nav-title {color: var(--muted);}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 900px) {
    /* The chapter list drops below the story instead of squeezing it. */
    .story-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .chapter-sidebar {
        position: static;
        padding: 1.25rem 0 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 700px) {
    .main-content-card {
        width: auto;
        margin: 12px;
    }

    .card-inner-row {
        width: calc(100% - 2rem);
        margin: 1.5rem 1rem;
    }

    .site-header {grid-template-columns: minmax(0, 1fr);}
    .site-title {font-size: 2.25rem;}
    .nav-bar-links {justify-content: flex-start; padding: 0.5rem 0 0 0;}

    .blog-page-title {font-size: 1.8rem;}
    .blog-post-title {font-size: 1.75rem;}
    .blog-prose {font-size: 1.05rem;}

    .blog-nav-slot-right {
        text-align: left;
        align-items: flex-start;
    }
}