/* StepTwo Promotional page BLAAAAAAAAA
   content linsk found in index.html. */
:root {
  --bg: #dfdfcc;
  --panel: #282828;
  --text: #171717;
  --muted: #171717;
  --acid: #bd0000c9;
  --line: rgba(240,240,233,.23);
  --mono: "Space Mono", monospace;
  --display: "Barlow Condensed", Impact, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--mono); }
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.site-header { min-height: 84px; padding: 19px 4.2vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: #bbbbac; backdrop-filter: blur(12px); }
.wordmark { font: 800 36px/.82 var(--display); letter-spacing: -.02em; position: relative; }
.wordmark span { color: var(--acid); }
.wordmark i { position: absolute; right: -3px; top: -3px; font: normal 10px var(--mono); }
.social-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); }
.social-nav a { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; position: relative; }
.social-nav a span { color: var(--acid); }
.social-nav small, .contact-row small { display: inline-block; color: #f4f4d7; background: var(--acid); font: 700 8px var(--mono); letter-spacing: 0; padding: 3px 4px; margin-left: 6px; vertical-align: 1px; }
.menu-toggle { display: none; border: 1px solid var(--line); background: none; color: var(--text); font: 11px var(--mono); padding: 9px 12px; }
.menu-toggle span { color: var(--acid); margin-left: 10px; }
.hero { min-height: min(760px, calc(100svh - 84px)); padding: 20px 4.2vw 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-topline, .hero-bottomline { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; letter-spacing: .09em; color: var(--muted); position: relative; z-index: 2; }
.hero-logo { position: absolute; z-index: 1; left: 50%; top: 53%; transform: translate(-50%, -50%); width: min(76vw, 1000px); max-height: 68%; height: auto; object-fit: contain; }
.hero-bottomline { color: var(--text); }
.hero-bottomline a { color: var(--acid); }
.hero-bottomline b { margin-left: 12px; font-size: 17px; }
.hero-stamp { position: absolute; z-index: 1; text-align: center; color: var(--acid); font: 900 clamp(35px, 6vw, 80px)/.72 var(--display); transform: rotate(-9deg); mix-blend-mode: screen; }
.hero-stamp small { display: block; font: 8px/1.4 var(--mono); letter-spacing: .13em; margin-top: 14px; }
.crosshair { position: absolute; color: var(--acid); font-size: 24px; }
.crosshair-a { left: 9%; top: 35%; }.crosshair-b { right: 10%; bottom: 28%; }
.hero-title-wrap { position: relative; z-index: 3; margin: auto 0; padding: 48px 0 38px; }
.eyebrow { color: var(--acid); font-size: 14px; letter-spacing: .15em; margin: 0 0 13px; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; }
h1 { font-size: clamp(70px, 14.8vw, 220px); line-height: .72; max-width: 1250px; }
h1 span { color: var(--acid); }
.content-section { padding: 100px 4.2vw 110px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 45px; }
h2 { font-size: clamp(64px, 10vw, 130px); line-height: .78; }
.period { color: var(--acid); }
.section-note { font-size: 12px; line-height: 1.8; text-align: right; color: var(--muted); letter-spacing: .07em; margin: 0 0 4px; }
.audio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.audio-card { min-width: 0; border: 1px solid var(--line); padding: 12px; background: linear-gradient(145deg, #1b1b1b, #121212); }
.card-index, .video-label { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .05em; margin-bottom: 12px; }
.card-index span { color: var(--acid); font-size: 8px; }
.embed-frame { overflow: hidden; background: #222; }
.soundcloud-frame { height: 300px; }
.soundcloud-frame iframe { border: 0; width: 100%; height: 100%; }
.placeholder-hint { margin: 10px 0 1px; color: var(--acid); font-size: 8px; line-height: 1.5; letter-spacing: .07em; }
.video-section { background: #bd0000c9; color: #101010; }
.video-section .eyebrow, .video-section .period { color: #101010; }
.video-section .section-note { color: rgba(16,16,16,.66); }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.video-card { min-width: 0; padding: 12px; border: 1px solid rgba(16,16,16,.38); background: rgba(255,255,255,.12); }
.video-label { margin-bottom: 10px; }
.edit-flag { font-size: 8px; font-weight: 700; padding: 4px 5px; background: #101010; color: var(--acid); }
.video-card iframe { display: block; width: 100%; height: 510px; max-height: 72vh; border: 0; background: #171717; }
.video-card .placeholder-hint { color: #101010; }
.signup-section { padding: 100px 4.2vw 95px; display: grid; grid-template-columns: .75fr 1.2fr 1.5fr; gap: 40px; align-items: start; border-bottom: 1px solid var(--line); }
.signup-mark { width: clamp(90px, 13vw, 180px); aspect-ratio: 1; border: 1px solid var(--acid); color: var(--acid); border-radius: 50%; display: grid; place-items: center; font: 900 clamp(36px, 5vw, 68px)/1 var(--display); transform: rotate(-12deg); }
.signup-mark span { font: 20px var(--mono); align-self: start; justify-self: end; margin: 24% 22% 0 0; position: absolute; }
.signup-main h2 { font-size: clamp(70px, 9vw, 120px); }
.signup-copy { font-size: 16px; line-height: 1.9; color: var(--acid); margin-top: 24px; }
.contact-list { border-top: 1px solid var(--line); }
.contact-row { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 65px; border-bottom: 1px solid var(--line); font-size: 16px; }
.contact-row > span { color: var(--muted); font-size: 16px; letter-spacing: .05em; }
.contact-row a { text-align: right; }
.contact-row b { color: var(--acid); margin-left: 9px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 4.2vw; color: var(--muted); font-size: 14px; letter-spacing: .08em; }
.footer-mark { color: var(--text); font: 800 16px var(--display); letter-spacing: -.02em; }
a:hover { color: var(--acid); }
.edit-link:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
@media (max-width: 850px) {
  .site-header { padding: 16px 5vw; min-height: 72px; }
  .menu-toggle { display: block; }
  .social-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 22px 5vw; background: #dfdfcc; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 22px; }
  .social-nav.is-open { display: flex; }
  .hero { min-height: 78svh; padding: 18px 5vw; }
  .hero-topline span:nth-child(2) { display: none; }
  .hero-art { inset: 14% 4% 8%; }
  .orbit-one { width: 90vw; height: 42vw; }
  .orbit-two { width: 72vw; height: 72vw; }
  .hero-art:before { width: 53vw; }
  h1 { font-size: clamp(64px, 16vw, 140px); }
  .content-section { padding: 72px 5vw; }
  .audio-grid, .video-grid { grid-template-columns: 1fr; gap: 18px; }
  .soundcloud-frame { height: 280px; }
  .video-card iframe { height: 560px; max-height: 75vh; max-width: 100%; }
  .signup-section { padding: 75px 5vw; grid-template-columns: 100px 1fr; gap: 25px; }
  .signup-mark { width: 95px; }
  .contact-list { grid-column: 1 / -1; }
  .section-heading { margin-bottom: 32px; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 16px; }
  .hero-topline, .hero-bottomline { font-size: 7px; }
  .hero-bottomline span:last-child { display: none; }
  .hero-title-wrap { padding: 40px 0; }
  .eyebrow { font-size: 8px; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-note { text-align: left; }
  .signup-section { grid-template-columns: 1fr; }
  .signup-mark { width: 75px; }
  .contact-list { grid-column: auto; }
  .contact-row { align-items: flex-start; flex-direction: column; justify-content: center; padding: 14px 0; }
  .contact-row a { text-align: left; }
  .site-footer { flex-wrap: wrap; font-size: 7px; }
}

/* MOBILE REFINEMENTS — STEP TWO */
@media (max-width: 850px) {
  /* Give the hero the full available screen height */
  .hero {
    min-height: calc(100svh - 72px);
    position: relative;
  }

  /* centre dat bitc */
  .hero-logo {
    position: absolute;
    left: 50%;
    right: auto;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 95vw;
    max-height: 62%;
    height: auto;
    object-fit: contain;
  }

  /* Restore a stronger STEP TWO heading */
  .hero-title-wrap {
    top: 15%;
    left: 5vw;
    width: 90%;
  }

  .hero h1 {
    font-size: clamp(52px, 12vw, 76px);
    line-height: .8;
  }

  /* Push the call to action to the bottom of the hero */
  .hero-bottomline {
    width: 100%;
    margin-top: auto;
    padding-bottom: 8px;
    flex-shrink: 0;
  }

  /* Match the dropdown to the site's lighter colour palette */
  .social-nav {
    background: var(--bg);
    color: var(--text);
  }

  /* Make the header logo more readable */
  .wordmark {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: calc(100svh - 72px);
  }

  .hero-logo {
    left: 50%;
    right: auto;
    top: 55%;
    transform: translate(-50%, -50%);
    width: 95vw;
    max-height: 58%;
  }

  .hero-title-wrap {
    top: 15%;
    left: 5vw;
  }

  .hero h1 {
    font-size: clamp(48px, 13vw, 64px);
  }

  .wordmark {
    font-size: 26px;
  }

  .hero-bottomline {
    font-size: 8px;
  }
}