/* =============================================================
   FONT PREVIEW A — Crimson Text + Nunito (fully coherent).
   Directory-site skin. Body/UI = Nunito, all headings AND the
   wordmark = Crimson Text. Self-hosted, no runtime Google Fonts.
   Only the type differs from site-serif.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:"Crimson Text";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/crimson-400.woff2") format("woff2");}
@font-face{font-family:"Crimson Text";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/crimson-400i.woff2") format("woff2");}
@font-face{font-family:"Crimson Text";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/crimson-600.woff2") format("woff2");}
@font-face{font-family:"Crimson Text";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/crimson-700.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/nunito-var.woff2") format("woff2");}

:root{
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Crimson Text", 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:"Crimson Text",Georgia,"Times New Roman",serif;font-weight:600;font-size:22px;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:19px;} .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);}