/* ============================================================
   liturgical-day.css — rules from styles.css used by the pages it is linked from: /, /calendar.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   Linked straight after styles.css.
   ============================================================ */

body.reading-modal-open{overflow:hidden;}

.reading-modal-card{
  width:100%;max-width:640px;
  margin:min(9vh,80px) 0 48px;
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:3px;
  display:flex;flex-direction:column;
}

.reading-modal-head{padding:20px 26px 14px;border-bottom:1px solid var(--rule);}
.reading-modal-head-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.reading-modal-kicker{
  font-family:var(--display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);padding-top:4px;
}
.reading-modal-close{
  flex:none;background:none;cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;
  color:var(--muted);padding:4px 8px;
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s,border-color .2s;
}
.reading-modal-title{
  margin:6px 0 0;
  font-family:var(--head);font-size:clamp(22px,3.4vw,28px);font-weight:600;
  color:var(--ink);line-height:1.2;
}

.reading-modal-status{
  margin:0;padding:14px 26px 0;
  font-family:var(--head);font-style:italic;font-size:16px;color:var(--muted);
}
.reading-modal-status:empty{padding:0;}

/* The text scrolls inside the card rather than pushing it down the page, so
   Psalm 118 and a three-verse Gospel open to the same shape. */
.reading-modal-body{
  padding:18px 26px 4px;
  max-height:min(58vh,560px);
  overflow-y:auto;overscroll-behavior:contain;
}
.reading-modal-seg + .reading-modal-seg{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
}
.reading-modal-seg-ref{
  margin:0 0 8px;
  font-family:var(--display);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:600;
}
.reading-modal-text{
  margin:0;
  font-family:var(--body);font-size:17.5px;line-height:1.72;color:var(--ink);
}
/* Where the citation skips a verse, say so rather than run the two together. */
.reading-modal-gap{color:var(--muted);opacity:.6;letter-spacing:.1em;}

.reading-modal-foot{
  margin:0;padding:14px 26px;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  font-family:var(--body);font-size:12px;color:var(--muted);
}
.reading-modal-more{
  margin-left:auto;color:var(--gold-deep);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:2px;
}

@media(max-width:560px){
  .reading-modal-card{margin-top:14px;}
  .reading-modal-body{max-height:64vh;}
  .reading-modal-head,.reading-modal-status,
  .reading-modal-body,.reading-modal-foot{padding-left:17px;padding-right:17px;}
  .reading-modal-text{font-size:16.5px;}
}
/* The eyebrows on the homepage's three light bands. --gold is 3.4:1 on the
   "Where Should I Start?" band, 3.6:1 on paper and 3.8:1 on a card — under AA
   for 11px text in all three — so they take --gold-deep, which measures 4.8:1,
   5.1:1 and 5.4:1 against the same three. Scoped to these sections rather than
   set on .kicker itself: the base class is shared with 54 other pages, some of
   which sit their eyebrows on dark page heads defined in their own <style>
   blocks, and darkening gold there would make those worse, not better. The two
   eyebrows on the homepage's dark bands are .kicker.on-dark and already carry
   --champagne at 7.3:1 and 8.1:1. */
.latest-sec .kicker,
.howto-sec .kicker,
.begin-here-sec .kicker{color:var(--gold-deep);display:block;text-align:center;}

/* ───────────────── PRINT ───────────────── */
@media print{

  /* The stole is the colour said in cloth, and a print is grey. Its caption
     names the colour, and the panel's meta line names it too, so nothing is
     lost by dropping the image. */
  .litcal-stole img{display:none !important;}
  .litcal-strip-grid{display:block !important;}
}

/* ═══════════════════════════════════════════════════
   LITURGICAL CALENDAR
   ═══════════════════════════════════════════════════ */

/* ── Today Strip (Home Page) ─────────────────────── */
.litcal-today-sec{
  padding:40px 0 48px;
  border-bottom:1px solid var(--rule);
}
.litcal-strip{
  background:var(--espresso);
  border-radius:10px;
  padding:28px 32px 24px;
  color:var(--muted-dark);
}
.litcal-strip-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
/* The date line sits above the feast: quiet, so the celebration stays the
   first thing read. The Roman date rides along after the separator. */
