/* ============================================================
   LAUREL & LANTERN INN — kitchen.css (v22, 2026-10-21; v24 room-by-room Kitchen)
   Recipe cards: parchment cards on the night-plum page, each one
   printable on its own. v22: drinks For Our Human Friends (teal
   band) beside Sunny's dog treats (copper band), a US / Metric
   switch on every card, and an Optional magic line.
   ============================================================ */
.recipes { margin-top: 56px; text-align: left; }
.recipes > h2, .recipes > .orn { text-align: center; }
.recipes-intro { text-align: center; max-width: 52ch; margin: 10px auto 0; color: var(--parchment-dim); font-size: 1.12rem; }
.recipes-before {
  margin: 28px auto 0; max-width: 640px; padding: 18px 22px;
  border: 1px solid rgba(204, 153, 102, 0.45); border-radius: 14px; background: rgba(51, 0, 51, 0.35);
}
.recipes-before h3 { font-family: var(--serif-caps); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; }
.recipes-before ul { margin: 0; padding-left: 1.2em; color: var(--parchment); line-height: 1.55; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.recipe-card {
  position: relative; padding: 22px 22px 18px; border-radius: 6px;
  background: linear-gradient(180deg, #F6ECDC, #EBDCC4); color: #2A1408;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(164, 106, 49, 0.35), inset 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.recipe-card h3 { font-family: var(--serif-display); font-size: 1.45rem; font-weight: 600; margin: 0; color: #330033; line-height: 1.15; }
.recipe-card h4 { font-family: var(--serif-caps); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7A4220; margin: 14px 0 4px; }
.rc-sunny { font-style: italic; margin: 6px 0 0; color: #5A3A24; }
.rc-sunny span { font-style: normal; font-size: 0.85em; }
.rc-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-family: var(--serif-caps); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #006666; }
.rc-ing, .rc-steps { margin: 0; padding-left: 1.25em; line-height: 1.5; font-size: 1.02rem; }
.rc-steps li { margin-bottom: 3px; }
.rc-source { margin: 12px 0 0; font-size: 0.9rem; }
.rc-source a { color: #7A0059; }
.rc-print {
  margin-top: 12px; font-family: var(--serif-caps); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #330033; background: none; border: 1px solid rgba(51, 0, 51, 0.4); border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.rc-print:hover, .rc-print:focus-visible { background: rgba(51, 0, 51, 0.08); }
.recipes-sources { margin-top: 22px; font-size: 0.92rem; color: var(--parchment-dim); text-align: center; }
.recipes-sources a { color: var(--copper); }

/* ---------- v22 ---------- */
.recipes + .recipes { margin-top: 72px; }
.recipes-pearl { font-style: italic; color: var(--copper); }
.recipes-intro-sm { font-size: 1rem; margin-top: 14px; }
.recipe-group {
  font-family: var(--serif-caps); font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--amber); text-align: center; margin: 34px 0 0;
}
.recipe-group + .recipe-grid { margin-top: 16px; }
.recipes-more { text-align: center; margin-top: 18px; font-family: var(--serif-caps); font-size: 0.78rem; letter-spacing: 0.14em; }
.recipes-more a { color: var(--copper); }
.recipe-card { padding-top: 16px; border-top: 6px solid transparent; }
.rc-drink { border-top-color: #006666; }
.rc-treat { border-top-color: #c28562; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rc-chip {
  font-family: var(--serif-caps); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: #F6ECDC;
}
.rc-drink .rc-chip { background: #006666; }
.rc-treat .rc-chip { background: #7A4220; }
.rc-desc { margin: 8px 0 0; color: #5A3A24; font-style: italic; }
.units-switch { display: none; border: 1px solid rgba(51, 0, 51, 0.35); border-radius: 999px; overflow: hidden; }
.js .units-switch { display: inline-flex; }
.u-btn {
  font-family: var(--serif-caps); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: 0; padding: 6px 10px; min-height: 30px; cursor: pointer; color: #330033;
}
.u-btn[aria-pressed="true"] { background: #330033; color: #F6ECDC; }
.u-btn:focus-visible { outline: 2px solid #7A0059; outline-offset: -2px; }
.u-metric { display: none; }
[data-units="metric"] .u-metric { display: inline; }
[data-units="metric"] .u-us { display: none; }
.rc-magic {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(122, 0, 89, 0.07); border: 1px solid rgba(122, 0, 89, 0.22);
}
.rc-magic-h { margin: 0; font-family: var(--serif-caps); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7A0059; }
.rc-magic-h span { color: #c28562; }
.rc-magic p + p { margin: 4px 0 0; font-style: italic; line-height: 1.45; }
.rc-pet { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed rgba(122, 66, 32, 0.4); font-size: 0.92rem; color: #4A2410; }

/* print just the chosen card */
@media print {
  body.print-card * { visibility: hidden !important; }
  body.print-card .recipe-card.is-printing, body.print-card .recipe-card.is-printing * { visibility: visible !important; }
  body.print-card .recipe-card.is-printing { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; background: #fff; }
  body.print-card .rc-print, body.print-card .units-switch { display: none !important; }
  .door-scene { display: none !important; }
}

/* ---------- v24: the Kitchen, room by room ---------- */
.recipe-group a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 153, 51, 0.35); padding-bottom: 2px; }
.recipe-group a:hover, .recipe-group a:focus-visible { color: var(--parchment); border-bottom-color: var(--parchment); }
.rc-mode {
  padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; letter-spacing: 0.16em;
}
.rc-mode-focus { color: #8A4A10; background: rgba(255, 153, 51, 0.14); }
.rc-mode-calm  { color: #7A0059; background: rgba(122, 0, 89, 0.08); }
.rc-mode-sleep { color: #005A5A; background: rgba(0, 102, 102, 0.10); }