/* ============================================================================
   SREE MADAYI KAVU · "Heritage Ivory" design system
   ----------------------------------------------------------------------------
   One accent, hairline rules, wide margins, no decorative gradients. Structure
   comes from type scale and whitespace so photography can carry the mood.
   Section styles live below the tokens/components and share the same rhythm.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* ink */
  --ink: #241a15;
  --ink-2: #4a3a31;
  --ink-3: #7a6759;

  /* accents — used sparingly, never as fills for large areas */
  --maroon: #6b1210;
  --maroon-dark: #4a0c0b;
  --brass: #96702f;
  --brass-lift: #b98b2f;

  /* surfaces */
  --ivory: #fbf8f3;
  --ivory-2: #f5efe5;
  --paper: #fff;
  --night: #1c1310;

  /* hairlines */
  --line: #e4dccd;
  --line-2: #d3c7b1;

  /* type */
  --serif: 'Cormorant Garamond', 'Noto Serif Malayalam', 'Noto Serif Devanagari', Georgia, serif;
  --sans: 'Inter', 'Noto Sans Malayalam', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --gut: 28px;
  --shell: 1220px;
  --section-y: 104px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--brass-lift);
  outline-offset: 3px;
}

/* the language switcher shows exactly one variant of every translated string */
.lang { display: inline; }
.lang.ml,
.lang.hi { display: none; }

/* Indic scripts lose their conjuncts under tracking — opt them out wherever a
   label is set in small caps */
.label .lang.ml,
.label .lang.hi,
.eyebrow .lang.ml,
.eyebrow .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.15em;
}

/* --------------------------------------------------------------- layout --- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.shell-wide {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

::selection {
  background: var(--brass-lift);
  color: #fffdf8;
}

/* the header is sticky — keep anchored headings clear of it */
[id] { scroll-margin-top: 108px; }

.section { padding: var(--section-y) 0; }

.section-tight { padding: 72px 0; }

.section-paper { background: var(--paper); }

.section + .section-paper,
.section-paper + .section { border-top: 1px solid var(--line); }

/* ----------------------------------------------------------- components -- */

/* icon chip — the page's one repeating ornament, shared by the quick bar,
   the rules, the visit facts and anywhere else an icon needs a home */
.ic-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fdf7ec;
  color: var(--maroon);
  font-size: 15px;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.ic-chip--lg {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

/* small-caps label: the only "decoration" a section header gets */
.label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}

.label i {
  margin-right: 9px;
  font-size: 12px;
  color: var(--brass-lift);
}

.section-head { margin-bottom: 52px; }

.section-head .label { margin-bottom: 18px; }

.section-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  max-width: 22ch;
}

.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-head.center h2 {
  max-width: 26ch;
  margin: 0 auto;
}

.section-head .lead {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 16.5px;
  color: var(--ink-2);
}

.section-head.center .lead { margin-inline: auto; }

/* header rule: a single hairline that runs to the edge of the shell */
.head-rule {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 46px;
}

.head-rule h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  white-space: nowrap;
}

/* the rule runs between the heading and whatever action follows it */
.head-rule::after {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.head-rule > .tlink { order: 2; }

/* text link with a brass underline — replaces the old filled buttons */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--brass-lift);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--maroon);
  transition: gap .3s ease, color .3s ease;
}

.tlink .lang.ml,
.tlink .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.15em;
}

.tlink:hover {
  gap: 16px;
  color: var(--brass);
}

.tlink svg { flex: none; }

/* solid action — used once or twice per page, never in rows */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--maroon);
  color: #fdf7ec;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .3s ease;
}

.btn .lang.ml,
.btn .lang.hi {
  letter-spacing: .02em;
  text-transform: none;
  font-size: 1.2em;
}

.btn:hover { background: var(--maroon-dark); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.btn-ghost:hover {
  background: var(--ivory-2);
  border-color: var(--brass-lift);
}

/* =========================================================== 1 · topbar == */
.topbar {
  background: var(--night);
  color: #d8c9b4;
  font-size: 12px;
  letter-spacing: .04em;
}

.topbar .shell-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}

