/* ---------------------------------------------------------------------------
   career.css - the career page surface.

   Direction: docs/research/career-directions/02-open-circuit.png, prototyped
   at iterations/career-open-circuit/ and promoted here on 2026-07-31.

   The company is one live service circuit. A bus crosses the operating plane,
   every open position is a bay hung under it, and the contact at the head of a
   bay says which kind of position it is: closed where somebody is doing the
   work, an outline where nobody is yet. The page exists to solve one problem -
   one position carries ten requirement lines and two carry none - and this is
   how it solves it: an empty bay is a reserved interval on a working circuit,
   which is a state, not a missing card.

   The page opens on its own name and nothing else, set large on the centre
   line under the header. The readout of open positions that used to stand
   there is gone. The first thing under the name is the circuit.

   Colour and type tokens come from the `:root` block in `style.css`; nothing
   global is defined here, only the local variables this surface needs.
   --------------------------------------------------------------------------- */

/* Bricolage Grotesque, for the page name and nothing else.

   It is declared here rather than in `style.css` because `style.css` belongs
   to the closing chrome pass, and because a `@font-face` costs nothing on a
   page that never asks for the family. The same declaration is carried by
   `resellers.css` and `online-islemler.css`, which is where this face is
   already earning its place; the three copies are independent on purpose,
   since no page loads another page's sheet.

   It is `swap`, so it blocks nothing: the name is readable in the fallback
   from the first paint. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-latin-ext-400-800-v1.woff2")
    format("woff2");
}

.career-page {
  --measure: 1344px;
  --gutter: max(32px, calc((100% - var(--measure)) / 2));

  /* The bus and everything hung on it come off two numbers: how far the bays
     sit below the bus, and how large a contact is. Both are restated in the
     compact rules, where the circuit turns ninety degrees. */
  --stub: 96px;
  --contact: 26px;

  --plane-edge: rgba(255, 252, 248, 0.13);
  --plane-edge-strong: rgba(255, 252, 248, 0.26);
}

/* The page-local mark definitions. A defs-only sprite paints nothing itself,
   but it must still be in the layout for a `use` instance to resolve, so it is
   collapsed rather than display:none. */
.marks-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Every mark is stroked geometry that takes its colour from the element it is
   placed in, so one definition serves the graphite side and the paper side. */
.career-page [data-contact],
.career-page .bay__reserve-mark,
.career-page .facts__mark svg,
.career-page .terminus__ring svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   The operating plane. Warm graphite with two materials on it: the processed
   ink tile, and the quiet wall of inactive contacts the live ones stand out
   from. Both are layers under the colour, so a 404 on either costs the
   material and never the surface - the lesson the contact page's heading paid
   for.
   -------------------------------------------------------------------------- */

.plane {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--paper-bright);
  padding-block: calc(var(--header-height) + 28px) 112px;
  padding-inline: var(--gutter);
  overflow: hidden;
}

/* The masthead. One band, closed by the rule the circuit starts from.

   The name used to stand alone on the centre line, letterspaced into a slab,
   with a screen of empty graphite under it. It is on the left now, at the
   gutter the whole page is measured from, and the room beside it carries the
   two facts an applicant opens this page for: which office these positions are
   for, and where an application goes. The band earns its screen because it
   answers something; the word on its own did not.

   The two are aligned on their last baseline, so the name and the address sit
   on one line across the band rather than floating in one box each. There is
   no rule under the band: the bus is the rule, and it arrives directly under
   the masthead because that is where the circuit starts. */
.plane__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: end;
  gap: 24px 56px;
  margin-bottom: 54px;
}

.plane__title {
  margin: 0;
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: clamp(46px, 6.4vw, 94px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.03em;
  /* Turkish capitals carry a dot and the descenders need room. The box is
     opened rather than the type moved. */
  padding-block: 0.03em 0.1em;
  color: var(--paper-bright);
}

.plane__lede p {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted-invert);
}

/* The page's action, said once at the top. It is the same address the terminus
   closes on, and it is here because an applicant who already knows which
   position they want should not have to read the page to find it. It is a
   quiet line rather than a second plate: the terminus is still where the
   circuit ends. */
.plane__mail {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 124, 66, 0.4);
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(19px, 1.7vw, 25px);
  letter-spacing: -0.02em;
  color: var(--signal-orange-invert);
  text-decoration: none;
  transition: border-color 0.28s ease;
}

