/* Grammy's Recipe Book. Loaded after /css/style.css, which supplies the
   shared tokens, nav and footer. The palette is sampled from the book's quilted
   cover (cranberry, forest, navy) and its pages (aged cream, blue ballpoint).
   Light only, like the rest of the site. */

:root {
  --rb-desk: #efe7d6;         /* behind the pages */
  --rb-paper: #fbf6ea;        /* a page */
  --rb-rule: rgba(43, 63, 107, .13);   /* ruled lines */
  --rb-margin: rgba(158, 27, 50, .28); /* red margin line */
  --rb-ink: #1e2c6e;          /* blue ballpoint */
  --rb-cranberry: #9e1b32;
  --rb-forest: #1f4a33;
  --rb-navy: #2b3f6b;
  --rb-line-h: 1.9rem;        /* ruled line spacing */
  --rb-page-shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 10px 28px rgba(60, 40, 20, .12);
}

body.book {
  background: var(--rb-desk);
  /* Keep the teal footer at the foot of the window on short pages. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.book > main { flex: 1; width: 100%; }

.book .site-nav { width: 100%; max-width: 1160px; margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rb {
  max-width: 1160px;
  margin-inline: auto;
  padding: 0 20px clamp(2.5rem, 6vw, 4rem);
}

/* A notebook page: cream paper with the red margin line. The ruled lines
   are drawn only under her handwriting (.rb-handwriting), where the text sits
   on them; under mixed type sizes they never line up. */
.rb-cover__page,
.rb-versions {
  background-color: var(--rb-paper);
  background-image: linear-gradient(90deg, transparent 2.4rem, var(--rb-margin) 2.4rem, var(--rb-margin) calc(2.4rem + 1px), transparent calc(2.4rem + 1px));
  box-shadow: var(--rb-page-shadow);
  border-radius: 4px;
}

/* ---------- Index: the cover ---------- */

.rb-cover {
  position: relative;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.rb-cover__fabric {
  height: clamp(120px, 22vw, 230px);
  background-color: var(--rb-forest);
  background-size: cover;
  background-position: center 40%;
  border-block: 6px solid var(--rb-cranberry);
}

.rb-cover__page {
  position: relative;
  max-width: 680px;
  margin: calc(-1 * clamp(48px, 8vw, 90px)) auto 0;
  margin-inline: max(16px, calc((100% - 680px) / 2));
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem) clamp(3.25rem, 7vw, 4rem);
  text-align: left;
}

.rb-eyebrow {
  margin: 0 0 .2rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rb-cranberry);
}

.rb-cover__page h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}

.rb-signature {
  width: min(360px, 82%);
  height: auto;
  margin: .6rem 0 .2rem -.4rem;
}

.rb-dedication {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: var(--rb-line-h);
  color: var(--rb-ink);
  max-width: 52ch;
}

.rb-ai {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--rb-rule);
  font-size: .9rem;
  color: var(--muted);
}
.rb-ai a { color: var(--rb-navy); overflow-wrap: anywhere; }

/* ---------- Index: search and filters ---------- */

.rb-controls {
  display: grid;
  gap: .9rem;
  margin: 0 auto 1.75rem;
  max-width: 900px;
}

.rb-search input {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--rb-paper);
  border: 1px solid #d8ccb4;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, .06);
}
.rb-search input:focus { outline: 3px solid var(--rb-navy); outline-offset: 1px; }

.rb-filters { display: grid; gap: .5rem; }

.rb-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.rb-chips__label {
  flex: 0 0 4.6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.rb-chip,
.rb-toggle button {
  font: inherit;
  font-size: .88rem;
  line-height: 1.2;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid #d3c5aa;
  background: var(--rb-paper);
  color: var(--ink);
  cursor: pointer;
}
.rb-chip:hover,
.rb-toggle button:hover { border-color: var(--rb-navy); }
.rb-chip[aria-pressed="true"],
.rb-toggle button[aria-pressed="true"] {
  background: var(--rb-navy);
  border-color: var(--rb-navy);
  color: #fff;
}

.rb-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}
.rb-count { margin: 0; font-size: .9rem; color: var(--muted); }
.rb-toggle { display: flex; gap: .3rem; }

/* ---------- Index: the shelf of cards ---------- */

.rb-course { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.rb-course__title {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  color: var(--rb-cranberry);
}
.rb-course__title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(158, 27, 50, .35), transparent);
}