.topbar .estd { color: #a4907a; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.topbar a:hover { color: #f0e2cb; }

/* language: three plain letters, no dropdown to open */
.langset {
  display: flex;
  align-items: center;
  gap: 2px;
}

.langset button {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: #a4907a;
  transition: color .25s ease, background .25s ease;
}

.langset button:hover { color: #f0e2cb; }

.langset button.is-on {
  color: var(--night);
  background: #c9a961;
}

/* ============================================================ 2 · header = */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 243, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(10px);
}

.site-head .shell-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand-mark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--maroon);
  white-space: nowrap;
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav a {
  position: relative;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .25s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brass-lift);
  transition: right .32s cubic-bezier(.2, .7, .2, 1);
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--maroon); }

.nav a:hover::after,
.nav a[aria-current="page"]::after { right: 0; }

.head-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-2);
}

.burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ink);
  box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink);
}

/* mobile drawer */
.drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.drawer.is-open { display: block; }

.drawer a {
  display: block;
  padding: 16px var(--gut);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================================================== 3 · hero = */
.hero {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
}

.hero-frames {
  position: absolute;
  inset: 0;
}

.hero-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s ease, transform 9s linear;
}

.hero-frames img.is-on {
  opacity: 1;
  transform: scale(1);
}

/* two warm scrims — bottom for the name block, left so the type column stays
   legible whatever the banner behind it happens to be doing */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hero::before {
  background: linear-gradient(180deg,
      rgba(20, 12, 9, .52) 0%,
      rgba(20, 12, 9, .12) 30%,
      rgba(20, 12, 9, .58) 72%,
      rgba(20, 12, 9, .9) 100%);
}

.hero::after {
  background: linear-gradient(90deg,
      rgba(18, 11, 8, .74) 0%,
      rgba(18, 11, 8, .46) 38%,
      rgba(18, 11, 8, .06) 68%,
      transparent 88%);
}

.hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 68px;
  color: #f6ece0;
}

.hero .eyebrow {
  display: block;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #d9bd7f;
}

.hero h1 {
  max-width: 18ch;
  font-size: clamp(46px, 7.4vw, 96px);
  font-weight: 600;
  line-height: 1.02;
  color: #fff;
}

.hero h1 .lang.ml,
.hero h1 .lang.hi { font-size: .78em; }

.hero-lead {
  margin-top: 26px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: #e4d5c3;
}

.hero-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 38px;
}

.hero .tlink {
  color: #f3e4cd;
  border-bottom-color: #c9a961;
}

.hero .tlink:hover { color: #fff; }

/* live darshan state — a sentence, not a badge */
.darshan-now {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: #e8dac6;
}

.darshan-now .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a961;
}

.darshan-now[data-live="open"] .dot {
  background: #7cc294;
  box-shadow: 0 0 0 4px rgba(124, 194, 148, .22);
}

.darshan-now .state { display: none; }
.darshan-now[data-live="open"] .state-open { display: inline; }
.darshan-now[data-live="shut"] .state-shut { display: inline; }

.darshan-now b {
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* slide markers */
.hero-dots {
  position: absolute;
  right: var(--gut);
  bottom: 74px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero-dots button {
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, .32);
  transition: background .3s ease;
}

.hero-dots button.is-on { background: #c9a961; }

/* ========================================================== 4 · quickbar = */
.quickbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.quickbar ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.quickbar li + li { border-left: 1px solid var(--line); }

.quickbar a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 30px 30px;
  transition: background .3s ease;
}

.quickbar a:hover { background: var(--ivory); }

.quickbar a:hover .ic-chip {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fdf7ec;
}

.quickbar .ic-chip { margin-top: 3px; }

.quickbar .qk-label {
  display: block;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}

.quickbar .qk-title {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
}

.quickbar .qk-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ========================================================== 5 · notices == */
.noticebar {
  background: var(--ivory-2);
  border-bottom: 1px solid var(--line);
}

.noticebar .shell {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 58px;
}

.noticebar .label { flex: none; }

.notice-reel {
  position: relative;
  flex: 1;
  min-height: 22px;
}

.notice-reel li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  font-size: 14.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-reel li.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.notice-reel strong {
  font-weight: 600;
  color: var(--maroon);
}

.notice-nav {
  flex: none;
  display: flex;
  gap: 6px;
}

.notice-nav button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: border-color .25s ease, color .25s ease;
}

.notice-nav button:hover {
  border-color: var(--brass-lift);
  color: var(--maroon);
}

/* ============================================================ 6 · about == */
.editorial {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: start;
}

.editorial h2 {
  font-size: clamp(32px, 3.8vw, 50px);
  max-width: 20ch;
}

