/* r1otnoise.com — one face, one accent, nothing moves except the ring. */

@font-face{
  font-family:"Tag";
  src:url("assets/fonts/special-elite.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#0a0a0a;          /* not pure black. pure black is a startup black. */
  --ink:#d4d0c6;         /* typewriter ink on an evidence tag */
  --dim:#6e6a63;         /* faded stamp */
  --rule:#1e1e1e;
  --red:#b0101e;         /* the ring. used three times sitewide. */
  --fs:14px;
  --track:.06em;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{
  font:var(--fs)/1.7 "Tag","Courier New",Courier,monospace;
  letter-spacing:var(--track);
  text-transform:uppercase;
  min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;
}
/* paper: static grain, no animation */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .85 0 0 0 0 .83 0 0 0 0 .78 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
}
/* one crease across the bag */
body.home::after{
  content:"";position:fixed;left:-10vw;top:22vh;width:120vw;height:1px;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.045);transform:rotate(-31deg);transform-origin:left center;
}

.lc{text-transform:none}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--red);border-color:var(--red)}          /* red #1 */
a:focus{outline:0}
a:focus-visible{outline:1px solid var(--ink);outline-offset:3px;border-color:transparent}
img{display:block;max-width:100%;height:auto}
h1,h2{font-weight:400;font-size:var(--fs)}
h1{font-size:22px;line-height:1.3;margin:.2em 0 .4em}
ol,ul{list-style:none}

main{flex:1;width:100%}
.narrow{max-width:720px;margin:0 auto;padding:28px 20px 72px}
.label{color:var(--dim);font-size:12px}
.meta{color:var(--dim);font-size:12px;line-height:1.6}
.crumb{margin-bottom:40px;font-size:12px}
.crumb a{border:0}
.ex-head{margin-bottom:28px}

/* ---------- landing ---------- */
.screen1{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:20px}
.screen1 p{font-size:14px;line-height:1.9}

.cover-wrap{padding:0 20px 24px;display:flex;flex-direction:column;align-items:center}
.cover{position:relative;width:100%;max-width:720px}
.cover img{width:100%}
/* the ring is the button. coordinates measured off the 3000px master. */
.ring-hit{
  position:absolute;left:45.5%;top:45.5%;width:48%;height:48%;
  border-radius:50%;border:0;display:block;
}
.ring-hit:hover{outline:1px solid var(--red);outline-offset:-1px}   /* still red #1 — hover */
.ring-hit:focus-visible{outline:1px solid var(--ink)}
.hint{color:var(--dim);font-size:12px;margin-top:14px}

.contents{max-width:720px;margin:0 auto;padding:40px 20px 80px}
.files li a{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border:0;border-top:1px solid var(--rule);
}
.files li:last-child a{border-bottom:1px solid var(--rule)}
.files li a span:last-child{color:var(--dim);text-align:right;font-size:12px}
.files li a:hover span{color:var(--red)}

