/* Zhagaram Labs. Indigo ink on unbleached cotton, marigold for the sun and the one action. */

:root {
  --paper: #F1EDE4;
  --ink: #1F3466;
  --ink-2: #44567F;
  --line: rgb(31 52 102 / 0.16);
  --sun: #E3A13A;
  --sun-deep: #D4912B;
  --leaf: #E6D5A8;
  --leaf-ink: #3B2A14;
  --cord: #8B6A3E;

  /* spacing scale */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  --gutter: var(--s-200);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", "Anek Tamil", system-ui, sans-serif;
  --font-ta: "Anek Tamil", "Manrope", sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: var(--s-500); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-900); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
img { display: block; max-width: 100%; }
[lang="ta"] { font-family: var(--font-ta); }
small { font-size: inherit; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 300ms var(--ease); }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), 1152px); margin-inline: auto; }

.skip {
  position: absolute; left: var(--s-200); top: calc(-1 * var(--s-700)); z-index: 100;
  padding: var(--s-75) var(--s-100); background: var(--ink); color: var(--paper); border-radius: 8px;
  font-weight: 600;
}
.skip:focus { top: var(--s-200); }

/* ---------- buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-75) var(--s-100);
  border-radius: 9999px;
  background: var(--sun);
  color: var(--ink);
  font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none;
  border: 1px solid rgb(31 52 102 / 0.24);
  transition: background-color 300ms var(--ease), transform 500ms var(--ease);
}
.button:hover { background: var(--sun-deep); color: var(--ink); transform: translateY(-1px); }
.button:active { transform: scale(0.98); }
.button-small { font-size: 14px; line-height: 20px; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200); margin-top: var(--s-400); }
.cta-note { max-width: 280px; font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* ---------- navigation ---------- */

.nav {
  position: fixed; top: var(--s-200); left: 0; right: 0; z-index: 50;
  width: fit-content; max-width: calc(100% - 2 * var(--s-200)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-300);
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-200);
  border-radius: 9999px;
  border: 1px solid var(--line);
}
/* The blur lives on a pseudo element: a filter on .nav itself would trap the fixed mobile menu inside it. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgb(241 237 228 / 0.72);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-75);
  font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark-glyph {
  display: inline-grid; place-items: center;
  width: var(--s-400); height: var(--s-400); border-radius: 9999px;
  background: var(--ink); color: var(--sun);
  font-size: 18px; line-height: 1; font-weight: 600;
}
.nav-links { display: flex; gap: var(--s-50); }
.nav-links a {
  padding: var(--s-75) var(--s-100); border-radius: 9999px;
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.nav-links a:hover { background: rgb(31 52 102 / 0.06); color: var(--ink); }
.nav-links a[aria-current="true"] { background: rgb(31 52 102 / 0.09); color: var(--ink); }

.menu-toggle {
  display: none; position: relative; z-index: 2;
  width: var(--s-500); height: var(--s-500); padding: 0;
  border: 0; border-radius: 9999px; background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle span {
  position: absolute; left: var(--s-100); right: var(--s-100); height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 500ms var(--ease);
}
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.nav[data-open="true"] .menu-toggle span:first-child { transform: rotate(45deg); }
.nav[data-open="true"] .menu-toggle span:last-child { transform: rotate(-45deg); }

@media (max-width: 899px) {
  .nav { width: auto; justify-content: space-between; gap: var(--s-100); }
  .wordmark { position: relative; z-index: 2; }
  .nav-cta { margin-left: auto; position: relative; z-index: 2; }
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: var(--s-75);
    padding: var(--s-900) var(--s-300);
    background: rgb(241 237 228 / 0.94);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    visibility: hidden; opacity: 0;
    transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
  }
  .nav-links a {
    font-size: 30px; line-height: 36px; padding: var(--s-100) var(--s-200);
    opacity: 0; transform: translateY(var(--s-300));
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  }
  .nav[data-open="true"] .nav-links { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease); }
  .nav[data-open="true"] .nav-links a { opacity: 1; transform: none; }
  .nav[data-open="true"] .nav-links a:nth-child(2) { transition-delay: 60ms; }
  .nav[data-open="true"] .nav-links a:nth-child(3) { transition-delay: 120ms; }
  .nav[data-open="true"] .nav-links a:nth-child(4) { transition-delay: 180ms; }
  .nav[data-open="true"] .nav-links a:nth-child(5) { transition-delay: 240ms; }
}
@media (max-width: 479px) {
  .nav-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; }
.hero-art { width: 100%; pointer-events: none; }
.hero-text { position: relative; padding-top: calc(var(--s-900) + var(--s-200)); }
.hero h1 { max-width: 680px; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.gradient-ink {
  color: var(--ink);
  background: linear-gradient(90deg, #1F3466, #5B6E9A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede { max-width: 680px; margin-top: var(--s-300); font-size: 18px; line-height: 28px; color: var(--ink-2); }

.cartouche {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter), 340px);
  margin: calc(-1 * var(--s-700)) var(--gutter) var(--s-200);
  padding: var(--s-200) var(--s-300);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink);
  font-size: 14px; line-height: 20px; color: var(--ink-2);
}
.cartouche-stat { font-size: 48px; line-height: 1; font-weight: 700; color: var(--ink); margin-bottom: var(--s-75); font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; }
  .hero-text { order: 1; }
  .hero-art { order: 2; height: 440px; object-fit: cover; object-position: 80% 100%; margin-top: var(--s-400); }
  .cartouche { order: 3; }
}
@media (min-width: 900px) {
  .hero { min-height: max(680px, 62.5vw); }
  .hero-art { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 70% 100%; }
  .hero-text { padding-top: calc(var(--s-900) + var(--s-700)); }
  .hero h1 { font-size: 48px; line-height: 1; }
  .cartouche {
    position: absolute; bottom: var(--s-600);
    left: max(var(--gutter), calc((100% - 1152px) / 2));
    margin: 0;
  }
}

/* ---------- tagline: words ink in one at a time as they scroll past ---------- */

