/* ============================================================================
   careers.css — the stylesheet for the careers family of pages.

   Three pages load this file: the careers landing page (careers.html) and the
   two role pages (fullstack-engineer.html, bd-person.html). Everything here is
   specific to those pages. Anything the whole site shares lives in site.css and
   is never copied into this file.

   The visual language these pages follow is written up in full at
   brain/user/design/2026-08-25-linear-visual-style-spec.md. The three rules
   that shape most of what follows: the ground is flat with nothing layered
   behind it; importance is shown by how light a grey the text is, not by size;
   and nothing casts a shadow, blurs, or lifts on hover.
   ============================================================================ */



/* ----------------------------------------------------------- page shell -- */

/* The site header is fixed to the top of the window, so it floats above the
   page rather than pushing it down. Without this padding the first headline
   would start underneath it and be unreadable. The home page solves the same
   problem inside its hero; these pages have no hero, so they solve it here. */
main{padding-top:var(--header-h)}

/* A role page is not the careers page, so its nav link cannot honestly claim
   aria-current="page" — that value means "this link points at the page you are
   reading". aria-current="true" is the correct value for "this is the section
   you are in". site.css only lights up the "page" value, so the "true" value
   needs the same treatment here or the nav would give no sense of place at all
   on a role page. */
.nav a[aria-current="true"]{color:var(--cl-text)}

/* The h1 that opens a page. One step above the .head-title used for section
   headings below it, so the page has a clear single top of the hierarchy.
   Weight 510 and line-height 1 are the house style: these headlines get their
   presence from size and from how tightly the lines pack, never from bold. */
.page-title{margin:0;color:var(--cl-text);
  font:510 clamp(38px,5.4vw,64px)/1 var(--font-display);letter-spacing:-.022em}

/* "Back to all roles", sitting where a section eyebrow would sit. The arrow
   points left and moves left on hover, which is the mirror of .arrow-link in
   site.css — the arrow moves, the row stays perfectly still. */
.back-link{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;
  color:var(--cl-text-faint);font:11px var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;transition:color .15s ease}
.back-link:hover{color:var(--cl-accent)}
.back-link .ar{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.back-link:hover .ar{transform:translateX(-4px)}


/* ------------------------------------------------------- the role list -- */

/* The open roles are rows, not cards: separated by hairlines only, with no
   fill, no border box, no shadow, and nothing that moves position when the
   pointer crosses them. Only colour changes on hover. This is the same
   treatment the team rows on the home page get. */
.roles{margin-top:56px;border-top:1px solid var(--hair)}

/* Three columns: a position marker, the role itself, and the call to action
   pinned right. `align-items:baseline` lines the marker up with the first line
   of the role title rather than with the middle of the whole row. */
.role{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:24px;
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hair)}

/* Rank 4 grey. The number is a position marker, not information. */
.role-index{color:var(--cl-text-faint);font:11px var(--font-mono);letter-spacing:.16em}

.role-title{display:block;color:var(--cl-text);
  font:510 20px/1.3 var(--font-display);letter-spacing:-.02em}

/* The one-line summary of the role, in ordinary body grey. */
.role-line{display:block;margin-top:7px;color:var(--cl-text-muted)}

/* `white-space:nowrap` keeps "Open role →" on one line, so the arrow can never
   be orphaned onto a second line of its own. */
.role-go{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  color:var(--cl-text-faint);font-size:14px;transition:color .15s ease}
.role:hover .role-go{color:var(--cl-accent)}
.role .ar{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.role:hover .ar{transform:translateX(4px)}


/* ------------------------------------------------- role page furniture -- */

/* Facts about the job that are not prose — where it is based, for example.
   Set as mono pills so they read as data rather than as a sentence. The row
   sits directly under the page title, which is why the margin is on top. */
.role-meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.meta-chip{padding:5px 12px;border:1px solid var(--hair);border-radius:9999px;
  color:var(--cl-text-muted);font:11px var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase}

/* The bulleted lists of responsibilities and requirements. The default disc
   marker is replaced with a short rule in the faintest grey, so the marker
   stays quieter than the words it introduces. 44em keeps a line to roughly
   ninety characters, which is comfortable to read. */
.spec-list{margin:0;padding:0;max-width:44em;list-style:none}
.spec-list li{position:relative;padding-left:24px;color:var(--cl-text-muted)}
.spec-list li+li{margin-top:13px}
/* `top:.8em` puts the rule on the optical centre of the first line of text,
   which is why it is set in em rather than pixels: it follows the font size. */
.spec-list li::before{content:"";position:absolute;left:0;top:.8em;
  width:8px;height:1px;background:var(--cl-text-faint)}

/* A plain paragraph in the right-hand column of a section, where that section
   has prose instead of a list. */
.spec-body{margin:0;max-width:44em;color:var(--cl-text-muted)}
.spec-body+.spec-body{margin-top:16px}

/* A link inside a sentence. site.css strips the colour and the underline from
   every anchor on the site, which is right for navigation but leaves a link in
   the middle of a paragraph completely invisible. The underline is drawn at
   less than full strength so it stays quiet, and comes up to full strength on
   hover — the text itself never moves. */
.link{color:var(--cl-accent);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--cl-accent) 45%,transparent);
  transition:text-decoration-color .15s ease}
.link:hover{text-decoration-color:var(--cl-accent)}


/* ------------------------------------------------- the application form -- */

/* The Google Form is embedded from docs.google.com, which is a different
   origin. A cross-origin frame cannot tell the page how tall its contents are,
   so the height has to be stated here rather than measured. clamp() gives it a
   floor of 680px (enough that the first questions are visible without the
   frame scrolling), 82% of the window on a normal screen, and a ceiling of
   1120px — measured on 2026-08-27 as the full height of the form at desktop
   width, so on a tall monitor the whole form fits with nothing to scroll. On a
   shorter window the frame scrolls internally, which is expected. */
/* 760px, not the full width of the section. Google lays the form itself out at
   about 640px and paints its own light background across everything either
   side, so a full-width frame would put a very large pale block on a dark page.
   Capping the frame just above the form's own width keeps the pale area to
   roughly the size of the form. */
.form-frame{max-width:760px;margin-top:44px;border:1px solid var(--hair);border-radius:6px;
  /* The form's own page is white. `overflow:hidden` makes the rounded corners
     actually clip it, instead of the white showing through the corners. */
  overflow:hidden;background:#fff}
.form-frame iframe{display:block;width:100%;border:0;
  height:clamp(680px,82vh,1120px)}


/* ----------------------------------------------------------- responsive -- */

@media (max-width:760px){
  /* The call to action has no room left beside the role, so it moves under it
     and lines up with the role title rather than with the position marker. */
  .role{grid-template-columns:40px minmax(0,1fr);row-gap:14px}
  .role-go{grid-column:2}

  /* On a phone the window is short as well as narrow, so 82% of it is not
     enough of the form to be usable. A flat 620px shows several questions and
     lets the frame scroll for the rest. */
  .form-frame iframe{height:620px}
}