/* ==========================================================================
   Late Saves — Ghost theme
   Calm, bookish reading (Newsreader), save-slot details (IBM Plex Mono),
   and a night mode. Fonts are self-hosted: no third-party requests.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------ */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Tokens ----------------------------------------------------------------- */
:root {
    --serif: var(--gh-font-heading, "Newsreader", Georgia, "Times New Roman", serif);
    --reading: var(--gh-font-body, "Newsreader", Georgia, "Times New Roman", serif);
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --amber: #E0A45E;
    --amber-hover: #F0BC7E;
    --on-amber: #1E1A16;

    /* Light: paper and lamplight */
    --bg: #FAF7F2;
    --surface: #FFFDF9;
    --ink: #2A241F;
    --body: #2A241F;
    --soft: #4A4139;
    --muted: #6B6158;
    --line: #E8E0D4;
    --line-strong: #D9CFC1;
    --accent: var(--ghost-accent-color, #8A5A3C);
    --accent-hover: #6F4A32;
    --sub-bg: #2A241F;
    --sub-ink: #FAF7F2;
    --sub-soft: #DDD3C6;
    --sub-label: #C9BFB2;
    --sub-field: #352E28;
    --sub-field-line: #4D443B;
    --glow: none;

    --narrow: 720px;
    --wide: 968px;
    --site: 1088px;
    --radius: 14px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    /* Dark: night session */
    --bg: #15171C;
    --surface: #1C1F25;
    --ink: #ECE6DC;
    --body: #E3DDD2;
    --soft: #C9C2B6;
    --muted: #A9A397;
    --line: #2C3038;
    --line-strong: #3A3E47;
    --accent: var(--amber);
    --accent-hover: var(--amber-hover);
    --sub-bg: #20242B;
    --sub-ink: #ECE6DC;
    --sub-soft: #C9C2B6;
    --sub-label: var(--amber);
    --sub-field: #15171C;
    --sub-field-line: #3A3E47;
    --glow: 0 0 100px 0 rgba(224, 164, 94, 0.10);
    color-scheme: dark;
}

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.container { width: 100%; max-width: var(--site); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: var(--narrow); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.container-wide { width: 100%; max-width: var(--wide); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

.mono-label { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); margin: 0; letter-spacing: 0; }
.accent, a.accent { color: var(--accent); text-decoration: none; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* Header ----------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.save-point { color: var(--accent); flex: none; }
.brand-name { font-family: var(--serif); font-size: 26px; font-weight: 500; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 15px; }
.site-nav .nav { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 0; padding: 0; }
.site-nav .nav a { color: var(--soft); text-decoration: none; }
.site-nav .nav a:hover, .site-nav .nav-current a { color: var(--accent); }

.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle { color: var(--amber); }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Hero ------------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; gap: 24px; padding-top: 112px; padding-bottom: 80px; }
.hero-small { padding-top: 88px; padding-bottom: 48px; }
.hero-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.08; letter-spacing: -0.02em; }
.hero-text { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; color: var(--soft); }

/* Save slots ------------------------------------------------------------- */
.slots { padding-bottom: 96px; }
.slots-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.slots-head h2 { font-weight: 500; }
.slot-list { display: flex; flex-direction: column; gap: 12px; counter-reset: slot; }

.slot { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; color: var(--ink); text-decoration: none; transition: border-color .2s ease; counter-increment: slot; }
.slot:hover { color: var(--ink); border-color: var(--accent); }
.slot.is-selected { border: 1.5px solid var(--accent); box-shadow: var(--glow); }
.slot-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.slot-id { color: var(--accent); }
.slot-num::before { content: counter(slot, decimal-leading-zero); }
.slot-cursor { display: none; }
.slot.is-selected .slot-cursor, .slot:hover .slot-cursor { display: inline; }
.slot-title { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; line-height: 1.15; }
.slot-excerpt { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--soft); }
.slot-empty { flex-direction: row; gap: 24px; align-items: center; background: transparent; border: 1px dashed var(--line-strong); padding: 24px 32px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.slot-empty .slot-id { color: var(--muted); }

.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pagination a { color: var(--accent); text-decoration: none; }

/* Subscribe -------------------------------------------------------------- */
.subscribe { padding-bottom: 112px; }
.subscribe-box { background: var(--sub-bg); color: var(--sub-ink); border: 1px solid transparent; border-radius: 18px; padding: 40px; display: flex; flex-direction: column; gap: 24px; box-shadow: var(--glow); }
:root[data-theme="dark"] .subscribe-box { border-color: var(--line); }
.subscribe-copy { display: flex; flex-direction: column; gap: 10px; }
.subscribe-label { color: var(--sub-label); }
.subscribe-title { margin: 0; font-family: var(--serif); font-size: clamp(24px, 3vw, 30px); line-height: 1.3; }
.subscribe-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.subscribe-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; font-size: 14px; color: var(--sub-soft); }
.subscribe-field input { font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--sub-field-line); border-radius: 10px; background: var(--sub-field); color: var(--sub-ink); }
.subscribe-field input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.subscribe-error { margin: 0; font-size: 14px; color: #F3B4A2; display: none; }
.subscribe-box.error .subscribe-error { display: block; }
.subscribe-box.loading .btn-save { opacity: .7; pointer-events: none; }
.subscribe-box.success .subscribe-row { display: none; }
.subscribe-box.success .subscribe-copy::after { content: "Game saved. Check your inbox to confirm."; font-family: var(--mono); font-size: 14px; color: var(--amber); }

.btn-save { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 14px 24px; border: 0; border-radius: 10px; background: var(--amber); color: var(--on-amber); font-family: var(--mono); font-size: 15px; text-decoration: none; cursor: pointer; }
.btn-save:hover { background: var(--amber-hover); color: var(--on-amber); }
.btn-glyph { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; flex: none; }

/* Article ---------------------------------------------------------------- */
.article-header { padding-top: 72px; }
.back-link { text-decoration: none; }
.back-link:hover { color: var(--accent); }
.article-title { margin: 28px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.5vw, 68px); line-height: 1.04; letter-spacing: -0.02em; }
.article-subtitle { margin: 20px 0 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--soft); }
.article-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.article-meta a { text-decoration: none; }
.article-image { margin-top: 48px; margin-bottom: 0; }
.article-image img { width: 100%; border-radius: var(--radius); }
.article-image figcaption, .gh-content figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: left; }
.article-image figcaption a, .gh-content figcaption a { color: var(--muted); }

