:root {
    --story-ink:#171414;
    --story-paper:#fffaf2;
    --story-cream:#f6eee3;
    --story-wine:#6b3040;
    --story-gold:#b99557;
    --story-muted:#756c66;
    --story-border:rgba(36,26,23,.11);
    --story-shadow:0 16px 42px rgba(40,29,25,.08);
}

.story-page {
    min-height:70vh;
    background:
        radial-gradient(circle at 85% 0%,rgba(185,149,87,.13),transparent 30rem),
        linear-gradient(180deg,#fbf7f0,#f4ece2);
    color:var(--story-ink);
}

.story-wrap {
    width:min(1380px,calc(100% - 32px));
    margin:0 auto;
    padding:38px 0 72px;
}

.story-hero {
    position:relative;
    overflow:hidden;
    padding:46px;
    border-radius:24px;
    background:
        radial-gradient(circle at 90% 0%,rgba(218,190,134,.25),transparent 19rem),
        linear-gradient(125deg,#211d1e,#38292d 60%,#612a3b);
    color:#fff;
    box-shadow:0 22px 55px rgba(49,31,35,.17);
}

.story-hero small,
.story-eyebrow {
    color:#dcc08a;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.story-hero h1 {
    max-width:760px;
    margin:10px 0 12px;
    font-size:clamp(34px,6vw,65px);
    line-height:1;
    letter-spacing:-.045em;
}

.story-hero p {
    max-width:690px;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:16px;
    line-height:1.7;
}

.story-toolbar {
    display:grid;
    grid-template-columns:minmax(200px,1fr) auto auto;
    gap:10px;
    margin:22px 0;
    padding:13px;
    border:1px solid var(--story-border);
    border-radius:15px;
    background:rgba(255,253,249,.94);
    box-shadow:var(--story-shadow);
}

.story-toolbar input,
.story-toolbar select {
    min-height:43px;
    padding:0 12px;
    border:1px solid var(--story-border);
    border-radius:9px;
    background:#fff;
    font:inherit;
}

.story-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
    gap:18px;
}

.story-card {
    overflow:hidden;
    border:1px solid var(--story-border);
    border-radius:17px;
    background:#fffdf9;
    box-shadow:0 8px 25px rgba(37,27,24,.055);
    transition:transform .18s ease,box-shadow .18s ease;
}

.story-card:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(37,27,24,.10);
}

.story-cover {
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:
        linear-gradient(145deg,#2b2425,#612c3b);
}

.story-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.story-cover-empty {
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    color:rgba(255,255,255,.55);
    font-family:Georgia,serif;
    font-size:27px;
}

.story-card-body {
    padding:17px;
}

.story-card h2 {
    margin:5px 0 8px;
    font-size:20px;
    letter-spacing:-.025em;
}

.story-meta {
    color:var(--story-muted);
    font-size:12px;
}

.story-synopsis {
    min-height:66px;
    margin:10px 0 15px;
    color:#5c5551;
    font-size:13px;
    line-height:1.55;
}

.story-tags {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin:10px 0;
}

.story-tag {
    padding:4px 7px;
    border-radius:99px;
    background:rgba(107,48,64,.07);
    color:var(--story-wine);
    font-size:10px;
    font-weight:750;
}

.story-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:39px;
    padding:0 13px;
    border:0;
    border-radius:9px;
    background:var(--story-wine);
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
}

.story-button.secondary {
    border:1px solid rgba(107,48,64,.15);
    background:rgba(107,48,64,.055);
    color:var(--story-wine);
}

.story-card-actions {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.story-empty {
    grid-column:1/-1;
    padding:54px 25px;
    border:1px dashed rgba(107,48,64,.19);
    border-radius:18px;
    background:rgba(255,253,249,.65);
    text-align:center;
    color:var(--story-muted);
}

.story-reader {
    width:min(820px,calc(100% - 32px));
    margin:0 auto;
    padding:38px 0 90px;
}

.story-reader-head {
    margin-bottom:30px;
}

.story-reader-head h1 {
    margin:8px 0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(32px,5vw,52px);
    line-height:1.08;
}

.story-reader-tools {
    position:sticky;
    z-index:5;
    top:8px;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:22px;
    padding:9px;
    border:1px solid var(--story-border);
    border-radius:13px;
    background:rgba(255,253,249,.93);
    box-shadow:0 8px 22px rgba(30,22,20,.08);
    backdrop-filter:blur(12px);
}

.story-reader-tools button {
    min-height:36px;
    padding:0 11px;
    border:1px solid var(--story-border);
    border-radius:8px;
    background:#fff;
    color:var(--story-ink);
    cursor:pointer;
}

.story-reading-progress {
    position:fixed;
    z-index:20;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:linear-gradient(90deg,var(--story-wine),var(--story-gold));
}

.story-body {
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    line-height:1.9;
    color:#2d2726;
}

.story-body p {
    margin:0 0 1.45em;
}

body.story-night {
    background:#171515 !important;
}

body.story-night .story-page {
    background:#171515;
    color:#eee6dc;
}

body.story-night .story-reader-head h1,
body.story-night .story-body {
    color:#eee6dc;
}

body.story-night .story-reader-tools {
    border-color:rgba(255,255,255,.08);
    background:rgba(35,31,31,.94);
}

body.story-night .story-reader-tools button {
    border-color:rgba(255,255,255,.09);
    background:#292424;
    color:#eee6dc;
}

.story-agegate {
    position:fixed;
    z-index:99999;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(15,12,13,.94);
    backdrop-filter:blur(14px);
}

.story-agegate-card {
    width:min(470px,100%);
    padding:32px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    background:#241f20;
    color:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.story-agegate-card h2 {
    margin:8px 0 10px;
    font-size:29px;
}

.story-agegate-card p {
    color:rgba(255,255,255,.67);
    line-height:1.6;
}

.story-agegate-actions {
    display:flex;
    gap:8px;
    margin-top:20px;
}

.story-library-account {
    display:grid;
    gap:15px;
}

.story-account-card {
    padding:15px;
    border:1px solid var(--story-border);
    border-radius:13px;
    background:#fffdf9;
}

@media(max-width:760px) {
    .story-wrap {
        width:min(100% - 20px,1380px);
        padding-top:18px;
    }

    .story-hero {
        padding:27px 21px;
        border-radius:18px;
    }

    .story-toolbar {
        grid-template-columns:1fr;
    }

    .story-grid {
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .story-card-body {
        padding:13px;
    }

    .story-reader {
        width:min(100% - 26px,820px);
        padding-top:22px;
    }

    .story-body {
        font-size:18px;
    }
}

@media(max-width:480px) {
    .story-grid {
        grid-template-columns:1fr;
    }
}