/* ============ Tokens ============ */
:root {
  --color-bg: #141414;
  --color-cream: #ece8df;
  --color-grey-95: #f6f4f0;
  --color-line: rgba(236, 232, 223, 0.12);
  --font-sans: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page-padding: 28px;
  --max-content: 1660px;
}

/* ============ Reset / base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
}

/* ============ Navbar ============ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--color-bg);
  padding: 11px var(--page-padding) 12px 29px;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-content);
  margin: 0 auto;
}

.nav-link {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.8px;
  color: var(--color-grey-95);
}

/* ============ Giant fit-text headlines ============ */
.giant-text {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-cream);
  width: max-content;
  /* Decorative only. The tight line-height lets the glyph box overflow upward
     over the footer links, where it would otherwise swallow their clicks. */
  pointer-events: none;
}

.giant-text-footer {
  line-height: 0.9;
}

/* ============ Hero ============ */
.hero {
  padding: 47px var(--page-padding) 80px;
  min-height: 900px;
}

.hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 17px;
  padding-top: 64px;
  overflow: clip;
}

.hero-top .giant-text {
  align-self: flex-start;
}

.hero-subtitle {
  max-width: 600px;
  opacity: 0.7;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: -0.96px;
}

/* ============ Projects ============ */
.projects {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 80px;
}

.projects-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.projects-row-first {
  grid-template-columns: 1.7fr 1fr;
  padding-left: 12px;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.project-image {
  width: 100%;
  border-radius: 8px;
  overflow: clip;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Works with no fixed shape follow their image's own proportions. */
.project-image.is-auto img {
  height: auto;
}

/* No image uploaded yet — hold the space instead of collapsing the row. */
.project-image.is-empty {
  background: rgba(236, 232, 223, 0.05);
  border: 1px dashed var(--color-line);
}

.project-image.is-empty.is-auto {
  aspect-ratio: 4 / 3;
}

.project:hover .project-image img {
  transform: scale(1.03);
}

.project-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.project-title {
  text-transform: capitalize;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: -0.96px;
}

.project-category {
  text-transform: capitalize;
  opacity: 0.7;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.32px;
}

/* ============ About ============ */
.about {
  padding: 80px var(--page-padding);
}

.about-statement {
  font-size: 72px;
  font-weight: 500;
  line-height: 79.2px;
  letter-spacing: -3.6px;
}

.about-bottom {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 72px;
}

.about-portrait {
  flex-shrink: 0;
  width: 434.66px;
  height: 470.36px;
  mix-blend-mode: luminosity;
  overflow: clip;
}

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

.about-column {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.about-column-main {
  min-width: 434.67px;
  flex: 1;
}

.about-column-side {
  flex: 1;
  min-width: 0;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-label {
  opacity: 0.7;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.32px;
}

.about-body {
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: -0.48px;
  max-width: 434.66px;
}

.about-actions {
  display: flex;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 11px 24px 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn-solid {
  background: var(--color-cream);
  color: var(--color-bg);
}

.btn-outline {
  border: 1px solid var(--color-cream);
  color: var(--color-cream);
}

/* ============ Footer ============ */
.footer {
  padding: 80px var(--page-padding) 24px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact p {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.8px;
}

.footer-contact a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.footer-links {
  display: flex;
  gap: 76px;
  align-items: flex-start;
}

.footer-links-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-label {
  opacity: 0.9;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.32px;
  margin-bottom: 2px;
}

.footer-links-column a {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.8px;
}

.footer-links-column a:hover {
  opacity: 0.7;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.footer-line {
  height: 1px;
  width: 100%;
  background: var(--color-line);
}

.footer-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-details p {
  opacity: 0.81;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: -0.32px;
  text-transform: capitalize;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .about-statement {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -2.4px;
  }

  .about-bottom {
    flex-wrap: wrap;
  }

  .about-portrait {
    width: 100%;
    max-width: 434.66px;
    height: auto;
    aspect-ratio: 434.66 / 470.36;
  }

  .about-column-main {
    min-width: min(434.67px, 100%);
  }

  .about-column-side {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding: 20px;
  }

  .hero {
    min-height: 0;
    padding-top: 47px;
    padding-bottom: 48px;
  }

  .hero-top {
    padding-top: 24px;
    gap: 8px;
  }

  .hero-subtitle {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.6px;
  }

  .projects {
    margin-top: 40px;
  }

  .nav-link {
    font-size: 16px;
    letter-spacing: -0.48px;
  }

  .projects-row,
  .projects-row-first {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .projects {
    gap: 40px;
  }

  .projects-row {
    gap: 40px;
  }

  .about-statement {
    font-size: 34px;
    letter-spacing: -1.5px;
  }

  /* Stack the about columns and move the CTA buttons after the
     "When I'm Not Designing" section. display: contents lets the
     main column's text and actions be ordered independently. */
  .about-bottom {
    flex-direction: column;
    gap: 36px;
  }

  .about-column-main {
    display: contents;
  }

  .about-portrait {
    order: 1;
  }

  .about-column-main > .about-text {
    order: 2;
  }

  .about-column-side {
    order: 3;
  }

  .about-actions {
    order: 4;
    flex-wrap: wrap;
  }

  .footer-content {
    flex-direction: column;
    gap: 48px;
  }

  .footer-details p {
    font-size: 14px;
  }
}