/* Portrait Text Regular by Commercial Type */
@font-face {
  font-family: 'American Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/test-american-grotesk-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'American Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/test-american-grotesk-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'American Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/test-american-grotesk-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'American Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/test-american-grotesk-bold.woff2') format('woff2');
}

:root {
  font-size: 1rem;

  --font-stack: 'American Grotesk', Helvetica, Arial, sans-serif;
  --base-unit: 0.5rem;
  --base-line-height: 1.5;

  /* Unit scale */
  --spoint5: calc(var(--base-unit)*0.0625);
  --s1:  calc(var(--base-unit)*0.125);
  --s2:  calc(var(--base-unit)*0.25);
  --s3:  calc(var(--base-unit)*0.375);
  --s4:  calc(var(--base-unit)*0.5);
  --s5:  calc(var(--base-unit)*0.625);
  --s6:  calc(var(--base-unit)*0.75);
  --s8:       var(--base-unit);
  --s10: calc(var(--base-unit)*1.25);
  --s12: calc(var(--base-unit)*1.5);
  --s14: calc(var(--base-unit)*1.75);
  --s15: calc(var(--base-unit)*1.875);
  --s16: calc(var(--base-unit)*2);
  --s18: calc(var(--base-unit)*2.25);
  --s20: calc(var(--base-unit)*2.5);
  --s22: calc(var(--base-unit)*2.75);
  --s24: calc(var(--base-unit)*3);
  --s26: calc(var(--base-unit)*3.25);
  --s28: calc(var(--base-unit)*3.5);
  --s30: calc(var(--base-unit)*3.75);
  --s32: calc(var(--base-unit)*4);
  --s36: calc(var(--base-unit)*4.5);
  --s38: calc(var(--base-unit)*4.75);
  --s40: calc(var(--base-unit)*5);
  --s44: calc(var(--base-unit)*5.5);
  --s48: calc(var(--base-unit)*6);
  --s50: calc(var(--base-unit)*6.25);
  --s52: calc(var(--base-unit)*6.5);
  --s54: calc(var(--base-unit)*6.75);
  --s56: calc(var(--base-unit)*7);
  --s60: calc(var(--base-unit)*7.5);
  --s64: calc(var(--base-unit)*8);
  --s72: calc(var(--base-unit)*9);
  --s80: calc(var(--base-unit)*10);

  /* Colours */
  --c-grey-dark-3: #141414;
  --c-grey-dark-2: #222;
  --c-grey-dark-1: #333;
  --c-grey-mid: #666;
  --c-grey-light-1: #999;
  --c-grey-light-2: #CCC;
  --c-grey-light-3: #EBEBEB;
  --c-grey-light-4: #FAFAFA;

  --c-background: var(--c-grey-light-4);
  --c-text: black;
  --c-link-active: blue;
  --c-underline: var(--c-grey-light-1);

  /* Padding */
  --p-global: var(--s20);
}

@media screen and (min-width: 26rem) {

  :root {
    font-size: 3.85542169vw;
  }
}

@media screen and (min-width: 64rem) {
  :root {
    font-size: 1.5625vw;
  }
}

@media screen and (min-width: 100rem) and (min-aspect-ratio: 16/9) {
  :root {
    font-size: 1.25vw;
  }
}


@media (prefers-color-scheme: dark) {

  :root {
    --c-text: var(--c-grey-light-3);
    --c-background: var(--c-grey-dark-3);
    --c-link-active: lightgreen;
    --c-underline: var(--c-grey-mid);
  }
}


