/* =========================================================================
   Drawings from Chasing the Dot — stylesheet

   The chrome is deliberately colourless. Every bit of colour on the screen
   comes from the drawings, so the interface stays neutral grey and never
   tints how you read them.

   Two type registers, and only two:
     .micro  uppercase, wide-tracked, small  -> every label on the instrument
     prose                                   -> the intro line and the article
   ========================================================================= */

:root {
  --ground:      #101114;
  --ground-lift: #191b1f;
  --ink:         #ecece8;
  --ink-dim:     rgba(236, 236, 232, 0.5);
  --ink-faint:   rgba(236, 236, 232, 0.26);
  --ink-ghost:   rgba(236, 236, 232, 0.12);
  --rule:        rgba(236, 236, 232, 0.15);
  --panel:       rgba(24, 26, 30, 0.92);

  --font-ui: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system,
             "Segoe UI", Arial, sans-serif;
  --font-read: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;

  --micro-size: 10px;
  --micro-track: 0.2em;

  --pad: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);

  /* A soft dark glow behind text that floats over the drawings. Invisible on the
     dark ground, it only shows where a bright drawing passes underneath, and
     gives the letters back the dark background they were designed for. */
  --halo:
    0 0 1px rgba(12, 13, 16, 0.95),
    0 0 3px rgba(12, 13, 16, 0.9),
    0 0 7px rgba(12, 13, 16, 0.85),
    0 0 14px rgba(12, 13, 16, 0.7),
    0 0 26px rgba(12, 13, 16, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#app {
  position: fixed;
  inset: 0;
  touch-action: none;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 42%, var(--ground-lift) 0%, var(--ground) 68%);
}

img { -webkit-user-drag: none; user-select: none; }

/* Scrims. The field now runs edge to edge and keeps moving, so the caption and
   the rail need something behind them or the text sits on top of drawings and
   becomes unreadable. Above the images, below the chrome. */
#app::before,
#app::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}
#app::before {
  top: 0;
  height: calc(104px + var(--safe-t));
  background: linear-gradient(180deg,
    rgba(16, 17, 20, 0.92) 0%, rgba(16, 17, 20, 0.6) 52%, rgba(16, 17, 20, 0) 100%);
}
#app::after {
  bottom: 0;
  height: calc(var(--credits-h, 40px) + 84px + var(--safe-b));
  background: linear-gradient(0deg,
    rgba(16, 17, 20, 0.92) 0%, rgba(16, 17, 20, 0.6) 52%, rgba(16, 17, 20, 0) 100%);
}

/* text that floats over the drawings gets the halo */
#caption-title,
#caption-sub,
.axis-pole,
.axis-guide span,
.group-label,
.rail-chip,
#credits { text-shadow: var(--halo); }

.micro,
#caption-title,
#caption-sub,
.axis-pole,
.axis-guide span,
#credits,
#loader-text,
.rail-chip,
.group-label {
  font-size: var(--micro-size);
  font-weight: 500;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  line-height: 1.5;
}

/* =========================================================================
   THE AXIS — a hairline scale with the measure's name etched onto it.
   Horizontal by default; vertical on portrait phones, HIGH AT THE TOP.
   Everything is positioned from app.js so it tracks the camera when you zoom.
   ========================================================================= */
#axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* #axis itself has no z-index or opacity, so it makes no stacking context: the
   etched word and the hairline stay behind the drawings (z 1), the end labels
   and guides float above them (z 4). Each part fades on its own. */
#axis > * {
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms ease;
}
#axis.visible > * { opacity: 1; }
#axis > .axis-pole,
#axis > .axis-guides { z-index: 4; }

.axis-rule { position: absolute; background: var(--rule); }

