/* ---------- Discman: pieces moved here from desktop.css so they load on every page ---------- */
.player { display: grid; gap: 14px; grid-auto-rows: min-content; align-content: start; }
.p-video { position: relative; aspect-ratio: 16 / 9; background: #0b0b0b; border: 1px solid var(--ink); overflow: hidden; }
.p-video iframe, .p-video #yt-slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; text-align: center; color: #E9E9E4; font: 400 0.75rem/1.55 var(--font-mono); }
.p-empty[hidden] { display: none; }
.p-now { display: flex; align-items: baseline; gap: 12px; margin: 0; min-width: 0; }
.p-now .hand { font-size: 2rem; line-height: 1; white-space: nowrap; flex: none; }
.p-now .mono { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.p-controls { display: flex; align-items: center; gap: 10px; }
.p-btn { appearance: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; background: var(--ground); border: 1px solid var(--ink); font-size: 1.25rem; box-shadow: 3px 3px 0 var(--ink); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 120ms ease, color 120ms ease; }
.p-btn:hover { background: var(--ink); color: var(--ground); }
.p-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.p-btn--main { width: 56px; height: 44px; }
.p-count { margin-left: auto; font: 500 0.75rem/1 var(--font-mono); color: var(--muted); }
.p-tracks { list-style: none; margin: 0; padding: 0 2px 4px 0; display: grid; gap: 8px; max-height: 232px; overflow: auto; overscroll-behavior: contain; }
.p-track { appearance: none; cursor: pointer; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; background: var(--ground); border: 1px solid var(--ink); text-align: left; }
.p-track .pt { display: grid; gap: 2px; min-width: 0; }
.p-track .pt b { font: 600 0.8125rem/1.2 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-track .pt i { font: 400 0.6875rem/1.2 var(--font-mono); font-style: normal; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-track[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.p-track[disabled] { cursor: not-allowed; color: var(--muted); border-style: dashed; }
.p-track .tiny { font: 400 0.6875rem/1 var(--font-mono); opacity: 0.8; white-space: nowrap; }
.p-note { margin: 0; font: 400 0.75rem/1.5 var(--font-mono); color: var(--muted); }
.p-error { margin: 0; padding: 10px 12px; border: 1.5px dashed var(--accent); color: var(--accent); font: 400 0.75rem/1.5 var(--font-mono); }
.p-error[hidden] { display: none; }


/* Journal: a ruled paper note for the current track */
.journal { position: relative; min-height: 196px; padding: 14px 16px 16px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--ink); background-image: repeating-linear-gradient(transparent 0 27px, rgb(20 20 20 / 0.1) 27px 28px); }
.j-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 500 0.6875rem/1 var(--font-mono); color: #55554F; }
.j-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.j-tags span { padding: 3px 6px; border: 1px solid #55554F; }
.j-title { margin: 0 0 8px; font: 450 1.375rem/1.2 var(--font-serif); letter-spacing: -0.01em; color: #141414; }
.j-by { display: block; margin-top: 4px; font: 400 0.75rem/1.3 var(--font-mono); letter-spacing: 0; color: #55554F; }
.j-body p { margin: 0 0 8px; font: 400 0.9375rem/1.5 var(--font-serif); color: #141414; }
.journal.is-in { animation: j-in 220ms var(--ease-out) both; }
@keyframes j-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Cassette insert: Side A and Side B, numbered by hand, with a Discman bar under it */
.jcard { position: relative; background: var(--paper); color: #141414; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.jc-top { height: 58px; background: linear-gradient(115deg, #7A7A74 0 56%, #D4351C 56% 62%, #141414 62%); }
.jc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 14px 6px; background: #E4E1D2; border-bottom: 1px solid rgb(20 20 20 / 0.3); }
.jc-title { font: 400 2.25rem/1 var(--font-hand); color: #141414; }
.jc-sub { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #55554F; }
.jc-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 10px 14px 16px; }
.jc-side h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.jc-side h4 b { font: 600 1.75rem/1 var(--font-sans); color: #B92B16; }
.jc-side h4 span { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #B92B16; }
.jc-side ol { list-style: none; margin: 0; padding: 0; }
.jc-side li { border-bottom: 1px solid rgb(20 20 20 / 0.2); }
.jc-track { appearance: none; background: transparent; border: 0; cursor: pointer; width: 100%; min-height: 30px; padding: 2px 0; display: flex; align-items: center; gap: 8px; text-align: left; color: #141414; }
.jc-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #141414; background: rgb(212 53 28 / 0.2); font: 400 1.0625rem/1 var(--font-hand); transform: rotate(-3deg); }
.jc-t { min-width: 0; font: 400 1.1875rem/1.05 var(--font-hand); letter-spacing: 0.01em; }
.jc-track:hover .jc-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jc-track[aria-pressed="true"] .jc-n { background: #141414; color: #F2F1EA; }
.jc-track[aria-pressed="true"] .jc-t { background: linear-gradient(transparent 52%, rgb(212 53 28 / 0.3) 52%); }
.jc-track:focus-visible { outline: 2px solid #B92B16; outline-offset: 2px; }
@media (pointer: coarse) { .jc-track { min-height: 44px; } }
@media (max-width: 520px) { .jc-sides { grid-template-columns: minmax(0, 1fr); } }

.discman { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; background: #2A2724; color: #E9E9E4; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.dm-btns { display: flex; gap: 8px; }
.discman .p-btn { background: #3A3632; color: #E9E9E4; border-color: #0B0B0B; box-shadow: 2px 2px 0 #0B0B0B; }
.discman .p-btn:hover { background: #E9E9E4; color: #141414; }
.discman .p-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #0B0B0B; }
.lcd { flex: 1 1 190px; min-width: 0; display: grid; gap: 3px; padding: 6px 10px; background: #A3B3A2; color: #1B241C; border: 1px solid #0B0B0B; box-shadow: inset 2px 2px 0 rgb(0 0 0 / 0.22); font: 500 0.8125rem/1.25 var(--font-mono); }
.lcd .l1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcd .l2 { display: flex; justify-content: space-between; gap: 10px; font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) { .journal.is-in, .disc.is-in { animation: none !important; } }

/* The drawer, opened from the discman icon in the header */
.disc { position: fixed; z-index: 900; top: calc(var(--mb-h) + 10px); right: 16px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - var(--mb-h) - 26px); display: flex; flex-direction: column; background: var(--ground); color: var(--ink); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); view-transition-name: disc; }
.disc[hidden] { display: none; }
.disc.is-in { animation: disc-in 180ms var(--ease-out) both; }
@keyframes disc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.disc-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding-left: 14px; border-bottom: 1px solid var(--ink); }
.disc-ttl { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.disc-x { appearance: none; background: transparent; color: inherit; border: 0; border-left: 1px solid var(--ink); width: 44px; min-height: 40px; cursor: pointer; font-size: 1rem; transition: background-color 120ms ease, color 120ms ease; }
.disc-x:hover { background: var(--ink); color: var(--ground); }
.disc-body { display: grid; gap: 14px; grid-auto-rows: min-content; align-content: start; padding: 14px; overflow: auto; overscroll-behavior: contain; }
@media (max-width: 600px) { .disc { left: 8px; right: 8px; width: auto; top: calc(var(--mb-h) + 6px); } }

/* Minimized: only the player controls, parked bottom right so the music stays in reach while you browse.
   The video keeps its full size but sits off screen, so the YouTube player is never torn down. */
.disc.is-mini { top: auto; bottom: 16px; right: 16px; width: min(520px, calc(100vw - 32px)); max-height: none; background: transparent; border: 0; box-shadow: none; }
.disc.is-mini .disc-bar { display: none; }
.disc.is-mini .disc-body { display: block; padding: 0; overflow: visible; }
.disc.is-mini .disc-body > :not(.discman):not(.p-video) { display: none; }
.disc.is-mini .p-video { position: fixed; left: -10000px; top: 0; width: 480px; }
.disc.is-mini .discman { flex-wrap: nowrap; }
.disc.is-mini .lcd { cursor: pointer; }
.disc.is-mini .lcd:focus-visible { outline: 2px solid #E9E9E4; outline-offset: 2px; }
@media (max-width: 520px) {
  .disc.is-mini { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .disc.is-mini .discman { gap: 8px; padding: 8px; }
  .disc.is-mini .dm-btns { gap: 6px; }
  .disc.is-mini .p-btn, .disc.is-mini .p-btn--main { width: 34px; height: 36px; font-size: 1rem; }
  .disc.is-mini .lcd { flex-basis: 120px; padding: 5px 7px; }
  .disc.is-mini .lcd .l1 { font-size: 0.75rem; }
  .disc.is-mini .lcd .l2 { font-size: 0.6875rem; white-space: nowrap; }
}
/* Leave room for the bar: the footer scrolls clear of it, and the Fun page dock steps up. */
html.disc-mini .site-footer { padding-bottom: 112px; }
html.disc-mini .dock { bottom: 92px; }

.j-body p.j-more { margin: 2px 0 0; font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.02em; }
.j-more a { color: #B92B16; text-underline-offset: 3px; }
.j-more a:hover { color: #141414; }