/* ============================================================
   Velun teaser  ·  XReliqua
   Decayed-reliquary register · painterly · cosmic-thread
   ------------------------------------------------------------
   Design intent:
     The page is a chapel space, not a marketing page.
     Cosmic-indigo never settles into pure black.
     Gilt is tarnished, never bright. Cream is parchment, not white.
     Cosmic glints are the rarest, brightest pixels on the page.
     Animation is candlelight, not neon.
   ============================================================ */

/* === reset === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, hr { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, button { font-family: inherit; }

/* === tokens === */
:root {
  /* base — strict palette, never deviate */
  --bg:           #0a0816;     /* cosmic indigo, page base */
  --bg-deep:      #07050f;     /* candle-shadow ground */
  --bg-shrine:    #100d22;     /* niche back-panel */
  --indigo:       #15163a;     /* deeper accent indigo */
  --indigo-soft:  #1f1d4a;     /* halo indigo */

  /* gilt — three states (tarnished, dim, brighter) */
  --gilt:         #c9a865;
  --gilt-dim:     #8a7242;
  --gilt-bright:  #e0c081;

  /* cream — parchment register on dark */
  --cream:        #e8dcc4;
  --cream-dim:    #b5ab95;
  --cream-faint:  #6e6750;

  /* cosmic glint — used only as pin-pricks of highlight */
  --cosmic:       #d8d4f0;

  /* type stack — quieter chapel register.
     Display = Cinzel (clean Trajan-derived, no "decorative" flourish).
     Heading caps = Cormorant SC (small-caps body face for plates).
     Body = Cormorant Garamond (text register).
     Utility = Syne (UI). */
  --font-display: "Cinzel", "Trajan Pro", "Cormorant SC", serif;
  --font-caps:    "Cormorant SC", "Cinzel", serif;
  --font-body:    "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-utility: "Syne", system-ui, -apple-system, sans-serif;

  /* motion — slow, soft, never snappy */
  --ease:         cubic-bezier(.25, .65, .35, 1);
  --slow:         700ms var(--ease);
  --med:          420ms var(--ease);
  --fast:         260ms var(--ease);

  /* layout */
  --max:          1180px;
  --col-narrow:   620px;
}

/* === defs (offscreen) === */
.defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* === base === */
html, body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1vw + 12px, 19px);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* === backdrop layers (deep gradient + grain) === */
.page-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 38% at 50% 0%,    rgba(40, 35, 80, 0.55), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 100%,  rgba(40, 30, 60, 0.4),  transparent 70%),
    radial-gradient(ellipse 30% 22% at 18% 64%,   rgba(201, 168, 101, 0.04), transparent 70%),
    radial-gradient(ellipse 30% 22% at 82% 36%,   rgba(216, 212, 240, 0.03), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  z-index: -2;
  pointer-events: none;
}

/* breathing vignette — a dark radial that pulses inward, the
   edges of the page closing on the V star-wheel. Sits ABOVE
   page-bg but BELOW page-grain and content. */
