/* =============================================================================
 * LAYER 2 of 3 — flagship art direction: a cohesive, editorial system layered
 * over the core site.
 *
 * Loads after styles.css and before palette.css. Most of the colour work here
 * (--void/--bone/--ember) is subsequently overridden by palette.css, so this
 * layer's lasting contribution is layout and composition -- header padding,
 * section rhythm, grid proportions -- not colour.
 *
 * Before changing a colour here, check palette.css for the same selector; if it
 * appears there, edit it there instead or the change will not be visible.
 * ========================================================================== */
:root {
  --void: #101819;
  --slate: #1d2a2d;
  --surface: #263438;
  --bone: #f7d6ae;
  --ember: #de5a28;
  --clay: #9b4425;
  --faint: rgba(247, 214, 174, 0.15);
}
body {
  background: var(--void);
  color: var(--bone);
  letter-spacing: -0.01em;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 85% 5%, rgba(222, 90, 40, 0.17), transparent 25%),
    radial-gradient(
      circle at 3% 44%,
      rgba(247, 214, 174, 0.08),
      transparent 24%
    ),
    linear-gradient(126deg, #101819 8%, #1c292c 49%, #101819 100%);
}
body:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(247, 214, 174, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 214, 174, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}
.ambient {
  opacity: 0.54;
  mix-blend-mode: screen;
}
.site-header {
  height: 92px;
  border-color: rgba(247, 214, 174, 0.14);
  position: sticky;
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 24, 25, 0.94),
    rgba(16, 24, 25, 0.45)
  );
  backdrop-filter: blur(16px);
}
.site-header.scrolled {
  background: rgba(16, 24, 25, 0.92);
  border-color: rgba(247, 214, 174, 0.26);
}
.brand {
  font-size: 22px;
  letter-spacing: 0.045em;
}
.brand-mark {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(247, 214, 174, 0.3),
    0 10px 22px rgba(0, 0, 0, 0.25);
}
.nav {
  gap: 25px;
}
.nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
}
.nav .nav-cta {
  background: var(--ember);
  color: var(--void);
  padding: 12px 18px;
  box-shadow: 4px 4px 0 rgba(247, 214, 174, 0.18);
}
.section-shell {
  width: min(1240px, calc(100% - 72px));
}
.hero {
  position: relative;
  min-height: calc(100vh - 92px);
  grid-template-columns: 1fr 0.94fr;
  gap: 46px;
  padding: 82px 0 64px;
}
.hero:before {
  content: "";
  position: absolute;
  left: -17vw;
  bottom: 7%;
  width: 42vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  opacity: 0.7;
}
.eyebrow {
  color: var(--ember);
  letter-spacing: 0.22em;
}
.eyebrow span {
  width: 34px;
  background: var(--ember);
}
/* Sized to the hero's COPY COLUMN, not the viewport. Above 900px the hero is a
   two-column grid, so that column is only ~(shell - 46px gap) / 1.94 wide --
   584px once the 1180px shell caps out, no matter how wide the screen gets. The
   headline must fit without an accidental wrap. The explicit break keeps
   "BREAK OUT OF" and "THE SYSTEM" on separate, balanced lines. */
