:root {
  color-scheme:dark;
  --black:#111110;
  --panel:#1b1b19;
  --cream:#eeeae2;
  --muted:#aaa69f;
  --amber:#e8a75e;
  --line:#ffffff24;
  --condensed:Impact,'Arial Narrow','Helvetica Neue',sans-serif;
  --body:Arial,Helvetica,sans-serif}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px}
body {
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65}
button,input,select {
  font:inherit}
button,a,input,select {
  -webkit-tap-highlight-color:transparent}
button,a {
  touch-action:manipulation}
button {
  cursor:pointer}
a {
  color:inherit;
  text-decoration:none}
button {
  color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:5px}
h1,h2,h3,p {
  margin:0}
h1,h2 {
  font-family:var(--condensed);
  font-weight:400;
  line-height:.99;
  letter-spacing:.005em}
h2 {
  font-size:clamp(2.75rem,5.5vw,5rem)}
h2 span {
  color:var(--amber)}
.section-padding {
  padding:100px max(6vw,24px)}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.15em;
  font-weight:700;
  color:var(--amber);
  line-height:1.6}
.small-line {
  display:inline-block;
  width:30px;
  height:1px;
  background:var(--amber);
  vertical-align:middle;
  margin-right:14px}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  padding:10px 20px;
  background:var(--cream);
  color:var(--black);
  z-index:10}
.skip-link:focus {
  top:16px}
.site-header {
  height:90px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:#111110;
  position:relative;
  z-index:2}
.wordmark {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  letter-spacing:-.05em;
  font-size:1.25rem;
  line-height:1.2}
.wordmark-good {
  color:var(--amber)}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--amber);
  color:var(--black);
  width:30px;
  height:32px;
  margin-right:7px;
  font-size:1.4rem}
