/* Glossary of cookery terms (/know-how/glossary/). Pop-art, square corners; same family as fish-guide.css / cook-books.css. 1 Nov 2026 */
.gl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gl-preview{background:#fff3cd;border:3px solid var(--eo-ink);box-shadow:4px 4px 0 var(--eo-ink);padding:8px 12px;margin:12px 0;font:600 .95rem/1.45 var(--eo-sans)}
.gl-intro{margin:6px 0 8px;font-size:1rem;line-height:1.6;max-width:72ch}
.gl-note{font-size:.88rem;line-height:1.5;color:var(--eo-muted);max-width:80ch}
/* hero: know-how chef + three letter tiles */
.gl-pop{display:grid;grid-template-columns:minmax(80px,26%) 1fr;gap:12px;align-items:center;margin:0;padding:14px;border:3px solid var(--eo-ink);box-shadow:6px 6px 0 var(--eo-ink);
  background-color:var(--eo-coral);background-image:var(--eo-tile);background-size:200px 200px}
.gd-hero .gl-pop img.gl-chef{width:100%;height:auto;aspect-ratio:auto;border:0;box-shadow:none;background:none;filter:drop-shadow(4px 5px 0 rgba(22,20,31,.6));transform:rotate(-6deg)}
.gl-pop ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gl-pop li a{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#ffd400;border:2.5px solid var(--eo-ink);box-shadow:3px 3px 0 var(--eo-ink);
  font:400 2.2rem/1 var(--eo-display);color:#fff;-webkit-text-stroke:1.2px var(--eo-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--eo-ink);text-decoration:none}
.gl-pop li:nth-child(2) a{box-shadow:3px 3px 0 var(--eo-pink)}.gl-pop li:nth-child(3) a{box-shadow:3px 3px 0 var(--eo-blue)}
.gl-pop li a:hover,.gl-pop li a:focus-visible{background:var(--eo-blue)}
.gl-pop figcaption{grid-column:1/-1;font:.74rem/1.35 var(--eo-sans);color:var(--eo-ink)}
/* the index box: A-Z grid, letters without terms greyed out */
.gl-index{margin:14px 0 10px;padding:12px;background:#fff;border:3px solid var(--eo-ink);box-shadow:6px 6px 0 #ffd400;scroll-margin-top:12px}
.gl-index h2{margin:0 0 8px;font:600 .8rem/1.2 var(--eo-label);text-transform:uppercase;letter-spacing:.08em;color:var(--eo-burnt)}
.gl-index ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
.gl-index li{min-width:0}
.gl-index a,.gl-index span{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:44px;border:2.5px solid var(--eo-ink);
  font:400 1.45rem/1 var(--eo-display);text-decoration:none;color:var(--eo-ink);background:#ffd400;box-shadow:3px 3px 0 var(--eo-ink)}
.gl-index li:nth-child(3n+2) a{box-shadow:3px 3px 0 var(--eo-pink)}.gl-index li:nth-child(3n) a{box-shadow:3px 3px 0 var(--eo-blue)}
.gl-index a small{font:600 .6rem/1 var(--eo-label);letter-spacing:.04em;margin-top:3px}
.gl-index a:hover,.gl-index a:focus-visible{background:var(--eo-blue);color:#fff}
.gl-index span{background:#ecebef;color:#a9a6b2;border-color:#c9c6d1;box-shadow:none;cursor:default}
.gl-index a.gl-dim{background:#ecebef;color:#a9a6b2;box-shadow:none}
/* filter */
.gl-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px;padding:10px;background:#fff;border:2.5px solid var(--eo-ink);box-shadow:4px 4px 0 var(--eo-pink)}
.gl-filter[hidden]{display:none}
.gl-filter label{font:600 .8rem/1.2 var(--eo-label);text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
.gl-filter input{flex:1 1 200px;min-width:0;font:1rem/1.3 var(--eo-sans);padding:8px 10px;border:2px solid var(--eo-ink);border-radius:0;-webkit-appearance:none;appearance:none}
.gl-filter button{font:600 .78rem/1.4 var(--eo-label);text-transform:uppercase;letter-spacing:.04em;border:2px solid var(--eo-ink);background:#fff;padding:7px 10px;border-radius:0;cursor:pointer;color:var(--eo-ink)}
.gl-filter button:hover,.gl-filter button:focus-visible{background:var(--eo-ink);color:#fff}
.gl-count{font-size:.88rem;color:var(--eo-muted);margin:4px 0;min-height:1.2em}
.gl-none{font-weight:600;margin:8px 0}
.gl-none[hidden]{display:none}
.gl-hide{display:none!important}
/* letter sections and cards */
.gl-sec{scroll-margin-top:10px}
.gl-sec-h{display:flex;align-items:center;gap:12px;margin:24px 0 8px}
.gl-letter{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0;background:#ffd400;border:3px solid var(--eo-ink);box-shadow:4px 4px 0 var(--eo-ink);
  font:400 1.9rem/1 var(--eo-display);color:#fff;-webkit-text-stroke:1.2px var(--eo-ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--eo-ink)}
.gl-sec-h small{font:600 .74rem/1.3 var(--eo-label);text-transform:uppercase;letter-spacing:.06em;color:var(--eo-muted)}
.gl-back{margin-left:auto;font:600 .74rem/1.4 var(--eo-label);text-transform:uppercase;letter-spacing:.04em;color:var(--eo-ink);border:2px solid var(--eo-ink);padding:2px 8px;text-decoration:none;background:#fff;white-space:nowrap}
.gl-back:hover,.gl-back:focus-visible{background:var(--eo-blue);color:#fff}
.gl-cards{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gl-card{background:#fff;border:2.5px solid var(--eo-ink);box-shadow:4px 4px 0 var(--eo-ink);padding:9px 12px 10px;font-size:.94rem;line-height:1.5;scroll-margin-top:12px;min-width:0;display:flex;flex-direction:column}
.gl-cards>.gl-card:nth-child(3n+2){box-shadow:4px 4px 0 var(--eo-pink)}.gl-cards>.gl-card:nth-child(3n){box-shadow:4px 4px 0 var(--eo-blue)}
.gl-card:target{outline:4px solid #ffd400;outline-offset:2px}
.gl-card h3{margin:0 0 4px;font:800 1.12rem/1.2 "CO Title","Arial Black",sans-serif;overflow-wrap:anywhere}
.gl-card h3 a{color:inherit;text-decoration:none}
.gl-card h3 a:hover,.gl-card h3 a:focus-visible{text-decoration:underline}
.gl-kick{display:inline-block;align-self:flex-start;font:600 .66rem/1.5 var(--eo-label);text-transform:uppercase;letter-spacing:.05em;border:1.5px solid var(--eo-ink);padding:0 5px;margin:0 0 6px;background:#ffd400}
.gl-card p{margin:0 0 6px;overflow-wrap:anywhere}
.gl-card p a{color:var(--eo-blue)}
.gl-card--see{background:#fffaf0}
.gl-card--see p{font-weight:600}
.gl-sub{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px}
.gl-sub a{color:var(--eo-blue)}
.gl-links{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0!important;padding-top:4px}
.gl-links a{font:600 .74rem/1.4 var(--eo-label);text-transform:uppercase;letter-spacing:.04em;color:var(--eo-ink);border:2px solid var(--eo-ink);padding:1px 7px;text-decoration:none;background:#fff;overflow-wrap:anywhere}
.gl-links a:hover,.gl-links a:focus-visible{background:var(--eo-blue);color:#fff}
/* always-there way back to the index */
.gl-fab{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:4px;padding:8px 11px;background:#ffd400;border:2.5px solid var(--eo-ink);box-shadow:3px 3px 0 var(--eo-ink);
  font:400 1.05rem/1 var(--eo-display);color:var(--eo-ink);text-decoration:none}
.gl-fab:hover,.gl-fab:focus-visible{background:var(--eo-blue);color:#fff}
.gl-src{font-size:.82rem;line-height:1.5;color:var(--eo-muted);margin:16px 0 0;max-width:90ch}
@media (max-width:760px){
  .gl-index ul{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .gl-index a,.gl-index span{font-size:1.2rem;min-height:40px}
  .gl-pop{grid-template-columns:70px 1fr;padding:10px}
  .gl-pop li a{font-size:1.6rem}
}
@media (max-width:620px){
  .gl-hero .gl-pop{display:none}
  .gl-intro{font-size:.92rem}
  .gl-card{padding:8px 10px 9px}
  .gl-filter label{flex-basis:100%}
}
@media print{.gl-card,.gl-index,.gl-letter{box-shadow:none}.gl-filter,.gl-fab,.gl-back{display:none}}

/* sections, cards and the index clear the sticky Know How bar when jumped to */
.gl-sec,.gl-card,.gl-index{scroll-margin-top:64px}
/* photos (1 Nov 2026): old Cookeryonline photos at natural size or smaller, Wikimedia Commons stock at 225x150; square corners, ink border */
.gl-ph{margin:2px 0 8px;align-self:flex-start;max-width:100%}
.gl-ph img{display:block;box-sizing:content-box;max-width:calc(100% - 4px);height:auto;border:2px solid var(--eo-ink);border-radius:0;background:#fff}
.gl-ph figcaption{margin-top:3px;font-size:.7rem;line-height:1.3;color:#555;overflow-wrap:anywhere}
.gl-ph figcaption a{color:inherit}