/* ============================================================
   desk.css — sticky-notes desktop home.
   Overrides record-themed styles in styles.css.
   ============================================================ */

/* ─── Background photo (replaces the bg video) ─────────────── */
.bg-photo { display: none; }
body {
  background: #0e0805 url('assets/desk-bg.jpg') center center / cover no-repeat fixed !important;
}

/* hide old plate elements from styles.css */
.bg-video { display: none !important; }
.platter-mat,
.disc,
.tonearm-assembly,
.tonearm-photo,
.readout,
.nowplaying { display: none !important; }

/* ─── Header / footer ──────────────────────────────────────── */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.chrome {
  position: relative;
  z-index: 9999;
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 70%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 28px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6f1e7;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.chrome-bot {
  border-bottom: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.32) 70%, rgba(0,0,0,0) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chrome-mark { color: var(--amber); transform: translateY(-1px); }
.chrome-name { letter-spacing: 0.24em; font-weight: 500; }
.chrome-sub  { letter-spacing: 0.18em; opacity: .85; }
.chrome-sep  { opacity: .55; }
.chrome-loc  { opacity: .65; letter-spacing: 0.2em; }

.chrome-link { color: inherit; text-decoration: none; transition: color .2s; }
.chrome-link:hover { color: var(--amber); }

/* Resume button in footer */
.chrome-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.35);
  color: #f6f1e7;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.chrome-cta:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
  transform: translateY(-1px);
}
.chrome-cta-glyph { font-size: 12px; line-height: 1; }

/* ─── Main / desk stage ───────────────────────────────────── */
.main {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: block;
}
.desk {
  position: absolute;
  inset: 0;
}
.desk-stage {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

/* ─── Sticky notes ────────────────────────────────────────── */
.sticky {
  position: absolute;
  transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(var(--rot, 0deg));
  transform-origin: center center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55))
          drop-shadow(0 2px 3px rgba(0,0,0,.4));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform, filter;
  outline: none;
}
.sticky-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* hover lift + glow */
.sticky:hover {
  transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(calc(var(--rot, 0deg) * 0.4)) translateY(-6px) scale(1.04);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.7))
          drop-shadow(0 0 24px var(--glow-color, rgba(255, 195, 100, .55)))
          drop-shadow(0 0 6px rgba(255,255,255,.18));
  z-index: 5;
}

/* small handwritten title that surfaces on hover */
.sticky-readout {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-family: 'Caveat', 'Instrument Serif', cursive;
  font-size: 16px;
  color: #f6efd9;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  pointer-events: none;
}
.sticky:hover .sticky-readout {
  opacity: 0;  /* readout hidden — glow + cursor label do the work */
  transform: translateX(-50%) translateY(2px);
}

/* glow themes */
.app-glow-amber .sticky:hover { --glow-color: rgba(255, 195, 100, .60); }
.app-glow-paper .sticky:hover { --glow-color: rgba(245, 235, 210, .55); }
.app-glow-none  .sticky:hover { --glow-color: transparent; }

/* ─── Peel / page-turn animations ─────────────────────────── */
/* Each sticky note gets transform-origin: left center for the peel.
   We override the translate(-50%, -50%) anchoring by wrapping into
   a single keyframe path. */
.sticky.is-peeling {
  z-index: 50;
  pointer-events: none;
}

/* default — lift + flip */
.app-peel-lift .sticky.is-peeling {
  animation: stickyLift 540ms cubic-bezier(.55,.05,.45,1) forwards;
  transform-origin: 0% 50%;
}
@keyframes stickyLift {
  0% {
    transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(var(--rot)) rotateY(0deg);
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
  }
  35% {
    transform: translate(calc(-50% - 250px), calc(-55% - 8px)) rotate(var(--rot)) rotateY(-22deg) scale(1.06);
    filter: drop-shadow(0 26px 38px rgba(0,0,0,.8));
  }
  100% {
    transform: translate(calc(-30% - 250px), calc(-55% - 8px)) rotate(calc(var(--rot) + 6deg)) rotateY(-150deg) scale(1.1);
    opacity: 0;
    filter: drop-shadow(0 30px 44px rgba(0,0,0,.55));
  }
}

/* curl — page corner curls back from bottom-right */
.app-peel-curl .sticky.is-peeling {
  animation: stickyCurl 580ms cubic-bezier(.55,.05,.45,1) forwards;
  transform-origin: 100% 100%;
}
@keyframes stickyCurl {
  0%   { transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(var(--rot)) rotateX(0deg) rotateZ(0deg); }
  100% { transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(var(--rot)) rotateX(170deg) rotateZ(-10deg) scale(1.1); opacity: 0; }
}

