/* R-219, the homepage: craft first (the quote builder, Homeowners, Leads), Writing second (Prototypes, end to end as its
   lead, then four equal cards). Page-only styles on top of e.css; R-127 tokens only. Cards are equal within a group. */

/* The thesis line: one sentence under the hero, the year in its own words. */
.dir-e .h-thesis { padding-top: 56px; }
.dir-e .h-thesis p { max-width: 880px; font-size: var(--t-stand); line-height: 1.35; font-weight: 300; color: var(--e-ink); }

/* Group labels: quiet, the same voice as the short version's heading. */
.dir-e .h-label { font-size: var(--t-label); line-height: 1.5; color: var(--e-soft); padding-bottom: 14px; border-bottom: 1px solid var(--e-rule); margin-bottom: 32px !important; }

/* Craft, then Writing. */
.dir-e .h-craft { padding-top: 200px; }
.dir-e .h-label--wrap { margin-bottom: 0 !important; }
.dir-e .h-craft .e-section { padding-top: 56px; }
.dir-e .h-craft .h-cards { margin-top: 96px; }
.dir-e .h-writing { padding-top: 200px; }
.dir-e .h-cards--writing { margin-top: 96px; }
.h-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; }
.h-lead-media { display: block; }
.dir-e .h-lead h2 { font-size: var(--t-h2); }

/* Cards: equal within a group. The whole card is the link. */
.h-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; }
.h-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-cards--1 { grid-template-columns: minmax(0, 1fr); }
.dir-e .h-card { display: block; color: var(--e-ink); text-decoration: none; }
.h-card .e-card { border-radius: 3px; overflow: hidden; box-shadow: var(--e-shadow); }
.dir-e .h-card .e-meta { margin-top: 16px; }
.dir-e .h-card h3 { margin-top: 6px; font-size: var(--t-h3); line-height: 1.2; font-weight: 400; }
.dir-e .h-card .h-card-copy { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--e-body-soft); }
.dir-e .h-card:hover h3, .dir-e .h-card:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }
.h-card:focus-visible { outline: 2px solid var(--e-ink); outline-offset: 6px; border-radius: 2px; }
/* The two ruled hover moments (R-172(g)) play on the new cards too. */
:is(.h-card:hover, .h-card:focus-visible) .e-card-moment { animation: var(--e-moment); }


/* Mobile first-class: everything stacks to one column, cards stay full width and legible. */
@media (max-width: 900px) {
    .h-lead { grid-template-columns: 1fr; }
    .h-lead-media { order: -1; }
    .h-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dir-e .h-craft, .dir-e .h-writing { padding-top: 128px; }
    .dir-e .h-craft .h-cards { margin-top: 72px; }
    .h-cards--3, .h-cards--2 { grid-template-columns: 1fr; }
    .h-cards { gap: 48px; }
}