.editorial .label { margin-bottom: 18px; }

.ed-body {
  margin-top: 26px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

.ed-body p + p { margin-top: 20px; }

.ed-body .drop::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--serif);
  font-size: 62px;
  line-height: .78;
  font-weight: 600;
  color: var(--maroon);
}

.ed-actions { margin-top: 34px; }

/* the frame wraps the photograph only — never the caption */
.ed-frame {
  position: relative;
  display: block;
}

/* offset brass frame — one heritage flourish, behind the photograph */
.ed-frame::before {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--line-2);
  pointer-events: none;
}

.ed-figure img {
  position: relative;
  width: 100%;
  height: 560px;
  object-fit: cover;
}

/* consecration seal sitting on the corner of the photograph */
.ed-seal {
  position: absolute;
  left: 0;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 22px;
  background: var(--maroon);
  color: #f3e3cb;
}

.ed-seal i {
  font-size: 20px;
  color: var(--brass-lift);
}

.ed-seal b {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

.ed-seal span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ed-seal .lang.ml,
.ed-seal .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}

.ed-figure figcaption {
  margin-top: 38px;      /* clears the offset frame below the photograph */
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* stat row under the editorial column */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.stats div {
  padding: 24px 20px 0 0;
}

.stats i {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--brass-lift);
}

.stats b {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--maroon);
}

/* direct children only — a .lang span inside the <b> must keep the <b> styling */
.stats > div > span {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stats > div > span .lang.ml,
.stats > div > span .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13.5px;
}

.stats b .lang.ml,
.stats b .lang.hi { font-size: .82em; }

/* ========================================================== 7 · timings == */
#timings {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(245, 239, 229, .9)),
    var(--ivory-2);
}

#timings .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 38px;
  align-items: end;
}

#timings .section-head::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.timings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* each half of the day is a schedule panel; pooja and darshan align as rows */
.timings-col {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-content: start;
  min-height: 370px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(36, 26, 21, .07);
  overflow: hidden;
}

.timings-col + .timings-col {
  padding-left: 30px;
}

.timings-col::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brass-lift), rgba(107, 18, 16, .72));
}

/* sun / moon anchor beside each half of the day */
.timings-col .col-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.timings-col .col-head .ic-chip {
  order: 2;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff8ed;
}

.timings-col h3 {
  font-size: 32px;
  margin-bottom: 6px;
}

.timings-col .span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.slot-group {
  min-width: 0;
  padding-top: 2px;
}

.slot-group .label {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.slot {
  position: relative;
  display: grid;
  grid-template-columns: max-content 18px max-content minmax(42px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  transition: border-color .28s ease, color .28s ease, padding-left .28s ease;
}

/* the live window earns a brass edge, not a coloured box */
.slot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--brass-lift);
  opacity: 0;
  transition: opacity .32s ease;
}

.slot.is-now {
  padding-left: 18px;
}

.slot.is-now::before { opacity: 1; }

.slot .from,
.slot .to {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.slot .sep {
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--line-2);
  transform: translateY(-5px);
}

.slot .mark {
  justify-self: end;
  align-self: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
}

.slot .mark .lang.ml,
.slot .mark .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

.slot.is-now { border-bottom-color: var(--brass-lift); }

.slot.is-now .from,
.slot.is-now .to { color: var(--maroon); }

.slot.is-now .mark { opacity: 1; }

.timings-note {
  position: relative;
  margin-top: 22px;
  padding: 18px 22px 18px 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  color: var(--ink-3);
  max-width: none;
}

.timings-note::before {
  content: '\f05a';
  position: absolute;
  left: 22px;
  top: 18px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--brass-lift);
}

