/* ══════════════════════════════════════════════════════════════════
   the content pages: music / gear / wants / into
   loaded only by those four pages, after site.css.

   house rules, same as the front page:
     pink gradient bars with dark text, chunky bevel buttons, hard black
     shadows, dotted pink rules, rotated plates, stickers and png decos.
     Impact for titles, Courier for labels, Comic Sans for anything read.
     black is the page, pink is the ink, nothing is neutral grey.

   four different layouts, none of them a shared card:
     music = a crate of artist buttons + one sleeve and its tracklist
     gear  = photos pinned to a board, then a rambling panel
     wants = a pink order slip, tick boxes, barcode, stamp
     into  = a chalkboard with numbered chalk entries
   ══════════════════════════════════════════════════════════════════ */

.shell.sub{padding-bottom:0}
.pg{padding:0 20px 26px}

/* ── the plate: .panel's body, but its own element so a page can
      restyle it without dragging the front page along ───────────── */
.plate{
  position:relative;padding:7px 13px 12px;
  border:2px solid var(--baby);border-radius:14px;
  background:rgba(8,3,9,.95);
  box-shadow:6px 6px 0 rgba(0,0,0,.9),0 0 0 1px #000,inset 0 0 40px rgba(255,61,158,.07);
}
.plate>h2{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:-7px -13px 11px;padding:6px 12px;
  background:linear-gradient(180deg,var(--pink),#d21f78);
  border-bottom:2px solid #000;border-radius:12px 12px 0 0;
  color:#1a0010;font:bold 12px/1.7 'Courier New',monospace;
  letter-spacing:.34em;text-transform:uppercase;
}
.plate>h2 i{font:normal 9px/1.7 'Courier New',monospace;letter-spacing:.14em;opacity:.65;text-transform:lowercase}

/* ── empty slots: dotted rules you can see the shape of ─────────── */
.slot{display:block;height:15px;border-bottom:2px dotted rgba(255,179,217,.42)}
.slot.s{width:32%}
.slot.m{width:56%}
.slot.l{width:82%}
.lbl{
  display:block;margin:0 0 6px;
  font:9px/1 'Courier New',monospace;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink);opacity:.9;
}
.lbl+.slot{margin-bottom:12px}

/* ── page titles: one per page, all of them loud ────────────────── */
.ptitle{position:relative;text-align:center;padding:24px 20px 2px}
.ptitle h1{margin:0;display:inline-block;line-height:1}
/* the page title doubles as the way home */
.ptitle a.plink{display:inline-block;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ptitle a.plink:hover h1{filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,61,158,.55))}
.ptitle a.plink:active{transform:translateY(1px)}
.ptitle .k{display:block;margin:12px 0 0;font-size:15px;color:var(--baby);opacity:.9;font-family:'MS Gothic','Malgun Gothic','SimSun',sans-serif}
.ptitle .sub{
  display:block;margin:10px 0 0;
  font:9px/1.6 'Courier New',monospace;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,179,217,.5);
}
.ptitle .deco{filter:drop-shadow(2px 3px 0 rgba(0,0,0,.75))}

/* music: a poster plate */
.t-music h1{
  padding:2px 20px 6px;background:var(--pink);color:#1a0010;
  font:52px/.95 Impact,'Arial Black',sans-serif;letter-spacing:-2px;
  transform:rotate(-1.6deg);
  box-shadow:7px 7px 0 #000,0 0 0 3px #000,0 0 0 6px var(--baby);
}
/* things: the combined page, a plate with a pink glow */
.t-things h1{
  padding:3px 22px 7px;background:#0b0409;color:var(--pink);
  border:3px solid var(--pink);transform:rotate(1.3deg);
  font:46px/.95 Impact,'Arial Black',sans-serif;letter-spacing:-1px;
  box-shadow:6px 6px 0 #000,0 0 28px rgba(255,61,158,.4);
}

