/* Divinip. Madame Irma's booth: velvet, brass, a cold crystal ball, almanac type. */

:root {
  --velours: #14060e;
  --velours-2: #1e0915;
  --pourpre: #3d0f25;
  --or: #d6b062;
  --or-clair: #f3dc9f;
  --or-sombre: #8a6a2c;
  --ivoire: #f0e4cb;
  --brume: #c4b196;
  --ecto: #a6e6ff;
  --fil: #e8405a;
  --nuit: #8f86ff;

  --display: 'IM Fell French Canon', 'IM Fell English', Georgia, serif;
  --text: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --caps: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --script: 'Monsieur La Doulaise', 'IM Fell English', cursive;

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 34rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--velours);
  color: var(--ivoire);
  font-family: var(--text);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  /* the velvet behind everything below the stage: slow folds, a little pile */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(110, 22, 56, .35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,0) 3.2vw, rgba(255,120,160,.035) 5.4vw, rgba(0,0,0,0) 7.6vw, rgba(0,0,0,.28) 10.8vw),
    linear-gradient(180deg, #1a0712, #12050c 60%, #0c0308);
}
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--or-clair); text-decoration-thickness: 1px; text-underline-offset: .18em; }
::selection { background: rgba(214, 176, 98, .35); color: #fff; }
:focus-visible { outline: 1.5px solid var(--or-clair); outline-offset: 4px; border-radius: 2px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ the stage */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: calc(env(safe-area-inset-top) + clamp(18px, 4.5vh, 56px)) var(--gutter) calc(env(safe-area-inset-bottom) + clamp(18px, 4vh, 44px));
  overflow: hidden;
  isolation: isolate;
  --D: min(41svh, 80vw, 430px);
}
.scene, .scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.scene-fallback {
  z-index: -3;
  background:
    radial-gradient(40% 30% at 50% 46%, rgba(160, 140, 255, .35), transparent 70%),
    radial-gradient(70% 60% at 50% 40%, rgba(120, 25, 60, .55), transparent 75%),
    repeating-linear-gradient(90deg, #2a0a19 0, #4a1029 2.5vw, #24081a 5vw),
    #14060e;
}
.hero::after {
  /* the stage floor sinks into the page */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14vh;
  background: linear-gradient(180deg, rgba(20, 6, 14, 0), var(--velours));
  z-index: -1;
  pointer-events: none;
}

.marquee { text-align: center; position: relative; }
/* the stage is revealed by the curtains; the words arrive after them */
.has-scene .marquee, .has-scene .ritual { opacity: 0; transform: translateY(10px); transition: opacity 1.4s ease, transform 1.4s ease; }
.has-scene.stage-open .marquee { opacity: 1; transform: none; }
.has-scene.stage-open .ritual { opacity: 1; transform: none; transition-delay: .6s; }
.has-scene .stand { opacity: 0; transition: opacity .7s ease; }
.has-scene.stage-open .stand { opacity: 1; }
.has-scene .orb-ip { visibility: hidden; }
.has-scene.stage-open .orb-ip { visibility: visible; }
.title {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 10.5vw, 8.6rem);
  line-height: .9;
  letter-spacing: -.01em;
  background: linear-gradient(176deg, #fff3cf 0%, #f0d58c 30%, #c99a45 52%, #f7e3a8 64%, #8f6a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 10, 0, .65)) drop-shadow(0 0 28px rgba(255, 200, 120, .18));
  padding: 0 .08em .06em;
}
.ti { position: relative; display: inline-block; }
.ti::after {
  /* every i is dotted with a tiny crystal ball */
  content: '';
  position: absolute;
  left: 60%;
  top: .26em;
  width: .15em;
  height: .15em;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #c8f0ff 22%, #7f8cff 60%, #2e1f6b 100%);
  box-shadow: 0 0 .12em rgba(170, 220, 255, .9), 0 0 .4em rgba(140, 160, 255, .55);
}
.tagline {
  margin: .5rem auto 0;
  font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  color: var(--ivoire);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
  max-width: 52ch;
  text-wrap: balance;
}

.altar {
  align-self: center;
  position: relative;
  width: var(--D);
  height: calc(var(--D) * 1.3);
  margin: clamp(8px, 2vh, 24px) 0 0;
}
.orb {
  position: absolute;
  left: 0; top: 0;
  width: var(--D);
  height: var(--D);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.no-webgl .orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0 4%, transparent 12%),
    radial-gradient(circle at 50% 55%, rgba(170, 220, 255, .55), rgba(110, 90, 255, .35) 45%, rgba(30, 10, 60, .9) 75%);
  box-shadow: 0 0 60px rgba(140, 160, 255, .35), inset 0 0 40px rgba(0,0,0,.6);
}
.orb-ip {
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(var(--D) * .088);
  letter-spacing: .02em;
  color: #f4fbff;
  text-align: center;
  line-height: 1.25;
  mix-blend-mode: screen;
  text-shadow: 0 0 .3em rgba(170, 225, 255, .9), 0 0 1.2em rgba(130, 150, 255, .7);
  opacity: 0;
  pointer-events: none;
  max-width: 80%;
}
.orb-ip.v6 { font-size: calc(var(--D) * .05); }
.orb-ip.ip.long:not(.v6) { font-size: calc(var(--D) * .062); }
.orb-ip.word { font-family: var(--display); font-style: italic; font-weight: 400; font-size: calc(var(--D) * .135); letter-spacing: 0; line-height: 1.05; }
.orb-ip.word.long { font-size: calc(var(--D) * .095); }
.orb-ip.word.xlong { font-size: calc(var(--D) * .075); }
.orb-ip .w { font-weight: inherit; white-space: nowrap; display: inline-block; }
.orb-ip.out span, .orb-ip.out.settled span { animation: dissolve .45s ease forwards; animation-delay: calc(var(--i) * 12ms); }
@keyframes dissolve { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(10px); transform: translateY(-.35em) scale(1.08); } }
.orb-ip span { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.4em) scale(.8); }
.orb-ip.on { opacity: 1; }
.orb-ip.on span {
  animation: materialize 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
.orb-ip.on.settled span { animation: float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -400ms); opacity: 1; filter: none; transform: none; }
@keyframes materialize {
  0% { opacity: 0; filter: blur(14px); transform: translateY(.5em) scale(.7) rotate(-8deg); }
  60% { opacity: 1; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes float { 50% { transform: translateY(-.07em); } }

.stand {
  position: absolute;
  left: 0;
  top: calc(var(--D) * .874);
  width: var(--D);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  pointer-events: none;
  --charge: 0;
}
.stand-glow { mix-blend-mode: screen; opacity: calc(.25 + var(--charge) * .75); }

.ritual {
  position: relative;
  width: 100%;
  max-width: 40rem;
  min-height: 9.5rem;
  display: grid;
  align-items: start;
  justify-items: center;
  text-align: center;
  margin-top: calc(var(--D) * .01);
}
.invite { display: grid; justify-items: center; gap: .9rem; }
.consult {
  position: relative;
  font-family: var(--caps);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: .06em;
  color: var(--or-clair);
  padding: .8em 1.9em .85em;
  border: 1px solid rgba(243, 220, 159, .75);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 14, 34, .72), rgba(22, 6, 14, .82));
  box-shadow: 0 0 0 4px rgba(20, 6, 14, .6), 0 0 0 5px rgba(214, 176, 98, .35), 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255, 240, 200, .25);
  transition: box-shadow .4s ease, color .3s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.consult:hover { color: #fff6dc; box-shadow: 0 0 0 4px rgba(20, 6, 14, .6), 0 0 0 5px rgba(243, 220, 159, .7), 0 0 40px rgba(170, 200, 255, .35), inset 0 1px 0 rgba(255, 240, 200, .35); }
.consult:active { transform: scale(.98); }
.consult[disabled] { opacity: .6; cursor: progress; }
.voice-choice { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.2rem; }
.voice-choice button {
  background: none;
  border: 0;
  padding: .2rem 0;
  font-style: italic;
  font-size: 1rem;
  color: var(--brume);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.voice-choice button::before {
  content: '';
  display: inline-block;
  width: .55em; height: .55em;
  margin-right: .45em;
  border-radius: 50%;
  border: 1px solid currentColor;
  vertical-align: .05em;
}
.voice-choice button[aria-checked='true'] { color: var(--or-clair); }
.voice-choice button[aria-checked='true']::before { background: var(--or-clair); box-shadow: 0 0 8px var(--or-clair); }
.promise { margin: 0; font-size: .92rem; font-style: italic; color: rgba(240, 228, 203, .62); text-shadow: 0 1px 8px rgba(0,0,0,.9); max-width: 50ch; text-wrap: balance; }

.speech { width: 100%; display: grid; justify-items: center; gap: .6rem; }
.line {
  margin: 0;
  min-height: 4.8em;
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: #fbf1da;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8);
  max-width: 30ch;
  text-wrap: balance;
}
.line .caret { display: inline-block; width: .06em; height: .9em; background: var(--or-clair); margin-left: .08em; vertical-align: -.08em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.speech-tools { display: flex; gap: 1.2rem; }
.quiet {
  background: none;
  border: 0;
  padding: .3rem .2rem;
  font-family: var(--caps);
  font-size: .95rem;
  letter-spacing: .05em;
  color: var(--brume);
  text-decoration: underline;
  text-decoration-color: rgba(196, 177, 150, .4);
  text-underline-offset: .25em;
}
.quiet:hover { color: var(--or-clair); }

/* ------------------------------------------------------------------ the séance */

html.seance { overflow: hidden; }
html.seance .hero { height: 100vh; height: 100svh; min-height: 0; }
html.seance.ended { overflow: auto; }
.mono { font-family: var(--mono); font-weight: 300; letter-spacing: 0; }

.veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 75% 62% at 50% 40%, rgba(14, 4, 10, .74), rgba(14, 4, 10, .38) 70%, rgba(14, 4, 10, .12));
}
.show .veil { opacity: 1; }
.has-scene.show .marquee, .show .marquee { opacity: 0; transform: translateY(-24px); pointer-events: none; transition-delay: 0s; }

/* the ball goes down to the edge of the table, small, and keeps watching */
.altar { transform-origin: 50% 100%; transition: transform 1.6s cubic-bezier(.6, 0, .2, 1); }
.show .altar { transform: translateY(var(--altar-dy, 0px)) scale(var(--altar-k, 1)); }
.show .orb { cursor: default; }

.show .ritual {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sub-bottom, 30vh);
  margin: 0 auto;
  min-height: 0;
  padding: 0 var(--gutter);
}
.show .speech { gap: .15rem; }
.show .line { font-size: clamp(1.05rem, 2.1vw, 1.4rem); min-height: 4.1em; max-width: 34ch; display: flex; align-items: flex-end; justify-content: center; }

