/* D-DIN by Datto, the free (SIL Open Font License) cut of DIN 1451, the
   lettering Bahnschrift is based on. Files unmodified from
   github.com/amcchord/datto-d-din; licence in fonts/OFL-1.1.txt. */
@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #111;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  /* The modem handshake, drawn as a spectrogram: time runs left to right,
     pitch bottom to top. Built by scripts/render-background.sh. */
  background: var(--paper) url("media/handshake.jpg") center / cover no-repeat;
  color: var(--ink);
  font-family: "D-DIN", "DIN Alternate", "DIN", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

@media (max-aspect-ratio: 3/4) {
  body { background-image: url("media/handshake-portrait.jpg"); }
}

/* The breathing redraw of the background (breathe.js), under the type. */
.breath {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Type sits above the spectrogram in solid ink. A soft white halo behind
   each line fades the graphic out around the words so it never clashes. */
main, footer {
  position: relative;
  z-index: 1;
  color: var(--ink);
  text-align: center;
}

h1, footer a {
  position: relative;
  isolation: isolate;
}

h1::before,
footer a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.9em -1.4em;
  background: radial-gradient(closest-side, var(--paper) 55%, rgb(255 255 255 / 0.85) 75%, rgb(255 255 255 / 0));
  pointer-events: none;
}

footer a::before {
  inset: -1.4em -2.2em;
}

main {
  display: grid;
  place-items: center;
  padding: 0 16px;
}

h1 {
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 8.5rem);
  letter-spacing: 0.14em;
  /* letter-spacing trails the last letter; pull it back so the word centres */
  margin-right: -0.14em;
  line-height: 1;
}

/* The title looks stamped: see the #stamp filter in index.html. It sits on
   an inner span so the white halo behind the title stays clean. */
h1 .ink {
  color: #303030;
  filter: url(#stamp);
}

@media (max-width: 600px) {
  h1 .ink { filter: url(#stamp-soft); }
}

footer {
  padding: 0 16px clamp(5rem, 15vh, 11rem);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
}

footer a {
  color: inherit;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.07em;
}

footer a:hover,
footer a:focus-visible {
  text-decoration-thickness: 0.14em;
}

footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}