@font-face {
  font-family: "Passion Colin SemiBold";
  src: url("assets/fonts/PassionSansPDbi-SemiBoldSma.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

.about-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #ffffff;
  color: #111111;
}

.about-stage {
  width: min(100%, 1512px);
  margin-inline: auto;
  container-type: inline-size;
}

.about-site-header {
  padding-top: 3.97cqw;
  text-align: center;
}

.about-site-title {
  position: static;
  display: inline-block;
  margin: 0;
  padding-left: 0.43em;
  transform: none;

  font-family: "Passion Colin Title", sans-serif;
  font-size: clamp(30px, 3.44vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.43em;
  text-transform: none;
  white-space: nowrap;
}

.about-site-title:hover,
.about-site-title:focus-visible {
  opacity: 0.5;
}

.about-main {
  
  width: min(76%, 1150px);
  margin: 5.15cqw auto 0;
  padding-bottom: clamp(72px, 8cqw, 122px);
}

.section-title,
.title-copy {
  font-family: "Passion Colin Title", sans-serif;
  font-weight: 400;
}

.book-copy {
  font-family: "Passion Colin Nav", sans-serif;
  font-weight: 400;
}

.semibold-copy {
  font-family: "Passion Colin SemiBold", "Passion Colin Nav", sans-serif;
  font-weight: 600;
}

.about-intro {
  display: grid;
  grid-template-columns: 31% 1fr;
  grid-template-rows: auto auto;
  column-gap: 6.4%;
  row-gap: 4.25cqw;
  align-items: start;
}

.about-heading {
  grid-column: 1;
  grid-row: 1;
}

.about-portrait {
  grid-column: 1;
  grid-row: 2;
}

.artist-statement {
  grid-column: 2;
  grid-row: 2;
  align-self: start;

  margin-top: 0;
}

.about-heading,
.section-title {
  margin: 0;
  font-size: clamp(25px, 2.4cqw, 37px);
  line-height: 1.05;
  letter-spacing: 0.36em;
  text-transform: none;
}

.about-heading {
  margin-bottom: 4.25cqw;
}

.about-portrait {
  width: 100%;
  height: auto;
}

.artist-statement,
.biography-copy {
  font-size: clamp(16px, 1.22cqw, 18.5px);
  line-height: 1.62;
  letter-spacing: 0.018em;
}

.artist-statement {
  padding-top: 0;
  max-width: 650px;
}

.artist-statement p,
.biography-copy {
  margin: 0;
}

.artist-statement p + p {
  margin-top: 2.28em;
}

.about-divider {
  width: 100%;
  margin: 4.85cqw 0 4.45cqw;
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.62);
}

.about-cv-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "biography education"
    "awards education";
  column-gap: 10%;
  row-gap: 4.15cqw;
}

.about-cv-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(17, 17, 17, 0.65);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.biography-section {
  grid-area: biography;
}

.education-section {
  grid-area: education;
  position: relative;
  padding-left: 9%;
}

.awards-section {
  grid-area: awards;
}

.biography-section .section-title,
.education-section .section-title {
  text-align: center;
  margin-bottom: 3.05cqw;
}

.biography-copy {
  margin: 0;
}

.awards-title {
  text-align: center;
  margin-bottom: 2.45cqw;
}

.awards-title span {
  display: inline;
}

.awards-title span + span {
  margin-left: 0.35em;
}

.awards-year,
.exhibition-year {
  margin: 0;
  text-align: center;
  font-size: clamp(17px, 1.5cqw, 23px);
  line-height: 1;
  letter-spacing: 0.48em;
}

.awards-list {
  
  width: 72%;
  margin: 3.15cqw auto 0;
}

.award-entry {
  font-size: clamp(14px, 1.18cqw, 17.5px);
  line-height: 1.52;
  letter-spacing: 0.28em;
}

.award-entry + .award-entry {
  margin-top: 3.1cqw;
}

.award-entry p {
  margin: 0;
}

.award-result {
  margin-top: 0.3em !important;
  letter-spacing: 0.43em;
  text-transform: none;
}

.education-list {
  margin-top: 4.45cqw;
}

.education-entry {
  display: grid;
  grid-template-columns: 5.4cqw 1fr;
  column-gap: 2.8cqw;
  align-items: start;
}

.education-entry + .education-entry {
  margin-top: 5.15cqw;
}

.cv-year {
  margin: 0;
  padding-top: 0.08em;
  font-size: clamp(17px, 1.5cqw, 23px);
  line-height: 1;
  letter-spacing: 0.42em;

  transform: translateX(-1.75cqw);
}

.education-detail {
  font-size: clamp(14px, 1.16cqw, 17.3px);
  line-height: 1.28;
  letter-spacing: 0.29em;
}

.education-detail p {
  margin: 0;
}

.education-detail p + p {
  margin-top: 1.55em;
}

.education-detail .programme {
  line-height: 1.03;
}

.education-detail .honour {
  margin-top: 0.28em;
  line-height: 1;
}

.education-detail .location {
  margin-top: 1.5em;
}

.exhibitions-section {
  width: min(66%, 700px);
  margin: 4.8cqw auto 0;
}

.exhibitions-title {
  text-align: center;
}

.exhibitions-title span {
  display: block;
}