/* zoom — punches forward into the case study */
.app-peel-zoom .sticky.is-peeling {
  animation: stickyZoom 520ms cubic-bezier(.4,0,.2,1) forwards;
  transform-origin: 50% 50%;
}
@keyframes stickyZoom {
  0%   { transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(var(--rot)) scale(1); opacity: 1; }
  60%  { transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(0deg) scale(1.4); opacity: 1; }
  100% { transform: translate(calc(-50% - 250px), calc(-50% - 8px)) rotate(0deg) scale(8); opacity: 0; }
}

/* ─── Cassette tape ───────────────────────────────────────── */
.cassette {
  position: absolute;
  left: 49.6%;
  top: 94.4%;
  width: 22.25vw;
  max-width: 395px;
  min-width: 196px;
  transform: translate(-50%, calc(-50% + 10px)) rotate(-1.5deg);
  transform-origin: center center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.7))
          drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform, filter;
  outline: none;
}
.cassette img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.cassette:hover {
  transform: translate(-50%, calc(-50% + 10px)) rotate(0deg) translateY(-8px) scale(1.05);
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.8))
          drop-shadow(0 0 28px var(--glow-color, rgba(255, 195, 100, .55)));
  z-index: 5;
}
.cassette-readout {
  bottom: -26px;
  font-size: 18px;
}

.cassette.is-peeling {
  z-index: 50;
  pointer-events: none;
  animation: cassetteSlide 520ms cubic-bezier(.55,.05,.45,1) forwards;
  transform-origin: 50% 100%;
}
@keyframes cassetteSlide {
  0%   { transform: translate(-50%, calc(-50% + 10px)) rotate(-1.5deg) scale(1); opacity: 1; }
  40%  { transform: translate(-50%, calc(-60% + 10px)) rotate(2deg) scale(1.08); }
  100% { transform: translate(-50%, calc(-50% + 10px)) rotate(0deg) scale(4); opacity: 0; }
}

/* ─── Business card hover zone (over the magazine stack) ───── */
.bizcard-hit {
  position: absolute;
  left: 4.5%;
  top: 67%;
  width: 14%;
  height: 24%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  outline: none;
  z-index: 4;
}
.bizcard-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      var(--glow-color, rgba(255, 195, 100, .55)) 0%,
      rgba(255, 195, 100, 0) 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(8px);
}
.bizcard-hit:hover .bizcard-glow { opacity: 1; }
.bizcard-readout {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: #f6efd9;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.bizcard-hit:hover .bizcard-readout { opacity: .9; }

.app-glow-amber .bizcard-glow { --glow-color: rgba(255, 195, 100, .55); }
.app-glow-paper .bizcard-glow { --glow-color: rgba(245, 235, 210, .55); }
.app-glow-none  .bizcard-glow { --glow-color: transparent; }

/* ─── Sketchbook hover zone (top-left notebook) ────────────── */
.sketchbook-hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 22%;
  height: 45%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  outline: none;
  z-index: 4;
}
.sketchbook-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 55% 55%,
      var(--glow-color, rgba(255, 195, 100, .50)) 0%,
      rgba(255, 195, 100, 0) 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(10px);
}
.sketchbook-hit:hover .sketchbook-glow { opacity: 1; }
.sketchbook-readout {
  position: absolute;
  left: 55%;
  bottom: 12%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: #f6efd9;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.sketchbook-hit:hover .sketchbook-readout {
  opacity: .9;
  transform: translateX(-50%) translateY(-2px);
}

.app-glow-amber .sketchbook-glow { --glow-color: rgba(255, 195, 100, .50); }
.app-glow-paper .sketchbook-glow { --glow-color: rgba(245, 235, 210, .50); }
.app-glow-none  .sketchbook-glow { --glow-color: transparent; }

/* ─── Whiskey glass hover zone (bottom-right) ──────────────── */
.whiskey-hit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16%;
  height: 38%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: none;
  outline: none;
  z-index: 4;
}
.whiskey-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 55% 65%,
      var(--glow-color, rgba(255, 195, 100, .55)) 0%,
      rgba(255, 195, 100, 0) 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(10px);
}
.whiskey-hit:hover .whiskey-glow { opacity: 1; }
.whiskey-readout {
  position: absolute;
  right: 14%;
  bottom: 8%;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: #f6efd9;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.whiskey-hit:hover .whiskey-readout {
  opacity: .9;
  transform: translateY(-2px);
}

.app-glow-amber .whiskey-glow { --glow-color: rgba(255, 195, 100, .55); }
.app-glow-paper .whiskey-glow { --glow-color: rgba(245, 235, 210, .55); }
.app-glow-none  .whiskey-glow { --glow-color: transparent; }

