/* ==========================================================================
   Hempdustry 2 — design system
   Swiss/International Typographic grid on a paper-white ground. One
   grotesque, one ink, one leaf-green accent; the real colour comes from
   the screenshots ("plates") and the mod's own pixel art. See /research.
   ========================================================================== */

:root {
  /* ---- colour ----
     Each colour is light-dark(day, night). The page follows the reader's system setting
     (color-scheme: light dark); the sun/moon switch in the header pins one with data-theme. */
  color-scheme: light dark;
  --ink: light-dark(#17140f, #ebe4d3);
  --paper: light-dark(#f5f2ea, #15130e);
  --leaf: light-dark(#2f6b1f, #7cc35a);
  --leaf-bright: light-dark(#4c9a2a, #94d870);
  --bad: light-dark(#9b2d20, #ec8a74);
  /* text on a leaf ground (buttons); paper by day, ink-dark by night */
  --on-leaf: light-dark(#f5f2ea, #15130e);

  /* ---- Minecraft inventory slot, used as the frame for pixel icons ---- */
  --slot-bg: #8b8b8b;
  --slot-dark: #373737;
  --slot-light: #ffffff;

  /* ---- type ---- */
  --font: "Archivo", system-ui, -apple-system, sans-serif;
  --text-display: clamp(2.75rem, 1rem + 8vw, 8.5rem);
  --text-h2: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --text-h3: clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem);
  --text-lede: clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* ---- space: 8px base unit ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container-max: 90rem;
  --container-pad: clamp(1rem, 4vw, 3rem);
  --pixel-grid: 16px;
}

/* a browser from before light-dark() (mid-2024) keeps the day colours, and the switch is hidden */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --ink: #17140f;
    --paper: #f5f2ea;
    --leaf: #2f6b1f;
    --leaf-bright: #4c9a2a;
    --bad: #9b2d20;
    --on-leaf: #f5f2ea;
  }
  .disclaimer, .config-card, .discord-card, .old-worlds, .cfg-jump, .yt-facade, .yt-frame, .yt-play, .yt-stamp {
    --ink: #17140f;
    --paper: #f5f2ea;
  }
  .theme-toggle, .explore-theme { display: none !important; }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The ink panels (disclaimer, config file, terminal, Discord card, old worlds, video badges) stay dark at
   night too: inside them ink is a lifted night grey and paper stays cream, so their rules read the same. */
.disclaimer, .config-card, .discord-card, .old-worlds, .cfg-jump, .yt-facade, .yt-frame, .yt-play, .yt-stamp {
  --ink: light-dark(#17140f, #25221b);
  --paper: light-dark(#f5f2ea, #ebe4d3);
}

/* Shades, worked out again wherever ink or paper is redefined (a custom property keeps the value it got
   where it was declared, so the panels need their own copy). */
:root,
.disclaimer, .config-card, .discord-card, .old-worlds, .cfg-jump, .yt-facade, .yt-frame, .yt-play, .yt-stamp {
  --ink-85: color-mix(in oklab, var(--ink) 85%, var(--paper));
  --ink-60: color-mix(in oklab, var(--ink) 60%, var(--paper));
  --ink-35: color-mix(in oklab, var(--ink) 35%, var(--paper));
  --ink-15: color-mix(in oklab, var(--ink) 15%, var(--paper));
  --paper-dim: color-mix(in oklab, var(--paper) 93%, var(--ink));
  --leaf-wash: color-mix(in oklab, var(--leaf) 10%, var(--paper));
  --bad-wash: color-mix(in oklab, var(--bad) 10%, var(--paper));
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

main a:not(.button) {
  text-decoration-color: var(--ink-35);
  text-underline-offset: 0.15em;
}

main a:not(.button):hover { text-decoration-color: var(--ink); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--ink-15);
  padding: 0.1em 0.35em;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* every 16px texture on the page is drawn with hard pixels */
img[src*="/icons/"], img[src*="/paintings/"], img[src*="/discs/"] {
  image-rendering: pixelated;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

main { counter-reset: section; }

main > section { scroll-margin-top: 4.5rem; }

main > section:not(.hero):not(.stats) {
  counter-increment: section;
  padding-block: var(--space-7);
  border-top: 1px solid var(--ink-15);
}

main > section:not(.hero):not(.stats) > .container > h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--leaf);
  margin-bottom: var(--space-2);
}

h2 {
  font-size: var(--text-h2);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  max-width: 52ch;
  color: var(--ink-85);
  margin-bottom: var(--space-5);
}

.small {
  font-size: var(--text-small);
  color: var(--ink-60);
  max-width: 52ch;
}

.center { text-align: center; margin-inline: auto; }

.cta { margin-top: var(--space-3); }

/* a split row: plate on one side, text on the other */
.split {
  display: grid;
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-6);
}

@media (min-width: 64rem) {
  .split { grid-template-columns: 1.2fr 1fr; gap: var(--space-5); }
}

/* ==========================================================================
   Plates — the screenshots
   ========================================================================== */

.plate {
  border: 1px solid var(--ink);
  background: var(--ink);
}

.plate img {
  width: 100%;
  height: auto;
}

.plate figcaption {
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: 0.6rem 0.9rem;
  font-size: var(--text-small);
  color: var(--ink-85);
}

.plate figcaption span {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-right: 0.6em;
}

@supports (animation-timeline: view()) {
  .plate, .strain, .device, .chain li, .block-grid li, .extra-grid li, .soon-grid li,
  .chapter-art, .discord-why li {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
}

@keyframes reveal-up {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ==========================================================================
   Slots — pixel icons framed like a Minecraft inventory cell
   ========================================================================== */

.slot {
  --size: 3.25rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  background: var(--slot-bg);
  border: 3px solid;
  border-color: var(--slot-dark) var(--slot-light) var(--slot-light) var(--slot-dark);
}

.slot img { width: 75%; height: 75%; }
.slot-lg { --size: 4.5rem; }
.slot-xl { --size: 6.5rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  padding: 0.8em 1.3em;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button:hover, .button:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.button-primary {
  background: var(--leaf);
  border-color: var(--leaf);
  color: var(--on-leaf);
}

.button-primary:hover, .button-primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.button-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* platform logos (the sprite at the top of the page), drawn in the text colour */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo {
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}

/* ==========================================================================
   Header — one row at every width: Explore (a menu of the page), Wiki, FAQ,
   Discord, and the Download button
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: var(--text-h3);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img { width: 24px; height: 24px; }

.site-nav { flex: 1; min-width: 0; }

.nav-main {
  display: flex;
  align-items: center;
  justify-content: safe flex-end;
  gap: var(--space-4);
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .nav-main { justify-content: center; }
}

.nav-main > li > a,
.nav-explore summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-block: 0.5rem;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.nav-main > li > a::after,
.nav-explore summary::after {
  content: "";
  position: absolute;
  inset: auto 0 0.15rem 0;
  height: 2px;
  background: var(--leaf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-main > li > a:hover::after,
.nav-main > li > a:focus-visible::after,
.nav-main > li > a[aria-current]::after,
.nav-explore summary:hover::after,
.nav-explore summary:focus-visible::after,
.nav-explore summary[aria-current]::after,
.nav-explore[open] summary::after { transform: scaleX(1); }

.nav-main > li > a[aria-current],
.nav-explore summary[aria-current] { color: var(--leaf); }

.nav-main .ext { color: var(--leaf); }
.nav-main .logo { width: 1.25em; height: 1.25em; }

/* Explore: a details/summary menu, so it opens without JavaScript too */
.nav-explore { position: relative; }

.nav-explore summary { list-style: none; }
.nav-explore summary::-webkit-details-marker { display: none; }

.chev {
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.2em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate 0.2s ease, margin 0.2s ease;
}

.nav-explore[open] .chev { rotate: 225deg; margin-top: 0.25em; }

.explore-menu {
  position: absolute;
  top: calc(100% + 0.95rem);
  left: -1rem;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.25rem;
  padding: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--leaf);
  white-space: nowrap;
}

.explore-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.explore-menu .slot { --size: 2.25rem; border-width: 2px; }
.explore-menu a:hover, .explore-menu a:focus-visible { background: var(--leaf-wash); }
.explore-menu a[aria-current] { background: var(--leaf-wash); color: var(--leaf); }

/* Day/night switch: a window on the Minecraft sky. Sun and moon ride opposite ends of one wheel, as
   they do in game, so switching sets the sun in the west while the moon rises in the east.
   It sits in the header on wide screens and as the last row of the Explore menu on narrow ones.
   Hidden until the script wires it (no script: the page follows the system setting). */
.theme-toggle {
  flex-shrink: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.theme-toggle[hidden], .explore-theme:has(.theme-toggle[hidden]) { display: none; }

.theme-sky {
  --sky-day: #78a7ff;   /* the overworld's daytime sky */
  --sky-night: #0b0d1a;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  background: var(--sky-day);
  border: 1.5px solid var(--ink);
  transition: background-color 0.7s ease;
}
[data-theme="dark"] .theme-sky { background: var(--sky-night); }

.theme-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% 150%;
  transition: rotate 0.7s cubic-bezier(0.45, 0, 0.2, 1);
}
[data-theme="dark"] .theme-orbit { rotate: 180deg; }

.theme-orbit img {
  position: absolute;
  left: 50%;
  width: 64px;
  height: 64px;
  max-width: none;
  translate: -50% -50%;
}
.theme-sun { top: 50%; }
.theme-moon { top: 250%; rotate: 180deg; }

/* a pointer over it nudges the sky toward the switch */
@media (hover: hover) {
  .theme-toggle:hover .theme-orbit { rotate: 14deg; }
  [data-theme="dark"] .theme-toggle:hover .theme-orbit { rotate: 194deg; }
}

/* the menu row: the same sky as a slot, then its name and state */
.explore-theme { grid-column: 1 / -1; border-top: 1px solid var(--ink-15); padding-top: 0.25rem; }
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  font-weight: 700;
  text-align: left;
  transition: background-color 0.15s ease;
}
.theme-toggle-row:hover, .theme-toggle-row:focus-visible { background: var(--leaf-wash); }
.theme-toggle-row .theme-sky { width: 2.25rem; height: 2.25rem; }
.theme-state { margin-left: auto; font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); }

/* the header button on wide screens, the menu row on narrow ones */
@media (min-width: 46rem) {
  .explore-theme { display: none; }
}
@media (max-width: 45.99rem) {
  .header-inner > .theme-toggle { display: none; }
}

.header-cta { flex-shrink: 0; }
.header-cta[aria-current] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--leaf); }

@media (max-width: 56rem) {
  .nav-label { display: none; }
}

@media (max-width: 52rem) {
  .nav-main { gap: var(--space-3); }
}

/* below a laptop the menu hangs from the whole header, inside the page margins */
@media (max-width: 63.99rem) {
  .nav-explore { position: static; }
  .explore-menu {
    top: 100%;
    left: var(--container-pad);
    right: var(--container-pad);
    grid-template-columns: repeat(2, 1fr);
    white-space: normal;
  }
}

@media (max-width: 41rem) {
  .header-inner { gap: var(--space-2); }
  .brand { font-size: 1rem; }
  .header-cta { padding: 0.6em 0.9em; }
  .nav-main { gap: 1.1rem; }
  .nav-main .ext { display: none; }
  .explore-menu { grid-template-columns: 1fr 1fr; }
}

/* the name would run under the links here: the leaf alone takes you home */
@media (max-width: 37rem) {
  .brand-text { display: none; }
}

/* a phone: the hero names the mod right below, so the header keeps only the four links and the button */
@media (max-width: 30rem) {
  .brand { display: none; }
  .header-cta .logo { display: none; }
  .header-cta { padding: 0.6em 0.8em; }
  .nav-main { gap: 0.95rem; justify-content: safe flex-start; }
  .nav-main > li > a, .nav-explore summary { font-size: 0.8rem; letter-spacing: 0.02em; }
}

@media (max-width: 22.5rem) {
  .nav-main > li:last-child { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: var(--space-6) var(--space-6);
  background-image: radial-gradient(var(--ink-15) 1px, transparent 1px);
  background-size: var(--pixel-grid) var(--pixel-grid);
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  margin-block: var(--space-4) var(--space-5);
}

@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.hero-subtitle {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-2);
}

.hero-description {
  font-size: var(--text-lede);
  line-height: 1.45;
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.hero-actions .button-primary {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--text-body);
  padding-block: 1em;
}

.hero-note {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--ink-60);
}

.plate-hero { box-shadow: 10px 10px 0 var(--leaf); }

/* the loop: plant → harvest → smoke → bake → build */
.loop {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  counter-reset: none;
}

.loop li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.loop img { width: clamp(40px, 7vw, 64px); height: auto; }

/* six steps must fit a phone: smaller type, tighter steps, smaller icons */
@media (max-width: 30rem) {
  .loop { gap: 0.5rem; }
  .loop li { min-width: 0; font-size: 0.6rem; letter-spacing: 0.02em; }
  .loop img { width: 32px; }
  .loop li + li::before { left: -0.25rem; top: 0; font-size: 0.9rem; }
}

.loop li + li::before {
  content: "\2192";
  position: absolute;
  left: calc(-1 * var(--space-2) / 2);
  top: clamp(12px, 2.5vw, 22px);
  translate: -50% 0;
  font-size: 1.25rem;
  color: var(--ink-35);
}

/* ==========================================================================
   Disclaimer band + stats strip
   ========================================================================== */

.disclaimer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-3);
}

