@layer base {
  :root {
    --font-main: "Raleway", sans-serif;
    --font-heading: "Cormorant Garamond", serif;
    --font-mono: "Fira Mono", monospace;

    --font-color-dark: #0c0c0c;
    --font-color-light: #ffffff;
    --font-color-link: #0000ee;

    --font-size-base: 1rem;
    --font-size-scale: 1.2;
    --font-size-h1: calc(var(--font-size-h2) * var(--font-size-scale) * 1.2);
    --font-size-h2: calc(var(--font-size-h3) * var(--font-size-scale));
    --font-size-h3: calc(var(--font-size-h4) * var(--font-size-scale));
    --font-size-h4: calc(var(--font-size-h5) * var(--font-size-scale));
    --font-size-h5: calc(var(--font-size-h6) * var(--font-size-scale));
    --font-size-h6: var(--font-size-base);
    --font-size-small: calc(var(--font-size-base) / var(--font-size-scale));
  }

  html {
    box-sizing: border-box;
  }

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

  body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    color: var(--font-color-dark);
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: 400;
  }

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  h4 {
    font-size: var(--font-size-h4);
  }

  h5 {
    font-size: var(--font-size-h5);
  }

  h6 {
    font-size: var(--font-size-h6);
  }

  a {
    color: var(--font-color-link);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

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

  svg {
    width: 24px;
    height: 24px;
    margin-right: 0.5em;
    stroke-width: 1.5;
    stroke: orange;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .section {
    margin-bottom: 96px;
  }

  @media (max-width: 1100px) {
    .section {
      margin-bottom: 64px;
    }
  }

  .section h2 {
    font-size: var(--font-size-h1);
    margin-bottom: 32px;
    line-height: 1;
  }

  .section p {
    line-height: 1.75;
    margin-bottom: 2rem;
  }

  .section .pictures-container {
    margin-bottom: 2rem;
  }

  .mono {
    font-family: var(--font-mono);
  }

  /* h/t Scott O'Hara https://css-tricks.com/inclusively-hidden/ */
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

@layer background {
  .background {
    height: 400px;
  }

  .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 600px) {
    .background {
      height: 200px;
    }
  }
}

@layer header {
  header {
    margin-top: -50px;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 100px;
    justify-content: center;
    z-index: 3;
    transition: grid-gap 0.3s;
  }

  main {
    margin: 0 auto;
  }

  .photo {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 300px;
    aspect-ratio: 1;
    box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32, 46, 66, 0.08);
    border-radius: 5px;
    background: white;
    border: 5px solid white;
    z-index: 2;
    transition: width 0.3s, filter 0.3s;
  }

  .photo-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .header-text {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    justify-content: end;
    display: flex;
    flex-direction: column;
    line-height: 2;
    gap: 5px;
  }

  .name {
    font-weight: 400;
    margin-bottom: 10px;
    font-family: "Cormorant Garamond", serif;
    transition: font-size 0.3s;
    line-height: normal;
    color: rgb(51, 51, 51);
  }

  .dates,
  .location {
    color: color-mix(in srgb, #333333, transparent 30%);
    font-family: "Raleway";
    display: flex;
    font-size: 20px;
    align-items: center;
    transition: font-size 0.3s, height 0.3s, opacity 0.3s;
    line-height: 1.75;
  }

  .dates a {
    color: orange;
    margin-inline: 10px;
  }

  .header-text svg {
    margin-right: 0.5em;
    min-width: 1em;
  }

  @media (max-width: 1100px) {
    header {
      gap: 64px;
    }
  }

  @media (max-width: 850px) {
    header {
      grid-gap: 32px;
      margin-left: 16px;
      margin-right: 16px;
    }
  }

  @media (max-width: 1100px) {
    .name {
      font-size: calc(var(--font-size-h2) * 1.1);
    }
  }

  @media (max-width: 610px) {
    .name {
      text-align: center;
      margin-bottom: 24px;
    }
  }

  @media (max-width: 1100px) {
    .dates,
    .location {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 1100px) {
    .photo {
      width: 230px;
    }
  }

  @media (max-width: 610px) {
    .photo {
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      width: 50%;
      height: fit-content;
      justify-self: center;
    }
  }

  @media (max-width: 610px) {
    .header-text {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
      height: fit-content;
      width: fit-content;
      margin-inline: auto;
    }
  }
}

@layer quote {
  .section-quote {
    color: color(srgb 0.517118 0.351941 0.298412);
    font-family: "Cormorant Garamond", serif;
    font-size: var(--font-size-h3);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 1rem;
  }

  @media (max-width: 500px) {
    .section-quote {
      justify-content: start;
    }
  }

  .section-quote p {
    margin-bottom: 0;
    line-height: 1.5;
  }

  .poem {
    max-width: 400px;
    margin: 0 auto;
  }

  .symbol {
    font-family: "times", "times new roman", sans-serif;
    font-size: 3em;
    color: orange;
    line-height: 1 !important;
  }

  @media (max-width: 1100px) {
    .section-quote {
      font-size: var(--font-size-h4);
    }

    .poem {
      max-width: 300px;
    }
  }
}

@layer obituary {
  .section-obituary p {
    margin-bottom: 0;
  }
}

@layer young {
  .pictures-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .pictures-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 610px) {
    .pictures-container {
      grid-template-columns: 1fr;
    }
  }
}

@layer work {
  .section-work ul {
    list-style-position: inside;
  }

  .section-work li {
    margin-bottom: 1rem;
  }
}

@layer family {
  .pictures-container-x1 {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@layer last-way {
}

@layer footer {
  footer {
    display: flex;
    justify-content: center;
  }
  footer img {
    max-width: 64px;
  }
}