:root{
  --black:#0a0a0a;
  --white:#fbfbfb;
  --gray:#6b6b6b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--white);
  color:var(--black);
  font-family:'Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.page{
  width:100%;
  max-width:480px;
  padding:64px 28px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* back link */
.back{
  align-self:flex-start;
  margin-bottom:32px;
  color:var(--black);
  text-decoration:none;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.back:hover{
  border-bottom-color:var(--black);
}

/* avatar */
.avatar{
  width:112px;
  height:112px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--black);
  filter:grayscale(1);
  margin-bottom:28px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  display:block;
}
.avatar.placeholder span{
  color:var(--white);
  font-weight:900;
  font-size:32px;
  letter-spacing:0.02em;
}

/* headings */
h1{
  font-weight:900;
  font-size:clamp(40px, 11vw, 56px);
  letter-spacing:-0.02em;
  line-height:0.9;
  text-transform:uppercase;
  text-align:center;
}
h2{
  font-weight:900;
  font-size:clamp(28px, 8vw, 36px);
  letter-spacing:-0.01em;
  line-height:1;
  text-transform:uppercase;
  text-align:center;
}

.release{
  text-align:center;
  margin-bottom:20px;
}
.release-label{
  display:block;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:8px;
}
.release-title{
  display:block;
  font-weight:900;
  font-size:clamp(26px, 7vw, 34px);
  letter-spacing:-0.01em;
  line-height:1.05;
  text-transform:uppercase;
}

.tagline{
  margin-top:14px;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gray);
  text-align:center;
}

.body-text{
  margin-top:18px;
  font-weight:500;
  font-size:14px;
  line-height:1.6;
  color:var(--gray);
  text-align:center;
}

.rule{
  width:36px;
  height:2px;
  background:var(--black);
  margin:28px 0 32px;
}

/* links */
.links{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:17px 20px;
  border:1.5px solid var(--black);
  background:var(--white);
  color:var(--black);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:background 0.15s ease, color 0.15s ease;
}
.link:hover,
.link:focus-visible{
  background:var(--black);
  color:var(--white);
}
.link.featured{
  flex-direction:column;
  gap:4px;
  padding:15px 18px;
  background:var(--black);
  color:var(--white);
}
.link.featured:hover{
  background:var(--white);
  color:var(--black);
}
.featured-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.2em;
  opacity:0.65;
}
.no-caps{
  text-transform:none;
}
.featured-title{
  font-size:20px;
  letter-spacing:0.06em;
}

/* coaching form */
.section-label{
  align-self:flex-start;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.coach-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.coach-input{
  width:100%;
  padding:17px 20px;
  border:1.5px solid var(--black);
  background:var(--white);
  color:var(--black);
  font-family:'Archivo', sans-serif;
  font-weight:500;
  font-size:14px;
  outline:none;
}
.coach-input::placeholder{
  color:var(--gray);
}
.coach-submit{
  width:100%;
  padding:17px 20px;
  border:1.5px solid var(--black);
  background:var(--black);
  color:var(--white);
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.coach-submit:hover{
  background:var(--white);
  color:var(--black);
}
.coach-note{
  margin-top:10px;
  font-size:11px;
  color:var(--gray);
  text-align:center;
}

.coach-card{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:var(--black);
  border:2px solid var(--black);
  padding:30px 22px;
}
.coach-card .section-label{
  color:var(--white);
  font-size:15px;
  margin-bottom:18px;
}
.coach-card .coach-form{
  gap:14px;
}
.coach-card .coach-input{
  padding:20px 20px;
  font-size:16px;
  background:transparent;
  border-color:var(--white);
  color:var(--white);
}
.coach-card .coach-input::placeholder{
  color:rgba(251,251,251,0.55);
}
.coach-card .coach-submit{
  padding:20px 20px;
  font-size:14px;
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
}
.coach-card .coach-submit:hover{
  background:var(--black);
  color:var(--white);
}
.coach-card .coach-note{
  color:rgba(251,251,251,0.6);
}
.coach-card .coach-note{
  margin-top:16px;
  font-size:12px;
}

/* tutorial list */
.tutorial{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
}
.tutorial-index{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.18em;
  opacity:0.6;
}
.tutorial-title{
  font-size:14px;
}

/* socials */
.socials{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
  margin-top:36px;
}
.rule + .socials{
  margin-top:0;
}
.socials a{
  color:var(--black);
  text-decoration:none;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.socials a:hover{
  border-bottom-color:var(--black);
}

footer{
  margin-top:56px;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gray);
  text-align:center;
}