/* Job board. Its own stylesheet rather than more inline <style>: three
   templates share it. Brand tokens come from site.css, which loads first. */
html { background:var(--paper); scroll-behavior:smooth; }
body { font-family:"Tommy","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
.jb-in { max-width:1080px; margin:0 auto; padding:0 22px; }

.jb-hero { background:var(--yellow); border-bottom:2.5px solid var(--ink); padding:clamp(44px,6vw,74px) 0; }
.jb-eyebrow { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-d); margin-bottom:14px; }
.jb-hero h1 { font-size:clamp(34px,5.8vw,60px); font-weight:800; letter-spacing:-.035em; line-height:1; text-transform:uppercase; }
.jb-hero h1 em { font-style:normal; color:var(--orange-d); }
.jb-hero p { font-size:17px; font-weight:600; color:rgba(33,26,20,.8); margin-top:16px; max-width:52ch; }
.jb-hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.jb-note { font-size:13px; font-weight:700; color:rgba(33,26,20,.65); margin-top:16px; }

.jb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit;
  font-size:15.5px; font-weight:800; text-decoration:none; cursor:pointer; padding:13px 24px;
  border-radius:2px; background:var(--orange); color:#fff; border:2px solid var(--block);
  box-shadow:1px 1px 0 var(--block),2px 2px 0 var(--block),3px 3px 0 var(--block);
  transition:transform .1s ease, box-shadow .1s ease; }
.jb-btn:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--block); }
.jb-btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--ink);
  box-shadow:var(--ink3); }
.jb-btn-ghost:hover { box-shadow:var(--ink1); }
.jb-btn-dark { background:var(--ink); border-color:var(--ink); box-shadow:var(--ink3); }
.jb-btn-full { display:flex; width:100%; }

.jb-body { padding:clamp(30px,4vw,46px) 22px 60px; }
.jb-flash { background:var(--yellow); border:2.5px solid var(--ink); border-radius:2px;
  box-shadow:var(--ink3); padding:15px 18px; font-weight:700; font-size:14.5px; margin:22px 0; }
