@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");

@layer tokens, reset, atoms, molecules, organisms, utilities, responsive;

@layer tokens {
  :root {
    color-scheme: light dark;

    --bg-color: light-dark(oklch(0.965 0.018 91), oklch(0.19 0.025 160));
    --secondary-bg-color: light-dark(oklch(0.99 0.009 92), oklch(0.245 0.027 160));
    --text-color: light-dark(oklch(0.245 0.035 159), oklch(0.94 0.018 91));
    --accent-color: light-dark(oklch(0.57 0.16 43), oklch(0.78 0.14 81));
    --color-muted: light-dark(oklch(0.46 0.035 159), oklch(0.76 0.025 91));
    --color-border: light-dark(oklch(0.84 0.022 91), oklch(0.39 0.032 159));
    --color-hero: light-dark(oklch(0.30 0.067 159), oklch(0.26 0.055 159));
    --color-on-hero: light-dark(oklch(0.97 0.015 91), oklch(0.97 0.015 91));
    --color-accent-ink: light-dark(oklch(0.25 0.035 159), oklch(0.20 0.025 160));
    --color-track: light-dark(oklch(0.86 0.026 91), oklch(0.36 0.033 159));
    --color-overlay: light-dark(oklch(0.20 0.03 159 / 0.78), oklch(0.12 0.025 159 / 0.84));
    --shadow-raised: light-dark(0 18px 48px oklch(0.20 0.04 159 / 0.12), 0 18px 48px oklch(0.08 0.02 159 / 0.32));
    --focus-ring: light-dark(oklch(0.57 0.16 43), oklch(0.82 0.15 81));

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --content-width: 75rem;
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-8);
  }

  body {
    min-width: 320px;
    margin: 0;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
    accent-color: var(--accent-color);
    caret-color: var(--accent-color);
  }

  img,
  svg {
    max-width: 100%;
  }

  button,
  input,
  textarea {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

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

@layer atoms {
  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 4px;
  }

  .skip-link {
    position: fixed;
    z-index: 10001;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-4);
    transform: translateY(-180%);
    border-radius: var(--radius-small);
    background: var(--secondary-bg-color);
    color: var(--text-color);
    box-shadow: var(--shadow-raised);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .resume-heading {
    margin: 0 0 var(--space-6);
    color: var(--accent-color);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .job-title,
  .degree-detail {
    font-variant-numeric: tabular-nums;
  }

  .position p,
  .position li,
  .professional-summary {
    text-wrap: pretty;
  }

  .position ul {
    margin: var(--space-3) 0 0;
    padding-inline-start: 1.25rem;
  }

  .position li + li {
    margin-top: var(--space-2);
  }

  .position li::marker {
    color: var(--accent-color);
  }

  .job-title {
    margin: 0 0 var(--space-2);
    color: var(--text-color);
  }

  .job-title b {
    font-weight: 700;
  }

  .position > p:not(.job-title) {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
  }

  .employer-lockup img,
  .employer-lockup svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 2.75rem;
  }

  .school-lockup img,
  .school-lockup svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 4rem;
  }

  .school-lockup-text,
  .employer-lockup-text {
    fill: var(--text-color);
  }

  .ppcontent {
    grid-column: 2;
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 400ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms ease-out;
  }

  .ppcontent.expanded {
    max-height: 1500px;
    opacity: 1;
  }

  .ppcta {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 var(--space-6);
    margin-left: 0.5rem;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: color 180ms ease-out, background-color 180ms ease-out;
  }

  .ppcta:hover {
    background: var(--bg-color);
    color: var(--accent-color);
  }
}

