/* Lace & Leather Arcane — Bookmaker's Specimen Cabinet */

body{
  margin:0;
  font-family:var(--font-body);
  color:#eee7da;
  background:#0b0807;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("/assets/oak-web.webp") center / cover no-repeat;
  filter:brightness(.72) contrast(1.08) saturate(.9);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(193,137,71,.09), transparent 34rem),
    linear-gradient(180deg, rgba(5,3,2,.24), rgba(5,3,2,.72));
}

main.specimen-shell{
  width:min(1240px, calc(100% - 28px));
  margin:0 auto;
  padding:22px 0 62px;
}

.specimen-back-link{
  display:inline-flex;
  align-items:center;
  margin:0 0 14px 4px;
  color:rgba(239,225,203,.70);
  font-size:12px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease;
}

.specimen-back-link:hover{
  color:#f0d8ad;
  transform:translateX(-2px);
}

.specimen-header{
  width:min(820px, calc(100% - 22px));
  margin:0 auto 16px;
  text-align:center;
}

.specimen-header h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.08;
  letter-spacing:.055em;
  text-wrap:balance;
  text-shadow:0 4px 18px rgba(0,0,0,.8);
}

.specimen-strap{
  max-width:720px;
  margin:9px auto 0;
  color:rgba(244,225,194,.88);
  font-size:clamp(14px, 1.55vw, 17px);
  line-height:1.35;
  letter-spacing:.025em;
}

.page-sub{
  max-width:720px;
  margin:5px auto 0;
  color:rgba(239,225,203,.58);
  font-size:clamp(13px, 1.45vw, 15px);
  line-height:1.35;
  font-style:italic;
}

.specimen-related{
  width:min(820px, calc(100% - 28px));
  margin:22px auto 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.specimen-related a{
  display:grid;
  gap:3px;
  padding:12px 14px;
  border:1px solid rgba(214,169,103,.16);
  border-radius:10px;
  background:rgba(11,7,5,.28);
  color:#e7c991;
  text-decoration:none;
  text-align:left;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.specimen-related a:hover{
  border-color:rgba(229,193,132,.36);
  background:rgba(25,15,9,.46);
  transform:translateY(-1px);
}

.specimen-related span{
  color:rgba(239,225,203,.48);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.specimen-related strong{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  letter-spacing:.035em;
}

.cabinet-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid rgba(214,169,103,.2);
  border-radius:18px;
  box-shadow:0 28px 72px rgba(0,0,0,.62);
  isolation:isolate;
  background:#160f0b;
}

.cabinet-art,
.cabinet-art picture,
.cabinet-art img{
  display:block;
  width:100%;
}

.cabinet-art img{
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}

.cabinet-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,226,172,.06), inset 0 -50px 90px rgba(0,0,0,.2);
}

.cabinet-hotspots{
  position:absolute;
  inset:0;
  z-index:2;
}

.cabinet-hotspot{
  position:absolute;
  border:1px solid rgba(219,179,116,.42);
  border-radius:4px;
  padding:8px 12px;
  color:#ead7b7;
  background:
    linear-gradient(180deg, rgba(61,40,24,.78), rgba(30,18,12,.82));
  box-shadow:
    inset 0 0 0 1px rgba(255,230,182,.08),
    0 6px 16px rgba(0,0,0,.35);
  font-family:var(--font-display);
  font-size:clamp(10px, 1.05vw, 13px);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
  transform:translate(-50%, -50%);
}

.cabinet-hotspot > span{
  position:relative;
  z-index:2;
}

.cabinet-hotspot::before{
  content:"";
  position:absolute;
  z-index:1;
  top:-28%;
  bottom:-28%;
  left:-58%;
  width:34%;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,235,190,.08) 28%,
      rgba(255,245,216,.72) 49%,
      rgba(255,255,246,.92) 52%,
      rgba(255,224,168,.18) 72%,
      transparent 100%
    );
  filter:blur(.35px);
  transform:skewX(-18deg);
  animation:cabinetLabelShimmer 4.6s ease-in-out infinite;
}