.axis-word {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 56px;              /* app.js measures and overrides this */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
#axis.visible > .axis-word { opacity: 0.06; }
#app.portrait .axis-word { writing-mode: vertical-rl; }

.axis-pole {
  position: absolute;
  color: rgba(236, 236, 232, 0.72);
  white-space: nowrap;
}

/* numeric guides — used by the age scale */
.axis-guides { position: absolute; inset: 0; }

.axis-guide { position: absolute; color: var(--ink-dim); }
.axis-guide i {
  position: absolute;
  display: block;
  background: var(--ink-ghost);
}
.axis-guide span {
  position: absolute;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* horizontal scale: tick above the rule, label below */
#app:not(.portrait) .axis-guide i { width: 1px; height: 7px; top: -7px; left: 0; }
#app:not(.portrait) .axis-guide span { top: 6px; left: 0; transform: translateX(-50%); }

/* vertical scale: tick and label to the left of the rule */
#app.portrait .axis-guide i { height: 1px; width: 7px; left: -7px; top: 0; }
#app.portrait .axis-guide span { left: -12px; top: 0; transform: translate(-100%, -50%); }

#app.view-cloud #axis > *,
#app.view-cluster #axis > * { opacity: 0; }

/* =========================================================================
   PILE LABELS — the grouped views (eye colour)
   ========================================================================= */
#group-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 460ms ease;
}
#app.view-cluster #group-labels { opacity: 1; }

.group-label {
  position: absolute;
  transform: translate(-50%, 0);
  text-align: center;
  color: rgba(236, 236, 232, 0.72);
  white-space: nowrap;
}
.group-label b {
  display: block;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.2em;
}
.group-label i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(236, 236, 232, 0.35);
}
.group-label em {
  display: block;
  font-style: normal;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* =========================================================================
   THE IMAGE FIELD
   ========================================================================= */
#stage-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
  cursor: grab;
}
#stage-wrap.dragging { cursor: grabbing; }
#stage { position: absolute; inset: 0; }

.tile {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  cursor: pointer;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: box-shadow 260ms ease;
}

.tile.lifted { z-index: 40; }
.tile.lifted img { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }

/* =========================================================================
   CAPTION
   ========================================================================= */
#caption {
  position: absolute;
  top: calc(var(--pad) + var(--safe-t));
  left: 0;
  right: 0;
  z-index: 30;
  text-align: center;
  pointer-events: none;
  padding: 0 96px;
}

#caption-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-wrap: balance;
}

#caption-sub { margin: 3px 0 0; color: var(--ink-dim); }

/* =========================================================================
   THE SIDE PANEL — top-left. View controls, events, the two about pages and
   the animation switch, in short groups split by a hairline. On narrower
   screens it folds into one menu button with the list dropping below it.
   ========================================================================= */
.tool {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(16, 17, 20, 0.5);
  color: var(--ink-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 200ms ease, border-color 200ms ease;
}
.tool:hover { color: var(--ink); border-color: var(--ink-faint); }
.tool svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
}

#panel {
  position: absolute;
  top: calc(var(--pad) + var(--safe-t));
  left: var(--pad);
  z-index: 33;
}
#panel-toggle { display: none; }
#panel.open #panel-toggle { color: var(--ink); border-color: var(--ink-faint); }

#panel-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.panel-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.panel-group[hidden] { display: none; }
/* the hairline between groups */
.panel-group + .panel-group::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  margin: 7px 0 7px 11px;
  background: var(--ink-faint);
}

.panel-btn {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: rgba(236, 236, 232, 0.72);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  font-family: inherit;
  font-size: var(--micro-size);
  font-weight: 500;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  line-height: 1.5;
  text-shadow: var(--halo);
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.panel-btn:hover { color: var(--ink); }
.panel-btn[aria-current="true"],
.panel-btn[aria-pressed="true"],
#reset-view.hot {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(16, 17, 20, 0.7);
}

@media (min-width: 1024px) {
  /* A narrow column: long labels wrap onto a second line rather than widening
     the panel. It rests half see-through and comes up fully under the mouse
     (or keyboard focus). Static, so the fade costs nothing per frame. */
  #panel { width: 176px; }
  #panel-list,
  #panel::before { transition: opacity 320ms ease; }
  #panel-list { opacity: 0.5; }
  #panel::before { opacity: 0.55; }
  #panel:hover #panel-list,
  #panel:focus-within #panel-list,
  #panel:hover::before,
  #panel:focus-within::before { opacity: 1; }
  .panel-btn {
    white-space: normal;
    border-radius: 12px;
    line-height: 1.35;
    padding: 4px 10px;
  }
  .panel-group { gap: 4px; }
  /* keep the centred caption clear of the panel */
  #caption { padding: 0 200px; }
  /* a soft shade behind the panel, feathered so it has no edge, so the labels
     stay readable as drawings drift underneath (static: costs nothing per frame) */
  #panel::before {
    content: "";
    position: absolute;
    inset: -40px -60px -50px calc(-1 * var(--pad));
    z-index: -1;
    background: linear-gradient(90deg, rgba(16, 17, 20, 0.9) 0%,
                rgba(16, 17, 20, 0.78) 60%, rgba(16, 17, 20, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
    pointer-events: none;
  }
}

@media (max-width: 1023px) {
  #panel-toggle { display: grid; }
  #panel-list {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    min-width: 230px;
    max-width: calc(100vw - 2 * var(--pad));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 8px 6px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: #181a1e;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  }
  #panel.open #panel-list { display: flex; }
  .panel-btn { width: 100%; white-space: normal; text-shadow: none; padding: 6px 10px; }
  .panel-group { align-self: stretch; }
}

@media (max-width: 759px) {
  /* the menu button sits on the top row; the caption drops below it */
  #caption { top: calc(var(--pad) + var(--safe-t) + 38px); padding: 0 20px; }
  #app::before { height: calc(140px + var(--safe-t)); }
}

/* =========================================================================
   THE RAIL — named views. Dragging now explores, so navigation has to be
   explicit and legible rather than a hidden swipe.
   ========================================================================= */
#rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--credits-h, 40px) + var(--safe-b) + 4px);
  z-index: 30;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 22px,
                              #000 calc(100% - 22px), transparent);
}
#rail::-webkit-scrollbar { display: none; }

