/* shared stylesheet for the campaign pages (apply.html, campaign.html): the payroll page's
   own <style>, lifted verbatim on 2026-09-02 so the three pages read as one document. */

@font-face{font-family:"Press Start 2P";src:url("fonts/press-start-2p.woff2") format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url("fonts/vt323.woff2") format("woff2");font-display:swap}

:root{
  --paper:#F4F3EF; --card:#FFFFFF; --sunk:#EAE8E2;
  --rule:#D8D5CC; --rule-soft:#E7E4DC;
  --ink:#1A1C20; --ink-2:#4E535A; --ink-3:#878C93;
  --gold:#8A6410; --gold-bright:#C9A237;
  --green:#2C7A4B; --red:#A32B2B;
  --shade:0 1px 2px rgba(26,22,10,.05), 0 10px 30px rgba(26,22,10,.06);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15171A; --card:#1D2024; --sunk:#101215;
    --rule:#2D3136; --rule-soft:#24272B;
    --ink:#E9EAEC; --ink-2:#A3A9B0; --ink-3:#6E747B;
    --gold:#D9B44A; --gold-bright:#F0CE6A;
    --green:#4FB07A; --red:#D9706C;
    --shade:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#15171A; --card:#1D2024; --sunk:#101215;
  --rule:#2D3136; --rule-soft:#24272B;
  --ink:#E9EAEC; --ink-2:#A3A9B0; --ink-3:#6E747B;
  --gold:#D9B44A; --gold-bright:#F0CE6A;
  --green:#4FB07A; --red:#D9706C;
  --shade:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.pixel{font-family:"Press Start 2P",monospace;line-height:1.5;letter-spacing:.02em}
.data{font-family:"VT323",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
img{max-width:100%;image-rendering:pixelated}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
/* The bar gets a wider container than the article: prose wants a 760px measure,
   navigation does not, and squeezing 12 links into it forced a scrollbar. */
.bar .wrap{max-width:1180px}
/* the horizontal value must be repeated: this shorthand lands after .wrap's
   `padding:0 22px` at equal specificity, so `11px 0` would silently zero it */
.bar-in{display:flex;align-items:center;gap:12px;padding:11px 22px}
.bar a.home{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--ink);
            text-decoration:none;white-space:nowrap;flex:none}
@media (max-width:640px){
  /* wrapped rows would eat a third of a phone screen if the bar stayed stuck */
  .bar{position:static}
  .bar a.home{font-size:8px}
  .bar-in{gap:8px;flex-wrap:wrap}
  .bar nav{margin-left:0;justify-content:flex-start;gap:5px 11px}
  .bar nav a{font-size:12px}
  body{font-size:16px}
}
.bar a.home:hover{color:var(--gold)}
/* wrap onto a second row rather than scroll sideways, so every link stays
   reachable at any width */
.bar nav{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;
         gap:6px 11px;min-width:0}
.bar nav a{font-size:12px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.bar nav a:hover{color:var(--gold)}
/* the logo sits on the type's own baseline row and takes the link colour, so
   it lights up with its neighbours instead of carrying a colour of its own */
.bar nav a.xlink{display:inline-flex;align-items:center}

/* ---------- hero ---------- */
header.hero{padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);
         letter-spacing:.14em;text-transform:uppercase}
/* sized to keep "The Employee Handbook" on ONE line at every width */
/* Press Start 2P advances exactly 1em per glyph, so 21 characters need 21x the
   font size. The 716px content box therefore caps at ~34px; 32px keeps a margin. */
h1{font-family:"Press Start 2P",monospace;font-size:clamp(11px,3.05vw,32px);
   line-height:1.4;margin:18px 0 0;white-space:nowrap}
.lede{font-size:20px;color:var(--ink-2);margin:20px 0 0;max-width:60ch}
.lede b{color:var(--ink);font-weight:600}

/* ---------- the 30-second box ---------- */
.tldr{background:var(--card);border:1px solid var(--rule);border-radius:12px;
      padding:26px 26px 8px;margin:34px 0 0;box-shadow:var(--shade)}
.tldr h2{font-family:"Press Start 2P",monospace;font-size:11px;margin:0 0 18px;color:var(--gold)}
.tldr ol{margin:0;padding:0;list-style:none;counter-reset:s}
.tldr li{counter-increment:s;display:flex;gap:14px;padding:0 0 18px;align-items:flex-start}
.tldr li::before{content:counter(s);font-family:"VT323",monospace;font-size:26px;line-height:1.1;
  color:var(--gold);flex:none;width:24px;text-align:center}
/* label and text stack; without this wrapper they become sibling flex items and
   any label that wraps to two lines drags its description out of alignment */
.tldr li > div{min-width:0}
.tldr li b{display:block;font-weight:650}
.tldr li span{display:block;color:var(--ink-2);font-size:16px;margin-top:2px}

/* ---------- sections ---------- */
section{padding:52px 0;border-bottom:1px solid var(--rule-soft)}
section:last-of-type{border-bottom:0}
.num{font-family:"VT323",monospace;font-size:15px;color:var(--gold);letter-spacing:.16em}
h2.sec{font-family:"Press Start 2P",monospace;font-size:clamp(13px,2.8vw,17px);
       margin:10px 0 0;line-height:1.5;text-wrap:balance}
.plain{font-size:19px;color:var(--gold);margin:16px 0 0;font-weight:550;
       border-left:3px solid var(--gold);padding-left:16px}
p{margin:18px 0 0;max-width:66ch}
h3{font-size:17px;margin:30px 0 0;font-weight:650}
ul.plainlist{margin:16px 0 0;padding-left:22px;max-width:66ch}
ul.plainlist li{margin:8px 0}
strong{font-weight:650}
a{color:var(--gold);text-underline-offset:2px}

/* ---------- fact cards ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:26px 0 0}
.fact{background:var(--sunk);border:1px solid var(--rule-soft);border-radius:10px;padding:14px 16px}
.fact .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.fact .v{font-family:"VT323",monospace;font-size:27px;line-height:1.15;margin-top:2px}
.fact .v.gold{color:var(--gold)}

/* ---------- callouts ---------- */
.note{border-radius:10px;padding:16px 18px;margin:26px 0 0;font-size:16px;
      border:1px solid var(--rule);background:var(--card)}
.note.warn{border-color:color-mix(in srgb,var(--red) 45%,var(--rule));
           background:color-mix(in srgb,var(--red) 7%,var(--card))}
.note.good{border-color:color-mix(in srgb,var(--green) 45%,var(--rule));
           background:color-mix(in srgb,var(--green) 7%,var(--card))}
.note b{display:block;margin-bottom:4px;color:var(--gold)}
.note.warn b{color:var(--red)}
.note.good b{color:var(--green)}

/* ---------- pictures of the machines ---------- */
figure.shot{margin:26px 0 0;max-width:100%;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:var(--sunk);box-shadow:var(--shade)}
figure.shot img{display:block;width:100%;height:auto;image-rendering:pixelated}
figure.shot figcaption{font-size:13px;color:var(--ink-2);padding:9px 14px;
  border-top:1px solid var(--rule-soft)}

/* ---------- money flow ---------- */
.flow{margin:26px 0 0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--card)}
.flow .row{display:flex;align-items:baseline;gap:12px;padding:13px 18px;border-top:1px solid var(--rule-soft)}
.flow .row:first-child{border-top:0;background:var(--sunk)}
.flow .amt{font-family:"VT323",monospace;font-size:25px;min-width:82px;color:var(--gold)}
.flow .lbl{font-size:15px;color:var(--ink-2)}
.flow .lbl b{color:var(--ink)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:26px 0 0;border:1px solid var(--rule);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--card)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);background:var(--sunk)}
tr:last-child td{border-bottom:0}
td.n{font-family:"VT323",monospace;font-size:19px}
/* the supply table carries 10-digit figures: let the label wrap so the number never clips on a phone */
.supply td:first-child{white-space:normal}
.supply td.n{text-align:right}

/* ---------- legendary strip ---------- */
.legends{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin:24px 0 0}
.legends figure{margin:0;text-align:center}
.legends img{width:100%;border-radius:8px;border:1px solid var(--rule);display:block;background:var(--sunk)}
.legends figcaption{font-size:11px;color:var(--ink-2);margin-top:6px;line-height:1.35}

/* ---------- glossary ---------- */
dl{margin:22px 0 0}
dt{font-weight:650;margin-top:16px}
dd{margin:4px 0 0;color:var(--ink-2);max-width:64ch}

footer{padding:44px 0 70px;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-2)}
.legal{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-soft);
       font-size:11.5px;line-height:1.6;color:var(--ink-3);max-width:70ch}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}