/* Latin Mass Propers — a chant book: white page, true ink, the day's liturgical colour on staves, versals and rubric labels. */
@font-face{font-family:Alegreya;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/alegreya-latin-400-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alegreya;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/alegreya-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,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:Alegreya;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/alegreya-latin-400-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alegreya;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/alegreya-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sc-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sc-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sc-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+FEFF,U+FFFD}

:root{
  --paper:#fff; --ink:#1a1a1a; --ink-2:#4d4d4d; --rule:#d9d9d9;   /* the one neutral ramp */
  --g:#2e6b3a; --v:#5b2c86; --p:#a8426a; --w:#8a6100; --r:#a8221c; --b:#3a3a3a;   /* liturgical colours, AA on white */
  --lit:var(--w);
  --serif:Alegreya,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; --sc:'Alegreya SC',Alegreya,Georgia,serif;
  --measure:68ch; --gap:clamp(1rem,4vw,2rem);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#121212; --ink:#ececec; --ink-2:#b4b4b4; --rule:#3a3a3a;
  --g:#7fc48c; --v:#c3a3ec; --p:#f293b9; --w:#e3b850; --r:#ff8a7e; --b:#b8b8b8;
}}
.c-g{--lit:var(--g)}.c-v{--lit:var(--v)}.c-p{--lit:var(--p)}.c-w{--lit:var(--w)}.c-r{--lit:var(--r)}.c-b{--lit:var(--b)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1875rem/1.6 var(--serif);font-feature-settings:'kern','liga','onum';accent-color:var(--lit)}
::selection{background:color-mix(in srgb,var(--lit) 22%,transparent)}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--lit) 70%,transparent);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--lit)}
:focus-visible{outline:2px solid var(--lit);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:9}.skip:focus{left:1rem}
h1,h2{font-weight:700;line-height:1.15;text-wrap:balance;margin:0}
time,.cls{font-variant-numeric:lining-nums tabular-nums}

/* running head */
.bar{border-bottom:1px solid var(--rule)}
.bar-in{max-width:72rem;margin:0 auto;padding:.5rem var(--gap);display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem}
.logo{font:500 1.15rem/1 var(--sc);letter-spacing:.04em;text-decoration:none;padding:.7rem 0;margin-right:auto}
.nav{display:flex;flex-wrap:wrap;gap:0 1.1rem}
.nav a{font:500 1rem/1 var(--sc);letter-spacing:.03em;text-decoration:none;color:var(--ink-2);padding:.9rem 0;border-bottom:2px solid transparent}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--lit)}
.nav a:hover{color:var(--ink)}

main{max-width:72rem;margin:0 auto;padding:0 var(--gap) 3rem}
.crumbs{font:500 .95rem/1 var(--sc);color:var(--ink-2);padding:1.1rem 0 0}
.crumbs a{text-decoration:none}

/* the opener: a chant-book staff in the day's colour, the incipit underlaid with a versal */
.opener{padding:clamp(1.5rem,5vw,3rem) 0 1.25rem}
.opener h1,.opener .sub,.opener .la,.incipit .words{max-width:var(--measure)}
.incipit .meta{grid-column:2;font:500 1rem/1.4 var(--sc);letter-spacing:.02em;color:var(--lit);margin:0 0 .45rem}
.opener h1{font-size:clamp(2.1rem,6.2vw,3.6rem);letter-spacing:-.01em}
.opener .sub{font-size:1.2rem;color:var(--ink-2);margin:.35rem 0 0}
.opener .la{font-style:italic;font-size:1.2rem;color:var(--ink-2);margin:.3rem 0 0}
.staff{--sp:.5rem;height:calc(var(--sp)*3 + 2px);margin-top:1.5rem;background:repeating-linear-gradient(to bottom,var(--lit) 0 2px,transparent 2px var(--sp))}
/* the incipit: a versal spanning staff and text, the staff starting after it, as in a chant book */
.incipit{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;margin-top:1.6rem}
.incipit .versal{grid-row:2/4;font:700 5.2rem/.78 var(--serif);color:var(--lit);padding-top:.1rem}
.incipit .lines{grid-column:2;--sp:clamp(.68rem,1.1vw,.95rem);height:calc(var(--sp)*3 + 2px);background:repeating-linear-gradient(to bottom,var(--lit) 0 2px,transparent 2px var(--sp));align-self:start;margin-top:.15rem}
.incipit .words{grid-column:2;margin:.45rem 0 0;font-size:1.2rem;line-height:1.45;color:var(--ink-2)}
.incipit .lead{font:500 1.2rem/1 var(--sc);letter-spacing:.06em;color:var(--ink);text-transform:lowercase}
.go{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin:1.5rem 0 2.5rem}
.go span{color:var(--ink-2);font-size:1.05rem}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.4rem;background:var(--ink);color:var(--paper);font:700 1.15rem/1 var(--sc);letter-spacing:.04em;text-decoration:none;border-radius:2px}
.btn:hover{background:color-mix(in srgb,var(--ink) 85%,var(--lit))}

