/* The Personal Branding Glossary (/personal-branding-glossary). Loaded after site.css and
   wiki.css on that page only, and built from their tokens: white and Ink grounds, the
   Platinum accent, Montserrat and Inter, zero radius. Every term is in the HTML; the
   search and the category chips (glossary.js) only hide what does not match. */

.gl-tools[hidden],.gl-letter[hidden],.gl-term[hidden],.gl-none[hidden]{display:none !important;}

/* Search and the category filter, shown once the script runs */
.gl-tools{display:flex; flex-direction:column; gap:8px; margin:0 0 26px;}
.gl-search{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
.gl-search label{flex:1 1 100%; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label);}
.gl-search input{flex:1 1 300px; max-width:560px; min-width:0; background:var(--white); color:var(--ink); border:1px solid var(--slate); border-radius:0; padding:14px 16px; font:inherit; font-size:16px;}
.gl-search input::placeholder{color:var(--ink-label);}
.gl-search input:focus{outline:2px solid var(--ink); outline-offset:0; border-color:var(--ink);}
.gl-count{font-size:14px; color:var(--ink-label);}
.gl-chips{margin:0;}

/* A to Z */
.gl-jump{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0 0 22px; border-bottom:1px solid var(--rule-light);}
.gl-jump a,.gl-jump span{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 4px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:0.04em;}
.gl-jump a{color:var(--ink); text-decoration:none; border:1px solid var(--rule-light); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);}
.gl-jump a:hover{background:var(--ink); border-color:var(--ink); color:var(--white);}
.gl-jump a:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.gl-jump span{color:#B4B4B4;}

/* The letters and their terms */
.gl-letter{margin-top:44px; scroll-margin-top:96px;}
.gl-L{font-family:var(--display); font-size:clamp(34px, 3.4vw, 46px); font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--ink); margin:0; padding:0 0 14px; border-bottom:1px solid var(--ink);}
.gl-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(32px, 4vw, 64px); margin:0;}
.gl-term{padding:24px 0 22px; border-bottom:1px solid var(--rule-light); scroll-margin-top:96px; transition:background .3s var(--ease);}
.gl-term dt{margin:0 0 8px;}
.gl-term dfn{font-style:normal; font-family:var(--display); font-size:18px; font-weight:600; line-height:1.3; color:var(--ink);}
.gl-term dd{margin:0;}
.gl-term dd p{margin:0; font-size:15.5px; line-height:1.7; color:var(--ink-body);}
.gl-term dd p + p{margin-top:12px;}
.gl-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px;}
.gl-cat{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);}
.gl-src{font-size:12.5px; color:var(--ink-label);}
.gl-term dd .gl-links{font-size:14px; line-height:1.6;}
.gl-term dd .gl-links .ilink{margin-right:14px;}
.gl-see{color:var(--ink-label);}
.gl-see a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule-light); text-underline-offset:3px;}
.gl-see a:hover{text-decoration-color:var(--ink);}
.gl-term a:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
/* The term an address points to, so a shared link lands on it */
.gl-term:target{background:#F5F5F5; box-shadow:inset 3px 0 0 var(--ink); padding-left:20px; padding-right:20px;}
.gl-none{margin-top:28px; color:var(--ink-label);}
@media (max-width:820px){ .gl-list{grid-template-columns:minmax(0, 1fr);} }

/* The terms by category, on the dark shelf */
.gl-boxes{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.gl-box{position:relative; padding:clamp(28px, 2.6vw, 36px) clamp(22px, 2.2vw, 30px); border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.012));}
.gl-box::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--platinum); opacity:0.75;}
.gl-box-n{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--platinum); margin:0 0 12px;}
.gl-box h3{color:var(--white); margin:0 0 10px;}
.gl-box > p.dim{font-size:14px; line-height:1.6; margin:0 0 16px; color:#A9A6A0;}
.gl-box ul{list-style:none; margin:0; padding:0;}
.gl-box li{border-top:1px solid rgba(255,255,255,0.09);}
.gl-box li a{display:block; padding:8px 0; font-size:14.5px; line-height:1.45; color:#C8C5BE; text-decoration:none; transition:color .2s var(--ease), transform .2s var(--ease);}
.gl-box li a:hover{color:var(--white); transform:translateX(4px);}
.gl-box li a:focus-visible{outline:2px solid var(--platinum); outline-offset:2px;}
@media (max-width:1000px){ .gl-boxes{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:640px){ .gl-boxes{grid-template-columns:minmax(0, 1fr);} }
@media (prefers-reduced-motion:reduce){ .gl-term,.gl-jump a,.gl-box li a{transition:none;} .gl-box li a:hover{transform:none;} }
@media print{ .gl-tools,.gl-jump{display:none !important;} .gl-term:target{background:none; box-shadow:none;} }