/* lumerre.org, "Lantern hill" (site4's mock, made real). The hero is painted key art: layers in
   one 1520x1400 box, moved by depth; the stars are a canvas so they can answer the pointer.
   The figure on the crest is the game's own player: a frame the game drew at the zoom each
   width needs (3, 7, 8, 9 or 12 screen pixels a sprite pixel), shown at one page pixel a pixel
   (two on the widest screens), so it is exactly what the game shows; the painting under it
   scales freely (--s). The hero is as tall as the window (within limits)
   and stands the figure's feet --b above its bottom edge, so the figure is always in view.
   The wordmark is the game's sprite at a whole multiple, nothing added. Controls are ring
   plates: nine-slices of the game's 25x15 ring frames (corners 12x7). */
@font-face {
  font-family: "Fira Sans";
  src: url(fonts/fira-sans-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url(fonts/fira-sans-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url(fonts/fira-mono-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root {
  --ink: #f3ead8;
  --ink-dim: #a39cb4;
  --gold: #fad673;
  --page: #07080f;
  /* the painted sky's top: the hero's backing and the page's own background, so a Mac's
     rubber-band scroll past either end shows more night, never black */
  --night: #0b102a;
  --plate: #1e1c28;
  --sans: "Fira Sans", system-ui, sans-serif;
  --mono: "Fira Mono", ui-monospace, monospace;
  --k: 3;
  --kw: 4;
  /* the art's scale and the art x at the page's centre */
  --s: 1;
  --fx: 760;
  /* the figure's feet above the hero's bottom */
  --b: 110px;
  --hmin: 560px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: var(--night);
}
body {
  background: linear-gradient(to bottom, var(--page) calc(100% - 180px), var(--night));
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  image-rendering: pixelated;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hero {
  position: relative;
  overflow: hidden;
  /* the window's height, but never so tall that the painting's top comes into view */
  --hh: max(var(--hmin), min(100vh, calc(992px * var(--s) + var(--b))));
  height: var(--hh);
  background: var(--night);
}
@supports (height: 100svh) {
  .hero {
    --hh: max(var(--hmin), min(100svh, calc(992px * var(--s) + var(--b))));
  }
}
.art {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1520px;
  height: 1400px;
  transform-origin: 0 0;
  /* the crest (art y 992) sits --b above the hero's bottom */
  transform: translate(
      calc(-1px * var(--fx) * var(--s)),
      calc(var(--hh) - var(--b) - 992px * var(--s))
    )
    scale(var(--s));
}
.art > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 1520px;
  height: 1400px;
  will-change: transform;
}
.art > .glow {
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 1126px 961px;
}
.art > .glow.hot {
  opacity: 0;
}
.figure {
  position: absolute;
  /* until the script places it on whole pixels: feet on the crest, right of centre */
  left: calc(50% + (1088 - var(--fx)) * var(--s) * 1px - 46px);
  bottom: calc(var(--b) - 1px);
  width: 112px;
  height: 161px;
  pointer-events: none;
}
.hero .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 8, 15, 0), rgba(7, 8, 15, 0.75) 60%, var(--page));
}
.hero .fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 9vh, 120px) 16px 0;
  pointer-events: none;
}
.content > * {
  pointer-events: auto;
}
h1 {
  line-height: 0;
}
.wordmark {
  width: calc(109px * var(--kw));
  height: calc(31px * var(--kw));
}
.line {
  margin-top: clamp(16px, 3.4vh, 34px);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 18px;
  color: #e9e2f2;
  text-shadow:
    0 2px 0 rgba(6, 7, 16, 0.8),
    0 0 18px rgba(6, 7, 16, 0.7);
}

