/* Firsthand Math: the site's own pages, home and About. Content pages do not load this. */
* { box-sizing: border-box; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  font: 400 1.2rem/1.6 var(--fm-serif);
}
main { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 32px 4rem; }

h1 { font: 400 clamp(2.2rem, 5vw, 3.3rem)/1.08 var(--fm-serif); letter-spacing: -.015em; margin: 3rem 0 .6em; text-wrap: balance; }
h2 { font: 500 1.5rem/1.2 var(--fm-serif); margin: 1.8em 0 .4em; }
p { margin: 0 0 1em; }
main a:is(:link, :visited) {
  color: inherit; text-decoration: underline; text-decoration-color: var(--fm-terracotta);
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
main a:hover { text-decoration-thickness: 2px; }

/* Footer */
.fm-footer {
  width: 100%; max-width: 76rem; margin: 0 auto; padding: 22px 32px;
  border-top: 1px solid var(--fm-rule);
  font: 400 14px var(--fm-sans); color: var(--fm-quiet);
}

/* Home: the newest exploration as the hero */
main.fm-home { max-width: 76rem; }
.fm-hero {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center;
  padding: 40px 0; border-bottom: 1px solid var(--fm-rule);
}
.fm-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 10px 0 16px; }
.fm-hero h1 a:is(:link, :visited) { color: inherit; text-decoration: none; }
.fm-hero h1 a:hover { text-decoration: underline; text-decoration-color: var(--fm-terracotta); text-decoration-thickness: 2px; text-underline-offset: .12em; }
.fm-hero p:not(.fm-meta) { font-size: 1.2rem; }
.fm-hero-figure { display: block; border: 1px solid var(--fm-rule); border-radius: 12px; padding: 16px; }
.fm-hero-figure img { display: block; width: 100%; height: auto; }
.fm-intro { max-width: 40rem; margin: 32px 0 0; color: var(--fm-quiet); }

/* Home: the other explorations, as cards */
.fm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 40px; margin: 48px 0 0; }
.fm-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
main .fm-card:is(:link, :visited) { text-decoration: none; }
.fm-card-figure { display: block; border: 1px solid var(--fm-rule); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.fm-card-figure img { display: block; width: 100%; height: 12rem; object-fit: contain; }
.fm-card h2 { font: 400 1.5rem/1.2 var(--fm-serif); margin: 4px 0 2px; }
.fm-card p:not(.fm-meta) { font-size: 1.05rem; color: var(--fm-ink); margin: 0; }
.fm-card:hover h2 { text-decoration: underline; text-decoration-color: var(--fm-terracotta); text-decoration-thickness: 2px; text-underline-offset: .12em; }
.fm-card:hover .fm-card-figure { border-color: var(--fm-soft); }

@media (max-width: 600px) {
  main { padding: 0 18px 3rem; }
  .fm-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .fm-footer { padding: 18px; }
  body { font-size: 1.1rem; }
}