.plane__mail:hover,
.plane__mail:focus-visible {
  border-bottom-color: var(--signal-orange-invert);
}

.career-page .plane__mail svg {
  width: 22px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}

.plane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Laid at a fixed size rather than `cover`. This element is far longer than
     it is wide, and `cover` sizes against the element: a 1024px tile blown up
     to the height of a page comes back as smeared blobs. */
  background-image: url("../img/career/career-plane-graphite-v1.jpg");
  background-image: image-set(
    url("../img/career/career-plane-graphite-v1.webp") type("image/webp"),
    url("../img/career/career-plane-graphite-v1.jpg") type("image/jpeg")
  );
  background-size: 512px 512px;
  background-repeat: repeat;
  opacity: 0.62;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   The circuit. One bus across the plane, three bays hung under it. The bus
   runs edge to edge rather than inside the measure, because a service bus that
   starts and stops inside the text column is a rule, not a bus.
   -------------------------------------------------------------------------- */

/* The circuit is the first thing on the plane now that the console is gone, so
   the top of the page is measured by the plane's own padding alone. A margin
   here as well would open a gap nothing sits in. */
.circuit {
  position: relative;
  padding-top: var(--stub);
}

/* The wall of inactive contacts. It belongs to the circuit rather than to the
   whole plane, and it fades in under the bus, so it is the field the three
   live contacts stand out from and never a texture behind running text. Where
   a bay ends, the wall is what the page continues into: the network is larger
   than the three ways into it. */
.circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  z-index: -1;
  background-image: url("../img/career/career-contact-field.svg");
  background-size: 48px 48px;
  background-repeat: repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--stub),
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--stub),
    #000 100%
  );
  pointer-events: none;
}

.circuit__bus {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  height: 1px;
}

.circuit__track,
.circuit__live {
  position: absolute;
  inset: 0;
  display: block;
}

/* The track is always drawn. A failed tween costs the colour and never the
   structure. */
.circuit__track {
  background: var(--plane-edge-strong);
}

.circuit__live {
  background: var(--signal-orange-invert);
  transform-origin: 0 50%;
}

/* Where the bus enters the plane. */
.circuit__cap {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--signal-orange-invert);
}

/* Three equal columns put a bay with ten requirement lines beside two bays
   with one sentence, and the result was a tall column of text next to two
   thirds of a screen of empty graphite. The tracks are proportioned to the
   content instead: the position that carries a brief gets the room to set it
   short, and the two open positions get the rest. */
.bays {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A bay is only as deep as its own content. The sealed iteration set every bay
   to the depth of the deepest one, which is two thirds empty graphite by
   construction and is the objection its own README records against itself. */
.bay {
  position: relative;
}

.bay__stub {
  position: absolute;
  top: calc(-1 * var(--stub));
  left: 50%;
  width: 1px;
  height: var(--stub);
  background: var(--plane-edge-strong);
  transform-origin: 50% 0;
}

.bay--closed .bay__stub {
  background: var(--signal-orange-invert);
}

.bay__contact {
  position: absolute;
  top: calc(-1 * var(--stub));
  left: 50%;
  width: var(--contact);
  height: var(--contact);
  margin: calc(-1 * var(--contact) / 2) 0 0 calc(-1 * var(--contact) / 2);
  overflow: visible;
}

.bay--closed .bay__contact {
  color: var(--signal-orange-invert);
}

.bay--open .bay__contact {
  color: var(--paper-bright);
}

/* Addressing a bay energises it. The stub carries the accent up to the bus and
   the contact takes it, so pointing at a position is the circuit reaching it -
   which is the one interaction this diagram can honestly offer. It answers to
   the keyboard through `:focus-within`, and the sheet owns both states, so
   nothing has to run for the page to respond. */
.bay__stub,
.bay__contact,
.bay__frame {
  transition: background-color 0.28s ease, color 0.28s ease,
    border-color 0.28s ease;
}

.bay:hover .bay__stub,
.bay:focus-within .bay__stub {
  background: var(--signal-orange-invert);
}

.bay:hover .bay__contact,
.bay:focus-within .bay__contact {
  color: var(--signal-orange-invert);
}

.bay--open:hover .bay__frame,
.bay--open:focus-within .bay__frame {
  --corner-ink: var(--signal-orange-invert);
  border-color: rgba(255, 124, 66, 0.4);
}

/* The frame. Corner registration marks are drawn as eight background bars
   rather than as eight elements: the bay is a diagram, and its corners are
   part of the drawing rather than content. */
.bay__frame {
  --corner: 18px;
  --corner-ink: var(--plane-edge-strong);
  position: relative;
  padding: 26px 24px 30px;
  border: 1px solid var(--plane-edge);
  /* Its own ground, so the contact wall behind the circuit stops at the edge
     of a bay rather than running under the text inside it. */
  background-color: rgba(26, 21, 16, 0.66);
  background-image: linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink));
  background-size: var(--corner) 2px, 2px var(--corner), var(--corner) 2px,
    2px var(--corner), var(--corner) 2px, 2px var(--corner), var(--corner) 2px,
    2px var(--corner);
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}

