/* Diastro Gaming Collections — hub page styles. */

:root {
  --bg: #F3F0E6;
  --surface: #FFFFFF;
  --surface-2: #E7ECDA;
  --ink: #1B2117;
  --ink-soft: #565D4A;
  --ink-faint: #868C76;
  --accent: #4F8F52;
  --accent-soft: #E3EFDA;
  --accent-ink: #FFFFFF;
  --line: #DBDCC5;
  --line-strong: #C3C7A9;
  --shadow: 0 1px 2px rgba(33, 28, 21, 0.06), 0 14px 32px -18px rgba(33, 28, 21, 0.28);

  --wood-a: #C7AA76;
  --wood-b: #9C7F50;
  --wood-line: rgba(60, 40, 10, 0.25);
  --sticky-bg: rgba(243, 240, 230, 0.82);
  --dots: rgba(79, 143, 82, 0.28);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131511;
    --surface: #1B1D17;
    --surface-2: #23261F;
    --ink: #EDEBE0;
    --ink-soft: #B8C0AC;
    --ink-faint: #80876F;
    --accent: #84C37D;
    --accent-soft: #1E2A18;
    --accent-ink: #14210F;
    --line: #5E6450;
    --line-strong: #82886C;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -18px rgba(0, 0, 0, 0.7);

    --wood-a: #6B5638;
    --wood-b: #45362A;
    --wood-line: rgba(0, 0, 0, 0.4);
    --sticky-bg: rgba(19, 21, 17, 0.82);
    --dots: rgba(132, 195, 125, 0.22);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #131511;
  --surface: #1B1D17;
  --surface-2: #23261F;
  --ink: #EDEBE0;
  --ink-soft: #B8C0AC;
  --ink-faint: #80876F;
  --accent: #84C37D;
  --accent-soft: #1E2A18;
  --accent-ink: #14210F;
  --line: #5E6450;
  --line-strong: #82886C;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -18px rgba(0, 0, 0, 0.7);

  --wood-a: #6B5638;
  --wood-b: #45362A;
  --wood-line: rgba(0, 0, 0, 0.4);
  --sticky-bg: rgba(19, 21, 17, 0.82);
  --dots: rgba(132, 195, 125, 0.22);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Cross-fade the light/dark swap: theme colors live in CSS custom properties (see
   :root / :root[data-theme] above), and this animates the properties that consume
   them — the properties, not the variables, since custom properties aren't transitionable. */
*,
*::before,
*::after {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease,
    box-shadow 0.6s ease, fill 0.6s ease, stroke 0.6s ease;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif;
  text-wrap: balance;
  margin: 0;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* The top bar lives in nav.css, shared with the collection pages. */

/* ---------- Hero ---------- */

.hero {
  padding: clamp(38px, 9vw, 62px) 0 clamp(16px, 4vw, 32px);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -220px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--dots) 1.4px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 20%, transparent 75%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 18px 5px 14px;
}

.eyebrow .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.eyebrow .dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}

@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.version-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 13px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.version-pill:hover,
.version-pill:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.15s ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 17ch;
  position: relative;
}

.hero-version-pill {
  vertical-align: middle;
  margin-left: 14px;
  transform: translateY(-0.2em);
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.hero-lede {
  max-width: 62ch;
  margin-top: 24px;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  padding-top: 0;
  border-top: none;
}

.hero-stats .stat {
  position: relative;
  padding: 14px 20px 12px;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stats .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent);
}

.hero-stats .stat:nth-child(2)::before {
  background: #C8843A;
}

.hero-stats .stat:nth-child(3)::before {
  background: #5C7FB8;
}

.hero-stats .stat:nth-child(4)::before {
  background: #B5586E;
}

.hero-stats .num {
  font-family: "Fraunces", serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent);
}

.hero-stats .label {
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: 1px dashed var(--line-strong);
  padding-top: 6px;
  margin-top: 4px;
}

/* the era ruler: platforms plotted along the timeline they actually shipped in */
.era-ruler {
  position: relative;
  margin: clamp(32px, 5vw, 40px) 4px 0;
  height: 80px;
}

.er-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 49%;
  height: 2px;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.6px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: center;
}

.er-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.er-tick-label {
  position: absolute;
  top: calc(50% + 16px);
  transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.er-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  text-decoration: none;
  opacity: 0;
  animation: er-in 0.4s ease forwards;
}

.er-dot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-50% + var(--dot-shift, 0px)), -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform 0.15s ease;
}

