/* ==========================================================================
   Printable recipes (layouts/print.html): one recipe, a selection or a
   collection, printed as the recipe box's own cards. On screen the sheets
   are white card stock lying in the bottom of the box (a warm desk) under
   a toolbar of options; on paper only the sheets remain.

   The identity carries onto paper, ink-economically: the seal and word
   mark on the cover, each title written on the card's thin red line,
   ingredients and contents on pale blue ruled lines with empty boxes to
   tick, the testers' notes and the reader's own in blue-black pen, a
   category's small tab beside its word. Lines and small marks only, never
   a large fill.

   Standalone: this file declares its own fonts and tokens (it does not
   load styles.css), copied from the site's tokens (styles.css section
   02). Printing resets the desk and the toolbar to paper.

   Contents
   01  Fonts (self-hosted, OFL; licences in /static/fonts/)
   02  Tokens: the sheet, the desk and toolbar
   03  Base, the category word
   04  Toolbar and notices (screen only)
   05  Sheets
   06  Title page and contents
   07  Recipe: title, record line, facts, photo
   08  Recipe: ingredients, method, testers' notes, notes, source
   09  Compact
   10  Small screens
   11  Print
   12  Languages and scripts
   13  On screen: nothing under 14px

   Right to left: spacing, borders and offsets are logical
   (padding-inline-start...), so they mirror under <html dir="rtl">.
   ========================================================================== */

