/* Printable Shabbat flyer: one US Letter page (8.5in × 11in = 816 × 1056 CSS px), in the website's own
   limestone, bronze and Marcellus: a double hairline frame, the tree, the title, then the times. */
@page { size: letter; margin: 0; }

:root {
  --ink: #1e1b17; --ink-2: #4a4339; --muted: #7a7063;
  --bronze: #8c6a3f; --bronze-dk: #6f532f; --bronze-lt: #c9a978;
  --stone: #f1e9dc; --line: rgba(30, 27, 23, .16);
  --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: #e9e2d6; color: var(--ink);
  font-family: "Figtree", 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: #efe6d6; font: 500 14px/1.2 "Figtree", 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 #e7d6b8; background: #e7d6b8; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: #fff; border-color: #fff; }
.tb-ghost { background: transparent; color: #efe6d6; border-color: rgba(231, 214, 184, .5); }
.tb-ghost:hover { background: rgba(231, 214, 184, .12); color: #fff; border-color: #e7d6b8; }
@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: #fffdf9; box-shadow: 0 18px 50px rgba(30, 27, 23, .22); }
.frame { position: absolute; inset: 26px; border: 1px solid var(--bronze); pointer-events: none; }
.frame::after { content: ""; position: absolute; inset: 5px; border: .75px solid var(--bronze-lt); }
.bsd { position: absolute; right: 50px; top: 46px; font: 500 15px/1 "David Libre", serif; color: var(--bronze-dk); }

.heading { position: absolute; left: 60px; right: 60px; top: 58px; text-align: center; }
.logo { display: block; height: 64px; width: auto; margin: 0 auto 10px; }
.shul { margin: 0; font: 400 17px/1.2 "Marcellus", serif; color: var(--bronze-dk); letter-spacing: .02em; }
.title { margin: 14px 0 0; font: 400 56px/1.02 "Marcellus", serif; color: var(--ink); white-space: nowrap; }
.date { margin: 8px 0 0; font: 400 17px/1.3 "Figtree", sans-serif; color: var(--ink-2); }
.ring { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 0; width: 200px; }
.ring::before, .ring::after { content: ""; flex: 1; height: 1px; background: var(--bronze-lt); }
.ring i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bronze); }

.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: 1px solid var(--ink); font: 400 calc(23px * var(--k))/1.15 "Marcellus", 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 "Figtree", sans-serif; color: var(--ink); }
.rows li > span + span { font: 400 calc(19px * var(--k))/1.2 "Marcellus", 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 "Figtree", 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); text-align: center; }
.callout h2 { margin: 0 0 4px; font: 400 calc(19px * var(--k))/1.2 "Marcellus", serif; color: var(--bronze-dk); }
.callout p { margin: 3px 0 0; font: 400 calc(15px * var(--k))/1.4 "Figtree", 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 "Figtree", sans-serif; color: var(--ink-2); letter-spacing: .02em; }

.empty-msg { margin: 24px 0; font: 400 20px/1.4 "Marcellus", 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; }