/* cult-community / prophecy
   A signal from deep space. A black sky of seeded stars and drawn constellations over
   brand-tinted nebulae; the mascot inside a slowly turning, pulsing sigil (a heptagram,
   a dial, two orbits and the project's own words around the rim); wide-tracked titling
   capitals over an old-style serif; engraved Copperplate labels; pale starlight gold
   for every ornament and the brand accent as the glow. The facts are roman-numeral
   commandments, the rites a star-lit chronicle, the gallery seen through an eyepiece,
   and a pulsar trace runs along the foot of the hero like a horizon. Calm motion:
   rotation, breathing, pulses, letters resolving out of the dark. */

:root {
  --pr-void: color-mix(in srgb, var(--wl-accent) 3%, #02030a);
  --pr-ink: #f0e9da;
  --pr-gold: color-mix(in srgb, var(--wl-secondary-on-dark) 26%, #e6d3a1);
  --pr-gold-soft: color-mix(in srgb, var(--pr-gold) 58%, transparent);
  --pr-gold-faint: color-mix(in srgb, var(--pr-gold) 20%, transparent);
  --pr-glow: var(--wl-accent-on-dark);
  --pr-glow-soft: color-mix(in srgb, var(--wl-accent-on-dark) 45%, transparent);
  --pr-font-label: "Copperplate", "Copperplate Gothic Light", "Copperplate Gothic", "Optima", "Candara", "Segoe UI", sans-serif;
  --pr-font-code: "SF Mono", "Cascadia Mono", Consolas, Menlo, ui-monospace, monospace;
  --pr-star: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);

  --v-bg: var(--pr-void);
  --v-fg: var(--pr-ink);
  --v-soft: #c2bbab;
  --v-faint: #8b8577;
  --v-accent: var(--wl-accent-on-dark);
  --v-accent-text: var(--pr-gold);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary-on-dark);
  --v-surface: color-mix(in srgb, var(--wl-accent) 4%, #090a11);
  --v-surface-2: color-mix(in srgb, var(--wl-accent) 7%, #10111a);
  --v-card-bg: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.006));
  --v-line: color-mix(in srgb, var(--pr-gold) 19%, transparent);
  --v-line-strong: color-mix(in srgb, var(--pr-gold) 42%, transparent);
  --v-border: 1px solid var(--v-line);
  --v-seg-1: var(--wl-accent-on-dark);
  --v-seg-2: var(--pr-gold);
  --v-seg-3: var(--wl-secondary-on-dark);
  --v-seg-4: color-mix(in srgb, var(--wl-accent-on-dark) 45%, #1a1b26);
  --v-seg-5: color-mix(in srgb, var(--pr-gold) 45%, #1a1b26);
  --v-seg-6: #5f5b54;
  --v-font-display: "Cinzel", "Trajan Pro", "Perpetua Titling MT", "Felix Titling", "Cormorant SC", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --v-font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --v-font-mono: var(--pr-font-label);
  --v-display-weight: 400;
  --v-display-tracking: 0.12em;
  --v-display-case: uppercase;
  --v-display-lh: 1.12;
  --v-title-size: clamp(1.9rem, 3.4vw, 3rem);
  --v-body-size: clamp(1.03rem, 0.35vw + 0.95rem, 1.16rem);
  --v-radius: 3px;
  --v-radius-sm: 2px;
  --v-radius-lg: 4px;
  --v-shadow: 0 30px 80px -40px #000;
  --v-card-pad: clamp(24px, 2.8vw, 36px);
  --v-maxw: 1120px;
  --v-sec-gap: clamp(104px, 12vw, 176px);
  --v-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --wl-label-lore: "Origin";
  --wl-label-features: "The sacraments";
  --wl-label-supply: "The offering";
  --wl-label-flow: "The ritual";
  --wl-label-timeline: "Chronicle";
  --wl-label-comparison: "Signs";
  --wl-label-stats: "Readings";
  --wl-label-tweet: "The signal";
  --wl-label-gallery: "Visions";
  --wl-label-facts: "The law";
  --wl-label-quotes: "Witnesses";
  --wl-label-faq: "Catechism";
  --wl-label-access: "Initiation";

  /* layout knobs (skeleton.css) */
  --cc-top-h: 68px;
  --cc-hero-cols: minmax(0, 1.04fr) minmax(0, 0.96fr);
  --cc-hero-rows: auto auto;
  --cc-hero-areas: "art lead" "art aside";
  --cc-hero-areas-phone: "art" "lead" "aside";
  --cc-hero-gap: clamp(28px, 4.5vw, 72px);
  --cc-hero-row-gap: 30px;
  --cc-hero-pad-y: clamp(24px, 3.6vw, 52px);
  --cc-seal: min(100%, 572px);
}

body { background: var(--v-bg); }
::selection { background: var(--pr-glow); color: var(--wl-on-accent); }

/* ------------------------------------------------------------ the sky */
.cc-atmos {
  background:
    radial-gradient(ellipse 52% 40% at 80% 10%, color-mix(in srgb, var(--wl-accent) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 46% 38% at 6% 84%, color-mix(in srgb, color-mix(in srgb, var(--wl-secondary) 30%, #3a44c4) 13%, transparent), transparent 72%),
    radial-gradient(ellipse 90% 55% at 50% 120%, color-mix(in srgb, var(--wl-accent) 10%, transparent), transparent 70%),
    var(--v-bg);
}
.cc-atmos::before, .cc-atmos::after { content: ""; position: absolute; inset: 0; }
/* two tiles of stars at co-prime sizes, so the field never visibly repeats */
.cc-atmos::before {
  background-image:
    radial-gradient(circle at 23px 41px, rgb(255 255 255 / 0.7) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 91px 173px, rgb(255 255 255 / 0.45) 0 0.6px, transparent 1.3px),
    radial-gradient(circle at 157px 67px, rgb(255 242 214 / 0.8) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 211px 131px, rgb(255 255 255 / 0.4) 0 0.6px, transparent 1.3px),
    radial-gradient(circle at 47px 229px, rgb(255 255 255 / 0.55) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 263px 29px, rgb(255 255 255 / 0.6) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 131px 263px, rgb(214 226 255 / 0.5) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 283px 199px, rgb(255 255 255 / 0.45) 0 0.6px, transparent 1.3px),
    radial-gradient(circle at 5px 139px, rgb(255 255 255 / 0.35) 0 0.6px, transparent 1.3px);
  background-size: 307px 293px;
}
.cc-atmos::after {
  background-image:
    radial-gradient(circle at 71px 97px, rgb(255 250 235 / 0.9) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 389px 331px, rgb(222 232 255 / 0.85) 0 0.9px, transparent 1.9px),
    radial-gradient(circle at 463px 53px, rgb(255 244 222 / 0.8) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 211px 461px, rgb(255 255 255 / 0.75) 0 0.9px, transparent 1.9px);
  background-size: 571px 523px;
  animation: pr-twinkle 7s ease-in-out infinite;
}

/* ------------------------------------------------------------ chrome */
.cc-top {
  background: linear-gradient(to bottom, rgb(3 4 9 / 0.94), rgb(3 4 9 / 0.62));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v-line);
}
.cc-brand__mark { border-radius: 50%; box-shadow: 0 0 0 1px var(--pr-gold-soft), 0 0 18px -2px var(--pr-glow); }
.cc-brand__name { font-family: var(--v-font-display); font-size: 1.02rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pr-ink); }
.cc-brand__tick { font-family: var(--pr-font-label); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--pr-gold); }
.cc-top__nav .wl-nav__link { font-family: var(--pr-font-label); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v-faint); transition: color 0.3s; }
.cc-top__nav.cc-nav--more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}
.cc-top__nav .wl-nav__link:hover, .cc-top__nav .wl-nav__link.is-active { color: var(--pr-gold); }
.cc-top__net {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border: 1px solid var(--v-line); border-radius: 999px;
  font-family: var(--pr-font-label); font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--pr-gold);
}
.cc-top__net::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pr-glow); box-shadow: 0 0 10px var(--pr-glow); animation: pr-beacon 2.6s ease-in-out infinite; }

