@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-humanist: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-size-mobile: 16px;
  --body-size-desktop: 17px;
  --body-line-height: 1.7;
  --heading-line-height: 1.3;
  --measure-max: 44rem;
  --text-body: #2b2b2b;
  --text-meta: #555555;
  --focus-ring: #3d783d;
  --focus-ring-soft: rgba(61, 120, 61, 0.2);
  --brand-primary: #7c3aed;
  --brand-primary-hover: #6d28d9;
}

html {
  font-size: var(--body-size-mobile);
}

@media (min-width: 768px) {
  html {
    font-size: var(--body-size-desktop);
  }
}

body {
  font-family: var(--font-humanist);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--body-line-height);
  color: var(--text-body);
  text-wrap: pretty;
}

.font-sans,
.font-serif {
  font-family: var(--font-humanist);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-humanist);
  font-weight: 600;
  line-height: var(--heading-line-height);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.25rem, 1.18rem + 0.45vw, 1.375rem);
}

.brand-heading {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.brand-accent {
  color: #A67C00;
}

@media (min-width: 768px) {
  h2 {
    font-size: 1.875rem;
  }
}

section.relative.min-h-screen h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.hero-preline {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  max-inline-size: 35rem;
  margin-bottom: 0.75rem;
}

.hero-subheading {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
  max-inline-size: 38.75rem;
  margin-bottom: 1.9rem;
}

.hero-cta {
  margin-top: 0;
}

@media (min-width: 768px) {
  section.relative.min-h-screen {
    padding-top: 7rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  section.relative.min-h-screen h1 {
    font-size: 3rem;
    line-height: 1.15;
  }
}

.measure {
  max-inline-size: var(--measure-max);
}

.measure > p,
.measure > li,
.measure > div > p {
  max-inline-size: var(--measure-max);
}

#about.measure,
#about .measure,
#about .measure p {
  line-height: 1.7;
}

#about .measure p {
  margin-bottom: 1.25rem;
}

.font-thin,
.font-extralight,
.font-light {
  font-weight: 400;
}

:where(button, [type="button"], [type="submit"], a[class*="px-"][class*="py-"]) {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.text-xs,
.text-sm,
small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-meta);
}

a[href] {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

a[href]:hover {
  text-decoration-thickness: 0.11em;
}

a[href][class*="px-"],
a[href][class*="rounded"],
a[href][class*="inline-block"],
a[href][class*="inline-flex"] {
  text-decoration: none;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}

/* Self-assessment UX/accessibility refinements */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 60;
  padding: 0.4rem 0.875rem;
  border-radius: 9999px;
  background: #ffffff;
  color: var(--brand-primary);
  font-size: 0.875rem;
  border: 1px solid #e7e5e4;
  text-decoration: underline;
}

.skip-link:focus-visible {
  top: 0.75rem;
}

.assessment-question {
  border-color: #e7e5e4;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 250ms ease;
}

.assessment-question:hover {
  border-color: #c3e6c3;
}

.assessment-question:focus-within {
  border-color: #73b673;
  box-shadow: 0 0 0 3px rgba(115, 182, 115, 0.14);
}

.assessment-question.is-answered {
  opacity: 0.45;
}

.assessment-progress-track {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 0.625rem;
  border-radius: 9999px;
  background: #e7e5e4;
  overflow: hidden;
  border: 0;
}

.assessment-progress-track::-webkit-progress-bar {
  background: #e7e5e4;
  border-radius: inherit;
}

.assessment-progress-track::-webkit-progress-value {
  background: linear-gradient(90deg, #73b673, #529652);
  border-radius: inherit;
}

.assessment-progress-track::-moz-progress-bar {
  background: linear-gradient(90deg, #73b673, #529652);
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-question,
  .assessment-question.is-answered {
    transition: none;
  }
}

.bg-brand {
  background-color: var(--brand-primary);
}

.bg-brand-hover:hover,
.bg-brand-hover:focus-visible {
  background-color: var(--brand-primary-hover);
}

/* ─── Dark mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --text-body: #d4d0cc;
    --text-meta: #a8a29e;
    --focus-ring: #86c086;
    --focus-ring-soft: rgba(134, 192, 134, 0.2);
    --brand-primary: #a78bfa;
    --brand-primary-hover: #8b5cf6;
  }

  .text-xs,
  .text-sm,
  small {
    color: var(--text-meta);
  }

  .skip-link {
    background: #292524;
    color: var(--brand-primary);
    border-color: #44403c;
  }

  .assessment-question {
    border-color: #44403c;
  }

  .assessment-question:hover {
    border-color: #326132;
  }

  .assessment-question:focus-within {
    border-color: #529652;
    box-shadow: 0 0 0 3px rgba(82, 150, 82, 0.18);
  }

  .assessment-progress-track,
  .assessment-progress-track::-webkit-progress-bar {
    background: #44403c;
  }
}