/* ===========================================================================
   Moria — site styles
   Palette and type continue the almanac: indigo ink, brass accent, Cormorant
   Garamond over IBM Plex.  The site and the instruments should read as one
   body of work.
   =========================================================================== */
:root{
  --ground:#E9EAEE;
  --panel:#F4F5F8;
  --panel-2:#DEE1E8;
  --ink:#161C2B;
  --ink-2:#414B63;
  --ink-3:#58627A;
  --rule:#C6CBD8;
  --rule-soft:#D8DCE4;
  --brass:#7F5D0B;
  --lunar:#3F5480;
  --disc-full:#FBFBFD;
  --disc-new:#232B41;
  --shadow:0 1px 2px rgba(22,28,43,.07), 0 10px 30px -22px rgba(22,28,43,.55);
  --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1120;
    --panel:#141A2C;
    --panel-2:#1D2438;
    --ink:#E2E6EF;
    --ink-2:#AEB7CB;
    --ink-3:#7C87A0;
    --rule:#2A3248;
    --rule-soft:#212940;
    --brass:#D6AB52;
    --lunar:#9FB2D8;
    --disc-full:#EDF1FA;
    --disc-new:#151C31;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1120; --panel:#141A2C; --panel-2:#1D2438;
  --ink:#E2E6EF; --ink-2:#AEB7CB; --ink-3:#7C87A0;
  --rule:#2A3248; --rule-soft:#212940;
  --brass:#D6AB52; --lunar:#9FB2D8;
  --disc-full:#EDF1FA; --disc-new:#151C31;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--panel);padding:8px 12px;z-index:99;border:1px solid var(--rule)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--panel);
  border-bottom:1px solid var(--rule)}
