/* ============================================================
   BESTIARY — catalogue grid + water ripple (SVG displacement)
   ============================================================ */

.best-intro{max-width:64ch;margin:0 0 clamp(36px,6vh,72px);}
.best-kicker{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--feedback-blue);margin:0 0 14px;
}
.best-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:.9;text-transform:uppercase;margin:0 0 18px;
}
.best-lede{
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:clamp(1rem,1.8vw,1.4rem);
  line-height:1.5;opacity:.78;margin:0;
}
.best-thesis{
  font-family:var(--font-body);font-weight:300;
  font-size:clamp(.88rem,1.05vw,1rem);line-height:1.65;
  opacity:.7;margin:22px 0 0;max-width:58ch;
  padding-left:16px;border-left:2px solid var(--jade);
}
.best-section-head{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  opacity:.42;
  margin:clamp(40px,7vh,80px) 0 26px;
  padding-bottom:10px;border-bottom:1px solid rgba(232,221,200,.12);
}

/* ---------- CATALOGUE GRID (asymmetric) ---------- */
.catalogue{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.8vw,26px);
}
.spec{
  position:relative;
  padding:0;
  border:1px solid rgba(232,221,200,.12);
  background:#0b0b0e;
  color:var(--bone);
  cursor:pointer;
  text-align:left;
  font:inherit;
  overflow:hidden;
  transition:border-color .3s var(--ease-micro), transform .4s var(--ease-out);
  /* varied spans + heights = asymmetric masonry */
}
.spec:nth-child(1){grid-column:span 5; min-height:clamp(320px,50vh,540px);}
.spec:nth-child(2){grid-column:span 3; min-height:clamp(230px,34vh,380px); margin-top:clamp(28px,5vh,72px);}
.spec:nth-child(3){grid-column:span 4; min-height:clamp(270px,40vh,430px); margin-top:clamp(8px,1.5vh,20px);}
.spec:nth-child(4){grid-column:span 3; min-height:clamp(250px,37vh,400px);}
.spec:nth-child(5){grid-column:span 4; min-height:clamp(290px,44vh,470px); margin-top:clamp(20px,3.5vh,48px);}
.spec:nth-child(6){grid-column:span 5; min-height:clamp(300px,46vh,500px);}
.spec:nth-child(7){grid-column:span 4; min-height:clamp(240px,36vh,390px); margin-top:clamp(24px,4vh,56px);}
.spec:nth-child(8){grid-column:span 3; min-height:clamp(260px,39vh,420px); margin-top:clamp(6px,1.2vh,16px);}
.spec:nth-child(9){grid-column:span 3; min-height:clamp(200px,28vh,300px); margin-top:clamp(10px,2vh,26px);}

.spec:hover,.spec:focus-visible{
  border-color:var(--feedback-blue);
  transform:translateY(-4px);
}

/* the plate */
.spec__plate{
  position:absolute;inset:0;
  overflow:hidden;
}
.spec__img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
  filter:saturate(.84) brightness(.74) contrast(1.06);
  transition:filter .5s var(--ease-micro), transform .8s var(--ease-micro);
  transform-origin:center;
}
.spec:hover .spec__img,
.spec:focus-visible .spec__img{
  filter:saturate(1) brightness(.9) contrast(1.08);
  transform:scale(1.03);
}
/* ripple overlay layer — SVG filter applied here */
.spec__ripple{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease-micro);
}
.spec.is-rippling .spec__ripple{opacity:1;}

.spec__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(16,16,20,.15) 0%,
    rgba(16,16,20,.45) 45%,
    rgba(16,16,20,.94) 100%);
}

/* meta overlay */
.spec__id{
  position:absolute;top:10px;left:10px;z-index:3;
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--jade);
  background:rgba(16,16,20,.72);
  padding:4px 8px;
  border:1px solid rgba(79,168,138,.4);
}
.spec__status{
  position:absolute;top:10px;right:10px;z-index:3;
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);opacity:.5;
  background:rgba(16,16,20,.72);padding:4px 8px;
}
.spec__body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(14px,1.6vw,22px);
}
.spec__cat{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--feedback-blue);margin:0 0 6px;
}
.spec__name{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2.4vw,2.1rem);
  line-height:1;text-transform:uppercase;margin:0 0 6px;
}
.spec__where{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;margin:0;
}
.spec__more{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;margin:8px 0 0;
  transition:opacity .3s var(--ease-micro);
}
.spec:hover .spec__more,
.spec:focus-visible .spec__more{opacity:.7;}

