/* ═══════════════════════════════════════════════════════════════════════════
   Tolulope Elijah — v2, the disc library.

   Sizing is fluid. 1em is derived from the viewport through --size-font,
   so the whole layout scales as one piece: 12px at 1440 wide, 16px at 1920,
   with its own curve inside each breakpoint band. Every measurement below
   is in em so it rides that scale.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* a circle drawn by hand, used as a mask so it can take any colour */
  --drawn-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 4C74 4.5 96.5 24 96.5 50.5 96.5 76 74.5 96.5 49.5 96.5 25 96.5 3.5 75.5 3.5 49 3.5 23.5 25 4.5 49 4c9 0 17.5 2 24 6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --size-unit: 16;
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 3840px;
  --size-container-fluid: min(100vw, calc(100vh * 16 / 9));
  --size-container: clamp(
    var(--size-container-min),
    var(--size-container-fluid),
    var(--size-container-max)
  );
  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );

  --paper: #f2f2f2;
  --ink: #000;
  --rule: rgba(0, 0, 0, 0.42);
  --mute: #8a8a8a;
  /* surfaces that are not paper: the floating bar, the scrollbar, and the
     base the project pages tint with the project's own colour */
  --surface: #fff;
  --track: #e6e6e6;
  --tint-base: #d6d4d1;
  /* One family, rounded and geometric. Outfit is the closest free stand-in
     for Gilroy; --display and --ui stay separate tokens so a second face can
     be dropped into either later without hunting through the stylesheet. */
  --display: "Outfit", ui-rounded, system-ui, -apple-system, sans-serif;
  --ui: "Outfit", ui-rounded, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);

  /* Drawn, not ruled. Every line on the page is a stroke with a wobble in
     it, tiled horizontally; the endpoints sit at the same height so the
     tiles join invisibly. Boxes use the same hand on a border-image. */
  --drawn-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5'%3E%3Cpath d='M0 2.5C18 1.5 34 3.5 52 2.5S88 1.4 106 2.7S140 3.4 160 2.5' fill='none' stroke='%23161616' stroke-opacity='.5' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --drawn-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M9 6C41 4 80 9 112 6c2 34-2 74 0 106-32 3-72-2-104 0C6 80 11 40 9 6Z' fill='none' stroke='%23161616' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  /* the colour of whatever disc is in front; set from JS as you scroll */
  --accent: #c1502e;
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* type scale, desktop */
  --h-hero: 8.5em;
  --h-xl: 4.75em;
  --h-l: 3.5em;
  --h-m: 2.25em;
  --h-s: 1.75em;
  --h-xs: 1.25em;
  --pad: 0.5em;
  /* the line the page is composed to. Full-bleed type at 1440 and wider
     flings related things to opposite edges of the screen; everything that
     reads as text is held to this instead. */
  --wrap: 72em;
}
@media (max-width: 991px) {
  :root {
    --size-container-ideal: 991;
    --size-container-min: 768px;
    --size-container-max: 991px;
    --size-container-fluid: 100vw;
    --h-hero: 7.5em;
    --h-xl: 5.5em;
    --h-l: 4.5em;
    --h-m: 2.75em;
    --h-s: 2em;
    --h-xs: 1.375em;
  }
}
@media (max-width: 767px) {
  :root {
    --size-container-ideal: 767;
    --size-container-min: 480px;
    --size-container-max: 767px;
    --h-hero: 5.5em;
    --h-xl: 4.5em;
    --h-l: 3.5em;
    --h-m: 2.5em;
    --h-s: 1.75em;
    --h-xs: 1.375em;
  }
}
@media (max-width: 479px) {
  :root {
    --size-container-ideal: 479;
    --size-container-min: 320px;
    --size-container-max: 479px;
    --h-hero: 3.6em;
    --h-xl: 3.5em;
    --h-l: 2.75em;
    --h-m: 2em;
    --h-s: 1.5em;
    --h-xs: 1.375em;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--ui);
  font-size: var(--size-font);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--ink);
  background: var(--paper);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: inherit;
}
img,
canvas {
  display: block;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 0.6em;
  left: 50%;
  z-index: 60;
  transform: translate(-50%, -200%);
  padding: 0.7em 1.2em;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

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

/* ── drawn rules ──────────────────────────────────────────────────────── */
.band,
.stats,
.steps li,
.fact,
.site-foot,
.p-chapter,
.p-steps li,
.p-gallery,
.p-quote,
.p-foot,
.p-meta .row,
.cs-band,
.cs-steps li {
  border-top-color: transparent;
  background-image: var(--drawn-h);
  background-repeat: repeat-x;
  background-position: left top;
  padding-top: 100px;
}
.row,
.info-title,
.hero-meta,
.p-live {
  border-bottom-color: transparent;
  background-image: var(--drawn-h);
  background-repeat: repeat-x;
  background-position: left bottom;
}
/* sketched frames */
.bar,
.index-panel,
.p-shot,
.track {
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
}

/* ── type ─────────────────────────────────────────────────────────────── */
.heading-xl,
.heading-l,
.heading-m,
.heading-s,
.heading-xs {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.heading-xl {
  font-size: var(--h-xl);
  line-height: 1.05;
}
.heading-l {
  font-size: var(--h-l);
}
.heading-m {
  font-size: var(--h-m);
}
.heading-s {
  font-size: var(--h-s);
  line-height: 1.1;
}
.heading-xs {
  font-size: var(--h-xs);
  line-height: 1.1;
}
.eyebrow {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.68em;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.paragraph-m {
  font-size: 1.125em;
  line-height: 1.4;
}
.paragraph-l {
  font-size: 1.5em;
  line-height: 1.4;
}
.right {
  text-align: right;
}

/* paper grain over everything, the way the reference's ground has tooth */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.62;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── stage ────────────────────────────────────────────────────────────── */
.stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  transition: opacity 0.6s var(--ease-io);
}
body[data-view="project"] .stage {
  opacity: 0;
  pointer-events: none;
}

.loop {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.loop path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: opacity 0.25s ease;
}
.loop.off path {
  opacity: 0;
}
/* while a track plays the ring breathes, so the disc in front reads as the
   one that is sounding */
.loop.beat path {
  stroke: var(--accent);
  animation: ring-beat 1.9s ease-in-out infinite;
}
@keyframes ring-beat {
  0%,
  100% {
    opacity: 0.45;
    stroke-width: 1.8;
  }
  50% {
    opacity: 1;
    stroke-width: 3.2;
  }
}

/* ── home: info block ─────────────────────────────────────────────────── */
.home {
  position: relative;
  z-index: 2;
}
.info {
  /* held to the same column as the rest of the page: only the discs behind
     it are allowed to run the full width */
  position: absolute;
  z-index: 4;
  top: var(--pad);
  left: max(var(--pad), calc((100% - var(--wrap)) / 2));
  width: min(calc(50% - var(--pad)), 30em);
  pointer-events: none;
}
.info-title {
  padding-bottom: 0.12em;
  border-bottom: 1px solid var(--rule);
}
.row {
  /* top-aligned: the value can wrap to several lines, and its label belongs
     beside the first of them */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  padding: 0.45em 0 0.35em;
  border-bottom: 1px solid var(--rule);
}
.row:last-child {
  border-bottom: 0;
}
.row .eyebrow {
  padding-top: 0.72em;
}
.row p:last-child {
  max-width: 70%;
}

/* swapping text rolls: out upward, in from below */
.swap {
  display: inline-block;
  transition:
    transform 0.5s var(--ease),
    opacity 0.35s ease;
}
.swap.out {
  transform: translateY(-0.35em);
  opacity: 0;
  transition-duration: 0.18s;
}
.swap.in {
  transform: translateY(0.35em);
  opacity: 0;
  transition: none;
}

/* ── home: reviews ────────────────────────────────────────────────────── */
.reviews {
  /* the track sits bottom left, so the quotes take the right of the column
     rather than the centre, where the two were landing on each other */
  position: absolute;
  z-index: 4;
  pointer-events: none;
  right: max(var(--pad), calc((100% - var(--wrap)) / 2));
  bottom: calc(6.2em + env(safe-area-inset-bottom));
  width: min(30em, 46%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2em;
  text-align: center;
}
.review .stars {
  display: inline-flex;
  gap: 0.12em;
  margin-bottom: 1.35em;
}
.review .stars svg {
  width: 1.05em;
  height: 1.05em;
}
.review .eyebrow {
  margin-bottom: 0.55em;
}
.review q {
  quotes: "\201C" "\201D";
}
.review .heading-xs {
  line-height: 1;
}

/* ── bar ──────────────────────────────────────────────────────────────── */
.bar {
  position: fixed;
  left: 50%;
  bottom: calc(1.1em + env(safe-area-inset-bottom));
  z-index: 30;
  transform: translateX(-50%);
  width: 22em;
  background: var(--surface);
  transition: width 0.45s var(--ease);
}
.bar.wide {
  width: 25em;
}
.bar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 3.6em;
  padding: 0 1.4em;
}
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3em;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark span {
  font-size: 0.8em;
  margin: 0 0.04em;
  opacity: 0.5;
}
.tabs {
  display: flex;
  justify-content: center;
  gap: 1.35em;
}
.tab {
  position: relative;
  color: var(--mute);
  transition: color 0.25s ease;
  padding: 0.4em 0;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  color: var(--ink);
}
.tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35em;
  width: 0.3em;
  height: 0.3em;
  margin-left: -0.15em;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.tab[aria-selected="true"]::after {
  transform: scale(1);
}
@media (hover: hover) {
  .tab:hover {
    color: var(--ink);
  }
}
.index-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.index-btn svg {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.35s var(--ease);
  transform: rotate(180deg);
}
.index-btn[aria-expanded="true"] svg {
  transform: rotate(0deg);
}
body[data-view="project"] .index-btn {
  visibility: hidden;
}

.index-panel {
  padding: 1.6em 1.4em 0.4em;
}
.index-list {
  list-style: none;
  max-height: 13.5em;
  overflow-y: auto;
  padding-right: 0.9em;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--track);
}
.index-list::-webkit-scrollbar {
  width: 3px;
}
.index-list::-webkit-scrollbar-track {
  background: var(--track);
}
.index-list::-webkit-scrollbar-thumb {
  background: var(--ink);
}
.index-list button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.5em 0.7em;
  text-align: left;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.index-list button[aria-current="true"],
.index-list button:hover,
.index-list button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}
.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.34);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

