/* JJ Lux: the descent. Page styles. The engine's own selectors are left alone. */

@font-face {
  font-family: "Bebas Neue";
  src: url("/fonts/bebas-neue-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --sc-canvas:     #05080d;
  --sc-surface:    #0c141c;
  --sc-ink:        #f2eee5;
  --sc-ink-soft:   #b4c0c4;
  --sc-accent:     #f0864a;
  --sc-accent-ink: #0b0705;
  --sc-font-display: "Bebas Neue", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "DM Sans", system-ui, sans-serif;
  --dx-serif: "Cormorant Garamond", Georgia, serif;
  color-scheme: dark;
}

body { font-weight: 400; }

/* ------------------------------------------------------------- chrome -- */
.dx-skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm);
  background: var(--sc-ink); color: var(--sc-canvas);
  transform: translateY(-300%);
}
.dx-skip:focus-visible { transform: none; }

.dx-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: clamp(0.9rem, 2.2vh, 1.6rem) var(--sc-gutter);
  pointer-events: none;
}
.dx-bar > * { pointer-events: auto; }
.dx-brand {
  font-family: var(--sc-font-display); font-size: 1.9rem; line-height: 1;
  letter-spacing: 0.02em; text-decoration: none; color: var(--sc-ink);
  display: inline-flex; align-items: baseline; gap: 0.12em;
}
.dx-brand span { color: var(--sc-accent); }
.dx-brand i {
  width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--sc-accent);
  display: inline-block; margin-left: 0.08em;
}
.dx-gauge {
  margin: 0 0 0 auto; display: flex; gap: var(--sc-3); align-items: baseline;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 0.75em 1.1em; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
}
.dx-gauge #dx-zone { color: var(--sc-ink); }
.dx-gauge #dx-read { min-width: 9.5ch; text-align: right; }

.dx-talk, .dx-cta {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--sc-font-text); font-weight: 400; line-height: 1;
  border-radius: var(--sc-r-pill);
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              background-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.dx-talk {
  font-size: var(--sc-t-sm); padding: 0.7em 1.15em; min-height: 44px;
  background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
}
.dx-cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--sc-t-base); padding: 0.95em 1.5em; min-height: 48px;
  background: var(--sc-accent); color: var(--sc-accent-ink); white-space: nowrap;
}
.dx-talk:active, .dx-cta:active { transform: scale(0.97); }
.dx-cta[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .dx-talk:hover { background: var(--sc-ink); color: var(--sc-canvas); }
  .dx-cta:hover { background: var(--sc-ink); }
}

/* The route rail: the thread, as navigation. Six dots on one line that fills
   as the page falls. */
.dx-rail {
  position: fixed; z-index: var(--sc-z-chrome);
  right: clamp(0.35rem, 1.4vw, 1.4rem); top: 50%; translate: 0 -50%;
}
.dx-rail ol {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: flex; flex-direction: column;
}
.dx-rail ol::before, .dx-rail ol::after {
  content: ""; position: absolute; right: 21.5px; top: 22px; bottom: 22px; width: 1px;
  background: var(--sc-hairline-strong);
}
.dx-rail ol::after {
  background: var(--sc-accent); transform-origin: 50% 0;
  transform: scaleY(min(1, calc((var(--sc-seg, 0) + var(--sc-segp, 0)) / 5)));
}
.dx-rail a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  width: 44px; height: clamp(44px, 7.4vh, 64px); text-decoration: none;
}
.dx-rail a::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 18.5px;
  background: var(--sc-canvas); box-shadow: 0 0 0 1px var(--sc-ink-soft);
  transition: transform var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out);
}
.dx-rail a.is-passed::after { background: var(--sc-accent); box-shadow: 0 0 0 1px var(--sc-accent); }
.dx-rail a[aria-current="true"]::after { background: var(--sc-accent); box-shadow: 0 0 0 1px var(--sc-accent); transform: scale(1.7); }
.dx-rail a span {
  position: absolute; right: 44px; white-space: nowrap;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink); padding: 0.35em 0.7em; border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.dx-rail a:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .dx-rail a:hover span { opacity: 1; transform: none; }
  .dx-rail a:hover::after { transform: scale(1.7); }
}

/* -------------------------------------------------------------- world -- */
.dx-world picture { position: absolute; inset: 0; }
.dx-world picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.dx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 200;
  opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.dx-canvas.is-live { opacity: 1; }

/* Scrims sit where the copy sits and nowhere else. They are siblings of the
   copy, never children, so the contrast pass measures them. */
.dx-scrim { opacity: 0; will-change: opacity; }
.dx-scrim--lead {
  background: radial-gradient(120% 95% at 0% 100%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 58%,
    transparent 78%);
}
.dx-scrim--trail {
  background: radial-gradient(120% 95% at 100% 100%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 58%,
    transparent 78%);
}
.dx-scrim--center {
  background: radial-gradient(70% 62% at 50% 52%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 55%,
    transparent 100%);
}

/* --------------------------------------------------------------- copy -- */
.dx-block { max-width: min(47rem, 66vw); }
.dx-block > * + * { margin-top: var(--sc-4); }
.dx-block > .dx-display + * { margin-top: var(--sc-5); }
.dx-block > .dx-cta, .dx-block > .dx-actions { margin-top: var(--sc-6); }

.dx-display {
  font-family: var(--sc-font-display); font-weight: 400; margin: 0;
  line-height: 0.92; letter-spacing: 0.006em; text-transform: uppercase;
  text-wrap: balance; color: var(--sc-ink);
}
.dx-display em {
  font-family: var(--dx-serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -0.012em; color: var(--sc-accent);
  line-height: 1; font-size: 0.92em;
}
.dx-display--xl { font-size: clamp(2.9rem, 1.2rem + 7.4vw, 7rem); }
.dx-display--lg { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.6rem); }
.dx-display--md { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); line-height: 0.98; }

