html {
    background: #0d0d0a;
}

body {
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(7, 8, 6, 0.52), rgba(7, 8, 6, 0.92)),
        radial-gradient(circle at 16% 0%, rgba(156, 55, 37, 0.22), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(93, 130, 84, 0.18), transparent 30%),
        url("/static/assets/apocalypse-texture.svg"),
        #0d0d0a;
    background-attachment: fixed;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body::before {
    background:
        linear-gradient(90deg, rgba(214, 75, 45, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(157, 182, 127, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 72%);
}

body::after {
    opacity: 0.34;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        linear-gradient(115deg, transparent 0 54%, rgba(217, 185, 91, 0.09) 54% 58%, transparent 58%);
    mix-blend-mode: screen;
}

:root,
:root[data-theme="paper"],
:root[data-theme="dark"],
:root[data-theme="terminal"] {
    color-scheme: dark;
    --body-bg: #0d0d0a;
    --ink: #eee7d2;
    --muted: #a9a08d;
    --line: rgba(238, 231, 210, 0.13);
    --line-strong: rgba(238, 231, 210, 0.34);
    --surface: rgba(20, 20, 16, 0.88);
    --surface-strong: rgba(31, 29, 23, 0.94);
    --surface-soft: rgba(80, 76, 58, 0.22);
    --tag-bg: rgba(211, 69, 42, 0.14);
    --tag-text: #f0d2bf;
    --accent: #d3452a;
    --accent-strong: #f26a3f;
    --accent-contrast: #d8c35f;
    --button-text: #120f0b;
    --shadow: 0 22px 58px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    --header-bg: rgba(10, 11, 8, 0.88);
    --heading-font: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --body-font: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Inter", system-ui, -apple-system, sans-serif;
    --mono-font: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --radius-lg: 2px;
    --radius-md: 2px;
    --radius-sm: 2px;
    --grid-line: rgba(216, 195, 95, 0.05);
    --code-bg: rgba(5, 9, 7, 0.98);
    --code-border: rgba(151, 180, 118, 0.18);
    --code-text: #dce8d0;
    --code-label-bg: rgba(211, 69, 42, 0.12);
    --code-label-text: #f0c7ad;
    --syntax-keyword: #b7d883;
    --syntax-string: #e0c75f;
    --syntax-number: #f26a3f;
    --syntax-title: #dce8d0;
    --syntax-comment: #6f7b61;
    --syntax-meta: #df927d;
    --syntax-attr: #e6b25a;
    --syntax-variable: #ead7ad;
}

.site-header {
    border-bottom: 1px solid rgba(216, 195, 95, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 11, 8, 0.96), rgba(10, 11, 8, 0.78)),
        repeating-linear-gradient(90deg, rgba(211, 69, 42, 0.14) 0 18px, transparent 18px 28px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.site-nav {
    max-width: 1360px;
    padding: 10px 22px;
}

.brand {
    gap: 0;
}

.brand-mark {
    color: #f5ead0;
    font-family: var(--heading-font);
    font-size: clamp(22px, 2.7vw, 32px);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(211, 69, 42, 0.28);
}

.brand-mark::before {
    content: "▲ ";
    color: var(--accent);
}

.brand-sub {
    margin-top: 3px;
    color: var(--accent-contrast);
    font-family: var(--mono-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.brand-sub::before {
    content: "BUNKER // ";
    color: var(--muted);
}

.nav-cluster {
    gap: 14px;
}

.nav-links,
.theme-switcher {
    gap: 0;
    border: 1px solid rgba(216, 195, 95, 0.24);
    background: rgba(0, 0, 0, 0.18);
}

.nav-link,
.theme-button,
.nav-toggle,
.back-to-top {
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(216, 195, 95, 0.24);
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-link:last-child,
.theme-button:last-child {
    border-right: 0;
}

.nav-link.is-active,
.theme-button.is-active {
    background: var(--accent);
    color: #fff0d6;
}

.nav-link:hover,
.theme-button:hover,
.nav-toggle:hover,
.back-to-top:hover {
    background: var(--accent-contrast);
    color: #17130c;
    transform: none;
}

.container {
    max-width: 1360px;
    padding: 26px 22px 64px;
}

.page-title {
    display: none;
}

.reading-progress {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-contrast), #a8c47a);
    box-shadow: 0 0 18px rgba(242, 106, 63, 0.55);
}

.home-page,
.writing-page,
.players-page,
.trending-page,
.article-page {
    gap: 22px;
}

.hero,
.writing-hero,
.players-hero,
.trending-hero,
.article-cover-stage,
.article-cover-shell,
.article-panel,
.article-meta-card,
.article-section,
.article-references,
.article-related-card,
.article-series-nav,
.article-toc,
.essay-card,
.trend-card,
.game-card,
.section-panel,
.sidebar-card,
.writing-series,
.writing-sidebar-card,
.writing-search-summary,
.writing-list-head,
.writing-list-entry,
.writing-empty,
.player-card,
.players-references,
.trending-card,
.home-footer,
.site-stats-summary,
.latest-list,
.editorial-desk,
.editorial-feature,
.editorial-column,
.player-preview-card,
.hero-feature-link,
.hero-quick-links,
.tag-filter {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(32, 31, 25, 0.88), rgba(16, 17, 13, 0.92)),
        url("/static/assets/apocalypse-texture.svg");
    background-size: auto, 420px 420px;
    box-shadow: var(--shadow);
}

.hero::before,
.writing-hero::before,
.players-hero::before,
.trending-hero::before,
.article-section::before,
.writing-list-entry::before,
.essay-card::before,
.trend-card::before,
.player-card::before,
.trending-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: min(34%, 260px);
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 20px, var(--accent-contrast) 20px 32px, transparent 32px 42px);
    opacity: 0.9;
    pointer-events: none;
}

.hero {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    min-height: 560px;
    padding: clamp(28px, 5vw, 66px);
    overflow: hidden;
    border-color: rgba(216, 195, 95, 0.42);
    background:
        linear-gradient(115deg, rgba(9, 10, 8, 0.72) 0 46%, rgba(32, 20, 15, 0.74) 46% 62%, rgba(10, 12, 9, 0.88) 62%),
        radial-gradient(circle at 72% 18%, rgba(211, 69, 42, 0.30), transparent 28%),
        url("/static/assets/apocalypse-texture.svg"),
        #0d0d0a;
    background-size: auto, auto, 560px 560px, auto;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -6% 10% auto;
    width: min(48vw, 620px);
    aspect-ratio: 1.4;
    border: 1px solid rgba(216, 195, 95, 0.26);
    background:
        linear-gradient(90deg, transparent 49%, rgba(216, 195, 95, 0.26) 49% 51%, transparent 51%),
        linear-gradient(180deg, transparent 49%, rgba(216, 195, 95, 0.18) 49% 51%, transparent 51%),
        radial-gradient(circle at center, rgba(151, 180, 118, 0.12), transparent 58%);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    opacity: 0.78;
    pointer-events: none;
}

.hero-copy,
.hero-rail {
    position: relative;
    z-index: 1;
}

.eyebrow,
.trend-tag,
.trending-kicker,
.players-kicker,
.writing-list-kicker,
.sidebar-card-kicker,
.writing-hot-kicker,
.writing-subscribe-kicker,
.editorial-pill,
.game-chip,
.essay-tag,
.writing-tag,
.trending-tag,
.player-date,
.player-company,
.players-chip,
.player-pane-label,
.latest-tag {
    border-radius: 0;
    border: 1px solid rgba(216, 195, 95, 0.28);
    background: rgba(211, 69, 42, 0.16);
    color: #f0d6bc;
    font-family: var(--mono-font);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero .eyebrow::before,
.writing-hero h2::before,
.players-hero h2::before,
.trending-hero h2::before {
    content: "SURVIVAL LOG // ";
    color: var(--accent-contrast);
}

.hero h2 {
    max-width: 10ch;
    margin: 22px 0 22px;
    color: #f4ead1;
    font-family: var(--heading-font);
    font-size: clamp(4.4rem, 11.4vw, 11.8rem);
    font-weight: 950;
    line-height: 0.78;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(211, 69, 42, 0.24), 0 5px 0 rgba(0, 0, 0, 0.44);
}

.hero-title-line {
    white-space: normal;
}

.hero-lead {
    max-width: 48rem;
    color: #d9d1bc;
    font-size: clamp(1.08rem, 2vw, 1.38rem);
    font-weight: 650;
    line-height: 1.72;
}

.hero-lead::before {
    content: "[FIELD BRIEF] ";
    color: var(--accent-contrast);
    font-family: var(--mono-font);
    font-size: 0.82em;
    font-weight: 900;
}

.hero-search-inline {
    max-width: 650px;
    margin-top: 30px;
    border: 1px solid rgba(216, 195, 95, 0.42);
    background: rgba(6, 8, 6, 0.68);
    box-shadow: inset 0 0 0 1px rgba(211, 69, 42, 0.18);
}

.hero-search-input,
.writing-search-input {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.28);
    background: rgba(9, 12, 9, 0.78);
    color: var(--ink);
}

.hero-search-input {
    border: 0;
}

.hero-search-input::placeholder,
.writing-search-input::placeholder {
    color: rgba(169, 160, 141, 0.72);
}

.button-primary,
.hero-search-button,
.editorial-feature-link,
.essay-link,
.game-link,
.trend-link,
.section-link,
.writing-link,
.trending-link {
    border-radius: 0;
    border: 1px solid rgba(216, 195, 95, 0.26);
    background: linear-gradient(180deg, #e15a36, #9e2f20);
    color: #fff1d7;
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.button-primary:hover,
.hero-search-button:hover,
.editorial-feature-link:hover,
.essay-link:hover,
.game-link:hover,
.trend-link:hover,
.section-link:hover,
.writing-link:hover,
.trending-link:hover {
    background: var(--accent-contrast);
    color: #14100b;
    text-decoration: none;
}

.hero-metrics {
    margin-top: 24px;
    gap: 0;
    border: 1px solid rgba(216, 195, 95, 0.32);
    width: fit-content;
    background: rgba(0, 0, 0, 0.28);
}

.hero-metrics span {
    padding: 11px 14px;
    border-right: 1px solid rgba(216, 195, 95, 0.24);
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
}

.hero-metrics span:last-child {
    border-right: 0;
}

.hero-metrics strong {
    color: var(--accent-contrast);
    font-size: 16px;
}

.hero-feature-link,
.hero-quick-links a,
.friend-link,
.writing-hot-item,
.writing-subscribe-link,
.trending-hero-stack a {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.28);
    background: rgba(11, 13, 10, 0.74);
}

.hero-feature-link {
    padding: 24px;
    border-width: 1px;
}

.hero-feature-link span,
.hero-feature-link em,
.latest-date,
.essay-meta,
.trend-meta,
.writing-meta,
.article-meta,
.trending-meta {
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
}

.hero-feature-link strong {
    color: var(--ink);
    font-size: clamp(1.45rem, 2.7vw, 2.35rem);
    line-height: 1.08;
}

.hero-quick-links {
    gap: 0;
    border: 1px solid rgba(216, 195, 95, 0.30);
}

.hero-quick-links a {
    border: 0;
    border-bottom: 1px solid rgba(216, 195, 95, 0.22);
    color: var(--ink);
    font-family: var(--mono-font);
    font-weight: 900;
    text-transform: uppercase;
}

.hero-quick-links a:last-child {
    border-bottom: 0;
}

.hero-quick-links span,
.latest-date {
    color: var(--accent-contrast);
}

.section-head,
.editorial-head,
.writing-series-head,
.players-references-head {
    align-items: end;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(216, 195, 95, 0.36);
}

.section-head h2,
.editorial-head h2,
.writing-hero h2,
.players-hero h2,
.trending-hero h2 {
    margin: 0;
    color: #f2e7cf;
    font-family: var(--heading-font);
    font-size: clamp(2.1rem, 5vw, 4.7rem);
    font-weight: 950;
    line-height: 0.92;
    text-transform: uppercase;
}

.section-head h2::before,
.editorial-head h2::before {
    content: "// ";
    color: var(--accent);
}

.section-head p,
.editorial-head p,
.writing-hero p,
.players-hero p,
.trending-hero p {
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
    line-height: 1.7;
    text-transform: uppercase;
}

.latest-list {
    gap: 0;
    border-bottom: 0;
}

.latest-item {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr) 120px;
    gap: 18px;
    align-items: baseline;
    padding: 15px 18px;
    border-bottom: 1px solid rgba(216, 195, 95, 0.18);
    background: rgba(7, 9, 7, 0.42);
}

.latest-item:hover,
.essay-card:hover,
.trend-card:hover,
.game-card:hover,
.player-card:hover,
.trending-card:hover,
.writing-list-entry:hover {
    transform: none;
    background:
        linear-gradient(90deg, rgba(211, 69, 42, 0.16), rgba(24, 24, 18, 0.88)),
        url("/static/assets/apocalypse-texture.svg");
    background-size: auto, 420px 420px;
}

.latest-item strong {
    color: var(--ink);
    font-family: var(--heading-font);
    font-size: clamp(1.08rem, 1.9vw, 1.6rem);
    line-height: 1.18;
}

.content-shell,
.writing-layout,
.article-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.content-aside,
.writing-sidebar,
.article-aside {
    top: 78px;
}

.essay-list,
.trend-grid,
.game-grid,
.editorial-grid,
.player-preview-list,
.trending-list {
    gap: 0;
    border: 1px solid rgba(216, 195, 95, 0.26);
    border-bottom: 0;
}

.essay-card,
.trend-card,
.game-card,
.player-preview-card,
.trending-card,
.writing-list-entry,
.player-card {
    border-width: 0 0 1px 0;
    border-color: rgba(216, 195, 95, 0.18);
    padding: 24px;
    transition: none;
}

.home-card-title,
.essay-card h3,
.trend-card h3,
.game-card h3,
.writing-list-entry h3,
.trending-card h3,
.player-card h3,
.player-preview-card h3 {
    color: #efe5cd;
    font-family: var(--heading-font);
    font-size: clamp(1.35rem, 2.55vw, 2.25rem);
    font-weight: 950;
    line-height: 1.08;
}

.essay-card p,
.trend-card p,
.game-card p,
.player-preview-pane p,
.player-pane p,
.writing-list-entry p,
.trending-card p {
    color: #d4cbb8;
    font-size: 16px;
    line-height: 1.84;
}

.essay-highlights,
.writing-highlights,
.trending-points {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
}

.editorial-feature,
.editorial-column {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.24);
    background: rgba(12, 14, 11, 0.72);
}

.sidebar-card,
.writing-sidebar-card,
.article-meta-card,
.article-toc,
.article-related-card,
.article-series-nav {
    padding: 18px;
}

.sidebar-card h3,
.writing-sidebar-card h3,
.article-meta-card h3,
.article-toc h3 {
    color: var(--accent-contrast);
    font-family: var(--mono-font);
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.writing-hero,
.players-hero,
.trending-hero {
    padding: clamp(24px, 4vw, 48px);
    border-color: rgba(216, 195, 95, 0.38);
    background:
        linear-gradient(110deg, rgba(9, 11, 8, 0.88) 0 56%, rgba(68, 30, 21, 0.68) 56% 72%, rgba(12, 13, 10, 0.88) 72%),
        url("/static/assets/apocalypse-texture.svg");
    background-size: auto, 520px 520px;
}

.tag-filter {
    gap: 0;
    border: 1px solid rgba(216, 195, 95, 0.28);
    width: fit-content;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.24);
}

.tag-filter-link,
.writing-sidebar-link,
.writing-tag-cloud-link {
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(216, 195, 95, 0.20);
    background: transparent;
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 900;
}

.tag-filter-link:last-child,
.writing-sidebar-link:last-child {
    border-right: 0;
}

.tag-filter-link.is-active,
.writing-sidebar-link.is-active,
.writing-tag-cloud-link.is-active {
    background: var(--accent);
    color: #fff0d7;
}

.writing-list-head {
    padding: 18px 20px;
    border-color: rgba(216, 195, 95, 0.30);
}

.writing-list {
    gap: 0;
}

.writing-list-entry {
    border-left: 1px solid rgba(216, 195, 95, 0.24);
    border-right: 1px solid rgba(216, 195, 95, 0.24);
}

.writing-list-entry:first-of-type {
    border-top: 1px solid rgba(216, 195, 95, 0.24);
}

.writing-list-entry h3 {
    margin-top: 12px;
}

.writing-tag,
.essay-tag {
    padding: 5px 8px;
}

.writing-search-box {
    gap: 0;
}

.writing-search-clear {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.24);
    background: var(--accent);
    color: #fff0d7;
}

