:root {
  --paper: #F6F4EF;
  --paper-2: #FBFAF8;
  --panel: #E8E5DF;
  --ink: #1A1917;
  --muted: #5E5B55;
  --rule: #D6D2CB;
  --grid: #D3CFC8;
  --hatch-a: #ECEAE6;
  --hatch-b: #E3E0DA;
  --accent: #B8401F;
  --accent-soft: rgba(184, 64, 31, 0.18);
  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --left-w: clamp(420px, 46vw, 820px);
  --axis: 60px;
  --bar-h: 64px;
  --pad: 40px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
}

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  background: var(--paper-2);
  padding: 8px 12px;
  z-index: 30;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

/* ================= left panel ================= */
/* the timeline sits on black: the colour tokens are flipped inside it, so every dot, pill,
   gridline and label inverts together (ink becomes light, paper becomes dark) */
.left {
  --ink: #EDEAE4;
  --paper-2: #1A1917;
  --muted: #9C978E;
  --grid: rgba(237, 234, 228, 0.12);
  --rule: rgba(237, 234, 228, 0.2);
  --hatch-b: #3A3733;
  --accent: #D4532B;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 14px;
  padding: 18px 18px 12px;
  background: #1A1917;
  color: var(--ink);
  border-right: 1px solid rgba(237, 234, 228, 0.16);
}

.left .pill:hover {
  background: rgba(237, 234, 228, 0.1);
}

.left .playhead-label {
  color: #FBFAF8;
}

.paths {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.paths .lbl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  min-height: 32px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.pill .count {
  font-size: 10px;
  color: var(--muted);
}

.pill:hover {
  background: var(--paper-2);
}

.pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-2);
}

.pill[aria-pressed="true"] .count {
  color: inherit;
  opacity: 0.7;
}

.pill.small {
  font-size: 11px;
  min-height: 28px;
  padding: 3px 9px;
}

/* timeline */
.tl {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tl-heads {
  display: grid;
  grid-template-columns: var(--axis) repeat(4, minmax(0, 1fr));
  align-items: end;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--muted);
}

.tl-heads span {
  padding: 0 6px;
}

.tl-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 14px 0 6px;
}

.grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.yr {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--grid);
}

.cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--axis) repeat(4, minmax(0, 1fr));
}

.cols::before {
  content: '';
}

.col {
  position: relative;
  border-left: 1px solid var(--grid);
}

.mark {
  --sw: min(18px, calc((100% - 6px) / var(--n, 1)));
  position: absolute;
  left: calc(50% + var(--k, 0) * var(--sw));
  width: 22px;
  height: 20px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mark .dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  transition: transform 140ms ease, background 140ms ease, opacity 200ms ease;
}

.mark:hover .dot {
  transform: scale(1.4);
}

.mark.in-path .dot {
  background: var(--ink);
}

.mark.dim .dot {
  opacity: 0.25;
}

.mark.on .dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.5);
}

.mark.open .dot {
  background: var(--accent);
  border-color: var(--accent);
}

.mark.on:not(.range)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  transform: translate(-50%, -50%);
  animation: ring 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes ring {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

.mark.range {
  transform: translateX(-50%);
  width: 14px;
  align-items: stretch;
}

.mark.range .dot {
  width: 8px;
  height: 100%;
  border-radius: 4px;
}

.mark.range:hover .dot {
  transform: none;
  background: var(--hatch-b);
}

.mark.range.in-path .dot {
  background: var(--muted);
  border-color: var(--muted);
}

.mark.range.on .dot {
  transform: none;
  background: var(--accent);
  border-color: var(--accent);
}

/* the falling-in intro is driven from app.js (runIntro); the 'current' ring waits until it's over */
.tl.falling .mark::after {
  display: none;
}

.path-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.path-line polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.playhead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid var(--accent);
}

.playhead.glide {
  transition: transform 1100ms cubic-bezier(.65, 0, .35, 1);
}

.playhead-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
  background: var(--accent);
  color: var(--paper-2);
  padding: 4px 5px;
  /* the label is the handle: hold it and drag up or down */
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 140ms ease, padding 140ms ease;
}