/* 01  Fonts ------------------------------------------------------------------ */
@font-face {
    font-family: "Besley";
    src: url("../fonts/besley-latin-wght-normal.woff2?v=f6acafeade510fcd") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-latin-wght-normal.woff2?v=7a19a7027e125257") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

/* 02  Tokens ------------------------------------------------------------------
   Ratios (bin/contrast.py) are on the sheet (#FFFFFF) unless noted; the
   toolbar's on the paper it sits on. */
:root {
    color-scheme: light;

    /* Latin-only webfonts: section 12 swaps --serif and --sans for Arabic
       and Japanese; the word mark and figures stay latin (--latin-*). */
    --latin-serif: "Besley", "Rockwell", "Clarendon", Georgia, serif;
    --latin-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --serif: var(--latin-serif);
    --sans: var(--latin-sans);

    /* The sheet: white index card stock and warm ink, as it previews
       paper. */
    --sheet: #FFFFFF;
    --sheet-2: #F3EEE4;        /* under a photo while it loads */
    --sheet-edge: #CBC3B7;     /* the sheet's 1px edge on the desk (decorative) */
    --ink: #221E1A;            /* 16.6 */
    --ink-2: #4E4842;          /* 9.0 */
    --ink-3: #665F58;          /* 6.3 */
    --pen: #213A5C;            /* 11.5: the testers' notes, the reader's own, ticked boxes */
    --pen-2: #3D5878;          /* 7.3: testers' meta */
    --red: #B4301F;            /* 6.2: the red pencil's wave under Needs work */
    --card-red: #E2646A;       /* the 2px line a title sits on (structure only) */
    --rule: #C2D6E8;           /* ruled blue: the lines rows are written on */
    --rule-2: #97B1C8;         /* darker ruled blue: link underlines */
    --photo-edge: rgba(34, 30, 26, 0.12);

    /* The eight dividers (styles.css): each category's fill and its edge,
       the small tab drawn before the category's word. "All" and anything
       not filed is plain card stock in its darker edge. */
    --cat-all: #FFFFFF;           --cat-all-edge: #8F877C;
    --cat-breakfast: #F8B978;     --cat-breakfast-edge: #9C631D;
    --cat-lunch: #88D7B9;         --cat-lunch-edge: #318267;
    --cat-dinner: #EB8054;        --cat-dinner-edge: #A65A3B;
    --cat-sides: #B4D58A;         --cat-sides-edge: #607D35;
    --cat-snacks: #C1B3EF;        --cat-snacks-edge: #75679E;
    --cat-dessert: #EFA3C7;       --cat-dessert-edge: #9D587A;
    --cat-baking: #E3CEAD;        --cat-baking-edge: #826E50;
    --cat-drinks: #84BFE9;        --cat-drinks-edge: #3F789E;

    /* Around the sheets (screen only): the bottom of the box as the desk,
       the toolbar on paper above the red line, like the site's masthead. */
    --desk: #F3EEE4;
    --bar: #FAF6EE;
    --bar-ink: #221E1A;        /* 15.4 on the bar */
    --bar-ink-2: #4E4842;      /* 8.4 */
    --bar-rule: #C2D6E8;
    --bar-rule-2: #97B1C8;
    --bar-line: #E2646A;       /* the toolbar's red header line */
    --bar-card: #FFFFFF;       /* the option boxes' card stock */
    --control: #7F7871;        /* 4.0 on the bar, 4.4 on card: the option boxes' edge */
    --button: #221E1A;
    --button-hover: #4E4842;
    --on-button: #FFFFFF;      /* 16.6 / 9.0 */
    --ochre: #8A5300;          /* 5.9: the notice's bar and glyph */
    --focus: #213A5C;          /* 10.7 */
    --focus-width: 3px;
    --corner: 4px;             /* the toolbar's boxes and button, as the site's */
    --tab-corner: 3px;         /* the category's little tab */
    --tick-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-5' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --sheet-width: 210mm;
    --sheet-pad: 16mm 18mm 14mm;
}

/* 03  Base ---------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--desk);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-synthesis-style: none;
}

body.print-body {
    margin: 0;
    background: var(--desk);
    color: var(--bar-ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd, figure {
    margin: 0;
}

ol, ul {
    padding: 0;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--rule-2);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: currentColor;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

strong, b {
    font-weight: 700;
}

.icon {
    display: inline-block;
    flex: none;
    width: 1.125em;
    height: 1.125em;
    vertical-align: -0.2em;
}

:focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The category word (the catWord func): the category's small divider tab
   in its bright fill, outlined in its edge, standing on the line beside
   the word, which carries the meaning; as on the site. The tab is a 3mm
   mark, so it prints in its colour (exact) without spending ink; in
   forced colours it is outlined. */
.cat {
    white-space: nowrap;
}

/* The words after the first may wrap, so a long category folds on a phone
   instead of overflowing it; the tab stays with the first word. */
.cat-rest {
    white-space: normal;
}

.cat::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 0.72em;
    margin-inline-end: 0.35em;
    border: 0.75pt solid var(--tab-edge, var(--cat-all-edge));
    border-bottom: 0;
    border-radius: var(--tab-corner) var(--tab-corner) 0 0;
    background: var(--tab-swatch, var(--cat-all));
    vertical-align: -0.02em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.cat-breakfast { --tab-swatch: var(--cat-breakfast); --tab-edge: var(--cat-breakfast-edge); }
.cat-lunch     { --tab-swatch: var(--cat-lunch);     --tab-edge: var(--cat-lunch-edge); }
.cat-dinner    { --tab-swatch: var(--cat-dinner);    --tab-edge: var(--cat-dinner-edge); }
.cat-sides     { --tab-swatch: var(--cat-sides);     --tab-edge: var(--cat-sides-edge); }
.cat-snacks    { --tab-swatch: var(--cat-snacks);    --tab-edge: var(--cat-snacks-edge); }
.cat-dessert   { --tab-swatch: var(--cat-dessert);   --tab-edge: var(--cat-dessert-edge); }
.cat-baking    { --tab-swatch: var(--cat-baking);    --tab-edge: var(--cat-baking-edge); }
.cat-drinks    { --tab-swatch: var(--cat-drinks);    --tab-edge: var(--cat-drinks-edge); }

/* 04  Toolbar and notices ---------------------------------------------------------- */
/* The print preview's masthead: paper over the red header line. */
.print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--gap-bar, 28px);
    padding: 6px clamp(16px, 4vw, 48px);
    border-bottom: 2px solid var(--bar-line);
    background: var(--bar);
    color: var(--bar-ink);
    font-size: 15px;
}

.print-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bar-rule-2);
}

.print-back:hover {
    text-decoration-color: currentColor;
}

/* The recipe or collection name: whole on wide screens, cut short with
   an ellipsis when the bar runs out of room. */
.print-back-label {
    min-width: 0;
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
}