/* ── project page ─────────────────────────────────────────────────────── */
.project {
  position: relative;
  z-index: 5;
  background: var(--paper);
}
.project .reveal {
  opacity: 0;
  transform: translateY(1.2em);
}
.project.in .reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease calc(var(--d, 0) * 1s),
    transform 1s var(--ease) calc(var(--d, 0) * 1s);
}

.p-head {
  padding: 3.2em var(--pad) 0;
  text-align: center;
}
.p-title {
  max-width: 12ch;
  margin: 0 auto;
}
.p-credits {
  max-width: 60ch;
  margin: 1.3em auto 0;
  line-height: 1.7;
}
.p-credits .eyebrow {
  margin: 0 0.35em 0 0.9em;
  vertical-align: 0.12em;
}
.p-credits .eyebrow:first-child {
  margin-left: 0;
}

.p-meta {
  width: min(100%, var(--wrap));
  margin: 5.2em auto 0;
  padding: 0 var(--pad);
}
.p-meta .row {
  border-bottom: 0;
  border-top: 1px solid var(--rule);
}

.p-hero {
  position: relative;
  margin-top: 6.5em;
}
.p-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.p-hero-sticky img,
.p-hero-sticky canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-live {
  display: inline-block;
  margin-top: 1.3em;
  padding: 0.3em 0 0.15em;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.p-sign {
  font-family: var(--display);
  font-size: var(--h-xs);
  letter-spacing: -0.03em;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2em;
  text-align: center;
}

@media (max-width: 767px) {
  .info {
    width: calc(100vw - 2 * var(--pad));
  }
  .reviews {
    grid-template-columns: repeat(2, 42vw);
    gap: 4vw;
  }
  .p-summary {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── view transitions ─────────────────────────────────────────────────── */
.home {
  transition: opacity 0.45s var(--ease-io);
}
body.leaving .home,
body.leaving .loop {
  opacity: 0;
}
body[data-view="project"] .home,
body[data-view="project"] .loop {
  display: none;
}

/* ── project page: the case study ─────────────────────────────────────── */
.p-after {
  position: relative;
  z-index: 3;
  background: var(--tint, var(--tint-base));
  overflow: hidden; /* stickers stay inside the page */
}
.p-after > * {
  position: relative;
  z-index: 1;
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── stickers ─────────────────────────────────────────────────────────────
   Blooms, butterflies, hearts, bows and sparkles scattered down the margins,
   seeded from the slug so each project is always decorated the same way.
   They sit behind the text and never take a click. */
.p-stickers {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  pointer-events: none;
}
.p-sticker {
  position: absolute;
  opacity: 0.5;
  transform: rotate(var(--turn, 0deg));
}
@media (max-width: 1100px) {
  /* no margins to spare: keep only a few, and well out of the way */
  .p-sticker {
    opacity: 0.26;
  }
  .p-sticker:nth-child(2n) {
    display: none;
  }
}

/* the opening gets the project's colour outright, pinned like a note */
.p-opening {
  padding: 2.6em 0 3.4em;
}
.p-summary {
  max-width: 44ch;
  padding: 1.4em 1.5em;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  transform: rotate(-0.5deg);
}

/* every chapter is a ruled row: its label in the margin, its content beside
   it, matching the meta table above */
.p-chapter {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 2em;
  padding: 3.4em 0;
  border-top: 1px solid var(--rule);
}
.p-chapter > .eyebrow {
  padding-top: 0.5em;
}
.p-prose {
  max-width: 42ch;
}

.p-steps {
  list-style: none;
}
.p-steps li {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 1em;
  padding: 1.5em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.p-steps li:first-child {
  padding-top: 0;
  border-top: 0;
}
/* each step is numbered inside a drawn ring */
.p-step-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  transform: rotate(-2deg);
}
.p-step-n::before,
.p-badge::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: var(--accent);
  -webkit-mask-image: var(--drawn-ring);
  mask-image: var(--drawn-ring);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}
.p-steps li:nth-child(even) .p-step-n {
  transform: rotate(2.5deg);
}
.p-steps h3 {
  font-weight: 400;
}
.p-steps p {
  max-width: 48ch;
  margin-top: 0.5em;
}

.p-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6em 1.2em;
  padding: 3.4em 0;
  border-top: 1px solid var(--rule);
}
.p-shot-wrap.wide {
  grid-column: 1 / -1;
}
.p-shot {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  aspect-ratio: 1400 / 950;
}
.p-shot canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-gallery figcaption {
  margin-top: 0.7em;
  opacity: 0.7;
}

.p-metrics {
  /* one, two or three — a row of scope facts should look deliberate at
     any length rather than leaving a hole where a third would go */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9em, 14em));
  gap: 1.5em;
}
/* the numbers are stickers: drawn discs in the project's colour, each one
   stuck down at its own angle */
