:root {
  --ink: #16211d;
  --muted: #5d6b66;
  --rule: #e2e8e5;
  --bg: #ffffff;
  --bg-soft: #f6f9f7;
  --accent: #1f4d3d;
  --link: #1f4d3d;
  --maxw: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8efec;
    --muted: #9bada7;
    --rule: #2a3733;
    --bg: #101614;
    --bg-soft: #16201d;
    --accent: #7fc7ac;
    --link: #7fc7ac;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* header: nav bar, wordmark at top left */
header {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* The wordmark. The mark IS the H, so the text beside it is only "alehold".
   The mark's tight viewBox puts the type baseline on its bottom edge and the cap
   height at y=29, so vertical-align:baseline lines it up with the letters exactly.
   Height 1.227em and width 0.96em come from that viewBox; change one, change both. */
.brand {
  display: inline-block;
  font-weight: 680;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand .lm {
  display: inline-block;
  vertical-align: baseline;
  height: 1.227em;
  width: 0.96em;
  margin-right: 0.03em;
  color: var(--accent);
}
.brand:hover { text-decoration: none; }

nav.links {
  display: flex;
  gap: 1.4rem;
  font-size: 0.95rem;
}
nav.links a { color: var(--muted); text-decoration: none; }
nav.links a:hover { color: var(--ink); text-decoration: underline; }

/* hero */
/* Vertical only. This element is class="hero wrap", and a `padding` SHORTHAND here
   overrides .wrap's horizontal padding, pinning the headline to the screen edge on
   mobile. Keep these as longhand properties. */
.hero { padding-top: 4rem; padding-bottom: 3rem; }
.hero .mark { width: 84px; height: 84px; color: var(--accent); }
h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.4rem 0 0.6rem;
}
.lede {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0;
  max-width: 34rem;
}

/* generic page */
main { padding-bottom: 4rem; }
.page { padding-top: 3rem; }
.page h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-top: 0; }

h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }

.updated {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2.5rem 0;
}
.card {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
}
.card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.notice {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1rem;
  color: var(--muted);
  margin: 2rem 0;
}

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--muted);
  font-size: 0.94rem;
}
footer a { color: var(--muted); }
footer nav { margin-bottom: 0.6rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Phones: the hero's desktop breathing room is too much on a small screen. */
@media (max-width: 34rem) {
  .wrap { padding: 0 1.25rem; }
  .hero { padding-top: 2.5rem; padding-bottom: 2rem; }
  .hero .mark { width: 64px; height: 64px; }
  .cards { margin: 2rem 0; }
  header { padding: 0.9rem 0; }
  .brand { font-size: 1.15rem; }
  nav.links { gap: 1.1rem; font-size: 0.9rem; }
}