/* =============================================================
   FONT PREVIEW B — Source Serif 4 + Public Sans (fully coherent).
   Directory-site skin. Body/UI = Public Sans, all headings AND
   the wordmark = Source Serif 4. This matches the education
   site's restored "old font". Self-hosted, no runtime Google
   Fonts. Only the type differs from site-crimson.css; everything
   else is identical so it is a clean font-only comparison.
   Unbranded.
   ============================================================= */

/* ---- self-hosted fonts (no runtime Google Fonts) ---- */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/public-sans-var.woff2") format("woff2");}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../fonts/source-serif-4-var.woff2") format("woff2");}

:root{
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1.06rem;
  line-height:1.6;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,5vw,40px);}

/* preview ribbon */
.preview-ribbon{
  background:var(--surface-2);color:var(--text-faint);border-bottom:1px solid var(--border);
  text-align:center;font-size:var(--fs-xs);padding:5px 12px;letter-spacing:.02em;
}

/* header (unbranded) */
.site-head{background:var(--bg);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:20;}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap;}
.wordmark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--text);line-height:1.1;}
.wordmark:hover{text-decoration:none;color:var(--text);}
.brand-mark{height:34px;width:auto;display:block;border-radius:6px;}
.wordmark-name{color:var(--text);}
.wordmark-tld{color:var(--text-faint);font-weight:500;}
@media (max-width:600px){ .wordmark{font-size:17px;} .brand-mark{height:28px;} }
@media (max-width:430px){ .wordmark-tld{display:none;} }
.head-back{font-family:var(--font);font-weight:700;font-size:var(--fs-sm);color:var(--text-dim);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--border);}
.head-back:hover{background:var(--surface-2);color:var(--text);}

/* directory hero */
.dir-hero{padding:clamp(26px,5vw,46px) 0 clamp(10px,2vw,18px);}
.dir-hero h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.9rem,5.5vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:0;max-width:16ch;}
.dir-hero p{font-size:clamp(1.05rem,2.4vw,1.25rem);color:var(--text-dim);max-width:52ch;margin:14px 0 0;line-height:1.5;}

/* footer */
.site-foot{border-top:1px solid var(--border);margin-top:clamp(40px,6vw,72px);padding:clamp(26px,4vw,40px) 0;}
.site-foot .disclaimer-line{font-family:var(--font-serif);font-size:var(--fs-md);color:var(--text-dim);margin:0 0 8px;}
.site-foot .foot-note{font-size:var(--fs-sm);color:var(--text-faint);margin:0;max-width:60ch;}
.site-foot a{color:var(--accent-2);}

/* the directory section already carries its own top margin from styles.css;
   trim it so the hero sits close to the filters. */
#directory{padding-top:0;}
.dir-header{margin-top:var(--space-3);}