/* Careers lane, 09-Sep-2026. Openings hub, role pages, application form.
   Loads after main.css and interior.css; every class here is scoped to this
   lane so nothing leaks into the shared interior language. */

/* ---- editorial header, no image (hero A without the image column) ---- */
.chead{padding-top:clamp(124px,14vh,160px)}
.chead .crumb{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.chead .crumb a{color:var(--indigo);font-weight:600}
.chead .crumb span{padding:0 6px;color:var(--ink-faint)}
.chead h1{font-weight:700;font-size:clamp(2.75rem,5vw,4.75rem);line-height:1;letter-spacing:-.04em;color:var(--ink);max-width:14ch;text-wrap:balance;margin-top:clamp(28px,5vh,54px)}
.chead .dek{font-size:clamp(1.05rem,1.3vw,1.22rem);line-height:1.55;color:var(--ink-dim);max-width:46ch;margin-top:20px;text-wrap:pretty}
.chead-rule{height:1px;background:var(--rule);margin-top:clamp(28px,4vh,44px)}

/* ---- role meta line (role page) ---- */
.rmeta{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:22px;font-size:13.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.rmeta span{display:inline-flex;align-items:center}
.rmeta span+span::before{content:"";display:inline-block;width:1px;height:13px;background:var(--rule);margin:0 14px}
.rmeta b{font-weight:600;color:var(--ink)}

/* ---- roster ledger ---- */
.rl-group{margin-top:clamp(34px,5vh,56px)}
.rl-group:first-child{margin-top:0}
.rl-team{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.rl-team .n{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
/* Shared column tracks so every row lines up like a table (09-Sep-2026): title, team, location, type, arrow slot. The hover band is a pseudo element that reaches 16px past the text on both sides. */
.rl-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 6rem 13rem 11rem 1.125rem;gap:0 clamp(14px,1.6vw,24px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.rl-row::before{content:"";position:absolute;inset:4px -16px;border-radius:12px;background:var(--bg-soft);opacity:0;transition:opacity .25s var(--ease);z-index:-1}
.rl-row:hover::before,.rl-row:focus-within::before{opacity:1}
.rl-t{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.rl-t a{color:var(--ink);transition:color .2s var(--ease)}
.rl-t a::after{content:"";position:absolute;inset:0}
.rl-row:hover .rl-t a{color:var(--indigo)}
.rl-c{font-size:14px;color:var(--ink-dim);line-height:1.45;white-space:nowrap}
.rl-go{justify-self:end;align-self:center;color:var(--indigo);font-size:15px;line-height:1;opacity:0;transform:translateX(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.rl-row:hover .rl-go,.rl-row:focus-within .rl-go{opacity:1;transform:none}
/* Desktop: each group is one grid and its rows are subgrids, so the meta columns take the width of their widest cell in that group and the title keeps the rest (09-Sep-2026). The fixed tracks above stay as the fallback for browsers without subgrid. */
@media(min-width:900px){
  .rl-group{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content max-content 1.125rem;column-gap:clamp(14px,1.6vw,24px)}
  .rl-team{grid-column:1/-1}
  @supports (grid-template-columns:subgrid){
    .rl-row{grid-column:1/-1;grid-template-columns:subgrid}
  }
}
@media(min-width:900px) and (max-width:1199px){
  .rl-group{grid-template-columns:minmax(0,1fr) max-content max-content 1.125rem}
  .rl-row{grid-template-columns:minmax(0,1fr) 13rem 11rem 1.125rem}
  @supports (grid-template-columns:subgrid){
    .rl-row{grid-template-columns:subgrid}
  }
  .rl-c:first-of-type{display:none}
}
.rl-sum{grid-column:1/-1;font-size:14.5px;line-height:1.6;color:var(--ink-dim);max-width:62ch;margin-top:8px}
@media(max-width:899px){
  .rl-row{grid-template-columns:1fr;padding:20px 0;gap:0}
  .rl-t{font-size:1.08rem}
  .rl-c{display:block;font-size:13px;color:var(--ink-faint);white-space:normal;margin-top:4px}
  .rl-c:first-of-type{display:none}
  .rl-meta-m{margin-top:8px}
  .rl-go{display:none}
  .rl-sum{margin-top:8px}
}

/* ---- ledgers on the role page ---- */
.jd{list-style:none;margin:0;padding:0}
.jd li{padding:18px 0;border-bottom:1px solid var(--rule);font-size:1.04rem;line-height:1.6;color:var(--ink-2);display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 8px}
.jd li:first-child{border-top:1px solid var(--rule)}
.jd li::before{content:counter(jdi,decimal-leading-zero);counter-increment:jdi;font-size:12px;font-weight:700;color:var(--indigo);font-variant-numeric:tabular-nums;padding-top:.36em}
.jd{counter-reset:jdi}
.jd-plain li::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--indigo-soft);border:1.5px solid var(--indigo);margin-top:.55em;padding-top:0}
.jd-sub{margin-top:clamp(30px,4vh,44px)}
.jd-sub .lbl{display:block;margin-bottom:14px}
.rl-back{margin-top:clamp(30px,4vh,44px)}

/* ---- application form ---- */
.ap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;scroll-margin-top:110px}
.ap-head .lbl{display:block}
.ap-h{font-weight:700;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.05;letter-spacing:-.032em;max-width:16ch;margin-top:14px;text-wrap:balance}
.ap-note{font-size:1.02rem;line-height:1.65;color:var(--ink-dim);max-width:44ch;margin-top:16px}
.ap-note a{color:var(--indigo);font-weight:600;border-bottom:1px solid var(--indigo-soft)}
.ap-trust{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rule)}
.ap-trust li{font-size:13.5px;line-height:1.55;color:var(--ink-dim);padding:12px 0;border-bottom:1px solid var(--rule)}
.ap-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ap-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.ap-full{grid-column:1/-1}
.ap-f label{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.ap-opt{font-weight:400;color:var(--ink-faint)}
.ap-f input[type=text],.ap-f input[type=email],.ap-f input[type=tel],.ap-f input[type=url],.ap-f select,.ap-f textarea{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:12px;padding:13px 14px;width:100%;min-height:48px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ap-f textarea{min-height:112px;resize:vertical}
.ap-f input:focus,.ap-f select:focus,.ap-f textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}
.ap-f select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B707B' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 15px center}
.ap-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* The file picker is the secondary action: outlined, so Send application stays the one filled button (09-Sep-2026). */
.ap-f label.ap-pick{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:999px;background:#fff;color:var(--indigo);border:1.5px solid var(--indigo);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.ap-f label.ap-pick:hover{background:var(--indigo-soft)}
.ap-file input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ap-file input[type=file]:focus-visible+.ap-fname,.ap-file input[type=file]:focus-visible~.ap-fname{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.ap-fname{font-size:13.5px;color:var(--ink-faint)}
.ap-hint{font-size:12.5px;color:var(--ink-faint);margin-top:-2px}
.ap-consent{flex-direction:row;align-items:flex-start;gap:12px}
.ap-consent input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--indigo)}
.ap-consent label{font-size:13.5px;font-weight:400;line-height:1.55;color:var(--ink-dim)}
.ap-submit{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.ap-submit .btn{min-height:48px;padding:14px 30px;font-size:14px;border:0;font-family:inherit;line-height:1.2;cursor:pointer}
.ap-submit .btn[disabled]{opacity:.6;cursor:wait}
.ap-legal{font-size:12.5px;color:var(--ink-faint);max-width:34ch;line-height:1.5}
.ap-msg{grid-column:1/-1;font-size:14px;font-weight:600;line-height:1.5;border-radius:12px;max-height:0;padding:0 16px;overflow:hidden;transition:max-height .25s var(--ease),padding .25s var(--ease)}
.ap-msg.on{max-height:220px;padding:14px 16px}
.ap-msg.err{background:var(--bg-soft);color:var(--ink);border:1px solid var(--hair)}
.ap-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.ap-done{grid-column:2}
.ap-done:focus{outline:none}
.ap-done .ap-h{margin-top:0}
.ap-done .ap-note{max-width:52ch}
@media(max-width:899px){
  .ap{grid-template-columns:1fr;gap:30px}
  .ap-form{grid-template-columns:1fr}
  .ap-done{grid-column:1}
}

/* ---- invitation band variant used on both careers templates ---- */
.invite .btn-lg{white-space:nowrap}
/* Keep the reviewed closing paragraph at the former heading size. */
.invite .rl-invite-heading{color:#fff;font-weight:700;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.035em;line-height:1.02;max-width:16ch;margin-top:0}

/* ---- reduced motion: nothing here animates on its own, but hover lifts go ---- */
@media(prefers-reduced-motion:reduce){
  .rl-row,.rl-go,.ap-pick,.ap-msg{transition:none}
}