.cabinet-hotspot::after{
  content:"✦";
  position:absolute;
  z-index:3;
  top:10%;
  right:8%;
  pointer-events:none;
  color:rgba(255,246,211,.96);
  font-size:9px;
  line-height:1;
  opacity:.15;
  text-shadow:
    -18px 12px 0 rgba(255,230,174,.72),
    8px 20px 0 rgba(255,248,219,.55);
  filter:drop-shadow(0 0 3px rgba(255,225,160,.9));
  animation:cabinetLabelTwinkle 2.8s ease-in-out infinite;
}

@keyframes cabinetLabelShimmer{
  0%, 42%{
    left:-58%;
    opacity:0;
  }
  48%{
    opacity:.22;
  }
  62%{
    opacity:.86;
  }
  76%{
    left:124%;
    opacity:.18;
  }
  77%, 100%{
    left:124%;
    opacity:0;
  }
}

@keyframes cabinetLabelTwinkle{
  0%, 100%{
    opacity:.08;
    transform:scale(.7) rotate(0deg);
  }
  46%{
    opacity:.18;
    transform:scale(.82) rotate(8deg);
  }
  52%{
    opacity:1;
    transform:scale(1.3) rotate(18deg);
  }
  61%{
    opacity:.24;
    transform:scale(.86) rotate(25deg);
  }
}

.cabinet-hotspot:hover,
.cabinet-hotspot:focus-visible{
  border-color:rgba(245,206,147,.78);
  background:linear-gradient(180deg, rgba(87,57,33,.9), rgba(38,23,14,.9));
  transform:translate(-50%, -50%) translateY(-2px);
  outline:none;
}

.cabinet-hotspot[data-category="heraldry"]{ left:47%; top:40%; }
.cabinet-hotspot[data-category="books"]{ left:66%; top:40%; }
.cabinet-hotspot[data-category="celestial"]{ left:47%; top:52%; }
.cabinet-hotspot[data-category="wax"]{ left:66%; top:52%; }
.cabinet-hotspot[data-category="lunar"]{ left:47%; top:64%; }
.cabinet-hotspot[data-category="ornaments"]{ left:66%; top:64%; }

.cabinet-hotspot[data-category="books"]::before,
.cabinet-hotspot[data-category="books"]::after{ animation-delay:.55s; }

.cabinet-hotspot[data-category="celestial"]::before,
.cabinet-hotspot[data-category="celestial"]::after{ animation-delay:1.05s; }

.cabinet-hotspot[data-category="wax"]::before,
.cabinet-hotspot[data-category="wax"]::after{ animation-delay:1.55s; }

.cabinet-hotspot[data-category="lunar"]::before,
.cabinet-hotspot[data-category="lunar"]::after{ animation-delay:2.05s; }

.cabinet-hotspot[data-category="ornaments"]::before,
.cabinet-hotspot[data-category="ornaments"]::after{ animation-delay:2.55s; }

.stage-hint{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  padding:5px 10px;
  border-radius:999px;
  color:rgba(238,220,190,.78);
  background:rgba(12,8,5,.55);
  border:1px solid rgba(224,187,129,.15);
  backdrop-filter:blur(3px);
  font-size:13px;
  letter-spacing:.035em;
  pointer-events:none;
}

/* Slide-up specimen drawer
   The motion is intentionally unchanged. The physical drawer artwork only
   replaces the old flat bottom-sheet skin. */
.specimen-drawer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  height:clamp(360px, 56dvh, 500px);
  max-height:calc(100dvh - 44px);
  padding:0;
  display:grid;
  /* Match the gold rectangle in the 1463 x 906 drawer artwork. Empty
     grid tracks follow its scaled bounds, including the space for the handle. */
  grid-template-columns:9.5% minmax(0, 1fr) 9.5%;
  grid-template-rows:28.5% auto minmax(0, 1fr) auto 14%;
  color:#f7ead7;
  background:
    linear-gradient(180deg, rgba(22,7,8,.03), rgba(22,7,8,.10)),
    url("/assets/specimen-drawer-oxblood-rotated.webp") center top / 100% 100% no-repeat;
  border-top:0;
  box-shadow:0 -24px 70px rgba(0,0,0,.68);
  transform:translateY(calc(100% + 28px));
  visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s linear .28s;
  isolation:isolate;
}