#rail-track {
  display: flex;
  gap: 5px;
  padding: 5px 24px;
  width: max-content;
  min-width: 100%;
  justify-content: center;
}

.rail-chip {
  flex: none;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: rgba(236, 236, 232, 0.66);
  cursor: pointer;
  white-space: nowrap;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.rail-chip:hover { color: var(--ink); }
.rail-chip[aria-current="true"] {
  color: var(--ink);
  border-color: var(--rule);
  background: rgba(236, 236, 232, 0.06);
}
.rail-chip .rail-kind {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--ink-faint);
}
.rail-chip[data-kind="person"] .rail-kind { background: rgba(150, 190, 255, 0.5); }
.rail-chip[aria-current="true"] .rail-kind { background: currentColor; }

#credits {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 0 18px calc(8px + var(--safe-b));
  text-align: center;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 9px;
  line-height: 1.5;
  color: var(--ink-dim);
  pointer-events: none;
  text-wrap: balance;
}

/* =========================================================================
   NAV ARROWS
   ========================================================================= */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 31;
  display: grid;
  place-items: center;
  width: 40px;
  height: 60px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-ghost);
  cursor: pointer;
  transition: color 220ms ease;
}
.nav-arrow:hover { color: var(--ink); }
.nav-arrow svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square;
}
#nav-prev { left: 0; }
#nav-next { right: 0; }

/* =========================================================================
   INTRO
   ========================================================================= */
#intro {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(16, 17, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 700ms ease, backdrop-filter 700ms ease;
  cursor: pointer;
}

#intro-inner { text-align: center; animation: rise 900ms var(--ease) both; }

#intro-text {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(19px, 5.2vw, 30px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

#intro-sub { margin: 18px 0 0; color: var(--ink-faint); }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#intro.gone {
  opacity: 0;
  pointer-events: none;
  /* once faded, take it out of the page so its blur isn't recomputed every frame */
  visibility: hidden;
  transition: opacity 700ms ease, backdrop-filter 700ms ease, visibility 0s linear 700ms;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

/* =========================================================================
   LOADER
   ========================================================================= */
#loader {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: var(--ground);
  transition: opacity 600ms ease;
}
#loader.gone { opacity: 0; pointer-events: none; }
#loader-text { margin: 0; color: var(--ink-dim); }

#loader-bar { width: min(190px, 46vw); height: 1px; background: var(--rule); }
#loader-fill {
  display: block; width: 0%; height: 100%;
  background: var(--ink); transition: width 200ms linear;
}

#loader.error #loader-bar { display: none; }
#loader.error #loader-text {
  max-width: 34ch;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* =========================================================================
   OVERLAYS — the profile and the article share their shell
   ========================================================================= */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 340ms ease, visibility 340ms ease;
}
.overlay.open { opacity: 1; visibility: visible; }

.overlay-close {
  position: absolute;
  top: calc(10px + var(--safe-t));
  right: 10px;
  z-index: 3;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 26, 30, 0.85);
  color: var(--ink-dim);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color 200ms ease;
}
.overlay-close:hover { color: var(--ink); }
.overlay-close svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square;
}

/* ---------- the profile ---------- */
#lightbox { background: rgba(10, 11, 13, 0.96); }

#lightbox-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
}

#lightbox-figure {
  margin: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  min-width: 0;
  min-height: 0;
}

#lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.98);
  clip-path: inset(-90px);          /* room for the shadow */
  transition: transform 380ms var(--ease), filter 650ms ease, clip-path 650ms ease;
}
/* The thumbnail standing in, at full size, while the big file loads. The clip
   keeps the blur inside the frame; it opens again as the sharp image fades in,
   letting the shadow back out. */
#lightbox-img.placeholder {
  filter: blur(12px) brightness(0.62);
  clip-path: inset(0 round 2px);
  transition: transform 380ms var(--ease), filter 0ms, clip-path 0ms;
}
#lightbox.open #lightbox-img { transform: none; }

