:root{
  --ink:#0b1220;
  --muted:#4b5563;
  --line:#e5e7eb;
  --bg:#ffffff;
  /* Brand palette pulled from logo */
  --brand-blue:#0e4ea0;
  --brand-pink:#e4147e;
  --brand-orange:#f59e0b;
  --brand-red:#ef4444;
  --brand-magenta:#d946ef;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}
a{color:var(--brand-blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin:0 auto}

/* Header / Nav */
header.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem}
.brand{display:flex;gap:.8rem;align-items:center}
.brand img{height:54px;width:auto;border-radius:6px}
nav{display:flex;gap:.2rem}
nav a{padding:.55rem .8rem;border-radius:10px;font-weight:600;color:#0b1220;position:relative}
nav a::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.35rem;height:3px;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-red));transition:opacity .2s}
nav a.active, nav a:hover{background:#f9fafb}
nav a.active::after, nav a:hover::after{opacity:1}

.hero{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2rem 0}
.hero p{color:var(--muted);max-width:70ch}

.section{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.kicker{color:var(--brand-blue);text-transform:uppercase;font-weight:800;letter-spacing:.14em;font-size:.76rem}
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(12,1fr)}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}
@media (max-width:900px){.span-8,.span-6,.span-4{grid-column:span 12}}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.btn{display:inline-block;background:linear-gradient(135deg,var(--brand-pink),var(--brand-orange));color:#fff;padding:.65rem 1rem;border-radius:12px;font-weight:700}
.btn.alt{background:linear-gradient(135deg,#10b981,#34d399)}
.btn:hover{filter:brightness(1.05)}
.footer{padding:2rem 0;color:var(--muted)}

.header-graphic{width:100%;border-radius:14px;border:1px solid var(--line);background:#fafafa;overflow:hidden}
.header-graphic img{display:block;width:100%;height:auto}

.character{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.character img{max-height:600px;height:auto;width:auto;max-width:520px;border-radius:12px;border:1px solid var(--line);background:#fafafa}
.character .text{flex:1 1 320px;min-width:280px}
ul.inline{display:flex;gap:.6rem;list-style:none;margin:.5rem 0 0 0;padding:0;flex-wrap:wrap}
ul.inline li{background:#f3f4f6;border:1px solid var(--line);padding:.3rem .6rem;border-radius:999px}
.notice{background:#fff7ed;border:1px solid #fed7aa;padding:.8rem;border-radius:12px;color:#9a3412}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.7rem;border-bottom:1px solid var(--line);text-align:left}