/* About Me — page-specific layout. Shared chrome and type scale: site.css */

.why-copy p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 20px;
}

/* ---------- hero fan ---------- */

.hero {
  position: relative;
  height: 742px;
  overflow: hidden;
  /* clicking the empty space replays the deal, same as the original */
  cursor: pointer;
}

#fan {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 0;
  height: 0;
  /* Scroll pulls the whole fan a little smaller around the same origin
     the cards are laid from. --fan-scroll is written by aboutme.js. */
  transform: scale(var(--fan-scroll, 1));
  transform-origin: 0 0;
  will-change: transform;
}

.fan-card {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The photo sits inset with a deep bottom margin — a polaroid. */
.fan-photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* Date + description ride above the card, revealed on hover. */
.fan-caption {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.fan-card.is-hover .fan-caption { opacity: 1; }
.fan-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 2px;
}
.fan-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--caption);
  margin: 0;
}

/* ---------- but why cards ---------- */

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 576fr) minmax(0, 404fr);
  gap: var(--gap);
  align-items: start;
}

.why-figure { margin: 0; }
/* Same 6px as case.css's --photo-radius; polaroids and photobooth strips below
   are excluded — they carry their own frame geometry. */
.why-figure img { width: 100%; border-radius: 6px; }

/* ---------- experience + education ---------- */

.cv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Stacked, this gap separates Experience from Education, so it has to match
     the distance a new section would open — otherwise Education looks closer
     to Experience than My People is to Education, and the page reads as two
     groups plus an orphan rather than three peers. */
  gap: var(--block-gap);
}

.exp-list,
.edu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exp-row,
.edu-row {
  display: grid;
  align-items: start;
  padding: 18px 0;
}
/* Both lists share one track set so Education's org names line up with
   Experience's. The date track is a percentage so it closes as the column
   narrows instead of holding a fixed 220px of dead space. Education has no
   logo, so its body simply starts in the third track. */
.exp-row,
.edu-row { grid-template-columns: clamp(100px, 22%, 220px) 48px minmax(0, 1fr); gap: 0 24px; }
.edu-row .exp-body { grid-column: 3; }

.exp-date {
  font-size: 18px;
  font-weight: 300;
  color: var(--caption);
  padding-top: 2px;
}

.exp-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
}
.exp-logo-wide { object-fit: contain; }

.exp-body { display: block; }
.exp-org {
  display: block;
  font-size: 22px;
  color: var(--accent);
}
.exp-role {
  display: block;
  font-size: 18px;
  color: var(--body);
  margin-top: 4px;
}
.exp-sub {
  display: block;
  font-size: 16px;
  font-weight: 300;
  color: var(--caption);
  margin-top: 2px;
}

/* Hover print for an experience. Position is written in aboutme.js, somewhere
   over the education column, and a new hover picks a new spot. The drift is
   `translate`, separate from the rotation on `transform`, so the two can run
   together. pointer-events stay off: the print is a preview, not a control. */
.exp-float {
  position: absolute;
  width: 188px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--exp-rot, -2deg)) scale(0.94);
  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(.34, 1.2, .64, 1);
}
.exp-float.is-on {
  opacity: 1;
  transform: rotate(var(--exp-rot, -2deg)) scale(1);
  animation: exp-drift 5.5s ease-in-out infinite;
}
/* The caption is written on the print's bottom margin, which grows a little
   so a two-line caption still fits. The frame is white in both themes, so
   the ink is fixed rather than themed. */
.exp-float { padding-bottom: 42px; }
.exp-float-caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 42px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Mynerve", "Figtree", cursive;
  font-size: 15px;
  line-height: 1.15;
  color: #3a3a3a;
}
.exp-float-caption:empty { display: none; }

/* On its side: wider, and the photo keeps its own proportions. */
.exp-float.is-landscape { width: 300px; }
.exp-float.is-landscape img { aspect-ratio: auto; height: auto; }

/* Hovering an experience with a print dims the other experiences, so the
   one being pictured stands out. Fine pointers only, like the print. */