.bar{max-width:1080px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.wordmark{font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;font-weight:600;
  text-decoration:none;letter-spacing:-.01em;line-height:1;display:flex;align-items:baseline;gap:11px}
.wordmark span{font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;font-weight:400;
  color:var(--ink-3);letter-spacing:.02em}
.topbar nav{margin-left:auto;display:flex;gap:3px;flex-wrap:wrap}
.topbar nav a{text-decoration:none;color:var(--ink-2);font-size:14px;padding:5px 10px;border-radius:3px}
.topbar nav a:hover{background:var(--panel-2);color:var(--ink)}
.topbar nav a.on{color:var(--brass);font-weight:500}

.datestrip{border-top:1px solid var(--rule-soft);background:var(--ground)}
.datestrip{display:flex;gap:0;max-width:1080px;margin:0 auto;padding:0 22px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  flex-wrap:wrap;align-items:center}
.datestrip span{padding:6px 0}
.datestrip span + span{margin-left:14px;padding-left:14px;border-left:1px solid var(--rule)}
.ds-bib abbr{color:var(--brass);text-decoration:none;border-bottom:1px dotted var(--rule)}
.ds-next a{color:var(--ink-2);text-decoration:none}
.ds-next a:hover{color:var(--brass)}

/* ---------- language switcher ---------- */
/* The switcher shows a flag rather than a two-letter code.  A flag is a country
   and not a language, so the readable name stays on the element for a screen
   reader and in the tooltip; only the letters are hidden.  Which flag belongs
   to which button is read off hreflang, and for the button of the page you are
   already on, off the lang of the document itself — never off its position,
   because a page that lacks one translation has one button fewer. */
.langs{display:flex;gap:2px;align-items:center;border:1px solid var(--rule);
  border-radius:3px;padding:2px}
.langs a,.langs span{display:block;width:28px;height:20px;padding:0;font-size:0;
  line-height:0;border-radius:2px;text-decoration:none;
  background-color:transparent;background-repeat:no-repeat;
  background-position:center 3px;background-size:18px auto}
.langs a[hreflang="en"],html[lang="en"] .langs .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2030%22><clipPath%20id=%22a%22><path%20d=%22M30%2015h30v15zv15H30zH0V15zV0h30z%22/></clipPath><rect%20width=%2260%22%20height=%2230%22%20fill=%22%23012169%22/><path%20d=%22M0%200l60%2030m0-30L0%2030%22%20stroke=%22%23FFF%22%20stroke-width=%226%22/><path%20d=%22M0%200l60%2030m0-30L0%2030%22%20clip-path=%22url%28%23a%29%22%20stroke=%22%23C8102E%22%20stroke-width=%224%22/><path%20d=%22M30%200v30M0%2015h60%22%20stroke=%22%23FFF%22%20stroke-width=%2210%22/><path%20d=%22M30%200v30M0%2015h60%22%20stroke=%22%23C8102E%22%20stroke-width=%226%22/></svg>")}
.langs a[hreflang="nl"],html[lang="nl"] .langs .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%209%206%22><rect%20width=%229%22%20height=%226%22%20fill=%22%2321468B%22/><rect%20width=%229%22%20height=%224%22%20fill=%22%23FFF%22/><rect%20width=%229%22%20height=%222%22%20fill=%22%23AE1C28%22/></svg>")}
.langs a[hreflang="es"],html[lang="es"] .langs .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%209%206%22><rect%20width=%229%22%20height=%226%22%20fill=%22%23AA151B%22/><rect%20y=%221.5%22%20width=%229%22%20height=%223%22%20fill=%22%23F1BF00%22/></svg>")}
.langs a{opacity:.45;transition:opacity .13s,background-color .13s}
.langs a:hover,.langs a:focus-visible{opacity:1;background-color:var(--panel-2)}
.langs .on{opacity:1;box-shadow:inset 0 -2px 0 var(--brass)}
/* If the reader has forced their own colours, an image conveys nothing: give
   the letters back. */
@media (forced-colors: active){
  .langs a,.langs span{font-size:11.5px;line-height:1;width:auto;height:auto;
    padding:4px 7px;background-image:none;opacity:1;
    font-family:"IBM Plex Mono",monospace}
}

/* ---------- day and night ---------- */
/* The stylesheet already carries both palettes: the light one on :root and the
   dark one behind prefers-color-scheme, with data-theme allowed to overrule
   either.  This button is only a way of setting that attribute by hand.  It
   shows the view you would move to and not the one you are in — a moon by day,
   a sun by night — and it is hidden until its script is running, because a
   switch that does nothing is worse than no switch. */
.topend{display:flex;align-items:center;gap:6px;margin-left:6px;flex:1 1 auto;min-width:0}
.themesw{appearance:none;display:flex;align-items:center;justify-content:center;
  width:28px;height:26px;padding:0;cursor:pointer;
  color:var(--ink-3);background:transparent;
  border:1px solid var(--rule);border-radius:3px;
  transition:color .13s,background-color .13s,border-color .13s}
.themesw[hidden]{display:none}

/* ---------- steun ----------
   De enige plaats op deze site die de lezer om iets vraagt.  Hij staat aan het
   rechteruiteinde van de regel die de vlaggen en de dag-en-nachtknop al draagt,
   en niet als veertiende item in een menu dat toch al over twee regels loopt.
   Verder vraagt niets: geen banner, geen verwijzing in de voettekst, geen
   mededeling op een instrument.  Messing op vlak in plaats van een gevulde
   knop: hij hoort zichtbaar te zijn en niet te roepen. */
.steunknop{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;font-size:13px;line-height:1;white-space:nowrap;
  color:var(--brass);background:var(--panel-2);
  border:1px solid var(--rule);border-radius:999px;padding:6px 12px;
  transition:color .13s,background-color .13s,border-color .13s}
.steunknop:hover,.steunknop:focus{color:var(--ink);border-color:var(--brass)}
.steunknop svg{width:12px;height:12px;fill:currentColor;flex:none}

.steun-routes{display:grid;gap:16px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steun-route{border:1px solid var(--rule);border-radius:4px;padding:16px 18px;
  background:var(--panel);
  /* Twee routes naast elkaar hebben zelden even lange tekst; de knoppen horen
     toch op één lijn te staan. */
  display:flex;flex-direction:column}
.steun-route h2{margin:0 0 6px;font-size:16px}
.steun-route p{font-size:14px;margin:0 0 14px}
/* Op de bladzijde zelf is hij wél gevuld: daar is hij het onderwerp. */
.steun-route .steunknop{margin-left:0;margin-top:auto;align-self:flex-start;
  font-size:14px;padding:9px 15px;
  background:var(--brass);border-color:var(--brass);color:var(--panel)}
.steun-route .steunknop:hover,.steun-route .steunknop:focus{
  background:var(--ink);border-color:var(--ink);color:var(--panel)}
.steun-klein{font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--rule-soft);
  padding-top:14px;margin-top:24px}
.themesw:hover{color:var(--brass);background:var(--panel-2)}
.th-i{display:block;width:16px;height:16px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:16px 16px;mask-size:16px 16px;
  -webkit-mask-image:var(--th-glyph);mask-image:var(--th-glyph)}
/* The label is the button's accessible name, so the one that does not apply is
   taken out of the document rather than merely hidden from sight. */
.th-n,.th-d{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
:root{--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20.6%2015.2A9%209%200%200%201%208.8%203.4%209%209%200%201%200%2020.6%2015.2Z%22/%3E%3C/svg%3E")}
.themesw .th-d{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224.1%22/%3E%3Cpath%20d=%22M12%202.2v2.5M12%2019.3v2.5M2.2%2012h2.5M19.3%2012h2.5M5.1%205.1l1.8%201.8M17.1%2017.1l1.8%201.8M18.9%205.1l-1.8%201.8M6.9%2017.1l-1.8%201.8%22/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) .themesw .th-n{display:none}
  :root:not([data-theme="light"]) .themesw .th-d{display:inline}
}
:root[data-theme="dark"]{--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224.1%22/%3E%3Cpath%20d=%22M12%202.2v2.5M12%2019.3v2.5M2.2%2012h2.5M19.3%2012h2.5M5.1%205.1l1.8%201.8M17.1%2017.1l1.8%201.8M18.9%205.1l-1.8%201.8M6.9%2017.1l-1.8%201.8%22/%3E%3C/svg%3E")}
:root[data-theme="dark"] .themesw .th-n{display:none}
:root[data-theme="dark"] .themesw .th-d{display:inline}

/* ---------- a verse, openable ----------
   Fifty of these can stand on one page, so they are quiet: the colour of the
   sentence they are in, with a dotted rule under them that says there is
   something behind the words.  The date strip has done it this way from the
   beginning; this follows it. */
a.vref{color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--rule);
  transition:color .13s,border-color .13s}
a.vref:hover,a.vref:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}
blockquote cite a.vref{color:inherit}

/* ---------- the contact form ----------
   Plain fields on the page's own ground, squared off like everything else.
   The trap is the second line of defence and the reader never sees it; it is
   taken out of the flow rather than merely hidden, so that a screen reader
   does not read it out either — and it carries a label all the same, for the
   one visitor whose browser shows it anyway. */
.cform{max-width:var(--measure);margin:0}
.cf-row{display:flex;flex-direction:column;gap:5px;margin:0 0 16px}
.cf-row label{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.cform input[type=text],.cform input[type=email],.cform textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);border-radius:2px;padding:9px 11px;width:100%;
  transition:border-color .13s}
