/*
 * Mr 9 Event Design v10.11.1 RC1 corrective hotfix
 * Restores the approved typography, keeps the stronger green identity,
 * enlarges navigation labels, and displays hero photographs without cropping.
 */

:root {
  --cond: "DejaVu Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --mr9-header-height: 92px;
}

/* Restore the established Mr 9 type character. No replacement webfont. */
h1,
h2,
h3,
.topbar,
.desktop-nav,
.project-link,
.mr9-portal-nav,
.mobile-nav nav a,
.button,
.btn,
.seo-solid,
.seo-text,
.seo-kicker,
.eyebrow,
.section-kicker,
.event-credit,
.work-meta > b,
.work-meta > span {
  font-family: var(--cond) !important;
}

/* Readable primary navigation with a guaranteed laptop menu fallback. */
.topbar {
  height: var(--mr9-header-height);
}

.topbar > .logo {
  width: 220px;
}

.topbar > .logo img {
  height: 74px;
  max-height: 74px;
}

.topbar .desktop-nav > a,
.topbar .desktop-nav > details > summary,
.topbar .project-link,
.topbar .mr9-portal-nav > summary {
  font-family: var(--cond) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
}

.topbar .mr9-nav-dropdown-panel a,
.topbar .mr9-portal-menu a {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

@media (min-width: 1440px) {
  .topbar {
    grid-template-columns: 220px minmax(0, 1fr) auto auto !important;
    gap: clamp(13px, 1vw, 20px) !important;
    padding-inline: 22px !important;
  }

  .topbar > .desktop-nav {
    display: flex !important;
    gap: clamp(10px, .78vw, 15px) !important;
  }

  .topbar > .project-link {
    display: flex !important;
  }

  .topbar > .mr9-portal-nav {
    display: block !important;
  }

  .topbar > .menu {
    display: none !important;
  }
}

@media (min-width: 721px) and (max-width: 1439px) {
  .topbar {
    grid-template-columns: 220px minmax(0, 1fr) auto 52px !important;
    gap: 16px !important;
  }

  .topbar > .desktop-nav,
  .topbar > .mr9-portal-nav {
    display: none !important;
  }

  .topbar > .project-link {
    display: flex !important;
    grid-column: 3 !important;
    font-size: 13px !important;
  }

  .topbar > .menu {
    display: inline-flex !important;
    grid-column: 4 !important;
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .mobile-nav {
    padding-top: 122px !important;
  }
}

/*
 * Proof-first without sacrificed photography: the image is a normal-flow
 * grid item. Its intrinsic aspect ratio determines its height, so no edge is
 * cut off and no fixed-height black cavity is created.
 */
@media (min-width: 981px) {
  .page-hero.mr9-complete-photo-hero,
  .seo-hero.mr9-complete-photo-hero {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: var(--mr9-header-height) !important;
    align-items: center !important;
    overflow: hidden !important;
    background: #090a08 !important;
    border-bottom: 1px solid rgba(236, 238, 232, .22);
  }

  .page-hero.mr9-complete-photo-hero::after,
  .seo-hero.mr9-complete-photo-hero .seo-hero-shade {
    display: none !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-grid {
    position: absolute !important;
    inset: var(--mr9-header-height) 54% 0 0 !important;
    display: block !important;
    opacity: .72;
    pointer-events: none;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-media,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    background: #090a08;
    z-index: 1 !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-media .media-credit,
  .page-hero.mr9-complete-photo-hero .page-hero-media picture,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media picture {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-media img,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-copy,
  .seo-hero.mr9-complete-photo-hero .seo-hero-copy {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(56px, 5vw, 92px) clamp(34px, 4vw, 76px) !important;
    background: transparent !important;
    text-shadow: none !important;
    z-index: 3 !important;
  }

  .page-hero.mr9-complete-photo-hero .page-brand-mark {
    display: none !important;
  }

  body.mr9-medium-hero .page-hero.mr9-complete-photo-hero h1 {
    max-width: 12ch !important;
    margin: 18px 0 24px !important;
    font-size: clamp(44px, 5.3vw, 76px) !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
  }

  body.mr9-compact-hero .page-hero.mr9-complete-photo-hero h1 {
    max-width: 13ch !important;
    margin: 16px 0 22px !important;
    font-size: clamp(38px, 4.5vw, 62px) !important;
    font-weight: 900 !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  body.tpf-page .page-hero.mr9-complete-photo-hero h1 {
    max-width: 13ch !important;
    font-size: clamp(42px, 4.75vw, 72px) !important;
  }

  .seo-hero.mr9-complete-photo-hero .seo-hero-copy > p:not(.seo-case-credit),
  .seo-hero.mr9-complete-photo-hero .seo-kicker,
  .page-hero.mr9-complete-photo-hero .page-hero-copy > p {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  .seo-hero.mr9-complete-photo-hero h1 {
    max-width: 11.5ch !important;
    margin: 18px 0 24px !important;
    font-family: var(--cond) !important;
    font-size: clamp(46px, 4.65vw, 84px) !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
    text-wrap: balance;
  }

  .seo-hero.mr9-complete-photo-hero .seo-hero-copy > span,
  .page-hero.mr9-complete-photo-hero .page-hero-copy > span {
    display: block !important;
    max-width: 38rem !important;
    font-size: clamp(17px, 1.2vw, 21px) !important;
    line-height: 1.5 !important;
  }

  .page-hero.mr9-complete-photo-hero .event-credit {
    right: auto !important;
    bottom: 14px !important;
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
  }
}

/* Original homepage face, restored at the requested one-to-two-pixel lift. */
body.mr9-home-hero .hero-v69 h1 {
  font-family: var(--cond) !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
}

body.mr9-home-hero .hero-v69 {
  padding-top: var(--mr9-header-height) !important;
}

body.mr9-home-hero .hero-v69 .hero-grid {
  inset: var(--mr9-header-height) 0 0 !important;
}

body.mr9-home-hero .hero-v69 .hero-v69-shell {
  min-height: calc(100svh - var(--mr9-header-height)) !important;
}

/* Tablet and phone: copy first, then the complete project image at natural ratio. */
@media (max-width: 980px) {
  .page-hero.mr9-complete-photo-hero,
  .seo-hero.mr9-complete-photo-hero {
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: var(--mr9-header-height) !important;
    flex-direction: column !important;
    background: #090a08 !important;
  }

  .page-hero.mr9-complete-photo-hero::after,
  .page-hero.mr9-complete-photo-hero .page-hero-grid,
  .seo-hero.mr9-complete-photo-hero .seo-hero-shade,
  .page-hero.mr9-complete-photo-hero .page-brand-mark {
    display: none !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-copy,
  .seo-hero.mr9-complete-photo-hero .seo-hero-copy {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(42px, 8vw, 68px) clamp(20px, 6vw, 48px) !important;
    background: #090a08 !important;
    text-shadow: none !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-media,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-media .media-credit,
  .page-hero.mr9-complete-photo-hero .page-hero-media picture,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media picture,
  .page-hero.mr9-complete-photo-hero .page-hero-media img,
  .seo-hero.mr9-complete-photo-hero .seo-hero-media img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .page-hero.mr9-complete-photo-hero h1,
  .seo-hero.mr9-complete-photo-hero h1 {
    max-width: 12ch !important;
    margin: 16px 0 22px !important;
    font-family: var(--cond) !important;
    font-size: clamp(42px, 9.2vw, 70px) !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: -.05em !important;
  }
}

@media (max-width: 720px) {
  :root {
    --mr9-header-height: 70px;
  }

  .topbar {
    height: var(--mr9-header-height);
  }

  .topbar > .logo {
    width: 166px;
  }

  .topbar > .logo img {
    height: 54px;
    max-height: 54px;
  }

  .page-hero.mr9-complete-photo-hero .page-hero-copy,
  .seo-hero.mr9-complete-photo-hero .seo-hero-copy {
    padding: 38px 20px 36px !important;
  }

  .page-hero.mr9-complete-photo-hero h1,
  .seo-hero.mr9-complete-photo-hero h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }

  body.mr9-home-hero .hero-v69 h1 {
    font-size: clamp(43px, 15.5vw, 70px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero.mr9-complete-photo-hero *,
  .seo-hero.mr9-complete-photo-hero * {
    transition: none !important;
  }
}

/* TPF had higher-specificity legacy crop/filter rules; neutralize them here. */
body.tpf-page .page-hero.tpf-hero.mr9-complete-photo-hero {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

body.tpf-page .page-hero.tpf-hero.mr9-complete-photo-hero .page-hero-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

body.tpf-page .page-hero.tpf-hero.mr9-complete-photo-hero .page-hero-media img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
}
