/* =========================================================
   de rouge — brand overrides
   The single source of truth for typography & voice rules:
     · Inter everywhere except the de rouge wordmark
     · de rouge wordmark + product names use Indivisible Semibold
     · de rouge is never italic
     · No ALL CAPS — only sentence case
   This file MUST load after styles.css.
   ========================================================= */

/* Indivisible — Klim Type Foundry, semibold. Drop a licensed
   webfont into /assets/fonts/ to swap in; until then we
   gracefully fall back to Inter at semibold (600).            */
@font-face {
  font-family: 'Indivisible';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Indivisible Semibold'),
       local('Indivisible-Semibold'),
       local('Inter SemiBold'),
       local('Inter-SemiBold');
}

:root {
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-brand:   'Indivisible', 'Inter', system-ui, sans-serif;
}

/* Force Inter even if the type-pair tweaker switches it */
html[data-type="archivo"],
html[data-type="space"],
html[data-type="bricolage"],
html[data-type="mono"],
html {
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ---- Friendlier voice: no caps anywhere ----------------- */
.t-eyebrow,
.lang-switch button,
.hero__corner-tag,
.hero__feed-tag,
.hero__feed-label,
.hero__meta,
.marquee__item,
.aud__tab,
.feature__num,
.feature__more,
.stat__label,
.event-row__tag,
.cta__small,
.foot__col h4,
.foot__bot,
.foot__parent-pre,
.dash__table-head,
.pill,
.venue-card__pin,
.artist-card__role,
.artist-card__badge,
.inv-block__label,
.captable__row.head,
.team-card__role,
.tl-item__date,
.field label,
.contact-side h3,
.web3__tag,
.social-card__tag,
.studio__meta .lbl,
.episode__ep,
.timeline__step-tag,
.launch-ribbon__tag,
.passcard__brand,
.event-row__date,
.kbd,
.foot__sms-pre,
.feature__num,
.journey__step-tag,
.hero__feed-label,
.store-btn--mini,
.store-btn__small,
.web3__tag,
.social-card__tag,
.soon-tag,
.trust__card-tag,
.trust__card-eyebrow,
.sms-band__tag {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 500;
}

/* Quieter eyebrow style — friendlier */
.t-eyebrow {
  font-size: 13px;
  color: var(--fg-mute);
  font-weight: 500;
  letter-spacing: 0 !important;
}
.t-eyebrow .dot,
.t-eyebrow span[style*="color:var(--red)"] { color: var(--red); }

/* Feature numbers should still feel like a numeric tag, but not screaming */
.feature__num {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mute);
}
.feature__more {
  font-size: 13px;
  color: var(--fg-mute);
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Stat & metric labels */
.stat__label,
.dash__delta,
.dash__crumbs,
.dash__table-head,
.event-row__tag,
.event-row__date,
.tl-item__date {
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 13px;
}

/* Footer column headers — sentence case, no caps */
.foot__col h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  opacity: 0.55;
}

