/* Sterling's Quest ARG case study — investigation-board page styles.
   Accents: purple = Vi / Renegades, cyan = Life Inc., red = warnings. */

.arg-page {
  --arg-purple: #b183e8;
  --arg-purple-deep: rgba(158, 87, 212, 0.16);
  --arg-cyan: #6ecfdd;
  --arg-cyan-deep: rgba(94, 190, 205, 0.10);
  --arg-red: #e0586e;
  --arg-red-deep: rgba(224, 88, 110, 0.12);
  --arg-line: rgba(177, 131, 232, 0.22);
  background:
    linear-gradient(180deg, rgba(13, 10, 20, 0.97), rgba(16, 20, 27, 0.96)),
    var(--frame);
}

.arg-page code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--arg-cyan);
  background: rgba(110, 207, 221, 0.08);
  border: 1px solid rgba(110, 207, 221, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  word-break: break-all;
}

.arg-purple { color: var(--arg-purple); }
.arg-red { color: var(--arg-red); font-style: normal; }

/* ---------- hero ---------- */

.arg-hero {
  padding: 34px 0 10px;
  border-bottom: 1px solid var(--arg-line);
  margin-bottom: 8px;
}

.arg-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arg-red);
  margin-bottom: 14px;
}

.arg-hero h1 {
  font-size: clamp(26px, 4.2vw, 40px);
  letter-spacing: -0.5px;
  max-width: 21ch;
  margin-bottom: 10px;
}

.arg-sub {
  color: var(--arg-purple);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.arg-lead {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 72ch;
  color: var(--bright);
}

.arg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 26px;
}

.arg-tags span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 3px 9px;
}

.arg-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}

.arg-card {
  border: 1px solid var(--arg-line);
  border-left: 3px solid var(--arg-purple);
  background: var(--arg-purple-deep);
  border-radius: 3px;
  padding: 18px 20px;
}

.arg-card h2 {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--arg-purple);
  margin-bottom: 12px;
}

.arg-card ul {
  list-style: none;
}

.arg-card li {
  padding: 5px 0 5px 18px;
  position: relative;
  line-height: 1.5;
}

.arg-card li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--arg-purple);
}

/* ---------- sections ---------- */

.arg-section {
  padding: 34px 0 26px;
  border-bottom: 1px solid var(--line);
}

.arg-section h2 {
  font-size: 21px;
  margin-bottom: 16px;
}

.arg-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--arg-red);
  vertical-align: 4px;
  margin-right: 10px;
  letter-spacing: 1px;
}

.arg-section-purple h2 .arg-num { color: var(--arg-purple); }
.arg-section-cyan h2 .arg-num { color: var(--arg-cyan); }

.arg-section p {
  max-width: 76ch;
  line-height: 1.7;
  margin-bottom: 14px;
}

.arg-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 18px 0;
}

/* ---------- timeline markers ---------- */

.arg-timeline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 16px;
  font-family: var(--mono);
}

.arg-timeline-date {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #0d1622;
  background: var(--arg-purple);
  border-radius: 2px;
  padding: 2px 8px;
}

.arg-timeline-text {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* ---------- figures & labels ---------- */

.arg-figure {
  margin: 0;
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(10, 12, 18, 0.6);
  padding: 10px;
}

.arg-figure-wide {
  margin: 20px 0;
}

.arg-figure-sm {
  max-width: 430px;
  margin: 18px 0;
}

.arg-figure img {
  width: 100%;
  border-radius: 2px;
}

.arg-figure figcaption,
.arg-caption-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  padding-top: 9px;
}

.arg-caption-note {
  margin-top: -8px;
}

.arg-audio {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 10px;
  filter: invert(0.88) hue-rotate(180deg) saturate(0.6);
  border-radius: 3px;
}

.arg-label {
  position: absolute;
  top: -9px;
  left: 12px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 8px;
  background: #241b33;
  color: var(--arg-purple);
  border: 1px solid var(--arg-line);
}

