/*
------------------------------------------------

Midnight Moon Campaign

Atmospheric artwork-first presentation scoped to
the Midnight Moon campaign page.

------------------------------------------------
*/

.midnight-moon-page {
  --moon-black: #070604;
  --moon-charcoal: #12100e;
  --moon-umber: #2b2018;
  --moon-umber-soft: #1b1511;
  --moon-cream: #f1e9dc;
  --moon-body: #c9bcae;
  --moon-muted: #97897b;
  --moon-highlight: #d5b89c;
  --moon-highlight-bright: #ead7c1;
  --moon-line: rgba(213, 184, 156, 0.24);
  --moon-shadow: rgba(0, 0, 0, 0.72);

  --museum-black: var(--moon-black);
  --museum-panel: var(--moon-charcoal);
  --museum-panel-soft: var(--moon-umber-soft);
  --museum-border: var(--moon-line);
  --museum-heading: var(--moon-cream);
  --museum-body: var(--moon-body);
  --museum-muted: var(--moon-muted);
  --museum-accent: var(--moon-highlight);

  min-height: 100vh;
  background:
    radial-gradient(
      circle at 77% 8%,
      rgba(234, 215, 193, 0.09) 0,
      rgba(213, 184, 156, 0.035) 15rem,
      transparent 34rem
    ),
    linear-gradient(180deg, #0a0806 0%, var(--moon-black) 48%, #0b0806 100%);
  color: var(--moon-cream);
  font-family: Georgia, "Times New Roman", serif;
}

.midnight-moon-page *,
.midnight-moon-page *::before,
.midnight-moon-page *::after {
  box-sizing: border-box;
}

.midnight-moon-page .museum-object-explorer {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: clamp(40px, 5.5vw, 76px) 0 0;
}

/*
------------------------------------------------
Artwork Stage
------------------------------------------------
*/

.midnight-moon-page .object-explorer-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 68vh, 760px);
  margin-top: clamp(32px, 5vw, 60px);
  overflow: hidden;
  border: 1px solid var(--moon-line);
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(241, 233, 220, 0.12) 0,
      rgba(213, 184, 156, 0.045) 10rem,
      transparent 27rem
    ),
    linear-gradient(145deg, #0e0c0a 0%, #050504 58%, #0d0907 100%);
  box-shadow: 0 42px 110px var(--moon-shadow);
}

.midnight-moon-page .object-explorer-hero::before {
  position: absolute;
  z-index: -1;
  top: clamp(46px, 8vw, 104px);
  right: clamp(38px, 10vw, 148px);
  width: clamp(120px, 17vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 38% 34%,
      rgba(241, 233, 220, 0.13),
      rgba(213, 184, 156, 0.035) 62%,
      transparent 70%
    );
  content: "";
  filter: blur(1px);
  pointer-events: none;
}

.midnight-moon-page .object-media-stage {
  display: grid;
  min-height: inherit;
  padding: clamp(28px, 5vw, 64px);
  place-items: center;
}

.midnight-moon-page .object-media-stage figure {
  display: grid;
  width: 100%;
  margin: 0;
  place-items: center;
}

.midnight-moon-page .object-primary-media {
  display: block;
  width: auto;
  max-width: min(100%, 760px);
  height: auto;
  max-height: min(66vh, 700px);
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(234, 215, 193, 0.16);
  box-shadow:
    0 34px 78px rgba(0, 0, 0, 0.66),
    0 0 54px rgba(213, 184, 156, 0.055);
}

/*
------------------------------------------------
Opening and Object Facts
------------------------------------------------
*/

.midnight-moon-page .object-title-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(36px, 5.5vw, 76px);
  align-items: end;
  margin-top: 0;
  padding: clamp(30px, 4vw, 54px) 0;
  border: 0;
  border-top: 1px solid var(--moon-line);
  border-bottom: 1px solid var(--moon-line);
  background: transparent;
}

