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

:root {

  --resume-bg: #f7f5f0;

  --resume-ink: #161a2e;

  --resume-white: #ffffff;

  --resume-lavender: #dfe6fb;

  --resume-lavender-light: #eef2fd;

  --resume-purple: #2b4fd8;

  --resume-purple-dark: #1d3596;

  --resume-yellow: #f8ebc4;

  --resume-pink: #f6e4da;

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

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

}


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

.resume-page {

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

  margin: 0 auto;

  padding: 55px 0 110px;

}


/* =========================================
   BACKGROUND DOODLES
========================================= */

.resume-doodles {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;

  color: rgba(
    26,
    26,
    26,
    0.7
  );

}


.resume-doodle {

  position: absolute;

  font-size: 1.5rem;

}


.doodle-one {

  top: 12%;

  left: 5%;

}


.doodle-two {

  top: 46%;

  right: 5%;

}


.doodle-three {

  top: 72%;

  left: 4%;

}


.doodle-four {

  bottom: 10%;

  right: 7%;

}


/* =========================================
   ACTIVE NAV
========================================= */

.active-link {

  background:
    var(--resume-lavender) !important;

}


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

.resume-hero {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 40px;

  margin-bottom: 70px;

}


.resume-hero-copy {

  max-width: 650px;

}


.resume-eyebrow {

  display: inline-block;

  padding:
    7px
    13px;

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

  border-radius:
    999px;

  background:
    var(--resume-white);

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

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  transform:
    none;

}


.resume-hero h1 {

  margin:
    17px
    0
    0;

  font-family:
    "Fraunces",
    serif;

  font-size:
    clamp(
      4rem,
      9vw,
      6.5rem
    );

  line-height:
    0.9;

  letter-spacing:
    -0.055em;

}


.resume-squiggle {

  width:
    145px;

  height:
    14px;

  margin-top:
    11px;

  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;

}


.resume-hero-copy > p {

  margin:
    18px
    0
    0;

  font-size:
    1.05rem;

  color:
    #3e4357;

}


.resume-hero-action {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    10px;

  padding-bottom:
    4px;

}


.resume-download {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    12px
    21px;

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

  border-radius:
    999px;

  background:
    var(--resume-purple-dark);

  color:
    #ffffff;

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

  font-size:
    0.87rem;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    0.18s ease;

  font-family: inherit;
  cursor: pointer;

}


.resume-download:hover {

  transform:
    translateY(-3px);

  background:
    var(--resume-purple);

}

.print-header { display: none; }


.download-note {

  max-width:
    210px;

  font-family:
    "Caveat",
    cursive;

  font-size:
    1rem;

  line-height:
    1.15;

  text-align:
    right;

  color:
    var(--resume-purple-dark);

}


/* =========================================
   SECTIONS
========================================= */

.resume-section {

  margin-top:
    78px;

}


.resume-section-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    20px;

  margin-bottom:
    25px;

}


.resume-handwritten {

  margin:
    0
    0
    3px;

  font-family:
    "Caveat",
    cursive;

  font-size:
    1.4rem;

  line-height:
    1;

  color:
    var(--resume-purple-dark);

}


.resume-section-heading h2 {

  margin:
    0;

  font-family:
    "Fraunces",
    serif;

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

  line-height:
    1;

}


.section-doodle {

  padding-bottom:
    4px;

  font-size:
    1.6rem;

  color:
    var(--resume-purple-dark);

}


/* =========================================
   EXPERIENCE CARDS
========================================= */

.resume-entry {

  position:
    relative;

  margin-bottom:
    28px;

  padding:
    27px;

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

  border-radius:
    28px;

  background:
    var(--resume-white);

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

}


.featured-entry {

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f7f5f0
    );

}


.resume-tape {

  position:
    absolute;

  top:
    -12px;

  width:
    82px;

  height:
    26px;

  background:
    rgba(
      216,
      216,
      246,
      0.85
    );

}


.tape-left {

  left:
    42px;

  transform:
    rotate(-4deg);

}


.tape-right {

  right:
    42px;

  transform:
    rotate(4deg);

}


.resume-entry-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    25px;

}


.resume-entry-title h3 {

  margin:
    0;

  font-family:
    "Fraunces",
    serif;

  font-size:
    1.55rem;

  line-height:
    1.2;

}


