/* ════════════════════════════════════════════════════════════════════════════════════════════════
   GORE RANK DESIGN SYSTEM — shared by every page on this site.

   Scott: "/ledger doesnt fit into the gorerank.com site it looks like a different site ... i wish
   the top banner and everything was the same."

   It looked different because it WAS different: the ledger had been given its own hand-written CSS
   while the front page grew a design system inline,
and the two drifted apart the moment either one
   changed. Two stylesheets describing one brand is a promise to diverge.

   So this file is the single source,
linked by index.html and ledger.html alike. Selectors that only
   exist on the front page (.hero,
.lb,
the roster) simply do not match on the ledger and cost
   nothing. Anything either page needs on its own goes in a small block after this link,
never here.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */


  *{margin:0;padding:0;box-sizing:border-box;}
  html{font-size:17px;}   /* readability: scales all rem-based text up ~6% (same fonts) */
  :root{--blood:#c41e3a;--glow:rgba(196,30,58,.3);--iron:#12110f;--abyss:#080706;--bone:#ddd4bd;--dim:#a99e85;--gold:#d4a24e;--gold-dim:rgba(212,162,78,.15);--horde:#8c1616;}
  /* overflow-wrap: nothing typed into a page may shove it sideways. Added 6 Oct 2026 during a sweep
     of every site. This body rule already had overflow-x:hidden, which is why the cards never looked
     broken, but the DOCUMENT still scrolled 242px on a 375px phone from one long unbroken word:
     overflow-x on body does not stop the root element scrolling. Inherited from here rather than
     listed per tag, and 'anywhere' not 'break-word' because only 'anywhere' also affects the
     min-content size a grid column is sized from. */
  body{font-family:'Crimson Text',Georgia,serif;background:var(--abyss);color:var(--bone);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px;overflow-wrap:anywhere;}
  body::before{display:none;}  /* retired 30 Sep 2026: a fixed red diamond lattice over the whole
   page,
from before there was any artwork. The leather ground carries the texture now and this was
   the same crimson as the stitch rails Scott spotted running down the sides. */
  body::after{display:none;}
  body .banner-texture{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1100px,96%);height:100%;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");opacity:.5;}

  /* REVEAL ANIMATIONS - visible by DEFAULT; only hidden-then-animated when JS is confirmed running.
     This guarantees content never renders as an empty void in screenshots,
link previews,
crawlers,
print,
or if JS is slow/blocked. The html.js class is set by an inline script in <head>. */
  .reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}
  html.js .reveal{opacity:0;transform:translateY(30px);}
  html.js .reveal.visible{opacity:1;transform:translateY(0);}

  /* The proof used to sit below the fold,
so the first screen asked people to take the guild on
     faith. Three numbers,
on the hero,
doing the arguing. */
  .hero-proof{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;position:relative;z-index:3;}
  @media (max-width:640px){.hero-proof{gap:10px}.hero-proof div{min-width:90px;padding:8px 12px}.hero-proof b{font-size:1.3rem}}

  .hero{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:280px 20px 40px;position:relative;z-index:1;overflow:hidden;background:transparent;}
  /* The old animated banner used to BE the hero. With real key art behind it,
it was still painting
     over the top at 65% opacity on mix-blend-mode:lighten,
so Scott could see the previous artwork
     ghosting through the new flag. Retired,
not deleted: the asset stays in /assets. */
  .hero::before{content:none;}
  .hero-battle{display:none;}

/* the scroll cue: this page is told to people in guild chat,
so the first screen has to say
   "there is more below" without them thinking about it */
#scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  color:var(--dim);font-family:'MedievalSharp',cursive;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.24em;opacity:.75;transition:opacity .25s,color .25s;}
#scroll-cue:hover{opacity:1;color:var(--gold);}
#scroll-cue svg{width:22px;height:22px;animation:cueBob 2.1s ease-in-out infinite;}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
@media (max-width:640px){#scroll-cue{bottom:12px;font-size:.55rem}}

  .hero::after{display:none;}
  #embers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}
    /* BloodPulse living sky - fixed behind the WHOLE page,
above the abyss fallback */
  
  

  .horde-icon{display:none;}
  .hero-logo{position:relative;z-index:1;margin-bottom:12px;}
  .hero-logo img{width:min(420px,80vw);height:auto;filter:drop-shadow(0 0 30px rgba(196,30,58,.4)) drop-shadow(0 0 60px rgba(212,162,78,.15));mix-blend-mode:lighten;animation:logoBreath 4s ease-in-out infinite;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 38%,transparent 68%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 38%,transparent 68%);}
  .hero-logo::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,80vw);height:min(360px,80vw);background:radial-gradient(circle,rgba(196,30,58,.1) 0%,rgba(212,162,78,.03) 40%,transparent 70%);border-radius:50%;pointer-events:none;animation:logoGlow 4s ease-in-out infinite;}
  @keyframes logoBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
  @keyframes logoGlow{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
  @media(min-width:701px) and (max-width:1100px){.hero-logo img{width:437px}.hero-logo::before{width:480px;height:480px}}
  @media(min-width:1800px){
    section{max-width:1000px}
    .banner{max-width:1000px}
    .hero-logo img{width:480px}
    .hero-logo::before{width:520px;height:520px}
    .hero-split{max-width:1000px;gap:60px}
    .hero::before{height:550px;background-size:35% auto!important}
    .hero{padding-top:320px}
    .features-grid{max-width:1000px}
    .tier-grid{max-width:1000px}
    .how-strip{max-width:1000px}
    .apply-section{max-width:1000px}
    .lb{max-width:1000px}
    .lb-filters{max-width:1000px}
    .stat-n{font-size:2.2rem}
    .stat-l{font-size:.7rem}
    h2{font-size:1.6rem}
    .tagline{font-size:.95rem}
    .sub{font-size:.95rem}
    .cta{font-size:1rem;padding:14px 44px}
    .hero-enter-btn{font-size:1rem;padding:14px}
    .tier-name{font-size:1.2rem}
    .tier-price{font-size:1.8rem}
    .tier-cta-btn{font-size:.8rem;padding:12px}
    /* RETIRED 30 Sep 2026. On any screen 1800px or wider this capped the entire footer at
       1000px and centred it, which is precisely the box Scott described: the painted band
       could never reach the page edges because its container could not. Harmless when the
       footer was four lines of small print; fatal once the footer became a full-bleed band.
       He saw it on a friend's desktop. .site-foot sets its own width below. */
  }
  @keyframes ring{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}

  h1{font-family:'MedievalSharp',cursive;font-size:clamp(3.2rem,9vw,5.5rem);font-weight:400;text-transform:uppercase;letter-spacing:.08em;line-height:1;text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 40px var(--glow);position:relative;z-index:1;}
  h1 .g{color:var(--blood);text-shadow:0 0 30px var(--glow);}
  h1 .r{color:var(--gold);text-shadow:0 0 20px rgba(212,162,78,.3);}
  .tagline{font-family:'MedievalSharp',cursive;font-size:.85rem;letter-spacing:.2em;color:var(--dim);margin:12px 0 28px;border-top:1px solid rgba(212,162,78,.1);border-bottom:1px solid rgba(212,162,78,.1);padding:8px 0;display:inline-block;position:relative;z-index:1;}
  .rule{font-family:'MedievalSharp',cursive;font-size:clamp(1.1rem,2.5vw,1.5rem);color:var(--blood);letter-spacing:.08em;text-shadow:0 0 20px var(--glow);}
  .sub{font-size:.88rem;color:var(--dim);max-width:440px;line-height:1.7;margin:16px 0 36px;position:relative;z-index:1;}
  /* was a 2px outline with nothing inside it,
which read as text in a box rather than a button */
  .cta{font-family:'MedievalSharp',cursive;font-size:1rem;text-transform:uppercase;letter-spacing:.15em;color:#1b0e0b;
    background:linear-gradient(180deg,#f0c877,#d4a24e 45%,#a97c32);padding:16px 46px;border:1px solid rgba(255,235,190,.45);border-radius:5px;
    text-decoration:none;cursor:pointer;position:relative;display:inline-block;z-index:1;font-weight:700;
    box-shadow:0 14px 34px -16px rgba(212,162,78,.95),inset 0 1px 0 rgba(255,255,255,.55);
    transition:transform .18s,box-shadow .25s,filter .25s;}
  .cta:hover{filter:brightness(1.07);}
  .cta.ghost{font-weight:400;}
  .cta::before{content:'';position:absolute;inset:3px;border:1px solid rgba(212,162,78,.2);}
  .cta:hover{background:rgba(212,162,78,.1);color:#fff;border-color:#fff;}

  .banner{max-width:900px;margin:0 auto;overflow:hidden;position:relative;z-index:1;}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto;}
  .stat{padding:28px 12px;text-align:center;position:relative;}
  .stat+.stat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(196,30,58,.15);}
  .stat-n{font-family:'Crimson Text',serif;font-size:2rem;font-weight:600;color:var(--blood);text-shadow:0 0 15px var(--glow);}
  .stat-l{text-transform:uppercase;color:var(--dim);margin-top:4px;}

  section{max-width:860px;margin:0 auto;padding:60px 20px;position:relative;z-index:1;}
  .s-label{font-family:'MedievalSharp',cursive;font-size:.65rem;text-transform:uppercase;letter-spacing:.3em;color:var(--gold);margin-bottom:8px;}
  h2{font-family:'MedievalSharp',cursive;font-size:1.5rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:20px;text-shadow:0 2px 10px rgba(0,0,0,.5);}
  .line{width:50px;height:1px;background:linear-gradient(90deg,var(--blood),var(--gold));margin-bottom:28px;box-shadow:0 0 8px var(--glow);}
  .card{background:linear-gradient(180deg,rgba(30,26,20,.8),rgba(18,17,15,.9));border:1px solid rgba(212,162,78,.08);padding:20px;transition:all .3s;position:relative;}
  .card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,162,78,.15),transparent);}
  .card:hover{border-color:rgba(196,30,58,.3);box-shadow:0 4px 20px rgba(0,0,0,.4);}
  .card-title{text-transform:uppercase;}

  .tier{text-align:center;position:relative;}
  .tier.hot{border-color:var(--blood);box-shadow:0 0 25px var(--glow),inset 0 0 30px rgba(196,30,58,.03);}
  .tier.hot::before{background:linear-gradient(90deg,transparent,var(--blood),transparent)!important;}
  .tier.hot::after{content:'FOR THE HORDE';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--blood);color:#fff;font-family:'MedievalSharp',cursive;font-size:.5rem;letter-spacing:.2em;padding:3px 12px;white-space:nowrap;}
  .tier.selected{border-color:var(--blood)!important;box-shadow:0 0 15px rgba(196,30,58,.6),0 0 40px rgba(196,30,58,.3),0 0 80px rgba(196,30,58,.1)!important;background:linear-gradient(180deg,rgba(196,30,58,.08),rgba(18,17,15,.95))!important;transform:scale(1.02);transition:all .3s ease;}
  .tier{transition:all .3s ease,transform .2s ease;}
  .tier.selected .tier-name{text-shadow:0 0 12px rgba(212,162,78,.5);}
  .tier.selected .tier-price{text-shadow:0 0 15px var(--glow);}
  .tier.selected .tier-cta-btn{box-shadow:0 0 15px rgba(196,30,58,.3);}
  .tier-quip.show{opacity:1;}
  .tier ul{list-style:none;text-align:left;margin:12px 0 16px;}
  .tier li{font-size:.78rem;color:var(--dim);padding:5px 0;border-bottom:1px solid rgba(212,162,78,.04);}
  .tier li::before{content:'\25C6  ';color:var(--blood);font-size:.7em;}

  .earn{border:1px solid rgba(212,162,78,.1);background:linear-gradient(180deg,rgba(212,162,78,.04),transparent);padding:32px;text-align:center;margin-top:32px;position:relative;}
  .earn::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
  .earn-title{font-family:'MedievalSharp',cursive;font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:8px;text-shadow:0 0 15px rgba(212,162,78,.2);}
  .earn-text{font-size:.85rem;color:var(--dim);line-height:1.6;max-width:450px;margin:0 auto 16px;}
  .earn-reqs{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;}
  .earn-req-n{font-size:1.3rem;font-weight:600;color:var(--gold);}
  .earn-req-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);}

  /* LEADERBOARD */
  .lb{border:1px solid rgba(212,162,78,.1);background:linear-gradient(180deg,rgba(30,26,20,.6),rgba(18,17,15,.9));overflow:hidden;}
  .lb-filters{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
  .lb-filter-btn{font-family:'MedievalSharp',cursive;font-size:.7rem;padding:5px 12px;border:1px solid rgba(212,162,78,.15);background:transparent;color:var(--dim);cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.08em;}
  .lb-filter-btn:hover,
.lb-filter-btn.active{border-color:var(--blood);color:var(--bone);background:rgba(196,30,58,.1);}
  .lb-header{display:grid;grid-template-columns:36px 44px 1fr 90px 70px 70px 80px;gap:8px;padding:10px 16px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(212,162,78,.15);background:rgba(212,162,78,.04);align-items:center;}
  .lb-row{display:grid;grid-template-columns:36px 44px 1fr 90px 70px 70px 80px;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.02);transition:all .25s;cursor:pointer;align-items:center;}
  .lb-row:hover{border-color:rgba(196,30,58,.1);}
  /* roster IGNITION - each row flares in its class color as it reveals,
rank-by-rank down the ladder */
  .lb-row.visible{animation:lbIgnite .85s cubic-bezier(.2,.7,.3,1) both;}
  @keyframes lbIgnite{0%{filter:grayscale(.85) brightness(.45)}28%{filter:grayscale(0) brightness(1.5);box-shadow:inset 0 0 0 1px var(--cc,#c41e3a),0 0 24px -6px var(--cc,#c41e3a);background:color-mix(in srgb,var(--cc,#c41e3a) 16%,transparent)}100%{filter:none;box-shadow:none;background:transparent}}
  .lb-crown{transform-origin:center;animation:crownPulse 1.09s ease-in-out infinite;}
  @keyframes crownPulse{0%,100%{transform:scale(1);filter:none}12%{transform:scale(1.28);filter:drop-shadow(0 0 5px var(--gold))}32%{transform:scale(1)}}
  .lb-rank{font-weight:700;position:relative;}
  .lb-crown{position:absolute;top:-12px;left:50%;transform:translateX(-50%);}
  .lb-avatar{border-radius:4px;border:2px solid rgba(212,162,78,.2);object-fit:cover;background:#111;}
  .lb-avatar-wrap{position:relative;width:36px;height:36px;}
  .lb-name{letter-spacing:.03em;}
  .lb-ilvl{color:var(--bone);font-weight:600;}
  .lb-rating-val{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;}
  .lb-rating-num{font-weight:700;}
  .lb-empty{text-align:center;padding:40px;color:var(--dim);font-size:.85rem;font-style:italic;}

  /* WOW TOOLTIP */
  #wow-tooltip{position:fixed;z-index:2000;display:none;background:#171310;border:2px solid #333;border-radius:3px;padding:12px;max-width:300px;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.8);font-family:'Crimson Text',serif;font-size:.82rem;}
  .tt-name{font-weight:700;font-size:.9rem;margin-bottom:4px;}
  .tt-ilvl{color:var(--gold);font-size:.78rem;margin-bottom:6px;}
  .tt-slot{color:#fff;font-size:.75rem;margin-bottom:4px;}
  .tt-enchant{color:#1eff00;font-size:.72rem;}
  .tt-socket{color:#fff;font-size:.72rem;}
  .tt-set{color:var(--gold);font-size:.72rem;}

  /* PROFILE OVERLAY */
  .profile-overlay{position:fixed;inset:0;z-index:1000;display:none;opacity:0;transition:opacity .3s;}
  .profile-overlay.open{display:block;opacity:1;overflow-y:auto;}
  .profile-bg{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);}
  .profile-close{position:absolute;top:20px;right:24px;width:40px;height:40px;background:none;border:1px solid rgba(212,162,78,.2);color:var(--bone);font-size:1.4rem;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .2s;}
  .profile-close:hover{border-color:var(--blood);color:#fff;background:rgba(196,30,58,.15);}
  .profile-content{position:relative;z-index:2;width:100%;max-width:960px;margin:0 auto;padding-bottom:60px;}
  .profile-hero{position:relative;min-height:340px;display:flex;align-items:flex-end;overflow:hidden;}
  .profile-hero-bg{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;}
  .profile-render{height:340px;width:auto;max-width:280px;object-fit:contain;filter:drop-shadow(0 0 40px rgba(0,0,0,.9));position:relative;z-index:1;transform:scale(1.8);transform-origin:center bottom;}
  .profile-hero-bg::after{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,rgba(8,7,6,1),rgba(8,7,6,.6) 60%,transparent);z-index:2;}
  .profile-hero-info{position:relative;z-index:3;width:100%;padding:0 32px 32px;}
  .profile-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(212,162,78,.08);border-bottom:1px solid rgba(212,162,78,.08);background:rgba(12,11,10,.8);}
  .profile-kpi{padding:18px 10px;text-align:center;position:relative;}
  .profile-kpi+.profile-kpi::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(212,162,78,.08);}
  .profile-kpi-n{font-family:'Crimson Text',serif;font-size:1.5rem;font-weight:700;line-height:1;}
  .profile-kpi-l{font-size:.55rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);margin-top:3px;}
  .profile-kpi-sub{font-size:.55rem;margin-top:2px;}
  .profile-body{padding:28px 32px;}
  .profile-charname{font-family:'MedievalSharp',cursive;font-size:2.2rem;letter-spacing:.04em;line-height:1;}
  .profile-title-text{font-size:.8rem;color:var(--dim);font-style:italic;margin-top:4px;}
  .profile-meta{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap;}
  .profile-meta-item{font-size:.75rem;color:var(--bone);display:flex;align-items:center;gap:4px;}
  .profile-meta-item .label{color:var(--dim);}
  .profile-guild-rank{font-family:'MedievalSharp',cursive;font-size:.85rem;margin-top:8px;letter-spacing:.05em;}

  .profile-standing-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:3px;font-family:'MedievalSharp',cursive;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;}

  .profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px;}
  .profile-stat{background:rgba(30,26,20,.6);border:1px solid rgba(212,162,78,.08);padding:14px 10px;text-align:center;}
  .profile-stat-n{font-size:1.3rem;font-weight:700;color:var(--gold);}
  .profile-stat-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);margin-top:2px;}

  .profile-section-title{font-family:'MedievalSharp',cursive;font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(212,162,78,.08);}

  .profile-brackets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;}
  .profile-bracket{background:rgba(30,26,20,.6);border:1px solid rgba(212,162,78,.08);padding:14px;transition:border-color .2s;}
  .profile-bracket:hover{border-color:rgba(196,30,58,.3);}
  .profile-bracket-type{font-family:'MedievalSharp',cursive;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone);margin-bottom:6px;}
  .profile-bracket-rating{font-size:1.6rem;font-weight:700;line-height:1;}
  .profile-bracket-tier{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
  .profile-bracket-record{font-size:.72rem;color:var(--dim);margin-top:4px;}
  .profile-bracket-bar{height:3px;background:rgba(255,255,255,.05);margin-top:8px;overflow:hidden;border-radius:2px;}
  .profile-bracket-fill{height:100%;border-radius:2px;}

  .profile-bg-stats{margin-bottom:28px;}
  .profile-bg-row{display:grid;grid-template-columns:1fr 50px 50px 50px 60px;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.02);font-size:.78rem;align-items:center;}
  .profile-bg-row.hdr{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);border-bottom:1px solid rgba(212,162,78,.08);padding-bottom:8px;margin-bottom:2px;}
  .profile-bg-map{color:var(--bone);}
  .profile-bg-cell{text-align:center;color:var(--dim);}
  .profile-bg-winrate{text-align:center;font-weight:600;}

  .profile-gear{margin-bottom:28px;}
  .profile-gear-item{display:grid;grid-template-columns:1fr 40px;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.02);font-size:.78rem;align-items:center;cursor:pointer;transition:background .15s;}
  .profile-gear-item:hover{background:rgba(212,162,78,.04);}
  .profile-gear-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .profile-gear-ilvl{text-align:right;color:var(--dim);font-weight:600;}
  .profile-gear-extras{font-size:.65rem;color:var(--dim);margin-top:1px;}
  .quality-Common{color:#9d9d9d;}.quality-Uncommon{color:#1eff00;}.quality-Rare{color:#0070dd;}.quality-Epic{color:#a335ee;}.quality-Legendary{color:#ff8000;}

  .sub-progress{margin-bottom:28px;}
  .sub-prog-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.78rem;}
  .sub-prog-label{width:100px;color:var(--dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;}
  .sub-prog-bar{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;}
  .sub-prog-fill{height:100%;border-radius:3px;transition:width .6s ease;}
  .sub-prog-val{width:60px;text-align:right;font-size:.72rem;font-weight:600;}

  .gov-log{margin-bottom:28px;}
  .gov-log-entry{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.02);font-size:.72rem;align-items:center;}
  .gov-log-date{color:var(--dim);white-space:nowrap;width:80px;flex-shrink:0;}
  .gov-log-action{color:var(--bone);}
  .gov-log-values{color:var(--dim);}

  .apply-section{text-align:center;padding:40px 20px 16px;position:relative;z-index:1;max-width:860px;margin:0 auto;background:radial-gradient(ellipse at 50% 100%,rgba(140,22,22,.08) 0%,transparent 50%);}
  footer{text-align:center;padding:24px;border-top:1px solid rgba(212,162,78,.06);font-size:.65rem;color:rgba(255,255,255,.1);position:relative;z-index:1;}

  /* MOBILE CURVED SCREEN ILLUSION */
  @media(max-width:700px){
    body::before{background:none!important}
    .curve-vignette{position:fixed;inset:0;z-index:9999;pointer-events:none;
      box-shadow:inset 0 0 60px 15px rgba(0,0,0,.35),inset 0 0 120px 40px rgba(0,0,0,.15);
      border-radius:12px}
    .curve-vignette::before{content:'';position:absolute;inset:0;border-radius:12px;
      box-shadow:inset 2px 0 8px rgba(0,0,0,.12),inset -2px 0 8px rgba(0,0,0,.12),inset 0 2px 8px rgba(0,0,0,.1),inset 0 -2px 8px rgba(0,0,0,.1)}
    /* MOBILE TYPOGRAPHY - better readability on small screens */
    body{font-size:16px;-webkit-text-size-adjust:100%}
    h1{text-shadow:0 2px 20px rgba(0,0,0,1),0 0 40px var(--glow),0 1px 0 rgba(0,0,0,.8)}
    h2{text-shadow:0 1px 8px rgba(0,0,0,.8);font-size:1.3rem}
    .sub{font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
    .tagline{font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .s-label{font-size:.6rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .card-title{text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .card-text{font-size:.85rem;line-height:1.7;text-shadow:0 1px 2px rgba(0,0,0,.4)}
    .stat-n{font-size:1.6rem;text-shadow:0 1px 10px rgba(0,0,0,.5),0 0 15px var(--glow)}
    .stat-l{font-size:.6rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .tier-name{text-shadow:0 1px 3px rgba(0,0,0,.5)}
    .tier-price{text-shadow:0 1px 4px rgba(0,0,0,.5)}
    .tier li{font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
    .cta{font-size:.85rem;padding:12px 32px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
    .hero-enter-btn{font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
    .earn-req-n{text-shadow:0 1px 4px rgba(0,0,0,.5)}

    /* MOBILE LAYOUT */
    .hero{padding:30px 16px}
    .hero-split{flex-direction:column;gap:24px;text-align:center}
    .hero-brand{text-align:center}
    .hero-tournament{max-width:100%;width:100%}
    .hero-pool{font-size:2rem}
    section{padding:40px 16px}
    .lb-header,.lb-row{grid-template-columns:28px 36px 1fr 60px 60px;font-size:.72rem}
    .lb-header>:nth-child(4),.lb-row>:nth-child(4),
    .lb-header>:nth-child(6),.lb-row>:nth-child(6){display:none}
    .lb-name{font-size:.85rem}
    .stats{grid-template-columns:repeat(2,1fr)}
    .grid3{grid-template-columns:1fr}
    .features-grid{grid-template-columns:1fr;gap:12px}
    .feature-card{padding:20px 16px;flex-direction:column;align-items:center;text-align:center;gap:10px}
    .feature-card svg{margin:0}
    .feature-card .card-title{font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
    .feature-card .card-text{font-size:.82rem;line-height:1.7}
    .tier-grid{grid-template-columns:1fr 1fr 1fr!important;border:none;gap:6px}
    .tier-grid .card.tier{border:2px solid rgba(212,162,78,.1)!important;border-radius:6px;padding:12px 8px;box-shadow:none!important;transition:all .3s}
    .tier-grid .card.tier.selected{border-color:var(--blood)!important;box-shadow:0 0 20px var(--glow)!important;background:linear-gradient(180deg,rgba(196,30,58,.08),rgba(18,17,15,.95))!important}
    .tier-grid .card.tier.hot{border-color:var(--blood)!important;box-shadow:0 0 15px var(--glow)!important}
    .tier-grid .tier.hot::after{display:none}
    .tier-badge-popular{display:none!important}
    .tier-name{font-size:.8rem}
    .tier-price{font-size:1.2rem}
    .tier-price span{font-size:.6rem}
    .tier li{font-size:.62rem;padding:3px 0}
    .tier li::before{content:'• '!important;color:var(--blood)}
    .tier ul{margin:8px 0}
    .tier-cta-btn{padding:8px 4px;font-size:.55rem;letter-spacing:.06em}
    .tier-quip{font-size:.75rem;padding:0 8px}
    .tier-cta-btn{padding:12px;font-size:.8rem}
    .how-strip{flex-direction:column}
    .how-divider{width:50px;height:1px}
    .how-step{padding:20px 16px}
    .profile-hero{min-height:220px}
    .profile-render{height:220px;max-width:180px;transform:scale(1.8);transform-origin:center bottom}
    .profile-hero-info{padding:0 16px 16px}
    .profile-charname{font-size:1.8rem;text-shadow:0 2px 10px rgba(0,0,0,.9)}
    .profile-kpi-row{grid-template-columns:repeat(2,1fr)}
    .profile-kpi-n{font-size:1.2rem}
    .profile-body{padding:16px}
    .profile-stats{grid-template-columns:repeat(2,1fr)}
    .profile-brackets{grid-template-columns:1fr}
    .lb-filters{gap:4px}
    .lb-filter-btn{padding:4px 8px;font-size:.62rem}
    .guild-stats-grid{grid-template-columns:1fr}
    .ticker-wrap{padding:4px 0}
    .ticker-item{font-size:.65rem}
    .float-nav{padding:8px 14px;gap:8px;flex-wrap:nowrap;justify-content:space-between}
    .float-nav .fn-burger{display:block}
    .float-nav .fn-links{display:none;position:absolute;top:100%;right:8px;flex-direction:column;align-items:flex-start;gap:14px;background:rgba(8,7,6,.98);border:1px solid rgba(196,30,58,.2);border-top:0;border-radius:0 0 10px 10px;padding:16px 22px;min-width:170px;box-shadow:0 12px 30px rgba(0,0,0,.55)}
    .float-nav .fn-links.open{display:flex}
    .float-nav .fn-logo{margin-right:0}
    .float-nav a{font-size:.72rem;letter-spacing:.06em}
    .fn-login-btn{margin-left:0;font-size:.58rem!important;padding:4px 10px}
    .apply-section{padding:48px 16px}
    .section-divider{padding:12px 0}
    .earn-reqs{gap:16px}
    .earn-req-n{font-size:1.1rem}
    .earn-req-l{font-size:.55rem}
    .earn{padding:24px 16px}
    .earn-title{font-size:.9rem}
    .earn-text{font-size:.8rem}
  ;}

  /* FEATURES GRID */
  .features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .feature-card{background:linear-gradient(180deg,rgba(30,26,20,.8),rgba(18,17,15,.9));border:1px solid rgba(212,162,78,.08);padding:24px;display:flex;gap:18px;align-items:flex-start;position:relative;transition:all .3s;}
  .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,162,78,.15),transparent);}
  .feature-card:hover{border-color:rgba(196,30,58,.3);box-shadow:0 4px 20px rgba(0,0,0,.4);}

  /* HOW STRIP */
  .how-strip{display:flex;align-items:center;background:linear-gradient(180deg,rgba(30,26,20,.6),rgba(18,17,15,.9));border:1px solid rgba(212,162,78,.08);}

  /* TIER GRID */
  .tier-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;overflow:visible;margin-bottom:16px;}
  .tier-grid .card.tier{border:2px solid rgba(212,162,78,.08);border-radius:6px;padding:28px 22px;}
  .tier-grid .card.tier:last-child{border:2px solid rgba(212,162,78,.08);}
  .tier-grid .tier.hot{background:linear-gradient(180deg,rgba(196,30,58,.1),rgba(30,26,20,.9));}
  .tier-grid .tier.hot::after{display:none;}

  /* GUILD STATS */
  .guild-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

  /* TOURNAMENT TEASER */
  .tourney-teaser{border:1px solid rgba(196,30,58,.15);background:linear-gradient(180deg,rgba(196,30,58,.06),rgba(18,17,15,.9));padding:32px;text-align:center;position:relative;overflow:hidden;}
  .tourney-teaser::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blood),var(--gold),var(--blood),transparent);}
  .tourney-name{font-family:'MedievalSharp',cursive;font-size:1.3rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:4px;}
  .tourney-format{font-size:.75rem;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;margin-bottom:12px;}
  .tourney-countdown{font-family:'Crimson Text',serif;font-size:1.8rem;font-weight:600;color:var(--blood);margin-bottom:4px;}
  .tourney-countdown-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--dim);margin-bottom:16px;}
  .tourney-meta{display:flex;justify-content:center;gap:24px;margin-bottom:20px;flex-wrap:wrap;}
  .tourney-meta-item{font-size:.78rem;color:var(--dim);}
  .tourney-meta-item strong{color:var(--bone);}
  .tourney-cta{font-family:'MedievalSharp',cursive;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);background:transparent;padding:10px 32px;border:1px solid var(--gold);text-decoration:none;cursor:pointer;transition:all .3s;display:inline-block;}
  .tourney-cta:hover{background:rgba(212,162,78,.1);box-shadow:0 0 20px rgba(212,162,78,.15);color:#fff;border-color:#fff;}
  .tourney-none{font-size:.85rem;color:var(--dim);font-style:italic;padding:20px;}
  .live-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:linear-gradient(135deg,#1a0a0e 0%,#2a0a12 100%);border-bottom:1px solid rgba(196,30,58,.4);padding:0;display:none;overflow:hidden;}
  .live-banner.on{display:block;}
  .live-inner{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 16px;flex-wrap:wrap;}
  .live-label{font-family:'MedievalSharp',cursive;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.6);margin-right:4px;white-space:nowrap;}
  .live-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(196,30,58,.25);border:1px solid rgba(196,30,58,.5);border-radius:20px;padding:3px 12px 3px 8px;text-decoration:none;transition:all .2s;white-space:nowrap;}
  .live-chip:hover{background:rgba(196,30,58,.45);border-color:rgba(196,30,58,.8);transform:translateY(-1px);}
  .live-chip-name{font-family:'Crimson Text',serif;font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.02em;}
  .live-chip-game{font-size:.65rem;color:rgba(255,255,255,.5);max-width:120px;overflow:hidden;text-overflow:ellipsis;}
  .live-chip-platform{font-size:.6rem;color:rgba(212,162,78,.7);text-transform:uppercase;letter-spacing:.08em;}
  .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c41e3a;flex-shrink:0;animation:liveDot 1.2s ease-in-out infinite;box-shadow:0 0 6px rgba(196,30,58,.8);}
  @keyframes liveDot{0%,100%{opacity:1;box-shadow:0 0 6px rgba(196,30,58,.8)}50%{opacity:.4;box-shadow:0 0 2px rgba(196,30,58,.3)}}
  /* The nav used to start at translateY(-100%) and only slide in once you scrolled,
so the very
     first thing anyone saw had no way to navigate. It is always there now,
and it gets heavier
     once you scroll past the hero rather than appearing from nothing. */
  .float-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,rgba(8,7,6,.92),rgba(8,7,6,.55));backdrop-filter:blur(10px);border-bottom:1px solid rgba(212,162,78,.14);padding:12px 26px;display:flex;align-items:center;justify-content:center;gap:26px;transform:translateY(0);transition:background .3s,border-color .3s,padding .3s;pointer-events:auto;}
  .float-nav.show{background:rgba(8,7,6,.97);border-bottom-color:rgba(196,30,58,.28);padding:9px 26px;box-shadow:0 10px 30px -12px rgba(0,0,0,.9);}
  .float-nav a{font-family:'MedievalSharp',cursive;text-transform:uppercase;color:#cbbfa6;text-decoration:none;transition:color .2s;position:relative;padding:4px 0;}
  .float-nav a:hover{color:var(--gold);}
  .float-nav a:not(.fn-login-btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:linear-gradient(90deg,var(--blood),var(--gold));transition:right .25s;}
  .float-nav a:not(.fn-login-btn):hover::after{right:0;}
  .float-nav .fn-logo{font-family:'MedievalSharp',cursive;margin-right:auto;}
  .fn-burger{display:none;background:none;border:0;color:var(--gold);font-size:1.35rem;line-height:1;cursor:pointer;padding:2px 6px;}
  .fn-links{display:flex;align-items:center;}
  .fn-login-btn{background:linear-gradient(180deg,#d8253f,#96162c);color:#fff!important;border-radius:5px;font-weight:700;text-transform:uppercase;text-decoration:none;margin-left:auto;
    border:1px solid rgba(255,190,190,.22);box-shadow:0 0 0 rgba(196,30,58,0),inset 0 1px 0 rgba(255,255,255,.22);transition:box-shadow .25s,transform .18s,filter .25s;}
  .fn-login-btn::after{display:none!important;}
  .tier-badge{font-size:.5rem;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:2px;margin-left:6px;vertical-align:middle;}
  .tier-badge.reaper{background:rgba(30,239,0,.1);color:#1eff00;}
  .tier-badge.executioner{background:rgba(255,128,0,.1);color:#ff8000;}
  .report-card{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
  .grade-card{background:rgba(30,26,20,.6);border:1px solid rgba(212,162,78,.08);padding:10px 14px;text-align:center;flex:1;min-width:60px;}
  .grade-letter{font-family:'MedievalSharp',cursive;font-size:1.6rem;font-weight:700;line-height:1;}
  .grade-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-top:2px;}
  .grade-A{color:#1eff00;}.grade-B{color:#0070dd;}.grade-C{color:#d4a24e;}.grade-D{color:#ff8000;}.grade-F{color:#c41e3a;}
  .badge-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
  .badge-item{background:rgba(30,26,20,.6);border:1px solid rgba(212,162,78,.12);padding:8px 12px;display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--bone);border-radius:3px;}
  .badge-item .badge-icon{font-size:1.1rem;}
  .badge-item.unearned{opacity:.25;border-color:rgba(255,255,255,.03);}
  .heatmap-grid{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:20px;}
  .heatmap-cell{width:10px;height:10px;border-radius:1px;}
  .mastery-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:20px;}
  .mastery-item{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;font-size:.72rem;background:rgba(30,26,20,.4);border-radius:2px;}
  .mastery-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:2px;}
  .mastery-master{background:rgba(212,162,78,.15);color:var(--gold);}
  .mastery-veteran{background:rgba(192,192,192,.1);color:#c0c0c0;}
  .mastery-competent{background:rgba(205,127,50,.1);color:#cd7f32;}
  .mastery-needs-work{background:rgba(255,255,255,.03);color:var(--dim);}
  .streak-display{display:flex;gap:20px;margin-bottom:20px;}
  .streak-item{text-align:center;}
  .streak-num{font-family:'MedievalSharp',cursive;font-size:1.8rem;color:var(--gold);line-height:1;}
  .streak-num.hot{color:var(--blood);text-shadow:0 0 15px var(--glow);}
  .streak-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);}

  .hero-split{display:flex;align-items:center;justify-content:center;gap:60px;max-width:960px;margin:0 auto;width:100%;position:relative;z-index:1;}
  .hero-brand{flex:1;text-align:left;}
  .hero-tournament{flex:1;max-width:400px;}
  .hero-tourney-card{background:linear-gradient(180deg,rgba(196,30,58,.08),rgba(18,17,15,.9));border:1px solid rgba(196,30,58,.15);padding:28px;position:relative;overflow:hidden;}
  .hero-tourney-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blood),var(--gold),var(--blood),transparent);}
  .hero-tourney-label{font-family:'MedievalSharp',cursive;font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--dim);margin-bottom:6px;}
  .hero-tourney-name{font-family:'MedievalSharp',cursive;font-size:1.3rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:12px;}
  .hero-countdown{display:flex;gap:12px;margin-bottom:16px;}
  .hero-cd-block{text-align:center;}
  .hero-cd-num{font-family:'Crimson Text',serif;font-size:1.6rem;font-weight:700;color:var(--blood);line-height:1;}
  .hero-cd-label{font-size:.5rem;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);}
  .hero-spots{margin-bottom:16px;}
  .hero-spots-text{font-size:.75rem;color:var(--bone);margin-bottom:4px;}
  .hero-spots-bar{height:6px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;}
  .hero-spots-fill{height:100%;border-radius:3px;transition:width .6s ease;}
  .hero-enter-btn{display:block;width:100%;padding:14px;text-align:center;font-family:'MedievalSharp',cursive;font-size:1rem;text-transform:uppercase;letter-spacing:.15em;color:#fff;background:var(--blood);border:none;cursor:pointer;transition:all .3s;text-decoration:none;}
  .hero-enter-btn:hover{background:#a01830;box-shadow:0 0 30px var(--glow);}
  .hero-no-tourney{text-align:center;padding:40px 20px;color:var(--dim);font-size:.85rem;font-style:italic;}
  @media(max-width:700px){
    .hero-split{flex-direction:column;gap:32px;text-align:center}
    .hero-brand{text-align:center}
    .hero-tournament{max-width:100%;width:100%}
    .hero-pool{font-size:2rem}
  }

  .ticker-wrap{overflow:hidden;position:relative;z-index:1;max-width:900px;margin:0 auto;}
  .ticker{display:flex;animation:tickerScroll 30s linear infinite;white-space:nowrap;}
  .ticker:hover{animation-play-state:paused;}
  .ticker-item{flex-shrink:0;}
  .ticker-dot{flex-shrink:0;}
  @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

  /* ── GUILD PERKS ───────────────────────────────────────────────────────────────────────── */
  .perk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;}
  .perk{position:relative;overflow:hidden;}
  .perk::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
        background:linear-gradient(90deg,transparent,var(--blood),var(--gold),transparent);transition:opacity .22s;}
  .perk:hover{border-color:rgba(212,162,78,.42);}
  .perk .pk-n{position:absolute;top:14px;right:18px;font-family:'MedievalSharp',cursive;
        font-size:2.4rem;line-height:1;color:rgba(212,162,78,.09);pointer-events:none;}
  /* size lives on `img.pk-ico` at the foot of this file. It used to live here as 34px, and this
     selector (0,2,0) quietly outranked it (0,1,1), so the forged icons rendered at two thirds
     of the size they were drawn for while the rule that said 52px looked like it was winning. */
  .perk h3{font-family:'MedievalSharp',cursive;font-size:1.02rem;color:#fff;margin:0 0 9px;letter-spacing:.03em;}
  .perk p{font-size:.84rem;color:var(--bone);line-height:1.72;margin:0;}
  .perk .pk-tag{display:inline-block;margin-top:13px;font-family:'MedievalSharp',cursive;
        font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);
        border:1px solid rgba(212,162,78,.3);padding:4px 10px;}
  .invite-band{margin-top:16px;border:1px solid rgba(196,30,58,.3);position:relative;overflow:hidden;
        background:linear-gradient(115deg,rgba(140,22,22,.22),rgba(12,10,9,.95) 58%);
        padding:34px 30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
  .invite-band::after{content:"";position:absolute;inset:0;pointer-events:none;
        background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(212,162,78,.028) 22px 24px);}
  .invite-band .ib-body{flex:1 1 380px;min-width:0;}
  .invite-band h3{font-family:'MedievalSharp',cursive;font-size:1.5rem;color:#fff;margin:0 0 11px;letter-spacing:.04em;}
  .invite-band p{font-size:.9rem;color:var(--bone);line-height:1.75;margin:0 0 9px;}
  @media(max-width:620px){ .invite-band{padding:26px 20px} .invite-band h3{font-size:1.25rem} }

  /* ── HALL OF RECORDS,
SEASON BY SEASON ─────────────────────────────────────────────────── */
  .season-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-bottom:22px;}
  .season-card{overflow:hidden;}
  .season-card.live{border-color:rgba(196,30,58,.42);}
  .season-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
        background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;}
  .season-card.live::before{background:linear-gradient(90deg,transparent,var(--blood),var(--gold),transparent);opacity:1;}
  .sc-badge{display:inline-flex;align-items:center;gap:6px;font-family:'MedievalSharp',cursive;
        font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;padding:3px 9px;
        border:1px solid rgba(212,162,78,.35);color:var(--gold);}
  .season-card.live .sc-badge{border-color:rgba(196,30,58,.5);color:#ff8a8a;}
  .sc-dot{width:6px;height:6px;border-radius:50%;background:#1eff00;box-shadow:0 0 8px #1eff00;}
  .sc-dot.sealed{background:var(--gold);box-shadow:0 0 8px rgba(212,162,78,.7);}
  .season-card h3{font-family:'MedievalSharp',cursive;font-size:1.34rem;color:#fff;margin:11px 0 3px;letter-spacing:.04em;}
  .sc-sub{font-size:.7rem;letter-spacing:.04em;margin-bottom:12px;}
  .sc-dates{font-size:.73rem;color:var(--bone);line-height:1.6;margin-bottom:13px;
        border-left:2px solid rgba(212,162,78,.3);padding-left:10px;}
  .sc-nums{display:flex;gap:18px;flex-wrap:wrap;}
  .sc-num .v{font-family:'MedievalSharp',cursive;font-size:1.12rem;color:var(--gold);line-height:1.1;}
  .sc-num .k{color:var(--dim);text-transform:uppercase;margin-top:2px;}

  .rec-card{position:relative;overflow:hidden;
        transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
  .rec-card:hover{border-color:rgba(212,162,78,.4);}
  .rec-card.champ{border-color:rgba(212,162,78,.5);}
  .rec-card.champ::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
        background:linear-gradient(90deg,var(--blood),var(--gold),var(--blood));}
  .rc-rank{font-size:.58rem;color:var(--dim);letter-spacing:.22em;}
  .rc-name{font-family:'MedievalSharp',cursive;font-size:1.06rem;color:#fff;margin:4px 0 5px;overflow-wrap:anywhere;}
  .rc-peaklbl{font-size:.55rem;color:var(--dim);letter-spacing:.2em;text-transform:uppercase;margin-top:3px;}
  .rc-seasons{padding:4px 0 6px;}
  .rc-srow{display:grid;gap:8px;align-items:baseline;border-bottom:1px solid rgba(212,162,78,.055);font-size:.72rem;}
  .rc-srow:last-child{border-bottom:0;}
  .rc-srow.first-season{background:linear-gradient(90deg,rgba(212,162,78,.07),transparent);}
  .rc-sname{font-family:'MedievalSharp',cursive;color:var(--gold);white-space:nowrap;}
  .rc-srow.live .rc-sname{color:#ff8a8a;}
  .rc-speak{color:#fff;font-variant-numeric:tabular-nums;}
  .rc-sgold{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .rc-sgold.paid{color:#1eff00;}
  .rc-sgold.owed{color:var(--gold);}
  .rc-sgold.none{color:var(--dim);}
  .rc-firstmark{letter-spacing:.18em;color:var(--dim);text-transform:uppercase;}
  @media(max-width:520px){ .rc-srow{font-size:.68rem;padding:7px 12px} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   REDESIGN,
29 Sep 2026. Scott: "I want things so they are formatted better and I dont want it so
   like AI spacey looking I want it more like a professional Like E Sports Team Clean but with horde
   gothic gore rank theme throughout ... look like we are something really expensive."

   WHAT WAS MAKING IT LOOK GENERATED. Every section was the same shape: centred label,
centred
   heading,
centred paragraph,
then an auto-fit grid of rounded cards floating in equal gaps,
with
   56px of air above and below. Eleven times in a row. Nothing was ever aligned to anything,
so the
   eye had no structure to hold,
and uniform spacing everywhere reads as a template rather than a
   decision.

   WHAT EXPENSIVE ACTUALLY LOOKS LIKE. Hard left alignment on a real grid. Section numbers. Display
   type set tight,
body type set small and dense. Cards butted together and separated by hairlines
   instead of drifting in whitespace. Sharp corners. One accent colour used sparingly. Numbers
   treated as the artwork they are. Corner brackets lifted from the Horde UI so the gothic reads as
   craft rather than costume.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --shell: 1180px;
  --gut: clamp(18px, 4vw, 44px);
  --hair: rgba(212,162,78,.16);
  --hair-hot: rgba(212,162,78,.42);
  --ink: #0a0908;
  --ink-2: #100e0c;
  --sp: clamp(52px, 6vw, 84px);}

/* the single shell everything aligns to */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);width:100%;}

/* ── SECTION RHYTHM ────────────────────────────────────────────────────────────────────────── */
section,
.apply-section{position:relative;}
.band{padding-block:var(--sp);position:relative;}
.band + .band{border-top:1px solid rgba(212,162,78,.08);}
.band--dark{background:linear-gradient(180deg,var(--ink) 0%, #060505 100%);}
.band--raise{background:linear-gradient(180deg,#0e0c0b,#0a0908);}
/* a hairline that bleeds past the shell: structure you can see */
.band--rule::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-hot) 18%,var(--hair-hot) 82%,transparent);}

/* ── SECTION HEADER: numbered,
left aligned,
ruled ─────────────────────────────────────────── */
body{counter-reset:sec;}
.s-head{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.4vw,30px);
  align-items:start;margin-bottom:clamp(26px,3.4vw,40px);}
.s-head .s-num{counter-increment:sec;font-family:'MedievalSharp',cursive;font-size:.7rem;
  letter-spacing:.2em;color:var(--gold);white-space:nowrap;}
.s-head .s-num::before{content:"" counter(sec,decimal-leading-zero);}
.s-head .s-kick{font-family:'MedievalSharp',cursive;font-size:.58rem;text-transform:uppercase;
  letter-spacing:.34em;margin-bottom:9px;}
.s-head h2{font-family:'MedievalSharp',cursive;font-weight:400;
  font-size:clamp(1.85rem,4.2vw,2.9rem);line-height:.98;letter-spacing:.01em;color:#fff;text-shadow:0 0 30px rgba(196,30,58,.22);}
.s-head .s-sub{color:var(--dim);}
.s-head .s-rule{grid-column:1/-1;height:1px;margin-top:clamp(18px,2.2vw,26px);}
/* the old centred pattern,
neutralised wherever it survives */
.s-label{font-family:'MedievalSharp',cursive;font-size:.58rem;text-transform:uppercase;
  letter-spacing:.34em;color:var(--blood);text-align:left;margin:0 0 9px;}
section > h2:not(.s-head h2){font-family:'MedievalSharp',cursive;font-weight:400;
  font-size:clamp(1.85rem,4.2vw,2.9rem);line-height:.98;margin:0;}
section > .line{height:1px;margin:clamp(18px,2.2vw,26px) 0 clamp(26px,3.4vw,40px);}

/* ── MESH: cards butted together on hairlines,
not floating in gaps ────────────────────────── */
.mesh{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);}
.mesh > *{background:var(--ink-2);padding:clamp(20px,2.4vw,28px);}
@media(max-width:900px){ .mesh-3,.mesh-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .mesh-3,.mesh-2,.mesh-4{grid-template-columns:1fr} }

/* corner brackets: the Horde UI motif,
used as craft not decoration */
.brk{position:relative;}
.brk::before,
.brk::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border-color:var(--hair-hot);border-style:solid;opacity:.85;transition:opacity .2s,border-color .2s;}
.brk::before{top:7px;left:7px;border-width:1px 0 0 1px;}
.brk::after{bottom:7px;right:7px;border-width:0 1px 1px 0;}
.brk:hover::before,
.brk:hover::after{border-color:var(--gold);opacity:1;}

/* ── TYPE,
TIGHTENED ───────────────────────────────────────────────────────────────────────── */
.eyebrow{font-family:'MedievalSharp',cursive;font-size:.56rem;text-transform:uppercase;
  letter-spacing:.28em;color:var(--gold);}
.figure{font-family:'MedievalSharp',cursive;font-variant-numeric:tabular-nums;line-height:.92;
  color:var(--gold);letter-spacing:-.01em;}

/* ── STATS BAR: a data strip,
not five floating numbers ────────────────────────────────────── */
.banner{border-block:1px solid var(--hair);background:linear-gradient(180deg,#0d0b0a,#070606);
  padding:0;}
@media(max-width:820px){ .banner .stats{grid-template-columns:repeat(2,1fr)}
  .banner .stat:last-child{grid-column:1/-1} }

/* ── CARDS: sharp,
dense,
no drift ─────────────────────────────────────────────────────────── */
.feature-card,
.perk,
.rec-card,
.season-card,
.sn{border-radius:0;}
.features-grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(3,1fr);}
.features-grid .feature-card{background:var(--ink-2);margin:0;border:0;
  padding:clamp(22px,2.6vw,30px);display:flex;gap:15px;align-items:flex-start;}
@media(max-width:900px){ .features-grid{grid-template-columns:1fr} }
.card-title{font-family:'MedievalSharp',cursive;font-size:.97rem;color:#fff;margin-bottom:7px;letter-spacing:.02em;}
.card-text{font-size:.845rem;line-height:1.6;color:var(--dim);}

/* perks inherit the mesh instead of drifting */
.perk-grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(3,1fr);}
.perk{border:0!important;background:var(--ink-2)!important;padding:clamp(22px,2.6vw,30px) !important;
  transition:background .22s;}
.perk:hover{transform:none!important;box-shadow:none!important;background:#151210!important;}
.perk::before{opacity:.5;}
.perk:hover::before{opacity:1;}
@media(max-width:900px){ .perk-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .perk-grid{grid-template-columns:1fr} }

/* records + seasons on the same mesh logic */
.season-strip{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(2,1fr);margin-bottom:clamp(20px,2.6vw,28px);}
.season-card{border:0!important;padding:clamp(22px,2.6vw,30px)!important;background:var(--ink-2)!important;}
.season-card.live{background:linear-gradient(180deg,rgba(140,22,22,.15),var(--ink-2))!important;}
@media(max-width:700px){ .season-strip{grid-template-columns:1fr} }
#records-grid{display:grid!important;gap:1px!important;background:var(--hair);
  border:1px solid var(--hair);}
.rec-card{border:0!important;background:var(--ink-2)!important;}
.rec-card:hover{transform:none!important;box-shadow:none!important;background:#151210!important;}
@media(max-width:1000px){ #records-grid{grid-template-columns:repeat(3,1fr)!important} }
@media(max-width:760px){ #records-grid{grid-template-columns:repeat(2,1fr)!important} }
@media(max-width:460px){ #records-grid{grid-template-columns:1fr!important} }

/* ── BUTTONS: flatter,
sharper,
less glow ──────────────────────────────────────────────────── */
.cta{border-radius:0;padding:14px 30px;font-size:.78rem;letter-spacing:.2em;
  box-shadow:none;border:1px solid transparent;}
.cta:hover{box-shadow:0 0 0 1px var(--gold), 0 10px 26px -14px rgba(212,162,78,.8);transform:translateY(-1px);}
.cta.ghost{border-color:var(--hair-hot);}

/* ── NAV: tighter,
structural ──────────────────────────────────────────────────────────────── */
.float-nav{padding:11px var(--gut);border-bottom:1px solid var(--hair);}
.float-nav .fn-logo{font-size:.9rem;letter-spacing:.04em;}
.float-nav a{font-size:.67rem;letter-spacing:.17em;}

/* ── FOOTER ────────────────────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);}

/* kill the drifting rounded look wherever it is still hard-coded inline */
section [style*="border-radius"]{border-radius:0 !important;}

/* ── OVERRIDE THE OLD SECTION BOX ──────────────────────────────────────────────────────────── */
/* The original sheet sets `section{max-width:860px;padding:60px 20px;}` and a media query narrows it
   further. That is what was squeezing the whole redesign into an 820px column in the middle of a
   1440px screen: the .shell inside was doing its job,
the section around it was not letting it.
   A band is full width and owns no padding of its own; the shell inside owns the gutter. */
/* Bottom-weighted,
not symmetrical. Padding on both sides of every band put two full gaps between
   neighbours and reintroduced the empty look the grid was meant to fix. */
section.band,
.apply-section.band{max-width:none!important;width:100%;margin:0!important;
  padding-inline:0!important;padding-block:clamp(34px,3.6vw,50px) var(--sp)!important;}
.apply-section.band{text-align:left;}
.apply-section.band .shell{text-align:left;}

/* ── RECORD CARDS: stop the season rows clipping ───────────────────────────────────────────── */
/* At four across each card was 182px and every season line overflowed ("50,
943g d"). Three across
   gives them room,
and the row itself now wraps its gold onto its own line rather than truncating,
because a payout figure cut in half is worse than a taller card. */
#records-grid{grid-template-columns:repeat(3,1fr)!important;}
@media(max-width:1040px){ #records-grid{grid-template-columns:repeat(2,1fr)!important} }
@media(max-width:620px){ #records-grid{grid-template-columns:1fr!important} }
.rc-srow{grid-template-columns:1fr auto;row-gap:2px;padding:9px 16px;}
.rc-srow .rc-sname{grid-column:1;min-width:0;}
.rc-srow .rc-speak{grid-column:2;text-align:right;}
.rc-srow .rc-sgold{grid-column:1/-1;text-align:right;font-size:.7rem;margin-top:1px;}

/* ── THE WAR ROOM: the site and the Discord as one thing ───────────────────────────────────── */
/* Scott: "make it like almost mesh with discord as if they are one app in our site somehow."
   So the channels are real deep links that open the actual Discord channel,
the commands are the
   ones the bot really registers,
and the ranks carry Blizzard's own class-colour palette that the
   roles are created with. Nothing here is decorative: if the bot changes,
this is wrong,
and that
   is the correct trade for it feeling like one product instead of two. */
/* Two columns,
not three. At three the commands ran twice the height of the other two and left a
   dead field under each,
which is the same empty-space problem the redesign set out to kill. The
   ranks read better as a horizontal strip anyway: five colours in a row is a ladder,
five colours
   stacked in a narrow column is a list. */
.wr{display:grid;grid-template-columns:1.15fr 1fr;gap:1px;background:var(--hair);
    border:1px solid var(--hair);border-bottom:0;}
.wr > div{background:var(--ink-2);padding:clamp(20px,2.3vw,26px);}
@media(max-width:760px){ .wr{grid-template-columns:1fr} }
.wr-ranks{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);}
.wr-ranks > div{background:var(--ink-2);padding:clamp(14px,1.8vw,20px);}
.wr-ranks .rank{display:block;padding:0;border:0;}
.wr-ranks .rank .swatch{width:26px;height:3px;display:block;margin-bottom:9px;}
.wr-ranks .rank .rn{display:block;font-size:.92rem;margin-bottom:3px;}
.wr-ranks .rank .rq{display:block;margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;}
.wr-note{border:1px solid var(--hair);border-top:0;background:var(--ink-2);
  padding:13px clamp(20px,2.3vw,26px);font-size:.78rem;color:var(--dim);line-height:1.55;}
@media(max-width:820px){ .wr-ranks{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .wr-ranks{grid-template-columns:repeat(2,1fr)} }
.wr-h{font-family:'MedievalSharp',cursive;font-size:.58rem;text-transform:uppercase;
      letter-spacing:.26em;color:var(--blood);margin-bottom:14px;
      padding-bottom:9px;border-bottom:1px solid var(--hair);}
.cmd{display:block;text-decoration:none;padding:9px 0;border-bottom:1px solid rgba(212,162,78,.055);}
.cmd:last-child{border-bottom:0;}
.cmd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold);
  background:rgba(212,162,78,.07);border:1px solid rgba(212,162,78,.16);padding:2px 7px;
  white-space:nowrap;display:inline-block;}
.cmd code .sl{color:var(--blood);}
.cmd .cmd-d{font-size:.78rem;color:var(--dim);line-height:1.5;margin-top:5px;}
.chan{display:flex;align-items:baseline;gap:8px;padding:8px 0;text-decoration:none;
  border-bottom:1px solid rgba(212,162,78,.055);transition:padding-left .16s;}
.chan:last-child{border-bottom:0;}
.chan:hover{padding-left:5px;}
.chan .hash{color:var(--dim);font-weight:700;flex:0 0 auto;}
.chan .nm{color:var(--bone);font-size:.83rem;overflow-wrap:anywhere;}
.chan:hover .nm{color:var(--gold);}
.chan .why{color:var(--dim);margin-left:auto;text-align:right;flex:0 0 auto;
  padding-left:10px;white-space:nowrap;}
@media(max-width:520px){ .chan .why{display:none} }
.rank{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(212,162,78,.055);}
.rank:last-child{border-bottom:0;}
.rank .swatch{width:9px;height:9px;flex:0 0 auto;box-shadow:0 0 8px currentColor;}
.rank .rn{font-family:'MedievalSharp',cursive;font-size:.86rem;}
.rank .rq{color:var(--dim);font-size:.72rem;margin-left:auto;font-variant-numeric:tabular-nums;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-bottom:0;}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:linear-gradient(180deg,rgba(140,22,22,.13),var(--ink-2));
  padding:clamp(18px,2.2vw,24px);position:relative;}
.step .n{font-family:'MedievalSharp',cursive;font-size:1.9rem;color:rgba(212,162,78,.16);
  position:absolute;top:10px;right:14px;line-height:1;}
.step .t{font-family:'MedievalSharp',cursive;font-size:.95rem;color:#fff;margin-bottom:6px;}
.step .d{font-size:.8rem;color:var(--bone);line-height:1.55;}
.step .d code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  color:var(--gold);background:rgba(212,162,78,.08);padding:1px 5px;}

/* ── ROSTER TABLE,
RESIZED FOR THE WIDER SHELL ─────────────────────────────────────────────── */
/* The grid was set for an 860px box: `1fr` on the player column and fixed pixels on the rest. In a
   1180px shell that 1fr swallowed every extra pixel and opened a dead field between the player's
   name and their class. Data columns get real proportions now,
so the table reads across instead of
   stranding the eye in the middle. */
.lb-header,
.lb-row{grid-template-columns:44px 46px minmax(0,1.5fr) minmax(0,1fr) 78px 82px 110px;
  gap:10px;padding-inline:18px;}
.lb-header{font-size:.56rem;letter-spacing:.2em;}
@media(max-width:900px){
  .lb-header, .lb-row{grid-template-columns:32px 38px minmax(0,1.4fr) minmax(0,1fr) 62px 96px}
  .lb-header > :nth-child(6), .lb-row > :nth-child(6){display:none}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE GEL SYSTEM. Scott,
29 Sep 2026: "i loved the pro gaming sites back in the day that had like
   more of those glassy gel type of buttons and things i want this site to be more uniform."

   There were six different button treatments on this page: a flat gold .cta,
an outline .ghost,
a
   transparent filter pill,
a native select,
a red nav button with its own radius,
and a hero button.
   Six materials means nothing looks designed,
it looks assembled. Now there is ONE material and
   three colours of it.

   The recipe is the real one from that era,
not an approximation of it:
     · a vertical gradient with a hard light break at the midpoint,
which is what makes it read as a
       lit surface rather than a flat fill
     · an inset white line on the top edge and an inset black line on the bottom,
so the edge catches
       light like something physical
     · a separate sheen layer over the TOP HALF only,
its lower edge curved with the slash form of
       border-radius. That curve is the whole trick. Without it you have a gradient; with it you have
       a gel cap.
     · a dark 1px border and a coloured bloom underneath

   The structural grid stays matte and sharp. Gloss is for things you can press. That contrast is the
   point: expensive gaming brands make the furniture quiet and the controls tactile.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --gel-r: 5px;
  --gel-lip: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.42);
  --gel-drop: 0 1px 0 rgba(0,0,0,.65), 0 8px 20px -8px rgba(0,0,0,.9);}

/* the shared shell for every pressable thing */
.cta,
.fn-login-btn,
.lb-filter-btn,
.hero-enter-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'MedievalSharp',cursive;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  border-radius:var(--gel-r);
  isolation:isolate;
  transition:transform .13s ease, box-shadow .18s ease, filter .18s ease;}
/* the sheen cap: top half only,
with the curved lower edge that makes it a gel */
.cta::after,
.fn-login-btn::after,
.lb-filter-btn::after,
.hero-enter-btn::after{
  content:"";position:absolute;z-index:-1;
  inset:1px 1px 48% 1px;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.05));
  border-radius:calc(var(--gel-r) - 1px) calc(var(--gel-r) - 1px) 45% 45% / calc(var(--gel-r) - 1px) calc(var(--gel-r) - 1px) 14px 14px;
  pointer-events:none;}
.cta:active,
.fn-login-btn:active,
.lb-filter-btn:active,
.hero-enter-btn:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);}

/* ── GOLD: the primary ─────────────────────────────────────────────────────────────────────── */
.cta,
.hero-enter-btn{
  font-size:.82rem;letter-spacing:.17em;padding:13px 30px;
  color:#2a1a06;text-shadow:0 1px 0 rgba(255,255,255,.34);
  background:linear-gradient(180deg,#f2d495 0%,#dcae5c 47%,#b5812f 53%,#8f6320 100%);
  border:1px solid #63430f;
  box-shadow:var(--gel-lip), var(--gel-drop), 0 0 22px -8px rgba(212,162,78,.75);}

/* ── GHOST: the same material,
unlit ───────────────────────────────────────────────────────── */
.cta.ghost{
  color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.7);
  background:linear-gradient(180deg,rgba(212,162,78,.17) 0%,rgba(212,162,78,.07) 47%,rgba(0,0,0,.28) 53%,rgba(0,0,0,.4) 100%);
  border:1px solid rgba(212,162,78,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.5), var(--gel-drop);}
.cta.ghost::after{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));}
.cta.ghost:hover{filter:none;transform:translateY(-1px);}

