/* money.css: /fair/ ("How the money works") and /sponsor/, written by scripts/build_money.mjs (v1.19.0-money). Every rule is scoped under .mo.
   Site tokens from styles.css (--ink --night --paper --gold --steel --fog --mono). The editorial look of /fighters/ (gallery.css):
   gold mono kicker, condensed 900 title with the gold rule, ruled h2 bands, fog text. The slot block's edge is the A8 seam's cyan|magenta.
   No ::before/::after carries text: every visible word comes from the words file. */
.mo{position:relative;isolation:isolate;overflow-x:clip;padding-block:56px 84px;color:var(--paper);background:radial-gradient(120% 70% at 50% 0%,var(--night),var(--ink) 70%)}
.mo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(-58deg,rgba(242,183,5,.035) 0 2px,transparent 2px 22px)}
.mo-wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
/* zero-specificity reset, so .mo-lede, .mo-text and .mo-tier-text margins apply (render 16:02: .mo p had zeroed them) */
:where(.mo) :is(p,h1,h2,h3,ul){margin:0}
:where(.mo) ul{list-style:none;padding:0}

/* Masthead */
.mo-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mo-title{max-width:16ch;margin-top:12px;font:900 clamp(44px,12.4vw,120px)/.88 "Archivo Cond","LTS Cond Fallback","Arial Narrow",system-ui,sans-serif;letter-spacing:-.005em;text-transform:uppercase;color:var(--paper);text-wrap:balance;overflow-wrap:break-word;-webkit-text-size-adjust:none;text-size-adjust:none}
.mo-title::after{content:"";display:block;width:min(240px,40%);height:8px;margin-top:18px;background:var(--gold)}
.mo-lede{max-width:56ch;margin-top:18px;font-size:18px;line-height:1.5;color:var(--paper);text-wrap:pretty}
.mo-lede+.mo-lede{margin-top:10px;color:var(--fog)}

/* Ruled bands */
.mo-band{position:relative;max-width:920px;margin-top:52px;padding-top:24px;border-top:1px solid var(--steel)}
.mo-band::before{content:"";position:absolute;left:0;top:-3px;width:56px;height:5px;background:var(--gold)}
.mo-h2{font:900 clamp(30px,8.4vw,56px)/.94 "Archivo Cond","LTS Cond Fallback","Arial Narrow",system-ui,sans-serif;letter-spacing:.005em;text-transform:uppercase;color:var(--paper);text-wrap:balance;overflow-wrap:break-word}
.mo-text{max-width:62ch;margin-top:14px;font-size:17px;line-height:1.55;color:var(--fog);text-wrap:pretty}
.mo-h2+.mo-text{margin-top:16px}

/* The slot: ledger rows (name left, price right, the text under it), on the A8 seam's cyan|magenta edge */
.mo-ways{padding-left:18px}
.mo-ways::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#3EE6FF 0 50%,#FF3DCB 50% 100%);box-shadow:0 0 14px rgba(62,230,255,.28)}
.mo-ways::before{left:3px}
.mo-ledger{margin-top:18px;border-top:1px solid rgba(142,148,171,.3)}
.mo-tier{padding:16px 0 18px;border-bottom:1px solid rgba(142,148,171,.3)}
.mo-tier-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.mo-tier-name{flex:1 1 10ch;min-width:0;font:900 clamp(28px,7.6vw,44px)/.94 "Archivo Cond","LTS Cond Fallback","Arial Narrow",system-ui,sans-serif;text-transform:uppercase;color:var(--paper);overflow-wrap:break-word}
.mo-tier-price{flex:none;font:700 clamp(24px,6.4vw,34px)/1 var(--mono);letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.mo-tier-text{max-width:62ch;margin-top:12px;font-size:16px;line-height:1.5;color:var(--fog);text-wrap:pretty}

/* Links: a clear button; on /sponsor/ the follow links lead and the internal one is quiet */
.mo-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mo-links li{display:flex}
.mo-btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.mo-btn:hover{background:transparent;border-color:var(--gold);color:var(--gold)}

@media (min-width:860px){
  .mo{padding-block:80px 104px}
  .mo-band{margin-top:64px}
  .mo-lede{font-size:20px}
}