/* Lace & Leather Arcane | The Bookmaker's Specimen Cabinet
 * Landscape website artwork supplied and approved October 19, 2026.
 * Desktop uses an accurate six-plaque hit map over the ACTUAL artwork.
 * Phone / <=820px keeps its original portrait art, hotspots and bottom drawer.
 */

/* Mobile remains exactly as originally designed. */
@media (max-width:820px) {
  .cabinet-layout { display:contents; }
  .cabinet-heading-kicker,
  .cabinet-index,
  .instruction-pointer { display:none !important; }
  .instruction-touch { display:inline; }
}

/* MOBILE LABEL SHIMMER FIX
   The original label buttons deliberately occupy generous touch areas.
   The artwork's parchment plates are smaller and sit at different Y offsets.
   Paint shimmer only on the measured plaque footprint, never the touch zone. */
@media (max-width:820px) {
  .cabinet-hotspot {
    --plaque-x:52%;
    --plaque-y:60%;
    --plaque-w:75%;
    --plaque-h:50%;
    /* Preserve each category's existing positions, widths and hit heights. */
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }

  /* Remove lingering iOS :hover "glass panes" from the button itself. */
  .cabinet-hotspot:hover,
  .cabinet-hotspot:focus-visible,
  .cabinet-hotspot[aria-expanded="true"] {
    transform:none;
    outline:none;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }

  .cabinet-hotspot::before,
  .cabinet-hotspot::after {
    content:"";
    display:block;
    position:absolute;
    left:var(--plaque-x);
    top:var(--plaque-y);
    right:auto;
    bottom:auto;
    width:var(--plaque-w);
    height:var(--plaque-h);
    padding:0;
    box-sizing:border-box;
    border-radius:4px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    text-shadow:none;
    filter:none;
    background-repeat:no-repeat;
  }

  /* Polished parchment edge: only visible while engaged. */
  .cabinet-hotspot::before {
    z-index:1;
    opacity:0;
    border:1px solid rgba(255,226,168,.52);
    background:linear-gradient(180deg,
      rgba(255,250,224,.075),
      rgba(251,222,168,.11) 62%,
      rgba(255,245,218,.035));
    box-shadow:
      inset 0 1px 0 rgba(255,255,232,.19),
      0 0 10px rgba(244,190,102,.22),
      0 0 18px rgba(255,218,145,.10);
    animation:none;
    transition:opacity .2s ease;
    transition-duration:.2s !important;
  }

  /* A narrow, slow golden sweep CLIPPED to each label-sized pseudo-element. */
  .cabinet-hotspot::after {
    z-index:3;
    opacity:0;
    color:transparent;
    font-size:0;
    line-height:0;
    border:0;
    box-shadow:none;
    background:
      linear-gradient(105deg,
        transparent 29%,
        rgba(255,247,218,.035) 40%,
        rgba(255,255,242,.54) 50%,
        rgba(255,238,190,.18) 58%,
        transparent 70%);
    background-size:250% 100%;
    background-position:145% 50%;
    animation:mobilePlaqueGleam 5.3s ease-in-out infinite;
    animation-duration:5.3s !important;
    animation-iteration-count:infinite !important;
  }

  @keyframes mobilePlaqueGleam {
    0%,36% {
      opacity:0;
      background-position:145% 50%;
    }
    48% { opacity:.76; }
    66% {
      opacity:.58;
      background-position:-70% 50%;
    }
    72%,100% {
      opacity:0;
      background-position:-70% 50%;
    }
  }

  .cabinet-hotspot:hover::before,
  .cabinet-hotspot:focus-visible::before,
  .cabinet-hotspot[aria-expanded="true"]::before {
    opacity:1;
  }

  .cabinet-hotspot:hover::after,
  .cabinet-hotspot:focus-visible::after,
  .cabinet-hotspot[aria-expanded="true"]::after {
    animation-duration:3.9s !important;
  }

  /* Keyboard accessibility: focus indication follows the physical plaque. */
  .cabinet-hotspot:focus-visible::before {
    border:2px solid rgba(255,231,176,.9);
    box-shadow:0 0 0 1px rgba(35,21,12,.7),0 0 12px rgba(250,208,142,.45);
  }

  /* Per-plaque dimensions mapped to the 864 × 1536 mobile cabinet image. */
  .cabinet-hotspot[data-category="heraldry"] {
    --plaque-x:50%; --plaque-y:62%; --plaque-w:69%; --plaque-h:52%;
  }
  .cabinet-hotspot[data-category="celestial"] {
    --plaque-x:54%; --plaque-y:64%; --plaque-w:75%; --plaque-h:49%;
  }
  .cabinet-hotspot[data-category="books"] {
    --plaque-x:52%; --plaque-y:59%; --plaque-w:78%; --plaque-h:44%;
  }
  .cabinet-hotspot[data-category="wax"] {
    --plaque-x:50%; --plaque-y:59%; --plaque-w:74%; --plaque-h:53%;
  }
  .cabinet-hotspot[data-category="lunar"] {
    --plaque-x:51%; --plaque-y:55%; --plaque-w:79%; --plaque-h:52%;
  }
  .cabinet-hotspot[data-category="ornaments"] {
    --plaque-x:53%; --plaque-y:56%; --plaque-w:79%; --plaque-h:52%;
  }
}

