/* Library of Haskala, on top of the platform kit (/kit/1/jl.css). Everything is prefixed hk-. */
:root {
  --hk-wide: 74rem;
  --hk-soft: color-mix(in srgb, var(--jl-accent) 9%, var(--jl-bg));
  --hk-sea: #e9eff6; --hk-land: #f6f3ea; --hk-coast: #c9c2ae; --hk-river: #b8cbe0; --hk-pt: #1f4e8c;
  --hk-here: #b4322a; --hk-mark: #fff2a8;
}
@media (prefers-color-scheme: dark) {
  :root { --hk-sea: #121a24; --hk-land: #262a31; --hk-coast: #3d434d; --hk-river: #2c4157; --hk-pt: #8db4ec;
          --hk-here: #ff7a6b; --hk-mark: #5a4d12; }
}

[hidden] { display: none !important; }
.hk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hk-skip { position: absolute; left: -999px; top: 0; background: var(--jl-bg); padding: 8px 12px; z-index: 2000; }
.hk-skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--jl-accent); outline-offset: 2px; }

/* the showcase navigation below the platform bar */
.hk-nav { border-bottom: 1px solid var(--jl-line); background: var(--hk-soft); }
.hk-nav-in { max-width: var(--hk-wide); margin: 0 auto; padding: 6px 16px; display: flex; flex-wrap: wrap;
             align-items: center; gap: 4px 18px; }
.hk-brand { font-weight: 700; text-decoration: none; color: var(--jl-fg); font-size: 1.05rem; white-space: nowrap; }
.hk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.hk-nav li a { text-decoration: none; padding: 4px 0; display: inline-block; font-size: .95rem; }
.hk-nav li a:hover { text-decoration: underline; }
.hk-nav a[aria-current="page"] { color: var(--jl-fg); font-weight: 600; border-bottom: 2px solid var(--jl-accent); }
.hk-navsearch { margin-left: auto; }
.hk-navsearch input { width: 15rem; max-width: 100%; }
@media (max-width: 760px) {
  .hk-nav ul { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
  .hk-nav li a { white-space: nowrap; }
  .hk-navsearch { margin-left: 0; width: 100%; }
  .hk-navsearch input { width: 100%; }
}
input[type=search], select, input[type=number] {
  font: inherit; font-size: .95rem; color: var(--jl-fg); background: var(--jl-bg); border: 1px solid var(--jl-line);
  border-radius: 6px; padding: 5px 9px;
}
input[type=search]:focus, select:focus, input[type=number]:focus { border-color: var(--jl-accent); }

.hk-main.hk-wide { max-width: var(--hk-wide); }
.hk-main h1 { overflow-wrap: anywhere; }
.hk-count { color: var(--jl-muted); font-weight: 400; font-size: .8em; font-variant-numeric: tabular-nums; }
.hk-crumbs ol { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px;
                font-size: .88rem; color: var(--jl-muted); }
.hk-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--jl-muted); }
.hk-crumbs li[aria-current] { color: var(--jl-fg); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the head of a record page */
.hk-hero { margin-bottom: 1.4rem; }
.hk-hero h1 { margin: .2rem 0 .3rem; }
.hk-kind { margin: 1.2rem 0 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--jl-muted); }
.hk-sub { margin: 0 0 .4rem; font-size: 1.12rem; color: var(--jl-muted); }
.hk-line { margin: .3rem 0; }
.hk-chips { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hk-chips li { border: 1px solid var(--jl-line); border-radius: 999px; padding: 2px 12px; font-size: .93rem; }
.hk-role { color: var(--jl-muted); font-size: .88em; }
.hk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: .8rem 0 .4rem; }
.hk-btn { display: inline-block; padding: 5px 12px; border: 1px solid var(--jl-line); border-radius: 6px; font: inherit;
          font-size: .9rem; color: var(--jl-accent); background: var(--jl-bg); text-decoration: none; cursor: pointer; }
.hk-btn:hover { border-color: var(--jl-accent); }
.hk-primary { background: var(--jl-accent); color: var(--jl-bg); border-color: var(--jl-accent); font-weight: 600; }
.hk-ext::after { content: " ↗"; font-size: .8em; }
.hk-btn.hk-ext::after { content: " ↗"; }
.hk-yearnote { margin: .2rem 0; }
.hk-cite { display: inline-block; }
.hk-cite summary { list-style: none; }
.hk-cite summary::-webkit-details-marker { display: none; }
.hk-cite[open] { flex-basis: 100%; order: 9; }
.hk-cite[open] summary { margin-bottom: 8px; }
.hk-cite-in { border: 1px solid var(--jl-line); border-radius: 8px; padding: 4px 14px 10px; }
.hk-cite-in h4 { margin: .8rem 0 .3rem; font-size: .95rem; display: flex; gap: 8px; align-items: center; }
.hk-cite-in pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-size: .82rem; }
.hk-copy { font: inherit; font-size: .8rem; padding: 1px 8px; border: 1px solid var(--jl-line); border-radius: 5px;
           background: var(--jl-bg); color: var(--jl-accent); cursor: pointer; }

