/* Styles of /belladonna/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Belladonna, page-specific only. Everything structural comes from
   css/case-page.css (the case template) and css/grid.css. Two pieces are
   unique to this case:
   1. the wordmark, set in its own typeface (BelladonnaTxk);
   2. the glyph gallery, which is the hero: a dark panel on all the content columns
      with the letters on the left half and the large preview on the right. */
@font-face {
  font-family: 'Belladonna Txk.';
  src: url('../css/BelladonnaTxk.-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body.case-page .cp-title.belladonna-wordmark {
  font-family: 'Belladonna Txk.', 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- GLYPH GALLERY ----------
   The Belladonna SVGs are near-white (#f1f1f2), so the panel is dark. The box
   sits on the column lines and its content has 32px of space inside. */
body.case-page .bella-gallery {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: var(--g-gutter);
  row-gap: var(--v-gutter);
  padding: 32px;
  background: var(--black, #1f1f29);
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
}
body.case-page .cp-hero > .bella-gallery { grid-column: 1 / -1; contain: size; }
.bella-gallery__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--g-gutter);
  flex-wrap: wrap;
  padding-bottom: var(--v-gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.bella-gallery__tab {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}
.bella-gallery__count {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* Letters: six tiles per row, one tile per column of the half. */
.bella-gallery__letters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--g-gutter);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.bella-gallery__letters::-webkit-scrollbar { width: 6px; }
.bella-gallery__letters::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }
.bella-gallery__letters img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  opacity: 0.85;
  transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease;
}
.bella-gallery__letters img:hover { transform: translateY(-2px); opacity: 1; border-color: rgba(255, 255, 255, 0.55); }
.bella-gallery__visor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.bella-gallery__visor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

/* Tablet and phone: the hero is not tied to the viewport rows, so the panel
   takes its own height; the letters scroll inside a fixed box. */
@media (max-width: 63.99em) {
  body.case-page .cp-hero > .bella-gallery { contain: none; }
  .bella-gallery__letters { max-height: 45vh; }
  .bella-gallery__visor { aspect-ratio: 1; }
}
@media (max-width: 37.49em) {
  body.case-page .bella-gallery { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .bella-gallery__meta { order: -2; }
  .bella-gallery__visor { order: -1; }
  .bella-gallery__letters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
}

/* ---------- BUY LINK ---------- */
.bella-cta {
  display: block;
  margin-top: calc(var(--v-gutter) * 1.5);
  padding: 14px 32px;
  background: var(--ink, var(--black, #1f1f29));
  color: #fff;
  text-decoration: none;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: opacity 180ms ease;
}
.bella-cta:hover,
.bella-cta:focus-visible { opacity: 0.78; }

/* ---------- IMAGE SETS ---------- */
/* Four square pieces: two per row, four content columns each with one
   empty column between on the nine of desktop (five each, two between, on
   the twelve above 1200px); two per row on the 8 tablet columns; one under
   the other on the phone. */
.bella-quad { row-gap: var(--g-gutter); }
.bella-quad__item { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.bella-quad__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64em) {
  .bella-quad__item:nth-child(odd) { grid-column: 1 / span 4; }
  .bella-quad__item:nth-child(even) { grid-column: 6 / span 4; }
}
@media (min-width: 75.0625em) {
  .bella-quad__item:nth-child(odd) { grid-column: 1 / span 5; }
  .bella-quad__item:nth-child(even) { grid-column: 8 / span 5; }
  body.case-page .bella-runway > img { grid-column: 1 / span 8; }
  body.case-page .bella-runway figcaption { grid-column: 9 / span 4; }
}
@media (max-width: 63.99em) {
  .bella-quad {
    display: grid;
    grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
    column-gap: var(--g-gutter);
  }
  .bella-quad__item { grid-column: span 4; }
}
@media (max-width: 37.49em) {
  .bella-quad__item { grid-column: 1 / -1; }
}

/* The runway cover is portrait: six of the nine content columns, with the
   thanks beside it on the last three, bottom aligned (eight and four of the
   twelve above 1200px). */
body.case-page .bella-runway { display: grid; grid-template-columns: subgrid; row-gap: var(--v-gutter); }
body.case-page .bella-runway > img { display: block; width: 100%; height: auto; grid-column: 1 / span 6; }
body.case-page .bella-runway figcaption { grid-column: 7 / span 3; align-self: end; margin: 0; }
@media (max-width: 63.99em) {
  body.case-page .bella-runway { display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); column-gap: var(--g-gutter); }
  body.case-page .bella-runway > img { grid-column: 1 / span 5; }
  body.case-page .bella-runway figcaption { grid-column: 6 / span 3; }
}
@media (max-width: 37.49em) {
  body.case-page .bella-runway { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.case-page .bella-runway > img { grid-column: 1 / -1; }
  body.case-page .bella-runway figcaption { grid-column: 1 / -1; }
}