/* The street sits under the header. The 78% paper wash keeps the drawing
   visible, and it is too thin for body copy and links — axe leaves the image
   incomplete, so it never fails the build. Headings already clear 4.5 on the
   drawing, so they stay on it. Body copy and link rows sit on a paper plate
   with a little Giftay lavender. Padding keeps the focus ring on the plate. */
.g-street{
  --street-wash:78%;
  --street-plate:color-mix(in srgb, var(--c-paper) 96%, var(--giftay));
  background-color:var(--c-paper);
  background-image:
    linear-gradient(color-mix(in srgb, var(--c-paper) var(--street-wash), transparent), color-mix(in srgb, var(--c-paper) var(--street-wash), transparent)),
    url("/street.svg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:auto, 100vw auto;
  min-height:calc(100vw * 1024 / 573);
}
.g-street .section{background:transparent;border-top-color:transparent}
.g-street :is(.t-lede, .t-body, .t-small, .t-micro, .eyebrow, .link-row){
  background-color:var(--street-plate);
  border-radius:8px;
  padding:8px 12px;
  margin-inline:-12px;
  width:fit-content;
  max-width:calc(100% + 24px);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.g-street .feature{
  background-color:var(--street-plate);
  border-radius:12px;
  padding:12px 12px 10px;
}
.g-street .feature :is(.t-lede, .t-body, .t-small, .t-micro, .eyebrow){
  background-color:transparent;
  border-radius:0;
  padding:0;
  margin-inline:0;
  width:auto;
  max-width:none;
}

/* The wordmark replaces the Giftay name. The name stays in the link for readers. */
.site--giftay .brand__product{font-size:0;color:transparent}
.site--giftay .brand__product::after{
  content:"";
  display:block;
  height:44px;
  aspect-ratio:1024 / 551;
  background:url("/giftay-wordmark.svg") center / contain no-repeat;
}

/* Narrow: the feature rules read as page breaks. Use a list instead. */
@media (max-width: 899px){
  .g-street .feature-grid{
    display:block;
    padding-left:1.25em;
    list-style:disc;
  }
  .g-street .feature{
    display:list-item;
    border-top:0;
    padding:2px 8px;
  }
  .g-street .feature .t-h3,
  .g-street .feature .t-body{display:inline}
  .g-street .feature .t-h3{font-size:inherit;line-height:inherit}
  .g-street .feature .t-h3::after{content:". "}
}