/* =========================================================
   RICOCHET CASE STUDY
   ========================================================= */

:root {
  --ric-black: #000000;
  --ric-white: #ffffff;
  --ric-grey: #7d7d7d;
  --ric-red: #700505;

  --ric-ivory: #f4f1e8;
  --ric-ink: #171512;
}



.ricochet-case {
  background: var(--ric-ivory);
  color: var(--ric-ink);
}



.ricochet-case .site-header.scrolled {
  background:
          color-mix(
                  in srgb,
                  var(--ric-ivory) 88%,
                  transparent
          );
}



/* =========================================================
   HERO
   ========================================================= */

.case-hero {
  min-height: 96svh;

  padding-top:
          clamp(130px, 17vh, 200px);

  padding-bottom:
          clamp(55px, 8vw, 110px);

  display: flex;
  flex-direction: column;
}



.case-breadcrumb,
.case-section-label {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-top: 14px;

  border-top:
          1px solid rgba(23, 21, 18, .2);

  color: var(--ric-grey);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .1em;
}



.case-title {
  margin: auto 0;

  padding: 7vh 0;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(64px, 10.5vw, 168px);

  line-height: .78;

  font-weight: 400;

  letter-spacing: -.085em;
}



.case-intro-grid {
  display: grid;

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

  gap: 20px;

  align-items: start;
}



.case-lead {
  grid-column:
          1 / 6;

  margin: 0;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(29px, 3.25vw, 52px);

  line-height: 1.03;

  letter-spacing: -.045em;
}



.case-summary {
  grid-column:
          8 / 12;
}



.case-summary p {
  margin:
          0 0 16px;

  font-size:
          clamp(15px, 1.05vw, 18px);

  line-height: 1.55;
}



.case-meta {
  display: grid;

  grid-template-columns:
        3fr 5fr 3fr;

  gap: 25px;

  margin-top:
          clamp(70px, 9vw, 125px);

  padding-top: 15px;

  border-top:
          1px solid rgba(23, 21, 18, .2);
}



.meta-label {
  display: block;

  margin-bottom: 9px;

  color: var(--ric-grey);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .1em;
}



.case-meta p,
.case-mini-note p {
  margin: 0;

  font-size: 13px;

  line-height: 1.45;
}



/* =========================================================
   HERO IMAGE
   ========================================================= */

.case-hero-image {
  width: 100%;

  overflow: hidden;

  background: #111;
}



.case-hero-image img {
  display: block;

  width: 100%;

  height:
          min(82svh, 1000px);

  object-fit: cover;

  object-position: center;
}



/* =========================================================
   SECTION STRUCTURE
   ========================================================= */

.case-text-section,
.case-section {
  padding-top:
          clamp(110px, 15vw, 220px);

  padding-bottom:
          clamp(32px, 3.5vw, 56px);
}



.case-section-label {
  margin-bottom:
          clamp(55px, 8vw, 115px);
}



.case-statement {
  margin-left: 25%;

  max-width: 1100px;
}



.case-statement p {
  margin: 0;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(37px, 5.3vw, 80px);

  line-height: .98;

  letter-spacing: -.057em;
}



/* =========================================================
   CONTRAST
   ========================================================= */

.case-tension-grid {
  display: grid;

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

  gap: 18px;

  margin-top:
          clamp(80px, 12vw, 170px);
}



.case-tension-grid > div {
  min-height: 170px;

  padding:
          18px 0;

  border-top:
          1px solid var(--ric-ink);

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}



.case-tension-grid span {
  font-size:
          clamp(20px, 2vw, 32px);

  letter-spacing: -.03em;
}



.case-tension-grid span:nth-child(2) {
  color: var(--ric-red);
}



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

.case-two-col {
  display: grid;

  grid-template-columns:
        7fr 4fr 1fr;

  gap: 24px;

  margin-bottom:
          clamp(65px, 9vw, 130px);
}



