/* Local study only: the event date travels with the headline. */
.local-preview-page .paper-hero {
  --local-partners-height: clamp(24px, 2.8cqw, 56px);
  --local-partners-gap: clamp(12px, 1.1cqw, 24px);
  /* The date line sits 24px above the H1; its height is the type's line box. */
  --local-date-size: clamp(14px, 1.112cqw, 28px);
  --local-date-height: calc(var(--local-date-size) * 1.15);
  --local-date-gap: 24px;
}
.local-preview-page .paper-hero-title-block {
  position: absolute;
  /* Keep the lockup above the artwork while preserving its own print backing. */
  z-index: 4;
  isolation: isolate;
  left: 75.82%;
  top: calc(29% - var(--local-date-height) - var(--local-date-gap));
  width: 19%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--local-partners-gap);
}
/* Share the form's top edge on desktop; the mobile layout stays in normal flow. */
@media (min-width: 651px) {
  .local-preview-page .paper-hero[data-aligned] .paper-hero-title-block {
    top: var(--paper-rsvp-top);
  }
}
.local-preview-page .paper-hero-title-block::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14px;
  background: var(--canvas);
  opacity: 0.94;
  filter: blur(14px);
  pointer-events: none;
}
.local-preview-page .paper-hero-title-block > .paper-hero-heading,
.local-preview-page .paper-hero-title-block > .paper-hero-date {
  position: static;
  inset: auto;
  width: auto;
  margin: 0;
}
.local-preview-page .paper-hero-title-block > .paper-hero-heading {
  padding: 0;
}
.local-preview-page .paper-hero-title-block > .paper-hero-heading::before {
  content: none;
}
.local-preview-page .paper-hero-title-block > .paper-hero-date {
  height: var(--local-date-height);
  flex: none;
  font-size: var(--local-date-size);
  /* The column gap is fluid; top it up to an exact 24px under the date. */
  margin-bottom: calc(var(--local-date-gap) - var(--local-partners-gap));
}

/* The mobile hero's short RSVP title is not duplicated in the desktop card,
   closing form or dialog cloned from this source. */
.paper-rsvp-mobile-title,
.paper-rsvp-divider {
  display: none;
}

/* The event wordmark is the RSVP heading in the hero and signup dialog. */
.local-preview-page .paper-hero-rsvp-head {
  display: block;
}
.local-preview-page .paper-event-title {
  position: relative;
  width: min(100%, clamp(11rem, 16vw, 22rem));
  margin: 0;
  padding: 0;
  line-height: 1;
}
.local-preview-page .paper-event-title img {
  width: 100%;
  height: auto;
}
.local-preview-page .signup-dialog .paper-event-title {
  width: min(calc(100% - 2.75rem), 16rem);
}
/* The Midterms Live wordmark (RSVP card) ships as white type with authored
   red/blue stars, plus an ink-type derivative for light mode. One variant
   shows per theme, so neither needs a backing box. */
.local-preview-page .paper-logo-dark {
  display: none;
}
[data-theme='dark'] .local-preview-page .paper-logo-dark {
  display: block;
}
[data-theme='dark'] .local-preview-page .paper-logo-light {
  display: none;
}

@media (max-width: 1250px) {
  .local-preview-page .paper-hero-title-block {
    left: 75%;
  }
}
@media (max-width: 900px) {
  .local-preview-page .paper-hero-title-block {
    left: 72%;
    top: calc(31% - var(--local-date-height) - var(--local-date-gap));
  }
}
/* At tablet widths the desktop three-column collage becomes two readable
   columns. Artwork stays in flow, so long copy and zoom cannot cover the form. */
