/* ---- apply page: kf-12 backdrop, one centred card ---- */
.apply-body { background: var(--ink); min-height: 100vh; }
.apply-backdrop {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: blur(24px) brightness(.4); transform: scale(1.08); z-index: 0;
}
.apply-tint { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14, 1, 70, .55), rgba(9, 11, 18, .75) 60%, var(--ink)); }
.header-static { position: absolute; z-index: 2; }

/* The ground (Plan 20): the tree's boughs at the head and roots at the foot, as light, laid over the tint
   and under the card. simple.css's rules, without the scroll drift: this page has no script for it. The
   seed's light sits behind the card, breathing on opacity alone. */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ground img { position: absolute; width: clamp(180px, 26vw, 480px); height: auto; }
.ground .bough-left { top: -3vh; left: -2vw; }
.ground .bough-right { top: -3vh; right: -2vw; }
.ground .root-left { bottom: -6vh; left: -2vw; }
.ground .root-right { bottom: -6vh; right: -2vw; }
.apply-light {
  position: absolute; left: 50%; top: -10vh; width: min(96vw, 980px); height: 70vh; transform: translateX(-50%);
  background: radial-gradient(48% 46% at 50% 32%, rgba(211, 165, 74, .26), rgba(143, 163, 255, .13) 46%, transparent 72%);
  animation: breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .72; } to { opacity: 1; } }

/* The simple site's nav, styled here rather than by loading simple.css: that sheet lays its own page and
   would fight the kf-12 backdrop this page is built on. The rules are simple.css's pill (Plan 20), minus
   the parts that belong to a sticky header: glass, so the links read over the boughs behind them. */
.site-nav { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: .15rem; padding: .3rem .4rem; border-radius: 999px;
  background: rgba(20, 18, 40, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(207, 199, 216, .14), 0 8px 30px -18px #000;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.site-nav a {
  font: 500 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist); text-decoration: none; padding: .5rem .8rem; border-radius: 999px;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ivory); }
/* On a phone the header wraps, the pill dropping under the brand, and the card starts below both. */
@media (max-width: 700px) {
  .header-static { flex-wrap: wrap; gap: .5rem; }
  .pill { padding: .2rem .25rem; }
  .site-nav a { font-size: .66rem; letter-spacing: .08em; padding: .45rem .55rem; }
  .apply-card { margin-top: 7.5rem; }
}
.apply { position: relative; z-index: 1; perspective: 1400px; }
/* The card arrives once (Plan 20): opacity and a short rise, on the card's container rather than the card,
   because the card's own transform is the pointer tilt and a filled animation would sit on top of it. */