.er-label {
  position: absolute;
  left: 0;
  top: -14px;
  transform: translate(-50%, -100%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.er-marker:hover .er-dot,
.er-marker:focus-visible .er-dot {
  transform: translate(calc(-50% + var(--dot-shift, 0px)), -50%) scale(1.5);
}

.er-marker:hover .er-label,
.er-marker:focus-visible .er-label {
  opacity: 1;
}

@keyframes er-in {
  to {
    opacity: 1;
  }
}

/* ---------- Version history ---------- */

.vh-list {
  padding: 12px 0 clamp(64px, 9vw, 100px);
}

.vh-entry {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0 48px;
  padding: 22px 0;
  border-top: none;
  position: relative;
}

.vh-entry::before {
  content: "";
  position: absolute;
  left: 216px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}

.vh-entry:first-of-type::before {
  top: 64px;
}

.vh-entry:last-of-type::before {
  bottom: auto;
  height: 64px;
}

.vh-entry::after {
  content: "";
  position: absolute;
  left: 206px;
  top: 52px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.vh-entry:has(.vh-badge)::after {
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft), 0 0 18px 2px var(--accent);
}

.vh-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  padding-top: 26px;
}

.vh-version {
  font-family: "Fraunces", serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.vh-entry.major::after {
  width: 22px;
  height: 22px;
  left: 203px;
  top: 53px;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.vh-entry.major .vh-version {
  font-size: 2.3rem;
}

.vh-entry.patch::after {
  width: 10px;
  height: 10px;
  left: 210px;
  top: 37px;
  border-width: 2px;
}

.vh-entry.patch .vh-version {
  font-size: 1.25rem;
  color: var(--ink-soft);
}

.vh-entry.patch {
  padding-top: 10px;
  padding-bottom: 10px;
}

.vh-entry.patch::before {
  top: 0;
  bottom: 0;
}

.vh-entry.patch .vh-meta {
  padding-top: 24px;
}

.vh-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.vh-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* The release card: one or more sections, each an optional heading and paragraph
   followed by optional bullets (which can have sub-bullets). */
.vh-body {
  position: relative;
  margin: 0 0 0 16px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.vh-entry strong {
  font-style: normal;
  font-weight: bold;
}

.vh-section+.vh-section {
  margin-top: 20px;
}

.vh-heading {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--ink);
}

.vh-text {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
}

.vh-heading+.vh-text {
  margin-top: 4px;
}

.vh-heading+ul,
.vh-text+ul {
  margin-top: 8px;
}

.vh-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vh-body::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 30px;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.vh-entry.major .vh-body {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}

.vh-entry.major .vh-body::before {
  top: 34px;
  border-color: var(--accent);
}

.vh-entry.patch .vh-body {
  padding: 12px 20px;
  box-shadow: none;
  background: transparent;
  border-style: dashed;
}

.vh-entry.patch .vh-body::before {
  display: none;
}

.vh-entry li {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 22px;
}

.vh-entry li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.vh-entry.patch li::before {
  background: var(--line-strong);
}

.vh-entry li:last-child {
  margin-bottom: 0;
}

.vh-entry li ul {
  margin-top: 8px;
}

.vh-entry li ul li {
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.vh-entry li ul li::before {
  width: 6px;
  height: 6px;
  top: 0.58em;
  background: var(--line-strong);
}

.vh-entry li ul li:last-child {
  margin-bottom: 0;
}

.vh-entry a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* `inline code` in release notes */
.vh-entry code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.86em;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.4em;
  overflow-wrap: anywhere;
}

/* release stats in the hero */
.vh-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.vh-stats .stat {
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vh-stats .num {
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.15;
}

.vh-stats .label {
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* the release timeline: styled after the hub's era ruler, with one dot per
   release placed by its date (positions are set in version-history.js) */
.vh-timeline {
  position: relative;
  margin: clamp(32px, 5vw, 40px) 0 0;
  height: 80px;
}

.vh-tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.6px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: center;
}

.vh-tl-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
}

/* labels start at their tick, like the start of the month they name */
.vh-tl-month {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 0.68rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.vh-tl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The link is a 24px tap target centered on the release date; the visible
   dot inside it is smaller. */
.vh-tl-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  opacity: 0;
  animation: er-in 0.4s ease forwards;
}

.vh-tl-marker:focus-visible {
  outline-offset: 0;
  border-radius: 50%;
}

.vh-tl-dot {
  border-radius: 50%;
  background: var(--line-strong);
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform 0.15s ease;
}

.vh-tl-marker.current .vh-tl-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.vh-tl-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.vh-tl-marker.current .vh-tl-label {
  color: var(--accent);
}

.vh-tl-marker:hover .vh-tl-dot,
.vh-tl-marker:focus-visible .vh-tl-dot {
  transform: scale(1.4);
}

.vh-tl-marker:hover .vh-tl-label,
.vh-tl-marker:focus-visible .vh-tl-label {
  opacity: 1;
}

.vh-version:focus {
  outline: none;
}

.vh-version:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Shelf section ---------- */

.shelf {
  padding: clamp(8px, 2vw, 20px) 0 clamp(56px, 9vw, 100px);
}

.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}

.shelf-head h2 {
  font-size: 1.7rem;
  font-weight: 600;
}

.shelf-head p {
  margin: 0;
  font-size: 0.92rem;
  font-family: "IBM Plex Mono", monospace;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.tile {
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile-accent, var(--accent)) 9%, var(--surface)), var(--surface) 58%);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.5s ease forwards;
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), box-shadow .22s ease, border-color .2s ease;
}

