/* Homepage */

.home {
  position: relative;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 0 var(--page-gutter);
  overflow: clip;
}

/* ---------- About ---------- */

.about {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(48px, 8vw, 128px);
  padding: clamp(120px, 14vw, 220px) 0 var(--space-lg);
}

.about__greeting-block {
  flex: 1 1 380px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.about__greeting {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2.5rem, 9vw, var(--text-hero));
}

.about__greeting-line {
  display: block;
  transform: rotate(-3.25deg);
}

.about__greeting-line--2 {
  margin-top: -0.12em;
  margin-left: 0.55em;
}

.about__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.6;
  max-width: 26ch;
}

.about__portrait-frame {
  position: relative;
  flex: 0 0 auto;
}

.about__portrait {
  width: clamp(240px, 30vw, 423px);
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  transform: rotate(1.96deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__portrait img {
  width: 86%;
  height: auto;
  transform: rotate(180deg) scaleY(-1);
}

.about__portrait-paperclip {
  position: absolute;
  left: 23%;
  top: -13%;
  width: clamp(48px, 8vw, 92px);
  height: auto;
  transform: rotate(-75deg);
  pointer-events: none;
  z-index: 1;
}

.about__callout-label {
  position: absolute;
  left: 71%;
  top: -21%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 0.9;
  transform: rotate(-2.34deg);
  white-space: nowrap;
  pointer-events: none;
}

.about__callout-arrow {
  position: absolute;
  left: 102%;
  top: -9%;
  width: clamp(34px, 5.5vw, 58px);
  aspect-ratio: 85.536 / 97.368;
  pointer-events: none;
}

.about__callout-arrow-curve {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 67.83%;
  height: auto;
  transform: translate(-50%, -50%) rotate(24.64deg);
}

.about__callout-arrow-head {
  position: absolute;
  left: 22.07%;
  top: 73.4%;
  width: 20.97%;
  height: auto;
  transform: rotate(24.64deg);
}

/* ---------- Featured work ---------- */

.featured-work {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) 0 var(--space-lg);
}

.featured-work__title {
  font-family: "Instrument Serif", var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 91px);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.work-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.work-grid__row {
  display: flex;
  gap: 42px;
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.work-card__image {
  position: relative;
  width: 100%;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: clip;
  background: var(--color-accent-blue);
  aspect-ratio: 625 / 642;
}

.work-card--full .work-card__image {
  aspect-ratio: 1292 / 642;
}

.work-card--wide-image .work-card__image {
  aspect-ratio: 625 / 466.5;
}

.work-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-load);
}

.work-card:hover .work-card__image img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .work-card__image img {
    transition: none;
  }
}

.work-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.work-card__title {
  font-family: "Instrument Serif", var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 48px);
  line-height: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.work-card__tags {
  flex-shrink: 0;
  justify-content: flex-end;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .work-grid__row {
    flex-direction: column;
  }

  .work-card__image,
  .work-card--full .work-card__image,
  .work-card--wide-image .work-card__image {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 560px) {
  .work-card__meta {
    flex-direction: column;
    gap: 12px;
  }

  .work-card__tags {
    justify-content: flex-start;
  }
}