.disclaimer p {
  font-size: var(--text-small);
  max-width: 80ch;
  color: color-mix(in oklab, var(--paper) 85%, var(--ink));
}

.disclaimer strong { color: var(--paper); }

.stats { border-bottom: 1px solid var(--ink); }

/* eight cells; the 1px gap over an ink-15 ground draws the rules between them at every width */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink-15);
}

@media (min-width: 21rem) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 64rem) {
  .stat-grid { grid-template-columns: repeat(8, 1fr); }
}

.stat-grid li { background: var(--paper); }

.stat-grid a {
  display: block;
  height: 100%;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.stat-grid a:hover { background: var(--leaf-wash); }
.stat-grid a:hover b { color: var(--leaf); }

@media (max-width: 40rem) {
  .stat-grid a { padding: var(--space-2) 0.6rem; font-size: 0.625rem; letter-spacing: 0.02em; }
  .stat-grid a b { font-size: 1.75rem; }
}

.stat-grid b {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 0.15s ease;
}

/* ==========================================================================
   Feature sections
   ========================================================================== */

.plate-wide + *, .plate + .strain-grid, .plate + .chain, .plate + .block-grid {
  margin-top: var(--space-4);
}

/* a plate after a grid of cards gets the same air above it as below */
.strain-grid + .plate { margin-top: var(--space-5); }

/* grow */
.strain-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .strain-grid { grid-template-columns: 1fr 1fr; }
}