.page-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      transparent 0%,
      transparent 38%,
      rgba(4, 3, 10, 0.35) 72%,
      rgba(2, 1, 6, 0.85) 100%);
  animation: vignette-breathe 6.5s ease-in-out infinite;
  mix-blend-mode: multiply;
}
@keyframes vignette-breathe {
  0%, 100% { transform: scale(1.04); opacity: 0.85; }
  50%      { transform: scale(0.92); opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
  .page-vignette { animation: none; }
}

.page-grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0 0.74  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  z-index: -1;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* === studio mark (top-left) === */
.studio-mark {
  position: fixed;
  top: clamp(20px, 3vw, 36px);
  left: clamp(20px, 3vw, 40px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* slide-in studio menu \u2014 reveals from behind the wordmark on hover/focus.
   A small bridge of padding keeps the hover live as the cursor crosses
   from the logo into the menu items. */
.studio-menu {
  position: relative;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 240ms var(--ease, ease), transform 320ms var(--ease, ease);
}
.studio-mark:hover .studio-menu,
.studio-mark:focus-within .studio-menu {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.studio-menu ul {
  list-style: none;
  margin: 0;
  padding: 8px 14px 8px 16px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  border-left: 1px solid rgba(201, 168, 101, 0.28);
}
.studio-menu a {
  font-family: var(--font-utility, var(--font-display));
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt-dim, #8a7242);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color 200ms ease;
  white-space: nowrap;
}
.studio-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gilt-bright, #e7c479);
  transition: right 260ms var(--ease, ease);
}
.studio-menu a:hover,
.studio-menu a:focus-visible {
  color: var(--gilt-bright, #e7c479);
  outline: none;
}
.studio-menu a:hover::after,
.studio-menu a:focus-visible::after {
  right: 0;
}
@media (max-width: 640px) {
  .studio-menu { display: none; }
}

/* logo CSS variables — overridden by Tweaks */
:root {
  --logo-gilt:        var(--gilt);
  --logo-gilt-dim:    var(--gilt-dim);
  --logo-cream:       var(--cream);
  --logo-cosmic:      var(--cosmic);
  --logo-cosmic-opacity: 0.85;
}

.studio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 6px;
  transition: opacity var(--med);
  text-decoration: none;
}

.studio-link:hover,
.studio-link:focus-visible { outline: none; }

.studio-glyph-mount {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  transition: opacity var(--med);
}
.studio-glyph-mount svg { width: 100%; height: 100%; display: block; }

.studio-wordmark {
  display: inline-flex; flex-direction: column;
  line-height: 1; gap: 3px;
}
.studio-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  transition: color var(--med), letter-spacing var(--slow);
}
.studio-word--ex {
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  color: var(--gilt);
}
.studio-word--reliqua {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  color: var(--cream);
}
.studio-link:hover .studio-word--ex,
.studio-link:focus-visible .studio-word--ex { color: var(--gilt-bright); letter-spacing: 0.46em; }
.studio-link:hover .studio-word--reliqua,
.studio-link:focus-visible .studio-word--reliqua { color: var(--gilt-bright); letter-spacing: 0.22em; }

/* ---- Header stylization: EXR / ELIQUA monogram lockup
   Layout reverse-engineered from CD's design + the user's
   pixel-perfect tweaks in the visual editor (May 2026).

   Every dimension, position, and type-size is expressed as a
   ratio of a single base unit (--u) so the entire mark scales
   uniformly when --u changes. X is exactly 1 × --u; everything
   else is a fraction of that.

   The pixel-perfect spec was:
     E      Cinzel       27.5px       (= 0.557 × --u)
     X      Cinzel-Dec   49.4px       (= 1.000 × --u)   <- anchor
     R      Cinzel-Dec   49.4px       (= 1.000 × --u)
     ELIQUA Cinzel       15.96px      (= 0.323 × --u)
   …with X+R overlap, E baselined to X-top, ELIQUA baselined to R-bottom.
*/
.studio-wordmark[data-style="xr-stack"] {
  --u: clamp(34px, 4vw, 49.4px); /* base unit; bump everything together */
  position: relative;
  display: inline-block;
  width:  calc(3.40 * var(--u));
  height: calc(1.65 * var(--u));
  font-size: var(--u);
  font-family: var(--font-display);
  vertical-align: middle;
}
.studio-wordmark[data-style="xr-stack"] .studio-letter {
  position: absolute;
  display: block;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  transition: color var(--med);
}

/* E ─ small Cinzel regular, gilt-bright, anchored at the top
   so its cap-height aligns with X's cap-height. */
.studio-wordmark[data-style="xr-stack"] .studio-letter--e {
  top:    0;
  left:   calc(0.181 * var(--u));
  width:  calc(0.57 * var(--u));
  font-family: "Cinzel", "Cinzel Decorative", serif;
  font-weight: 500;
  font-size:      calc(0.557 * var(--u));
  letter-spacing: calc(0.065 * var(--u));
  color: #e0c081;
  text-align: center;
}

/* ELIQUA ─ small Cinzel regular, gilt-bright, baselined to R-bottom. */
.studio-wordmark[data-style="xr-stack"] .studio-letter--eliqua {
  bottom: calc(0.625 * var(--u));
  left:   calc(1.456 * var(--u));
  width:  calc(1.62 * var(--u));
  font-family: "Cinzel", "Cinzel Decorative", serif;
  font-weight: 500;
  font-size:      calc(0.323 * var(--u));
  letter-spacing: calc(0.052 * var(--u));
  color: #e0c081;
  text-align: left;
}

/* X ─ large italic Cinzel Decorative, gold-leaf metallic with sheen.
   Padding-right reserves space for the italic terminal so the
   embellishment isn't clipped. */
.studio-wordmark[data-style="xr-stack"] .studio-letter--x {
  /* Box shifted -5px top/left + 5px padding all sides keeps the
     glyph at its original position but gives the embellishments
     5px more breathing room every direction. Right padding stacks
     on top of the existing italic-terminal allowance. */
  top:           calc(-0.141 * var(--u));
  left:          calc(0.288 * var(--u));
  width:         calc(1.21 * var(--u));
  font-family:   "Cinzel Decorative", "Cinzel", "Trajan Pro", serif;
  font-weight:   700;
  font-style:    italic;
  font-size:     var(--u);
  line-height:   0.85;
  letter-spacing: 0;
  padding:       calc(0.141 * var(--u))    /* top    : 7px */
                 calc(0.502 * var(--u))    /* right  : 7px embellishment + 4px more */
                 calc(0.162 * var(--u))    /* bottom : 8px (unchanged) */
                 calc(0.141 * var(--u));   /* left   : 7px */
  color: #ffffff;
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(255, 248, 214, 0.95) 50%,
      transparent 62%, transparent 100%) 0 0 / 220% 100% no-repeat,
    linear-gradient(180deg,
      #fff8d8 0%,
      #f0d294 28%,
      #d6b676 58%,
      #a48a58 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  z-index: 1;
  overflow: visible;
  animation: xr-sheen 6.5s ease-in-out infinite;
}

/* R ─ large italic Cinzel Decorative, metallic, overlaps X
   to the lower-right. */
.studio-wordmark[data-style="xr-stack"] .studio-letter--r {
  top:           calc(0.509 * var(--u));
  left:          calc(0.686 * var(--u));
  width:         calc(1.13 * var(--u));
  font-family:   "Cinzel Decorative", "Cinzel", "Trajan Pro", serif;
  font-weight:   700;
  font-style:    italic;
  font-size:     var(--u);
  line-height:   0.85;
  letter-spacing: 0;
  padding-right:  calc(0.201 * var(--u));   /* italic-terminal allowance + 4px more */
  padding-bottom: calc(0.061 * var(--u));   /* 3px breathing room below baseline */
  color: #fffefe;
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(255, 248, 214, 0.95) 50%,
      transparent 62%, transparent 100%) 0 0 / 220% 100% no-repeat,
    linear-gradient(180deg,
      #fff8d8 0%,
      #f0d294 28%,
      #d6b676 58%,
      #a48a58 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.75)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  z-index: 2;
  overflow: visible;
  animation: xr-sheen 6.5s ease-in-out infinite;
}

@keyframes xr-sheen {
  0%   { background-position: 200% 0, 0 0; }
  60%  { background-position: -100% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-wordmark[data-style="xr-stack"] .studio-letter--x,
  .studio-wordmark[data-style="xr-stack"] .studio-letter--r { animation: none; }
}

/* Hover: monogram lifts to brightest gilt; small letters lift to cream-cosmic. */
.studio-link:hover .studio-wordmark[data-style="xr-stack"] .studio-letter--x,
.studio-link:hover .studio-wordmark[data-style="xr-stack"] .studio-letter--r,
.studio-link:focus-visible .studio-wordmark[data-style="xr-stack"] .studio-letter--x,
.studio-link:focus-visible .studio-wordmark[data-style="xr-stack"] .studio-letter--r {
  background:
    linear-gradient(180deg,
      #fff8d8 0%,
      var(--gilt-bright, #e7c479) 35%,
      var(--gilt, #c9a865) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
.studio-link:hover .studio-wordmark[data-style="xr-stack"] .studio-letter--e,
.studio-link:hover .studio-wordmark[data-style="xr-stack"] .studio-letter--eliqua,
.studio-link:focus-visible .studio-wordmark[data-style="xr-stack"] .studio-letter--e,
.studio-link:focus-visible .studio-wordmark[data-style="xr-stack"] .studio-letter--eliqua {
  color: #fff8d8;
}

/* Footer mark — seal lockup, larger seal, small wordmark, socials */
.footer-seal {
  display: inline-flex; align-items: center; gap: 0.85em;
  text-decoration: none;
}
.footer-glyph--seal { width: 56px; height: 56px; flex: none; opacity: 1; }
.footer-glyph--seal svg.logo-glyph--seal { overflow: visible; }
.footer-glyph--seal .logo-seal-ring {
  transform-origin: 16px 16px;
  transition: animation 1.6s var(--ease);
  animation: seal-drift 80s linear infinite;
}
.footer-seal:hover .logo-seal-ring,
.footer-seal:focus-visible .logo-seal-ring,
.footer-glyph-mount:hover .logo-seal-ring {
  animation: seal-spin 5s linear infinite;
}
@keyframes seal-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes seal-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.footer-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--gilt);
  transition: color var(--med);
}
.footer-seal:hover .footer-mark,
.footer-seal:focus-visible .footer-mark { color: var(--gilt-bright); }

.footer-socials {
  display: inline-flex; align-items: center; gap: 18px;
  margin-left: auto;
}
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--gilt);
  opacity: 0.85;
  transition: color var(--med), opacity var(--med), transform var(--med);
}
.social svg { width: 100%; height: 100%; display: block; }
.page-mist {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 65vh;
  pointer-events: none;
  z-index: 4;
  /* baseline 0.18 (always faintly visible) + ramps with scroll */
  opacity: calc(0.18 + var(--scroll-progress, 0) * 0.82);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(60, 52, 110, 0.55), transparent 70%),
    radial-gradient(ellipse 110% 55% at 50% 105%, rgba(120, 100, 80, 0.18), transparent 80%),
    linear-gradient(180deg, transparent 0%, rgba(8, 6, 18, 0.55) 60%, rgba(8, 6, 18, 0.85) 100%);
  mix-blend-mode: screen;
  transition: opacity 600ms var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 100%);
}
.page-mist::before, .page-mist::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}
.page-mist::before {
  width: 70vw; height: 30vh;
  left: -10vw; bottom: -10vh;
  background: radial-gradient(circle, rgba(216, 212, 240, 0.18), transparent 65%);
  animation: mist-drift-l 28s ease-in-out infinite alternate;
}
.page-mist::after {
  width: 65vw; height: 28vh;
  right: -8vw; bottom: -6vh;
  background: radial-gradient(circle, rgba(201, 168, 101, 0.12), transparent 65%);
  animation: mist-drift-r 34s ease-in-out infinite alternate;
}
@keyframes mist-drift-l { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8vw, -3vh) scale(1.1); } }
@keyframes mist-drift-r { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-6vw, -4vh) scale(1.08); } }

