/* Comic language is static first: content never depends on JS for visibility. */
[data-comic-site] { --comic-accent: var(--color-gold-300, #f0c75e); --comic-ink: #08090b; --comic-paper: #f7f1df; }
.comic-ribbon { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem max(1rem, calc((100vw - 72rem)/2)); border-block: 3px solid var(--comic-ink); background: var(--comic-accent); color: var(--comic-ink); font: 800 .66rem/1.5 system-ui,sans-serif; letter-spacing: .14em; }
.comic-ribbon::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: radial-gradient(var(--comic-ink) 1px, transparent 1px) 0 0/6px 6px; transform: translateX(var(--comic-drift, 0px)); }
.comic-ribbon span { position: relative; z-index: 1; }
[data-comic-site]:not([data-comic-admin]) main :is(h1,h2), [data-comic="marker"] { text-decoration-line: underline; text-decoration-color: var(--comic-accent); text-decoration-thickness: .11em; text-underline-offset: .22em; text-decoration-skip-ink: auto; }
[data-comic-site]:not([data-comic-admin]) main h1 { text-shadow: 2px 3px 0 var(--comic-ink); }
[data-comic-site]:not([data-comic-admin]) main :is(.card,.node__card,.live-card>a,.guide-card>a), [data-comic="panel"] { border: 2px solid var(--comic-accent); border-radius: 3px; box-shadow: 4px 4px 0 var(--comic-ink), 5px 5px 0 var(--comic-accent); }
[data-comic-site]:not([data-comic-admin]) main :is(.card,.node__card,.live-card>a,.guide-card>a):focus-within, [data-comic="panel"]:focus-within { outline: 3px solid var(--comic-paper); outline-offset: 4px; }
[data-comic-site]:not([data-comic-admin]) .hero { background-image: radial-gradient(#f0c75e16 1px, transparent 1px); background-size: 7px 7px; border-bottom: 4px solid var(--comic-accent); }
[data-comic-admin] .comic-shell { border-bottom: 3px solid var(--comic-accent); }
[data-comic-admin] .console-rule { padding: .4rem 0; background: radial-gradient(#f0c75e30 1px, transparent 1px) 0 0/5px 5px; animation: comic-shell-in 350ms ease-out; }
@keyframes comic-shell-in { from { transform: translateY(2px); opacity: .85; } to { transform: none; opacity: 1; } }
.comic-route { margin: 10vh auto; max-width: 42rem; padding: 2rem; background: #111113; color: var(--comic-paper); border: 3px solid var(--comic-accent); box-shadow: 7px 7px 0 var(--comic-ink); font: 1rem/1.8 system-ui,sans-serif; }
.comic-route a { color: var(--comic-accent); }
[data-comic-site] :focus-visible { outline: 3px solid var(--comic-accent); outline-offset: 4px; }
[data-comic-site]:not([data-comic-admin]) main :is(p,h1,h2) { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
[data-comic-site] > a.sr-only:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100; width: auto; height: auto; margin: 0; padding: .75rem 1rem; overflow: visible; clip: auto; white-space: normal; background: var(--comic-paper); color: var(--comic-ink); border: 2px solid var(--comic-ink); }
@media(max-width: 600px) { .comic-ribbon { font-size: .58rem; letter-spacing: .08em; } .comic-ribbon span:last-child { display: none; } .comic-route { margin: 3rem 1rem; padding: 1.25rem; } }
@media(prefers-reduced-motion: reduce) { [data-comic-admin] .console-rule { animation: none; } [data-comic-site] .comic-ribbon::after { transform: none; } [data-comic-site] .node__marker { animation: none !important; } }
@media print { .comic-ribbon { display: none; } [data-comic-site] *, [data-comic-site] *::before, [data-comic-site] *::after { animation: none !important; transition: none !important; } }