/* ============================================================
   closeread scrollytelling — dark theme for jorgeroac
   Overrides closeread's light defaults (set in closeread.css :root)
   and breaks the story out of the article reading column.
   ============================================================ */

:root {
  --cr-narrative-background-color-overlay: rgba(10, 13, 16, 0.90);
  --cr-narrative-text-color-overlay: rgba(255, 255, 255, 0.92);
  --cr-narrative-background-color-sidebar: transparent;
  --cr-narrative-text-color-sidebar: rgba(255, 255, 255, 0.90);
  --cr-section-background-color: transparent;   /* merge into the site background */
  --cr-narrative-font-family: 'Quicksand', system-ui, sans-serif;
  --cr-narrative-border-radius: 0.85rem;
  --cr-narrative-overlay-max-width: 30rem;
}

/* Keep the story inside the article reading column so the page keeps the
   standard tutorial layout (right-hand TOC + reading width, like the other
   tutorials). closeread defaults the section to the full-viewport `screen`
   grid column; pin it to the body-content track instead, where the article
   prose lives — left of the TOC, no collision, no full-bleed math. */
.cr-section,
.cr-section.cr-column-screen {
  grid-column: body-content !important;   /* narrow safe default — clears the TOC at any width */
  width: 100% !important;
}
/* On wide screens, run the WHOLE page (prose + code + figures + story) at the
   same page width so there's one consistent, wider column — no narrow text
   beside a wider story. Below 1200px everything falls back to the reading
   column so it clears the TOC. */
@media (min-width: 1200px) {
  /* promote every section wrapper to the page-width track (like the story
     section) and widen it so prose and story share one consistent column,
     left-aligned so the wider column clears the right-hand TOC. The max-width
     widens by breakpoint below (see the staircase) so the content's right edge
     tracks toward the TOC instead of pooling empty space beside it. */
  main#quarto-document-content > section.level1 {
    grid-column: screen-start / screen-end !important;
    max-width: 817px !important;
    justify-self: start !important;
  }

  .cr-section,
  .cr-section.cr-column-screen,
  main#quarto-document-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, .callout, .cell, div.sourceCode, .quarto-figure, table, pre),
  main#quarto-document-content section.level1 > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, .callout, .cell, div.sourceCode, .quarto-figure, table, pre),
  main#quarto-document-content section.level2 > :is(p, h2, h3, h4, h5, ul, ol, dl, blockquote, .callout, .cell, div.sourceCode, .quarto-figure, table, pre) {
    grid-column: screen-start / screen-end !important;
  }
}
/* Widen toward the TOC by breakpoint. justify-self: start pins the content to
   the screen-start track, whose left inset GROWS with the viewport (measured
   left edge: 71px @1440, 131px @1680, 191px @1920), while the TOC's left edge
   also moves right. Each cap is sized so the content's right edge lands ~40px
   short of the measured TOC edge at that width — filling the gap without ever
   overlapping the TOC. Measured TOC left edges / content left insets:
   919/41 @1200, 993/41 @1280, 1073/71 @1440, 1193/131 @1680, 1313/191 @1920. */
@media (min-width: 1280px) {
  main#quarto-document-content > section.level1 { max-width: 880px !important; }
}
@media (min-width: 1440px) {
  main#quarto-document-content > section.level1 { max-width: 960px !important; }
}
@media (min-width: 1680px) {
  main#quarto-document-content > section.level1 { max-width: 1020px !important; }
}
@media (min-width: 1920px) {
  main#quarto-document-content > section.level1 { max-width: 1080px !important; }
}
/* Readable two-column split only where there's room. Below 768px we leave
   closeread's own responsive rules alone (single-column overlay under 576px). */
@media (min-width: 768px) {
  .cr-section.sidebar-left  { grid-template-columns: minmax(220px, 1fr) 1.7fr; }
  .cr-section.sidebar-right { grid-template-columns: 1.7fr minmax(220px, 1fr); }
}

/* Tighten the scroll spacing between beats (closeread defaults to 45svh,
   which leaves big empty gaps around the pinned figure). */
.cr-section .narrative-col .trigger { padding-block: 34svh; }

/* Narrative cards (the scrolling prose column) */
.cr-section .narrative-col .trigger .narrative {
  font-size: 1.06rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.sidebar-left .narrative-col .narrative,
.sidebar-right .narrative-col .narrative {
  border-left: 2px solid rgba(100, 181, 246, 0.40);
  padding-left: 1rem;
}
.cr-section .narrative-col .trigger .narrative strong { color: #64B5F6; }
.cr-section .narrative-col .trigger .narrative code {
  background: rgba(100, 181, 246, 0.12);
  color: #cfe6fb;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Inline code in the body prose. The site default is light-blue text on a
   light-grey chip — low contrast (washes out) on the black page. Use the same
   dark-tinted chip + bright text as the scroll-story so it reads clearly.
   :not(pre) > code targets inline code only, never the block code chunks. */
main#quarto-document-content :not(pre) > code {
  background: rgba(100, 181, 246, 0.14);
  color: #cfe6fb;
  padding: 0.08em 0.36em;
  border-radius: 4px;
}

/* The sticky figure: center, fit the viewport, no Quarto figure chrome */
.cr-section .sticky-col .sticky-col-stack .sticky figure { margin: 0; }
.cr-section .sticky-col .sticky-col-stack .sticky figcaption { display: none; }
.cr-section .sticky-col .sticky-col-stack .sticky img,
.cr-section .sticky-col .sticky-col-stack .sticky svg {
  max-width: 100%;
  max-height: 85vh;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Smoother frame transitions — closeread fades opacity linearly; ease it, and
   give pan/zoom (transform) a gentle ease-out so zooms feel deliberate. */
.cr-section .sticky-col .sticky-col-stack .sticky {
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              transform-origin 0.95s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ggiraph (girafe) paints a white SVG canvas (.ggiraph-svg-bg, fill="#FFFFFF")
   by default; strip it so the interactive benchmark plot merges with the black
   page. CSS fill overrides the SVG presentation attribute. */
.ggiraph-svg-bg { fill: transparent !important; stroke: transparent !important; }

/* ── Mobile: stabilize the pinned figure so the scroll-story doesn't jump ─────
   closeread pins the sticky figure at `height: 100dvh`. On phones, `dvh` grows
   and shrinks as the browser address bar hides/shows during a scroll, reflowing
   the pinned figure and (together with scrollama's resize handler) jerking the
   scroll back to the section top. `svh` is the STABLE small-viewport height — it
   ignores the address bar — so the figure stays put and the scroll-story
   animation keeps playing on mobile. Paired with the width-only resize guard in
   closeread.js so scrollama also ignores address-bar resizes. */
.cr-section .sticky-col .sticky-col-stack { height: 100svh !important; }