/* ==========================================================================
   Bellandur Ganesha Utsava -- v2

   A reduction, not a transplant. The potbellyaudio.com structure that seeded
   this page was built around an absence: a studio under NDA that cannot show
   its work, so it performs typographically to fill the space. Ghost words, a
   waveform standing in for a showreel, a language marquee, an intro wipe,
   sheets sliding over one another.

   This festival has the opposite problem. A landmark idol, a lit pandal, a
   night procession. What survived from that structure is what is structural:
   the ink/paper sheet alternation with diagonal and rounded seams, the
   indexed detail rows, one statement band. What was cut was performance:
   the stacking (which measurably covered content before it could be read),
   the ghost words, the marquee, the abstract waveform, the intro overlay.

   The repo holds no photographs of the festival, only the mark. So the mark
   is the material: used large and cropped as the hero's visual, never faked
   into a photo thumbnail. Photo frames are sized 3:2 so real images can take
   over as the hero material without a redesign.

   Palette is the BGU cherry and gold system from css/main.css. Gold is never
   asked to carry body text on cream: --accent-soft does that, and each theme
   block gives it a value that passes on the ground it actually sits on.

   Type by register:
     statement  Cinzel 700 / 900   (display, all caps)
     label      Baloo Tamma 2 800  (micro caps, stats, row keys)
     body       Baloo Tamma 2 400  (running copy)
     emphasis   Baloo Tamma 2 700  (titles inside rows, links, captions)
     kannada    Noto Sans Kannada 700, Baloo Tamma 2 for running copy
   The repo shipped only 700 and 800, which forced every paragraph to be bold.
   The 400 is instantiated from the upstream Baloo Tamma 2 variable font at
   the same release (1.700) as those two statics, so all three cuts share one
   set of metrics: 1000 upem, 460 x-height, identical cmap.
   Every face here is OFL 1.1. The licences ship next to the faces they
   cover, in fonts-web/OFL-BalooTamma2.txt, OFL-Cinzel.txt and
   OFL-NotoSansKannada.txt, so the deployed payload carries its own terms.
   Noto Sans Kannada ships here at 700 only, so the two Kannada display lines
   set their weight explicitly rather than inheriting 400 and being faked.
   ========================================================================== */