@layer molecules {
  .contact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-6);
  }

  .contact-info a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--color-on-hero);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 180ms ease-out, transform 180ms ease-out;
  }

  .contact-info svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.15rem;
    border-radius: 3px;
    background: var(--color-on-hero);
    fill: var(--color-hero);
  }

  .contact-info a:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
  }

  .contact-info a:hover svg {
    background: var(--accent-color);
  }

  .linkedin,
  .codepen {
    display: inline-flex;
    align-items: center;
  }

  .employer {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: var(--space-6) var(--space-8);
    align-items: start;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
  }

  .employer-lockup {
    display: flex;
    align-items: flex-start;
    min-height: 2.75rem;
    margin: 0;
    padding-top: var(--space-1);
  }

  .position {
    grid-column: 2;
    margin: 0 0 var(--space-8);
  }

  .position:last-child {
    margin-bottom: 0;
  }

  .degree {
    min-width: 0;
  }

  .degree-detail {
    color: var(--color-muted);
    line-height: 1.8;
  }

  .cert-issuer,
  .cert-date {
    display: block;
  }

  .degree-detail b {
    color: var(--text-color);
  }

  .skill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.8fr);
    gap: var(--space-4) var(--space-8);
    align-items: center;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
  }

  .skill h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .progress-bar {
    display: none;
  }

  .skill .progress {
    width: 0;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-track);
    transition: width 800ms cubic-bezier(0.2, 0, 0, 1);
  }

  .skill:nth-child(1) .progress {
    background: var(--accent-color);
  }

  .skill:nth-child(2) .progress {
    background: var(--accent-color);
  }

  .skill:nth-child(3) .progress {
    background: var(--accent-color);
  }

  .skill:nth-child(4) .progress {
    background: var(--accent-color);
  }

  .skill:nth-child(5) .progress {
    background: var(--accent-color);
  }
}

@layer organisms {
  .site-shell {
    min-height: 100vh;
    padding: var(--space-8) var(--space-6) var(--space-12);
  }

  .site-main {
    display: block;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    opacity: 1;
  }

  .hero {
    margin: 0;
  }

  .resume {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    color: var(--text-color);
  }

  .title-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(11rem, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: var(--space-8);
    min-height: 27rem;
    margin: 0;
    padding: clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--color-hero);
    color: var(--color-on-hero);
    box-shadow: var(--shadow-raised);
  }

  .title-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(34%, 22rem);
    height: 0.5rem;
    background: var(--accent-color);
    content: "";
  }

  .headshot {
    display: block;
    width: min(100%, 17rem);
    aspect-ratio: 1;
    justify-self: center;
    object-fit: cover;
    border: 5px solid var(--color-on-hero);
    border-radius: 50%;
  }

  .title-txt {
    min-width: 0;
    color: var(--color-on-hero);
  }

  .title-txt h1 {
    margin: 0;
    color: var(--color-on-hero);
    font-size: clamp(2.8rem, 7.5vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.075em;
    line-height: 0.98;
    text-wrap: balance;
  }

  .title-txt h2 {
    margin: var(--space-4) 0 0;
    color: var(--color-on-hero);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
  }

  .professional-summary {
    max-width: 70ch;
    margin: var(--space-16) auto;
    padding: 0 0 0 var(--space-8);
    border-top: 0;
    border-left: 2px solid var(--accent-color);
    color: var(--text-color);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 400;
    line-height: 1.75;
  }

  .exp,
  .edu,
  .certs,
  .skills.resume-section {
    margin: var(--space-16) 0;
  }

  .resume-heading {
    margin-top: 0;
    margin-bottom: var(--space-6);
  }

  .exp > .resume-heading,
  .edu > .resume-heading,
  .certs > .resume-heading,
  .skills.resume-section > .resume-heading {
    font-size: 1rem;
  }

  .degree-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    align-items: start;
  }

  .school-lockup {
    margin: 0 0 var(--space-4);
  }

  .certs .degree-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .certs .degree {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .skills {
    margin-top: 0;
  }

  .copyright {
    margin: var(--space-16) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.8rem;
    text-align: left;
  }

  #main-nav {
    position: fixed;
    z-index: 1000;
    top: var(--space-4);
    right: var(--space-4);
    min-width: 3.5rem;
    min-height: 3.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--secondary-bg-color);
    box-shadow: var(--shadow-raised);
  }

  .nav-button {
    position: relative;
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-medium);
    background: transparent;
    cursor: pointer;
  }

  .hamburger {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: var(--text-color);
    transition: background-color 180ms ease-out;
  }

  .hamburger::before,
  .hamburger::after {
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--text-color);
    content: "";
    transition: top 180ms ease-out, transform 180ms ease-out;
  }

  .hamburger::before {
    top: -7px;
  }

  .hamburger::after {
    top: 7px;
  }

  .nav-button.active-burger .hamburger {
    background: transparent;
  }

  .nav-button.active-burger .hamburger::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-button.active-burger .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .nav-content {
    width: 0;
    height: 0;
    overflow: hidden;
    transition: width 250ms cubic-bezier(0.2, 0, 0, 1), height 250ms cubic-bezier(0.2, 0, 0, 1);
  }

  .active-nav-width {
    width: 15rem;
  }

  .active-nav-height {
    height: 22rem;
  }

  #main-nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 15rem;
    margin: 0;
    padding: 0 var(--space-3) var(--space-3);
    color: var(--text-color);
    font-family: "Poppins", sans-serif;
    list-style: none;
    opacity: 0;
    transition: opacity 180ms ease-out;
  }

  #main-nav ul li {
    padding: 0;
  }

  #main-nav ul a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    color: var(--text-color);
    text-decoration: none;
    transition: color 160ms ease-out, background-color 160ms ease-out;
  }

  #main-nav ul a:hover {
    background: var(--bg-color);
    color: var(--accent-color);
  }

  #main-nav ul .nav-special {
    justify-content: center;
    background: var(--accent-color);
    color: var(--color-accent-ink);
    font-weight: 700;
  }

  #main-nav ul .nav-special:hover {
    background: var(--text-color);
    color: var(--bg-color);
  }

  .active-nav-list {
    opacity: 1 !important;
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
  }

  .theme-toggle:hover {
    border-color: var(--accent-color);
    background: var(--bg-color);
  }

  .theme-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
  }

  .modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: none;
    overflow: auto;
    padding: var(--space-8) var(--space-4);
    background: var(--color-overlay);
  }

  .modal-content {
    width: min(100%, 43rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--secondary-bg-color);
    box-shadow: var(--shadow-raised);
  }

  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
  }

  .modal-body {
    margin-top: var(--space-4);
  }

  .modal-body h3 {
    margin: 0 0 var(--space-4);
    font-size: 1rem;
    font-weight: 400;
  }

  .close {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--radius-small);
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
  }

  .close:hover {
    background: var(--bg-color);
    color: var(--accent-color);
  }

  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .modal-content label {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
  }

  input,
  textarea {
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--bg-color);
    color: var(--text-color);
  }

  textarea {
    min-height: 8rem;
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-muted);
  }

  button[type="submit"] {
    min-height: 2.9rem;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-small);
    background: var(--accent-color);
    color: var(--color-accent-ink);
    cursor: pointer;
    font-weight: 700;
    transition: background-color 180ms ease-out, transform 180ms ease-out;
  }

  button[type="submit"]:hover {
    transform: translateY(-1px);
    background: var(--text-color);
    color: var(--bg-color);
  }
}

