/* ember bee studio page.
   Everything is set on the game's art grid: --u is the size of one art pixel in CSS pixels,
   and every length below is a whole number of them. The inks are the game's (render/tokens.ts PAL),
   the lettering is the game's bitmap font, and headings carry the game's stamp (app/ui/heading.ts). */

@font-face {
  font-family: 'Deep Field';
  src: url('assets/deepfield.woff?v=2') format('woff');
  font-display: block;
}

:root {
  --void0: #0a0c1a; --void1: #131632; --void2: #1d2347; --void3: #2c3a63;
  --star0: #8fa3c7; --star1: #e8ecf7; --grey: #5a6376;
  --gold: #ffd98a; --amber1: #e8a33d; --amber0: #8a5a2a;
  --mint: #7fd6b1; --teal1: #2f7a78; --ember1: #e5643a;
  --u: 3px;          /* one art pixel of type */
  --k: 4;            /* one art pixel of the hero picture */
  --pos: 0.7;        /* which part of the picture a narrow window keeps */
  --col: 720px;
}
@media (max-width: 2880px) { :root { --k: 6; } }
@media (max-width: 2400px) { :root { --k: 5; } }
@media (max-width: 1920px) { :root { --k: 4; } }
@media (max-width: 1440px) { :root { --k: 3; } }
@media (max-width: 960px)  { :root { --k: 2; } }
@media (max-width: 760px)  { :root { --u: 2px; --col: 100%; } }
@media (max-width: 600px)  { :root { --pos: 0.6; } }
@media (min-width: 2881px) { :root { --k: 8; } }

* { box-sizing: border-box; }
html { background: var(--void0); scroll-behavior: smooth; }
body {
  margin: 0;
  background: url('assets/stars.png') 0 0 / calc(256px * 3) auto, url('assets/stars2.png') 90px 150px / calc(199px * 3) auto, var(--void0);
  image-rendering: pixelated;
  color: var(--star0);
  font: calc(var(--u) * 8) / calc(var(--u) * 12) 'Deep Field', monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
}
.px { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; display: block; }
a { color: var(--star1); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold); }
/* a link in running text says so the plain way: its own colour and a one-pixel line under it */
.letter a:not(.btn):not(.trailer):not(.shots a) {
  color: var(--mint);
  text-decoration: underline var(--u) var(--teal1);
  text-underline-offset: calc(var(--u) * 2);
  text-decoration-skip-ink: none;
}
.letter a:not(.btn):not(.trailer):not(.shots a):hover,
.letter a:not(.btn):not(.trailer):not(.shots a):focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
.contact li a::after { content: ' >'; color: var(--teal1); }
.contact li a:hover::after { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: var(--u) solid var(--gold); outline-offset: var(--u); }
p { margin: 0 0 calc(var(--u) * 8); }

/* the stamp: the word printed again as its own side, its dark edge and its warm rim */
h2, .stamp {
  margin: 0 0 calc(var(--u) * 8);
  color: var(--star1);
  font: calc(var(--u) * 16) / calc(var(--u) * 16) 'Deep Field', monospace;
  font-weight: normal;
  text-shadow:
    0 calc(var(--u) * -1) var(--gold),
    calc(var(--u) * -1) 0 var(--void0),
    calc(var(--u) * -1) calc(var(--u) * -1) var(--void0),
    var(--u) var(--u) var(--void3),
    calc(var(--u) * 2) calc(var(--u) * 2) var(--void2);
}

/* ------------------------------------------------ top bar */
.bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--u) * 2) calc(var(--u) * 8);
}
.bar nav { display: flex; gap: calc(var(--u) * 10); }
.bar a { color: var(--star0); padding: calc(var(--u) * 4) 0; }
.bar a:hover, .bar a:focus-visible { color: var(--gold); }
.bar .studio { color: var(--star1); }

/* ------------------------------------------------ first screen */
.first h1 { margin: 0; }
.logo { margin: -14px auto -18px; width: 640px; height: 240px; }   /* the picture carries empty rows above and below its letters */
.pitch { margin: 0 0 calc(var(--u) * 8); padding: 0 16px; text-align: center; color: var(--star1); }
.pitch span { display: inline-block; }
@media (max-width: 760px) { .logo { width: 320px; height: 120px; margin: -6px auto -8px; } }

.hero {
  position: relative; overflow: hidden;
  height: calc(155px * var(--k));
  background: #110f2f;
  cursor: crosshair;
  border-top: var(--u) solid var(--void3);
  border-bottom: var(--u) solid var(--void3);
  box-sizing: content-box;
}
.hero .art {
  position: absolute; top: 0;
  width: calc(480px * var(--k)); height: calc(155px * var(--k));
  left: calc((100% - 480px * var(--k)) * var(--pos));
}
.hero .art img, .hero .art canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}
.hero.kick .art { transform: translate(calc(var(--k) * -1px), calc(var(--k) * 1px)); }
.score {
  position: absolute; top: calc(var(--u) * 5); right: calc(var(--u) * 8); margin: 0;
  color: var(--amber1); pointer-events: none;
  text-shadow: var(--u) var(--u) var(--void0);
}

