/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* grayscale scale */
  --gray-0:   #ffffff;
  --gray-50:  #f4f4f4;
  --gray-100: #e6e6e6;
  --gray-300: #b8b8b8;
  --gray-500: #6e6e6e;
  --gray-700: #3a3a3a;
  --gray-900: #161616;
  --gray-1000:#000000;

  /* semantic colors (light) */
  --bg:         var(--gray-0);
  --surface:    var(--gray-50);
  --border:     var(--gray-100);
  --text:       var(--gray-900);
  --text-muted: var(--gray-500);
  --inverse-bg: var(--gray-900);
  --inverse-fg: var(--gray-0);
  --backdrop:   rgb(0 0 0 / 0.88);

  /* type */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-xl:   clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-hero: clamp(3rem, 1.5rem + 7vw, 6rem);

  /* spacing & layout */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter:   clamp(1.25rem, 0.5rem + 3vw, 6rem);
  --max-w:    75rem;
  --header-h: 4rem;
  --radius:   0.25rem;
  --ease:     200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         var(--gray-1000);
    --surface:    var(--gray-900);
    --border:     var(--gray-700);
    --text:       var(--gray-50);
    --text-muted: var(--gray-300);
    --inverse-bg: var(--gray-50);
    --inverse-fg: var(--gray-1000);
  }
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3 { line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* shared content width */
.header__bar__container,
.hero__content__container,
.positions__content__container,
.systems__content__container,
.work__content__container,
.about__content__container,
.contact__content__container,
.footer__content__container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* shared section rhythm */
.hero,
.positions,
.systems,
.work,
.about,
.contact {
  padding-block: var(--space-xl);
}

.positions,
.systems,
.work,
.about,
.contact {
  border-top: 1px solid var(--border);
}

/* shared section headings */
.positions__title__heading,
.systems__title__heading,
.work__title__heading,
.about__title__heading,
.contact__title__heading {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-lg);
}

/* side-heading layout on wide screens */
@media (min-width: 60rem) {
  .positions__content__container,
  .systems__content__container,
  .work__content__container,
  .contact__content__container {
    display: grid;
    grid-template-columns: 14rem 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  .positions__content__container > :not(h2),
  .systems__content__container > :not(h2),
  .work__content__container > :not(h2),
  .contact__content__container > :not(h2) {
    grid-column: 2;
  }

  .positions__title__heading,
  .systems__title__heading,
  .work__title__heading,
  .contact__title__heading {
    grid-row: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
    margin-bottom: 0;
  }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.header__cta__button,
.hero__actions__primary-button,
.hero__actions__secondary-button,
.hero__actions__share-button,
.contact__resume__button,
.contact__resume__share-button {
  display: inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: 1px solid var(--text);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}

.header__cta__button,
.hero__actions__primary-button {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  border-color: var(--inverse-bg);
}

.header__cta__button:hover,
.hero__actions__primary-button:hover {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.hero__actions__secondary-button,
.hero__actions__share-button,
.contact__resume__button,
.contact__resume__share-button {
  background: transparent;
  color: var(--text);
}

.hero__actions__secondary-button:hover,
.hero__actions__share-button:hover,
.contact__resume__button:hover,
.contact__resume__share-button:hover {
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header__bar__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--header-h);
}

.header__logo__link {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.header__cta__button {
  min-height: 2.25rem;
  padding: 0 var(--space-sm);
}

/* --- hamburger --- */
.header__menu-toggle__button {
  order: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
}

.header__menu-toggle__icon,
.header__menu-toggle__icon::before,
.header__menu-toggle__icon::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--ease), background-color var(--ease);
}

.header__menu-toggle__icon { position: relative; }

.header__menu-toggle__icon::before,
.header__menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.header__menu-toggle__icon::before { transform: translateY(-6px); }
.header__menu-toggle__icon::after  { transform: translateY(6px); }

.header__menu-toggle__button[aria-expanded="true"] .header__menu-toggle__icon { background: transparent; }
.header__menu-toggle__button[aria-expanded="true"] .header__menu-toggle__icon::before { transform: rotate(45deg); }
.header__menu-toggle__button[aria-expanded="true"] .header__menu-toggle__icon::after  { transform: rotate(-45deg); }

/* --- mobile nav (dropdown) --- */
.header__nav__container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header__menu-toggle__button[aria-expanded="true"] + .header__nav__container {
  display: block;
}

.header__nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--gutter) var(--space-md);
}

