.barqs-reference {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.barqs-reference > h3 {
  font: clamp(2rem, 3.5vw, 3.2rem)/1 var(--display);
  letter-spacing: -.03em;
  margin: 0 0 1.25rem;
}

.barqs-reference-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.barqs-reference-heading > h3 { margin: 0; }
.barqs-reference-heading button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: .55rem .7rem;
  font: 700 .76rem/1 var(--sans);
  cursor: pointer;
}

.field-guide-grid article[data-barqs-open] { cursor: pointer; }
.field-guide-grid article[data-barqs-open]:hover,.field-guide-grid article[data-barqs-open]:focus-visible { background: #fff; outline: 2px solid var(--gold); outline-offset: -2px; }

.barqs-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.barqs-reference-card { background: #fff; padding: 1rem; }
.barqs-reference-card:nth-child(2) { background: var(--paper-2); }
.barqs-reference-card figure { margin: 0 0 1rem; background: #f7f1e2; }
.barqs-image-button { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.barqs-reference-card img { display: block; width: 100%; height: 220px; object-fit: contain; }
.barqs-reference-card h4 { font: 1.55rem/1.08 var(--display); margin: .35rem 0 .65rem; }
.barqs-reference-card p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.5; }
.barqs-source { font-size: .78rem !important; font-weight: 700; color: var(--red); }

/* Bottle collections use compact cards so five examples can be compared at once. */
#guide-bottles .barqs-reference-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#guide-bottles .barqs-reference-card { padding: .65rem; }
#guide-bottles .barqs-reference-card figure { margin-bottom: .65rem; }
#guide-bottles .barqs-reference-card img { height: 142px; }
#guide-bottles .barqs-reference-card h4 { font-size: 1.16rem; margin: .25rem 0 .45rem; }
#guide-bottles .barqs-reference-card p { font-size: .8rem; }

/* Dairy bottles are kept tightly framed for quick side-by-side comparison. */
#bottle-dairy .barqs-reference-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#bottle-dairy .barqs-reference-card { padding: .55rem; }
#bottle-dairy .barqs-reference-card figure { overflow: hidden; background: transparent; }
#bottle-dairy .barqs-reference-card img { height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: center; }

/* Shearwater fish mugs are compact, edge-to-edge comparison cards. */
#guide-pottery .shearwater-fish-grid { grid-template-columns: repeat(6, 168px); justify-content: start; gap: 2px; }
#guide-pottery .shearwater-fish-grid .barqs-reference-card { padding: .25rem; }
#guide-pottery .shearwater-fish-grid .barqs-reference-card figure { margin-bottom: .4rem; background: transparent; overflow: hidden; }
#guide-pottery .shearwater-fish-grid .barqs-reference-card img { height: 145px; object-fit: cover; }
#guide-pottery .shearwater-fish-grid .barqs-reference-card h4 { font-size: 1.16rem; margin: .25rem 0 .4rem; }
#guide-pottery .shearwater-fish-grid .barqs-reference-card p { font-size: .8rem; }

/* Glaze charts remain small on the page, with the complete chart available on click. */
#guide-pottery .shearwater-glaze-grid { grid-template-columns: 168px; justify-content: start; gap: 2px; border: 0; background: transparent; }
#guide-pottery .shearwater-glaze-grid .barqs-reference-card { padding: 0; }
#guide-pottery .shearwater-glaze-grid .barqs-reference-card figure { margin-bottom: .35rem; background: transparent; }
#guide-pottery .shearwater-glaze-grid .barqs-reference-card img { height: 186px; object-fit: cover; }
#guide-pottery .shearwater-glaze-grid .barqs-reference-card h4 { font-size: 1rem; margin: .2rem 0; }

@media (max-width: 1100px) {
  #guide-pottery .shearwater-fish-grid { grid-template-columns: repeat(4, 168px); }
}

.barqs-lightbox { width: fit-content; max-width: 96vw; max-height: 96dvh; border: 0; padding: 1rem; background: var(--paper); box-shadow: 0 22px 70px rgba(0,0,0,.45); }
.barqs-lightbox::backdrop { background: rgba(10,24,29,.78); }
.barqs-lightbox img { display: block; width: auto; max-width: 100%; max-height: calc(96dvh - 4rem); object-fit: contain; }
.barqs-lightbox-info { margin: .8rem 0 0; font-weight: 700; line-height: 1.45; }
.barqs-lightbox-close { display: block; margin: 0 0 .7rem auto; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: .55rem .7rem; font: 700 .76rem/1 var(--sans); cursor: pointer; }

@media (max-width: 900px) {
  .barqs-reference-grid { grid-template-columns: 1fr; }
  .barqs-reference-card img { height: auto; max-height: 420px; }
  #guide-bottles .barqs-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #guide-bottles .barqs-reference-card img { height: 150px; }
  #bottle-dairy .barqs-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bottle-dairy .barqs-reference-card img { height: auto; }
  #guide-pottery .shearwater-fish-grid { grid-template-columns: repeat(4, 168px); }
  #guide-pottery .shearwater-fish-grid .barqs-reference-card img { height: 150px; }
}

@media (max-width: 520px) {
  .barqs-reference-heading { align-items: flex-start; flex-direction: column; }
  #guide-bottles .barqs-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bottle-dairy .barqs-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #guide-pottery .shearwater-fish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
}