.resume-company {

  margin:
    5px
    0
    0;

  font-size:
    0.91rem;

  font-weight:
    700;

  color:
    #4d5368;

}


.resume-date {

  flex-shrink:
    0;

  padding:
    2px
    4px;

  font-family:
    "Caveat",
    cursive;

  font-size:
    1.2rem;

  color:
    var(--resume-purple-dark);

}


.entry-intro {

  max-width:
    800px;

  margin:
    18px
    0
    0;

  font-size:
    0.92rem;

  line-height:
    1.65;

  color:
    #3e4357;

}


.resume-bullets {

  margin:
    20px
    0
    0;

  padding:
    0;

  list-style:
    none;

}


.resume-bullets li {

  position:
    relative;

  margin-bottom:
    11px;

  padding-left:
    27px;

  font-size:
    0.92rem;

  line-height:
    1.65;

  color:
    #3e4357;

}


.resume-bullets li::before {

  content:
    "☆";

  position:
    absolute;

  left:
    0;

  top:
    0;

  font-size:
    1rem;

  color:
    var(--resume-ink);

}


/* =========================================
   ENTRY TAGS
========================================= */

.entry-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    20px;

}


.entry-tags span {

  padding:
    6px
    10px;

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

  border-radius:
    999px;

  background:
    var(--resume-lavender-light);

  font-size:
    0.72rem;

  font-weight:
    700;

}


/* =========================================
   ROTATION STRIP
========================================= */

.rotation-strip {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    22px;

  padding-top:
    18px;

  border-top:
    2px dashed
    rgba(
      26,
      26,
      26,
      0.25
    );

}


.rotation-strip span {

  padding:
    7px
    11px;

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

  border-radius:
    999px;

  background:
    var(--resume-yellow);

  box-shadow:
    0 1px 2px rgba(22,26,46,.06), 0 4px 8px -3px rgba(22,26,46,.24);

  font-size:
    0.72rem;

  font-weight:
    700;

}


/* =========================================
   UX PROJECT
========================================= */

.project-entry {

  background:
    var(--resume-lavender-light);

}


.project-sticker {

  position:
    absolute;

  top:
    -17px;

  right:
    35px;

  padding:
    7px
    12px;

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

  border-radius:
    999px;

  background:
    var(--resume-pink);

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

  font-family:
    "Caveat",
    cursive;

  font-size:
    1.05rem;

  transform:
    none;

}


.entry-actions {

  margin-top:
    20px;

}


.case-study-link {

  display:
    inline-flex;

  padding:
    9px
    14px;

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

  border-radius:
    999px;

  background:
    var(--resume-white);

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

  font-size:
    0.8rem;

  font-weight:
    800;

  transition:
    0.18s ease;

}


.case-study-link:hover {

  transform:
    translateY(-2px);

}


/* =========================================
   EDUCATION
========================================= */

.education-grid {

  display:
    grid;

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

  gap:
    18px;

}


.education-card {

  padding:
    23px;

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

  border-radius:
    23px;

  background:
    var(--resume-white);

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

}


.education-card:nth-child(1) {

  transform:
    none;

}


.education-card:nth-child(2) {

  transform:
    none;

}


.education-card:nth-child(3) {

  transform:
    none;

}


.education-lavender {

  background:
    var(--resume-lavender);

}


.education-yellow {

  background:
    var(--resume-yellow);

}


.education-label {

  display:
    inline-block;

  margin-bottom:
    13px;

  padding:
    5px
    8px;

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

  border-radius:
    999px;

  background:
    var(--resume-white);

  font-size:
    0.64rem;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;

}


.education-card h3 {

  margin:
    0;

  font-family:
    "Fraunces",
    serif;

  font-size:
    1.32rem;

  line-height:
    1.2;

}


.education-school {

  margin:
    7px
    0
    0;

  color:
    #3e4357;

  font-size:
    0.9rem;

  font-weight:
    700;

}


.education-status {

  margin:
    17px
    0
    0;

  font-family:
    "Caveat",
    cursive;

  font-size:
    1.2rem;

  color:
    var(--resume-purple-dark);

}


/* =========================================
   SKILLS
========================================= */

.skills-board {

  padding:
    26px;

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

  border-radius:
    28px;

  background:
    var(--resume-white);

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

}


.skill-category
+ .skill-category {

  margin-top:
    25px;

  padding-top:
    23px;

  border-top:
    2px dashed
    rgba(
      26,
      26,
      26,
      0.22
    );

}


