/*=============================================================================
  Fonts
=============================================================================*/

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/nunito-v26-latin-200.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito-v26-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-v26-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/nunito-v26-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito-v26-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-v26-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/nunito-v26-latin-800.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito-v26-latin-900.woff2') format('woff2');
}


/*=============================================================================
  Custom Properties
=============================================================================*/

:root {
	--scale:			1.333;

	--ff-base: 			'Nunito', sans-serif;

	--fs-small:			1rem;
	--fs-regular: 	1rem;
	--fs-medium: 		calc(var(--fs-regular) * var(--scale));
	--fs-large: 		calc(var(--fs-medium) * var(--scale));
	--fs-icon:			calc(var(--fs-regular) * var(--scale));

	--fw-x-light:		200;
	--fw-light:			300;
	--fw-regular:		400;
	--fw-medium:		500;
	--fw-semibold:  600;
	--fw-bold:			700;
	--fw-heavy:			800;
	--fw-black:			900;

	--lh-regular:		1.5;

	--p-base:			  var(--fs-regular);
	--p-medium:			calc(var(--p-base) * 3);
	--m-section:		calc(var(--fs-regular) * 3);
	--m-content:		calc(var(--fs-regular) * 3);

	--tw-regular:		640px;
	--tw-short:			320px;

	--img-min:			var(--tw-short);
	--site-max:			1200px;

  --clr-bg:       rgb(28 74 91);
}

/*=============================================================================
  General
=============================================================================*/

html {
  height: 100%;
	box-sizing: border-box;
}

@media (width > 40em) {
	:root {
		--fs-regular: 1.125rem;
	}
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font: var(--fw-regular) var(--fs-regular)/var(--lh-regular) var(--ff-base);
  min-height: 100%;
	margin: 0;
}

h2 {
  font-size: var(--fs-medium);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin-block: 0 var(--p-base);
  max-width: 66vw;
  text-wrap: pretty;
}

h3 {
  font-size: var(--fs-regular);
  font-weight: var(--fw-bold);
  margin-block: 0 var(--p-base);
  max-width: var(--tw-short);
  text-wrap: pretty;
}

header h2,
header h3 {
  margin-block: 0;
}

p {
  margin-block: 0 1lh;
  max-width: var(--tw-regular);
  text-wrap: pretty;

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

em {
  font-style: normal;
  font-weight: var(--fw-bold);
}

ul {
  margin-block: 0;
  padding-inline-start: 1em;

  & li {
    margin-block-end: 1lh;
    max-width: var(--tw-regular);
    text-wrap: pretty;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

dl {
  margin-block: 0;

  & dt {
    font-weight: var(--fw-bold);
  }

  & dd {
    margin-block: 0 1em;
    margin-inline: 0;
    max-width: var(--tw-short);
  }
}

a {
  color: inherit;
}

address {
  font-style: normal;

  & a {
    display: block;
  }
}

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

svg {
  display: block;
    vertical-align: middle;
    height: 1em;
    fill: currentColor;
}

body > svg {
  display: none;
}

/*=============================================================================
  Components
=============================================================================*/

.logo {
  font-size: var(--fs-large);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-block: 0;

  & svg {
    margin-left: 0.0666em;
    margin-bottom: 0.333em;
  }

  & span {
    display: block;
    font-size: 0.6667em;
    font-weight: var(--fw-regular);
    line-height: 1.2;
  }
}

.container {
  container-type: inline-size;
}

.inline-list {
  list-style: none;
  padding: 0;
  max-width: var(--tw-short);

  & li {
    display: inline-block;
    margin-block: 0;

    &:not(:last-child):after {
      content: ",";
    }
  }
}

.link-list {
  list-style: none;
  padding: 0;

  & li {
    margin: 0;
  }
}

.icon-link-list {
  display: flex;
  gap: var(--fs-icon);
  list-style: none;
  padding: 0;

  & li {
    line-height: 1;
    margin-block-end: 0;
  }
}

.icon-link {
  display: inline-block;
  font-size: var(--fs-icon);
  color: inherit;
  text-decoration: none;
}

.icon-button {
  font-size: var(--fs-icon);
  border: none;
  background-color: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

/*=============================================================================
  Main Layout
=============================================================================*/

.main-grid {
  --full: minmax(1rem, 1fr);
  --content: min(100% - var(--p-base) * 2, var(--site-max));

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: [full-start] var(--full) [content-start] var(--content) [content-end] var(--full) [full-end];
  row-gap: var(--m-section);
}

.main-grid-content {
  grid-column: content;
}

.main-grid-full {
  display: grid;
  grid-auto-rows: min-content;
  grid-template-columns: subgrid;
  grid-column: full;
  row-gap: var(--m-content);
}

.main-section {

}

.main-section__header {
  padding: var(--p-base);
  margin-block-end: var(--p-base);
}

.main-section__body {
  padding: var(--p-base);
  margin-block-end: var(--p-base);
}

/*=============================================================================
  Site
=============================================================================*/

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--p-base);
  padding: var(--p-base);
  padding-block-start: calc(var(--p-base) * 1.5);
}

.site-to-top {
  display: flex;
  justify-content: flex-end;
  padding: var(--p-base);
}

.site-footer {
  background-color: var(--clr-bg);
  color: white;
  padding-block: var(--p-medium);

  & a {
    text-decoration: none;
  }
}

.site-footer__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--p-medium);
  padding: var(--p-base);
}

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--p-medium);
}

