/* =========================================
   VARIABLES
========================================= */

:root {

  --background: #f7f5f0;

  --ink: #161a2e;

  --white: #ffffff;

  --lavender: #dfe6fb;

  --lavender-light: #eef2fd;

  --purple: #2b4fd8;

  --purple-dark: #1d3596;

  --lemon: #f8ebc4;

  --pink: #f6e4da;

  --mint: #e2efe6;

  /* pulled from the headshot — used only around the portrait */
  --cobalt: #2b4fd8;

  --gold-light: #fdf0c8;

  --shadow: 0 1px 2px rgba(22,26,46,.06), 0 8px 16px -6px rgba(22,26,46,.24);

  --shadow-small: 0 1px 2px rgba(22,26,46,.06), 0 6px 12px -5px rgba(22,26,46,.24);

}


/* =========================================
   RESET
========================================= */

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  overflow-x: hidden;

  color: var(--ink);

  font-family:
    "Inter",
    sans-serif;

  background:

    radial-gradient(
      circle at 1px 1px,
      rgba(43,79,216, 0.09) 1px,
      transparent 1.4px
    )
    0 0 / 24px 24px,

    linear-gradient(
      180deg,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0)
    ),

    var(--background);

}


a {

  color: inherit;

  text-decoration: none;

}

.skip-link {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  font-weight: 700;
}

.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--gold-light);
  color: var(--ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--purple-dark);
  outline-offset: 3px;
}


img {

  display: block;

  max-width: 100%;

}


/* =========================================
   CUSTOM CURSOR
========================================= */

body {

  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 1c1.1 6 4.9 9.8 10.9 10.9C16.9 13 13.1 16.8 12 22.8 10.9 16.8 7.1 13 1.1 11.9 7.1 10.8 10.9 7 12 1z" fill="%235a5ab4" stroke="%23ffffff" stroke-width="1.6" stroke-linejoin="round"/></svg>') 14 14,
    auto;

}


a,
button,
summary,
label,
[role="button"],
.site-nav a {

  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path d="M12 21C5 15 2.5 11.4 2.5 8A4.5 4.5 0 0 1 12 5.6 4.5 4.5 0 0 1 21.5 8c0 3.4-2.5 7-9.5 13z" fill="%235a5ab4" stroke="%23ffffff" stroke-width="1.6" stroke-linejoin="round"/></svg>') 14 13,
    pointer;

}


input,
textarea {

  cursor: text;

}


/* =========================================
   BACKGROUND DECORATIONS
========================================= */

.page-background {

  position: fixed;

  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;

}


/* =========================================
   SANKOFA
========================================= */

.bg-sankofa {

  position: absolute;

  display: block;

  object-fit: contain;

  opacity: 0.085;

  filter:

    invert(38%)

    sepia(17%)

    saturate(1700%)

    hue-rotate(202deg)

    brightness(92%)

    contrast(85%);

}


.sankofa-one {

  top: 11%;

  right: 2%;

  width: 118px;

  transform:
    rotate(7deg);

}


.sankofa-two {

  top: 53%;

  left: 2%;

  width: 86px;

  transform:
    rotate(-8deg);

}


.sankofa-three {

  bottom: 5%;

  right: 8%;

  width: 74px;

  transform:
    rotate(11deg);

}


/* =========================================
   HEADER
========================================= */

.site-header {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  padding:
    22px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

}


.site-logo {

  font-family:
    "Fraunces",
    serif;

  font-size: 1rem;

  font-weight: 700;

}


.site-nav {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 5px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );

  box-shadow:
    var(--shadow-small);

  backdrop-filter:
    blur(8px);

}


.site-nav a {

  padding:
    7px 11px;

  border-radius:
    999px;

  font-size:
    0.76rem;

  font-weight: 700;

  transition:
    0.16s ease;

}


.site-nav a:hover {

  background:
    var(--lavender-light);

}


.site-nav .active-link {

  background:
    var(--lavender);

}


/* =========================================
   PAGE
========================================= */

.home-page {

  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    42px 0
    110px;

}


/* =========================================
   HERO
========================================= */

.home-hero {

  min-height: 605px;

  display: grid;

  grid-template-columns:

    minmax(
      0,
      1.12fr
    )

    minmax(
      350px,
      0.88fr
    );

  align-items: center;

  gap: 60px;

}


.hero-copy {

  position: relative;

  z-index: 2;

}


.hello-note {

  margin:
    28px 0
    -9px;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.85rem;

  color:
    var(--purple-dark);

}


