/* Generated artwork integration: decorative backgrounds and brand marks. */

html { container-type: inline-size; }
body { overflow-x: clip; }

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  background: url("/assets/brand/crowned-q.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(31, 27, 20, .14));
}

.hero,
.lab,
.methodology,
.record-hero,
.collection-hero {
  position: relative;
  isolation: isolate;
}

.hero::before,
.hero::after,
.lab::before,
.lab::after,
.record-hero::before,
.record-hero::after,
.collection-hero::before,
.collection-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  width: 100cqw;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Homepage: the archive opens inside the ancestral cave. */
.hero {
  min-height: calc(100svh - 68px);
  color: var(--paper-light);
}

.hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(11, 20, 29, .88) 0%, rgba(11, 20, 29, .69) 50%, rgba(11, 20, 29, .86) 100%),
    linear-gradient(180deg, rgba(11, 20, 29, .16), rgba(11, 20, 29, .48)),
    url("/assets/art/ancestral-cave.webp") center 49% / cover no-repeat;
}

.hero::after {
  z-index: -1;
  background:
    radial-gradient(circle at 50% 43%, transparent 0 19rem, rgba(6, 14, 22, .20) 48rem),
    linear-gradient(180deg, rgba(242, 234, 219, .10), transparent 18%, transparent 82%, rgba(242, 234, 219, .14));
  box-shadow: inset 0 -1px rgba(242, 234, 219, .24);
}

.hero-kicker { color: #ddcba8; }
.hero-deck { color: #f4ead8; text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }
.hero-copy { color: #e8e0d3; text-shadow: 0 2px 18px rgba(0, 0, 0, .32); }
.hero .button-primary { border-color: var(--paper-light); background: var(--paper-light); color: var(--ink); }
.hero .button-primary:hover { background: white; }
.hero .button-ghost { border-color: rgba(248, 243, 233, .68); background: rgba(9, 18, 27, .18); color: var(--paper-light); }
.hero .button-ghost:hover { background: rgba(248, 243, 233, .14); }
.hero-rule { color: #dccaaa; }
.hero-rule span { background: rgba(242, 234, 219, .42); }

/* Homepage laboratory: artwork remains atmospheric while controls stay solid. */
.lab::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(242, 234, 219, .97) 0%, rgba(242, 234, 219, .90) 42%, rgba(242, 234, 219, .75) 100%),
    url("/assets/art/queefonomics-lab.webp") center 48% / cover no-repeat;
}

.lab::after {
  z-index: -1;
  background:
    linear-gradient(180deg, var(--paper) 0, transparent 13%, transparent 86%, var(--paper) 100%),
    radial-gradient(circle at 78% 44%, transparent 0 18rem, rgba(242, 234, 219, .25) 50rem);
}

.calculator-card {
  background: rgba(248, 243, 233, .96);
  box-shadow: 0 28px 90px rgba(44, 34, 20, .18), 0 2px 10px rgba(44, 34, 20, .08);
  backdrop-filter: blur(10px);
}

.calculator-controls { background: rgba(248, 243, 233, .82); }

/* The Institute seal appears as a restrained institutional watermark. */
.methodology {
  overflow: hidden;
  padding-right: clamp(180px, 22vw, 310px);
}

.methodology::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(4px, 2vw, 32px);
  width: clamp(170px, 20vw, 270px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-4deg);
  background: url("/assets/brand/institute-seal.webp") center / contain no-repeat;
  opacity: .095;
  pointer-events: none;
  filter: saturate(.55);
}

.methodology > * { position: relative; z-index: 1; }

/* Shared specimen hero artwork. Long-form article copy remains on plain paper. */
.ancestral-record,
.cave-record,
.neolithic-record {
  --record-art: url("/assets/art/ancestral-cave.webp");
  --record-art-position: center 47%;
}

.monastic-record,
.courtly-record {
  --record-art: url("/assets/art/courtly-wind-queen.webp");
  --record-art-position: center 44%;
}

.renaissance-record,
.colonial-record,
.enlightenment-record {
  --record-art: url("/assets/art/renaissance-wind-machine.webp");
  --record-art-position: center 50%;
}

.victorian-record,
.roaring20s-record,
.postwar-record {
  --record-art: url("/assets/art/queefonomics-lab.webp");
  --record-art-position: center 48%;
}

.millennial-record,
.social-record,
.present-record {
  --record-art: url("/assets/art/contemporary-sonic-artifact.webp");
  --record-art-position: center 48%;
}

:where(
  .ancestral-record,
  .cave-record,
  .neolithic-record,
  .monastic-record,
  .courtly-record,
  .renaissance-record,
  .colonial-record,
  .enlightenment-record,
  .victorian-record,
  .roaring20s-record,
  .postwar-record,
  .millennial-record,
  .social-record,
  .present-record
) .record-hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(242, 234, 219, .985) 0%, rgba(242, 234, 219, .93) 42%, rgba(242, 234, 219, .77) 76%, rgba(242, 234, 219, .84) 100%),
    var(--record-art) var(--record-art-position) / cover no-repeat;
}

