:root{
  --type-body:17px;
  --type-body-leading:1.68;
  --type-hero:clamp(50px,5.4vw,82px);
  --type-brand:clamp(46px,5vw,72px);
  --type-section:clamp(38px,3.9vw,54px);
  --type-card:clamp(27px,2.3vw,36px);
  --type-card-feature:clamp(34px,3.3vw,48px);
  --type-subhead:clamp(24px,2vw,31px);
  --type-lead:clamp(19px,1.45vw,22px);
  --type-support:clamp(17px,1.2vw,19px);
  --type-label:10px;
  --type-meta:10px;
}

body{
  font-size:var(--type-body);
  line-height:var(--type-body-leading);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Navigation and UI text */
.site-nav{
  font-size:11px;
  letter-spacing:.07em;
  font-weight:500;
  text-transform:none;
}
.button{
  font-size:10px;
  letter-spacing:.1em;
  font-weight:600;
}
.eyebrow,
.section-number{
  font-size:var(--type-label);
  letter-spacing:.14em;
  line-height:1.35;
  font-weight:600;
}
.photo-index,
.hero-vertical,
.hero-player-label span,
.feature-player-top,
.player-link,
.track-number,
.track-foot,
.story-label,
.story-signature small,
.sync-pills span,
.sync-row span,
.sync-row button,
.sync-cta,
.professional-heading>span,
.inquiry-form label>span,
.footer,
.panel-number,
.panel-theme,
.panel-meta span,
.panel-actions button,
.panel-actions a{
  letter-spacing:.085em;
}

/* Display voice */
.hero h1,
.catalog-head h2,
.brand-break h2,
.story-copy h2,
.sync-title-row h2,
.connect-top h2,
.track-panel h2,
.track-card h3,
.mailing h3,
.professional h3{
  font-family:Manrope,Inter,Arial,sans-serif;
  font-optical-sizing:auto;
}
.hero h1{
  font-size:var(--type-hero);
  line-height:.99;
  letter-spacing:-.04em;
  font-weight:700;
  text-transform:none;
  max-width:10ch;
}
.hero h1 span+span{margin-top:.02em}
.hero-lead{
  font-size:var(--type-lead);
  line-height:1.55;
  font-weight:400;
  max-width:38rem;
}

.catalog-head h2,
.story-copy h2,
.sync-title-row h2,
.connect-top h2{
  font-size:var(--type-section);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:600;
}
.catalog-head>p,
.sync-title-row>p,
.story-copy>p:not(.story-lead),
.professional-heading p{
  font-size:var(--type-support);
  line-height:1.72;
}
.catalog-head>p,
.sync-title-row>p{
  max-width:36rem;
}
.story-lead{
  font-size:var(--type-lead);
  line-height:1.58;
  font-weight:500;
}

/* MRE brand statement */
.brand-break{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:clamp(44px,6vw,96px);
  align-items:center;
  min-height:0;
  padding:clamp(64px,6vw,88px) max(var(--gutter),calc((100vw - var(--content))/2));
  overflow:hidden;
}
.brand-break-inner{
  width:auto;
  max-width:700px;
  margin:0;
  position:relative;
  z-index:2;
}
.brand-break h2{
  font-size:var(--type-brand);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:700;
  text-transform:none;
  max-width:10ch;
  margin:18px 0 22px;
}
.brand-break-inner>span{
  font-size:var(--type-label);
  letter-spacing:.14em;
}
.brand-break p{
  font-size:clamp(18px,1.35vw,20px);
  line-height:1.58;
  max-width:36rem;
}
.brand-break img{
  position:static;
  width:min(100%,460px);
  max-height:360px;
  justify-self:end;
  align-self:center;
  object-fit:contain;
  margin:0;
  opacity:.72;
  filter:saturate(.9) contrast(1.06);
  mix-blend-mode:screen;
}

/* Music cards */
.track-card h3{
  font-size:var(--type-card);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:600;
  overflow-wrap:normal;
}
.track-card:nth-child(1) h3{
  font-size:var(--type-card-feature);
  line-height:1.03;
  max-width:88%;
}
.track-theme{
  font-size:12px;
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:none;
  font-weight:500;
}
.track-foot{
  font-size:10px;
  letter-spacing:.055em;
  font-weight:500;
}
.track-foot strong{font-weight:600}
.track-number{font-size:10px;letter-spacing:.1em;font-weight:600}

/* Player */
.hero-player-label strong{
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:600;
}
.hero-player-label span,
.feature-player-top,
.player-link{
  font-size:10px;
  font-weight:500;
}

/* Story / sync / connect details */
.story-signature span{
  font-size:25px;
  letter-spacing:-.025em;
}
.sync-pills span{
  font-size:10px;
  letter-spacing:.045em;
  font-weight:600;
  text-transform:none;
}
.sync-row strong{
  font-size:16px;
  line-height:1.4;
  font-weight:600;
}
.sync-row span,
.sync-row button{
  font-size:10px;
  letter-spacing:.045em;
}
.sync-cta{
  font-size:11px;
  letter-spacing:.07em;
}
.mailing h3,
.professional h3{
  font-size:var(--type-subhead);
  line-height:1.14;
  letter-spacing:-.025em;
  font-weight:600;
}
.email-form input,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea{
  font-size:15px;
  line-height:1.5;
}
.inquiry-form label>span,
.professional-heading>span{
  font-size:10px;
  letter-spacing:.08em;
  font-weight:600;
}
.form-status{font-size:14px}
.footer{
  font-size:10px;
  letter-spacing:.06em;
  line-height:1.6;
}

/* Drawer */
.track-panel h2{
  font-size:clamp(36px,3.7vw,48px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:600;
}
.panel-theme{font-size:12px;letter-spacing:.02em;text-transform:none}
.track-panel>p:last-of-type{font-size:17px;line-height:1.7}
.panel-meta span,.panel-actions button,.panel-actions a{font-size:10px;letter-spacing:.055em}

@media(max-width:1180px){
  :root{
    --type-hero:clamp(48px,5.5vw,70px);
    --type-section:clamp(37px,3.8vw,50px);
    --type-brand:clamp(44px,5.5vw,64px);
    --type-support:17px;
  }
  .brand-break{
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
    gap:40px;
  }
  .brand-break img{width:min(100%,380px)}
}

@media(max-width:900px){
  :root{
    --type-body:16.5px;
    --type-hero:clamp(44px,8vw,64px);
    --type-section:clamp(35px,6vw,48px);
    --type-brand:clamp(42px,7vw,58px);
    --type-card:clamp(26px,4.6vw,34px);
    --type-card-feature:clamp(32px,5.4vw,42px);
    --type-support:16.5px;
  }
  .site-nav{font-size:11px;letter-spacing:.06em}
  .hero h1{max-width:10ch}
  .brand-break{
    grid-template-columns:minmax(0,1.15fr) minmax(220px,.65fr);
    padding-block:60px;
    gap:28px;
  }
  .brand-break img{
    width:min(100%,300px);
    opacity:.64;
  }
}

@media(max-width:720px){
  :root{
    --type-body:16px;
    --type-hero:clamp(38px,10.8vw,50px);
    --type-section:clamp(32px,8.5vw,42px);
    --type-brand:clamp(37px,9.5vw,48px);
    --type-card:clamp(25px,7vw,33px);
    --type-card-feature:clamp(28px,7.6vw,36px);
    --type-subhead:clamp(23px,6.5vw,28px);
    --type-lead:18px;
    --type-support:16px;
    --type-label:9px;
  }
  .hero h1{
    line-height:1.01;
    letter-spacing:-.03em;
    max-width:none;
  }
  .hero-lead{font-size:18px;line-height:1.55}
  .button{font-size:10px;letter-spacing:.08em}
  .track-theme{font-size:12px}
  .track-foot{font-size:10px}
  .story-copy>p:not(.story-lead),
  .catalog-head>p,
  .sync-title-row>p,
  .professional-heading p{font-size:16px;line-height:1.68}
  .sync-row strong{font-size:15px}
  .footer{font-size:9px}
  .brand-break{
    grid-template-columns:1fr;
    gap:30px;
    padding:54px var(--gutter);
  }
  .brand-break-inner{max-width:100%}
  .brand-break h2{max-width:11ch}
  .brand-break p{font-size:17px}
  .brand-break img{
    width:min(78vw,320px);
    justify-self:start;
    opacity:.6;
  }
}

@media(max-width:390px){
  :root{
    --type-hero:clamp(36px,10.5vw,44px);
    --type-section:clamp(30px,8vw,38px);
  }
  .eyebrow,.section-number{letter-spacing:.11em}
}