.case-copy h2,
.communication-intro h2 {
  margin:
          0 0 24px;

  max-width: 850px;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(39px, 5.4vw, 82px);

  line-height: .96;

  letter-spacing: -.06em;

  font-weight: 400;
}



.case-copy p,
.communication-intro > p {
  max-width: 650px;

  margin: 0;

  font-size:
          clamp(16px, 1.15vw, 19px);

  line-height: 1.55;
}



.case-mini-note {
  grid-column:
          2 / 3;

  align-self: end;
}



/* =========================================================
   LOGO SYSTEM
   ========================================================= */

.logo-system {
  display: grid;

  grid-template-columns:
        2fr 2fr 1fr;

  gap: var(--gutter);
}



.logo-panel {
  min-height: 380px;

  padding: 22px;

  display: flex;

  flex-direction: column;
}



.logo-panel-light {
  background:
          var(--ric-white);

  color:
          var(--ric-black);

  border:
          1px solid rgba(0, 0, 0, .08);
}



.logo-panel-dark {
  background:
          var(--ric-black);

  color:
          var(--ric-white);
}



.monogram-panel {
  background:
          var(--ric-red);

  color:
          var(--ric-white);
}



.logo-panel img {
  display: block;

  width: 78%;

  max-width: 480px;

  height: auto;

  max-height: 220px;

  margin: auto;

  object-fit: contain;
}



.monogram-panel img {
  width: 68%;

  max-width: 220px;
}



/* =========================================================
   TYPE + PALETTE
   ========================================================= */

.identity-specimen {
  display: grid;

  grid-template-columns:
        7fr 5fr;

  gap: var(--gutter);

  margin-top:
          var(--gutter);

  padding:
          clamp(35px, 5vw, 75px);

  background:
          var(--ric-black);

  color:
          var(--ric-white);
}



.type-display {
  margin:
          25px 0 10px;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(100px, 15vw, 230px);

  line-height: .75;

  letter-spacing: -.08em;
}



.type-sample {
  margin:
          35px 0 0;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(25px, 3vw, 48px);

  line-height: 1;

  letter-spacing: -.04em;
}



.palette-ricochet {
  display: grid;

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

  gap: 22px;

  margin-top: 30px;
}



.palette-ricochet > div {
  display: grid;

  gap: 8px;
}



.colour-swatch {
  display: block;

  aspect-ratio:
          1.6;

  border:
          1px solid rgba(255, 255, 255, .16);
}



.colour-white {
  border:
          1px solid rgba(255, 255, 255, .5);
}



.palette-ricochet small {
  color:
          #aaa6a0;

  font-size: 10px;

  letter-spacing: .08em;
}



.specimen-note {
  max-width: 390px;

  margin-top: 30px;

  color:
          #aaa6a0;

  font-size: 11px;

  line-height: 1.5;
}



/* =========================================================
   PHOTOGRAPHY
   ========================================================= */

.photo-grid {
  display: grid;

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

  gap:
          var(--gutter);

  align-items: start;
}



.photo-item {
  margin: 0;
}



.photo-item img {
  display: block;

  width: 100%;

  aspect-ratio:
          3 / 4;

  object-fit: cover;

  object-position: center;
}



.photo-item figcaption,
.web-shot figcaption,
.business-card figcaption {
  margin-top: 10px;

  color:
          var(--ric-grey);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .08em;
}



/* =========================================================
   BROWSER
   ========================================================= */

.case-browser {
  margin: 0;

  overflow: hidden;

  border:
          1px solid rgba(23, 21, 18, .16);

  background:
          #ece7dc;
}



.browser-bar {
  height: 47px;

  padding:
          0 16px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-bottom:
          1px solid rgba(23, 21, 18, .12);
}



.browser-bar > span {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
          var(--ric-grey);

  opacity: .45;
}



