.roles { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.75rem; }
.role { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; max-width: 46rem; }
.role__year { color: var(--accent); font-size: 1rem; }
.role__org {
  font: 800 clamp(2rem, 6vw, 4.25rem)/0.95 var(--font-sans); font-stretch: 75%;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.role details summary { cursor: pointer; font: 500 0.8125rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.role details ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.marker { color: var(--accent); }
.role--book { grid-template-columns: 6rem 1fr; column-gap: 1.25rem; align-items: start; }
.role--book img { grid-row: span 4; width: 6rem; }
.role--book cite { font-weight: 800; font-size: 1.375rem; line-height: 1.15; }
.cv-download { margin-top: 3rem; }
/* Bug 2: the date reel. */
.reel-host { display: inline-block; }
.reel { display: inline-block; height: 1.6em; overflow: hidden; vertical-align: bottom; }
.reel__strip { display: flex; flex-direction: column; }
.reel__strip > span { height: 1.6em; }
/* Bug 3: a glitch in the route. The zigzag is drawn by route.js in the route
   SVG; this transparent button sits over it, and route.js places it there. */
.glitch-slot { display: block; width: 100%; height: 100%; }
.bug--glitch { position: absolute !important; left: 0; top: 0; width: 2.75rem; z-index: 3; }
.bug--glitch:not([data-placed]) { visibility: hidden; }
/* Set vertically, centred in the rail, so it never covers the role's copy. */
.bug--glitch .stamp { top: 50%; left: 50%; right: auto; translate: -50% -50%; writing-mode: vertical-rl; rotate: 180deg; padding: 0.4rem 0.2rem; }

/* "Quality is everyone's responsibility": the one line to remember. */
.pull { margin: 0.5rem 0 1.5rem; padding-left: 1.25rem; border-left: 4px solid var(--pink); }
.pull p { font: 400 clamp(1.75rem, 4.5vw, 3rem)/1.05 var(--font-poster); text-transform: uppercase; color: var(--acid); max-width: 20ch; }
/* A reader's review under the book. */
.review { margin: 1rem 0; padding: 0.9rem 1rem; border-radius: 0.75rem; box-shadow: inset 0 0 0 1.5px currentColor; max-width: 34rem; }
.review__stars { color: var(--acid); letter-spacing: 0.15em; margin: 0 0 0.35rem; }
.review blockquote { margin: 0; font-size: 1.125rem; }
.review figcaption { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
