/* readcommons.com, the public page.
 *
 * The look is borrowed from the object the product is about: a bound book.
 * Indigo cloth board, parchment text, gilt hairlines, and one vermilion used
 * the way a rubric is used in a manuscript, to mark the line being read.
 * Vermilion appears nowhere else, so wherever it appears it means "here".
 *
 * Written mobile first. Sizes are fluid with clamp(), so nothing jumps at a
 * single breakpoint, and every control a thumb can reach is at least 44px. */

@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --board: #151a2c;
  --board-raised: #1c2239;
  --board-sunk: #101423;
  --rule: #2b3352;
  --parchment: #ece5d6;
  --parchment-soft: #a9a696;
  --parchment-faint: #767a8b;
  --rubric: #d1503a;
  --rubric-wash: rgba(209, 80, 58, 0.16);
  --gilt: #c9a45e;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* the gutter grows with the screen: 1rem on a small phone, 1.5rem on a
     large one, 3rem on a desktop */
  --gutter: clamp(1rem, 0.35rem + 2.6vw, 3rem);
  --page: min(1120px, 100% - var(--gutter) * 2);
  --column: min(680px, 100%);

  /* vertical rhythm between the big sections, fluid rather than stepped */
  --section-gap: clamp(3rem, 1.1rem + 7.6vw, 6rem);
  --tap: 44px;

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

html {
  scroll-behavior: smooth;
  /* iOS must not inflate the type when the phone is turned */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* nothing may ever push the document sideways */
  overflow-x: hidden;
  /* a notch or a rounded corner never eats a word */
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  background: var(--board);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* a tap must not paint a grey rectangle over the parchment */
a,
button,
select,
[role="button"] {
  -webkit-tap-highlight-color: rgba(201, 164, 94, 0.18);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gilt);
  margin: 0 0 1.25rem;
}

/* ── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--page);
  margin: 0 auto;
  padding: 0.7rem 0;
  padding-top: calc(0.7rem + var(--safe-t));
  border-bottom: 1px solid var(--rule);
}

.masthead .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* the hit area is 44px tall without the mark itself growing */
  min-height: var(--tap);
  padding: 0.5rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2.4vw, 1.5rem);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.masthead nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.35rem;
  color: var(--parchment-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

/* the sign in link is the one thing to do here, so on a phone it reads as a
   control rather than as a third word in a row of words */
.masthead nav .enter {
  padding-inline: 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--parchment);
}

@media (hover: hover) {
  .masthead nav a:hover {
    color: var(--parchment);
    border-bottom-color: var(--gilt);
  }
  .masthead nav .enter:hover {
    border-color: var(--gilt);
    border-bottom-color: var(--gilt);
  }
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  width: var(--page);
  margin: 0 auto;
  /* Short on purpose: the panel below is the argument, and it has to be
     visible without scrolling on a laptop. */
  padding: clamp(1.75rem, 0.6rem + 4.6vw, 3.25rem) 0 clamp(1.25rem, 3vw, 1.75rem);
}

.hero h1 {
  font-size: clamp(1.85rem, 1.15rem + 3.6vw, 3.3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  max-width: 20ch;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--rubric);
}

.hero .lede {
  max-width: 54ch;
  margin: 0;
  font-size: clamp(1.05rem, 0.97rem + 0.4vw, 1.2rem);
  color: var(--parchment-soft);
  text-wrap: pretty;
}

.hero .lede strong {
  color: var(--parchment);
  font-weight: 400;
}

/* ── the demo, the one thing this page is for ─────────────────────────── */

.demo {
  width: var(--page);
  margin: clamp(1.25rem, 3.5vw, 1.75rem) auto 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--board-sunk);
  overflow: hidden;
}

.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem clamp(0.75rem, 3vw, 1.25rem);
  border-bottom: 1px solid var(--rule);
  background: var(--board-raised);
}

.demo-book {
  min-width: 0;
}

.demo-book b {
  display: block;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 0.98rem);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-book span {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--parchment-faint);
  margin-top: 0.15rem;
  /* This line carries the provenance of the scan, which is what makes showing
     it legitimate. It wraps rather than truncates, at every width. */
}

.views {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  flex: none;
}

