/* ==========================================================================
   கலித்தொகை · Kalittokai — Peacock Teal & Kali-Drum Theme
   150 dramatic poems in kali metre · c. 300 BCE – 300 CE
   One of the Eight Sangam Anthologies (Eṭṭutokai)

   Visual identity: peacock teal, iridescent blue-green, kali-drum dark,
   with five tiṇai-accent colours that shift like light on a peacock's feather.

   The Kalittokai is the most theatrically vivid Sangam anthology — poems of
   debate, dramatic reversal, alternating voices, lovers arguing and conceding.
   The kali metre is percussive and dance-like: insistent, rhythmically complex,
   the metre of the drum-dance. Where the Kuṟuntokai is moonlight on still water,
   the Kalittokai is the peacock dancing in the rain — iridescent, insistent,
   spectacular.

   None of the other anthologies in this library has claimed teal. The peacock
   (mayil) is the bird of kurinji, the dancer in the rains, the emblem of beauty
   that performs. It is this anthology's animal, this theme's colour.
   ========================================================================== */

:root {
  /* Primary teal palette */
  --kl-teal:        #0d5c6e;   /* deep peacock teal */
  --kl-teal-mid:    #1a7a8a;   /* mid teal */
  --kl-teal-bright: #2a9aaa;   /* bright teal */
  --kl-teal-pale:   rgba(13,92,110,0.10);
  --kl-teal-pale2:  rgba(13,92,110,0.06);

  /* Peacock iridescence — secondary accents */
  --kl-indigo:      #2c3a7a;   /* peacock-eye indigo */
  --kl-emerald:     #0d6e4a;   /* peacock-neck emerald */
  --kl-violet:      #4a2a7a;   /* peacock-tail violet */
  --kl-copper:      #8a4a18;   /* warm ground-copper */
  --kl-gold:        #c8a020;   /* gold highlight */

  /* Five tiṇai book colours — each a different facet of teal */
  --kl-palai:    #6e2a18;   /* Pālaikali  — desert-burnt sienna */
  --kl-kurinji:  #0d5c6e;   /* Kuṟiñcikali — mountain teal */
  --kl-mullai:   #1a5e2a;   /* Mullaikkali — forest deep-green */
  --kl-marutam:  #1e3a7a;   /* Marutakali  — river slate-blue */
  --kl-neytal:   #2a5a7a;   /* Neyṭalkali  — sea blue-grey */

  /* Override site palette */
  --accent-vermillion: var(--kl-teal);
  --accent-kumkum:     var(--kl-teal-mid);
  --accent-ochre:      var(--kl-gold);
  --accent-gold:       var(--kl-teal);
}

/* ---------------------------------------------------------------------------
   Background: deep blue-green palm-leaf
   --------------------------------------------------------------------------- */
