/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --bg:        #fafaf8;
  --text:      #131310;
  --muted:     #858574;
  --border:    rgba(19, 19, 16, 0.1);
  --nav-bg:    rgba(250, 250, 248, 0.96);
  --skills-bg: rgba(237, 237, 234, 0.3);
  --container: 1280px;
  --pad:       48px;
  --nav-h:     64px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
}

/* ─── Shared helpers ─────────────────────────────────── */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.eyebrow {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.f {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--text);
}

/* ─── Navbar ─────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 0.727px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.nav__logo {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.96px;
  text-transform: uppercase;
  color: var(--text);
}

.nav__links {
  display: flex;
  gap: 40px;
}

.nav__links a {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.56px;
  color: var(--muted);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--text); }

/* ─── Section dividers ───────────────────────────────── */
.section--bordered { border-top: 0.727px solid var(--border); }

/* ─── Buttons ────────────────────────────────────────── */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: var(--bg);
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.35px;
  padding: 12px 24px;
}

.btn-dark--lg { padding: 14px 28px; letter-spacing: 0; }

.btn-underline {
  font-size: 14px;
  color: var(--muted);
  border-bottom: 0.727px solid var(--muted);
  padding-bottom: 2px;
}

/* Arrow SVG shared */
.arrow { flex-shrink: 0; }

/* ─── HERO ───────────────────────────────────────────── */
.hero {
  padding-top: var(--nav-h);
  min-height: 584px;
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--pad) 0;
}

.hero__photo {
  width: 424px;
  flex-shrink: 0;
  align-self: stretch;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  margin-left: 80px;
  padding-top: 9px;
  max-width: 424px;
}

.hero__name {
  font-size: 71.935px;
  line-height: 1;
  letter-spacing: -0.72px;
  margin-top: 24px;
}

.hero__bio {
  font-size: 18px;
  line-height: 31.5px;
  color: var(--muted);
  margin-top: 32px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
}

/* ─── PROJECTS ───────────────────────────────────────── */
.projects .wrap { padding-top: 112px; padding-bottom: 112px; }

.projects__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.projects__heading {
  font-size: 51.382px;
  line-height: 53.951px;
  margin-top: 12px;
}

.projects__header-desc {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
  max-width: 260px;
  text-align: right;
}

.projects__list {
  margin-top: 80px;
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
}

.project-item {
  display: flex;
  align-items: center;
  padding: 48px var(--pad);
  border-bottom: 0.727px solid var(--border);
  transition: opacity 0.15s;
}
.project-item:last-child { border-bottom: none; }
.project-item:hover { opacity: 0.65; }

.project-item__num {
  width: 64px;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 1.98px;
  color: var(--muted);
}

.project-item__body {
  flex: 1;
  padding-left: 16px;
}

.project-item__title-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.project-item__name {
  font-size: 35.967px;
  line-height: 1;
}

.project-item__type {
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
}

.project-item__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
  max-width: 392px;
}

.project-item__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.project-item__year {
  font-size: 12px;
  color: var(--muted);
}

/* ─── ABOUT ──────────────────────────────────────────── */
.about .wrap { padding-top: 112px; padding-bottom: 112px; }

.about__grid {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.about__left {
  width: 424px;
  flex-shrink: 0;
}

.about__heading {
  font-size: 46.244px;
  line-height: 49.943px;
  margin-top: 24px;
}

.about__photo {
  margin-top: 32px;
}

.about__photo img {
  width: 100%;
  height: 282px;
  object-fit: contain;
  object-position: top left;
}

.about__right {
  flex: 1;
  padding-top: 56px;
}

.about__bio-primary {
  font-size: 18px;
  line-height: 32.4px;
  color: var(--muted);
}

.about__bio-secondary {
  font-size: 16px;
  line-height: 28.8px;
  color: var(--muted);
  margin-top: 24px;
}

.stats {
  margin-top: 40px;
  border-top: 0.727px solid var(--border);
  padding-top: 32px;
  display: grid;
  grid-template-columns: 196px 196px;
  column-gap: 32px;
  row-gap: 32px;
}

.stat__number { font-size: 32px; line-height: 32px; }

.stat__label {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ─── SKILLS ─────────────────────────────────────────── */
.skills {
  background: var(--skills-bg);
}

.skills .wrap { padding-top: 96px; padding-bottom: 96px; }

.skills__heading {
  font-size: 41.105px;
  line-height: 61.658px;
  margin-top: 12px;
}

.skills__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 196px);
  gap: 48px;
}