.midnight-moon-page .object-title-copy .eyebrow {
  max-width: 13ch;
  margin: 0 0 clamp(24px, 3.5vw, 46px);
  color: var(--moon-highlight-bright);
  font-size: clamp(20px, 2.7vw, 38px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.045em;
  line-height: 1.18;
  text-transform: none;
}

.midnight-moon-page .object-catalog-number {
  margin: 0 0 14px;
  color: var(--moon-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: 0.2em;
}

.midnight-moon-page .object-title-panel h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--moon-cream);
  font-size: clamp(54px, 8vw, 108px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}

.midnight-moon-page .object-artist {
  margin: 18px 0 0;
  color: var(--moon-body);
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: 0.035em;
}

.midnight-moon-page .object-title-details {
  align-items: stretch;
}

.midnight-moon-page .object-identity-facts {
  gap: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--moon-line);
  background: transparent;
}

.midnight-moon-page .object-identity-facts div {
  display: grid;
  grid-template-columns: minmax(90px, 0.65fr) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--moon-line);
  background: transparent;
}

.midnight-moon-page .object-identity-facts span {
  margin: 0;
  color: var(--moon-muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.midnight-moon-page .object-identity-facts strong {
  color: var(--moon-cream);
  font-size: 16px;
  font-weight: 400;
}

.midnight-moon-page .object-primary-link,
.midnight-moon-page .dossier-link {
  width: fit-content;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--moon-highlight);
  background: transparent;
  color: var(--moon-highlight-bright);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.midnight-moon-page .object-primary-link:hover,
.midnight-moon-page .dossier-link:hover {
  border-color: var(--moon-highlight-bright);
  background: rgba(213, 184, 156, 0.1);
  color: var(--moon-cream);
  transform: none;
}

/*
------------------------------------------------
Pareidorya and Museum Description
------------------------------------------------
*/

.midnight-moon-page .object-dossier {
  margin-top: clamp(66px, 9vw, 122px);
  padding: 0;
  border: 0;
  background: transparent;
}

.midnight-moon-page .dossier-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  margin: 0 0 clamp(36px, 5vw, 60px);
  padding-bottom: clamp(30px, 4vw, 50px);
  border-bottom: 1px solid var(--moon-line);
}

.midnight-moon-page .dossier-header .eyebrow,
.midnight-moon-page .dossier-kicker {
  color: var(--moon-highlight);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.midnight-moon-page .dossier-header h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--moon-cream);
  font-size: clamp(48px, 7vw, 94px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}

.midnight-moon-page .dossier-header .eyebrow {
  margin: 16px 0 0;
}

.midnight-moon-page .dossier-header > p {
  max-width: 34rem;
  margin: 0;
  color: var(--moon-body);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.62;
}

.midnight-moon-page .dossier-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(24px, 5vw, 64px);
}