.bay--closed .bay__frame {
  --corner-ink: var(--signal-orange-invert);
}

/* An open bay is dashed all the way round. The state is a line style before it
   is a colour, so it survives with the accent taken away. */
.bay--open .bay__frame {
  border-style: dashed;
}

.bay__head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--plane-edge);
}

.bay__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  /* Turkish capitals carry a dot and the descenders need room. The box is
     opened rather than the type moved. */
  padding-block: 0.04em 0.1em;
}

.bay__meta {
  margin: 12px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.bay__meta span {
  margin-right: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-invert);
}

.bay--open .bay__meta {
  color: var(--signal-orange-invert);
}

.bay__body {
  margin-top: 20px;
}

.bay__body p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted-invert);
}

.bay__body p:last-child {
  margin-bottom: 0;
}

/* The reserved interval. Drawn, not left: a capacity field and the same
   outline contact the bus carries. It is decorative and out of the
   accessibility tree - the sentence under it already says what it is. */
.bay__reserve {
  position: relative;
  display: grid;
  place-items: center;
  /* Deep enough that an open bay ends near the depth of the bay with a brief
     in it. The interval is the content of these two positions, so it is what
     grows when there is room, and it never stretches to match a neighbour -
     drawn capacity is a state, undrawn empty graphite is a hole. */
  height: clamp(180px, 24vw, 336px);
  margin-top: 22px;
  border: 1px dashed var(--plane-edge);
  background-image: radial-gradient(
    rgba(255, 124, 66, 0.3) 1.1px,
    transparent 1.2px
  );
  background-size: 9px 9px;
  background-position: center;
}

.bay__reserve-mark {
  width: 34px;
  height: 34px;
  color: var(--signal-orange-invert);
  overflow: visible;
}

/* The ladder. Ten requirement rows, each with a rung mark on the measure and a
   terminal at the end of its run, so the list reads as a wired register rather
   than as bullets. */
.ladder {
  margin-top: 26px;
}

.ladder__title {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-invert);
}

/* Ten rows in one column made this bay twice the depth of its neighbours. They
   are set in two columns of five, filled down the first and then down the
   second, so the register reads in its own order and the bay ends near the
   depth of the two beside it. Grid rows are shared across both columns, so the
   rungs line up across the pair. */
.ladder__rows {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 26px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--plane-edge);
  list-style: none;
}

.ladder__rows li {
  position: relative;
  padding: 9px 20px 9px 22px;
  border-top: 1px solid var(--plane-edge);
  font-size: 13px;
  line-height: 1.5;
}

.ladder__rows li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--signal-orange-invert);
}

.ladder__rows li::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 0;
  width: 5px;
  height: 5px;
  border: 1px solid var(--muted-invert);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   The application control.

   An underlined word with an arrow after it was the wrong control for this
   page. Every other mark here says something about the circuit, and the one
   thing a reader is asked to do was the only element saying nothing at all.

   So it is built out of the page's own parts: an open contact, a dead lane,
   and an arrow. Addressing it runs the lane, closes the contact, and sends the
   arrow - the page's whole argument at the size of a control. The states are
   in the sheet, so the control answers the pointer and the keyboard with no
   script running at all.
   -------------------------------------------------------------------------- */

