/* BadRoyalties.com — modern editorial redesign */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --br-bg: #0E0E0E;
  --br-surface: #161616;
  --br-elevated: #1E1E1E;
  --br-border: #262626;
  --br-border-hover: #3A3A3A;
  --br-text: #F5F5F5;
  --br-muted: #8A8A8A;
  --br-dim: #5A5A5A;
  --br-accent: #FFD700;
  --br-accent-soft: #E8C32E;
  --br-accent-glow: rgba(255, 215, 0, 0.08);
  --br-accent-line: rgba(255, 215, 0, 0.18);

  --br-max: 1280px;
  --br-content: 760px;

  --br-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--br-bg);
}

body {
  background: var(--br-bg);
  color: var(--br-text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle grain overlay for texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Accent glow in top-left for atmosphere */
body::after {
  content: "";
  position: fixed;
  top: -20vh;
  left: -20vw;
  width: 60vw;
  height: 60vw;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at center, var(--br-accent-glow) 0%, transparent 60%);
  filter: blur(40px);
}

a {
  color: var(--br-accent);
  text-decoration: none;
  transition: color 0.2s var(--br-ease);
}
a:hover { color: var(--br-accent-soft); }

::selection { background: var(--br-accent); color: var(--br-bg); }

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--br-text);
}

p { margin-bottom: 1.25rem; }
ul, ol { margin: 0 0 1.25rem 1.5rem; }
li { margin-bottom: 0.5rem; }

img { max-width: 100%; display: block; }

/* Containers */
.br-container {
  max-width: var(--br-content);
  margin: 0 auto;
  padding: 0 24px;
}
.br-wide {
  max-width: var(--br-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============== HEADER ============== */
.br-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 14, 14, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--br-border);
}

.br-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 32px;
}

.br-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--br-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.br-logo::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--br-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--br-accent);
}

.br-logo span { color: var(--br-accent); }

.br-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.br-nav a {
  color: var(--br-muted);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.br-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--br-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--br-ease);
}
.br-nav a:hover { color: var(--br-text); }
.br-nav a:hover::after { transform: scaleX(1); }

.br-nav__cta {
  padding: 8px 16px;
  background: var(--br-accent);
  color: var(--br-bg) !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 0.2s var(--br-ease), background 0.2s var(--br-ease);
}
.br-nav__cta::after { display: none; }
.br-nav__cta:hover {
  background: var(--br-accent-soft);
  transform: translateY(-1px);
}

/* ============== HERO / MASTHEAD ============== */
.br-masthead {
  padding: 80px 0 48px;
  position: relative;
}

.br-masthead__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--br-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.br-masthead__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--br-accent);
}

.br-masthead__title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 0.98;
  max-width: 900px;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  font-weight: 700;
}
.br-masthead__title em {
  font-style: normal;
  color: var(--br-accent);
  position: relative;
}

.br-masthead__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--br-muted);
  max-width: 660px;
  line-height: 1.55;
}

/* ============== FEATURED POST ============== */
.br-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding: 56px 0 80px;
  border-top: 1px solid var(--br-border);
  margin-top: 56px;
  align-items: center;
}

.br-featured__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--br-muted);
  margin-bottom: 20px;
}

.br-featured__title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.br-featured__title a {
  color: var(--br-text);
  background-image: linear-gradient(var(--br-accent), var(--br-accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--br-ease);
  padding-bottom: 4px;
}
.br-featured__title a:hover { background-size: 100% 2px; color: var(--br-text); }

.br-featured__dek {
  font-size: 1.1rem;
  color: var(--br-muted);
  margin-bottom: 28px;
  line-height: 1.6;
  max-width: 520px;
}

.br-featured__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--br-dim);
  letter-spacing: 0.04em;
}
.br-featured__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--br-dim);
}

