/* Opportunities — the open call: internships & creative collaborations.
   Same ethereal language as the atelier: aura hero, glass panels, beacon
   headings, scroll reveals. */
:root { --opp-ease: cubic-bezier(.22,1,.36,1); }

.opp { position:relative; width:min(100% - 48px,880px); margin-inline:auto; }
.opp-hero { position:relative; isolation:isolate; padding:96px 0 30px; text-align:center; }
.opp-hero .atelier-bokeh { z-index:-1; opacity:.5; }
html.dark .opp-hero .atelier-bokeh { opacity:.32; }
.opp-eyebrow { display:inline-block; font:400 .72rem/1.6 var(--font-brand); letter-spacing:.26em; text-transform:uppercase; color:var(--eyebrow-ink); }
.opp-hero h1 { position:relative; margin:.35em 0 .3em; font:400 clamp(2.7rem,7.6vw,4.6rem)/1.15 var(--font-script); color:var(--text-primary); text-shadow:var(--halo); }
.opp-hero .opp-aura { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:min(54rem,130vw); aspect-ratio:1.6/1; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.85) 0%,rgba(226,215,246,.38) 34%,rgba(214,228,255,.16) 56%,transparent 72%);
  filter:blur(24px); animation:opp-aura 7s ease-in-out infinite; }
html.dark .opp-hero .opp-aura { background:radial-gradient(ellipse,rgba(186,198,238,.26),rgba(150,162,212,.10) 40%,transparent 72%); }
@keyframes opp-aura { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.85; } 50% { transform:translate(-50%,-50%) scale(1.06); opacity:1; } }
.opp-hero .lead { max-width:56ch; margin:14px auto 0; color:var(--text-secondary); font:400 1.02rem/1.75 var(--font-body); }
.opp-flourish { display:flex; align-items:center; justify-content:center; gap:14px; margin:26px auto 0; color:var(--highlight); }
.opp-flourish::before,.opp-flourish::after { content:''; height:1px; width:64px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--eyebrow-ink) 45%,transparent)); }
.opp-flourish::after { background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--eyebrow-ink) 45%,transparent)); }
.opp-flourish i { font-style:normal; font-size:.85rem; color:var(--accent); text-shadow:0 0 10px rgba(201,182,232,.9); animation:flourish-tw 4.6s ease-in-out infinite; }
@keyframes flourish-tw { 0%,100% { opacity:.45; transform:scale(.85) rotate(0deg); } 50% { opacity:1; transform:scale(1.12) rotate(16deg); } }

/* Honesty first — the unfunded banner */
.opp-honesty { position:relative; margin:26px auto 0; padding:20px 24px; border-radius:var(--card-radius,20px);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 55%,transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -30px rgba(35,58,114,.4), inset 0 1px 0 rgba(255,255,255,.5);
  font:400 .92rem/1.7 var(--font-body); color:var(--text-secondary); }
/* Demo of the lilac tint ramp: full-scale lightest→darkest accent across the top edge */
.opp-honesty::before { content:''; position:absolute; top:0; left:14px; right:14px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--lilac-100),var(--lilac-200) 34%,var(--lilac-300) 67%,var(--lilac-400)); }
.opp-honesty strong { color:var(--text-primary); }
.opp-honesty .opp-tag { display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; font:500 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.opp-honesty .opp-tag::before { content:'✦'; font-size:.8rem; text-shadow:0 0 8px rgba(201,182,232,.9); }

/* Language pill on the translator role card — second demo of the lilac ramp */
.opp-lang { display:inline-block; margin:.1rem 0 1rem; padding:.5rem .9rem; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--lilac-300) 55%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--lilac-100) 55%,transparent),color-mix(in srgb,var(--lilac-200) 38%,transparent));
  font:500 .68rem/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }

/* Sections */
.opp-section { position:relative; margin-top:64px; }
.opp-heading { position:relative; isolation:isolate; text-align:center; margin-bottom:26px; }
.opp-beacon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(28rem,84vw); aspect-ratio:2.1/1; z-index:-1; pointer-events:none;
  filter:blur(26px); opacity:.85; background:radial-gradient(ellipse,rgba(255,255,255,.9) 0%,rgba(226,215,246,.42) 40%,rgba(214,228,255,.18) 62%,transparent 76%);
  animation:beacon-breathe 6.5s ease-in-out infinite; }
html.dark .opp-beacon { opacity:.5; background:radial-gradient(ellipse,rgba(186,198,238,.28),rgba(150,162,212,.12) 42%,transparent 74%); }
@keyframes beacon-breathe { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.8; } 50% { transform:translate(-50%,-50%) scale(1.06); opacity:1; } }
.opp-heading h2 { margin:0; font:400 clamp(1.8rem,4.2vw,2.5rem)/1.25 var(--font-display); color:var(--text-primary); text-shadow:var(--halo); }
.opp-heading h2::first-letter { font-family:var(--font-script); font-size:1.45em; color:var(--accent); }
.opp-heading p { max-width:52ch; margin:10px auto 0; color:var(--text-secondary); font:400 .98rem/1.7 var(--font-body); }

/* Path cards */
.opp-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.opp-path { position:relative; padding:26px 26px 24px; border-radius:var(--card-radius,20px); overflow:hidden;
  border:1px solid color-mix(in srgb,var(--surface-border) 78%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 52%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 20px 44px -30px rgba(35,58,114,.4), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .4s var(--opp-ease), border-color .25s ease, box-shadow .45s var(--opp-ease); }
html.dark .opp-path { background:color-mix(in srgb,var(--surface-solid) 7%,transparent); box-shadow:0 20px 44px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); }
.opp-path::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(90% 120% at 85% 8%,rgba(201,182,232,.3),transparent 55%); }
.opp-path:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 28px 52px -28px rgba(46,84,173,.5), 0 0 28px -8px rgba(201,182,232,.55), inset 0 1px 0 rgba(255,255,255,.65); }
.opp-path:hover::before { opacity:1; }
.opp-path .opp-tag { display:inline-flex; align-items:center; gap:8px; font:500 .66rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--eyebrow-ink); }
.opp-path .opp-tag::before { content:'✦'; color:var(--accent); font-size:.8rem; text-shadow:0 0 8px rgba(201,182,232,.9); }
.opp-path h3 { margin:12px 0 10px; font:500 1.35rem/1.35 var(--font-display); color:var(--text-primary); }
.opp-path p { margin:0 0 14px; font:400 .92rem/1.7 var(--font-body); color:var(--text-secondary); }
.opp-path ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.opp-path li { position:relative; padding-left:20px; font:400 .88rem/1.6 var(--font-body); color:var(--text-secondary); }
.opp-path li::before { content:'—'; position:absolute; left:0; color:var(--accent); }

/* Contribution areas */
.opp-areas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.opp-area { padding:22px 24px; border-radius:var(--card-radius,20px);
  border:1px solid color-mix(in srgb,var(--surface-border) 78%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 46%,transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -30px rgba(35,58,114,.38), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .4s var(--opp-ease), border-color .25s ease, box-shadow .45s var(--opp-ease); }
html.dark .opp-area { background:color-mix(in srgb,var(--surface-solid) 6%,transparent); }
.opp-area:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 38%,transparent); box-shadow:0 26px 48px -26px rgba(46,84,173,.48), 0 0 26px -8px rgba(201,182,232,.5); }
.opp-area h3 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font:500 1.02rem/1.4 var(--font-display); color:var(--text-primary); }
.opp-area h3 .opp-num { font:500 .64rem/1 var(--font-body); letter-spacing:.18em; color:var(--eyebrow-ink); }
.opp-area ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.opp-area li { padding:6px 13px; border-radius:999px; border:1px solid color-mix(in srgb,var(--surface-border) 85%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 40%,transparent); font:400 .78rem/1.5 var(--font-body); color:var(--text-secondary); }
.opp-pitch { margin-top:16px; text-align:center; font:400 .92rem/1.7 var(--font-body); color:var(--text-secondary); }
.opp-pitch strong { color:var(--accent); font-weight:500; }

