/* ============================================================
   FanChants — Data Catalogue 2026
   Brochure-specific styles.
   A4 landscape · 297mm × 210mm.
   Each page uses CSS grid (header / body / foot) — no absolute
   positioning, no overlaps. Print-ready as a PDF.
   ============================================================ */

@page { size: A4 landscape; margin: 0; }

* { box-sizing: border-box; }

/* Strip default heading + paragraph margins inside the brochure
   so the layout grids stay predictable. */
.brochure h1,
.brochure h2,
.brochure h3,
.brochure h4,
.brochure p,
.brochure ul,
.brochure ol,
.brochure figure,
.brochure blockquote { margin: 0; padding: 0; }

html, body {
  background: #0a0a0a;
  color: var(--fc-white);
  font-family: var(--fc-font-body);
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.brochure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14mm;
  padding: 22mm 16mm 28mm;
}

/* Screen-only zoom so a full A4 landscape page fits narrower viewports.
   Print is unaffected. */
@media screen and (max-width: 1300px) { .brochure { zoom: 0.85; } }
@media screen and (max-width: 1100px) { .brochure { zoom: 0.72; } }
@media screen and (max-width: 900px)  { .brochure { zoom: 0.58; } }
@media screen and (max-width: 700px)  { .brochure { zoom: 0.44; } }
@media screen and (max-width: 500px)  { .brochure { zoom: 0.34; } }

/* --------------------- Page shell --------------------- */
.page {
  width: 297mm;
  height: 210mm;
  background: var(--fc-black);
  color: var(--fc-white);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6mm 22mm rgba(0,0,0,.55);
  break-after: page;
  page-break-after: always;

  padding: 12mm 14mm 8mm;
  display: grid;
  grid-template-rows: 12mm 1fr 6mm;
  gap: 6mm;
}
.page:last-child { break-after: auto; page-break-after: auto; }

.page--graphite { background: var(--fc-graphite); }
.page--electric { background: var(--fc-accent); }
.page--fog      { background: var(--fc-fog); color: var(--fc-black); }

/* Page chrome — header (top row) and foot (bottom row) */
.page__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10mm;
}
.page__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}
.page--fog .page__foot { color: rgba(0,0,0,0.45); }
.page__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.logo-mark {
  height: 11mm;
  width: auto;
  display: block;
}
.logo-mark--lg { height: 18mm; }

/* --------------------- Type system --------------------- */
.eyebrow {
  font-family: var(--fc-font-mono);
  font-size: 2.8mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-volt);
}
.eyebrow--electric { color: var(--fc-accent); }
.eyebrow--bubblegum { color: var(--fc-bubblegum); }
.eyebrow--white { color: var(--fc-white); }
.eyebrow--black { color: var(--fc-black); }
.eyebrow--mute-light { color: rgba(255,255,255,0.5); }
.eyebrow--mute-dark  { color: rgba(0,0,0,0.5); }

.hero {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 44mm;
  line-height: 0.86;
  letter-spacing: -0.025em;
}
.hero--sm { font-size: 30mm; }

