/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

/*** FONTS ***/
@font-face {
  font-family: "doto";
  src: url("../fonts/do-ro-sb.woff2") format("woff2");
}
@font-face {
  font-family: "tnr-reg";
  src: url("../fonts/tnr-reg.woff2") format("woff2");
}
@font-face {
  font-family: "tnr-ita";
  src: url("../fonts/tnr-ita.woff2") format("woff2");
}
@font-face {
  font-family: "twcond";
  src: url("../fonts/twcon-reg.woff2") format("woff2");
}

/*** GENERAL ***/
:root {
  --px: 14px;
  --base: var(--px);
  --lhValue: 1.35;
  --lineheight: calc(var(--base) * var(--lhValue));
  --padd: 1em;
  --bgCol: #fff6f6;
  --textCol: #353839;
  --textHover: rgb(150,150,150);
  --accentCol: 214,204,255;
  --buttonCol-1: rgba(var(--accentCol),.7);
  --greyCol: 230,220,220;
  --buttonCol-2: rgba(var(--greyCol),.7);
  --contWidth: 1000px;

  --cubicBez: ease;

  --font-Body: 'tnr-reg', times, serif;
  --font-BodyItalic: 'tnr-ita', times, serif;
  --font-Nav: 'doto', arial, sans-serif;
  --font-Cat: 'twcond', courier, monospace;
}
@media (min-width: 600px) {
  :root {
    --px: 16px;
  }
}

*,*:before,*:after {
  box-sizing: border-box;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  font-size: var(--base);
}

body {
  line-height: var(--lineheight);
  color: var(--textCol);
  font-family: var(--font-Body);
  background: var(--bgCol);
  overflow-x: hidden;
  min-width: 1vw;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  position: relative;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 1em;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--textHover);
}

a img {
  display: block;
}

:is(p,.pg-footer) em {
  font-style: normal;
  font-weight: normal;
  font-family: var(--font-BodyItalic);
}
p a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: rgb(var(--accentCol));
}

