/* SoCal Machinist Jobs
   Type: Barlow / Barlow Condensed — drawn from California highway signage.
   Color: machine-tool green, safety yellow, aluminum, cutting-oil ink. */
:root{
  --aluminum:#E7EBEC;
  --paper:#F7F9F9;
  --ink:#1D2623;
  --ink-soft:#4C5A55;
  --machine:#2F5546;      /* old machine-tool enamel green */
  --machine-deep:#21402F;
  --safety:#F3C623;       /* safety yellow */
  --rule:#C9D1CF;
  --focus:#0B6BCB;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--aluminum);color:var(--ink);
  font:400 1.0625rem/1.55 "Barlow",system-ui,sans-serif}
a{color:var(--machine)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Header */
.top{background:var(--machine-deep);color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{font:700 1.35rem/1 "Barlow Condensed",sans-serif;color:#fff;text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--safety)}
.top nav a{color:#fff;text-decoration:none;font-weight:600;margin-left:18px}
.top nav a.post{background:var(--safety);color:var(--ink);padding:8px 14px;border-radius:4px}

/* Hero: the signage moment */
.hero{background:var(--machine);color:#fff;padding:44px 0 36px;border-bottom:8px solid var(--safety)}
.hero h1{font:800 clamp(2.4rem,7vw,4.6rem)/.95 "Barlow Condensed",sans-serif;margin:0 0 14px;max-width:14ch}
.hero p{max-width:56ch;margin:0;font-size:1.15rem;color:#DDE8E2}
.hero .count{margin-top:22px;font:600 1.05rem "Barlow Condensed",sans-serif;color:var(--safety)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0 8px}
.filters label{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.filters select,.filters input{margin-top:4px;font:inherit;font-size:1rem;padding:9px 10px;
  border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);min-width:170px}
.filters input{min-width:220px}

/* Job list */
.jobs{list-style:none;margin:8px 0 40px;padding:0}
.job{background:var(--paper);border-left:6px solid var(--rule);margin-bottom:10px;padding:16px 18px;
  display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center}
.job.featured{border-left-color:var(--safety)}
.job h2{margin:0;font:700 1.35rem/1.15 "Barlow Condensed",sans-serif}
.job .co{font-weight:600}
.job .meta{color:var(--ink-soft);font-size:.98rem}
.job .pay{font:700 1.15rem "Barlow Condensed",sans-serif;color:var(--machine-deep);text-align:right}
.job .apply{grid-column:2;justify-self:end;background:var(--machine);color:#fff;text-decoration:none;
  font-weight:700;padding:9px 14px;border-radius:4px;white-space:nowrap}
.job .tag{display:inline-block;background:var(--safety);color:var(--ink);font-weight:700;font-size:.8rem;
  padding:1px 7px;border-radius:3px;margin-left:6px;vertical-align:middle}
.empty{background:var(--paper);padding:24px;border-left:6px solid var(--rule)}
@media (max-width:640px){
  .job{grid-template-columns:1fr}
  .job .pay{text-align:left}
  .job .apply{grid-column:1;justify-self:start;margin-top:8px}
  .top nav a:not(.post){display:none}
}

/* Employer band */
.band{background:var(--ink);color:#fff;padding:36px 0}
.band h2{font:700 2rem/1.05 "Barlow Condensed",sans-serif;margin:0 0 8px}
.band p{color:#C7D1CD;max-width:60ch;margin:0 0 18px}
.btn{display:inline-block;background:var(--safety);color:var(--ink);font-weight:700;text-decoration:none;
  padding:12px 18px;border-radius:4px;border:0;font-size:1rem;cursor:pointer;font-family:inherit}

/* Post page */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:28px 0}
.plan{background:var(--paper);padding:22px;border-top:6px solid var(--rule)}
.plan.feat{border-top-color:var(--safety)}
.plan h2{font:700 1.6rem "Barlow Condensed",sans-serif;margin:0}
.plan .price{font:800 3rem/1 "Barlow Condensed",sans-serif;color:var(--machine-deep);margin:8px 0 12px}
.plan ul{padding-left:20px;margin:0 0 18px}
form.post-form{background:var(--paper);padding:22px;margin:0 0 40px;max-width:720px}
form.post-form label{display:block;font-weight:600;margin:14px 0 4px}
form.post-form input,form.post-form select,form.post-form textarea{width:100%;font:inherit;padding:10px;
  border:1px solid var(--rule);border-radius:4px;background:#fff}
form.post-form textarea{min-height:140px}
.steps{max-width:62ch}
footer{padding:24px 0 40px;color:var(--ink-soft);font-size:.95rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}