.midnight-moon-page .dossier-panel {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.midnight-moon-page .dossier-panel + .dossier-panel {
  padding-left: clamp(20px, 3.5vw, 44px);
  border-left: 1px solid var(--moon-line);
}

.midnight-moon-page .dossier-panel h3 {
  margin: 12px 0 16px;
  color: var(--moon-cream);
  font-size: clamp(25px, 3vw, 37px);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.midnight-moon-page .dossier-panel p:not(.dossier-kicker) {
  max-width: 62ch;
  color: var(--moon-body);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.68;
}

.midnight-moon-page .dossier-panel .object-primary-link,
.midnight-moon-page .dossier-panel .dossier-link {
  display: flex;
  width: 100%;
  max-width: 30rem;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  text-align: center;
}

.midnight-moon-page .dossier-panel .object-primary-link {
  background: rgba(213, 184, 156, 0.12);
}

.midnight-moon-page .dossier-panel a[href="artwork.html?slug=midnight-moon"] {
  border-color: var(--moon-highlight-bright);
  background: rgba(213, 184, 156, 0.14);
  color: var(--moon-cream);
}

.midnight-moon-page .dossier-panel a[href^="https://tacocat.zone/"] {
  border-color: rgba(151, 137, 123, 0.78);
  color: var(--moon-body);
}

.midnight-moon-page .dossier-panel a[href="artwork.html?slug=midnight-moon"]:hover {
  background: rgba(213, 184, 156, 0.22);
}

.midnight-moon-page .dossier-panel a[href^="https://tacocat.zone/"]:hover {
  border-color: var(--moon-highlight);
  background: rgba(43, 32, 24, 0.44);
  color: var(--moon-highlight-bright);
}

/*
------------------------------------------------
Collector Invitation
------------------------------------------------
*/

.midnight-moon-page .collector-offer {
  display: grid;
  grid-template-columns: clamp(160px, 13vw, 184px) minmax(0, 1fr) minmax(280px, 0.72fr);
  grid-template-areas:
    "image heading control"
    "image copy status";
  gap: 10px clamp(26px, 3.5vw, 52px);
  width: 100%;
  max-width: none;
  margin: clamp(42px, 6vw, 76px) 0 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--moon-line);
  background:
    linear-gradient(145deg, rgba(43, 32, 24, 0.42), rgba(18, 16, 14, 0.5));
}

.midnight-moon-page .collector-offer__image {
  grid-area: image;
  align-self: center;
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid var(--moon-line);
  object-fit: cover;
  object-position: 50% 42%;
}

.midnight-moon-page .collector-offer h4 {
  grid-area: heading;
  max-width: 24ch;
  margin: 0;
  color: var(--moon-cream);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.midnight-moon-page .collector-offer p:not(.dossier-kicker) {
  grid-area: copy;
  max-width: 42ch;
  margin: 0;
  color: var(--moon-body);
  font-size: 15px;
  line-height: 1.6;
}

.midnight-moon-page .collector-offer button:disabled {
  grid-area: control;
  align-self: end;
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(151, 137, 123, 0.72);
  background: rgba(7, 6, 4, 0.48);
  color: var(--moon-muted);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.78;
}

.midnight-moon-page .collector-offer #collector-offer-status {
  grid-area: status;
  max-width: none;
  margin: 0;
  color: var(--moon-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

/*
------------------------------------------------
Campaign-Scoped Shared Museum Elements
------------------------------------------------
*/

.midnight-moon-page .shared-header {
  background: rgba(7, 6, 4, 0.96);
  border-bottom-color: var(--moon-line);
}

.midnight-moon-page .museum-navigation a:hover,
.midnight-moon-page .museum-navigation a.current {
  color: var(--moon-highlight-bright);
}

.midnight-moon-page .museum-footer {
  margin-top: 0;
  padding: clamp(48px, 5.5vw, 60px) clamp(20px, 3vw, 30px);
  border-top-color: var(--moon-line);
  background: #080604;
}

.midnight-moon-page .footer-title h2 {
  margin: 18px 0;
}

.midnight-moon-page .footer-quote {
  margin: 28px auto;
}

.midnight-moon-page .footer-navigation {
  gap: 14px;
  margin: 34px auto;
}

.midnight-moon-page .footer-bottom {
  margin-top: 40px;
}

.midnight-moon-page .footer-title p,
.midnight-moon-page .footer-navigation a:hover {
  color: var(--moon-highlight);
}

.midnight-moon-page .footer-navigation a {
  border-color: var(--moon-line);
}

/*
------------------------------------------------
Focus and Interaction Accessibility
------------------------------------------------
*/

.midnight-moon-page :where(a, button):focus-visible {
  outline: 3px solid var(--moon-highlight-bright);
  outline-offset: 5px;
}

.midnight-moon-page :where(a, button):focus:not(:focus-visible) {
  outline: none;
}

/*
------------------------------------------------
Tablet
------------------------------------------------
*/

@media (max-width: 980px) {
  .midnight-moon-page .museum-object-explorer {
    width: min(100% - 44px, 1240px);
    padding-top: 31px;
  }

  .midnight-moon-page .object-explorer-hero {
    min-height: clamp(440px, 62vh, 640px);
  }

  .midnight-moon-page .object-media-stage {
    padding: clamp(24px, 5vw, 48px);
  }

  .midnight-moon-page .object-primary-media {
    max-height: min(58vh, 600px);
  }

  .midnight-moon-page .object-title-panel,
  .midnight-moon-page .dossier-header,
  .midnight-moon-page .dossier-overview-grid {
    grid-template-columns: 1fr;
  }

  .midnight-moon-page .object-title-panel {
    gap: 39px;
    align-items: start;
  }

  .midnight-moon-page .object-title-copy .eyebrow {
    margin-bottom: 30px;
  }

  .midnight-moon-page .object-title-details {
    max-width: 580px;
  }

  .midnight-moon-page .dossier-header {
    gap: 26px;
    align-items: start;
  }

  .midnight-moon-page .dossier-panel + .dossier-panel {
    max-width: 680px;
    padding: 34px 0 0;
    border-top: 1px solid var(--moon-line);
    border-left: 0;
  }

  .midnight-moon-page .collector-offer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "image"
      "heading"
      "copy"
      "control"
      "status";
    gap: 12px;
  }

  .midnight-moon-page .collector-offer__image {
    width: min(100%, 190px);
    height: 150px;
    margin-bottom: 4px;
  }

  .midnight-moon-page .collector-offer button:disabled {
    margin-top: 8px;
  }
}

/*
------------------------------------------------
Mobile
------------------------------------------------
*/

@media (max-width: 680px) {
  .midnight-moon-page .museum-wordmark {
    max-width: 100%;
    white-space: normal;
  }

  .midnight-moon-page .museum-object-explorer {
    width: min(100% - 28px, 1240px);
    padding: 20px 0 0;
  }

  .midnight-moon-page .object-explorer-hero {
    min-height: min(68svh, 500px);
    margin-top: 28px;
  }

  .midnight-moon-page .object-explorer-hero::before {
    top: 28px;
    right: 18px;
  }

  .midnight-moon-page .object-media-stage {
    min-height: inherit;
    padding: 18px;
  }

  .midnight-moon-page .object-primary-media {
    max-width: 100%;
    max-height: min(58svh, 450px);
  }

  .midnight-moon-page .object-title-panel {
    gap: 32px;
    margin-top: 0;
    padding: 30px 0 34px;
  }

  .midnight-moon-page .object-title-copy .eyebrow {
    margin-bottom: 28px;
    font-size: clamp(22px, 8vw, 31px);
  }

  .midnight-moon-page .object-title-panel h1 {
    font-size: clamp(50px, 18vw, 76px);
  }

  .midnight-moon-page .object-identity-facts div {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 15px;
  }

  .midnight-moon-page .object-primary-link,
  .midnight-moon-page .dossier-link {
    width: 100%;
  }

  .midnight-moon-page .object-dossier {
    margin-top: 68px;
  }

  .midnight-moon-page .dossier-header {
    margin-bottom: 34px;
    padding-bottom: 32px;
  }

  .midnight-moon-page .dossier-header h2 {
    font-size: clamp(45px, 15vw, 66px);
  }

  .midnight-moon-page .dossier-panel p:not(.dossier-kicker) {
    font-size: 16px;
    line-height: 1.75;
  }

  .midnight-moon-page .dossier-panel + .dossier-panel {
    padding-top: 30px;
  }

  .midnight-moon-page .museum-footer {
    padding-top: 42px;
    padding-bottom: 42px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .midnight-moon-page .collector-offer {
    margin-top: 40px;
    gap: 10px;
    padding: 18px;
  }

  .midnight-moon-page .collector-offer__image {
    width: min(100%, 170px);
    height: 132px;
    margin-bottom: 2px;
  }
}

/*
------------------------------------------------
Motion and System Contrast Preferences
------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
  .midnight-moon-page *,
  .midnight-moon-page *::before,
  .midnight-moon-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .midnight-moon-page .object-explorer-hero,
  .midnight-moon-page .object-title-panel,
  .midnight-moon-page .dossier-header,
  .midnight-moon-page .dossier-panel + .dossier-panel,
  .midnight-moon-page .collector-offer,
  .midnight-moon-page .collector-offer__image {
    border-color: CanvasText;
  }

  .midnight-moon-page .collector-offer button:disabled {
    border-color: GrayText;
    color: GrayText;
  }

  .midnight-moon-page :where(a, button):focus-visible {
    outline-color: Highlight;
  }
}