/* Public facade only. Keep spacing relative to its bounded content, not the viewport. */
:root {
    --public-gutter: clamp(20px, 3vw, 40px);
    --public-width: 1240px;
}
main, footer {
    width: 100%;
    max-width: var(--public-width);
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
}
header {
    gap: 24px;
    padding-inline: max(var(--public-gutter), calc((100% - var(--public-width)) / 2 + var(--public-gutter)));
}
.logo { flex-shrink: 0; }
nav a { font-size: 12px; }
.hero {
    margin-inline: calc(-1 * var(--public-gutter));
    padding: 64px var(--public-gutter);
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 48px;
    min-height: 580px;
}
.hero-copy, .site-card, .split > *, .grid > * { min-width: 0; }
.hero h1, .page-head h1 {
    font-size: clamp(2.5rem, 4.6vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -.045em;
    overflow-wrap: break-word;
}
.hero h1 { max-width: 13ch; }
.lead { color: #46565d; line-height: 1.6; }
.hero .lead { color: #e2eae7; max-width: 48ch; }
.eyebrow { color: #755000; line-height: 1.5; }
.hero .eyebrow { color: var(--accent); }
.site-card { transform: none; box-shadow: 8px 8px 0 rgba(0,0,0,.18); }
.page-head h1 { max-width: 19ch; }
.page-head .lead { max-width: 60ch; }
.split { gap: 40px; }
footer { line-height: 1.8; }
footer a { display: inline-block; margin-right: 16px; overflow-wrap: anywhere; }
a:focus-visible, summary:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}
@media (max-width: 900px) {
    header { align-items: flex-start; flex-direction: column; gap: 16px; }
    nav { justify-content: flex-start; }
    .hero { gap: 28px; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); }
    .hero h1 { font-size: clamp(2.5rem, 5.3vw, 3.5rem); }
}
@media (max-width: 760px) {
    .hero { grid-template-columns: minmax(0, 1fr); padding-block: 40px; min-height: 0; }
    .hero h1 { max-width: 16ch; }
    .site-card { width: 100%; max-width: 420px; margin: 8px 0 0; }
    .split, .grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .split { padding-block: 40px; }
    .page-head { padding-top: 40px; }
    .split h2 { font-size: 30px; line-height: 1.15; }
    nav { gap: 4px; }
    nav a { padding: 10px 8px; }
    .lead { overflow-wrap: anywhere; }
}