/* ==========================================================================
   The disks — translucent coloured plastic (img: diquete-color-transaprent):
   a frosted body you can see the magnetic disc through, a brushed-metal
   shutter with a small sticker, write-protect holes, and a printed cover
   pasted on the lower half in the style of the mockups (img: disquete-cover).
   Every size is in container units of the disk, so it scales anywhere.
   ========================================================================== */

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.disk {
  --plastic: #6f746a;
  position: relative; display: block;
  aspect-ratio: 1 / 1.03;
  container-type: inline-size;
  border-radius: 2.2cqi;
  clip-path: polygon(0 0, 93% 0, 100% 6.5%, 100% 100%, 0 100%);
  background:
    var(--grain),
    linear-gradient(160deg, rgb(255 255 255 / .28), transparent 40%, rgb(0 0 0 / .12)),
    color-mix(in srgb, var(--plastic) 82%, transparent);
  background-blend-mode: overlay, normal, normal;
  box-shadow: inset 0 0 0 .5cqi rgb(255 255 255 / .18), inset 0 -1cqi 2cqi rgb(0 0 0 / .18);
  filter: drop-shadow(0 .6rem .7rem rgb(0 0 0 / .3));
}
/* plastics: the colours of the stripe */
.disk--sand    { --plastic: #e9d3a6; }
.disk--crimson { --plastic: #c8172a; }
.disk--red     { --plastic: #e2373a; }
.disk--orange  { --plastic: #f5832a; }
.disk--apricot { --plastic: #f9b874; }
.disk--mist    { --plastic: #93bcc0; }
.disk--teal    { --plastic: #4a9db1; }
.disk--steel   { --plastic: #3c7898; }
.disk--blue    { --plastic: #29557c; }

/* the magnetic disc, seen through the plastic */
.disk__media {
  position: absolute; left: 6%; top: 15%; width: 88%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 21%, rgb(0 0 0 / .28) 21.5% 25%, rgb(255 255 255 / .12) 25.5% 26.5%, transparent 27%),
    color-mix(in srgb, var(--plastic) 45%, #2a1f12);
  opacity: .55;
  box-shadow: 0 0 0 .4cqi rgb(0 0 0 / .12);
}

.disk__arrow { position: absolute; left: 5%; top: 6%; width: 0; height: 0; border: 1.6cqi solid transparent; border-bottom: 2.6cqi solid rgb(0 0 0 / .35); border-top: 0; }
.disk__hd { position: absolute; right: 7%; top: 9%; font: 800 5.5cqi/1 var(--sans); color: rgb(0 0 0 / .28); letter-spacing: -.02em; }
.disk__hole { position: absolute; bottom: 4%; width: 4.5cqi; height: 4.5cqi; background: rgb(20 20 16 / .75); border-radius: .4cqi; }
.disk__hole--l { left: 4.5%; }
.disk__hole--r { right: 4.5%; }

/* the shutter: brushed metal with a window and a small sticker */
.disk__shutter {
  position: absolute; top: 0; left: 20%; width: 58%; height: 34%;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 .4cqi, transparent .4cqi 1.2cqi),
    linear-gradient(100deg, #e1e3db, #a9ada2 42%, #d4d6cd 58%, #a3a79b);
  border-radius: 0 0 1cqi 1cqi;
  box-shadow: inset 0 -.4cqi 0 rgb(0 0 0 / .15), 0 .3cqi .6cqi rgb(0 0 0 / .25);
}
.disk__window {
  position: absolute; top: 12%; left: 64%; width: 17%; height: 74%;
  background: color-mix(in srgb, var(--plastic) 55%, #11130e);
  border-radius: .5cqi;
  box-shadow: inset 0 .4cqi .6cqi rgb(0 0 0 / .5);
}
.disk__sticker {
  position: absolute; top: 14%; left: 7%; width: 50%;
  display: grid; gap: 1cqi;
  padding: 1.6cqi 2cqi;
  background: #fdf1d2; color: #0d3249;
  border-radius: .5cqi;
  font: 700 2.9cqi/1.15 var(--sans);
  box-shadow: 0 .2cqi .3cqi rgb(0 0 0 / .2);
}
.disk__sticker b { justify-self: start; padding: .4cqi 1.2cqi; background: #0d3249; color: #fdf1d2; font: 800 2.6cqi/1 var(--sans); letter-spacing: .1em; }

/* ---------- the printed covers ---------- */

.cover {
  position: absolute; left: 9%; right: 9%; top: 41%; bottom: 3%;
  display: flex; flex-direction: column; gap: 1.6cqi;
  padding: 3cqi;
  overflow: hidden;
  background: #fdf1d2; color: #0d3249;
  border-radius: 1.2cqi 1.2cqi .6cqi .6cqi;
  box-shadow: 0 .2cqi .4cqi rgb(0 0 0 / .3), inset 0 0 0 .3cqi rgb(255 255 255 / .35);
  font: 600 2.6cqi/1.15 var(--sans);
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left;
}
.cover .cv-title { font: 900 12cqi/.86 var(--sans); font-stretch: 62%; letter-spacing: -.01em; }
.cover .cv-small { font-size: 2.4cqi; letter-spacing: .06em; }
.cover .cv-num { font: 600 7cqi/1 var(--tech); }
.cover .cv-bars { width: 18cqi; height: 5cqi; color: currentColor; flex: none; }

/* R-284: big code, "since", vertical name, colour stripes */
.cover--r284 { gap: 1.2cqi; padding-right: 8cqi; }
.cover--r284 .cv-title { font: 600 11cqi/1 var(--tech); letter-spacing: -.03em; }
.cover--r284 .cv-sub { font-weight: 800; font-size: 3.2cqi; line-height: 1.1; }
.cover--r284 .cv-vert { position: absolute; right: 2.5cqw; top: 3cqw; bottom: 12cqw; overflow: hidden; white-space: nowrap; writing-mode: vertical-rl; font-weight: 800; font-size: 3.4cqw; letter-spacing: .08em; padding-left: 1.5cqw; border-left: .3cqw solid currentColor; }
.cover--r284 .cv-bars { margin-top: auto; }
.cover--r284 .cv-stripes { margin: 0 -8cqi -3cqi -3cqi; height: 9cqi; flex: none; background: linear-gradient(#f9b874 0 25%, #f5832a 25% 50%, #e2373a 50% 75%, #c8172a 75%); }

/* ORION: meta row, black band, gradient stripes, footer */
.cover--orion { gap: 1.4cqi; }
.cover--orion .cv-meta { display: flex; justify-content: space-between; font-size: 2.1cqi; }
.cover--orion .cv-band { margin-inline: -3cqi; padding: 1.6cqi 3cqi 1cqi; background: #0d3249; color: #fdf1d2; }
.cover--orion .cv-title { font-size: 13cqi; letter-spacing: .04em; }
.cover--orion .cv-stripes { flex: 1; min-height: 5cqi; background: repeating-linear-gradient(180deg, transparent 0 1.1cqi, #fdf1d2 1.1cqi 1.9cqi), linear-gradient(90deg, #c8172a, #f5832a 30%, #f9b874 45%, #93bcc0 60%, #3c7898 80%, #0d3249); }
.cover--orion .cv-foot { display: flex; align-items: center; gap: 2cqi; }
.cover--orion .cv-foot .cv-num { padding: .6cqi 1.2cqi; border: .4cqi solid currentColor; font-size: 4cqi; }
.cover--orion .cv-foot .cv-small { flex: 1; }

/* PSICHIC: holographic foil */
.cover--psichic {
  background: linear-gradient(115deg, #f9b874, #f5e3c3 35%, #93bcc0 65%, #4a9db1);
  align-items: center; justify-content: center; text-align: center; padding-inline: 6cqi;
}
/* long words shrink to fit the width (--chars: the longest word of the name) */
.cover--psichic .cv-title { font-size: min(16cqi, calc(140cqi / var(--chars, 4))); }
.cover--psichic .cv-top { position: absolute; top: 2.6cqi; left: 0; right: 0; }
.cover--psichic .cv-side { position: absolute; top: 50%; writing-mode: vertical-rl; font-size: 2.2cqw; font-weight: 800; transform: translateY(-50%); }
.cover--psichic .cv-side--l { left: 1.6cqi; transform: translateY(-50%) rotate(180deg); }
.cover--psichic .cv-side--r { right: 1.6cqi; }
.cover--psichic .cv-pill { position: absolute; right: 3cqi; bottom: 2.4cqi; padding: .4cqi 1.4cqi; border: .35cqi solid currentColor; border-radius: 3cqi; font-size: 2.2cqi; font-weight: 800; }

/* MIXTAPE: halftone block, title, vertical tag */
.cover--mixtape { gap: 1.4cqi; padding-right: 7cqi; }
.cover--mixtape .cv-art {
  flex: 1; min-height: 12cqi; margin: -3cqi -7cqi 0 -3cqi;
  background: radial-gradient(circle, #0d3249 32%, transparent 34%) 0 0 / 2.2cqi 2.2cqi, linear-gradient(120deg, #4a9db1, #29557c);
}
.cover--mixtape .cv-title { font-size: 9.5cqi; padding-right: 2cqi; }
.cover--mixtape .cv-vert { position: absolute; right: 1.4cqw; bottom: 3cqw; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; font-size: 2.4cqw; padding: 1cqw .5cqw; max-height: 80%; overflow: hidden; background: #0d3249; color: #fdf1d2; }

/* SHAKE: blue, loud and repeated */
.cover--shake { background: #29557c; color: #f9b874; align-items: center; justify-content: center; text-align: center; gap: 1cqi; }
.cover--shake .cv-title { font-size: 12.5cqi; color: #f9b874; }
.cover--shake .cv-rep { font-size: 2.4cqi; font-weight: 800; letter-spacing: .1em; color: #93bcc0; white-space: nowrap; }
.cover--shake .cv-corner { position: absolute; top: 2cqi; left: 2.4cqi; padding: .3cqi 1.2cqi; border: .35cqi solid #f9b874; border-radius: 3cqi; font-size: 2cqi; font-weight: 800; }
.cover--shake .cv-corner--r { left: auto; right: 2.4cqi; }

/* TRACKLIST: a sunset picture with a silhouette, number box, lines */
.cover--tracklist { background: color-mix(in srgb, var(--plastic) 70%, #0d3249); color: #fdf1d2; gap: 1.2cqi; }
.cover--tracklist .cv-art {
  position: relative; flex: 1; min-height: 14cqi;
  margin: -1cqi -1cqi 0;
  background: linear-gradient(180deg, #f9b874, #f5832a 45%, #c8172a);
  border-radius: .6cqi;
  display: grid; place-items: end center;
  overflow: hidden;
}
.cover--tracklist .cv-art svg { width: 46%; height: auto; color: #0d3249; margin-bottom: -4%; }
.cover--tracklist .cv-num { position: absolute; left: 3cqi; bottom: 3cqi; padding: .8cqi 1.4cqi; background: #fdf1d2; color: #0d3249; font-size: 6cqi; }
.cover--tracklist .cv-title { padding-left: 14cqi; font-size: 8.5cqi; }
.cover--tracklist .cv-lines { padding-left: 14cqi; font-size: 2.1cqi; line-height: 1.3; font-weight: 700; opacity: .85; }

/* RADICAL: diagonal split */
.cover--radical { background: linear-gradient(155deg, #0d3249 0 54%, #fdf1d2 54.2% 100%); color: #fdf1d2; gap: 1cqi; }
.cover--radical .cv-title { font-size: 11cqi; }
.cover--radical .cv-tag { align-self: flex-start; padding: .4cqi 1.2cqi; background: #4a9db1; color: #0d3249; font-weight: 900; font-size: 2.4cqi; }
.cover--radical .cv-num { margin-top: auto; align-self: flex-end; color: #0d3249; font-size: 9cqi; }
.cover--radical .cv-small { align-self: flex-end; text-align: right; color: #0d3249; font-weight: 800; }

/* BONESTORM: slanted title, coloured footer */
.cover--bonestorm { align-items: center; justify-content: center; text-align: center; gap: 1cqi; padding-bottom: 9cqi; }
.cover--bonestorm .cv-top { color: #29557c; font-weight: 800; }
.cover--bonestorm .cv-title { font-size: 12cqi; color: #29557c; font-style: oblique 12deg; transform: rotate(-4deg); }
.cover--bonestorm .cv-sub { font-weight: 800; color: #29557c; font-size: 3cqi; }
.cover--bonestorm .cv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6cqi; background: #c8172a; color: #fdf1d2; font-weight: 900; letter-spacing: .2em; font-size: 2.6cqi; }

/* ATLAS: globe lines behind a two-line title */
.cover--atlas { justify-content: flex-end; gap: 1.2cqi; }
.cover--atlas .cv-globe {
  position: absolute; right: -14cqi; top: -10cqi; width: 50cqi; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 3.6cqi, rgb(13 50 73 / .35) 3.6cqi 3.9cqi),
    repeating-linear-gradient(90deg, transparent 0 5.6cqi, rgb(13 50 73 / .35) 5.6cqi 5.9cqi);
  box-shadow: inset 0 0 0 .5cqi #0d3249;
}
.cover--atlas .cv-title { position: relative; font-size: 10.5cqi; max-width: 70%; }
.cover--atlas .cv-num { position: absolute; left: 3cqi; top: 3cqi; font-size: 5cqi; color: #c8172a; }