.hero-copy h1 {

  max-width: 720px;

  margin: 0;

  font-family:
    "Fraunces",
    serif;

  font-size:
    clamp(
      3.8rem,
      8vw,
      6rem
    );

  line-height: 0.9;

  letter-spacing:
    -0.04em;

}


.hero-copy h1 span {

  display: block;

  margin-left: 53px;

  font-style: italic;

  color:
    var(--purple-dark);

}


.hero-scribble {

  width: 205px;

  height: 15px;

  margin:
    16px 0
    0 57px;

  background-image:

    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C20 2 40 12 60 6 S100 2 118 7' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"
    );

  background-size:
    100% 100%;

  background-repeat:
    no-repeat;

}


.hero-intro {

  max-width: 620px;

  margin:
    28px 0 0;

  font-size: 1.02rem;

  line-height: 1.8;

  color:
    #3e4357;

}


.second-intro {

  margin-top: 14px;

}


.second-intro em {

  font-family:
    "Caveat",
    cursive;

  font-size: 1.15rem;

  color:
    var(--purple-dark);

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 11px;

  margin-top: 25px;

}


.hero-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    11px 18px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 999px;

  box-shadow:
    var(--shadow-small);

  font-size: 0.82rem;

  font-weight: 800;

  transition:
    0.18s ease;

}


.hero-button:hover {

  transform:
    translateY(-3px);

}


.hero-button-dark {

  background:
    var(--purple-dark);

  color:
    var(--white);

}


.hero-button-light {

  background:
    var(--white);

}


.tiny-hero-note {

  margin:
    18px 0 0;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.03rem;

  color:
    #4d5368;

}


/* =========================================
   HERO COLLAGE
========================================= */

.hero-collage {

  position: relative;

  min-height: 535px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;

  padding: 18px 0 8px;

}


.photo-card {

  position: relative;

  z-index: 2;

  width:
    min(
      330px,
      78%
    );

  padding:
    12px;

  transform:
    none;

  border:
    1.5px solid
    var(--ink);

  background:
    var(--gold-light);

  box-shadow:
    0 1px 2px rgba(22,26,46,.06), 0 14px 28px -11px rgba(22,26,46,.24);

}


.photo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--cobalt);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.photo-card-header span:last-child { font-size: 1rem; line-height: 1; }


.photo-card img {

  width: 100%;

  aspect-ratio:
    4 / 5;

  object-fit: cover;

  object-position: center 30%;

  border:
    1.5px solid
    var(--ink);

}


.photo-card p {
  margin: 10px 0 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}


@media (prefers-reduced-motion: reduce) {


}


.browser-note {

  top: 5px;

  right: 58px;

  padding:
    9px 13px;

  background:
    var(--mint);

  transform:
    rotate(-4deg);

}


.browser-note p {

  margin: 0;

  font-size: 0.98rem;

  line-height: 1.15;

}


/* =========================================
   STATUS STRIP
========================================= */

.status-strip {

  margin:
    30px 0
    88px;

  padding:
    11px 0;

  overflow: hidden;

  border-top:
    1.5px solid
    var(--ink);

  border-bottom:
    1.5px solid
    var(--ink);

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );

  transform:
    none;

}


.status-track {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  padding:
    0 20px;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.22rem;

}


.strip-symbol {

  color:
    var(--purple-dark);

}


/* =========================================
   HEADINGS
========================================= */

.section-heading,
.featured-heading {

  margin-bottom: 28px;

}


.handwritten {

  margin:
    0 0 4px;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.45rem;

  color:
    var(--purple-dark);

}


.section-heading h2,
.featured-heading h2 {

  margin: 0;

  font-family:
    "Fraunces",
    serif;

  font-size:
    clamp(
      2.4rem,
      5vw,
      3.5rem
    );

  line-height: 1.05;

}


/* =========================================
   START CARDS
========================================= */

.start-section {

  margin-top: 85px;

}


.start-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 20px;

}


.start-card {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 18px;

  padding: 23px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 24px;

  box-shadow:
    var(--shadow);

  transition:
    0.18s ease;

}


.start-card:hover {

  transform:
    translateY(-5px);

}


.start-work {

  background:
    var(--lavender);

  transform:
    none;

}


.start-about {

  background:
    var(--lemon);

  transform:
    none;

}


.start-resume {

  background:
    var(--white);

  transform:
    none;

}


.start-kicker {

  margin:
    20px 0
    4px;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.1rem;

  color:
    var(--purple-dark);

}


.start-card h3 {

  margin: 0;

  font-family:
    "Fraunces",
    serif;

  font-size: 1.55rem;

}


