:root {
  --november-coal: #0e0d0b;
  --november-slate: #181611;
  --november-rule: #3e372e;
  --november-bronze: #806b4f;
  --november-champagne: #ddc6a1;
  --november-ivory: #e8ded0;
  --november-muted: #c1b5a5;
  --november-display: Georgia, "Bitstream Charter", "Times New Roman", serif;
  --november-gold-line: linear-gradient(90deg, var(--november-rule), var(--november-bronze) 48%, var(--november-rule));
}

.november-campaign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "masthead masthead" "offer photo" "deadline deadline";
  overflow: hidden;
  border: 1px solid var(--november-rule);
  border-radius: 8px;
  background: var(--november-coal);
  color: var(--november-ivory);
  box-shadow: 0 18px 48px #0006;
}

.november-campaign[hidden] { display: none; }
.november-campaign--home { margin: 9px 0 35px; }

.campaign-masthead {
  grid-area: masthead;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 18px;
  padding: 12px clamp(15px, 3vw, 34px);
  border-bottom: 1px solid var(--november-bronze);
  border-image: var(--november-gold-line) 1;
}

.campaign-masthead p {
  margin: 0;
  font-size: .85rem;
  font-weight: 620;
  letter-spacing: .035em;
  line-height: 1.4;
}

.campaign-masthead .campaign-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--november-champagne);
}

.campaign-name::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border: 1px solid var(--november-bronze);
  transform: rotate(45deg);
}

.campaign-location { color: var(--november-muted); }

.campaign-copy {
  grid-area: offer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(23px, 4vw, 56px);
  background:
    radial-gradient(ellipse at top left, #231b13, transparent 75%),
    linear-gradient(142deg, #17140f, var(--november-coal));
  container-type: inline-size;
}

.campaign-title {
  margin: 0;
  color: var(--november-ivory);
  font-family: var(--november-display);
  font-size: clamp(1.8rem, 4.6vw, 4.4rem);
  font-size: clamp(1.8rem, 11.8cqi, 4.4rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.campaign-title span { display: block; }

.campaign-title .campaign-title-accent {
  color: var(--november-champagne);
  font-style: italic;
}

.campaign-terms {
  margin: clamp(16px, 2.6vw, 28px) 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--november-bronze);
  color: var(--november-muted);
  font-size: clamp(1rem, 1.55vw, 1.16rem);
  line-height: 1.48;
  text-wrap: balance;
}

.campaign-terms strong { color: var(--november-ivory); font-weight: 650; }

.campaign-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 19px;
  padding: 10px 16px;
  border: 1px solid var(--november-bronze);
  border-radius: 4px;
  background: var(--november-slate);
  color: var(--november-champagne);
  font-size: .93rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}

.campaign-button:hover { background: #2d251c; }
.november-campaign a:focus-visible { outline: 3px solid var(--november-champagne); outline-offset: 4px; }

.campaign-visual {
  grid-area: photo;
  display: grid;
  align-content: center;
  gap: clamp(8px, 1vw, 12px);
  margin: 0;
  padding: clamp(13px, 2.4vw, 34px);
  background: radial-gradient(ellipse at 74% 45%, #2b251d, var(--november-coal) 84%);
}

.campaign-gallery-title {
  margin: 0;
  color: var(--november-champagne);
  font-size: .83rem;
  font-weight: 650;
  line-height: 1.4;
}

.campaign-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

.campaign-print {
  display: block;
  margin: 0;
  padding: 7px 7px 0;
  border: 1px solid var(--november-rule);
  background: var(--november-slate);
  color: var(--november-muted);
  box-shadow: 0 8px 26px #0006;
}

.campaign-print img { display: block; width: 100%; height: auto; }

.campaign-print figcaption {
  padding: 7px 3px;
  font-size: .77rem;
  font-weight: 550;
  letter-spacing: .02em;
  line-height: 1.4;
}

.campaign-photo-stage {
  display: block;
  margin-bottom: 2px;
  color: var(--november-champagne);
  font-weight: 700;
}

.campaign-print--before {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 12px;
  padding: 7px;
}

.campaign-deadline {
  grid-area: deadline;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3px 18px;
  padding: 10px clamp(15px, 3vw, 34px);
  border-top: 1px solid var(--november-rule);
  background: var(--november-slate);
  color: var(--november-muted);
}

.campaign-deadline p { margin: 0; font-size: .88rem; font-weight: 550; }
.campaign-deadline time { margin-left: 4px; color: var(--november-champagne); font-size: .96rem; font-weight: 700; }

@media (max-width: 740px) {
  .november-campaign {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "masthead" "offer" "deadline" "photo";
  }
  .campaign-copy { padding: clamp(20px, 5.8vw, 40px); }
}

@media (max-width: 400px) {
  .campaign-masthead p { font-size: .75rem; }
  .campaign-deadline { padding-block: 8px; }
  .campaign-deadline p { font-size: .8rem; }
  .campaign-deadline time { font-size: .9rem; }
}