/* MARCH Electronic Press Kit 2026. One page, dark only, no framework.
   Anton stands in for the file's display faces, Manrope for its body face.
   Both need their two subsets: latin carries none of the Latvian diacritics
   in Riga and Cesis, latin-ext carries all of them, so each file is declared
   with its own unicode-range or those captions render as tofu.
   Manrope ranges are copied verbatim from apps/calendar/src/index.css. */

@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --black: #000000;
  --white: #ffffff;
  --grey: #9a9a9a;
  --red: #f02326;
  --red-number: #f1070e;
  --line: #1b1b1b;
  --panel: #070707;

  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h: 54px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Headings. Anton for the file's four display headings, Manrope for page 2. */
.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
  text-transform: none;
}

.h2-body {
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
}

/* The scroll progress line, 2 px along the very top edge. */
.progress-track {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}

.progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* The fixed top bar. The only backdrop-filter on the page. */
.nav {
  position: fixed;
  inset: 2px 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

/* See app.js: the filter would trap the phone panel inside the bar. */
.nav[data-menu="open"] { backdrop-filter: none; }

.nav-home {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-mark {
  display: block;
  width: 78px;
  height: auto;
}

.nav-toggle {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 7px 14px;
  cursor: pointer;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 22px;
}

.nav-links[data-open="true"] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--black);
  z-index: 70;
}

.nav-close {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 14px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: var(--gutter);
}

.nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--grey);
  transition: color 200ms ease-out;
  white-space: nowrap;
}

.nav-links[data-open="true"] .nav-link { font-size: 1.35rem; }

.nav-link:hover { color: var(--white); }

.nav-link.is-current { color: var(--red); }

@media (min-width: 720px) {
  :root { --nav-h: 64px; --gutter: 32px; }
  .nav-toggle { display: none; }
  .nav-close { display: none; }
  .nav-links { display: flex; }
  .nav-mark { width: 96px; }
}

/* Chapters. One-shot rise on first intersection, never a loop. */
.chapter {
  padding: clamp(64px, 9vw, 120px) 0;
  border-top: 1px solid var(--line);
}

/* The rise starts from a visible state: everything meant to be read is
   readable at rest, with or without the observer. */
.js .chapter:not(.is-in) {
  transform: translateY(14px);
}

.chapter {
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.chapter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 1. Cover. */
.cover {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--nav-h) var(--gutter) 64px;
  text-align: center;
}

.cover-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
}

/* The ambient light behind the mark. The one looping animation on the site.
   It moves through transform and opacity only, never a background position
   and never a filter over the page, so the compositor carries it alone. It
   freezes on html[data-paused="true"], which app.js stamps when the tab is
   hidden, when the window loses focus and after twenty idle seconds. */
.cover-ambient {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(150vw, 1200px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.92);
  background: radial-gradient(closest-side,
    rgba(240, 35, 38, 0.36),
    rgba(240, 35, 38, 0.12) 52%,
    rgba(240, 35, 38, 0) 78%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: ambientBreath 9000ms ease-in-out infinite alternate;
}

@keyframes ambientBreath {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.42; }
  to { transform: translate(-50%, -50%) scale(1.12); opacity: 0.78; }
}

.cover-mark {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  width: min(60vw, 720px);
  cursor: pointer;
}

/* The glow sits on the wrapper, not on the masked block: a filter is applied
   before the mask, so a drop-shadow on the masked block itself would be
   computed from the solid rectangle and then cut away. */
.cover-logo-wrap {
  display: block;
  filter: drop-shadow(0 0 16px rgba(240, 35, 38, 0.32));
}

.cover-mark.is-lighting .cover-logo-wrap { animation: markGlow 2000ms ease-out both; }

@keyframes markGlow {
  0% { filter: drop-shadow(0 0 2px rgba(240, 35, 38, 0.1)); }
  30% { filter: drop-shadow(0 0 40px rgba(240, 35, 38, 0.9)); }
  100% { filter: drop-shadow(0 0 16px rgba(240, 35, 38, 0.32)); }
}

/* The mark is a mask filled with the file's red, so the highlight can sweep
   inside the letters. It is fully painted at rest, with or without script. */
.cover-logo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1149 / 508;
  background: var(--red);
  overflow: hidden;
  -webkit-mask-image: url("/img/logo-march.png");
  mask-image: url("/img/logo-march.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cover-sweep {
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-180%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.cover-mark.is-lighting .cover-sweep { animation: markSweep 1600ms ease-out both; }

@keyframes markSweep {
  0% { transform: translateX(-180%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}

/* The link in bio block: full width on a phone, one row on a laptop. */
.bio-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 38px auto 0;
  width: 100%;
  max-width: 420px;
}

.bio-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 20px;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--red);
  border-radius: 4px;
  transition: background-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
}

.bio-link:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}

.bio-glyph {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.bio-label { display: block; }

@media (min-width: 720px) {
  .bio-links {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    gap: 12px;
  }
  .bio-link { flex: 1 1 0; min-width: 0; }
}

.cover-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(240, 35, 38, 0), var(--red));
  transform-origin: 50% 0;
}

.js .cover-cue:not(.is-in) { transform: scaleY(0); }

.cover-cue.is-in { animation: cueGrow 900ms ease-out 700ms both; }

@keyframes cueGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* 2. A Rising Global Presence. */
.presence {
  display: grid;
  gap: 32px;
}

.presence-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* The four items, floating free. No box, no fill, no border, no shadow. */
.presence-items {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 40px;
}

.presence-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: 32ch;
}

.presence-item-heading {
  position: relative;
  margin: 0 0 9.6px;
  padding-top: 16px;
  font-family: var(--body);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.presence-item-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--red);
}

