.about-page {
  background: #0e100f;
}

.about-page-hero {
  min-height: min(850px,calc(100vh - 76px));
  padding: 8vw 7vw;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 8vw;
  overflow: hidden;
  position: relative;
  color: #ecebdd;
  background:
    radial-gradient(circle at 76% 19%,rgba(203,211,173,.18),transparent 20%),
    linear-gradient(132deg,#0b0d0c 0 45%,#272b28 45.2% 72%,#111310 72.2%);
}
.about-page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(18deg,transparent 0 4px,rgba(255,255,255,.025) 5px 6px);
}
.about-hero-copy { position: relative; z-index: 2; }
.about-hero-copy .eyebrow { color: #cbd3ad; }
.about-hero-copy h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(72px,9vw,138px);
  line-height: .8;
}
.about-hero-copy > p:last-child {
  max-width: 460px;
  margin-top: 42px;
  color: rgba(236,235,221,.72);
  font-size: 18px;
  line-height: 1.75;
}
.about-card-pair { min-height: 620px; position: relative; z-index: 1; }
.about-card {
  width: min(28vw,320px);
  margin: 0;
  position: absolute;
  border-radius: 9px;
  overflow: hidden;
  background: #242724;
  box-shadow: -24px 34px 30px rgba(0,0,0,.52);
}
.about-card img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.about-card-priestess { left: 5%; top: 2%; transform: rotate(-7deg); }
.about-card-hermit { right: 3%; top: 17%; transform: rotate(8deg); }
.about-card-pair > p {
  position: absolute;
  right: 1%;
  bottom: 1%;
  color: rgba(235,235,220,.5);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.about-makers {
  color: #1b1d1b;
  background: #d5d5c8;
}
.about-makers-heading {
  padding: 120px 7vw 80px;
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  gap: 8vw;
  align-items: end;
  border-bottom: 1px solid rgba(27,29,27,.2);
}
.about-makers-heading h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(54px,7vw,100px);
  line-height: .92;
}
.maker-profile {
  padding: 100px 7vw;
  display: grid;
  grid-template-columns: minmax(80px,.22fr) minmax(220px,.55fr) minmax(430px,1.23fr);
  gap: 4vw;
  align-items: start;
  border-bottom: 1px solid rgba(27,29,27,.2);
  background:
    linear-gradient(125deg,rgba(120,117,139,.11),transparent 45%),
    #d5d5c8;
}
.maker-profile-patrick {
  background:
    radial-gradient(circle at 84% 14%,rgba(203,211,173,.22),transparent 18%),
    #bec4b8;
}
.maker-number {
  color: rgba(110,108,127,.7);
  font-family: "Italiana",serif;
  font-size: clamp(80px,11vw,170px);
  line-height: .8;
}
.maker-portrait {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: -14px 22px 25px rgba(27,29,27,.2);
}
.maker-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.maker-portrait-patrick img { object-position: center 25%; }
.maker-copy { max-width: 850px; }
.maker-copy h2 { margin: 0 0 40px; font-size: clamp(52px,7vw,94px); line-height: .95; }
.maker-copy > p:not(.eyebrow) { max-width: 760px; margin: 0 0 24px; font-size: 17px; line-height: 1.85; }
.maker-note {
  max-width: 820px;
  margin: 52px 0 0;
  padding: 32px 0 0 34px;
  border-top: 1px solid rgba(27,29,27,.2);
  border-left: 3px solid #77758b;
  font-size: clamp(27px,3vw,42px);
  line-height: 1.45;
}
.about-next {
  padding: 130px 7vw;
  color: #e7e6da;
  background:
    radial-gradient(circle at 77% 27%,rgba(203,211,173,.15),transparent 22%),
    #111411;
}
.about-next .eyebrow { color: #cbd3ad; }
.about-next h2 { margin: 0; font-size: clamp(58px,8vw,112px); }
.about-next > div { max-width: 800px; margin: 65px 0 0 auto; }
.about-next a {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(231,230,218,.22);
  color: #e7e6da;
  text-decoration: none;
  font-family: "Italiana",serif;
  font-size: clamp(22px,3vw,36px);
}
.about-next a:last-child { border-bottom: 1px solid rgba(231,230,218,.22); }
.about-next a span { color: #cbd3ad; }

@media(max-width:800px) {
  .about-page-hero { min-height: auto; padding: 90px 7vw 60px; grid-template-columns: 1fr; }
  .about-card-pair { min-height: 480px; margin-top: 35px; }
  .about-card { width: min(59vw,275px); }
  .about-makers-heading { padding: 85px 6vw 60px; grid-template-columns: 1fr; gap: 28px; }
  .maker-profile { padding: 75px 6vw; grid-template-columns: 1fr; gap: 35px; }
  .maker-number { font-size: 72px; }
  .maker-portrait { max-width: 330px; }
  .maker-copy > p:not(.eyebrow) { font-size: 15px; }
  .maker-note { padding-left: 22px; }
  .about-next { padding: 90px 6vw; }
}