/* Core Research — design tokens + catalogue index
   Tokens are canonical, from 02-homepage-spec-v1.2.md §1.1. */

:root{
  --cr-night:#0a0812; --cr-night2:#110e1c; --cr-night3:#171327; --cr-nline:#282237;
  --cr-violet:#7c3aed; --cr-violet2:#9061f9; --cr-violet3:#b79dfc;
  --cr-cream:#f0ece4; --cr-cream2:#e6e1d6; --cr-white:#ffffff;
  --cr-ink:#14121c; --cr-ink2:#5a5570; --cr-ink3:#4a4560; --cr-lline:#ddd8ce;
  --cr-dm:#c9c4da; --cr-dm2:#a49ec0; --cr-mint:#0a6640; --cr-amber:#7a5106;
  --cr-disp:Sora,"Helvetica Neue",Arial,sans-serif;
  --cr-body:Manrope,"Helvetica Neue",Arial,sans-serif;
  --cr-mn:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --cr-e:cubic-bezier(.22,.7,.3,1);
}

/* ---------- catalogue index ---------- */
.cr-idx{font-family:var(--cr-body);color:var(--cr-ink);margin:0 0 2.5rem}

.cr-idx__lead{max-width:62ch;color:var(--cr-ink2);font-size:16.5px;line-height:1.6;margin:0 0 1.25rem}

.cr-idx__jump{display:flex;flex-wrap:wrap;gap:2px;padding:10px 0;margin:0 0 1.5rem;
  border-top:1px solid var(--cr-lline);border-bottom:1px solid var(--cr-lline);overflow-x:auto}
.cr-idx__jump a,.cr-idx__jump span{min-width:36px;min-height:44px;display:flex;align-items:center;
  justify-content:center;font:700 13px/1 var(--cr-mn);border-radius:8px;text-decoration:none}
.cr-idx__jump a{color:var(--cr-ink)}
.cr-idx__jump a:hover,.cr-idx__jump a:focus-visible{background:var(--cr-cream);color:var(--cr-violet)}
.cr-idx__jump span{color:var(--cr-lline)}

/* width-driven, so the index adapts to whatever container the template gives it */
.cr-idx__cols{columns:20rem auto;column-gap:clamp(22px,3vw,44px)}
.cr-idx{max-width:1240px;margin-left:auto;margin-right:auto}
.cr-idx__name{overflow-wrap:break-word;hyphens:none}

.cr-idx__grp{break-inside:avoid-column;margin-bottom:22px}
.cr-idx__letter{font:700 22px/1 var(--cr-disp);color:var(--cr-ink);padding-bottom:7px;
  border-bottom:1px solid var(--cr-lline);scroll-margin-top:110px;margin:0 0 .35rem;letter-spacing:-.02em}

.cr-idx ul{list-style:none;margin:0;padding:0}
.cr-idx li{margin:0}
.cr-idx__row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  min-height:44px;padding:9px 10px;border-radius:8px;border-bottom:1px solid var(--cr-lline);
  text-decoration:none;transition:background .15s var(--cr-e)}
.cr-idx li:last-child .cr-idx__row{border-bottom:0}
.cr-idx__row:hover{background:var(--cr-cream)}
.cr-idx__row:hover .cr-idx__name{color:var(--cr-violet)}
.cr-idx__row:focus-visible{outline:2px solid var(--cr-violet2);outline-offset:2px}

.cr-idx__name{font:600 15px/1.3 var(--cr-body);color:var(--cr-ink)}
.cr-idx__fmt{font:500 10.5px/1.3 var(--cr-mn);letter-spacing:.08em;text-transform:uppercase;color:var(--cr-ink3)}
.cr-idx__oos{display:block;margin-top:3px;font:600 10px/1 var(--cr-mn);letter-spacing:.08em;
  text-transform:uppercase;color:var(--cr-amber)}
.cr-idx__price{font:700 14px/1.3 var(--cr-disp);color:var(--cr-ink);
  font-variant-numeric:tabular-nums;text-align:right}

/* ---------- category archive description ---------- */
.term-description,.woocommerce-product-category .term-description{
  max-width:62ch;color:var(--cr-ink2);font-family:var(--cr-body);font-size:16.5px;line-height:1.6;
  margin:0 0 2rem}

@media (prefers-reduced-motion:reduce){
  .cr-idx__row{transition:none}
}

/* navbar brand lockup. The logo is uploaded at 391x176 for retina and lives in
   a.custom-logo-link (not .navbar-brand), so cap its displayed height there. */
.custom-logo-link{display:inline-flex;align-items:center;padding:.2rem 0}
img.custom-logo{height:46px!important;width:auto!important;max-width:none!important}
.navbar .text-muted,.navbar small{font-family:var(--cr-body);font-size:11px;letter-spacing:.04em}
@media(max-width:576px){img.custom-logo{height:34px!important}}

/* ---------------------------------------------------------------- site footer */
.cr-foot{background:var(--cr-night);color:var(--cr-dm2);font-family:var(--cr-body);padding:clamp(44px,5vw,76px) 0 clamp(24px,3vw,34px);margin-top:0}
.cr-foot__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.cr-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,48px)}
@media(max-width:1000px){.cr-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cr-foot__grid{grid-template-columns:1fr}}
.cr-foot__logo{height:52px;width:auto;margin-bottom:1rem}
.cr-foot__tag{font-size:14px;line-height:1.6;color:var(--cr-dm2);max-width:38ch;margin:0}
.cr-foot__h{font:600 11px/1 var(--cr-mn);letter-spacing:.2em;text-transform:uppercase;color:var(--cr-violet3);margin:0 0 1rem}
.cr-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cr-foot__list a{color:var(--cr-dm);text-decoration:none;font-size:14px;line-height:1.4}
.cr-foot__list a:hover{color:#fff}
.cr-foot__list--plain li{font-size:13px;line-height:1.5;color:var(--cr-dm2)}
.cr-foot__tbc{font:600 10.5px/1 var(--cr-mn);letter-spacing:.1em;color:var(--cr-amber);background:rgba(122,81,6,.16);padding:4px 8px;border-radius:6px;white-space:nowrap}
.cr-foot__ruo{margin:clamp(30px,4vw,52px) 0 0;padding-top:1.4rem;border-top:1px solid var(--cr-nline);font:500 12px/1.7 var(--cr-mn);color:var(--cr-dm2);max-width:92ch}
.cr-foot__legal{margin:1rem 0 0;font-size:12px;color:var(--cr-dm2)}
body .site-footer:empty{display:none}

/* footer specificity fixes.
   - body.cr-template a (0,1,2) outranks .cr-foot__list a (0,1,1), so footer
     links were rendering violet instead of the muted dark-surface colour.
   - the logo had no winning height rule and fell back to intrinsic size.
   - the theme's own .site-footer renders an empty dark strip above ours. */
.cr-foot .cr-foot__list a,body .cr-foot .cr-foot__list a{color:var(--cr-dm)!important}
.cr-foot .cr-foot__list a:hover,body .cr-foot .cr-foot__list a:hover{color:#fff!important}
.cr-foot img.cr-foot__logo,body .cr-foot .cr-foot__logo{height:46px!important;width:auto!important;max-width:none!important;margin-bottom:1.1rem}
body .site-footer{display:none!important}

/* five footer columns once the support routes exist */
.cr-foot__grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr 1.2fr}
@media(max-width:1100px){.cr-foot__grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.cr-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cr-foot__grid{grid-template-columns:1fr}}