/* Deliberate Sherpa — shared chrome for content pages (About / Jobs / Contact).
   Light header + footer + buttons, built entirely on tokens.css. The homepage keeps
   its own inline styles (it has the dark hero); these are the light-background pages. */

/* Bigger, more editorial scale — proportional +12.5% type + wider frame (matches the homepage). */
:root { --maxw: 1300px; }
html { font-size: 112.5%; }

/* ---------- header (light variant) ---------- */
.site-head { position: sticky; top: 0; z-index: 20;
  background: rgba(244,248,251,.85); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.site-head .container { display:flex; align-items:center; justify-content:space-between; padding-block: var(--s-4); }
.brand { display:flex; align-items:center; gap: var(--s-3); color: var(--ink); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.brand .mark { width: clamp(40px, 4.4vw, 80px); height: clamp(40px, 4.4vw, 80px); color: var(--cobalt); flex-shrink:0; }
.brand b { font-weight:900; letter-spacing:-0.03em; font-size: clamp(1.15rem, 3vw, 3rem); white-space:nowrap; }
.nav { display:flex; align-items:center; gap: var(--s-5); flex-wrap:nowrap; }
.nav a { color: var(--ink-70); text-decoration:none; font-weight:600; font-size: clamp(1.05rem, 1.15vw, 1.45rem); white-space:nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--cobalt); }
.nav .signin { color: var(--cobalt); border:1.5px solid var(--cobalt); padding:14px 32px; white-space:nowrap; flex-shrink:0;
  border-radius: var(--r-pill); font-weight:700; margin-left: var(--s-2);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav .signin:hover { color: var(--on-dark); background: var(--cobalt); }

/* ---------- buttons ---------- */
.btn { font: inherit; font-weight:800; border-radius: var(--r-sm); padding:16px 26px; border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-size:1.05rem; text-decoration:none;
  box-shadow: var(--shadow-md); transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-busy="true"] { opacity:.7; cursor:default; box-shadow:none; transform:none; }
.btn-primary { background: var(--cobalt); color: var(--on-dark); }
.btn-primary:hover { background: var(--cobalt-700); transform: translateY(-1px); }
.btn-ghost { background: var(--paper); color: var(--cobalt); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--cobalt); }

/* ---------- page frame ---------- */
.page { max-width: var(--maxw); margin-inline:auto; padding: var(--s-9) var(--s-5); }
.page-head { max-width: 760px; margin-bottom: var(--s-8); }
.page-head .eyebrow { display:block; color: var(--cobalt); margin-bottom: var(--s-3); }
.page-head h1 { font-size: var(--t-h1); font-weight:900; letter-spacing:-0.03em; text-wrap:balance; }
.page-head p { color: var(--ink-70); font-size: var(--t-lead); margin-top: var(--s-5); max-width: 62ch; }

/* ---------- footer (matches homepage) ---------- */
.site-foot { border-top:1px solid var(--line); background: var(--snow); margin-top: var(--s-9); }
.site-foot .container { display:flex; align-items:center; justify-content:space-between; gap: var(--s-4);
  padding-block: var(--s-6); flex-wrap:wrap; }
.site-foot .fnav { display:flex; gap: var(--s-5); flex-wrap:wrap; }
.site-foot a { color: var(--ink-70); text-decoration:none; font-size: var(--t-small); font-weight:600; }
.site-foot a:hover { color: var(--ink); }
.site-foot .quiet { color: var(--slate); font-size: var(--t-eyebrow); }

/* ---------- forms (contact + job application) ---------- */
.form { display:flex; flex-direction:column; gap: var(--s-5); max-width: 560px; margin-inline:auto; text-align:left; }
.form .field { display:flex; flex-direction:column; gap:6px; }
.form label { font-weight:700; color: var(--ink); font-size: var(--t-small); }
.form input, .form textarea, .form select { font:inherit; color: var(--ink); background: var(--paper-2);
  border:1px solid var(--line); border-radius: var(--r-sm); padding:12px 14px; width:100%; }
.form textarea { min-height:150px; resize:vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 18%, transparent); }
.form .hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form button { align-self:center; margin-top: var(--s-2); }
.form-ok { color: var(--cobalt); font-weight:800; font-size: var(--t-lead); text-align:center; padding: var(--s-6) 0; }
.form-err { color: var(--slate); font-size: var(--t-small); text-align:center; }

.apply-form { max-width: 620px; margin: var(--s-8) auto 0; padding-top: var(--s-8); border-top:1px solid var(--line); text-align:center; }
.apply-form h2 { font-size: var(--t-h2); font-weight:900; letter-spacing:-0.025em; }
.apply-form .lead { color: var(--ink-70); font-size: var(--t-lead); margin: var(--s-4) 0 var(--s-6); }

@media (max-width:640px){
  .site-head .container { flex-wrap:wrap; gap: var(--s-3); }
  .nav { gap: var(--s-4); font-size: var(--t-eyebrow); }
}