/* Shared visual system for the three project case pages. */
@font-face {
  font-family: "CoFo Sans Trial";
  src: url("assets/fonts/CoFoSans-Light-Trial.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --case-bg: #f5f2f2;
  --case-ink: #424242;
  --case-font: "CoFo Sans Trial", "CoFo Sans", Arial, Helvetica, sans-serif;
  --case-font-size: 20px;
  --case-line-height: 26px;
  --case-page-x: 36px;
  --case-grid-gap: 20px;
  --case-block-gap: 80px;
  --bg: var(--case-bg);
  --blue: var(--case-ink);
  --blue-hover: var(--case-ink);
  --link-hover: var(--case-ink);
  --page-x: var(--case-page-x);
  --grid-gap: var(--case-grid-gap);
  --block-gap: var(--case-block-gap);
  --text-to-media-gap: 32px;
  --font-primary-family: var(--case-font);
  --font-primary-weight: 300;
  --font-primary-size: var(--case-font-size);
  --font-primary-line-height: var(--case-line-height);
  --font-primary-letter-spacing: -0.03em;
  --font-caption-family: var(--case-font);
  --font-caption-size: 14px;
  --font-caption-weight: 400;
  --font-caption-line-height: 18px;
  --font-caption-letter-spacing: 0;
}

html,
body,
.page {
  background: var(--case-bg);
  color: var(--case-ink);
}

body,
.page {
  font-family: var(--case-font);
  font-size: var(--case-font-size);
  font-weight: 300;
  line-height: var(--case-line-height);
  letter-spacing: -0.03em;
  font-synthesis: none;
}

.case-hero__grid,
.case-text-section__grid,
.case-image-section__grid,
.case-section-heading__grid,
.case-split-section__grid,
.jtbd-section__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--case-grid-gap);
}

.case-hero,
.case-text-section,
.case-image-section,
.case-section-heading,
.case-split-section,
.jtbd-section {
  padding-inline: var(--case-page-x);
}

.case-hero__description,
.case-text-section__text,
.case-text-section__list,
.case-section-heading__caption,
.case-section-heading__list,
.case-section-heading__link,
.case-split-section__caption,
.case-split-section__list {
  color: var(--case-ink);
  font-family: var(--case-font);
  font-size: var(--case-font-size);
  font-weight: 300;
  line-height: var(--case-line-height);
  letter-spacing: -0.03em;
}

.case-text-section__content,
.case-section-heading__content {
  grid-column: 3 / span 6;
}

.case-section-heading__title,
.case-text-section__title,
.case-split-section__title,
.jtbd-section__title {
  color: var(--case-ink);
  font-family: "CoFo Sans", Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.03em;
}

.case-page-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: var(--case-page-x);
  right: var(--case-page-x);
  color: var(--case-ink);
  font-family: var(--case-font);
  font-size: var(--case-font-size);
  font-weight: 300;
  line-height: var(--case-line-height);
  letter-spacing: -0.03em;
}

.case-page-header.portfolio-header {
  right: auto;
}

.portfolio-header__nav,
.topbar__actions {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.portfolio-header__actions {
  top: 18px;
  right: var(--case-page-x);
  gap: 45px;
  font: inherit;
}

.case-nav,
.case-nav__home,
.case-nav__list,
.case-nav__link,
.case-nav__current,
.case-section-nav,
.case-section-nav__list,
.case-section-nav__link {
  color: var(--case-ink);
  font-family: var(--case-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

.case-nav,
.case-section-nav {
  left: var(--case-page-x);
  width: calc(((100vw - var(--case-page-x) * 2 - var(--case-grid-gap) * 11) / 12) * 2 + var(--case-grid-gap));
}

.case-nav {
  bottom: 20px;
}

.case-section-nav {
  top: 124px;
}

/* Temporarily hide section navigation while retaining its markup and behavior. */
.case-section-nav {
  display: none !important;
}

/* Keep the lower navigation above page content and reserve room for it. */
.case-nav {
  z-index: 30;
  background-color: var(--case-bg);
}

.case-section-nav {
  z-index: 20;
  max-height: calc(100vh - var(--case-section-nav-top, 124px) - var(--case-section-nav-clearance, 36px));
  max-height: max(0px, calc(100dvh - var(--case-section-nav-top, 124px) - var(--case-section-nav-clearance, 36px)));
  min-height: 0;
}

.case-section-nav__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.case-section-nav__list::-webkit-scrollbar {
  display: none;
}

.case-section-nav__link {
  opacity: 0.4;
}

.case-section-nav__link.is-active,
.case-section-nav__link:hover,
.case-section-nav__link:focus-visible {
  color: var(--case-ink);
  opacity: 1;
}

.case-section-nav:not(.is-visible) {
  pointer-events: none;
}

.case-section-heading {
  padding-bottom: var(--case-block-gap);
}

.case-section-heading--before-media,
.case-text-section--before-media {
  padding-bottom: var(--case-line-height);
}

.case-page-footer {
  min-height: 50svh;
  padding: 52px var(--case-page-x);
  background: var(--case-bg);
  color: var(--case-ink);
  font-family: var(--case-font);
  font-size: 17.6px;
  line-height: 22.4px;
  letter-spacing: -0.03em;
}

.case-page-footer {
  position: relative;
}

.contacts__value,
.contacts__intro,
.contacts__year,
.contacts__tagline {
  color: var(--case-ink);
  font-family: var(--case-font);
  letter-spacing: -0.03em;
}

@media (max-width: 1000px) {
  .case-hero__grid,
  .case-text-section__grid,
  .case-image-section__grid,
  .case-section-heading__grid,
  .case-split-section__grid,
  .jtbd-section__grid {
    grid-template-columns: 1fr;
  }

  .case-text-section__content,
  .case-section-heading__content,
  .case-image-section__content,
  .case-split-section__text,
  .case-split-section__media,
  .jtbd-section__content {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --case-page-x: 20px;
    --case-grid-gap: 12px;
    --page-x: var(--case-page-x);
    --grid-gap: var(--case-grid-gap);
    --block-gap: var(--case-block-gap);
  }

  .portfolio-header__actions {
    right: var(--case-page-x);
  }

  .case-page-footer {
    padding-inline: var(--case-page-x);
  }

}

@media (max-width: 799px) {
  .case-page-footer {
    font-size: 14.4px;
    line-height: 18.4px;
  }
}

/* Reduce the centered eight-column content only above the large desktop breakpoint. */
@media (min-width: 1561px) {
  :root {
    --case-content-max: calc((min(var(--case-wide-content-max, 1444px), calc(100vw - var(--case-page-x) * 2)) + var(--case-grid-gap)) * 3 / 4 - var(--case-grid-gap));
  }

  .case-meta {
    max-width: calc(var(--case-content-max) + var(--case-page-x) * 2);
    margin-inline: auto;
  }
}

/* Shared desktop text scale for case content and both case navigation menus. */
@media (min-width: 901px) {
  .case-hero__description,
  .case-text-section__text,
  .case-text-section__list,
  .case-section-heading__list,
  .case-split-section__list,
  .case-nav,
  .case-nav__home,
  .case-nav__list,
  .case-nav__link,
  .case-nav__current,
  .case-section-nav,
  .case-section-nav__list,
  .case-section-nav__link {
    font-family: var(--case-font);
    font-size: 18px;
    line-height: 24px;
  }
}