/* ===========================================================================
   Illuminated — the Hebrew manuscript
   ---------------------------------------------------------------------------
   From the fourteenth-century Haggados: vellum, iron-gall ink, rubric red and
   azure blue, gold where it mattered. Four devices carry the whole look and
   all four are doing a job the board already needs done:

     the arch        frames the masthead the way a manuscript frames an
                     opening word, so the top of the page is an entrance
     the initial word  each service named large in Hebrew, with the English
                     dropped to the small hand beneath it
     penwork         fine vine-and-dot filigree trailing under each heading,
                     the flourish a scribe ran out from a decorated letter
     the rubric      red for everything that is an instruction rather than
                     text — exactly what rubrication was invented for

   No figures, no drolleries. A badly drawn beast is worse than none, and the
   penwork is where the beauty of these pages actually lives.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&display=swap');

/* Noa Shalev, by Noa Shalev, from alefalefalef.co.il. Free licence: web
   embedding is allowed on one domain up to 10,000 page views a month, and it
   requires registering on their site. The files are shipped as-is — the
   licence forbids converting, subsetting or otherwise modifying them.
   It ships in one weight only, so never ask it for bold: the browser would
   synthesise a slant-and-smear that ruins a calligraphic face. */
/* Yiddishkeit FM Bold, from fontimonim.co.il — licensed by the shul.
   Served as the shipped .otf: the licence forbids converting the file, and
   at 44KB a woff2 would not have bought much anyway.

   It carries 51 Hebrew letters, the digits, $ and punctuation, and NO LATIN
   AT ALL. Never set it on anything English — every glyph would silently fall
   through to the next font in the stack and the line would come out mixed. */
@font-face {
  font-family: 'Yiddishkeit FM';
  src: url(../fonts/yiddishkeit-bold-fm.otf) format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noa Shalev';
  src: url(../fonts/noa-shalev-regular-AlefAlefAlef.woff2) format('woff2'),
       url(../fonts/noa-shalev-regular-AlefAlefAlef.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Two Hebrew faces, two different jobs.

     The initial word in the reference manuscripts is heavy and black — the
     fine work happens in the penwork around the letter, not inside it. So
     the display word is Yiddishkeit Bold, which is exactly that letter.
     Frank Ruhl 900 stays behind it as the fallback.

     Noa Shalev (alefalefalef.co.il) is calligraphic and light. That is the
     wrong thing for a 44px initial word and the right thing for the honor
     names in the rows, where its elegance shows and the weight is carried
     by the English beside it. */
  --initial: 'Yiddishkeit FM', 'Frank Ruhl Libre', serif;
  --scribe:  'Noa Shalev', 'Frank Ruhl Libre', serif;

  --ground:     #e9dfc8;   /* vellum */
  --panel:      #f3ecda;
  --ink:        #241c12;   /* iron gall, brown-black */
  --ink-soft:   #5d4e39;
  --ink-faint:  #8b7a5e;
  --rule:       #c9b995;
  --rule-firm:  #a8946c;
  --indigo:     #a5302a;   /* rubric */
  --indigo-lift:#e4d4b4;
  --seal:       #a8862c;   /* gold leaf */
  --seal-wash:  #e2d3ab;
  --outbid:     #a5302a;
  --focus:      #2c4784;

  --azure:      #2c4784;
  --page:       54rem;     /* a codex page, not a broadsheet */
}

body {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 252, 242, 0.55), transparent 60%),
    var(--ground);
  background-attachment: fixed;
}

/* ------------------------------------------------------------- the arch */

.masthead {
  position: relative;
  text-align: center;
  padding: 2.5rem 2rem 1.5rem;
  border: 2px solid var(--seal);
  border-radius: 46% 46% 3px 3px / 26% 26% 3px 3px;
  box-shadow: inset 0 0 0 5px var(--ground), inset 0 0 0 6px var(--azure);
  margin-bottom: 1.25rem;
}

/* A magen david at the head of the frame, drawn as two open triangles so it
   reads as penwork rather than a solid badge. Gold, like the arch rule. */
