@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/playfair-display-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --cream: #f6eedb;
  --paper: var(--cream);
  --white: var(--cream);
  --green: #18382a;
  --green-dark: var(--green);
  --ink: var(--green);
  --gold: #b99a52;
  --gold-light: var(--gold);
  --black: #050505;
  --muted: rgba(24, 56, 42, .70);
  --line: rgba(24, 56, 42, .18);
  --dark-muted: rgba(246, 238, 219, .72);
  --dark-line: rgba(246, 238, 219, .22);
  --serif: Georgia, 'Times New Roman', serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: 20px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--black); scroll-behavior: smooth; scroll-padding-top: 56px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--serif); }
main, section, .shell, .hero-copy, .workshop-intro, .about-copy { min-width: 0; }
a { color: inherit; min-width: 44px; min-height: 44px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img, video, iframe { display: block; width: 100%; max-width: 100%; }
[lang="ta"] { font-family: 'Noto Sans Tamil', 'Latha', 'Nirmala UI', sans-serif; }
.shell { width: 100%; max-width: 1464px; padding-inline: var(--gutter); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
p { max-width: 60ch; }
.topbar { height: 56px; display: flex; align-items: center; position: sticky; top: 0; z-index: 30; background: var(--green); color: var(--cream); border-bottom: 1px solid var(--gold); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; font: 400 1rem/1.3 var(--font-display); }
.nav { display: flex; align-items: center; gap: 8px; }
.nav a { display: inline-flex; align-items: center; font-size: .75rem; }
.hero { width: 100%; margin: 0 auto; background: var(--black); color: var(--cream); position: relative; display: grid; grid-template-columns: 1fr; }
.hero-copy { padding: 32px var(--gutter) 24px; }
.micro, .kicker { margin: 0 0 12px; font: 700 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.micro { color: var(--gold); }
h1 { margin: 0; font: 400 clamp(2.75rem, 13vw, 4rem)/1.02 var(--font-display); }
h1, h2 { text-wrap: balance; letter-spacing: -.01em; font-weight: 400; }
p { text-wrap: pretty; }
h1 span { display: inline; }
.hero-copy > p:not(.micro) { margin: 16px 0 0; color: var(--dark-muted); }
.social-row { display: none; gap: 12px; margin-top: 24px; }
.social-row a { display: inline-flex; align-items: center; text-decoration: underline; font-size: .75rem; }
.portrait-stage { position: relative; aspect-ratio: 4 / 5; min-width: 0; }
.hero-figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.portrait-count { position: absolute; top: 24px; right: var(--gutter); font: 700 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hero-card { width: 100%; padding: 24px var(--gutter) 32px; background: var(--black); border: 0; }
.card-rule { display: none; }
.hero-card h2 { margin: 0 0 16px; font: 400 clamp(2rem, 9.5vw, 2.75rem)/1.08 var(--font-display); }
.hero-card p:not(.micro) { margin: 0; color: var(--dark-muted); }
.hero-card .button { width: 100%; margin-top: 24px; background: var(--gold); color: var(--black); }
.hero-card .button:focus-visible { outline-color: var(--black); }
.button { height: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; text-decoration: none; font: 700 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
.button-dark, .button-wine { background: var(--green); color: var(--cream); }
.button-plain { border-color: var(--green); color: var(--green); }
section.content { padding-block: 64px; }
.section-top { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
.kicker { color: var(--green); }
h2.display { margin: 0; font: 400 clamp(2rem, 9.5vw, 2.75rem)/1.08 var(--font-display); }
.lede { margin: 0; color: var(--muted); }
.performances { background: var(--black); color: var(--cream); border-block: 1px solid var(--gold); }
.performances .kicker, .learning .kicker, .contact .kicker { color: var(--gold); }
.performances .lede { color: var(--dark-muted); }
.reel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reel { appearance: none; border-radius: 0; display: block; padding: 0; font: inherit; text-align: left; cursor: pointer; position: relative; overflow: hidden; min-width: 0; aspect-ratio: 4 / 5; text-decoration: none; color: var(--cream); background: var(--black); border: 1px solid rgba(246, 238, 219, .18); border-color: color-mix(in srgb, var(--cream) 18%, transparent); }
.reel:first-child { grid-column: 1 / -1; }
.reel:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.reel video { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--video-position, center 50%); }
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 44px; height: 44px; pointer-events: none; }
.play-icon circle { fill: var(--black); fill-opacity: .55; }
.play-icon path { fill: var(--cream); }
.reel.is-playing .play-icon { visibility: hidden; }
.reel::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 55%, transparent); pointer-events: none; }
.reel-copy { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.reel-copy > span:first-child { font: 400 1.25rem/1.25 var(--font-display); }
.reel-copy small { overflow-wrap: anywhere; display: block; margin-bottom: 8px; font: 700 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.reel-arrow { display: none; flex: 0 0 auto; font-size: 1.25rem; }
.most-loved { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 8px 12px; background: var(--gold); color: var(--black); font: 700 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.workshop { background: var(--cream); }
.workshop-layout { display: grid; grid-template-columns: 1fr; }
.workshop-intro { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.workshop-intro h2 { margin: 0 0 16px; font: 400 clamp(2rem, 9.5vw, 2.75rem)/1.08 var(--font-display); }
.workshop-intro p:not(.kicker) { margin: 0; color: var(--muted); }
.workshop-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; }
.fact:nth-child(2n) { padding: 16px 0 16px 16px; border-right: 0; }
.fact:nth-last-child(-n+2) { border-bottom: 0; }
.fact small { font: 700 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.fact strong { font: 400 1.25rem/1.25 var(--font-display); }
.learning { background: var(--green); color: var(--cream); }
.learning-head { margin-bottom: 32px; }
.lesson-list { border-top: 1px solid var(--gold); }
.lesson { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--dark-line); align-items: start; }
.lesson-number { color: var(--gold); font: italic 1.25rem/1.25 var(--font-display); }
.lesson h3 { margin: 0; font: 400 1.25rem/1.25 var(--font-display); }
.lesson p { grid-column: 2; margin: 0; color: var(--dark-muted); }
.about { background: var(--cream); }
.about-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.award-crop { width: 120px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.award-crop img { height: 100%; object-fit: cover; object-position: center 25%; }
.about-copy h2 { margin: 0 0 16px; font: 400 clamp(2rem, 9.5vw, 2.75rem)/1.08 var(--font-display); }
.about-copy p:not(.kicker) { margin: 0; color: var(--muted); }
.credential-list { border-top: 1px solid var(--green); }
.credential { padding: 24px 0; border-bottom: 1px solid var(--line); }
.credential small { display: block; margin-bottom: 8px; font: 700 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.credential strong { font: 400 1.25rem/1.25 var(--font-display); }
.contact { background: var(--green); color: var(--cream); text-align: center; border-top: 1px solid var(--gold); }
.contact h2 { max-width: 24ch; margin: 0 auto 16px; font: 400 clamp(2rem, 9.5vw, 2.75rem)/1.08 var(--font-display); }
.contact p:not(.kicker) { max-width: 32ch; margin: 0 auto; color: var(--dark-muted); }
.contact-actions { display: flex; flex-direction: column; gap: 12px; margin: 24px auto 0; max-width: 32rem; }
.contact .button-dark { background: var(--gold); color: var(--black); }
.contact .button-plain { border-color: var(--cream); color: var(--cream); }
footer { padding-block: 32px; background: var(--green); color: var(--dark-muted); font-size: .75rem; border-top: 1px solid var(--gold); }
.footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 0; }
.footer-links a { display: flex; align-items: center; color: rgba(246, 238, 219, .9); text-decoration: none; }
.footer-links a:focus-visible { text-decoration: underline; }
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  section.content { padding-block: 96px; }
  h1 { font-size: clamp(4rem, 6vw, 6rem); }
  h2, h2.display, .hero-card h2, .workshop-intro h2, .about-copy h2, .contact h2 { font-size: clamp(2.75rem, 4vw, 4rem); }
  .hero { width: 100%; max-width: 1464px; border-inline: var(--gutter) solid var(--cream); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); margin-bottom: 24px; }
  .social-row { display: flex; }
  .hero-copy { padding-block: 64px; padding-inline: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; }
  .portrait-stage { min-height: 640px; aspect-ratio: auto; }
  .hero-card { grid-column: 1 / -1; border: 1px solid var(--gold); }
  .section-top { grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
  .reel-arrow { display: block; }
  .reel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel:first-child, .reel:last-child { grid-column: auto; aspect-ratio: 4 / 5; }
  .lesson { grid-template-columns: 40px minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px; }
  .lesson p { grid-column: auto; }
  footer { padding-bottom: 32px; }
}
@media (min-width: 1100px) {
  .hero-card { grid-column: auto; position: absolute; right: var(--gutter); bottom: 32px; width: 360px; }
  .workshop-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .workshop-intro { padding: 0 32px 0 0; border-right: 1px solid var(--line); border-bottom: 0; }
  .about-layout { grid-template-columns: 120px minmax(0, 1fr) minmax(0, .8fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dark focus outlines on gold buttons need a light halo against dark sections. */
.hero-card .button:focus-visible, .contact .button-dark:focus-visible { box-shadow: 0 0 0 6px var(--cream); }

[hidden] { display: none !important; }
[data-dynamic] { transition: opacity 150ms; }
html[data-schedule="loading"] [data-dynamic] { opacity: 0; }
html[data-schedule="ready"] [data-dynamic] { opacity: 1; }

.button-primary { width: 100%; background: var(--gold); color: var(--black); }
.button-primary:focus-visible { outline-color: var(--black); box-shadow: 0 0 0 6px var(--cream); }
.hero-copy .button-primary { margin-top: 24px; }
.hero-card [data-workshop-title] { min-height: 50px; font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.hero-card [data-workshop-summary] { min-height: 77px; }
.contact [data-final-summary] { min-height: 128px; overflow-wrap: anywhere; }
.fact strong { display: block; overflow-wrap: anywhere; }
[data-map] a { display: inline-flex; align-items: center; font-size: .875rem; gap: 8px; }
.more-dates { margin-top: 32px; }
.more-dates ul { list-style: none; padding: 0; margin: 0; }
.more-dates li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); min-height: 64px; }
.more-dates li > div { min-width: 0; overflow-wrap: anywhere; }
.more-dates strong { font: 400 1.25rem/1.25 var(--font-display); }
.date-detail { font-size: .875rem; color: var(--muted); margin-top: 4px; }
.date-book { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--green); padding: 0 12px; text-decoration: none; text-transform: uppercase; font-size: .75rem; flex-shrink: 0; }

.hero-copy .button-primary { max-width: 32rem; }
.portrait-stage::before { content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: 48px; background: linear-gradient(to bottom, var(--black), transparent); pointer-events: none; }

.reel:has(video[data-reel="storytelling"], video[data-reel="sakhi"], video[data-reel="prayer"], video[data-reel="faith"]) video { filter: brightness(1.2) contrast(1.05); }
@media (max-width: 479px) {
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(2n) { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); align-items: start; }
  .fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .fact strong { min-height: 50px; }
}

.hero-picture { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.award-crop picture { display: block; width: 100%; height: 100%; }
.button [aria-hidden], .reel-arrow, [data-map] span, .date-book span { font-family: 'DejaVu Sans', Arial, sans-serif; }
/* Bound unusually long public sheet values without resizing the reserved slots. */
[data-workshop-title], [data-workshop-summary], [data-final-summary] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
[data-workshop-title] { -webkit-line-clamp: 2; }
[data-workshop-summary] { -webkit-line-clamp: 3; }
[data-final-summary] { -webkit-line-clamp: 5; }
@media (min-width: 360px) {
  .fact strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* Keep the original hero; match only its desktop surround to the photograph. */
@media (min-width: 768px) {
  .hero-backdrop, .hero, .portrait-stage { background: rgb(0 0 0); }
  .hero { border-inline-color: rgb(0 0 0); margin-bottom: 0; }
  .portrait-stage::before { background: linear-gradient(to bottom, rgb(0 0 0), transparent); }
}
.section-nav { display: flex; gap: 24px; }
.section-nav a, .contact-workshop-link { display: inline-flex; align-items: center; text-decoration: none; }
.section-nav a { font: 600 12px var(--sans); }

.section-nav a[aria-current="location"] { text-decoration: underline; text-underline-offset: 6px; }
.footer-links { flex-wrap: wrap; }
.schedule-notice { font-size: 16px; margin: 0; min-height: 52px; }
.schedule-notice:empty { visibility: hidden; }
@media (max-width: 767px) { .section-nav { display: none; } }

/* Mobile-only artist introduction; desktop composition remains unchanged. */
.mobile-menu-toggle, .mobile-introduction { display: none; }
@media (max-width: 767px) {
  .topbar-inner { position: relative; }
  .brand { max-width: calc(100% - 80px); }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 72px; min-height: 44px; padding: 0 8px; border: 1px solid var(--dark-line); background: transparent; color: var(--cream); font: 600 12px var(--sans); cursor: pointer; }
  .mobile-menu-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .section-nav.is-open { display: flex; position: absolute; top: 56px; right: var(--gutter); left: var(--gutter); flex-direction: column; gap: 0; padding: 8px 16px; background: var(--green); border: 1px solid var(--dark-line); box-shadow: 0 12px 24px rgba(0,0,0,.25); }
  .section-nav a { min-height: 48px; }
  .hero { display: flex; flex-direction: column; background: rgb(0 0 0); }
  .hero-copy { display: contents; }
  .hero-copy > .micro { order: 0; margin: 20px var(--gutter) 12px; letter-spacing: .12em; }
  .hero h1 { order: 1; margin-inline: var(--gutter); font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.1; }
  .hero-copy > p:not(.micro) { order: 2; margin: 12px var(--gutter) 0; }
  .desktop-introduction { display: none; }
  .mobile-introduction { display: inline; }
  .portrait-stage { order: 3; width: 100%; height: min(125vw, 44svh); aspect-ratio: auto; margin-top: 16px; background: rgb(0 0 0); }
  .portrait-stage::before { display: none; }
  .portrait-count { display: none; }
  .hero-copy > .button-primary { order: 4; width: calc(100% - 2 * var(--gutter)); margin: 16px var(--gutter) 24px; }
  .hero-card { order: 5; }
}

/* Section 2: desktop hero, with workshop information in the text column. */
@media (min-width: 900px) {
  :root { --gutter: clamp(32px, 5vw, 80px); }
  .topbar { height: 68px; }
  .topbar .shell { max-width: 1280px; }
  .section-nav { gap: 32px; }
  .mobile-menu-toggle { display: none; }
  .hero-backdrop { background: var(--black); }
  .hero { max-width: 1280px; border: 0; padding: 16px var(--gutter); margin: auto; background: var(--black); min-height: min(calc(100dvh - 68px), 860px); grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 48px; align-items: center; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(3.5rem,5.2vw,5.25rem); line-height: 1.02; }
  .hero-copy > p:not(.micro) { font-size: 1.125rem; max-width: 48ch; }
  .hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
  .hero-buttons .button { height: 56px; margin: 0; }
  .hero-buttons .button-primary { width: auto; min-width: 260px; max-width: 340px; }
  .hero-card { position: static; width: auto; margin: 40px 0 0; border: 0; border-left: 2px solid var(--gold); padding: 0 0 0 20px; background: transparent; }
  .hero-card [data-workshop-title] { font-size: 1.5rem; min-height: 0; margin: 0; }
  .hero-card [data-workshop-summary] { min-height: 0; margin: 8px 0 0; font-size: 15px; }
  .portrait-stage { min-height: 0; height: min(calc(100dvh - 100px), 740px); aspect-ratio: auto; background: var(--black); }
  .hero-figure { max-height: calc(100dvh - 100px); mask-image: linear-gradient(to right,transparent,black 14%),linear-gradient(to left,transparent,black 14%),linear-gradient(to bottom,transparent,black 10%),linear-gradient(to top,transparent,black 10%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right,transparent,black 14%),linear-gradient(to left,transparent,black 14%),linear-gradient(to bottom,transparent,black 10%),linear-gradient(to top,transparent,black 10%); -webkit-mask-composite: source-in; }
  .portrait-stage::before { display: none; }
  .portrait-count { right: 0; top: 0; color: var(--gold); }
}

/* Section 3: photograph first, with copy integrated into its faded bottom. */
@media (max-width: 899px) {
  :root { --gutter: 20px; }
  .hero { display: flex; flex-direction: column; width: 100%; max-width: none; border: 0; min-height: 0; background: var(--black); }
  .hero-copy { display: block; order: 2; position: relative; z-index: 1; padding: 0 var(--gutter) 32px; margin-top: calc(-1 * clamp(88px,28vw,140px)); }
  .hero-copy > .micro { margin: 0 0 8px; }
  .hero h1 { font-size: clamp(2.125rem,9.6vw,2.75rem); line-height: 1.05; margin: 0; }
  .hero-copy > p:not(.micro) { margin: 12px 0 0; font-size: 1rem; max-width: 34ch; }
  .hero-buttons { margin-top: 20px; }
  .hero-buttons .button-primary { width: 100%; height: 48px; min-height: 48px; margin: 0; font-size: 13px; }
  .hero-buttons .button-outline { display: none; }
  .portrait-stage { order: 1; width: 100%; height: auto; min-height: 0; aspect-ratio: 4/5; margin: 0; max-width: 640px; align-self: center; background: var(--black); }
  .hero-figure { object-fit: cover; object-position: center; mask-image: linear-gradient(to bottom,black 0%,black 60%,transparent 100%); -webkit-mask-image: linear-gradient(to bottom,black 0%,black 60%,transparent 100%); }
  .portrait-count, .portrait-stage::before { display: none; }
  .hero-card { margin: 24px 0 0; padding: 0 0 0 16px; border: 0; border-left: 2px solid var(--gold); width: 100%; position: static; background: transparent; }
  .hero-card [data-workshop-title] { font-size: 1.375rem; min-height: 0; margin: 0; }
  .hero-card [data-workshop-summary] { min-height: 0; margin: 8px 0 0; font-size: 15px; }
}

/* Section 4: body copy is sans; display typography is limited to titles and values. */
:root { --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --sans: var(--font-body); }
body { font-family: var(--font-body); }
.brand { font-family: var(--font-body); }
.hero-card [data-workshop-summary] { font-family: var(--font-body); }
.arrow-icon { flex-shrink: 0; width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
a:has(.arrow-icon) { gap: 8px; }
.button-outline { border-color: var(--gold); color: var(--cream); background: transparent; }
.hero-copy { background: transparent; }
@media (max-width: 899px) { .hero-copy { background: linear-gradient(to bottom,rgba(5,5,5,.82),var(--black) 140px); } }
.schedule-debug { position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; max-height: 60dvh; overflow: auto; padding: 16px; background: var(--black); color: var(--cream); border-top: 1px solid var(--gold); font: 12px/1.5 monospace; }
.schedule-debug pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.schedule-debug button { min-height: 44px; min-width: 64px; background: var(--gold); color: var(--black); border: 0; font: 12px var(--font-body); }

/* Section 6: full-screen mobile navigation with a visible close toggle. */
html { scroll-padding-top: 68px; }
.topbar { z-index: 40; }
.mobile-nav-extra { display: none !important; }
.footer-links { flex-direction: column; gap: 0; }
.footer-links a { min-height: 44px; }
@media (max-width: 899px) {
  .topbar { height: 56px; }
  .topbar-inner { position: static; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .section-nav { display: none; }
  .section-nav.is-open { position: fixed; inset: 56px 0 0; background: var(--black); display: flex; flex-direction: column; gap: 0; padding: 24px var(--gutter); border: 0; overflow-y: auto; }
  .section-nav.is-open a { display: flex !important; min-height: 56px; font: 400 1.5rem var(--font-display); color: var(--cream); }
  html { scroll-padding-top: 56px; }
}

/* Section 7: controls clear of the figure; source posters fill the whole card. */
.reel:not(:first-child) .play-icon { top: 12px; right: 12px; left: auto; transform: none; }
.tamil-badge { position: absolute; top: 12px; right: 12px; padding: 8px; background: var(--black); color: var(--cream); z-index: 4; font-size: 12px; }
.reel::before { content: ''; position: absolute; inset: 0; background-image: var(--reel-poster); background-size: cover; background-position: center; filter: blur(10px) brightness(.35); transform: scale(1.08); }
.reel video { mask-image: linear-gradient(to right,transparent,black 10%,black 90%,transparent); }
@media (max-width: 339px) { .reel-copy > span:first-child { font-size: 1rem; } }
/* Give long reel labels room without shrinking text or cutting the figure. */
.reel-copy { left: 12px; right: 12px; }
.reel-copy small { letter-spacing: .08em; }
@media (max-width: 899px) {
  .mobile-menu-toggle { padding: 0 8px; gap: 8px; min-width: 72px; border: 1px solid var(--dark-line); background: transparent; color: var(--cream); font: 600 12px var(--font-body); }
  .desktop-introduction { display: none; }
  .mobile-introduction { display: inline; }
}
@media (max-width: 899px) { .reel-copy > .arrow-icon { display: none; } }

.menu-open .topbar { background: var(--black); }
.schedule-debug th, .schedule-debug td { padding: 8px; border-bottom: 1px solid var(--dark-line); text-align: left; vertical-align: top; }

/* Keep the final summary compact; the button group starts exactly 24px below. */
.contact [data-final-summary] { min-height: 0; margin-bottom: 0; }
.contact-actions { margin-top: 24px; }
/* Keep the photo's four background sampling corners clear of the label. */
@media (min-width: 900px) { .portrait-count { top: 48px; } }
@media (max-width: 899px) {
  .portrait-stage { height: clamp(400px,113vw,440px); aspect-ratio: auto; }
  .hero-copy { margin-top: 0; }
}

/* No-JavaScript navigation remains readable under the strict CSP. */
html:not(.js-enabled) .mobile-menu-toggle { display: none !important; }
html:not(.js-enabled) .section-nav { display: flex !important; flex-wrap: wrap; gap: 8px 16px; }
html:not(.js-enabled) .topbar { height: auto; min-height: 56px; }
html:not(.js-enabled) .topbar-inner { flex-wrap: wrap; }
html:not(.js-enabled) .section-nav a { min-height: 44px; }
.error-page { padding-block: 96px; }
.error-home { width: auto; }
.reel[data-poster="navarasa"] { --reel-poster: url(assets/poster-navarasa.webp); }
.reel[data-poster="storytelling"] { --reel-poster: url(assets/poster-storytelling.webp); }
.reel[data-poster="gossip"] { --reel-poster: url(assets/poster-gossip.webp); }
.reel[data-poster="sakhi"] { --reel-poster: url(assets/poster-sakhi.webp); }
.reel[data-poster="prayer"] { --reel-poster: url(assets/poster-prayer.webp); }
.reel[data-poster="faith"] { --reel-poster: url(assets/poster-faith.webp); }

/* Quiet motion: fixed geometry, no layout-property transitions. */
:root {
  --forest-green: var(--green);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-press: 120ms; --dur-hover: 240ms; --dur-ui: 320ms;
  --dur-reveal: 600ms; --dur-hero: 700ms;
}
.button { transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
.button .arrow-icon { transition: transform var(--dur-hover) var(--ease-out); }
.button:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-press); }
.reel { transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }
.reel:active { transform: scale(.985); }
.reel-media { position: absolute; inset: 0; transition: transform 700ms var(--ease-out); }
.reel-copy > span:first-child { transition: transform var(--dur-hover) var(--ease-out); }
.play-icon { --play-position: translate(-50%,-50%); opacity: .55; transform: var(--play-position) scale(1); transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
.reel:not(:first-child) .play-icon { --play-position: translate(0,0); transform: var(--play-position) scale(1); }
.fact, .more-dates li { transition: background-color var(--dur-hover) var(--ease-out); }
.lesson-number { transition: color var(--dur-hover) var(--ease-out); }
.lesson h3 { transition: transform var(--dur-hover) var(--ease-out); }
.section-nav a, .footer-links a, [data-map] a { position: relative; }
.section-nav a::after, .footer-links a::after, [data-map] a::after { content: ''; position: absolute; left: 0; bottom: 8px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { background-color: color-mix(in srgb,var(--gold) 94%,var(--cream)); transform: translateY(-1px); }
  .button-outline:hover { border-color: var(--cream); background-color: color-mix(in srgb,var(--cream) 8%,transparent); transform: translateY(-1px); }
  .button:hover .arrow-icon { transform: translate(3px,-3px); }
  .button[data-state="none"]:hover .arrow-icon { transform: translateX(3px); }
  .section-nav a:hover::after, .footer-links a:hover::after, [data-map] a:hover::after { transform: scaleX(1); }
  .reel:hover { border-color: color-mix(in srgb,var(--cream) 32%,transparent); }
  .reel:hover .reel-media { transform: scale(1.03); }
  .reel:hover .reel-copy > span:first-child { transform: translateY(-2px); }
  .reel:hover .play-icon { opacity: .8; transform: var(--play-position) scale(1.06); }
  .fact:hover, .more-dates li:hover { background-color: color-mix(in srgb,var(--cream) 4%,transparent); }
  .lesson:hover .lesson-number { color: color-mix(in srgb,var(--gold) 85%,var(--cream)); }
  .lesson:hover h3 { transform: translateX(4px); }
  .button:active { transform: translateY(0) scale(.98); }
}
.js-motion [data-reveal] { opacity: 0; transform: translateY(16px); }
.js-motion [data-reveal].is-revealed { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); transition-delay: var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms; }
.js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
.js-motion [data-reveal].reveal-immediate { transition-duration: 0ms,0ms,var(--dur-hover),var(--dur-hover); transition-delay: 0ms; }
.motion-animating { will-change: transform, opacity; }
@keyframes hero-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes photo-settle { from { transform: scale(1.015); } to { transform: none; } }
.js-motion .hero-copy > .micro, .js-motion .hero-copy > h1, .js-motion .hero-copy > p:not(.micro), .js-motion .hero-buttons, .js-motion .hero-card { animation: hero-arrival var(--dur-hero) var(--ease-out) both; }
.js-motion .hero-copy > h1 { animation-delay: 70ms; }
.js-motion .hero-copy > p:not(.micro) { animation-delay: 140ms; }
.js-motion .hero-buttons { animation-delay: 210ms; }
.js-motion .hero-card { animation-delay: 280ms; }
.js-motion .hero-figure { animation: photo-settle 1200ms var(--ease-out) both; }
@supports (backdrop-filter: blur(1px)) {
  .topbar { transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
  .is-scrolled .topbar { background: color-mix(in srgb,var(--forest-green) 82%,transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: color-mix(in srgb,var(--gold) 35%,transparent); }
}
.menu-icon { display: block; width: 18px; height: 18px; position: relative; }
.menu-icon i { position: absolute; left: 0; top: 5px; width: 18px; height: 2px; background: currentColor; transition: transform var(--dur-ui) var(--ease-out); }
.menu-icon i:last-child { top: 11px; }
[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-link { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes menu-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 899px) {
  .section-nav.is-open { animation: menu-in 220ms var(--ease-out) both; }
  .section-nav.is-open a { animation: menu-link var(--dur-ui) var(--ease-out) both; animation-delay: 80ms; }
  .section-nav.is-open a:nth-child(2) { animation-delay: 120ms; }
  .section-nav.is-open a:nth-child(3) { animation-delay: 160ms; }
  .section-nav.is-open a:nth-child(4) { animation-delay: 200ms; }
  .section-nav.is-open a:nth-child(5) { animation-delay: 240ms; }
  .section-nav.is-closing { display: flex; position: fixed; inset: 56px 0 0; flex-direction: column; gap: 0; padding: 24px var(--gutter); background: var(--black); animation: menu-out 160ms var(--ease-out) both; }
  .section-nav.is-closing a { min-height: 56px; font: 400 1.5rem var(--font-display); }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    @keyframes hero-drift { from { transform: none; } to { transform: translateY(-14px); } }
    .hero-picture { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  .hero-picture, .hero-figure, .hero-copy > *, .reel, .reel-media, .reel-copy > span:first-child, .lesson h3, .button, .button .arrow-icon { transform: none !important; }
}
.js-motion .reel[data-reveal]:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .reel:hover .play-icon { transform: var(--play-position); }
}
.js-motion .reel[data-reveal]:active { transition-duration: var(--dur-press); transition-delay: 0ms; }