.tagline { padding-block: var(--s-900) var(--s-200); }
.tagline-text { max-width: 680px; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.015em; }
.js .tagline-text .w { color: rgb(31 52 102 / 0.28); transition: color 700ms var(--ease); }
.js .tagline-text .w.on { color: var(--ink); }
@media (min-width: 768px) {
  .tagline { padding-block: calc(var(--s-900) + var(--s-700)) var(--s-400); }
  .tagline-text { font-size: 48px; line-height: 1.1; }
}

/* ---------- sections ---------- */

.section { padding-block: var(--s-700); }
@media (min-width: 768px) { .section { padding-block: var(--s-900); } }
.section-head { max-width: 680px; margin-bottom: var(--s-600); }
.section-head h2 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.section-head p { margin-top: var(--s-200); font-size: 18px; line-height: 28px; color: var(--ink-2); }
@media (min-width: 768px) { .section-head h2 { font-size: 36px; line-height: 40px; } }

.js .reveal { opacity: 0; transform: translateY(var(--s-400)); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- why Tamil ---------- */

.zha { display: grid; gap: var(--s-400); align-items: center; margin-bottom: var(--s-800); }
.zha-letter { width: 100%; max-width: 360px; }
.zha-letter text { font-family: var(--font-ta); font-size: 340px; font-weight: 600; }
.zha-copy > p { font-size: 18px; line-height: 28px; max-width: 560px; }
.triple { display: flex; flex-wrap: wrap; gap: var(--s-400); margin-block: var(--s-300); }
.triple dt { font-family: var(--font-ta); font-size: 48px; line-height: 1.2; font-weight: 600; }
.triple dd { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.evidence {
  max-width: 560px; padding: var(--s-200); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2);
}
.evidence [lang="ta"] { color: var(--ink); font-weight: 600; }
@media (min-width: 768px) {
  .zha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-600); }
}

