:root {
  --color-bg:          #ffffff;
  --color-default:     #002533;
  --color-primary:     #9bcac7;
  --color-dim:         #576675;

  --font-sans:       "Inter Tight", "Helvetica", Arial, sans-serif;
  --font-size:       1.25rem;
  --font-size-lg:    clamp(2.2rem, 2.1rem + 0.4444vw, 2.5rem);
  --line-height:     1.45;
  --line-height-lg:  1.14;

  --padding:         1rem;
  --padding-sm:      calc(0.5 * var(--padding));
  --padding-md:      calc(2.5 * var(--padding));
  --padding-lg:      calc(4   * var(--padding));
  --padding-xl:      calc(7.5 * var(--padding));
  --padding-xxl:     calc(14  * var(--padding));
  --padding-section: var(--padding-md);

  --container: calc(90 * var(--padding));
}

/* Fonts */

@font-face {
  font-display: swap;
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/inter-tight-v7-latin-500.woff2") format("woff2");
}

/* Base */

* {
  box-sizing: border-box;
  font-feature-settings: "dlig" 1, "calt" 1;
}

body {
  font-size: var(--font-size);
  font-family: var(--font-sans);
  line-height: var(--line-height);
  background-color: var(--color-bg);
  color: var(--color-default);
  min-height: 100vh;
  padding-block-start: var(--padding-lg);
  margin: 0 var(--padding-lg);

  @media (max-width: 48rem) {
    margin-inline: var(--padding);
  }

  &.dark {
    --color-default: #ffffff;
    --color-bg:      #002533;
  }
}

/* Grid */

.grid {
  display: grid;
  grid-template-columns: [full-start] 1fr [content-start] min(100%, var(--container)) [content-end] 1fr [full-end];
}

section {
  grid-column: content;
  display: grid;
  grid-template-columns: 4fr 6fr;
  column-gap: var(--padding);

  &:not(:last-child) {
    margin-block-end: var(--padding-section);
  }

  @media (max-width: 48rem) {
    grid-template-columns: 1fr;
  }
}

.full {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  background: var(--color-default);
  color: var(--color-bg);
  margin-inline: calc(-1 * var(--padding-lg));
  padding-inline: var(--padding-lg);

  @media (max-width: 48rem) {
    margin-inline: calc(-1 * var(--padding));
    grid-column: content;
    padding-inline: var(--padding);
  }
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: -1%;
  text-wrap: balance;
  margin-block: 0;
}

h2 {
  margin-block-end: var(--padding-lg);
}

p {
  margin-block: var(--padding);
}

ol, ul {
  margin-block: var(--padding) var(--padding-lg);
}

main a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
  transition: all 0.25s ease-in-out;
  transition-property: color;

  &:hover {
    color: var(--color-primary);
  }

  &:after {
    content: " ->";
  }
}

.heading {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: -1%;
}

/* Header */

header.nav {
  & .title {
    grid-column: content;
    display: block;
    line-height: 1;

    & svg {
      fill: var(--color-default);
      width: calc(12.5 * var(--padding));
    }
  }
}

/* Footer */

footer {
  border-top: 1px solid var(--color-primary);
  padding-block: var(--padding-xxl);
  text-align: center;
  max-width: var(--container);
  margin: 0 auto;

  & svg {
    fill: var(--color-default);
    width: calc(5.5 * var(--padding));
  }

  .dark & {
    border: none;
  }
}

/* Block Elements */

hr {
  margin-block: var(--padding-xxl);
  max-width: var(--padding-xxl);
  width: 100%;
  border: none;
  border-top: 1px solid var(--color-primary);
}

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

figure {
  display: block;
  max-width: 100%;
  margin: 0;
  margin-block-end: var(--padding);

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

/* Sections */

.intro {
  margin-block-start: var(--padding-xl);

  @media (min-width: 48rem) {
    margin-block-start: var(--padding-xxl);
  }

  & h1 {
    color: var(--color-dim);
    margin-block-end: var(--padding-md);
  }

  & .tag {
    margin-block: 0 var(--padding);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
    letter-spacing: 10%;
    text-transform: uppercase;

    @media (min-width: 48rem) {
      grid-column: 2;
      order: -1;
    }
  }

  & .description {
    margin-block: 0;
  }
}

.principals {
  padding-block: var(--padding-lg) var(--padding-xxl);

  & .people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-lg);

    @media (max-width: 62rem) {
      grid-template-columns: 1fr;
    }

    & .position {
      color: var(--color-primary);
      margin-block: 0 var(--padding-md);

      &:before {
        content: "● ";
      }
    }
  }
}

.work {
  padding-block: var(--padding-lg);

  & article {
    margin-block-end: var(--padding-lg);
  }

  & a.heading {
    display: block;
    font-family: var(--font-sans);
    text-decoration: none;
    text-align: end;

    &:hover {
      color: var(--color-primary);
    }

    &:after {
      content: " ->";
    }
  }
}

.contact {
  padding-block: var(--padding-lg) var(--padding-xxl);
  background-image: url(/img/gear-outline.svg);
  background-repeat: no-repeat;
  background-position: bottom left;

  & .connect {
    margin-block-end: var(--padding-lg);
  }

  & form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding);

    @media (max-width: 48rem) {
      grid-template-columns: 1fr;
    }

    & label {
      display: block;
      margin-block-end: var(--padding-sm);
    }

    & input,
    & textarea {
      font-size: var(--font-size);
      font-family: var(--font-sans);
      line-height: var(--line-height);
      color: var(--color-dim);
      width: 100%;
      outline: 0;
      border: 0;
      border-block-end: 1px solid var(--color-primary);
      margin-block-end: var(--padding);
      padding: 0;

      &:focus {
        border-color: var(--color-default);
      }
    }

    & textarea {
      resize: none;
      background: transparent;
    }

    & button {
      justify-self: end;
      font-family: var(--font-sans);
      transition: all 0.25s ease-in-out;
      cursor: pointer;
      padding: 0;
      background: none;
      color: var(--color-default);
      border: none;
      white-space: nowrap;

      &:hover {
        color: var(--color-primary);
      }

      &:after {
        content: " ->";
      }
    }

    @media (min-width: 48rem) {
      & .subject,
      & .message,
      & button {
        grid-column: span 2;
      }
    }
  }
}

.bio {
  padding-block: var(--padding-xxl) var(--padding-xxl);
  gap: var(--padding-md);

  @media (min-width: 48rem) {
    grid-template-columns: 1fr 1fr;
  }

  figure img {
    @media (min-width: 62rem) {
      max-width: 60%;
    }
  }

  div {
    @media (min-width: 80rem) {
      padding-inline-end: var(--padding-xl);
    }
  }

  & .position {
    color: var(--color-primary);
    margin-block: 0 var(--padding-md);

    &:before {
      content: "● ";
    }
  }

  & a.heading {
    display: block;
    margin-block-start: var(--padding-xl);
    text-align: end;
  }
}