@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/yeseva-one.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/im-fell-english.woff2") format("woff2");
}

@font-face {
  font-family: "IM Fell English";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("fonts/im-fell-english-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Pirata One";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/pirata-one.woff2") format("woff2");
}

@font-face {
  font-family: "Rye";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/rye.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/libre-baskerville.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("fonts/libre-baskerville-italic.woff2") format("woff2");
}

:root {
  --ink: #141414;
  --page: #f1f1f1;
  /* Native SVG viewBoxes: banner 4011.8×679.2, column 533.9×1913.
     Frame is one banner wide, two columns tall, plus a banner at each end. */
  --fw: 4011.8;
  --fh: 5184.4;
  --bw: 4011.8;
  --bh: 679.2;
  --cw: 533.9;
  --ch: 1913;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

html,
body {
  margin: 0;
  max-width: 100%;
}

body {
  color: var(--ink);
  background: var(--page);
  font-family: "Libre Baskerville", "Palatino Linotype", Palatino, serif;
  height: 100%;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1rem;
}

.page {
  width: min(800px, 100%);
  margin-inline: auto;
  overflow: hidden;
}

.frame {
  /* cqi knobs: --bleed-n into the banners, --join-n between stacked columns. */
  --bleed-n: 2.6;
  --join-n: 1.7;
  --bleed: calc(var(--bleed-n) * 1cqi);
  --join: calc(var(--join-n) * 1cqi);
  --fh-used: calc(
    var(--fh) - (2 * var(--bleed-n) + var(--join-n)) / 100 * var(--fw)
  );
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: calc(var(--fw) / var(--fh-used));
  display: grid;
  grid-template-columns:
    minmax(0, calc(var(--cw) / var(--fw) * 100%))
    minmax(0, 1fr)
    minmax(0, calc(var(--cw) / var(--fw) * 100%));
  grid-template-rows:
    calc(var(--bh) / var(--fh-used) * 100%)
    1fr
    calc(var(--bh) / var(--fh-used) * 100%);
  grid-template-areas:
    "head head head"
    "cl main cr"
    "foot foot foot";
}

.head {
  grid-area: head;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.banner-top {
  transform: scaleY(-1);
}

.banner-foot {
  grid-area: foot;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.ring,
.skull {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-inline: auto;
  pointer-events: none;
}

.ring {
  width: 38%;
  height: auto;
  transform: translateY(-35%);
  z-index: 1;
  background-color: var(--page);
}

.skull {
  width: 8%;
  height: auto;
  transform: translateY(-24%);
  z-index: 2;
  animation: gutter 7.5s ease-in-out infinite;
}

.cols {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  z-index: 1;
  margin-block: calc(-1 * var(--bleed));
}

.cols-left {
  grid-area: cl;
}

.cols-right {
  grid-area: cr;
}

.col {
  display: block;
  flex: 1 0 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  object-fit: fill;
  pointer-events: none;
}

.col + .col {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--join));
}

.col-fx {
  transform: scaleX(-1);
}

.col-fy {
  transform: scaleY(-1);
}

.col-fx.col-fy {
  transform: scaleX(-1) scaleY(-1);
}

.inner {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 7cqi 1.5cqi 1cqi;
  animation: rise 1.8s ease both;
}

.inner > * {
  max-width: 100%;
}

.lede {
  margin: 0;
  font-size: 2.55cqi;
  font-style: italic;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.arch {
  width: 92%;
  max-width: 100%;
  height: auto;
  margin: 0 0 -7cqi;
  overflow: hidden;
}

.arch text {
  fill: var(--ink);
  font-family: "Yeseva One", "Palatino Linotype", Palatino, serif;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 0.04em;
}

.numeral {
  margin: 0;
  font-size: 12cqi;
  line-height: 0.82;
  letter-spacing: -0.04em;
}

.cal {
  display: flex;
  align-items: center;
  gap: 2.6cqi;
  margin: 0;
  font-family: "Pirata One", "Times New Roman", serif;
  font-size: 4.2cqi;
  letter-spacing: 0.12em;
}

.hours {
  margin: 0;
  font-family: "Rye", "Palatino Linotype", Palatino, serif;
  font-size: 3.35cqi;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}

.quiz-kicker {
  margin: 0;
  font-size: 2.55cqi;
  letter-spacing: 0.14em;
}

.quiz {
  margin: 0;
  font-family: "Pirata One", "Times New Roman", serif;
  font-size: 5.4cqi;
  letter-spacing: 0.06em;
}

.close {
  margin: 0;
  max-width: 92%;
  font-size: 2.15cqi;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.close p {
  margin: 0;
}

.close p + p {
  margin-top: 0.22em;
}

.close u {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6cqi 2.4cqi;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.countdown.is-returned {
  display: block;
  font-family: "IM Fell English", "Times New Roman", serif;
  font-style: italic;
  font-size: 3.2cqi;
  letter-spacing: 0.08em;
}

.tick {
  display: flex;
  flex-direction: column;
  min-width: 7cqi;
}

.tick-num {
  font-size: 3.6cqi;
  letter-spacing: 0.04em;
}

.tick-lab {
  font-size: 1.7cqi;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gutter {
  0%,
  100% {
    opacity: 1;
  }
  46% {
    opacity: 0.92;
  }
  50% {
    opacity: 0.78;
  }
  54% {
    opacity: 0.96;
  }
  72% {
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner,
  .skull {
    animation: none;
  }
}