/* sections with a table of contents at the side */
.hk-cols { display: block; }
.hk-toc { margin: 0 0 1rem; }
.hk-toc-h { font-size: .8rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--jl-muted);
            margin: 0 0 .4rem !important; }
.hk-toc ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.hk-toc li a { display: block; white-space: nowrap; padding: 3px 10px; border: 1px solid var(--jl-line); border-radius: 999px;
               text-decoration: none; font-size: .88rem; }
@media (min-width: 960px) {
  .hk-cols { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .hk-toc { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; margin-top: 2.2rem; }
  .hk-toc ol { display: block; overflow: visible; border-left: 2px solid var(--jl-line); }
  .hk-toc li a { border: 0; border-radius: 0; white-space: normal; padding: 4px 0 4px 12px; margin-left: -2px;
                 border-left: 2px solid transparent; }
  .hk-toc li a:hover { border-left-color: var(--jl-accent); }
}
.hk-sec { scroll-margin-top: 12px; }
.hk-sec h2, .hk-body h2 { scroll-margin-top: 12px; border-bottom: 1px solid var(--jl-line); padding-bottom: .25rem; }
.hk-body > .hk-sec:first-child h2 { margin-top: 1.2rem; }
.hk-sec h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; }
.hk-fields { margin: .6rem 0 1rem; }
@media (min-width: 601px) { .hk-body .hk-fields, .hk-main > .hk-fields { grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); } }
.hk-fields dt { font-size: .93rem; }
.hk-fields dd > .hk-v + .hk-v { margin-top: .3rem; }
@media (max-width: 600px) {
  .hk-fields { grid-template-columns: 1fr; gap: 0; }
  .hk-fields dt { margin-top: .6rem; font-size: .85rem; }
}
.hk-note p { margin: 0 0 .5rem; }
.hk-note p:last-child { margin: 0; }
.hk-note ins { text-decoration: underline; }
.hk-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin: .6rem 0 1rem; }
.hk-card { border: 1px solid var(--jl-line); border-radius: 8px; padding: 8px 14px; }
.hk-card h4 { margin: .2rem 0 .3rem; font-size: 1rem; }
.hk-card .hk-fields { grid-template-columns: minmax(6rem, max-content) 1fr; margin: .3rem 0; font-size: .94rem; }
.hk-producers { padding-left: 1.2rem; }
.hk-producers li { margin: .3rem 0; }
.hk-producers .hk-fields { font-size: .9rem; margin: .2rem 0 .6rem; }
.hk-table td, .hk-table th { font-size: .93rem; }
.hk-prov { margin-top: 2.5rem; border-top: 1px solid var(--jl-line); padding-top: .8rem; overflow-wrap: anywhere; }
.hk-old { font-family: var(--jl-mono); font-size: .85em; }
.hk-epbox { margin: 1rem 0; }
.hk-epbox p { margin: 0; }
.hk-epbox .jl-facts { margin: .4rem 0 0; }

