@import "./dunn.dev/reference/tokens/motion.css";

:root {
  /* working accent for talk four; change with the title */
  --sig:      #8a4b12;
  --sig-text: #733e0f;
  --rule-every: 5; --rule-on: 4; --rule-rate: .13;
  --hatch-rate: .15; --hatch-w: 2.5;
  --f-stroke: 2;
}

.ask { display: inline-block; font-family: var(--mono); font-size: .8em; letter-spacing: .04em; font-weight: 700;
  color: var(--sig-text); border: 1px dashed var(--sig); padding: 1px 6px; }
.thesis { max-width: 62ch; margin-top: 22px; }
.src { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.src .g { font-family: var(--mono); font-size: 11px; font-weight: 700; border: 1px solid var(--ink-3); padding: 1px 5px; margin-right: 8px; }
.prose:empty { display: none; }

/* phone: a plate keeps its drawn size and scrolls sideways, so its labels stay legible */
@media (max-width: 600px) {
  .stage-inner { overflow-x: auto; }
  .stage svg { min-width: 720px; }
}

/* a plate with nothing yet on its first step shows its marks faintly (figures/motion.js) and they give way as the real marks come on; the static modes never see them */
.ink-ghost { display: none; pointer-events: none; }
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  :root { --ghost: .18; }
  .ink-ghost { display: inline; opacity: calc(var(--ghost) * (1 - var(--e))); }
}