.litcal-strip-date{
  font-family:var(--body);
  font-size:14.5px;
  color:var(--muted-dark);
  opacity:.7;
  margin-bottom:6px;
}
.litcal-strip-body{
  font-family:var(--head);
  font-size:clamp(20px,3vw,28px);
  font-weight:600;
  color:var(--paper);
  line-height:1.25;
  margin-bottom:10px;
}
.litcal-strip-celebration{vertical-align:middle;}
/* Under a transferred feast. No opacity: --muted-dark on espresso as it is. */
.litcal-strip-transferred{
  margin:-4px 0 10px;
  font-family:var(--body);font-style:italic;font-size:15px;
  color:var(--muted-dark);
}
.litcal-strip-meta{
  font-family:var(--display);font-size:11px;letter-spacing:.18em;
  color:var(--champagne);opacity:.85;
  display:flex;flex-wrap:wrap;gap:4px 0;align-items:center;
  margin-bottom:10px;
}
.litcal-strip-sep{margin:0 8px;opacity:.5;}
/* The rank is a link to its glossary entry; the pre-1960 name beside a 1962
   class is secondary, so it drops the capitals' spacing and goes italic. */
.litcal-rank-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:3px;}
.litcal-rank-old{font-family:var(--body);font-style:italic;letter-spacing:0;text-transform:none;}
.litcal-detail-meta .litcal-rank-link{color:var(--gold-deep);}
/* The colour named in words. It used to be printed in the vestment colour
   itself — green on the espresso strip was 2.3:1, white on the cream detail
   card next to nothing. These tones clear AA: light ones on --espresso
   (8:1 and up), the panel's deepened ones on --paper-card (5.4:1 and up). */