/* ─── Hide stage while a case study / about / resume is open ─ */
.app-playing .desk,
.app-hidden  .desk,
.app-resume  .desk {
  pointer-events: none;
  opacity: .5;
  filter: blur(3px) brightness(.6);
  transition: opacity .35s ease, filter .35s ease;
}
.app-about .desk {
  pointer-events: none;
  opacity: .35;
  filter: blur(3px) brightness(.55);
  transition: opacity .35s ease, filter .35s ease;
}

/* ─── Tablet ───────────────────────────────────────────────
   Between true mobile (≤920) and full desktop, the desk layout still
   wins — we just take some headroom off the chrome and pull the
   stickies in a hair so they don't crowd the guitar/whiskey at the
   edges. */
@media (max-width: 1180px) and (min-width: 921px) {
  .chrome { padding: 12px 20px; font-size: 9.5px; }
  .sticky { transform: translate(calc(-50% - 180px), calc(-50% - 8px)) rotate(var(--rot, 0deg)); }
  .sticky:hover {
    transform: translate(calc(-50% - 180px), calc(-50% - 8px))
               rotate(calc(var(--rot, 0deg) * 0.4))
               translateY(-6px) scale(1.04);
  }
  .app-peel-lift .sticky.is-peeling {
    animation: stickyLiftTablet 540ms cubic-bezier(.55,.05,.45,1) forwards;
  }
  @keyframes stickyLiftTablet {
    0% {
      transform: translate(calc(-50% - 180px), calc(-50% - 8px)) rotate(var(--rot)) rotateY(0deg);
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
    }
    35% {
      transform: translate(calc(-50% - 180px), calc(-55% - 8px)) rotate(var(--rot)) rotateY(-22deg) scale(1.06);
      filter: drop-shadow(0 26px 38px rgba(0,0,0,.8));
    }
    100% {
      transform: translate(calc(-30% - 180px), calc(-55% - 8px)) rotate(calc(var(--rot) + 6deg)) rotateY(-150deg) scale(1.1);
      opacity: 0;
    }
  }
}

