/* ============================================================
   Investor Reports — no-outline "open" flavor, Rally Blue + gold
   Reuses --bg, --surface, --accent (Rally Blue), --text, --muted,
   --hairline, --radius-card, .wrap, .nav, .footer-min, .odometer
   from style.css. Panels have no border/box — just spacing on a
   black page — with a two-column layout: text on the left, photo
   slot(s) on the right for images Ryan supplies later (they stack
   vertically once added).
   Scope everything under .ir so nothing leaks into the rest of the site.
   ============================================================ */

.ir {
  --ir-gold: #c9962f;         /* masthead eyebrow + section numerals */
  --ir-rule: rgba(255, 255, 255, 0.12);
  --ir-serif: 'Fraunces', ui-serif, Georgia, serif;
  --ir-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Masthead ---------- */
.ir-masthead {
  padding: clamp(64px, 9vw, 108px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(900px 380px at 50% 0%, rgba(78, 154, 217, 0.10) 0%, rgba(78, 154, 217, 0) 65%);
}
.ir-masthead .ir-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ir-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ir-gold);
  margin-bottom: 22px;
}
.ir-masthead .ir-eyebrow::before,
.ir-masthead .ir-eyebrow::after { content: ''; width: 32px; height: 1px; background: var(--ir-gold); opacity: 0.7; }
.ir-masthead h1 {
  font-family: var(--ir-serif); font-style: italic; font-weight: 600;
  font-size: clamp(44px, 7.4vw, 88px); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--text); margin: 0 auto 18px; max-width: 18ch;
}
.ir-masthead .ir-sub {
  font-family: var(--ir-mono); font-size: 14px; letter-spacing: 0.04em;
  color: var(--muted); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.ir-masthead .ir-sub .sep { color: var(--accent); }

/* ---------- Ledger stat row ---------- */
.ir-ledger {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  overflow: hidden; margin: 48px 0;
}
.ir-stat {
  background: var(--surface); padding: 28px 24px; text-align: center;
}
.ir-stat .ir-stat-label {
  font-family: var(--ir-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.ir-stat .ir-stat-value {
  font-family: var(--ir-mono); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px);
  color: var(--accent);
}

/* comma-separator fix — the shared .odometer .sep rule in style.css sets
   a tight fixed width with no breathing room on either side, so the comma
   crowds the digit right after it. Widen the box and add margin, scoped
   to this page only. */
.ir .odometer .sep { width: 0.42em; margin: 0 0.07em; }

/* ---------- Section — numbered ledger entries ---------- */
.ir-section { padding: 20px 0 56px; }
.ir-section-head {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--ir-gold); padding-bottom: 14px;
}
.ir-section-num {
  font-family: var(--ir-mono); font-size: 15px; font-weight: 700; color: var(--ir-gold);
  letter-spacing: 0.04em;
}
.ir-section-head h2 {
  font-family: var(--ir-serif); font-style: italic; font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px); color: var(--text); letter-spacing: -0.01em;
}
/* more air between a panel's bottom and the next section's headline */
.ir-panel + .ir-section-head { margin-top: 56px; }

/* ---------- Panel (Ryan's narrative + letter) — no outline, no box ---------- */
.ir-panel {
  padding: clamp(28px, 4vw, 48px) 0;
  display: grid; grid-template-columns: 4fr 3fr;
  gap: clamp(24px, 4vw, 44px); align-items: start;
}
.ir-panel + .ir-panel { margin-top: 8px; }
.ir-panel-text { min-width: 0; }
.ir-panel-text h3 {
  font-family: var(--ir-serif); font-style: italic; font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px); color: var(--accent); margin-bottom: 14px;
}
.ir-panel-text p {
  color: var(--text); text-align: justify; text-wrap: pretty;
}
.ir-panel-text p + p { margin-top: 14px; }
.ir-panel-text .ir-byline {
  font-family: var(--ir-mono); font-size: 13px; color: var(--muted);
  margin: 0 0 22px;
}
.ir-panel-text ul {
  list-style: square; padding-left: 1.3em; margin: 4px 0 24px;
}
.ir-panel-text ul li {
  color: var(--text); text-align: justify; margin-bottom: 8px; padding-left: 2px;
}
.ir-panel-text ul + p { margin-top: 0; }

/* ---------- Photo column — right side, stacks multiple photos once Ryan adds them ---------- */
.ir-photos {
  display: flex; flex-direction: column; gap: 16px; align-self: stretch;
}
.ir-photos img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ir-photo-placeholder {
  flex: 1; min-height: 260px;
  border: 1.5px dashed var(--accent); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px;
  font-family: var(--ir-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Inline chart wrap (simple SVG, no library) ---------- */
.ir-chart { margin: 0 0 24px; }
.ir-chart-title {
  font-family: var(--ir-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.ir-chart svg { width: 100%; height: auto; display: block; }
.ir-chart-caption {
  font-family: var(--ir-mono); font-size: 12px; color: var(--muted); margin-top: 10px;
}

/* ---------- Archive / issue list (hub page) ---------- */
.ir-issue-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: 30px; box-shadow: var(--glow);
  transition: transform .3s var(--ease-weighted), border-color .3s var(--ease-weighted);
}
.ir-issue-card:hover { transform: translateY(-3px); border-color: rgba(78, 154, 217, 0.5); }
.ir-issue-card .ir-issue-num { font-family: var(--ir-mono); font-size: 12px; color: var(--ir-gold); letter-spacing: 0.1em; text-transform: uppercase; }
.ir-issue-card h2 { font-family: var(--ir-serif); font-style: italic; font-weight: 600; font-size: clamp(24px, 3vw, 30px); }
.ir-issue-card p { color: var(--muted); }
.ir-issue-card .card-link { color: var(--accent); font-weight: 700; }
.ir-issue-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 32px; }


@media (max-width: 760px) {
  .ir-ledger { grid-template-columns: repeat(2, 1fr); }
  .ir-panel { grid-template-columns: 1fr; }
  .ir-photo-placeholder { min-height: 160px; }
}