nav {
  font-family: var(--font-Nav);
  position: fixed;
  z-index: 91;
  bottom: 0;
  left: 0;
  padding: 0 1.5em 1.5em 1.5em;
  width: 100%;
  display: flex;
  justify-content: center;
}
.nav-inner {
  max-width: var(--contWidth);
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.nav-link {
  font-size: 1.25em;
  letter-spacing: .1em;
}


header {
  position: fixed;
  z-index: 100;
  top: 1.5em;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width:800px) {
  header {
    top: 2.5em;
  }
  nav {
    padding: 0 1.5em 2.5em 1.5em;
  }
  .nav-inner {
    width: 80%;
  }
  .nav-link {
    font-size: 1.5em;
  }
}
.botGrad {
  z-index: 91;
  width: 100%;
  position: fixed;
  inset: 0 0 -2rem;
  top: unset;
  bottom: 0;
  left: 0;
  pointer-events: none;
  height: 8.5em;
  --fade-color: 255 246 246;

  background: linear-gradient(
    to top, 
    rgba(var(--fade-color) / 1) 0%, 
    rgba(var(--fade-color) / 0.96) 20%, 
    rgba(var(--fade-color) / 0.85) 40%, 
    rgba(var(--fade-color) / 0.6) 60%, 
    rgba(var(--fade-color) / 0.25) 80%, 
    rgba(var(--fade-color) / 0) 100%);
}

.topGrad {
  z-index: 90;
  width: 100%;
  position: fixed;
  inset: 0 0 -2rem;
  top: 0;
  left: 0;
  pointer-events: none;
  height: 8.5em;
  --fade-color: 255 246 246;
  /*--fade-color: 214 204 255;*/

  background: linear-gradient(
    to bottom, 
    rgba(var(--fade-color) / 1) 0%, 
    rgba(var(--fade-color) / 0.96) 20%, 
    rgba(var(--fade-color) / 0.85) 40%, 
    rgba(var(--fade-color) / 0.6) 60%, 
    rgba(var(--fade-color) / 0.25) 80%, 
    rgba(var(--fade-color) / 0) 100%);
}
.hd-logo img {
  display: block;
  max-width: 240px;
}
.hd-logo a img {
  transform: translateY(0);
  transition: transform var(--cubicBez) .2s;
}
.hd-logo a:hover img {
  transform: translateY(-.3em);
}

main {
  position: relative;
  width: 100%;
  max-width: var(--contWidth);
  margin-left: auto;
  margin-right: auto;
  padding-left: .875em;
  padding-right: .875em;
  display: flex;
  flex-direction: column;
  margin-top: calc(calc(2.5em * 1) + 2em);
}
@media (min-width:600px) {
  main {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  .hd-logo img {
    display: block;
    max-width: 320px;
  }
}
@media (min-width:800px) {
  main {
    margin-top: calc(calc(2.5em * 2) + 2em);
  }
}
.fontBody {
  letter-spacing: .08em;
}
.text-center {
  text-align: center;
}
.mainBody {
  width: 92%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.hp-intro {
  margin-top: 2em;
  margin-bottom: 4em;
  position: relative;
}
.hp-intro:before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -100svh -30vw 0;
  border-radius: 100vw;
  filter: blur(30em);
  background-color: rgba(var(--accentCol),.9);
}
.hp-featured {
  margin-bottom: 2em;
}
@media (min-width:800px) {
  .hp-intro {
    margin-top: 0;
  }
}

.list-prjItem {
  --prjItemWidth: 540px;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  padding: 0 1em 3em 1em;
  max-width: 100%;
}
.list-prjItem:nth-child(even) {
  padding-left: 20%;
}
.list-prjItem:nth-child(even) .prjItem-img {
  display: flex;
  justify-content: flex-end;
}
.list-prjItem:hover {
  color: var(--textCol);
}
.prjItem-text {
  order: 2;
  position: relative;
}
.prjItem-text:before {
  content: "";
  position: absolute;
  border-radius: 10em;
  background-color: rgba(var(--accentCol),.9);
  filter: blur(10em);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  inset: -10vh -2em;
  transition: opacity .3s ease;
}

.prjItem-title,.prjItem-meta,.prjItem-type {
  order: 2;
  position: relative;
  z-index: 90;
}

.prjItem-title {
  font-size: 2.38em;
  letter-spacing: .08em;
  margin-bottom: .1em;
  line-height: 1;
}
@media (min-width:1200px) {
  .prjItem-title {
    font-size: 2.875vw;
  }
}

.prjItem-meta, .prjItem-type {
  font-family: var(--font-Cat);
  display: flex;
  flex-flow: row wrap;
  gap: .3em;
  letter-spacing: .04em;
}
.prjItem-meta {
  margin-bottom: .5em;
  text-transform: lowercase;
}
.prjItem-meta div {
  font-size: .875em;
  padding: .3em 1em .1em .3em;
  background-color: var(--buttonCol-2);
}
.prjItem-type { margin-left: 1.5em;}
.prjItem-type div {
  font-size: .875em;
  padding: .3em 1em .1em .3em;
  background-color: var(--buttonCol-1);
}

.prjImg-thumb {
  position: relative;
  max-width: 85%;
  rotate: -1.5deg;
  translate: 0 0;
  transition: translate .25s var(--cubicBez),
  rotate .3s var(--cubicBez);
  margin-bottom: 1em;
}

.list-prjItem:nth-child(even) .prjImg-thumb {
  rotate: 1.5deg;
  max-width: 100%;
}

.prjImg-thumb img {
  width: 100%;
  height: auto;
  transition: filter .3s ease,
  opacity .3s ease;
  opacity: 1;
  filter: grayscale(0) contrast(100%);
}

.list-prjItem:hover .prjImg-thumb {
  rotate: -2.5deg;
  translate: -.2em -1em;
}
.list-prjItem:hover .prjItem-text:before {
  opacity: 1;
}


@media (min-width:800px) {
  .list-prjItem {
    align-items: center;
  }
  .list-prjItem:nth-child(even) {
    padding-left: 0;
  }
  .list-prjItem .prjItem-img {
      display: flex;
  justify-content: center;
    }
  .list-prjItem:nth-child(odd) .prjItem-text {
  order: 1;
    }
    .list-prjItem:nth-child(odd) .prjItem-img {
  order: 2;
    }
  .list-prjItem:nth-child(even) .prjItem-text {
    order: 2;
  }
  .list-prjItem:nth-child(even) .prjItem-img {
    justify-content: unset;
    inset: -3em 0;
    order: 1;
          display: flex;
  justify-content: center;
  }
  .prjItem-text {
    width: 50%;
    text-align: center;
  }
  .prjItem-meta,.prjItem-type {
    justify-content: center;
  }
  .prjItem-img {
    width: 50%;
  }
  .list-prjItem:nth-child(even) .prjImg-thumb {
    max-width: 85%;
  }
  .prjImg-thumb img {
    opacity: .8;
    filter: grayscale(1);
  }
  .list-prjItem:hover .prjImg-thumb img {
    opacity: 1;
    filter: grayscale(0);
  }
  .list-prjItem:nth-child(even) .prjImg-thumb {
  left: unset;
  right: 0;
  }
}


button.catButton {
  all: unset;
  cursor: pointer;
  font-family: var(--font-Nav);
  font-size: 1.25em;
  padding: .5em;
  position: fixed;
  z-index: 101;
  top: 2.5em;
  right: max(0px, calc(50% - 500px));
  rotate:2deg;
  letter-spacing: .1em;
}
.catButton:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: -.5em -1em;
  border-radius: 20em;
  filter: blur(.5em);
  background-color: rgba(var(--accentCol),.9);
}
.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(255, 246, 246, .6);
  
  -webkit-backdrop-filter: blur(1.5em);
  backdrop-filter: blur(1.5em);
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
.fullscreen-menu li {
  margin: 1em 0;
}
.fullscreen-menu a {
  font-size: 2.875em;
  letter-spacing: .08em;
  text-decoration: none;
  line-height: 1.1;
}
.fullscreen-menu a.active {
  opacity: .5;
}
@media (min-width:800px) {
  .fullscreen-menu a {
    font-size: 3.25em;
  }
}

.prjBack {
  position: fixed;
  z-index: 91;
  top: 1.25rem;
  left: max(0px, calc(50% - 500px));
}
.prjBack button {
  all: unset;
  cursor: pointer; /* restores the pointer cursor */
  font-family: var(--font-Nav);
  font-size: 3em;
  padding: 0 0 0 .5em;
}
.prjBack button:hover {
  color: var(--textHover);
}
@media (min-width:800px) {
  .prjBack {
    top: 2.4rem;
  }
}

.prj-standfirst,
.prj-textBlock,
.prj-buttonBlock {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:400px) {
  .prj-standfirst,
  .prj-textBlock,
  .prj-buttonBlock {
    padding-left: 6%;
    padding-right: 6%;
  }
}
@media (min-width:700px) {
    .prj-standfirst,
  .prj-textBlock,
  .prj-buttonBlock {
    padding-left: 0;
    padding-right: 0;
  }
}

.prj-header {
  margin-top: 3em;
  margin-bottom: 5em;
}
.prj-cat {
  margin-top: 1em;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .5em;
}
.prj-cat div {
  display: inline-block;
  background-color: rgba(var(--accentCol),.7);
  font-size: 1.125em;
  padding: .3em 1em .1em .3em;
  background-color: var(--buttonCol-1);
  font-family: var(--font-Cat);
}

.prj-header h2 {
  font-size: 2.875em;
  text-align: center;
  letter-spacing: .08em;
  line-height: 1.05;
}
.prj-ledeBox, .prj-standfirst {
  font-size: 1.4em;
  line-height: 1.2;
  margin-bottom: 2em;
}
.prj-embed {
  margin-bottom: 4em;
  position: relative;
}
.embed-responsive {
  width: 100%;
}
.embed-responsive iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}


