/* pdefff.com. One sheet of paper on a desk. Every animation ends on the resting style below it,
   so reduced motion (and no JavaScript) simply shows the finished page. */

/* font-display: optional never swaps a font in after the first paint, so a font that is not
   preloaded is only fetched once text needs it, arrives too late, and a first visit reads in the
   fallback. index.html preloads every face below. The italic text face only sets the note, so its
   preload carries the note's media conditions (see "The note is about a key to press"). */
@font-face {
  font-family: "Newsreader Display";
  src: url("/fonts/newsreader-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Newsreader Display";
  src: url("/fonts/newsreader-display-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: "Newsreader Text";
  src: url("/fonts/newsreader-text.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Newsreader Text";
  src: url("/fonts/newsreader-text-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

@property --fold {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  color-scheme: light;

  --desk: #E9E1D2;
  --paper: #F8F4EC;
  --paper-under: #F1EBE0;
  --paper-under-2: #ECE5D8;
  --paper-note: #FBF8F2;
  --ink: #1A1816;
  --ink-2: #4A443C;
  --ink-3: #514A42;
  --rule: rgba(26, 24, 22, 0.16);
  --blue: #587AE6;
  --pen: #3D5BC7;
  --shadow: 60, 45, 25;

  --display: "Newsreader Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text: "Newsreader Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --settle: cubic-bezier(0.2, 0.85, 0.25, 1);
  --gutter: clamp(10px, 3vmin, 40px);
  --pad-x: clamp(20px, 5vmin, 72px);
  --pad-y: clamp(18px, 3.6vmin, 44px);
  --h1: clamp(44px, min(7.1vw, 11.4svh), 116px);
  --lede: clamp(16px, min(1.45vw, 2.4svh), 22px);
  --small: clamp(15px, min(1.2vw, 2svh), 17px);

  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='0' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 .28 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 .22 0 0 0 -.085'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 .52 0 0 0 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 -4 0 0 0 3.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --highlight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23587AE6' fill-opacity='.34' d='M5 9.5C38 6.8 76 8.2 112 6.4S170 4.6 195.5 6.2L198 30.5C168 32.4 132 31.2 96 33.4S30 35.6 2 36.2Z'/%3E%3Cpath fill='%23587AE6' fill-opacity='.14' d='M5 9.5L17 9 14.5 35.8 2 36.2Z M186 5.6L195.5 6.2 198 30.5 188 31Z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  background-color: var(--desk);
  background-image:
    var(--grain-desk),
    radial-gradient(120% 90% at 28% 0%, rgba(255, 251, 243, 0.55), transparent 60%),
    radial-gradient(90% 70% at 50% 115%, rgba(var(--shadow), 0.1), transparent 70%);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: rgba(88, 122, 230, 0.3);
}

/* Desk and the stack of sheets */

.desk {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  overflow: clip;
}

.stack {
  --px: 0;
  --py: 0;
  position: relative;
  display: grid;
  width: min(100%, 1280px);
  min-height: min(calc(100svh - 2 * var(--gutter)), 880px);
}

.under {
  position: absolute;
  inset: 0;
  background-color: var(--paper-under);
  background-image: var(--grain-paper);
  box-shadow:
    0 1px 1px rgba(var(--shadow), 0.08),
    0 8px 22px rgba(var(--shadow), 0.08);
  transition: translate 0.9s var(--settle);
  animation: settle-under 1s var(--settle) backwards;
}

.under-1 {
  rotate: 0.7deg;
  translate: calc(5px + var(--px) * -4px) calc(5px + var(--py) * -3px);
  overflow: hidden;
  animation-delay: 0.08s;
}

.under-2 {
  rotate: -1deg;
  translate: calc(-6px + var(--px) * -8px) calc(8px + var(--py) * -6px);
  background-color: var(--paper-under-2);
}

/* What peeks out from the next page when the corner lifts. */
.under-lines {
  position: absolute;
  right: 18px;
  bottom: 22px;
  width: 150px;
  height: 46px;
  background: repeating-linear-gradient(to bottom, rgba(26, 24, 22, 0.16) 0 2px, transparent 2px 12px);
}

@keyframes settle-under {
  from {
    opacity: 0;
    transform: translateY(-22px) rotate(1.2deg);
  }
}

.sheet {
  --fold: 22px;
  position: relative;
  display: grid;
  transition: --fold 0.55s var(--settle);
  animation:
    settle 0.95s var(--settle) 0.14s backwards,
    fold-in 0.7s var(--settle) 1.1s backwards;
}

.sheet:has(.corner:hover) {
  --fold: 50px;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(1.012);
  }
  55% {
    opacity: 1;
  }
}

@keyframes fold-in {
  from {
    --fold: 0px;
  }
}

/* The shadow lives on its own element so the animations on the page never make the browser
   redraw it. */
.paper {
  position: absolute;
  inset: 0;
  filter:
    drop-shadow(0 1px 1px rgba(var(--shadow), 0.12))
    drop-shadow(0 12px 20px rgba(var(--shadow), 0.1))
    drop-shadow(0 34px 60px rgba(var(--shadow), 0.1));
}

.paper-face {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image:
    var(--grain-paper),
    var(--mottle),
    linear-gradient(172deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 38%),
    linear-gradient(0deg, rgba(var(--shadow), 0.035), transparent 30%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
}

/* The dog-eared corner: the back of the paper, folded over along the diagonal. */
.corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold);
  height: var(--fold);
  filter:
    drop-shadow(-1px -1px 1px rgba(var(--shadow), 0.08))
    drop-shadow(-4px -3px 5px rgba(var(--shadow), 0.09));
}

.corner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 88px;
  height: 88px;
}

.flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background:
    linear-gradient(to bottom right, #E2D9C8 0%, #EEE7DB 32%, #F8F4EC 50%, #F8F4EC 100%);
}

/* The page */

.page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) * 1.2);
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: block;
  border-radius: 6px;
  outline-offset: 6px;
}