.cform textarea{line-height:1.6;resize:vertical;min-height:150px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--brass)}
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-send{margin:0}
.cf-note{font-size:13px;line-height:1.6;color:var(--ink-3);margin:14px 0 0;
  max-width:var(--measure)}

/* ---------- the language offer ---------- */
.langoffer{background:var(--brass);color:var(--panel)}
.langoffer[hidden]{display:none}
.lo-inner{max-width:1080px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;
  gap:8px 18px;flex-wrap:wrap;font-size:13.5px}
.lo-go{color:var(--panel);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.lo-no{background:transparent;border:1px solid color-mix(in srgb,var(--panel) 55%,transparent);
  color:var(--panel);border-radius:2px;padding:3px 9px;font-size:12.5px;cursor:pointer;
  font-family:inherit;margin-left:auto}
.lo-no:hover{background:color-mix(in srgb,var(--panel) 16%,transparent)}

/* ---------- shell ---------- */
main{max-width:1080px;margin:0 auto;padding:44px 22px 72px;
  display:flex;flex-direction:column;gap:44px}
main.wide{max-width:1180px}
.prose{max-width:var(--measure)}
.prose.full{max-width:none}

h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  letter-spacing:-.012em;text-wrap:balance;margin:0}
h1{font-size:clamp(31px,4.6vw,44px);line-height:1.06}
h2{font-size:27px;line-height:1.15;margin:38px 0 10px}
h3{font-size:20px;margin:26px 0 6px}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose table{margin:0 0 15px}
.prose > h1 + p{margin-top:14px}
.prose a{color:var(--brass);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brass) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--brass)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:0 0 6px}
.lede{font-size:18.5px;color:var(--ink-2);line-height:1.55}
.prose blockquote{border-left:2px solid var(--brass);margin-left:0;padding:2px 0 2px 18px;
  color:var(--ink-2);font-style:italic}
.prose code{font-family:"IBM Plex Mono",monospace;font-size:13.5px;
  background:var(--panel-2);padding:1px 5px;border-radius:2px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
.grk,.heb{font-size:1.06em}
.heb{direction:rtl;unicode-bidi:isolate}

/* ---------- home ---------- */
.intro{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center}
.intro.nopic{grid-template-columns:1fr}
.intro .portrait{margin:0}
.intro .portrait img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:50%;border:2px solid var(--brass);box-shadow:var(--shadow)}
.intro .portrait figcaption{margin-top:9px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
.introtext{max-width:var(--measure)}
.introtext h1{margin:0 0 14px}
.introtext p{margin:0 0 14px}
.introtext a{color:var(--brass);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--brass) 40%,transparent)}
.introtext a:hover{border-bottom-color:var(--brass)}
.introtext .sig{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:18px}
@media (max-width:760px){
  .intro{grid-template-columns:1fr;gap:24px;align-items:start}
  .intro .portrait{max-width:150px}
}

.thesis{display:flex;flex-direction:column;gap:16px;max-width:var(--measure)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
.thesis h1 em{font-style:italic;color:var(--brass)}

.instruments{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.inst{background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--brass);
  border-radius:2px;padding:22px 24px 20px;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;box-shadow:var(--shadow);transition:transform .13s,border-color .13s}
.inst:hover{transform:translateY(-2px);border-color:var(--ink-3);border-top-color:var(--brass)}
.inst .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.inst h2{margin:0;font-size:26px}
.inst p{margin:0;color:var(--ink-2);font-size:14.5px}
.inst .facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.inst .go{margin-top:auto;padding-top:12px;color:var(--brass);font-size:14px;font-weight:500}

/* A block that must escape the 68ch reading measure even when the page has
   been wrapped in .prose.  main is centred at 1080px with 22px of padding, so
   1036px is exactly its content width, measured from the same left edge. */
.breakout{max-width:none;width:min(1036px,calc(100vw - 44px))}

/* the proverb of the day, on the front page */
.verse{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--brass);
  max-width:var(--measure)}
.verse blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(20px,2.4vw,24px);line-height:1.32;font-style:italic;
  color:var(--ink);text-wrap:pretty}
.verse figcaption{margin-top:10px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.verse figcaption a{color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ink-3) 40%,transparent)}
.verse figcaption a:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* the two counters: to the sabbath, and to the next appointed time */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cd-card{background:var(--panel);border:1px solid var(--rule);
  border-top:2px solid var(--brass);border-radius:2px;padding:16px 20px 15px;
  box-shadow:var(--shadow)}
.cd-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.cd-big{margin-top:7px;font-family:"IBM Plex Mono",monospace;
  font-size:clamp(21px,2.6vw,27px);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.cd-big.on{color:var(--brass)}
.cd-sub{margin-top:7px;font-size:13.5px;color:var(--ink-2)}
.cd-sub .heb{font-size:1.12em}
.cd-when{margin-top:3px;font-size:13px;color:var(--ink-3)}
.cd-note{margin:7px 0 0;font-size:13.5px;color:var(--ink-2)}
.cd-foot{margin:11px 0 0;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.06em;color:var(--ink-3)}
.cd-ask{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--ink-3);
  border-bottom:1px solid color-mix(in srgb,var(--ink-3) 40%,transparent)}
.cd-ask:hover{color:var(--brass);border-bottom-color:var(--brass)}
.cd-ask[disabled]{opacity:.5;cursor:default}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:2px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
  padding:11px 15px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:bottom}