@media (min-width: 800px) {
  .prj-header h2 {
    font-size: 3.25em;
  }
  .prj-ledeBox, .prj-standfirst {
  font-size: 1.6em;
  }
}
.prj-ledeBox {
  padding: 1.5em .25em; 
  position: relative;
  line-height: 1.3;
}
.prj-ledeBox:before {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0 -2em 0;
  border-radius: 30em;
  filter: blur(2em);
  background-color: rgba(var(--accentCol),.7);
}
.prj-imageBlock {
  margin-bottom: 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imgBlock {
  rotate: -1deg;
}
.prj-imageCaption {
  max-width: 600px;
  font-family: var(--font-Nav);
  font-size: .875em;
  line-height: 1.2;
  text-align: center;
  margin-top: .875em;
  padding-left: 1em;
  padding-right: 1em;
}
.prj-buttonBlock {
  margin-top: 2em;
  margin-bottom: 6em;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.prj-buttonBlock a {
  display: inline-block;
  font-size: 1.875em;
  letter-spacing: .1em;
  font-family: var(--font-Nav);
  font-family: var(--font-Nav);
  padding: .3em 1em 1em .4em;
  translate: 0 0;
  transition: background-color .3s ease, 
  translate .3s ease;
}
.prj-buttonBlock a:before {
  content: "";
  position: absolute;
  pointer-events: none;
    z-index: -1;
  inset: -1rem -2rem 0;
  border-radius: 3em;
  filter: blur(.875em);
  background-color: rgba(var(--accentCol),.9);
}
.prj-buttonBlock a:hover {
  color: var(--textCol);
  translate: 0 -.2em;
}
.prj-textBlock {
  margin-bottom: 4em;
}
.prj-textBlock :is(ul,ol) {
  margin-bottom: 1.5em;
  padding-left: 2em;
}
.prj-textBlock ul {
  list-style-type: disc;
}

:is(.prj-textBlock, .twoCol-text) h3 {
  font-size: 1.875em;
  line-height: 1.2;
  margin-bottom: 1.125em;
  text-align: center;
}
:is(.prj-textBlock, .twoCol-text) h4 {
  font-size: 1.4em;
  line-height: 1.2;
  margin-bottom: .5em;
}
:is(.prj-textBlock, .twoCol-text) h5 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: .5em;
}
:is(p, ul, ol, blockquote) + :is(h3, h4, h5) {
  margin-top: 2.6em;
}
:is(p,ul,ol,blockquote) + :is(p,ul,ol,blockquote) {
  margin-top: 1.125em;
}

.prj-twoCol {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  width: 100%;
  margin-bottom: 4em;
}
.twoCol-text, .twoCol-img {
  width: 100%;
}
.twoCol-text {
  order: 2;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.twoCol-img {order: 1;}

.twoCol-img {rotate: -1deg}
.twoCol-left .twoCol-img {rotate: 1deg}

@media (min-width: 400px) {
  .twoCol-text {
    padding-left: 6%;
    padding-right: 6%;
  }
}

@media (min-width: 600px) {
  .twoCol-text { 
    padding: 0;
  }
}

@media (min-width: 800px) {
  .twoCol-text, .twoCol-img {
    width: calc(50% - .5em);
  }
  .twoCol-left .twoCol-img {
    order: 2;
  }
}

.hp-footer {
  display: block;
  min-height: 240px;
  max-width: var(--contWidth);
  margin: 8em auto;
  text-align: center;
  padding-bottom: 8em;
  color: var(--textHover);
  font-size: .875em;
  letter-spacing: .08em; 
}

.pg-footer {
  display: block;
  max-width: var(--contWidth);
  margin-left: auto;
  margin-right: auto;
  margin-top: 8em;
  text-align: center;
  padding-bottom: 1.5em;
  color: var(--textHover);
  font-size: .875em;
  letter-spacing: .08em;
}
.footer-mininav {
  display: flex;
  font-family: var(--font-Nav);
  font-size: 1.25rem;
  margin-bottom: 2em;
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 1em;
}
.footer-mininav a {color: var(--textCol);}
.footer-mininav a:hover {color: var(--textHover);}

.mainWide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.archive-grid {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2em;
}
.arch-item {
  grid-column: span 12;
}
.arch-item a {
  display: block;
}
.arch-item a img {
  rotate: 0;
  translate: 0 0;
  transition: all .2s ease;
}
.arch-item:nth-child(4n+1) a:hover img {
  rotate: -2deg;
  translate: -.5em -.8em;
}
.arch-item:nth-child(4n+2) a:hover img {
  rotate: 1deg;
  translate: .5em -.8em;
}
.arch-item:nth-child(4n+3) a:hover img {
  rotate: -1deg;
  translate: -.275em -.8em;
}
.arch-item:nth-child(4n+4) a:hover img {
  rotate: 1.5deg;
  translate: .675em -.1em;
}

@media (min-width: 600px) {
  .arch-item {
    grid-column: span 6;
  }
}

@media (min-width: 800px) {
  .archive-grid {
    gap: 1em
  }
  .arch-item {
    grid-column: span 4;
  }
}