/* WEIGHT 700, NOT 800, ON EVERY DISPLAY ELEMENT. Saira Condensed at 800 renders a
   degraded left stem — the left vertical of B, D and F and the left diagonal of A come
   out a hairline while the right side is full weight. Rendered 600/700/800 side by side
   at 58px on this exact background to confirm it; 700 is even and does not read lighter,
   because a condensed face at display size does not need 800 to feel heavy. This is what
   "the fonts don't render, look at the A" and "you can't see the left side of the letter"
   were both describing, reported twice on two pages and chased as letterform and as box
   geometry before anyone tried the weight. 800 stays in the Google Fonts request so
   nothing 404s. Do not set it. */
/* EMBER shared base — tokens verbatim from design/02-tokens */
:root{
  --ink-0:#0c0a09; --ink-1:#151110; --ink-2:#1c1614; --line:#2a211c;
  --text-hi:#f7f1ea; --text-mid:#b5a89d; --text-low:#8d8178;
  --ember:#f26419; --ember-hot:#ff8a3d; --ember-soft:#ffb27e;
  --ember-dim:rgba(242,100,25,.12);
  --heat:radial-gradient(ellipse 1000px 600px at 50% 115%, rgba(242,100,25,.22), rgba(242,100,25,.05) 55%, transparent 75%);
  --cta:linear-gradient(180deg,#ff8a3d,#f26419);
  --chip-reach:#ff5c5c; --chip-steal:#3ddc97; --chip-chalk:#b5a89d;
  --chip-run:#ff8a3d; --chip-sins:#e6b93d; --chip-low:#7fb1ff;
  --font-display:'Saira Condensed',Arial,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --r-chip:4px; --r-card:10px; --r-pill:999px;
  --shadow-card:0 12px 40px rgba(0,0,0,.5);
  --glow-ember:0 16px 64px rgba(242,100,25,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-0);color:var(--text-hi);font-family:var(--font-body);font-size:17px;line-height:1.6}
a{color:var(--ember-hot)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;gap:14px;padding:16px 0}
.slab{background:var(--cta);color:var(--ink-0);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.04em;padding:6px 13px;text-decoration:none}
.navspacer{flex:1}
/* Nav and footer links are tap targets too. Text of 15px gives a 19px box; padding
   brings the hit area to the 44px floor without moving the type. */
.navlink{color:var(--text-mid);text-decoration:none;font-size:15px;margin-right:8px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.navlink:hover{color:var(--text-hi)}
.hero{position:relative;text-align:center;padding:72px 0 64px;background:var(--heat)}
.eyebrow{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--ember-soft);display:inline-flex;align-items:center;gap:9px}
.dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;font-size:clamp(50px,8.4vw,92px);margin:.2em auto .18em;max-width:14ch;text-wrap:balance}
.tag{color:var(--text-mid);font-size:clamp(17px,1.9vw,20px);max-width:52ch;margin:0 auto 34px}
.tag b{color:var(--text-hi);font-weight:600}
.btn-cta{display:inline-block;background:var(--cta);color:var(--ink-0);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(20px,2.4vw,26px);padding:18px 40px;text-decoration:none;box-shadow:var(--glow-ember);border:0;cursor:pointer}
.btn-cta:hover{filter:brightness(1.07)}
.btn-cta:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--text-hi);outline-offset:3px}
.btn-ghost{display:inline-block;border:1px solid var(--ember);color:var(--ember-hot);background:none;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;padding:10px 18px;text-decoration:none;cursor:pointer}
.btn-ghost:hover{background:var(--ember-dim)}
.under{display:block;margin-top:16px;font-size:15px;color:var(--text-mid)}
.under a{color:var(--ember-soft)}
.trust{font-family:var(--font-mono);font-size:12.5px;color:var(--text-low);letter-spacing:.08em;margin-top:18px}
section{padding:56px 0}
h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(28px,3.6vw,40px);line-height:1;margin:0 0 10px;text-wrap:balance}
.sub{color:var(--text-mid);max-width:60ch;margin:0 0 26px}
.kick{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;color:var(--ember-soft);margin-bottom:8px}
.feed{display:flex;flex-direction:column;gap:12px;max-width:680px;margin:0 auto}
.entry{background:var(--ink-1);border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:var(--r-card);padding:15px 19px;text-align:left}
.emeta{font-family:var(--font-mono);font-size:11.5px;color:var(--text-low);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chip{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;color:var(--ink-0)}
.c-reach{background:var(--chip-reach);border-radius:0}
.c-steal{background:var(--chip-steal);border-radius:var(--r-pill)}
.c-sins{background:none;border:2px solid var(--chip-sins);color:var(--chip-sins);border-radius:var(--r-chip)}
.etext{color:var(--text-hi);font-size:15.5px;line-height:1.55}
.receipt{font-family:var(--font-mono);font-size:12px;color:var(--ember-soft);margin-top:7px}
.sinsentry{border:1px solid var(--chip-sins);border-left:4px solid var(--chip-sins)}
.sinshead{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--chip-sins);margin-bottom:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:.04em;margin:0 0 6px}
.card p{color:var(--text-mid);font-size:14.5px;margin:0}
.pricecard{background:var(--ink-1);border:1px solid var(--ember);border-radius:var(--r-card);max-width:520px;margin:0 auto;padding:32px;text-align:center;box-shadow:var(--glow-ember)}
.bigprice{font-family:var(--font-display);font-weight:700;font-size:88px;line-height:1;margin:4px 0 2px}
.bigprice sup{font-size:38px;vertical-align:super}
.pricemeta{font-family:var(--font-mono);font-size:12px;color:var(--text-low);letter-spacing:.06em}
.includes{text-align:left;margin:20px auto;max-width:360px;padding:0;list-style:none}
.includes li{padding:6px 0 6px 24px;position:relative;color:var(--text-mid);font-size:15px}
.includes li::before{content:"▸";position:absolute;left:2px;color:var(--ember)}
.includes b{color:var(--text-hi)}
.deadline{font-family:var(--font-mono);font-size:12.5px;color:var(--chip-sins);margin-top:14px}
.fine{color:var(--text-mid);font-size:13.5px;margin:14px 0 0}
.fine b{color:var(--text-hi)}
.faq h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:.03em;margin:22px 0 4px}
.faq p{color:var(--text-mid);font-size:15px;margin:0}
footer{border-top:1px solid var(--line);padding:24px 0 56px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-low);line-height:2}
footer a{color:var(--text-low);display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
input,select{background:var(--ink-0);border:1px solid var(--line);border-radius:6px;color:var(--text-hi);font-family:var(--font-mono);font-size:15px;padding:13px 15px}
input::placeholder{color:var(--text-low)}
input:focus,select:focus{outline:2px solid var(--ember);outline-offset:0;border-color:var(--ember)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:640px){.navlink{display:none}}

/* Inline prose links cannot be 44px tall without destroying the paragraph they sit
   in, so the hit area is expanded with a pseudo-element instead of the box. Same
   target, no layout change. */
p a, .tag a, li a { position:relative; }
p a::after, .tag a::after, li a::after {
  content:''; position:absolute; left:0; right:0; top:50%; height:44px;
  transform:translateY(-50%);
}

/* The logo lockup is a link and measured 42px — two short of the floor. */
.slab,.brand,a.brand{min-height:44px;display:inline-flex;align-items:center}

/* THE SEASON BUY STRIP. Stacked, on the Commodore's order: "you need to stack the box
   with the enter Sleeper League ID, it will look like that anyway on mobile and you need
   space for the entire league ID as well as the default box text before entry".
   He was right and the cause was mine -- the strip shipped using .waitrow, which is
   defined in roast.html and NOWHERE ELSE. On a landing page that class styles nothing, so
   the input fell back to a browser default of about twenty characters and clipped both the
   placeholder and any pasted link. A class that exists on one page is not a class.
   42ch minimum so a full sleeper.com/leagues/<18 digits>/ URL is readable, not just held. */
.buyrow{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto;width:100%}
.buyrow input{width:100%;min-width:42ch;box-sizing:border-box;text-overflow:clip;font-size:16px}
.buyrow .btn-cta{width:100%;text-align:center}
@media(max-width:520px){.buyrow input{min-width:0;font-size:16px}}