/**
 * ldhoras.com styles
 *
 * Inspired by https://edwardtufte.github.io/tufte-css/
 * and the Vaadin Lumo  UI theme
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    /* Color scheme */

    color-scheme: light;

    /* Vaadin colors */

    --gray-900: #0d1219;

    /* Lumo colors */

    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    --lumo-font-size-s: .875rem;
    --lumo-font-size-m: 1rem;
    --lumo-font-size-xl: 1.375rem;

    --lumo-size-m: 2.25rem;
    --lumo-size-l: 2.75rem;
    --lumo-size-xl: 3.5rem;
    --lumo-space-s: 0.5rem;
    --lumo-border-radius-m: 0.25em;
    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
    --lumo-icon-size: 1.5rem;

    --lumo-base-color: #fff;

    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);

    --lumo-contrast-5pct: hsla(214, 61%, 25%, 0.05);
    --lumo-contrast-30pct: hsla(214, 69%, 84%, 0.32);
    --lumo-contrast-10pct: hsla(214, 57%, 24%, 0.1);
    --lumo-contrast-60pct: hsla(214, 43%, 19%, 0.6);
    --lumo-contrast-70pct: hsla(214, 42%, 18%, 0.69);
    --lumo-contrast-90pct: hsla(214, 40%, 16%, 0.94);
    --lumo-contrast: hsl(214, 35%, 15%);

    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);

    --lumo-primary-color: hsl(214, 100%, 48%);
    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
    --lumo-primary-text-color: hsl(214, 100%, 43%);
    --lumo-primary-contrast-color: #fff;

    --lumo-error-text-color: hsl(3, 89%, 42%);

    --navbar-height: var(--lumo-size-xl);

    --drawer-width: 14rem;

    /* Document fonts */

    --doc-font-family: "et-book", "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

    /* Document layout */

    --doc-font-size-xxl: 3.2rem;
    --doc-font-size-xl: 2.2rem;
    --doc-font-size-l: 1.7rem;
    --doc-font-size-m: 1.4rem;
    --doc-font-size-s: 1.1rem;
    --doc-font-size-xs: 1rem;

    --doc-line-height-xxl: 1.1em;
    --doc-line-height-l: 1.4em;
    --doc-line-height-m: 1.3em;

    --doc-space-xxl: 4rem;
    --doc-space-l: 2.1rem;
    --doc-space-m: 1.4rem;

    /* Document colors */

    --doc-background-color: var(--lumo-base-color);
    --doc-header-text-color: var(--lumo-contrast);
    --doc-body-text-color: var(--lumo-body-text-color);
    --doc-primary-text-color: var(--lumo-primary-text-color);
    --doc-secondary-text-color: var(--lumo-secondary-text-color);
    --doc-strong-color: var(--lumo-error-text-color);
    --doc-divider-color: var(--lumo-contrast-70pct);
}

[theme~=dark] {
    color-scheme: dark;

    --lumo-base-color: hsl(214, 35%, 21%);

    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);

    --lumo-contrast-5pct: hsla(214, 65%, 85%, 0.06);
    --lumo-contrast-10pct: hsla(214, 60%, 80%, 0.14);
    --lumo-contrast-60pct: hsla(214, 82%, 90%, 0.58);
    --lumo-contrast-70pct: hsla(214, 87%, 92%, 0.69);
    --lumo-contrast-90pct: hsla(214, 96%, 96%, 0.9);
    --lumo-contrast: hsl(214, 100%, 98%);

    --lumo-primary-color: hsl(214, 90%, 48%);
    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
    --lumo-primary-text-color: hsl(214, 90%, 77%);

    --lumo-error-text-color: hsl(3, 100%, 80%);

    --doc-background-color: var(--gray-900);
}

/* ==========================================================================
   Base
   ========================================================================== */

/* Keyboard focus ring (TAB navigation); the outline follows each element's
   border-radius */
:focus-visible {
    outline: 2px solid var(--lumo-primary-color-50pct);
}

/* Skip link: first focusable element of every page; off-screen until it
   receives keyboard focus, then shown over the navbar */
.skip-link {
    position: fixed;
    top: -100%;
    left: var(--lumo-space-s);
    z-index: 200;
    padding: var(--lumo-space-s);
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-m);
    font-family: var(--lumo-font-family);
    color: var(--lumo-body-text-color);
}

