/* 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 backdrop: 11px font, 14px rows. */
  --cell-w: 7px;
  --cell-h: 14px;
  --mono: "Departure Mono", ui-monospace, Menlo, Consolas, monospace;
  /* The panel's fill: black, slightly see-through so the backdrop shows dimly. */
  --panel: rgba(0, 0, 0, 0.75);
  /* The panel's dashed frame: line weight, dash length, and gap. */
  --frame: 2px;
  --dash: 6px;
  --gap: 6px;
}

*,
*::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 ASCII backdrop (beach, graveyard, ...) ---------- */

.backdrop {
  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 ----------
   Slightly see-through black, so the backdrop shows dimly behind the words.
   Black on black has no visible edge, so a dashed white frame (on a strip of
   solid black) marks where the box is. */

.panel {
  position: relative;
  background: var(--panel);
  box-shadow: 0 0 0 9px var(--paper);
  width: auto;
  max-width: 672px;
  /* Phones: show the backdrop 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);
}

/* Drawn with gradients rather than border-style: dashed, so the dashes are
   the same crisp size in every browser. Sits just outside the panel edge. */
.panel::before {
  content: "";
  position: absolute;
  inset: calc(var(--frame) * -1);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top / 100% var(--frame) no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom / 100% var(--frame) no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) left / var(--frame) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) right / var(--frame) 100% no-repeat;
}

@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;
}

.tagline {
  margin: 0;
}

section {
  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;
}

/* ---------- backdrop controls ----------
   Pause and next-scene buttons, sitting on the panel's dashed bottom edge. Hidden until backdrop.js runs. */

.scene-controls {
  position: absolute;
  z-index: 1;
  bottom: -0.75em;
  right: calc(var(--cell-w) * 2);
  display: flex;
  gap: 1ch;
  padding: 0 1ch;
  background: var(--paper);
  line-height: 1.5;
}

.scene-controls[hidden],
.scene-controls button[hidden] {
  display: none;
}

.scene-controls button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 0.5ch;
  cursor: pointer;
}

/* Only on devices that really hover: phones keep a tapped button "hovered". */
@media (hover: hover) {
  .scene-controls button:hover {
    background: var(--ink);
    color: var(--paper);
  }
}