/* AYDO8 brand palette: Brand Guidelines 02 / 06 */
:root {
  --orange: #CB4E26;   /* Signal Orange: identity, emphasis */
  --black: #000000;    /* Deep Black: environment */
  --white: #E9E1D8;    /* Off White: text only, never a fill */
  --rust: #7A4A2E;     /* dividers, dimmed accents */
  --graphite: #2C2C2C; /* rules, panels, outlines */
  --ash: #8C8985;      /* secondary text, captions */

  --display: "Bebas Neue", Impact, sans-serif;
  --sans: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --rail: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.cap { /* CAPTION: Plex Mono, uppercase, tracked */
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- orange side rail (hazard + crosshairs + eye) ---------- */
.rail {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: var(--rail);
  background: var(--orange);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  z-index: 30;
}
.rail .stripes {
  width: 100%; height: 160px;
  background: repeating-linear-gradient(-45deg, var(--black) 0 14px, transparent 14px 32px);
}
.rail .cross { position: relative; width: 1px; height: 90px; background: var(--black); }
.rail .cross::before { content: ""; position: absolute; top: 50%; left: -14px; width: 29px; height: 1px; background: var(--black); }
.rail .cross::after { content: ""; position: absolute; top: 50%; left: -6px; width: 11px; height: 11px; margin-top: -6px; border: 1px solid var(--black); border-radius: 50%; }

.page { margin-left: var(--rail); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 20px 48px;
  background: var(--black);
  border-bottom: 1px solid var(--rust);
}
.topbar .sep { width: 1px; height: 18px; background: var(--graphite); }
.topbar .muted { color: var(--ash); }
.topbar nav { margin-left: auto; display: flex; gap: 28px; }
.topbar nav a { text-decoration: none; }
.topbar nav a:hover { color: var(--orange); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 61px);
  display: grid; place-items: center;
  text-align: center;
  padding: 28px 24px 110px;
  overflow: hidden;
}
.eye-wrap { /* crops the 16:9 eye render to a band so it sits above the wordmark */
  width: min(720px, 100%); aspect-ratio: 16 / 5;
  overflow: hidden; margin-bottom: 8px;
}
.eye-video { width: 100%; margin-top: -12.5%; display: block; }
.hero-inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* Logo: supplied artwork only (Brand Guidelines 04 / 06). */
.logo-wordmark { width: min(480px, 74vw, 42svh * 1.67); height: auto; }

.hero-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--mono); font-weight: 500;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--orange);
  color: var(--white);
  background: var(--black);
  transition: background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { background: var(--orange); color: var(--black); outline: none; }
.btn.solid { background: var(--orange); color: var(--black); }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--white); border-color: var(--white); }
.btn svg { width: 18px; height: 18px; flex: none; }

.hero .meta {
  position: absolute; left: 48px; right: 48px; bottom: 32px;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: var(--ash);
}
.hero .meta .o { color: var(--orange); }

/* ---------- sections ---------- */
.block { max-width: 1120px; margin: 0 auto; padding: 110px 48px; }
.sec-head { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: end; margin-bottom: 48px; }
.sec-num { font-family: var(--display); font-size: clamp(96px, 14vw, 160px); line-height: .8; color: var(--orange); }
.sec-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(56px, 8vw, 104px); line-height: .85;
  letter-spacing: -.01em; text-transform: uppercase;
}
.sec-head .rule { grid-column: 1 / -1; width: 100px; height: 3px; background: var(--orange); margin-top: 26px; }

