.home { padding-top: 1.5rem; }

/* A solid pink masthead, not a tint over the project artwork. */
.home-intro {
  --accent: var(--masthead-ink);
  background: var(--masthead);
  color: var(--masthead-ink);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 3rem;
}
.home-intro .eyebrow { color: inherit; font-family: var(--font-body); font-weight: 600; margin-bottom: 2.5rem; }
.home-intro h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.065em; font-weight: 800; max-width: 15ch; margin-bottom: 2rem; }
.home-intro h1 span { display: block; font-size: 0.48em; line-height: 1.15; letter-spacing: -0.035em; font-weight: 500; margin-top: 1rem; max-width: 21ch; }
.intro-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; border-top: 1px solid currentColor; padding-top: 1.25rem; }
.intro-bottom p { max-width: 37rem; margin: 0; font-size: 0.95rem; }
.intro-bottom strong { font-weight: 650; }
.about-link { white-space: nowrap; font-size: 0.85rem; }

/* The illustrations contain text and need the full content width. */
.project-notebook { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
.notebook-heading { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--fg); }
.notebook-heading h2 { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.03em; margin: 0; }
.notebook-heading > span { font-size: 0.8rem; color: var(--fg-quiet); }
.notebook-project { min-width: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.project-art { display: block; background: #100f0c; border-bottom: 4px solid var(--accent); }
.project-art img { display: block; width: 100%; }
.project-art:hover { outline: 2px solid var(--accent); outline-offset: 4px; }
.project-note { padding-top: 1.25rem; }
.project-note .project-category { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); margin-bottom: 0.5rem; }
.project-note h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 750; letter-spacing: -0.035em; margin-bottom: 0.75rem; }
.project-note h3 a { color: var(--fg); text-decoration: none; }
.project-note h3 a:hover { text-decoration: underline; }
.project-note h3 span { color: var(--accent); font-size: 0.8em; }
.project-note > p:last-child { font-size: 0.95rem; color: var(--fg-soft); margin: 0; max-width: 44ch; }
.agent-note { font-size: 0.85rem; color: var(--fg-soft); padding: 1.25rem 0 2rem; border-top: 2px solid var(--accent); }
@media (max-width: 640px) {
  .home-intro .eyebrow { margin-bottom: 2rem; }
  .intro-bottom { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .project-notebook { gap: 1.75rem; }
}