:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#203950;background:#fbf9f2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:0;background:radial-gradient(circle at 5% 6%,#fff0c7,transparent 27%),radial-gradient(circle at 92% 26%,#dcefff,transparent 27%),radial-gradient(circle at 12% 76%,#e6f9ec,transparent 30%),#fbf9f2}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("comic-doodles.svg") repeat;background-size:660px;opacity:.09;pointer-events:none}
a{color:inherit}
.characters-skip{position:absolute;left:-9999px}.characters-skip:focus{left:12px;top:12px;z-index:20;padding:11px 15px;background:white}
.characters-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px max(24px,calc((100vw - 1320px)/2));background:#17334f;color:white;border-bottom:5px solid #ffcc70}
.characters-brand{display:flex;align-items:center;gap:10px;font-weight:900;text-decoration:none}.characters-brand img{object-fit:contain}
.characters-header nav{display:flex;flex-wrap:wrap;gap:8px}.characters-header nav a{padding:9px 14px;border-radius:10px;text-decoration:none;font-weight:750}.characters-header nav a:hover,.characters-header nav a[aria-current]{background:#ffffff20}
main{max-width:1320px;margin:auto;padding:28px 24px 80px}
.directory-intro{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:240px;padding:clamp(28px,4vw,52px);overflow:hidden;border:2px solid #b8d6dd;border-bottom:7px solid #70b9c2;border-radius:28px;background:linear-gradient(115deg,#fff9e8,#f4fbff 60%,#e4faee);box-shadow:0 14px 30px #1a42651b}
.directory-intro::after{content:"";position:absolute;z-index:-1;right:-90px;bottom:-135px;width:390px;height:390px;border:50px solid #ffce843f;border-radius:50%}
.directory-eyebrow{margin:0 0 6px;color:#417b8c;font-size:.74rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.directory-intro h1{margin:0;color:#17395b;font-size:clamp(3.1rem,6vw,5.8rem);line-height:.95;letter-spacing:-.075em}.directory-intro h1 span{color:#b84b78}
.directory-intro p:last-child{max-width:660px;margin:18px 0 0;color:#52687a;font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.6}
.directory-intro-art{display:flex;gap:8px;align-items:center;justify-content:center;min-width:230px;font-size:4.4rem;color:#e7a454;transform:rotate(-8deg)}.directory-intro-art span:nth-child(2){color:#9a82ca;transform:translateY(-27px)}.directory-intro-art span:nth-child(3){color:#64bfa3;transform:translateY(22px)}
.directory-jump{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}.directory-jump a{display:inline-flex;align-items:center;min-height:44px;padding:10px 17px;border:1px solid #c9dbe2;border-radius:999px;background:#fff;color:#28506d;text-decoration:none;font-size:.88rem;font-weight:800;box-shadow:0 3px 0 #dce7e9}.directory-jump a:hover{transform:translateY(-2px);background:#e5f6f4}
.directory-section{--section-accent:#d9a968;position:relative;scroll-margin-top:22px;margin-top:26px;padding:clamp(22px,3vw,38px);border:1px solid #e4d8c6;border-top:7px solid var(--section-accent);border-radius:26px;background:#fffdf9ed;box-shadow:0 14px 32px #263a5713}
.directory-savers{--section-accent:#ebb667;background:linear-gradient(140deg,#fffdf5,#fff9ed)}
.directory-villains{--section-accent:#ad6985;background:linear-gradient(140deg,#fff9f7,#fdf1f7)}
.directory-spendens{--section-accent:#66bdb2;background:linear-gradient(140deg,#f9fffb,#eefaf8)}
.directory-nemeses{--section-accent:#a683bd;background:linear-gradient(140deg,#fcf8ff,#f4eefa)}
.directory-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.directory-heading h2{margin:0;color:#213e5b;font-size:clamp(2rem,3.7vw,3.2rem);line-height:1.12;letter-spacing:-.05em}.directory-heading>p{max-width:340px;margin:0 0 4px;color:#566e80;line-height:1.55;font-size:.95rem}.directory-villains .directory-eyebrow,.directory-nemeses .directory-eyebrow{color:#915578}
.directory-feature{display:grid;grid-template-columns:1fr minmax(260px,.9fr);align-items:center;gap:30px;min-height:220px;margin-bottom:24px;padding:24px 28px;border:2px solid #e7bd76;border-radius:21px;background:linear-gradient(115deg,#fff1d0,#e9f9e8 66%,#e0f4ff);color:#3f4259;text-decoration:none;box-shadow:0 7px 0 #f2dcba;transition:transform .2s,box-shadow .2s}
.directory-spendens .directory-feature{border-color:#80cfc3;background:linear-gradient(115deg,#dff8f0,#e5efff 66%,#fff1ca);box-shadow:0 7px 0 #ccebe4}
.directory-feature:hover{transform:translateY(-4px);box-shadow:0 11px 0 #f2dcba}.directory-spendens .directory-feature:hover{box-shadow:0 11px 0 #ccebe4}
.directory-feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.directory-feature-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:15px;background:#fff;color:#a16854;font-size:1.8rem;box-shadow:0 4px 10px #21465b1c}.directory-spendens .directory-feature-icon{color:#228c91}
.directory-feature-copy strong{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.04em}.directory-feature-copy>span:nth-child(3){max-width:500px;color:#586a77;line-height:1.55}.directory-feature-action{margin-top:8px;color:#795074;font-weight:900}.directory-spendens .directory-feature-action{color:#246e82}
.directory-feature img{display:block;width:100%;height:204px;object-fit:contain;border:6px solid white;border-radius:13px;background:white;box-shadow:0 8px 17px #24476226;transform:rotate(2deg);transition:transform .2s}.directory-feature:hover img{transform:rotate(0) scale(1.02)}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.directory-card{--card-accent:#8ebac2;--card-soft:#eef9f7;display:grid;grid-template-columns:99px minmax(0,1fr);gap:18px;align-items:center;min-width:0;min-height:175px;padding:19px;border:2px solid var(--card-accent);border-bottom:6px solid var(--card-accent);border-radius:19px;background:linear-gradient(135deg,#fff 35%,var(--card-soft));color:#263a55;text-decoration:none;box-shadow:0 7px 18px #27334d12;transition:transform .2s,box-shadow .2s}
.directory-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 15px 25px #27334d27}.directory-card:nth-child(even):hover{transform:translateY(-6px) rotate(.5deg)}
.directory-card-art{display:grid;place-items:center;width:99px;height:122px;border:5px solid white;border-radius:14px;background:var(--card-soft);box-shadow:0 5px 14px #24385424;transform:rotate(-3deg);transition:transform .2s}.directory-card:nth-child(even) .directory-card-art{transform:rotate(3deg)}.directory-card:hover .directory-card-art{transform:rotate(0) scale(1.06)}
.directory-card-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:9px}.directory-card-symbol{font-size:3.1rem;line-height:1;color:var(--card-accent)}
.directory-card-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.directory-card-role{max-width:100%;margin-bottom:7px;padding:3px 8px;border:1px solid var(--card-accent);border-radius:999px;background:var(--card-soft);color:#52627c;font-size:.65rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.directory-card-copy strong{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.15;color:#273c58}.directory-card-desc{margin-top:7px;color:#61707d;font-size:.84rem;line-height:1.43}.directory-card-action{margin-top:13px;color:#386783;font-size:.79rem;font-weight:900}
.directory-villains .directory-card-action{color:#8e5273}.directory-nemeses .directory-card-action{color:#785690}
.directory-card:focus-visible,.directory-feature:focus-visible,.directory-jump a:focus-visible{outline:4px solid #e99b44;outline-offset:4px}
@media(max-width:1060px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.characters-header{flex-direction:column;align-items:flex-start}.directory-intro-art{display:none}.directory-heading{align-items:flex-start;flex-direction:column;gap:8px}.directory-feature{grid-template-columns:1fr}.directory-feature img{height:230px}.directory-grid{grid-template-columns:1fr}}
@media(max-width:460px){main{padding:18px 14px 60px}.directory-intro{min-height:0;padding:26px 20px}.directory-intro h1{font-size:clamp(2.7rem,13vw,4rem)}.directory-section{padding:19px 15px}.directory-feature{padding:19px}.directory-feature img{height:175px}.directory-card{grid-template-columns:78px minmax(0,1fr);gap:12px;min-height:150px;padding:14px}.directory-card-art{width:78px;height:105px}.directory-card-desc{font-size:.8rem}.directory-card-copy strong{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.directory-feature,.directory-feature img,.directory-card,.directory-card-art,.directory-jump a{transition:none}}