:where(
  .ancestral-record,
  .cave-record,
  .neolithic-record,
  .monastic-record,
  .courtly-record,
  .renaissance-record,
  .colonial-record,
  .enlightenment-record,
  .victorian-record,
  .roaring20s-record,
  .postwar-record,
  .millennial-record,
  .social-record,
  .present-record
) .record-hero::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(242, 234, 219, .34), transparent 18%, transparent 78%, rgba(242, 234, 219, .92)),
    radial-gradient(circle at 79% 42%, transparent 0 17rem, rgba(242, 234, 219, .18) 48rem);
}

:where(
  .ancestral-record,
  .cave-record,
  .neolithic-record,
  .monastic-record,
  .courtly-record,
  .renaissance-record,
  .colonial-record,
  .enlightenment-record,
  .victorian-record,
  .roaring20s-record,
  .postwar-record,
  .millennial-record,
  .social-record,
  .present-record
) .root-plate {
  background: rgba(248, 243, 233, .93);
  box-shadow: 0 24px 70px rgba(48, 36, 20, .16), 0 2px 9px rgba(48, 36, 20, .07);
  backdrop-filter: blur(8px);
}

/* Lineage landing pages reuse the same plates as broad era establishing art. */
.lineage-page[data-lineage="prehistoric"] {
  --lineage-hero-art: url("/assets/art/ancestral-cave.webp");
  --lineage-hero-position: center 47%;
}

.lineage-page[data-lineage="medieval"] {
  --lineage-hero-art: url("/assets/art/courtly-wind-queen.webp");
  --lineage-hero-position: center 44%;
}

.lineage-page[data-lineage="early-modern"] {
  --lineage-hero-art: url("/assets/art/renaissance-wind-machine.webp");
  --lineage-hero-position: center 49%;
}

.lineage-page[data-lineage="modern"] {
  --lineage-hero-art: url("/assets/art/queefonomics-lab.webp");
  --lineage-hero-position: center 48%;
}

.lineage-page[data-lineage="contemporary"] {
  --lineage-hero-art: url("/assets/art/contemporary-sonic-artifact.webp");
  --lineage-hero-position: center 48%;
}

:where(
  .lineage-page[data-lineage="prehistoric"],
  .lineage-page[data-lineage="medieval"],
  .lineage-page[data-lineage="early-modern"],
  .lineage-page[data-lineage="modern"],
  .lineage-page[data-lineage="contemporary"]
) .collection-hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(242, 234, 219, .985) 0%, rgba(242, 234, 219, .92) 46%, rgba(242, 234, 219, .71) 100%),
    var(--lineage-hero-art) var(--lineage-hero-position) / cover no-repeat;
}