/* Each option is a link that reloads the preview with it flipped; its box
   shows the state (and the hidden words say it), drawn like the site's
   checkboxes: a 1.5px control edge on card stock, and ticked, an ink fill
   with a card-stock tick knocked out. The sprite's tick is kept for
   forced colours. */
.print-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--bar-ink);
    font-weight: 600;
    text-decoration: none;
}

.print-toggle-box {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--control);
    border-radius: var(--corner);
    background: var(--bar-card);
}

.print-toggle-box .icon {
    display: none;
    width: 14px;
    height: 14px;
}

.print-toggle:hover .print-toggle-box {
    border-color: var(--bar-ink);
}

.print-toggle.is-on .print-toggle-box {
    border-color: var(--bar-ink);
    background: var(--bar-ink) var(--tick-mark) center / 78% no-repeat;
}

/* One per page / Compact: words, the current one underlined in ink. */
.print-seg {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--bar-rule);
}

.print-seg a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bar-ink-2);
    font-weight: 600;
    text-decoration: none;
}

.print-seg a:hover {
    color: var(--bar-ink);
    text-decoration: underline;
    text-decoration-color: var(--bar-rule-2);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
}

.print-seg a[aria-current="true"] {
    color: var(--bar-ink);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
}

.print-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}

.print-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--button);
    border-radius: var(--corner);
    background: var(--button);
    color: var(--on-button);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.print-button:hover {
    border-color: var(--button-hover);
    background: var(--button-hover);
}

.print-button[hidden] {
    display: none;
}

/* Without the script there is no button: say how to print instead. */
.print-hint {
    font-size: 14px;
    color: var(--bar-ink-2);
}

.print-button:not([hidden]) + .print-hint {
    display: none;
}

/* Recipes left out, or a message from the server: a plain line with an
   ochre bar and glyph, above the sheets. */
.print-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(var(--sheet-width), calc(100% - 32px));
    margin: 24px auto 0;
    padding: 2px 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--ochre);
    color: var(--bar-ink);
    font-size: 15px;
    line-height: 1.45;
}

.print-notice > .icon {
    margin-top: 2px;
    color: var(--ochre);
}

.print-notice p + p {
    margin-top: 4px;
}

/* 05  Sheets ---------------------------------------------------------------------
   Each sheet is white card stock with a 1px edge and square corners (it
   is a page), no shadow; it lifts off the warm desk by value. */
.print-document {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding: 24px 16px 72px;
}

.print-recipes {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: 100%;
}

.print-sheet,
.print-pages .print-recipe,
.print-single .print-recipe,
.print-compact .print-recipes {
    width: min(var(--sheet-width), 100%);
    padding: var(--sheet-pad);
    border: 1px solid var(--sheet-edge);
    background: var(--sheet);
    color: var(--ink);
    font-size: 10.5pt;
    line-height: 1.45;
}

.print-compact .print-recipes {
    display: block;
}

/* 06  Title page and contents ------------------------------------------------------ */
/* The seal (in its colours: a white disc, the red rim, the pen's wire;
   lines, not fills, so it costs little ink) and the word mark. */
.print-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.print-logo-mark {
    flex: none;
    width: 40px;
    height: 40px;
}

.print-logo-word {
    display: grid;
    line-height: 1.05;
}

.print-logo-the {
    font-family: var(--latin-sans);
    font-size: 9pt;
    font-weight: 600;
    color: var(--ink-2);
}

.print-logo-name {
    font-family: var(--latin-serif);
    font-size: 15pt;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: lining-nums proportional-nums;
}

/* The cover's title, written on the card's red line, as every title on
   the site is; then the description as a Besley standfirst. */
.print-cover-title {
    margin-top: 30mm;
    padding-bottom: 5pt;
    border-bottom: 2px solid var(--card-red);
    font-family: var(--serif);
    font-size: 34pt;
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
}

.print-cover-sub {
    max-width: 36em;
    margin-top: 10pt;
    font-family: var(--serif);
    font-size: 13pt;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-2);
    white-space: pre-line;
}

.print-cover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2pt 0;
    margin-top: 14pt;
    font-size: 10.5pt;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums lining-nums;
}