/* ------------------------------------------------------------ hero */
.cc-hero__sky::before {
  content: ""; position: absolute; left: 27%; top: 50%;
  width: 1500px; height: 1500px; transform: translate(-50%, -50%);
  background:
    repeating-radial-gradient(circle, transparent 0 119px, color-mix(in srgb, var(--pr-gold) 8%, transparent) 119px 120px),
    repeating-conic-gradient(from 0deg, transparent 0 14.85deg, color-mix(in srgb, var(--pr-gold) 7%, transparent) 14.85deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
}
/* constellations stay over the sky and clear of the copy (chart units, top-aligned) */
.cc-chart { --cc-sky-zones: 40 30 330 110, 760 25 1080 150, 1120 25 1560 140, 30 800 300 900; }
.cc-star { fill: #fff; opacity: 0.72; }
.cc-star--tw { animation: pr-twinkle var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.cc-const__line {
  fill: none; stroke: var(--pr-gold); stroke-opacity: 0.42; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; animation: pr-draw 1s var(--v-ease) both; animation-delay: calc(0.15s + var(--k, 0) * 0.12s);
}
.cc-const__star { fill: #fff; filter: drop-shadow(0 0 4px rgb(255 255 255 / 0.9)); animation: pr-appear 0.7s ease-out both; animation-delay: var(--d, 0s); }
.cc-const__flare { stroke: #fff; stroke-width: 1; stroke-opacity: 0.75; vector-effect: non-scaling-stroke; animation: pr-twinkle 3.6s ease-in-out infinite; }
.cc-signal {
  height: clamp(80px, 9.4vw, 124px); opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}
.cc-signal__fill { fill: var(--v-bg); }
.cc-signal__line { fill: none; stroke: var(--pr-gold); stroke-width: 1; stroke-opacity: 0.85; vector-effect: non-scaling-stroke; }

.cc-hero__lead { align-self: end; }
.cc-hero__aside { align-self: start; }
.cc-hero__kicker {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font-family: var(--pr-font-label); font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--pr-gold);
}
.cc-hero__kicker::before { content: ""; width: 13px; height: 13px; flex: none; background: var(--pr-gold); clip-path: var(--pr-star); filter: drop-shadow(0 0 6px var(--pr-gold)); }
.cc-hero__kicker::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(to right, var(--pr-gold-soft), transparent); }
.cc-hero__headline {
  font-size: clamp(2.1rem, min(5vw, calc(6.1rem - var(--cc-hl-n, 24) * 0.09rem)), 4.5rem);
  color: var(--pr-ink);
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--wl-accent) 28%, transparent));
}
.cc-hero__headline .wl-ch {
  background: linear-gradient(180deg, #fffaf0 34%, var(--pr-gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pr-resolve 0.75s var(--v-ease) both;
  animation-delay: min(calc(0.12s + var(--i, 0) * 26ms), 1s);
}
.cc-hero__subhead { max-width: 31rem; font-style: italic; font-size: clamp(1.08rem, 1.35vw, 1.27rem); line-height: 1.62; color: var(--v-soft); }
.cc-hero__cta { margin-top: 30px; }
.cc-hero__cta .wl-btn {
  border-radius: 999px; padding: 1em 1.55em;
  font-family: var(--pr-font-label); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pr-ink); border: 1px solid var(--v-line-strong); background: rgb(255 255 255 / 0.025);
}
.cc-hero__cta .wl-btn:hover { border-color: var(--pr-gold); box-shadow: 0 0 30px -8px var(--pr-gold); }
.cc-hero__cta .wl-btn--primary { background: var(--pr-glow); border-color: var(--pr-glow); color: var(--wl-on-accent); box-shadow: 0 0 44px -8px var(--pr-glow); }
.cc-hero__cta .wl-btn--primary:hover { border-color: var(--pr-glow); box-shadow: 0 0 60px -6px var(--pr-glow); }
.cc-hero__cta .wl-btn__ca { display: none; }
.cc-hero__cta .wl-glyph { width: 1.1em; height: 1.1em; }
.cc-meta { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--v-line); row-gap: 14px; }
.cc-meta__row { display: grid; gap: 5px; padding: 0 22px; border-left: 1px solid var(--v-line); }
.cc-meta__row:first-child { padding-left: 0; border-left: 0; }
.cc-meta dt { font-family: var(--pr-font-label); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--v-faint); }
.cc-meta dd { font-size: 1rem; color: var(--pr-ink); }
.cc-meta code { font-family: var(--pr-font-code); font-size: 0.86rem; letter-spacing: 0.02em; }

