/* ==========================================================
   ABOUT ME PAGE
   White About page, blue text/icons, centred footer.
   Manual controls live in :root below.
   ========================================================== */

:root{
  --about-bg:#ffffff;
  --about-ink:#000078;
  --about-page-padding-top:92px;

  --about-hero-padding-top:82px;
  --about-hero-padding-bottom:66px;
  --about-title-width:740px;
  --about-title-size:64px;
  --about-title-leading:1.08;

  --about-intro-copy-size:20px;
  --about-intro-copy-weight:300;
  --about-intro-copy-leading:1.5;
  --about-intro-copy-gap:22px;

  --about-principles-width:650px;
  --about-principles-column-gap:74px;
  --about-principles-row-gap:66px;
  --about-icon-size:150px;
  --about-caption-size:13px;
  --about-caption-leading:1.45;
  --about-caption-top-gap:18px;
  --about-principles-padding-bottom:76px;

  --about-divider-width:var(--wrap);
  --about-divider-margin-bottom:72px;

  --about-photo-width:var(--wrap);
  --about-photo-margin-bottom:58px;
  --about-copy-width:700px;
  --about-copy-size:20px;
  --about-copy-leading:1.35;
  --about-copy-gap:30px;
  --about-studio-margin-top:82px;
  --about-studio-gap:40px;
  --about-story-padding-bottom:100px;

  --about-footer-padding-top:28px;
  --about-footer-padding-bottom:120px;
  --about-footer-gap:18px;
  --about-footer-size:12px;
  --about-footer-leading:1.45;
}

body.about-page{
  --ink:var(--about-ink);
  --header-bg:var(--about-bg);
  --header-ink:var(--about-ink);
  margin:0;
  background:var(--about-bg);
  color:var(--about-ink);
  overflow-x:hidden;
}

body.about-page main,
body.about-page footer,
body.about-page .site-header,
body.about-page .site-header::before{
  background:var(--about-bg);
}

body.about-page .site-header::after{
  background:var(--about-ink);
}

body.about-page .desktop-nav a,
body.about-page .mobile-drawer a,
body.about-page .logo,
body.about-page .burger{
  color:var(--about-ink);
}

body.about-page .burger span{
  background:var(--about-ink);
}

.about-main{
  padding-top:var(--about-page-padding-top);
  background:var(--about-bg);
}

.about-hero{
  padding-top:var(--about-hero-padding-top);
  padding-bottom:var(--about-hero-padding-bottom);
  text-align:center;
}

.about-hero h1{
  width:min(var(--about-title-width),100%);
  margin:0 auto 32px;
  font-family:'DM Serif Text',Georgia,serif;
  font-size:var(--about-title-size);
  line-height:var(--about-title-leading);
  font-weight:400;
  letter-spacing:var(--serif-tracking);
  color:var(--about-ink);
}

.about-intro-copy{
  width:min(520px,100%);
  margin-inline:auto;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--about-intro-copy-size);
  line-height:var(--about-intro-copy-leading);
  font-weight:var(--about-intro-copy-weight);
  color:var(--about-ink);
}

.about-intro-copy p{
  margin:0;
}

.about-intro-copy p + p{
  margin-top:var(--about-intro-copy-gap);
}

.about-principles{
  padding-bottom:var(--about-principles-padding-bottom);
  text-align:center;
}

.about-principles-grid{
  width:min(var(--about-principles-width),100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--about-principles-column-gap);
  row-gap:var(--about-principles-row-gap);
}

.about-principle{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.about-principle img{
  width:var(--about-icon-size);
  height:var(--about-icon-size);
  object-fit:contain;
  display:block;
}

.about-principle p{
  margin:var(--about-caption-top-gap) 0 0;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--about-caption-size);
  line-height:var(--about-caption-leading);
  font-weight:700;
  color:var(--about-ink);
}

.about-story{
  text-align:center;
  padding-top:var(--about-divider-margin-bottom);
  padding-bottom:var(--about-story-padding-bottom);
  position:relative;
}

.about-story::before{
  content:none;
}

.about-photo{
  display:block;
  width:100%;
  max-width:min(var(--about-photo-width),calc(100vw - 80px));
  height:auto;
  margin:0 auto var(--about-photo-margin-bottom);
}

.about-copy{
  width:min(var(--about-copy-width),100%);
  margin-inline:auto;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--about-copy-size);
  line-height:var(--about-copy-leading);
  font-weight:400;
  color:var(--about-ink);
}

.about-copy p{
  margin:0;
}

.about-copy p + p{
  margin-top:var(--about-copy-gap);
}

.about-studio-grid{
  width:100%;
  max-width:min(var(--about-photo-width),calc(100vw - 80px));
  margin:var(--about-studio-margin-top) auto 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--about-studio-gap);
}

.about-studio-grid picture,
.about-studio-grid img{
  display:block;
  width:100%;
  height:auto;
}

.about-footer{
  display:block;
  width:min(var(--wrap),calc(100vw - 80px));
  margin-inline:auto;
  border-top:0;
  padding-top:0;
  padding-bottom:var(--about-footer-padding-bottom);
  text-align:center;
  font-family:Inter,Arial,sans-serif;
  font-size:var(--about-footer-size);
  line-height:var(--about-footer-leading);
  font-weight:400;
  color:var(--about-ink);
}
.about-footer::before{
  content:"";
  display:block;
  height:1px;
  background:var(--about-ink);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:var(--about-footer-padding-top);
}

.about-footer p{
  margin:0;
}

.about-footer p + p{
  margin-top:var(--about-footer-gap);
}

.about-footer a{
  display:inline;
  color:var(--about-ink);
  text-decoration:none;
}

@media(max-width:760px){
  :root{
    --about-page-padding-top:var(--mobile-header-height);
    --about-hero-padding-top:58px;
    --about-hero-padding-bottom:54px;
    --about-title-width:86vw;
    --about-title-size:52px;
    --about-title-leading:1.08;

    --about-principles-width:78vw;
    --about-principles-column-gap:42px;
    --about-principles-row-gap:50px;
    --about-icon-size:120px;
    --about-caption-size:13px;
    --about-caption-top-gap:16px;
    --about-principles-padding-bottom:66px;

    --about-divider-width:var(--wrap);
    --about-divider-margin-bottom:62px;
    --about-photo-width:90vw;
    --about-photo-margin-bottom:46px;
    --about-copy-width:85vw;
    --about-copy-size:19px;
    --about-copy-leading:1.35;
    --about-copy-gap:28px;
    --about-studio-margin-top:64px;
    --about-studio-gap:40px;
    --about-story-padding-bottom:100px;
    --about-footer-padding-bottom:86px;
  }

    .about-intro-copy{
    width:82vw;
  }

  .about-principles-grid{
    grid-template-columns:repeat(2,1fr);
  }

  body.about-page .mobile-drawer{
    background:var(--about-bg);
    border-bottom-color:var(--about-ink);
  }

  .about-studio-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .about-footer{
    width:86vw;
  }
}

@media(max-width:420px){
  :root{
    --about-title-size:44px;
    --about-principles-width:84vw;
    --about-principles-column-gap:30px;
    --about-principles-row-gap:44px;
    --about-icon-size:120px;
    --about-copy-size:18px;
    --about-photo-width:90vw;
  }
}