/* ============================================================
   THE DAILY CYNIC — degraded broadcast / net-art newspaper
   All motion lives on background layers only. Text never moves.
   ============================================================ */

/* ── SELF-HOSTED FONTS (no third-party requests) ───────────── */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-Regular.woff') format('woff'),
       url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Regular.woff') format('woff'),
       url('../fonts/CourierPrime-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Bold.woff') format('woff'),
       url('../fonts/CourierPrime-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-Italic.woff') format('woff'),
       url('../fonts/CourierPrime-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/CourierPrime-BoldItalic.woff') format('woff'),
       url('../fonts/CourierPrime-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --red:        #c2282e;
  --red-hot:    #ff2b33;
  --red-dim:    #8b1a1e;
  --cyan:       #3af0ff;
  --cream:      #e0d5c1;
  --cream-dim:  #a89a84;
  --cream-faint:#6b6052;
  --bg:         #050504;
  --panel:      #0e0d0b;
  --panel-alt:  #141210;
  --rule:       #2a2621;

  --mono: 'Courier Prime', 'Courier New', monospace;
  --display: 'Anton', 'Oswald', 'Arial Black', sans-serif;

  --wrap: 680px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream-dim);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── ANIMATED BACKGROUND LAYERS ───────────────────────────── */

.fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.fx-weave {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(194, 40, 46, .05) 0 10px,
    transparent 10px 20px
  );
  animation: bgDrift 7s linear infinite;
}

.fx-scan {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .5) 0px,
    rgba(0, 0, 0, .5) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanMove 1.4s linear infinite;
}

.fx-noise {
  inset: -10%;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.14'/></svg>");
  animation: noiseShift 3.2s steps(4) infinite;
}

.fx-sweep {
  top: 0; left: 0; right: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.055), transparent);
  animation: sweep 6s linear infinite;
}

@keyframes scanMove  { 0% { background-position: 0 0; }   100% { background-position: 0 8px; } }
@keyframes bgDrift   { 0% { background-position: 0 0; }   100% { background-position: 40px 40px; } }
@keyframes sweep     { 0% { transform: translateY(-40vh); } 100% { transform: translateY(140vh); } }
@keyframes noiseShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fx { animation: none !important; }
}

/* ── LAYOUT ───────────────────────────────────────────────── */

.shell { position: relative; z-index: 5; }
.wrap  { max-width: var(--wrap); margin: 0 auto; padding: 0 12px 40px; }

/* ── STATUS STRIP ─────────────────────────────────────────── */

.status {
  background: var(--red);
  padding: 5px 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  color: #fff;
}
.status span { white-space: pre; }
.status .status-r { color: rgba(255,255,255,.9); }

/* ── MASTHEAD ─────────────────────────────────────────────── */

.masthead {
  border: 4px outset var(--red);
  background: var(--panel);
  padding: 18px 12px 14px;
  text-align: center;
  margin-top: 12px;
}

.masthead-kicker {
  font-size: 10px;
  color: var(--red);
  letter-spacing: .22em;
  margin-bottom: 12px;
}

.masthead-title {
  font-family: var(--display);
  font-size: clamp(40px, 13vw, 74px);
  line-height: .82;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  /* static RGB split — the glitch look, frozen */
  text-shadow:
    -3px 0 0 rgba(255, 43, 51, .73),
     3px 0 0 rgba(58, 240, 255, .4),
     4px 4px 0 rgba(0, 0, 0, .6);
}
.masthead-title a { color: inherit; text-decoration: none; }

.masthead-meta {
  font-size: 10px;
  color: var(--cream-faint);
  letter-spacing: .08em;
  line-height: 1.8;
  margin-top: 14px;
}
.counter {
  border: 1px solid var(--red);
  color: var(--red);
  padding: 1px 6px;
}

/* ── STRIPS ───────────────────────────────────────────────── */

.strip {
  background: var(--red);
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-dim { background: var(--panel-alt); color: var(--cream-dim); }

/* ── NAV ──────────────────────────────────────────────────── */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border: 2px outset var(--rule);
  background: var(--panel-alt);
  color: var(--cream-dim);
  text-decoration: none;
}
.nav a:hover,
.nav .nav-current a {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
  text-decoration: none;
}

/* ── PANELS ───────────────────────────────────────────────── */

.panel {
  border: 3px outset var(--rule);
  background: var(--panel);
  padding: 12px;
  position: relative;
  margin-bottom: 12px;
}
.panel-feature {
  border: 3px inset var(--red);
  padding: 14px;
}
.panel-label {
  position: absolute;
  top: -9px;
  left: 10px;
  background: var(--bg);
  padding: 0 7px;
  font-size: 10px;
  color: var(--rule);
  letter-spacing: .16em;
}
.panel-feature .panel-label { color: var(--red); }

/* ── HEADLINES ────────────────────────────────────────────── */