.arg-label-decoded { color: #8fe3a6; border-color: rgba(143, 227, 166, 0.35); background: #14251c; }
.arg-label-evidence { color: var(--arg-cyan); border-color: rgba(110, 207, 221, 0.35); background: #10242a; }
.arg-label-false-lead { color: var(--arg-red); border-color: rgba(224, 88, 110, 0.35); background: #2a1219; }
.arg-label-community-theory { color: #e2c078; border-color: rgba(226, 192, 120, 0.35); background: #292112; }
.arg-label-confirmed-later { color: var(--arg-purple); }
.arg-label-clue { color: var(--arg-cyan); border-color: rgba(110, 207, 221, 0.35); background: #10242a; }

/* inline label variant (inside notes/decoded blocks) */
.arg-note .arg-label,
.arg-decoded .arg-label {
  position: static;
  display: inline-block;
  margin-bottom: 8px;
}

/* ---------- notes, decoded, quotes ---------- */

.arg-note {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--arg-cyan);
  background: var(--arg-cyan-deep);
  border-radius: 3px;
  padding: 16px 18px;
}

.arg-note h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.arg-note p { margin-bottom: 0; font-size: 13.5px; }

.arg-note-false {
  border-left-color: var(--arg-red);
  background: var(--arg-red-deep);
}

.arg-note-highlight {
  border-left-color: var(--arg-purple);
  background: var(--arg-purple-deep);
  margin: 18px 0;
}

.arg-decoded {
  border: 1px dashed rgba(143, 227, 166, 0.35);
  background: rgba(143, 227, 166, 0.05);
  border-radius: 3px;
  padding: 14px 18px 12px;
  margin: 16px 0;
  max-width: 76ch;
}

.arg-decoded p { margin-bottom: 0; }

.arg-aside {
  font-size: 13px;
  color: var(--muted);
  border-left: 2px dashed var(--arg-line);
  padding-left: 14px;
  font-style: italic;
}

.arg-quote {
  border-left: 3px solid var(--arg-purple);
  padding: 6px 0 6px 18px;
  margin: 22px 0 10px;
  font-size: 15.5px;
  font-style: italic;
  color: var(--bright);
  max-width: 66ch;
}

.arg-quote-big {
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- terminal block ---------- */

.arg-terminal {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #0a0e14;
  margin: 18px 0;
  overflow: hidden;
}

.arg-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #151b25;
  border-bottom: 1px solid var(--line);
}

.arg-terminal-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #33405233;
  border: 1px solid var(--line-strong);
}

.arg-terminal-bar i:first-child { background: rgba(224, 88, 110, 0.5); }

.arg-terminal-bar span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--faint);
  margin-left: 8px;
}

.arg-terminal pre {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #9fdc8f;
  padding: 16px 18px;
  overflow-x: auto;
  white-space: pre;
}

/* ---------- CCTV grid ---------- */

.arg-cctv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.arg-cctv-grid figure {
  border: 1px solid var(--line-strong);
  background: rgba(10, 12, 18, 0.6);
  padding: 6px;
  border-radius: 3px;
}

.arg-cctv-grid img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.arg-cctv-grid figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--faint);
  padding-top: 6px;
  text-align: center;
}

/* ---------- stats ---------- */

.arg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}

.arg-stats div {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(10, 12, 18, 0.6);
  padding: 14px 16px;
}

.arg-stats strong {
  display: block;
  font-size: 26px;
  color: var(--arg-purple);
  font-family: var(--mono);
  margin-bottom: 4px;
}

.arg-stats span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- principles ---------- */

.arg-principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.arg-principle {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: rgba(10, 12, 18, 0.5);
  padding: 14px 16px;
}

.arg-principle h3 {
  font-size: 13.5px;
  color: var(--arg-purple);
  margin-bottom: 6px;
}

.arg-principle p {
  font-size: 13px;
  margin-bottom: 0;
  color: var(--muted);
}

/* ---------- outcomes & reflection ---------- */

.arg-outcomes {
  list-style: none;
  max-width: 76ch;
}

.arg-outcomes li {
  padding: 8px 0 8px 22px;
  position: relative;
  line-height: 1.6;
  border-bottom: 1px dashed var(--line);
}

.arg-outcomes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #8fe3a6;
  font-weight: 700;
}

.arg-reflection { border-bottom: none; }

.arg-final {
  font-size: 16px;
  font-style: italic;
  color: var(--bright);
  border-left: 3px solid var(--arg-red);
  padding-left: 18px;
  margin: 20px 0;
}

.arg-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 8px;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .arg-hero-grid,
  .arg-two-col,
  .arg-principles {
    grid-template-columns: 1fr;
  }

  .arg-cctv-grid {
    grid-template-columns: 1fr 1fr;
  }

  .arg-stats {
    grid-template-columns: 1fr 1fr;
  }
}