.apply {
  --corner: 11px;
  --corner-ink: var(--plane-edge-strong);
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 13px 16px;
  border: 1px solid var(--plane-edge);
  background-image: linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink)),
    linear-gradient(var(--corner-ink), var(--corner-ink));
  background-size: var(--corner) 2px, 2px var(--corner), var(--corner) 2px,
    2px var(--corner);
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal-orange-invert);
  text-decoration: none;
  transition: border-color 0.28s ease, background-color 0.28s ease;
}

.apply:hover,
.apply:focus-visible {
  --corner-ink: var(--signal-orange-invert);
  border-color: rgba(255, 124, 66, 0.5);
  background-color: rgba(255, 124, 66, 0.08);
}

/* The two contact states are stacked in one cell and cross-faded, so the mark
   changes shape rather than moving and nothing under it reflows. */
.apply__contact,
.terminus__ring {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.apply__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: opacity 0.26s ease;
}

.apply__mark--closed {
  opacity: 0;
}

.apply:hover .apply__mark--open,
.apply:focus-visible .apply__mark--open,
.terminus__plate:hover .apply__mark--open,
.terminus__plate:focus-visible .apply__mark--open {
  opacity: 0;
}

.apply:hover .apply__mark--closed,
.apply:focus-visible .apply__mark--closed,
.terminus__plate:hover .apply__mark--closed,
.terminus__plate:focus-visible .apply__mark--closed {
  opacity: 1;
}

/* The lane. Dead at rest, and run from the contact towards the arrow when the
   control is addressed. */
.apply__lane {
  position: relative;
  display: block;
  height: 1px;
  background: var(--plane-edge-strong);
}

.apply__lane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.42s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.apply:hover .apply__lane::after,
.apply:focus-visible .apply__lane::after {
  transform: scaleX(1);
}

.career-page .apply__arrow,
.career-page .terminus__arrow {
  width: 22px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}

/* The header carries a ground over the paper band.

   It is fixed and transparent by default, which works over the graphite plane
   where the top of the page is quiet. Over the briefing the three columns of
   prose slid up behind the navigation and read through it. The site already
   has the mechanism - a section asks for a ground with `data-nav-surface` and
   `main.js` puts it on the header - and it ships one ground, graphite. This is
   the paper one, declared here because it belongs to this page and
   `style.css` belongs to the closing chrome pass. `resellers.css` carries the
   same rule for the same reason; neither page can reach the other's sheet.

   Nothing else about the header changes: the bar is painted behind its own
   content, so the ink and the theme rules are untouched. */
.site-header[data-surface="paper"]::before {
  background: var(--paper-bright);
  opacity: 1;
}

.site-header[data-surface="paper"] {
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   The briefing. The one paper surface on the page. The circuit runs through it
   rather than stopping at it, which is why this band is an interruption and
   not a second page.
   -------------------------------------------------------------------------- */

.briefing {
  position: relative;
  isolation: isolate;
  background: var(--paper-bright);
  color: var(--ink);
  padding-block: 96px 104px;
  padding-inline: var(--gutter);
}

.briefing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.briefing.is-texture-ready::before {
  background-image: url("../img/career/career-briefing-paper-v1.jpg");
  background-image: image-set(
    url("../img/career/career-briefing-paper-v1.webp") type("image/webp"),
    url("../img/career/career-briefing-paper-v1.jpg") type("image/jpeg")
  );
  background-size: 512px 512px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* The circuit crossing the paper. It is drawn from the top edge down as the
   reader passes, and it is the only accent on this surface. */
.briefing__through {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) / 2);
  width: 1px;
  background: var(--signal-orange);
  transform-origin: 50% 0;
}

/* A full-width heading over three equal columns of prose is the arrangement
   every page reaches for first, and this band read as exactly that. The
   heading holds a track of its own and the prose runs beside it in one
   readable measure; the facts close the band as one ruled row under both. */
.briefing__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 56px 80px;
}

.briefing__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  padding-block: 0.04em 0.12em;
}

.briefing__columns {
  display: grid;
  gap: 24px;
}

.briefing__columns p {
  margin: 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.68;
  color: #4a423b;
}

/* The first paragraph is the one that says what the company is, so it is set
   as the lede and the two under it report. */
.briefing__columns p:first-child {
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink);
}

.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  margin: 0;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 14px;
}