/* ── BLOOD: the nav call to action ─────────────────────────────────────────────────────────── */
.fn-login-btn{
  font-size:.66rem!important;letter-spacing:.13em!important;padding:8px 18px;font-weight:400;
  color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.6);margin-left:auto;
  background:linear-gradient(180deg,#e8455e 0%,#c41e3a 47%,#9d1029 53%,#7a0c20 100%);
  border:1px solid #5e0a18;
  box-shadow:var(--gel-lip), var(--gel-drop), 0 0 20px -8px rgba(196,30,58,.85);}

/* ── FILTER PILLS: the small size of the same material ─────────────────────────────────────── */
.lb-filter-btn{
  font-size:.64rem;letter-spacing:.1em;padding:6px 13px;
  color:var(--dim);text-shadow:0 1px 0 rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.42) 100%);
  border:1px solid rgba(212,162,78,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.5);}
.lb-filter-btn::after{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.01));}
.lb-filter-btn:hover{color:var(--bone);border-color:rgba(212,162,78,.4);}
.lb-filter-btn.active{text-shadow:0 1px 0 rgba(255,255,255,.3);}
.lb-filter-btn.active::after{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.05));}


/* ── PANELS GET A SINGLE SPECULAR EDGE,
SO EVERYTHING IS ONE MATERIAL FAMILY ───────────────── */
/* Matte and sharp,
but lit from the same direction as the buttons. One light source across the
   whole page is most of what "uniform" actually means. */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.seal{box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -18px rgba(0,0,0,.9);}

/* ── ONE SCALE,
ENFORCED ───────────────────────────────────────────────────────────────────── */
/* Scott: "i dont want miss matched... i want real uniform ui."
   The audit found 14 different inline heading sizes,
6 different uppercase trackings and 4 different
   button paddings on one page. Inline styles are how that happens: every section quietly invents its
   own version of the same element. The inline values are snapped to this scale now,
and everything
   that lives in a class is pinned here so it cannot drift again.

     micro   .56rem / .28em    the smallest overline
     label   .62rem / .28em    section eyebrows,
stat captions,
table heads
     tag     .72rem / .17em    buttons,
nav,
chips
     title   .97rem            card titles
     h3     1.22rem            panel headings
     display  clamp            section headings,
figures                                        */

.cta.sm{font-size:.72rem;letter-spacing:.17em;padding:9px 20px;}
.cta.xs{letter-spacing:.17em;}

/* every small uppercase label on the page,
one family */
.s-kick,
.wr-h,
.sc-badge,
.pk-tag,
.rc-firstmark,
.rc-peaklbl,
.stat-l,
.lb-header,
.s-head .s-num,
.s-label{
  font-family:'MedievalSharp',cursive;
  text-transform:uppercase;
  letter-spacing:.28em;}
.s-kick,
.wr-h{font-size:.58rem;}
.sc-badge,
.pk-tag{font-size:.58rem;letter-spacing:.2em;}
.rc-peaklbl,
.rc-firstmark,
.stat-l,
.lb-header{letter-spacing:.2em;}

/* every card/panel title,
one family */
.card-title,
.perk h3,
.sn h3,
.rules h3,
.step .t,
.rc-name,
.season-card h3{
  font-family:'MedievalSharp',cursive;font-weight:400;letter-spacing:.02em;color:#fff;}
.card-title,
.perk h3,
.step .t{font-size:.97rem;}

/* every body-copy block inside a panel,
one size */
.card-text,
.perk p,
.rules p,
.step .d,
.cmd .cmd-d,
.sn .meta{
  font-size:.82rem;line-height:1.58;color:var(--dim);}
.perk p,
.step .d{color:var(--bone);}

/* every figure,
one treatment */
.sc-num .v,
.rc-peak,
.banner .stat-n,
.figure{
  font-family:'MedievalSharp',cursive;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* ── THE LADDER: bands,
activity,
and the bench ────────────────────────────────────────────── */
.lb-band{display:flex;align-items:center;gap:12px;padding:11px 18px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--bc) 14%, transparent), rgba(0,0,0,.25) 60%, transparent);
  border-top:1px solid var(--hair);border-bottom:1px solid rgba(212,162,78,.09);
  box-shadow:inset 3px 0 0 var(--bc);}
.lb-band-n{font-family:'MedievalSharp',cursive;font-size:.86rem;color:var(--bc);letter-spacing:.06em;
  text-shadow:0 0 14px color-mix(in srgb, var(--bc) 45%, transparent);}
.lb-band-req{font-family:'MedievalSharp',cursive;color:var(--dim);
  border:1px solid var(--hair);border-radius:3px;}
.lb-band-gold{opacity:.75;}
.lb-band-ct{margin-left:auto;font-family:'MedievalSharp',cursive;color:var(--dim);}

/* activity is the signal the old table never showed: is this guild alive this week */
.lb-act{display:flex;align-items:center;justify-content:center;}
.lb-live{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#1eff00;
  font-variant-numeric:tabular-nums;}
.lb-live i{width:6px;height:6px;border-radius:50%;
  animation:lbPulse 2s ease-in-out infinite;}
@keyframes lbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.lb-idle{font-size:.78rem;color:var(--dim);font-variant-numeric:tabular-nums;}
.lb-none{color:rgba(169,158,133,.4);}
.lb-streak{color:#ff8000;font-size:.68rem;letter-spacing:.04em;}

/* how far to the next payout tier,
and what it is worth */
.lb-prog{height:3px;background:rgba(212,162,78,.1);margin-top:5px;border-radius:2px;overflow:hidden;}

/* the bench: one honest line,
then names,
instead of 112 rows of dashes */
.lb-bench{border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);
  padding:18px;}
.lb-bench-head{font-size:.84rem;color:var(--bone);margin-bottom:13px;line-height:1.55;}
.lb-bench-head b{font-family:'MedievalSharp',cursive;font-size:1.05rem;color:var(--gold);}
.lb-bench-head span{color:var(--dim);display:block;font-size:.78rem;margin-top:2px;}
.lb-chips{display:flex;flex-wrap:wrap;gap:5px;}
.lb-chip{font-family:'Crimson Text',Georgia,serif;opacity:.7;
  background:rgba(255,255,255,.028);border:1px solid rgba(212,162,78,.1);border-radius:3px;
  padding:3px 9px;cursor:pointer;transition:opacity .15s,border-color .15s,background .15s;}
.lb-chip:hover{opacity:1;border-color:rgba(212,162,78,.4);background:rgba(212,162,78,.09);}

/* the ladder column is now activity,
not honor */
.lb-header > :nth-child(6){text-align:center;}

/* band identity is the threshold,
the gold is the payoff,
the count is the scoreboard */
.lb-band-n{font-family:'MedievalSharp',cursive;font-size:1.02rem;color:var(--bc);letter-spacing:.04em;
  text-shadow:0 0 14px color-mix(in srgb, var(--bc) 45%, transparent);font-variant-numeric:tabular-nums;}
.lb-band-gold{color:var(--dim);}
.lb-band-gold b{color:var(--gold);font-weight:400;}

/* ── TICKER: readable,
and wide enough to breathe ──────────────────────────────────────────── */
/* Scott,
looking at it on his own screen: "some of that scrolling text below those guild members
   and gold awarded is small and doesnt read well". It was .72rem in a 900px box on a 3440px monitor,
in --dim grey. Bigger,
brighter,
full width,
and slower so a line can actually be finished. */
.ticker-wrap{max-width:none;padding:11px 0;border-bottom:1px solid rgba(212,162,78,.08);
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.ticker{animation-duration:46s;}
.ticker-item{display:flex;align-items:center;}
.ticker-dot{border-radius:50%;flex:0 0 auto;}
@media(max-width:640px){ .ticker-item{font-size:.78rem} .ticker{gap:32px} }

/* the cue is now just the arrow,
and it cannot land on anything */
#scroll-cue span{display:none;}

/* house rule: no reduce-motion branches on Scott's own sites */

/* ── CENTRED ───────────────────────────────────────────────────────────────────────────────── */
/* Scott: "make things centered i dont like stuff off center really."
   The hard-left header with the number in the margin was the esports-grid convention,
but it reads
   as lopsided on a wide monitor when the copy under it is short. Centred,
the number sits with the
   kicker on one line and the rule runs symmetrically out from the middle,
so every section has an
   axis and the page has a spine. The mesh grids underneath were already symmetrical; now the heads
   agree with them. */
.s-head{display:block;text-align:center;margin-bottom:clamp(26px,3.4vw,40px);}
.s-head .s-num{display:inline;padding:0;opacity:.5;margin-right:.7em;}
.s-head .s-num::after{content:" /";opacity:.5;}
.s-head .s-kick{display:inline;margin:0;}
.s-head > div{display:block;}
.s-head h2{margin:11px auto 0;}
.s-head .s-sub{margin:12px auto 0;max-width:62ch;text-align:center;}
.s-head .s-rule{width:min(100%,560px);margin:clamp(18px,2.2vw,26px) auto 0;
  background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair-hot) 50%,var(--hair) 82%,transparent);}

/* the old centred pattern that survives in a couple of places agrees now too */
.s-label{text-align:center;}
section > h2:not(.s-head h2){text-align:center;}
section > .line{width:min(100%,560px);margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair-hot) 50%,var(--hair) 82%,transparent);}

/* section intro copy that was left-hung under a centred head */
#tiers-section .shell > .reveal[style*="font-size"],
#tiers-section .shell > p.reveal{text-align:center;margin-left:auto;margin-right:auto;}

/* the apply block and the war room closing row read centred too */
.apply-section.band,
.apply-section.band .shell{text-align:center;}
#warroom-section .shell > div[style*="display:flex"]{justify-content:center;}
.wr-note{text-align:center;}

/* ── THE ROSTER ROW,
REBUILT ───────────────────────────────────────────────────────────────── */
/* Six columns,
and every number sits in one tight cluster on the right instead of being spread
   across the width with a person at one end and their class at the other. The player cell takes all
   the slack,
because that is the cell that can use it. */
.lb-header,
.lb-row{
  grid-template-columns: 38px 42px minmax(0,1fr) 70px 84px 148px !important;
  gap:14px !important; padding:11px 18px !important; align-items:center;}
.lb-h-num{text-align:center;}
.lb-header > :last-child,
.lb-row > :last-child{text-align:right;}

