/* Stella applications: a hand-held invitation, tuned to the existing night sky. */
.recruitment {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(36,25,51,.9),rgba(20,15,31,.91));
  border-top:1px solid rgba(242,212,164,.15);
  border-bottom:1px solid rgba(242,212,164,.15);
}
.recruitment::before {
  content:"";
  position:absolute;
  width:520px;
  aspect-ratio:1;
  top:-330px;
  inset-inline-start:10%;
  border:1px solid rgba(241,203,135,.2);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(241,203,135,.025),0 0 0 90px rgba(241,203,135,.018);
  pointer-events:none;
}
.recruitment-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:48px; position:relative; z-index:1; }
.recruitment-heading .section-intro { max-width:370px; margin-bottom:8px; }
.application-cards { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.application-card {
  --application-accent:#c7afe1;
  --application-soft:rgba(199,175,225,.16);
  min-width:0;
  display:grid;
  grid-template-columns:144px minmax(0,1fr);
  min-height:270px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--application-accent),transparent 68%);
  background:linear-gradient(130deg,rgba(60,43,74,.82),rgba(26,20,39,.9));
  box-shadow:0 20px 55px rgba(8,5,16,.14);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,background .35s ease;
}
.application-card-youtube { --application-accent:#e9a38f; --application-soft:rgba(233,163,143,.14); background:linear-gradient(130deg,rgba(66,42,49,.78),rgba(27,20,34,.92)); }
.application-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--application-accent),transparent 35%); }
.application-art { position:relative; width:112px; height:112px; min-height:0; justify-self:center; align-self:start; margin-block-start:62px; display:grid; place-items:center; }
.application-art::after { display:none; }
.application-art > img { position:relative; z-index:1; width:100%; height:100%; min-height:0; aspect-ratio:1; object-fit:cover; object-position:center; padding:0; border-radius:50%; border:2px solid color-mix(in srgb,var(--application-accent),transparent 25%); box-shadow:0 0 0 6px var(--application-soft),0 10px 25px rgba(7,5,14,.3); transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .25s ease; }
.application-card:hover .application-art > img { transform:translateY(-4px) scale(1.025); }
.application-orbit { display:none; }
.application-orbit::before,.application-orbit::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--application-accent),transparent 82%); border-radius:50%; inset:12%; }
.application-orbit::after { inset:-9%; border-style:dashed; }
.application-status { position:relative; align-self:flex-start; margin-bottom:12px; padding:6px 10px; border:1px solid rgba(238,224,250,.2); background:rgba(24,18,36,.82); backdrop-filter:blur(10px); border-radius:999px; color:#e7d9ef; font-size:10px; line-height:1.4; }
.application-status::before { content:""; display:inline-block; width:6px; height:6px; margin-inline-end:7px; border-radius:50%; background:#e7bd72; vertical-align:1px; }
.application-card[data-open="true"] .application-status::before { background:#b6d7b8; }
.application-card[data-open="false"] .application-art > img { width:100%; object-fit:cover; }
.application-card-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 20px 26px 24px; }
.application-index { direction:ltr; font:600 9px var(--font-ui); letter-spacing:.19em; color:var(--application-accent); opacity:.86; }
.application-card-copy h3 { margin:13px 0 8px; color:#fff2d6; font-size:clamp(19px,2vw,25px); font-weight:500; }
.application-card-copy p { margin:0; color:#d3c5dc; font-size:12px; line-height:2; }
.application-link { display:inline-flex; align-items:center; gap:12px; margin-top:20px; min-height:42px; padding:0 15px; border:1px solid color-mix(in srgb,var(--application-accent),transparent 40%); color:var(--application-accent); font-size:11px; transition:background .25s ease,transform .25s ease; }
.application-link:hover { transform:translateY(-2px); background:var(--application-soft); }
.application-link span { font-size:16px; transition:transform .25s ease; }
.application-link:hover span { transform:translateX(-3px); }
.application-link[aria-disabled="true"] { opacity:.57; cursor:not-allowed; border-style:dashed; }
.application-link[aria-disabled="true"]:hover { transform:none; background:transparent; }
.application-reason { color:#e7c1ba!important; margin-top:10px!important; font-size:10px!important; }
.recruitment-footnote { position:relative; z-index:1; margin:24px 0 0; color:#c0b1cc; font-size:11px; line-height:1.9; }

/* The two application rooms share a frame, but not a mood. */
.application-page {
  --app-accent:#c9b4e5;
  --app-warm:#f1d28f;
  min-height:100dvh;
  background:#171225;
  overflow-x:hidden;
}
.application-page-youtube { --app-accent:#f0a493; --app-warm:#f3c28c; }
.application-page-discord { --app-accent:#c9b4e5; --app-warm:#f1d28f; }
.application-page .celestial-sky-layer::before { background:linear-gradient(130deg,rgba(21,15,33,.74),rgba(20,14,27,.6)),url("/assets/celestial-sky.webp") center 42% / cover no-repeat; }
.application-page-youtube .celestial-sky-layer::before { background:linear-gradient(130deg,rgba(36,18,29,.72),rgba(30,16,27,.65)),url("/assets/celestial-sky.webp") center 42% / cover no-repeat; }
.application-header { position:absolute; }
.application-header .nav-wrap { width:min(1320px,calc(100% - 64px)); }
.application-back { display:inline-flex; gap:10px; align-items:center; color:#e8dced; font-size:12px; transition:color .2s ease; }
.application-back:hover { color:var(--app-warm); }
.application-back span { font-size:17px; }
.application-main { min-height:calc(100dvh - 78px); padding:125px 32px 75px; position:relative; z-index:1; }
.application-layout { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(300px,.83fr) minmax(480px,1.17fr); gap:clamp(38px,7vw,100px); align-items:start; }
.application-aside { padding-top:44px; position:sticky; top:35px; }
.application-eyebrow { display:flex; align-items:center; gap:10px; color:var(--app-warm); font-size:12px; }
.application-eyebrow span { display:block; width:7px; height:7px; border-radius:50%; background:var(--app-warm); box-shadow:0 0 0 5px color-mix(in srgb,var(--app-warm),transparent 87%); }
.application-aside h1 { margin:23px 0 13px; color:#fff0cf; font-size:clamp(49px,6vw,76px); font-weight:500; line-height:1.36; letter-spacing:-.04em; }
.application-aside h1 em { font-style:normal; color:var(--app-accent); }
.application-aside > p { max-width:390px; margin:0; color:#dfd2e5; font-size:14px; line-height:2.1; }
.portrait-stage { width:180px; height:180px; position:relative; display:grid; place-items:center; margin:0 auto 24px; isolation:isolate; }
.portrait-ring { position:absolute; inset:12px; border-radius:50%; border:1px solid color-mix(in srgb,var(--app-accent),transparent 50%); box-shadow:0 0 0 8px color-mix(in srgb,var(--app-accent),transparent 96%),0 0 0 18px color-mix(in srgb,var(--app-accent),transparent 97%); }
.portrait-ring::after { content:""; position:absolute; inset:-9px; border:1px dashed color-mix(in srgb,var(--app-warm),transparent 64%); border-radius:50%; animation:application-orbit 48s linear infinite; }
.application-portrait { position:relative; z-index:1; width:144px; height:144px; aspect-ratio:1; border-radius:50%; border:2px solid var(--app-accent); object-fit:cover; object-position:center; box-shadow:0 12px 28px rgba(6,4,12,.42); }
.application-aside-note { display:flex; align-items:flex-start; gap:13px; max-width:390px; padding-top:17px; border-top:1px solid rgba(239,221,250,.2); color:#cdbed7; }
.application-aside-note > span { direction:ltr; color:var(--app-accent); font:600 11px var(--font-ui); }
.application-aside-note p { margin:0; font-size:11px; line-height:1.9; }
.application-panel { position:relative; padding:29px clamp(22px,4vw,47px) 26px; border:1px solid color-mix(in srgb,var(--app-accent),transparent 72%); background:linear-gradient(150deg,rgba(39,29,54,.91),rgba(21,16,32,.94)); box-shadow:0 30px 80px rgba(7,4,14,.28); backdrop-filter:blur(15px); }
.application-page-youtube .application-panel { border-color:rgba(239,170,154,.3); background:linear-gradient(150deg,rgba(55,35,46,.91),rgba(28,19,31,.95)); }
.application-panel::before { content:""; position:absolute; top:-1px; right:16%; width:82px; height:2px; background:var(--app-accent); opacity:.8; }
.application-panel-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:29px; padding-bottom:15px; border-bottom:1px solid rgba(237,222,247,.13); }
.application-step { direction:ltr; font:600 8px var(--font-ui); letter-spacing:.18em; color:#a998b4; }
.application-dot { width:7px; height:7px; border-radius:50%; background:var(--app-accent); box-shadow:0 0 12px color-mix(in srgb,var(--app-accent),transparent 40%); }
.form-heading { margin-bottom:25px; }
.form-kicker { display:block; color:var(--app-warm); font-size:10px; letter-spacing:.04em; }
.form-heading h2,.closed-state h2 { margin:7px 0 7px; color:#fff0d5; font-size:29px; font-weight:500; }
.form-heading p,.closed-state p { margin:0; color:#cbbdd4; font-size:12px; line-height:2; }
.section-heading-row { display:flex; align-items:center; gap:13px; }
.question-portrait { width:52px; height:52px; flex:none; object-fit:contain; border:1px solid color-mix(in srgb,var(--app-accent),transparent 65%); border-radius:50%; background:color-mix(in srgb,var(--app-accent),transparent 93%); }
.section-heading-row h3 { margin:3px 0 0; color:#f6e9f7; font-size:17px; font-weight:500; }
.auth-section { padding:20px 0 21px; border-block:1px solid rgba(237,222,247,.15); }
.auth-explainer { margin:12px 0 10px; color:#cbbdd4; font-size:11px; line-height:2; }
.discord-login { margin-top:9px; width:min(100%,360px); justify-content:center; text-decoration:none; }
.discord-login span { margin-inline-start:8px; font-size:15px; }
.discord-login[aria-disabled="true"] { opacity:.5; pointer-events:none; cursor:not-allowed; }
.setup-message { margin:12px 0 0; padding:11px 13px; border-inline-start:2px solid #d7ad72; background:rgba(215,173,114,.09); color:#f1d9b1; font-size:10px; line-height:1.9; }
.setup-message[hidden] { display:none; }
.id-help { margin:0 0 15px; color:#d8cadf; font-size:10px; }
.id-help summary { display:inline-flex; cursor:pointer; color:var(--app-accent); text-decoration:underline; text-underline-offset:4px; }
.id-help p { margin:10px 0 0; line-height:2; color:#c6b6cf; }
.auth-form label,.form-field label,.interaction-field legend { display:block; margin-bottom:7px; color:#f0e6f2; font-size:11px; }
.auth-input-row { display:flex; gap:9px; }
.application-page input:not([type="radio"]):not([type="checkbox"]),.application-page textarea {
  width:100%; min-width:0; border:1px solid rgba(230,211,241,.23); border-radius:2px; padding:11px 12px;
  color:#fff1e1; background:rgba(14,11,23,.53); font:12px var(--font-ar); transition:border-color .2s ease,background .2s ease;
}
.application-page input::placeholder,.application-page textarea::placeholder { color:#81758e; }
.application-page input:focus,.application-page textarea:focus { outline:none; border-color:var(--app-accent); background:rgba(15,11,24,.8); }
.auth-input-row input { min-height:46px; }
.application-page .button { flex:none; min-height:45px; padding-inline:17px; border-radius:2px; font-size:10px; }
.application-page .button-primary { color:#2b2039; background:var(--app-warm); box-shadow:none; }
.application-page .button-primary:hover { background:#ffe2ae; }
.application-page .button:disabled { opacity:.55; cursor:wait; transform:none; }
.field-hint { display:block; margin:7px 0 0; color:#a99aaf; font-size:9px; line-height:1.8; }
.text-button { margin-top:8px; padding:3px 0; border:0; background:none; color:var(--app-accent); text-decoration:underline; text-underline-offset:3px; font-size:10px; cursor:pointer; }
.form-message { min-height:20px; margin:8px 0 0; color:#f0c1b5; font-size:10px; line-height:1.8; }
.form-message.is-success { color:#c3dfbf; }
.application-form { padding-top:22px; }
.form-section-title { margin-bottom:18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-field { margin:0 0 15px; }
.form-field label span { color:#a99aaf; font-size:9px; margin-inline-start:6px; }
.form-field input:not([type="radio"]):not([type="checkbox"]) { min-height:42px; }
.application-page textarea { min-height:85px; resize:vertical; line-height:1.8; }
.form-field > small { display:block; margin-top:5px; color:#a99aaf; font-size:9px; }
.interaction-field { border:0; padding:0; }
.interaction-field legend { padding:0; }
.choice-row { display:flex; gap:8px; }
.choice { flex:1; cursor:pointer; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { display:grid; place-items:center; min-height:41px; border:1px solid rgba(230,211,241,.2); color:#cfc0d6; font-size:10px; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.choice input:checked + span { border-color:var(--app-accent); color:#fff0d6; background:color-mix(in srgb,var(--app-accent),transparent 89%); }
.choice input:focus-visible + span { outline:2px solid var(--app-warm); outline-offset:3px; }
.confirm-choice { display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:13px; border:1px solid color-mix(in srgb,var(--app-accent),transparent 72%); background:color-mix(in srgb,var(--app-accent),transparent 96%); color:#f3e7f2; font-size:11px; line-height:1.8; cursor:pointer; }
.confirm-choice input { flex:none; width:17px; height:17px; margin:2px 0 0; accent-color:var(--app-accent); }
.verification-note { margin:11px 0 17px; color:#b9a9c2; font-size:9px; line-height:1.9; }
.geo-privacy { margin:16px 0 18px; padding:15px; border:1px solid color-mix(in srgb,var(--app-accent),transparent 72%); background:linear-gradient(130deg,color-mix(in srgb,var(--app-accent),transparent 94%),rgba(15,11,23,.35)); }
.geo-privacy-heading { display:flex; align-items:center; gap:11px; }
.geo-privacy-heading .question-portrait { width:42px; height:42px; }
.geo-privacy-heading h3 { margin:3px 0 0; color:#f6e9f7; font-size:13px; font-weight:500; }
.geo-privacy > p { margin:11px 0 13px; color:#c5b6ce; font-size:9px; line-height:2; }
.geo-consent { display:flex; align-items:flex-start; gap:9px; padding-top:11px; border-top:1px solid rgba(237,222,247,.13); color:#eadfee; font-size:10px; line-height:1.9; cursor:pointer; }
.geo-consent input { flex:none; width:16px; height:16px; margin:2px 0 0; accent-color:var(--app-accent); }
.submit-application { width:100%; justify-content:center; }
.submit-application span { font-size:15px; margin-inline-start:8px; }
.availability-banner { margin:0 0 18px; padding:11px 13px; border-inline-start:2px solid #d7ad72; background:rgba(215,173,114,.09); color:#f1d9b1; font-size:10px; line-height:1.9; }
.availability-banner.is-closed { border-color:#da9d91; background:rgba(218,157,145,.1); color:#f2c7bd; }
.closed-state { min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.closed-portrait { width:132px; height:132px; object-fit:cover; border-radius:50%; border:2px solid var(--app-accent); margin-bottom:14px; box-shadow:0 0 0 6px rgba(230,211,241,.07); filter:drop-shadow(0 8px 20px rgba(9,6,16,.35)); }
.closed-state h2 { margin-top:9px; }
.closed-state p { max-width:340px; margin:0 auto 22px; }
.application-load-state { min-height:270px; display:grid; place-items:center; color:#d5c2dc; font-size:12px; }
.application-load-state.is-error { color:#f0bdb4; }
.success-state { padding:35px 5px; text-align:center; }
.success-portrait { width:115px; height:115px; object-fit:contain; margin:0 auto 16px; }
.success-state h3 { margin:8px 0; color:#fff0d6; font-size:22px; font-weight:500; }
.success-state > p { color:#cfc0d7; font-size:11px; line-height:1.9; }
.application-reference { display:inline-flex; align-items:center; gap:14px; padding:10px 15px; border:1px solid color-mix(in srgb,var(--app-accent),transparent 60%); }
.application-reference span { color:#bbaac6; }.application-reference b { color:var(--app-warm); font:600 12px var(--font-ui); }
.form-home-link { display:flex; justify-content:center; gap:8px; margin-top:22px; color:#ad9db8; font-size:10px; }
.form-home-link:hover { color:var(--app-warm); }
.application-footer { position:relative; z-index:1; }
.application-footer a { color:#e4d4ec; font-family:var(--font-ar); }
.application-page [hidden] { display:none!important; }
@keyframes application-orbit { to { transform:rotate(360deg); } }
@media(max-width:900px) {
  .application-layout { grid-template-columns:minmax(230px,.68fr) minmax(420px,1.32fr); gap:32px; }
  .application-aside h1 { font-size:55px; }
  .application-card { grid-template-columns:124px minmax(0,1fr); }
  .application-art { width:100px; height:100px; }
}
@media(max-width:700px) {
  .recruitment-heading { display:block; }
  .recruitment-heading .section-intro { margin-top:17px; }
  .application-cards { grid-template-columns:1fr; gap:15px; }
  .application-card { min-height:230px; grid-template-columns:112px minmax(0,1fr); }
  .application-art { width:88px; height:88px; }
  .application-main { padding:101px 20px 48px; }
  .application-header .nav-wrap { width:calc(100% - 38px); }
  .application-layout { width:min(540px,100%); grid-template-columns:1fr; gap:18px; }
  .application-aside { position:relative; top:auto; padding-top:12px; text-align:center; }
  .application-aside h1 { margin:15px 0 7px; font-size:clamp(39px,11vw,55px); line-height:1.25; }
  .application-eyebrow { justify-content:center; }
  .application-aside > p { max-width:450px; margin:auto; font-size:12px; }
  .portrait-stage { width:148px; height:148px; margin:0 auto 20px; }
  .application-portrait { width:116px; height:116px; }
  .application-aside-note { display:none; }
  .application-panel { padding:23px 20px 23px; }
  .application-panel-top { margin-bottom:22px; }
}
@media(max-width:430px) {
  .application-card { grid-template-columns:96px minmax(0,1fr); min-height:220px; }
  .application-art { width:76px; height:76px; }
  .application-status { top:9px; inset-inline-start:5px; padding:5px 7px; font-size:8px; }
  .application-card-copy { padding:20px 13px 17px; }
  .application-card-copy h3 { font-size:17px; margin-top:10px; }
  .application-card-copy p { font-size:10px; }
  .application-index { font-size:7px; }
  .application-link { margin-top:13px; min-height:38px; gap:6px; padding-inline:9px; font-size:9px; }
  .application-panel { padding-inline:16px; }
  .auth-input-row { align-items:stretch; flex-direction:column; }
  .application-page .auth-input-row .button { width:100%; }
  .form-grid { gap:9px; }
  .form-field label { font-size:10px; }
  .application-page input:not([type="radio"]):not([type="checkbox"]),.application-page textarea { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .portrait-ring::after,.application-portrait { animation:none!important; }
}