/* ═══════════════════════════════════════════════════════════════════════
   ΤΑ ΒΙΒΛΙΑ ΤΗΣ ΕΝΟΡΙΑΣ

   Το ράφι ακολουθεί το χρώμα της σελίδας. Ο θεατής όμως είναι σκοτεινός
   και στα δύο θέματα: τα τεκμήρια πρέπει να λάμπουν, όπως στο
   αναγνωστήριο με τη λάμπα από πάνω.
   ═══════════════════════════════════════════════════════════════════════ */

.knl-arxeio { margin: 0 0 clamp(40px, 6vw, 72px); }

.knl-arxeio__kefali { text-align: center; margin-bottom: clamp(26px, 4vw, 48px); }
.knl-arxeio__kefali h1 {
	margin: 0; font: 400 clamp(2.1rem, 6vw, 3.6rem)/1.06 var(--f-display);
	letter-spacing: -.015em; text-wrap: balance;
}
.knl-arxeio__desc {
	max-width: 58ch; margin: 1rem auto 0;
	font: italic 400 clamp(1.02rem, 2.1vw, 1.18rem)/1.65 var(--f-body);
	color: var(--ink-2);
}

/* ─────────────────────────── ΤΟ ΡΑΦΙ ─────────────────────────── */

.knl-rafi {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(16px, 2.6vw, 26px);
}

.knl-tomos {
	display: flex; flex-direction: column; padding: 0; overflow: hidden;
	border: 1px solid var(--line); border-radius: 3px 8px 8px 3px;
	background: var(--paper-2); color: inherit; text-align: left;
	font: inherit; cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .13), inset 3px 0 0 var(--forest);
	transition: transform .45s var(--ease), box-shadow .45s, border-color .3s;
}
.knl-tomos:hover,
.knl-tomos:focus-visible {
	transform: translateY(-7px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .2), inset 3px 0 0 var(--gold);
	border-color: var(--gold);
}
.knl-tomos:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.knl-tomos__eik {
	display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0d0b08;
}
.knl-tomos__eik canvas { display: block; width: 100%; height: 100%; object-fit: cover; }

.knl-tomos__kato { padding: 1.1rem 1.2rem 1.3rem; }
.knl-tomos__eidos {
	display: block; font: 600 .64rem/1 var(--f-ui);
	letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
}
.knl-tomos__titlos { display: block; margin: .5rem 0 .3rem; font: 400 1.46rem/1.15 var(--f-display); }
.knl-tomos__meta { display: block; font: 400 .93rem/1.5 var(--f-ui); color: var(--ink-3); }

.knl-arxeio__simeioma {
	margin: clamp(22px, 3vw, 34px) 0 0; text-align: center;
	font: 400 .88rem/1.6 var(--f-ui); color: var(--ink-3);
}

/* ────────────────────────── Ο ΘΕΑΤΗΣ ─────────────────────────── */

.knl-theatis {
	position: fixed; inset: 0; z-index: 90;
	display: grid; grid-template-rows: auto 1fr auto;
	background: #0a0907;
	color: #e8e0cc;
	background-image:
		radial-gradient(ellipse 80% 55% at 50% 40%, rgba(201, 162, 39, .10), transparent 70%);
}
.knl-theatis[hidden] { display: none; }

