/* Hammer & Pixel, glossary (batch B).
   Loaded after style.css, inner.css and glossary.css on the hub and on the
   twenty batch B term pages. Every rule is wrapped in :where() so it carries
   zero specificity: anything glossary.css defines wins, and this file only
   fills the gaps. Scoped to body.glossary-page so it cannot leak.
   British English. No long dashes in this file. */

:where(body.glossary-page){
  --g-ink:#181818;
  --g-ink-2:#54524e;
  --g-ink-3:#67635d;
  --g-hair:rgba(24,24,24,.12);
  --g-hair-soft:rgba(24,24,24,.07);
  --g-accent-text:#8a5200;
  --g-accent-soft:rgba(245,200,66,.18);
  --g-card:#fcfcfb;
  --g-ground-2:#eceae6;
  --g-r:14px;
}

/* ---------- header extras ---------- */
:where(body.glossary-page) :where(.g-back){margin-top:1.1rem;font-size:.88rem}
:where(body.glossary-page) :where(.g-back a){color:var(--accent);font-weight:640;display:inline-flex;align-items:center;min-height:30px}

/* ---------- the article ---------- */
:where(body.glossary-page) :where(.g-body){max-width:66ch}
:where(body.glossary-page) :where(.g-body p){color:var(--g-ink-2);line-height:1.62}
:where(body.glossary-page) :where(.g-body > * + *){margin-top:1.05rem}
:where(body.glossary-page) :where(.g-def){
  font-size:clamp(1.05rem,1rem + .4vw,1.2rem);line-height:1.55;color:var(--g-ink-2);
}
:where(body.glossary-page) :where(.g-sec){margin-top:2.1rem}
:where(body.glossary-page) :where(.g-sec p + p){margin-top:1.05rem}
:where(body.glossary-page) :where(.g-sec h2){
  margin-bottom:.9rem;
  font-size:clamp(1.3rem,1.15rem + 1vw,1.75rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--g-ink);
}
:where(body.glossary-page) :where(.g-body a){
  color:var(--g-accent-text);font-weight:640;border-bottom:1px solid var(--g-accent-soft);
}
:where(body.glossary-page) :where(.g-body a:hover){border-bottom-color:var(--g-accent-text)}

/* ---------- why it matters box ---------- */
:where(body.glossary-page) :where(.g-why){
  margin-top:2.1rem;
  background:var(--g-card);border:1px solid var(--g-hair);border-left:3px solid var(--accent);
  border-radius:var(--g-r);padding:1.3rem 1.3rem 1.45rem;
}
:where(body.glossary-page) :where(.g-why-k){
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-accent-text);
}
:where(body.glossary-page) :where(.g-why h2){
  margin-top:.5rem;margin-bottom:.7rem;
  font-size:clamp(1.05rem,1rem + .5vw,1.26rem);font-weight:750;letter-spacing:-.02em;color:var(--g-ink);
}
:where(body.glossary-page) :where(.g-why ul){display:grid;gap:.65rem;margin-top:1rem;list-style:none;padding:0}
:where(body.glossary-page) :where(.g-why li){
  position:relative;padding-left:1.4rem;color:var(--g-ink-2);line-height:1.55;font-size:.97rem;
}
:where(body.glossary-page) :where(.g-why li::before){
  content:"";position:absolute;left:0;top:.6rem;
  width:7px;height:7px;border-radius:50%;background:var(--g-accent-text);
}

/* ---------- related link ---------- */
:where(body.glossary-page) :where(.g-related){
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;
  margin-top:2rem;padding:1.05rem 1.2rem;
  background:var(--g-ground-2);border:1px solid var(--g-hair-soft);border-radius:var(--g-r);
}
:where(body.glossary-page) :where(.g-related .k){
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-ink-3);
}
:where(body.glossary-page) :where(.g-related a){
  color:var(--g-accent-text);font-weight:700;border-bottom:0;
  display:inline-flex;align-items:center;min-height:30px;
}
:where(body.glossary-page) :where(.g-related a:hover){text-decoration:underline}