.strain {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--ink);
  background: var(--paper-dim);
}

.strain h3 { font-size: var(--text-h2); line-height: 1; margin-bottom: 0.4rem; }
.strain p { color: var(--ink-85); }

.tips {
  display: grid;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 56rem) {
  .tips { grid-template-columns: repeat(3, 1fr); }
}

.tips li {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-2);
  color: var(--ink-85);
}

.tips b { color: var(--ink); }

/* smoke */
.device-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.device {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.device .slot { margin-bottom: var(--space-2); transition: rotate 0.2s ease; }
.device:hover .slot { rotate: -4deg; }
.device h3 { font-size: var(--text-h3); }
.device p { color: var(--ink-85); max-width: 28ch; }

.effects {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--ink);
}

@media (min-width: 56rem) {
  .effects { grid-template-columns: 1fr 1fr 1.2fr; align-items: center; }
}

.effect-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.effect-card h3 img { width: 32px; height: 32px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font-size: var(--text-small);
  font-weight: 700;
  padding: 0.3em 0.7em;
  border: 1.5px solid;
}

.chip-good { color: var(--leaf); background: var(--leaf-wash); }
.chip-good::before { content: "+ "; }
.chip-bad { color: var(--bad); background: var(--bad-wash); }
.chip-bad::before { content: "\2212\00a0"; }

.effect-note { color: var(--ink-85); }

.callout {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-left: 6px solid var(--leaf);
  background: var(--leaf-wash);
  max-width: 64ch;
  font-size: var(--text-lede);
  line-height: 1.45;
}

.split .callout { font-size: var(--text-body); }

/* kitchen: the four-step chain */
.chain {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  counter-reset: step;
}

.chain li {
  position: relative;
  counter-increment: step;
  padding: var(--space-3);
  border: 1px solid var(--ink);
}

.chain li::after {
  content: counter(step);
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: var(--text-h2);
  font-weight: 900;
  line-height: 1;
  color: var(--ink-15);
}

.chain .slot { margin-bottom: var(--space-2); }
.chain h3 { font-size: var(--text-h3); margin-bottom: 0.25rem; }
.chain p { color: var(--ink-85); font-size: var(--text-small); }

/* inventory lists: slot + label */
.inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.inventory li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: var(--text-small);
}

.inventory-row { margin-bottom: var(--space-2); }

.sober, .outfit {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-15);
}

.sober h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }

/* build */
.block-grid, .extra-grid, .soon-grid {
  display: grid;
  gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* three and six tiles read best three across */
.extra-grid, .soon-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.block-grid li, .extra-grid li, .soon-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--space-2);
  align-items: start;
}

.block-grid .slot, .extra-grid .slot, .soon-grid .slot { grid-row: span 2; }
.block-grid h3, .extra-grid h3, .soon-grid h3 { font-size: var(--text-h3); align-self: end; }
.block-grid p, .extra-grid p, .soon-grid p { color: var(--ink-85); font-size: var(--text-small); }

/* extras */
.paintings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: #6d5a3c url("../icons/hemp_bricks_block.png") repeat;
  background-size: 48px;
  image-rendering: pixelated;
  border: 1px solid var(--ink);
  margin-bottom: var(--space-2);
}

.paintings li {
  padding: 6px;
  background: #5b3f1f;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  transition: rotate 0.2s ease;
}

.paintings li:hover { rotate: -2deg; }

.paintings img { height: auto; }

/* 48px of screen per block (32px on a phone), so the sizes compare as they do on a wall */
.paintings .p-1x2 { width: 48px; }
.paintings .p-2x2, .paintings .p-2x3 { width: 96px; }
.paintings .p-3x3 { width: 144px; }
.paintings .p-4x4 { width: 192px; }

@media (max-width: 40rem) {
  .paintings .p-1x2 { width: 32px; }
  .paintings .p-2x2, .paintings .p-2x3 { width: 64px; }
  .paintings .p-3x3 { width: 96px; }
  .paintings .p-4x4 { width: 128px; }
}

.paintings + .small { margin-bottom: var(--space-6); }

/* For servers and modpacks: the config file as a dark card, the switches as chips, then the hooks */
.config-split {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 64rem) {
  .config-split { grid-template-columns: 1fr 1.1fr; gap: var(--space-5); }
}

.config-card {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--leaf);
}

.config-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--ink-85);
  font-size: var(--text-small);
}

.config-card figcaption code { background: none; padding: 0; color: var(--ink-15); }

.config-dots { display: inline-flex; gap: 0.35rem; }
.config-dots::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--leaf-bright); box-shadow: 0.95rem 0 0 var(--ink-60), 1.9rem 0 0 var(--ink-60); margin-right: 1.9rem; }

.config-card pre {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  overflow-x: auto;
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
  line-height: 1.6;
}

