/* site.css: generated by build_static.py from the <style> block of index.html. Do not edit;
   edit index.html and run the build again. */
  :root{
    --ash:#0B0908; --ash-1:#100C0A; --ash-2:#171009; --panel:#150F0B;
    --ember:#E85D2A; --ember-hot:#FF7A3C; --crimson:#7A1F12;
    --gold:#C9A24B; --gold-soft:#D8B463; --gold-dim:#8f7434;
    --ink:#EDE3D2; --ink-dim:#C6B79F; --muted:#9C8E7B; --faint:#6E6355;
    --hair:rgba(201,162,75,.18); --hair-2:rgba(201,162,75,.30);
    --glass:rgba(18,13,10,.72);
    --ok:#5FD07A; --shadow:0 30px 70px -30px rgba(0,0,0,.85);
    --shell:1160px; --r:9px;
    --f-display:"Grenze Gotisch","Cinzel",serif;
    --f-head:"Cinzel",serif;
    --f-body:"EB Garamond",Georgia,serif;
    --f-quote:"Cormorant Garamond",Georgia,serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--ash);color:var(--ink);font-family:var(--f-body);
    font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:inherit}
  img{max-width:100%}
  [hidden]{display:none!important}
  h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
  p{margin:0 0 1rem}
  ::selection{background:rgba(232,93,42,.32);color:#fff}

  /* atmosphere (fixed) */
  #embers{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
  .atmos{position:fixed;inset:0;z-index:0;pointer-events:none}
  .atmos.coals{background:radial-gradient(120% 55% at 50% 120%,rgba(232,93,42,.30),rgba(122,31,18,.16) 34%,rgba(11,9,8,0) 62%)}
  .atmos.vig{background:radial-gradient(140% 110% at 50% 30%,rgba(11,9,8,0) 45%,rgba(4,3,3,.78) 100%)}
  .content{position:relative;z-index:2}

  .shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}

  /* ---------------- header ---------------- */
  .site-header{position:sticky;top:0;z-index:50;background:linear-gradient(var(--ash),rgba(11,9,8,.6) 70%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
  .hbar{display:flex;align-items:center;gap:1.2rem;height:66px}
  .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
  .sigil{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:radial-gradient(circle at 50% 36%,#31200f,#0c0908);border:1px solid var(--hair-2);
    box-shadow:inset 0 0 12px rgba(232,93,42,.5)}
  .sigil::before{content:"";width:14px;height:14px;
    background:radial-gradient(circle at 50% 28%,#ffd27a,var(--ember) 55%,var(--crimson));
    clip-path:polygon(50% 0,63% 38%,100% 42%,68% 62%,80% 100%,50% 76%,20% 100%,32% 62%,0 42%,37% 38%);
    filter:drop-shadow(0 0 4px rgba(232,93,42,.8))}
  .brand b{font-family:var(--f-head);font-weight:600;letter-spacing:.3em;font-size:.82rem;text-transform:uppercase;padding-left:.15em}
  nav.main{display:flex;align-items:center;gap:.15rem;margin-left:.6rem}
  .navitem{position:relative}
  .navitem>a,.navitem>button{font-family:var(--f-head);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-dim);text-decoration:none;background:none;border:0;cursor:pointer;padding:.7rem .85rem;
    display:inline-flex;align-items:center;gap:.35rem;transition:color .2s}
  .navitem>a:hover,.navitem>button:hover,.navitem.active>a{color:var(--ink)}
  .navitem.active>a{text-shadow:0 0 18px rgba(232,93,42,.5)}
  .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.7;margin-bottom:2px}
  .drop{position:absolute;top:calc(100% - 4px);left:0;min-width:210px;background:var(--ash-1);
    border:1px solid var(--hair-2);border-radius:var(--r);padding:.4rem;box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:60}
  .navitem:hover .drop,.navitem:focus-within .drop{opacity:1;visibility:visible;transform:none}
  .drop a{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-decoration:none;
    font-family:var(--f-head);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
    padding:.6rem .7rem;border-radius:6px;transition:background .18s,color .18s}
  .drop a:hover{background:rgba(232,93,42,.1);color:var(--ink)}
  .drop a .soon{color:var(--faint);font-size:.62rem;letter-spacing:.1em}
  .drop a .ext{color:var(--gold);opacity:.8}
  .hspace{flex:1}
  .hcta{display:flex;align-items:center;gap:.5rem;flex:none}
  .ipbtn{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-family:ui-monospace,Menlo,monospace;
    font-size:.78rem;color:var(--ink);background:linear-gradient(180deg,rgba(232,93,42,.16),rgba(232,93,42,.04));
    border:1px solid var(--ember);border-radius:6px;padding:.55rem .8rem;transition:box-shadow .25s,background .25s}
  .ipbtn:hover{background:linear-gradient(180deg,rgba(232,93,42,.28),rgba(232,93,42,.08));box-shadow:0 0 20px -5px rgba(232,93,42,.6)}
  .ipbtn .k{color:var(--muted);font-family:var(--f-head);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase}
  .burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem}
  .burger span{width:22px;height:2px;background:var(--gold-soft);border-radius:2px}

  /* mobile menu */
  .mmenu{position:fixed;inset:66px 0 0;z-index:45;background:var(--ash);border-top:1px solid var(--hair);
    padding:1.2rem clamp(1.1rem,4vw,2rem);overflow-y:auto;transform:translateX(100%);transition:transform .3s;display:none}
  body.menu-open .mmenu{transform:none}
  .mgroup{border-bottom:1px solid var(--hair);padding:.4rem 0}
  .mgroup>span{font-family:var(--f-head);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;padding:.7rem 0 .3rem}
  .mmenu a{display:block;text-decoration:none;font-family:var(--f-head);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);padding:.62rem .2rem}
  .mmenu a:hover{color:var(--ink)}

  /* ---------------- buttons ---------------- */
  .btn{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;text-decoration:none;
    font-family:var(--f-head);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
    padding:.85rem 1.4rem;border-radius:6px;border:1px solid var(--ember);color:#fff;
    background:linear-gradient(180deg,rgba(232,93,42,.28),rgba(232,93,42,.08));transition:box-shadow .25s,transform .12s,background .25s}
  .btn:hover{background:linear-gradient(180deg,rgba(232,93,42,.42),rgba(232,93,42,.14));box-shadow:0 0 28px -6px rgba(232,93,42,.65)}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{border-color:var(--hair-2);background:var(--glass);color:var(--ink-dim)}
  .btn.ghost:hover{border-color:var(--gold);color:#fff;box-shadow:none}

  /* ---------------- section frame ---------------- */
  .page{padding:clamp(3rem,8vw,6rem) 0}
  #p-home.page{padding-top:0}
  .page.narrow .shell{max-width:900px}
  .sec-head{margin-bottom:2.4rem}
  .kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-head);font-size:.7rem;
    letter-spacing:.36em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1rem}
  .kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
  .sec-head h2{font-family:var(--f-head);font-size:clamp(1.9rem,5vw,3rem);line-height:1.05;letter-spacing:.01em}
  .sec-head p{color:var(--muted);max-width:60ch;margin-top:1rem;font-size:1.08rem}
  .lead{font-family:var(--f-quote);font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.5;color:var(--ink-dim);max-width:60ch}

  /* ---------------- hero ---------------- */
  .hero{min-height:min(calc(100svh - 67px),980px);display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:1.3rem;padding:2rem 0 3rem;position:relative}
  .hero .kicker{margin-bottom:.2rem}
  .wordmark{font-family:var(--f-display);font-weight:700;line-height:.88;margin:0;
    font-size:clamp(3.6rem,16vw,11rem);letter-spacing:.015em;
    background:linear-gradient(178deg,#ffe6b0 4%,var(--gold-soft) 26%,var(--ember-hot) 58%,var(--ember) 74%,var(--crimson) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(232,93,42,.4))}
  .hero .tag{font-family:var(--f-head);font-size:clamp(1.15rem,3.2vw,1.9rem);letter-spacing:.02em;color:var(--ink);margin:0}
  .hero .sub{max-width:46ch;color:var(--muted);font-size:clamp(1.02rem,2.4vw,1.18rem);margin:0 auto}
  .hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.4rem}
  .players{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);font-family:var(--f-head);
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.3rem}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.4s ease-in-out infinite}
  .players b{color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:.95rem;letter-spacing:0}
  .scroll-cue{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
    align-items:center;gap:.5rem;color:var(--faint);font-family:var(--f-head);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase}
  .scroll-cue .ln{width:1px;height:30px;background:linear-gradient(var(--gold),transparent);overflow:hidden;position:relative}
  .scroll-cue .ln::after{content:"";position:absolute;top:-30px;left:0;width:100%;height:30px;background:linear-gradient(var(--ember-hot),transparent);animation:fall 2.2s ease-in-out infinite}

  /* ---------------- pillars ---------------- */
  .grid{display:grid;gap:1rem}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .card{background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.6));border:1px solid var(--hair);
    border-radius:var(--r);padding:1.6rem;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
  .card:hover{border-color:var(--hair-2);transform:translateY(-3px)}
  .card .rune{width:34px;height:34px;color:var(--ember);margin-bottom:1rem}
  .card h3{font-family:var(--f-head);font-size:1.06rem;letter-spacing:.04em;margin-bottom:.5rem;color:var(--ink)}
  .card p{color:var(--muted);font-size:.98rem;margin:0}
  .card.link{cursor:pointer}
  .card.link h3{color:var(--gold-soft)}

  /* pillar accent bar top */
  .pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--crimson),var(--ember),var(--gold));opacity:.7}

  /* ---------------- timeline ---------------- */
  .timeline{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--hair-2);margin-left:.5rem}
  .mile{position:relative;padding:0 0 1.8rem 1.8rem}
  .mile::before{content:"";position:absolute;left:-6px;top:4px;width:11px;height:11px;border-radius:50%;
    background:var(--ash);border:2px solid var(--gold)}
  .mile.done::before{background:var(--ember);border-color:var(--ember);box-shadow:0 0 12px var(--ember)}
  .mile .st{font-family:var(--f-head);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
  .mile h4{font-family:var(--f-head);font-size:1.15rem;letter-spacing:.03em;margin:.25rem 0 .3rem;color:var(--ink)}
  .mile p{color:var(--muted);font-size:.98rem;margin:0}

  /* ---------------- status band ---------------- */
  .band{background:linear-gradient(180deg,rgba(232,93,42,.1),rgba(12,9,7,.4));border:1px solid var(--hair-2);
    border-radius:var(--r);padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:center;text-align:center}
  .band h3{font-family:var(--f-head);font-size:clamp(1.4rem,3.5vw,2rem);letter-spacing:.02em;flex-basis:100%}
  .band .row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:center}

  /* ---------------- rules ---------------- */
  .law{margin-bottom:1.8rem}
  .law h3{font-family:var(--f-head);font-size:1.1rem;letter-spacing:.05em;color:var(--gold-soft);
    display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem}
  .law h3 .no{font-family:var(--f-display);font-size:1.5rem;color:var(--ember);line-height:1}
  .law ul{margin:0;padding-left:1.1rem;color:var(--ink-dim)}
  .law li{margin:.4rem 0}
  .law li::marker{color:var(--gold-dim)}

  /* ---------------- faq ---------------- */
  details.qa{border-bottom:1px solid var(--hair);padding:.3rem 0}
  details.qa summary{cursor:pointer;list-style:none;padding:1rem .2rem;font-family:var(--f-head);
    font-size:.95rem;letter-spacing:.03em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
  details.qa summary::-webkit-details-marker{display:none}
  details.qa summary::after{content:"+";color:var(--ember);font-size:1.4rem;font-family:var(--f-body);line-height:1;transition:transform .2s}
  details.qa[open] summary::after{transform:rotate(45deg)}
  details.qa .a{padding:0 .2rem 1.1rem;color:var(--muted);max-width:70ch}
  details.qa .a a{color:var(--gold-soft)}

  /* ---------------- commands table ---------------- */
  .twrap{overflow-x:auto;scroll-behavior:smooth;border:1px solid var(--hair);border-radius:var(--r)}
  table.cmd{border-collapse:collapse;width:100%;min-width:520px}
  table.cmd caption{caption-side:top;text-align:left;font-family:var(--f-head);font-size:.66rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--gold);padding:1rem 1.1rem .4rem;background:rgba(232,93,42,.05)}
  table.cmd td{padding:.75rem 1.1rem;border-top:1px solid var(--hair);vertical-align:top;font-size:.96rem}
  table.cmd td.c{font-family:ui-monospace,Menlo,monospace;color:var(--ember-hot);white-space:nowrap;font-size:.9rem}
  table.cmd td.d{color:var(--muted)}
  table.cmd tr:hover td{background:rgba(201,162,75,.04)}

  /* ---------------- store ---------------- */
  .rank{text-align:center;display:flex;flex-direction:column}
  .rank .tier{font-family:var(--f-head);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
  .rank .name{font-family:var(--f-display);font-size:1.9rem;color:var(--ink);margin:.3rem 0}
  .rank .price{font-family:var(--f-head);font-size:1.1rem;color:var(--ember-hot);margin-bottom:1rem}
  .rank ul{list-style:none;padding:0;margin:0 0 1.4rem;color:var(--muted);font-size:.94rem;text-align:left;display:grid;gap:.45rem}
  .rank ul li{padding-left:1.2rem;position:relative}
  .rank ul li::before{content:"✦";position:absolute;left:0;color:var(--gold-dim)}
  .rank .btn{margin-top:auto;justify-content:center}
  .rank.feat{border-color:var(--ember)}
  .coin{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:1.4rem 1.6rem;margin-bottom:1.6rem}
  .coin .orb{width:46px;height:46px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 30%,#ffe08a,var(--gold) 55%,#7a5a1e);box-shadow:0 0 20px rgba(201,162,75,.4)}

  /* ---------------- news ---------------- */
  .entry{border-left:2px solid var(--hair-2);padding:0 0 2rem 1.6rem;position:relative}
  .entry::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember)}
  .entry .date{font-family:var(--f-head);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
  .entry h3{font-family:var(--f-head);font-size:1.3rem;letter-spacing:.02em;margin:.3rem 0 .6rem;color:var(--ink)}
  .entry p{color:var(--muted);margin:0;max-width:66ch}

  /* ---------------- big split (community/map/about) ---------------- */
  .split{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
  .feature-card{background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.5));border:1px solid var(--hair-2);
    border-radius:var(--r);padding:clamp(1.8rem,4vw,2.6rem);display:flex;flex-direction:column;gap:1rem;min-height:220px}
  .feature-card h3{font-family:var(--f-display);font-size:1.9rem;color:var(--ink)}
  .feature-card p{color:var(--muted);margin:0;flex:1}
  .feature-card.soon{opacity:.72}
  .feature-card .tagline{font-family:var(--f-quote);font-style:italic;color:var(--gold-soft);font-size:1.15rem}

  .quote-block{border:1px solid var(--hair);border-left:3px solid var(--ember);border-radius:var(--r);
    padding:clamp(1.6rem,4vw,2.4rem);background:rgba(232,93,42,.05);font-family:var(--f-quote);
    font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.4;color:var(--ink-dim);font-style:italic}

  /* ---------------- footer ---------------- */
  .site-footer{border-top:1px solid var(--hair);margin-top:2rem;padding:clamp(2.4rem,5vw,3.5rem) 0 2.4rem;position:relative;z-index:2;background:linear-gradient(rgba(11,9,8,0),rgba(6,5,4,.6))}
  .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
  .fcol h5{font-family:var(--f-head);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
  .fcol a{display:block;text-decoration:none;color:var(--muted);font-size:.95rem;padding:.28rem 0;transition:color .18s}
  .fcol a:hover{color:var(--ink)}
  .fcol .about{color:var(--muted);font-size:.95rem;max-width:34ch}
  .fbrand{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
  .fbrand b{font-family:var(--f-head);letter-spacing:.28em;font-size:.8rem;text-transform:uppercase}
  .fnote{border-top:1px solid var(--hair);margin-top:2.4rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;
    justify-content:space-between;gap:.6rem;color:var(--faint);font-family:var(--f-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}

  /* ---------------- toast ---------------- */
  .toast{position:fixed;left:50%;bottom:8%;transform:translate(-50%,14px);z-index:99;background:var(--ash-2);
    border:1px solid var(--ember);border-radius:6px;padding:.7rem 1.2rem;font-family:var(--f-head);font-size:.68rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;pointer-events:none;
    transition:opacity .35s,transform .35s;box-shadow:0 0 30px -6px rgba(232,93,42,.6)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  .fade{animation:fade .6s ease}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes fall{0%{transform:translateY(0)}60%,100%{transform:translateY(60px)}}

  /* ---------------- responsive ---------------- */
  @media (max-width:900px){
    .cols-3{grid-template-columns:repeat(2,1fr)}
    .fgrid{grid-template-columns:1fr 1fr}
    .fcol.wide{grid-column:1/-1}
  }
  @media (max-width:760px){
    nav.main,.hcta .ipbtn{display:none}
    .burger{display:flex}
    .hspace{flex:1}
    .mmenu{display:block}
  }
  @media (max-width:620px){
    body{font-size:17px}
    .cols-3,.cols-2,.split{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .fade,.dot,.scroll-cue .ln::after{animation:none}
    *{transition:none!important}
  }

  .brand-logo{height:40px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(232,93,42,.45))}
  .brand-logo.foot{height:56px}
  .wordmark-wrap{margin:0;line-height:0;display:flex;justify-content:center}
  .wordmark-img{width:min(680px,86vw,67vh);height:auto;filter:drop-shadow(0 10px 40px rgba(232,93,42,.4)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}
  @media (max-width:620px){.brand-logo{height:34px}.wordmark-img{width:90vw}}

  .status{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem 1.1rem;margin:0 0 .9rem;font-family:var(--f-head);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .status .live{color:var(--ink);display:inline-flex;align-items:center;gap:.45rem}
  .status .live i{width:7px;height:7px;border-radius:50%;background:#5fd07a;box-shadow:0 0 8px #5fd07a;animation:stpulse 2.4s ease-in-out infinite}
  @keyframes stpulse{0%,100%{opacity:1}50%{opacity:.4}}
  .road{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
  .road .col{background:rgba(20,15,11,.55);border:1px solid rgba(201,162,75,.22);border-radius:8px;padding:1.1rem 1.15rem}
  .road .col.live{border-color:rgba(232,93,42,.5);box-shadow:0 0 30px -14px rgba(232,93,42,.6)}
  .road h4{font-family:var(--f-head);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#D8B463;margin:0 0 .15rem}
  .road .sub{font-size:.9rem;color:var(--faint);margin:0 0 .8rem;font-style:italic}
  .road ul{margin:0;padding-left:1.05rem;color:var(--muted)}
  .road li{margin:.3rem 0}
  .road .live li{color:var(--ink)}
  .road li ul{margin:.2rem 0 .3rem;padding-left:1rem;color:var(--faint)}
  .hero{position:relative;isolation:isolate}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.5;pointer-events:none;display:none}
  .has-trailer .hero-video{display:block}
  .modal{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:1rem}
  .modal .mbox{position:relative;width:min(1100px,96vw);aspect-ratio:16/9;background:#000;border:1px solid rgba(201,162,75,.3);border-radius:8px;overflow:hidden}
  .modal video{width:100%;height:100%;display:block}
  .modal .x{position:absolute;top:.3rem;right:.6rem;z-index:2;background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer;line-height:1}
  .bgslot,#p-community>.shell,#p-map>.shell,#p-store>.shell{position:relative;isolation:isolate}
  .bgslot::before,#p-community>.shell::before,#p-map>.shell::before,#p-store>.shell::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg,none) center/cover no-repeat;opacity:.26;-webkit-mask:linear-gradient(#000 45%,transparent);mask:linear-gradient(#000 45%,transparent);pointer-events:none}
  /* background photos: none ship yet. Give a .bgslot, or one of the three shells above, --bg:url(/media/<file>.jpg) once the file exists. */
  /* ---------------- mods: accordion rows ---------------- */
  .modlist{display:flex;flex-direction:column;gap:.7rem}
  details.modrow{background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55));border:1px solid var(--hair);
    border-radius:var(--r);overflow:hidden;transition:border-color .25s}
  details.modrow[open]{border-color:var(--hair-2)}
  details.modrow > summary{cursor:pointer;list-style:none;padding:1.15rem 1.3rem;display:flex;align-items:center;gap:1rem}
  details.modrow > summary::-webkit-details-marker{display:none}
  details.modrow > summary:hover{background:rgba(232,93,42,.05)}
  .modrow .mrune{width:30px;height:30px;flex:none;color:var(--ember)}
  .modrow .mhead{flex:1;min-width:0}
  .modrow .mname{font-family:var(--f-head);font-size:1.02rem;letter-spacing:.05em;color:var(--ink);display:block}
  .modrow .mhook{color:var(--muted);font-size:.95rem;display:block;margin-top:.18rem}
  .modrow .mchev{width:9px;height:9px;flex:none;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
    transform:rotate(45deg);transition:transform .22s;margin-right:.3rem}
  details.modrow[open] .mchev{transform:rotate(225deg)}
  .modrow .mbody{padding:0 1.3rem 1.4rem;border-top:1px solid var(--hair)}
  .modrow .mbody > p{color:var(--ink-dim);margin:1.1rem 0 .9rem;max-width:72ch}
  .modrow ul.mpts{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.42rem}
  .modrow ul.mpts li{position:relative;padding-left:1.15rem;color:var(--muted);font-size:.97rem}
  .modrow ul.mpts li::before{content:"\2726";position:absolute;left:0;color:var(--gold-dim)}
  .modrow ul.mpts li b{color:var(--ink-dim);font-weight:600}
  .mstats{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
  .mstat{font-family:var(--f-head);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);
    border:1px solid var(--hair-2);border-radius:999px;padding:.36rem .75rem;background:rgba(201,162,75,.05)}
  .modrow .mfoot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
  details.modrow.soon{opacity:.66}
  details.modrow.soon > summary{cursor:default}
  details.modrow.soon .mchev{display:none}
  .soontag{font-family:var(--f-head);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
    border:1px solid var(--hair);border-radius:999px;padding:.32rem .7rem;flex:none}

  .modhalf{margin:2.2rem 0 1rem}
  .modhalf:first-of-type{margin-top:0}
  .modhalf h3{font-family:var(--f-head);font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:.03em;color:var(--ink);line-height:1.1}
  .modhalf p{color:var(--muted);max-width:68ch;margin-top:.55rem}
  .modlist + .modhalf{margin-top:2.8rem;padding-top:2.2rem;border-top:1px solid var(--hair)}

  /* ---------------- mod pages ---------------- */
  .modhero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;margin-bottom:2.6rem}
  .modhero .lede{font-family:var(--f-quote);font-size:clamp(1.15rem,2.4vw,1.42rem);line-height:1.5;color:var(--ink-dim);margin:.9rem 0 1.1rem}
  .shot{position:relative;border:1px dashed var(--hair-2);border-radius:var(--r);background:
    repeating-linear-gradient(45deg,rgba(201,162,75,.035) 0 12px,transparent 12px 24px),rgba(12,9,7,.5);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.4rem;gap:.5rem}
  .shot.wide{aspect-ratio:16/9}
  .shot.tall{aspect-ratio:4/3}
  .shot .stag{font-family:var(--f-head);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim)}
  .shot .swhat{color:var(--muted);font-size:.92rem;max-width:38ch;line-height:1.45}
  .shotgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.6rem 0 2.2rem}
  .modsec{margin:2.6rem 0}
  .modsec h3{font-family:var(--f-head);font-size:1.22rem;letter-spacing:.04em;color:var(--gold-soft);margin-bottom:.9rem}
  .modsec p{color:var(--muted);max-width:74ch}
  .modsec ul{margin:0;padding-left:1.1rem;color:var(--muted);max-width:74ch}
  .modsec ul li{margin:.45rem 0}
  .modsec ul li b{color:var(--ink-dim);font-weight:600}
  .backlink{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-head);font-size:.66rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:1.4rem}
  .backlink:hover{color:var(--ink)}
  .notecard{border:1px solid var(--hair);border-left:3px solid var(--gold-dim);border-radius:var(--r);
    padding:1.1rem 1.3rem;background:rgba(201,162,75,.04);color:var(--muted);font-size:.95rem;max-width:74ch}
  @media (max-width:820px){.modhero{grid-template-columns:1fr}.shotgrid{grid-template-columns:1fr}}
  .gs-cmd{font-family:ui-monospace,Menlo,monospace;font-size:.88em;color:var(--ember-hot);white-space:nowrap}
  /* the header nav carries one item more since Getting Started, so the row is tightened
     a little, and the labels are held on one line at the widths where the row fits. */
  nav.main{margin-left:.2rem}
  .navitem>a,.navitem>button{padding:.7rem .62rem;letter-spacing:.13em}
  @media (min-width:1160px){.navitem>a,.navitem>button{white-space:nowrap}}



  /* ---------------- the Codex (lore wiki) ---------------- */
  .wk-shell{max-width:1160px}
  .wk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding:.6rem 0 1.1rem;border-bottom:1px solid var(--hair);margin-bottom:1.8rem;position:relative}
  .wk-brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--f-head);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
  .wk-sigil{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffd27a,var(--ember) 60%,var(--crimson));box-shadow:0 0 8px rgba(232,93,42,.7)}
  .wk-nav{display:flex;flex-wrap:wrap;gap:.1rem .2rem;flex:1}
  .wk-nav a{font-family:var(--f-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.45rem .55rem;border-radius:5px}
  .wk-nav a:hover,.wk-nav a.on{color:var(--ink);background:rgba(232,93,42,.08)}
  .wk-search{position:relative;flex:none}
  .wk-search input{background:var(--ash-1);border:1px solid var(--hair-2);border-radius:6px;color:var(--ink);font-family:var(--f-body);font-size:.95rem;padding:.5rem .8rem;width:220px;outline:none}
  .wk-search input:focus{border-color:var(--gold)}
  .wk-hits{position:absolute;right:0;top:calc(100% + 4px);width:300px;background:var(--ash-1);border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--shadow);z-index:40;max-height:340px;overflow:auto;padding:.35rem}
  .wk-hits a{display:flex;justify-content:space-between;gap:.8rem;text-decoration:none;padding:.5rem .6rem;border-radius:5px;color:var(--ink-dim);font-size:.95rem}
  .wk-hits a:hover{background:rgba(232,93,42,.1);color:var(--ink)}
  .wk-hits a small{color:var(--faint);font-family:var(--f-head);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .wk-crumb{font-family:var(--f-head);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.2rem}
  .wk-crumb a{color:var(--muted);text-decoration:none}.wk-crumb a:hover{color:var(--ink)}.wk-crumb i{font-style:normal;color:var(--gold-dim);margin:0 .2rem}
  .wk-head{margin-bottom:1.6rem}
  .wk-head h1{font-family:var(--f-head);font-size:clamp(2rem,5vw,3.1rem);line-height:1.05;letter-spacing:.01em;margin:.2rem 0 0}
  .wk-hook{font-family:var(--f-quote);font-style:italic;font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--gold-soft);margin:.7rem 0 0;max-width:62ch}
  .wk-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
  .wk-main{min-width:0}
  .wk-lead{font-size:1.12rem;color:var(--ink-dim)}
  .wk-lead p{max-width:72ch}
  .wk-lead.wk-wide{max-width:80ch;margin-bottom:1.6rem}
  .wk-sec{margin:1.9rem 0}
  .wk-sec h3{font-family:var(--f-head);font-size:1.12rem;letter-spacing:.05em;color:var(--gold-soft);margin:0 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--hair)}
  .wk-sec h3 small{font-family:var(--f-quote);font-style:italic;letter-spacing:0;text-transform:none;font-size:.95rem;color:var(--faint);margin-left:.5rem}
  .wk-sec p{color:var(--ink-dim);max-width:72ch}
  .wk-sec ul{color:var(--ink-dim);max-width:72ch}
  .wk-main a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.35)}
  .wk-main a:hover{color:var(--ink);border-bottom-color:var(--gold)}
  .wk-vars{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;max-width:76ch}
  .wk-vars dt{font-family:var(--f-head);font-size:.82rem;letter-spacing:.04em;color:var(--ink);padding-top:.1rem}
  .wk-vars dd{margin:0;color:var(--muted);font-size:.97rem}
  .wk-box{position:sticky;top:82px;margin-top:2.4rem;background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55));border:1px solid var(--hair-2);border-radius:var(--r);padding:.9rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;min-width:0}
  .wk-box .shot{aspect-ratio:4/5;padding:1rem;width:100%;min-width:0;box-sizing:border-box}
  .wk-glance{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.92rem;overflow-wrap:anywhere}
  .wk-glance th{font-family:var(--f-head);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);text-align:left;padding:.42rem .3rem .42rem 0;vertical-align:top;width:38%;border-top:1px solid var(--hair)}
  .wk-glance td{color:var(--ink-dim);padding:.42rem 0;border-top:1px solid var(--hair);vertical-align:top}
  .wk-glance tr:first-child th,.wk-glance tr:first-child td{border-top:0}
  .wk-gaps[hidden]{display:none}
  .wk-gl-game th{color:var(--ember-hot)}
  .wk-gl-game td{color:var(--ink-dim)}
  .wk-gl-game th::after{content:"in game";display:block;font-size:.5rem;letter-spacing:.14em;color:var(--muted);margin-top:.15rem}
  .wk-gl-game th,.wk-gl-game td{border-top:1px solid var(--ember-hot) !important;opacity:.95}
  .wk-gaptoggle{background:none;border:1px solid var(--hair-2);color:var(--muted);font-family:var(--f-head);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;padding:.36rem .7rem;border-radius:4px;cursor:pointer;margin-left:.6rem}
  .wk-gaptoggle:hover{color:var(--gold);border-color:var(--gold-dim)}
  .wk-gaptoggle[aria-pressed="true"]{color:#0B0908;background:var(--gold);border-color:var(--gold)}
  .wk-gaps{margin:2rem 0 0;border:1px dashed var(--gold-dim);border-radius:var(--r);padding:1rem 1.2rem;background:rgba(201,162,75,.04)}
  .wk-gaptag{display:inline-block;font-family:var(--f-head);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:#0B0908;background:var(--gold);padding:.3rem .6rem;border-radius:4px}
  .wk-gapnote{color:var(--faint);font-size:.9rem;margin:.6rem 0 .4rem}
  .wk-gaps ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.95rem;columns:2;column-gap:2rem}
  .wk-gaps li{break-inside:avoid;margin:.2rem 0}
  .wk-see{margin:1.8rem 0 0;padding-top:1rem;border-top:1px solid var(--hair)}
  .wk-seelist{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
  .wk-seelist a{font-family:var(--f-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--hair-2);border-radius:999px;padding:.4rem .8rem;text-decoration:none}
  .wk-seelist a:hover{border-color:var(--gold);color:var(--ink)}
  .wk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:1.4rem 0 2rem}
  .wk-tile{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.5));border:1px solid var(--hair);border-radius:var(--r);padding:1.1rem 1.2rem;transition:border-color .2s,transform .2s}
  .wk-tile:hover{border-color:var(--hair-2);transform:translateY(-2px)}
  .wk-tnum{font-family:var(--f-display);font-size:1.6rem;color:var(--ember);line-height:1}
  .wk-tname{font-family:var(--f-head);font-size:.95rem;letter-spacing:.05em;color:var(--ink)}
  .wk-tsub{color:var(--muted);font-size:.93rem}
  .wk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;margin:.8rem 0 .4rem}
  .wk-card{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;border:1px solid var(--hair);border-radius:8px;padding:.9rem 1rem;background:rgba(20,15,11,.55);transition:border-color .2s}
  .wk-card:hover{border-color:var(--gold)}
  .wk-cname{font-family:var(--f-head);font-size:.98rem;letter-spacing:.04em;color:var(--ink)}
  .wk-csub{font-family:var(--f-quote);font-style:italic;color:var(--gold-soft);font-size:.98rem}
  .wk-cmeta{font-family:var(--f-head);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:.3rem}
  .wk-tbl{margin:.4rem 0 1rem}
  .wk-roster th{font-family:var(--f-head);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);text-align:left;padding:.6rem 1.1rem;background:rgba(232,93,42,.05)}
  .wk-roster td.c a{color:var(--ember-hot);text-decoration:none}
  .wk-stat{font-family:var(--f-head);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:1rem}
  .wk-varlist{display:grid;gap:.5rem;max-width:80ch}
  .wk-varrow{display:grid;grid-template-columns:minmax(150px,.9fr) 2.4fr auto;gap:.3rem 1rem;align-items:baseline;text-decoration:none;border:1px solid var(--hair);border-radius:8px;padding:.7rem .9rem;background:rgba(20,15,11,.45);transition:border-color .2s}
  .wk-main a.wk-varrow{border-bottom:1px solid var(--hair)}
  .wk-main a.wk-varrow:hover{border-color:var(--gold)}
  .wk-varrow-static{opacity:.75}
  .wk-vname{font-family:var(--f-head);font-size:.86rem;letter-spacing:.04em;color:var(--ink)}
  .wk-vname small{display:block;font-family:var(--f-quote);font-style:italic;letter-spacing:0;text-transform:none;font-size:.95rem;color:var(--gold-soft)}
  .wk-vnote{color:var(--muted);font-size:.93rem;line-height:1.45}
  .wk-vgo{font-family:var(--f-head);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap}
  .wk-crimsontag{color:var(--crimson)}
  .wk-box .shot.wk-env{aspect-ratio:16/10}
  .wk-lore .wk-lorebody{color:var(--ink-dim);max-width:72ch}
  .wk-lore .wk-lorebody h4{font-family:var(--f-head);font-size:.95rem;letter-spacing:.05em;color:var(--ink);margin:1.3rem 0 .4rem}
  .wk-lore .wk-lorebody h5{font-family:var(--f-head);font-size:.82rem;letter-spacing:.05em;color:var(--gold-soft);margin:1.1rem 0 .3rem}
  .wk-lore .wk-lorebody blockquote{margin:1rem 0;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--gold-dim);font-family:var(--f-quote);font-style:italic;font-size:1.08rem;color:var(--gold-soft)}
  .wk-lore .wk-lorebody code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;color:var(--gold-soft)}
  .wk-lorepart{margin:1.1rem 0}
  .wk-lorepart h4{font-family:var(--f-head);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 .6rem}
  .wk-loreshot{margin:1.1rem 0;aspect-ratio:16/7;max-width:72ch}
  .wk-fig,.wk-box .shot.wk-fig{padding:0;overflow:hidden;position:relative;display:block;margin:0;border:1px solid var(--hair-2);background:#000}
  .wk-fig img{display:block;width:100%;height:100%;object-fit:cover}
  .wk-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:.65rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.84));display:flex;flex-direction:column;gap:.15rem;pointer-events:none}
  .wk-fig .swhat{font-size:.78rem;max-width:none;color:var(--ink-dim);line-height:1.35}
  .wk-gallerysec h3 small{font-family:var(--f-body);font-size:.8rem;color:var(--faint);letter-spacing:0;text-transform:none;font-weight:400;margin-left:.5rem}
  .wk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-top:1rem}
  .wk-gtile{margin:0;border:1px solid var(--hair-2);border-radius:var(--r);overflow:hidden;background:rgba(12,9,7,.55)}
  .wk-gtile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .wk-gtile figcaption{padding:.55rem .65rem .65rem;font-size:.82rem;line-height:1.35;display:flex;flex-direction:column;gap:.1rem}
  .wk-gtile b{font-family:var(--f-head);font-weight:600;letter-spacing:.04em;color:var(--gold-soft)}
  .wk-gtile i{font-family:var(--f-quote);color:var(--ink-dim)}
  .wk-gtile small{color:var(--faint);font-size:.74rem}
  .wk-loading{color:var(--faint);font-family:var(--f-quote);font-style:italic;padding:3rem 0}
  .wk-lorefig{margin:1.1rem 0;max-width:72ch}
  .wk-lorefig img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--hair-2)}
  .wk-lorefig figcaption{font-family:var(--f-quote);font-style:italic;color:var(--faint);font-size:.95rem;margin-top:.45rem}
  .wk-loreempty{border:1px dashed var(--hair-2);border-radius:var(--r);padding:1rem 1.2rem;background:rgba(232,93,42,.03)}
  .wk-loreempty p{color:var(--muted);margin:.6rem 0 0;font-size:.97rem}
  .wk-loretag{background:var(--ember);color:#0B0908}
  .wk-lorefile{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--faint)}
  @media (max-width:900px){.wk-grid{grid-template-columns:1fr}.wk-box{position:static;order:-1}.wk-box .shot{aspect-ratio:16/9}.wk-box .wk-fig{aspect-ratio:auto;max-width:440px;margin:0 auto;width:100%}.wk-box .wk-fig img{height:auto}.wk-gaps ul{columns:1}
    .wk-search input{width:100%}.wk-search{flex:1 1 100%}.wk-hits{width:100%}.wk-varrow{grid-template-columns:1fr}}

