/**
 * Data font stack
 *
 * @group typography
 */
/**
 * Serif font stack
 *
 * @group typography
 */
/**
 * Headline font stack
 *
 * @group typography
 */
/**
 * Sans serif text font stack
 *
 * @group typography
 */
/**
 * Sans serif headline font stack
 *
 * @group typography
 */
/**
 * Default font scale settings
 * See font-scale.html and font-scale.png for visual representations
 *
 * @group typography
 */
/**
 * Grab all levels of a font the font-scale
 *
 * @param {String} $name - Name of the font-scale matrix (eg: headline)
 * @param {Map} $font-scale ($font-scale)
 *
 * @example
 *  font-size: get-scale(header);
 *
 * @requires {variable} $font-scale
 *
 * @return {Map}
 *
 * @group typography
 */
/**
 * Grab info for a particular level of a font-scale
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale ($font-scale)
 *
 * @example
 *  font-size: get-scale-level(header, 1);
 *
 * @requires {variable} $font-scale
 * @requires {function} get-scale
 *
 * @return {Map}
 *
 * @group typography
 */
/**
 * Get a font-size for a level in the font-scale matrix
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale - Configuration
 *
 * @example
 *  font-size: get-font-size(header, 3);
 *
 * @requires {variable} $font-scale
 * @requires {function} convert-to-px
 * @requires {function} get-scale-level
 *
 * @return {Number}
 *
 * @group typography
 */
/**
 * Get a line-height for a level in the font-scale matrix
 *
 * @param {String} $name - Name of the font-scale in the matrix (eg: headline)
 * @param {Number} $level - Level in the matrix
 * @param {Map} $font-scale - Configuration
 *
 * @example
 *  font-size: get-line-height(header, 3);
 *
 * @requires {variable} $font-scale
 * @requires {function} convert-to-px
 * @requires {function} get-scale-level
 *
 * @return {Number}
 *
 * @group typography
 */
/**
 * Turn any value into pixels
 *
 * @param {Number} $value
 *
 * @example
 *  font-size: convert-to-px(14); // 14px
 *
 * @return {Number}
 *
 * @group typography
 */
/**
 * Default typography settings, to be included as soon as possible in the HTML
 * 1. Make type rendering look crisper
 * 2. Set relative line spacing to 1.5 (16px * 1.5 = 24px)
 *
 * @param {String} $font-family ($f-serif-text) - Default global font
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */
/**
 * Font-size and line-height shorthand
 *
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font-size(18, 24);
 *
 * @requires {function} convert-to-px
 *
 * @group typography
 */
/**
 * Font styling shorthand  
 * Note: prefer the usage of the font-scale mixins to stick to the font scale
 *
 * @param {String} $family
 * @param {String} $weight
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font(arial, bold, 18, 24);
 *
 * @requires {mixin} font-size
 *
 * @group typography
 */
/**
 * Header family and weight properties.
 *
 * @requires {variable} $f-serif-headline
 *
 * @group typography
 */
/**
 * Header typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-header(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-header(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-header
 *
 * @group typography
 */
/**
 * Healdine family and weight properties.
 *
 * @requires {variable} $f-serif-headline
 *
 * @group typography
 */
/**
 * Headline typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-headline(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-headline(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-headline
 *
 * @group typography
 */
/**
 * Body Heading family and weight properties.
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */
/**
 * Body Heading typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family, weight)
 *  @include fs-bodyHeading(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-bodyHeading(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-bodyHeading
 *
 * @group typography
 */
/**
 * Body Copy family property.
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */
/**
 * Body Copy typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-bodyCopy(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-bodyCopy(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-bodyCopy
 *
 * @group typography
 */
/**
 * Data family property.
 *
 * @requires {variable} $f-data
 *
 * @group typography
 */
/**
 * Data typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-data(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-data(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-data
 *
 * @group typography
 */
/**
 * Text Sans family property.
 *
 * @requires {variable} $f-sans-serif-text
 *
 * @group typography
 */
/**
 * Text Sans typography settings.
 *
 * @param {Number} $level
 * @param {Boolean} $size-only
 *
 * @example
 *  // Output all properties (font-size, line-height, family)
 *  @include fs-textSans(3);
 *  
 *  // Output font-size and line-height only
 *  @include fs-textSans(3, $size-only: true);
 *
 * @requires {function} get-font-size
 * @requires {function} get-line-height
 * @requires {mixin} font-size
 * @requires {mixin} f-textSans
 *
 * @group typography
 */
/**
 * Headline Sans family property.  
 * Is not currently integrated into our font scale matrix,
 * hence no `fs-` mixin; currently we're just using it as a
 * replacement font in a few places.
 *
 * @requires {variable} $f-sans-serif-headline
 *
 * @group typography
 */
.interactive {
  margin: 0; }

.int-vertical-slideshow {
  top: 0;
  width: 100%;
  left: 0;
  z-index: 3;
  position: relative;
  background-color: #fff; }
  @media (min-width: 61.25em) {
    .int-vertical-slideshow {
      background-color: #000; } }

.int-images {
  height: 100vh;
  width: 100%;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  overflow: hidden; }
  .int-images .int-image {
    display: block;
    height: 100vh;
    position: absolute;
    top: 0;
    will-change: opacity;
    width: 100vw;
    left: 0;
    background-size: cover;
    background-position: center center;
    transition: opacity 0.5s ease-in-out;
    background-color: #161616; }

.int-captions {
  position: absolute;
  width: 100%;
  z-index: 3;
  left: 0;
  top: 0;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 28px;
  font-family: "Guardian Text Egyptian Web", Georgia, serif;
  font-weight: 400;
  color: #fff; }
  .int-captions-container {
    position: absolute;
    width: 90vw;
    display: inline; }
    @media (min-width: 46.25em) {
      .int-captions-container {
        width: 620px; } }
  .int-captions p {
    padding: 5px 5px 5px 5px;
    font-size: 20px !important;
    line-height: 24px !important;
    display: inline;
    background-color: #000;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-family: "Guardian Egyptian Web",Georgia,serif;
    font-weight: 900; }
    @media (min-width: 46.25em) {
      .int-captions p {
        font-size: 24px !important;
        line-height: 40px !important; } }
    .int-captions p::before {
      content: '';
      background-color: #ffbb00;
      width: 4px;
      display: inline-block;
      height: 31px;
      transform: translate(-5px, 10px); }
      @media (min-width: 61.25em) {
        .int-captions p::before {
          height: 34px; } }
  @media (min-width: 61.25em) {
    .int-captions {
      padding-left: calc(50% - 480px);
      padding-right: calc(50% - 480px); } }
  @media (min-width: 71.25em) {
    .int-captions {
      padding-left: calc(50% - 570px);
      padding-right: calc(50% - 570px); } }
  @media (min-width: 81.25em) {
    .int-captions {
      padding-left: calc(50% - 650px);
      padding-right: calc(50% - 650px); } }

.black-on-white p {
  background-color: #fff;
  color: #333333; }

.int-caption {
  box-sizing: border-box;
  position: absolute;
  left: 10px; }
  @media (min-width: 61.25em) {
    .int-caption {
      left: auto; } }

.article figure.element-interactive {
  margin-left: -12px !important; }

/*# sourceMappingURL=main.css.map */