/* ==========================================================================
   Ad Holic — public careers page, at adholic.co/careers.

   Wears the site's brand (tokens.css supplies every colour, font and space
   below) but not the site's machinery: no motion layer, no curtain, no
   drawer, no JavaScript at all. Most applicants arrive from a link posted on
   Facebook or WhatsApp, on a mid-range Android, inside an in-app browser —
   the page has to paint fast and work with scripting off.

   That is why this file does not pull main.css. It re-declares the handful
   of chrome pieces it needs instead of inheriting a stylesheet built for a
   page with a hero video and a pinned showcase.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; height: auto; }

::selection { background: var(--magenta); color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--magenta-soft);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ---------- Chrome ---------- */

.top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid var(--plum-high);
  background: rgba(19, 7, 20, .92);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
}
.wordmark img { height: 30px; width: auto; display: block; }
.wordmark span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
}
/* Every link on this page is sized for a thumb, not a cursor. The audience
   is on a phone by definition — the page exists because somebody tapped a
   link in Facebook or WhatsApp. */
.top-link {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--lilac);
  text-decoration: none;
  white-space: nowrap;
}
.top-link:hover { color: var(--ice); }

.foot {
  display: flex;
  flex-wrap: wrap;
  /* Without this the row was ragged: the links carry a 44px thumb target
     and the plain text spans do not, so the spans stretched to match and
     their text sat at the top of the stretched box. Centre every item on
     one line and the difference disappears. */
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--gutter) var(--s-7);
  margin-top: var(--s-9);
  border-top: 1px solid var(--plum-high);
  font-size: var(--fs-xs);
  color: var(--lilac-dim);
}
/* Only the standalone links get the thumb target. The one inside the
   copyright is part of a sentence and has to stay inline, or it would
   break the line it sits in. */
.foot > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  color: var(--lilac);
  text-decoration: none;
}
.foot a:hover { color: var(--magenta-soft); }
.foot span a {
  color: var(--lilac);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dot { opacity: .5; }

/* Narrow phones: the "careers" tag next to the wordmark is the first thing
   to go — the page it sits on is already the answer. */
@media (max-width: 540px) {
  .top { gap: var(--s-3); }
  .wordmark span { display: none; }
  .top-link { font-size: var(--fs-xs); }
}

/* Below this the footer cannot hold one line, and a wrapped row leaves the
   separator dangling at the end of the first. Stack it instead. */
@media (max-width: 460px) {
  .foot { flex-direction: column; gap: 0; text-align: center; }
  .foot .dot { display: none; }
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  padding: var(--s-8) var(--gutter) 0;
}
.narrow { max-width: 620px; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--magenta-soft);
}
.lede {
  margin-top: var(--s-4);
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--lilac);
}
.muted { color: var(--lilac); font-size: var(--fs-sm); }
.count {
  margin: var(--s-7) 0 var(--s-4);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--lilac-dim);
}

/* ---------- Openings list ---------- */

.hero { padding-block: var(--s-6) var(--s-2); }
.hero h1 { max-width: 16ch; }

.jobs { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); }

.job {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-2);
  background: var(--plum);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.job:hover {
  border-color: var(--magenta);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.job-main { min-width: 0; }
.job h3 { margin-top: 6px; }
.job-sum {
  margin-top: var(--s-2);
  max-width: 60ch;
  font-size: var(--fs-sm);
  color: var(--lilac);
}
.job-go {
  margin-inline-start: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--plum-high);
  color: var(--lilac);
}
.job:hover .job-go { background: var(--ribbon-120); border-color: transparent; color: var(--ice); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  padding: 5px 11px;
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--lilac);
  white-space: nowrap;
}
/* The pay chip is the one thing an applicant scans for. */
.chip.pay {
  border-color: transparent;
  background: rgba(233, 29, 127, .14);
  color: var(--magenta-soft);
  font-weight: 700;
}

.empty {
  padding: var(--s-9) var(--s-6);
  border: 1px dashed var(--plum-high);
  border-radius: var(--r-3);
  text-align: center;
}
.empty h2 { margin-bottom: var(--s-3); }
.empty a { color: var(--magenta-soft); }

/* ---------- One role ---------- */

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--lilac);
  text-decoration: none;
}
.back:hover { color: var(--ice); }

.role h1 { margin-top: var(--s-2); }
.role section { margin-top: var(--s-8); }
.role section p { color: var(--lilac); }

.bullets { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.bullets li {
  display: flex;
  gap: var(--s-3);
  color: var(--lilac);
}
.bullets li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--ribbon-120);
}

/* ---------- The form ---------- */

.apply {
  margin-top: var(--s-9);
  padding: var(--s-7);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-3);
  background: var(--plum);
}
.apply h2 { margin-bottom: var(--s-2); }

.grid { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s-4); min-width: 0; }
.grid .field { margin-top: 0; }
.field > span {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--lilac);
}
.field > span em { font-style: normal; font-weight: 400; color: var(--lilac-dim); }
.field small { font-size: var(--fs-micro); color: var(--lilac-dim); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--plum-high);
  border-radius: var(--r-1);
  background: rgba(19, 7, 20, .6);
  color: var(--ice);
  font: inherit;
  font-size: var(--fs-sm);
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--magenta);
}
.field input::placeholder, .field textarea::placeholder { color: var(--lilac-dim); }
/* The file row is a control, not a label — give it room to be tapped. */
.field input[type="file"] { padding: 10px 12px; font-size: var(--fs-xs); }
.field input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--plum-high);
  color: var(--ice);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

/* Bots fill this; people never see it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.errors {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid rgba(233, 29, 127, .45);
  border-radius: var(--r-1);
  background: rgba(233, 29, 127, .08);
  color: var(--ice);
  font-size: var(--fs-sm);
}
.errors ul { margin: var(--s-2) 0 0; padding-inline-start: 1.1em; color: var(--magenta-soft); }
.errors p { margin-top: var(--s-2); color: var(--lilac); }

.fineprint {
  margin-top: var(--s-4);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--lilac-dim);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-6);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  background: var(--plum-high);
  color: var(--ice);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--magenta); }
.btn.primary {
  border-color: transparent;
  background: var(--ribbon-120);
}
.btn.primary:hover { box-shadow: var(--glow-magenta); }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; margin-top: var(--s-6); min-height: 54px; font-size: var(--fs-base); }

/* ---------- Application received ---------- */

.done { padding-block: var(--s-9); text-align: center; }
.done-mark {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--s-6);
  border-radius: 50%;
  background: var(--ribbon-120);
  color: var(--ice);
  font-size: 28px;
}
.done .lede { margin-inline: auto; }
.done .muted { margin-top: var(--s-4); }
.done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

@media (prefers-reduced-motion: reduce) {
  .job:hover { transform: none; }
}

/* ---------- Cursor companion ----------
   The same one the rest of the site uses, and the same rules verbatim, so
   the two never drift apart. It only exists on a fine pointer: the markup
   is inert until fx.js unhides it, and that script is only fetched at all
   on a device with a mouse. */
.cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  /* Difference blending keeps it legible over the void and over the one
     light surface without any state tracking. */
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; background: var(--ice); }
.cursor__ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(246, 241, 248, .7);
  opacity: .6;
  transition: width 200ms var(--ease-out), height 200ms var(--ease-out),
              opacity 200ms var(--ease-out), margin 200ms var(--ease-out);
}
.cursor__ring[data-over="true"] {
  width: 52px; height: 52px;
  opacity: 1;
}