.br-featured__visual {
  aspect-ratio: 4/5;
  background-color: var(--br-surface);
  background-image:
    linear-gradient(180deg, rgba(255,215,0,0.04) 0%, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23FFD700' stop-opacity='0.95'/><stop offset='100%25' stop-color='%23FFD700' stop-opacity='0.15'/></linearGradient><linearGradient id='g2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23FFD700' stop-opacity='0.35'/><stop offset='100%25' stop-color='%23FFD700' stop-opacity='0.02'/></linearGradient></defs><g opacity='0.08'><line x1='0' y1='100' x2='400' y2='100' stroke='%23F5F5F5' stroke-width='0.5'/><line x1='0' y1='200' x2='400' y2='200' stroke='%23F5F5F5' stroke-width='0.5'/><line x1='0' y1='300' x2='400' y2='300' stroke='%23F5F5F5' stroke-width='0.5'/><line x1='0' y1='400' x2='400' y2='400' stroke='%23F5F5F5' stroke-width='0.5'/></g><g><rect x='40' y='180' width='22' height='220' fill='url(%23g)'/><rect x='72' y='210' width='22' height='190' fill='url(%23g)' opacity='0.85'/><rect x='104' y='245' width='22' height='155' fill='url(%23g)' opacity='0.72'/><rect x='136' y='270' width='22' height='130' fill='url(%23g)' opacity='0.6'/><rect x='168' y='295' width='22' height='105' fill='url(%23g2)'/><rect x='200' y='315' width='22' height='85' fill='url(%23g2)' opacity='0.85'/><rect x='232' y='330' width='22' height='70' fill='url(%23g2)' opacity='0.72'/><rect x='264' y='345' width='22' height='55' fill='url(%23g2)' opacity='0.55'/><rect x='296' y='358' width='22' height='42' fill='url(%23g2)' opacity='0.42'/><rect x='328' y='368' width='22' height='32' fill='url(%23g2)' opacity='0.3'/></g><path d='M 45 175 Q 120 220 200 305 T 350 365' fill='none' stroke='%23FFD700' stroke-width='1.5' stroke-dasharray='2 4' opacity='0.55'/><circle cx='45' cy='175' r='3' fill='%23FFD700'/><circle cx='350' cy='365' r='3' fill='%23FFD700' opacity='0.4'/></svg>");
  background-size: cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--br-border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
}

.br-featured__visual::before {
  content: "$0.003";
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
  font-weight: 500;
  color: var(--br-text);
  letter-spacing: -0.02em;
  position: absolute;
  left: 32px;
  bottom: 32px;
  opacity: 0.92;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.br-featured__visual::after {
  content: "FEATURED";
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--br-bg);
  background: var(--br-accent);
  padding: 5px 10px;
  align-self: flex-start;
  position: absolute;
  top: 32px;
  right: 32px;
}

/* ============== POST GRID ============== */
.br-section {
  padding: 80px 0;
  border-top: 1px solid var(--br-border);
}

.br-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 32px;
  flex-wrap: wrap;
}

.br-section__title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.02em;
}

.br-section__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--br-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.br-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--br-border);
}

.br-card {
  position: relative;
  padding: 36px 28px 40px;
  border-right: 1px solid var(--br-border);
  border-bottom: 1px solid var(--br-border);
  transition: background 0.3s var(--br-ease);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.br-card:nth-child(3n) { border-right: none; }

.br-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--br-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--br-ease);
}

.br-card:hover { background: var(--br-surface); }
.br-card:hover::before { transform: scaleX(1); }

.br-card__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--br-dim);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.br-card__tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--br-accent-glow);
  color: var(--br-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid var(--br-accent-line);
  align-self: flex-start;
}

.br-card__title {
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.br-card__title a {
  color: var(--br-text);
}
.br-card__title a:hover { color: var(--br-accent); }

.br-card__dek {
  color: var(--br-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: auto;
  padding-bottom: 20px;
}

.br-card__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--br-dim);
  letter-spacing: 0.06em;
  display: flex;
  gap: 12px;
  align-items: center;
}
.br-card__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--br-dim);
}

/* ============== NEWSLETTER ============== */
.br-newsletter {
  margin: 0 auto;
  max-width: 960px;
  padding: 72px 48px;
  border: 1px solid var(--br-border);
  background:
    linear-gradient(135deg, var(--br-accent-glow) 0%, transparent 55%),
    var(--br-surface);
  position: relative;
  overflow: hidden;
}

.br-newsletter::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle at center, var(--br-accent-glow) 0%, transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}

.br-newsletter__inner { position: relative; }