.config-card pre code { background: none; padding: 0; font-size: inherit; color: var(--ink-15); }
.config-card .k { color: #a8d987; }
.config-card .v { color: #f2c46d; }

.config-note {
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--text-small);
  color: var(--ink-15);
}

.config-note b { color: var(--paper); }
.config-note code { background: var(--ink-85); color: var(--paper); }

.config-keys h3 { font-size: var(--text-h3); margin-bottom: 0.4rem; }
.config-keys .chips { margin-block: var(--space-3); }
.config-keys .chip { color: var(--ink); background: var(--paper-dim); border: 1px solid var(--ink-15); }
.config-keys .small { max-width: 60ch; }

.server-grid { margin-top: var(--space-6); }

/* the config builder (assets/js/config-tool.js): presets, the keys by section, and the file it writes */
.cfg[hidden], .cfg [hidden], .config-split[hidden] { display: none !important; }
.cfg { scroll-margin-top: 5rem; }
.cfg-title { font-size: var(--text-h3); margin-bottom: 0.4rem; }
.cfg-intro { max-width: 70ch; margin-bottom: var(--space-4); }

.cfg-label { font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.6rem; }
.cfg-label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-60); font-size: var(--text-small); }

.cfg-top {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 64rem) { .cfg-top { grid-template-columns: 1fr auto; align-items: end; } }

.cfg-preset-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cfg-preset {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  padding: 0.45em 0.8em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
}
.cfg-preset img { width: 16px; height: 16px; image-rendering: pixelated; }
.cfg-preset:hover { background: var(--paper-dim); }
.cfg-preset[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--on-leaf); }
.cfg-preset[aria-pressed="true"]::after { content: "\2713"; }
.cfg-reset-all { border-style: dashed; color: var(--ink-60); }

.cfg-version { border: 0; padding: 0; margin: 0; min-width: 0; }
.cfg-version legend { padding: 0; }
.cfg-version label { display: inline-flex; cursor: pointer; }
.cfg-version input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-version span { font-size: var(--text-small); font-weight: 700; padding: 0.45em 0.8em; border: 1.5px solid var(--ink); }
.cfg-version label + label span { border-left: 0; }
.cfg-version input:checked + span { background: var(--ink); color: var(--paper); }
.cfg-version input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: 2px; }

.cfg-body { display: grid; gap: var(--space-5); margin-top: var(--space-4); align-items: start; }
@media (min-width: 64rem) {
  .cfg-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cfg-out { position: sticky; top: 5.5rem; }
}

.cfg-section { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.cfg-section legend { display: flex; align-items: center; gap: 0.75rem; padding: 0; font-size: var(--text-h3); font-weight: 700; }
.cfg-section legend .slot { --size: 2.25rem; }
.cfg-section legend code { font-size: var(--text-micro); font-weight: 400; }
.cfg-applies { font-size: var(--text-small); color: var(--ink-60); margin: 0.5rem 0 0.75rem; }

.cfg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text undo" "control control";
  gap: 0.5rem var(--space-2);
  padding: 0.85rem 0 0.85rem 0.85rem;
  border-top: 1px solid var(--ink-15);
  border-left: 3px solid transparent;
}
@media (min-width: 40rem) {
  .cfg-row { grid-template-columns: minmax(0, 1fr) 15rem 1.75rem; grid-template-areas: "text control undo"; align-items: center; }
}
.cfg-text { grid-area: text; }
.cfg-control { grid-area: control; display: flex; flex-direction: column; gap: 0.3rem; }
.cfg-row-bool .cfg-control { flex-direction: row; align-items: center; gap: 0.6rem; }
.cfg-undo { grid-area: undo; align-self: start; }
.cfg-text label { font-weight: 700; display: block; }
.cfg-text label code { display: inline-block; font-size: var(--text-micro); font-weight: 400; margin-left: 0.3em; overflow-wrap: anywhere; }
.cfg-label code { text-transform: none; letter-spacing: 0; }

.cfg-jump {
  position: fixed;
  right: var(--container-pad);
  bottom: var(--space-2);
  z-index: 5;
  padding: 0.6em 1em;
  font-size: var(--text-small);
  font-weight: 700;
  background: var(--ink);
  color: var(--paper) !important;
  text-decoration: none !important;
  box-shadow: 4px 4px 0 var(--leaf);
}
@media (min-width: 64rem) { .cfg-jump { display: none; } }
.cfg-text p { margin: 0.2rem 0 0; font-size: var(--text-small); color: var(--ink-85); max-width: 52ch; }
.cfg-text .cfg-moot { color: var(--leaf); font-weight: 700; }

.cfg-row.is-changed { border-left-color: var(--leaf); background: var(--leaf-wash); }
.cfg-row.is-moot .cfg-control, .cfg-row.is-moot .cfg-text > p:not(.cfg-moot), .cfg-row.is-moot label { opacity: 0.5; }

.cfg-undo {
  width: 1.75rem; height: 1.75rem;
  font: inherit; font-size: 1rem; line-height: 1;
  border: 1px solid var(--ink-35); background: var(--paper); color: var(--ink);
  cursor: pointer;
  visibility: hidden;
}
.cfg-row.is-changed .cfg-undo { visibility: visible; }
.cfg-undo:hover { background: var(--ink); color: var(--paper); }

.cfg-say { font-size: var(--text-small); color: var(--ink-60); font-variant-numeric: tabular-nums; }

/* a switch, square like the rest of the page */
.cfg-switch {
  appearance: none;
  flex: none;
  width: 2.75rem; height: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper-dim);
  position: relative;
  cursor: pointer;
}
.cfg-switch::before {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: calc(1.5rem - 7px); height: calc(1.5rem - 7px);
  background: var(--ink-60);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.cfg-switch:checked { background: var(--leaf); border-color: var(--leaf); }
.cfg-switch:checked::before { background: var(--on-leaf); transform: translateX(1.25rem); }
.cfg-switch:focus-visible, .cfg-pair input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cfg-pair { display: flex; align-items: center; gap: 0.6rem; }
.cfg-pair input[type="range"] { flex: 1; min-width: 0; accent-color: var(--leaf); margin: 0; }
.cfg-pair input[type="number"] {
  width: 5.5rem;
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-small);
  padding: 0.3em 0.4em;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}

