:root{--bg:#2e3b43;--bg-accent:#34464e;--text:#eaf6ff;--muted:#b6c8d3;--accent:#4a7fc7;--brand-yellow:#FFD23F;--brand-pink:#FF6B9D;--brand-teal:#5FD3C4;--card-bg:rgba(255,255,255,0.03);--card-border:rgba(74,127,199,0.08);--panel-shadow:0 8px 20px rgba(10,20,30,0.25)}
*{box-sizing:border-box}
html,body{height:100%}
.body-fix{}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:28px}
.site-header{padding:28px 0;background:linear-gradient(90deg,var(--bg),var(--bg-accent));border-bottom:1px solid rgba(255,255,255,0.02)}
.site-header .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
/* make brand a block so the logo centers cleanly and the tagline sits directly beneath */
.brand{display:block;margin:0 auto;text-decoration:none;color:inherit;text-align:center}
/* Larger site logo to match full artwork; responsive scaling */
/* shrink logo by 20% from original sizes */
.logo{width:448px;height:auto;max-width:80%;display:block;margin:0 auto 6px}
.site-title{font-weight:700;font-size:20px}
.tagline{margin:6px 0 0;color:var(--muted);display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{padding:18px;border-radius:10px;border:1px solid var(--card-border);background:linear-gradient(180deg,rgba(74,127,199,0.02),rgba(8,16,22,0.45));box-shadow:var(--panel-shadow)}
.card h3{margin:0 0 8px 0;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px}
.site-footer{padding:22px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:32px}

/* Link styles: improved contrast, weight, and clear hover/focus indicators */
.brand .site-title { color: var(--text); }
.brand .site-title { color: var(--text); }
a, a:link, a:visited { color: var(--accent); text-decoration: none; font-weight: 700; }
a:hover, a:focus { color: var(--brand-teal); text-decoration: underline; outline: 3px solid rgba(79, 153, 215,0.12); outline-offset: 2px; border-radius: 3px; }
.card a { color: var(--accent); }
.card h3 a { color: var(--accent); }
.card a { color: var(--accent); }
.card h3 a { color: var(--accent); }

/* small brand accent under headings */
.site-header { background: linear-gradient(90deg,var(--bg),var(--bg-accent)); }
.brand { color: inherit; }
/* remove visual hover/focus for the logo link specifically */
.brand:hover, .brand:focus { opacity: 1; text-decoration: none; outline: none; }
.brand, .brand:link, .brand:visited { color: inherit; }

@media (max-width:980px){.wrap{padding:20px}.logo{width:384px;max-width:86%}}
@media (max-width:780px){.wrap{padding:16px}.logo{width:288px;max-width:86%}}
@media (max-width:420px){.logo{width:208px;max-width:90%}}

/* footer face icon */
.site-footer .wrap{display:flex;align-items:center;justify-content:center;gap:8px}
.footer-face{width:28px;height:auto;display:inline-block;margin:0;padding:0;vertical-align:middle}