/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
div,
ul,
li,
img,
video,
section,
figure,
figcaption,
main,
footer,
h1,
h2,
h3,
p,
a {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #eee;
}

/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container {
  max-width: 90rem;
}

.container {
  margin: 0 auto;
  background: #fff9e0;
}

/* Fonts are here
--------------------------------------------------------------------------------------- */

@font-face {
  font-family: vg5000;
  src: url(fonts/vg5000_web/VG5000-Regular_web.woff2);
  font-weight: normal;
}

@font-face {
  font-family: Sen;
  src: url(fonts/Sen/Sen-VariableFont_wght.ttf);
  font-weight: 400;
}

body {
  font-family: Sen, Verdana, Geneva, Tahoma, sans-serif;
}

h1,
h2,
h3 {
  font-family: vg5000, "Gill Sans", "Gill Sans MT", sans-serif;
}

p {
  font-family: Sen, Verdana, Geneva, Tahoma, sans-serif;
}

figcaption {
  font-family: Sen, Verdana, Geneva, Tahoma, sans-serif;
  color: #e74a11;
}

/*  top navigation section
--------------------------------------------------------------------------------------- */
nav {
  padding: 0.8rem 1rem 0.6rem 1rem;
  min-height: 2rem;
  border-bottom: 2px #eee solid;
}

nav h1 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

nav a {
  white-space: nowrap;
}

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

nav ul li {
  font-size: 1rem;
  display: inline-block;
  margin-right: 1.5rem;
}

/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav+h2 {
  font-size: 1.25rem;
  line-height: 2.15rem;
  margin: 1rem 0.5rem 3rem;
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container>figure {
  margin: 0 0.5rem 2rem 0.5rem;
}

/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section {
  margin: 0;
  padding: 0 0.5rem 1.5rem;
}

section h3,
section div h3 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

section figure {
  margin-bottom: 1rem;
}

section figcaption {
  font-size: 1rem;
}

section.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(2.5rem, auto);
  grid-column-gap: 1.5rem;
  grid-row-gap: 0.625rem;
  grid-row-gap: 0;
  grid-template-areas:
    "hd hd fg"
    "dv dv fg";
}

section div {
  margin-top: -0.375rem;
}

/* to adjust type against images */

/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p {
  margin: 0 0 1rem 0;
  max-width: 36em;
  max-width: 100%;
}

/* max-width sets line length */
p {
  font-size: 1rem;
  line-height: 1.375rem;
  padding-left: 3rem;
}

/* p { line-height: 2.0625rem; } */

/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img {
  width: 100%;
  height: auto;
}

video {
  width: 100%;
}

.max {
  max-width: 100%;
}

/* max-width can stop img element going bigger than its actual size */

/*  link styling
--------------------------------------------------------------------------------------- */
a.inverse {
  color: #f1e7c1;
  text-decoration: none;
}

a:visited-inverse {
  color: #f1e7c1;
}

a:hover-inverse {
  color: #ffa92c;
  text-decoration: underline;
}

a:active-inverse {
  color: #ffa92c;
}

a {
  color: #e74a11;
  text-decoration: underline;
}

a:visited {
  color: fff9e0;
}

a:hover {
  color: #ffa92c;
  text-decoration: underline;
}

a:active {
  color: #ffa92c;
}

nav a {
  color: #fff9e0;
  text-decoration: none;
}

nav a:visited {
  color: #fff9e0;
}

nav a:hover {
  color: #ffa92c;
  text-decoration: underline;
}

nav a:active {
  color: #ffa92c;
}

.contact p {
  font-size: 3rem;
  text-align: center;
}

