@layer page {
  .home-hero {
    --fndn-sun-x: calc(var(--fndn-grid-margin) + 9 * var(--fndn-grid-step));
    --fndn-afterglow-size: 130% 42%;
    --home-hero-top: max(calc(var(--fndn-header-height) + var(--fndn-size-16) - var(--fndn-body-cap)), calc(var(--fndn-viewport-height) * 0.44 - var(--fndn-leading-body) - var(--fndn-space-kicker) + var(--fndn-body-descent) - 0.34 * var(--fndn-text-display)));
    --home-hero-baseline: calc(var(--home-hero-top) + var(--fndn-body-cap) + var(--fndn-font-cap-height) * (var(--fndn-text-body) + var(--fndn-text-display)) + var(--fndn-space-kicker) + var(--fndn-headline-extra-lines) * var(--fndn-leading-display));
    --home-hero-meta-baseline: calc(var(--home-hero-baseline) + var(--fndn-space-meta) + var(--fndn-font-cap-height) * var(--fndn-text-body) + var(--fndn-leading-body));
    --home-hero-height: max(var(--fndn-viewport-height), 35rem);
    position: relative;
    height: var(--home-hero-height);
    overflow: clip;
    view-timeline: --fndn-sky-leading block;
    view-timeline-inset: 0px;

    & > .fndn-c-sky {
      background-image: radial-gradient(ellipse 42% 34% at var(--fndn-sun-x) 100%, rgb(var(--fndn-haze-tint-rgb) / 0.16), rgb(var(--fndn-haze-tint-rgb) / 0) 72%), radial-gradient(ellipse 52% 70% at var(--fndn-sun-x) 100%, rgb(var(--fndn-haze-light-rgb) / 0.14), rgb(var(--fndn-haze-rgb) / 0.28) 38%, rgb(var(--fndn-haze-rgb) / 0) 72%), linear-gradient(to bottom, var(--fndn-sky-zenith), var(--fndn-sky-high) 28%, var(--fndn-sky-mid) 50%, var(--fndn-sky-mid) 70%, var(--fndn-sky-horizon));
    }

    & .fndn-c-guides {
      --fndn-y-baseline: var(--home-hero-meta-baseline);
      --fndn-y-ruler: calc(var(--home-hero-top) + var(--fndn-body-cap));
      --fndn-sun-radius: min(var(--home-hero-height) - var(--home-hero-meta-baseline), var(--fndn-sun-limit));
    }

    & h1 {
      margin-block-start: calc(var(--fndn-space-kicker) - var(--fndn-body-descent) - var(--fndn-display-cap));
      margin-inline-start: -0.035em;
    }

    & dl {
      margin-block-start: calc(var(--fndn-space-meta) - var(--fndn-display-descent) - var(--fndn-body-cap));
    }

    & dd {
      margin: 0;
    }

    @media (width < 48rem) {
      --fndn-sun-x: calc(var(--fndn-grid-margin) + 3 * var(--fndn-grid-step) - var(--fndn-grid-gutter) / 2);
      --fndn-afterglow-size: 170% 30%;
      --home-hero-top: calc(var(--fndn-safe-top) + var(--fndn-header-height) + var(--fndn-viewport-height) * 0.111 - var(--fndn-body-cap));
      --home-hero-meta-baseline: calc(var(--home-hero-baseline) + (var(--fndn-viewport-height) - var(--home-hero-baseline)) * 0.618);
      --home-hero-height: var(--fndn-viewport-height);

      & > .fndn-c-sky {
        background-image: radial-gradient(ellipse 70% 30% at var(--fndn-sun-x) 100%, rgb(var(--fndn-haze-tint-rgb) / 0.16), rgb(var(--fndn-haze-tint-rgb) / 0) 72%), radial-gradient(ellipse 90% 40% at var(--fndn-sun-x) 100%, rgb(var(--fndn-haze-light-rgb) / 0.12), rgb(var(--fndn-haze-rgb) / 0.26) 38%, rgb(var(--fndn-haze-rgb) / 0) 72%), linear-gradient(to bottom, var(--fndn-sky-zenith), var(--fndn-sky-high) 22%, var(--fndn-sky-mid) 42%, var(--fndn-sky-mid) 74%, var(--fndn-sky-horizon));
      }

      & .fndn-c-sky__clouds {
        inset-block-end: 6%;
        height: 15%;
      }

      & .fndn-c-guides :is([data-fndn-guide="vertical"][data-fndn-at="mid"], [data-fndn-guide="ruler"]) {
        display: none;
      }

      & dl {
        position: absolute;
        inset-inline: var(--fndn-grid-margin);
        top: calc(var(--home-hero-meta-baseline) - 1.5 * var(--fndn-leading-body) - var(--fndn-font-descent-offset) * var(--fndn-text-body));
        margin: 0;
      }
    }

    @media print {
      height: auto;
      min-height: 0;
    }
  }

  .home-hero__content {
    position: absolute;
    inset: var(--home-hero-top) 0 auto;
    z-index: var(--fndn-layer-content);

    @media (width < 48rem) {
      inset: 0;

      & > .fndn-l-container {
        padding-block-start: var(--home-hero-top);
      }
    }

    @media print {
      position: static;

      & dl {
        position: static;
        padding-block-end: var(--fndn-size-8);
      }
    }
  }

  .home-career {
    display: flow-root;
    padding-block: calc(var(--fndn-space-section) - var(--fndn-title-cap)) var(--fndn-space-section);

    & ol {
      container: home-career / inline-size;
    }
  }

  .home-entry {
    display: grid;
    grid-template-columns: var(--fndn-hang) minmax(0, 1fr) var(--fndn-size-14);
    grid-template-areas: "logo body link";
    align-items: center;
    padding-block: var(--fndn-space-row);

    & + & {
      border-block-start: var(--fndn-stroke-hairline) solid var(--fndn-color-rule);
    }

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

    & > div {
      grid-area: body;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    & > .fndn-c-arrow-link {
      grid-area: link;
    }

    @container home-career (width < 40rem) {
      grid-template-columns: var(--fndn-size-22) minmax(0, 1fr) var(--fndn-size-14);
      grid-template-areas: "logo . link" "body body body";
      row-gap: var(--fndn-size-5);
      column-gap: var(--fndn-size-4);
    }
  }

  .home-entry__logo {
    --home-tile-bleed: var(--fndn-size-6);
    --home-tile-inset: var(--fndn-size-3);
    --home-tile-line: rgb(var(--fndn-color-on-page-rgb) / 0.13);
    --home-tile-axis: rgb(var(--fndn-color-on-page-rgb) / 0.06);
    --home-tile-ring: rgb(var(--fndn-color-on-page-rgb) / 0.09);
    position: relative;
    grid-area: logo;
    display: grid;
    place-items: center;
    width: var(--fndn-size-22);
    aspect-ratio: 1;

    & > img {
      position: relative;
      display: block;

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        filter: invert(1);
      }
    }
  }

  .home-entry__field {
    position: absolute;
    inset: 0;
    display: block;

    &::before {
      content: "";
      position: absolute;
      inset: calc(-1 * var(--home-tile-bleed));
      background:
        linear-gradient(var(--home-tile-line), var(--home-tile-line)) 0 var(--home-tile-bleed) / 100% var(--fndn-stroke-hairline) no-repeat,
        linear-gradient(var(--home-tile-line), var(--home-tile-line)) 0 calc(100% - var(--home-tile-bleed)) / 100% var(--fndn-stroke-hairline) no-repeat,
        linear-gradient(var(--home-tile-line), var(--home-tile-line)) var(--home-tile-bleed) 0 / var(--fndn-stroke-hairline) 100% no-repeat,
        linear-gradient(var(--home-tile-line), var(--home-tile-line)) calc(100% - var(--home-tile-bleed)) 0 / var(--fndn-stroke-hairline) 100% no-repeat,
        linear-gradient(var(--home-tile-axis), var(--home-tile-axis)) 0 50% / 100% var(--fndn-stroke-hairline) no-repeat,
        linear-gradient(var(--home-tile-axis), var(--home-tile-axis)) 50% 0 / var(--fndn-stroke-hairline) 100% no-repeat;
      -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%);
      mask: radial-gradient(closest-side, #000 62%, transparent 100%);
    }

    &::after {
      content: "";
      position: absolute;
      inset: var(--home-tile-inset);
      border: var(--fndn-stroke-hairline) solid var(--home-tile-ring);
      border-radius: 50%;
    }
  }
}