/* "Why I made this site": the publisher's note under the reader's guide. Same band as the guide: cream ground, 1180px measure, hairline on top. */
.ds-why {
    --color-bg: var(--d2-bg, #f2efcf);
    --color-fg: var(--d2-fg, #32361f);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 64px 48px 90px;
    color: var(--color-fg);
    background: var(--color-bg);
    scroll-margin-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--color-fg) 28%, transparent);
}
.ds-why, .ds-why * { box-sizing: border-box; }
.ds-why .ds-why-label {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--cherokee, #9e3a2b);
}
.ds-why .ds-why-title {
    margin: 16px 0 0;
    font-family: 'EB Garamond', serif;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.025em;
}
@media (min-width: 1000px) {
    .ds-why .ds-why-title { white-space: nowrap; font-size: clamp(38px, 4.6vw, 60px); }
}
.ds-why .ds-why-body { max-width: 62ch; margin: 28px 0 0; }
.ds-why .ds-why-body p {
    margin: 0 0 1em;
    font-family: 'EB Garamond', serif;
    font-size: clamp(20px, 1.8vw, 23px);
    line-height: 1.45;
}
.ds-why .ds-why-body p:last-child { margin-bottom: 0; }
.ds-why .ds-why-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The signature: his hand, then the printed name and the role line in the guide's mono. */
.ds-why .ds-why-sig { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ds-why .ds-why-sig img { display: block; height: 88px; width: auto; margin: 0 0 6px -8px; }
.ds-why .ds-why-name { margin: 0; font-family: 'Libre Franklin', Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; }
.ds-why .ds-why-role {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-fg) 72%, transparent);
}
@media (max-width: 620px) {
    .ds-why { padding: 38px 22px 60px; }
    .ds-why .ds-why-sig img { height: 72px; }
}