.h-split {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: .02em;
  margin: 0;
  text-shadow:
    -1.5px 0 0 rgba(255, 43, 51, .73),
     1.5px 0 0 rgba(58, 240, 255, .4),
     2px 2px 0 rgba(0, 0, 0, .6);
}
.h-split a { color: inherit; text-decoration: none; }
.h-split a:hover { color: #fff; text-decoration: none; }

.h-feature {
  font-size: clamp(24px, 6.5vw, 34px);
  line-height: 1.05;
  text-shadow:
    -2px 0 0 rgba(255, 43, 51, .73),
     2px 0 0 rgba(58, 240, 255, .4),
     3px 3px 0 rgba(0, 0, 0, .6);
}
.h-card { font-size: 19px; line-height: 1.12; }

/* ── ARTICLE META ─────────────────────────────────────────── */

.tagline {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: .14em;
  margin-bottom: 14px;
}
.meta {
  font-size: 10px;
  color: var(--red);
  letter-spacing: .14em;
  margin-bottom: 12px;
}
.excerpt {
  font-size: 13px;
  line-height: 1.75;
  color: var(--cream-dim);
  margin: 12px 0 0;
}
.panel-feature .excerpt {
  border-left: 3px solid var(--red);
  padding-left: 12px;
}
.rule-red {
  height: 3px;
  width: 55%;
  background: var(--red);
  margin: 16px 0;
}
.readmore {
  display: inline-block;
  font-size: 11px;
  color: var(--red);
  text-decoration: underline;
  margin-top: 14px;
}

/* ── GRID ─────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

/* ── DONATION BLOCK ───────────────────────────────────────── */

.support {
  border: 4px outset var(--red);
  background: var(--red);
  padding: 18px 14px;
  text-align: center;
  margin-top: 14px;
}
.support-title {
  font-family: var(--display);
  font-size: clamp(17px, 4.5vw, 22px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.15;
  text-shadow: -2px 0 0 rgba(0,0,0,.35), 2px 0 0 rgba(58,240,255,.25);
}
.support-body {
  font-size: 11px;
  color: rgba(255,255,255,.78);
  margin-top: 10px;
  line-height: 1.7;
}
.support-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.support-btns a {
  font-size: 11px;
  padding: 6px 16px;
  border: 2px outset #fff;
  background: var(--panel-alt);
  color: #fff;
  text-decoration: none;
}
.support-btns a:hover { background: #000; text-decoration: none; }

/* ── FOOTER ───────────────────────────────────────────────── */

.foot {
  font-size: 11px;
  color: var(--cream-faint);
  margin-top: 20px;
  line-height: 1.9;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.foot .dim { color: var(--cream-dim); }
.foot .cursor { color: var(--red); }

/* ── POST PAGE ────────────────────────────────────────────── */

.post-head { margin: 14px 0 0; }
.post-title {
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.03;
  text-transform: uppercase;
  color: var(--cream);
  margin: 8px 0 12px;
  text-shadow:
    -2px 0 0 rgba(255, 43, 51, .6),
     2px 0 0 rgba(58, 240, 255, .3),
     3px 3px 0 rgba(0, 0, 0, .6);
}
.post-sub {
  font-size: 14px;
  color: var(--cream-dim);
  border-left: 3px solid var(--red);
  padding-left: 12px;
  margin: 0 0 18px;
}
.post-feature-img { border: 3px inset var(--rule); margin: 16px 0; }

/* Readable body copy — no glitch, generous spacing */
.post-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--cream);
}
.post-body p { margin: 0 0 1.3em; }
.post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: .02em;
  line-height: 1.15;
  margin: 1.8em 0 .6em;
  text-shadow: -1px 0 0 rgba(255,43,51,.5), 1px 0 0 rgba(58,240,255,.25);
}
.post-body h2 { font-size: 26px; }
.post-body h3 { font-size: 21px; }
.post-body h4 { font-size: 18px; }
.post-body a { text-decoration: underline; }
.post-body blockquote {
  margin: 1.6em 0;
  padding: 10px 0 10px 16px;
  border-left: 4px solid var(--red);
  color: var(--cream-dim);
  font-style: italic;
}
.post-body img,
.post-body figure { margin: 1.6em 0; }
.post-body figcaption {
  font-size: 11px;
  color: var(--cream-faint);
  text-align: center;
  margin-top: 8px;
  letter-spacing: .06em;
}
.post-body hr {
  border: 0;
  height: 2px;
  background: var(--rule);
  margin: 2em 0;
}
.post-body code {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  font-size: .9em;
}
.post-body pre {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  padding: 12px;
  overflow-x: auto;
}
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.post-body li { margin-bottom: .5em; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.post-body th, .post-body td { border: 1px solid var(--rule); padding: 8px; font-size: 13px; }
.post-body th { background: var(--panel-alt); color: var(--cream); }

.post-tags { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.post-tags a {
  font-size: 10px;
  letter-spacing: .12em;
  border: 2px outset var(--rule);
  background: var(--panel-alt);
  color: var(--cream-dim);
  padding: 3px 9px;
  text-decoration: none;
}

/* ── PAGINATION ───────────────────────────────────────────── */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .1em;
}
.pagination a {
  border: 2px outset var(--red);
  background: var(--panel-alt);
  color: var(--red);
  padding: 5px 12px;
  text-decoration: none;
}
.pagination .page-number { color: var(--cream-faint); }

/* ── ARCHIVE HEADER ───────────────────────────────────────── */

.archive-head {
  border: 3px inset var(--rule);
  background: var(--panel);
  padding: 14px;
  margin: 12px 0;
}
.archive-title {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  text-shadow: -1.5px 0 0 rgba(255,43,51,.6), 1.5px 0 0 rgba(58,240,255,.3);
}
.archive-desc { font-size: 12px; color: var(--cream-faint); margin-top: 8px; }

/* ── ERROR ────────────────────────────────────────────────── */

.err {
  text-align: center;
  padding: 60px 0;
}
.err-code {
  font-family: var(--display);
  font-size: clamp(60px, 22vw, 140px);
  color: var(--cream);
  line-height: 1;
  text-shadow: -4px 0 0 rgba(255,43,51,.73), 4px 0 0 rgba(58,240,255,.4);
}
.err-msg { font-size: 12px; color: var(--cream-faint); margin-top: 14px; letter-spacing: .1em; }

/* ── SKIP LINK / A11Y ─────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px; top: 12px;
  z-index: 100;
  background: var(--red);
  color: #fff;
  padding: 8px 14px;
}

/* ── FOOTER EXTRAS ────────────────────────────────────────── */

.foot .prompt { color: var(--cream-faint); }
.foot-mail {
  color: var(--red);
  text-decoration: underline;
}
.foot-mail:hover { color: #fff; }

/* ── KOENIG EDITOR CARDS ──────────────────────────────────── */
/* Required by Ghost. Lets images/embeds break out of the
   text column when you pick "Wide" or "Full" in the editor.   */

.post-body .kg-card { margin: 1.8em 0; }

.post-body .kg-width-wide {
  position: relative;
  width: calc(100% + 60px);
  max-width: 100vw;
  margin-left: -30px;
  margin-right: -30px;
}

.post-body .kg-width-full {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-left: 0;
  border-right: 0;
}

.post-body .kg-width-wide img,
.post-body .kg-width-full img {
  width: 100%;
  border: 3px inset var(--rule);
}
.post-body .kg-width-full img { border-left: 0; border-right: 0; }

@media (max-width: 720px) {
  .post-body .kg-width-wide {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Image card */
.post-body .kg-image-card { text-align: center; }
.post-body .kg-image { margin: 0 auto; border: 3px inset var(--rule); }
.post-body .kg-card figcaption {
  font-size: 11px;
  color: var(--cream-faint);
  text-align: center;
  margin-top: 8px;
  letter-spacing: .06em;
}

/* Gallery card */
.post-body .kg-gallery-container { display: flex; flex-direction: column; }
.post-body .kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: 6px; }
.post-body .kg-gallery-row:not(:first-of-type) { margin-top: 6px; }
.post-body .kg-gallery-image img { display: block; width: 100%; height: 100%; margin: 0; border: 2px inset var(--rule); }

/* Embed / bookmark / callout */
.post-body .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.post-body .kg-embed-card iframe { max-width: 100%; }

.post-body .kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  border: 3px outset var(--rule);
  background: var(--panel-alt);
  color: var(--cream);
  text-decoration: none;
  padding: 12px;
}
.post-body .kg-bookmark-title { font-family: var(--display); text-transform: uppercase; color: var(--cream); }
.post-body .kg-bookmark-description { font-size: 12px; color: var(--cream-faint); margin-top: 6px; }
.post-body .kg-bookmark-metadata { font-size: 11px; color: var(--red); margin-top: 8px; }
.post-body .kg-bookmark-thumbnail img { max-width: 140px; }

.post-body .kg-callout-card {
  border: 3px inset var(--red);
  background: var(--panel-alt);
  padding: 14px;
  display: flex;
  gap: 10px;
}
.post-body .kg-callout-text { margin: 0; }

/* Button card */
.post-body .kg-button-card { display: flex; justify-content: center; }
.post-body .kg-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 8px 18px;
  border: 2px outset var(--red);
  background: var(--red);
  color: #fff;
  text-decoration: none;
}
.post-body .kg-btn:hover { background: var(--panel-alt); text-decoration: none; }

/* Toggle / header cards */
.post-body .kg-toggle-card {
  border: 3px outset var(--rule);
  background: var(--panel-alt);
  padding: 12px;
}
.post-body .kg-toggle-heading-text {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--cream);
}
.post-body .kg-header-card { text-align: center; padding: 24px 12px; border: 3px inset var(--rule); }