@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("/fonts/special-elite.woff2") format("woff2"); font-display: swap; }

:root {
  --sheet: min(1320px, 96vw);
  --pad: clamp(14px, 3vw, 48px);
  --gw: calc(var(--sheet) - 2 * var(--pad));
  --cols: 150;
  --ink: 30 25 20;
  --red: 168 40 34;
  --paper: #ece3cf;
  --desk: #2b2a27;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--desk);
  background-image:
    radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
  min-height: 100vh;
  font-family: "Courier Prime", "Courier New", monospace;
  color: rgb(var(--ink));
  overflow-x: hidden;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------- the machine */

.machine { position: relative; padding: 26px 0 0; }

.platen {
  position: fixed; left: 0; right: 0; top: 0; height: 64px; z-index: 5;
  background: linear-gradient(#0c0c0b 0%, #2c2a28 18%, #4a4642 36%, #2a2826 60%, #0f0e0d 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .08) inset;
}
.platen::before, .platen::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px;
  background: linear-gradient(#111 0%, #555 30%, #222 60%, #000 100%);
  box-shadow: 0 0 0 2px #090909;
}
.platen::before { left: -2px; } .platen::after { right: -2px; }

.bail {
  position: fixed; left: 50%; top: 66px; width: calc(var(--sheet) + 80px); height: 7px;
  margin-left: calc(-.5 * var(--sheet) - 40px); z-index: 6;
  background: linear-gradient(#f2f2f0, #9b9a97 40%, #4f4e4b 70%, #2a2a28);
  border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.bail i {
  position: absolute; top: -6px; width: 40px; height: 19px; border-radius: 5px;
  background: linear-gradient(#111, #3a3734 30%, #141211 70%, #000); box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.bail i:first-child { left: 17%; } .bail i:last-child { right: 17%; }

/* --------------------------------------------------------------- sheets */

.sheet {
  position: relative; width: var(--sheet); margin: 0 auto; padding: 84px var(--pad) 72px;
  background: var(--paper);
  transform: rotate(var(--tilt, -.35deg));
  transform-origin: 50% 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .35) inset;
  overflow: hidden;
}
.sheet.hero { min-height: calc(100vh - 26px); }

/* paper: grain, foxing, a damp corner, the platen's shadow at the top */
.sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(10px 13px at 83% 9%, rgba(150, 88, 30, .55), rgba(150, 88, 30, 0) 70%),
    radial-gradient(6px 7px at 85.5% 11%, rgba(130, 70, 20, .5), rgba(130, 70, 20, 0) 70%),
    radial-gradient(18px 22px at 6% 58%, rgba(140, 80, 28, .35), rgba(140, 80, 28, 0) 70%),
    radial-gradient(7px 9px at 8.5% 61%, rgba(130, 70, 22, .45), rgba(130, 70, 22, 0) 70%),
    radial-gradient(9px 11px at 55% 93%, rgba(140, 80, 28, .35), rgba(140, 80, 28, 0) 70%),
    radial-gradient(5px 6px at 93% 76%, rgba(120, 60, 18, .45), rgba(120, 60, 18, 0) 70%),
    radial-gradient(14px 16px at 91% 83%, rgba(140, 80, 28, .5), rgba(140, 80, 28, 0) 70%),
    radial-gradient(6px 7px at 88% 86%, rgba(110, 55, 15, .6), rgba(110, 55, 15, 0) 70%),
    radial-gradient(4px 5px at 25% 88%, rgba(120, 60, 18, .5), rgba(120, 60, 18, 0) 70%),
    radial-gradient(7px 8px at 70% 48%, rgba(120, 60, 18, .3), rgba(120, 60, 18, 0) 70%),
    radial-gradient(52% 34% at 104% 103%, rgba(150, 104, 40, .22) 0%, rgba(150, 104, 40, .30) 52%, rgba(112, 66, 20, .62) 57%, rgba(112, 66, 20, 0) 59%),
    radial-gradient(40% 24% at 103% 102%, rgba(150, 104, 40, .12) 0%, rgba(112, 66, 20, .5) 70%, rgba(112, 66, 20, 0) 73%),
    radial-gradient(70% 20% at 100% 0%, rgba(120, 90, 40, .18), transparent 70%),
    linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .08) 40px, rgba(0, 0, 0, 0) 110px);
  mix-blend-mode: multiply;
}
/* folded corner */
.sheet::after {
  content: ""; position: absolute; right: 0; top: 0; width: 54px; height: 54px; z-index: 2;
  background: linear-gradient(225deg, var(--desk) 0 50%, #d9cfb8 50% 54%, #c8bca3 100%);
  box-shadow: -3px 3px 6px rgba(0, 0, 0, .25);
}

/* ---------------------------------------------------------- the picture */

.g {
  position: relative; z-index: 1;
  font-family: "Courier Prime", monospace;
  font-size: calc(var(--gw) / (var(--cols) * .6));
  line-height: 1;
  width: var(--gw);
  text-shadow: .9px 1.2px 0 rgb(58 48 118 / .13), 0 0 .3px rgb(var(--ink) / .5);
  -webkit-mask-image: radial-gradient(45% 40% at 101% 101%, rgba(0, 0, 0, .18), rgba(0, 0, 0, .85) 60%, #000 100%);
  mask-image: radial-gradient(45% 40% at 101% 101%, rgba(0, 0, 0, .18), rgba(0, 0, 0, .85) 60%, #000 100%);
}
.g .r { height: 1em; white-space: pre; transform: translateX(var(--x, 0)); }
.g span { color: rgb(var(--ink) / var(--a, .85)); }
.k2 { --a: .26; } .k3 { --a: .36; } .k4 { --a: .46; } .k5 { --a: .56; } .k6 { --a: .66; } .k7 { --a: .76; } .k8 { --a: .88; } .k9 { --a: 1; }
.rd { --ink: var(--red); }
.u { position: relative; top: -.07em; }
.d { position: relative; top: .07em; }
.ov, .db { position: relative; display: inline-block; width: .6em; }
.ov::after, .db::after { content: attr(data-o); position: absolute; left: 0; top: 0; color: inherit; }
.db::after { left: .07em; top: -.04em; }
.db, .hv { font-weight: 700; }

/* it types itself */
.g .r { clip-path: inset(0 100% 0 0); }
.typing .g .r {
  animation: type .42s steps(var(--cols)) forwards;
  animation-delay: calc(var(--i) * 46ms);
}
.typing.done .g .r, .still .g .r { clip-path: none; animation: none; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------ the words */

.typed {
  position: relative; z-index: 1; margin-top: 1.1em;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: clamp(12px, 1.08vw, 16px); line-height: 1.55; letter-spacing: .04em;
  white-space: pre-wrap; color: rgb(var(--ink) / .86);
  text-shadow: .8px 1px 0 rgb(58 48 118 / .12);
}
.typed p { margin: 0; }
.typed .row { display: flex; justify-content: space-between; gap: 2em; }
.typed i { font-style: normal; color: rgb(var(--ink) / .55); }
.typed b { font-weight: normal; text-shadow: .5px 0 0 rgb(var(--ink) / .7), .8px 1px 0 rgb(58 48 118 / .12); }
.typed .no { color: rgb(var(--ink) / .6); }
.typed .ask { margin-top: .6em; }
.typed .lake { margin-left: 3.5em; color: rgb(var(--ink) / .72); }
.typed a { color: rgb(var(--red) / .9); text-decoration: none; border-bottom: 1px solid rgb(var(--red) / .35); }
.typed a:hover, .typed a:focus-visible { border-color: rgb(var(--red)); outline: none; }
::selection { background: rgb(var(--red) / .25); }

/* ---------------------------------------------------------------- phone */

/* the narrow sheet (also portrait tablets): main.js swaps in the phone grid, which carries its own --cols */

@media (max-width: 640px) {
  :root { --sheet: 100vw; --pad: 12px; }
  .platen { height: 44px; } .bail { top: 46px; width: 100vw; margin-left: -50vw; }
  .sheet { padding-top: 66px; --tilt: -.6deg; }
  .sheet::after { width: 34px; height: 34px; }
  .typed { font-size: 11px; line-height: 1.6; }
  .typed .row { flex-direction: column; gap: 0; }
  .typed .lake { margin-left: 1.5em; }
  .typing .g .r { animation-delay: calc(var(--i) * 30ms); }
  .sheet.hero { min-height: calc(100vh - 26px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .g .r { clip-path: none; animation: none; }
}