/* a bigger target than the label itself, for fingers */
.playhead-label::before {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.playhead-label:hover,
.playhead.dragging .playhead-label {
  box-shadow: 0 0 0 3px rgba(212, 83, 43, 0.35);
}

.playhead.dragging .playhead-label {
  cursor: grabbing;
  padding: 4px 8px;
}

.playhead.dragging {
  border-top-width: 2px;
}

html.scrubbing,
html.scrubbing * {
  cursor: grabbing !important;
  user-select: none !important;
}

.playhead-label:empty {
  display: none;
}

.tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper-2);
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 9px;
  width: max-content;
  max-width: 240px;
}

.tooltip[hidden] {
  display: none;
}

/* no hover on phones or touch screens, so no tooltip/thumbnail either */
@media (max-width: 860px),
(hover: none) {
  .tooltip {
    display: none !important;
  }
}

.tooltip.has-thumb {
  padding: 0 0 7px;
  width: 220px;
}

.tooltip img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 6px;
  background: #333;
}

.tooltip.has-thumb>span {
  display: block;
  padding: 0 9px;
}

.vid {
  color: var(--accent);
  font-size: 0.8em;
}

.tl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* ================= right panel ================= */
.right {
  position: relative;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  background: var(--ink);
}

/* the name bar is black, like an opened project; About unfolds out of it */
.bar {
  position: sticky;
  top: 0;
  z-index: 6;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad) 0 calc(var(--pad) + 6px);
  background: var(--ink);
  color: var(--paper-2);
  box-shadow: inset 6px 0 0 var(--accent);
  cursor: pointer;
}

.name {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  font-stretch: 72%;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--paper-2);
  transition: font-stretch 460ms cubic-bezier(.2, .7, .2, 1);
}

.name .hint {
  align-self: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--paper-2);
  padding: 2px 8px;
  border: 0;
  transition: color 140ms ease, background-color 140ms ease;
}

.bar:hover .name {
  font-stretch: 80%;
}

.bar:hover .name .hint {
  color: var(--paper-2);
  background: var(--accent);
}

.bar-note {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(251, 250, 248, 0.6);
}

/* tapes run edge to edge; the year headings and banner keep the page margin */
#list {
  padding: 0;
}

.year-head {
  position: sticky;
  top: var(--bar-h);
  z-index: 4;
  padding: 10px var(--pad) 8px calc(var(--pad) + 6px);
  background: var(--ink);
  border-top: 1px solid rgba(237, 234, 228, 0.12);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(237, 234, 228, 0.6);
}

.path-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px var(--pad);
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--mono);
  font-size: 12px;
}

.path-banner strong {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  font-stretch: 72%;
  text-transform: uppercase;
  line-height: 1;
}

.path-banner .pill {
  margin-left: auto;
  color: var(--paper-2);
  border-color: var(--paper-2);
}

.path-banner .pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* project entries: a stack of tapes. Each folded project is a spine filled with its image;
   the title is cut out in the page colour, type and year sit on paper labels.
   The tapes sit flush against each other, no boxes or gaps. */
.entry {
  margin: 0;
}

.entry-title {
  margin: 0;
  font: inherit;
}

.entry-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 13px var(--pad) 13px calc(var(--pad) + 6px);
  border: 0;
  text-align: left;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: transform 460ms cubic-bezier(.2, .8, .2, 1), box-shadow 460ms ease, background-color 400ms ease;
}

/* colours for tapes without an image yet, by type of work */
.tape[data-lane="projects"] .entry-head {
  background: #2E2B27;
}

.tape[data-lane="tools"] .entry-head {
  background: var(--accent);
}

.tape[data-lane="exhib"] .entry-head {
  background: #5C5245;
}

.tape[data-lane="writing"] .entry-head {
  background: #7D7568;
}

.spine-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: opacity 500ms ease;
}

.spine-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
  transition: transform 2.4s cubic-bezier(.2, .7, .2, 1);
}

/* a soft shade on the left (title) and right (labels, +) so both stay legible on light images */
.has-img .entry-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 500ms ease;
  background: linear-gradient(90deg, rgba(26, 25, 23, 0.62), rgba(26, 25, 23, 0.3) 45%, rgba(26, 25, 23, 0.18) 70%, rgba(26, 25, 23, 0.55));
}

