/* Mages of Ruin: night over an old city, stone and smoke, gilt and ember; the grimoire on parchment. */
:root{--night:#120d0a;--night2:#1d1510;--stone:#2a211a;--stone2:#3a2e24;--ember:#e0782c;--ember2:#ffb067;
--gilt:#c99a3e;--gilt2:#f0d08a;--parch:#efe3c6;--parch2:#dfcca2;--ink:#2a1c11;--fade:#6d5a43;--rubric:#8f2418;
--text:#e9dcc3;--mute:#b5a181;--line:rgba(201,154,62,.28);
--title:"Cinzel Decorative","Cinzel",serif;--head:"Cinzel",Georgia,serif;--body:"EB Garamond",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--text);font:18px/1.6 var(--body)}
a{color:var(--gilt2)}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
h2{font:700 clamp(1.7rem,4vw,2.6rem)/1.15 var(--head);letter-spacing:.05em;margin:0 0 14px;color:var(--gilt2);text-align:center}
.kicker{font:700 .78rem var(--head);letter-spacing:.32em;text-transform:uppercase;color:var(--ember);text-align:center;margin:0 0 8px}
.kicker::before,.kicker::after{content:"✦";margin:0 12px;color:var(--gilt);font-size:.7em}
.lede{max-width:760px;margin:0 auto 34px;text-align:center;color:var(--mute);font-size:1.12rem}
section{padding:90px 0}
:focus-visible{outline:2px solid var(--gilt2);outline-offset:3px}