/* ========================================================== 8 · utsavam == */
.utsavam {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.days li {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.days li:first-child { border-top: 1px solid var(--line-2); }

.days .when {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 6px;
}

.days .when .lang.ml,
.days .when .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13.5px;
}

.days h3 {
  font-size: 23px;
  font-weight: 600;
}

.days p {
  margin-top: 3px;
  font-size: 14.5px;
  color: var(--ink-3);
}

.days li.major h3 { color: var(--maroon); }

.days li.major .when::before {
  content: '\2022\00a0';
  color: var(--brass-lift);
}

/* month grid */
.cal {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 26px 26px 30px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cal-head .month {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.cal-head button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: border-color .25s ease, color .25s ease;
}

.cal-head button:hover {
  border-color: var(--brass-lift);
  color: var(--maroon);
}

.cal table {
  width: 100%;
  border-collapse: collapse;
}

.cal th {
  padding: 8px 0 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cal td {
  padding: 9px 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.cal td span {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  cursor: default;
}

.cal td.has span {
  cursor: pointer;
  color: var(--maroon);
  font-weight: 600;
}

.cal td.has span::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brass-lift);
}

.cal td.today span {
  background: var(--maroon);
  color: #fff;
}

.cal-hint {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* event readout under the calendar */
.cal-event {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.cal-event b {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--maroon);
}

/* ========================================================= 9 · projects == */
.projects li {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.projects li:first-child { border-top: 1px solid var(--line-2); }

.projects img {
  width: 240px;
  height: 150px;
  object-fit: cover;
  filter: saturate(.92);
}

.projects .no-img {
  width: 240px;
  height: 150px;
  background: var(--ivory-2);
}

.projects h3 {
  font-size: 23px;
  max-width: 34ch;
}

.projects .meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.projects .status {
  color: var(--brass);
  font-weight: 600;
}

.projects .amount {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--maroon);
  white-space: nowrap;
}

/* =========================================================== 10 · frames == */
.frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.frames a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ivory-2);
}

.frames a::before {
  content: '';
  display: block;
  padding-top: 78%;
}

.frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
  filter: saturate(.92);
}

/* magnifier veil on hover, so the grid reads as openable */
.frames a::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fdf7ec;
  background: rgba(74, 12, 11, .42);
  opacity: 0;
  transition: opacity .4s ease;
}

.frames a:hover img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

.frames a:hover::after { opacity: 1; }

.frames a.tall { grid-row: span 2; }

.frames a.tall::before { padding-top: 157%; }

/* lightbox */
.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 40px;
  background: rgba(16, 10, 8, .94);
}

.lbox.is-open { display: grid; }

.lbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  object-fit: contain;
}

.lbox button {
  position: absolute;
  color: #e9d9be;
  font-size: 22px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(233, 217, 190, .3);
}

.lbox button:hover { border-color: #c9a961; }

.lbox .x { top: 26px; right: 26px; }
.lbox .p { left: 26px; top: 50%; transform: translateY(-50%); }
.lbox .n { right: 26px; top: 50%; transform: translateY(-50%); }

/* ============================================================ 11 · visit == */
.visit {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.facts { border-top: 1px solid var(--line-2); }

.facts > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.facts .label { margin-bottom: 7px; }

.facts p,
.facts a {
  font-size: 16px;
  color: var(--ink);
}

.facts a { border-bottom: 1px solid var(--line-2); }

.facts a:hover { border-bottom-color: var(--brass-lift); }

.visit-map {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 10px;
}

.visit-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  filter: saturate(.8) contrast(1.02);
}

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.rules-head { margin-top: 76px; }

/* rules — compact, three columns, no icons */
.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 46px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
}

.rules li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.rules .ic-chip { margin-top: 2px; }

.rules b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.rules p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* =========================================================== 12 · footer == */
.site-foot {
  background: var(--night);
  color: #b9a68f;
  font-size: 14.5px;
}

.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  padding: 76px 0 64px;
}

.site-foot h5 {
  margin-bottom: 20px;
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c9a961;
}

.site-foot h5 .lang.ml,
.site-foot h5 .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

.foot-brand {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: #f2e6d3;
  margin-bottom: 16px;
}

.foot-top p { max-width: 42ch; }

.site-foot li + li { margin-top: 12px; }

.site-foot a:hover { color: #f2e6d3; }

/* icon-led link and contact lines */
.foot-link,
.foot-line {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.foot-line + .foot-line { margin-top: 12px; }

.foot-link i,
.foot-line i {
  flex: none;
  width: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: #c9a961;
  transition: transform .28s ease;
}

.foot-link:hover i { transform: translateX(3px); }

.social {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}

.social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 169, 97, .32);
  color: #c9a961;
  transition: background .28s ease, color .28s ease;
}

.social a:hover {
  background: #c9a961;
  color: var(--night);
}

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(201, 169, 97, .18);
  font-size: 12.5px;
  color: #8d7c68;
}

/* floating whatsapp — kept, restyled to the system */
.wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #25623f;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 10px 26px rgba(20, 12, 9, .28);
  transition: transform .3s ease;
}