.stage {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: calc(env(safe-area-inset-top) + 18px);
  bottom: calc(var(--sub-bottom, 30vh) + 8.6rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.show .stage { opacity: 1; }
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  text-align: center;
  opacity: 0;
  transform: scale(.94) translateY(12px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.slide.on { opacity: 1; transform: none; }
.slide.off { opacity: 0; transform: scale(1.04) translateY(-10px); }
.slide.farewell { pointer-events: auto; }
.figure-sq { width: calc(var(--sq) - 4.6rem); height: calc(var(--sq) - 4.6rem); max-width: 100%; position: relative; flex: none; }
.figure-sq > svg { width: 100%; height: 100%; }
.caption { margin: 0; font-style: italic; font-size: 1.05rem; color: var(--brume); max-width: 36ch; }
.caption.mono { font-style: normal; font-size: .76rem; line-height: 1.6; color: rgba(166, 230, 255, .8); }
.gold { background: linear-gradient(176deg, #fff3cf 0%, #f0d58c 30%, #c99a45 55%, #f7e3a8 68%, #8f6a2b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* tarot: four cards dealt from the ball, turned one by one */
.deal { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cardw, 160px)); gap: min(24px, 4vw); justify-content: center; align-content: center; }
.tcard { margin: 0; display: grid; gap: .45rem; width: var(--cardw, 160px); }
.tarot .tcard { opacity: 0; transform: translateY(55vh) scale(.3) rotate(-12deg); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; transition-delay: calc(var(--k) * .16s); }
.tarot.dealt .tcard { opacity: 1; transform: none; }
.tarot.dealt .tcard.focus { transform: translateY(-6px) scale(1.06); transition-delay: 0s; z-index: 2; }
.tarot.dealt .tcard.dim { opacity: .42; filter: saturate(.6); transition-delay: 0s; }
.flip { position: relative; width: 100%; aspect-ratio: 7 / 12; perspective: 1400px; }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3, .1, .1, 1); }
.tcard.open .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 4.5% / 2.6%; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(214, 176, 98, .25); }
.face svg { width: 100%; height: 100%; }
.face.front { transform: rotateY(180deg); }
.tcard figcaption { font-family: var(--caps); font-size: .9rem; letter-spacing: .05em; color: var(--or); transition: opacity .8s ease .5s; }
.tcard:not(.open) figcaption { opacity: 0; }