.dx-lede {
  margin: 0; max-width: 44ch; color: var(--sc-ink);
  font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: 0; text-wrap: pretty;
}
.dx-block.sc-copy--trail .dx-lede, .dx-block.sc-copy--trail .dx-path { margin-left: auto; }
.dx-tags, .dx-path {
  margin-bottom: 0; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.dx-path { display: flex; align-items: center; gap: var(--sc-3); width: fit-content; color: var(--sc-ink); }
.dx-path i { width: 2.4rem; height: 1px; background: var(--sc-accent); display: block; }

.dx-close { max-width: min(46rem, 86vw); width: 100%; top: 43%; }
.dx-close .dx-lede { margin-inline: auto; }
.dx-actions { display: flex; flex-wrap: wrap; gap: var(--sc-5); align-items: center; justify-content: center; margin-bottom: 0; }
.dx-link { color: var(--sc-ink); min-height: 44px; display: inline-flex; align-items: center; }
.dx-foot {
  margin-top: var(--sc-8); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); justify-content: center; align-items: center;
}
.dx-foot p { margin: 0; display: flex; gap: var(--sc-5); align-items: center; }
.dx-foot a { min-height: 44px; display: inline-flex; align-items: center; }

/* -------------------------------------------------------------- dialog -- */
.dx-dialog {
  border: 0; padding: 0; margin: auto; color: var(--sc-ink);
  width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  background: var(--sc-surface); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3), var(--sc-edge); overflow: auto;
}
.dx-dialog::backdrop { background: color-mix(in oklab, var(--sc-canvas) 72%, transparent); }
.dx-sheet { padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; }
.dx-sheet > * + * { margin-top: var(--sc-4); }
.dx-x {
  position: absolute; top: var(--sc-4); right: var(--sc-4); margin: 0;
  appearance: none; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.dx-dialog form { display: grid; gap: var(--sc-4); margin-top: var(--sc-5); }
.dx-pair { display: grid; gap: var(--sc-4); grid-template-columns: 1fr 1fr; }
.dx-dialog label { display: block; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-bottom: var(--sc-2); }
.dx-dialog input, .dx-dialog textarea {
  width: 100%; padding: 0.8em 0.9em; min-height: 48px; border-radius: var(--sc-r-sm);
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-canvas); color: var(--sc-ink);
}
.dx-dialog textarea { resize: vertical; }
.dx-dialog [aria-invalid="true"] { border-color: var(--sc-accent); }
.dx-err { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-accent); }
.dx-err:empty { display: none; }
.dx-banner, .dx-done { padding: var(--sc-3) var(--sc-4); border-radius: var(--sc-r-sm); background: var(--sc-canvas); }
.dx-done { color: var(--sc-ink); }
.dx-hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.dx-privacy { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.dx-dialog .dx-cta { justify-self: start; }
[hidden] { display: none !important; }

/* -------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .dx-block { max-width: none; padding-right: 2.2rem; }
  .dx-block.sc-copy--trail .dx-lede, .dx-block.sc-copy--trail .dx-path { margin-left: 0; }
  .dx-lede { font-size: var(--sc-t-base); }
  .dx-scrim--lead, .dx-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 52%,
      transparent 70%);
  }
  .dx-close { padding-right: 0; inset-inline: auto; left: 50%; width: calc(100vw - 2 * var(--sc-gutter) - 1.6rem); max-width: none; }
  .dx-close .dx-display--lg { font-size: clamp(2.1rem, 1rem + 5vw, 3.4rem); }
  .dx-close { top: 39%; }
  .dx-close .dx-foot { margin-top: var(--sc-5); }
  .dx-foot { margin-top: var(--sc-6); }
}
@media (max-width: 560px) {
  .dx-brand { font-size: 1.6rem; }
  .dx-gauge #dx-zone { display: none; }
  .dx-pair { grid-template-columns: 1fr; }
  .dx-rail a { height: 44px; }
}
@media (max-height: 700px) {
  .sc-copy--lead, .sc-copy--trail { bottom: clamp(1.5rem, 6vh, 3rem); }
  .dx-block > * + * { margin-top: var(--sc-3); }
}

/* Poster capture: the world alone. */
.dx-capture .dx-bar, .dx-capture .dx-rail, .dx-capture [data-sc-world-copy], .dx-capture .dx-skip { display: none; }

/* No WebGL, or reduced motion: the posters are the film. */
.dx-nogl .dx-canvas { display: none; }

/* Short phones: the close has to fit one screen with the bar above it. */
@media (max-width: 860px) and (max-height: 700px) {
  .dx-close { top: 53%; }
  .dx-close .dx-display--lg { font-size: 2rem; }
  .dx-close > .dx-actions { margin-top: var(--sc-4); gap: var(--sc-2) var(--sc-4); }
  .dx-close .dx-foot { margin-top: var(--sc-2); gap: 0 var(--sc-4); }
}
@media (max-width: 860px) and (max-height: 600px) {
  .dx-close .dx-lede { display: none; }
  .dx-close .dx-display--lg { font-size: 1.8rem; }
}
.dx-talk { white-space: nowrap; }
@media (max-width: 360px) {
  .dx-bar { gap: var(--sc-3); }
  .dx-gauge { padding: 0.6em 0.8em; letter-spacing: 0.04em; }
  .dx-talk { padding: 0.7em 0.9em; }
}