/* ELI5 scrollytelling — cinematic, few words, big pictures. */

:root {
  --eli5-bg: #070b1a;
  --eli5-bg-2: #121833;
  --eli5-ink: #f7f4ee;
  --eli5-muted: rgba(247, 244, 238, 0.72);
  --eli5-gold: #e8a54b;
  --eli5-gold-soft: #f0c27a;
  --eli5-glow: #ff6b3d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.eli5-body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--eli5-ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a2452 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 40%, #2a1540 0%, transparent 50%),
    var(--eli5-bg);
  overflow-x: hidden;
}

.eli5-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 18% 48%, #fff 40%, transparent 50%),
    radial-gradient(1px 1px at 27% 22%, #fff 40%, transparent 50%),
    radial-gradient(2px 2px at 36% 78%, #fff 40%, transparent 50%),
    radial-gradient(1px 1px at 44% 35%, #fff 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 14%, #fff 40%, transparent 50%),
    radial-gradient(1px 1px at 63% 62%, #fff 40%, transparent 50%),
    radial-gradient(2px 2px at 72% 28%, #fff 40%, transparent 50%),
    radial-gradient(1px 1px at 81% 84%, #fff 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 89% 41%, #fff 40%, transparent 50%),
    radial-gradient(1px 1px at 94% 9%, #fff 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 12% 88%, #fff 40%, transparent 50%);
  opacity: 0.55;
  animation: eli5-twinkle 5s ease-in-out infinite alternate;
}

@keyframes eli5-twinkle {
  to { opacity: 0.85; }
}

.eli5-skip {
  position: absolute;
  left: -9999px;
}

.eli5-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: #111;
  border-radius: 0.5rem;
}

.eli5-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  max-width: 920px;
  margin: 0 auto;
}

.eli5-top a {
  color: var(--eli5-muted);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.eli5-top a:hover,
.eli5-top a:focus-visible {
  color: var(--eli5-ink);
}

.eli5-top a:focus-visible {
  outline: 2px solid var(--eli5-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.eli5-top__brand {
  color: var(--eli5-gold) !important;
}

#eli5-main {
  position: relative;
  z-index: 1;
}

/* —— Index —— */
.eli5-index {
  max-width: 920px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

.eli5-index__hero {
  text-align: center;
  padding: 2.5rem 0 3rem;
}

.eli5-index__eyebrow {
  color: var(--eli5-gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.eli5-index__title {
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.85rem;
  letter-spacing: -0.02em;
}

.eli5-index__dek {
  font-size: 1.15rem;
  color: var(--eli5-muted);
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.45;
}

.eli5-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.eli5-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: 1.35rem;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.eli5-card__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  margin-bottom: 0.55rem;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #25315f, #0b1229 72%);
}

.eli5-card__image {
  width: 42%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
}

.eli5-card__go {
  margin-top: 0.35rem;
  color: var(--eli5-gold-soft);
  font-weight: 800;
  font-size: 0.9rem;
}

.eli5-card:hover,
.eli5-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(232, 165, 75, 0.55);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
}

.eli5-card:focus-visible {
  outline: 2px solid var(--eli5-gold);
  outline-offset: 3px;
}

.eli5-card__eyebrow {
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
}

.eli5-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.eli5-card__blurb {
  margin: 0;
  color: var(--eli5-muted);
  font-size: 0.98rem;
  line-height: 1.4;
}

/* —— Story shell —— */
.eli5-story {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

.eli5-hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 1rem 0 3.5rem;
}

.eli5-hero__eyebrow {
  color: var(--eli5-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
}

.eli5-hero__title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.eli5-hero__dek {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  color: var(--eli5-muted);
  max-width: 26rem;
  margin: 0 auto;
  line-height: 1.45;
  text-wrap: balance;
}

.eli5-scroll {
  margin-top: 3.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.45);
  animation: eli5-bob 2.2s ease-in-out infinite;
}

@keyframes eli5-bob {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(6px); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }.eli5-stars,
  .eli5-scroll {
    animation: none;
  }
}

/* The trail sits above a hero that is nearly a full screen tall and bottom
   aligned, so it reads as a quiet line at the top of the view rather than as
   a bar pressed against the title. */
.eli5-crumbs {
  padding-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--eli5-muted);
}

.eli5-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eli5-crumbs li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: rgba(247, 244, 238, 0.35);
}

.eli5-crumbs a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.eli5-crumbs a:hover,
.eli5-crumbs a:focus-visible {
  color: var(--eli5-gold);
}

.eli5-crumbs a:focus-visible {
  outline: 2px solid var(--eli5-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.eli5-end {
  text-align: center;
  padding: 3rem 0 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2rem;
}

.eli5-end p {
  color: var(--eli5-muted);
  font-size: 1.05rem;
  margin: 0 0 1.25rem;
}

.eli5-end a {
  /* Two exits now -- the shelf and the index -- so they need to sit apart
     instead of running together on one line. */
  display: inline-block;
  margin: 0 0.9rem;
  color: var(--eli5-gold);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.eli5-end a:hover,
.eli5-end a:focus-visible {
  color: var(--eli5-gold-soft);
}

.eli5-end a:focus-visible {
  outline: 2px solid var(--eli5-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* —— The way out of the section ——
   ELI5 pages cannot load the site's Tailwind footer, so this is it in the
   section's own idiom. Quieter than .eli5-end above it: that one is the
   story's own invitation onward, this one is the site underneath. */
.eli5-site {
  position: relative;
  z-index: 2;
  margin-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 26, 0.6);
}

.eli5-site__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.5rem;
  text-align: center;
}

.eli5-site__label {
  margin: 0 0 1rem;
  color: var(--eli5-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eli5-site__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
}

.eli5-site__nav a {
  color: var(--eli5-ink);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
}

.eli5-site__nav a:hover,
.eli5-site__nav a:focus-visible {
  color: var(--eli5-gold);
}

/* The legal row is deliberately dimmer and smaller than the section links --
   it has to be present on every page, not competing with them. */
.eli5-site__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 1rem;
  margin: 1.75rem 0 0;
  color: rgba(247, 244, 238, 0.45);
  font-size: 0.78rem;
}

.eli5-site__legal a {
  color: rgba(247, 244, 238, 0.6);
  text-decoration: none;
}

.eli5-site__legal a:hover,
.eli5-site__legal a:focus-visible {
  color: var(--eli5-ink);
}

.eli5-site__nav a:focus-visible,
.eli5-site__legal a:focus-visible {
  outline: 2px solid var(--eli5-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* —— Static visuals / scenes —— */
@keyframes eli5-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* Index orbit deco */
.eli5-index__orbit {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1.25rem;
}
.eli5-index__orbit span {
  position: absolute;
  border-radius: 50%;
}
.eli5-index__orbit span:nth-child(1) {
  inset: 18%;
  background: radial-gradient(circle at 35% 30%, #ffb347, #ff6b3d);
  box-shadow: 0 0 30px rgba(255, 107, 61, 0.4);
}
.eli5-index__orbit span:nth-child(2) {
  width: 28%;
  aspect-ratio: 1;
  right: 0;
  top: 10%;
  background: radial-gradient(circle at 35% 30%, #fff6d6, #c4b48a);
  animation: eli5-float 4s ease-in-out infinite;
}
.eli5-index__orbit span:nth-child(3) {
  width: 14%;
  aspect-ratio: 1;
  left: 8%;
  bottom: 18%;
  background: #4cc9f0;
  animation: eli5-float 3.2s ease-in-out infinite reverse;
}

/* Zero toy + plate + blocks + elephant */

@media (prefers-reduced-motion: reduce) {.eli5-index__orbit span {
    animation: none;
  }
}

/* —— Index areas —— */
.eli5-index__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.eli5-index__nav a {
  text-decoration: none;
  color: #1a1400;
  background: var(--eli5-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
}

.eli5-index__nav a:hover,
.eli5-index__nav a:focus-visible {
  background: var(--eli5-gold-soft);
}

.eli5-index__nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.eli5-area {
  margin-top: 2.75rem;
  scroll-margin-top: 1.25rem;
}

.eli5-area__header {
  margin-bottom: 1rem;
}

.eli5-area__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.eli5-area__blurb {
  margin: 0;
  color: var(--eli5-muted);
  font-size: 1rem;
}

/* —— Art objects (SVG kit) —— */
.eli5-art {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* `.eli5-card__art` asks for a glyph centred in a 16/9 band -- `aspect-ratio`,
   `place-items: center`, and `.eli5-card__image` at 42% wide with the height of
   the band. None of that reached the page. `.eli5-card__image` and `.eli5-art`
   are both one class, so they carry the same specificity, and `.eli5-art` is
   declared further down this file -- its `width: 100%; height: auto` won every
   card. The art rendered 145px tall inside an 81.7px band and `overflow:
   hidden` cut the lower 44% off every glyph in the catalogue, which is why the
   cards showed heads and no bodies. Naming both classes settles the tie in
   favour of the rule that was written for cards.

   `object-fit` on `.eli5-card__image` is inert here -- it applies to replaced
   elements, and this is an inline `svg` -- but the glyph still fits rather than
   stretches, because its own `viewBox` and default `preserveAspectRatio` do
   exactly what `contain` would have done. */
.eli5-art.eli5-card__image {
  width: 42%;
  height: 100%;
}

/* —— Denser index + area pages —— */
.eli5-index__count {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0.05rem 0.35rem;
  margin-left: 0.15rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.72em;
}

.eli5-area__all,
.eli5-area__more a {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--eli5-gold);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.92rem;
}

.eli5-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.85rem;
}

/* —— Rebuilt story: labelled diagrams, one step at a time —— */

.eli5-hero--recipe {
  min-height: auto;
  justify-content: center;
  padding: 3.5rem 0 2rem;
}

.eli5-figure {
  position: relative;
  margin: 0 0 0.25rem;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #0a0f22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.eli5-figure--hero {
  margin-top: 2.25rem;
}

.eli5-figure__stage {
  display: block;
  line-height: 0;
}

.eli5-diagram {
  display: block;
  width: 100%;
  height: auto;
}

.eli5-figure__stage {
  cursor: zoom-in;
}

/* Sits over the drawing's bottom-right corner. Ships hidden and is revealed by
   the controller, so where the script does not run there is no button that
   does nothing -- the picture is simply the picture, as it was for 42 waves. */
.eli5-figure__zoom {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.34rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 15, 34, 0.82);
  color: var(--eli5-gold-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: zoom-in;
}

.eli5-figure__zoom:hover,
.eli5-figure__zoom:focus-visible {
  border-color: var(--eli5-gold);
  color: var(--eli5-gold);
}

.eli5-figure__zoom-mark {
  font-size: 1rem;
  line-height: 1;
}

/* A figure with a caption puts the button over the drawing, not the caption. */
.eli5-figure:has(.eli5-figure__caption) .eli5-figure__zoom {
  bottom: 3.1rem;
}

.eli5-viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #05080f;
  color: var(--eli5-gold-soft);
}

.eli5-viewer::backdrop {
  background: rgba(3, 5, 12, 0.92);
}

/* The drawing is deliberately allowed to be wider than the screen -- that is
   the whole point of opening it -- so this is the thing that scrolls. */
.eli5-viewer__scroll {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(100dvh - 3.6rem);
  overflow: auto;
  overscroll-behavior: contain;
}

.eli5-viewer__frame {
  margin: auto;
  padding: 0.75rem;
}

.eli5-viewer__diagram {
  display: block;
  border-radius: 1rem;
}

.eli5-viewer__bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.eli5-viewer__close {
  padding: 0.45rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--eli5-gold-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.eli5-viewer__close:hover,
.eli5-viewer__close:focus-visible {
  border-color: var(--eli5-gold);
  color: var(--eli5-gold);
}

/* The words inside a diagram are drawn at a fixed size in an 800-wide box, so
   how big they land is decided entirely by how wide that box is allowed to be.
   In the 375px column the reading measure gives it, they render at around 10px
   against 16px body text -- the smallest type on a page whose whole promise is
   "big pictures, few words". Below the breakpoint the figure gives up the card
   look and takes the full width of the screen instead, which is the only room
   left to hand it: 335px to 375px, every label 12% bigger, and not one of them
   rewritten to get it. Cancelling the shell's own padding is exact and, unlike
   100vw, does not count a scrollbar that isn't there. */
@media (max-width: 719px) {
  .eli5-figure {
    width: calc(100% + 2.5rem);
    /* Both sides, not just the left. The hero sits in a centring flex column,
       and a box whose margin box is wider than the line gets that overhang
       split between the two edges -- so a lone negative left margin hangs the
       hero 10px off the screen while every beat below it lands square. */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }
}

.eli5-figure__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--eli5-gold);
  color: #1a1400;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eli5-figure__caption {
  margin: 0;
  padding: 0.7rem 1.15rem 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--eli5-gold-soft);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.eli5-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: eli5-step;
}

.eli5-step {
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.eli5-step:first-child {
  border-top: 0;
}

.eli5-step__marker {
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.eli5-step__title {
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.eli5-step__text {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--eli5-muted);
  margin: 1.4rem 0 0;
  text-wrap: pretty;
}

.eli5-step__aside {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid var(--eli5-gold);
  border-radius: 0 0.75rem 0.75rem 0;
  background: rgba(232, 165, 75, 0.09);
  color: var(--eli5-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.eli5-takeaway,
.eli5-tryit {
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.eli5-takeaway {
  border-color: rgba(232, 165, 75, 0.42);
  background: rgba(232, 165, 75, 0.08);
}

.eli5-takeaway__label,
.eli5-tryit__label {
  margin: 0 0 0.5rem;
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eli5-takeaway__text {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.eli5-tryit__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--eli5-muted);
}

.eli5-related {
  margin-top: 2.5rem;
}

.eli5-related__label {
  margin: 0 0 0.9rem;
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eli5-related__list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eli5-related__list a {
  display: block;
  padding: 0.85rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--eli5-ink);
  text-decoration: none;
  font-weight: 700;
}

.eli5-related__list a:hover,
.eli5-related__list a:focus-visible {
  border-color: var(--eli5-gold);
  background: rgba(232, 165, 75, 0.1);
}

@media (min-width: 720px) {
  .eli5-step {
    padding: 3.75rem 0;
  }

  .eli5-related__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Topic tags — hubs that cut across the seven shelves. */

.eli5-tags {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.eli5-tags__link {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.eli5-tags__link:hover,
.eli5-tags__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--eli5-gold);
  background: rgba(232, 165, 75, 0.1);
}

.eli5-tags__label {
  font-size: 1.05rem;
  font-weight: 800;
}

.eli5-tags__blurb {
  color: var(--eli5-muted);
  font-size: 0.88rem;
}

/* Chips at the foot of a story, into the hubs it belongs to. */

.eli5-topics {
  margin-top: 2.5rem;
}

.eli5-topics__label {
  margin: 0 0 0.7rem;
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eli5-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eli5-topics__list a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--eli5-ink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
}

.eli5-topics__list a:hover,
.eli5-topics__list a:focus-visible {
  border-color: var(--eli5-gold);
  background: rgba(232, 165, 75, 0.12);
}

/* The way out to the word lists. Deliberately not chips: these leave ELI5 for
   another part of the site, so they read as sentences rather than as more of
   the tag row directly above them. */

.eli5-practise {
  margin-top: 2.5rem;
}

.eli5-practise__label {
  margin: 0 0 0.7rem;
  color: var(--eli5-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eli5-practise__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eli5-practise__list a {
  color: var(--eli5-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 800;
}

.eli5-practise__list a:hover,
.eli5-practise__list a:focus-visible {
  color: var(--eli5-gold);
  text-decoration: underline;
}

@media (min-width: 720px) {
  .eli5-tags {
    grid-template-columns: 1fr 1fr;
  }
}