.section-title {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 20mm;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.section-title--lg { font-size: 26mm; }
.section-title--sm { font-size: 14mm; }

.subhead {
  font-family: var(--fc-font-body);
  font-size: 4.6mm;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  max-width: 200mm;
}
.subhead--dark { color: rgba(0,0,0,0.72); }

.body {
  font-family: var(--fc-font-body);
  font-size: 3.2mm;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}
.body--dark { color: rgba(0,0,0,0.72); }

.mono {
  font-family: var(--fc-font-mono);
  font-size: 2.6mm;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.mono--label {
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
}
.mono--label-dark { color: rgba(0,0,0,0.5); }

/* Statistic numerals */
.stat-num {
  font-family: var(--fc-font-display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-num--volt      { color: var(--fc-volt); }
.stat-num--electric  { color: var(--fc-accent); }
.stat-num--orange    { color: var(--fc-orange); }
.stat-num--bubblegum { color: var(--fc-bubblegum); }
.stat-num--white     { color: var(--fc-white); }
.stat-num--black     { color: var(--fc-black); }

/* --------------------- Soundwave (brand DNA) --------------------- */
.swave {
  display: flex;
  align-items: flex-end;
  gap: 0.8mm;
  height: 16mm;
}
.swave > i {
  display: block;
  width: 1.4mm;
  background: var(--swave-color, var(--fc-accent));
  animation: swavePulse 1400ms var(--fc-ease-sharp) infinite;
  animation-delay: var(--d, 0ms);
  min-height: 1mm;
  transform-origin: bottom;
}
@keyframes swavePulse {
  0%, 100% { height: 14%; }
  50% { height: 100%; }
}

@media print {
  .swave > i {
    animation: none !important;
    /* Deterministic static heights via nth-child so the print
       freeze is a clean rhythmic pattern, not a random snapshot. */
  }
  /* 12-step repeating height pattern, evocative of an audio waveform. */
  .swave > i:nth-child(12n+1)  { height: 38% !important; }
  .swave > i:nth-child(12n+2)  { height: 72% !important; }
  .swave > i:nth-child(12n+3)  { height: 54% !important; }
  .swave > i:nth-child(12n+4)  { height: 92% !important; }
  .swave > i:nth-child(12n+5)  { height: 28% !important; }
  .swave > i:nth-child(12n+6)  { height: 64% !important; }
  .swave > i:nth-child(12n+7)  { height: 100% !important; }
  .swave > i:nth-child(12n+8)  { height: 46% !important; }
  .swave > i:nth-child(12n+9)  { height: 80% !important; }
  .swave > i:nth-child(12n+10) { height: 34% !important; }
  .swave > i:nth-child(12n+11) { height: 58% !important; }
  .swave > i:nth-child(12n+12) { height: 76% !important; }

  .brochure { padding: 0; gap: 0; }
  .page { box-shadow: none; }
  .no-print { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .swave > i { animation: none !important; }
  /* Apply the same deterministic heights for reduced-motion users on screen too */
  .swave > i:nth-child(12n+1)  { height: 38%; }
  .swave > i:nth-child(12n+2)  { height: 72%; }
  .swave > i:nth-child(12n+3)  { height: 54%; }
  .swave > i:nth-child(12n+4)  { height: 92%; }
  .swave > i:nth-child(12n+5)  { height: 28%; }
  .swave > i:nth-child(12n+6)  { height: 64%; }
  .swave > i:nth-child(12n+7)  { height: 100%; }
  .swave > i:nth-child(12n+8)  { height: 46%; }
  .swave > i:nth-child(12n+9)  { height: 80%; }
  .swave > i:nth-child(12n+10) { height: 34%; }
  .swave > i:nth-child(12n+11) { height: 58%; }
  .swave > i:nth-child(12n+12) { height: 76%; }
}

/* --------------------- Stat strip --------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
  border-top: 0.4mm solid rgba(255,255,255,0.16);
  padding-top: 5mm;
}
.stat-strip__num {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 16mm;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--fc-volt);
  font-variant-numeric: tabular-nums;
}
.stat-strip__num small {
  font-size: 9mm;
  color: var(--fc-volt);
}
.stat-strip__label {
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-top: 2mm;
  display: block;
}

/* --------------------- Value-prop tiles --------------------- */
.tiles {
  display: grid;
  gap: 4mm;
  flex: 1;
  min-height: 0;
}
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }

.tile {
  background: rgba(255,255,255,0.04);
  border: 0.3mm solid rgba(255,255,255,0.08);
  padding: 6mm 6mm 7mm;
  display: flex;
  flex-direction: column;
  gap: 3mm;
  min-height: 0;
  overflow: hidden;
}
.tile__icon {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 14mm;
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.tile__title {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 7mm;
  line-height: 0.96;
  letter-spacing: -0.015em;
}
.tile__body {
  font-family: var(--fc-font-body);
  font-size: 3.2mm;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
  margin-top: auto;
}
.tile--accent-electric  .tile__icon { color: var(--fc-accent); }
.tile--accent-volt      .tile__icon { color: var(--fc-volt); }
.tile--accent-orange    .tile__icon { color: var(--fc-orange); }
.tile--accent-bubblegum .tile__icon { color: var(--fc-bubblegum); }

/* --------------------- Region cards (page 3) --------------------- */
.regions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4mm;
  flex: 1;
  min-height: 0;
}
.region {
  background: rgba(255,255,255,0.03);
  border: 0.3mm solid rgba(255,255,255,0.08);
  padding: 5mm 6mm;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.region__label {
  font-family: var(--fc-font-mono);
  font-size: 2.8mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-volt);
}
.region__num {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 17mm;
  line-height: 0.88;
  letter-spacing: -0.025em;
}
.region__desc {
  font-family: var(--fc-font-mono);
  font-size: 2.6mm;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.region__meta {
  display: flex;
  gap: 6mm;
  margin-top: auto;
  border-top: 0.3mm solid rgba(255,255,255,0.1);
  padding-top: 2.5mm;
}
.region__meta-num {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 5.5mm;
  line-height: 1;
}
.region__meta-label {
  font-family: var(--fc-font-mono);
  font-size: 2.1mm;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 1mm;
  display: block;
}

/* --------------------- Stacked theme bar (page 4) --------------------- */
.themebar {
  display: flex;
  width: 100%;
  height: 20mm;
  border: 0.4mm solid rgba(255,255,255,0.5);
  margin-top: 4mm;
}
.themebar__seg {
  position: relative;
  border-right: 0.4mm solid rgba(255,255,255,0.5);
  padding: 3mm 4mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.themebar__seg:last-child { border-right: 0; }
.themebar__pct {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 6mm;
  line-height: 1;
}
.themebar__name {
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.themelist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm 8mm;
  margin-top: 5mm;
}
.themelist__row .name {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 6mm;
  line-height: 1;
}
.themelist__row .desc {
  font-family: var(--fc-font-body);
  font-size: 3mm;
  line-height: 1.4;
  margin-top: 1.5mm;
}

/* --------------------- Leaderboard (page 5) --------------------- */
.lboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10mm;
}
.lboard__row {
  display: grid;
  grid-template-columns: 7mm 1fr auto;
  align-items: baseline;
  gap: 3mm;
  padding: 1.4mm 0;
  border-bottom: 0.3mm solid rgba(255,255,255,0.08);
}
.lboard__rank {
  font-family: var(--fc-font-mono);
  font-size: 2.8mm;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--fc-volt);
}
.lboard__name {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 5mm;
  line-height: 1;
  letter-spacing: -0.015em;
}
.lboard__num {
  font-family: var(--fc-font-mono);
  font-size: 3mm;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

/* --------------------- Trusted / press (page 6, fog bg) --------------------- */
.client-grid {
  display: grid;
  grid-template-columns: 28mm 1fr;
  gap: 4mm 8mm;
  align-items: baseline;
  padding: 5mm 0;
  border-bottom: 0.3mm solid rgba(0,0,0,0.16);
}
.client-grid:first-of-type { border-top: 0.3mm solid rgba(0,0,0,0.16); }
.client-grid__cat {
  font-family: var(--fc-font-mono);
  font-size: 2.6mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0,0,0,0.55);
}
.client-grid__list {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 7mm;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fc-black);
  display: flex;
  flex-wrap: wrap;
  gap: 1mm 4mm;
  align-items: baseline;
}
.client-grid__list .dot { color: var(--fc-accent); }

.press {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
}
.press__item {
  border: 0.3mm solid rgba(0,0,0,0.12);
  padding: 5mm;
  display: flex;
  flex-direction: column;
  gap: 2mm;
  background: rgba(255,255,255,0.5);
}
.press__source {
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-accent);
}
.press__quote {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 4.6mm;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fc-black);
}

/* --------------------- Pricing tiers (page 7) --------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
}
.tier {
  border: 0.3mm solid rgba(255,255,255,0.12);
  padding: 6mm;
  display: flex;
  flex-direction: column;
  gap: 3mm;
  background: rgba(255,255,255,0.02);
}
.tier__label {
  font-family: var(--fc-font-mono);
  font-size: 2.6mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-volt);
}
.tier__band {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 12mm;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.tier__use {
  font-family: var(--fc-font-mono);
  font-size: 2.5mm;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
}
.tier__detail {
  font-family: var(--fc-font-body);
  font-size: 3mm;
  line-height: 1.4;
  color: rgba(255,255,255,0.65);
  margin-top: auto;
}
.tier--accent .tier__band { color: var(--fc-volt); }

.pricing-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  margin-top: 5mm;
  padding-top: 5mm;
  border-top: 0.3mm solid rgba(255,255,255,0.16);
}
.rule {
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
}
.rule__label {
  font-family: var(--fc-font-mono);
  font-size: 2.4mm;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
}
.rule__value {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 7mm;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.rule__value small {
  font-family: var(--fc-font-body);
  font-size: 3mm;
  line-height: 1.4;
  color: rgba(255,255,255,0.65);
  display: block;
  margin-top: 1.5mm;
  letter-spacing: 0;
  font-weight: 400;
}

/* --------------------- Contact (page 8) --------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm;
  border-top: 0.4mm solid rgba(255,255,255,0.16);
  padding-top: 6mm;
}
.contact-col h4 {
  font-family: var(--fc-font-mono);
  font-size: 2.8mm;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fc-volt);
  margin: 0 0 3mm !important;
}
.contact-col .line {
  display: block;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 7mm;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fc-white);
  text-decoration: none;
  margin-bottom: 2mm;
}
.contact-col .note {
  display: block;
  font-family: var(--fc-font-body);
  font-size: 3.2mm;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  margin-top: 1mm;
}

/* --------------------- Promise strip (used on multiple pages) --------------------- */
.promise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8mm;
  padding: 6mm 8mm;
  background: var(--fc-accent);
  color: var(--fc-white);
}
.promise__lead {
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 8mm;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 160mm;
}
.promise__mark {
  font-family: var(--fc-font-mono);
  font-size: 2.8mm;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fc-bubblegum);
  text-align: right;
}
.promise__mark b {
  display: block;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 9mm;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fc-white);
  margin-top: 1mm;
}