.players-list {
    gap: 0;
    border-top: 1px solid rgba(216, 195, 95, 0.34);
}

.player-card {
    grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
    border-left: 1px solid rgba(216, 195, 95, 0.22);
    border-right: 1px solid rgba(216, 195, 95, 0.22);
}

.player-card-head {
    padding-right: 18px;
    border-right: 1px solid rgba(216, 195, 95, 0.22);
}

.player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.player-date {
    background: var(--accent);
    color: #fff0d7;
}

.player-company {
    border-left: 0;
}

.player-columns,
.player-preview-columns {
    gap: 0;
}

.player-pane,
.player-preview-pane {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.22);
    background: rgba(4, 6, 4, 0.28);
}

.player-pane + .player-pane,
.player-preview-pane + .player-preview-pane {
    border-left: 0;
}

.player-pane-commentary,
.player-preview-pane.is-commentary {
    background: rgba(211, 69, 42, 0.10);
}

.trending-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trending-card {
    border-right: 1px solid rgba(216, 195, 95, 0.18);
}

.trending-card:nth-child(2n) {
    border-right: 0;
}

.trending-footer,
.trend-source {
    border-top-color: rgba(216, 195, 95, 0.20);
}

.article-cover-stage,
.article-cover-shell {
    overflow: hidden;
}

