/* Arena Hall — hiring site. Shared shell, lifted verbatim from the invitation page
   (Website/index.html) so the two properties read as one hand.
   Consumed by index.html + general-manager / fb-director / head-chef, and rsynced into
   careers/assets/ by build-careers.mjs for the public twin.

   ── WIRED TO THE SHARED TOKENS 2026-08-09 ──────────────────────────────────────────
   This is an Arena MACRO surface — a brand page a candidate reads, not a working tool —
   so it consumes `assets/tokens/arena-macro.css`, which each HTML file <link>s BEFORE
   this file. That copy is GENERATED by `node "Arena AI/Style Guide/sync-tokens.mjs"`
   from `Arena AI/Style Guide/arena-macro.css`. Never edit it, and never retype a hex
   here: edit the source and re-run the sync. `sync-tokens.mjs --check` fails if a copy
   has drifted or been hand-edited.

   Every name below that the canon actually owns is now an ALIAS. The headline fix is
   --gold: this file shipped #B89257 while canon bronze is #B89358 — one digit apart in
   green and blue, undetectable by eye, permanently diverging. Zero visual change.

   DELETED: --olive, --hunter, --verdant. All three had ZERO usages in this project and
   two of them are named in DESIGN-SYSTEM.md as live hazards: --olive resolves to four
   different hexes across four files, and --hunter is a GREEN here but China red
   (#C8102E) in Events/sheena-greitens, so a copy-paste between those files silently
   changes the brand. Deleting dead declarations removes the hazard at zero risk. */
:root{
  /* ── From the canon. Do not replace these with hexes. ───────────────────────── */
  --ink:        var(--am-ink);            /* #272728 */
  --paper:      var(--am-paper);          /* #F7F5F2 — one paper, not two near-identical creams */
  --cream:      var(--am-paper);
  --gold:       var(--am-bronze);         /* #B89358 — was a hand-typed #B89257 */
  --rule-light: var(--am-sand);           /* #D1C4B8; was #d4cab9 — 3 digits apart, same colour */
  --rule-dark:  var(--am-rule-invert);    /* was a hand-rolled rgba(243,238,226,.18) */

  /* ── Site-local. NOT in arena-macro.css — the honest list of what still needs a
        home in the canon before this page is fully on-system. Left alone on purpose:
        this palette is inherited verbatim from invitation.arenahall.com, which
        DESIGN-SYSTEM.md calls the reference and says is fine. Remapping the olive
        ground to the canon's cream/ink is a rebrand of a live candidate-facing page,
        not a token swap, and it would make hiring diverge from invitation — the exact
        problem this exercise exists to fix. ────────────────────────────────────── */
  --olive-deep:#3b4626;    /* the page ground. Canon's darks are --am-ink / --am-arch; neither is this. */
  --parchment:#ECE4D4;     /* second light ground, between --paper and --am-sand */
  --ink-soft:#3a3a32;      /* body copy. --am-muted (58% ink) renders far lighter — would change the read. */
  --cream-dim:#cdc7b3;     /* ⚠️ tried --am-muted-invert here and REVERTED it. That token is
                              rgba(paper,.62) — right for body copy on a solid dark ground, wrong
                              for 10px uppercase over the translucent scrolled nav, where the alpha
                              composites against whatever is behind. Measured on the live page:
                              5.07:1 → 4.13:1, i.e. it dropped BELOW AA. Opaque is correct here. */
  --bronze:#7B5732;        /* dark brown for labels. Canon has no dark brown; its --am-bronze IS our --gold. */
  --gold-light:#e7cf9e;    /* NEW NAME, not a new colour: this exact hex was written out
                              anonymously NINE times across roles.css and index.html for
                              links and accents on dark grounds. One declaration now.
                              ⚠️ Needs a home in arena-macro.css. */

  /* Type. --ui is the canon body face; --serif and --mono are not in the canon.
     Cormorant Garamond is this family's display face (shared with invitation) and Blair
     is unlicensed, so --am-display would silently fall back to Inter — a worse page. */
  --serif:'Cormorant Garamond',serif;
  --ui:var(--am-body);
  --mono:'JetBrains Mono',monospace;
  --script:'Caveat',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--olive-deep);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
section{padding:88px 0;position:relative}
.dark{background:var(--olive-deep);color:var(--cream)}
.dark .eyebrow{color:var(--gold)}
.light{background:var(--parchment);color:var(--ink)}
.paper{background:var(--paper);color:var(--ink)}
h1,h2,h3{font-weight:400;letter-spacing:.005em;line-height:1.04}
.sect-title{font-size:clamp(40px,6vw,84px);font-weight:300;letter-spacing:.01em;margin:22px 0 0}
.sect-title em{font-style:italic;color:var(--bronze)}
.dark .sect-title em{color:var(--gold)}
.lede{font-size:clamp(20px,2.4vw,27px);font-weight:300;line-height:1.5;max-width:820px;margin-top:30px}
p.body{font-size:20px;line-height:1.66;max-width:760px;margin-top:22px;color:var(--ink-soft)}
.dark p.body{color:var(--cream)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}

