/* BrIQ brand system — tokens + logo + type */
:root {
  --briq-bg: #050806;
  --briq-bg-elevated: #0a0f0c;
  --briq-panel: #0d110f;
  --briq-panel-2: #141a16;
  --briq-ink: #f3f6ef;
  --briq-ink-soft: #dce6d6;
  --briq-muted: #9ba597;
  --briq-muted-deep: #6d766a;
  --briq-line: rgba(236, 242, 229, 0.12);
  --briq-line-strong: rgba(236, 242, 229, 0.22);
  --briq-green: #36f27e;
  --briq-green-bright: #5cff9a;
  --briq-green-dim: rgba(54, 242, 126, 0.14);
  --briq-green-glow: rgba(54, 242, 126, 0.22);
  --briq-lime: #d7ff36;
  --briq-ink-on-green: #03140a;
  --briq-card-light: #f7fff2;
  --briq-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --briq-radius-sm: 10px;
  --briq-radius: 14px;
  --briq-radius-lg: 20px;
  --briq-font-display: "Syne", system-ui, sans-serif;
  --briq-font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --briq-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --briq-space-1: 4px;
  --briq-space-2: 8px;
  --briq-space-3: 12px;
  --briq-space-4: 16px;
  --briq-space-5: 24px;
  --briq-space-6: 32px;
  --briq-space-7: 48px;
  --briq-thumb-radius: 12px;
  --briq-thumb-ratio: 4 / 5;
}

/* Map legacy public tokens to brand */
:root {
  --bg: var(--briq-bg);
  --bg-2: var(--briq-bg-elevated);
  --panel: var(--briq-panel);
  --panel-2: var(--briq-panel-2);
  --text: var(--briq-ink);
  --muted: var(--briq-muted);
  --soft: var(--briq-muted-deep);
  --accent: var(--briq-green);
  --accent-2: var(--briq-green-bright);
  --line: var(--briq-line);
  --line-strong: var(--briq-line-strong);
  --shadow: var(--briq-shadow);
  --radius: var(--briq-radius-sm);
  --radius-lg: var(--briq-radius);
}

.briq-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.briq-lockup img.briq-logo-img {
  display: block;
  height: 34px;
  width: auto;
}

.briq-lockup--header img.briq-logo-img {
  height: 32px;
}

.briq-lockup--footer img.briq-logo-img {
  height: 28px;
  opacity: 0.95;
}

.briq-mark-only {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: var(--briq-radius-sm);
}

.briq-mark-only--lg {
  width: 48px;
  height: 48px;
}

/* Branded story panels (replace stock photography) */
.story-panel {
  position: relative;
  min-height: 220px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 78% 22%, var(--briq-green-glow), transparent 42%),
    linear-gradient(155deg, rgba(247, 255, 242, 0.92) 0%, rgba(215, 255, 230, 0.55) 52%, var(--briq-bg) 53%);
  color: var(--briq-ink-on-green);
}

.story-panel--coach {
  background:
    radial-gradient(circle at 24% 30%, rgba(215, 255, 54, 0.25), transparent 40%),
    linear-gradient(160deg, #0f1612 0%, #050806 100%);
  color: var(--briq-ink);
}

.story-panel--live {
  background:
    radial-gradient(circle at 70% 60%, rgba(54, 242, 126, 0.35), transparent 45%),
    linear-gradient(145deg, #07100a 0%, #020403 100%);
  color: var(--briq-ink);
}

.story-panel-kicker {
  font-family: var(--briq-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}

.story-panel-title {
  font-family: var(--briq-font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.05;
  max-width: 16ch;
}

.story-panel-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  opacity: 0.85;
}

/* Ad thumbnail crop rules (Creative Lab + landing mocks) */
.briq-ad-thumb,
.ad-thumb-frame {
  aspect-ratio: var(--briq-thumb-ratio);
  border-radius: var(--briq-thumb-radius);
  overflow: hidden;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--briq-line);
  background: var(--briq-panel-2);
}

.site-footer {
  margin-top: var(--briq-space-7);
  border-top: 1px solid var(--briq-line);
  padding: var(--briq-space-6) 0 var(--briq-space-5);
  background: rgba(5, 8, 6, 0.6);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--briq-space-5);
}

.site-footer-copy {
  max-width: 36ch;
  color: var(--briq-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: var(--briq-space-3) 0 0;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--briq-space-4) var(--briq-space-5);
  color: var(--briq-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

.site-footer-links a:hover {
  color: var(--briq-ink);
}

.site-footer-meta {
  width: 100%;
  padding-top: var(--briq-space-4);
  border-top: 1px solid var(--briq-line);
  color: var(--briq-muted-deep);
  font-size: 0.82rem;
}

.auth-modal .briq-lockup {
  justify-content: center;
  margin-bottom: var(--briq-space-4);
}

.auth-modal .briq-lockup img.briq-logo-img {
  height: 40px;
}