.presence-item-line,
.presence-item-text {
  display: block;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grey);
}

.presence-item-text strong { color: var(--white); font-weight: 800; }

@media (min-width: 720px) {
  .presence-items {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 56px;
  }
}

@media (min-width: 900px) {
  .presence {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
  }
  .presence-photo {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
  .presence-photo img {
    max-height: calc(100svh - var(--nav-h) - 48px);
    object-fit: cover;
    object-position: 50% 30%;
  }
}

/* 3. Live Performance Footage. The stills carry the player chrome in their
   pixels, so they are contained inside their card and never cropped. */
.footage-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74vw;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.footage-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
}

.media-btn {
  display: block;
  padding: 0;
  border: 0;
  background: #050505;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
}

/* On a phone each card takes the shape of its own still, capped so a
   portrait one does not fill the screen. The laptop grid overrides this. */
.footage-card .media-btn { flex: 0 0 auto; }

.footage-card .media-img {
  height: auto;
  max-height: 52vh;
}

.media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 300ms ease-out;
}

.media-btn:hover .media-img { transform: scale(1.03); }

.footage-caption {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--grey);
}

@media (min-width: 900px) {
  .footage-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 16px;
    min-height: 62vh;
  }
  .footage-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footage-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .footage-card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .footage-card:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .footage-card:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
  .footage-card .media-btn { flex: 1 1 auto; min-height: 0; }
  .footage-card .media-img { height: 100%; max-height: none; }
}

/* 4. Key Stats. */
.stats {
  display: grid;
  gap: 32px;
  align-items: stretch;
}

.stats-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 60vh;
  object-fit: cover;
  object-position: 50% 40%;
}

.stats-body { padding: 0 var(--gutter); }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 20px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.stat-number {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.95;
  color: var(--red-number);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--grey);
}

@media (min-width: 900px) {
  .stats { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; }
  .stats-photo img { max-height: none; min-height: 72vh; }
  .stats-body { padding: 0 var(--gutter) 0 clamp(32px, 5vw, 72px); align-self: center; }
  .stat-grid { gap: 40px 32px; }
}

/* 5. Concerts. */
.mosaic {
  position: relative;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

/* The concert photos are pictures, not controls: no button, no lightbox,
   no hover zoom, no pointer cursor. */
.mosaic-tile {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--white);
  font-size: clamp(2.6rem, 11vw, 9rem);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85), 0 6px 40px rgba(0, 0, 0, 0.9);
}

.entries {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.entry-caption {
  margin: 0 0 14px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.entry-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.entry-photo {
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 720px) {
  .entry-photos.is-pair { grid-template-columns: 1fr 1fr; }
}

/* 6. Let's Connect. */
.connect-list { margin: 0 0 40px; }

.connect-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.connect-row:last-child { border-bottom: 1px solid var(--line); }

.connect-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  align-self: center;
}

.connect-value {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.connect-link {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 35, 38, 0.5);
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.connect-link:hover { border-bottom-color: var(--red); color: var(--red); }

.copy-btn {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
  min-width: 82px;
}

.copy-btn:hover { background: var(--red); color: var(--white); }

.download-btn {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--red);
  border-radius: 4px;
  padding: 16px 28px;
  text-decoration: none;
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}

.download-btn:hover { background: var(--red-number); transform: translateY(-2px); }

@media (min-width: 720px) {
  .connect-row { grid-template-columns: 200px minmax(0, 1fr); gap: 8px 24px; }
}

/* The lightbox, one dialog shared by the two sequences. */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--black);
  color: var(--white);
}

.lightbox::backdrop { background: rgba(0, 0, 0, 0.94); }

.lightbox[open] {
  display: flex;
  flex-direction: column;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
}

.lightbox-counter {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.lightbox-controls {
  display: flex;
  gap: 8px;
}

.lightbox-btn {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.lightbox-btn:hover { border-color: var(--red); color: var(--red); }

.lightbox-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  touch-action: pan-y;
}

.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-frame {
  width: min(100%, 1280px);
  aspect-ratio: 16 / 9;
  border: 0;
}

.lightbox-foot {
  padding: 14px var(--gutter) 22px;
  text-align: center;
}

.lightbox-caption {
  margin: 0;
  font-size: 0.95rem;
  color: var(--grey);
  min-height: 1.5rem;
}

.lightbox-watch { margin: 8px 0 0; min-height: 1.1rem; }

.lightbox-watch-link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 35, 38, 0.5);
}

.lightbox-watch-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* The 404 page. */
.notfound {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: var(--gutter);
  text-align: center;
}

.notfound-mark { width: min(52vw, 420px); height: auto; display: block; }

.notfound-code {
  font-family: var(--display);
  font-size: clamp(4rem, 18vw, 11rem);
  line-height: 1;
  margin: 0;
  color: var(--red);
}

/* Nothing moves when the reader asked for stillness. The ambient light is
   turned off outright rather than sped up: a shortened alternating loop
   would flicker instead of stopping. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .cover-ambient {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  .cover-sweep { animation: none !important; opacity: 0; }
  .cover-mark.is-lighting .cover-logo-wrap { animation: none !important; }
  .js .chapter:not(.is-in) { transform: none; }
  .js .cover-cue:not(.is-in) { transform: scaleY(1); }
  .bio-link:hover { transform: none; }
  .media-btn:hover .media-img { transform: none; }
  .download-btn:hover { transform: none; }
}

/* A tab nobody is watching does no work: app.js stamps the attribute when the
   document is hidden, when the window loses focus and after twenty seconds
   without an interaction, and every animation, the ambient light included,
   freezes where it stands until the reader comes back. */
html[data-paused="true"] * { animation-play-state: paused; }