.p-badge {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.3em;
  aspect-ratio: 1;
  padding: 1.6em;
  text-align: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: rotate(var(--turn, 0deg));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.p-badge:hover {
  transform: rotate(0deg) scale(1.03);
}
.p-metrics b {
  display: block;
  font-weight: 500;
  color: var(--accent);
}
.p-metrics span {
  display: block;
  max-width: 14ch;
  opacity: 0.75;
}

.p-quote {
  padding: 5.5em var(--pad);
  text-align: center;
  border-top: 1px solid var(--rule);
}
/* the quote is said, so it sits in a drawn bubble with a tail */
.p-bubble {
  position: relative;
  width: fit-content;
  max-width: min(100%, 26em);
  margin: 0 auto 2.4em;
  padding: 1.5em 1.8em 1.7em;
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: rotate(-0.8deg);
}
.p-bubble-tail {
  position: absolute;
  left: 2.4em;
  bottom: -2.2em;
  width: 3.2em;
  height: 2.4em;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.p-quote p {
  max-width: 20ch;
  margin: 0 auto;
  text-transform: none;
}
.p-quote cite {
  margin-top: 0;
}
.p-quote cite {
  display: block;
  margin-top: 1.6em;
  font-style: normal;
  opacity: 0.7;
}

.p-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2em;
  padding: 3em 0 4.5em;
  border-top: 1px solid var(--rule);
}

@media (max-width: 767px) {
  .p-chapter {
    grid-template-columns: 1fr;
    gap: 1em;
  }
  .p-chapter > .eyebrow {
    padding-top: 0;
  }
  .p-gallery {
    grid-template-columns: 1fr;
  }
  .p-metrics {
    grid-template-columns: 1fr;
    gap: 1.8em;
  }
  .p-steps li {
    grid-template-columns: 2.6em 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   THE PAGE: hero, the pinned library, and the bands below it.
   ══════════════════════════════════════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 4.5em var(--pad) 26vh; /* the foot is left to the scene */
}
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-meta,
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero-marks {
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  width: 112%;
  height: 124%;
  overflow: visible;
  pointer-events: none;
}
.hero-marks path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-inner {
  width: min(100%, var(--wrap));
  margin: auto;
}
/* ── whose site this is ───────────────────────────────────────────────── */
.hero-name {
  margin: 0 0 0.5em;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6em, 9vw);
  letter-spacing: -0.015em;
  line-height: 1;
}
.hero-name-ink {
  position: relative;
  display: inline-block;
  padding: 0.05em 0.3em 0.08em;
  color: var(--ink);
}
/* a highlighter pass behind it, drawn a touch crooked and a touch over the
   edges, the way a real marker lands */
.hero-name-ink::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.1em 0.04em -0.12em;
  z-index: -1;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 0.7em 0.35em 0.6em 0.4em / 0.45em 0.6em 0.4em 0.55em;
  transform: rotate(-0.9deg);
}
.hero-name-ink::after {
  content: "";
  position: absolute;
  left: 0.18em;
  right: 0.1em;
  bottom: -0.1em;
  height: 6px;
  background: var(--drawn-h);
  background-size: auto 100%;
  opacity: 0.75;
}