/* ─── Compact (mobile + small tablet) ─────────────────────── */
@media (max-width: 920px) {
  /* Reset desktop's locked-viewport setup */
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: auto;
  }
  body {
    background: #110b06 !important;
  }
  body.mdesk-lock { overflow: hidden; }
  body::after { display: none; }                  /* skip the vignette */
  .bg-photo { display: none !important; }
  .cursor { display: none !important; }

  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .main {
    flex: 1 1 auto;
    overflow: visible;
    display: block;
    min-height: 0;
  }

  /* The absolutely-positioned desk + stickies are replaced by .mdesk */
  .desk { display: none; }

  /* Chrome — sticky at top so name/title are always in frame */
  .chrome {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 11px 16px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg,
      rgba(8, 5, 3, .94) 0%,
      rgba(8, 5, 3, .82) 80%,
      rgba(8, 5, 3, .68) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 220, 170, .08);
  }
  .chrome .chrome-l {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  .chrome-name {
    letter-spacing: 0.2em;
    flex-shrink: 0;
  }
  /* keep the role visible on mobile */
  .chrome-sub {
    display: inline !important;
    letter-spacing: 0.16em;
    color: rgba(246, 241, 231, .78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chrome-loc { display: none; }
  .chrome-bot {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Open modals: keep them on top, no blur on the (hidden) desk */
  .app-playing .desk,
  .app-hidden  .desk,
  .app-resume  .desk,
  .app-about   .desk { filter: none; opacity: 1; }
}

/* ─── Mobile desk component (default: hidden) ─────────────── */
.mdesk { display: none; }

@media (max-width: 920px) {
  .mdesk {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 56px;
    color: var(--paper);
  }

  /* Hero: contained crop of the desk photo with editorial overlay */
  .mdesk-hero {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 50vh, 460px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(255, 220, 170, .10);
    display: flex;
    align-items: flex-end;
  }
  .mdesk-hero-img {
    position: absolute;
    inset: 0;
    background: #0a0604 url('assets/desk-bg.jpg') center 38% / cover no-repeat;
    z-index: 0;
    filter: saturate(1.05) contrast(1.02);
  }
  .mdesk-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(10, 6, 3, .35) 0%,
        rgba(10, 6, 3, .15) 40%,
        rgba(10, 6, 3, .55) 78%,
        rgba(17, 11, 6, .96) 100%),
      radial-gradient(ellipse 90% 60% at 50% 100%,
        rgba(0, 0, 0, .5) 0%,
        transparent 75%);
    pointer-events: none;
  }
  .mdesk-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8), 0 0 12px rgba(0, 0, 0, .55);
  }
  .mdesk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(246, 241, 231, .9);
  }
  .mdesk-dot {
    color: var(--amber);
    font-size: 8px;
    transform: translateY(-1px);
  }
  .mdesk-eyebrow-sep { opacity: .45; }
  .mdesk-lede {
    font-family: 'Libre Baskerville', 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 7.5vw, 42px);
    line-height: 1.1;
    margin: 0;
    color: #fbf6e9;
    letter-spacing: -0.01em;
    max-width: 22ch;
    text-wrap: balance;
  }
  .mdesk-sub {
    margin: 0;
    font-family: var(--body);
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(236, 233, 223, .82);
    max-width: 36ch;
  }
  .mdesk-wink {
    margin: 4px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgba(236, 233, 223, .65);
    max-width: 38ch;
  }
  .mdesk-wink-mark {
    flex-shrink: 0;
    color: var(--amber);
    font-weight: 600;
    letter-spacing: 0.22em;
  }

  /* Section header — small caps tag · rule · count */
  .mdesk-section { padding: 30px 18px 8px; }
  .mdesk-section-head { margin: 0 0 18px; }
  .mdesk-section-title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
  }
  .mdesk-section-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .mdesk-section-rule {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 220, 170, .25), rgba(255, 220, 170, 0));
  }
  .mdesk-section-count {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(236, 233, 223, .55);
  }

  /* Sticky-note tile grid */
  .mdesk-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .mdesk-cell { display: contents; }
  .mdesk-card {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 14px 14px 16px;
    background: transparent;
    border: 0;
    color: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mdesk-card:active {
    transform: translateY(1px);
  }
  .mdesk-card:focus-visible {
    outline: 1px solid var(--amber);
    outline-offset: 2px;
  }
  .mdesk-card-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 0;
  }
  .mdesk-card-img {
    width: 88%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    transform: rotate(var(--rot, 0deg));
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55))
            drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
  }
  .mdesk-card-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
  }
  .mdesk-card-no {
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--amber);
    padding-top: 2px;
  }
  .mdesk-card-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.1;
    color: var(--paper);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mdesk-card-format {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "Also on the desk" — tall full-width rows for cassette/extras/about/resume */
  .mdesk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 220, 170, .08);
  }
  .mdesk-list > li + li {
    border-top: 1px solid rgba(255, 220, 170, .06);
  }
  .mdesk-row {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 4px;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--paper);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
  }
  .mdesk-row:active { background: rgba(255, 220, 170, .04); }
  .mdesk-row:focus-visible {
    outline: 1px solid var(--amber);
    outline-offset: -2px;
  }
  .mdesk-row-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(255, 220, 170, .04);
    border: 1px solid rgba(255, 220, 170, .14);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 13px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .mdesk-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mdesk-row-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.15;
    color: var(--paper);
  }
  .mdesk-row-sub {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mdesk-row-arrow {
    font-family: var(--mono);
    font-size: 14px;
    color: rgba(236, 233, 223, .45);
    transition: color .2s, transform .2s;
  }
  .mdesk-row:active .mdesk-row-arrow {
    color: var(--amber);
    transform: translate(2px, -2px);
  }

  /* Foot stamp */
  .mdesk-foot {
    margin: 32px 18px 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 220, 170, .08);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .55);
    flex-wrap: wrap;
  }
  .mdesk-foot-mark { color: var(--amber); font-size: 8px; }
  .mdesk-foot-sep { opacity: .4; }
  .mdesk-foot-link {
    color: rgba(236, 233, 223, .82);
    text-decoration: none;
    border-bottom: 1px solid rgba(236, 233, 223, .2);
    padding-bottom: 1px;
  }
}

  /* ── Folders (accordion sections) ───────────────────────── */
  .mdesk-folders {
    margin: 0;
    padding: 0;
  }
  .mfolder {
    position: relative;
    border-top: 1px solid rgba(255, 220, 170, .10);
  }
  .mfolder:last-child {
    border-bottom: 1px solid rgba(255, 220, 170, .10);
  }
  .mfolder-tab {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: transparent;
    border: 0;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  .mfolder-tab:active { background: rgba(255, 220, 170, .04); }
  .mfolder-tab:focus-visible {
    outline: 1px solid var(--amber);
    outline-offset: -2px;
  }

  /* Manila-folder tab graphic — a small notched corner */
  .mfolder-tab-graphic {
    position: relative;
    width: 32px;
    height: 22px;
    flex-shrink: 0;
  }
  .mfolder-tab-graphic::before {
    /* main folder body */
    content: '';
    position: absolute;
    inset: 6px 0 0 0;
    background: #c8a96a;
    box-shadow:
      inset 0 -1px 0 rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 240, 200, .35),
      0 2px 4px rgba(0, 0, 0, .4);
  }
  .mfolder-tab-graphic::after {
    /* the folder tab notch — sits above the body, top-left corner */
    content: '';
    position: absolute;
    left: 2px;
    top: 0;
    width: 14px;
    height: 9px;
    background: #c8a96a;
    clip-path: polygon(0 100%, 0 35%, 30% 0, 100% 0, 100% 100%);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .35);
  }
  .mfolder.is-open .mfolder-tab-graphic::before,
  .mfolder.is-open .mfolder-tab-graphic::after {
    background: var(--amber);
  }

  .mfolder-tab-label {
    font-weight: 500;
    color: var(--paper);
  }
  .mfolder.is-open .mfolder-tab-label { color: var(--amber); }
  .mfolder-tab-count { display: none; }
  .mfolder-tab-glyph {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    justify-self: end;
    border: 1px solid rgba(255, 220, 170, .25);
    border-radius: 50%;
    background: transparent;
    color: rgba(236, 233, 223, .75);
    transition: background .2s, color .2s, border-color .2s;
  }
  /* Two centered bars form a "+" / "−" — guaranteed pixel-perfect centering
     regardless of font metrics. */
  .mfolder-tab-glyph-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: 1px;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s;
  }
  .mfolder-tab-glyph-bar-h {
    width: 12px;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .mfolder-tab-glyph-bar-v {
    width: 1.5px;
    height: 12px;
    transform: translate(-50%, -50%);
  }
  .mfolder.is-open .mfolder-tab-glyph {
    background: var(--amber);
    color: #14110b;
    border-color: var(--amber);
  }
  .mfolder.is-open .mfolder-tab-glyph-bar-v {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
  }
  .mfolder-body {
    padding: 4px 18px 28px;
    animation: mfolderOpen .28s cubic-bezier(.2, .7, .2, 1) both;
  }
  .mfolder-body[hidden] { display: none; }
  @keyframes mfolderOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* WORK folder — Music feature row beneath the sticky grid */
  .mdesk-feature {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin-top: 18px;
    padding: 14px 14px;
    background: linear-gradient(180deg, rgba(40, 28, 14, .55) 0%, rgba(20, 14, 7, .85) 100%);
    border: 1px solid rgba(255, 220, 170, .14);
    color: var(--paper);
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .25s, background .25s, transform .15s;
  }
  .mdesk-feature:active {
    transform: translateY(1px);
    border-color: rgba(255, 220, 170, .3);
  }
  .mdesk-feature-art {
    width: 88px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .25);
  }
  .mdesk-feature-art img {
    width: 92%;
    height: auto;
    display: block;
    transform: rotate(-2deg);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
  }
  .mdesk-feature-body {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 3px;
    min-width: 0;
  }
  .mdesk-feature-no {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--amber);
  }
  .mdesk-feature-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.1;
    color: var(--paper);
  }
  .mdesk-feature-format {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mdesk-feature-arrow {
    font-family: var(--mono);
    font-size: 16px;
    color: rgba(236, 233, 223, .55);
  }

  /* Shared CTA */
  .mdesk-cta {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(255, 220, 170, .06);
    border: 1px solid rgba(255, 220, 170, .28);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, border-color .2s, color .2s;
  }
  .mdesk-cta:active {
    background: var(--amber);
    color: #14110b;
    border-color: var(--amber);
  }
  .mdesk-cta-ghost { background: transparent; }

  /* ABOUT inline */
  .mdesk-about {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 6px 0 4px;
  }
  .mdesk-about-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .mdesk-about-photo {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #d8cfb8;
    box-shadow:
      0 6px 18px rgba(0, 0, 0, .55),
      0 0 0 1px rgba(40, 30, 15, .35),
      0 0 0 3px rgba(236, 233, 223, .85),
      0 0 0 4px rgba(40, 30, 15, .3);
  }
  .mdesk-about-photo img {
    position: absolute;
    width: auto;
    height: 152px;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  .mdesk-about-id { min-width: 0; }
  .mdesk-about-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    color: var(--paper);
  }
  .mdesk-about-title {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .65);
    margin-top: 5px;
  }
  .mdesk-about-city {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(236, 233, 223, .45);
    margin-top: 4px;
  }
  .mdesk-about-bio {
    font-family: var(--body);
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(236, 233, 223, .85);
    text-wrap: pretty;
  }
  .mdesk-about-bio p { margin: 0; }
  .mdesk-about-bio p + p { margin-top: 0.85em; }
  .mdesk-about-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .mdesk-link {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    border-bottom: 1px solid rgba(236, 233, 223, .3);
    padding-bottom: 2px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }
  .mdesk-link:active {
    color: var(--amber);
    border-color: var(--amber);
  }

  /* EXTRAS inline */
  .mdesk-extras {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0 4px;
  }
  .mdesk-extras-intro {
    margin: 0;
    font-family: var(--body);
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(236, 233, 223, .82);
    text-wrap: pretty;
  }
  .mdesk-extras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .mdesk-extras-thumb {
    appearance: none;
    -webkit-appearance: none;
    aspect-ratio: 1 / 1;
    background: #0a0608;
    border: 1px solid rgba(255, 220, 170, .08);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, transform .15s;
  }
  .mdesk-extras-thumb:active {
    transform: translateY(1px);
    border-color: rgba(255, 220, 170, .25);
  }
  .mdesk-extras-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* RESUME inline */
  .mdesk-resume {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0 4px;
  }
  .mdesk-resume-preview {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    width: 100%;
    background: #f1ecdf;
    border: 1px solid rgba(255, 220, 170, .15);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 8.5 / 11;
    max-height: 60vh;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    -webkit-tap-highlight-color: transparent;
  }
  .mdesk-resume-preview img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .mdesk-resume-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
    pointer-events: none;
  }
  .mdesk-resume-overlay-text {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    background: rgba(10, 8, 6, .8);
    padding: 7px 12px;
    border: 1px solid rgba(255, 220, 170, .25);
  }
  .mdesk-resume-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Hide the old section/list/row stuff — replaced by folders */
  .mdesk-section { display: none; }
  .mdesk-list { display: none; }
}

