@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root{
  --felt: #0B3D2E;
  --felt-dark: #062920;
  --felt-line: #145038;
  --parchment: #F1E9D8;
  --parchment-dim: #E4D9C1;
  --ink: #201C12;
  --gold: #C9A227;
  --gold-bright: #E8C660;
  --red: #A6303D;
  --black: #16181C;
  --cream: #EDE6D6;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(ellipse at top, var(--felt) 0%, var(--felt-dark) 70%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:'Libre Franklin', sans-serif;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 3px);
  pointer-events:none;
  z-index:0;
}

a{color:var(--gold-bright);}

/* ---------- Site nav ---------- */
.site-nav{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  max-width:900px; margin:0 auto; padding:18px 20px;
  flex-wrap:wrap; gap:10px;
}
.site-nav .brand{
  font-family:'Bebas Neue', sans-serif;
  font-size:22px; letter-spacing:0.05em;
  color:var(--parchment);
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.site-nav .brand .chip-dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 8px var(--gold-bright);
}
.site-nav .links{display:flex; gap:4px; flex-wrap:wrap;}
.site-nav .links a{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:rgba(237,230,214,0.65); text-decoration:none;
  padding:8px 12px; border-radius:5px;
  transition:color 0.15s ease, background 0.15s ease;
}
.site-nav .links a:hover{color:var(--gold-bright); background:rgba(255,255,255,0.05);}
.site-nav .links a.current{color:var(--gold-bright); background:rgba(255,255,255,0.06);}

/* ---------- Page/article content ---------- */
.page-wrap{max-width:720px; margin:0 auto; padding:8px 20px 60px; position:relative; z-index:1;}

.page-hero{text-align:center; margin:28px 0 32px;}
.page-hero .eyebrow{
  font-family:'Space Mono', monospace; letter-spacing:0.3em; font-size:11px;
  color:var(--gold-bright); text-transform:uppercase; margin-bottom:8px;
}
.page-hero h1{
  font-family:'Bebas Neue', sans-serif; font-size:46px; letter-spacing:0.03em;
  margin:0; color:var(--parchment); line-height:1.05;
  text-shadow:0 2px 0 rgba(0,0,0,0.3);
}
.page-hero p{color:var(--cream); opacity:0.78; font-size:15px; max-width:520px; margin:12px auto 0; line-height:1.55;}

.article-block{
  background:var(--parchment); color:var(--ink); border-radius:6px;
  padding:24px 26px; margin-bottom:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.05);
}
.article-block h2{
  font-family:'Bebas Neue', sans-serif; font-size:27px; letter-spacing:0.03em;
  margin:0 0 12px; color:var(--felt-dark);
}
.article-block h3{
  font-family:'Libre Franklin', sans-serif; font-weight:700; font-size:14.5px;
  text-transform:uppercase; letter-spacing:0.04em; margin:20px 0 8px; color:var(--red);
}
.article-block p{font-size:15px; line-height:1.7; margin:0 0 12px;}
.article-block p:last-child{margin-bottom:0;}
.article-block ul, .article-block ol{font-size:15px; line-height:1.7; margin:0 0 12px; padding-left:22px;}
.article-block li{margin-bottom:6px;}
.article-block .formula-box{
  background:var(--felt-dark); color:var(--gold-bright); font-family:'Space Mono', monospace;
  font-size:14px; padding:12px 16px; border-radius:4px; border:1px solid var(--felt-line);
  margin:10px 0; overflow-x:auto; white-space:nowrap;
}

.val-pill{display:inline-block; padding:2px 9px; border-radius:20px; font-weight:700; font-family:'Space Mono', monospace; font-size:12.5px;}
.val-pos{background:#dcecdf; color:#1e6b3b;}
.val-zero{background:#e7e2d4; color:#5c5540;}
.val-neg{background:#f3dcdf; color:#a6303d;}

.hilo-table{width:100%; border-collapse:collapse; font-family:'Space Mono', monospace; font-size:13px; margin-top:6px;}
.hilo-table th{
  text-align:left; font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--felt-dark);
  border-bottom:2px solid var(--felt-dark); padding:8px 8px;
}
.hilo-table td{padding:10px 8px; border-bottom:1px solid rgba(0,0,0,0.1); font-size:14px;}

.cta-row{text-align:center; margin:26px 0;}
.btn-gold-link{
  display:inline-block; font-family:'Bebas Neue', sans-serif; font-size:19px; letter-spacing:0.05em;
  padding:13px 30px; border-radius:4px; text-decoration:none;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:var(--felt-dark);
  box-shadow:0 3px 0 #8a7418;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; z-index:1;
  max-width:900px; margin:0 auto; padding:20px 20px 40px;
  text-align:center;
}
.site-footer .links{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:10px;
}
.site-footer a{
  font-family:'Space Mono', monospace; font-size:11.5px; color:rgba(237,230,214,0.55);
  text-decoration:none;
}
.chip-icon{vertical-align:-2px; margin-right:4px;}
.site-footer a:hover{color:var(--gold-bright);}
.site-footer .fineprint{
  font-family:'Libre Franklin', sans-serif; font-size:12px; color:rgba(237,230,214,0.4);
  max-width:520px; margin:0 auto; line-height:1.6;
}

/* ---------- Cookie consent banner ---------- */
#cookieBanner{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--felt-dark); border-top:1px solid var(--felt-line);
  padding:14px 18px; display:none;
  box-shadow:0 -6px 20px rgba(0,0,0,0.4);
}
#cookieBanner.show{display:flex;}
#cookieBanner{align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
#cookieBanner p{
  margin:0; font-size:12.5px; color:rgba(237,230,214,0.75); max-width:520px; line-height:1.5;
}
#cookieBanner a{color:var(--gold-bright);}
#cookieBanner .btn-row{display:flex; gap:8px;}
#cookieBanner button{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase;
  padding:9px 16px; border-radius:4px; cursor:pointer; border:1px solid rgba(237,230,214,0.3);
  background:transparent; color:var(--cream);
}
#cookieBanner button.accept{background:var(--gold); color:var(--felt-dark); border-color:var(--gold-bright); font-weight:700;}

@media (max-width:600px){
  .page-hero h1{font-size:36px;}
  .site-nav{justify-content:center; text-align:center;}
}