@media (min-width: 651px) and (max-width: 900px) {
  .local-preview-page .paper-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: var(--space-6) var(--space-8);
    min-height: 0;
    height: auto;
    max-height: none;
    padding: calc(6rem + env(safe-area-inset-top)) var(--paper-gutter) var(--space-12);
  }
  .local-preview-page .paper-hero-title-block {
    position: relative;
    inset: auto;
    width: auto;
    grid-column: 1;
    grid-row: 1;
  }
  .local-preview-page .paper-hero[data-aligned] .paper-hero-title-block {
    top: auto;
  }
  .local-preview-page .paper-hero-heading {
    font-size: clamp(3rem, 7vw, 4rem);
  }
  .local-preview-page .paper-hero-art {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 1;
    grid-row: 2;
    margin-block: calc(-1 * var(--space-6));
  }
  .local-preview-page .paper-hero-blend {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
  .local-preview-page .paper-hero-rsvp:not(.signup-dialog-card) {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / 4;
    width: 100%;
    min-height: 0;
    padding: var(--space-6);
    gap: var(--space-6);
  }
  .local-preview-page .paper-hero-rsvp .offer {
    font-size: 1rem;
  }
  .local-preview-page .paper-hero-rsvp .button {
    min-height: 3.25rem;
    font-size: 1rem;
  }
  .local-preview-page .paper-hero-credits {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 3;
    justify-content: space-between;
    font-size: 0.75rem;
  }
  .local-preview-page .paper-hero-credits h3 {
    margin-bottom: var(--space-4);
  }
}
@media (max-width: 900px) {
  .local-preview-page .paper-nav {
    top: 0;
    inset-inline: 0;
    padding: max(1rem, env(safe-area-inset-top)) var(--paper-gutter) var(--space-3);
    background: var(--canvas);
  }
  .local-preview-page .paper-hero-rsvp .phone-field {
    min-height: 3.375rem;
    padding-block: var(--space-1);
  }
  .local-preview-page .paper-hero-rsvp .phone-field input {
    min-height: var(--control-hit-size);
  }
  .local-preview-page .paper-hero-watch {
    --paper-app-size: var(--control-hit-size);
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .local-preview-page .paper-hero-watch-label {
    font-size: 1rem;
    flex: none;
  }
  .local-preview-page .paper-nav .paper-brands {
    min-height: var(--control-hit-size);
  }
}
@media (max-width: 650px) {
  .local-preview-page .paper-hero {
    padding-inline: var(--paper-gutter);
    --local-partners-height: 34px;
    --local-partners-gap: 14px;
    --local-date-size: clamp(0.75rem, 3vw, 1rem);
  }
  .local-preview-page .paper-hero-title-block {
    position: relative;
    inset: auto;
    width: min(100%, max(55%, 11.5rem));
    grid-column: 1;
    grid-row: 2;
    margin-bottom: var(--space-4);
  }
  .local-preview-page .paper-hero-title-block::before,
  .local-preview-page .paper-hero-credits::before {
    content: none;
  }
  .local-preview-page .paper-hero-title-block > .paper-hero-date {
    width: max-content;
    max-width: calc(100vw - 2 * var(--paper-gutter));
    white-space: nowrap;
  }
  .local-preview-page .paper-hero-title-block > .paper-hero-heading {
    margin: 0;
    font-size: min(clamp(2.25rem, 11.5vw, 4rem), calc((100vw - 2 * var(--paper-gutter)) / 4.05));
  }
  /* The map shares the title row, aligned with its lower half. Keep the exact
     artwork ratio and let only its transparent edge extend beyond the gutter. */
  .local-preview-page .paper-hero-art {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    width: 56%;
    margin-block: 0 var(--space-4);
    margin-inline-end: calc(-0.5 * var(--paper-gutter));
  }
  .local-preview-page .paper-hero-watch {
    --paper-app-size: 1.175rem;
    gap: 0.694rem;
  }
  .local-preview-page .paper-hero-watch-label {
    font-size: 0.8125rem;
  }
  .local-preview-page .paper-hero-apps {
    gap: 0.3775rem;
  }
  .local-preview-page .paper-hero .paper-app-icon {
    /* Figma's 19px artwork keeps a full finger-sized invisible tap area. */
    position: relative;
  }
  .local-preview-page .paper-hero .paper-app-icon::after {
    content: '';
    position: absolute;
    inset: -0.75rem;
  }
  .local-preview-page .paper-hero #rsvp {
    grid-row: 3;
    container-type: inline-size;
    min-height: 0;
    padding: clamp(var(--space-5), 6.15vw, var(--space-8));
  }
  .local-preview-page .paper-hero #rsvp .paper-hero-rsvp-head {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-items: stretch;
  }
  .local-preview-page .paper-hero #rsvp .paper-hero-rsvp-lockup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .local-preview-page .paper-hero #rsvp .paper-event-title {
    flex: none;
    width: 23.36%;
    padding: 0;
  }
  .local-preview-page .paper-hero #rsvp .paper-rsvp-divider {
    position: relative;
    display: block;
    flex: none;
    width: 1px;
    height: 28px;
  }
  .local-preview-page .paper-hero #rsvp .paper-rsvp-divider img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .local-preview-page .paper-hero #rsvp .paper-rsvp-mobile-title {
    display: block;
    flex: 0 1 auto;
    width: max-content;
    max-width: calc(76.64% - 1rem);
    font-family: var(--font-display);
    font-variation-settings:
      'wdth' 47,
      'wght' 1000;
    font-weight: 1000;
    font-size: clamp(2rem, 16.36cqw, 5.25rem);
    line-height: 0.8;
    letter-spacing: -0.02em;
    white-space: normal;
  }
  .local-preview-page .paper-hero #rsvp .offer {
    margin: 0;
    line-height: 1.3;
  }
  .local-preview-page .paper-hero-credits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-row: 4;
    gap: var(--space-4);
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-variation-settings: var(--font-body-axes);
    font-size: clamp(0.75rem, 3.1vw, 0.875rem);
    line-height: 1.2;
  }
  .local-preview-page .paper-hero-credits > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .local-preview-page .paper-hero-credits :is(h3, p) {
    white-space: normal;
    text-wrap: wrap;
  }
  .local-preview-page .paper-hero-credits h3 {
    min-height: 2.4em;
    margin-bottom: var(--space-4);
  }
}