/* ─── True phone (≤520) — single-column grid ──────────────── */
@media (max-width: 520px) {
  .mdesk-grid { grid-template-columns: 1fr; gap: 12px; }
  .mdesk-card { padding: 10px 8px 14px; }
  .mdesk-card-frame { aspect-ratio: 16 / 9; }
  .mdesk-card-img { width: 50%; }
  .mdesk-section { padding: 26px 16px 4px; }
  .mdesk-hero-content { padding: 18px 16px 18px; }
  .mfolder-tab { padding: 16px 14px; font-size: 11.5px; letter-spacing: 0.26em; gap: 12px; }
  .mfolder-body { padding: 4px 14px 24px; }
  .mdesk-feature { grid-template-columns: 72px 1fr auto; }
  .mdesk-feature-art { width: 72px; }
  .mdesk-foot { margin-left: 14px; margin-right: 14px; }
}

/* ─── Very narrow (≤370) — give the chrome breathing room ── */
@media (max-width: 370px) {
  .chrome { font-size: 8.5px; letter-spacing: 0.12em; padding: 10px 12px; gap: 6px; }
  .chrome-name { letter-spacing: 0.16em; }
  .chrome-sub { letter-spacing: 0.12em; }
}

/* ─── Old phone breakpoint kept for desktop-stage edge cases ─ */
@media (max-width: 720px) {
  .sticky { width: 22vw !important; }
  .cassette { width: 30vw; }
}