/* ==================================================================
   NEWS, second pass: hub and article
   Paste at the END of the existing style block in index.html, just above
   the closing style tag. It declares no variable, no font and no keyframe
   that already exists. Every class is prefixed .nw- apart from two
   deliberate retunes of .shot, each written .nw-media > .shot so it wins
   on specificity as well as on source order.

   Never write a closing style tag inside these comments. The parser ends
   the style element at the first one it sees, comment or not.

   Layout: mobile first, one column. Two columns at 620px, three at 980px,
   and the featured block splits at 900px.
   ================================================================== */

.nw-hub{display:block}
.nw-head{margin-bottom:clamp(1.8rem,4vw,2.4rem)}

/* ---------------- category accents ---------------- */
/* one custom property per category, read by both the pill and the chip */

.nw-cat,.nw-chip{--nw-ac:var(--gold-soft)}
.nw-cat[data-c="announcement"],.nw-chip[data-c="announcement"]{--nw-ac:var(--ember-hot)}
.nw-cat[data-c="update"],      .nw-chip[data-c="update"]      {--nw-ac:var(--gold-soft)}
.nw-cat[data-c="patch-notes"], .nw-chip[data-c="patch-notes"] {--nw-ac:var(--ink-dim)}
.nw-cat[data-c="event"],       .nw-chip[data-c="event"]       {--nw-ac:var(--ember)}
.nw-cat[data-c="community"],   .nw-chip[data-c="community"]   {--nw-ac:var(--ok)}
.nw-cat[data-c="lore"],        .nw-chip[data-c="lore"]        {--nw-ac:var(--muted)}

