:root {
  --nk-midnight: #07090d;
  --nk-indigo: #11162a;
  --nk-gold: #d2a447;
  --nk-teal: #12b8a6;
  --nk-ivory: #f3ede2;
  --nk-copper: #a96042;
  --nk-muted: #b9b4aa;
  --nk-line: rgb(210 164 71 / 24%);
  --nk-panel: rgb(17 22 42 / 82%);
  --nk-radius: 1.35rem;
  --nk-shadow: 0 30px 80px rgb(0 0 0 / 32%);
  --nk-shadow-soft: 0 18px 55px rgb(0 0 0 / 24%);
  --nk-wide: min(1280px, calc(100vw - 3rem));
  --nk-reading: 820px;
  --nk-section-space: clamp(3.5rem, 5.5vw, 5.25rem);
  --nk-fast: 160ms;
  --nk-calm: 420ms;
}

html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  font-family: "Nirmala UI", "Noto Sans Tamil", Inter, system-ui, sans-serif;
  font-size: clamp(0.975rem, 0.16vw + 0.94rem, 1.075rem);
  line-height: 1.68;
  letter-spacing: 0.003em;
  text-rendering: optimizelegibility;
}
:lang(ta) { font-family: "Nirmala UI", "Noto Sans Tamil", system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 {
  font-family: "Nirmala UI", "Noto Sans Tamil", system-ui, sans-serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
p, li { overflow-wrap: break-word; }
.wp-site-blocks { min-height: 100vh; }
.nk-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgb(7 9 13 / 88%), rgb(7 9 13 / 20%));
  backdrop-filter: blur(12px);
  transition: background var(--nk-fast), border-color var(--nk-fast);
}
.nk-site-header.is-scrolled {
  border-color: var(--nk-line);
  background: rgb(7 9 13 / 96%);
}
.nk-site-header > .wp-block-group {
  width: var(--nk-wide);
  max-width: 1280px !important;
}
.nk-brand-logo, .nk-footer-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 0;
}
.nk-brand-logo { width: clamp(12.5rem, 15.5vw, 14.5rem); }
.nk-footer-logo { width: min(15rem, 100%); margin-bottom: 1rem; }
.nk-brand-logo img, .nk-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.nk-site-header .wp-block-navigation__container { gap: clamp(1rem, 2.2vw, 2rem); }
.nk-site-header .wp-block-button__link { padding: 0.72rem 1.15rem; }
.nk-hero {
  position: relative;
  min-height: clamp(520px, 63vh, 650px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.nk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 78% 24%, rgb(18 184 166 / 26%), transparent 28%),
    radial-gradient(circle at 22% 72%, rgb(210 164 71 / 20%), transparent 30%),
    linear-gradient(118deg, #07090d 12%, #0c1322 58%, #15101b);
}
.nk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(7 9 13 / 96%) 0%, rgb(7 9 13 / 66%) 58%, rgb(7 9 13 / 24%) 100%),
    linear-gradient(180deg, transparent 60%, rgb(7 9 13 / 74%) 100%);
}
.nk-hero > .wp-block-group {
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin-inline: auto;
}

/*
 * Desktop editorial hero: use the approved Sangam visual as a purposeful
 * focal point while retaining a calm, high-contrast reading field. Smaller
 * screens keep the lighter abstract treatment to protect legibility and LCP.
 */