.hero-title {
  display: block;
}
.hero-title .h-line {
  display: block;
  line-height: 0.92;
  /* set in title case, not the uppercase the rest of the site uses: this
     headline is the one piece carried over from the first site and the
     mixed case is what gives it its voice */
  text-transform: none;
  font-size: min(var(--h-hero), 12.5vw);
  white-space: nowrap; /* the two-line structure is the design */
}
.hero-title .h-line:last-of-type {
  text-align: right;
}
.h-rotate .r-char {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-meta {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  flex-wrap: wrap;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--rule);
}

/* ── the library: a tall section whose inner face pins ────────────────── */
.library {
  position: relative;
  /* the run-out: how far the face keeps scrolling after the last disc,
     fading as it goes. js/app.js reads the same figure (LIB_TAIL). */
  --lib-tail: 45vh;
  /* one screen, plus a screen of travel for every disc after the first,
     plus the run-out the face fades across (set in px from JS) */
  height: calc(
    100vh + (var(--n, 8) - 1) * var(--per-disc, 78vh) + var(--lib-tail, 55vh)
  );
}
.library-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* the run-out dims the paper furniture, never the discs */
.info,
.reviews,
.track,
.library-hint,
.loop {
  opacity: var(--lib-fade, 1);
}

/* ── the haze ─────────────────────────────────────────────────────────────
   The discs run a diagonal, in past the top right corner and out past the
   bottom left. Meeting the edge of the screen at full sharpness made them
   look cut off, so both ends of that run are hazed: a blur that deepens
   into the corner, under a wash of paper, both faded in by the same mask so
   neither has an edge of its own. A disc goes soft before it goes. */