@font-face { font-family:"Cinzel"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts-web/Cinzel-700.woff2") format("woff2"); }
@font-face { font-family:"Cinzel"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts-web/Cinzel-900.woff2") format("woff2"); }
@font-face { font-family:"Baloo Tamma 2"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts-web/BalooTamma2-400.woff2") format("woff2"); }
@font-face { font-family:"Baloo Tamma 2"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts-web/BalooTamma2-700.woff2") format("woff2"); }
@font-face { font-family:"Baloo Tamma 2"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts-web/BalooTamma2-800.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans Kannada"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts-web/NotoSansKannada-700.woff2") format("woff2"); }

/* ---- Themes -------------------------------------------------------------
   The page alternates two grounds, "strong" and "soft", and the theme decides
   which register that alternation plays in. Each theme is internally
   consistent: light is light throughout, dark is dark throughout, and the
   alternation survives in both as a tonal rhythm rather than a hard flip.

   Light is on bare :root so a device with no preference, and any browser that
   does not report one, still gets a complete palette. Dark arrives through
   prefers-color-scheme, guarded with :not([data-theme="light"]) so an explicit
   choice always beats the device, and is repeated for [data-theme="dark"] so
   the footer control wins in both directions. No colour is ever defined only
   inside a media query.

   Contrast, measured against the ground each colour actually sits on. Every
   pair is AA or better; the worst in the system is 4.72:1.
     light  body on strong   #3a0a12 on #f7e7c8  13.98:1
            body on soft     #3a0a12 on #fff8ec  16.14:1
            muted on strong  #6b0f1e on #f7e7c8  10.06:1
            accent on strong #7a4e12 on #f7e7c8   5.88:1
            solid pill       #f7e7c8 on #7a4e12   5.88:1, hover 8.17:1
     dark   body on strong   #fff8ec on #1a0508  18.60:1
            body on soft     #3a0a12 on #fff8ec  16.14:1
            muted on strong  #d9c4a0 on #1a0508  11.56:1
            accent on strong #d9b441 on #1a0508   9.87:1
            accent on soft   #9a6418 on #fff8ec   4.72:1
     Cherry blocks (the solid pill, the frame tiles) stay dark in both themes,
     so their labels are pinned to --ground-soft instead of riding --on-strong,
     which is dark cherry under the light theme.
   -------------------------------------------------------------------------- */

:root {
  /* Light: cream page, warm gold-cream for the assertive sheets, cherry ink. */
  --ground-strong: #f7e7c8;
  --ground-strong-raise: #fdf3dd;
  --cherry: #6b0f1e;
  --cherry-deep: #3a0a12;
  --ground-soft: #fff8ec;
  --ground-soft-raise: #fffdf7;

  --accent-strong: #7a4e12;
  /* In the light theme the hover state deepens rather than lightens, so
     --accent-lift goes darker than --accent-strong. #9a6418 lightened it and
     dropped the solid pill's label to 4.09:1. */
  --accent-lift: #5e3b0d;
  --accent-soft: #7a4e12;

  --on-strong: #3a0a12;
  --on-strong-mute: #6b0f1e;
  --on-soft: #3a0a12;
  --on-soft-mute: #6b0f1e;

  --line-strong: rgba(58, 10, 18, 0.18);
  --line-soft: rgba(58, 10, 18, 0.16);

  --nav-bg: rgba(255, 248, 236, 0.9);
  --hero-top: #fffdf7;
  --hero-glow: rgba(201, 147, 47, 0.3);
  --pill-ghost-border: rgba(58, 10, 18, 0.32);
  --shadow-card: 0 12px 30px rgba(58, 10, 18, 0.14);
  --shadow-mark: drop-shadow(0 16px 40px rgba(58, 10, 18, 0.2));

  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-label: "Baloo Tamma 2", "Noto Sans Kannada", system-ui, sans-serif;
  --font-body: "Baloo Tamma 2", "Noto Sans Kannada", system-ui, sans-serif;
  --font-kn: "Noto Sans Kannada", "Baloo Tamma 2", system-ui, sans-serif;

  --wrap: 1280px;
  --pad-x: clamp(20px, 5vw, 56px);
  --pad-y: clamp(64px, 9vw, 112px);

  --r-card: 20px;
  --r-pill: 999px;

  color-scheme: dark;
}

/* Dark, from the device. The guard means a reader who has chosen Light in the
   footer keeps it on a dark-set device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ground-strong: #1a0508;
  --ground-strong-raise: #2a080f;
  --ground-soft: #fff8ec;
  --ground-soft-raise: #fffdf7;

  --accent-strong: #d9b441;
  --accent-lift: #efd489;
  --accent-soft: #9a6418;

  --on-strong: #fff8ec;
  --on-strong-mute: #d9c4a0;
  --on-soft: #3a0a12;
  --on-soft-mute: #6b0f1e;

  --line-strong: rgba(255, 248, 236, 0.18);
  --line-soft: rgba(58, 10, 18, 0.16);

  --nav-bg: rgba(26, 5, 8, 0.9);
  --hero-top: #3a0a12;
  --hero-glow: rgba(196, 30, 58, 0.55);
  --pill-ghost-border: rgba(255, 248, 236, 0.34);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-mark: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5));
  }
}

/* Dark, chosen explicitly. Same values, so the control wins on a light device. */
:root[data-theme="dark"] {
  --ground-strong: #1a0508;
  --ground-strong-raise: #2a080f;
  --ground-soft: #fff8ec;
  --ground-soft-raise: #fffdf7;

  --accent-strong: #d9b441;
  --accent-lift: #efd489;
  --accent-soft: #9a6418;

  --on-strong: #fff8ec;
  --on-strong-mute: #d9c4a0;
  --on-soft: #3a0a12;
  --on-soft-mute: #6b0f1e;

  --line-strong: rgba(255, 248, 236, 0.18);
  --line-soft: rgba(58, 10, 18, 0.16);

  --nav-bg: rgba(26, 5, 8, 0.9);
  --hero-top: #3a0a12;
  --hero-glow: rgba(196, 30, 58, 0.55);
  --pill-ghost-border: rgba(255, 248, 236, 0.34);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-mark: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5));
}

/* ---- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ground-strong);
  color: var(--on-strong);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
/* height:auto matters: the logos carry 3762x3762 width/height attributes, so
   capping width alone leaves them 3762px tall. */
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-strong); color: var(--ground-strong); }