td{padding:11px 15px;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
td .caveat{display:block;color:var(--ink-3);font-size:13px;margin-top:3px}

/* ---------- article cards ---------- */
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.acards.wide-cards{grid-template-columns:1fr}
.acard{background:var(--panel);border:1px solid var(--rule);border-radius:2px;
  padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:7px;
  transition:border-color .13s}
.acard:hover{border-color:var(--brass)}
.acard h3{margin:0;font-size:22px}
.acard p{margin:0;color:var(--ink-2);font-size:14.5px}
.ameta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase}
.tag{border:1px solid var(--rule);border-radius:2px;padding:1px 6px;color:var(--ink-3)}
article.prose .ameta{margin-bottom:14px}
article.prose h1{margin-bottom:12px}

.around{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  border-top:1px solid var(--rule);padding-top:22px;max-width:var(--measure)}
.around a{text-decoration:none;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;
  font-size:20px;line-height:1.2;display:flex;flex-direction:column;gap:4px}
.around a span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.around a:hover{color:var(--brass)}
.around .next{text-align:right}

/* ---------- call to action / app frames ---------- */
.launch{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 6px}
.btn,.prose a.btn{display:inline-block;background:var(--brass);color:var(--panel);
  text-decoration:none;border:1px solid var(--brass);border-bottom-color:var(--brass);
  border-radius:2px;padding:11px 20px;font-size:15px;font-weight:500}
.btn:hover,.prose a.btn:hover{filter:brightness(1.08)}
.btn.ghost,.prose a.btn.ghost{background:transparent;color:var(--brass)}
.note{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}

/* Moria op het apparaat bewaren.  De knop staat er alleen als er iets te
   bewaren valt; zonder servicewerker blijft het blok verborgen. */
.mo-offline{margin:4px 0 20px}
.mo-offline .mo-knop{margin-left:0;cursor:pointer;font-family:inherit}
.mo-offline .mo-knop[disabled]{opacity:.6;cursor:default}
.mo-balk{height:3px;max-width:320px;margin:12px 0 0;overflow:hidden;
  background:var(--rule);border-radius:2px}
.mo-balk>div{height:100%;width:0;background:var(--brass);transition:width .18s linear}
.mo-uitleg{font-size:13px;color:var(--ink-3);margin:8px 0 0;max-width:46em}
.mo-offline[data-staat="klaar"] .mo-knop{color:var(--ink);border-color:var(--brass)}
figure{margin:0}
figure img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:2px}
figcaption{font-size:13px;color:var(--ink-3);margin-top:8px}

.callout{background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--brass);
  border-radius:2px;padding:16px 20px;margin:22px 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* ---------- footer ---------- */
.sitefoot{border-top:1px solid var(--rule);background:var(--panel);margin-top:20px}
.foot-grid{max-width:1080px;margin:0 auto;padding:34px 22px 44px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;
  font-size:13.5px;color:var(--ink-3)}
.foot-title{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.foot-grid p{margin:0;max-width:44ch}
.foot-grid a{display:block;color:var(--ink-2);text-decoration:none;padding:1px 0}
.foot-grid a:hover{color:var(--brass)}
.foot-grid p a{display:inline;color:var(--brass)}
/* Zeventien verwijzingen onder elkaar maakten de voettekst hoger dan de
   bladzijde eronder.  Twee kolommen halveren dat; onder de 420 pixels is er
   voor twee geen ruimte meer en vallen ze vanzelf terug op één. */
.foot-links{columns:2;column-gap:26px}
.foot-links a{break-inside:avoid}
@media (max-width:420px){.foot-links{columns:1}}

/* ---------- de uitlegbladzijde over de webapp ----------
   De knopjes die in de tekst worden genoemd, getekend in plaats van
   nagefotografeerd: een schermafbeelding van iOS veroudert bij de volgende
   uitgave, een deelknopje niet. */
.knopje{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.24em;
  margin:0 1px;fill:none;stroke:currentColor;stroke-width:1.6;color:var(--brass)}
/* Hoe hij op het beginscherm komt te staan: het echte pictogram, op ware
   grootte, met het label eronder. */
.beginscherm{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  margin:4px 0 22px;padding:16px 22px;background:var(--panel);
  border:1px solid var(--rule);border-radius:4px}
.beginscherm img{width:64px;height:64px;border-radius:14px;display:block;border:0}
.beginscherm span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2)}

/* ---------- op het beginscherm ----------
   Als de site vanaf het beginscherm in een eigen venster opent, is hij geen
   site meer maar een instrumentenkastje: de vier instrumenten die het zonder
   verbinding doen, en verder niets.  In de browser verandert er niets.

   Twee keer dezelfde regels: de mediavraag doet het werk op Android en op iOS
   16.4 en later, zonder dat er ooit een compleet menu in beeld flitst.  De
   klasse is er voor oudere iOS-versies, die alleen navigator.standalone
   kennen; die wordt door pwa.js gezet. */
@media (display-mode: standalone) {
  .topbar nav a:not([data-app]) { display: none }
  .foot-pages { display: none }
  .instruments .inst:not([data-app]) { display: none }
  .alleen-web, .alleen-web + .acards { display: none }
}
html.is-app .topbar nav a:not([data-app]) { display: none }
html.is-app .foot-pages { display: none }
html.is-app .instruments .inst:not([data-app]) { display: none }
html.is-app .alleen-web,
html.is-app .alleen-web + .acards { display: none }
/* De leesteller staat aan het rechteruiteinde van de strip.  Hij hoort niet in
   de rij feiten ernaast, dus geen scheidingslijn ervoor — alleen de ruimte die
   hem naar rechts duwt. */
.datestrip .ds-count{margin-left:auto;padding-left:14px;border-left:0;
  font-variant-numeric:tabular-nums;opacity:.85}
