@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* Values from the game's HUD (apps/game/src/components/ui/hud/hud.css). */
:root {
  --night: #17130f;
  --panel: #1b1915;
  --paper: #eee0c3;
  --dim: #b3a68c;
  --route: #ed6429;
  --edge: clamp(20px, 2.5vw, 36px);
  --minimap: 200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 500 clamp(19px, 0.6vw + 15px, 22px)/1.4 'Barlow Condensed', 'Arial Narrow', sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--route); outline-offset: 4px; }
p { margin: 0; }

/* Hero: a held frame of the game, with its HUD on top. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  text-shadow: 1px 2px 0 #17130fee, 0 0 9px #0a0907;
}
.frame, .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 50%;
}
.frame { animation: fade-in 1.6s ease-out both; }
/* Melts the frame into the page below it. */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#17130f99, transparent 28%, transparent 70%, var(--night));
}
/* The same frame with someone standing under the lamp, faded in once it's
   been quiet for a while. */
.figure { opacity: 0; animation: fade-in 3s ease-in 7s forwards; }
.reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #f3e9cfdd;
  box-shadow: 0 0 0 2px #17130fc9;
}

.hud {
  position: absolute;
  inset: var(--edge);
  display: grid;
  grid-template: 'title title title' 1fr 'navigation more hints' auto / 1fr auto 1fr;
  column-gap: 16px;
  align-items: end;
  animation: fade-in 0.5s ease-out 1.1s both;
}
.title { grid-area: title; align-self: start; }
.title h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(76px, 9vw, 148px);
  line-height: 0.8;
  letter-spacing: 0.01em;
}
.title sup {
  margin-left: 0.06em;
  font-size: 0.3em;
  vertical-align: top;
  position: relative;
  top: -0.05em;
  color: var(--dim);
}
.title p { margin-top: 14px; font-size: clamp(21px, 1vw + 14px, 26px); }

.navigation { grid-area: navigation; }
.destination {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 4px 5px;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  font-size: 23px;
  line-height: 1.1;
}
.destination strong { font-weight: 500; }
.destination span { color: var(--route); }
.destination span:last-child { text-transform: none; }
.status { margin: 0 0 7px 5px; font-size: 19px; letter-spacing: 0.035em; }
.minimap {
  width: var(--minimap);
  height: var(--minimap);
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px #1d1814d9, 0 2px 12px #0005;
  background: #191916;
}
.street { margin: 8px 0 0 3px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 23px; line-height: 1.1; }

.hints { grid-area: hints; justify-self: end; display: flex; align-items: center; gap: 28px; }
.hints a, .more {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
/* Says there's more below; the arrow nudges down now and then. */
.more { grid-area: more; flex-direction: column; gap: 0; font-size: 24px; }
.more span { font-size: 40px; line-height: 1; animation: nudge 3s ease-in-out 2.5s infinite; }
@keyframes nudge {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(6px); }
}
kbd {
  padding: 3px 6px;
  min-width: 27px;
  font: inherit;
  text-align: center;
  border: 1px solid var(--paper);
  border-radius: 2px;
  background: #18150f70;
  box-shadow: 1px 2px #18150f;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.hints a:active kbd, .hints a.pressed kbd { transform: translate(1px, 2px); box-shadow: 0 0 #18150f; }
@media (hover: hover) {
  .hints a:hover, .more:hover { color: var(--route); }
  .hints a:hover kbd { border-color: var(--route); }
}

/* Below the frame */
.about, .gallery, footer {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--edge);
}
.about { padding-block: 72px 88px; }
.about h2, .arrival h2 {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: clamp(30px, 2vw + 20px, 44px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.065em;
}
.about p {
  max-width: 32em;
  font-size: clamp(21px, 0.8vw + 16px, 26px);
  color: var(--dim);
}
.about p + p { margin-top: 0.7em; }
.about p:first-of-type { color: var(--paper); }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 16px; }
.gallery figure { margin: 0; }
.gallery .wide { grid-column: 1 / -1; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel); }
.gallery figcaption {
  margin: 10px 0 0 3px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* The in-game arrival card. */
.arrival {
  max-width: 600px;
  margin: 128px auto 104px;
  padding: 30px 32px 22px;
  text-align: center;
  background: var(--panel);
  border-top: 2px solid var(--route);
}
.arrival h2 { margin-bottom: 14px; font-size: 30px; }
.arrival p { max-width: 27em; margin: 0 auto 14px; color: var(--dim); }
.arrival .hints { justify-content: center; flex-wrap: wrap; gap: 4px 28px; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px 36px;
  font-size: 17px;
  color: var(--dim);
  letter-spacing: 0.03em;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
  :root { --minimap: 128px; }
  .hud { column-gap: 8px; }
  .destination, .street { font-size: 20px; }
  .status { font-size: 17px; }
  .hero .hints { flex-direction: column; align-items: stretch; gap: 0; }
  .hero .hints a { min-height: 40px; }
  .gallery { grid-template-columns: 1fr; gap: 28px; }
  .arrival { margin-inline: var(--edge); padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame, .hud, .figure, .more span { animation: none; }
  kbd { transition: none; }
}