.header__nav__link {
  display: block;
  padding-block: 0.75rem;
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
}

.header__nav__item:last-child .header__nav__link { border-bottom: 0; }

/* --- desktop nav --- */
@media (min-width: 48rem) {
  .header__menu-toggle__button { display: none; }

  .header__nav__container,
  .header__menu-toggle__button[aria-expanded="true"] + .header__nav__container {
    display: block;
    position: static;
    background: none;
    border: 0;
  }

  .header__nav__list {
    flex-direction: row;
    gap: var(--space-md);
    padding: 0;
  }

  .header__nav__link {
    padding-block: var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    border: 0;
    transition: color var(--ease);
  }

  .header__nav__link:hover { color: var(--text); }

  .header__cta__button { margin-left: var(--space-xs); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero__content__container {
  display: grid;
  gap: var(--space-lg);
  align-items: end;
}

.hero__title__heading {
  font-size: var(--fs-hero);
  width: 100%;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.hero__role__text {
  margin-top: var(--space-md);
  font-size: var(--fs-lg);
}

.hero__location__text {
  margin-top: var(--space-xs);
  color: var(--text-muted);
}

.hero__actions__container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero__image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}

@media (min-width: 56rem) {
    .hero__content__container {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--space-xl);
    }

    .hero__image__img { aspect-ratio: 4 / 5; }
    .hero__title__heading {
        font-size: clamp(3rem, 1.5rem + 7vw, 4.6rem);
    }
}

@media (min-width: 62rem) {
    .hero__title__heading {
        font-size: clamp(3rem, 1.5rem + 7vw, 5.3rem);
    }
}

/* =========================================================
   POSITIONS
   ========================================================= */
.positions__list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-lg) var(--space-md);
}

.positions__card__container {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--text);
}

.positions__card__title { font-size: var(--fs-md); }

.positions__card__text {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* =========================================================
   SYSTEMS
   ========================================================= */
.systems__groups__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-lg) var(--space-md);
}

.systems__group__title {
  font-size: var(--fs-base);
  margin-bottom: var(--space-sm);
}

.systems__group__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.systems__group__item {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.systems__certs__text {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* =========================================================
   WORK / GALLERY
   ========================================================= */
.work__gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-lg) var(--space-md);
}

.work__item__open-button {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.work__item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms ease;
}

.work__item__open-button:hover .work__item__img { transform: scale(1.03); }

.work__item__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
}

.work__item__show-type { font-weight: 600; }
.work__item__scale,
.work__item__role { color: var(--text-muted); }

.work__gallery__link {
  display: inline-block;
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- lightbox --- */
.work__lightbox__dialog {
  width: min(92vw, 70rem);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-0);
  overflow: visible;
}

.work__lightbox__dialog::backdrop { background: var(--backdrop); }

.work__lightbox__img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.work__lightbox__caption {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--gray-300);
}

.work__lightbox__close-button {
  position: absolute;
  top: -2.75rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gray-0);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__content__container {
  display: grid;
  gap: var(--space-lg);
}

.about__image__img {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}

.about__text__container { max-width: 38rem; }

.about__bio__text + .about__bio__text { margin-top: var(--space-sm); }

.about__bio__text {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .about__content__container {
    grid-template-columns: minmax(0, 2fr) 3fr;
    gap: var(--space-xl);
    align-items: center;
  }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__intro__text {
  max-width: 36rem;
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}
.contact__resume__container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.contact__methods__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.contact__methods__link {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  word-break: break-word;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--ease);
}

.contact__methods__link:hover { background-size: 100% 1px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer__content__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.footer__links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__links__link { transition: color var(--ease); }
.footer__links__link:hover { color: var(--text); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}