.nw-cat{display:inline-flex;align-items:center;font-family:var(--f-head);font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;
  padding:.42rem .72rem;border-radius:999px;color:var(--nw-ac);
  border:1px solid var(--hair-2);background:var(--glass)}
.nw-cat{border-color:color-mix(in srgb,var(--nw-ac) 42%,transparent);
  background:color-mix(in srgb,var(--nw-ac) 12%,var(--glass))}

/* pinned onto the artwork */
.nw-cat.nw-over{position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:color-mix(in srgb,var(--ash) 78%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* ---------------- artwork, real or owed ---------------- */

.nw-media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ash-1)}
.nw-media>.nw-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.nw-media>.shot.wide{aspect-ratio:16/9;margin:0;padding:1.1rem;border-radius:var(--r)}
.nw-media>.shot.wide .swhat{max-width:34ch;font-size:.86rem}

/* ---------------- the featured post ---------------- */

.nw-feat{margin:0 0 clamp(2.2rem,5vw,3.2rem)}
/* written .nw-hit.nw-feathit so it beats the card rule below on specificity,
   not only on source order */
.nw-hit.nw-feathit{display:grid;gap:0;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--hair-2);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55));
  transition:border-color .25s,transform .25s,box-shadow .25s}
.nw-hit.nw-feathit:hover{border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:var(--shadow)}
.nw-hit.nw-feathit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.nw-featmedia{border-radius:0}
.nw-featmedia>.shot.wide{border-radius:0;border-width:0 0 1px 0}
.nw-featcopy{padding:clamp(1.35rem,3.4vw,2.3rem);display:flex;flex-direction:column;align-items:flex-start}
.nw-flag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-head);font-size:.6rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.9rem}
.nw-flag::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.nw-ft{font-family:var(--f-head);font-size:clamp(1.5rem,3.6vw,2.25rem);line-height:1.12;letter-spacing:.01em;
  color:var(--ink);margin:0 0 .8rem;max-width:20ch;transition:color .2s}
.nw-feathit:hover .nw-ft{color:var(--gold-soft)}
.nw-fx{color:var(--muted);font-size:1.04rem;line-height:1.55;margin:0 0 1.2rem;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-fbtn{margin-top:.4rem;pointer-events:none}
.nw-feathit:hover .nw-fbtn{background:linear-gradient(180deg,rgba(232,93,42,.42),rgba(232,93,42,.14));
  box-shadow:0 0 28px -6px rgba(232,93,42,.65)}

/* ---------------- the filter bar ---------------- */

.nw-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;
  margin:0 0 clamp(1.2rem,3vw,1.8rem);padding-bottom:1rem;border-bottom:1px solid var(--hair)}
.nw-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.nw-chip{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55rem .9rem;border-radius:999px;line-height:1;
  border:1px solid var(--hair);background:rgba(12,9,7,.5);color:var(--muted);
  transition:border-color .2s,color .2s,background .2s}
.nw-chip:hover{border-color:var(--hair-2);color:var(--ink-dim)}
.nw-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nw-chip[aria-pressed="true"]{color:var(--nw-ac);border-color:color-mix(in srgb,var(--nw-ac) 52%,transparent);
  background:color-mix(in srgb,var(--nw-ac) 12%,transparent)}
.nw-n{font-family:var(--f-body);font-size:.8rem;letter-spacing:0;color:var(--faint);
  font-variant-numeric:tabular-nums}
.nw-chip[aria-pressed="true"] .nw-n{color:currentColor;opacity:.75}
.nw-count{margin:0;font-family:var(--f-head);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}

/* ---------------- the card grid ---------------- */

.nw-grid{display:grid;gap:clamp(1rem,2.4vw,1.4rem);grid-template-columns:minmax(0,1fr)}
.nw-card{display:flex;margin:0;min-width:0}

