/* ==========================================================
   WANDERCRAFT — Downloads page

   Layered on top of style.css, same contract as sponsors.css:
   every colour, radius, easing and font here comes from the
   tokens in style.css :root. Nothing new is invented, so this
   page moves whenever the design system does.

   The page's one job is to get two files onto someone's disk
   in the right order, so the layout is deliberately linear —
   files, then steps, then the small print. No tabs, no
   carousels, nothing that can hide the next thing to do.
   ========================================================== */

/* Same reasoning as sponsors.css: the site-wide scrim ramps 0.5 -> 0.85 down
   the page for a homepage that opens on a logo lockup against sky. This page
   opens on body copy, so hold the deeper end the whole way down. */
body::after {
  background: linear-gradient(to bottom,
    rgba(8, 17, 32, 0.86),
    rgba(8, 17, 32, 0.90) 45%,
    rgba(8, 17, 32, 0.93));
}

/* ---------- shared page scaffolding ---------- */

.dl-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) 24px 0;
}

.dl-section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}

.dl-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Eyebrow label. --text-2 rather than --text-3: the lighter token clears AA
   against both --bg and --bg-raised. */
.dl-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 26px;
}

.dl-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.dl-section-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0 0 34px;
}

/* ---------- hero ---------- */

.dl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 56px;
  align-items: start;
}

.dl-hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 22px;
  color: var(--text);
}

.dl-hero-lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 54ch;
  margin: 0;
}

/* Stat rail — same component as the sponsors page, restated here so this
   page does not depend on that stylesheet being loaded. */
.dl-stat-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  margin: 0;
}

.dl-stat-rail div {
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  text-align: center;
  border-left: 1px solid var(--border);
}

.dl-stat-rail div:first-child { border-left: 0; }

.dl-stat-rail dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  order: 2;
  margin-top: 8px;
}

.dl-stat-rail dd {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Unit suffix rides smaller than the number it belongs to, so "831MB" and
   "1.21.11" sit at the same optical weight as the bare "86". */
.dl-stat-rail dd span {
  font-size: 0.6em;
  color: var(--text-2);
  margin-left: 1px;
}

/* ---------- the two files ---------- */

.dl-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* One downloadable file. Mirrors .slot on the sponsors page — same card
   shape, same hover lift — with the CTA pushed to the bottom so the two
   buttons line up however unevenly the copy wraps. */
.dl-file {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.dl-file:hover {
  border-color: var(--file-accent, var(--accent));
  transform: translateY(-2px);
}

.dl-file-step {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 18px;
}

.dl-file-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--file-accent, var(--accent));
  border-radius: 10px;
  color: var(--file-accent, var(--accent));
  margin-bottom: 18px;
}

.dl-file h3 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 10px;
}

.dl-file-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.dl-file-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-2);
}

/* Size badge. Carries the card's accent so the 831 MB reads as information
   rather than as a warning. */
.dl-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--file-accent, var(--accent));
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--file-accent, var(--accent));
}

/* The bottom margin is not decoration: margin-top:auto on the button below
   collapses to nothing once a card's copy fills it, and without this the
   button would butt straight up against the last line of text. */
.dl-file p:not(.dl-file-step):not(.dl-file-meta) {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 22px;
}

/* margin-top:auto is what keeps both buttons on one line across cards,
   however unevenly the copy above them wraps. Padding is left to .btn —
   overriding one side of it only knocks the label off centre. */
.dl-file-btn {
  margin-top: auto;
  align-self: start;
}

.dl-files-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 18px 0 0;
}

.dl-files-note a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-files-note a:hover { color: var(--accent); }

/* ---------- install steps ---------- */

/* Numbered with a counter rather than list-style so the numeral can be a
   styled disc. The connecting rule down the left is a ::before on the <ol>,
   which keeps it out of the accessibility tree entirely. */
.dl-steps {
  list-style: none;
  counter-reset: dl-step;
  position: relative;
  margin: 0;
  padding: 0 0 0 68px;
}

.dl-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-2), var(--accent));
  opacity: 0.3;
}

.dl-steps > li {
  counter-increment: dl-step;
  position: relative;
  padding-bottom: 34px;
}

.dl-steps > li:last-child { padding-bottom: 0; }

.dl-steps > li::before {
  content: counter(dl-step);
  position: absolute;
  left: -68px;
  top: -4px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dl-steps h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 6px 0 8px;
}

.dl-steps p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 64ch;
  margin: 0;
}

.dl-steps code,
.dl-specs code,
.dl-details code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
}

.dl-steps a,
.dl-details a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-steps a:hover,
.dl-details a:hover { color: var(--accent); }

.dl-steps b,
.dl-details b { color: var(--text); font-weight: 600; }

/* ---------- disclosure ---------- */

/* Native <details>. Keyboard handling, screen-reader semantics and the
   open/closed state all come free, which no scripted accordion matches. */
.dl-details {
  margin: 34px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.dl-details > summary {
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius);
  transition: background var(--t-fast);
}

.dl-details > summary:hover { background: var(--surface-hover); }

.dl-details[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.dl-details > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 68ch;
  margin: 0;
  padding: 16px 20px 0;
}

.dl-details > p:last-child { padding-bottom: 20px; }

/* ---------- requirements ---------- */

.dl-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--border);
  overflow: hidden;
}

.dl-specs > div {
  padding: 24px;
  background: var(--bg-raised);
}

.dl-specs dt {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.dl-specs dd {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ---------- what's in the pack ---------- */

.dl-mods {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}

.dl-mods > li {
  padding: 22px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--surface);
}

.dl-mods h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.dl-mods p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ---------- checksums ---------- */

.dl-verify {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 28px;
  align-items: start;
}

.dl-hashes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.dl-hashes > li {
  padding: 18px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.dl-hash-name {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

/* overflow-wrap rather than a scroller: a 64-character hash has to be
   selectable in one gesture, and a horizontal scrollbar inside a code block
   makes that needlessly fiddly on a phone. */
.dl-hashes code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  overflow-wrap: anywhere;
  user-select: all;
}

.dl-verify-how {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.dl-verify-how > p:first-child {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 16px;
}

.dl-cmd {
  margin: 0 0 14px;
}

.dl-cmd:last-child { margin-bottom: 0; }

.dl-cmd > span {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

.dl-cmd > code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---------- closing CTA ---------- */

.dl-cta {
  padding: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(41, 171, 226, 0.14), transparent 60%),
    var(--bg-raised);
}

.dl-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 14px;
}

.dl-cta p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 0 26px;
}

.dl-cta-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .dl-hero,
  .dl-verify {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .dl-section { padding: 56px 0; }
}

@media (max-width: 640px) {
  .dl-main { padding-left: 16px; padding-right: 16px; }

  .dl-files { padding: 12px; }

  .dl-file,
  .dl-specs > div { padding: 20px; }

  .dl-cta { padding: 28px 22px; }

  /* Pull the step numerals in tight — 68px of gutter is most of a phone's
     text column. The rule down the left moves with them. */
  .dl-steps { padding-left: 52px; }
  .dl-steps::before { left: 17px; }

  .dl-steps > li::before {
    left: -52px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* The download button is the point of the card — let it span the width
     rather than sit short against a wrapped paragraph. */
  .dl-file-btn {
    align-self: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-file,
  .dl-file-btn,
  .dl-details > summary {
    transition: none;
  }

  .dl-file:hover { transform: none; }
}