/* ---------- three siblings ---------- */
:where(body.glossary-page) :where(.g-sibs){
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem;
}
:where(body.glossary-page) :where(.g-sib){
  display:flex;flex-direction:column;gap:.45rem;min-height:52px;
  background:var(--g-card);border:1px solid var(--g-hair);border-radius:var(--g-r);
  padding:1.1rem 1.15rem 1.2rem;
  transition:border-color .2s,transform .2s;
}
:where(body.glossary-page) :where(.g-sib:hover){border-color:var(--g-ink);transform:translateY(-2px)}
:where(body.glossary-page) :where(.g-sib-term){font-size:1.06rem;font-weight:760;letter-spacing:-.02em;color:var(--g-ink)}
:where(body.glossary-page) :where(.g-sib-line){font-size:.92rem;color:var(--g-ink-2);line-height:1.5}

/* ---------- closing buttons ---------- */
:where(body.glossary-page) :where(.g-cta-row){display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
:where(body.glossary-page) :where(.g-btn){
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;
  font-weight:650;font-size:1rem;padding:.85rem 1.35rem;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}
:where(body.glossary-page) :where(.g-btn-accent){background:var(--accent);color:#141004}
:where(body.glossary-page) :where(.g-btn-accent:hover){background:var(--accent-deep)}
:where(body.glossary-page) :where(.g-btn-ghost){background:transparent;color:var(--g-ink);border-color:var(--g-hair)}
:where(body.glossary-page) :where(.g-btn-ghost:hover){border-color:var(--g-ink)}

/* ---------- hub ---------- */
:where(body.glossary-page) :where(.g-jump){
  display:flex;flex-wrap:wrap;gap:.45rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--g-hair-soft);
}
:where(body.glossary-page) :where(.g-jump a){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px;padding:0 .55rem;border-radius:10px;
  background:var(--g-card);border:1px solid var(--g-hair);
  font-weight:750;font-size:.95rem;color:var(--g-ink);
}
:where(body.glossary-page) :where(.g-jump a:hover){border-color:var(--g-ink)}
:where(body.glossary-page) :where(.g-index){margin-top:1.8rem;display:grid;gap:2rem}
:where(body.glossary-page) :where(.g-letter){
  font-size:1.05rem;font-weight:800;letter-spacing:.08em;color:var(--g-accent-text);
  padding-bottom:.55rem;border-bottom:1px solid var(--g-hair-soft);scroll-margin-top:90px;
}
:where(body.glossary-page) :where(.g-list){list-style:none;padding:0;margin-top:.9rem;display:grid;gap:.85rem}
:where(body.glossary-page) :where(.g-list li){
  display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:.3rem 1.2rem;align-items:baseline;
}
:where(body.glossary-page) :where(.g-list a){
  font-weight:720;color:var(--g-ink);display:inline-flex;align-items:center;min-height:30px;
}
:where(body.glossary-page) :where(.g-list a:hover){color:var(--g-accent-text);text-decoration:underline}
:where(body.glossary-page) :where(.g-list span){color:var(--g-ink-2);font-size:.95rem;line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :where(body.glossary-page) :where(.g-sibs){grid-template-columns:1fr}
}
@media (max-width:640px){
  :where(body.glossary-page) :where(.g-list li){grid-template-columns:1fr}
  :where(body.glossary-page) :where(.g-cta-row) :where(.g-btn){flex:1 1 100%}
}

/* ---------- link colours ----------
   glossary.css sets body.glossary-page a{color:inherit}, which outranks a
   :where() rule. These match that weight and come later, so the links in this
   batch keep their colour whether or not glossary.css is present. */
body.glossary-page :where(.g-back) a{color:var(--accent);font-weight:640}
body.glossary-page :where(.g-body) a{color:var(--g-accent-text);font-weight:640}
body.glossary-page :where(.g-related) a{color:var(--g-accent-text);font-weight:700;border-bottom:0}
body.glossary-page :where(.g-list) a{color:var(--g-ink);font-weight:720}
body.glossary-page :where(.g-list) a:hover{color:var(--g-accent-text)}
body.glossary-page :where(.g-jump) a{color:var(--g-ink)}
body.glossary-page :where(.g-cta-row) a.g-btn-accent{color:#141004}
body.glossary-page :where(.g-cta-row) a.g-btn-ghost{color:var(--g-ink)}
body.glossary-page :where(.g-sibs) a{color:inherit}
body.glossary-page :where(.band) a.tlink{color:var(--g-accent-text);font-weight:640}
body.glossary-page :where(.g-why) li{position:relative;padding-left:1.4rem;list-style:none}
body.glossary-page :where(.g-why) li::before{
  content:"";position:absolute;left:0;top:.6rem;
  width:7px;height:7px;border-radius:50%;background:var(--g-accent-text);
}