/* Revel IT job board.
 *
 * THESE ARE THE DESIGNER'S OWN TOKENS, not an approximation of them.
 * Pulled from the Base44 build's stylesheet on 25 October 2026 - the
 * semantic set she actually styles against (page, surface, tint, ink,
 * muted-ink, line), both light and dark values, plus her radius and her
 * two typefaces.
 *
 * This replaced a palette reverse-engineered from the OLD revelit.com,
 * which was about to look wrong beside the new site. It also settles the
 * licensing question that was open: her faces are Outfit and Figtree, both
 * Google Fonts, both free to self-host on a second domain. No Galano
 * Grotesque, nothing to license.
 *
 * RGB TRIPLETS, NOT HEX, because that is the shape she uses and it lets a
 * colour take an alpha without a second token: rgb(var(--ink) / .6).
 *
 * TO RE-PULL when she ships a change: the stylesheet is linked from the
 * published page as /assets/index-<hash>.css, and only the hash moves.
 * Take :root and .dark from it and replace the two blocks below.
 *
 * Still hers and still missing: the header and footer markup, the script
 * behind the nav dropdown and the mobile menu, the logo SVG, and the
 * anchor on her jobs section. Those cannot be read out of a stylesheet.
 */
:root{
  /* light - her :root */
  --page:246 247 249;
  --surface:255 255 255;
  --tint:238 240 244;
  --ink:30 36 43;
  --muted-ink:74 82 96;
  --line:226 230 236;
  /* STAYS DARK IN BOTH THEMES, which is how she treats the footer
     and the scam bar. The hero used --ink as a BACKGROUND, so in
     dark mode it inverted to near-white with near-black text while
     the rest of the page went dark. */
  --charcoal:14 19 25;

  /* brand, unchanged from Revel's own and confirmed in her build:
     the orange appears 23 times in it, the indigo 16 */
  --orange:235 90 51;
  --orange-2:246 118 80;
  --indigo:78 86 164;
  --indigo-2:138 145 217;
  --good:45 106 79;

  --radius:.875rem;
  --font-head:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",
              Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",
              Roboto,Helvetica,Arial,sans-serif;
  --w:1080px;
}

/* DARK IS DECLARED TWICE, AND ONE OF THEM DOES NOT WORK YET.
 *
 * prefers-color-scheme is the one that works. It reads the device setting,
 * which crosses domains because it is not stored anywhere - it is just what
 * the operating system says. Someone browsing in dark mode clicks a job and
 * the page is dark. Without it they get flashbanged, which is the most
 * noticeable seam there is.
 *
 * .dark is her site's class, set by her toggle - and her toggle's choice
 * lives in HER origin's storage. jobs.revelit.com cannot read it. So a
 * visitor whose device is light but who chose dark on revelit.com arrives
 * here in light, and that is a real seam I cannot close from this side.
 *
 * The fix, if it ever matters enough: she appends ?theme=dark to job links
 * when her toggle is on, and the template puts the class on <html>. A query
 * parameter is the only thing that crosses an origin boundary without
 * cookies. Left undone deliberately - it needs her, it is one more thing to
 * keep in sync, and the device setting covers nearly everyone.
 *
 * Her values either way, not an inversion of mine. */
.dark{
  --page:14 19 25;
  --surface:20 27 35;
  --tint:20 27 35;
  --ink:244 243 246;
  --muted-ink:160 172 192;
  --line:32 39 46;
  --charcoal:20 27 35;
}
/* NO prefers-color-scheme BLOCK, DELIBERATELY (Patrick, 26 Oct: "default
   for both is light").
   This used to follow the device setting, on the reasoning that someone
   browsing dark should not get flashbanged by a job page. That was written
   before her toggle existed and before the two sites were one journey.
   revelit.com is light-first and ignores the OS entirely, so honouring it
   here meant a candidate on a dark laptop crossed from a light marketing
   site into a dark board - the seam being louder than the flashbang it was
   meant to prevent. Light is now the default on both, and dark is a thing a
   person chooses, from her toggle, on either side. */
*{box-sizing:border-box}

/* HER SPLIT: Outfit sets, Figtree reads. Headings, the logo wordmark and
   buttons take the display face; running text and form fields take the body
   face, which is what she does and what keeps a job description readable at
   length. */
h1,h2,h3,h4,.big,.btn,.kicker{font-family:var(--font-head);
  letter-spacing:-.018em}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:rgb(var(--page));color:rgb(var(--ink));
  font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:rgb(var(--indigo))}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---------- chrome ---------- */
header.chrome{border-bottom:1px solid rgb(var(--line));background:rgb(var(--surface));
  position:sticky;top:0;z-index:20}
header.chrome .inner{max-width:var(--w);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:28px}
header.chrome img{height:34px;width:auto;display:block}
/* No navigation. Nothing in the header leaves this site, so a candidate
   mid-application cannot end up somewhere else with no way back. */