.haze {
  position: absolute;
  z-index: 2; /* over the discs, under the type and the drawn ring */
  width: 56%;
  height: 54%;
  pointer-events: none;
  background: color-mix(in srgb, var(--paper) 46%, transparent);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.haze-in {
  top: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(
    118% 118% at 100% 0%,
    #000 2%,
    rgba(0, 0, 0, 0.52) 34%,
    transparent 78%
  );
  mask-image: radial-gradient(
    118% 118% at 100% 0%,
    #000 2%,
    rgba(0, 0, 0, 0.52) 34%,
    transparent 78%
  );
}
.haze-out {
  bottom: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(
    118% 118% at 0% 100%,
    #000 2%,
    rgba(0, 0, 0, 0.52) 34%,
    transparent 78%
  );
  mask-image: radial-gradient(
    118% 118% at 0% 100%,
    #000 2%,
    rgba(0, 0, 0, 0.52) 34%,
    transparent 78%
  );
}
.library-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(1.6em + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  opacity: 0.5;
  white-space: nowrap;
  pointer-events: none;
}

/* ── bands ────────────────────────────────────────────────────────────── */
.band {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 2.5em;
  padding: 5em var(--pad);
  border-top: 1px solid var(--rule);
}
.band-label {
  padding-top: 0.5em;
  color: var(--accent);
}
.band-lead {
  max-width: 18ch;
  text-transform: none;
}
.band-note {
  max-width: 34ch;
  margin-top: 1.6em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  margin-top: 3.5em;
  padding-top: 1.6em;
  border-top: 1px solid var(--rule);
}
.stats dt {
  font-weight: 500;
  color: var(--accent);
}
.stats dd {
  margin-top: 0.7em;
  opacity: 0.7;
}

.steps {
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 1em;
  padding: 1.8em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.steps li:first-child {
  padding-top: 0;
  border-top: 0;
}
.steps li > .eyebrow {
  padding-top: 0.5em;
  color: var(--accent);
  opacity: 0.9;
}
.steps h3 {
  text-transform: none;
}
.steps p {
  max-width: 48ch;
  margin-top: 0.6em;
}

/* ── background: a list of plain facts, ruled like everything else ───── */
.facts {
  display: grid;
}
.fact {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 2em;
  padding: 1.6em 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.fact:first-child {
  padding-top: 0;
  border-top: 0;
}
.fact dt {
  padding-top: 0.45em;
  color: var(--accent);
  opacity: 0.9;
}
.fact dd {
  max-width: 48ch;
}
.fact-note {
  display: block;
  margin-top: 0.5em;
  opacity: 0.6;
}
@media (max-width: 700px) {
  .fact {
    grid-template-columns: 1fr;
    gap: 0.5em;
  }
  .fact dt {
    padding-top: 0;
  }
}

/* an info row whose value is missing is hidden rather than left blank */
.info .row.empty {
  display: none;
}
.p-live-none {
  opacity: 0.6;
}

/* ── the project page's ends ──────────────────────────────────────────────
   The page used to finish with a screen and a half of near-empty scroll
   that handed you to the next project whether you wanted it or not. This
   is the replacement: the way back, the way on, and the whole library in
   one glance. */
.p-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5em;
  margin-bottom: 2.2em;
}
.p-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.p-back svg {
  width: 1.7em;
  height: 0.75em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}
.p-back:hover svg,
.p-back:focus-visible svg {
  transform: translateX(-0.35em);
}

.p-ends {
  /* a screen of its own: the page has finished, and where you go next is
     the only thing on it */
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4em var(--pad) 4.5em;
  background: var(--tint, var(--tint-base));
}
.p-ends > * {
  width: min(100%, var(--wrap));
  margin-inline: auto;
}
.p-jumps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}
.p-jump {
  display: grid;
  gap: 0.5em;
  padding: 1.5em 1.3em;
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  transition:
    transform 0.4s var(--ease),
    background-color 0.3s ease;
}
.p-jump:hover,
.p-jump:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}
.p-jump.prev:hover,
.p-jump.prev:focus-visible {
  transform: translateX(-4px);
}
.p-jump.next {
  text-align: right;
}
.p-jump.next:hover,
.p-jump.next:focus-visible {
  transform: translateX(4px);
}
.p-jump .heading-s {
  text-transform: none;
}

