/* ==========================================================================================
   STIKLET · "the album" look: the mood's colour runs down the page, sleeves have a real
   printed back, genre tiles hold a record, install steps are record labels. See DESIGN.md.
   ========================================================================================== */

/* the mood runs down the page: every section opens in a whisper of its colour */
#site main>section:not(.cr){background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 26%,transparent),transparent 520px)}
#site footer{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--deep) 30%,transparent))}

/* ---------- hero: slower, and real objects ---------- */
/* the vinyl: grooves, a printed label, and a sheen that stays put while the record turns */
#site .dh-disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent 0,rgba(255,255,255,.13) 7%,transparent 15%,transparent 50%,rgba(255,255,255,.1) 57%,transparent 65%);}
/* the sleeve front: printed card, worn corners, a spine, the faint ring of the record inside */
#site .dh-front::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%,transparent 40.5%,rgba(255,255,255,.06) 41.5%,rgba(255,255,255,.06) 43.5%,transparent 44.5%),
    linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0) 4.5%,rgba(255,255,255,.05) 5.2%,transparent 9%),
    radial-gradient(120% 120% at 0 0,rgba(255,255,255,.14),transparent 30%),radial-gradient(90% 90% at 100% 100%,rgba(0,0,0,.28),transparent 45%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 24px rgba(0,0,0,.22)}

/* ---------- the back of the sleeve: a real LP back, printed in the mood's ink on cream card ---------- */
#site .dh-back.bc{background:#EEE5D3;color:var(--ink);padding:0;gap:0;display:block;cursor:auto;
  box-shadow:inset 0 0 0 1px rgba(60,40,20,.12),inset 0 0 40px rgba(90,60,30,.18),0 50px 120px rgba(0,0,0,.5)}
#site .dh-back.bc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#site .dh-back.bc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 52%,transparent 41%,rgba(70,50,30,.07) 42%,rgba(70,50,30,.05) 44%,transparent 45.5%),
    radial-gradient(140% 140% at 100% 0,transparent 55%,rgba(70,50,30,.16)),linear-gradient(90deg,rgba(70,50,30,.14),transparent 3.5%)}
#site .bc-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:calc(var(--s) * .065) calc(var(--s) * .07) calc(var(--s) * .055)}
#site .bc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:calc(var(--s) * .02);border-bottom:2px solid var(--ink);
  font-size:max(9px,calc(var(--s) * .019));font-weight:800;letter-spacing:.2em;text-transform:uppercase}
