/*
Theme Name: Sunset Strip Radio
Theme URI: https://rezrocks.com
Author: Bob VanHeuvelen
Description: Custom theme for Sunset Strip Radio — glam, hair metal and sleaze rock. Flyer-poster aesthetic with a persistent Live365 player.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssr
*/

/* ============================================================
   TOKENS — every colour in the site comes from here.
   Change these six values and the whole site re-skins.
   ============================================================ */
:root{
  --paper:#efe6cf;
  --paper2:#e4d8b8;
  --ink:#1c1710;
  --ink2:#3a2f22;
  --red:#b0121d;
  --red2:#8a0d16;
  --topbar-h:60px;
}

*{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }
body{
  min-height:100%;
  background:radial-gradient(120% 90% at 50% 20%, #17110c 0%, #0a0705 70%, #050302 100%);
  background-attachment:fixed;
  font-family:'Oswald',sans-serif;
  color:var(--ink);
}
img{ max-width:100%; height:auto }
a{ color:var(--red) }

/* ============================================================
   TOP BAR — site chrome. Nav + player, on every page.
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--ink); border-bottom:3px solid var(--red);
  box-shadow:0 6px 24px rgba(0,0,0,.65);
}
.topbar-in{
  max-width:1060px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:16px; min-height:var(--topbar-h);
}

.brand{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:15px; color:var(--paper); text-decoration:none; white-space:nowrap;
}
.brand:hover{ color:var(--red) }
.brand svg{ width:16px; height:16px; fill:currentColor }

/* --- nav --- */
.nav{ flex:1 1 auto; min-width:0 }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; flex-wrap:wrap }
.nav li{ position:relative }
.nav a{
  display:block; padding:8px 12px; text-decoration:none;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:11.5px; color:#a89a72;
  border:2px solid transparent; border-radius:2px; transition:color .12s, border-color .12s;
}
.nav a:hover{ color:var(--paper); border-color:rgba(239,230,207,.34) }
.nav .current-menu-item > a,
.nav .current_page_item > a{ color:var(--paper); border-color:var(--red) }

/* dropdowns */
.nav ul ul{
  display:none; position:absolute; top:100%; left:0; z-index:120;
  background:var(--ink); border:2px solid var(--red); min-width:190px;
  flex-direction:column; gap:0; padding:4px;
}
.nav li:hover > ul{ display:flex }
.nav ul ul a{ border-color:transparent }

/* --- player in the bar --- */
.pbar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; margin-left:auto }
.listen-btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:2px solid var(--paper); background:var(--red); color:var(--paper);
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:14px; padding:8px 16px 8px 13px; border-radius:2px; transition:background .12s;
}
.listen-btn:hover{ background:var(--red2) }
.listen-btn:active{ transform:translateY(1px) }
.listen-btn svg{ width:17px; height:17px; fill:currentColor }
.listen-btn .ico-pause{ display:none }
body.playing .listen-btn .ico-play{ display:none }
body.playing .listen-btn .ico-pause{ display:block }
.listen-btn .lbl::after{ content:"Listen Live" }
body.playing .listen-btn .lbl::after{ content:"Stop" }