.p-more-label {
  margin: 3.4em 0 0.8em;
  opacity: 0.6;
}
.p-more {
  list-style: none;
}
.p-more li {
  border-top: 1px solid transparent;
  background-image: var(--drawn-h);
  background-repeat: repeat-x;
  background-position: left top;
}
.p-more a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1em;
  padding: 0.9em 0.4em;
  transition: padding-left 0.35s var(--ease);
}
.p-more a:hover,
.p-more a:focus-visible {
  padding-left: 1.1em;
  outline: none;
}
.p-more-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--dot, var(--accent));
}
.p-more-name {
  font-size: 1.05em;
}
.p-more li.here a {
  opacity: 0.45;
  pointer-events: none;
}
.p-more li.here .p-more-name::after {
  content: " — you are here";
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.p-home {
  display: inline-block;
  margin-top: 3em;
  padding-bottom: 0.2em;
  border-bottom: 1.5px solid transparent;
  background-image: var(--drawn-h);
  background-repeat: repeat-x;
  background-position: left bottom;
}

@media (max-width: 700px) {
  .p-jumps {
    grid-template-columns: 1fr;
  }
  .p-jump.next {
    text-align: left;
  }
}

/* ── the CV ───────────────────────────────────────────────────────────────
   A drawn sheet with its corner turned, pinned a little crooked. It
   straightens and lifts when you point at it, the way paper does when you
   pick it up. */
.cv-card {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.3em;
  margin-top: 2.4em;
  padding: 1.1em 1.6em 1.1em 1.2em;
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: rotate(-0.8deg);
  transition:
    transform 0.45s var(--ease),
    background-color 0.3s ease;
}
.cv-card:hover,
.cv-card:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}
.cv-sheet {
  width: 3.4em;
  height: 4.4em;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cv-page {
  fill: var(--paper);
}
.cv-fold,
.cv-rule {
  opacity: 0.55;
}
.cv-rule {
  stroke: var(--accent);
  opacity: 0.8;
}
.cv-meta {
  display: grid;
  gap: 0.5em;
}
.cv-do {
  position: relative;
  width: fit-content;
}
/* the drawn underline only arrives on the way in */
.cv-do::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;
  height: 5px;
  background: var(--drawn-h);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease);
}
.cv-card:hover .cv-do::after,
.cv-card:focus-visible .cv-do::after {
  opacity: 0.9;
  transform: scaleX(1);
}
.cv-meta .eyebrow {
  opacity: 0.65;
}
@media (prefers-reduced-motion: reduce) {
  .cv-card,
  .cv-do::after {
    transition: none;
  }
}

.contact-link {
  display: inline-block;
  margin-top: 1.8em;
  margin-right: 1.8em;
  text-transform: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease);
}
@media (hover: hover) {
  .contact-link:hover {
    background-size: 0% 1px;
  }
}

.site-foot {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
  padding: 2.4em var(--pad) 7em;
  border-top: 1px solid var(--rule);
}
.foot-links {
  list-style: none;
  display: flex;
  gap: 1.6em;
}
@media (hover: hover) {
  .foot-links a:hover {
    opacity: 0.55;
  }
}

/* things arrive as they come into view */
.reveal {
  opacity: 0;
  transform: translateY(1em);
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease,
    transform 1s var(--ease);
}

@media (max-width: 767px) {
  .band {
    grid-template-columns: 1fr;
    gap: 1em;
  }
  .band-label {
    padding-top: 0;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6em;
  }
  .hero-title .h-line:last-of-type {
    text-align: left;
  }
  .hero-meta {
    gap: 0.4em;
    flex-direction: column;
  }
}

/* ── the procession, in ink ───────────────────────────────────────────── */
:root {
  --walker: #111;
}

