/*
  One unit system for everything.
  --u  = 1 glyph unit in CSS px  (x-height = 100u, stem = 10u)
  The word is 855u long; 5u is cropped at each outer edge.
  Visible span across the screen is 845u (850 - 5).
*/

:root {
  --paper: #ecebe7;
  --ink: #121211;
  --quiet: #8b8a85;
  --guide: rgba(18, 18, 17, 0.1);

  --u: calc(100vw / 845);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211;
    --ink: #e6e5e0;
    --quiet: #6f6e6a;
    --guide: rgba(230, 229, 224, 0.09);
  }
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* paper tooth — static, barely there */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::after { mix-blend-mode: screen; opacity: 0.03; filter: invert(1); }
}

main {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the word ---------- */

.word {
  position: absolute;
  display: block;
  width: calc(var(--u) * 855);
  height: calc(var(--u) * 190);
  left: calc(var(--u) * -5);    /* cut on the axis of the first stem */
  bottom: 0;                    /* viewBox ends 10u below the descender: one stem of air */
  overflow: visible;
}

.ink { fill: var(--ink); }

.guides line {
  stroke: var(--guide);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

/* the only part not attached to anything is the only part that drifts */
.dot-drift {
  animation: drift 9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes drift {
  from { transform: translateY(0.7px); }   /* px == glyph units inside SVG */
  to   { transform: translateY(-0.7px); }
}

.label {
  fill: var(--quiet);
  font-size: 3.6px;          /* overwritten by script to hold ~11.5 CSS px */
  letter-spacing: 0.04em;
}

/* ---------- very wide screens: keep the band whole, let it run short ---------- */

@media (min-aspect-ratio: 4/1) {
  :root { --u: min(100vw / 845, 100vh / 215); }
}

/* ---------- phones: the band becomes a spine ---------- */

@media (max-aspect-ratio: 3/4) {
  :root { --u: min(100svh / 845, 100vw / 190); }

  .word {
    left: 0;
    top: 0;
    bottom: auto;
    transform-origin: 0 0;
    /* rotate clockwise: letters face right, read top to bottom, j hangs left */
    transform: translate(calc(var(--u) * 190), calc(var(--u) * -5)) rotate(90deg);
  }

  .label { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-drift { animation: none; }
}