.exhibitions-title span + span {
  margin-top: 0.2em;
}

.exhibitions-list {
  
  width: 79%;
  margin: 3.1cqw auto 0;
  transform: translateX(1.25cqw);
}

.exhibition-entry {
  font-size: clamp(14px, 1.16cqw, 17.3px);
  line-height: 1.5;
  letter-spacing: 0.29em;
}

.exhibition-entry + .exhibition-entry {
  margin-top: 3.65cqw;
}

.exhibition-entry p {
  margin: 0;
}

.exhibition-entry .exhibition-year {
  margin-bottom: 2.3cqw;
}

@media (max-width: 700px) {
  .about-stage {
    width: 100%;
  }

  .about-site-header {
    padding-top: 10.2vw;
  }

  .about-site-title {
    font-size: 8.68vw;
    letter-spacing: 0.43em;
  }

  .about-main {
    width: calc(100% - 40px);
    margin-top: 14vw;
    padding-bottom: 110px;
  }

  .about-intro {
    display: block;
  }

  .about-heading,
  .about-portrait,
  .artist-statement {
    display: block;
  }

  .about-heading,
  .section-title {
    font-size: clamp(23px, 7.2vw, 29px);
    letter-spacing: 0.36em;
  }

  .about-heading {
    margin-bottom: 7vw;
    text-align: center;
  }

  .about-portrait {
    width: 68%;
    margin-inline: auto;
  }

  .artist-statement {
    margin-top: 7vw;
    padding-top: 0;
    max-width: none;
  }

  .artist-statement,
  .biography-copy {
    font-size: 14px;
    line-height: 1.68;
    letter-spacing: 0.018em;
  }

  .artist-statement p + p {
    margin-top: 2.35em;
  }

  .about-divider {
    display: none;
  }

  .about-cv-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "biography"
      "education"
      "awards";
    row-gap: 15vw;
    margin-top: 15vw;
  }

  .education-section {
    padding-left: 0;
  }

  .about-cv-grid::after {
    display: none;
  }

  .biography-section .section-title,
  .education-section .section-title {
    margin-bottom: 8vw;
  }

  .biography-copy {
    margin: 0;
  }

  .education-list {
    margin-top: 10vw;
  }

  .education-entry {
    grid-template-columns: 52px 1fr;
    column-gap: 22px;
  }

  .education-entry + .education-entry {
    margin-top: 11vw;
  }

  .cv-year {
    font-size: 14px;
    letter-spacing: 0.4em;
    transform: none;
  }

  .education-detail {
    font-size: 12.5px;
    line-height: 1.26;
    letter-spacing: 0.27em;
  }

  .education-detail p + p {
    margin-top: 1.45em;
  }

  .awards-title span {
    display: block;
  }

  .awards-title span + span {
    margin: 0.18em 0 0;
  }

  .awards-year {
    margin-top: 8vw;
    font-size: 13px;
  }

  .awards-list {
    width: 82%;
    margin-top: 10vw;
  }

  .award-entry {
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0.27em;
  }

  .award-entry + .award-entry {
    margin-top: 10vw;
  }

  .exhibitions-section {
    width: 100%;
    margin-top: 18vw;
  }

  .exhibitions-list {
    width: 82%;
    margin: 10vw auto 0;
  }

  .exhibition-entry {
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0.27em;
  }

  .exhibition-entry + .exhibition-entry {
    margin-top: 12vw;
  }

  .exhibition-entry .exhibition-year {
    margin-bottom: 8vw;
    font-size: 13px;
  }
}
@media (max-width: 700px) {
  .artist-statement,
  .biography-copy {
    font-size: 16px;
    line-height: 1.65;
  }

  .education-detail,
  .award-entry,
  .exhibition-entry {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .cv-year,
  .awards-year,
  .exhibition-year {
    font-size: 15px;
  }
}

@media (min-width: 701px) {
  .about-main {
    width: min(92.3%, 1396px);
    margin-top: 8.55cqw;
  }

  .about-intro {
    width: 89.55%;
    margin-inline: auto;
    grid-template-columns: 28.8% minmax(0, 1fr);
    column-gap: 6.1%;
    row-gap: 4.25cqw;
  }

  .about-heading {
    margin-bottom: 0;
  }

  .artist-statement,
  .biography-copy {
    font-size: clamp(16px, 1.5873cqw, 24px);
    line-height: clamp(27px, 2.6455cqw, 40px);
    letter-spacing: 0.1em;
  }

  .artist-statement {
    max-width: none;
    margin-top: -4.35cqw;
    transform: none;
  }

  .artist-statement p + p {
    margin-top: 1.67em;
  }

  .biography-copy {
    width: 94%;
  }

  .about-divider {
    width: 79.55%;
    margin: 3cqw 0 7cqw 8.14%;
  }

  .about-cv-grid {
    grid-template-columns: 48% 48%;
    column-gap: 4%;
    min-height: 67cqw;
  }

  .about-cv-grid::after {
    left: 48%;
  }

  .education-section {
    padding-left: 5%;
  }
}

@media (max-width: 700px) {
  .artist-statement,
  .biography-copy {
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0.1em;
  }

  .artist-statement p + p {
    margin-top: 1.35em;
  }
}