/* =============================================================
   Lloyd's Wunderkammer - the cabinet page (/wunderkammer/)
   October 7, 2026. Only this page loads this file; everything else
   comes from wunderkammer.css. Prefix .wkc-.
   Sections: 1 the cabinet (picture, hot spots, light, tags, legend),
   2 the title leaf and the dictionary entry, 3 the catalogue ledger,
   4 the pieces, 5 note cards, 6 places to visit, 7 phones,
   8 reduced motion and print
   The hot spots are percentages of the picture; they were measured by
   the scratch generator that drew it (pipeline/cabinet.js in
   /home/erik/backups/homepage-wunderkammer-landing-20261007/) and
   switch with the picture at max-width 700px.
   ============================================================= */

/* ---- 1. the cabinet ------------------------------------------------- */
html.wk .wkc-niche {
    max-width: 1236px;
    margin-top: 0.2rem;
}
html.wk .wkc-niche .wk-label { max-width: 25em; }
html.wk .wkc-cabinet {
    position: relative;
    display: block;
    line-height: 0;
    background: #0d0907;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
html.wk .wkc-cabinet img {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}
/* a hot spot over each piece: a link with a paper tag */
html.wk .wkc-hot {
    position: absolute;
    left: var(--l); top: var(--t); width: var(--w); height: var(--h);
    display: block;
    line-height: 1.3;
    text-decoration: none;
    color: var(--wk-ink);
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}
html.wk .wkc-hot--iv { --l: 22.75%; --t: 23.82%; --w: 7.73%; --h: 41.65%; }
html.wk .wkc-hot--iii { --l: 31.27%; --t: 23.82%; --w: 12.67%; --h: 22.56%; }
html.wk .wkc-hot--ii { --l: 31.27%; --t: 46.38%; --w: 12.67%; --h: 19.09%; }
html.wk .wkc-hot--i { --l: 44.74%; --t: 45.13%; --w: 10.51%; --h: 20.34%; }
html.wk .wkc-hot--keeper { --l: 79.03%; --t: 14.19%; --w: 16.94%; --h: 46.61%; border-radius: 50% / 46%; }
/* candlelight on the piece: brightens the engraved lines, the dark between them stays dark */
html.wk .wkc-hot::before {
    content: '';
    position: absolute;
    inset: -12% -22%;
    background: radial-gradient(closest-side, rgba(255, 200, 130, 0.52), rgba(255, 175, 95, 0.2) 55%, rgba(255, 160, 80, 0) 100%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
html.wk .wkc-hot--keeper::before { inset: -6% -10%; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 238, 205, 0.2), rgba(255, 220, 170, 0.07) 60%, rgba(255, 210, 160, 0) 100%); }
html.wk .wkc-hot:hover::before,
html.wk .wkc-hot:focus-visible::before,
html.wk .wkc-niche:has(.wkc-legend a[data-piece="i"]:is(:hover, :focus-visible)) .wkc-hot--i::before,
html.wk .wkc-niche:has(.wkc-legend a[data-piece="ii"]:is(:hover, :focus-visible)) .wkc-hot--ii::before,
html.wk .wkc-niche:has(.wkc-legend a[data-piece="iii"]:is(:hover, :focus-visible)) .wkc-hot--iii::before,
html.wk .wkc-niche:has(.wkc-legend a[data-piece="iv"]:is(:hover, :focus-visible)) .wkc-hot--iv::before,
html.wk .wkc-niche:has(.wkc-legend a[data-piece="keeper"]:is(:hover, :focus-visible)) .wkc-hot--keeper::before { opacity: 1; }
html.wk .wkc-hot:focus-visible { outline: 2px solid var(--wk-brass); outline-offset: 3px; }

/* the paper tag on a string: shown when the candle reaches the piece */
html.wk .wkc-tag {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(100% + 18px);
    width: 15.5rem;
    padding: 0.55rem 0.85rem 0.6rem 1.5rem;
    font-family: var(--wk-text);
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--wk-ink);
    background: url('../img/paper.webp'), var(--wk-paper);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px) rotate(-1.4deg);
    transform-origin: 50% 0;
    transition: opacity 0.25s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    pointer-events: none;
}
/* the eyelet and the string */
html.wk .wkc-tag::before {
    content: '';
    position: absolute;
    left: 0.6rem; top: 50%;
    width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%;
    background: var(--wk-ebony);
}
html.wk .wkc-tag::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 100%;
    width: 1px; height: 18px;
    background: #c9b07a;
}
html.wk .wkc-tag b {
    display: block;
    font-family: var(--wk-fell-sc);
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    color: var(--wk-vermilion);
}
html.wk .wkc-tag strong { display: block; font-weight: 600; font-size: 1.04em; }
html.wk .wkc-tag i { display: block; font-style: italic; color: var(--wk-ink-soft); }
html.wk .wkc-hot:hover .wkc-tag,
html.wk .wkc-hot:focus-visible .wkc-tag {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) rotate(-1.4deg);
    transition: opacity 0.25s ease, transform 0.35s ease, visibility 0s;
}
/* tags that hang beside or above their piece */
html.wk .wkc-hot--iv .wkc-tag { left: auto; right: calc(100% + 16px); top: 34%; transform: translate(0, -6px) rotate(1.2deg); }
html.wk .wkc-hot--iv:hover .wkc-tag, html.wk .wkc-hot--iv:focus-visible .wkc-tag { transform: translate(0, 0) rotate(1.2deg); }
html.wk .wkc-hot--iv .wkc-tag::after { left: 100%; bottom: auto; top: 50%; width: 16px; height: 1px; }
html.wk .wkc-hot--iii .wkc-tag { top: auto; bottom: calc(100% + 16px); transform: translate(-50%, 6px) rotate(1.2deg); }
html.wk .wkc-hot--iii:hover .wkc-tag, html.wk .wkc-hot--iii:focus-visible .wkc-tag { transform: translate(-50%, 0) rotate(1.2deg); }
html.wk .wkc-hot--iii .wkc-tag::after { bottom: auto; top: 100%; height: 16px; }
html.wk .wkc-hot--keeper .wkc-tag { top: calc(100% + 10px); }
html.wk .wkc-hot--keeper .wkc-tag::after { height: 10px; }
html.wk .wkc-hot--keeper .wkc-tag { left: auto; right: -4px; transform: translate(0, -6px) rotate(-1.4deg); }
html.wk .wkc-hot--keeper:hover .wkc-tag, html.wk .wkc-hot--keeper:focus-visible .wkc-tag { transform: translate(0, 0) rotate(-1.4deg); }
html.wk .wkc-hot--keeper .wkc-tag::after { left: 70%; }

