/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  /* palette: restrained editorial/reference-site feel — ink navy + brass accent */
  --ink:        #16213E;   /* headings, primary text */
  --ink-soft:   #3C4A6B;   /* secondary text */
  --muted:      #6B7686;   /* tertiary text, captions */
  --paper:      #FFFFFF;
  --paper-alt:  #F6F7F9;   /* section backgrounds */
  --line:       #E3E6EC;   /* borders/dividers */
  --accent:     #A9762F;   /* brass — links, active states, small emphasis */
  --accent-deep:#8A5F22;
  --cta:        #16213E;   /* primary buttons: ink, not accent — restrained */
  --cta-text:   #FFFFFF;
  --success:    #2F6D4F;
  --danger:     #A6402F;
  --focus:      #2F5D8A;

  /* type */
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(22,33,62,0.06);
  --shadow-md: 0 4px 16px rgba(22,33,62,0.08);
  --container: 1360px;
}

[data-theme="dark"]{
  --ink:        #E8ECF5;
  --ink-soft:   #B9C4D6;
  --muted:      #8593AA;
  --paper:      #0F1620;
  --paper-alt:  #161F2C;
  --line:       #2A3547;
  --accent:     #D9A653;
  --accent-deep:#E8BD74;
  --cta:        #D9A653;
  --cta-text:   #0F1620;
  --success:    #4CAE84;
  --danger:     #E0776A;
  --focus:      #6FA8DC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
}
[data-theme="dark"] .btn-primary:hover{ background:#E8BD74; }
[data-theme="dark"] .brand-mark rect{ stroke:var(--ink) !important; }
[data-theme="dark"] .brand-mark path{ stroke:var(--accent) !important; }
[data-theme="dark"] .menu-toggle svg path{ stroke:var(--ink) !important; }

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{
  margin:0; width:100%; max-width:100%; overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--ink);
  line-height:1.25;
  font-weight:600;
  margin:0 0 0.5em;
}
h1{font-size:clamp(30px,4.4vw,48px); font-weight:700; line-height:1.18;}
h2{font-size:clamp(24px,3.2vw,34px);}
h3{font-size:clamp(19px,2.4vw,24px);}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-deep); text-decoration:underline;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.mono{font-family:var(--font-mono);}
img{max-width:100%; display:block;}

.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
@media (min-width:640px){ .container{padding:0 32px;} }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:16px; flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand-mark{width:32px;height:32px;flex:none;}
.brand-text{font-family:var(--font-heading); font-weight:700; font-size:20px; color:var(--ink); white-space:nowrap;}
.brand-text a{color:inherit; text-decoration:none;}

.main-nav{display:none; align-items:center; gap:28px; flex-wrap:wrap;}
.main-nav a{color:var(--ink-soft); font-size:15px; font-weight:500;}
.main-nav a:hover{color:var(--accent); text-decoration:none;}
@media (min-width:960px){ .main-nav{display:flex;} }
@media (max-width:959px){
  .main-nav{display:none !important;}
  .main-nav .lang-menu{display:none !important;}
}

.header-right{display:flex; align-items:center; gap:10px;}
@media (max-width:380px){
  .header-right{gap:6px;}
  .brand-text{font-size:17px;}
}

.lang-switch{position:relative;}
.lang-switch-btn{
  display:flex; align-items:center; gap:6px;
  background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px 12px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; min-height:40px;
}
.lang-switch-btn:hover{border-color:var(--accent); color:var(--ink);}
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); min-width:180px; padding:6px; z-index:60;
}
.lang-menu.open{display:block;}
.lang-menu a{
  display:flex; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:var(--radius-sm); color:var(--ink-soft); font-size:14px;
}
.lang-menu a:hover{background:var(--paper-alt); color:var(--ink); text-decoration:none;}
.lang-menu a.current{color:var(--accent); font-weight:600;}

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); cursor:pointer;
}
@media (min-width:960px){ .menu-toggle{display:none;} }

