@font-face{font-family:Cinzel;src:url(/fonts/cinzel.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --gold:#e3b866;--gold-hi:#f7dc95;--gold-lo:#8a5a1e;--ink:#f1e4c8;--dim:#bfa982;
  --serif:Cochin,"Cormorant Garamond",Georgia,serif;
  --caps:Copperplate,Cinzel,"Times New Roman",serif;
  --hall:#f3c96a;--fer:#e0464f;--war:#4fc8e8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#060404}
body{margin:0;color:var(--ink);font:600 18px/1.55 var(--serif);
  background:radial-gradient(ellipse 120% 60% at 50% 0,#3a1012 0,#140808 40%,#060404 75%) fixed}
img{max-width:100%;height:auto}
a{color:var(--gold-hi)}
.px{image-rendering:pixelated;display:block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.8))}
.flip{transform:scaleX(-1)}

/* header */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(18px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(8,5,5,.95),rgba(8,5,5,.75));
  border-bottom:1px solid rgba(214,168,88,.35);backdrop-filter:blur(6px)}
.brand{font:700 20px var(--serif);letter-spacing:.3em;text-decoration:none;color:var(--gold-hi)}
.bar .links{display:flex;gap:18px;align-items:center;margin-left:auto}
.bar .links a{font:700 12px var(--caps);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--dim)}
.bar .links a:hover{color:var(--gold-hi)}
.bar .cta-s{flex:none;font:700 12px var(--caps);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#1a0f05!important;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#b07a2c);padding:7px 12px;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* hero */
.hero{position:relative;min-height:min(92svh,820px);display:grid;place-items:center;overflow:hidden;text-align:center;border-bottom:1px solid rgba(214,168,88,.35)}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,5,5,.65),rgba(8,5,5,.05) 35%,rgba(8,5,5,.15) 60%,#070404 100%),
  radial-gradient(ellipse 80% 40% at 50% 100%,rgba(150,22,22,.45),transparent 70%),
  url(img/stages/stage_drowned_chapel.jpg) center 30%/cover}
