/* ============================================================
   Web fonts (subsetted by the `fonts/` workflow)
   - English / Latin  -> Amstelvar (variable serif, wght 100-900)
   - Chinese (CJK)    -> I.MingCP (Ming/song style serif)
   The @font-face rules come from /css/fonts.min.css which is
   loaded in layouts/partials/head.html.
   ============================================================ */
body {
  font-family: "Amstelvar", "I.MingCP", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Headings use the handwriting-style Chinese font for a softer look */
h1, h2, h3, h4, h5, h6 {
  font-family: "Amstelvar", "LXGW WenKai TC", "I.MingCP", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

/* Homepage Downloads envelope button — circular icon button (Vue island).
   The island renders <span class="button"><svg viewBox="0 0 24 24">…</svg></span>.
   The SVG carries no intrinsic size, so it MUST be sized here or it would
   render at the ~300×150 default and blow the button out of shape. */
.homepage-downloads {
  text-align: center;
}

.homepage-downloads .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #111;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* Position-stable hover on purpose: a `transform` lift on hover re-rasterizes
     the 1px-stroke inline SVG at fractional offsets every frame, which made the
     envelope icon appear to jitter left-right against the circle border (icon
     and button felt out of sync). Hover only changes fill/shadow — no motion —
     so the icon and border always stay perfectly locked. */
  vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.homepage-downloads .button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.homepage-downloads .button svg {
  width: 22px;
  height: 22px;
}

/* Keep the border visible in dark mode; hover gets a soft light fill */
@media (prefers-color-scheme: dark) {
  .homepage-downloads .button {
    border-color: #e5e5e5;
  }
  .homepage-downloads .button:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}