section { scroll-margin-top: 76px; }

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 2px;
}

.kn { font-family: var(--font-kn); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-strong);
  color: var(--ground-strong);
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

@keyframes bgurise  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bgublink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---- Nav ---------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 var(--pad-x);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-strong);
}

.site-nav__logo { display: flex; align-items: center; gap: 12px; }
.site-nav__logo img { height: 42px; margin: 13px 0; width: auto; }
.site-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.site-nav__link {
  color: var(--on-strong-mute);
  padding: 6px 2px;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.site-nav__link:hover { color: var(--accent-strong); }

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent-strong);
  color: var(--ground-strong);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 800;
  text-transform: uppercase;
  transition: background 0.25s ease;
}
.site-nav__cta:hover { background: var(--accent-lift); }

/* ---- Shared layout ------------------------------------------------------ */

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow--strong  { color: var(--accent-strong); }
.eyebrow--soft { color: var(--accent-soft); }

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.lede {
  font-size: 17px;
  line-height: 1.8;
  max-width: 60ch;
}

/* Replaces an inline style: the photos sheet needs air under its lede. */
.lede--gap { margin-bottom: 44px; }

.when__notice .pill-row { margin-top: 18px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 76px);
}
.split .lede + .pill-row { margin-top: 28px; }

/* Sheets: ink and paper alternating, joined by seams. No stacking. Sections
   simply follow one another, so nothing covers content that has not been
   read yet. */
.sheet { position: relative; overflow: hidden; }

.sheet--strong  { background: var(--ground-strong);  color: var(--on-strong); }
.sheet--soft { background: var(--ground-soft); color: var(--on-soft); }

.sheet--strong .lede  { color: var(--on-strong-mute); }
.sheet--soft .lede { color: var(--on-soft-mute); }

.seam-down {
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
}
.seam-up {
  clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
  margin-top: -4vw;
}
.seam-down > .wrap,
.seam-up > .wrap { padding-top: calc(40px + 4vw); }

.seam-round {
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
}

/* Pills */
.pill {
  display: inline-block;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pill--solid { background: var(--accent-strong); color: var(--ground-strong); }
.pill--solid:hover { background: var(--accent-lift); }

.pill--cherry { background: var(--cherry); color: var(--ground-soft); }
.pill--cherry:hover { background: var(--cherry-deep); }

.pill--ghost-strong { border: 1px solid var(--pill-ghost-border); color: var(--on-strong); }
.pill--ghost-strong:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.pill--ghost-soft { border: 1px solid var(--line-soft); color: var(--on-soft); }
.pill--ghost-soft:hover { border-color: var(--on-soft); background: rgba(58, 10, 18, 0.05); }

.pill-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Indexed rows: the strongest pattern carried over from the reference. */
.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line-strong);
}
.row:last-child { border-bottom: 1px solid var(--line-strong); }
.sheet--soft .row { border-color: var(--line-soft); }

.row__key {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding-top: 4px;
  color: var(--accent-strong);
}
.sheet--soft .row__key { color: var(--accent-soft); }

.row__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }

.row__text { font-size: 15px; line-height: 1.75; }
.sheet--strong .row__text  { color: var(--on-strong-mute); }
.sheet--soft .row__text { color: var(--on-soft-mute); }

/* ---- Hero --------------------------------------------------------------- */
/* The mark is the material. Not a watermark and not a fake photograph: it is
   the one piece of real, owned, distinctive artwork this festival has, so it
   is used at full strength as the hero's visual anchor. */

.hero {
  background:
    radial-gradient(ellipse 80% 60% at 78% 30%, var(--hero-glow), transparent 62%),
    linear-gradient(180deg, var(--hero-top), var(--ground-strong) 78%);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
  flex-shrink: 0;
  animation: bgublink 2.6s ease-in-out infinite;
}

