/* ============================================================
   Binomial Probability Calculator — Design System
   Theme: "field notebook meets stats lab" — graph-paper texture,
   navy + mustard palette, serif headings / mono for numbers.
   ============================================================ */

:root{
  --bg:            #F2F5F3;
  --bg-panel:      #FFFFFF;
  --ink:           #16324F;
  --ink-soft:      #3C5470;
  --ink-faint:     #7488A0;
  --accent:        #E1A33E;
  --accent-dark:   #B87F26;
  --accent-2:      #E4572E;
  --line:          #D6DEDA;
  --line-strong:   #B9C4C0;
  --success:       #3F7D58;
  --code-bg:       #0F2036;
  --code-ink:      #DCE6EE;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 1px 0 rgba(22,50,79,0.06), 0 8px 24px -12px rgba(22,50,79,0.18);
  --maxw: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:"Literata", Georgia, serif;
  color:var(--ink);
  line-height:1.22;
  margin:0 0 .5em;
  font-weight:600;
}
h1{ font-size:clamp(2rem,4vw,2.9rem); font-weight:650; letter-spacing:-.01em; }
h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.2em; }
h3{ font-size:1.25rem; margin-top:1.6em; }
p{ margin:0 0 1.1em; color:var(--ink-soft); max-width:70ch; }
a{ color:var(--accent-dark); text-decoration-thickness:1.5px; text-underline-offset:2px; }
a:hover{ color:var(--accent-2); }
strong{ color:var(--ink); }
code, .mono{ font-family:"IBM Plex Mono", monospace; }