.start-card p:not(.start-kicker) {

  margin:
    10px 0 0;

  font-size: 0.88rem;

  line-height: 1.6;

  color:
    #3e4357;

}


.start-arrow {

  position: absolute;

  top: 18px;

  right: 22px;

  line-height: 1;

  font-family:
    "Caveat",
    cursive;

  font-size: 1.8rem;

}


/* =========================================
   FEATURED RESEARCH
========================================= */

.featured-section {

  margin-top: 55px;

}


.featured-heading {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

}


.view-all-link {

  flex-shrink: 0;

  padding-bottom: 4px;

  border-bottom:
    1.5px solid
    var(--ink);

  font-size: 0.8rem;

  font-weight: 800;

}


.featured-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 20px;

}

.featured-grid.two-projects{grid-template-columns:repeat(2,minmax(0,1fr))}


.project-card {

  position: relative;

  display: flex;

  flex-direction: column;

  padding: 24px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 23px;

  box-shadow:
    var(--shadow);

}


.project-one {

  background:
    var(--white);

  transform:
    none;

}


.project-two {

  background:
    var(--lavender-light);

  transform:
    none;

}


.project-three {

  background:
    var(--lemon);

  transform:
    none;

}


.project-type {

  display: inline-block;

  width: fit-content;

  padding:
    6px 9px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 999px;

  background:
    var(--white);

  font-size: 0.62rem;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;

}


.project-card h3 {

  margin:
    18px 0
    10px;

  font-family:
    "Fraunces",
    serif;

  font-size: 1.55rem;

  line-height: 1.18;

}


.project-card > p {

  margin: 0;

  font-size: 0.87rem;

  line-height: 1.65;

  color:
    #3e4357;

}


.project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 18px;

}


.project-tags span {

  padding:
    5px 8px;

  border:
    1.5px solid
    var(--ink);

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.8
    );

  font-size: 0.67rem;

  font-weight: 700;

}


.project-card > a {

  margin-top: auto;

  padding-top: 18px;

  font-size: 0.8rem;

  font-weight: 800;

}


/* =========================================
   CONTACT CTA
========================================= */

.home-contact {

  margin-top: 112px;

  text-align: center;

}


.home-contact h2 {

  margin:
    5px 0
    10px;

  font-family:
    "Fraunces",
    serif;

  font-size:
    clamp(
      2.6rem,
      5vw,
      3.7rem
    );

}


.home-contact > p:not(.handwritten) {

  max-width: 560px;

  margin:
    0 auto;

  line-height: 1.65;

  color:
    #4d5368;

}


.home-contact .hero-button {

  margin-top: 22px;

}


/* =========================================
   FOOTER
========================================= */

.site-footer {

  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  padding:
    28px 0;

  border-top:
    1px solid
    rgba(
      26,
      26,
      26,
      0.18
    );

  text-align: center;

}


.site-footer p {

  margin: 0;

  font-size: 0.72rem;

  color:
    #4d5368;

}


/* =========================================
   TABLET
========================================= */

@media (
  max-width: 920px
) {

  .home-hero {

    grid-template-columns: 1fr;

    gap: 28px;

  }


  .hero-collage {

    width:
      min(
        520px,
        100%
      );

    margin:
      0 auto;

  }


  .start-grid {

    grid-template-columns: 1fr;

  }


  .featured-grid {

    grid-template-columns: 1fr;

  }

  .featured-grid.two-projects{grid-template-columns:1fr}


  .start-card {

    min-height: 0;

  }


  .featured-heading {

    flex-direction: column;

    align-items: flex-start;

  }


  .sankofa-one {

    right: -15px;

  }

}


/* =========================================
   MOBILE
========================================= */

@media (
  max-width: 650px
) {

  .site-header {

    flex-direction: column;

  }


  .site-nav {

    width: 100%;

    justify-content: center;

    flex-wrap: wrap;

  }


  .home-page {

    width:
      min(
        100% - 24px,
        1120px
      );

    padding-top: 24px;

  }


  .hero-copy h1 {

    font-size: 4.2rem;

  }


  .hero-copy h1 span {

    margin-left: 24px;

  }


  .hero-scribble {

    width: 170px;

    margin-left: 25px;

  }


  .hero-collage {

    min-height: 0;

  }


  .photo-card {

    width: 74%;

  }


  .browser-note {

    display: none;

  }


  .status-track {

    justify-content: flex-start;

  }


  .bg-sankofa {

    opacity: 0.09;

  }


  .sankofa-one {

    width: 82px;

  }


  .sankofa-two {

    width: 62px;

  }


  .sankofa-three {

    width: 58px;

  }

}