/* LateNiteScripts LLC company site.
   One stylesheet for all pages, no dependencies. The palette is the logo's: chalk on a black
   board. The artwork is opaque black, so the page background must stay pure black for the
   images to sit on it without a visible box. */

:root {
  --bg: #000;
  --bg-raised: #0d0d0f;
  --border: #26262b;
  --text: #ececec;
  --text-dim: #9d9da6;
  --accent: #f2f2f2;
  --max: 50rem;
  /* Side padding of the black panel; the sticky bars stretch across it. */
  --gutter: 2.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* In-page links (#games) land below the sticky header instead of under it. */
  scroll-padding-top: 7rem;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  /* 16px side gutter at phone width, never a horizontal scrollbar. */
  padding: 0 16px;
}

/* The content sits on a solid black panel down the middle, so text never runs over stars. The
   wide black shadow feathers its edges into the sky instead of ending on a hard line. */
.wrap {
  max-width: calc(var(--max) + 5rem);
  min-height: 100vh;
  margin: 0 auto;
  /* No top or bottom padding: the sticky header and footer carry that space themselves, so they
     sit flush with the screen edges once stuck. */
  padding: 0 var(--gutter);
  background: var(--bg);
  box-shadow: 0 0 60px 30px var(--bg);
  /* A column, so the footer can be pushed to the bottom of a short page. */
  display: flex;
  flex-direction: column;
}

/* On a phone the panel takes nearly the full width, leaving a thin strip of sky either side. */
@media (max-width: 640px) {
  body {
    padding: 0 14px;
  }

  :root {
    --gutter: 14px;
  }

  .wrap {
    box-shadow: 0 0 12px 4px var(--bg);
  }
}

/* Header and footer stay on screen while the page scrolls between them. */
main {
  flex: 1;
  padding-bottom: 3rem;
}

/* ---------- masthead ---------- */

/* The sticky bars span the whole black panel, gutters included, not just the text column, so
   nothing scrolling beneath them can show at their sides. Each also reaches 1px past its screen
   edge (top: -1px, with 1px more padding to match), which closes the hairline gap a sticky bar can
   leave when it lands on a fraction of a pixel. The divider is painted as a background line so it
   still spans only the text column. */
header.site,
footer.site {
  position: sticky;
  z-index: 1;
  margin: 0 calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: var(--bg);
}

header.site {
  top: -1px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-top: calc(2rem + 1px);
  padding-bottom: 1.25rem;
  background:
    linear-gradient(var(--border), var(--border)) var(--gutter) 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat,
    var(--bg);
}

@media (max-width: 640px) {
  header.site {
    padding-top: calc(1rem + 1px);
  }
}

header.site a.brand {
  display: block;
  line-height: 0;
}

/* Height set in whole pixels (the artwork would scale to 53.67px at 120px wide) so the sticky
   header stays a whole number of pixels tall. */
header.site a.brand img {
  width: auto;
  height: 54px;
}

nav.site {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

nav.site a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.94rem;
}

nav.site a:hover,
nav.site a:focus-visible {
  color: var(--accent);
}

/* Pixel starfield, pure CSS: flying forward through space. Five star sheets sit in a 3D
   scene and each one travels from far away to past the viewer, fading in at the back and out as
   it passes, then starts over. Staggered start times keep a sheet at every depth at once, and
   perspective makes the near ones speed up and spread out, which reads as motion through space.
   The sheets use three small SVG tiles inlined below. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  perspective: 400px;
}

.sky i {
  position: absolute;
  /* Twice the screen in each direction: at the far end of the trip a sheet is drawn at half
     size, and it must still cover the whole screen. */
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-repeat: repeat;
  opacity: 0;
  animation: warp 25s linear infinite;
  will-change: transform, opacity;
}

