:root {
  --ink:         #131019;
  --ink-2:       #191524;
  --ink-3:       #221C31;
  --rule:        #2C2439;
  --rule-2:      #403150;
  --paper:       #EFECF7;
  --paper-2:     #B6AECB;
  --paper-3:     #8A82A0;
  --violet:      #9D5EE6;
  --violet-deep: #7B46B8;
  --violet-ink:  #D1B0F7;

  --display: "Gabarito", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --body: "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --bay: clamp(3.5rem, 8vw, 6.5rem);
  --round: 16px;
  --round-s: 11px;
  --round-xs: 999px;

  --lift-1: 0 1px 0 rgba(239, 236, 247, 0.04), 0 16px 34px rgba(0, 0, 0, 0.42);
  --lift-2: 0 1px 0 rgba(239, 236, 247, 0.05), 0 28px 64px rgba(0, 0, 0, 0.55);
  --lift-3: 0 0 0 1px rgba(157, 94, 230, 0.30), 0 22px 52px rgba(28, 10, 54, 0.62);
  --lift-4: 0 10px 26px rgba(20, 6, 42, 0.55);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: #131019;
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.68;
  font-weight: 350;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 0.55em;
  color: var(--paper);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.35rem + 3.6vw, 3.85rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.38rem); letter-spacing: -0.008em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--violet-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--paper); }

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

strong { font-weight: 650; color: var(--paper); }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25rem; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* ------------------------------------------------------------ shell ---- */

