/* ==========================================================================
   TopMusic Media Kit — media.topmusic.co
   Self-contained: this site is a separate Pages project from tools/, so it
   carries its own copy of the fonts rather than hotlinking across domains.
   Colours are the brand guide values (Topmusic_Brand_Guide_V1.pdf, Dec 2019).
   ========================================================================== */

@font-face{ font-family:'Recoleta'; src:url('fonts/recoleta.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Flama'; src:url('fonts/flama-400-c.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Flama'; src:url('fonts/flama-700-c.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Flama'; src:url('fonts/flama-900-c.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap; }

:root{
  --midnight:#121163;
  --almost-white:#f1f2f2;
  --purple-rain:#823acb;
  --cool-teal:#3accc3;
  --teal-dark:#237a75;
  --strawberry:#e46c71;
  --mid-grey:#58595b;
  --line:#dfe0e0;
  --straw-soft:#fceced; --purple-soft:#f3eafb; --teal-soft:#e4f7f5;
  --gold:#F5B301;   /* stars only: the brand has no gold */
  --cool-rain:linear-gradient(90deg,var(--purple-rain),var(--cool-teal));
  --serif:'Recoleta',Georgia,serif;
  --sans:'Flama',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow:0 10px 30px rgba(18,17,99,.08), 0 2px 8px rgba(18,17,99,.05);
  --wrap:1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  margin:0; background:#fff; color:var(--mid-grey);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; color:var(--midnight);
  line-height:1.1; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(38px,6vw,68px); }
h2{ font-size:clamp(28px,4vw,44px); }
h3{ font-size:clamp(20px,2.4vw,26px); }
h4{ font-size:19px; }
p{ margin:0 0 1em; }
a{ color:var(--teal-dark); }
img{ max-width:100%; height:auto; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:760px; }
.eyebrow{ font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  font-size:12px; color:var(--teal-dark); margin:0 0 14px; }
.eyebrow.inv{ color:var(--cool-teal); }
.lead{ font-size:clamp(18px,2.2vw,21px); }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--midnight);
  border-bottom:1px solid rgba(255,255,255,.12); }
.nav-in{ max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:22px; height:64px; }
.nav img{ height:26px; width:auto; flex:none; }
.nav-links{ display:flex; gap:20px; margin-left:auto; overflow-x:auto;
  scrollbar-width:none; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{ color:rgba(255,255,255,.82); text-decoration:none; font-size:14px;
  font-weight:700; white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover,.nav-links a.on{ color:#fff; border-bottom-color:var(--cool-teal); }
.nav-links a.cta{ color:var(--midnight); background:var(--cool-teal);
  padding:7px 16px; border-radius:40px; border:0; }
.nav-links a.cta:hover{ background:#fff; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-weight:700; font-size:16px; text-decoration:none; border-radius:40px;
  padding:15px 32px; border:0; cursor:pointer; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-teal{ background:var(--cool-teal); color:var(--midnight);
  box-shadow:0 10px 24px rgba(58,204,195,.35); }
.btn-coral{ background:var(--strawberry); color:#fff;
  box-shadow:0 10px 24px rgba(228,108,113,.35); }
.btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55);
  padding:13px 28px; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-outline{ background:transparent; color:var(--midnight);
  border:2px solid var(--midnight); padding:13px 28px; }

/* ---------- sections ---------- */
section{ padding:clamp(56px,7vw,92px) 0; }
section.tint{ background:var(--almost-white); }
section.dark{ background:var(--midnight); color:rgba(255,255,255,.85); }
section.dark h2,section.dark h3,section.dark h4{ color:#fff; }
.section-head{ max-width:720px; margin-bottom:44px; }

/* ---------- hero ---------- */
.hero{ background:var(--midnight); color:#fff; padding:clamp(52px,7vw,84px) 0 0;
  position:relative; overflow:hidden; }
.hero h1{ color:#fff; }
.hero .lead{ color:rgba(255,255,255,.8); max-width:540px; }
/* Text is centred against the rocket rather than sitting at its base, and the
   copy block is nudged up so the headline lines up with the rocket's nose cone
   instead of its exhaust. The rocket still lands on the gradient rule. */
.hero-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center; }
.hero-grid > div{ padding-bottom:6%; }
.hero-rocket{ max-width:210px; margin:0 auto -6px; display:block; align-self:end; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }
.hero-rule{ height:6px; background:var(--cool-rain); }

/* headline stat strip */
.strip{ background:var(--almost-white); border-bottom:1px solid var(--line); }
.strip-in{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:30px 0 28px; text-align:center; }
.strip .art{ display:block; height:84px; width:auto; max-width:120px; margin:0 auto 14px;
  object-fit:contain; }
.strip .n{ font-family:var(--serif); font-size:clamp(26px,3.4vw,38px);
  color:var(--midnight); line-height:1; }
.strip .l{ font-size:13px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--mid-grey); margin-top:8px; }

/* ---------- cards & stats ---------- */
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:26px; box-shadow:var(--shadow); }
section.tint .card{ box-shadow:none; }
.card h3{ margin-bottom:10px; }
.card p:last-child{ margin-bottom:0; }

.stat{ text-align:center; padding:22px 14px; }
.stat .n{ font-family:var(--serif); font-size:clamp(30px,4vw,44px);
  color:var(--midnight); line-height:1; }
section.dark .stat .n{ color:var(--cool-teal); }
.stat .l{ font-size:14px; margin-top:10px; color:var(--mid-grey); }
section.dark .stat .l{ color:rgba(255,255,255,.75); }
.source{ font-size:13px; color:var(--mid-grey); margin-top:26px; }
section.dark .source{ color:rgba(255,255,255,.55); }

/* bars */
.bars{ display:grid; gap:14px; max-width:420px; }
.bar-row{ display:grid; grid-template-columns:104px 1fr 46px; align-items:center; gap:12px;
  font-size:15px; }
.bar-row > span:first-child{ display:flex; align-items:center; gap:9px; }
.glyph{ width:20px; height:20px; color:var(--strawberry); flex:none; }
.bar{ height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.bar span{ display:block; height:100%; background:var(--cool-teal); border-radius:6px; }

/* list */
.ticks{ list-style:none; padding:0; margin:0; }
.ticks li{ position:relative; padding-left:28px; margin-bottom:12px; }
.ticks li::before{ content:""; position:absolute; left:0; top:9px; width:11px; height:11px;
  border-radius:50%; background:var(--cool-teal); }

/* ---------- testimonials: speech bubbles, as in the printed kit ---------- */
.testimonial{ margin:0; }
.bubble{ position:relative; margin:0 0 30px; padding:26px 30px;
  background:#fff; border:3px solid var(--cool-teal); border-radius:24px;
  text-align:center; }
.bubble p{ margin:0; font-size:17px; line-height:1.7; color:var(--mid-grey); }
/* The tail: a square turned 45 degrees, bordered on the two sides that face
   out, so it reads as one continuous outline with the bubble. */
.bubble::after{ content:""; position:absolute; right:58px; bottom:-14px;
  width:24px; height:24px; background:#fff;
  border-right:3px solid var(--cool-teal); border-bottom:3px solid var(--cool-teal);
  transform:rotate(45deg); }
.who{ display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding-right:24px; }
.who span{ text-align:right; font-weight:700; font-size:13px; line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal-dark); }
.who img{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none;
  filter:grayscale(1); border:3px solid #fff; box-shadow:var(--shadow); }

/* ---------- rate table ---------- */
.rate-group{ border:1px solid var(--line); border-radius:16px; background:#fff;
  padding:24px 26px; margin-bottom:18px; }
.rate-group h3{ margin-bottom:4px; }
.rate-note{ font-size:15px; margin:0 0 16px; }
.rate-row{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); }
.rate-row .item{ flex:1 1 260px; }
.rate-row .price{ font-family:var(--serif); font-size:24px; color:var(--midnight);
  white-space:nowrap; }
.rate-row .unit{ font-size:14px; color:var(--mid-grey); white-space:nowrap; }

/* past sponsors: a logo wall. Greyscale keeps ten different brand palettes
   from fighting each other; hovering a logo shows its real colours. */
.sponsors{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.logo-tile{ display:flex; align-items:center; justify-content:center; height:96px;
  padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.logo-tile img{ max-height:64px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1) contrast(1.1); opacity:.8; transition:filter .2s, opacity .2s; }
.logo-tile:hover img{ filter:none; opacity:1; }
.logo-text{ font-weight:700; color:var(--midnight); }

/* illustrations */
.ill{ display:block; margin:0 auto; }
.ill-sm{ max-width:180px; }
.ill-md{ max-width:260px; }

/* ---------- TBC marker: a missing number must be impossible to miss ---------- */
.tbc{ display:inline-block; background:#FFF4D6; color:#7A5A00;
  border:1px dashed #D9A400; border-radius:6px; padding:1px 9px;
  font-family:var(--sans); font-size:.62em; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; vertical-align:middle; }
.tbc-banner{ background:#FFF4D6; border-bottom:1px solid #D9A400; color:#7A5A00;
  font-size:14px; padding:10px 0; }
.tbc-banner strong{ color:#5A4200; }

/* ---------- footer ---------- */
.foot{ background:var(--midnight); color:rgba(255,255,255,.7); padding:44px 0;
  font-size:15px; }
.foot img{ height:28px; margin-bottom:18px; }
.foot a{ color:var(--cool-teal); }

/* ---------- icons: tinted badges from assets/icons.svg ---------- */
.ico{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:50%; margin:0 auto 14px; }
.ico svg{ width:28px; height:28px; }
.t-straw{ background:var(--straw-soft); color:var(--strawberry); }
.t-purple{ background:var(--purple-soft); color:var(--purple-rain); }
.t-teal{ background:var(--teal-soft); color:var(--teal-dark); }
/* On the midnight band the soft tints glare, so badges go translucent and the
   icon carries the colour. */
section.dark .ico{ background:rgba(255,255,255,.07); }
section.dark .t-teal{ color:var(--cool-teal); }
section.dark .t-purple{ color:#b98ae8; }
.card .ico{ margin:0 0 14px; }
.stat.card .ico, .stat .ico{ margin-left:auto; margin-right:auto; }

/* star rating: grey row underneath, gold row clipped to the score on top */
.stars{ position:relative; display:inline-block; height:28px; margin:14px auto 28px; line-height:0; }
.stars span{ display:flex; gap:3px; white-space:nowrap; }
.stars svg{ width:28px; height:28px; flex:none; }
.stars-base{ color:#dcdde0; }
.stars-fill{ position:absolute; top:0; left:0; overflow:hidden; color:var(--gold); }

/* social: each platform in its own colour */
.brand{ display:block; width:30px; height:30px; margin:0 auto 12px; }
.social-stat{ padding:16px 10px; }
.social-stat .n{ font-size:clamp(24px,3vw,32px); }
.social-stat:nth-child(1) .brand, .social-stat:nth-child(2) .brand{ color:#FF3131; }
.social-stat:nth-child(3) .brand, .social-stat:nth-child(4) .brand{ color:#4C8DFF; }
.social-stat:nth-child(5) .brand{ color:#F0609C; }
.social-stat:nth-child(6) .brand{ color:#F0525F; }

/* podcast show cards: host photo beside the show's own logo */
.show-top{ display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.show .host{ width:112px; height:112px; border-radius:50%; flex:none; }
.show-logo{ max-height:104px; max-width:calc(100% - 132px); width:auto; object-fit:contain; }

/* a section heading with an illustration beside it */
.head-art{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
.head-art img{ max-width:200px; height:auto; }
section.dark .head-art img{ max-width:170px; }

/* the example banner ad */
.banner-example{ margin:18px 0 0; }
.banner-example img{ display:block; width:100%; height:auto; border-radius:10px;
  border:2px dashed var(--cool-teal); }
.banner-example figcaption{ font-size:13px; color:var(--mid-grey); margin-top:8px; }

/* hero pull quote: the short version of Mike Grande's testimonial */
.hero-quote{ display:flex; align-items:center; gap:16px; margin:34px 0 0; max-width:540px;
  padding:16px 20px; border-left:3px solid var(--strawberry);
  background:rgba(255,255,255,.06); border-radius:0 14px 14px 0; }
.hero-quote img{ width:56px; height:56px; border-radius:50%; flex:none; filter:grayscale(1);
  border:2px solid rgba(255,255,255,.8); }
.hero-quote p{ margin:0; color:#fff; font-size:16px; line-height:1.5; }
.hero-quote cite{ display:block; margin-top:6px; font-style:normal; font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cool-teal); }

/* the Rate Card page has no rocket to give its hero depth, so it needs its own
   bottom padding or the buttons sit on the gradient rule */
.hero-plain{ padding-bottom:0; }
.hero-plain .hero-actions{ margin-bottom:72px; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-rocket{ max-width:170px; margin-bottom:0; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:1fr; }
  .strip-in{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .sponsors{ grid-template-columns:repeat(3,1fr); }
  .head-art{ grid-template-columns:1fr; }
  .head-art img{ max-width:150px; margin:0 auto; }
}
@media (max-width:620px){
  .g2{ grid-template-columns:1fr; }
  .nav img{ height:22px; }
  .sponsors{ grid-template-columns:repeat(2,1fr); }
  .show-top{ flex-direction:column; align-items:flex-start; }
  .show-logo{ max-width:100%; }
  .strip .art{ height:64px; }
}

/* ---------- print: the page IS the PDF ---------- */
@media print{
  @page{ size:A4; margin:14mm; }
  body{ font-size:11pt; }
  .nav,.hero-actions,.no-print,.tbc-banner{ display:none !important; }
  section{ padding:18pt 0; break-inside:avoid; }
  section.dark,.hero{ background:#fff !important; color:#000 !important; }
  section.dark h2,section.dark h3,.hero h1{ color:var(--midnight) !important; }
  section.dark .stat .n{ color:var(--midnight) !important; }
  section.dark .stat .l,section.dark .source,.hero .lead{ color:#444 !important; }
  .card,.rate-group,.testimonial{ box-shadow:none; break-inside:avoid; }
  h2{ break-after:avoid; }
  a{ color:#000; text-decoration:none; }
  .foot{ background:#fff !important; color:#000 !important; }
}