/* silveryad.com
   Screen: a plain, readable reference site.
   Print:  as compact as possible -- nav and chrome disappear, the logo moves
           into the left margin, and text tightens up. Reading pages are meant
           to be printed and carried, so print is the primary medium here. */

:root {
  --ink: #1f2328;
  --muted: #6b7280;
  --rule: #e3e6ea;
  --accent: #2f5d7c;
  --tint: #f4f7f9;
  --double: #f0f0f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 16px/1.55 Georgia, "Times New Roman", serif;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---------------------------------------------------------------- header */

.masthead {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}
.masthead .wrap { padding-top: 1.25rem; padding-bottom: 0; }
.masthead img { width: 210px; max-width: 60vw; height: auto; display: block; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav a { color: var(--muted); text-decoration: none; padding: .55rem 0; display: inline-block; }
.nav a:hover { color: var(--accent); }
.nav a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

h1 { font-size: 1.6rem; font-weight: normal; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; font-weight: normal; margin: 2rem 0 .6rem; color: var(--accent); }
.lede { color: var(--muted); margin: 0 0 2rem; max-width: 42rem; }

a { color: var(--accent); }

.note {
  background: #fffbe8;
  border-left: 3px solid #e0c060;
  padding: .75rem 1rem;
  margin: 1.5rem 0;
  font-size: .9rem;
}

/* ---------------------------------------------------------------- tables */

table { border-collapse: collapse; width: 100%; font-size: .87rem; }

/* Each book is its own table, so without a fixed layout every book derives its
   own column widths from its own content and the five tables fail to line up. */
.table-scroll { overflow-x: auto; }
.parshas { table-layout: fixed; min-width: 46rem; }
.parshas .c-name  { width: 10.5rem; }
.parshas .c-num   { width: 3.4rem; }
.parshas .c-rank  { width: 3.2rem; }
.parshas .c-aliya { width: 2.3rem; }
.parshas .c-links { width: auto; }
caption { text-align: left; font-size: 1rem; color: var(--accent); padding: 1.5rem 0 .5rem; }
th, td { padding: .28rem .45rem; border-bottom: 1px solid var(--rule); text-align: right; }
th { font-weight: normal; color: var(--muted); font-size: .78rem; white-space: nowrap; }
th.name, td.name { text-align: left; }
td.rank { color: var(--muted); font-size: .8rem; padding-left: 0; }
tr.double td { background: var(--double); color: var(--muted); }
tr.double td.name a { color: var(--muted); }
td.aliya { font-variant-numeric: tabular-nums; color: var(--muted); }
.links { white-space: nowrap; font-size: .78rem; }
.links .sep { color: var(--rule); margin: 0 .2rem; }
.fnref { text-decoration: none; padding-left: .1rem; }

.footnote {
  margin-top: 2rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--muted);
  max-width: 46rem;
}

/* -------------------------------------------------------------- schedule */

.month { margin: 2rem 0 0; }
.month h2 { margin-bottom: .75rem; }
.readings { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.reading-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: .5rem .7rem;
  background: var(--tint);
}
.reading-card:target { border-left-color: #c05621; background: #fdf3e8; }
.reading-card .when { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.reading-card .title { display: block; margin: .1rem 0 .3rem; text-decoration: none; font-size: 1rem; }
.reading-card .he { color: var(--muted); font-size: .9rem; }
.reading-card .alt { font-size: .78rem; }
.reading-card .sep { color: var(--rule); margin: 0 .15rem; }

/* --------------------------------------------------------- reading pages */

.reading-toolbar {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-family: system-ui, sans-serif;
  font-size: .82rem;
  margin-bottom: 1rem;
}

/* The54 reading output (ttext.html_block_display) sets font sizes per span but
   no line-height, so it depends on the browser default of roughly 1.2 -- that
   is how it rendered as a standalone page on astoria. Inheriting this site's
   body line-height of 1.55 pushes the verse lines noticeably further apart, so
   the reading container resets both line-height and family to defaults. */
.reading-content {
  font-family: initial;
  line-height: normal;
}

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

.print-logo { display: none; }

@media print {
  /* Left margin is wider than the others to leave room for the rotated logo. */
  @page { margin: 8mm 7mm 7mm 15mm; }

  html, body { font-size: 10pt; }
  .wrap { max-width: none; margin: 0; padding: 0; }

  .masthead, .nav, .reading-toolbar, .note, .lede { display: none !important; }

  /* Branding in the left page margin, reading bottom-to-top.
     The container reserves a fixed column and the image is rotated inside it,
     rather than rotating the positioned element itself -- a shrink-to-fit box
     that is also transformed lands unpredictably across print engines.
     Chrome paints position:fixed on the first printed page only; Firefox
     repeats it on every page. */
  .print-logo {
    display: block !important;
    position: fixed;
    left: 0;
    bottom: 6mm;
    width: 7mm;
    height: 48mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .print-logo img {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44mm;
    height: auto;
    opacity: .6;
    transform: rotate(-90deg);
    transform-origin: 0 0;
  }

  h1 { font-size: 12pt; margin: 0 0 .3rem; }
  h2 { font-size: 10.5pt; margin: .6rem 0 .25rem; }

  table { font-size: 8pt; }
  th, td { padding: .1rem .3rem; }
  caption { padding: .5rem 0 .2rem; font-size: 9pt; }
  tr, .reading-card, .month { break-inside: avoid; }

  .readings { grid-template-columns: repeat(3, 1fr); gap: 2mm; }
  .reading-card { background: none; border-left-width: 2px; padding: 1mm 2mm; }
  .reading-card .alt { display: none; }

  a { color: inherit; text-decoration: none; }
}