.article-cover-frame,
.article-cover-shell {
    border-radius: 0;
}

.article-head-panel,
.article-panel {
    padding: clamp(24px, 4vw, 48px);
}

.article-cover-shell {
    min-height: 380px;
    border-color: rgba(216, 195, 95, 0.38);
    background:
        linear-gradient(120deg, rgba(8, 10, 7, 0.92) 0 46%, rgba(65, 28, 20, 0.72) 46% 64%, rgba(13, 14, 10, 0.92) 64%),
        radial-gradient(circle at 78% 18%, rgba(216, 195, 95, 0.14), transparent 28%),
        url("/static/assets/apocalypse-texture.svg");
    background-size: auto, auto, 520px 520px;
}

.article-cover-shell::before {
    content: "ARCHIVE SIGNAL / CONTAMINATION CHECK PASSED";
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    color: rgba(216, 195, 95, 0.78);
    font-family: var(--mono-font);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.article-head-panel h2,
.article-cover-shell .article-panel h2 {
    color: #f4ead1;
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 6.6vw, 6rem);
    font-weight: 950;
    line-height: 0.94;
    text-shadow: 0 0 20px rgba(211, 69, 42, 0.18);
}

.article-page {
    --ink: #eee7d2;
    --muted: #b7ad98;
    --tag-bg: rgba(211, 69, 42, 0.16);
    --tag-text: #f0d6bc;
    --accent: #d3452a;
    --accent-strong: #f26a3f;
    --accent-contrast: #d8c35f;
}