.skip-link:focus {
    top: var(--lumo-space-s);
}

/* ==========================================================================
   Navigation shell
   ========================================================================== */

/* Loader */

@keyframes loader-anim {
    from {
        width: 0%;
    }

    to {
        width: 95%;
    }
}

#loader[style*="none"] {
    display: block !important;
    width: 100% !important;
    opacity: 0;
    animation: none !important;
    transition: opacity 500ms 300ms, width 300ms;
}

#loader {
    position: fixed !important;
    top: 0;
    right: auto;
    left: 0;
    z-index: 100;
    width: 50%;
    height: 4px;
    background-color: hsl(214, 90%, 52%);
    opacity: 1;
    pointer-events: none;
    transition: none;
    animation: loader-anim 10s cubic-bezier(0.25, 0, 0, 1) 300ms both;
}

/* Icons */

.lumo-icon {
    display: inline-block;
    width: var(--lumo-icon-size);
    height: var(--lumo-icon-size);
    vertical-align: middle;
}

/* Buttons  */

.lumo-button,
.doc-button {
    padding: 0;
    border: 0;
    border-radius: var(--lumo-border-radius-m);
    background: transparent;
    cursor: pointer;
    transition: opacity 1.4s, transform 0.1s;
}

.lumo-button {
    width: var(--lumo-size-l);
    height: var(--lumo-size-l);
    margin: 0 var(--lumo-space-s);
    color: var(--lumo-secondary-text-color);
}

.doc-button {
    width: var(--lumo-size-m);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--doc-line-height-l);
    margin: 0;
    font: inherit;
    background-color: var(--lumo-contrast-5pct);
    color: var(--doc-primary-text-color);
}

/* Hover washes only where a real pointer hovers: iOS emulates :hover on
   tap and leaves it stuck until the next tap elsewhere */
@media (hover: hover) {
    .lumo-button:hover {
        background-color: var(--lumo-contrast-5pct);
    }

    .doc-button:hover {
        background-color: var(--lumo-contrast-10pct);
    }

    /* A .doc-button rendered by an <a> never underlines (the hover wash
       is the feedback), overriding the document link hover */
    a.doc-button:hover {
        text-decoration: none;
    }
}

/* Navbar */

#navbar {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    box-sizing: border-box;
    align-items: center;
    min-height: calc(var(--lumo-size-xl) + env(safe-area-inset-top));
    font-family: var(--lumo-font-family);
    background-color: var(--lumo-base-color);
    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
}

/* The container takes the flex stretch and centering so the link
   itself is only as wide as its text. */
#navbar-title-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

#navbar-title {
    font-size: var(--lumo-font-size-xl);
    font-weight: 500;
    color: var(--doc-header-text-color);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

/* Drawer -- Vaadin AppLayout-style: on desktop a persistent panel below
   the navbar, visible by default, that <main> sits next to; on mobile
   (the media query at the bottom) an off-canvas overlay with a backdrop,
   hidden by default. The .open/.closed classes set by the navbar
   hamburger override each breakpoint's default. */

#drawer {
    position: fixed;
    top: calc(var(--navbar-height) + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    z-index: 2;
    border-right: 1px solid var(--lumo-contrast-10pct);
    box-sizing: border-box;
    width: var(--drawer-width);
    padding: var(--lumo-space-s);
    overflow-y: auto;
    background-color: var(--lumo-base-color);
    background-clip: padding-box;
    font-family: var(--lumo-font-family);
    transition: transform 0.2s ease;
}

#drawer.closed {
    transform: translateX(-100%);
}

/* Only the mobile overlay drawer darkens the page (see the mobile media
   query); the desktop panel never covers the content */
#drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    background-color: var(--lumo-shade-20pct);
}

#drawer hr {
    display: block;
    align-self: stretch;
    height: 1px;
    border: 0;
    padding: 0;
    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
    background-color: var(--lumo-contrast-10pct);
}