.views button {
  appearance: none;
  border: 0;
  background: var(--board-sunk);
  color: var(--parchment-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* 44px tall, and wide enough for a thumb, without changing the look */
  min-height: var(--tap);
  min-width: 3.6rem;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
}

.views button[aria-pressed="true"] {
  background: var(--gilt);
  color: #17130a;
}

.stage {
  position: relative;
  /* on a phone the transport has to stay in the frame with the stage, so the
     stage is capped against the small viewport height rather than a fixed px */
  height: 46vh;
  height: min(46dvh, 400px);
  min-height: 260px;
  overflow: hidden;
}

.demo[data-view="page"] .stage {
  height: 62vh;
  height: min(62dvh, 520px);
  min-height: 300px;
}

.pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.pane[hidden] {
  display: none;
}

/* text pane: a reading column, with the rubric in its margin */

.pane-text {
  padding: clamp(1.1rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem) clamp(2rem, 6vw, 3rem);
}

.reading {
  width: var(--column);
  margin: 0 auto;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.12rem);
  line-height: 1.8;
  color: #cfcabb;
}

.reading .sentence {
  cursor: pointer;
  padding: 0.06em 0.14em;
  margin: 0 -0.14em;
  border-radius: 2px;
  transition: background-color 140ms ease, color 140ms ease;
  touch-action: manipulation;
}

@media (hover: hover) {
  .reading .sentence:hover {
    background: rgba(201, 164, 94, 0.12);
  }
}

.reading .sentence.live {
  background: var(--rubric-wash);
  color: var(--parchment);
  box-shadow: -0.55rem 0 0 -0.42rem var(--rubric);
}

/* page pane: the scan, with the same sentence carried under it */

.pane-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(0.9rem, 3vw, 1.25rem) clamp(0.9rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
  background: var(--board-sunk);
  /* the whole page has to fit: a cropped plate proves nothing */
  overflow: hidden;
}

.pane-page img {
  max-width: min(100%, 560px);
  min-height: 0;
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  background: #fff;
}

.page-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--parchment-faint);
  text-align: center;
  max-width: 46ch;
  margin: 0;
}

/* transport */

.transport {
  display: grid;
  /* one row on a wide screen, two on a phone: the scrubber gets the whole
     width where a thumb needs it */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.6rem clamp(0.75rem, 3vw, 1.25rem);
  padding-bottom: 0.6rem;
  border-top: 1px solid var(--rule);
  background: var(--board-raised);
}

.play {
  appearance: none;
  border: 0;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--gilt);
  color: #17130a;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  touch-action: manipulation;
}

.play svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* The bar is 4px of gilt, as it should be. The thing a thumb actually hits
   is the 44px tall transparent block drawn over it. */
.scrub {
  position: relative;
  height: 4px;
  background: var(--rule);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  touch-action: none;
}

.scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tap);
  transform: translateY(-50%);
}

.scrub .played {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--gilt);
  border-radius: 2px;
}

/* the head of the played bar, so the thumb has something to aim at */
.scrub .played::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gilt);
  transform: translateY(-50%);
}

.clock,
.rate {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--parchment-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
  white-space: nowrap;
}

.rate {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rule);
  background: var(--board-sunk);
  color: var(--parchment-soft);
  border-radius: 2px;
  /* a real control: 44px tall, with room for the caret drawn behind it */
  min-height: var(--tap);
  padding: 0 1.7rem 0 0.7rem;
  cursor: pointer;
  touch-action: manipulation;
  background-image: linear-gradient(45deg, transparent 50%, var(--parchment-faint) 50%),
    linear-gradient(135deg, var(--parchment-faint) 50%, transparent 50%);
  background-position: calc(100% - 0.95rem) calc(50% + 1px), calc(100% - 0.65rem) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.rate option {
  background: var(--board-raised);
  color: var(--parchment);
}

.demo-caption {
  width: var(--page);
  margin: 0.9rem auto 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--parchment-faint);
  max-width: 78ch;
}

.demo-caption b {
  color: var(--parchment-soft);
  font-weight: 400;
}

/* ── try it: three things to do on the panel above ────────────────────── */

.tryit {
  width: var(--page);
  margin: clamp(2.25rem, 6vw, 3.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3.5vw, 1.75rem) 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 4vw, 2rem);
}

.tryit h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gilt);
}

.tryit p {
  margin: 0;
  color: var(--parchment-soft);
}

.tryit p b {
  display: block;
  color: var(--parchment);
  font-weight: 600;
}

/* ── proof: real screens of the running reader ────────────────────────── */

.proof {
  width: var(--page);
  margin: var(--section-gap) auto 0;
  display: grid;
  gap: clamp(2.75rem, 7vw, 4.5rem);
}

.shot {
  display: grid;
  gap: clamp(1.1rem, 3.5vw, 2.5rem);
  align-items: center;
}