/* the seal: sigil + the mascot in its portal */
.cc-photo, .cc-stamp { display: none; }
.cc-seal { color: var(--pr-glow); animation: pr-float 11s ease-in-out infinite; }
.cc-seal::before, .cc-seal::after {
  content: ""; position: absolute; inset: 23.3%; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--pr-glow); opacity: 0;
  animation: pr-pulse 5.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.cc-seal::after { animation-delay: 2.6s; }
.cc-sigil__halo { transform-origin: 300px 300px; animation: pr-breathe 6s ease-in-out infinite; }
.cc-sigil__line { fill: none; stroke: var(--pr-gold); stroke-opacity: 0.5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cc-sigil__line--outer { stroke-opacity: 0.3; }
.cc-sigil__ticks { fill: none; stroke: var(--pr-gold); stroke-opacity: 0.5; stroke-width: 8; stroke-dasharray: 0.3 4.7; }
.cc-sigil__ticks--major { stroke-width: 18; stroke-opacity: 0.85; stroke-dasharray: 0.55 29.45; }
.cc-sigil__dial { transform-origin: 300px 300px; animation: pr-spin 220s linear infinite; }
.cc-sigil__words { transform-origin: 300px 300px; animation: pr-spin 160s linear infinite reverse; }
.cc-sigil__text { font-family: var(--pr-font-label); font-size: 14.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--pr-gold); }
.cc-sigil__star { transform-origin: 300px 300px; animation: pr-spin 300s linear infinite; }
.cc-sigil__gram { fill: none; stroke: var(--pr-gold); stroke-width: 1; stroke-opacity: 0.3; vector-effect: non-scaling-stroke; }
.cc-sigil__gram--wide { stroke-opacity: 0.2; }
.cc-sigil__gram--star { stroke: var(--pr-glow); stroke-opacity: 0.75; filter: drop-shadow(0 0 5px var(--pr-glow)); }
.cc-sigil__nodes circle { fill: var(--v-bg); stroke: var(--pr-gold); stroke-width: 1.4; }
.cc-sigil__orbit { transform-origin: 300px 300px; animation: pr-spin 70s linear infinite; }
.cc-sigil__orbit--2 { animation-duration: 104s; animation-direction: reverse; }
.cc-sigil__line--orbit { stroke-opacity: 0.32; stroke-dasharray: 2 5; }
.cc-sigil__planet { fill: var(--pr-glow); filter: drop-shadow(0 0 7px var(--pr-glow)); }
.cc-sigil__planet--2 { fill: var(--pr-gold); filter: drop-shadow(0 0 6px var(--pr-gold)); }
.cc-sigil__line--portal { stroke: var(--pr-glow); stroke-opacity: 0.95; stroke-width: 1.5; filter: drop-shadow(0 0 7px var(--pr-glow)); }
.cc-sigil__line--portal-in { stroke-opacity: 0.55; }
/* the rings and the star draw themselves in once (pathLength="1" in the markup) */
.cc-sigil__line[pathLength="1"], .cc-sigil__gram { stroke-dasharray: 1; animation: pr-draw 1.25s var(--v-ease) both; }
.cc-sigil__gram { animation-duration: 1.4s; animation-delay: 0.1s; }
.cc-sigil__ticks, .cc-sigil__nodes, .cc-sigil__planet, .cc-sigil__text { animation: pr-appear 1.2s ease-out both; }

