:root {
  --crux-black: #030303;
  --crux-charcoal: #111214;
  --crux-stone: #27292d;
  --crux-ash: #d7d3ca;
  --crux-muted: #a7a39b;
  --crux-red: #c80909;
  --crux-ember: #ff6a00;
  --crux-focus: #ffd27a;
}

html { color-scheme: dark; }

.crux-body {
  margin: 0;
  min-width: 320px;
  color: var(--crux-ash);
  background: var(--crux-black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.crux-skip-link {
  position: fixed;
  z-index: 1100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: #000;
  background: var(--crux-focus);
  border-radius: .35rem;
  transform: translateY(-160%);
}

.crux-skip-link:focus { transform: translateY(0); }

.crux-header { position: relative; }

.crux-mobile-nav {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  min-height: 72px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .36) 58%, transparent);
  border-bottom: 0;
}

.crux-mobile-nav .container-xxl {
  max-width: none;
  padding: clamp(5.75rem, 8.5vw, 7.5rem) clamp(.85rem, 4vw, 4.5rem) clamp(.75rem, 2vw, 1.5rem);
}

.crux-mobile-nav .navbar-brand img {
  display: block;
  width: clamp(190px, 26vw, 360px);
  height: auto;
  filter: drop-shadow(0 .35rem .55rem rgba(0, 0, 0, .95));
}

.crux-mobile-nav .navbar-toggler {
  position: relative;
  z-index: 2;
  min-width: 48px;
  min-height: 48px;
  border-color: rgba(255, 255, 255, .5);
}

.crux-mobile-nav .navbar-brand,
.crux-mobile-nav .navbar-collapse {
  position: relative;
  z-index: 2;
}

.crux-mobile-nav .nav-link {
  min-height: 48px;
  color: var(--crux-ash);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .06em;
}

.crux-mobile-nav .nav-link:hover,
.crux-mobile-nav .nav-link:focus-visible { color: var(--crux-focus); }

.crux-body :where(a, button, .btn):focus-visible {
  outline: 3px solid var(--crux-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .88);
}

.crux-hero {
  position: relative;
  display: grid;
  grid-template: "scene" 1fr / minmax(0, 1fr);
  isolation: isolate;
  min-height: clamp(540px, 64vw, 860px);
  overflow: hidden;
  background-color: #020202;
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, #080808, #7d0909, #ff6a00, #7d0909, #080808) 1;
}

.crux-scene-layer {
  position: relative;
  grid-area: scene;
  min-width: 0;
  min-height: 0;
}

.crux-sky-layer {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 68% 17%, rgba(115, 129, 150, .5), transparent 23%),
    radial-gradient(ellipse at 31% 25%, rgba(72, 82, 97, .58), transparent 28%),
    linear-gradient(180deg, #313844 0%, #1b222c 48%, #080b10 100%);
}

.crux-sky-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse var(--storm-radius-x, 42%) var(--storm-radius-y, 48%) at var(--storm-x, 68%) var(--storm-y, 16%), rgba(238, 247, 255, .98), rgba(150, 188, 229, .42) 19%, transparent 48%),
    radial-gradient(ellipse 68% 72% at var(--storm-x, 68%) var(--storm-y, 16%), rgba(204, 224, 248, .48), transparent 70%);
  pointer-events: none;
}

