/* ==========================================================================
   Nathan Lyon — Portfolio
   Rebuilt from the Webflow site (lyon-design.webflow.io), matching its
   layout, type and spacing. Breakpoints: 991px / 767px / 479px.
   ========================================================================== */

@font-face {
  font-family: "Neue Haas Grotesk Display Regular";
  src: url("../fonts/NeueHaasGroteskDisplay-Reg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #fff;
  --black: #000;
  --grey: #f1f1f1;
  --ink: #1a1b1f;
  --green: #1cbe3c;
  --display: "Neue Haas Grotesk Display Regular", sans-serif;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background-color: var(--white);
  color: var(--ink);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 44px;
  font-weight: 400;
  line-height: 62px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

strong { font-weight: bold; }

a {
  display: block;
  width: 100%;
  background-color: transparent;
  color: var(--ink);
  text-decoration: underline;
  transition: opacity .2s;
}

a:hover { color: #32343a; }
a:active { color: #43464d; }

img {
  display: block;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

/* ---------- Utilities ---------- */

.clearfix::before,
.clearfix::after,
.row::before,
.row::after,
.rich-text::before,
.rich-text::after,
.container::before,
.container::after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

.clearfix::after,
.row::after,
.rich-text::after,
.container::after { clear: both; }

.inline-block {
  display: inline-block;
  max-width: 100%;
}

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

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

.col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }

/* ---------- Navigation ---------- */

.navigation {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0;
  background-color: transparent;
}

.navigation-items {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-self: stretch;
  align-items: center;
  justify-content: flex-start;
}

.columns {
  flex: 1;
  align-self: stretch;
  padding-left: 10px;
  padding-right: 10px;
}

.column {
  display: block;
  flex-direction: column;
  align-items: stretch;
  padding-left: 0;
  padding-right: 0;
}

.logo-link {
  position: relative;
  z-index: 1;
  float: left;
  display: flex;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: #333;
  text-decoration: none;
}

.logo-link:hover { opacity: .8; }
.logo-link:active { opacity: .7; }

.logo-link.is-current {
  flex: 1;
  align-items: center;
}

.nav-name {
  padding-top: 9px;
  padding-bottom: 9px;
  color: var(--black);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
}

/* ---------- Sections ---------- */

.main-section {
  margin-left: 0;
  margin-right: 0;
  padding: 400px 10px 10px;
  background-color: var(--grey);
}

.secondary-hero_section {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 10px 10px;
  background-color: var(--grey);
}

.project-section {
  padding-top: 70px;
  padding-bottom: 0;
}

.main_project-section {
  margin-left: 0;
  margin-right: 0;
  padding: 200px 10px 10px;
  background-color: var(--grey);
}

.project-hero_section {
  margin-left: 0;
  margin-right: 0;
  padding: 40px 0 10px;
  background-color: var(--grey);
}

.project-template_section { padding: 70px 20px; }

.spacer {
  margin-left: 0;
  margin-right: 0;
  padding: 100px 10px 10px;
  background-color: var(--grey);
}

.additional-section {
  margin-left: 0;
  margin-right: 0;
  padding: 0 10px 10px;
  background-color: var(--grey);
}

.proiect-div {
  position: relative;
  z-index: 2;
}

/* ---------- Layout blocks ---------- */

.hero-column,
.hero_project-column {
  flex: 1;
  align-self: stretch;
  padding-left: 0;
  padding-right: 0;
}

.div-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.div-block-3,
.div-block-3-copy {
  display: flex;
  align-items: center;
}

.div-block-4 {
  display: flex;
  justify-content: space-between;
}

.div-block-5 {
  display: block;
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  height: 100%;
  padding-bottom: 10px;
}

.hero-title_div {
  display: block;
  padding-bottom: 70px;
  padding-left: 10px;
  padding-right: 10px;
}

.collection-item { padding-bottom: 70px; }

.spacing { height: 20px; }

/* ---------- Type ---------- */

.heading {
  display: inline-block;
  float: left;
  clear: none;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--black);
  font-family: var(--display);
  line-height: 46px;
}

.heading.center {
  float: none;
  text-align: center;
}

.heading-right {
  display: inline-block;
  float: right;
  clear: none;
  margin-top: 0;
  margin-bottom: 0;
  opacity: .4;
  color: var(--black);
  font-family: var(--display);
  line-height: 46px;
}

.heading-3 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--display);
  font-size: 32px;
  line-height: 40px;
}

.heading-4 {
  font-family: var(--display);
  font-size: 26px;
  line-height: 40px;
}

.heading-4.no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--black);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.paragraph.available-text { color: var(--green); }

.paragraph.no-spacing {
  margin-top: 0;
  margin-bottom: 0;
}

.paragraph-light {
  margin-bottom: 10px;
  opacity: .6;
  font-family: var(--display);
}

.bold-text-2 { font-size: 16px; }

.link {
  text-align: left;
  font-family: var(--display);
}

.link.right {
  overflow: visible;
  text-align: right;
}

