@layer components {
  body.about-surface {
    background:
      radial-gradient(circle at 88% 7%, rgb(250 117 84 / 10%), transparent 24rem),
      var(--color-cream);
  }

  .about-back-button {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 400;
    text-decoration-color: var(--color-coral);
    text-underline-offset: .2rem;
  }

  .about-back-button:hover {
    color: var(--color-coral-dark);
  }

  .about-copy {
    inline-size: min(100%, 76rem);
    margin: clamp(3.5rem, 8vh, 7rem) auto clamp(5rem, 10vh, 8rem);
  }

  .about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .78fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
  }

  .about-intro {
    animation: about-rise 620ms cubic-bezier(.23, 1, .32, 1) both;
  }

  .about-intro h1 {
    max-inline-size: 43rem;
    margin-block-start: .85rem;
    font-size: clamp(2.8rem, 5.8vw, 5.15rem);
    letter-spacing: -.025em;
    line-height: .96;
    text-wrap: balance;
  }

  .about-lede {
    max-inline-size: 41rem;
    margin-block-start: 1.6rem;
    color: var(--color-navy-soft);
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  .about-map-demo {
    min-inline-size: 0;
    overflow: hidden;
    border: .0625rem solid rgb(16 38 83 / 16%);
    border-radius: 1.25rem;
    background: var(--color-white);
    box-shadow: 0 1.5rem 4rem rgb(16 38 83 / 9%);
  }

  .about-demo-heading,
  .about-demo-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    color: var(--color-navy);
    font-size: .75rem;
    line-height: 1.4;
  }

  .about-demo-heading > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 750;
  }

  .about-demo-heading .nabry-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--color-coral-dark);
  }

  .about-demo-heading .about-demo-private {
    color: var(--color-navy-soft);
    font-size: .75rem;
    font-weight: 500;
  }

  .about-demo-scene {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 560 / 460;
    overflow: hidden;
    border-block: .0625rem solid rgb(16 38 83 / 10%);
    background: #edf2f5;
  }

  .about-demo-canvas,
  .about-demo-fallback {
    position: absolute;
    inset: 0;
  }

  .about-demo-fallback svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .about-map-demo[data-map-ready="true"] .about-demo-fallback {
    display: none;
  }

  .about-demo-street {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    color: #777772;
    font-size: clamp(.6rem, 2.6cqw, .8rem);
    letter-spacing: .055em;
    transform: translate(-50%, -50%);
  }

  .about-demo-parcel {
    position: absolute;
    inline-size: 19.65%;
    block-size: 42.4%;
    border: .15rem solid var(--color-coral);
    border-radius: 1.43cqw;
    background: rgb(244 111 82 / 15%);
  }

  .about-demo-public-name {
    position: absolute;
    inset-inline-start: calc((var(--column) + .5) * 20%);
    inset-block-start: calc(21% + var(--row) * 48%);
    display: grid;
    inline-size: 19%;
    color: #686864;
    font-size: clamp(.55rem, 2.6cqw, .8rem);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 2px #fffdfa, 0 -1px 2px #fffdfa;
    transform: translate(-50%, -50%);
  }

  .about-demo-parcel.is-home {
    inset: 3.26% auto auto 20.18%;
  }

  .about-demo-parcel.is-household {
    inset: 3.26% auto auto 60.18%;
  }

  .about-demo-parcel.is-names {
    inset: 54.35% auto auto 40.18%;
  }

  .about-demo-tag {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    inline-size: max-content;
    max-inline-size: 48%;
    transform: translate(-50%, -100%);
  }

  .about-demo-tag.is-home {
    inset: 37% auto auto 30%;
  }

  .about-demo-tag.is-household {
    inset: 37% auto auto 70%;
  }

  .about-demo-tag.is-names {
    inset: 83% auto auto 50%;
  }

  .about-demo-label {
    display: grid;
    justify-items: center;
    gap: .15rem;
    padding: .45rem .6rem;
    border: .0625rem solid rgb(233 95 64 / 28%);
    border-radius: .45rem;
    background: #fff8f3;
    box-shadow: 0 .2rem .65rem rgb(16 38 83 / 9%);
    color: #a53c28;
    font-size: clamp(.7rem, 3cqw, .92rem);
    line-height: 1.3;
    text-align: center;
    transform-origin: center bottom;
  }

  .about-demo-label strong {
    font-weight: 800;
  }

  .about-demo-name {
    font-size: .92em;
    font-weight: 600;
  }

  .about-demo-label.is-names-only {
    grid-template-columns: repeat(2, auto);
    column-gap: .65rem;
  }

  .about-demo-pin {
    display: grid;
    place-items: center;
    inline-size: .85rem;
    block-size: .85rem;
    border: .13rem solid white;
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 .35rem rgb(244 111 82 / 24%);
  }

  .about-demo-tag.is-home .about-demo-pin {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .about-demo-pin .nabry-icon {
    inline-size: .85rem;
    block-size: .85rem;
    color: white;
  }

  .about-demo-cursor {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    color: var(--color-navy);
    filter: drop-shadow(0 .15rem .1rem rgb(255 255 255 / 90%));
    pointer-events: none;
  }

  .about-demo-cursor .nabry-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: white;
    stroke-width: 1.6;
  }

  .about-demo-address {
    position: absolute;
    inset: auto auto .6rem .7rem;
    padding: .2rem .4rem;
    border-radius: .2rem;
    background: rgb(255 255 255 / 85%);
    color: #686864;
    font-size: .6rem;
  }

  .about-demo-caption {
    min-block-size: 3.25rem;
    padding-block: .25rem;
    padding-inline-end: .5rem;
    font-size: .64rem;
  }

  .about-demo-caption > span {
    color: var(--color-navy-soft);
    font-size: .8125rem;
  }

  .about-demo-replay {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-navy-soft);
  }

  .about-demo-replay:not([hidden]) {
    display: grid;
    place-items: center;
  }

  .about-demo-replay .nabry-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .about-demo-replay:hover {
    background: var(--color-panel-soft);
    color: var(--color-navy);
  }

  .about-demo-replay:focus-visible {
    outline: .125rem solid var(--color-navy);
    outline-offset: .125rem;
  }

  .about-map-demo:is([data-demo-state="waiting"], [data-demo-state="playing"]) [data-about-map-demo-target="reveal"] {
    opacity: 0;
  }

  .about-map-demo [data-about-map-demo-target="replace"] {
    opacity: 0;
  }

  .about-map-demo:is([data-demo-state="waiting"], [data-demo-state="playing"]) [data-about-map-demo-target="replace"] {
    opacity: 1;
  }

  .about-purpose,
  .about-directory {
    display: grid;
    grid-template-columns: minmax(13rem, .36fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
    margin-block-start: clamp(5rem, 11vh, 9rem);
    padding-block-start: 2rem;
    border-block-start: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-section-heading h2 {
    margin-block-start: .7rem;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .about-steps,
  .about-link-list {
    list-style: none;
  }

  .about-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-steps li {
    min-inline-size: 0;
    padding-inline: clamp(1rem, 2vw, 1.65rem);
  }

  .about-steps li:first-child {
    padding-inline-start: 0;
  }

  .about-steps li + li {
    border-inline-start: .0625rem solid rgb(16 38 83 / 14%);
  }

  .about-step-number {
    color: var(--color-coral-dark);
    font-family: var(--font-meta);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .08em;
  }

  .about-steps h3 {
    margin-block: .65rem .55rem;
    font-size: 1rem;
    line-height: 1.25;
  }

  .about-steps p {
    color: var(--color-navy-soft);
    font-size: .88rem;
    line-height: 1.6;
    text-wrap: pretty;
  }

  .about-link-list {
    border-block-start: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-link-list li {
    border-block-end: .0625rem solid rgb(16 38 83 / 18%);
  }

  .about-link-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.2rem;
    color: var(--color-navy);
    text-decoration: none;
  }

  .about-link-list a:hover strong {
    color: var(--color-coral-dark);
  }

  .about-link-list a:hover .nabry-icon {
    color: var(--color-coral-dark);
    transform: translate(.15rem, -.15rem);
  }

  .about-link-list strong,
  .about-link-list small {
    display: block;
  }

  .about-link-list strong {
    font-size: 1rem;
    line-height: 1.35;
  }

  .about-link-list small {
    margin-block-start: .28rem;
    color: var(--color-navy-soft);
    font-size: .82rem;
    line-height: 1.5;
  }

  .about-link-list .nabry-icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transition: color 160ms ease, transform 160ms ease;
  }

  @media (max-width: 52rem) {
    .about-hero {
      grid-template-columns: 1fr;
    }

    .about-map-demo {
      inline-size: min(100%, 31rem);
      justify-self: center;
    }

    .about-purpose,
    .about-directory {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }

  @media (max-width: 38rem) {
    .about-copy {
      margin-block-start: 3rem;
    }

    .about-intro h1 {
      font-size: clamp(2.55rem, 12vw, 3.65rem);
    }

    .about-steps {
      grid-template-columns: 1fr;
    }

    .about-steps li {
      padding: 1.2rem 0;
    }

    .about-steps li:first-child {
      padding-block-start: 0;
    }

    .about-steps li + li {
      border-block-start: .0625rem solid rgb(16 38 83 / 14%);
      border-inline-start: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .about-intro {
      animation: none;
    }

    .about-link-list .nabry-icon {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .about-map-demo {
      border-color: CanvasText;
      box-shadow: none;
    }

    .about-demo-label,
    .about-demo-parcel,
    .about-purpose,
    .about-directory,
    .about-link-list,
    .about-link-list li,
    .about-steps li + li {
      border-color: CanvasText;
    }
  }

  @keyframes about-rise {
    from {
      opacity: 0;
      transform: translateY(.7rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}