.stenoskip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--violet-deep);
  color: #ffffff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--round-s) 0;
  font-weight: 600;
}
.stenoskip:focus { left: 0; color: #ffffff; }

.stenopad {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.stenobar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(19, 16, 25, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.stenobar__row {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.stenomark { display: inline-flex; align-items: center; text-decoration: none; }
.stenomark__glyph { height: 30px; width: auto; display: block; }
.stenomark__thick { fill: none; stroke: var(--violet); stroke-width: 3.4; stroke-linecap: round; }
.stenomark__thin { fill: none; stroke: var(--paper-2); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.stenomark__dot { fill: var(--violet-ink); }
.stenomark__word {
  fill: var(--paper);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
}

.stenobar__nav { display: block; }
.stenobar__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.stenobar__list li { margin: 0; }
.stenobar__link {
  display: inline-block;
  padding: 0.42rem 0.72rem;
  border-radius: var(--round-xs);
  color: var(--paper-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
}
.stenobar__link:hover { color: var(--paper); background: var(--ink-3); }
.stenobar__link[aria-current="page"] { color: var(--violet-ink); background: var(--ink-3); }

.stenobar__toggle { display: none; }
.stenobar__bar { display: block; }

/* -------------------------------------------------------------- hero --- */

.verbatim {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.verbatim__plate {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* The image and the scrim are both positioned with an explicit z-index, and
   the scrim is the higher of the two. An earlier revision left the image in
   normal flow and gave the scrim `z-index: -1`, which put the scrim behind
   the image inside the plate's own stacking context: it painted nothing, and
   the measured worst case for the standfirst over the bright part of the
   waveform was 1.56:1. Do not return either rule to `z-index: auto`. */
.verbatim__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
}

/* Narrow screens put text across the whole frame, so the scrim is uniform and
   heavy and the photograph reads as texture rather than as a picture. */
.verbatim__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background:
    linear-gradient(96deg, rgba(19, 16, 25, 0.96) 0%, rgba(19, 16, 25, 0.945) 46%, rgba(19, 16, 25, 0.90) 74%, rgba(19, 16, 25, 0.86) 100%),
    linear-gradient(180deg, rgba(19, 16, 25, 0.70) 0%, rgba(19, 16, 25, 0.52) 40%, rgba(19, 16, 25, 0.88) 100%);
}

.verbatim--flat {
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(123, 70, 184, 0.20) 0%, rgba(19, 16, 25, 0) 62%),
    var(--ink);
}

.verbatim__inner {
  padding-top: clamp(3.2rem, 7vw, 5.6rem);
  padding-bottom: clamp(3.2rem, 7vw, 5.6rem);
}

.verbatim__title { max-width: 17ch; margin-bottom: 0.45em; }
.verbatim__lede {
  max-width: 60ch;
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.24rem);
  color: var(--paper-2);
  line-height: 1.6;
}
.verbatim__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }

/* Above this width the hero photograph is wide enough to be worth seeing, so
   the text column is capped in viewport units and kept inside the part of the
   frame the scrim covers. Below it the hero is full bleed and the scrim is
   uniform, which is why these caps are not in the base rules: at 360px a 44vw
   measure would be a column four words wide. */
@media (min-width: 62rem) {
  .verbatim__title { max-width: min(17ch, 50vw); }
  .verbatim__lede,
  .verbatim__acts { max-width: min(60ch, 44vw); }

  /* Full bleed, the frame is wider than the photograph is tall, so `cover`
     crops the top and bottom and shows the whole width: the bright crest of
     the wave lands under the words and has to be scrimmed into nothing. Here
     the picture is narrowed to the right of the frame instead, which makes
     `cover` crop horizontally and lets `object-position` pick the part worth
     showing, the point where the wave breaks into particles. The soft left
     edge is a mask rather than another gradient so the photograph and its
     fade cannot drift apart. */
  .verbatim__img {
    left: auto;
    right: 0;
    width: 58%;
    object-position: 76% 55%;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
  }

  /* With the column capped, the scrim can be graded: close to opaque over the
     words, thin over the right of the frame where the wave breaks into
     particles and nothing is set. The 58% stop is tied to the 44vw measure
     above. Move either one and the worst case has to be measured again over
     the decoded pixels, not judged by eye. */
  .verbatim__scrim {
    background:
      linear-gradient(96deg,
        rgba(19, 16, 25, 0.97) 0%,
        rgba(19, 16, 25, 0.955) 44%,
        rgba(19, 16, 25, 0.90) 58%,
        rgba(19, 16, 25, 0.40) 74%,
        rgba(19, 16, 25, 0.18) 100%),
      linear-gradient(180deg, rgba(19, 16, 25, 0.62) 0%, rgba(19, 16, 25, 0.34) 42%, rgba(19, 16, 25, 0.84) 100%);
  }
}

.grammalogue {
  font-family: var(--display);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-ink);
  margin: 0 0 1.05rem;
}

.stroke {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.78rem 1.35rem;
  border-radius: var(--round-xs);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.stroke:hover { transform: translateY(-1px); }
.stroke--solid {
  background: var(--violet-deep);
  color: #ffffff;
  box-shadow: var(--lift-4);
}
.stroke--solid:hover { background: #8A4FCC; color: #ffffff; }
.stroke--ghost {
  border-color: var(--rule-2);
  color: var(--paper);
  background: rgba(34, 28, 49, 0.65);
}
.stroke--ghost:hover { border-color: var(--violet-deep); color: var(--paper); }

/* --------------------------------------------------------- callout ----- */

.interlineation {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--violet);
  background: var(--ink-2);
  border-radius: var(--round-s);
  padding: 1.15rem 1.3rem;
  margin: 1.6rem 0;
  box-shadow: var(--lift-1);
  color: var(--paper-2);
}
.interlineation p { margin-bottom: 0.7em; }
.interlineation p:last-child { margin-bottom: 0; }
.interlineation__label {
  display: block;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--violet-ink);
  margin-bottom: 0.55rem;
}

/* ------------------------------------------------------------ rail ----- */

.stenorail {
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2.1rem, 4.5vw, 3.1rem) 0;
}
.stenorail__hint {
  font-size: 0.88rem;
  color: var(--paper-3);
  margin: 1rem 0 0;
}
.stenorail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.stenorail__node {
  scroll-snap-align: start;
  position: relative;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: var(--round-s);
  background: var(--ink-3);
  box-shadow: var(--lift-1);
  margin: 0;
}
.stenorail__node::after {
  content: "";
  position: absolute;
  top: 1.55rem;
  right: -0.78rem;
  width: 0.56rem;
  height: 1px;
  background: var(--rule-2);
}
.stenorail__node:last-child::after { display: none; }
.stenorail__no {
  display: block;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--violet);
  margin-bottom: 0.35rem;
}
.stenorail__name {
  display: block;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.3rem;
}
.stenorail__note { display: block; font-size: 0.88rem; color: var(--paper-3); line-height: 1.5; }

