/*
 * Dominican Calendar: a printed Ordo rather than an app.
 * EB Garamond on warm paper; rubric red for headings, grades and rubrics, as in
 * liturgical books; thin gold rules; a black masthead with the shield.
 *
 * The Ordo itself is printed by the engine (ordo/) with its old class names
 * (col, lect, colrdi, explan, local, obit …); they are styled in "The Ordo" below.
 */

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --paper: #fbf8f1;
    --paper-deep: #f3ecdc;
    --ink: #1f1a17;
    --ink-soft: #5b5047;
    --rubric: #9b1c1c;
    --rubric-dark: #7a1414;
    --gold: #b39256;
    --gold-soft: #ddcca6;
    --masthead: #15120f;
    --masthead-ink: #f6f0e2;
    --local: #fbf1cf;
    --local-edge: #d8bf73;
    --focus: #1d4f91;

    --serif: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
    --measure: 46rem;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* liturgical colours (only ever beside the colour's name) */
    --lit-white: #ffffff;
    --lit-green: #2f6b3a;
    --lit-violet: #5b3a7a;
    --lit-red: #a32121;
    --lit-rose: #d68fa6;
    --lit-black: #1b1b1b;
    --lit-gold: #c9a227;

    color-scheme: light;
}

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.5;
    font-variant-numeric: oldstyle-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

a { color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--rubric-dark); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

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

.skip {
    position: absolute;
    left: -999px;
    top: 0.5rem;
    background: var(--paper);
    padding: 0.4rem 0.8rem;
    z-index: 10;
}
.skip:focus { left: 0.5rem; }

/* ------------------------------------------------------------------ masthead */

.masthead {
    background: var(--masthead);
    color: var(--masthead-ink);
    border-bottom: 3px double var(--gold);
}
.masthead__inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.85rem var(--gutter) 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: inherit;
    text-decoration: none;
}
.brand:hover { color: inherit; }
.brand__shield {
    width: 52px;
    height: 52px;
    background: var(--masthead-ink);
    border-radius: 50%;
    padding: 3px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__title {
    font-size: 1.55rem;
    font-weight: 500;
    font-variant-caps: small-caps;
    letter-spacing: 0.06em;
}
.brand__subtitle {
    font-style: italic;
    color: var(--gold-soft);
    font-size: 1.02rem;
}

/* Today's feast, printed by ordo/date.inc as <p>date<br>feast</p> */
.masthead__feast {
    color: var(--masthead-ink);
    text-decoration: none;
    text-align: right;
    font-size: 1rem;
    line-height: 1.3;
    max-width: 24rem;
    margin-left: auto;
}
.masthead__feast:hover { color: #fff; }
.masthead__feast p { margin: 0; font-style: italic; color: var(--gold-soft); }
.masthead__feast p br + * , .masthead__feast p { font-style: italic; }

.menu { max-width: 64rem; margin: 0 auto; padding: 0 var(--gutter); }
.menu__toggle { display: none; }
.menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
}
.menu__list a {
    display: inline-block;
    padding: 0.35rem 0 0.45rem;
    color: var(--masthead-ink);
    text-decoration: none;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
    font-size: 1.1rem;
    border-bottom: 2px solid transparent;
}
.menu__list a:hover { color: #fff; border-bottom-color: var(--gold); }
.menu__list a[aria-current="page"] { border-bottom-color: var(--rubric); color: #fff; }

@media (max-width: 40rem) {
    .masthead__feast { text-align: left; margin-left: 0; max-width: none; }
    .js .menu__toggle {
        display: block;
        background: none;
        border: 1px solid var(--gold);
        color: var(--masthead-ink);
        font: inherit;
        font-variant-caps: all-small-caps;
        letter-spacing: 0.09em;
        padding: 0.15rem 0.8rem;
        margin: 0 0 0.6rem;
        border-radius: 2px;
        cursor: pointer;
    }
    .js .menu__list { display: none; flex-direction: column; padding-bottom: 0.5rem; }
    .js .menu--open .menu__list { display: flex; }
}

/* ------------------------------------------------------------------ page */

.page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.75rem var(--gutter) 3rem;
}
.year-page .page, .table-page .page { max-width: 52rem; }

h1, h2, h3, h4 {
    font-weight: 500;
    line-height: 1.2;
    color: var(--rubric);
}

.page-head { text-align: center; margin-bottom: 1.5rem; }
.page-head h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    color: var(--ink);
    font-weight: 500;
}
.page-head__kicker {
    margin: 0 0 0.2rem;
    color: var(--rubric);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
    font-size: 1.15rem;
}
.page-head::after, hr.rule {
    content: "";
    display: block;
    width: 9rem;
    height: 0;
    margin: 1rem auto 0;
    border: 0;
    border-top: 1px solid var(--gold);
    box-shadow: 0 3px 0 -2px var(--gold);
}
.page-foot { text-align: center; margin-top: 2rem; font-style: italic; }

.button {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--rubric);
    background: var(--rubric);
    color: #fff;
    text-decoration: none;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.09em;
    font-size: 1.15rem;
    border-radius: 2px;
}
.button:hover { background: var(--rubric-dark); color: #fff; }
.button--quiet { background: transparent; color: var(--rubric); }
.button--quiet:hover { background: var(--paper-deep); color: var(--rubric-dark); }

/* forms: date picker, year and options */
input, select, button { font: inherit; color: inherit; }
input[type="date"], select {
    background: #fff;
    border: 1px solid var(--gold);
    border-radius: 2px;
    padding: 0.2rem 0.4rem;
    font-size: 1.05rem;
}
form button {
    background: var(--paper-deep);
    border: 1px solid var(--gold);
    border-radius: 2px;
    padding: 0.2rem 0.85rem;
    cursor: pointer;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}
form button:hover { border-color: var(--rubric); color: var(--rubric); }
.js [data-autosubmit-hide] { display: none; }

.day-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 1.05rem;
}
.day-nav__step { text-decoration: none; white-space: nowrap; }
.day-nav__step[rel="next"] { text-align: right; }
.day-nav__pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.5rem; }
.day-nav__pick label { font-style: italic; color: var(--ink-soft); }