.nw-hit{display:flex;flex-direction:column;flex:1;min-width:0;text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55));
  border:1px solid var(--hair);border-radius:var(--r);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.nw-hit:hover{border-color:var(--hair-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.nw-hit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.nw-cardmedia{border-radius:0;border-bottom:1px solid var(--hair)}
.nw-cardmedia>.shot.wide{border-radius:0;border-width:0}
.nw-copy{padding:clamp(1.05rem,2.6vw,1.35rem);display:flex;flex-direction:column;flex:1}
.nw-ct{font-family:var(--f-head);font-size:clamp(1.08rem,2.3vw,1.22rem);line-height:1.22;letter-spacing:.02em;
  color:var(--ink);margin:0 0 .5rem;transition:color .2s}
.nw-hit:hover .nw-ct{color:var(--gold-soft)}
.nw-cx{color:var(--muted);font-size:.97rem;line-height:1.5;margin:0 0 1.1rem;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.nw-cfoot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-top:auto;
  padding-top:.85rem;border-top:1px solid var(--hair);
  font-family:var(--f-head);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.nw-date{color:var(--gold-soft)}
.nw-by{color:var(--muted)}
.nw-rt{color:var(--faint)}
.nw-dot{width:3px;height:3px;border-radius:50%;background:var(--faint);flex:none;opacity:.8}
.nw-more{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;color:var(--muted);transition:color .2s}
.nw-hit:hover .nw-more{color:var(--ember-hot)}
.nw-ico{width:14px;height:14px;flex:none}

/* one card left over reads sideways rather than stranded in a wide row */
@media (min-width:720px){
  .nw-grid.nw-solo .nw-hit{flex-direction:row;align-items:stretch}
  .nw-grid.nw-solo .nw-cardmedia{flex:0 0 42%;border-bottom:0;border-right:1px solid var(--hair)}
  .nw-grid.nw-solo .nw-cardmedia>.nw-img{height:100%;aspect-ratio:auto}
  .nw-grid.nw-solo .nw-cardmedia>.shot.wide{height:100%;aspect-ratio:auto}
  .nw-grid.nw-solo .nw-copy{padding:clamp(1.3rem,3vw,1.9rem)}
  .nw-grid.nw-solo .nw-ct{font-size:clamp(1.2rem,2.6vw,1.45rem)}
}

/* ---------------- load more ---------------- */

.nw-loadwrap{display:flex;justify-content:center;margin-top:clamp(1.6rem,4vw,2.4rem)}
.nw-load{border:none}
.nw-load .nw-n{color:var(--faint)}
.nw-load:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------- notes and the Discord line ---------------- */

.nw-note{margin:0 0 1.8rem;max-width:74ch}
.nw-note a{color:var(--gold-soft)}
.nw-dis{margin:clamp(1.8rem,4vw,2.6rem) 0 0;color:var(--faint);font-size:.95rem}
.nw-dis a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hair-2)}
.nw-dis a:hover{color:var(--ember-hot);text-decoration-color:currentColor}

/* ==================================================================
   ONE ARTICLE
   ================================================================== */

/* the article sits on one centred measure. only the hero and the rail
   break out to the full width of the shell. */
.nw-col{max-width:720px;margin:0 auto}
.nw-single .backlink{margin-bottom:1.6rem}
.nw-art{margin:0}
.nw-arthead{max-width:720px;margin:0 auto clamp(1.5rem,3vw,2.1rem)}
.nw-ameta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-bottom:1.1rem}
.nw-metaline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase}
.nw-at{font-family:var(--f-head);font-size:clamp(1.8rem,5.2vw,3rem);line-height:1.06;letter-spacing:.01em;
  color:var(--ink);margin:0;max-width:22ch}

.nw-hero{margin:0 0 clamp(2rem,4.5vw,3rem)}
.nw-heromedia>.shot.wide{padding:clamp(1.2rem,3vw,2rem)}
.nw-heromedia>.shot.wide .swhat{max-width:44ch;font-size:.95rem}

.nw-artbody{max-width:720px;margin:0 auto}

/* the body itself. staff write plain HTML into the body field. */
.nw-body{color:var(--ink-dim);font-size:1.05rem;overflow-wrap:anywhere}
.nw-body > p:first-child{font-size:1.18rem;color:var(--ink);line-height:1.55}
.nw-body p{margin:0 0 1.15rem;max-width:70ch}
.nw-body h3{font-family:var(--f-head);font-size:1.16rem;letter-spacing:.045em;color:var(--gold-soft);margin:2.3rem 0 .8rem}
.nw-body h4{font-family:var(--f-head);font-size:1rem;letter-spacing:.04em;color:var(--ink-dim);margin:1.8rem 0 .6rem}
.nw-body ul{list-style:none;margin:0 0 1.35rem;padding:0;display:grid;gap:.5rem;max-width:70ch;color:var(--muted)}
.nw-body ul li{position:relative;padding-left:1.2rem}
.nw-body ul li::before{content:"\2726";position:absolute;left:0;top:0;color:var(--gold-dim);font-size:.85em}
.nw-body ol{margin:0 0 1.35rem;padding-left:1.25rem;max-width:70ch;color:var(--muted)}
.nw-body ol li{margin:.45rem 0}
.nw-body li b,.nw-body li strong{color:var(--ink-dim);font-weight:600}
.nw-body blockquote{margin:1.9rem 0;padding:1.15rem 1.4rem;max-width:70ch;
  border:1px solid var(--hair);border-left:3px solid var(--ember);border-radius:var(--r);
  background:rgba(232,93,42,.05);font-family:var(--f-quote);font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.38rem);line-height:1.45;color:var(--ink-dim)}
.nw-body blockquote p{margin:0 0 .6rem;max-width:none}
.nw-body blockquote p:last-child{margin:0}
.nw-body b,.nw-body strong{color:var(--ink);font-weight:600}
.nw-body em,.nw-body i{font-style:italic}
.nw-body a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-2)}
.nw-body a:hover{color:var(--ember-hot);text-decoration-color:currentColor}
.nw-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;color:var(--gold-soft);
  background:rgba(201,162,75,.07);border:1px solid var(--hair);border-radius:4px;padding:.08rem .35rem}
.nw-body img{display:block;width:100%;height:auto;margin:1.7rem 0;border:1px solid var(--hair);border-radius:var(--r)}
.nw-body hr{border:0;border-top:1px solid var(--hair);margin:2.3rem 0}
.nw-body > :last-child{margin-bottom:0}

/* share row */
.nw-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.4rem;
  margin-top:clamp(2rem,4vw,2.8rem);padding-top:1.4rem;border-top:1px solid var(--hair)}
.nw-share .nw-dis{margin:0;flex:1 1 16rem;min-width:0}
.nw-clink{flex:none;cursor:pointer}
.nw-clink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nw-clink.nw-ok{border-color:var(--ok);color:var(--ok)}

/* newer and older */
.nw-nav{display:grid;gap:.8rem;margin:clamp(2rem,4vw,2.8rem) 0 0;padding-top:1.5rem;border-top:1px solid var(--hair)}
.nw-navlink{display:block;text-decoration:none;color:inherit;padding:1rem 1.2rem;min-width:0;
  border:1px solid var(--hair);border-radius:var(--r);background:rgba(12,9,7,.42);
  transition:border-color .25s,background .25s}
.nw-navlink:hover{border-color:var(--hair-2);background:var(--panel)}
.nw-navlink:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nw-navlab{display:block;font-family:var(--f-head);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.4rem}
.nw-navtitle{display:block;font-family:var(--f-head);font-size:.98rem;letter-spacing:.02em;line-height:1.28;
  color:var(--gold-soft)}
.nw-prev{text-align:left}
.nw-next{text-align:right}

/* more from the wardens */
.nw-rail{margin-top:clamp(3rem,6vw,4.4rem);padding-top:clamp(1.8rem,4vw,2.4rem);border-top:1px solid var(--hair)}
.nw-rail .kicker{margin-bottom:1.3rem}
.nw-backwrap{margin-top:clamp(2rem,4vw,2.6rem)}
.nw-back{margin:0}

/* ==================================================================
   WIDER THAN A PHONE
   ================================================================== */

@media (min-width:620px){
  .nw-grid[data-cols="2"],.nw-grid[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nw-nav{grid-template-columns:1fr 1fr}
  .nw-nav .nw-next:only-child{grid-column:2}
}

@media (min-width:900px){
  .nw-feathit{grid-template-columns:1.12fr .88fr;align-items:stretch}
  .nw-featmedia{height:100%;min-height:clamp(250px,26vw,340px);border-bottom:0;border-right:1px solid var(--hair)}
  .nw-featmedia>.nw-img{height:100%;aspect-ratio:auto}
  .nw-featmedia>.shot.wide{height:100%;aspect-ratio:auto;border-width:0}
  .nw-featcopy{justify-content:center}
  .nw-heromedia>.nw-img,.nw-heromedia>.shot.wide{aspect-ratio:21/9}
}

@media (min-width:980px){
  .nw-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==================================================================
   ABOUT: the banner, the story, the vision, the team
   Paste this at the END of the existing style block in index.html, just
   above the closing style tag on line 369. It declares no variable, no
   font and no keyframe name that already exists, and every new class is
   prefixed .ab- so nothing else on the site can be touched by it.

   Note for anyone editing this file: never write a closing style tag in
   these comments. The HTML parser ends the style element at the first
   one it sees, comment or not, and the rest of the sheet lands on the
   page as visible text.

   Three rules deliberately retune existing ones, and each is written
   .shot.ab-* so it wins on specificity as well as on source order:
     .shot.ab-bannershot   the 32:9 banner strip
     .shot.ab-head         the 1:1 headshot square
     .notecard.ab-cross    the crossover line under the vision cards

   Mobile first: one column throughout, columns only where earned.
   ================================================================== */

/* ---------------- section rhythm ---------------- */

.ab-sec{margin-top:clamp(3.2rem,8vw,5rem)}
.ab-sec .sec-head{margin-bottom:1.9rem}

/* ---------------- 1. the live skins banner ---------------- */

/* #skinsBanner is the swap point. Everything inside it is replaceable. */
.ab-banner{position:relative;margin:0}

/* an ember plinth under the strip, so the skins read as hovering */
.ab-banner::after{content:"";position:absolute;left:9%;right:9%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);opacity:.55;pointer-events:none}

.shot.ab-bannershot{aspect-ratio:4/3;border-color:var(--hair-2);padding:1.5rem;
  background:
    radial-gradient(120% 150% at 50% 108%,rgba(232,93,42,.13),transparent 62%),
    repeating-linear-gradient(45deg,rgba(201,162,75,.035) 0 12px,transparent 12px 24px),
    rgba(12,9,7,.5)}
.shot.ab-bannershot .swhat{max-width:52ch}

.ab-bannercap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:1rem 0 0;
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ab-bannercap .dot{width:7px;height:7px}
.ab-bannercap .ab-sep{color:var(--hair-2)}

/* What the live component should render inside #skinsBanner when it
   replaces the placeholder. See INTEGRATION.md for the markup. */
.ab-skinstrip{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.7rem,3vw,1.8rem);
  padding:clamp(1.2rem,4vw,2.2rem) 1rem clamp(1.5rem,4vw,2.4rem);
  border:1px solid var(--hair-2);border-radius:var(--r);overflow-x:auto;
  background:
    radial-gradient(120% 150% at 50% 108%,rgba(232,93,42,.14),transparent 62%),
    rgba(12,9,7,.5)}
.ab-skin{flex:none;width:clamp(58px,11vw,104px);text-align:center;
  animation:ab-hover 5.4s ease-in-out infinite}
.ab-skin:nth-child(2n){animation-delay:-1.7s}
.ab-skin:nth-child(3n){animation-delay:-3.3s}
.ab-skin img{display:block;width:100%;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.7))}
.ab-skin b{display:block;margin-top:.6rem;font-family:var(--f-head);font-weight:400;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@keyframes ab-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.ab-avatar{position:relative;aspect-ratio:1/1;border:1px solid var(--hair-2);border-radius:var(--r);overflow:hidden;margin-bottom:.9rem;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 100%,rgba(232,93,42,.16),transparent 62%),rgba(12,9,7,.55)}
.ab-avatar img{width:82%;height:82%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.65))}
.ab-avatar .ab-initial{display:none;font-family:var(--f-display);font-size:3rem;color:var(--gold-dim)}
.ab-avatar.ab-nopic .ab-initial{display:block}
.ab-skin img{image-rendering:auto}
.ab-skinstrip:empty{display:none}
.ab-skin{margin:0}
.ab-skinstrip{scrollbar-width:thin}

.fig{padding:0;overflow:hidden;position:relative;display:block;margin:0}.fig img{display:block;width:100%;height:100%;object-fit:cover}.fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;flex-direction:column;gap:.15rem}.fig .swhat{font-size:.8rem;max-width:none}

.ytbox{position:relative;width:100%;aspect-ratio:16/9;max-width:1100px;margin:0 auto;border:1px solid var(--hair-2);border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000 url(/media/mods/hunt-hero.webp) center/cover no-repeat;cursor:pointer;display:block}
.ytplay img{width:100%;height:100%;object-fit:cover;opacity:1;filter:brightness(.88) saturate(.96);transition:filter .3s,transform .6s}
.ytplay:hover img{filter:none;transform:scale(1.02)}
.ytbtn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(232,93,42,.92);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .2s}
.ytplay:hover .ytbtn{transform:scale(1.06)}
.ytcap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem 1.1rem;text-align:left;font-family:var(--f-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.ytunder{text-align:center;margin-top:1rem;font-size:.9rem}.ytunder a{color:var(--gold-soft)}
.modal .ytframe{position:absolute;inset:0}.modal .ytframe iframe{width:100%;height:100%;border:0}
/* ---------------- 2. the story ---------------- */

.ab-copy p{max-width:74ch;margin:0 0 1.2rem;color:var(--muted);font-size:1.04rem;line-height:1.62}
.ab-copy p:first-child{color:var(--ink-dim);font-size:1.16rem}
.ab-copy p:last-child{margin-bottom:0}
.ab-nm{color:var(--gold-soft);font-weight:600}
.ab-title{font-family:var(--f-head);font-size:.95em;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ---------------- 3. the vision ---------------- */

.ab-vision{gap:clamp(.9rem,2.6vw,1.2rem)}
.ab-vcard{position:relative;gap:.75rem;overflow:hidden}
.ab-vcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--ember),var(--gold));opacity:.7}
.ab-phase{align-self:flex-start;font-family:var(--f-head);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);line-height:1;padding:.36rem .78rem;
  border:1px solid var(--hair-2);border-radius:999px;background:rgba(201,162,75,.05)}
.ab-vcard h3{margin:.15rem 0 0}
.ab-vcard p{flex:none;margin:0}
.ab-vcard .ab-vbody{flex:1;font-size:.99rem;line-height:1.58}
.ab-vcard .btn{align-self:flex-start;margin-top:.3rem}

.notecard.ab-cross{margin:clamp(1rem,3vw,1.4rem) 0 0;max-width:none}

/* ---------------- 4. the team ---------------- */

.ab-group{margin-top:clamp(1.8rem,5vw,2.6rem)}
.sec-head + .ab-group{margin-top:0}
.ab-grouphead{display:flex;align-items:center;gap:.9rem;margin:0 0 1.2rem;font-weight:400;
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}
.ab-grouphead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair-2),transparent)}

.ab-team{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,3vw,1.2rem)}

.ab-member{margin:0;text-align:center;padding:.85rem .85rem 1.15rem;
  border:1px solid var(--hair);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55));
  transition:border-color .25s,transform .25s,box-shadow .25s}
.ab-member:hover{border-color:var(--hair-2);transform:translateY(-3px);box-shadow:var(--shadow)}

/* the square headshot placeholder */
.shot.ab-head{aspect-ratio:1/1;padding:.9rem;gap:.4rem;margin-bottom:.9rem}
.shot.ab-head .stag{font-size:.54rem;letter-spacing:.16em;color:var(--gold-soft);
  max-width:100%;overflow-wrap:anywhere}