.br-newsletter__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--br-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.br-newsletter h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 14px;
  max-width: 640px;
  line-height: 1.05;
}

.br-newsletter p {
  color: var(--br-muted);
  max-width: 560px;
  margin-bottom: 28px;
  font-size: 1.02rem;
}

.br-newsletter__form {
  display: flex;
  gap: 0;
  max-width: 540px;
  border: 1px solid var(--br-border);
  background: var(--br-bg);
  border-radius: 999px;
  padding: 4px;
  transition: border-color 0.2s var(--br-ease);
}
.br-newsletter__form:focus-within { border-color: var(--br-accent); }

.br-newsletter input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  background: transparent;
  border: none;
  color: var(--br-text);
  font-family: inherit;
  font-size: 0.98rem;
  outline: none;
}
.br-newsletter input[type="email"]::placeholder { color: var(--br-dim); }

.br-newsletter button {
  padding: 14px 26px;
  background: var(--br-accent);
  color: var(--br-bg);
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.2s var(--br-ease), background 0.2s var(--br-ease);
  letter-spacing: -0.01em;
}
.br-newsletter button:hover {
  background: var(--br-accent-soft);
  transform: translateX(2px);
}

/* ============== ARTICLE ============== */
.br-article {
  padding: 64px 0 96px;
  max-width: var(--br-content);
}

.br-article__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--br-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.br-article__meta::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--br-accent);
}

.br-article__title {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  max-width: 820px;
}

.br-article__lede {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--br-muted);
  line-height: 1.5;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--br-border);
  max-width: 780px;
  font-weight: 400;
}

.br-article__body {
  font-size: 1.06rem;
  line-height: 1.75;
}
.br-article__body p { margin-bottom: 1.4rem; color: var(--br-text); }
.br-article__body h2 {
  font-size: 1.7rem;
  margin: 3rem 0 1.25rem;
  padding-left: 14px;
  border-left: 3px solid var(--br-accent);
  letter-spacing: -0.02em;
}
.br-article__body h3 {
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
  letter-spacing: -0.01em;
}
.br-article__body ul, .br-article__body ol { margin: 1rem 0 1.6rem 1.5rem; }
.br-article__body li { margin-bottom: 0.75rem; }
.br-article__body strong { color: var(--br-text); font-weight: 700; }
.br-article__body a {
  color: var(--br-accent);
  border-bottom: 1px dotted var(--br-accent-line);
  transition: border-color 0.2s;
}
.br-article__body a:hover { border-bottom-color: var(--br-accent); }

.br-article__body > p:first-of-type::first-letter {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 4.5rem;
  float: left;
  line-height: 0.9;
  padding: 6px 14px 0 0;
  color: var(--br-accent);
  font-weight: 700;
}

blockquote {
  border-left: 3px solid var(--br-accent);
  padding: 0.25rem 0 0.25rem 1.4rem;
  margin: 2rem 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--br-text);
  font-weight: 500;
  letter-spacing: -0.01em;
}

code {
  background: var(--br-elevated);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  color: var(--br-accent);
}

.br-author-box {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--br-border);
  margin-top: 56px;
  background: var(--br-surface);
  border-radius: 4px;
  position: relative;
}
.br-author-box::before {
  content: "AUTHOR";
  position: absolute;
  top: -10px; left: 20px;
  background: var(--br-bg);
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--br-muted);
  letter-spacing: 0.2em;
}

.br-author-box__avatar {
  width: 56px; height: 56px;
  background: var(--br-accent);
  color: var(--br-bg);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  letter-spacing: -0.02em;
}

.br-author-box__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.br-author-box__bio {
  font-size: 0.92rem;
  color: var(--br-muted);
  line-height: 1.5;
}

/* ============== FOOTER ============== */
.br-footer {
  border-top: 1px solid var(--br-border);
  padding: 80px 0 32px;
  margin-top: 80px;
  position: relative;
}

.br-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--br-border);
}

.br-footer__brand .br-logo {
  margin-bottom: 16px;
}

.br-footer__tag {
  color: var(--br-muted);
  font-size: 0.98rem;
  max-width: 320px;
  line-height: 1.55;
}

