/* ============================================================================
   Raconteur Road — reveal.js brand theme (override layer).
   Load AFTER reveal's white.css base so every --r-* var is defined, then this
   re-skins to the literary register: paper-white ground, ink, one muted accent,
   Newsreader + JetBrains Mono, thin rules, generous whitespace.
   Mirrors ../../brand/design_tokens.md and the raconteur-road.com design language.
   ============================================================================ */

@font-face {
  font-family: 'Newsreader';
  src: url('../lib/fonts/Newsreader-Regular.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../lib/fonts/Newsreader-Italic.ttf') format('truetype');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../lib/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  --rr-paper:      #FAFAF8;
  --rr-paper-warm: #F4F1EA;
  --rr-ink:        #1A1A1A;
  --rr-rule:       #D8D3C8;
  --rr-accent:     #6B5D4F;
  --rr-quiet:      #4A4A4A;
  --rr-alert:      #9E4A3C;
  --rr-info:       #51677A;
  --rr-ground:     #6B7256;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* re-skin reveal's variables */
  --r-background-color: var(--rr-paper);
  --r-main-font: var(--serif);
  --r-main-font-size: 32px;
  --r-main-color: var(--rr-ink);
  --r-block-margin: 20px;
  --r-heading-margin: 0 0 0.5em 0;
  --r-heading-font: var(--serif);
  --r-heading-color: var(--rr-ink);
  --r-heading-line-height: 1.12;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: none;          /* brand is NOT uppercase */
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 400;              /* and avoids heavy weights */
  --r-heading1-size: 2.1em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1.2em;
  --r-heading4-size: 1.0em;
  --r-code-font: var(--mono);
  --r-link-color: var(--rr-accent);
  --r-link-color-dark: #534739;
  --r-link-color-hover: var(--rr-alert);
  --r-selection-background-color: var(--rr-rule);
  --r-selection-color: var(--rr-ink);
  --r-overlay-element-bg-color: 26, 26, 26;
  --r-overlay-element-fg-color: 250, 250, 248;
}

.reveal { font-weight: 400; letter-spacing: 0; }
.reveal .slides section { line-height: 1.5; }

/* headings: serif, calm, a touch of negative tracking on big ones */
.reveal h1 { letter-spacing: -0.012em; line-height: 1.06; }
.reveal h2 { letter-spacing: -0.006em; }
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 { font-weight: 400; text-transform: none; }

.reveal p { margin: 0.7em 0; }
.reveal em { font-style: italic; color: var(--rr-quiet); }
.reveal strong { font-weight: 600; color: inherit; }
.reveal a { text-decoration: none; border-bottom: 1px solid var(--rr-rule); }
.reveal a:hover { border-bottom-color: var(--rr-alert); }

/* lists — left-aligned, marker in the muted accent, comfortable rhythm */
.reveal ul, .reveal ol { display: inline-block; text-align: left; margin-left: 1em; }
.reveal li { margin: 0.45em 0; }
.reveal ul li::marker { color: var(--rr-accent); }
.reveal ol li::marker { color: var(--rr-accent); font-family: var(--mono); font-size: 0.85em; }

/* thin brand rule */
.reveal hr {
  border: none; height: 1px; background: var(--rr-rule);
  width: 8rem; margin: 1.1rem auto;
}

/* blockquote / pulled passage — the literary voice */
.reveal blockquote {
  border: none; box-shadow: none; background: transparent;
  font-style: italic; color: var(--rr-quiet);
  width: auto; max-width: 30ch; margin: 0.6em auto;
  font-size: 1.05em; line-height: 1.6;
}
.reveal .passage {
  font-family: var(--serif); font-style: italic; color: var(--rr-quiet);
  font-size: 1.15em; line-height: 1.7; max-width: 30ch; margin: 0.4em auto;
}

/* eyebrow / kicker — mono, accent, the section label above a heading */
.reveal .kicker {
  font-family: var(--mono); font-style: normal; font-size: 0.42em;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rr-accent); margin: 0 0 1.1em 0; display: block;
}