.mobile-nav{display:none !important; border-top:1px solid var(--line); padding:12px 0;}
.mobile-nav.open{display:block !important;}
.mobile-nav a{display:block; padding:12px 4px; color:var(--ink-soft); font-size:15.5px; border-bottom:1px solid var(--line);}
.mobile-nav a:last-child{border-bottom:none;}
@media (min-width:960px){
  .mobile-nav, .mobile-nav.open{display:none !important;}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; min-height:48px; line-height:1;
  font-family:var(--font-body);
}
.btn-primary{background:var(--cta); color:var(--cta-text);}
.btn-primary:hover{background:#0E1730; color:var(--cta-text); text-decoration:none;}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}
.btn-sm{padding:9px 16px; min-height:40px; font-size:13.5px;}

/* ==========================================================================
   Hero / sections
   ========================================================================== */
.section{padding:56px 0;}
.section-alt{background:var(--paper-alt);}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; display:inline-block;
}
.hero{padding:52px 0 40px;}
.hero p.lead{font-size:17.5px; max-width:680px; color:var(--ink-soft);}
.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 6px;}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm);
}
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
@media (min-width:720px){ .grid-2{grid-template-columns:1fr 1fr;} .grid-3{grid-template-columns:1fr 1fr 1fr;} }

.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; color:var(--accent); font-size:20px; flex:none;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin-top:10px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink); color:#C9D1E0; padding:48px 0 24px; margin-top:64px;}
.site-footer a{color:#C9D1E0;}
.site-footer a:hover{color:#FFFFFF;}
.footer-grid{display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:32px;}
@media (min-width:720px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} }
.footer-col h4{color:#FFFFFF; font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col li{margin-bottom:9px; font-size:14.5px;}
.footer-brand{font-family:var(--font-heading); font-size:19px; color:#fff; font-weight:700; margin-bottom:10px;}
.footer-desc{font-size:14px; color:#9AA6BC; max-width:320px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:20px;
  display:flex; flex-direction:column; gap:10px; font-size:13px; color:#8996AF;
}
@media (min-width:720px){ .footer-bottom{flex-direction:row; justify-content:space-between; align-items:center;} }
.footer-bottom a{color:#8996AF;}

/* ==========================================================================
   K-Map tool component (embedded in pages)
   ========================================================================== */
.tool-panel{background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
@media (min-width:640px){ .tool-panel{padding:28px;} }
.tool-panel-title{
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--accent); margin-bottom:16px; font-weight:600;
}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.tab{
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
  padding:9px 14px; border-radius:var(--radius-sm); font-size:13.5px; cursor:pointer; min-height:40px;
}
.tab:hover{border-color:var(--accent); color:var(--ink);}
.tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.tool-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px;}
.field-label{font-size:13px; color:var(--muted); font-family:var(--font-mono);}
select, input[type=text]{
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  padding:10px 12px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:14px; min-height:44px;
}
input[type=text]{width:100%;}
select:focus, input:focus{outline:2px solid var(--focus); outline-offset:1px;}

.tiles{display:flex; gap:22px; flex-wrap:wrap; overflow-x:auto; padding-bottom:4px;}
.tile-label{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:6px;}
table.kmap{border-collapse:separate; border-spacing:3px;}
table.kmap th{font-family:var(--font-mono); font-size:11px; color:var(--muted); font-weight:500; padding:2px 6px;}
table.kmap th.axis-label{color:var(--accent); font-size:11px;}
td.kcell{
  width:48px; height:44px; text-align:center; vertical-align:middle;
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  font-family:var(--font-mono); font-size:16px; font-weight:600; cursor:pointer; position:relative; color:var(--ink);
  min-width:44px;
}
td.kcell:hover{border-color:var(--accent);}
td.kcell .idx{position:absolute; top:2px; left:5px; font-size:9px; color:var(--muted); font-weight:400;}
td.kcell.val-1{color:var(--success);}
td.kcell.val-x{color:var(--accent);}
td.kcell.val-0{color:var(--muted);}

table.tt{border-collapse:collapse; width:100%; font-family:var(--font-mono); font-size:13.5px;}
table.tt th{text-align:center; color:var(--accent); padding:8px 6px; border-bottom:2px solid var(--line); font-weight:600;}
table.tt td{text-align:center; padding:7px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
table.tt td.out{cursor:pointer; font-weight:600;}
table.tt td.out.v1{color:var(--success);}
table.tt td.out.v0{color:var(--muted);}
table.tt td.outX{color:var(--accent);}

.expr-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px; font-family:var(--font-mono); font-size:18px; color:var(--ink); word-break:break-word;
}
.legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.legend-item{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); padding:6px 10px; border-radius:6px;}
.legend-swatch{width:12px; height:12px; border-radius:3px; flex:none;}

.output-toggle{display:flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.output-toggle button{border:none; border-radius:0; background:var(--paper); min-height:40px; padding:0 16px;}
.output-toggle button.active{background:var(--ink); color:#fff; font-weight:600;}

svg.circuit{width:100%; height:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);}
svg.circuit text{font-family:var(--font-mono); fill:var(--ink);}
.gate-rect{fill:var(--paper-alt); stroke:var(--ink); stroke-width:1.4;}
.gate-label{fill:var(--ink); font-size:11px; font-weight:600;}
.wire{stroke:var(--muted); stroke-width:1.3; fill:none;}
.not-bubble{fill:var(--paper); stroke:var(--accent); stroke-width:1.3;}

.foot-note{color:var(--muted); font-size:12.5px; margin-top:10px; line-height:1.5;}
.error-msg{color:var(--danger); font-size:13.5px; font-family:var(--font-mono); margin-top:8px;}
.pi-essential{color:var(--success); font-weight:600;}
.pi-chosen{color:var(--accent); font-weight:600;}
.pi-redundant{color:var(--muted);}

/* ==========================================================================
   Blog
   ========================================================================== */
.post-meta{font-size:13px; color:var(--muted); margin-bottom:8px;}
.article-hero .container{max-width:760px;}
.post-body{max-width:760px; margin:0 auto; font-size:18px; line-height:1.85;}
.post-body p{margin:0 0 1.35em;}
.post-body > p:first-of-type{font-size:1.14em; color:var(--ink); line-height:1.75;}
.post-body h2{
  margin-top:2.2em; margin-bottom:0.7em; padding-bottom:0.45em;
  border-bottom:2px solid var(--line); font-size:clamp(22px,3vw,28px);
  scroll-margin-top:90px;
}
.post-body h3{margin-top:1.8em; margin-bottom:0.5em; font-size:clamp(18px,2.4vw,21px); scroll-margin-top:90px;}
.post-body h4{margin-top:1.4em; margin-bottom:0.45em; font-size:16.5px; font-weight:600; color:var(--ink); scroll-margin-top:90px;}
.post-body ul, .post-body ol{color:var(--ink-soft); padding-left:1.4em; margin:0 0 1.35em;}
.post-body li{margin-bottom:0.55em; line-height:1.75;}
.post-body a{text-decoration:underline; text-decoration-color:rgba(169,118,47,0.4); text-underline-offset:3px;}
.post-body a:hover{text-decoration-color:var(--accent);}
.post-body table.tt{margin:1.6em 0;}
.post-body .expr-box{margin:1.3em 0;}
.post-body strong{color:var(--ink);}

.toc{background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px 26px; margin:1.6em 0 2.2em;}
.toc-title{font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); margin-bottom:12px; font-weight:600;}
.toc ol{margin:0; padding-left:1.2em; counter-reset:toc;}
.toc li{margin-bottom:7px; line-height:1.5;}
.toc a{text-decoration:none; color:var(--ink-soft); font-size:15.5px;}
.toc a:hover{color:var(--accent); text-decoration:underline;}

.key-takeaways{background:rgba(47,109,79,0.07); border:1px solid rgba(47,109,79,0.28); border-radius:var(--radius); padding:22px 26px; margin:2.2em 0;}
.key-takeaways h2, .key-takeaways h3{margin-top:0; border-bottom:none; padding-bottom:0;}
.key-takeaways ul{margin-bottom:0;}
.key-takeaways li{color:var(--ink);}

.infobox{background:rgba(169,118,47,0.07); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:14px 20px; margin:1.5em 0; font-size:16.5px; color:var(--ink-soft);}
.infobox strong{color:var(--ink);}
.post-card{display:flex; flex-direction:column; gap:8px;}
.post-card .cat{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; color:var(--accent); letter-spacing:0.04em;}
.post-card h3{margin:0;}
.post-card p{font-size:14.5px; margin:0;}

@media print{
  .no-print, .site-header, .site-footer{display:none !important;}
}