.lb-who{min-width:0;}
.lb-name{font-family:'MedievalSharp',cursive;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-meta{color:var(--dim);margin-top:3px;display:flex;align-items:center;
  gap:7px;flex-wrap:wrap;line-height:1.3;}
.lb-meta i{width:3px;height:3px;border-radius:50%;background:rgba(212,162,78,.4);flex:0 0 auto;font-style:normal;}

/* a number and its label,
so no column needs a distant header to be understood */
.lb-num{text-align:center;line-height:1.1;}
.lb-num b{display:block;font-family:'MedievalSharp',cursive;font-weight:400;color:var(--bone);
  font-variant-numeric:tabular-nums;}
.lb-num u{display:block;text-decoration:none;font-family:'MedievalSharp',cursive;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(169,158,133,.5);margin-top:3px;}
@media(min-width:901px){ .lb-num u{display:none} }   /* the head carries it on wide screens */

/* An older rule made this cell display:flex,
which turned the progress bar into a flex item and
   shrank it to its content width: 2px of a 148px cell. The bar was in the DOM with the right inline
   width the whole time and simply had no box to fill. */
.lb-rating-val{display:block !important;text-align:right;min-width:0;}
.lb-rating-top{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.lb-rating-num{font-family:'MedievalSharp',cursive;line-height:1;
  font-variant-numeric:tabular-nums;}
.lb-tier-badge{font-family:'MedievalSharp',cursive;text-transform:uppercase;border:1px solid;border-radius:3px;white-space:nowrap;}
.lb-prog{height:5px !important;background:rgba(255,255,255,.05);margin-top:7px;border-radius:3px;
  overflow:hidden;border:1px solid rgba(0,0,0,.5);}
.lb-prog-fill{height:100%;border-radius:3px;}
.lb-prog-lbl{color:var(--dim);margin-top:4px;white-space:nowrap;}
.lb-prog-lbl b{color:var(--bone);font-weight:400;}

/* tighter rows: more of the ladder on one screen */
.lb-row{border-bottom:1px solid rgba(212,162,78,.05);}
.lb-avatar{width:36px;height:36px;}
.lb-rank{font-family:'MedievalSharp',cursive;font-size:.86rem;color:var(--dim);text-align:center;
  font-variant-numeric:tabular-nums;}

@media(max-width:900px){
  .lb-header, .lb-row{grid-template-columns:30px 36px minmax(0,1fr) 122px !important;gap:10px !important}
  .lb-header > :nth-child(4), .lb-header > :nth-child(5),
  .lb-row > :nth-child(4), .lb-row > :nth-child(5){display:none}
  .lb-rating-num{font-size:1.1rem}
}

/* The player cell takes the slack,
which is structurally right but leaves a visible void on a wide
   monitor. A table does not need to be 1180px to hold a name and four numbers,
so it is capped and
   centred: the slack disappears,
the row reads as one object,
and it matches the centred headings
   above it rather than stretching past them. */
.lb,
#lb-filters{max-width:1060px;margin-inline:auto;}
#lb-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;}
@media(max-width:1100px){ .lb, #lb-filters{max-width:none} }

/* seven columns: the climb takes the slack in the middle instead of leaving a hole */
.lb-header,
.lb-row{
  grid-template-columns: 38px 42px minmax(0,215px) minmax(0,1fr) 68px 78px 132px !important;
  gap:16px !important;}
.lb-climb{min-width:0;padding-right:6px;}
.lb-climb .lb-prog{margin-top:0;}
.lb-climb .lb-prog-lbl{text-align:left;}
.lb-header > :nth-child(4){text-align:left;padding-left:2px;}
@media(max-width:1100px){
  .lb-header, .lb-row{grid-template-columns:34px 40px minmax(0,190px) minmax(0,1fr) 70px 126px !important}
  .lb-header > :nth-child(5), .lb-row > :nth-child(5){display:none}   /* ilvl goes first */
}
@media(max-width:820px){
  .lb-header, .lb-row{grid-template-columns:30px 36px minmax(0,1fr) 120px !important;gap:10px !important}
  .lb-header > :nth-child(4), .lb-header > :nth-child(5), .lb-header > :nth-child(6),
  .lb-row > :nth-child(4), .lb-row > :nth-child(5), .lb-row > :nth-child(6){display:none}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   FORGED. Scott: "the site just looks kind of kid like ... its too like CODE like lol not DESIGNED."

   He is right and the diagnosis is sitting at the top of his own page. The Gore Rank logo is ornate
   carved metal: a filigreed border,
bevelled letterforms,
real depth. Everything around it was 1px
   hairline rectangles on a grid,
which is precisely what a developer's admin panel looks like. The
   logo set a bar the rest of the page never came near,
so the page read as code with a nice logo
   pasted on top.

   So the panels become the same material as the logo. Warm forged stone rather than flat black,
a
   grain over everything so no surface is a pure CSS fill,
a bevelled lip catching light from above,
and drawn gold corner pieces instead of a border-radius. Headings are carved rather than coloured.
   Dividers are ornament rather than a gradient line.

   The class colours also pull back: eleven saturated rainbow colours across a page is the thing that
   reads "kid". They stay on names,
where they carry meaning,
and come off everything else.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E");
  --corner: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2034%2034%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%2012V4a3%203%200%200%201%203-3h8%22%20stroke%3D%22%23caa056%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M1%2020V4.5A3.5%203.5%200%200%201%204.5%201H20%22%20stroke%3D%22%238a6a2f%22%20stroke-width%3D%220.9%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M6%206.5c4.5%200%207.5%201.6%207.5%205.2%200%201.8-1.2%203-2.7%203-1.3%200-2.2-.9-2.2-2%200-1%20.7-1.7%201.6-1.7%22%20stroke%3D%22%23caa056%22%20stroke-width%3D%221.15%22%20opacity%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%224.6%22%20cy%3D%224.6%22%20r%3D%221.5%22%20fill%3D%22%23caa056%22%2F%3E%3C%2Fsvg%3E");
  --stone-1:#191512;
  --stone-2:#100d0b;
  --stone-3:#0a0807;
  --lip: inset 0 1px 0 rgba(255,225,170,.09), inset 0 -1px 0 rgba(0,0,0,.65);
  --sink: 0 18px 44px -26px rgba(0,0,0,1), 0 2px 0 rgba(0,0,0,.5);}

/* the page itself gets a warm floor instead of flat black */
body{background:
  radial-gradient(1400px 700px at 50% -10%, rgba(140,22,22,.10), transparent 60%),
  linear-gradient(180deg,#0b0908,#070605 60%,#0b0908);}

/* ── THE MATERIAL ──────────────────────────────────────────────────────────────────────────── */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.lb,
.sn,
.rules > div{
  position:relative;
  background:
    linear-gradient(180deg, var(--stone-1) 0%, var(--stone-2) 46%, var(--stone-3) 100%) !important;
  box-shadow:var(--lip) !important;}
/* grain: nothing on this page is a flat fill any more */
.mesh > *::after,
.perk::after,
.rec-card::after,
.season-card::after,
.step::after,
.wr > div::after,
.wr-ranks > div::after,
.feature-card::after,
.lb::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.055;mix-blend-mode:overlay;}
.mesh > * > *,
.perk > *,
.rec-card > *,
.step > *,
.wr > div > *{position:relative;z-index:1;}

/* ── ORNAMENT: drawn corners in the logo's language,
not a border-radius ───────────────────── */
.mesh,
.perk-grid,
.season-strip,
.wr,
.wr-ranks,
.steps,
.lb,
.features-grid,
#records-grid{
  position:relative;
  border:1px solid rgba(202,160,86,.26) !important;
  box-shadow:var(--sink), inset 0 0 0 1px rgba(0,0,0,.6) !important;}
.mesh::before,
.perk-grid::before,
.season-strip::before,
.wr::before,
.steps::before,
.lb::before,
.features-grid::before,
#records-grid::before,
.mesh::after,
.perk-grid::after,
.season-strip::after,
.wr::after,
.steps::after,
.lb::after,
.features-grid::after,
#records-grid::after{
  content:"";position:absolute;width:30px;height:30px;background:var(--corner);
  background-size:contain;background-repeat:no-repeat;pointer-events:none;z-index:5;}
.mesh::before,
.perk-grid::before,
.season-strip::before,
.wr::before,
.steps::before,
.lb::before,
.features-grid::before,
#records-grid::before{ top:-1px;left:-1px ;}
.mesh::after,
.perk-grid::after,
.season-strip::after,
.wr::after,
.steps::after,
.lb::after,
.features-grid::after,
#records-grid::after{ bottom:-1px;right:-1px;transform:rotate(180deg) ;}
/* the grain layer on .lb would collide with its corner,
so it keeps only the corner */
.lb::after{ background-image:var(--corner) !important;opacity:1;mix-blend-mode:normal ;}

/* ── CARVED TYPE ───────────────────────────────────────────────────────────────────────────── */
/* chiselled,
not coloured: a dark cut below and a warm highlight above,
the way the logo reads */
.s-head h2,
h1,
.sn h3,
.season-card h3{
  color:#f0e4cb !important;
  text-shadow:
    0 1px 0 rgba(255,232,190,.16),
    0 -1px 0 rgba(0,0,0,.9),
    0 2px 2px rgba(0,0,0,.85),
    0 0 34px rgba(196,30,58,.22) !important;}
.s-head .s-kick{color:#c8a45e !important;text-shadow:0 1px 0 rgba(0,0,0,.9);}

/* ── ORNAMENTAL DIVIDER instead of a gradient hairline ─────────────────────────────────────── */
.s-head .s-rule,
section > .line{
  height:13px !important;background:none !important;position:relative;}

/* ── PULL THE RAINBOW BACK ─────────────────────────────────────────────────────────────────── */
/* Class colours stay on names,
where they mean something. Everywhere else they were just noise. */
.lb-meta span{color:var(--dim) !important;}
.lb-avatar{border-color:rgba(202,160,86,.35) !important;border-width:1px !important;}
.lb-chip{color:var(--dim) !important;}

/* ── BANDS READ AS FORGED PLATES ───────────────────────────────────────────────────────────── */
.lb-band{
  background:linear-gradient(180deg,#221b14,#141010) !important;
  box-shadow:inset 3px 0 0 var(--bc), var(--lip) !important;
  border-block:1px solid rgba(0,0,0,.7) !important;}
.lb-row{background:linear-gradient(180deg,rgba(255,255,255,.012),transparent);}
.lb-row:hover{background:linear-gradient(180deg,rgba(196,30,58,.1),rgba(196,30,58,.03));}

/* ── THE STATS STRIP: struck into the page ─────────────────────────────────────────────────── */
.banner{background:linear-gradient(180deg,#171310,#0a0807) !important;
  border-block:1px solid rgba(202,160,86,.22) !important;box-shadow:var(--sink);}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   PLATES. Scott again: "its still just not enough button like or design like."

   Taken literally,
because he is describing the one thing on this page he already said he liked. The
   gel buttons read as objects you could pick up. The cards did not: they were regions of a grid,
butted edge to edge on hairlines,
sharing one flat surface. That is a table with padding,
and a
   table with padding looks like code.

   So the cards become the same class of object as the buttons. Each one lifts off the page with its
   own shadow,
carries a lit top edge and a gloss over its upper third,
and sits in space instead of
   in a mesh. Separation is the point: things you can count as individual objects read as designed,
a continuous grid reads as output.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --plate-r: 7px;
  --plate-face: linear-gradient(180deg,#221c16 0%,#17120f 44%,#100c0a 100%);
  --plate-edge: 1px solid rgba(202,160,86,.30);
  --plate-lift:
      inset 0 1px 0 rgba(255,231,186,.13),
      inset 0 -1px 0 rgba(0,0,0,.8),
      inset 0 0 0 1px rgba(0,0,0,.45),
      0 2px 0 rgba(0,0,0,.6),
      0 16px 34px -18px rgba(0,0,0,1);}

/* the grids stop being meshes and become arrangements of objects */
.mesh,
.perk-grid,
.season-strip,
.wr,
.wr-ranks,
.steps,
.features-grid,
#records-grid,
.rules{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  gap:14px !important;}
.mesh::before,
.mesh::after,
.perk-grid::before,
.perk-grid::after,
.season-strip::before,
.season-strip::after,
.wr::before,
.wr::after,
.steps::before,
.steps::after,
.features-grid::before,
.features-grid::after,
#records-grid::before,
#records-grid::after{display:none;}

/* every card is now a plate */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.sn,
.rules > div{
  border-radius:var(--plate-r) !important;
  border:var(--plate-edge) !important;
  background:var(--plate-face) !important;
  box-shadow:var(--plate-lift) !important;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
/* the gloss: upper third,
curved along the bottom,
exactly like the buttons */
.mesh > *::before,
.perk::before,
.rec-card::before,
.step::before,
.wr > div::before,
.wr-ranks > div::before,
.feature-card::before,
.sn::before,
.rules > div::before,
.season-card::before{
  content:"";position:absolute;inset:1px 1px auto 1px;height:38%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,215,.075),rgba(255,240,215,.012) 70%,transparent);
  border-radius:calc(var(--plate-r) - 1px) calc(var(--plate-r) - 1px) 42% 42% / calc(var(--plate-r) - 1px) calc(var(--plate-r) - 1px) 20px 20px;}
.mesh > *:hover,
.perk:hover,
.rec-card:hover,
.step:hover,
.feature-card:hover,
.rules > div:hover{
  border-color:rgba(202,160,86,.55) !important;}
/* the grain sits above the gloss,
below the content */
.mesh > *::after,
.perk::after,
.rec-card::after,
.season-card::after,
.step::after,
.wr > div::after,
.wr-ranks > div::after,
.feature-card::after{
  z-index:0;opacity:.05;}

/* the roster keeps its table shape,
but the table itself becomes one plate */
.lb{border-radius:var(--plate-r) !important;border:var(--plate-edge) !important;
    background:var(--plate-face) !important;box-shadow:var(--plate-lift) !important;overflow:hidden;}
/* both corner pseudo-elements retire: the plate's own edge and lift do that job now */
.lb::before,
.lb::after{display:none !important;}

/* corner ornament now rides on the section heading,
where it is a flourish and not clutter */
.s-head{position:relative;}

/* the invite band and other lone panels join in */
.invite-band,
.manifesto-section,
#discord-section > .shell > div{
  border-radius:var(--plate-r) !important;box-shadow:var(--plate-lift) !important;}

/* ── THE HALL OF RECORDS IS MADE OF PEOPLE NOW ─────────────────────────────────────────────── */
/* Scott: "yeah its the images add some art to the sections."
   Blizzard renders a full-body portrait of every character and the CSP already allowed that host,
so these cards are built from pictures of the actual members instead of type on a box. */
.rc-portrait{position:relative;height:228px;overflow:hidden;background:#0b0908;}
.rc-art{position:absolute;inset:0;background-size:cover;background-position:50% 10%;
  filter:saturate(.92) contrast(1.05);transform:scale(1.02);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.rc-art-none{background:radial-gradient(120% 90% at 50% 25%,rgba(140,22,22,.3),#0b0908 70%);}
.rc-scrim{position:absolute;inset:0;pointer-events:none;}
.rc-portrait .rc-rank{position:absolute;top:10px;left:11px;z-index:2;
  font-family:'MedievalSharp',cursive;color:rgba(240,228,203,.9);
  text-shadow:0 1px 3px #000;background:rgba(8,7,6,.5);border:1px solid rgba(202,160,86,.25);
  padding:3px 8px;border-radius:3px;}
.rc-over{position:absolute;left:0;right:0;bottom:11px;z-index:2;text-align:center;padding:0 12px;}
.rc-over .rc-name{font-family:'MedievalSharp',cursive;font-size:1.06rem;color:#fff;
  text-shadow:0 2px 6px #000,0 0 18px rgba(0,0,0,.9);margin-bottom:1px;overflow-wrap:anywhere;}
.rc-peakrow{display:flex;align-items:baseline;justify-content:center;gap:8px;}
.rc-peak{font-family:'MedievalSharp',cursive;font-size:2rem;line-height:1;
  text-shadow:0 2px 10px #000,0 0 26px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;}
.rc-over .rc-peaklbl{font-family:'MedievalSharp',cursive;text-transform:uppercase;color:rgba(221,212,189,.78);text-shadow:0 1px 3px #000;}
.rec-card.champ .rc-portrait{box-shadow:inset 0 0 0 1px rgba(202,160,86,.45);}
@media(max-width:620px){ .rc-portrait{height:198px} }

/* ── REAL ORNAMENT,
NOT A CSS LOZENGE ──────────────────────────────────────────────────────── */
/* divider.webp is a drawn gothic filigree with a real alpha channel that has been sitting unused in
   /assets since April. It replaces the diamond I drew out of gradients,
which was the best CSS could
   manage and nowhere near what the artwork already in this repo could do. */
.s-head .s-rule,
section > .line{height:36px !important;background:none !important;position:relative;}
.s-head .s-rule::before,
section > .line::before{
  content:"";position:absolute;height:1px;}
.s-head .s-rule::after,
section > .line::after{
  content:"";position:absolute;left:50%;top:0;
  transform:none;box-shadow:none;}

/* ── THE CREST AS A SEAL BEHIND EACH SECTION HEAD ──────────────────────────────────────────── */
.s-head{position:relative;}
.s-head::before{
  content:"";position:absolute;left:50%;top:-38px;width:124px;height:124px;margin-left:-62px;
  background:url('/assets/crest.webp?v=8ca5cebc') center/contain no-repeat;
  opacity:.06;pointer-events:none;z-index:0;filter:grayscale(.25) brightness(1.5);}
.s-head > *{position:relative;z-index:1;}

/* ── FIX: the live season card's accent bar became a blob ──────────────────────────────────── */
/* .season-card.live::before was a 2px red-to-gold rule across the top. The plate gloss redefined
   ::before to 38% height without clearing that gradient,
so a hairline accent became a large orange
   smear over the whole top of the card. The gloss owns ::before now; the accent moves to its own
   layer at the height it was always meant to be. */
.season-card::before,
.season-card.live::before{
  background:linear-gradient(180deg,rgba(255,240,215,.07),rgba(255,240,215,.012) 70%,transparent) !important;
  height:38% !important;}
.season-card{position:relative;}
.season-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(202,160,86,.55),transparent);
  opacity:.65;}
.season-card.live::after{
  background:linear-gradient(90deg,transparent,var(--blood),var(--gold),var(--blood),transparent);
  opacity:1;}

/* ── the portraits deserve a tighter crop ──────────────────────────────────────────────────── */
/* These are full-body renders,
so "cover" at 50% 10% was framing a small figure in a lot of empty
   plate. Scaled up and pulled to the head and shoulders,
they read as portraits rather than
   thumbnails. */
/* (the 190% framing that used to sit here was superseded; see THE FRAMING below) */

/* ── the filigree was rendering too small and too dim to register as ornament ──────────────── */
.s-head .s-rule::after,
section > .line::after{
  width:330px !important;height:52px !important;margin-left:-165px !important;
  opacity:1 !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9)) sepia(.45) saturate(1.8) hue-rotate(-12deg) brightness(1.05) !important;}

/* the seal reads a little stronger behind the heading */
.s-head::before{opacity:.085 !important;width:150px !important;height:150px !important;
  margin-left:-75px !important;top:-46px !important;}

/* ── PORTRAIT FRAMING,
TUNED ───────────────────────────────────────────────────────────────── */
/* 190% buried the characters in their own shadows and cropped to a torso. These renders carry a lot
   of empty space around the figure,
so a moderate zoom plus a top-weighted position frames head and
   shoulders,
and the scrim is pulled back over the upper half so faces survive it. Art nobody can
   see is not art on the page. */
/* (the 135% framing that used to sit here was superseded; see THE FRAMING below) */
.rc-scrim{background:
    linear-gradient(180deg,
      rgba(8,7,6,0) 0%,
      rgba(8,7,6,0) 40%,
      rgba(8,7,6,.55) 66%,
      rgba(12,10,8,.93) 86%,
      #0f0c0a 100%),
    radial-gradient(85% 55% at 50% 4%,rgba(202,160,86,.14),transparent 70%) !important;}
.rc-portrait{height:244px;}
@media(max-width:620px){ .rc-portrait{height:210px} }

/* ── FRAMING,
MEASURED RATHER THAN GUESSED ─────────────────────────────────────────────────── */
/* The renders are 1600x1200 LANDSCAPE scene shots,
not portraits: the character occupies roughly the
   middle 27% of the width,
from about 14% to 72% of the height,
surrounded by dark empty space. So
   "cover" was faithfully showing mostly background. At 200% of the card width the figure fills a
   proper share of the frame,
and 5% down puts the head near the top third where a portrait wants it. */
/* ── THE FRAMING, MEASURED THIS TIME ──────────────────────────────────────────────────────────
   Scott, 30 Sep 2026, on his phone: "the camera is probably way too close and too high up on their
   head. They need to be more visible."

   He is right, and this rule is the fourth attempt at it. The three before went 190%, then 135%,
   then 200%, each with a comment explaining why more zoom was the answer. The premise of the last
   one is measurably wrong: it says the figure "occupies the middle 27% of the width, from about 14%
   to 72% of the height". Measured from the actual PNGs, it is 30% to 69% of the width and 19% to
   82% of the height.

   The renders are 1600x1200 LANDSCAPE, which is what makes zoom the wrong lever. The card is
   329x228 on a phone, so at 200% the image stands 494px tall in a 228px window: barely 46% of it,
   and anchored at 5% that band runs from 2.7% to 49% of the image. The character starts at 19%. So
   the top sixth of every card was empty air above the head, and the body was cut at the chest. On a
   figure in big shoulder armour that leaves shoulders and a helmet, which is exactly what he saw,
   and for Plùtø it left nothing but a blue blob of spikes.

   165% at 34% puts the window over 15% to 71% of the image: a little air above the head, then the
   character down to mid-thigh, with weapons in frame. Horizontally it shows 20% to 80%, so a figure
   spanning 30% to 69% sits inside it with room on both sides. Checked by cropping the three real
   renders to the measured card size and looking at the result, not by reasoning about percentages. */
.rc-art{
  background-size:165% auto !important;
  background-position:50% 34% !important;
  filter:saturate(1.08) contrast(1.1) brightness(1.34) !important;}
.rec-card:hover .rc-art{transform:scale(1.06);}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   LEGIBILITY. Scott,
looking at it on his own 3440px monitor: "its hard to see ... the join us
   button doesnt look like it is deisgned well the button is almost to small for the text."

   Both symptoms,
one cause: the whole page was drawn too small. Micro-labels at .56rem are 9px,
body
   copy at .82rem is 13px,
and on a large display at a normal window width that is squinting
   distance. It read as "unpolished" because unreadable and unpolished look identical.

   Everything is sized in rem,
so the root carries the fix and the proportions hold. 16px to 17.5px
   is about 9%,
with the floors raised underneath it so nothing lands under 11px,
and the dim grey
   lifted because it was doing a lot of work at sizes where it had no contrast to spare.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

html{font-size:17.5px;}
@media(max-width:820px){ html{font-size:16.5px} }

:root{
  --dim:#bcb098;          /* was #a99e85: too close to the background at 11px */
  --bone:#e8dfc9;}

/* nothing on the page is allowed under 11px any more */
.s-kick,
.wr-h,
.sc-badge,
.pk-tag,
.rc-firstmark,
.rc-peaklbl,
.stat-l,
.lb-header,
.s-head .s-num,
.s-label{font-size:.66rem !important;}
.rc-peaklbl,
.rc-firstmark,
.stat-l,
.lb-header{font-size:.62rem !important;}
.lb-num u{font-size:.58rem;}
.cmd .cmd-d,
.card-text,
.perk p,
.rules p,
.step .d,
.sn .meta{font-size:.86rem !important;}
.chan .why{font-size:.76rem;}
.lb-meta{font-size:.78rem;}

/* ── THE NAV BUTTON ────────────────────────────────────────────────────────────────────────── */
/* .66rem type with .13em tracking inside 8px of padding: the letters were touching the edges,
and a
   button whose text fills it to the corners reads as an accident rather than a decision. Bigger
   type,
real padding,
a minimum height so it is a deliberate object,
and the gel sheen it was
   supposed to have all along. */
.fn-login-btn{
  font-size:.78rem !important;
  letter-spacing:.1em !important;
  padding:11px 26px !important;
  min-height:40px;
  line-height:1;}
.float-nav{padding-block:13px;}
.float-nav a:not(.fn-login-btn){font-size:.74rem;letter-spacing:.14em;}
.fn-links{gap:clamp(14px,2vw,26px);}

/* the ornament scales with everything else */
.s-head .s-rule::after,
section > .line::after{
  width:400px !important;height:62px !important;margin-left:-200px !important;}
.s-head .s-rule,
section > .line{height:62px !important;}

/* portraits get more room now that the page is bigger */
.rc-portrait{height:272px;}
@media(max-width:620px){ .rc-portrait{height:228px} }
#records-grid{grid-template-columns:repeat(3,1fr) !important;}
@media(max-width:1180px){ #records-grid{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:640px){ #records-grid{grid-template-columns:1fr !important} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   READABLE. Scott: "the text is hard to read almost everywhere the small text it just isnt like a
   friendly viewing experience."

   The 17.5px root was not enough because size was only half of it. This design leaned on micro-labels
   set in wide-tracked uppercase,
which is a real esports convention and also one of the least
   readable things typography can do: at 9 or 10px,
.28em of tracking pulls the letters far enough
   apart that the eye stops reading words and starts reading characters. Every one of those choices
   was individually defensible and collectively unreadable.

   So: 18.5px root,
nothing under 12px anywhere,
tracking on small text roughly halved,
line-height
   opened up,
and the two greys lifted until they have real contrast against the page instead of
   just enough to look moody in a screenshot.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

html{font-size:18.5px;}
@media(max-width:820px){ html{font-size:17px} }

:root{
  --dim:#c9bda4;
  --bone:#efe7d4;}

body{line-height:1.68;}

/* ── SMALL TEXT: bigger,
tighter tracking,
more leading ────────────────────────────────────── */
.s-kick,
.wr-h,
.sc-badge,
.pk-tag,
.s-label{
  font-size:.7rem !important; letter-spacing:.16em !important;}
.rc-peaklbl,
.rc-firstmark,
.stat-l,
.lb-header,
.lb-num u,
.s-head .s-num{
  font-size:.66rem !important; letter-spacing:.12em !important;}
.rc-portrait .rc-rank{font-size:.66rem !important;letter-spacing:.12em !important;}
.rc-over .rc-peaklbl{font-size:.62rem !important;letter-spacing:.12em !important;}
.lb-prog-lbl{letter-spacing:0 !important;}
.chan .why,
.lb-meta,
.sn .win,
.wr-note{font-size:.82rem !important;}
.lb-chip{font-size:.82rem !important;}

/* ── BODY COPY: the size it should always have been ────────────────────────────────────────── */
.card-text,
.perk p,
.rules p,
.step .d,
.cmd .cmd-d,
.sn .meta{
  font-size:.92rem !important; line-height:1.66 !important;}
.s-head .s-sub{font-size:1rem !important;line-height:1.62 !important;}
.lede,
.earn-text{font-size:1.02rem !important;line-height:1.66 !important;}
.lb-name{font-size:1.02rem;}
.lb-num b{font-size:1rem;}
.lb-rating-num{font-size:1.36rem;}

/* ── NAV: readable,
not decorative ─────────────────────────────────────────────────────────── */
.float-nav a:not(.fn-login-btn){font-size:.78rem !important;letter-spacing:.1em !important;}
.fn-login-btn{font-size:.82rem !important;letter-spacing:.08em !important;padding:12px 28px !important;}

/* ── HEADINGS: tracking off,
they never needed it ──────────────────────────────────────────── */
.s-head h2{letter-spacing:0 !important;}
.card-title,
.perk h3,
.step .t,
.rules h3{font-size:1.04rem !important;letter-spacing:0 !important;}
.sn h3,
.season-card h3{font-size:1.3rem !important;letter-spacing:0 !important;}

/* footer and fine print stop being invisible */
footer,
.rc-seasons,
.sc-sub{font-size:.85rem;}
.sc-sub{color:var(--dim) !important;}

/* ── THE DIVIDER,
AT AN ACTUAL SIZE ────────────────────────────────────────────────────────── */
/* divider.webp is 1024x1024 with the filigree in a thin band and transparent padding above and
   below,
so background-size:contain was fitting the whole 1024 square into a 62px box and rendering
   the ornament about 16px tall. Trimmed to its own bounding box it is 987x272,
and the element is
   sized to that aspect so the artwork lands at the size it was drawn for. */
.s-head .s-rule,
section > .line{height:96px !important;}
.s-head .s-rule::after,
section > .line::after{
  width:348px !important;height:96px !important;margin-left:-174px !important;
  background:url('/assets/divider-trim.webp?v=e0c23e23') center/contain no-repeat !important;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.9)) sepia(.42) saturate(1.7) hue-rotate(-10deg) brightness(1.02) !important;
  opacity:1 !important;}
.s-head .s-rule::before,
section > .line::before{
  inset:47px 0 auto !important;
  background:linear-gradient(90deg,transparent,rgba(202,160,86,.1) 22%,rgba(202,160,86,.22) 50%,rgba(202,160,86,.1) 78%,transparent) !important;}
@media(max-width:620px){
  .s-head .s-rule, section > .line{height:72px !important}
  .s-head .s-rule::after, section > .line::after{width:262px !important;height:72px !important;margin-left:-131px !important}
  .s-head .s-rule::before, section > .line::before{inset:35px 0 auto !important}
}

/* ── THE FLOOR,
ENFORCED ───────────────────────────────────────────────────────────────────── */
/* An audit of every leaf element with visible text found 77 still rendering under 12px after the
   first pass: the class filter pills,
the hero card's label,
the tier captions,
the ticker. Small
   type is a legitimate design tool right up to the point where somebody has to lean in,
and Scott
   was leaning in. Twelve pixels is the floor now and the tracking comes off with it,
because wide
   tracking is what makes small caps hard to read in the first place. */
.lb-filter-btn{font-size:.72rem !important;letter-spacing:.06em !important;padding:8px 15px !important;}
.hero-tourney-label,
[style*="font-size:.62rem"],
[style*="font-size:.6rem"],
[style*="font-size:.58rem"],
[style*="font-size:.56rem"],
[style*="font-size:.5rem"]{
  font-size:.68rem !important; letter-spacing:.12em !important;}
.stat-l{font-size:.68rem !important;letter-spacing:.12em !important;}
.rc-seasons,
.rc-srow{font-size:.84rem !important;}
.rc-sname{font-size:.8rem !important;}
.lb-prog-lbl{font-size:.74rem !important;}
.cmd code{font-size:.86rem !important;}
.step .d code,
.s-sub code{font-size:.86rem;}
.wr-note,
.chan .why{font-size:.84rem !important;}
.sc-num .k{font-size:.66rem !important;letter-spacing:.12em !important;}
.lb-live,
.lb-idle{font-size:.88rem !important;}


/* the band plate and its badges: the last things still under the floor */
.lb-band-n{font-size:1.06rem !important;letter-spacing:.02em !important;}
.lb-band-req{font-size:.7rem !important;letter-spacing:.1em !important;padding:3px 9px !important;}
.lb-band-gold{font-size:.86rem !important;}
.lb-band-ct{font-size:.82rem !important;}
.lb-tier-badge{font-size:.66rem !important;letter-spacing:.06em !important;padding:4px 10px !important;}
.rc-firstmark{font-size:.66rem !important;}
.pk-tag,
.sc-badge{font-size:.7rem !important;letter-spacing:.1em !important;padding:5px 11px !important;}
.lb-band{padding:13px 18px !important;}

/* the last seventeen: gold-tier captions and the portrait caption */
.earn-tier-label,
.earn .tier-sub,
#tiers-section .earn div[style*="font-size"],
.rc-over .rc-peaklbl{font-size:.68rem !important;letter-spacing:.1em !important;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   KEY ART. Scott: "build the matched set and rebuild the page around it."

   Eight pieces made in house,
every one of them sharing a single style
   string so they read as one commission rather than eight downloads: deep blue-black and crimson,
cold moonlight with warm ember accents,
snow in the air,
the same lens on all of them.

   The pattern is one band of art at the head of each section,
with the heading composed over it and
   the bottom of the image dissolving into the page. Repeated seven times it becomes rhythm; a page
   where every module carries art is the thing the reference mockup was actually doing,
and no amount
   of gel or ornament substitutes for it.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.has-art{position:relative;isolation:isolate;}
.has-art::before{
  content:"";position:absolute;inset:0 0 auto;height:clamp(300px,34vw,430px);z-index:-2;
  background-image:var(--art);
  background-size:cover;background-position:50% 42%;
  opacity:.9;}
/* the art dissolves into the page instead of ending on a hard line */
.has-art::after{
  content:"";position:absolute;inset:0 0 auto;height:clamp(300px,34vw,430px);z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(7,6,5,.55) 0%,
      rgba(7,6,5,.42) 26%,
      rgba(7,6,5,.72) 58%,
      rgba(7,6,5,.94) 84%,
      #070605 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(140,22,22,.22), transparent 62%);}
.has-art > .shell{position:relative;z-index:1;}

/* headings sit on the art,
so they carry their own shadow */
.has-art .s-head h2{
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 4px 22px rgba(0,0,0,.9),
    0 1px 0 rgba(255,232,190,.14),
    0 0 44px rgba(196,30,58,.3) !important;}
.has-art .s-head .s-sub{
  color:#e6dcc6 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.8);}
.has-art .s-head .s-kick{text-shadow:0 1px 3px rgba(0,0,0,.95);}
/* the crest seal would fight the art */
.has-art .s-head::before{opacity:.03 !important;}

section[data-art="roster"]{--art:url('/assets/art-roster.webp?v=0c24a5f4');}
section[data-art="gold"]{--art:url('/assets/art-gold.webp?v=fbd9b288');}
section[data-art="records"]{--art:url('/assets/art-records.webp?v=431be0d4');}
section[data-art="perks"]{--art:url('/assets/art-perks.webp?v=1ff4f352');}
section[data-art="warroom"]{--art:url('/assets/art-warroom.webp?v=9e7df505');}
section[data-art="divisions"]{--art:url('/assets/art-divisions.webp?v=40d78a93');}
section[data-art="gates"]{--art:url('/assets/art-gates.webp?v=c359754d');}

/* more room at the top of an art section so the image can breathe before the content lands */
.has-art{padding-top:clamp(52px,5.5vw,76px) !important;}

/* the hero art is the one piece that carries the whole page,
so it is not dimmed as hard */
.hero-battle{display:block !important;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;z-index:0;opacity:.95;}

/* ── THE HERO COPY NEEDS A FLOOR TO STAND ON ───────────────────────────────────────────────── */
/* With real art behind it the tagline and the lede landed on bright snow-lit rock and stopped being
   readable. Art that costs you your own copy is a bad trade,
so a soft scrim runs up the left side
   under the text column only: the picture keeps its brightness on the right where the banner and the
   fortress are,
and the words get a dark ground to sit on. */
.hero{position:relative;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,5,4,.92) 0%, rgba(6,5,4,.72) 26%, rgba(6,5,4,.28) 48%, transparent 66%),
    linear-gradient(180deg, rgba(6,5,4,.55) 0%, transparent 22%, transparent 62%, rgba(6,5,4,.85) 92%, #070605 100%);}
.hero-split,
.hero .hero-brand{position:relative;z-index:2;}
/* The scroll cue was in that list too, which turned its `position:absolute; bottom:22px` into
   position:relative, so instead of sitting at the hero's bottom edge it was shoved 22px UP from where
   it lay and hovered over the bottom of the Join the Guild button at every size. Scott caught it, 11 Oct 2026.
   Restoring absolute was not enough: on a short window the hero ends within 40px of the button, so a cue
   pinned to the hero's bottom still landed on it. It now sits IN FLOW under the content, centred, so it
   can never overlap whatever is above it. */
#scroll-cue{position:relative !important;left:auto !important;bottom:auto !important;transform:none !important;
  z-index:6;width:max-content;margin:14px auto 0;}
.hero p,
.hero .hero-lede{text-shadow:0 1px 4px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.8);}
.hero-logo{filter:drop-shadow(0 8px 30px rgba(0,0,0,.9));}
/* the gold card was translucent over a bright red banner; it gets its own ground */
.hero-tournament,
.hero-tourney-card{
  background:linear-gradient(180deg, rgba(20,10,10,.88), rgba(8,6,5,.94)) !important;
  backdrop-filter:blur(3px);
  border:1px solid rgba(202,160,86,.3) !important;
  box-shadow:0 18px 50px -24px #000, inset 0 1px 0 rgba(255,231,186,.1) !important;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   SURFACES. Scott: "stuff for like panes for backdrop of text ... make things blend together better
   and be like they are all less pieced together."

   The scenes gave each section its own picture; what was missing was a shared MATERIAL underneath
   everything. A scene has a subject and its own light,
which is wrong under a paragraph. A surface is
   flat,
evenly lit and empty in the middle,
so type can sit on it without fighting anything.

   Three of them do the cohesion work:
     the leather ground replaces flat black across the whole page,
so nothing floats on nothing
     the riveted iron plate becomes the actual skin of every card,
as a 9-slice so the rivets stay
       the right size no matter how big the card gets
     the hanging banner carries every section kicker,
so each heading arrives the same way
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE GROUND ────────────────────────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1500px 760px at 50% -8%, rgba(140,22,22,.13), transparent 62%),
    linear-gradient(180deg, rgba(11,9,8,.92), rgba(7,6,5,.96)),
    url('/assets/surf-tex-leather.webp?v=03edd46a') repeat !important;
  background-size:auto, auto, 420px 420px !important;}

/* ── THE CARD SKIN: one material,
9-sliced so the rivets never stretch ─────────────────────── */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.sn,
.rules > div,
.lb{
  border-style:solid !important;
  border-width:16px !important;
  border-image:url('/assets/surf-pane-iron.webp?v=44b87573') 88 fill / 16px / 0 stretch !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:0 2px 0 rgba(0,0,0,.6), 0 18px 40px -20px rgba(0,0,0,1) !important;}
/* the gloss cap still rides on top,
just inset past the metal border now */
.mesh > *::before,
.perk::before,
.rec-card::before,
.step::before,
.wr > div::before,
.wr-ranks > div::before,
.feature-card::before,
.sn::before,
.rules > div::before,
.season-card::before{inset:0 0 auto 0 !important;height:32% !important;border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,240,215,.05),transparent) !important;}
.mesh > *:hover,
.perk:hover,
.rec-card:hover,
.step:hover,
.feature-card:hover,
.rules > div:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(0,0,0,.6), 0 26px 52px -20px rgba(0,0,0,1),
             0 0 30px -12px rgba(202,160,86,.55) !important;}
/* portraits and band rows sit inside the metal,
so they lose their own rounding */
.rc-portrait{border-radius:0;}

/* ── SECTION KICKERS ARRIVE ON A HANGING BANNER ────────────────────────────────────────────── */
.s-head .s-kick{
  display:inline-block !important;
  position:relative;
  padding:16px 44px 26px !important;
  margin-bottom:2px !important;
  color:#f3e6cc !important;
  text-shadow:0 1px 3px rgba(0,0,0,.9) !important;}
.s-head .s-kick::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('/assets/surf-banner-cloth.webp?v=53ea51e8') center/100% 100% no-repeat;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.8));}
.s-head .s-num{vertical-align:top;padding-top:1.5em !important;}

/* ── THE MANIFESTO BELONGS ON PARCHMENT ────────────────────────────────────────────────────── */
.manifesto-section{
  border:0 !important;
  background:url('/assets/surf-pane-parch.webp?v=c36164bc') center/100% 100% no-repeat !important;
  box-shadow:0 20px 50px -24px rgba(0,0,0,1) !important;
  padding:clamp(46px,6vw,86px) clamp(44px,7vw,110px) !important;}
.manifesto-section p{color:#2a1d10 !important;text-shadow:none !important;}
.manifesto-section p:last-of-type{color:#4a3520 !important;}
.manifesto-section > div:first-child{background:none !important;}
.manifesto-section div[style*="color:var(--blood)"]{color:#7a1d1d !important;}
.manifesto-section div[style*="color:var(--gold)"]{color:#5c3f16 !important;text-shadow:none !important;}

/* ── BANNER FIT ────────────────────────────────────────────────────────────────────────────── */
/* The cloth is a fixed drawing stretched behind a variable-length kicker,
so it needs enough
   horizontal padding that the longest label still lands inside the fabric,
and enough clearance at
   the top of a section that the hanging rod is not cut off by the sticky nav. */
.s-head .s-kick{
  padding:18px 62px 30px !important;
  min-width:260px;
  font-size:.72rem !important;
  letter-spacing:.2em !important;}
.has-art{padding-top:clamp(74px,7vw,104px) !important;}
.s-head{margin-top:-6px;}

/* the rivets are bold; at card size a slightly thinner bezel keeps them from eating the content */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.sn,
.rules > div,
.lb{
  border-width:14px !important;
  border-image:url('/assets/surf-pane-iron.webp?v=44b87573') 88 fill / 14px / 0 stretch !important;}

/* ── THE RIVETS MUST REPEAT,
NOT STRETCH ───────────────────────────────────────────────────── */
/* border-image with `stretch` takes the source image's side strip and pulls it over the full height
   of the element. On a card that is fine. On the roster table,
which is hundreds of pixels tall,
it
   smeared the side rivets into long melted blobs down both edges. `round` repeats the strip at whole
   multiples instead,
so a rivet stays a rivet whatever the element does. */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.sn,
.rules > div{
  border-image:url('/assets/surf-pane-iron.webp?v=44b87573') 88 fill / 14px / 0 round !important;}
/* The roster is a different shape of problem: it is one very tall object,
and a repeating metal
   bezel around 126 rows is noise rather than craft. It gets the plate as a flat face with a plain
   gold edge,
so it still shares the material without wearing the whole frame. */
.lb{
  border:1px solid rgba(202,160,86,.34) !important;
  border-image:none !important;
  background:linear-gradient(180deg,#1a1512,#100d0b 40%,#0c0a09) !important;
  box-shadow:inset 0 1px 0 rgba(255,231,186,.08), 0 2px 0 rgba(0,0,0,.6),
             0 22px 48px -22px rgba(0,0,0,1) !important;}
.lb::before,
.lb::after{display:none !important;}

/* ── BORDER-IMAGE: FRAME FROM THE ART,
FACE FROM CSS ───────────────────────────────────────── */
/* `fill` makes border-image paint the source's CENTRE slice as the element's background too,
and
   border-image-repeat applies to that centre as well. So `round` (needed so the edge rivets repeat
   instead of smearing) was ALSO tiling the middle,
printing a grid of rivets across the face of
   every card. Visible immediately on the ledger's season cards.
   The two jobs get split: the art supplies the frame only,
no fill,
and the face is a plain gradient
   in the same palette. The rivets repeat correctly and the middle stays flat. */
.mesh > *,
.perk,
.rec-card,
.season-card,
.step,
.wr > div,
.wr-ranks > div,
.feature-card,
.sn,
.rules > div{
  border-image:url('/assets/surf-pane-iron.webp?v=44b87573') 88 / 14px / 0 round !important;
  background:linear-gradient(180deg,#1d1713 0%,#141010 46%,#0e0b0a 100%) !important;}

/* ── THE NEW HERO IS BRIGHTER,
SO THE SCRIM WORKS HARDER ───────────────────────────────────── */
/* The newer art put a gold moon and a lit snowfield where the older one had a dim blue field. Same scrim,
less
   effect: the tagline and the lede were sitting on bright ground again. The left wedge deepens and
   reaches slightly further across,
and the copy keeps its own shadow. The right side,
where the
   warlord and the burning fortress are,
is untouched. */
.hero::after{
  background:
    linear-gradient(100deg, rgba(5,4,3,.95) 0%, rgba(5,4,3,.82) 30%, rgba(5,4,3,.42) 52%, transparent 72%),
    linear-gradient(180deg, rgba(5,4,3,.6) 0%, transparent 20%, transparent 58%, rgba(5,4,3,.9) 90%, #070605 100%) !important;}
.tagline{text-shadow:0 2px 7px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,.95) !important;}
.hero p{text-shadow:0 1px 5px rgba(0,0,0,1), 0 2px 16px rgba(0,0,0,.9) !important;}


/* ── NAV LOGO: TEXT ────────────────────────────────────────────────────────────────────────── */
/* Reverted on Scott's call: "the logo at the top left now looks worst than before i almost
   preferred just the font then." The generated wordmark went back in the drawer rather than being
   argued for. It is still in /assets if a use for it turns up. */
.float-nav .fn-logo{margin-right:auto;display:flex;align-items:center;}
.float-nav .fn-logo a{text-decoration:none;font-family:'MedievalSharp',cursive;font-size:1.02rem;
  letter-spacing:.03em;line-height:1;transition:filter .2s;}
.float-nav .fn-logo a:hover{filter:brightness(1.15);}
.float-nav .fn-logo .g{color:var(--blood);}
.float-nav .fn-logo .r{color:var(--gold);}

/* the logo has to outrank the nav links beside it */
/* "GORERANK" at 1.02rem was losing to HALL OF RECORDS at .78rem,
because the links are uppercase
   with .1em tracking and the logo was neither. Bigger,
spaced,
and given a little weight so the eye
   lands on the name first. This is hierarchy,
not taste: a logo that reads quieter than the menu
   next to it is the wrong way round whatever typeface it is set in. */
.float-nav .fn-logo a{font-size:1.32rem !important;letter-spacing:.04em !important;}
.float-nav .fn-logo .g{text-shadow:0 0 18px rgba(196,30,58,.5), 0 1px 2px rgba(0,0,0,.9);}
.float-nav .fn-logo .r{text-shadow:0 0 18px rgba(202,160,86,.45), 0 1px 2px rgba(0,0,0,.9);}
@media(max-width:820px){ .float-nav .fn-logo a{font-size:1.1rem !important} }

/* ── THE NAV BUTTON,
FORGED RATHER THAN MOULDED ────────────────────────────────────────────── */
/* Scott: "the join us button looks off compared to the rest now."
   It was the only saturated,
rounded,
glossy thing in a bar otherwise made of carved gold,
bone and
   dark iron: a candy pink-red pill with a plastic sheen cap and the only pure white text on the page.
   The gel recipe is right for a big page CTA sitting on artwork. In a metal nav strip it reads as a
   web button that wandered in.
   Rebuilt from the site's own materials: deep forged crimson instead of pink,
a gold edge,
gold
   MedievalSharp type instead of white,
a thin lit top edge instead of a gloss cap,
and the corner
   radius pulled back to match everything else. It still reads as the one thing to press,
because it
   is the only object in the bar with a border and a ground. */
.fn-login-btn{
  background:linear-gradient(180deg,#8f1a22 0%,#6d1119 48%,#4a0b13 100%) !important;
  border:1px solid rgba(202,160,86,.55) !important;
  border-radius:3px !important;
  color:#f0d9a4 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95) !important;
  font-family:'MedievalSharp',cursive !important;
  font-size:.82rem !important;
  letter-spacing:.12em !important;
  padding:11px 26px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.22),
    inset 0 -1px 0 rgba(0,0,0,.75),
    0 1px 0 rgba(0,0,0,.7),
    0 10px 22px -12px rgba(0,0,0,.95) !important;}
/* the gloss cap is what made it look moulded; a metal plate does not have one */
.fn-login-btn::after{display:none !important;}
.fn-login-btn:hover{
  filter:none !important;
  transform:translateY(-1px);}
.fn-login-btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,214,150,.12) !important;}

/* ── THE NAV BUTTON,
MEASURED ──────────────────────────────────────────────────────────────── */
/* Scott: "it is like not ligned well ... tone it down a smudge."
   Measured rather than eyeballed,
because it turned out not to be an alignment bug at all: every
   element in the bar centres on exactly 33px,
the button included. What was wrong is that the button
   was 40px tall in a bar where everything else is 32px,
so it bulged out of the optical line,
and its
   type was set larger and wider-tracked than the links beside it (15.2px/1.82 against 14.4px/1.44),
so it was shouting over its neighbours as well as standing proud of them.
   Now it matches the links exactly on size and tracking and sits at the same height as the text
   around it. It stays the CTA on ground and edge alone,
which is enough. */
.fn-login-btn{
  font-size:.78rem !important;
  letter-spacing:.1em !important;
  padding:8px 22px !important;
  min-height:0 !important;
  line-height:1.15 !important;
  color:#e9d4a6 !important;
  background:linear-gradient(180deg,#7e1a21 0%,#611118 50%,#430b12 100%) !important;
  border-color:rgba(202,160,86,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.16),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 1px 0 rgba(0,0,0,.6),
    0 8px 18px -12px rgba(0,0,0,.9) !important;}
.fn-login-btn:hover{
  background:linear-gradient(180deg,#96222a 0%,#74151e 50%,#520d15 100%) !important;
  border-color:rgba(202,160,86,.75) !important;
  color:#fbeac4 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.24),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 1px 0 rgba(0,0,0,.6),
    0 12px 24px -12px rgba(0,0,0,.95),
    0 0 18px -9px rgba(202,160,86,.6) !important;}

/* ── THE STATS BAND WAS BROWN ──────────────────────────────────────────────────────────────── */
/* Scott: "the stats in middle are on brown background". Three different .banner rules had
   accumulated,
one of them a red wash left from an older design,
and the winner was #171310,
which
   is a warm brown-black against a page ground that is neutral. It reads as a different surface
   dropped into the middle of the page. It takes the same leather ground as everything else now,
so
   it belongs to the page instead of sitting on it. */
.banner{
  max-width:none !important;
  background:
    linear-gradient(180deg, rgba(10,9,8,.9), rgba(7,6,5,.95)),
    url('/assets/surf-tex-leather.webp?v=03edd46a') repeat !important;
  background-size:auto, 420px 420px !important;
  border-block:1px solid rgba(202,160,86,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,231,186,.05), 0 18px 40px -26px rgba(0,0,0,1) !important;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   ONE BUTTON FAMILY. Scott: "the buttons are all so different from each other which one is the best
   one that we should use everywhere."

   There were three materials doing the same job: a glossy gold gel on the page CTAs,
an outlined
   ghost,
and the forged crimson plate in the nav. The forged one is the keeper. The gel is a
   web-2.0 recipe and it is the same gloss that kept reading as plastic everywhere else it went; the
   nav button only started belonging once the gloss came off it.

   So: ONE material,
forged,
in two roles.
     PRIMARY   gold plate,
dark type          the action you want taken
     SECONDARY gold outline on dark           the alternative,
never competing
   The nav keeps crimson,
which is a role difference rather than an inconsistency: it marks the
   permanent brand action in the bar,
while gold marks the action on the page you are looking at.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.cta,
.hero-enter-btn{
  position:relative;
  border-radius:3px !important;
  font-family:'MedievalSharp',cursive;
  text-transform:uppercase;
  font-size:.84rem !important;
  letter-spacing:.14em !important;
  padding:13px 30px !important;
  color:#2a1c07 !important;
  text-shadow:0 1px 0 rgba(255,238,200,.3) !important;
  background:linear-gradient(180deg,#e3c078 0%,#c79b47 50%,#9c7327 100%) !important;
  border:1px solid #6d4c14 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.5),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 0 rgba(0,0,0,.6),
    0 10px 22px -12px rgba(0,0,0,.95) !important;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease !important;}
/* no gloss cap: that is the thing that made every one of these look moulded */
.cta::after,
.hero-enter-btn::after{display:none !important;}
.cta:hover,
.hero-enter-btn:hover{
  transform:translateY(-1px);
  filter:none !important;
  background:linear-gradient(180deg,#f0d191 0%,#d5a950 50%,#a87e2c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,226,.6),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 0 rgba(0,0,0,.6),
    0 14px 28px -12px rgba(0,0,0,.95),
    0 0 24px -9px rgba(202,160,86,.8) !important;}
.cta:active,
.hero-enter-btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5) !important;}

.cta.ghost{
  color:#e3c98f !important;
  text-shadow:0 1px 2px rgba(0,0,0,.9) !important;
  background:linear-gradient(180deg,rgba(202,160,86,.1),rgba(0,0,0,.35)) !important;
  border:1px solid rgba(202,160,86,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,231,186,.12),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 1px 0 rgba(0,0,0,.5) !important;}
.cta.ghost:hover{
  color:#fbeac4 !important;
  border-color:rgba(202,160,86,.8) !important;
  background:linear-gradient(180deg,rgba(202,160,86,.18),rgba(0,0,0,.3)) !important;
  box-shadow:inset 0 1px 0 rgba(255,231,186,.2), 0 1px 0 rgba(0,0,0,.5),
             0 0 20px -9px rgba(202,160,86,.7) !important;}
.cta.sm{font-size:.74rem !important;padding:9px 20px !important;}
.cta.xs{font-size:.68rem !important;padding:7px 15px !important;}

/* the class filters join the same family at their own size */
.lb-filter-btn{border-radius:3px !important;}
.lb-filter-btn::after{display:none !important;}
.lb-filter-btn.active{
  background:linear-gradient(180deg,#e3c078 0%,#c79b47 50%,#9c7327 100%) !important;
  border-color:#6d4c14 !important;color:#2a1c07 !important;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.5), 0 1px 0 rgba(0,0,0,.6) !important;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE MONUMENT BAND. Scott: "the middle part where those metrics exist and where the scrolling text
   is needs a huge revamp."

   It was the last flat thing on the page,
and it showed: a narrow brown strip with dead black either
   side,
five numbers in a plain grid,
a realm name sitting among them as though it were a metric,
and
   a bare text marquee cut off at both edges. Two pieces of cinematic art above and below it and a
   spreadsheet in between.

   It is a monument now. The numbers are chiselled into a granite wall with lit niches behind them,
full bleed,
and the ticker runs along a riveted iron band underneath with embers glowing through
   from below. Same two jobs,
same data,
but the band stops being a table and starts being part of
   the building.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.banner{
  position:relative;
  max-width:none !important;
  border:0 !important;
  padding:clamp(34px,4vw,54px) 0 clamp(30px,3.6vw,46px) !important;
  background:none !important;
  box-shadow:none !important;
  isolation:isolate;}
.banner::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/assets/art-plinth.webp?v=b4813bbb') center 38% / cover no-repeat;}
/* the niches are lit; the type needs the wall darkened without losing them */
.banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,5,4,.9) 0%, rgba(6,5,4,.62) 24%, rgba(6,5,4,.66) 74%, rgba(6,5,4,.94) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(6,5,4,.5) 100%);}
.banner .stats{
  max-width:var(--shell);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:none !important;}
.banner .stat{
  background:none !important;box-shadow:none !important;
  text-align:center;padding:0 clamp(8px,1.4vw,18px);position:relative;}
/* carved separators between the niches */
.banner .stat + .stat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(202,160,86,.28),transparent);}
.banner .stat-n{
  font-family:'MedievalSharp',cursive !important;
  font-size:clamp(1.9rem,3.6vw,3rem) !important;
  line-height:1 !important;
  color:#f0d8a0 !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.9),
    0 3px 8px rgba(0,0,0,.95),
    0 -1px 0 rgba(255,232,190,.18),
    0 0 40px rgba(202,160,86,.3) !important;}
.banner .stat-l{
  font-family:'MedievalSharp',cursive !important;
  font-size:.7rem !important;text-transform:uppercase;letter-spacing:.2em !important;
  color:#c3b291 !important;margin-top:11px !important;
  text-shadow:0 1px 3px rgba(0,0,0,.95) !important;}
@media(max-width:860px){
  .banner .stats{grid-template-columns:repeat(2,1fr);row-gap:clamp(22px,4vw,32px)}
  .banner .stat:last-child{grid-column:1/-1}
  .banner .stat + .stat::before{display:none}
}

/* ── THE TICKER RUNS ON IRON ───────────────────────────────────────────────────────────────── */
.ticker-wrap{
  position:relative;max-width:none !important;
  padding:clamp(13px,1.6vw,19px) 0 !important;
  border-top:1px solid rgba(0,0,0,.8) !important;
  border-bottom:1px solid rgba(0,0,0,.8) !important;
  background:none !important;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.ticker-wrap::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/assets/art-tickerband.webp?v=87fa659e') center / cover repeat-x;}
.ticker-wrap::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,5,4,.72),rgba(6,5,4,.58) 50%,rgba(6,5,4,.78));}

/* ── THE MONUMENT,
EVENED UP ───────────────────────────────────────────────────────────────── */
/* Two things broke the rhythm of the row. "Destromath" is a WORD sitting among numerals,
so at the
   same size it ran nearly twice as wide as its neighbours and pulled the whole band off balance; it
   is identity rather than a metric and is sized as such. And "Highest Rating Ever" was the only
   label long enough to wrap,
which dropped one column's baseline below the other four. The labels
   share a fixed block now so a wrap costs nothing. */
.banner .stat:nth-child(3) .stat-n{
  font-size:clamp(1.15rem,2vw,1.62rem) !important;
  letter-spacing:.04em;
  padding-top:.42em;}
.banner .stat-l{
  min-height:2.6em;
  display:flex;align-items:flex-start;justify-content:center;
  line-height:1.3 !important;}
.banner .stat-n{min-height:1em;display:block;}

/* ── BLACK,
AND LET THE TYPE DO IT ─────────────────────────────────────────────────────────── */
/* Scott: "Not working for me... i am ok with solid black if the font and text is really nice... i
   like the font size and text style i think its your best version yet... but the ticker font looks
   like SHIT."
   So the granite wall and the iron band come out and the typography stays exactly as it is. The art
   was competing with the numbers rather than seating them: a lit niche behind a figure is a second
   thing to look at,
and this band only has one job. Between two pieces of cinematic artwork,
a black
   band is a rest,
not a gap.
   The ticker was the real offender. It was running in Crimson Text,
a book serif,
at nearly a
   full rem,
which is the face for paragraphs and looks like a paragraph that escaped. It takes the
   same treatment as the stat labels underneath it now: MedievalSharp,
uppercase,
tracked out,
small
   and quiet,
so the strip reads as part of the same object as the numbers above it. */
.banner::before,
.banner::after{display:none !important;}
.banner{
  background:linear-gradient(180deg,#070605,#050404 55%,#070605) !important;
  border-top:1px solid rgba(202,160,86,.16) !important;
  border-bottom:1px solid rgba(202,160,86,.1) !important;}

.ticker-wrap::before,
.ticker-wrap::after{display:none !important;}
.ticker-wrap{
  background:linear-gradient(180deg,#050404,#070605) !important;
  border-top:1px solid rgba(202,160,86,.1) !important;
  border-bottom:1px solid rgba(202,160,86,.16) !important;
  padding:clamp(12px,1.4vw,16px) 0 !important;}
.ticker{gap:clamp(40px,4vw,64px) !important;}
.ticker-item{
  font-family:'MedievalSharp',cursive !important;
  font-size:.78rem !important;
  text-transform:uppercase !important;
  letter-spacing:.17em !important;
  color:#b9ab8c !important;
  text-shadow:0 1px 2px rgba(0,0,0,.9) !important;
  gap:11px !important;}
.ticker-dot{width:4px !important;height:4px !important;box-shadow:0 0 7px currentColor !important;}
@media(max-width:640px){ .ticker-item{font-size:.72rem !important;letter-spacing:.13em !important} }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   DESIGN AUDIT FIXES,
30 Sep 2026. An adversarial design review found what was still wrong after a
   night of iterating. These are its top findings,
in its own priority order.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE NEON GOES ──────────────────────────────────────────────────────────────────────── */
/* Six glowing tier-coloured band headers and six glowing rank swatches were the only saturated
   rainbow left on the page,
and the GLOW is what pushed them from colour coding into RGB. Pure
   #1EFF00 with a bloom filter on forged iron is precisely the "kid-like" read.
   The tier ramp is muted onto metal,
the glows are gone,
and the roster stops saying the same tier
   three times per row: the band above already names it,
so the numeral keeps the colour and the
   badge goes quiet. Colour stops being information the moment it is redundant. */
.lb-band-n{
  color:#e3d6b8 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.9) !important;}
.lb-band{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--bc) 55%, #6b5a3a), var(--lip) !important;}
.wr-ranks .rank .swatch{box-shadow:none !important;opacity:.85;}
.wr-ranks .rank .rn{filter:saturate(.72) brightness(1.06);}
.lb-tier-badge{
  color:#c9bda4 !important;
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(202,160,86,.28) !important;}
.lb-rating-num{filter:saturate(.78) brightness(1.08);}
.lb-name{filter:saturate(.82);}
/* one green for "paid",
not two */
.rc-sgold.paid,
.ev.good,
.lb-live{color:#7dc87d !important;}
.lb-live i{background:#7dc87d !important;box-shadow:0 0 6px rgba(125,200,125,.7) !important;}
/* strays that belong to no palette */
.lb-honor{color:var(--dim) !important;}

/* ── 3a. DEAD WEIGHT AND SYNTHESISED BOLD ──────────────────────────────────────────────────── */
/* MedievalSharp ships ONE weight. Every font-weight:700/900 on it made the browser synthesise bold,
which is the fuzzy doubled stroke that made small headings look muddy. And tabular-nums was
   sprayed across ~15 selectors on a face that has no tabular figures: cargo cult,
so the figures
   still wobbled. Both removed; the numerals that genuinely need to line up get a face that can. */
.cta,
.cta.ghost,
.fn-login-btn,
.lb-rating-num,
.lb-name,
.lb-band-n,
.s-head h2,
h1,
.rc-name,
.rc-peak,
.sn h3,
.season-card h3,
.card-title,
.perk h3,
.step .t,
.rules h3,
.banner .stat-n,
.lb-num b,
.rc-sname,
.lb-rank,
.lb-bench-head b{
  font-weight:400 !important;
  font-synthesis-weight:none;}
/* figures that must align get a face with real tabular numerals */
.banner .stat-n,
.lb-rating-num,
.lb-num b,
.rc-peak,
.sc-num .v,
.num{
  font-variant-numeric:tabular-nums lining;
  font-feature-settings:"tnum" 1,"lnum" 1;}

/* ── 3b. THE TICKER GOES BACK TO A READING FACE ────────────────────────────────────────────── */
/* The audit caught me contradicting myself: the legibility pass diagnosed wide-tracked small
   uppercase as one of the least readable things typography can do,
and then I set the one element
   that SCROLLS in exactly that. Moving text has less time to be read than static text,
not more.
   Crimson Text,
sentence case,
no tracking. */
.ticker-item{
  font-family:'Crimson Text',Georgia,serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:.95rem !important;
  color:#cec2a6 !important;}

/* ── 3c. THE CREST THAT WAS DIMMED TO INVISIBILITY ─────────────────────────────────────────── */
/* An element deliberately rendered at 3% opacity is dead weight,
not subtlety. It is off on art
   sections rather than invisible on them. */
.has-art .s-head::before{display:none !important;}

/* ── 2. ONE PANEL,
INSTEAD OF NINE HAND-BUILT ONES ─────────────────────────────────────────── */
/* The audit's highest-impact finding,
and the one that matched Scott's own words most exactly. Nine
   blocks on the page were hand-built with their own `border:1px solid rgba(...)` and gradient rather
   than taking the material every other card uses: the hero tournament card,
the three apply cards,
the gold-rules panel,
both divisions cards (one of them the only dashed border on the entire
   site),
the Discord card and the invite band. They sat in the hero and the apply block,
which is
   the first thing anyone sees. Everything else got a material; these did not,
and that IS the
   "pieced together" look,
still rendered.
   They are .panel now. Structural inline styles (layout,
flex,
position) stayed; every decorative
   one was deleted,
because deciding what a surface looks like is the system's job,
not the tag's. */
.panel{
  position:relative;
  border:1px solid rgba(202,160,86,.26);
  background:linear-gradient(180deg,#1d1713 0%,#141010 46%,#0e0b0a 100%);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:
    inset 0 1px 0 rgba(255,231,186,.08),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.55),
    0 16px 34px -20px rgba(0,0,0,1);}
.panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:30%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,215,.05),transparent);}
.panel > *{position:relative;}
/* the one panel that is deliberately a different material stays that way */
.manifesto-section.panel{background:url('/assets/surf-pane-parch.webp?v=c36164bc') center/100% 100% no-repeat !important;
  border:0 !important;}
/* the PvE slot is "forming now"; it earns an accent,
not a different border style */
#divisions-section .panel:nth-of-type(2){border-color:rgba(202,160,86,.42);}

/* ── EQUAL COLUMNS, ACTUALLY ───────────────────────────────────────────────────────────────── */
/* `repeat(5,1fr)` is `repeat(5,minmax(auto,1fr))`, so a track never shrinks below its content and
   the widest figure steals space from the rest: the band was running 206/206/206/206/268 and the
   columns visibly drifted as the gold counter animated up through its digits. Caught by a
   before/after computed-style diff, where it showed as the stats moving 5px between two runs that
   should have been identical. minmax(0,1fr) makes them genuinely equal. */
.banner .stats{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
@media(max-width:860px){ .banner .stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }

/* ── THE HERO ENDS ABOVE THE FOLD ──────────────────────────────────────────────────────────── */
/* It was a fixed 1049px tall: `padding:280px 20px 40px` with no min-height, so its size had nothing
   to do with the window it was in. On Scott's tall monitor the stats band cleared the fold by
   accident; on a 1080p laptop it sat 149px below it, on a small laptop 269px, and on a phone 198px.
   So most visitors saw artwork and a button and no evidence the site was live.
   The hero is measured against the viewport now and stops short of filling it, leaving a deliberate
   ~140px of the stats band showing. svh rather than vh because vh on mobile is the height with the
   browser UI hidden, which is exactly the lie that pushes a band back under the fold on a phone.
   The top padding follows the same measure instead of being a fixed 280, so the composition holds
   its proportions at any height rather than only at the one it was authored on. */
.hero{
  min-height:calc(100svh - 140px) !important;
  padding-top:clamp(120px, 26svh, 300px) !important;
  padding-bottom:clamp(28px, 4svh, 48px) !important;
  box-sizing:border-box;
}
@supports not (height: 100svh){
  .hero{min-height:calc(100vh - 140px) !important}
}
/* short windows: the art still needs room to read, so the floor stops it collapsing */
@media (max-height:620px){
  .hero{min-height:560px !important;padding-top:96px !important}
}

/* min-height could not do it alone: the CONTENT was taller than the window. The logo is the single
   biggest item in the hero at 423px, then the tagline, the lede and the button below it, so on a
   900px laptop the stack came to 999px before any padding. Capping the logo against the viewport is
   what actually makes the composition fit; the padding then has room to breathe rather than being
   the only lever. */
.hero-logo img{
  max-height:min(34svh, 420px) !important;
  width:auto !important;
  height:auto !important;
}
.hero{padding-top:clamp(64px, 12svh, 210px) !important}
.hero .tagline{margin:clamp(8px,1.4svh,16px) 0 clamp(12px,2svh,26px) !important}
.hero p{margin-block:clamp(6px,1.2svh,14px) !important}
.hero .cta{margin-top:clamp(10px,1.8svh,22px)}
@media (max-height:620px){ .hero-logo img{max-height:44svh !important} }

/* ── PHONE: the hero holds two stacked blocks, so it is tightened rather than reflowed ─────── */
/* At 390x844 the hero carries a 564px brand column AND the 333px gold card, plus 135px of padding.
   The budget to leave the stats band peeking is 704px, so something has to give. The card is the
   thing that says what this guild pays, which is the whole pitch, so it stays; the padding and the
   logo come down instead and the lede loses a line. That gets most of the way there. */
@media (max-width:640px){
  .hero{padding-top:clamp(40px, 7svh, 84px) !important;
        padding-bottom:clamp(18px,2.5svh,30px) !important}
  .hero-logo img{max-height:min(23svh, 240px) !important}
  .hero .tagline{margin:6px 0 10px !important;font-size:.72rem}
  .hero p{margin-block:6px !important;font-size:.92rem}
  .hero-split{gap:clamp(12px,2svh,20px)}
  .hero-tournament{padding:clamp(16px,2.4vw,22px) !important}
  .hero-tournament .cta{padding:10px 20px !important}
}

/* the last 60px on a phone: the card keeps its number, its promise and its button, and loses the
   record footnote, which is the one line that is also stated on the Hall of Records below */
@media (max-width:640px){
  .hero-tournament em, .hero-tournament i,
  .hero-tournament div[style*="italic"]{display:none !important}
  #splash-gold{font-size:2rem !important}
  .hero-tournament p{font-size:.88rem !important;line-height:1.5 !important;margin-block:8px !important}
  .hero-logo img{max-height:min(20svh, 210px) !important}
}

/* ── THE CREST WATERMARK GOES ENTIRELY ─────────────────────────────────────────────────────── */
/* It was switched off on .has-art sections and left on the two that have no art, so it only ever
   appeared behind "Why Gore Rank" and the apply block, which is the opposite of a system: an
   ornament that shows up in exactly the places with the least going on reads as a stain, not a seal.
   Scott saw it as the old skull logo bleeding through. The asset stays in /assets for a use where it
   is the subject rather than a ghost behind type. */
.s-head::before{display:none !important}

/* ── FEATURE ICONS ─────────────────────────────────────────────────────────────────────────── */
/* Scott: "small text logos next to the words ... i dont like those." They were thin
   28px line-art SVGs drawn in CSS colours, which is the generic-diagram look that reads as a
   developer's placeholder next to carved plate and painted key art. These are forged objects in the
   same material as the rest of the site: an astrolabe for the analytics, a chained stone tablet for
   the permanent record, a caged lantern for the always-on watch. An icon has one job at 46px, which
   is to be a readable silhouette, so each is a single centred object rather than a small scene. */
.feat-icon{
  width:46px;height:46px;flex-shrink:0;margin-top:1px;display:block;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.85));
  transition:transform .25s ease, filter .25s ease;
}
.feature-card:hover .feat-icon{
  transform:translateY(-2px) scale(1.04);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.9)) drop-shadow(0 0 12px rgba(202,160,86,.45));
}
.features-grid .feature-card{gap:18px}

/* ── PERK ICONS ────────────────────────────────────────────────────────────────────────────── */
/* The last six line-art SVGs on the page, replaced with the same forged objects as the three
   feature icons so all nine read as one commissioned set rather than two batches: hammer and anvil
   for the repairs, a spilling coin pouch for the gold, a stone obelisk for the permanent peak, a
   winged rank insignia, a clockwork gear for the sync that needs no input, and a spiked crown on a
   laurel of blades. Generated against the same style string as the feature three, which is why they
   sit together. */
img.pk-ico{
  width:52px;height:52px;display:block;margin-bottom:14px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
  transition:transform .25s ease, filter .25s ease;
}
.perk:hover img.pk-ico{
  transform:translateY(-3px) scale(1.05);
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(202,160,86,.5));
}

/* ── THE PERK TAG IS A FOOTER, NOT A TRAILING WORD ─────────────────────────────────────────── */
/* Scott, 30 Sep 2026: "the buttom part like guild bank funded or tracked in the open should be
   centered better." It was an inline-block sitting immediately after the paragraph, so it landed
   wherever that paragraph happened to stop. Six cards, six lengths of copy, six different badge
   heights: the plates were flush and the stamps inside them were ragged, which is what made the row
   read as assembled rather than designed.
   The card becomes a column, the paragraph absorbs the slack, and the tag is pinned to the bottom
   and centred on a hairline. Every badge in a row now sits on one line no matter how long the copy
   above it runs, and the same fix holds when the grid reflows to two-up or one-up. */
.perk{
  display:flex;
  flex-direction:column;}
.perk p{flex:1 1 auto;}
.perk .pk-tag{
  align-self:center;
  margin:26px auto 0 !important;
  text-align:center;}
/* the rule runs edge to edge inside the bezel: .perk clips at its padding box, so an over-wide
   line is trimmed to the card rather than needing to know the card's width */
.perk .pk-tag::after{
  content:"";position:absolute;left:50%;top:-14px;
  width:760px;margin-left:-380px;height:1px;
  background:rgba(202,160,86,.2);
  pointer-events:none;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE FOOTER
   Scott, 30 Sep 2026: "make the bottom footer super epic with a dramatic emotional scene of the
   horde being victorious over the alliance and make the typography beautiful at the bottom."

   What was there: a 12px-padded centred stack of 0.72rem links on flat black, a stylesheet <link>
   loaded from inside the body, a divider image carrying four margin declarations that fought each
   other, and a copyright line at rgba(255,255,255,.08) which is invisible on purpose. Every
   section above it had been given a commissioned band and a composition. The footer had never been
   touched, so the page spent 16,000 pixels building to something and then just stopped.

   Now it closes the way it opened: one wide painted band, the mark at full size over it, one line
   of copy, the two buttons from the same family as everywhere else, and then a quiet base strip
   for the things people actually click.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.site-foot{
  border:0 !important;background:#070605;position:relative;z-index:2;
  text-align:initial;padding:0;font-size:1rem;color:var(--bone);
  /* stated, not inherited: no ancestor rule and no future one can narrow or centre the footer.
     overflow-x clips the 100vw bleed layers so a desktop scrollbar cannot make the page scroll
     sideways. */
  width:100%;max-width:none;margin-inline:0;overflow-x:hidden;}

/* ── THE BAND ─────────────────────────────────────────────────────────────────────────────── */
/* NO grid here, deliberately. This was `display:grid;place-items:center`, and on WebKit that
   narrowed the painting to about 510px in a 972px window: an absolutely positioned child of a grid
   container takes its containing block from the grid AREA, the implicit column was sized to the
   fit-content of the only in-flow item (the line of copy), and `width:100%` on the image then
   resolved against THAT instead of the band. Chrome resolved it against the padding box and looked
   perfect, which is why it shipped. A plain block has no grid area to be mistaken for, so the
   image can only ever measure itself against the band. Centring is done by padding and by
   `margin:0 auto` on the content, neither of which creates a containing block. */
/* ── THE ART IS PAINTED THE WAY EVERY OTHER BAND ON THIS SITE PAINTS ITS ART ────────────────
   Second attempt. The first was an <img class="foot-art"> absolutely positioned at inset:0 with
   width:100%. On Chrome that measured the full band at every width I tested. On Scott's Safari it
   measured about 500px in a 1170px page, twice: once when .foot-scene was display:grid, and again
   after the grid came out. Measured off his screenshots both times, in pixels, not guessed: the
   section band above it ran 2388 device px and the footer ran 999.

   So stop debugging a bespoke mechanism. `.has-art::before` paints the seven section bands with a
   background-image on an absolutely positioned pseudo-element, and those render full bleed on the
   SAME screenshot that shows this one broken. That is the proof. The footer now uses the identical
   mechanism, which also means the site has one way of painting a band instead of two.

   ::before is the art, ::after is the scrim, and the gold hairline moves up to .site-foot. */
/* THIRD attempt, and this one stops relying on inheritance. Scott, after two failed fixes:
   "the picture is within a box, and it needs to be outside of that box." He was right, and the
   pixels said so: sampling his screenshot, the bars either side of the art are exactly #070605,
   the footer's own background colour, and the painted part measured about 522 CSS px, which is the
   width of the longest line of copy inside it. A band the width of its own text is a band that was
   sized by its contents rather than by the page.

   So nothing here asks an ancestor how wide it is. The band states its own width, and the art and
   the scrim are both 100vw, which is the VIEWPORT, not the containing block. Whatever box any
   parent turns out to impose on any engine, a 100vw layer cannot be narrower than the screen. */
.foot-scene{
  position:relative;isolation:isolate;display:block;
  width:100%;max-width:none;margin-inline:0;
  min-height:clamp(400px,36vw,512px);
  padding:clamp(40px,4.2vw,66px) var(--gut);}
.foot-scene::before{
  content:"";position:absolute;top:0;bottom:0;z-index:-2;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  background-image:url('/assets/art-footer.webp?v=f7a82e10');
  background-size:cover;background-position:50% 42%;background-repeat:no-repeat;}
/* two scrims doing two jobs: the vertical one hands the page off into the art and the art off into
   the base strip, the radial one buys contrast under the type without flattening the whole picture */
.foot-scene::after{
  content:"";position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  background:
    radial-gradient(74% 62% at 50% 44%, rgba(6,5,4,.86) 0%, rgba(6,5,4,.56) 46%, transparent 78%),
    linear-gradient(180deg, #0a0908 0%, rgba(10,9,8,.5) 16%, rgba(8,7,6,.16) 40%,
                    rgba(7,6,5,.62) 78%, #070605 100%);}
/* the gold hairline that used to be .foot-scene::after. Same line, same place, now owned by the
   footer itself so the band's two pseudo-elements are free for the art and the scrim. */
.site-foot::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hair-hot) 18%,var(--hair-hot) 82%,transparent);}

/* ── THE TYPE ─────────────────────────────────────────────────────────────────────────────── */
.foot-hero{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto;}
.foot-kick{
  font-family:'MedievalSharp',cursive;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.28em;text-indent:.28em;color:var(--blood);
  text-shadow:0 0 18px rgba(196,30,58,.6), 0 2px 4px rgba(0,0,0,.9);
  margin-bottom:clamp(10px,1.2vw,15px);}
.foot-mark{
  font-family:'MedievalSharp',cursive;line-height:.96;
  font-size:clamp(2.9rem,7.6vw,5.2rem);letter-spacing:.02em;
  text-shadow:0 3px 0 rgba(0,0,0,.65), 0 10px 40px rgba(0,0,0,.95);}
.foot-mark .fm-a{color:var(--blood);}
.foot-mark .fm-b{color:var(--gold);}
/* the same drawn filigree the section heads use, so the last ornament on the page is one we
   already own rather than a new one invented for the bottom */
.foot-orn{
  width:270px;max-width:70%;height:64px;margin:clamp(2px,.6vw,8px) auto clamp(8px,1.1vw,13px);
  background:url('/assets/divider-trim.webp?v=e0c23e23') center/contain no-repeat;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.95)) sepia(.42) saturate(1.7) hue-rotate(-10deg);}
.foot-line{
  font-family:'Crimson Text',serif;font-style:italic;font-size:1.06rem;line-height:1.74;
  color:var(--bone);max-width:54ch;margin:0 auto clamp(22px,2.4vw,30px);text-wrap:balance;
  text-shadow:0 2px 10px rgba(0,0,0,.95);}
.foot-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* ── THE BASE STRIP ───────────────────────────────────────────────────────────────────────── */
.foot-base{background:#070605;padding-block:clamp(30px,3.4vw,44px) clamp(24px,2.6vw,32px);}
.foot-nav{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,2.2vw,30px);}
.foot-nav a{
  font-family:'MedievalSharp',cursive;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim);text-decoration:none;
  padding-block:4px;transition:color .2s ease;}
.foot-nav a:hover{color:var(--gold);}
.foot-rule{
  height:1px;margin:clamp(20px,2.4vw,28px) auto;max-width:640px;
  background:linear-gradient(90deg,transparent,var(--hair) 24%,var(--hair) 76%,transparent);}
.foot-meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px 26px;flex-wrap:wrap;
  font-family:'MedievalSharp',cursive;font-size:.72rem;letter-spacing:.11em;
  color:rgba(232,223,201,.5);}
.foot-meta span{text-wrap:balance;}
.site-foot .bpd-sig-wrap{margin-top:clamp(16px,2vw,22px);text-align:center;}
@media(max-width:640px){
  .foot-meta{justify-content:center;text-align:center;}
  .foot-nav{gap:12px 18px;}
  .foot-scene{min-height:380px;}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE PLAYER PANEL
   Scott, 30 Sep 2026: "when you select someone from the roster it opens up a new window and it
   lays over the website ... it doesnt react nicely."

   He was describing three real faults, not a preference:
   1. There was no PANEL. `.profile-content` had no background of its own, so the sections floated
      on a .92 black scrim with the roster showing through the remaining 8% and the blur. Every
      other surface on this site is an iron plate with a bezel; this one had no edge at all, which
      is exactly what "laid over the website" means.
   2. Fourteen sections in one 3,719px scroll, and the close button was absolutely positioned
      INSIDE that scroller, so it left the screen after the first flick. There was no Escape key.
   3. The class-colour rainbow at full strength: a green name, a pink honor figure, a blue rating,
      a green win rate and five grade letters in five different colours, all at once.

   Now it is a framed panel that scrolls internally, with a bar that stays put, tabs instead of one
   marathon, and colour back on the name where it carries meaning.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.profile-overlay.open{display:grid;place-items:center;overflow:hidden;padding:clamp(0px,3vh,40px) clamp(0px,3vw,32px);}
.profile-bg{background:rgba(4,3,3,.86) !important;backdrop-filter:blur(10px) saturate(.7);}

.profile-panel{
  position:relative;z-index:2;
  width:min(1020px,100%);height:auto;max-height:min(920px,100%);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--plate-r);
  border:14px solid transparent;
  border-image:url('/assets/surf-pane-iron.webp?v=44b87573') 88 / 14px / 0 round;
  background:linear-gradient(180deg,#171310 0%,#100d0b 46%,#0b0908 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,1), 0 0 0 1px rgba(202,160,86,.16);}

/* ── THE BAR THAT STAYS ───────────────────────────────────────────────────────────────────── */
.pf-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:13px clamp(14px,2vw,22px);
  border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(255,240,215,.05),transparent);}
.pf-bar-id{min-width:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pf-bar-name{font-family:'MedievalSharp',cursive;font-size:1.12rem;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-bar-sub{font-size:.78rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-close{
  position:static !important;margin-left:auto;flex:0 0 auto;
  width:36px;height:36px;border-radius:3px;
  background:rgba(0,0,0,.4) !important;border:1px solid var(--hair) !important;
  color:var(--bone);font-size:1.35rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .18s ease;}
.profile-close:hover{border-color:var(--hair-hot) !important;color:#fff;background:rgba(196,30,58,.22) !important;}

/* ── TABS ─────────────────────────────────────────────────────────────────────────────────── */
.pf-tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 clamp(10px,1.6vw,16px);
  border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none;}
.pf-tabs::-webkit-scrollbar{display:none;}
.pf-tabs[hidden]{display:none;}
.pf-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:'MedievalSharp',cursive;font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--dim);padding:12px 16px 10px;cursor:pointer;white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;}
.pf-tab:hover{color:var(--bone);}
.pf-tab.on{color:var(--gold);border-bottom-color:var(--gold);}
.pf-pane{display:none;}
.pf-pane.on{display:block;}

/* ── THE SCROLLER IS THE BODY, NOT THE WHOLE OVERLAY ──────────────────────────────────────── */
.profile-content{
  position:static !important;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  width:100% !important;max-width:none !important;margin:0 !important;padding-bottom:0 !important;}
.profile-content::-webkit-scrollbar{width:9px;}
.profile-content::-webkit-scrollbar-track{background:rgba(0,0,0,.4);}
.profile-content::-webkit-scrollbar-thumb{background:rgba(202,160,86,.26);border-radius:5px;}
.profile-content::-webkit-scrollbar-thumb:hover{background:rgba(202,160,86,.44);}
.profile-hero{min-height:clamp(190px,22vw,250px) !important;}
.profile-body{padding:clamp(18px,2.2vw,26px) clamp(16px,2.2vw,26px) 34px !important;}

/* ── COLOUR BACK ON THE NAME, OFF EVERYTHING ELSE ─────────────────────────────────────────── */
/* The name keeps its class colour: that is the one place it carries information a WoW player reads
   instantly. The KPI figures were gold, pink, blood, white, tier-blue and win-rate-green in eight
   cells; inline styles set them, so these have to win with !important rather than by being later. */
.profile-kpi-n{color:var(--bone) !important;}
.profile-kpi-row .profile-kpi:first-child .profile-kpi-n{color:var(--gold) !important;}
.profile-kpi-sub{color:var(--dim) !important;}
/* This rule used to say `.grade-a` ... `.grade-f` in lowercase. The class is built at runtime as
   'grade-' + d.grade and the API returns 'A'..'F', so the override matched nothing and every report
   card still rendered a neon green A and a blue B while the comment above claimed otherwise. The
   letter element is the thing being coloured, so colour THAT: it cannot fall out of step with the
   grade scale. */
.report-card .grade-letter{color:var(--bone) !important;}
.sub-prog-fill,.pf-climb-fill{background:linear-gradient(90deg,#8a6a2c,var(--gold)) !important;}

/* ── THE NEXT RUNG ────────────────────────────────────────────────────────────────────────── */
.pf-climb{border:1px solid var(--hair);border-radius:3px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(202,160,86,.05),rgba(0,0,0,.25));margin-bottom:26px;}
.pf-climb-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:10px;}
.pf-climb-now{font-family:'MedievalSharp',cursive;font-size:1.7rem;color:var(--gold);line-height:1;}
.pf-climb-goal{font-family:'MedievalSharp',cursive;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--dim);}
.pf-climb-bar{height:7px;border-radius:3px;background:rgba(0,0,0,.55);
  border:1px solid rgba(202,160,86,.14);overflow:hidden;}
.pf-climb-fill{height:100%;border-radius:3px;}
.pf-climb-note{font-size:.86rem;color:var(--bone);line-height:1.6;margin-top:10px;}
.pf-climb-note b{color:var(--gold);font-weight:400;}
.pf-climb-top-out{margin:0;}

/* ── PHONE ────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .profile-overlay.open{padding:0;}
  .profile-panel{width:100%;height:100%;border-radius:0;border-width:0;border-image:none;
    box-shadow:none;border-top:1px solid var(--hair-hot) !important;}
  .pf-bar-sub{display:none;}
  .pf-tab{padding:11px 12px 9px;font-size:.72rem;letter-spacing:.1em;}
  /* the render used to sit under the name and the close button both */
  .profile-hero{min-height:168px !important;}
  .profile-hero-bg{opacity:.5;justify-content:flex-end !important;}
}

