/* ==========================================================================
   நற்றிணை · Naṟṟiṇai — Sandalwood & Deep Rose Theme
   400 akam poems · 175+ poets · c. 300 BCE – 300 CE
   One of the Eight Sangam Anthologies (Eṭṭutokai)
   Compiled by Paraṇar

   Visual identity: warm sandalwood (the colour of naṟu — fragrance),
   deep rose, and the five tiṇai accent colours as a mixed bloom.

   The Naṟṟiṇai is the "Good/Fragrant Anthology" — naṟu means both
   good and fragrant in Tamil. Its 400 poems are medium-length (9–12
   lines), mixed across all five tiṇai, composed by over 175 poets.
   It sits between the brief Kuṟuntokai and the long Akanāṉūṟu — the
   middle register of the Sangam love tradition.

   The sandalwood-rose palette: warm, fragrant, intimate. Not the cool
   indigo of the Kuṟuntokai, not the martial amber of Patiṟṟuppattu,
   not the morning gold of Aiṅkuṟunūṟu — but the warm red-orange of
   the sandalwood tree, the rose of the dawn sky, the scent that the
   word naṟṟiṇai itself evokes.
   ========================================================================== */

:root {
  /* Sandalwood — primary */
  --nt-sandal:        #8a3a28;   /* deep sandalwood */
  --nt-sandal-mid:    #a84a38;   /* mid sandal */
  --nt-sandal-bright: #c86050;   /* bright sandal-rose */
  --nt-sandal-pale:   rgba(138,58,40,0.10);
  --nt-sandal-pale2:  rgba(138,58,40,0.06);

  /* Rose — secondary */
  --nt-rose:          #9a2848;   /* deep rose */
  --nt-rose-mid:      #b83858;   /* mid rose */
  --nt-rose-pale:     rgba(154,40,72,0.10);

  /* Five tiṇai accent colours — same landscape logic, different shades */
  --nt-kurinji: #3a5a28;   /* mountain green */
  --nt-mullai:  #5a6818;   /* forest olive */
  --nt-marutam: #1a4a6a;   /* river slate */
  --nt-neytal:  #1e4868;   /* sea teal */
  --nt-palai:   #7a3a18;   /* desert sienna */

  /* Override site palette */
  --accent-vermillion: var(--nt-sandal);
  --accent-kumkum:     var(--nt-sandal-mid);
  --accent-ochre:      var(--nt-sandal-bright);
  --accent-gold:       var(--nt-sandal);
}

/* ---------------------------------------------------------------------------
   Background: warm sandal-rose parchment
   --------------------------------------------------------------------------- */
body { background: #c8b8a8; }
body::before {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(138,58,40,0.022) 3px, rgba(138,58,40,0.022) 4px),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 60px,
      rgba(138,58,40,0.038) 60px, rgba(138,58,40,0.038) 61px,
      transparent 61px, transparent 140px,
      rgba(138,58,40,0.022) 140px, rgba(138,58,40,0.022) 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.38 0 0 0 0 0.20 0 0 0 0 0.14 0 0 0 0.11 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(138,58,40,0.3); }
.site-logo .mark { color: var(--nt-sandal); }
.wordmark-tamil { color: var(--nt-sandal); }
.site-nav a { color: var(--nt-sandal-mid); }
.site-nav a:hover { color: var(--nt-sandal); }
a { color: var(--nt-sandal); }
a:hover { color: var(--nt-sandal-mid); }

/* ---------------------------------------------------------------------------
   Poem grid (index page)
   --------------------------------------------------------------------------- */
.nt-poem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.nt-poem-tile {
  background: var(--bg-paper);
  background-image: repeating-linear-gradient(0deg,
    rgba(138,58,40,0.016) 0px, rgba(138,58,40,0.016) 1px,
    transparent 1px, transparent 8px);
  border: 1px solid rgba(138,58,40,0.20);
  border-top: 3px solid transparent;
  border-radius: 3px;
  padding: 1rem 1.1rem .95rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 3px rgba(80,25,15,0.07);
  display: flex;
  flex-direction: column;
  min-height: 130px;
}
.nt-poem-tile[data-tinai="kurinji"] { border-top-color: var(--nt-kurinji); }
.nt-poem-tile[data-tinai="mullai"]  { border-top-color: var(--nt-mullai); }
.nt-poem-tile[data-tinai="marutam"] { border-top-color: var(--nt-marutam); }
.nt-poem-tile[data-tinai="neytal"]  { border-top-color: var(--nt-neytal); }
.nt-poem-tile[data-tinai="palai"]   { border-top-color: var(--nt-palai); }
.nt-poem-tile.unpopulated { opacity: .32; pointer-events: none; background: rgba(138,58,40,.03); }
.nt-poem-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(80,25,15,0.14); }

