/* Specimen Shelf (v03): the cabinet, its backlit shelves, the jars and their labels.
   Shared by index.html and chapter.html. */

:root {
  --room: #16100a;
  --paper: #f4ebd6;
  --paper-2: #e9dcbf;
  --ink: #2a1c10;
  --ink-2: #5b4430;
  --rule: rgba(112, 78, 42, .62);
  --rule-2: rgba(112, 78, 42, .42);
  --brass-hi: #f2d590;
  --brass: #c2913f;
  --brass-lo: #6e4f1e;
  --glow-1: #fffaf0;
  --glow-2: #f9eac8;
  --glow-3: #e7c690;
  --glow-4: #b98952;
  --glow-5: #6f4527;
  --hand: "La Belle Aurore", "Segoe Script", "Bradley Hand", cursive;
  --print: "Sorts Mill Goudy", "Iowan Old Style", Georgia, serif;
  --post: 10px;
  --over: 0px;
  --edge: 18px;
  --jw: 150px;
  --pad: 6px;
}
@media (min-width: 760px) {
  :root { --post: 24px; --over: 12px; --edge: 26px; --pad: 18px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(255, 214, 150, .12), rgba(255, 214, 150, 0) 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 200, 130, .06), rgba(255, 200, 130, 0) 70%),
    var(--room);
  color: var(--paper);
  font-family: var(--print);
  font-size: 17px;
  line-height: 1.5;
}
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a { color: inherit; }

/* ---------- The cabinet ---------- */

.cabinet {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--post);
  background:
    repeating-linear-gradient(90deg, rgba(255, 210, 160, .045) 0 1px, rgba(0, 0, 0, 0) 1px 6px, rgba(0, 0, 0, .07) 6px 7px, rgba(0, 0, 0, 0) 7px 11px),
    linear-gradient(90deg, #22130a, #4b2e1a 22%, #3d2416 50%, #4b2e1a 78%, #22130a);
}
@media (min-width: 760px) {
  .cabinet { width: calc(100% - 6vw); margin-top: 3vh; }
}

.crown {
  position: relative;
  z-index: 3;
  margin: 0 calc(-1 * var(--post) - var(--over));
  padding: calc(26px + var(--post)) calc(var(--post) + var(--over) + 12px) 24px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 210, 160, .04) 0 1px, rgba(0, 0, 0, 0) 1px 5px, rgba(0, 0, 0, .06) 5px 6px, rgba(0, 0, 0, 0) 6px 10px),
    linear-gradient(180deg, #3d2414, #2b180c);
  box-shadow: 0 10px 18px rgba(8, 4, 0, .5);
}
.crown::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 16px;
  background: linear-gradient(180deg, #8a5a33 0, #6a4224 30%, #3a2212 70%, #1c0e05 100%);
  border-radius: 3px 3px 0 0;
}
.crown::after {
  content: "";
  position: absolute; left: calc(var(--over) + 6px); right: calc(var(--over) + 6px); top: 18px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a06c3e, #4a2b16);
}

