/* Dodo Wall: isolated homepage component with a usable server-rendered fallback. */
.dodo-wall {
  --dodo-wall-brick: #d8ad68;
  --dodo-wall-door: #202728;
  --dodo-wall-cream: #fff1d4;
  --dodo-wall-viewport-width: 100vw;
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-height: clamp(700px, 60vw, 900px);
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  background-color: var(--dodo-wall-brick);
  background-image: url("../images/dodo-wall-brick.png");
  background-image: image-set(
    url("../images/dodo-wall-brick.avif") type("image/avif"),
    url("../images/dodo-wall-brick.png") type("image/png")
  );
  background-repeat: repeat;
  background-size: 420px auto;
}

.dodo-wall__doorway {
  position: absolute;
  top: var(--dodo-wall-top-band, 0px);
  left: 0;
  width: var(--dodo-wall-door-width, min(24%, 380px));
  height: var(--dodo-wall-door-height, 340px);
  min-height: 0;
  margin: 0;
  visibility: hidden;
  z-index: 4;
  box-sizing: border-box;
  width: min(24%, 380px);
  min-height: 340px;
  padding: 1.5rem;
  overflow: hidden;
  color: var(--dodo-wall-cream);
  text-align: center;
}

.dodo-wall--enhanced .dodo-wall__doorway,
.dodo-wall--fallback .dodo-wall__doorway {
  visibility: visible;
}

.dodo-wall__doorway::before,
.dodo-wall__doorway::after {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
}

.dodo-wall__doorway::before {
  z-index: 0;
  top: var(--dodo-door-opening-top, 0px);
  right: var(--dodo-door-opening-right, 0px);
  bottom: 0;
  left: var(--dodo-door-opening-left, 0px);
  background: var(--dodo-wall-door);
}

.dodo-wall__doorway::after {
  z-index: 1;
  inset: 0;
  background-image: url("../images/dodo-wall-door7-test.png");
  background-image: image-set(
    url("../images/dodo-wall-door7-v1.webp") type("image/webp"),
    url("../images/dodo-wall-door7-test.png") type("image/png")
  );
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.dodo-wall__doorway > * {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  max-width: 100%;
}

.dodo-wall__door-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-3px);
}

.dodo-wall__door-content h1 {
  margin: 0 0 5px;
}

.dodo-wall__door-content .dodo-wall__provenance {
  margin: 0 0 8px !important;
}

.dodo-wall__door-content .dodo-wall__liz-crop {
  margin: 0 auto;
}

.dodo-wall__door-content .dodo-wall__cta {
  margin: 8px 0 0;
}

.dodo-wall__door-content-scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 47% at 50% 46%, rgba(5, 8, 8, .18) 0%, rgba(5, 8, 8, .13) 45%, rgba(5, 8, 8, .06) 68%, rgba(5, 8, 8, 0) 88%);
}

.dodo-wall__doorway h1 {
  margin: 0 0 .55rem;
  color: inherit;
  font-size: clamp(1.7rem, 2.35vw, 2.55rem);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
}

.dodo-wall__doorway p { margin: .25rem 0; }
.dodo-wall__provenance {
  font-size: clamp(.88rem, 1.05vw, 1rem);
  line-height: 1.3;
  text-align: center;
}

.dodo-wall__liz-crop {
  display: block;
  width: 60%;
  aspect-ratio: 1;
  margin: .55rem auto 0;
  overflow: hidden;
  border: 1px solid var(--dodo-wall-cream);
  border-radius: 10px;
}