.pbar-now{
  font-family:'Special Elite',monospace; font-size:12px; color:#a89a72;
  max-width:230px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pbar-now b{ color:var(--paper) }

/* --- mobile nav toggle --- */
.navtoggle{
  display:none; cursor:pointer; background:transparent; border:2px solid rgba(239,230,207,.34);
  color:var(--paper); border-radius:2px; padding:7px 10px; margin-left:auto;
}
.navtoggle svg{ width:18px; height:18px; fill:currentColor; display:block }

@media (max-width:900px){
  .pbar-now{ display:none }
}
@media (max-width:780px){
  .topbar-in{ flex-wrap:wrap; padding:10px 14px }
  .navtoggle{ display:block }
  .pbar{ margin-left:0; order:3 }
  .nav{ order:4; flex-basis:100%; display:none }
  .nav.open{ display:block }
  .nav ul{ flex-direction:column; gap:0; padding-bottom:8px }
  .nav ul ul{ position:static; display:flex; border:none; border-left:2px solid var(--red);
              margin-left:12px; padding:0 }
}

/* ============================================================
   FLYER — the front page hero
   ============================================================ */
.flyer-wrap{ display:grid; place-items:center; padding:30px 14px 50px }
.flyer{
  position:relative; width:min(660px,94vw);
  background:linear-gradient(160deg,var(--paper),var(--paper2));
  padding:clamp(26px,5vw,46px) clamp(20px,5vw,44px) clamp(22px,4vw,36px);
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink),
             0 30px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.16);
  transform:rotate(-1deg);
}
.flyer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.flyer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 12% 8%, rgba(90,60,20,.16), transparent 60%),
             radial-gradient(50% 40% at 92% 88%, rgba(90,60,20,.18), transparent 60%);
}
.flyer .inner{
  position:relative; z-index:2; border:1px solid var(--ink);
  padding:clamp(18px,4vw,30px) clamp(14px,4vw,26px); text-align:center;
}
.tape{ position:absolute; width:96px; height:26px; background:rgba(214,198,150,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.3); z-index:5 }
.tape.tl{ top:-12px; left:-18px; transform:rotate(-38deg) }
.tape.tr{ top:-12px; right:-18px; transform:rotate(38deg) }
.tape.bl{ bottom:-12px; left:-18px; transform:rotate(40deg) }
.tape.br{ bottom:-12px; right:-18px; transform:rotate(-40deg) }

.rule{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:var(--ink2) }
.rule.star{ display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 }
.rule.star::before,.rule.star::after{ content:""; height:2px; flex:1; max-width:70px; background:var(--ink) }
.present{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(12px,2.4vw,15px); font-weight:600; margin-top:8px }
.venue{ font-family:'Rye',serif; font-size:clamp(26px,6.5vw,46px); line-height:1;
  color:var(--ink); margin:4px 0 2px; text-shadow:1px 1px 0 rgba(0,0,0,.12) }
.dash{ font-family:'Oswald',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  font-size:12px; color:var(--ink2); margin-bottom:6px }
.headliner{ font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(46px,13vw,104px); line-height:.84; letter-spacing:.005em;
  margin:6px 0; color:var(--ink); text-shadow:2px 2px 0 rgba(176,18,29,.18) }
.genres{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:clamp(12px,2.7vw,17px); color:var(--ink) }
.era{ font-family:'Rye',serif; font-size:clamp(15px,3.4vw,22px); color:var(--red); margin:4px 0 2px }

.stage{ margin-top:18px; padding-top:16px; border-top:1px solid var(--ink) }

/* --- Now Playing cover art (polaroid style) --- */
.cover-wrap{ display:flex; justify-content:center; margin-bottom:16px }
.cover-frame{
  display:inline-block; background:#faf7ee;
  padding:5px 5px 20px 5px;
  box-shadow:0 0 0 1px var(--ink), 2px 4px 10px rgba(0,0,0,.55);
  transform:rotate(-3deg);
}
.cover-art{
  display:block; width:56px; height:56px; object-fit:cover;
  background:var(--paper2);
}

.onair{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.2em;
  font-size:12px; color:var(--ink2); display:flex; align-items:center; justify-content:center;
  gap:8px; margin-bottom:12px; min-height:16px }
.onair .dot{ width:9px; height:9px; border-radius:50%; background:#9a9082 }
body.playing .onair .dot{ background:var(--red); box-shadow:0 0 8px var(--red); animation:blink 1.4s infinite }
.onair .txt::after{ content:"Tune In" }
body.playing .onair .txt::after{ content:"On Air — Live Now" }

.listen-big{ display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(18px,4vw,26px); padding:14px 32px 14px 26px; border-radius:2px;
  box-shadow:4px 4px 0 rgba(28,23,16,.35); transition:transform .06s }
.listen-big:hover{ background:var(--red); border-color:var(--red) }
.listen-big:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(28,23,16,.35) }
.listen-big svg{ width:22px; height:22px; fill:var(--paper) }
.listen-big .ico-pause{ display:none }
body.playing .listen-big .ico-play{ display:none }
body.playing .listen-big .ico-pause{ display:block }
.listen-big .lbl::after{ content:"Listen Live" }
body.playing .listen-big .lbl::after{ content:"Stop" }

.now{ font-family:'Special Elite',monospace; font-size:14px; color:var(--ink2);
  margin-top:14px; min-height:18px }
