/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  CHEMICALS — the shelf                                            ║
   ║  Bottles are absolutely sized by height so they sit on one shelf  ║
   ║  line regardless of the source asset's aspect ratio.              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.shelf {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 66px; padding: 40px 0 0; position: relative; flex-wrap: wrap;
}
/* the shelf plank itself */
.shelf::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #3a2620 10%, #6b5148 50%, #3a2620 90%, transparent);
  box-shadow: 0 3px 12px rgba(0,0,0,0.8);
}

.bottle {
  position: relative; display: block; text-decoration: none;
  filter: brightness(0.78) saturate(0.85);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.bottle img { display: block; width: auto; }
.bottle .lbl {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%,-50%) rotate(-1deg);
  width: 76%; text-align: center;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: #2a1a14;
}
.bottle .sub {
  display: block; font-size: 0.54rem; letter-spacing: 1px;
  color: #6b544a; margin-top: 3px;
}
.bottle:hover { transform: translateY(-10px); filter: brightness(1.12) saturate(1) drop-shadow(0 0 24px rgba(255,45,45,0.5)); }

.b1 img { height: 280px; }
.b2 img { height: 240px; }
.b3 img { height: 150px; }
.b3 .lbl { top: 58%; font-size: 0.64rem; }

/* A bottle with nothing in it yet. Dimmer than the live ones so it
   reads as "not yet", but not so dim the label disappears — at
   brightness 0.55 the word FIXER was invisible against the tin. */
.bottle.empty { filter: brightness(0.78) saturate(0.55); cursor: default; }
.bottle.empty:hover { transform: none; filter: brightness(0.78) saturate(0.55); }
.bottle.empty .lbl { color: #1a120e; }
.bottle.empty .sub { color: #4a3a30; }

/* ---- the plain list underneath ----
   The bottles are the fun part, but a label painted on glass is not a
   great link target and the shelf tells you nothing about where each
   one goes. This is the same set, legible and keyboard-friendly. */
.decant { max-width: 620px; margin: 60px auto 0; }
.decant a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 20px; text-decoration: none;
  border: 1px solid var(--line); border-bottom: none;
  background: var(--panel); transition: 0.25s ease;
}
.decant a:last-child { border-bottom: 1px solid var(--line); }
.decant a:hover { background: var(--inset); border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.decant .name {
  font-family: var(--slab); font-size: 0.98rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text);
  white-space: nowrap;
}
.decant a:hover .name { color: var(--red); }
.decant .what { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.decant .go {
  margin-left: auto; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--amber);
  white-space: nowrap;
}
.decant a.soon { opacity: 0.55; }
.decant a.soon:hover { box-shadow: inset 3px 0 0 var(--muted); border-color: var(--line); }
.decant a.soon .go { color: var(--muted); }

@media screen and (max-width: 700px) {
  .shelf { gap: 18px; }
  .b1 img { height: 150px; }
  .b2 img { height: 130px; }
  .b3 img { height: 84px; }
  .bottle .lbl { font-size: 0.54rem; }
  .bottle .sub { display: none; }
  .decant a { flex-wrap: wrap; gap: 6px 12px; }
  .decant .go { margin-left: 0; width: 100%; }
}