.stores {
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 6);
  margin: calc(var(--u) * 6) 0 0; padding: 0 16px;
}
.btn {
  display: inline-block;
  padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 4);
  font-size: calc(var(--u) * 8); line-height: calc(var(--u) * 8);
  color: var(--star1); background: var(--void2);
  box-shadow: inset 0 var(--u) var(--void3), var(--u) var(--u) 0 var(--void1), calc(var(--u) * 2) calc(var(--u) * 2) 0 #0d0f24;
}
.btn.gold {
  color: var(--void0); background: var(--amber1);
  box-shadow: inset 0 var(--u) var(--gold), var(--u) var(--u) 0 var(--amber0), calc(var(--u) * 2) calc(var(--u) * 2) 0 #4a3020;
}
.btn:hover, .btn:focus-visible { color: var(--gold); transform: translate(var(--u), var(--u)); box-shadow: inset 0 var(--u) var(--void3), var(--u) var(--u) 0 var(--void1); }
.btn.gold:hover, .btn.gold:focus-visible { color: var(--void0); background: var(--gold); box-shadow: inset 0 var(--u) var(--star1), var(--u) var(--u) 0 var(--amber0); }

/* ------------------------------------------------ the letter */
.letter {
  width: var(--col); max-width: 100%;
  margin: calc(var(--u) * 16) auto 0;
  padding: calc(var(--u) * 8) 16px;
  background: var(--void0);      /* the sky's stars stay out from under the words */
}
@media (min-width: 761px) { .letter { padding: calc(var(--u) * 8) calc(var(--u) * 8); box-sizing: content-box; } }

.trailer {
  position: relative; display: block;
  margin: calc(var(--u) * 14) 0 calc(var(--u) * 4);
  border: var(--u) solid var(--void3);
  background: #000; aspect-ratio: 16 / 9;
}
.trailer img, .trailer iframe { display: block; width: 100%; height: 100%; border: 0; image-rendering: auto; }
.trailer .play {
  position: absolute; left: calc(var(--u) * 4); bottom: calc(var(--u) * 4);
  display: flex; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--void0); color: var(--gold);
}
.trailer .play img { width: calc(var(--u) * 9); height: calc(var(--u) * 11); image-rendering: pixelated; }
.trailer:hover { border-color: var(--gold); }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
.shots a { display: block; border: var(--u) solid var(--void3); }
.shots a:hover, .shots a:focus-visible { border-color: var(--gold); }
.shots img { display: block; width: 100%; height: auto; image-rendering: auto; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }

.facts {
  margin: calc(var(--u) * 16) 0 0;
  border-top: var(--u) solid var(--void3);
}
.facts div {
  display: flex; gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 2);
  border-bottom: var(--u) solid var(--void2);
}
.facts dt { flex: 0 0 calc(var(--u) * 44); color: var(--star0); }
.facts dd { margin: 0; color: var(--star1); }
.facts a { color: var(--mint); }
.facts a:hover { color: var(--gold); }

.studio-note {
  display: flex; gap: calc(var(--u) * 10); align-items: flex-start;
  margin-top: calc(var(--u) * 28);
}
.bee { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.bee img { width: 184px; height: 184px; }
.sign { color: var(--gold); margin-top: calc(var(--u) * 2); }
@media (max-width: 760px) { .studio-note { flex-direction: column; } .bee img { width: 92px; height: 92px; } }

.contact { margin-top: calc(var(--u) * 24); }
.mail { color: var(--mint); }
.contact ul { list-style: none; margin: 0; padding: 0; }
.contact li { display: grid; grid-template-columns: calc(var(--u) * 44) 1fr; gap: calc(var(--u) * 8); padding: calc(var(--u) * 2) 0; justify-items: start; }
.contact li { align-items: baseline; }
.contact li a { flex: none; }
.contact li span::before { content: ''; }
.contact li span { color: var(--star0); }
@media (max-width: 760px) { .contact li { grid-template-columns: 1fr; gap: 0; } }

footer {
  margin-top: calc(var(--u) * 40);
  padding: calc(var(--u) * 8);
  border-top: var(--u) solid var(--void2);
  color: var(--star0); text-align: center;
}
footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero.kick .art { transform: none; }
}

/* the page for an address that is not there */
.lost { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8); text-align: center; padding: 0 16px; }
.lost h2 { margin: 0; }