/* WTF: ransom-note tabloid on a sugar rush. Loud, tilted, still readable. */
:root {
  --bg: #e8ff1a; --ink: #0a0a0a; --muted: #2c2c2c; --rule: #0a0a0a; --accent: #ff2e93;
  --blue: #2440ff; --chip-bg: #ffffff;
  --font-head: 'Rubik Mono One', 'Bungee', Impact, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --radius: 0;
  --shadow: 6px 6px 0 var(--ink);
}
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%),
    linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%);
  background-size: 28px 28px; background-position: 0 0, 14px 14px;
}
::selection { background: var(--accent); color: #fff; }

.topbar { background: var(--ink); color: var(--bg); border: 0; font-weight: 700; }
.topbar-label { color: var(--accent); text-transform: uppercase; }
.theme-switch a { border: 2px solid var(--bg); color: var(--bg); }
.theme-switch a.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.masthead-in { padding-top: 24px; padding-bottom: 18px; }
.ransom { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: clamp(30px, 10vw, 104px); line-height: 1; }
.ransom span { display: inline-block; padding: .06em .12em; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ransom .r0 { font-family: 'Bungee', sans-serif; background: #fff; transform: rotate(-4deg); }
.ransom .r1 { font-family: 'Permanent Marker', cursive; background: var(--accent); color: #fff; transform: rotate(3deg) translateY(4px); }
.ransom .r2 { font-family: 'Special Elite', monospace; background: var(--ink); color: var(--bg); transform: rotate(-2deg); }
.ransom .r3 { font-family: 'Rubik Mono One', sans-serif; background: var(--blue); color: #fff; transform: rotate(5deg) translateY(-3px); }
.ransom .r4 { font-family: 'Bungee Shade', sans-serif; background: #fff; transform: rotate(-6deg); }
.ransom .r5 { font-family: Georgia, serif; font-style: italic; background: #ffd400; transform: rotate(2deg) translateY(5px); }
.ransom .r6 { font-family: 'Permanent Marker', cursive; background: #00e08a; transform: rotate(-3deg); }
.tagline { color: var(--ink); font-weight: 700; font-size: 16px; margin-top: 16px; }
.sticker { display: inline-block; background: var(--accent); color: #fff; padding: 4px 10px; transform: rotate(-5deg); border: 2px solid var(--ink); font-family: 'Permanent Marker', cursive; margin-left: 6px; }

.sections { background: var(--ink); border: 0; }
.sections a { color: var(--bg); text-transform: uppercase; font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 14px; border-bottom-width: 5px; }
.sections a.on, .sections a:hover { border-bottom-color: var(--accent); color: #fff; }

.breaking { background: var(--accent); overflow: hidden; border-bottom: 3px solid var(--ink); }
.breaking b { background: var(--ink); font-family: 'Bungee', sans-serif; font-weight: 400; animation: blink 1s steps(2) infinite; }
.breaking-in { overflow: hidden; }
.masthead, main { overflow-x: clip; }
.breaking-text { white-space: nowrap; display: inline-block; animation: marquee 14s linear infinite; font-weight: 700; font-size: 17px; }
@keyframes marquee { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes blink { 50% { opacity: .35; } }

.card { background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.card:nth-child(odd) { transform: rotate(-1.1deg); }
.card:nth-child(even) { transform: rotate(.9deg); }
.card:nth-child(3n) { background: #fff6fb; }
.card:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--accent); }
.card-media { border: 2px solid var(--ink); }
.card-media img { filter: saturate(1.35) contrast(1.05); }
.card:hover .card-media img { filter: saturate(2) hue-rotate(-15deg); }
.kicker { background: var(--ink); color: var(--bg); padding: 3px 8px; transform: rotate(-2deg); font-family: 'Bungee', sans-serif; font-weight: 400; letter-spacing: .04em; display: inline-flex; align-items: center; }
.card-title { font-size: 18px; line-height: 1.18; text-transform: uppercase; overflow-wrap: anywhere; }
.front-second .card-title, .front-rail .card-title { font-size: 14px; }
.card-lead { background: var(--blue); color: #fff; }
.card-lead .card-title { font-size: clamp(26px, 6.4vw, 54px); line-height: 1.04; }
.card-lead .dek, .card-lead .card-meta { color: #dfe3ff; }
.card-lead .kicker { background: var(--bg); color: var(--ink); }
.card-sm .card-title, .card-list .card-title { font-size: 15px; }
.dek { color: var(--muted); font-weight: 500; }
.card-meta { color: var(--muted); font-weight: 700; }
.card-list { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px; margin-bottom: 14px; }
.rank { font-family: 'Bungee Shade', sans-serif; color: var(--accent); font-size: 40px; }

.rail-title, .section-title { font-family: 'Bungee Shade', sans-serif; font-weight: 400; font-size: clamp(26px, 5vw, 40px); letter-spacing: 0; text-transform: uppercase; border-bottom: 0; color: var(--ink); }
.front-rail .rail-title { font-size: 26px; }

.story { background: #fff; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 18px; }
.story-title { text-transform: uppercase; line-height: 1.05; font-size: clamp(26px, 7vw, 58px); }
.story-title { background: linear-gradient(transparent 62%, var(--bg) 62%); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story-head .kicker { margin-bottom: 12px; }
.story-dek { font-weight: 700; color: var(--ink); margin-top: 16px; }
.story-body { font-size: 19px; }
.story-body p:nth-child(4n+2) { background: #fff6fb; }
.pull { font-family: 'Permanent Marker', cursive; font-size: 30px; color: var(--accent); border: 3px dashed var(--ink); padding: 18px; transform: rotate(-1.5deg); background: var(--bg); }
.fig img { border: 3px solid var(--ink); }
.fig-inline { transform: rotate(1.5deg); }
figcaption { font-family: 'Special Elite', monospace; color: var(--ink); }
.story-rail { background: transparent; }

.act { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: 'Bungee', sans-serif; font-weight: 400; text-transform: uppercase; background: #fff; }
.act:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.act-like.on { background: var(--accent); border-color: var(--ink); }
.share-menu { border-width: 3px; box-shadow: 8px 8px 0 var(--ink); }
.sh { border: 2px solid var(--ink); font-weight: 700; }
.sh:hover { background: var(--bg); }
.btn { border-width: 3px; box-shadow: 4px 4px 0 var(--ink); background: #fff; font-family: 'Bungee', sans-serif; font-weight: 400; }
.tags li { background: var(--ink); color: var(--bg); font-weight: 700; }
.satire-note { color: var(--ink); font-family: 'Special Elite', monospace; }
.toast { background: var(--accent); color: #fff; border: 3px solid var(--ink); font-family: 'Bungee', sans-serif; font-weight: 400; }

.site-footer { background: var(--ink); color: var(--bg); border-top: 0; }
.site-footer .brand { font-family: 'Bungee Shade', sans-serif; color: var(--bg); }
.site-footer .disclaimer, .site-footer .copy, .footer-brand p { color: #d6e88a; }
.cat-head { border-bottom: 0; }
.cat-head h1 { font-family: 'Bungee Shade', sans-serif; font-weight: 400; text-transform: uppercase; color: var(--ink); }
.cat-head h1::after { content: ' (allegedly)'; font-family: 'Permanent Marker', cursive; font-size: .35em; color: var(--accent); }
.staff-card { background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 16px; }
.staff-initials { background: var(--accent); color: #fff; border: 2px solid var(--ink); border-radius: 0; transform: rotate(-4deg); }
.empty { background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 40px 20px; margin-top: 30px; }

@media (min-width: 1100px) {
  .story { padding: 34px 40px; }
  .front-second .card { padding: 10px; }
}