/* breath motes — small drifting particles that fall slowly and pool
   at the bottom of the viewport. Always visible but intensify with
   scroll. Sit inside .page-mist (which is fixed, bottom: 0). */
.mote {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 220, 188, 0.85) 0%, rgba(224, 192, 129, 0.45) 50%, transparent 75%);
  filter: blur(1.4px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
  animation: mote-fall 14s linear infinite;
}
.mote--1  { left:  6%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay:  -1s; }
.mote--2  { left: 14%; width: 3px;  height: 3px;  animation-duration: 22s; animation-delay:  -7s; }
.mote--3  { left: 22%; width: 7px;  height: 7px;  animation-duration: 19s; animation-delay: -12s; }
.mote--4  { left: 30%; width: 4px;  height: 4px;  animation-duration: 17s; animation-delay:  -3s; }
.mote--5  { left: 38%; width: 6px;  height: 6px;  animation-duration: 24s; animation-delay: -18s; }
.mote--6  { left: 47%; width: 3px;  height: 3px;  animation-duration: 15s; animation-delay:  -9s; }
.mote--7  { left: 54%; width: 8px;  height: 8px;  animation-duration: 26s; animation-delay: -14s; }
.mote--8  { left: 63%; width: 4px;  height: 4px;  animation-duration: 18s; animation-delay:  -2s; }
.mote--9  { left: 71%; width: 5px;  height: 5px;  animation-duration: 21s; animation-delay: -16s; }
.mote--10 { left: 79%; width: 6px;  height: 6px;  animation-duration: 23s; animation-delay:  -5s; }
.mote--11 { left: 87%; width: 3px;  height: 3px;  animation-duration: 17s; animation-delay: -11s; }
.mote--12 { left: 93%; width: 5px;  height: 5px;  animation-duration: 20s; animation-delay: -19s; }
@keyframes mote-fall {
  0%   { transform: translate(0, -10vh); opacity: 0; }
  10%  { opacity: 0.55; }
  60%  { opacity: 0.85; }
  85%  { opacity: 0.7; }
  100% { transform: translate(calc(var(--mote-drift, 12px)), 65vh); opacity: 0; }
}
.mote--2  { --mote-drift: -22px; }
.mote--3  { --mote-drift:  18px; }
.mote--5  { --mote-drift: -14px; }
.mote--7  { --mote-drift:  24px; }
.mote--9  { --mote-drift: -18px; }
.mote--11 { --mote-drift:  16px; }
@media (prefers-reduced-motion: reduce) {
  .page-mist::before, .page-mist::after { animation: none; }
  .mote { animation: none; opacity: 0.4; }
}

.social:hover, .social:focus-visible {
  color: var(--gilt-bright);
  opacity: 1;
  transform: translateY(-1px);
}
.footer-rule {
  display: inline-block; width: 1px; height: 1.4em;
  background: linear-gradient(180deg, transparent, rgba(201,168,101,0.35), transparent);
  margin: 0 0.4em;
}

/* === breath layer (rolling cosmic fog behind everything) === */
.logo-cosmic { opacity: var(--logo-cosmic-opacity, 0.85); transition: opacity 700ms var(--ease); }