.br-footer__col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--br-muted);
  margin-bottom: 18px;
  font-weight: 500;
}

.br-footer__col ul { list-style: none; margin: 0; }
.br-footer__col li { margin-bottom: 10px; }
.br-footer__col a {
  color: var(--br-text);
  font-size: 0.94rem;
  transition: color 0.2s;
}
.br-footer__col a:hover { color: var(--br-accent); }

.br-footer__credit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--br-dim);
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* ============== LEGACY-COMPAT (inner pages) ============== */
.br-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 48px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--br-border);
}
.br-footer__cols .br-footer__col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--br-muted);
  margin-bottom: 18px;
  font-weight: 500;
}

/* Old newsletter shape (no __inner wrapper) inside br-article */
.br-article .br-newsletter { padding: 48px 32px; margin: 56px 0; }
.br-article .br-newsletter h3 { font-size: 1.6rem; margin-bottom: 12px; }
.br-article .br-newsletter p { margin-bottom: 22px; }
.br-article .br-newsletter__form {
  max-width: 460px;
  border: 1px solid var(--br-border);
  background: var(--br-bg);
  border-radius: 999px;
  padding: 4px;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
  .br-featured { grid-template-columns: 1fr; gap: 40px; }
  .br-featured__visual { aspect-ratio: 16/10; order: -1; }
  .br-grid { grid-template-columns: repeat(2, 1fr); }
  .br-card:nth-child(3n) { border-right: 1px solid var(--br-border); }
  .br-card:nth-child(2n) { border-right: none; }
  .br-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  .br-wide { padding: 0 20px; }
  .br-nav { gap: 20px; }
  .br-nav a { font-size: 0.85rem; }
  .br-nav__cta { display: none; }
  .br-masthead { padding: 48px 0 32px; }
  .br-section { padding: 48px 0; }
  .br-grid { grid-template-columns: 1fr; }
  .br-card { border-right: none !important; }
  .br-newsletter { padding: 48px 24px; }
  .br-newsletter__form { flex-direction: column; border-radius: 16px; padding: 8px; gap: 8px; }
  .br-newsletter input[type="email"] { padding: 14px 16px; }
  .br-newsletter button { width: 100%; }
  .br-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .br-article__body > p:first-of-type::first-letter { font-size: 3.2rem; }
}

/* ============== FAQ (AIO/GEO) ============== */
.br-article__faq {
  max-width: var(--br-content);
  margin: 80px auto 0;
  padding-top: 56px;
  border-top: 1px solid var(--br-border);
}

.br-article__faq h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--br-text);
  margin-bottom: 32px;
}

