:root{
  --container:1160px;
  --bg-0:#090d1a; --bg-1:#0b1122; --surface:#0f1630; --border:#1a2550;
  --text-1:#e8ecfa; --text-2:#a9b3d4; --muted:#8a93ba;
  --link:#9ec5ff;
  --grad-accent:linear-gradient(135deg,#7cc8fb 0%,#6aa5f6 33%,#b29af6 66%,#f28ab9 100%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg-0); color:var(--text-1); line-height:1.65}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{color:var(--link)}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px}
.tiny{font-size:12px; color:var(--muted)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand .dot{width:10px; height:10px; border-radius:50%; background:#6aa5f6; box-shadow:0 0 12px #6aa5f6}

/* Header */
.site-header{position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, color-mix(in oklab,var(--bg-1) 98%, transparent), transparent);
  border-bottom:1px solid color-mix(in oklab, var(--border) 70%, transparent);
  backdrop-filter:saturate(120%) blur(8px)
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.nav-list{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.nav-list a{color:var(--text-2); font-weight:600}
.nav-list a[aria-current="page"]{color:var(--text-1)}
.toggle{border:1px solid var(--border); background:var(--surface); color:var(--text-2); border-radius:999px; padding:8px 12px; font-weight:700}
.icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--text-2)}
.icon-btn:hover{color:var(--text-1)}

/* Homepage gradient hero */
.site-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 60% at 10% 10%, #1a2550 0%, transparent 60%),
    radial-gradient(60% 60% at 90% 20%, #312b7a 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 100%, #45255e 0%, transparent 60%),
    linear-gradient(180deg, #0b1122, #090d1a);
  border-bottom:1px solid var(--border);
}
.site-hero .inner{min-height:54vh; display:grid; align-items:center; text-align:center; padding:72px 0}
.site-hero h1{font-family:Newsreader,serif; font-weight:800;
  font-size:clamp(36px,6.5vw,64px); line-height:1.05; letter-spacing:-.01em;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 12px
}
.site-hero .tagline{color:var(--text-2); font-size:clamp(16px,2.2vw,20px); margin:0 0 18px}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text-1); font-weight:700}
.btn:hover{border-color:color-mix(in oklab, var(--border) 80%, white 20%)}

/* Feature grid */
.feature-grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin:28px 0 16px}
.card{grid-column:span 6; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:color-mix(in oklab, var(--bg-1) 92%, black 8%)}
.card .thumb{height:180px; background:var(--bg-1); background-size:cover; background-position:center; position:relative}
.card .body{padding:14px}
.card h3{margin:0 0 6px; font-size:1.15rem}
.card p{margin:0; color:var(--text-2)}
@media (max-width:860px){ .card{grid-column:span 12} }

/* Option B Hero for inner pages */
.hero-banner{position:relative; min-height:46vh; background-image: var(--hero); background-size:cover; background-position:center; border-bottom:1px solid var(--border)}
.hero-banner::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.46))}
.hero-inner{position:relative; display:grid; place-items:center; text-align:center; padding:80px 24px}
.hero-inner h1{font-family:Newsreader, serif; font-weight:800; font-size:clamp(32px,5.6vw,54px); letter-spacing:-.01em; margin:0 0 8px}
.hero-inner .sub{color:var(--text-2); margin:0; font-size:clamp(16px,2.2vw,18px)}

/* Article */
.article{max-width:780px; margin:0 auto; padding:24px}
.article h1{font-family:Newsreader, serif; font-weight:800; font-size:clamp(28px,4.8vw,44px); line-height:1.05; letter-spacing:-.01em; margin:8px 0 6px;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.meta{font-size:.92rem; color:var(--text-2); margin-bottom:18px}
.lede{font-size:1.1rem}
.lede.dropcap:first-letter{float:left; font-family:Newsreader, serif; font-size:3.8rem; line-height:.86; margin-right:.2em; font-weight:800; color:#7cc8fb}
.subhead{font-family:Newsreader, serif; font-weight:700; font-size:1.25rem; margin:28px 0 10px}
.pullquote{margin:28px 0; font-family:Newsreader, serif; font-size:1.35rem; font-weight:700; color:#b29af6; border-left:3px solid #7cc8fb; padding-left:14px}

/* Footer (only Guardrails under Safety, others remain in footer brand/social area) */
.site-footer{margin-top:48px; border-top:1px solid var(--border); padding:28px 0 48px; color:var(--muted);
  background:linear-gradient(180deg, var(--bg-1), color-mix(in oklab, var(--bg-1) 90%, black 10%))}
.foot-grid{display:grid; gap:24px; grid-template-columns:1fr}
.pill{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-1); font-weight:700}
.pill:hover{ border-color:color-mix(in oklab, var(--border) 80%, white 20%) }

/* Socials */
.socials{ display:flex; gap:14px; align-items:center; margin-top:10px }
.socials a{ color:var(--text-2); display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--border); border-radius:10px; background:var(--surface) }
.socials a:hover{ color:var(--text-1) }

/* Search modal */
.search-modal{ position:fixed; inset:0; display:none; z-index:70 }
.search-modal[open]{ display:block }
.search-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px) }
.search-panel{ position:absolute; left:50%; top:8%; transform:translateX(-50%); width:min(820px, 92vw); background:var(--bg-1); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 20px 60px rgba(0,0,0,.35) }
.search-row{ display:flex; gap:10px; align-items:center; padding:6px 6px 10px 6px; border-bottom:1px solid var(--border) }
.search-input{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-1); font:inherit }
.results{ max-height:60vh; overflow:auto; padding:10px 6px 6px }
.result a{ display:block; padding:10px 8px; border-radius:10px; border:1px solid transparent }
.result a:hover{ border-color:var(--border); background:color-mix(in oklab, var(--bg-1) 92%, black 8%) }
.result .title{ font-weight:700 }
.result .desc{ color:var(--text-2); font-size:.95rem }