.drawer-label {
    display: block;
    margin: var(--lumo-space-s);
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.drawer-combobox {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--lumo-space-s));
    height: 2.25rem;
    margin: 0 var(--lumo-space-s);
    padding: 0 calc(var(--lumo-space-s) + var(--lumo-icon-size)) 0 var(--lumo-space-s);
    border: 0;
    border-radius: var(--lumo-border-radius-m);
    appearance: none;
    background-color: var(--lumo-contrast-10pct);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='hsla(214, 42%25, 18%25, 0.69)' d='M7.600863 9.432861c-.370057-.331847-.939063-.300873-1.27091.069184-.331848.370057-.300873.939063.069184 1.270911l4.942621 4.535534c.341906.306603.85982.306603 1.201726 0l5.05738-4.638443c.370056-.331847.401031-.900853.069183-1.27091-.331847-.370057-.900853-.401032-1.27091-.069184l-4.456516 4.09962L7.600863 9.43286z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.5 * var(--lumo-space-s)) center;
    background-size: var(--lumo-icon-size);
    /* A <select> never inherits color and iOS Safari's own is the blue
       tint, ignoring color-scheme -- state the drawer's text color
       explicitly */
    color: var(--lumo-body-text-color);
    font-family: inherit;
    font-size: var(--lumo-font-size-m);
    font-weight: 500;
}

/* The dropdown arrow is a data URI, which cannot reference CSS variables,
   so the dark-theme fill (--lumo-secondary-text-color) is baked in here */
[theme~=dark] .drawer-combobox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='hsla(214, 87%25, 92%25, 0.69)' d='M7.600863 9.432861c-.370057-.331847-.939063-.300873-1.27091.069184-.331848.370057-.300873.939063.069184 1.270911l4.942621 4.535534c.341906.306603.85982.306603 1.201726 0l5.05738-4.638443c.370056-.331847.401031-.900853.069183-1.27091-.331847-.370057-.900853-.401032-1.27091-.069184l-4.456516 4.09962L7.600863 9.43286z'/%3E%3C/svg%3E");
}

/* The picker popup itself is not stylable, but Chrome and Firefox honor
   background-color/color on the <option>s; without this the options
   inherit the dark theme's light text over the popup's default light
   background and become unreadable */
.drawer-combobox option {
    background-color: var(--lumo-base-color);
    color: var(--lumo-body-text-color);
}

/* Customizable <select> (Chrome 134+). Opting both the control and its
   ::picker into base-select makes the popup an ordinary stylable box,
   replacing the UA frame with the drawer's own look. Browsers without
   support drop the whole opt-in rule (unknown ::picker invalidates the
   selector list) and keep the native popup above. */
.drawer-combobox,
.drawer-combobox::picker(select) {
    appearance: base-select;
}

/* With base appearance the selected option renders as a box of its own
   inside the control, so the control's fixed height no longer
   auto-centers it; a flex row centers whatever box Chrome puts in
   there. Scoped so native selects keep their own centering. */
@supports (appearance: base-select) {
    .drawer-combobox {
        display: flex;
        align-items: center;
    }
}

/* overflow keeps the options' own square backgrounds from painting
   over the rounded corners */
.drawer-combobox::picker(select) {
    margin-top: 2px;
    border: 0;
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-m);
    overflow: auto;
}

/* base-select draws its own chevron; the control already has one as a
   background-image */
.drawer-combobox::picker-icon {
    display: none;
}

.drawer-combobox option {
    padding: var(--lumo-space-s);
}

.drawer-combobox option:focus-visible {
    background-color: var(--lumo-primary-color-10pct);
}

@media (hover: hover) {
    .drawer-combobox option:hover {
        background-color: var(--lumo-primary-color-10pct);
    }
}

/* The current region reads as emphasis instead of the base-select
   checkmark */
.drawer-combobox option:checked {
    font-weight: 600;
}

.drawer-combobox option::checkmark {
    display: none;
}

.drawer-navitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--lumo-space-s);
    font-size: var(--lumo-font-size-m);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--lumo-border-radius-m);
}

.drawer-navitem svg {
    flex: none;
    color: var(--lumo-contrast-60pct);
}