/* ---------------------------------------------------------- sections --- */

.outline { padding: var(--bay) 0; border-bottom: 1px solid var(--rule); }
.outline--tint { background: var(--ink-2); }
.outline--slim { padding: clamp(1.5rem, 3.4vw, 2.3rem) 0; }
.outline--slim .interlineation { margin: 0; }
.outline:last-of-type { border-bottom: 0; }

.outlinehead { max-width: 62ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.outlinehead__title { margin-bottom: 0.4em; }
.outlinehead__line { color: var(--paper-2); font-size: 1.08rem; margin: 0; }

.brief {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(1.6rem, 3vw, 2.3rem) 0;
  border-top: 1px solid var(--rule);
}
.brief:last-child { border-bottom: 1px solid var(--rule); }
.brief__no {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--violet);
  letter-spacing: -0.04em;
}
.brief__body { min-width: 0; }
.brief__title { margin-bottom: 0.5em; }
.brief__text { color: var(--paper-2); }
.brief__text strong { color: var(--paper); }

.brieflist { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.brieflist li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.62em;
  color: var(--paper-2);
}
.brieflist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--violet-deep);
}

.contraction {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 1.6rem;
}
.phonogram {
  border: 1px solid var(--rule);
  border-radius: var(--round-s);
  background: var(--ink-3);
  padding: 1rem 1.1rem;
  box-shadow: var(--lift-1);
}
.phonogram__key {
  display: block;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 0.35rem;
}
.phonogram__value { display: block; font-size: 1.02rem; color: var(--paper); line-height: 1.45; }

.halfstroke {
  width: 3.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--violet-deep);
  margin: 0 0 1.4rem;
}

/* -------------------------------------------------------- key/value ---- */

.shortform { margin: 1.6rem 0 0; padding: 0; }
.shortform__row {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: 0.4rem 1.6rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--rule);
}
.shortform__row:last-child { border-bottom: 1px solid var(--rule); }
.shortform__key {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--paper-3);
  margin: 0;
}
.shortform__value { margin: 0; color: var(--paper); min-width: 0; }

/* ------------------------------------------------------------ plate ---- */

.stenoplate {
  margin: 2.2rem 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--round);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: var(--lift-2);
}
.stenoplate__img { width: 100%; height: auto; }
.stenoplate__cap {
  margin: 0;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--paper-3);
  background: var(--ink-2);
}

/* ------------------------------------------------------------ table ---- */

.phrasebookscroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--round-s);
  background: var(--ink-2);
  box-shadow: var(--lift-1);
  -webkit-overflow-scrolling: touch;
}
.phrasebook {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.55;
}
.phrasebook caption {
  text-align: left;
  padding: 0.9rem 1.05rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--violet-ink);
  border-bottom: 1px solid var(--rule);
}
.phrasebook th, .phrasebook td {
  text-align: left;
  vertical-align: top;
  padding: 0.72rem 1.05rem;
  border-bottom: 1px solid var(--rule);
}
.phrasebook thead th {
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
  background: var(--ink-3);
  white-space: nowrap;
}
.phrasebook tbody th { font-weight: 600; color: var(--paper); }
.phrasebook td { color: var(--paper-2); }
.phrasebook tbody tr:last-child th, .phrasebook tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- documents --- */

.dictation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem);
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.vowelmark {
  border: 1px solid var(--rule);
  border-radius: var(--round-s);
  background: var(--ink-2);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--lift-1);
}
.vowelmark__title {
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin: 0 0 0.85rem;
}
.vowelmark__list {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  color: var(--paper-3);
}
.vowelmark__list li { margin-bottom: 0.42em; }
.vowelmark__link { color: var(--paper-2); text-decoration: none; }
.vowelmark__link:hover { color: var(--violet-ink); text-decoration: underline; }