/* ---------- shows ---------- */
.shows { list-style: none; border-top: 1px solid var(--rust); }
.shows .head { display: grid; grid-template-columns: 220px 1fr auto; gap: 28px; padding: 14px 0; color: var(--ash); border-bottom: 1px solid var(--graphite); }
.show {
  display: grid; grid-template-columns: 220px 1fr auto;
  gap: 28px; align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--graphite);
}
.show .date { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--orange); }
.show .city { font-family: var(--sans); font-weight: 600; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.show .venue { font-size: 16px; color: var(--ash); }
.show .btn { padding: 12px 20px; font-size: 12px; }
.show .status { color: var(--ash); padding: 12px 0; }
.empty { color: var(--ash); padding: 30px 0; border-bottom: 1px solid var(--graphite); }
.empty a { color: var(--white); }

/* ---------- join ---------- */
.join {
  position: relative;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
  padding: clamp(32px, 6vw, 64px);
  border: 1px solid var(--rust);
}
.join::before, .join::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--orange); }
.join::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.join::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.join h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05;
  text-transform: uppercase; color: var(--orange);
  margin: 14px 0 18px;
}
.join p { color: var(--ash); max-width: 480px; }
.join .cap { color: var(--ash); }
.join .row { display: flex; flex-direction: column; gap: 14px; }
.join .row .btn { justify-content: center; }

/* ---------- footer ---------- */
footer {
  max-width: 1120px; margin: 0 auto;
  padding: 36px 48px 56px;
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center;
  color: var(--ash);
  border-top: 1px solid var(--rust);
}
footer .sign { display: flex; align-items: center; gap: 18px; }
footer .ay { height: 56px; width: auto; }
footer .contacts { display: flex; flex-wrap: wrap; gap: 8px 32px; }
footer a { color: var(--white); text-decoration: none; }
footer a:hover { color: var(--orange); }
.copy {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--white); background: none; border: 0; padding: 0;
  cursor: copy; position: relative;
}
.copy:hover, .copy:focus-visible { color: var(--orange); outline: none; }
.copy::after { /* "Copied" tag: pops in, then fades out */
  content: "Copied"; position: absolute; left: 0; bottom: calc(100% + 8px);
  padding: 4px 8px; background: var(--orange); color: var(--black);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity .6s ease, transform .6s ease;
}
.copy.copied::after { opacity: 1; transform: none; transition: none; }

@media (max-width: 760px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .topbar { padding: 16px; gap: 14px; }
  .topbar .sep, .topbar .muted { display: none; }
  .hero .meta { left: 16px; right: 16px; }
  .hero .meta .hide-sm { display: none; }
  .eye-wrap { aspect-ratio: 16 / 7; }
  .eye-video { width: 160%; margin: -22% 0 0 -30%; }
  .hero-ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .hero-ctas .btn { justify-content: center; }
  .block { padding: 80px 16px; }
  .shows .head { display: none; }
  .show { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .show .date { grid-column: 1 / -1; font-size: 34px; }
  .show .city { font-size: 22px; }
  .join { grid-template-columns: 1fr; gap: 32px; }
  footer { padding: 32px 16px 48px; }
}


/* ---------- join page ---------- */
.topbar .home { text-decoration: none; }
.topbar .home:hover, .topbar nav a[aria-current] { color: var(--orange); }
.signup {
  max-width: 1120px; margin: 0 auto;
  min-height: calc(100svh - 61px - 130px);
  padding: 90px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.signup-ay { height: 95px; width: auto; margin-bottom: 36px; }
.signup .kicker { display: block; color: var(--orange); margin-bottom: 18px; }
.signup h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(72px, 10vw, 140px); line-height: .85;
  letter-spacing: -.01em; text-transform: uppercase;
}
.signup .rule { display: block; width: 100px; height: 3px; background: var(--orange); margin: 28px 0; }
.signup p { color: var(--ash); max-width: 420px; }
.signup-panel {
  position: relative;
  border: 1px solid var(--rust);
  padding: 8px;
}
.signup-panel::before, .signup-panel::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--orange); }
.signup-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.signup-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.signup-panel iframe { display: block; border: 0; }

@media (max-width: 760px) {
  .signup { grid-template-columns: 1fr; gap: 40px; padding: 56px 16px; }
  .signup-ay { height: 70px; margin-bottom: 24px; }
}

