/* RefugeeCanadaHiring — shared design system (Fraunces + DM Sans, teal/amber/cream) */
:root{
  --ink:#1c2b28; --ink-2:#41544f; --mut:#6e7f7a;
  --teal:#0b6e5f; --teal-d:#08554a; --teal-t:#e4f0ed;
  --amber:#e89a2f; --amber-t:#fdf3e2;
  --paper:#fbfaf7; --line:#e6e4dd; --card:#ffffff;
  --r:14px;
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",-apple-system,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;font-size:15.5px}
a{color:var(--teal);text-decoration:none}
.wrap{max-width:1140px;width:100%;margin:0 auto;padding:0 22px}

/* header */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.head{display:flex;align-items:center;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand svg,.brand img{width:34px;height:34px}
.brand .nm{font-family:var(--serif);font-weight:700;font-size:1.22rem;color:var(--ink);letter-spacing:-0.01em}
.brand .nm em{font-style:normal;color:var(--teal)}
nav{display:flex;gap:22px;font-weight:500;font-size:0.94rem;margin-left:8px}
nav a{color:var(--ink-2)} nav a:hover{color:var(--teal)}
.head .cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{display:inline-block;border-radius:10px;padding:10px 18px;font-weight:700;font-size:0.92rem;border:0;cursor:pointer;font-family:var(--sans)}
.btn.pri{background:var(--teal);color:#fff} .btn.pri:hover{background:var(--teal-d);color:#fff}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}

/* hero (home) */
.hero{background:linear-gradient(180deg,#f2efe8 0%,var(--paper) 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;padding:54px 0 46px}
.kicker{display:inline-block;background:var(--teal-t);color:var(--teal-d);font-weight:700;font-size:0.78rem;letter-spacing:0.09em;border-radius:999px;padding:5px 14px;margin-bottom:16px}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;letter-spacing:-0.015em;margin-bottom:14px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero .sub{color:var(--ink-2);max-width:520px;margin-bottom:24px}
.searchbox{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(28,43,40,0.08);padding:10px;display:flex;gap:8px;flex-wrap:wrap}
.searchbox .fld{flex:1 1 180px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-right:1px solid var(--line)}
.searchbox .fld:last-of-type{border-right:0}
.searchbox svg{width:17px;height:17px;stroke:var(--mut);flex:none}
.searchbox input,.searchbox select{border:0;outline:0;font-family:var(--sans);font-size:0.95rem;width:100%;background:transparent;color:var(--ink)}
.trustline{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:0.84rem;color:var(--mut)}
.trustline b{color:var(--ink-2)}
.hero-art{position:relative;height:340px}
.blob{position:absolute;border-radius:26px}
.b1{inset:12% 8% 34% 14%;background:linear-gradient(135deg,var(--teal) 0%,#1b9a86 100%)}
.b2{right:0;bottom:6%;width:52%;height:44%;background:var(--amber);opacity:.92}
.b3{left:0;bottom:0;width:34%;height:30%;background:#123f38}
.hero-art .quote{position:absolute;inset:auto 6% 12% 22%;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 14px 34px rgba(28,43,40,.16);font-size:.88rem}
.hero-art .quote b{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:2px}

/* categories */
.cats{padding:34px 0 8px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.sec-h h2{font-family:var(--serif);font-size:1.45rem;letter-spacing:-0.01em}
.sec-h a{font-size:.9rem;font-weight:600}
.cat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .15s, box-shadow .15s}
.cat:hover{border-color:var(--teal);box-shadow:0 6px 16px rgba(11,110,95,.08)}
.cat.on{border-color:var(--teal);background:var(--teal-t)}
.cat b{display:block;font-size:.92rem;margin-bottom:2px}
.cat span{font-size:.8rem;color:var(--mut)}

/* jobs list + detail */
.jobs{padding:26px 0 60px}
.jobs-grid{display:grid;grid-template-columns:minmax(340px,0.95fr) 1.05fr;gap:18px;align-items:start}
.list{display:flex;flex-direction:column;gap:10px;max-height:78vh;overflow-y:auto;padding-right:4px}
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;transition:border-color .12s}
.row:hover{border-color:#bcd6d0}
.row.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.row .top{display:flex;gap:12px;align-items:flex-start}
.avatar{width:42px;height:42px;border-radius:10px;background:var(--teal-t);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif);font-size:1.05rem;flex:none}
.row h3{font-size:1.02rem;font-weight:700;line-height:1.3}
.row .co{font-size:.86rem;color:var(--mut)}
.row .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{font-size:.76rem;font-weight:600;border-radius:7px;padding:3px 9px;background:#f1efe9;color:var(--ink-2)}
.pill.sal{background:var(--teal-t);color:var(--teal-d)}
.pill.easy{background:var(--amber-t);color:#8a5a10}
.row .when{font-size:.78rem;color:var(--mut);margin-top:9px}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:sticky;top:86px;max-height:78vh;overflow-y:auto}
.detail .co{color:var(--mut);font-size:.9rem}
.detail h2{font-family:var(--serif);font-size:1.5rem;letter-spacing:-0.01em;margin:2px 0 10px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.fact{background:#f6f4ee;border-radius:9px;padding:7px 12px;font-size:.84rem}
.fact b{color:var(--teal-d)}
.detail .body{font-size:.93rem;color:var(--ink-2)}
.detail .body p{margin-bottom:10px}
.detail .body ul{padding-left:20px;margin-bottom:10px}
.detail h4{font-family:var(--serif);margin:16px 0 6px;font-size:1.02rem}
.detail ul{padding-left:20px;font-size:.92rem;color:var(--ink-2)}
.applybar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.applybar .note{font-size:.8rem;color:var(--mut)}
.srcline{margin-top:12px;font-size:.75rem;color:#9aa8a3}
.srcline a{color:#9aa8a3;text-decoration:underline}
.loadmore{margin-top:12px;width:100%}

/* steps */
.steps-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:20px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step h3{font-size:1rem;margin-bottom:4px}
.step p{font-size:.9rem;color:var(--ink-2)}

/* rights */
.rights{padding:48px 0}
.rights-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:36px;align-items:start}
.rights h2{font-family:var(--serif);font-size:1.6rem;letter-spacing:-0.01em;margin-bottom:10px}
.rights .lead{color:var(--ink-2)}
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:9px}
details.faq summary{cursor:pointer;font-weight:700;font-size:.95rem}
details.faq p{margin-top:8px;font-size:.9rem;color:var(--ink-2)}
.warn{background:var(--amber-t);border:1px solid #f0d9ae;border-radius:12px;padding:14px 18px;font-size:.9rem;margin-top:14px}

/* static pages */
.page-hero{background:linear-gradient(180deg,#f2efe8 0%,var(--paper) 100%);border-bottom:1px solid var(--line);padding:40px 0 34px}
.page-hero h1{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-0.015em;margin-bottom:6px}
.page-hero p{color:var(--ink-2);max-width:640px}
main.narrow{max-width:820px;width:100%;margin:0 auto;padding:34px 22px 60px}
.content-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 32px}
.prose h2{font-family:var(--serif);font-size:1.35rem;letter-spacing:-0.01em;margin:26px 0 8px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-size:1.08rem;margin:18px 0 6px}
.prose p{margin-bottom:12px;color:var(--ink-2);font-size:.95rem}
.prose ul,.prose ol{padding-left:22px;margin-bottom:12px;color:var(--ink-2);font-size:.95rem}
.prose li{margin-bottom:5px}
.prose .warn{margin:14px 0}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.res-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:block;transition:border-color .15s, box-shadow .15s}
.res-card:hover{border-color:var(--teal);box-shadow:0 6px 16px rgba(11,110,95,.08)}
.res-card .tag{display:inline-block;background:var(--teal-t);color:var(--teal-d);font-weight:700;font-size:.72rem;letter-spacing:.07em;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.res-card h3{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-bottom:6px}
.res-card p{font-size:.88rem;color:var(--ink-2)}

/* footer */
footer{background:#12251f;color:#b9cac4;padding:44px 0 26px;font-size:.88rem;margin-top:auto}
body{display:flex;flex-direction:column;min-height:100vh}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-bottom:26px;border-bottom:1px solid #23453c}
.foot-grid h4{color:#fff;font-size:.9rem;margin-bottom:10px}
.foot-grid a{display:block;color:#b9cac4;margin-bottom:7px;font-size:.86rem}
.foot-grid a:hover{color:#fff}
.foot-brand .nm{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#fff}
.foot-brand .nm em{font-style:normal;color:#6fcab8}
.foot-brand p{margin-top:8px;font-size:.85rem;max-width:280px}
.foot-base{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:18px;font-size:.8rem;color:#8aa39b}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .jobs-grid{grid-template-columns:1fr}
  .detail{position:static;max-height:none;display:none}
  .detail.mobile-open{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
  .rights-grid{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr}
  nav{display:none}
  .content-card{padding:22px 20px}
}