.tools{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;margin:.25rem 0 0}
.tools a,.print{font:500 1.02rem/1 var(--sc);letter-spacing:.03em;color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.print{background:none;border:0;padding:0;cursor:pointer}
.tools a:hover,.print:hover{color:var(--lit)}
.note{font-size:1rem;color:var(--ink-2);max-width:var(--measure);margin:.5rem 0 1.5rem}

/* the propers: rubric labels in small caps and colour, the reading column calm */
.propers{border-top:1px solid var(--rule)}
.prop{padding:1.4rem 0 1.2rem;border-bottom:1px solid var(--rule);scroll-margin-top:1rem}
.prop h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:0 0 .55rem}
.prop .lat{font:700 1.18rem/1.2 var(--sc);letter-spacing:.05em;color:var(--lit)}
.prop .eng{font:400 1rem/1.2 var(--serif);font-style:italic;color:var(--ink-2)}
.txt{max-width:var(--measure)}
.txt p{margin:0 0 .5rem}
.txt .ref{font:500 .98rem/1.3 var(--sc);letter-spacing:.03em;color:var(--ink-2);margin:.2rem 0 .3rem}
.txt .rub{font-style:italic;color:var(--lit);margin-top:.8rem}
.vr{color:var(--lit);font-weight:700;margin-right:.25em}
.txt.en{margin-top:1rem;padding-top:.9rem;background:linear-gradient(var(--rule),var(--rule)) top left/4rem 1px no-repeat}
@media (min-width:62rem){
  .prop.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .prop.pair h2{grid-column:1/-1}
  .prop.pair .txt.en{margin:0;padding:0;background:none}
}
.ver{font:700 1.3rem/1.3 var(--sc);letter-spacing:.03em;margin:2.5rem 0 .8rem;color:var(--ink)}

/* lists: one label grid everywhere (date · name · class · colour), a silk ribbon marks this Sunday */
.said{margin:2.75rem 0 0}
.said>h2,.about-short h2,.prose h2{font-size:1.5rem;margin:0 0 .7rem}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{position:relative;display:grid;grid-template-columns:6.6rem 1fr auto;gap:.2rem 1rem;align-items:baseline;padding:.7rem 0 .7rem .9rem;border-bottom:1px solid var(--rule)}
.row time{font:500 1rem/1.3 var(--sc);color:var(--ink-2)}
.row .nm a{font-weight:700;text-decoration:none}
.row .nm a:hover{text-decoration:underline}
.row small{display:block;font-size:.98rem;color:var(--ink-2);font-style:italic}
.mk{display:flex;gap:.6rem;font:500 .95rem/1 var(--sc);color:var(--ink-2)}
.cls{min-width:2.2ch;text-align:right;color:var(--ink)}
.clr{color:var(--lit);min-width:5ch}
.row.marked::after{content:'';position:absolute;left:-.1rem;top:-1px;width:.75rem;height:calc(100% + 1.1rem);background:var(--lit);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
@media (max-width:34rem){.row{grid-template-columns:1fr auto}.row time{grid-column:1/-1}}
.more{margin:1rem 0 0;font-size:1.05rem}
.months,.years{display:flex;flex-wrap:wrap;gap:.1rem 1rem;margin:.6rem 0;font:500 1.02rem/1 var(--sc);letter-spacing:.03em}
.months a,.years a,.years span{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--ink-2)}
.years [aria-current]{color:var(--ink);border-bottom:2px solid var(--lit)}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 0;border-top:1px solid var(--rule);padding-top:1rem}
.pn a{text-decoration:none;font-weight:700;font-size:1.1rem}
.pn a[rel=next]{text-align:right}
.pn small{display:block;font:500 .95rem/1.4 var(--sc);color:var(--ink-2)}
.about-short,.prose{max-width:var(--measure);margin-top:2.75rem}
.prose{margin-top:1rem}.prose h2{margin-top:2rem}
.prose table{border-collapse:collapse;font-size:1rem;width:100%}.prose td,.prose th{border-bottom:1px solid var(--rule);padding:.4rem .5rem .4rem 0;text-align:left;vertical-align:top}

.foot{border-top:1px solid var(--rule);margin-top:3rem}
.foot-in{max-width:72rem;margin:0 auto;padding:1.5rem var(--gap) 2.5rem}
.foot nav{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:.6rem 0;font:500 1rem/1 var(--sc)}
.foot nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--ink-2)}
.fine{font-size:.95rem;color:var(--ink-2);max-width:var(--measure);margin:.4rem 0}

@media print{
  :root{--paper:#fff;--ink:#000;--ink-2:#333;--rule:#bbb}
  .bar,.foot,.crumbs,.tools,.note,.said,.pn,.go,.skip{display:none!important}
  body{font-size:12.5pt}
  .prop{break-inside:avoid-page;padding:.6rem 0}
  .prop.pair{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2rem}.prop.pair h2{grid-column:1/-1}.prop.pair .txt.en{margin:0;padding:0;background:none}
  .opener{padding-top:0}
}
@media (prefers-reduced-motion:no-preference){a,.btn,.nav a{transition:color .2s,background-color .2s,text-decoration-color .2s}}
@media (max-width:40rem){.tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:0 1.1rem;margin-right:calc(-1*var(--gap));padding-right:var(--gap)}.tools>*{flex:none}}
/* a coloured initial on the first sung line of each chant, as in a Graduale */
.prop .txt p.cap::first-letter{float:left;font:700 2.9em/.82 var(--serif);color:var(--lit);margin:.08em .12em 0 0}
.said h3{font:700 1.1rem/1.2 var(--sc);letter-spacing:.04em;color:var(--ink-2);margin:1.4rem 0 .4rem}