.cfg-warn {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  font-size: var(--text-small);
  background: var(--bad-wash);
  border-left: 3px solid var(--bad);
}
.cfg-fix { font: inherit; font-weight: 700; color: var(--bad); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* the file */
.cfg-count { margin-left: auto; font-size: var(--text-micro); color: var(--ink-35); text-transform: uppercase; letter-spacing: 0.08em; }
.cfg-out { scroll-margin-top: 5rem; }
.cfg-out pre { min-height: 7rem; }
.cfg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0 var(--space-3); }
.cfg-actions .button:disabled { opacity: 0.4; cursor: default; }
.cfg-out .cfg-dl { color: var(--paper); border-color: var(--ink-35); }
.cfg-out .cfg-dl:hover, .cfg-out .cfg-dl:focus-visible { background: var(--paper); color: var(--ink); }
.cfg-out .button-primary:hover, .cfg-out .button-primary:focus-visible { background: var(--leaf-bright); border-color: var(--leaf-bright); color: var(--on-leaf); }
.cfg-actions .button:disabled:hover { background: transparent; color: var(--paper); }
.cfg-actions .button-primary:disabled:hover { background: var(--leaf); }

.cfg-import { border-top: 1px solid var(--ink-85); padding: 0.75rem var(--space-3) var(--space-3); font-size: var(--text-small); color: var(--ink-15); }
.cfg-import summary { cursor: pointer; font-weight: 700; color: var(--paper); }
.cfg-import .cfg-label { display: block; margin-top: var(--space-2); color: var(--ink-15); }
.cfg-import code { background: var(--ink-85); color: var(--paper); }
.cfg-import textarea {
  display: block; width: 100%;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-small);
  padding: 0.6rem;
  background: color-mix(in oklab, var(--ink) 80%, #000); color: var(--paper);
  border: 1px solid var(--ink-60);
  resize: vertical;
}
.cfg-import-note { margin: 0.5rem 0 0; }

/* ==========================================================================
   Languages — Minecraft's own Language screen, dirt and all
   ========================================================================== */

.mc-screen { background: #000; }

.mc-panel {
  --dirt: url("../icons/dirt.png");
  font-family: "Pixelify Sans", var(--font);
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  image-rendering: pixelated;
  /* the header band: dirt at a quarter brightness, as the game draws it */
  background: linear-gradient(rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.75)), var(--dirt);
  background-size: auto, 64px;
}

.mc-title {
  text-align: center;
  font-size: 1.25rem;
  padding-block: 1.1rem;
}

/* the list well: darker dirt, with the game's shadow along its top and bottom edges */
.mc-list {
  padding-block: 0.75rem 1.25rem;
  background:
    linear-gradient(rgb(0 0 0 / 0.9), transparent 1.25rem),
    linear-gradient(transparent calc(100% - 1.25rem), rgb(0 0 0 / 0.9)),
    linear-gradient(rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.85)),
    var(--dirt);
  background-size: auto, auto, auto, 64px;
}

.mc-list li {
  width: min(34rem, 100% - 2rem);
  margin-inline: auto;
  padding-block: 0.3rem;
  text-align: center;
  font-size: 1.15rem;
  border: 2px solid transparent;
}

/* the credit, in the game's grey */
.mc-list small {
  font-size: inherit;
  color: #a0a0a0;
  text-shadow: 2px 2px 0 #282828;
}

/* the selection box: grey outline around a black fill. It follows the pointer,
   and sits on the default language otherwise */
.mc-list li.is-selected,
.mc-list li:hover {
  border-color: #808080;
  background: #000;
}

.mc-list:hover li.is-selected:not(:hover) {
  border-color: transparent;
  background: none;
}

/* ==========================================================================
   Soundtrack
   ========================================================================== */

.player-toggle {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.player-toggle-option { position: relative; cursor: pointer; }
.player-toggle-option:first-child { border-right: 1.5px solid var(--ink); }

.player-toggle-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.player-toggle-option span {
  display: block;
  padding: 0.6em 1.2em;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.player-toggle-option:has(input:checked) span { background: var(--ink); color: var(--paper); }
.player-toggle-option:has(input:focus-visible) span { outline: 2px solid var(--ink); outline-offset: -3px; }

.track-list {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 56rem) {
  .track-list { grid-template-columns: 1fr 1fr; }
}

.track-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.track-art-frame {
  width: clamp(5rem, 18vw, 8rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  border: 1px solid var(--ink);
  background: var(--paper-dim);
  padding: 0.75rem;
}

.track-art {
  width: 100%;
  height: auto;
  animation: disc-spin 2.4s linear infinite;
  animation-play-state: paused;
}

.track-card:hover .track-art { animation-play-state: running; }

@keyframes disc-spin { to { transform: rotate(360deg); } }

.track-players { flex: 1; min-width: 0; }
.track-players h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }

.track-player-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--ink);
}

.track-player-frame-bandcamp { height: 44px; }

/* SoundCloud's own snippet: no border of ours, or its 166px widget gets 164 and scrolls */
.track-player-soundcloud { display: none; }
.track-player-frame-soundcloud { display: block; border: 0; }

.track-credit {
  margin-top: 0.25rem;
  font-size: var(--text-micro);
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-credit a { text-decoration: none; }

.soundtrack:has(.player-toggle input[value="soundcloud"]:checked) .track-player-frame-bandcamp { display: none; }
.soundtrack:has(.player-toggle input[value="soundcloud"]:checked) .track-player-soundcloud { display: block; }

/* ==========================================================================
   Roadmap — a bento of 2.1 plates, then tiles, then a plain list
   ========================================================================== */

.bento {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-a { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento-a { grid-column: span 2; grid-row: span 2; }
  .bento-e { grid-column: span 2; }
}

.bento .plate { display: flex; flex-direction: column; }
.bento .plate img { flex: 1; object-fit: cover; min-height: 0; }

.later {
  margin-top: var(--space-6);
  max-width: 52rem;
}

.later h3 {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: var(--space-2);
}

.later li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--ink-15);
  color: var(--ink-85);
}

.later li img { width: 24px; height: 24px; align-self: center; }
.later b { color: var(--ink); }

/* ==========================================================================
   About — the story as a timeline: a rail with a square marker per chapter,
   the words on one side and a picture from that time on the other
   ========================================================================== */

.story {
  --rail: 2rem;
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding-left: var(--rail);
  max-width: 76rem;
}

.story::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(var(--ink-15), var(--ink-15) 80%, var(--leaf));
}

.chapter {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-items: center;
}

/* the marker sits on the rail, centred on its 2px line */
.chapter::before {
  content: "";
  position: absolute;
  left: calc(1px - var(--rail));
  top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--paper);
  border: 3px solid var(--leaf);
}

.chapter-now::before { background: var(--leaf); box-shadow: 0 0 0 4px var(--leaf-wash); }

@media (min-width: 56rem) {
  .story { --rail: 3.5rem; }
  .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .chapter:nth-child(even) .chapter-text { order: 2; }
}

.chapter-when {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: var(--space-1);
}

