/* 40k Codex category hub styles */

:root{
  --wh-accent:#a01c22;
  --wh-ink:#191919;
  --wh-muted:#545454;
  --wh-line:#e6e0d6;
  --wh-card:#fff;
  --wh-radius:10px;
}
.wh-hub{
  max-width:1060px;
  margin:0 auto;
  padding:0 20px 72px;
  color:var(--wh-ink);
  font-size:17px;
  line-height:1.65;
}

/* breadcrumb */
.wh-crumb{font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;color:var(--wh-muted);padding:22px 0 6px}
.wh-crumb a{color:var(--wh-muted);text-decoration:none;border-bottom:1px solid transparent}
.wh-crumb a:hover{color:var(--wh-accent);border-bottom-color:var(--wh-accent)}
.wh-crumb span{padding:0 .5em}
.wh-crumb span[aria-hidden]{opacity:.5}

/* head */
.wh-head{border-bottom:2px solid var(--wh-ink);padding-bottom:26px;margin-bottom:34px}
.wh-head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.08;margin:.1em 0 .3em;letter-spacing:-.02em}
.wh-head .wh-intro{font-size:1.12rem;color:var(--wh-muted);margin:0}
.wh-head .wh-count{display:inline-block;margin:14px 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wh-accent);font-weight:700}

/* section chips */
.wh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wh-chips a{font-size:.82rem;padding:5px 11px;border:1px solid var(--wh-line);border-radius:999px;text-decoration:none;color:var(--wh-ink);background:var(--wh-card)}
.wh-chips a:hover{border-color:var(--wh-accent);color:var(--wh-accent)}
.wh-chips a.on{background:var(--wh-accent);border-color:var(--wh-accent);color:#fff;font-weight:600}

/* generic section */
.wh-sec{margin:0 0 46px}
.wh-sec>h2{font-size:1.35rem;margin:0 0 4px;letter-spacing:-.01em}
.wh-sec .wh-sub{color:var(--wh-muted);font-size:.95rem;margin:0 0 20px}

/* picks */
.wh-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wh-pick{display:block;padding:16px 18px;border:1px solid var(--wh-line);border-radius:var(--wh-radius);background:var(--wh-card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.wh-pick:hover{border-color:var(--wh-accent);transform:translateY(-2px)}
.wh-pick b{display:block;font-size:1.02rem;line-height:1.35;margin-bottom:5px}
.wh-pick span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.88rem;color:var(--wh-muted);line-height:1.5}

/* letter bar */
.wh-letterbar{display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 20px;border-top:1px solid var(--wh-line);border-bottom:1px solid var(--wh-line);margin-bottom:24px}
.wh-letterbar a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;font-size:.85rem;font-weight:600;border:1px solid var(--wh-line);border-radius:6px;text-decoration:none;color:var(--wh-ink);background:var(--wh-card)}
.wh-letterbar a:hover{background:var(--wh-accent);border-color:var(--wh-accent);color:#fff}

/* index */
.wh-index{column-count:3;column-gap:34px}
.wh-grp{break-inside:avoid;margin:0 0 20px}
.wh-grp h3{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh-accent);margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--wh-line)}
.wh-grp ul{list-style:none;margin:0;padding:0}
.wh-grp li{margin:0 0 3px;font-size:.95rem;line-height:1.45}
.wh-grp a{text-decoration:none;color:var(--wh-ink);border-bottom:1px solid transparent}
.wh-grp a:hover{color:var(--wh-accent);border-bottom-color:var(--wh-accent)}

/* recent cards */
.wh-recent{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wh-card{display:flex;flex-direction:column;padding:18px 20px 16px;border:1px solid var(--wh-line);border-radius:var(--wh-radius);background:var(--wh-card)}
.wh-card b{font-size:1.06rem;line-height:1.3;margin-bottom:7px}
.wh-card b a{text-decoration:none;color:inherit}
.wh-card b a:hover{color:var(--wh-accent)}
.wh-card p{margin:0 0 12px;font-size:.92rem;color:var(--wh-muted);line-height:1.55}
.wh-card time{margin-top:auto;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--wh-muted)}

.wh-hub a:focus-visible{outline:2px solid var(--wh-accent);outline-offset:2px}

/* home page cards reuse the hub card styles */
.wh-badge{display:inline-block;font-size:.72rem;font-weight:700;color:var(--wh-muted);background:#f2efe8;border-radius:999px;padding:1px 8px;vertical-align:middle;margin-left:4px}
.wh-pick b{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wh-pick:hover b{color:var(--wh-accent)}

/* WordPress caps block children of a constrained layout at its 750px content
   size, which squeezes the card grids into narrow columns. Opt them out. */
.entry-content .wh-picks,
.entry-content .wh-recent{max-width:1060px}
.entry-content .wh-pick span,
.entry-content .wh-card p{font-size:.94rem;line-height:1.55}
.entry-content .wh-pick b{font-size:1.05rem}

/* the header nav reads a touch small on wide screens */
.ct-header .ct-menu-link{font-size:13px}

@media(max-width:980px){
  .wh-picks,.wh-recent{grid-template-columns:repeat(2,1fr)}
  .wh-index{column-count:2}
}
@media(max-width:620px){
  .wh-hub{font-size:16px}
  .wh-picks,.wh-recent{grid-template-columns:1fr}
  .wh-index{column-count:1}
}