:where(
  .lineage-page[data-lineage="prehistoric"],
  .lineage-page[data-lineage="medieval"],
  .lineage-page[data-lineage="early-modern"],
  .lineage-page[data-lineage="modern"],
  .lineage-page[data-lineage="contemporary"]
) .collection-hero::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(242, 234, 219, .28), transparent 16%, transparent 76%, rgba(242, 234, 219, .94)),
    radial-gradient(circle at 82% 40%, transparent 0 17rem, rgba(242, 234, 219, .16) 46rem);
}

.lineage-page .collection-ledger {
  padding: 18px 22px;
  border: 1px solid rgba(70, 59, 44, .24);
  background: rgba(248, 243, 233, .84);
  box-shadow: 0 18px 48px rgba(50, 38, 21, .10);
  backdrop-filter: blur(8px);
}

.lineage-page .collection-ledger div:last-child { border-bottom: 0; }

@media (max-width: 1000px) {
  :where(
    .ancestral-record,
    .cave-record,
    .neolithic-record,
    .monastic-record,
    .courtly-record,
    .renaissance-record,
    .colonial-record,
    .enlightenment-record,
    .victorian-record,
    .roaring20s-record,
    .postwar-record,
    .millennial-record,
    .social-record,
    .present-record
  ) .record-hero::before {
    background:
      linear-gradient(180deg, rgba(242, 234, 219, .97) 0%, rgba(242, 234, 219, .89) 48%, rgba(242, 234, 219, .78) 100%),
      var(--record-art) var(--record-art-position) / cover no-repeat;
  }

  :where(
    .lineage-page[data-lineage="prehistoric"],
    .lineage-page[data-lineage="medieval"],
    .lineage-page[data-lineage="early-modern"],
    .lineage-page[data-lineage="modern"],
    .lineage-page[data-lineage="contemporary"]
  ) .collection-hero::before {
    background:
      linear-gradient(180deg, rgba(242, 234, 219, .96) 0%, rgba(242, 234, 219, .86) 56%, rgba(242, 234, 219, .76) 100%),
      var(--lineage-hero-art) var(--lineage-hero-position) / cover no-repeat;
  }
}

@media (max-width: 680px) {
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }

  .hero {
    min-height: calc(100svh - 58px);
    padding-inline: 8px;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(11, 20, 29, .82) 0%, rgba(11, 20, 29, .68) 48%, rgba(11, 20, 29, .88) 100%),
      url("/assets/art/ancestral-cave.webp") 44% center / cover no-repeat;
  }

  .hero::after {
    background: radial-gradient(circle at 50% 42%, transparent 0 10rem, rgba(6, 14, 22, .30) 28rem);
  }

  .lab::before {
    background:
      linear-gradient(180deg, rgba(242, 234, 219, .96) 0%, rgba(242, 234, 219, .84) 52%, rgba(242, 234, 219, .93) 100%),
      url("/assets/art/queefonomics-lab.webp") 56% center / cover no-repeat;
  }

  .calculator-card,
  .calculator-controls { backdrop-filter: none; }

  .methodology { padding-right: 4px; }
  .methodology::after {
    right: 50%;
    width: min(74vw, 280px);
    transform: translate(50%, -50%) rotate(-4deg);
    opacity: .07;
  }

  .lineage-page .collection-ledger {
    padding: 12px 16px;
    backdrop-filter: none;
  }

  :where(
    .ancestral-record,
    .cave-record,
    .neolithic-record,
    .monastic-record,
    .courtly-record,
    .renaissance-record,
    .colonial-record,
    .enlightenment-record,
    .victorian-record,
    .roaring20s-record,
    .postwar-record,
    .millennial-record,
    .social-record,
    .present-record
  ) .root-plate { backdrop-filter: none; }
}

@media (forced-colors: active) {
  .brand-mark { background-image: none; color: currentColor; font-size: 18px; border: 1px solid currentColor; border-radius: 50%; }
  .hero::before,
  .lab::before,
  .record-hero::before,
  .collection-hero::before,
  .methodology::after { background-image: none !important; }
}