/* Native integration of the supplied standalone map. Geometry remains owned by
   .paper-hero-blend; the single radial fade belongs to the map itself. */
.pm-map-stage {
  container-type: inline-size;
  overflow: hidden;
  --pm-ink-base: url('../assets/landing/hero/map-654-4909-base.png');
  --pm-ink-blue: url('../assets/landing/hero/map-654-4909-blue.png');
  --pm-ink-red: url('../assets/landing/hero/map-654-4909-red.png');
  --pm-map-opacity: 0.82;
}
[data-theme='dark'] .pm-map-stage {
  --pm-map-opacity: 0.94;
}
.pm-map-stage .hero-ink {
  position: absolute;
  inset: 0;
  opacity: var(--pm-map-opacity);
  transition-property: none;
  mask-image: radial-gradient(
    circle 48.95cqw at 51.016% 40%,
    #000 0%,
    #000 50%,
    rgb(0 0 0 / 97.2%) 55%,
    rgb(0 0 0 / 89.6%) 60%,
    rgb(0 0 0 / 78.4%) 65%,
    rgb(0 0 0 / 64.8%) 70%,
    rgb(0 0 0 / 50%) 75%,
    rgb(0 0 0 / 35.2%) 80%,
    rgb(0 0 0 / 21.6%) 85%,
    rgb(0 0 0 / 10.4%) 90%,
    rgb(0 0 0 / 2.8%) 95%,
    transparent 100%
  );
}
.pm-map-stage .hero-ink-layer {
  position: absolute;
  overflow: hidden;
  transition-property: none;
}
.pm-map-stage .hero-ink-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition-property: none;
}

/* Exact, unmodified Figma vectors. Alpha masking ignores Hugo's placeholder
   red/blue fills while retaining the authored edge and 50% ink coverage. */
.pm-map-stage .hero-ink-patch {
  mask-image: var(--ink-mask);
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pm-map-stage .hero-ink[data-ink-ready='true'] {
    transform: var(--map-transform, none);
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Ink uses current quotes, then last-known/reference colors during an outage.
   Failed textures or masks and no-JS keep the monochrome collage. */
.pm-map-stage .hero-ink:not([data-ink-ready='true']) .hero-ink-patch,
.pm-map-stage .hero-ink-patch:not([data-ink-party='D']):not([data-ink-party='R']) {
  opacity: 0 !important;
}