/* 5falls.org: styled after the Trust's printed letterhead (indigo header block with a slanted edge,
   a band down the left side, grey contact lines with ringed icons, footer rule and slanted bars). */
:root {
  --indigo: #2E2980;          /* letterhead indigo, sRGB 0.18 / 0.16 / 0.50 */
  --indigo-deep: #1D1A5E;
  --navy: #100E4E;            /* logo navy */
  --grey: #545966;            /* letterhead contact grey */
  --ink: #1F2033;
  --tint: #F3F2FA;
  --line: #DEDCF0;
  --paper: #FFFFFF;
  --band: 12px;
  --en: "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
  --ta-head: "Baloo Thambi 2", "Mukta Malar", "Tamil Sangam MN", sans-serif;
  --ta-body: "Mukta Malar", "Tamil Sangam MN", "Noto Sans Tamil", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--en); padding-left: var(--band); }
[lang="ta"] { font-family: var(--ta-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid #8C86E6; outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--indigo); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: calc(var(--band) + 8px); }
.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }

/* The band down the left side of the letter pad */
body::before { content: ""; position: fixed; inset: 0 auto 0 0; width: var(--band); background: var(--indigo); z-index: 40; }

/* ---------- Letterhead header ---------- */
.lh { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 132px; padding-right: 32px; background: var(--paper); }
.lh-block { position: relative; display: flex; align-items: center; padding: 22px 64px 22px 40px; background: var(--indigo);
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); margin-left: calc(var(--band) * -1); padding-left: calc(40px + var(--band)); }
.lh-block img { width: 230px; }
/* concave corner where the header block meets the left band */
.lh::after { content: ""; position: absolute; left: 0; top: 100%; width: 18px; height: 18px; z-index: 41;
  background: radial-gradient(circle at 100% 100%, transparent 17px, var(--indigo) 18px); }
.lh-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
.lh-contacts { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-size: 14.5px; font-weight: 500; }
.lh-contacts li { display: flex; align-items: center; gap: 8px; }
.lh-contacts a { color: var(--grey); text-decoration: none; }
.lh-contacts a:hover { color: var(--indigo); }
.ring { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.3px solid var(--indigo); border-radius: 50%; color: var(--indigo); }
.ring svg { width: 13px; height: 13px; }
.nav { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; justify-content: flex-end; font-weight: 600; font-size: 15.5px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--indigo); text-decoration: underline; }