.rb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 44%), 1fr));
  gap: clamp(.8rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--rb-paper);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--rb-page-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rb-card a:hover { transform: translateY(-3px) rotate(-.4deg); }

.rb-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  background: #e6dcc6;
}

.rb-card__text {
  display: grid;
  gap: .1rem;
  padding: .7rem .8rem .8rem;
}
.rb-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
}
.rb-card__from { font-size: .84rem; color: var(--rb-ink); font-style: italic; }
.rb-card__time {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  padding: .2rem .55rem .2rem .45rem;
  border-radius: 999px;
  background: var(--rb-navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}
.rb-card__time { white-space: nowrap; }
.rb-card__time svg { flex: none; }
.rb-card__ahead {
  margin-top: .2rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--rb-cranberry);
}

/* "Page by page": one run of cards in book order, no course headings. */
.rb-shelf.is-book .rb-course__title { display: none; }
.rb-shelf.is-book .rb-course { margin: 0; }
.rb-shelf.is-book > .rb-cards { margin-bottom: 2rem; }

.rb-empty { text-align: center; color: var(--muted); font-style: italic; }

/* ---------- Recipe page ---------- */

.rb-entry__head {
  max-width: 900px;
  margin: clamp(1rem, 3vw, 2rem) 0 clamp(1.25rem, 3vw, 2rem);
}

.rb-crumb {
  margin: 0 0 .3rem;
  font-size: .85rem;
  color: var(--muted);
}
.rb-crumb a { color: var(--rb-cranberry); font-weight: 600; text-decoration: none; }
.rb-crumb a:hover { text-decoration: underline; }

.rb-entry__head h1 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.rb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}
.rb-meta span + span::before { content: "·"; margin-right: .5rem; color: #b8a98c; }
.rb-meta strong { color: var(--rb-ink); font-weight: 600; }
.rb-person {
  text-decoration: underline;
  text-decoration-color: rgba(30, 44, 110, .3);
  text-underline-offset: 3px;
}
.rb-person:hover { text-decoration-color: var(--rb-ink); }

.rb-times {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
}
.rb-times div {
  padding: .45rem .8rem;
  background: var(--rb-paper);
  border: 1px solid #e0d4bb;
  border-radius: 8px;
  line-height: 1.25;
}
.rb-times dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rb-times dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.rb-times dd span { display: block; font-family: var(--sans); font-weight: 400; font-size: .75rem; color: var(--muted); }
.rb-times__total { background: var(--rb-navy) !important; border-color: var(--rb-navy) !important; }
.rb-times__total dt, .rb-times__total dd, .rb-times__total dd span { color: #fff; }
.rb-times__note { margin: .45rem 0 0; font-size: .78rem; color: var(--muted); font-style: italic; }

.rb-entry__body {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .rb-entry__body { grid-template-columns: minmax(300px, 420px) 1fr; }
  .rb-photos { position: sticky; top: 1.25rem; }
}

.rb-photos { display: grid; gap: 1rem; }

.rb-photo { margin: 0; }
.rb-photo a { display: block; }
.rb-photo img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--rb-page-shadow);
  background: #e6dcc6;
}
/* On phones the photo is the keepsake, the typed recipe is what you cook from:
   show the top of the page, not all of it. */
@media (max-width: 899px) {
  .rb-photos { grid-auto-flow: column; grid-auto-columns: min(78%, 360px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
  .rb-photo { scroll-snap-align: start; }
  .rb-photos:has(.rb-photo:only-child) { grid-auto-columns: 100%; }
  .rb-photo img { max-height: 58vh; object-fit: cover; object-position: top; }
}
.rb-photo figcaption { margin-top: .45rem; font-size: .8rem; color: var(--muted); }
.rb-photo figcaption a { display: inline; color: var(--rb-navy); }

/* Full-size page, opened by recipes.js from the photo links. */
.rb-lightbox {
  max-width: none;
  max-height: none;
  /* Shrink to the photo so the dialog's default margin:auto centers it. */
  width: fit-content;
  height: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: zoom-out;
}
.rb-lightbox::backdrop {
  background: rgba(28, 22, 16, .72);
  backdrop-filter: blur(3px);
}
.rb-lightbox img {
  display: block;
  max-width: 94vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: var(--rb-paper);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 30px 80px rgba(0, 0, 0, .45);
}
.rb-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--rb-paper);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
@media (max-width: 600px) { .rb-lightbox__close { top: 6px; right: 6px; } }
.rb-photo a[data-zoom] { cursor: zoom-in; }

/* The versions sit on a page of their own. */
.rb-versions {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) clamp(3.1rem, 6vw, 3.75rem);
  min-width: 0;
}

