/* ============================================================================
   samo.kroslak.sk — design system
   ----------------------------------------------------------------------------
   A quiet codex. Light "drafting" paper (pale blue + graph grid), Inter Tight
   for display + body, JetBrains Mono for captions and labels. EMBER is the one
   accent. Frozen design choices — drafting surface, light theme, compact
   density — are baked in, not toggleable. See design_handoff_samo_site/.
   ============================================================================ */

:root {
    /* ── Brand mark — six tokens, shared with Demerzel, no additions ── */
    --samo-sun:   oklch(0.78 0.15 60);     /* #E5B45A — outer ring of the mark */
    --samo-ember: oklch(0.62 0.20 30);     /* #C04A1A — middle ring · accent   */
    --samo-deep:  oklch(0.32 0.13 280);    /* #3F2A8E — inner ring             */
    --samo-void:  oklch(0.10 0.015 260);   /* #13151D — core                   */
    --samo-paper: oklch(0.97 0.005 80);    /* #F8F5EE — light backgrounds      */
    --samo-ink:   oklch(0.16 0.012 250);   /* #1F232E — foreground text        */

    /* ── Surface (frozen to "drafting") ── */
    --bg:       oklch(0.945 0.012 230);    /* pale drafting blue */
    --bg-panel: oklch(0.975 0.006 230);    /* faintly raised card surface */
    --fg:       var(--samo-ink);
    --muted:    color-mix(in oklch, var(--fg) 52%, transparent);
    --faint:    color-mix(in oklch, var(--fg) 30%, transparent);
    --line:     color-mix(in oklch, var(--fg) 14%, transparent);
    --hairline: color-mix(in oklch, var(--fg) 8%, transparent);

    --ss-accent:      #C04A1A;             /* EMBER — links, state, numbers */
    --ss-accent-tint: color-mix(in oklch, var(--ss-accent) 6%, transparent);

    /* ── Type ── */
    --font-display: "Inter Tight", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Layout ── */
    --page-w: 880px;
    --pad-x:  48px;

    /* ── Density (frozen to "compact") ── */
    --row-py: 10px;
    --gap:    10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Body chrome — drafting-blue surface + the faint graph-grid pattern,
   fixed-attachment so it reads as paper the content rests on. */
body {
    background-color: var(--bg);
    background-image:
        linear-gradient(to right,  color-mix(in oklch, var(--fg) 7%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in oklch, var(--fg) 7%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    background-attachment: fixed;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ss-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
em, i { font-style: italic; }
code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { max-width: 100%; height: auto; }
::selection { background: color-mix(in oklch, var(--ss-accent) 22%, transparent); }

/* ============================================================================
   Shell — header / main / footer
   ============================================================================ */
.ss-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
.ss-main {
    width: 100%;
    max-width: var(--page-w);
    margin: 0 auto;
    padding: 56px var(--pad-x) 96px;
}

/* ── Header ── */
.ss-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 32px;
    padding: 16px var(--pad-x);
    border-bottom: 1px solid var(--line);
    max-width: calc(var(--page-w) + var(--pad-x) * 2);
    margin: 0 auto;
    width: 100%;
}
.ss-lockup { display: flex; align-items: center; gap: 10px; }
.ss-lockup:hover { text-decoration: none; }
.ss-word {
    font-size: 16px; font-weight: 500;
    letter-spacing: -0.04em; color: var(--fg);
}
.samo-mark { display: block; line-height: 0; }

.ss-nav { display: flex; gap: 22px; justify-self: center; }
.ss-nav-link {
    font-size: 14px; letter-spacing: -0.01em;
    color: var(--muted); padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.ss-nav-link:hover { color: var(--fg); text-decoration: none; }
.ss-nav-link.is-active { color: var(--fg); border-bottom-color: var(--ss-accent); }

.ss-cap {
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.16em; color: var(--muted);
    text-transform: uppercase;
}

/* ── Footer ── */
.ss-footer {
    border-top: 1px solid var(--line);
    max-width: calc(var(--page-w) + var(--pad-x) * 2);
    margin: 0 auto;
    width: 100%;
    padding: 20px var(--pad-x) 26px;
    display: flex; flex-direction: column; gap: 12px;
}
.ss-foot-nav {
    display: flex; flex-wrap: wrap; gap: 18px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.ss-foot-nav a { color: var(--muted); }
.ss-foot-nav a:hover { color: var(--ss-accent); text-decoration: none; }
.ss-foot-meta {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.ss-foot-meta a { color: var(--muted); }
.ss-foot-meta a:hover { color: var(--ss-accent); text-decoration: none; }

/* ============================================================================
   Home
   ============================================================================ */
.ss-home { display: flex; flex-direction: column; gap: 64px; }

.ss-hero {
    display: grid; grid-template-columns: auto 1fr;
    gap: 56px; align-items: start; padding-top: 24px;
}
.ss-hero-mark { line-height: 0; }
.ss-hero-text { display: flex; flex-direction: column; gap: 8px; max-width: 540px; }
.ss-meta {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 4px;
}
.ss-hero-name {
    margin: 0; font-size: 52px; font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.0;
}
.ss-hero-loc {
    font-style: italic; font-size: 26px; color: var(--muted);
    letter-spacing: -0.01em; margin-bottom: 12px;
}
.ss-hero-lead {
    margin: 0; font-size: 17px; line-height: 1.55;
    max-width: 460px; text-wrap: pretty;
}

.ss-quick {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.ss-quick-card {
    display: flex; flex-direction: column; gap: 6px;
    text-align: left; padding: 24px 28px 28px;
    border-right: 1px solid var(--hairline);
    transition: background-color .15s ease;
}
.ss-quick-card:last-child { border-right: 0; }
.ss-quick-card:hover { background: var(--ss-accent-tint); text-decoration: none; }
.ss-quick-num {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.16em; color: var(--ss-accent);
}
.ss-quick-label {
    font-size: 28px; font-weight: 500;
    letter-spacing: -0.02em; margin-top: 2px; color: var(--fg);
}
.ss-quick-cap {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;
}

.ss-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ss-now { display: flex; flex-direction: column; gap: 4px; }
.ss-now-cap {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 6px;
}
.ss-now-title { font-size: 22px; letter-spacing: -0.015em; }
.ss-now-meta {
    font-size: 13px; color: var(--muted);
    font-family: var(--font-mono); letter-spacing: 0.04em;
}
.ss-now-empty { font-size: 15px; color: var(--faint); font-style: italic; }

/* ============================================================================
   List pages — section head + catalog rows
   ============================================================================ */
.ss-page { display: flex; flex-direction: column; gap: 32px; }

.ss-sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    padding-top: 12px; padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.ss-sec-num {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; color: var(--ss-accent);
    text-transform: uppercase; margin-bottom: 10px;
}
.ss-sec-title {
    margin: 0; font-size: 44px; font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.0;
}
.ss-sec-cap {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; color: var(--muted);
    text-transform: uppercase; margin-top: 10px;
}
.ss-sec-count {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; color: var(--muted);
    text-transform: uppercase; white-space: nowrap;
}

.ss-cols {
    display: grid; grid-template-columns: 38px 1fr 150px;
    gap: 20px; padding: 0 0 8px;
    border-bottom: 1px solid var(--hairline);
}
.ss-col-h {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.18em; color: var(--faint);
    text-transform: uppercase;
}
.ss-col-h.ss-col-title  { grid-column: 2; }
.ss-col-h.ss-col-status { grid-column: 3; text-align: right; }

.ss-list { display: flex; flex-direction: column; }
.ss-row {
    display: grid; grid-template-columns: 38px 1fr 150px;
    gap: 20px; align-items: baseline;
    padding: var(--row-py) 0;
    border-bottom: 1px solid var(--hairline);
    transition: background-color .12s ease;
    color: var(--fg);
}
a.ss-row { color: var(--fg); }
a.ss-row:hover { text-decoration: none; }
.ss-row:hover { background: color-mix(in oklch, var(--ss-accent) 5%, transparent); }
.ss-row-num {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--faint); letter-spacing: 0.1em;
}
.ss-row-main { min-width: 0; }
.ss-row-title { font-size: 18px; letter-spacing: -0.01em; }
a.ss-row:hover .ss-row-title em { color: var(--ss-accent); }
.ss-row-meta { color: var(--muted); font-size: 14px; font-style: normal; }
.ss-row-note {
    font-size: 13px; color: var(--muted); margin-top: 4px;
    font-style: italic; max-width: 540px; text-wrap: pretty;
}
.ss-row-status {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.12em; color: var(--muted);
    text-transform: uppercase; text-align: right; white-space: nowrap;
}
.ss-row-status.is-highlight { color: var(--ss-accent); }

.ss-empty {
    color: var(--muted); font-style: italic;
    padding: 28px 0;
}

/* ============================================================================
   Prose — markdown bodies (now notes, blog articles, book reviews)
   ============================================================================ */
.ss-prose, .article-body { font-size: 16px; line-height: 1.65; max-width: 620px; }
.ss-prose > :first-child, .article-body > :first-child { margin-top: 0; }
.ss-prose p, .article-body p { margin: 0 0 1em; text-wrap: pretty; }
.ss-prose h2, .article-body h2 {
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    margin: 1.8em 0 0.5em;
}
.ss-prose h3, .article-body h3 {
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    margin: 1.5em 0 0.4em;
}
.ss-prose ul, .ss-prose ol,
.article-body ul, .article-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.ss-prose li, .article-body li { margin: 0.2em 0; }
.ss-prose blockquote, .article-body blockquote {
    margin: 1em 0; padding: 2px 0 2px 16px;
    border-left: 2px solid var(--ss-accent);
    color: var(--muted); font-style: italic;
}
.ss-prose hr, .article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.ss-prose img, .article-body img { border: 1px solid var(--line); }
.ss-prose a, .article-body a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   Generic page bits — section labels, captions, pills
   ============================================================================ */
.dossier, .ss-label {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ss-accent); margin: 0 0 10px;
}
.muted, .ss-muted {
    color: var(--muted); font-size: 13px;
    font-family: var(--font-mono); letter-spacing: 0.02em;
}
.muted a { color: var(--ss-accent); }
.tagline {
    color: var(--muted); font-style: italic;
    font-size: 17px; max-width: 560px; line-height: 1.5;
}

.pill {
    display: inline-block; padding: 2px 8px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: 2px;
    color: var(--muted); line-height: 1.6; white-space: nowrap;
}
.pill.active, .pill.public { color: var(--ss-accent); border-color: var(--ss-accent); }
.pill.kind-book   { color: var(--samo-deep);  border-color: color-mix(in oklch, var(--samo-deep) 40%, transparent); }
.pill.kind-tech   { color: var(--samo-deep);  border-color: color-mix(in oklch, var(--samo-deep) 40%, transparent); }
.pill.kind-essay  { color: var(--ss-accent);  border-color: var(--ss-accent); }
.pill.kind-roundup{ color: var(--muted); }

/* ============================================================================
   Legacy list — blog index, links index, "similar" lists, recommend page.
   The .book grid is re-cast as a catalog row so these pages read codex
   without per-template rewrites.
   ============================================================================ */
.book-list { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: bookrow; }
.book {
    counter-increment: bookrow;
    display: grid; grid-template-columns: 38px 1fr auto;
    gap: 6px 20px; align-items: baseline;
    padding: var(--row-py) 0;
    border-bottom: 1px solid var(--hairline);
}
.book::before {
    content: counter(bookrow, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--faint); letter-spacing: 0.1em;
}
.book .title, .book a.title { font-size: 18px; letter-spacing: -0.01em; color: var(--fg); }
.book a.title:hover { color: var(--ss-accent); text-decoration: none; }
.book .meta {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; color: var(--muted);
    text-transform: uppercase; text-align: right; white-space: nowrap;
}
.book .title-cell { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.book .excerpt, .book .commentary {
    grid-column: 2 / -1; margin: 0;
    font-size: 13px; font-style: italic; color: var(--muted);
    font-family: var(--font-display); letter-spacing: 0;
    text-transform: none; text-align: left;
}
.book .rating { color: var(--ss-accent); }

/* ============================================================================
   Cards — /now snapshot panels, /about data totals
   ============================================================================ */
.dashboard {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 32px;
}
.card {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 20px;
}
.card .dossier { margin-bottom: 12px; }
.snap-list { list-style: none; padding: 0; margin: 0; }
.snap {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.snap:last-child { border-bottom: 0; }
.snap .title { font-size: 15px; color: var(--fg); }
.snap .meta {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: 0.04em;
}
.snap .pill { margin-left: auto; }

.data-totals { list-style: none; padding: 0; margin: 24px 0; }
.data-totals li {
    display: flex; gap: 12px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono); font-size: 13px;
}
.data-totals li:last-child { border-bottom: 0; }
.data-totals span { color: var(--ss-accent); font-weight: 500; min-width: 4ch; }

/* ============================================================================
   Book detail — cover floats beside the review
   ============================================================================ */
.book-detail-cover {
    float: right; width: 168px;
    margin: 4px 0 20px 28px;
    border: 1px solid var(--line); border-radius: 2px;
}

/* ============================================================================
   /map — taste plot
   ============================================================================ */
.map-section { margin-top: 28px; }
.map-canvas {
    width: 100%; height: 620px;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--bg-panel);
}
.map-legend {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.map-legend .dot {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.map-legend .dot-book   { background: var(--samo-deep); }
.map-legend .dot-game   { background: var(--samo-sun); }
.map-legend .dot-active { background: var(--ss-accent); }
.sep { color: var(--faint); }

/* ============================================================================
   /boardgames — picker, pick cards, shelf table, detail
   ============================================================================ */
.boardgames h2 {
    font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
    margin: 24px 0 16px;
}
.bg-picker-form {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
    margin: 20px 0 24px; padding: 20px;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--bg-panel);
}
.bg-picker-form label { display: flex; flex-direction: column; }
.bg-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
}
.bg-picker-form select {
    background: transparent; color: var(--fg);
    border: 0; border-bottom: 1px solid var(--ss-accent);
    padding: 6px 0; font-family: var(--font-display); font-size: 15px;
    min-width: 150px;
}
.bg-picker-form select:focus { outline: none; }
.bg-pick-btn, .bg-reroll-btn {
    border: 1px solid var(--ss-accent); color: var(--ss-accent);
    padding: 7px 16px; border-radius: 2px;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.bg-pick-btn:hover, .bg-reroll-btn:hover { background: var(--ss-accent-tint); }
.bg-helper { color: var(--muted); font-style: italic; margin: 16px 0; }
.bg-banner {
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.06em; color: var(--ss-accent);
    text-align: center; margin: 20px 0;
}
.bg-banner-fallback { font-style: italic; color: var(--muted); }
.bg-picks { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.bg-pick {
    display: flex; gap: 20px; padding: 16px;
    border: 1px solid var(--line); border-radius: 3px;
    background: var(--bg-panel);
}
.bg-pick-cover-link { flex-shrink: 0; }
.bg-pick-cover { width: 150px; height: 150px; object-fit: cover; display: block; border-radius: 2px; }
.bg-pick-cover-fallback {
    display: inline-block; width: 150px; height: 150px;
    background: var(--bg); border: 1px dashed var(--line);
    color: var(--faint); text-align: center; line-height: 150px;
}
.bg-pick-text { flex: 1; min-width: 0; }
.bg-pick-title { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.bg-pick-title a { color: var(--fg); }
.bg-pick-title a:hover { color: var(--ss-accent); text-decoration: none; }
.bg-pick-star { color: var(--ss-accent); margin-left: 6px; }
.bg-pick-meta { color: var(--muted); margin: 6px 0; font-size: 14px; }
.bg-pick-stats {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ss-accent); margin: 6px 0; letter-spacing: 0.04em;
}
.bg-pick-blurb { color: var(--fg); margin: 10px 0 0; font-size: 14px; }
.bg-pick-more { margin-left: 6px; white-space: nowrap; }
.bg-shelf-link { margin-top: 28px; text-align: center; font-family: var(--font-mono); font-size: 12px; }
.bg-detail-cover { max-width: 260px; display: block; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 2px; }
.bg-detail-meta { color: var(--muted); }
.bg-detail-stats { font-family: var(--font-mono); font-size: 13px; color: var(--ss-accent); margin: 12px 0 20px; }
.bg-detail-blurb { margin: 20px 0; max-width: 620px; }
.bg-walkthroughs {
    margin: 28px 0; padding: 16px 20px;
    border-left: 2px solid var(--ss-accent); background: var(--ss-accent-tint);
}
.bg-walkthroughs h2 {
    margin: 0 0 10px; font-size: 13px; color: var(--ss-accent);
    text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono);
}
.bg-walkthrough-list { list-style: none; padding: 0; margin: 0; }
.bg-walkthrough-list li { margin: 6px 0; font-family: var(--font-mono); font-size: 13px; }
.bg-detail-facets { margin: 20px 0; }
.bg-pills { margin: 8px 0; }
.bg-pill-label {
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted); margin-right: 8px;
}
.bg-pill { font-family: var(--font-mono); font-size: 12px; color: var(--ss-accent); margin-right: 12px; }
.bg-similar { margin: 28px 0; }
.bg-similar-list { padding-left: 20px; }
.bg-similar-list li { margin: 6px 0; }
.bg-detail-footer { margin-top: 28px; }
.bg-shelf-controls { margin: 16px 0 20px; }
.bg-tag-banner { margin-left: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.bg-shelf-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.bg-shelf-table th, .bg-shelf-table td {
    text-align: left; padding: 8px 12px;
    border-bottom: 1px solid var(--hairline);
}
.bg-shelf-table th {
    font-family: var(--font-mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--muted); border-bottom: 1px solid var(--line);
}
.bg-shelf-table td a { color: var(--fg); }
.bg-shelf-table td a:hover { color: var(--ss-accent); text-decoration: none; }
.bg-shelf-empty { margin: 28px 0; text-align: center; color: var(--muted); }

/* ============================================================================
   Recommend chips (legacy /books/recommend support)
   ============================================================================ */
.chip-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
    display: inline-block; padding: 4px 10px;
    border: 1px solid var(--line); border-radius: 2px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.chip:hover { border-color: var(--ss-accent); color: var(--ss-accent); text-decoration: none; }
.chip.is-on { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
.chip.is-disabled { color: var(--faint); pointer-events: none; }

/* ============================================================================
   Headings — global defaults. The .ss-* pages override with their own classes
   (.ss-hero-name, .ss-sec-title); these carry the legacy templates.
   ============================================================================ */
h1 {
    font-size: 44px; font-weight: 500;
    letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 14px;
}
h2 {
    font-size: 22px; font-weight: 500;
    letter-spacing: -0.02em; margin: 1.6em 0 0.5em;
}
h3 {
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.01em; margin: 1.4em 0 0.4em;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 760px) {
    :root { --pad-x: 22px; }
    .ss-header { grid-template-columns: auto 1fr; column-gap: 14px; }
    .ss-cap { display: none; }
    .ss-nav { justify-self: end; gap: 14px; }
    .ss-main { padding-top: 36px; padding-bottom: 64px; }
    .ss-hero { grid-template-columns: 1fr; gap: 24px; }
    .ss-hero-name { font-size: 40px; }
    .ss-quick { grid-template-columns: 1fr; }
    .ss-quick-card { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .ss-now-grid { grid-template-columns: 1fr; }
    .ss-sec-title { font-size: 34px; }
    .ss-cols, .ss-row { grid-template-columns: 28px 1fr 104px; gap: 12px; }
    .book { grid-template-columns: 28px 1fr auto; gap: 4px 12px; }
    .bg-pick { flex-direction: column; }
    .bg-pick-cover, .bg-pick-cover-fallback { width: 100%; height: auto; line-height: normal; }
    .book-detail-cover { width: 120px; margin-left: 16px; }
}

/* ============================================================================
   /books — cover-grid library
   ============================================================================ */
.book-controls {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin: 24px 0 8px; padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}
.book-search {
    flex: 1; min-width: 220px;
    background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: 2px;
    color: var(--fg);
    font-family: var(--font-mono); font-size: 13px;
    padding: 8px 12px;
}
.book-search::placeholder { color: var(--faint); }
.book-search:focus { outline: none; border-color: var(--ss-accent); }
.sort-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--faint); margin-right: 2px;
}

.library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 28px 18px;
    margin: 28px 0 32px;
}
.lib-card { display: flex; flex-direction: column; }
.lib-card:hover { text-decoration: none; }
.lib-cover-wrap { position: relative; display: block; }
.lib-cover {
    display: block; width: 100%;
    aspect-ratio: 2 / 3; object-fit: cover;
    background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: 2px;
    transition: border-color .15s ease, transform .15s ease;
}
.lib-card:hover .lib-cover { border-color: var(--ss-accent); transform: translateY(-3px); }
.lib-cover--blank {
    display: flex; flex-direction: column;
    padding: 16px 14px;
}
.lib-cover--blank .bc-title {
    font-size: 16px; font-weight: 500; line-height: 1.15;
    letter-spacing: -0.01em; color: var(--fg);
}
.lib-cover--blank .bc-author {
    margin-top: 8px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.04em; color: var(--muted);
}
.lib-rating {
    position: absolute; top: 8px; right: 8px;
    background: var(--ss-accent); color: #fff;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.02em; padding: 2px 6px; border-radius: 2px;
}
.lib-title {
    display: block; margin-top: 10px;
    font-size: 15px; line-height: 1.3; color: var(--fg);
}
.lib-card:hover .lib-title { color: var(--ss-accent); }
.lib-sub {
    display: block; margin-top: 2px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.02em; color: var(--muted);
}
p.placeholder { color: var(--muted); font-style: italic; padding: 24px 0; }
section.recommend-row {
    margin-top: 36px; padding-top: 24px;
    border-top: 1px solid var(--line);
}

/* ============================================================================
   /games — dad-mode tier cheatsheet
   ============================================================================ */
.tier { margin: 44px 0; }
.tier-header {
    display: flex; align-items: baseline; gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px; margin-bottom: 14px;
}
.tier-header h2 {
    margin: 0;
    font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
}
.tier-header h2 .num {
    font-family: var(--font-mono); font-size: 15px;
    color: var(--ss-accent); margin-right: 10px; letter-spacing: 0.04em;
}
.tier-pill {
    margin-left: auto;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ss-accent);
    border: 1px solid var(--ss-accent); border-radius: 2px;
    padding: 3px 8px; white-space: nowrap;
}
.tier-purpose {
    margin: 0 0 20px;
    color: var(--muted); font-style: italic;
    font-size: 15px; max-width: 640px;
}
.featured-list { list-style: none; padding: 0; margin: 20px 0; }
.featured {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
}
.featured.is-active {
    background: var(--ss-accent-tint);
    border-left: 2px solid var(--ss-accent);
    padding-left: 16px;
}
.featured-thumb { flex: 0 0 168px; display: block; }
.featured-thumb img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line); border-radius: 2px;
}
.featured-body { flex: 1; min-width: 0; }
.featured-title {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
    color: var(--fg);
}
.featured-title .sub {
    font-size: 13px; font-weight: 400; font-style: italic;
    color: var(--muted);
}
.featured-blurb { margin: 10px 0 0; font-size: 14px; color: var(--fg); }
.featured-blurb strong { color: var(--ss-accent); font-weight: 600; }
.featured-meta {
    display: inline-block; margin-right: 8px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ss-accent);
    border: 1px solid var(--ss-accent); border-radius: 2px;
    padding: 2px 6px;
}
.tile-grid-label {
    margin: 28px 0 12px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ss-accent);
}
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; margin-top: 16px;
}
.tile {
    display: block;
    border: 1px solid var(--line); border-radius: 3px;
    overflow: hidden; background: var(--bg-panel);
    transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { border-color: var(--ss-accent); transform: translateY(-1px); text-decoration: none; }
.tile.is-bench { opacity: 0.72; }
.tile.is-bench:hover { opacity: 1; }
.tile-img { display: block; width: 100%; height: auto; }
.tile-name {
    padding: 8px 12px;
    font-size: 14px; color: var(--fg);
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .library {
        grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
        gap: 20px 12px;
    }
    .featured { flex-direction: column; gap: 12px; }
    .featured-thumb { flex: 0 0 auto; max-width: 240px; }
    .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.tile-img--placeholder,
.featured-thumb--placeholder,
.rec-img--placeholder {
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: .5rem;
    background: linear-gradient(135deg, var(--samo-deep, #1a1a2e), var(--samo-void, #0f0f1a));
    color: var(--samo-paper, #e8e8ea); font-size: .8rem; line-height: 1.2;
    min-height: 64px; border-radius: 6px;
}

section.recs { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.recs-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.rec-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .12s ease; }
.rec-tile:hover { transform: translateY(-1px); text-decoration: none; }
.rec-img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; }
.rec-name { font-weight: 600; margin-top: .35rem; font-size: .85rem; }
.rec-tag { font-size: .75rem; opacity: .7; }
@media (max-width: 720px) { .recs-strip { grid-template-columns: repeat(3, 1fr); } }