/* ---------- music & social icons (rendered by site.js) ---------- */
.socials {
  max-width: 1120px; margin: 0 auto;
  padding: 40px 48px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px;
  border-top: 1px solid var(--rust);
}
.social-group { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.social-group a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  color: var(--white);
  border: 1px solid var(--graphite);
  transition: color .15s, border-color .15s, background .15s;
}
.social-group a:hover, .social-group a:focus-visible { color: var(--black); background: var(--orange); border-color: var(--orange); outline: none; }
.social-group svg { width: 20px; height: 20px; fill: currentColor; }
.social-sep { width: 1px; height: 30px; background: var(--rust); }

@media (max-width: 760px) {
  .socials { flex-direction: column; padding: 32px 16px; gap: 16px; }
  .social-group { gap: 8px; }
  .social-group a { width: 38px; height: 38px; }
  .social-sep { width: 40px; height: 1px; }
}

/* hero variant: quiet row under the buttons */
.socials.hero-socials { border: 0; padding: 0; margin-top: 36px; gap: 14px 28px; }
.hero-socials .social-group { gap: 4px; }
.hero-socials .social-group a { width: 36px; height: 36px; border: 0; color: var(--ash); }
.hero-socials .social-group a:hover, .hero-socials .social-group a:focus-visible { background: none; color: var(--orange); }
.hero-socials .social-group svg { width: 18px; height: 18px; }
.hero-socials .social-sep { height: 18px; background: var(--graphite); }
@media (max-width: 760px) {
  .socials.hero-socials { flex-direction: column; margin-top: 28px; gap: 8px; }
  .hero-socials .social-sep { display: none; }
}

/* ---------- Booking / Contact jump: flash the footer email ---------- */
footer .contacts > span { padding: 4px 6px; margin: -4px -6px; }
/* one box on the line; the email button only changes text colour, or it draws a second box */
footer .contacts > span.ping { animation: ping 2s ease-out; }
footer .contacts > span.ping .copy { animation: ping-text 2s ease-out; }
@keyframes ping {
  0%, 35% { background: var(--orange); color: var(--black); }
  100% { background: transparent; }
}
@keyframes ping-text {
  0%, 35% { color: var(--black); }
}
@media (max-width: 760px) {
  .topbar nav { gap: 16px; }
}

/* ---------- very small phones (iPhone SE 1st gen, Galaxy Fold) ---------- */
@media (max-width: 400px) {
  .topbar { padding: 14px 12px; gap: 10px; }
  .topbar.cap, .topbar nav { letter-spacing: .1em; }
  .topbar nav { gap: 12px; }
  .hero-socials .social-group a { width: 32px; height: 32px; }
}
@media (max-width: 330px) {
  .topbar.cap { font-size: 11px; }
  .topbar nav { gap: 9px; }
}

/* ---------- accessibility ---------- */
.logo-h1 { margin: 0; line-height: 0; }
/* one consistent keyboard focus ring (mouse clicks don't show it) */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.btn:focus-visible, .copy:focus-visible, .social-group a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  footer .contacts > span.ping, footer .contacts > span.ping .copy { animation: none; }
  .copy::after { transition: none; }
}

/* ---------- 404 page ---------- */
.lost {
  max-width: 1120px; margin: 0 auto;
  min-height: calc(100svh - 61px - 130px);
  padding: 90px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.lost-eye { width: 120px; height: auto; margin-bottom: 36px; }
.lost .kicker { display: block; color: var(--orange); margin-bottom: 18px; }
.lost h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 10vw, 140px); line-height: .85;
  letter-spacing: -.01em; text-transform: uppercase;
}
.lost .rule { display: block; width: 100px; height: 3px; background: var(--orange); margin: 28px 0; }
.lost p { color: var(--ash); max-width: 440px; }
.lost-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 760px) {
  .lost { padding: 56px 16px; }
  .lost-ctas { flex-direction: column; max-width: 340px; }
  .lost-ctas .btn { justify-content: center; }
}