.year-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    background: var(--paper-deep);
    border-top: 1px solid var(--gold-soft);
    border-bottom: 1px solid var(--gold-soft);
}
.year-form--compact { justify-content: center; align-items: center; }
.year-form__year { display: flex; align-items: center; gap: 0.5rem; }
.year-form__year label { font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--rubric); }
.year-form__options { border: 0; margin: 0; padding: 0; flex: 1 1 18rem; display: grid; gap: 0.15rem; font-size: 1.05rem; }
.year-form__options legend { font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--rubric); padding: 0; margin-bottom: 0.2rem; }
.year-form__options small { color: var(--ink-soft); font-size: 0.9em; }
.year-form__options input { accent-color: var(--rubric); margin-right: 0.35rem; }
.year-form > button { align-self: flex-end; }

.jump { text-align: center; margin: 0 0 2rem; font-size: 1.05rem; }
.jump p { margin: 0.25rem 0; }
.jump a {
    display: inline-block;
    margin: 0 0.35rem;
    text-decoration: none;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}
.jump a:hover { text-decoration: underline; }
.jump__seasons a { font-variant-caps: normal; letter-spacing: 0; font-style: italic; }

/* ------------------------------------------------------------------ cover */

.title-page {
    text-align: center;
    padding: 1.5rem 0 1rem;
}
.title-page__kicker {
    margin: 0;
    color: var(--rubric);
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 500;
    font-variant-caps: small-caps;
    letter-spacing: 0.08em;
    line-height: 1.25;
}
.title-page__kicker span { font-variant-caps: normal; font-style: italic; letter-spacing: 0; font-size: 0.75em; color: var(--ink-soft); }
.title-page__year {
    margin: 0.5rem 0 0.75rem;
    font-size: clamp(3.2rem, 12vw, 5rem);
    line-height: 1;
    font-variant-numeric: lining-nums;
    letter-spacing: 0.04em;
}
.title-page__crest { display: block; margin: 0 auto 0.75rem; }
.title-page__cycles {
    margin: 0;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.12em;
    font-size: 1.35rem;
    line-height: 1.35;
}
.title-page__for { margin: 1.5rem 0 1rem; line-height: 1.55; }
.title-page__note { font-size: 1rem; color: var(--ink-soft); max-width: 34rem; margin: 0 auto; }
.title-page__motto {
    margin: 1.75rem 0;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--rubric);
    letter-spacing: 0.03em;
}
.title-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ------------------------------------------------------------------ prose (Introduction, errors) */

