/* The Study: the founder's recipe, on the safe's stage (study-safe.js).

   An HTML card laid over the open safe, so the words are real text (to
   read, to copy, for a screen reader) and the link is a real link.
   study-safe.js places it (left, top, width, max-height) inside the safe,
   from the stage's layout. The look is the club's (study.css): old paper,
   the blend's name in Cinzel, the rest in --club-text, and the buttons the
   club's own (.brass-btn for the link, .brass-btn--leather for Shut it). */

.safe-recipe {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  overflow: auto;
  padding: 14px 16px 12px;
  color: var(--club-ink, #231f20);
  background: #efe1bc;
  border: 3px solid var(--club-ink, #231f20);
  border-radius: 8px;
  box-shadow: inset 0 0 22px rgba(122, 84, 30, 0.35), 6px 6px 0 var(--club-ink, #231f20);
  font-family: var(--club-text, Georgia, "Times New Roman", serif);
  animation: safe-recipe-in 0.45s var(--ease-out, ease-out);
}
.safe-recipe[hidden] {
  display: none;
}
@keyframes safe-recipe-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.safe-recipe__title {
  margin: 0;
  font-family: var(--club-serif, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
}
.safe-recipe__about {
  margin: 2px 0 6px;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.28;
}
.safe-recipe__list {
  columns: 2;
  column-gap: 16px;
  margin: 0 0 6px;
  padding-left: 1.2em;
  font-size: 1rem;
  line-height: 1.35;
}
.safe-recipe__list li {
  break-inside: avoid;
}
.safe-recipe__sign {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.28;
}
.safe-recipe__btns {
  display: flex;
  gap: 10px;
  padding: 0 3px 3px 0;
}
/* the club's buttons, sharing the row: the link takes what Shut it leaves */
.safe-recipe__go,
.safe-recipe__shut {
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  touch-action: manipulation;
}
.safe-recipe__go {
  flex: 1 1 auto;
}
.safe-recipe__shut {
  flex: 0 0 auto;
}
.safe-recipe__go:focus-visible,
.safe-recipe__shut:focus-visible {
  outline: 3px solid var(--club-brass, #c9a24a);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .safe-recipe {
    animation: none;
  }
}