.br-faq__item {
  border-bottom: 1px solid var(--br-border);
  padding: 20px 0;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.br-faq__item[open] {
  border-bottom-color: var(--br-border-hover);
}

.br-faq__item summary {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--br-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  line-height: 1.4;
}

.br-faq__item summary::-webkit-details-marker { display: none; }

.br-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.4rem;
  color: var(--br-accent);
  font-weight: 400;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.br-faq__item[open] summary::after {
  content: "\2212";
}

.br-faq__item summary:hover {
  color: var(--br-accent);
}

.br-faq__item p {
  margin-top: 16px;
  color: var(--br-muted);
  line-height: 1.65;
  font-size: 0.98rem;
}

/* ====== Per-post hero images ====== */
.br-article__hero {
  width: 100%;
  aspect-ratio: 16 / 7;
  margin: 0 0 36px 0;
  border-radius: 6px;
  background-color: #0a0a0a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 215, 0, 0.18);
  position: relative;
}
.br-article__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.br-article__hero--spotify {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23FFD700' stop-opacity='0.9'/><stop offset='100%25' stop-color='%23FFD700' stop-opacity='0.1'/></linearGradient></defs><g><rect x='80' y='80' width='44' height='220' fill='url(%23g)'/><rect x='144' y='110' width='44' height='190' fill='url(%23g)' opacity='0.88'/><rect x='208' y='140' width='44' height='160' fill='url(%23g)' opacity='0.76'/><rect x='272' y='170' width='44' height='130' fill='url(%23g)' opacity='0.64'/><rect x='336' y='195' width='44' height='105' fill='url(%23g)' opacity='0.52'/><rect x='400' y='215' width='44' height='85' fill='url(%23g)' opacity='0.42'/><rect x='464' y='235' width='44' height='65' fill='url(%23g)' opacity='0.34'/><rect x='528' y='250' width='44' height='50' fill='url(%23g)' opacity='0.28'/><rect x='592' y='262' width='44' height='38' fill='url(%23g)' opacity='0.22'/><rect x='656' y='272' width='44' height='28' fill='url(%23g)' opacity='0.18'/></g><text x='80' y='60' fill='%23FFD700' font-family='Georgia,serif' font-size='22' font-style='italic'>$0.003 / stream</text><line x1='80' y1='300' x2='720' y2='300' stroke='%23FFD700' stroke-width='0.5' opacity='0.3'/></svg>");
}

.br-article__hero--ai {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23FFD700' stroke-width='1' opacity='0.35'><line x1='150' y1='90' x2='320' y2='175'/><line x1='150' y1='175' x2='320' y2='90'/><line x1='150' y1='175' x2='320' y2='260'/><line x1='150' y1='260' x2='320' y2='175'/><line x1='320' y1='90' x2='490' y2='175'/><line x1='320' y1='175' x2='490' y2='90'/><line x1='320' y1='175' x2='490' y2='260'/><line x1='320' y1='260' x2='490' y2='175'/><line x1='490' y1='90' x2='630' y2='175'/><line x1='490' y1='175' x2='630' y2='90'/><line x1='490' y1='175' x2='630' y2='260'/><line x1='490' y1='260' x2='630' y2='175'/></g><g fill='%23FFD700'><circle cx='150' cy='90' r='6'/><circle cx='150' cy='175' r='6'/><circle cx='150' cy='260' r='6'/><circle cx='320' cy='90' r='7' opacity='0.85'/><circle cx='320' cy='175' r='7' opacity='0.85'/><circle cx='320' cy='260' r='7' opacity='0.85'/><circle cx='490' cy='90' r='8' opacity='0.7'/><circle cx='490' cy='175' r='8' opacity='0.7'/><circle cx='490' cy='260' r='8' opacity='0.7'/><circle cx='630' cy='175' r='16'/></g><text x='400' y='45' fill='%23FFD700' font-family='Georgia,serif' font-size='18' font-style='italic' text-anchor='middle' opacity='0.75'>AI &amp; the royalty pool</text></svg>");
}

.br-article__hero--bandcamp {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23FFD700' stroke-width='0.8' opacity='0.3'><rect x='120' y='80' width='560' height='200'/><line x1='200' y1='80' x2='200' y2='280'/><line x1='280' y1='80' x2='280' y2='280'/><line x1='360' y1='80' x2='360' y2='280'/><line x1='440' y1='80' x2='440' y2='280'/><line x1='520' y1='80' x2='520' y2='280'/><line x1='600' y1='80' x2='600' y2='280'/><line x1='120' y1='130' x2='680' y2='130'/><line x1='120' y1='180' x2='680' y2='180'/><line x1='120' y1='230' x2='680' y2='230'/></g><rect x='520' y='130' width='80' height='50' fill='%23FFD700' opacity='0.9'/><text x='560' y='163' fill='%23000' font-family='Georgia,serif' font-size='22' font-weight='bold' text-anchor='middle'>$</text><text x='400' y='55' fill='%23FFD700' font-family='Georgia,serif' font-size='18' font-style='italic' text-anchor='middle'>Bandcamp Friday</text></svg>");
}

.br-article__hero--distrokid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23FFD700'><circle cx='400' cy='175' r='115' stroke-width='1' stroke-dasharray='3 6' opacity='0.5'/><circle cx='400' cy='175' r='90' stroke-width='2' opacity='0.95'/></g><text x='400' y='160' fill='%23FFD700' font-family='Georgia,serif' font-size='38' font-weight='bold' text-anchor='middle'>%24 22.99</text><text x='400' y='195' fill='%23FFD700' font-family='Georgia,serif' font-size='13' font-style='italic' text-anchor='middle' opacity='0.7'>recurring</text><path d='M 520 135 A 85 85 0 1 1 520 215' fill='none' stroke='%23FFD700' stroke-width='1.2' opacity='0.45'/><polygon points='513,210 525,222 532,210' fill='%23FFD700' opacity='0.6'/></svg>");
}

