/* ===== Kotobakun Glossary (block-scoped CSS) ===== */
/* Local tokens (scoped) */
.kb-glossary{
–kb-max: 1100px;
–kb-border: rgba(0,0,0,.10);
–kb-border-2: rgba(0,0,0,.12);
–kb-muted: rgba(0,0,0,.68);
–kb-bg: rgba(255,255,255,0.92);
–kb-pill-bg: rgba(0,0,0,.02);
–kb-pill-bg-hover: rgba(0,0,0,.05);
–kb-shadow: 0 8px 18px rgba(0,0,0,0.05);
–kb-shadow-hover: 0 14px 28px rgba(0,0,0,0.08);
–kb-focus: 0 0 0 4px rgba(0,0,0,0.12);
padding: clamp(28px, 4vw, 56px) 0;
}
.kb-glossary__inner{
max-width: var(–kb-max);
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 24px);
}
.kb-glossary__header{ margin-bottom: 14px; }
.kb-glossary__title{
margin: 0 0 10px;
line-height: 1.12;
letter-spacing: -0.01em;
font-size: clamp(26px, 3.2vw, 34px);
}
.kb-glossary__lede{
margin: 0;
max-width: 75ch;
line-height: 1.65;
opacity: .85;
font-size: 16px;
}
/* Sticky A–Z bar */
.kb-glossaryNav{
position: sticky;
top: 88px; /* tweak if your header is taller */
z-index: 20;
margin: 18px 0 18px;
padding: 10px;
background: var(–kb-bg);
backdrop-filter: blur(8px);
border: 1px solid var(–kb-border);
border-radius: 14px;
box-shadow: var(–kb-shadow);
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 820px){
.kb-glossaryNav{
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* A–Z pills */
.kb-glossaryNav__link{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(–kb-border-2);
background: var(–kb-pill-bg);
text-decoration: none !important;
color: inherit;
font-weight: 700;
transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.kb-glossaryNav__link:hover{
transform: translateY(-1px);
background: var(–kb-pill-bg-hover);
border-color: rgba(0,0,0,.18);
}
.kb-glossaryNav__link:focus,
.kb-glossaryNav__link:focus-visible{
outline: none;
box-shadow: var(–kb-focus);
}
/* Make anchor jumps land nicely below sticky header */
.kb-letter{
scroll-margin-top: 120px;
padding: 18px 0 6px;
border-top: 1px solid var(–kb-border);
}
.kb-letter__head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.kb-letter__title{
margin: 0;
font-size: 22px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.kb-letter__top{
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
opacity: .85;
}
.kb-letter__top:hover{
text-decoration: underline !important;
}
/* Definition list */
.kb-terms{ margin: 0; }
.kb-term{
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.kb-term__dt{
font-weight: 800;
margin: 0 0 6px;
}
.kb-term__dd{
margin: 0;
line-height: 1.65;
opacity: .82;
}
/* Highlight the section you jumped to */
.kb-letter:target{
background: rgba(0,0,0,.02);
border-radius: 14px;
padding-left: 14px;
padding-right: 14px;
}
Kotobakun 