/* Printable Shabbat flyer: one US Letter page (8.5in × 11in = 816 × 1056 CSS px), in the website's own look:
   paper white and royal blue, Literata and Source Sans 3. A soft-cornered blue frame, the open book, the title,
   the fold of two pages under it, then the times. */
@page { size: letter; margin: 0; }

:root {
  --ink: #18212f; --ink-2: #3b4555; --muted: #687387;
  --bronze: #0b4ea2; --bronze-dk: #083d80; --bronze-lt: #9dbbe6;
  --stone: #eef3fa; --line: rgba(24, 33, 47, .14);
  --k: 1; /* content scale, set by print.js so everything fits on one page */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
body {
  background: #e4ebf5; color: var(--ink);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---------- Screen toolbar ---------- */
.toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--ink); color: #e7effa; font: 500 14px/1.2 "Source Sans 3", system-ui, sans-serif; }
.toolbar a { color: inherit; }
.tb-back { text-decoration: none; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-btn { white-space: nowrap; flex: none; }
.tb-back:hover { opacity: 1; }
.tb-note { opacity: .7; }
.tb-spacer { flex: 1; }
.tb-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid #cfe0f6; background: #cfe0f6; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: #fff; border-color: #fff; }
.tb-ghost { background: transparent; color: #e7effa; border-color: rgba(207, 224, 246, .5); }
.tb-ghost:hover { background: rgba(207, 224, 246, .12); color: #fff; border-color: #cfe0f6; }
@media (max-width: 560px) { .tb-note { display: none; } .toolbar { gap: 8px; padding: 8px 10px; } .tb-btn { padding: 0 12px; } }

/* ---------- Stage (screen preview, scaled to fit) ---------- */
.stage { padding: 28px 16px 48px; display: flex; justify-content: center; overflow: hidden; } /* keeps phones from zooming out before the sheet is scaled */
.sheet-wrap { width: calc(816px * var(--view, 1)); height: calc(1056px * var(--view, 1)); }
.sheet-wrap > .sheet { transform: scale(var(--view, 1)); transform-origin: top left; }

/* ---------- The sheet ---------- */
.sheet { position: relative; overflow: hidden; width: 816px; height: 1056px; background: #fff; box-shadow: 0 18px 50px rgba(24, 33, 47, .2); }
.frame { position: absolute; inset: 26px; border: 1.25px solid var(--bronze); border-radius: 22px; pointer-events: none; }
.bsd { position: absolute; right: 50px; top: 46px; font: 500 15px/1 "Frank Ruhl Libre", serif; color: var(--bronze-dk); }

.heading { position: absolute; left: 60px; right: 60px; top: 58px; text-align: center; }
.logo { display: block; height: 58px; width: auto; margin: 0 auto 10px; }
.shul { margin: 0; font: 400 17px/1.2 "Literata", Georgia, serif; color: var(--bronze-dk); letter-spacing: .02em; }
.title { margin: 14px 0 0; font: 300 54px/1.02 "Literata", Georgia, serif; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.date { margin: 8px 0 0; font: 400 17px/1.3 "Source Sans 3", sans-serif; color: var(--ink-2); }
.ring { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 0; width: 220px; color: var(--bronze); }
.ring::before, .ring::after { content: ""; flex: 1; height: 1px; background: var(--bronze-lt); }
.ring svg { width: 40px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

.content { position: absolute; left: 118px; right: 118px; top: 318px; bottom: 92px; display: flex; flex-direction: column; gap: calc(22px * var(--k)); }

/* A section: a Marcellus heading in bronze, then name and time on hairlines. */
.panel { break-inside: avoid; }
.panel-head { margin: 0 0 calc(4px * var(--k)); padding-bottom: calc(6px * var(--k)); border-bottom: 1.5px solid var(--bronze); font: 400 calc(23px * var(--k))/1.15 "Literata", Georgia, serif; color: var(--bronze-dk); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: calc(6.5px * var(--k)) 0; border-bottom: 1px solid var(--line); }
.rows li > span:first-child { font: 400 calc(16.5px * var(--k))/1.3 "Source Sans 3", sans-serif; color: var(--ink); }
.rows li > span + span { font: 400 calc(19px * var(--k))/1.2 "Literata", Georgia, serif; color: var(--ink); white-space: nowrap; text-align: right; }
.rows li > span + span.long { white-space: normal; font: 500 calc(14.5px * var(--k))/1.35 "Source Sans 3", sans-serif; max-width: 58%; }
.rows .with { display: block; font-size: .82em; color: var(--muted); }
.rows li.hl > span:first-child { font-weight: 600; }
.rows li.hl > span + span { color: var(--bronze-dk); }

.callout { break-inside: avoid; margin-top: calc(4px * var(--k)); padding: calc(12px * var(--k)) 20px; background: var(--stone); border-radius: 14px; text-align: center; }
.callout h2 { margin: 0 0 4px; font: 400 calc(19px * var(--k))/1.2 "Literata", Georgia, serif; color: var(--bronze-dk); }
.callout p { margin: 3px 0 0; font: 400 calc(15px * var(--k))/1.4 "Source Sans 3", sans-serif; color: var(--ink); }

.foot { position: absolute; left: 60px; right: 60px; bottom: 50px; text-align: center; white-space: nowrap; font: 500 12.5px/1 "Source Sans 3", sans-serif; color: var(--ink-2); letter-spacing: .02em; }

.empty-msg { margin: 24px 0; font: 400 20px/1.4 "Literata", Georgia, serif; text-align: center; color: var(--ink-2); }

/* ---------- Print / PDF ---------- */
@media print {
  body { background: #fff; }
  .toolbar { display: none !important; }
  .stage { padding: 0; display: block; }
  .sheet-wrap { width: auto; height: auto; }
  .sheet-wrap > .sheet { transform: none; }
  .sheet { box-shadow: none; width: 8.5in; height: 11in; }
}
body.pdf { background: #fff; }
body.pdf .toolbar { display: none; }
body.pdf .stage { padding: 0; display: block; }
body.pdf .sheet { box-shadow: none; }

/* Lining figures everywhere (the "font" shorthand above resets this, so set it last). */
.sheet, .sheet * { font-variant-numeric: lining-nums !important; }