.specimen-drawer.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s;
}

/* The brass handle in the artwork is now the drawer grip. */
.drawer-grip{
  display:none;
}

.drawer-head{
  grid-column:2;
  grid-row:2;
  width:min(1180px, 100%);
  min-width:0;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 6% 6px;
}

.drawer-head > div{
  min-width:0;
  text-align:left;
}

.drawer-kicker{
  display:block;
  margin-bottom:2px;
  color:rgba(225,196,153,.67);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.drawer-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(19px, 2vw, 26px);
  line-height:1.12;
  font-weight:600;
  letter-spacing:.035em;
}

.drawer-close,
.preview-close,
.specimen-add,
.preview-add{
  appearance:none;
  border:1px solid rgba(228,188,126,.34);
  color:#f2dfbd;
  background:rgba(7,5,4,.38);
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:600;
  cursor:pointer;
}

.specimen-drawer .drawer-head .drawer-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:0;
  font-size:0;
  line-height:1.2;
  white-space:nowrap;
  background:url("/assets/x-button.webp") center / 36px 36px no-repeat;
  box-shadow:none;
  backdrop-filter:none;
}

.drawer-track{
  width:min(1180px, 100%);
  height:100%;
  min-width:0;
  min-height:0;
  margin:0 auto;
  display:flex;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:3px 2px 7px;
  scrollbar-width:thin;
  scrollbar-color:rgba(222,183,122,.4) transparent;
}

.drawer-track::-webkit-scrollbar{ height:6px; }
.drawer-track::-webkit-scrollbar-track{ background:transparent; }
.drawer-track::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(222,183,122,.35);
}

.drawer-track-wrap{
  grid-column:2;
  grid-row:3;
  position:relative;
  width:min(1180px, 100%);
  min-width:0;
  min-height:0;
  margin:0 auto;
  padding-right:18px;
}

.drawer-track-wrap .drawer-track{
  width:100%;
  margin:0;
}

/* Desktop-friendly vertical control that drives the horizontal specimen strip. */
.drawer-scroll-rail{
  position:absolute;
  top:4px;
  right:2px;
  bottom:10px;
  width:10px;
  min-height:70px;
  border-radius:999px;
  border:1px solid rgba(229,193,132,.25);
  background:rgba(24,5,7,.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,225,169,.025),
    0 2px 8px rgba(0,0,0,.28);
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.drawer-scroll-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  bottom:7px;
  width:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(225,185,119,.18);
}

.drawer-scroll-thumb{
  position:absolute;
  top:0;
  left:1px;
  width:6px;
  min-height:30px;
  border-radius:999px;
  background:
    linear-gradient(90deg, #76501f, #d0a358 46%, #8a5d27);
  box-shadow:
    0 1px 4px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,232,181,.25);
  cursor:grab;
  will-change:transform;
}

.drawer-scroll-rail.is-dragging .drawer-scroll-thumb{
  cursor:grabbing;
  box-shadow:
    0 1px 5px rgba(0,0,0,.6),
    0 0 7px rgba(211,165,87,.20),
    inset 0 0 0 1px rgba(255,235,189,.34);
}

.drawer-scroll-rail:focus-visible{
  outline:1px solid rgba(244,207,143,.70);
  outline-offset:3px;
}

.drawer-scroll-rail.is-disabled{
  opacity:.28;
  pointer-events:none;
}

@media (pointer:coarse){
  .drawer-track-wrap{
    padding-right:0;
  }

  .drawer-scroll-rail{
    display:none;
  }
}