.cc-hero__media {
  position: absolute; inset: 23.3%; z-index: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--v-surface);
  box-shadow: 0 0 70px -4px color-mix(in srgb, var(--wl-accent) 62%, transparent), inset 0 0 0 1px rgb(0 0 0 / 0.5);
}
.cc-hero__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; animation: none; }
.cc-hero__media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 56%, rgb(3 4 9 / 0.55) 100%); }
/* no art delivered: the sigil stands alone, its centre a quiet glow */
.cc-no-art .cc-seal::before, .cc-no-art .cc-seal::after { display: none; }
.cc-no-art .cc-sigil__gram--star { stroke-opacity: 0.45; }

/* ------------------------------------------------------------ the band */
.cc-band {
  padding: 17px 0; border-block: 1px solid var(--v-line);
  background: rgb(3 4 9 / 0.66);
  font-family: var(--pr-font-label); font-size: 0.76rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--pr-gold);
}
.cc-band .wl-marquee__item { display: inline-flex; align-items: center; padding: 0; }
.cc-band .wl-marquee__item::after { content: ""; width: 9px; height: 9px; margin: 0 3.2em; background: var(--pr-glow); clip-path: var(--pr-star); }

/* ------------------------------------------------------------ sections */
.cc-flow { counter-reset: pr-sec; }
.wl-sec { counter-increment: pr-sec; }
.wl-sec::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px;
  height: calc(var(--v-sec-gap) - 40px);
  background: linear-gradient(to bottom, transparent, var(--pr-gold-soft));
}
.wl-sec__head { display: flex; flex-direction: column; align-items: center; margin: 0 auto clamp(40px, 5vw, 68px); text-align: center; }
.wl-sec__head::before { content: ""; width: 15px; height: 15px; margin-bottom: 24px; background: var(--pr-gold); clip-path: var(--pr-star); filter: drop-shadow(0 0 8px var(--pr-gold)); }
.wl-kicker { justify-content: center; align-items: baseline; gap: 0.9em; margin-bottom: 1.35em; font-size: 0.7rem; letter-spacing: 0.36em; color: var(--pr-gold); }
.wl-kicker .wl-ord { font-size: 0; opacity: 1; }
.wl-kicker .wl-ord::before { content: counter(pr-sec, upper-roman); font-family: var(--v-font-display); font-size: 1rem; letter-spacing: 0.12em; color: var(--pr-glow); }
.wl-kicker::before, .wl-kicker::after { content: ""; align-self: center; width: clamp(28px, 6vw, 64px); height: 1px; background: linear-gradient(to right, transparent, var(--pr-gold-soft)); }
.wl-kicker::after { background: linear-gradient(to left, transparent, var(--pr-gold-soft)); }
.wl-sec__title { color: var(--pr-ink); }

