@import url('colors_and_type.css');

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;font-family:var(--font-sans);color:var(--fg-2)}

deck-stage { background: #000; }

/* ============================================
   TYPE SCALE — slide-appropriate (1920×1080)
   ============================================ */
:root {
  --s-display: 140px;   /* hero title */
  --s-title:   88px;    /* slide H1 */
  --s-h2:      64px;    /* slide H2 */
  --s-h3:      44px;    /* subtitle */
  --s-body:    32px;    /* body */
  --s-small:   26px;    /* small */
  --s-meta:    20px;    /* caps meta */
  --s-micro:   16px;    /* chrome */

  --pad-x: 120px;
  --pad-y: 96px;
}

/* ============================================
   SLIDE BASE
   ============================================ */
.slide {
  width: 100%; height: 100%;
  background: var(--bg-page);
  color: var(--fg-2);
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
}
.slide.wash    { background: #050506; }
.slide.panel   { background: var(--ink-050); }
.slide.red     { background: var(--red-050); }
.slide.deep-red { background: #0d0203; }

/* ============================================
   CHROME (top + bottom)
   ============================================ */
.chrome-top, .chrome-bot {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--s-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: 500;
}
.chrome-top { top: 48px; }
.chrome-bot { bottom: 48px; }
.chrome-bot .sep {
  color: var(--ink-400);
  padding: 0 12px;
}
.chrome-top .live {
  color: var(--red-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.chrome-top .live::before {
  content:''; width: 10px; height: 10px; background: var(--red-700);
  display:inline-block;
  box-shadow: 0 0 16px var(--red-700);
  animation: blink 1.4s var(--ease-out) infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ============================================
   TEXTURES
   ============================================ */
.grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--ink-300) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.45;
  pointer-events: none;
}
.grid-bg.fine {
  background-size: 24px 24px;
  opacity: 0.35;
}
.grid-bg.lines {
  background-image:
    linear-gradient(to right, var(--ink-300) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-300) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.25;
}
.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(224,30,46,0.022) 3px, rgba(224,30,46,0.022) 4px);
  pointer-events: none;
}
.hex-frieze {
  position: absolute; left: 0; right: 0;
  font-family: var(--font-mono); font-size: 15px;
  color: var(--ink-400); letter-spacing: 0.12em;
  white-space: nowrap; overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================
   STAGE CONTENT WRAPPER
   ============================================ */
.stage {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  top: 132px; bottom: 132px;
  display: flex; flex-direction: column;
}

/* ============================================
   TYPE HELPERS
   ============================================ */
.display {
  font-family: var(--font-display);
  font-size: var(--s-display);
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--fg-1);
}
.title {
  font-family: var(--font-display);
  font-size: var(--s-title);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--s-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--s-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--fg-1);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--s-body);
  line-height: 1.45;
  color: var(--fg-3);
  font-weight: 400;
}
.body strong { color: var(--fg-1); font-weight: 600; }
.body em.red { color: var(--red-700); font-style: normal; }
.small {
  font-family: var(--font-sans);
  font-size: var(--s-small);
  line-height: 1.5;
  color: var(--fg-3);
}
.meta {
  font-family: var(--font-mono);
  font-size: var(--s-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-700);
  font-weight: 500;
}
.meta-dim {
  font-family: var(--font-mono);
  font-size: var(--s-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: 500;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 52px;
  line-height: 1.25;
  color: var(--fg-2);
  font-weight: 400;
}
.mono {
  font-family: var(--font-mono);
}
.dot { color: var(--red-700); }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--ink-300);
  padding: 40px;
  position: relative;
}
.card.red-accent {
  border-left: 2px solid var(--red-400);
}
.card.red-glow {
  border: 1px solid var(--red-400);
  box-shadow: 0 0 32px -8px rgba(224,30,46,0.35);
}

/* ============================================
   TABLES
   ============================================ */
table.sys {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 26px;
}
table.sys th, table.sys td {
  text-align: left;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ink-300);
  vertical-align: top;
}
table.sys th {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: 500;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-400);
}
table.sys td.dim { color: var(--fg-4); }
table.sys td .red { color: var(--red-700); }
table.sys td .green { color: var(--lime); }

/* ============================================
   BADGES / TAGS
   ============================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--ink-400);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.badge.red {
  border-color: var(--red-400);
  color: var(--red-700);
}
.badge.solid {
  background: var(--red-400);
  border-color: var(--red-400);
  color: #fff1f1;
}

/* ============================================
   TERMINAL
   ============================================ */
.term {
  background: #0a0608;
  border: 1px solid var(--ink-300);
  display: flex; flex-direction: column;
  font-family: var(--font-mono);
}
.term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-300);
  background: var(--ink-100);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.term-bar .dots { display:flex; gap:6px; }
.term-bar .dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink-400);
  display:inline-block;
}
.term-bar .dots i:first-child { background: var(--red-500); }
.term-body {
  padding: 28px 32px;
  font-size: 24px; line-height: 1.55;
  color: var(--ink-800);
  flex: 1;
  white-space: pre;
  overflow: hidden;
}
.c-dim { color: var(--fg-5); }
.c-red { color: var(--red-700); }
.c-green { color: var(--lime); }
.c-cyan { color: var(--cyan); }
.c-white { color: var(--ink-900); }

.cursor {
  display: inline-block;
  width: 14px; height: 28px;
  background: var(--red-700);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

/* ============================================
   SECTION DIVIDERS — full-bleed headers
   ============================================ */
.section-divider {
  width: 100%; height: 100%;
  background: #0d0203;
  position: relative;
  display: flex; align-items: center;
  overflow: hidden;
}
.section-divider .rail {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 8px; background: var(--red-400);
}
.section-divider .bignum {
  font-family: var(--font-mono);
  font-size: 520px;
  line-height: 0.8;
  color: var(--red-100);
  position: absolute;
  right: -40px; bottom: -80px;
  font-weight: 700;
  opacity: 0.7;
}

/* ============================================
   UTILITIES
   ============================================ */
.col { display: flex; flex-direction: column; }
.row { display: flex; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.gap-32 { gap: 32px; } .gap-48 { gap: 48px; } .gap-64 { gap: 64px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; } .mt-96 { margin-top: 96px; }

/* animated frieze */
@keyframes slide-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.frieze-anim {
  animation: slide-left 120s linear infinite;
}