/* --------------------- Action bar (screen only) --------------------- */
.actionbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.actionbar button {
  background: var(--fc-accent);
  color: var(--fc-white);
  font-family: var(--fc-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  border-radius: 2px;
  padding: 14px 22px;
  cursor: pointer;
  transition: filter var(--fc-t-fast) var(--fc-ease-sharp),
              transform var(--fc-t-instant) var(--fc-ease-sharp);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.actionbar button:hover { filter: brightness(.88); }
.actionbar button:active { transform: scale(0.97); }
.actionbar button.ghost {
  background: rgba(255,255,255,0.1);
  color: var(--fc-white);
}

/* --------------------- Utility --------------------- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.center { align-items: center; }
.grow { flex: 1; min-height: 0; }
.gap-2 { gap: 2mm; } .gap-3 { gap: 3mm; } .gap-4 { gap: 4mm; }
.gap-6 { gap: 6mm; } .gap-8 { gap: 8mm; }
.mt-3 { margin-top: 3mm; } .mt-4 { margin-top: 4mm; }
.mt-5 { margin-top: 5mm; } .mt-6 { margin-top: 6mm; }
.mt-8 { margin-top: 8mm; }
.text-electric { color: var(--fc-accent); }
.text-volt { color: var(--fc-volt); }
.text-orange { color: var(--fc-orange); }
.text-bubblegum { color: var(--fc-bubblegum); }
.text-white { color: var(--fc-white); }
.text-black { color: var(--fc-black); }

/* Pause-motion toggle */
html.paused .swave > i { animation-play-state: paused; }