/* lore: the first transmission, set like scripture */
.wl-lore { margin: 0 auto; max-width: 42rem; }
.wl-lore__lead { margin-bottom: 1.5em; text-align: center; font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.72rem); line-height: 1.55; color: var(--pr-ink); }
.wl-lore__p { max-width: none; font-size: 1.1rem; line-height: 1.85; color: var(--v-soft); }
/* an engraved initial in a hairline box: a narrow letter still reads as intended */
.wl-lore__lead + .wl-lore__p::first-letter {
  float: left; margin: 0.34em 0.62em 0 0; padding: 0.16em 0.32em 0.12em;
  border: 1px solid var(--v-line-strong);
  box-shadow: 0 0 0 4px var(--v-bg), 0 0 0 5px var(--pr-gold-faint);
  font-family: var(--v-font-display); font-size: 2.7em; line-height: 1; color: var(--pr-gold);
}
.wl-lore::after { content: "\2726\2003\2726\2003\2726"; display: block; margin-top: 1.8em; text-align: center; font-size: 0.78rem; color: var(--pr-gold-soft); }

/* the commandments, over a faint watermark of the seal's heptagram */
.wl-sec--facts .wl-sec__inner { position: relative; isolation: isolate; }
.wl-sec--facts .wl-sec__inner::after {
  --wm: min(760px, 120vw);
  /* centred by margins, not a transform: it turns about its own centre */
  content: ""; position: absolute; left: 50%; top: 56%; z-index: -1;
  width: var(--wm); height: var(--wm); margin: calc(var(--wm) / -2) 0 0 calc(var(--wm) / -2); pointer-events: none;
  background: var(--pr-gold); opacity: 0.09;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='300' cy='300' r='296'/%3E%3Ccircle cx='300' cy='300' r='240'/%3E%3Cpath d='M300 64 L402.4 512.6 L115.5 152.9 L530.1 352.5 L197.6 512.6 L484.5 152.9 L69.9 352.5 Z'/%3E%3Cpath d='M300 64 L484.5 152.9 L530.1 352.5 L402.4 512.6 L197.6 512.6 L69.9 352.5 L115.5 152.9 Z'/%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='300' cy='300' r='296'/%3E%3Ccircle cx='300' cy='300' r='240'/%3E%3Cpath d='M300 64 L402.4 512.6 L115.5 152.9 L530.1 352.5 L197.6 512.6 L484.5 152.9 L69.9 352.5 Z'/%3E%3Cpath d='M300 64 L484.5 152.9 L530.1 352.5 L402.4 512.6 L197.6 512.6 L69.9 352.5 L115.5 152.9 Z'/%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: pr-turn 360s linear infinite;
}
.wl-facts { counter-reset: pr-cmd; max-width: 50rem; margin: 0 auto; gap: 0; }
.wl-fact {
  counter-increment: pr-cmd;
  grid-template-columns: minmax(78px, 7rem) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 32px) 0;
  background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--v-line);
  font-size: clamp(1.1rem, 1.6vw, 1.36rem); line-height: 1.5; color: var(--pr-ink);
}
.wl-fact:first-child { border-top: 1px solid var(--v-line); }
.wl-fact__mark {
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  text-align: right; color: var(--pr-gold);
  font-family: var(--v-font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; letter-spacing: 0.04em;
}
.wl-fact__mark .wl-glyph { display: none; }
.wl-fact__mark::before { content: counter(pr-cmd, upper-roman); }

/* the offering: an astrolabe */
.wl-graphic--supply { gap: clamp(32px, 6vw, 88px); }
.wl-donut__chart {
  width: min(100%, 400px);
  background: radial-gradient(circle, transparent 0 27%, var(--pr-gold-faint) 27% calc(27% + 1px), transparent calc(27% + 1px));
}
.wl-donut__track { stroke: rgb(255 255 255 / 0.05); stroke-width: 12; }
.wl-donut__seg { stroke-width: 12; }
.wl-donut__svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--wl-accent) 38%, transparent)); }
.wl-donut__ticks line { stroke: var(--pr-gold); stroke-opacity: 0.5; stroke-width: 1; }
.wl-donut__value { font-weight: 400; letter-spacing: 0.06em; color: var(--pr-ink); }
.wl-donut__label, .wl-ring__label, .wl-stat__label { letter-spacing: 0.28em; color: var(--pr-gold); }
.wl-legend__item { border-bottom-color: var(--v-line); font-size: 1.05rem; }
.wl-legend__swatch { border-radius: 50%; box-shadow: 0 0 10px -1px var(--v-seg-1); }
.wl-legend__value { font-family: var(--v-font-display); font-weight: 400; letter-spacing: 0.06em; color: var(--pr-gold); }
.wl-ring__track { stroke: rgb(255 255 255 / 0.05); }
.wl-ring__fill { filter: drop-shadow(0 0 6px var(--pr-glow)); }
.wl-ring__value { font-weight: 400; letter-spacing: 0.04em; }
.wl-stats { gap: 0; background: none; border: 0; border-block: 1px solid var(--v-line); border-radius: 0; }
.wl-stat { background: none; align-items: center; text-align: center; border-left: 1px solid var(--v-line); padding: 28px 20px; }
.wl-stat:first-child { border-left: 0; }
.wl-stat__value { font-weight: 400; letter-spacing: 0.06em; color: var(--pr-ink); }
.wl-caption { text-align: center; font-style: italic; color: var(--v-faint); }