.crux-lightning-bolt {
  position: absolute;
  top: var(--bolt-y, -3%);
  left: var(--bolt-x, 67%);
  width: clamp(44px, 6vw, 88px);
  height: var(--bolt-height, 56%);
  opacity: 0;
  background: linear-gradient(180deg, #fff 0%, #d9efff 55%, rgba(135, 187, 238, .35) 100%);
  clip-path: polygon(43% 0, 61% 0, 51% 34%, 71% 34%, 34% 100%, 45% 53%, 24% 53%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 15px rgba(158, 211, 255, .95));
  transform: translateX(-50%) rotate(var(--bolt-rotation, 5deg)) scale(var(--bolt-scale, 1));
  transform-origin: 50% 0;
  pointer-events: none;
}

.crux-lightning-bolt--one {
  --bolt-x: 67%;
  --bolt-rotation: 5deg;
}

.crux-lightning-bolt--two {
  --bolt-x: 24%;
  --bolt-height: 44%;
  --bolt-rotation: -7deg;
  --bolt-scale: .72;
}

.crux-tree-layer {
  z-index: 1;
  background-image: url('../img/forest-enhanced.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .82) 45%, #000 68%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .82) 45%, #000 68%);
}

.crux-ornament-layer {
  z-index: 3;
  pointer-events: none;
}

.crux-foreground-layer {
  z-index: 4;
  min-height: inherit;
}

.crux-hero.is-lightning-preview .crux-sky-flash { opacity: .86; }
.crux-hero.is-lightning-preview .crux-lightning-bolt--one { opacity: .92; }

.crux-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(180deg, transparent, #020202 80%);
  pointer-events: none;
}

.crux-corner {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.crux-corner--spider {
  top: 0;
  left: 0;
  width: clamp(132px, 15vw, 230px);
}

.crux-corner--bat {
  top: 0;
  right: 0;
  width: clamp(90px, 10.5vw, 160px);
  opacity: .78;
  filter: drop-shadow(0 .8rem 1.2rem rgba(0, 0, 0, .82));
}

.crux-guardian-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.crux-guardian-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10% -14% 0;
  background: radial-gradient(ellipse at 50% 57%, rgba(0, 0, 0, .94) 0 38%, rgba(0, 0, 0, .68) 54%, transparent 73%);
  pointer-events: none;
}

.crux-guardian {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: min(76vw, 790px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .95));
  transform: translateY(0);
}

.crux-candle-cluster {
  position: relative;
  z-index: 5;
  min-height: 220px;
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

.crux-sconce-rail {
  position: absolute;
  z-index: 1;
  right: auto;
  bottom: 1.25rem;
  left: 1.5rem;
  display: none;
  width: calc(100% - 3rem);
  height: auto;
  filter: drop-shadow(0 .85rem 1.1rem rgba(0, 0, 0, .9));
  pointer-events: none;
  user-select: none;
}

.crux-foreground-layer > .container-xxl {
  z-index: 2;
}

@media (min-width: 992px) {
  .crux-sconce-rail {
  display: block;
  }
}

.crux-candle-list {
  position: absolute;
  right: 0;
  bottom: clamp(4rem, 8vw, 7.5rem);
  left: 0;
  height: auto;
  aspect-ratio: 228 / 113;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crux-candle-slot {
  position: absolute;
  bottom: 0;
  left: var(--candle-x);
  width: 28%;
  height: 100%;
  transform: translateX(-50%);
}

.crux-candle-link {
  position: relative;
  display: block;
  height: 100%;
  color: var(--crux-muted);
  text-align: center;
  text-decoration: none;
  outline: 0;
}

.crux-flame {
  --flame-delay: 0s;
  --flame-duration: 1.35s;
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 50%;
  width: 12px;
  height: 28px;
  border-radius: 65% 35% 60% 40% / 78% 72% 28% 22%;
  background:
    radial-gradient(ellipse at 50% 72%, #fff4b0 0 13%, #ffb000 24%, #ff5300 55%, rgba(180, 0, 0, .2) 72%, transparent 74%);
  box-shadow: 0 0 12px 4px rgba(255, 82, 0, .34), 0 0 30px 8px rgba(255, 36, 0, .1);
  transform-origin: 50% 100%;
  animation: crux-flame-flicker var(--flame-duration) var(--flame-delay) infinite ease-in-out alternate;
  pointer-events: none;
}

.crux-candle-slot--outer .crux-flame { top: -4%; width: 8px; height: 19px; opacity: .5; }
.crux-candle-slot--middle .crux-flame { top: -3%; width: 10px; height: 24px; opacity: .76; }
.crux-candle-slot--inner .crux-flame { top: -6%; width: 13px; height: 31px; opacity: 1; }

@supports (width: 1cqw) {
  .crux-foreground-layer > .container-xxl { container-type: inline-size; }
  .crux-candle-cluster--left .crux-candle-slot--outer { --crux-wick-offset: 21.96cqw; }
  .crux-candle-cluster--left .crux-candle-slot--middle { --crux-wick-offset: 22.05cqw; }
  .crux-candle-cluster--left .crux-candle-slot--inner { --crux-wick-offset: 22.51cqw; }
  .crux-candle-cluster--right .crux-candle-slot--inner { --crux-wick-offset: 22.51cqw; }
  .crux-candle-cluster--right .crux-candle-slot--middle { --crux-wick-offset: 22.19cqw; }
  .crux-candle-cluster--right .crux-candle-slot--outer { --crux-wick-offset: 22.42cqw; }

  .crux-candle-slot .crux-flame {
    top: auto;
    bottom: calc(1.25rem + var(--crux-wick-offset) - clamp(4rem, 8vw, 7.5rem));
  }
}

@media (min-width: 1200px) {
  .crux-candle-cluster--left .crux-candle-slot--outer { left: 26.63%; }
  .crux-candle-cluster--left .crux-candle-slot--middle { left: 56.46%; }
  .crux-candle-cluster--left .crux-candle-slot--inner { left: 87.48%; }
  .crux-candle-cluster--right .crux-candle-slot--inner { left: 12.38%; }
  .crux-candle-cluster--right .crux-candle-slot--middle { left: 43.57%; }
  .crux-candle-cluster--right .crux-candle-slot--outer { left: 73.3%; }
}

.crux-nav-label {
  position: absolute;
  right: .2rem;
  bottom: clamp(1.25rem, 2vw, 2rem);
  left: .2rem;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.76rem, 1.05vw, 1rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px #000;
  white-space: nowrap;
}

.crux-candle-link:hover,
.crux-candle-link:focus-visible,
.crux-candle-link.is-current { color: #fff3cf; }

.crux-candle-link:hover .crux-flame,
.crux-candle-link:focus-visible .crux-flame,
.crux-candle-link.is-current .crux-flame {
  filter: brightness(1.45);
  box-shadow: 0 0 18px 7px rgba(255, 82, 0, .5), 0 0 42px 14px rgba(255, 36, 0, .18);
}

.crux-candle-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: .3rem;
  border: 2px solid var(--crux-focus);
  border-radius: .45rem;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .8);
}

.crux-main {
  min-height: 42vh;
  background-color: #080808;
  background-image:
    linear-gradient(rgba(4, 4, 4, .78), rgba(4, 4, 4, .86)),
    url('../img/masonry-enhanced.png');
  background-repeat: repeat;
  background-size: auto, min(720px, 100vw) auto;
}

.crux-content-panel {
  color: #e1ddd4;
  background: rgba(8, 8, 9, .9);
  border: 1px solid rgba(214, 72, 31, .38);
  border-radius: .5rem;
  box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, .45);
}

.crux-content-panel :where(h1, h2, h3, h4) {
  color: #fff2df;
  font-family: Georgia, "Times New Roman", serif;
}

.crux-content-panel a { color: #ffb46f; }
.crux-content-panel a:hover { color: #ffd7a9; }

.crux-content-panel .btn {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .625rem 1rem;
  border-width: 2px;
  font-weight: 600;
  transition: none;
}

.crux-content-panel .btn-outline-light {
  color: #fff;
  border-color: #fff;
}

.crux-content-panel .btn-outline-warning {
  color: var(--crux-focus);
  border-color: var(--crux-focus);
}

.crux-content-panel .btn.btn-outline-light:hover,
.crux-content-panel .btn.btn-outline-light:focus-visible,
.crux-content-panel .btn.btn-outline-warning:hover,
.crux-content-panel .btn.btn-outline-warning:focus-visible {
  color: #050505;
  background-color: var(--crux-focus);
  border-color: var(--crux-focus);
}

.crux-footer {
  color: #aaa69e;
  background: #020202;
  border-top: 1px solid rgba(200, 9, 9, .45);
}

.crux-footer-mark {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

@keyframes crux-flame-flicker {
  0% { transform: translateX(-50%) rotate(-2deg) scale(.96, 1.02); filter: brightness(.92); }
  35% { transform: translateX(-50%) rotate(2deg) scale(1.05, .95); filter: brightness(1.18); }
  68% { transform: translateX(-50%) rotate(-1deg) scale(.91, 1.08); filter: brightness(1.02); }
  100% { transform: translateX(-50%) rotate(3deg) scale(1.03, .98); filter: brightness(1.28); }
}

@media (max-width: 991.98px) {
  .crux-hero { min-height: clamp(500px, 115vw, 760px); }
  .crux-guardian { height: min(112vw, 700px); }
  .crux-corner--bat { width: clamp(75px, 17.5vw, 125px); opacity: .52; }
  .crux-mobile-nav .navbar-collapse {
    margin-top: .65rem;
    padding: .5rem 1rem .75rem;
    background: rgba(0, 0, 0, .92);
    border: 1px solid rgba(200, 9, 9, .4);
    border-radius: .4rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .65);
  }
}

@media (max-width: 575.98px) {
  .crux-corner--spider { width: 132px; }
  .crux-corner--bat { width: 83px; }
  .crux-content-panel { border-right: 0; border-left: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}