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

html, body { height: 100%; }

body{
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===========================
   Layout
=========================== */
.page{
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 52px 36px;
}

/* Text-width controller */
.wrap{
  width: min(760px, 100%);
  margin: 0 auto;
}

/* ===========================
   Header (desktop)
=========================== */
.top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
  margin-bottom: 32px;
}

/* ===========================
   Typography
=========================== */
.title{
  font-family: "Libre Baskerville", serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 10px 0 0;
  padding-left: 2px; /* optical serif alignment */
  white-space: nowrap;
}

/* ===========================
   Image
=========================== */
.portrait{
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 8px;

  filter:
    contrast(1.25)
    saturation(1.05)
    brightness(0.98);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.22);
}

/* ===========================
   Content
=========================== */
.content{
  font-size: 13.5px;
  line-height: 1.65;
  color: #222222;
}

.content p{
  margin: 0 0 16px;
  text-align: justify;
}

.links{ margin-top: 4px; }
.contact{ margin-top: 20px; }

/* ===========================
   Links
=========================== */
a{
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:visited{ color: #111111; }

/* ===========================
   Mobile (KEY FIX)
=========================== */
@media (max-width: 720px){

  .page{
    padding: 20px 18px 40px;
  }

  /* GRID keeps title + photo aligned to text width */
  .top{
    display: grid;
    grid-template-columns: 1fr auto; /* title | photo */
    column-gap: 16px;
    align-items: start;
    margin-bottom: 22px;
  }

  .title{
    padding-left: 0;
    margin: 6px 0 0;
    font-size: clamp(24px, 6.2vw, 34px);
    text-align: left;
    white-space: nowrap; /* stay on one line */
  }

  .portrait{
    width: 120px;
    height: 120px;
    justify-self: end; /* aligns to RIGHT edge of text block */
    object-position: center 10%;
  }

  .content{
    font-size: 15px;
    line-height: 1.7;
  }

  .content p{
    text-align: left;
  }
}

/* ===========================
   Very small phones
=========================== */
@media (max-width: 360px){
  .title{
    font-size: clamp(22px, 6vw, 30px);
  }

  .portrait{
    width: 110px;
    height: 110px;
  }
}