.campaign {
  width: min(960px, calc(100% - 30px));
  max-width: none; max-height: min(740px, calc(100dvh - 30px));
  padding: 0; border: 1px solid rgba(237,231,218,.27);
  background: #101827; color: #EDE7DA;
  box-shadow: 0 32px 100px rgba(0,0,0,.65);
}
.campaign::backdrop { background: rgba(5,9,17,.62); backdrop-filter: blur(2px); }
.campaign__card { display: grid; grid-template-columns: minmax(240px,38%) minmax(0,1fr); min-height: 480px; }
.campaign__media { min-height: 100%; background: #041332; overflow: hidden; }
.campaign__media[hidden] { display: none; }
.campaign__image { width: 100%; height: 100%; object-fit: contain; display: block; }
.campaign__content { padding: clamp(22px,3.2vw,38px); overflow: auto; }
.campaign__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.campaign__brand, .campaign__eyebrow, .campaign__detail dt {
  font: 500 .68rem/1.4 "IBM Plex Mono",monospace; letter-spacing: .16em; text-transform: uppercase;
}
.campaign__brand { color: #B9B4A6; padding-top: 10px; }
.campaign__close { min-width: 40px; min-height: 40px; border: 1px solid rgba(237,231,218,.27); background: transparent; color: #EDE7DA; cursor: pointer; }
.campaign__close { font: 400 1.8rem/1 Arial,sans-serif; }
.campaign :focus-visible { outline: 2px solid #F0481E; outline-offset: 2px; }
.campaign__eyebrow { color: #F0481E; margin-top: clamp(20px,3vh,28px); }
.campaign__title { font: 900 clamp(2.6rem,5vw,4.2rem)/.91 "Big Shoulders",Impact,sans-serif; text-transform: uppercase; margin-top: 10px; }
.campaign__description { max-width: 50ch; color: #D3D1C8; line-height: 1.55; margin-top: 16px; }
.campaign__details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 22px 0 0; border-top: 1px solid rgba(237,231,218,.22); }
.campaign__detail { padding: 11px 10px 11px 0; border-bottom: 1px solid rgba(237,231,218,.22); }
.campaign__detail dt { color: #B9B4A6; }
.campaign__detail dd { margin: 4px 0 0; font: 600 .94rem/1.3 "IBM Plex Sans",sans-serif; }
.campaign__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.campaign__actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 15px; font: 800 1.22rem/1 "Big Shoulders",Impact,sans-serif; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; text-align: center; }
.campaign__primary { background: #F0481E; color: #101827; border: 1px solid #F0481E; flex: 1 1 180px; }
.campaign__primary:hover { background: #ff6039; }
.campaign__secondary { color: #EDE7DA; border: 1px solid rgba(237,231,218,.45); flex: 1 1 180px; }
.campaign__secondary:hover { border-color: #EDE7DA; }
@media (max-width: 680px) {
  .campaign { width: min(440px, calc(100% - 40px)); max-height: min(700px, calc(100dvh - 112px)); overflow-y: auto; overscroll-behavior: contain; }
  .campaign::backdrop { background: rgba(5,9,17,.42); backdrop-filter: blur(1px); }
  .campaign__card { display: block; min-height: 0; }
  .campaign__media { height: 100px; min-height: 0; }
  .campaign__image { object-position: center 36%; }
  .campaign__content { padding: 12px 18px 18px; overflow: visible; }
  .campaign__eyebrow { margin-top: 8px; }
  .campaign__title { font-size: clamp(2.15rem,10vw,3rem); margin-top: 6px; }
  .campaign__description { font-size: .92rem; line-height: 1.4; margin-top: 8px; }
  .campaign__details { margin-top: 10px; }
  .campaign__detail { padding-block: 6px; }
  .campaign__detail dd { font-size: .83rem; }
  .campaign__actions { margin-top: 12px; }
  .campaign__actions a { min-height: 42px; padding-block: 8px; }
}
@media (max-width: 390px) { .campaign__media { height: 115px; } .campaign__brand { font-size: .57rem; } }