.dodo-wall__liz-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.dodo-wall__cta,
.dodo-wall__cta:visited {
  display: inline-block;
  margin-top: .5rem;
  padding: 9px 21px;
  border: 0;
  border-radius: 0;
  color: #faf6f0;
  background: #741b46;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.dodo-wall__cta:hover,
.dodo-wall__cta:focus-visible {
  color: #faf6f0;
  background: #5d1638;
  text-decoration: none;
}

.dodo-wall .dodo-wall__doorway .dodo-wall__cta,
.dodo-wall .dodo-wall__doorway .dodo-wall__cta:visited,
.dodo-wall .dodo-wall__doorway .dodo-wall__cta:hover,
.dodo-wall .dodo-wall__doorway .dodo-wall__cta:focus,
.dodo-wall .dodo-wall__doorway .dodo-wall__cta:active {
  text-decoration: none !important;
}

/* Server-rendered fallback. Absolute positioning begins only after enhancement. */
.dodo-wall-products,
.dodo-wall-noscript {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  padding: .75rem;
}

.dodo-wall-product,
.dodo-wall-noscript-product {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--dodo-wall-cream);
  text-decoration: none;
}

.dodo-wall-product { display: none; }

.dodo-wall-product-image,
.dodo-wall-product-image img,
.dodo-wall-noscript-product img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}

.dodo-wall-product-title,
.dodo-wall-product-price {
  display: block;
}

.dodo-wall-product-title {
  margin-top: .35rem;
  font-size: .85rem;
  line-height: 1.2;
}

.dodo-wall-product-price { font-size: .8rem; }

/* Enhanced packing and approved desktop discovery treatment. */
.dodo-wall.dodo-wall--enhanced { min-height: var(--dodo-wall-height); }
.dodo-wall--enhanced .dodo-wall-products { position: static; display: block; padding: 0; }
.dodo-wall--enhanced .dodo-wall__doorway { position: absolute; margin: 0; }
.dodo-wall--enhanced .dodo-wall-product {
  position: absolute;
  z-index: 2;
  overflow: visible;
  transition: transform .16s ease;
}

.dodo-wall--enhanced .dodo-wall-product-image,
.dodo-wall--enhanced .dodo-wall-product-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.dodo-wall--enhanced .dodo-wall-product-image { box-shadow: none; }
.dodo-wall--enhanced .dodo-wall-product-image img { box-shadow: 0 3px 7px rgba(55, 37, 20, .38); }
.dodo-wall--fallback .dodo-wall-product { display: block; }

@media (min-width: 768px) {
  .dodo-wall {
    --dodo-wall-door-width: clamp(280px, calc(var(--dodo-wall-viewport-width) * .225), 380px);
    --dodo-wall-door-height: calc(var(--dodo-wall-door-width) * 1.476);
    --dodo-wall-top-band: clamp(120px, calc((var(--dodo-wall-viewport-width) - 800px) * .32), 360px);
    min-height: calc(var(--dodo-wall-top-band) + var(--dodo-wall-door-height) - 2px);
  }

  /* Keep the Door 7 content group inside the measured opening, as approved
     before consolidation; this moves the group as one flow without changing
     the spacing between its children. */
  .dodo-wall--enhanced .dodo-wall__doorway {
    padding-top: calc(var(--dodo-door-opening-top, 0px) + 7px);
    padding-right: calc(var(--dodo-door-opening-right, 0px) + 7px);
    padding-bottom: 7px;
    padding-left: calc(var(--dodo-door-opening-left, 0px) + 7px);
  }

  .dodo-wall--client-width {
    width: var(--dodo-wall-viewport-width);
    margin-right: calc(50% - (var(--dodo-wall-viewport-width) / 2));
    margin-left: calc(50% - (var(--dodo-wall-viewport-width) / 2));
  }

  .dodo-wall--enhanced .dodo-wall-product::after {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48%;
    pointer-events: none;
    content: "";
    opacity: 0;
    background: linear-gradient(to top, rgba(32, 39, 40, .84), rgba(32, 39, 40, 0));
    transition: opacity .16s ease;
  }

  .dodo-wall--enhanced .dodo-wall-product-info {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: .45rem 9px .5rem;
    opacity: 0;
    color: #fff3d7;
    font-family: Arial, sans-serif;
    transition: opacity .16s ease;
  }

  .dodo-wall--enhanced .dodo-wall-product-title,
  .dodo-wall--enhanced .dodo-wall-product-period,
  .dodo-wall--enhanced .dodo-wall-product-price {
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
  }

  .dodo-wall--enhanced .dodo-wall-product-title {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.18;
    text-align: left;
  }

  .dodo-wall--enhanced .dodo-wall-product-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .12rem;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
  }

  .dodo-wall--enhanced .dodo-wall-product-period {
    min-width: 0;
    color: rgba(255, 243, 215, .82);
    text-align: left;
  }

  .dodo-wall--enhanced .dodo-wall-product-price {
    min-width: 0;
    text-align: right;
  }

  .dodo-wall--enhanced .dodo-wall-product:focus-visible {
    z-index: 8;
    outline: 2px solid #fff0c9;
    outline-offset: 3px;
  }

  .dodo-wall--enhanced .dodo-wall-product:focus-visible::after,
  .dodo-wall--enhanced .dodo-wall-product:focus-visible .dodo-wall-product-info {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .dodo-wall--enhanced .dodo-wall-product:hover {
    z-index: 8;
    transform: scale(1.015);
  }

  .dodo-wall--enhanced .dodo-wall-product:hover::after,
  .dodo-wall--enhanced .dodo-wall-product:hover .dodo-wall-product-info {
    opacity: 1;
  }
}

