/* ==========================================================================
   Paper and ink - the site's printed-book look: cream paper, black ink, one
   deep-red accent, the Frank Ruhl Libre serif and thin ink frames.
   Shared by every page whose <body> has the "paper" class (homepage, book,
   story and chapter pages); page-specific rules live in home.css / story.css.
   ========================================================================== */

body.paper {
    --paper: #f3eee3;
    --paper-deep: #e9e1cf;
    --ink: #1c1b19;
    --ink-soft: #4a4640;
    --rule: #1c1b19;
    --rule-soft: rgba(28, 27, 25, 0.18);
    --accent: #8f2a24;
    --display: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
    --frame: 1.5px solid var(--rule);
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Faint paper grain over a flat cream */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        var(--paper);
    color: var(--ink);
}

body.paper.dark-mode {
    --paper: #1a1917;
    --paper-deep: #24221f;
    --ink: #efe9dc;
    --ink-soft: #b9b2a4;
    --rule: #efe9dc;
    --rule-soft: rgba(239, 233, 220, 0.18);
    --accent: #e0675c;
}

/* Sepia: warmer, lower-glare yellowed paper with brown ink (chosen in the
   reader settings on story pages; dark mode wins over it) */
body.paper.sepia:not(.dark-mode) {
    --paper: #f1e2c0;
    --paper-deep: #e6d2a6;
    --ink: #3a2c1c;
    --ink-soft: #6a563d;
    --rule: #3a2c1c;
    --rule-soft: rgba(58, 44, 28, 0.2);
    --accent: #8a3418;
}

.paper h1, .paper h2, .paper h3 {
    color: var(--ink);
}

.paper a {
    color: inherit;
}

.paper :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header: solid paper with an ink rule (the homepage makes it transparent
   over its hero, see home.css)
   -------------------------------------------------------------------------- */

.paper .navbar {
    background: var(--paper) !important;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0;
}

.paper .navbar-brand {
    color: var(--ink) !important;
    font-family: var(--display);
    font-weight: 900;
    font-size: 1.6rem;
}

.paper .brand-icon {
    display: none;
}

.paper .navbar .nav-link {
    color: var(--ink);
    font-weight: 600;
}

.paper .navbar .nav-link:hover,
.paper .navbar .nav-link:focus-visible {
    color: var(--accent);
}

.paper .theme-toggle {
    background: none !important;
    color: var(--ink);
    border-radius: 0;
    font-size: 1.1rem;
}

.paper .navbar-toggler {
    border: var(--frame);
    border-radius: 0;
}

.paper .navbar-toggler:focus {
    box-shadow: none;
}

.paper .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231c1b19' stroke-linecap='square' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

.paper.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23efe9dc' stroke-linecap='square' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* Nav links and theme toggle sit in one thin-framed box */
@media (min-width: 992px) {
    .paper .navbar-collapse {
        flex-grow: 0;
        margin-inline-start: auto;
        border: var(--frame);
        background: var(--paper);
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    .paper .navbar-nav {
        margin: 0 !important;
    }

    .paper .navbar .nav-link {
        padding-inline: 0.75rem;
    }
}

/* Header search: square, in ink, to sit inside the frame */
.paper .nav-search {
    border-radius: 0;
    border-color: var(--rule-soft);
    color: var(--ink);
}

.paper .nav-search:focus-within {
    border-color: var(--rule);
    outline-color: var(--accent);
}

/* Mobile: the opened menu gets a solid panel */
@media (max-width: 991.98px) {
    .paper .navbar-collapse.show,
    .paper .navbar-collapse.collapsing {
        background: var(--paper);
        border: var(--frame);
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* Mobile menu: book list and dark-mode row in ink and serif */
.paper .nav-books,
.paper .navbar .theme-toggle {
    border-top-color: var(--rule-soft);
}

.paper .nav-books-title {
    color: var(--ink-soft);
}

.paper .nav-books a {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.05rem;
}

.paper .nav-books a:hover,
.paper .nav-books a:focus-visible {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Framed buttons
   -------------------------------------------------------------------------- */

.ink-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: var(--frame);
    border-radius: 0;
    padding: 0.7rem 1.6rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink) !important;
    background: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.ink-btn:hover,
.ink-btn:focus-visible {
    background: var(--ink);
    color: var(--paper) !important;
}

/* The main action in a group: filled ink, inverting on hover */
.ink-btn-solid {
    background: var(--ink);
    color: var(--paper) !important;
}

.ink-btn-solid:hover,
.ink-btn-solid:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Category links: a wrapping row of small framed chips
   -------------------------------------------------------------------------- */

.category-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.category-chip {
    display: inline-block;
    border: var(--frame);
    padding: 0.3rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.category-chip:hover,
.category-chip:focus-visible,
.category-chip[aria-current="page"] {
    background: var(--ink);
    color: var(--paper) !important;
}

/* Small category links under a story's title */
.story-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.story-categories a {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   Footer: a colophon on the same paper, set off by a thick-and-thin ink rule.
   The markup carries Bootstrap's dark-theme utilities (bg-dark, text-light,
   text-muted), which use !important, so these overrides do too.
   -------------------------------------------------------------------------- */

.paper .footer {
    background: var(--paper-deep) !important;
    color: var(--ink) !important;
    border-top: 4px solid var(--rule);
    box-shadow: 0 -6px 0 -4px var(--paper), 0 -7px 0 -4px var(--rule);
    margin-top: 2rem !important;
}

.paper .footer h5 {
    font-family: var(--display);
    font-weight: 900 !important;
    font-size: 1.35rem;
    color: var(--ink);
}

.paper .footer p,
.paper .footer .text-muted {
    color: var(--ink-soft) !important;
}

.paper .footer strong {
    color: var(--ink);
}

.paper .footer .text-light {
    color: var(--ink) !important;
}

.paper .footer a:hover,
.paper .footer a:focus-visible {
    color: var(--accent) !important;
    transform: none;
}

.paper .footer [aria-hidden="true"] {
    display: none;
}

.paper .footer hr {
    background: none !important;
    border-color: var(--rule);
    opacity: 0.35;
}