.article-cover-shell .article-summary,
.article-cover-shell .article-answer-box p,
.article-cover-shell .article-answer-box li,
.article-cover-shell .article-status,
.article-cover-shell .article-share-title {
    color: #ded4bf;
}

.article-cover-shell .article-panel {
    grid-template-columns: minmax(0, 1fr);
    background: rgba(8, 10, 7, 0.46);
    border-color: rgba(216, 195, 95, 0.26);
    backdrop-filter: blur(2px);
}

.article-head-side {
    justify-self: start;
    width: 100%;
}

.article-cover-image,
.article-cover-grid,
.article-cover-beam,
.article-cover-vignette {
    display: none;
}

.article-cover-shell .article-tag,
.article-cover-shell .meta-pill,
.article-cover-shell .article-stat-pill,
.article-cover-shell .article-action-button,
.article-cover-shell .article-answer-box {
    border-radius: 0;
    border-color: rgba(216, 195, 95, 0.28);
    background: rgba(5, 7, 5, 0.46);
    color: #e8dec7;
}

.article-cover-shell .article-tag,
.article-cover-shell .meta-pill,
.article-cover-shell .article-stat-pill,
.article-cover-shell .article-action-button {
    color: #f1dfc0;
    box-shadow: inset 3px 0 0 rgba(211, 69, 42, 0.8);
}