.site-header nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:.875rem}
.site-header nav a {
  color:#c8c4bd}
.site-header nav a:hover {
  color:var(--amber)}
.button {
  border:1px solid var(--amber);
  background:var(--amber);
  color:var(--black);
  padding:15px 27px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:.875rem;
  font-weight:700;
  min-height:50px;
  transition:background .2s,color .2s}
.button:hover {
  background:#f4c085;
  border-color:#f4c085}
.button-small {
  padding:10px 20px;
  min-height:42px}
.button-outline {
  background:transparent;
  color:var(--cream);
  border-color:#77736c}
.button-outline:hover {
  background:#ffffff12;
  color:var(--cream);
  border-color:var(--cream)}
.text-link {
  font-size:.875rem;
  display:inline-block;
  padding:8px 0;
  border-bottom:1px solid #eeeae266}
.text-link:hover {
  border-color:var(--amber);
  color:var(--amber)}

.hero {
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 90px);
  padding:68px 6vw 96px;
  background:#151412;
  overflow:hidden}
.hero-light {
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(ellipse at 75% 20%,#69503b55,transparent 60%)}
.hero.has-art .hero-light {
  background-image:linear-gradient(90deg,#111110 0%,#111110d9 22%,#11111035 55%,#11111000 78%),linear-gradient(0deg,#111110e6,transparent 35%),url('assets/guitar-hero.jpg');
  background-size:cover;
  background-position:center}
.hero:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,#00000006 0px,#00000006 1px,transparent 1px,transparent 3px);
  z-index:-1}
.hero-content {
  max-width:650px}
.hero h1 {
  font-size:clamp(3.6rem,6.8vw,7.5rem);
  margin:25px 0 28px}
.hero h1 span {
  color:var(--amber)}
.hero-description {
  font-size:1.0625rem;
  line-height:1.6;
  color:#c9c6c0}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:30px}
.hero-note {
  font-size:.75rem;
  line-height:1.65;
  color:#c0bab2;
  margin-top:18px}
.artifact-caption {
  position:absolute;
  right:6vw;
  bottom:110px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  font-size:.75rem;
  letter-spacing:.1em;
  line-height:1.7}
.caption-number {
  font-weight:bold;
  color:var(--amber);
  border-top:1px solid var(--amber);
  padding-top:5px}
.artifact-caption em {
  font-size:.75rem;
  color:#bdb6ac;
  letter-spacing:0;
  font-style:normal}
.hero-bottom {
  position:absolute;
  bottom:0;
  left:6vw;
  right:6vw;
  border-top:1px solid var(--line);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  letter-spacing:.12em;
  color:#a9a39b}


.intro {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:40px 70px}

.intro h2 {
  margin-top:20px}

.intro-copy {
  max-width:530px;
  padding-top:30px;
  color:#c2beb6}

.intro-copy p+p {
  margin-top:20px;
  color:var(--muted)}

.vision-pillars {
  margin-top:30px;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px}

.vision-pillars article {
  border-top:1px solid var(--line);
  padding-top:24px}

.step-number {
  font-family:var(--condensed);
  font-size:2.25rem;
  color:var(--amber)}

.vision-pillars h3 {
  font-size:1.0625rem;
  margin:14px 0 10px}

.vision-pillars p {
  color:var(--muted);
  font-size:1rem;
  max-width:360px}

.galleries {
  background:#171715;
  border-block:1px solid var(--line)}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:45px}

.section-heading h2 {
  margin-top:20px}

.section-heading>p {
  color:var(--muted);
  max-width:330px}

.collection-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0 28px}

.collection-grid article {
  border-top:1px solid #ffffff29;
  padding:24px 0 30px}

.collection-grid article>span {
  font-size:.75rem;
  color:var(--amber);
  letter-spacing:.07em}

.collection-grid h3 {
  font-family:var(--condensed);
  font-size:2rem;
  font-weight:400;
  line-height:1.25;
  margin:18px 0 12px}

.collection-grid p {
  color:#b7b2aa;
  font-size:1rem;
  max-width:320px}

.signup-form {
  max-width:680px;
  margin:30px auto 0;
  text-align:left}

.signup-form label {
  font-size:.875rem;
  font-weight:bold;
  display:block;
  margin-bottom:8px}

.signup-fields {
  display:flex;
  gap:0}

.signup-fields input {
  background:#f5d7b2;
  color:#111110;
  border:1px solid #111110;
  border-right:0;
  min-width:0;
  flex:1;
  padding:15px 16px;
  border-radius:0;
  min-height:56px;
  font-size:1rem}

.signup-fields input::placeholder {
  color:#63513e;
  opacity:1}

.closing .signup-fields .button {
  min-width:180px;
  min-height:56px;
  white-space:nowrap}

.signup-note,.signup-status {
  font-size:.875rem;
  color:#48311c;
  line-height:1.5;
  margin-top:12px}

.signup-status {
  font-weight:600}

.button:disabled {
  opacity:.55;
  cursor:not-allowed}

.closing a:focus-visible,.closing input:focus-visible,.closing button:focus-visible {
  outline-color:#111110}


.coach {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:35px 80px}
.coach-label {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:24px}
.status-label {
  font-size:.75rem;
  letter-spacing:.08em;
  color:#b9b6af;
  border:1px solid #ffffff29;
  padding:3px 9px}
.coach-copy h2 {
  font-size:clamp(2.7rem,4.7vw,4.5rem);
  margin:6px 0 28px}
.coach-copy>p {
  max-width:550px;
  color:#c2beb6}
.coach-copy>p+p {
  margin-top:16px}
.coach-copy .muted {
  color:var(--muted)}
.coach-note {
  border-left:1px solid #7e6446;
  padding:30px 0 30px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center}
.note-label,.note-footer {
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--muted)}
.coach-note p {
  font-family:var(--condensed);
  font-size:2.75rem;
  line-height:1.1;
  margin:25px 0}
.note-rule {
  width:40px;
  height:2px;
  background:var(--amber);
  margin:5px 0 25px}
.closing {
  background:#e8a75e;
  color:var(--black);
  text-align:center;
  border-top:1px solid #e8a75e}
.closing .eyebrow {
  color:#3b2a18}
.closing h2 {
  font-size:clamp(4rem,8vw,7rem);
  margin:24px 0}
.closing h2 span {
  color:#77502b}
.closing>p:not(.eyebrow) {
  margin-bottom:28px;
  color:#372719}
.closing .button {
  background:var(--black);
  border-color:var(--black);
  color:var(--cream);
  min-width:200px}
.closing .button:hover {
  background:#38332b}
.closing-note {
  display:block;
  font-size:.875rem;
  margin-top:14px;
  color:#47331e}
footer {
  padding:35px 6vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font-size:.75rem;
  color:var(--muted)}
footer .wordmark {
  color:var(--cream);
  font-size:1.1rem}


@media(min-width:1600px) {
  
  .hero {
  min-height:840px}
.hero h1 {
  font-size:7rem}

  .section-padding {
  padding-inline:max(6vw,calc((100vw - 1500px)/2))}

  .hero,.site-header {
  padding-inline:max(6vw,calc((100vw - 1500px)/2))}

}

@media(max-width:1050px) {
  
  .hero h1 {
  font-size:6.9vw}
.hero {
  min-height:760px}

  .artifact-caption {
  max-width:260px;
  gap:12px}
.coach {
  gap:35px 40px}

  .section-padding {
  padding-top:80px;
  padding-bottom:80px}

  .hero.has-art .hero-light {
  background-position:58% center}

  .collection-grid {
  grid-template-columns:repeat(2,1fr)}

}

@media(max-width:700px) {
  
  .site-header {
  height:76px;
  padding-inline:24px}
.site-header nav {
  gap:16px}

  .site-header nav>a:not(.button) {
  display:none}

  .site-header .wordmark {
  font-size:1rem}
.brand-mark {
  width:24px;
  height:26px}

  .button-small {
  padding:9px 12px;
  font-size:.8125rem}

  .hero {
  padding:48px 24px 105px;
  min-height:810px}

  .hero h1 {
  font-size:clamp(3.3rem,11vw,5.5rem);
  margin:25px 0}

  .hero-description {
  font-size:1rem}

  .hero-actions {
  gap:18px;
  align-items:flex-start;
  flex-direction:column}

  .hero-note {
  max-width:270px;
  line-height:1.8}

  .hero.has-art .hero-light {
  background-image:linear-gradient(90deg,#111110e8,#11111077),linear-gradient(0deg,#111110,transparent 50%),url('assets/guitar-hero.jpg');
  background-position:62% center}

  .artifact-caption {
  display:none}
.hero-bottom {
  left:24px;
  right:24px;
  gap:25px;
  align-items:center;
  font-size:.75rem}

  .hero-bottom>span:first-child {
  max-width:220px}

  .section-padding {
  padding:65px 24px}
.intro {
  grid-template-columns:1fr;
  gap:28px}

  .intro-copy {
  padding:0}
.vision-pillars {
  grid-template-columns:1fr;
  gap:28px;
  margin-top:15px}

  .vision-pillars article {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:6px 20px}

  .vision-pillars .step-number {
  grid-row:1/3;
  line-height:1.3}

  .vision-pillars h3 {
  margin:0}
.vision-pillars p {
  max-width:none}

  .section-heading {
  display:block;
  margin-bottom:30px}
.section-heading>p {
  margin-top:25px}

  .collection-grid {
  grid-template-columns:1fr;
  gap:0}

  .collection-grid h3 {
  font-size:1.8rem;
  margin:10px 0}

  .coach {
  grid-template-columns:1fr;
  gap:28px}
.coach-label {
  gap:16px;
  flex-wrap:wrap}

  .coach-note {
  padding:10px 0 10px 25px;
  margin-top:10px}
.coach-note p {
  font-size:2.25rem}

  .closing h2 {
  font-size:clamp(3.15rem,12vw,4.3rem)}

  .signup-fields {
  flex-direction:column;
  gap:10px}
.signup-fields input {
  border-right:1px solid #111110;
  width:100%}

  footer {
  padding:30px 24px;
  flex-direction:column;
  align-items:flex-start;
  gap:12px}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important}
}

/* An empty anti-bot field; it is hidden from keyboard and screen-reader navigation. */
.signup-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}