/* Een leeg vak in de strip tekende toch zijn scheidingslijn — een streepje in
   het niets.  Leeg is nu ook onzichtbaar. */
.datestrip span:empty{display:none}
/* Op een telefoon zou de teller de strip een tweede regel geven, en die balk
   blijft in beeld staan; daar weegt de ruimte zwaarder dan het getal. */
@media (max-width:420px){.datestrip .ds-count{display:none}}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto}}
@media (max-width:640px){
  .bar{gap:12px}
  .topbar nav{margin-left:0;width:100%}
  .topend{width:100%;margin-left:0}
  main{padding:30px 18px 56px;gap:34px}
  .breakout{width:calc(100vw - 36px)}
}

/* ---------- the moon ---------- */
.mn-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.mn-btn{appearance:none;background:var(--panel);border:1px solid var(--rule);
  color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-size:13px;
  padding:6px 11px;border-radius:2px;cursor:pointer;line-height:1.2}
.mn-btn:hover{border-color:var(--brass);color:var(--brass)}
.mn-btn.wide{letter-spacing:.06em}
.mn-date{appearance:none;background:var(--panel);border:1px solid var(--rule);
  color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-size:13px;
  padding:5px 8px;border-radius:2px;margin-left:auto}
.mn-panel{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--brass);
  padding:20px 22px;box-shadow:var(--shadow)}
.mn-big{flex:none;line-height:0}
.mn-text{flex:1 1 300px;min-width:0}
.mn-disc .mn-dark{fill:var(--disc-new)}
.mn-disc .mn-lit{fill:var(--disc-full)}
/* the unlit face is not black: a little of it is always there, and on a young
   moon the earth really does light it */
.mn-disc .mn-night{opacity:.17}
.mn-disc .mn-rim{fill:none;stroke:var(--lunar);stroke-width:1.2;opacity:.75}
.mn-when{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.mn-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;
  line-height:1.15;margin-top:4px;color:var(--ink)}
.mn-pct{margin-top:2px;font-size:14px;color:var(--ink-2)}
.mn-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:14px 0 0;
  font-size:13.5px;align-content:start}
.mn-facts dt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  align-self:baseline;padding-top:2px}
.mn-facts dd{margin:0;color:var(--ink-2)}
.mn-facts dd.mn-fe{color:var(--brass)}
.mn-strip{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
  margin-top:14px;padding:4px 0 10px;scrollbar-width:thin;cursor:grab}
.mn-strip.drag{cursor:grabbing;scroll-behavior:auto}
.mn-strip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.mn-day{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:8px 2px 6px;background:none;border:1px solid transparent;
  border-radius:2px;cursor:pointer;position:relative}
.mn-day:hover{background:var(--panel)}
.mn-day.on{background:var(--panel);border-color:var(--brass)}
.mn-day.now .mn-daynum{color:var(--brass);font-weight:600}
.mn-daynum{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);
  white-space:nowrap}
.mn-daybib{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);
  letter-spacing:.04em}
.mn-daytag{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.06em;
  white-space:nowrap;
  text-transform:uppercase;min-height:12px;color:transparent}
.mn-daytag.ph{color:var(--brass)}
.mn-daytag.di{color:var(--ink-3)}
.mn-feasts{position:absolute;top:3px;right:6px;display:flex;gap:3px}
.mn-feast{width:6px;height:6px;transform:rotate(45deg);background:var(--brass)}
.mn-foot{margin:8px 0 0;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--ink-3);line-height:1.6}
@media (max-width:520px){
  .mn-panel{gap:16px;padding:16px}
  .mn-big svg{width:110px;height:110px}
  .mn-name{font-size:25px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mn-disc .mn-night{opacity:.22}
}
:root[data-theme="dark"] .mn-disc .mn-night{opacity:.22}
.cd-bd{margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.08em;color:var(--brass)}
.cd-bd abbr{text-decoration:none;border-bottom:1px dotted var(--rule)}
.mn-cols{display:flex;flex-wrap:wrap;gap:6px 34px;margin-top:14px}
.mn-cols .mn-facts{flex:1 1 210px;max-width:330px;margin-top:0}
.mn-facts dd.mn-po{color:var(--ink-3)}
/* the strip's third slot is empty now that what is coming is counted out on
   the front page instead */
.datestrip .ds-next:empty{display:none}

/* ---------- the seven lamps ---------- */
.mn7-card{background:var(--panel);border:1px solid var(--rule);
  border-top:2px solid var(--brass);padding:18px 22px 20px;box-shadow:var(--shadow);
  margin-top:16px;text-align:center}
.mn7{display:block;margin:8px auto 4px;width:min(320px,80%);height:auto}
.mn7-lamp .mn7-flame{fill:none;stroke:var(--rule);stroke-width:5}
.mn7-lamp.on .mn7-flame{fill:#E8B33C;stroke:none;
  filter:drop-shadow(0 0 14px rgba(232,179,60,.85))}
.mn7-lamp.now .mn7-flame{animation:mn7flicker 2.6s ease-in-out infinite}
@keyframes mn7flicker{0%,100%{opacity:1}50%{opacity:.72}}
@media (prefers-reduced-motion: reduce){.mn7-lamp.now .mn7-flame{animation:none}}
.mn7-lamp{cursor:default}
.mn7-why{margin:14px auto 0;max-width:66ch;text-align:left}
.mn7-why summary{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  cursor:pointer;text-align:center}
.mn7-why p{margin:10px 0 0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.mn7-count{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;
  color:var(--ink);margin-top:6px}
.mn7-sub{margin-top:2px}
.mn7-note{margin:10px auto 0;max-width:62ch;font-size:13px;color:var(--ink-3);
  line-height:1.55}

/* ---------- the weekly Torah reading (Instrument VII) ---------- */
.pr-card{background:var(--panel);border:1px solid var(--rule);border-radius:2px;
  border-top:2px solid var(--brass);padding:17px 22px 19px;box-shadow:var(--shadow);
  margin-top:16px}
.pr-name{margin:6px 0 0;font-size:clamp(24px,3vw,31px);line-height:1.12}
.pr-when{margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.06em;color:var(--ink-3)}
.pr-read{display:grid;grid-template-columns:max-content 1fr;gap:5px 18px;
  margin:15px 0 0;font-size:14.5px}
.pr-read dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding-top:4px;white-space:nowrap}
.pr-read dd{margin:0;color:var(--ink-2)}
.pr-heb-num,.pr-note{color:var(--ink-3);font-size:12.5px}
@media (max-width:520px){
  .pr-read{grid-template-columns:1fr;gap:1px 0}
  .pr-read dd{margin-bottom:9px}
}
.pr-why{margin-top:16px;border-top:1px solid var(--rule-soft);padding-top:11px}
.pr-why summary{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass);cursor:pointer}
.pr-why h4{margin:14px 0 0;font-size:16px}
.pr-evintro,.pr-thin{margin:9px 0 0;font-size:13px;color:var(--ink-3);line-height:1.55}
.pr-thin{color:var(--brass)}
.pr-ev{list-style:none;margin:9px 0 0;padding:0;font-size:13.5px}
.pr-ev li{padding:3px 0;color:var(--ink-2)}
.pr-how{color:var(--ink-3);font-size:12.5px}
.pr-alts{margin:11px 0 0;font-size:13.5px;color:var(--ink-2)}
.pr-altk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

