/* ══════════════════════════════════════════════════════════════════
   padengayle.com — shared foundation
   Tokens, reset, type scale, and the chrome every page carries.

   SINGLE SOURCE OF TRUTH for the palette. Every page links this file,
   including the 398 generated job-board pages, so a palette change is
   one edit here rather than five. It also means one cached stylesheet
   across the whole site instead of inline CSS repeated per page.

   Palette: cyanotype — cream paper, cyan, warm browns. The colours of
   blueprints and old field guides. Single committed light theme: no
   prefers-color-scheme block, because the cream IS the identity and an
   OS setting should not get to swap it for dark brown.
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ground + surfaces */
  --cream:#FAF4E6;
  --panel:#F4ECD9;
  --panel-2:#EDE2CB;

  /* ink — warm browns, never pure black */
  --ink:#2B2018;      /* headings            14.9:1 on cream */
  --ink-2:#6B594A;    /* body                 6.1:1 */
  --ink-3:#7B6A56;    /* captions, mono       4.7:1 — AA floor, do not lighten */

  /* rules */
  --rule:#E5DAC3;
  --rule-2:#D2C3A6;

  /* accent — the only saturated colour, used sparingly */
  --cyan:#0A6E7C;     /* 5.4:1 on cream, 5.0:1 on its own wash */
  --cyan-hi:#0C8A9B;
  --cyan-ink:#FFFFFF;
  --cyan-wash:#DDEEF0;

  /* second accent — badges and marks only, never body text */
  --rust:#A8551F;
  --rust-ink:#FFFFFF;

  /* inverted band, used for emphasis sections */
  --field:#17120C;
  --field-ink:#F4EBD9;
  --field-rule:rgba(244,235,217,.16);
  --field-cyan:#45C9DA;   /* the band is dark, so its accent is the bright variant */

  --shadow:0 1px 2px rgba(43,32,24,.05), 0 12px 28px -18px rgba(43,32,24,.30);
  --shadow-lift:0 2px 4px rgba(43,32,24,.06), 0 20px 40px -22px rgba(43,32,24,.38);

  --display:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4vw,52px);
  --maxw:1140px;
  --measure:68ch;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ── type ── */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;
  font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:18px;letter-spacing:-.015em;line-height:1.28}
h4{font-size:16px;letter-spacing:-.005em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}

.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ── masthead ── */
.masthead{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.masthead__in{max-width:var(--maxw);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.wordmark{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;
  color:var(--ink);display:flex;align-items:center;gap:9px;white-space:nowrap}
.wordmark::before{content:'';width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 0 3px var(--cyan-wash)}
.mhnav{display:flex;gap:20px;align-items:center}
.mhnav a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);transition:color .16s}
.mhnav a:hover{color:var(--cyan)}
.mhnav a[aria-current="page"]{color:var(--cyan)}
@media (max-width:620px){.mhnav a:nth-child(n+4){display:none}}

/* ── buttons ── */
.btn{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 20px;border-radius:8px;
  display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),background .18s,border-color .18s,box-shadow .18s,color .18s}
.btn--fill{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan);box-shadow:var(--shadow)}
.btn--fill:hover{background:var(--cyan-hi);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--line{border-color:var(--rule-2);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:.1s}
.btn svg{width:12px;height:12px;flex:none}

/* ── footer ── */
footer.foot{border-top:1px solid var(--rule);margin-top:56px;padding:34px 0 30px}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot__in a{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);transition:color .16s}
.foot__in a:hover{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .btn:hover,.card:hover,.how__i:hover,.spoke:hover{transform:none!important}
}

/* Visually hidden but read by screen readers and counted in the document
   outline. Used for section headings the sighted layout implies but does
   not print. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}