/* ═══════════════════════════════════════════════════════════════════════
   Ο ΕΜΜΕΤΡΟΣ — η έμμετρη σάτιρα του Κώστα Κωστούλα

   Δύο όψεις: το ΦΥΛΛΟ (η κατηγορία, σαν πρωτοσέλιδο εφημερίδας του '90)
   και το ΠΟΙΗΜΑ (το άρθρο, με απαγγελία και ομοιοκαταληξίες).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	--emm-xarti: #f2e9d5;
	--emm-melani: #221c14;
	--emm-kokkino: #9c2f21;
	--emm-skia: 0 2px 6px rgba(34, 28, 20, .14);
}

:root[data-theme="dark"] .knl-emm,
:root[data-theme="dark"] .knl-fyllo {
	--emm-xarti: #241f18;
	--emm-melani: #e8dfcb;
	--emm-kokkino: #d8705c;
	--emm-skia: 0 2px 10px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .knl-emm,
	:root:not([data-theme="light"]) .knl-fyllo {
		--emm-xarti: #241f18;
		--emm-melani: #e8dfcb;
		--emm-kokkino: #d8705c;
		--emm-skia: 0 2px 10px rgba(0, 0, 0, .5);
	}
}

/* Το χαρτί: ίνες και κιτρίνισμα, όχι εικόνα — μηδέν βάρος */
.knl-xarti {
	background-color: var(--emm-xarti);
	background-image:
		radial-gradient(circle at 18% 22%, rgba(140, 110, 60, .07) 0 38%, transparent 39%),
		radial-gradient(circle at 82% 70%, rgba(140, 110, 60, .06) 0 30%, transparent 31%),
		repeating-linear-gradient(0deg, rgba(90, 70, 40, .022) 0 1px, transparent 1px 3px);
}

/* ─────────────────────────── 1. ΤΟ ΦΥΛΛΟ ─────────────────────────── */

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

.knl-fyllo__head {
	position: relative;
	padding: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 38px) clamp(22px, 3vw, 34px);
	border: 2px solid var(--emm-melani);
	border-left-width: 1px; border-right-width: 1px;
	color: var(--emm-melani);
	text-align: center;
	box-shadow: var(--emm-skia);
}

.knl-fyllo__kicker {
	display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap;
	margin: 0 0 .7rem;
	font: 600 .64rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase;
	opacity: .72;
}

.knl-fyllo__title {
	margin: 0; font: 400 clamp(2.7rem, 9vw, 6.4rem)/.9 var(--f-display);
	letter-spacing: -.02em;
}

.knl-fyllo__rule {
	display: flex; align-items: center; gap: .9rem;
	margin: .9rem auto 0; max-width: 540px;
	font: italic 400 1.02rem/1.4 var(--f-body);
}
.knl-fyllo__rule::before,
.knl-fyllo__rule::after {
	content: ""; flex: 1; height: 0;
	border-top: 1px solid currentColor; opacity: .4;
}

/* Το τυχαίο δίστιχο: ο Έμμετρος «μιλά» σε κάθε φόρτωση */
.knl-fyllo__quote {
	max-width: 660px; margin: clamp(22px, 3vw, 34px) auto 0;
	padding: 1.1rem 1.4rem;
	border-top: 1px solid color-mix(in srgb, var(--emm-melani) 28%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--emm-melani) 28%, transparent);
	color: var(--emm-melani);
	font: italic 400 clamp(1.08rem, 2.1vw, 1.32rem)/1.62 var(--f-body);
	text-align: center;
}
.knl-fyllo__quote span { display: block; }
.knl-fyllo__quote cite {
	display: block; margin-top: .55rem;
	font: 600 .66rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase;
	font-style: normal; opacity: .62;
}

/* Οι κάρτες σε στήλες εφημερίδας */
.knl-fyllo__grid {
	margin-top: clamp(26px, 4vw, 44px);
	columns: 3 280px; column-gap: clamp(16px, 2.2vw, 26px);
}
@media (max-width: 720px) { .knl-fyllo__grid { columns: 1; } }