.pr-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:34px}
.pr-span{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--ink);text-align:center}
.pr-nav{appearance:none;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:5px 11px;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--ink-3);white-space:nowrap;transition:border-color .13s,color .13s}
.pr-nav:hover{border-color:var(--brass);color:var(--brass)}
.pr-joins{margin:7px 0 12px;font-size:13px;color:var(--ink-3);text-align:center}
.pr-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:2px;
  background:var(--panel)}
.pr-table{font-size:13.5px}
.pr-table td{vertical-align:top}
.pr-table .pr-d{white-space:nowrap}
.pr-civil{display:block;color:var(--ink)}
.pr-bib{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--ink-3);margin-top:2px}
.pr-tr{color:var(--ink);font-weight:500}
.pr-p .heb{margin-left:6px;color:var(--ink-3);font-size:1.05em}
.pr-sef{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.pr-feast{color:var(--ink-3);font-style:italic}
.pr-table tr.now td{background:color-mix(in srgb,var(--brass) 9%,transparent)}
.pr-table tr.eighth td{border-top:1px solid var(--brass)}

/* ---------- the week of the crucifixion (Instrument VIII) ---------- */
.pw-head{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:16px}
.pw-year{appearance:none;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:4px 10px;cursor:pointer;font:inherit;font-size:13px;
  font-family:"IBM Plex Mono",monospace;color:var(--ink-3);
  transition:border-color .13s,color .13s}
.pw-year:hover{border-color:var(--brass);color:var(--brass)}
.pw-year.on{border-color:var(--brass);color:var(--brass);
  background:color-mix(in srgb,var(--brass) 10%,transparent)}
.pw-note{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);
  max-width:74ch}
.pw-13{border-top:1px solid var(--rule-soft);padding-top:11px;margin-top:18px}

.pw-scroll{overflow-x:auto;margin-top:16px;padding-bottom:4px}
/* The three heights the leader lines have to reach across are named here, so
   that a line always ends exactly on the strip and never a few pixels short. */
.pw-chart{position:relative;min-width:960px;
  --pw-rowgap:2px;--pw-bands-h:90px;--pw-bands-gap:7px}

.pw-flags{position:relative;height:calc(var(--lanes,1) * 27px + 12px)}
.pw-flags.down{margin-top:0}
.pw-flag{position:absolute;width:0}
/* Nothing in this strip creates a stacking context of its own, so these two
   numbers settle the whole drawing: every leader line is drawn beneath every
   label and every band, whichever came first in the document.  A line that
   has to pass a label now passes behind it. */
.pw-flagname{appearance:none;background:var(--panel);cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;padding:3px 8px;
  font:inherit;font-size:11.5px;line-height:1.25;color:var(--ink-2);
  white-space:nowrap;position:absolute;transform:translateX(-50%);z-index:2;
  transition:border-color .13s,color .13s}
.pw-flagname:hover{border-color:var(--brass);color:var(--brass)}
.pw-stem{position:absolute;left:0;width:1px;background:var(--rule);z-index:1}
.pw-flags.up .pw-flagname{top:calc((var(--lanes,1) - 1 - var(--lane)) * 27px)}
.pw-flags.up .pw-stem{
  top:calc((var(--lanes,1) - 1 - var(--lane)) * 27px + 21px);
  height:calc(var(--lane) * 27px + 18px + var(--pw-rowgap))}
.pw-flags.down .pw-flagname{top:calc(var(--lane) * 27px + 14px)}
/* The lower flags sit under the bands, but they mark moments on the strip, so
   their lines start at the strip and pass behind the bands on the way down. */
.pw-flags.down .pw-stem{
  top:calc(-1 * (var(--pw-bands-h) + var(--pw-bands-gap)));
  height:calc(var(--lane) * 27px + 14px + var(--pw-bands-h) + var(--pw-bands-gap))}

