/* Shared media-card rules. All artwork and collection thumbnails use the same
   modest footprint across the homepage, Concepts and Herbarium. */
:root {
  --artwork-thumbnail-ratio: 4 / 5;
  --artwork-grid-gap: 20px;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--artwork-grid-gap);
  width: min(100%, 1200px);
  margin-inline: auto;
  align-items: start;
}
.media-grid > * { min-width: 0; width: 100%; }
.media-card__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--artwork-thumbnail-ratio);
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #e7ded2;
}
.media-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Older editorial tile sizing is intentionally overridden while CSS is consolidated. */
.concepts-grid.media-grid .concept-tile,
.concepts-grid.media-grid .concept-tile:nth-child(3n + 1),
.concepts-grid.media-grid .concept-tile:nth-child(3n + 2) {
  grid-column: auto;
}
.concepts-grid.media-grid .concept-tile .concept-tile__image,
.concepts-grid.media-grid .concept-tile:nth-child(3n + 2) .concept-tile__image {
  aspect-ratio: var(--artwork-thumbnail-ratio);
  height: auto;
  min-height: 0;
}
.hb-products.media-grid,
.hb-specimens.media-grid,
.products.media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-products.media-grid .hb-product__image,
.hb-specimens.media-grid .hb-specimen__picture {
  aspect-ratio: var(--artwork-thumbnail-ratio);
  height: auto;
  min-height: 0;
  max-height: none;
}
.hb-specimens.media-grid .hb-specimen__picture img { object-fit: contain; }
/* Concept cover imagery is decorative, not a full-bleed banner. */
.concepts-hero { padding-block: clamp(48px, 6vw, 78px); }
.concepts-hero__layout { gap: clamp(25px, 5vw, 65px); }
.concepts-hero__notebook { min-height: 440px; }
.concepts-hero__photo--one { top: 25px; right: 4%; width: min(65%, 410px); height: 330px; }
.concepts-hero__photo--two { right: 59%; bottom: 20px; width: min(34%, 190px); height: 180px; }
/* Herbarium cover composition: still editorial, without gigantic photography. */
.hb-hero__grid { min-height: 0; padding-block: clamp(35px, 5vw, 64px); }
.hb-hero__visual { width: min(100%, 500px); min-height: 420px; margin-inline: auto; }
.hb-hero__photo { inset: 12px 44px 52px 54px; }
.hb-hero__detail { width: 30%; }
.hb-hero__ticket { width: 145px; padding: 15px; }
.hb-hero__ticket em { font-size: 26px; }
.hb-atelier__images img { max-height: 320px; }
.media-card__image:focus-visible { outline: 3px solid #793b4c; outline-offset: 3px; }
@media (max-width: 1050px) {
  .media-grid,
  .hb-products.media-grid,
  .hb-specimens.media-grid,
  .products.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .media-grid,
  .hb-products.media-grid,
  .hb-specimens.media-grid,
  .products.media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concepts-hero__notebook { min-height: 355px; }
  .concepts-hero__photo--one { width: min(65%, 360px); height: 280px; }
  .concepts-hero__photo--two { width: min(34%, 170px); height: 155px; }
  .hb-hero__visual { min-height: 360px; }
}
@media (max-width: 540px) {
  .media-grid,
  .hb-products.media-grid,
  .hb-specimens.media-grid,
  .products.media-grid {
    width: min(100%, 360px);
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .concepts-hero__notebook { min-height: 350px; }
  .hb-hero__visual { min-height: 320px; }
  .hb-hero__photo { inset: 14px 23px 35px 30px; }
  .hb-hero__ticket { width: 112px; padding: 12px; }
  .hb-hero__ticket em { font-size: 20px; }
}

.hb-specimen__product-trigger{border:0;padding:0;width:100%;display:block;text-align:left;cursor:pointer;font:inherit}
.hb-specimen__product-trigger:focus-visible{outline:3px solid #793b4c;outline-offset:3px}
.hb-specimen__product-trigger:hover img{transform:scale(1.02)}