/*
  Globals
*/

/*
  Globals
  Color
*/

:root {
  --color-spot: rgb(181, 221, 211);
  --color-spot-optical: rgb(166, 215, 203);
  --color-white: rgb(252, 252, 252);
  --color-black: rgb(10, 10, 10);
}

.bg-white { background-color: var(--color-white); }
.bg-spot { background-color: var(--color-spot); }

/*
  Globals
  Element defaults
*/

a {
  color: inherit;
  text-decoration: none;
}
a.button {
  border: 1px solid;
  padding: 0.5ex 0.8ex;
  margin: 0.5ex 0;
  border-radius: 0.3ex;
  display: inline-block;  
}
a.button:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}
.bg-spot a.button:hover {
  color: var(--color-spot-optical);
}

img {
  display: block;
  max-width: 100%;
}

/*
  Globals
  Typesetting zones
*/

@font-face {
  font-family: "Nuckle";
  src: url("../fonts/nuckle_regular-webfont.woff2") format("woff2"),
       url("../fonts/nuckle_regular-webfont.woff") format("woff2"),
       url("../fonts/nuckle_regular-webfont.eot") format("eot");
  font-weight: 400;
}
@font-face {
  font-family: "Nuckle";
  src: url("../fonts/nuckle_medium-webfont.woff2") format("woff2"),
       url("../fonts/nuckle_medium-webfont.woff") format("woff2"),
       url("../fonts/nuckle_medium-webfont.eot") format("eot");
  font-weight: 500;
}
@font-face {
  font-family: "Nuckle";
  src: url("../fonts/Nuckle-Semibold.ttf");
  src: url("../fonts/nuckle_semi_bold-webfont.woff2") format("woff2"),
       url("../fonts/nuckle_semi_bold-webfont.woff") format("woff2"),
       url("../fonts/nuckle_semi_bold-webfont.eot") format("eot");
  font-weight: 600;
}

html, body {
  font-family: "Nuckle";
  line-height: 1.3;
}

/*
@media screen and (min-width: 35.5em) {}
@media screen and (min-width: 48em) {}
@media screen and (min-width: 64em) {}
@media screen and (min-width: 80em) {}
@media screen and (min-width: 100em) {}
*/

.t-s,
.t-m { font-size: 1rem; line-height: 1.3; letter-spacing: 0.03em; }
.t-l { font-size: 1.45rem; line-height: 1.1; }

@media screen and (min-width: 35.5em) {
  .t-s,
  .t-m { font-size: 1.125rem; line-height: 1.3; letter-spacing: 0.03em; }
  .t-l { font-size: 1.8rem; line-height: 1.1; }
}
@media screen and (min-width: 48em) {}
@media screen and (min-width: 64em) {}
@media screen and (min-width: 80em) {}
@media screen and (min-width: 120em) {
  .t-s,
  .t-m { font-size: 1.4rem; line-height: 1.3; letter-spacing: 0.03em; }
  .t-l { font-size: 2.25rem; line-height: 1.1; }
}

.t-m-wide {
  line-height: 1.35;
}