/*=============================================================================
  Home View
=============================================================================*/

.home-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: var(--p-medium);
  background-color: var(--clr-bg);;
  color: white;
  padding: var(--p-medium);

  & p {
    margin-block: 0;
    font-size: var(--fs-medium);
    font-weight: var(--fw-bold);
    text-wrap: pretty;
    max-width: var(--tw-regular);
  }

  & button {
      font-family: inherit;
      font-size: var(--fs-regular);
      font-weight: var(--fw-bold);
      color: white;
      background-color: transparent;
      border: none;
      outline: 2px solid white;
      padding: 0.5em 1em;
      cursor: pointer;

      &:hover,
      &:focus-visible {
        background-color: white;
        color: black;
    }
  }
}

.home-projects__header {
  padding: var(--p-base);
  margin-block-end: var(--p-base);
}

.home-projects__grid {
  /*--max-cols:       3;
  --min-col-width:  var(--img-min);
  --max-col-width:  calc((100% - var(--max-cols) * var(--p-base)) / var(--max-cols));
  --content:        repeat(auto-fit, minmax(min(clamp(var(--min-col-width), var(--max-col-width), 100%), 100%), 1fr));

  display: grid;
  grid-template-columns: [full-start] var(--content) [full-end];
  gap: var(--p-base);*/

  display: grid;
  gap: var(--p-base);

  & a {
    display: block;
    aspect-ratio: 1 / 1;
  }

  @media (min-width: calc(320px * 2 + 3rem)) {
    grid-template-columns: 1fr 1fr;
  }

  @media (min-width: calc(320px * 3 + 4rem)) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.home-services {
  background-color: var(--clr-bg);
  color: white;
  padding: var(--p-medium);
}

.home-services__header {
  margin-block-end: var(--p-medium);
}

.home-services__body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tw-short)), 1fr)); */
  gap: var(--p-medium);
}

.home-about__grid {
  display: grid;
  gap: var(--p-base);

  @media (min-width: calc(320px * 3 + 4rem)) {
    grid-template-columns: 1fr 1fr;
  }

  /*@container (width > 55em) {
    grid-template-columns: 1fr 1fr 1fr;

    & .home-about__image {
      grid-column: 1 / 3;
    }

    & .home-about__body {
      grid-column: 1 / 3;
    }
  }*/

}

.home-about__body {
  padding: var(--p-base);
}

.home-about__header {
  margin-block-end: var(--p-base);
}

.home-about__tagline {
  /* font-size: var(--fs-medium); */
}

.inquiry-dialog {
  width: min(100%, var(--tw-regular));
  border: none;
}

.inquiry-dialog::backdrop {
  background: rgba(16, 16, 16, 0.7);
}

.inquiry-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--p-base);
}

.inquiry-form {
  display: grid;
  gap: var(--p-base);
}

.inquiry-form label {
  display: block;
  font-family: inherit;
  font-size: inherit;
  padding: .5em 0;
}

.inquiry-form input,
.inquiry-form textarea {
  font-size: inherit;
  font-family: monospace;
  padding: .5em;
  outline-color: var(--clr-bg);
}

.inquiry-form input {
  width: min(100%, 40ch);
}

.inquiry-form textarea {
  width: 100%;
  min-height: 6lh;
  resize: none;
  text-wrap: pretty;
}

.inquiry-form button {
      font-family: inherit;
      font-size: var(--fs-regular);
      font-weight: var(--fw-bold);
      color: var(--clr-bg);
      background-color: transparent;
      border: none;
      outline: 2px solid var(--clr-bg);
      padding: 0.5em 1em;
      cursor: pointer;

      &:hover,
      &:focus-visible {
        background-color: var(--clr-bg);
        color: white;
    }
  }


/*=============================================================================
  Project View
=============================================================================*/

.project-info__grid {
  display: grid;
  gap: var(--p-base);

  @media (min-width: calc(320px * 3 + 4rem)) {
    display: grid;
    grid-template-columns: 1fr var(--tw-short);
  }
}

.project-info__header,
.project-info__description,
.project-info__properties {
  padding: var(--p-base);
}

.project-info__image {
  aspect-ratio: 3 / 2;
  margin-block-end: var(--p-base);
}

.project-info__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p-base);
  margin-block-end: var(--p-base);
}

.project-info__properties {
  font-size: var(--fs-small);

  @container (width > 480px) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: min-content;
    gap: 0.75em 2em;

    & dd {
      margin-block: 0;
    }
  }
}

.project-impressions__header {
  padding: var(--p-base);
  margin-block-end: var(--p-base);
}

.project-impressions__grid {
  display: grid;
  gap: var(--p-base);

  @media (orientation: landscape) {
    grid-template-columns: 1fr 1fr;
  }
}