.drawer-navitem span {
    color: var(--lumo-body-text-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .drawer-navitem:hover span {
        color: var(--lumo-header-text-color);
    }
}

.drawer-navitem[aria-current="page"] {
    background-color: var(--lumo-primary-color-10pct);
}

.drawer-navitem[aria-current="page"] svg,
.drawer-navitem[aria-current="page"] span {
    color: var(--lumo-primary-text-color);
}

@media (hover: hover) {
    .drawer-navitem[aria-current="page"]:hover svg,
    .drawer-navitem[aria-current="page"]:hover span {
        color: var(--lumo-header-text-color);
    }
}

/* Share button */

@keyframes share-button-anim {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

#share-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--lumo-size-l);
    height: var(--lumo-size-l);
    border: 0;
    border-radius: 50%;
    color: var(--lumo-primary-contrast-color);
    background-color: var(--lumo-primary-color);
    box-shadow: var(--lumo-box-shadow-m);
    cursor: pointer;
    transform: scale(0);
    animation: share-button-anim 0.25s ease 5s 1 forwards;
}

/* ==========================================================================
   Document layout
   ========================================================================== */

body {
    margin: 0;
    scroll-behavior: smooth;
    background-color: var(--doc-background-color);
}

body::selection {
    color: var(--doc-background-color);
    background-color: var(--lumo-primary-text-color);
}

/* On desktop the content sits next to the open drawer; the margin
   animates together with the drawer's transform */
main {
    display: block;
    margin-left: var(--drawer-width);
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top));
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    transition: margin-left 0.2s ease;
}

#drawer.closed~main {
    margin-left: 0;
}

article {
    max-width: 64rem;
    margin: 0 auto;
    font-family: var(--doc-font-family);
    font-weight: normal;
    color: var(--doc-body-text-color);
}

article .container {
    margin: var(--doc-font-size-xxl) calc(7.5% - 1.5rem);
}

article .content {
    width: 65%;
}

section {
    padding-top: 0;
    padding-bottom: 0.5rem;
    counter-reset: sidenote-counter;
}

/* ==========================================================================
   Document content
   ========================================================================== */

/* Headers */

section h1 {
    margin-top: var(--doc-space-m);
    margin-bottom: var(--doc-space-m);
    font-size: var(--doc-font-size-xxl);
    font-weight: normal;
    line-height: var(--doc-line-height-xxl);
    color: var(--doc-header-text-color);
}

section .h1sub,
section .toc {
    font-size: var(--doc-font-size-l);
    line-height: var(--doc-line-height-m);
    color: var(--doc-header-text-color);
}

section h2 {
    margin-top: var(--doc-space-l);
    margin-bottom: var(--doc-space-m);
    border-bottom: 1px solid var(--doc-divider-color);
    font-size: var(--doc-font-size-xl);
    font-weight: normal;
    line-height: var(--doc-line-height-m);
    color: var(--doc-header-text-color);
}

section h3,
section h4,
section h5 {
    margin-top: var(--doc-space-m);
    margin-bottom: var(--doc-space-m);
    font-size: var(--doc-font-size-l);
    line-height: var(--doc-line-height-m);
    color: var(--doc-strong-color);
}

section h3 {
    font-weight: bold;
}

section h4 {
    font-weight: normal;
}

section h5 {
    font-size: var(--doc-font-size-m);
    font-variant: small-caps;
}

section p.subtitle {
    margin-top: var(--doc-space-m);
    margin-bottom: var(--doc-space-m);
    font-size: var(--doc-font-size-m);
    font-variant: small-caps;
    line-height: var(--doc-line-height-m);
    color: var(--doc-strong-color);
}

/* Text */

section p,
section ol,
section ul {
    margin-top: var(--doc-space-m);
    margin-bottom: var(--doc-space-m);
    font-size: var(--doc-font-size-m);
    line-height: var(--doc-line-height-l);
    color: var(--doc-body-text-color);
}

section p.breadcrumbs,
section p.note {
    font-size: var(--doc-font-size-s);
    line-height: var(--doc-line-height-m);
    color: var(--doc-secondary-text-color);
}

/* The portada's welcome line, set off from the day header above it with the
   same gap an h2 gets */
section p#welcome {
    margin-top: var(--doc-space-l);
}

section strong.red {
    font-weight: normal;
    color: var(--doc-strong-color);
}

section span.indent {
    padding-right: calc(var(--doc-font-size-m));
}

section span.ant {
    padding-right: calc(0.6 * var(--doc-font-size-m));
}

section a, .doc-footer a {
    color: var(--doc-primary-text-color);
    text-decoration: none;
}

@media (hover: hover) {
    section a:hover, .doc-footer a:hover {
        text-decoration: underline;
    }
}