.wa:hover { transform: translateY(-3px); }

/* ======================================================== 13 · page head = */
/* the inner pages open with a short version of the home hero: one still
   photograph, the same two scrims, and nothing over it but the title */
.page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 344px;
  overflow: hidden;
  background: var(--night);
}

.page-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head::before,
.page-head::after {
  content: '';
  position: absolute;
  inset: 0;
}

.page-head::before {
  background: linear-gradient(180deg,
      rgba(20, 12, 9, .5) 0%,
      rgba(20, 12, 9, .22) 38%,
      rgba(20, 12, 9, .84) 100%);
}

.page-head::after {
  background: linear-gradient(90deg,
      rgba(18, 11, 8, .74) 0%,
      rgba(18, 11, 8, .38) 46%,
      transparent 88%);
}

.page-head .shell {
  position: relative;
  z-index: 2;
  padding-top: 84px;
  padding-bottom: 48px;
  color: #f6ece0;
}

.page-head .eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #d9bd7f;
}

.page-head h1 {
  max-width: 20ch;
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
}

.page-head h1 .lang.ml,
.page-head h1 .lang.hi { font-size: .8em; }

.page-head .lead {
  margin-top: 20px;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: #e4d5c3;
}

/* trail of small caps under the header, for pages reached from another page */
.crumbs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.crumbs .shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.crumbs i {
  font-size: 8px;
  color: var(--line-2);
}

.crumbs a:hover { color: var(--maroon); }

.crumbs .here {
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

/* ============================================================ 14 · prose = */
/* the long temple chronicles: one column, a reading measure, no cards */
.prose {
  max-width: 74ch;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

.prose p + p { margin-top: 22px; }

.prose .drop::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--serif);
  font-size: 62px;
  line-height: .78;
  font-weight: 600;
  color: var(--maroon);
}

/* the Malayalam continuation runs long — give it the full shell and two
   columns so the page does not become a ribbon of text */
.prose-long {
  max-width: none;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: 66px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* ========================================================== 15 · months == */
/* the festival year, one panel per Malayalam month */
.months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.months > li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 244px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)),
    var(--paper);
  box-shadow: 0 16px 36px rgba(36, 26, 21, .06);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.months > li::after {
  content: '';
  position: absolute;
  inset: auto 24px 0;
  height: 3px;
  background: var(--brass-lift);
  opacity: .42;
  transform: scaleX(.32);
  transform-origin: left;
  transition: transform .28s ease, opacity .28s ease;
}

.months > li:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 20px 46px rgba(36, 26, 21, .1);
}

.months > li:hover::after {
  opacity: .82;
  transform: scaleX(1);
}

.months .mon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 52px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.months .mon .ic-chip {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff8ed;
}

.months .mon h3 {
  font-size: 23px;
  line-height: 1.2;
}

.months .mon .zodiac {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the festival lists reuse .days, which on the home page is a two-column day
   row with a rule under each entry — none of that applies inside a panel */
.months .days {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.months .days li {
  position: relative;
  display: block;
  padding: 8px 0 8px 20px;
  border-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.months .days li:first-child { border-top: 0; }

.months .days li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-lift);
}

/* one festival carries the year — it gets the accent, nothing else does */
.months > li.major {
  grid-column: span 2;
  min-height: 244px;
  border-color: rgba(185, 139, 47, .45);
  background:
    linear-gradient(135deg, rgba(107, 18, 16, .08), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .7)),
    var(--paper);
}

.months > li.major .mon {
  align-items: center;
  border-bottom-color: rgba(185, 139, 47, .34);
}

.months > li.major .mon h3 { color: var(--maroon); }

.months > li.major .mon .ic-chip {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff8ed;
}

.months > li.major .days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px;
}

/* the dated list the office keeps, shown only when there is something in it */
.dated li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.dated li:first-child { border-top: 1px solid var(--line-2); }

.dated .on {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.dated h3 { font-size: 22px; }

.dated p {
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* ========================================================= 16 · gallery == */
/* photographs or films — two text tabs sitting on one hairline */
.gal-tabs {
  display: flex;
  gap: 34px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--line);
}

.gal-tabs button {
  padding: 0 0 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .25s ease, border-color .25s ease;
}

.gal-tabs button i {
  margin-right: 9px;
  color: var(--brass-lift);
}

.gal-tabs button.is-on {
  color: var(--maroon);
  border-bottom-color: var(--brass-lift);
}

.gal-tabs .lang.ml,
.gal-tabs .lang.hi {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.2em;
}

.films {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.films button {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ivory-2);
  overflow: hidden;
}

.films video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.92);
}