body { background: #bec8c4; }
body::before {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(13,92,110,0.025) 3px, rgba(13,92,110,0.025) 4px),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 60px,
      rgba(13,92,110,0.04) 60px, rgba(13,92,110,0.04) 61px,
      transparent 61px, transparent 140px,
      rgba(13,92,110,0.025) 140px, rgba(13,92,110,0.025) 142px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.22 0 0 0 0 0.27 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */
.site-header { border-bottom-color: rgba(13,92,110,0.3); }
.site-logo .mark { color: var(--kl-teal); }
.wordmark-tamil { color: var(--kl-teal); }
.site-nav a { color: var(--kl-teal); }
.site-nav a:hover { color: var(--kl-teal-mid); }
a { color: var(--kl-teal); }
a:hover { color: var(--kl-teal-mid); }

/* ---------------------------------------------------------------------------
   Index — five tiṇai section cards
   --------------------------------------------------------------------------- */
.kl-sections {
  max-width: 980px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 480px) { .kl-sections { grid-template-columns: 1fr; } }

.kl-section-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: 5px;
  overflow: hidden;
  padding: 2rem 2.25rem 1.75rem;
  background: var(--bg-paper);
  background-image: repeating-linear-gradient(0deg,
    rgba(13,92,110,0.018) 0px, rgba(13,92,110,0.018) 1px,
    transparent 1px, transparent 8px);
  border: 1px solid rgba(13,92,110,0.25);
  box-shadow: 0 2px 6px rgba(5,40,50,0.08), 0 6px 24px rgba(5,40,50,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kl-section-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(5,40,50,0.15), 0 12px 36px rgba(5,40,50,0.09);
  border-color: rgba(13,92,110,0.5);
}
.kl-section-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.kl-section-card[data-tinai="palai"]   ::before,
.kl-section-card[data-tinai="palai"]::before   { background: linear-gradient(180deg,#6e2a18,#8a3a28); }
.kl-section-card[data-tinai="kurinji"]::before { background: linear-gradient(180deg,#0d5c6e,#1a7a8a); }
.kl-section-card[data-tinai="mullai"]::before  { background: linear-gradient(180deg,#1a5e2a,#2a7a3a); }
.kl-section-card[data-tinai="marutam"]::before { background: linear-gradient(180deg,#1e3a7a,#2a4a8a); }
.kl-section-card[data-tinai="neytal"]::before  { background: linear-gradient(180deg,#2a5a7a,#3a6a8a); }
.kl-section-card::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(13,92,110,0.35);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.kl-sec-num { font-family: var(--font-display); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .5rem; }
.kl-sec-tamil { font-family: var(--font-tamil); font-size: 1.75rem; font-weight: 800; color: var(--ink-primary); line-height: 1.15; margin-bottom: .15rem; }
.kl-sec-eng { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; margin-bottom: .9rem; }
.kl-section-card[data-tinai="palai"]   .kl-sec-eng { color: var(--kl-palai); }
.kl-section-card[data-tinai="kurinji"] .kl-sec-eng { color: var(--kl-kurinji); }
.kl-section-card[data-tinai="mullai"]  .kl-sec-eng { color: var(--kl-mullai); }
.kl-section-card[data-tinai="marutam"] .kl-sec-eng { color: var(--kl-marutam); }
.kl-section-card[data-tinai="neytal"]  .kl-sec-eng { color: var(--kl-neytal); }
.kl-sec-desc { font-size: .95rem; line-height: 1.7; color: var(--ink-secondary); margin-bottom: 1.25rem; }
.kl-sec-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.kl-sec-count { font-size: .75rem; color: var(--ink-muted); letter-spacing: .1em; }
.kl-sec-cta { font-family: var(--font-display); font-style: italic; font-size: .9rem; opacity: 0; transition: opacity .2s ease; }
.kl-section-card[data-tinai="palai"]   .kl-sec-cta { color: var(--kl-palai); }
.kl-section-card[data-tinai="kurinji"] .kl-sec-cta { color: var(--kl-kurinji); }
.kl-section-card[data-tinai="mullai"]  .kl-sec-cta { color: var(--kl-mullai); }
.kl-section-card[data-tinai="marutam"] .kl-sec-cta { color: var(--kl-marutam); }
.kl-section-card[data-tinai="neytal"]  .kl-sec-cta { color: var(--kl-neytal); }
.kl-section-card:hover .kl-sec-cta { opacity: 1; }

/* ---------------------------------------------------------------------------
   Section page — poem grid
   --------------------------------------------------------------------------- */
.kl-section-banner {
  padding: 2rem 2.5rem 1.75rem;
  border-radius: 5px;
  color: white;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.kl-section-banner[data-tinai="palai"]   { background: linear-gradient(135deg,#6e2a18,#4a1808); }
.kl-section-banner[data-tinai="kurinji"] { background: linear-gradient(135deg,#0d5c6e,#083848); }
.kl-section-banner[data-tinai="mullai"]  { background: linear-gradient(135deg,#1a5e2a,#103818); }
.kl-section-banner[data-tinai="marutam"]{ background: linear-gradient(135deg,#1e3a7a,#102858); }
.kl-section-banner[data-tinai="neytal"] { background: linear-gradient(135deg,#2a5a7a,#183848); }
.kl-section-banner::after {
  content: '';
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.18);
}
.kl-banner-num { font-family: var(--font-display); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; opacity: .7; margin-bottom: .5rem; }
.kl-banner-tamil { font-family: var(--font-tamil); font-size: clamp(1.75rem,4vw,2.4rem); font-weight: 800; line-height: 1.1; margin-bottom: .2rem; }
.kl-banner-eng { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; opacity: .85; margin-bottom: .75rem; }
.kl-banner-desc { font-size: .9rem; line-height: 1.6; opacity: .75; max-width: 680px; }

/* Poem card grid */
.kl-poem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.kl-poem-card {
  display: block;
  background: var(--bg-paper);
  background-image: repeating-linear-gradient(0deg,
    rgba(13,92,110,0.018) 0px, rgba(13,92,110,0.018) 1px,
    transparent 1px, transparent 8px);
  border: 1px solid rgba(13,92,110,0.22);
  border-left: 4px solid transparent;
  border-radius: 4px;
  padding: 1.1rem 1.3rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 1px 3px rgba(5,40,50,0.06);
}
.kl-poem-card[data-tinai="palai"]   { border-left-color: var(--kl-palai); }
.kl-poem-card[data-tinai="kurinji"] { border-left-color: var(--kl-kurinji); }
.kl-poem-card[data-tinai="mullai"]  { border-left-color: var(--kl-mullai); }
.kl-poem-card[data-tinai="marutam"] { border-left-color: var(--kl-marutam); }
.kl-poem-card[data-tinai="neytal"]  { border-left-color: var(--kl-neytal); }
.kl-poem-card:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(5,40,50,0.13); border-color: rgba(13,92,110,0.45); }

.kl-card-num { font-family: var(--font-display); font-size: .67rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .3rem; }
.kl-card-speaker { font-family: var(--font-display); font-style: italic; font-size: .82rem; color: var(--ink-muted); margin-bottom: .35rem; }
.kl-card-incipit { font-family: var(--font-tamil); font-size: .98rem; color: var(--ink-primary); line-height: 1.5; margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kl-card-theme { font-size: .78rem; color: var(--ink-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .6rem; }
.kl-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; color: var(--ink-muted); padding-top: .55rem; border-top: 1px solid var(--border-subtle); letter-spacing: .08em; }

/* Section prev/next */
.kl-sec-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.kl-nav-link { display: block; padding: 1rem 1.3rem; background: var(--bg-paper); border: 1px solid rgba(13,92,110,0.2); border-radius: 4px; text-decoration: none; color: inherit; transition: all .2s ease; }
.kl-nav-link:hover { border-color: var(--kl-teal); transform: translateY(-2px); box-shadow: 0 3px 10px rgba(5,40,50,.1); }
.kl-nav-link.next { text-align: right; }
.kl-nav-link.disabled { opacity: .3; pointer-events: none; }
.kl-nav-dir { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .25rem; font-family: var(--font-display); }
.kl-nav-title { font-family: var(--font-tamil); font-size: 1rem; color: var(--kl-teal); margin-bottom: .1rem; }
.kl-nav-sub { font-size: .78rem; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }

/* ---------------------------------------------------------------------------
   Poem detail page
   --------------------------------------------------------------------------- */
.kl-poem-banner {
  padding: 1.5rem 2rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  color: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
.kl-poem-banner[data-tinai="palai"]   { background: linear-gradient(135deg,#6e2a18,#4a1808); }
.kl-poem-banner[data-tinai="kurinji"] { background: linear-gradient(135deg,#0d5c6e,#083848); }
.kl-poem-banner[data-tinai="mullai"]  { background: linear-gradient(135deg,#1a5e2a,#103818); }
.kl-poem-banner[data-tinai="marutam"]{ background: linear-gradient(135deg,#1e3a7a,#102858); }
.kl-poem-banner[data-tinai="neytal"] { background: linear-gradient(135deg,#2a5a7a,#183848); }
.kl-banner-poem-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; opacity: .8; min-width: 2rem; }
.kl-banner-poem-speaker { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; margin-bottom: .25rem; font-family: var(--font-display); }
.kl-banner-poem-turai { font-family: var(--font-tamil); font-size: 1.05rem; line-height: 1.4; margin-bottom: .25rem; }
.kl-banner-poem-meta { font-size: .78rem; opacity: .65; letter-spacing: .05em; font-family: var(--font-display); font-style: italic; }

/* Poem card (single poem, not a list) */
.kl-verse-card {
  background: var(--bg-paper);
  background-image: repeating-linear-gradient(0deg,
    rgba(13,92,110,0.015) 0px, rgba(13,92,110,0.015) 1px,
    transparent 1px, transparent 8px);
  border: 1px solid rgba(13,92,110,0.28);
  border-radius: 4px;
  padding: 2rem 2.5rem 1.75rem;
  box-shadow: 0 1px 4px rgba(5,40,50,0.07), 0 4px 18px rgba(5,40,50,0.07);
  position: relative;
  margin-bottom: 2rem;
}
.kl-verse-card::before, .kl-verse-card::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-primary); border: 1.5px solid rgba(13,92,110,0.4);
}
.kl-verse-card::before { left: 12px; }
.kl-verse-card::after  { right: 12px; }

.kl-layer-label { font-family: var(--font-display); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--kl-teal); margin-bottom: .7rem; font-weight: 500; }
.kl-verse-layer { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border-subtle); }
.kl-verse-layer:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.kl-tamil-text { font-family: var(--font-tamil); font-size: 1.35rem; line-height: 1.9; color: var(--ink-primary); font-weight: 500; white-space: pre-line; }
.kl-translit-text { font-family: var(--font-body); font-style: italic; font-size: 1.05rem; line-height: 1.75; color: var(--ink-secondary); white-space: pre-line; }
.kl-english-text { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.8; color: var(--ink-primary); white-space: pre-line; }
.kl-urai-text { font-family: var(--font-tamil); font-size: .98rem; line-height: 1.9; color: var(--ink-secondary); }
.kl-alt-text { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.8; color: var(--ink-secondary); white-space: pre-line; }
.kl-note { background: var(--kl-teal-pale); border-left: 3px solid var(--kl-teal-mid); padding: .9rem 1.1rem; border-radius: 2px; font-size: .95rem; line-height: 1.75; color: var(--ink-secondary); }

/* Poem prev/next */
.kl-poem-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.kl-pnav-link { display: block; padding: 1.1rem 1.4rem; background: var(--bg-paper); border: 1px solid rgba(13,92,110,0.22); border-radius: 4px; text-decoration: none; color: inherit; transition: all .2s ease; }
.kl-pnav-link:hover { border-color: var(--kl-teal); transform: translateY(-2px); box-shadow: 0 3px 10px rgba(5,40,50,.1); }
.kl-pnav-link.next { text-align: right; }
.kl-pnav-link.disabled { opacity: .3; pointer-events: none; }
.kl-pnav-dir { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .25rem; font-family: var(--font-display); }
.kl-pnav-turai { font-family: var(--font-tamil); font-size: .95rem; color: var(--kl-teal); margin-bottom: .1rem; }
.kl-pnav-sub { font-size: .78rem; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }

/* Misc helpers */
.kl-divider { text-align: center; color: var(--kl-teal); opacity: .4; letter-spacing: 1.5em; padding-left: 1.5em; margin: 2rem 0; }
.kl-stat-row { display: flex; justify-content: center; gap: 2.5rem; margin: 1.75rem auto 0; flex-wrap: wrap; }
.kl-stat { text-align: center; }
.kl-stat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--kl-teal); line-height: 1; margin-bottom: .2rem; }
.kl-stat-label { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }

/* Tiṇai badge pill */
.kl-tinai-badge {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: white;
}
.kl-tinai-badge[data-tinai="palai"]   { background: var(--kl-palai); }
.kl-tinai-badge[data-tinai="kurinji"] { background: var(--kl-kurinji); }
.kl-tinai-badge[data-tinai="mullai"]  { background: var(--kl-mullai); }
.kl-tinai-badge[data-tinai="marutam"] { background: var(--kl-marutam); }
.kl-tinai-badge[data-tinai="neytal"]  { background: var(--kl-neytal); }

@media (max-width: 640px) {
  .kl-sections, .kl-poem-grid { grid-template-columns: 1fr; }
  .kl-verse-card { padding: 1.5rem 1.1rem; }
  .kl-poem-nav, .kl-sec-nav { grid-template-columns: 1fr; }
  .kl-poem-banner { grid-template-columns: 1fr; gap: .5rem; }
}