header.chrome .tag{font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgb(var(--muted-ink) / .78)}

footer.chrome{background:rgb(var(--ink));color:#cfcac6;margin-top:64px;
  padding:40px 0 34px;font-size:.88rem}
footer.chrome .inner{max-width:var(--w);margin:0 auto;padding:0 24px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:30px;
  flex-wrap:wrap}
footer.chrome img{height:40px;width:auto}
footer.chrome a{color:rgb(var(--surface));text-decoration:none}
footer.chrome a:hover{color:rgb(var(--orange-2))}
footer.chrome a{font-weight:600}

/* ---------- hero ---------- */
.hero{background:rgb(var(--charcoal));color:#F4F3F6;padding:62px 0 56px}
.hero .wrap{max-width:var(--w)}
.hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.12;margin:0 0 14px;
  letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:rgb(var(--orange-2))}
.hero p{margin:0;color:#d6d1cd;max-width:52ch;font-size:1.05rem}
.hero .count{margin-top:26px;display:inline-block;background:rgb(var(--orange));
  color:rgb(var(--surface));padding:9px 18px;border-radius:4px;font-weight:600;
  font-size:.92rem}

/* ---------- search and filters ---------- */
/* 38px of air under the header, EXCEPT WHERE A FULL-BLEED BAND STARTS
   THE PAGE. On revelit.com the tint band is flush against the header -
   gap of exactly 0. Here it sat 38px down, so the two sites showed a
   white stripe one had and the other did not, which is the sort of seam
   that reads as "something is wrong" without being nameable.
   The padding still earns its place on the job pages, where content
   starts against the header with no band to carry it. */
main{padding-top:38px}
main:has(> .rv-hero:first-child){padding-top:0}
h2{font-size:1.45rem;letter-spacing:-.015em;margin:0 0 6px}
.sub{color:rgb(var(--muted-ink));margin:0 0 24px}
.find{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:16px 18px;background:rgb(var(--tint));border-radius:6px;
  margin-bottom:28px}
.find label{display:flex;flex-direction:column;gap:5px;font-size:.74rem;
  color:rgb(var(--muted-ink) / .78);text-transform:uppercase;letter-spacing:.07em;
  font-weight:600}
.find label.search{flex:1 1 260px}
.find input,.find select{font:inherit;font-size:.95rem;padding:10px 12px;
  border:1px solid rgb(var(--line));border-radius:4px;background:rgb(var(--surface));
  color:rgb(var(--ink));width:100%;text-transform:none;letter-spacing:0;
  font-weight:400}
.find select{min-width:150px}
.find button{font:inherit;font-weight:600;padding:11px 24px;border:none;
  border-radius:4px;background:rgb(var(--orange));color:rgb(var(--surface));cursor:pointer}
.find button:hover{background:#d44a26}
.find .clear{font-size:.85rem;padding-bottom:11px;white-space:nowrap;
  text-transform:none;letter-spacing:0}

/* ---------- the list ---------- */
ul.jobs{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:14px}
ul.jobs li{border:1px solid rgb(var(--line));border-radius:6px;padding:20px 22px;
  transition:border-color .12s,box-shadow .12s}
ul.jobs li:hover{border-color:rgb(var(--orange));
  box-shadow:0 2px 10px rgba(45,41,38,.07)}
a.title{font-size:1.12rem;font-weight:600;text-decoration:none;color:rgb(var(--ink));
  display:inline-block;margin-bottom:8px}
a.title:hover{color:rgb(var(--orange))}
.meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:rgb(var(--muted-ink))}
.meta.big{font-size:.93rem;margin-bottom:24px}
.meta .where{font-weight:600;color:rgb(var(--ink))}
.meta .age{color:rgb(var(--good));font-weight:500}
.meta .ref{color:rgb(var(--muted-ink) / .78);font-variant-numeric:tabular-nums}
.summary{margin:10px 0 0;color:rgb(var(--muted-ink));font-size:.95rem}
a.go{display:inline-block;margin-top:10px;font-size:.88rem;font-weight:600;
  color:rgb(var(--orange));text-decoration:none}
a.go:hover{text-decoration:underline}
.empty{padding:34px 0;color:rgb(var(--muted-ink))}
.pager{display:flex;gap:20px;align-items:center;justify-content:center;
  padding:36px 0 0;font-size:.9rem;color:rgb(var(--muted-ink))}

/* ---------- a job page ---------- */
.job h1{font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.18;margin:0 0 10px;
  letter-spacing:-.02em;text-wrap:balance}
.crumb{margin:28px 0 20px;font-size:.88rem}
.crumb a{color:rgb(var(--orange));text-decoration:none;font-weight:600}
.bullets{background:rgb(var(--tint));border-radius:6px;padding:18px 18px 18px 38px;
  margin:0 0 28px}
.bullets li{margin-bottom:7px}
.bullets li:last-child{margin-bottom:0}
.description{margin-bottom:44px;overflow-wrap:break-word;max-width:72ch}
.description ul,.description ol{padding-left:22px}
.description li{margin-bottom:6px}
.description strong{color:rgb(var(--ink))}
.description table{display:block;overflow-x:auto;max-width:100%}
.description img{max-width:100%;height:auto}
.closed{background:#fdf0ec;border-left:4px solid rgb(var(--orange));
  border-radius:0 6px 6px 0;padding:16px 18px;margin:0 0 28px}
.cta-top{margin:0 0 30px}
.btn{display:inline-block;font-weight:600;padding:13px 28px;border-radius:4px;
  background:rgb(var(--orange));color:rgb(var(--surface));text-decoration:none}
.btn:hover{background:#d44a26;color:rgb(var(--surface))}
.oops{background:#fdecea;border-left:4px solid #b4442e;
  border-radius:0 6px 6px 0;padding:13px 16px;margin:0 0 24px}

/* ---------- apply ---------- */
.apply{border-top:3px solid rgb(var(--ink));padding-top:30px;max-width:560px}
.apply form{display:flex;flex-direction:column;gap:18px}
.apply label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;
  font-weight:600}
.apply input[type=text],.apply input[type=email],.apply input[type=tel],
.apply input:not([type]){font:inherit;padding:11px 13px;
  border:1px solid rgb(var(--line));border-radius:4px;background:rgb(var(--surface));
  color:rgb(var(--ink));font-weight:400}
.apply input[type=file]{font-size:.9rem;padding:9px 0;font-weight:400}
.apply fieldset{border:1px solid rgb(var(--line));border-radius:4px;
  padding:14px 16px;margin:0;display:flex;flex-direction:column;gap:9px}
.apply legend{font-size:.87rem;font-weight:600;padding:0 6px;
  color:rgb(var(--muted-ink))}
.apply label.radio{flex-direction:row;align-items:center;gap:8px;
  font-weight:400;font-size:.95rem}
.apply button{font:inherit;font-weight:600;padding:14px 30px;border:none;
  border-radius:4px;background:rgb(var(--orange));color:rgb(var(--surface));cursor:pointer;
  align-self:flex-start}
.apply button:hover{background:#d44a26}
.req{font-weight:400;font-size:.76rem;color:rgb(var(--muted-ink) / .78)}
.fine{font-size:.85rem;color:rgb(var(--muted-ink) / .78);margin:0;font-weight:400}
:focus-visible{outline:2px solid rgb(var(--orange));outline-offset:2px}

/* ---------- thanks / 404 ---------- */
.thanks{padding:56px 0}
.thanks .big{font-size:1.65rem;font-weight:600;margin-bottom:12px;
  letter-spacing:-.015em}

@media (max-width:620px){
  header.chrome .inner{flex-wrap:wrap;gap:14px}
  header.chrome nav{gap:16px;font-size:.9rem}
  .find{flex-direction:column;align-items:stretch}
  /* flex:1 1 260px is a WIDTH on a row and a HEIGHT on a column. Once
     this stacks, the search label grew to 260px tall and left a hand's
     width of dead grey between the box and Category on every phone. */
  .find label.search{flex:none}
  .find button{width:100%}
  .hero{padding:44px 0 40px}
  .apply form{max-width:none}
}

/* A role whose copy is not written yet. Honest rather than blank - 22 of the
   48 open reqs have never been advertised, so there is no candidate-facing
   text for them until somebody writes it. */
.description.nocopy{background:rgb(var(--tint));border-radius:6px;
  padding:20px 22px;max-width:62ch}
.description.nocopy p{margin:0 0 10px}
.description.nocopy p:last-child{margin:0;color:rgb(var(--muted-ink));font-size:.95rem}

/* The honeypot. Off-screen rather than display:none - some bots skip
   anything display:none, and a screen reader is told to ignore it by
   aria-hidden on the wrapper. */
.nothere{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------------
   THE HEADER MAY NOT CHANGE HEIGHT, because it is in the flow.
   Her header is position:sticky, so it occupies real layout space. Her
   script condenses it past 90px of scroll - the notice bar collapses and
   the bar goes 68px to 52px - which on this site removes 48px from under
   the content and jerks the whole page upward mid-scroll.
   On her own site that is absorbed by a full-bleed hero. Here the job
   list starts immediately, so it reads as a jump.
   The condense is decoration; a list you are reading not moving is not.
   So the condensed state is pinned to the expanded one. These three
   values are HERS - if she changes 68px or the notice padding, change
   them here to match or the pin stops lining up.
   ------------------------------------------------------------------ */
.rv-header.rv-condensed .rv-notice{max-height:3rem;opacity:1;
  padding-top:.375rem;padding-bottom:.375rem}
.rv-header.rv-condensed .rv-bar-inner{height:68px}
.rv-header.rv-condensed .rv-logo{transform:none}

/* ------------------------------------------------------------------
   HER HERO, FITTED TO THIS PAGE.
   Her own sample shows the problem: .rv-hero-inner is 80rem with no cap
   on the title, so "Amplify Your Success." reaches the right-hand plane
   and turns dark-on-dark - unreadable in her demo before it ever got
   here. The sub-line lands on the orange plane for the same reason.
   Capping the text at 20ch keeps both clear of the planes at every
   width, and pinning the inner box to --w lines the headline up with
   the job list below it instead of overhanging by 200px.
   ------------------------------------------------------------------ */
.rv-hero-inner{max-width:var(--w);padding-left:24px;padding-right:24px}
.rv-hero-title{max-width:20ch}
.rv-hero-sub{max-width:46ch}
/* NOT ORANGE. The old hero was white on charcoal and the accent read
   well; on her light band the orange em lands ON the orange plane and
   the two cancel. Her own title is uniform ink - matching her is also
   the readable choice. */
.rv-hero-title em{font-style:normal;color:inherit}

/* The count pill was styled as .hero .count and lost its rule when the
   band became hers. It is the one thing on this page revelit.com cannot
   say, so it should not read as afterthought text. */
.rv-hero-inner .count{margin-top:26px;display:inline-block;
  background:rgb(var(--orange));color:#fff;font-weight:600;
  padding:10px 18px;border-radius:6px;font-size:.95rem}

/* ------------------------------------------------------------------
   MEASURED OFF HER LIVE PAGE, NOT OFF HER KIT (26 Oct).
   The hero.html she sent and the hero running on revelit.com are not
   the same thing. Hers is --tint with a 1px line under it and stands
   307px tall; the kit ships --page, no border, and 6rem of padding
   that made this band half again as tall as the real one. Read off
   /hire with the browser: rgb(238,240,244) on rgb(226,230,236).

   THE ACTIVE NAV LINK IS HERS TOO AND THE KIT HAS NO RULE FOR IT. On
   her site the current page turns fox orange - "Hire Talent" is orange
   on /hire. React sets that class; a static fragment cannot. On this
   site the board IS Find Work, and Find Work is the only link in her
   markup pointing at "/", so the attribute selector does the job
   without touching her file and without breaking when she sends a new
   header.
   ------------------------------------------------------------------ */
.rv-hero{background:rgb(var(--tint));border-bottom:1px solid rgb(var(--line))}
@media (min-width:1024px){
  .rv-hero-inner{padding-top:3.25rem;padding-bottom:3.25rem}
}
.rv-nav a[href="/"],
.rv-mobile a[href="/"]{color:rgb(var(--orange))}

/* ------------------------------------------------------------------
   THE TWO NUMBERS BEHIND "THE ZOOM SEEMS OFF", both read off her live
   page rather than her kit, which is wrong on one of them.

   BODY TEXT. revelit.com runs 17px; this ran the browser default of 16.
   Everything downstream of that - nav height, button height - came out a
   pixel short, which is exactly the kind of difference you feel without
   being able to name it.

   THE HEADLINE. Her kit says clamp(2.2rem, 5vw, 3.8rem), which lands on
   60.8px at desktop. Her site renders 50.4. So the kit's hero title is a
   size her own pages do not use, and the board was wearing it - the
   headline reading large while the body read small, in opposite
   directions, at the same time.
   ------------------------------------------------------------------ */
body{font-size:17px}
.rv-hero-title{font-size:clamp(2.2rem,5vw,3.15rem)}

/* ------------------------------------------------------------------
   THE ORANGE-TO-VIOLET RULE UNDER THE HEADER, which her kit does not
   ship and her site has on every page. Patrick kept calling it the
   purple bar and he was right - there is nothing purple about the 1px
   grey line her revel-chrome.css puts there.
   Read straight off the pixels of revelit.com/hire at y=100: a 2px band
   running rgb(235,90,51) at the left edge to rgb(78,86,164) at the
   right. Both are already tokens here - her fox orange and her violet -
   so this is her gradient, not a match of it.
   It replaces .rv-bar's border rather than sitting under it, so the
   header keeps its exact height and nothing below it moves.
   ------------------------------------------------------------------ */
/* transparent, NOT removed - her 1px border is part of the 101px the
   header measures, and dropping it made this header a pixel shorter
   than hers for no visible reason. */
.rv-bar{border-bottom-color:transparent;position:relative}
/* bottom:-1px so the rule sits OVER the transparent border rather than
   above it - at bottom:0 a 1px strip of page background showed between
   the bar and the band, which hers does not have. */
.rv-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(to right,rgb(var(--orange)),rgb(var(--indigo)))}