@charset "UTF-8";
/**
 *  careers.scss — page styles for careers.html.
 *  Compiled by CodeKit to build/css/careers.css.
 *  Ported from the v3 prototype, Round 108; the sphere hero and the five
 *  role rows landed in the Round-108 addendum. The empty-card styles stay
 *  for whenever the listings empty again.
 */
body.careers div.section-heading p.eyebrow {
  font-size: 12px;
}

/* The hero rides the template with the shared node sphere (hero.sphere.js
   — about's hero, adopted here per Josh's ruling 2026-08-02: the sphere
   IS the outside-disciplines thesis). Residue: the accent on the
   Shackleton fragment. */
/* The ending of the ad, called out in the accent cyan (orange read off
   on the light ground, Josh 2026-08-02). */
body.careers section.hero div.copy p.lead b.phrase {
  color: rgb(0, 124, 153);
}

/* The debunk as fine print — the true part of the ad, in the footnote. */
body.careers section.hero div.copy p.footnote {
  font-style: italic;
  font-size: 14.5px;
  color: rgb(91, 107, 122);
  max-width: 52ch;
  margin: 18px 0 0;
}

/* The footnote marker — text-orange (the on-light orange). */
body.careers section.hero div.copy p.footnote span.asterisk {
  font-style: normal;
  font-weight: 600;
  color: rgb(194, 77, 0);
}

/* The pillar grids — backgrounds (pairs) and rewards (triple). */
body.careers section.backgrounds {
  padding: 80px 0;
}

body.careers section.rewards {
  padding: 80px 0;
}

body.careers div.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
}

body.careers div.pillars.triple {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1060px;
}

body.careers div.pillar {
  background: #ffffff;
  border: 1px solid rgb(230, 234, 238);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 30px -26px rgba(0, 43, 73, 0.3);
}

body.careers div.pillar p.eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

body.careers div.pillar b {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 17.5px;
  color: rgb(0, 43, 73);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

body.careers div.pillar p {
  font-size: 14.5px;
  color: rgb(91, 107, 122);
}

/* Re-asserted at pillar-child specificity (the Round-97 lesson). */
body.careers div.pillar p.eyebrow {
  font-size: 11px;
  line-height: 1.65;
}

/* Open roles — teaser rows plus the empty card. */
body.careers section.roles {
  padding: 20px 0 80px;
}

body.careers div.listings {
  max-width: 820px;
  margin: 0 auto 18px;
  display: grid;
  gap: 14px;
}

body.careers a.role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: #ffffff;
  border: 1px solid rgb(230, 234, 238);
  border-radius: 16px;
  padding: 24px 28px;
  text-decoration: none;
  box-shadow: 0 8px 30px -26px rgba(0, 43, 73, 0.3);
  transition: transform 0.15s cubic-bezier(0.22, 0.75, 0.25, 1), border-color 0.15s cubic-bezier(0.22, 0.75, 0.25, 1);
}

body.careers a.role:hover {
  transform: translateY(-2px);
  border-color: rgb(0, 145, 179);
}

body.careers a.role p.eyebrow {
  font-size: 11px;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

body.careers a.role h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 17.5px;
  color: rgb(0, 43, 73);
  letter-spacing: -0.01em;
}

body.careers a.role p {
  font-size: 14.5px;
  color: rgb(91, 107, 122);
  margin-top: 6px;
}

/* Re-asserted at row-child specificity (the Round-97 lesson). */
body.careers a.role p.eyebrow {
  font-size: 11px;
  margin-top: 0;
}

body.careers a.role span.go {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgb(0, 124, 153);
  white-space: nowrap;
}

body.careers div.empty {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px dashed rgb(230, 234, 238);
  border-radius: 16px;
  padding: 36px;
  text-align: center;
}

body.careers div.empty p.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}

body.careers div.empty p {
  font-size: 15.5px;
  color: rgb(91, 107, 122);
  max-width: 56ch;
  margin: 0 auto;
}

/* Re-asserted at card-child specificity (the Round-97 lesson). */
body.careers div.empty p.eyebrow {
  font-size: 11px;
}

body.careers div.empty p.direct {
  margin: 18px auto 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13.5px;
  color: rgb(0, 43, 73);
  font-weight: 500;
}

@media (max-width: 880px) {
  body.careers div.pillars {
    grid-template-columns: 1fr;
  }
  body.careers div.pillars.triple {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  body.careers a.role {
    flex-direction: column;
    align-items: flex-start;
  }
}