@layer component {
  .home {
    --space-1: 0.75rem;
    --space-2: 1.5rem;
    --space-3: 2.5rem;
    --space-4: 4rem;
    --space-5: 6rem;

    --br-search: 8px;
    --br-nav: 8px;

    --clear-button-height: calc(32 / 16 * 1rem);
    --clear-icon-size: calc(20 / 16 * 1rem);

    --chevron-icon-width: calc(24 / 16 * 1rem);

    --pad-inline-start-input: 16px;
    --pad-inline-end-input: 16px;

    --font-size-lede: var(--fs-18);
    --font-size-search: var(--fs-18);
    --font-size-nav-1: var(--fs-16);
    --font-size-nav-2: var(--fs-18);
    --font-size-nav-3: var(--fs-20);

    @media (width >= calc(600 / 16 * 1rem)) {
      --br-search: 32px;
      --br-nav: 12px;

      --chevron-icon-width: calc(26 / 16 * 1rem);

      --pad-inline-start-input: 26px;
      --pad-inline-end-input: 8px;

      --font-size-lede: var(--fs-24);
      --font-size-search: var(--fs-20);
      --font-size-nav-1: var(--fs-18);
      --font-size-nav-2: var(--fs-20);
      --font-size-nav-3: var(--fs-22);
    }

    /* OG background */
    /* background-color: var(--color-main-bg);

    /* Subtle lightness-based Linear Gradient */
    background: linear-gradient(
      to bottom,
      hsl(var(--hue-primary), 25%, 95%) 0%,
      hsl(var(--hue-primary), 15%, 93%) 60%,
      hsl(var(--hue-primary), 15%, 91%) 100%
    );

    /* Similar to previous, but more color-based shifting */
    /* background: linear-gradient(
      to bottom,
      hsl(var(--hue-primary), 30%, 96%) 0%,
      hsl(calc(var(--hue-primary) + 5), 25%, 94%) 50%,
      hsl(calc(var(--hue-primary) - 5), 20%, 92%) 100%
    ); */

    /* Purple and Magenta BLOBS - worth experimenting with! */
    /* background:
      radial-gradient(
        600px circle at 20% 10%,
        hsl(230, 70%, 80%, 0.15),
        transparent 70%
      ),
      radial-gradient(
        500px circle at 80% 30%,
        hsl(320, 70%, 75%, 0.1),
        transparent 70%
      ),
      linear-gradient(
        to bottom,
        hsl(var(--hue-primary), 30%, 96%) 0%,
        hsl(calc(var(--hue-primary) + 5), 25%, 94%) 50%,
        hsl(calc(var(--hue-primary) - 5), 20%, 92%) 100%
      ); */

    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'header'
      'main';

    .home__utility {
      grid-area: header;
    }

    .home__utility nav {
      display: flex;
      padding-inline: var(--vertical-padding);
      margin-block-start: var(--vertical-padding);
    }

    .home__account-link {
      margin-inline-start: auto;
    }

    .home__account-icon {
      width: calc(28 / 16 * 1rem);
      fill: transparent;
      stroke: hsl(var(--hue-primary), 22%, 70%);
      transition: 100ms ease-in-out;
      transition-property: fill, stroke;

      &:hover {
        fill: hsl(var(--hue-primary), 28%, 60%);
        stroke: hsl(var(--hue-primary), 28%, 60%);
      }

      @media (width >= calc(600 / 16 * 1rem)) {
        width: calc(36 / 16 * 1rem);
      }
    }

    .home__inner {
      grid-area: main;
      width: min(
        calc(100% - (2 * var(--vertical-padding))),
        calc(1200 / 16 * 1rem)
      );
      margin-inline: auto;
      text-align: center;

      display: grid;
      grid-template-rows:
        auto /* brand */
        auto /* search */
        1fr /* elastic space */
        auto /* primary nav */
        auto; /* secondary nav */
      grid-template-areas:
        'brand'
        'search'
        '.'
        'nav-primary'
        'nav-secondary';
    }

    .home__brand {
      grid-area: brand;
      margin-block-start: var(--space-1);
      display: grid;

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-start: var(--space-3);
      }
    }

    .home__logo {
      width: clamp(
        18.75rem,
        9.722222222222223rem + 37.03703703703704vw,
        37.5rem
      );
      margin-inline: auto;
    }

    .home__lede {
      margin-block-start: var(--space-1);
      color: hsl(var(--hue-primary), 14%, 35%);
      max-width: 42ch;
      justify-self: center;
      line-height: 1.5;
      font-size: var(--font-size-lede);

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-start: var(--space-2);
      }
    }

    .home__name {
      text-decoration: 2px underline hsl(var(--hue-primary), 90%, 85%);
      text-underline-offset: 6px;
    }

    .home__search {
      grid-area: search;
      margin-block-start: var(--space-2);

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block-start: var(--space-3);
      }
    }

    .home__form {
      max-width: 800px;
      margin-inline: auto;
      position: relative;
    }

    .home__search-control {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;

      border-radius: var(--br-search);
      overflow: hidden;

      background: white;
      box-shadow:
        0 0 0 1px hsl(var(--hue-primary), 15%, 85%),
        0 10px 25px -12px hsl(var(--hue-primary), 30%, 40%, 0.12);

      transition: 50ms ease-in-out;
      transition-property: box-shadow, border-radius;

      &:focus-within {
        box-shadow:
          0 0 0 1px hsl(var(--hue-primary), 45%, 50%, 0.5),
          0 12px 30px -10px hsl(var(--hue-primary), 40%, 50%, 0.18);
      }

      &:has(+ .search__autocomplete:not([hidden])) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .home__search-input {
      border: none;
      background: transparent;

      padding-inline: var(--pad-inline-start-input)
        var(--pad-inline-end-input);
      padding-block: 16px;
      font-size: var(--font-size-search);

      outline: none;
      min-width: 0;

      &:not(:placeholder-shown) + .home__clear-button {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .home__clear-button {
      background: transparent;
      border: none;
      cursor: pointer;

      height: var(--clear-button-height);
      width: var(--clear-button-height);
      margin-inline-end: 8px;
      display: grid;
      place-content: center;
      pointer-events: none;
      opacity: 0;
      transition: 100ms ease-in-out;
      transition-property: opacity;

      &:hover .search__clear-icon path {
        stroke: var(--color-clear-button-hover);
      }

      &:focus {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .search__clear-icon {
      height: var(--clear-icon-size);
      width: var(--clear-icon-size);

      & path {
        transition: stroke 100ms ease-in-out;
      }
    }

    .home__submit-button-wrapper {
      background: hsl(var(--hue-primary), 60%, 92%);
      height: 100%;
      transition: 150ms ease-in-out;
      transition-property: background;

      &:hover,
      &:focus-within {
        background: hsl(var(--hue-primary), 60%, 88%);
      }
    }

    .home__submit-button {
      border: none;
      cursor: pointer;

      padding-inline: 16px;
      height: 100%;
      border-radius: 0 var(--br-search) var(--br-search) 0;

      &:focus {
        outline-offset: -2px;
      }
    }

    .search__autocomplete {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;

      list-style: none;
      padding: 0;

      border-top: none;
      border-radius: 0 0 12px 12px;
      padding-block: 8px 12px;
      background: hsl(var(--hue-primary), 40%, 90%);
      text-align: start;

      box-shadow:
        0 0 0 1px hsl(var(--hue-primary), 45%, 50%, 0.5),
        0 12px 30px -10px hsl(var(--hue-primary), 40%, 50%, 0.18);
    }

    .search__autocomplete li {
      padding: 8px var(--pad-inline-start-input);
      cursor: pointer;
      font-size: var(--font-size-search);
    }

    .search__autocomplete li.active,
    .search__autocomplete li:hover {
      background: hsl(var(--hue-primary), 48%, 65%);
      color: var(--c-white);
    }

    .home__primary-nav {
      grid-area: nav-primary;
      margin-block-start: var(--space-4);
    }

    .home__primary-nav ul {
      display: grid;
      grid-auto-rows: 1fr;
      gap: 12px;
      grid-template-columns: repeat(2, 1fr);
      max-width: 640px;
      margin-inline: auto;
      padding: 0;
      list-style: none;

      @media (width >= calc(600 / 16 * 1rem)) {
        gap: 16px;
      }
    }

    .home__primary-nav li,
    .home__secondary-nav li {
      font-size: var(--font-size-nav-2);
    }

    /* .home__primary-nav li:nth-child(-n + 2) a {
      font-weight: 600;
      font-size: var(--font-size-nav-3);
    } */

    .home__primary-nav a {
      display: grid;
      grid-template-columns: auto var(--chevron-icon-width);
      gap: 4px;
      place-content: center;
      padding: 16px;
      background: hsl(var(--hue-primary), 5%, 98%);
      border: 1px solid hsl(var(--hue-primary), 35%, 85%);
      border-radius: var(--br-nav);
      text-decoration: none;
      color: inherit;
      font-weight: 500;
      transition: 150ms ease-in-out;
      transition-property: background, border-color;
      height: 100%;
      word-break: break-word;

      &:hover {
        background: hsl(var(--hue-primary), 30%, 96%);
        border-color: hsl(var(--hue-primary), 45%, 75%);
      }

      @media (hover: hover) {
        &:hover svg {
          transform: translateX(4px);
        }
      }

      @media (width >= calc(600 / 16 * 1rem)) {
        padding: 22px;
      }
    }

    .home__primary-nav svg {
      flex-shrink: 0;
      width: var(--chevron-icon-width);
      align-self: center;
      stroke-width: 1.5;
      transition: transform 150ms ease-in-out;
      will-change: transform;
    }

    .home__secondary-nav {
      grid-area: nav-secondary;
      margin-block: var(--space-3) var(--space-2);

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block: var(--space-4) var(--space-2);
      }
    }

    .home__secondary-nav ul {
      padding: 0;
      list-style-type: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;

      & > :first-child {
        justify-self: end;
      }

      & > :last-child {
        justify-self: start;
      }
    }

    .home__secondary-nav a {
      font-size: var(--font-size-nav-1);
      font-weight: 600;
      text-decoration: none;
      color: hsl(var(--hue-primary), 14%, 60%);
      margin: 0 0.75rem;
      text-underline-offset: 3px;
      transition: color 100ms ease-in-out;

      &:hover {
        color: hsl(var(--hue-primary), 14%, 40%);
        text-decoration: 2px underline;
      }
    }
  }
}