/* the legend under the picture: brass plates, the same links in words */
html.wk .wkc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.6rem;
    margin: 14px 0 2px;
    padding: 0;
    list-style: none;
}
html.wk .wkc-legend a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    min-height: 40px;
    align-items: center;
    padding: 0.3rem 0.85rem;
    font-family: var(--wk-fell-sc);
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: #2b1c0e;
    text-decoration: none;
    background: linear-gradient(180deg, #e6c886 0%, #c9a35a 48%, #b48a45 52%, #d9b873 100%);
    border: 1px solid #7a5a26;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 2px 4px rgba(0, 0, 0, 0.55);
}
html.wk .wkc-legend a span { color: var(--wk-vermilion); }
html.wk .wkc-legend a:hover, html.wk .wkc-legend a:focus-visible {
    background: linear-gradient(180deg, #f3dc9c 0%, #dbb66c 48%, #c79a50 52%, #e8c985 100%);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.7), 0 0 14px rgba(255, 179, 92, 0.45), 0 2px 4px rgba(0, 0, 0, 0.55);
}
html.wk .wkc-legend a:focus-visible { outline: 2px solid var(--wk-brass); outline-offset: 3px; }
html.wk .wkc-hint {
    margin: 10px auto 0;
    max-width: 44em;
    text-align: center;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    color: #b39a6e;
}
html.wk .wkc-hint--touch { display: none; }
@media (hover: none), (max-width: 700px) {
    html.wk .wkc-hint--mouse { display: none; }
    html.wk .wkc-hint--touch { display: block; }
}
@media (hover: none) {
    html.wk .wkc-tag { display: none; }
    html.wk .wkc-hot:active::before { opacity: 1; transition: none; }
}

/* ---- 2. the title leaf and the dictionary entry ------------------------ */
html.wk .wkc-entry {
    margin: 1.6rem auto 1.4rem;
    padding: 1.1rem 1.3rem 0.9rem;
    border-top: 3px double rgba(29, 22, 17, 0.55);
    border-bottom: 3px double rgba(29, 22, 17, 0.55);
    background: rgba(120, 80, 30, 0.05);
}
html.wk .wkc-entry p { margin-bottom: 0.6em; }
html.wk .wkc-entry p:last-child { margin-bottom: 0.2em; }
html.wk .wkc-entry dfn {
    font-family: var(--wk-fell);
    font-style: normal;
    font-size: 1.32em;
    color: var(--wk-vermilion);
}
html.wk .wkc-ipa { font-family: var(--wk-text); color: var(--wk-ink-soft); white-space: nowrap; }
html.wk .wkc-pos { font-style: italic; color: var(--wk-ink-soft); }
html.wk .wkc-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.4rem;
    margin: 0.4rem auto 1.4rem !important;
    padding: 0;
    list-style: none;
    font-family: var(--wk-fell-sc);
    font-size: 0.86em;
    letter-spacing: 0.05em;
    color: var(--wk-ink-soft);
}
html.wk .wkc-meta li { margin: 0; }
html.wk .wkc-meta time { font-variant-numeric: lining-nums; }
html.wk .wkc-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin: 0.6rem auto 0 !important;
    padding: 0;
    list-style: none;
    font-size: 0.92em;
}
html.wk .wkc-jump li { margin: 0; }

