/* Landing — PoE2 grimoire: ornate dark UI, both ascendancies as living scenery. */
:root{color-scheme:dark;
  --bg:#07070a;--stone:#101012;--stone2:#16161a;--edge:#2c2a28;--edge2:#4b4535;
  --gild:#c3a066;--gild-hi:#ecd6a3;--gild-lo:#6f5733;
  --text:#e2dccd;--mute:#a79e8c;--faint:#8b816e;
  --sf:#5fe3c1;--sf2:#d0443a;--or:#a58dff;--or2:#73d9ff;
  --display:"Cinzel","Trajan Pro",Georgia,serif;--ui:"Alegreya SC",Georgia,serif;--body:"Alegreya",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:clamp(15px,.3vw + 14px,18px)/1.65 var(--body);overflow-x:hidden}
::selection{background:var(--gild);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gild-hi);outline-offset:4px}
p,h1,h2,h3{margin:0}
img{max-width:100%}

/* ---------- living scenery */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .half{position:absolute;top:50%;width:min(92vh,70vw);aspect-ratio:1;border-radius:50%;opacity:.42;transform:translateY(-50%) scale(1);
  -webkit-mask:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.5) 70%,transparent);mask:radial-gradient(closest-side,#000 40%,rgba(0,0,0,.5) 70%,transparent);
  transition:opacity 1.2s var(--ease),transform 1.6s var(--ease),filter 1.2s;animation:drift 36s ease-in-out infinite alternate}
.scene .sf{left:-14vw;background:url("art/sf-asc-bg.webp") center/cover}
.scene .or{right:-14vw;background:url("art/or-asc-bg.webp") center/cover;animation-delay:-18s}
body[data-focus="sf"] .scene .sf,body[data-focus="or"] .scene .or{opacity:.72;transform:translateY(-50%) scale(1.06)}
body[data-focus="sf"] .scene .or,body[data-focus="or"] .scene .sf{opacity:.16;filter:grayscale(.6)}
@keyframes drift{from{translate:0 0;rotate:0deg}to{translate:1.5% -2%;rotate:3deg}}
.scene canvas{position:absolute;inset:0;width:100%;height:100%}
.scene .veil{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(7,7,10,.45),rgba(7,7,10,.92) 100%),linear-gradient(180deg,rgba(7,7,10,.2),rgba(7,7,10,.85) 70%)}
.wrap{position:relative;z-index:1;width:min(1240px,100% - clamp(28px,6vw,80px));margin:auto}
.skip{position:fixed;top:-100px;left:12px;background:var(--gild);color:var(--bg);padding:10px 18px;z-index:10;font-family:var(--ui)}
.skip:focus{top:10px}

/* ---------- masthead */
.masthead{height:clamp(72px,9vw,104px);display:flex;align-items:center;justify-content:space-between;position:relative}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gild-lo) 15%,var(--gild) 50%,var(--gild-lo) 85%,transparent)}
.brand{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;font-family:var(--display);font-weight:700;font-size:clamp(13px,1vw + 8px,16px);letter-spacing:.2em;color:var(--gild-hi)}
.brand>span{grid-row:span 2;width:30px;height:30px;display:grid;place-items:center;font-size:0;position:relative}
.brand>span::before{content:"";width:18px;height:18px;border:1px solid var(--gild);transform:rotate(45deg);box-shadow:0 0 14px -2px var(--gild)}
.brand>span::after{content:"";position:absolute;width:6px;height:6px;background:var(--sf);transform:rotate(45deg);box-shadow:0 0 10px var(--sf);animation:hue 8s ease-in-out infinite alternate}
@keyframes hue{to{background:var(--or);box-shadow:0 0 10px var(--or)}}
.brand small{font-family:var(--ui);font-size:max(.62em,10px);font-weight:500;letter-spacing:.24em;color:var(--mute)}
.language{display:flex;align-items:center;border:1px solid var(--gild-lo);border-radius:3px;overflow:hidden;font-family:var(--ui);font-weight:700;font-size:.85rem}
.language a{color:var(--mute);padding:6px 14px;min-height:36px;display:grid;place-items:center;transition:color .25s,background .25s}
.language a:hover{color:var(--gild-hi)}
.language a[aria-current]{color:var(--bg);background:linear-gradient(180deg,var(--gild-hi),var(--gild))}
.language span{display:none}