/* The separator ends a line when the meta wraps, never starts one. */
.print-cover-meta > span:not(:last-child)::after {
    content: "·";
    margin-inline: 8pt;
    color: var(--ink-3);
}

.print-cover-meta strong {
    color: var(--ink);
}

/* "3 proven · 1 kitchen original · 1 in the Test Kitchen" */
.print-cover-record {
    display: flex;
    flex-wrap: wrap;
    gap: 2pt 0;
    margin-top: 2pt;
    font-size: 10.5pt;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums lining-nums;
}

.print-cover-record > span:not(:last-child)::after {
    content: "·";
    margin-inline: 8pt;
    color: var(--ink-3);
}

/* The title, the description and the reader's own note take their
   direction from their own words (a French collection name on an Arabic
   page), line by line, but line up with the page. */
.print-cover-title,
.print-cover-sub,
.print-mynotes p {
    unicode-bidi: plaintext;
}

[dir="ltr"] :is(.print-cover-title, .print-cover-sub, .print-mynotes p) { text-align: left; }
[dir="rtl"] :is(.print-cover-title, .print-cover-sub, .print-mynotes p) { text-align: right; }

/* The contents: a heading on a 1px ink line (the cover's one red line is
   its title's), then a ruled index: number, title, the category's tab and
   word, the standing. */
.print-toc {
    margin-top: 16mm;
}

.print-toc h2 {
    padding-bottom: 3pt;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: 14pt;
    font-weight: 600;
}

.print-toc ol {
    list-style: none;
}

.print-toc a {
    display: grid;
    grid-template-columns: 2em minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10pt;
    padding-block: 5pt;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
}

.print-toc a:hover .print-toc-title {
    text-decoration: underline;
    text-decoration-color: var(--card-red);
    text-decoration-thickness: 2px;
}

.print-toc-num {
    font-family: var(--latin-serif);
    font-weight: 600;
    text-align: end;
    font-variant-numeric: lining-nums proportional-nums;
}

.print-toc-title {
    font-family: var(--serif);
    font-size: 11.5pt;
    font-weight: 600;
    line-height: 1.3;
}

[dir="ltr"] .print-toc-title { text-align: left; }
[dir="rtl"] .print-toc-title { text-align: right; }

.print-toc-meta {
    font-size: 9pt;
    color: var(--ink-3);
    white-space: nowrap;
}

.print-toc-meta .cat {
    color: var(--ink-2);
}

.print-empty h1 {
    padding-bottom: 5pt;
    border-bottom: 2px solid var(--card-red);
    font-family: var(--serif);
    font-size: 20pt;
    font-weight: 600;
}

.print-empty p {
    margin-top: 8pt;
}

/* 07  Recipe: title, record line, facts, photo ------------------------------------- */
/* A single recipe's sheet opens with the seal and word mark, small, and
   the date and compiler at the end, over a ruled line. */
.print-single-brand {
    flex-wrap: wrap;
    margin-bottom: 14pt;
    padding-bottom: 8pt;
    border-bottom: 1px solid var(--rule);
}

.print-single-brand .print-logo-mark {
    width: 30px;
    height: 30px;
}

.print-single-brand .print-logo-name {
    font-size: 12pt;
}

.print-single-meta {
    margin-inline-start: auto;
    font-size: 9pt;
    color: var(--ink-3);
}

.print-intro {
    display: grid;
    gap: 12pt;
}

.print-intro.has-photo {
    grid-template-columns: minmax(0, 1fr) 58mm;
    align-items: start;
}

/* "No. 2 · ▬ Dinner · Italian": the recipe's place in the book (a single
   recipe has none), the divider it is filed behind and its cuisine, if it
   has one. */
.print-no {
    margin-bottom: 3pt;
    font-size: 9.5pt;
    font-weight: 600;
    color: var(--ink-2);
}

/* The title on the red line, the description under it in Besley 400. */
.print-title {
    padding-bottom: 4pt;
    border-bottom: 2px solid var(--card-red);
    font-family: var(--serif);
    font-size: 24pt;
    font-weight: 600;
    line-height: 1.12;
    text-wrap: balance;
}