.plate {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 40px) 12px;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  background:
    radial-gradient(circle at 12% 28%, rgba(168, 118, 52, .12) 0 9px, rgba(168, 118, 52, 0) 13px),
    radial-gradient(circle at 88% 70%, rgba(150, 100, 40, .1) 0 12px, rgba(150, 100, 40, 0) 17px),
    linear-gradient(180deg, #f7efdc, var(--paper-2));
  border: 6px solid var(--brass);
  border-image: linear-gradient(135deg, var(--brass-hi), #a87a32 38%, #ecc97c 58%, var(--brass-lo)) 1;
  box-shadow: 0 0 0 1px #3a2408, 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--rule-2), inset 0 0 18px rgba(140, 100, 50, .18);
}
.plate::before, .plate::after {
  content: "";
  position: absolute; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c8, #b48638 55%, #5a3f12);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.plate::before { left: -6px; }
.plate::after { right: -6px; }
.plate-name {
  margin: 0;
  padding-left: .26em;
  font-family: var(--print);
  font-weight: 400;
  font-size: clamp(25px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.plate-line {
  margin: 6px 0 0;
  font-style: italic;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.3;
  color: var(--ink-2);
}

/* ---------- The backlit case ---------- */

.case {
  position: relative;
  z-index: 1;
  background: #2b190c;
}
.case::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 6;
  background: #0e0804;
  pointer-events: none;
  animation: lights-on 1s linear both;
}
@keyframes lights-on {
  0% { opacity: .94; }
  12% { opacity: .9; }
  17% { opacity: .38; }
  22% { opacity: .82; }
  30% { opacity: .2; }
  35% { opacity: .5; }
  55% { opacity: .06; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

.shelf {
  position: relative;
  padding-top: calc(var(--jw) * .2 + 8px);
  background: radial-gradient(ellipse 74% 94% at var(--lx, 50%) 60%, var(--glow-1) 0%, var(--glow-2) 24%, var(--glow-3) 50%, var(--glow-4) 78%, var(--glow-5) 100%);
}
.shelf::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.shelf::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 11, 4, .55), rgba(22, 11, 4, 0));
}

.row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  margin: 0;
  padding: 0 var(--pad);
  list-style: none;
}
.slot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 0;
}

.plank {
  --top: calc(var(--jw) * .12 + 3px);
  position: relative;
  z-index: 1;
  height: calc(var(--top) + var(--edge));
  margin-top: calc(var(--jw) * -.12 - 3px);
  background: linear-gradient(180deg,
    #fbe2b0 0, #e7b878 2px, #a8743f 3px, #6d4526 var(--top),
    #2c180b var(--top), #4a2c17 calc(var(--top) + 2px), #3a2212 calc(100% - 5px), #150a03 100%);
  box-shadow: 0 12px 20px -4px rgba(12, 6, 0, .55);
}
.plank::before {
  content: "";
  position: absolute; left: 0; right: 0; top: var(--top); bottom: 0;
  background: repeating-linear-gradient(179.2deg, rgba(255, 215, 160, .06) 0 1px, rgba(0, 0, 0, 0) 1px 4px, rgba(0, 0, 0, .09) 4px 5px, rgba(0, 0, 0, 0) 5px 9px);
}
.plank-tag {
  position: absolute;
  left: 50%;
  top: calc(var(--top) + (var(--edge) - 15px) / 2);
  transform: translateX(-50%);
  height: 15px;
  min-width: 26px;
  padding: 0 8px;
  font: 400 11px/15px var(--print);
  letter-spacing: .14em;
  text-align: center;
  color: #3a2610;
  background: linear-gradient(180deg, #f4dc98, #c3923f 55%, #8a6224);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- One jar ---------- */

.jar-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 200 / 320;
  container-type: inline-size;
}
.jar-art > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.j-lag, .j-bub, .j-sweep { position: absolute; display: block; }
.j-lag {
  transform: translate3d(0, calc(var(--lag, 0) * 1px), 0);
  transition: transform .9s cubic-bezier(.22, .9, .3, 1);
}
.j-spec {
  display: block;
  width: 100%; height: 100%;
  animation: drift var(--dur, 9s) ease-in-out var(--del, 0s) infinite alternate;
}
.j-spec svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(calc(var(--rot) * -1)); }
  35% { transform: translate(var(--dx), calc(var(--dy) * -1)) rotate(calc(var(--rot) * .4)); }
  70% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * -.4)) rotate(var(--rot)); }
  100% { transform: translate(calc(var(--dx) * -.2), var(--dy)) rotate(calc(var(--rot) * -.3)); }
}
.q-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: q-dot 5.5s ease-in-out infinite alternate;
}
@keyframes q-dot {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1.6px, -3px); }
  100% { transform: translate(-1.2px, 2px); }
}
.hand { font-family: var(--hand); }

.is-block .j-spec { animation: none; }
.is-block .j-lag { transform: none; transition: none; }

