/* ===== TACITURI — Luister ===== */
.theme-dark{ background:var(--ink-2); }

/* header */
.luister-head{ padding:clamp(120px,15vw,180px) 0 clamp(30px,4vw,48px); }
.luister-head .eyebrow{ color:var(--d-muted); }
.luister-title{ font-size:clamp(54px,9vw,120px); color:var(--d-text); line-height:.96; margin-bottom:1.2rem; letter-spacing:.02em; }
.luister-sub{ font-size:clamp(21px,1.9vw,24px); color:var(--d-text-2); max-width:60ch; margin:0 0 2rem; }
.luister-stream{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.luister-stream .label{ color:var(--d-muted); }

/* player stage */
.player-wrap{ padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,72px); }
.player-stage{
  display:grid; grid-template-columns:minmax(300px,360px) 1fr; gap:clamp(28px,4vw,60px);
  align-items:stretch;
  border:1px solid var(--d-line); background:rgba(231,224,210,.018);
  padding:clamp(22px,3vw,40px);
}
.player-side{ display:flex; flex-direction:column; }
.player-cover{ position:relative; margin:0 0 26px; }
.player-cover img{ width:100%; aspect-ratio:1/1; object-fit:cover; box-shadow:0 30px 60px -28px rgba(0,0,0,.8); background:var(--ink); }
.player-vobadge{
  position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--bronze-lite);
  background:rgba(20,22,26,.7); backdrop-filter:blur(4px); padding:8px 13px; border:1px solid var(--d-line-2);
}
.player-vobadge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bronze-lite); }
.player-info{ margin-bottom:26px; }
.player-row1{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.player-row1 .mono{ color:var(--d-muted); letter-spacing:.16em; }
.player-row1 .label{ color:var(--bronze-lite); }
.player-title{ font-size:clamp(28px,3.4vw,44px); color:var(--d-text); line-height:1.04; margin-bottom:12px; }
.player-capt{ color:var(--d-text-2); font-size:19px; line-height:1.55; margin:0; max-width:42ch; }

.player-controls{ margin-top:auto; }
.player-btns{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.pc-btn{ background:none; border:0; cursor:pointer; color:var(--d-text-2); padding:6px; transition:color .25s; }
.pc-btn:hover{ color:var(--d-text); }
.pc-btn svg{ width:24px; height:24px; }
.pc-play{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--d-line-2); background:var(--bronze);
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.pc-play:hover{ background:var(--bronze-lite); transform:scale(1.04); }
.pc-play .ic-play{ width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #1d1a14; margin-left:3px; }
.pc-play .ic-pause{ display:none; width:15px; height:17px; border-left:4px solid #1d1a14; border-right:4px solid #1d1a14; box-sizing:border-box; }
.pc-play.is-playing .ic-play{ display:none; }
.pc-play.is-playing .ic-pause{ display:block; }

.player-bar{ display:flex; align-items:center; gap:16px; }
.player-progress{ flex:1; height:3px; background:var(--d-line); cursor:pointer; position:relative; }
.player-progress::before{ content:""; position:absolute; inset:-9px 0; }
.player-progress-fill{ height:100%; width:0%; background:var(--bronze-lite); position:relative; }
.player-progress-fill::after{ content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--bronze-lite); }
.player-time{ color:var(--d-muted); font-size:14px; white-space:nowrap; }

/* reading column = modebar + scrolling panel */
.player-readcol{ display:flex; flex-direction:column; min-width:0; border-left:1px solid var(--d-line); padding-left:clamp(24px,3vw,48px); }
.read-modebar{ display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; padding-bottom:15px; border-bottom:1px solid var(--d-line); }
.read-modehint{ color:var(--d-muted); letter-spacing:.02em; white-space:nowrap; }
.read-toggle{ display:inline-flex; border:1px solid var(--d-line-2); border-radius:2px; overflow:hidden; }
.rt-opt{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:12px; padding:9px 14px; background:none; border:0; color:var(--d-muted); cursor:pointer; white-space:nowrap; transition:background .3s var(--ease), color .3s var(--ease); }
.rt-opt + .rt-opt{ border-left:1px solid var(--d-line-2); }
.rt-opt:hover{ color:var(--d-text-2); }
.rt-opt.on{ background:var(--bronze); color:#1d1a14; }

/* reading panel */
.player-read{
  flex:1; max-height:min(58vh,560px); overflow-y:auto; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 87%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 8%, #000 87%, transparent 100%);
  padding-block:26px;
}
.player-read::-webkit-scrollbar{ width:5px; }
.player-read::-webkit-scrollbar-thumb{ background:var(--d-line-2); }
.vo-line{
  font-family:var(--serif); font-size:clamp(21px,2.3vw,29px); line-height:1.42; letter-spacing:.005em;
  color:var(--d-muted); margin:0; padding:1px 0; cursor:pointer;
  opacity:.5; transition:color .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}
.vo-line:hover{ color:var(--d-text-2); }
.vo-line.past{ opacity:.32; color:var(--d-muted); }
.vo-line.active{ color:var(--d-text); opacity:1; transform:translateX(2px); }
.vo-line.active::before{ content:""; display:inline-block; width:18px; height:1px; background:var(--bronze-lite); vertical-align:middle; margin-right:14px; }
.player-read.mode-free .vo-line{ cursor:pointer; }
.player-read.mode-free .vo-line.active{ color:var(--d-text-2); }
.player-read.mode-free .vo-line.active::before{ opacity:.55; }
.vo-break{ height:1.1em; }
.player-read.is-instr{ display:flex; flex-direction:column; justify-content:center; }
.vo-caption{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.6vw,32px); color:var(--d-text); line-height:1.4; margin:0 0 1.4rem; }
.vo-instr{ color:var(--d-muted); letter-spacing:.04em; }

/* tracklist */
.tracklist-wrap{ padding-block:clamp(40px,6vw,90px); border-top:1px solid var(--d-line); }
.tracklist-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.tracklist-head h2{ font-size:clamp(26px,3vw,40px); color:var(--d-text); }
.tracklist-head .mono{ color:var(--d-muted); }
.tracklist{ list-style:none; margin:0; padding:0; }
.tr{
  display:grid; grid-template-columns:46px 44px 34px 1fr auto auto; align-items:center; gap:18px;
  padding:17px 14px; border-top:1px solid var(--d-line); cursor:pointer; transition:background .3s; position:relative;
}
.tr-cover{ width:44px; height:44px; object-fit:cover; border:1px solid var(--d-line); display:block; transition:border-color .3s; }
.tr:hover .tr-cover{ border-color:var(--d-line-2); }
.tr.playing .tr-cover{ border-color:var(--bronze-lite); }
.tr:last-child{ border-bottom:1px solid var(--d-line); }
.tr:hover{ background:rgba(231,224,210,.03); }
.tr-play{ width:38px; height:38px; border-radius:50%; border:1px solid var(--d-line-2); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--d-text-2); transition:all .3s; }
.tr:hover .tr-play{ border-color:var(--bronze-lite); color:var(--bronze-lite); }
.tr-play .ic-play{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:2px; }
.tr-play .ic-pause{ display:none; width:10px; height:11px; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; }
.tr.sounding .tr-play{ background:var(--bronze); border-color:var(--bronze); color:#1d1a14; }
.tr.sounding .ic-play{ display:none; }
.tr.sounding .ic-pause{ display:block; }
.tr-num{ color:var(--d-muted); letter-spacing:.1em; }
.tr-title{ font-family:var(--serif); font-size:clamp(20px,2vw,26px); color:var(--d-text-2); transition:color .3s; }
.tr.playing .tr-title{ color:var(--d-text); }
.tr.playing::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--bronze-lite); }
.tr-vo{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--bronze-lite); border:1px solid var(--d-line-2); padding:6px 11px; white-space:nowrap; }
.tr-vo.tr-instr{ color:var(--d-muted); }
.tr-dur{ color:var(--d-muted); font-size:14.5px; min-width:48px; text-align:right; }

@media (max-width:840px){
  .player-stage{ grid-template-columns:1fr; }
  .player-readcol{ border-left:0; border-top:1px solid var(--d-line); padding-left:0; padding-top:26px; }
  .player-read{ max-height:none; -webkit-mask-image:none; mask-image:none; }
  .player-read.is-instr{ display:block; }
  .player-cover{ max-width:300px; }
  .tr{ grid-template-columns:40px 44px 1fr auto; gap:12px; }
  .tr-num,.tr-vo{ display:none; }
}