.skip-to-content {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

.skip-to-content:focus {
  z-index: 3;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  clip: auto;
  clip-path: none;
}

/*
 * Helpers
 */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes slow-in {
  0%  {opacity: 0; transform: scale(1.025);}
  100% {opacity: 1; transform: scale(1);}
}

@keyframes fade-in {
  0%  {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fade-out {
  0%  {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fade-off {
  0%  {opacity: 1; transform: scale(1);}
  100% {opacity: 0.05; transform: scale(0.985);}
}

@keyframes fade-off-in {
  0%  {opacity: 0.05; transform: scale(0.985);}
  100% {opacity: 1; transform: scale(1);}
}

[data-animate="slow-in"] {
  animation-duration: 1.5s;
  animation-delay: 0.25s;
}

[data-animate="in"],
[data-animate="out"],
[data-animate="off"],
[data-animate="off-in"],
[data-animate="slow-in"] {
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

[data-animate="in"],
[data-animate="out"],
[data-animate="off"],
[data-animate="off-in"] {
  animation-duration: 0.5s;
}

[data-animate="slow-in"] {
  animation-name: slow-in;
}

[data-animate="in"] {
  animation-name: fade-in;
}

[data-animate="out"] {
  animation-name: fade-out;
}


[data-animate="off"] {
  animation-name: fade-off;
}

[data-animate="off-in"] {
  animation-name: fade-off-in;
}

/*
 * Base Elements and Typography
 */

:root {
  background-color: var(--c-background);
  color: var(--c-text);
  font-family: var(--font-stack);
  line-height: var(--base-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

hr {
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: var(--s1);
  border-style: solid;
}

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

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1333;
}

a {
  color: var(--c-text);

  &:hover,
  &:focus {
    color: var(--c-link-active);
  }
}

figure {
  margin: 0;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.outline {
  color: var(--c-background);
  -webkit-text-stroke-width: calc(var(--s2)/3);
  text-stroke-width: calc(var(--s2)/3);
  -webkit-text-stroke-color: var(--c-text);
  text-stroke-color: var(--c-text);
/*  paint-order: stroke fill;*/
}

.page-title {
  margin-top: 0;
  font-weight: 500;
}

@media screen and (min-width: 64rem) {

  .outline {
    -webkit-text-stroke-width: var(--s1);
    text-stroke-width: var(--s1);
  }

  .page-title {
    font-size: var(--s60);
  }
}

/* Lists */

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-position: inside;
}

ul li,
ol li {
  font-size: 1em;
}

ul li {
  list-style-type: none;
}

/* Buttons */

button {
  color: var(--c-text);
  cursor: pointer;
  transition-property: background-color, color;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0s;
}


/*
 * Components
 */


/* Navigation */

nav {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  column-gap: var(--s8);
  font-weight: 500;

  a {
    line-height: 1;
    color: var(--c-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.1s linear;

    &:last-child {
      margin-right: 0;
    }

    &:hover,
    &:focus {
      color: var(--c-text);
      text-decoration-color: var(--c-text);
    }
  }

  .js-enabled & {

    .item-about span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
}

#primary-navigation {
  margin-bottom: var(--s8);
}


/* Header */
#site-header {
  background-color: var(--c-background);
  padding: var(--s12) var(--p-global);
  border-width: var(--s1);
  border-color: var(--c-grey-light-3);
  border-top-style: solid;

  .trigger {
    display: none;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.1s linear;

    button& {
      padding: 0;
      border-radius: 0;
      border: none;
      background-color: transparent;
      -webkit-appearance: none;
    }

    &:hover,
    &:focus {
      text-decoration-color: var(--c-text);
    }
  }
}

@media screen and (min-width: 26rem) {

  #site-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    .js-enabled & {

      nav {
        display: flex;
        column-gap: var(--s20);
      }

      #primary-navigation {
        order: 1;
        flex-grow: 1;
        margin-bottom: 0;
      }

      #secondary-navigation {
        display: none;
        flex-direction: column;
        align-items: flex-end;
        row-gap: var(--s8);
        position: absolute;
        right: var(--s10);
        bottom: var(--s6);
        z-index: 0;
        background-color: var(--c-background);
        padding: var(--s8) var(--s12) var(--s40);
        border-radius: var(--s10);
        box-shadow: 0 0 var(--s8) var(--c-grey-light-3);

        &[data-state="active"] {
          display: flex;
        }
      }

      .trigger {
        order: 2;
        z-index: 1;

        &[data-action="open"] {
          display: inline-block;
        }
      }
    }

    [data-active-modal="secondary-navigation"] & {

      .trigger[data-action="open"] {
        display: none;
      }

      .trigger[data-action="close"] {
        display: inline-block;
      }
    }
  }
}

@media screen and (min-width: 64rem) {

  #site-header {
    border-top-width: 0;
    border-top-style: none;
/*    border-bottom-style: solid;*/

    .js-enabled & {

      [data-action="open"],
      [data-action="close"] {
        display: none !important;
      }

      #secondary-navigation {
        order: 2;
        display: flex;
        flex-direction: row;
        position: static;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
      }
    }
  }
}

/*
 ** Content area
 */

.content-area {
  hyphens: manual;
/*  font-family: var(--font-stack-serif);*/
}

/* Remove margin-bottom from the first element inside content-area */
.content-area > :first-child {
  margin-top: 0;
}

/* Remove margin-bottom from the last element inside content-area */
.content-area > :last-child {
  margin-bottom: 0;
}

.content-area h1,
.content-area h2,
.content-area h3 {
  margin-top: var(--s32);
}

.content-area p {
  font-size: var(--s16);
  line-height: 1.4;
}

.content-area em {
  text-decoration-color: var(--c-underline);
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.content-area a[href*="#fn"] {
  margin-left: var(--s2);
}

.content-area a[href*="https"]::after {
  content: "";
  display: inline-block;
  margin-left: var(--s2 );
  width: var(--s6);
  height: var(--s10);
  background-image: url("../images/external-link-black.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {

  .content-area a[href*="https"]::after {
    background-image: url("../images/external-link-white.svg");
  }
}

.content-area blockquote {
  margin-bottom: var(--s32);

  cite {
    display: inline-block;
    margin-top: var(--s16);
  }
}

.content-area ul,
.content-area ol {
  list-style-position: outside;
  position: relative;
  left: var(--s18);
}

.content-area ul li {
  list-style-type: disc;
}

.content-area ol li {
  list-style-type: decimal;
}

.content-area {

  hr {
    margin-top: var(--s32);
    margin-bottom: var(--s32);
    border-style: dotted;
    border-color: var(--c-grey-light-1);
  }

  @media screen and (min-width: 64rem) {

    hr {
      margin-top: var(--s64);
      margin-bottom: var(--s64);
    }
  }
}

.content-area footer {
  padding-top: var(--s20);
  margin-top: var(--s20);
  border-top: var(--s1) dotted var(--c-underline);
}

/** Footnotes */

.footnotes {
  padding-top: var(--s20);
  margin-top: var(--s20);
  border-top: var(--s1) dotted var(--c-underline);

  ol p {

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}


/** Feature List **/
.feature-item-list {

  .item {
    padding-top: var(--s10);
    padding-bottom: var(--s10);
    border-top: var(--s1) solid var(--c-text);

    &:last-child {
      border-bottom: var(--s1) solid var(--c-text);
    }
  }

  .title {
    display: block;
    line-height: 1.1333;
    color: var(--c-text);
    text-decoration: none;

    .primary {
      margin-top: 0;
      margin-bottom: 0;
      text-decoration: underline;
      text-decoration-color: transparent;
      transition: text-decoration-color 0.1s linear;

      .title:hover &,
      .title:focus & {
        text-decoration-color: var(--c-text);
      }
    }

    .primary,
    .secondary {
      font-size: var(--s32);
      font-weight: 500;
    }
  }
}

@media screen and (min-width: 64rem) {

  .feature-item-list .item {
    padding-top: var(--s20);
    padding-bottom: var(--s20);

    .title {

      .primary,
      .secondary {
        font-size: var(--s60);
        display: inline;
      }

      .primary {
        margin-right: var(--s10);
      }

      .secondary {
        white-space: nowrap;
      }
    }
  }
}

/** Stories */

.story {

  .controls {
    display: none;
  }

  main {
    margin-top: var(--s40);
    margin-bottom: var(--s40);

    figure:not(:last-child) {
      margin-bottom: var(--s20);
    }
  }
}

.js-enabled .story {

  header {
    position: relative;

    .controls {
      display: block;
    }

    .trigger {
      border-radius: 0;
      border: none;
      -webkit-appearance: none;
    }

    .trigger[data-action="open"] {
      position: absolute;
      top: calc(-1 * var(--s10));
      left: calc(-1 * var(--s10));
      right: calc(-1 * var(--s10));
      bottom: calc(-1 * var(--s10));
      background-color: transparent;
      padding: 0;
    }

    .trigger[data-action="close"] {
      display: none;
      position: fixed;
      right: calc(50% - var(--s30));
      bottom: var(--p-global);
      box-sizing: border-box;
      width: var(--s60);
      border-radius: var(--s16);
      padding: var(--s6) var(--s10) var(--s8);
      font-weight: 500;
      line-height: 1;
      text-transform: lowercase;
      color: var(--c-text);
      background-color: var(--c-background);
      border: var(--s1) solid var(--c-text);
      backdrop-filter: blur(var(--s2));
      -webkit-backdrop-filter: blur(var(--s2));

      &:hover,
      &:focus {
        color: var(--c-background);
        background-color: var(--c-text);
      }
    }
  }

  main {
    display: none;
    margin-top: auto;
    margin-bottom: auto;

    figure {
      max-height: 90vh;
      display: flex;

      img {
        object-fit: contain;
        object-position: left top;
      }
    }

    .content-area {
      margin: var(--s40) 0;
    }
  }

  /* When active as a modal */
  &[data-state="active"] {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--p-global) var(--p-global) calc(var(--s36) + var(--p-global));
    border-top: none;
    overflow-y: scroll;
    --webkit-overflow-scrolling: touch;
    background-color: var(--c-background);

    .trigger[data-action="open"] {
      display: none;
    }

    .trigger[data-action="close"] {
      display: block;
    }

    header {
      margin-bottom: var(--s40);

      &:hover,
      &:focus {

        .title {
          text-decoration-color: transparent;
        }
      }
    }

    main {
      display: block;
    }
  }
}


@media screen and (min-width: 64rem) {

  .story {

    header {

      .author {
        white-space: nowrap;
      }
    }

    main {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      column-gap: var(--s40);

      figure {
        grid-column: span 4;

        &:not(:last-child) {
          margin-bottom: 0;
        }

        &[data-orientation="square"] {
          grid-column: span 5;
        }

        &[data-orientation="landscape"] {
          grid-column: span 6;
        }

        @media (min-aspect-ratio: 16/9) {
          grid-column: span 3;

          &[data-orientation="square"] {
            grid-column: span 3;
          }

          &[data-orientation="landscape"] {
            grid-column: span 6;
          }
        }
      }

      .content-area {
        grid-column: span 2;
        align-self: end;
      }

      &[data-layout="side-by-side"] {

        figure,
        figure[data-orientation="square"],
        figure[data-orientation="portrait"]
        figure[data-orientation="landscape"] {
          grid-column: span 4;
        }
      }

      &[data-layout="prose"] {

        .content-area {
          grid-column: span 4;
          margin-top: 30vh;
          text-align: justify;
          hyphens: auto;

          p {
            font-size: var(--s16);
          }
        }
      }
    }
  }

  .js-enabled .story {

    header {
      padding-right: var(--s72);

      .trigger[data-action="close"] {
        right: var(--p-global);
        top: var(--p-global);
        bottom: auto;
      }
    }


    &[data-state="active"] {
      padding-bottom: var(--p-global);

      main {
        margin-bottom: 0;
        display: grid;

        .content-area {
          width: auto;
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    }
  }
}

/*
 * Layout
 */

/*
 ** Base structure
 */

 /* safe area for Apple notch phones */
 /*@supports(padding: max(0px)) {

  .main-content {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}*/

body {
  padding: var(--p-global) var(--p-global) var(--s80) var(--p-global);


  &[data-modal-state="active"] {
    overflow: hidden;
    height: 100vh;
  }

  &[data-active-modal="secondary-navigation"] {

    #main-content {
      opacity: 0.5;
      user-select: none;
    }
  }
}

#site-header {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

#main-content {
  padding-top: 16vh;
}

@media screen and (min-width: 26rem) {

  body {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--s64);
  }

  #site-header {
    order: 2;
  }

  #main-content {
    order: 1;
  }
}

