.join-page { min-height: 100vh; background: #030711; }
.join-main { padding-top: 76px; overflow: hidden; }
.join-hero { position: relative; min-height: 850px; padding: 100px 5vw 90px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 6vw; align-items: center; background: radial-gradient(circle at 80% 22%, rgba(22,115,255,.22), transparent 32%), linear-gradient(180deg, #07111f, #030711); }
.join-hero::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(74,143,199,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(74,143,199,.18) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(#000, transparent 90%); }
.join-copy, .team-photo { position: relative; z-index: 1; }
.join-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 48px; color: #7f9bb2; font: 500 .72rem var(--mono); }
.join-back:hover { color: var(--cyan); }
.join-copy h1 { margin: 23px 0 30px; font-size: clamp(3.2rem, 5.5vw, 6rem); }
.join-lead { max-width: 650px; color: #aabed0; font-size: 1.08rem; line-height: 1.9; }
.join-principle { margin-top: 35px; padding: 22px 24px; border-left: 3px solid var(--cyan); background: rgba(11,31,53,.82); }
.join-principle span { display: block; margin-bottom: 10px; color: #65849c; font: 500 .66rem var(--mono); letter-spacing: .13em; }
.join-principle b { color: #eaf9ff; font-size: .96rem; line-height: 1.65; }
.team-photo { margin: 0; padding: 12px; background: #0b1d30; border: 1px solid #315a78; box-shadow: 16px 16px 0 rgba(11,58,89,.5); }
.team-photo img { width: 100%; min-height: 520px; object-fit: cover; object-position: center; }
.team-photo figcaption { min-height: 52px; padding: 13px 4px 2px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #dff6ff; font: 500 .7rem var(--mono); letter-spacing: .08em; }
.team-photo figcaption small { color: #6f8ba2; font: 400 .66rem var(--mono); letter-spacing: .04em; text-align: right; }
.join-invite { padding: 120px 5vw; display: grid; grid-template-columns: .82fr 1.18fr; gap: 6vw; background: #edf5fb; color: #08111d; }
.join-invite h2 { margin: 22px 0 0; font-size: clamp(2.7rem, 4vw, 4.8rem); line-height: 1.03; }
.invite-card { padding: 39px; background: white; border: 1px solid #cadae6; box-shadow: 12px 12px 0 #d7e6f0; }
.invite-card > p { margin-bottom: 29px; color: #50677b; font-size: 1.04rem; line-height: 1.85; }
.application-list { margin-bottom: 31px; border-top: 1px solid #d5e1ea; }
.application-list div { min-height: 60px; padding: 12px 4px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #d5e1ea; }
.application-list span { color: var(--blue); font: 500 .7rem var(--mono); }
.application-list b { color: #1d3346; font-size: .9rem; }
.join-email-address { display: block; margin-top: 18px; color: #176acb; font: 500 .78rem var(--mono); overflow-wrap: anywhere; }
.join-email-address:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .join-hero, .join-invite { grid-template-columns: 1fr; }
  .team-photo { max-width: 780px; }
}

@media (max-width: 720px) {
  .join-main { padding-top: 66px; }
  .join-hero { min-height: auto; padding: 76px 22px 82px; gap: 55px; }
  .join-back { margin-bottom: 37px; }
  .join-copy h1 { font-size: clamp(3rem, 14vw, 4.7rem); }
  .join-lead { font-size: .98rem; }
  .team-photo { padding: 7px; box-shadow: 8px 8px 0 rgba(11,58,89,.5); }
  .team-photo img { min-height: 330px; }
  .team-photo figcaption { align-items: flex-start; flex-direction: column; gap: 5px; }
  .team-photo figcaption small { text-align: left; }
  .join-invite { padding: 90px 22px; gap: 45px; }
  .join-invite h2 { font-size: 2.7rem; }
  .invite-card { padding: 27px 22px; box-shadow: 8px 8px 0 #d7e6f0; }
  .invite-card .pixel-button { width: 100%; }
}