/* Careers (PLAN-SITE A10): one blank visiting card over a still of the night table, the open roles, the application.
   A quiet page on kit/v3e/site.css (the still, the hero, flow panels .fl on the reading glass, the form .fm, the
   Closing, the credits); this file adds the card, the roles' panels and the form's own layout. Prefix ca-.
   Motion: transform and opacity only. The card turns with the scroll (careers.js); reduced motion shows both faces. */

.ca-page { --ca-card-w: clamp(300px, 30vw, 440px); }

/* ============================================================ the hero: the words and the card, pinned while it turns */
html.fz-quiet .e-sec--hero.ca-hero { min-height: 140vh; min-height: 140svh; padding: 0; display: block; }
.ca-hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; column-gap: 24px; padding: 0 var(--g-m, max(48px, 5vw)); box-sizing: border-box; }
.ca-hero__x { margin-top: var(--z-title-top, 16vh); max-width: min(100%, var(--z-title-w, 620px)) !important; }
.ca-hero__x .xp__t { max-width: 13ch; }
.ca-card-stage { align-self: center; justify-self: center; perspective: 1500px; perspective-origin: 50% 40%; margin-top: 4vh; }
.ca-night img { object-position: 50% 62%; }

/* the card: a visiting card (85 x 55), warm paper-white light from the table's lamps on its edge */
.ca-card { position: relative; width: var(--ca-card-w); aspect-ratio: 85 / 55; transform-style: preserve-3d; transform: rotateX(7deg) rotateY(-17deg); will-change: transform; }
.ca-card__face { position: absolute; inset: 0; box-sizing: border-box; display: grid; align-content: start; padding: 7% 8%; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #1a1622; overflow: hidden;
  background: linear-gradient(160deg, #f6f2fa 0%, #ece6f3 54%, #e2daec 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -1px 0 rgba(0, 0, 0, 0.08) inset, 0 30px 70px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.ca-card__face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 214, 160, 0.22) 0%, rgba(255, 214, 160, 0) 38%, rgba(102, 45, 145, 0.06) 100%); }
.ca-card__back { transform: rotateY(180deg); background: linear-gradient(200deg, #2a1342 0%, #1a0d29 60%, #120a1d 100%); color: #efe9f7; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 30px 70px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
.ca-card__mark { width: 22px; height: 22px; fill: #662d91; margin-bottom: 7%; }
.ca-card__back .ca-card__mark { fill: #c9b6ea; }
.ca-card__title { margin: 0 0 6%; font: 600 clamp(26px, 2.5vw, 38px)/0.92 var(--font-title); font-stretch: 86%; letter-spacing: -0.035em; text-transform: uppercase; }
.ca-card__fields { margin: 0; display: grid; gap: 7px; }
.ca-card__fields div { display: grid; grid-template-columns: 9.5em 1fr; align-items: end; gap: 10px; }
.ca-card__fields dt { font-size: 10px; letter-spacing: 0.14em; color: #5a5266; }
.ca-card__fields dd { margin: 0; height: 1px; background: rgba(26, 22, 34, 0.28); align-self: end; margin-bottom: 4px; }
.ca-card__k { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.16em; color: #c9b6ea; }
.ca-card__roles { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 600 clamp(14px, 1.15vw, 17px)/1.15 var(--font-title); font-stretch: 90%; text-transform: uppercase; letter-spacing: -0.01em; }
.ca-card__roles li { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; }
.ca-card__n { font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em; color: #c9b6ea; }

/* ============================================================ the roles: three panels on the reading glass */
html.fz-quiet .e-sec.fl-sec.ca-roles { display: block; padding-top: clamp(24px, 6vh, 64px); }
.ca-roles__head { width: auto; margin-bottom: 26px; gap: 8px; }
.ca-roles__where { font-size: 10.5px; letter-spacing: 0.16em; color: var(--filament); }
.ca-roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; align-items: stretch; max-width: 1400px; }
.ca-role { width: auto; grid-template-rows: auto auto 1fr auto; gap: 12px; scroll-margin-top: calc(var(--nav-h, 72px) + 24px); }
.ca-role__n { font-size: 10.5px; letter-spacing: 0.16em; color: var(--filament); }
.ca-role__t { margin: 0; font: 600 clamp(22px, 1.9vw, 30px)/0.98 var(--font-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; }
.ca-role__dl { margin: 4px 0 0; display: grid; gap: 14px; align-content: start; }
.ca-role__row dt { font-size: 10px; letter-spacing: 0.16em; color: rgba(236, 233, 241, 0.72); margin-bottom: 6px; }
.ca-role__row dd { margin: 0; font: 400 15px/1.5 var(--font-body); color: rgba(236, 233, 241, 0.9); }
.ca-role__asks { margin: 0; padding-left: 1.05em; display: grid; gap: 6px; }
.ca-role__asks li::marker { color: var(--filament); }
.ca-role__apply { justify-self: start; margin-top: 6px; }
html:not(.v3-reduced) .ca-role.fl.is-in::before { transition-delay: calc(var(--i, 0) * 90ms); }

/* ============================================================ the application */
html.fz-quiet .e-sec.fl-sec.ca-apply { display: block; padding-top: clamp(24px, 6vh, 72px); }
.ca-apply__panel { width: min(100%, 1180px); scroll-margin-top: calc(var(--nav-h, 72px) + 16px); }
/* a desktop: the role and its questions on the left, about you and Send on the right */
.ca-form__a, .ca-form__b { display: grid; gap: 22px; align-content: start; min-width: 0; }
@media (min-width: 1000px) { .ca-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 44px; align-items: start; } .ca-form > .ca-sum, .ca-form > .ca-role-pick { grid-column: 1 / -1; } .ca-form__b { position: sticky; top: calc(var(--nav-h, 72px) + 24px); } }
.ca-apply__lead { margin: 0 0 6px; font: 400 15px/1.5 var(--font-body); color: rgba(236, 233, 241, 0.8); }
.ca-form { gap: 26px; }
.ca-apply__panel > *, .ca-form > *, .ca-qs > *, .ca-you > *, .ca-common > * { min-width: 0; }
.ca-form .fz-form__chips { gap: 8px; }
.ca-qs, .ca-you { margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid rgba(236, 233, 241, 0.1); display: grid; gap: 20px; min-width: 0; }
.ca-qs__k, .ca-you__k { padding: 0; margin-bottom: 2px; font: 500 10.5px/1.4 var(--font-mono) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament) !important; }
.ca-common { display: grid; gap: 20px; }
.ca-q legend.fz-form__label { margin-bottom: 10px; }
.fz-form__req { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.15em; }
.ca-you .fz-form__field { max-width: 560px; }
.ca-consent { margin: 0; font: 400 13.5px/1.55 var(--font-body); color: rgba(236, 233, 241, 0.78); max-width: 62ch; }
.ca-consent a { color: var(--signal); text-underline-offset: 3px; }
.ca-proto { margin: 0; font-size: 10px; letter-spacing: 0.14em; color: var(--gold); }
.ca-sum h3 { margin: 0; }
/* the thank-you, honest: what the applicant would receive, and what production would send */
.ca-done { display: grid; gap: 14px; }
.ca-done__t { margin: 0; font: 600 clamp(26px, 2.6vw, 40px)/1 var(--font-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; }
.ca-done__p { margin: 0; font: 400 16px/1.5 var(--font-body); color: rgba(236, 233, 241, 0.88); }
.ca-ack { margin: 0; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(236, 233, 241, 0.16); background: rgba(7, 6, 10, 0.5); display: grid; gap: 6px; font: 400 15px/1.5 var(--font-body); }
.ca-ack figcaption { font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); padding-bottom: 8px; border-bottom: 1px solid rgba(236, 233, 241, 0.1); margin-bottom: 4px; }
.ca-ack figcaption b { color: var(--signal); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 14px; }
.ca-ack p { margin: 0; }
.ca-json summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 10.5px; letter-spacing: 0.14em; color: var(--filament); }
.ca-json pre { margin: 0; max-height: 320px; overflow: auto; padding: 14px; border-radius: 10px; background: #0b0910; font: 400 12px/1.5 var(--font-mono); color: rgba(236, 233, 241, 0.86); white-space: pre-wrap; word-break: break-word; }
.ca-again { min-height: 44px; padding: 0; border: 0; background: none; color: var(--signal); font: 500 15px/1.2 var(--font-body); text-decoration: underline; text-decoration-color: var(--filament); text-underline-offset: 4px; cursor: pointer; }

/* ============================================================ the Closing */
html.fz-quiet .e-sec--cta.ca-cta { min-height: 52svh; display: grid; align-content: center; justify-items: center; padding: 12vh var(--g-m, max(48px, 5vw)); }
.ca-cta .xp { justify-items: center; text-align: center; }
.ca-cta .xp__h2 { max-width: 18ch; }
.ca-cta .xp__act { justify-content: center; gap: 16px 28px; }

/* ============================================================ narrower screens and phones */
@media (max-width: 1100px) { .ca-roles__list { grid-template-columns: minmax(0, 1fr); max-width: 760px; } }
@media (max-width: 760px) {
  .ca-page { --ca-card-w: min(78vw, 320px); }
  html.fz-quiet .e-sec--hero.ca-hero { min-height: 128svh; }
  .ca-form textarea.fz-form__input { min-height: 96px; }
  html.fz-quiet .e-sec--cta.ca-cta { min-height: 44svh; }
  .ca-hero__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 20px; }
  .ca-hero__x { margin-top: calc(var(--nav-h, 60px) + 4vh); }
  .ca-card-stage { align-self: center; margin-top: 0; }
  .ca-card__title { font-size: 26px; }
  .ca-card__fields div { grid-template-columns: 8.4em 1fr; }
  .ca-card__roles { font-size: 13.5px; }
  .ca-cta .xp__act { flex-direction: column; }
}

/* ============================================================ reduced motion: the card's two faces, side by side and still */
html.v3-reduced .ca-card { width: auto; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, var(--ca-card-w)); gap: 18px; transform: none !important; will-change: auto; }
html.v3-reduced .ca-card__face { position: relative; aspect-ratio: 85 / 55; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
html.v3-reduced .ca-card-stage { perspective: none; }
@media (max-width: 900px) { html.v3-reduced .ca-card { grid-template-columns: var(--ca-card-w); } }
html.v3-reduced .ca-hero { min-height: 100svh !important; }
html.v3-reduced .ca-hero__pin { position: relative; height: auto; min-height: 100svh; row-gap: 32px; padding-bottom: 8vh; }