.jb-flash.bad { background:#FFE2D6; }

.jb-filters { display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.jb-search { display:flex; gap:9px; }
.jb-search input { flex:1; font:inherit; font-size:16px; padding:13px 16px; background:var(--surface);
  border:2.5px solid var(--ink); border-radius:2px; color:var(--ink); }
.jb-search input:focus-visible { outline:3px solid var(--orange); outline-offset:1px; }
.jb-search button { font:inherit; font-size:15px; font-weight:800; cursor:pointer; padding:0 22px;
  background:var(--ink); color:#fff; border:2.5px solid var(--ink); border-radius:2px; }
.jb-search button:hover { background:var(--orange-d); border-color:var(--orange-d); }
.jb-selects { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.jb-selects label { display:flex; flex-direction:column; gap:4px; font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.jb-selects select { font:inherit; font-size:14px; font-weight:700; padding:9px 12px; cursor:pointer;
  background:var(--surface); border:2px solid var(--ink); border-radius:2px; color:var(--ink); }
.jb-clear { align-self:flex-end; font-size:13px; font-weight:800; color:var(--orange-d);
  text-decoration:none; padding-bottom:10px; }
.jb-count { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px; }

.jb-list { display:flex; flex-direction:column; gap:12px; }
.jb-card { display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  background:var(--surface); border:2.5px solid var(--ink); border-radius:2px; padding:17px 19px;
  box-shadow:var(--ink3); transition:transform .1s ease, box-shadow .1s ease; }
.jb-card:hover { transform:translate(2px,2px); box-shadow:var(--ink1); }
.jb-logo { flex:none; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--yellow); border:2px solid var(--ink); border-radius:2px;
  font-size:22px; font-weight:800; overflow:hidden; }
.jb-logo img { width:100%; height:100%; object-fit:cover; }
.jb-logo-lg { width:76px; height:76px; font-size:32px; }
.jb-card-main { flex:1; min-width:0; }
.jb-card-main b { display:block; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.jb-co { display:block; font-size:13.5px; font-weight:700; color:var(--muted); margin-top:1px; }
.jb-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.jb-tags em { font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; background:var(--paper); border:1.5px solid var(--ink);
  border-radius:2px; padding:3px 8px; }
.jb-tags em.on { background:var(--yellow); }
.jb-card-end { flex:none; text-align:right; }
.jb-sal { display:block; font-size:14px; font-weight:800; }
.jb-when { display:block; font-size:11.5px; font-weight:700; color:var(--dim); margin-top:3px; }

.jb-empty { background:var(--surface); border:2.5px dashed var(--line); border-radius:2px;
  padding:44px 24px; text-align:center; }
.jb-empty b { display:block; font-size:19px; font-weight:800; }
.jb-empty p { font-size:14.5px; color:var(--muted); font-weight:600; margin-top:8px; }
.jb-empty a, .jb-prose a { color:var(--orange-d); font-weight:800; }

.jb-pitch { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--teal); color:#fff; border:2.5px solid var(--ink); border-radius:2px;
  box-shadow:var(--ink4); padding:28px 26px; margin-top:44px; }
.jb-pitch h2 { font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; }
.jb-pitch p { font-size:14.5px; font-weight:600; margin-top:7px; max-width:48ch; color:rgba(255,255,255,.88); }

/* ── single job ── */
.jb-job, .jb-post { padding:30px 22px 60px; }
.jb-back { display:inline-block; font-size:13px; font-weight:800; color:var(--orange-d);
  text-decoration:none; margin-bottom:22px; }
.jb-back:hover { text-decoration:underline; }
.jb-jhead { display:flex; gap:20px; align-items:flex-start; padding-bottom:26px;
  border-bottom:2.5px solid var(--ink); }
.jb-jhead h1 { font-size:clamp(25px,4vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.jb-jco { font-size:15.5px; font-weight:700; color:var(--muted); margin-top:5px; }
.jb-jco a { color:var(--orange-d); text-decoration:none; }
.jb-jhead .jb-tags { margin-top:14px; }
.jb-jgrid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(26px,4vw,48px);
  align-items:start; padding-top:30px; }
.jb-standfirst { font-size:17.5px; font-weight:650; color:var(--muted); margin-bottom:20px; }
.jb-prose { max-width:66ch; }
.jb-prose h2 { font-size:21px; font-weight:800; margin:28px 0 9px; }
.jb-prose h3 { font-size:17px; font-weight:800; margin:22px 0 7px; }
.jb-prose p { margin:0 0 14px; font-size:16px; color:#372e26; }
.jb-prose ul, .jb-prose ol { margin:0 0 14px 22px; }
.jb-prose li { margin-bottom:7px; font-size:16px; color:#372e26; }
.jb-jside { display:flex; flex-direction:column; gap:14px; }
.jb-card-s { background:var(--surface); border:2.5px solid var(--ink); border-radius:2px;
  box-shadow:var(--ink3); padding:20px 19px; }
.jb-card-cta { background:var(--yellow); }
.jb-h { font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--orange-d); margin-bottom:12px; }
.jb-card-cta .jb-h { color:var(--ink); }
.jb-fine { font-size:12px; font-weight:600; color:var(--muted); margin-top:11px; line-height:1.5; }
.jb-card-cta .jb-fine { color:rgba(33,26,20,.75); margin-bottom:14px; }
.jb-more { margin-top:52px; }
.jb-more h2 { font-size:13px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--orange-d); margin-bottom:15px; }
.jb-draft { background:var(--ink); color:var(--yellow); text-align:center; font-size:12.5px;
  font-weight:800; letter-spacing:.1em; padding:9px; }

/* ── post form ── */
.jb-post h1 { font-size:clamp(27px,4.5vw,40px); font-weight:800; letter-spacing:-.02em;
  text-transform:uppercase; }
.jb-post .jb-standfirst { max-width:56ch; margin-top:12px; }
.jb-form { max-width:760px; margin-top:30px; }
.jb-fs { display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--surface);
  border:2.5px solid var(--ink); border-radius:2px; box-shadow:var(--ink3);
  padding:22px 21px; margin-bottom:16px; }
.jb-fs .jb-h, .jb-fs > .jb-fine { grid-column:1 / -1; margin:0; }
.jb-fs .jb-h span { color:var(--orange); }
.jb-full { grid-column:1 / -1; }
.jb-form label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
.jb-form label span { color:var(--orange); }
.jb-form input, .jb-form select, .jb-form textarea { font:inherit; font-size:15px; padding:11px 13px;
  background:var(--paper); border:2px solid var(--ink); border-radius:2px; color:var(--ink);
  width:100%; }
.jb-form textarea { resize:vertical; line-height:1.55; }
.jb-form input:focus-visible, .jb-form select:focus-visible, .jb-form textarea:focus-visible {
  outline:3px solid var(--orange); outline-offset:1px; }
.jb-submit { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.jb-submit .jb-fine { margin:0; }

@media (max-width:860px) {
  .jb-jgrid { grid-template-columns:1fr; }
  .jb-card { flex-wrap:wrap; }
  .jb-card-end { text-align:left; width:100%; }
  .jb-fs { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .jb-btn:hover, .jb-card:hover { transform:none; } }
