/* Default set: EB Garamond + Inter */
:root{
  --font-serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Switch by fontset attribute (JS keeps this in sync) */
html[data-fontset="Cormorant Garamond1"]{
  --font-serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/*Below two options are not hosted, do not use them!*/
html[data-fontset="fraunces-source"]{
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
html[data-fontset="librebodoni-inter"]{
  --font-serif: "Libre Bodoni", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}



html[data-fontset="Source Serif 4"]{
  --font-serif: "Source Serif 4";
  --font-sans:  "Source Serif 4";
}

html[data-fontset="Cormorant Garamond"]{
  --font-serif: "Cormorant Garamond";
  --font-sans:  "Cormorant Garamond";
}


html[data-fontset="Manrope"]{
  --font-serif: "Manrope";
  --font-sans:  "Manrope";
}


html[data-fontset="EB Garamond"]{
  --font-serif: "EB Garamond";
  --font-sans:  "EB Garamond";
}


html[data-fontset="Inter"]{
  --font-serif: "Inter";
  --font-sans:  "Inter";
}


html[data-fontset="Lora"]{
  --font-serif: "Lora";
  --font-sans:  "Lora";
}


html[data-fontset="Sora"]{
  --font-serif: "Sora";
  --font-sans:  "Sora";
}

html[data-fontset="Plus Jakarta Sans"]{
  --font-serif: "Plus Jakarta Sans";
  --font-sans:  "Plus Jakarta Sans";
}





/* Global typography using the variables */
html { font-size: clamp(12px, 1.2vw, 20px); }
body{
  font-family: var(--font-sans);
  font-size: var(--fontSz0);
  line-height: 1.6;
  color: var(--font-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: proportional-nums;
}

h1,h2,h3,h4,p,blockquote{
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .005em;
  margin: 0 0 var(--fontSz-2);
  font-optical-sizing: auto;
}
h1{ font-size: var(--fontSz4); }
h2{ font-size: var(--fontSz3); }
h3{ font-size: var(--fontSz2); }
p{ font-size: var(--fontSz1); }
blockquote{ 
  font-size: var(--fontSz1);
  /*margin-left: var(--fontSz0);
  margin-right: var(--fontSz0);
  margin-top: var(--fontSz0);
  margin-bottom: var(--fontSz0);*/
 }

 q { font-style: italic; }
 
.lead{ font-size: var(--fontSz1); color:#333; }

.nav, .button{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.prose{ max-width: 65ch; }