/* ---------- bio page (aydo8.com/bio, unlinked) ---------- */
.bio { max-width: 820px; margin: 0 auto; padding: 90px 48px; }
.bio .kicker { display: block; color: var(--orange); margin-bottom: 18px; }
.bio h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(72px, 12vw, 160px); line-height: .85; letter-spacing: -.01em;
}
.bio .rule { display: block; width: 100px; height: 3px; background: var(--orange); margin: 28px 0 36px; }
.bio p { font-size: 19px; line-height: 1.65; margin-bottom: 22px; max-width: 680px; }
.bio p.lede { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; font-weight: 600; }
.bio .sequence { display: block; margin-top: 10px; font-family: var(--mono); font-weight: 500; font-size: .7em; letter-spacing: .12em; color: var(--orange); white-space: nowrap; }
.bio-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 760px) {
  .bio { padding: 56px 16px; }
  .bio p { font-size: 17px; }
  .bio-ctas { flex-direction: column; max-width: 340px; }
  .bio-ctas .btn { justify-content: center; }
}

/* ---------- music page ---------- */
.music { max-width: 1120px; margin: 0 auto; padding: 90px 48px 70px; }
.music .kicker { display: block; color: var(--orange); margin-bottom: 18px; }
.music h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(72px, 12vw, 160px); line-height: .85; letter-spacing: -.01em; text-transform: uppercase;
}
.music .rule { display: block; width: 100px; height: 3px; background: var(--orange); margin: 24px 0 32px; }

/* featured video */
.feature { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: end; margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--rust); }
.feature-video, .feature iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--rust); background: var(--black); padding: 0; cursor: pointer;
}
.feature-video img { width: 100%; height: 100%; object-fit: cover; }
.feature-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; display: grid; place-items: center;
  background: var(--orange); color: var(--black); transition: transform .15s, background .15s;
}
.feature-video .play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.feature-video:hover .play, .feature-video:focus-visible .play { transform: translate(-50%, -50%) scale(1.08); background: var(--white); }
.feature-meta { display: flex; flex-direction: column; gap: 8px; }
.feature-meta .cap { color: var(--orange); }
.feature-title { font-family: var(--display); font-size: clamp(40px, 5vw, 64px); line-height: .9; text-transform: uppercase; }
.feature-title em { font-style: normal; color: var(--ash); }
.feature-artist { color: var(--ash); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filters button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 10px 16px; color: var(--white); background: none;
  border: 1px solid var(--graphite); cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.filters button:hover { border-color: var(--orange); }
.filters button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--black); }

/* track grid */
.tracks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 20px; }
.track[hidden] { display: none; }
.track img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--graphite); transition: border-color .15s, opacity .15s; }
.track-cover { display: block; }
.track-cover:hover img, .track-cover:focus-visible img { border-color: var(--orange); }
.track-meta { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; }
.track-tag { color: var(--orange); font-size: 11px; }
.track-title { font-weight: 700; font-size: 18px; line-height: 1.2; }
.track-artist { color: var(--ash); font-size: 15px; line-height: 1.3; }
/* arriving from a link like /music#von-dutch */
.track.spot img { animation: spot 2.4s ease-out; }
@keyframes spot { 0%, 40% { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange); } 100% { box-shadow: 0 0 0 4px transparent; } }

@media (max-width: 760px) {
  .music { padding: 56px 16px 48px; }
  .feature { grid-template-columns: 1fr; gap: 16px; margin-top: 56px; padding-top: 36px; }
  .feature-video .play { width: 60px; height: 60px; }
  .tracks { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .track-title { font-size: 16px; }
  .track-artist { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .track.spot img { animation: none; border-color: var(--orange); } }
/* per-track platform buttons */
.track-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.track-links a {
  display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--white); border: 1px solid var(--graphite);
  transition: color .15s, background .15s, border-color .15s;
}
.track-links a:hover, .track-links a:focus-visible { background: var(--orange); border-color: var(--orange); color: var(--black); }
.track-links svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 300px) {
  .topbar { padding: 12px 8px; gap: 8px; }
  .topbar.cap, .topbar nav { font-size: 10px; letter-spacing: .05em; }
  .topbar nav { gap: 7px; }
}
@media (max-width: 360px) {
  .sec-head { gap: 0 16px; }
  .sec-num { font-size: 72px; }
  .sec-head h2 { font-size: 44px; }
}