.br-article__hero--mechanical {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23FFD700'><circle cx='400' cy='175' r='140' stroke-width='1.5'/><circle cx='400' cy='175' r='115' opacity='0.7'/><circle cx='400' cy='175' r='92' opacity='0.55'/><circle cx='400' cy='175' r='72' opacity='0.4'/><circle cx='400' cy='175' r='52' opacity='0.3'/></g><circle cx='400' cy='175' r='15' fill='%23FFD700'/><text x='400' y='55' fill='%23FFD700' font-family='Georgia,serif' font-size='15' font-style='italic' text-anchor='middle' opacity='0.65'>17 U.S.C. %C2%A7 115</text></svg>");
}

.br-article__hero--neighboring {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><ellipse cx='400' cy='175' rx='290' ry='140' fill='none' stroke='%23FFD700' stroke-width='0.5' opacity='0.18'/><g fill='none' stroke='%23FFD700' stroke-width='1' opacity='0.4' stroke-dasharray='2 4'><path d='M 150 180 Q 300 80 480 150'/><path d='M 480 150 Q 560 250 650 180'/><path d='M 150 180 Q 350 290 480 220'/><path d='M 200 120 Q 400 50 620 120'/><path d='M 300 250 Q 500 300 650 220'/></g><g fill='%23FFD700'><circle cx='150' cy='180' r='7'/><circle cx='300' cy='110' r='5' opacity='0.85'/><circle cx='480' cy='150' r='6' opacity='0.9'/><circle cx='650' cy='180' r='5' opacity='0.8'/><circle cx='560' cy='250' r='4' opacity='0.7'/><circle cx='350' cy='240' r='4' opacity='0.7'/><circle cx='620' cy='120' r='5' opacity='0.85'/></g></svg>");
}

.br-article__hero--playlist {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g><rect x='120' y='70' width='8' height='8' fill='%23FFD700'/><rect x='145' y='67' width='420' height='14' fill='%23FFD700' opacity='0.22'/><rect x='580' y='70' width='60' height='8' fill='%23FFD700' opacity='0.5'/><rect x='120' y='110' width='8' height='8' fill='%23FFD700' opacity='0.9'/><rect x='145' y='107' width='360' height='14' fill='%23FFD700' opacity='0.2'/><rect x='580' y='110' width='55' height='8' fill='%23FFD700' opacity='0.5'/><rect x='120' y='150' width='8' height='8' fill='%23FFD700' opacity='0.8'/><rect x='145' y='147' width='480' height='14' fill='%23FFD700' opacity='0.18'/><rect x='580' y='150' width='50' height='8' fill='%23FFD700' opacity='0.5'/><rect x='120' y='190' width='8' height='8' fill='%23FFD700' opacity='0.7'/><rect x='145' y='187' width='300' height='14' fill='%23FFD700' opacity='0.16'/><rect x='580' y='190' width='45' height='8' fill='%23FFD700' opacity='0.5'/><rect x='120' y='230' width='8' height='8' fill='%23FFD700' opacity='0.6'/><rect x='145' y='227' width='400' height='14' fill='%23FFD700' opacity='0.14'/><rect x='580' y='230' width='40' height='8' fill='%23FFD700' opacity='0.5'/><rect x='120' y='270' width='8' height='8' fill='%23FFD700' opacity='0.5'/><rect x='145' y='267' width='350' height='14' fill='%23FFD700' opacity='0.12'/><rect x='580' y='270' width='35' height='8' fill='%23FFD700' opacity='0.5'/></g></svg>");
}