.films .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #fdf7ec;
  background: rgba(74, 12, 11, .3);
  transition: background .4s ease;
}

.films button:hover .play { background: rgba(74, 12, 11, .5); }

.films video,
.lbox video { background: #100a08; }

.lbox video {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
}

/* page numbers under the grid */
.pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.pager button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .25s ease, color .25s ease;
}

.pager button:hover { border-color: var(--brass-lift); }

.pager button.is-on {
  border-color: var(--brass-lift);
  color: var(--maroon);
  font-weight: 600;
}

.empty {
  padding: 46px 0;
  font-size: 15px;
  color: var(--ink-3);
}

/* ================================================== 17 · project detail == */
.pd {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 66px;
  align-items: start;
}

/* a <figure> carries browser margins of its own; the photograph has to sit on
   the edge of its grid column */
.pd-figure { margin: 0; }

.pd-figure img,
.pd-figure .no-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  filter: saturate(.92);
}

.pd-figure .no-img {
  display: grid;
  place-items: center;
  background: var(--ivory-2);
  color: var(--line-2);
  font-size: 34px;
}

.pd h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  max-width: 20ch;
}

.pd .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pd .meta .status { color: var(--brass); }

.pd .meta i {
  margin-right: 8px;
  color: var(--brass-lift);
}

/* funded share — a hairline that fills, not a rounded bar */
.pd .bar {
  height: 2px;
  margin-top: 20px;
  background: var(--ivory-2);
}

.pd .bar span {
  display: block;
  height: 100%;
  background: var(--brass-lift);
}