.page-breath {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--breath-intensity, 0.7);
  mix-blend-mode: screen;
  transition: opacity 800ms var(--ease);
}
.breath-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}
.breath-cloud--1 {
  width: 70vw; height: 70vw; left: -20vw; top: -20vw;
  background: radial-gradient(circle, rgba(60, 50, 130, 0.55), transparent 60%);
  animation: breath-drift-a 38s ease-in-out infinite alternate;
}
.breath-cloud--2 {
  width: 60vw; height: 60vw; right: -10vw; top: 30vh;
  background: radial-gradient(circle, rgba(120, 90, 60, 0.32), transparent 60%);
  animation: breath-drift-b 52s ease-in-out infinite alternate;
}
.breath-cloud--3 {
  width: 50vw; height: 50vw; left: 10vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(80, 60, 110, 0.45), transparent 60%);
  animation: breath-drift-c 46s ease-in-out infinite alternate;
}
.breath-cloud--4 {
  width: 38vw; height: 38vw; right: 12vw; bottom: 18vh;
  background: radial-gradient(circle, rgba(216, 212, 240, 0.18), transparent 60%);
  animation: breath-drift-d 60s ease-in-out infinite alternate;
}
@keyframes breath-drift-a {
  0%   { transform: translate(0, 0)         scale(1);   opacity: 0.55; }
  50%  { transform: translate(8vw, 6vh)     scale(1.15); opacity: 0.85; }
  100% { transform: translate(-4vw, 10vh)   scale(0.95); opacity: 0.6;  }
}
@keyframes breath-drift-b {
  0%   { transform: translate(0, 0)         scale(1);   opacity: 0.45; }
  50%  { transform: translate(-10vw, -8vh)  scale(1.1);  opacity: 0.7;  }
  100% { transform: translate(6vw, 4vh)     scale(0.95); opacity: 0.5;  }
}
@keyframes breath-drift-c {
  0%   { transform: translate(0, 0)         scale(1);   opacity: 0.5;  }
  50%  { transform: translate(12vw, -6vh)   scale(1.12); opacity: 0.75; }
  100% { transform: translate(-6vw, 4vh)    scale(0.9);  opacity: 0.55; }
}
@keyframes breath-drift-d {
  0%   { transform: translate(0, 0)         scale(1);   opacity: 0.4;  }
  50%  { transform: translate(-8vw, 8vh)    scale(1.2);  opacity: 0.7;  }
  100% { transform: translate(4vw, -6vh)    scale(1);    opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .breath-cloud { animation: none; opacity: 0.5; }
}

/* === atmospheric breath ===================================== */
.hero-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #d8d4f0; opacity: 0;
  box-shadow: 0 0 6px rgba(216, 212, 240, 0.7);
  animation: star-pulse 5.4s ease-in-out infinite;
}
.hero-star--1 { top: 12%; left: 14%; animation-delay: 0s; }
.hero-star--2 { top: 22%; left: 78%; animation-delay: 1.4s; width: 1.5px; height: 1.5px; }
.hero-star--3 { top: 36%; left: 9%;  animation-delay: 2.8s; width: 1.2px; height: 1.2px; }
.hero-star--4 { top: 58%; left: 84%; animation-delay: 0.6s; width: 1.6px; height: 1.6px; }
.hero-star--5 { top: 70%; left: 18%; animation-delay: 2.0s; width: 1.4px; height: 1.4px; }
.hero-star--6 { top: 14%; left: 52%; animation-delay: 3.4s; width: 1px;   height: 1px;   }
.hero-star--7 { top: 80%; left: 62%; animation-delay: 4.2s; width: 1.2px; height: 1.2px; }
@keyframes star-pulse {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.85; transform: scale(1); }
}
.hero-flourish {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(24px, 4vw, 48px); height: clamp(220px, 36vh, 360px);
  pointer-events: none; z-index: 0;
  animation: flourish-breath 7.5s ease-in-out infinite;
}
.hero-flourish--l { left: clamp(20px, 6vw, 96px); }
.hero-flourish--r { right: clamp(20px, 6vw, 96px); animation-delay: 1.2s; }
@keyframes flourish-breath {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) scaleY(1); }
  50%      { opacity: 0.85; transform: translateY(-50%) scaleY(1.02); }
}
.tagline { position: relative; }
.tagline-bracket {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,101,0.5), transparent);
}
.tagline-bracket--l { right: calc(100% + 14px); }
.tagline-bracket--r { left:  calc(100% + 14px); background: linear-gradient(90deg, transparent, rgba(201,168,101,0.5), transparent); }
@media (max-width: 640px) { .tagline-bracket { display: none; } .hero-flourish { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-star, .hero-flourish { animation: none; opacity: 0.55; }
}

/* === hero === */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(80px, 12vh, 160px) clamp(20px, 4vw, 48px) clamp(60px, 10vh, 120px);
  position: relative;
}

/* a faint cathedral light-column behind the wordmark */
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 50vw, 720px);
  height: 100%;
  background:
    radial-gradient(ellipse 30% 60% at 50% 50%, rgba(201, 168, 101, 0.06), transparent 70%),
    radial-gradient(ellipse 12% 80% at 50% 30%, rgba(216, 212, 240, 0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-frame {
  text-align: center;
  position: relative;
  z-index: 1;
}

.wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 12vw, 9rem);
  letter-spacing: 0.18em;
  line-height: 1;
  margin-left: 0.18em; /* compensate for wide tracking on right */
  text-shadow: 0 0 70px rgba(201, 168, 101, 0.06);
  animation: wordmark-breathe 7.5s ease-in-out infinite;
}

.wordmark-glow {
  position: absolute;
  inset: 0;
  color: transparent;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(201, 168, 101, 0.55), transparent 70%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: blur(18px);
  opacity: 0.55;
  pointer-events: none;
}

