/* ============================================================
   OG FACTIONS — shared stylesheet

   TWO TYPEFACES. Permanent Marker carries the brand — it is the
   face the logo is drawn in, and it does every heading, the
   wordmark, the nav, the buttons and the money. Archivo carries
   the reading.

   The whole site was briefly set in Permanent Marker, on request,
   and it was unreadable at body size. Owner, 2 Sep 2026: "keep the
   info text basic font". So the marker is for the things you look
   at, and the sans is for the things you read.

   Colour: white marker on black, matching the logo. No accent hue
   at all — emphasis comes from INVERSION (black-on-white slabs,
   like a box scrawled round a word) and from scale. Light theme
   flips it to black marker on white paper.
   ============================================================ */

:root{
  /* color-scheme is what tells the browser to paint its OWN widgets
     to match. Without it, form fields, scrollbars and autofill stay
     light no matter what the CSS says - which is exactly why the
     profile inputs came out as white boxes on a black page. */
  color-scheme:light;
  --ground:#FFFFFF;
  --ink:#000000;
  --soft:#4A4843;
  --faint:#807D77;
  --line:#000000;
  --inv-ground:#000000;
  --inv-ink:#FFFFFF;
  --line-op:.85;
  --hair:rgba(0,0,0,.22);
  --hair-strong:rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#000000;
    --ink:#FFFFFF;
    --soft:#B6B2AA;
    --faint:#7A776F;
    --line:#FFFFFF;
    --inv-ground:#FFFFFF;
    --inv-ink:#000000;
    --line-op:.8;
    --hair:rgba(255,255,255,.22);
    --hair-strong:rgba(255,255,255,.42);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#000000;
  --ink:#FFFFFF;
  --soft:#B6B2AA;
  --faint:#7A776F;
  --line:#FFFFFF;
  --inv-ground:#FFFFFF;
  --inv-ink:#000000;
  --line-op:.8;
  --hair:rgba(255,255,255,.22);
  --hair-strong:rgba(255,255,255,.42);
}

*{box-sizing:border-box}

/* TWO FACES, WITH A CLEAR JOB EACH.
   Permanent Marker is the brand — it is the face the logo is drawn
   in, and it does headings, the wordmark, nav, buttons and figures.
   Archivo does the reading: body copy, table cells, form fields,
   anything somebody has to get through a paragraph of.
   The whole site was briefly set in Permanent Marker and it was
   unreadable at body size. Do not put it back on running text. */
body,
input,
textarea,
select{
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.marker,
h1,h2,h3,
.wordmark,
nav.tabs a,
.btn,
.save,
.board .who,
.rules .t b,
.plist .amt,
.ptotal{
  font-family:"Permanent Marker","Comic Sans MS",cursive;
  font-weight:400;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:900px;margin:0 auto;padding:0 22px}

h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance;letter-spacing:.005em}

a{color:var(--ink)}

.mono{font-family:"Space Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}

.tag{
  font-family:"Space Mono",monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0;
  line-height:1.5;
}

/* hand-drawn divider */
.scrawl{display:block;width:100%;height:11px;overflow:visible;opacity:var(--line-op)}
.scrawl path{fill:none;stroke:var(--line);stroke-width:2.5;stroke-linecap:round}

/* ---------- masthead + nav ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 26px;flex-wrap:wrap;padding:22px 0 18px;
}
.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wordmark{
  font-size:32px;letter-spacing:.06em;line-height:1;
  color:var(--ink);text-decoration:none;
}
.live{
  display:flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
}
.blip{
  width:8px;height:8px;border-radius:50%;
  background:var(--ink);flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

nav.tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav.tabs a{
  font-size:17px;
  color:var(--soft);
  text-decoration:none;
  padding:6px 12px 8px;
  transition:color .12s ease,background .12s ease,transform .12s ease;
}
nav.tabs a:hover{color:var(--ink);transform:rotate(-1.2deg)}
nav.tabs a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
nav.tabs a[aria-current="page"]{
  background:var(--inv-ground);
  color:var(--inv-ink);
  transform:rotate(-1deg);
}
/* The login link is an action, not a destination — border, not slab. */
nav.tabs a.auth{
  margin-left:8px;
  border:2px solid var(--hair-strong);
  color:var(--ink);
  padding:4px 14px 6px;
  max-width:16ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
nav.tabs a.auth:hover{
  background:var(--inv-ground);
  color:var(--inv-ink);
  border-color:var(--ink);
}

/* ---------- page head ---------- */
.pagehead{padding:44px 0 34px}
.pagehead h1{font-size:clamp(40px,8vw,74px);margin:0 0 16px}
.pagehead p{margin:0;max-width:56ch;font-size:17px;color:var(--soft)}
.pagehead p b{color:var(--ink);font-weight:600}

/* ---------- sections ---------- */
section{padding:44px 0}
.sechead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.sechead h2{font-size:clamp(30px,5vw,44px);margin:0}
.sechead .count{margin-left:auto}
.lede{margin:16px 0 30px;max-width:60ch;font-size:16px;color:var(--soft)}

/* ---------- payout lists ---------- */
.pgroup{padding:26px 0}
.pgroup + .pgroup{border-top:1px dashed var(--hair)}
.pgroup h3{font-size:26px;margin:0 0 6px}
.pgroup .sub{margin:0 0 18px;font-size:15px;color:var(--soft);max-width:58ch}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:baseline;gap:14px;padding:11px 0;font-size:15.5px}
.plist li + li{border-top:1px dotted var(--hair)}
.plist .lbl{color:var(--soft)}
.plist .dots{flex:1;border-bottom:1px dotted var(--hair-strong);transform:translateY(-5px)}
.plist .amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:19px}
.ptotal{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:3px solid var(--ink);
  font-size:clamp(24px,4.6vw,36px);
}