.chapter h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.chapter-text > p:not(.chapter-when) {
  font-size: 1.075rem;
  line-height: 1.6;
  max-width: 54ch;
  color: var(--ink-85);
}

.chapter-text > p + p { margin-top: var(--space-2); }

.chapter-link a { font-weight: 700; color: var(--leaf); }

.chapter-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.chapter-art-slots,
.chapter-loaders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background: var(--paper-dim);
  border: 1px solid var(--ink-15);
}

.chapter-art-slots .slot-xl img { image-rendering: pixelated; }

.chapter-stamp {
  font-family: "Pixelify Sans", var(--font);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  line-height: 1;
  color: var(--leaf);
}

.chapter-loaders { flex-direction: column; gap: var(--space-2); }
.chapter-loaders p:first-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.chapter-loaders .loader-tag { font-size: var(--text-small); }
.chapter-loaders .chapter-stamp { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); color: var(--ink); }

/* the GanjaCraft logo and the then-and-now strip: plates on a light ground, so the art keeps its colours */
.chapter-plate { box-shadow: 10px 10px 0 var(--leaf); }

.chapter-plate img {
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--leaf-wash);
}

.then-now { background: var(--paper-dim); box-shadow: 10px 10px 0 var(--leaf); }

.then-now ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) var(--space-3);
}

.then-now li { display: flex; align-items: center; gap: 0.6rem; }
.then-now li .slot { --size: 3rem; }
.then-now li .slot img { width: 75%; height: 75%; image-rendering: pixelated; }
.then-now-arrow { font-weight: 800; color: var(--leaf); }

@media (max-width: 30rem) {
  .then-now ul { gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-2); }
}

@media (max-width: 22.5rem) {
  .then-now ul { grid-template-columns: max-content; }
}

/* bstylia14's video: a thumbnail link that becomes the player when pressed */
.chapter-video { box-shadow: 10px 10px 0 var(--leaf); }

.yt-facade, .yt-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ink);
}

.yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s ease; }
.yt-facade:hover img, .yt-facade:focus-visible img { filter: brightness(0.8); }

.yt-play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 4.5rem;
  height: 3.2rem;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 6px 6px 0 var(--leaf);
  transition: background 0.2s ease;
}

.yt-play::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 0.65rem 0 0.65rem 1.1rem;
  border-color: transparent transparent transparent var(--paper);
}

.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: var(--leaf); }

.yt-stamp {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.15rem 0.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: "Pixelify Sans", var(--font);
  font-size: 1.5rem;
  line-height: 1.2;
}

/* GanjaCraft, Hempdustry, Hemp-Craft: the names, top to bottom */
.name-chain {
  display: grid;
  justify-items: center;
  padding: var(--space-4) var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--leaf);
  text-align: center;
}

.name-chain li {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
}

.name-chain li + li::before {
  content: "\2193";
  display: block;
  margin-block: 0.2rem;
  font-size: 1.25rem;
  color: var(--leaf);
}

.name-chain li:last-child { color: var(--leaf); }

.name-chain s {
  color: var(--ink-60);
  text-decoration-color: var(--bad);
  text-decoration-thickness: 0.12em;
}

.two-mods {
  max-width: 76rem;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-left: 4px solid var(--leaf);
  background: var(--paper-dim);
}

.two-mods h3 { font-size: var(--text-h3); font-weight: 800; margin-bottom: 0.4rem; }
.two-mods p { max-width: 80ch; color: var(--ink-85); line-height: 1.6; }

/* ==========================================================================
   Open source — two licence cards beside a build-it terminal, a "Can I…?"
   board drawn from CREDITS.md, and the people whose work ships in the jar
   ========================================================================== */

.oss-split { display: grid; gap: var(--space-5); align-items: start; }
.oss-split > * { min-width: 0; }

@media (min-width: 64rem) {
  .oss-split { grid-template-columns: 1fr 1.15fr; }
}

.oss-licences { display: grid; gap: var(--space-3); }

.licence {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink-15);
}

.licence-what {
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leaf);
}

.licence-name {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0.2rem 0 0.5rem;
}

.licence p:not(.licence-what) { color: var(--ink-85); line-height: 1.55; }

.licence-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--text-small);
  font-weight: 700;
}

.licence-link::after { content: "\00a0\2197"; color: var(--leaf); }

.oss-term pre { white-space: pre; font-size: clamp(0.78rem, 0.68rem + 0.3vw, 0.98rem); }
.oss-term .p { color: var(--leaf-bright); user-select: none; }
.oss-term .c { color: var(--ink-35); }

.oss-branches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 var(--space-3);
  background: var(--ink-85);
  border: 1px solid var(--ink-85);
}

@media (min-width: 30rem) {
  .oss-branches { grid-template-columns: repeat(3, 1fr); }
}

.oss-branches li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  background: var(--ink);
  font-size: var(--text-small);
}

.oss-branches b { color: var(--paper); }
.oss-branches code { background: none; padding: 0; color: #f2c46d; }
.oss-term .config-note { padding-top: var(--space-2); }
.oss-term .config-note a { color: var(--paper); }

.oss-subtitle {
  font-size: var(--text-h3);
  font-weight: 800;
  margin: var(--space-6) 0 var(--space-3);
}

.oss-can {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 0;
  border-top: 1.5px solid var(--ink);
}

.oss-can li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-1) var(--space-2) 0;
  border-bottom: 1px solid var(--ink-15);
}

.oss-can p { color: var(--ink-85); line-height: 1.55; }
.oss-can b { color: var(--ink); }

.verdict {
  flex-shrink: 0;
  min-width: 3.4rem;
  padding: 0.2em 0.5em;
  border: 1.5px solid;
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.verdict-yes { color: var(--leaf); background: var(--leaf-wash); }
.verdict-yes::before { content: "\2713\00a0"; }
.verdict-ask { color: #17140f; background: #f2c46d; border-color: var(--ink); }
.verdict-ask::before { content: "?\00a0"; }

.credit-roll {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 30rem) { .credit-roll { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .credit-roll { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .credit-roll { grid-template-columns: repeat(5, 1fr); } }

@media (max-width: 29.99rem) {
  .licence { flex-direction: column; gap: var(--space-2); }
}

.credit-roll li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-2) 0 0;
  border-top: 4px solid var(--leaf);
}

.credit-roll b { font-size: var(--text-h3); font-weight: 800; }
.credit-roll span { font-size: var(--text-small); color: var(--ink-60); }
.credit-roll li:last-child { border-top-color: var(--ink-35); }

.oss-credits-note { margin-top: var(--space-3); max-width: 70ch; }

.open-source .cta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.open-source .cta + .wiki-more { margin-top: var(--space-3); }

/* ==========================================================================
   Community — a Discord invite card (counts asked of Discord's public invite)
   and what the server is for
   ========================================================================== */

.discord-split {
  --blurple: #5865f2;
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 60rem) {
  .discord-split { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-6); }
}

.discord-card {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--blurple);
}

