/* ============================================================
   The Museum of All the Things We've Loved — Museum token layer.
   Layers on the inherited John Jeff core (colors/typography/
   spacing/base) and supplies everything namespaced --mus-*,
   the night/day semantics, the tracking ladder, and the
   brand type utilities (.mus-name, .mus-eyebrow, …).

   NOTE: this file was RECONSTRUCTED from the specimen cards,
   the components and readme.md — the original Museum token
   file was not among the uploaded sources. Hexes, radii,
   tracking and durations are quoted verbatim from the cards;
   shadow and gradient stop values are best-fit. See readme.md
   § Caveats.
   ============================================================ */

:root {
  /* ---- The night: the four ramp stops ---- */
  --mus-plum:      #43265F; /* PRIMARY — the visible Museum purple */
  --mus-plum-mid:  #2A1340;
  --mus-plum-low:  #1A0A28;
  --mus-night:     #110518; /* the floor, and the flat-fill fallback */
  --mus-light-origin: 50% 12%; /* @kind other */
  --mus-night-gradient: radial-gradient(125% 80% at 50% 12%,
    #43265F 0%, #2A1340 30%, #1A0A28 58%, #110518 100%); /* @kind color */

  /* ---- Inherited ink & daylight ---- */
  --mus-deepcut:   #1C0B29; /* John Jeff's primary — ink here, never ground */
  --mus-ink:       #2A2230; /* body text on bone */
  --mus-bone:      #F4F1EF;
  --mus-newsprint: #ECE3D2;
  --mus-brass:     #B89A52; /* foil & enamel only */

  /* ---- The three lights: base / wash / ink ---- */
  --mus-lilac:      #AEADEA;
  --mus-lilac-wash: #E4E3F6;
  --mus-lilac-ink:  #5A58A0;
  --mus-lilac-soft: #C7C6F0;
  --mus-sky:        #AFCBE3;
  --mus-sky-wash:   #D6E5F1;
  --mus-sky-ink:    #3F698C;
  --mus-rose:       #E6A7AF;
  --mus-rose-wash:  #F8D8DC;
  --mus-rose-ink:   #97505C;

  /* ---- The Light: reserved for what *is* light ---- */
  --mus-light-gradient: linear-gradient(135deg, #FBF8F4 0%, #C7C6F0 54%, #8C8AC4 100%); /* @kind color */
  --mus-light-gradient-soft: linear-gradient(135deg,
    rgba(251,248,244,.92) 0%, rgba(199,198,240,.6) 54%, rgba(140,138,196,.34) 100%); /* @kind color */

  /* ---- Semantic: surfaces ---- */
  --surface-night: var(--mus-night);
  --surface-day:   var(--mus-bone);

  /* ---- Semantic: text ---- */
  --text-on-night:       var(--mus-bone);
  --text-on-night-muted: rgba(244, 241, 239, 0.72);
  --text-on-night-faint: rgba(244, 241, 239, 0.5);
  --text-on-day:         var(--mus-ink);
  --text-on-day-muted:   rgba(42, 34, 48, 0.6);
  --text-essence:        rgba(212, 211, 244, 0.88); /* the essence line, on night */

  /* ---- Semantic: borders ---- */
  --border-night:        rgba(174, 173, 234, 0.24); /* lilac hairline */
  --border-night-firm:   rgba(174, 173, 234, 0.5);  /* interactive edge */
  --border-perforation:  rgba(174, 173, 234, 0.35); /* ticket tear line */

  /* ---- Shape ---- */
  --radius-edge:   4px;  /* the house edge — posters, specimens, signage */
  --radius-ticket: 14px;

  /* ---- Shadows: night-tinted, deep ---- */
  --shadow-cover:   0 40px 90px -30px rgba(17, 5, 24, 0.7), 0 12px 34px -14px rgba(17, 5, 24, 0.5);
  --shadow-glow:    0 0 24px rgba(174, 173, 234, 0.45), 0 6px 18px -8px rgba(17, 5, 24, 0.5);
  --shadow-glow-hi: 0 0 38px rgba(174, 173, 234, 0.62), 0 10px 26px -10px rgba(17, 5, 24, 0.55);

  /* ---- Type ---- */
  --font-text: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --fs-name:   clamp(2.1875rem, 4vw, 3.625rem); /* @kind font */

  /* ---- The tracking ladder (four fixed values) ---- */
  --ls-eyebrow: 0.30em;
  --ls-endorse: 0.26em;
  --ls-wayfind: 0.20em;
  --ls-label:   0.14em;

  /* ---- Texture & motion ---- */
  --grain-opacity-night: 0.06; /* @kind other */
  --grain-opacity-day:   0.35; /* @kind other */
  --dur-twinkle: 5s; /* @kind other */
}

/* ============================================================
   Brand type utilities
   ============================================================ */

/* The lilac glow — display type on night only, never on bone */
.mus-glow { text-shadow: 0 0 34px rgba(199, 198, 240, 0.46), 0 0 13px rgba(174, 173, 234, 0.4); }

.mus-monument {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.375rem, 6vw, 4.5rem); /* 54 → 72px */
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}

.mus-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-name);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
}

.mus-essence {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.8vw, 1.6875rem); /* 17 → 27px */
  line-height: 1.32;
  color: var(--text-essence);
  margin: 0;
}

.mus-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mus-lilac);
}

.mus-endorse {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: var(--ls-endorse);
  text-transform: uppercase;
  color: var(--mus-lilac);
}

.mus-wayfind {
  font-family: var(--font-text);
  font-weight: 500;
  letter-spacing: var(--ls-wayfind);
  text-transform: uppercase;
  color: var(--text-on-night);
}

.mus-matter {
  font-family: var(--font-text);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-on-night-muted);
}

.mus-url { text-transform: none; letter-spacing: 0.03em; color: rgba(199, 198, 240, 0.86); }

/* ============================================================
   The night as a full page — the light stays overhead on scroll
   ============================================================ */
.mus-night-page {
  position: relative;
  min-height: 100%;
  background: var(--mus-night);
  color: var(--text-on-night);
}
.mus-night-page::before,
.mus-night-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.mus-night-page::before { background: var(--mus-night-gradient); z-index: 0; }
.mus-night-page::after {
  background-image: url("../assets/textures/bone-texture-1.png");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: var(--grain-opacity-night);
  z-index: 1;
}
.mus-night-page > * { position: relative; z-index: 2; }