/* careers.css — the careers page: identity block, open roles, open application,
   the application form with its feedback panels, and the founders module.
   Header, nav, footer and the founders strip are chrome.css's; this sheet only
   styles the page sections. Light-only, one breakpoint at 980px (700px for the
   form grid). */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-display);-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--sel-bg);color:var(--sel-ink)}
  /* Author display rules on .form and .panel would otherwise beat the UA's [hidden]. */
  [hidden]{display:none!important}

  .mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:var(--ink-2)}
  .mono.dim{color:var(--mute)}
  .red{color:var(--red)}
  .container{max-width:1480px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

  .btn{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--btn);color:var(--btn-ink);padding:18px 24px;border-radius:0;
    font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:-.01em;
    border:1px solid transparent;cursor:pointer;
    transition:background .2s ease,border-color .2s ease;
  }
  .btn:hover{background:var(--btn-hover)}
  .btn .arr{width:18px;height:10px;position:relative}
  .btn .arr::before{content:"";position:absolute;left:0;right:4px;top:50%;height:1.5px;background:currentColor}
  .btn .arr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
  .btn-ghost:hover{background:var(--bg-2);border-color:var(--ink)}

  /* Section headings share one voice. */
  h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.03em;font-weight:500;margin:0;max-width:22ch;text-wrap:balance;line-height:1.02}

  /* ---------- identity block ---------- */
  .hero{padding:96px 0 96px;border-bottom:1px solid var(--line-2)}
  .hero .mono{display:block;margin-bottom:24px}
  .hero h1{font-size:clamp(44px,6.4vw,96px);line-height:.96;letter-spacing:-.04em;font-weight:500;margin:0;text-wrap:balance;max-width:14ch}
  .hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,88px);align-items:start;margin-top:56px}
  .hero .text p{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--ink-2);margin:0 0 18px;max-width:58ch}
  .hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
  .hero .photo{position:relative;border:1px solid var(--line);background:var(--bg-2);aspect-ratio:4/3;overflow:hidden}
  .hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- open roles ---------- */
  .roles{padding:112px 0;border-bottom:1px solid var(--line-2)}
  .roles .head{margin-bottom:48px}
  .roles .head .mono{display:block;margin-bottom:18px}
  .roles .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
  .role{background:var(--bg);padding:40px 36px 36px;display:flex;flex-direction:column}
  .role .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
  .role .ico{width:32px;height:32px;color:var(--red);flex:none}
  .role h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;font-weight:500;margin:0 0 16px;line-height:1.15;text-wrap:balance}
  .role p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 12px;max-width:62ch}
  .role .cta{margin-top:auto;padding-top:28px}

  /* ---------- open application ---------- */
  .open{padding:112px 0;border-bottom:1px solid var(--line-2);background:var(--bg-3)}
  .open .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,88px);align-items:start}
  .open .mono{display:block;margin-bottom:18px}
  .open .text p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:54ch}
  .open .text .btn{margin-top:14px}

  /* ---------- apply ---------- */
  .apply{padding:112px 0;border-bottom:1px solid var(--line-2)}
  .apply:focus{outline:none}
  .apply .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,5vw,88px);align-items:start}
  .apply .side{position:sticky;top:88px}
  .apply .side .mono{display:block;margin-bottom:18px}
  .apply .body{max-width:760px}

  /* Feedback panels. Pre-rendered so the no-JS path works: the function answers a
     native POST with a 303 to /careers#applied or /careers#error-<code>, and
     :target shows the matching panel. careers.js uses .show/.hide instead; .hide is
     declared last so a stale :target from an earlier attempt cannot resurface. */
  section[id]{scroll-margin-top:80px}
  .panel{display:none;scroll-margin-top:88px}
  .panel:target,.panel.show{display:block}
  .panel.hide{display:none}
  .panel{border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--bg-2);padding:22px 26px;margin-bottom:32px}
  .panel.error{border-left-color:var(--red-deep)}
  .panel .mono{display:block;margin-bottom:10px}
  .panel.error .mono{color:var(--red-deep)}
  .panel p{margin:0;font-size:16px;line-height:1.55;color:var(--ink);max-width:60ch}
  .panel a{color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
  .panel a:hover{color:var(--ink)}
  .panel:focus{outline:2px solid var(--ink);outline-offset:3px}

  /* Form */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
  .field{display:flex;flex-direction:column;gap:8px;min-width:0}
  .field.wide{grid-column:1/-1}
  .field label{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  .field label .opt{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-left:8px}
  .field input,.field select,.field textarea{
    font:inherit;font-size:15px;line-height:1.4;color:var(--ink);
    background:var(--bg);border:1px solid var(--line-strong);border-radius:0;
    padding:14px 16px;width:100%;margin:0;
    transition:border-color .15s;
  }
  .field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
  .field input::placeholder,.field textarea::placeholder{color:var(--mute)}
  .field textarea{min-height:200px;resize:vertical;line-height:1.55}
  /* The select keeps a native menu; only the box and the chevron are ours. */
  .select{position:relative}
  .select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
  .field select:invalid{color:var(--mute)}
  .field select option{color:var(--ink)}
  .field input[type="file"]{padding:10px 16px;cursor:pointer}
  .field input[type="file"]::file-selector-button{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:0;padding:6px 12px;margin-right:12px;cursor:pointer}
  .field input[type="file"]::file-selector-button:hover{border-color:var(--ink)}
  .hint{font-size:13px;line-height:1.4;color:var(--mute)}
  .form .actions{grid-column:1/-1;margin-top:6px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .btn.is-busy{opacity:.65;cursor:progress}
  .fine{font-size:13px;line-height:1.55;color:var(--mute);margin:24px 0 0;max-width:62ch}
  .fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
  .fine a:hover{color:var(--red-deep)}

  /* ---------- the founders ---------- */
  .team{padding:96px 0 112px}
  .team .mono{display:block;margin-bottom:18px}
  .team .line{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.025em;font-weight:500;line-height:1.2;margin:0 0 40px;max-width:30ch;text-wrap:balance}

  @media (max-width: 980px){
    .hero{padding:72px 0 80px}
    .hero .wrap,.open .wrap,.apply .wrap{grid-template-columns:1fr;gap:40px}
    .hero .photo{aspect-ratio:900/507}
    .roles,.open,.apply{padding:80px 0}
    .roles .grid{grid-template-columns:1fr}
    .role{padding:32px 24px 28px}
    .apply .side{position:static}
    .team{padding:72px 0 88px}
  }
  @media (max-width: 700px){
    .form{grid-template-columns:1fr}
    .hero .btns .btn,.role .cta .btn{width:100%;justify-content:space-between}
  }