.wordmark {
  display: block;
  height: clamp(26px, 3.6vmin, 36px);
  width: auto;
  aspect-ratio: 756.75 / 205.53;
}

.bowl {
  stroke-dasharray: 1;
  animation: draw 0.8s cubic-bezier(0.6, 0.05, 0.3, 1) 0.45s backwards;
}

.for {
  margin: 0;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(16px, 3vh, 40px);
}

.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

.headline em {
  font-style: italic;
  letter-spacing: -0.01em;
}

.nowrap {
  white-space: nowrap;
}

/* The highlighter pass. It sits over the word and multiplies, the way real highlighter ink
   does, with a darker overlap where the pen touched down and lifted. */
.hl {
  position: relative;
  display: inline-block;
}

.hl-ink {
  position: absolute;
  left: -0.1em;
  right: -0.07em;
  top: 0.4em;
  bottom: -0.02em;
  background: var(--highlight) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  rotate: -1.6deg;
  transform-origin: 0 50%;
  pointer-events: none;
  animation: swipe 0.65s cubic-bezier(0.55, 0.05, 0.25, 1) 0.75s backwards;
}

@keyframes swipe {
  from {
    transform: scaleX(0);
  }
}

.lede {
  max-width: 31em;
  margin: clamp(14px, 2.4svh, 28px) 0 0;
  font-size: var(--lede);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A checklist, ticked by hand. */
.uses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2vw, 28px);
  margin: clamp(16px, 3svh, 32px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--small);
  line-height: 1.2;
  color: var(--ink);
}

.uses li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

.box {
  position: relative;
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border: 1.25px solid rgba(26, 24, 22, 0.42);
  border-radius: 2.5px;
}

.box svg {
  position: absolute;
  left: -0.12em;
  bottom: -0.06em;
  width: 1.3em;
  height: 1.3em;
  overflow: visible;
}

.box path {
  fill: none;
  stroke: var(--pen);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: draw 0.3s cubic-bezier(0.5, 0, 0.3, 1) calc(0.95s + var(--i, 0) * 0.08s) backwards;
}