.wordmark-fill {
  position: relative;
  background: linear-gradient(180deg,
    var(--cream)    0%,
    var(--cream)   42%,
    var(--gilt)    66%,
    var(--gilt-dim) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes wordmark-breathe {
  0%, 100% { opacity: 0.94; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

.tagline {
  margin-top: clamp(1.6em, 3vh, 2.6em);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  max-width: 38em;
  margin-inline: auto;
}

.tagline em {
  font-style: italic;
  color: var(--cream);
  display: inline-block;
  margin-top: 0.4em;
  font-weight: 400;
}

.hero-ornament {
  display: block;
  width: clamp(180px, 28vw, 320px);
  height: 14px;
  margin: clamp(2em, 6vh, 4em) auto 0;
  opacity: 0.7;
}

.hero-scroll-cue {
  position: absolute;
  bottom: clamp(28px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 101, 0.4) 100%);
  pointer-events: none;
}

.hero-scroll-cue span {
  position: absolute;
  bottom: -3px;
  left: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gilt);
  opacity: 0.6;
  animation: scroll-drip 3.4s var(--ease) infinite;
}

@keyframes scroll-drip {
  0%   { transform: translateY(-56px); opacity: 0; }
  20%  { opacity: 0.7; }
  80%  { opacity: 0.6; }
  100% { transform: translateY(0);     opacity: 0; }
}

/* === pitch === */
.pitch {
  padding: clamp(80px, 14vh, 160px) clamp(20px, 4vw, 48px);
  display: grid;
  place-items: center;
}

.pitch-column {
  max-width: var(--col-narrow);
  text-align: center;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.85;
  letter-spacing: 0.018em;
  color: var(--cream-dim);
  font-weight: 300;
  position: relative;
  isolation: isolate;
}

/* Alpha-gradient reading-card backdrop — soft fade in at the top, solid
   middle, soft fade out at the bottom. Sits behind the liturgical
   paragraphs so they read clearly above the page mist + grain. No blur
   (glass-morphism is out of register); just a vignette-style alpha wash. */
.pitch-column::before {
  content: "";
  position: absolute;
  inset: -1.6em -1.8em;
  background: linear-gradient(180deg,
    rgba(7, 5, 14, 0)    0%,
    rgba(7, 5, 14, 0.55) 22%,
    rgba(7, 5, 14, 0.65) 50%,
    rgba(7, 5, 14, 0.55) 78%,
    rgba(7, 5, 14, 0)    100%);
  border-radius: 14px;
  pointer-events: none;
  z-index: -1;
}

.pitch-column p {
  margin-bottom: 1.7em;
}

.pitch-column p:last-child { margin-bottom: 0; }

.pitch-final {
  margin-top: 2.4em !important;
  color: var(--cream);
  font-size: 1.06em;
  letter-spacing: 0.04em;
  position: relative;
  font-weight: 400;
}

.pitch-final::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-dim), transparent);
  margin: 0 auto 1.6em;
}

/* === ornament rule === */
.ornament-rule {
  border: 0;
  height: 32px;
  width: clamp(120px, 30vw, 240px);
  margin: 0 auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32'><line x1='0' y1='16' x2='90' y2='16' stroke='%23c9a865' stroke-width='0.5' opacity='0.4'/><circle cx='108' cy='16' r='1.4' fill='%23c9a865'/><circle cx='120' cy='10' r='0.9' fill='%23d8d4f0'/><circle cx='132' cy='16' r='1.4' fill='%23c9a865'/><line x1='150' y1='16' x2='240' y2='16' stroke='%23c9a865' stroke-width='0.5' opacity='0.4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* === companions === */
.companions {
  padding: clamp(60px, 10vh, 120px) clamp(20px, 4vw, 48px) clamp(80px, 12vh, 140px);
  max-width: var(--max);
  margin: 0 auto;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: center;
  margin-bottom: 0.45em;
  padding-left: 0.34em;
}

.section-heading::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gilt-dim);
  margin: 0.7em auto 0;
}

.section-sub {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--cream-faint);
  letter-spacing: 0.05em;
  margin-bottom: clamp(3em, 6vh, 5em);
}

.companion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 64px) clamp(28px, 3vw, 48px);
}

@media (max-width: 920px) {
  .companion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .companion-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-inline: auto;
    gap: 48px;
  }
}

.companion {
  text-align: center;
  position: relative;
  outline: none;
  transition: transform var(--slow);
}

.companion:hover,
.companion:focus-visible,
.companion:focus-within {
  transform: translateY(-4px);
}
.companion:hover .niche-floor,
.companion:focus-visible .niche-floor,
.companion:focus-within .niche-floor {
  width: 72%;
}
.companion:hover .plate-rule,
.companion:focus-visible .plate-rule,
.companion:focus-within .plate-rule {
  background: linear-gradient(90deg, transparent, var(--gilt-bright), transparent);
  width: 70%;
}
.plate-rule { transition: background var(--med), width var(--med); }

/* === silhouette frame (the niche) === */
.silhouette-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* layered niche back: cool indigo wash + subtle vertical light-shaft
     behind the figure to lift the silhouette outline. */
  background:
    radial-gradient(ellipse 38% 85% at 50% 38%, rgba(56, 50, 110, 0.55), transparent 75%),
    radial-gradient(ellipse 70% 95% at 50% 30%, var(--bg-shrine), var(--bg-deep) 80%);
  border: 1px solid rgba(201, 168, 101, 0.18);
  box-shadow:
    inset 0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 -24px 48px rgba(0, 0, 0, 0.55);
}

.niche-floor { display: none; }
.silhouette-frame::before, .silhouette-frame::after { content: none; display: none; }

/* per-niche hover animation — a small gilt SVG sigil specific to the
   character, plays only on hover/focus. Sits at the niche floor,
   below the silhouette. Replaces the generic ground glow. */
/* removed: per-niche hover SVG sigils. The gilded outline glow on the
   silhouette PNG now carries the hover affordance. */
.niche-anim { display: none !important; }
.companion:hover .niche-anim,
.companion:focus-visible .niche-anim,
.companion:focus-within .niche-anim {
  opacity: 0.95;
}

/* Iren — the bolt rattles loose, sliding back and forth in its eyelet. */
.anim-iren-bolt {
  transform-origin: center;
  transform-box: fill-box;
}
.companion[data-companion="iren"]:hover .anim-iren-bolt,
.companion[data-companion="iren"]:focus-visible .anim-iren-bolt,
.companion[data-companion="iren"]:focus-within .anim-iren-bolt {
  animation: anim-iren-rattle 1.6s ease-in-out infinite;
}
@keyframes anim-iren-rattle {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}

