/* =========================================================
   REDOVAR ABOUT
   Developed by Cavendish Pierre-Louis
   https://cavendishpierrelouis.io
========================================================= */


:root {
  --blue: #0B369A;
  --blue-hover: #092F86;

  --terra: #C34811;
  --terra-hover: #A93D0D;

  --black: #111111;
  --text: #171717;

  --muted: #6B6B68;
  --soft: #8B8B86;

  --border: #E7E7E3;
  --border-strong: #D9D9D4;

  --surface: #F7F7F5;
  --surface-alt: #F2F2EF;

  --white: #FFFFFF;

  --header-h: 76px;

  --ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );
}


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


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;

  overflow-x: clip;

  background:
    var(--white);

  color:
    var(--text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


img {
  display: block;
}


::selection {
  background:
    rgba(
      11,
      54,
      154,
      .14
    );
}


/* =========================================================
   MAIN
========================================================= */


.about-main {
  width: 100%;

  margin: 0;

  padding:
    var(--header-h)
    0
    0;

  overflow: clip;

  background:
    var(--white);
}


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


.about-intro {
  width: 100%;

  min-height:
    clamp(
      560px,
      46vw,
      740px
    );

  margin: 0;

  display: grid;

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

  background:
    var(--surface-alt);
}


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


.about-intro-copy {
  min-width: 0;

  display: flex;

  align-items: center;

  padding:
    clamp(
      52px,
      5vw,
      82px
    );

  background:
    var(--surface-alt);
}


.about-intro h1 {
  width: 100%;

  max-width: 690px;

  margin: 0;

  color:
    var(--black);

  font-size:
    clamp(
      36px,
      3.1vw,
      46px
    );

  line-height: 1.1;

  letter-spacing: -.038em;

  font-weight: 450;

  text-wrap: balance;
}


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


.about-intro-media {
  position: relative;

  min-width: 0;
  min-height: 100%;

  overflow: hidden;

  background:
    #D9D9D4;
}


.about-intro-media img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center
    center;
}


/* =========================================================
   ABOUT REDOVAR
========================================================= */


.about-redovar {
  width: 100%;

  min-height:
    clamp(
      620px,
      46vw,
      760px
    );

  margin: 0;

  display: grid;

  grid-template-columns:
    minmax(230px, 22%)
    minmax(0, 56%)
    minmax(210px, 22%);

  background:
    var(--white);
}


/* =========================================================
   TITLE PANEL
========================================================= */


.about-redovar-title-panel {
  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    var(--terra);

  color:
    var(--white);
}


.about-redovar-title-panel h2 {
  margin: 0;

  color:
    var(--white);

  font-size:
    clamp(
      46px,
      5.2vw,
      78px
    );

  line-height: .96;

  letter-spacing: -.05em;

  font-weight: 500;

  white-space: nowrap;

  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);
}


/* =========================================================
   ABOUT COPY
========================================================= */


.about-redovar-copy {
  min-width: 0;

  display: flex;

  align-items: center;

  background:
    var(--white);
}


.about-redovar-copy-inner {
  width: min(
    100%,
    610px
  );

  margin-inline: auto;

  padding:
    clamp(
      72px,
      6.5vw,
      108px
    )
    clamp(
      42px,
      4.5vw,
      64px
    );
}


/* =========================================================
   BOOK-STYLE READING COLUMN
========================================================= */


.about-redovar-copy p {
  width: 100%;

  max-width: 52ch;

  margin:
    0
    0
    1.6em;

  color:
    #292927;

  font-size:
    clamp(
      16.5px,
      1.08vw,
      18px
    );

  line-height: 1.76;

  letter-spacing: -.006em;

  font-weight: 400;

  text-align: left;

  text-wrap: pretty;

  hyphens: none;

  font-kerning: normal;

  hanging-punctuation:
    first
    last;
}


.about-redovar-copy p:first-child {
  margin-top: 0;

  color:
    #292927;

  font-size:
    clamp(
      16.5px,
      1.08vw,
      18px
    );

  line-height: 1.76;

  letter-spacing: -.006em;

  font-weight: 400;
}


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


