/* ---------- Tokens ---------- */
:root {
  --cream:        #FCFAF7;
  --cream-warm:   #F4EAD0;
  --cream-rule:   #E5DCC7;
  --navy:         #0E1B2C;
  --navy-deep:    #06101E;
  --gold:         #C49A3F;
  --red:          #B23A2A;
  --green:        #2C6E48;
  --ink:          #2A3340;
  --ink-soft:     #5C6675;
  --ink-faint:    #A8B3C2;

  --serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-r: "Newsreader", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1440px;
  --padx: 80px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

#mandate, #progress, #academic, #join { scroll-margin-top: 96px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--padx);
  padding-right: var(--padx);
}

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-block;
}
.eyebrow--dark   { color: var(--navy); letter-spacing: 0.2em; }
.eyebrow--muted  { color: var(--ink-soft); font-weight: 500; letter-spacing: 0.18em; font-size: 10px; }
.eyebrow--gold   { color: var(--gold); }
.eyebrow--red    { color: var(--red); }

.serif       { font-family: var(--serif); }
.italic      { font-style: italic; }

.bar {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
}
.bar--gold { background: var(--gold); }

.rule {
  border: 0;
  border-top: 1px solid var(--cream-rule);
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 2px;
  border: 1.2px solid transparent;
  transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--small    { font-size: 10.5px; padding: 10px 18px; letter-spacing: 0.16em; }
.btn--dark     { background: var(--navy);  color: var(--cream); }
.btn--dark:hover  { background: #1a2a40; }
.btn--outline  { background: var(--cream); color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--cream); }
.btn--gold     { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: #d4ab50; }
.btn--gold-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 500;
}
.btn--gold-outline:hover { background: var(--gold); color: var(--navy); }

/* ---------- Nav ---------- */
.nav {
  background: var(--cream);
  border-bottom: 1px solid var(--cream-rule);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--padx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.2px solid var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand__mark span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  line-height: 1;
}
.brand__mark--gold       { border-color: var(--gold); width: 28px; height: 28px; border-width: 1px; }
.brand__mark--gold span  { font-size: 14px; color: var(--gold); }

.brand__text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.brand__name {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--navy);
}
.brand__name--gold  { color: var(--gold); }
.brand__name--short { display: none; letter-spacing: 0.2em; }
.brand__sub {
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* ---------- Mobile nav toggle ---------- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 6px;
  margin: -6px;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--navy);
  transition: transform .3s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__links {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.nav__links a:not(.btn) {
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
  position: relative;
}
.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .25s ease;
}
.nav__links a:not(.btn):hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 48px;
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.tagline {
  margin: 24px 0 0;
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  grid-template-areas:
    "title    figure"
    "subtitle figure"
    "ctas     figure";
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  row-gap: 20px;
  margin-top: 40px;
  align-items: start;
}
.hero__title  { grid-area: title; }
.hero__sub    { grid-area: subtitle; }
.hero__ctas   { grid-area: ctas; align-self: end; }
.hero__figure { grid-area: figure; }

.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 96px;
  letter-spacing: -0.018em;
  line-height: 1;
  margin: 0;
  color: var(--navy);
  display: flex;
  flex-direction: column;
}
.display__line { display: block; }
.display .italic { font-style: italic; line-height: 1.05; }

.hero__sub {
  font-family: var(--serif-r);
  font-style: italic;
  font-size: 18px;
  color: var(--navy);
  margin: 0;
}
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
}