.nt-tile-num { font-family: var(--font-display); font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .25rem; }
.nt-tile-poet { font-family: var(--font-display); font-style: italic; font-size: .82rem; color: var(--nt-sandal-mid); line-height: 1.3; margin-bottom: .3rem; }
.nt-tile-incipit { font-family: var(--font-tamil); font-size: .9rem; color: var(--ink-primary); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-tile-footer { margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--border-subtle); }

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

/* Tiṇai filter bar */
.nt-filter-bar {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.nt-filter-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-right: .25rem; font-family: var(--font-display); }
.nt-filter-btn {
  font-family: var(--font-display); font-size: .75rem;
  padding: .25rem .75rem;
  border: 1px solid rgba(138,58,40,0.28);
  border-radius: 2px;
  background: transparent;
  color: var(--nt-sandal);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}
.nt-filter-btn:hover, .nt-filter-btn.active {
  background: var(--nt-sandal);
  color: white;
  border-color: var(--nt-sandal);
}
.nt-filter-btn.active { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Poem detail page
   --------------------------------------------------------------------------- */
.nt-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;
}
.nt-poem-banner[data-tinai="kurinji"] { background: linear-gradient(135deg,#3a5a28,#203818); }
.nt-poem-banner[data-tinai="mullai"]  { background: linear-gradient(135deg,#5a6818,#3a4808); }
.nt-poem-banner[data-tinai="marutam"] { background: linear-gradient(135deg,#1a4a6a,#0e3050); }
.nt-poem-banner[data-tinai="neytal"]  { background: linear-gradient(135deg,#1e4868,#103048); }
.nt-poem-banner[data-tinai="palai"]   { background: linear-gradient(135deg,#7a3a18,#5a2008); }

.nt-banner-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; opacity: .8; min-width: 2rem; }
.nt-banner-poet { font-family: var(--font-display); font-style: italic; font-size: .88rem; opacity: .78; margin-bottom: .2rem; }
.nt-banner-speaker { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; opacity: .72; margin-bottom: .2rem; font-family: var(--font-display); }
.nt-banner-turai { font-family: var(--font-tamil); font-size: 1rem; line-height: 1.4; margin-bottom: .15rem; }
.nt-banner-meta { font-size: .72rem; opacity: .62; font-family: var(--font-display); font-style: italic; }

/* Verse card */
.nt-verse-card {
  background: var(--bg-paper);
  background-image: repeating-linear-gradient(0deg,
    rgba(138,58,40,0.014) 0px, rgba(138,58,40,0.014) 1px,
    transparent 1px, transparent 8px);
  border: 1px solid rgba(138,58,40,0.26);
  border-radius: 4px;
  padding: 2rem 2.5rem 1.75rem;
  box-shadow: 0 1px 4px rgba(80,25,15,0.07), 0 4px 18px rgba(80,25,15,0.07);
  position: relative;
  margin-bottom: 2rem;
}
.nt-verse-card::before, .nt-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(138,58,40,0.38);
}
.nt-verse-card::before { left: 12px; }
.nt-verse-card::after  { right: 12px; }

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

.nt-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; }
.nt-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; }
.nt-english-text { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.8; color: var(--ink-primary); white-space: pre-line; }
.nt-urai-text { font-family: var(--font-tamil); font-size: .98rem; line-height: 1.9; color: var(--ink-secondary); }
.nt-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; }
.nt-note { background: var(--nt-sandal-pale); border-left: 3px solid var(--nt-sandal-mid); padding: .9rem 1.1rem; border-radius: 2px; font-size: .95rem; line-height: 1.75; color: var(--ink-secondary); }

/* Poem prev/next */
.nt-poem-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.nt-pnav-link { display: block; padding: 1.1rem 1.4rem; background: var(--bg-paper); border: 1px solid rgba(138,58,40,0.2); border-radius: 4px; text-decoration: none; color: inherit; transition: all .2s ease; }
.nt-pnav-link:hover { border-color: var(--nt-sandal); transform: translateY(-2px); box-shadow: 0 3px 10px rgba(80,25,15,.1); }
.nt-pnav-link.next { text-align: right; }
.nt-pnav-link.disabled { opacity: .3; pointer-events: none; }
.nt-pnav-dir { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .25rem; font-family: var(--font-display); }
.nt-pnav-incipit { font-family: var(--font-tamil); font-size: .92rem; color: var(--nt-sandal); margin-bottom: .1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nt-pnav-sub { font-size: .75rem; color: var(--ink-muted); font-style: italic; font-family: var(--font-display); }

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

/* Tiṇai legend (index page) */
.nt-tinai-legend {
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .75rem;
}
.nt-legend-item {
  padding: .75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  background: var(--bg-paper);
}
.nt-legend-item-tamil { font-family: var(--font-tamil); font-size: 1.05rem; font-weight: 600; margin-bottom: .12rem; }
.nt-legend-item-eng { font-family: var(--font-display); font-style: italic; font-size: .8rem; margin-bottom: .2rem; }
.nt-legend-item-desc { font-size: .7rem; color: var(--ink-muted); line-height: 1.4; }

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