/* ── THE HERO: the character gets a column instead of being zoomed into ───────────────────── */
/* `.profile-render` carried `transform:scale(1.8)` with a bottom origin, a hack sized for the old
   340px hero. In a shorter panel hero that framing shows the character's boots and nothing else.
   The render now gets its own column on the right at natural scale, fitted to the hero height, so
   it reads as a portrait beside the name rather than a crop behind it. */
.profile-hero{align-items:stretch !important;min-height:clamp(215px,23vw,290px) !important;}
.profile-hero-bg{
  left:auto !important;right:clamp(6px,2.4vw,34px) !important;
  width:min(290px,40%) !important;
  align-items:flex-end !important;justify-content:center !important;}
.profile-render{
  height:100% !important;max-height:100% !important;width:auto !important;max-width:100% !important;
  object-fit:contain !important;object-position:50% 100% !important;transform:none !important;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.95)) !important;}
.profile-hero-bg::after{height:74px !important;}
.profile-hero-info{
  align-self:flex-end;max-width:min(100%,620px);
  padding:0 clamp(16px,2.2vw,26px) clamp(16px,2vw,24px) !important;}

/* ── THE LAST TWO RAINBOW CHIPS ───────────────────────────────────────────────────────────── */
/* `.tier-badge.reaper` was neon green and `.executioner` pure orange, sitting beside gold section
   headings. They label which guild rank unlocks a section, which is information, so they stay, but
   they wear the site's metals instead of two more accent colours. */