.hero__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__photo {
  width: 100%;
  height: 520px;
  background-image: url("gold_coast_photo.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.caption {
  display: flex;
  align-items: stretch;
  gap: 10px;
  color: var(--ink-soft);
  font-family: var(--serif-r);
  font-style: italic;
  font-size: 11px;
  line-height: 1.4;
}
.caption__bar {
  display: block;
  width: 2px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ---------- Kente Strip ---------- */
.kente {
  height: 14px;
  width: 100%;
  background-color: var(--navy);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--navy)      0,    var(--navy)      24px,
      transparent      24px, transparent      25px,
      var(--gold)      25px, var(--gold)      67px,
      transparent      67px, transparent      68px,
      var(--red)       68px, var(--red)       98px,
      transparent      98px, transparent      99px,
      var(--cream-warm) 99px, var(--cream-warm) 113px,
      transparent      113px, transparent      114px,
      var(--green)     114px, var(--green)     156px,
      transparent      156px, transparent      157px,
      var(--navy)      157px, var(--navy)      177px,
      transparent      177px, transparent      178px,
      var(--gold)      178px, var(--gold)      220px,
      transparent      220px, transparent      221px,
      var(--red)       221px, var(--red)       251px,
      transparent      251px, transparent      252px,
      var(--navy)      252px, var(--navy)      272px,
      transparent      272px, transparent      273px,
      var(--green)     273px, var(--green)     315px,
      transparent      315px, transparent      316px,
      var(--cream-warm) 316px, var(--cream-warm) 330px,
      transparent      330px, transparent      331px,
      var(--red)       331px, var(--red)       361px,
      transparent      361px, transparent      362px,
      var(--navy)      362px, var(--navy)      382px,
      transparent      382px, transparent      383px,
      var(--gold)      383px, var(--gold)      425px,
      transparent      425px, transparent      426px
    );
}

/* ---------- Intro ---------- */
.intro {
  padding: 80px 0 40px;
}
.intro__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}
.intro__head { display: flex; flex-direction: column; gap: 16px; }
.serif-display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
}
.serif-display--light { color: var(--cream-warm); font-size: 40px; }