.knl-theatis__bar {
	display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
	padding: .7rem clamp(12px, 2vw, 20px);
	padding-top: calc(.7rem + env(safe-area-inset-top, 0px));
	border-bottom: 1px solid rgba(232, 224, 204, .14);
}
.knl-theatis__bar h2 { margin: 0; font: 400 1.04rem/1.2 var(--f-display); }
.knl-theatis__etos { font: 400 .9rem/1 var(--f-ui); color: #9d947c; }

.knl-koumpi {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .44rem .9rem; background: transparent; color: #e8e0cc;
	border: 1px solid rgba(232, 224, 204, .18); border-radius: 999px;
	font: 500 .88rem/1 var(--f-ui); cursor: pointer;
	transition: border-color .25s, color .25s;
}
.knl-koumpi:hover:not([disabled]) { border-color: #c9a227; color: #c9a227; }
.knl-koumpi[disabled] { opacity: .3; cursor: default; }
.knl-koumpi--kleisimo { margin-left: auto; }

/* Η σκηνή: εδώ κάθεται το βιβλίο */
.knl-skini {
	position: relative; display: grid; place-items: center; overflow: hidden;
	padding: clamp(8px, 1.6vw, 18px); perspective: 2400px;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.knl-vivlio {
	position: relative; display: flex; transform-style: preserve-3d;
	filter: drop-shadow(0 22px 50px rgba(0, 0, 0, .72));
}
/* Η ράχη: η σκιά που πέφτει στο δέσιμο των δύο σελίδων */
.knl-vivlio::after {
	content: ""; position: absolute; inset-block: 0; left: 50%; width: 46px;
	transform: translateX(-50%); pointer-events: none; z-index: 6;
	background: linear-gradient(90deg, transparent,
		rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .54) 50%, rgba(0, 0, 0, .42) 58%, transparent);
}
.knl-vivlio.is-mono::after { display: none; }

.knl-plevra { position: relative; overflow: hidden; background: #0d0b08; }
.knl-plevra canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

/* Το φύλλο που γυρίζει */
.knl-fyllo {
	position: absolute; top: 0; z-index: 8; transform-style: preserve-3d;
	transition: transform .78s cubic-bezier(.42, .02, .28, 1);
}
.knl-fyllo[hidden] { display: none; }
.knl-opsi {
	position: absolute; inset: 0; overflow: hidden;
	background: #0d0b08; backface-visibility: hidden;
}
.knl-opsi canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.knl-opsi--piso { transform: rotateY(180deg); }
/* Η σκιά που σαρώνει το φύλλο καθώς σηκώνεται */
.knl-opsi::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 32%);
	opacity: 0; transition: opacity .78s;
}
.knl-fyllo.is-kinisi .knl-opsi::after { opacity: 1; }

/* Ο φακός */
.knl-fakos {
	position: absolute; z-index: 20; border-radius: 50%; pointer-events: none;
	border: 2px solid rgba(201, 162, 39, .66);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 40px rgba(0, 0, 0, .7);
}
.knl-fakos[hidden] { display: none; }

.knl-fortosi {
	position: absolute; inset-inline: 0; bottom: 10px; margin: 0; text-align: center;
	font: 400 .84rem/1 var(--f-ui); color: #9d947c; pointer-events: none;
}
.knl-fortosi[hidden] { display: none; }

/* Το κάτω μέρος */
.knl-theatis__kato {
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	padding: .7rem clamp(12px, 2vw, 20px);
	padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(232, 224, 204, .14);
}
.knl-theatis__grammi { display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 2vw, 1.4rem); }
.knl-metritis {
	font: 500 .95rem/1 var(--f-ui); font-variant-numeric: tabular-nums;
	min-width: 20ch; text-align: center;
}