/* reticle */
.spec::before,.spec::after{
  content:'';position:absolute;width:13px;height:13px;
  border:1px solid rgba(232,221,200,.3);z-index:4;
  opacity:0;transition:opacity .3s var(--ease-micro);
  pointer-events:none;
}
.spec::before{top:8px;left:8px;border-right:none;border-bottom:none;}
.spec::after{bottom:8px;right:8px;border-left:none;border-top:none;}
.spec:hover::before,.spec:hover::after,
.spec:focus-visible::before,.spec:focus-visible::after{
  opacity:1;border-color:var(--feedback-blue);
}

/* ---------- DETAIL PANEL ---------- */
.detail{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);
}
/* [hidden] must win over display:grid, or the invisible panel eats every click */
.detail[hidden]{display:none;}
.detail__backdrop{
  position:absolute;inset:0;
  background:rgba(6,6,8,.86);
  border:none;padding:0;cursor:pointer;
}
.detail__card{
  position:relative;
  max-width:1000px;width:100%;
  max-height:92vh;overflow:auto;
  background:var(--amp-black);
  border:1px solid rgba(232,221,200,.18);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.detail__plate{
  position:relative;overflow:hidden;
  min-height:280px;
  /* native aspect, never cropped: the plate is a specimen record, not a hero */
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(125,78,216,.10), transparent 62%),
    #08080a;
}
.detail__plate img{
  width:100%;height:100%;
  object-fit:contain;          /* show the whole creature */
  object-position:center center;
  display:block;
  filter:saturate(.92) brightness(.86) contrast(1.03);
}
.detail__inner{padding:clamp(22px,3vw,40px);}
.detail__id{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jade);margin:0 0 10px;
}
.detail__name{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:.95;text-transform:uppercase;margin:0 0 8px;
}
.detail__cat{
  font-family:var(--font-mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--feedback-blue);
  margin:0 0 20px;padding-bottom:12px;
  border-bottom:1px solid rgba(232,221,200,.12);
}
.detail__data{
  display:grid;grid-template-columns:auto 1fr;
  gap:9px 18px;margin:0 0 20px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
}
.detail__data dt{text-transform:uppercase;opacity:.42;white-space:nowrap;}
.detail__data dd{margin:0;opacity:.82;}
.detail__hook{
  font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.5;
  opacity:.88;margin:0 0 16px;
}
.detail__note{
  font-family:var(--font-body);font-weight:300;
  font-size:.9rem;line-height:1.65;opacity:.74;margin:0;
}
.detail__note b{font-weight:500;opacity:1;}
.detail__close{
  position:absolute;top:12px;right:12px;z-index:5;
  background:rgba(16,16,20,.8);
  border:1px solid rgba(232,221,200,.24);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;min-height:44px;cursor:pointer;
}
.detail__close:hover{border-color:var(--feedback-blue);color:var(--feedback-blue);}

/* ---------- FOCUS ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--feedback-blue);outline-offset:3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .spec:nth-child(n){grid-column:span 6;margin-top:0;}
  .detail__card{grid-template-columns:1fr;}
  .detail__plate{min-height:44vh;max-height:52vh;}
}
@media (max-width:620px){
  .spec:nth-child(n){grid-column:span 12;}
}

/* ---------- TOUCH ---------- */
@media (hover:none){
  .spec__more{opacity:.6;}
  .spec::before,.spec::after{opacity:1;}
}

/* ---------- REDUCED MOTION — no ripple, no float ---------- */
@media (prefers-reduced-motion:reduce){
  .spec{transition:none;}
  .spec:hover,.spec:focus-visible{transform:none;}
  .spec__img{transition:none;}
  .spec:hover .spec__img,.spec:focus-visible .spec__img{transform:none;}
  .spec__ripple{display:none;}
}