.print-description {
    max-width: 42em;
    margin-top: 6pt;
    font-family: var(--serif);
    font-size: 11pt;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* A print: square, with an inset ink hairline. */
.print-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--sheet-2);
    outline: 1px solid var(--photo-edge);
    outline-offset: -1px;
}

/* The test record on one line. The status keeps the site's marks: the
   testers' ticked box in pen for Proven, the seal for a kitchen original,
   and the red pencil's wave under Needs work (the word says it too). */
.print-record {
    margin-top: 12pt;
    font-size: 10pt;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums lining-nums;
}

/* A label and its score stay on one line ("reproducibility 4.5"). */
.print-pair {
    white-space: nowrap;
}

.print-record strong {
    color: var(--ink);
}

.print-status .icon {
    width: 1.15em;
    height: 1.15em;
    margin-inline-end: 0.3em;
    vertical-align: -0.22em;
}

.print-status.is-proven .icon {
    color: var(--pen);
}

.print-status.is-needs-work {
    text-decoration: underline wavy var(--red);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

/* The facts as a recipe card's printed fields: a small label, then the
   value filled in on its own ruled line. */
.print-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, max-content));
    gap: 0 14mm;
    margin-top: 8pt;
    font-size: 10pt;
}

.print-facts dt {
    font-size: 8.5pt;
    color: var(--ink-3);
}

.print-facts dd {
    min-width: 22mm;
    padding-bottom: 2pt;
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

/* 08  Recipe: ingredients, method, testers' notes, notes, source -------------------- */
.print-columns {
    display: grid;
    grid-template-columns: 58mm minmax(0, 1fr);
    gap: 8mm;
    align-items: start;
    margin-top: 14pt;
}

/* Section heads inside the card sit on a 1px ink line: the card has one
   red line, its title's. */
.print-columns :is(h2, h3),
.print-extras :is(h2, h3) {
    margin-bottom: 4pt;
    padding-bottom: 3pt;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: 12.5pt;
    font-weight: 600;
    line-height: 1.2;
}

.print-ingredients ul {
    list-style: none;
}

/* Each ingredient on a ruled blue line, with an empty square box (2px
   corners, like the site's) to tick off in the kitchen. Borders, so they
   print without background graphics. */
.print-ingredients li {
    position: relative;
    padding-block: 3pt;
    padding-inline-start: 15pt;
    border-bottom: 1px solid var(--rule);
    font-variant-numeric: tabular-nums lining-nums;
}

.print-ingredients li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 5.5pt;
    width: 7.5pt;
    height: 7.5pt;
    border: 0.75pt solid var(--ink-2);
    border-radius: 1px;
}

/* A heading the author typed as a line ("For the ragù:"): a small head in
   Besley among the ruled lines, as on the recipe page. Nothing to tick, so
   no box, and no line of its own: it starts at the box's edge, with room
   above, and the ingredient line before it closes the group before. */
.print-ingredients .print-ingredient-group {
    padding-block: 8pt 1pt;
    padding-inline-start: 0;
    border-bottom: 0;
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.3;
}

.print-ingredients .print-ingredient-group:first-child {
    padding-top: 3pt;
}

.print-ingredients .print-ingredient-group::before {
    content: none;
}

.print-steps {
    list-style: none;
    counter-reset: step;
}

.print-steps > li {
    position: relative;
    padding-block: 3pt;
    padding-inline-start: 22pt;
    counter-increment: step;
    font-size: 11pt;
    line-height: 1.45;
}

.print-steps > li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: 2.5pt;
    min-width: 14pt;
    font-family: var(--latin-serif);
    font-size: 12pt;
    font-weight: 700;
    line-height: 1.3;
    text-align: end;
    font-variant-numeric: lining-nums proportional-nums;
}

/* A step testers wrote about: its number underlined (the site's
   highlighter, as an underline on paper), and a letter in their pen
   pointing to the note below. */
.print-steps > li.has-notes::before {
    text-decoration: underline;
    text-decoration-thickness: 1.5pt;
    text-underline-offset: 2pt;
}