/* Keep purchase controls beside the details at every viewport size. */
.specimen-card{
  flex:0 0 clamp(142px, 17vw, 185px);
  min-width:0;
  min-height:0;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 44px;
  grid-template-rows:minmax(0, 1fr) 34px;
  gap:4px;
  padding:4px;
  border:1px solid rgba(221,181,119,.24);
  border-radius:10px;
  background:
    linear-gradient(165deg, rgba(216,189,146,.13), rgba(70,45,27,.12)),
    rgba(8,6,5,.3);
  box-shadow:inset 0 0 18px rgba(255,222,172,.025);
}

.specimen-art{
  grid-column:1 / -1;
  grid-row:1;
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:2px;
  border:0;
  border-radius:7px;
  overflow:hidden;
  cursor:zoom-in;
  background:
    radial-gradient(circle at 50% 46%, rgba(230,207,169,.17), rgba(27,18,12,.15) 67%),
    rgba(10,7,5,.25);
}

.specimen-art::before{
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  width:6px;
  height:6px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#d7bb84;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}

.specimen-art img{
  display:block;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.specimen-meta{
  grid-column:1;
  grid-row:2;
  align-self:center;
  min-width:0;
  text-align:left;
}

.specimen-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.02em;
}

.specimen-number{
  display:block;
  margin-top:1px;
  color:rgba(234,217,190,.58);
  font-size:11px;
  line-height:1.2;
}

.specimen-add-label{
  display:none;
}

.specimen-add-compact{
  display:inline;
}

.specimen-add{
  grid-column:2;
  grid-row:2;
  width:44px;
  min-height:34px;
  padding:4px 2px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

.specimen-add:hover,
.drawer-close:hover,
.preview-add:hover,
.preview-close:hover{
  border-color:rgba(239,204,148,.75);
  background:rgba(105,67,39,.42);
}

.drawer-foot{
  grid-column:2;
  grid-row:4;
  width:min(1180px,100%);
  min-width:0;
  margin:0 auto;
  padding:4px 6% 0;
  color:rgba(230,215,192,.6);
  font-size:11px;
  line-height:1.25;
  text-align:center;
}

/* Homepage cart burst, mounted in a fixed overlay above the specimen strip. */
.specimen-shop .ll-plus-pop{
  display:block;
}

.cart-plus-burst{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  pointer-events:none;
  color:#fff3bf;
  font-family:var(--font-display);
  font-size:60px;
  font-weight:700;
  line-height:1;
  text-shadow:
    0 2px 3px rgba(0,0,0,.90),
    0 0 14px rgba(255,238,179,.98),
    0 0 26px rgba(236,177,71,.88),
    0 0 42px rgba(236,177,71,.58);
  transform:translate(-50%, -50%) scale(.55);
  animation:
    ll-cart-plus 1.25s cubic-bezier(.18,.72,.22,1) forwards,
    ll-cart-shimmer 1.25s ease-in-out forwards;
  animation-duration:1.25s !important;
}

.cart-plus-burst::before,
.cart-plus-burst::after{
  position:absolute;
  pointer-events:none;
  color:#fffbe6;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 14px rgba(255,238,179,.98),
    0 0 24px rgba(236,177,71,.88);
  animation:ll-cart-sparkle 1.25s ease-out forwards;
  animation-duration:1.25s !important;
}

.cart-plus-burst::before{
  content:"✦";
  left:-18px;
  top:-8px;
  font-size:22px;
}

.cart-plus-burst::after{
  content:"✧";
  right:-20px;
  bottom:-4px;
  font-size:26px;
  animation-direction:reverse;
}

@keyframes ll-cart-plus{
  0%{
    opacity:0;
    transform:translate(-50%, -42%) scale(.55);
  }
  20%{
    opacity:1;
    transform:translate(-50%, -62%) scale(1.08);
  }
  72%{
    opacity:1;
    transform:translate(-50%, -122%) scale(1.24) rotate(4deg);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -170%) scale(1.38) rotate(8deg);
  }
}

@keyframes ll-cart-shimmer{
  0%,100%{
    color:#fff3bf;
    text-shadow:
      0 2px 3px rgba(0,0,0,.90),
      0 0 14px rgba(255,238,179,.98),
      0 0 26px rgba(236,177,71,.88),
      0 0 42px rgba(236,177,71,.58);
  }
  34%{
    color:#ffffff;
    text-shadow:
      0 2px 3px rgba(0,0,0,.90),
      0 0 9px rgba(255,255,255,1),
      0 0 20px rgba(255,247,210,1),
      0 0 36px rgba(255,211,112,.98),
      0 0 58px rgba(236,177,71,.80);
  }
  64%{
    color:#fff8d8;
    text-shadow:
      0 2px 3px rgba(0,0,0,.90),
      0 0 12px rgba(255,255,255,.98),
      0 0 28px rgba(255,233,162,.98),
      0 0 48px rgba(236,177,71,.72);
  }
}

@keyframes ll-cart-sparkle{
  0%,100%{
    opacity:0;
    transform:scale(.25) rotate(0deg);
  }
  24%{
    opacity:1;
    transform:scale(1.15) rotate(18deg);
  }
  46%{
    opacity:.25;
    transform:scale(.65) rotate(38deg);
  }
  68%{
    opacity:1;
    transform:scale(1.35) rotate(62deg);
  }
  84%{
    opacity:.45;
    transform:scale(.80) rotate(82deg);
  }
}

/* On-demand close examination */
.specimen-preview{
  width:min(760px, calc(100% - 28px));
  max-height:min(88dvh, 840px);
  margin:auto;
  padding:14px;
  border:1px solid rgba(229,187,121,.38);
  border-radius:16px;
  color:#f0e5d4;
  background:
    linear-gradient(180deg, rgba(83,52,32,.96), rgba(20,13,10,.99));
  box-shadow:0 26px 90px rgba(0,0,0,.82);
}

.specimen-preview::backdrop{
  background:rgba(5,3,2,.74);
  backdrop-filter:blur(4px);
}

.preview-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  font-size:22px;
  line-height:1;
}

