/*
 * The web editions and their archives (step 9). No board draws them: the
 * page is the desk's compact head, then the letter exactly as the inbox
 * gets it (its own inline styles, Georgia and Arial) on the inbox ground
 * both email boards use, then the letter's signup on Forest.
 */

/* Head */
.mhf-edition-head { padding-top: clamp(28px, 4vw, 48px); }
.mhf-edition-head__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; border-bottom: 1px solid var(--mhf-ink); padding: 6px 0 20px; }
.mhf-edition-head__titles { display: flex; flex-direction: column; gap: 8px; }
.mhf-edition-head__title { font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.02em; }
.mhf-edition-head__date { font-family: var(--mhf-font-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--mhf-text-2); max-width: 52ch; }
.mhf-edition-head__join { min-height: 48px; font-size: 15px; padding: 0 24px; border-color: var(--mhf-blaze); }

/* The letter, as sent, on the inbox ground */
.mhf-edition__ground { background: #DDD8CB; padding: clamp(24px, 4vw, 48px) 0; margin-top: 32px; }
.mhf-edition__letter { max-width: 600px; margin: 0 auto; box-shadow: 0 20px 40px rgba(24, 38, 32, 0.12); }
.mhf-edition__letter table { border-collapse: separate; border-spacing: 0; }
.mhf-edition__letter img { max-width: 100%; }
.mhf-edition__letter h1, .mhf-edition__letter h2, .mhf-edition__letter h3, .mhf-edition__letter p { text-wrap: pretty; }
.mhf-edition__letter a:hover { color: var(--mhf-lake) !important; }

/* Earlier, every edition, later */
.mhf-edition-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding-top: 28px; padding-bottom: 8px; }
.mhf-edition-nav__link { display: flex; flex-direction: column; gap: 4px; color: var(--mhf-ink); padding: 8px 0; }
.mhf-edition-nav__link--next { text-align: right; align-items: flex-end; }
.mhf-edition-nav__title { font-family: var(--mhf-font-display); font-size: 19px; line-height: 1.25; }
.mhf-edition-nav__link:hover .mhf-edition-nav__title { color: var(--mhf-lake); }
.mhf-edition-nav__all { color: var(--mhf-forest); padding: 12px 0; }

/* The signup band */
.mhf-edition-signup { max-width: 960px; margin: clamp(40px, 6vw, 88px) auto; padding: 0 var(--mhf-gutter); }
.mhf-edition-signup__inner { background: var(--mhf-forest); color: var(--mhf-paper); padding: clamp(32px, 5vw, 60px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.mhf-edition-signup__title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; max-width: 22ch; }
.mhf-edition-signup__copy { font-size: 18px; line-height: 1.55; color: var(--mhf-paper-reverse); max-width: 46ch; }
.mhf-edition-signup .mhf-signup { width: 100%; max-width: 520px; text-align: left; margin-top: 4px; }
.mhf-edition-signup .mhf-button--blaze { padding: 0 24px; }

/* The archive */
.mhf-editions { padding-top: 8px; }
.mhf-editions__list { border-top: 0; }
.mhf-editions__item { border-bottom: 1px solid var(--mhf-hairline); }
.mhf-editions__link { display: grid; grid-template-columns: 200px minmax(0, 1fr) 160px; gap: 24px; align-items: center; padding: 20px 0; color: var(--mhf-ink); }
.mhf-editions__link:hover .mhf-editions__headline { color: var(--mhf-lake); }
.mhf-editions__when { display: flex; flex-direction: column; gap: 4px; }
.mhf-editions__number { font-family: var(--mhf-font-display); font-style: italic; font-size: 26px; line-height: 1; color: var(--mhf-lake); }
.mhf-editions__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mhf-editions__headline { font-family: var(--mhf-font-display); font-size: 25px; line-height: 1.2; }
.mhf-editions__line { font-size: 16px; line-height: 1.5; color: var(--mhf-text-2); }
.mhf-editions__media img { width: 160px; aspect-ratio: 3 / 2; object-fit: cover; }
.mhf-editions__other { margin-top: 28px; }

@media (max-width: 767px) {
	.mhf-edition-head { padding-top: 20px; }
	.mhf-edition-head__title { font-size: 40px; }
	.mhf-edition-head__date { font-size: 17px; }
	.mhf-edition-head__join { width: 100%; }
	.mhf-edition__ground { margin-top: 20px; padding: 0; background: transparent; }
	.mhf-edition__letter { box-shadow: none; }
	.mhf-edition-nav { grid-template-columns: 1fr 1fr; padding-left: var(--mhf-gutter-phone); padding-right: var(--mhf-gutter-phone); }
	.mhf-edition-nav__all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
	.mhf-edition-nav__title { font-size: 16px; }
	.mhf-edition-signup { margin: 32px 0 0; padding: 0; }
	.mhf-editions__link { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "when media" "body media"; gap: 6px 16px; padding: 16px 0; }
	.mhf-editions__when { grid-area: when; flex-direction: row; align-items: baseline; gap: 10px; }
	.mhf-editions__number { font-size: 20px; }
	.mhf-editions__body { grid-area: body; }
	.mhf-editions__headline { font-size: 20px; }
	.mhf-editions__line { font-size: 15px; }
	.mhf-editions__media { grid-area: media; }
	.mhf-editions__media img { width: 96px; }
}

/* The card's own phone rules, which the email carries in its head, for the page */
@media (max-width: 620px) {
	.mhf-edition__letter .mhf-px { padding-left: 20px !important; padding-right: 20px !important; }
	.mhf-edition__letter .mhf-stack { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
	.mhf-edition__letter .mhf-stack-gap { padding-left: 0 !important; padding-top: 14px !important; text-align: left !important; }
	.mhf-edition__letter .mhf-stack-top { padding: 16px 18px 0 !important; text-align: left !important; }
	.mhf-edition__letter .mhf-stack-in { padding: 12px 18px 16px !important; text-align: left !important; }
	.mhf-edition__letter .mhf-stack-cta { padding: 0 20px 18px !important; text-align: left !important; }
	.mhf-edition__letter .mhf-full { width: 100% !important; height: auto !important; }
	.mhf-edition__letter .mhf-mast { font-size: 32px !important; }
	.mhf-edition__letter .mhf-h-lead { font-size: 26px !important; }
}