/* sniebauer.com
   1-bit: black and white only. Departure Mono is drawn on an 11px pixel grid,
   so every text size is a multiple of 5.5px to stay crisp on 2x screens. */

@font-face {
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2"),
       url("fonts/DepartureMono-Regular.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #fff;
  --paper: #000;
  /* One character cell of the beach: 11px font, 14px rows. */
  --cell-w: 7px;
  --cell-h: 14px;
  --mono: "Departure Mono", ui-monospace, Menlo, Consolas, monospace;
}

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

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16.5px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- the beach ---------- */

.beach {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Large-viewport height so phone toolbars sliding in and out don't
     resize (and re-layout) the scene mid-scroll. */
  height: 100vh;
  height: 100lvh;
  margin: 0;
  overflow: hidden;
  font: 11px/14px var(--mono);
  white-space: pre;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- content panel ----------
   The beach script leaves every character cell under this box blank,
   so the box reads as a hole cut into the scene. */

.panel {
  position: relative;
  background: var(--paper);
  width: auto;
  max-width: 672px;
  /* Phones: show the beach first, then scroll the panel up over it. */
  margin: 58vh calc(var(--cell-w) * 2) calc(var(--cell-h) * 6);
  margin-top: 58svh;
  padding: var(--cell-h) calc(var(--cell-w) * 2) calc(var(--cell-h) * 2);
}

@media (min-width: 640px) {
  .panel {
    margin-inline: calc(var(--cell-w) * 6);
    padding-inline: calc(var(--cell-w) * 4);
  }
}

@media (min-width: 1000px) {
  body {
    font-size: 22px;
  }

  .panel {
    width: 672px;
    margin: calc(var(--cell-h) * 5) 0 calc(var(--cell-h) * 5) calc(var(--cell-w) * 10);
    padding: calc(var(--cell-h) * 2) calc(var(--cell-w) * 4) calc(var(--cell-h) * 2);
  }
}

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

h1,
h2 {
  font-weight: normal;
  margin: 0;
}

h1 {
  font-size: 33px;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

@media (min-width: 1000px) {
  h1 {
    font-size: 66px;
    line-height: 1;
    margin-bottom: 0.4em;
  }

  h2 {
    font-size: 33px;
  }
}

p {
  margin: 0 0 1em;
}

section,
.shop {
  margin-top: 2em;
}

.likes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.likes li {
  padding-left: 2ch;
  text-indent: -2ch;
}

.likes li::before {
  content: "~ ";
}

/* ---------- links ---------- */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

a:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Abandonware callout: the one inverted block ---------- */

.shop {
  background: var(--ink);
  color: var(--paper);
  padding: 1em 1.5ch;
  display: grid;
  gap: 1em 2ch;
}

.shop ::selection {
  background: var(--paper);
  color: var(--ink);
}

.shop a:hover {
  background: var(--paper);
  color: var(--ink);
}

.shop p:last-child {
  margin-bottom: 0;
}

.floppy {
  margin: 0;
  font: 11px/14px var(--mono);
  white-space: pre;
}

@media (min-width: 640px) {
  .shop {
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 1em 2ch;
  }

  .floppy {
    margin-top: 0.4em;
  }
}

@media (min-width: 1000px) {
  .floppy {
    font-size: 22px;
    line-height: 22px;
  }
}

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

.foot {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 2ch;
}

.beach-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

.beach-toggle:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}