/* Kekri Visual Library: figures, Archive Lens, Then/Now, field journal. Inherits colour from its section. */

.kekri-root .kl-figure { margin: 0; display: flex; flex-direction: column; gap: 14px; color: inherit; }
.kekri-root .kl-frame { position: relative; overflow: hidden; background: rgba(127, 110, 86, 0.18); }
.kekri-root .kl-frame .kl-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kekri-root .kl-frame:not([style]) .kl-img { height: auto; }
.kekri-root .kl-open { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.kekri-root .kl-open:focus-visible { outline: 2px solid var(--k-amber); outline-offset: 3px; }
.kekri-root .kl-figure--archival .kl-img { filter: sepia(0.08) contrast(1.02); }
.kekri-root .kl-badge { position: absolute; left: 12px; top: 12px; padding: 4px 8px; background: rgba(14, 13, 16, 0.82); color: #EDE5D3; font-family: var(--k-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; }

.kekri-root .kl-cap { display: flex; flex-direction: column; gap: 6px; }
.kekri-root .kl-tier { font-family: var(--k-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.kekri-root .kl-text { font-size: 15px; line-height: 1.5; }
.kekri-root .kl-rec { font-size: 13px; }
.kekri-root .kl-rec summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-family: var(--k-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; list-style: none; }
.kekri-root .kl-rec summary::-webkit-details-marker { display: none; }
.kekri-root .kl-rec summary::before { content: "+"; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border: 1px solid currentColor; font-size: 12px; }
.kekri-root .kl-rec[open] summary::before { content: "\2212"; }
.kekri-root .kl-dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--k-mono); font-size: 11px; }
.kekri-root .kl-dl div { display: flex; gap: 12px; }
.kekri-root .kl-dl dt { flex: none; width: 90px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; }
.kekri-root .kl-dl dd { margin: 0; }
.kekri-root .kl-dl a, .kekri-root .kl-recordlink { text-decoration: underline; text-underline-offset: 3px; }
.kekri-root .kl-recordlink { display: inline-block; margin-top: 10px; font-family: var(--k-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.kekri-root .kl-attr { margin-top: 10px !important; font-size: 13px; line-height: 1.5; opacity: 0.8; }

.kekri-root .kl-placeholder { display: flex; align-items: flex-end; padding: 16px; }
.kekri-root .kl-placeholder span { font-family: var(--k-mono); font-size: 10px; line-height: 1.5; opacity: 0.75; max-width: 280px; }

/* ---------- Archive Lens ---------- */
.kl-lens { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0B0A0D; color: #EDE5D3; }
.kl-lens::backdrop { background: #0B0A0D; }
.kl-lens__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: 100%; font-family: "Kekri Newsreader", Georgia, serif; }
.kl-lens__stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; touch-action: none; }
.kl-lens__stage.is-zoomed { cursor: grab; }
.kl-lens__stage.is-dragging { cursor: grabbing; }
.kl-lens__img { max-width: 92%; max-height: 92%; transform-origin: center center; user-select: none; -webkit-user-drag: none; }
.kl-lens__side { overflow-y: auto; padding: 32px 28px; border-left: 1px solid #2A2530; display: flex; flex-direction: column; gap: 16px; }
.kl-lens__side .kl-tier { font-family: "Kekri Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #E39A35; }
.kl-lens__title { margin: 0; font-family: "Kekri Gloock", Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; }
.kl-lens__side .kl-text { font-size: 16px; line-height: 1.55; color: #D8CDB7; }
.kl-lens__side .kl-dl { margin: 0; display: flex; flex-direction: column; gap: 6px; font-family: "Kekri Mono", monospace; font-size: 11px; }
.kl-lens__side .kl-dl div { display: flex; gap: 12px; }
.kl-lens__side .kl-dl dt { width: 90px; flex: none; color: #8A7C66; text-transform: uppercase; letter-spacing: 0.08em; }
.kl-lens__side .kl-dl dd { margin: 0; }
.kl-lens__side a { color: #EDE5D3; text-decoration: underline; text-underline-offset: 3px; }
.kl-lens__side .kl-recordlink { font-family: "Kekri Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.kl-lens__side .kl-attr { margin: 0; font-size: 13px; line-height: 1.5; color: #A89C86; }
.kl-lens__tools { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.kl-lens__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #8A7C66; background: rgba(14, 13, 16, 0.8); color: #EDE5D3; font: 16px/1 "Kekri Mono", monospace; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kl-lens__btn:hover, .kl-lens__btn:focus-visible { border-color: #E39A35; color: #E39A35; outline: none; }
.kl-lens__close { position: absolute; right: 16px; top: 16px; }
.kl-lens__hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: "Kekri Mono", monospace; font-size: 10px; letter-spacing: 0.1em; color: #8A7C66; pointer-events: none; white-space: nowrap; }
@media (max-width: 860px) {
	.kl-lens__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
	.kl-lens__side { max-height: 42vh; border-left: 0; border-top: 1px solid #2A2530; padding: 20px; }
	.kl-lens__hint { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.kl-lens__img { transition: transform 0.25s ease; }
	.kl-lens__stage.is-dragging .kl-lens__img { transition: none; }
}

/* ---------- Then / Now ---------- */
.kekri-root .kl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kekri-root .kl-cmp { margin: 0; }
.kekri-root .kl-cmp__stage { position: relative; overflow: hidden; }
.kekri-root .kl-cmp__img { display: block; width: 100%; height: auto; max-width: none; }
.kekri-root .kl-cmp__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--kl-pos)); }
.kekri-root .kl-cmp__after .kl-cmp__img { width: 100%; height: 100%; object-fit: cover; }
.kekri-root .kl-cmp__line { position: absolute; top: 0; bottom: 0; left: var(--kl-pos); width: 1px; background: #EDE5D3; }
.kekri-root .kl-cmp__ctl { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-family: var(--k-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.kekri-root .kl-cmp__ctl input { flex: 1 1 auto; min-height: 44px; accent-color: #A57950; }
.kekri-root .kl-cmp__caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }

/* ---------- Field journal page ---------- */
.kekri-root.kl-journal-page { background: #EDE5D3; color: #1B1712; }
.kekri-root .kl-journal-head { background: #0E0D10; color: #EDE5D3; padding-bottom: 88px; }
.kekri-root .kl-wrap { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.kekri-root .kl-journal-intro { padding-top: 64px; }
.kekri-root .kl-kicker { font-family: var(--k-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #D9C9A8; margin-bottom: 20px; }
.kekri-root .kl-h1 { font-family: var(--k-display); font-size: clamp(56px, 8vw, 128px); line-height: 0.92; letter-spacing: -0.015em; }
.kekri-root .kl-lede { margin-top: 28px !important; max-width: 620px; font-size: 18px; color: #D8CDB7; }
.kekri-root .kl-journal { padding-top: 64px; padding-bottom: 120px; }
.kekri-root .kl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.kekri-root .kl-chip { min-height: 40px; padding: 0 16px; border: 1px solid #B8AC94; font-family: var(--k-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #4A4033; }
.kekri-root .kl-chip[aria-pressed="true"] { background: #1B1712; border-color: #1B1712; color: #EDE5D3; }
.kekri-root .kl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 32px; }
.kekri-root .kl-grid__item { grid-column: span 4; }
.kekri-root .kl-grid__item--0 { grid-column: span 7; }
.kekri-root .kl-grid__item--1 { grid-column: span 5; padding-top: 120px; }
.kekri-root .kl-grid__item--3 { grid-column: 2 / span 5; }
.kekri-root .kl-grid__item[hidden] { display: none; }
.kekri-root .kl-empty { font-size: 20px; max-width: 560px; color: #4A4033; }
@media (max-width: 860px) {
	.kekri-root .kl-wrap { padding: 0 20px; }
	.kekri-root .kl-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.kekri-root .kl-grid__item, .kekri-root .kl-grid__item--0, .kekri-root .kl-grid__item--1, .kekri-root .kl-grid__item--3 { grid-column: 1; padding-top: 0; }
	.kekri-root .kl-pair, .kekri-root .kl-cmp__caps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Placement inside the Story page ---------- */
.kekri-story .ks-feast__media { margin-top: 40px; max-width: 520px; }
.kekri-story .ks-evidence { margin: -24px 0 80px; }
.kekri-story .ks-evidence__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 880px; }
.kekri-story .ks-time__figure { max-width: 520px; margin-top: 56px; margin-left: auto; }
.kekri-story .ks-archive__body { display: flex; flex-direction: column; gap: 48px; }
.kekri-story .ks-archive__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
@media (max-width: 760px) {
	.kekri-story .ks-evidence__grid { grid-template-columns: minmax(0, 1fr); }
	.kekri-story .ks-evidence { margin: 0 0 56px; }
}