:root{color-scheme:dark;--bg:#101710;--text:#f3f0e3;--muted:#b5bdab;--accent:#d8e6a6;--line:#ffffff21}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Alegreya Sans",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:fixed;top:-100px;left:20px;background:var(--bg);padding:16px;z-index:20}.skip:focus{top:12px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 5%}.brand{font:20px "Almendra",Georgia,serif;letter-spacing:2px}.brand small{display:block;margin-top:7px;font:9px "Alegreya Sans",sans-serif;letter-spacing:3px;color:var(--muted)}nav{display:flex;align-items:center;gap:32px;font-size:12px}.outline{border:1px solid var(--line);padding:12px 18px}.cover{display:block;width:100%;height:auto}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:32px 5% 60px;background:linear-gradient(#13211f,var(--bg))}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.4px;color:var(--accent);line-height:1.8}h1,h2,h3{font-family:"Almendra",Georgia,serif;font-weight:400;letter-spacing:0}h1{font-size:clamp(32px,4vw,58px);line-height:1.1;margin:18px 0 0}h2{font-size:clamp(34px,4vw,54px);line-height:1.13;margin:20px 0}h3{font-size:64px;margin:12px 0}.button{display:inline-block;background:var(--accent);color:#172016;padding:18px 24px;font-size:12px;font-weight:bold;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:#eef5d2;transform:translateY(-2px)}.section{max-width:1360px;margin:0 auto;padding:80px 5%;border-top:1px solid var(--line);scroll-margin-top:20px}.story{display:grid;grid-template-columns:1fr 1fr;gap:10%}.copy p{font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 24px}.text-link{display:inline-block;border-bottom:1px solid var(--accent);padding-bottom:12px;margin-top:8px;font-size:13px;color:var(--accent)}.intro{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:32px}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.controls button{display:flex;align-items:center;gap:15px;cursor:pointer;background:#192219;color:var(--text);border:1px solid var(--line);padding:18px;text-align:left}.controls img{width:38px;height:38px;object-fit:contain}.controls small{margin-left:auto;color:var(--muted);font-size:10px}.controls button:hover,.controls button[aria-pressed=true]{background:#2b3827;border-color:var(--accent)}.scene{position:relative;min-height:390px;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:50px}#landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#08120fea,#08120f55);z-index:-1}.scene-copy{max-width:360px}.scene-copy p{line-height:1.8;color:#e1e6da;font-size:14px}#orb{width:240px;height:240px;object-fit:contain;margin-left:auto;filter:drop-shadow(0 0 25px #ffffff45)}.join{text-align:center;padding-top:100px;padding-bottom:110px}.join p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:30px}footer{border-top:1px solid var(--line);padding-top:32px;padding-bottom:32px}footer p,footer>a:last-child{font-size:11px;color:var(--muted)}
@media(max-width:700px){header{padding:20px 5%;gap:12px}.brand{font-size:16px}.brand small{font-size:8px;letter-spacing:1.6px}nav{gap:0}nav>a:not(.outline){display:none}.outline{padding:11px;font-size:10px}.hero-bottom{display:block;padding-top:26px;padding-bottom:44px}.hero-bottom .button{margin-top:24px}.eyebrow{font-size:9px;letter-spacing:1.7px}.section{padding-top:52px;padding-bottom:52px}.story{grid-template-columns:1fr;gap:22px}.copy p{font-size:15px}.controls{grid-template-columns:repeat(2,1fr)}.controls button{padding:12px;gap:10px;font-size:14px}.scene{min-height:420px;padding:28px;align-items:flex-start;flex-direction:column}.scene-copy{max-width:100%}h3{font-size:44px}#orb{width:150px;height:150px;margin:12px auto 0}footer{flex-wrap:wrap}footer p{width:100%;order:3;margin:0}.join{padding-top:64px;padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* One orb, transformed by the four element controls. */
.orb-section{display:flex;flex-direction:column;align-items:center;gap:46px;padding-top:72px;padding-bottom:72px}.element-orb{--energy:#caeaff;--surface:repeating-conic-gradient(from 25deg,#203947 0deg,#82bac5 25deg,#14282e 55deg);position:relative;width:clamp(180px,36vw,300px);aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:inset -28px -22px 46px #000c,inset 10px 10px 24px #ffffff70,0 0 30px color-mix(in srgb,var(--energy) 40%,transparent),0 0 90px color-mix(in srgb,var(--energy) 18%,transparent);border:2px solid var(--energy);transition:box-shadow .6s,border-color .6s;isolation:isolate}.element-orb:before{content:"";position:absolute;inset:8%;border:2px solid color-mix(in srgb,var(--energy) 65%,transparent);border-radius:45% 55% 40% 60%;transform:rotate(-30deg);box-shadow:0 0 18px var(--energy),inset 0 0 18px var(--energy)}.orb-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 30% 22%,#fff9,transparent 25%),radial-gradient(ellipse at 50% 100%,#000b,transparent 65%)}.element-orb[data-form=terra]{--energy:#a2e76c;--surface:repeating-conic-gradient(from 20deg,#254620 0deg,#779550 18deg,#46382b 36deg,#122918 60deg)}.element-orb[data-form=agua]{--energy:#58d9ff;--surface:repeating-conic-gradient(from -40deg,#063c79 0deg,#71e7ef 24deg,#0877b6 45deg,#062950 70deg)}.element-orb[data-form=ar]{--energy:#e7faff;--surface:repeating-conic-gradient(from 70deg,#6995aa 0deg,#e0f8f5 15deg,#91b8c6 28deg,#285867 60deg)}.element-orb[data-form=fogo]{--energy:#ffad40;--surface:repeating-conic-gradient(from 15deg,#72100a 0deg,#ff5f14 20deg,#ffdc69 32deg,#b42608 48deg,#3b0c06 65deg)}.orb-controls{display:flex;justify-content:center;gap:clamp(14px,4vw,28px)}.orb-controls button{width:clamp(56px,12vw,76px);aspect-ratio:1;background:transparent;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}.orb-controls img{width:55%;height:55%;object-fit:contain}.orb-controls button:hover{transform:translateY(-4px);background:#ffffff0a}.orb-controls button[aria-pressed=true]{border-color:var(--accent);background:#d8e6a612;box-shadow:0 0 18px #d8e6a619}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Layered elemental energy, with a shaded spherical surface. */
.element-orb{--energy:#b8eaff;--deep:#102d44;--speed:14s;background:none;border:0;box-shadow:none;animation:orb-float 6s ease-in-out infinite}.element-orb:before{display:none}.orb-body{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 28%,#4b6c79,var(--deep) 52%,#020b13 90%);box-shadow:inset 0 0 26px color-mix(in srgb,var(--energy) 50%,transparent),0 0 3px var(--energy),0 0 30px color-mix(in srgb,var(--energy) 30%,transparent);border:1px solid color-mix(in srgb,var(--energy) 65%,transparent);isolation:isolate}.orb-body:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 28% 18%,#fff8,transparent 23%),radial-gradient(circle at 38% 35%,transparent 34%,#000a 76%,#000e 100%);box-shadow:inset -12px -16px 25px #0009,inset 3px 3px 12px #ffffff45;pointer-events:none}.orb-flow{position:absolute;inset:-35%;border-radius:43%;background:repeating-radial-gradient(ellipse at 35% 40%,transparent 0 12px,color-mix(in srgb,var(--energy) 60%,transparent) 15px,transparent 19px 36px);filter:blur(3px);mix-blend-mode:screen;animation:orb-swirl var(--speed) linear infinite;opacity:.75}.flow-two{inset:-20%;background:conic-gradient(from 60deg,transparent,var(--energy),transparent 30%,var(--energy) 44%,transparent 64%,var(--energy),transparent);filter:blur(18px);opacity:.55;animation-direction:reverse;animation-duration:19s}.flow-three{inset:18%;border:2px solid var(--energy);background:transparent;border-radius:35% 65% 55% 45%;filter:blur(2px);box-shadow:0 0 15px var(--energy),inset 0 0 15px var(--energy);animation-duration:11s}.orb-core{inset:0;background:radial-gradient(circle at 45% 45%,color-mix(in srgb,var(--energy) 75%,transparent),transparent 32%);animation:orb-breathe 4s ease-in-out infinite}.orb-atmosphere{position:absolute;inset:-13%;border-radius:50%;background:radial-gradient(circle,transparent 48%,color-mix(in srgb,var(--energy) 16%,transparent) 57%,transparent 72%);filter:blur(10px);animation:orb-breathe 5s ease-in-out infinite}.orb-particles{position:absolute;inset:-18%;pointer-events:none}.orb-particle{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--energy);box-shadow:0 0 9px var(--energy);animation:orb-orbit var(--duration) linear infinite;animation-delay:var(--delay);opacity:.7}.element-orb[data-form=terra]{--energy:#a0e878;--deep:#142e17;--speed:24s}.element-orb[data-form=terra] .flow-one{background:repeating-radial-gradient(ellipse at 35% 40%,transparent 0 18px,#abce6277 20px,#766f3988 24px,transparent 29px 48px);filter:blur(1px)}.element-orb[data-form=terra] .orb-particle{border-radius:2px;width:6px;height:6px}.element-orb[data-form=agua]{--energy:#57ddff;--deep:#042b58;--speed:12s}.element-orb[data-form=agua] .orb-particle{background:transparent;border:1px solid #a1edff;width:7px;height:7px}.element-orb[data-form=ar]{--energy:#deffff;--deep:#254656;--speed:8s}.element-orb[data-form=ar] .flow-one{filter:blur(6px)}.element-orb[data-form=ar] .orb-particle{width:14px;height:2px;opacity:.5}.element-orb[data-form=fogo]{--energy:#ff9e36;--deep:#531008;--speed:6s}.element-orb[data-form=fogo] .flow-one{background:repeating-radial-gradient(ellipse at 35% 60%,transparent 0 10px,#ffb13bcc 14px,#ff3d1877 18px,transparent 25px 42px)}.element-orb[data-form=fogo] .orb-particle{width:3px;height:7px;background:#ffe49a;box-shadow:0 0 12px #ff6d00}.element-orb.transforming .orb-body{animation:orb-transform .65s ease-out}.orb-section{gap:54px;padding-top:100px;padding-bottom:86px}
@keyframes orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes orb-swirl{to{transform:rotate(360deg)}}@keyframes orb-breathe{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:.95;transform:scale(1.04)}}@keyframes orb-orbit{from{transform:rotate(var(--angle)) translateX(var(--radius)) rotate(0deg);opacity:.15}50%{opacity:.9}to{transform:rotate(calc(var(--angle) + 360deg)) translateX(var(--radius)) rotate(-360deg);opacity:.15}}@keyframes orb-transform{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(.9);filter:brightness(2)}65%{transform:scale(1.06);filter:brightness(1.4)}100%{transform:scale(1);filter:brightness(1)}}
@media(max-width:700px){.orb-section{padding-top:76px;padding-bottom:64px}.orb-particle{--radius:110px!important}}
@media(prefers-reduced-motion:reduce){.element-orb,.element-orb *{animation:none!important}}

/* Handcrafted headings with humanist, readable body text. */
body{font-size:18px}.brand{font-weight:700;letter-spacing:1px}.brand small{font-size:11px;letter-spacing:2px}nav{font-size:15px}.eyebrow{font-size:12px;letter-spacing:1.8px}.copy p{font-size:19px;line-height:1.75}.button,.text-link{font-size:16px}.join p,.intro{font-size:18px}footer p,footer>a:last-child{font-size:14px}
@media(max-width:700px){.brand{font-size:18px}.brand small{font-size:9px}.outline{font-size:13px}.eyebrow{font-size:11px}.copy p{font-size:18px}}
/* Each form has its own material and silhouette. */
.element-orb[data-form=fogo] .orb-body{overflow:visible;background:radial-gradient(circle at 45% 60%,#fff5ba 0%,#ffce41 18%,#ff7b13 42%,#ba2307 70%,#4a0800);border:0;box-shadow:0 0 30px #ff9a25aa,0 0 75px #e9431655}.element-orb[data-form=fogo] .flow-one{inset:-10% 8% 5%;background:radial-gradient(ellipse at 50% 75%,#ffe881, #ff6c0c 48%,transparent 70%);border-radius:70% 25% 60% 40%;filter:blur(3px);mix-blend-mode:screen;transform-origin:bottom;animation:flame-rise 1.8s ease-in-out infinite alternate}.element-orb[data-form=fogo] .flow-two{inset:-30% 20% 20%;background:linear-gradient(0deg,#ff5e0c,#ffd770 60%,transparent);border-radius:10% 90% 30% 70%;filter:blur(4px);animation:flame-rise 1.3s ease-in-out infinite alternate-reverse;opacity:.8}.element-orb[data-form=fogo] .flow-three{inset:-16% 40% 35% -3%;border:0;background:linear-gradient(0deg,#ff8b15,#ffcc46,transparent);border-radius:80% 15% 65% 30%;filter:blur(2px);animation:flame-rise 1.6s ease-in-out infinite alternate}.element-orb[data-form=fogo] .orb-particle{animation:ember-rise var(--duration) ease-out infinite;animation-duration:3s}
.element-orb[data-form=terra] .orb-body{overflow:visible;background:radial-gradient(ellipse at 28% 20%,#8ea560,transparent 42%),radial-gradient(circle at 65% 75%,#29241e,transparent 40%),#67513a;border:0;box-shadow:inset -20px -28px 35px #17170fe0,0 0 24px #8da34b33}.element-orb[data-form=terra] .flow-one{inset:0;background:repeating-conic-gradient(from 10deg at 40% 35%,#918577 0deg 25deg,#4b4439 25deg 47deg,#b09b73 47deg 62deg,#554b3c 62deg 90deg);border-radius:46% 54% 43% 57%;clip-path:polygon(12% 10%,40% 0,72% 6%,92% 25%,100% 55%,86% 82%,60% 100%,25% 91%,4% 68%,0 35%);filter:none;mix-blend-mode:normal;opacity:.8;animation:rock-turn 40s linear infinite}.element-orb[data-form=terra] .flow-two{inset:0;background:radial-gradient(ellipse at 20% 27%,#91b948 0 7%,transparent 10%),radial-gradient(ellipse at 68% 18%,#577d25 0 12%,transparent 17%),radial-gradient(ellipse at 73% 65%,#8baa3f 0 10%,transparent 15%),radial-gradient(ellipse at 33% 80%,#355e21 0 13%,transparent 18%);filter:blur(1px);mix-blend-mode:normal;opacity:1;animation:rock-turn 40s linear infinite}.element-orb[data-form=terra] .flow-three{inset:-3%;border:0;border-radius:50%;background:radial-gradient(ellipse at 12% 48%,#76a43c 0 5%,transparent 6%),radial-gradient(ellipse at 80% 20%,#a3c653 0 6%,transparent 7%),radial-gradient(ellipse at 68% 90%,#54802d 0 6%,transparent 7%);box-shadow:none;filter:none;animation:rock-turn 40s linear infinite}.element-orb[data-form=terra] .orb-core{background:radial-gradient(ellipse at 25% 18%,#f7e0a344,transparent 40%);animation:none}.element-orb[data-form=terra] .orb-particle{background:#6d6353;border:1px solid #a49b7c;box-shadow:1px 2px 4px #0008;width:10px;height:8px;clip-path:polygon(20% 0,90% 15%,100% 65%,35% 100%,0 55%)}.element-orb[data-form=terra] .orb-particle:nth-child(3n){background:#7fa448;border:0;border-radius:90% 0 90% 0;clip-path:none;width:12px;height:6px}
.element-orb[data-form=agua] .orb-body{background:radial-gradient(circle at 32% 22%,#c1fbff,#178ab9 35%,#054367 70%,#061f36);border:2px solid #a3f6ff99;box-shadow:inset 10px 5px 20px #b6f5ff77,inset -12px -18px 25px #03233bdd,0 0 20px #52cffb44}.element-orb[data-form=agua] .flow-one{inset:-25%;background:repeating-radial-gradient(ellipse at 35% 50%,transparent 0 20px,#c7ffff88 23px,transparent 27px 48px);filter:blur(1px);border-radius:40%;animation:water-roll 8s linear infinite}.element-orb[data-form=agua] .flow-two{inset:10% -25%;background:repeating-linear-gradient(165deg,transparent 0 24px,#b4faff66 27px,transparent 31px 52px);filter:blur(2px);animation:water-roll 12s linear infinite reverse;opacity:.8}.element-orb[data-form=agua] .flow-three{inset:12%;border:2px solid #d5ffffaa;border-radius:35% 65% 40% 60%;filter:blur(1px);box-shadow:0 0 5px #abffff;animation:water-roll 9s linear infinite}.element-orb[data-form=agua] .orb-particle{width:8px;height:11px;border-radius:70% 30% 60% 40%;box-shadow:inset 2px 2px 3px #d7ffff88,0 0 5px #57d9ff44}
.element-orb[data-form=ar] .orb-body{background:radial-gradient(circle,#bbf1f011,#729faf11 60%,transparent);border:0;box-shadow:none;overflow:visible}.element-orb[data-form=ar] .orb-body:after{background:radial-gradient(circle at 35% 25%,#ffffff22,transparent 65%);box-shadow:none}.element-orb[data-form=ar] .flow-one{inset:-8%;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 17px,#e4ffff99 19px,transparent 22px 34px);border-radius:50%;filter:blur(1px);transform:rotate(-30deg);animation:wind-turn 5s linear infinite}.element-orb[data-form=ar] .flow-two{inset:2% -10%;background:transparent;border-top:5px solid #eeffffbb;border-bottom:2px solid #a4d4e199;border-radius:50%;filter:blur(1px);opacity:1;animation:wind-turn 3s linear infinite reverse}.element-orb[data-form=ar] .flow-three{inset:15% -4%;background:transparent;border:0;border-top:3px solid #fff;border-bottom:4px solid #bddde9aa;border-radius:50%;box-shadow:0 0 12px #caf7ff33;filter:blur(1px);animation:wind-turn 4s linear infinite}.element-orb[data-form=ar] .orb-core{background:radial-gradient(circle,#e6ffff44,transparent 58%)}.element-orb[data-form=ar] .orb-particle{width:26px;height:2px;background:linear-gradient(90deg,transparent,#eaffff);box-shadow:none;animation-duration:4s}
@keyframes flame-rise{from{transform:translateY(5px) scaleX(.92) rotate(-8deg);opacity:.65}to{transform:translateY(-16px) scaleY(1.12) rotate(9deg);opacity:1}}@keyframes ember-rise{0%{transform:translate(calc(var(--radius) * .5),70px);opacity:0}20%{opacity:.9}100%{transform:translate(calc(var(--radius) * -.4),-230px);opacity:0}}@keyframes rock-turn{to{transform:rotate(360deg)}}@keyframes water-roll{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}@keyframes wind-turn{from{transform:rotate(0deg) scaleY(.65)}to{transform:rotate(360deg) scaleY(.65)}}
@media(prefers-reduced-motion:reduce){.element-orb,.element-orb *{animation:none!important}}
/* Illustrated fantasy assets replace the procedural sphere surfaces. */
.element-orb{width:clamp(260px,48vw,420px);animation:illustrated-float 7s ease-in-out infinite}.element-orb .orb-body{display:none}.orb-art{position:absolute;inset:-8%;background-image:url("../assets/images/elemental-orbs.png");background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--energy) 25%,transparent));animation:illustrated-drift 12s ease-in-out infinite}.element-orb[data-form=terra] .orb-art{background-position:0 0}.element-orb[data-form=agua] .orb-art{background-position:100% 0}.element-orb[data-form=ar] .orb-art{background-position:0 100%}.element-orb[data-form=fogo] .orb-art{background-position:100% 100%}.element-orb .orb-atmosphere{inset:0;opacity:.3}.element-orb .orb-particles{inset:-4%;opacity:.5}.element-orb.transforming .orb-art{animation:illustrated-change .65s ease-out,illustrated-drift 12s ease-in-out .65s infinite}.orb-section{padding-top:68px;gap:20px}
@keyframes illustrated-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes illustrated-drift{0%,100%{transform:rotate(-4deg) scale(.97)}50%{transform:rotate(4deg) scale(1.03)}}@keyframes illustrated-change{0%{opacity:.25;transform:scale(.87);filter:brightness(1.8)}100%{opacity:1;transform:scale(.97);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.element-orb,.element-orb *{animation:none!important}}