@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-wght.4d05bb0e4a69.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/FrauncesItalic.d298a3dc03b9.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}

/*
  Band colours are the pond's own light (game/packages/forest_pond/light.json, glow_low and
  glow_high of each look): dawn, day, golden, sunset, dusk, night. Each band starts on the
  colour the one above it ends on, so the page scrolls through one day.
*/
:root {
  --night-high: #0b1028;
  --night-low: #26305a;
  --dawn-high: #5a6aa8;
  --dawn-low: #f8b49a;
  --sunrise-low: #fcc66a;
  --morning-low: #f8e3a8;
  --day-low: #c9e8f6;
  --golden-low: #fbe7a8;
  --sunset-low: #f8963a;
  --dusk-low: #b0587a;
  --dusk-high: #1e2350;

  --ink: #2c2636;
  --ink-soft: #4a4152;
  --cream: #fff6ea;
  --cream-soft: #dfe1f2;
  --auburn: #a34b28;
  --auburn-deep: #641f0b;
  --auburn-ring: #966c6c;
  --green: #239063;

  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --serif: "Fraunces", Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night-high);
  color: var(--ink);
  font: 400 16px/1.7 var(--mono);
  overflow-x: clip;
}

img { max-width: 100%; }

.px {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.wrap { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 16px; }
.wrap-wide { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 16px; }

.band { position: relative; overflow-x: clip; }

h1, h2 { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; margin: 0 0 28px; }
h2 { font-size: clamp(32px, 4.2vw, 40px); line-height: 1.12; margin: 0 0 20px; }
p { margin: 0 0 16px; }
strong { font-weight: 700; }

/* Dawn: the header and hero, light text on the night going to dawn. */
.dawn {
  color: var(--cream);
  background: linear-gradient(180deg, var(--night-high) 0%, var(--night-low) 22%, var(--dawn-high) 62%, #b98aa6 100%);
  padding: 32px 0 24px;
}
.lockup { display: inline-block; line-height: 0; }
.lockup img { image-rendering: pixelated; }
.hero { padding-top: 44px; }
.hero h1 { max-width: 11em; text-shadow: 0 2px 0 rgba(11, 16, 40, 0.35); }
.lede { font-size: 17px; max-width: 34em; color: var(--cream); }
.small { font-size: 13px; color: var(--cream-soft); margin-top: 18px; }
.note { font-size: 15px; max-width: 34em; color: var(--cream); margin-top: 18px; }
.small.note { font-size: 13px; color: var(--cream-soft); }
.others { margin-top: 6px; }
.others a { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.others a:hover { color: var(--dawn-low); }
.others a:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.coming { font: italic 400 24px/1.45 var(--serif); color: var(--cream); margin: 0; }

.cta { position: relative; display: inline-block; margin-top: 20px; }
.button {
  display: inline-block;
  padding: 18px 30px;
  background: var(--auburn);
  color: var(--cream);
  font: 700 18px/1.25 var(--mono);
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--auburn-ring), 0 4px 0 3px var(--auburn-deep), 0 10px 24px rgba(11, 16, 40, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover { background: #b5582f; transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid var(--cream); outline-offset: 6px; }
.a-dragonfly { position: absolute; right: -34px; top: -12px; }

/*
  The pond under the button: a window onto hero.webp at one art px per device px (the game's own
  density, so every pixel lands whole): 1600 art px is 1600 CSS px on a 1x screen, 800 on 2x, 533 on 3x.
  The window shows all 1600 art px where it fits (the middle of it on a phone). Its sky is transparent and the sunrise
  band behind it is the page's own sky, so the dawn runs straight into the pond; the window's sides and
  bottom fade into that band, which then turns to the day's blue.
*/
.sunrise {
  --hw: 1600px;
  --hh: calc(var(--hw) * 592 / 1600);
  --top: 64px;
  position: relative;
  padding: var(--top) 0 90px;
  background: linear-gradient(180deg,
    #b98aa6 0,
    var(--dawn-low) var(--top),
    var(--sunrise-low) calc(var(--top) + var(--hh) * 0.45),
    var(--sunrise-low) calc(var(--top) + var(--hh) * 0.85),
    #f2e2d5 calc(var(--top) + var(--hh) + 40px),
    var(--day-low) 100%);
}
@media (min-resolution: 1.5dppx) { .sunrise { --hw: 800px; } }
@media (min-resolution: 2.5dppx) { .sunrise { --hw: 533.333px; } }
.hero-scene {
  position: relative;
  width: min(100%, var(--hw));
  height: var(--hh);
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 0, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 0, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.hero-scene img {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--hw);
  height: auto;
  transform: translateX(-50%);
}

/* Day */
.day {
  background: linear-gradient(180deg, var(--day-low) 0%, #e4f3f8 55%, var(--golden-low) 100%);
  padding: 150px 0 0;
}
.branch { position: absolute; right: 0; top: 0; z-index: 2; }
.rm-show { display: none; }

.media { position: relative; margin: 0; }
.day > .media { margin: 0 auto 104px; }
.media figcaption {
  font: italic 400 19px/1.45 var(--serif);
  color: var(--ink-soft);
  text-align: center;
  margin-top: 16px;
}
.gif-slot {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.45);
  border: 2px dashed rgba(44, 38, 54, 0.25);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
}
.gif { display: block; width: 100%; height: auto; border-radius: 10px; }

.calm { padding-bottom: 96px; }
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 24px; }

/*
  Edges are real pieces of the pond standing on the line between two bands. They are 1 CSS px per
  art px and wider than a phone, so each is cropped around a focal point instead of scaled.
*/
.edge { position: relative; z-index: 1; overflow: hidden; line-height: 0; }
.pond-edge img { position: relative; left: 50%; transform: translateX(calc(-50% + 232px)); }

/* Golden hour */
.golden {
  background: linear-gradient(180deg, var(--golden-low) 0%, #fad48a 45%, var(--sunset-low) 100%);
  padding: 96px 0 120px;
}
.points { list-style: none; padding: 0; margin: 0; }
.points li { margin-bottom: 18px; padding-left: 22px; position: relative; }
.points li::before { content: "~"; position: absolute; left: 0; color: var(--auburn-deep); }

/* Sunset to dusk: starlings, the privacy line, the shore with the deer */
.dusk {
  background: linear-gradient(180deg, var(--sunset-low) 0%, #e07a5a 30%, var(--dusk-low) 62%, #5a3a6e 84%, var(--dusk-high) 100%);
  padding: 140px 0 0;
}
.starlings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.starlings .px { position: absolute; }
.s1 { left: 12%; top: 6%; }
.s2 { left: 14.5%; top: 4%; }
.s3 { left: 17%; top: 7%; }
.s4 { left: 19.5%; top: 3%; }
.s5 { left: 80%; top: 2%; }
.s6 { left: 83%; top: 5%; }
.s7 { left: 85.5%; top: 1.5%; }
.privacy { padding-bottom: 40px; }
.open { padding-bottom: 64px; }
.open p { max-width: 34em; }
.repo { font: 700 16px/1.4 var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.repo::after { content: " \2192"; }
.repo:hover { color: var(--auburn-deep); }
.repo:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.privacy p { max-width: 34em; }

.shore { background-repeat: repeat-x; background-position: center bottom; image-rendering: pixelated; padding-bottom: 46px; }
.dusk-shore { background-image: url("art/shore-dusk.cee691f2609f.png"); }
.night-shore { background-image: url("art/shore-night.599978e4ebc8.png"); }
.on-shore { position: relative; max-width: 1100px; margin: 0 auto -18px; display: flex; align-items: flex-end; justify-content: center; gap: 48px; padding: 0 16px; }
.dusk-shore .on-shore { margin-bottom: -22px; }

/* Night: light text, then the night shore with the beaver, the fox and the raccoon */
.night {
  color: var(--cream);
  background: linear-gradient(180deg, var(--dusk-high) 0%, var(--night-low) 30%, var(--night-high) 100%);
  padding: 120px 0 0;
}
.soon { text-align: center; padding-bottom: 72px; }
.soon p { font: italic 400 24px/1.45 var(--serif); max-width: 22em; margin: 0 auto; color: var(--cream); }
.night-shore .on-shore { justify-content: space-between; align-items: flex-end; }
.night-shore .beaver { margin-bottom: 4px; }
.night-shore .raccoon { margin-bottom: 2px; }

.foot { position: relative; z-index: 1; padding: 28px 0 36px; font-size: 13px; color: var(--cream-soft); background: #0e1430; }
.foot p { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.badge { image-rendering: pixelated; }

/* The hawk's sky: above the band colours, below the words */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hawk {
  position: absolute;
  left: 0; top: 0;
  width: 128px; height: 77px;
  background: url("art/hawk-glide.ac1477627856.png") 0 0 no-repeat;
  background-size: 2048px 77px;
  image-rendering: pixelated;
  opacity: 0;
  will-change: transform;
}
.hawk.on { opacity: 1; }

@media (max-width: 760px) {
  .night-shore .raccoon { display: none; }
  .night-shore .on-shore { justify-content: center; gap: 8px; }
}

@media (max-width: 640px) {
  .sunrise { --top: 72px; padding-bottom: 110px; }
  .hero { padding-top: 56px; }
  .lede { font-size: 16px; }
  .button { padding: 16px 20px; font-size: 16px; }
  .a-dragonfly { right: 6px; top: -22px; }
  .day { padding-top: 200px; }
  .day > .media { margin-bottom: 80px; }
  .media-pair { grid-template-columns: 1fr; gap: 56px; }
  .calm { padding-bottom: 80px; }
  .pond-edge img { left: 0; transform: translateX(-250px); }
  .golden { padding-top: 72px; }
  .dusk { padding-top: 110px; }
  .dusk-shore .on-shore { justify-content: flex-start; padding: 0; }
  .dusk-shore .deer { margin-left: -8px; }
  .soon p { font-size: 21px; }
  .night-shore .beaver { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sky { display: none; }
  .rm-hide { display: none; }
  .rm-show { display: block; }
  .button { transition: none; }
}