/* "Uncanny" Theme — 1990s mutant-comic newsprint.
*
* A trademark-safe homage built entirely from the generic visual language of
* comics (halftone, panels, caption boxes, a blue-and-gold palette). No Marvel
* marks, character names, or "X-Men" strings anywhere (see REDESIGN-PLAN.md
* Phase 3). Every rule is scoped under `body.theme-uncanny`.
*
* Uncanny is the served default, so its display faces (Bangers, Archivo Black) ship
* in the base Google Fonts alongside Inter + JetBrains Mono.
*/
body.theme-uncanny {
--paper: #F7F1E1; /* aged newsprint page */
--ink: #14142B; /* panel borders & body text */
--navy: #1B2A5B; /* uniform blue — masthead band, panel fills */
--gold: #FFD91A; /* caption boxes, highlights — fills only */
--danger: #C21E1E; /* alert badges, active states — AA on paper (5.3:1) */
--cerebro: #6E2E9E; /* visited links, secondary accents */
--panel: #FFFFFF; /* white panel fills over the halftone page */
--ink-70: #4A4A63; /* muted ink for secondary text (AA on white/paper) */
color: var(--ink);
background-color: var(--paper);
/* Pure-CSS Ben-Day dots — no image asset. */
background-image: radial-gradient(rgba(27, 42, 91, 0.13) 1.1px, transparent 1.3px);
background-size: 7px 7px;
font-family: 'Inter', system-ui, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
body:not(.theme-uncanny) .uncanny-only { display: none !important; }
/* --- Comic cover chrome (homepage): the masthead band --- */
body.theme-uncanny .comic-masthead {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--navy);
border: 3px solid var(--ink);
box-shadow: 6px 6px 0 var(--ink);
padding: 12px 18px;
margin: 4px 0 26px;
}
body.theme-uncanny .cm-title {
flex: 1 1 auto;
text-align: center;
font-family: 'Bangers', 'Archivo Black', sans-serif;
font-size: clamp(1.6rem, 4.5vw, 2.7rem);
letter-spacing: 2px;
line-height: 1;
color: var(--gold);
-webkit-text-stroke: 1px var(--ink);
}
body.theme-uncanny .cm-price {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Archivo Black', 'Arial Black', sans-serif;
font-size: 0.78rem;
color: var(--navy);
background: var(--gold);
border: 2px solid var(--ink);
border-radius: 50%;
}
body.theme-uncanny .cm-issue {
flex: 0 0 auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
}
body.theme-uncanny .cm-stamp {
position: absolute;
right: 14px;
bottom: -13px;
font-family: 'Archivo Black', 'Arial Black', sans-serif;
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--danger);
background: var(--paper);
border: 2px solid var(--danger);
padding: 2px 7px;
transform: rotate(-4deg);
}
@media screen and (max-width: 600px) {
body.theme-uncanny .cm-price,
body.theme-uncanny .cm-issue { display: none; }
body.theme-uncanny .cm-stamp { font-size: 0.5rem; right: 8px; }
/* Drop the ink outline at the title's smallest size (clamp bottoms out at
1.6rem here). A 1px stroke is proportionally heaviest on the smallest
letterforms, where it thickens the gold rather than defining it — the gold
fill on navy is 9.94:1 on its own and needs no help. */
body.theme-uncanny .cm-title { -webkit-text-stroke: 0; }
}
/* --- Narration caption: the yellow box a comic uses to set the scene. Occupies
the slot the retro