/* =========================================================
   CHARLOTTE STAPLETON
   PORTFOLIO DESIGN SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

:root {

  /* Colours */

  --background: #caf8eb;
  --text: #073f49;


  /* Typography */

  --serif:
    "lust-text",
    Georgia,
    serif;

  --sans:
    "freight-sans-pro",
    Helvetica,
    sans-serif;


  /* Page dimensions */

  --page-padding:
    clamp(28px, 3vw, 52px);

  --project-column-gap:
    clamp(42px, 4.8vw, 78px);

  --project-row-gap:
    clamp(72px, 7.5vw, 125px);

}



/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    var(--background);

  color:
    var(--text);

  font-family:
    var(--sans);

  -webkit-font-smoothing:
    antialiased;

}


img {

  display: block;

  width: 100%;

}


a {

  color: inherit;

}



/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  display: flex;

  justify-content:
    space-between;

  align-items:
    baseline;

  padding:

    32px

    var(--page-padding)

    0;

}



.site-logo {

  font-family:
    var(--serif);

  font-size:
    clamp(18px, 1.4vw, 24px);

  line-height: 1;

  text-decoration:
    none;

}



.site-nav {

  display: flex;

  gap:
    clamp(18px, 2vw, 32px);

}



.site-nav a {

  font-size:
    15px;

  line-height: 1;

  text-decoration:
    none;

}



.site-nav a:hover,
.site-nav a.active {

  text-decoration:
    underline;

  text-underline-offset:
    4px;

}



/* =========================================================
   INTRO
   ========================================================= */

.intro {

  padding:

    clamp(70px, 6.8vw, 115px)

    var(--page-padding)

    clamp(90px, 8vw, 140px);

}



.intro h1 {

  max-width:
    1180px;

  margin:
    0;

  font-family:
    var(--serif);
   
font-size: clamp(42px, 3.5vw, 64px);

   

  font-weight:
    400;

  line-height:
    1.1;

letter-spacing: 0em;

}



/* =========================================================
   PROJECT GRID
   ========================================================= */

.project-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    var(--project-column-gap);

  row-gap:
    var(--project-row-gap);

  padding:

    0

    var(--page-padding);

}



/* =========================================================
   PROJECT CARD
   ========================================================= */

.project-card {

  min-width:
    0;

}


.project-link {

  display:
    block;

  color:
    inherit;

  text-decoration:
    none;

}



/* =========================================================
   PROJECT IMAGES
   ========================================================= */

.project-image {

  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1.59 / 1;

  overflow:
    hidden;

}


.project-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:

    transform

    500ms

    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    );

}



/* Small interaction on linked projects */

.project-link:hover
.project-image img {

  transform:
    scale(1.015);

}



/* =========================================================
   PROJECT TEXT
   ========================================================= */

.project-info {

  display:
    grid;

  grid-template-columns:
    minmax(130px, 0.8fr)
    minmax(180px, 1.5fr);

  gap:
    clamp(15px, 2vw, 32px);

  padding-top:
    12px;

}



.project-info h2 {

  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(20px, 1.25vw, 22px);

  font-weight:
    400;

  line-height:
    1.25;

}



/* Underline projects which can be opened */

.project-link
.project-info h2 {

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;

}



.project-info p {
  max-width: 430px;
  margin: 0;
  font-family: var(--sans);

  font-size:
    clamp(15px, 1vw, 17px);

  font-weight: 400;
  line-height: 1.35;
}



/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;

  padding:

    clamp(140px, 15vw, 250px)

    var(--page-padding)

    35px;

}



.site-footer p {

  margin:
    0;

  font-size:
    15px;

}



.footer-contact {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}



.footer-contact span {

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

}