/* THE HERO: embers over a broken skyline. */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;
background:radial-gradient(ellipse at 50% 115%,rgba(224,120,44,.55),transparent 55%),radial-gradient(ellipse at 50% 0%,#2b1f2e 0%,#17110f 55%,var(--night) 100%)}
#embers{position:absolute;inset:0;width:100%;height:100%}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(150px,28vh,280px);fill:#0b0806}
.bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px max(16px,3vw);z-index:3}
.bar .mark{font:700 1.05rem var(--title);color:var(--gilt2);text-decoration:none;letter-spacing:.06em}
.bar .links{display:flex;gap:clamp(12px,3vw,32px)}
.bar .links a{font:600 .78rem var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--text);text-decoration:none;opacity:.85}
.bar .links a:hover{color:var(--gilt2);opacity:1}
.hero-in{position:relative;z-index:2;padding:110px 16px 120px}
.logo{max-width:min(640px,86vw);height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.7))}
.wordmark{margin:0;font:900 clamp(3rem,11vw,7.5rem)/.95 var(--title);letter-spacing:.03em;
background:linear-gradient(180deg,#fff1c9 0%,var(--gilt2) 38%,var(--gilt) 62%,#7a5418 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 3px 0 #3a2508) drop-shadow(0 10px 30px rgba(0,0,0,.75))}
.wordmark small{display:block;font:700 .26em/1.4 var(--head);letter-spacing:.6em;margin:2px 0 4px;padding-left:.6em}
.tagline{font:italic 400 clamp(1.15rem,2.6vw,1.5rem) var(--body);color:var(--text);margin:22px 0 34px;text-shadow:0 2px 12px #000}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{font:700 .82rem var(--head);letter-spacing:.18em;text-transform:uppercase;padding:14px 24px;border:1px solid var(--gilt);color:var(--gilt2);
text-decoration:none;background:rgba(18,13,10,.55);backdrop-filter:blur(3px);border-radius:2px;transition:background .2s,color .2s}
.btn:hover{background:rgba(201,154,62,.18)}
.btn.gilt{background:linear-gradient(180deg,#e9c67a,#b07f2a);color:#21160a;border-color:#f3d891;box-shadow:0 0 30px rgba(224,160,60,.3)}
.btn[aria-disabled=true]{cursor:default}
.down{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;color:var(--gilt2);font-size:2rem;text-decoration:none;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* THE GAME: four pillars. */
.world{background:linear-gradient(var(--night),var(--night2))}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.pillar{background:linear-gradient(180deg,rgba(58,46,36,.55),rgba(29,21,16,.55));border:1px solid var(--line);border-top:2px solid var(--gilt);padding:26px 24px;border-radius:2px}
.pillar h3{font:700 1.15rem var(--head);letter-spacing:.06em;color:var(--gilt2);margin:12px 0 8px}
.pillar p{margin:0;color:var(--text);opacity:.88;font-size:1.02rem}
.sigil{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#4a3a2c,#140e0a 75%);
border:2px solid var(--gilt);box-shadow:0 0 24px rgba(224,120,44,.18),inset 0 0 12px #000}

/* THE SCHOOLS: a row of seals. */
.schools{background:var(--night2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.school-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:22px 10px}
.school{display:grid;justify-items:center;gap:8px;text-align:center;background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:6px}
.school .seal{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#4a3a2c,#140e0a 75%);
border:2px solid color-mix(in srgb,var(--c) 70%,#2a1c11);box-shadow:0 0 22px color-mix(in srgb,var(--c) 25%,transparent),inset 0 0 12px #000;transition:transform .2s}
.school:hover .seal{transform:translateY(-3px) scale(1.05)}
.school b{font:700 .8rem var(--head);letter-spacing:.16em;text-transform:uppercase}
.school span{font-size:.85rem;color:var(--mute)}

/* THE GRIMOIRE: parchment. */
.grimoire{background:radial-gradient(ellipse at 50% 0%,#2b2017,var(--night) 70%)}
.tabs{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.tabs button{font:700 .85rem var(--head);letter-spacing:.18em;text-transform:uppercase;padding:10px 22px;cursor:pointer;color:var(--text);
background:linear-gradient(#5b2219,#3d140e);border:1px solid #7a3324;border-radius:2px}
.tabs button[aria-selected=true]{background:linear-gradient(var(--parch),var(--parch2));color:var(--rubric);border-color:var(--gilt)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:22px}
.filters button{font:600 .72rem var(--head);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;cursor:pointer;border-radius:999px;
color:var(--text);background:transparent;border:1px solid color-mix(in srgb,var(--c,var(--gilt)) 60%,transparent)}
.filters button[aria-pressed=true]{background:color-mix(in srgb,var(--c,var(--gilt)) 80%,#000);color:#120d0a;border-color:transparent}
.book{background:radial-gradient(ellipse at 50% 40%,var(--parch) 55%,var(--parch2) 100%);color:var(--ink);border:1px solid #b99d6b;border-radius:2px;
box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 80px rgba(120,85,40,.3);padding:clamp(18px,3vw,36px);
display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.spell{display:grid;grid-template-columns:60px 1fr;gap:4px 14px;align-items:start;text-align:left;cursor:pointer;color:inherit;font:inherit;
background:rgba(255,252,240,.4);border:1px solid rgba(74,52,30,.25);border-left:3px solid var(--c);border-radius:2px;padding:12px 14px;transition:background .15s,transform .15s}
.spell:hover{background:rgba(255,252,240,.75);transform:translateY(-2px)}
.spell .mini{grid-row:span 2;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#4a3a2c,#1e1610 75%)}
.spell.major .mini{box-shadow:0 0 0 2px var(--gilt)}
.spell b{font:700 1rem var(--head);letter-spacing:.04em}
.spell .t{font-size:.97rem;line-height:1.45;color:#3b2a1c}
.spell .st{grid-column:1/-1;border-top:1px dotted rgba(74,52,30,.25);padding-top:6px;margin-top:4px;font:600 .68rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--fade);display:flex;gap:12px;flex-wrap:wrap}
.spell .clipmark{font:600 .62rem var(--head);letter-spacing:.12em;color:var(--rubric);text-transform:uppercase}
svg.glyph{display:block;overflow:visible}
svg.glyph .cut{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* THE ELEMENTS. */
.elements{background:var(--night2);border-top:1px solid var(--line)}
.reactions{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.rx{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;background:linear-gradient(180deg,rgba(58,46,36,.5),rgba(29,21,16,.5));
border:1px solid var(--line);border-radius:2px;padding:18px}
.rx .el{font:700 .78rem var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.rx .arrow{color:var(--gilt);text-align:center}
.rx .res{grid-column:1/-1;font-size:1.02rem}
.rx .ev{font:700 .66rem var(--head);letter-spacing:.16em;text-transform:uppercase;background:var(--rubric);color:#fff;padding:2px 9px;border-radius:2px;justify-self:end}

/* THE LEAF: a spell opened. */
dialog{border:1px solid #b99d6b;border-radius:3px;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;color:var(--ink);
background:radial-gradient(ellipse at 50% 30%,var(--parch) 55%,var(--parch2) 100%);box-shadow:0 30px 90px rgba(0,0,0,.8)}
dialog::backdrop{background:rgba(8,5,3,.72);backdrop-filter:blur(2px)}
dialog .x{position:absolute;right:8px;top:4px;font:700 1.5rem var(--head);background:none;border:none;color:var(--rubric);cursor:pointer;padding:4px 10px;z-index:2}
#leafbody{padding:26px 26px 28px}
.media{width:100%;aspect-ratio:16/9;background:#0e0a08;border-radius:2px;display:grid;place-items:center;margin-bottom:16px;overflow:hidden;box-shadow:inset 0 0 40px #000}
.media video{width:100%;height:100%;object-fit:cover}
#leafbody h3{font:700 1.5rem var(--head);margin:0;text-align:center}
.pills{text-align:center;margin:8px 0 14px}
.pill{display:inline-block;font:700 .64rem var(--head);letter-spacing:.14em;text-transform:uppercase;padding:2px 10px;border-radius:999px;margin:2px;
background:color-mix(in srgb,var(--c) 75%,#fff);color:#1b130d;border:1px solid color-mix(in srgb,var(--c) 60%,#000)}
#leafbody .about{font-size:1.1rem;margin:0 0 14px}
.costs{display:flex;justify-content:center;gap:26px;border-top:1px solid rgba(74,52,30,.25);padding-top:12px}
.costs div{text-align:center}
.costs b{display:block;font:700 1.25rem var(--head)}
.costs span{font:600 .64rem var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--fade)}

.mark sup,.fmark sup{font:600 .45em var(--body);vertical-align:super;margin-left:2px;opacity:.75}
footer{background:#0b0806;border-top:1px solid var(--line);padding:46px 0 36px;text-align:center;color:var(--mute)}
.fmark{font:700 1.5rem var(--title);color:var(--gilt2);margin-bottom:8px}
footer p{margin:4px 0}
footer .studio{font:600 .8rem var(--head);letter-spacing:.24em;text-transform:uppercase;color:var(--gilt);margin:0 0 14px}
footer .small{font-size:.85rem;opacity:.7}

@media (max-width:640px){body{font-size:17px}section{padding:64px 0}.bar .links{display:none}.btn{padding:12px 18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.down{animation:none}.spell,.school .seal{transition:none}}