/* Sirael — three concentric rings ripple outward from the centre. */
.anim-ripple { opacity: 0; transform-origin: 50px 22px; transform-box: fill-box; }
.companion[data-companion="sirael"]:hover .anim-ripple,
.companion[data-companion="sirael"]:focus-visible .anim-ripple,
.companion[data-companion="sirael"]:focus-within .anim-ripple {
  animation: anim-sirael-ripple 2.6s ease-out infinite;
}
.companion[data-companion="sirael"]:hover .anim-ripple--2,
.companion[data-companion="sirael"]:focus-visible .anim-ripple--2,
.companion[data-companion="sirael"]:focus-within .anim-ripple--2 { animation-delay: 0.85s; }
.companion[data-companion="sirael"]:hover .anim-ripple--3,
.companion[data-companion="sirael"]:focus-visible .anim-ripple--3,
.companion[data-companion="sirael"]:focus-within .anim-ripple--3 { animation-delay: 1.7s; }
@keyframes anim-sirael-ripple {
  0%   { r: 1; opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { r: 14; opacity: 0; }
}

/* Vesta — three notches on the rod illuminate in lawful sequence. */
.anim-vesta-dot { opacity: 0.25; }
.companion[data-companion="vesta"]:hover .anim-vesta-dot,
.companion[data-companion="vesta"]:focus-visible .anim-vesta-dot,
.companion[data-companion="vesta"]:focus-within .anim-vesta-dot {
  animation: anim-vesta-pulse 1.8s ease-in-out infinite;
}
.companion[data-companion="vesta"]:hover .anim-vesta-dot--2,
.companion[data-companion="vesta"]:focus-visible .anim-vesta-dot--2,
.companion[data-companion="vesta"]:focus-within .anim-vesta-dot--2 { animation-delay: 0.3s; }
.companion[data-companion="vesta"]:hover .anim-vesta-dot--3,
.companion[data-companion="vesta"]:focus-visible .anim-vesta-dot--3,
.companion[data-companion="vesta"]:focus-within .anim-vesta-dot--3 { animation-delay: 0.6s; }
@keyframes anim-vesta-pulse {
  0%, 100% { opacity: 0.25; r: 1.1; }
  50%      { opacity: 1;    r: 1.6; }
}

/* Nochtli — the vine grows along its path; leaves emerge in turn. */
.anim-vine {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.anim-leaf { opacity: 0; transform-origin: center; transform-box: fill-box; }
.companion[data-companion="nochtli"]:hover .anim-vine,
.companion[data-companion="nochtli"]:focus-visible .anim-vine,
.companion[data-companion="nochtli"]:focus-within .anim-vine {
  animation: anim-noch-grow 2.4s ease-out infinite;
}
.companion[data-companion="nochtli"]:hover .anim-leaf,
.companion[data-companion="nochtli"]:focus-visible .anim-leaf,
.companion[data-companion="nochtli"]:focus-within .anim-leaf {
  animation: anim-noch-bud 2.4s ease-out infinite;
}
.companion[data-companion="nochtli"]:hover .anim-leaf--2,
.companion[data-companion="nochtli"]:focus-visible .anim-leaf--2,
.companion[data-companion="nochtli"]:focus-within .anim-leaf--2 { animation-delay: 0.6s; }
@keyframes anim-noch-grow {
  0%   { stroke-dashoffset: 100; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}
@keyframes anim-noch-bud {
  0%, 30% { opacity: 0; transform: scale(0.4); }
  60%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 0.6; transform: scale(0.95); }
}

/* Kasira — the sun rotates and pulses with desert breath. */
.anim-sun { transform-origin: 50px 18px; transform-box: fill-box; }
.companion[data-companion="kasira"]:hover .anim-sun,
.companion[data-companion="kasira"]:focus-visible .anim-sun,
.companion[data-companion="kasira"]:focus-within .anim-sun {
  animation: anim-kasira-spin 9s linear infinite;
}
.companion[data-companion="kasira"]:hover .anim-rays,
.companion[data-companion="kasira"]:focus-visible .anim-rays,
.companion[data-companion="kasira"]:focus-within .anim-rays {
  animation: anim-kasira-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes anim-kasira-spin {
  from { transform: translate(50px, 18px) rotate(0deg); }
  to   { transform: translate(50px, 18px) rotate(360deg); }
}
@keyframes anim-kasira-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Orin — fragments orbit a fixed centre, never quite reuniting. */
.anim-orbit { transform-origin: center; transform-box: fill-box; }
.companion[data-companion="orin"]:hover .anim-orbit,
.companion[data-companion="orin"]:focus-visible .anim-orbit,
.companion[data-companion="orin"]:focus-within .anim-orbit {
  animation: anim-orin-orbit 6s linear infinite;
}
.anim-frag {
  transform-origin: center;
  transform-box: fill-box;
}
.companion[data-companion="orin"]:hover .anim-frag,
.companion[data-companion="orin"]:focus-visible .anim-frag,
.companion[data-companion="orin"]:focus-within .anim-frag {
  animation: anim-orin-flicker 1.4s ease-in-out infinite;
}
.companion[data-companion="orin"]:hover .anim-frag--2,
.companion[data-companion="orin"]:focus-visible .anim-frag--2,
.companion[data-companion="orin"]:focus-within .anim-frag--2 { animation-delay: 0.4s; }
.companion[data-companion="orin"]:hover .anim-frag--3,
.companion[data-companion="orin"]:focus-visible .anim-frag--3,
.companion[data-companion="orin"]:focus-within .anim-frag--3 { animation-delay: 0.8s; }
@keyframes anim-orin-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes anim-orin-flicker {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .niche-anim * { animation: none !important; }
  .anim-vine { stroke-dashoffset: 0; }
  .anim-leaf, .anim-ripple { opacity: 0.6; }
  .anim-vesta-dot { opacity: 0.7; }
}

   A flattened semicircle that reads as a glass dome of light
   the figure stands ON, lit from below. Sits BEHIND the figure
   (z-index 1, while .silhouette is 2). */
.niche-floor {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 78%;
  aspect-ratio: 3 / 1;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 50% 100% at 50% 65%, rgba(255, 232, 178, 0.85) 0%, rgba(224, 192, 129, 0.55) 28%, rgba(201, 168, 101, 0.18) 55%, transparent 80%),
    radial-gradient(ellipse 80% 75% at 50% 80%, rgba(216, 212, 240, 0.18), transparent 75%);
  filter: blur(0.4px);
  opacity: 0.95;
  transition: opacity var(--med), transform var(--med);
}
.niche-floor::before {
  /* highlight crest — a thin cresc of brighter light at the top of the dome */
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  top: 38%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(255, 240, 200, 0.55), transparent 80%);
  filter: blur(0.6px);
}
.niche-floor::after {
  /* base shadow — grounds the dome to the floor */
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: -4%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0, 0, 0, 0.55), transparent 75%);
  filter: blur(2px);
  mix-blend-mode: multiply;
}
.companion:hover .niche-floor,
.companion:focus-visible .niche-floor {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

/* legacy ::before/::after on silhouette-frame are off — we use .niche-floor now. */
.silhouette-frame::before,
.silhouette-frame::after { content: none; }

/* fake ground plate — a tight pool that pads only the lowest hem
   so the silhouette reads as standing on light, not bathed in it.
   Pulled in tight on the X-axis + low-opacity so it never overwhelms
   the figure outline. */
.silhouette-frame::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: 4%;
  height: 12%;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(224, 192, 129, 0.32), rgba(201, 168, 101, 0.10) 50%, transparent 80%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(216, 212, 240, 0.10), transparent 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  mix-blend-mode: screen;
  transition: opacity var(--med);
}
.silhouette-frame::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 192, 129, 0.7), transparent);
  z-index: 4;
  pointer-events: none;
  filter: blur(0.3px);
  opacity: 0.85;
  transition: opacity var(--med), background var(--med);
}
/* silhouette sits ABOVE the floor pool so its dark mass reads
   crisply against the niche back, with a subtle drop-shadow for
   edge separation. */