.t {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.04;
  color: var(--paper);
  font-weight: 700;
  font-stretch: 72%;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  transition: font-stretch 460ms cubic-bezier(.2, .7, .2, 1);
}

/* folded rows stay one line thin; the full title shows once the tape is open */
.entry:not(.is-open) .t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.meta .tag,
.meta .when-tag {
  background: var(--paper);
  color: var(--ink);
  padding: 1px 7px;
  border: 0;
}

.meta .vid-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meta .vid-tag .tri {
  border-width: 4px 0 4px 7px;
}

.plus {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
  color: var(--paper);
  filter: drop-shadow(0 0 2px rgba(26, 25, 23, 0.7));
  transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
}

.plus::before,
.plus::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.plus::after {
  transform: translateY(-50%) rotate(90deg);
}

/* the project currently at the reading line gets an accent edge */
.entry-head::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width 260ms ease;
  pointer-events: none;
}

.entry.is-active .entry-head::after,
.entry.is-open .entry-head::after {
  width: 6px;
}

/* hover: the tape slides partly out of the stack, its image drifts, the title widens */
@media (hover: hover) {
  .entry:not(.is-open) .entry-head:hover {
    transform: translateX(16px);
    box-shadow: -12px 0 22px -10px rgba(26, 25, 23, 0.55);
  }

  .entry-head:hover .spine-img img {
    transform: scale(1.3) translateX(-3%);
  }

  .entry-head:hover .t {
    font-stretch: 84%;
  }

  .entry-head:hover .plus {
    transform: rotate(90deg);
  }
}

/* click: the tape is pulled out of the stack, then it unrolls into its image below.
   Its own spine image fades away, so the picture appears once, full width, right under the title. */
.entry.is-open .entry-head {
  animation: pull 820ms cubic-bezier(.3, .7, .2, 1);
}

.has-img.is-open .entry-head {
  background: var(--ink);
}

.entry.is-open .spine-img,
.has-img.is-open .entry-head::before {
  opacity: 0;
}

.entry.is-open .t {
  font-size: clamp(22px, 2.2vw, 34px);
}

.entry.is-open .plus {
  transform: rotate(45deg);
}

@keyframes pull {
  0% {
    transform: translateX(0);
  }

  38% {
    transform: translateX(64px) rotate(-0.7deg);
    box-shadow: -18px 14px 28px -12px rgba(26, 25, 23, 0.6);
  }

  100% {
    transform: translateX(0);
  }
}

/* closing: pushed back into the stack */
.entry.pushed .entry-head {
  animation: push 480ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes push {
  from {
    transform: translateX(40px);
  }

  to {
    transform: translateX(0);
  }
}

/* rows drop in one after another when the list is built or a path is chosen */
.list-enter .entry {
  animation: rowIn 620ms cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

/* intro: each row waits until its dot lands in the timeline, then appears with one hover 'peek' */
.intro-wait .entry,
.intro-wait .year-head {
  opacity: 0;
  transition: opacity 200ms ease;
}

.intro-wait .entry.arrived,
.intro-wait .year-head.arrived {
  opacity: 1;
}

.entry.peek:not(.is-open) .entry-head {
  transform: translateX(16px);
  box-shadow: -12px 0 22px -10px rgba(26, 25, 23, 0.55);
}

.entry.peek .spine-img img {
  transform: scale(1.3) translateX(-3%);
}

.entry.peek .t {
  font-stretch: 84%;
}

.entry.peek .plus {
  transform: rotate(90deg);
}

/* the unrolled tape: media flush and full width, then the text in the page margins */
.entry-panel {
  display: grid;
  gap: 14px;
  padding: 0 0 40px;
  background: var(--paper);
}

.entry-panel> :not(.media) {
  padding: 0 var(--pad) 0 calc(var(--pad) + 6px);
}

.entry-panel>.with {
  padding-top: 6px;
}

.entry-panel[hidden] {
  display: none;
}

.entry.is-open .entry-panel {
  animation: unfold 640ms cubic-bezier(.2, .7, .2, 1) 200ms both;
}

@keyframes unfold {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* fallback size; app.js (fitPanel) sets the real height so the whole project fits on screen */
.entry-panel .frame {
  aspect-ratio: 16 / 9;
  max-height: 60vh;
}

.entry-panel .frame[style*="height"] {
  aspect-ratio: auto;
  max-height: none;
}

.with {
  font-size: 15px;
  color: var(--muted);
}

a.org {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
}

a.org:hover {
  color: var(--accent);
}

.entry-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
}

.caption {
  margin: -8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--mono);
  font-size: 13px;
}

.block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.block .h {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 13px;
  padding: 4px 10px;
  min-height: 32px;
  text-align: left;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* media */
.media {
  margin: 0;
}

.media:empty {
  display: none;
}

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}

.frame>img,
.frame>video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame.is-contain {
  background: var(--hatch-a);
}

.frame>img.still.contain {
  object-fit: contain;
}

.entry.is-open .frame>img.still:not(.contain) {
  animation: drift 24s ease-in-out infinite alternate;
  transform-origin: 60% 40%;
}

@keyframes drift {
  from {
    transform: scale(1.02) translate(0, 0);
  }

  to {
    transform: scale(1.12) translate(-2%, 1.5%);
  }
}

/* background iframes always cover the 16:10 frame (videos are ~16:9) */
.frame>iframe.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  min-width: calc(100% * 10 / 9);
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.12);
}

