/*
  Desktop Special Projects page layout.
  Shared chrome, page title, fade, and font-face declarations live in site_global.css.
*/

:root {
  --special-content-max: 1250px;
  --special-block-max: 1240px;
  --special-side-gap: 61px;
  --special-block-gap: 86px;
  --special-column-gap: 40px;
  --special-graphic-column-width: 230px;
  --special-fixed-graphics-top: 120px;
  --special-graphic-line-color: #c9a875;
  --special-graphic-line-gap: 42px;
  --special-image-column-max: 970px;
  --special-image-cell-max-height: 700px;
  --special-image-cell-gap: 80px;
  --special-outline-color: #424242;
}

html,
body {
  min-width: var(--page-min);
}

body {
  overflow-x: auto;
}

.special-content {
  width: min(var(--special-content-max), calc(max(100vw, var(--page-min)) - (var(--special-side-gap) * 2)));
  margin: 0 auto;
  padding-bottom: 160px;
}

.special-hero {
  padding-top: 145px;
}

.special-projects {
  width: min(100%, var(--special-block-max));
  margin: var(--special-block-gap) auto 0;
}

.special-projects__block {
  display: flex;
  align-items: flex-start;
  gap: var(--special-column-gap);
  width: 100%;
}

.special-projects__block + .special-projects__block {
  margin-top: var(--special-block-gap);
}

.special-projects__block:nth-child(even) {
  flex-direction: row-reverse;
}

.special-projects__graphic-column {
  position: relative;
  flex: 0 0 var(--special-graphic-column-width);
  width: var(--special-graphic-column-width);
  align-self: stretch;
}

.special-projects_fixed-graphics {
  position: sticky;
  top: var(--special-fixed-graphics-top);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.special-projects__graphic-line {
  width: 100%;
  height: 1px;
  margin: 0 0 var(--special-graphic-line-gap);
  background: var(--special-graphic-line-color);
}

.special-projects__year-graphic {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
}

.special-projects__block:nth-child(odd) .special-projects__year-graphic {
  align-self: flex-end;
}

.special-projects__block:nth-child(even) .special-projects__year-graphic {
  align-self: flex-start;
}

.special-projects__image-column {
  display: flex;
  flex: 1 1 var(--special-image-column-max);
  flex-direction: column;
  max-width: var(--special-image-column-max);
  min-width: 0;
}

.special-projects__image-cell {
  display: flex;
  width: 100%;
  max-width: var(--special-image-column-max);
  max-height: var(--special-image-cell-max-height);
  margin: 0;
}

.special-projects__image-cell + .special-projects__image-cell {
  margin-top: var(--special-image-cell-gap);
}

.special-projects__block:nth-child(odd) .special-projects__image-cell {
  justify-content: flex-start;
}

.special-projects__block:nth-child(even) .special-projects__image-cell {
  justify-content: flex-end;
}

.special-projects__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--special-image-cell-max-height);
  object-fit: contain;
}

.special-projects__image-cell[option="1"] .special-projects__image {
  outline: 1px solid var(--special-outline-color);
  outline-offset: -1px;
}