:root{
  --paper:#F2E8CF;
  --paper-deep:#EADFC2;
  --ink:#22303B;
  --ink-soft:#4C5D68;
  --tile-face:#FFFDF6;
  --tile-shadow:#C9BB98;
  --green:#3E7C59;
  --green-deep:#2E5F44;
  --mustard:#C08A2E;
  --mustard-deep:#9A6B1E;
  --grid-line: rgba(34,48,59,0.09);
  --rule: rgba(34,48,59,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/32px 32px,
    var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.5;
  min-height:100vh;
}
a{color:var(--green-deep);}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px 80px;}

/* ---------- Header / nav ---------- */
header{
  padding:32px 0 22px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; border-bottom:2px solid var(--ink); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand-mark{display:grid; grid-template-columns:repeat(2,26px); grid-template-rows:repeat(2,26px); gap:3px;}
.brand-mark span{
  background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; border-radius:3px;
}
.brand h1{font-family:'Fraunces', serif; font-weight:600; font-size:26px; margin:0; letter-spacing:-0.01em;}
.brand p{margin:2px 0 0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
.brand a.brandlink{text-decoration:none; color:inherit; display:flex; align-items:center; gap:14px;}

nav.sitenav{display:flex; gap:18px; font-family:'IBM Plex Mono',monospace; font-size:13px;}
nav.sitenav a{text-decoration:none; color:var(--ink); border-bottom:2px solid transparent; padding-bottom:2px;}
nav.sitenav a:hover, nav.sitenav a.current{border-color:var(--green);}

/* ---------- Breadcrumb ---------- */
.crumbs{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);
  margin:20px 0 4px; display:flex; gap:6px; flex-wrap:wrap;
}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{color:var(--green-deep);}

/* ---------- Ad slots ---------- */
.ad-slot{
  margin:28px 0;
  border:1.5px dashed var(--rule);
  border-radius:8px;
  padding:14px;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-soft);
  background:rgba(255,253,246,0.5);
}
.ad-slot.leaderboard{min-height:90px; display:flex; align-items:center; justify-content:center;}
.ad-slot.incontent{min-height:100px; display:flex; align-items:center; justify-content:center;}

/* ---------- Page content typography ---------- */
h2.pagetitle{font-family:'Fraunces', serif; font-weight:600; font-size:28px; margin:22px 0 6px;}
p.lede{color:var(--ink-soft); font-size:16px; max-width:70ch; margin:0 0 8px;}

/* ---------- Word grid (list pages) ---------- */
.word-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:8px;
  margin-top:20px;
}
.word-chip{
  background:var(--tile-face);
  border:1.5px solid var(--rule);
  border-radius:6px;
  padding:9px 12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  text-align:left;
  color:var(--ink);
}

/* ---------- Category / hub cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  margin-top:20px;
}
.card{
  display:block;
  background:var(--tile-face);
  border:1.5px solid var(--rule);
  border-radius:8px;
  padding:16px;
  text-decoration:none;
  color:var(--ink);
}
.card:hover{border-color:var(--green);}
.card .big{font-family:'Fraunces', serif; font-weight:600; font-size:22px;}
.card .small{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:4px;}

.letter-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.letter-row a{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  border:1.5px solid var(--rule); border-radius:6px;
  padding:8px 12px; text-decoration:none; color:var(--ink);
  min-width:40px; text-align:center;
}
.letter-row a:hover{border-color:var(--green);}
.letter-row span.disabled{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  border:1.5px solid var(--grid-line); border-radius:6px;
  padding:8px 12px; color:var(--grid-line); min-width:40px; text-align:center;
}

.cta-row{margin-top:34px; padding-top:20px; border-top:1px solid var(--rule);}
.btn-link{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:11px 20px; border-radius:7px; text-decoration:none;
}

footer{
  margin-top:60px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

@media (max-width:720px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}