/* the chronicle: stars along a meridian, the rites on either side */
.wl-milestones { max-width: 64rem; margin: 0 auto; gap: 22px; }
.wl-milestones::before { left: 50%; margin-left: -0.5px; width: 1px; background: linear-gradient(to bottom, transparent, var(--pr-gold-soft) 8%, var(--pr-gold-soft) 92%, transparent); }
.wl-ms { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); align-items: center; }
.wl-ms__dot { grid-column: 2; grid-row: 1; background: none; overflow: visible; }
.wl-ms__ring { fill: var(--v-bg); stroke: var(--pr-gold); stroke-width: 1.2; }
.wl-ms__core { fill: var(--pr-glow); filter: drop-shadow(0 0 5px var(--pr-glow)); }
.wl-ms__body { grid-column: 3; grid-row: 1; padding: 24px 28px; border: 1px solid var(--v-line); background: var(--v-card-bg); }
.wl-ms:nth-child(even) .wl-ms__body { grid-column: 1; text-align: right; }
.wl-ms__when { margin-bottom: 8px; font-size: 0.68rem; letter-spacing: 0.28em; color: var(--pr-gold); }
.wl-ms__title { font-weight: 400; font-size: 1.28rem; letter-spacing: 0.1em; text-transform: uppercase; }
.wl-ms__text { font-style: italic; color: var(--v-soft); }

/* visions: seen through the eyepiece */
.wl-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(32px, 4.5vw, 64px) clamp(28px, 4vw, 56px); counter-reset: pr-plate; }
.wl-shot { counter-increment: pr-plate; flex: 0 1 300px; overflow: visible; border-radius: 0; background: none; text-align: center; }
.wl-shot img {
  height: auto; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--pr-gold-soft), 0 0 0 11px var(--v-bg), 0 0 0 12px var(--pr-gold-faint), 0 0 70px -10px color-mix(in srgb, var(--wl-accent) 50%, transparent);
}
.wl-shot::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    linear-gradient(var(--pr-gold-faint), var(--pr-gold-faint)) center / 1px 100% no-repeat,
    linear-gradient(var(--pr-gold-faint), var(--pr-gold-faint)) center / 100% 1px no-repeat,
    radial-gradient(circle, transparent 0 21%, var(--pr-gold-faint) 21% calc(21% + 1px), transparent calc(21% + 1px) 60%, rgb(3 4 9 / 0.5) 100%);
}
.wl-shot__caption { position: static; margin-top: 30px; padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--v-soft); font-style: italic; font-size: 1.04rem; }
.wl-shot__caption::before { content: "Plate " counter(pr-plate, upper-roman); display: block; margin-bottom: 8px; font-family: var(--pr-font-label); font-style: normal; font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--pr-gold); }

