/* ------------------------------------------------------------------
   Site theme — flat "ink & paper" look.
   Loaded after app.css and the inline styles, so it wins ties.
   ------------------------------------------------------------------ */
:root {
    --ink: #141414;
    --ink-2: #0e0e0e;
    --panel: #1c1c1c;
    --line: #2e2e2e;
    --accent: #ff7a1a;
    --accent-2: #ffd166;
    --text: #f2ede4;
    --muted: #a39e93;
}

/* Typeface */
html, body, button, input, select, textarea {
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* Page surface: graphite with a faint dot grid */
html.dark body, body.dark, html.dark, .dark {
    background-color: var(--ink) !important;
}
html.dark body, body.dark {
    color: var(--text) !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
}

/* No glow, no float, no gradient text anywhere */
.text-glow, .text-glow-red { text-shadow: none !important; }
.animate-float { animation: none !important; }
.bg-clip-text.text-transparent {
    background: none !important;
    -webkit-text-fill-color: var(--accent-2) !important;
    color: var(--accent-2) !important;
    filter: none !important;
}

/* Square corners everywhere */
.rounded-2xl, .rounded-xl, .rounded-lg, .rounded-md, .rounded-full { border-radius: 4px !important; }

/* Flat panels with a left accent bar instead of glass */
.glass-panel {
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.shadow-glass-purple, .shadow-neon-glow { box-shadow: none !important; }

/* Header: full-width flat bar with an accent rule */
header.sticky { padding: 0 !important; }
header.sticky nav.glass-panel {
    max-width: none !important;
    border: 0 !important;
    border-bottom: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    background: var(--ink-2) !important;
    padding: 14px 32px !important;
}
header.sticky nav > a > span {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: var(--accent) !important;
    color: var(--accent) !important;
}
header.sticky nav .md\:flex a {
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
header.sticky nav .md\:flex a:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }
header.sticky .glass-panel { border-left: 0 !important; }

/* Hero: flat two-column block, text left, cover right, no blurred banner */
#main-content > div:first-child > section {
    min-height: 0 !important;
    height: auto !important;
    padding: 56px 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px !important;
    background: linear-gradient(120deg, #1a1a1a 0%, #202020 55%, #2a1a0e 100%) !important;
    align-items: center !important;
}
#main-content > div:first-child > section > div.absolute { display: none !important; }
#main-content > div:first-child > section > div.relative {
    max-width: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 0 !important;
}
@media (min-width: 768px) {
    #main-content > div:first-child > section > div.relative { flex-direction: row-reverse !important; }
}
#main-content > div:first-child > section .shrink-0 {
    transform: none !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: 12px 12px 0 var(--accent) !important;
    border-radius: 4px !important;
}
#main-content > div:first-child > section .shrink-0 img { border-radius: 4px !important; }
#main-content h1 {
    text-shadow: none !important;
    filter: none !important;
    text-transform: uppercase;
    letter-spacing: -0.02em !important;
    line-height: 0.95 !important;
    font-weight: 700 !important;
}
#main-content h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 6px;
    background: var(--accent);
    margin: 20px auto 0;
}
@media (min-width: 768px) { #main-content h1::after { margin-left: 0; } }
#main-content > div:first-child > section p.uppercase { color: var(--accent) !important; letter-spacing: 0.18em !important; }

/* Buttons: square, bold, uppercase */
a.rounded-full.bg-gradient-to-r, .btn-read-chapter, button.rounded-full.bg-gradient-to-r {
    background: var(--accent) !important;
    color: #111 !important;
    border: 2px solid var(--accent) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700 !important;
}
a.rounded-full.bg-gradient-to-r:hover, .btn-read-chapter:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn-read-chapter *, .btn-read-chapter:hover * { color: #111 !important; }
a.rounded-full.bg-white\/5, button.rounded-full.bg-white\/5 {
    background: transparent !important;
    border: 2px solid var(--line) !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600 !important;
}
a.rounded-full.bg-white\/5:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* Section headings get a small accent square */
h2.text-glow::before, h3.text-glow::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    margin-right: 10px;
    vertical-align: 2px;
}

/* Tags: outlined square chips */
.genre-tag {
    background: transparent !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem !important;
}
.hash-tag {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem !important;
}

/* Reader pages: hard edges, thin frame */
.reader-page {
    border-radius: 0 !important;
    border: 1px solid var(--line) !important;
    background: var(--ink-2) !important;
}

/* Inputs */
input, textarea, select { border-radius: 4px !important; border: 1px solid var(--line) !important; background: var(--ink-2) !important; }
input:focus, textarea:focus { border-color: var(--accent) !important; }

/* Footer */
footer { background: var(--ink-2) !important; border-top: 3px solid var(--accent) !important; }

/* Chrome details */
::selection { background: rgba(255, 122, 26, 0.35); }
:focus-visible { outline-color: var(--accent) !important; }
* { scrollbar-color: var(--accent) transparent !important; }
::-webkit-scrollbar-thumb { background: var(--accent) !important; }

/* ---------------- Light theme: warm paper ---------------- */
html.light, .light, html.light body, body.light { background-color: #f6f1e7 !important; }
html.light body, body.light {
    color: #1f1b16 !important;
    background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
}
html.light .glass-panel, .light .glass-panel {
    background: #fffdf8 !important;
    border: 1px solid #e3dccd !important;
    border-left: 4px solid var(--accent) !important;
    box-shadow: none !important;
}
html.light header.sticky nav.glass-panel, .light header.sticky nav.glass-panel {
    background: #fffdf8 !important;
    border: 0 !important;
    border-bottom: 3px solid var(--accent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html.light header.sticky nav > a > span { -webkit-text-fill-color: #c2410c !important; color: #c2410c !important; }
html.light .bg-clip-text.text-transparent { -webkit-text-fill-color: #c2410c !important; color: #c2410c !important; }
html.light #main-content > div:first-child > section {
    background: linear-gradient(120deg, #fffdf8 0%, #f6efe2 55%, #f2e2cc 100%) !important;
    border-color: #e3dccd !important;
}
html.light .dark-surface, html.light .dark-surface .text-white,
.light .dark-surface, .light .dark-surface .text-white { color: #1f1b16 !important; }
html.light .dark-surface .text-zinc-400, html.light .dark-surface .text-zinc-300,
.light .dark-surface .text-zinc-400, .light .dark-surface .text-zinc-300 { color: #5b554b !important; }
html.light #main-content > div:first-child > section p.uppercase { color: #c2410c !important; }
html.light .reader-page, .light .reader-page { background: #fffdf8 !important; border-color: #e3dccd !important; }
html.light footer, .light footer { background: #fffdf8 !important; border-top: 3px solid var(--accent) !important; }
html.light input, html.light textarea, html.light select { background: #fffdf8 !important; border-color: #e3dccd !important; }
html.light .genre-tag, .light .genre-tag { color: #c2410c !important; border-color: #c2410c !important; background: transparent !important; }
html.light .shrink-0 { box-shadow: 12px 12px 0 #c2410c !important; }
html.light a.rounded-full.bg-white\/5, .light a.rounded-full.bg-white\/5 { border: 2px solid #1f1b16 !important; color: #1f1b16 !important; }
html.light #main-content .text-glow, .light #main-content .text-glow { text-shadow: none !important; }