ul,ol{ color:var(--ink-soft); max-width:70ch; padding-left:1.3em; }
li{ margin-bottom:.45em; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- Graph-paper texture ---------- */
.graph-bg{
  background-image:
    linear-gradient(rgba(22,50,79,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,50,79,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg-panel);
  position:sticky; top:0; z-index:40;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.brand-mark{
  width:36px; height:36px; border-radius:8px;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Literata",serif; font-weight:700; font-size:1.05rem;
  flex:none;
}
.brand-name{ font-family:"Literata",serif; font-weight:650; font-size:1.08rem; }
.brand-name span{ color:var(--accent-dark); }

.main-nav{ display:flex; align-items:center; gap:22px; }
.main-nav a{
  color:var(--ink-soft); text-decoration:none; font-size:.96rem; font-weight:500;
}
.main-nav a:hover{ color:var(--accent-2); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; }

@media (max-width:760px){
  .main-nav{
    position:fixed; inset:60px 0 auto 0; background:var(--bg-panel);
    flex-direction:column; align-items:flex-start; padding:14px 24px 20px;
    border-bottom:1px solid var(--line); gap:14px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:all .18s ease;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding:56px 0 20px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:start;
}
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

.eyebrow-plain{ color:var(--accent-dark); font-weight:600; font-size:.95rem; margin-bottom:.6em; }
.hero p.lead{ font-size:1.12rem; }

.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.pill{
  border:1px solid var(--line-strong); border-radius:999px;
  padding:6px 13px; font-size:.85rem; color:var(--ink-soft); background:#fff;
}

/* ---------- Calculator card ---------- */
.calc-card{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  padding:22px 22px 26px;
}
.calc-card h2{ margin-top:0; font-size:1.3rem; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.86rem; font-weight:600; color:var(--ink); }
.field .hint{ font-size:.78rem; color:var(--ink-faint); }
.field input[type=number], .field select{
  font-family:"IBM Plex Mono", monospace; font-size:1rem;
  padding:10px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, button:focus-visible, a:focus-visible{
  outline:3px solid #E1A33E66; outline-offset:1px;
}

.p-toggle{ display:flex; border:1px solid var(--line-strong); border-radius:var(--radius-sm); overflow:hidden; }
.p-toggle button{
  flex:1; border:none; background:#fff; padding:9px; font-size:.82rem; cursor:pointer; color:var(--ink-soft);
  font-family:"IBM Plex Sans",sans-serif;
}
.p-toggle button.active{ background:var(--ink); color:#fff; }

.preset-row{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.preset-btn{
  border:1px dashed var(--line-strong); background:#fff; border-radius:999px;
  padding:6px 12px; font-size:.8rem; color:var(--ink-soft); cursor:pointer;
}
.preset-btn:hover{ border-color:var(--accent-dark); color:var(--accent-dark); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--radius-sm); padding:12px 20px;
  font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:.97rem;
  cursor:pointer; text-decoration:none;
}
.btn-primary{ background:var(--ink); color:#fff; width:100%; }
.btn-primary:hover{ background:#0F263F; }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent-dark); color:var(--accent-dark); }
.btn-small{ padding:7px 13px; font-size:.82rem; }

.result-box{
  margin-top:18px; border-top:2px solid var(--ink); padding-top:16px;
}
.result-figure{
  font-family:"IBM Plex Mono", monospace; font-size:2.3rem; font-weight:600; color:var(--ink);
  line-height:1.1;
}
.result-sub{ color:var(--ink-faint); font-size:.88rem; margin-top:2px; }
.result-sentence{ margin-top:10px; font-size:.96rem; color:var(--ink-soft); }

.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.stat-box{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; }
.stat-box .k{ font-size:.74rem; color:var(--ink-faint); text-transform:none; }
.stat-box .v{ font-family:"IBM Plex Mono",monospace; font-size:1.1rem; color:var(--ink); }

.steps{ margin-top:16px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.steps ol{ margin:0; padding-left:1.1em; }
.steps li{ font-family:"IBM Plex Mono",monospace; font-size:.88rem; color:var(--ink-soft); margin-bottom:.6em; }

.chart-wrap{ margin-top:18px; }
#distChart{ width:100%; height:190px; display:block; }

.table-toggle{ margin-top:10px; }
.dist-table-wrap{ max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); margin-top:10px; display:none; }
.dist-table-wrap.open{ display:block; }
table.dist-table{ width:100%; border-collapse:collapse; font-family:"IBM Plex Mono",monospace; font-size:.83rem; }
table.dist-table th{ position:sticky; top:0; background:var(--ink); color:#fff; text-align:left; padding:8px 10px; font-weight:600; }
table.dist-table td{ padding:6px 10px; border-top:1px solid var(--line); }
table.dist-table tr.hit{ background:#FBF0DA; }

.result-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.error-msg{ color:var(--accent-2); font-size:.88rem; margin-top:10px; display:none; }

/* ---------- Ad slots ---------- */
.ad-slot{
  border:1px dashed var(--line-strong); border-radius:var(--radius-sm);
  padding:14px; text-align:center; color:var(--ink-faint); font-size:.8rem;
  margin:34px 0; background:#fff;
}

/* ---------- Article ---------- */
.article{ padding:20px 0 10px; }
.article h2:first-of-type{ margin-top:0; }
.article blockquote{
  border-left:3px solid var(--accent); margin:1.4em 0; padding:.3em 0 .3em 1em;
  color:var(--ink-soft); font-style:italic;
}
.article .callout{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--ink);
  border-radius:var(--radius-sm); padding:14px 16px; margin:1.4em 0;
}
.article table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.92rem; }
.article table th{ background:var(--ink); color:#fff; text-align:left; padding:8px 10px; }
.article table td{ padding:8px 10px; border-top:1px solid var(--line); color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:16px 0; font-family:"Literata",serif; font-size:1.05rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq-q .icon{ font-family:"IBM Plex Mono",monospace; color:var(--accent-dark); flex:none; }
.faq-a{ display:none; padding:0 0 16px; color:var(--ink-soft); max-width:68ch; }
.faq-item.open .faq-a{ display:block; }

/* ---------- Cards / grids ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin:22px 0; }
.post-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px; text-decoration:none; display:block; box-shadow:var(--shadow-card);
}
.post-card:hover{ border-color:var(--accent-dark); }
.post-card .tag{ font-size:.76rem; color:var(--accent-dark); font-weight:600; }
.post-card h3{ margin:.4em 0 .3em; font-size:1.08rem; color:var(--ink); }
.post-card p{ font-size:.9rem; margin:0; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:70px; padding:38px 0 30px; background:var(--bg-panel); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:"IBM Plex Sans",sans-serif; font-size:.82rem; color:var(--ink-faint); margin-bottom:.8em; font-weight:600; }
.footer-grid a{ display:block; color:var(--ink-soft); text-decoration:none; font-size:.92rem; margin-bottom:.55em; }
.footer-grid a:hover{ color:var(--accent-2); }
.footer-bottom{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:.82rem; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Post / legal page layout ---------- */
.post-header{ padding:44px 0 10px; }
.post-header .tag{ color:var(--accent-dark); font-weight:600; font-size:.9rem; }
.post-meta{ color:var(--ink-faint); font-size:.88rem; margin-bottom:1.4em; }
.post-body h2{ margin-top:1.8em; }
.breadcrumb{ font-size:.85rem; color:var(--ink-faint); padding:18px 0 0; }
.breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent-2); }

.cta-box{
  background:var(--ink); color:#fff; border-radius:var(--radius-md);
  padding:26px 28px; margin:2.4em 0; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.cta-box p{ color:#CBD8E4; margin:0; max-width:50ch; }
.cta-box .btn-primary{ background:var(--accent); color:var(--ink); width:auto; }
.cta-box .btn-primary:hover{ background:var(--accent-dark); color:#fff; }

@media (max-width:600px){
  .field-row{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr; }
  .cta-box{ flex-direction:column; align-items:flex-start; }
}