:root{font-family:Georgia,'Times New Roman',serif;color:#4b3528;background:#d9cbb5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #8c3d38;outline-offset:4px}[hidden]{display:none!important}.kitchen{min-height:100svh;position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;align-items:center;padding:24px 20px 18px}.backsplash{position:absolute;inset:0;z-index:-4;background:repeating-linear-gradient(90deg,transparent 0 178px,#b6aa922e 179px 181px),repeating-linear-gradient(0deg,#e6dfcf 0 83px,#c4b8a3 84px,#f3edde 86px 89px)}.countertop{position:absolute;inset:25% -10% -20%;z-index:-3;background:repeating-linear-gradient(92deg,transparent 0 210px,#65432540 212px 214px,transparent 215px 421px),repeating-linear-gradient(1deg,#b88d62 0,#cda578 3px,#be956b 5px,#cda87c 9px,#bc9369 14px);transform:perspective(900px) rotateX(16deg);transform-origin:bottom;box-shadow:0 -12px 28px #49342433}.crock-scene{position:absolute;left:4%;top:17%;width:100px;height:160px;z-index:-2;transform:rotate(-7deg)}.crock{position:absolute;bottom:0;width:96px;height:110px;border-radius:8px 8px 24px 24px;background:linear-gradient(90deg,#bbae8e,#f3ecdb 45%,#b6a987);box-shadow:9px 15px 20px #49331f40;border-top:8px solid #9c8d6e}.spoon{position:absolute;left:35px;top:-45px;width:11px;height:160px;background:linear-gradient(90deg,#946641,#c99e6e);transform:rotate(-18deg);border-radius:12px}.spoon:before{content:'';position:absolute;width:31px;height:53px;left:-10px;top:-17px;border-radius:50%;background:linear-gradient(90deg,#a4764d,#d1ad7f);box-shadow:inset 3px 2px 6px #7c523644}.spoon.second{left:68px;top:-28px;transform:rotate(15deg)}.linen{position:absolute;right:-60px;bottom:6%;height:240px;width:350px;transform:rotate(-19deg);background:repeating-linear-gradient(90deg,transparent 0 10px,#b8796822 11px 14px,transparent 15px 42px),repeating-linear-gradient(0deg,#e1d8c4 0 3px,#ede5d3 4px 6px);box-shadow:4px 8px 15px #48332124;z-index:-2}.welcome{text-align:center;min-height:58px}.welcome>span{font-size:11px;text-transform:uppercase;letter-spacing:.21em;color:#715840}.welcome p{font-size:14px;font-style:italic;margin:8px 0 16px;color:#755b43}.book-space{flex:1;width:min(1090px,95vw);display:flex;justify-content:center;align-items:center;min-height:350px;padding:8px 0 16px;perspective:2000px}.book{position:relative;width:min(40vh,380px,84vw);aspect-ratio:396/612;transform-style:preserve-3d;transition:width .8s;filter:drop-shadow(10px 22px 15px #3b241a65)}.book.opened{width:min(84vh,960px,94vw);aspect-ratio:792/612}.book.opened.single{width:min(43vh,470px,88vw);aspect-ratio:396/612}.binding{position:absolute;inset:-3px -4px -6px;background:#805b3f;border-radius:3px 7px 7px 3px;box-shadow:3px 3px 0 #ead8b8,5px 5px 0 #b59a75}.inside{position:absolute;inset:0;display:flex;opacity:0;transition:opacity .4s .2s;background:#f9f6ef;border-radius:3px}.opened .inside{opacity:1}.paper{display:block;width:50%;height:100%;padding:0;border:0;background:#fff;position:relative;overflow:hidden}.paper img{display:block;width:100%;height:100%;object-fit:contain}.paper:first-child{border-radius:3px 0 0 3px}.paper:nth-child(2){border-radius:0 3px 3px 0}.paper:after{content:'';position:absolute;inset:0;box-shadow:inset -12px 0 16px -15px #3d241b99;pointer-events:none}.paper:nth-child(2):after{box-shadow:inset 12px 0 16px -15px #3d241b99}.fold{position:absolute;top:0;bottom:0;left:50%;width:14px;transform:translateX(-50%);background:linear-gradient(90deg,#3d241b1a,#fff3,#3d241b1a);pointer-events:none}.single .paper{width:100%}.single .fold{display:none}.cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#ffd5ba;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .95s,width .8s,visibility 0s;border-radius:2px 5px 5px 2px;overflow:hidden;box-shadow:inset 4px 0 5px #573c2d44}.cover img{display:block;width:100%;height:100%;object-fit:contain}.opened .cover{width:50%;transform:rotateY(-180deg);visibility:hidden;transition:transform .95s,width .8s,visibility 0s .95s}.single.opened .cover{width:100%}.turning-page{display:none;position:absolute;top:0;bottom:0;width:50%;z-index:5;transform-style:preserve-3d;pointer-events:none;background:#fff;backface-visibility:hidden}.turning-page img{width:100%;height:100%;display:block;object-fit:contain}.turning-page.forward{display:block;left:50%;transform-origin:left center;animation:forward .7s ease-in-out}.turning-page.backward{display:block;left:0;transform-origin:right center;animation:backward .7s ease-in-out}.single .turning-page{width:100%;left:0}.single .turning-page.forward{left:0}@keyframes forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes backward{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}.reading-bar{display:flex;align-items:center;gap:12px;padding:7px;border-radius:40px;background:#f5ecdcf5;box-shadow:0 6px 20px #54382226;z-index:6;margin-top:10px}.reading-bar button,.primary{border:0;border-radius:28px;padding:12px 19px;background:transparent;color:#5a3b2a;font:600 12px Arial,sans-serif}.reading-bar button:hover{background:#dfcbb0}.reading-bar .primary,.primary{background:#7d373b;color:#fff6e6}.primary:hover{background:#632a30}.reading-tools{display:flex;align-items:center;gap:4px}#counter{font:12px Arial,sans-serif;min-width:78px;text-align:center;color:#644d38}.view-switch{display:flex;gap:3px;padding-left:8px;border-left:1px solid #cebaa1}.view-switch button[aria-pressed=true]{background:#ddc9ad;color:#493221}.book-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:15px}.book-tools button,.jump-label{font:12px Arial,sans-serif;color:#513a27}.book-tools button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:4px}.jump-label select{background:#f8efdfb3;border:1px solid #a68c6c;border-radius:5px;padding:5px 8px;margin-left:4px;color:#513a27}.reading-hint{font:11px Arial,sans-serif;color:#624831;margin:13px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:1px solid #c3a88a;border-radius:12px;background:#fff9ed;color:#4b3528;padding:28px;width:min(760px,94vw);max-height:90svh;overflow:auto;box-shadow:0 20px 80px #24150c66}dialog::backdrop{background:#261a11aa;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-heading h2{font-size:27px;font-weight:400;margin:0}.eyebrow{font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#8c6a49;margin:0 0 9px}.dismiss{border:0;background:#ecdfca;color:#5e3e2d;font:24px Arial,sans-serif;border-radius:50%;width:36px;height:36px;flex-shrink:0}.muted{font:13px/1.65 Arial,sans-serif;color:#80694f}.field-label,form label{font:13px/1.5 Arial,sans-serif;display:block;margin-bottom:8px}input,textarea{width:100%;border:1px solid #cfbba0;background:#fffdf8;color:#4b3528;padding:12px;border-radius:6px;margin:6px 0 16px}textarea{resize:vertical}.chapters{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 20px}.chapters button{border:1px solid #d7c4a8;background:#f5ead8;color:#6e4b32;border-radius:20px;font:12px Arial,sans-serif;padding:8px 12px}.result{display:flex;align-items:center;text-align:left;gap:16px;width:100%;padding:15px 8px;border:0;border-top:1px solid #e2d4be;background:transparent;color:#513527}.result:hover{background:#f3e5cf}.result span{font:12px Arial,sans-serif;color:#987b57;min-width:25px}.result strong{font-size:16px;font-weight:400}.zoom-dialog{width:min(1100px,96vw)}.zoom-dialog>img{display:block;width:100%;height:auto}.zoom-dialog .dialog-heading{position:sticky;top:-28px;background:#fff9edf5;padding:12px 0;z-index:1}.zoom-dialog h2{font-size:20px}.recipe-lines{white-space:pre-wrap;line-height:1.65}.family-list article{border-top:1px solid #ddcbb1;padding:12px 0 24px}.family-list article img{max-width:100%;max-height:340px;border-radius:6px}.family-list article h3{font-size:24px;font-weight:400}.family-list article h4{margin-bottom:6px}.add-recipe{border-top:1px solid #d6c2a5;padding-top:20px}.add-recipe summary{cursor:pointer;font-size:20px;margin-bottom:20px}#saveStatus{font:13px/1.5 Arial,sans-serif}
@media(min-height:900px){.book-space{padding-top:25px;padding-bottom:25px}.welcome{margin-top:12px}.book.opened{width:min(88vh,1020px,94vw)}.book{width:min(43vh,440px,84vw)}}
@media(max-width:700px){.kitchen{padding:20px 10px 16px}.welcome>span{font-size:10px}.welcome p{font-size:12px;max-width:90vw}.book-space{min-height:320px;padding:12px 0 20px}.book{width:min(48vh,350px,85vw)}.book.opened{width:94vw}.book.opened.single{width:min(54vh,440px,88vw)}.crock-scene{left:-50px;top:18%;transform:scale(.65) rotate(-8deg)}.linen{right:-180px}.reading-bar{gap:5px;padding:5px;max-width:98vw}.reading-bar button{padding:11px 12px}.view-switch{padding-left:5px}.reading-tools>button span{display:none}#counter{min-width:68px}.book-tools{gap:12px;margin-top:14px}.reading-hint{font-size:10px;text-align:center;line-height:1.5}.dialog-heading h2{font-size:23px}dialog{padding:20px}.zoom-dialog .dialog-heading{top:-20px}.zoom-dialog>img{width:max(100%,700px);max-width:none}.zoom-dialog .dialog-heading{position:sticky;left:0}.zoom-dialog>p{max-width:80vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Reading layouts share the same page proportions on every screen. */
.kitchen {
  --page-height: clamp(230px, calc(100svh - 275px), 820px);
  padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.book-space {
  width: 100%;
  min-height: 0;
  padding: 12px 0 20px;
}
.book, .book.opened.single {
  width: min(calc(var(--page-height) * 0.64706), 88vw, 530px);
}
.book.opened {
  width: min(calc(var(--page-height) * 1.29412), 94vw, 1100px);
}
.welcome { margin-top: 0; }
.reading-bar { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.reading-bar button, .book-tools button, .chapters button, .dismiss, .primary, .zoom-controls button {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}
.book-tools { gap: 8px 16px; margin-top: 10px; }
.book-tools button { padding: 10px 6px; }
.jump-label { display: flex; align-items: center; }
.jump-label select { min-height: 44px; font-size: 16px; }
input, select, textarea { font-size: 16px; }
dialog { max-height: calc(100svh - 32px); max-width: calc(100vw - 24px); overscroll-behavior: contain; }
.dialog-heading h2 { overflow-wrap: anywhere; }
.zoom-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.zoom-controls button { border: 1px solid #cfb99b; background: #eee0c8; border-radius: 22px; color: #513527; padding: 8px 14px; }
.zoom-controls span { font: 14px Arial, sans-serif; min-width: 48px; text-align: center; }
.zoom-viewport { width: 100%; overflow: auto; overscroll-behavior: contain; }
.zoom-viewport img { display: block; width: 100%; height: auto; max-width: none; }
.zoom-dialog { overflow-x: hidden; }
.zoom-dialog .dialog-heading { left: auto; }
.zoom-dialog details { margin-top: 20px; }
.zoom-dialog summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.recipe-lines { font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .kitchen { --page-height: clamp(230px, calc(100svh - 280px), 700px); }
  .welcome { min-height: 50px; }
  .welcome p { margin-bottom: 8px; }
  .book-tools { gap: 4px 10px; }
  .reading-bar { gap: 4px; }
  .reading-bar button { padding: 10px 12px; }
  .book-tools button, .jump-label { font-size: 12px; }
  dialog { padding: 18px; }
  .zoom-dialog .dialog-heading { top: -18px; }
  .zoom-dialog h2 { font-size: 19px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .book-tools { gap: 10px 24px; }
  .reading-bar button { font-size: 14px; padding-inline: 20px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .kitchen { --page-height: 290px; padding-top: max(10px, env(safe-area-inset-top)); }
  .welcome { min-height: 24px; }
  .welcome p { display: none; }
  .book-space { padding-block: 12px; }
  .reading-hint { margin-top: 6px; }
}
/* The opened book becomes a device-sized reader with a floating dock. */
.reading {
  height: 100dvh;
  min-height: 100svh;
  padding: 0;
  display: block;
  background: #fff;
  --dock-height: calc(80px + env(safe-area-inset-bottom));
}
.reading .welcome, .reading .backsplash, .reading .countertop,
.reading .crock-scene, .reading .linen { display: none; }
.reading .book-space {
  position: absolute;
  inset: env(safe-area-inset-top) 0 0;
  display: block;
  overflow: auto;
  padding: 0 0 var(--dock-height);
  width: 100%;
  perspective: 2000px;
  overscroll-behavior: contain;
}
.reading .book.opened {
  width: 100%;
  min-height: calc(100dvh - var(--dock-height) - env(safe-area-inset-top));
  margin: 0;
  filter: none;
  transition: none;
}
.reading .book .binding, .reading .book .fold { display: none; }
.reading .paper { border-radius: 0; }
.reading .paper img { object-position: top; }
.reading .paper:after { box-shadow: none; }
.reading .cover { transition-duration: .65s; }
.reading-bar {
  position: fixed;
  z-index: 10;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 16px);
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 8px;
  background: #fff8eaeF;
  border: 1px solid #cdb797;
  box-shadow: 0 5px 25px #39271940;
  backdrop-filter: blur(14px);
}
.kitchen:not(.reading) { padding-bottom: 100px; }
.reading-tools { gap: 0; }
.reading-bar .reading-tools button { padding: 8px 10px; }
.reading-tools button span { display: none; }
#counter { min-width: 64px; }
.reading-bar .dock-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 10px;
  min-height: 48px;
}
.dock-action svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#readerMenu .view-switch { border: 0; padding: 0; gap: 12px; }
#readerMenu .view-switch button { min-height: 48px; border: 1px solid #cdb797; border-radius: 24px; padding: 10px 22px; color: #513527; background: #f8efde; }
#readerMenu .view-switch button[aria-pressed=true] { background: #dfc7a4; }
#readerMenu .book-tools { justify-content: flex-start; margin-top: 24px; }
#printArea { display: none; }
@media (max-width: 380px) {
  .reading-bar { gap: 2px; padding: 5px; }
  .reading-bar .dock-action { padding-inline: 6px; }
  #counter { min-width: 58px; font-size: 11px; }
}
@media print {
  @page { size: portrait; margin: 10mm; }
  body { background: white; }
  .kitchen, dialog { display: none !important; }
  #printArea { display: block; }
  .print-page { break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page img { display: block; max-width: 100%; width: auto; height: auto; max-height: 250mm; margin: auto; }
}
/* Fit the complete original page above the dock, including on iPad Safari. */
.reading {
  min-height: 0;
  --dock-height: calc(88px + env(safe-area-inset-bottom));
  --reading-top: calc(52px + env(safe-area-inset-top));
  --reading-height: calc(100dvh - var(--dock-height) - var(--reading-top));
}
.reading .book-space {
  inset: var(--reading-top) 0 var(--dock-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.reading .book.opened {
  flex: none;
  width: min(100%, calc(var(--reading-height) * 1.29412));
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 792 / 612;
}
.reading .book.opened.single {
  width: min(100%, calc(var(--reading-height) * 0.64706));
  aspect-ratio: 396 / 612;
}
.paper { cursor: default; touch-action: manipulation; }
.paper img { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.zoom-dialog { width: min(760px, calc(100vw - 24px)); }
.zoom-viewport.magnified { max-height: 65dvh; }
.zoom-viewport img { max-height: none; }
.zoom-viewport:not(.magnified) img {
  max-height: max(100px, calc(100dvh - 240px));
  object-fit: contain;
}

.collection-link { display:inline-flex; align-items:center; min-height:44px; padding:8px; color:#7d373b; font:600 13px Arial,sans-serif; }

.reader-navigation {
  position: absolute;
  z-index: 12;
  top: calc(4px + env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}
.reader-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: #164539;
  background: #fffaf0;
  border: 1px solid #d5c7af;
  border-radius: 24px;
  font: 700 14px system-ui, sans-serif;
  text-decoration: none;
}
.reader-navigation a:focus-visible { outline: 3px solid #28755f; outline-offset: 2px; }
.kitchen:not(.reading) { padding-top: calc(64px + env(safe-area-inset-top)); }