/* witnesses: one constellation through every testimony */
.wl-quotes { position: relative; gap: clamp(20px, 2.4vw, 32px); padding-top: 46px; }
.wl-quotes::before { content: ""; position: absolute; top: 20px; left: 14%; right: 14%; height: 1px; background: repeating-linear-gradient(to right, var(--pr-gold-soft) 0 5px, transparent 5px 11px); }
.wl-quote {
  display: flex; flex-direction: column; justify-content: center;
  padding: 50px 34px 38px; text-align: center;
  background: var(--v-card-bg); border: 1px solid var(--v-line); border-radius: 3px;
  box-shadow: inset 0 0 0 6px var(--v-bg), inset 0 0 0 7px var(--pr-gold-faint);
}
.wl-quote::before { content: ""; top: -33px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%); background: var(--pr-gold); clip-path: var(--pr-star); filter: drop-shadow(0 0 8px var(--pr-gold)); }
.wl-quote__text { font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.24rem); line-height: 1.58; color: var(--pr-ink); }
.wl-quote__who { font-family: var(--pr-font-label); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pr-gold); }
.wl-quote__who a { color: var(--pr-gold); }

/* the catechism */
.wl-faq { max-width: 48rem; margin: 0 auto; gap: 0; }
.wl-qa { border: 0; border-radius: 0; border-bottom: 1px solid var(--v-line); background: none; }
.wl-qa:first-child { border-top: 1px solid var(--v-line); }
.wl-qa__q { padding: 26px 4px; font-family: var(--v-font-display); font-weight: 400; font-size: clamp(0.98rem, 1.35vw, 1.14rem); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; }
.wl-qa__q:hover { color: var(--pr-gold); }
.wl-qa__sign { width: 14px; height: 14px; }
.wl-qa__sign::before, .wl-qa__sign::after { height: 1px; background: var(--pr-gold); }
.wl-qa__a { padding: 0 44px 28px 4px; font-style: italic; font-size: 1.1rem; line-height: 1.72; }