.footer-contact a {

  font-size:
    15px;

  text-underline-offset:
    3px;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {


  .intro h1 {

    max-width:
      850px;

  }


  .project-info {

    grid-template-columns:
      1fr;

    gap:
      8px;

  }


  .project-info p {

    max-width:
      360px;

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {


  :root {

    --page-padding:
      20px;

  }



  /* ---------- Header ---------- */


  .site-header {

    padding-top:
      22px;

  }


  .site-logo {

    font-size:
      17px;

  }


  .site-nav {

    gap:
      14px;

  }


  .site-nav a {

    font-size:
      12px;

  }



  /* ---------- Intro ---------- */


  .intro {

    padding-top:
      70px;

    padding-bottom:
      75px;

  }


  .intro h1 {

    max-width:
      550px;

    font-size:
      clamp(38px, 10.5vw, 55px);

    line-height:
      0.98;

  }



  /* ---------- Projects ---------- */


  .project-grid {

    grid-template-columns:
      1fr;

    row-gap:
      70px;

  }


  .project-image {

    aspect-ratio:
      1.4 / 1;

  }


  .project-info {

    grid-template-columns:
      1fr;

    gap:
      7px;

    padding-top:
      10px;

  }


  .project-info h2 {

    font-size:
      21px;

  }


  .project-info p {

    max-width:
      390px;

    font-size:
      14px;

    line-height:
      1.4;

  }



  /* ---------- Footer ---------- */


  .site-footer {

    flex-direction:
      column;

    align-items:
      flex-start;

    padding-top:
      120px;

    padding-bottom:
      25px;

  }

}

.two-column-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
}

.two-column-media figure,
.two-column-media .vimeo-embed {
  margin: 0;
  min-width: 0;
}

.two-column-media img {
  display: block;
  width: 100%;
  height: auto;
}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {


  .site-header {

    align-items:
      flex-start;

  }


  .site-nav {

    gap:
      10px;

  }


  .intro {

    padding-top:
      60px;

  }

}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


  html {

    scroll-behavior:
      auto;

  }


  .project-image img {

    transition:
      none;

  }


}


/* =========================================================
   CASE STUDY PAGES
   ========================================================= */

.case-study-page {
  background: #fff6eb;

  --case-study-padding:
    clamp(50px, 10.5vw, 190px);
}


/* ---------------------------------------------------------
   CASE STUDY HEADER
   --------------------------------------------------------- */

.case-study-header {
  padding:
    clamp(70px, 7vw, 110px)
    var(--case-study-padding)
    clamp(55px, 5vw, 80px);

}


.case-study-header > h1 {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(48px, 5vw, 78px);

  font-weight: 400;

  line-height: 0.95;

  letter-spacing: 0em;
}


.case-study-credit {
  margin:
    28px 0 40px;

  font-size:
    16px;

  line-height:
    1.4;
}


.case-study-summary {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    clamp(28px, 5vw, 80px);

  padding-top:
    20px;

  border-top:
    1px solid var(--text);
}


.summary-column h2 {
  margin:
    0 0 14px;

  font-family:
    var(--sans);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.summary-column p {
  max-width:
    330px;

  margin:
    0;

  font-size:
    16px;

  line-height:
    1.4;
}



/* =========================================================
   MEDIA
   ========================================================= */

.case-study-media {
  padding:
    0
   var(--case-study-padding)
    clamp(55px, 6vw, 90px);
}


.case-study-media figure {
  margin: 0;
}


.media-full img {
  width: 100%;

  height: auto;
}


.media-grid-two {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    clamp(28px, 5vw, 70px);
}


.media-grid-two figure {
  margin: 0;
}


.media-grid-two img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}



/* =========================================================
   VIDEO COMPONENT
   ========================================================= */

.media-video {
  width: 100%;

  display: block;
}


.media-video video {
  display: block;

  width: 100%;

  height: auto;
}



/* =========================================================
   HORIZONTAL / PARALLAX SHOWCASE
   ========================================================= */

.horizontal-showcase {
  position: relative;

  margin:
    20px 0
    clamp(70px, 7vw, 110px);
}


.horizontal-sticky {
  position: relative;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  display: flex;

  align-items: center;

  scrollbar-width: none;

  cursor: grab;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: contain;

  touch-action: pan-y;
}


.horizontal-sticky::-webkit-scrollbar {
  display: none;
}


.horizontal-sticky.is-dragging {
  cursor: grabbing;

  user-select: none;
}


.horizontal-track {
  display: flex;

  gap:
    clamp(24px, 3vw, 48px);

  width: max-content;

  padding:
    0 var(--case-study-padding);

  align-items: center;
}

.horizontal-panel {
  flex: 0 0 auto;

  width:
    min(55vw, 950px);

  margin: 0;
}

.horizontal-panel-wide {
  width:
    min(55vw, 950px);
}


/* Keep every complete image visible */

.horizontal-panel img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;
}



/* =========================================================
   PROJECT LINKS
   ========================================================= */

.project-links {
  display: flex;

  gap:
    36px;

  padding:
    0
    var(--case-study-padding)
    clamp(60px, 7vw, 100px);
}


