/* ==========================================================================
   திரிகடுகம் · Tirikkaṭukam — Pepper-Brown, Ginger-Amber & Slate Theme
   100 ethical triplet-verses · c. 1st–5th century CE
   Author: Nallāṭaṉār · Patiṉeṇkīḻkaṇakku collection

   Title: திரிகடுகம் = the three pungents (tirikkaṭu) — the Ayurvedic combination
   of dry ginger (சுக்கு sukku), black pepper (மிளகு miḷaku), and long pepper
   (திப்பிலி tippili). As those three spices stimulate and clear the body,
   each verse's three moral truths stimulate and clear the mind.

   Visual identity: The three pungents are dark, aromatic, powerful.
   The palette draws from the spice itself: deep pepper-brown (the whole
   peppercorn — dark, round, concentrated), ginger-amber (the dried root —
   warm, fibrous, medicinal), long-pepper slate (the elongated spike — grey-
   brown, textured, less familiar than the others). Parchment as the base.

   Mark: three dots in a triangle — the three pungents, the three truths of
   each verse, the structural triplet that defines the entire work.
   Simple, immediate, impossible to mistake for any other mark in the library.

   Structural note: Unlike Iṉṉā/Iṉiyavai (A → B → C escalation), Tirikkaṭukam
   gives three CO-EQUAL items: "Three things that [quality]: X · Y · Z"
   The UI displays the triad explicitly — three items visible at a glance.
   ========================================================================== */

:root {
  /* ── Pepper-brown (primary) ─────────────────────────── */
  --tk-pepper:        #3a2010;
  --tk-pepper-mid:    #5a3818;
  --tk-pepper-bright: #7a5028;
  --tk-pepper-pale:   rgba(58, 32, 16, 0.10);
  --tk-pepper-pale2:  rgba(58, 32, 16, 0.05);

  /* ── Ginger-amber (secondary) ───────────────────────── */
  --tk-ginger:        #b86818;
  --tk-ginger-mid:    #9a5210;
  --tk-ginger-bright: #d88030;
  --tk-ginger-pale:   rgba(184, 104, 24, 0.12);
  --tk-ginger-pale2:  rgba(184, 104, 24, 0.06);

  /* ── Long-pepper slate (accent) ─────────────────────── */
  --tk-slate:         #5a5848;
  --tk-slate-mid:     #4a4838;
  --tk-slate-pale:    rgba(90, 88, 72, 0.12);

  /* ── Warm parchment ─────────────────────────────────── */
  --tk-parchment:     #ede4cc;
  --tk-parchment-mid: #e0d4b8;

  /* ── Muted ink ──────────────────────────────────────── */
  --tk-ink:           #2a1808;
  --tk-ink-mid:       #4a3020;
  --tk-ink-pale:      rgba(42, 24, 8, 0.55);

  /* ── Site overrides ─────────────────────────────────── */
  --accent-vermillion: var(--tk-pepper);
  --accent-kumkum:     var(--tk-pepper-mid);
  --accent-ochre:      var(--tk-ginger-mid);
  --accent-gold:       var(--tk-ginger);
}

/* Body background: dark spice-market warmth */
body { background: #b0a090; }
body::before {
  background-image:
    radial-gradient(circle at 20% 40%, rgba(58,32,16,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(184,104,24,0.05) 0%, transparent 45%),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 5px,
      rgba(58,32,16,0.012) 5px, rgba(58,32,16,0.012) 6px
    );
}

/* Header */
.site-header { border-bottom-color: rgba(58,32,16,0.25); }
.site-logo .mark { color: var(--tk-ginger); }
.wordmark-tamil { color: var(--tk-pepper); }
.site-nav a { color: var(--tk-pepper-mid); }
.site-nav a:hover { color: var(--tk-ginger); }
a { color: var(--tk-pepper-mid); }
a:hover { color: var(--tk-ginger); }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.tk-hero {
  text-align: center;
  padding: 3.5rem 1.5rem 2rem;
  max-width: 820px;
  margin: 0 auto;
}
.tk-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  color: var(--tk-pepper);
  line-height: 1.05;
  margin: 0.7rem 0 0.3rem;
}
.tk-hero-roman {
  font-size: clamp(1.0rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--tk-ink-mid);
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
}
.tk-hero-meaning {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-ginger-mid);
  margin: 0 0 1.2rem;
}
.tk-hero p {
  font-size: 1.0rem;
  line-height: 1.85;
  color: #2a1808;
  margin: 0 0 0.8rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.tk-hero-mark {
  display: inline-block;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 2px 12px rgba(184,104,24,0.28));
}

/* Stat row */
.tk-stat-row {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin: 1.5rem 0 0.5rem;
  flex-wrap: wrap;
}
.tk-stat { text-align: center; }
.tk-stat-num {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--tk-pepper);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.tk-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-slate);
}

/* ---------------------------------------------------------------------------
   Spice banner (the three pungents explanation)
   --------------------------------------------------------------------------- */
.tk-spice-banner {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  background: var(--tk-ginger-pale2);
  border: 1px solid rgba(184,104,24,0.16);
  border-left: 4px solid var(--tk-ginger);
  border-radius: 0 6px 6px 0;
  padding: 1.1rem 1.5rem;
  font-size: 0.88rem;
  line-height: 1.8;
  color: #2a1808;
}
.tk-spice-banner strong { color: var(--tk-ginger-mid); }

