/* --- self hosted type, no third party request on page load ------------- */
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/archivo-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}

/* ==========================================================================
   Calibre HR
   Shared stylesheet. One file for every page.
   Palette and mark come from the locked logo: ranked bars, brass, ink, ivory.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------ */
:root {
  --ink:        #101A23;
  --ink-2:      #243240;
  --ink-line:   #2C3A46;
  --ivory:      #F6F4EF;
  --paper:      #FFFFFF;
  --brass:      #B4822F;
  --brass-deep: #8A5F1C;
  --slate:      #55636F;
  --hair:       #E3DFD6;

  --sans: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gut: 24px;

  /* type scale, major third, rounded */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-bd: 17px;
  --t-md: 21px;
  --t-lg: 27px;
  --t-xl: 34px;
  --t-2xl: 43px;
  --t-3xl: 55px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-bd);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
h1 { font-size: var(--t-3xl); letter-spacing: -0.032em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.028em; }
h3 { font-size: var(--t-md); letter-spacing: -0.012em; }
h4 { font-size: var(--t-bd); letter-spacing: -0.008em; }
p  { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.lede { font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--slate); }
.small { font-size: var(--t-sm); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.band { padding-block: 88px; }
.band--tight { padding-block: 56px; }
.band--ink { background: var(--ink); color: var(--ivory); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--ivory); }
.band--ink p { color: #C3CBD3; }
.band--rule { border-top: 1px solid var(--hair); }

.cols { display: grid; gap: 48px; }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; }
.cols--split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; }