.skill-category-title {

  display:
    block;

  margin-bottom:
    12px;

  font-family:
    "Caveat",
    cursive;

  font-size:
    1.3rem;

  font-weight:
    700;

  color:
    var(--resume-purple-dark);

}


.resume-skills {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


.resume-skills span {

  padding:
    8px
    13px;

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

  border-radius:
    999px;

  background:
    var(--resume-white);

  box-shadow:
    0 1px 2px rgba(22,26,46,.06), 0 4px 8px -3px rgba(22,26,46,.24);

  font-size:
    0.77rem;

  font-weight:
    700;

  transition:
    0.18s ease;

}


.resume-skills span:nth-child(
  4n + 1
) {

  background:
    var(--resume-lavender);

}


.resume-skills span:nth-child(
  4n + 2
) {

  background:
    var(--resume-yellow);

}


.resume-skills span:nth-child(
  4n + 3
) {

  background:
    var(--resume-pink);

}


.resume-skills span:hover {

  transform:
    translateY(-2px);

}


/* =========================================
   BOTTOM CTA
========================================= */

.resume-bottom {

  width:
    min(
      700px,
      100%
    );

  margin:
    90px
    auto
    0;

  padding:
    29px;

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

  border-radius:
    27px;

  background:
    var(--resume-yellow);

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

  text-align:
    center;

  transform:
    none;

}


.resume-bottom h2 {

  margin:
    5px
    0
    9px;

  font-family:
    "Fraunces",
    serif;

  font-size:
    2.2rem;

}


.resume-bottom > p:not(
  .resume-handwritten
) {

  max-width:
    520px;

  margin:
    0 auto;

  font-size:
    0.92rem;

  line-height:
    1.65;

  color:
    #3e4357;

}


.resume-bottom-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    20px;

}


.resume-bottom-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px
    16px;

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

  border-radius:
    999px;

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

  font-size:
    0.8rem;

  font-weight:
    800;

  transition:
    0.18s ease;

}


.resume-bottom-button:hover {

  transform:
    translateY(-2px);

}


.primary-button {

  background:
    var(--resume-purple-dark);

  color:
    white;

}


.secondary-button {

  background:
    var(--resume-white);

  color:
    var(--resume-ink);

}


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

