/* Earstep: the Harmonograph world. Paper and mauve ink by day, slate and lilac ink by night; Newsreader for the
   plate moments (headings, ratios, big numbers), Hanken Grotesk for everything read. Newsreader is variable in weight
   and optical size, so large headings get its display cut and small numbers its sturdier text cut. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F3F4F0;
  --sheet: #FFFFFF;
  --text: #241B35;
  --muted: #565A63;
  --rule: #DCDDD6;
  --pencil: #9AA0A6;
  --ink: #6A3FA0;
  --ink-text: #5A3290;
  --ink-wash: #ECE6F5;
  --on-ink: #FFFFFF;
  --verdigris: #1E7A66;
  --madder: #B23A2E;
  --shadow: 0 1px 2px rgba(36, 27, 53, 0.06), 0 12px 32px -18px rgba(36, 27, 53, 0.22);
  --shadow-lift: 0 2px 4px rgba(36, 27, 53, 0.05), 0 28px 60px -30px rgba(52, 30, 92, 0.38);
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pen: cubic-bezier(0.45, 0.05, 0.25, 1);
  /* Paper grain: neutral fractal noise, soft-light blended into the paper so its color stays the token's on average.
     The sheets drawn on top stay smooth. */
  --grain: 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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.5 0 0 0 -0.25 1.5 0 0 0 -0.25 1.5 0 0 0 -0.25 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --wide: 74rem;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16171C;
    --sheet: #1E2027;
    --text: #ECEAF2;
    --muted: #A9ACB4;
    --rule: #30323A;
    --pencil: #6F737B;
    --ink: #B9A3E6;
    --ink-text: #CDBDF0;
    --ink-wash: #2A2340;
    --on-ink: #16171C;
    --verdigris: #5FC2A8;
    --madder: #E58B80;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -20px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 60px -28px rgba(0, 0, 0, 0.75);
    /* Slate has no grain: soft-light would lift it into visible noise. */
    --grain: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  background-blend-mode: soft-light;
  color: var(--text);
  font: 400 17px/1.65 var(--body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 720px) { body { font-size: 18px; } }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--ink-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 560;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 12px; }

.icon { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
/* The logo at 40px: a drawing of 33.6px whose line is the logo's 1.25% of it, as in the app icon. */
.mark { width: 40px; height: 40px; }
.mark path { fill: none; stroke: var(--ink); stroke-width: 0.45px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

/* Header and footer */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top, 0px);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}
.head-inner { max-width: var(--wide); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 600 24px/1 var(--display); letter-spacing: -0.01em; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; font-size: 16px; font-weight: 500; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--text); }
@media (max-width: 640px) { .nav-wide { display: none; } }

.site-foot { border-top: 1px solid var(--rule); margin-top: 104px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.foot-inner { max-width: var(--wide); margin: 0 auto; padding: 44px var(--gutter) 52px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.foot-brand { display: grid; gap: 12px; }
.foot-brand p { color: var(--muted); font-size: 16px; }
.foot-links { display: grid; gap: 8px; font-size: 16px; justify-items: end; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
.foot-fine { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.6; border-top: 1px solid var(--rule); padding-top: 18px; }
.foot-fine a { color: inherit; }
@media (max-width: 640px) {
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot-links { justify-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Buttons: pills for everything you press */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font: 600 17px/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.button:active { transform: scale(0.97); }
.button.primary { background: var(--ink); color: var(--on-ink); }
.button.primary:hover { background: var(--ink-text); border-color: var(--ink-text); }
.button.ghost { background: transparent; color: var(--ink-text); }
.button.ghost:hover { background: var(--ink-wash); }
.button.small { min-height: 44px; padding: 0 18px; font-size: 16px; }
.soon { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 22px; border-radius: 999px; background: var(--ink-wash); color: var(--ink-text); font-weight: 600; font-size: 16px; white-space: nowrap; }
@media (max-width: 400px) { .soon { font-size: 15px; gap: 8px; padding: 0 16px; } }

/* Instruments: figures, plates, sound buttons, answer tiles. Shared by the landing page and the articles. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.colon { color: var(--pencil); padding: 0 0.04em; }

/* Figures */
.fig path { fill: none; stroke: var(--pencil); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease; }
.plate {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 28px;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 1;
  overflow: hidden;
}
/* An engraved plate: a fine frame just inside the edge. */
.plate::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule); border-radius: 19px; pointer-events: none; opacity: 0.7; }
.plate > svg { position: absolute; inset: 7%; width: 86%; height: 86%; }
.plate.live > svg { display: none; }
.plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-fig path { fill: none; stroke: var(--ink); stroke-width: 0.42; stroke-linecap: round; stroke-linejoin: round; }
[data-roll] { display: inline-grid; overflow: clip; vertical-align: bottom; padding-block: 0.06em; font-variant-numeric: lining-nums tabular-nums; }
.roll-item { grid-area: 1 / 1; white-space: nowrap; }

/* Sound buttons */
.hear {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-wash);
  color: var(--ink-text);
  font: 600 16px/1 var(--body);
  cursor: pointer;
  transition: transform 120ms ease, background-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}
.hear:active { transform: scale(0.97); }
.hear.is-playing { background: var(--ink); color: var(--on-ink); }
.hear:disabled { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }
.hear:disabled .icon { opacity: 0.5; }


.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-width: 56px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--text);
  font: 600 19px/1 var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
  transition: transform 120ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
}
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip[aria-pressed="true"] .colon { color: inherit; opacity: 0.6; }
.chip.is-playing { box-shadow: 0 0 0 5px var(--ink-wash); }