@media (hover: hover) and (pointer: fine) {
  .exp-row { transition: opacity 0.25s ease; }
  .exp-list:has(.exp-row[data-exp-photos]:hover) .exp-row:not(:hover) { opacity: 0.5; }
}

@keyframes exp-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .exp-float.is-on { animation: none; }
}

/* ---------- my people ---------- */

.people-grid {
  display: grid;
  grid-template-columns: minmax(0, 404fr) minmax(0, 576fr);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}

/* Two whole photobooth strips — four frames and a hand-written label each —
   laid down overlapping with opposite tilts, the way they are on the original. */
/* Sized to the pair's exact footprint so the block can be centred as a unit
   once the section stacks; the padding is the room the tilts need. */
.strips {
  position: relative;
  width: 292px;
  max-width: 100%;
  margin-left: 40px;
  padding: 20px 20px 40px;
}

.strip {
  /* relative so a hovered strip can stack above its pair — strip-b is already
     absolute, and without a z-index both would paint in DOM order forever. */
  position: relative;
  z-index: 1;
  width: 146px;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  /* Individual translate, not transform: the strips already rotate, and a
     hover lift has to sit on top of that rather than replace it. */
  translate: 0 0;
}
.strip-a { transform: rotate(-3deg); }
.strip-b {
  position: absolute;
  left: 126px;
  top: 53px;
  transform: rotate(4deg);
}
body.has-dot .strip { cursor: none; }
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.orgs { display: grid; gap: 44px; }

.org-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 6px;
}

/* Instagram glyph drawn in CSS so it needs no asset */
.ig {
  width: 16px;
  height: 16px;
  border: 1.6px solid currentColor;
  border-radius: 5px;
  position: relative;
  flex: none;
}
.ig::before {
  content: "";
  position: absolute;
  inset: 3.4px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.ig::after {
  content: "";
  position: absolute;
  top: 1.6px;
  right: 1.6px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.org-tagline {
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  color: var(--faint);
  margin: 0 0 14px;
}

.sundays {
  display: grid;
  grid-template-columns: minmax(0, 576fr) minmax(0, 404fr);
  gap: var(--gap);
  align-items: center;
  margin-top: 96px;
}

/* A loose overlapping pile rather than a grid — negative gaps let the corners
   tuck under each other the way they do on the original. */
.sundays-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 14px;
}
/* a light shuffle, so the four read as snapshots rather than a grid */
.sp1 { transform: rotate(-4deg) translate(6px, 10px); z-index: 2; }
.sp2 { transform: rotate(3deg) translate(-8px, -6px); z-index: 1; }
.sp3 { transform: rotate(2.5deg) translate(10px, -12px); z-index: 1; }
.sp4 { transform: rotate(-2.5deg) translate(-6px, 4px); z-index: 3; }



/* ---------- faq ---------- */

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }

