/* page.css — shared styles for trivia.co.ke content pages */
:root{
  --night:#0C1626; --night-2:#101F35; --panel:#16273F; --panel-2:#1b3050; --panel-edge:#243a58;
  --gold:#E7A33E; --gold-soft:#F3CE87; --glacier:#5BB8B0; --bone:#EDE6D6; --muted:#8598B0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',system-ui,sans-serif;color:var(--bone);
  background:radial-gradient(120% 60% at 50% -10%, #1a2f4d 0%, var(--night-2) 40%, var(--night) 100%);
  min-height:100vh;display:flex;flex-direction:column;line-height:1.65;
}
a{color:var(--glacier);text-decoration:none}
a:hover{text-decoration:underline}

.site-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;background:rgba(12,22,38,.85);backdrop-filter:blur(8px);z-index:5;
}
.brand{display:flex;align-items:center;gap:.5em;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;color:var(--bone)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.back{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(28px,6vw,56px) 22px 60px}

.eyebrow{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--glacier);margin-bottom:12px}
h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2rem,6vw,3rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
.updated{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:32px}

h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.2rem,3.4vw,1.5rem);color:var(--gold-soft);margin:34px 0 10px}
h3{font-size:1.05rem;font-weight:600;color:var(--bone);margin:22px 0 6px}
p{margin:0 0 14px;color:#d5dae4}
ul{margin:0 0 16px 20px;color:#d5dae4}
li{margin:6px 0}
strong{color:var(--bone)}

.lead{font-size:1.08rem;color:var(--bone);margin-bottom:24px}

.card{
  background:linear-gradient(165deg,var(--panel-2),var(--night-2));
  border:1px solid var(--panel-edge);border-radius:16px;padding:24px;margin:22px 0;
}
.btn{
  display:inline-flex;align-items:center;gap:.5em;margin-top:8px;
  padding:12px 22px;border-radius:999px;background:var(--gold);color:#1a1205;
  font-weight:600;font-size:.95rem;text-decoration:none;
}
.btn:hover{text-decoration:none;filter:brightness(1.05)}

.site-foot{
  border-top:1px solid rgba(255,255,255,.06);background:var(--night);
  padding:26px 22px;text-align:center;
}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-bottom:14px;font-size:.88rem}
.site-foot .fine{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.1em;color:var(--muted)}