.play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font: 600 17px/1 var(--body);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.play:active { transform: scale(0.97); }
.play.is-playing { box-shadow: 0 0 0 6px var(--ink-wash); }
@media (prefers-reduced-motion: no-preference) {
  .play.is-playing, .chip.is-playing, .hear.is-playing { animation: sounding 1.1s ease-out infinite; }
}
@keyframes sounding {
  0% { box-shadow: 0 0 0 0 var(--ink-wash); }
  60% { box-shadow: 0 0 0 9px var(--ink-wash); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

.trail-wrap { position: relative; flex: 1 1 auto; min-width: 0; height: 16px; }
.trail-slots, .trail { display: flex; gap: 10px; height: 16px; }
.trail-slots i { width: 16px; height: 16px; display: grid; place-items: center; }
.trail-slots i::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pencil); }
.trail { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.trail li { width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); }
.trail li.right { background: var(--ink); }
.trail li.miss { box-shadow: inset 0 0 0 2px var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 20px 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--paper);
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 220ms ease;
}
.tile:not(:disabled):hover { border-color: var(--ink); }
.tile:not(:disabled):active { transform: scale(0.97); }
.tile:disabled { cursor: default; }
.tile-fig { width: 78px; height: 78px; }
.tile-name { font-weight: 600; font-size: 16px; text-align: center; line-height: 1.3; }
.tile-ratio { font: 600 19px/1 var(--display); color: var(--muted); font-variant-numeric: lining-nums; }
.tile.is-right { border-color: var(--verdigris); box-shadow: inset 0 0 0 1.5px var(--verdigris); }
.tile.is-right .fig path { stroke: var(--ink); stroke-width: 1.6; }
.tile.is-wrong { border-color: var(--madder); box-shadow: inset 0 0 0 1.5px var(--madder); }
.tile.is-dim { opacity: 0.45; }
.drill-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 26px; align-items: center; border-top: 1px solid var(--rule); padding-top: 24px; }
.result-figs { display: flex; gap: 10px; }
.result-fig { width: 100px; height: 100px; }
.result-fig.ink path { stroke: var(--ink); stroke-width: 1.5; }
.result-fig.pencil path { stroke: var(--pencil); stroke-dasharray: 2.4 2.2; }
.result-figs.summary { flex-wrap: wrap; gap: 8px; max-width: 340px; }
.result-figs.summary .result-fig { width: 60px; height: 60px; }
.result-copy { display: grid; gap: 6px; }
.verdict { font: 600 28px/1.15 var(--display); }
.verdict.right { color: var(--verdigris); }
.verdict.miss { color: var(--madder); }
.verdict.total { font-size: clamp(34px, 4vw, 44px); letter-spacing: -0.015em; }
.explain { color: var(--muted); }
.result-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .drill-result { grid-template-columns: minmax(0, 1fr); } }

/* Article cards: the blog's index, the end of each article and the landing page. The figure redraws itself on hover
   (its path has pathLength="1", so the dashes are in fractions of its length). */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.card { min-width: 0; }
.card a {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: 22px 22px 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 24px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 260ms ease, transform 260ms var(--pen);
}
.card a:hover { border-color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card-fig { width: 84px; height: 84px; margin-bottom: 6px; }
.card-fig path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .card a:hover .card-fig path, .card a:focus-visible .card-fig path { animation: redraw 1.5s var(--pen); }
}
@keyframes redraw { from { stroke-dashoffset: 1; } }
.card-meta { font-size: 14px; color: var(--muted); }
.card-title { font: 560 25px/1.12 var(--display); letter-spacing: -0.012em; text-wrap: balance; font-variant-numeric: lining-nums; }
.card-text { color: var(--muted); font-size: 16px; line-height: 1.55; }
.card-try { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink-text); }
.card-try .icon { width: 0.75em; height: 0.75em; }

/* Content pages: legal, support, credits */
.doc-page { max-width: 46rem; margin: 0 auto; padding: 60px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.doc-page p, .doc-page li { overflow-wrap: anywhere; }
.doc-page h1 { font-size: clamp(38px, 6vw, 58px); font-weight: 540; line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 4px; }
.doc-page h2 { font-size: clamp(25px, 3vw, 30px); margin-top: 22px; }
.doc-page h3 { font: 600 19px/1.35 var(--body); margin-top: 8px; letter-spacing: 0; }
.doc-page .lead { font-size: 20px; color: var(--muted); }
.doc-page .updated { color: var(--muted); font-size: 16px; }
.doc-page ul, .doc-page ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.doc-page li { padding-left: 0.2em; }
.summary-box { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
thead th { font-weight: 600; color: var(--muted); font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { min-width: 9rem; }

.not-found { justify-items: start; padding-top: 80px; }
.lost-fig { width: 120px; height: 120px; }
.lost-fig path { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }

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