@layer utilities {
  .bgoverlay {
    display: none;
  }
}

@layer responsive {
  @media (max-width: 760px) {
    .site-shell {
      padding: var(--space-3) var(--space-3) var(--space-12);
    }

    .title-card {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
      min-height: 0;
      padding: var(--space-8) var(--space-6);
      text-align: center;
    }

    .headshot {
      width: min(48vw, 13rem);
    }

    .title-txt h1 {
      font-size: clamp(2.7rem, 12vw, 4.5rem);
      letter-spacing: -0.065em;
    }

    .contact-info {
      justify-content: center;
      margin-top: var(--space-4);
    }

    .professional-summary {
      margin: var(--space-12) auto;
      padding-left: var(--space-4);
      font-size: 1.05rem;
    }

    .exp,
    .edu,
    .certs,
    .skills.resume-section {
      margin: var(--space-12) 0;
    }

    .employer {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
      padding: var(--space-6) 0;
    }

    .employer-lockup {
      min-height: 0;
    }

    .position {
      grid-column: 1 / -1;
    }

    .ppcontent {
      grid-column: 1 / -1;
    }

    .ppcta {
      grid-column: 1 / -1;
    }

    .degree-container,
    .certs .degree-container {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }

    .skill {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2);
    }

    #main-nav {
      top: auto;
      right: var(--space-3);
      bottom: var(--space-3);
    }
  }

  @media (max-width: 380px) {
    .site-shell {
      padding-inline: var(--space-2);
    }

    .title-card {
      padding-inline: var(--space-4);
    }

    .contact-info {
      gap: var(--space-2) var(--space-3);
    }

    .contact-info a {
      font-size: 0.8rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}