.skill-col__label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.skill-col__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-col__item {
  font-size: 14px;
  line-height: 19.25px;
}

/* ─── CONTACT ────────────────────────────────────────── */
.contact .wrap { padding-top: 144px; padding-bottom: 144px; }

.contact__content { max-width: 680px; }

.contact__heading {
  font-size: 61.658px;
  line-height: 64.741px;
  margin-top: 24px;
}

.contact__desc {
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
  max-width: 460px;
  margin-top: 40px;
}

.contact__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
}

.contact__email {
  font-size: 14px;
  color: var(--muted);
}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer .wrap {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: 12px;
  letter-spacing: 0.24px;
  color: var(--muted);
}

.footer__links {
  display: flex;
  gap: 32px;
}

.footer__links a {
  font-size: 12px;
  letter-spacing: 0.48px;
  color: var(--muted);
  transition: color 0.15s;
}
.footer__links a:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   768px  – tablet: tighten spacing, scale large fonts
   600px  – mobile: stack all side-by-side layouts
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root { --pad: 32px; }

  .hero__name          { font-size: 52px; }
  .projects__heading   { font-size: 38px; line-height: 1.1; }
  .about__heading      { font-size: 34px; line-height: 1.2; }
  .skills__heading     { font-size: 30px; line-height: 1.3; }
  .contact__heading    { font-size: 46px; line-height: 1.1; }
  .skills__grid        { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root {
    --pad:   20px;
    --nav-h: 88px;
  }

  /* ── Nav – stack logo above links ── */
  .nav__inner {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 10px;
  }
  .nav__links          { gap: 18px; }
  .nav__links a        { font-size: 13px; }

  /* ── Hero – stack photo above text ── */
  .hero                { min-height: auto; }
  .hero__inner         { flex-direction: column; padding-top: 32px; padding-bottom: 48px; }
  .hero__photo         { width: 100%; height: 260px; }
  .hero__content       { margin-left: 0; margin-top: 32px; max-width: 100%; padding-top: 0; }
  .hero__name          { font-size: 40px; letter-spacing: -0.4px; }
  .hero__bio           { font-size: 16px; margin-top: 20px; }
  .hero__actions       { flex-direction: column; align-items: flex-start; margin-top: 28px; }

  /* ── Projects ── */
  .projects .wrap      { padding-top: 56px; padding-bottom: 56px; }
  .projects__header    { flex-direction: column; gap: 12px; align-items: flex-start; }
  .projects__header-desc { text-align: left; max-width: 100%; }
  .projects__heading   { font-size: 30px; line-height: 1.1; }
  .projects__list      { margin-top: 40px; }
  .project-item        { flex-wrap: wrap; padding: 28px var(--pad); }
  .project-item__name  { font-size: 22px; }
  .project-item__title-row { flex-wrap: wrap; gap: 6px; }
  .project-item__type  { padding-bottom: 0; }
  .project-item__desc  { max-width: 100%; }
  .project-item__meta  { width: 100%; justify-content: flex-end; margin-top: 8px; }

  /* ── About – stack left/right columns ── */
  .about .wrap         { padding-top: 56px; padding-bottom: 56px; }
  .about__grid         { flex-direction: column; gap: 32px; }
  .about__left         { width: 100%; }
  .about__right        { padding-top: 0; }
  .about__heading      { font-size: 30px; line-height: 1.2; }
  .about__photo img    { height: 220px; }
  .about__bio-primary  { font-size: 16px; line-height: 28px; }
  .stats               { grid-template-columns: 1fr 1fr; column-gap: 16px; }

  /* ── Skills – 2-col grid ── */
  .skills .wrap        { padding-top: 56px; padding-bottom: 56px; }
  .skills__heading     { font-size: 26px; line-height: 1.3; }
  .skills__grid        { grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 40px; }

  /* ── Contact ── */
  .contact .wrap       { padding-top: 64px; padding-bottom: 64px; }
  .contact__heading    { font-size: 34px; line-height: 1.1; }
  .contact__actions    { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; }

  /* ── Footer ── */
  .footer .wrap        { flex-direction: column; align-items: flex-start; gap: 16px; }
}