.article-cover-shell .article-kicker,
.article-cover-shell .article-cover-kicker {
    color: var(--accent-contrast);
}

.article-cover-kicker {
    color: var(--accent-contrast);
}

.article-summary,
.article-section p,
.article-meta-card p,
.article-answer-box p {
    color: #d4cbb8;
}

.article-section {
    padding: clamp(24px, 4vw, 42px);
    background:
        linear-gradient(180deg, rgba(26, 26, 21, 0.93), rgba(14, 15, 12, 0.96)),
        url("/static/assets/apocalypse-texture.svg");
    background-size: auto, 500px 500px;
}

.article-section h2,
.article-section h3 {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 195, 95, 0.28);
    color: #f2e7cf;
    font-family: var(--heading-font);
    font-size: clamp(1.75rem, 3.2vw, 2.85rem);
    font-weight: 950;
}

.article-section h2::before,
.article-section h3::before {
    content: "§ ";
    color: var(--accent);
}

.article-section p,
.article-section li {
    color: #ded4bf;
    font-size: 18px;
    line-height: 1.92;
}

.article-page a {
    color: var(--accent-strong);
}

.article-page .article-cover-shell,
.article-page .article-panel,
.article-page .article-section,
.article-page .article-meta-card,
.article-page .article-toc,
.article-page .article-related-card,
.article-page .article-series-nav,
.article-page .article-references {
    border-color: rgba(216, 195, 95, 0.30);
}

