/* page-home.css — Arik Housley homepage. Designed against tokens.css v1.0.
   Page-specific layout only; every color, size and space comes from tokens.
   Section order follows the live homepage (rebuild/INVENTORY.md, 2026-10-10). */

/* hero: the book, on slate (the spine scheme) ----------------------------- */
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-s-8); align-items: center; }
.hero__title { margin-bottom: var(--ah-s-4); }
.hero__book {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-fw-display);
  font-size: var(--ah-fs-h3);
  line-height: var(--ah-lh-heading);
  color: var(--ah-gold);                /* gold type on slate: 7.81:1, the spine's name in gold */
  margin-bottom: var(--ah-s-4);
}
.hero__actions { margin-bottom: var(--ah-s-3); }
.hero__note { max-width: 40ch; margin: 0; }
.hero__media { margin: 0; }
.hero__img { width: 100%; border-radius: var(--ah-radius-card); }

/* intro + topics (white) -------------------------------------------------- */
.topics__intro { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: var(--ah-s-8); align-items: center; margin-bottom: var(--ah-s-8); }
.topics__head { max-width: 40rem; }
.topics__more { margin: 0; font-weight: var(--ah-fw-strong); }
.topics__media { margin: 0; justify-self: end; }
.topics__img { width: 100%; max-width: 300px; border-radius: var(--ah-radius-card); }
.topics__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ah-s-3); }

/* story (mist) ------------------------------------------------------------- */
.story__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--ah-s-8); align-items: center; }
.story__media { margin: 0; }
.story__img { width: 100%; border-radius: var(--ah-radius-card); }
.story__text { font-size: var(--ah-fs-lead); line-height: var(--ah-lh-lead); }

/* testimonials (teal): one featured, four in a grid ------------------------ */
.testimonials__title { margin-bottom: var(--ah-s-6); }
.testimonials__feature { max-width: 52rem; margin-bottom: var(--ah-s-8); }
.testimonials__feature-text { font-size: var(--ah-fs-h3); line-height: 1.4; }
.testimonials__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ah-s-6) var(--ah-s-8); }

/* contact (white) ---------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--ah-s-8); align-items: start; }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-s-3); }
.contact__wide { grid-column: 1 / -1; }
.contact__textarea { resize: vertical; }

@media (max-width: 900px) {
  .hero__grid, .topics__intro, .story__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--ah-s-6); }
  .topics__media { justify-self: start; }
  .topics__grid, .testimonials__grid, .contact__form { grid-template-columns: 1fr; }
  .testimonials__feature-text { font-size: var(--ah-fs-lead); }
}