html {
    max-width: 90ch;
    /* larger spacing on larger screens, very small spacing on tiny screens */
    padding: calc(1vmin + .5rem);
    /* shorthand for margin-left/margin-right */
    margin-inline: auto;
    /* fluid sizing: https://frontaid.io/blog/fluid-typography-2d-css-locks-clamp/ */
    font-size: clamp(1em, 0.909em + 0.45vmin, 1.25em);
    /* use system font stack: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
    font-family: system-ui
}

body :not(:is(h1,h2,h3,h4,h5,h6)) {
    line-height: 1.75;
}

/* Recipe-specific */

.recipe {
    padding-top: 1em;
    border-bottom: .1em solid black;
}

.recipe-name {
    display: inline;
    text-align: justify;
}

.recipe-time {
    display: inline;
    font-size: 0.9em;
}

.recipe-time::before {
    display: inline;
    font-size: 1em;
    content: '{';
}

.recipe-servings {
    display: inline;
    font-size: 0.9em;
}

.recipe-servings::before {
    display: inline;
    font-size: 1em;
    content: ' / ';
}

.recipe-servings::after {
    display: inline;
    font-size: 1em;
    content: '}';
}

.recipe-source {
    /* display: inline; */
}

.recipe-source::before {
    /* display: inline; */
    content: 'From '
}

.recipe-steps {
    display: table;
    width: 100%;
}

.step {
    display: table-row;
}

.step-number {
    display: table-cell;
    width: 3%;
    padding: 0.5ch;
    font-weight: bold;
}

.ingredients {
    display: table-cell;
    width: 37%;
    padding: 0.5ch;
    font-size: 0.9em;
}

.instructions {
    display: table-cell;
    width: 60%;
    padding: 0.5ch;
}

.ingredient-list {
    display: table;
    width: 100%;
}

.ingredient {
    display: table-row;
}

.ingredient-amount {
    display: table-cell;
    width: 10%;
    align: "right";
    padding: 0.25ch;
}

.ingredient-unit {
    display: table-cell;
    width: 20%;
    align: "left";
    padding: 0.25ch;
}

.ingredient-description {
    display: table-cell;
    width: 70%;
    align: "left";
    padding: 0.25ch;
    /* Hanging indent */
    padding-left: 2ch;
    text-indent: -2ch;
}

.ingredient-name {
    display: inline;
}

.ingredient-preparation {
    display: inline;
    font-style: italic;
    color: #333;
}

/* .ingredient-preparation::before { */
/*     display: inline; */
/*     content: ', '; */
/* } */