:root {
    --paper: #f4efe4;
    --paper-2: #ebe4d4;
    --ink: #1f1a16;
    --muted: #6e6258;
    --line: #d7cbb8;
    --copper: #c45c26;
    --teal: #2a6f6f;
    --navy: #3d4f8c;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif;
    --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --measure: 40rem;
    --wrap: 72rem;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }
a { color: var(--teal); text-underline-offset: 0.12em; }
a:hover { color: var(--copper); }
img, svg { max-width: 100%; height: auto; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.skip {
    position: absolute; left: -999px; top: 0;
}
.skip:focus { left: 1rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.site-head {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 80%, white);
    position: sticky; top: 0; z-index: 5;
}
.head-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.85rem 0;
    flex-wrap: wrap;
}
.brand {
    display: flex; align-items: center; gap: 0.65rem;
    text-decoration: none; color: inherit;
}
.brand-mark {
    width: 36px; height: 36px; flex: none;
    border-radius: 0.45rem;
}
.wordmark {
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.wordmark em { font-style: italic; color: var(--copper); font-weight: 500; }
.head-nav { display: flex; align-items: center; gap: 1.1rem; }
.head-nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.head-nav a:hover { color: var(--copper); }
.quiet-search input {
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font: inherit;
    width: 11rem;
}
.quiet-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

.kicker {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--copper);
    font-weight: 600;
    margin: 0 0 0.4rem;
}
.deck { font-size: 1.15rem; color: var(--muted); margin: 0.4rem 0 1rem; }

.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.2rem;
    padding: 2.4rem 0 1.5rem;
    align-items: center;
}
.hero-figure {
    display: block;
    background: var(--paper-2);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    min-height: 10rem;
}
.hero-figure img { display: block; width: 100%; }
.hero h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; margin: 0 0 0.6rem; font-weight: 600; }
.hero h1 a { color: inherit; text-decoration: none; }
.read-on {
    display: inline-block;
    background: var(--ink);
    color: var(--paper) !important;
    text-decoration: none;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-weight: 600;
}
.read-on:hover { background: var(--copper); }

.invite { color: var(--muted); font-style: italic; margin: 0.5rem auto 1.5rem; max-width: 42rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }
.chip {
    border: 1px solid var(--line);
    background: transparent;
    font: inherit;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink);
}
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.more h2, .continue h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.6rem;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.1rem;
    padding-bottom: 3rem;
}
.starter-links { margin: 0.75rem 0 0; font-style: normal; line-height: 1.55; }
.starter-links a { text-decoration: underline; text-underline-offset: 2px; }

.flagship { margin: 0 auto 2rem; max-width: 52rem; }
.flagship h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.7rem;
    margin: 0 0 0.45rem;
}
.flagship-lead { color: var(--muted); margin: 0 0 1rem; max-width: 42rem; line-height: 1.55; }
.muted-lead { font-size: 0.98rem; }
.series-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.series-list li a {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--paper) 55%, white);
}
.series-list li a:hover { border-color: var(--copper); }
.series-part { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; }
.series-deck { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
    gap: 0.9rem;
}
.pick {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--paper) 55%, white);
}
.pick:hover { border-color: var(--copper); }
.pick img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 0.5rem;
    background: var(--paper-2);
}
.pick-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.pick-deck { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }

.identity-line {
    font-size: 1.05rem;
    color: var(--ink);
    max-width: 42rem;
    margin: 0 auto 0.4rem;
}
.card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.55rem 0.85rem;
    background: color-mix(in srgb, var(--paper) 55%, white);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    text-decoration: none;
    color: inherit;
}
.card img {
    display: block;
    width: 100%;
    border-radius: 0.55rem;
    margin-bottom: 0.35rem;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--paper-2);
}
.card-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.card-deck { color: var(--muted); font-size: 0.92rem; }
.card.is-hidden, .card.is-hero-dup { display: none; }

.article { padding: 2rem 0 3.5rem; max-width: calc(var(--measure) + 8rem); }
.article-head { margin-bottom: 1.4rem; }
.article h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.18;
    margin: 0;
    font-weight: 600;
}
.lead-fig {
    margin: 0 0 1.5rem;
    background: var(--paper-2);
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--line);
}
.lead-fig img, .lead-fig svg { display: block; width: 100%; }