.hero__eyebrow span:last-child {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--on-strong-mute);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both;
}
.hero__title em { font-style: normal; color: var(--accent-strong); }

.hero__kn {
  font-family: var(--font-kn);
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-lift);
  margin-top: 18px;
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both;
}

/* The date is the one fact a festival visitor came for, so it sits directly
   under the name rather than waiting in the When section. */
.hero__dates {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 3px solid var(--accent-strong);
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.17s both;
}
.hero__dates-range {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__dates-note {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-strong-mute);
}

.hero__sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--on-strong-mute);
  max-width: 46ch;
  margin-top: 24px;
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
  animation: bgurise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.26s both;
}
.hero__cta .pill { padding: 18px 36px; font-size: 13px; }

.hero__mark {
  animation: bgurise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
}
.hero__mark img {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  filter: var(--shadow-mark);
}

/* ---- When: the five days ------------------------------------------------ */
/* Promoted to second, immediately after the hero. For a festival site the
   date is the single most valuable thing on the page. Each day carries its
   calendar date and its programme, so publishing next year's is a content
   edit and not a layout change. */

.when__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: 48px;
}

.when__notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent-strong);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 22px 26px;
  background: var(--ground-strong-raise);
}
.when__notice strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.when__notice span { font-size: 15px; line-height: 1.7; color: var(--on-strong-mute); }

.days { display: flex; flex-direction: column; }

.day {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 180px;
  gap: 28px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--line-strong);
}
.day:last-child { border-bottom: 1px solid var(--line-strong); }

.day--finale .day__num,
.day--finale .day__title { color: var(--accent-strong); }

.day__num {
  font-family: var(--font-label);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-strong-mute);
}

.day__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.day__note { font-size: 14px; line-height: 1.7; color: var(--on-strong-mute); margin-top: 6px; }

/* The day's calendar date, right aligned so the five stack into a column. */
.day__when {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-strong-mute);
  text-align: right;
}

/* The day's programme. Times sit in their own column so the five days read
   as one timetable rather than five paragraphs. */
.slots {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.slot {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}

.slot__time {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-lift);
  font-variant-numeric: tabular-nums;
}

.slot__what { font-size: 15px; line-height: 1.5; }

.slot__sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-strong-mute);
}

/* ---- Programme poster --------------------------------------------------- */
/* The mandali's own sheet, offered as one large control: the whole card is
   the button, so the tap target is the card and not a small link inside it.
   The timetable above stays the accessible copy of the same information. */

.poster { margin-top: 56px; }

.poster__card {
  display: grid;
  grid-template-columns: clamp(128px, 15vw, 188px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 34px);
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--ground-strong-raise);
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.poster__card:hover { border-color: var(--accent-strong); }
.poster__card:hover .poster__thumb { transform: translateY(-2px); }
.poster__card:hover .poster__cta { color: var(--accent-strong); }

.poster__thumb {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease;
  aspect-ratio: 1122 / 1402;
  background: #1a0a0c;
}
.poster__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.poster__body { display: block; }

.poster__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-lift);
}

.poster__title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.poster__text {
  display: block;
  margin-top: 10px;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-strong-mute);
}

/* Styled as a pill but it is not a control of its own: the whole card is the
   button, so this only has to look like the thing you are about to press. */
.poster__cta {
  justify-self: end;
  padding: 16px 30px;
  border: 1px solid var(--pill-ghost-border);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-strong);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.poster__card:hover .poster__cta { border-color: var(--accent-strong); }

/* ---- Poster viewer ------------------------------------------------------ */
/* <dialog> brings the modal semantics, the focus trap and Esc with it, so the
   script only opens it, closes it and runs the share. */

.poster-modal {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--ground-strong);
  color: var(--on-strong);
  overflow: hidden;
}
.poster-modal::backdrop { background: rgba(12, 2, 5, 0.78); }

.poster-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

.poster-modal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 14px 22px;
  border-bottom: 1px solid var(--line-strong);
}