.chapter-select { margin-top: 56px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 14px; counter-reset: chapter; }
.chapter-list li { counter-increment: chapter; }
.chapter-list a { color: var(--soft); text-decoration: none; }
.chapter-list a::before { content: counter(chapter, decimal-leading-zero) "  "; white-space: pre; color: var(--muted); }
.chapter-list a:hover, .chapter-list a.is-active { color: var(--accent); }
.chapter-list a.is-active::before { content: "▸ " counter(chapter, decimal-leading-zero) "  "; color: var(--accent); }

/* Post content (Ghost Koenig) ------------------------------------------- */
.gh-content { padding-top: 48px; font-family: var(--reading); font-size: 21px; line-height: 1.7; color: var(--body); }
:root[data-theme="dark"] .gh-content { line-height: 1.75; }
.gh-content > * { margin: 0 0 28px; }
.gh-content > *:last-child { margin-bottom: 0; }
.gh-content > p:first-of-type::first-letter { float: left; font-size: 84px; line-height: .85; padding: 8px 12px 0 0; color: var(--accent); font-weight: 500; }
.gh-content h2, .gh-content h3 { font-family: var(--serif); color: var(--ink); line-height: 1.2; font-weight: 500; margin-top: 52px; }
.gh-content h2 { font-size: 30px; }
.gh-content h3 { font-size: 24px; }
.has-chapters .gh-content h2 { counter-increment: chap; }
.has-chapters .gh-content { counter-reset: chap; }
.has-chapters .gh-content h2::before { content: "Chapter " counter(chap, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--accent); margin-bottom: 8px; }
.gh-content a { color: var(--accent); text-underline-offset: 3px; }
.gh-content strong { font-weight: 600; color: var(--ink); }
.gh-content blockquote:not(.kg-blockquote-alt) { margin-left: 0; padding: 8px 0 8px 28px; border-left: 2px solid var(--accent); font-size: 28px; line-height: 1.4; font-style: italic; color: var(--soft); }
.gh-content blockquote.kg-blockquote-alt { text-align: center; font-size: 30px; line-height: 1.4; font-style: italic; color: var(--soft); padding: 0 24px; }
.gh-content ul, .gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: 8px; }
.gh-content hr { border: 0; height: 1px; background: var(--line); margin: 56px 0; }
.gh-content code { font-family: var(--mono); font-size: .8em; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.gh-content pre { font-family: var(--mono); font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; overflow-x: auto; }
.gh-content pre code { background: none; border: 0; padding: 0; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content img { border-radius: 10px; }

/* Required Koenig width classes */
.kg-width-wide { position: relative; width: min(100vw - 48px, var(--wide)); margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }

/* End of post ------------------------------------------------------------ */
.end-of-post { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.next-save { padding: 24px 28px; counter-increment: none; }
.next-save .slot-id { color: var(--muted); }
.next-save .slot-title { font-size: 28px; line-height: 1.2; }
.comments { margin-top: 64px; }
.article + .subscribe { padding-top: 32px; }

/* Pause menu (About) ---------------------------------------------------- */
.pause { display: flex; flex-wrap: wrap; gap: 64px; padding-top: 96px; padding-bottom: 120px; }
.pause-menu { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 16px; }
.pause-menu a { padding: 12px 0; color: var(--soft); text-decoration: none; }
.pause-menu a:hover, .pause-menu a.is-current { color: var(--accent); }
.pause-title { margin: 0 0 20px; font-family: var(--serif); font-size: 44px; font-weight: 400; display: flex; align-items: baseline; gap: 14px; }
.pause-mark { font-size: 16px; letter-spacing: 2px; }
.pause-quit { padding: 12px 0; color: var(--muted); }
.pause-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.pause-content { flex: 999 1 480px; min-width: 0; }
.pause-content .gh-content { padding-top: 24px; }
.pause-content .gh-content > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; font-weight: inherit; }
.player-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* 404 -------------------------------------------------------------------- */
.not-found { display: flex; flex-direction: column; gap: 24px; padding-top: 120px; padding-bottom: 140px; }
.not-found .slot-empty { margin-bottom: 8px; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.mono-link { font-family: var(--mono); font-size: 15px; color: var(--soft); text-decoration: none; padding: 14px 4px; }
.mono-link:hover { color: var(--accent); }

/* Footer ----------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 36px; padding-bottom: 36px; font-size: 14px; color: var(--muted); }
.footer-line { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--soft); }
.controller-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--mono); font-size: 13px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .btn-glyph { width: 20px; height: 20px; font-size: 11px; }
.footer-meta { font-family: var(--mono); font-size: 13px; }
.footer-meta a { color: var(--muted); }

/* Toast ------------------------------------------------------------------ */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: min(380px, calc(100vw - 48px)); background: var(--sub-bg); color: var(--sub-ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 12px 32px rgba(0, 0, 0, .18), var(--glow); transform: translateY(16px); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.toast[hidden] { display: none; }
.toast.is-visible { opacity: 1; transform: none; }
.toast-icon { color: var(--amber); flex: none; margin-top: 2px; }
.toast-text { display: flex; flex-direction: column; gap: 6px; }
.toast-title { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--amber); }
.toast-body { font-family: var(--serif); font-size: 18px; line-height: 1.4; }
.toast-note { font-size: 13px; color: var(--sub-soft); }

/* Small screens ---------------------------------------------------------- */
@media (max-width: 640px) {
    .header-inner { padding-top: 20px; padding-bottom: 20px; }
    .hero { padding-top: 64px; padding-bottom: 56px; }
    .slot { padding: 22px 20px; }
    .slot-empty { padding: 20px; }
    .subscribe-box { padding: 28px 22px; }
    .gh-content { font-size: 19px; }
    .gh-content > p:first-of-type::first-letter { font-size: 68px; }
    .pause { padding-top: 56px; gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}