@media (min-width: 981px) {
  .nk-hero {
    min-height: clamp(500px, 55vh, 595px);
    background: linear-gradient(118deg, #07090d 12%, #0c1322 58%, #15101b);
  }
  .nk-hero::before {
    inset: 0 0 0 43%;
    background: url("../images/neonkoothu-home-hero.webp") 82% 50% / 145% auto no-repeat;
    opacity: 0.78;
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari compatibility. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 20%) 28%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 20%) 28%, #000 52%);
  }
  .nk-hero::after {
    background:
      linear-gradient(90deg, rgb(7 9 13 / 98%) 0%, rgb(7 9 13 / 92%) 39%, rgb(7 9 13 / 30%) 70%, rgb(7 9 13 / 14%) 100%),
      linear-gradient(180deg, transparent 62%, rgb(7 9 13 / 84%) 100%);
  }
  .nk-hero > .wp-block-group { padding-block: clamp(3.75rem, 6vw, 5.25rem) !important; }
  .nk-hero h1 { max-width: 21ch; }
}
.nk-eyebrow {
  color: var(--nk-gold);
  font-size: clamp(0.76rem, 0.55vw + 0.68rem, 0.93rem);
  font-weight: 750;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.nk-hero h1 {
  max-width: 24ch;
  margin-block: 1rem 1.15rem;
  font-size: clamp(2.05rem, 3.1vw, 3.35rem) !important;
  line-height: 1.25;
  text-wrap: balance;
}
.nk-lede {
  max-width: 60ch;
  margin-block: 0.45rem;
  color: var(--nk-muted);
  font-size: clamp(0.98rem, 0.32vw + 0.92rem, 1.1rem);
  line-height: 1.68;
}
.nk-commercial-link { color: var(--nk-gold); text-underline-offset: 0.35em; }
.nk-section { padding-block: var(--nk-section-space); }
.nk-section-header {
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
}
.nk-section-header h2 {
  max-width: 24ch;
  margin-block: 0.6rem 0.7rem;
  font-size: clamp(1.65rem, 1.8vw, 2.25rem);
  line-height: 1.38;
}
.nk-section-header p { max-width: 72ch; color: var(--nk-muted); }
.nk-section > .wp-block-columns.alignwide,
.nk-section > .wp-block-group.alignwide {
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin-inline: auto;
}
main.nk-section {
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 5vw, 5.5rem);
}
.nk-section > .wp-block-post-title,
.nk-section > .wp-block-post-title.has-hero-font-size {
  width: min(100%, 980px);
  max-width: 900px;
  margin: 0 0 1rem !important;
  font-size: clamp(2rem, 3vw, 3.25rem) !important;
  line-height: 1.28;
}
.nk-section > .wp-block-post-excerpt {
  width: min(100%, var(--nk-reading));
  max-width: 66ch;
  margin: 0 0 2rem !important;
  color: var(--nk-muted);
  font-size: clamp(0.98rem, 0.35vw + 0.94rem, 1.1rem) !important;
}
.nk-section > .wp-block-post-date { display: none; }
.nk-section > .wp-block-post-featured-image {
  width: min(100%, 1120px);
  margin: 2rem 0 2.75rem !important;
}
.nk-section > .wp-block-post-content {
  width: min(100%, 940px);
  max-width: 940px !important;
  margin: 0 auto 0 0 !important;
}
.nk-section > .wp-block-post-content > :where(p, ul, ol, blockquote) {
  max-width: var(--nk-reading);
}
.nk-content-section {
  margin-block: 0;
  padding-block: clamp(1.9rem, 3vw, 2.75rem);
  border-top: 1px solid var(--nk-line);
}
.nk-content-section:first-child { padding-top: 0; border-top: 0; }
.nk-content-section:last-child { padding-bottom: 0; }
.nk-content-section h2 {
  max-width: 26ch;
  margin: 0 0 0.7rem;
  font-size: clamp(1.45rem, 1.55vw, 1.9rem);
  line-height: 1.42;
}
.nk-content-section h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.14rem, 1vw, 1.32rem);
  line-height: 1.45;
}
.nk-content-section p,
.nk-content-section li { max-width: 72ch; }
.nk-section > .wp-block-html {
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin-inline: auto;
}
.nk-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  width: var(--nk-wide);
  max-width: 1280px !important;
  margin-inline: auto;
}
.nk-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 250px;
  padding: clamp(1.4rem, 1.7vw, 1.75rem);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius);
  background:
    linear-gradient(155deg, rgb(19 26 48 / 94%), rgb(8 11 18 / 92%));
  box-shadow: var(--nk-shadow-soft);
  transition: transform var(--nk-calm), border-color var(--nk-calm);
}
.nk-card:hover { transform: translateY(-5px); border-color: rgb(18 184 166 / 48%); }
.nk-card h3 {
  margin-block: 0.7rem 0.65rem;
  font-size: clamp(1.2rem, 1.05vw, 1.45rem);
  line-height: 1.42;
}
.nk-card p {
  color: var(--nk-muted);
  font-size: clamp(0.95rem, 0.18vw + 0.92rem, 1.05rem);
  line-height: 1.78;
}
.nk-card .nk-eyebrow, .nk-card > p:first-child { margin-top: 0; }
.nk-card a { display: inline-block; margin-top: auto; padding-top: 0.7rem; font-weight: 650; text-underline-offset: 0.3em; }
.nk-card a::after { content: " →"; }
.nk-literary-card { border-top: 3px solid var(--nk-gold); }
.nk-modern-card { border-top: 3px solid var(--nk-teal); }
.nk-media-stage { aspect-ratio: 16 / 9; border-radius: var(--nk-radius); overflow: hidden; background: #050608; box-shadow: var(--nk-shadow); }
.nk-media-stage iframe, .nk-media-stage img, .nk-youtube-facade { width: 100%; height: 100%; border: 0; object-fit: cover; }
.nk-youtube-facade {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  color: var(--nk-ivory);
  background: #090d16;
}
.nk-youtube-facade img { position: absolute; inset: 0; }
.nk-youtube-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgb(2 5 10 / 35%));
  pointer-events: none;
}
.nk-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(4rem, 8vw, 5.25rem);
  height: clamp(4rem, 8vw, 5.25rem);
  display: grid;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 78%);
  border-radius: 50%;
  background: var(--nk-gold);
  box-shadow: 0 12px 32px rgb(0 0 0 / 52%), 0 0 0 0.5rem rgb(7 9 13 / 28%);
  color: var(--nk-midnight);
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform var(--nk-fast), background var(--nk-fast), box-shadow var(--nk-fast);
}
.nk-youtube-facade:hover .nk-play { background: var(--nk-ivory); transform: translate(-50%, -50%) scale(1.06); }
.nk-youtube-facade:focus-visible { outline: 4px solid var(--nk-teal); outline-offset: 5px; }
.nk-provenance, .nk-disclosure { padding: 1.25rem; border-left: 3px solid var(--nk-gold); background: rgb(210 164 71 / 7%); }
.nk-lyrics, .nk-canonical {
  padding: clamp(1.3rem, 4vw, 2.5rem);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius);
  background: rgb(17 22 42 / 48%);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 2;
  white-space: pre-line;
}
.nk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nk-form .nk-field-wide { grid-column: 1 / -1; }
.nk-form label { display: grid; gap: 0.45rem; font-weight: 650; }
.nk-form input:not([type="checkbox"], [type="radio"]), .nk-form select, .nk-form textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0.8rem 0.9rem;
  border: 1px solid #3b425b; border-radius: 0.7rem; background: #0c1020; color: var(--nk-ivory);
}
.nk-form input[type="checkbox"], .nk-form input[type="radio"] { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--nk-teal); }
.nk-form input:not([type="checkbox"], [type="radio"]):focus, .nk-form select:focus, .nk-form textarea:focus { outline: 3px solid rgb(18 184 166 / 40%); border-color: var(--nk-teal); }
.nk-form button[type="submit"] {
  min-height: 48px;
  padding: 0.78rem 1.35rem;
  border: 1px solid var(--nk-gold);
  border-radius: 999px;
  background: var(--nk-gold);
  color: var(--nk-midnight);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--nk-fast), background var(--nk-fast);
}
.nk-form button[type="submit"]:hover { transform: translateY(-2px); background: var(--nk-ivory); }
.nk-form-errors { padding: 1rem; border: 2px solid #ff8679; border-radius: 0.75rem; }
.nk-form-result { margin: 0 0 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--nk-teal); border-radius: 0.75rem; background: rgb(18 184 166 / 12%); }
.nk-honeypot { position: absolute !important; left: -10000px !important; }
.nk-cta-band { padding: clamp(1.8rem, 3.5vw, 3rem); border: 1px solid var(--nk-line); border-radius: var(--nk-radius); background: linear-gradient(120deg, rgb(169 96 66 / 30%), rgb(17 22 42 / 92%)); }
.nk-cta-band h2 { max-width: 28ch; margin-top: 0; font-size: clamp(1.5rem, 1.9vw, 2.15rem); line-height: 1.4; }
.nk-site-footer { border-top: 1px solid var(--nk-line); background: #05070b; }
.nk-site-footer > .wp-block-columns.alignwide { width: var(--nk-wide); max-width: 1280px !important; margin-inline: auto; }
.nk-skip-link { position: fixed; left: 1rem; top: -10rem; z-index: 1000; padding: 0.8rem 1rem; background: var(--nk-ivory); color: var(--nk-midnight); }
.nk-skip-link:focus { top: 1rem; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--nk-teal); outline-offset: 3px; }
@media (max-width: 980px) {
  :root { --nk-wide: min(100% - 2.5rem, 900px); --nk-section-space: 3.75rem; }
  .nk-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-card-grid > :last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  .nk-site-header .wp-block-buttons { display: none; }
  .nk-site-header .wp-block-navigation__responsive-container-open,
  .nk-site-header .wp-block-navigation__responsive-container-close {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem;
    place-items: center;
  }
  .nk-site-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    inset: 0;
    z-index: 100000;
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.4rem;
    overflow-y: auto;
    color: var(--nk-ivory);
    background: linear-gradient(155deg, #11162a, #07090d 72%) !important;
  }
  .nk-site-header .wp-block-navigation__responsive-close,
  .nk-site-header .wp-block-navigation__responsive-dialog,
  .nk-site-header .wp-block-navigation__responsive-container-content {
    width: 100%;
    min-height: 100%;
  }
  .nk-site-header .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 4.5rem;
  }
  .nk-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: flex-start;
    gap: 1.15rem;
  }
  .nk-site-header .wp-block-navigation__responsive-container-content a {
    color: var(--nk-ivory) !important;
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    font-weight: 700;
    text-decoration: none;
  }
  .nk-site-header .wp-block-navigation__responsive-container-close {
    top: 1.35rem;
    right: 1.35rem;
    color: var(--nk-ivory);
  }
}
@media (max-width: 680px) {
  :root { --nk-wide: calc(100% - 2rem); }
  .nk-brand-logo { width: 11.25rem; }
  .nk-card-grid, .nk-form { grid-template-columns: 1fr; }
  .nk-card-grid > :last-child:nth-child(odd) { grid-column: auto; width: auto; }
  .nk-hero { min-height: auto; }
  .nk-hero > .wp-block-group { padding-block: 3.25rem !important; }
  .nk-hero h1 { max-width: 100%; font-size: clamp(1.85rem, 8vw, 2.35rem) !important; line-height: 1.32; }
  .nk-section { padding-block: 3.25rem; }
  main.nk-section { padding-block: 3rem; }
  .nk-section-header { margin-bottom: 1.6rem; }
  .nk-section > .wp-block-post-title,
  .nk-section > .wp-block-post-title.has-hero-font-size { font-size: clamp(1.85rem, 8vw, 2.35rem) !important; }
  .nk-content-section { padding-block: 1.65rem; }
  .nk-card { min-height: 0; }
  .nk-cta-band .wp-block-buttons { gap: 0.65rem; }
  .nk-cta-band .wp-block-button { width: 100%; }
  .nk-cta-band .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media print {
  .nk-site-header, .nk-site-footer, .nk-cta-band, .nk-youtube-facade { display: none !important; }
  body { color: #000; background: #fff; }
  .nk-canonical, .nk-lyrics { border: 0; color: #000; background: #fff; }
}