.article-section blockquote {
    border-left: 4px solid var(--accent);
    border-radius: 0;
    background: rgba(211, 69, 42, 0.10);
}

.article-section pre {
    border-radius: 0;
    border-color: rgba(151, 180, 118, 0.22);
}

@media (max-width: 980px) {
    .hero,
    .content-shell,
    .writing-layout,
    .article-layout,
    .players-hero,
    .trending-hero {
        grid-template-columns: 1fr;
    }

    .content-aside,
    .writing-sidebar,
    .article-aside {
        position: static;
    }

    .hero {
        min-height: 0;
    }

    .latest-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .trending-list {
        grid-template-columns: 1fr;
    }

    .trending-card,
    .trending-card:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .site-nav,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero,
    .writing-hero,
    .players-hero,
    .trending-hero,
    .essay-card,
    .trend-card,
    .game-card,
    .writing-list-entry,
    .player-card,
    .trending-card {
        padding: 18px;
    }

    .hero h2 {
        font-size: clamp(3.1rem, 16vw, 5.1rem);
    }

    .article-head-panel h2,
    .article-cover-shell .article-panel h2 {
        font-size: clamp(2.45rem, 12vw, 4.1rem);
        line-height: 0.96;
        overflow-wrap: normal;
        word-break: normal;
    }

    .article-cover-shell .article-panel {
        padding: 20px;
    }

    .hero-search-inline {
        display: grid;
    }

    .hero-search-button {
        width: 100%;
    }

    .hero-metrics {
        width: 100%;
        display: grid;
    }

    .hero-metrics span {
        border-right: 0;
        border-bottom: 1px solid rgba(216, 195, 95, 0.22);
    }

    .hero-metrics span:last-child {
        border-bottom: 0;
    }

    .player-card,
    .player-columns,
    .player-preview-columns {
        grid-template-columns: 1fr;
    }

    .player-card-head {
        padding-right: 0;
        padding-bottom: 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(216, 195, 95, 0.22);
    }

    .player-pane + .player-pane,
    .player-preview-pane + .player-preview-pane {
        border-left: 1px solid rgba(216, 195, 95, 0.22);
        border-top: 0;
    }

    .tag-filter {
        width: 100%;
    }
}