/* ==========================================================
   SCRYKEEPER — BRAND V1
   Minimal black / ivory / gold
   ========================================================== */

:root {
    --sk-black: #050505;
    --sk-surface: #0b0b0b;
    --sk-surface-2: #111111;
    --sk-border: #252525;

    --sk-white: #f4f1e9;
    --sk-text: #d8d4ca;
    --sk-muted: #8e8a82;

    --sk-gold: #d4af63;
    --sk-gold-soft: #b9934f;
    --sk-gold-light: #f0d18a;

    --sk-radius: 10px;
    --sk-max: 1180px;

    --sk-serif:
        "Iowan Old Style",
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    --sk-sans:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    --sk-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
}


/* ---------- GLOBAL ---------- */

html {
    background: var(--sk-black);
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--sk-black) !important;
    color: var(--sk-text) !important;
    font-family: var(--sk-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page {
    width: min(var(--sk-max), calc(100% - 48px));
    margin: 0 auto;
    background: transparent !important;
}

a {
    color: var(--sk-white);
}

a:hover {
    color: var(--sk-gold-light);
}


/* ---------- BRAND ---------- */

.brand,
.scrykeeper-wordmark {
    color: var(--sk-white) !important;
    font-family: var(--sk-serif);
    font-size: 24px;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
}

.scrykeeper-tagline {
    margin-top: 7px;
    color: var(--sk-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}


/* ---------- NAV ---------- */

.mode-nav,
.scrykeeper-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.mode-nav a,
.scrykeeper-nav a {
    color: var(--sk-muted);
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
    transition:
        color 150ms ease,
        border-color 150ms ease;
}

.mode-nav a:hover,
.scrykeeper-nav a:hover,
.mode-nav a.active,
.scrykeeper-nav a.active {
    color: var(--sk-white);
}

.mode-nav a.active,
.scrykeeper-nav a.active {
    border-bottom: 1px solid var(--sk-gold);
}


/* ---------- HERO ---------- */

.hero,
.reader-header {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero {
    padding-top: 78px !important;
    padding-bottom: 70px !important;
}

.reader-header {
    padding-top: 48px !important;
    padding-bottom: 52px !important;
}

.hero h1,
.reader-header h1 {
    max-width: 760px;
    margin-top: 48px;
    margin-bottom: 24px;
    color: var(--sk-white) !important;
    font-family: var(--sk-serif);
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.035em;
}

.reader-header h1 {
    font-size: clamp(40px, 5vw, 64px);
}

.hero-copy,
.reader-intro {
    max-width: 680px;
    color: var(--sk-text) !important;
    font-size: 18px;
    line-height: 1.65;
}

.reader-eyebrow,
.reader-step {
    color: var(--sk-gold) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase;
}


/* ---------- SEARCH ---------- */

.search,
.search-form {
    max-width: 850px;
    margin-top: 38px !important;
}

.search-wrap,
.reader-search-wrap {
    background: transparent !important;
}

input[type="text"],
.reader-search {
    min-height: 52px;
    box-sizing: border-box;
    background: var(--sk-surface) !important;
    color: var(--sk-white) !important;
    border: 1px solid var(--sk-border) !important;
    border-radius: 7px !important;
    font-family: var(--sk-sans);
    font-size: 15px;
    outline: none;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

input[type="text"]::placeholder,
.reader-search::placeholder {
    color: #66635e !important;
}

input[type="text"]:focus,
.reader-search:focus {
    border-color: var(--sk-gold-soft) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 99, 0.08) !important;
}


/* ---------- BUTTONS ---------- */

button,
.reader-cta,
.reader-share-button,
.share-primary-cta {
    min-height: 48px;
    border-radius: 7px !important;
    font-family: var(--sk-sans) !important;
    font-weight: 650 !important;
    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease;
}

.search button,
.reader-cta,
.share-primary-cta {
    background: var(--sk-gold) !important;
    color: #090806 !important;
    border: 1px solid var(--sk-gold) !important;
}

.search button:hover,
.reader-cta:hover:not(:disabled),
.share-primary-cta:hover {
    background: var(--sk-gold-light) !important;
    border-color: var(--sk-gold-light) !important;
    color: #090806 !important;
    transform: translateY(-1px);
}

.reader-share-button {
    background: transparent !important;
    color: var(--sk-white) !important;
    border: 1px solid var(--sk-border) !important;
}

.reader-share-button:hover {
    border-color: var(--sk-gold-soft) !important;
}

button:disabled,
.reader-cta:disabled {
    background: #151515 !important;
    color: #5f5c57 !important;
    border-color: #222 !important;
    cursor: not-allowed;
    transform: none !important;
}


/* ---------- HINTS / META ---------- */

.search-hint,
.picker-copy,
.results-copy,
.reader-network-note,
.reader-footer,
.reader-message {
    color: var(--sk-muted) !important;
}


/* ---------- CONTENT CARDS ---------- */

.reader-picker,
.reader-results-section,
.share-selected,
.share-results {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-border) !important;
    border-radius: var(--sk-radius) !important;
    box-shadow: none !important;
}

.reader-picker,
.reader-results-section {
    padding: clamp(22px, 4vw, 36px) !important;
}

.reader-picker h2,
.reader-results-section h2,
.share-selected h2,
.share-results h2 {
    color: var(--sk-white) !important;
    font-family: var(--sk-serif);
    font-weight: 400;
}


/* ---------- AUTOCOMPLETE ---------- */

.search-results,
.reader-search-results {
    background: #090909 !important;
    border: 1px solid var(--sk-border) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
}

.search-results *,
.reader-search-results * {
    color: var(--sk-text);
}


/* ---------- SELECTED / RECOMMENDATIONS ---------- */

.selected-stories > *,
.reader-results > *,
.share-seed {
    background: #090909 !important;
    border-color: var(--sk-border) !important;
    box-shadow: none !important;
}

.share-seed {
    color: var(--sk-white) !important;
    text-decoration: none;
}

.share-seed:hover {
    border-color: var(--sk-gold-soft) !important;
}


/* ---------- ASCII KEEPER ---------- */

.keeper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 46px;
    color: var(--sk-gold);
}

.keeper-ascii {
    margin: 0;
    color: var(--sk-gold);
    font-family: var(--sk-mono);
    font-size: 14px;
    line-height: 1.08;
    letter-spacing: 0;
    white-space: pre;
    user-select: none;
}

.keeper-copy {
    max-width: 150px;
    color: var(--sk-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.65;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.keeper-copy strong {
    display: block;
    margin-bottom: 5px;
    color: var(--sk-white);
    font-family: var(--sk-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.12em;
}


/* ---------- FOOTERS ---------- */

.reader-footer {
    margin-top: 48px;
    padding: 30px 0 44px;
    border-top: 1px solid var(--sk-border);
    font-size: 12px;
}


/* ---------- SELECTION COUNT ---------- */

.selection-count {
    color: var(--sk-gold) !important;
    border-color: var(--sk-border) !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

    .page {
        width: min(100% - 28px, var(--sk-max));
    }

    .hero {
        padding-top: 34px !important;
        padding-bottom: 46px !important;
    }

    .reader-header {
        padding-top: 24px !important;
        padding-bottom: 36px !important;
    }

    .brand,
    .scrykeeper-wordmark {
        font-size: 19px;
        letter-spacing: 0.13em !important;
    }

    .mode-nav,
    .scrykeeper-nav {
        gap: 18px;
        flex-wrap: wrap;
    }

    .hero h1,
    .reader-header h1 {
        margin-top: 38px;
        font-size: clamp(39px, 12vw, 56px);
        line-height: 1.02;
    }

    .hero-copy,
    .reader-intro {
        font-size: 16px;
        line-height: 1.6;
    }

    .search,
    .search-form {
        display: block !important;
        width: 100% !important;
    }

    .search-wrap {
        width: 100% !important;
    }

    .search input,
    .search button,
    .reader-search,
    .reader-cta {
        width: 100% !important;
        max-width: none !important;
    }

    .search button {
        margin-top: 10px !important;
    }

    input[type="text"],
    .reader-search {
        min-height: 52px;
        font-size: 16px !important;
    }

    button,
    .reader-cta,
    .reader-share-button,
    .share-primary-cta {
        min-height: 50px;
    }

    .keeper {
        justify-content: center;
        margin-top: 40px;
        padding-top: 28px;
        border-top: 1px solid var(--sk-border);
    }

    .keeper-ascii {
        font-size: 12px;
    }

    .keeper-copy {
        max-width: 130px;
    }

    .reader-picker,
    .reader-results-section {
        padding: 20px !important;
    }
}


@media (max-width: 420px) {

    .page {
        width: calc(100% - 22px);
    }

    .hero h1,
    .reader-header h1 {
        font-size: 40px;
    }

    .keeper {
        gap: 14px;
    }

    .keeper-ascii {
        font-size: 11px;
    }
}


/* ==========================================================
   SCRYKEEPER — SEARCH RESULTS V2
   Black canvas, ivory information, gold interaction
   ========================================================== */

.search-results,
.reader-search-results {
    background: #080808 !important;
    border: 1px solid #252525 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.72) !important;
}

/* Every result row */
.search-results > *,
.reader-search-results > * {
    background: #080808 !important;
    color: #f4f1e9 !important;
    border-color: #1d1d1d !important;
}

/* Remove old gold row backgrounds */
.search-results a,
.search-results button,
.search-results div,
.reader-search-results a,
.reader-search-results button {
    background-color: transparent !important;
}

/* Hover / keyboard highlight */
.search-results > *:hover,
.reader-search-results > *:hover,
.search-results > *.active,
.reader-search-results > *.active {
    background: #11100d !important;
    box-shadow:
        inset 2px 0 0 #d4af63 !important;
}

/* Main story title */
.search-results strong,
.search-results .title,
.reader-search-results strong,
.reader-search-results .title {
    color: #f4f1e9 !important;
}

/* RR ID / secondary text */
.search-results small,
.search-results .meta,
.search-results .subtitle,
.reader-search-results small,
.reader-search-results .meta,
.reader-search-results .subtitle {
    color: #77736c !important;
}

/* Badges */
.search-results .badge,
.search-results .status,
.reader-search-results .badge,
.reader-search-results .status {
    background: #111111 !important;
    color: #d4af63 !important;
    border: 1px solid #493b22 !important;
    box-shadow: none !important;
}

/* Dividers */
.search-results > * + *,
.reader-search-results > * + * {
    border-top: 1px solid #1d1d1d !important;
}


/* Mobile dropdown */
@media (max-width: 760px) {
    .search-results,
    .reader-search-results {
        width: 100% !important;
        max-width: 100% !important;
    }
}



/* ==========================================================
   THE KEEPER — LINE MASCOT V1
   ========================================================== */

.keeper-mark {
    width: 78px;
    flex: 0 0 78px;
    color: #d4af63;
}

.keeper-mark svg {
    display: block;
    width: 100%;
    height: auto;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.keeper-mark .keeper-eye {
    fill: currentColor;
    stroke: none;
}

.keeper-mark .keeper-book {
    fill: rgba(212, 175, 99, 0.05);
}

.keeper {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 44px;
}

.keeper-copy {
    max-width: 150px;
    color: #77736c;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.75;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.keeper-copy strong {
    display: block;
    margin-bottom: 7px;

    color: #f4f1e9;

    font-family:
        "Iowan Old Style",
        "Palatino Linotype",
        Georgia,
        serif;

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.08em;
}


/* Keeper mobile */
@media (max-width: 760px) {

    .keeper {
        justify-content: flex-start;
        gap: 18px;
        margin-top: 34px;
        padding-top: 26px;
        border-top: 1px solid #252525;
    }

    .keeper-mark {
        width: 62px;
        flex-basis: 62px;
    }

    .keeper-copy {
        max-width: 145px;
    }
}