/* The desktop composition itself contains its heading, instructions and
   six gold-lettered plaques. Do not repeat them above or below the image. */
@media (min-width:821px) {
  body.specimen-shop {
    background-color:#090605;
  }

  body.specimen-shop::after {
    background:
      radial-gradient(ellipse at 50% 20%,rgba(126,75,35,.16),transparent 60%),
      linear-gradient(90deg,rgba(5,3,2,.55),rgba(8,5,3,.22) 50%,rgba(5,3,2,.55));
  }

  main.specimen-shell {
    width:min(1600px,calc(100% - clamp(24px,4.5vw,88px)));
    margin:0 auto;
    padding:clamp(20px,3vh,36px) 0 80px;
  }

  .cabinet-layout {
    display:block;
    width:100%;
  }

  /* Retain the semantic h1/instructions for accessibility and search.
     They're visually hidden because the artwork already prints them. */
  .specimen-header {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }

  .cabinet-index { display:none !important; }
  .stage-hint { display:none !important; }
  .instruction-touch { display:none; }
  .instruction-pointer { display:inline; }

  .cabinet-stage {
    position:relative;
    width:min(100%,1536px);
    max-width:1536px;
    margin:0 auto;
    overflow:hidden;
    isolation:isolate;
    border:3px solid #271910;
    border-radius:10px;
    background:#110a07;
    box-shadow:
      0 0 0 1px rgba(229,183,119,.64),
      0 0 0 6px rgba(12,8,5,.8),
      0 0 0 7px rgba(182,133,70,.27),
      0 24px 75px rgba(0,0,0,.76);
  }

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

  .cabinet-art img {
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
  }

  .cabinet-stage::after {
    border-radius:6px;
    box-shadow:inset 0 0 0 1px rgba(245,205,145,.13);
  }

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

  /* The easy-to-hit button is larger than the actual parchment plaque.
     Only its pseudo-elements shine. Plaques are approximately 11.8% of
     the 1536px image wide and 7.7% of the 864px image tall, so 74% x 73%
     inside a 16% x 10.5% hotspot matches the printed plate closely. */
  .cabinet-hotspot {
    --plaque-w:74%;
    --plaque-h:73%;
    position:absolute;
    width:16%;
    height:10.5%;
    box-sizing:border-box;
    transform:translate(-50%,-50%);
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:transparent;
    box-shadow:none;
    cursor:pointer;
    transition:none;
  }

  .cabinet-hotspot > span {
    opacity:0;
    font-size:0;
  }

  /* Bound BOTH the ambient shimmer and hover glow to the parchment itself,
     not to the larger transparent click target. */
  .cabinet-hotspot::before,
  .cabinet-hotspot::after {
    display:block !important;
    content:"" !important;
    position:absolute;
    left:50%;
    top:50%;
    right:auto;
    bottom:auto;
    width:var(--plaque-w);
    height:var(--plaque-h);
    box-sizing:border-box;
    transform:translate(-50%,-50%);
    border-radius:4px;
    pointer-events:none;
    filter:none;
    text-shadow:none;
  }

  .cabinet-hotspot::before {
    z-index:1;
    opacity:0;
    border:1px solid rgba(255,229,180,.52);
    background:linear-gradient(180deg,
      rgba(255,249,225,.065),
      rgba(249,211,145,.12) 68%,
      rgba(255,239,202,.04));
    box-shadow:
      inset 0 1px 1px rgba(255,252,229,.18),
      0 0 12px rgba(247,194,106,.22),
      0 0 22px rgba(255,220,151,.10);
    animation:none;
    transition:opacity .19s ease,border-color .19s ease;
    transition-duration:.19s !important;
  }

  .cabinet-hotspot::after {
    z-index:2;
    opacity:.78;
    color:transparent;
    font-size:0;
    background:linear-gradient(105deg,
      transparent 27%,
      rgba(255,250,230,.035) 36%,
      rgba(255,253,236,.43) 49%,
      rgba(255,232,181,.14) 59%,
      transparent 70%);
    background-size:240% 100%;
    background-position:145% 50%;
    background-repeat:no-repeat;
    animation:plaqueGleam 4.35s ease-in-out infinite;
    animation-duration:4.35s !important;
    animation-iteration-count:infinite !important;
    transition:opacity .19s ease;
    transition-duration:.19s !important;
  }

  @keyframes plaqueGleam {
    0%,34% { background-position:145% 50%; }
    69%,100% { background-position:-70% 50%; }
  }

  .cabinet-hotspot[data-category="heraldry"] {
    left:18.8%;
    top:28.1%;
  }
  .cabinet-hotspot[data-category="books"] {
    left:50%;
    top:28.1%;
  }
  .cabinet-hotspot[data-category="celestial"] {
    left:81.7%;
    top:28.1%;
  }
  .cabinet-hotspot[data-category="wax"] {
    left:19%;
    top:57.5%;
  }
  .cabinet-hotspot[data-category="lunar"] {
    left:50%;
    top:57.5%;
  }
  .cabinet-hotspot[data-category="ornaments"] {
    left:81.7%;
    top:57.5%;
  }

  /* Keep the click area completely transparent in every state.
     The only visible highlight is clipped to the printed label. */
  .cabinet-hotspot:hover,
  .cabinet-hotspot:focus-visible,
  .cabinet-hotspot[aria-expanded="true"] {
    transform:translate(-50%,-50%);
    outline:none;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }

  .cabinet-hotspot:hover::before,
  .cabinet-hotspot:focus-visible::before,
  .cabinet-hotspot[aria-expanded="true"]::before {
    opacity:1;
  }

  .cabinet-hotspot:hover::after,
  .cabinet-hotspot:focus-visible::after,
  .cabinet-hotspot[aria-expanded="true"]::after {
    opacity:.96;
  }

  .cabinet-hotspot:focus-visible::before {
    border:2px solid #ffe1ad;
    box-shadow:0 0 0 1px rgba(46,26,12,.55),0 0 14px rgba(250,208,143,.45);
  }

  /* Same slide-up drawer design and specimen cards as phones.
     Desktop simply gets more horizontal room for browsing items. */
  .specimen-drawer {
    left:clamp(12px,2.5vw,44px);
    right:clamp(12px,2.5vw,44px);
    bottom:clamp(10px,2.2vh,26px);
    width:auto;
    max-height:calc(100dvh - 44px);
    border:1px solid rgba(230,192,134,.58);
    border-radius:16px;
    box-shadow:0 -22px 78px rgba(0,0,0,.84);
    transform:translateY(calc(100% + 40px));
  }

  .specimen-drawer.is-open {
    transform:translateY(0);
  }

  .drawer-head,
  .drawer-track,
  .drawer-foot {
    width:min(1330px,100%);
  }
  .specimen-card {
    flex-basis:clamp(142px,15vw,190px);
  }

  .close-btn {
    top:clamp(10px,2vh,25px);
    right:clamp(10px,2vw,35px);
  }

  .close-btn img {
    width:clamp(38px,3vw,46px);
  }
}