#site .bc-brand{display:flex;align-items:center;gap:8px;font-family:var(--display);letter-spacing:.12em}
#site .bc-brand .bc-logo{width:max(18px,calc(var(--s) * .045));height:auto;border-radius:22%}
#site .bc-title{margin:calc(var(--s) * .026) 0 0;font-family:var(--display);font-weight:700;font-size:calc(var(--s) * .105);line-height:.92;letter-spacing:-.05em;color:var(--ink)}
#site .bc-title em{font-style:normal;color:var(--acc)}
#site .bc-sub{margin:calc(var(--s) * .012) 0 0;font-size:max(9.5px,calc(var(--s) * .021));font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
#site .bc-sides{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--s) * .045);margin-top:calc(var(--s) * .035)}
#site .bc-side h4{margin:0 0 calc(var(--s) * .008);font-family:var(--display);font-weight:700;font-size:max(9px,calc(var(--s) * .019));letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
#site .bc-side ol{list-style:none;margin:0;padding:0}
#site .bc-side a{display:flex;align-items:baseline;gap:6px;padding:1px 0;color:var(--ink);text-decoration:none;font-size:max(10px,calc(var(--s) * .024));line-height:1.5;font-weight:700;border-radius:3px}
#site .bc-side a:hover .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--acc)}
#site .bc-side a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#site .bc-side .n{width:1.3em;flex-shrink:0;opacity:.55;font-variant-numeric:tabular-nums}
#site .bc-side .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#site .bc-notes{margin:calc(var(--s) * .03) 0 0;font-size:max(10px,calc(var(--s) * .0215));line-height:1.5;font-weight:500;font-style:italic;opacity:.82;text-wrap:pretty}
#site .bc-foot{margin-top:auto;display:flex;align-items:flex-end;gap:calc(var(--s) * .025);padding-top:calc(var(--s) * .02);border-top:1px solid color-mix(in srgb,var(--ink) 35%,transparent)}
#site .bc-stereo{flex-shrink:0;padding:3px 7px 2px;border:2px solid var(--ink);border-radius:4px;font-family:var(--display);font-weight:700;font-size:max(8px,calc(var(--s) * .017));letter-spacing:.18em}
#site .bc-rpm{flex-shrink:0;font-family:var(--display);font-weight:700;font-size:max(12px,calc(var(--s) * .03));line-height:.9}
#site .bc-rpm small{display:block;font-family:var(--body);font-size:max(7px,calc(var(--s) * .014));letter-spacing:.2em;font-weight:800}
#site .bc-cred{flex:1;min-width:0;font-size:max(7.5px,calc(var(--s) * .0155));line-height:1.4;font-weight:600;opacity:.7}
#site .bc-bar{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 6px 3px;background:#fff;border-radius:2px}
#site .bc-bar span{display:flex;gap:1px;height:max(18px,calc(var(--s) * .05))}
#site .bc-bar i{display:block;background:#111;height:100%}
#site .bc-bar small{font-size:max(6.5px,calc(var(--s) * .013));font-weight:700;letter-spacing:.12em;color:#111}
#site .bc .dh-back-btn{position:absolute;right:calc(var(--s) * .05);top:calc(var(--s) * .045);z-index:2;width:34px;height:34px;border-radius:17px;background:var(--ink);color:#EEE5D3;font-size:16px}
#site .bc .dh-back-btn:hover{background:var(--acc);color:var(--ink)}
#site .bc .bc-top{padding-right:44px}
#site .dh-zoomed{container-type:size}
@container (max-width:420px){#site .bc-notes,#site .bc-cred{display:none}#site .bc-side a{line-height:1.38}#site .bc .dh-back-btn{width:30px;height:30px;font-size:14px;top:calc(var(--s) * .05)}#site .bc .bc-top{padding-right:38px}}

/* ---------- records in a crate: a vinyl peeks out of each genre tile ---------- */
#site .gt-disc{position:absolute;right:-16px;bottom:-16px;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle,var(--lc) 0 17%,#0B0710 17.5% 19%,#16101f 19.5% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 20px rgba(0,0,0,.35);transform:translate(-14%,-9%) rotate(0deg);transition:transform .9s cubic-bezier(.2,.9,.25,1)}
#site .gt-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);mask:radial-gradient(circle,transparent 21%,#000 22%)}
#site .gt:hover .gt-disc,#site .gt:focus-visible .gt-disc{transform:translate(-50%,-34%) rotate(220deg)}
@media (min-width:1061px){#site .gt-disc{width:128px;height:128px;right:-22px;bottom:-22px}}
@media (max-width:640px){#site .gt-disc{width:74px;height:74px}}

/* ---------- install: the step numbers are little record labels ---------- */
#site .steps li::before{width:54px;height:54px;border-radius:50%;font-size:17px;
  background:radial-gradient(circle,#0D0915 0 6%,var(--lilac) 6.5% 44%,#0B0710 44.5% 47%,#18111f 47.5%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:var(--ink);transition:transform .9s cubic-bezier(.2,.9,.25,1)}
#site .steps li:nth-child(2)::before{background:radial-gradient(circle,#0D0915 0 6%,var(--coral) 6.5% 44%,#0B0710 44.5% 47%,#18111f 47.5%) !important}
#site .steps li:nth-child(3)::before{background:radial-gradient(circle,#0D0915 0 6%,var(--mint) 6.5% 44%,#0B0710 44.5% 47%,#18111f 47.5%) !important}
#site .steps li:hover::before{transform:rotate(360deg)}

@media (prefers-reduced-motion:reduce){#site{transition:none}#site .gt-disc,#site .steps li::before{transition:none}}

/* ---------- slower, calmer turn-over (see dialFlip): lift, travel, then turn ---------- */
#site .dh-zoomed .dh-flip{transition:transform 1.05s cubic-bezier(.5,0,.2,1)}
#site .dh-zoomed.flipped .dh-flip{transition-delay:.5s}
#site .dh-zoom::before{transition:opacity .6s ease}
#site .dh-zoom.open::before{transition-duration:.8s}
#site .dh-zcap{transition-delay:1.2s}

/* the whole page is printed in the mood's colour, not just the hero */
#site{background:color-mix(in srgb,var(--deep) 24%,#0D0915);--card:color-mix(in srgb,var(--deep) 18%,#191226);--card2:color-mix(in srgb,var(--deep) 22%,#211834)}