.sky i:nth-child(odd) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='467' height='467' shape-rendering='crispEdges'%3E%3Crect x='344' y='38' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.57'/%3E%3Crect x='215' y='379' width='2' height='2' fill='%23ffe8c8' fill-opacity='0.59'/%3E%3Crect x='11' y='37' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.66'/%3E%3Crect x='2' y='273' width='2' height='2' fill='%23fff' fill-opacity='0.77'/%3E%3Crect x='461' y='244' width='2' height='2' fill='%23fff' fill-opacity='0.81'/%3E%3Crect x='41' y='252' width='2' height='2' fill='%23ffe8c8' fill-opacity='0.64'/%3E%3Crect x='416' y='149' width='2' height='2' fill='%23fff' fill-opacity='0.76'/%3E%3Crect x='163' y='398' width='2' height='2' fill='%23ffe8c8' fill-opacity='0.61'/%3E%3Crect x='36' y='343' width='2' height='2' fill='%23fff' fill-opacity='0.66'/%3E%3Crect x='49' y='6' width='2' height='2' fill='%23fff' fill-opacity='0.79'/%3E%3Crect x='68' y='226' width='2' height='2' fill='%23fff' fill-opacity='0.66'/%3E%3Crect x='360' y='236' width='2' height='2' fill='%23fff' fill-opacity='0.83'/%3E%3Crect x='86' y='269' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.83'/%3E%3Crect x='182' y='176' width='2' height='2' fill='%23ffe8c8' fill-opacity='0.75'/%3E%3Crect x='16' y='4' width='2' height='2' fill='%23fff' fill-opacity='0.65'/%3E%3Crect x='76' y='255' width='2' height='2' fill='%23fff' fill-opacity='0.69'/%3E%3Crect x='300' y='117' width='2' height='2' fill='%23ffe8c8' fill-opacity='0.66'/%3E%3Crect x='47' y='447' width='2' height='2' fill='%23fff' fill-opacity='0.72'/%3E%3Crect x='224' y='262' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.61'/%3E%3Crect x='330' y='262' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.74'/%3E%3Crect x='463' y='52' width='2' height='2' fill='%23fff' fill-opacity='0.68'/%3E%3Crect x='343' y='30' width='2' height='2' fill='%23c8d7ff' fill-opacity='0.84'/%3E%3C/svg%3E");
  background-size: 467px 467px;
}

.sky i:nth-child(even) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='337' height='337' shape-rendering='crispEdges'%3E%3Crect x='161' y='142' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.45'/%3E%3Crect x='294' y='81' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.45'/%3E%3Crect x='269' y='317' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.55'/%3E%3Crect x='188' y='114' width='1' height='1' fill='%23fff' fill-opacity='0.36'/%3E%3Crect x='119' y='176' width='1' height='1' fill='%23fff' fill-opacity='0.42'/%3E%3Crect x='107' y='218' width='1' height='1' fill='%23fff' fill-opacity='0.54'/%3E%3Crect x='130' y='60' width='1' height='1' fill='%23fff' fill-opacity='0.52'/%3E%3Crect x='143' y='245' width='1' height='1' fill='%23fff' fill-opacity='0.48'/%3E%3Crect x='70' y='261' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.45'/%3E%3Crect x='58' y='276' width='1' height='1' fill='%23fff' fill-opacity='0.42'/%3E%3Crect x='30' y='293' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.52'/%3E%3Crect x='10' y='97' width='1' height='1' fill='%23fff' fill-opacity='0.43'/%3E%3Crect x='84' y='106' width='1' height='1' fill='%23fff' fill-opacity='0.40'/%3E%3Crect x='312' y='306' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.52'/%3E%3Crect x='292' y='228' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.41'/%3E%3Crect x='186' y='324' width='1' height='1' fill='%23fff' fill-opacity='0.37'/%3E%3Crect x='69' y='168' width='1' height='1' fill='%23fff' fill-opacity='0.51'/%3E%3Crect x='247' y='39' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.37'/%3E%3Crect x='247' y='120' width='1' height='1' fill='%23fff' fill-opacity='0.50'/%3E%3Crect x='294' y='50' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.50'/%3E%3Crect x='128' y='241' width='1' height='1' fill='%23fff' fill-opacity='0.47'/%3E%3Crect x='154' y='161' width='1' height='1' fill='%23fff' fill-opacity='0.47'/%3E%3Crect x='270' y='209' width='1' height='1' fill='%23fff' fill-opacity='0.58'/%3E%3Crect x='207' y='168' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.60'/%3E%3Crect x='245' y='63' width='1' height='1' fill='%23fff' fill-opacity='0.47'/%3E%3Crect x='252' y='244' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.56'/%3E%3Crect x='125' y='308' width='1' height='1' fill='%23fff' fill-opacity='0.47'/%3E%3Crect x='74' y='254' width='1' height='1' fill='%23fff' fill-opacity='0.39'/%3E%3Crect x='302' y='267' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.58'/%3E%3Crect x='35' y='18' width='1' height='1' fill='%23fff' fill-opacity='0.46'/%3E%3Crect x='325' y='85' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.41'/%3E%3Crect x='0' y='179' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.58'/%3E%3Crect x='104' y='297' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.55'/%3E%3Crect x='309' y='321' width='1' height='1' fill='%23ffe8c8' fill-opacity='0.43'/%3E%3Crect x='138' y='5' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.37'/%3E%3Crect x='71' y='51' width='1' height='1' fill='%23fff' fill-opacity='0.49'/%3E%3Crect x='71' y='25' width='1' height='1' fill='%23fff' fill-opacity='0.37'/%3E%3Crect x='192' y='12' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.46'/%3E%3Crect x='300' y='258' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.58'/%3E%3Crect x='36' y='151' width='1' height='1' fill='%23c8d7ff' fill-opacity='0.58'/%3E%3C/svg%3E");
  background-size: 337px 337px;
}