.pd .body {
  margin-top: 26px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

.pd .body p + p { margin-top: 18px; }

/* Project copy is pasted into the dashboard editor, which stores the old
   theme's font, size and brown inside inline styles on every span. Left alone,
   the body of each project reads 13px Poppins in a colour this system does not
   use — so the page's own type has to win here. Weight is deliberately not
   reset: the editor's bold is the author's emphasis. */
.pd .body [style] {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  background: none !important;
}

.pd-support {
  margin-top: 38px;
  padding: 28px 30px 30px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.pd-support h3 {
  font-size: 23px;
  margin-bottom: 8px;
}

.pd-support p {
  font-size: 14.5px;
  color: var(--ink-3);
  max-width: 52ch;
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* other projects — three cards, hairline only */
.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.pcards a {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color .3s ease;
}

.pcards a:hover { border-color: var(--brass-lift); }

.pcards img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  filter: saturate(.92);
}

.pcards .no-img {
  height: 180px;
  background: var(--ivory-2);
}

.pcards .body { padding: 20px 22px 24px; }

.pcards .status {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}

.pcards h4 {
  font-size: 20px;
  line-height: 1.25;
}

/* ====================================================== 18 · page extras = */
/* Some accounts on this site exist in one language only. Rather than leave an
   empty column when the reader switches, a note in the same measure stands in
   its place and points at where the material continues. */
.lang-note {
  max-width: 74ch;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

.lang-note b {
  font-weight: 600;
  color: var(--maroon);
}

.lang-note .tlink { margin-top: 28px; }

/* the quick bar again, used mid-page on the inner pages — on the home page the
   header above supplies its top edge, here it has to draw its own */
.quickbar--framed { border: 1px solid var(--line); }

/* the fact rows also serve as the readout under an editorial column, where the
   values are sentences rather than the short numerals .stats is cut for */
.ed-body + .facts { margin-top: 42px; }

/* The gallery pages a long grid and swaps the lightbox between a photograph and
   a film, both by toggling [hidden]. Every one of these elements is given a
   display by its own component rule, which outranks the browser default for
   [hidden] — so the intent has to be stated here. */
.frames a[hidden],
.films button[hidden],
.lbox img[hidden],
.lbox video[hidden],
.lbox button[hidden] { display: none; }

/* ======================================================== responsiveness == */
@media (max-width: 1120px) {
  :root { --section-y: 84px; }

  .utsavam { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }

  .editorial { gap: 48px; }

  .ed-figure img { height: 460px; }

  .nav { gap: 24px; }

  .brand-sub { display: none; }

  .months { gap: 20px; }

  .prose-long { column-gap: 48px; }

  .pd { gap: 46px; }

  .pcards { gap: 26px; }
}

/* below this a half-width column can no longer hold two time ranges side by
   side — stack morning over evening instead, which also keeps the two halves
   from leaving a void beside each other */
@media (max-width: 1080px) {
  #timings .section-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #timings .section-head::after { max-width: 360px; }

  .timings-grid { grid-template-columns: minmax(0, 1fr); }

  .timings-col {
    min-height: 0;
    padding: 30px;
  }

  .timings-col + .timings-col {
    padding-left: 30px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 940px) {
  .nav,
  .head-cta .tlink { display: none; }

  .burger { display: grid; }

  .editorial,
  .utsavam,
  .visit { grid-template-columns: 1fr; }

  .editorial { gap: 44px; }

  .ed-figure img { height: 380px; }

  .utsavam { gap: 44px; }

  .cal { max-width: 460px; }

  .quickbar ul { grid-template-columns: repeat(2, 1fr); }

  .quickbar li:nth-child(3) { border-left: 0; }

  .quickbar li:nth-child(n+3) { border-top: 1px solid var(--line); }

  .rules { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }

  .frames { grid-template-columns: repeat(3, 1fr); }

  .foot-top { grid-template-columns: 1fr 1fr; gap: 44px; }

  .foot-top > div:first-child { grid-column: 1 / -1; }

  .page-head { min-height: 300px; }

  .months { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .months > li.major { grid-column: span 2; }

  .prose-long { columns: 1; }

  .films { grid-template-columns: repeat(2, 1fr); }

  .pd { grid-template-columns: 1fr; gap: 42px; }

  .pd-figure img,
  .pd-figure .no-img { height: 400px; }

  .pcards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --gut: 20px; --section-y: 64px; }

  .topbar .estd { display: none; }

  .site-head .shell-wide { min-height: 66px; }

  .brand-mark { font-size: 22px; }

  .hero { min-height: min(74vh, 560px); }

  .hero-body { padding-bottom: 54px; }

  .hero-lead { font-size: 15.5px; }

  .hero-dots { bottom: 22px; left: var(--gut); right: auto; }

  .days li { grid-template-columns: 1fr; gap: 6px; }

  .days .when { padding-top: 0; }

  .projects li {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .projects img,
  .projects .no-img { width: 100%; height: 210px; }

  .rules { grid-template-columns: 1fr; }

  .frames { grid-template-columns: repeat(2, 1fr); }

  .frames a.tall { grid-row: auto; }

  .frames a.tall::before { padding-top: 78%; }

  .head-rule { gap: 16px; }

  .head-rule h2 { white-space: normal; }

  .section-head { margin-bottom: 38px; }

  .foot-top {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 56px 0 44px;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .lbox { padding: 20px; }

  .lbox .p { left: 8px; }
  .lbox .n { right: 8px; }
  .lbox .x { top: 12px; right: 12px; }

  .page-head { min-height: 250px; }

  .page-head .shell { padding-top: 58px; padding-bottom: 34px; }

  .crumbs .here { max-width: 22ch; }

  .months { grid-template-columns: 1fr; gap: 18px; }

  .months > li {
    min-height: 0;
    padding: 22px;
  }

  .months > li.major { grid-column: auto; }

  .months > li.major .days { grid-template-columns: 1fr; }

  .dated li { grid-template-columns: 1fr; gap: 6px; }

  .dated .on { padding-top: 0; }

  .gal-tabs { gap: 22px; }

  .films { grid-template-columns: 1fr; }

  .pd-figure img,
  .pd-figure .no-img { height: 300px; }

  .pd-support { padding: 24px 22px 26px; }

  .pcards { grid-template-columns: 1fr; gap: 22px; }
}

/* phones: one time range per line is all that fits */
@media (max-width: 520px) {
  .timings-col {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 22px;
  }

  .timings-col + .timings-col { padding-left: 22px; }

  .slot-group + .slot-group { margin-top: 26px; }

  .slot {
    grid-template-columns: max-content 16px max-content minmax(36px, 1fr);
    gap: 8px;
  }

  .slot .from,
  .slot .to { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-frames img { transition: opacity .01s linear; transform: none; }

  * { animation-duration: .01ms !important; }
}