.preview-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
  gap:16px;
  align-items:center;
}

.preview-frame{
  display:grid;
  place-items:center;
  min-height:280px;
  max-height:68dvh;
  padding:18px;
  border:1px solid rgba(225,189,133,.23);
  border-radius:12px;
  background:
    radial-gradient(circle at center, rgba(222,199,161,.16), rgba(10,7,5,.35) 70%);
}

.preview-frame img{
  max-width:100%;
  max-height:62dvh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.preview-copy{
  text-align:left;
  padding:6px 4px;
}

.preview-kicker{
  color:rgba(225,195,151,.65);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.preview-copy h2{
  margin:6px 0 5px;
  font-family:var(--font-display);
  font-size:clamp(20px, 3vw, 30px);
  font-weight:600;
}

.preview-category{
  margin:0 0 18px;
  color:rgba(237,221,197,.72);
}

.preview-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(230,194,136,.17);
}

.preview-price{
  font-family:var(--font-display);
  letter-spacing:.05em;
}

.preview-add{
  min-height:42px;
  padding:8px 14px;
}

.seo-product-list{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:820px){
  body::before{
    background:url("/assets/oak-mobile.webp") center / cover no-repeat;
  }

  main.specimen-shell{
    width:min(100%, 560px);
    padding:12px 0 40px;
  }

  .specimen-back-link{
    margin:0 0 10px 16px;
    font-size:10px;
  }

  .specimen-header{
    width:calc(100% - 34px);
    margin-bottom:10px;
  }

  .specimen-header h1{
    font-size:clamp(24px, 7.2vw, 30px);
  }

  .specimen-strap{
    margin-top:7px;
    font-size:14px;
  }

  .page-sub{
    margin-top:4px;
    font-size:13px;
  }

  .specimen-related{
    grid-template-columns:1fr;
    margin-top:16px;
  }

  .cabinet-stage{
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  /* Mobile artwork already carries its own labeled specimen compartments.
     The buttons become invisible hit areas so the art remains untouched. */
  .cabinet-hotspot{
    transform:none;
    padding:0;
    color:transparent;
    background:transparent;
    border-color:transparent;
    box-shadow:none;
    border-radius:10px;
  }

  .cabinet-hotspot:hover{
    transform:none;
    background:rgba(238,199,137,.04);
    border-color:rgba(238,199,137,.14);
  }

  .cabinet-hotspot:focus-visible{
    transform:none;
    background:rgba(238,199,137,.06);
    border:2px solid rgba(248,216,163,.72);
  }

  /* On mobile the labels are baked into the cabinet artwork, so the shimmer
     rides over the invisible label hit areas rather than replacing the art. */
  .cabinet-hotspot::before{
    background:
      linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,240,201,.04) 28%,
        rgba(255,248,226,.44) 49%,
        rgba(255,255,247,.74) 52%,
        rgba(255,228,176,.12) 72%,
        transparent 100%
      );
  }

  .cabinet-hotspot::after{
    font-size:8px;
    text-shadow:
      -14px 10px 0 rgba(255,230,174,.62),
      7px 15px 0 rgba(255,248,219,.46);
  }

  /* Hit areas follow the six printed label cards in the readable mobile cabinet. */
  .cabinet-hotspot[data-category="heraldry"]{ left:10%; top:26%; width:31%; height:10%; }
  .cabinet-hotspot[data-category="celestial"]{ left:61%; top:26%; width:32%; height:10%; }
  .cabinet-hotspot[data-category="books"]{ left:21%; top:45%; width:29%; height:11%; }
  .cabinet-hotspot[data-category="wax"]{ left:63%; top:45%; width:30%; height:10%; }
  .cabinet-hotspot[data-category="lunar"]{ left:24%; top:65%; width:33%; height:10%; }
  .cabinet-hotspot[data-category="ornaments"]{ left:67%; top:78%; width:31%; height:10%; }

  .stage-hint{
    bottom:1.25%;
    font-size:12px;
  }

  .specimen-drawer{
    height:clamp(360px, 56dvh, 480px);
  }

  .drawer-head{
    align-items:center;
  }

  .drawer-head h2{
    font-size:clamp(16px, 4.5vw, 19px);
  }

  .drawer-track{
    gap:10px;
  }

  .specimen-card{
    flex-basis:142px;
  }

  .preview-grid{
    grid-template-columns:1fr;
  }

  .preview-frame{
    min-height:220px;
    max-height:48dvh;
  }

  .preview-frame img{
    max-height:43dvh;
  }
}