@media (
  max-width:
  800px
) {

  .resume-hero {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .resume-hero-action {

    align-items:
      flex-start;

  }


  .download-note {

    text-align:
      left;

  }


  .education-grid {

    grid-template-columns:
      1fr;

  }

}


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

@media (
  max-width:
  600px
) {

  .resume-page {

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

    padding-top:
      35px;

  }


  .resume-hero {

    margin-bottom:
      55px;

  }


  .resume-hero h1 {

    font-size:
      4rem;

  }


  .resume-entry {

    padding:
      21px;

    border-radius:
      22px;

  }


  .resume-entry-header {

    flex-direction:
      column;

    gap:
      8px;

  }


  .resume-date {

    font-size:
      1.1rem;

  }


  .project-sticker {

    position:
      static;

    display:
      inline-block;

    margin-bottom:
      18px;

  }


  .resume-section {

    margin-top:
      60px;

  }


  .resume-section-heading h2 {

    font-size:
      2.25rem;

  }


  .resume-section-heading {

    align-items:
      center;

  }


  .resume-bottom {

    margin-top:
      65px;

    padding:
      23px;

  }

}

/* Compact research cards connect the resume to the public case studies. */
.selected-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.selected-project { display: flex; flex-direction: column; padding: 21px; border: 1.5px solid var(--resume-ink); border-radius: 22px; background: var(--resume-lavender-light); box-shadow: var(--resume-shadow-small); }
.selected-project-secondary { grid-column: 1 / -1; background: var(--resume-white); }
.selected-project-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.selected-project h3 { margin: 0; font: 700 1.25rem/1.2 "Fraunces",serif; }
.selected-project-heading span { flex: none; color: var(--resume-purple-dark); font: 600 1rem "Caveat",cursive; }
.selected-project p { margin: 10px 0 0; line-height: 1.55; }
.selected-project .resume-company { margin-top: 6px; }
.selected-project .case-study-link { align-self: flex-start; margin-top: auto; }
.selected-project > p:last-of-type { margin-bottom: 15px; }
@media(max-width:760px) { .selected-projects { grid-template-columns: 1fr; } .selected-project-secondary { grid-column: auto; } }
@media(max-width:430px) { .selected-project-heading { flex-direction: column; gap: 3px; } }

.resume-hero { margin-bottom: 24px; }
.resume-positioning { max-width: 850px; margin: 0 0 64px; padding: 16px 20px; border-left: 4px solid var(--resume-purple-dark); border-radius: 0 13px 13px 0; background: var(--resume-lavender-light); color: #3e3946; line-height: 1.6; }
.resume-positioning + .resume-section { margin-top: 0; }
@media(max-width:600px) { .resume-positioning { margin-bottom: 54px; padding: 14px 16px; } }

@page { size: letter; margin: .55in; }

@media print {

  html, body { background: #fff !important; color: #161a2e !important; }
  body { overflow: visible; }
  .skip-link, .site-header, .site-footer, .resume-doodles,
  .resume-hero, .resume-bottom, .entry-actions, .resume-tape,
  .section-doodle, .resume-handwritten, .project-sticker { display: none !important; }

  .print-header {
    display: block;
    margin-bottom: 12pt;
    padding-bottom: 7pt;
    border-bottom: 1pt solid #1d2236;
  }
  .print-header h1 { margin: 0; font: 700 24pt/1.1 "Fraunces", serif; }
  .print-header p { margin: 4pt 0 0; font: 9pt/1.3 "Inter", sans-serif; }
  .resume-positioning { max-width: none; margin: 0 0 10pt; padding: 0; border: 0; border-radius: 0; background: #fff !important; color: #1d2236; font: 9pt/1.35 "Inter",sans-serif; }

  .resume-page { width: 100%; max-width: none; margin: 0; padding: 0; }
  .resume-page * { box-shadow: none !important; text-shadow: none !important; }
  .resume-section { margin: 0 0 12pt !important; }
  .resume-section-heading { margin: 0 0 5pt !important; }
  .resume-section-heading h2 { margin: 0; font-size: 13pt !important; line-height: 1.2 !important; }
  .resume-entry {
    margin: 0 0 8pt;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff !important;
    break-inside: avoid-page;
  }
  .resume-entry-header { flex-direction: row; align-items: baseline; gap: 8pt; }
  .resume-entry-title h3 { margin: 0; font-size: 10pt !important; line-height: 1.2 !important; }
  .resume-company, .resume-date { font-size: 9pt !important; }
  .entry-intro, .resume-bullets li { font-size: 9pt !important; line-height: 1.3 !important; }
  .resume-bullets { margin: 5pt 0 0; padding-left: 14pt; list-style: disc; }
  .resume-bullets li { margin: 2pt 0; padding: 0; }
  .resume-bullets li::before { display: none; }
  .selected-projects { display: block; }
  .selected-project { margin: 0 0 8pt; padding: 0; border: 0; border-radius: 0; background: #fff !important; break-inside: avoid-page; }
  .selected-project h3 { font: 700 10pt/1.2 "Fraunces",serif; }
  .selected-project-heading span, .selected-project .resume-company { font: 8.5pt/1.25 "Inter",sans-serif; color: #333; }
  .selected-project p { margin: 2pt 0 0; font: 8.5pt/1.3 "Inter",sans-serif; }
  .selected-project .case-study-link { display: none; }
  .education-section { break-before: page; }
  .education-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8pt; }
  .education-card { padding: 8pt; border: 1pt solid #1d2236; border-radius: 8pt; background: #fff !important; transform: none !important; break-inside: avoid-page; }
  .education-card h3 { font-size: 10pt !important; line-height: 1.2 !important; }
  .education-label, .education-school, .education-status { font-size: 8.5pt !important; }
  .education-label { margin-bottom: 4pt; padding: 0; border: 0; }
  .education-school, .education-status { margin: 3pt 0 0; }
  .skills-board { padding: 0; border: 0; background: #fff !important; }
  .skill-category { margin: 0 0 6pt; break-inside: avoid-page; }
  .skill-category-title { margin: 0 0 3pt; font: 700 9pt "Inter", sans-serif; color: #161a2e; }
  .resume-skills { gap: 3pt 8pt; }
  .resume-skills span { padding: 0; border: 0; background: #fff !important; font-size: 8.5pt; }
}