/* ═══════════════════════════════════════════════════════
   THE DEAF LEADING THE BLIND — Refined Aesthetic
   Quarto / Reveal.js 
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');

:root {
  --bg:        #0B0B18;
  --white:     #FFFFFF;
  --yellow:    #FFD700;
  --muted:     rgba(255, 255, 255, 0.7);
  --font-main: 'Merriweather', serif;
  --font-sans: 'Barlow Condensed', sans-serif;
}

.reveal, .reveal-viewport {
  background: var(--bg);
  background-color: var(--bg);
}

.reveal {
  font-family: var(--font-main);
  font-size: 20px; /* Base text size (rest smaller) */
  color: var(--white);
}

/* Hide default Reveal.js chrome */
.reveal .progress, 
.reveal .controls, 
.reveal .slide-number { 
  display: none !important; 
}

.reveal .slides section {
  text-align: left;
  padding: 60px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

/* Title text size explicitly set to 39px */
.reveal h1, 
.reveal h2, 
.reveal h3 {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 39px !important;
  text-transform: none;
}
.reveal h4 {
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 24px !important;
  text-transform: none;
}

.reveal p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: var(--white);
}

/* Occasional Yellow formatting via Markdown Italics */
.reveal em, 
.accent {
  /*font-style: italic; */
  color: var(--yellow);
}

/* Centers the content of any slide with the .center-slide class */
.reveal .slides section.center-slide {
  display: flex !important;
  flex-direction: column;
  justify-content: center; /* Vertical center */
  align-items: center;     /* Horizontal center */
  text-align: center;      /* Centers the text lines themselves */
}

/* If you want the text left-aligned BUT the block centered: */
.reveal .slides section.center-slide-left-align {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.reveal .slides section.center-slide-left-align h2 {
  text-align: left; /* Text remains left-aligned inside the centered block */
  display: inline-block;
}

.reveal .slides section.center-slide-left {
  display: flex !important;
  flex-direction: column;
  justify-content: center; /* Vertical centering */
  align-items: center;     /* Horizontal centering */
}

.reveal .slides section.center-slide-left h2 {
  text-align: left;        /* Keeps text flush-left within the block */
  display: inline-block;   /* Shrinks the box to the width of the text */
  margin: 0;
}

.cta {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
}

.photo-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  text-transform: uppercase;
}

/* ── Layout Modules ────────────────────────────────────── */

/* Two Column Comparison */
.comparison {
  display: flex;
  gap: 60px;
  margin-top: 30px;
}
/* Ensure column contents use flexbox for centering */
.comparison-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers items horizontally */
  justify-content: flex-start;
  text-align: center;
}
.col-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--yellow);
  letter-spacing: 0.1em;
  margin-bottom: 15px;
}
.col-body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 auto;
  text-align: center;
}

/* Timeline */
.timeline {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 2px solid var(--muted);
  padding-left: 20px;
}
.tl-node {
  display: flex;
  flex-direction: column;
}
.tl-label {
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
}
.tl-label.accent {
  color: var(--yellow);
}
.tl-desc {
  font-size: 18px;
  color: var(--muted);
}

/* Stat Block */
.stat-block {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 30px;
}
/* .stat-number {
  font-size: 100px;
  font-weight: 900;
  color: var(--yellow);
} */

.stat-number {
  font-family: 'Merriweather', serif; /* Maintains your existing aesthetic */
  font-weight: 900;
  font-size: 60px;       /* Control the size here */
  line-height: 1;         /* Prevents large gaps above/below the number */
  color: var(--yellow);   /* Uses your accent color */
  margin: 0;
  padding-right: 40px;    /* Adds space between the number and the description */
}

.stat-eyebrow {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.stat-desc {
  font-size: 18px;
  color: var(--muted);
}

/* Vertical Cards */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
.card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.card-icon {
  font-size: 39px; /* Matches title text size */
  font-weight: 700;
  color: var(--yellow);
}
.card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
}

/* Footer URL */
.url-bar {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* utility class for centering text */
.text-center {
  text-align: center;
}

/* The container utility */
.center-box {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 85%;      /* Adjust this to control how wide the "box" is */
  max-width: 900px; 
  text-align: left; /* Forces text to stay left-aligned inside the box */
}

/* Update your specific layout containers to use the same logic */
.comparison, .timeline, .stat-block, .card-grid {
  margin: 40px auto !important; /* Centers the block itself */
  width: fit-content;           /* Shrinks the box to fit its columns */
  min-width: 700px;
  text-align: left;             /* Content inside remains left-aligned */
}

/* Ensure flex/grid children don't force-center their text */
.comparison-col, .tl-node, .card {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Keeps items pushed to the left of their column */
}

/* Target the specific h3 within the Reveal.js structure */
.reveal .slides section .comparison-col h3.huge-stat {
  font-family: 'Merriweather', serif !important;
  font-size: 170px !important; /* Adjust this to fill the space as needed */
  font-weight: 900 !important;
  line-height: 0.8 !important;
  color: #FFD700 !important;
  margin: 10px 0 !important;
  text-align: left !important;
}

/* Ensure the first header stays smaller */
.reveal .slides section .comparison-col h3:not(.huge-stat) {
  font-size: 39px !important;
  margin-bottom: 0 !important;
}

/* Target title slide directly */
.reveal .slides section.title-slide {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.reveal .slides section.title-slide h1 {
  text-align: left;
  display: inline-block;
}

.reveal .slides section.title-slide h2 {
  text-align: left;
  display: inline-block;
}