.shot figure {
  margin: 0;
  position: relative;
}

/* A 1400x900 capture shrunk into a narrow column is a grey band. Under 641px
   the picture swapped in is the reader on a phone, shown whole (see the phone
   block at the end of this file). Between 641 and 760 the desktop capture is
   shown whole. Above that it is cropped here and opened in full on a tap:
   --fx/--fy is the point to hold in view, --z how far into it to go. */
.shot .frame {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--board-sunk);
  cursor: zoom-in;
  touch-action: manipulation;
  aspect-ratio: 13 / 9;
  position: relative;
}

.shot .frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: scale(var(--z, 1));
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}

.shot-library {
  --fx: 0.14;
  --fy: 0.62;
  --z: 2.5;
}
.shot-reader {
  --fx: 0.5;
  --fy: 0.24;
  --z: 2.5;
}
.shot-page {
  --fx: 0.5;
  --fy: 0.45;
  --z: 2.5;
}

.shot .zoom-hint {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  background: rgba(16, 20, 35, 0.86);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-soft);
  pointer-events: none;
}

.shot .zoom-hint svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: var(--gilt);
  stroke-width: 1.7;
  stroke-linecap: round;
}

@media (hover: hover) {
  .shot .frame:hover {
    border-color: var(--gilt);
  }
}

.shot h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}

.shot p {
  margin: 0;
  color: var(--parchment-soft);
  max-width: 42ch;
  text-wrap: pretty;
}

.shot p + p {
  margin-top: 0.75rem;
}

/* the lightbox: a plain dialog, no library */

.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /* opaque rather than a wash: on a phone the lightbox is the whole screen,
     and the page showing faintly through it only muddies the capture */
  background: var(--board);
  color: var(--parchment);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(13, 16, 28, 0.97);
}

.lightbox .frame-full {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: calc(4.6rem + var(--safe-t)) var(--safe-r) calc(3rem + var(--safe-b)) var(--safe-l);
  -webkit-overflow-scrolling: touch;
}

.lightbox img {
  display: block;
  /* wider than the phone on purpose: the point is to read it, and the frame
     scrolls sideways to let you */
  width: max(100%, 900px);
  height: auto;
  border-radius: 2px;
}

.lightbox .close {
  position: absolute;
  top: calc(0.5rem + var(--safe-t));
  right: calc(0.5rem + var(--safe-r));
  z-index: 2;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--board-raised);
  color: var(--parchment);
  font-family: var(--mono);
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
}

.lightbox .cap {
  position: absolute;
  left: calc(0.75rem + var(--safe-l));
  right: calc(3.75rem + var(--safe-r));
  top: calc(0.9rem + var(--safe-t));
  margin: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--parchment-faint);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ── run it ───────────────────────────────────────────────────────────── */

.run {
  width: var(--page);
  margin: var(--section-gap) auto 0;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 4.5vw, 2.5rem);
}

.run h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.run > p {
  margin: 0 0 1.5rem;
  color: var(--parchment-soft);
  max-width: 56ch;
}

.install {
  position: relative;
}

.run pre {
  margin: 0;
  padding: 1.1rem clamp(0.9rem, 3vw, 1.4rem);
  padding-right: clamp(3.4rem, 8vw, 4rem);
  background: var(--board-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--mono);
  font-size: clamp(0.74rem, 0.68rem + 0.3vw, 0.82rem);
  line-height: 1.9;
  color: var(--parchment);
  /* selectable, always */
  -webkit-user-select: text;
  user-select: text;
}

.run pre .c {
  color: var(--parchment-faint);
}

/* the block scrolls sideways on a phone: say so with a fade at its edge */
.install::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: 2.5rem;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to right, rgba(16, 20, 35, 0), var(--board-sunk) 78%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms ease;
}

.install[data-scrolled="end"]::after {
  opacity: 0;
}

.copy {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 1;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--board-raised);
  color: var(--parchment-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.copy svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy[data-done="yes"] {
  color: var(--gilt);
  border-color: var(--gilt);
}

@media (hover: hover) {
  .copy:hover {
    color: var(--parchment);
    border-color: var(--gilt);
  }
}

.run .after {
  margin: 1.25rem 0 0;
  color: var(--parchment-soft);
  max-width: 64ch;
  font-size: 0.98rem;
}

.run .after code {
  /* a long command must break rather than widen the page */
  overflow-wrap: anywhere;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--gilt);
}

/* ── closing ──────────────────────────────────────────────────────────── */