.poster-modal__title {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.poster-modal__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--on-strong);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.poster-modal__close:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.poster-modal__img {
  width: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--ground-strong-raise);
}

.poster-modal__bar {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line-strong);
}

.poster-modal__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.poster-modal__actions .pill { padding: 14px 26px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.poster-modal__actions button.pill { border: 1px solid transparent; }

/* Empty until the share runs, so it takes no room in the resting state. */
.poster-modal__status {
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-strong-mute);
}
.poster-modal__status:not(:empty) { margin-top: 12px; }

/* ---- Facts strip -------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: 56px;
}

.fact { padding: 22px 0 0; border-top: 2px solid var(--accent-soft); }
.sheet--strong .fact { border-color: var(--accent-strong); }

.fact__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--cherry);
}
.sheet--strong .fact__num { color: var(--accent-strong); }

.fact__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-soft-mute);
  margin-top: 12px;
}
.sheet--strong .fact__label { color: var(--on-strong-mute); }

/* ---- Photo frames ------------------------------------------------------- */
/* There are no festival photographs in this repo, so these are not dressed
   up as thumbnails: no play button, no fake still. Each frame carries the
   mark as ornament and links to where the pictures actually live. The 3:2
   ratio is the point. Drop an <img> in and the section becomes a real
   gallery with no other change. */

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  align-items: stretch;
}

.frames > article {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.frame__box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(ellipse 65% 65% at 50% 40%, rgba(239, 212, 137, 0.18), transparent 62%),
    linear-gradient(158deg, var(--cherry), var(--cherry-deep));
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.frame__box:hover { transform: translateY(-4px); border-color: var(--accent-strong); }

.frame__box img {
  width: 40%;
  max-width: 132px;
  opacity: 0.9;
  transition: transform 0.4s ease;
}
.frame__box:hover img { transform: scale(1.04); }

/* Instagram QR: cropped white card, sized large inside the shared 3:2 tile. */
.frame__box--qr {
  background:
    radial-gradient(ellipse 65% 65% at 50% 40%, rgba(239, 212, 137, 0.12), transparent 62%),
    linear-gradient(158deg, var(--cherry), var(--cherry-deep));
}
.frame__box--qr img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 88%;
  margin: auto;
  object-fit: contain;
  opacity: 1;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(12, 2, 5, 0.32);
}
.frame__box--qr:hover img { transform: scale(1.03); }

.frame__caption {
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
  flex: 1 1 auto;
  line-height: 1.35;
}

.frame__where {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-top: 5px;
}

/* ---- Statement band ----------------------------------------------------- */

.band {
  margin-top: 72px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  text-align: center;
}
.sheet--strong .band { border-color: var(--line-strong); }

.band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 940px;
  margin: 0 auto;
}

.band__title .stroke {
  color: var(--ground-strong);
  background: var(--accent-strong);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sheet--strong .band__title .stroke { background: none; color: var(--accent-strong); padding: 0; }

.band__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--on-soft-mute);
  margin: 22px auto 0;
  max-width: 54ch;
}
.sheet--strong .band__text { color: var(--on-strong-mute); }

/* ---- Segments ----------------------------------------------------------- */

.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: 40px;
}

.segment { padding: 24px 0; border-top: 1px solid var(--line-soft); }
.sheet--strong .segment { border-color: var(--line-strong); }
.segment__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.segment__text { font-size: 14px; line-height: 1.7; color: var(--on-soft-mute); }
.sheet--strong .segment__text { color: var(--on-strong-mute); }

/* ---- About -------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(min(100%, 340px), 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.about__portrait {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--ground-soft-raise), #f7e7c8);
  padding: 20px;
}

.about__caption {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-soft-mute);
  margin-top: 14px;
}

.about__body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--on-soft-mute);
  margin-bottom: 16px;
  max-width: 60ch;
}
.about__body .pill-row { margin-top: 28px; }

/* ---- Seva: donate and contact ------------------------------------------- */

.seva__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--on-strong-mute);
  margin-top: 32px;
}
.seva__lines a { color: var(--on-strong); font-weight: 700; padding: 3px 0; }
.seva__lines a:hover { color: var(--accent-strong); }
.seva__lines .addr { line-height: 1.7; }