.shot.ab-head .swhat{font-size:.76rem;line-height:1.35;max-width:16ch;color:var(--faint)}
.ab-rune{width:26px;height:26px;color:var(--gold-dim);opacity:.8}

.ab-handle{margin:0 0 .35rem;font-family:var(--f-head);font-size:.95rem;letter-spacing:.03em;
  color:var(--ink);overflow-wrap:anywhere}
.ab-role{margin:0;font-family:var(--f-head);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* ---------------- 5. closing ---------------- */

.ab-close{margin-top:clamp(3.2rem,8vw,5rem);padding-top:clamp(2rem,5vw,2.8rem);
  border-top:1px solid var(--hair)}
.ab-sign{margin:1.6rem 0 1.7rem;font-family:var(--f-quote);font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.32rem);color:var(--gold-soft)}
.ab-cta{margin:0}

/* ---------------- phone: one column, always ----------------
   .ab-team is one column by default, above. .ab-vision rides on .cols-2,
   which the base sheet already collapses at 620px; it is repeated here so
   this block stands on its own if that ever changes. */

@media (max-width:620px){
  .ab-vision{grid-template-columns:1fr}
  /* one card per row, but the square stays a portrait rather than a poster */
  .shot.ab-head{max-width:240px;margin-left:auto;margin-right:auto}
  .shot.ab-head .swhat{max-width:24ch}
}

/* ---------------- wider than a phone ---------------- */

@media (min-width:621px){
  .ab-team{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:640px){
  .shot.ab-bannershot{aspect-ratio:16/7}
}
@media (min-width:880px){
  .ab-team{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .shot.ab-bannershot{aspect-ratio:32/9}
}

@media (prefers-reduced-motion:reduce){
  .ab-skin{animation:none}
}

  /* short laptop screens: the hero content must not spill past the fold */
@media (max-height:900px) and (min-width:700px){.hero{gap:.7rem;padding:1rem 0 2rem}}
/* ==================================================================
   THE REALM: settlements and empires, one settlement, one player,
   the account forms, and the standings.

   Layout is mobile first. The wide tables are stacked cards up to 900px,
   which is where a phone and a small tablet read them, a tightened table
   from 901 to 1100, and the full table above that.
   ================================================================== */

/* ---------------- freshness, and the panel that stands in for data ---------------- */

.rm-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;margin:0 0 1.2rem;
  font-family:var(--f-head);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.rm-stamp i{width:6px;height:6px;border-radius:50%;background:var(--gold-dim);flex:none;font-style:normal}
.rm-stamp.rm-cold i{background:var(--faint)}
.rm-stamp b{color:var(--muted);font-weight:400}

.rm-quiet{border:1px solid var(--hair-2);border-left:3px solid var(--gold-dim);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(201,162,75,.05),rgba(12,9,7,.4));
  padding:clamp(1.4rem,4vw,2.2rem);max-width:74ch}
.rm-qtag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-head);font-size:.57rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.85rem}
.rm-qtag::before{content:"";width:20px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rm-quiet h3{font-family:var(--f-head);font-size:clamp(1.15rem,3vw,1.5rem);letter-spacing:.02em;
  color:var(--ink);margin:0 0 .75rem}
.rm-quiet p{color:var(--muted);margin:0 0 .9rem;font-size:1rem;max-width:66ch}
.rm-quiet p:last-child{margin:0}
.rm-quiet a{color:var(--gold-soft)}
.rm-quiet .btn{color:#fff}
.rm-none{color:var(--faint);font-family:var(--f-quote);font-style:italic;margin:0}
/* while a request is in flight the panel already on the page is dimmed rather
   than wiped, so there is always something to read and nothing that is on its
   way out is stated as though it were settled */
.rm-checking{margin:0 0 1rem;font-size:.95rem;color:var(--gold-soft)}
.rm-busy>*:not(.rm-checking){opacity:.45;transition:opacity .2s}

/* ---------------- the control bar ---------------- */

.rm-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem 1rem;margin:0 0 1.3rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--hair)}
.rm-lab{display:block;font-family:var(--f-head);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dim);margin:0 0 .35rem}
.rm-field{flex:1 1 230px;min-width:0}
.rm-field.rm-narrow{flex:0 1 210px}
.rm-field input,.rm-field select{width:100%;background:var(--ash-1);border:1px solid var(--hair-2);
  border-radius:6px;color:var(--ink);font-family:var(--f-body);font-size:.98rem;
  padding:.62rem .85rem;outline:none}
.rm-field select{cursor:pointer}
.rm-field input:focus,.rm-field select:focus{border-color:var(--gold)}
.rm-field input::placeholder{color:var(--faint)}
.rm-tally{margin:0 0 .55rem auto;font-family:var(--f-head);font-size:.57rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}

/* ---------------- the wide tables ---------------- */

.rm-tblwrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r)}
table.rm-tbl{border-collapse:collapse;width:100%;font-size:.95rem}
.rm-tbl thead th{padding:0;text-align:left;background:rgba(232,93,42,.05);
  border-bottom:1px solid var(--hair-2);white-space:nowrap}
.rm-tbl thead th.rm-plainh{font-family:var(--f-head);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dim);padding:.8rem .9rem;font-weight:400}
.rm-sort{width:100%;background:none;border:0;cursor:pointer;color:var(--gold-dim);
  font-family:var(--f-head);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  text-align:inherit;padding:.8rem .9rem;display:flex;align-items:center;gap:.4rem}
.rm-sort:hover{color:var(--gold-soft)}
.rm-sort:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.rm-arw{opacity:0;font-size:.75em;line-height:1}
.rm-tbl th[aria-sort] .rm-sort{color:var(--ember-hot)}
.rm-tbl th[aria-sort] .rm-arw{opacity:1}
.rm-tbl th.rm-num .rm-sort{justify-content:flex-end}
.rm-tbl td{padding:.72rem .9rem;border-top:1px solid var(--hair);vertical-align:top;color:var(--ink-dim)}
.rm-tbl tbody tr:hover td{background:rgba(201,162,75,.04)}
.rm-num{text-align:right}
.rm-tbl td.rm-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-coin{color:var(--gold-soft);font-variant-numeric:tabular-nums;white-space:nowrap}

.rm-nm a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.32)}
.rm-nm a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.rm-nm b{font-family:var(--f-head);font-weight:600;font-size:.98rem;letter-spacing:.03em;color:var(--ink)}
.rm-motto{display:block;font-family:var(--f-quote);font-style:italic;color:var(--faint);
  font-size:.92rem;margin-top:.15rem;max-width:36ch}
.rm-pill{display:inline-block;font-family:var(--f-head);font-size:.53rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--hair-2);border-radius:999px;
  padding:.28rem .62rem;background:rgba(201,162,75,.05);white-space:nowrap}
.rm-pill.rm-hot{color:var(--ember-hot);border-color:rgba(232,93,42,.42);background:rgba(232,93,42,.08)}
.rm-plain{color:var(--muted)}
.rm-tbl td .rm-pill+.rm-plain{margin-left:.35rem;font-size:.88rem;white-space:nowrap}

/* empires carry their vassals under them, joined by a rail down the group so
   that an empire and its vassals read as one thing rather than three rows */
.rm-grp{border-top:1px solid var(--hair-2)}
.rm-grp:first-of-type{border-top:0}
tr.rm-emp td{background:rgba(232,93,42,.045)}
.rm-hasv tr td:first-child{border-left:3px solid rgba(232,93,42,.22)}
.rm-hasv tr.rm-emp td:first-child{border-left-color:var(--ember)}
tr.rm-child td.rm-nm{padding-left:2rem;position:relative}
tr.rm-child td.rm-nm::before{content:"";position:absolute;left:.85rem;top:1.15rem;
  width:.65rem;height:1px;background:var(--hair-2)}
tr.rm-child td.rm-nm::after{content:"";position:absolute;left:.85rem;top:0;bottom:0;width:1px;
  background:var(--hair-2)}
tr.rm-child:last-child td.rm-nm::after{bottom:auto;height:1.15rem}
tr.rm-ctx td{opacity:.55}
tr.rm-ctx td.rm-nm b::after{content:"context";margin-left:.55rem;font-family:var(--f-head);
  font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:400}

/* ---------------- one settlement: the crest ---------------- */

.rm-crest{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,1.8rem);
  align-items:center;margin:0 0 1.9rem}
.rm-sigil{width:clamp(54px,11vw,80px);aspect-ratio:3/4;border-radius:4px;position:relative;overflow:hidden;
  border:1px solid var(--hair-2);box-shadow:inset 0 0 26px rgba(0,0,0,.6);
  background:linear-gradient(180deg,var(--rm-c,var(--crimson)),rgba(12,9,7,.92))}
.rm-sigil::after{content:"";position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(transparent,rgba(0,0,0,.6))}
.rm-sigil b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);
  font-size:clamp(1.5rem,4vw,2.1rem);color:rgba(255,255,255,.9);text-shadow:0 2px 6px rgba(0,0,0,.75)}
.rm-crest h2{font-family:var(--f-head);font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1.05;
  overflow-wrap:anywhere}
.rm-mottobig{font-family:var(--f-quote);font-style:italic;color:var(--gold-soft);
  font-size:clamp(1.02rem,2.4vw,1.26rem);margin:.55rem 0 0;max-width:52ch}

.rm-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0;
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.6))}
.rm-facts>div{padding:.95rem 1.1rem;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rm-facts dt{font-family:var(--f-head);font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim)}
.rm-facts dd{margin:.35rem 0 0;color:var(--ink);font-size:1.02rem;overflow-wrap:anywhere}
.rm-facts dd.rm-coin{font-size:1.14rem}
.rm-facts dd small{display:block;color:var(--faint);font-size:.8rem;margin-top:.22rem;letter-spacing:0}
.rm-facts a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.3)}
.rm-facts a:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ---------------- one player: the trophy case ---------------- */

.rm-phero{margin:0 0 1.8rem}
.rm-pname{font-family:var(--f-display);font-size:clamp(2.3rem,9vw,4.2rem);line-height:.95;
  color:var(--ink);margin:0;overflow-wrap:anywhere}
.rm-ptitle{font-family:var(--f-quote);font-style:italic;color:var(--gold-soft);
  font-size:clamp(1.08rem,2.8vw,1.4rem);margin:.5rem 0 0;max-width:54ch}
.rm-pwhere{margin:.6rem 0 0;color:var(--muted)}
.rm-pwhere a{color:var(--gold-soft)}

.rm-casehead{display:flex;align-items:center;gap:.9rem;margin:2.5rem 0 1.1rem;font-weight:400;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}
.rm-casehead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair-2),transparent)}

.rm-case{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.7rem}
.rm-plaque{position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:var(--r);
  padding:1.05rem 1.15rem;background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
.rm-plaque::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--ember),var(--gold));opacity:.65}
.rm-plaque b{display:block;font-family:var(--f-head);font-size:.92rem;letter-spacing:.03em;color:var(--ink)}
.rm-plaque small{display:block;margin-top:.4rem;font-family:var(--f-head);font-size:.53rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

.rm-deeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:.8rem}
.rm-deed{border:1px solid var(--hair);border-radius:var(--r);padding:1.2rem 1.3rem;
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
.rm-deed h4{font-family:var(--f-head);font-size:.61rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 .85rem}
.rm-big{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:var(--ember);margin:0}
.rm-big span{font-size:.46em;color:var(--muted);margin-left:.3rem}
.rm-deed ul{list-style:none;margin:.85rem 0 0;padding:0;display:grid;gap:.34rem;
  color:var(--muted);font-size:.94rem}
.rm-deed li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.rm-deed li b{color:var(--ink-dim);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-deed p{color:var(--muted);font-size:.94rem;margin:.6rem 0 0}
.rm-meter{height:6px;border-radius:999px;background:rgba(201,162,75,.12);overflow:hidden;margin:.85rem 0 .4rem}
.rm-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--crimson),var(--ember),var(--gold))}

/* ---------------- the private half, served to one browser ---------------- */

.rm-private{margin:2.8rem 0 0;border:1px solid var(--ember);border-radius:var(--r);position:relative;
  overflow:hidden;padding:clamp(1.3rem,4vw,2rem);
  background:radial-gradient(130% 150% at 0% 0%,rgba(232,93,42,.17),transparent 58%),
    linear-gradient(180deg,rgba(24,14,10,.92),rgba(12,9,7,.7));
  box-shadow:0 0 46px -18px rgba(232,93,42,.75)}
.rm-seal{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-head);font-size:.54rem;
  letter-spacing:.22em;text-transform:uppercase;color:#0B0908;background:var(--ember);
  border-radius:999px;padding:.34rem .8rem;margin-bottom:.9rem}
.rm-private h3{font-family:var(--f-head);font-size:clamp(1.2rem,3vw,1.55rem);color:var(--ink);margin:0 0 .7rem}
.rm-private>p{color:var(--ink-dim);max-width:66ch;margin:0 0 .9rem}
.rm-private .rm-facts{margin-top:1.2rem}
.rm-nofig{color:var(--faint);font-family:var(--f-quote);font-style:italic;font-size:.95rem}
.rm-sign{margin:1.4rem 0 0}
.rm-sign button{cursor:pointer}

/* ---------------- the account forms ---------------- */

.rm-steps{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem;counter-reset:rmstep}
.rm-steps li{counter-increment:rmstep;position:relative;padding-left:2.9rem;color:var(--muted);max-width:66ch}
.rm-steps li::before{content:counter(rmstep);position:absolute;left:0;top:-.15rem;
  width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--hair-2);
  display:grid;place-items:center;font-family:var(--f-display);font-size:1rem;color:var(--ember);
  background:rgba(232,93,42,.06)}
.rm-steps li b{color:var(--ink-dim)}
.rm-form{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin:0 0 1.1rem}
.rm-code{width:100%;max-width:250px;background:var(--ash-1);border:1px solid var(--hair-2);border-radius:6px;
  color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35rem;
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;padding:.7rem .9rem;outline:none}
.rm-code:focus{border-color:var(--gold);box-shadow:0 0 22px -8px rgba(232,93,42,.6)}
.rm-code::placeholder{color:var(--faint);letter-spacing:.4em}
.rm-said{margin:0 0 1rem;max-width:66ch;color:var(--muted)}
.rm-said.rm-bad{color:var(--ember-hot)}
.rm-said.rm-good{color:var(--ok)}
.rm-said:empty{margin:0}

/* ---------------- find a person rather than a place ---------------- */

.rm-find{margin:2.8rem 0 0;padding-top:1.7rem;border-top:1px solid var(--hair);max-width:62ch}
.rm-find p{color:var(--muted);margin:0 0 .85rem}
.rm-findrow{display:flex;flex-wrap:wrap;gap:.6rem}
.rm-findrow input{flex:1 1 190px;min-width:0;background:var(--ash-1);border:1px solid var(--hair-2);
  border-radius:6px;color:var(--ink);font-family:var(--f-body);font-size:.98rem;padding:.62rem .85rem;outline:none}