.browser-bar p {
  margin:
          0 auto;

  transform:
          translateX(-18px);

  color:
          var(--ric-grey);

  font-size: 10px;
}



.case-browser img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  object-position:
          top center;
}



/* =========================================================
   WEB SCREENSHOTS
   ========================================================= */

.web-grid {
  display: grid;

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

  gap:
          var(--gutter);

  align-items: start;

  margin-top:
          var(--gutter);
}



.web-shot {
  margin: 0;
}



.web-shot img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  background:
          #ece7dc;
}



/* =========================================================
   RESPONSIVE WEBSITE
   ========================================================= */

.device-grid {
  display: grid;

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

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

  align-items: center;

  margin-top:
          clamp(40px, 7vw, 100px);
}



.phone-frame {
  padding: 8px;

  background:
          var(--ric-black);

  border-radius: 30px;
}



.phone-inner {
  overflow: hidden;

  border-radius: 23px;

  background:
          #e8e3d9;
}



.phone-inner img {
  display: block;

  width: 100%;

  height: auto;
}



.case-live-link {
  display: flex;

  justify-content: flex-end;

  margin-top: 34px;
}



.case-live-link a {
  padding-bottom: 4px;

  border-bottom:
          1px solid currentColor;

  font-size: 13px;
}



/* =========================================================
   BROCHURE
   ========================================================= */

.brochure-block {
  width: 100%;
}



.brochure-head {
  display: grid;

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

  gap: 30px;

  align-items: end;

  margin-bottom: 24px;
}



.brochure-head p {
  max-width: 620px;

  margin: 0;

  color:
          var(--ric-grey);

  font-size: 14px;

  line-height: 1.5;
}



.brochure-counter {
  display: flex;

  gap: 7px;

  align-items: baseline;

  font-size: 12px;

  font-variant-numeric:
          tabular-nums;
}



.brochure-counter
[data-brochure-current] {
  color:
          var(--ric-red);

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size: 28px;
}



.brochure-viewer {
  display: grid;

  grid-template-columns:
        54px
        minmax(0, 760px)
        54px;

  justify-content: center;

  align-items: center;

  gap: 20px;
}



.brochure-stage {
  position: relative;

  width: 100%;

  aspect-ratio:
          1 / 1.4142;

  overflow: hidden;

  background:
          #e7e2d8;

  box-shadow:
          0 20px 55px
          rgba(0, 0, 0, .08);
}



.brochure-track {
  position: absolute;

  inset: 0;
}



.brochure-page {
  position: absolute;

  inset: 0;

  margin: 0;

  opacity: 0;

  transform:
          translateX(2.5%);

  pointer-events: none;

  transition:
          opacity .3s ease,
          transform .5s
          cubic-bezier(.22, 1, .36, 1);
}



.brochure-page.is-active {
  opacity: 1;

  transform:
          translateX(0);

  pointer-events: auto;

  z-index: 2;
}



.brochure-page img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  background:
          #f2efe8;
}



.brochure-arrow {
  width: 54px;

  height: 54px;

  border:
          1px solid rgba(23, 21, 18, .22);

  border-radius: 50%;

  background:
          transparent;

  color:
          var(--ric-ink);

  display: grid;

  place-items: center;

  cursor: pointer;

  font-size: 20px;

  transition:
          background .2s ease,
          color .2s ease;
}



.brochure-arrow:hover {
  background:
          var(--ric-red);

  color:
          var(--ric-white);

  border-color:
          var(--ric-red);
}



.brochure-controls {
  width:
          min(100%, 760px);

  margin:
          18px auto 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;
}



.brochure-dots {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}



.brochure-dots button {
  width: 22px;

  height: 3px;

  padding: 0;

  border: 0;

  background:
          rgba(23, 21, 18, .18);

  cursor: pointer;
}



.brochure-dots button.is-active {
  width: 42px;

  background:
          var(--ric-red);
}



.brochure-hint {
  color:
          var(--ric-grey);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .08em;
}