.rb-version + .rb-version {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 2px dashed var(--rb-rule);
}
.rb-versions.is-tabbed .rb-version + .rb-version { margin-top: 0; padding-top: 0; border-top: 0; }
.rb-versions.is-tabbed .rb-version__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.rb-version__title {
  margin: 0 0 .25rem;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--rb-cranberry);
}

.rb-version__lede {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  color: var(--muted);
  max-width: 60ch;
}

/* Tabs, made by recipes.js from the sections above. */
.rb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 1.25rem;
  padding: 0 0 .8rem;
  border-bottom: 1px solid var(--rb-rule);
}
.rb-tabs button {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.rb-tabs button:hover { color: var(--ink); border-color: #d3c5aa; }
.rb-tabs button[aria-selected="true"] { background: var(--rb-cranberry); color: #fff; }

/* As written: her words in "ink", sitting on the ruled lines. */
.rb-handwriting {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: var(--rb-line-h);
  color: var(--rb-ink);
  overflow-wrap: anywhere;
  /* Ruled lines one text line apart, so each line of her words sits on one. */
  background-image: repeating-linear-gradient(transparent 0 calc(var(--rb-line-h) - 1px), var(--rb-rule) calc(var(--rb-line-h) - 1px) var(--rb-line-h));
  background-position: 0 -.15rem;
}
.rb-uncertain {
  font-style: normal;
  font-family: var(--sans);
  font-size: .75em;
  font-weight: 700;
  color: var(--rb-cranberry);
}

.rb-subhead {
  margin: 1.4rem 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rb-forest);
}
.rb-version > .rb-subhead:first-of-type { margin-top: 0; }

.rb-group {
  margin: 1rem 0 .3rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--rb-navy);
}

.rb-ingredients,
.rb-steps {
  margin: 0;
  padding-left: 1.3rem;
  line-height: 1.6;
}
.rb-ingredients li { padding: .18rem 0; }
.rb-ingredients li::marker { color: var(--rb-cranberry); }
.rb-steps li { padding: .35rem 0 .35rem .25rem; }
.rb-steps li::marker { font-family: var(--display); font-weight: 700; color: var(--rb-cranberry); }

.rb-note {
  margin-top: 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: 8px;
  font-size: .95rem;
}
.rb-note ul { margin: 0; padding-left: 1.1rem; }
.rb-note__title {
  margin: 0 0 .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rb-note__title span { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Her own margin notes: blue ink on a slightly deeper page. */
.rb-note--margin {
  background: rgba(43, 63, 107, .06);
  border-left: 3px solid var(--rb-ink);
  font-family: var(--display);
  font-style: italic;
  color: var(--rb-ink);
}
.rb-note--margin .rb-note__title { font-family: var(--sans); font-style: normal; color: var(--rb-ink); }

/* Anything that is not hers: plainly marked, on white, dashed. */
.rb-note--added {
  background: #fff;
  border: 1px dashed #c9b999;
  color: var(--muted);
}
.rb-note--added .rb-note__title { color: var(--rb-forest); }

.rb-ideas { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rb-ideas li { padding: .9rem 1.1rem; background: #fff; border: 1px dashed #c9b999; border-radius: 8px; }
.rb-ideas h3 { margin: 0 0 .3rem; font-family: var(--display); font-size: 1.1rem; color: var(--rb-forest); }
.rb-ideas p { margin: 0; }

.rb-story {
  max-width: 720px;
  margin: 2.5rem auto 0;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--rb-ink);
}
.rb-story h2 { font-size: 1.4rem; color: var(--rb-cranberry); }

/* Turn the page. */
.rb-turn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid #d8ccb4;
}
.rb-turn a {
  display: grid;
  gap: .15rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}
.rb-turn a span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rb-cranberry);
}
.rb-turn a:hover { color: var(--rb-navy); }
.rb-turn__next { text-align: right; }

/* ---------- Print: just the recipe ---------- */

@media print {
  body.book { background: #fff; }
  .site-nav, .site-footer, .rb-turn, .rb-tabs, .rb-crumb, .rb-photos { display: none !important; }
  .rb-versions { box-shadow: none; background: none; padding: 0; }
  .rb-version[hidden] { display: none !important; }
  .rb-entry__body { display: block; }
}