section a[id],
section h2[id] {
    scroll-margin-top: calc(var(--navbar-height) + env(safe-area-inset-top));
}

/* Sidenotes */

section .side {
    display: inline;
    white-space: nowrap;
    hyphens: none;
}

section .side>label {
    counter-increment: sidenote-counter;
}

section .side>label:before {
    content: counter(sidenote-counter);
    padding-left: 0.1em;
    vertical-align: super;
    font-size: var(--doc-font-size-xs);
    font-style: normal;
    font-variant: normal;
    line-height: 0;
}

section .side>input {
    display: none;
}

section .side>span {
    float: right;
    clear: right;
    /* 30% of 65% */
    width: 46.15%;
    /* 35% of 65% */
    margin: 0.3rem -53.84% 0.7rem 0;
    white-space: normal;
    font-size: var(--doc-font-size-s);
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: var(--doc-line-height-m);
    color: var(--doc-secondary-text-color);
}

section .side>span:before {
    content: counter(sidenote-counter) " ";
    vertical-align: super;
    font-size: var(--doc-font-size-xs);
    line-height: 0;
}

/* Lists */

section ol {
    padding-left: calc(2.1 * var(--doc-font-size-m));
}

section p.alphalist {
    margin-left: calc(1.4 * var(--doc-font-size-m));
}

section p.alphalist>span.margin {
    display: inline-block;
    width: calc(1.15 * var(--doc-font-size-m));
    margin-left: calc(-1.4 * var(--doc-font-size-m));
    padding-right: calc(0.25 * var(--doc-font-size-m));
    text-align: right;
}

/* Versicles */

section blockquote {
    margin: 0 0 0 calc(1.5 * var(--doc-font-size-m));
}

section blockquote>p>span.bqind {
    display: inline-block;
    width: calc(1.5 * var(--doc-font-size-m));
    margin-left: calc(-1.49 * var(--doc-font-size-m));
}

/* Options */

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

section .option-label {
    color: var(--doc-primary-text-color);
    cursor: pointer;
}

@media (hover: hover) {
    section .option-label:hover {
        text-decoration: underline;
    }
}

section .option-toggle {
    display: none;
}

section .option-toggle:checked+.option {
    display: block;
    animation: fadeIn 0.6s;
    animation-fill-mode: forwards;
}

section .option-toggle+.option {
    display: none;
}

/* Sticky section headings */

/* A .ld-mes month block (year calendar: one heading + one list) or a
   .ld-lectura reading block (catena chapters: heading, Scripture quote,
   commentary) bounds its first heading's sticky positioning: the heading
   stays pinned below the navbar while its section scrolls, and the next
   section's heading pushes it out at the wrapper's edge. Only the first
   heading pins, so a catena reading's untitled continuation headings
   stay ordinary section breaks. The heading's top spacing is padding,
   not margin, so the pinned box is opaque from the navbar edge down to
   its divider and the sticky offset is margin-free. */
section .ld-mes h2,
section .ld-lectura h2:first-of-type {
    position: sticky;
    top: calc(var(--navbar-height) + env(safe-area-inset-top));
    margin-top: 0;
    padding-top: var(--doc-space-l);
    background-color: var(--doc-background-color);
}

/* Padding doesn't collapse with the preceding block's bottom margin the
   way the heading's top margin did: take that margin back so the gap
   before each reading stays what it was. */
section .ld-lectura {
    margin-top: calc(-1 * var(--doc-space-m));
}

/* Liturgical calendar */

/* Date nav (the calendar's year nav, the day pages' and the portada's day
   nav): the current year or the day's date (a regular document link)
   flanked by icon-only previous/next links styled as .doc-button */
section .ld-datenav {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
}

/* Month block (.ld-mes, one heading + one list; the sticky section
   heading above): --doc-calendar-month-height is the pinned heading's
   box -- its top padding, one line of --doc-font-size-xl text at the
   1.3em --doc-line-height-m, and the 1px divider -- reserved below the
   navbar by the day rows' scroll-margin, so a date link into the
   calendar (#mm-dd) never lands its row hidden under the pinned
   heading. The inter-month gap lives entirely in the heading's padding
   (the list below carries no bottom margin). */