/* =========================================================
   BLUE PANEL
========================================================= */


.about-redovar-color-panel {
  min-width: 0;

  background:
    var(--blue);
}


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


@media (max-width: 1100px) {


  .about-intro {
    min-height: 560px;
  }


  .about-intro-copy {
    padding:
      clamp(
        44px,
        5vw,
        64px
      );
  }


  .about-intro h1 {
    max-width: 580px;

    font-size:
      clamp(
        34px,
        4vw,
        42px
      );

    line-height: 1.1;
  }


  .about-redovar {
    grid-template-columns:
      minmax(190px, 21%)
      minmax(0, 58%)
      minmax(150px, 21%);
  }


  .about-redovar-copy-inner {
    width:
      min(
        100%,
        580px
      );

    padding:
      72px
      clamp(
        36px,
        4vw,
        54px
      );
  }


  .about-redovar-copy p,
  .about-redovar-copy p:first-child {
    max-width: 51ch;

    font-size: 17px;

    line-height: 1.74;
  }


  .about-redovar-title-panel h2 {
    font-size:
      clamp(
        42px,
        5.4vw,
        62px
      );
  }


}


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


@media (max-width: 820px) {


  .about-main {
    padding-top:
      var(--header-h);
  }


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


  .about-intro {
    min-height: 0;

    grid-template-columns:
      1fr;
  }


  .about-intro-copy {
    min-height: 390px;

    padding:
      58px
      var(--gutter, 28px);
  }


  .about-intro h1 {
    max-width: 640px;

    font-size:
      clamp(
        34px,
        6.8vw,
        48px
      );

    line-height: 1.08;

    letter-spacing: -.038em;
  }


  .about-intro-media {
    min-height:
      min(
        78vw,
        620px
      );
  }


  .about-intro-media img {
    position: absolute;
  }


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


  .about-redovar {
    min-height: 0;

    grid-template-columns:
      1fr;
  }


  .about-redovar-title-panel {
    min-height: 210px;

    justify-content: flex-start;

    padding:
      48px
      var(--gutter, 28px);
  }


  .about-redovar-title-panel h2 {
    font-size:
      clamp(
        48px,
        9vw,
        68px
      );

    line-height: 1;

    white-space: normal;

    writing-mode:
      horizontal-tb;

    transform:
      none;
  }


  .about-redovar-copy-inner {
    width:
      min(
        100%,
        620px
      );

    margin-inline: auto;

    padding:
      72px
      var(--gutter, 28px)
      82px;
  }


  .about-redovar-copy p,
  .about-redovar-copy p:first-child {
    width: 100%;

    max-width: 52ch;

    margin-left: 0;
    margin-right: 0;

    font-size: 17px;

    line-height: 1.74;
  }


  .about-redovar-color-panel {
    min-height: 110px;
  }


}


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


@media (max-width: 560px) {


  .about-intro-copy {
    min-height: 340px;

    padding:
      46px
      24px;
  }


  .about-intro h1 {
    max-width: 100%;

    font-size:
      clamp(
        32px,
        9vw,
        40px
      );

    line-height: 1.08;

    letter-spacing: -.036em;
  }


  .about-intro-media {
    min-height:
      104vw;
  }


  .about-redovar-title-panel {
    min-height: 170px;

    padding:
      38px
      24px;
  }


  .about-redovar-title-panel h2 {
    font-size:
      clamp(
        42px,
        11vw,
        56px
      );
  }


  .about-redovar-copy-inner {
    width: 100%;

    max-width: none;

    padding:
      58px
      24px
      66px;
  }


  .about-redovar-copy p,
  .about-redovar-copy p:first-child {
    width: 100%;

    max-width: 100%;

    margin:
      0
      0
      1.55em;

    font-size: 16.5px;

    line-height: 1.72;

    letter-spacing: -.004em;
  }


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


  .about-redovar-color-panel {
    min-height: 84px;
  }


}


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


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


  html {
    scroll-behavior: auto;
  }


}