.btn{display:inline-block;font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:17px 34px;cursor:pointer;transition:all .25s;border:1px solid currentColor}
.btn.solid{background:var(--gold);color:#2c2110;border-color:var(--gold)}
.btn.solid:hover{background:#cda767;border-color:#cda767}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--olive-deep)}
.light .btn.ghost{color:var(--ink)}
.light .btn.ghost:hover{background:var(--ink);color:var(--parchment)}

/* ---------- nav: wordmark left, the three roles right ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  padding:18px 40px;transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent;gap:20px}
.nav.scrolled{background:rgba(59,70,38,.94);backdrop-filter:saturate(150%) blur(12px);padding:12px 40px;border-bottom:1px solid var(--rule-dark)}
.nav .wm{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.32em;color:var(--cream);text-transform:uppercase;display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.nav .wm .wm-seal{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.nav .roles{display:flex;gap:10px;align-items:center}
.nav .roles .rlab{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim);margin-right:6px;white-space:nowrap}
.rolebtn{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:11px 18px;border:1px solid var(--rule-dark);color:var(--cream);background:rgba(81,82,54,.24);transition:all .25s;white-space:nowrap}
.rolebtn:hover{border-color:var(--gold);color:var(--gold-light);background:color-mix(in srgb, var(--gold) 14%, transparent)}
.rolebtn.here{border-color:var(--gold);color:#2c2110;background:var(--gold)}
@media(max-width:1080px){.nav .roles .rlab{display:none}.rolebtn{padding:10px 13px;font-size:10px;letter-spacing:.1em}}
@media(max-width:760px){
  .nav{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 20px}
  .nav.scrolled{padding:10px 20px}
  .nav .wm{font-size:15px;letter-spacing:.2em;gap:9px}
  .nav .wm .wm-seal{width:24px;height:24px}
  .nav .roles{gap:6px;width:100%}
  .rolebtn{flex:1;text-align:center;padding:9px 6px;font-size:9.5px;letter-spacing:.06em}
}

footer{background:#000;color:#7a7a72;text-align:center;padding:36px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;border-top:1px solid #1a1a1a}

/* ---------- role (job description) pages ---------- */
.jdhero{background:var(--olive-deep);color:var(--cream);padding:190px 0 70px;border-bottom:1px solid var(--rule-dark);position:relative;overflow:hidden}
.jdhero .wrap{position:relative;z-index:2}
.jdhero .backlink{font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none}
.jdhero .backlink:hover{color:var(--gold)}
.jdhero h1{font-size:clamp(44px,7vw,92px);font-weight:300;margin-top:20px}
.jdhero h1 em{font-style:italic;color:var(--gold)}
.jdhero .where{font-family:var(--ui);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-top:24px}
.jdfacts{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--rule-dark)}
.jdfacts div{flex:1 1 190px;padding:20px 26px 20px 0;border-right:1px solid var(--rule-dark)}
.jdfacts div:last-child{border-right:none}
.jdfacts .k{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jdfacts .v{font-size:19px;margin-top:7px;color:var(--cream)}
@media(max-width:700px){.jdfacts div{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--rule-dark);padding-right:0}.jdfacts div:last-child{border-bottom:none}}

.jdbody{background:var(--parchment);color:var(--ink);padding:76px 0 90px}
.jdbody .wrap{max-width:900px}
.jdbody h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,46px);margin:62px 0 0;letter-spacing:.01em}
.jdbody h2:first-of-type{margin-top:0}
.jdbody h2 em{font-style:italic;color:var(--bronze)}
.jdbody h3{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin:38px 0 0}
.jdbody p{font-size:19.5px;line-height:1.66;margin-top:20px;color:var(--ink-soft);max-width:74ch}
.jdbody .rule{height:1px;background:var(--rule-light);margin:20px 0 0}
.jdbody ul{list-style:none;margin:16px 0 0;max-width:74ch}
.jdbody li{font-size:18px;line-height:1.5;padding:11px 0 11px 24px;position:relative;border-bottom:1px solid var(--rule-light);color:var(--ink)}
.jdbody li:before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.jdbody ul.plain li:before{background:var(--rule-light)}
.jdbody .callout{background:#FAF6EC;border:1px solid var(--rule-light);border-left:3px solid var(--gold);padding:26px 30px;margin-top:34px}
.jdbody .callout p{margin-top:0}
.jdbody .callout p + p{margin-top:16px}
.jdbody .notfit{background:rgba(122,58,44,.05);border:1px solid #ddd0c2}
.jdbody .notfit li:before{background:#9a3b2e}

.applybox{background:var(--olive-deep);color:var(--cream);padding:80px 0}
.applybox .wrap{max-width:900px}
.applybox .sect-title{margin-top:16px}
.applybox p{font-size:20px;line-height:1.6;margin-top:24px;color:var(--cream);max-width:70ch}
.applybox .who{margin-top:36px;border-top:1px solid var(--rule-dark);padding-top:28px;display:flex;gap:34px;flex-wrap:wrap}
.applybox .who > div{flex:1 1 240px}
.applybox .who .k{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.applybox .who .v{font-size:19px;margin-top:8px}
.applybox .who a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--gold-light) 40%, transparent)}
.applybox .who a:hover{color:var(--cream)}
.applybox .cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap}