/* PeopleSeek Talent, the job pages' shell layer. It loads after the owner's
   talent.css (export 2) and adds only jp- classes for the pages the export
   does not draw: the page frame, the hero, the breadcrumb, long text, the
   data credits and the 404 and 503 blocks. Every colour, line, radius and
   font is an export token, so light and dark follow the export's own
   :root[data-theme="dark"] with no rule here. Sizes follow the export's
   .sh, .dhero and .dsx. */

.jp{display:block;min-height:50vh}

/* Section padding for content pages: the export's .pad, tighter where a list follows. */
.jp-pad{padding-top:clamp(32px,4.5vw,56px);padding-bottom:clamp(32px,4.5vw,56px)}

/* A page hero in one column: eyebrow, title, lead. */
.jp-hero{display:grid;gap:0;padding-top:clamp(40px,5.5vw,72px);padding-bottom:clamp(36px,5vw,64px)}
.jp-hero h1{margin-top:20px;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.05em;font-weight:600;max-width:22ch}
.jp-hero .sub{margin-top:20px;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--mute);max-width:60ch}
.jp-hero .sub+.sub{margin-top:10px}
.jp-hero .jp-crumb{margin-bottom:22px}

/* The breadcrumb: mono, muted, slash separators. */
.jp-crumb{font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.jp-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.jp-crumb li{display:inline-flex;align-items:center;min-width:0}
.jp-crumb li+li::before{content:"/";margin:0 8px;color:var(--mark)}
.jp-crumb a{color:var(--mute);text-decoration:none;border-radius:4px}
.jp-crumb a:hover{color:var(--ink)}
.jp-crumb [aria-current="page"]{color:var(--ink2);overflow-wrap:anywhere}

/* Long text: a sanitised job description, the docs' paragraphs. */
.jp-prose{color:var(--ink2);font-size:15.5px;line-height:1.65;max-width:72ch;overflow-wrap:break-word}
.jp-prose>*+*{margin-top:14px}
.jp-prose h2,.jp-prose h3,.jp-prose h4{color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.jp-prose h2{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.03em}
.jp-prose h3{font-size:17px}
.jp-prose h4{font-size:15px}
.jp-prose>h2:not(:first-child),.jp-prose>h3:not(:first-child),.jp-prose>h4:not(:first-child){margin-top:28px}
.jp-prose ul,.jp-prose ol{margin:0;padding-left:20px;display:grid;gap:6px}
.jp-prose li{padding-left:2px}
.jp-prose li::marker{color:var(--mute)}
.jp-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.jp-prose a:hover{text-decoration-color:var(--ink)}
.jp-prose strong,.jp-prose b{color:var(--ink);font-weight:600}
.jp-prose code{font-family:var(--mono);font-size:.88em;background:var(--tag);border-radius:5px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
.jp-prose hr{border:0;border-top:1px solid var(--line)}

/* The data credits (owner decision D1): once, small and muted, above the footer. */
.jp-credit{margin:0;padding:18px var(--gutr) 18px var(--gut);font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--mute)}

/* A row of actions under a block. */
.jp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* The 404 and 503 blocks: the export's .sh, its title as the page's h1. */
.jp-err{padding-top:clamp(64px,9vw,128px);padding-bottom:clamp(64px,9vw,128px)}
.jp-err .sh h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.02;letter-spacing:-.045em;font-weight:600}