/* the sacred number */
.path-fig { display: grid; place-items: center; }
.path-ring { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.path-num { font-family: var(--display); font-size: calc(var(--sq) * .36); line-height: 1; padding-bottom: .1em; position: relative; }
.path-num, .pi-glyph, .omen-mark, .today { background: linear-gradient(176deg, #fff3cf 0%, #f0d58c 30%, #c99a45 55%, #f7e3a8 68%, #8f6a2b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255, 210, 130, .2)); }
.number.on .e-dot.on { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* π and the signs */
.pi-glyph { font-family: var(--display); font-style: italic; font-size: calc(var(--sq) * .44); line-height: .85; padding: 0 .1em .08em; }
.pi-band { margin: 0; font-size: clamp(.78rem, 3.1vw, 1.25rem); white-space: nowrap; color: rgba(240, 228, 203, .42); letter-spacing: .05em; }
.pi-band mark { background: none; color: #fff; padding: 0 .2em; text-shadow: 0 0 .4em var(--ecto), 0 0 1em rgba(143, 134, 255, .8); }
.pi.on .pi-band { animation: band 2.8s cubic-bezier(.2, .7, .2, 1) both; }
.pi.on .pi-band mark { animation: shine 1.2s ease 2s both; }
@keyframes band { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shine { from { color: rgba(240, 228, 203, .42); text-shadow: none; } }
.omen-mark { font-family: var(--display); font-size: calc(var(--sq) * .34); line-height: 1; padding: 0 .1em .1em; white-space: nowrap; }
.omen-mark.long { font-size: calc(var(--sq) * .18); }

/* the seal */
.sigil .trace { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.sigil.drawn .trace { animation: draw 3.4s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--delay, 0s); }
.sigil .pin { opacity: 0; }
.sigil.drawn .pin { animation: appear .6s ease forwards; animation-delay: calc(var(--delay, 0s) + 2.8s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
.demon-cap { font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--or-clair); opacity: 0; transform: translateY(6px); transition: opacity 1s ease, transform 1s ease; }
.seal.named .demon-cap { opacity: 1; transform: none; }

/* the red thread */
canvas.globe { display: block; }

/* the prophecy */
.today { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(3.2rem, 11vw, 6.5rem); line-height: 1; padding: 0 .1em .1em; }
.balls { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.balls li {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 400; font-size: 1.12rem; color: #2b1606;
  background: radial-gradient(circle at 32% 28%, #fffbe9 0 8%, #f3dc9f 30%, #c99a45 70%, #7a5822 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 -3px 8px rgba(80, 40, 0, .35);
  opacity: 0;
  transform: translateY(-38vh);
  transition: transform .9s cubic-bezier(.3, 1.35, .5, 1), opacity .3s ease;
  transition-delay: calc(var(--k) * .16s);
}
.balls li.chance { background: radial-gradient(circle at 32% 28%, #fff 0 8%, #ffb3c0 30%, #e8405a 70%, #7a1022 100%); color: #fff; }
.balls-in .balls li { opacity: 1; transform: none; }

/* the farewell */
.signature { font-family: var(--script); font-size: clamp(3.8rem, 11vw, 6.4rem); line-height: 1; color: var(--or-clair); margin: 0; text-shadow: 0 0 30px rgba(243, 220, 159, .15); }
.credentials { margin: 0; font-style: italic; color: var(--brume); max-width: 34ch; }
.endcard { display: grid; justify-items: center; gap: .2rem; margin-top: .8rem; opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s ease; }
.endcard { pointer-events: none; }
.farewell.ready .endcard { opacity: 1; transform: none; pointer-events: auto; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; align-items: center; }
.toast { display: block; min-height: 1.4em; font-style: italic; font-size: .95rem; color: var(--or); }
.other { width: min(100%, 26rem); }
.other label { display: block; font-style: italic; font-size: .98rem; color: var(--brume); margin-bottom: .45rem; }
.fine { margin: .6rem 0 0; font-size: .88rem; font-style: italic; color: var(--brume); }
.ended .ritual { opacity: .85; }

.field { display: flex; gap: .6rem; justify-content: center; }
.field input {
  flex: 1 1 auto; min-width: 0; max-width: 16rem;
  font-family: var(--mono); font-weight: 300; font-size: 1.05rem;
  padding: .6rem 1rem;
  background: rgba(10, 3, 7, .6);
  border: 1px solid rgba(214, 176, 98, .45);
  border-radius: 999px;
  color: var(--ecto);
  text-align: center;
}
.field input::placeholder { color: rgba(166, 230, 255, .35); }
.field input:focus { outline: none; border-color: var(--or-clair); box-shadow: 0 0 0 3px rgba(243, 220, 159, .15); }
.field button, .button {
  font-family: var(--caps); font-size: 1.02rem; letter-spacing: .04em;
  color: #2b1606;
  padding: .62rem 1.3rem;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #f7e3a8, #c99a45);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
  white-space: nowrap;
}
.button.ghost { background: rgba(20, 6, 14, .55); color: var(--or-clair); box-shadow: inset 0 0 0 1px rgba(243, 220, 159, .6); }
.field button:hover, .button:hover { filter: brightness(1.08); }

.colophon { max-width: 40rem; margin: 0 auto; padding: 3rem var(--gutter) calc(3rem + env(safe-area-inset-bottom)); text-align: center; font-size: .92rem; color: rgba(240, 228, 203, .55); }
.colophon p { margin: 0 0 .6rem; }
.colophon a { color: rgba(243, 220, 159, .8); }
.noscript { position: fixed; inset: auto 0 0; padding: 1rem; text-align: center; background: var(--velours); }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 600px) {
  body { font-size: 1.125rem; }
  .balls { gap: .4rem; }
  .balls li { width: 2.55rem; height: 2.55rem; font-size: .95rem; }
  .show .line { font-size: 1.08rem; }
}
@media (max-width: 420px) {
  .hero { --D: min(40svh, 82vw); }
}
@media (max-height: 640px) and (min-width: 600px) {
  .hero { --D: min(40svh, 380px); }
  .title { font-size: clamp(3.2rem, 8vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sigil .trace { stroke-dashoffset: 0; }
  .sigil .pin { opacity: 1; }
}

/* ------------------------------------------------------------------ drawings */

.emblem { fill: none; stroke: #f3dc9f; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.emblem.glow { stroke-width: 4.5; stroke-opacity: .13; }
.emblem.glow text, .emblem.glow .fill { display: none; }
.emblem .fill { fill: #f3dc9f; stroke: none; }
.emblem .fill-soft { fill: rgba(243, 220, 159, .3); }
.emblem .thick { stroke-width: 2.4; }
.emblem .bolt { stroke-width: 1.9; }
.em-t { fill: #f3dc9f; stroke: none; font-family: var(--mono); font-weight: 300; }
.em-t.big { font-family: var(--display); font-style: italic; font-weight: 400; }
.card-num, .card-name { font-family: var(--caps); }
.card-name { letter-spacing: .06em; }
.card-alias { font-family: var(--text); font-style: italic; }

.chart { color: var(--or-clair); overflow: visible; }
.chart .ring { fill: none; stroke: rgba(214, 176, 98, .45); stroke-width: .8; }
.chart .ring.strong { stroke: rgba(214, 176, 98, .8); stroke-width: 1.1; }
.chart .ring.faint { stroke: rgba(214, 176, 98, .2); }
.chart .tick { stroke: rgba(214, 176, 98, .55); stroke-width: .7; }
.chart .tick.faint { stroke: rgba(214, 176, 98, .25); }
.chart .tick.strong { stroke: rgba(214, 176, 98, .8); stroke-width: 1; }
.chart .cusp { stroke: rgba(214, 176, 98, .28); stroke-width: .7; }
.chart .cusp.axis { stroke: rgba(243, 220, 159, .75); stroke-width: 1.2; }
.chart .sign { color: rgba(243, 220, 159, .8); }
.chart .sun-sign { color: #fff3cf; filter: drop-shadow(0 0 6px rgba(243, 220, 159, .8)); }
.chart .house-n { font-size: 12px; fill: rgba(214, 176, 98, .7); letter-spacing: .04em; }
.chart .axis-l { font-size: 15px; fill: var(--or-clair); letter-spacing: .08em; }
.chart .aspect { stroke-width: 1.1; }
.chart .aspect.soft { stroke: var(--ecto); }
.chart .aspect.hard { stroke: var(--fil); }
.chart .leader { stroke: rgba(214, 176, 98, .35); stroke-width: .7; }
.chart .planet-disc { fill: rgba(20, 6, 14, .85); stroke: rgba(214, 176, 98, .5); stroke-width: .8; }
.chart .planet { color: #fff3cf; }
.chart .retro { font-size: 11px; fill: var(--fil); font-family: var(--text); font-style: italic; }
.chart .deg { font-size: 10.5px; fill: rgba(196, 177, 150, .85); font-family: var(--mono); font-weight: 300; }
.chart .hub { fill: var(--or-clair); }

.sigil .sring { fill: none; stroke: rgba(214, 176, 98, .55); stroke-width: 1; }
.sigil .sring.strong { stroke: rgba(214, 176, 98, .85); stroke-width: 1.3; }
.sigil .sring.faint { stroke: rgba(214, 176, 98, .22); }
.sigil .ring-text { font-family: var(--caps); font-size: 13px; fill: rgba(214, 176, 98, .8); letter-spacing: .12em; }
.sigil .grid line { stroke: rgba(214, 176, 98, .2); stroke-width: .6; }
.sigil .nums text { font-family: var(--mono); font-weight: 300; font-size: 7.4px; fill: rgba(240, 228, 203, .34); text-anchor: middle; }
.sigil .nums text.lit { fill: rgba(243, 220, 159, .9); font-weight: 400; }
.sigil .path path, .sigil .path circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sigil .mine path, .sigil .mine circle { stroke: #f3dc9f; stroke-width: 3.4; }
.sigil .mine .halo { stroke: rgba(243, 220, 159, .22); stroke-width: 12; }
.sigil .mine .nodes circle { fill: #f3dc9f; stroke: none; }
.sigil .soul path, .sigil .soul circle { stroke: var(--fil); stroke-width: 2.2; }
.sigil .soul .halo { stroke: rgba(232, 64, 90, .2); stroke-width: 9; }
.sigil .soul .nodes circle { fill: var(--fil); stroke: none; }

.path-ring .e-ring { fill: none; stroke: rgba(214, 176, 98, .45); stroke-width: .6; }
.path-ring .e-ring.faint { stroke: rgba(214, 176, 98, .18); }
.path-ring .e-line { fill: none; stroke: rgba(214, 176, 98, .3); stroke-width: .6; }
.path-ring .e-dot { fill: rgba(214, 176, 98, .6); }
.path-ring .e-dot.on { fill: #fff3cf; filter: drop-shadow(0 0 4px #f3dc9f); }
.path-ring .e-n { font-family: var(--caps); font-size: 9px; fill: rgba(214, 176, 98, .65); }
.path-ring .e-n.on { fill: #fff3cf; }