/* Careers sits on the mission column -- main.mission supplies the 640px
   measure, the top edge, and the reading type -- and this file adds only what
   the page itself introduces: eyebrows, section rhythm, the ruled lists, the
   role rows, and the three media bands. Everything reads from site.css's
   tokens so the page stays in step with the rest of the interior. */

.careers-page :where(h2, h3, p, ul, ol, figure) { margin: 0; }
.careers-page :where(section)[id] { scroll-margin-top: 32px; }
.careers-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.careers-eyebrow {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
}

.careers-heading .careers-accent { color: var(--accent); }
.careers-jump { margin-top: 26px; }

/* The section title: below the page's display size, above the row titles. */
.careers-section { margin-top: clamp(64px, 7.4vw, 104px); }
.careers-page h2 {
  margin: 0 0 26px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.careers-body p { font-size: var(--fs-body); line-height: 1.7; }
.careers-body p + p { margin-top: 14px; }

/* The standalone links, set as the site's mono-caps links are (/crops "Why
   this matters"): 16px mono caps carrying the drawn angle arrow. The arrow is
   drawn, not typed -- the Latin-1 Plex Mono subset has no U+2197, so a typed
   arrow falls back to a system face at a fraction of the caps. The jump
   link's copy points down the page. */
.careers-link, .careers-jump {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  text-transform: uppercase;
}
.careers-link { margin-top: 26px; }
.careers-page :is(.careers-link, .careers-jump) a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity .25s ease;
}
.careers-page :is(.careers-link, .careers-jump) a:hover { opacity: .7; }
.link-arrow {
  display: inline-block; width: .7em; height: .7em; margin-left: .45em; vertical-align: baseline;
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: square;
}
.link-arrow-down { transform: rotate(135deg); }

/* ===================== the ruled lists ===================== */
/* Traits and the work read as the challenges page's rows: hairline rules,
   quiet titles, the numerals in the site's mono. */
.careers-traits, .careers-work { list-style: none; padding: 0; margin: 44px 0 0; }
.careers-traits > li, .careers-work > li { padding: 26px 0 28px; border-top: 1px solid var(--line); }
.careers-traits > li:first-child { border-top: 0; }
.careers-traits > li:last-child, .careers-work > li:last-child { border-bottom: 1px solid var(--line); }
.careers-page h3 {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.careers-traits p { margin-top: 10px; color: var(--dim); font-size: 16px; line-height: 1.6; }

.careers-work > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
.careers-work-number { padding-top: 5px; font: 12px/1.5 var(--mono); color: var(--accent); }
.careers-work p { margin-top: 10px; color: var(--dim); font-size: 16px; line-height: 1.6; }
.careers-work p.careers-fields {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--mut);
}

/* ===================== the media bands ===================== */
/* The tiles' corners, in the column. The strip is the three assay stations
   at one crop; the moth band is the homepage hero's frame, the page's one
   moment of color before the roles. */
.careers-media { margin-top: clamp(48px, 6vw, 84px); }
.careers-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 1.46vw, 28px);
  background: #1a1a1a;
}
/* The strip scrolls sideways rather than stacking, so three photographs cost
   the page one band's height. It runs full-bleed the way the crops marquee
   does -- the frames scroll in the open margins rather than clipping at the
   column's edge, which is also what says "this scrolls". The inset puts the
   first frame on the column's text edge and snap returns frames to it. */
.careers-carousel {
  --carousel-inset: max(var(--gutter-band), calc(50vw - 320px));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: var(--carousel-inset);
  scroll-padding-inline: var(--carousel-inset);
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.careers-carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Every frame rides at one height and takes its own width, so a portrait
   sits in the strip beside the landscapes without breaking the line the
   frames hang from -- and the differing widths read as a filmstrip. */
.careers-carousel img {
  flex: none;
  width: auto;
  height: clamp(240px, 37.8vw, 543px);
  scroll-snap-align: start;
  border-radius: clamp(12px, 1.1vw, 20px);
}

/* The counter and the two arrows, on the column's text edge where the first
   frame starts. They say "this scrolls"; they are not the only way to do it.
   Hidden until careers-carousel.js is running (see the markup). */
.careers-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.careers-carousel-nav[hidden] { display: none; }
.careers-carousel-count {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--mut);
}
.careers-carousel-buttons { display: flex; gap: 8px; }
.careers-carousel-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease, opacity .18s ease;
}
.careers-carousel-nav button svg { display: block; width: 15px; height: auto; }
.careers-carousel-nav [data-carousel-prev] svg { transform: rotate(180deg); }
.careers-carousel-nav button:hover:not(:disabled) { border-color: var(--ink); }
.careers-carousel-nav button:disabled { opacity: .28; cursor: default; }
.careers-carousel-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The office, closing the page after the roles, in the tiles' portrait cut. */
.careers-media-entrance img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ===================== the roles ===================== */
.careers-role-list { list-style: none; padding: 0; margin: 40px 0 0; }
.careers-role-list li { border-top: 1px solid var(--line); }
.careers-role-list li:last-child { border-bottom: 1px solid var(--line); }
.careers-role-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 24px;
  align-items: start;
  padding: 24px 0 26px;
  color: var(--ink);
  text-decoration: none;
  transition: none;
}
.careers-role-list a:hover { opacity: 1; }
.careers-role-list a:hover .careers-role-title { color: var(--accent); }
.careers-role-list a:hover .careers-role-arrow svg { transform: translate(2px, -2px); }
.careers-role-title { transition: color .18s ease; }
.careers-role-arrow svg { transition: transform .4s var(--ease-chrome); }
.careers-role-team {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--mut);
}
.careers-role-meta { text-align: right; }
.careers-role-meta span { display: block; font-size: 15px; line-height: 1.5; color: var(--dim); }
.careers-role-meta span + span { margin-top: 4px; font-size: 13px; color: var(--mut); }
.careers-role-arrow { padding-top: 6px; color: var(--accent); }
.careers-role-arrow .link-arrow { display: block; width: 13px; height: 13px; margin: 0; }

/* The closing FAQs use native disclosure controls and the page's ruled rows. */
.careers-faq .faq-list { gap: 0; }
.careers-faq details { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.careers-faq details:last-child { border-bottom: 1px solid var(--line); }
.careers-faq summary { padding: 26px 0; gap: 24px; font-size: 21px; font-weight: 400; line-height: 1.3; letter-spacing: -.012em; }
.careers-faq .faq-answer { padding: 0 0 28px; color: var(--dim); font-size: 16px; line-height: 1.6; }
.careers-faq-toggle { position: relative; flex: 0 0 16px; width: 16px; height: 28px; color: var(--accent); }
.careers-faq-toggle::before, .careers-faq-toggle::after { content: ""; position: absolute; background: currentColor; }
.careers-faq-toggle::before { left: 1px; top: 13px; width: 14px; height: 1px; }
.careers-faq-toggle::after { left: 7px; top: 7px; width: 1px; height: 14px; }
.careers-faq details[open] .careers-faq-toggle::after { display: none; }

@media (max-width: 720px) {
  .careers-role-list a { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 16px; }
  .careers-role-name { grid-column: 1; }
  .careers-role-meta { grid-column: 1; margin-top: 10px; text-align: left; }
  .careers-role-arrow { grid-column: 2; grid-row: 1; }
  .careers-media-strip { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .careers-role-title, .careers-role-arrow svg, .careers-carousel-nav button { transition: none; }
  .careers-role-list a:hover .careers-role-arrow svg { transform: none; }
}