.now b{ color:var(--ink) }
.deets{ font-family:'Special Elite',monospace; font-size:clamp(12px,2.5vw,14px);
  color:var(--ink2); line-height:1.7; margin-top:18px }
.foot{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:clamp(13px,2.8vw,16px); margin-top:16px; color:var(--ink) }

@keyframes blink{ 50%{ opacity:.3 } }
@media (max-width:480px){ .flyer{ transform:none } .tape{ display:none } }

/* --- Last Spun --- */
.setlist{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--ink); text-align:left }
.setlist h3{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(15px,3.6vw,20px); color:var(--red); text-align:center; margin:0 0 2px }
.setlist .sub{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:10px; color:var(--ink2); text-align:center; margin:0 0 12px }
.setlist ol{ list-style:none; margin:0; padding:0; counter-reset:spin }
.setlist li{ counter-increment:spin; display:flex; gap:10px; align-items:baseline;
  font-family:'Special Elite',monospace; font-size:clamp(12px,2.6vw,14px); color:var(--ink);
  padding:5px 0; border-bottom:1px dotted rgba(28,23,16,.28) }
.setlist li:last-child{ border-bottom:0 }
.setlist li::before{ content:counter(spin,decimal-leading-zero); color:var(--red);
  font-weight:700; flex:0 0 26px }
.setlist li .s-artist{ font-weight:700; color:var(--ink) }
.setlist li .s-title{ color:var(--ink2) }
.setlist .empty{ font-family:'Special Elite',monospace; font-size:13px; color:var(--ink2);
  text-align:center; padding:8px 0; margin:0 }

/* --- About the Station --- */
.about{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--ink); text-align:left }
.about h3{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(15px,3.6vw,20px); color:var(--red); text-align:center; margin:0 0 2px }
.about .sub{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:10px; color:var(--ink2); text-align:center; margin:0 0 14px }
.about-copy{ font-family:'Oswald',sans-serif; font-weight:400; font-size:clamp(13px,2.6vw,15px);
  line-height:1.75; color:var(--ink2); text-align:center }

/* --- Contact --- */
.contact{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--ink); text-align:left }
.contact h3{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(15px,3.6vw,20px); color:var(--red); text-align:center; margin:0 0 2px }
.contact .sub{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:10px; color:var(--ink2); text-align:center; margin:0 0 16px }

.cnotice{ font-family:'Special Elite',monospace; font-size:13px; text-align:center;
  padding:10px 14px; margin:0 0 16px; border:2px solid var(--ink) }
.cnotice-ok{ background:rgba(28,23,16,.06); color:var(--ink) }
.cnotice-err{ background:rgba(176,18,29,.1); color:var(--red2); border-color:var(--red2) }

.cform{ max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:14px }
.cfield{ display:flex; flex-direction:column; gap:6px }
.cfield label{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:11px; color:var(--ink2) }
.cfield input, .cfield textarea{
  font-family:'Oswald',sans-serif; font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.4); border:2px solid var(--ink); border-radius:2px;
  padding:10px 12px; resize:vertical; width:100%;
}
.cfield input:focus, .cfield textarea:focus{ outline:none; border-color:var(--red) }
.csubmit{ align-self:center; cursor:pointer; font-family:'Anton',sans-serif;
  text-transform:uppercase; letter-spacing:.05em; font-size:15px; padding:12px 28px;
  border:2px solid var(--ink); color:var(--paper); background:var(--red); border-radius:2px;
  transition:background .12s }
.csubmit:hover{ background:var(--red2) }
.csubmit:active{ transform:translateY(1px) }

/* ============================================================
   INTERIOR PAGES — paper card on the dark ground
   ============================================================ */
.page-wrap{ max-width:860px; margin:0 auto; padding:34px 14px 60px }
.page-head{ text-align:center; margin-bottom:24px }
.page-eyebrow{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:#cbb98a }
.page-title{ font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(36px,8vw,64px); line-height:.9; color:var(--paper);
  text-shadow:2px 2px 0 var(--red2); margin:6px 0 4px }
.page-sub{ font-family:'Rye',serif; font-size:clamp(15px,3.2vw,22px); color:var(--red) }

.sheet{ position:relative; background:linear-gradient(160deg,var(--paper),var(--paper2));
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink),
             0 30px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.14);
  padding:clamp(20px,4vw,36px) }