.outline-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    180px;

  min-height:
    52px;

  padding:
    12px 28px;

  border:
    1px solid var(--text);

  color:
    var(--text);

  font-size:
    16px;

  text-decoration:
    none;

  transition:
    background 180ms ease,
    color 180ms ease;
}


.outline-button:hover {
  background:
    var(--text);

  color:
    #fff6eb;
}


/* =========================================================
   4 IMAGE GRID
   ========================================================= */

.four-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 36px);
}

.four-image-grid figure {
  margin: 0;
}

.four-image-grid img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 680px) {

  .four-image-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}



/* =========================================================
   CREDITS
   ========================================================= */

.project-credits {
  margin:
    0
    var(--case-study-padding);

  padding:
    25px 0
    clamp(75px, 8vw, 120px);

  border-top:
    1px solid var(--text);
}


.project-credits h2 {
  margin:
    0 0 16px;

  font-family:
    var(--serif);

  font-size:
    24px;

  font-weight:
    400;
}


.project-credits ul {
  margin:
    0;

  padding-left:
    20px;

  max-width:
    1100px;
}


.project-credits li {
  margin:
    6px 0;

  font-size:
    16px;

  line-height:
    1.45;
}



/* =========================================================
   RELATED PROJECTS
   ========================================================= */

.related-projects {
  padding:
    clamp(55px, 6vw, 85px)
    var(--page-padding)
    clamp(80px, 9vw, 140px);

  background:
    var(--background);
}


.related-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    45px;
}


.related-heading h2 {
  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(38px, 4vw, 62px);

  font-weight:
    400;

  line-height:
    1.2;
}


.related-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    var(--project-column-gap);
}


.related-grid article a {
  color:
    inherit;

  text-decoration:
    none;
}


.related-image {
  aspect-ratio:
    1.59 / 1;

  overflow:
    hidden;
}


.related-image img {
  width: 100%;

  height: 100%;

  object-fit:
    cover;
}


.related-info {
  display:
    grid;

  grid-template-columns:
    0.8fr 1.5fr;

  gap:
    20px;

  padding-top:
    10px;
}


