@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root{--bg:#0d0d0d;--bg-soft:#151515;--panel:rgba(23,23,23,.88);--panel-strong:rgba(10,10,10,.94);--text:#ece5d6;--muted:#b1a793;--line:rgba(206,184,142,.18);--gold:#b49360;--gold-bright:#d8ba83;--shadow:rgba(0,0,0,.48);--radius:22px;--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:linear-gradient(rgba(8,8,8,.93),rgba(8,8,8,.96)),url("assets/texture.png") center/520px repeat,var(--bg);font-family:Manrope,"Segoe UI",sans-serif;line-height:1.6}body.modal-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.site-shell{min-height:100vh}.container{width:min(calc(100% - 32px),var(--container));margin:0 auto}
.topbar{position:absolute;inset:0 0 auto;z-index:20;padding-top:18px}.topbar-solid{position:sticky;background:linear-gradient(to bottom,rgba(10,10,10,.95),rgba(10,10,10,.78));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 18px;border:1px solid rgba(255,255,255,.08);background:rgba(18,18,18,.82);backdrop-filter:blur(8px);border-radius:18px;box-shadow:0 18px 44px var(--shadow)}.brand-desktop{width:258px}.brand-mobile{display:none;width:72px}.main-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.main-nav a{padding:10px 12px;border-radius:999px;color:var(--muted);font-size:.92rem;transition:.22s}.main-nav a:hover,.main-nav a.is-active{color:var(--text);background:rgba(180,147,96,.12);box-shadow:inset 0 0 0 1px rgba(180,147,96,.2)}.nav-toggle,.burger{display:none}
.page-hero{position:relative;min-height:44svh;display:flex;align-items:end;border-bottom:1px solid var(--line)}.page-hero-clans{background:linear-gradient(90deg,rgba(4,4,4,.9),rgba(4,4,4,.5) 52%,rgba(4,4,4,.25)),url("assets/clans-banner.png") center/cover no-repeat}.page-hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(240,214,171,.12),transparent 38%),linear-gradient(to top,rgba(3,3,3,.9),rgba(3,3,3,.12))}.page-hero-content{position:relative;z-index:1;padding:86px 0 52px;max-width:840px}.eyebrow,.section-kicker{margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-bright);font-size:.76rem}.page-hero h1,.directory-heading h2,.panel-heading h3,.modal-content h2{font-family:"Cormorant Garamond",Georgia,serif}.page-hero h1{margin:0;font-size:clamp(2.7rem,6vw,4.8rem);line-height:1}.page-hero p{max-width:650px;margin:14px 0 0;color:var(--muted);font-size:1.08rem}
.section{padding:72px 0}.clan-directory{background:radial-gradient(circle at 50% 0,rgba(180,147,96,.07),transparent 34%)}.directory-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.directory-heading h2{margin:0;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;border-radius:999px;font-weight:700;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px)}.button-primary{background:linear-gradient(180deg,#caaa74,#9d7d4d);color:#16120d;box-shadow:0 12px 26px rgba(180,147,96,.22)}.button-secondary{background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.faction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.faction-card{--faction:#b49360;position:relative;display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:18px;min-height:132px;padding:20px;text-align:left;color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--faction) 14%,#121212),#121212 58%);border:1px solid color-mix(in srgb,var(--faction) 36%,transparent);border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.3);transition:.25s}.faction-card::after{content:"";position:absolute;inset:auto -35px -55px auto;width:140px;height:140px;border:1px solid color-mix(in srgb,var(--faction) 28%,transparent);border-radius:50%}.faction-card:hover,.faction-card.is-active{transform:translateY(-4px);border-color:color-mix(in srgb,var(--faction) 72%,#d8ba83);box-shadow:0 22px 50px rgba(0,0,0,.45),inset 0 0 40px color-mix(in srgb,var(--faction) 8%,transparent)}.faction-card.is-active::before{content:"";position:absolute;inset:0;border:2px solid color-mix(in srgb,var(--faction) 65%,#d8ba83);border-radius:inherit;pointer-events:none}.faction-ancients{--faction:#637e68}.faction-remnants{--faction:#87534a}.faction-pagans{--faction:#8c8150}.faction-sigil{display:grid;place-items:center;width:72px;height:82px;clip-path:polygon(10% 0,90% 0,100% 68%,50% 100%,0 68%);background:linear-gradient(155deg,color-mix(in srgb,var(--faction) 80%,#d8ba83),color-mix(in srgb,var(--faction) 55%,#161616));font:700 2.1rem/1 "Cormorant Garamond",serif;color:#f1e7d3;text-shadow:0 2px 8px #000}.faction-copy{display:flex;flex-direction:column}.faction-copy strong{font:700 1.7rem/1.1 "Cormorant Garamond",serif}.faction-copy small{margin-top:8px;color:var(--muted);font-size:.76rem;line-height:1.4}.faction-arrow{position:relative;z-index:1;font-size:1.4rem;color:var(--gold-bright)}
.clan-results{margin-top:34px}.clan-empty{display:grid;place-items:center;min-height:210px;padding:32px;text-align:center;border:1px dashed rgba(206,184,142,.2);border-radius:20px;background:rgba(255,255,255,.015)}.clan-empty h3{margin:8px 0 0;font:700 1.8rem "Cormorant Garamond",serif}.clan-empty p{margin:6px 0 0;color:var(--muted)}.clan-empty-mark{font-size:2rem;color:var(--gold)}.clan-empty-small{min-height:130px}.faction-panel[hidden],.clan-modal[hidden],.clan-empty[hidden]{display:none}.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.panel-heading h3{margin:0;font-size:2.4rem;line-height:1}.panel-heading>span{color:var(--muted);font-size:.9rem}.clan-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.clan-tile{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;min-height:236px;padding:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(29,31,27,.92),rgba(17,17,17,.96));box-shadow:0 18px 44px var(--shadow)}.clan-crest-button{padding:0;border:0;background:none;cursor:pointer;transition:.25s}.clan-crest-button:hover{transform:scale(1.035)}.clan-crest-button img{width:136px;max-height:190px;margin:auto;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}.clan-date{margin:0;color:var(--gold-bright);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}.clan-tile h4{margin:5px 0 3px;font:700 2.25rem/1 "Cormorant Garamond",serif}.clan-motto{margin:0;color:#d5bc88;font-size:.87rem;font-weight:600}.clan-summary{margin:12px 0;color:var(--muted);font-size:.92rem;line-height:1.55}.clan-more{padding:0;border:0;background:none;color:var(--gold-bright);font-weight:700;cursor:pointer}.clan-more span{display:inline-block;margin-left:5px;transition:.2s}.clan-more:hover span{transform:translateX(4px)}
.clan-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.modal-card{position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr;width:min(100%,960px);max-height:min(92vh,820px);overflow:auto;border:1px solid rgba(216,186,131,.28);border-radius:24px;background:linear-gradient(135deg,#1a1d19,#101010 58%);box-shadow:0 34px 100px #000}.modal-card-small{display:block;width:min(100%,600px)}.modal-close{position:sticky;top:16px;z-index:2;grid-column:1/-1;justify-self:end;width:42px;height:42px;margin:16px 16px -58px 0;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(10,10,10,.75);color:var(--text);font-size:1.7rem;line-height:1;cursor:pointer}.modal-crest{display:grid;place-items:center;padding:58px 26px 30px;background:radial-gradient(circle,rgba(114,135,79,.18),transparent 65%)}.modal-crest img{max-height:440px;object-fit:contain;filter:drop-shadow(0 20px 32px #000)}.modal-content{padding:50px 38px 32px}.modal-content h2{margin:0;font-size:clamp(2.3rem,5vw,3.8rem);line-height:1}.modal-content p{margin:12px 0;color:var(--muted)}.modal-lead{font-size:1.04rem}.modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.modal-columns section{padding:15px 16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02)}.modal-columns h3{margin:0 0 8px;font-size:1rem}.modal-columns ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.5}.modal-motto{color:var(--gold-bright)!important;font-weight:700;letter-spacing:.04em}.modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 4px}.modal-card-small .modal-content{padding-top:64px}
.footer{border-top:1px solid var(--line);background:rgba(5,5,5,.6)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;color:var(--muted);font-size:.9rem}.footer-inner p{margin:0}
@media(max-width:980px){.faction-grid{grid-template-columns:1fr}.faction-card{min-height:112px}.clan-compact-grid{grid-template-columns:1fr}}
@media(max-width:760px){.topbar{position:sticky;padding-top:0}.topbar-inner{position:relative;padding:10px 14px;border-radius:0}.brand-desktop{display:none}.brand-mobile{display:block}.burger{display:inline-flex;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto}.burger span{width:26px;height:2px;background:var(--text)}.main-nav{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(270px,100%);padding:10px;background:rgba(10,10,10,.97);border:1px solid var(--line);border-radius:18px}.main-nav a{width:100%}.nav-toggle:checked~.main-nav{display:grid}.page-hero{min-height:38svh}.page-hero-content{padding:76px 0 42px}.section{padding:52px 0}.directory-heading{align-items:start;flex-direction:column}.faction-card{grid-template-columns:62px 1fr auto;padding:16px}.faction-sigil{width:58px;height:68px}.clan-tile{grid-template-columns:100px 1fr;gap:16px;padding:16px}.clan-crest-button img{width:92px;max-height:150px}.clan-tile h4{font-size:1.85rem}.modal-card{grid-template-columns:1fr;max-height:92vh}.modal-crest{padding:62px 24px 18px}.modal-crest img{max-height:230px}.modal-content{padding:28px 22px 30px}.modal-columns{grid-template-columns:1fr}.footer-inner{align-items:start;flex-direction:column}}
@media(max-width:480px){.clan-tile{grid-template-columns:1fr;text-align:center}.clan-more{margin:auto}.faction-copy strong{font-size:1.45rem}.faction-copy small{font-size:.7rem}.modal-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Faction artwork */
.faction-sigil{width:72px;height:88px;clip-path:none;background:none;text-shadow:none}
.faction-sigil img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
@media(max-width:760px){.faction-sigil{width:58px;height:72px}}

/* Keep the shared header identical to the other site pages. */
.main-nav{gap:10px;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}
.main-nav a{padding:10px 14px;font-size:.98rem}
@media(max-width:760px){
  .topbar-inner{padding:12px 14px}
  .main-nav a{border-radius:12px}
}