.sheet::before{ content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.sheet > *{ position:relative; z-index:2 }

.sheet h1,.sheet h2,.sheet h3{ font-family:'Anton',sans-serif; text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink); margin:22px 0 10px; line-height:1.15 }
.sheet h1{ font-size:30px } .sheet h2{ font-size:24px } .sheet h3{ font-size:19px }
.sheet h1:first-child,.sheet h2:first-child,.sheet h3:first-child{ margin-top:0 }
.sheet p,.sheet li{ font-family:'Oswald',sans-serif; font-weight:400; font-size:16px;
  line-height:1.75; color:var(--ink2); margin-bottom:14px }
.sheet a{ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(176,18,29,.4) }
.sheet a:hover{ color:var(--red2) }
.sheet ul,.sheet ol{ padding-left:22px; margin-bottom:14px }
.sheet blockquote{ border-left:3px solid var(--red); padding:8px 0 8px 16px; margin:18px 0;
  font-family:'Special Elite',monospace; font-size:14px; line-height:1.7 }
.sheet img{ border:2px solid var(--ink) }
.sheet hr{ border:none; border-top:1px dashed var(--ink); margin:24px 0 }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-foot{ text-align:center; padding:30px 14px 46px }
.site-foot .mark{ font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:14px; color:var(--paper) }
.site-foot .mark a{ color:var(--paper); text-decoration:none }
.site-foot .tag{ font-family:'Special Elite',monospace; font-size:11.5px;
  color:#8a7c5e; margin-top:8px; line-height:1.7 }
.site-foot nav ul{ list-style:none; margin:14px 0 0; padding:0;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
.site-foot nav a{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:11px; color:#a89a72; text-decoration:none }
.site-foot nav a:hover{ color:var(--paper) }

/* screen-reader helper */
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap }

/* ============================================================
   AJAX NAVIGATION — subtle cue while a page is being fetched.
   The player itself is untouched; this is purely visual polish.
   ============================================================ */
body.ssr-loading .topbar{ opacity:.85 }

/* ============================================================
   TOP 25 CHART — namespaced under .ssr-chart so nothing here
   collides with the rest of the site's class names.
   ============================================================ */
.ssr-chart{ max-width:900px; margin:0 auto; padding:34px 14px 60px }

.ssr-chart-hero{ text-align:center; margin-bottom:22px }
.ssr-chart-eyebrow{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; font-size:12px; color:#cbb98a }
.ssr-chart-title{ font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(44px,11vw,88px); line-height:.88; color:var(--paper);
  text-shadow:2px 2px 0 var(--red2); margin:6px 0 4px }
.ssr-chart-sub{ font-family:'Rye',serif; font-size:clamp(16px,3.4vw,24px); color:var(--red) }
.ssr-chart-weekof{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:13px; color:#a89a72; margin-top:10px }

.ssr-chart-paper{ position:relative; background:linear-gradient(160deg,var(--paper),var(--paper2));
  border:2px solid var(--ink);
  box-shadow:0 0 0 6px var(--paper), 0 0 0 8px var(--ink), 0 30px 70px rgba(0,0,0,.7), inset 0 0 60px rgba(120,90,40,.14);
  padding:clamp(14px,3vw,26px) }
.ssr-chart-paper::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.10; mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

.ssr-chart-head-row{ position:relative; z-index:2; display:grid; grid-template-columns:58px 60px 1fr 96px; gap:14px;
  padding:0 4px 8px; border-bottom:2px solid var(--ink);
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:10px; color:var(--ink2) }
.ssr-chart-head-row .c-vote{ text-align:center }
@media (max-width:600px){ .ssr-chart-head-row{ display:none } }

.ssr-chart #chart{ position:relative; z-index:2 }
.ssr-chart .row{ display:grid; grid-template-columns:58px 60px 1fr 96px; gap:14px;
  align-items:center; padding:13px 4px; border-bottom:1px dotted rgba(28,23,16,.35) }
.ssr-chart .row:last-child{ border-bottom:none }
.ssr-chart .row:hover{ background:rgba(176,18,29,.05) }

.ssr-chart .pos{ text-align:center }
.ssr-chart .pos .tw{ font-family:'Anton',sans-serif; font-size:29px; line-height:1; color:var(--ink) }
.ssr-chart .pos .lw{ font-family:'Special Elite',monospace; font-size:9px; color:var(--ink2); margin-top:3px; letter-spacing:.02em }
.ssr-chart .pos .lw.new{ color:var(--red); font-weight:700 }

.ssr-chart .cover{ width:60px; height:60px; background:var(--ink); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:'Anton',sans-serif; color:var(--paper); font-size:19px; letter-spacing:.02em }
.ssr-chart .cover img{ width:100%; height:100%; object-fit:cover; display:block }

.ssr-chart .info{ min-width:0 }
.ssr-chart .artist{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(15px,2.5vw,19px); color:var(--ink); line-height:1.1 }
.ssr-chart .track{ font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(13px,2.1vw,15px); color:var(--ink2); margin-top:2px }
.ssr-chart .track b{ font-weight:700; color:var(--ink) }
.ssr-chart .rel{ font-family:'Special Elite',monospace; font-size:10.5px; color:var(--ink2); opacity:.85; margin-top:3px }
.ssr-chart .badge{ display:inline-block; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:8.5px; padding:2px 6px; margin-left:6px; vertical-align:1px;
  border:1px solid var(--ink2); color:var(--ink2); opacity:.9 }
.ssr-chart .links{ margin-top:4px; font-family:'Oswald',sans-serif; font-weight:500; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em }
.ssr-chart .links a{ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(176,18,29,.35) }
.ssr-chart .links a:hover{ color:var(--red2); border-bottom-color:var(--red2) }
.ssr-chart .links span.sep{ color:var(--ink2); opacity:.5; margin:0 5px }

.ssr-chart .vote{ display:flex; align-items:center; justify-content:center; gap:6px }
.ssr-chart .vbtn{ width:32px; height:32px; flex:0 0 auto; cursor:pointer; background:transparent;
  border:2px solid var(--ink); border-radius:2px; display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .12s, transform .06s }
.ssr-chart .vbtn svg{ width:15px; height:15px; fill:var(--ink) }
.ssr-chart .vbtn:hover{ background:rgba(28,23,16,.09) }
.ssr-chart .vbtn:active{ transform:translateY(1px) }
.ssr-chart .vbtn.up.on{ background:var(--red); border-color:var(--red) } .ssr-chart .vbtn.up.on svg{ fill:var(--paper) }
.ssr-chart .vbtn.down.on{ background:var(--ink2); border-color:var(--ink2) } .ssr-chart .vbtn.down.on svg{ fill:var(--paper) }
.ssr-chart .score{ font-family:'Anton',sans-serif; font-size:15px; min-width:26px; text-align:center;
  color:var(--ink); font-variant-numeric:tabular-nums }
.ssr-chart .score.pos-score{ color:var(--red) }

@media (max-width:600px){
  .ssr-chart .row{ grid-template-columns:46px 48px 1fr; grid-template-areas:"pos cover info" ". . vote"; gap:11px }
  .ssr-chart .row > .pos{ grid-area:pos } .ssr-chart .row > .cover{ grid-area:cover } .ssr-chart .row > .info{ grid-area:info }
  .ssr-chart .row > .vote{ grid-area:vote; justify-content:flex-start; margin-top:2px }
  .ssr-chart .cover{ width:48px; height:48px; font-size:16px }
  .ssr-chart .pos .tw{ font-size:24px }
}

.ssr-chart-note{ position:relative; z-index:2; text-align:center; font-family:'Special Elite',monospace; font-size:11.5px;
  color:var(--ink2); margin-top:16px; padding-top:12px; border-top:1px dashed var(--ink); line-height:1.6 }

.ssr-chart-cta{ text-align:center; margin-top:36px }
.ssr-chart-cta-box{ display:inline-block; background:var(--red); color:var(--paper); font-family:'Anton',sans-serif;
  text-transform:uppercase; letter-spacing:.06em; font-size:18px; padding:16px 34px; border:2px solid var(--ink);
  text-decoration:none; box-shadow:0 6px 0 var(--red2) }
.ssr-chart-cta-box:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--red2) }
.ssr-chart-cta-sub{ font-family:'Special Elite',monospace; font-size:12px; color:#a89a72; margin-top:14px; line-height:1.9 }
.ssr-chart-cta-link{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--red) }
.ssr-chart-cta-link:hover{ color:var(--red) }