.knl-slider { display: block; width: min(520px, 100%); }
.knl-slider__etiketa {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.knl-slider input {
	width: 100%; accent-color: #c9a227; cursor: pointer;
}

.knl-ypodeixi {
	margin: 0; text-align: center;
	font: 400 .82rem/1.4 var(--f-ui); color: #9d947c;
}

@media (max-width: 560px) {
	.knl-metritis { min-width: 0; font-size: .86rem; }
	.knl-ypodeixi { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.knl-fyllo { transition-duration: .01s; }
	.knl-tomos { transition: none; }
}

@media print {
	.knl-theatis { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ΤΟ ΨΑΧΤΗΡΙ ΤΩΝ ΟΝΟΜΑΤΩΝ

   Κάθεται πάνω ἀπὸ τὸ ῥάφι, γιατὶ ὁ ἐπισκέπτης ποὺ ψάχνει πρόγονο δὲν
   θέλει νὰ ξεφυλλίσει 252 σελίδες — θέλει νὰ γράψει ἕνα ὄνομα.
   ═══════════════════════════════════════════════════════════════════════ */

.knl-psaxtiri {
	margin: 0 0 clamp(30px, 5vw, 54px);
	padding: clamp(20px, 3.4vw, 34px);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: 2px;
	background: var(--paper-2);
}
.knl-psaxtiri[hidden] { display: none; }

.knl-psaxtiri__kefali h2 {
	margin: 0 0 .5rem;
	font: 400 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--f-display);
}
.knl-psaxtiri__kefali p {
	margin: 0 0 1.2rem; max-width: 62ch;
	font: 400 .95rem/1.65 var(--f-ui); color: var(--ink-3);
}

/* Τὸ σημάδι τῆς ἀμφιβολίας: διακριτικὸ ἀλλὰ ὁρατό */
.knl-amfivolia {
	color: var(--kokkino, #a8372a); font-weight: 600;
	font-size: .92em; letter-spacing: .02em;
}

.knl-psaxtiri__pedio { position: relative; display: block; max-width: 540px; }
.knl-psaxtiri__etiketa {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.knl-psaxtiri__pedio input {
	width: 100%; padding: .78rem 2.4rem .78rem 1rem;
	border: 1px solid var(--line); border-radius: 999px;
	background: var(--paper); color: var(--ink);
	font: 400 1.04rem/1.3 var(--f-ui);
	transition: border-color .25s, box-shadow .25s;
}
.knl-psaxtiri__pedio input:focus {
	outline: none; border-color: var(--gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.knl-psaxtiri__x {
	position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--ink-3); font-size: 1.3rem; cursor: pointer;
}
.knl-psaxtiri__x:hover { color: var(--ink); }
.knl-psaxtiri__x[hidden] { display: none; }

/* Τὰ ὀνόματα ποὺ ἐπαναλαμβάνονται πιὸ συχνά: ἕνα πάτημα ἀντὶ γιὰ πληκτρολόγησι */
.knl-oikogeneies { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; }
.knl-oik {
	padding: .34rem .78rem; border: 1px solid var(--line); border-radius: 999px;
	background: transparent; color: var(--ink-2); cursor: pointer;
	font: 400 .88rem/1 var(--f-ui);
	transition: border-color .2s, color .2s, background .2s;
}
.knl-oik:hover { border-color: var(--gold); color: var(--ink); background: var(--paper); }
.knl-oik small { color: var(--gold); font-weight: 600; margin-left: .2rem; }

.knl-psaxtiri__metritis {
	margin: 1.1rem 0 .5rem; font: 500 .88rem/1 var(--f-ui); color: var(--ink-3);
}

/* ── Τὰ εὑρήματα ──────────────────────────────────────────── */

.knl-apotelesmata { display: grid; gap: .5rem; }

.knl-evr {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: clamp(.8rem, 2vw, 1.6rem);
	padding: .85rem 1rem;
	border: 1px solid var(--line); border-radius: 3px;
	background: var(--paper); cursor: pointer;
	transition: border-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.knl-evr:hover {
	border-color: var(--gold); transform: translateX(3px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .09);
}
.knl-evr__kyrio { min-width: 0; }
.knl-evr h3 { margin: 0 0 .22rem; font: 400 1.16rem/1.25 var(--f-display); }
.knl-evr__goneis, .knl-evr__meta {
	margin: 0; font: 400 .88rem/1.5 var(--f-ui); color: var(--ink-3);
}
.knl-evr__sim {
	margin: .3rem 0 0; font: italic 400 .84rem/1.4 var(--f-body); color: var(--ink-3);
}

.knl-evr__deksia {
	display: flex; flex-direction: column; align-items: flex-end; gap: .14rem;
	flex-shrink: 0; text-align: right;
}
.knl-evr__vivlio {
	font: 600 .62rem/1 var(--f-ui); letter-spacing: .16em;
	text-transform: uppercase; color: var(--gold);
}
.knl-evr__etos {
	font: 500 1.1rem/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink);
}
.knl-evr__imer { font: 400 .8rem/1.3 var(--f-ui); color: var(--ink-3); }
.knl-evr__anoixe {
	margin-top: .25rem; font: 500 .78rem/1 var(--f-ui); color: var(--ink-3);
	opacity: 0; transition: opacity .22s;
}
.knl-evr:hover .knl-evr__anoixe { opacity: 1; color: var(--gold); }

.knl-evr__kena {
	margin: 0; padding: 1.2rem; text-align: center;
	font: 400 .96rem/1.6 var(--f-ui); color: var(--ink-3);
	border: 1px dashed var(--line); border-radius: 3px;
}

@media (max-width: 620px) {
	.knl-evr { flex-direction: column; gap: .5rem; }
	.knl-evr__deksia { flex-direction: row; align-items: center; gap: .6rem; text-align: left; }
	.knl-evr__anoixe { opacity: 1; margin: 0 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) { .knl-evr { transition: none; } }

/* Οἱ καρτέλλες τῶν βιβλίων: ἕνα ὄνομα βρίσκεται σὲ γέννησι ΚΑΙ σὲ ἀποβίωσι,
   κι ἕνα ἑνιαῖο κατεβατὸ θὰ κούραζε. Βγαίνουν μόνο ὅταν χρειάζονται. */
.knl-kartelles {
	display: flex; flex-wrap: wrap; gap: .4rem;
	margin: 1.1rem 0 0; padding-bottom: .7rem;
	border-bottom: 1px solid var(--line);
}
.knl-kartelles[hidden] { display: none; }

.knl-kartella {
	padding: .42rem .95rem; border: 1px solid var(--line); border-radius: 999px;
	background: transparent; color: var(--ink-2); cursor: pointer;
	font: 500 .9rem/1 var(--f-ui);
	transition: background .2s, border-color .2s, color .2s;
}
.knl-kartella:hover { border-color: var(--gold); color: var(--ink); }
.knl-kartella small {
	margin-left: .3rem; font-weight: 600; font-size: .86em; color: var(--ink-3);
}
.knl-kartella.is-on {
	background: var(--forest); border-color: var(--forest); color: var(--paper);
}
.knl-kartella.is-on small { color: var(--gold); }