.pw-row{position:relative;height:46px;margin-top:var(--pw-rowgap)}
.pw-row .pw-cell{position:absolute;top:0;bottom:0;border:1px solid var(--rule);
  border-radius:2px;background:var(--panel);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;overflow:hidden;
  font:inherit;padding:0}
.pw-bib .pw-cell{cursor:pointer;transition:border-color .13s}
.pw-bib .pw-cell:hover{border-color:var(--brass)}
.pw-num{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink)}
.pw-civil{height:40px;margin-top:3px}
.pw-wd{font-size:11px;color:var(--ink-2);text-transform:lowercase}
.pw-cdate{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3)}
.pw-cd{background:transparent;border-style:dashed}

.pw-cell.k-sabbath{background:color-mix(in srgb,var(--brass) 13%,var(--panel))}
.pw-cell.k-chosen{background:color-mix(in srgb,var(--brass) 13%,var(--panel))}
.pw-cell.k-pesach{background:color-mix(in srgb,var(--lunar) 20%,var(--panel));
  border-color:var(--lunar)}
.pw-cell.k-high{background:color-mix(in srgb,var(--brass) 30%,var(--panel));
  border-color:var(--brass)}
.pw-cell.k-firstfruits{background:color-mix(in srgb,#3E7D4F 26%,var(--panel));
  border-color:#3E7D4F}

.pw-bands{position:relative;height:var(--pw-bands-h);margin-top:var(--pw-bands-gap)}
.pw-band{position:absolute;top:0;height:22px;border:1px solid var(--rule);z-index:2;
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;color:var(--ink-2);background:var(--panel)}
.pw-band.b-three{top:26px;border-color:var(--brass);color:var(--brass)}
.pw-band.b-ub{top:52px;height:11px;border-radius:6px;font-size:0;
  background:color-mix(in srgb,var(--brass) 18%,var(--panel))}
.pw-band.b-ub span{font-size:11px;color:var(--ink-2)}  /* on the tinted band, ink-3 reads at 3.4:1 by night; ink-2 at 6.1 */
.pw-band.b-ub{height:20px;font-size:11.5px}
/* One day wide.  A day's column is far narrower than its name, so the pill
   keeps the width of the day it marks — that width is the whole point — and
   the name stands beside it rather than across it.  It has a row to itself,
   so there is nothing to the right for the name to run into. */
.pw-band.b-ff{top:78px;height:20px;overflow:visible;
  border-color:#3E7D4F;
  background:color-mix(in srgb,#3E7D4F 20%,var(--panel))}
.pw-band.b-ff span{position:absolute;left:calc(100% + 9px);
  white-space:nowrap;color:var(--ink-2)}

.pw-panel{margin-top:18px;background:var(--panel);border:1px solid var(--rule);
  border-top:2px solid var(--brass);border-radius:2px;padding:15px 20px 16px}
.pw-ptitle{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;
  color:var(--ink)}
.pw-facts{display:grid;grid-template-columns:max-content 1fr;gap:3px 18px;
  margin:11px 0 0;font-size:14px}
.pw-facts dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding-top:3px;white-space:nowrap}
.pw-facts dd{margin:0;color:var(--ink-2)}
.pw-refs{margin:11px 0 0;font-size:13.5px;color:var(--ink-2)}
.pw-refk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.pw-close{appearance:none;background:none;border:0;padding:0;margin-top:11px;
  cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink-3);
  border-bottom:1px solid color-mix(in srgb,var(--ink-3) 40%,transparent)}
.pw-close:hover{color:var(--brass);border-bottom-color:var(--brass)}

.pw-count{margin-top:20px;border-top:1px solid var(--rule);padding-top:14px}
.pw-cline{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  margin-top:7px;font-size:14px}
.pw-ck{min-width:15ch;color:var(--ink-2)}
.pw-cv{font-family:"IBM Plex Mono",monospace;color:var(--ink)}
.pw-cn{font-size:13px;color:var(--ink-3)}
.pw-cline.ok .pw-cv,.pw-cline.ok .pw-cn{color:var(--brass)}
.pw-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;
  padding-top:11px;border-top:1px solid var(--rule-soft);
  font-size:12px;color:var(--ink-3)}
.pw-key{display:flex;align-items:center;gap:6px}
.pw-sw{width:11px;height:11px;flex:none;border-radius:2px;
  border:1px solid var(--rule);background:var(--panel)}
.pw-rowk{color:var(--ink-3);font-style:italic}
.pw-sw.k-sabbath,.pw-sw.k-chosen{background:color-mix(in srgb,var(--brass) 13%,var(--panel))}
.pw-sw.k-pesach{background:color-mix(in srgb,var(--lunar) 20%,var(--panel));
  border-color:var(--lunar)}
.pw-sw.k-high{background:color-mix(in srgb,var(--brass) 30%,var(--panel));
  border-color:var(--brass)}
.pw-sw.k-firstfruits{background:color-mix(in srgb,#3E7D4F 26%,var(--panel));
  border-color:#3E7D4F}

/* ---------- the biography on the About page ---------- */
.bio{margin-bottom:34px}
.bio p:first-child{font-size:1.06em}
.about-who{margin-top:22px;padding-top:13px;border-top:1px solid var(--rule-soft);
  font-size:13.5px;color:var(--ink-3)}

/* ---- Instrument IX: the years of Yeshua ---------------------------------
   One axis, and bands on it.  A bar is placed by percentage of the span the
   chart holds, so the drawing is the arithmetic and not a picture of it. */
#yr-root{margin:0}
/* The lane names stand in a column of their own, so everything the axis
   places — grid, anchors, the ruled years — starts where the tracks do and
   not where the panel does.  One number, kept in one place. */
/* Below a certain width the axis stops being readable, so — as with the
   crucifixion week — the chart keeps its width and the reader slides it,
   rather than the years bunching up until the labels collide. */
.yr-scroll{overflow-x:auto;padding-bottom:4px}
.yr-chart{--yr-l:142px;min-width:820px;position:relative;background:var(--panel);
  border:1px solid var(--rule);border-top:2px solid var(--brass);
  border-radius:2px;padding:40px 14px 4px}
.yr-grid{position:absolute;left:var(--yr-l);right:14px;top:0;bottom:26px;
  pointer-events:none}
.yr-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--rule-soft)}
.yr-alay{position:absolute;left:var(--yr-l);right:14px;top:6px;bottom:26px;
  pointer-events:none}
.yr-anchor{position:absolute;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--brass) 55%,transparent)}
.yr-anchor-l{position:absolute;top:-6px;left:4px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass)}
.yr-anchor.yr-a-2 .yr-anchor-l{top:8px}
.yr-anchor.yr-a-r .yr-anchor-l{left:auto;right:4px}
.yr-lane{display:flex;align-items:flex-start;gap:12px;padding:5px 0}
.yr-lane-n{flex:0 0 116px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:5px}
.yr-track{position:relative;flex:1 1 auto;height:calc(var(--levels,1) * 26px)}
.yr-bar{position:absolute;top:calc(var(--lv,0) * 26px);height:22px;
  appearance:none;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink);padding:0 7px;text-align:left;
  overflow:hidden;white-space:nowrap;background:var(--panel-2)}