/* lists */
.hk-list { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.hk-list > li { padding: 7px 0; border-bottom: 1px solid var(--jl-line); }
.hk-list .hk-title { font-weight: 600; text-decoration: none; }
.hk-list .hk-title:hover { text-decoration: underline; }
.hk-latin { display: block; color: var(--jl-muted); font-size: .92rem; }
.hk-meta { display: block; color: var(--jl-muted); font-size: .88rem; }
.hk-meta:empty { display: none; }
.hk-tag { font-size: .72rem; border: 1px solid var(--jl-line); border-radius: 4px; padding: 0 5px; color: var(--jl-muted);
          vertical-align: 2px; margin-left: 4px; }
.hk-tree .hk-depth1 { padding-left: 1.4rem; }
.hk-tree .hk-depth2 { padding-left: 2.8rem; }
.hk-tree .hk-depth3 { padding-left: 4.2rem; }
.hk-letterbar { background: var(--jl-bg); padding: 6px 0; margin: 0 0 .6rem; border-bottom: 1px solid var(--jl-line); }
@media (min-width: 760px) and (min-height: 600px) { .hk-letterbar { position: sticky; top: 0; z-index: 5; } }
.hk-letters { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.hk-letters a, .hk-letters span { min-width: 1.9rem; text-align: center; padding: 2px 4px; border-radius: 4px;
                                  font-size: .9rem; text-decoration: none; }
.hk-letters a { background: var(--hk-soft); }
.hk-letters a:hover { background: var(--jl-accent); color: var(--jl-bg); }
.hk-letters span { color: var(--jl-line); }
.hk-group h2 { scroll-margin-top: 100px; }
.hk-group h2[dir=rtl] { text-align: right; }

.hk-cloud { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.hk-cloud a { text-decoration: none; }
.hk-cloud a:hover { text-decoration: underline; }
.hk-cloud .hk-count { font-size: .62em; }
.hk-vocabs { columns: 2 14rem; padding-left: 1.2rem; }
.hk-home-h { font-size: 2.3rem !important; }
.hk-bigsearch { display: flex; gap: 8px; margin: 1.2rem 0; }
.hk-bigsearch input { flex: 1; font-size: 1.05rem; padding: 9px 12px; min-width: 0; }
.hk-bigsearch .jl-button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.hk-homecards { margin: 1.5rem 0; }
.hk-homecards h3 a { font-size: 1.1rem; }
.hk-quote { margin: 1rem 0; padding: 2px 16px; border-left: 3px solid var(--jl-line); color: var(--jl-muted); }

/* maps (inline SVG on a base map that is part of the site) */
.hk-mapbox { margin: 1rem 0; }
.hk-map { width: 100%; height: auto; display: block; border: 1px solid var(--jl-line); border-radius: 8px;
          background: var(--hk-sea); max-height: 75vh; }
.hk-sea { fill: var(--hk-sea); }
.hk-land { fill: var(--hk-land); stroke: var(--hk-coast); stroke-width: .5; }
.hk-lakes { fill: var(--hk-sea); stroke: var(--hk-coast); stroke-width: .3; }
.hk-rivers { fill: none; stroke: var(--hk-river); stroke-width: .7; }
.hk-mapsmall .hk-land { stroke-width: .25; }
.hk-mapsmall .hk-rivers { stroke-width: .35; }
.hk-pt { fill: var(--hk-pt); fill-opacity: .55; stroke: var(--jl-bg); stroke-width: .4; }
a:hover .hk-pt, a:focus .hk-pt { fill-opacity: 1; }
.hk-pt-here { fill: var(--hk-here); fill-opacity: 1; }
.hk-lbl { fill: var(--jl-fg); paint-order: stroke; stroke: var(--hk-land); stroke-width: 2.5px; font-family: var(--jl-font); pointer-events: none; }
.hk-mapbox figcaption { margin-top: 4px; }

/* search */
.hk-searchform label[for=hk-q] { font-weight: 600; display: block; margin-bottom: 4px; }
.hk-qrow { display: flex; gap: 8px; }
.hk-qrow input { flex: 1; font-size: 1.1rem; padding: 9px 12px; min-width: 0; }
.hk-qrow .jl-button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.hk-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .93rem; margin: .5rem 0; }
.hk-linkbtn { background: none; border: 0; color: var(--jl-accent); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.hk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--jl-line); margin: 1rem 0 .8rem; overflow-x: auto; }
.hk-tabs button { font: inherit; background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px;
                  color: var(--jl-muted); cursor: pointer; white-space: nowrap; }
.hk-tabs button[aria-selected=true] { color: var(--jl-fg); border-bottom-color: var(--jl-accent); font-weight: 600; }
.hk-searchcols { display: block; }
@media (min-width: 960px) {
  .hk-searchcols { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0 2rem; align-items: start; }
}
.hk-facets { border: 1px solid var(--jl-line); border-radius: 8px; padding: 6px 12px; margin-bottom: 1rem; font-size: .93rem; }
.hk-facets > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.hk-facet { border-top: 1px solid var(--jl-line); padding: 6px 0; }
.hk-facet:first-child { border-top: 0; }
.hk-facet h3 { font-size: .85rem; margin: 4px 0; text-transform: uppercase; letter-spacing: .05em; color: var(--jl-muted); }
.hk-facet ul { list-style: none; padding: 0; margin: 0; }
.hk-facet li label { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; cursor: pointer; }
.hk-facet li label span:first-of-type { flex: 1; overflow-wrap: anywhere; }
.hk-facet .hk-count { font-size: .85em; }
.hk-facet .hk-linkbtn { font-size: .85rem; }
.hk-years { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hk-years input { width: 5.5rem; }
.hk-yhint { margin: .3rem 0 0; font-size: .8rem; }
#hk-yearbox + #hk-facet-list > .hk-facet:first-child { border-top: 1px solid var(--jl-line); }
.hk-resbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; }
.hk-resbar p { margin: 0; color: var(--jl-muted); }
.hk-sort { font-size: .93rem; }
.hk-results > li { padding: 9px 0; }
.hk-results mark { background: var(--hk-mark); color: inherit; border-radius: 2px; }
.hk-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0; }
.hk-chosen button { font: inherit; font-size: .85rem; border: 1px solid var(--jl-accent); color: var(--jl-accent);
                    background: var(--jl-bg); border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.hk-chosen button::after { content: " ×"; }

.hk-footer p { margin: .3rem 0; }
@media print {
  .hk-nav, .hk-toc, .hk-actions, .jl-bar, .hk-letterbar { display: none !important; }
  .hk-cols { display: block; }
}