@media (max-width:390px){
  .stage-hint{ display:none; }
  .specimen-header h1{ font-size:20px; }
  .page-sub{ font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .specimen-drawer{ transition:none; }
}


/* Oxblood specimen drawer skin */
.specimen-drawer .drawer-head,
.specimen-drawer .drawer-track,
.specimen-drawer .drawer-foot{
  width:min(1180px, 100%);
}

.specimen-drawer .drawer-head h2{
  text-shadow:0 2px 10px rgba(16,3,4,.78);
}

.specimen-drawer .drawer-kicker{
  color:rgba(245,211,155,.78);
}

.specimen-drawer .drawer-close{
  border-color:rgba(229,188,118,.52);
  background:rgba(37,8,10,.54);
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  backdrop-filter:blur(2px);
}

.specimen-drawer .specimen-card{
  border-color:rgba(232,193,126,.30);
  background:
    linear-gradient(165deg, rgba(230,197,145,.10), rgba(54,10,13,.08)),
    rgba(24,4,7,.26);
  box-shadow:
    inset 0 0 18px rgba(255,222,172,.03),
    0 4px 14px rgba(24,3,6,.12);
}

/* Short windows need more of the viewport to keep every control on leather. */
@media (max-height:600px){
  .specimen-drawer{
    height:calc(100dvh - 44px);
  }
}