.silhouette {
  z-index: 2;
  filter:
    drop-shadow(0 0 1px rgba(216, 212, 240, 0.18))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  /* slow gilt breath at rest — alpha-aware (drop-shadow follows
     the silhouette outline) so each figure looks like it's
     softly catching candlelight. The :hover rule below replaces
     this filter chain with the strong 4-layer rim. */
  animation: silhouette-breathe 7.4s ease-in-out infinite;
}
@keyframes silhouette-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(216, 212, 240, 0.18))
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 1px rgba(216, 212, 240, 0.18))
      drop-shadow(0 0 5px  rgba(224, 192, 129, 0.22))
      drop-shadow(0 0 14px rgba(201, 168, 101, 0.13))
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  }
}
@media (prefers-reduced-motion: reduce) {
  .silhouette { animation: none; }
}
/* hover state — a tight gilded halo hugging the PNG outline.
   Several short-radius drop-shadows in gilt stack to read as a
   hand-drawn rim of light just outside the silhouette. */
.companion:hover .silhouette,
.companion:focus-visible .silhouette {
  filter:
    drop-shadow(0 0 1.2px rgba(255, 232, 178, 0.95))
    drop-shadow(0 0 4px  rgba(224, 192, 129, 0.85))
    drop-shadow(0 0 10px rgba(201, 168, 101, 0.6))
    drop-shadow(0 0 22px rgba(201, 168, 101, 0.35))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}
.companion:hover .silhouette-frame::before,
.companion:focus-visible .silhouette-frame::before { opacity: 1; }
.companion:hover .silhouette-frame::after,
.companion:focus-visible .silhouette-frame::after {
  background: linear-gradient(90deg, transparent, rgba(255, 230, 170, 0.95), transparent);
}

/* per-companion height normalization. Source busts have wildly different
   compositions (kneeling, full-length, half-length); we re-scale and
   anchor to the floor so heads align. */
.silhouette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 100%;
  transition: transform var(--slow), filter var(--slow);
}
/* normalize companion heads — anchor everyone so heads sit at
   roughly the same line and shoulders read at the same scale. */
.companion[data-companion="iren"]    .silhouette { transform: scale(0.74); object-position: 50% 90%; }
.companion[data-companion="sirael"]  .silhouette { transform: scale(0.72); transform-origin: 50% 100%; object-position: 50% 78%; }
.companion[data-companion="vesta"]   .silhouette { transform: scale(0.88) translateY(20px); object-position: 50% 104%; }
.companion[data-companion="nochtli"] .silhouette { transform: scale(0.78); object-position: 50% 92%; }
.companion[data-companion="kasira"]  .silhouette { transform: scale(0.78); object-position: 50% 96%; transform-origin: 50% 100%; }
.companion[data-companion="orin"]    .silhouette { transform: scale(0.78); object-position: 50% 92%; }
.silhouette-frame {
  margin-bottom: clamp(1.2em, 2.5vh, 1.8em);
  isolation: isolate;
  transition: border-color var(--med), box-shadow var(--med);
}

.companion:hover .silhouette-frame,
.companion:focus-visible .silhouette-frame {
  border-color: rgba(201, 168, 101, 0.45);
  box-shadow:
    0 0 0 1px rgba(201, 168, 101, 0.08),
    0 24px 60px -28px rgba(201, 168, 101, 0.32),
    inset 0 0 80px rgba(201, 168, 101, 0.05);
}

.companion:hover .silhouette,
.companion:focus-visible .silhouette {
  filter: brightness(1.05) contrast(1.05);
}

/* niche corner gilt brackets — quiet by default, lit on hover */
.niche-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 5;
  border: 1px solid var(--gilt-dim);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--med), border-color var(--med), width var(--slow), height var(--slow);
}

.niche-tl { top: 6px;    left: 6px;   border-right: 0; border-bottom: 0; }
.niche-tr { top: 6px;    right: 6px;  border-left: 0;  border-bottom: 0; }
.niche-bl { bottom: 6px; left: 6px;   border-right: 0; border-top: 0;    }
.niche-br { bottom: 6px; right: 6px;  border-left: 0;  border-top: 0;    }

.companion:hover .niche-corner,
.companion:focus-visible .niche-corner {
  opacity: 1;
  border-color: var(--gilt-bright);
  width: 18px;
  height: 18px;
}

/* niche-relic: small attribute mark in the upper corner of each niche */
.niche-relic {
  position: absolute;
  top: 14px; right: 14px;
  width: 22px; height: 22px;
  z-index: 5;
  color: var(--gilt);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--med), color var(--med), transform var(--med);
}
.companion:hover .niche-relic,
.companion:focus-visible .niche-relic {
  opacity: 1;
  color: var(--gilt-bright);
  transform: rotate(-3deg);
}

/* caption plate — museum-label register beneath each niche */
.companion-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  margin: 1em auto 0.6em;
  max-width: 22em;
  position: relative;
}
.plate-rule {
  display: block;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-dim), transparent);
  margin-bottom: 0.4em;
}
.companion-title {
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  margin: 0;
  transition: color var(--med);
}
.companion-given {
  font-family: var(--font-utility);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gilt);
  transition: color var(--med);
}
.companion:hover .companion-title,
.companion:focus-visible .companion-title { color: #fff; }
.companion:hover .companion-given,
.companion:focus-visible .companion-given { color: var(--gilt-bright); }

/* hero patina — the V star-wheel, now sized as a true background
   element behind the wordmark. Wrap is positioned in the hero, the
   svg is centred and oversized, and the outer ring spins under scroll
   (driven by --patina-spin set in script.js). */
.hero { position: relative; }
.hero-frame { position: relative; z-index: 2; }
/* lift every page-content layer above the fixed patina (z-index: 0) */
main { position: relative; z-index: 1; }
.studio-mark { z-index: 5; }
.footer { position: relative; z-index: 1; }
.hero-patina-wrap {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(500px, calc(95vw - 60px), 1220px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--gilt);
}
.hero-patina-glow {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(224, 192, 129, 0.16), rgba(216, 212, 240, 0.05) 45%, transparent 72%);
  filter: blur(28px);
  opacity: 0.85;
}
.hero-patina {
  position: relative;
  width: 100%; height: 100%;
  /* opacity is driven from JS via --patina-opacity (0–1): least
     opaque at the top of the page, ramping to ~0.22 by the bottom. */
  opacity: var(--patina-opacity, 0.04);
  --patina-spin: 0deg;
  transition: opacity 220ms linear;
}
.hero-patina use { stroke: currentColor; }
/* the outermost circle in the symbol gets its own slow spin. We isolate
   it by giving it a class via JS at boot — see script.js. */
