/* ============================================================
   exclusive.css — /edition/:id/exclusive
   A vintage pocket media player. Lightweight, mobile-first.
   Retro gadget shell + paper labels, warm ivory canvas.
   ============================================================ */

.exwrap { width: min(100% - 32px, 460px); margin: 0 auto; padding: 26px 0 60px; }

.ex-top { display:flex; align-items:center; justify-content:space-between; padding: 16px 0 8px; }
.ex-top a { font-family: var(--mono); font-size: 12px; letter-spacing:.12em; color: var(--ink-soft); }
.ex-brand { font-family: var(--logo-guj); font-size: 26px; }

.ex-scan {
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
  color: var(--turmeric); display:flex; align-items:center; gap:8px; margin: 8px 0 20px;
}
.ex-scan::before { content:""; width:10px; height:10px; border:2px solid var(--turmeric); border-radius:2px; }

/* ---------- The device ---------- */
.device {
  border-radius: 26px; padding: 20px 18px 24px;
  background:
    linear-gradient(160deg, #2a2b2e, #17181a 55%, #202224);
  box-shadow:
    0 30px 60px rgba(20,18,14,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -3px 8px rgba(0,0,0,.5);
  border: 1px solid #0c0c0d;
  position: relative; color: #e9e3d6;
}
.device::before { /* brushed sheen */
  content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.10), transparent 40%);
}
.device__screws { position:absolute; inset:12px; pointer-events:none; }
.device__screws span { position:absolute; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #6a6b6e, #262728); box-shadow: inset 0 0 2px #000; }
.device__screws span:nth-child(1){ left:0; top:0 } .device__screws span:nth-child(2){ right:0; top:0 }
.device__screws span:nth-child(3){ left:0; bottom:0 } .device__screws span:nth-child(4){ right:0; bottom:0 }

/* paper label glued on the gadget */
.label {
  background: var(--paper); color: var(--ink); border-radius: 6px;
  padding: 14px 16px; position: relative; box-shadow: var(--shadow-md);
  transform: rotate(-.6deg); border: 1px solid rgba(0,0,0,.15); margin-bottom: 18px;
}
.label::after { content:""; position:absolute; top:-8px; left: 24px; width: 54px; height: 16px;
  background: rgba(200,120,30,.30); border:1px dashed rgba(200,120,30,.55); transform: rotate(-4deg); }
.label__kick { font-family: var(--mono); font-size: 10px; letter-spacing:.22em; text-transform: uppercase; color: var(--turmeric); }
.label__title { font-family: var(--serif-display); font-size: 21px; line-height:1.1; margin-top: 2px; }
.label__guj { font-family: var(--logo-guj); font-size: 15px; color: var(--ink-soft); }

/* ---------- Media stage ---------- */
.stage {
  border-radius: 14px; overflow: hidden; background: #000; position: relative;
  box-shadow: inset 0 0 0 3px #0a0a0b, inset 0 0 24px rgba(0,0,0,.8);
  aspect-ratio: 1 / 1; display:grid; place-items:center;
}
.stage video, .stage img { width:100%; height:100%; object-fit: cover; display:block; }
.stage__art {
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background: radial-gradient(120% 100% at 50% 0%, #34423f, #14161a);
}
.stage__art .disc {
  width: 150px; height:150px; border-radius:50%;
  background: repeating-radial-gradient(circle, #1a1c1f 0 3px, #232629 3px 6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 8px #101113;
  display:grid; place-items:center; position:relative;
  animation: spin 6s linear infinite paused;
}
.stage__art.spinning .disc { animation-play-state: running; }
.stage__art .disc::after { content:""; width: 34px; height:34px; border-radius:50%; background: var(--turmeric); box-shadow: inset 0 0 0 6px #14161a; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage__badge { position:absolute; left:12px; top:12px; font-family: var(--mono); font-size:10px; letter-spacing:.15em;
  background: rgba(0,0,0,.5); color:#e9e3d6; padding:4px 8px; border-radius:3px; border:1px solid rgba(255,255,255,.2); }

/* ---------- Transport ---------- */
.transport { margin-top: 18px; }
.track-title { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom: 10px; }
.track-title .t { font-family: var(--serif-display); font-size: 17px; color:#f1ebde; }
.track-title .time { font-family: var(--mono); font-size: 12px; color: #b7b1a4; }

.scrub { position: relative; height: 8px; border-radius: 99px; background: #0b0c0d; box-shadow: inset 0 1px 2px #000; cursor: pointer; }
.scrub__fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background: linear-gradient(90deg, var(--turmeric), #e0a24e); }
.scrub__knob { position:absolute; top:50%; width:16px; height:16px; margin-left:-8px; transform: translateY(-50%); border-radius:50%; background:#f1ebde; box-shadow: 0 2px 6px rgba(0,0,0,.6); }

.controls { display:flex; align-items:center; justify-content:center; gap: 22px; margin-top: 18px; }
.ctl { width: 48px; height:48px; border-radius:50%; border:1px solid #050506; display:grid; place-items:center;
  background: linear-gradient(160deg, #34363a, #202225); color:#e9e3d6; font-size: 16px;
  box-shadow: 0 6px 0 #0c0c0d, inset 0 1px 0 rgba(255,255,255,.12); transition: transform .1s var(--ease-mech), box-shadow .1s; }
.ctl:hover { transform: translateY(1px); box-shadow: 0 5px 0 #0c0c0d, inset 0 1px 0 rgba(255,255,255,.12); }
.ctl:active { transform: translateY(6px); box-shadow: 0 0 0 #0c0c0d, inset 0 1px 0 rgba(255,255,255,.12); }
.ctl--play { width: 74px; height:74px; font-size: 26px; background: linear-gradient(160deg, #c8781e, #9b5c14); color:#1c1c1c;
  box-shadow: 0 8px 0 #5c360b, inset 0 1px 0 rgba(255,255,255,.3); }
.ctl--play:active { box-shadow: 0 0 0 #5c360b, inset 0 1px 0 rgba(255,255,255,.3); }

.toggle-media { display:flex; gap:8px; justify-content:center; margin-top: 18px; }
.toggle-media button { font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  background: transparent; border:1px solid rgba(255,255,255,.28); color:#cfc9bc; padding:8px 12px; border-radius: 99px; }
.toggle-media button.active { background:#e9e3d6; color:#1c1c1c; border-color:#e9e3d6; }

.meta-strip { display:flex; gap:14px; justify-content:center; margin-top:16px; font-family: var(--mono); font-size: 11px; color:#9d988c; letter-spacing:.06em; }

/* ---------- Reflection box ---------- */
.reflection {
  margin-top: 26px; background: var(--paper); border:1px solid var(--line-strong); border-radius: 10px;
  padding: 18px; box-shadow: var(--shadow-md); position: relative;
}
.reflection h3 { font-family: var(--serif-display); font-size: 20px; margin-bottom: 4px; }
.reflection p.sub { font-family: var(--mono); font-size: 11px; letter-spacing:.06em; color: var(--ink-soft); margin-bottom: 12px; }
.reflection textarea { width:100%; min-height: 96px; resize: vertical; border:1px solid var(--line-strong);
  border-radius: 6px; background: #fffdf7; padding: 12px 14px; font-family: var(--serif-body); font-size: 15px; color: var(--ink);
  background-image: repeating-linear-gradient(transparent, transparent 27px, var(--line) 27px, var(--line) 28px); line-height: 28px; }
.reflection__row { display:flex; gap:10px; align-items:center; margin-top: 12px; }
.reflection__row input { flex:1; border:1px solid var(--line-strong); border-radius:6px; padding:10px 12px; font-family: var(--mono); font-size:12px; background:#fffdf7; }
.reflection .btn { width:auto; }
.reflection__saved { margin-top: 14px; }
.note {
  background:#fffdf7; border:1px dotted var(--line-strong); border-radius:6px; padding:10px 12px; margin-top:10px;
  font-size: 14px; color: var(--ink-soft); position: relative;
}
.note .who { font-family: var(--mono); font-size: 10px; letter-spacing:.08em; color: var(--ink); margin-bottom: 4px; }

.ex-foot { text-align:center; margin-top: 30px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing:.06em; }
.ex-foot a { color: var(--turmeric); }

/* hide native audio; we drive our own transport */
.native-audio, .native-video-src { display:none; }

@media (min-width: 620px) {
  .device { padding: 26px 24px 30px; }
}