/* initiation: the address at the centre of the rings */
.wl-sec--access .wl-sec__inner { position: relative; isolation: isolate; }
.wl-sec--access .wl-sec__inner::after {
  content: ""; position: absolute; left: 50%; top: 62%; z-index: -1;
  width: min(820px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 47px, var(--pr-gold-faint) 47px 48px);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 58%);
  mask-image: radial-gradient(circle, #000 10%, transparent 58%);
}
.wl-access { max-width: 46rem; margin: 0 auto; justify-items: center; text-align: center; }
.wl-access__net { color: var(--pr-gold); letter-spacing: 0.32em; }
.wl-ca {
  width: 100%; padding: 10px 10px 10px 28px;
  border: 1px solid var(--v-line-strong); border-radius: 999px;
  background: rgb(3 4 9 / 0.72);
  box-shadow: 0 0 70px -24px var(--pr-glow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: left;
}
.wl-ca__label { color: var(--pr-gold); letter-spacing: 0.3em; }
.wl-ca__value { font-family: var(--pr-font-code); font-size: clamp(0.76rem, 1.35vw, 0.96rem); color: var(--pr-ink); }
.wl-copy, .wl-copy.wl-btn {
  border-radius: 999px; padding: 14px 22px;
  background: var(--pr-glow); color: var(--wl-on-accent);
  font-family: var(--pr-font-label); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  box-shadow: 0 0 34px -8px var(--pr-glow);
}
.wl-links { justify-content: center; }
.wl-link {
  border: 1px solid var(--v-line-strong); background: rgb(3 4 9 / 0.5);
  font-family: var(--pr-font-label); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.wl-link:hover { border-color: var(--pr-gold); color: var(--pr-gold); }

/* sacraments (features), the ritual (flow), the signal (post) */
.wl-feature { padding: 44px 28px 34px; text-align: center; background: var(--v-card-bg); border: 1px solid var(--v-line); border-radius: 3px; }
.wl-feature:hover { border-color: var(--v-line-strong); box-shadow: 0 0 60px -26px var(--pr-glow); }
.wl-feature .wl-ord { top: 16px; left: 50%; right: auto; transform: translateX(-50%); color: var(--pr-gold); letter-spacing: 0.3em; }
.wl-feature__icon { width: 92px; height: 92px; margin: 0 auto 26px; border-radius: 50%; background: none; color: var(--pr-gold); box-shadow: 0 0 0 1px var(--pr-gold-soft), 0 0 0 7px var(--v-bg), 0 0 0 8px var(--pr-gold-faint); }
.wl-feature__title { font-weight: 400; font-size: 1.12rem; letter-spacing: 0.12em; text-transform: uppercase; }
.wl-feature__text { font-style: italic; }
.wl-node__card { background: var(--v-card-bg); border-color: var(--v-line); border-radius: 3px; }
.wl-node__card .wl-ord { background: none; color: var(--pr-gold); box-shadow: 0 0 0 1px var(--pr-gold-soft); }
.wl-node__title { font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.15rem; }
.wl-edge__line, .wl-edge__head { stroke: var(--pr-gold); }
.wl-post { margin: 0 auto; background: rgb(3 4 9 / 0.72); border-color: var(--v-line-strong); border-radius: 4px; box-shadow: 0 0 80px -30px var(--pr-glow); }
.wl-post__text { font-style: italic; }
.wl-table-wrap { border-color: var(--v-line); border-radius: 3px; }
.wl-table thead th { letter-spacing: 0.26em; color: var(--pr-gold); }
.wl-bar__label { font-weight: 400; }
.wl-bar__track { height: 6px; border-radius: 0; }
.wl-bar__bg { fill: rgb(255 255 255 / 0.06); }
.wl-bar__fill { filter: drop-shadow(0 0 4px var(--pr-glow)); }
.wl-bar__value { font-family: var(--v-font-display); font-weight: 400; }

/* ------------------------------------------------------------ footer */
.cc-footer { margin-top: 20px; padding-top: 56px; border-top: 1px solid var(--v-line); text-align: center; }
.cc-footer::before { content: ""; position: absolute; left: 50%; top: -8px; width: 15px; height: 15px; margin-left: -7.5px; background: var(--pr-gold); clip-path: var(--pr-star); }
.wl-foot { flex-direction: column; justify-content: center; gap: 18px; }
.wl-foot__name { font-weight: 400; font-size: 1.25rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pr-ink); }
.wl-foot__net { font-family: var(--pr-font-label); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.68rem; color: var(--pr-gold); }
.wl-foot .wl-links { margin: 0; }
.wl-foot__nfa { font-style: italic; }

/* ------------------------------------------------------------ motion */
@keyframes pr-spin { to { transform: rotate(360deg); } }
@keyframes pr-turn { to { rotate: 360deg; } }
@keyframes pr-breathe { 50% { opacity: 0.55; transform: scale(0.96); } }
@keyframes pr-pulse { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.82); opacity: 0; } }
@keyframes pr-float { 50% { transform: translateY(-10px); } }
@keyframes pr-twinkle { 50% { opacity: 0.25; } }
@keyframes pr-beacon { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--pr-glow); } }
@keyframes pr-draw { from { stroke-dashoffset: 1; } }
@keyframes pr-appear { from { opacity: 0; } }
@keyframes pr-resolve { from { opacity: 0; filter: blur(12px); transform: translateY(0.1em) scale(1.08); } }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 900px) {
  :root { --cc-seal: min(100%, 470px); --cc-hero-row-gap: 26px; }
  .cc-hero { padding-bottom: calc(var(--cc-hero-pad-y) + 72px); }
  .cc-hero__lead, .cc-hero__aside { text-align: center; }
  .cc-hero__kicker { justify-content: center; }
  .cc-hero__kicker::after { display: none; }
  .cc-hero__subhead { margin-inline: auto; }
  .cc-hero__cta, .cc-meta { justify-content: center; }
  .cc-hero__headline { font-size: clamp(2rem, min(8.4vw, calc(5.6rem - var(--cc-hl-n, 24) * 0.08rem)), 4rem); }
  .cc-hero__sky::before { left: 50%; top: 24%; }
}
@media (max-width: 760px) {
  .wl-milestones { max-width: 36rem; }
  .wl-milestones::before { left: 13px; margin-left: 0; }
  .wl-ms { grid-template-columns: 28px minmax(0, 1fr); column-gap: 20px; }
  .wl-ms__dot { grid-column: 1; }
  .wl-ms__body, .wl-ms:nth-child(even) .wl-ms__body { grid-column: 2; text-align: left; padding: 20px 22px; }
  .wl-quotes::before { display: none; }
  .wl-quote { margin-top: 12px; }
  .wl-fact { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .wl-stat { border-left: 0; border-top: 1px solid var(--v-line); }
  .wl-stat:first-child { border-top: 0; }
  .wl-ca { border-radius: 26px; padding: 16px 12px 12px 20px; }
  .wl-qa__a { padding-right: 4px; }
}
@media (max-width: 480px) {
  :root { --cc-seal: min(100%, 360px); }
  .cc-top__net { display: none; }
  .cc-brand__name { font-size: 0.92rem; letter-spacing: 0.18em; }
  .cc-meta__row { padding: 0 14px; }
  .wl-lore__p { text-align: left; }
}