* { box-sizing: border-box; }
body { margin: 0; background: #090909; color: #f4f1eb; font-family: system-ui, sans-serif; }
main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
.portrait { position: relative; background: #050505; min-height: clamp(28rem, 65svh, 40rem); }
.portrait-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 75%, #090909); }
.monogram { position: relative; width: clamp(6rem, 12vw, 9rem); aspect-ratio: 1.5; margin-inline: auto; overflow: hidden; mix-blend-mode: screen; }
.monogram img { position: absolute; width: 174%; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.intro { align-self: center; padding: clamp(2rem, 6vw, 6rem); text-align: center; }
.label, .status { font-size: .72rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: #bab6ae; }
h1 { margin: .18em 0; font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(4rem, 8vw, 8rem); letter-spacing: normal; line-height: 1.25; }
.signature { margin: 1.2rem 0; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 600; }
.bio, .course { grid-column: 1 / -1; }
.bio { background: #f4efe6; color: #28241f; line-height: 1.75; padding: clamp(2.5rem, 6vw, 5rem) 1.5rem; }
.bio > * { max-width: 58ch; margin-inline: auto; }
.bio h2 { margin-block: 0 1.5rem; font-size: 1rem; letter-spacing: .12em; max-width: 58ch; }
.bio p { margin-block: 0 1.25rem; }
.bio p:last-child { margin-bottom: 0; }
.course { display: flex; justify-content: center; padding: 2rem 1.5rem; background: #252422; }
.course-link {
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 3vw, 1.25rem);
  width: min(100%, 32rem);
  padding: 1rem clamp(.75rem, 3vw, 1.5rem);
  border: 1px solid #77726a;
  border-radius: .65rem;
  background: #302e2b;
  color: inherit;
  text-decoration: none;
}
.course-arrow { margin-inline-start: auto; font-size: 1.25rem; }
.course strong { display: block; margin-bottom: .2rem; }
.shapes { flex: none; color: #ede8dc; }
@media (max-width: 720px) {
  main { display: block; }
  .portrait { min-height: 0; height: clamp(19rem, 58svh, 34rem); }
  .portrait::after { background: linear-gradient(transparent 72%, #090909); }
  .intro { padding: 0 1.5rem 2.5rem; }
}

.cuts {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
  background: #ebe5da;
  color: #28241f;
}

.cuts-content {
  max-width: 64rem;
  margin-inline: auto;
}

.cuts h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.cuts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cut-card {
  overflow: hidden;
  border: 1px solid #cfc6b8;
  border-radius: .65rem;
  background: #f4efe6;
}

.cut-photo {
  aspect-ratio: 4 / 3;
  background: #d8d0c3;
}

img.cut-photo {
  display: block;
  width: 100%;
  object-fit: cover;
}

.cut-card p {
  margin: 0;
  padding: 1rem;
  font-weight: 650;
}

.cut-card span {
  display: block;
  margin-top: .25rem;
  color: #625a50;
  font-size: .85rem;
  font-weight: 400;
}

@media (max-width: 720px) {
  .cuts-grid { grid-template-columns: 1fr; }
}