:root {
  --purple: #4a245f;
  --deep: #2f163f;
  --lilac: #c49bdb;
  --coral: #d64032;
  --paper: #fff9f3;
  --white: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--deep); background: var(--lilac); font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .75rem 1rem; background: #fff; color: #000; z-index: 10; }
.shell { width: min(1440px, calc(100% - 32px)); margin: 16px auto; overflow: hidden; border-radius: 22px; background: var(--purple); box-shadow: 0 16px 45px rgba(47,22,63,.22); }
.hero { min-height: 700px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem,6vw,6rem); padding: clamp(2rem,6vw,6rem); color: #fff; background: linear-gradient(150deg,var(--purple),var(--deep)); }
.campaign-logo { width: max-content; display: flex; flex-direction: column; margin-bottom: 4rem; text-transform: uppercase; font-weight: 900; line-height: .77; }
.campaign-logo .first { color: var(--lilac); font-size: clamp(2.4rem,5vw,4rem); }
.campaign-logo .last { color: #fff; font-size: clamp(2.15rem,4.5vw,3.6rem); letter-spacing: .11em; }
.campaign-logo .ribbon { width: max-content; align-self: center; margin: .45rem auto 0; padding: .48rem .8rem .42rem; background: var(--coral); font-size: clamp(.8rem,1.4vw,1.2rem); line-height: 1; letter-spacing: .08em; transform: rotate(-4deg); }
.eyebrow { margin: 0 0 .85rem; color: var(--lilac); font-size: .92rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 730px; margin: 0 0 1.25rem; font-size: clamp(3rem,6.6vw,6.4rem); line-height: .93; text-transform: uppercase; }
.lead { max-width: 700px; margin: 0 0 1.1rem; font-size: clamp(1.25rem,2vw,1.7rem); line-height: 1.4; }
.copy > p:last-child { max-width: 650px; font: 700 1rem/1.55 Arial,sans-serif; color: #eadcf1; }
.portrait { aspect-ratio: 4/5; margin: 0; overflow: hidden; border-radius: 22px; border: 2px solid rgba(255,255,255,.35); box-shadow: 18px 18px 0 var(--coral); }
.portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
footer { padding: 3rem clamp(2rem,6vw,6rem); background: var(--paper); line-height: 1.5; }
footer p { margin: 0 0 1rem; }
.small { font: .9rem/1.5 Arial,sans-serif; }
.land { max-width: 1050px; padding-top: 1.5rem; border-top: 2px solid #eadcf1; font: .86rem/1.55 Arial,sans-serif; }
@media (max-width: 760px) {
  .shell { width: 100%; margin: 0; border-radius: 0; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 2rem 1.35rem 3rem; }
  .campaign-logo { margin-bottom: 3rem; }
  .portrait { grid-row: 1; width: min(86%, 430px); justify-self: center; }
  .copy { display: contents; }
  .campaign-logo, .eyebrow, h1, .lead, .copy > p:last-child { grid-column: 1; }
  .campaign-logo { grid-row: 2; }
  .eyebrow { grid-row: 3; }
  h1 { grid-row: 4; }
  .lead { grid-row: 5; }
  .copy > p:last-child { grid-row: 6; }
  footer { padding: 2rem 1.35rem; }
}