.seva__actions { align-self: start; }
.seva__actions .pill-row { flex-direction: column; align-items: flex-start; }
.seva__actions .pill { padding: 18px 38px; font-size: 13px; }

.qr-frame {
  display: inline-block;
  background: var(--ground-soft);
  border-radius: var(--r-card);
  padding: 18px 18px 12px;
  margin-bottom: 26px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.qr-frame img { width: clamp(150px, 20vw, 200px); border-radius: 8px; }
.qr-frame figcaption {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-soft-mute);
  margin-top: 12px;
}

.volunteer { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line-strong); }

/* ---- Partners: Kauvery health partner ---------------------------------- */

.partners__mark {
  margin: 0;
  display: grid;
  place-items: start;
}

.partners__mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(280px, 70vw);
  max-height: 120px;
  object-fit: contain;
}

.volunteer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.volunteer__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--on-strong-mute);
  margin-bottom: 20px;
  max-width: 50ch;
}

/* ---- Footer ------------------------------------------------------------- */

.site-footer { background: var(--ground-strong); border-top: 1px solid var(--line-strong); }

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* The preferences sit on their own row under a divider, so they read as
   controls rather than as more footer content. */
.site-footer__inner--prefs {
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
}
.site-footer__inner:first-child { padding-bottom: 24px; }

.site-footer__logo { height: 38px; width: auto; opacity: 0.9; }

.site-footer__tagline {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-strong-mute);
}

.site-footer__social {
  display: flex;
  /* Three pills do not fit on one line at 360px, where body overflow-x: clip
     was silently cutting the third one off. */
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-footer__social a {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  color: var(--on-strong-mute);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.site-footer__social a:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

.site-footer__signoff {
  font-family: var(--font-kn);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
}

.site-footer__copyright { font-size: 12px; font-weight: 400; color: var(--on-strong-mute); }


/* ---- Footer preferences -------------------------------------------------
   Language and theme, as two segmented controls. Real <button>s in a
   role="group", state carried on aria-pressed so it reaches assistive tech
   rather than living only in a class.
   -------------------------------------------------------------------------- */

.site-footer__prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
}

.pref {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pref__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-strong-mute);
}

.pref__set {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}

.pref__btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Never below the 24px tap-target floor, nor the 12px text floor. */
  min-height: 28px;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-strong-mute);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pref__btn:hover { color: var(--on-strong); }

.pref__btn[aria-pressed="true"] {
  background: var(--accent-strong);
  color: var(--ground-strong);
}

/* ---- Kannada -----------------------------------------------------------
   Cinzel carries no Kannada at all, so the display face has to change with
   the language or every heading falls back to whatever the OS offers. Baloo
   Tamma 2 is the Kannada member of its family and covers the script at 400,
   700 and 800.

   Two further corrections the script needs. Cinzel headings run at
   line-height 1.06, which clips Kannada vowel signs and conjuncts, so
   Kannada headings get room. And the wide tracking that suits Latin small
   caps pulls Kannada clusters apart, so it is dialled back wherever it was
   set for the label register.
   -------------------------------------------------------------------------- */

:root[data-lang="kn"] {
  --font-display: "Baloo Tamma 2", "Noto Sans Kannada", system-ui, sans-serif;
}

[data-lang="kn"] .hero__title,
[data-lang="kn"] .headline,
[data-lang="kn"] .day__title,
[data-lang="kn"] .poster__title,
[data-lang="kn"] .band__title,
[data-lang="kn"] .volunteer__title,
[data-lang="kn"] .fact__num {
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
}

/* Baloo Tamma 2 stops at 800, so the 900 hero title would be synthesised. */
[data-lang="kn"] .hero__title,
[data-lang="kn"] .fact__num { font-weight: 800; }