/* Mobile is a cropped section of the wall: artwork only, with direct links. */
@media (max-width: 767.98px) {
  .dodo-wall.dodo-wall--mobile-breakout {
    width: calc(100vw + 20px);
    min-height: clamp(440px, calc(110vw + 40px), 620px);
    margin-right: -20px;
    margin-left: var(--dodo-wall-mobile-left-shift, 0px);
  }

  .dodo-wall.dodo-wall--enhanced {
    min-height: var(--dodo-wall-height);
  }

  .site.dodo-wall-site--mobile-unclip { overflow-x: visible; }
  html:has(.site.dodo-wall-site--mobile-unclip),
  body:has(.site.dodo-wall-site--mobile-unclip) { overflow-x: clip; }

  .dodo-wall-products,
  .dodo-wall-noscript { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .dodo-wall__doorway {
    width: 190px;
    min-height: 270px;
    padding: 36px 32px 10px 22px;
  }

  .dodo-wall__doorway::after {
    background-position: left top;
    background-size: auto 100%;
  }

  .dodo-wall__doorway h1 { font-size: 1.25rem; line-height: 1.12; }
  .dodo-wall__provenance { font-size: .82rem; line-height: 1.2; text-wrap: balance; }
  .dodo-wall__liz-crop { width: 58%; }
  .dodo-wall__cta { padding: 6px 8px; font-size: 12px; }

  .dodo-wall--enhanced .dodo-wall-product-title,
  .dodo-wall--enhanced .dodo-wall-product-price,
  .dodo-wall--enhanced .dodo-wall-product-info,
  .dodo-wall--enhanced .dodo-wall-product::after { display: none; }

  .dodo-wall__door-content-scrim {
    background: radial-gradient(ellipse 66% 46% at 50% 46%, rgba(5, 8, 8, .12) 0%, rgba(5, 8, 8, .08) 45%, rgba(5, 8, 8, .035) 68%, rgba(5, 8, 8, 0) 88%);
  }
}

/* Do not turn a tap into a hover state on coarse pointers. */
@media (hover: none), (pointer: coarse) {
  .dodo-wall--enhanced .dodo-wall-product:hover {
    z-index: auto;
    transform: none;
    outline: none;
  }

  .dodo-wall--enhanced .dodo-wall-product:hover::after,
  .dodo-wall--enhanced .dodo-wall-product:hover .dodo-wall-product-info,
  .dodo-wall--enhanced .dodo-wall-product:focus-visible::after,
  .dodo-wall--enhanced .dodo-wall-product:focus-visible .dodo-wall-product-info { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dodo-wall--enhanced .dodo-wall-product,
  .dodo-wall--enhanced .dodo-wall-product::after,
  .dodo-wall--enhanced .dodo-wall-product-info { transition: none; }
}