/* the signup: a ring-plate field and a lit ring-plate button, then a quiet line */
.cta {
  margin-top: clamp(14px, 2.8vh, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: calc(3px * var(--k));
  justify-content: center;
  align-items: center;
}
.ring {
  position: relative;
  height: calc(15px * var(--k));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: transparent;
  border-width: calc(7px * var(--k)) calc(12px * var(--k));
  border-image: url(img/btn-ring-rest.png) 7 12 fill / calc(7px * var(--k)) calc(12px * var(--k))
    stretch;
  image-rendering: pixelated;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 17px;
  line-height: 0;
  white-space: nowrap;
  color: var(--ink);
  text-shadow:
    0 2px 0 #0a0810,
    0 -1px 0 #0a0810,
    1px 0 0 #0a0810,
    -1px 0 0 #0a0810;
}
button.ring {
  background: transparent;
  cursor: pointer;
  border-image-source: url(img/btn-ring-hover.png);
  color: var(--gold);
}
button.ring:hover {
  filter: brightness(1.15);
}
button.ring:disabled {
  cursor: default;
  filter: brightness(0.8);
}
.ring > span {
  margin: 0 calc(-6px * var(--k));
}
.ring.field {
  width: 290px;
}
.ring.field:focus-within {
  border-image-source: url(img/btn-ring-hover.png);
}
.ring.field input {
  position: absolute;
  /* over the whole plate, not just its tiny content box */
  inset: calc(-7px * var(--k)) calc(-12px * var(--k));
  width: calc(100% + 24px * var(--k));
  height: calc(15px * var(--k));
  padding: 0 calc(6px * var(--k));
  background: transparent;
  border: 0;
  outline: 0;
  font: 500 16px var(--mono);
  color: var(--ink);
  caret-color: var(--gold);
}
.ring.field input::placeholder {
  color: #77708c;
  opacity: 1;
}
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.thanks {
  margin-top: clamp(14px, 2.8vh, 26px);
  min-height: calc(15px * var(--k));
  display: flex;
  align-items: center;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--gold);
  text-shadow: 0 2px 0 #0a0810;
}
.soon {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #c4bdd3;
  text-shadow:
    0 1px 0 rgba(6, 7, 16, 0.9),
    0 0 10px rgba(6, 7, 16, 0.8);
}

/* below the fold: a spark on a fine rule, the game in motion, then the stills, two a row */
.divider {
  position: relative;
  height: 40px;
  margin: 8px auto 28px;
  max-width: 1352px;
}
.divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(250, 214, 115, 0),
    rgba(250, 214, 115, 0.35) 30%,
    rgba(250, 214, 115, 0.35) 70%,
    rgba(250, 214, 115, 0)
  );
}
.divider img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 27px;
  transform: translate(-50%, -50%);
}
main {
  /* two 616px stills in 12px frames and a 24px gap: every still at one pixel per pixel */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 24px;
}
.shot {
  border: 12px solid transparent;
  border-image: url(img/frame-ring.png) 4 fill / 12px stretch;
  background: var(--plate);
  line-height: 0;
  image-rendering: pixelated;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* the fight: twice its size (1280 wide), pixels square; a still of it shows until the loop
   (lazy, about a megabyte) arrives */
.shot.wide {
  max-width: 1304px;
  margin: 0 auto 24px;
  background: var(--plate) url(img/fight-poster.webp) center / 100% auto no-repeat;
  background-origin: content-box;
}
.shot.wide img {
  aspect-ratio: 640 / 360;
}
.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1304px;
  margin: 0 auto;
}
.row .shot img {
  aspect-ratio: 616 / 346;
}
/* an odd still out stands centred under the others, the same size */
@media (min-width: 601px) {
  .row > .shot:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}