.hero h1 {
  max-width: 770px;
  /* 900 rather than the 800 shared with h2 -- PT Varsity Block is a variable
     face declaring 100..900, so the hero gets the heaviest cut available. */
  font-weight: 900;
  font-size: clamp(52px, calc(6.6vw - 5px), 80px);
  line-height: 0.73;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero h1 em {
  color: var(--ember);
  text-shadow: 4px 4px 0 rgba(247, 214, 174, 0.08);
}
.hero-summary {
  max-width: 495px;
  color: #ead7bd;
  font-size: 17px;
  line-height: 1.7;
}
.hero-actions {
  margin-top: 32px;
}
.button {
  font-size: 12px;
  letter-spacing: 0.12em;
}
.ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.button .ui-icon {
  margin-left: 3px;
}
.text-link .ui-icon {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-left: 5px;
}
.ui-icon-diagonal {
  width: 19px;
  height: 19px;
}
.button-primary {
  background: var(--ember);
  box-shadow: 5px 5px 0 rgba(247, 214, 174, 0.18);
}
.button-primary:hover {
  background: #f37942;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(247, 214, 174, 0.16);
}
.text-link {
  font-size: 12px;
  letter-spacing: 0.1em;
}
.hero-proof {
  display: grid;
  grid-template-columns: 38px minmax(0, 275px) auto;
  gap: 14px;
  align-items: start;
  margin-top: 46px;
  padding-top: 17px;
  border-top: 1px solid rgba(247, 214, 174, 0.24);
}
.hero-proof > span {
  color: var(--ember);
  font: 800 18px/1 var(--display);
}
.hero-proof p {
  margin: 0;
  color: #d9c8b0;
  font-size: 11px;
  line-height: 1.55;
}
.hero-proof a {
  justify-self: end;
  color: var(--bone);
  font: 800 11px/1.15 var(--display);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-align: right;
}
.hero-proof b {
  display: block;
  color: var(--ember);
  font-size: 20px;
  margin-top: 4px;
}
.listen-on {
  margin-top: 28px;
}
.listen-on > span {
  background: var(--bone);
  color: var(--void);
  box-shadow: 4px 4px 0 var(--ember);
}
.platform-link {
  font-size: 10px;
}
.hero-art {
  min-height: 590px;
  align-self: stretch;
  border: 1px solid rgba(247, 214, 174, 0.16);
  background:
    radial-gradient(
      circle at 49% 42%,
      rgba(222, 90, 40, 0.33),
      transparent 38%
    ),
    linear-gradient(150deg, rgba(247, 214, 174, 0.1), transparent 52%);
  overflow: hidden;
}
.hero-art:before {
  content: "";
  position: absolute;
  inset: 21px;
  border: 1px solid rgba(247, 214, 174, 0.18);
  pointer-events: none;
  /* Lifted above .hero-portrait. As a generated FIRST child this hairline paints
     before the photo, so without a z-index the photo buries it. (.hero-art:after,
     the outer border, is a last child and already paints on top.) */
  z-index: 1;
}
/* The hero frame is filled by a photograph: absolute rather than a centred grid
   item because .hero-art carries 34px of padding that would otherwise inset the
   photo and leave the gradient showing around it.

   object-position stays at 50% and Josh's placement is baked into the crop
   instead (2380x1834, trimmed symmetrically around him -- see index.html). That
   is deliberate: the frame's aspect runs from 0.95 on desktop to 1.51 at tablet
   widths, and once it exceeds the plate's 1.298 there is no horizontal slack left
   for cover to take -- it crops top and bottom instead. An object-position offset
   would shift him on desktop and do nothing at all at tablet sizes. Framing him
   in the file holds the same composition at every breakpoint. */
.hero-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
/* A scale-only zoom, matching .video-card images. The lockup's scale+rotate would
   swing the photo's corners into the frame. */
.hero-art:hover .hero-portrait {
  transform: scale(1.04);
}
/* Retained for the wordmark lockup treatment, which no longer ships in the hero
   but is one markup swap away. */
.target-ring {
  border-color: rgba(247, 214, 174, 0.27);
}
.ring-one {
  width: 82%;
  height: 82%;
}
.ring-two {
  width: 59%;
  height: 59%;
}
.badger-logo {
  width: min(82%, 480px);
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.46));
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-art:hover .badger-logo {
  transform: scale(1.045) rotate(-1deg);
}
.art-label {
  bottom: 32px;
  left: 31px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.hero-orbit-tag {
  position: absolute;
  right: 23px;
  top: 30px;
  padding: 9px 11px;
  border: 1px solid rgba(247, 214, 174, 0.4);
  color: var(--bone);
  font: 800 10px/1.12 var(--display);
  letter-spacing: 0.11em;
  text-align: center;
  transform: rotate(8deg);
}
.mission {
  padding: 150px 0 80px;
}
.mission-grid {
  gap: 72px;
  align-items: end;
}
.mission-statement {
  position: relative;
}
.mission-number {
  display: block;
  margin-bottom: 20px;
  color: var(--ember);
  font: 800 20px/1 var(--display);
  letter-spacing: 0.12em;
}
.mission h2 {
  font-size: clamp(52px, 5.6vw, 87px);
  line-height: 0.79;
  letter-spacing: -0.035em;
}
.mission h2 em {
  color: var(--ember);
}
.mission-copy {
  padding: 27px 0 0;
  border-top: 2px solid var(--ember);
}
.mission-copy p {
  color: #e3d0b8;
  font-size: 16px;
  line-height: 1.7;
}
.mission-footnote {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  gap: 28px;
  align-items: center;
  margin-top: 110px;
  padding: 22px 0;
  border-top: 1px solid rgba(247, 214, 174, 0.2);
  border-bottom: 1px solid rgba(247, 214, 174, 0.2);
}
.mission-footnote span {
  color: var(--ember);
  font: 800 10px/1 var(--body);
  letter-spacing: 0.16em;
}
.mission-footnote p {
  margin: 0;
  color: var(--bone);
  font: 700 14px/1.3 var(--display);
  letter-spacing: 0.06em;
  text-align: center;
}
.mission-footnote span:last-child {
  text-align: right;
}
.pillars {
  position: relative;
  padding: 112px 0;
  background: var(--bone);
  color: var(--void);
  box-shadow: 0 0 0 100vmax var(--bone);
  clip-path: inset(0 -100vmax);
}
.pillars:before {
  content: "THE STANDARD";
  position: absolute;
  right: -2vw;
  top: 22px;
  color: rgba(16, 24, 25, 0.055);
  font: 800 clamp(88px, 16vw, 250px)/0.7 var(--display);
  white-space: nowrap;
  pointer-events: none;
}
.pillars .section-top {
  position: relative;
  border-bottom: 1px solid rgba(16, 24, 25, 0.22);
  padding-bottom: 24px;
}
.pillars .eyebrow {
  color: var(--clay);
}
.pillars .eyebrow span {
  background: var(--clay);
}
.pillar-grid {
  position: relative;
  gap: 0;
  border-left: 1px solid rgba(16, 24, 25, 0.2);
}
.pillar-grid article {
  padding: 36px 26px 40px;
  border-right: 1px solid rgba(16, 24, 25, 0.2);
  border-bottom: 1px solid rgba(16, 24, 25, 0.2);
  min-height: 300px;
}
.pillar-grid article:hover {
  background: var(--ember);
  color: var(--bone);
  transform: none;
}
.pillar-grid .number {
  color: var(--clay);
  font: 800 12px/1 var(--body);
  letter-spacing: 0.12em;
}
.pillar-grid .icon {
  font-size: 34px;
}
.pillar-grid h3 {
  font-size: 39px;
  letter-spacing: 0.01em;
}
.pillar-grid p {
  line-height: 1.65;
}
.episodes {
  padding: 135px 0;
}
.episodes .section-top {
  border-bottom: 1px solid rgba(247, 214, 174, 0.2);
  padding-bottom: 28px;
}
.episodes h2 {
  font-size: clamp(55px, 7vw, 98px);
  letter-spacing: -0.035em;
}
.button-outline {
  border-color: var(--bone);
  color: var(--bone);
}
.featured-episode {
  border-color: rgba(247, 214, 174, 0.24);
  background: rgba(247, 214, 174, 0.035);
}
.episode-art {
  background: linear-gradient(
    148deg,
    var(--ember) 0 47%,
    var(--slate) 47% 100%
  );
}
.episode-detail {
  padding: 42px;
}
.episode-detail h3 {
  font-size: 44px;
  line-height: 0.9;
}
.episode-list article {
  border-color: rgba(247, 214, 174, 0.18);
}
.episode-list article:hover {
  background: rgba(247, 214, 174, 0.07);
}
.home-merch {
  padding: 130px 0;
  background: linear-gradient(120deg, #192629, #11191a);
  border-top: 1px solid rgba(247, 214, 174, 0.17);
  border-bottom: 1px solid rgba(247, 214, 174, 0.17);
}
.home-merch-heading {
  margin-bottom: 52px;
}
.home-merch-heading h2 {
  font-size: clamp(60px, 7.5vw, 112px);
}
.merch-product {
  border-color: rgba(247, 214, 174, 0.22);
  box-shadow: 12px 14px 0 rgba(0, 0, 0, 0.18);
}
.merch-product:hover {
  border-color: var(--ember);
  box-shadow: 16px 18px 0 rgba(0, 0, 0, 0.2);
}
.join {
  position: relative;
  overflow: hidden;
  background: var(--ember);
}
.join-content {
  position: relative;
  z-index: 1;
  max-width: 790px;
  padding: 128px 0;
}
.join h2 {
  font-size: clamp(65px, 8vw, 120px);
  letter-spacing: -0.04em;
}
.join .eyebrow {
  color: var(--void);
}
.join .eyebrow span {
  background: var(--void);
}
.signup {
  max-width: 590px;
}
.signup button {
  background: var(--void);
}
.site-footer {
  padding-top: 68px;
  padding-bottom: 50px;
  border-top: 0;
}
.js .reveal {
  opacity: 1;
  transform: none;
}
.footer {
  position: relative;
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }
  /* Single column from here down, so the headline gets the full shell width and
     can run larger than the two-column sizing above allows. */
  .hero h1 {
    font-size: clamp(30px, 11.8vw, 76px);
  }
  .hero-art {
    min-height: 470px;
  }
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .mission-footnote {
    margin-top: 65px;
  }
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-merch-heading {
    display: block;
  }
  .home-merch-heading > div:last-child {
    margin-top: 25px;
  }
}
@media (max-width: 700px) {
  .section-shell {
    width: min(100% - 40px, 1240px);
  }
  .site-header {
    width: calc(100% - 40px);
    height: 74px;
  }
  .brand {
    font-size: 17px;
  }
  .brand-mark {
    width: 37px;
    height: 37px;
  }
  .hero {
    min-height: auto;
    padding: 55px 0 60px;
  }
  .hero-proof {
    grid-template-columns: 30px 1fr;
  }
  .hero-proof a {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .hero-art {
    min-height: 355px;
  }
  .hero-art:before {
    inset: 13px;
  }
  .badger-logo {
    width: min(80%, 305px);
  }
  .art-label {
    bottom: 22px;
    left: 20px;
    font-size: 9px;
  }
  .hero-orbit-tag {
    right: 16px;
    top: 20px;
    font-size: 8px;
  }
  .mission {
    padding: 92px 0 58px;
  }
  .mission h2 {
    font-size: 53px;
  }
  .mission-footnote {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mission-footnote p,
  .mission-footnote span:last-child {
    text-align: left;
  }
  .pillars {
    padding: 72px 0;
  }
  .pillar-grid {
    grid-template-columns: 1fr;
  }
  .pillar-grid article {
    min-height: 0;
  }
  .episodes {
    padding: 85px 0;
  }
  .episode-detail {
    padding: 27px;
  }
  .episode-detail h3 {
    font-size: 36px;
  }
  .home-merch {
    padding: 80px 0;
  }
  .join-content {
    padding: 85px 0;
  }
  .join h2 {
    font-size: 62px;
  }
  .site-footer {
    width: calc(100% - 40px);
  }
}

/* Prelaunch polish: give the visual system more breathing room and keep every promise honest before launch. */
.site-header {
  width: 100%;
  margin: 0;
  padding-inline: max(36px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid rgba(247, 214, 174, 0.14);
}
.hero {
  gap: clamp(52px, 6vw, 92px);
  padding-top: 104px;
  padding-bottom: 98px;
}
.hero-art {
  min-height: 540px;
  padding: 34px 28px 30px;
}
.badger-logo {
  width: min(82%, 430px);
}
.wordmark-badger-logo {
  width: min(96%, 510px);
}
.mission {
  padding: 170px 0 122px;
}
.mission-grid {
  gap: clamp(78px, 10vw, 150px);
}
.home-merch-heading {
  gap: 64px;
}
.prelaunch .section-top {
  align-items: end;
}
.prelaunch .section-top h2 em {
  color: var(--ember);
  font-style: normal;
}
.transmission-panel {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: clamp(32px, 5vw, 74px);
  align-items: stretch;
  margin-top: 58px;
  border: 1px solid rgba(247, 214, 174, 0.25);
  background: linear-gradient(
    135deg,
    rgba(247, 214, 174, 0.07),
    rgba(222, 90, 40, 0.06)
  );
  box-shadow: 18px 20px 0 rgba(0, 0, 0, 0.16);
}
.transmission-mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 350px;
  overflow: hidden;
  border-right: 1px solid rgba(247, 214, 174, 0.2);
  background: linear-gradient(
    145deg,
    var(--ember) 0 44%,
    var(--slate) 44% 100%
  );
}
.transmission-mark:before {
  content: "PRESSURE TESTED";
  position: absolute;
  top: 21px;
  left: -29px;
  transform: rotate(-90deg);
  transform-origin: left top;
  color: rgba(16, 24, 25, 0.62);
  font: 800 13px/1 var(--body);
  letter-spacing: 0.23em;
  white-space: nowrap;
}
.transmission-mark img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(84%, 205px);
  height: auto;
  filter: drop-shadow(7px 8px 0 rgba(16, 24, 25, 0.23));
}
.transmission-mark i {
  position: absolute;
  right: 20px;
  bottom: 19px;
  color: var(--bone);
  font: 800 13px/1 var(--body);
  font-style: normal;
  letter-spacing: 0.14em;
}
.transmission-copy {
  align-self: center;
  padding: 54px 0;
}
.transmission-copy h3 {
  max-width: 650px;
  margin: 14px 0 20px;
  color: var(--bone);
  font: 800 clamp(39px, 4vw, 60px)/0.9 var(--display);
  letter-spacing: -0.025em;
}
.transmission-copy > p:not(.episode-label) {
  max-width: 570px;
  margin: 0 0 28px;
  color: #dac9b2;
  line-height: 1.7;
}
.transmission-copy .play-link {
  color: var(--bone);
}
.transmission-promise {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 42px 30px;
  border-left: 1px solid rgba(247, 214, 174, 0.2);
  background: rgba(16, 24, 25, 0.18);
}
.transmission-promise span {
  color: var(--ember);
  font: 800 11px/1 var(--body);
  letter-spacing: 0.14em;
}
.transmission-promise p {
  margin: 0 0 17px;
  color: var(--bone);
  font: 800 16px/0.98 var(--display);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .site-header {
    padding-inline: 36px;
  }
  .hero {
    padding-top: 80px;
    padding-bottom: 78px;
  }
  .hero-art {
    min-height: 470px;
  }
  .mission {
    padding: 124px 0 92px;
  }
  .transmission-panel {
    grid-template-columns: 220px 1fr;
    gap: 38px;
  }
  .transmission-promise {
    grid-column: 1/-1;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 24px 28px;
    border-top: 1px solid rgba(247, 214, 174, 0.2);
    border-left: 0;
  }
  .transmission-promise p {
    margin: 0;
  }
  .transmission-promise span:nth-of-type(n + 2) {
    margin-left: 0;
  }
}
@media (max-width: 700px) {
  .site-header {
    width: 100%;
    height: 74px;
    padding-inline: 20px;
  }
  .hero {
    gap: 46px;
    padding-top: 58px;
    padding-bottom: 66px;
  }
  .hero-art {
    min-height: 360px;
    padding: 20px;
  }
  .badger-logo {
    width: min(79%, 300px);
  }
  .wordmark-badger-logo {
    width: min(96%, 390px);
  }
  .mission {
    padding: 102px 0 72px;
  }
  .mission-grid {
    gap: 48px;
  }
  .prelaunch .section-top {
    align-items: start;
  }
  .transmission-panel {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 38px;
  }
  .transmission-mark {
    min-height: 230px;
    border-right: 0;
    border-bottom: 1px solid rgba(247, 214, 174, 0.2);
  }
  .transmission-mark img {
    width: min(72%, 210px);
  }
  .transmission-copy {
    padding: 38px 28px;
  }
  .transmission-copy h3 {
    font-size: 43px;
  }
  .transmission-promise {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 28px;
  }
  .transmission-promise p {
    margin: 0 0 12px;
  }
  .home-merch-heading {
    gap: 28px;
  }
}