/* Careers (/ks3/careers…): scoped under .pg-careers. The visual references are the three prototype branches
   (prototype/careers-questionnaire, -career-page, -route); see .scratch/careers/spec.md. */
.pg-careers {
  min-height: 70vh;
  .wrap.narrow { max-width: 720px; padding-block: 60px; }
  .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; margin-bottom: 16px; }
  .back { font: 400 .95rem/1 var(--f-label); background: none; border: 0; cursor: pointer; color: var(--ink); padding: 6px 0; text-decoration: none; }
  .hint, .hand { font: 700 1.25rem/1.25 var(--f-hand); color: #6b4a22; }
  .note, .small { font-size: .88rem; color: #5b5546; }
  .eyebrow { font: 700 1.35rem/1 var(--f-hand); color: #7a5a2e; margin: 0 0 4px; }
  .loading { font: 700 1.4rem/1.2 var(--f-hand); color: var(--label); padding: 60px 0; text-align: center; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .face { width: 100%; height: auto; display: block; }
  .chip { font: 400 .8rem/1 var(--f-label); padding: 8px 10px 6px; border: 0; background: #fffdf6; box-shadow: 0 2px 0 rgba(0,0,0,.18); cursor: pointer; color: var(--ink); border-left: 5px solid var(--c, var(--mustard)); }
  .chip[aria-pressed="true"] { background: var(--c, var(--teal)); color: #fff; }
  .tag { font: 400 .78rem/1 var(--f-label); padding: 7px 9px 5px; background: #fffdf6; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
  .tag.dream { background: var(--pink); } .tag.gem { background: var(--sky); } .tag.local { background: #cfe3b8; }
  .linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .9rem; color: #9b3b26; text-decoration: underline; }
}

/* ---------- picture cards (search, browse, unit strips) ---------- */
.pg-careers .cgrid, .careers-strip .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 16px; }
.ccard { display: flex; flex-direction: column; background: #fffdf6; color: var(--ink); text-decoration: none; box-shadow: 0 4px 10px rgba(40,25,5,.18); transition: transform .15s; }
.ccard:hover, .ccard:focus-visible { transform: rotate(-1deg) scale(1.02); }
/* the picture is fitted inside the box, standing on its bottom edge (a % height on a grid item doesn't resolve) */
.ccard .pic { position: relative; display: block; aspect-ratio: 4 / 4.2; background: #efe3cc url(/img/tile_cream.webp) 0 0/600px auto; overflow: hidden; }
.ccard .pic img { position: absolute; left: 5%; right: 5%; top: 5%; bottom: 0; width: 90%; height: 95%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.ccard .txt { padding: 10px 12px 12px; display: block; }
.ccard b { display: block; font: 400 1.05rem/1.15 var(--f-slab); margin-bottom: 4px; }
.ccard small { display: block; font-size: .8rem; line-height: 1.35; color: #5b5546; }

/* ---------- careers home ---------- */
.pg-careers.home {
  .hero { padding-block: 10px 80px; }
  .hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
  .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 14px 0 12px; }
  .hero p { max-width: 46ch; margin: 0 0 12px; }
  .quiz { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: center; --torn-bg: var(--mustard); }
  .quiz h2 { font: 400 1.5rem/1.15 var(--f-slab); margin-bottom: 8px; }
  .quiz p { margin: 0 0 12px; }
  .quiz .small a { color: var(--ink); }
  .find { padding-block: 50px 80px; }
  .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 30px; align-items: start; }
  .way h3 { margin-bottom: 12px; font-size: 1rem; }
  .way input { width: 100%; font: 400 1rem var(--f-body); padding: 10px 12px; border: 2px solid var(--ink); border-radius: 4px; background: #fffdf6; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .type { border: 0; background: #fffdf6; padding: 6px 4px 8px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.18); font: 400 .72rem/1.1 var(--f-label); color: var(--ink); }
  .type img { height: 54px; width: auto; margin: 0 auto 4px; }
  .type[aria-pressed="true"] { background: var(--sky); }
  .way .small { margin: 10px 0 0; }
  .listhead { font: 400 1.4rem/1.2 var(--f-slab); margin: 10px 0 16px; }
  @media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }
  @media (max-width: 760px) { .hero .wrap { grid-template-columns: 1fr; } .quiz { grid-template-columns: 1fr 96px; } }
}

/* ---------- the card sort ---------- */
.pg-careers.questions {
  padding-bottom: 60px;
  .wrap { max-width: 760px; }
  .hint { color: #3f2d12; }
  .count { font: 400 .9rem/1 var(--f-label); text-align: center; color: #3f2d12; margin: 0 0 12px; }
  .pile2 { display: flex; align-items: center; gap: 10px; background: #fffdf6; padding: 8px 14px; border-radius: 12px; margin: 0 auto 14px; max-width: 520px; font-size: .95rem; }
  .pile2 img { width: 48px; height: 48px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--sky); flex: none; }
  .deck { position: relative; width: min(100%, 440px); height: 380px; margin: 0 auto 22px; }
  .card { position: absolute; inset: 0; background: #fffdf6 url(/img/tile_cream.webp) 0 0/700px auto; border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.28);
          padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .card.under1 { transform: rotate(3deg) translate(8px, 6px); }
  .card.under2 { transform: rotate(-4deg) translate(-8px, 10px); }
  .card.top { transition: transform .32s, opacity .32s; }
  .would { --torn-bg: var(--mustard); font-size: .8rem; }
  .card .pic { height: 130px; width: auto; margin: 14px auto 6px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
  .card .q { font: 400 1.55rem/1.15 var(--f-slab); margin: 6px 0 14px; text-wrap: balance; }
  .progress { height: 14px; border-radius: 7px; background: rgba(255,253,246,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); overflow: hidden; margin: 0 0 6px; }
  .progress i { display: block; height: 100%; border-radius: 7px; background: repeating-linear-gradient(-45deg, var(--teal) 0 10px, #3a9a9e 10px 20px); transition: width .4s ease; }
  .undo-row { text-align: center; margin: 14px 0 0; }
  .undo { font: 400 .9rem/1 var(--f-label); letter-spacing: .03em; border: 0; background: #fffdf6; color: var(--ink); padding: 10px 16px 9px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
  .undo:disabled { opacity: .4; cursor: default; }
  .trays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .tray { border: 0; cursor: pointer; background: rgba(29,36,72,.84); color: var(--label); border-radius: 6px 6px 10px 10px; padding: 8px 6px 10px;
          display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font: 400 .74rem/1.1 var(--f-label); min-height: 160px; }
  .tray .face { width: 52px; }
  .tray .pile { display: flex; flex-direction: column-reverse; align-items: center; min-height: 40px; }
  .tray .pile i { width: 46px; height: 5px; background: #fffdf6; margin-top: 2px; border-radius: 1px; box-shadow: 0 1px 0 rgba(0,0,0,.3); }
  .tray:hover, .tray:focus-visible { background: var(--navy); outline: 3px solid var(--mustard); }
  .note { text-align: center; color: #3f2d12; margin-top: 18px; }
  @media (max-width: 560px) {
    .tray { min-height: 120px; font-size: .6rem; } .tray .face { width: 38px; }
    .deck { height: 340px; } .card .q { font-size: 1.25rem; } .card .pic { height: 96px; }
  }
}

/* ---------- results ---------- */
.pg-careers.results {
  padding-bottom: 70px;
  h1 { font: 400 clamp(1.7rem, 4.5vw, 2.4rem)/1.1 var(--f-slab); }
  h2 { font: 400 1.7rem/1.1 var(--f-slab); margin: 28px 0 14px; }
  .jars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; margin: 18px 0 10px; }
  .jar { text-align: center; }
  .jar .glass { height: 180px; border: 3px solid rgba(29,36,72,.6); border-top-width: 8px; border-radius: 8px 8px 18px 18px; position: relative; overflow: hidden; background: rgba(255,255,255,.45); }
  .jar .fill { position: absolute; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(-20deg, var(--c) 0 14px, color-mix(in srgb, var(--c) 70%, #fff) 14px 22px); animation: fillup 1s ease-out; }
  .jar img { height: 64px; width: auto; margin: 6px auto 2px; }
  .jar b { font: 400 .78rem/1.1 var(--f-label); display: block; }
  .jar.win .glass { border-color: var(--ink); box-shadow: 0 0 0 4px var(--mustard); }
  .mixlines { margin: 10px 0 0; padding-left: 1.1em; max-width: 70ch; }
  .cork { background: #c29c6e url(/img/bg_kraft.webp) center/cover; padding: 28px 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; border-radius: 6px; }
  .postcard { position: relative; background: #fffdf6; box-shadow: 0 5px 10px rgba(0,0,0,.25); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
  .postcard:nth-child(odd) { transform: rotate(-1.5deg); } .postcard:nth-child(even) { transform: rotate(1.2deg); }
  .postcard::before { content: ""; position: absolute; z-index: 1; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
  .postcard img { height: 170px; width: auto; margin: 10px auto 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
  .postcard .txt { padding: 10px 14px 14px; }
  .postcard b { font: 400 1.15rem/1.1 var(--f-slab); display: block; margin-bottom: 4px; }
  .postcard span { font-size: .85rem; display: block; }
  .postcard i { font: 700 1.05rem/1.1 var(--f-hand); color: var(--teal); display: block; margin-top: 6px; }
  .postcard .fit { font: 400 .75rem/1 var(--f-label); display: inline-block; margin-top: 8px; background: var(--sky); padding: 5px 7px 3px; }
  .postcard.wild { background: var(--coral); color: #fff; grid-column: 1 / -1; max-width: 520px; width: 100%; justify-self: center; flex-direction: row; align-items: center; }
  .postcard.wild img { height: 190px; margin: 10px 0 10px 12px; }
  .postcard.wild::before { background: var(--mustard); }
  .postcard.wild i { color: #fff; }
  .wildtag { --torn-bg: var(--mustard); color: var(--ink) !important; font-size: .78rem; display: inline-block !important; margin-bottom: 6px; }
  .note { margin-top: 18px; }
  .again { display: flex; gap: 12px; flex-wrap: wrap; }
  .earlier { margin-top: 26px; }
  .earlier h3 { font: 400 1.1rem/1.2 var(--f-slab); }
  @media (max-width: 1000px) { .cork { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } }
  @media (max-width: 700px) { .jars { grid-template-columns: repeat(3, 1fr); } .postcard.wild { flex-direction: column; } }
}
@keyframes fillup { from { height: 0; } }

/* ---------- the scrapbook (career page and route) ---------- */
.pg-careers.career, .pg-careers.route, .pg-careers.journal { padding-bottom: 60px; }
.pg-careers .top .back, .pg-careers .top .hint { color: var(--label); }
.pg-careers.questions .top .back { color: var(--ink); }
.pg-careers.results .top .back, .pg-careers.results .top .hint { color: var(--ink); }
.pg-careers .book {
  display: grid; grid-template-columns: 1fr 1fr; background: #8a6a40 url(/img/bg_kraft.webp) center/cover; padding: 18px; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(20,10,0,.35);
  .page { position: relative; background: #eeeae2 url(/img/tile_cream.webp) 0 0/900px auto; padding: 30px 30px 36px; min-width: 0; }
  .page.left { box-shadow: inset -18px 0 22px -14px rgba(0,0,0,.28); }
  .page.right { box-shadow: inset 18px 0 22px -14px rgba(0,0,0,.28); }
  h1 { font: 400 clamp(2.3rem, 5vw, 3.6rem)/1 var(--f-slab); margin: 0 0 14px; }
  .tags, .polaroids { clear: both; }
  h2 { font: 400 1.3rem/1.15 var(--f-slab); margin: 26px 0 12px; }
  .desc { font-size: 1.02rem; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
  .hero-pic { float: right; position: relative; height: 230px; width: auto; margin: -56px -8px 8px 14px; transform: rotate(4deg); z-index: 2; shape-outside: margin-box; }
  .polaroids { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 20px; }
  .polaroid { margin: 0; background: #fff; padding: 10px 10px 12px; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
  .polaroid:nth-child(4n+1) { transform: rotate(-2deg); } .polaroid:nth-child(4n+2) { transform: rotate(1.5deg); } .polaroid:nth-child(4n+3) { transform: rotate(1deg); } .polaroid:nth-child(4n) { transform: rotate(-1.2deg); }
  .polaroid img { aspect-ratio: 1; width: 100%; object-fit: contain; background: #efe3cc; padding: 10px; }
  .polaroid figcaption { font-size: .88rem; line-height: 1.3; margin-top: 8px; }
  .facts { display: grid; gap: 2px; }
  .honest { font: 700 1.25rem/1.35 var(--f-hand); color: #a33a22; }
  .people { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .people li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; font-size: .95rem; }
  .people .init { width: 42px; height: 42px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; font: 400 .85rem/1 var(--f-label); padding-top: 3px; }
  .people .src { font-size: .8rem; color: #5b5546; }
  .fit { display: flex; align-items: center; gap: 12px; background: #fffdf6; padding: 10px 14px; box-shadow: 0 3px 0 rgba(0,0,0,.12); max-width: 440px; color: var(--ink); text-decoration: none; }
  .fit b { font: 400 1rem/1 var(--f-label); }
  .fit.none .face { width: 40px; flex: none; }
  .minijar { flex: none; width: 30px; height: 42px; border: 3px solid var(--ink); border-top-width: 6px; border-radius: 5px 5px 10px 10px; background: linear-gradient(to top, var(--teal) var(--h), transparent var(--h)); }
  .near { background: #e3efd3; padding: 10px 14px; margin-top: 14px; }
  .lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 18px; }
  .lesson { position: relative; background: #fffdf6; padding: 18px 14px 14px; box-shadow: 0 3px 8px rgba(0,0,0,.15); text-align: center; color: var(--ink); text-decoration: none; border-bottom: 5px solid var(--c); }
  .lesson .tape { position: absolute; top: -9px; left: 50%; width: 80px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: url(/img/tape_sheet_01.webp) 0 0/320px auto; opacity: .9; }
  .lesson img { height: 96px; width: auto; margin: 0 auto 8px; }
  .lesson small { display: block; font-size: .78rem; color: #5b5546; }
  .lesson b { display: block; font: 400 .98rem/1.2 var(--f-slab); margin: 4px 0; }
  .lesson span { display: block; font-size: .86rem; line-height: 1.35; }
  .ladder { list-style: none; counter-reset: step; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
  .ladder li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; }
  .ladder li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--mustard); display: grid; place-items: center; font: 400 .95rem/1 var(--f-label); padding-top: 3px; }
  .ladder li b { font: 400 .8rem/1.2 var(--f-label); }
  .ladder li.or::before { background: #e7d3a2; }
  .plan { margin-top: 6px; }
  @media (max-width: 860px) {
    grid-template-columns: 1fr; padding: 10px;
    .page { padding: 22px 18px 26px; }
    .page.left, .page.right { box-shadow: none; }
    .page.right { border-top: 2px dashed #c9b894; }
    .hero-pic { height: 160px; margin: -30px -4px 6px 10px; }
  }
}
.pg-careers .credits { color: var(--label); font-size: .78rem; line-height: 1.5; margin: 16px 0 0; max-width: 100ch; }
.pg-careers .credits a { color: inherit; }

/* ---------- the route trail and journal ---------- */
.pg-careers.route .book {
  .mini-pic { position: absolute; right: 16px; top: 12px; height: 110px; width: auto; transform: rotate(4deg); }
  h1 { max-width: calc(100% - 110px); }
  .bar { height: 12px; background: rgba(29,36,72,.14); border-radius: 8px; overflow: hidden; margin-top: 6px; }
  .bar i { display: block; height: 100%; background: var(--teal); transition: width .4s; }
  .whichyear { background: #fff3cf; padding: 12px 14px; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .whichyear p { margin: 0 0 4px; flex-basis: 100%; }
  .trail { list-style: none; margin: 18px 0 0; padding: 0 0 0 18px; position: relative; }
  .trail::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 10px; background: url(/img/tape_sheet_01.webp) 0 0/300px auto; opacity: .85; }
  .yearhead { margin: 16px 0 8px; }
  .yearhead .torn { --torn-bg: var(--mustard); font-size: .85rem; }
  .here { display: flex; align-items: center; gap: 8px; font: 700 1.15rem/1 var(--f-hand); color: var(--coral); margin: 6px 0 4px -26px; }
  .here img { width: 48px; }
  .step { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed #d4c7a8; }
  .step.chosen { background: rgba(216,165,54,.28); }
  .box { width: 26px; height: 26px; margin-top: 2px; border: 2px solid var(--ink); background: #fff; cursor: pointer; font: 700 1rem/1 var(--f-body); color: #fff; padding: 0; }
  .step.done .box { background: var(--teal); }
  .box.later { border-style: dashed; color: var(--ink); background: none; display: grid; place-items: center; cursor: default; font-size: .9rem; }
  .pickstep { text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font: inherit; }
  .meta { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: #5b5546; margin: 0 0 2px; }
  .kind { font: 400 .68rem/1 var(--f-label); padding: 4px 6px 2px; background: var(--k, var(--teal)); color: #fff; }
  [data-kind="library"] { --k: #8a5a8c; } [data-kind="read"] { --k: var(--navy); } [data-kind="watch"] { --k: var(--coral); }
  [data-kind="try"] { --k: var(--sage); } [data-kind="school"] { --k: #b07d16; } [data-kind="later"] { --k: #8c8573; }
  .pickstep b { display: block; font-size: .95rem; line-height: 1.3; }
  .pickstep .detail { display: block; font-size: .85rem; line-height: 1.35; color: #3c3a33; }
  .stepcard { background: #fff; padding: 18px 20px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
  .stepcard h2 { margin: 6px 0 8px; }
  .stepcard .go { font-weight: 600; }
  .notes-h { margin-top: 26px; }
  .lock { background: #fff3cf; border-left: 5px solid var(--mustard); padding: 10px 14px; font-size: .92rem; }
  .entries { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
  .prompts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
  .prompts .chip { font: 400 .85rem/1.2 var(--f-body); border-left-color: var(--mustard); }
  textarea { width: 100%; font: 700 1.2rem/1.5 var(--f-hand); padding: 8px 12px; border: 2px solid var(--ink); border-radius: 4px;
             background: #fffdf6 repeating-linear-gradient(transparent 0 29px, #d7e6ef 29px 30px); background-attachment: local; }
  .feel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; font-size: .92rem; }
  .feel span { flex-basis: 100%; }
  .feel button { width: 40px; height: 40px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
  .feel button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
}
.pg-careers .entries li { background: #fffdf6; padding: 10px 14px; box-shadow: 0 2px 0 rgba(0,0,0,.1); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.pg-careers .entries .when { margin: 0; font-size: .8rem; color: #5b5546; grid-column: 1; }
.pg-careers .entries .felt { grid-column: 2; grid-row: 1 / span 2; width: 34px; }
.pg-careers .entries .said { margin: 0; font: 700 1.2rem/1.35 var(--f-hand); white-space: pre-wrap; grid-column: 1; }
.pg-careers .safety { margin-top: 18px; display: grid; gap: 10px; }
.pg-careers .safety .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pg-careers .safety .shared { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.pg-careers .safety .confirm { background: #fde3dc; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-careers .safety .confirm p { margin: 0; flex-basis: 100%; }
.pg-careers.journal .notebook { max-width: 820px; margin: 0 auto; }
.pg-careers.journal h1 { font: 400 clamp(1.6rem, 4vw, 2.3rem)/1.1 var(--f-slab); margin-bottom: 18px; }
.pg-careers .printonly { display: none; }
@media (max-width: 860px) { .pg-careers.route .book .here { margin-left: -18px; } }

/* print: the route prints its done steps and notes; the journal prints itself */
@media print {
  .site-head, .endcard, .cookie-notice, .pg-careers .top, .pg-careers .safety, .pg-careers .credits { display: none !important; }
  .pg-careers.route .book { display: none; }
  .pg-careers .printonly { display: block; color: #000; }
  .pg-careers .printonly h1 { font: 400 1.8rem/1.1 var(--f-slab); }
  .pg-careers .printonly h2 { font: 400 1.2rem/1.1 var(--f-slab); margin-top: 18px; }
  .pg-careers, .pg-careers.bg-kraft { background: #fff !important; }
}

/* ---------- ways in from the rest of the site ---------- */
/* a unit card's "Careers that use this" strip (subjects page) */
.careers-strip { margin: 12px 0 14px; background: #c29c6e url(/img/bg_kraft.webp) center/cover; padding: 10px 12px 12px; border-radius: 4px; }
.careers-strip { min-width: 0; }
.careers-strip .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.careers-strip h4 { color: #2b1d0b; margin: 0 !important; }
.careers-strip .arrows { display: flex; gap: 6px; flex: none; }
.careers-strip .arrows.hide { display: none; }
.careers-strip .arrows button { width: 34px; height: 30px; border: 0; border-radius: 4px; background: var(--ink); color: #fffdf6; font: 400 1.4rem/1 var(--f-slab); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.careers-strip .arrows button:disabled { opacity: .3; cursor: default; }
/* sized so part of the next card always peeks in at the edge when there are more */
.careers-strip .row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.careers-strip .row.more-r { mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.careers-strip .row.more-l { mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
.careers-strip .row.more-l.more-r { mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.careers-strip .cc { flex: 0 0 max(180px, calc((100% - 20px) / 2.4)); scroll-snap-align: start; display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; background: #fffdf6; padding: 6px 10px 6px 4px; color: var(--ink); text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.careers-strip .cc img { height: 70px; width: auto; justify-self: center; }
.careers-strip .cc b { display: block; font: 400 .92rem/1.1 var(--f-slab); }
.careers-strip .cc span span { display: block; font-size: .74rem; line-height: 1.3; }
.careers-strip .tryit { background: #fff3cf; padding: 10px 12px; margin: 0 0 10px; font-size: .92rem; }
.careers-strip .tryit .btn { margin-top: 8px; display: inline-block; }
/* the end of a subject's trail */
.pg-subjects .summit .leadsign { display: inline-block; margin-top: 18px; text-decoration: none; color: var(--ink); background: var(--mustard);
  padding: 12px 48px 12px 18px; font: 400 1.3rem/1.1 var(--f-slab); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.pg-subjects .summit .leadsign small { display: block; font: 400 .9rem/1.3 var(--f-body); margin-top: 4px; }
/* Families: talk about jobs; Explorers Club: take the interest questions */
.pg-families .talkjobs .wrap, .pg-explorers .careers-card .wrap { display: grid; grid-template-columns: 1fr 260px; gap: 30px; align-items: center; }
.pg-families .talkjobs img, .pg-explorers .careers-card img { width: 100%; max-width: 260px; }
.pg-explorers .careers-card { padding-block: 60px 80px; }
.pg-explorers .careers-card p { max-width: 56ch; }
@media (max-width: 760px) { .pg-families .talkjobs .wrap, .pg-explorers .careers-card .wrap { grid-template-columns: 1fr; } .pg-families .talkjobs img, .pg-explorers .careers-card img { max-width: 180px; } }