section .ld-mes {
    --doc-calendar-month-height: calc(var(--doc-space-l) + 1.3 * var(--doc-font-size-xl) + 1px);
}

section .ld-mes ul.calendario {
    margin-bottom: 0;
}

/* The year nav's bottom margin used to collapse into the first month
   heading's top margin; padding doesn't collapse, so take it back here
   to keep the first month's gap equal to the others'. */
section .ld-datenav+.ld-mes {
    margin-top: calc(-1 * var(--doc-space-m));
}

section .ld-mes li[id] {
    scroll-margin-top: calc(var(--navbar-height) + env(safe-area-inset-top) + var(--doc-calendar-month-height));
}

section ul.calendario {
    --doc-calendar-row-height: calc(2 * 1.6 * var(--doc-font-size-m));
    --doc-calendar-gap: 1rem;
    margin: 0 0 var(--doc-space-l);
    padding: 0;
    list-style: none;
    font-size: var(--doc-font-size-m);
    line-height: var(--doc-line-height-l);
    color: var(--doc-body-text-color);
}

section ul.calendario li {
    transition: background-color 0.12s ease;
}

section ul.calendario li:nth-child(even) {
    background-color: var(--lumo-contrast-5pct);
}

@media (hover: hover) {
    section ul.calendario li:hover {
        background-color: var(--lumo-primary-color-10pct);
    }
}

section ul.calendario a {
    display: flex;
    align-items: center;
    gap: var(--doc-calendar-gap);
    box-sizing: border-box;
    min-height: var(--doc-calendar-row-height);
    padding: 0.25rem var(--doc-calendar-gap);
    color: inherit;
}

@media (hover: hover) {
    section ul.calendario a:hover {
        text-decoration: none;
    }
}

/* Day number, right-aligned in a fixed-width slot so the celebration
   texts line up across rows. (The numbers render as et-book's old-style
   figures; the font's lnum glyphs are duplicates of them, so lining
   figures aren't available.) */
section ul.calendario .ld-dia {
    flex: none;
    width: 2ch;
    white-space: nowrap;
    text-align: right;
}

section ul.calendario .ld-cell {
    flex: 1;
    min-width: 0;
}

/* Trailing chevron (an .lumo-icon) */
section ul.calendario .ld-chevron {
    flex: none;
    display: flex;
    color: var(--doc-primary-text-color);
}

/* Rank labels stay in the markup (reversible) but are hidden */
section ul.calendario small.ld-redundant,
section ul.calendario small.ld-rank {
    display: none;
}

/* Secondary celebration: a faint note under the main one, with the same
   metric as section p.note */
section ul.calendario .note {
    display: block;
    font-size: var(--doc-font-size-s);
    line-height: var(--doc-line-height-m);
    color: var(--doc-secondary-text-color);
}

/* Footer */

.doc-footer {
    margin-top: var(--doc-space-xxl);
    font-size: var(--doc-font-size-s);
    color: var(--doc-secondary-text-color);
    text-align: center;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

/* Mobile */

@media (max-width: 42rem) {
    /* The drawer becomes an off-canvas overlay: hidden by default,
       slid in over the full screen height with a shadow and a
       backdrop, the content underneath keeping its full width */
    #drawer {
        top: 0;
        z-index: 5;
        max-width: 80%;
        border-right: 0;
        box-shadow: var(--lumo-box-shadow-s);
        transform: translateX(-100%);
    }

    #drawer.open {
        transform: translateX(0);
    }

    #drawer-backdrop {
        display: block;
    }

    #drawer-backdrop[hidden] {
        display: none;
    }

    main {
        margin-left: 0;
    }

    article .container {
        margin: var(--doc-font-size-xxl) var(--doc-font-size-xs);
    }

    article .content {
        width: 100%;
    }

    section h1,
    section h2 {
        hyphens: auto;
    }

    section .side>label {
        cursor: pointer;
    }

    section .side>span {
        display: none;
    }

    section .side>input:checked+span {
        display: block;
        float: left;
        clear: left;
        width: 95%;
        margin: 1rem 0;
        padding-left: 5%;
    }
}

/* Print */

@media print {
    #navbar,
    #drawer,
    #drawer-backdrop,
    #share-button {
        display: none;
    }

    main {
        margin-left: 0;
        padding-top: 0;
    }
}