/* Pinprick sparkle layer.
   Both existing button pseudo-elements are reserved for the approved narrow
   shimmer and parchment glow. The invisible label span carries two tiny
   independent ✦ twinkles; no new markup or interaction handlers required. */
.cabinet-hotspot > span {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  z-index:4;
  padding:0;
  opacity:1;
  color:transparent;
  font-size:0;
  line-height:0;
  pointer-events:none;
  user-select:none;
}

.cabinet-hotspot > span::before,
.cabinet-hotspot > span::after {
  content:"✦";
  position:absolute;
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#fff4cf;
  font:normal 12px/1 Georgia,serif;
  text-shadow:
    0 0 3px rgba(255,255,232,.98),
    0 0 8px rgba(255,230,160,.88),
    0 0 15px rgba(247,188,91,.58),
    0 0 24px rgba(255,217,137,.24);
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.35) rotate(-10deg);
  animation:cabinetPlaqueTwinkle 4.8s ease-in-out infinite;
  animation-duration:4.8s !important;
  animation-iteration-count:infinite !important;
  animation-delay:var(--sparkle-offset,0s);
  will-change:opacity,transform;
}

.cabinet-hotspot > span::before {
  left:var(--sparkle-a-x,20%);
  top:var(--sparkle-a-y,23%);
}