/* ---------- exhibits ---------- */
.small-cover{width:100%;max-width:360px;margin:8px 0 28px}
.streams{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;margin:-12px 0 28px}
.streams.track{margin:40px 0 0}
.streams .label{margin-right:6px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.tracks li a{display:flex;gap:16px;padding:9px 0;border:0;border-top:1px solid var(--rule)}
.tracks li:last-child a{border-bottom:1px solid var(--rule)}
.tracks .n{color:var(--dim);flex:0 0 2.2em}
.tracks.single{max-width:360px}

/* ---------- lyrics ---------- */
.lyric-page .ex-head{margin-bottom:44px}
.lyrics{text-transform:none;letter-spacing:.02em;font-size:15px;line-height:1.8;max-width:520px}
.lyrics p{margin-bottom:1.6em}
.lyrics p span{display:block;padding-left:1.1em;text-indent:-1.1em}
.sealed{color:var(--dim)}
.credit{color:var(--dim);font-size:12px;margin-bottom:2.4em!important}
.pn{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule)}
.pn a{border:0}
.isrc{color:#4a4740;font-size:10px;letter-spacing:.18em;margin-top:48px}

/* ---------- movements ---------- */
.empty{color:var(--dim);line-height:1.9;padding:32px 0 0;border-top:1px solid var(--rule)}
.shows li{display:grid;grid-template-columns:7em 1fr 1fr 6em;gap:14px;padding:12px 0;border-top:1px solid var(--rule);font-size:13px}
.shows li:last-child{border-bottom:1px solid var(--rule)}
.shows a{border:0}

/* ---------- items ---------- */
.items{display:grid;gap:56px}
.item{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.item{grid-template-columns:260px 1fr;align-items:start}}
.item-photo{border:0;display:block}
.item-photo.ph{aspect-ratio:1;background:#101010;display:grid;place-items:center;color:#33312c;font-size:11px}
.item-tag p{margin-bottom:8px}
.buy-row{margin-top:20px;display:flex;align-items:center;gap:18px}
.price{font-size:13px}
.buy{                                   /* red #2 — the only button */
  display:inline-block;border:1px solid var(--red);color:var(--red);
  padding:9px 18px;font-size:12px;
}
.buy:hover{background:var(--red);color:var(--bg)}
.buy.is-off{border-color:var(--rule);color:var(--dim);cursor:default}

/* ---------- persons ---------- */
.pols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px;max-width:560px}
@media(min-width:560px){.pols{grid-template-columns:repeat(3,1fr)}}
.pol{background:#e9e4d6;padding:10px 10px 30px;color:#2b2924;transform:rotate(var(--r,0deg));font-size:10px;position:relative}
.pol:nth-child(1){--r:-1.6deg}.pol:nth-child(2){--r:1.1deg}.pol:nth-child(3){--r:-.7deg}.pol:nth-child(4){--r:1.8deg}.pol:nth-child(5){--r:-1.2deg}
.also{color:#4e4a44;font-size:11px;line-height:2.1;margin-top:88px;max-width:560px;letter-spacing:.08em}
.also a{color:var(--dim);font-size:13px;border-bottom-color:var(--rule)}
.also a:hover{color:var(--red)}
.pol-photo{aspect-ratio:1;width:100%;background:#161616;object-fit:cover;display:block}
.stamp{position:absolute;left:10px;bottom:7px;margin:0;line-height:1;letter-spacing:.12em;color:rgba(43,41,36,.42)}

/* ---------- 404 ---------- */
.page-404{background:#7f8a98;color:#3b4451}
.page-404::before{display:none}
.nf{min-height:100dvh;display:grid;place-items:center;padding:20px}
.req{
  background:#f4f4ee;max-width:560px;width:100%;padding:28px 26px 30px;
  box-shadow:0 0 0 1px #c4c9d0,0 18px 40px rgba(0,0,0,.25);position:relative;
  text-transform:none;letter-spacing:.02em;
}
.req-h{text-transform:uppercase;font-size:18px;letter-spacing:.04em;margin-bottom:4px}
.req-h span{color:#7a8391}
.req .lc{font-size:13px;color:#4b5360;margin-top:10px}
.field{display:flex;align-items:center;gap:14px;margin-top:22px}
.field .box{flex:1;height:30px;border:1px solid #5c6572;background:#fff}
.ring{position:relative;width:64px;height:64px;margin:36px 0 0 auto;color:var(--red);font-size:11px}  /* red #3 */
.arc{stroke:var(--red)}
.ring svg{width:64px;height:64px;display:block}
.ring span{position:absolute;inset:0;display:grid;place-items:center}
/* the only animation on the site */
.ring svg{animation:stall 9s linear infinite}
@keyframes stall{
  0%{transform:rotate(0deg)}
  88%{transform:rotate(0deg)}
  92%{transform:rotate(6deg)}
  96%{transform:rotate(-3deg)}
  100%{transform:rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.ring svg{animation:none}}
.nf-home{position:fixed;left:20px;bottom:18px;margin:0}
.nf-home a{color:#3b4451;border:0}
.page-404 .foot{display:none}

/* ---------- custody ---------- */
.custody{display:grid;grid-template-columns:max-content 1fr;gap:14px 28px;font-size:13px;margin:0 0 36px;max-width:640px}
.custody dt{color:var(--dim);font-size:12px}
.custody dd{line-height:1.7;word-break:break-word}
.custody a{border-bottom-color:var(--dim)}
@media(max-width:560px){.custody{grid-template-columns:1fr;gap:4px}.custody dd{margin-bottom:14px}}

/* ---------- footer ---------- */
.foot{padding:28px 20px 36px;text-align:center;color:var(--dim);font-size:12px;line-height:1.8}
.foot .lc{color:#4a4741}
.foot a{border:0;color:inherit}

/* ---------- phones ---------- */
@media(max-width:560px){
  :root{--fs:15px}
  .sides{grid-template-columns:1fr;gap:18px}
  .files li a{flex-direction:column;gap:2px;padding:18px 0}
  .files li a span:last-child{text-align:left}
  .tracks li a{padding:13px 0}
  .shows li{grid-template-columns:1fr 1fr}
  .narrow{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .crumb a,.pn a,.streams a{display:inline-block;padding:8px 0}
  .streams{gap:22px}
  .lyrics{font-size:16px;line-height:1.75}
  .pols{gap:20px 14px}
  .buy{padding:13px 22px;font-size:13px}
  .foot{padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .req{padding:22px 18px 26px}
  .ring{width:56px;height:56px}.ring svg{width:56px;height:56px}
}
/* landing: the only hint. static. */
.screen1{position:relative}
.screen1::after{content:"\2193";position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:14px}
/* no sticky-hover on touch */
@media(hover:none){a:hover{color:var(--ink);border-color:var(--rule)}.files li a:hover span{color:inherit}.ring-hit:hover{outline:0}.buy:hover{background:transparent;color:var(--red)}}
a:active,.files li a:active span{color:var(--red)}