/* =====================================================================
   NOON — PREMIUM CHROME
   The shared "creamy filling" — brass-gradient tagline strip, soft
   scroll reveals, unified footer, premium spacing tokens. Once
   imported on a page, classes propagate the homepage register.

   Used by: /practice/, /exchange/, /about/, /projects/, /contact/,
   /exchange/{sub}/, /source/{cat}/, /press/, /sourcing/.
   ===================================================================== */

:root {
  /* Brass gradient hairline — used left and right of taglines */
  --pr-brass-gradient: linear-gradient(90deg, transparent, rgba(184,153,104,0.55), transparent);
  --pr-brass-gradient-l: linear-gradient(90deg, transparent, rgba(184,153,104,0.55));
  --pr-brass-gradient-r: linear-gradient(90deg, rgba(184,153,104,0.55), transparent);

  /* Premium rhythm */
  --pr-rhythm-hero-top: clamp(96px, 14vh, 180px);
  --pr-rhythm-hero-bot: clamp(56px, 8vh, 96px);
  --pr-rhythm-section: clamp(72px, 10vh, 140px);
  --pr-rhythm-stanza: clamp(40px, 6vh, 64px);
}

/* ---------- TAGLINE STRIP ----------
   Small mono caps with brass-gradient hairlines on each side.
   Used as the very first element in any premium hero. */
.pr-tagline {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 0 auto var(--pr-rhythm-stanza);
  max-width: 820px;
  padding: 0 clamp(16px, 4vw, 48px);
}
.pr-tagline__rule {
  flex: 1; height: 1px;
  background: var(--pr-brass-gradient);
  opacity: 0.85;
}
.pr-tagline__rule--l { background: var(--pr-brass-gradient-l); }
.pr-tagline__rule--r { background: var(--pr-brass-gradient-r); }
.pr-tagline__text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--paper-3, #A8A08B);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .pr-tagline__text { font-size: 9.5px; letter-spacing: 0.22em; white-space: normal; text-align: center; }
}

/* ---------- HERO H1 ----------
   Big Fraunces with italic-ember ornament for the closing phrase. */
.pr-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--paper, #F2EBD9);
  max-width: 18ch;
  margin: 0 auto clamp(20px, 3vh, 28px);
  text-wrap: balance;
  text-align: center;
}
.pr-h1 em {
  font-style: italic; color: var(--ember, #E97E2D); font-weight: 400;
}

/* ---------- LEDE ----------
   Italic Fraunces, paper-warm color, generous line-height. */
.pr-lede {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--paper-2, #DCD4BD);
  text-align: center;
  max-width: 38ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ---------- SOFT REVEAL ----------
   Triggered by IntersectionObserver via /assets/_premium.js.
   Until JS adds .is-revealed, the element is invisible and shifted. */
.pr-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.pr-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children if the container has .pr-reveal-stagger */
.pr-reveal-stagger > .pr-reveal:nth-child(2) { transition-delay: 140ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(3) { transition-delay: 280ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(4) { transition-delay: 420ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(5) { transition-delay: 560ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(6) { transition-delay: 700ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(7) { transition-delay: 840ms; }
.pr-reveal-stagger > .pr-reveal:nth-child(8) { transition-delay: 980ms; }

@media (prefers-reduced-motion: reduce) {
  .pr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- ATMOSPHERIC BACKDROP ----------
   Subtle radial wash. Adds depth without being a banner. */
.pr-atmos {
  position: relative;
  isolation: isolate;
}
.pr-atmos::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184,153,104,0.025) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(232,126,45,0.020) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.pr-atmos > * { position: relative; z-index: 1; }

/* ---------- UNIFIED FOOTER ----------
   Three IA columns + utility row + bottom strip.
   Pulls structure from /assets/ia.json (implied).
   Class names use pr-foot* so they don't collide with per-page .foot. */
.pr-foot {
  padding: clamp(56px, 7vh, 96px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(184,153,104,0.20);
  background: var(--bg, #1A1A1A);
  margin-top: clamp(32px, 5vh, 64px);
}
.pr-foot__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 760px) {
  .pr-foot__grid { grid-template-columns: 1fr; gap: 32px; }
}
.pr-foot__col h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brass, #B89968);
  margin-bottom: 18px;
}
.pr-foot__col h4::after {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--brass, #B89968);
  opacity: 0.5;
  margin-left: 12px; vertical-align: middle;
}
.pr-foot__col a {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; font-weight: 400;
  line-height: 1.65;
  color: var(--paper-2, #DCD4BD);
  padding: 3px 0;
  text-decoration: none;
  transition: color 220ms ease, padding-left 220ms ease;
}
.pr-foot__col a:hover {
  color: var(--ember, #E97E2D);
  padding-left: 6px;
}
.pr-foot__col em {
  font-style: italic; color: var(--paper-3, #A8A08B);
}

/* Utility row — Press / API / About / Contact */
.pr-foot__util {
  max-width: 1180px; margin: clamp(36px, 5vh, 56px) auto 0;
  padding: 18px 0;
  border-top: 1px solid rgba(184,153,104,0.20);
  border-bottom: 1px solid rgba(184,153,104,0.10);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.pr-foot__util a {
  color: var(--paper-3, #A8A08B);
  text-decoration: none;
  transition: color 200ms ease;
}
.pr-foot__util a:hover { color: var(--ember, #E97E2D); }

/* Bottom strip — copyright + brand mark */
.pr-foot__bot {
  max-width: 1180px; margin: 24px auto 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--paper-4, #6B6657);
}
.pr-foot__bot a { color: var(--paper-3, #A8A08B); }
.pr-foot__bot a:hover { color: var(--ember, #E97E2D); }
.pr-foot__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.pr-foot__brand svg {
  width: 18px; height: 18px;
  display: block;
}
.pr-foot__brand-word {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.010em;
  color: var(--paper-2, #DCD4BD);
  text-transform: none;
}

/* ---------- PREMIUM HERO CONTAINER ----------
   Convenience wrapper for interior page heroes. */
.pr-hero {
  padding: var(--pr-rhythm-hero-top) clamp(24px, 5vw, 80px) var(--pr-rhythm-hero-bot);
  text-align: center;
  border-bottom: 1px solid rgba(184,153,104,0.18);
  position: relative;
}
.pr-hero__sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-3, #A8A08B);
  margin-top: clamp(14px, 2vh, 22px);
}