:root{
    --paper:#EEF1EA;
    --paper-line:#CBD5C6;
    --ink:#1C2321;
    --ink-soft:#4B564F;
    --panel:#132420;
    --panel-line:#24413A;
    --amber:#F2A93C;
    --amber-dim:#C98726;
    --pine:#2E6E62;
    --pine-dark:#1F4E45;
    --white:#FBFCF9;
    --radius:6px;
    --serif: "Source Serif 4", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }

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

  body{
    margin:0;
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--paper-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
    background-size: 28px 28px;
    color:var(--ink);
    font-family:var(--serif);
    line-height:1.6;
  }

  a{color:var(--pine-dark);}
  a:hover{color:var(--amber-dim);}

  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* ---------- header ---------- */
  header.site-header{
    background:var(--paper);
    border-bottom:2px solid var(--ink);
    position:sticky; top:0; z-index:20;
  }
  .site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .logo{
    font-family:var(--mono);
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-decoration:none;
  }
  .logo span{color:var(--amber-dim);}
  nav.primary-nav ul{
    list-style:none; display:flex; gap:28px; margin:0; padding:0;
    font-family:var(--mono); font-size:0.85rem;
  }
  nav.primary-nav a{text-decoration:none; color:var(--ink-soft);}
  nav.primary-nav a:hover{color:var(--ink);}

  /* ad slot placeholders */

  /* ---------- hero ---------- */
  .hero{padding:56px 0 40px;}
  .hero .wrap{
    display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:start;
  }
  @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} }

  .hero h1{
    font-size:2.5rem; line-height:1.15; margin:0 0 18px; letter-spacing:-0.01em;
  }
  .hero p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:46ch;}
  .hero-meta{
    margin-top:28px; display:flex; gap:28px; font-family:var(--mono); font-size:0.8rem; color:var(--ink-soft);
  }
  .hero-meta strong{display:block; font-size:1.1rem; color:var(--ink); font-family:var(--serif);}

  /* ---------- calculator ---------- */
  .calc{
    background:var(--panel);
    border-radius:var(--radius);
    padding:18px;
    box-shadow: 0 18px 34px rgba(19,36,32,0.25);
  }
  .calc-display{
    background:#0B1613;
    border:1px solid var(--panel-line);
    border-radius:4px;
    padding:18px 16px 14px;
    margin-bottom:14px;
    text-align:right;
    font-family:var(--mono);
    overflow:hidden;
  }
  .calc-history{
    color:#6E8B82; font-size:0.85rem; min-height:1.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .calc-value{
    color:var(--amber); font-size:2.4rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .calc-mem-flag{
    font-size:0.7rem; color:var(--amber-dim); font-family:var(--mono); min-height:1em; text-align:left;
  }

  .calc-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:8px;
  }
  .calc-grid button{
    font-family:var(--mono);
    font-size:1.05rem;
    padding:14px 0;
    border-radius:4px;
    border:1px solid var(--panel-line);
    background:#1A332C;
    color:var(--white);
    cursor:pointer;
    transition: background 0.12s ease, transform 0.05s ease;
  }
  .calc-grid button:hover{background:#204039;}
  .calc-grid button:active{transform: translateY(1px);}
  .calc-grid button.op{background:#1F4E45; color:var(--amber);}
  .calc-grid button.op:hover{background:#26594E;}
  .calc-grid button.mem{background:#122019; color:#8FB3A9; font-size:0.85rem;}
  .calc-grid button.equals{
    background:var(--amber); color:#1C2321; font-weight:700; grid-row: span 1;
  }
  .calc-grid button.equals:hover{background:#ffbe5c;}
  .calc-grid button.wide{grid-column:span 2;}

  /* ---------- directory (ledger list, not cards) ---------- */
  .directory{padding:52px 0;}
  .section-heading{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:6px;
  }
  .section-heading h2{margin:0; font-size:1.5rem;}
  .section-heading .count{font-family:var(--mono); font-size:0.8rem; color:var(--ink-soft);}

  .directory-groups{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; margin-top:18px;
  }
  @media (max-width:980px){ .directory-groups{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .directory-groups{grid-template-columns:1fr;} }
  .footer-bottom{ flex-wrap:wrap; }

  .directory-group h3{
    font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--pine-dark); margin:24px 0 4px; font-weight:700;
  }
  .directory-group ul{list-style:none; margin:0; padding:0;}
  .directory-group li{
    border-bottom:1px solid var(--paper-line);
  }
  .directory-group li a{
    display:flex; justify-content:space-between; align-items:center;
    text-decoration:none; color:var(--ink); padding:11px 2px;
    font-size:0.98rem;
  }
  .directory-group li a:hover{color:var(--pine-dark);}
  .directory-group li a .tag{
    font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft);
  }

  /* ---------- in-content ad ---------- */
  /* Reserves real space (min-height) so a loaded ad doesn't shift the page content
     around it (this is what Google calls Cumulative Layout Shift, and large shifts
     can hurt both user experience and Core Web Vitals / page-experience signals).
     Clearly labelled "Advertisement" at all times, which AdSense requires so ads are
     never confused with site content or navigation. Kept well clear (44px) of any
     button or link above or below it, so a tap meant for the page doesn't land on an ad. */
  .ad-slot{
    text-align:center; overflow:hidden; margin:44px auto; max-width:728px;
    min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    border:1px solid var(--paper-line); border-radius:6px; background:rgba(28,35,33,0.02);
  }
  .ad-slot::before{
    content:"Advertisement"; display:block; font-family:var(--mono); font-size:0.64rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; opacity:0.65;
  }
  .ad-slot:empty::after{
    content:"Ad space reserved \2014 add your AdSense code here"; font-family:var(--mono);
    font-size:0.7rem; color:var(--ink-soft); opacity:0.4; padding:0 16px;
  }
  .ad-slot.in-content{margin:44px auto; max-width:728px;}

  /* ---------- tips ---------- */
  .tips{padding:20px 0 52px;}
  .tips-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px;}
  @media (max-width:820px){ .tips-grid{grid-template-columns:1fr;} }
  .tip h3{font-size:1.05rem; margin:0 0 8px;}
  .tip p{color:var(--ink-soft); font-size:0.95rem; margin:0;}

  /* ---------- faq ---------- */
  .faq{padding:20px 0 60px;}
  .faq details{
    border-bottom:1px solid var(--paper-line);
    padding:16px 2px;
  }
  .faq summary{
    cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-family:var(--mono); color:var(--pine-dark); font-size:1.2rem;}
  .faq details[open] summary::after{content:"–";}
  .faq p{color:var(--ink-soft); margin:12px 0 0; max-width:70ch;}

  /* ---------- footer ---------- */
  footer{
    background:var(--ink); color:#C7D0C9; padding:44px 0 30px; margin-top:20px;
  }
  footer .wrap{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px;}
  @media (max-width:760px){ footer .wrap{grid-template-columns:1fr 1fr;} }
  footer h4{font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:#8FB3A9; margin:0 0 12px;}
  footer ul{list-style:none; margin:0; padding:0;}
  footer li{margin-bottom:8px; font-size:0.9rem;}
  footer a{color:#DCE3DA; text-decoration:none;}
  footer a:hover{color:var(--amber);}
  footer .brand p{color:#93A398; font-size:0.88rem; max-width:32ch;}
  .footer-bottom{
    border-top:1px solid #2A3733; margin-top:32px; padding-top:18px;
    font-family:var(--mono); font-size:0.72rem; color:#7D8D82;
  }
  .footer-disclaimer{
    border-top:1px solid #2A3733; margin-top:32px; padding-top:18px;
    font-size:0.82rem; line-height:1.55; color:#93A398; max-width:74ch;
  }
  .footer-disclaimer strong{color:#C7D0C9; font-weight:600;}
/* ---------- tool pages (form-based calculators) ---------- */
.breadcrumb{
  font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin:22px 0 0;
}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--pine-dark);}

.tool-hero{padding:14px 0 44px;}
.tool-hero h1{font-size:2.1rem; line-height:1.2; margin:14px 0 12px; letter-spacing:-0.01em;}
.tool-hero p.lede{font-size:1.05rem; color:var(--ink-soft); max-width:66ch;}

.tool-layout{display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:start; margin-top:28px;}
@media (max-width:900px){ .tool-layout{grid-template-columns:1fr;} }

.tool-card{
  background:var(--white);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  padding:24px;
}
.tool-tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.tool-tabs button{
  font-family:var(--mono); font-size:0.78rem; padding:8px 14px; border-radius:999px;
  border:1px solid var(--paper-line); background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.tool-tabs button.active{background:var(--ink); color:var(--white); border-color:var(--ink);}
.tool-panel{display:none;}
.tool-panel.active{display:block;}

.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select{
  width:100%; padding:11px 12px; font-size:1rem; font-family:var(--serif);
  border:1px solid var(--ink); border-radius:4px; background:var(--paper); color:var(--ink);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
.field-hint{font-size:0.8rem; color:var(--ink-soft); margin-top:4px;}

.btn-calc{
  font-family:var(--mono); font-weight:700; font-size:0.95rem; padding:13px 22px;
  background:var(--amber); color:#1C2321; border:none; border-radius:4px; cursor:pointer; margin-top:6px;
}
.btn-calc:hover{background:#ffbe5c;}

.result-panel{
  background:var(--panel); color:var(--white); border-radius:var(--radius); padding:22px;
}
.result-panel .result-label{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:#8FB3A9; margin-bottom:6px;}
.result-panel .result-value{font-family:var(--mono); font-size:2rem; color:var(--amber); font-weight:600; word-break:break-word;}
.result-panel .result-sub{font-size:0.9rem; color:#C7D0C9; margin-top:6px;}
.result-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--panel-line); font-size:0.92rem;}
.result-row:last-child{border-bottom:none;}
.result-row .k{color:#8FB3A9;}
.result-row .v{font-family:var(--mono); color:var(--white);}
.result-empty{color:#8FB3A9; font-size:0.92rem;}

.explain{padding:20px 0 12px; max-width:74ch;}
.explain h2{font-size:1.35rem;}
.explain p{color:var(--ink-soft);}

.related{padding:8px 0 48px;}
.related ul{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 32px;}
@media (max-width:760px){ .related ul{grid-template-columns:repeat(2,1fr);} }
.related li{border-bottom:1px solid var(--paper-line);}
.related li a{display:block; padding:10px 2px; text-decoration:none; color:var(--ink); font-size:0.92rem;}
.related li a:hover{color:var(--pine-dark);}

/* ---------- footer legal row + cookie banner ---------- */
.footer-bottom{ display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; }
.footer-legal-links a{ color:#DCE3DA; }
.footer-legal-links a:hover{ color:var(--amber); }

.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:-200px; z-index:50;
  max-width:560px; margin:0 auto;
  background:var(--ink); color:#DCE3DA;
  border:1px solid #2A3733; border-radius:8px;
  padding:16px 18px; font-size:0.88rem; line-height:1.5;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  transition:bottom 0.25s ease;
}
.cookie-banner.visible{ bottom:16px; }
.cookie-banner a{ color:var(--amber); }
.cookie-banner p{ margin:0; flex:1 1 260px; }
.cookie-banner button{
  font-family:var(--mono); font-weight:700; font-size:0.82rem;
  background:var(--amber); color:#1C2321; border:none; border-radius:4px;
  padding:9px 18px; cursor:pointer; flex:0 0 auto;
}
.cookie-banner button:hover{ background:#ffbe5c; }

/* ---------- simple content pages (privacy / about) ---------- */
.content-page{ padding:20px 0 60px; }
.content-page h1{ font-size:2rem; margin-bottom:6px; }
.content-page .updated{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin-bottom:32px; }
.content-page h2{ font-size:1.25rem; margin-top:32px; }
.content-page p, .content-page li{ color:var(--ink-soft); max-width:74ch; }
.content-page ul{ padding-left:20px; }

.note{ background:rgba(46,110,98,0.10); border-left:3px solid var(--pine); padding:10px 14px; font-size:0.9rem; color:var(--ink-soft); max-width:74ch; }

/* ---------- worked example box ---------- */
.worked-example{
  background:var(--paper); border:1px solid var(--ink); border-left:4px solid var(--amber-dim);
  border-radius:4px; padding:16px 20px; margin:18px 0 6px; max-width:74ch;
}
.worked-example .we-label{
  font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--pine-dark); margin-bottom:8px; font-weight:700;
}
.worked-example p{ margin:6px 0; color:var(--ink); }
.worked-example .we-result{ font-family:var(--mono); color:var(--amber-dim); font-weight:700; }

/* cookie banner: Accept and Reject are styled identically so neither is favoured */
.cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
@media (max-width:480px){ .cookie-actions{ width:100%; } .cookie-actions button{ flex:1; } }

/* ---------- ADS ARE SWITCHED OFF FOR NOW ----------
   The empty ad boxes are hidden until Google AdSense has approved the site.
   When you are approved, delete this whole block (from this comment to the closing brace)
   and the reserved ad spaces appear again. */
.ad-slot{ display:none; }