/*
  The season calendar, on screen and on paper.

  This is the printed handout's typography, kept in one file so that the screen page
  and /schedule/print cannot drift apart. Everything is scoped to .handout, so it sits
  quietly inside the rest of the site.

  The order of the file is the order of the page:

    1  tokens            colours, and the liturgical accents
    2  the type scale    shared by screen and print; only the root size changes
    3  masthead          print only — on screen the site's own header does this job
    4  legend
    5  year dividers
    6  seasons and the four-column table
    7  the states a row can be in
    8  the Three Days block
    9  screen: the phone, where four columns become four lines
   10  print: page size, and the breaks that keep a season whole

  The whole scale is in rem. Screen sets the root to 20px, print to 12.5pt, and every
  size on the page follows from that one number.
*/

/* ---------- 1. tokens ---------- */

.handout,
.sheet,
html.handout-doc {
  --hd-ink: #1c1a17;
  --hd-soft: #4a463f; /* darkened from the paper original: this has to read on a screen */
  --hd-faint: #8d877e;
  --hd-rule: #cfc9bf;
  --hd-paper: #ffffff;
  --hd-stripe: #f4f1ec;

  --hd-pentecost: #2f5d3f;
  --hd-advent: #2b3f77;
  --hd-christmas: #8f2233; /* red, not white: white is not a colour you can see */
  --hd-epiphany: #2f5d3f;
  --hd-lent: #4a2f5d;
  --hd-passion: #7a2230;
  --hd-easter: #8a6d1f; /* gold, for the same reason as Christmas */

  --hd-serif: Baskerville, "Libre Baskerville", "Hoefler Text", "Iowan Old Style", Georgia,
    "Times New Roman", serif;
}

.season[data-accent="pentecost"] { --accent: var(--hd-pentecost); }
.season[data-accent="advent"]    { --accent: var(--hd-advent); }
.season[data-accent="christmas"] { --accent: var(--hd-christmas); }
.season[data-accent="epiphany"]  { --accent: var(--hd-epiphany); }
.season[data-accent="lent"]      { --accent: var(--hd-lent); }
.season[data-accent="passion"]   { --accent: var(--hd-passion); }
.season[data-accent="easter"]    { --accent: var(--hd-easter); }

/* ---------- 2. the type scale ---------- */

html.handout-doc {
  font-size: 20px;
  background: var(--hd-paper);
}

html.handout-doc body {
  margin: 0;
  padding: 1.5rem 1.25rem 3rem;
  background: var(--hd-paper);
  color: var(--hd-ink);
  font-family: var(--hd-serif);
  line-height: 1.45;
}

.handout {
  color: var(--hd-ink);
  font-family: var(--hd-serif);
  line-height: 1.45;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.handout * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- 3. masthead ---------- */

.handout .masthead {
  text-align: center;
  padding-bottom: 0.55rem;
  border-bottom: 2.5px solid var(--hd-ink);
  margin-bottom: 2px;
}

.handout .masthead .church {
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  color: var(--hd-soft);
  margin: 0 0 0.7rem;
  max-width: none;
}

.handout .masthead h1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--hd-ink);
  margin: 0;
  line-height: 1.08;
}

.handout .masthead .rule-orn {
  color: var(--hd-faint);
  font-size: 0.95rem;
  margin: 0.5rem 0 0.45rem;
  letter-spacing: 0.4em;
  max-width: none;
}

.handout .masthead .season-line {
  font-size: 1.1rem;
  color: var(--hd-soft);
  font-style: italic;
  margin: 0;
  max-width: none;
}

.handout .masthead-under {
  border-bottom: 0.75px solid var(--hd-ink);
  margin-bottom: 1.5rem;
  height: 3px;
}

/* ---------- 4. legend ---------- */

.handout .legend {
  font-size: 0.95rem;
  color: var(--hd-soft);
  text-align: center;
  margin: 0 0 1.5rem;
  font-style: italic;
  max-width: none;
}

.handout .legend b {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--hd-ink);
  font-weight: 600;
}

.handout .legend .hold-tag,
.handout .legend .tbc {
  font-style: normal;
  margin-left: 0;
}

/* ---------- 5. year dividers ---------- */

.handout .yearmark-block {
  border-top: 2.5px solid var(--hd-ink);
  margin: 0 0 1.6rem;
  break-after: avoid;
}

.handout .yearband {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 0 1.4rem;
  border-bottom: 2.5px solid var(--hd-ink);
}

.handout .yearband::before,
.handout .yearband::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 0.75px solid var(--hd-ink);
}

.handout .yearband span {
  flex: 0 0 auto;
  font-variant: small-caps;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--hd-ink);
}

/* ---------- 6. seasons and the table ---------- */

.handout .season {
  break-inside: avoid;
  margin-bottom: 1.8rem;
}

.handout .season > h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.6rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--accent, var(--hd-ink));
  color: var(--hd-ink);
  line-height: 1.25;
}

.handout table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.handout thead {
  display: table-header-group;
}

.handout th {
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--hd-soft);
  text-align: left;
  padding: 0 0.55rem 0.36rem 0;
  border-bottom: 1.25px solid var(--hd-ink);
}

.handout td {
  font-size: 1rem;
  padding: 0.5rem 0.55rem 0.5rem 0;
  border-bottom: 0.5px solid var(--hd-rule);
  vertical-align: baseline;
}

.handout tr {
  break-inside: avoid;
}

/* alternating tint, for reading across a wide line */
.handout tbody tr:nth-child(even) td {
  background: var(--hd-stripe);
}

.handout td:first-child {
  padding-left: 0.4rem;
}