.yr-bar:hover{border-color:var(--brass)}
.yr-bar.on{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.yr-bar.yr-disputed{background:repeating-linear-gradient(135deg,
  var(--panel-2) 0 6px, transparent 6px 12px)}
.yr-bar.yr-window{background:color-mix(in srgb,var(--brass) 20%,transparent);
  border-style:dashed}
/* A reign cut off by the edge of the axis: the cut side is left open, so a
   stub is not mistaken for a beginning. */
.yr-bar.yr-open-l{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.yr-bar.yr-open-l::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;
  width:11px;pointer-events:none;
  background:linear-gradient(90deg,var(--panel),transparent)}
.yr-bar.yr-open-r{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
/* A bar too narrow for its own name puts the name beside it. */
.yr-bar.yr-lbl-r,.yr-bar.yr-lbl-l{overflow:visible;padding:0}
.yr-bar.yr-lbl-r > span{position:absolute;left:100%;top:0;line-height:20px;
  padding-left:6px;color:var(--ink-2)}
.yr-bar.yr-lbl-l > span{position:absolute;right:100%;top:0;line-height:20px;
  padding-right:6px;color:var(--ink-2)}
.yr-cruc{position:absolute;top:0;bottom:0;width:2px;background:var(--brass)}
.yr-cruc span{position:absolute;bottom:1px;left:5px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--brass)}
.yr-cruc.yr-c-l span{left:auto;right:5px}
.yr-axis{position:relative;height:22px;margin-left:128px}
.yr-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3)}
.yr-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;
  font-size:12px;color:var(--ink-3)}
.yr-legend span{display:inline-flex;align-items:center;gap:7px}
.yr-sw{width:15px;height:11px;border:1px solid var(--rule);border-radius:2px;
  background:var(--panel-2);flex:none}
.yr-sw.yr-disputed{background:repeating-linear-gradient(135deg,
  var(--panel-2) 0 4px, transparent 4px 8px)}
.yr-sw.yr-window{background:color-mix(in srgb,var(--brass) 20%,transparent);
  border-style:dashed}
.yr-sw.yr-cr{width:2px;height:13px;border:0;border-radius:0;background:var(--brass)}
.yr-note{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--ink-3);
  max-width:78ch}
.yr-note .yr-sw{display:inline-block;vertical-align:-2px;margin-right:7px}
.yr-note b{color:var(--ink-2);font-weight:600;white-space:nowrap}
.yr-badge.yr-b-window{color:var(--brass);
  border-color:color-mix(in srgb,var(--brass) 45%,transparent);border-style:dashed}
.yr-det{margin-top:16px;background:var(--panel-2);border-radius:2px;padding:16px 18px}
.yr-det h3{margin:0 0 6px;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:24px;font-weight:600}
.yr-det p{margin:0 0 9px;font-size:14.5px;line-height:1.6;color:var(--ink-2);
  max-width:66ch}
.yr-det .yr-hint{margin:0;color:var(--ink-3);font-size:13.5px}
.yr-facts{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.yr-facts b{color:var(--ink-2);font-weight:500}
.yr-badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:2px;
  border:1px solid var(--rule);color:var(--ink-3)}
.yr-badge.yr-b-fixed{color:var(--brass);
  border-color:color-mix(in srgb,var(--brass) 55%,transparent)}
.yr-badge.yr-b-disputed{color:#B3262E;
  border-color:color-mix(in srgb,#B3262E 45%,transparent)}
.yr-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.yr-refs a,.yr-anchors a{color:var(--brass)}
.yr-anchors{margin-top:16px}
.yr-anchors ul{list-style:none;padding:0;margin:6px 0 0}
.yr-anchors li{padding:5px 0;border-top:1px solid var(--rule-soft);font-size:14px;
  color:var(--ink-2);max-width:74ch}
.yr-anchors li:first-child{border-top:0}
.yr-anchors b{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}
@media (max-width:720px){
  .yr-det{padding:14px}
  .yr-anchors li{font-size:13.5px}
}