.intro__body { display: flex; flex-direction: column; gap: 16px; }
.intro__body p {
  margin: 0;
  font-family: var(--serif-r);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Mandate + Progress ---------- */
.mandate-progress {
  padding: 40px 0 80px;
}
.mandate-progress__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.mandate { display: flex; flex-direction: column; gap: 14px; }
.lede {
  margin: 0;
  font-family: var(--serif-r);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.mandate__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.mandate__list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--cream-rule);
  font-family: var(--serif-r);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.mandate__list .num {
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.11em;
  flex-shrink: 0;
  width: 32px;
  padding-top: 2px;
}

.progress {
  background: var(--cream-warm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.progress__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--cream-rule);
  font-family: var(--serif-r);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.progress__list .star {
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
  width: 16px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* ---------- Ghana note ---------- */
.ghana-note { padding: 0 0 40px; }
.note {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 32px 40px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.note p {
  margin: 0;
  font-family: var(--serif-r);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--navy);
}

/* ---------- Academic ---------- */
.academic {
  background: var(--navy);
  padding: 80px 0;
  color: var(--cream-warm);
}
.academic__grid {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 64px;
  align-items: center;
}
.academic__photo {
  height: 380px;
  width: 100%;
  background-image: url("university_photo.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.academic__copy { display: flex; flex-direction: column; gap: 18px; }
.academic__copy p {
  margin: 0;
  font-family: var(--serif-r);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ---------- Quote ---------- */
.quote-section {
  background: var(--cream);
  padding: 80px 0;
}
.quote-section__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--padx);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.quote__mark {
  font-family: var(--serif);
  font-size: 80px;
  color: var(--gold);
  line-height: 0.6;
  margin: 0;
  display: block;
}
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.35;
  color: var(--navy);
}
.quote__attribution {
  margin: 0;
  font-family: var(--serif-r);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- CTA ---------- */
.cta {
  background: var(--navy);
  padding: 96px 0;
}
.cta__inner {
  max-width: 960px;
  margin: 0 auto;
  padding-left: var(--padx);
  padding-right: var(--padx);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.cta__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--cream-warm);
}
.cta__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-deep);
  color: var(--ink-soft);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 28px;
  gap: 24px;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer__meta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  font-weight: 500;
}
.footer__meta a {
  color: var(--gold);
  transition: opacity .2s ease;
}
.footer__meta a:hover { opacity: .8; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1100px) {
  :root { --padx: 48px; }
  .display { font-size: 72px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .mandate-progress__grid { grid-template-columns: 1fr; }
  .academic__grid { grid-template-columns: 1fr; gap: 40px; }
  .academic__photo { height: 320px; }
  .cta__title { font-size: 36px; }
  .serif-display--light { font-size: 32px; }
}

/* ---------- Responsive: mobile (matches Pencil "DAHN Website - Mobile" frame) ---------- */
@media (max-width: 760px) {
  :root { --padx: 20px; }

  /* Nav */
  .nav__inner { padding: 14px var(--padx); gap: 12px; }
  .brand__mark      { width: 28px; height: 28px; border-width: 1.2px; }
  .brand__mark span { font-size: 14px; }
  .brand__text      { gap: 0; }
  .brand__name--full { display: none; }
  .brand__name--short { display: inline; font-size: 11px; }
  .brand__sub       { display: none; }
  .nav__toggle      { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--padx) 20px;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav__links a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--cream-rule);
    font-size: 14px;
  }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: 12px; align-self: flex-start; }
  .nav.is-open .nav__links {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* Hero — stack title / subtitle / figure / CTA */
  .hero { padding: 28px 0 24px; }
  .hero__meta { margin-bottom: 14px; }
  .hero__meta .eyebrow--dark { font-size: 9px; letter-spacing: 0.18em; }
  .hero__meta .eyebrow--muted { font-size: 9px; }
  .tagline { font-size: 10px; letter-spacing: 0.22em; margin-top: 16px; }
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "subtitle"
      "figure"
      "ctas";
    grid-template-rows: auto;
    row-gap: 16px;
    margin-top: 20px;
  }
  .display { font-size: 42px; letter-spacing: -0.014em; line-height: 1.02; }
  .display .italic { line-height: 1.1; }
  .hero__sub { font-size: 14px; }
  .hero__photo { height: 240px; }
  .hero__ctas { flex-direction: column; align-items: stretch; padding-top: 4px; gap: 12px; }
  .hero__ctas .btn { width: 100%; padding: 14px 20px; }
  .hero__ctas .btn--outline { display: none; }

  /* Kente */
  .kente { height: 10px; }

  /* Intro */
  .intro { padding: 40px 0 24px; }
  .intro__grid { grid-template-columns: 1fr; gap: 14px; }
  .intro__head { gap: 10px; }
  .serif-display { font-size: 24px; line-height: 1.15; }
  .bar { width: 36px; }
  .intro__body { gap: 14px; }
  .intro__body p { font-size: 14.5px; line-height: 1.5; }

  /* Mandate + Progress */
  .mandate-progress { padding: 0 0 0; }
  .mandate-progress__grid { gap: 0; }
  .mandate { padding: 24px var(--padx); background: var(--cream); }
  .lede { font-size: 14px; }
  .mandate__list li { padding: 12px 0; font-size: 14px; gap: 14px; }
  .mandate__list .num { width: 24px; font-size: 11px; }
  .progress {
    padding: 24px var(--padx);
    margin-left: calc(-1 * var(--padx));
    margin-right: calc(-1 * var(--padx));
  }
  .progress__list li { font-size: 14px; padding: 12px 0; gap: 12px; }
  .progress__list .star { width: 14px; font-size: 12px; }

  /* Ghana note */
  .ghana-note { padding: 24px 0; }
  .note { padding: 20px; gap: 10px; }
  .note p { font-size: 15px; line-height: 1.45; }

  /* Academic — photo above copy */
  .academic { padding: 0; }
  .academic__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .academic__photo { height: 220px; }
  .academic__copy { padding: 40px 24px; gap: 14px; }
  .serif-display--light { font-size: 26px; }
  .academic__copy p { font-size: 14px; line-height: 1.5; }

  /* Quote */
  .quote-section { padding: 56px 0; }
  .quote-section__inner { gap: 18px; padding: 0 24px; }
  .quote__mark { font-size: 56px; }
  .quote__text { font-size: 19px; line-height: 1.35; }
  .quote__attribution { font-size: 14px; line-height: 1.5; }

  /* CTA */
  .cta { padding: 64px 0; }
  .cta__inner { gap: 24px; padding: 0 24px; }
  .cta__title { font-size: 24px; line-height: 1.25; }
  .cta__actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cta__actions .btn { width: 100%; padding: 16px 24px; }

  /* Footer */
  .footer__inner { padding: 24px var(--padx); gap: 16px; }
  .footer__brand { gap: 10px; }
  .brand__mark--gold      { width: 24px; height: 24px; }
  .brand__mark--gold span { font-size: 12px; }
  .footer .brand__name--gold { display: none; }
  .footer__meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 9.5px;
  }
  .footer__meta a { font-size: 9.5px; }
}