/* ─── Case study + resume + about: mobile polish ──────────── */
@media (max-width: 920px) {
  /* Case study panel — fill the viewport, tighten padding */
  .case {
    inset: 48px 0 0 0;
    padding: 0;
  }
  .case-inner {
    width: 100%;
    max-height: calc(100vh - 48px);
    border: 0;
    padding: 22px 18px 28px;
  }
  .case-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }
  .case-title { font-size: clamp(28px, 7.2vw, 38px); }
  .case-head-r { font-size: 9.5px; }
  .case-meta-row { justify-content: space-between; min-width: 0; }
  .case-section { margin: 22px 0; }
  .case-prose { font-size: 15.5px; }
  .case-prose-lead { font-size: 16.5px; }
  .case-nav {
    top: 8px;
    right: 8px;
    gap: 4px;
  }
  .case-navbtn,
  .case-eject {
    height: 30px;
    padding: 0 9px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
  }
  .case-navbtn .case-navbtn-label,
  .case-eject .case-eject-label { display: none; }
  .case-foot {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    text-align: center;
  }
  .case-foot-nav { justify-content: center; }
  .case-credits { grid-template-columns: 1fr; }

  /* About card */
  .about-inner {
    width: min(540px, 92vw);
    padding: 28px 24px 24px 40px;
    max-height: 86vh;
  }
  .about-name { font-size: 32px; white-space: normal; }
  .about-title { white-space: normal; }
  .about-bio { font-size: 13.5px; line-height: 1.6; }
  .about-x { top: 10px; right: 10px; }

  /* Resume modal — already responsive in styles.css; tighten inset */
  .resume { inset: 48px 0 0 0; }
  .resume-inner { height: calc(100vh - 60px); }

  /* Sketchbook collage */
  .sb {
    inset: 48px 0 0 0;
    padding: 16px 14px 32px;
  }
  .sb-inner { padding: 12px 0 24px; }
  .sb-close { top: 4px; right: 0; }
  .sb-head {
    padding: 14px 0 20px;
    margin-bottom: 22px;
  }
  .sb-title { font-size: clamp(28px, 7.5vw, 40px); }
  .sb-intro { font-size: 14.5px; }
  .sb-board {
    flex-direction: column;
    gap: 14px;
  }
}