.facts__mark {
  grid-row: 1 / span 2;
  color: var(--orange-ink);
}

.facts__mark svg {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.facts dt {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   The terminus. Where the circuit closes, and the one place the accent is a
   field rather than a mark.
   -------------------------------------------------------------------------- */

/* The page closes on graphite, not on the accent, and the reason is the shared
   chrome directly under it: the footer opens on a full-bleed orange call to
   action. An orange terminus above it merged into one two-screen orange field
   and the page's own action stopped being its own. The plate keeps the accent;
   the surface hands the reader back to the operating plane. */
.terminus {
  position: relative;
  isolation: isolate;
  background: var(--graphite-deep);
  color: var(--paper-bright);
  padding-block: 84px 88px;
  padding-inline: var(--gutter);
}

.terminus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/career/career-plane-graphite-v1.jpg");
  background-image: image-set(
    url("../img/career/career-plane-graphite-v1.webp") type("image/webp"),
    url("../img/career/career-plane-graphite-v1.jpg") type("image/jpeg")
  );
  background-size: 512px 512px;
  background-repeat: repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* The circuit arriving. It continues the line that crosses the briefing. */
.terminus__feed {
  position: absolute;
  top: 0;
  left: calc(var(--gutter) / 2);
  width: 1px;
  height: 84px;
  background: var(--signal-orange-invert);
  transform-origin: 50% 0;
}

.terminus__inner {
  position: relative;
  display: grid;
  gap: 64px;
}

.terminus__notes {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 48px;
}

.terminus__notes h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  padding-block: 0.04em 0.1em;
}

.terminus__notes p {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.62;
}

.terminus__label {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* The one field of accent on the page, and the printed material that keeps it
   from being a flat rectangle. The texture is a layer over the colour rather
   than the colour itself, so a missing file costs the grain and not the
   surface. */
/* One bar the width of the page rather than a block in a column. The address
   is the largest thing on it and it has to sit on one line at that size, which
   a narrow plate could not give it: at 1440 it broke inside the domain. */
.terminus__plate {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 34px 36px;
  background: var(--signal-orange);
  color: var(--paper-bright);
  text-decoration: none;
  transition: background-color 0.28s ease;
}

.terminus__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.terminus.is-texture-ready .terminus__plate::before {
  background-image: url("../img/career/career-signal-stipple-v1.jpg");
  background-image: image-set(
    url("../img/career/career-signal-stipple-v1.webp") type("image/webp"),
    url("../img/career/career-signal-stipple-v1.jpg") type("image/jpeg")
  );
  background-size: 300px 300px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.4;
}

.terminus__ring {
  width: 30px;
  height: 30px;
  color: var(--paper-bright);
}

.terminus__plate-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.8;
  /* A caption beside the address rather than a second line of it, and wide
     enough that it breaks once instead of three times. */
  max-width: 12ch;
}

/* The address as a route.

   The class is `mail-route`, not `route`: `style.css` already owns `.route`
   for the homepage's route diagram, and a page sheet that takes a name the
   shared sheet uses inherits its layout. This one came back as a full-width
   block that pushed the plate's arrow into the middle of the address.

   It was a string in a link, twice on one page, on a page where every other
   mark carries a meaning. It is drawn now: the local part, the junction, the
   host, and a lane on each side, so the address states the same thing the
   whole page states. It is still one selectable string and one accessible
   name, because the junction is the real character inside its node and nothing
   here is an image of text. */
.mail-route {
  display: grid;
  grid-template-columns: minmax(16px, 0.6fr) auto auto auto minmax(24px, 1fr);
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(23px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mail-route__lane {
  height: 1px;
  background: rgba(255, 252, 248, 0.5);
}

/* The lane out of the junction is dead until the control is addressed, and
   then it runs - the same sentence the three bay controls make. */
.mail-route__lane--live {
  position: relative;
  overflow: hidden;
}

.mail-route__lane--live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-bright);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.42s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.terminus__plate:hover .mail-route__lane--live::after,
.terminus__plate:focus-visible .mail-route__lane--live::after {
  transform: scaleX(1);
}

/* The junction. A ring the address passes through, sized off the type so it
   holds its proportion at every step of the clamp. */
.mail-route__at {
  display: grid;
  place-items: center;
  /* The node is sized off the type, so it holds its proportion at every step
     of the clamp. It is wider than the glyph inside it by a clear margin:
     drawn tight, the ring read as part of the `@` rather than as the junction
     the address passes through. */
  width: 1.5em;
  height: 1.5em;
  border: 1px solid rgba(255, 252, 248, 0.55);
  border-radius: 50%;
  font-size: 0.5em;
  letter-spacing: 0;
  transition: background-color 0.28s ease, border-color 0.28s ease;
}

.terminus__plate:hover .mail-route__at,
.terminus__plate:focus-visible .mail-route__at {
  border-color: var(--paper-bright);
  background: rgba(255, 252, 248, 0.16);
}

.career-page .terminus__arrow {
  width: 36px;
  height: 24px;
}

.terminus__plate:hover,
.terminus__plate:focus-visible {
  background: var(--orange-deep);
}

/* --------------------------------------------------------------------------
   The entrance, armed in the document head before the first paint and taken
   off by career.js in the same breath as it writes the tweens' opening states.
   Exactly one of the two holds the plane back at any moment.
   -------------------------------------------------------------------------- */

.intro-armed .bay__frame {
  opacity: 0;
}

.intro-armed .circuit__live,
.intro-armed .bay__stub,
.intro-armed .bay__contact {
  transform: scale(0);
}

/* --------------------------------------------------------------------------
   Tablet. Three bays across stop being three bays and become three columns of
   crushed text, so the circuit turns ninety degrees: the bus becomes a spine
   down the left and every bay is a station on it. The mechanic is unchanged,
   only its axis - which is what the sealed iteration does at the same width.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .career-page {
    --stub: 34px;
    --contact: 22px;
  }

  .circuit {
    padding-top: 0;
    padding-bottom: 52px;
    padding-left: calc(var(--stub) + 12px);
  }

  /* On this axis the bus ends inside the page instead of running off the
     right edge, so it is given a terminator rather than being left to stop. */
  .circuit__bus::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 11px;
    height: 1px;
    margin-left: -5px;
    background: var(--plane-edge-strong);
  }

  .circuit__bus {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
  }

  .circuit__live {
    transform-origin: 50% 0;
  }

  .circuit__cap {
    top: 0;
    left: 50%;
    margin: -3px 0 0 -3px;
  }

  .bays {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px 0;
  }

  .bay__stub {
    top: 46px;
    left: calc(-1 * (var(--stub) + 12px));
    width: calc(var(--stub) + 12px);
    height: 1px;
    transform-origin: 0 50%;
  }

  .bay__contact {
    top: 46px;
    left: calc(-1 * (var(--stub) + 12px));
    margin: calc(-1 * var(--contact) / 2) 0 0 calc(-1 * var(--contact) / 2);
  }

  /* The masthead stacks. The name keeps its own line and the lede follows it,
     which is the same reading order the band has on a wide screen. */
  .plane__masthead {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 26px;
    margin-bottom: 40px;
  }

  .briefing__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .briefing__columns,
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .briefing__title {
    max-width: 20ch;
  }

  .facts {
    padding-top: 32px;
  }

  .terminus__inner {
    gap: 44px;
  }

  .terminus__notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 700px) {
  .career-page {
    --gutter: 20px;
    --stub: 24px;
  }

  /* One column of requirement lines again. Two columns of five at this width
     would be two words per line. */
  .ladder__rows {
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .bay__frame {
    padding: 22px 18px 26px;
  }

  .terminus__plate {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 18px;
    padding: 24px 20px;
  }

  .terminus__ring,
  .mail-route__lane {
    display: none;
  }

  .terminus__plate-label,
  .mail-route {
    grid-column: 1;
    max-width: none;
  }

  .mail-route {
    grid-template-columns: auto auto auto;
    justify-content: start;
    gap: 8px;
    font-size: clamp(20px, 6.2vw, 30px);
  }

  .career-page .terminus__arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 26px;
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion. The page is complete at rest: the head script never arms the
   entrance, and nothing here waits for a tween. The rules below are the floor
   under that, for the case where the class is already on the element when the
   preference changes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .intro-armed .bay__frame,
  .intro-armed .circuit__live,
  .intro-armed .bay__stub,
  .intro-armed .bay__contact {
    opacity: 1;
    transform: none;
  }
}