/* ============================================================
   HEIGHT-BASED QUERIES
   ============================================================ */

@media screen and (min-height: 1440px) {
  .showcase {
    margin: 75% auto 0;
  }
}

@media screen and (max-height: 2160px) {
  body {
    background-position-y: 160px;
  }

  .landing__container {
    padding-top: 15%;
  }
}

@media screen and (max-height: 1440px) {
  body {
    background-position-y: 100px;
  }

  .landing__container {
    padding-top: 10%;
  }
}

@media screen and (max-height: 1080px) {
  body {
    background-position-y: 0;
  }

  .landing__container {
    padding-top: 5%;
  }
}

/* Merged: both original max-height:1024px blocks */
@media screen and (max-height: 1024px) {
  .showcase {
    margin-top: 0;
  }

  .landing__container {
    padding-top: 0;
  }
}

/* ============================================================
   xl — max-width: 1440px
   ============================================================ */

@media screen and (max-width: 1440px) {
  body {
    background-image: none;
  }

  .page-shell {
    width: 100%;
  }

  .landing__container {
    width: 1024px;
    height: 600px;
    margin: 10% auto;
    padding-top: 0;
  }

  .landing__spacer {
    height: 67.5px;
  }

  .landing__title-block {
    width: 100%;
    margin-top: 220px;
    margin-left: 80px;
  }

  .landing__name {
    font-size: 64px;
  }

  .landing__role {
    font-size: 26.5px;
  }

  .landing__buttons {
    width: 260px;
  }

  .landing__avatar {
    width: 500px;
    height: 500px;
    margin-right: 80px;
  }

  .landing__avatar-frame {
    width: 456px;
    height: 456px;
    clip-path: circle(228px at center);
  }

  .landing-menu-item--1 {
    top: -62px;
    left: 160px;
    --line-width: 630px;
  }

  .landing-menu-item--2 {
    top: -32px;
    left: 80px;
    --line-width: 550px;
  }

  .landing-menu-item--3 {
    top: 18px;
    left: 12px;
    --line-width: 482px;
  }

  .landing-menu-item--4 {
    top: 86px;
    left: -36px;
    --line-width: 434px;
  }

  .landing-menu-item__line-left {
    width: calc(80% - 80px);
  }

  .landing-menu-item__line-right {
    width: 20%;
  }
}



@media screen and (max-width: 1024px) {
  .showcase {
    margin: 0;
  }

  .showcase__content {
    padding: 16px;
  }

  .showcase-grid {
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
  }

  .about {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 5%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .about__body {
    row-gap: 32px;
    grid-template-columns: 1fr;
  }

  .about__column--left,
  .about__column--right {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    justify-self: stretch;
    text-align: center;
  }

  .about__column--left {
    padding-left: 0;
  }

  .about__menu-item {
    display: grid;
    width: auto;
    justify-items: center;
    grid-template-columns: 1fr;
  }

  .about__menu-label {
    width: 95px;
    height: 64px;
    text-align: center;
  }

  .about__content {
    margin: 32px 0;
  }

  .contact {
    margin-left: 0;
    margin-right: 0;
  }

  .landing__spacer {
    height: 27.5px;
  }

  .landing__container {
    width: 320px;
    height: auto;
    margin: 15% auto;
    flex-direction: column-reverse;
  }

  .landing__title-block {
    width: 320px;
    height: 200px;
    margin: 40px auto 160px;
    text-align: center;
  }

  .landing__name {
    font-size: 76px;
  }

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

  .landing__buttons {
    gap: 16px;
    width: 100%;
    margin-top: 40px;
  }

  .landing__button {
    border-radius: 32px;
  }

  .landing__avatar {
    width: 320px;
    height: 320px;
    padding: 20px;
    margin: 0;
  }

  .landing__avatar-menu {
    display: none;
  }

  .landing__avatar-frame {
    width: 280px;
    height: 280px;
    clip-path: circle(140px at center);
  }
}

/* ============================================================
   md — max-width: 768px
   ============================================================ */

@media screen and (max-width: 768px) {
  .showcase {
    margin: 0 8px;
  }

  .showcase__title {
    height: 48px;
    display: block;
    line-height: 48px;
    font-weight: 700;
    text-align: center;
    background: var(--surface-2);
  }

  .showcase-tab {
    padding: 10px 6px;
  }

  .showcase-tab__title,
  .showcase-tab__detail {
    display: none;
  }

  .showcase-tab__icon {
    display: block;
  }

  .showcase__content {
    padding: 0;
  }

  .showcase-grid {
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
  }

  .work-tile {
    height: auto;
    min-height: 100%;
  }

  .work-tile__image {
    height: 180px;
  }

  .work-card--horizontal,
  .work-card__media {
    grid-template-columns: 1fr;
  }

  .work-card__image,
  .work-card__embed iframe,
  .work-card__embed-placeholder {
    height: 320px;
  }

  .work-detail__header,
  .work-detail__tags {
    height: auto;
  }

  .media-lightbox {
    padding: 16px;
  }

  .media-lightbox__image {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  .contact__items {
    width: auto;
    max-width: 320px;
  }
}

/* ============================================================
   sm — max-width: 520px
   ============================================================ */

@media screen and (max-width: 520px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .about__column--left,
  .about__column--right {
    gap: 16px 8px;
  }

  .contact__items {
    gap: 20px;
  }
}