.rm-findrow input:focus{border-color:var(--gold)}
.rm-findrow input::placeholder{color:var(--faint)}

.rm-vassals{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0 0}
.rm-vassals a{font-family:var(--f-head);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--hair-2);border-radius:999px;padding:.4rem .8rem;text-decoration:none}
.rm-vassals a:hover{border-color:var(--gold);color:var(--ink)}

.rm-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.7rem;margin:1.3rem 0 0}
.rm-pick{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;border:1px solid var(--hair);
  border-radius:var(--r);padding:1rem 1.1rem;background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.5));
  transition:border-color .2s}
.rm-pick:hover{border-color:var(--gold)}
.rm-pick b{font-family:var(--f-head);font-size:1rem;letter-spacing:.03em;color:var(--ink)}
.rm-pick span{color:var(--muted);font-size:.93rem}
.rm-pick small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;color:var(--faint)}

/* ---------------- the standings, kept small on purpose ---------------- */

.rm-boards{margin:3.2rem 0 0;padding-top:1.8rem;border-top:1px solid var(--hair)}
.rm-boards>p.rm-bintro{color:var(--muted);margin:0 0 1.3rem;max-width:66ch;font-size:.98rem}
.rm-bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:.8rem}
.rm-board{border:1px solid var(--hair);border-radius:var(--r);padding:1.05rem 1.15rem;
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.5))}
.rm-board h4{font-family:var(--f-head);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 .8rem}
.rm-board ol{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;counter-reset:rmrank}
.rm-board li{counter-increment:rmrank;display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;
  gap:.6rem;align-items:baseline;font-size:.93rem;color:var(--muted)}
.rm-board li::before{content:counter(rmrank);font-family:var(--f-display);font-size:.95rem;
  color:var(--gold-dim);text-align:right}
.rm-board li:first-child::before{color:var(--ember)}
.rm-bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-dim)}
.rm-bname a{color:var(--gold-soft);text-decoration:none}
.rm-bname a:hover{color:var(--ink);text-decoration:underline}
.rm-bval{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);font-size:.9rem}
.rm-bfoot{margin:1.1rem 0 0;font-family:var(--f-head);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

/* ---------------- between a phone and a desktop ---------------- */

@media (max-width:1100px) and (min-width:901px){
  table.rm-tbl{font-size:.9rem}
  .rm-tbl td{padding:.6rem .6rem}
  .rm-sort{padding:.7rem .6rem;letter-spacing:.14em}
  .rm-motto{display:none}
}

/* ---------------- a phone reads rows as cards ---------------- */

@media (max-width:900px){
  .rm-tblwrap{overflow:visible;border:0;border-radius:0}
  .rm-tbl,.rm-tbl tbody,.rm-tbl tr,.rm-tbl td{display:block;width:auto}
  .rm-tbl thead{display:none}
  .rm-tbl tbody{margin:0 0 .3rem}
  .rm-grp{border-top:0}
  .rm-tbl tr{margin:0 0 .6rem;padding:.95rem 1.05rem;border:1px solid var(--hair);border-radius:var(--r);
    background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
  .rm-tbl tbody tr:hover td,tr.rm-emp td{background:none}
  .rm-tbl td{border:0;padding:.3rem 0;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
  .rm-tbl td::before{content:attr(data-l);flex:none;font-family:var(--f-head);font-size:.52rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim)}
  .rm-tbl td.rm-nm{display:block;padding:0 0 .55rem;margin:0 0 .45rem;border-bottom:1px solid var(--hair)}
  .rm-tbl td.rm-nm::before{display:none}
  .rm-tbl td.rm-num{text-align:right}
  tr.rm-child td.rm-nm{padding-left:0}
  tr.rm-child td.rm-nm::before{display:none}
  tr.rm-child{margin-left:.9rem;border-left:2px solid var(--hair-2)}
  tr.rm-child td.rm-nm::after{display:none}
  .rm-hasv tr td:first-child{border-left:0}
  tr.rm-emp{border-color:var(--hair-2)}
  .rm-motto{max-width:none}
  .rm-tally{margin-left:0}
  .rm-bar{align-items:stretch}
  .rm-field,.rm-field.rm-narrow{flex:1 1 100%}
  .rm-crest{grid-template-columns:auto minmax(0,1fr);gap:1rem}
}

/* ==================================================================
   THE ACCOUNT CONTROL, THE REALM GROUP, AND THE HEADER THAT HOLDS THEM

   The header row was already exactly full before any of this was added.
   Measured in a browser, the flexible spacer between the navigation and the
   buttons is zero pixels wide at 1440, at 1280 and at 1172, which is where
   the shell stops growing. There was nothing spare, which is why the row fell
   off the side of the viewport at every width from 1068 down to 761 and every
   page on the site scrolled sideways there, the Codex included.

   The row now has to carry two more things. So the header, and only the
   header, is allowed a wider shell than the page beneath it, and the burger
   takes over at the width where the full row stops fitting rather than at an
   arbitrary 760.

   Nothing above this line is edited.
   ================================================================== */

/* ---------------- the header row ---------------- */

/* Measured in a headless browser, with the fallback serif rather than Cinzel,
   which cannot be fetched from here: the full row needs 1156px of content to
   stand in, and it has 1096 at every width from 1172 up. So the header, and
   only the header, runs a little wider than the page below it and gives up
   about two pixels of padding an item. Nothing changes size, nothing changes
   weight, nothing changes colour, nothing moves to another line.

   The alternative was to take the server address out of the Play button,
   which is the most valuable thing in the header of a game server's website,
   or to reset type that was tuned by hand. Both are worse. */
@media (min-width:1260px){
  .site-header .shell.hbar{max-width:1440px;
    padding-left:clamp(1.5rem,2vw,3rem);padding-right:clamp(1.5rem,2vw,3rem)}
  /* the spacer carries no width of its own and only ever cost the row one
     more gap. The buttons are held right with a margin instead. */
  .hbar .hspace{display:none}
  .hbar .hcta{margin-left:auto}
  nav.main{margin-left:0}
  .navitem>a,.navitem>button{padding:.7rem .5rem}
}

/* From 1260 to 1439 is the tightest the full row is ever asked to be, so the
   account control keeps its mark and gives its name to the menu. Forum costs
   the row about 58 pixels, so the gaps, the padding and the tracking tighten
   as the forum's own header does: 63 pixels spare at 1260, measured with the
   fallback faces. At 1440 and above none of this applies. */
@media (min-width:1260px) and (max-width:1439px){
  .hcta{gap:.4rem}
  .hbar{gap:.5rem}
  nav.main{gap:.1rem}
  .navitem>a,.navitem>button{padding:.7rem .32rem;letter-spacing:.1em}
  .acct .acctlab,.acct .acctcaret{display:none}
}

/* The burger takes over where the full row stops fitting, which is no longer
   760. It was 760 before and the row had already spilled off the screen by
   1068, which is the bug. The Play button keeps its own old breakpoint,
   because on its own it still fits down to there. */
@media (max-width:1259px){
  nav.main{display:none}
  .burger{display:flex}
  .mmenu{display:block}
}

/* A phone has room for the mark but not for a word beside it. */
@media (max-width:539px){
  .acct .acctlab,.acct .acctcaret{display:none}
}

/* A guard, not the fix. The fix is above: the row fits at every width where
   it is shown, with about sixty pixels to spare at the tightest. This is
   here because those pixels were counted in a browser that could not fetch
   Cinzel and measured a substitute instead, and a real Cinzel that comes out
   wider must never again be able to make every page on this site scroll
   sideways. Measured: the row survives type up to about twelve per cent
   wider than the substitute before it needs this at all.

   Both elements, and it has to be both. Measured with a header made too wide
   on purpose: the root alone still scrolled thirty pixels, the body alone
   still scrolled thirty pixels, and the pair holds at zero. clip and not
   hidden, because hidden makes a scrolling box of the viewport and the
   sticky header stops sticking, and clip does not. A browser too old to know
   the word drops the line and is left exactly as it is today.

   Checked underneath it: the header stays stuck, the menus still hang below
   the bar, the mobile menu still slides in, and the wide command tables
   still scroll inside their own box. */
html,body{overflow-x:clip}

/* ---------------- the account control ---------------- */

/* It sits in the same row as Play and Discord and is built out of the same
   parts: the head font, the hairline border, the six pixel radius. The mark
   is the brand sigil at two thirds size, so the corner reads as belonging to
   this site rather than as a widget dropped onto it. */

.acct{position:relative;flex:none;display:flex;align-items:center}
.acctbtn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;text-decoration:none;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);background:linear-gradient(180deg,rgba(201,162,75,.10),rgba(201,162,75,.02));
  border:1px solid var(--hair-2);border-radius:6px;padding:.4rem .62rem;
  transition:border-color .2s,color .2s,box-shadow .25s,background .25s}
.acctbtn:hover,.acct[data-open="1"] .acctbtn{border-color:var(--gold-dim);color:var(--ink);
  background:linear-gradient(180deg,rgba(201,162,75,.18),rgba(201,162,75,.04));
  box-shadow:0 0 20px -8px rgba(201,162,75,.85)}
.acctbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.acctmark{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%,#31200f,#0c0908);border:1px solid rgba(201,162,75,.45);
  box-shadow:inset 0 0 10px rgba(232,93,42,.5);color:var(--gold-soft);
  font-family:var(--f-head);font-size:.6rem;letter-spacing:0;line-height:1;text-transform:uppercase}
