/* 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 */

.siteinfo {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  color: var(--muted);
}
.siteinfo .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
}
.siteinfo a { color: var(--muted); }
.siteinfo a:hover { color: var(--accent); }

.print-logo { display: none; }

@media print {
  /* Roughly the browser's own default (~10mm), so these sheets sit on the page
     like any other printout. Only the left margin is widened, to leave room for
     the rotated logo. Declaring @page at all overrides the browser default, so
     tightening these further makes the margins look wrong rather than compact. */
  @page { margin: 10mm 10mm 10mm 17mm; }

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

  /* Print sheets carry the rotated logo in the margin instead of chrome. */
  .masthead, .nav, .reading-toolbar, .note, .lede, .siteinfo { 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; }
}