.discord-band {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--blurple);
  color: #fff;
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discord-band .logo { width: 1.4em; height: 1.4em; }

.discord-guild {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.discord-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.4rem;
  flex-shrink: 0;
}

.discord-guild h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 900; line-height: 1.05; }
.discord-guild p { margin-top: 0.25rem; font-size: var(--text-small); color: var(--ink-15); }

.discord-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-small);
  color: var(--ink-15);
}

.discord-counts span { display: inline-flex; align-items: center; gap: 0.45rem; }
.discord-counts span::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #80848e; }
.discord-counts .discord-online::before { background: #23a55a; }
.discord-counts b { color: var(--paper); }

.discord-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: var(--space-3) var(--space-3) 0;
  background: var(--ink-85);
  border: 1px solid var(--ink-85);
}

.discord-facts div { padding: 0.6rem 0.8rem; background: var(--ink); }

.discord-facts dt {
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-35);
}

.discord-facts dd { margin: 0.15rem 0 0; font-weight: 700; }

.button.discord-join {
  display: flex;
  margin: var(--space-3);
  background: var(--blurple);
  border-color: var(--blurple);
  color: #fff;
}

.button.discord-join:hover, .button.discord-join:focus-visible { background: #4752c4; border-color: #4752c4; color: #fff; }
.discord-card :focus-visible { outline-color: var(--paper); }

.discord-why { display: grid; gap: var(--space-2); }

@media (min-width: 40rem) {
  .discord-why { grid-template-columns: 1fr 1fr; }
}

.discord-why li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink-15);
}

.discord-why h3 { font-size: var(--text-h3); font-weight: 800; margin-bottom: 0.3rem; }
.discord-why p { font-size: var(--text-small); color: var(--ink-85); line-height: 1.55; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list {
  max-width: 48rem;
  margin-top: var(--space-4);
  border-top: 1px solid var(--ink);
}

.faq-item { border-bottom: 1px solid var(--ink-15); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-weight: 400;
  font-size: 1.4em;
  color: var(--leaf);
  transition: rotate 0.2s ease;
}

.faq-item[open] summary::after { rotate: 45deg; }

.faq-item p {
  max-width: 56ch;
  padding-bottom: var(--space-3);
  color: var(--ink-85);
  line-height: 1.55;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--ink);
  padding-block: var(--space-4);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.footer-links ul { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.footer-links a, .footer-links span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-small);
  color: var(--ink-60);
  text-decoration: none;
}

.footer-links img { width: 16px; height: 16px; }

.footer-links a:hover { color: var(--ink); }

.license {
  font-size: var(--text-micro);
  color: var(--ink-60);
}

/* 2.1: three strains, four effect cards, a product grid under the hash chain */
@media (min-width: 64rem) {
  .strain-grid { grid-template-columns: repeat(3, 1fr); }
  .strain { flex-direction: column; align-items: flex-start; }
  .strain h3 { font-size: var(--text-h3); }
}
.effect-note { grid-column: 1 / -1; }
.chain + .soon-grid { margin-top: var(--space-5); }
.soon-grid + .small { margin-top: var(--space-4); }
@media (min-width: 56rem) {
  .effects { grid-template-columns: repeat(4, 1fr); align-items: start; }
}

/* ==========================================================================
   "On the wiki" — the pages behind each section
   ========================================================================== */

.wiki-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-5);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ink-15);
  background: var(--paper-dim);
  font-size: var(--text-small);
}

.wiki-more img { width: 24px; height: 24px; }

.wiki-more span {
  margin-right: 0.25rem;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.wiki-more a {
  padding: 0.25rem 0.6rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wiki-more a::after { content: "\00a0\2197"; color: var(--leaf); }
.wiki-more a:hover { background: var(--ink); color: var(--paper); }
.wiki-more a:hover::after { color: var(--paper); }

.center + .wiki-more { margin-inline: auto; }

/* ==========================================================================
   Download — platforms, the version picker, installing, old worlds
   ========================================================================== */

.download .lede { margin-bottom: var(--space-4); }

.dl-platforms {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 64rem) {
  .dl-platforms { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
}

.dl-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--leaf);
  border: 1.5px solid var(--leaf);
  color: var(--on-leaf);
  text-decoration: none;
  box-shadow: 8px 8px 0 var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dl-main:hover, .dl-main:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--leaf);
}

.dl-main .logo { width: clamp(2.75rem, 2rem + 3vw, 4.5rem); height: auto; aspect-ratio: 1; }

.dl-main-text b {
  display: block;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.dl-main-text span {
  display: block;
  max-width: 46ch;
  margin-top: 0.4rem;
  font-size: var(--text-small);
  color: var(--ink-15);
}

.dl-main-arrow {
  margin-left: auto;
  font-size: 2rem;
  line-height: 1;
  transition: translate 0.2s ease;
}

.dl-main:hover .dl-main-arrow { translate: 6px 0; }

@media (max-width: 30rem) {
  .dl-main { padding: var(--space-3); gap: var(--space-2); }
  .dl-main-arrow { display: none; }
}

.dl-mirrors { display: grid; gap: var(--space-1); }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .dl-mirrors { grid-template-columns: repeat(3, 1fr); }
}