.related-info h3 {
  margin: 0;

  font-family:
    var(--serif);

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1.25;

  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


.related-info p {
  margin: 0;

  font-size:
    15px;

  line-height:
    1.35;
}



/* =========================================================
   CASE STUDY TABLET
   ========================================================= */

@media (max-width: 900px) {


  .case-study-summary {
    gap:
      30px;
  }


  .summary-column p {
    font-size:
      13px;
  }


  .related-info {
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   CASE STUDY MOBILE
   ========================================================= */

@media (max-width: 680px) {

.case-study-page {
  --case-study-padding: 20px;
}
   
  .case-study-header {
    padding-top:
      60px;
  }


  .case-study-header > h1 {
    font-size:
      clamp(44px, 13vw, 60px);
  }


  .case-study-credit {
    margin-bottom:
      32px;

    font-size:
      14px;
  }


  .case-study-summary {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .summary-column p {
    max-width:
      none;

    font-size:
      14px;
  }


  .media-grid-two {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  /*
    On mobile, don't force the user through a huge
    horizontal parallax scroll. It becomes a normal
    swipeable horizontal gallery instead.
  */

  .horizontal-showcase {
    margin-bottom:
      70px;
  }


  .horizontal-sticky {
    align-items:
      initial;
  }


  .horizontal-track {
    padding:
      0 20px 15px;

    gap:
      14px;
  }


  .horizontal-panel,
  .horizontal-panel-wide {
    width:
      84vw;
  }


  .horizontal-panel img {
    height:
      auto;
  }


  .project-links {
    flex-direction:
      column;

    gap:
      14px;
  }


  .outline-button {
    width:
      100%;
  }


  .related-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .related-heading .outline-button {
    width:
      auto;

    min-width:
      150px;
  }


  .related-grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }


  .related-info {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .related-info p {
    font-size:
      14px;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .horizontal-sticky {
    cursor: default;
  }

}


/* =========================================================
   VIMEO VIDEO
   ========================================================= */

.video-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #eee;
}


.video-frame-wide {
  aspect-ratio: 16 / 9;
}


.video-frame iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

.video-frame video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.video-frame-portrait {
  aspect-ratio: 9 / 10;
}



/* =========================================================
   LOOSE IMAGE GRID
   ========================================================= */

.loose-image-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(40px, 5.5vw, 90px);

  align-items:
    start;
}


.loose-column {
  display: flex;

  flex-direction:
    column;

  gap:
    clamp(40px, 5vw, 80px);
}


.loose-column figure {
  margin: 0;
}


.loose-column img {
  display: block;

  width: 100%;

  height: auto;
}



/* =========================================================
   LOOSE GRID — MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .loose-image-grid {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .loose-column {
    gap:
      20px;
  }



   @media (max-width: 680px) {

  .two-column-media {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-main {
  padding:
    clamp(110px, 8.5vw, 165px)
    0
    clamp(80px, 7vw, 120px);
}


.about-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.08fr);

  gap:
    clamp(55px, 4.7vw, 96px);

  align-items:
    start;

  width:
    min(78vw, 1600px);

  margin:
    0 auto;
}


.about-photo {
  margin:
    0;

  aspect-ratio:
    0.845 / 1;

  overflow:
    hidden;
}


.about-photo img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center center;
}


.about-content {
  min-width:
    0;
}


.about-content h1 {
  margin:
    -0.08em 0
    clamp(34px, 2.4vw, 48px);

  font-family:
    var(--serif);

  font-size:
    clamp(50px, 4vw, 76px);

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    0.005em;
}


.about-content p {
  max-width:
    860px;

  margin:
    0 0
    22px;

  font-size:
    clamp(16px, 1vw, 18px);

  line-height:
    1.55;
}


.about-content p:last-child {
  margin-bottom:
    0;
}


.about-difference {
  margin-top:
    clamp(42px, 3.2vw, 60px);
}


.about-difference h2 {
  margin:
    0 0
    24px;

  font-family:
    var(--sans);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


/* =========================================================
   ABOUT PAGE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .about-layout {
    width:
      calc(100% - (2 * var(--page-padding)));

    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    gap:
      clamp(38px, 5vw, 60px);
  }


  .about-content h1 {
    font-size:
      clamp(44px, 5vw, 58px);
  }


  .about-content p {
    font-size:
      16px;
  }

}


/* =========================================================
   ABOUT PAGE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .about-main {
    padding:
      70px
      var(--page-padding)
      40px;
  }


  .about-layout {
    grid-template-columns:
      1fr;

    gap:
      48px;

    width:
      100%;
  }


  .about-photo {
    aspect-ratio:
      4 / 5;
  }


  .about-content h1 {
    margin-top:
      0;

    margin-bottom:
      30px;

    font-size:
      clamp(42px, 12vw, 58px);

    line-height:
      1;
  }


  .about-content p {
    max-width:
      620px;

    font-size:
      15px;

    line-height:
      1.5;
  }


  .about-difference {
    margin-top:
      42px;
  }


  .about-difference h2 {
    margin-bottom:
      20px;

    font-size:
      12px;
  }

}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    100vh;

  min-height:
    100svh;
}


.contact-main {
  display:
    grid;

  place-items:
    center;

  flex:
    1;

  padding:
    clamp(90px, 8vw, 150px)
    var(--page-padding);
}


.contact-content {
  width:
    100%;

  text-align:
    center;
}


.contact-label {
  margin:
    0 0
    clamp(28px, 3vw, 48px);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.contact-email {
  display:
    inline-block;

  max-width:
    100%;

  font-family:
    var(--serif);

  font-size:
    clamp(36px, 4.4vw, 82px);

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    0.005em;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    8px;

  overflow-wrap:
    anywhere;
}


.contact-page .site-footer {
  padding-top:
    0;
}


/* =========================================================
   CONTACT PAGE — MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .contact-main {
    padding-top:
      70px;

    padding-bottom:
      90px;
  }


  .contact-label {
    margin-bottom:
      24px;

    font-size:
      12px;
  }


  .contact-email {
    font-size:
      clamp(27px, 9vw, 42px);

    text-underline-offset:
      5px;
  }


  .contact-page .site-footer {
    gap:
      32px;
  }

}


/* =========================================================
   VIMEO PLACEHOLDERS
   ========================================================= */

.video-placeholder {
  display:
    grid;

  place-items:
    center;

  background:
    rgba(7, 63, 73, 0.08);

  border:
    1px solid rgba(7, 63, 73, 0.22);
}


.video-placeholder span {
  padding:
    20px;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-align:
    center;

  text-transform:
    uppercase;
}