/* ─── Cursor label: two-line title + format ──────────────── */
.cursor-label {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px !important;
  line-height: 1.2;
}
.cursor-label-main {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}
.cursor-label-sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, .82);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Case study: format-only meta row ─────────────────── */
.case-meta-row.case-meta-format {
  justify-content: flex-end;
}
.case-meta-row.case-meta-format > span {
  color: var(--paper);
}

/* ─── Music Projects: opening typography ─────────────── */
.music-leadline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.8vw, 36px);
  color: var(--paper);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

/* ─── Music Projects layout: prose left / player right ── */
.case-section-music-idea .music-idea-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 560px);
  gap: 44px;
  align-items: start;
}
.music-idea-prose {
  display: block;
  max-width: 34ch;
  grid-template-columns: 1fr;
  text-align: left;
}
.music-idea-prose p { margin: 0; }
.music-idea-prose p + p { margin-top: 0.85em; }
.case-section-music-idea .music-idea-prose,
.case-section-music-idea.case-section-idea .music-idea-prose {
  display: block;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 34ch;
}
@media (max-width: 820px) {
  .case-section-music-idea .music-idea-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ─── Music Player (compact) ────────────────────────── */
.case-section-music { padding-top: 4px; }
.music-player-compact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  margin: 0;
}
@media (max-width: 820px) {
  .music-player-compact { max-width: none; justify-self: stretch; }
}

.music-deck-compact {
  position: relative;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(40, 36, 28, .65) 0%, rgba(15, 12, 8, .85) 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 32px rgba(0,0,0,.5);
}
.music-deck-compact::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255,255,255,.08);
  pointer-events: none;
}
.music-deck-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.music-deck-compact .music-deck-reels {
  display: flex;
  gap: 8px;
  padding: 0;
  flex-shrink: 0;
}
.music-deck-compact .music-reel {
  width: 38px;
  height: 38px;
}
.music-deck-compact .music-readout {
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.music-deck-compact .music-readout-title {
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-deck-compact .music-progress {
  margin: 4px 0 2px;
  height: 5px;
}
.music-deck-compact .music-progress-grip {
  width: 11px;
  height: 11px;
}
.music-deck-compact .music-controls {
  gap: 10px;
  margin-top: 4px;
}
.music-deck-compact .music-btn {
  width: 34px;
  height: 34px;
  font-size: 12px;
}
.music-deck-compact .music-btn-play {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.music-deck-reels {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 24px 4px;
}
.music-reel {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #2a2622 0%, #14110d 65%, #07060a 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,.55),
    inset 0 0 0 7px rgba(255,255,255,.06),
    inset 0 0 14px rgba(0,0,0,.7);
  animation: reelSpin 4s linear infinite;
  animation-play-state: paused;
}
.music-reel.is-spinning { animation-play-state: running; }
.music-reel::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d6cab0 0%, #6a604a 80%, #2a2418 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.music-reel-spoke {
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 1.5px;
  background: rgba(255,255,255,.16);
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0deg);
}
.music-reel-spoke:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg); }
.music-reel-spoke:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg); }
@keyframes reelSpin { to { transform: rotate(360deg); } }

.music-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.music-readout-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.music-readout-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--amber);
}
.music-readout-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  color: var(--paper);
}

.music-progress {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.10);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 100px;
  overflow: visible;
  margin: 6px 0 4px;
}
.music-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--amber);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(255, 170, 90, .5);
}
.music-progress-grip {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.45);
}
.music-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(236, 233, 223, .65);
}

.music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.music-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.music-btn:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
}
.music-btn-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 18px;
  background: var(--amber);
  color: #14110b;
  border-color: var(--amber);
  box-shadow: 0 0 24px rgba(255, 170, 90, .35);
}
.music-btn-play:hover {
  transform: scale(1.05);
  background: var(--paper);
  border-color: var(--paper);
}