/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {

  /*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
  .container {
    min-width: 60rem;
    min-width: 0;
  }

  .force-height {
    min-height: 100vh;
  }

  /*  top navigation grid
--------------------------------------------------------------------------------------- */
  nav {
    display: grid;
    grid-template-columns: 1fr auto;
    background: #e74a11;
    min-width: 100vw;
    border-bottom: 0 #eee none;
  }

  nav h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
  }

  nav ul {
    margin: 0;
  }

  nav ul li {
    font-size: 1.3rem;
    margin: 0 0 0 1.25rem;
  }

  /*  main page title after top navigation
--------------------------------------------------------------------------------------- */
  .container>h2 {
    font-size: 3rem;
    line-height: 1.15em;
    margin: 3rem auto 4rem;
    text-align: center;
  }

  /*  hero image
--------------------------------------------------------------------------------------- */
  h2+figure {
    margin: 0;
    padding-bottom: 3rem;
  }

  h2+figure img {
    display: block;
  }

  /*  default desktop section styles
--------------------------------------------------------------------------------------- */
  section {
    padding: 0.5 0.5rem 0.5rem;
  }

  section figure {
    margin: 0;
  }

  section h3 {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  /*  section default 12 column grid
--------------------------------------------------------------------------------------- */
  section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0.625rem;
    /*  .625% of 16 = 10, 0.625em = 10px ...  */
    grid-row-gap: 0;
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd hd hd hd"
      "fg fg fg fg dv dv dv dv dv dv dv dv";
  }

  section h3 {
    grid-area: hd;
  }

  section figure {
    grid-area: fg;
  }

  section div {
    grid-area: dv;
  }

  /*  simple 3 column grid
--------------------------------------------------------------------------------------- */
  section.three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2rem auto;
    grid-column-gap: 3rem;
    grid-row-gap: 0.5rem;
    grid-template-areas:
      "fg hd hd"
      "fg dv dv";
  }

  section.three h3 {
    grid-area: hd;
  }

  section.three figure {
    grid-area: fg;
  }

  section.three div {
    grid-area: dv;
  }

  section.three h3 {
    margin-top: -0.6rem;
  }

  section.three div {
    margin-top: 0;
  }

  /*  3 column grid with right hand image
--------------------------------------------------------------------------------------- */
  section.right {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-column-gap: 1.5rem;
    grid-column-gap: 4rem;
    grid-row-gap: 0;
    grid-row-gap: 0rem;
    grid-template-areas:
      "hd hd hd fg fg fg"
      "dv dv dv fg fg fg"
      "dv dv dv fg fg fg";
  }

  section.right h3 {
    grid-area: hd;
  }

  section.right figure {
    grid-area: fg;
  }

  section.right div {
    grid-area: dv;
  }

  section.right h3 {
    margin-top: 0;
  }

  section.right div {
    margin-top: 0;
  }

  /* Start Grid 
  ---------------------------------------------------------------- */

  section.start {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-column-gap: 4rem;
    grid-row-gap: 0;
    grid-row-gap: 0rem;
    grid-template-areas:
      "hd hd hd hd hd hd"
      "d1 d1 d1 d2 d2 d2";
  }


  section.start div {
    grid-area: d1;
  }

  section.start h3 {
    grid-area: hd;
  }

  section.start div:nth-of-type(2) {
    grid-area: d2;
  }

  /* 3 column Grid with Image on Left 
  ---------------------------------------------------------------- */

  section.left {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-column-gap: 1.5rem;
    grid-column-gap: 4rem;
    grid-row-gap: 0;
    grid-row-gap: 0rem;
    grid-template-areas:
      "fg fg fg hd hd hd"
      "fg fg fg dv dv dv";
  }

  section.left h3 {
    grid-area: hd;
  }

  section.left figure {
    grid-area: fg;
  }

  section.left div {
    grid-area: dv;
  }

  section.left h3 {
    margin-top: 0;
  }

  section.left div {
    margin-top: 0;
  }

  /*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
  section.wide {
    margin: 2rem, 0;
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "dv fg fg"
      "dv fg fg"
      "dv fg fg";
  }

  section.wide h3 {
    grid-area: hd;
  }

  section.wide figure {
    grid-area: fg;
  }

  section.wide div {
    grid-area: dv;
  }

  /* Wide Left Hand Images – 2 columns
  ------------------------------------------------------------------------------------- */

  section.opp {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "fg fg hd"
      "fg fg dv";
  }

  section.wide h3 {
    grid-area: hd;
  }

  section.wide figure {
    grid-area: fg;
  }

  section.wide div {
    grid-area: dv;
  }

  /*  intro
--------------------------------------------------------------------------------------- */
  section.intro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas: "dv dv dv";
  }

  section.intro h3 {
    grid-area: hd;
  }

  section.intro div {
    grid-area: dv;
  }

  section.intro div h3,
  section.intro div p {
    font-size: 2rem;
  }

  section.intro {
    margin-bottom: 4rem;
  }

  /*  images-two
--------------------------------------------------------------------------------------- */
  section.images-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 1rem;
    grid-template-areas:
      "f1 f2"
      "hd hd"
      "dv dv";
  }

  section.images-two h3 {
    grid-area: hd;
  }

  section.images-two figure {
    grid-area: f1;
  }

  section.images-two figure:nth-of-type(2) {
    grid-area: f2;
  }

  section.images-two div {
    grid-area: dv;
  }

  section.images-two div h3,
  section.images-two div p {
    font-size: 1.5rem;
  }

  /* Two Images – Big + Small Inline 
  ------------------------------------------------------------------------------------ */

  section.big-small {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas:
      "f1 f1 f2 f2 f2 f2"
      "f1 f1 .. .. .. ..";
  }

  section.big-small.one {
    grid-area: f1;
  }

  section.big-small.two {
    grid-area: f2;
  }

  /*  images-three
--------------------------------------------------------------------------------------- */
  section.images-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "hd hd hd"
      "dv dv dv"
      "f1 f2 f3";
  }

  section.images-three h3 {
    grid-area: hd;
  }

  section.images-three figure {
    grid-area: f1;
  }

  section.images-three figure:nth-of-type(2) {
    grid-area: f2;
  }

  section.images-three figure:nth-of-type(3) {
    grid-area: f3;
  }

  section.images-three div {
    grid-area: dv;
  }

  section.images-three div h3,
  section.images-three div p {
    font-size: 1.5rem;
  }

  /*  images-three-plus
--------------------------------------------------------------------------------------- */
  section.images-three-plus {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-areas:
      "f1 f2 f3"
      "d1 d2 d3";
  }

  section.images-three-plus figure {
    grid-area: f1;
  }

  section.images-three-plus figure:nth-of-type(2) {
    grid-area: f2;
  }

  section.images-three-plus figure:nth-of-type(3) {
    grid-area: f3;
  }

  section.images-three-plus div {
    grid-area: d1;
  }

  section.images-three-plus div:nth-of-type(2) {
    grid-area: d2;
  }

  section.images-three-plus div:nth-of-type(3) {
    grid-area: d3;
  }

  section.images-three-plus {
    padding: 0 0 2rem;
  }

  section.images-three-plus div h3,
  section.images-three-plus div p {
    font-size: 1.5rem;
  }

  /* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
  section.full {
    display: block;
    padding: 1rem 0 0;
  }

  section.full figure {
    grid-area: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
    grid-template-areas:
      "f1"
      "im";
  }

  section.full figure img {
    grid-area: im;
  }

  section.full figure figcaption {
    grid-area: f1;
    justify-self: center;
  }

  section.full {
    margin-bottom: 4rem;
  }

  section.full figure img {
    display: block;
  }

  section.full figcaption h3 {
    font-size: 3rem;
  }

  /* two columns
--------------------------------------------------------------------------------------- */
  section.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "fg hd"
      "fg dv";
  }

  /* two columns right image
--------------------------------------------------------------------------------------- */
  section.two-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "hd fg"
      "dv fg";
  }

  /* pull quote
--------------------------------------------------------------------------------------- */
  section.pull {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: "dv";
  }

  section.pull {
    margin-bottom: 4rem;
  }

  .pull p {
    font-size: 2rem;
  }

  /* out of background
--------------------------------------------------------------------------------------- */
  section.colourbox {
    padding: 3rem;
    margin-bottom: 4rem;
  }

  .orange {
    background: #aaa;
  }

  /*  custom section about page
--------------------------------------------------------------------------------------- */
  section.about {
    display: grid;
    padding-top: 5rem;
    grid-template-columns: repeat(6, 1fr);
    min-width: 0;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "hd hd hd hd fg fg"
      "dv dv dv dv fg fg"
      "dv dv dv dv fg fg";
  }

  /*  section.video grid
--------------------------------------------------------------------------------------- */
  section.video {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0;
    background: transparent;
    grid-template-areas:
      "v1 v1 v1 v1"
      "t2 t2 t2 t2";
  }

  section.video figure {
    grid-area: v1;
  }

  section.video div {
    grid-area: t2;
  }

  section.video figure {
    padding: 0;
  }

  section.video div {
    background: transparent;
  }

  section.video p {
    max-width: 32rem;
    color: #e74a11;
  }

  section.video h3 {
    padding-top: 1rem;
  }

  /*  home page auto grid
--------------------------------------------------------------------------------------- */
  section.home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "h1 h1 h2 h2"
      "h3 h3 h4 h4";
  }

  section.home {
    padding: 0 0.5rem 2rem;
  }

  section.home figure.one {
    grid-area: h1;
  }

  section.home figure.two {
    grid-area: h2;
  }

  section.home figure.three {
    grid-area: h3;
  }

  section.home figure.four {
    grid-area: h4;
  }

  /*  projects page auto grid
--------------------------------------------------------------------------------------- */
  section.projects {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas:
      "f1 f1 f2 f2 f2 f2"
      "f3 f3 f3 f3 f4 f4";
  }

  .projects figure.one {
    grid-area: f1;
  }

  .projects figure.two {
    grid-area: f2;
  }

  .projects figure.three {
    grid-area: f3;
  }

  .projects figure.four {
    grid-area: f4;
  }

  /*  project page reflection section
--------------------------------------------------------------------------------------- */
  section.reflection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "rh rh"
      "d1 d2";
  }

  section.reflection h3 {
    grid-area: rh;
  }

  section.reflection div {
    grid-area: d1;
  }

  section.reflection div.two {
    grid-area: d2;
  }

  section.reflection div p a {
    display: block;
  }

  section.brief {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1rem auto;
    grid-column-gap: 3rem;
    grid-row-gap: 0.5rem;
    grid-template-areas:
      "hd hd .. .. hd .."
      "dv dv .. .. .. ..";
  }

  section.three h3 {
    grid-area: hd;
  }

  section.three figure {
    grid-area: fg;
  }

  section.three div {
    grid-area: dv;
  }

  section.three h3 {
    margin-top: -0.6rem;
  }

  section.three div {
    margin-top: 0;
  }
}