/* Qualities */
.opp-qualities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 28px; max-width:720px; margin:0 auto; }
.opp-qualities li { position:relative; padding:10px 0 10px 30px; font:400 .95rem/1.65 var(--font-body); color:var(--text-secondary); border-bottom:1px solid color-mix(in srgb,var(--surface-border) 60%,transparent); list-style:none; }
.opp-qualities li::before { content:'✦'; position:absolute; left:4px; top:12px; font-size:.75rem; color:var(--accent); text-shadow:0 0 8px rgba(201,182,232,.85); }
.opp-qualities ul { margin:0; padding:0; }
.opp-qualities { list-style:none; margin:0; padding:0; }

/* Expectations */
.opp-expect { max-width:70ch; margin:0 auto; font:400 .95rem/1.8 var(--font-body); color:var(--text-secondary); }
.opp-expect p { margin:0 0 14px; }
.opp-expect strong { color:var(--text-primary); }
.opp-fine { max-width:70ch; margin:18px auto 0; padding:16px 20px; border-radius:14px; border:1px dashed color-mix(in srgb,var(--surface-border) 90%,transparent);
  font:400 .8rem/1.7 var(--font-body); color:var(--text-secondary); }

/* ---------- The application ---------- */
.opp-form { max-width:720px; margin:0 auto; }
.opp-form .field { margin-bottom:1.15rem; }
.opp-form .field label { font-family:var(--font-body); }
.opp-form .req { color:var(--accent); }
.opp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.opp-form .hint { font-size:.8rem; line-height:1.5; color:var(--text-secondary); margin-top:-0.1rem; }
.opp-wordcount { font-size:.74rem; color:var(--text-secondary); text-align:right; margin-top:2px; }
.opp-wordcount.ok { color:#3d7a52; }

.opp-path-pick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:6px 0 1.15rem; }
.opp-pick { position:relative; }
.opp-pick input { position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; }
.opp-pick span { display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 14px; text-align:center;
  border-radius:999px; border:1px solid color-mix(in srgb,var(--surface-border) 85%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 46%,transparent);
  font:500 .84rem/1.4 var(--font-body); color:var(--text-secondary);
  transition:border-color .2s ease, color .2s ease, box-shadow .3s ease, background .2s ease; }
.opp-pick input:checked + span { border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:0 0 20px -6px rgba(201,182,232,.7); }
.opp-pick input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

.opp-conditional { border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent); padding-left:16px; margin:-4px 0 1.15rem; }
.opp-conditional[hidden] { display:none; }

.opp-ack { display:flex; gap:12px; align-items:flex-start; margin:1.3rem 0 .6rem; padding:16px 18px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--surface-border) 85%,transparent); background:color-mix(in srgb,var(--surface-solid) 46%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer; }
.opp-ack input { width:20px; height:20px; margin-top:2px; accent-color:var(--accent); flex:none; cursor:pointer; }
.opp-ack span { font:400 .86rem/1.65 var(--font-body); color:var(--text-secondary); }
.opp-ack:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 0 22px -8px rgba(201,182,232,.65); }

.opp-privacy { font:400 .78rem/1.7 var(--font-body); color:var(--text-secondary); margin:.8rem 0 1.4rem; }

/* Primary pill — self-contained base: links.css defines .bio-primary site-wide,
   but this page doesn't load it, so the base lives here to match. */
.bio-primary { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 28px;
  border-radius:999px; overflow:hidden; text-decoration:none; cursor:pointer;
  color:var(--cta-text,#fff); background:var(--accent); font:500 .8rem/1.5 var(--font-body); letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 14px 30px -16px rgba(35,58,114,.55), 0 0 22px -8px rgba(138,147,222,.55);
  transition:filter .25s ease, box-shadow .35s ease, transform .35s ease; }
.bio-primary::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);
  transform:translateX(-120%); transition:transform .8s ease; }
