/* ------------------------
   GLOBAL BASE
   ------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow-x: hidden;
  height: 100%;
}

img {
  display: block;
}

/* ------------------------
   PAGE WRAPPER
   ------------------------ */

.page {
  width: 100%;
  max-width: 1920px;        /* desktop artboard width */
  margin: 0 auto;
  padding: 40px 80px;       /* top / sides / bottom */

  /* fill viewport height (modern) */
  min-height: 100vh;        /* fallback */
  min-height: 100dvh;       /* correct on real tablets/phones */

  display: flex;
  flex-direction: column;   /* header → bio → footer */
  justify-content: space-between;  /* header top, footer bottom, bio in between */
}

/* generic section reset */
.section {
  margin: 0;
}

/* ------------------------
   HEADER / BIO / FOOTER
   ------------------------ */

/* header: spacing all handled by flex + padding */
.section-header {
  margin: 0;
}

/* bio sits between header and footer */
.section-bio {
  margin: 0;
}

/* footer participates in flex spacing */
.section-footer {
  margin: 0;
}

/* ------------------------
   IMAGES
   ------------------------ */

/* Base image behaviour */
.section-image {
  max-width: 100%;
  height: auto;
}

/* Bio image → responsive width with min/ideal/max */
.section-bio .section-image {
  width: clamp(460px, 48vw, 760px);  /* desktop: left aligned, never huge */
}

/* ------------------------
   TABLET (≤ 1024px)
   ------------------------ */

@media (max-width: 1024px) {
  .page {
    max-width: 1024px;
    padding: 32px 48px;
    /* still flex-column + space-between; bio stays between header/footer */
  }

  .section-header {
    margin: 0;
  }

  .section-bio {
    margin: 0;
  }

  .section-footer {
    margin: 0;
  }

  /* Swap in tablet-specific header/footer assets */
  .section-header .header-img {
    content: url("assets/header.png");
  }

  .section-footer .footer-img {
    content: url("assets/footer.png");
  }

  .section-bio .section-image {
    width: 100%;
    max-width: 640px;   /* cap bio width, still left-aligned via padding */
  }
}

/* ------------------------
   MOBILE (≤ 390px)
   ------------------------ */

@media (max-width: 390px) {
  .page {
    max-width: 390px;
    padding: 24px 20px;
  }

  .section-header {
    margin-bottom: 32px;  /* tiny breathing room, optional */
  }

  .section-bio .section-image {
    width: 100%;
    max-width: none;
  }
}