/* Three spices display */
.tk-three-spices {
  max-width: 760px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 480px) { .tk-three-spices { grid-template-columns: 1fr; } }
.tk-spice-card {
  background: var(--tk-parchment);
  border: 1px solid rgba(58,32,16,0.14);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  text-align: center;
}
.tk-spice-num {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--tk-slate);
  margin-bottom: 0.3rem;
}
.tk-spice-tamil {
  font-size: 1.05rem;
  color: var(--tk-pepper);
  margin-bottom: 0.1rem;
}
.tk-spice-roman {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--tk-ink-mid);
  margin-bottom: 0.3rem;
}
.tk-spice-english {
  font-size: 0.75rem;
  color: var(--tk-slate);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   Verses header
   --------------------------------------------------------------------------- */
.tk-verses-header {
  max-width: 820px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  text-align: center;
}
.tk-verses-header h2 {
  font-size: 1.0rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tk-pepper);
  margin: 0 0 0.3rem;
}
.tk-verses-header p {
  font-size: 0.85rem;
  color: var(--tk-slate);
  font-style: italic;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Verse grid — wider cards for 100 verses
   --------------------------------------------------------------------------- */
.tk-verses-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1rem;
}
@media (max-width: 520px) { .tk-verses-main { grid-template-columns: 1fr; } }

/* Individual verse card */
.tk-verse {
  background: var(--tk-parchment);
  border: 1px solid rgba(58,32,16,0.13);
  border-radius: 6px;
  overflow: hidden;
}
.tk-verse-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  background: var(--tk-pepper-pale2);
  border-bottom: 1px solid rgba(58,32,16,0.10);
}
.tk-verse-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tk-ginger);
  min-width: 2.2rem;
}
.tk-verse-theme {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tk-slate);
  flex: 1;
}

/* The three items — displayed as a visible triad above the expandable layers */
.tk-triad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.7rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(58,32,16,0.08);
}
.tk-triad-item {
  font-size: 0.75rem;
  color: var(--tk-pepper-mid);
  line-height: 1.45;
  padding: 0.3rem 0.4rem;
  background: var(--tk-pepper-pale2);
  border-radius: 3px;
  text-align: center;
}
.tk-triad-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tk-ginger);
  margin: 0 auto 0.25rem;
  opacity: 0.70;
}

/* Expandable layers */
.tk-verse-body { padding: 0 1rem 0.4rem; }
.tk-layer {
  margin: 0;
  border-bottom: 1px solid rgba(58,32,16,0.06);
}
.tk-layer:last-child { border-bottom: none; }
.tk-layer-toggle {
  display: block;
  width: 100%;
  padding: 0.48rem 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tk-slate);
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
  padding-right: 1rem;
}
.tk-layer-toggle::-webkit-details-marker { display: none; }
.tk-layer-toggle::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--tk-ginger);
  transition: transform 0.15s;
}
details[open] > .tk-layer-toggle::after { transform: translateY(-50%) rotate(90deg); }
.tk-layer-content { padding: 0 0 0.75rem; }

.tk-tamil-verse {
  font-size: 1.0rem;
  line-height: 2;
  color: #1a0e08;
}
.tk-translit-verse {
  font-size: 0.88rem;
  line-height: 2;
  color: #2a1808;
  font-style: italic;
}
.tk-english-prose {
  font-size: 0.87rem;
  line-height: 1.78;
  color: #2a1808;
}
.tk-note {
  font-size: 0.79rem;
  line-height: 1.72;
  color: #4a3020;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Page header (about page)
   --------------------------------------------------------------------------- */
.tk-page-header {
  background: var(--tk-pepper-pale2);
  border-bottom: 1px solid rgba(58,32,16,0.14);
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
}
.tk-page-header-inner { max-width: 720px; margin: 0 auto; }
.tk-page-header h1 { font-size: 1.3rem; color: var(--tk-pepper); margin: 0 0 0.4rem; }
.tk-page-header p { font-size: 0.88rem; color: var(--tk-slate); font-style: italic; margin: 0; }

/* ---------------------------------------------------------------------------
   About page
   --------------------------------------------------------------------------- */
.tk-about-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-size: 0.97rem;
  line-height: 1.82;
  color: #2a1808;
}
.tk-about-body h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tk-pepper);
  margin: 2.5rem 0 0.7rem;
  border-bottom: 1px solid rgba(58,32,16,0.15);
  padding-bottom: 0.4rem;
}
.tk-about-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}
.tk-about-body th {
  text-align: left;
  padding: 0.5rem 0.8rem;
  background: var(--tk-pepper-pale2);
  color: var(--tk-pepper);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(58,32,16,0.18);
}
.tk-about-body td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(58,32,16,0.07);
  vertical-align: top;
}
.tk-about-body tr:last-child td { border-bottom: none; }
.tk-about-body tr.current-row td { background: var(--tk-ginger-pale2); }
.tk-about-body blockquote {
  border-left: 3px solid var(--tk-ginger);
  margin: 1.2rem 0;
  padding: 0.6rem 1.2rem;
  background: var(--tk-ginger-pale2);
  font-style: italic;
  color: #2a1008;
  border-radius: 0 4px 4px 0;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .tk-stat-row { gap: 1.5rem; }
  .tk-stat-num { font-size: 1.6rem; }
  .tk-triad { grid-template-columns: 1fr; gap: 0.3rem; }
}