.prose h2 {
    font-size: 1.35rem;
    font-variant-caps: small-caps;
    letter-spacing: 0.05em;
    margin: 2rem 0 0.5rem;
}
.prose p, .prose li, .prose dd { hyphens: auto; }
.prose ul { padding-left: 1.4rem; }
.prose li { margin: 0.2rem 0; }
.quote {
    margin: 0 0 2rem;
    padding: 1.1rem 1.4rem;
    background: var(--paper-deep);
    border-left: 3px solid var(--gold);
    font-style: italic;
}
.quote p { margin: 0 0 0.75rem; }
.quote footer { font-style: normal; font-size: 1rem; color: var(--ink-soft); }
.quote cite { font-style: italic; }
.typography, .abbreviations { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
.typography dt, .abbreviations dt { font-weight: 600; }
.typography dd, .abbreviations dd { margin: 0; }
.sample { display: block; padding: 0.3rem 0.6rem; }
.citation { text-align: right; font-style: italic; color: var(--ink-soft); }
.error-detail { white-space: pre-wrap; font-size: 0.8rem; background: #fff; padding: 1rem; border: 1px solid var(--gold-soft); overflow-x: auto; }

/* ------------------------------------------------------------------ variables for the year */

.variables { margin: 2.5rem 0 1rem; }
.year-page .variables { margin: 0 0 2.5rem; }
.variables h2 {
    text-align: center;
    font-size: 1.3rem;
    font-variant-caps: small-caps;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}
.variables__list { margin: 0; border-top: 1px solid var(--gold-soft); }
.variables__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    border-bottom: 1px solid var(--gold-soft);
    padding: 0.3rem 0.25rem;
}
.variables__item dt { min-width: 0; }
.variables__item dd { margin: 0; text-align: right; color: var(--rubric); font-weight: 600; font-variant-numeric: lining-nums; }
.variables summary { cursor: pointer; list-style: none; }
.variables summary::-webkit-details-marker { display: none; }
.variables summary::after { content: " ⁺"; color: var(--gold); }
.variables details[open] summary::after { content: " ⁻"; }
.variables details p { margin: 0.3rem 0 0.4rem; font-size: 1rem; color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------------------------ the Ordo (printed by ordo/) */

.ordo table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    font-size: inherit;
}
.ordo td {
    vertical-align: top;
    padding: 0.12rem 0.4rem 0.12rem 0;
}
.ordo td:first-child { width: 6.5rem; }
.ordo td[colspan] { width: auto; }
.ordo table table td:first-child { width: 6rem; }
.ordo p { margin: 0.35rem 0; }
.ordo b { font-weight: 600; }

/* month and season headings */
.ordo h1 {
    text-align: center;
    font-size: 1.75rem;
    font-variant-caps: small-caps;
    letter-spacing: 0.08em;
    margin: 2.75rem 0 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gold);
    scroll-margin-top: 1rem;
}
.ordo h2, .ordo h4 {
    text-align: center;
    font-size: 1.3rem;
    font-variant-caps: small-caps;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.75rem;
}
.ordo--day h2 { display: none; } /* the month: already in the page heading */
.ordo [id] { scroll-margin-top: 1rem; }

/* colour column, readings, explanations */
.ordo .col, .ordo td.lect:first-child {
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.95rem;
    white-space: nowrap;
}
.ordo .lect, .ordo .lect_local, .ordo .c_lect {
    font-size: 1rem;
    color: var(--ink-soft);
}
.ordo .explan { font-size: 1rem; color: var(--ink-soft); }
.ordo .bodytxt_b, .ordo .bodytxt_bc { font-weight: 600; }

/* grade: Solemnity, Feast, Memorial … in rubric red */
.ordo .colr, .ordo .colrd, .ordo .colrdi, .ordo .colr_b {
    text-align: right;
    white-space: nowrap;
    padding-right: 0;
}
.ordo .colrdi, .ordo .colrd {
    color: var(--rubric);
    font-style: italic;
    font-size: 1rem;
}
.ordo .colrd { font-style: normal; font-weight: 600; }
.ordo .colrdi b { font-weight: 500; }

/* OP in the margin */
.ordo .op, .ordo td.col b:only-child {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink);
    font-style: normal;
}

/* "Lunar day" (an explanation on hover) */
.ordo abbr[title] { text-decoration: none; cursor: help; border-bottom: 1px dotted var(--gold); }

.ordo .rubric, .ordo .redtxt { color: var(--rubric); font-style: italic; }
.ordo .motto { text-align: center; font-style: italic; }
.ordo .ordo_ps {
    text-align: center;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--rubric);
    padding-bottom: 0.5rem;
}

