/* Theme tokens */
:root {
  --ink: #2F4F4F;
  --text: #333333;
  --rule: #4A4A4A;
  --link: #774b4b;
  --link-hover: #2E8B57;
}

/* Limit global font to body; headings are set per-section */
body {
  font-family: "EB Garamond", "Playfair Display", serif;
  color: var(--text);
  line-height: 1.55;
}

/* ---------------------------------------
   PORTFOLIO: Typography
   --------------------------------------- */
.portfolio h1,
.portfolio h2,
.portfolio h3,
.portfolio h4 {
  color: var(--ink);
  font-family: "Playfair Display", serif;
  font-weight: 600;
}

/* Fluid, sensible sizes across devices */
.portfolio h1 {
  /* mobile → desktop: 2rem..3.25rem */
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: clamp(1px, 0.5vw, 6px);
  text-align: center;
  margin: 2rem 0;
}

.portfolio h2 {
  /* 1.5rem..2.25rem */
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  text-align: left;
  margin: 1.5rem 0;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0.25rem;
}

.portfolio h3 {
  /* 1.25rem..2rem */
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  margin: 1.25rem 0;
  border-bottom: 3px solid var(--rule); /* px/rem instead of vw */
  padding-bottom: 0.35rem;
}

.portfolio h4 {
  /* 1.1rem..1.5rem */
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  text-align: center;
  margin: 1rem 0;
}

/* Paragraphs & captions scoped to .portfolio */
.portfolio p,
.portfolio figcaption {
  font-family: "EB Garamond", "Playfair Display", serif;
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);
}

/* Links scoped to .portfolio */
.portfolio a {
  text-decoration: none;
  font-weight: 700;
  color: var(--link);
}
.portfolio a:hover { color: var(--link-hover); }

/* ---------------------------------------
   PROJECT DETAIL: text + lists + links
   --------------------------------------- */
.project-detail p,
.project-detail li,
.project-detail figcaption {
  font-family: "EB Garamond", "Playfair Display", serif;
  font-size: clamp(1rem, 2.8vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);
}

.project-detail ul,
.project-detail ol {
  margin-left: 1.25rem;
  padding-left: 0.25rem;
}

.project-detail li { list-style: disc; }

.project-detail a {
  text-decoration: none;
  font-weight: 700;
  color: var(--link);
}
.project-detail a:hover { color: var(--link-hover); }

/* ---------------------------------------
   Utilities (optional, helpful for layout)
   --------------------------------------- */
.portfolio .rule {
  border-bottom: 2px solid var(--rule);
  margin: 1.25rem 0;
}

.portfolio .center {
  text-align: center;
}

.portfolio .mt-2 { margin-top: 0.5rem; }
.portfolio .mt-4 { margin-top: 1rem; }
.portfolio .mt-6 { margin-top: 1.5rem; }
.portfolio .mb-2 { margin-bottom: 0.5rem; }
.portfolio .mb-4 { margin-bottom: 1rem; }
.portfolio .mb-6 { margin-bottom: 1.5rem; }

/* ---------------------------------------
   Desktop refinements (optional)
   --------------------------------------- */
@media (min-width: 1024px) {
  .portfolio h2 { border-bottom-width: 2px; }
  .portfolio h3 { border-bottom-width: 3px; }

  /* If you want slightly smaller body type on large screens: */
  .portfolio p,
  .portfolio figcaption,
  .project-detail p,
  .project-detail li,
  .project-detail figcaption {
    font-size: 1rem;
  }
}