.acctspark::before{content:"";width:11px;height:11px;
  background:radial-gradient(circle at 50% 28%,#ffd27a,var(--ember) 55%,var(--crimson));
  clip-path:polygon(50% 0,63% 38%,100% 42%,68% 62%,80% 100%,50% 76%,20% 100%,32% 62%,0 42%,37% 38%);
  filter:drop-shadow(0 0 3px rgba(232,93,42,.8))}
.acctlab{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctcaret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;margin-bottom:2px;flex:none}

.acctdrop{position:absolute;top:calc(100% + 7px);right:0;min-width:214px;background:var(--ash-1);
  border:1px solid var(--hair-2);border-radius:var(--r);padding:.4rem;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:60}
.acct[data-open="1"] .acctdrop{opacity:1;visibility:visible;transform:none}
.acctdrop a,.acctdrop button{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:left;text-decoration:none;background:none;border:0;cursor:pointer;
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);padding:.6rem .7rem;border-radius:6px;transition:background .18s,color .18s}
.acctdrop a:hover,.acctdrop button:hover{background:rgba(232,93,42,.1);color:var(--ink)}
.acctdrop button{color:var(--muted)}
.acctwho{display:block;padding:.45rem .7rem .6rem;margin:0 0 .3rem;border-bottom:1px solid var(--hair);
  font-family:var(--f-head);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.acctwho b{display:block;color:var(--gold-soft);font-weight:400;font-size:.72rem;letter-spacing:.12em;
  margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- the players page ---------------- */

/* The find box is the answer on this page rather than an afterthought at the
   bottom of it, so it sits at the top and the rule that hangs it off a line
   above is turned around. */
.rm-findtop{margin:0 0 2.6rem;padding-top:0;border-top:0;padding-bottom:1.8rem;
  border-bottom:1px solid var(--hair)}

.rm-plead{color:var(--muted);max-width:66ch;margin:0 0 1.4rem;font-size:.98rem}

/* ---------------- the leaderboards page ---------------- */

/* The boards themselves already have their rules. This page only needs the
   grid to breathe a little more than it does at the foot of the settlements
   page, where it is deliberately the smallest thing on screen. */
.rm-bpage .rm-bgrid{grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1rem}
.rm-bpage .rm-board{padding:1.25rem 1.35rem}
.rm-bpage .rm-board ol{gap:.55rem}
.rm-bpage .rm-bfoot{margin-top:1.5rem}

/* ==================================================================
   TIER 1 ADDITIONS (onboarding, honesty, accessibility)
   Every rule this pass adds lives in this one block, and the same block is
   written to site/css-additions/app-a11y.css for the static pages. Where a
   rule here overrides one above, it repeats that rule's own selector, so it
   wins on source order at equal specificity. Above this block the only edit
   is the removal of three background photos that do not exist.
   ================================================================== */

/* ---------- colour ---------- */
/* faint text: same warm hue (34deg, 13% saturation), lightness raised from 38% to 49%.
   5.10:1 on --ash, 4.88:1 on --panel, 4.84:1 on --ash-2. It was 3.39:1 on --ash. */
:root{--faint:#8D7F6D}
/* the Crimson strain tag: crimson ground and light letters, 8.1:1. It was crimson
   letters on the dark ground at 1.92:1. */
.wk-crimsontag{color:var(--ink);background:var(--crimson);border-radius:3px;
  padding:.3em .3em .25em .6em;letter-spacing:.24em;line-height:1}

/* ---------- type: nothing below 11px ----------
   every font-size above that computed under 11px at a 16px root, raised to 11px */
.drop a .soon,.ipbtn .k,.mgroup>span,.scroll-cue,.mile .st,table.cmd caption,.rank .tier,
.entry .date,.fcol h5,.fnote,.toast,.status,.mstat,.soontag,.shot .stag,.backlink,.wk-nav a,
.wk-hits a small,.wk-crumb,.wk-glance th,.wk-gl-game th::after,.wk-gaptoggle,.wk-gaptag,
.wk-seelist a,.wk-cmeta,.wk-roster th,.wk-stat,.wk-vgo,.wk-lorepart h4,.nw-cat,.nw-flag,.nw-chip,
.nw-count,.nw-cfoot,.nw-metaline,.nw-navlab,.ab-bannercap,.ab-skin b,.ab-phase,.shot.ab-head .stag,
.ab-role,.rm-stamp,.rm-qtag,.rm-lab,.rm-tally,.rm-tbl thead th.rm-plainh,.rm-sort,.rm-pill,
tr.rm-ctx td.rm-nm b::after,.rm-facts dt,.rm-casehead,.rm-plaque small,.rm-deed h4,.rm-seal,
.rm-vassals a,.rm-board h4,.rm-bfoot,.acctbtn,.acctmark,.acctwho{font-size:.6875rem}
@media (max-width:900px){.rm-tbl td::before{font-size:.6875rem}}

/* ---------- skip link: invisible until it has focus ---------- */
.skip{position:fixed;left:1rem;top:.75rem;z-index:120;padding:.75rem 1.15rem;border-radius:6px;
  border:1px solid var(--ember);background:var(--ash-2);color:var(--ink);text-decoration:none;
  font-family:var(--f-head);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 30px -6px rgba(232,93,42,.6)}
.skip:not(:focus){width:1px;height:1px;padding:0;border:0;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);box-shadow:none}
.skip:focus{outline:2px solid var(--gold);outline-offset:2px}
#app:focus{outline:none}

/* ---------- the hero: four calls to action take three rows on a phone, so the
   bottom of the hero is held clear of the scroll cue ---------- */
@media (max-width:620px),(max-height:500px){.hero{padding-bottom:5.75rem}}
/* on a short laptop screen (1366 by 768, 1280 by 720) the hero already fills the
   screen and the cue landed on the last line of it, so it is left out there */
@media (min-width:621px) and (max-height:880px){.hero .scroll-cue{display:none}}

/* ---------- About: skin names at 11px ----------
   A name is wider than a phone-sized figure, so each figure takes the width of its
   name while the skin keeps its own size, and a strip wider than the screen starts
   at its first figure instead of losing it off the left edge. */
.ab-skin{width:auto;min-width:clamp(58px,11vw,104px)}
.ab-skin img{width:clamp(58px,11vw,104px);margin:0 auto}
.ab-skin b{white-space:nowrap}
.ab-skinstrip{justify-content:safe center}

/* ---------- each route's title is its h1, at the size its h2 had ---------- */
.sec-head h1{font-family:var(--f-head);font-size:clamp(1.9rem,5vw,3rem);line-height:1.05;letter-spacing:.01em}
.rm-quiet h1,.rm-quiet h2{font-family:var(--f-head);font-size:clamp(1.15rem,3vw,1.5rem);letter-spacing:.02em;
  color:var(--ink);margin:0 0 .75rem}
.rm-crest h1{font-family:var(--f-head);font-size:clamp(1.8rem,5.4vw,2.8rem);line-height:1.05;overflow-wrap:anywhere}

/* ---------- desktop dropdowns: Escape shuts a menu even under the pointer ---------- */
.navitem.nav-shut .drop,.navitem.nav-shut:hover .drop,.navitem.nav-shut:focus-within .drop{
  opacity:0;visibility:hidden;transform:translateY(6px)}

/* ---------- mobile menu: out of sight and out of the tab order while closed ---------- */
.mmenu{visibility:hidden;transition:transform .3s,visibility 0s linear .3s}
body.menu-open .mmenu{visibility:visible;transition:transform .3s,visibility 0s}
.mmenu .mip{display:flex;width:100%;align-items:center;gap:.6rem;margin:.35rem 0 .25rem;
  padding:.8rem .95rem;font-size:.9rem}
.mmenu .mip .mk{margin-left:auto;color:var(--gold-soft)}

/* ---------- the toast: says what happened, and holds the text up when copying failed ---------- */
.toast{max-width:calc(100vw - 2rem);overflow-wrap:anywhere;text-align:center;line-height:1.5}
.toast.fail{pointer-events:auto;-webkit-user-select:text;user-select:text}
.toast .pick{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0;
  color:var(--gold-soft);-webkit-user-select:all;user-select:all}

/* ---------- image placeholders: hidden until "What is unwritten" is on ----------
   A placeholder is always a div.shot. Real art is a figure or an img. The Codex
   toggle puts .pt-unwritten on the root and every placeholder comes back. */
html:not(.pt-unwritten) div.shot{display:none}
html:not(.pt-unwritten) .wk-box:not(:has(> :not(div.shot))){display:none}
html:not(.pt-unwritten) .modhero:has(> div.shot){grid-template-columns:1fr}
html:not(.pt-unwritten) .modhero:has(> div.shot) .lede{max-width:62ch}
html:not(.pt-unwritten) .shotgrid:not(:has(> figure)){display:none}
html:not(.pt-unwritten) .sec-head:has(+ .shotgrid):not(:has(+ .shotgrid > figure)){display:none}
/* news: a post with no art yet closes up around its words, and its category pill joins them */
html:not(.pt-unwritten) .nw-hero:has(div.shot){display:none}
html:not(.pt-unwritten) .nw-media:has(> div.shot){background:none;overflow:visible;border:0;border-radius:0;
  min-height:0;height:auto}
html:not(.pt-unwritten) .nw-media:has(> div.shot) > .nw-cat.nw-over{position:static;
  margin:clamp(1.05rem,2.6vw,1.35rem) clamp(1.05rem,2.6vw,1.35rem) 0;backdrop-filter:none;-webkit-backdrop-filter:none}
html:not(.pt-unwritten) .nw-featmedia:has(> div.shot) > .nw-cat.nw-over{margin:clamp(1.35rem,3.4vw,2.3rem) clamp(1.35rem,3.4vw,2.3rem) 0}
html:not(.pt-unwritten) .nw-hit:has(> .nw-media > div.shot) > .nw-copy{padding-top:.8rem}
html:not(.pt-unwritten) .nw-feathit:has(> .nw-media > div.shot) > .nw-featcopy{padding-top:1rem}
@media (min-width:900px){
  html:not(.pt-unwritten) .nw-feathit:has(> .nw-media > div.shot){grid-template-columns:1fr}
}
@media (min-width:720px){
  html:not(.pt-unwritten) .nw-grid.nw-solo .nw-hit:has(> .nw-media > div.shot){flex-direction:column}
  html:not(.pt-unwritten) .nw-grid.nw-solo .nw-cardmedia:has(> div.shot){flex:none;border-right:0}
}

/* ---------- Codex: share this entry, and the not-found panel ---------- */
.wk-share{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;cursor:pointer;
  background:none;border:1px solid var(--hair-2);border-radius:999px;color:var(--gold-soft);
  font-family:var(--f-head);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .95rem}
.wk-share:hover{border-color:var(--gold);color:var(--ink)}
.wk-share:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wk-share svg{width:15px;height:15px;flex:none}
.wk-missing{padding:.4rem 0 2rem}
.wk-missing .wk-lead{margin:0 0 1.6rem}
.nf-go{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

/* ---------- footer: legal links, contact, and the non-affiliation line ---------- */
.fnote .flegal{display:inline-flex;flex-wrap:wrap;gap:1.2rem}
.fnote a{color:var(--muted);text-decoration:none;transition:color .18s}
.fnote a:hover{color:var(--ink)}
.fsmall{margin-top:1.1rem;color:var(--faint);font-size:.9rem;line-height:1.55}
.fsmall p{margin:0 0 .35rem;max-width:none}
.fsmall p:last-child{margin:0}
.fmail{color:var(--muted)}

/* ---------- Codex headings: sections are h2 under the article h1 now, styled as the h3 was ---------- */
/* codex-headings.css, generated by build_static.py from the app's own CSS.
   codex/articles.html now uses h2 for section headings (were h3) and h3 for the
   Lore part labels (were h4). Paste these rules at the END of the <style> block in
   index.html so the Codex looks exactly as before. The last rule undoes what the old
   ".wk-sec h3" rule would otherwise add to the Lore part labels. */
.wk-sec h2{font-family:var(--f-head);font-size:1.12rem;letter-spacing:.05em;color:var(--gold-soft);margin:0 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--hair)}
.wk-sec h2 small{font-family:var(--f-quote);font-style:italic;letter-spacing:0;text-transform:none;font-size:.95rem;color:var(--faint);margin-left:.5rem}
.wk-lore .wk-lorebody h3{font-family:var(--f-head);font-size:.95rem;letter-spacing:.05em;color:var(--ink);margin:1.3rem 0 .4rem}
.wk-lorepart h3{font-family:var(--f-head);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim);margin:0 0 .6rem}
.wk-gallerysec h2 small{font-family:var(--f-body);font-size:.8rem;color:var(--faint);letter-spacing:0;text-transform:none;font-weight:400;margin-left:.5rem}
.wk-lorepart h3{font-size:.6875rem}
.wk-lorepart h3{border-bottom:unset;padding-bottom:unset}
.twrap:focus-visible,.rm-tblwrap:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ---------- accounts: sign in, create an account, forgot, and the account page ----------
   Sign in, sign up and forgot live in one window: a native <dialog> opened with showModal(),
   so the page behind it is inert and Escape closes it. Under 640px it is a full height sheet
   with the 16px gutter; wider, a card about 420px wide over a dimmed backdrop. The forms reuse
   .rm-form, .rm-field, .rm-lab, .rm-code, .rm-said and .rm-quiet, on the account page too.
   Inputs are 16px so a phone does not zoom on focus. */
html.acc-lock{overflow:hidden}
/* the account menu as the forum draws it: a badge on the mark for unread alerts and
   conversations, and each count beside its link */
.acctmark{position:relative}
.acctdot{position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--ember);color:#fff;font-family:var(--f-body);font-size:.6875rem;line-height:17px;text-align:center;
  box-shadow:0 0 10px rgba(232,93,42,.7)}
.acctdrop .acctn{font-family:var(--f-body);letter-spacing:0;color:var(--ember-hot)}
/* the site notice from the console, under the header on every page, as the forum shows it */
.sitenote{position:relative;z-index:3;border-bottom:1px solid var(--hair-2);background:linear-gradient(90deg,rgba(232,93,42,.14),rgba(201,162,75,.06))}
.sitenote p{margin:0;padding:.7rem 0;color:var(--ink);font-size:1rem;overflow-wrap:anywhere}
.sitenote a{color:var(--gold-soft)}
.acc-win{position:fixed;inset:0;margin:auto;padding:0;width:min(420px,calc(100vw - 2rem));max-width:none;
  max-height:calc(100vh - 3rem);overflow-y:auto;overscroll-behavior:contain;color:var(--ink);
  border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--shadow);
  background:linear-gradient(180deg,var(--ash-2),var(--ash-1) 60%)}
.acc-win::backdrop{background:rgba(5,4,3,.74)}
.acc-card{position:relative;padding:1.5rem 1.5rem 1.3rem}
.acc-title{margin:0 2.8rem 1.1rem 0;font-family:var(--f-head);font-weight:600;font-size:1.3rem;
  letter-spacing:.05em;line-height:1.25;color:var(--ink)}
.acc-x{position:absolute;top:.8rem;right:.8rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;
  cursor:pointer;background:none;border:1px solid transparent;border-radius:6px;color:var(--ink-dim);
  font-size:1.7rem;line-height:1}
.acc-x:hover{color:#fff;border-color:var(--hair-2)}
.acc-x:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.acc-win .acc-form{max-width:none;margin:0 0 .9rem}
.acc-win .acc-form .btn{align-self:stretch;justify-content:center}
.acc-win .rm-code{max-width:none}
.acc-win .rm-said{margin:0 0 .8rem}
.acc-win .rm-said:empty{margin:0}
.acc-win .acc-alt{margin:0 0 .45rem}
.acc-win .acc-lead{margin:0 0 1rem}
.acc-step{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:1.05rem}
.acc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
.acc-win .acc-fine{margin:0 0 .9rem}
.acc-win .acc-stay{margin:0 0 .8rem}
.acc-back{display:block;margin:0 0 .7rem;cursor:pointer;background:none;border:0;padding:.2rem 0;color:var(--gold-soft);
  font-family:var(--f-body);font-size:1rem;text-align:left;text-decoration:underline;text-underline-offset:3px}
.acc-back:hover{color:var(--ink)}
.acc-back:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:4px}
.acc-stepper{list-style:none;margin:0 0 1.15rem;padding:0;display:flex;gap:.6rem}
.acc-stepper li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.5rem;padding:0 0 .55rem;
  border-bottom:2px solid var(--hair);font-family:var(--f-head);font-size:.6875rem;letter-spacing:.1em;
  line-height:1.3;text-transform:uppercase;color:var(--faint)}
.acc-stepper b{flex:none;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hair-2);font-weight:600;color:var(--faint)}
.acc-stepper li[aria-current="step"]{color:var(--gold-soft);border-bottom-color:var(--ember)}
.acc-stepper li[aria-current="step"] b{color:var(--ember-hot);border-color:var(--ember);background:rgba(232,93,42,.1)}
.acc-stepper li.acc-done{color:var(--ink-dim);border-bottom-color:var(--gold-dim)}
.acc-stepper li.acc-done b{color:var(--gold-soft);border-color:var(--gold-dim)}
.acc-form{flex-direction:column;align-items:stretch;gap:1.05rem;max-width:440px}
.acc-form .rm-field{flex:none}
.acc-form .rm-field input{font-size:1rem}
.acc-form .btn{align-self:flex-start}
.acc-pw{position:relative;display:block}
.acc-form .acc-pw input{padding-right:4.9rem}
.acc-eye{position:absolute;top:50%;right:.3rem;transform:translateY(-50%);cursor:pointer;background:none;
  border:1px solid transparent;border-radius:4px;color:var(--gold-soft);font-family:var(--f-head);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:.5rem .6rem}
.acc-eye:hover{color:var(--ink);border-color:var(--hair-2)}
.acc-eye:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.acc-check{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink-dim);cursor:pointer}
.acc-check input{width:1.1rem;height:1.1rem;margin:0;flex:none;accent-color:var(--ember);cursor:pointer}
.acc-hint{display:block;margin:.4rem 0 0;color:var(--faint);font-size:.9rem;line-height:1.45}
.acc-alt,.acc-lead{margin:0 0 .7rem;max-width:66ch;color:var(--muted)}
.acc-alt a,.acc-lead a,.acc-fine a{color:var(--gold-soft)}
.acc-lead b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.acc-fine{margin:0;max-width:66ch;color:var(--faint);font-size:.92rem}
.acc-gap{margin-top:.9rem}
.acc-win .btn[disabled],.acc-page .btn[disabled]{opacity:.6;cursor:progress}
#acAccount>.rm-casehead:first-child,#acAccount>.rm-said:first-child+.rm-casehead{margin-top:0}
.acc-sess{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem;max-width:74ch}
.acc-sess li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1rem;
  border:1px solid var(--hair);border-radius:var(--r);padding:.9rem 1.05rem;
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
.acc-sess li.acc-this{border-color:var(--hair-2)}
.acc-sess li>div{flex:1 1 220px;min-width:0}
.acc-sess b{font-family:var(--f-head);font-weight:600;font-size:.95rem;letter-spacing:.03em;color:var(--ink)}
.acc-sess .rm-pill{margin-left:.45rem;vertical-align:.12em}
.acc-sess small{display:block;margin-top:.3rem;color:var(--muted);font-size:.9rem;line-height:1.45}
.acc-sess .btn{padding:.6rem 1rem}
.acc-row{margin:0 0 .6rem}
.btn.acc-danger{border-color:#b8452a;background:linear-gradient(180deg,rgba(122,31,18,.62),rgba(122,31,18,.24))}
.btn.acc-danger:hover{background:linear-gradient(180deg,rgba(122,31,18,.8),rgba(122,31,18,.34));
  box-shadow:0 0 26px -8px rgba(232,93,42,.6)}
@media (max-width:539px){.acc-form .btn{align-self:stretch;justify-content:center}}
@media (max-width:639.98px){
  .acc-win{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;
    background:linear-gradient(180deg,var(--ash-2),var(--ash) 55%)}
  .acc-card{min-height:100%;padding:1.1rem 16px 2rem}
  .acc-x{top:.55rem;right:8px}
}
/* ---------- end of TIER 1 ADDITIONS ---------- */

/* ==================================================================
   THE STORE AND THE FOUNDER'S WALL (patch_store.py)
   #p-store and #p-founders. Every class here is prefixed .sto- (the store)
   or .fw- (the wall), apart from the one line under the About page's team
   (.ab-teamfoot). Mobile first. No rule above this block is edited, and no
   text here is set below 11px.
   ================================================================== */

/* ---------- rhythm ---------- */
.sto-sec{margin-top:clamp(3rem,7vw,4.6rem)}
.sto-head{margin-bottom:1.5rem}
.sto-head h2{font-family:var(--f-head);font-size:clamp(1.5rem,3.6vw,2.15rem);line-height:1.1;letter-spacing:.02em;color:var(--ink);margin:0}
.sto-head p{color:var(--muted);max-width:66ch;margin:.7rem 0 0;font-size:1.04rem}
.sto-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}

