:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    --ink: #182734;
    --muted: #5c6b77;
    --paper: #fbfaf6;
    --surface: #ffffff;
    --accent: #c95d3b;
    --line: #dce2e5;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { color: var(--ink); line-height: 1.65; margin: 0; }
a { color: #1b608f; }

h1, h2, h3 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.15;
    margin-top: 0;
}

h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.045em; }
h2 { font-size: 2rem; }

.hero {
    border-bottom: 1px solid var(--line);
    margin-bottom: 3rem;
    max-width: 54rem;
    padding-bottom: 3rem;
}

.hero h1 { margin-bottom: 1rem; }
.hero-copy { color: var(--muted); font-size: 1.2rem; max-width: 44rem; }
.library-hero { margin-bottom: 1.5rem; padding-bottom: 1.75rem; }
.library-hero .eyebrow { margin: 0 0 .45rem; }
.library-hero h1 { font-size: clamp(2.65rem, 5vw, 3.6rem); margin-bottom: .6rem; }
.library-hero .hero-copy { font-size: 1.05rem; margin: 0; }

.eyebrow, .chapter-number {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.story-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
}

.story-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .6rem;
    box-shadow: 0 8px 30px rgba(22, 50, 79, .06);
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    overflow: hidden;
}

.story-card-content { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; }
.story-card h3 { font-size: 1.65rem; margin: .75rem 0; }
.story-card h3 a { color: var(--ink); text-decoration: none; }
.story-card h3 a:hover { color: #1b608f; }
.story-card p { color: var(--muted); }
.story-excerpt { margin: 0 0 1.35rem; }

.story-cover {
    align-items: center;
    background: #e9eef0;
    color: #294a64;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 15rem;
    overflow: hidden;
    padding: 1rem .85rem;
    text-decoration: none;
}
.story-cover img { height: 100%; object-fit: cover; width: 100%; }
.story-cover:has(img) { padding: 0; }
.cover-genre { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.cover-letter { font-family: Georgia, "Times New Roman", serif; font-size: 4rem; line-height: 1; }

.story-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    gap: .75rem;
}

.genre {
    background: #f4e6dc;
    border-radius: 999px;
    color: #7e3d28;
    font-weight: 750;
    padding: .15rem .6rem;
}

.new-story {
    border-left: 1px solid #c8d2d8;
    color: #36566d;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding-left: .7rem;
    text-transform: uppercase;
}

.read-link, .back-link { font-weight: 700; text-decoration: none; }
.library-progress { font-size: .84rem; font-weight: 700; margin-bottom: .35rem; }
.completed-story { color: #36566d !important; }
.story-card-footer { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-top: auto; }
.story-card-footer > .read-link { flex: none; font-size: .9rem; }
.progress-summary { flex: 1; min-width: 7rem; }
.progress-summary .library-progress { margin: 0 0 .45rem; }
.library-progress-track { background: #e4eaed; height: 3px; overflow: hidden; width: 100%; }
.library-progress-track span { background: #36566d; display: block; height: 100%; }

.library-heading-row { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.library-heading-copy { min-width: 0; }
.library-title-line { align-items: baseline; display: flex; gap: .8rem; }
.library-heading-row h2 { margin-bottom: .25rem; }
.library-heading-row .eyebrow, .section-heading-compact .eyebrow { margin-bottom: .35rem; }
.result-count { color: var(--muted); font-size: .78rem; margin: 0; white-space: nowrap; }
.story-idea-cta {
    background: rgba(244, 230, 220, .42);
    border-left: 2px solid rgba(201, 93, 59, .72);
    color: var(--muted);
    flex: 0 1 21rem;
    max-width: 21rem;
    padding: .7rem .9rem;
}
.story-idea-cta .eyebrow { font-size: .68rem; margin: 0 0 .1rem; }
.story-idea-cta > p:not(.eyebrow) { font-size: .78rem; line-height: 1.45; margin: 0; }
.story-idea-cta .read-link { display: inline-flex; font-size: .84rem; margin-top: .2rem; }
.library-controls {
    align-items: end;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(13rem, 1fr) minmax(9rem, auto) minmax(7rem, auto) auto auto;
    margin-bottom: 1.75rem;
    padding: .7rem 0 1.25rem;
}
.search-field, .filter-field { display: grid; gap: .32rem; min-width: 0; }
.search-field label, .filter-field span { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .04em; }
.search-field input, .filter-field select {
    background: rgba(255, 255, 255, .72);
    border: 1px solid #bbc8cf;
    border-radius: .3rem;
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    min-height: 2.65rem;
    padding: .5rem .7rem;
    width: 100%;
}
.search-field input:focus, .filter-field select:focus { outline: 2px solid #1b608f; outline-offset: 2px; }
.library-submit {
    background: #16324f;
    border: 1px solid #16324f;
    border-radius: .3rem;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    min-height: 2.65rem;
    padding: .5rem .85rem;
}
.library-submit:hover { background: #234867; }
.library-submit:focus-visible, .clear-filters:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clear-filters { align-self: center; font-size: .78rem; white-space: nowrap; }
.library-loading { color: var(--muted); padding: 2rem 0; }
.library-empty { border: 1px solid var(--line); color: var(--muted); padding: 3.5rem 1.5rem; text-align: center; }
.library-empty h3 { color: var(--ink); font-size: 1.65rem; margin-bottom: .6rem; }
.library-empty p { margin: 0 auto .8rem; }

.continue-reading { border-bottom: 1px solid var(--line); margin-bottom: 2rem; padding: .25rem 0 2rem; }
.section-heading-compact h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.continue-list { display: grid; gap: .45rem; }
.continue-item { align-items: center; background: rgba(255, 255, 255, .62); display: flex; gap: 1rem; justify-content: space-between; padding: .75rem .9rem; }
.continue-item h3 { font-size: 1.08rem; margin: 0 0 .15rem; }
.continue-item p { color: var(--muted); font-size: .76rem; margin: 0; }
.continue-item a { flex: none; font-size: .82rem; font-weight: 750; text-decoration: none; }
.reader { max-width: 44rem; min-width: 0; width: 100%; }
.back-link { display: inline-block; margin-bottom: 2rem; }

.chapter-reader-layout {
    align-items: start;
    display: grid;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 44rem);
}

.story-header {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr auto;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.story-header h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin: .45rem 0 0; }
.story-title { color: var(--muted); font-size: .88rem; font-weight: 700; margin: 0 0 1.6rem; }
.story-attribution { color: var(--muted); font-size: .8rem; margin: -1.25rem 0 .75rem; }
.story-attribution a { font-weight: 700; }
.story-engagement {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    gap: .45rem .8rem;
    margin: -.35rem 0 .85rem;
}
.story-like-button {
    align-items: center;
    background: transparent;
    border: 1px solid #b8c5cd;
    border-radius: 999px;
    color: #36566d;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: .3rem;
    justify-content: center;
    min-height: 2.75rem;
    padding: .35rem .7rem;
    text-decoration: none;
}
.story-like-button:hover { background: rgba(54, 86, 109, .07); }
.story-like-button.liked { background: rgba(54, 86, 109, .1); border-color: #36566d; }
.story-like-button:focus-visible { outline: 2px solid #1b608f; outline-offset: 2px; }
.story-like-button:disabled { cursor: wait; opacity: .65; }
.chapter-story-header .chapter-number { color: var(--accent); font-size: .76rem; margin-bottom: 0; }

.reader-hint {
    border-left: 2px solid #c9d9e8;
    color: var(--muted);
    font-size: .9rem;
    margin: -1rem 0 3.5rem;
    padding: .35rem 0 .35rem 1rem;
}

.chapter-illustration {
    margin: -1rem 0 2.5rem;
}
.chapter-illustration img {
    background: #eeeae0;
    border-radius: .2rem;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.level-picker {
    align-self: start;
    border-left: 1px solid var(--line);
    display: grid;
    font-size: .8rem;
    font-weight: 750;
    gap: .4rem;
    min-width: 15rem;
    padding: .25rem 0 .25rem 1rem;
}

.level-picker select {
    background: rgba(255, 255, 255, .62);
    border: 1px solid #bbc8cf;
    border-radius: .3rem;
    color: var(--ink);
    font: inherit;
    font-size: .86rem;
    max-width: 100%;
    min-height: 2.35rem;
    min-width: 0;
    padding: .4rem .55rem;
    width: 100%;
}
.level-picker select:focus-visible { outline: 2px solid #1b608f; outline-offset: 2px; }
.level-picker small { color: var(--muted); font-size: .7rem; font-weight: 500; }

.chapter { margin-bottom: 3rem; }

.chapter-actions {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding-top: 1.5rem;
}

.previous-chapter { font-size: .88rem; font-weight: 700; text-decoration: none; }
.continue-chapter {
    background: #16324f;
    border: 1px solid #16324f;
    border-radius: .35rem;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    font-weight: 750;
    min-height: 2.75rem;
    padding: .55rem 1rem;
}
.continue-chapter:hover { background: #234867; }
.continue-chapter:disabled { cursor: wait; opacity: .72; }
.continue-chapter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.story-completed { color: #36566d; font-size: .9rem; font-weight: 750; margin: 0; }
.completion-state { align-items: end; display: grid; gap: .15rem; justify-items: end; }
.completion-state a { font-size: .8rem; }
.reader-notice {
    align-items: center;
    background: rgba(250, 235, 229, .55);
    border-left: 2px solid var(--accent);
    color: #743426;
    display: flex;
    font-size: .84rem;
    gap: .75rem;
    justify-content: space-between;
    margin: 0 0 2rem;
    padding: .6rem .75rem;
}
.reader-notice p { margin: 0; }
.reader-notice button {
    background: transparent;
    border: 0;
    color: #1b608f;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
    padding: .4rem;
    text-decoration: underline;
}
.reader-notice button:focus-visible { outline: 2px solid #1b608f; outline-offset: 1px; }
.reader-loading { color: var(--muted); margin: 2rem 0; max-width: 44rem; min-height: 22rem; }
.reader-loading.compact { min-height: 10rem; }
.reader-loading p { font-size: .88rem; margin-bottom: 1.75rem; }
.reader-loading-line { background: #e9eceb; height: .8rem; margin-bottom: 1rem; max-width: 86%; }
.reader-loading-line.wide { max-width: 100%; }
.reader-loading-line.short { max-width: 58%; }
.reader-state { margin: 0 auto; max-width: 44rem; }
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.form-page, .internal-page { margin: 0 auto; max-width: 52rem; }
.form-page h1, .internal-page > h1, .review-page > h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.story-idea-form { display: grid; gap: 1.25rem; margin-top: 2.5rem; max-width: 42rem; }
.story-idea-form label { display: grid; font-size: .88rem; font-weight: 750; gap: .4rem; }
.story-idea-form small { color: var(--muted); font-weight: 500; }
.story-idea-form input, .story-idea-form textarea {
    background: var(--surface);
    border: 1px solid #bbc8cf;
    border-radius: .35rem;
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    padding: .7rem .8rem;
    width: 100%;
}
.story-idea-form textarea { line-height: 1.55; resize: vertical; }
.story-idea-form input:focus, .story-idea-form textarea:focus { outline: 2px solid #1b608f; outline-offset: 2px; }
.submitting-as { color: var(--muted); font-size: .84rem; margin: 0; }
.story-idea-form .notification-opt-in {
    align-items: center;
    display: flex;
    font-weight: 650;
    gap: .65rem;
}
.story-idea-form .notification-opt-in input {
    accent-color: #36566d;
    height: 1.1rem;
    width: 1.1rem;
}
.notification-email-field {
    border-left: 2px solid #c9d9e8;
    display: grid;
    gap: .55rem;
    padding-left: 1rem;
}
.notification-email-field > p { color: var(--ink); font-size: .9rem; font-weight: 700; margin: 0; }
.notification-email-field > small { color: var(--muted); }
.contribution-success-link { display: block; margin-top: .6rem; }
.validation-message, .validation-errors, .form-error { color: #9a321f; }
.form-error { background: #faebe5; border-left: 3px solid #c95d3b; padding: .7rem .9rem; }
.form-success { background: rgba(226, 239, 230, .7); border-left: 3px solid #49765b; color: #294f38; padding: .7rem .9rem; }
.account-name-form { margin-top: 2rem; }
.account-name-form button { justify-self: start; }
.account-secondary-link { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }
.contribution-page > .read-link { display: inline-block; margin-top: .75rem; }
.contribution-list { display: grid; gap: 0; margin-top: 2.25rem; }
.contribution-item { border-top: 1px solid var(--line); padding: 1.25rem 0 1.5rem; }
.contribution-item header { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.contribution-item h2 { font-size: 1.5rem; margin: .2rem 0 .55rem; }
.contribution-item header time { color: var(--muted); flex: none; font-size: .75rem; }
.contribution-item > p:not(.idea-status) { color: var(--muted); margin: 0 0 .7rem; }
.contribution-genre { font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.contribution-empty { border-top: 1px solid var(--line); color: var(--muted); margin-top: 2rem; padding-top: 1.25rem; }
.contributor-page { margin: 0 auto; max-width: 52rem; }
.contributor-page > h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.contributor-stories-heading { margin-top: 3rem; }
.published-contribution-list { border-top: 1px solid var(--line); }
.published-contribution-list article {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.25rem 0;
}
.published-contribution-list h3 { font-size: 1.35rem; margin: 0 0 .2rem; }
.published-contribution-list h3 a { color: var(--ink); text-decoration: none; }
.published-contribution-list p { color: var(--muted); font-size: .8rem; margin: 0; }
.published-contribution-list > article > .read-link { flex: none; }
.internal-warning { border-left: 2px solid var(--accent); color: var(--muted); padding-left: .8rem; }
.idea-list { display: grid; gap: 1rem; margin-top: 2rem; }
.idea-item { border-bottom: 1px solid var(--line); padding: 1.25rem 0 1.75rem; }
.idea-item header { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.idea-item h2 { font-size: 1.5rem; margin: .2rem 0 .6rem; }
.idea-item time { color: var(--muted); font-size: .75rem; }
.idea-status { color: #36566d; font-size: .72rem; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.idea-metadata, .variant-review { display: grid; gap: .5rem; }
.idea-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idea-metadata div { display: flex; font-size: .8rem; gap: .4rem; }
.idea-metadata dt { color: var(--muted); font-weight: 750; }
.idea-metadata dd { margin: 0; }
.internal-actions { align-items: center; display: flex; gap: .65rem; margin-top: 1rem; }
.internal-actions button {
    background: #16324f;
    border: 1px solid #16324f;
    border-radius: .3rem;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    min-height: 2.5rem;
    padding: .45rem .85rem;
}
.internal-actions button.quiet-action { background: transparent; color: #36566d; }
.internal-actions button:disabled { cursor: wait; opacity: .6; }
.internal-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-actions { border-bottom: 1px solid var(--line); margin: 2rem 0 3rem; padding-bottom: 1.5rem; }
.illustration-review { border-bottom: 1px solid var(--line); margin-bottom: 3rem; padding-bottom: 2.5rem; }
.illustration-review-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.illustration-review-heading .eyebrow { margin: 0 0 .25rem; }
.illustration-review-heading h2 { margin: 0; }
.review-cover-image {
    background: #eeeae0;
    display: block;
    height: auto;
    margin-top: 1.25rem;
    max-height: 36rem;
    max-width: 100%;
    width: auto;
}
.chapter-illustration-review { margin: 1rem 0 2rem; }
.chapter-illustration-review img { display: block; height: auto; max-width: 100%; width: 100%; }
.illustration-action {
    background: transparent;
    border: 1px solid #9cabb4;
    border-radius: .3rem;
    color: #294a64;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 750;
    min-height: 2.5rem;
    padding: .45rem .8rem;
}
.illustration-action:disabled { cursor: wait; opacity: .6; }
.illustration-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapter-illustration-review .illustration-action { margin-top: .8rem; }
.illustration-unavailable { color: var(--muted); font-style: italic; }
.image-prompt, .visual-bible { color: var(--muted); font-size: .8rem; margin-top: .75rem; }
.image-prompt summary, .visual-bible summary { color: #36566d; cursor: pointer; font-weight: 750; }
.image-prompt p { white-space: pre-line; }
.visual-bible pre { background: rgba(255,255,255,.6); font: .76rem/1.5 ui-monospace, monospace; overflow-x: auto; padding: .75rem; white-space: pre-wrap; }
.review-chapter { margin: 3rem 0; }
.review-chapter > h2 { font-size: 2.2rem; }
.review-paragraph { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.review-paragraph h3 { color: var(--muted); font-family: inherit; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.variant-review { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.variant-review div {
    border-left: 1px solid var(--line);
    display: grid;
    gap: .55rem;
    grid-template-rows: auto 1fr;
    padding-left: 1rem;
}
.variant-review div:first-child { border-left: 0; padding-left: 0; }
.variant-review dt { color: #36566d; font-size: .75rem; font-weight: 800; }
.variant-review dd { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; margin: 0; }
.empty-state { padding: 5rem 0; text-align: center; }
.empty-state h1 { font-size: 3rem; }
h1:focus-visible { outline: 2px solid #1b608f; outline-offset: .3rem; }
.blazor-error-boundary { background: #b32121; color: white; padding: 1rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }

@media (max-width: 48rem) {
    .library-heading-row { align-items: stretch; flex-direction: column; gap: 1rem; }
    .story-idea-cta { flex-basis: auto; max-width: none; width: 100%; }
    .story-idea-cta .read-link { align-items: center; min-height: 2.75rem; }
    .library-controls { grid-template-columns: minmax(0, 1fr) minmax(8rem, .6fr); }
    .search-field { grid-column: 1 / -1; }
    .library-submit { width: 100%; }
    .clear-filters { justify-self: start; }
    .chapter-reader-layout { display: block; }
    .story-header { grid-template-columns: 1fr; }
    .level-picker {
        border-left: 0;
        border-top: 1px solid var(--line);
        min-width: 0;
        padding: 1rem 0 0;
        width: 100%;
    }
    .level-picker select { min-height: 2.75rem; }
    .reader-hint { margin-top: -1.5rem; }
    .chapter-illustration { margin-top: -1.5rem; }
    .chapter { margin-bottom: 2.75rem; }
}

@media (max-width: 32rem) {
    .library-hero { padding-bottom: 1.4rem; }
    .library-hero h1 { font-size: clamp(2.5rem, 12vw, 3rem); }
    .library-heading-row { align-items: stretch; }
    .library-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .library-submit, .clear-filters { grid-column: 1 / -1; }
    .story-grid { grid-template-columns: minmax(0, 1fr); }
    .story-card { grid-template-columns: 5.75rem minmax(0, 1fr); }
    .story-cover { min-height: 100%; padding: .8rem .5rem; }
    .cover-genre { font-size: .55rem; }
    .cover-letter { font-size: 2.75rem; }
    .story-card-content { padding: 1.15rem; }
    .story-card-footer { align-items: start; flex-direction: column; }
    .continue-item { align-items: start; }
    .chapter-actions { align-items: stretch; flex-direction: column-reverse; }
    .chapter-actions > * { text-align: center; width: 100%; }
    .completion-state { align-items: center; justify-items: center; }
    .reader-notice { align-items: start; }
    .idea-item header { display: block; }
    .contribution-item header { display: block; }
    .published-contribution-list article { align-items: start; flex-direction: column; gap: .65rem; }
    .idea-metadata { grid-template-columns: 1fr; }
    .variant-review { grid-template-columns: 1fr; }
    .variant-review div,
    .variant-review div:first-child {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: .8rem 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reader, .reader *, .chapter-navigation, .chapter-navigation * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}