/* ---------- Buttons: slanted like the letterhead bars ---------- */
.btn { --sk: -12deg; position: relative; display: inline-block; padding: 13px 26px; font-weight: 700; text-decoration: none; isolation: isolate; color: #fff; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; transform: skewX(var(--sk)); z-index: -1; transition: background .15s, transform .15s; }
.btn-solid::before { background: var(--indigo); }
.btn-solid:hover { color: #fff; }
.btn-solid:hover::before { background: var(--navy); }
.btn-ghost::before { border: 2px solid #fff; }
.btn-ghost:hover { color: var(--navy); }
.btn-ghost:hover::before { background: #fff; }
.btn-sm { padding: 8px 18px; font-size: 15px; }
.nav .btn { color: #fff; margin-left: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: -1px; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,14,78,.92) 0%, rgba(29,26,94,.72) 42%, rgba(29,26,94,.12) 78%), linear-gradient(0deg, rgba(16,14,78,.55), transparent 45%); }
.hero-inner { position: relative; padding: 120px 0 96px; }
.hero-inner > * { max-width: 620px; }
.hero-kicker { display: inline-block; margin: 0 0 10px; font: 700 21px/1.2 var(--ta-head); padding: 6px 18px 4px; position: relative; isolation: isolate; }
.hero-kicker::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.16); border-left: 4px solid #fff; transform: skewX(-12deg); z-index: -1; }
.hero h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -.01em; margin: 6px 0 10px; font-weight: 700; }
.hero-ta { font: 700 clamp(20px, 2.4vw, 26px)/1.35 var(--ta-head); margin: 0 0 16px; color: #DCDAFF; }
.hero-lead { font-size: 18.5px; margin: 0 0 28px; color: #F0EFFF; }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.hero .btn-solid::before { background: #fff; }
.hero .btn-solid { color: var(--navy); }
.hero .btn-solid:hover { color: var(--navy); }
.hero .btn-solid:hover::before { background: #E4E2FF; }

/* ---------- Stats ---------- */
.stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -46px; background: var(--paper); box-shadow: 0 14px 40px rgba(16,14,78,.14); border-top: 5px solid var(--indigo); }
.stat { padding: 24px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 28px; line-height: 1.1; color: var(--indigo); font-weight: 700; }
.stat span { color: var(--grey); font-size: 15.5px; }

/* ---------- Sections ---------- */
.sec { padding: 92px 0; }
.sec.tint { background: var(--tint); }
.kicker { margin: 0 0 6px; color: var(--indigo); font-weight: 700; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; }
.kicker.ta { font: 700 19px/1.3 var(--ta-head); letter-spacing: 0; }
.kicker::before { content: ""; width: 34px; height: 9px; background: var(--indigo); transform: skewX(-24deg); flex: none; }
h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 18px; color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 20px; margin: 0 0 8px; color: var(--navy); line-height: 1.3; }
.sub { color: var(--grey); margin: -6px 0 34px; max-width: 720px; }
.ta-inline { font-family: var(--ta-body); font-weight: 600; }
.two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); padding: 26px 28px; position: relative; }
.card p { margin: 0; color: #3A3C52; }
.sec.tint .card { border-color: transparent; box-shadow: 0 2px 0 var(--line); }
.three .card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 46px; height: 6px; background: var(--indigo); transform: skewX(-24deg); }
.founder { background: var(--indigo); color: #fff; border: 0; padding: 34px 34px 36px; }
.founder h3 { color: #fff; font-size: 26px; }
.founder .kicker { color: #CFCBFF; }
.founder .kicker::before { background: #CFCBFF; }
.founder p { color: #ECEBFF; }
.founder .ta-inline { color: #CFCBFF; font-size: 20px; }

/* ---------- Timeline ---------- */
.tl-title { margin-top: 56px; font-size: 22px; }
.timeline { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; border-left: 3px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; padding: 0 0 26px 26px; }
.timeline li::before { content: ""; position: absolute; left: -13px; top: 9px; width: 15px; height: 15px; border-radius: 50%; background: var(--indigo); border: 3px solid var(--tint); }
.timeline li.next::before { background: var(--tint); border: 3px solid var(--indigo); }
.timeline p { margin: 0; }
.tag { position: relative; isolation: isolate; justify-self: start; color: #fff; font-weight: 700; font-size: 15px; padding: 4px 14px; letter-spacing: .02em; }
.tag::before { content: ""; position: absolute; inset: 0; background: var(--indigo); transform: skewX(-14deg); z-index: -1; }
.next .tag { color: var(--indigo); }
.next .tag::before { background: none; border: 2px solid var(--indigo); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.ph { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--tint); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ph:hover img { transform: scale(1.04); }
.ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; text-align: left; color: #fff; font: 600 14.5px/1.35 var(--en); background: linear-gradient(0deg, rgba(16,14,78,.85), transparent); }
.ph.wide { grid-column: span 2; grid-row: span 2; }
.ph:nth-child(4) { grid-column: span 2; }

dialog#viewer { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 94vh; }
dialog#viewer::backdrop { background: rgba(10,9,40,.88); }
dialog#viewer img { max-height: 84vh; width: auto; margin: 0 auto; }
dialog#viewer p { color: #fff; text-align: center; margin: 10px 0 0; font-weight: 600; }
dialog#viewer .close { position: fixed; top: 14px; right: 18px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--navy); font-size: 28px; line-height: 1; cursor: pointer; }

/* ---------- Help ---------- */
.sec.deep { background: var(--indigo); color: #fff; position: relative; overflow: hidden; }
.sec.deep::after { content: ""; position: absolute; right: -80px; top: 0; bottom: 0; width: 260px; background: rgba(255,255,255,.05); transform: skewX(-12deg); pointer-events: none; }
.deep h2 { color: #fff; }
.deep .kicker { color: #CFCBFF; }
.deep .kicker::before { background: #CFCBFF; }
.deep .sub { color: #E1DFFF; }
.deep a { color: #fff; }
.help-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; position: relative; z-index: 1; }
.options { display: grid; gap: 14px; }
.opt { display: flex; gap: 20px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 20px 24px; }
.opt-ico { flex: none; display: grid; place-items: center; width: 58px; height: 58px; background: #fff; color: var(--indigo); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.opt-ico svg { width: 32px; height: 32px; }
.opt b { display: block; font-size: 26px; line-height: 1.15; font-weight: 700; }
.opt div > span { display: block; color: #ECEBFF; }
.opt small { display: block; color: #CFCBFF; font-size: 15px; margin-top: 2px; }
.pay { background: #fff; color: var(--ink); padding: 26px 26px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.pay img { width: min(260px, 100%); margin: 0 auto; }
.pay-label { color: var(--grey); font-size: 15px; margin: 8px 0 14px; }
.upi { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.upi code { font: 700 19px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: var(--navy); background: var(--tint); padding: 9px 14px; }
.pay-note { color: var(--grey); font-size: 15px; margin: 14px 0 0; }
.pay .btn { color: #fff; }
.sponsor { position: relative; z-index: 1; margin: 34px 0 0; padding: 18px 22px; border-left: 4px solid #fff; background: rgba(255,255,255,.08); max-width: 820px; }

/* ---------- Partners ---------- */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.partner { display: flex; gap: 20px; align-items: center; border: 1px solid var(--line); padding: 18px 22px; }
.partner img, .partner .mono { width: 132px; height: 64px; flex: none; object-fit: contain; }
.partner .mono { display: grid; place-items: center; background: var(--tint); color: var(--indigo); font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.partner h3 { font-size: 18px; margin-bottom: 2px; }
.partner p { margin: 0; color: var(--grey); font-size: 15.5px; }
.thanks { margin: 26px 0 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; }
.contact { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.contact b { color: var(--indigo); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.contact span { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
a.contact:hover { box-shadow: 0 0 0 2px var(--indigo); color: var(--ink); }

/* ---------- Letterhead footer ---------- */
.lf { padding: 56px 0 0; text-align: center; color: var(--indigo); }
.lf-logo { width: 190px; margin: 0 auto 26px; }
.lf hr { border: 0; border-top: 1.5px solid var(--indigo); margin: 0 auto 14px; }
.lf p { margin: 0 0 6px; font-weight: 600; font-size: 14.5px; line-height: 1.6; }
.lf .small { color: var(--grey); font-weight: 500; font-size: 13.5px; margin-top: 14px; }
.bars { display: flex; gap: 3.2%; height: 26px; margin-top: 40px; margin-left: calc(var(--band) * -1); }
.bars i { display: block; background: var(--indigo); transform: skewX(-18deg); }
.bars i:nth-child(1) { width: 52%; transform: none; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.bars i:nth-child(2), .bars i:nth-child(3) { width: 9%; }
.bars i:nth-child(4) { width: 11%; }

/* ---------- Updates ---------- */
.updates { display: grid; gap: 48px; }
.upd { min-width: 0; }
.upd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.upd-head h3 { margin: 0; font-size: 22px; color: var(--navy); }
.upd-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; overscroll-behavior-x: contain; }
.upd-strip .ph { flex: 0 0 260px; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.upd-strip .ph span { display: none; }
.upd p { max-width: 760px; margin: 14px 0 0; }
.upd p.ta { font-family: var(--ta-body); color: var(--grey); margin-top: 6px; }
.upd-link a { color: var(--indigo); font-weight: 700; }
#photos.tint .ph { background: #fff; }

/* ---------- Smaller screens ---------- */
@media (max-width: 980px) {
  .lh { flex-direction: column; padding-right: 0; gap: 0; }
  .lh-block { align-self: flex-start; padding-right: 70px; }
  .lh::after { display: none; }
  .lh-right { align-items: stretch; padding: 14px 20px 14px 18px; }
  .lh-contacts { flex-wrap: wrap; gap: 8px 20px; }
  .nav { justify-content: flex-start; }
  .two, .help-grid { grid-template-columns: 1fr; gap: 32px; }
  .three { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --band: 6px; }
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 32px); }
  .lh-block img { width: 180px; }
  .lh-block { padding-top: 18px; padding-bottom: 18px; }
  .nav { gap: 2px 16px; font-size: 15px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 64px 0 84px; }
  .hero-lead { font-size: 17px; }
  .stats { grid-template-columns: 1fr; margin-top: -36px; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 20px; }
  .stat:last-child { border-bottom: 0; }
  .stat b { font-size: 24px; }
  .sec { padding: 64px 0; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .gallery { grid-auto-rows: 150px; gap: 8px; }
  .ph span { font-size: 13px; padding: 20px 10px 8px; }
  .upd-strip .ph { flex-basis: 72%; }
  .upd-head h3 { font-size: 19px; }
  .partners { grid-template-columns: 1fr; }
  .partner { padding: 14px 16px; gap: 14px; }
  .partner img, .partner .mono { width: 96px; height: 52px; }
  .opt { padding: 16px; gap: 14px; }
  .opt-ico { width: 48px; height: 48px; }
  .opt b { font-size: 22px; }
  .pay { padding: 22px 16px; }
  .bars { height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph img, .btn::before { transition: none; }
}