/* a block heading on the combined page: the dymo label */
.lab{
  display:inline-block;margin:0 0 16px;padding:6px 20px 9px;font-weight:normal;
  background:var(--baby);color:#1a0010;border:3px solid #000;transform:rotate(-1deg);
  font:19px/1.15 'Courier New',monospace;font-weight:bold;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:5px 5px 0 var(--pink),0 0 0 3px #000;
}
.blk{margin-bottom:34px}
.blk:last-child{margin-bottom:6px}

/* ══ 1. music: the crate ══════════════════════════════════════════ */
.mu-wrap{display:grid;grid-template-columns:246px minmax(0,1fr);gap:16px;align-items:start}

.spines{list-style:none;margin:0;padding:0}
.spine{
  display:flex;align-items:center;gap:10px;padding:8px 4px 8px 6px;
  border-bottom:1px solid rgba(255,61,158,.18);
  transition:background .06s,transform .06s;
}
.spine:last-child{border-bottom:0}
.spine b{
  flex:0 0 26px;height:26px;display:grid;place-items:center;
  background:var(--baby);color:#1a0010;border:2px solid #000;
  font:12px/1 Impact,'Arial Black',sans-serif;letter-spacing:0;
  box-shadow:2px 2px 0 var(--pink);
}
.spine .slot{flex:1;height:13px}
.spine em{
  flex:0 0 auto;font-style:normal;font-size:11px;color:var(--pink);opacity:.75;
  text-shadow:0 0 8px rgba(255,61,158,.5);
}
.spine:hover{background:rgba(255,61,158,.1);transform:translateX(2px)}

.sleeve{display:flex;gap:18px;align-items:flex-start;padding:4px 2px 2px}
.disc{
  position:relative;flex:0 0 148px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#2a0a18,#0a0206 72%);
  border:3px solid var(--pink);
  box-shadow:0 0 0 2px #000,0 0 26px rgba(255,61,158,.28),6px 6px 0 rgba(0,0,0,.8);
}
.meta{flex:1;min-width:0;padding-top:2px}

.tracklist{margin-top:6px;border-top:2px dotted rgba(255,61,158,.45);padding-top:2px}
.trk{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px dotted rgba(255,61,158,.22)}
.trk:last-child{border-bottom:0}
.trk b{flex:0 0 24px;font:bold 14px/1 Impact,'Arial Black',sans-serif;color:var(--pink)}
.trk .t{flex:0 0 44%;height:14px;border-bottom:2px dotted rgba(255,179,217,.42)}
.trk .lead{flex:1;height:0;border-bottom:1px dotted rgba(255,179,217,.28)}
.trk .len{flex:0 0 36px;height:12px;border-bottom:2px dotted rgba(255,179,217,.28)}

/* ══ 2. gear: pinned to the board ═════════════════════════════════ */
.ge-board{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 20px;padding:26px 20px 30px;margin-bottom:18px;
  border:3px solid var(--maroon);border-radius:6px;
  background:
    repeating-linear-gradient(45deg,rgba(255,61,158,.055) 0 2px,transparent 2px 9px),
    rgba(6,2,8,.92);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),6px 6px 0 rgba(0,0,0,.85);
}
.pin{position:relative;margin:0;background:#0b0409;border:3px solid var(--pink);border-radius:3px;
  padding:0;box-shadow:6px 6px 0 rgba(0,0,0,.9),0 0 0 1px #000,0 0 18px rgba(255,61,158,.14);
  transform:rotate(-2deg)}