[data-lang="kn"] .eyebrow,
[data-lang="kn"] .hero__eyebrow span,
[data-lang="kn"] .site-nav__links,
[data-lang="kn"] .pref__label,
[data-lang="kn"] .pref__btn,
[data-lang="kn"] .pill,
[data-lang="kn"] .site-nav__link,
[data-lang="kn"] .site-nav__cta,
[data-lang="kn"] .site-nav__wordmark,
[data-lang="kn"] .day__num,
[data-lang="kn"] .day__when,
[data-lang="kn"] .fact__label,
[data-lang="kn"] .frame__where,
[data-lang="kn"] .about__caption,
[data-lang="kn"] .qr-frame figcaption,
[data-lang="kn"] .poster__eyebrow,
[data-lang="kn"] .poster__cta,
[data-lang="kn"] .poster-modal__title,
[data-lang="kn"] .slot__time,
[data-lang="kn"] .hero__dates-range,
[data-lang="kn"] .when__notice strong,
[data-lang="kn"] .site-footer__tagline,
[data-lang="kn"] .site-footer__social,
[data-lang="kn"] .skip-link {
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Kannada times read "evening 7:00 to night 10:00", so the column needs
   more room than the English "7:00 to 10:00 pm". */
[data-lang="kn"] .slot { grid-template-columns: 208px minmax(0, 1fr); }

/* The hero's second line carries the name in the other language, so it keeps
   Latin shaping while the page is in Kannada. */
[data-lang="kn"] .hero__kn {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- Tablet ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__mark { order: -1; }
  .hero__mark img { max-width: 250px; margin: 0; }
  /* Below this width the copy and a right hand pill fight for room, so the
     call to action moves under the text. */
  .poster__card { grid-template-columns: clamp(120px, 18vw, 170px) minmax(0, 1fr); }
  .poster__cta { grid-column: 2; justify-self: start; }

  /* The date column shrinks to its content rather than dropping below the
     programme, so every day still opens with "Day N ... Mon 14 Sep". */
  .day { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 20px; }
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 220px; }
}

/* ---- Phone -------------------------------------------------------------- */

@media (max-width: 640px) {
  .site-nav__link { display: none; }
  .site-nav__wordmark { display: none; }

  .hero__title { font-size: 9.6vw; line-height: 1.08; }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .pill { text-align: center; }

  .headline { font-size: 7.8vw; line-height: 1.14; }

  .lede,
  .about__body p,
  .band__text,
  .volunteer__text,
  .segment__text,
  .row__text,
  .day__note,
  .seva__lines { font-size: 14px; }

  /* The thumbnail keeps its own row so the copy is not squeezed into
     half the screen. */
  .poster__card { grid-template-columns: 1fr; gap: 20px; }
  .poster__thumb { max-width: 210px; }
  .poster__cta { grid-column: 1; justify-self: stretch; text-align: center; }
  .poster__text { font-size: 14px; }
  .poster-modal__actions .pill { flex: 1 1 auto; text-align: center; }

  /* Full-bleed poster in phone portrait so the sheet uses every pixel of
     width; landscape keeps the centered 420px modal. */
  @media (orientation: portrait) {
    .poster-modal {
      width: 100%;
      max-width: 100vw;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
    .poster-modal__inner { max-height: 100dvh; }
  }

  .day {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: baseline;
  }
  .day__num { grid-column: 1; grid-row: 1; }
  .day__when { grid-column: 2; grid-row: 1; }
  .day > div { grid-column: 1 / -1; grid-row: 2; }

  /* Two columns leave the programme names on two or three lines each at this
     width, so the time moves above what it belongs to. */
  .slot,
  [data-lang="kn"] .slot { grid-template-columns: 1fr; gap: 2px; }
  .slots { gap: 16px; margin-top: 16px; }

  .fact__num { font-size: 32px; }

  .seva__actions .pill-row { width: 100%; }
  .seva__actions .pill { width: 100%; text-align: center; }

  .band { margin-top: 48px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* Detail rows collapse; tap the title to expand the description. */
  .row {
    cursor: pointer;
    padding: 18px 0;
    grid-template-columns: 28px 1fr;
    gap: 14px;
  }

  .row__title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 0;
  }

  .row__title::after {
    content: "+";
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .row.is-open .row__title::after { content: "\2212"; }
  .row.is-open .row__title { margin-bottom: 8px; }

  .row__text { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .row.is-open .row__text { max-height: 400px; }
}