/* The recipe book (DECISIONS #84), on top of /styles.css and the blog's reading measure. Static
   pages with no script: everything here has to read well with nothing but HTML and this file. */
.book .crumbs ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ink-3); }
.book .crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.book .crumbs a { color: var(--ink-3); text-decoration: none; }
.book .crumbs a:hover { color: var(--ink-2); text-decoration: underline; }
.book h1 { margin-bottom: 6px; }
.book .updated a { color: var(--accent-text); }
.book .headnote { font-size: 19px; color: #D9CCCF; margin: 14px 0 24px; }
.book .hero { margin: 0 0 22px; }
.book .hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface); }
.book .hero figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.book .hero figcaption a { color: var(--ink-3); }
.book .facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 30px; padding: 14px 18px; background: var(--surface); border-radius: 12px; }
.book .facts div { margin: 0; }
.book .facts dt { font-size: 13px; color: var(--ink-3); margin: 0; }
.book .facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.book .recipe-body h2 { margin-top: 36px; font-size: 24px; }
.book .recipe-body h3 { margin: 22px 0 6px; font-size: 17px; color: var(--ink-2); }
.book .ingredients { padding-left: 22px; }
.book .ingredients li { margin-bottom: 8px; color: #D9CCCF; }
.book .steps { padding-left: 26px; }
.book .steps li { margin-bottom: 16px; color: #D9CCCF; font-size: 18px; }
.book .steps li::marker { color: var(--accent-text); font-weight: 700; }
.book .notes { color: #D9CCCF; }
.book .salt-note { font-size: 15px; color: var(--ink-3); margin: 4px 0 0; }
.book .book-cta .cta-secondary { display: inline-block; margin: 12px 0 0 16px; color: var(--accent-text); font-size: 15px; }
.book .related h2, .book .course h2, .book .az h2 { font-size: 22px; margin: 40px 0 14px; }
.book .course h2 a { color: var(--ink); text-decoration: none; }
.book .course h2 a:hover { text-decoration: underline; }
.book .cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.book .card a { display: block; color: var(--ink); text-decoration: none; }
.book .card-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); }
.book .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book .card-emoji { font-size: 44px; }
.book .card-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; margin-top: 8px; }
.book .card a:hover .card-title { text-decoration: underline; }
.book .card-meta { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.book .more a, .book .hub-links a { color: var(--accent-text); }
.book .hub-links { margin-top: 28px; color: var(--ink-2); font-size: 15px; }
.book .hub-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 24px; margin: 8px 0 12px; }
.book .hub-nav h2 { font-size: 15px; color: var(--ink-3); text-transform: none; margin: 16px 0 6px; }
.book .hub-nav ul { list-style: none; padding: 0; margin: 0; }
.book .hub-nav li { margin: 0 0 4px; }
.book .hub-nav a { color: var(--ink); }
.book .hub-nav span { color: var(--ink-3); font-size: 13px; }
.book .az-list { columns: 2 220px; padding-left: 18px; font-size: 15px; }
.book .az-list li { margin-bottom: 4px; break-inside: avoid; }
.book .az-list a { color: var(--ink-2); }
.book .updated .tested { color: var(--ink-2); font-weight: 600; }