/* The salon is one photographic room; its glass layers hold the interface. */
.family-dialog {
  width: min(1180px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border: 1px solid rgba(255, 231, 186, .42);
  border-radius: 18px;
  background: #251811 url('assets/family-salon.jpg') center / cover no-repeat;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .11);
  overflow: hidden;
}
.family-dialog::backdrop {
  background: rgba(10, 8, 8, .72);
  backdrop-filter: blur(12px);
}
.family-shell {
  height: min(830px, calc(100dvh - 30px));
  background: linear-gradient(90deg, rgba(19, 15, 14, .45), rgba(20, 18, 17, .1) 70%),
              linear-gradient(0deg, rgba(19, 15, 14, .22), transparent 40%);
}
.family-top {
  align-items: center;
  padding: 29px clamp(24px, 5vw, 62px) 23px;
  background: rgba(22, 17, 16, .26);
  border-bottom-color: rgba(255, 234, 202, .17);
  backdrop-filter: blur(5px);
}
.family-overline {color: #e0c995;letter-spacing: .03em;text-transform: none;font: italic 17px var(--display)}
.family-top h2 {font-size: clamp(36px, 5vw, 58px);letter-spacing: -.045em;text-shadow: 0 2px 22px rgba(0, 0, 0, .35)}
.family-close {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  border: 1px solid rgba(255, 238, 206, .45);
  border-radius: 50%;
  background: rgba(38, 27, 27, .36);
  font: 28px/1 var(--body);
  backdrop-filter: blur(12px);
}
.family-close:hover {background: rgba(114, 55, 42, .72);color: #fff}
.advent-letter-dialog {position: fixed;width: min(590px, calc(100% - 32px));max-width: none;max-height: calc(100dvh - 32px);padding: 0;border: 1px solid rgba(243, 219, 177, .8);border-radius: 15px;background: #f6e9d8;box-shadow: 0 28px 90px rgba(0, 0, 0, .55);overflow: auto}
.advent-letter-dialog::backdrop {background: rgba(10, 8, 8, .65);backdrop-filter: blur(7px)}
.advent-letter-dialog .advent-letter {min-height: 220px;margin: 0;padding: 52px 48px 46px;border: 0}
.advent-letter-dialog .advent-letter small {margin-bottom: 24px;letter-spacing: .16em}
.advent-letter-close {position: absolute;z-index: 1;top: 15px;right: 16px;display: grid;place-items: center;width: 36px;height: 36px;border: 1px solid rgba(35, 51, 43, .4);border-radius: 50%;background: rgba(255, 255, 255, .45);color: #23332b;font: 25px/1 var(--body);cursor: pointer}
.advent-letter-close:hover {background: #fff}
.advent-letter-close:focus-visible {outline: 2px solid #23332b;outline-offset: 3px}
.family-tabs {
  gap: 9px;
  padding: 14px clamp(24px, 5vw, 62px);
  background: rgba(28, 21, 19, .3);
  border-bottom-color: rgba(255, 234, 202, .13);
  backdrop-filter: blur(5px);
}
.family-tabs button,
.family-tabs button:first-child {
  padding: 10px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #e8dfd2;
  background: rgba(255, 246, 224, .08);
  font-size: 13px;
  font-weight: 500;
}
.family-tabs button:hover {background: rgba(255, 246, 224, .18)}
.family-tabs button[aria-pressed=true] {
  border-color: rgba(247, 215, 169, .58);
  color: #271a17;
  background: #eddbb8;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .18);
}
.family-panel {
  padding: 34px clamp(24px, 5vw, 62px) 60px;
  background: rgba(16, 22, 19, .38);
  backdrop-filter: blur(3px) saturate(1.1);
  scrollbar-color: #b89a6d transparent;
}
.family-intro {margin-bottom: 27px}
.family-intro h3 {font-size: clamp(32px, 4vw, 48px);letter-spacing: -.035em;text-shadow: 0 2px 15px rgba(0, 0, 0, .3)}
.family-intro p {color: #e5e0d5;font-size: 14px}
.family-form {
  border: 1px solid rgba(255, 236, 205, .32);
  border-radius: 13px;
  background: rgba(23, 30, 26, .67);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px);
}
.advent-day {
  border-color: rgba(255, 232, 188, .48);
  border-radius: 8px;
  background: rgba(27, 42, 33, .77);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 5px 18px rgba(0, 0, 0, .13);
  backdrop-filter: blur(10px);
}
.advent-day:hover:not(:disabled), .advent-day.is-selected {background: rgba(76, 55, 37, .9)}
.advent-day:disabled {background: rgba(19, 25, 21, .57)}
.chat-contacts button, .chat-thread {border-color: rgba(250, 228, 190, .27);background: rgba(22, 31, 25, .7);backdrop-filter: blur(14px)}
.chat-contacts button[aria-pressed=true] {background: #eddbb8;color: #271a17}
.unread-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:7px;padding:0 5px;border-radius:999px;background:#b5473e;color:#fffaf0!important;font:700 11px/1 var(--body);letter-spacing:0;box-shadow:0 2px 9px rgba(92,16,14,.35)}
.chat-contacts button{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-contacts .unread-badge{margin-left:auto}
.chat-compose {background: rgba(13, 22, 17, .48)}

/* A closed recipe is a wide invitation; an open one is a single-image editorial page. */
.recipe-list {gap: 18px}
.recipe-card {position: relative;overflow: hidden;border: 1px solid rgba(255, 229, 186, .39);border-radius: 13px;background: rgba(22, 30, 24, .8);box-shadow: 0 18px 36px rgba(0, 0, 0, .15)}
.recipe-card[open] {overflow: visible;border-color: rgba(245, 216, 171, .55);background: #f7f0e5}
.recipe-strip {grid-template-columns: 184px minmax(0, 1fr) auto;gap: 29px;min-height: 158px;padding: 12px 25px 12px 12px}
.recipe-strip:hover, .recipe-strip:focus-visible {background: rgba(74, 53, 44, .43)}
.recipe-media {width: 184px;height: 134px;border-radius: 7px}
.recipe-strip small {color: #f1d8a5;font-size: 12px;letter-spacing: .02em;text-transform: none}
.recipe-strip h4 {font-size: clamp(25px, 3vw, 37px);letter-spacing: -.035em}
.recipe-summary {font-size: 14px;color: #e7e4db}
.recipe-strip-action {padding: 10px 15px;border: 1px solid rgba(244, 216, 173, .6);border-radius: 999px;color: #f6e1b9;font-size: 12px}
.recipe-card[open] .recipe-strip {
  position: sticky;
  z-index: 2;
  top: 17px;
  display: block;
  width: 47px;
  height: 47px;
  min-height: 0;
  margin: 0 17px -47px auto;
  padding: 0;
  border-radius: 50%;
  background: rgba(28, 22, 20, .68);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px);
}
.recipe-card[open] .recipe-strip:hover {background: rgba(112, 52, 40, .9)}
.recipe-card[open] .recipe-media, .recipe-card[open] .recipe-strip-copy {display: none}
.recipe-card[open] .recipe-strip-action {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  color: white;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
}
.recipe-card[open] .recipe-strip-action::after {content: none}
.recipe-details {border: 0;border-radius: 12px;background: #f7f0e5;overflow: clip}
.recipe-hero-art {height: clamp(300px, 45vw, 490px);max-height: none;border-radius: 12px 12px 0 0;object-fit: cover}
.recipe-detail-content {padding: clamp(30px, 5vw, 62px)}
.recipe-detail-heading {padding-bottom: 30px}
.recipe-detail-heading h4 {font-size: clamp(38px, 5vw, 67px);letter-spacing: -.045em}
.recipe-detail-heading p {font-size: 17px;line-height: 1.7}
.recipe-detail-columns {gap: clamp(35px, 7vw, 95px);padding-top: 39px}
.recipe-detail-columns h5 {font-size: 30px}
.recipe-detail-columns ul, .recipe-detail-columns ol {font-size: 15px;line-height: 1.7}

@media (max-width: 700px) {
  .family-dialog {width: calc(100% - 14px);max-height: calc(100dvh - 14px);border-radius: 12px;background-position: 63% center}
  .family-shell {height: calc(100dvh - 16px)}
  .family-top {padding: 22px 21px 18px}
  .family-tabs {padding: 12px 18px;gap: 5px}
  .family-tabs button, .family-tabs button:first-child {padding: 9px 13px;font-size: 12px}
  .family-panel {padding: 27px 20px 45px;background: rgba(14, 22, 18, .66)}
  .advent-letter-dialog .advent-letter {min-height: 180px;padding: 55px 28px 35px}
  .recipe-strip {grid-template-columns: 104px minmax(0, 1fr);gap: 14px;padding: 9px;min-height: 0}
  .recipe-media {width: 104px;height: 118px}
  .recipe-strip h4 {font-size: 23px}
  .recipe-summary {font-size: 12px}
  .recipe-strip-action {grid-column: 2;justify-self: start;margin: 0;padding: 0;border: 0}
  .recipe-card[open] .recipe-strip-action {margin: 0}
  .recipe-hero-art {height: 290px}
  .recipe-detail-content {padding: 27px 24px 34px}
  .recipe-detail-columns {grid-template-columns: 1fr;gap: 30px}
}
@media (prefers-reduced-motion: reduce) {
  .family-dialog, .family-panel, .family-tabs, .family-top {scroll-behavior: auto}
}