/*
  The employer's mark on the candidate's first screen.

  ── Why its own file ─────────────────────────────────────────────────────

  Exactly two pages draw this: the candidate's welcome card, from style.css, and the preview
  inside the hiring console, from hire.css. Those two stylesheets share nothing else and
  should not start now.

  The alternative was a copy in each, and the copy would drift — which matters more here
  than in most places, because the whole value of the console preview is that it shows what
  the candidate will actually see. A preview rendered from a second, slightly stale set of
  rules is worse than no preview: it is a promise about somebody else's screen that nobody
  checked.

  So: one file, linked from index.html and hire.html, and the console's claim to be showing
  the real thing is true rather than nearly true.
*/

/*
  Whose process this is, above the simulated company's name.

  On the candidate card this sits at the very top of the left panel, separated from
  everything below it by a rule, because it is the only thing there that is about the real
  world. The kicker underneath names the fictional company the candidate is about to walk
  into, and the two must not read as one line — the card stops making sense if somebody
  concludes they were invited by Halcyon.

  Quiet on purpose. This is an attribution, not a banner, and it is competing for attention
  with the sentence that tells somebody what they are about to do.
*/
.hiring {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

/*
  Bounded in both directions, because the file is supplied by a customer.

  A tall narrow mark and a wide short one both have to sit on this line without moving
  anything, so the height is fixed and the width is capped. `object-fit: contain` keeps
  whatever aspect ratio they uploaded rather than stretching it, which is the one thing a
  company notices immediately and forgives slowly.
*/
.hiring-logo {
  height: 26px; max-width: 132px; width: auto;
  object-fit: contain; object-position: left center;
  display: block;
}

.hiring-who { font: 400 13.5px/1.4 var(--sans); color: var(--ink-2); }
.hiring-who b { font-weight: 600; color: var(--ink); }

/*
  Always its own line, left-aligned under the mark it qualifies.

  The first version pushed it right with `margin-left: auto`, which reads well on a wide
  strip — and this strip is never wide, because it lives in a panel about a third of the
  window. So it wrapped, and a right-aligned fragment alone on a second line looks like a
  layout accident rather than a credit.

  Forcing the break makes it identical at every width, and puts it directly beneath the
  employer's logo instead of beside it. That is the correct relationship: a footer to their
  mark, not a second mark competing with it.
*/
.hiring-by {
  flex-basis: 100%; margin: 2px 0 0;
  font: 500 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}

/*
  ── Console only, from here down ─────────────────────────────────────────

  The frame the preview sits in. Never rendered on the candidate's screen, and kept in this
  file rather than in hire.css so that everything about this component is in one place.
*/
.brand-preview {
  margin: 16px 0 4px;
  padding: 14px 16px 4px;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.brand-preview-label {
  display: block; margin-bottom: 10px;
  font: 500 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Inside the frame the rule below the strip would double up with the frame's own edge. */
.brand-preview .hiring { margin-bottom: 0; padding-bottom: 10px; border-bottom: 0; }