.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.masthead { background: var(--ink); color: var(--paper); }
.masthead__inner { display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 88px; border-bottom: 1px solid var(--grey); }
.masthead__title { font-family: var(--display); font-size: 24px; letter-spacing: .05em; text-transform: uppercase; }
.masthead__description { color: var(--paper-deep); font-size: 16px; }
.note__section { padding-block: 80px; background: var(--paper); color: var(--ink); }
.note__section--ink { background: var(--ink); color: var(--paper); }
.note__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 80px; align-items: start; }
.note__title { max-width: 13ch; }
.note__section--ink .note__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); }
.note__section--ink .note__heading { grid-column: 2; grid-row: 1; }
.note__section--ink .note__body { grid-column: 1; grid-row: 1; }
.note__body { min-width: 0; max-width: 72ch; }
.note__body > * + * { margin-top: 24px; }
.note__eyebrow { font-size: 16px; color: var(--grey); margin-bottom: 16px; }
.note__section--ink .note__eyebrow { color: var(--paper-deep); }
.note__heading::before { content: ""; display: block; width: 48px; height: 8px; margin-bottom: 24px; background: var(--coral); }
.site-footer { background: var(--ink); color: var(--paper-deep); padding-block: 40px; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: start; gap: 40px; }
.site-footer__line { max-width: 56ch; font-size: 16px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__link { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; font-size: 16px; }
@media (max-width: 760px) {
  .masthead__inner { min-height: 104px; flex-direction: column; align-items: start; justify-content: center; gap: 0; }
  .note__section { padding-block: 48px; }
  .note__inner, .note__section--ink .note__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .note__section--ink .note__heading, .note__section--ink .note__body { grid-column: auto; grid-row: auto; }
  .note__title { max-width: 15ch; }
  .site-footer__inner { flex-direction: column; gap: 24px; }
}