.handout .c-date { width: 6em; white-space: nowrap; }
.handout .c-day { width: auto; }
.handout .c-time { width: 10em; white-space: nowrap; }
.handout .c-anthem { width: 12em; }

/* ---------- 7. the states a row can be in ---------- */

/* a principal feast, or a confirmed added service: the whole row lifts */
.handout tr.feast td { font-weight: 600; }
.handout tr.feast .c-day { color: var(--accent, var(--hd-ink)); }

/* a service that is not a Sunday morning */
.handout tr.midweek .c-day { font-style: italic; }

/* it may not happen at all */
.handout tr.hold .c-day { font-style: italic; }

.handout .hold-tag {
  font-size: 0.86rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--hd-soft);
  margin-left: 0.35em;
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
}

/* it is happening; the time is not settled */
.handout .tbc {
  font-size: 0.86rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--hd-passion);
  margin-left: 0.35em;
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
}

.handout td.c-time .tbc { margin-left: 0; }

/* a day the choir does not sing */
.handout .nochoir {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--hd-soft);
  font-style: normal;
  font-weight: 400;
}

/* a second time inside the first, e.g. the concert within an Evensong */
.handout .subnote {
  display: block;
  font-size: 0.86rem;
  font-weight: 400;
  font-style: italic;
  color: var(--hd-soft);
  margin-top: 0.15rem;
  white-space: normal;
}

.handout .anthem-line {
  display: block;
}

/* ---------- 8. the Three Days ---------- */

.handout .holyweek {
  border: 0.75px solid var(--hd-passion);
  background: #fdf9f9;
  padding: 0.9rem 1.15rem 0.55rem;
  margin: 0.8rem 0 0;
  break-inside: avoid;
}

.handout .holyweek h3 {
  font-size: 0.9rem;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--hd-passion);
  margin: 0 0 0.65rem;
  font-weight: 400;
  text-align: center;
}

.handout .holyweek th {
  border-bottom-color: var(--hd-passion);
  color: var(--hd-passion);
}

.handout .holyweek tbody tr:nth-child(even) td {
  background: #f9eeee;
}

/* ---------- 9. screen ---------- */

/*
  The calendar inside the site sits on white paper, headed like the printed sheet: a
  centred title, the season in italic under it, and the same thick-and-thin double rule.
  So the page a singer opens and the sheet they are handed look like one thing.
*/
.sheet {
  background: var(--hd-paper);
  border: 1px solid var(--hd-rule);
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.08);
  padding: 2rem 2.25rem 2.5rem;
  color: var(--hd-ink);
  font-family: var(--hd-serif);
}

.sheet-head {
  text-align: center;
  padding-bottom: 0.55rem;
  border-bottom: 2.5px solid var(--hd-ink);
  margin-bottom: 2px;
}

.sheet-head h1 {
  font-family: var(--hd-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--hd-ink);
  margin: 0;
  line-height: 1.08;
}

.sheet-head .season-line {
  font-size: 1.1rem;
  color: var(--hd-soft);
  font-style: italic;
  margin: 0.45rem auto 0;
  max-width: none;
}

.sheet-head-under {
  border-bottom: 0.75px solid var(--hd-ink);
  height: 3px;
  margin-bottom: 1.25rem;
}

.schedule-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* A plain link, but a big one: it is pressed by thumbs at arm's length. */
.past-toggle {
  display: inline-block;
  padding: 0.6rem 0.25rem;
  font-size: 1.05rem;
}

/*
  A phone. The four columns become four lines, because a table that scrolls sideways
  is a table nobody reads. The site's own stylesheet already turns table parts into
  blocks at this width; these rules give the schedule back its typography.
*/
@media (max-width: 40rem) {
  .handout .masthead h1,
  .sheet-head h1 { font-size: 1.9rem; }

  /* On a phone the frame would only eat into the width; the white paper stays. */
  .sheet {
    box-shadow: none;
    padding: 1.25rem 0.85rem 1.5rem;
  }
  .handout .yearband span { font-size: 1.35rem; letter-spacing: 0.35em; }

  .handout table,
  .handout tbody,
  .handout tr,
  .handout td {
    display: block;
    width: auto;
  }

  .handout thead { display: none; }

  .handout tbody tr {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--hd-rule);
  }

  .handout tbody tr:nth-child(even) td { background: transparent; }
  .handout tbody tr:nth-child(even) { background: var(--hd-stripe); }

  .handout td {
    border: none;
    padding: 0.05rem 0;
  }

  .handout .c-date {
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: var(--hd-soft);
    font-size: 0.95rem;
  }

  .handout tr.feast .c-date { color: var(--hd-soft); }

  .handout .c-day { font-size: 1.1rem; }

  .handout .c-anthem { font-style: italic; }

  .handout td:empty { display: none; }
}

/* ---------- 10. print ---------- */

@page {
  size: Letter;
  margin: 0.75in 0.8in;
}

@media print {
  html,
  html.handout-doc {
    font-size: 12.5pt;
    background: #fff;
  }

  html.handout-doc body {
    padding: 0;
  }

  /* Printing from the public page gives the same sheet: site chrome off, handout on. */
  .site-header,
  .site-footer,
  .schedule-tools,
  .past-toggle,
  .flash {
    display: none !important;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .sheet {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  body {
    background: #fff;
  }

  /* A season is never split across a page. */
  .handout .season,
  .handout .holyweek {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The turn of the year opens a fresh page, as 2026 opens the first one. */
  .handout .yearmark-block.pagebreak {
    break-before: page;
    page-break-before: always;
  }

  .handout .yearmark-block {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* A section of one or two rows stays on the page before it rather than
     opening a near-empty page of its own. */
  .handout .season--short {
    break-before: avoid;
    page-break-before: avoid;
  }
}