/* ---------- the status line: being set up, or open ---------- */
.sto-state{display:inline-flex;align-items:center;gap:.7rem;max-width:100%;margin:0;padding:.85rem 1.1rem;
  border:1px solid var(--hair-2);border-left:3px solid var(--gold-dim);border-radius:var(--r);
  background:rgba(201,162,75,.05);font-family:var(--f-head);font-size:.72rem;line-height:1.5;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.sto-state i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--gold-dim)}
.sto-state[data-open="1"]{border-left-color:var(--ok)}
.sto-state[data-open="1"] i{background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* ---------- the tag every gameplay-affecting perk carries ---------- */
.sto-tag{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;vertical-align:.1em;
  font-family:var(--f-head);font-size:.6875rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-hot);border:1px solid rgba(232,93,42,.45);background:rgba(232,93,42,.08);
  border-radius:999px;padding:.32rem .62rem}
.sto-tag::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:currentColor}
.sto-list .sto-tag{display:flex;width:max-content;max-width:100%;margin:.45rem 0 .1rem}

/* ---------- the buy controls: a closed button until STORE opens it ---------- */
.sto-buy{justify-content:center;text-align:center}
button.sto-buy[disabled],button.sto-buy[disabled]:hover{cursor:not-allowed;border-color:var(--hair-2);
  background:rgba(12,9,7,.55);color:var(--muted);box-shadow:none;transform:none}

/* ---------- Premium Membership ---------- */
.sto-prem{position:relative;overflow:hidden;border:1px solid var(--hair-2);border-radius:var(--r);
  padding:clamp(1.2rem,4vw,2.2rem);
  background:radial-gradient(110% 80% at 100% 0%,rgba(232,93,42,.1),transparent 60%),
    linear-gradient(180deg,var(--panel),rgba(12,9,7,.6))}
.sto-prem::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--ember),var(--gold));opacity:.8}
.sto-prices{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
.sto-price{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0;
  border:1px solid var(--hair);border-radius:var(--r);padding:1.15rem 1.25rem;background:rgba(12,9,7,.45)}
.sto-price.sto-best{border-color:rgba(232,93,42,.45)}
.sto-per{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;min-height:1.8rem;line-height:1;font-family:var(--f-head);
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.sto-save{font-style:normal;letter-spacing:.14em;color:var(--ember-hot);border:1px solid rgba(232,93,42,.42);
  border-radius:999px;padding:.34rem .62rem}
.sto-amt{font-family:var(--f-head);font-weight:600;font-size:clamp(1.7rem,4.6vw,2.3rem);line-height:1.1;color:var(--ink)}
.sto-amt small{font-family:var(--f-body);font-weight:400;font-size:.46em;letter-spacing:0;color:var(--muted)}
.sto-price .sto-buy{margin-top:.35rem;align-self:stretch}
.sto-renew{margin:1.1rem 0 0;color:var(--ink-dim);font-size:.98rem;max-width:80ch}
.sto-renew a,.sto-list a,.sto-rules a,.sto-foot a,.fw-foot a,.ab-teamfoot a{color:var(--gold-soft)}
.sto-perks{display:grid;gap:1.5rem 2rem;grid-template-columns:minmax(0,1fr);margin:1.8rem 0 0;
  padding-top:1.6rem;border-top:1px solid var(--hair)}
.sto-group h3{font-family:var(--f-head);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair)}
.sto-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--ink-dim);font-size:.98rem;line-height:1.5}
.sto-list li{position:relative;padding-left:1.15rem}
.sto-list li::before{content:"\2726";position:absolute;left:0;top:.1em;color:var(--gold-dim);font-size:.85em}
.sto-list li.sto-lead{padding-left:0;font-family:var(--f-quote);font-style:italic;font-size:1.05rem;color:var(--gold-soft)}
.sto-list li.sto-lead::before{content:none}
.sto-list b{color:var(--ink);font-weight:600}
.sto-note{margin:.8rem 0 0;color:var(--muted);font-size:.95rem}
.sto-rule{margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--hair);color:var(--muted);font-size:.98rem;max-width:80ch}
.sto-rule b{color:var(--ink-dim)}
@media (min-width:640px){.sto-prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.sto-perks{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- the founding tiers: five rungs, the lowest first ---------- */
.sto-retire{max-width:74ch;margin:0 0 .7rem;padding:1rem 1.2rem;border:1px solid var(--hair);
  border-left:3px solid var(--ember);border-radius:var(--r);background:rgba(232,93,42,.05);color:var(--ink-dim)}
.sto-fine{margin:0;color:var(--faint);font-size:.95rem;max-width:74ch}
.sto-ladder{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.sto-rung{position:relative;display:grid;gap:1.1rem 2rem;grid-template-columns:minmax(0,1fr);
  border:1px solid var(--hair);border-radius:var(--r);padding:clamp(1.15rem,3.6vw,1.8rem);
  background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
.sto-rung[data-tier="knight"]{border-color:var(--hair-2)}
.sto-rung[data-tier="lordcaptain"]{border-color:rgba(232,93,42,.4)}
.sto-rung[data-tier="sovereign"]{border-color:rgba(201,162,75,.6);box-shadow:0 0 48px -24px rgba(201,162,75,.75)}
.sto-rhead{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0}
.sto-num{font-family:var(--f-display);font-size:1.7rem;line-height:1;color:var(--ember)}
.sto-rhead h3{font-family:var(--f-head);font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.15;letter-spacing:.03em;color:var(--ink);margin:0}
.sto-tprice{font-family:var(--f-head);font-weight:600;font-size:1.2rem;color:var(--ember-hot)}
.sto-epi{margin:0;font-family:var(--f-quote);font-style:italic;font-size:1.06rem;line-height:1.45;color:var(--gold-soft)}
.sto-rhead .sto-buy{margin-top:.4rem}
@media (max-width:819px){.sto-rhead .sto-buy{align-self:stretch}}
@media (min-width:820px){
  .sto-rung{grid-template-columns:minmax(0,270px) minmax(0,1fr);align-items:start}
  .sto-rung > .sto-list{padding-left:2rem;border-left:1px solid var(--hair)}
}

/* ---------- a la carte ---------- */
.sto-carte{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
.sto-item{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;min-width:0;border:1px dashed var(--hair-2);
  border-radius:var(--r);padding:1.15rem 1.25rem;background:rgba(12,9,7,.4)}
.sto-item h3{font-family:var(--f-head);font-size:1.02rem;letter-spacing:.04em;color:var(--ink);margin:.35rem 0 0}
.sto-item p{margin:0;color:var(--muted);font-size:.96rem}
.sto-item .sto-range{font-family:var(--f-head);font-size:.9rem;letter-spacing:.04em;color:var(--ember-hot)}
@media (min-width:640px){.sto-carte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.sto-carte{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- never for sale, and the rules ---------- */
.sto-never{list-style:none;margin:0;padding:0;display:grid;gap:.6rem 2.2rem;grid-template-columns:minmax(0,1fr);max-width:980px}
.sto-never li{position:relative;padding-left:1.6rem;color:var(--ink-dim)}
.sto-never li::before{content:"\00D7";position:absolute;left:.1rem;top:-.05em;font-size:1.2em;line-height:1.3;color:var(--ember)}
@media (min-width:760px){.sto-never{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sto-rules{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.7rem;max-width:78ch}
.sto-rules li{position:relative;padding-left:1.15rem;color:var(--muted)}
.sto-rules li::before{content:"\2726";position:absolute;left:0;top:.1em;font-size:.85em;color:var(--gold-dim)}
.sto-rules b{color:var(--ink-dim);font-weight:600}
.sto-foot{margin:clamp(2.6rem,6vw,3.6rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--hair);color:var(--faint);font-size:.95rem;max-width:78ch}
.sto-foot p{margin:0 0 .5rem}
.sto-foot p:last-child{margin:0}

/* ---------- the Founder's Wall ---------- */
.fw-wall{min-height:5rem}
.fw-loading{margin:0;padding:1.4rem 0;color:var(--faint);font-family:var(--f-quote);font-style:italic}
.fw-tier{margin:0 0 clamp(2.2rem,5vw,3rem)}
.fw-thead{display:flex;align-items:center;gap:.8rem;margin:0 0 1.1rem}
.fw-thead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair-2),transparent)}
.fw-th{font-family:var(--f-head);font-weight:600;font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin:0}
.fw-n{font-family:var(--f-head);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.fw-names{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.fw-one{display:flex;align-items:flex-start;gap:.95rem;min-width:0;border:1px solid var(--hair);border-radius:var(--r);
  padding:1.05rem 1.15rem;background:linear-gradient(180deg,var(--panel),rgba(12,9,7,.55))}
.fw-who{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.fw-name{font-family:var(--f-head);font-weight:600;font-size:1.05rem;letter-spacing:.03em;color:var(--ink);overflow-wrap:anywhere}
.fw-meta{font-family:var(--f-head);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fw-motto{display:block;margin-top:.4rem;font-family:var(--f-quote);font-style:italic;font-size:1.02rem;line-height:1.4;
  color:var(--gold-soft);overflow-wrap:anywhere}
.fw-tier[data-tier="sovereign"] .fw-one{border-color:rgba(201,162,75,.6);box-shadow:0 0 36px -20px rgba(201,162,75,.8)}
.fw-tier[data-tier="sovereign"] .fw-name{color:var(--gold-soft)}
.fw-tier[data-tier="lordcaptain"] .fw-one{border-color:rgba(232,93,42,.42)}
.fw-tier[data-tier="knight"] .fw-one{border-color:var(--hair-2)}
.fw-foot{margin:clamp(2rem,5vw,2.8rem) 0 0;padding-top:1.3rem;border-top:1px solid var(--hair);color:var(--faint);font-size:.95rem;max-width:74ch}
/* the bronze candle every founder carries beside their name */
.fw-candle{position:relative;flex:none;width:9px;height:16px;margin:14px 2px 0 4px;border-radius:2px 2px 1px 1px;
  background:linear-gradient(90deg,#6e4220,#c47a35 42%,#e8a868 58%,#8a5429);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.fw-candle::before{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);width:7px;height:11px;margin-left:-3.5px;
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff4cc,#ffc45e 42%,var(--ember) 78%);
  box-shadow:0 0 12px 3px rgba(255,150,60,.4);transform-origin:50% 100%;animation:fw-flicker 3.2s ease-in-out infinite}
.fw-candle::after{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:3px;margin-left:-.5px;background:#2b1d12}
@keyframes fw-flicker{0%,100%{transform:scale(1)}40%{transform:scale(.94,1.05)}70%{transform:scale(1.04,.96)}}
@media (prefers-reduced-motion:reduce){.fw-candle::before{animation:none}}

/* ---------- About: the line under the team ---------- */
.ab-teamfoot{margin:clamp(1.6rem,4vw,2.2rem) 0 0;color:var(--muted);font-size:1rem;max-width:74ch}
/* ---------- end of THE STORE AND THE FOUNDER'S WALL ---------- */

/* ==================================================================
   Static pages only (build_static.py). The generated pages carry class "st" on
   <body>; nothing below can touch the app.
   ================================================================== */
/* heading order: the app's heading rules, one level up */
.st .modhalf h2{font-family:var(--f-head);font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:.03em;color:var(--ink);line-height:1.1}
.st .modsec h2{font-family:var(--f-head);font-size:1.22rem;letter-spacing:.04em;color:var(--gold-soft);margin-bottom:.9rem}
/* a dropdown closed with Escape stays shut until the pointer or focus leaves it; one
   opened from the keyboard shows at once, so its links can take focus */
.st .navitem.st-closed .drop{opacity:0;visibility:hidden;transform:translateY(6px)}
.st .navitem.st-open .drop{opacity:1;visibility:visible;transform:none;transition:none}
/* the Codex bar: a way into the live Codex in place of its search box */
.st .st-cxopen{font-family:var(--f-head);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--hair-2);padding:.36rem .7rem;border-radius:4px;margin-left:auto;white-space:nowrap}
.st .st-cxopen:hover{color:var(--gold);border-color:var(--gold-dim)}
.st .st-cxopen+.wk-gaptoggle{margin-left:0}
@media (max-width:900px){.st .st-cxopen{margin-left:0}}
/* previous and next inside the Codex */
@media (min-width:901px){.st .st-pager-grid{max-width:calc(100% - 320px - clamp(1.2rem,3vw,2.6rem))}}
.st .st-404links{display:flex;flex-wrap:wrap;gap:.7rem}
/* the legal pages: privacy policy and terms of service */
.st .legal{max-width:70ch;color:var(--ink-dim);line-height:1.72;overflow-wrap:break-word}
.st .legal h1{font-family:var(--f-head);font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.08;letter-spacing:.01em;color:var(--ink);margin:0 0 1.1rem}
.st .legal h2{font-family:var(--f-head);font-size:1.2rem;line-height:1.3;letter-spacing:.04em;color:var(--gold-soft);margin:2.6rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--hair)}
.st .legal p{margin:0 0 1.05rem}
.st .legal ul{margin:0 0 1.3rem;padding-left:1.3rem}
.st .legal li{margin:0 0 .55rem;padding-left:.2rem}
.st .legal li::marker{color:var(--gold-dim)}
.st .legal strong{color:var(--ink);font-weight:600}
.st .legal a{color:var(--gold-soft);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:.2em}
.st .legal a:hover{color:var(--ink);text-decoration-color:var(--gold)}