.apply { animation: card-arrive .9s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The card is a slab: a translucent blurred panel with a hairline, a 1px inner top highlight, an offset thickness
   panel behind it (a hard box-shadow with its own hairline), a layered long shadow, and a pointer tilt of at most
   1 degree (apply.mjs sets --rx/--ry; off under reduced motion and on touch). There is deliberately no CSS
   transition on the transform: apply.mjs damps the movement itself, a frame at a time, and a transition on top of
   that damps the damping - the card ends up swimming after the pointer instead of following it. */
.apply-card {
  width: min(92vw, 760px); min-height: 80vh; margin: 12vh auto 10vh; padding: 3rem clamp(1.4rem, 5vw, 3.6rem) 3.2rem;
  background: rgba(9, 11, 18, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--violet-muted); border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(249, 244, 245, .12),
    10px 12px 0 0 rgba(20, 14, 40, .38),
    11px 13px 0 0 rgba(112, 88, 124, .2),
    0 24px 48px -16px rgba(5, 5, 7, .7),
    0 60px 120px -30px rgba(5, 5, 7, .8),
    0 100px 200px -60px rgba(14, 1, 70, .6);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.apply-card-mark { width: 72px; height: auto; }
.apply-card-word { margin-top: 1rem; font-size: 1.2rem; }
.apply-card h1 { margin-top: 1.4rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.apply-status { margin-top: .9rem; font: 500 .78rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.apply-lede { margin-top: 1.2rem; max-width: 30rem; color: var(--mist); }
.apply-card form { width: 100%; margin-top: 2.4rem; text-align: left; }
.movement { position: relative; margin: 0 0 1.2rem; padding: 0 0 .6rem; border: 0; border-bottom: 1px solid rgba(112, 88, 124, .3); }
.movement:last-of-type { border-bottom: 0; }
/* Each movement's hairline catches a light once on entrance, one after the other. */
.movement::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(249, 244, 245, .5) 42%, rgba(143, 163, 255, .9) 50%, rgba(249, 244, 245, .5) 58%, transparent) -60% 0 / 40% 100% no-repeat;
  animation: hair-sweep 1.5s ease-out forwards; animation-delay: calc(.4s + var(--m, 0) * .26s);
}
.movement:nth-of-type(2) { --m: 1; }
.movement:nth-of-type(3) { --m: 2; }
.movement:last-of-type::after { display: none; }
@keyframes hair-sweep { 0% { opacity: 0; background-position: -60% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } }
.reduced .apply-card { transform: none; transition: none; }
.reduced .movement::after, .reduced .apply, .reduced .apply-light { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .apply-card { transform: none; transition: none; }
  .movement::after, .apply, .apply-light { animation: none; }
}
.movement-title { padding: 0; margin-bottom: .2rem; font: italic 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--font-head); color: var(--ivory); }
.movement-help { margin: 0 0 1.2rem; color: var(--violet-muted); font-size: .9rem; }
.movement-title + .field, .movement-title + .form-grid { margin-top: 1.2rem; }
.form-note { margin: 0 0 1.6rem; font-size: .9rem; color: var(--violet-muted); }
.sent br { display: block; margin-top: .5rem; content: ''; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.field { display: block; margin: 0 0 1.4rem; }
.field > span, .choices legend { display: block; margin-bottom: .5rem; font: 600 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.field small { display: block; margin-top: .4rem; color: var(--violet-muted); font-size: .85rem; }
.field input, .field textarea {
  width: 100%; padding: .8rem .95rem; border-radius: 6px;
  background: rgba(249, 244, 245, .04); border: 1px solid rgba(200, 184, 219, .25);
  color: var(--ivory); font: 400 1rem/1.5 var(--font-body);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(200, 184, 219, .45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mist); box-shadow: 0 0 0 3px rgba(21, 16, 107, .45); }
.choices { border: 0; padding: 0; margin: 0 0 1.4rem; }
.choices label { display: inline-flex; align-items: center; gap: .5rem; margin: .3rem 1.4rem .3rem 0; color: var(--ivory); }
.choices input, .consent input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.consent { display: flex; align-items: flex-start; gap: .7rem; margin: .4rem 0 1.8rem; color: var(--ivory); }
.consent input { flex: none; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-card .button, .apply-card .cta { display: block; margin: .4rem auto 0; }
.sent, .failed { width: 100%; margin: 1.6rem 0 0; padding: 1.1rem 1.4rem; text-align: left; border-left: 2px solid var(--gold); background: rgba(211, 165, 74, .06); color: var(--ivory); }
.sent:target { display: block; }
.failed { border-left-color: #c0564f; background: rgba(192, 86, 79, .08); margin-bottom: 1.6rem; }
.failed p { margin: 0; }
.failed a { color: var(--mist); }
.errors { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--mist); font-size: .9rem; }
.errors:empty { display: none; }

@media (max-width: 1180px) and (min-width: 701px) {
  .ground img { width: clamp(150px, 19vw, 260px); opacity: .75; }
  .ground .bough-left, .ground .root-left { left: -7vw; }
  .ground .bough-right, .ground .root-right { right: -7vw; }
}
@media (max-width: 700px) { .ground img { width: 42vw; opacity: .55; } }
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .apply-card { margin-top: 14vh; padding-top: 2.4rem; }
  .choices label { display: flex; margin-right: 0; }
}