.music-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(20,18,14,.55), rgba(10,8,6,.7));
  max-height: 360px;
  overflow-y: auto;
}
.music-list-compact {
  max-height: none;
}
.music-list-compact .music-list-btn {
  padding: 7px 12px;
  gap: 10px;
}
.music-list-compact .music-list-title {
  font-size: 15px;
}
.music-list-compact .music-list-num {
  min-width: 18px;
  font-size: 9.5px;
}
.music-list-compact .music-list-glyph {
  font-size: 10.5px;
  width: 12px;
}
.music-list-row {
  border-top: 1px solid rgba(255,255,255,.05);
}
.music-list-row:first-child { border-top: 0; }
.music-list-btn {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: none;
  font-family: inherit;
  color: var(--paper);
  transition: background .2s, color .2s;
}
.music-list-btn:hover {
  background: rgba(255,255,255,.05);
}
.music-list-row.is-active .music-list-btn {
  background: rgba(255, 170, 90, .10);
}
.music-list-row.is-active .music-list-num,
.music-list-row.is-active .music-list-glyph { color: var(--amber); }
.music-list-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(236, 233, 223, .55);
  min-width: 24px;
}
.music-list-glyph {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(236, 233, 223, .65);
  width: 16px;
  text-align: center;
}
.music-list-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--paper);
  line-height: 1.1;
}

.music-more {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  justify-self: center;
  transition: background .2s, color .2s, border-color .2s;
  cursor: none;
}
.music-more:hover {
  background: var(--amber);
  color: #14110b;
  border-color: var(--amber);
}
.music-more-glyph { font-size: 12px; }

/* ─── Sketchbook collage ──────────────────────────────── */
.sb {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 60;
  padding: 24px clamp(16px, 4vw, 48px) 48px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(40, 32, 22, .6) 0%, rgba(0,0,0,.85) 70%),
    linear-gradient(180deg, rgba(10,8,5,.92), rgba(0,0,0,.96));
  backdrop-filter: blur(6px);
  animation: caseIn .4s ease both;
  cursor: none;
}
.sb-inner {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 16px 2vw 32px;
}
.sb-close {
  position: absolute !important;
  top: 8px;
  right: 0;
  z-index: 3;
}

.sb-head {
  position: relative;
  padding: 18px 0 28px;
  border-bottom: 1px dashed rgba(255,255,255,.18);
  margin-bottom: 36px;
  max-width: 720px;
}
.sb-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.sb-title {
  font-family: 'Rock Salt', 'Caveat', var(--serif);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--paper);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: pretty;
}
.sb-intro {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(236, 233, 223, .85);
  max-width: 56ch;
  margin: 0;
}

.sb-board {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 8px;
}
.sb-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (max-width: 1000px) { .sb-board { gap: 22px; } }
@media (max-width: 620px)  { .sb-board { gap: 16px; } }

.sb-piece {
  position: relative;
  margin: 0;
  padding: 0;
  cursor: none;
  display: block;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .3s ease, z-index 0s;
  will-change: transform;
  z-index: 1;
}
.sb-piece:hover {
  z-index: 10;
  transform: rotate(0deg) translateY(-6px) scale(1.025) !important;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.7));
}

.sb-piece-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow:
    0 14px 24px rgba(0,0,0,.55),
    0 3px 6px rgba(0,0,0,.35);
}

/* Real tape image — randomly chosen from a small set per piece.
   Positioned so its center sits on the artwork's top edge: roughly half
   of the tape lies above the piece and half overlaps the top of the art. */
.sb-tape-img {
  position: absolute;
  top: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
  transform-origin: 50% 50%;
  z-index: 2;
}

/* Lightbox */
.sb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 16px;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(8px);
  padding: 4vh 24px;
  cursor: none;
  animation: caseIn .25s ease both;
}
.sb-lightbox-inner {
  position: relative;
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sb-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.sb-lightbox-caption {
  font-family: 'Caveat', var(--serif);
  font-size: 22px;
  color: var(--paper);
  text-align: center;
}
.sb-lightbox-medium {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(236, 233, 223, .82);
  padding: 5px 14px;
  border: 1px solid rgba(236, 233, 223, .26);
  background: rgba(10, 10, 12, .55);
  align-self: center;
  text-align: center;
}
.sb-lightbox-close {
  position: absolute !important;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.sb-lightbox-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 68px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(10,10,12,.55);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 18px;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  flex-shrink: 0;
}
.sb-lightbox-arrow:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110b;
}
.sb-lightbox-arrow-l:hover { transform: translateX(-2px); }
.sb-lightbox-arrow-r:hover { transform: translateX(2px); }
@media (max-width: 720px) {
  .sb-lightbox { padding: 4vh 8px; gap: 6px; }
  .sb-lightbox-arrow { width: 36px; height: 56px; font-size: 15px; }
  .sb-lightbox-medium {
    margin-top: 10px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}