.hero-walk {
  /* the baseline of this strip sits on the drawn ground at 82% of the hero */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 13vh;
  z-index: 3;
  pointer-events: none;
}
.walk-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.walker {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(44px, 5vw, 70px);
  transform-origin: 50% 100%;
  color: var(--walker);
  opacity: 0;
  will-change: transform;
}
.walker svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.walker path,
.walker circle,
.walker rect {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.wk-seam {
  stroke-width: 1.5;
  opacity: 0.42;
}
.wk-stereo rect,
.wk-stereo circle,
.wk-stereo-sit rect,
.wk-stereo-sit circle {
  stroke-width: 2.2;
}

@media (hover: hover) and (pointer: fine) {
  .w-lead {
    pointer-events: auto;
    cursor: pointer;
  }
}
.w-lead {
  --step: 0.94s;
}
.w-2 {
  --step: 0.86s;
}
.w-3 {
  --step: 0.8s;
}
.w-4 {
  --step: 0.74s;
}

.wk-walk,
.wk-sit {
  transition: opacity 0.32s var(--ease) calc(var(--i, 0) * 0.09s);
}
.wk-sit {
  opacity: 0;
}
.hero-walk.resting .wk-walk {
  opacity: 0;
}
.hero-walk.resting .wk-sit {
  opacity: 1;
}

@keyframes wkSwing {
  from {
    transform: rotate(var(--a));
  }
  to {
    transform: rotate(var(--b));
  }
}
@keyframes wkBob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.4%);
  }
}
@keyframes wkBreathe {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.7%);
  }
}

.wk-leg,
.wk-arm,
.wk-foot {
  animation: wkSwing calc(var(--step) / 2) ease-in-out infinite alternate;
}
/* Each leg hinges where it is actually drawn rather than at a shared point
   between them, and the swing is a walk rather than the splits: ±22° read
   as a stride at a hundred pixels tall and as doing the box splits at
   twenty, which is the size these are. */
.wk-leg-a {
  --a: 13deg;
  --b: -13deg;
  transform-origin: 20px 56px;
}
.wk-leg-b {
  --a: -13deg;
  --b: 13deg;
  transform-origin: 28.4px 56px;
}
/* The foot sits inside the leg and turns against it by the same amount, so
   it stays level with the ground instead of pointing into it. Same keyframes
   and same duration, so the two can never drift apart. */
.wk-leg-a .wk-foot {
  --a: -13deg;
  --b: 13deg;
  transform-origin: 19.4px 72.9px;
}
.wk-leg-b .wk-foot {
  --a: 13deg;
  --b: -13deg;
  transform-origin: 29px 72.9px;
}
.wk-arm-a {
  --a: -14deg;
  --b: 14deg;
  transform-origin: 24px 27px;
}
.wk-arm-b {
  --a: 14deg;
  --b: -14deg;
  transform-origin: 24px 27px;
}
.wk-bob {
  animation: wkBob calc(var(--step) / 4) ease-in-out infinite alternate;
}
.wk-stereo,
.wk-carry {
  transform-origin: 24px 27px;
  animation: wkSwing calc(var(--step) / 2) ease-in-out infinite alternate;
  --a: 1.4deg;
  --b: -1.4deg;
}
.hero-walk.resting .wk-bob {
  animation: wkBreathe 2.6s ease-in-out infinite alternate;
}
.hero-walk.resting .wk-leg,
.hero-walk.resting .wk-foot,
.hero-walk.resting .wk-arm,
.hero-walk.resting .wk-stereo,
.hero-walk.resting .wk-carry {
  animation-play-state: paused;
}

.wk-note {
  stroke-width: 2;
  opacity: 0;
  transform-origin: 4px 6px;
}
.wk-note.n1 {
  animation: wkNote 3.2s var(--ease) infinite;
}
.wk-note.n2 {
  animation: wkNote 3.2s var(--ease) 1.6s infinite;
}
@keyframes wkNote {
  0% {
    opacity: 0;
    transform: translate(27px, 4px) scale(0.5) rotate(-12deg);
  }
  22% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(41px, -22px) scale(1) rotate(14deg);
  }
}
.hero-walk.resting .wk-note {
  animation-duration: 4.4s;
}