.faq-q {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.faq-num {
  font-size: 22px;
  color: var(--num);
}
.faq-text { font-size: 22px; }

.faq-chevron {
  width: 12px;
  height: 12px;
  border-right: 1.6px solid var(--num);
  border-bottom: 1.6px solid var(--num);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
  justify-self: end;
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* 0fr→1fr keeps the open height automatic while still animating */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > p {
  overflow: hidden;
  margin: 0;
  padding-left: 80px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
}
.faq-item.is-open .faq-a > p { padding-bottom: 26px; }

/* An answer with more than a paragraph in it. The wrapper is the grid row, so
   it takes the overflow the lone <p> takes above. */
.faq-a > .faq-a-body {
  overflow: hidden;
  min-height: 0;
  padding-left: 80px;
}
.faq-a-body > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
}
.faq-item.is-open .faq-a-body { padding-bottom: 26px; }

.faq-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.faq-photos[hidden] { display: none; }
.faq-photos .polaroid {
  width: 160px;
  cursor: pointer;
}
.faq-photos .polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- guitar ---------- */

/* The copy points at the deck. Side-by-side the deck sits to the right of the
   paragraph; stacked, it sits under it. Both strings live in the markup so a
   reader without CSS still gets a direction that matches the DOM order. */
.guitar-place-side { display: none; }
@media (min-width: 901px) {
  .guitar-place-side { display: inline; }
  .guitar-place-stack { display: none; }
}

/* The record player. Everything here is drawn in CSS — there is no artwork to
   load, so the deck is on screen with the rest of the section rather than
   arriving after it, and it takes the theme rather than being a photograph of
   someone else's walnut.

   The arm is the piece that used to read as a lollipop: a fat silver pill with
   a ball on top. A real tonearm (Fluance RT85, Pro-Ject Debut, Technics) is a
   thin tube that passes through a bearing, with a counterweight behind the
   pivot and a headshell at the far end — S-shaped, not a straight sausage.
   The parts below follow that anatomy from a top view. */

.deck { margin-top: 14px; }

/* Walnut veneer over MDF. Two grain passes at slightly different angles so the
   stripe is not a perfect fence, then a gloss hit at the top edge. A flat
   brown rectangle reads as a swatch; this is what makes it a thing on a
   surface. */
.deck-plinth {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.14), transparent 52%),
    repeating-linear-gradient(91deg,
      rgba(0, 0, 0, 0.07) 0 1px,
      transparent 1px 3px,
      rgba(255, 255, 255, 0.045) 3px 4px,
      transparent 4px 8px),
    repeating-linear-gradient(88deg,
      rgba(0, 0, 0, 0.035) 0 2px,
      transparent 2px 11px),
    linear-gradient(158deg, #7A5338 0%, #5C3C27 42%, #3F2818 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
:root[data-theme="dark"] .deck-plinth {
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.07), transparent 52%),
    repeating-linear-gradient(91deg,
      rgba(0, 0, 0, 0.14) 0 1px,
      transparent 1px 3px,
      rgba(255, 255, 255, 0.03) 3px 4px,
      transparent 4px 8px),
    repeating-linear-gradient(88deg,
      rgba(0, 0, 0, 0.06) 0 2px,
      transparent 2px 11px),
    linear-gradient(158deg, #4C3323 0%, #3A2618 45%, #24160E 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28);
}

/* The recess the platter sits in — a real deck does not have the disc printed
   onto the wood. */
.deck-well {
  position: absolute;
  left: 5.4%;
  top: 6%;
  height: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Belt-drive pulley, left of the platter. Small, but it is what stops the
   plinth looking empty on that side. */
.deck-pulley {
  position: absolute;
  left: 4.6%;
  top: 18%;
  width: 4.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #3A3A3A, #141414 62%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.deck-pulley::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: #0D0D0D;
}

/* Arm rest. A short post with a cradle, sitting where the parked head lands
   rather than floating as a clip on empty wood. */
.deck-rest {
  position: absolute;
  right: 12.5%;
  top: 76%;
  width: 2.6%;
  height: 6.2%;
  border-radius: 1px 1px 2px 2px;
  background: linear-gradient(90deg, #3A3A3A, #6A6A6A 45%, #222);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.deck-rest::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -28%;
  width: 160%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #D4D0CA, #8A8580);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* The record is the button, so it carries the whole hit area and the focus
   ring. No padding, no border: a <button> that has to look like a disc. */
.deck-platter {
  position: absolute;
  left: 7%;
  top: 8%;
  height: 84%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.deck-platter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Frosted acrylic rather than black vinyl, like the deck in the reference: a
   pale disc that lets the plinth through, with the grooves as a repeating ring
   at very low contrast. The rim is a hair darker — acrylic platters have
   thickness, and a flat disc reads as a sticker. */
.deck-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.14) 0 0.7px,
      rgba(0, 0, 0, 0.045) 0.7px 2.4px),
    radial-gradient(circle at 34% 28%,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.30) 46%,
      rgba(232, 226, 218, 0.22) 100%);
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    inset 0 0 0 5px rgba(0, 0, 0, 0.04);
  animation: deck-spin 2.6s linear infinite;
  /* Stopped until it is playing — the class below is the only thing that runs
     it, so the disc is never turning while the audio is not. */
  animation-play-state: paused;
}
.deck.is-playing .deck-disc { animation-play-state: running; }

@keyframes deck-spin { to { transform: rotate(360deg); } }

/* A single highlight that rides round with the disc, so the spin is legible on
   a surface that is otherwise almost featureless. */