.print-mark {
    margin-inline-start: 1pt;
    font-family: var(--latin-sans);
    font-size: 7.5pt;
    font-weight: 700;
    line-height: 0;
    vertical-align: super;
    color: var(--pen);
}

/* Testers' notes on the steps, as footnotes in their pen under a short
   pen rule, with their label. */
.print-stepnotes-block {
    margin-top: 8pt;
    color: var(--pen);
}

.print-stepnotes-block::before {
    content: "";
    display: block;
    width: 30mm;
    margin-bottom: 4pt;
    border-top: 1px solid var(--pen);
}

.print-stepnotes-head {
    font-size: 9pt;
    font-weight: 700;
}

.print-stepnotes {
    list-style: none;
}

.print-stepnotes li {
    display: flex;
    gap: 5pt;
    padding-block: 1pt;
    font-size: 9pt;
    line-height: 1.4;
}

.print-stepnotes .print-mark {
    flex: none;
    min-width: 1.1em;
    font-size: 9pt;
    line-height: inherit;
    vertical-align: baseline;
}

.print-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60mm, 1fr));
    gap: 8mm;
    margin-top: 14pt;
}

/* Handwriting on ruled lines: the author's note (Besley, ink) and the
   reader's own (the pen). The lines are a background at the text's own
   pitch (one variable sets both), printed exactly, as they are thin
   lines; no vertical padding, so they start at the top. The gradient runs
   from the sheet's own white, not from transparent: WebKit's printing
   filled a one-line note's transparent tile with black. Arabic and
   Japanese text stays unruled (section 12). */
.print-notes p,
.print-mynotes p {
    --pitch: 1.6em;
    line-height: var(--pitch);
    white-space: pre-line;
    background-image: linear-gradient(to bottom, var(--sheet) calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px));
    background-size: 100% var(--pitch);
    background-repeat: repeat-y;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-notes p {
    font-family: var(--serif);
    font-size: 11pt;
}

.print-mynotes p {
    font-size: 10.5pt;
    color: var(--pen);
}

/* No note yet: ruled lines to write on (borders, so they always print). */
.print-lines i {
    display: block;
    height: 8mm;
    border-bottom: 1px solid var(--rule);
}

.print-source {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2pt 12pt;
    margin-top: 12pt;
    padding-top: 5pt;
    border-top: 1px solid var(--rule);
    font-size: 8.5pt;
    color: var(--ink-3);
}

.print-url {
    overflow-wrap: anywhere;
}

/* 09  Compact: no title page of its own, recipes one after another in
   smaller type, no lines to write on. It saves paper. */
.print-compact .print-document {
    gap: 0;
}

.print-compact .print-cover {
    border-bottom: 0;
    padding-bottom: 6mm;
}

.print-compact .print-cover + .print-recipes {
    border-top: 0;
    padding-top: 0;
}

.print-compact .print-cover-title {
    margin-top: 8mm;
    font-size: 22pt;
}

.print-compact .print-cover-sub {
    font-size: 11pt;
}

.print-compact .print-toc {
    margin-top: 6mm;
}

.print-compact .print-toc ol {
    columns: 2;
    column-gap: 8mm;
}

.print-compact .print-toc li {
    break-inside: avoid;
}

/* In the narrower columns the category and standing go under the title. */
.print-compact .print-toc a {
    grid-template-columns: 2em minmax(0, 1fr);
    row-gap: 0;
}

.print-compact .print-toc-meta {
    grid-column: 2;
    white-space: normal;
}

.print-compact .print-recipes {
    font-size: 9.5pt;
}

/* Recipes follow each other on one sheet, each opening under a 1px ink
   rule (its title keeps the red line). */
.print-compact .print-recipe + .print-recipe,
.print-compact .print-cover + .print-recipes .print-recipe:first-child {
    margin-top: 8mm;
    padding-top: 5mm;
    border-top: 1px solid var(--ink);
}

.print-compact .print-title {
    font-size: 17pt;
}

.print-compact .print-description {
    font-size: 10pt;
}

.print-compact .print-intro.has-photo {
    grid-template-columns: minmax(0, 1fr) 34mm;
}

.print-compact .print-columns {
    grid-template-columns: 52mm minmax(0, 1fr);
    gap: 6mm;
}

