@charset "UTF-8";
@import url("../assets/_core.css");

/* ============================================================
   MEMBERSHIP — inquiry + application forms
   ============================================================ */

/* ---- hero ---- */
.mb-hero{
  padding: clamp(120px,16vh,180px) 0 clamp(70px,10vh,110px);
  background: var(--ink);
  text-align: center;
  border-bottom: 1px solid var(--line-2);
}
.mb-hero h1{
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(32px,5vw,58px);
  letter-spacing: .1em;
  color: var(--paper);
  margin: 20px 0 18px;
}
.mb-hero-lead{
  font-size: 15px;
  color: var(--mute);
  line-height: 2;
  letter-spacing: .06em;
  margin-bottom: 44px;
}
.mb-nav-btns{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.mb-nav-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border: 1px solid var(--line);
  font-family: var(--serif-en);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.mb-nav-btn:hover{ color: var(--paper); border-color: var(--paper); }

/* ---- section common ---- */
.mb-sec{
  padding: clamp(80px,11vh,130px) 0 clamp(90px,12vh,150px);
  background: var(--ink);
}
.mb-sec--apply{
  background: var(--ink-2);
}
.mb-sec-head{
  margin-bottom: 54px;
}
.sec-label{
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 18px;
}
.sec-label .en{
  font-family: var(--serif-en);
  font-size: clamp(24px,3.2vw,38px);
  letter-spacing: .04em;
  color: var(--paper);
}
.sec-label .jp{
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--mute);
  white-space: nowrap;
}
.mb-sec-desc{
  font-size: 14.5px;
  color: var(--mute);
  line-height: 2.1;
  max-width: 38em;
}

/* ---- form card ---- */
.mb-form-wrap{
  max-width: 680px;
  margin: 0 auto;
}
.mb-form{
  background: var(--ink);
  border: 1px solid var(--line-2);
  padding: clamp(32px,4vw,56px);
}
.mb-sec--apply .mb-form{
  background: var(--ink-2);
}

/* ---- form group label ---- */
.mb-form-group-label{
  font-family: var(--serif-en);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  margin: 32px 0 22px;
}
.mb-form-group-label:first-child{ margin-top: 0; }

/* ---- layout helpers ---- */
.mb-row2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mb-row3{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}

/* ---- radio / checkbox rows ---- */
.radio-row,
.check-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 6px;
}
.radio-item,
.check-item{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mute);
  transition: color .25s;
}
.radio-item:hover,
.check-item:hover{ color: var(--paper); }
.radio-item input,
.check-item input{
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* consent box */
.consent-box{
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  background: rgba(201,169,106,.04);
  margin: 28px 0;
}
.check-consent span{
  font-size: 13px;
  line-height: 1.85;
}

/* ---- opt label ---- */
.opt{
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mute-2);
  margin-left: 6px;
}

/* ---- success state ---- */
.mb-form-done{
  display: none;
  text-align: center;
  padding: clamp(50px,8vh,80px) clamp(32px,4vw,56px);
  border: 1px solid var(--line-2);
  background: var(--ink);
}
.mb-sec--apply .mb-form-done{ background: var(--ink-2); }
.done-icon{
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 18px;
  font-family: var(--serif-en);
}
.done-title{
  font-family: var(--serif-jp);
  font-size: 22px;
  letter-spacing: .1em;
  color: var(--paper);
  margin-bottom: 18px;
}
.done-body{
  font-size: 14.5px;
  color: var(--mute);
  line-height: 2.2;
}

/* ---- divider ---- */
.mb-divider{ background: var(--ink); padding: 0; }
.mb-divider-line{
  height: 1px;
  background: var(--line-2);
}

/* ---- info page: intro ---- */
.intro{padding:clamp(70px,10vh,120px) 0 clamp(40px,6vh,70px);background:var(--ink);text-align:center}
.intro .wrap{max-width:900px}
.intro .lead{font-family:var(--serif-jp);font-size:clamp(21px,2.7vw,32px);line-height:1.85;letter-spacing:.07em;text-wrap:pretty;color:var(--paper)}
.intro .lead em{font-style:normal;color:var(--gold-2)}
.intro .sub{margin-top:30px;color:var(--mute);font-size:16px;line-height:2.25;max-width:40em;margin-left:auto;margin-right:auto}

/* ---- info page: invite CTA ---- */
.mem-cta{padding:clamp(60px,9vh,100px) 0 clamp(80px,12vh,130px);background:var(--ink);border-top:1px solid var(--line-2);text-align:center}
.mem-cta-note{font-size:14px;color:var(--mute);letter-spacing:.07em;margin-bottom:36px}
.mem-cta-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 48px;border:1px solid var(--gold);font-family:var(--serif-en);font-size:13px;letter-spacing:.2em;color:var(--gold);transition:background .35s var(--ease),color .35s var(--ease)}
.mem-cta-btn:hover{background:var(--gold);color:var(--ink)}
.mem-cta-btn .arw{font-size:16px;transition:transform .3s var(--ease)}
.mem-cta-btn:hover .arw{transform:translateX(4px)}

/* ---- responsive ---- */
@media (max-width:640px){
  .mb-row2,
  .mb-row3{ grid-template-columns: 1fr; }
  .mb-form{ padding: 28px 20px; }
  .mb-nav-btn{ padding: 12px 22px; }
}