/* Lang switch — sentence case "En / Fr / De" feel */
.lang-switch button {
  font-family: var(--font-body) !important;
  font-size: 12px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Make 'for' text italic in nav */
.nav__for-pre {
  font-style: italic !important;
}

/* ---- de rouge wordmark + product names ------------------ */
.dr-logo,
.dr-logo * {
  font-family: var(--font-brand) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: -0.02em;
}
.dr-logo {
  /* de rouge is never italic, anywhere */
  font-style: normal !important;
}
.dr-logo em,
.dr-logo i {
  font-style: normal !important;
}

/* Anywhere "de rouge" markup appears via the wordmark span */
.scanner__title,
.scanner__title span,
.scanner-teaser__title,
.scanner-teaser__title span,
.dash__crumbs {
  font-style: normal !important;
}

/* Quote — "de rouge" must never be italic; quote body stays normal */
.quote p { font-style: normal; }
.quote footer strong { font-style: normal !important; }

/* Kill any italic on the hero title em fallback that wrapped "de rouge" */
.hero__title em { font-style: normal; }

/* ---- Buttons / chips: softer, friendlier -------------- */
.btn { letter-spacing: 0; }

/* Page-hero h1 already sentence case in markup */
.page-hero h1 { letter-spacing: -0.03em; }

/* Scanner brand line: keep Indivisible on "de rouge", Inter on "Scanner" */
.scanner__title { font-weight: 600; letter-spacing: -0.02em; }
.scanner__title .dr-logo { letter-spacing: -0.02em; }

/* ---- Eyebrow dot pattern: keep small red dot ------------ */
.t-eyebrow .dot { color: var(--red); }

/* ---- Footer mark uses brand font when present ----------- */
.foot__brand .mark.dr-logo { font-family: var(--font-brand); font-weight: 600; }

/* =========================================================
   Member card — glass morphism, cc0000 tinted
   ========================================================= */
.member-card {
  background:
    radial-gradient(160% 120% at 30% 0%,   rgba(204, 0, 0, 0.55) 0%, transparent 52%),
    radial-gradient(100% 80%  at 90% 110%,  rgba(220, 30, 30, 0.35) 0%, transparent 55%),
    rgba(60, 6, 6, 0.82) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 36px 70px rgba(50, 0, 0, 0.50),
    0 8px 24px rgba(0, 0, 0, 0.40) !important;
  border: none !important;
}
.member-card__noise {
  opacity: 0.22 !important;
}

/* =========================================================
   Hero — shrunk, photo-first
   ========================================================= */
.hero {
  min-height: 0 !important;
  padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 96px) !important;
}
.hero__container {
  align-items: center !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  row-gap: 28px !important;
}
.hero__title {
  font-size: clamp(44px, 6vw, 96px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}
.hero__title em { font-style: italic; color: var(--red); }
.hero__lede {
  font-size: clamp(15px, 1.05vw, 18px) !important;
  max-width: 52ch;
  line-height: 1.5;
}
.hero__eyebrow, .hero .t-eyebrow { font-size: 12px; }
.hero__meta { gap: 18px; font-size: 11px; margin-top: 8px; }
.hero__chips { gap: 6px; }

/* Real-photo composition — no bezels, no overlays */
.hero__shots {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1fr;
  gap: 12px;
  height: clamp(360px, 44vw, 520px);
  width: 100%;
}
.hero__shot {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
}
.hero__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__shot--lead { grid-column: 1; transform: translateY(0); }
.hero__shot--side {
  grid-column: 2;
  transform: translateY(28px);
}

/* Kill the old synthetic phones if they still get rendered anywhere */
.hero__phones,
.hero__corner-tag { display: none !important; }

/* Hide the dramatic bg-mesh on the now-shorter hero so it doesn't loom */
.hero__bg-mesh { opacity: 0.4 !important; }

@media (max-width: 980px) {
  .hero__container { grid-template-columns: 1fr !important; }
  .hero__shots {
    height: auto;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16/10;
  }
  .hero__shot--side { transform: translateY(16px); }
}
@media (max-width: 600px) {
  .hero__shots { grid-template-columns: 1fr; aspect-ratio: 4/5; }
  .hero__shot--side { display: none; }
}

/* =========================================================
   Product section — slogan + clean phone + real photo
   Photos left, copy right
   ========================================================= */
.product__grid {
  grid-template-columns: 1.2fr 1fr !important;
}
.product__media { order: -1; }
.product__copy  { order:  1; }

.product__slogan {
  font-size: clamp(48px, 5.5vw, 88px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  font-weight: 700;
  margin-top: 8px;
}
.product__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: clamp(440px, 50vw, 640px);
}
.product__phone {
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 32%;
  min-width: 240px;
  max-width: 280px;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  border: 6px solid #1a1a1a;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 2;
  aspect-ratio: 9/19.5;
}
.product__phone video,
.product__phone img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product__photo {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
  width: 85%;
  height: 100%;
}
.product__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  .product__grid { grid-template-columns: 1fr !important; }
  .product__media { flex-direction: column; height: auto; align-items: center; gap: 32px; justify-content: flex-start; order: 0; }
  .product__copy  { order: 0; }
  .product__phone { position: relative; left: auto; bottom: auto; width: 60%; z-index: 2; margin-bottom: -60px; }
  .product__photo { width: 100%; aspect-ratio: 4/5; height: auto; z-index: 1; }
}


/* =========================================================
   Audience panel visuals — use real photos as full-bleed
   ========================================================= */
.aud__panel-visual {
  aspect-ratio: 5/6;
  background: var(--bg-card);
}
.aud__panel-visual img {
  object-fit: cover;
  width: 100%; height: 100%;
}