/* ---- 3. the catalogue ledger ------------------------------------------- */
html.wk .wkc-ledger td:first-child,
html.wk .wkc-ledger th:first-child { width: 3.2em; text-align: center; }
html.wk .wkc-ledger td:first-child {
    font-family: var(--wk-fell-sc);
    color: var(--wk-vermilion);
    letter-spacing: 0.04em;
}
html.wk .wkc-ledger td:nth-child(2) a { font-weight: 600; }
html.wk .wkc-ledger td:nth-child(4) { color: var(--wk-ink-soft); font-style: italic; }

/* ---- 4. the pieces --------------------------------------------------- */
html.wk .wkc-piece { padding: 1.6rem 0 1.2rem; border-top: 1px solid rgba(29, 22, 17, 0.2); }
html.wk .wkc-piece:first-of-type { border-top: none; padding-top: 0.4rem; }
html.wk .wkc-piece h3 { margin-top: 0.9em; }
html.wk .wkc-shot {
    display: block;
    margin: 0.4rem 0 0;
    padding: 8px;
    background: #2a1a10 url('../img/wood.webp') center / 512px 128px;
    border: 1px solid rgba(29, 22, 17, 0.7);
    outline: 1px solid rgba(29, 22, 17, 0.3);
    outline-offset: 4px;
    box-shadow: 0 6px 14px rgba(60, 40, 20, 0.3);
    line-height: 0;
    text-decoration: none !important;
}
html.wk .wkc-shot img { display: block; width: 100%; height: auto; filter: none; }
html.wk .wkc-shot:hover { box-shadow: 0 6px 14px rgba(60, 40, 20, 0.3), 0 0 0 3px rgba(212, 176, 106, 0.55); }
html.wk .wkc-shot:focus-visible { outline: 2px solid var(--wk-vermilion); outline-offset: 4px; }
html.wk .wkc-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0.2rem 0 1.1rem;
    padding: 0.7rem 0 0.2rem;
    border-top: 1px solid rgba(29, 22, 17, 0.25);
    font-size: 0.86em;
    line-height: 1.45;
}
html.wk .wkc-facts dt {
    font-family: var(--wk-fell-sc);
    letter-spacing: 0.04em;
    color: var(--wk-ink-soft);
}
html.wk .wkc-facts dd { margin: 0; color: var(--wk-ink); }
html.wk .wkc-cta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; align-items: center; margin: 0 0 0.4rem; }
html.wk .wkc-cta .wk-btn { text-decoration: none; }
html.wk .wkc-cta .wk-btn::before { content: none !important; }