/* ---------- hero */
.hero{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);padding:clamp(40px,7vw,96px) 0 clamp(34px,5vw,64px);text-align:left}
.eyebrow{font-family:var(--ui);font-size:.8rem;letter-spacing:.2em;color:var(--sf2);font-weight:700;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow>span:first-child{height:7px;width:7px;background:var(--sf2);transform:rotate(45deg);box-shadow:0 0 10px var(--sf2)}
.patch{color:var(--gild-hi);border:1px solid var(--gild-lo);padding:0 8px;border-radius:2px;letter-spacing:.1em}
h1{font:900 clamp(2.3rem,5vw + .4rem,5rem)/1.04 var(--display);letter-spacing:.01em;margin:18px 0 20px;
  background:linear-gradient(180deg,#f7ebc9,var(--gild) 55%,var(--gild-lo));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px rgba(195,160,102,.25))}
h1 em{font-style:normal;display:inline-block;font-size:.62em;font-weight:700;background:linear-gradient(90deg,var(--sf),var(--gild-hi) 50%,var(--or));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 9s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}
.lead{max-width:62ch;font-size:clamp(1rem,.35vw + .92rem,1.2rem);color:var(--mute);line-height:1.75}
.hero-note{flex:none;position:relative;padding:22px 26px;border:1px solid var(--edge2);border-radius:3px;background:linear-gradient(180deg,rgba(22,22,26,.85),rgba(10,10,12,.9));text-align:center;backdrop-filter:blur(8px)}
.hero-note::before{content:"";position:absolute;inset:-4px;background:
  linear-gradient(var(--gild),var(--gild)) left 3px top 3px/14px 1px no-repeat,linear-gradient(var(--gild),var(--gild)) left 3px top 3px/1px 14px no-repeat,
  linear-gradient(var(--gild),var(--gild)) right 3px bottom 3px/14px 1px no-repeat,linear-gradient(var(--gild),var(--gild)) right 3px bottom 3px/1px 14px no-repeat;pointer-events:none}
.hero-note>span{font:900 clamp(2rem,2.4vw + 1rem,2.8rem) var(--display);background:linear-gradient(90deg,var(--sf),var(--or));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note p{font-size:.9rem;color:var(--mute);line-height:1.6;margin-top:6px}

/* ---------- headings */
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px;position:relative;padding-bottom:14px}
.section-heading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--gild),rgba(195,160,102,.25) 45%,transparent)}
.section-heading h2{font:700 clamp(1.3rem,1.2vw + .9rem,2rem)/1.15 var(--display);color:var(--gild-hi);letter-spacing:.03em}
.section-heading>span{font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;color:var(--mute);white-space:nowrap}

