.story-image {
    background: transparent;
}

/* These images are transparent PNGs designed to blend into the dark
   page background. In light mode there's nothing to blend into, so give
   them back the original dark backdrop they were made for. */
:root[data-theme="light"] .story-image {
    background-color: var(--card-image-backdrop);
}

.story-title {
    font-size: 40px;
    margin-top: 72.25px;
    margin-bottom: 0.5em;
}

@media (max-width: 767px) {
    .story-image {
        display: block;
        width: 100%;
        margin-bottom: 2.5em;
        margin-top: 2.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .story-title {
        margin-top: 32px;
    }
}

@media (min-width: 768px) {
    .story-image {
        display: block;
        width: 85%;
        margin-bottom: 2.5em;
        margin-top: 2.5em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
  .second-div {
    display: none;
  }
}

@media (min-width: 768px) {
  .first-div {
    width: 78%;
    float: left;
  }

  .second-div {
    font-size: 17px;
    width: 22%;
    float: right;
    flex: 0 0 var(--toc-width);
    overflow: visible;      /* <— ensure sticky isn’t disabled by overflow */
  }
}

:root{
  --toc-width: 258px;
  --toc-top: 120px;   /* distance from top while sticking */
  --bar-width: 3px;
  --grey: #b8b8b8;
  --black: var(--text-color);
  --link-gap: 10px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (min-width: 768px) and (max-width: 2399px) {
  :root {
    --toc-width: 242px;
  }
}

/* Side-by-side layout: story + sidebar */
.story-layout {
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  gap: 32px;                 /* space between story and ToC */
}

/* Story column grows; remove the old margin-right */
.story-layout {
  display: flex;
  align-items: stretch;   /* <— IMPORTANT: was flex-start */
  gap: 32px;
}

/* Sidebar column with fixed width */
.second-div {
  flex: 0 0 var(--toc-width);
}

/* ToC: sticky inside the sidebar (not fixed to viewport edge) */
.toc {
  position: sticky;
  top: var(--toc-top);    /* e.g. 120px */
  width: var(--toc-width);
  display: flex;
  gap: 14px;
  margin-top: 72.25px;
}

/* Vertical bar + progress (unchanged except for top-based fill) */
.toc__bar {
  position: relative;
  width: var(--bar-width);
  height: 60vh;
  background: var(--grey);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 var(--bar-width);
  margin-top: 2px;
}
.toc__bar-progress {
  position: absolute;
  left: 0;
  top: 0;              /* fill from TOP downward */
  width: 100%;
  height: 0%;
  background: var(--black);
  transition: height 120ms linear;
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 60vh;
  overflow: auto;
  scrollbar-width: thin;
}
.toc__item { margin: 0 0 var(--link-gap) 0; }
.toc__link {
  text-decoration: none;
  color: var(--grey);
  font-size: 18px;
  line-height: 1.2;
  display: block;
  transition: color 120ms ease;
}

@media (min-width: 2400px) {
  .toc__link {
    font-size: 19px;
  }
}
.toc__link[aria-current="true"],
.toc__link:hover { color: var(--black); text-decoration: none; }

.toc__link[aria-current="true"] { font-weight: 600; }

/* Keep h3 targets comfortably below the sticky top */
#story-body h3 { scroll-margin-top: 96px; }

/* Hide the sidebar on narrow screens */
@media (max-width: 767px) {
  .story-layout { display: block; }
  .second-div { display: none; }
}


@media (max-width: 767px) {
  .mobile-title {
    font-size: 36px;
  }
}

@media (min-width: 768px) and (max-width: 2399px) {
  .story-title {
    font-size: 38px;
  }
}

/* Zusätzliche Stufe für sehr schmale Screens (< 366px), siehe site.css. */
@media (max-width: 365px) {
  .mobile-title {
    font-size: 32.5px;
  }

  .story-title {
    margin-top: 26px;
  }

  #story-body h3,
  .story-outro {
    font-size: 24.5px;
  }
}

/* Abgesetzte Formeln laufen auf schmalen Screens oft über die Spaltenbreite
   hinaus und schieben sonst die ganze Seite auf. Stattdessen scrollt die
   Formel in ihrem eigenen Kasten.
   Greift über display="true", das MathJax bei \begin{equation} setzt (bei
   Inline-Mathe \(...\) dagegen nicht — die bleibt so im Textfluss).
   overflow-y muss explizit gesetzt werden: sobald eine Achse nicht mehr
   'visible' ist, macht CSS aus der anderen automatisch 'auto' — sonst käme
   zusätzlich eine vertikale Scrollleiste. Das Padding verhindert, dass
   'hidden' Bruchstriche und Indizes am Rand beschneidet. */
mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  /* Impulsscrolling innerhalb der Formel auf iOS */
  -webkit-overflow-scrolling: touch;
}



/* Formerly a <style> block at the top of every story fragment. :where()
   keeps the specificity of the old bare element selectors, so class rules
   inside the stories still win. */
:where(#story-body) div {
    text-align: justify;
    text-justify: inter-word;
}

:where(#story-body) p {
    line-height: 1.6;
}

:where(#story-body) h3 {
    margin-top: 1.2em;
    margin-bottom: .9em;
}

/* "Did this story spark your curiosity?" above the email subscription:
   looks like a section heading of the story, but sits outside #story-body
   so the ToC leaves it out. */
.story-outro {
    /* Room between the end of the story and the subscription, the same on
       every story (some used to end with a paragraph of <br>s for this). */
    margin-top: 250px;
    margin-bottom: .9em;
}

@media (max-width: 767px) {
    .story-outro {
        margin-top: 200px;
    }
}

.story-outro + .subscribe {
    margin-top: 12px;
}

/* --- link to the animated companion --------------------------------------- */

/* Directly under the story title: the first thing a reader sees after the
   heading, so the animated version is never missed. */
.story-animated-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 9px 18px 9px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--text-color);
  font-size: 16px;
  text-decoration: none;
  transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

.story-animated-link:hover,
.story-animated-link:focus-visible {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
  color: var(--text-color);
  text-decoration: none;
  transform: translateY(-1px);
}

.story-animated-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-color);
  /* On the fixed blue pill in both themes. */
  color: var(--chrome-text-color);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-animated-link svg {
  width: 17px;
  height: 17px;
  transition: transform var(--transition-base);
}

.story-animated-link:hover svg {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .story-animated-link {
    margin-top: 18px;
    padding: 8px 15px 8px 8px;
    font-size: 15px;
  }

  .story-animated-badge {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-animated-link,
  .story-animated-link svg {
    transition: none;
  }

  .story-animated-link:hover {
    transform: none;
  }

  .story-animated-link:hover svg {
    transform: none;
  }
}

/* === Viewport ~1500px (Full HD at 125% Windows scaling)
   All font sizes ~10% smaller (rounded to half pixels), content ~10% narrower.
   Generated from the font-size rules above that apply at this width;
   keep them in sync when a size up there changes. === */
@media (min-width: 1200px) and (max-width: 1799px) {
    .story-title { font-size: 36px; } /* 40px */
    .second-div { font-size: 15.5px; } /* 17px */
    .toc__link { font-size: 16px; } /* 18px */
    .story-title { font-size: 34px; } /* 38px */
    .story-animated-link { font-size: 14.5px; } /* 16px */
    .story-animated-badge { font-size: 11px; } /* 12px */
    :root { --toc-width: 218px; } /* 242px, shrinks with the container */
}