.deck-shine {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.38) 28deg,
    rgba(255, 255, 255, 0) 95deg,
    rgba(255, 255, 255, 0) 360deg);
}

/* Paper label. A spindle alone in the middle of frost reads as a CD; the
   label is what makes it a record. */
.deck-label {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 18%,
      #E8DCC8 18.5% 100%);
  box-shadow:
    0 0 0 1px rgba(90, 70, 48, 0.16),
    inset 0 0 0 3px rgba(150, 112, 78, 0.42);
}

.deck-spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(160deg, #D8D4CE, #6A6660 55%, #2E2E2E);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

/* The tonearm. A sized box so the nested S-segments can use percentages, with
   the bearing as the transform origin so rotating it swings the head the way
   the real thing does. Resting, the head sits on the rest clear of the disc;
   playing, down on the outer groove.

   Positive rotation is clockwise, which swings the head left onto the disc.
   The rest angle is smaller than the play angle. */
.deck-arm {
  position: absolute;
  left: 78.5%;
  top: 7%;
  width: 12%;
  height: 72%;
  transform-origin: 50% 14%;
  transform: rotate(10deg);
  transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.deck.is-playing .deck-arm { transform: rotate(28deg); }

/* Counterweight. Behind the pivot, on the stub that continues past the
   bearing — the piece the old arm was missing, and the reason a real arm
   does not look like it ends at the post. */
.deck-weight {
  position: absolute;
  left: 50%;
  top: 1%;
  width: 58%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #6A6A6A, #2A2A2A 46%, #111 78%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 3.5px rgba(0, 0, 0, 0.35);
}
.deck-weight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 88%;
  width: 22%;
  height: 55%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #1A1A1A, #4A4A4A 40%, #111);
}

/* Gimbal housing. The tube goes through this, it is not a ball sitting on top
   of the arm. */
.deck-bearing {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 48%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #E8E4DE, #9A958C 38%, #3A3834 72%);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 2;
}
.deck-bearing::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4A4A4A, #161616);
}