.print-compact .print-steps > li {
    font-size: 10pt;
}

.print-compact .print-blank {
    display: none;
}

.print-compact .print-extras:not(:has(> :not(.print-blank))) {
    display: none;
}

/* A single recipe picked from the cookbook: the title block and the recipe
   share the first page (one sheet on screen too). */
.print-one .print-document {
    gap: 0;
}

.print-one .print-cover {
    padding-bottom: 6mm;
    border-bottom: 0;
}

.print-one .print-recipes .print-recipe {
    padding-top: 0;
    border-top: 0;
}

.print-one .print-intro {
    padding-top: 5mm;
    border-top: 1px solid var(--ink);
}

.print-one .print-cover-title {
    margin-top: 8mm;
    font-size: 22pt;
}

/* 10  Small screens (the preview only) ------------------------------------------------ */
@media screen and (max-width: 720px) {
    .print-toolbar {
        gap: 0 16px;
        padding-inline: 12px;
    }

    /* The back link shares the first row with Print, cutting its name
       short rather than pushing Print onto a row of its own. */
    .print-back {
        flex: 1 1 0;
    }

    .print-options {
        order: 3;
        flex-basis: 100%;
        gap: 0 16px;
    }

    .print-seg {
        gap: 12px;
        padding-inline-start: 16px;
    }

    .print-document {
        padding: 12px 8px 48px;
        gap: 12px;
    }

    .print-sheet,
    .print-pages .print-recipe,
    .print-single .print-recipe,
    .print-compact .print-recipes {
        padding: 22px 18px;
    }

    .print-cover-title {
        margin-top: 12mm;
        font-size: 26pt;
    }

    .print-title {
        font-size: 20pt;
    }

    .print-intro.has-photo,
    .print-compact .print-intro.has-photo,
    .print-columns,
    .print-compact .print-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The fields go two to a line. */
    .print-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6pt 8mm;
    }

    .print-facts dd {
        min-width: 0;
    }

    .print-compact .print-toc ol {
        columns: 1;
    }

    /* Contents: the category and standing go under the title. */
    .print-toc a {
        grid-template-columns: 2em minmax(0, 1fr);
        row-gap: 0;
    }

    .print-toc-meta {
        grid-column: 2;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Forced colours: the option boxes take their system tick back, and the
   category tab is outlined. */
@media (forced-colors: active) {
    .print-toggle-box {
        border-color: ButtonText;
    }

    .print-toggle.is-on .print-toggle-box {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }

    .print-toggle.is-on .print-toggle-box .icon {
        display: block;
    }

    .cat::before {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
        background: Canvas;
    }
}

/* 11  Print ---------------------------------------------------------------------------- */
@media print {
    /* Paper: the desk and the toolbar turn white. The ruled blue is a
       shade deeper on paper, where a pale line fades. */
    :root {
        --desk: #FFFFFF;
        --bar: #FFFFFF;
        --rule: #ADC6DD;
    }

    @page {
        margin: 12mm 14mm 14mm;

        @bottom-center {
            content: counter(page);
            color: var(--ink-3);
            font-family: var(--latin-sans);
            font-size: 8pt;
        }
    }

    @page :first {
        @bottom-center {
            content: none;
        }
    }

    html,
    body.print-body {
        background: var(--sheet);
    }

    .print-toolbar,
    .print-notice {
        display: none !important;
    }

    .print-document,
    .print-recipes {
        display: block;
        padding: 0;
    }

    .print-sheet,
    .print-pages .print-recipe,
    .print-single .print-recipe,
    .print-compact .print-recipes {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* One per page: the title page (with the contents) and then each
       recipe start a fresh page. */
    .print-pages:not(.print-one) .print-cover {
        break-after: page;
    }

    .print-pages .print-recipe + .print-recipe {
        break-before: page;
    }

    .print-one .print-cover,
    .print-compact .print-cover {
        margin-bottom: 6mm;
    }

    a {
        text-decoration: none;
    }

    /* A tighter rhythm on paper, so most recipes fit one A4 or Letter
       page. */
    .print-title {
        font-size: 22pt;
    }

    .print-intro.has-photo {
        grid-template-columns: minmax(0, 1fr) 50mm;
    }

    .print-ingredients li {
        padding-block: 2pt;
        line-height: 1.3;
    }

    .print-ingredients li::before {
        top: 4pt;
    }

    .print-steps > li {
        padding-block: 2pt;
        line-height: 1.4;
    }

    .print-steps > li::before {
        top: 1.5pt;
    }

    .print-lines i {
        height: 7mm;
    }

    .print-lines i:nth-child(n + 4) {
        display: none;
    }

    h2, h3,
    .print-recipe-head,
    .print-record,
    .print-ingredient-group,
    .print-toc h2 {
        break-after: avoid;
    }

    .print-intro,
    .print-facts,
    .print-ingredients li,
    .print-steps > li,
    .print-stepnotes li,
    .print-toc li,
    .print-extras > section {
        break-inside: avoid;
    }

    .print-source {
        break-before: avoid;
    }
}

/* 12  Languages and scripts ------------------------------------------------------------ */
/* Icons that mean back or next point the other way in right-to-left pages. */
[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

/* Script fonts first (their latin letters set any latin words in the same
   text), the latin stacks as a fallback. */
:lang(ar) {
    --serif: "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", "Traditional Arabic", var(--latin-serif);
    --sans: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, var(--latin-sans);
}

:lang(ja) {
    --serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", var(--latin-serif);
    --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", "Noto Sans CJK JP", var(--latin-sans);
    line-break: strict;
    word-break: normal;
}

/* Latin text inside an Arabic or Japanese page (an English recipe) keeps
   the latin faces. */
:is(:lang(ar), :lang(ja)) :is(:lang(en), :lang(fr), :lang(es), :lang(de)) {
    --serif: var(--latin-serif);
    --sans: var(--latin-sans);
}

body.print-body:lang(ar) {
    line-height: 1.75;
}

body.print-body:lang(ja) {
    line-height: 1.7;
}

/* Neither script is slanted, tracked or set in capitals (letter-spacing
   breaks the joins between Arabic letters): a guard, as nothing here does
   any of it. */
:is(:lang(ar), :lang(ja)) {
    letter-spacing: normal;
    font-style: normal;
    text-transform: none;
}

:is(h1, h2, h3, .print-cover-title, .print-title):is(:lang(ar), :lang(ja)) {
    line-height: 1.35;
}

:is(.print-record, .print-facts, .print-ingredients li, .print-method li, .print-stepnotes li):is(:lang(ar), :lang(ja)) {
    line-height: 1.7;
}

/* Ruled notes stay unruled in both scripts: their looser leading doesn't
   match the pitch, and Arabic marks would cross the lines. */
:is(.print-notes p, .print-mynotes p):is(:lang(ar), :lang(ja)) {
    line-height: 1.8;
    background-image: none;
}

/* 13  On screen: nothing under 14px, whole-pixel lines ------------------------------
   The sheets keep their paper sizes in points for print; on screen the
   small print (footnotes and their marks, the record line, the fields,
   the source, compact's text; all 7.5 to 10pt on paper) is set at the
   site's smallest size, 14px. The single sheet's word mark keeps its
   lockup: "Cliff Notes" stays well above the 14px "The Cooking".

   The ruled notes' pitch is a whole pixel on screen (24px for the
   author's 11pt Besley, 23px for the reader's 10.5pt pen, both about
   1.6em): at 1.6em the lines fell between pixels and blurred to a pale
   grey beside the crisp bordered blank lines. Paper keeps 1.6em. */
@media screen {
    .print-logo-the,
    .print-toc-meta,
    .print-single-meta,
    .print-no,
    .print-record,
    .print-facts,
    .print-facts dt,
    .print-stepnotes-head,
    .print-stepnotes li,
    .print-stepnotes .print-mark,
    .print-source,
    .print-compact .print-recipes,
    .print-compact .print-description,
    .print-compact .print-steps > li,
    .print-mark {
        font-size: 14px;
    }

    .print-single-brand .print-logo-name {
        font-size: 20px;
    }

    .print-notes p {
        --pitch: 24px;
    }

    .print-mynotes p {
        --pitch: 23px;
    }
}