.dl-mirror {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
  height: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dl-mirror .logo { grid-row: span 2; width: 1.9rem; height: 1.9rem; }
.dl-mirror b { font-weight: 800; line-height: 1.2; }
.dl-mirror span { font-size: var(--text-small); color: var(--ink-60); line-height: 1.3; }

.dl-nexus .logo { color: #d98f40; }
.dl-modrinth .logo { color: #00af5c; }

a.dl-mirror:hover, a.dl-mirror:focus-visible { background: var(--ink); color: var(--paper); }
a.dl-mirror:hover span, a.dl-mirror:focus-visible span { color: var(--ink-15); }
a.dl-mirror:hover .logo { color: var(--paper); }

.dl-mirror.is-soon { border-style: dashed; opacity: 0.6; }

.dl-heading {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  scroll-margin-top: 5.5rem;
}

/* the picker: radio buttons drawn as tabs; with :has() only the picked panel shows */
.mc-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  min-width: 0;
}

@media (min-width: 40rem) { .mc-picker { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .mc-picker { grid-template-columns: repeat(6, 1fr); } }

.mc-picker legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-size: var(--text-small);
  color: var(--ink-60);
}

.mc-picker label { position: relative; cursor: pointer; }

.mc-picker input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mc-picker label > span {
  display: block;
  height: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mc-picker b {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mc-picker small {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.mc-picker label:hover > span { background: var(--leaf-wash); }
.mc-picker input:checked + span { background: var(--ink); color: var(--paper); }
.mc-picker input:checked + span small { color: var(--ink-15); }
.mc-picker input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: 3px; }

.dl-panels { display: grid; gap: var(--space-3); }

.dl-panel {
  display: grid;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink-15);
}

@supports selector(:has(*)) {
  .dl-panel { display: none; }
  .download:has(#mc-263:checked) #dl-263,
  .download:has(#mc-262:checked) #dl-262,
  .download:has(#mc-12111:checked) #dl-12111,
  .download:has(#mc-1211:checked) #dl-1211,
  .download:has(#mc-1182:checked) #dl-1182,
  .download:has(#mc-1165:checked) #dl-1165 { display: grid; }
}

.dl-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--ink);
}

.dl-panel-head h4 { margin: 0; font-size: var(--text-h3); font-weight: 800; }
.dl-panel-head p { color: var(--ink-85); }

.dl-loaders { display: grid; }

@media (min-width: 48rem) {
  .dl-loaders { grid-template-columns: 1fr 1fr; }
}

.dl-loader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
}

.dl-loader + .dl-loader { border-top: 1px solid var(--ink-15); }

@media (min-width: 48rem) {
  .dl-loader + .dl-loader { border-top: 0; border-left: 1px solid var(--ink-15); }
}

.dl-loader h5 { margin: 0; }

.loader-tag {
  display: inline-block;
  padding: 0.3em 0.65em;
  border: 1.5px solid currentColor;
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.loader-fabric { color: #17140f; background: #e6dcc2; border-color: #b9a77a; }
.loader-neoforge { color: #fff; background: #c4561b; border-color: #c4561b; }
.loader-forge { color: #fff; background: #2b3f5c; border-color: #2b3f5c; }

.dl-file {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--text-small);
}

.dl-needs li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--text-small);
  color: var(--ink-85);
}

.dl-needs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45em;
  height: 0.45em;
  background: var(--leaf);
}

.dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-1);
}

.dl-loader-none .loader-tag { color: var(--ink-35); }
.dl-loader-none p { font-size: var(--text-small); color: var(--ink-60); max-width: 36ch; }

.dl-facts {
  display: grid;
  gap: 1px;
  margin: 0;
  border-top: 1px solid var(--ink);
  background: var(--ink-15);
}

@media (min-width: 56rem) {
  .dl-facts { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.dl-facts > div { padding: var(--space-2) var(--space-3); background: var(--paper-dim); }

.dl-facts dt {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
}

.dl-facts dd { margin: 0.2rem 0 0; font-size: var(--text-small); color: var(--ink-85); }

.dl-cf-hint { margin-top: var(--space-3); max-width: 72ch; }

.dl-steps {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  counter-reset: step;
}

@media (min-width: 56rem) { .dl-steps { grid-template-columns: repeat(3, 1fr); } }

.dl-steps li {
  counter-increment: step;
  padding-top: var(--space-2);
  border-top: 3px solid var(--ink);
  font-size: var(--text-small);
  color: var(--ink-85);
}

.dl-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.4rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--leaf);
}

.dl-steps b { color: var(--ink); }
.dl-steps-note { margin-top: var(--space-3); max-width: 72ch; }

/* old worlds: an ink panel, the one dark block in the section */
.old-worlds {
  margin-top: var(--space-6);
  padding: clamp(1.25rem, 3vw, var(--space-5));
  background: var(--ink);
  color: var(--paper);
  box-shadow: 10px 10px 0 var(--leaf);
  scroll-margin-top: 5.5rem;
}

.old-worlds h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1.05;
}

.old-worlds-lede {
  max-width: 60ch;
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-lede);
  color: var(--ink-15);
}

.old-worlds-grid { display: grid; gap: var(--space-3); }

@media (min-width: 60rem) { .old-worlds-grid { grid-template-columns: 1fr 1fr; } }

.old-world {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--ink-60);
}

@media (max-width: 30rem) {
  .old-world { flex-direction: column; }
}

.old-world h4 { margin: 0 0 0.4rem; font-size: var(--text-h3); font-weight: 800; }
.old-world p { font-size: var(--text-small); color: var(--ink-15); }

.old-world-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.old-worlds .button { color: var(--paper); border-color: var(--paper); }
.old-worlds .button:hover, .old-worlds .button:focus-visible { background: var(--paper); color: var(--ink); }
.old-worlds .button-primary { background: var(--leaf); border-color: var(--leaf); color: var(--on-leaf); }
.old-worlds a:not(.button) { text-decoration-color: var(--ink-35); }
.old-worlds :focus-visible { outline-color: var(--paper); }

.old-worlds-steps {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  counter-reset: ow;
}

@media (min-width: 48rem) { .old-worlds-steps { grid-template-columns: repeat(3, 1fr); } }

.old-worlds-steps li {
  position: relative;
  min-height: 1.75rem;
  padding-left: 2.4rem;
  counter-increment: ow;
  font-size: var(--text-small);
  color: var(--ink-15);
}

.old-worlds-steps li::before {
  content: counter(ow);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--leaf);
  color: var(--on-leaf);
  font-weight: 900;
}

.old-worlds-steps b { color: var(--paper); }
.old-worlds code { background: var(--ink-85); color: var(--paper); }
.old-worlds .small { margin-top: var(--space-3); color: var(--ink-35); max-width: none; }

/* ==========================================================================
   The wiki — four columns of pages
   ========================================================================== */

.wiki-cols { display: grid; gap: var(--space-4); }

@media (min-width: 48rem) { .wiki-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .wiki-cols { grid-template-columns: repeat(4, 1fr); } }

.wiki-col h3 {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leaf);
}

.wiki-col a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ink-15);
  text-decoration: none;
}

.wiki-col .slot { --size: 2.75rem; transition: rotate 0.2s ease; }
.wiki-col a > span:last-child { font-size: var(--text-small); color: var(--ink-60); line-height: 1.35; }
.wiki-col a b { display: block; font-size: var(--text-body); font-weight: 800; color: var(--ink); transition: color 0.15s ease; }
.wiki-col a b::after { content: "\00a0\2197"; font-weight: 600; color: var(--ink-35); }
.wiki-col a:hover b { color: var(--leaf); }
.wiki-col a:hover .slot { rotate: -4deg; }
.wiki .cta { margin-top: var(--space-5); }