.tier-badge.reaper{background:rgba(202,160,86,.1) !important;color:var(--gold) !important;
  border:1px solid rgba(202,160,86,.26);}
.tier-badge.executioner{background:rgba(196,30,58,.12) !important;color:#e0566c !important;
  border:1px solid rgba(196,30,58,.3);}
.tier-badge{font-size:.66rem !important;letter-spacing:.12em !important;padding:3px 8px !important;
  font-family:'MedievalSharp',cursive;}

@media(max-width:640px){
  .profile-hero-bg{width:46% !important;right:0 !important;opacity:.62;}
  .profile-hero-info{max-width:none;}
}

/* ── THE PORTRAIT ─────────────────────────────────────────────────────────────────────────── */
/* Blizzard's render is a large mostly-empty canvas with the character small in the middle, which
   is what the old `transform:scale(1.8)` was compensating for. Fitting it with `contain` showed the
   whole canvas and made the character tiny; the original hack showed only boots. `cover` with the
   framing high fills the column with head and torso, and a mask fades the left and bottom edges so
   it reads as part of the hero instead of a photograph pasted in a box. */
.profile-render{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:50% 16% !important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent,#000 26%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent,#000 26%);
          mask-composite:intersect;}
/* the 74px band under the render was a full-width fade for a full-width render; against a narrow
   column it drew a visible dark rectangle with two hard edges */
