/* The download page.
 *
 * Loaded after styles/main.css, which supplies the palette, the fonts, the menubar, the
 * buttons and the footer — this is part of the same site, not a separate thing. What it adds
 * is a reading column and a card grid, because the landing page is built out of full-bleed
 * pixel-art panels and none of that layout suits "here are five files".
 *
 * Body copy is system-ui for the same reason the legal pages' is: Jersey 15's digits and
 * glyphs are ambiguous at reading size, and this page is made of version numbers, file
 * extensions and OS names. Headings keep Silkscreen, so it still reads as Plates.
 */

/* The landing page's slides are `main > section { min-height: 100vh; display: flex; }`, which
   is right for full-bleed pixel-art panels and wrong for a page that is a list of five files:
   every block here came out a screen tall with its content stranded at the bottom. The legal
   pages dodge it by using no <section> at all; this page needs the elements, so it resets the
   rule instead. */
.dl > section {
  min-height: 0;
  display: block;
}

.dl {
  max-width: 52rem;
  margin: 0 auto;
  padding: calc(var(--menubar-h) + 44px) 20px 80px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.65;
}

.dl__kicker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--orange);
  margin: 0 0 6px;
}
.dl h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 40px);
  margin: 0 0 14px;
  line-height: 1.15;
}
.dl h2 {
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 19px);
  margin: 44px 0 14px;
  line-height: 1.3;
}
.dl h3 {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0 0 6px;
}
.dl p {
  margin: 0 0 14px;
}
.dl a {
  color: var(--blue);
}
.dl code {
  font-family: var(--font-mono);
  font-size: 1.05em;
  background: var(--parchment-2);
  padding: 0 4px;
}

.dl__lede {
  font-size: 1.08rem;
  max-width: 44rem;
}

/* --- The visitor's own platform, promoted --- */
.dl__mine {
  margin: 32px 0 8px;
  padding: 22px 24px;
  background: var(--parchment);
  border: var(--edge) solid var(--ink);
  box-shadow: 6px 6px 0 rgb(0 0 0 / 0.45);
}
.dl__mine-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 22px);
}
.dl__mine-sub {
  margin: 0 0 16px;
  color: var(--brown-mid);
}
.dl__mine-btn {
  margin: 0 0 10px;
}
.dl__btn-big {
  font-size: 17px;
  padding: 16px 26px;
}
.dl__mine-alt {
  margin: 0;
  font-size: 0.9rem;
}

/* --- Every platform --- */
.dl__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.dl__card {
  padding: 16px;
  background: #fff;
  border: var(--edge) solid var(--ink);
  box-shadow: 4px 4px 0 rgb(0 0 0 / 0.45);
  display: flex;
  flex-direction: column;
}
.dl__meta {
  font-size: 0.85rem;
  color: var(--brown-mid);
  /* Pushes the button to the bottom edge so a two-line and a one-line card still line their
     buttons up. */
  flex: 1;
}
.dl__action {
  margin: 0;
}
/* Promoted to the top of the page as well. Kept in the list so "every platform" is a complete
   list, but quietened so it does not read as two different offers. */
.dl__card.is-yours {
  opacity: 0.55;
}
.dl__card.is-pending {
  background: var(--parchment-2);
}
/* Not a button, and drawn so it cannot be mistaken for one: this is the honest state for a
   platform whose file does not exist yet. A dead download link is worse than no link. */
.dl__pending {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  padding: 10px 12px;
  border: 2px dashed var(--brown-dim);
  color: var(--brown-mid);
  background: transparent;
}

/* --- The prose blocks --- */
.dl__note {
  max-width: 44rem;
}
.dl__note ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.dl__note li {
  margin: 6px 0;
}
.dl__note--warn {
  margin-top: 44px;
  padding: 20px 24px;
  background: var(--parchment);
  border-left: 6px solid var(--orange);
}
.dl__note--warn h2 {
  margin-top: 0;
}

@media (max-width: 640px) {
  .dl__mine {
    padding: 18px 16px;
  }
  .dl__btn-big {
    display: block;
    text-align: center;
  }
}

/* Two buttons where every other platform has one: the Apple Silicon and Intel builds.
   Stacked rather than side by side, because the labels carry a parenthetical and a row of
   them wraps badly at phone width. */
.dl__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dl__mine-btn .dl__variants {
  flex-direction: column;
  align-items: flex-start;
}

/* Running it on Linux. Set apart from the warning prose around it, because it is the one
   block on this page a reader has to *do* something with — an AppImage that was never marked
   executable does nothing when double-clicked, and says nothing either. */
.dl__linux {
  margin: 28px 0 8px;
  padding: 18px 22px;
  background: var(--cream);
  border: 2px solid var(--brown-dim);
  border-radius: 10px;
}
.dl__linux h3 {
  margin: 0 0 10px;
}
.dl__linux ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.dl__linux li {
  margin: 8px 0;
}
.dl__linux code {
  /* The commands wrap rather than widening the page on a phone. */
  overflow-wrap: anywhere;
}

/* The SHA-256 list. Long hex strings that must not push the page sideways on a phone. */
.dl__hashes dt {
  font-weight: 600;
  margin-top: 0.75rem;
}
.dl__hashes dd {
  margin: 0.15rem 0 0;
}
.dl__hash {
  word-break: break-all;
  font-size: 0.8em;
  opacity: 0.8;
}