.hero-patina .patina-outer-ring {
  transform-origin: 100px 100px;
  transform-box: fill-box;
  transform: rotate(var(--patina-spin));
  transition: transform 220ms linear;
}
@keyframes patina-breathe {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.22; }
}
.wordmark, .tagline, .hero-ornament { position: relative; z-index: 1; }

/* cosmic-thread reveal — a single gilt line draws across the niche grid
   as the section enters view, tracing the X monogram + the central spine.
   Sits BEHIND the niches (z-index -1) so it reads as a thread woven
   through the wall, not as scratches across the figures. */
.companions { position: relative; }
.cosmic-thread {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: calc(var(--logo-cosmic-opacity, 0.85) * 0.45);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 30% 22% at 50% 50%, transparent 30%, black 75%);
          mask-image: radial-gradient(ellipse 30% 22% at 50% 50%, transparent 30%, black 75%);
}
.companion-grid { position: relative; z-index: 1; }
.cosmic-thread-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2400ms cubic-bezier(.55,.05,.25,1);
  filter: drop-shadow(0 0 6px rgba(224, 192, 129, 0.55));
}
.companions.is-visible .cosmic-thread-path { stroke-dashoffset: 0; }

/* legacy companion-name styles — swallowed by the new plate. */
.companion-name { display: none; }

.companion-tease {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--cream-dim);
  letter-spacing: 0.018em;
  max-width: 22em;
  margin-inline: auto;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: opacity var(--med), max-height var(--slow), transform var(--med), margin-top var(--med);
}
.companion:hover .companion-tease,
.companion:focus-visible .companion-tease,
.companion:focus-within .companion-tease,
.companion.is-active .companion-tease {
  opacity: 1;
  max-height: 6em;
  margin-top: 0.4em;
  transform: none;
  color: var(--cream);
}
  transition: color var(--slow);
}

.companion-tease em { font-style: italic; }

.companion:hover .companion-tease,
.companion:focus-visible .companion-tease { color: var(--cream); }

/* === capture === */
.capture {
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.capture-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.18em;
  color: var(--cream);
  margin-bottom: 0.55em;
  line-height: 1.3;
}

.capture-sub {
  font-style: italic;
  font-weight: 300;
  color: var(--cream-faint);
  margin-bottom: clamp(2em, 4vh, 3em);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.capture-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  max-width: 480px;
  margin: 0 auto;
}

.capture-form input[type="email"] {
  flex: 1 1 240px;
  background: rgba(8, 6, 18, 0.7);
  border: 1px solid rgba(201, 168, 101, 0.25);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  outline: none;
  transition: border-color var(--med), background var(--med);
}

.capture-form input[type="email"]:focus {
  border-color: var(--gilt);
  background: rgba(15, 12, 30, 0.85);
}

.capture-form input[type="email"]::placeholder {
  color: var(--cream-faint);
  font-style: italic;
}

.capture-form button {
  position: relative;
  background: rgba(15, 12, 30, 0.7);
  border: 1px solid var(--gilt);
  color: var(--gilt);
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: background var(--med), color var(--med), border-color var(--med), letter-spacing var(--slow);
  overflow: hidden;
}

.capture-form button:hover,
.capture-form button:focus-visible {
  background: rgba(201, 168, 101, 0.08);
  color: var(--gilt-bright);
  border-color: var(--gilt-bright);
  letter-spacing: 0.36em;
}

/* inner painterly bracket on the button — appears on hover */
.capture-form button::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201, 168, 101, 0);
  pointer-events: none;
  transition: border-color var(--slow);
}

.capture-form button:hover::after,
.capture-form button:focus-visible::after {
  border-color: rgba(201, 168, 101, 0.28);
}

.disclaimer {
  margin-top: 1.6em;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* === footer === */
/* The footer is an open band that reaches the very bottom of the
   page — no panel chrome, just a soft vertical fade from transparent
   into a deeper tone so it ties into the night sky underneath. */
.footer {
  margin: clamp(60px, 10vh, 100px) 0 0;
  padding: 28px clamp(20px, 4vw, 48px) clamp(28px, 4vh, 44px);
  border: 0;
  border-top: 1px solid rgba(201, 168, 101, 0.18);
  background: linear-gradient(180deg,
    rgba(8, 6, 18, 0)   0%,
    rgba(8, 6, 18, 0.55) 60%,
    rgba(4, 3, 10, 0.85) 100%);
  box-shadow: none;
  border-radius: 0;
  position: relative;
}
.footer::before { content: none; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  max-width: var(--max);
  margin: 0 auto;
  font-family: var(--font-utility);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--cream-faint);
}

.footer-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--gilt);
}
.footer-glyph-mount {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.95;
}
.footer-glyph-mount svg { width: 100%; height: 100%; display: block; }
/* the seal is the dominant lockup element — bigger than the wordmark */
.footer-seal .footer-glyph--seal { width: 64px; height: 64px; flex: none; opacity: 1; }

.footer-email {
  color: var(--cream-faint);
  transition: color var(--med);
}

.footer-email:hover { color: var(--gilt-bright); }

/* sirael — sleeves intentionally break the niche walls */
.companion--overflow .silhouette-frame--breaks { overflow: visible; }
.niche-break {
  position: absolute;
  top: 56%;
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-dim), transparent);
  z-index: 5;
  opacity: 0.7;
  pointer-events: none;
}
.niche-break--l { left: -7px; }
.niche-break--r { right: -7px; }

/* === reveal animation === */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 950ms var(--ease), transform 950ms var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* === a11y === */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 1px solid var(--gilt);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wordmark { animation: none; }
  .hero-scroll-cue span { animation: none; opacity: 0.5; transform: translateY(-28px); }
}