/* each shot opens large: a link to its full-size file, which the lightbox shows */
.shot a.zoom {
  display: block;
  cursor: zoom-in;
}
.shot a.zoom img {
  transition: filter 160ms ease-out;
}
.shot a.zoom:hover img {
  filter: brightness(1.08);
}
.shot a.zoom:focus-visible {
  outline-offset: 8px;
}
/* the lightbox: a dimmed, blurred night behind one picture in the ring frame */
html.lb-open {
  overflow: hidden;
}
dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pinch-zoom;
  cursor: zoom-out;
  -webkit-user-select: none;
  user-select: none;
}
dialog.lightbox::backdrop {
  background: transparent;
}
.lb-veil {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 14, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.lb-frame {
  position: absolute;
  border: 12px solid transparent;
  border-image: url(img/frame-ring.png) 4 fill / 12px stretch;
  background: var(--plate);
  background-clip: padding-box;
  line-height: 0;
  transform-origin: 0 0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.lb-img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}
.lb-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 12px solid transparent;
  border-image: url(img/frame-ring.png) 4 fill / 12px stretch;
  background: var(--plate);
  background-clip: padding-box;
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    color 120ms ease-out;
}
.lb-btn:hover,
.lb-btn:focus-visible {
  color: var(--gold);
}
.lb-btn[hidden] {
  display: none;
}
.lb-close {
  top: 12px;
  right: 12px;
}
.lb-prev,
.lb-next {
  top: calc(50% - 24px);
}
.lb-prev {
  left: 12px;
}
.lb-next {
  right: 12px;
}
.lightbox.on .lb-veil,
.lightbox.on .lb-btn {
  opacity: 1;
}
/* on a phone the side buttons drop to the foot, under the thumbs (a swipe steps too) */
@media (max-width: 600px) {
  .lb-prev,
  .lb-next {
    top: auto;
    bottom: 16px;
  }
  .lb-prev {
    left: calc(50% - 60px);
  }
  .lb-next {
    right: calc(50% - 60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shot a.zoom img,
  .lb-veil,
  .lb-btn {
    transition: none;
  }
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 34px 16px 44px;
  font-size: 14px;
  color: var(--ink-dim);
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: var(--ink);
}
footer img {
  width: 32px;
  height: 32px;
}

/* Wider than the painting: scale it to cover; the figure grows by whole steps beside it. */
@media (min-width: 1521px) {
  :root {
    --s: 1.14;
  }
  .figure {
    width: 128px;
    height: 181px;
  }
}
@media (min-width: 1733px) {
  :root {
    --s: 1.27;
  }
  .figure {
    width: 156px;
    height: 228px;
  }
}
@media (min-width: 1931px) {
  :root {
    --s: 1.7;
    --b: 150px;
    --kw: 5;
  }
  .figure {
    width: 192px;
    height: 274px;
  }
}
@media (min-width: 2585px) {
  :root {
    --s: 2.3;
    --b: 200px;
    --kw: 6;
  }
  /* the zoom-8 frame at two page pixels a pixel: the game at zoom 16 */
  .figure {
    width: 256px;
    height: 362px;
  }
}
/* Short windows: a smaller wordmark so the figure keeps its sky. */
@media (max-height: 760px) and (min-width: 601px) {
  :root {
    --kw: 3;
  }
}
/* Scaled down, a still is smoother resampled than dropped to every other pixel. */
@media (max-width: 1351px) {
  .row .shot img {
    image-rendering: auto;
  }
}
/* Narrower: keep the figure and its lantern in view. */
@media (max-width: 1100px) {
  :root {
    --fx: 900;
  }
}
@media (max-width: 700px) {
  .shot.wide img {
    image-rendering: auto;
  }
}
@media (max-width: 600px) {
  :root {
    --k: 3;
    --kw: 3;
    --s: 0.5;
    --fx: 900;
    --b: 104px;
    --hmin: 520px;
  }
  .figure {
    width: 48px;
    height: 69px;
  }
  .content {
    padding-top: 56px;
  }
  .line {
    font-size: 13px;
    letter-spacing: 0.12em;
    padding: 0 12px;
    text-wrap: balance;
    line-height: 1.5;
  }
  .cta {
    flex-direction: column;
    gap: 8px;
  }
  .ring.field {
    width: min(270px, 100%);
  }
  .ring {
    font-size: 16px;
  }
  .ring.field input {
    font-size: 16px;
  }
  .thanks {
    font-size: 15px;
  }
  .soon {
    font-size: 12px;
  }
  main {
    padding: 0 16px 16px;
  }
  .divider {
    margin: 0 16px 12px;
  }
  .row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .shot.wide {
    margin-bottom: 16px;
  }
  footer {
    gap: 18px;
    font-size: 13px;
  }
}

/* the privacy page: plain words on the same night */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 24px;
  line-height: 1.6;
  font-size: 16px;
  color: #d9d2e4;
}
.page .home {
  display: inline-block;
  margin-bottom: 40px;
  line-height: 0;
}
.page .home img {
  width: 218px;
  height: 62px;
}
.page h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}
.page h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 6px;
}
.page p,
.page ul {
  margin-bottom: 12px;
}
.page ul {
  padding-left: 20px;
}
.page a {
  color: var(--gold);
}