.site-shell {
    min-height: 100vh;
    overflow: clip;
}

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin-inline: auto;
}

.container--narrow {
    width: min(calc(100% - 2rem), var(--container-narrow));
}

.section { padding-block: clamp(4.5rem, 8vw, 8rem); }
.section-space { padding-block: clamp(3.5rem, 7vw, 7rem); }
.site-main--front { overflow: clip; }

.section-heading {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-heading h2 {
    max-width: 15ch;
    margin-bottom: 0;
}

.section-heading > p {
    max-width: 38rem;
    margin-bottom: 0;
    color: var(--color-ink-soft);
}

.section-heading--action { align-items: end; }

.post-grid,
.place-grid,
.journal-placeholder-grid {
    display: grid;
    gap: var(--space-4);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.prose {
    color: var(--color-ink-soft);
    font-size: clamp(1.03rem, 0.98rem + 0.24vw, 1.18rem);
}

.prose > * {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.prose > .alignwide { max-width: min(var(--container), calc(100vw - 2rem)); }
.prose > .alignfull { max-width: none; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.prose h2,
.prose h3,
.prose h4 { color: var(--color-ink); margin-top: 2.1em; margin-bottom: 0.65em; }
.prose p,
.prose ul,
.prose ol,
.prose blockquote { margin-bottom: 1.35em; }
.prose a { color: var(--color-terracotta-dark); }
.prose blockquote {
    padding: var(--space-4);
    border-left: 3px solid var(--color-terracotta);
    background: var(--color-sand-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-ink);
    font-size: var(--step-1);
}

@media (min-width: 45rem) {
    .container { width: min(calc(100% - 3rem), var(--container)); }
    .post-grid,
    .journal-placeholder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .section-heading { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr); }
    .section-heading--action { grid-template-columns: 1fr auto; }
    .post-grid,
    .place-grid,
    .journal-placeholder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}