.bio-primary:hover { filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 18px 36px -16px rgba(35,58,114,.6), 0 0 30px -6px rgba(201,182,232,.75); }
.bio-primary:hover::after { transform:translateX(120%); }

.opp-submit { display:flex; justify-content:center; }
.opp-submit .bio-primary { border:0; }

/* Review panel */
.opp-review { max-width:720px; margin:26px auto 0; padding:24px 26px; border-radius:var(--card-radius,20px);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 60%,transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -30px rgba(46,84,173,.5); }
.opp-review[hidden] { display:none; }
.opp-review h3 { margin:0 0 6px; font:500 1.2rem/1.4 var(--font-display); color:var(--text-primary); }
.opp-review>p { margin:0 0 16px; font:400 .88rem/1.7 var(--font-body); color:var(--text-secondary); }
.opp-review pre { white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto; margin:0 0 16px; padding:16px 18px;
  border-radius:12px; border:1px solid color-mix(in srgb,var(--surface-border) 80%,transparent);
  background:color-mix(in srgb,var(--surface-solid) 70%,transparent); font:400 .82rem/1.6 var(--font-body); color:var(--text-primary); }
.opp-review-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.opp-review-actions .bio-primary { border:0; cursor:pointer; font:inherit; font-weight:500; }
.opp-review-actions .bio-ghost { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px;
  border-radius:999px; border:1px solid color-mix(in srgb,var(--surface-border) 90%,transparent); background:transparent;
  color:var(--accent); font:500 .82rem/1.5 var(--font-body); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:border-color .2s ease, box-shadow .3s ease; }
.opp-review-actions .bio-ghost:hover { border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 0 20px -6px rgba(201,182,232,.65); }

/* Footer */
.opp-footer { position:relative; padding:30px 0 40px; margin-top:70px; text-align:center; }
.opp-footer::before { content:'✦'; position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:.8rem; color:var(--accent); text-shadow:0 0 10px rgba(201,182,232,.9); }
.opp-footer::after { content:''; position:absolute; top:.55rem; left:50%; transform:translateX(-50%); width:min(360px,72%); height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--eyebrow-ink) 35%,transparent) 18%,color-mix(in srgb,var(--eyebrow-ink) 35%,transparent) 82%,transparent); }
.opp-footer p { margin:14px 0 0; font:400 .82rem/1.7 var(--font-body); color:var(--text-secondary); }
.opp-footer a { color:var(--accent); text-decoration:none; }
.opp-footer a:hover { text-decoration:underline; text-underline-offset:4px; }

@media(max-width:680px) {
  .opp { width:calc(100% - 40px); }
  .opp-hero { padding-top:84px; }
  .opp-paths, .opp-areas, .opp-form-grid { grid-template-columns:1fr; }
  .opp-path-pick { grid-template-columns:1fr; }
  .opp-qualities { grid-template-columns:1fr; }
  .opp-section { margin-top:52px; }
}

html:is(.mono,.hc) .opp-hero .opp-aura,
html:is(.mono,.hc) .opp-beacon,
html:is(.mono,.hc) .opp-hero .atelier-bokeh,
html:is(.mono,.hc) .opp-flourish i { display:none; animation:none; }
html:is(.mono,.hc) .opp h1, html:is(.mono,.hc) .opp h2 { text-shadow:none; }
html:is(.mono,.hc) .opp-path, html:is(.mono,.hc) .opp-area, html:is(.mono,.hc) .opp-honesty,
html:is(.mono,.hc) .opp-ack, html:is(.mono,.hc) .opp-pick span { background:var(--surface-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
html.rm .opp *, html.rm .opp *::after { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .opp *, .opp *::after { animation:none!important; transition:none!important; } }