.tile:hover {
  transform: translateY(-7px) rotate(-0.5deg);
  border-color: var(--tile-accent, var(--line-strong));
  box-shadow: 0 26px 38px -20px color-mix(in srgb, var(--tile-accent, var(--accent)) 60%, transparent), var(--shadow);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The whole tile is clickable via this stretched link; the status pill sits above it. */
.tile-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.tile-link:focus-visible {
  outline: 2px solid var(--tile-accent, var(--accent));
  outline-offset: -4px;
}

.tile-spine {
  position: relative;
  z-index: 1;
  height: 10px;
  background: var(--tile-accent, var(--accent));
}

.tile-watermark {
  position: absolute;
  right: -8px;
  top: -6px;
  font-size: 6.5rem;
  line-height: 1;
  opacity: 0.09;
  transform: rotate(12deg);
  pointer-events: none;
  filter: saturate(0.8);
}

.tile:hover .tile-watermark {
  opacity: 0.16;
  transform: rotate(4deg) scale(1.06);
  transition: all .25s ease;
}

.tile-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.tile-body>*:not(.tile-watermark) {
  position: relative;
}

/* Icon then title, centered on each other vertically. */
.tile-top {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .25s ease;
}

/* On hover, a pixel ▶ appears beside the icon like a game-menu cursor, and the row
   nudges right to make room. Both use transforms, so the tile's size never changes
   (a taller tile would stretch its grid row and push the row below down). */
.tile-top::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 8px;
  height: 14px;
  margin-top: -7px;
  background: var(--tile-accent, var(--accent));
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 6px 8px, 6px 10px, 4px 10px, 4px 12px, 2px 12px, 2px 14px, 0 14px);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .25s ease;
}

.tile:hover .tile-top {
  transform: translateX(12px);
}

.tile:hover .tile-top::before {
  opacity: 1;
  transform: none;
  animation: cursor-blink 1s steps(1) .35s infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

.tile-kicker {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: -4px;
}

.tile-kicker span:first-child {
  color: var(--tile-accent, var(--accent));
  font-weight: 600;
}

/* Number · manufacturer · years */
.tile-kicker span+span::before {
  content: "·";
  margin: 0 0.6em;
}

.tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile-accent, var(--accent)) 30%, transparent);
  flex-shrink: 0;
}

.tile h3 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
}

.tile .tagline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  flex: 1;
}

/* Horizontal line with highlight color, removed on 23.09.2026 because I found it too busy. */
/* .tile-span {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  margin: 2px 0 -2px;
} */

/* .tile-span i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--tile-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-accent, var(--accent)) 18%, transparent);
} */

.tile-meta {
  display: flex;
  gap: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--ink-faint);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tile-meta strong {
  color: var(--tile-accent, var(--accent));
  font-weight: 600;
}

.tile-region {
  margin-left: auto;
  color: var(--tile-accent, var(--accent));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  background: color-mix(in srgb, var(--tile-accent, var(--accent)) 14%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}

.tile-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tile-accent, var(--accent));
  margin-top: 2px;
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.tile-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.tile:hover .tile-cta svg {
  transform: translateX(3px);
}

/* ---------- Footer: the plank ---------- */

footer {
  position: relative;
  padding: 44px 0 56px;
}

footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background: linear-gradient(180deg, var(--wood-a), var(--wood-b));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 10px 20px -10px var(--wood-line);
}

footer p {
  max-width: 74ch;
  color: var(--ink-faint);
  font-size: 0.86rem;
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .vh-entry {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 34px;
  }

  .vh-entry::before {
    left: 11px;
  }

  .vh-entry::after {
    left: 1px;
    top: 24px;
  }

  .vh-entry.major::after {
    left: -1px;
    top: 26px;
  }

  .vh-entry.patch::after {
    left: 4px;
    top: 37px;
  }

  .vh-meta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left;
    padding: 0 0 0 20px;
  }

  .vh-body::before {
    display: none;
  }

  .vh-body {
    padding: 18px 18px;
  }

  .era-ruler {
    height: 48px;
    margin-top: 24px;
  }

  .vh-timeline {
    height: 64px;
    margin-top: 24px;
  }

  .er-tick-label {
    display: none;
  }

  .er-label {
    display: none;
  }

  .er-dot {
    width: 12px;
    height: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot::after {
    animation: none;
  }

  .er-marker,
  .vh-tl-marker {
    opacity: 1;
    animation: none;
  }

  /* the global rule above would turn the blink into a rapid flicker */
  .tile:hover .tile-top::before {
    animation: none;
  }
}