/* ---- 5. note cards: how the cabinet works --------------------------- */
html.wk .wkc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1.2rem;
    margin: 1.4rem auto 0.6rem;
    max-width: var(--wk-col);
}
html.wk .wkc-cards .wk-note-card { margin: 0; font-size: 0.86em; }
html.wk .wkc-cards .wk-note-card:nth-child(even) { transform: rotate(0.6deg); }
html.wk .wkc-cards .wk-note-card h3 { margin: 0.1em 0 0.35em; font-size: 1.12em; }
html.wk .wkc-cards .wk-note-card p { margin: 0; }
html.wk .wk-leaf .wk-note-card::before {
    content: '';
    position: absolute;
    top: -9px; left: 50%;
    width: 18px; height: 18px; margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d0453b, #8e1a14 68%, #5a0d0a);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

/* ---- 6. places where a cabinet survives ------------------------------- */
html.wk .wkc-places { padding-left: 0 !important; list-style: none; }
html.wk .wkc-places li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.6em;
}
html.wk .wkc-places li::before {
    content: '\2767';
    position: absolute;
    left: 0; top: 0.05em;
    color: var(--wk-vermilion);
    font-size: 0.9em;
}
html.wk .wkc-sources li { font-size: 0.9em; }

/* ---- 7. phones: the tall picture and its own hot spots ------------------ */
@media (max-width: 700px) {
    html.wk .wkc-hot--iv { --l: 11.13%; --t: 34.43%; --w: 18.49%; --h: 37.25%; }
    html.wk .wkc-hot--iii { --l: 31.51%; --t: 34.43%; --w: 30.32%; --h: 20.17%; }
    html.wk .wkc-hot--ii { --l: 31.51%; --t: 54.6%; --w: 30.32%; --h: 17.09%; }
    html.wk .wkc-hot--i { --l: 63.73%; --t: 53.48%; --w: 25.15%; --h: 18.2%; }
    html.wk .wkc-hot--keeper { --l: 33.76%; --t: 0%; --w: 32.48%; --h: 29.03%; }
    html.wk .wkc-tag { display: none; }
    html.wk .wkc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    html.wk .wkc-legend li:last-child { grid-column: 1 / -1; }
    html.wk .wkc-legend a { display: flex; justify-content: center; text-align: center; font-size: 0.95rem; padding: 0.3rem 0.5rem; }
    html.wk .wkc-cards { grid-template-columns: 1fr; }
    html.wk .wkc-cards .wk-note-card:nth-child(even) { transform: rotate(-0.5deg); }
    /* the ledger becomes a list of entries */
    html.wk .wkc-ledger thead { display: none; }
    html.wk .wkc-ledger, html.wk .wkc-ledger tbody, html.wk .wkc-ledger tr, html.wk .wkc-ledger td { display: block; width: auto; }
    html.wk .wkc-ledger tr { padding: 0.55rem 0.2rem 0.6rem; border-bottom: 1px solid rgba(29, 22, 17, 0.18); }
    html.wk .wkc-ledger tbody tr:nth-child(even) td { background: none; }
    html.wk .wkc-ledger td { padding: 0; border: none; }
    html.wk .wkc-ledger td:first-child { display: inline; width: auto; text-align: left; margin-right: 0.4em; }
    html.wk .wkc-ledger td:nth-child(2) { display: inline; }
    html.wk .wkc-ledger td:nth-child(3) { margin-top: 0.2rem; }
    html.wk .wkc-ledger td:nth-child(4) { font-size: 0.92em; }
    html.wk .wkc-facts { grid-template-columns: 1fr; gap: 0 0; }
    html.wk .wkc-facts dd { margin-bottom: 0.45rem; }
    html.wk .wkc-entry { padding: 0.9rem 0.8rem 0.7rem; }
}

/* ---- 8. reduced motion and print ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html.wk .wkc-hot::before, html.wk .wkc-tag { transition: none; }
}
@media print {
    html.wk .wkc-niche { display: none !important; }
}

/* ---- 9. on wide screens the cabinet stands a little wider than the pages ---- */
@media (min-width: 1180px) {
    html.wk .wkc-niche {
        width: min(1236px, calc(100vw - 72px));
        margin-left: calc((100% - min(1236px, calc(100vw - 72px))) / 2);
        margin-right: 0;
    }
}