@media (max-width: 620px) {
  .w-3,
  .w-4 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq i,
  .loop.beat path {
    animation: none;
  }
  .eq i {
    transform: scaleY(0.7);
  }
  .wk-leg,
  .wk-foot,
  .wk-arm,
  .wk-bob,
  .wk-stereo,
  .wk-carry,
  .wk-note {
    animation: none;
  }
  .wk-note {
    opacity: 0;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── the scene behind the discs ───────────────────────────────────────── */
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.scene.on {
  opacity: 1;
}

/* ── the track ────────────────────────────────────────────────────────── */
.track {
  position: absolute;
  z-index: 4;
  left: max(var(--pad), calc((100% - var(--wrap)) / 2));
  bottom: calc(6.2em + env(safe-area-inset-bottom));
  width: min(26em, calc(50% - var(--pad)));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9em;
  align-items: center;
  padding: 0.85em 1em;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.track-play {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  color: var(--accent);
}
.track-play svg {
  width: 1.1em;
  height: 1.1em;
}
.track-play .pause {
  display: none;
}
.track.playing .track-play .play {
  display: none;
}
.track.playing .track-play .pause {
  display: block;
}
.track-body {
  min-width: 0;
}
.track-no {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  opacity: 0.7;
}
/* four bars that only move while something is playing */
.eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 0.8em;
  margin-left: auto;
}
.track.playing .eq {
  display: flex;
}
.eq i {
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite;
}
.eq i:nth-child(2) {
  animation-duration: 1.25s;
  animation-delay: -0.3s;
}
.eq i:nth-child(3) {
  animation-duration: 0.72s;
  animation-delay: -0.6s;
}
.eq i:nth-child(4) {
  animation-duration: 1.05s;
  animation-delay: -0.15s;
}
@keyframes eq {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}
/* and the card itself leans in a little */
.track.playing {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.track-title {
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.15em 0 0.4em;
}
.track-wave {
  display: block;
  width: 100%;
  height: 1.9em;
}

@media (max-width: 1100px) {
  .reviews {
    display: none;
  }
}
@media (max-width: 767px) {
  .track {
    width: calc(100% - 2 * var(--pad));
    bottom: calc(6.2em + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   THE PROJECT PAGE, as a working spread: screens pinned at angles with
   tape, numbers ringed by hand, labels pointing in from the margin.
   ══════════════════════════════════════════════════════════════════════ */

/* the title gets a drawn stroke under it, the way you underline a heading
   on paper when you want it to be the heading */
.p-title {
  display: inline-block;
  padding-bottom: 0.22em;
  background-image: var(--drawn-h);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 160px 7px;
}

/* the facts, pinned like an index card rather than ruled across the page */
.p-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2em 2em;
  padding: 1.6em 1.8em;
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  transform: rotate(-0.4deg);
}
.p-meta .row {
  display: block;
  padding: 0.7em 0;
  background-image: none;
  border: 0;
}
.p-meta .row .eyebrow {
  color: var(--accent);
}
.p-meta .row .paragraph-m {
  margin-top: 0.2em;
}

/* labels sit in the margin and point at what they describe */
.p-chapter > .eyebrow,
.band-label {
  position: relative;
}
.p-chapter > .eyebrow::after,
.band-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2.1em;
  width: 2.6em;
  height: 1.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='22'%3E%3Cpath d='M2 6c12 1 24 5 36 9' fill='none' stroke='%23161616' stroke-opacity='.45' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M31 13l7 2-3 6' fill='none' stroke='%23161616' stroke-opacity='.45' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .p-chapter > .eyebrow::after,
  .band-label::after {
    display: none;
  }
}

/* screens pinned to the page */
.p-shot-wrap {
  position: relative;
  padding: 0.7em 0.7em 0;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
}
.p-shot-wrap:nth-child(1) {
  transform: rotate(-0.7deg);
}
.p-shot-wrap:nth-child(2) {
  transform: rotate(0.9deg);
}
.p-shot-wrap:nth-child(3) {
  transform: rotate(-0.5deg);
}
.p-shot-wrap::before {
  /* a strip of tape */
  content: "";
  position: absolute;
  z-index: 2;
  top: -0.7em;
  left: 50%;
  width: 5.5em;
  height: 1.5em;
  margin-left: -2.75em;
  transform: rotate(-1.6deg);
  background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.55));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.p-gallery figcaption {
  padding: 0.7em 0.2em 0.9em;
  opacity: 0.75;
}

/* numbers ringed by hand */
.p-metrics div {
  position: relative;
  padding: 0.4em 0.2em;
}
.p-metrics b {
  position: relative;
  display: inline-block;
  padding: 0.18em 0.5em;
}
.p-metrics b::after {
  content: "";
  position: absolute;
  inset: -0.35em -0.65em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90' preserveAspectRatio='none'%3E%3Cpath d='M86 6C44 2 10 20 8 46c-2 27 36 40 76 38 38-2 70-16 70-40C154 20 126 8 86 6' fill='none' stroke='%23161616' stroke-opacity='.4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* the quote reads like something written in the margin and boxed */
.p-quote {
  border: 1.5px solid transparent;
  border-image: var(--drawn-box) 12 / 12px / 0 round;
  background-image: none;
  margin: 3em 0;
  padding: 3.4em 2em;
}