/* ---------- stats dashboard (aydo8.com/stats, private) ---------- */
.stats { max-width: 1120px; margin: 0 auto; padding: 80px 48px 70px; }
.stats .kicker { display: block; color: var(--orange); margin-bottom: 18px; }
.stats h1 { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 12vw, 160px); line-height: .85; text-transform: uppercase; }
.stats .rule { display: block; width: 100px; height: 3px; background: var(--orange); margin: 24px 0 36px; }
.link-btn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--white); background: none; border: 0; cursor: pointer; padding: 0; }
.link-btn:hover { color: var(--orange); }

.gate { max-width: 460px; }
.gate label { display: block; color: var(--ash); margin-bottom: 10px; }
.gate-row { display: flex; gap: 10px; }
.gate input {
  flex: 1; min-width: 0; padding: 14px 16px; font: inherit; font-size: 18px;
  color: var(--white); background: var(--black); border: 1px solid var(--rust);
}
.gate input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gate-msg { color: var(--orange); margin-top: 12px; min-height: 1em; }

.dash-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.dash-bar .filters { margin: 0; }
.updated { color: var(--ash); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.kpi { border: 1px solid var(--graphite); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi .cap { color: var(--ash); }
.kpi-num { font-family: var(--display); font-size: clamp(44px, 6vw, 72px); line-height: .9; }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel { border: 1px solid var(--graphite); padding: 22px 22px 26px; }
.panel-wide { grid-column: 1 / -1; }
.panel h2 { color: var(--orange); margin-bottom: 18px; font-weight: 500; }
.panel h2 .hint { color: var(--ash); margin-left: 8px; }
.panel h3.sub { color: var(--ash); margin: 22px 0 12px; font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ash); margin-bottom: 16px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

.rank { list-style: none; counter-reset: r; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--graphite); }
.rank li::before { content: counter(r) "."; grid-row: 1 / span 3; color: var(--ash); font-family: var(--mono); font-size: 13px; padding-top: 3px; }
.rank-name { font-weight: 600; font-size: 17px; }
.rank-num { font-family: var(--display); font-size: 26px; line-height: 1; text-align: right; }
.stack { grid-column: 2 / -1; display: flex; height: 8px; min-width: 6px; gap: 2px; }
.stack i { display: block; min-width: 3px; }
.split { grid-column: 2 / -1; color: var(--ash); font-size: 11px; }

.bars { list-style: none; }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--graphite); }
.bar-name { font-size: 16px; overflow-wrap: anywhere; }
.bar-num { font-family: var(--mono); font-size: 14px; }
.bar { grid-column: 1 / -1; height: 4px; background: var(--orange); min-width: 3px; }
.bars .empty, .rank .empty { color: var(--ash); grid-template-columns: 1fr; }
.rank .empty::before { content: none; }

@media (max-width: 760px) {
  .stats { padding: 56px 16px 48px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .panels { grid-template-columns: 1fr; }
  .gate-row { flex-direction: column; }
}
/* stats: growth arrows + socials ring */
.kpi-delta { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ash); }
.kpi-delta.up span[aria-hidden] { color: var(--orange); }
.kpi-delta.down span[aria-hidden] { color: var(--white); }
.kpi-note { color: var(--ash); margin: -14px 0 28px; font-size: 11px; }
.kpi-note:empty { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ring-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.ring-wrap:empty { display: none; }
.ring { width: 128px; height: 128px; flex: none; }
.ring-num { font-family: var(--display); font-size: 30px; fill: var(--white); }
.ring-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; fill: var(--ash); }
.ring-lead { color: var(--ash); font-size: 16px; line-height: 1.35; }
.ring-lead strong { color: var(--white); font-weight: 700; display: block; font-size: 22px; }