.hero::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 160px 50px rgba(0,0,0,.9);pointer-events:none}
.hero-in{position:relative;z-index:2;padding:36px 20px 44px;width:min(760px,100%)}
.logo{margin:0;font:700 clamp(46px,11vw,104px)/1 var(--serif);letter-spacing:.24em;padding-left:.24em;color:transparent;
  background:linear-gradient(180deg,#fff7dc 0%,#f4d283 34%,#b8822e 58%,#f7dc95 76%,#7b4c16 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #1e0f04) drop-shadow(0 0 26px rgba(220,120,40,.5))}
.logo span{display:block;font:700 clamp(13px,2.6vw,20px) var(--caps);letter-spacing:.9em;padding-left:.9em;margin-top:6px}
.logo::after{content:"";display:block;margin:14px auto 0;width:min(320px,70%);height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 9'%3E%3Cpath d='M2 4.5h56M82 4.5h56' stroke='%23c99a4c' stroke-width='.8'/%3E%3Cpath d='M70 .5l4 4-4 4-4-4z' fill='%23f0cd85'/%3E%3Ccircle cx='61' cy='4.5' r='1.3' fill='%23c99a4c'/%3E%3Ccircle cx='79' cy='4.5' r='1.3' fill='%23c99a4c'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.kicker{margin:14px 0 0;font:700 clamp(11px,2vw,14px) var(--caps);letter-spacing:.28em;text-transform:uppercase;color:#d8c296}
.faceoff{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin:20px auto 6px;max-width:620px;height:clamp(170px,34vw,270px)}
.faceoff .me,.faceoff .foe{position:relative;display:flex;justify-content:center}
.faceoff .foe{align-self:start}
.faceoff .px{width:clamp(130px,26vw,230px);position:relative;z-index:1}
.ring{position:absolute;left:50%;bottom:-12px;width:110%;height:28%;transform:translateX(-50%);border-radius:50%;border:2px solid var(--g);box-shadow:0 0 22px var(--g),inset 0 0 22px var(--g);opacity:.7}
.vs{font:italic 700 clamp(30px,6vw,48px) var(--serif);color:#f6d690;text-shadow:0 0 22px #d0402a,0 2px 2px #000;align-self:center}
.lead{margin:22px 0 16px;font:700 clamp(20px,3.4vw,28px) var(--serif);color:#f6dc9c;text-shadow:0 2px 3px #000,0 0 18px rgba(200,110,40,.5)}
.btn{display:inline-block;cursor:pointer;border:1px solid #f7dc95;font:700 14px var(--caps);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#1a0f05;
  padding:14px 26px;border-radius:3px;background:linear-gradient(180deg,#fff0c4,var(--gold) 50%,#a8702a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 24px rgba(220,140,50,.35),0 10px 24px rgba(0,0,0,.7)}
.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.6;cursor:default}
.fine{margin:12px 0 0;font:700 11px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(2px 2px at 12% 78%,#ffc070,transparent),radial-gradient(2px 2px at 24% 62%,#ff9a50,transparent),radial-gradient(1.5px 1.5px at 37% 88%,#ffc070,transparent),
  radial-gradient(2px 2px at 63% 70%,#ffb060,transparent),radial-gradient(1.5px 1.5px at 76% 84%,#ffc070,transparent),radial-gradient(2px 2px at 88% 58%,#ff9a50,transparent),
  radial-gradient(1.5px 1.5px at 52% 92%,#ffc070,transparent),radial-gradient(2px 2px at 8% 50%,#ffb060,transparent);animation:rise 9s linear infinite;opacity:.8}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-40px);opacity:.4}}
@media(prefers-reduced-motion:reduce){.embers{animation:none}html{scroll-behavior:auto}}

/* sections */
.band{position:relative;width:min(1040px,100% - 28px);margin:clamp(26px,4vw,40px) auto;padding:clamp(24px,4vw,36px) clamp(14px,3.6vw,40px);text-align:center;
  border:1px solid rgba(214,168,88,.55);outline:1px solid rgba(214,168,88,.18);outline-offset:5px;
  background:radial-gradient(ellipse 90% 50% at 50% 0,rgba(90,20,18,.35),transparent 70%),linear-gradient(180deg,rgba(18,10,9,.92),rgba(8,5,5,.94));
  box-shadow:0 30px 60px rgba(0,0,0,.6)}
.band::before,.band::after{content:"";position:absolute;width:38px;height:38px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23e0b465' stroke-linecap='round'%3E%3Cpath d='M1.5 38V9a7.5 7.5 0 0 1 7.5-7.5h29' stroke-width='1.8'/%3E%3Cpath d='M6 33V12.5A6.5 6.5 0 0 1 12.5 6H33' stroke-width='.8' opacity='.65'/%3E%3Cpath d='M1.5 22c7 0 11-4.5 11-11 0 6.5 4.5 11 11 11' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M12.5 6.5l3.2 6-3.2 6-3.2-6z' fill='%23f3d48e'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%}
.band::before{left:-6px;top:-6px}.band::after{right:-6px;bottom:-6px;transform:scale(-1,-1)}
h2{margin:0 0 clamp(16px,2.6vw,24px);font:700 clamp(26px,4.4vw,42px) var(--serif);color:#f3e6cb;text-shadow:0 2px 3px #000,0 0 22px rgba(170,30,25,.55)}
h2::after{content:"";display:block;margin:12px auto 0;width:180px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 9'%3E%3Cpath d='M2 4.5h56M82 4.5h56' stroke='%23c99a4c' stroke-width='.8'/%3E%3Cpath d='M70 .5l4 4-4 4-4-4z' fill='%23f0cd85'/%3E%3C/svg%3E") center/100% 100% no-repeat}
h3{margin:0 0 6px;font:700 14px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:#f0c46c}
.note{margin:18px 0 0;font:700 13px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.plate{border:1px solid #8f6b35;border-radius:4px;background:linear-gradient(180deg,#1d1310,#0b0807);padding:16px 18px;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,225,170,.16),inset 0 0 0 1px rgba(0,0,0,.6),0 10px 22px rgba(0,0,0,.7)}
.plate p{margin:0;color:#e2d3b4}

.split{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
.split.rev{grid-template-columns:1fr 1fr}
@media(max-width:760px){.split,.split.rev{grid-template-columns:1fr}}
.cards{display:grid;gap:14px}
.phones{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.phone{margin:0;width:min(250px,44%);border:3px solid #2b1f15;border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 1px #a07a3e,0 0 26px rgba(160,30,25,.35),0 18px 34px #000}
.phones.one .phone{width:min(270px,70%)}
.phone img{display:block;width:100%}
.phones .phone:nth-child(2){margin-top:28px}

.starters{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.starters figure,.evo figure{margin:0;display:flex;flex-direction:column;align-items:center}
.starters .px{width:min(140px,90%)}
figcaption{font:700 12px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:#e8d6b0;margin-top:6px}

.asc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.asc figure{margin:0;position:relative;border:1px solid var(--g);border-radius:6px;overflow:hidden;box-shadow:0 0 18px color-mix(in srgb,var(--g) 40%,transparent)}
.asc img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.asc figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:18px 0 8px;color:var(--g);background:linear-gradient(transparent,rgba(0,0,0,.85))}
.evo{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,3vw,28px);margin-top:20px;flex-wrap:wrap}
.evo .px{width:clamp(72px,12vw,110px)}
.arrow{font:700 28px var(--serif);color:var(--gold);margin-bottom:30px}

.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
@media(max-width:620px){.grid{grid-template-columns:repeat(4,1fr)}}
.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--g) 30%,transparent),transparent 70%)}
.cell .px{width:86%;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--g) 55%,transparent))}
.legend{margin:10px 0 0;font:700 12px var(--caps);letter-spacing:.1em;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);margin:0 6px 0 14px}

.looks{display:grid;gap:18px}
.lkrow h4{margin:0 0 8px;text-align:left;font:700 14px var(--caps);letter-spacing:.18em;text-transform:uppercase;color:#e6bf73}
.lkt{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lk{border:1px solid var(--g);border-radius:6px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--g) 26%,transparent),#0c0a09 75%);box-shadow:0 0 12px color-mix(in srgb,var(--g) 30%,transparent)}
.lk .px{height:clamp(56px,10vw,110px);width:auto}
.lk b{font:700 15px var(--serif);margin-top:6px}.lk i{font:700 10px var(--caps);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}

.sigils{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sg{margin:0;position:relative;border:1px solid #3a2c1d;border-radius:6px;overflow:hidden}
.sg img{display:block;width:100%}
.sg figcaption{position:absolute;left:0;right:0;bottom:4px;margin:0;color:#f3e2bd;text-shadow:0 1px 4px #000}

.coffer{margin:0 auto 18px;width:min(240px,55%);border:1px solid #8a6a3a;border-radius:6px;overflow:hidden}
.coffer img{display:block;width:100%}
.rites{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:620px){.rites{grid-template-columns:repeat(2,1fr)}}
.rt{margin:0;border:1px solid var(--g);border-radius:6px;overflow:hidden;background:#000;box-shadow:0 0 14px color-mix(in srgb,var(--g) 45%,transparent)}
.rt img{display:block;width:100%}
.rt figcaption{color:var(--g);margin:6px 0 8px}

.arenas{display:grid;gap:8px}
.arena{display:flex;align-items:center;justify-content:space-between;height:96px;padding:0 22px;border-radius:4px;background-size:cover;background-position:center 60%;border:1px solid rgba(214,168,88,.25)}
.arena h4{margin:0;font:700 clamp(14px,2.4vw,20px) var(--caps);letter-spacing:.12em;color:#f1dfb8;text-shadow:0 2px 4px #000}
.res{display:flex;flex-direction:column;align-items:center;gap:3px}
.res .px{height:62px;width:auto}
.mcard{font:700 9px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:#fbf0d8;padding:3px 9px 2px;border:1px solid var(--g);border-radius:2px;white-space:nowrap;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 45%,#3a332c) 0%,color-mix(in srgb,var(--g) 18%,#141110) 55%,#0c0a09 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.6),0 0 8px color-mix(in srgb,var(--g) 55%,transparent);text-shadow:0 1px 1px #000}

/* the note */
.letter{max-width:620px;margin:0 auto;padding:24px 26px 18px;text-align:left;border:1px solid #9a7640;border-radius:4px;
  background:linear-gradient(180deg,rgba(26,16,13,.95),rgba(10,7,6,.95));
  box-shadow:inset 0 1px 0 rgba(255,225,170,.16),inset 0 0 0 4px rgba(0,0,0,.55),inset 0 0 0 5px rgba(154,118,64,.35),0 14px 30px rgba(0,0,0,.85)}
.letter p{margin:0 0 14px;font:600 clamp(17px,2.4vw,21px)/1.5 var(--serif);color:#eadcbf}
.letter p:first-child::first-letter{float:left;font:700 3.1em/.85 var(--serif);margin:4px 8px 0 0;color:transparent;
  background:linear-gradient(180deg,#fff2c8,#d9a54a 60%,#8a5a1e);-webkit-background-clip:text;background-clip:text}
.sig{text-align:right;font:italic 700 26px var(--serif);color:#f1cf86;text-shadow:0 0 12px rgba(220,130,40,.5)}
.gather{position:relative;max-width:560px;margin:22px auto 4px}
.gather .row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,18px)}
.gather .row.back{margin-bottom:-14px;filter:brightness(.9)}
.gather .px{height:clamp(64px,12vw,110px);width:auto}
.gather::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:80px;z-index:-1;background:radial-gradient(ellipse at 50% 100%,rgba(170,30,25,.5),transparent 70%)}

.form{max-width:520px;margin:26px auto 0;display:grid;gap:12px}
.form h3{text-align:center;margin-bottom:4px}
.form label{display:grid;gap:5px;font:700 12px var(--caps);letter-spacing:.12em;text-transform:uppercase;color:#e6bf73}
.form label .l{color:inherit}.form label em{font-style:normal;color:var(--dim);text-transform:none;letter-spacing:0;font-family:var(--serif)}
.form input,.form textarea{font:600 17px var(--serif);color:var(--ink);background:#0a0706;border:1px solid #5a4325;border-radius:3px;padding:10px 12px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,184,102,.18)}
.form .btn{justify-self:center;margin-top:6px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{margin:0;text-align:center;min-height:1.2em;color:#f0d39a}
.form .fine{text-align:center}

footer{text-align:center;padding:10px 20px 50px}
.divider{width:min(320px,70%);height:12px;margin:0 auto 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 9'%3E%3Cpath d='M2 4.5h56M82 4.5h56' stroke='%23c99a4c' stroke-width='.8'/%3E%3Cpath d='M70 .5l4 4-4 4-4-4z' fill='%23f0cd85'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.credit{margin:0;font:700 15px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}

/* fixes: grids never grow past their frame; the logo fits its column */
.grid{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:620px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lkt{grid-template-columns:repeat(4,minmax(0,1fr))}
.sigils{grid-template-columns:repeat(3,minmax(0,1fr))}
.rites{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:620px){.rites{grid-template-columns:repeat(2,minmax(0,1fr))}}
.asc{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{min-width:0}.cell .px{width:86%;max-width:100%;height:auto}
.lk{min-width:0}.lk .px{max-width:100%}
.logo{font-size:clamp(40px,10vw,92px);letter-spacing:.18em;padding-left:.18em}
.arena{background-position:center 22%;height:110px}
.res .px{height:74px}

.hint{margin:14px 0 0;font:italic 700 16px var(--serif);color:var(--gold-hi)}
.dx-open{cursor:pointer;transition:transform .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}
.dx-open:hover,.dx-open:focus-visible{transform:translateY(-3px);filter:brightness(1.15)}
.dx-open:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:6px}
.faceoff .dx-open:hover{transform:none}

/* species page */
html.dx-lock{overflow:hidden}
#dex{padding:0;border:1px solid #9a7640;border-radius:6px;width:min(980px,100% - 28px);max-height:min(88vh,860px);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  background:radial-gradient(ellipse 90% 40% at 50% 0,rgba(90,20,18,.45),transparent 70%),linear-gradient(180deg,#160d0b,#080505);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.55),inset 0 0 0 5px rgba(154,118,64,.3),0 30px 80px #000}
#dex::backdrop{background:rgba(4,2,2,.78);backdrop-filter:blur(3px)}
#dex[open]{animation:dxin .2s ease-out}
@keyframes dxin{from{opacity:0;transform:translateY(12px)}}
.dx-in{position:relative;padding:26px clamp(16px,3vw,32px) 30px;text-align:left}
.dx-x{position:sticky;top:0;float:right;z-index:2;margin:-12px -10px 0 0;width:40px;height:40px;border-radius:50%;border:1px solid #8f6b35;cursor:pointer;
  background:#120b09;color:var(--gold-hi);font:400 26px/1 var(--serif)}
.dx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,3vw,34px);align-items:start}
.dx-a{position:sticky;top:0}
.dx-x:focus{outline:none}.dx-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dx-panel p.dim{font-size:14px;margin-bottom:3px}
.dx-hero{display:grid;place-items:center;height:210px;background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--g) 32%,transparent),transparent 62%)}
.dx-hero .px{height:180px;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--g) 50%,transparent)) drop-shadow(0 8px 8px #000)}
#dex h2{margin:4px 0 10px;text-align:center;font-size:clamp(28px,4vw,38px)}
#dex h2::after{display:none}
#dex h3{margin:20px 0 8px;font-size:12px;color:#e3bf7a}
.dx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.dx-chip{display:inline-block;font:700 10px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--c);padding:4px 9px 3px;border-radius:99px;
  background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);white-space:nowrap}
.dx-flavor{margin:10px 0 0;text-align:center;font-style:italic;color:var(--dim);font-size:17px}
.dx-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;padding:12px 14px;border:1px solid #4a3620;border-radius:6px;background:rgba(0,0,0,.35)}
.dx-facts dt{font:700 10px/2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dx-facts dd{margin:0;text-align:right;font-size:17px}
.dx-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dx-line button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border-radius:6px;cursor:pointer;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--g) 35%,transparent);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--g) 22%,transparent),#0b0807 75%)}
.dx-line button[aria-current]{border-color:var(--g);box-shadow:0 0 12px color-mix(in srgb,var(--g) 45%,transparent)}
.dx-line img{height:52px;width:auto;max-width:100%}
.dx-line span{font:700 13px var(--serif);line-height:1.1;text-align:center}
.dx-stats{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;align-items:center}
.dx-stats span{font:700 10px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dx-stats i{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.dx-stats b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#000),var(--c))}
.dx-stats em{font:700 15px var(--serif);font-style:normal;text-align:right;min-width:2.2em}
.dx-panel{padding:12px 14px;border:1px solid #4a3620;border-radius:6px;background:rgba(0,0,0,.35)}
.dx-panel p,.dx-b>p{margin:0 0 6px;font-size:16px;line-height:1.45}
.dim{color:var(--dim)}.it{font-style:italic}
.cap{margin-top:12px!important;font:700 10px var(--caps)!important;letter-spacing:.16em;text-transform:uppercase;color:#c99a4c}
.dx-mu{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0}
.dx-mu span{font:700 10px/2 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dx-mu p{margin:0}
.dx-role{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;color:var(--dim)}
.dx-trait b{display:block;font-size:18px;color:var(--gold-hi)}
.dx-mv{margin:0 0 8px;padding:10px 12px;border:1px solid #3d2d1c;border-radius:6px;background:rgba(18,11,9,.9)}
.dx-mv.dx-sig{border-color:rgba(227,184,102,.6);box-shadow:0 0 14px rgba(227,184,102,.12)}
.dx-mv small{display:block;font:700 10px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:#c99a4c}
.dx-mvh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.dx-mvh b{font-size:17px;margin-right:auto}
.dx-mvh i{font:700 9px var(--caps);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dx-nums{display:flex;flex-wrap:wrap;gap:4px 14px;margin:4px 0 2px;font:700 9px var(--caps);letter-spacing:.12em;color:var(--dim)}
.dx-nums b{font:700 14px var(--serif);color:var(--ink);margin-left:2px}
.dx-mv p{margin:4px 0 0;font-size:15px;line-height:1.4;color:var(--dim)}
.dx-mv p.fl{font-style:italic;color:#e5d6b6}
.dx-grp{margin:0 0 8px}
.dx-grp summary{cursor:pointer;list-style:none;padding:9px 12px;border:1px solid #4a3620;border-radius:6px;font:700 12px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:#e3bf7a;background:rgba(0,0,0,.35)}
.dx-grp summary::-webkit-details-marker{display:none}
.dx-grp summary::after{content:"+";float:right;color:var(--gold)}
.dx-grp[open] summary{margin-bottom:8px}.dx-grp[open] summary::after{content:"−"}
@media(max-width:760px){
  #dex{width:100%;max-width:100%;max-height:100%;height:100%;margin:0;border:0;border-radius:0}
  .dx-in{padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
  .dx-cols{grid-template-columns:1fr}.dx-a{position:static}
  .dx-hero{height:180px}.dx-hero .px{height:160px}
}

/* phones: the page reads in one column without crowding */
@media(max-width:620px){
  body{font-size:17px}
  .bar{padding:9px 14px}.brand{font-size:17px}
  .bar .cta-s{padding:7px 10px;font-size:11px}
  .phones{gap:10px}.phone{width:min(220px,46%);border-radius:18px}
  .phones .phone:nth-child(2){margin-top:18px}
  .starters{gap:10px}
  .asc{gap:8px}.asc figcaption{font-size:10px;padding:12px 0 6px}
  .lkt{gap:6px}.lk{padding:8px 2px 6px}.lk b{font-size:13px}.lk i{font-size:8px;letter-spacing:.08em}
  .sigils{gap:6px}.sg figcaption{font-size:9px;letter-spacing:.06em}
  .rites{gap:8px}
  .arena{height:92px;padding:0 14px}.res .px{height:58px}
  .mcard{font-size:8px;padding:2px 6px}
  .letter{padding:18px 16px 12px}
  .note,.legend{font-size:11px}
}
@media(max-width:620px){.hero{min-height:0}.hero-in{padding:40px 16px 40px}}
[id]{scroll-margin-top:66px}
@media(max-width:620px){.cards{gap:8px}.cards .plate{padding:12px 14px}.cards .plate p{font-size:16px}}

/* the 14 types */
.types{margin-top:clamp(22px,3.4vw,32px);padding-top:clamp(18px,3vw,26px);border-top:1px solid rgba(214,168,88,.25)}
.types h3{text-align:center;margin-bottom:14px}
.tgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 8px}
.tcard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 8px;border-radius:6px;min-width:0;
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 14%,transparent),rgba(0,0,0,.35) 70%)}
.tcoin{width:clamp(40px,5.2vw,54px);height:auto;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 45%,transparent))}
.tcard b{font:700 12px var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-top:3px}
.tbeats{display:flex;align-items:center;gap:3px}
.tbeats i{font:italic 700 12px var(--serif);color:var(--dim);margin-right:2px}
.tmini{width:17px;height:auto}
.types .note{text-transform:none;letter-spacing:.02em;font:italic 700 16px var(--serif);color:var(--dim)}
@media(max-width:760px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:420px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}.tcard b{font-size:10.5px;letter-spacing:.08em}.tmini{width:15px}}

/* phone header: brand and the beta button, then every section a tap away */
@media(max-width:760px){
  .bar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand cta" "links links";gap:6px 10px;padding:8px 14px 0}
  .brand{grid-area:brand;align-self:center}
  .bar .cta-s{grid-area:cta}
  .bar .links{grid-area:links;margin:0 -14px;padding:2px 14px 8px;gap:0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .bar .links::-webkit-scrollbar{display:none}
  .bar .links a{font-size:11px;letter-spacing:.14em;padding:6px 4px;white-space:nowrap}
  [id]{scroll-margin-top:92px}
}

/* phones: wider frames, more air, layouts made for one column */
@media(max-width:620px){
  .band{width:calc(100% - 14px);margin:22px auto;padding:30px 16px 26px;outline-offset:3px}
  .band::before{left:-4px;top:-4px}.band::after{right:-4px;bottom:-4px}
  .band::before,.band::after{width:30px;height:30px}
  h2{font-size:30px}
  .split{gap:22px}
  .note,.legend{font-size:12px;line-height:1.6}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tcard{flex-direction:row;justify-content:flex-start;gap:10px;padding:9px 10px;text-align:left}
  .tcard .tcoin{width:42px;flex:none}
  .tcard b{margin:0 0 4px;font-size:11.5px;letter-spacing:.1em;display:block}
  .tcard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
  .tcard .tcoin{grid-row:1/3}
  .tcard b{align-self:end}.tcard .tbeats{align-self:start}
  .tmini{width:16px}
  .evo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 6px;justify-items:center}
  .evo figure:first-child{grid-column:1/4}
  .evo .arrow{grid-column:1/4;margin:-4px 0 2px;transform:rotate(90deg);line-height:1}
  .evo .px{width:min(100px,90%)}
  .evo figcaption{font-size:10.5px;letter-spacing:.08em}
  .starters .px{width:min(120px,84%)}
  .credit{font-size:13px;letter-spacing:.12em;line-height:1.6}
  .form{gap:14px}
  .letter p{font-size:18px}
}