.box svg { rotate: -4deg; }
.uses li:nth-child(2) { --i: 1; }
.uses li:nth-child(2) svg { rotate: 3deg; scale: 0.94; }
.uses li:nth-child(3) { --i: 2; }
.uses li:nth-child(3) svg { rotate: -8deg; scale: 1.05; }
.uses li:nth-child(4) { --i: 3; }
.uses li:nth-child(4) svg { rotate: 1deg; }
.uses li:nth-child(5) { --i: 4; }
.uses li:nth-child(5) svg { rotate: -2deg; scale: 0.97; }

@keyframes draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
}

/* Download */

.get {
  margin-top: clamp(20px, 4svh, 44px);
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: clamp(48px, 6.4svh, 58px);
  padding: 0 20px 0 24px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-size: clamp(17px, 2.2svh, 19px);
  line-height: 1;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(26, 24, 22, 0.2),
    0 6px 12px -5px rgba(26, 24, 22, 0.32);
  transition: translate 0.2s var(--settle), box-shadow 0.2s var(--settle), background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.download:hover {
  background: #2A2621;
  translate: 0 -1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 3px rgba(26, 24, 22, 0.18),
    0 10px 18px -8px rgba(26, 24, 22, 0.36);
}

.download:active {
  translate: 0 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(26, 24, 22, 0.25);
}

/* The pen blue, not the button blue: it holds 3:1 against the darkest grain of the paper. */
.download:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 4px;
}

.arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download:hover .arrow {
  animation: nudge 0.9s var(--settle);
}

@keyframes nudge {
  40% {
    transform: translateY(3px);
  }
}

.meta {
  margin: 12px 0 0;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

.meta span {
  white-space: nowrap;
}

.meta span + span::before {
  content: "·";
  margin: 0 0.7em;
}

.meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.meta a:hover {
  color: var(--ink);
}

.meta a:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
  border-radius: 2px;
}

.version:not([hidden]) {
  animation: fade 0.6s ease-out backwards;
}

/* Narrow and short layouts give the version a line of its own (display: block, further down).
   Hold that line open while the feed loads, so the page does not jump when the version arrives.
   Inline, on wide screens, min-height does nothing. */
.meta .version {
  min-height: 1.6em;
}

/* Without a build there is no version to wait for. */
.get:has(.soon:not([hidden])) .version[hidden] {
  display: none;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* After /download found no build: the button rests until the next visit. */
.download[aria-disabled="true"] {
  background: #5A544C;
  box-shadow: none;
  cursor: default;
  translate: none;
}

.download[aria-disabled="true"] .arrow {
  display: none;
}

.soon {
  margin: 8px 0 0;
  font: italic 400 16px/1.4 var(--text);
  color: var(--pen);
}

/* 404.html: the same sheet with the headline, the button, and a way home beside it. */
.lost .get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.back {
  font-size: var(--lede);
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
}

.back:hover {
  color: var(--ink);
}

.back:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 3px;
}

/* The right-hand side: a note taped on, and a small form being filled in. */

.side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: clamp(0px, 4svh, 48px);
}

.note {
  position: relative;
  z-index: 1;
  width: clamp(150px, 13.5vw, 184px);
  margin: 0 -10px -26px 0;
  padding: 24px 18px 18px 20px;
  background-color: var(--paper-note);
  background-image: var(--grain-paper), linear-gradient(160deg, rgba(255, 255, 255, 0.7), transparent 60%);
  rotate: -3.5deg;
  translate: calc(var(--px) * 3px) calc(var(--py) * 2px);
  box-shadow:
    0 1px 1px rgba(var(--shadow), 0.12),
    0 12px 20px -8px rgba(var(--shadow), 0.3);
  transition: translate 0.9s var(--settle), rotate 0.5s var(--settle), box-shadow 0.5s var(--settle);
  animation: note-in 0.8s var(--settle) 1s backwards;
}

.note:hover {
  rotate: -2deg;
  box-shadow:
    0 2px 2px rgba(var(--shadow), 0.1),
    0 18px 26px -10px rgba(var(--shadow), 0.32);
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translateY(-16px) rotate(-5deg);
  }
  50% {
    opacity: 1;
  }
}