.frame>iframe.player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.frame.playing {
  background: #000;
}

.play,
.badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 14px 9px 12px;
  border: 0;
  background: rgba(26, 25, 23, 0.82);
  color: var(--paper-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.badge {
  pointer-events: none;
  font-size: 11px;
  padding: 6px 10px;
}

.play {
  min-height: 44px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.play:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
}

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  aspect-ratio: 16 / 3;
  width: 100%;
  background: repeating-linear-gradient(45deg, var(--hatch-a) 0 10px, var(--hatch-b) 10px 20px);
  font-family: var(--mono);
  font-size: 12px;
  color: #4A4742;
}

/* ================= about ================= */
/* About unfolds out of the black name bar, folded on landing.
   The name (or anywhere on the bar) unfolds it; opening any project folds it again. */
.about {
  display: grid;
  grid-template-rows: 1fr;
  background: var(--ink);
  color: var(--paper-2);
  transition: grid-template-rows 560ms cubic-bezier(.7, 0, .2, 1);
}

.about.is-folded {
  grid-template-rows: 0fr;
}

.about.instant {
  transition: none;
}

.about-clip {
  min-height: 0;
  overflow: hidden;
}

.about-content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(280px, 42vh, 460px);
  padding: 28px var(--pad) 22px calc(var(--pad) + 6px);
  box-shadow: inset 6px 0 0 var(--accent);
}

.about-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.about-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.close {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  min-height: 40px;
  cursor: pointer;
  background: transparent;
  color: var(--paper-2);
  border: 1px solid var(--paper-2);
}

.close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.about-body {
  max-width: 780px;
}

.about-body p {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.28;
}

.about-body p.more {
  margin-top: 22px;
  max-width: 64ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
  color: rgba(251, 250, 248, 0.82);
}

.about .about-body a,
.about .about-body a:visited {
  color: var(--paper-2);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 160ms ease;
}

.about .about-body a:hover {
  color: var(--accent);
}

.about-foot .foot {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(251, 250, 248, 0.6);
}

/* contact links: little line icons + mono labels, same voice as the fold button */
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-links a,
.about-links a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--paper-2);
  text-decoration: none;
  transition: color 160ms ease;
}

.about-links svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: transform 160ms ease;
}

.about-links svg .fill {
  fill: currentColor;
  stroke: none;
}

.about-links a:hover,
.about-links a:focus-visible {
  color: var(--accent);
}

.about-links a:hover svg {
  transform: translateY(-2px);
}

