/* The typewriter face, served by this site itself (no third party is contacted). */
@font-face {
  font-family: "Special Elite";
  src: url("fonts/special-elite.woff2") format("woff2");
  font-display: block;
}

:root {
  --paper: #f4eee2;
  --ink: 32, 27, 23;          /* typewriter ribbon: a warm near-black, as r, g, b */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

/* Warm white paper: a fine grain, faint longer fibres, and the edges a touch darker,
   as if the sheet were lit from the middle. All drawn by the browser, no images to load. */
body {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255, 252, 244, 0.55) 0%, rgba(255, 252, 244, 0) 55%, rgba(120, 96, 64, 0.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.35' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.37 0 0 0 0 0.27 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.29 0 0 0 0 0.22 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-attachment: fixed, scroll, scroll;
  color: rgb(var(--ink));
  font-family: "Special Elite", "American Typewriter", "Courier New", monospace;
}

/* The name, typed in the middle of the sheet. */
.sheet { display: grid; place-items: center; padding: 24px 16px; }
.name {
  margin: 0; font-weight: normal; text-align: center;
  font-size: clamp(36px, 8.4vw, 150px); line-height: 1.1; letter-spacing: 0.06em;
}
/* Upright screens: HAPTIC over MATTER, as big as fits. */
@media (max-aspect-ratio: 1/1) { .name { font-size: min(18vw, 13vh); } }

/* One line along the foot of the sheet. */
.line {
  padding: 0 16px calc(22px + env(safe-area-inset-bottom));
  text-align: center; font-size: 13px; line-height: 1.6; letter-spacing: 0.02em;
}
.row { margin: 0; }
.row.one { white-space: nowrap; }                     /* set by type.js when it fits on one line */
/* Links underlined letter by letter as they're typed (the typed letters can't share one underline). */
.line a { color: inherit; text-decoration: none; }
.line a .k.on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.line a:focus-visible { outline: 1px dashed rgb(var(--ink)); outline-offset: 3px; }

/* Words never break in the middle; lines wrap only between them. */
.type .w { display: inline-block; white-space: nowrap; }

/* Each typed character. It holds its place on the page from the start (hidden), so nothing
   shifts as the line fills in; when struck it lands a hair off, in slightly uneven ink. */
.type .k { visibility: hidden; display: inline-block; white-space: pre; }
.type .k.sp { display: inline; white-space: normal; }   /* spaces stay ordinary, so lines can break there */
.type .k.on {
  visibility: visible;
  color: rgba(var(--ink), var(--ink-a, 1));
  transform: translateY(var(--dy, 0)) rotate(var(--r, 0deg));
  text-shadow: 0 0 0.6px rgba(var(--ink), 0.35);   /* a little bleed into the paper */
  animation: strike 90ms ease-out;
}
@keyframes strike {
  from { transform: translateY(calc(var(--dy, 0px) - 0.05em)) rotate(var(--r, 0deg)) scale(1.08); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .type .k.on { animation: none; } }

/* The privacy note: the same paper, set like a typed letter. */
.page { display: block; }
.note {
  max-width: 640px; margin: 0 auto; padding: 56px 16px 72px;
  font-size: 17px; line-height: 1.7;
}
.note h1 { margin: 0 0 28px; font-weight: normal; font-size: 40px; letter-spacing: 0.06em; text-transform: uppercase; }
.note p { margin: 0 0 18px; }
.note a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.note a:focus-visible { outline: 1px dashed rgb(var(--ink)); outline-offset: 3px; }
.note .back { margin-bottom: 48px; font-size: 14px; letter-spacing: 0.04em; }
.note .back a::before { content: "← "; }
.note .date { margin-top: 36px; font-size: 14px; color: rgba(var(--ink), 0.65); }