/* =========================================================
   BUSINESS CARD
   ========================================================= */

.business-card {
  width:
          min(680px, 68%);

  margin:
          clamp(80px, 11vw, 160px)
          0 0 auto;
}



.business-card img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;
}



/* =========================================================
   /* =========================================================
   SOCIAL
   ========================================================= */

.social-grid {
  display: grid;

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

  gap: 10px;

  align-items: stretch;
}


.social-grid img {
  display: block;

  width: 100%;

  height: 100%;

  aspect-ratio: 1 / 1;

  object-fit: contain;
  object-position: center;

  background: var(--ric-white);

  overflow: hidden;
}


/* =========================================================
   COMMUNICATION
   ========================================================= */

.communication-intro {
  display: grid;

  grid-template-columns:
        7fr 4fr 1fr;

  gap: 24px;

  margin-bottom:
          clamp(70px, 10vw, 140px);
}



.communication-intro > p {
  grid-column:
          2;

  align-self:
          end;
}



.communication-grid {
  display: grid;

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

  gap:
          var(--gutter);
}



.communication-card {
  min-height: 430px;

  padding:
          clamp(24px, 3vw, 45px);

  background:
          #e8e3da;

  display: flex;

  flex-direction: column;
}



.communication-card:nth-child(2) {
  background:
          var(--ric-red);

  color:
          var(--ric-white);
}



.communication-card h3 {
  margin:
          25px 0;

  max-width: 530px;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(30px, 4vw, 58px);

  line-height: 1;

  letter-spacing: -.05em;

  font-weight: 400;
}



.communication-card ul {
  list-style: none;

  padding: 0;

  margin:
          auto 0 0;
}



.communication-card li {
  padding:
          10px 0;

  border-bottom:
          1px solid currentColor;

  font-size: 13px;

  opacity: .78;
}



.communication-media {
  display: grid;

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

  gap:
          var(--gutter);

  margin-top:
          clamp(60px, 9vw, 130px);
}



.communication-media figure {
  margin: 0;
}



.communication-media img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;
}



/* =========================================================
   FINAL SYSTEM
   ========================================================= */

.case-system {
  padding-top:
          clamp(100px, 14vw, 210px);

  padding-bottom:
          clamp(100px, 14vw, 210px);

  background:
          var(--ric-black);

  color:
          var(--ric-white);
}



.case-system .case-section-label {
  border-color:
          rgba(255, 255, 255, .22);

  color:
          #9d9992;
}



.system-statement {
  max-width: 1260px;

  margin: 0;

  font-family:
          Georgia,
          "Times New Roman",
          serif;

  font-size:
          clamp(43px, 6.7vw, 105px);

  line-height: .91;

  letter-spacing: -.065em;
}



.system-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top:
          clamp(70px, 9vw, 120px);
}



.system-tags span {
  padding:
          11px 17px;

  border:
          1px solid
          rgba(255, 255, 255, .25);

  border-radius:
          999px;

  font-size: 12px;
}



/* =========================================================
   NEXT
   ========================================================= */

.case-next {
  min-height: 55svh;

  padding-top:
          clamp(90px, 12vw, 180px);

  padding-bottom: 40px;

  display: grid;

  grid-template-columns:
        1fr 1fr;

  align-items: end;

  gap: 40px;
}



.back-work,
.next-live {
  display: flex;

  gap: 20px;

  align-items: center;
}



.back-work > span {
  font-size: 32px;
}



.back-work strong,
.next-live strong {
  display: block;

  font-size:
          clamp(25px, 3vw, 45px);

  letter-spacing: -.04em;

  font-weight: 500;
}



.next-live {
  justify-self: end;

  text-align: right;
}



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

