.fresh-drops {
  --fresh-paper: #f7efd5;
  --fresh-ink: #0b3027;
  --fresh-red: #c84b35;
  overflow: hidden;
  border-top: 5px solid #d89d22;
}

.fresh-drops > [data-fresh-drops-state] {
  margin: 0 0 18px;
  color: #d9cba2;
  font: 600 .82rem/1.5 "IBM Plex Mono", monospace;
}

.fresh-drops__story {
  position: relative;
  margin: 0 0 22px;
  padding: clamp(18px, 3vw, 30px);
  color: var(--fresh-ink);
  background: var(--fresh-paper);
  border: 1px solid #d8c896;
  box-shadow: 0 10px 22px rgb(0 0 0 / 24%);
  transform: rotate(-.25deg);
}

.fresh-drops__story::before {
  position: absolute;
  inset: -7px auto auto 50%;
  width: 96px;
  height: 24px;
  content: "";
  background: rgb(227 200 118 / 78%);
  transform: translateX(-50%) rotate(1.5deg);
}

.fresh-drops__story h3,
.fresh-drops__item h3 {
  margin: 5px 0 8px;
  color: var(--fresh-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1;
}

.fresh-drops__story p,
.fresh-drops__item p {
  max-width: 68ch;
}

.fresh-drops__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fresh-drops__item {
  display: flex;
  min-width: 0;
  padding: 20px;
  color: var(--fresh-ink);
  background: var(--fresh-paper);
  border-left: 5px solid #d89d22;
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
  flex-direction: column;
}

.fresh-drops__status {
  width: fit-content;
  margin: 0 !important;
  padding: 4px 8px;
  color: #fff9e6;
  background: #a63a2c;
  font: 700 .72rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.fresh-drops__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.fresh-drops__story .fresh-drops__media {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fresh-drops__media .approved-media-trigger {
  display: grid;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 5px;
  background: #fff9e7;
  border: 1px solid #b8a673;
  place-items: center;
}

.fresh-drops__media img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: contain;
}

.fresh-drops__media .approved-media-trigger:focus-visible,
.fresh-drops__report:focus-visible,
[data-fresh-drops-retry]:focus-visible {
  outline: 4px solid #5ce6a4;
  outline-offset: 3px;
}

.fresh-drops__image-unavailable {
  display: grid;
  min-height: 120px;
  margin: 0 !important;
  padding: 16px;
  color: #6e2f28;
  background: #eadfbd;
  border: 1px dashed #9b765c;
  place-items: center;
}

.hunter-page .fresh-drops__report {
  display: inline-flex;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 16px;
  color: #092b24;
  background: #f8bd2d;
  border: 2px solid #092b24;
  border-radius: 5px;
  box-shadow: 0 4px 0 #7d5010;
  font: 700 .92rem/1.25 "Source Sans 3", sans-serif;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hunter-page .fresh-drops__report:hover {
  color: #092b24;
  background: #ffd25b;
}

@media (max-width: 760px) {
  .fresh-drops,
  .fresh-drops__story,
  .fresh-drops__item {
    min-width: 0;
    max-width: 100%;
  }

  .fresh-drops__items,
  .fresh-drops__story .fresh-drops__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .fresh-drops__story {
    transform: none;
  }

  .fresh-drops__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .fresh-drops__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .fresh-drops__item,
  .fresh-drops__story {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-drops__story,
  .fresh-drops__status {
    transform: none;
  }
}

.fresh-drops-teaser {
  padding: clamp(44px, 7vw, 78px) 0;
  color: #f8f0d7;
  background:
    linear-gradient(rgb(7 42 34 / 84%), rgb(7 42 34 / 94%)),
    repeating-linear-gradient(112deg, #234f3f 0 2px, #173e33 2px 7px);
  border-block: 1px solid #ca9628;
}

.fresh-drops-teaser h2 {
  margin: 4px 0 8px;
  color: #ffd26a;
  font: 700 clamp(2.25rem, 6vw, 4.5rem)/.95 "Cormorant Garamond", Georgia, serif;
}

.fresh-drops-teaser > .wrap > p:not(.eyebrow) {
  max-width: 62ch;
  font-size: 1.1rem;
}

.fresh-drops-teaser ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 860px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.fresh-drops-teaser li {
  display: grid;
  min-width: 0;
  padding: 14px;
  color: #0b3027;
  background: #f7efd5;
  border: 1px solid #ddc47e;
  box-shadow: 0 8px 0 rgb(0 0 0 / 23%);
  grid-template-columns: minmax(0, 132px) 1fr;
  gap: 14px;
  align-items: center;
}

.fresh-drops-teaser li img {
  width: 100%;
  height: 118px;
  object-fit: contain;
  background: #fff9e7;
}

.fresh-drops-teaser li div {
  display: grid;
  gap: 4px;
}

.fresh-drops-teaser li strong {
  font: 700 clamp(1.4rem, 3vw, 2rem)/1 "Cormorant Garamond", Georgia, serif;
}

.fresh-drops-teaser li span {
  line-height: 1.45;
}

.fresh-drops-teaser .evidence-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
}

.fresh-drops-teaser__actions {
  width: min(100%, 860px);
  margin-top: 24px;
}

@media (max-width: 760px) {
  .fresh-drops-teaser ol,
  .fresh-drops-teaser li {
    grid-template-columns: minmax(0, 1fr);
  }

  .fresh-drops-teaser li img {
    height: min(54vw, 230px);
  }

  .fresh-drops-teaser__actions .evidence-action {
    width: 100%;
  }
}