@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;700&display=swap');

.page {
  background: #efe7d8;
  color: #111111;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 28px 16px;
}

.frame { width: 100%; max-width: 1120px; }

.grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  grid-template-areas:
    "hero portrait"
    "bio portrait"
    "photo rightcol";
  column-gap: 0;
  row-gap: 24px;
}

.card {
  background: #f6f1e7;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  border-radius: 0;
  overflow: hidden;
}

/* hero */
.hero {
  grid-area: hero;
  background: #0f0f10;
  color: #ffffff;
  padding: 40px 36px 42px;
  align-self: start;
}

.brand {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  margin-bottom: 18px;
}

.display {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  line-height: 0.92;
  margin-bottom: 18px;
}

.display-line { display: block; font-size: clamp(46px, 7.3vw, 90px); }

.lede {
  max-width: 38ch;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.92;
}

/* portrait + nav */
.portrait {
  grid-area: portrait;
  background: #000000;
  position: relative;
  /* height: clamp(740px, 86vh, 1100px); */
  height: 782px;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 82%;
  display: block;
      margin-top: 14px;
}

/* the 4-item nav above the head */
.portrait-nav {
  position: absolute;
  top: 12px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.portrait-link {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* left column below */
.bio { grid-area: bio; padding: 34px 32px 36px; }

.h {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  margin: 0 0 10px 0;
  color: #111111;
}

.h-big { font-size: clamp(44px, 6.1vw, 68px); }

.copy {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.75;
  max-width: 38ch;
}

.photo { grid-area: photo; background: #000000; height: 320px; }

/* right column (single light card spanning two rows) */
.rightcol {
  grid-area: rightcol;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 28px 30px;
}

.right-area { max-width: 44ch; }

.list {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.row { display: block; }

.row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  color: #3a3a3a;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.row-arrow { margin-left: 12px; }

.explore-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
}

.explore {
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  color: #111111;
  padding-top: 6px;
}

/* mobile behavior: keep the head visible, not chopped */
@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "portrait"
      "bio"
      "photo"
      "rightcol";
    column-gap: 0;
    row-gap: 20px;
  }
  .portrait {
    /* height: 68vh; */
    height: 446px;
    padding-top: 30px;
  }
  .cover {
    object-position: 50% 12%;
  }
  .portrait-link { font-size: 16px; }

  .photo {
    height: initial;
  }
}

@media (max-width: 600px) {
  .portrait {
  height: 295px;
}}

@media (max-width: 440px) {
  .display-line {
    display: block;
    font-size: 36px;
}
.lede {font-size: 14px;}
    .portrait-link {
        font-size: 14px;
    }}

@media (max-width: 360px) {
    .portrait-link {
        font-size: 12px;
    }}