.t-md h1 {
  font-size: 100%;
  margin: 0;
  text-transform: uppercase;
}
.t-md p + p {
  margin-top: 1em;
}
.t-md ul:not(.nav-desktop, .nav-mobile-primary, .nav-mobile-secondary) {
  list-style-type: disc;
  margin-bottom: 1em;
  margin-left: 2em;
}
.t-md a {}
.t-md em {}
.t-md table {
  margin: 0.5ex 0;
}
.t-md thead {}
.t-md td {
  padding-right: 2ex;
}
.t-md tbody td {
  padding: 0.5ex 2ex 0.5ex 0;
}
.t-md tbody tr {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.t-md .interview-name {
  display: block;
}
.t-md .t-caps { text-transform: uppercase; font-size: 98%; letter-spacing: 0.02em; }
.t-md .t-center { text-align: center; }
.t-md .t-tabular-figs { font-variant-numeric: tabular-nums; }
.t-md .t-outdent-wrap { margin-left: 3ex; text-indent: -3ex; }
.t-md .t-space-below { margin-bottom: 1em; }

/*
  Globals
  Layout
*/

body {
  padding: 1rem;
}

.l-block {
  margin-bottom: 1rem;
}
.l-block:last-child {
  margin-bottom: 0;
}

.l-min-height {
  margin-bottom: 2rem;
}
.l-min-height-half {
  margin-bottom: 1rem;
}

.l-grid-cols-1-1-2,
.l-grid-cols-2,
.l-grid-cols-3 {
  display: grid;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

@media screen and (min-width: 35.5em) {}
@media screen and (min-width: 48em) {
  .l-grid-cols-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .l-grid-cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  .l-grid-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 64em) {}
@media screen and (min-width: 80em) {}
@media screen and (min-width: 100em) {}

@media screen and (max-width: 48em) {
  .l-mobile-no-gap {
    grid-column-gap: 0;
    grid-row-gap: 0;
  }
  .l-mobile-space-below {
    margin-bottom: 1rem;
  }
}

/*
  Components
*/

/*
  Components
  Navigation
*/

/* Turn visibility on/off on desktop/mobile */
.nav-desktop { display: none; }
.nav-mobile { display: block; }
@media (min-width: 1024px) { /* todo: breakpoint */
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
}

/* Layout for desktop */
.nav-desktop {
  flex-direction: row;
  justify-content: space-between;
  /*margin-right: 1rem;*/
}

/* Borders */
.nav-desktop {
  border-top: 0.15rem solid;
  padding-bottom: 1rem;
}
.nav-desktop li:first-child a {
  padding-left: 0;
}
.nav-desktop li:last-child a {
  padding-right: 1rem;
}
.nav-desktop li a {
  padding: 1rem 1.5rem 0 1.5rem;
  border-left: 0.15rem solid black;
  display: block;
}
.nav-desktop li:first-child a {
  border-left: none;
}

/* Layout of typographic lockup */
.nav-lockup {
  background-image: url("../logos/Logo_WM.svg");
  background-image: url("../logos/Logo_WM.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 4.25em;
  width: 3.75em;
  text-indent: -9999px;
  margin-top: 0.14em;
}

/* Layout of mobile nav */
.nav-mobile {
  background-color: color(--color-white);
  z-index: 3;
}
.nav-mobile-secondary {
  display: none;
}
.nav-mobile.is-expanded .nav-mobile-secondary {
  display: flex;
  text-align: center;
}
.nav-mobile.is-expanded {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 1rem;
  overflow-y: scroll;
  background-color: var(--color-white);
}

/* Layout of mobile primary nav */
.nav-mobile-primary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Only show lockup, current page, and toggle */
.nav-mobile-primary li {
  display: none;
}
.nav-mobile-primary li:first-child,
.nav-mobile-primary li:last-child,
.nav-mobile-primary li.is-active {
  display: block;
}

/* Layout of mobile secondary nav */
.nav-mobile-secondary {
  height: 80%;
  background-color: color(--color-white);
  flex-direction: column;
  justify-content: space-around;
}

/* Hide lockup */
.nav-mobile-secondary li:first-child {
  display: none;
}

/* Stack letters in menu/close buttons */
.nav-mobile-toggle-on span,
.nav-mobile-toggle-off span {
  display: block;
}

/* Show hide toggle */
.nav-mobile:not(.is-expanded) .nav-mobile-toggle-off { display: none; }
.nav-mobile.is-expanded .nav-mobile-toggle-on { display: none; }

/*
  Components
  Timeline Entries
*/

/* Calculate widths */
:root {
  --block-col-width: calc((100vw - 2rem - 1rem - 1 * 10px) / 2);
  --block-cols-1: calc(var(--block-col-width) * 1 + 0px);
  --block-cols-2: calc(var(--block-col-width) * 2 + 10px);
  --block-cols-3: calc(var(--block-col-width) * 2 + 10px);
}
@media screen and (min-width: 35.5em) {

}
@media screen and (min-width: 48em) {
  :root {
    --block-col-width: calc((100vw - 2rem - 1rem - 3 * 10px) / 4);
    --block-cols-1: calc(var(--block-col-width) * 1 + 0px);
    --block-cols-2: calc(var(--block-col-width) * 2 + 10px);
    --block-cols-3: calc(var(--block-col-width) * 3 + 20px);

  }
}
@media screen and (min-width: 64em) {
  :root {
    --block-col-width: calc((100vw - 2rem - 1rem - 5 * 10px) / 6);
    --block-cols-1: calc(var(--block-col-width) * 1 + 0px);
    --block-cols-2: calc(var(--block-col-width) * 2 + 10px);
    --block-cols-3: calc(var(--block-col-width) * 3 + 20px);
  }
}
@media screen and (min-width: 80em) {}
@media screen and (min-width: 100em) {}

/* Default height/width of a block is 2 wide, 1 tall */
.block {
  background-color: var(--color-spot);
  width: var(--block-cols-2);
  height: var(--block-cols-1);
}

/* Utility classes for manually setting block height/width */
.block-1x1 { width: var(--block-cols-1); height: var(--block-cols-1); }
.block-2x1 { width: var(--block-cols-2); height: var(--block-cols-1); }
.block-3x1 { width: var(--block-cols-3); height: var(--block-cols-1); }
.block-1x2 { width: var(--block-cols-1); height: var(--block-cols-2); }
.block-2x2 { width: var(--block-cols-2); height: var(--block-cols-2); }
.block-3x2 { width: var(--block-cols-3); height: var(--block-cols-2); }
.block-1x3 { width: var(--block-cols-1); height: var(--block-cols-3); }
.block-2x3 { width: var(--block-cols-2); height: var(--block-cols-3); }
.block-3x3 { width: var(--block-cols-3); height: var(--block-cols-3); }

@media screen and (min-width: 48em) {
  .stagger-editorial > *:nth-child(2) {
    margin-top: calc(var(--block-col-width) + 10px);
  }
  .stagger-timeline > *:nth-child(7n),
  .stagger-timeline > *:nth-child(11n) {
    margin-left: calc(var(--block-col-width) + 10px);
  }
}

/* Text inside block defaults */
.block-text {
  padding: 0.5rem;
}
.block-text p {
  margin-top: 1em;
}

/* Shapes */
.block.shape-1x1-1,
.block.shape-1x1-2,
.block.shape-1x1-3,
.block.shape-1x1-4,
.block.shape-1x1-5,
.block.shape-2x1-1,
.block.shape-2x1-2,
.block.shape-2x1-3,
.block.shape-2x1-4,
.block.shape-2x1-5 {
  background: transparent;
  background-size: 100% 100%;
}

.block.shape-1x1-1 { background-image: url("../shapes/shape-1x1-1.svg"); }
.block.shape-1x1-2 { background-image: url("../shapes/shape-1x1-2.svg"); }
.block.shape-1x1-3 { background-image: url("../shapes/shape-1x1-3.svg"); }
.block.shape-1x1-4 { background-image: url("../shapes/shape-1x1-4.svg"); }
.block.shape-1x1-5 { background-image: url("../shapes/shape-1x1-1.svg"); }

.block.shape-2x1-1 { background-image: url("../shapes/shape-2x1-1.svg"); }
.block.shape-2x1-2 { background-image: url("../shapes/shape-2x1-2.svg"); }
.block.shape-2x1-3 { background-image: url("../shapes/shape-2x1-3.svg"); }
.block.shape-2x1-4 { background-image: url("../shapes/shape-2x1-4.svg"); }
.block.shape-2x1-5 { background-image: url("../shapes/shape-2x1-1.svg"); }

/* Micro adjustments to keep text visually inside shape */
.block.shape-2x1-3 .block-text *:nth-child(1) { margin-left: 0.5ex; }
.block.shape-2x1-3 .block-text *:nth-child(2) { margin-left: 1.25ex; }
.block.shape-2x1-1 .block-text *:nth-child(2) { margin-left: 0.25ex; }
.block.shape-2x1-5 .block-text *:nth-child(2) { margin-left: 0.25ex; }

/* Show zoom in/out cursor on hover */
.is-expandable:not(.is-expanded):hover {
  cursor: zoom-in;
}

/* Show/hide */
.is-expandable { height: 0; width: 0; overflow: hidden; margin-bottom: -1rem; }
.is-expandable > * { display: none; }

.is-expandable.is-expanded { height: auto; width: auto; margin-bottom: 0; }
.is-expandable.is-expanded > * { display: block; }

.is-expandable-origin { height: auto; width: auto; margin-bottom: 0; }
.is-expandable-origin > .origin { display: block; }
.is-expandable-origin.is-expanded > .origin { display: none; }

/* Specific block types: */

/* Title on shape, same as default */
.block.title_on_bg {}

/* Text blocks are double height */
.block.text {
  height: var(--block-cols-2);
}

/* Text over image */
.block.title_on_image {
  position: relative;
  height: auto;
}
.block.title_on_image img {
  display: block;
  z-index: 1;
  width: 100%;
}
.block.title_on_image .block-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Text over video */
.block.title_on_video {
  position: relative;
  overflow: hidden;
}
.block.title_on_video video {
  display: block;
  z-index: 1;
  width: 100%;
}
.block.title_on_video .block-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: var(--color-white);
  mix-blend-mode: difference;
}

/* Images are 1.5x width */
.block.image {
  background: transparent;
  width: var(--block-cols-3);
  height: auto;
}
.block.image img {
  display: block;
  max-height: 100vh;
}
.block.image figcaption {
  padding-top: 0.5rem;
}

/* Videos */
.block.video {
  background: transparent;
  width: var(--block-cols-3);
  height: auto;
  text-transform: uppercase;
}
.block.video img,
.block.video video {
  width: 100%;
}
.block.video .video-text {
  padding: 0 0 0.5rem;
}
.block.video .video-wrapper {
  position: relative;
}
.block.video .video-wrapper:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -2.5em; margin-left: -2.5em;
  height: 5em; width: 5em;
  background-image: url("../icons/play.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Links */
.block.link {
  width: var(--block-cols-2);
  height: auto;
  min-height: var(--block-cols-2);
}

/*
  Components
  Tagline
*/

.tagline {
  /*
    border-top: 0.15rem solid;
    padding-top: 1rem;
  */
}

/*
  Components
  Footer
*/

body {
  position: relative;
  padding-bottom: 10rem;
  min-height: 100vh;
  box-sizing: border-box;
}
footer {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
}
.footer-tagline {
  margin-bottom: 1rem;
}
@media screen and (min-width: 48em) {
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;    
  }
  .footer-tagline {
    margin-bottom: 0;
  }
  .footer-logos {
    text-align: right;
  }
  .footer-logos img {
    margin-left: 2ex;
  }
}

img.logo {
  display: inline-block;
  height: 3ex;
  /*margin: 0 -0.4ex 0.5ex;*/
  max-width: none;
}

/* todo */

iframe {
  width: 800px;
  height: 450px;
  display: block;
  margin: 5rem auto;
  margin-top: 0;
  max-width: 100%;
}