/* ---------- build cards */
.build-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(18px,2.4vw,34px);perspective:1400px}
.build{--acc:var(--sf);--acc2:var(--sf2);--metal:var(--gild);--metal-hi:var(--gild-hi);--surface:rgba(14,18,16,.86);position:relative;border:1px solid var(--edge2);border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),rgba(8,9,9,.92));backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(236,214,163,.12),0 30px 60px -30px #000;transition:transform .7s var(--ease),border-color .4s,box-shadow .6s}
.build.or{--acc:var(--or);--acc2:#e2465f;--metal:#b7bfd9;--metal-hi:#eef1fb;--surface:rgba(16,15,28,.86);border-color:#45475f}
.build.or h2{font-family:"Cinzel Decorative","Cinzel",serif}
.build.ta{--acc:#ff8a3d;--acc2:#9fd24b;--metal:#b89a70;--metal-hi:#f0dcb0;--surface:rgba(20,15,11,.86);border-color:#4f4638}
.build.in{--acc:#ff5a2e;--acc2:#ffb347;--metal:#c98a6a;--metal-hi:#f6d8c6;--surface:rgba(24,10,8,.86);border-color:#5a3328}
.build.ac{--acc:#b57bff;--acc2:#5fe3a1;--metal:#a996c9;--metal-hi:#ece2fb;--surface:rgba(16,11,26,.86);border-color:#43365c}
.build.pf{--acc:#8fd14f;--acc2:#d3e36a;--metal:#9fb58a;--metal-hi:#e4f1d6;--surface:rgba(11,18,11,.86);border-color:#35492f}
.build.sk{--acc:#ff9f43;--acc2:#e2465f;--metal:#c4a27a;--metal-hi:#f3e0c8;--surface:rgba(22,14,10,.86);border-color:#54402d}
.build.lg{--acc:#ffd23f;--acc2:#4db8ff;--metal:#b9a27a;--metal-hi:#f1e2bd;--surface:rgba(14,14,12,.86);border-color:#4f4a3a}
.build.gw{--acc:#6fd6ff;--acc2:#c6a3ff;--metal:#9fb6c9;--metal-hi:#e3f4ff;--surface:rgba(8,13,20,.86);border-color:#2f4658}
.build.ma{--acc:#4cc3ff;--acc2:#ffa62b;--metal:#8fb3cf;--metal-hi:#e2f1fb;--surface:rgba(8,14,22,.86);border-color:#2f4a66}
.build::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:
  linear-gradient(var(--metal),var(--metal)) left 8px top 8px/22px 1px no-repeat,linear-gradient(var(--metal),var(--metal)) left 8px top 8px/1px 22px no-repeat,
  linear-gradient(var(--metal),var(--metal)) right 8px top 8px/22px 1px no-repeat,linear-gradient(var(--metal),var(--metal)) right 8px top 8px/1px 22px no-repeat,
  linear-gradient(var(--metal),var(--metal)) left 8px bottom 8px/22px 1px no-repeat,linear-gradient(var(--metal),var(--metal)) left 8px bottom 8px/1px 22px no-repeat,
  linear-gradient(var(--metal),var(--metal)) right 8px bottom 8px/22px 1px no-repeat,linear-gradient(var(--metal),var(--metal)) right 8px bottom 8px/1px 22px no-repeat;opacity:.7;transition:opacity .4s}
.build::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 22%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%);opacity:.6;transition:opacity .6s}
.build:hover{transform:translateY(-8px);border-color:var(--metal);box-shadow:inset 0 1px 0 rgba(236,214,163,.2),0 40px 80px -30px #000,0 0 40px -12px var(--acc)}
.build:hover::before{opacity:1}.build:hover::after{opacity:1}
.build-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 26px;font-family:var(--ui);font-size:.8rem;letter-spacing:.12em;border-bottom:1px solid rgba(255,255,255,.06)}
.edition{color:var(--acc)}.build-type{color:var(--mute)}
.build-art{position:relative;z-index:1;height:clamp(250px,26vw,320px);display:grid;place-items:center;transition:transform .8s var(--ease);transform-style:preserve-3d}
.medal{position:relative;width:clamp(190px,19vw,250px);aspect-ratio:1;border-radius:50%;display:block}
.medal::before{content:"";position:absolute;inset:-7px;border-radius:50%;z-index:2;background:conic-gradient(from 200deg,#000,var(--metal),var(--metal-hi),var(--metal),#000,var(--metal),var(--metal-hi),#000);
  -webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93%);mask:radial-gradient(closest-side,transparent 92%,#000 93%);box-shadow:0 0 34px -6px var(--acc)}
.medal::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 50%,transparent);animation:spin 50s linear infinite}
.medal .asc{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;transition:transform 1.2s var(--ease),filter .8s;filter:saturate(.9) brightness(.92)}
.build:hover .medal .asc{transform:scale(1.08) rotate(-3deg);filter:saturate(1.1) brightness(1.05)}
@keyframes spin{to{rotate:360deg}}
.orbit{position:absolute;width:clamp(290px,30vw,390px);aspect-ratio:1;border:1px solid var(--acc);border-radius:50%;opacity:.12;transform:rotate(-24deg) scaleY(.42);animation:orbit 22s linear infinite}
.orbit.inner{width:clamp(250px,26vw,330px);opacity:.18;transform:rotate(18deg) scaleY(.5);animation-duration:30s;animation-direction:reverse}
@keyframes orbit{to{rotate:360deg}}
.main-icon{position:absolute;z-index:4;width:62px;height:62px;right:calc(50% - clamp(150px,15vw,190px));bottom:28px;object-fit:contain;filter:drop-shadow(0 8px 14px #000) drop-shadow(0 0 10px color-mix(in srgb,var(--acc) 50%,transparent));animation:float 6s ease-in-out infinite}
.satellite{position:absolute;z-index:4;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 10px #000);animation:float 7s ease-in-out infinite}
.satellite.a{left:calc(50% - clamp(170px,17vw,215px));top:40%;animation-delay:-2s}
.satellite.b{right:calc(50% - clamp(170px,17vw,215px));top:22%;animation-delay:-4s}
.satellite.c{left:calc(50% - clamp(120px,12vw,150px));bottom:18px;width:36px;height:36px;animation-delay:-5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.build-copy{position:relative;z-index:2;padding:6px clamp(20px,2.4vw,32px) 28px;text-align:center}
.build-kicker{font-family:var(--ui);font-size:.82rem;letter-spacing:.2em;color:var(--acc);margin-bottom:6px}
.build h2{font:700 clamp(1.7rem,1.6vw + 1rem,2.5rem)/1.1 var(--display);color:var(--metal-hi);letter-spacing:.02em;text-shadow:0 2px 20px color-mix(in srgb,var(--acc) 35%,transparent)}
.build-desc{font-size:1.02rem;color:var(--mute);line-height:1.7;margin:14px auto 22px;max-width:52ch}
.build-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:22px;text-align:left}
.build-facts>div{padding-left:12px;border-left:2px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.build-facts span{font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;color:var(--faint)}
.build-facts p{font-size:.98rem;margin-top:2px;color:var(--text)}
.primary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;border-radius:3px;padding:14px 20px;min-height:52px;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.06em;color:#0a0a0c;border:1px solid var(--metal-hi);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 60%,#fff),var(--acc) 55%,color-mix(in srgb,var(--acc) 70%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 30px -10px var(--acc);transition:transform .35s var(--ease),box-shadow .35s,filter .35s}
.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 40px -10px var(--acc)}
.primary:hover::after{transform:translateX(120%)}
.primary>span:last-child{font-size:1.3rem;transition:transform .4s var(--ease)}
.primary:hover>span:last-child{transform:translate(3px,-3px)}
.quick-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-family:var(--ui);font-size:.88rem;color:var(--mute);margin-top:16px}
.quick-links a{padding:4px 2px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.quick-links a:hover{color:var(--acc);border-color:var(--acc)}
.quick-links>span{color:var(--edge2)}

/* ---------- Forbidden Rites banner */
.rites-banner{position:relative;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(34px,5vw,60px);padding:clamp(18px,2.6vw,34px);overflow:hidden;
  border:1px solid #4a3a60;border-radius:4px;background:radial-gradient(70% 120% at 20% 50%,rgba(155,107,255,.28),transparent 65%),linear-gradient(180deg,rgba(26,19,41,.94),rgba(10,7,18,.96));box-shadow:0 30px 60px -30px #000;transition:transform .7s var(--ease),box-shadow .6s,border-color .4s}
.rites-banner:hover{transform:translateY(-6px);border-color:#cdb4ff;box-shadow:0 40px 80px -30px #000,0 0 50px -14px #9b6bff}
.rites-banner img{width:100%;aspect-ratio:1280/1063;object-fit:cover;border-radius:50%;-webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent);transition:transform 1.2s var(--ease)}
.rites-banner:hover img{transform:scale(1.06) rotate(-2deg)}
.rites-banner .eyebrow{color:#f1b35c}
.rites-banner h2{font:900 clamp(1.7rem,2.2vw + 1rem,3rem)/1.05 "Cinzel Decorative","Cinzel",serif;margin:10px 0;background:linear-gradient(180deg,#fff6df,#eadfc4 40%,#8f7f60);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(155,107,255,.55))}
.rites-banner p{color:#b7aa8e;max-width:56ch}
.rites-banner .go{display:inline-block;margin-top:16px;font-family:var(--display);font-weight:700;color:#ffd894;letter-spacing:.05em;transition:transform .4s var(--ease)}
.rites-banner:hover .go{transform:translateX(6px)}
@media (max-width:640px){.rites-banner{grid-template-columns:1fr}.rites-banner img{max-width:220px;margin:auto}}
/* ---------- steps, knowledge, about, footer */
.getting-started{margin-top:clamp(48px,6vw,84px)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.steps article{display:flex;gap:16px;padding:22px;border:1px solid var(--edge);border-radius:3px;background:linear-gradient(180deg,rgba(22,22,26,.8),rgba(10,10,12,.85));backdrop-filter:blur(6px);transition:transform .5s var(--ease),border-color .35s}
.steps article:hover{transform:translateY(-4px);border-color:var(--gild-lo)}
.steps article>span{flex:none;width:44px;height:44px;display:grid;place-items:center;font:700 .95rem var(--display);color:var(--gild-hi);position:relative}
.steps article>span::before{content:"";position:absolute;inset:6px;border:1px solid var(--gild);transform:rotate(45deg);background:rgba(195,160,102,.08)}
.steps h3{font:700 1.08rem/1.3 var(--display);color:var(--gild-hi);margin-bottom:6px}
.steps p{color:var(--mute);font-size:.98rem;line-height:1.65}
.knowledge{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,48px);position:relative;overflow:hidden;border:1px solid var(--edge2);border-radius:3px;padding:clamp(22px,3vw,40px);margin-top:clamp(36px,5vw,60px);
  background:radial-gradient(60% 120% at 0 50%,rgba(95,227,193,.1),transparent 60%),radial-gradient(60% 120% at 100% 50%,rgba(165,141,255,.12),transparent 60%),linear-gradient(180deg,rgba(22,22,26,.88),rgba(10,10,12,.92));backdrop-filter:blur(8px)}
.knowledge .eyebrow{color:var(--gild)}
.knowledge h2{font:700 clamp(1.4rem,1.4vw + .9rem,2.2rem)/1.15 var(--display);margin:10px 0;color:var(--gild-hi)}
.knowledge p{max-width:64ch;font-size:1rem;color:var(--mute);line-height:1.7}
.knowledge-links{width:220px;flex:none;display:grid;gap:10px}
.knowledge-links a{display:flex;justify-content:space-between;align-items:center;min-height:46px;border:1px solid var(--gild-lo);border-radius:3px;padding:10px 16px;font-family:var(--ui);font-weight:700;color:var(--gild-hi);background:linear-gradient(180deg,#1b1a18,#0c0c0d);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.knowledge-links a:first-child:hover{border-color:var(--sf);box-shadow:0 0 22px -8px var(--sf);transform:translateX(4px)}
.knowledge-links a:last-child:hover{border-color:var(--or);box-shadow:0 0 22px -8px var(--or);transform:translateX(4px)}
.about{margin-top:28px;color:var(--mute);font-size:.95rem;border:1px solid var(--edge);border-radius:3px;padding:4px 20px;background:rgba(10,10,12,.7)}
.about summary{cursor:pointer;padding:12px 0;color:var(--gild-hi);font-family:var(--ui);font-weight:700;list-style:none;display:flex;justify-content:space-between}
.about summary::after{content:"+";transition:transform .4s var(--ease)}
.about[open] summary::after{transform:rotate(45deg)}
.about p{max-width:90ch;line-height:1.75;margin-bottom:10px}
.about a{text-decoration:underline;text-underline-offset:3px;color:var(--gild-hi)}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding:26px 0 40px;position:relative;color:var(--faint);font-size:.9rem;font-family:var(--ui)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gild-lo),transparent)}
footer a:hover{color:var(--gild-hi)}

/* ---------- reveal */
.rv-on .build,.rv-on .steps article,.rv-on .knowledge,.rv-on .section-heading,.rv-on .about{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate 1s var(--ease),transform .7s var(--ease),border-color .4s,box-shadow .6s}
.rv-on .shown,.rv-on .steps article.shown{opacity:1;translate:0 0}
.hero > div:first-child > *{animation:heroIn 1s var(--ease) both}
.hero > div:first-child > *:nth-child(2){animation-delay:.1s}.hero > div:first-child > *:nth-child(3){animation-delay:.2s}.hero-note{animation:heroIn 1s .3s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------- responsive */
@media (min-width:1920px){.wrap{width:min(1500px,100% - 120px)}}
@media (max-width:900px){.hero-note{display:none}.knowledge{flex-direction:column;align-items:stretch}.knowledge-links{width:auto;grid-template-columns:1fr 1fr}.scene .half{width:90vw;opacity:.34}.scene .sf{left:-40vw;top:30%}.scene .or{right:-40vw;top:70%}}
@media (max-width:640px){
  .masthead{height:72px}
  .hero{padding:34px 0 30px}
  .section-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .build-top{padding:14px 18px;font-size:.72rem}
  .build-art{height:230px}
  .medal{width:170px}
  .satellite.a{left:12px}.satellite.b{right:12px}.satellite.c{left:24%}.main-icon{right:20px;width:52px;height:52px}
  .build-facts{grid-template-columns:1fr}
  .knowledge-links{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
  .build:hover{transform:none}
}
@media (max-width:360px){h1{font-size:2rem}.build-top .build-type{display:none}.medal{width:150px}}
@media (pointer:coarse){.language a,.quick-links a{min-height:44px;display:inline-grid;place-items:center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv-on .build,.rv-on .steps article,.rv-on .knowledge,.rv-on .section-heading,.rv-on .about{opacity:1;translate:none}}
@media print{.scene{display:none}body{background:#fff;color:#111}.build-grid{display:block}.build{break-inside:avoid;background:#fff}.language,.build-art,.primary,.quick-links{display:none}p,h1,h2,span{color:#111!important;-webkit-text-fill-color:#111}.wrap{width:100%}}

/* ---------- skin v3: cartões mais simples ---------- */
.build-facts>div:nth-child(n+3){display:none}
.build .quick-links{display:none}
.build-grid{gap:clamp(20px,2.6vw,36px)}
.build{border-radius:18px}

/* ---------- classificador: filtros, ordenação e notas por build (landing_registry.py + landing-filter.js) ---------- */
.build-filter{display:grid;gap:14px;margin:0 0 14px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(10,10,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cls-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.cls-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px 9px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(13,13,20,.8);color:#f2ecdf;font:inherit;text-align:center;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s}
.cls-tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.cls-tile:focus-visible{outline:2px solid var(--gild-hi,#e8c66a);outline-offset:2px}
.cls-tile[aria-pressed="true"]{border-color:#e8c66a;background:rgba(232,198,106,.12);box-shadow:0 0 0 1px #e8c66a,0 8px 22px -10px #e8c66a}
.cls-art{display:grid;place-items:center;width:64px;height:64px;border-radius:10px;overflow:hidden;background:#07070a;border:1px solid rgba(255,255,255,.12)}
.cls-art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.85);transition:filter .25s}
.cls-tile:hover .cls-art img,.cls-tile[aria-pressed="true"] .cls-art img{filter:none}
.cls-glyph{font-size:1.8rem;color:#e8c66a}
.cls-tile b{font-size:.8rem;line-height:1.15;font-weight:700}
.cls-tile small{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cls-tile i{position:absolute;top:6px;right:8px;font-style:normal;font-size:.68rem;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.75)}
.build-filter-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.build-filter label{display:grid;gap:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.build-filter select{min-width:180px;max-width:100%;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#0d0d14;color:#f2ecdf;font:inherit;font-size:.92rem;letter-spacing:0;text-transform:none}
.build-filter output{margin-left:auto;font-size:.85rem;color:rgba(255,255,255,.7);align-self:center}
.rank-note{margin:0 0 18px;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.55)}
.build-rate{display:flex;flex-wrap:wrap;gap:6px 12px;margin:2px 0 12px;font-size:.78rem;color:rgba(255,255,255,.7)}
.build-rate b{color:#e8c66a;letter-spacing:1px;font-weight:400}
.build-rate em{font-style:normal;padding:1px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.build-rate em.meta-meta{color:#f0a36a;border-color:rgba(240,163,106,.5)} .build-rate em.meta-alternativa{color:#8fd0a8;border-color:rgba(143,208,168,.5)} .build-rate em.meta-fora-do-meta{color:#b9a3ff;border-color:rgba(185,163,255,.55)}
.build[hidden]{display:none!important}
@media (max-width:640px){.cls-picker{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.cls-art{width:52px;height:52px}.build-filter select{min-width:0;width:100%}.build-filter label{flex:1 1 100%}}
.build.tw{--acc:#9be564;--acc2:#ffb347;--metal:#b9c9a0;--metal-hi:#eef7d6;--surface:rgba(9,14,10,.86);border-color:#3a4f3a}
.build.hs{--acc:#8ea2ff;--acc2:#ffe066;--metal:#d9c48a;--metal-hi:#f6ecc4;--surface:rgba(9,10,18,.86);border-color:#3a4166}
.build.sh{--acc:#2fd9c0;--acc2:#d1a75f;--metal:#d1a75f;--metal-hi:#f6dcab;--surface:rgba(12,9,9,.86);border-color:#4a3a2a}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Runes of Aldur entry */
.aldur-banner{display:flex;align-items:center;gap:clamp(18px,4vw,58px);margin:24px 0 56px;padding:clamp(20px,3vw,40px);border:1px solid #577974;background:radial-gradient(circle at 12% 50%,rgba(94,205,189,.25),transparent 30%),linear-gradient(120deg,#102d30,#071719);color:#e9e3d2;text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,.3)}.aldur-banner:hover{border-color:#8be0cc;color:#fff}.aldur-emblem{flex:none;width:clamp(95px,16vw,200px);height:clamp(95px,16vw,200px);display:grid;place-items:center;border:2px solid #c6ac74;border-radius:50%;box-shadow:0 0 0 12px rgba(185,162,103,.08),inset 0 0 28px #122f31,0 0 26px rgba(75,190,177,.2);font:clamp(58px,10vw,120px) Georgia;color:#90dfcf;text-shadow:0 0 25px #41c5b4}.aldur-banner .eyebrow{font-size:12px;letter-spacing:.16em;color:#89d6c8}.aldur-banner h2{font-family:var(--head,"Cinzel",Georgia,serif);font-size:clamp(24px,3vw,38px);margin:8px 0;color:#e9d29e}.aldur-banner p{max-width:62ch;color:#bbcbc4}.aldur-banner .go{display:inline-block;margin-top:14px;color:#8be0cc;font-weight:700}@media(max-width:600px){.aldur-banner{align-items:flex-start}.aldur-emblem{width:70px;height:70px;font-size:48px}}
.league-quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.league-quick a{display:flex;align-items:center;gap:11px;min-width:210px;padding:11px 13px;border:1px solid #667664;background:linear-gradient(115deg,rgba(18,45,44,.95),rgba(8,20,22,.95));color:#f4e8c9;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.3);transition:transform .3s,border-color .3s,box-shadow .3s}.league-quick a:hover{transform:translateY(-3px);border-color:#8fd8c2;box-shadow:0 14px 30px rgba(40,171,156,.2)}.league-quick img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(91,214,195,.45))}.league-quick span{display:grid;line-height:1.15}.league-quick small{font:700 .61rem var(--head,"Cinzel",serif);letter-spacing:.1em;color:#8fd8c2}.league-quick b{font:700 .85rem var(--head,"Cinzel",serif);margin-top:5px}.league-quick i{margin-left:auto;font-style:normal;color:#e7c27c}.league-quick .rites-quick{border-color:#695479;background:linear-gradient(115deg,rgba(43,28,59,.95),rgba(12,9,18,.95))}.league-quick .rites-quick small{color:#d4abff}.league-quick .rites-quick img{filter:drop-shadow(0 0 8px rgba(155,107,255,.55))}@media(max-width:600px){.league-quick a{flex:1 1 100%}}
.rites-banner.aldur-banner{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(16px,3vw,40px);margin:24px 0 56px;padding:clamp(18px,2.6vw,34px);border:1px solid #557878;border-radius:4px;background:radial-gradient(70% 120% at 20% 50%,rgba(84,191,176,.24),transparent 65%),linear-gradient(180deg,rgba(20,43,45,.94),rgba(5,15,17,.96));box-shadow:0 30px 60px -30px #000;transition:transform .7s var(--ease),box-shadow .6s,border-color .4s}
.rites-banner.aldur-banner:hover{transform:translateY(-6px);border-color:#a0ebd9;box-shadow:0 40px 80px -30px #000,0 0 50px -14px #54bfb0}
.rites-banner.aldur-banner img{width:100%;aspect-ratio:1280/1063;object-fit:cover;object-position:47% 50%;border-radius:50%;-webkit-mask:radial-gradient(closest-side,#000 45%,transparent 77%);mask:radial-gradient(closest-side,#000 45%,transparent 77%);filter:saturate(.78) contrast(1.12)}
.rites-banner.aldur-banner .eyebrow{color:#a0ebd9}.rites-banner.aldur-banner h2{font:900 clamp(1.7rem,2.2vw + 1rem,3rem)/1.05 "Cinzel Decorative","Cinzel",serif;margin:10px 0;background:linear-gradient(180deg,#fff6df,#eadfc4 40%,#8f7f60);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(84,191,176,.55))}.rites-banner.aldur-banner p{color:#b7c8bd}.rites-banner.aldur-banner .go{color:#a0ebd9}
@media(max-width:640px){.rites-banner.aldur-banner{grid-template-columns:1fr}.rites-banner.aldur-banner img{max-width:220px;margin:auto}}
.league-quick .aldur-quick{border-color:#4a76b3;background:linear-gradient(115deg,rgba(15,37,77,.96),rgba(5,13,34,.96))}.league-quick .aldur-quick:hover{border-color:#9bd5ff;box-shadow:0 14px 30px rgba(47,123,237,.24)}.league-quick .aldur-quick small,.league-quick .aldur-quick i{color:#a7dcff}.league-quick .aldur-quick img{filter:drop-shadow(0 0 9px #438ff2)}
.rites-banner.aldur-banner{border-color:#486d9f;background:radial-gradient(70% 120% at 20% 50%,rgba(61,123,227,.27),transparent 65%),linear-gradient(180deg,rgba(18,37,76,.96),rgba(5,13,34,.97))}.rites-banner.aldur-banner:hover{border-color:#a9ddff;box-shadow:0 40px 80px -30px #000,0 0 52px -14px #518feb}.rites-banner.aldur-banner img{filter:saturate(.8) contrast(1.14) hue-rotate(175deg)}.rites-banner.aldur-banner .eyebrow,.rites-banner.aldur-banner .go{color:#a9ddff}.rites-banner.aldur-banner h2{background:linear-gradient(180deg,#fff,#d8efff 28%,#9fcdf7 62%,#5a91dd);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(68,150,255,.63))}.rites-banner.aldur-banner p{color:#bfcee4}
.rites-banner.aldur-banner::after{content:"ᚱ  ᚢ  ᚾ  ᛖ  ᛋ";position:absolute;right:22px;bottom:13px;font:700 13px Georgia,serif;letter-spacing:.28em;color:#a9ddff;opacity:.55;text-shadow:0 0 10px #549aff;pointer-events:none}