/* =========================================================
   GLOBAL TYPOGRAPHY & HTML ELEMENTS
   (Relies on color variables defined in base.css)
   ======================================================= */

/* Base body */
html { font-size:100%; }

body{
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  font-size:clamp(1.0625rem, 0.35vw + 1rem, 1.125rem); /* ~17–18px */
  line-height:1.65;
  color:var(--color-text-on-light);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Content measure & flow */
.prose{ max-width:68ch; }
/* Default vertical rhythm for siblings inside readable containers */
.prose > * + *{ margin-top:1.25rem; }

/* Tighten spacing when a heading is followed by text */
.prose :where(h1,h2,h3,h4,h5,h6) + :where(p,ul,ol,blockquote){ margin-top:.5rem; }

/* Add breathing room before major headings */
.prose :where(h2,h3){ margin-top:2rem; }
.prose :where(h4){ margin-top:1.5rem; }

/* =========================================================
   Headings – refined hierarchy
   ======================================================= */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .75rem;
	font-family:'Montserrat',sans-serif;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.005em;
  color:inherit;
}

h1{
  font-weight:900;
  font-size:clamp(2.5rem, 3.2vw + 1.25rem, 3.5rem);   /* 40–56px */
  line-height:1.08;
  letter-spacing:-0.015em;
  margin-bottom:1.1rem;
}

h2{
  font-weight:700;
  font-size:clamp(1.75rem, 1.9vw + 1.1rem, 2.5rem);   /* 28–40px */
  line-height:1.15;
  letter-spacing:-0.008em;
  margin-bottom:1rem;
}

h3{
  font-weight:700;
  font-size:clamp(1.3125rem, 0.95vw + 1rem, 1.75rem); /* 21–28px */
  line-height:1.28;
  margin-bottom:.85rem;
}

h4{
  font-weight:700;
  font-size:clamp(1.1875rem, 0.7vw + 1rem, 1.5rem);   /* 19–24px */
  line-height:1.32;
  margin-bottom:.75rem;
}

h5{
  font-weight:600;
  font-size:clamp(1.0625rem, 0.45vw + 1rem, 1.3125rem); /* 17–21px */
  line-height:1.38;
  margin-bottom:.6rem;
}

h6{
  font-weight:600;
  font-size:clamp(1rem, 0.35vw + .95rem, 1.125rem);   /* 16–18px */
  line-height:1.42;
  letter-spacing:.01em;
  margin-bottom:.5rem;
}

/* Optional: slightly larger H2s inside hero sections, if desired */
/* .hero h2 { font-size:clamp(1.875rem, 2.2vw + 1rem, 2.75rem); } */

/* =========================================================
   Paragraphs & ledes
   ======================================================= */
p{ margin:0 0 1rem; }

.lede{
  font-size:clamp(1.1875rem, 0.5vw + 1rem, 1.3125rem); /* 19–21px */
  line-height:1.7;
  margin-bottom:1.25rem;
}

/* Fine-print / small text utility */
.small{ font-size:.9rem; line-height:1.55; }

/* Muted helper */
.muted{ color:color-mix(in srgb, var(--color-text-on-light) 70%, #0000 30%); }

/* Eyebrow helper (pre-heading label) */
.eyebrow{
  display:block;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:color-mix(in srgb, var(--color-text-on-light) 70%, #0000 30%);
  margin-bottom:.5rem;
}

/* =========================================================
   Inline emphasis
   ======================================================= */
strong,b{ font-weight:700; }
em,i{ font-style:italic; }

/* =========================================================
   Links (text links; buttons have their own rules)
   ======================================================= */
a{
  color:inherit;
  font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
a:hover{
  color:inherit;
  text-decoration-thickness:2px;
}

/* =========================================================
   Lists
   ======================================================= */
ul,ol{ margin:0 0 1.25rem 2rem; padding:0; }
ul{ list-style:disc; }
ol{ list-style:decimal; }
li + li{ margin-top:.35rem; }

/* Tighten list spacing after a heading */
:where(h1,h2,h3,h4,h5,h6) + :where(ul,ol){ margin-top:.5rem; }

/* =========================================================
   Description lists
   ======================================================= */
dl{ margin:0 0 1.25rem; }
dt{ font-weight:700; margin-top:.75rem; }
dd{ margin-left:0; }

/* =========================================================
   Blockquotes
   ======================================================= */
blockquote{
  margin:1.5rem 0;
  padding:1rem 1.5rem;
  border-left:4px solid var(--color-primary);
  background:var(--color-light-grey);
  color:var(--color-text-on-light);
  border-radius:.5rem;
}
blockquote p:last-child{ margin-bottom:0; }
cite{ display:block; margin-top:.75rem; font-style:normal; color:var(--color-secondary); }

/* =========================================================
   Code & preformatted
   ======================================================= */
code,kbd,samp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.95em;
  background:var(--color-light-grey);
  padding:.125em .375em;
  border-radius:.25rem;
}
pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.95rem;
  line-height:1.6;
  background:var(--color-light-grey);
  color:var(--color-text-on-light);
  padding:1.5rem;
  border-radius:.5rem;
  overflow:auto;
  margin:0 0 1.5rem;
}
pre code{ background:transparent; padding:0; }

/* =========================================================
   HR
   ======================================================= */
hr{
  border:0;
  border-top:1px solid color-mix(in srgb, var(--color-text-on-light) 20%, #0000 80%);
  margin:2rem 0;
}

/* =========================================================
   Figures & media
   ======================================================= */
figure{ margin:0 0 1.25rem; }
img,svg,video,canvas{ max-width:100%; height:auto; display:block; }
figcaption{
  margin-top:.5rem;
  font-size:.9rem;
  color:color-mix(in srgb, var(--color-text-on-light) 75%, #0000 25%);
}

/* =========================================================
   Tables
   ======================================================= */
table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.5rem;
  font-size:clamp(.95rem, 0.2vw + .9rem, 1rem);
}
th,td{
  padding:.75rem 1rem;
  border-bottom:1px solid color-mix(in srgb, var(--color-text-on-light) 20%, #0000 80%);
  text-align:left;
}
th{
  font-weight:700;
  background:var(--color-light-grey);
}

/* =========================================================
   Form base typography
   ======================================================= */
input,select,textarea,button{ font:inherit; color:inherit; }
label{ display:block; font-weight:600; margin-bottom:.5rem; }
textarea{ line-height:1.5; min-height:8rem; }

/* Spacing after form groups inside .prose */
.prose :where(form) > * + *{ margin-top:1rem; }

/* =========================================================
   Superscripts/subscripts
   ======================================================= */
sup,sub{ font-size:.75em; line-height:0; position:relative; vertical-align:baseline; }
sup{ top:-0.5em; }
sub{ bottom:-0.25em; }

/* =========================================================
   Compact tweaks on very small screens
   ======================================================= */
@media (max-width:480px){
  h1{ font-size:clamp(2.25rem, 5.5vw + 1rem, 2.625rem); } /* 36–42px */
  h2{ font-size:clamp(1.5rem, 4.2vw + 1rem, 2rem); }      /* 24–32px */
  h3{ margin-bottom:.6rem; }
  h4{ margin-bottom:.6rem; }
  p { margin-bottom:1rem; }
  ul,ol{ margin-left:1.5rem; }
  .prose > * + *{ margin-top:1rem; } /* slightly tighter stack */
}

/* =========================================================
   Helpful utilities for layout contexts (optional)
   ======================================================= */
.measure-narrow{ max-width:60ch; }
.measure-wide{   max-width:80ch; }
.center-text{ text-align:center; }