:root{
  --bg:#0a0b0d; --panel:#0f1114; --line:#2b3038; --line2:#48505c;
  --gold:#d6343f; --gold2:#eef1f4; --text:#c4cad2; --dim:#9aa2ad; --green:#5fd06a; --red:#d0584a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"EB Garamond",Georgia,serif;font-size:17px;line-height:1.5}
a{color:inherit;text-decoration:none}
h2,h3,h4,label,.btn,.menu a,.tabs button,.hero-line,.hero-side,.st-v,.banner p,.foot nav a,.feat b,.about-mid small{font-family:Cinzel,Georgia,serif;letter-spacing:.08em}
h2,h3,h4{font-weight:500;color:#e7ebf0;margin:0}
section[id],div[id]{scroll-margin-top:84px}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;height:68px;z-index:20;display:flex;align-items:center;gap:28px;padding:0 28px;
  background:linear-gradient(#0a0b0df2,#0a0b0dc4);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand svg{height:48px;width:auto;display:block}
.menu{display:flex;gap:26px;flex:1;justify-content:center}
.menu a{font-size:12px;text-transform:uppercase;color:var(--text);padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a.on{color:var(--gold2);border-color:var(--gold)}
.top-right{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:1px solid var(--line2);width:40px;height:36px;padding:8px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--gold);margin:3px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;text-transform:uppercase;font-size:12px;font-weight:600;
  padding:11px 22px;border:1px solid var(--line2);color:var(--gold2);background:#121418cc;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.btn:hover{background:#2a1418;color:#fff;border-color:var(--gold)}
.btn.gold{background:linear-gradient(#3a1519,#170c0e);border-color:var(--gold)}
.btn.big{font-size:19px;padding:17px 46px;background:linear-gradient(#4f1a20,#1a0c0e);border-color:var(--gold);box-shadow:0 0 34px #d6343f33}
.btn.big b{font-size:22px}

/* hero */
.hero{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;padding:110px 20px 70px;
  background:linear-gradient(#0a0b0d55,#0a0b0d22 40%,#0a0b0d 98%),url(img/hero.jpg) center 30%/cover no-repeat}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-logo{width:min(600px,88vw);filter:drop-shadow(0 6px 30px #000)} .hero-logo svg{display:block;width:100%;height:auto}
.hero-line{margin:0;font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:#dfe4ea;text-shadow:0 2px 10px #000}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-side{position:absolute;right:5%;top:150px;text-align:center;text-transform:uppercase;font-size:14px;line-height:2.3;color:var(--gold);opacity:.8;text-shadow:0 2px 8px #000}
.hero-side i{font-style:normal;font-size:8px}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.frame{background:linear-gradient(#111317,#0b0d0f);border:1px solid var(--line);position:relative}
.frame:before{content:"";position:absolute;inset:4px;border:1px solid #23272d;pointer-events:none}

/* status */
.status{display:flex;flex-wrap:wrap;gap:10px 34px;padding:26px 34px;margin-top:-26px;z-index:2}
.st{min-width:110px}
.st.wide{flex:1;min-width:230px;border-left:1px solid var(--line);padding-left:30px}
label{display:block;font-size:11px;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.st-v{font-size:21px;color:#eef1f4;display:flex;align-items:center;gap:9px}
.st-v.caps{text-transform:uppercase;font-size:17px}
.st-v2{font-size:19px;color:#eef1f4}
.st small,.panel small{color:var(--dim);font-size:13px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 3px #ffffff10}
.up .dot{background:var(--green);box-shadow:0 0 10px var(--green)} .up span{color:var(--green)}
.down .dot{background:var(--red)} .down span{color:var(--red)}
.bar{height:4px;background:#1f2329;margin:9px 0 5px} .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f9d4a,#8fe07f)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px auto}
.card{height:150px;display:flex;align-items:flex-end;justify-content:space-between;padding:22px 26px;overflow:hidden;
  background:linear-gradient(#0a0b0d00 20%,#0a0b0df0),url(img/hero.jpg) no-repeat;background-size:auto,330%;transition:background-size .25s,border-color .25s}
.card.c1{background-position:0 0,8% 55%} .card.c2{background-position:0 0,58% 22%} .card.c3{background-position:0 0,96% 60%}
.card:hover{border-color:var(--gold);filter:brightness(1.2)}
.card h3{font-size:18px;text-transform:uppercase} .card p{margin:2px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:Cinzel,serif}
.card b{color:var(--gold);font-size:22px}

/* about */
.about{display:grid;grid-template-columns:1fr 1.05fr .8fr;gap:30px;align-items:center;max-width:1180px;margin:10px auto 0;padding:40px 20px}
.about-text h2{font-size:30px;line-height:1.25;color:var(--gold2);text-transform:uppercase}
.about-text p{margin:18px 0 22px}
.about-mid{height:330px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:34px;text-align:center;
  background:radial-gradient(ellipse at 50% 35%,#6f8fd033,transparent 60%),linear-gradient(#0a0b0d00,#0a0b0d 92%),url(img/hero.jpg) 62% 12%/260% no-repeat;border-inline:1px solid var(--line)}
.about-mid small{font-size:11px;text-transform:uppercase;color:var(--gold)}
.about-mid h2{font-size:30px;text-transform:uppercase;letter-spacing:.14em}
.about-mid p{margin:4px 0 0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-family:Cinzel,serif}
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:1px solid var(--line2)}
.timeline li{position:relative;padding:0 0 22px 22px}
.timeline li:before{content:"";position:absolute;left:-31px;top:4px;width:16px;height:16px;border:1px solid var(--gold);background:var(--bg);transform:rotate(45deg)}
.timeline li.now:before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.timeline b{display:block;font-family:Cinzel,serif;font-weight:500;color:#e7ebf0;font-size:16px}
.timeline span{font-family:Cinzel,serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.timeline li.now span{color:var(--gold)}

/* features strip */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 46px;padding:26px 20px;margin:20px 0;border-block:1px solid var(--line);background:#0c0d10}
.feat{display:flex;align-items:center;gap:13px}
.feat svg,.disc{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.feat b{display:block;font-size:11px;font-weight:600;text-transform:uppercase;color:#e7ebf0}
.feat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:Cinzel,serif}

/* panels */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.panel{padding:24px 26px;min-height:270px}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.panel h3{font-size:16px;text-transform:uppercase}
.news article{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #1b1e23}
.news article:first-child{border:0}
.news b{display:block;font-weight:500;color:#e7ebf0} .news p{margin:2px 0 0;font-size:14px;color:var(--dim)}
.news time{white-space:nowrap;font-size:13px;color:var(--dim)}
.tabs{display:flex;gap:6px;margin-bottom:8px}
.tabs button{flex:1;background:#0b0c0e;border:1px solid var(--line);color:var(--dim);font-size:11px;text-transform:uppercase;padding:6px 0;cursor:pointer}
.tabs button.on{color:var(--gold2);border-color:var(--gold);background:#2a1418}
.ranks div{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px solid #1b1e23}
.ranks i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;font-size:13px;color:var(--dim)}
.ranks div:nth-child(-n+3) i{border:1px solid var(--gold);border-radius:50%;color:var(--gold2)}
.ranks span{flex:1;color:#e7ebf0} .ranks span small{display:block} .ranks em{font-style:normal;color:var(--text)}
.empty{color:var(--dim);padding:18px 0}
.comm{background:radial-gradient(circle at 85% 20%,#5865f222,transparent 55%),linear-gradient(#111317,#0b0d0f)}
.disc{width:48px;height:48px;fill:#5865f2;stroke:none;margin-top:10px}
.comm h4{font-size:15px;text-transform:uppercase;margin:12px 0 6px} .comm p{margin:0 0 18px}
.lead{margin:0 0 6px;color:#e7ebf0}
.steps{margin:8px 0 20px;padding-left:20px} .steps li{padding:3px 0} .steps b{color:var(--gold2);font-weight:500}
.note{font-size:14px;color:var(--dim);margin:16px 0 0}

/* banner and footer */
.banner{margin-top:26px;padding:70px 20px;text-align:center;border-block:1px solid var(--line);
  background:linear-gradient(#0a0b0d,#2a0f1299 55%,#0a0b0d),url(img/hero.jpg) center 78%/cover}
.banner p{margin:0;font-size:22px;letter-spacing:.34em;text-transform:uppercase;color:#e7ebf0;line-height:1.7;text-shadow:0 2px 14px #000}
.banner span{color:#e0505a}
.foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:34px 20px 46px}
.foot-brand svg{height:48px;width:auto;display:block} .foot small{font-size:12px;color:var(--dim);letter-spacing:.06em}
.foot nav{display:flex;flex-wrap:wrap;gap:18px} .foot nav a{font-size:11px;text-transform:uppercase;color:var(--text)} .foot nav a:hover{color:var(--gold2)}
.foot-right{text-align:right} .foot-right span{display:block;color:var(--gold);font-family:Cinzel,serif;font-size:13px}

@media (max-width:980px){
  .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:#0a0b0df7;border-bottom:1px solid var(--line)}
  .menu.open{display:flex;max-height:calc(100vh - 68px);overflow-y:auto;overscroll-behavior:contain} .menu a{padding:14px 24px;border-bottom:1px solid #1b1e23}
  .burger{display:block} .top{justify-content:space-between;padding:0 16px;gap:10px}
  .hero-side{display:none} .hero{min-height:540px}
  .cards,.three,.two,.about{grid-template-columns:1fr}
  .about-mid{border:0;border-block:1px solid var(--line)}
  .st.wide{border:0;padding:0;flex-basis:100%}
  .status{padding:22px}
  .foot{flex-direction:column;text-align:center} .foot-right{text-align:center} .foot nav{justify-content:center}
  .banner p{font-size:16px;letter-spacing:.2em}
}

/* additions for the chapter layout */
.ico{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line2);background:#121418cc}
.ico svg{width:20px;height:20px;fill:var(--gold)} .ico:hover{border-color:var(--gold)}
.st-row{display:flex;justify-content:space-between;align-items:baseline} .st-row span{font-size:13px;color:var(--text)}
.more{font-family:Cinzel,serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .more:hover{color:var(--gold2)}
.feat svg.fill{fill:var(--gold);stroke:none}
.page{height:100px}
@media (max-width:980px){.acc{display:none}}
@media (max-width:520px){.top-right .btn.gold{display:none}}
.foot nav{justify-content:center;flex:1}
.soc{flex-basis:100%;display:flex;justify-content:center;gap:22px;margin-top:14px}
.soc svg{width:20px;height:20px;fill:var(--dim)} .soc a:hover svg{fill:var(--gold2)}

/* pictures cut out of the mockup */
.hero{overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;top:0;bottom:0;width:min(46%,670px);background-size:cover;background-repeat:no-repeat;pointer-events:none}
.hero:before{left:0;background-position:left top;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(#000 70%,transparent);mask-composite:intersect}
.hero:after{right:0;background-position:right top;
  -webkit-mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(#000 70%,transparent);mask-composite:intersect}
.hero-in{position:relative;z-index:1}
.hero-side{display:none}
.card{background-size:auto,cover!important;background-position:0 0,center top!important}
.card.c1{background-image:linear-gradient(#0a0b0d00 30%,#0a0b0df5 78%),url(img/card1.jpg)}
.card.c2{background-image:linear-gradient(#0a0b0d00 30%,#0a0b0df5 78%),url(img/card2.jpg)}
.card.c3{background-image:linear-gradient(#0a0b0d00 30%,#0a0b0df5 78%),url(img/card3.jpg)}
.about-mid{background:linear-gradient(#0a0b0d00 45%,#0a0b0d 88%),url(img/mid.jpg) center top/cover no-repeat}
.comm{background:linear-gradient(90deg,#0e1013 45%,#0e101355),url(img/angel.jpg) right 30%/auto 70% no-repeat,#0e1013}
@media (max-width:980px){.hero:before,.hero:after{width:60%;opacity:.55}}

/* hero: the owner's full picture (art/1.png) replaces the two cut sides */
.hero{min-height:min(56vw,860px);background:linear-gradient(#0a0b0d66,#0a0b0d00 22%,#0a0b0d00 62%,#0a0b0d 99%),url(img/hero_full.jpg) center top/cover no-repeat}
.hero:before,.hero:after{display:none}
@media (max-width:980px){.hero{min-height:560px;background-position:center,58% top}}
/* centre: the owner's crystal picture (art/5.webp) */
.about-mid{height:380px;background:linear-gradient(#0a0b0d00 50%,#0a0b0d 92%),url(img/mid.jpg) center 42%/auto 135% no-repeat}

/* the words on the empty banner of the hero picture (banner: 87-98% from the left, 10-64% from the top) */
.hero-side{display:block;position:absolute;right:2.2%;left:auto;top:21%;width:10.6%;text-align:center;font-size:clamp(9px,1.02vw,17px);line-height:2.5;letter-spacing:.12em;color:#d6343f;opacity:.92;text-shadow:0 1px 6px #000}
@media (max-width:980px){.hero-side{display:none}}
@media (min-width:1536px){.hero-side{display:none}}
.hero-side{top:12vw;right:3%;width:11%;font-size:clamp(9px,1.02vw,21px)}
@media (min-width:1536px){.hero-side{display:block}}
/* a lower hero, so the status bar shows without scrolling (the picture keeps its top, the banner ends at 36vw) */
.hero{min-height:min(40vw,700px);padding:96px 20px 56px}
@media (max-width:980px){.hero{min-height:520px}}

/* menu with drop-downs, inner pages */
.menu{align-items:center} .mi{position:relative} .mi>a{display:block} .mi i{font-style:normal;font-size:9px;opacity:.7}
.drop{display:none;position:absolute;top:100%;left:-14px;min-width:170px;padding:8px 0;background:#0c0d10f7;border:1px solid var(--line2);z-index:30}
.mi.has:hover .drop{display:block}
.drop a{display:block;padding:9px 16px;border:0!important;font-size:11px;white-space:nowrap} .drop a:hover{background:#2a1418}
.main{padding-top:110px;min-height:70vh}
.ph{margin:0 0 26px} .ph small{font-family:Cinzel,serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ph h1{font-family:Cinzel,serif;font-weight:500;font-size:38px;letter-spacing:.06em;text-transform:uppercase;color:#eef1f4;margin:6px 0 8px}
.ph p{margin:0;font-size:19px;color:var(--text);max-width:760px}
.inner .panel{min-height:0;margin-bottom:16px}
.tabs.wide{max-width:640px;margin-bottom:14px} .tabs.wide button{padding:9px 0;font-size:11px}
.tw{overflow-x:auto}
.t{width:100%;border-collapse:collapse;font-size:16px}
.t th{font-family:Cinzel,serif;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:10px 12px;border-bottom:1px solid #1b1e23;white-space:nowrap} .t tr:hover td{background:#14171b}
.t b{font-weight:500;color:var(--gold2)} .t .r{text-align:right} .t .c{width:46px}
.t td small,.epic small,.castle small{display:block;color:var(--dim);font-size:13px}
.rk{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;font-size:13px;color:var(--dim)} .rk.top{border:1px solid var(--gold);border-radius:50%;color:var(--gold2)}
.ok{color:var(--green)} .no{color:var(--red)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.castle h3,.epic h3{font-size:19px;text-transform:uppercase;margin-bottom:12px} .epic h3{margin:6px 0 10px}
.castle dl{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;margin:0} .castle dt{font-family:Cinzel,serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:5px} .castle dd{margin:0} .castle dd b{color:var(--gold2);font-weight:500}
.filters{display:flex;gap:10px;margin-bottom:12px}
.filters input,.filters select{background:#0b0c0e;border:1px solid var(--line);color:var(--text);font:inherit;font-size:16px;padding:9px 12px} .filters input{flex:1} .filters input:focus,.filters select:focus{outline:0;border-color:var(--gold)}
.post time{font-family:Cinzel,serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .post h3{font-size:20px;margin:6px 0 8px} .post p{margin:0}
.road{border-left:1px solid var(--line2);margin-left:44px;padding-left:0}
.rd{display:flex;gap:22px;align-items:flex-start;margin:0 0 4px -45px} .rd .panel{flex:1} .rd h3{font-size:18px;margin-bottom:6px} .rd p{margin:0}
.when{width:90px;text-align:center;background:var(--bg);padding:8px 0;border:1px solid var(--line2)} .when b{display:block;font-family:Cinzel,serif;font-weight:500;font-size:26px;color:var(--gold2);line-height:1} .when small{font-family:Cinzel,serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.isec{margin-bottom:34px}
.ihead{display:flex;gap:18px;align-items:flex-start;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ihead i{font-style:normal;font-family:Cinzel,serif;color:var(--gold);border:1px solid var(--line2);width:44px;height:44px;display:grid;place-items:center;flex:none}
.ihead h2{font-size:26px;text-transform:uppercase} .ihead p{margin:4px 0 8px;color:var(--dim)}
.chip{display:inline-block;font-size:13px;border:1px solid var(--line);padding:3px 10px;margin:0 6px 4px 0;color:var(--text)}
.topic h3{font-size:18px;margin-bottom:10px} .topic p{margin:0 0 10px} .topic ul{margin:0 0 6px;padding-left:20px} .topic li{padding:3px 0} .topic li::marker{color:var(--gold)}
@media (max-width:980px){
  .mi.has:hover .drop,.drop{display:block;position:static;border:0;padding:0;background:none} .drop a{padding:11px 40px;color:var(--dim)}
  .grid3,.grid4{grid-template-columns:1fr} .ph h1{font-size:28px} .main{padding-top:90px}
  .road{margin-left:0;border:0} .rd{margin-left:0;flex-direction:column;gap:8px}
}

/* database pages */
.ph small a{color:var(--gold)} .ph small a:hover{color:var(--gold2)}
.dbc{display:block;min-height:150px!important;transition:border-color .2s} .dbc:hover{border-color:var(--gold)}
.dbc h3{font-size:19px;text-transform:uppercase;margin-bottom:8px} .dbc p{margin:0 0 14px;color:var(--text)}
.dbc small{font-family:Cinzel,serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lk{color:var(--gold2)} .lk:hover{color:#fff;text-decoration:underline}
.gr{display:inline-block;min-width:34px;text-align:center;font-family:Cinzel,serif;font-size:11px;letter-spacing:.06em;border:1px solid var(--line2);padding:2px 5px;color:var(--dim)}
.gS,.gS80,.gS84{color:var(--gold2);border-color:var(--gold)} .gA{color:#c9a0dc} .gB{color:#e07a6a} .gC{color:#8fc08a} .gD{color:#7fa8d0}
.count{align-self:center;font-family:Cinzel,serif;font-size:12px;color:var(--dim);min-width:60px;text-align:right}
.t td.wrap{white-space:normal;min-width:320px;font-size:15px;line-height:1.4}
.pager{display:flex;justify-content:center;align-items:center;gap:18px;padding-top:16px}
.pager button{background:#121418;border:1px solid var(--line2);color:var(--gold2);font-family:Cinzel,serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;cursor:pointer}
.pager button:disabled{opacity:.35;cursor:default} .pager span{color:var(--dim);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 20px;margin-bottom:6px}
.stats b{display:block;font-weight:500;font-size:19px;color:#eef1f4}
.desc{margin:16px 0 0;line-height:1.6} .desc.dim{color:var(--dim);font-size:15px;margin-top:8px}
.chips{margin-top:16px} .shop{padding:10px 0;border-top:1px solid #1b1e23} .shop:first-of-type{border:0} .shop b{display:block;color:var(--gold2);font-weight:500;margin-bottom:8px}
@media (max-width:980px){.filters{flex-wrap:wrap} .filters input{flex-basis:100%}}

.defs{position:absolute}
/* admin: the bar at the bottom and the editor */
.isadmin{padding-bottom:52px}
.abar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 18px;background:#121418f5;border-top:1px solid var(--gold);font-size:14px}
.abar b{color:var(--gold2);font-weight:500;margin-right:8px} .abar span{color:var(--dim)}
.abar button,.arb button,.ax{background:#0b0c0e;border:1px solid var(--line2);color:var(--text);font-family:Cinzel,serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;cursor:pointer}
.abar button:hover,.arb button:hover{border-color:var(--gold);color:var(--gold2)} .aout{margin-left:auto}
.amsg{color:var(--gold)!important;font-size:14px;flex:1}
.aov{position:fixed;inset:0;z-index:50;background:#000c;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:40px 16px}
.apanel{width:min(900px,100%);background:#0f1114;border:1px solid var(--gold);padding:22px 24px}
.ahead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .ahead h3{font-size:18px;text-transform:uppercase}
.ax{font-size:18px;padding:2px 10px} .anote{margin:0 0 14px;color:var(--dim);font-size:15px}
.af{display:block;margin-bottom:10px} .af span{display:block;font-family:Cinzel,serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.af small{color:var(--dim);font-size:13px}
.af input,.af textarea{width:100%;background:#0a0b0d;border:1px solid var(--line);color:#e7ebf0;font:inherit;font-size:16px;padding:8px 10px;resize:vertical}
.af input:focus,.af textarea:focus{outline:0;border-color:var(--gold)}
.ar{border:1px solid #23272d;padding:12px;margin-bottom:10px;background:#0b0d0f}
.arb{display:flex;gap:6px;justify-content:flex-end;align-items:center} .arb b{margin-right:auto;font-family:Cinzel,serif;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.asec{border:1px solid var(--line2);padding:14px;margin-bottom:16px}
.afoot{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:16px;position:sticky;bottom:0;background:#0f1114;padding-top:12px;border-top:1px solid var(--line)}
.alogin{max-width:420px} .alogin .btn{margin-top:6px}
.apanel.wide{width:min(1150px,100%)} .afoot.top{position:static;border:0;padding:0;margin:0 0 14px;justify-content:flex-start}
.afoot.top .amsg{order:9} .adiff{max-height:60vh;overflow:auto;border:1px solid var(--line)} .adiff td{white-space:normal;font-size:14px;vertical-align:top}
[hidden]{display:none!important}

/* account panel */
.af.sw{display:flex;gap:10px;align-items:center} .af.sw input{width:auto} .af.sw span{margin:0;text-transform:none;letter-spacing:0;font-family:inherit;font-size:15px;color:var(--text)}
.pgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
.ptabs{display:flex;border:1px solid var(--line);margin-bottom:18px} .ptabs button{flex:1;background:none;border:0;color:var(--dim);font-family:Cinzel,serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 0;cursor:pointer}
.ptabs button.on{background:#2a1418;color:var(--gold2)}
.pform .btn{margin-top:6px} .pmsg{display:block;min-height:22px;margin-top:10px;color:var(--gold)} .pmsg.bad{color:var(--red)}
.pside li{padding:5px 0} .pside ul{margin:10px 0 0;padding-left:20px} .pside li::marker{color:var(--gold)} .pside b{color:var(--gold2);font-weight:500}
.pbar{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.pbar .grow{flex:1}
.wallet b{font-family:Cinzel,serif;font-weight:500;font-size:28px;color:var(--gold2)}
.gacc{border-top:1px solid #1b1e23;padding:14px 0} .gacc:first-child{border:0;padding-top:0}
.acch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px} .acch b{font-family:Cinzel,serif;font-weight:500;letter-spacing:.06em;color:#e7ebf0}
.mini{background:#0b0c0e;border:1px solid var(--line2);color:var(--text);font-family:Cinzel,serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;cursor:pointer} .mini:hover{border-color:var(--gold);color:var(--gold2)}
.two-forms{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shopbox{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-end} .shopbox .af{margin:0;width:140px} .total{font-family:Cinzel,serif;font-size:22px;color:var(--gold2)}
.af select{width:100%;background:#0a0b0d;border:1px solid var(--line);color:#e7ebf0;font:inherit;font-size:16px;padding:8px 10px}
@media (max-width:980px){.pgrid,.two-forms{grid-template-columns:1fr}}
/* the owner's pictures 2-4, 6, 7 (made through his ChatGPT from the mockup) */
.card.c1,.card.c2,.card.c3{background-position:0 0,center 30%!important}
.banner{background:linear-gradient(90deg,#0a0b0d99,#0a0b0d22 25%,#0a0b0d55 50%,#0a0b0d22 75%,#0a0b0d99),linear-gradient(#0a0b0d,#0a0b0d00 18%,#0a0b0d00 82%,#0a0b0d),url(img/banner.jpg) center 55%/cover no-repeat,#0a0b0d}
/* a link inside the lead text of a page */
.ph p a{color:var(--gold2);border-bottom:1px solid #d6343f66}
/* the logo and the line under it stay readable over the bright castle: a soft dark glow behind them */
.hero-in:before{content:"";position:absolute;inset:-30px -140px -10px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#0a0b0de0 0%,#0a0b0d99 42%,#0a0b0d00 70%)}
.hero-logo svg text{paint-order:stroke;stroke:#0a0b0d;stroke-width:3px;stroke-linejoin:round}
.hero-line{color:#eef1f4;font-weight:600;text-shadow:0 0 6px #000,0 2px 12px #000,0 0 22px #000}
/* item icons of the database */
.il{display:inline-flex;align-items:center;gap:10px} .ico{width:32px;height:32px;flex:none;border:1px solid #2b3038;background:#0e1013;display:inline-block}
.ico.big{width:48px;height:48px;margin-right:14px;vertical-align:middle;image-rendering:auto} .t td{vertical-align:middle}
/* chapters: the items of every chapter, as the client shows them */
.tl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .tl-pics,.mid-pics{display:flex;gap:6px}
.tl-pics img{width:28px;height:28px;display:block;border:1px solid var(--line2)} .tl-pics a:hover img{border-color:var(--gold)}
.mid-pics{justify-content:center;gap:14px;margin:12px 0 4px} .mid-pics img{width:56px;height:56px;display:block;border:1px solid #48505c;box-shadow:0 0 18px #000,0 0 0 3px #0a0b0dcc;image-rendering:auto} .mid-pics a:hover img{border-color:var(--gold)}
/* hero facts, legal line, footer Discord inline */
.hero-facts{margin:-6px 0 0;font-family:Cinzel,serif;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#ff5560;text-shadow:0 0 8px #000,0 2px 12px #000}
.legal{flex-basis:100%;text-align:center;font-size:12px;color:var(--dim);margin:8px 0 0;opacity:.85}
.soc{flex-basis:auto;margin-top:0}
/* inner pages: a band of the hero picture behind the title */
body.inner{position:relative}
body.inner:before{content:"";position:absolute;top:0;left:0;right:0;height:360px;z-index:0;pointer-events:none;background:linear-gradient(#0a0b0d8c,#0a0b0de6 70%,#0a0b0d),url(img/hero_full.jpg) center 28%/cover no-repeat}
body.inner .main,body.inner .wrap,body.inner .phwrap{position:relative;z-index:1}
.phwrap{padding-top:110px} .phwrap .ph{margin-bottom:22px}
/* features page */
.fx-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .fx-nav a{font-family:Cinzel,serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line);color:var(--text)} .fx-nav a:hover{border-color:var(--gold);color:#fff}
.fx{margin-bottom:18px} .fx-lead{margin:0 0 14px;color:var(--dim);font-size:17px}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.fx-row{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;background:#0e1013;border:1px solid #1b1e23} a.fx-row:hover{border-color:var(--line2);background:#14171b}
.fx-row b{display:block;font-family:Cinzel,serif;font-weight:500;color:#e7ebf0;font-size:15px;letter-spacing:.04em} .fx-row p{margin:2px 0 0;font-size:15px;line-height:1.35;color:var(--text)}
.fx-ico{width:40px;height:40px;flex:none;border:1px solid #48505c;background:#0e1013} .fx-ico.em{padding:5px;border-color:#2b3038;background:#14171b}
@media (max-width:760px){.fx-grid{grid-template-columns:1fr}}
.fx-pics{display:flex;gap:6px;flex:none}
/* web interface guidelines: focus, motion, numbers, touch */
html{color-scheme:dark}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #ff5560;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#d6343f;color:#fff;padding:8px 14px;font-family:Cinzel,serif;font-size:13px;letter-spacing:.1em} .skip:focus{top:12px}
.t td,.stats b,.st-v,.st-v2,.ranks,.count,#st-pct{font-variant-numeric:tabular-nums}
a,button,select,input{touch-action:manipulation} body{-webkit-tap-highlight-color:#d6343f33}
h1,h2,h3{text-wrap:balance}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*:before,*:after{transition:none!important;animation:none!important}}
/* design engineering pass (Emil Kowalski): press feedback with a strong ease-out, only transform animates */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
.btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform 160ms var(--ease-out)} .btn:active{transform:scale(.97)}
.card{transition:border-color .2s ease,filter .2s ease,transform 160ms var(--ease-out)} .card:active{transform:scale(.99)}
.tabs button,.fx-nav a,.mini,.abar button,.arb button,.pager button,.ptabs button{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform 160ms var(--ease-out)}
.tabs button:active,.fx-nav a:active,.mini:active,.abar button:active,.arb button:active,.pager button:active,.ptabs button:active{transform:scale(.97)}
a.fx-row,.dbc{transition:background-color .2s ease,border-color .2s ease,transform 160ms var(--ease-out)} a.fx-row:active,.dbc:active{transform:scale(.99)}
/* home hero (title, statement, one action) and readable sizes, merged from the mix preview 2026-10-14 */
/* readable small text: nothing meant to be read under 13 px */
.menu a, .btn, .card p, .timeline span, .feat span, .tabs button, .foot small, .foot nav a, .more, .drop a, .ph small,
.t th, .castle dt, .post time, .when small, .dbc small, .count, .pager button, .fx-nav a, .legal { font-size: 13px }
label, .about-mid small, .about-mid p, .feat b { font-size: 13px }
.st-v, .st-v2 { font-size: 22px }
body { font-size: 18px }
.news p, .ranks, .comm p { font-size: 16px }
/* contrast of the soft labels */
:root { --dim: #a9b0ba }
.timeline li.now span { color: #ff5a64 }

/* hero: centred title and statement on the picture, the logo smaller above them, one flat action */
.hero { justify-content: center; text-align: center; min-height: min(46vw, 760px); padding: 110px 6vw 70px }
.hero:after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 62% at 50% 52%, rgba(10,11,13,.78) 0%, rgba(10,11,13,.45) 55%, rgba(10,11,13,0) 100%) }
.hero-in { align-items: center; gap: 0; max-width: 760px }
.hero-in:before { display: none }
.hero-logo { width: 300px; margin-bottom: 26px }
.mix-title { text-shadow: 0 2px 18px #000; font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: -0.02em; line-height: .98; margin: 0;
  font-size: clamp(46px, 6.2vw, 96px); color: #eef1f4; text-wrap: balance }
.mix-lead { margin: 22px auto 32px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: #dfe3e8; max-width: 38ch; text-shadow: 0 1px 10px #000 }
.mix-row { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center }
.mix-act { background: #d6343f; color: #fff; font-family: Cinzel, serif; font-weight: 700; font-size: 16px; letter-spacing: .04em;
  padding: 16px 30px; transition: transform 160ms var(--ease-out), background-color .2s ease }
.mix-act:hover { background: #e2434d } .mix-act:active { transform: scale(.97) }
.mix-link { font-size: 17px; color: #cfd4da; border-bottom: 1px solid #cfd4da55 } .mix-link:hover { color: #fff }
.mix-facts { margin-top: 26px; font-family: Cinzel, serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #ff6a73 }
@media (max-width: 760px) {
  .hero { padding: 96px 20px 56px; min-height: 0 }
  .hero:after { background: linear-gradient(0deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.55) 60%, rgba(10,11,13,.2) 100%) }
  .hero-logo { width: 220px }
}

/* motion: sections rise in once as they come into view (transform and opacity only) */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.rise.on { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none } }
/* Join our Discord window (layout.js) */
.dpop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:#050608cc;opacity:0;transition:opacity .2s ease}
.dpop.in{opacity:1}
.dpop-box{position:relative;max-width:440px;width:100%;padding:34px 30px 28px;text-align:center;background:linear-gradient(#141619,#0c0d10);border:1px solid var(--gold);box-shadow:0 0 50px #d6343f33;transform:scale(.96);transition:transform .2s var(--ease-out)}
.dpop.in .dpop-box{transform:scale(1)}
.dpop-ic svg{width:54px;height:54px;fill:#5865f2}
.dpop-box h3{margin:12px 0 10px;font-size:24px;color:var(--gold2)}
.dpop-box p{margin:0 0 22px;color:var(--text);font-size:16px;line-height:1.6}
.dpop-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.dpop-x{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--dim);font-size:28px;line-height:1;cursor:pointer}
.dpop-x:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.dpop,.dpop-box{transition:none}}

/* hero 2026-10-15: smaller (his word: the header, the title and the text take too much room); the picture is drawn at
   the full width from its top, so the words sit on the banner at every width (banner: x 90.6-98.1 %, y 6-34.7 vw) */
.hero { min-height: min(36vw, 640px); padding: 92px 6vw 40px; background-size: 100% auto; background-position: center top }
.hero-logo { width: 220px; margin-bottom: 14px }
.mix-title { font-size: clamp(32px, 3.6vw, 58px) }
.mix-lead { margin: 14px auto 20px; font-size: clamp(16px, 1.15vw, 18px); max-width: 46ch }
.mix-act { font-size: 14px; padding: 12px 24px }
.mix-link { font-size: 15px }
.mix-facts { margin-top: 16px; font-size: 12px }
.hero-side { left: 90.1%; right: auto; width: 7.5%; top: 11.5vw; font-size: clamp(8px, .74vw, 16px); line-height: 2.3; letter-spacing: .08em; white-space: nowrap }
@media (max-width: 980px) { .hero { background-size: cover } }