/* ---------- Components ---------- */

.button-2 {
  display: inline-block;
  width: auto;
  margin-top: 20px;
  margin-right: 10px;
  padding: 4px 12px;
  border: 1px solid var(--black);
  border-radius: 60px;
  background-color: transparent;
  color: var(--black);
  font-family: var(--display);
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

.availability-div {
  width: 10px;
  height: 10px;
  margin-top: -10px;
  margin-left: 6px;
  margin-right: 3px;
  border-radius: 20px;
  background-color: var(--green);
}

/* Project Index: image that fades in when a project title is hovered */
.div-block-2 {
  position: fixed;
  inset: 10% 10px 10% 33%;
  z-index: 1;
  display: block;
  opacity: 0;
  background-position: 50%;
  background-size: cover;
  pointer-events: none;
  transition: opacity .2s ease-in;
}

.div-block-2.is-visible { opacity: 1; }

/* Project Index: "Other Work" table */
.index-additional_div {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--black);
}

.index-add_project-div {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--black);
}

.div-block-9 {
  display: block;
  flex: 1;
  overflow: visible;
}

.div-block-10 { flex: 1; }

.div-block-11 {
  flex: 1;
  text-align: right;
}

/* Project pages: image stack */
.project-main_image {
  padding-left: 120px;
  padding-right: 120px;
}

.project-second_image,
.project-tertiary_image,
.project-fourth_image {
  padding-left: 20px;
  padding-right: 20px;
}

/* Password page (served by functions/_middleware.js) */
.password-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.password-input {
  width: 260px;
  max-width: 100%;
  padding: 4px 16px;
  border: 1px solid var(--black);
  border-radius: 60px;
  background-color: transparent;
  color: var(--black);
  font-family: var(--display);
  font-size: 16px;
  line-height: 28px;
}

.password-input::placeholder { color: #0006; }
.password-input:focus { outline: 2px solid var(--black); outline-offset: 2px; }

.password-form .button-2 {
  margin: 0;
  font-size: 16px;
}

.password-error {
  margin-top: 15px;
  color: #d0342c;
}

.password-error[hidden] { display: none; }

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

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--white);
}

.div-block-7 {
  display: flex;
  align-self: stretch;
  justify-content: space-between;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--grey);
}

/* ==========================================================================
   Tablet — 991px
   ========================================================================== */

@media screen and (max-width: 991px) {
  .container { max-width: 728px; }

  .col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }

  .navigation { padding: 10px; }
  .columns { padding-left: 0; padding-right: 0; }

  .heading,
  .heading-right {
    font-size: 38px;
    line-height: 40px;
  }

  .project-section { padding-top: 50px; }

  .collection-item,
  .hero-title_div { padding-bottom: 50px; }

  .project-main_image {
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer { padding-top: 0; }

  .column-3,
  .column-4,
  .column-5 { padding-bottom: 20px; }

  .column-9 { padding-left: 0; }

  .index-additional_div { padding-bottom: 50px; }

  .index-add_project-div { align-items: flex-start; }
}

/* ==========================================================================
   Mobile landscape — 767px
   ========================================================================== */

@media screen and (max-width: 767px) {
  .container { max-width: none; }

  .col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .col-small-6 { width: 50%; }

  .logo-link { padding-left: 0; }
  .navigation { padding: 10px; }

  .heading {
    font-size: 34px;
    line-height: 36px;
  }

  .heading-3 {
    font-size: 30px;
    line-height: 32px;
  }

  .heading-right {
    font-size: 34px;
    line-height: 36px;
  }

  .project-hero_section {
    margin-left: 15px;
    margin-right: 15px;
  }

  .project-main_image {
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-template_section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .project-fourth_image {
    padding-left: 0;
    padding-right: 0;
  }

  .column-6,
  .column-7,
  .column-8 { padding-left: 0; }
}

/* ==========================================================================
   Mobile portrait — 479px
   ========================================================================== */

@media screen and (max-width: 479px) {
  .col { width: 100%; }
  .col-tiny-6 { width: 50%; }

  .main-section { padding-top: 400px; }

  .navigation {
    padding-left: 10px;
    padding-right: 10px;
  }

  .heading {
    width: 100%;
    font-size: 26px;
    line-height: 30px;
  }

  .project-section { padding-top: 40px; }

  .hero-title_div { float: none; }

  .heading-right {
    float: left;
    font-size: 26px;
    line-height: 30px;
  }

  .secondary-hero_section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 10px;
  }

  .div-block-4 { flex-direction: column; }

  .project-main_image,
  .project-second_image,
  .project-template_section,
  .project-tertiary_image {
    padding-left: 0;
    padding-right: 0;
  }

  .button-2 {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .div-block-8 {
    display: flex;
    flex-direction: row;
    padding-top: 30px;
  }

  .additional-section,
  .spacer { padding-top: 400px; }

  .index-additional_div { float: none; }

  .index-add_project-div { flex-direction: column; }

  .div-block-11 { margin-top: 20px; }
}