/* mono meta: captions, bylines, notes */
.reveal .caption { font-family: var(--mono); font-size: 0.46em; color: var(--rr-quiet); margin-top: 0.6em; }
.reveal .byline  { font-family: var(--mono); font-size: 0.5em;  color: var(--rr-quiet); }
.reveal .note    { font-family: var(--mono); font-size: 0.5em;  color: var(--rr-quiet); line-height: 1.65; }
.reveal .lead    { font-size: 1.12em; color: var(--rr-ink); }
.reveal .mono, .reveal code { font-family: var(--mono); }
.reveal .accent  { color: var(--rr-accent); }
.reveal .alertc  { color: var(--rr-alert); }

/* two columns */
.reveal .cols { display: flex; gap: 2.2rem; align-items: center; justify-content: center; }
.reveal .cols > * { flex: 1 1 0; min-width: 0; }

/* images: drop reveal's default frame/shadow for the clean paper look */
.reveal section img {
  border: none; box-shadow: none; background: transparent; margin: 0.5rem auto;
}

/* ink CTA button (the site's .explore-link), with chevron */
.reveal .cta {
  display: inline-block; padding: 0.6rem 2.4rem 0.6rem 1.1rem; position: relative;
  background: var(--rr-ink); color: var(--rr-paper);
  border: 1px solid var(--rr-ink); border-radius: 2px;
  box-shadow: 0 2px 6px rgba(26,26,26,0.12);
  font-family: var(--mono); font-size: 0.5em; letter-spacing: 0.02em; text-decoration: none;
}
.reveal .cta::after {
  content: '\203A'; position: absolute; right: 0.9rem; top: 50%;
  transform: translateY(-50%); font-size: 1.5em; line-height: 1; color: var(--rr-paper-warm);
}

/* KaTeX math — ink, sized to read from the back row */
.reveal .katex { color: var(--rr-ink); }
.reveal .katex-display { margin: 0.7em 0; font-size: 1.08em; }

/* fragments that should land coloured */
.reveal .fragment.accent.visible { color: var(--rr-accent); }
.reveal .fragment.alert.visible   { color: var(--rr-alert); }

/* ---- running chrome: a thin footer with the wordmark + slide number ---- */
.deck-chrome {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px; z-index: 30;
  display: flex; align-items: center; padding: 0 28px;
  border-top: 1px solid var(--rr-rule); background: var(--rr-paper);
  pointer-events: none;
}
.deck-chrome .dc-wordmark {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.01em; color: var(--rr-quiet);
}
.reveal .slide-number {
  right: 28px; bottom: 11px; background: transparent;
  color: var(--rr-quiet); font-family: var(--mono); font-size: 12px;
}
/* hide the chrome on title / divider slides */
html.bare .deck-chrome, html.bare .reveal .slide-number { display: none; }

/* chrome: controls + progress in the muted accent */
.reveal .controls { color: var(--rr-accent); }
.reveal .progress { color: var(--rr-accent); height: 3px; }

/* ---- cosmic slides: light type over a dark background video ---- */
.reveal section.cosmic h1,
.reveal section.cosmic h2,
.reveal section.cosmic h3,
.reveal section.cosmic p,
.reveal section.cosmic .lead,
.reveal section.cosmic strong { color: var(--rr-paper); }
.reveal section.cosmic em      { color: #d2d8c6; }   /* light sage */
.reveal section.cosmic .kicker { color: #cdbba6; }   /* light warm taupe */
.reveal section.cosmic .passage { color: #e8e4da; }
.reveal section.cosmic .caption,
.reveal section.cosmic .byline { color: #cfcabf; }
.reveal section.cosmic hr { background: rgba(250, 250, 248, 0.45); }
/* legibility over moving footage */
.reveal section.cosmic h1, .reveal section.cosmic h2, .reveal section.cosmic h3,
.reveal section.cosmic p,  .reveal section.cosmic .passage,
.reveal section.cosmic .kicker, .reveal section.cosmic .caption,
.reveal section.cosmic .byline, .reveal section.cosmic .lead {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.45);
}