:root { --bg:#12151a; --fg:#e6e6e6; --muted:#8a93a0; --accent:#d9822b; --card:#1b2027; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.5 Georgia, "Times New Roman", serif; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 1rem; }
header h1 a { color: var(--accent); text-decoration: none; letter-spacing: .02em; }
.tagline, footer p, .meta { color: var(--muted); font-size: .85rem; }
.card { background: var(--card); border-left: 3px solid var(--muted);
        padding: .8rem 1rem; margin-bottom: .8rem; border-radius: 4px; }
.card.tier-1 { border-left-color: var(--accent); }
.card.tier-2 { border-left-color: #b0692a; }
.card h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.card h2 a { color: var(--fg); text-decoration: none; }
.card h2 a:hover { color: var(--accent); }
.badge { border: 1px solid var(--muted); border-radius: 3px; padding: 0 .3em;
         font-size: .75rem; }
.chip { display:inline-block; background:#242b34; color:var(--muted);
        border-radius: 10px; padding: 0 .6em; margin-right: .3em;
        font-size: .78rem; text-decoration: none; }
.chip.theater { background:#2a2431; }
.card .lead { margin: .4rem 0; }
.brief-teaser { background: var(--card); border: 1px solid var(--accent);
                border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.brief-teaser h2 a, .more { color: var(--accent); text-decoration: none; }
.brief h3 { margin-bottom: .2rem; }
.cite { color: var(--accent); text-decoration: none; font-size: .8rem; }
nav { font-size: .85rem; margin-top: .3rem; }
nav a { color: var(--fg); text-decoration: none; }
nav a:hover { color: var(--accent); }
#legend p { margin: .3em 0; }
.legend-swatches { display: flex; flex-direction: column; gap: .3em; margin-bottom: .3em; }
.legend-row { display: inline-flex; align-items: center; gap: .4em; margin: 0; }
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 2px;
          background: var(--accent); margin-right: .2em; }
.swatch.unconfirmed { background: #242b34; opacity: 1;
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(217,130,43,.55) 3px 4.5px); }
.map-popup h3 { margin: 0 0 .2rem; font-size: 1rem; }
.map-popup .downgrade { color: var(--muted); font-size: .8rem; font-style: italic; }
.map-popup ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.map-popup li { margin-bottom: .3rem; font-size: .85rem; }