.prose { font-size: 1.05rem; }
.prose h2, .prose h3 {
    font-family: var(--serif);
    font-weight: 600;
    margin-top: 2rem;
}
.prose p { margin: 0.9rem 0; }
.prose figure {
    margin: 1.4rem 0;
    padding: 0.6rem;
    background: var(--paper-2);
    border-radius: 0.8rem;
    border: 1px solid var(--line);
}
.prose figcaption { font-size: 0.88rem; color: var(--muted); padding: 0.35rem 0.2rem 0.1rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose code {
    font-size: 0.9em;
    background: var(--paper-2);
    padding: 0.05em 0.3em;
    border-radius: 0.25em;
}

.continue { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.continue ul { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.continue a {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--paper) 55%, white);
}
.continue img {
    width: 5.5rem; height: 3.4rem;
    object-fit: cover; border-radius: 0.4rem;
    background: var(--paper-2);
}
.search-hits a {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.75rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}
.search-hits img {
    width: 6rem; height: 3.75rem;
    object-fit: cover; border-radius: 0.4rem;
    background: var(--paper-2);
}
.continue a:hover { border-color: var(--copper); }
.cont-title { font-family: var(--serif); font-weight: 600; }
.cont-deck { color: var(--muted); font-size: 0.92rem; }

.search-page { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.search-page input { flex: 1; font: inherit; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.4rem; background: white; }
.search-page button { font: inherit; font-weight: 600; border: 0; background: var(--ink); color: var(--paper); padding: 0.45rem 0.9rem; border-radius: 0.4rem; cursor: pointer; }
.search-hits { list-style: none; padding: 0; display: grid; gap: 0.6rem; }

.site-foot {
    border-top: 1px solid var(--line);
    padding: 1.8rem 0 2.2rem;
    color: var(--muted);
    font-size: 0.92rem;
}
.foot-meta { margin-top: 0.8rem; }
.foot-meta a { color: inherit; }

.ad-slot { margin: 1.5rem 0; min-height: 0; }

/* Cookie consent banner (consent.js) */
.consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(31, 26, 22, 0.08);
}
.consent[hidden] { display: none; }
.consent-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.25rem; padding: 0.9rem 0;
}
.consent-text { margin: 0; max-width: 46rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.consent-actions { display: flex; gap: 0.5rem; flex: none; }
.consent-btn {
    font: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 0.45rem 1.15rem; min-width: 6.5rem;
    border-radius: 999px; border: 1px solid var(--ink); cursor: pointer;
}
.consent-reject { background: transparent; color: var(--ink); }
.consent-reject:hover { border-color: var(--copper); color: var(--copper); }
.consent-accept { background: var(--ink); color: var(--paper); }
.consent-accept:hover { background: var(--copper); border-color: var(--copper); }
.consent-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; padding-top: 1.4rem; }
    .quiet-search input { width: 8rem; }
    /* mobile overflow fix (2026-10-11): nav and search may shrink/wrap instead of pushing past 100vw */
    .head-inner > * { min-width: 0; max-width: 100%; }
    .head-nav { flex-wrap: wrap; row-gap: 0.4rem; }
    .quiet-search { flex: 1 1 5rem; min-width: 0; max-width: 8rem; }
    .quiet-search input { width: 100%; min-width: 0; max-width: 100%; }
    .consent { max-width: 100vw; }
    .consent-inner > * { min-width: 0; max-width: 100%; }
    .consent-actions { flex-wrap: wrap; }
}

.article-head .updated {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  opacity: 0.72;
}

.note-index { padding-left: 1.2rem; line-height: 1.55; }
.note-index li { margin: 0.35rem 0; }

/* ---- code blocks (2026-10-11): styling, copy button, local highlighter js/code.js ---- */
.prose pre {
    margin: 1.2rem 0;
    padding: 0.85rem 1rem;
    background: #fbf7ef;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;
}
.prose pre code {
    font-size: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
    white-space: pre;
    color: var(--ink);
}
.code-wrap { position: relative; margin: 1.2rem 0; }
.code-wrap > pre { margin: 0; }
.code-wrap[data-lang] > pre { padding-top: 1.7rem; }
.code-wrap[data-lang]::before {
    content: attr(data-lang);
    position: absolute; top: 0.35rem; left: 0.75rem;
    font: 600 0.68rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted);
}
.copy-btn {
    position: absolute; top: 0.3rem; right: 0.35rem;
    font: 600 0.72rem/1 var(--sans);
    padding: 0.35rem 0.6rem;
    color: var(--ink); background: var(--paper-2);
    border: 1px solid var(--line); border-radius: 0.4rem;
    cursor: pointer;
}
.copy-btn:hover { border-color: var(--teal); color: var(--teal); }
.copy-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tk-c { color: #6e6258; font-style: italic; }
.tk-s { color: #436236; }
.tk-k { color: #3d4f8c; font-weight: 600; }
.tk-f { color: #9c4318; }
.tk-n { color: #8c4d6b; }

/* ---- reduced motion (2026-10-11) ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* narrow-screen overflow (2026-10-26): wide tables scroll inside the column; long inline code wraps */
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose :not(pre) > code { overflow-wrap: anywhere; }