/* --- header ------------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.site-head__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand__word { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.brand__word b { font-weight: 600; color: var(--brass-deep); }

.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

.nav-toggle { display: none; background: none; border: 1px solid var(--hair); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: var(--t-sm); margin-left: auto; cursor: pointer; min-height: 44px; }

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 6px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--ivory);
  font: inherit; font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--ivory); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--brass:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--ivory); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- the shortlist panel, the one loud thing on the site --------------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 3px;
  box-shadow: 0 18px 44px -28px rgba(16, 26, 35, 0.45);
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--hair);
}
.panel__title { font-size: var(--t-sm); font-weight: 600; }
.panel__meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); }

.rank { position: relative; padding: 8px 0; }
.rank__row {
  position: absolute; left: 0; right: 0; top: 8px;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px auto;
  align-items: center; gap: 12px;
  height: 56px; padding: 0 20px;
  border-bottom: 1px solid #F0EDE6;
  transition: transform 620ms cubic-bezier(0.22, 0.9, 0.25, 1), opacity 320ms ease;
}
.rank__pos { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); }
.rank__who { min-width: 0; }
.rank__name { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__role { font-size: var(--t-xs); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__score { font-family: var(--mono); font-size: var(--t-md); font-weight: 500; text-align: right; }

.verdict { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 4px 9px; border-radius: 3px; white-space: nowrap; }
.verdict--up   { background: var(--brass); color: var(--ink); }
.verdict--thin { background: transparent; color: var(--ink); border: 1px solid var(--slate); }
.verdict--no   { background: #E7E2D8; color: #3B4854; border: 1px solid #D3CCBE; }

.panel__foot { padding: 14px 20px; border-top: 1px solid var(--hair); font-size: var(--t-xs); color: var(--slate); }

/* --- the thirty minute bar --------------------------------------------- */
.clock { margin: 32px 0 20px; }
.clock__bar { display: flex; height: 54px; border: 1px solid var(--ink-line); border-radius: 3px; overflow: hidden; background: var(--ink-2); }
.clock__seg {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--ink-line);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.3, 0.8, 0.3, 1);
}
.clock__seg:last-child { border-right: 0; }
.clock__seg span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ivory); }
.clock__seg--cv { background: var(--brass); }
.clock__seg--cv span { color: var(--ink); font-weight: 500; }
.clock__seg--buffer { background: repeating-linear-gradient(135deg, #2C3A46 0 6px, #243240 6px 12px); }
.is-running .clock__seg { transform: scaleX(1); }

.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 28px; margin-top: 28px; padding: 0; list-style: none; }
.legend li { border-top: 2px solid var(--ink-line); padding-top: 12px; }
.legend li.is-cv { border-top-color: var(--brass); }
.legend b { display: block; font-size: var(--t-sm); font-weight: 600; }
.legend span { font-family: var(--mono); font-size: var(--t-xs); color: #98A4AF; }
.legend p { font-size: var(--t-sm); margin: 6px 0 0; color: #C3CBD3; }

/* --- verdict explainer -------------------------------------------------- */
.states { list-style: none; margin: 0; padding: 0; }
.states li { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
.states li:last-child { border-bottom: 1px solid var(--hair); }
.states p { margin: 0; }

/* --- steps (a real sequence, so numbered) ------------------------------ */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--hair); }
.steps li::before {
  content: counter(step);
  font-family: var(--mono); font-size: var(--t-sm); color: var(--brass-deep);
  border: 1px solid var(--hair); border-radius: 999px;
  width: 36px; height: 36px; display: grid; place-items: center;
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; }

/* --- logo wall ---------------------------------------------------------- */
.wall { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall__track { display: flex; gap: 20px; width: max-content; animation: drift 46s linear infinite; }
.wall--back .wall__track { animation-duration: 62s; animation-direction: reverse; }
.wall:hover .wall__track, .wall:focus-within .wall__track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.slot {
  flex: 0 0 auto; width: 176px; height: 84px;
  display: grid; place-items: center; padding: 14px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 3px;
}
.slot img { display: block; width: 148px; height: auto; }
.slot--empty { background: repeating-linear-gradient(135deg, #FFF 0 8px, #F4F1E9 8px 16px); }
.slot--empty span { font-family: var(--mono); font-size: 11px; color: var(--slate); text-align: center; }

/* --- plain content lists ------------------------------------------------ */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 18px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; }
.rows li:last-child { border-bottom: 1px solid var(--hair); }
.rows b { font-weight: 600; }
.rows .num { color: var(--slate); font-size: var(--t-sm); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; margin: 0; padding: 0; }
.facts div { border-top: 2px solid var(--brass); padding-top: 14px; }
.facts dt { font-size: var(--t-sm); color: var(--slate); }
.facts dd { margin: 4px 0 0; font-family: var(--mono); font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; }

/* --- forms -------------------------------------------------------------- */
.form { max-width: 680px; }
.field { margin-bottom: 20px; }
.field > label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 6px; }
.hint { display: block; font-size: var(--t-xs); color: var(--slate); font-weight: 400; margin-top: 2px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  font: inherit; font-size: var(--t-bd);
  color: var(--ink); background: var(--paper);
  border: 1.5px solid #D8D2C6; border-radius: 6px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brass); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* one label carries a hint line and the other does not, so without this the
   two inputs sit at different heights. push each input to the bottom of its
   column and they line up whatever the label does. */
.pair > .field { display: flex; flex-direction: column; }
.pair > .field > label { margin-bottom: 6px; }
.pair > .field input, .pair > .field select, .pair > .field textarea { margin-top: auto; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span { display: block; min-height: 44px; padding: 10px 18px; border: 1.5px solid #D8D2C6; border-radius: 6px; background: var(--paper); font-size: var(--t-sm); font-weight: 500; }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.choice input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 3px; }

.drop {
  border: 1.5px dashed #C9C2B4; border-radius: 6px; background: var(--paper);
  padding: 28px 20px; text-align: center;
  transition: border-color 140ms ease, background 140ms ease;
}
.drop.is-over { border-color: var(--brass); background: #FDFBF6; }
.drop.is-set { border-style: solid; border-color: var(--ink); }
.drop input[type="file"] { display: block; margin: 12px auto 0; font-size: var(--t-sm); }
.drop__name { font-family: var(--mono); font-size: var(--t-sm); margin-top: 10px; }

.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px; background: #EFECE4; border-radius: 6px; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brass-deep); }
.consent label { font-size: var(--t-sm); line-height: 1.5; }

/* the reading state after upload */
.reading { display: none; align-items: center; gap: 14px; margin-top: 18px; font-size: var(--t-sm); }
.reading.is-on { display: flex; }
.reading__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--brass); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

/* --- blog --------------------------------------------------------------- */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { padding: 26px 0; border-top: 1px solid var(--hair); }
.posts li:last-child { border-bottom: 1px solid var(--hair); }
.posts h3 { margin-bottom: 6px; }
.posts a { color: var(--ink); text-decoration: none; }
.posts a:hover { color: var(--brass-deep); text-decoration: underline; }
.posts p { margin: 0; font-size: var(--t-sm); color: var(--slate); }

/* --- footer ------------------------------------------------------------- */
.site-foot { background: var(--ink); color: #AFB9C2; padding-block: 56px 32px; font-size: var(--t-sm); }
.site-foot h2, .site-foot h4 { color: var(--ivory); font-size: var(--t-xs); font-family: var(--mono); font-weight: 400; letter-spacing: 0; margin: 0 0 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--ink-line); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: var(--t-xs); }

/* --- reveal, used sparingly -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 0.9, 0.25, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --t-3xl: 38px; --t-2xl: 31px; --t-xl: 26px; --t-lg: 22px; --t-md: 19px; }
  .band { padding-block: 60px; }
  .cols--2, .cols--3, .cols--hero, .cols--split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .states li { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--hair); padding: 8px var(--gut) 18px;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--hair); }
  .nav .btn { margin-top: 12px; }
}

@media (max-width: 560px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .rank__row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; height: 64px; }
  .rank__score { display: none; }
  .clock__seg span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .clock__seg { transform: scaleX(1); }
}

/* ==========================================================================
   Proof: salary jumps and redacted offer letters
   Real documents only. See /assets/offers/README.txt before adding one.
   ========================================================================== */

.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.result { background: var(--paper); border: 1px solid var(--hair); border-radius: 3px; padding: 24px 22px; }
.result h3 { font-size: var(--t-bd); margin-bottom: 2px; }
.result__where { font-size: var(--t-xs); color: var(--slate); }
.result__jump { display: flex; align-items: baseline; gap: 11px; margin: 18px 0 14px; }
.result__was { font-family: var(--mono); font-size: var(--t-md); color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.result__now { font-family: var(--mono); font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--brass-deep); }
.result__rise { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--brass); }
.result__meta { font-size: var(--t-sm); color: var(--slate); margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); }

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; }
.offer {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 2px;
  box-shadow: 0 16px 34px -26px rgba(16, 26, 35, 0.5);
  aspect-ratio: 1 / 1.414; overflow: hidden; position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.offer:nth-child(even) { transform: rotate(0.7deg); }
.offer:nth-child(odd) { transform: rotate(-0.5deg); }
.offer:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 24px 46px -24px rgba(16, 26, 35, 0.55); }
.offer img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* placeholder: an obvious wireframe, never something that reads as a letter */
.offer--empty { display: flex; flex-direction: column; gap: 9px; padding: 24px 20px; }
.offer--empty i { display: block; height: 7px; border-radius: 2px; background: #E9E5DC; }
.offer--empty i.w-40 { width: 40%; } .offer--empty i.w-60 { width: 60%; }
.offer--empty i.w-80 { width: 80%; } .offer--empty i.w-100 { width: 100%; }
.offer--empty i.bar { background: var(--ink); height: 11px; }
.offer--empty i.gap { background: none; height: 12px; }
.offer--empty small { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--slate); }
.offer__cap { font-size: var(--t-xs); color: var(--slate); margin: 10px 2px 0; }

.promise { list-style: none; margin: 0; padding: 0; }
.promise li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid var(--hair); align-items: start; }
.promise li:last-child { border-bottom: 1px solid var(--hair); }
.promise svg { margin-top: 4px; }
.promise b { font-weight: 600; }
.promise span { display: block; font-size: var(--t-sm); color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  .offer, .offer:hover { transform: none; transition: none; }
}

/* --- long form documents: privacy, terms ------------------------------- */
.doc { max-width: 72ch; }
.doc h2 { font-size: var(--t-lg); margin-top: 46px; }
.doc h3 { font-size: var(--t-bd); margin-top: 30px; margin-bottom: 8px; }
.doc ul, .doc ol { padding-left: 20px; margin: 0 0 1.1em; max-width: 68ch; }
.doc li { margin-bottom: 9px; }
.doc__meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); }
.doc__note { background: #EFECE4; border-radius: 6px; padding: 18px 20px; margin: 0 0 32px; }
.doc__note p { margin: 0; font-size: var(--t-sm); }

/* --- single message pages: sent, 404 ------------------------------------ */
.stage { min-height: 62vh; display: grid; align-content: center; }
.stage .panel { max-width: 620px; padding: 38px 34px; }
.stage h1 { font-size: var(--t-2xl); }

.form__error { background: #F6E7E2; border: 1px solid #D9A695; border-radius: 6px; color: #7A2E18; font-size: var(--t-sm); padding: 14px 16px; margin: 0 0 4px; max-width: none; }
.form__error[hidden] { display: none; }

/* ==========================================================================
   Roles: the catalogue and the individual job description pages
   ========================================================================== */

.rolebar { display: grid; gap: 16px; margin: 0 0 34px; }
.rolebar input[type="search"] {
  width: 100%; min-height: 50px; padding: 12px 15px; font: inherit; font-size: var(--t-bd);
  background: var(--paper); border: 1.5px solid #D8D2C6; border-radius: 6px; color: var(--ink);
}
.rolebar input[type="search"]:focus { border-color: var(--brass); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 8px 14px; font: inherit; font-size: var(--t-sm); font-weight: 500;
  background: transparent; color: var(--ink); border: 1.5px solid #D8D2C6; border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--slate); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.rolecount { font-family: var(--mono); font-size: var(--t-xs); color: var(--slate); }

.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.rolecard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 3px;
  padding: 20px 19px; text-decoration: none; color: var(--ink);
  transition: border-color 140ms ease, transform 140ms ease;
}
.rolecard:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.rolecard h2 { font-size: var(--t-bd); font-weight: 700; margin: 0; letter-spacing: -0.012em; }
.rolecard .cat { font-size: var(--t-xs); color: var(--slate); }
.rolecard .pay { font-family: var(--mono); font-size: var(--t-md); font-weight: 500; color: var(--brass-deep); letter-spacing: -0.02em; margin-top: auto; }
.rolecard .modes { display: flex; flex-wrap: wrap; gap: 6px; }
.rolecard .modes span { font-size: 11px; font-family: var(--mono); color: var(--slate); border: 1px solid var(--hair); border-radius: 3px; padding: 2px 7px; }
.rolecard[hidden] { display: none; }

.bands { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.bands th, .bands td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.bands th { font-size: var(--t-sm); font-weight: 600; }
.bands thead th { font-size: var(--t-xs); color: var(--slate); font-weight: 400; border-bottom: 1px solid var(--ink); }
.bands td { font-family: var(--mono); font-size: var(--t-md); text-align: right; letter-spacing: -0.02em; }

.jd { list-style: none; margin: 0 0 8px; padding: 0; }
.jd li { padding: 13px 0; border-top: 1px solid var(--hair); font-size: var(--t-bd); }
.jd li:last-child { border-bottom: 1px solid var(--hair); }

.modeline { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.modeline span { font-size: var(--t-sm); font-weight: 500; border: 1.5px solid var(--hair); border-radius: 999px; padding: 6px 14px; }

@media (max-width: 560px) {
  .rolegrid { grid-template-columns: minmax(0, 1fr); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Specificity fixes.

   `.band--ink a` and `.nav a` are class plus element, so they beat the
   single class `.btn--brass` and win the colour and padding. On a dark band
   that painted brass text onto a brass button, which only became readable
   on hover. In the nav it stripped the button's horizontal padding.
   Excluding buttons from those rules is the fix, not more overrides.
   ========================================================================== */
.band--ink a:not(.btn) { color: var(--brass); }
.band--ink a:not(.btn):hover { color: var(--ivory); }
.site-foot a:not(.btn) { color: #E4E0D7; }
.site-foot a:not(.btn):hover { color: var(--brass); text-decoration: underline; }
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-size: var(--t-sm);
  font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--brass); }

/* a ghost button would be ink on ink, so give it the dark band treatment */
.band--ink .btn--ghost { color: var(--ivory); border-color: rgba(246, 244, 239, 0.45); background: transparent; }
.band--ink .btn--ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* ==========================================================================
   Placement stories: a monogram, the employer's mark, and the package
   ========================================================================== */

.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; }
.story {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 3px;
  padding: 22px 20px;
}
.story__who { display: flex; align-items: center; gap: 12px; }
.story__mono {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px;
  background: var(--brass); color: var(--ink);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
}
.story__name { display: block; font-size: var(--t-bd); font-weight: 600; letter-spacing: -0.01em; }
.story__where { display: block; font-size: var(--t-xs); color: var(--slate); }
.story__logo { display: flex; align-items: center; height: 44px; }
.story__logo img { display: block; width: 132px; height: auto; }
.story__pay {
  margin-top: auto; font-family: var(--mono); font-size: var(--t-xl); font-weight: 500;
  color: var(--brass-deep); letter-spacing: -0.02em; line-height: 1.1;
}
.story__pay small {
  display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 400; color: var(--slate); letter-spacing: 0;
}

/* the strip of employer marks directly under the hero */
.strip { padding-block: 34px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: #F1EEE7; }
.strip__line { font-size: var(--t-sm); color: var(--slate); margin: 0 0 20px; max-width: none; }
.strip .slot { background: transparent; border: 0; width: 160px; height: 64px; padding: 6px 10px; }
.strip .slot img { width: 140px; }