.longhand { min-width: 0; max-width: 74ch; }

.penlift { margin-bottom: clamp(2rem, 4vw, 3rem); }
.penlift h1 { margin-bottom: 0.35em; }
.penlift__lede {
  font-size: clamp(1.04rem, 1rem + 0.35vw, 1.2rem);
  color: var(--paper-2);
  max-width: 58ch;
}
.penlift__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
}
.penlift__dates span {
  display: inline-block;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--round-xs);
  font-size: 0.79rem;
  color: var(--paper-3);
  background: var(--ink-2);
}

.penstroke {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  margin: 0 0 1rem;
  padding-top: 2.6rem;
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.72rem);
  scroll-margin-top: 5.5rem;
}
.penstroke__no {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: 0.02em;
}
.stenoprose { color: var(--paper-2); }
.stenoprose h3 {
  margin-top: 1.9rem;
  color: var(--paper);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
}
.stenoprose strong { color: var(--paper); }
.stenoprose li { color: var(--paper-2); }
.outline--doc { padding: 0; border-bottom: 0; }
.outline--doc:first-of-type .penstroke { padding-top: 0.6rem; }

/* ----------------------------------------------------------- footer ---- */

.endstroke {
  background: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding: clamp(2.8rem, 6vw, 4rem) 0 2rem;
  font-size: 0.94rem;
}
.endstroke__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.7fr) repeat(auto-fit, minmax(150px, 1fr));
}
.endstroke__brand { min-width: 0; }
.endstroke__blurb { color: var(--paper-3); margin: 1rem 0 0; max-width: 42ch; font-size: 0.92rem; }
.endstroke__col ul { list-style: none; margin: 0; padding: 0; }
.endstroke__col li { margin-bottom: 0.5em; }
.endstroke__col a { color: var(--paper-2); text-decoration: none; }
.endstroke__col a:hover { color: var(--violet-ink); text-decoration: underline; }
.endstroke__title {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin: 0 0 0.85rem;
}
.endstroke__legal {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  color: var(--paper-3);
  font-size: 0.86rem;
}
.endstroke__legal p { margin: 0 0 0.4em; }
.endstroke__legal p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- responsive ---- */

@media (min-width: 62rem) {
  .dictation { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: start; }
  .vowelmark { position: sticky; top: 5.5rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
}

@media (max-width: 47.99rem) {
  .stenobar__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 38px;
    padding: 0 9px;
    border-radius: var(--round-s);
    border: 1px solid var(--rule-2);
    background: var(--ink-3);
    cursor: pointer;
  }
  .stenobar__bar { width: 100%; height: 2px; border-radius: 2px; background: var(--paper-2); }
  .js-nav .stenobar__nav {
    display: none;
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 0.4rem);
    padding: 0.5rem;
    border: 1px solid var(--rule-2);
    border-radius: var(--round-s);
    background: var(--ink-2);
    box-shadow: var(--lift-2);
  }
  .js-nav .stenobar__nav.is-open { display: block; }
  .js-nav .stenobar__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .js-nav .stenobar__link { display: block; padding: 0.65rem 0.8rem; }
  .stenobar { position: relative; }
  .brief { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .shortform__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .verbatim__title { max-width: none; }
}

@media (min-width: 48rem) {
  .stenobar__toggle { display: none; }
}

/* --------------------------------------------------------- motion ------ */

.js-motion .brief,
.js-motion .outlinehead,
.js-motion .stenoplate,
.js-motion .stenorail__track {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-motion .brief.is-read,
.js-motion .outlinehead.is-read,
.js-motion .stenoplate.is-read,
.js-motion .stenorail__track.is-read {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stroke:hover { transform: none; }
  .js-motion .brief,
  .js-motion .outlinehead,
  .js-motion .stenoplate,
  .js-motion .stenorail__track {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .stenobar, .vowelmark, .verbatim__plate, .stenorail { display: none; }
  body { background: #ffffff; color: #000000; }
}