.pin:nth-child(2){transform:rotate(1.7deg)}
.pin:nth-child(3){transform:rotate(-.7deg)}
.pin:nth-child(4){transform:rotate(2.1deg)}
.pin:nth-child(5){transform:rotate(-1.5deg)}
.pin:nth-child(6){transform:rotate(.8deg)}
.pin .hd{
  position:absolute;top:-12px;left:50%;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 16%,var(--pink) 42%,#7d0c40 100%);
  border:2px solid #000;box-shadow:0 4px 5px rgba(0,0,0,.85),0 0 12px rgba(255,61,158,.5);z-index:3;
}
.pin .ph{
  aspect-ratio:1;border-bottom:3px solid var(--pink);position:relative;
  background:
    repeating-linear-gradient(135deg,rgba(255,61,158,.16) 0 6px,transparent 6px 13px),
    #0d0409;
}
.pin .ph::after{
  content:"+";position:absolute;inset:0;display:grid;place-items:center;
  font:26px/1 'Courier New',monospace;color:rgba(255,179,217,.4);
}
.pin figcaption{display:block;background:var(--baby);padding:8px 7px 10px}
.pin figcaption .slot{border-bottom-color:rgba(26,0,16,.5)}
.pin figcaption .slot+.slot{margin-top:9px}

.ge-note .slot{margin-bottom:13px}
.ge-note .slot:last-child{margin-bottom:2px}