/* ---------- empty state ---------- */
.empty{
  border:2px dashed var(--hair-strong);
  padding:48px 28px;text-align:center;margin:8px 0 0;
}
.empty h3{font-size:clamp(26px,5vw,38px);margin:0 0 14px}
.empty p{margin:0 auto;max-width:50ch;color:var(--soft);font-size:16px}

/* ---------- board ---------- */
.board{width:100%;border-collapse:collapse;font-size:16px}
.board th{
  text-align:left;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding:0 14px 12px 0;border-bottom:2px solid var(--ink);
}
.board td{padding:14px 14px 14px 0;border-bottom:1px dotted var(--hair);vertical-align:top}
.board .rank{color:var(--faint);width:52px;font-variant-numeric:tabular-nums}
.board .who{font-size:19px;white-space:nowrap}
.board .val{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tablewrap{overflow-x:auto}

/* ---------- rules ---------- */
.rules{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.rules li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.rules .mk{font-size:28px;line-height:1;width:28px;text-align:center}
.rules .t{font-size:15.5px;color:var(--soft);max-width:62ch}
.rules .t b{color:var(--ink);font-weight:400;font-size:21px;display:block;margin-bottom:2px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;align-items:baseline}
.steps li + li{border-top:1px dashed var(--hair)}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-size:16px;color:var(--faint);font-variant-numeric:tabular-nums;
}
.steps h3{font-size:22px;margin:0 0 4px}
.steps p{margin:0;font-size:15.5px;color:var(--soft);max-width:60ch}

/* ---------- forms / profile ---------- */
.card{border:2px solid var(--hair-strong);padding:28px 26px 30px;margin:0 0 26px}
.card h2{font-size:28px;margin:0 0 6px}
.card p.hint{margin:0 0 22px;color:var(--soft);font-size:15.5px;max-width:56ch}

.field{display:block;margin:0 0 20px}
.field span.lab{
  display:block;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 7px;
}
.field input,
.field textarea{
  width:100%;
  display:block;
  background:transparent;
  color:var(--ink);
  border:0;
  border-bottom:2px solid var(--hair-strong);
  padding:8px 2px 10px;
  font-size:19px;
  line-height:1.5;
}
.field textarea{min-height:110px;resize:vertical;border:2px solid var(--hair-strong);padding:12px}
::placeholder{color:var(--faint);opacity:1}
.field input:focus,
.field textarea:focus{outline:0;border-color:var(--ink)}
.field .count{display:block;text-align:right;font-size:13px;color:var(--faint);margin-top:6px}

.rowbtns{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.save{
  background:var(--inv-ground);color:var(--inv-ink);
  border:0;padding:12px 30px 14px;font-size:19px;cursor:pointer;
  transform:rotate(-1deg);transition:transform .12s ease;
}
.save:hover{transform:rotate(1deg) scale(1.03)}
.save:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.save[disabled]{opacity:.45;cursor:default;transform:none}
.saved{font-size:16px;color:var(--soft)}

.who-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 8px}
.who-head img{width:74px;height:74px;border-radius:50%;flex:none}
.who-head h1{font-size:clamp(30px,6vw,50px);margin:0}
.who-meta{color:var(--faint);font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.bio{font-size:16.5px;color:var(--soft);max-width:58ch;white-space:pre-wrap;margin:14px 0 0}

/* ---------- cta ---------- */
.cta{
  background:var(--inv-ground);color:var(--inv-ink);
  padding:46px 30px 50px;text-align:center;margin:20px 0 50px;
}
.cta h2{font-size:clamp(30px,5.5vw,48px);margin:0 0 14px}
.cta p{margin:0 auto 28px;max-width:48ch;font-size:16px;opacity:.75}
.btn{
  display:inline-block;
  font-size:21px;
  background:var(--inv-ink);color:var(--inv-ground);
  padding:12px 34px 15px;text-decoration:none;
  transform:rotate(-1deg);
  transition:transform .12s ease;
}
.btn:hover{transform:rotate(1deg) scale(1.03)}
.btn:focus-visible{outline:3px solid var(--inv-ink);outline-offset:4px}

footer{
  padding:24px 0 48px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
footer a{color:var(--faint);text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:700px){
  body{font-size:15.5px}
  .masthead{padding-bottom:14px}
  nav.tabs{width:100%;justify-content:flex-start;margin-left:-12px}
  .board .who{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}