.profile-hero-bg::after{display:none !important;}

/* the portrait belongs to Overview; the other tabs go straight to what was clicked */
.profile-content.pf-lean .profile-hero{display:none;}
.profile-content.pf-lean .profile-kpi-row:first-of-type{border-top:0;}

/* on a phone the portrait and the meta line share the same 393px, so "Realm: ..." ran across the
   armour. The portrait steps back and the hero gets a left-to-right scrim, so type always has
   ground under it whatever the render happens to be. */
@media(max-width:640px){
  .profile-hero-bg{width:42% !important;opacity:.5 !important;}
  .profile-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.72) 46%,transparent 78%);}
  .profile-hero-info{z-index:3;}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE HALL OF FAME
   Scott, 30 Sep 2026: "hall-of-fame.html doesnt match the new design ... this needs to be fixed."

   It did not match because it was never part of the system. The page carried its OWN <style> block
   from July with its own :root (--bone #ddd4bd against the system's #e8dfc9, --dim #a99e85 against
   #bcb098, so the legibility pass never reached it), its own 17px root against the system's 17.5,
   Cinzel for the h1 which is a typeface used nowhere else on the site, a fifth card system with a
   hairline border instead of a plate, no nav bar at all, no art, and the old cramped footer with a
   dead /tournaments/ link. It was a different website that happened to share a domain.

   The page now links gr-system.css and uses the system's own parts: the float nav, a has-art band
   header, .panel, .cta.ghost and the new footer. What is left below is only what the Hall of Fame
   actually adds that nothing else on the site has: a crown block, an earner row, and a sealed
   season block.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.hof-head{text-align:center;margin-bottom:clamp(16px,2vw,22px);}
.hof-title{font-family:'MedievalSharp',cursive;font-size:clamp(1.15rem,2.2vw,1.42rem);
  color:var(--gold);letter-spacing:.05em;margin:0;}
.hof-note{color:var(--dim);font-size:.86rem;margin:6px 0 0;line-height:1.6;}
.hof-loading{color:var(--dim);text-align:center;padding:18px;font-size:.9rem;}

/* ── THE CROWN ────────────────────────────────────────────────────────────────────────────── */
.crown-block{text-align:center;padding:6px 0 2px;}
.crown-glyph{font-size:2.4rem;color:var(--gold);line-height:1;
  text-shadow:0 0 26px rgba(212,162,78,.45);}
.crown-name{font-family:'MedievalSharp',cursive;font-size:1.72rem;color:var(--gold);
  margin-top:8px;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.9);}
.crown-peak{color:var(--bone);font-size:.88rem;margin-top:6px;line-height:1.6;}
.crown-peak b{color:var(--gold);font-weight:400;}

/* ── THE EARNER ROWS ──────────────────────────────────────────────────────────────────────── */
/* The old .fr-gold was `font-family:monospace`, a fourth numeral treatment on a site whose figures
   are MedievalSharp everywhere else. Same money, same face. */
/* the container keeps .hof-loading, which centres text, after the JS swaps real content in, so
   these state their own alignment rather than inheriting whatever the wrapper happens to be */
.fr-row{display:flex;align-items:baseline;gap:14px;padding:11px 4px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.045);}
.fr-row:last-child{border-bottom:none;}
.fr-rank{font-family:'MedievalSharp',cursive;font-size:.8rem;color:var(--dim);
  width:24px;flex-shrink:0;}
.fr-name{color:var(--bone);font-size:1rem;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.fr-peak{color:var(--dim);font-size:.8rem;margin-left:auto;flex-shrink:0;}
.fr-gold{font-family:'MedievalSharp',cursive;font-size:1.02rem;color:var(--gold);
  width:104px;text-align:right;flex-shrink:0;}

/* ── A SEALED SEASON ──────────────────────────────────────────────────────────────────────── */
/* .season-card already exists and already wears the plate, so this only supplies the contents. */
.season-card{text-align:left;}
.season-name{font-family:'MedievalSharp',cursive;color:#fff;font-size:1.14rem;letter-spacing:.03em;}
.season-dates{color:var(--dim);font-size:.8rem;margin-top:3px;}
.season-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:16px;margin-top:16px;}
.ss-l{font-family:'MedievalSharp',cursive;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--dim);}
.ss-v{color:var(--bone);font-size:.94rem;margin-top:4px;line-height:1.5;}
.ss-v b{color:var(--gold);font-weight:400;}

.empty-annals{text-align:center;padding:30px 18px;color:var(--bone);font-size:.96rem;
  line-height:1.85;font-style:italic;max-width:560px;margin:0 auto;}

/* At 393px the earner row had to fit rank, name, peak and gold on one line, so every name over
   about six characters truncated: "Mell...", "Ansi...", "Bullet...". A leaderboard that hides who
   is on it is not a leaderboard. The peak drops to its own line and the name takes the width back. */
@media(max-width:520px){
  .fr-row{flex-wrap:wrap;row-gap:3px;padding:12px 4px;}
  .fr-name{flex:1 1 auto;white-space:normal;overflow:visible;text-overflow:clip;}
  .fr-gold{width:auto;margin-left:auto;}
  .fr-peak{order:4;flex:1 0 100%;margin-left:38px;text-align:left;font-size:.76rem;}
}

/* ── WHAT THE KIMI AUDIT FOUND IN THE 30 SEP WORK ─────────────────────────────────────────────
   The rest of its findings, applied. Each one is a thing a visitor sees, not a code opinion. */

/* 2 (cont). The plate hugs a short tab now. Without a floor, a one-line History pane would collapse
   to a sliver, so the scroller keeps a minimum and the panel caps at the viewport for long tabs. */
.profile-content{min-height:clamp(300px,42vh,500px);}

/* 3. The KPI strip ignored the tabs. Both rows are siblings of .profile-body, so hiding only the
   hero still opened Gear on eight stat tiles, four of them PvP figures, and opened PvP on a Best
   Rating the bracket cards then repeat. The bar already carries identity; the KPIs are Overview. */
.profile-content.pf-lean .profile-kpi-row{display:none;}

/* 6. The panel shipped type under the site's own 11px floor: .55rem is 8.8px. */
.grade-label,
.streak-label,
.profile-bg-row.hdr,
.profile-gear-extras,
.profile-kpi-l,
.profile-kpi-sub,
.profile-stat-l{font-size:.66rem !important;letter-spacing:.12em !important;}
.gov-log-entry,
.profile-bg-row{font-size:.78rem !important;}

/* 12. Every gear row said "tappable" with a pointer cursor and did nothing but hover, which on a
   phone, where this panel is full screen, is a promise the page cannot keep. */
.profile-gear-item{cursor:default !important;}

/* States: a 12-character name is the WoW maximum. At 393px it ran 149px over the portrait column,
   measured. It cannot collide now at any width, and it cannot overflow its own box either. */
.profile-charname{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:clamp(1.5rem,6.6vw,2.2rem) !important;}
/* the profile's own footnote, outside the tabs, so an otherwise-empty tab stays empty and is dropped */
.pf-footnote{font-size:.72rem;color:var(--dim);text-align:right;
  margin-top:20px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE CLOSING BAND
   Scott, 30 Sep 2026, looking at the bottom of the page: "two amazing pictures stacked like that
   ... its amazing but a little much ... can we just use the best one, which is probably the bottom
   one, and just have one amazing picture be used as the background behind those two boxes."

   He was right and it was a composition problem, not a taste one. The apply section carried the
   fortress-gates painting and the footer carried the war host, so the page finished on two full
   scenes butted against each other with a hard seam and a change of subject between them. Two good
   things competing is worse than one good thing given room.

   The war host now runs unbroken behind both, and the apply panel reads as sitting ON the scene
   rather than in a scene of its own. The gates art stays in /assets; it is not deleted, it is just
   not the closer any more.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
.closing-band{position:relative;isolation:isolate;}
/* the painting, stated in viewport units so no ancestor box can narrow it. Same lesson as the
   footer band itself: geometry is declared here, never inherited. */
.closing-band::before{
  content:"";position:absolute;top:0;bottom:0;z-index:-2;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  background-image:url('/assets/art-footer.webp?v=f7a82e10');
  background-size:cover;background-position:50% 38%;background-repeat:no-repeat;}
/* one scrim for the whole run: dark where the apply panel sits, open through the middle where the
   host and the burning keep are, closing to solid before the link strip */
.closing-band::after{
  content:"";position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;
  left:50%;width:100vw;margin-left:-50vw;
  background:
    /* a hard pool of dark exactly where the wordmark and the line of copy sit. The old footer scrim
       had one of these and my first closing-band scrim did not, because it was stretched over twice
       the height. Without it the crimson in "Gore" fights the crimson banners in the painting. */
    /* RETUNED 30 Sep 2026 against the new art. The current footer band is a dawn sky where the
       previous one was night, so the scrim that worked before was losing: "For the Horde" in crimson had
       almost no ground under it and the red half of the wordmark was fighting the banners behind it.
       The pool is wider, higher and darker, sitting over where the type actually is rather than
       where it was in the old composition. */
    radial-gradient(66% 44% at 50% 60%, rgba(4,3,2,.93) 0%, rgba(4,3,2,.74) 44%, transparent 82%),
    linear-gradient(180deg,
      #0a0908 0%, rgba(10,9,8,.90) 10%, rgba(9,8,7,.74) 22%,
      rgba(8,7,6,.50) 42%, rgba(7,6,5,.58) 62%,
      rgba(7,6,5,.84) 88%, #070605 100%);}

/* the two members of the band stop painting their own grounds and their own edges */
.closing-band > #discord-section{background:none !important;}
.closing-band > .site-foot{background:none !important;}
.closing-band > .site-foot .foot-scene::before,
.closing-band > .site-foot .foot-scene::after{display:none !important;}
.closing-band > .site-foot .foot-scene{min-height:0 !important;isolation:auto;}
/* the base strip keeps its solid ground: link text needs a floor, not a battlefield */
.closing-band > .site-foot .foot-base{background:#070605 !important;position:relative;z-index:1;}
/* one hairline at the top of the whole run instead of one per section */
.closing-band > .site-foot::before{display:none !important;}
/* the gold hairline that opens the run, once */
.closing-band{border-top:1px solid transparent;}
.closing-band > #discord-section{position:relative;}
.closing-band > #discord-section::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hair-hot) 18%,var(--hair-hot) 82%,transparent);}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE HERO, MEASURED
   Scott, 30 Sep 2026: "do you think the text is small or not placed in the right spot or is that
   logo too small or in the wrong spot ... what makes the best placement and size for jaw drop."

   Measured at 1366px rather than guessed. Three findings, three fixes.

   1. THE MARK WAS SMALL BECAUSE TWO THIRDS OF ITS BOX WAS NOT THE MARK. logo-text-opt.jpg is a
      780px JPEG with the wordmark filling only the middle, and because a JPEG has no alpha the CSS
      faked transparency with a radial mask that ate the outer third. Rendered at 349px the readable
      mark came to 248px, about 18% of the screen. It is now logo-mark.webp: real alpha, cropped to
      its own edges, so the same box renders the mark about 74% bigger and the mask can go.
   2. IT WAS SITTING ON HIM. The content column ran x=203 to 703 and the warlord's body starts near
      550, so the wordmark was on his chest. Two focal points in one square inch, each weakening the
      other. The columns now push out to the gutters and leave him the middle.
   3. THE COPY WAS NOT TOO SMALL, IT WAS TOO FAINT. Tagline 15.7px and lede 16.3px are fine sizes;
      both were --dim over painted rock. That is a legibility bug, not a style choice.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. the mask was a workaround for a JPEG that no longer needs working around */
.hero-logo img{
  -webkit-mask-image:none !important;mask-image:none !important;
  mix-blend-mode:normal !important;
  max-height:min(40svh, 500px) !important;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.95)) drop-shadow(0 0 46px rgba(212,162,78,.22)) !important;
}

/* 2. give the painting its middle back. The shell caps at 1180px, which pulled both columns inward
   onto the subject; the hero alone opts out of that cap and pins its two blocks to the gutters. */
@media(min-width:1000px){
  .hero-split{
    max-width:min(1560px, 100%) !important;
    justify-content:space-between !important;
    gap:clamp(40px,8vw,140px) !important;
    /* opting out of the shell's cap also opted out of its gutter, and the mark ended up 20px off
       the screen edge. The hero states its own. */
    padding-inline:clamp(28px,4vw,64px) !important;
  }
  .hero-brand{max-width:min(460px,36vw) !important;}
  .hero-tournament{max-width:min(400px,30vw) !important;}
}

/* 3. bone, not dim, and a shadow that survives painted rock */
.hero .tagline{
  color:var(--bone) !important;
  text-shadow:0 2px 8px rgba(0,0,0,1), 0 0 26px rgba(0,0,0,.96) !important;}
.hero-brand .sub{
  color:#ded5c1 !important;
  text-shadow:0 2px 8px rgba(0,0,0,1), 0 1px 20px rgba(0,0,0,.9) !important;}

/* ── OPTION 4: THE POSTER ─────────────────────────────────────────────────────────────────────
   Added 30 Sep 2026 as a comparison, not as a change. Nothing below applies unless <body> carries
   class "poster", so the live hero is untouched until Scott picks.

   The idea: stop flanking the warlord and let him own the whole frame. Mark large and centred low,
   tagline under it, one button. The tournament card leaves the hero entirely, because the thing
   that makes a poster land is that there is ONE thing to look at.
   ──────────────────────────────────────────────────────────────────────────────────────────── */
body.poster .hero-split{
  display:block !important;max-width:none !important;
  padding-inline:clamp(20px,5vw,80px) !important;
  text-align:center;
  /* the composition hangs from the bottom: art above, type below, like a one sheet */
  display:flex !important;flex-direction:column;justify-content:flex-end;min-height:100%;
}
body.poster .hero{
  padding-top:0 !important;padding-bottom:clamp(30px,5svh,64px) !important;
  align-items:stretch !important;
}
body.poster .hero-brand{
  max-width:none !important;width:100%;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
body.poster .hero-logo img{
  max-height:min(30svh,360px) !important;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,1)) drop-shadow(0 0 60px rgba(212,162,78,.28)) !important;
}
body.poster .hero .tagline{
  text-align:center;letter-spacing:.3em !important;font-size:.82rem !important;
  margin:clamp(10px,1.6svh,18px) 0 clamp(8px,1.2svh,14px) !important;
}
body.poster .hero-brand .sub{
  text-align:center;max-width:60ch;margin-inline:auto !important;
}
body.poster .hero-brand .cta{margin-top:clamp(12px,2svh,22px);}
/* the card steps out of the hero. It is not deleted, it is relocated in the eye's order. */
body.poster .hero-tournament{display:none !important;}
/* with the type low and centred, the scrim wants to be a floor rather than a left wedge */
body.poster .hero::after{
  background:
    linear-gradient(180deg, rgba(5,4,3,.55) 0%, transparent 26%, transparent 46%,
                    rgba(5,4,3,.72) 76%, rgba(5,4,3,.95) 100%) !important;
}

/* ── OPTION 5: THE POSTER THAT KEPT THE HOOK ──────────────────────────────────────────────────
   The poster composition loses the gold figure below the fold, and that figure is the single most
   persuasive object on the site. This keeps it, as one line of type rather than a bordered card,
   so the frame stays clean and the hook survives. Class "poster2" on <body>; nothing applies until
   it is there. */
body.poster2 .hero{padding-top:0 !important;padding-bottom:clamp(26px,4svh,56px) !important;align-items:stretch !important;}
body.poster2 .hero-split{
  display:flex !important;flex-direction:column;justify-content:flex-end;
  max-width:none !important;padding-inline:clamp(20px,5vw,80px) !important;text-align:center;min-height:100%;
}
body.poster2 .hero-brand{max-width:none !important;width:100%;display:flex;flex-direction:column;align-items:center;}
body.poster2 .hero-logo img{
  max-height:min(28svh,340px) !important;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,1)) drop-shadow(0 0 60px rgba(212,162,78,.28)) !important;}
