/* OH MY HECKING GOD WAS THIS WRITTEN BY CLAUDE??????????????
 * YOU CANNOT LET CLAUDE DO PAINFUL SHIT FOR YOU BECAUSE
 * THAT KILLS ARTISTS OR SOMETHING YOU ARE KILLING YOUR OWN BRAIN!!!!!!!
 */

:root {
  /* Device pixels per image pixel. It goes higher only if the graveyard
     would otherwise be narrower than the screen (it doesn't tile sideways). */
  --scale: 2;

  /* Shift the graveyard left by this many image pixels (whole numbers, 0 or
     more). The right side fills the gap; the left side gets cropped. */
  --shift: 0;

  /* without js: 1 css px per image pixel on small screens, 2 on large */
  --px: 1px;
}
@media (min-width: 1024px) { :root { --px: 2px; } }

@media (hover: none) and (pointer: coarse) {
  :root { --scale: 2; }
}

/* Small screens (phones; same breakpoint as the hamburger menu in nav.css):
   shift the graveyard left by this many image pixels. Bigger screens keep
   --shift from :root above. */
@media screen and (max-width: 600px) {
  :root { --shift: 180; }
}

/* always the dark colours here (light-dark() in vars.css), so the text and
   the bar read well on the night sky */
:root { color-scheme: dark; }

html { background: #000; }
body {
  position: relative;               /* the sky covers the whole body */
  background: transparent;          /* main.css paints --bg1 here */
}

/* sky: tiled over the whole page, scrolls with it */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
  background: #000 url("/autumn/stars.gif") repeat;
  background-size: calc(512 * var(--px)) calc(512 * var(--px));
}

/* the bar lets the sky through (the dropdown menu keeps its background) */
.evilnavdiv { background: transparent; }

/* The last screen of the page: only sky and graveyard. It's at least one
   full viewport tall, so scrolling to the bottom leaves no content in view.
   The graveyard sits at its bottom, left-aligned, cropped on the right. */
.artwork {
  flex: none;
  min-height: 100vh;
  min-height: 100lvh;               /* also covers mobile toolbars hiding */
  image-rendering: pixelated;
  background: url("/autumn/graveyard.gif") no-repeat;
  background-size: calc(960 * var(--px)) calc(224 * var(--px));
  background-position: calc(-1 * var(--shift) * var(--px)) 100%;
}

.announce {
  padding: 0 2.5em;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  text-align: center;
  letter-spacing: .06em;
  line-height: 1.4;
}
/* on phones (same breakpoint as the hamburger menu in nav.css), a third of
   a screen of sky between the bar and the text */
@media screen and (max-width: 600px) {
  .homepage {
    margin-top: 33vh;
    margin-top: 33svh;
  }
  .announce{
    margin-bottom: 20em;
  }
}

/* {{< announce >}}: a line above the text, inset a bit more than the main
   column and with room before the text below */
.announce-red { color: #b23a32; }  /* dried-blood red, dim enough for the night sky */