/* ==========================================================================
   EVOQUE — the contacts panel, called by TENET's black cat (js/tenet/evoque.js)
   an arched black card with a thin inner frame, IM Fell small caps, red only for the marks
   ========================================================================== */

/* the cat's button over the room (invisible: the cat itself reacts) */
.evq-cat { position: absolute; z-index: 6; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 40%;
  pointer-events: none; -webkit-tap-highlight-color: transparent; outline: none; }
.tenet.is-live .evq-cat { pointer-events: auto; }
.evq-cat:focus-visible { box-shadow: 0 0 0 2px rgba(212, 15, 22, .7); }
/* the cat called: it looks up, its eyes glow */
.room-cat .rc__head { transition: translate .45s cubic-bezier(.2, .7, .2, 1); }
.room-cat.is-called .rc__head { translate: 0 -3px; }
.room-cat .rc__eyes ellipse { transition: fill .3s ease, filter .3s ease; }
.room-cat.is-called .rc__eyes ellipse { fill: #ff2a22; filter: drop-shadow(0 0 2px rgba(255, 40, 30, .95)) drop-shadow(0 0 6px rgba(255, 40, 30, .6)); }
/* …and a soft red halo around its outline: it can be clicked (static once on — no animated filter) */
.room-cat svg { transition: filter .45s ease; }
.room-cat.is-called svg { filter: drop-shadow(0 0 2px rgba(196, 22, 28, .8)) drop-shadow(0 0 9px rgba(196, 22, 28, .5)) drop-shadow(0 0 20px rgba(196, 22, 28, .28)); }

/* the panel */
.evq { position: fixed; inset: 0; z-index: 48; }
.evq[hidden] { display: none; }
.evq__shade { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  background: linear-gradient(to right, rgba(5, 5, 5, .72), rgba(5, 5, 5, .35) 45%, rgba(5, 5, 5, .1)); }
.evq.is-open .evq__shade { opacity: 1; }
.evq__panel { position: absolute; left: clamp(18px, 5vw, 96px); top: 50%; width: min(340px, 86vw); padding: 64px 34px 30px;
  box-sizing: border-box; text-align: center; color: var(--offwhite);
  background: linear-gradient(#0d0c0c, #070707); border: 1px solid rgba(241, 237, 228, .5);
  border-radius: 50% 50% 18px 18px / 74px 74px 18px 18px; box-shadow: 0 20px 70px rgba(0, 0, 0, .7);
  opacity: 0; transform: translate(-24px, -50%); transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.evq__panel::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(241, 237, 228, .16); border-radius: inherit; pointer-events: none; }
.evq.is-open .evq__panel { opacity: 1; transform: translate(0, -50%); }

.evq__x { position: absolute; right: -16px; top: 22px; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #0b0a0a; border: 1.5px solid var(--red); color: var(--red); display: grid; place-items: center; transition: background .3s, color .3s; }
.evq__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.evq__x:hover, .evq__x:focus-visible { background: var(--red); color: #fff; outline: none; }

.evq__cat { display: block; width: 30px; height: 30px; margin: 0 auto 12px; color: var(--offwhite); }
.evq__cat svg { width: 100%; height: 100%; display: block; }
.evq__title { margin: 0; font: 400 clamp(28px, 2.5vw, 36px)/1 'IM Fell English SC', 'Cormorant Garamond', serif; letter-spacing: .14em;
  padding-left: .14em; outline: none; }
.evq__rule { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 14px; }
.evq__rule span { width: 64px; height: 1px; background: rgba(212, 15, 22, .8); }
.evq__rule i { width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
.evq__line { margin: 0 0 26px; font: italic 300 clamp(14px, 1.1vw, 16px)/1.55 'Cormorant Garamond', serif; letter-spacing: .06em; color: #cfcac1; }

.evq__links { list-style: none; margin: 0; padding: 0; text-align: left; }
.evq__links li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.evq.is-open .evq__links li { opacity: 1; transform: none; }
.evq.is-open .evq__links li:nth-child(1) { transition-delay: .18s; }
.evq.is-open .evq__links li:nth-child(2) { transition-delay: .26s; }
.evq.is-open .evq__links li:nth-child(3) { transition-delay: .34s; }
.evq.is-open .evq__links li:nth-child(4) { transition-delay: .42s; }
.evq__links { margin: 0 -12px; }                                  /* the buttons reach a little beyond the text column */
/* each link is a button: on hover / focus it lights up dark red, with a soft red glow */
.evq__link { position: relative; display: flex; align-items: center; gap: 16px; padding: 15px 22px 15px 18px; border-radius: 14px;
  color: var(--offwhite); text-decoration: none; cursor: pointer; outline: none; background: transparent;
  transition: background-color .3s ease, box-shadow .35s ease, color .3s ease, transform .15s ease; }
.evq__link::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: rgba(241, 237, 228, .09);
  transition: opacity .3s ease; }
.evq__links li:last-child .evq__link::after { display: none; }
.evq__ico { width: 24px; height: 24px; flex: none; transition: color .3s ease; }
.evq__ico svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.evq__name { flex: 1; font: 400 17px/1 'IM Fell English SC', 'Cormorant Garamond', serif; letter-spacing: .2em; }
.evq__go { font: 400 18px/1 'Cormorant Garamond', serif; color: rgba(241, 237, 228, .6); transition: transform .35s ease, color .3s; }
.evq__link.is-soon { cursor: default; }
.evq__link.is-soon .evq__go { font: italic 300 13px/1 'Cormorant Garamond', serif; letter-spacing: .08em; color: rgba(241, 237, 228, .38); }
.evq__link:hover, .evq__link:focus-visible {
  color: #fff; background-color: #5a0a0e;
  box-shadow: inset 0 0 0 1px rgba(255, 60, 50, .28), 0 0 22px rgba(212, 15, 22, .38), 0 6px 18px rgba(0, 0, 0, .45); }
.evq__link:hover::after, .evq__link:focus-visible::after,
.evq__links li:has(+ li .evq__link:hover) .evq__link::after, .evq__links li:has(+ li .evq__link:focus-visible) .evq__link::after { opacity: 0; }
.evq__link:hover .evq__go, .evq__link:focus-visible .evq__go { color: rgba(255, 255, 255, .8); }
.evq__link:not(.is-soon):hover .evq__go, .evq__link:not(.is-soon):focus-visible .evq__go { color: #fff; transform: translateX(3px); }
.evq__link:not(.is-soon):active { transform: scale(.985); background-color: #470709; }
.evq__foot { margin: 22px 0 0; font: italic 300 14px/1 'Cormorant Garamond', serif; letter-spacing: .12em; color: rgba(241, 237, 228, .55); }
.evq__foot::before { content: ''; display: block; width: 7px; height: 7px; margin: 0 auto 16px; background: var(--red); transform: rotate(45deg); opacity: .8; }

@media (max-width: 760px) {
  .evq__panel { left: 50%; transform: translate(-50%, -46%); padding: 58px 26px 26px; }
  .evq.is-open .evq__panel { transform: translate(-50%, -50%); }
  .evq__x { right: 8px; top: 12px; }
  .evq__shade { background: rgba(5, 5, 5, .7); }
}
.rm .evq__panel, .rm .evq__links li { transition: opacity .3s ease; transform: translate(0, -50%); }
.rm .evq__links li { transform: none; }
@media (max-width: 760px) { .rm .evq__panel { transform: translate(-50%, -50%); } }