/* ================= small screens ================= */
@media (max-width: 860px) {
  :root {
    --left-w: 100%;
    --bar-h: 46px;
    --pad: 14px;
    --axis: 46px;
  }

  /* phones: name on top, then the timeline, then the index */
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 36vh minmax(0, 1fr);
    grid-template-rows: 36dvh minmax(0, 1fr);
    padding-top: var(--bar-h);
  }

  .bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 var(--pad) 0 calc(var(--pad) + 4px);
    box-shadow: inset 4px 0 0 var(--accent);
  }

  .name {
    font-size: 20px;
    gap: 10px;
  }

  .name .hint {
    font-size: 10px;
    padding: 1px 6px;
  }

  .left {
    padding: 8px 10px 4px;
    gap: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(237, 234, 228, 0.16);
  }

  /* no path pills or footer hint on phones: the timeline gets the room */
  .paths,
  .tl-foot,
  .bar-note {
    display: none;
  }

  .tl-heads {
    font-size: 9px;
    letter-spacing: -0.02em;
  }

  .tl-heads span {
    padding: 0 3px;
    overflow-wrap: normal;
    hyphens: auto;
  }

  .mark .dot,
  .mark.on:not(.range)::after {
    width: 7px;
    height: 7px;
    border-width: 1.25px;
  }

  .mark.range .dot {
    width: 4px;
    height: 100%;
  }

  .tl-body {
    margin: 8px 0 4px;
  }

  .year-head {
    top: 0;
    padding: 6px var(--pad) 5px calc(var(--pad) + 4px);
    font-size: 11px;
  }

  /* smaller tapes, so more fit and an opened one has room */
  .entry-head {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto 12px;
    padding: 9px var(--pad) 9px calc(var(--pad) + 4px);
  }

  .entry-head::after {
    transition: none;
  }

  .entry.is-active .entry-head::after,
  .entry.is-open .entry-head::after {
    width: 4px;
  }

  .t {
    font-size: 16px;
  }

  .entry.is-open .t {
    font-size: 19px;
  }

  .plus {
    width: 12px;
    height: 12px;
  }

  .meta {
    font-size: 10px;
  }

  .meta .tag:not(.when-tag) {
    display: none;
  }

  .entry-panel {
    gap: 10px;
    padding-bottom: 24px;
  }

  .entry-panel> :not(.media) {
    padding: 0 var(--pad) 0 calc(var(--pad) + 4px);
  }

  .with {
    font-size: 13px;
  }

  .text {
    font-size: 14px;
    line-height: 1.45;
  }

  .links {
    font-size: 12px;
  }

  /* connections and paths are left out on phones */
  .entry-body .block {
    display: none;
  }

  .play {
    min-height: 38px;
    font-size: 11px;
    padding: 7px 11px 7px 10px;
    left: 10px;
    bottom: 10px;
  }

  /* on phones About sits right under the black timeline, so it turns cream to stand apart */
  .about {
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .about-content {
    min-height: 0;
    padding: 16px var(--pad) 18px;
    box-shadow: inset 4px 0 0 var(--accent);
  }

  /* contour colours are read from here by contours.js */
  .about-bg {
    --contour-minor: rgba(26, 25, 23, 0.08);
    --contour-major: rgba(26, 25, 23, 0.18);
    --contour-probe: rgba(26, 25, 23, 0.7);
  }

  .about-body p {
    font-size: 19px;
  }

  .about .about-body a,
  .about .about-body a:visited {
    color: var(--ink);
  }

  .about .about-body a:hover {
    color: var(--accent);
  }

  .about-body p.more {
    color: var(--muted);
  }

  .close {
    color: var(--ink);
    border-color: var(--ink);
  }

  .close:hover {
    color: #FFFFFF;
  }

  .about-foot .foot {
    color: var(--muted);
  }

  .about-links a,
  .about-links a:visited {
    color: var(--ink);
  }

  .about-links a:hover {
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {

  .mark.on::after,
  .entry.is-open .frame>img.still,
  .entry.is-open .entry-panel,
  .list-enter .entry,
  .entry.is-open .entry-head,
  .entry.pushed .entry-head {
    animation: none;
  }

  .entry-head,
  .spine-img img {
    transition: none;
  }

  .playhead.glide,
  .about {
    transition: none;
  }
}