.cabinet-hotspot > span::after {
  content:"✧";
  left:var(--sparkle-b-x,82%);
  top:var(--sparkle-b-y,78%);
  width:13px;
  height:13px;
  color:#fff8df;
  font-size:10px;
  animation-duration:5.7s !important;
  animation-delay:calc(var(--sparkle-offset,0s) - 2.3s);
}

@keyframes cabinetPlaqueTwinkle {
  0%,28%,49%,100% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.35) rotate(-14deg);
  }
  33% {
    opacity:.46;
    transform:translate(-50%,-50%) scale(.78) rotate(-4deg);
  }
  37% {
    opacity:1;
    transform:translate(-50%,-50%) scale(1.34) rotate(12deg);
  }
  42% {
    opacity:.78;
    transform:translate(-50%,-50%) scale(1.02) rotate(19deg);
  }
  47% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.58) rotate(28deg);
  }
}

/* Offset each drawer, so the six plaques sparkle in a scattered rhythm,
   rather than flashing together in a synchronized grid. */
.cabinet-hotspot[data-category="heraldry"]   { --sparkle-offset:-.2s; }
.cabinet-hotspot[data-category="books"]      { --sparkle-offset:-1.1s; }
.cabinet-hotspot[data-category="celestial"]  { --sparkle-offset:-2.3s; }
.cabinet-hotspot[data-category="wax"]        { --sparkle-offset:-3.6s; }
.cabinet-hotspot[data-category="lunar"]      { --sparkle-offset:-4.7s; }
.cabinet-hotspot[data-category="ornaments"]  { --sparkle-offset:-5.5s; }

/* Phone-specific placement: at the brass corners of the six *actual*
   portrait parchment labels, not at the edges of their generous hitboxes. */
@media (max-width:820px) {
  .cabinet-hotspot > span::before,
  .cabinet-hotspot > span::after {
    width:12px;
    height:12px;
    font-size:11px;
  }
  .cabinet-hotspot > span::after {
    width:10px;
    height:10px;
    font-size:9px;
  }
  .cabinet-hotspot[data-category="heraldry"] {
    --sparkle-a-x:21%; --sparkle-a-y:43%;
    --sparkle-b-x:81%; --sparkle-b-y:81%;
  }
  .cabinet-hotspot[data-category="celestial"] {
    --sparkle-a-x:22%; --sparkle-a-y:45%;
    --sparkle-b-x:86%; --sparkle-b-y:82%;
  }
  .cabinet-hotspot[data-category="books"] {
    --sparkle-a-x:20%; --sparkle-a-y:42%;
    --sparkle-b-x:86%; --sparkle-b-y:77%;
  }
  .cabinet-hotspot[data-category="wax"] {
    --sparkle-a-x:20%; --sparkle-a-y:40%;
    --sparkle-b-x:82%; --sparkle-b-y:79%;
  }
  .cabinet-hotspot[data-category="lunar"] {
    --sparkle-a-x:18%; --sparkle-a-y:36%;
    --sparkle-b-x:85%; --sparkle-b-y:76%;
  }
  .cabinet-hotspot[data-category="ornaments"] {
    --sparkle-a-x:21%; --sparkle-a-y:37%;
    --sparkle-b-x:87%; --sparkle-b-y:78%;
  }
}

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