.hard { display: grid; gap: var(--s-600) var(--s-700); }
.hard h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.hard p { margin-top: var(--s-75); color: var(--ink-2); max-width: 520px; }
.specimen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-75) var(--s-200); margin-top: var(--s-200) !important; }
.specimen span { font-size: 30px; line-height: 1.4; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.specimen small { font-size: 14px; line-height: 20px; color: var(--ink-2); }
@media (min-width: 768px) { .hard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Kural ---------- */

.kural { background: var(--ink); color: var(--paper); }
.kural .section-head h2 { color: var(--paper); }
.kural .section-head p { color: rgb(241 237 228 / 0.8); }
.kural :focus-visible { outline-color: var(--paper); }
.kural .section-head .kural-word { margin: 0 0 var(--s-200); font-family: var(--font-ta); font-size: 72px; line-height: 1.1; font-weight: 600; color: var(--sun); }
.steps { list-style: none; padding: 0; display: grid; gap: var(--s-600); }
.step-num { display: block; font-size: 60px; line-height: 1.1; font-weight: 600; color: var(--sun); margin-bottom: var(--s-200); }
.steps h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.steps p { margin-top: var(--s-75); color: rgb(241 237 228 / 0.8); }
@media (min-width: 768px) {
  .kural .section-head .kural-word { font-size: 96px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- models, bound as a palm leaf manuscript ---------- */

.bundle { --hole: var(--s-300); position: relative; max-width: 1040px; }
.bundle::before, .bundle::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cord);
}
.bundle::before { left: calc(var(--hole) - 1px); }
.bundle::after { right: calc(var(--hole) - 1px); }
.board {
  position: relative; z-index: 1;
  margin-inline: calc(-1 * var(--s-75));
  padding: var(--s-75) var(--s-600);
  border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.leaves + .board { margin-top: var(--s-200); }
.board + .leaves { margin-top: var(--s-75); }
.board-end { min-height: var(--s-300); padding-block: 0; margin-top: var(--s-200); }
.leaves { list-style: none; padding: 0; display: grid; gap: var(--s-75); }
.leaf {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ta name" "what what" "status status";
  gap: var(--s-75) var(--s-200); align-items: baseline;
  padding: var(--s-200) var(--s-600);
  border: 1px solid rgb(90 64 24 / 0.28);
  border-radius: 24px;
  background-color: var(--leaf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 3h8' stroke='%23a07f45' stroke-opacity='.2'/%3E%3C/svg%3E");
  color: var(--leaf-ink);
}
.leaf::before, .leaf::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 9999px; background: var(--cord); box-shadow: 0 0 0 2px rgb(59 42 20 / 0.25);
}
.leaf::before { left: calc(var(--hole) - 5px); }
.leaf::after { right: calc(var(--hole) - 5px); }
.leaf-ta { grid-area: ta; font-size: 30px; line-height: 36px; font-weight: 600; text-shadow: 0 1px 0 rgb(255 255 255 / 0.4); }
.leaf-name { grid-area: name; font-weight: 700; }
.leaf-name small { font-weight: 500; color: rgb(59 42 20 / 0.78); margin-left: var(--s-50); }
.leaf-what { grid-area: what; font-size: 14px; line-height: 20px; color: rgb(59 42 20 / 0.88); }
.leaf-status { grid-area: status; display: flex; flex-wrap: wrap; gap: var(--s-50) var(--s-100); font-size: 14px; line-height: 20px; color: rgb(59 42 20 / 0.82); }
.status { display: inline-flex; align-items: center; gap: var(--s-75); font-weight: 700; color: var(--leaf-ink); }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 9999px; border: 2px solid var(--leaf-ink); }
.status.now::before { background: var(--sun); border-color: #9A6414; }
.status.next::before { background: var(--leaf-ink); }
@media (min-width: 900px) {
  .bundle { --hole: var(--s-400); }
  .leaf {
    grid-template-columns: 136px 176px minmax(0, 1fr) 200px; grid-template-areas: "ta name what status";
    gap: var(--s-300); align-items: center; padding-inline: var(--s-700);
  }
  .leaf-name small { display: block; margin-left: 0; }
  .leaf-status { flex-direction: column; }
  .board { padding-inline: var(--s-700); }
}

/* ---------- open source ---------- */

.open-grid { display: grid; gap: var(--s-500) var(--s-600); }
.open-grid h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: var(--s-200); }
.open-grid ul { list-style: none; padding: 0; display: grid; gap: var(--s-100); }
.open-grid li { position: relative; padding-left: var(--s-300); color: var(--ink-2); }
.open-grid li::before { content: ""; position: absolute; left: var(--s-25); top: 9px; width: 6px; height: 6px; border-radius: 9999px; background: var(--ink); }
.open-grid strong { color: var(--ink); }
@media (min-width: 900px) { .open-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ledger { margin-top: var(--s-800); }
.ledger h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.ledger figcaption p { margin-top: var(--s-75); max-width: 680px; color: var(--ink-2); }
.ledger-scroll { margin-top: var(--s-300); overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.ledger table { width: 100%; min-width: 600px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: var(--s-100) var(--s-200); text-align: left; border-bottom: 1px solid var(--line); }
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger thead th { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.ledger tbody th { font-weight: 600; }

/* ---------- FAQ ---------- */

.faq-wrap { display: grid; gap: var(--s-300); }
.faq { display: grid; gap: var(--s-75); }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 0.3); transition: background-color 300ms var(--ease); }
.faq details:hover, .faq details[open] { background: rgb(255 255 255 / 0.55); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-200);
  padding: var(--s-200) var(--s-300); border-radius: 16px;
  font-size: 18px; line-height: 28px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: var(--s-200); height: var(--s-200);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%231F3466' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 500ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s-300) var(--s-300); color: var(--ink-2); max-width: 640px; }
.faq details[open] p { animation: faq-in 500ms var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-700); align-items: start; }
  .faq-wrap .section-head { position: sticky; top: var(--s-900); }
}

/* ---------- final call ---------- */

.join h2 { max-width: 680px; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.join p:not(.cta-note) { max-width: 680px; margin-top: var(--s-200); font-size: 18px; line-height: 28px; color: var(--ink-2); }
@media (min-width: 768px) { .join h2 { font-size: 48px; line-height: 1; } }

/* ---------- footer: links over an engraved beach ---------- */

.footer { position: relative; padding-top: var(--s-700); overflow: hidden; }
.footer-grid, .copyright { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--s-400); }
.footer-brand p:last-child { margin-top: var(--s-75); max-width: 260px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.footer h2 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-100); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-75); font-size: 14px; line-height: 20px; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.copyright { margin-top: var(--s-500); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.footer-art { width: 100%; height: 240px; object-fit: cover; object-position: 94% 100%; margin-top: calc(-1 * var(--s-500)); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 280px 160px 240px; gap: var(--s-700); }
  .footer-art { height: auto; margin-top: calc(-1 * clamp(var(--s-600), 12vw, 200px)); }
}

/* ---------- 404 ---------- */

.lost { min-height: 100svh; display: grid; align-content: center; gap: var(--s-300); padding-block: var(--s-900); }
.lost-glyph { font-family: var(--font-ta); font-size: 128px; line-height: 1; color: var(--sun); }
.lost h1 { font-size: 36px; line-height: 40px; font-weight: 700; }
.lost p { max-width: 520px; font-size: 18px; line-height: 28px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .tagline-text .w { color: var(--ink); }
}