.knl-koupa {
	display: block; break-inside: avoid; margin: 0 0 clamp(16px, 2.2vw, 26px);
	padding: clamp(18px, 2.4vw, 26px);
	border: 1px solid color-mix(in srgb, var(--emm-melani) 26%, transparent);
	color: var(--emm-melani); text-decoration: none;
	box-shadow: var(--emm-skia);
	transition: transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
.knl-koupa:hover,
.knl-koupa:focus-visible {
	transform: translateY(-4px) rotate(-.35deg);
	box-shadow: 0 14px 30px rgba(34, 28, 20, .2);
	border-color: var(--emm-kokkino);
}

.knl-koupa__no {
	display: inline-block; margin-bottom: .5rem;
	font: 600 .6rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase;
	color: var(--emm-kokkino);
}
.knl-koupa__title {
	margin: 0 0 .6rem; font: 400 clamp(1.18rem, 2.1vw, 1.44rem)/1.16 var(--f-display);
	hyphens: auto;
}
.knl-koupa__lead {
	margin: 0; font: italic 400 .96rem/1.55 var(--f-body);
	opacity: .82;
}
.knl-koupa__meta {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: .9rem; padding-top: .6rem;
	border-top: 1px solid color-mix(in srgb, var(--emm-melani) 18%, transparent);
	font: 600 .66rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase;
	opacity: .66;
}
.knl-koupa:hover .knl-koupa__meta { opacity: 1; }

/* ─────────────────────────── 2. ΤΟ ΠΟΙΗΜΑ ─────────────────────────── */

.knl-emm { margin: clamp(24px, 4vw, 40px) 0; }

.knl-emm__bar {
	position: sticky; top: calc(var(--header-h) + 8px); z-index: 12;
	display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px); flex-wrap: wrap;
	margin-bottom: clamp(18px, 2.6vw, 28px);
	padding: .62rem .8rem;
	background: color-mix(in srgb, var(--paper) 90%, transparent);
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid var(--line); border-radius: 999px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.knl-emm__btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .46rem 1.05rem;
	background: transparent; color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px;
	font: 600 .88rem/1 var(--f-ui); cursor: pointer;
	transition: background .25s, color .25s, border-color .25s;
}
.knl-emm__btn svg { width: 17px; height: 17px; fill: currentColor; }
.knl-emm__btn:hover { border-color: var(--gold); }

.knl-emm__btn[aria-pressed="true"] {
	background: var(--forest); color: var(--paper); border-color: var(--forest);
}
.knl-emm__btn--rimes[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1b1407; }

.knl-emm__count { margin-left: auto; font: 500 .78rem/1 var(--f-ui); opacity: .62; }
.knl-emm__count strong { font-size: 1.04rem; }

/* Το φύλλο όπου κάθεται το ποίημα */
.knl-emm__sheet {
	padding: clamp(26px, 5vw, 60px) clamp(20px, 4vw, 54px);
	border: 1px solid color-mix(in srgb, var(--emm-melani) 20%, transparent);
	color: var(--emm-melani);
	box-shadow: var(--emm-skia);
}

.knl-emm__strofi { margin: 0 0 1.9rem; }
.knl-emm__strofi:last-child { margin-bottom: 0; }

.knl-emm__stixos {
	position: relative;
	margin: 0; padding: .16rem 0 .16rem .8rem;
	font: 400 clamp(1.02rem, 1.9vw, 1.2rem)/1.72 var(--f-body);
	transition: color .5s, opacity .5s, background .35s;
}

/* ── Οι ομοιοκαταληξίες: οκτώ χρώματα που ξεχωρίζουν και στα δύο θέματα */
.knl-emm.is-rimes .knl-emm__stixos[data-rima] {
	background: linear-gradient(90deg, transparent, var(--rima-bg) 12%, var(--rima-bg) 88%, transparent);
	box-shadow: inset 0 -2px 0 0 var(--rima-line);
}
.knl-emm.is-rimes .knl-emm__stixos[data-rima="0"] { --rima-bg: rgba(200, 60, 40, .13);  --rima-line: rgba(200, 60, 40, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="1"] { --rima-bg: rgba(40, 120, 90, .13);  --rima-line: rgba(40, 120, 90, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="2"] { --rima-bg: rgba(60, 100, 180, .13); --rima-line: rgba(60, 100, 180, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="3"] { --rima-bg: rgba(180, 130, 20, .15); --rima-line: rgba(180, 130, 20, .55); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="4"] { --rima-bg: rgba(140, 70, 160, .13); --rima-line: rgba(140, 70, 160, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="5"] { --rima-bg: rgba(0, 130, 140, .13);  --rima-line: rgba(0, 130, 140, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="6"] { --rima-bg: rgba(190, 90, 30, .14);  --rima-line: rgba(190, 90, 30, .5); }
.knl-emm.is-rimes .knl-emm__stixos[data-rima="7"] { --rima-bg: rgba(90, 110, 50, .14);  --rima-line: rgba(90, 110, 50, .5); }

/* Πέρασμα του ποντικιού: ανάβει το ταίρι του στίχου */
.knl-emm__stixos.is-pair {
	background: color-mix(in srgb, var(--gold) 22%, transparent) !important;
	box-shadow: inset 0 -2px 0 0 var(--gold) !important;
}

.knl-emm__hint {
	margin: 1.1rem 0 0; text-align: center;
	font: 400 .88rem/1.6 var(--f-ui); color: var(--ink-3);
	transition: opacity .4s;
}
.knl-emm.is-rimes .knl-emm__hint { opacity: 0; }

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

@media print {
	.knl-emm__bar, .knl-emm__hint { display: none; }
	.knl-emm__sheet { box-shadow: none; border: 0; padding: 0; }
}