/* Cueing lever, just beside the bearing — a short stick, not a floating tile. */
.deck-cue {
  position: absolute;
  left: 84%;
  top: 11%;
  width: 9%;
  height: 13%;
  border-radius: 999px;
  background: linear-gradient(180deg, #E2DED8, #7A756E);
  transform: rotate(22deg);
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* S-curve: two thin tubes, each rotated the opposite way, nested so the
   second starts where the first ends. A single pill cannot do this. The
   second segment is sized off the first (width: 100%) so it stays the same
   thickness — a percentage of .deck-arm would collapse inside a 14% parent. */
.deck-seg {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #1A1A1A 0%,
    #5A5A5A 32%,
    #2E2E2E 58%,
    #0E0E0E 100%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.16);
}
.deck-seg-a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 140%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #2A2A2A;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}
.deck-seg-a {
  left: 50%;
  top: 18%;
  width: 14%;
  height: 44%;
  transform: translateX(-50%) rotate(-11deg);
  transform-origin: 50% 0;
}
.deck-seg-b {
  left: 0;
  top: 92%;
  width: 100%;
  height: 110%;
  transform: rotate(22deg);
  transform-origin: 50% 0;
}

/* Headshell + cartridge. The shell is a short paddle, offset so the stylus
   sits at an angle to the tube — J-offset on an S-arm, the way tracking
   geometry actually works. The finger lift is the little tab you pick it up
   by; the cart is the dark block with a blue face, an Ortofon 2M from above. */
.deck-head {
  position: absolute;
  left: 50%;
  top: 94%;
  width: 520%;
  height: 34%;
  transform: translateX(-58%) rotate(-16deg);
  transform-origin: 50% 0;
}
.deck-shell {
  position: absolute;
  inset: 0 14% 36% 0;
  border-radius: 1px 3px 2px 1px;
  background: linear-gradient(90deg, #A8A39B, #F0ECE6 40%, #7A756E);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.deck-finger {
  position: absolute;
  right: 0;
  top: 4%;
  width: 18%;
  height: 34%;
  border-radius: 999px;
  border: 1.3px solid rgba(230, 226, 220, 0.95);
  border-left: 0;
  background: none;
}
.deck-cart {
  position: absolute;
  left: 6%;
  bottom: 0;
  width: 64%;
  height: 48%;
  border-radius: 1px;
  background: linear-gradient(90deg, #171717 0 68%, #2A5A96 68% 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Reads as the deck's own display: small, tabular so the digits do not jitter
   as the seconds tick over, sitting on the plinth rather than under it. */
.deck-readout {
  position: absolute;
  left: 7%;
  bottom: 6%;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
  z-index: 3;
}

.deck-audio { display: none; }

/* The spin is the whole point of the thing, so it is the one piece that cannot
   simply be dropped — but it can stop being motion. The disc holds still and
   the arm arrives without travelling; the audio plays exactly as before. */
@media (prefers-reduced-motion: reduce) {
  .deck-disc { animation: none; }
  .deck-arm { transition: none; }
}

/* ---------- responsive ---------- */

/* Wide enough for the two lists to sit side by side. Experience gets the larger
   share — five entries and longer org names — but only 1.2, not more: Education
   carries the same empty logo track (see below), so a wider split pushes
   "B.F.A Interactive Media Arts" onto a second line. Below about 1.15 the debt
   moves the other way and "NYU Entrepreneurial Institute" wraps instead. 1.2 is
   the widest that keeps both on one line at every width from 1080px up. */
@media (min-width: 1080px) {
  .cv {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  /* Education keeps Experience's track set here, empty logo track and all.
     Reclaiming that width for the text would leave 24px between a date and its
     entry against Experience's 96px, and the two lists sit side by side — the
     mismatch reads immediately even across the column gap. */
}

/* The deck beside the text rather than under it. It is a fixed 420px object
   next to a paragraph that can have any width, so the copy takes the flexible
   track and the deck takes what it asks for. Centred across the row: the copy
   is three short lines against a 315px-tall plinth, and top-aligning them
   would leave the deck hanging below a block of text that stopped long ago.
   Below this the row is too narrow for both and they stack — .deck's own
   margin-top is what opens the gap there. */
@media (min-width: 901px) {
  .guitar {
    display: grid;
    /* A definite track, not `auto`. The plinth is sized by aspect-ratio off a
       `min(420px, 100%)` width, and a percentage against a content-sized track
       is circular — the column measures 0, so the plinth resolves to 0 wide
       and, through the ratio, 0 tall. The clamp gives the ratio something real
       to work from at every width in this range. */
    grid-template-columns: minmax(0, 1fr) clamp(280px, 36%, 420px);
    gap: 48px;
    align-items: center;
  }
  .guitar .deck { margin-top: 0; }
  .guitar .deck-plinth { width: 100%; }
  .guitar-copy > :last-child { margin-bottom: 0; }
}

@media (max-width: 900px) {
  .hero { height: 560px; }
  .why-grid,
  .people-grid,
  .sundays { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* stacked, the strips are the only thing in their row — centre them */
  .strips { margin-left: auto; margin-right: auto; }
  .sundays-photos { max-width: 460px; margin: 0 auto; }
  .faq-q { grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 12px; }
  .faq-text, .faq-num { font-size: 19px; }
  .faq-a > p,
  .faq-a > .faq-a-body { padding-left: 54px; }
  .faq-photos .polaroid { width: calc(50% - 6px); max-width: 160px; }
}

/* Below this the date can no longer hold its own column without squeezing the
   org names, so it moves up onto its own line and the row goes logo + text. */
@media (max-width: 700px) {
  .exp-row,
  .edu-row { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; }
  .exp-row .exp-date,
  .edu-row .exp-date { grid-column: 1 / -1; padding-top: 0; }
  /* Education has no logo, so it drops the logo track entirely and runs flush
     left. Stacked, the date sits on its own line directly above, so the entry
     lines up under its own year — holding an empty 48px track here would only
     indent the text away from the date it belongs to. */
  .edu-row { grid-template-columns: minmax(0, 1fr); }
  .edu-row .exp-body { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card { transition: none !important; }
  #fan { --fan-scroll: 1 !important; }
}