/* ══ 3. wants: the order slip ═════════════════════════════════════ */
.slip{
  position:relative;transform:rotate(-.8deg);
  background:
    repeating-linear-gradient(180deg,rgba(109,18,54,.05) 0 1px,transparent 1px 26px),
    #ffb3d9;
  color:#6d1236;border:3px solid #1a0010;
  box-shadow:10px 10px 0 rgba(0,0,0,.9),0 0 0 1px #000;
  padding:0 0 18px;
}
.slip .perf{ /* the tear-off strip at the top */
  height:14px;
  background:
    radial-gradient(circle at 7px 0,transparent 6px,#1a0010 6.5px 7.5px,transparent 8px) 0 0/14px 14px repeat-x,
    #ffd9ec;
  border-bottom:2px dashed #c2195b;
}
.slip .sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 16px 10px;border-bottom:3px double #6d1236}
.slip .sh b{font:bold 19px/1 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;color:#1a0010}
.slip .sh span{font:10px/1 'Courier New',monospace;letter-spacing:.28em;text-transform:uppercase;opacity:.8}

.frow{
  display:grid;grid-template-columns:30px minmax(0,1.15fr) minmax(0,1.75fr) 78px 60px;
  gap:10px;align-items:center;padding:11px 16px;border-bottom:1px dashed rgba(109,18,54,.45);
}
.frow.last{border-bottom:0}
.fhead{display:grid;grid-template-columns:30px minmax(0,1.15fr) minmax(0,1.75fr) 78px 60px;gap:10px;padding:8px 16px 6px}
.fhead b{
  font:9px/1 'Courier New',monospace;letter-spacing:.2em;text-transform:uppercase;
  color:#8f2150;font-weight:normal;border-bottom:1px solid rgba(109,18,54,.5);padding-bottom:4px;
}
.tick{
  width:18px;height:18px;border:3px solid #1a0010;background:#ffd9ec;
  box-shadow:inset -2px -2px 0 #e07bab,inset 2px 2px 0 #fff;justify-self:start;
}
.slotd{display:block;height:15px;border-bottom:2px dotted rgba(109,18,54,.55)}
.slotd.s{width:70%}

.slip .stamp{
  position:absolute;right:20px;bottom:22px;transform:rotate(-11deg);
  border:3px double #c2195b;padding:5px 12px;color:#c2195b;opacity:.72;
  font:bold 15px/1.2 'Courier New',monospace;letter-spacing:.22em;text-transform:uppercase;
}
.slip .barcode{
  margin:16px 16px 0;height:30px;width:170px;opacity:.8;
  background:repeating-linear-gradient(90deg,#1a0010 0 2px,transparent 2px 4px,#1a0010 4px 5px,transparent 5px 9px,#1a0010 9px 12px,transparent 12px 14px);
}
.slip .fine{margin:6px 16px 0;font:8.5px/1.6 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.65}

/* ══ 4. into: the chalkboard ══════════════════════════════════════ */
.board{
  position:relative;padding:22px 24px 26px;
  border:10px solid #1b0713;border-radius:8px;
  background:
    radial-gradient(60% 40% at 24% 18%,rgba(255,61,158,.12),transparent 70%),
    radial-gradient(50% 40% at 82% 74%,rgba(255,179,217,.09),transparent 70%),
    #070309;
  box-shadow:inset 0 0 70px rgba(0,0,0,.95),0 0 0 2px rgba(255,61,158,.5),8px 8px 0 rgba(0,0,0,.85);
}
.board::after{ /* a chalk line drawn inside the frame */
  content:"";position:absolute;inset:9px;border:1px dashed rgba(255,179,217,.22);border-radius:4px;
  pointer-events:none;
}
.board .chalk-title{
  margin:0 0 10px;padding:0 0 12px;
  font:bold 21px/1.25 "Comic Sans MS","Comic Sans","Comic Relief",cursive;
  color:#ffe4f1;text-shadow:0 0 12px rgba(255,61,158,.5),2px 2px 0 #000;
  border-bottom:2px dashed rgba(255,179,217,.3);
}
.chalk{position:relative;padding:16px 0 18px;border-bottom:1px dotted rgba(255,179,217,.22)}
.chalk:last-child{border-bottom:0}
.chalk .n{
  position:absolute;left:-2px;top:14px;width:34px;height:34px;display:grid;place-items:center;
  border:2px dashed rgba(255,179,217,.5);border-radius:50%;
  font:13px/1 Impact,'Arial Black',sans-serif;color:#ffd9ec;
  text-shadow:0 0 10px rgba(255,61,158,.6);
}
.chalk .body{padding-left:50px}
.chalk .what{
  display:block;height:28px;margin-bottom:4px;border-bottom:2px solid rgba(255,217,236,.78);
}
.chalk .why{display:block;height:22px;border-bottom:1px dotted rgba(255,179,217,.42);margin-bottom:6px}
.chalk .why.s{width:78%}
.board .footmark{
  display:block;margin-top:14px;text-align:right;
  font:13px/1.4 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:rgba(255,217,236,.4);
}

/* ══ mobile ═══════════════════════════════════════════════════════ */
@media (max-width:820px){
  .pg{padding:0 12px 20px}

  .ptitle{padding:16px 12px 0}
  .t-music h1{font-size:36px;padding:2px 16px 5px;box-shadow:5px 5px 0 #000,0 0 0 3px #000,0 0 0 5px var(--baby)}
  .t-things h1{font-size:34px;padding:2px 16px 6px}
  .lab{font-size:15px;padding:6px 14px 8px;letter-spacing:.12em;margin-bottom:13px;box-shadow:4px 4px 0 var(--pink),0 0 0 3px #000}
  .blk{margin-bottom:24px}
  .ptitle .sub{font-size:8.5px;letter-spacing:.24em}
  .ptitle .k{font-size:13px;margin-top:10px}
  .ptitle .deco{display:none}

  /* music: crate buttons on top, sleeve under */
  .mu-wrap{grid-template-columns:1fr;gap:12px}
  .spines{display:grid;grid-template-columns:1fr 1fr}
  .spine{padding:7px 4px 7px 5px;border-right:1px solid rgba(255,61,158,.18)}
  .spine:nth-child(2n){border-right:0}
  .spine b{flex:0 0 22px;height:22px;font-size:10px}
  .sleeve{flex-direction:column;gap:14px}
  .disc{flex:0 0 auto;width:120px;margin:0 auto}
  .meta{width:100%}
  .trk .t{flex:0 0 40%}

  /* gear: two up, pins stay */
  .ge-board{grid-template-columns:1fr 1fr;gap:22px 14px;padding:22px 14px 26px}
  .pin{padding:5px 5px 0}
  .pin .hd{width:13px;height:13px;margin-left:-6.5px;top:-10px}
  .ge-note .slot{margin-bottom:11px}

  /* wants: the slip keeps its shape, rows become labelled lines */
  .slip{transform:rotate(-.5deg);box-shadow:6px 6px 0 rgba(0,0,0,.9)}
  .slip .sh{padding:10px 12px 8px}
  .slip .sh b{font-size:17px}
  .slip .sh span{font-size:8.5px;letter-spacing:.18em}
  .fhead{display:none}
  .frow{grid-template-columns:22px minmax(0,1fr);gap:2px 9px;padding:11px 12px;align-items:start}
  .tick{grid-row:span 4;margin-top:4px;width:16px;height:16px;border-width:2px}
  .frow .slotd{height:24px;padding-left:58px}
  .frow .slotd{position:relative}
  .frow .slotd::before{
    position:absolute;left:0;top:6px;
    font:8px/1 'Courier New',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f2150;
  }
  .frow .slotd:nth-of-type(2)::before{content:"thing"}
  .frow .slotd:nth-of-type(3)::before{content:"why"}
  .frow .slotd:nth-of-type(4)::before{content:"probably"}
  .frow .slotd:nth-of-type(5)::before{content:"priority"}
  .slip .stamp{right:12px;bottom:52px;font-size:11px;padding:4px 9px}
  .slip .barcode{margin:14px 12px 0;height:24px;width:130px}
  .slip .fine{margin:6px 12px 0;font-size:8px}

  /* into: number goes inline above the entry */
  .board{padding:16px 15px 20px;border-width:7px}
  .chalk{padding:13px 0 15px}
  .chalk .n{position:static;display:inline-grid;width:26px;height:26px;font-size:11px;margin-bottom:8px}
  .chalk .body{padding-left:0}
  .chalk .what{height:24px}
  .chalk .why{height:20px}
}

@media (max-width:360px){
  .ge-board{grid-template-columns:1fr;gap:22px;padding:20px 16px 24px}
  .spines{grid-template-columns:1fr}
  .spine{border-right:0}
}

/* ══ the music page's confetti ══════════════════════════════════
   a straight copy of the front page's sparkle snow (#snow in site.css):
   same generator, same maths, same fall + sway + depth blur. the only
   difference is the sprites are music notes. it runs behind the black
   column, so it lives in the leopard gutters exactly like the front
   page, and js/notes.js fills it in. */
#notes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#notes i{
  position:absolute;top:-90px;width:var(--sz);height:var(--sz);
  animation:noteFall var(--dur) linear var(--del) infinite;
  will-change:transform;
}
#notes i b{
  display:block;width:100%;height:100%;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  animation:noteSway var(--swaydur) ease-in-out var(--swaydel,0s) infinite alternate;
  will-change:transform;
}
@keyframes noteFall{from{transform:translate3d(0,-12vh,0)}to{transform:translate3d(0,118vh,0)}}
@keyframes noteSway{
  from{transform:translateX(calc(var(--sway) * -1)) rotate(calc(var(--spin) * -0.5)) scale(.92)}
  to  {transform:translateX(var(--sway)) rotate(calc(var(--spin) * 0.5)) scale(1.06)}
}

/* ── the crate, filled: a spine you can pull and the sleeve it loads ── */
.spine{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(255,61,158,.18);
  font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.spine:last-child{border-bottom:0}
.spine .nm{
  flex:1;min-width:0;padding:1px 0 3px;   /* room for the j/tail, the line box clips it otherwise */
  font:13px/1.75 'Comic Sans MS','Comic Sans','Comic Relief',cursive;
  color:#ffe4f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spine.on{background:rgba(255,61,158,.16);transform:translateX(2px)}
.spine.on em{opacity:1;color:var(--baby);text-shadow:0 0 10px rgba(255,179,217,.9)}

.meta .nm{
  display:block;margin:2px 0 13px;
  font:bold 21px/1.25 'Comic Sans MS','Comic Sans','Comic Relief',cursive;
  color:var(--pink);text-shadow:0 0 14px rgba(255,61,158,.45);
}
.meta .why{
  margin:0;font:12.5px/1.62 'Comic Sans MS','Comic Sans','Comic Relief',cursive;
  color:#ffd9ec;
}

.trk{align-items:flex-start}
.trk .tt{flex:1;min-width:0}
.trk .t{
  display:block;flex:none;height:auto;border:0;
  font:bold 15px/1.35 'Comic Sans MS','Comic Sans','Comic Relief',cursive;color:#ffe4f1;
}
.trk .why{
  display:block;margin-top:5px;
  font:12.5px/1.58 'Comic Sans MS','Comic Sans','Comic Relief',cursive;
  color:#ffd9ec;opacity:.88;
}
@media (max-width:620px){
  .meta .nm{font-size:18px}
  .trk .t{font-size:14px}
  .trk .why,.meta .why{font-size:12px}
}

/* ── the record: her picture as the vinyl, spinning while it plays ── */
.disc.art{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;   /* spun from js, so it can ease to a stop with the deck */
}
@keyframes vinylSpin{from{transform:rotate(-9deg)} to{transform:rotate(351deg)}}
@media (prefers-reduced-motion:reduce){
  .disc.art{animation:none;transform:rotate(-9deg)}
}

/* a link tucked inside one of her reasons */
.trk .why a,.meta .why a{
  color:var(--pink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:2px;
}
.trk .why a:hover,.meta .why a:hover{color:var(--baby)}

/* the deck, sitting under the rack */
.deck-plate .deck{margin:4px 0 0}
.deck.noaudio .deck-title{color:rgba(255,179,217,.55)}
.deck.noaudio .dbtn.play{opacity:.35;cursor:not-allowed}

/* music page: rack and deck share the left column, the deck is the same width
   as the rack and has no frame of its own. the sleeve sits beside them and can
   run as far down as it likes without touching the deck. */
.mu-left{display:flex;flex-direction:column;gap:15px;min-width:0}
.p-deck .deck{width:100%;margin:0}
/* no room for the meters or the side fader at this width: the horizontal
   fader under the transport does the job */
.p-deck .viz,.p-deck .vol{display:none}
.p-deck .deck-vol{display:flex}
.p-deck .deck{padding:10px 9px 9px}
.p-deck .stage{width:min(100%,224px);height:132px;margin:0 auto 7px}   /* the arm and
  platter need to stay near each other, so the stage stops growing with the deck */
.p-deck .platter{width:112px;height:112px;left:8px;top:2px}
/* long enough that the headshell lands ON the record, not on its edge */
.p-deck .arm{right:31px;top:8px;height:112px}
.p-deck .arm::after{width:13px;height:17px}
/* the power light sits beside the platter, where a deck has it */
.p-deck .led{left:128px;top:6px}
.p-deck .hw{left:-3px;bottom:-1px;font-size:6px;letter-spacing:.1em}
.p-deck .hw span{margin-left:5px;letter-spacing:.1em}
.p-deck .deck-title{font-size:8.5px;letter-spacing:.06em;padding:5px 6px}
.p-deck .dbtn{min-width:38px;height:34px}
.p-deck .deck-row{gap:5px}
.p-deck .time{font-size:8px}

/* fingers on the music deck: the scrub bar and the fader need a real target */
@media (hover:none){
  .p-deck .seek{height:32px}
  .p-deck .deck-vol input[type=range]{height:22px}
  .p-deck .deck-vol input[type=range]::-webkit-slider-thumb{width:12px;height:22px;margin-top:0}
}

/* the arm swings a touch further in on the music deck so it reads as playing */
.p-deck .deck.playing .arm{transform:rotate(58deg)}