#profile {
  border-left: 1px solid var(--rule);
  background: var(--panel);
  padding: calc(24px + var(--safe-t)) 22px calc(24px + var(--safe-b));
  overflow-y: auto;
  overscroll-behavior: contain;
}

#profile-head { margin-bottom: 20px; }
#profile-eyebrow { margin: 0; color: var(--ink-faint); }
#profile-title {
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#profile-who {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
}

.profile-block { margin-bottom: 22px; }
.profile-block.hidden { display: none; }

.profile-heading {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
}

.pf-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
  margin: 0;
}
.pf-row dt { color: var(--ink-dim); }
.pf-row dd { margin: 0; text-align: right; }
.pf-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(236, 236, 232, 0.35);
}

.pf-metric { margin: 0 0 9px; }
.pf-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 3px;
}
.pf-metric-name { font-size: 11px; color: var(--ink-dim); }
.pf-metric-value {
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pf-track {
  position: relative;
  height: 2px;
  background: rgba(236, 236, 232, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.pf-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 620ms var(--ease);
}
.pf-metric.is-current .pf-metric-name,
.pf-metric.is-current .pf-metric-value { color: var(--ink); font-weight: 600; }
.pf-metric.is-current .pf-track { background: rgba(236, 236, 232, 0.2); }

.pf-note,
#profile-foot {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

@media (max-width: 860px), (max-height: 520px) {
  #lightbox-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 42vh minmax(0, 1fr);
    overflow: hidden;
  }
  #lightbox-figure { padding: calc(16px + var(--safe-t)) 16px 8px; }
  #profile {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 18px 18px calc(18px + var(--safe-b));
  }
}

/* =========================================================================
   THE ARTICLE — dark frosted glass over the drawings, which stay visible
   and keep drifting behind it
   ========================================================================= */
#article {
  background: rgba(12, 13, 16, 0.72);
  backdrop-filter: blur(22px) saturate(0.7);
  -webkit-backdrop-filter: blur(22px) saturate(0.7);
}

#article-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(58px + var(--safe-t)) 24px calc(60px + var(--safe-b));
}

/* A hairline scrollbar for the article and the profile panel: no track, a faint
   rounded thumb that brightens a little while you use it. */
#article-scroll,
#profile {
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 236, 232, 0.16) transparent;
}
#article-scroll::-webkit-scrollbar,
#profile::-webkit-scrollbar { width: 10px; }
#article-scroll::-webkit-scrollbar-track,
#profile::-webkit-scrollbar-track { background: transparent; }
#article-scroll::-webkit-scrollbar-thumb,
#profile::-webkit-scrollbar-thumb {
  background: rgba(236, 236, 232, 0.14);
  border: 3px solid transparent;          /* keeps the visible thumb to 4px */
  border-radius: 999px;
  background-clip: padding-box;
}
#article-scroll::-webkit-scrollbar-thumb:hover,
#profile::-webkit-scrollbar-thumb:hover { background-color: rgba(236, 236, 232, 0.3); }
#article-scroll::-webkit-scrollbar-corner,
#profile::-webkit-scrollbar-corner { background: transparent; }

.article-body {
  max-width: 68ch;
  margin: 0 auto;
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(236, 236, 232, 0.86);
  text-transform: none;
  letter-spacing: 0;
  animation: rise 700ms var(--ease) both;
}

.article-body .article-byline {
  margin: -10px 0 26px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.article-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  color: var(--ink-faint);
}

.article-body h1 {
  margin: 0 0 22px;
  font-family: var(--font-ui);
  font-size: clamp(23px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.article-body h2 {
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}
.article-body h2 em { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

.article-body p { margin: 0 0 17px; }

.article-body .lede {
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--ink);
}

.article-body em { font-style: italic; }

.article-body a {
  color: rgba(160, 195, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 195, 255, 0.3);
  word-break: break-word;
}
.article-body a:hover { border-bottom-color: rgba(160, 195, 255, 0.8); }

/* alphabetical, so unnumbered, with a hanging indent */
.article-body .refs {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-dim);
}
.article-body .refs li { margin-bottom: 12px; padding-left: 1.6em; text-indent: -1.6em; }

/* the article is prose, so let people select and copy it */
#article, #article * { user-select: text; -webkit-user-select: text; }

@media (min-width: 760px) {
  #article-scroll { padding-left: 40px; padding-right: 40px; }
  .article-body { font-size: 17px; }
}

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #lightbox-img, #intro-inner, .article-body, .pf-fill {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

@media (min-width: 760px) {
  :root { --micro-size: 11px; --pad: 22px; }
  #caption-title { font-size: 13px; }
  #credits { font-size: 10px; padding-bottom: 12px; }
}