.masthead::before {
  content: '';
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.6rem;
  background-color: var(--seal);
  -webkit-mask-image: url(../art/magen.svg); mask-image: url(../art/magen.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

.masthead .shul {
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--indigo);
  letter-spacing: 0.055em;
}

/* The Hebrew leads and the English annotates it, the same hierarchy the
   section headings use. The h1 keeps its real text for anyone reading the
   markup; it just stops being the loudest thing in the frame. */
.masthead h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.masthead h1::before {
  content: 'כיבודים ליום כיפור תשפ״ז';
  display: block;
  font-family: var(--initial);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  line-height: 1.08;
  direction: rtl;
  color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

.masthead .dateline { color: var(--ink-soft); }
.masthead .lede { margin-inline: auto; color: #3d3121; font-size: 1.0625rem; }

.tally { justify-content: center; border-top-color: var(--rule-firm); }
.tally .figure { font-weight: 400; color: var(--ink); }
.tally .caption { color: var(--ink-soft); font-style: italic; font-family: var(--serif); }

.nudge {
  margin-inline: auto;
  text-align: center;
  color: var(--indigo);
  max-width: 48ch;
}

.notice { background: var(--panel); border-color: var(--rule-firm); }

/* Gold leaf does not flip. The tote becomes lettered gold on vellum. */
.flap {
  background: transparent;
  color: var(--seal);
  box-shadow: none;
  font-size: 1.625rem;
  min-width: auto;
  padding: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.flap::after { display: none; }
.flap.turning { animation: none; }

/* ------------------------------------------------------------ the jumps */

.jumps {
  background: rgba(233, 223, 200, 0.94);
  border-bottom: 1px solid var(--rule-firm);
  justify-content: center;
}
.jumps a { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); }
.jumps a:hover { background: var(--indigo-lift); color: var(--indigo); }

/* ----------------------------------------------- the initial word, per service

   The Hebrew is set as decorative content rather than markup: the English
   heading beside it is the real one, and this is the illuminator's word. */

.band { border-left: 0; padding-left: 0; padding-top: 2rem; }
.band::before { display: none; }

.band > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-left: 0.9rem;
}

.band > h2::before {
  display: block;
  font-family: var(--initial);
  font-weight: 700;
  font-style: normal;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
  direction: rtl;
  margin-bottom: 0.15rem;
  margin-left: -0.9rem;
}

#part-kolnidrei > h2::before { content: 'כל נדרי'; }
#part-shacharis > h2::before { content: 'שחרית'; }
#part-mincha    > h2::before { content: 'מנחה'; }
#part-neilah    > h2::before { content: 'נעילה'; }
#part-motzei    > h2::before { content: 'מוצאי יום כיפור'; }

.band > .when {
  align-self: flex-end;
  font-family: var(--serif);
  font-style: italic;
  color: var(--indigo);
  margin-left: 0.6rem;
}

/* Penwork running under each heading, the way a flourish trails from a
   decorated letter. Tiled, so it fills whatever width it is given. */
.band > .ledger { position: relative; margin-top: 1.4rem; }

.band > .ledger::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: 0;
  right: 0;
  height: 0.75rem;
  background-color: var(--azure);
  opacity: 0.55;
  -webkit-mask-image: url(../art/filigree.svg); mask-image: url(../art/filigree.svg);
  -webkit-mask-repeat: repeat-x;  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;   mask-size: auto 100%;
}

/* ---------------------------------------------------------- the text block */

.ledger { border-top: 1px solid var(--rule-firm); }
.row { border-bottom: 1px solid var(--rule); padding: 0.6rem 0; }

.row-title { font-weight: 400; font-size: 1.125rem; }
.row-title .he { font-family: var(--scribe); color: var(--azure); font-size: 1.0625rem; }
.row-note { font-family: var(--serif); font-style: italic; }
.row-prices { font-family: var(--serif); }
.row-prices b { color: var(--ink); font-weight: 600; }

.state-amount { font-weight: 400; color: var(--seal); }
.state-who { color: var(--ink-soft); }

/* Rubrication: red is for instruction, never for text. */
.state-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--indigo);
}
.state-label.open { color: var(--indigo); }

.row.is-sealed .row-title,
.row.is-sealed .state-amount { color: var(--seal); }
.row.just-changed { background: rgba(165, 48, 42, 0.12); }

.row-note .more { color: var(--azure); text-decoration-color: var(--rule-firm); }
.row-note .more:hover { text-decoration-color: var(--azure); }

/* ---------------------------------------------------------------- buttons */

.btn {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-firm);
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}
.btn:hover { background: var(--indigo-lift); border-color: var(--seal); color: var(--indigo); }
.btn.ghost { color: var(--ink); border-color: var(--rule-firm); }
.btn.ghost:hover { background: var(--indigo-lift); border-color: var(--seal); }

.taken-mark {
  border: 1px solid var(--seal);
  background: var(--seal-wash);
  color: var(--seal);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: none;
  transform: none;
  opacity: 1;
}

/* ----------------------------------------------------------------- sheets */

dialog {
  background: var(--panel);
  border: 2px solid var(--seal);
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--azure);
}
dialog::backdrop { background: rgba(36, 28, 18, 0.55); }

.sheet h2 { font-weight: 400; color: var(--ink); }
.sheet .he { font-family: var(--scribe); color: var(--azure); }
.sheet .standing { color: var(--indigo); font-family: var(--serif); font-style: italic; }
.sheet .prose p { color: #3d3121; }
.sheet .sources h3 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--indigo); }

.mine { background: var(--panel); border-color: var(--rule-firm); }
.foot { border-top-color: var(--rule-firm); margin-inline: auto; text-align: center; }

@media (max-width: 720px) {
  .masthead { padding: 1.75rem 1rem 1.1rem; border-radius: 34% 34% 3px 3px / 12% 12% 3px 3px; }
  .masthead h1::before { font-size: clamp(1.625rem, 8vw, 2.25rem); }
  .masthead::before { width: 1.75rem; height: 1.75rem; margin-bottom: 0.45rem; }
  .masthead .shul { font-size: 1.0625rem; }
  .masthead .lede { text-align: left; }
  .jumps { justify-content: flex-start; }
  .band > h2::before { font-size: 2.125rem; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .foot { text-align: left; }
}