@media (max-width: 900px) {

  .case-title {
    font-size:
            clamp(72px, 17vw, 145px);
  }


  .case-intro-grid {
    grid-template-columns:
            1fr;

    gap: 35px;
  }


  .case-lead,
  .case-summary {
    grid-column:
            auto;
  }


  .case-summary {
    max-width:
            620px;
  }


  .case-meta {
    grid-template-columns:
            1fr;
  }


  .case-statement {
    margin-left: 0;
  }


  .case-two-col,
  .communication-intro {
    grid-template-columns:
            1fr;
  }


  .case-mini-note,
  .communication-intro > p {
    grid-column:
            auto;

    max-width:
            620px;
  }


  .logo-system {
    grid-template-columns:
            1fr 1fr;
  }


  .monogram-panel {
    grid-column:
            1 / -1;
  }


  .identity-specimen {
    grid-template-columns:
            1fr;
  }


  .photo-grid {
    grid-template-columns:
            repeat(2, minmax(0, 1fr));
  }


  .device-grid {
    grid-template-columns:
            minmax(0, 2fr)
            minmax(180px, 1fr);
  }


  .social-grid {
    grid-template-columns:
            repeat(2, minmax(0, 1fr));
  }


  .communication-grid {
    grid-template-columns:
            1fr;
  }


  .brochure-viewer {
    grid-template-columns:
            44px
            minmax(0, 700px)
            44px;

    gap: 10px;
  }


  .brochure-arrow {
    width: 44px;

    height: 44px;
  }


  .business-card {
    width:
            min(650px, 88%);
  }

}



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

@media (max-width: 600px) {

  .case-hero {
    min-height: auto;

    padding-top: 120px;
  }


  .case-title {
    padding:
            55px 0;

    font-size:
            18vw;

    line-height:
            .82;
  }


  .case-meta {
    margin-top:
            65px;
  }


  .case-hero-image img {
    height:
            68svh;
  }


  .case-text-section,
  .case-section {
    padding-top:
            clamp(80px, 10vw, 150px);

    padding-bottom:
            clamp(24px, 6vw, 40px);
  }


  .case-tension-grid {
    grid-template-columns:
            1fr;
  }


  .logo-system {
    grid-template-columns:
            1fr;
  }


  .monogram-panel {
    grid-column:
            auto;
  }


  .identity-specimen {
    padding:
            28px 20px;
  }


  .photo-grid {
    grid-template-columns:
            1fr;
  }


  .web-grid {
    grid-template-columns:
            1fr;
  }


  .device-grid {
    grid-template-columns:
            1fr;
  }


  .phone-frame {
    width:
            min(260px, 75%);

    margin:
            20px auto 0;
  }


  .brochure-head {
    grid-template-columns:
            1fr auto;

    gap: 16px;
  }


  .brochure-viewer {
    grid-template-columns:
            1fr;

    position: relative;
  }


  .brochure-arrow {
    position: absolute;

    z-index: 5;

    top: 50%;

    transform:
            translateY(-50%);

    width: 42px;

    height: 42px;

    background:
            rgba(244, 241, 232, .9);

    backdrop-filter:
            blur(8px);
  }


  .brochure-prev {
    left: 10px;
  }


  .brochure-next {
    right: 10px;
  }


  .brochure-controls {
    width: 100%;

    align-items:
            flex-start;
  }


  .brochure-hint {
    display: none;
  }


  .brochure-dots {
    gap: 5px;
  }


  .brochure-dots button {
    width: 12px;
  }


  .brochure-dots button.is-active {
    width: 28px;
  }


  .business-card {
    width: 100%;

    margin-top: 80px;
  }


  .social-grid {
    grid-template-columns:
            repeat(2, minmax(0, 1fr));
  }


  .communication-media {
    grid-template-columns:
            1fr;
  }


  .case-next {
    grid-template-columns:
            1fr;

    align-content:
            center;
  }


  .next-live {
    justify-self:
            start;

    text-align:
            left;
  }

}



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

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

  .brochure-page {
    transition: none;
  }

}