.note p {
  margin: 0;
  font: italic 400 clamp(17px, 2.3svh, 20px)/1.3 var(--text);
  color: var(--ink);
}

.note kbd {
  display: inline-block;
  min-width: 1.5em;
  margin: 0 0.08em;
  padding: 0.18em 0.35em 0.12em;
  border: 1px solid rgba(26, 24, 22, 0.3);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  font: 400 0.72em/1 var(--mono);
  text-align: center;
  vertical-align: 0.14em;
}

.tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 76px;
  height: 22px;
  translate: -50% 0;
  rotate: 4deg;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.14)),
    rgba(214, 201, 176, 0.7);
  box-shadow: 0 1px 1px rgba(var(--shadow), 0.1);
  clip-path: polygon(2% 0, 98% 0, 100% 22%, 97.5% 44%, 100% 66%, 97.5% 86%, 99% 100%, 1% 100%, 2.5% 80%, 0 58%, 2.5% 38%, 0 18%);
}

.slip {
  display: grid;
  gap: clamp(8px, 1.6svh, 16px);
  width: 100%;
  max-width: 372px;
}

.field {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  align-items: end;
  column-gap: 10px;
}

.label {
  padding-bottom: 7px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.value {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(34px, 5.6svh, 50px);
  padding: 0 0 6px 2px;
  border-bottom: 1px solid var(--rule);
}

.redact {
  position: relative;
  display: inline-block;
  min-height: 1em;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}

.redact-bar {
  position: absolute;
  inset: -3px -6px -5px -4px;
  background: #161412;
  border-radius: 1px;
  rotate: -0.4deg;
  transform-origin: 0 50%;
  animation: redact 0.5s cubic-bezier(0.75, 0, 0.2, 1) 3.2s backwards;
}

@keyframes redact {
  from {
    transform: scaleX(0);
  }
}

.signature {
  position: absolute;
  left: -4px;
  bottom: -8px;
  width: clamp(150px, 14vw, 200px);
  height: auto;
  aspect-ratio: 240 / 90;
  overflow: visible;
  rotate: -2deg;
  opacity: 0.92;
}

.signature path {
  fill: none;
  stroke: var(--pen);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

/* main.js adds a thinner copy of each stroke, nudged along the diagonal, so the line thickens
   and thins like a pen nib. */
.signature .nib {
  stroke-width: 0.9;
  translate: 0.5px 0.45px;
}

.signature .s1 {
  animation: draw 0.7s cubic-bezier(0.4, 0.1, 0.6, 0.95) 1.35s backwards;
}

.signature .s2 {
  animation: draw 0.85s cubic-bezier(0.4, 0.1, 0.5, 0.95) 2.05s backwards;
}

.stamp {
  display: inline-block;
  padding: 5px 8px 4px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font: 400 12.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--pen);
  opacity: 0.82;
  rotate: -2.5deg;
  -webkit-mask-image: var(--speckle), linear-gradient(100deg, rgba(0, 0, 0, 0.7), #000 35%, #000 70%, rgba(0, 0, 0, 0.8));
  -webkit-mask-composite: source-in;
  mask-image: var(--speckle), linear-gradient(100deg, rgba(0, 0, 0, 0.7), #000 35%, #000 70%, rgba(0, 0, 0, 0.8));
  mask-composite: intersect;
  animation: stamp 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) 2.95s backwards;
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
}

.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.foot > :last-child {
  justify-self: end;
}

.foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.foot a:hover {
  color: var(--ink);
}

/* Keep the footer clear of the dog-ear, which grows on hover. */
.foot {
  padding-right: max(0px, calc(36px - var(--pad-x)));
}

@media (hover: hover) {
  .foot {
    padding-right: max(0px, calc(70px - var(--pad-x)));
  }
}

/* Narrow screens: one column, the form and the note side by side under the download. */
@media (max-width: 860px) {
  :root {
    --h1: clamp(34px, min(11vw, 6.4svh), 66px);
    --lede: clamp(15.5px, min(4.2vw, 2.3svh), 19px);
    --small: clamp(14.5px, 3.9vw, 17px);
  }

  .body {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: clamp(24px, 5svh, 56px);
  }

  .side {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
  }

  .note {
    order: 2;
    flex: none;
    width: clamp(120px, 26vw, 170px);
    margin: 0 4px 6px 0;
    padding: 18px 12px 12px 14px;
  }

  .note p {
    font-size: clamp(14.5px, 3.8vw, 18px);
  }

  .tape {
    width: 58px;
    height: 18px;
    top: -9px;
  }

  .slip {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 300px;
  }

  .field {
    grid-template-columns: 3.9rem 1fr;
    column-gap: 6px;
  }

  .redact {
    font-size: 17px;
  }

  .signature {
    width: clamp(140px, 42vw, 190px);
  }

  .download {
    height: 50px;
    font-size: 17px;
  }

  .meta .version {
    display: block;
  }

  .meta .version::before {
    content: none;
  }

  .foot .folio {
    display: none;
  }

  /* "Made by ZVN" stays on one line. The other side breaks after "No account." if it must. */
  .foot {
    grid-template-columns: auto 1fr;
  }

  .foot > :first-child {
    white-space: nowrap;
  }

  .foot > :last-child {
    text-align: right;
  }
}

/* Short phones, like the iPhone SE: tighter spacing so the page still fits. */
@media (max-width: 860px) and (max-height: 700px) {
  .body {
    row-gap: 18px;
    padding-block: 10px;
  }

  .lede {
    margin-top: 12px;
  }

  .uses {
    margin-top: 14px;
    gap: 8px 16px;
  }

  .get {
    margin-top: 18px;
  }

  .slip {
    gap: 6px;
  }

  .value {
    height: 32px;
  }
}

/* The smallest phones drop the form rather than scroll. */
@media (max-width: 480px) and (max-height: 600px) {
  .side {
    display: none;
  }
}

@media (max-width: 480px) {
  .meta {
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

@media (max-width: 380px) {
  .meta {
    font-size: 11px;
    letter-spacing: 0;
  }

  .meta span + span::before {
    margin: 0 0.5em;
  }
}

/* Tablets in portrait: keep the single column to a readable measure in the middle of the sheet. */
@media (min-width: 561px) and (max-width: 860px) and (min-height: 541px) {
  .body {
    width: 100%;
    max-width: 600px;
    justify-self: center;
  }
}

/* The note is about a key to press, so phones and tablets without a keyboard skip it. This rule
   and the short-window one below decide where the note shows. The italic font's preload in
   index.html repeats them as its media, so change both together. */
@media (max-width: 560px), (hover: none) and (max-width: 860px) {
  .note {
    display: none;
  }

  .slip {
    max-width: 360px;
  }
}

/* Phones held sideways and other short windows: two compact columns, no note. */
@media (max-height: 540px) and (min-width: 560px) {
  :root {
    --h1: clamp(28px, min(5.8vw, 10svh), 50px);
    --lede: 14px;
    --small: 13.5px;
    --pad-y: 14px;
    --pad-x: clamp(20px, 4vw, 40px);
    --gutter: 8px;
  }

  .body {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-content: center;
    padding-block: 10px;
    row-gap: 0;
  }

  .side {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0 14px 0 0;
  }

  .note {
    display: none;
  }

  .lede {
    margin-top: 10px;
  }

  .uses {
    margin-top: 12px;
    gap: 6px 14px;
  }

  .get {
    margin-top: 14px;
  }

  .download {
    height: 42px;
    font-size: 16px;
  }

  .meta {
    margin-top: 8px;
  }

  .meta .version {
    display: block;
  }

  .meta .version::before {
    content: none;
  }

  .slip {
    gap: 4px;
  }

  .value {
    height: 28px;
  }

  .redact {
    font-size: 16px;
  }

  .signature {
    width: 132px;
  }

  .wordmark {
    height: 24px;
  }
}

@media (max-height: 400px) and (min-width: 560px) {
  .body {
    padding-block: 4px;
  }

  .lede {
    margin-top: 8px;
  }

  .uses {
    margin-top: 9px;
  }

  .get {
    margin-top: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}