.closing {
  width: var(--page);
  margin: var(--section-gap) auto 0;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 4.5vw, 2.5rem);
}

.closing h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.closing p {
  margin: 0;
  max-width: 60ch;
  color: var(--parchment-soft);
  text-wrap: pretty;
}

.colophon {
  width: var(--page);
  margin: var(--section-gap) auto 0;
  padding: 0.75rem 0 calc(2rem + var(--safe-b));
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 2rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--parchment-faint);
}

.colophon > span {
  padding: 0.5rem 0;
}

.colophon nav {
  display: flex;
  gap: clamp(0.35rem, 2vw, 1.5rem);
  margin-left: -0.4rem;
}

.colophon a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.4rem;
  color: var(--parchment-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .colophon a:hover {
    border-bottom-color: var(--gilt);
  }
}

/* ── small phones: 430px and under ────────────────────────────────────── */

@media (max-width: 430px) {
  /* the masthead has room for the mark and two words, not three */
  .masthead nav .away {
    display: none;
  }

  .masthead .wordmark {
    font-size: 1rem;
  }

  .masthead nav {
    font-size: 0.72rem;
  }

  .masthead nav .enter {
    padding-inline: 0.6rem;
  }

  /* the scrubber takes a row of its own, where a thumb can hold it */
  .transport {
    grid-template-columns: auto auto 1fr auto;
  }

  .scrub {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0.35rem;
  }

  .play {
    grid-row: 2;
  }

  .clock {
    grid-row: 2;
  }

  .rate {
    grid-row: 2;
    grid-column: 4;
  }

  .demo-caption {
    font-size: 0.68rem;
  }

  /* Below 430px a title and a two button toggle on one row leaves the title
     with about 12 characters, so it is cut. Stack them: the book gets the
     full width, the toggle keeps its thumb sized buttons. */
  .demo-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .demo-book b {
    white-space: normal;
  }

  .views {
    align-self: flex-start;
  }
}

/* ── phones and small tablets: 760px and under ────────────────────────── */

@media (max-width: 760px) {
  .shot:nth-child(even) figure {
    order: 0;
  }
}

/* Between a phone and a tablet the column is wide enough for the desktop
   capture to be read whole, so show it whole rather than cropped. */
@media (min-width: 641px) and (max-width: 760px) {
  .shot .frame {
    aspect-ratio: 1400 / 900;
  }

  .shot .frame img {
    object-fit: contain;
    object-position: center;
    transform: none;
  }
}

/* ── phones: 640px and under ──────────────────────────────────────────── */

@media (max-width: 640px) {
  /* On a phone the picture shown is the reader running on a phone, taken at
     430x932. It is displayed whole and upright: a crop of a desktop capture
     tells a visitor nothing about the screen they are holding. Nothing is
     hidden behind it, so it neither zooms nor invites a tap. */
  .shot .frame {
    aspect-ratio: 430 / 932;
    width: min(68vw, 272px);
    margin-inline: auto;
    border-radius: 14px;
    cursor: default;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  }

  .shot .frame img {
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .shot .zoom-hint {
    display: none;
  }

  /* Stacked on one column, the sections run into one another. A hairline is
     enough to say where each one ends. */
  .proof .shot + .shot,
  .run,
  .closing {
    border-top: 1px solid var(--rule);
    padding-top: clamp(2rem, 8vw, 3rem);
  }
}

/* ── tablets: 761px to 1023px ─────────────────────────────────────────── */

@media (min-width: 761px) {
  .shot {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .shot:nth-child(even) figure {
    order: 2;
  }

  /* on a screen this wide the capture is legible whole, so show it whole */
  .shot .frame {
    aspect-ratio: 1400 / 900;
    cursor: zoom-in;
  }

  .shot .frame img {
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .stage {
    height: min(60dvh, 520px);
    min-height: 340px;
  }

  .demo[data-view="page"] .stage {
    height: min(78dvh, 700px);
  }
}

@media (min-width: 1024px) {
  .shot {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .stage {
    height: min(70dvh, 580px);
    min-height: 360px;
  }

  .demo[data-view="page"] .stage {
    height: min(86dvh, 820px);
  }
}

/* ── a phone held sideways: very little height, plenty of width ───────── */

@media (max-height: 500px) and (orientation: landscape) {
  .stage {
    height: 62dvh;
    min-height: 180px;
  }

  .demo[data-view="page"] .stage {
    height: 70dvh;
    min-height: 200px;
  }

  .hero {
    padding-top: 1.25rem;
  }
}