@media screen and (min-width: 64rem) {

  body {
    padding-bottom: var(--p-global);
  }

  #site-header {
    order: 1;
    top: 0;
    bottom: auto;
  }

  #main-content {
    order: 2;
  }
}

.template-index {

  .introduction {
    font-weight: 500;
    font-size: var(--s32);
    line-height: 1.133;
    hyphens: manual;
    text-align: justify;

    h1 {
      text-transform: uppercase;
      hyphens: none;
      font-size: var(--s36);
    }

    h1,
    p {
      display: inline;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .stories {
    margin-top: var(--s40);
  }

  .feature-item-list {
    padding-top: var(--s40);
  }

  .call-to-action {
    display: block;
    padding-top: var(--s10);
    padding-bottom: var(--s10);
    font-size: var(--s32);
    font-weight: 500;
    line-height: 1.133;
    color: var(--c-text);
    transition: color 0.1s linear;

    &:hover,
    &:focus {
      color: var(--c-background);
      text-decoration-color: var(--c-text);
      -webkit-text-stroke-width: calc(var(--s2)/3);
      text-stroke-width: calc(var(--s2)/3);
      -webkit-text-stroke-color: var(--c-text);
      text-stroke-color: var(--c-text);
    }

  }
}

@media screen and (min-width: 64rem) {

  .template-index  {

    .introduction {
      text-align: left;

      h1,
      p {
        font-size: var(--s60);
        line-height: 1.1;
      }
    }

    .call-to-action {
      padding-top: var(--s20);
      padding-bottom: var(--s20);
      font-size: var(--s60);

      &:hover,
      &:focus {
        -webkit-text-stroke-width: var(--s1);
        text-stroke-width: var(--s1);
      }

    }
  }
}


.template-page {

  &.page-colophon {
    .page-title {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media screen and (min-width: 26rem) {

  }

  @media screen and (min-width: 64rem) {

    #main-content {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      column-gap: var(--s20);
    }

    .page-title,
    .content-area {
      grid-column: 1/5;
    }

    &.page-about .page-title br {
      display: none;
    }

    @media screen and (min-aspect-ratio: 16/9) {

      .page-title,
      .content-area {
        grid-column: 1/4;
      }
    }
  }
}

.template-essay {

  @media screen and (min-width: 64rem) {

    #main-content {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      column-gap: var(--s20);
    }

    .page-title {
      grid-column: 1/9;

      span {
        display: block;
      }
    }

    .content-area {
      grid-column: 1/5;
    }

    .page-title

    @media screen and (min-aspect-ratio: 16/9) {

      .page-title,
      .content-area {
        grid-column: 1/4;
      }
    }
  }
}