/* end 768px media query */

/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
  html {
    font-size: 24px;
  }
}

.blue-container {
  background-color: #01273d;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-text {
  font-family: vg5000, "Gill Sans", "Gill Sans MT", sans-serif;
  font-size: 5rem;
  text-align: center;
  color: #fff9e0;
  margin: 0 auto;
}

.massive {
  font-family: vg5000, "Gill Sans", "Gill Sans MT", sans-serif;
  font-size: 5rem;
  text-align: center;
  color: #f1e7c1;
  margin: 0 auto;
  line-height: 5.8rem;
}

.gigantic {
  font-family: vg5000, "Gill Sans", "Gill Sans MT", sans-serif;
  font-size: 6.7rem;
  text-align: center;
  color: #fff9e0;
  line-height: 6.5rem;
  margin: 2rem;
}

.heading-left {
  font-family: vg5000, "Gill Sans", "Gill Sans MT", sans-serif;
  font-size: 5rem;
  text-align: left;
  color: #fff9e0;
  margin: 0 auto;
  line-height: 4.5rem;
}

.orange-container {
  background-color: #e74a11;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.footer-box {
  background-color: #01273d;
  font-size: 2rem;
  text-align: center;
  color: #fff9e0;
  padding: 2rem;
  min-width: 100vw;
}

.footer-text {
  text-align: center;
  background-color: #01273d;
  color: #f1e7c1;
  font-family: Sen, Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  display: block;
}

.blue-bg {
  margin: 0 auto;
  background: #01273d;
}

.p-about {
  color: #f1e7c1;
  font-family: Sen, Verdana, Geneva, Tahoma, sans-serif;
  font-size: em;
}

figure {
  padding: 2rem;
}

.orange-h2 {
  color: #e74a11;
  font-size: 5rem;
  line-height: 4rem;
  padding-left: 3rem;
  padding-top: 4rem;
  padding-bottom: 0;
}

.blue-home {
  background-color: #01273d;
  min-width: 100vw;
  min-height: 100vh;
}

.figcap-centered {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
}

figure {
  padding: 0.7rem;
}

.h3_right {
  text-align: right;
}

.project-body {
  color: #e74a11;
}

h3 {
  padding-left: 3rem;
  padding-top: 1rem;
}

p {
  padding-right: 0, 2rem;
}

figure {
  padding: 0rem, 2rem;
}

video.body {
  padding-bottom: 4rem;
}

.sub-about {
  font-size: 1.7rem;
}

ol {
  padding-left: 4.2rem;
  line-height: 1.4rem;
}