.litcal-strip-color{color:#e3c474;}
.litcal-strip-color[data-color="green"]{color:#8fbf98;}
.litcal-strip-color[data-color="violet"]{color:#b8a2d8;}
.litcal-strip-color[data-color="red"]{color:#e5978c;}
.litcal-strip-color[data-color="rose"]{color:#e6a7b8;}
.litcal-strip-color[data-color="white"]{color:#f5f0e0;}
.litcal-strip-color[data-color="black"]{color:#cfc6b8;}
.litcal-detail-color{color:#7d6224;}
.litcal-detail-color[data-color="green"]{color:#2e5a3a;}
.litcal-detail-color[data-color="violet"]{color:#4a2d6e;}
.litcal-detail-color[data-color="red"]{color:#8b1a1a;}
.litcal-detail-color[data-color="rose"]{color:#954d63;}
.litcal-detail-color[data-color="black"]{color:#1a120b;}
/* Fast and abstinence. A reader scanning the strip for one thing is usually
   scanning for this, so it is the one item in the meta line at full strength. */
.litcal-strip-obs{color:var(--champagne);opacity:1;}
/* The saint of the day and the commemorations are the same kind of line and
   set the same way, except that the saint carries a little more weight: on a
   Sunday he is the answer to the question the strip is most often opened
   with, and the commemorations beside him are a footnote to the Mass. */
.litcal-strip-saint{
  font-family:var(--body);font-size:15px;
  color:var(--muted-dark);opacity:.9;
  margin-bottom:6px;
}
.litcal-strip-saint em{color:var(--champagne);opacity:.8;font-style:italic;}
.litcal-strip-comm{
  font-family:var(--body);font-size:15px;
  color:var(--muted-dark);opacity:.75;
  margin-bottom:10px;
}
/* Two columns rather than an indent: with four readings under one another the
   citations have to line up, or the eye cannot find the Gospel without reading
   the labels. The label column is wide enough for "Responsorial Psalm". */
.litcal-strip-reading{
  margin-top:8px;font-family:var(--body);font-size:14px;
  display:grid;grid-template-columns:136px minmax(0,1fr);
  gap:0 10px;align-items:baseline;
}
.litcal-strip-reading a{
  color:var(--champagne);text-decoration:none;font-weight:500;
}
.litcal-strip-link{
  margin-top:14px;
  color:var(--champagne) !important;
}
.litcal-strip-link:hover{color:var(--paper) !important;}
/* "Browse the Year" and the door to /holy-days, side by side, wrapping on a phone. */
.litcal-strip-links{display:flex;flex-wrap:wrap;gap:4px 28px;}

/* ── The panel's three columns ────────────────────
   The day on the left, what is coming in the middle, the cloth on the right.
   The stole is the one thing that must survive every breakpoint — it is the
   only part of the panel that says the colour without using a word — so it
   keeps a column of its own down to the narrowest phone, and it is the aside
   that drops below instead. */
.litcal-strip-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 232px 132px;
  grid-template-areas:"main aside stole";
  gap:26px 30px;
  align-items:start;
}
.litcal-strip-main{grid-area:main;min-width:0;}
.litcal-strip-aside{grid-area:aside;min-width:0;}
.litcal-stole{grid-area:stole;}

@media(max-width:980px){
  .litcal-strip-grid{
    grid-template-columns:minmax(0,1fr) 120px;
    grid-template-areas:"main stole" "aside aside";
  }
}
@media(max-width:560px){
  .litcal-strip-grid{grid-template-columns:minmax(0,1fr) 76px;gap:20px 16px;}
}

/* The kicker is a heading now that it is the only one this section has. */
.litcal-strip-kicker{margin:0;}

/* Fast and abstinence, in a sentence rather than a label. */
.litcal-strip-fast{
  margin-top:14px;padding:9px 14px;
  background:rgba(201,168,90,.10);
  border-left:2px solid var(--gold);
  border-radius:3px;
  font-family:var(--body);font-size:14.5px;line-height:1.55;
  color:var(--paper);
}
.litcal-strip-fast strong{color:var(--champagne);font-weight:600;}

.litcal-strip-readings{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(201,168,90,.22);
}
.litcal-strip-readings-label{
  display:block;font-family:var(--display);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;
}
/* The three-year cycle, set beside the label rather than under it: it belongs
   to the heading, not to any one reading. Lighter than the gold label so the
   eye still reads "The Mass of the Day" first. */
.litcal-strip-readings-cycle{
  font-family:var(--body);font-size:10px;letter-spacing:.1em;
  color:var(--muted-dark);opacity:.7;text-transform:none;
}
.litcal-strip-reading-kind{
  font-family:var(--display);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-dark);opacity:.55;
}
/* On a phone the label column would leave the citations no room, so the label
   goes above its citation instead. */
@media(max-width:560px){
  .litcal-strip-reading{grid-template-columns:minmax(0,1fr);gap:2px;}
  .litcal-strip-reading-kind{font-size:9px;}
}

/* ── The aside, on the dark ground ─────────────── */
.litcal-strip-aside{display:flex;flex-direction:column;gap:16px;}
.litcal-aside-item{padding-bottom:14px;border-bottom:1px solid rgba(201,168,90,.22);}
.litcal-aside-item:last-child{border-bottom:none;padding-bottom:0;}
.litcal-aside-label{
  display:block;font-family:var(--display);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:7px;
}
.litcal-aside-value{
  display:block;font-family:var(--head);font-size:16px;font-weight:600;
  color:var(--paper);line-height:1.3;
}
.litcal-aside-date{
  display:block;font-family:var(--body);font-size:13px;
  color:var(--muted-dark);opacity:.62;margin-top:2px;
}
.litcal-aside-transferred{
  display:block;font-family:var(--body);font-style:italic;font-size:13px;
  color:var(--muted-dark);margin-top:1px;
}
.litcal-aside-feast{margin-bottom:10px;}
.litcal-aside-feast:last-child{margin-bottom:0;}

/* ── The stole ────────────────────────────────────
   Cut out on transparency, so it stands on the espresso rather than sitting in
   a card on it. The drop is only enough to lift the black one off the ground. */
.litcal-stole{
  margin:0;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;
}
.litcal-stole-label{
  display:block;font-family:var(--display);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);
}
.litcal-stole-gloss{
  display:block;font-family:var(--body);font-size:11.5px;line-height:1.5;
  color:var(--muted-dark);opacity:.6;margin-top:5px;
}
/* At 76px the column holds the cloth and its name and nothing else. */
@media(max-width:560px){.litcal-stole-gloss{display:none;}}

/* ── Toggle Switch ───────────────────────────────── */
.litcal-toggle{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;color:var(--muted-dark);
  font-family:var(--display);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:0;
}
.litcal-toggle-switch{
  display:inline-block;width:38px;height:20px;
  background:rgba(201,168,90,.2);
  border-radius:10px;position:relative;
  transition:background .25s;
}
.litcal-toggle-knob{
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--paper);
  transition:transform .25s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* ── Calendar Section ────────────────────────────── */
.litcal-sec{padding:40px 0 60px;}

/* The "Today at a Glance" card that used to open this section is gone; the
   panel at the head of the page says all of it, and said half of it twice. */

/* Calendar form note */
.litcal-form-note{font-family:var(--body);font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5;}

.litcal-page-toggle{
  text-align:center;margin-bottom:24px;
}
.litcal-page-toggle .litcal-toggle{
  color:var(--muted);
}

/* ── Month Navigation ────────────────────────────── */
.litcal-nav{
  display:flex;align-items:center;justify-content:center;gap:24px;
  margin-bottom:24px;
}
.litcal-nav-title{
  font-family:var(--head);
  font-size:clamp(22px,3.5vw,32px);
  font-weight:600;
  min-width:240px;text-align:center;
}
.litcal-nav-btn{
  flex:none;position:relative;
  width:46px;height:46px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  /* A filled espresso disc, the header's colour, with a gilt hairline set just
     inside its edge. Champagne on espresso is 8.6:1. */
  background:radial-gradient(circle at 35% 30%,#2e2014,var(--espresso) 70%);
  border:1px solid var(--espresso);
  box-shadow:inset 0 0 0 3px var(--espresso),inset 0 0 0 4px rgba(201,168,90,.55),
    0 2px 6px rgba(26,18,11,.22);
  color:var(--champagne);
  transition:background .2s,color .2s,box-shadow .2s,transform .2s;
}
.litcal-nav-chev{
  display:block;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;
}
/* Hover fills the disc with gold and the chevron leans the way it goes.
   #fff on --gold-deep is 6.3:1. */
.litcal-nav-btn:hover{
  background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;
  box-shadow:inset 0 0 0 3px var(--gold-deep),inset 0 0 0 4px rgba(255,255,255,.45),
    0 4px 12px rgba(125,98,36,.32);
}
.litcal-nav-prev:hover .litcal-nav-chev{transform:translateX(-2px);}
.litcal-nav-next:hover .litcal-nav-chev{transform:translateX(2px);}
.litcal-nav-btn:active{transform:scale(.94);}
.litcal-nav-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .litcal-nav-btn,.litcal-nav-chev{transition:none;}
  .litcal-nav-btn:active,.litcal-nav-btn:hover .litcal-nav-chev{transform:none;}
}

/* ── Calendar Grid ───────────────────────────────── */
.litcal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
  margin-bottom:32px;
}
.litcal-hdr{
  font-family:var(--display);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;padding:10px 4px;
  color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.litcal-cell{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:4px;
  min-height:90px;
  padding:6px 8px;
  cursor:pointer;
  position:relative;
  transition:box-shadow .2s,border-color .2s;
  overflow:hidden;
}
.litcal-cell-empty{
  background:transparent;border:none;cursor:default;min-height:0;
}
.litcal-day-num{
  font-family:var(--display);font-size:13px;font-weight:600;
  color:var(--ink);display:block;margin-bottom:2px;
}
.litcal-sunday .litcal-day-num{color:var(--gold-deep);}
.litcal-today-cell{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 2px rgba(154,122,46,.25);
}
.litcal-today-cell .litcal-day-num{
  background:var(--gold);color:var(--paper);
  display:inline-block;padding:1px 6px;border-radius:3px;
}
.litcal-day-name{
  font-family:var(--body);font-size:12px;line-height:1.3;
  color:var(--muted);display:block;
  overflow-wrap:break-word;
}
.litcal-day-reading{
  display:block;font-family:var(--body);font-size:11px;
  line-height:1.2;margin-top:3px;
  color:var(--gold-deep);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Day Detail Overlay ──────────────────────────── */
.litcal-detail{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:28px 32px;
  margin:0 auto 32px;
  max-width:600px;
  position:relative;
  box-shadow:0 4px 24px rgba(26,18,11,.12);
}
.litcal-detail-close{
  position:absolute;top:12px;right:16px;
  background:none;border:none;font-size:24px;
  color:var(--muted);cursor:pointer;
  line-height:1;
}
.litcal-detail-date{
  font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:8px;
}
.litcal-detail-celebration{
  font-family:var(--head);
  font-size:clamp(20px,3vw,26px);
  font-weight:600;line-height:1.2;
  color:var(--ink);margin-bottom:14px;
}
.litcal-detail-transferred{
  margin:-8px 0 14px;
  font-family:var(--body);font-style:italic;font-size:16px;
  color:var(--muted);
}
.litcal-detail-meta{
  font-family:var(--body);font-size:16px;
  color:var(--muted);line-height:1.8;
  margin-bottom:12px;
}
.litcal-detail-saint{
  font-family:var(--body);font-size:15px;
  color:var(--ink);
  border-top:1px solid var(--rule);
  padding-top:12px;margin-top:8px;
}
.litcal-detail-comm{
  font-family:var(--body);font-size:15px;
  color:var(--muted);
  border-top:1px solid var(--rule);
  padding-top:12px;margin-top:8px;
}
/* One rule between the two, not two. */
.litcal-detail-saint + .litcal-detail-comm{
  border-top:none;padding-top:4px;margin-top:2px;
}
.litcal-detail-comm ul{
  list-style:none;margin:6px 0 0;padding:0;
}
.litcal-detail-comm li::before{
  content:'✦ ';color:var(--gold);font-size:10px;
}
.litcal-detail-readings{
  border-top:1px solid var(--rule);
  padding-top:14px;margin-top:12px;
  font-family:var(--body);font-size:16px;color:var(--ink);
}
.litcal-detail-reading-row{
  margin-top:6px;
}
.litcal-reading-label{
  font-weight:600;color:var(--muted);font-size:14px;
}
.litcal-reading-link{
  color:var(--gold-deep);text-decoration:none;
  font-weight:500;
}
.litcal-detail-reading-cycle{
  font-size:13px;color:var(--muted);margin-top:6px;
  font-style:italic;
}

/* ── Verification ────────────────────────────────── */
.litcal-check{
  max-width:600px;margin:0 auto 40px;
  padding:16px 20px;
  border:1px solid var(--rule);border-radius:6px;
  background:var(--paper-card);
}
.litcal-check summary{
  cursor:pointer;
  color:var(--gold-deep); /* the .kicker gold is under AA at this size */
}
.litcal-check ul{
  list-style:none;padding:12px 0 0;margin:0;
  font-family:var(--body);font-size:15px;
  color:var(--muted);
}
.litcal-check strong{color:var(--ink);}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:760px){
  .litcal-cell{min-height:60px;padding:4px 4px;}
  .litcal-day-num{font-size:12px;}
  .litcal-day-name{font-size:10px;}
  .litcal-day-reading{font-size:9px;}
  .litcal-hdr{font-size:9px;letter-spacing:.12em;}
  .litcal-nav{gap:14px;}
  .litcal-nav-title{min-width:auto;font-size:22px;}
  .litcal-detail{padding:20px 20px;margin:0 12px 24px;}
}
@media(max-width:480px){
  .litcal-cell{min-height:48px;padding:3px 2px;}
  .litcal-day-name{display:none;}
  .litcal-day-reading{display:none;}
  .litcal-grid{gap:2px;}
  .litcal-strip{padding:20px 20px 18px;}
  .litcal-strip-body{font-size:18px;}
}

/* 1 ── the hairline rules that separate sections ── */
.begin-here-sec,.howto-sec,.litcal-today-sec{
  border-color:var(--lit-muted);
  transition:var(--lit-fade);
}

/* ── Line one: the label, and the colour stated plainly ── */
.litcal-panel-label{
  display:flex;align-items:center;gap:9px;
  margin:0;
  font-family:var(--display);
  font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
/* The stops punctuate the label for a screen reader — "Today in the Church.
   Liturgical colour: white." — and are hidden from the eye at every width,
   where the gap and the phone's second line already separate the phrases. */
.litcal-panel-stop{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* The dot between the two phrases: the flex gap before it, the same space
   after it. */
.litcal-panel-label-sep{margin-right:9px;opacity:.5;}
a.litcal-panel-form{text-decoration:underline;text-decoration-color:rgba(125,98,36,.35);text-underline-offset:3px;}
a.litcal-panel-form:hover{color:var(--gold-deep);text-decoration-color:currentColor;}
a.litcal-panel-form:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;}

/* ── The date, and the Roman reckoning once beside it ──
   The Roman date used to be decoration: hidden from screen readers, hidden
   again below 900px, and duplicated in a hidden span. It is secondary text now,
   which means it is read, it is printed on a phone, and it carries no opacity
   that would drop --muted under 4.5:1. */
.litcal-panel-date{
  margin:13px 0 0;
  font-family:var(--body);
  font-size:15.5px;line-height:1.4;
  color:var(--muted);
}

/* ── The feast ── */
.litcal-panel-feast{
  margin:5px 0 0;
  font-family:var(--head);
  font-size:clamp(25px,3.4vw,33px);
  font-weight:600;
  line-height:1.16;
  color:var(--ink);
  hyphens:none;
}

/* ── A transferred feast: where it came from, one quiet line under it ── */
.litcal-panel-transferred{
  margin:4px 0 0;
  font-family:var(--body);font-style:italic;
  font-size:15.5px;line-height:1.4;
  color:var(--muted);
}

/* ── The rank and the season ── */
.litcal-panel-meta{
  margin:11px 0 0;
  font-family:var(--body);
  font-size:15px;line-height:1.45;
  color:var(--muted);
}
.litcal-panel-sep{margin:0 .5em;opacity:.4;}

/* ── The commemoration and the day's discipline ── */
.litcal-panel-notes{
  margin:6px 0 0;
  font-family:var(--body);
  font-size:14.5px;line-height:1.5;
  color:var(--muted);
}
.litcal-panel-comm,.litcal-panel-obs{font-style:italic;}

/* The doors share the card's width in equal columns, so each is as wide as
   the widest needs and the row runs edge to edge — however many there are. */
.litcal-panel-actions{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;
  margin:22px 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
}
.litcal-panel-btn:focus-visible{outline:2px solid var(--panel-fill);outline-offset:3px;}

/* The reading is filled, because it is the one thing most readers came to the
   card for. The hover state leaves the accent for the site's own espresso and
   champagne, which is what every other button here does. */
.litcal-panel-reading{
  background:var(--panel-fill);
  color:var(--paper);
}
/* The calendar is the same colour, drawn rather than filled. */
.litcal-panel-cal{
  background:none;
  color:var(--panel-fill);
}

/* On a phone the Roman date takes its own line rather than disappearing, and
   below 560px the three doors still share one row: the letterspacing eases,
   and a label too long for its third of the width wraps inside its own
   button — the three stay the same height — rather than the row breaking. */
@media(max-width:640px){
  .litcal-panel-feast{font-size:clamp(22px,6.6vw,28px);}
  .litcal-panel-date{font-size:15px;}
  .litcal-panel-roman{display:block;margin:5px 0 0;}
  .litcal-panel-sep{margin:0 .38em;}
  /* The header as two clean lines — "Today in the Church" with the calendar at
     its end, then the colour beneath, set in under the title — instead of one
     flex row that wraps wherever the width runs out. */
  .litcal-panel-label{flex-wrap:wrap;row-gap:4px;}
  .litcal-panel-title{flex:1 1 auto;}
  .litcal-panel-sr{order:3;flex:0 0 100%;padding-left:18px;}
  .litcal-panel-label-sep{display:none;}
  .litcal-panel-form{padding-left:0;}
}
@media(max-width:560px){
  .litcal-panel-actions{gap:6px;}
  .litcal-panel-btn{
    padding:10px 6px;
    font-size:10.5px;letter-spacing:.06em;
  }
}
@media(max-width:380px){
  .litcal-panel-btn{padding:10px 4px;letter-spacing:.03em;}
}

/* Printed, the card is a short block of text: the band, the circle, the shadow
   and the hover affordance mean nothing on paper. The day, the feast and the
   citation still do, so the reading keeps its label with the button chrome
   stripped off it. */
@media print{
  .litcal-panel-actions{display:block;margin-top:6pt;padding-top:0;border:0;}
  .litcal-panel-reading{background:none;border:0;padding:0;color:#000;}
}