.br-article__hero--singles {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><line x1='100' y1='175' x2='700' y2='175' stroke='%23FFD700' stroke-width='1' opacity='0.35'/><g fill='%23FFD700'><circle cx='130' cy='175' r='8'/><circle cx='280' cy='175' r='7' opacity='0.85'/><circle cx='430' cy='175' r='8' opacity='0.95'/><circle cx='580' cy='175' r='7' opacity='0.85'/><circle cx='700' cy='175' r='12'/></g><g fill='%23FFD700' font-family='Georgia,serif' font-size='13' font-style='italic' opacity='0.75'><text x='130' y='145' text-anchor='middle'>Single 1</text><text x='280' y='145' text-anchor='middle'>Single 2</text><text x='430' y='145' text-anchor='middle'>Single 3</text><text x='580' y='145' text-anchor='middle'>Single 4</text><text x='700' y='145' text-anchor='middle'>EP</text></g><g fill='%23FFD700' font-family='Georgia,serif' font-size='11' opacity='0.45'><text x='130' y='212' text-anchor='middle'>wk 0</text><text x='280' y='212' text-anchor='middle'>wk 6</text><text x='430' y='212' text-anchor='middle'>wk 12</text><text x='580' y='212' text-anchor='middle'>wk 18</text><text x='700' y='212' text-anchor='middle'>wk 24</text></g></svg>");
}

.br-article__hero--split {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><g transform='translate(400,175)'><path d='M 0 -120 A 120 120 0 0 1 70.54 97.08 L 0 0 Z' fill='%23FFD700' opacity='0.9'/><path d='M 70.54 97.08 A 120 120 0 0 1 -114.13 37.08 L 0 0 Z' fill='%23FFD700' opacity='0.65'/><path d='M -114.13 37.08 A 120 120 0 0 1 -70.54 -97.08 L 0 0 Z' fill='%23FFD700' opacity='0.4'/><path d='M -70.54 -97.08 A 120 120 0 0 1 0 -120 L 0 0 Z' fill='%23FFD700' opacity='0.22'/><circle cx='0' cy='0' r='55' fill='%23000'/><text y='-3' fill='%23FFD700' font-family='Georgia,serif' font-size='18' font-style='italic' text-anchor='middle'>100%25</text><text y='18' fill='%23FFD700' font-family='Georgia,serif' font-size='11' opacity='0.65' text-anchor='middle'>split</text></g></svg>");
}

.br-article__hero--sync {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 350' preserveAspectRatio='xMidYMid slice'><rect x='80' y='110' width='640' height='130' fill='none' stroke='%23FFD700' stroke-width='1.5' opacity='0.55'/><g fill='%23FFD700' opacity='0.55'><rect x='100' y='120' width='16' height='14'/><rect x='140' y='120' width='16' height='14'/><rect x='180' y='120' width='16' height='14'/><rect x='220' y='120' width='16' height='14'/><rect x='260' y='120' width='16' height='14'/><rect x='300' y='120' width='16' height='14'/><rect x='340' y='120' width='16' height='14'/><rect x='380' y='120' width='16' height='14'/><rect x='420' y='120' width='16' height='14'/><rect x='460' y='120' width='16' height='14'/><rect x='500' y='120' width='16' height='14'/><rect x='540' y='120' width='16' height='14'/><rect x='580' y='120' width='16' height='14'/><rect x='620' y='120' width='16' height='14'/><rect x='660' y='120' width='16' height='14'/><rect x='700' y='120' width='16' height='14'/><rect x='100' y='216' width='16' height='14'/><rect x='140' y='216' width='16' height='14'/><rect x='180' y='216' width='16' height='14'/><rect x='220' y='216' width='16' height='14'/><rect x='260' y='216' width='16' height='14'/><rect x='300' y='216' width='16' height='14'/><rect x='340' y='216' width='16' height='14'/><rect x='380' y='216' width='16' height='14'/><rect x='420' y='216' width='16' height='14'/><rect x='460' y='216' width='16' height='14'/><rect x='500' y='216' width='16' height='14'/><rect x='540' y='216' width='16' height='14'/><rect x='580' y='216' width='16' height='14'/><rect x='620' y='216' width='16' height='14'/><rect x='660' y='216' width='16' height='14'/><rect x='700' y='216' width='16' height='14'/></g><g fill='%23FFD700' transform='translate(390,175)'><ellipse cx='0' cy='8' rx='14' ry='10'/><rect x='12' y='-28' width='3' height='36'/><path d='M 15 -28 Q 38 -22 30 2' fill='none' stroke='%23FFD700' stroke-width='2.5'/></g></svg>");
}