/* local celebrations: "placed in a coloured box" (Introduction, III D) */
.ordo .local, .ordo .local2, .local2.sample {
    background: var(--local);
}
.ordo table.local, .ordo table.local2 {
    border-left: 3px solid var(--local-edge);
    margin: 0.35rem 0 0.5rem;
}
.ordo table.local td, .ordo table.local2 td { padding-left: 0.5rem; }
.ordo td.local[colspan="3"] { font-variant-caps: all-small-caps; letter-spacing: 0.06em; color: var(--rubric-dark); }
.ordo td.local { font-weight: 400; }
.local2.sample { border-left: 3px solid var(--local-edge); }

/* Blesseds on the Calendar for the Provinces; anniversaries of the dead; notes */
.ordo .calprov, .calprov { font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.ordo .obit, .ordo .dec, .obit { font-style: italic; font-size: 1rem; color: #4a4038; }
.ordo tr.note td, .ordo .note { font-style: italic; }
.ordo .quote { font-style: normal; }

/* The day's rows in the Full Ordo: a thin rule above each date */
.ordo--year tr:has(> td > a[id]) > td { border-top: 1px solid var(--gold-soft); padding-top: 0.6rem; }
.ordo--year tr:has(> td > a[id]) b { font-variant-numeric: lining-nums; }
.ordo--year img[alt="Day of the lunar month"] { vertical-align: -1px; margin-right: 0.2rem; }

/* Table of moveable feasts: the engine's own blue stripes, in paper tones */
.ordo--table table[style] { border: 1px solid var(--gold-soft) !important; font-variant-numeric: lining-nums; }
.ordo--table tr[style*="background-color"] { background: var(--paper-deep) !important; }
.ordo--table td[style] { border: 1px solid var(--gold-soft) !important; padding: 0.2rem 0.3rem; }
.ordo--table td:first-child { width: auto; }

/* Appendices: text, verses, notes */
.ordo--text .bodytxt, .ordo--text .bodytxt_b { margin: 0.5rem 0; }
.ordo--text table { margin: 0.5rem 0; }

/* swatch beside a liturgical colour's name (added by site.js; the name stays) */
.swatch {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-right: 0.3em;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    vertical-align: 0.02em;
}
.swatch--white { background: var(--lit-white); }
.swatch--green { background: var(--lit-green); }
.swatch--violet, .swatch--purple { background: var(--lit-violet); }
.swatch--red { background: var(--lit-red); }
.swatch--rose { background: var(--lit-rose); }
.swatch--black { background: var(--lit-black); }
.swatch--gold { background: var(--lit-gold); }

@media (max-width: 40rem) {
    body { font-size: 1.125rem; }
    .ordo td:first-child { width: 4.4rem; }
    .ordo table table td:first-child { width: 3.6rem; }
    /* local boxes use the whole width: no empty colour column beside them */
    .ordo td:has(> table.local, > table.local2) { padding-right: 0; }
    .ordo td:has(> table.local, > table.local2) > table {
        margin-left: -4.4rem;
        width: calc(100% + 4.4rem);
    }
    .ordo .col, .ordo td.lect:first-child { white-space: normal; font-size: 0.88rem; }
    .ordo .colrdi, .ordo .colr { white-space: normal; }
    .day-nav { grid-template-columns: 1fr 1fr; }
    .day-nav__pick { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------ footer */

.colophon {
    border-top: 3px double var(--gold);
    text-align: center;
    padding: 1.25rem var(--gutter) 2rem;
    font-size: 1rem;
    color: var(--ink-soft);
}
.colophon p { margin: 0.25rem 0; }

/* ------------------------------------------------------------------ print */

@media print {
    @page { size: A4; margin: 16mm 14mm; }
    :root { --paper: #fff; --paper-deep: #fff; --local: #f6f0dc; }
    body { font-size: 10.5pt; background: #fff; }
    .masthead, .menu, .colophon, .skip, form, .jump, .day-nav, .page-foot, .title-page__links { display: none !important; }
    .page { max-width: none; padding: 0; }
    a { color: inherit; text-decoration: none; }
    .ordo h1 { break-before: page; margin-top: 0; }
    .ordo tr { break-inside: avoid; }
    .variables details p { display: none; }
    .variables summary::after { content: ""; }
    .ordo .local, .ordo .local2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The engine prints an empty heading (month 0, "&nbsp;") before January */
.ordo h1[id="\a0"] { display: none; }