.sky i:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='613' height='613' shape-rendering='crispEdges'%3E%3Crect x='93' y='544' width='3' height='3' fill='%23fff' fill-opacity='0.96'/%3E%3Crect x='605' y='322' width='3' height='3' fill='%23fff' fill-opacity='0.96'/%3E%3Crect x='22' y='294' width='3' height='3' fill='%23c8d7ff' fill-opacity='0.88'/%3E%3Crect x='130' y='476' width='3' height='3' fill='%23ffe8c8' fill-opacity='0.93'/%3E%3Crect x='306' y='365' width='3' height='3' fill='%23c8d7ff' fill-opacity='1.00'/%3E%3Crect x='11' y='374' width='3' height='3' fill='%23fff' fill-opacity='0.97'/%3E%3Crect x='548' y='281' width='3' height='3' fill='%23c8d7ff' fill-opacity='0.88'/%3E%3Crect x='550' y='497' width='3' height='3' fill='%23fff' fill-opacity='0.92'/%3E%3Crect x='519' y='596' width='3' height='3' fill='%23fff' fill-opacity='0.97'/%3E%3C/svg%3E");
  background-size: 613px 613px;
}

/* Negative delays start every sheet mid-trip, so the sky is already full on page load. */
.sky i:nth-child(1) { animation-delay: 0s; }
.sky i:nth-child(2) { animation-delay: -5s; background-position: 120px 210px; }
.sky i:nth-child(3) { animation-delay: -10s; }
.sky i:nth-child(4) { animation-delay: -15s; background-position: 260px 40px; }
.sky i:nth-child(5) { animation-delay: -20s; background-position: 90px 330px; }

@keyframes warp {
  0% {
    transform: translateZ(-400px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateZ(300px);
    opacity: 0;
  }
}

/* Reduced motion: the same sheets, frozen at different depths. */
@media (prefers-reduced-motion: reduce) {
  .sky i {
    animation: none;
    opacity: 1;
  }

  .sky i:nth-child(1) { transform: translateZ(-360px); }
  .sky i:nth-child(2) { transform: translateZ(-240px); }
  .sky i:nth-child(3) { transform: translateZ(-120px); }
  .sky i:nth-child(4) { transform: translateZ(0); }
  .sky i:nth-child(5) { transform: translateZ(100px); }
}

/* The legal pages open with their title; the home page has the hero there instead. */
main > h1:first-child {
  margin-top: 2.5rem;
}

/* ---------- type ---------- */

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.3rem;
  margin: 3rem 0 0.75rem;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

a {
  color: var(--accent);
}

.lede {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-top: 0;
}

.updated {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

ul {
  padding-left: 1.25rem;
}

li {
  margin: 0.4rem 0;
}

/* ---------- home ---------- */

.hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 0 1rem;
}

.hero img {
  flex: none;
  width: 220px;
}

@media (max-width: 640px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .hero img {
    width: 180px;
  }
}

.game {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
}

.game img {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 18px;
}

.game h3 {
  margin: 0 0 0.25rem;
}

.game p {
  margin: 0 0 0.6rem;
}

.game .platforms {
  color: var(--text-dim);
  font-size: 0.88rem;
}

@media (max-width: 480px) {
  .game {
    flex-direction: column;
  }
}

/* Content fades out as it reaches a sticky bar instead of being cut mid-letter. A hard cut can
   leave the top pixel of a list bullet or a letter showing beside the bar, which reads as a stray
   dot. */
header.site::after,
footer.site::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.25rem;
  pointer-events: none;
}

header.site::after {
  top: 100%;
  background: linear-gradient(var(--bg), transparent);
}

footer.site::before {
  bottom: 100%;
  background: linear-gradient(transparent, var(--bg));
}

/* ---------- footer ---------- */

/* One compact row, links on the left and the copyright on the right, so the sticky footer takes
   little of the screen. It wraps to two lines only when the screen is too narrow. */
footer.site {
  bottom: -1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* Whole pixels only (line height, gap, padding): a bar whose height is fractional lands between
     pixels, and content scrolling under it shows through its blended edge as stray specks. */
  line-height: 24px;
  gap: 6px 24px;
  padding-top: 16px;
  padding-bottom: 17px;
  background:
    linear-gradient(var(--border), var(--border)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat,
    var(--bg);
  color: var(--text-dim);
  font-size: 0.88rem;
}

footer.site a {
  color: var(--text-dim);
}

footer.site nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

footer.site p {
  margin: 0;
}