body.poster2 .hero .tagline{text-align:center;letter-spacing:.3em !important;font-size:.8rem !important;
  margin:clamp(8px,1.4svh,16px) 0 clamp(6px,1svh,12px) !important;}
body.poster2 .hero-brand .sub{display:none !important;}
body.poster2 .hero-tournament{display:none !important;}
body.poster2 .hero-brand .cta{margin-top:clamp(12px,2svh,20px);}
/* the hook, promoted out of the card and set as type */
body.poster2 .hero-hook{
  display:block;font-family:'MedievalSharp',cursive;line-height:1.25;
  margin:clamp(6px,1.2svh,14px) 0 0;text-shadow:0 3px 14px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,.9);}
body.poster2 .hero-hook b{
  display:block;font-size:clamp(2.2rem,5.2vw,3.6rem);color:var(--gold);font-weight:400;letter-spacing:.01em;}
body.poster2 .hero-hook span{
  display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.24em;color:var(--bone);margin-top:4px;}
body.poster2 .hero-hook em{
  display:block;font-family:'Crimson Text',serif;font-style:normal;font-size:.95rem;color:#ded5c1;
  margin-top:10px;max-width:52ch;margin-inline:auto;}
body:not(.poster2) .hero-hook{display:none;}
body.poster2 .hero::after{
  background:linear-gradient(180deg, rgba(5,4,3,.5) 0%, transparent 24%, transparent 44%,
                             rgba(5,4,3,.74) 74%, rgba(5,4,3,.96) 100%) !important;}

/* ── THE POSTER ON A PHONE ────────────────────────────────────────────────────────────────────
   The art is object-fit:cover, so on a narrow portrait screen it crops to the middle and the
   warlord's head lands exactly where the mark sits. That is the same two-focal-points-in-one-square
   -inch fault the desktop layout was just fixed for, and shipping it on the phone would be the same
   mistake in a different aspect ratio. Framing the art a little higher puts his face above the mark
   instead of behind it, and trimming the mark gives the face somewhere to be. */
@media(max-width:640px){
  body.poster2 .hero-battle{object-position:50% 22% !important;}
  body.poster2 .hero-logo img{max-height:min(23svh,270px) !important;}
  body.poster2 .hero .tagline{font-size:.72rem !important;letter-spacing:.22em !important;}
  body.poster2 .hero-hook b{font-size:clamp(2rem,10vw,2.8rem);}
  body.poster2 .hero-hook em{font-size:.9rem;}
}

/* ── WHERE EACH BAND IS CROPPED ───────────────────────────────────────────────────────────────
   Scott, 30 Sep 2026: "any way you can get more of their heads to show."

   All seven bands share one crop, `background-position:50% 42%`, which was set when the art was
   landscapes and the interesting part was in the middle. The maths: the art is 1920x800 and the
   strip is 430px tall, so `cover` scales it to 569px and throws away 139px. At 42% that means 58px
   comes off the TOP, which on a band full of standing figures is exactly where the heads are.

   A shared default is right; a shared default applied to art with different compositions is not.
   Bands whose subject stands get their own crop. A landscape stays where it was. */
section[data-art="roster"]::before,
section[data-art="roster"]::after{background-position:50% 6% !important;}
section[data-art="divisions"]::before,
section[data-art="divisions"]::after{background-position:50% 30% !important;}
section[data-art="gates"]::before,
section[data-art="gates"]::after{background-position:50% 34% !important;}
/* the roster line has ten figures across it and 430px cuts them at the collarbone. This band alone
   gets the extra height, because it is the only one whose subject is a row of faces. */
section[data-art="roster"]::before,
section[data-art="roster"]::after{height:clamp(340px,38vw,500px) !important;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE ROSTER ON A TABLET
   Scott, 30 Sep 2026, on his iPad: "the roster is kind of narrow, and you can see there's an
   overlap of some of the text near Shadowrocca's line."

   Both real, and the second one I could not reproduce in Chrome at any width, which is the whole
   reason the fix below is structural rather than a nudge.

   WHAT HIS SCREENSHOT PROVES. Item level is visible on his row, so he has all seven columns, so
   the grid is NOT dropping one. The green weekly-games figure is printed ON TOP of the rating.
   Two cells cannot occupy one grid area by accident; what they can do is let their CONTENT spill
   out of a track that is too narrow, and `.lb-act` is a centred flexbox with nothing stopping it.
   A grid item defaults to min-width:auto, which refuses to shrink below its content and then
   overflows instead. Chrome and WebKit round fractional track widths differently, so a layout with
   no slack fails on one engine and not the other. That is exactly what a tablet width has: no slack.

   TWO FIXES, AND THE FIRST ONE IS THE REAL ONE.
   1. The roster stops being squeezed into the 1180px shell. It was using 1060px of a 1366px iPad,
      78% of the screen, with the tier bar and five numeric columns fighting over what was left.
      Giving it the width it needs removes the pressure that made the spill possible at all.
   2. Every cell gets min-width:0 and its own clipping, so no cell can ever paint outside its track
      on any engine, whatever the rounding does.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* 1. the roster gets room, the way the hero now does */
@media(min-width:1000px){
  /* `> .shell` matched nothing useful because .shell also carries the max-width from :root and the
     later, more specific rule won. Stated with the id AND the class so it cannot be outranked. */
  section#leaderboard-section .shell{
    max-width:min(1500px, 100%) !important;
    padding-inline:clamp(24px,3vw,48px) !important;
  }
  #leaderboard-section .lb{width:100% !important;max-width:none !important;}
}

/* ── ONE SET OF ROSTER BREAKPOINTS, REPLACING THREE ───────────────────────────────────────────
   This file had accumulated three separate rounds of responsive roster rules, at max-700, max-820,
   max-900 and max-1100, each with its own column count and its own list of children to hide. At
   900px the column count came from one round and the hidden cells from two others: six tracks
   for four items. Not a visible overlap, but four columns of data laid out across six, which is
   the same class of fault. These supersede all of them. Column count and visible cells are now
   decided in the same place, so they cannot disagree again. */
@media(max-width:999px) and (min-width:861px){
  .lb-header, .lb-row{
    grid-template-columns:34px 40px minmax(0,1.5fr) minmax(0,1fr) 78px 104px !important;
    gap:8px !important;}
  /* every cell's visibility is stated here, including the ones that should STAY, because an older
     max-900 rule hides the tier bar and an older max-1100 rule hides item level. Saying only what
     to hide leaves the rest to whichever generation happens to win. */
  .lb-header > :nth-child(4), .lb-row > :nth-child(4){display:block !important;} /* tier bar */
  .lb-header > :nth-child(5), .lb-row > :nth-child(5){display:none !important;}  /* item level */
  .lb-header > :nth-child(6), .lb-row > :nth-child(6){display:block !important;} /* weekly */
  .lb-header > :nth-child(7), .lb-row > :nth-child(7){display:block !important;} /* rating */
}
@media(max-width:860px){
  .lb-header, .lb-row{
    grid-template-columns:30px 36px minmax(0,1fr) 112px !important;
    gap:10px !important;}
  .lb-header > :nth-child(4), .lb-row > :nth-child(4),
  .lb-header > :nth-child(5), .lb-row > :nth-child(5),
  .lb-header > :nth-child(6), .lb-row > :nth-child(6){display:none !important;}
  .lb-header > :nth-child(7), .lb-row > :nth-child(7){display:block !important;}
}

/* 2. a grid item that cannot shrink will overflow instead. These can now always shrink, and if a
      value is ever too long for its track it is clipped inside its own cell rather than printed
      across the next one. */
.lb-row > *,
.lb-header > *{min-width:0;}
.lb-num,
.lb-act,
.lb-ilvl,
.lb-rating-val,
.lb-header > *{overflow:hidden;}
.lb-num b,
.lb-num u,
.lb-rating-num{white-space:nowrap;}

/* with the extra width the item-level column no longer has to disappear as early */
@media(min-width:1000px) and (max-width:1100px){
  .lb-header > :nth-child(5), .lb-row > :nth-child(5){display:block !important;}
  .lb-header, .lb-row{
    grid-template-columns:38px 42px minmax(0,1.4fr) minmax(0,1fr) 72px 84px 120px !important;}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE ROSTER, REDESIGNED
   Scott, 30 Sep 2026: "the buttons on top of the rows take up a lot of space and are stacked in a
   non-formatted way ... even the column names are double-stacked, like item level. Why does it
   need to take up two lines? ... come up with a much better approach for the roster to scale on a
   phone and on my iPad."

   Measured first. The filter bar was 78px tall because fourteen buttons wrapped onto two rows.
   "Item Level" wrapped to two lines inside a 68px column. Both are the same fault: labels sized
   for a desktop mock, dropped into a container that never had room for them.

   THREE DECISIONS.

   1. THE FILTER BAR SCROLLS INSTEAD OF WRAPPING. Wrapping is what a row of buttons does when
      nobody decided what happens at a narrow width. A rail that scrolls sideways is one line at
      every size from a phone to a desktop, and it is the pattern that survives 13 classes. Each
      chip carries the class colour and a COUNT, so the bar now answers "how many monks are in this
      guild" instead of only offering an action almost nobody takes.

   2. THE HEADINGS USE THE WORDS THE AUDIENCE USES. "Item Level" became "ilvl" and "This Week"
      became "Games". Shorter, so they stop wrapping, and more native: no WoW player says item
      level out loud. The fix for a two-line label is usually a better label, not a wider column.

   3. A PHONE GETS A TWO-LINE ROW, NOT FOUR COLUMNS. The old mobile layout dropped the climb bar
      and the item level, which is most of why anyone opens a roster. Keeping seven columns on a
      390px screen is impossible; stacking the same data in two lines inside one row is not.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE RAIL ─────────────────────────────────────────────────────────────────────────────── */
.lb-filters{
  display:flex !important;align-items:center;gap:12px;flex-wrap:nowrap !important;
  margin-bottom:clamp(14px,1.8vw,20px);}
.lb-rail{
  display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;padding:2px 0 6px;flex:1 1 auto;min-width:0;
  scroll-snap-type:x proximity;
  /* the fade says "there is more" without a scrollbar saying it badly */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);}
.lb-rail::-webkit-scrollbar{display:none;}
.lb-chip-f{
  scroll-snap-align:start;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  font-family:'MedievalSharp',cursive;font-size:.74rem;letter-spacing:.06em;
  color:var(--dim);background:linear-gradient(180deg,#1b1713,#120f0d);
  border:1px solid rgba(202,160,86,.18);border-radius:3px;
  padding:7px 11px;cursor:pointer;white-space:nowrap;
  transition:color .18s ease, border-color .18s ease, background .18s ease;}
.lb-chip-f i{width:8px;height:8px;border-radius:2px;flex:0 0 auto;display:block;}
.lb-chip-f b{font-weight:400;color:#7d735f;font-size:.7rem;font-variant-numeric:tabular-nums;}
.lb-chip-f:hover{color:var(--bone);border-color:rgba(202,160,86,.38);}
.lb-chip-f.active{
  color:#120e08;border-color:var(--gold);
  background:linear-gradient(180deg,#e6c169,#c2913a);}
.lb-chip-f.active b{color:rgba(18,14,8,.62);}
.lb-chip-f:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}


/* ── HEADINGS THAT FIT ───────────────────────────────────────────────────────────────────── */
.lb-header > *{white-space:nowrap;text-overflow:ellipsis;}

/* ── A PHONE GETS TWO LINES, NOT FOUR COLUMNS ────────────────────────────────────────────── */
@media(max-width:860px){
  .lb-header{display:none !important;}
  .lb-row{
    grid-template-columns:30px 38px minmax(0,1fr) auto !important;
    grid-template-areas:"rank ava who rating" ". . climb climb" !important;
    row-gap:7px !important;align-items:center !important;padding:12px 14px !important;}
  .lb-row > :nth-child(1){grid-area:rank;}
  .lb-row > :nth-child(2){grid-area:ava;}
  .lb-row > :nth-child(3){grid-area:who;}
  .lb-row > :nth-child(7){grid-area:rating;}
  /* the climb bar comes BACK on a phone, on its own line, because progress to the next payout is
     the most motivating thing on the page and the old mobile layout threw it away */
  .lb-row > :nth-child(4){grid-area:climb;display:block !important;min-width:0;}
  .lb-row > :nth-child(5), .lb-row > :nth-child(6){display:none !important;}
  .lb-climb{padding-right:4px;}
  .lb-chip-f{font-size:.7rem;padding:6px 9px;}
}

/* ── THE RATING COLUMN WAS ALWAYS TOO NARROW ──────────────────────────────────────────────────
   Measured, not guessed: `.lb-rating-top` is a flex row holding the number and the tier badge. It
   needs 53 + 8 + 100 = 161px and the track gave it 132. The content overflowed 28px to the LEFT,
   invisibly, until `overflow:hidden` turned that silent overflow into a visible clip and "1732"
   started rendering as "32".

   The clip was mine. The 29px shortfall was not: it had been there the whole time, which is why
   the rating and the weekly figure appeared to collide on Scott's iPad. A cell whose content does
   not fit will fail SOMEHOW on every engine, and which way it fails is just a detail of rounding.

   So the track is sized to its content, and the badge is allowed to shrink before the number does,
   because the number is the thing anyone came to read. */
@media(min-width:1000px){
  .lb-header, .lb-row{
    grid-template-columns:38px 42px minmax(0,1.5fr) minmax(0,1fr) 68px 78px 176px !important;}
}
@media(max-width:999px) and (min-width:861px){
  .lb-header, .lb-row{
    grid-template-columns:34px 40px minmax(0,1.5fr) minmax(0,1fr) 78px 164px !important;}
}
/* the number never shrinks; the badge gives way first, and truncates with an ellipsis rather than
   a hard cut if a longer tier name ever arrives */
.lb-rating-num{flex:0 0 auto;}
.lb-tier-badge{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* on a phone a long name plus its streak badge pushed the badge outside the cell (Bulletbeard and
   Ragerocca, by 28px and 21px). Letting the pair wrap keeps both fully readable; truncating the
   name would have been the easy fix and the wrong one, since the name is the whole point of a row. */
@media(max-width:860px){
  .lb-name{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;
    min-width:0;overflow-wrap:anywhere;}
  .lb-streak{flex:0 0 auto;}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   ROSTER CONTROLS: EVERY OPTION VISIBLE
   Scott, 30 Sep 2026: "the buttons for sorting right now you wouldn't know there are more sort
   options if you didn't slide across looking for more ... these things cant be hidden."

   He is right, and the scrolling rail I built an hour earlier was the wrong answer to the previous
   complaint. I was fixing a bar that wrapped onto two ragged rows and stood 78px tall, and I fixed
   it by pushing half the options off screen behind a fade. A scrolling rail is fine in a gallery,
   where missing the twelfth photo costs nothing. It is wrong for a filter, where not knowing an
   option exists means it does not exist. Same for the <select>: three of its four sort orders were
   behind a tap.

   So both controls now show everything they offer, at every width:

   1. CLASS FILTER: a grid with an EXPLICIT column count, not auto-fill. What made the original bar
      look unformatted was not that it wrapped, it was that flexbox wrapped variable-width buttons
      into ragged rows. Fixed columns give equal chips and aligned rows. Seven columns means the
      fourteen classes land as two clean rows of seven rather than an accidental pile.

   2. The two long class names carry a short form in the same chip (see buildFilters). Below 1200px
      the stylesheet paints the short one. Nothing is removed from the DOM, so a screen reader and
      the accessible name still get "Death Knight".

   3. SORT: four segments, all visible, styled as one welded control so it reads as a single choice.

   Column counts below are measured, not guessed: the widest chip is "Demon Hunter" at 144px with
   full names and "Warlock" at 107px with short ones. Each breakpoint holds its widest chip.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* `#lb-filters` (line 1243) is an ID rule from when this bar was a centred row, and it still owns
   align-items and justify-content. A class rule can never outrank it, which is why the phone layout
   silently collapsed to one column on the first attempt: the grid was being centred at content
   width instead of stretched. Matching the ID here wins on specificity without another !important. */
#lb-filters.lb-filters{
  display:grid !important;
  grid-template-columns:1fr;
  align-items:stretch;justify-content:stretch;
  gap:12px;flex-wrap:wrap !important;
  max-width:none;margin-inline:0;
  margin-bottom:clamp(14px,1.8vw,20px);}

.lb-rail{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px !important;
  overflow:visible !important;padding:0 !important;
  -webkit-mask-image:none !important;mask-image:none !important;
  scroll-snap-type:none !important;}

.lb-chip-f{
  justify-content:center;white-space:nowrap;min-width:0;
  padding:7px 9px !important;font-size:.72rem;gap:6px;}
.lb-chip-f .cf-long,.lb-chip-f .cf-short{min-width:0;}
.lb-chip-f .cf-short{display:none;}

/* ── SORT: a welded segmented control, all four orders on screen ──────────────────────────────── */
.lb-sortbar{display:flex;align-items:center;justify-content:flex-end;gap:11px;}
.lb-sortlab{
  font-family:'MedievalSharp',cursive;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:#7d735f;flex:0 0 auto;}
.lb-seg{
  display:flex;align-items:stretch;
  border:1px solid rgba(202,160,86,.2);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#1b1713,#120f0d);}
.lb-seg-b{
  font-family:'MedievalSharp',cursive;font-size:.72rem;letter-spacing:.06em;
  color:var(--dim);background:none;border:0;
  border-left:1px solid rgba(202,160,86,.14);
  padding:7px 15px;cursor:pointer;white-space:nowrap;
  transition:color .18s ease, background .18s ease;}
.lb-seg-b:first-child{border-left:0;}
.lb-seg-b:hover{color:var(--bone);background:rgba(202,160,86,.06);}
.lb-seg-b.active{
  color:#120e08;background:linear-gradient(180deg,#e6c169,#c2913a);
  text-shadow:0 1px 0 rgba(255,255,255,.22);}
.lb-seg-b:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* ── Below 1200px the two long names wear their short form. Widest chip becomes Warlock, 107px. ── */
@media(max-width:1199px){
  .lb-chip-f .cf-long{display:none;}
  .lb-chip-f .cf-short{display:inline;}
}
/* Seven columns of 107px need ~790px of rail, which is gone by here. Five columns give 5+5+4. */
@media(max-width:899px){
  .lb-rail{grid-template-columns:repeat(5,minmax(0,1fr));}
}
/* Phone. Four columns, chips tightened until the widest fits the track: smaller dot, tighter
   padding, smaller count. The sort bar takes the full width and splits into four equal segments so
   it stays one tap per order instead of a menu. */
@media(max-width:699px){
  .lb-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px !important;}
  .lb-chip-f{font-size:.68rem;padding:6px 4px !important;gap:4px;letter-spacing:.02em;}
  .lb-chip-f i{width:6px;height:6px;}
  .lb-chip-f b{font-size:.62rem;}
  #lb-filters.lb-filters{gap:10px;}
  .lb-sortbar{justify-content:stretch;gap:8px;flex-direction:column;align-items:stretch;}
  .lb-sortlab{font-size:.64rem;letter-spacing:.24em;}
  .lb-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  .lb-seg-b{padding:8px 2px;font-size:.66rem;letter-spacing:.01em;text-align:center;}
}

/* ── A separator belongs to the thing it introduces ───────────────────────────────────────────── */
.lb-meta .mt{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE PHONE ROSTER ROW AND BAND HEADER
   Visible only once the page is photographed at 393px: the row's name column was squeezed to about
   170px, so "Monk / Windwalker / Reaper" broke across three lines, and the band header wrapped
   mid-phrase into "pays 50,000g a / season" and "2 / members". Both are the cramped look Scott
   keeps pointing at, and neither shows up in a widths-and-overflow check because everything
   technically fits.

   Two changes, both about giving the text room rather than shrinking it:

   1. The tier badge comes off the row on a phone. It is the third time that row states its tier:
      the band header directly above says "Duelist", the rating numeral is in the tier colour, and
      then a badge repeats it in words. Dropping the badge returns about 110px to the name column,
      which is the difference between one line of meta and three.

   2. The band header becomes a deliberate two-row grid instead of a flex row that wraps wherever
      it runs out: name, threshold and member count on the first line, the payout on the second.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:699px){
  .lb-row .lb-tier-badge{display:none;}
  .lb-band{
    display:grid !important;
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"n r c" "g g g";
    gap:5px 9px;align-items:center;
    padding:12px 14px !important;}
  .lb-band-n{grid-area:n;}
  .lb-band-req{grid-area:r;}
  .lb-band-ct{grid-area:c;justify-self:end;margin-left:0;white-space:nowrap;}
  .lb-band-gold{grid-area:g;white-space:nowrap;}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   HIGH RESOLUTION, AND WHO GETS IT
   The bands are 3840px wide now. They used to be 1920, which on Scott's 3440px ultrawide meant the
   browser was stretching every one of them by 1.79x: the pipeline renders at 1536, upscales 4x to
   about 6144, and artgen's --width default of 1920 threw the rest away before anything was saved.
   Nobody ever passed the flag. Resolved down from 6144 to 3840 instead, a 1.6x supersample lands on
   that screen at 1:1.

   A phone must never download a 3840px band to paint it 390px wide, so every band also ships at
   1280 and small screens take that instead. The bands are declared as a custom property, so the
   whole swap is one block rather than a rule per band.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  section[data-art="roster"]   {--art:url('/assets/art-roster-sm.webp?v=15bc3f39')}
  section[data-art="gold"]     {--art:url('/assets/art-gold-sm.webp?v=b9195762')}
  section[data-art="records"]  {--art:url('/assets/art-records-sm.webp?v=624f129a')}
  section[data-art="perks"]    {--art:url('/assets/art-perks-sm.webp?v=d71f3fe8')}
  section[data-art="warroom"]  {--art:url('/assets/art-warroom-sm.webp?v=39ae7689')}
  section[data-art="divisions"]{--art:url('/assets/art-divisions-sm.webp?v=6418fd4b')}
  section[data-art="gates"]    {--art:url('/assets/art-gates-sm.webp?v=45b514a7')}
  .closing-band::before{background-image:url('/assets/art-footer-sm.webp?v=833876b6') !important}
  .site-foot .foot-scene{background-image:url('/assets/art-footer-sm.webp?v=833876b6') !important}
}

/* ── A STAT NEVER BREAKS ACROSS TWO LINES ─────────────────────────────────────────────────────── */
/* Gold awarded reached six figures (292,491g on 11 Oct 2026) and wrapped as "292,4 / 91" in a fifth of
   the shell on Scott's half-screen window. The figure stays on one line and its size is capped by the
   width of its own column (cqi), so a longer number shrinks to fit instead of breaking. */
.banner .stat{container-type:inline-size;}
.banner .stat-n{white-space:nowrap;font-size:min(clamp(1.9rem,3.6vw,3rem),19cqi) !important;}