.j-bub { overflow: hidden; pointer-events: none; }
.j-bub i {
  position: absolute;
  left: var(--bx); bottom: 0;
  width: 4cqi; height: 100%;
  opacity: 0;
  background: radial-gradient(circle at 50% calc(100% - 2cqi), rgba(255, 255, 255, .95) 0 calc(.7cqi * var(--bs)), rgba(255, 255, 255, .3) calc(1.05cqi * var(--bs)) calc(1.4cqi * var(--bs)), rgba(255, 255, 255, 0) calc(1.6cqi * var(--bs)));
  animation: rise var(--bd, 14s) linear var(--bl, 0s) infinite;
}
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  3% { opacity: .9; }
  40% { opacity: .8; }
  44% { transform: translateY(-94%); opacity: 0; }
  100% { transform: translateY(-94%); opacity: 0; }
}

.j-sweep { overflow: hidden; pointer-events: none; }
.j-sweep::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-16deg);
  animation: sweep 9s ease-in-out var(--sd, 1.5s) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-120%) skewX(-16deg); }
  22% { transform: translateX(320%) skewX(-16deg); }
  100% { transform: translateX(320%) skewX(-16deg); }
}

.j-lid { transform-origin: 50% 20%; }

/* The label, pasted on the glass. Sizes follow the jar's width. */
.label {
  position: absolute;
  left: var(--l-x);
  width: var(--l-w);
  bottom: var(--l-b);
  display: block;
  padding: 3.2cqi 3.6cqi 3.6cqi;
  transform: rotate(var(--lr, 0deg));
  transform-origin: 50% 100%;
  transition: transform .35s ease;
  color: var(--ink);
  text-align: center;
  line-height: 1;
  background:
    radial-gradient(circle at 16% 26%, rgba(160, 110, 50, .11) 0 2cqi, rgba(160, 110, 50, 0) 2.6cqi),
    radial-gradient(circle at 84% 78%, rgba(150, 100, 40, .09) 0 3cqi, rgba(150, 100, 40, 0) 3.8cqi),
    linear-gradient(90deg, rgba(120, 88, 48, .2), rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 84%, rgba(120, 88, 48, .2)),
    var(--paper);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 0 0 calc(1px + 1cqi) rgba(244, 235, 214, 0),
    inset 0 0 0 calc(2px + 1cqi) var(--rule-2),
    0 .6cqi 1.6cqi rgba(40, 24, 8, .3);
}
.is-block .label {
  background:
    radial-gradient(circle at 80% 30%, rgba(160, 110, 50, .1) 0 2.4cqi, rgba(160, 110, 50, 0) 3cqi),
    var(--paper);
}
.lbl-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2cqi;
  margin-bottom: 1.8cqi;
}
.lbl-no { font-family: var(--hand); font-size: 7.8cqi; white-space: nowrap; text-shadow: 0 0 .4px rgba(42, 28, 16, .9); }
.lbl-pre {
  font-family: var(--print);
  font-size: 5.4cqi;
  font-variant: small-caps;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.lbl-kind { font-family: var(--hand); font-size: 6.4cqi; color: var(--ink-2); white-space: nowrap; }
.lbl-title {
  display: block;
  font-family: var(--hand);
  font-size: 9cqi;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-shadow: 0 0 .5px rgba(42, 28, 16, .9);
}
.label--blank .lbl-title { min-height: 2.4em; }
@container (max-width: 190px) {
  .label { left: calc(var(--l-x) - 8%); width: calc(var(--l-w) + 16%); padding: 2.6cqi 2.8cqi 3cqi; }
  .lbl-title { font-size: 10cqi; line-height: 1.12; }
  .lbl-no { font-size: 8.4cqi; }
  .lbl-kind { font-size: 7.4cqi; }
  .lbl-pre { font-size: 6.2cqi; }
}

.is-empty { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .case::after { animation: none; display: none; }
  .j-spec, .q-dot, .j-bub i, .j-sweep::before { animation: none !important; }
  .j-bub { display: none; }
  .j-lag { transition: none; transform: none; }
  .jar .jar-art, .label { transition: none; }
}