/* Traditional — ceremonial, symmetric, marigold & kumkum. */
.t-traditional { --radius: 10px; }
.t-traditional .s-title { font-weight: 400; }
.t-traditional .eyebrow { color: var(--ink-accent); letter-spacing: .26em; }
.t-traditional .display, .t-traditional .s-title, .t-traditional .h3 { color: var(--heading); }

/* ornaments */
.tor-str { stroke: var(--deep); }
.tor-leaf { fill: #5f6b3a; opacity: .9; }
.tor-vein { stroke: #eef0d8; opacity: .5; }
.tor-flower { fill: #d9922e; }
.tor-flower-c { fill: var(--accent); }
.tor-bead { fill: var(--deep); }
.tr-toran { position: absolute; inset: 0 0 auto 0; height: 64px; z-index: 2; }
.tr-toran svg { width: 100%; }
.tr-diya { width: 44px; height: 36px; color: var(--heading); }
.tr-diya__bowl { fill: var(--accent); }
.tr-diya__flame { fill: #e7a23a; transform-origin: 24px 21px; animation: tr-flicker 2.6s ease-in-out infinite; }
@keyframes tr-flicker { 0%, 100% { transform: scale(1) rotate(0); } 40% { transform: scale(1.06, .96) rotate(-2deg); } 70% { transform: scale(.96, 1.05) rotate(2deg); } }
.tr-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem auto 2rem; max-width: 22rem; }
.tr-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent)); }
.tr-divider span:last-child { transform: scaleX(-1); }
.tr-invocation { font-family: 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', var(--font-display); font-size: 1rem; letter-spacing: .08em; color: var(--heading); }
/* Lord Ganesha above the invocation to him, as an invitation opens: the design's own painting, in its saffron and gold */
.tr-ganesha { display: block; width: clamp(72px, 7.5vw, 112px); height: auto; margin: 0 auto .6rem; filter: drop-shadow(0 6px 10px color-mix(in srgb, #b3541e 22%, transparent)); }

/* nav */
.t-traditional .site-nav__mark { background: var(--deep); color: var(--deep-ink); border-color: var(--accent); }
.t-traditional .site-menu__mono { font-style: italic; }

/* hero */
.tr-hero { padding-block: 7rem 4rem; text-align: center; background:
  radial-gradient(60rem 30rem at 50% 45%, color-mix(in srgb, #d9922e 14%, transparent), transparent 70%), var(--bg); overflow: hidden; }
.tr-hero__inner { position: relative; }
.tr-hero__sub { margin-top: 1rem; }
.tr-hero__grid { display: grid; gap: 1.75rem; margin-top: 1.5rem; justify-items: center; }
.tr-names { display: grid; gap: .25rem; font-family: var(--font-display); font-weight: 400; color: var(--heading); font-size: clamp(2.6rem, 11vw, 5.25rem); line-height: 1.05; }
.tr-weds { display: grid; place-items: center; margin: .35rem 0; }
.tr-portrait { position: relative; width: min(78vw, 22rem); aspect-ratio: 1; display: grid; place-items: center; }
.tr-mandala { position: absolute; inset: -9%; width: 118%; height: 118%; color: var(--accent); opacity: .55; animation: tr-spin 90s linear infinite; }
@keyframes tr-spin { to { rotate: 360deg; } }
.tr-arch { position: relative; width: 66%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 12px 12px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent), 0 30px 60px -30px rgba(60, 20, 20, .45); }
.tr-arch img { width: 100%; height: 100%; object-fit: cover; }
.tr-hero__line { margin-top: 2.25rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 2.8vw, 1.35rem); color: var(--muted); }
.tr-date { margin: 1.5rem auto 0; display: inline-grid; grid-auto-flow: row; gap: .35rem; padding: 1rem 2rem; border-block: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.tr-date__main { font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 1.8rem); color: var(--heading); }
.tr-date__side { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
@media (min-width: 56rem) {
  .tr-hero { min-height: 100svh; padding-block: 8rem 5rem; }
  .tr-hero__grid { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3rem; }
  .tr-names { display: contents; }
  .tr-name--a { grid-column: 1; grid-row: 1; text-align: right; }
  .tr-name--b { grid-column: 3; grid-row: 1; text-align: left; }
  .tr-weds { display: none; }
  .tr-portrait { grid-column: 2; grid-row: 1; width: 25rem; }
  .tr-date { grid-auto-flow: column; align-items: center; gap: 1.75rem; }
}

/* maroon bands with scalloped edges */
.t-traditional .s--welcome, .t-traditional .s--countdown, .tr-footer { background: var(--deep); color: var(--deep-ink); }
.t-traditional .s--welcome .eyebrow, .t-traditional .s--countdown .eyebrow { color: color-mix(in srgb, #e7a23a 80%, var(--deep-ink)); }
.t-traditional .s--welcome .s-title, .t-traditional .s--countdown .s-title { color: var(--deep-ink); }
.t-traditional .s--welcome .tr-diya, .t-traditional .s--countdown .tr-diya, .tr-footer .tr-diya { color: var(--deep-ink); }
.t-traditional .s--welcome::before, .t-traditional .s--welcome::after,
.t-traditional .s--countdown::before, .t-traditional .s--countdown::after {
  content: ''; position: absolute; left: 0; right: 0; height: 12px;
  background: radial-gradient(circle at 12px 0, var(--bg) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x;
}
.t-traditional .s--welcome::before, .t-traditional .s--countdown::before { top: 0; }
.t-traditional .s--welcome::after, .t-traditional .s--countdown::after { bottom: 0; transform: scaleY(-1); }
.t-traditional.is-preview .s--welcome::after, .t-traditional.is-preview .s--countdown::after { box-shadow: none; }
.t-traditional .welcome__text { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 3.2vw, 1.55rem); line-height: 1.7; }
.t-traditional .welcome__sign { margin-top: 2rem; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.t-traditional .welcome__sign .amp { text-transform: none; }

/* events: day-by-day programme with arch cards */
.tr-day + .tr-day { margin-top: clamp(3rem, 8vw, 5rem); }
.tr-day__label { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 2rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 3.5vw, 1.6rem); color: var(--heading); text-align: center; }
.tr-day__label small { display: block; font-family: var(--font-body); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .2rem; }
.tr-day__rule { flex: 1; max-width: 8rem; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.tr-day__grid { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .tr-day__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tr-day__grid { grid-template-columns: repeat(3, 1fr); } }
.tr-event { background: var(--surface); border: 1px solid var(--line); border-radius: 999px 999px var(--radius) var(--radius); padding: 1rem 1rem 1.5rem; text-align: center; transition: transform .35s var(--ease), box-shadow .35s; }
.tr-event:not(:has(.tr-event__arch)) { border-radius: 160px 160px var(--radius) var(--radius); padding-top: 3.25rem; }
.tr-event:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(90, 30, 30, .45); }
.tr-event__arch { aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 999px 999px 6px 6px; }
.tr-event__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tr-event:hover .tr-event__arch img { transform: scale(1.05); }
.tr-event__body { padding: 1.25rem .5rem 0; display: grid; gap: .45rem; }
.tr-event__time { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tr-event__name { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; color: var(--heading); }
.t-traditional .event__where { font-size: .9375rem; color: var(--ink); }

/* story / venue / gallery */
.t-traditional .story-photo, .t-traditional .venue__img { border-radius: 999px 999px 12px 12px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 45%, transparent); }
.t-traditional .s--story, .t-traditional .s--family { background: var(--soft); }
.t-traditional .gallery__item { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.t-traditional .gallery__item img { outline: 5px solid var(--surface); outline-offset: -5px; }
.t-traditional .milestone::before { background: #d9922e; }

/* countdown */
.t-traditional .countdown__unit { width: 5.25rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--deep-ink) 30%, transparent); place-content: center; }
.t-traditional .countdown__num { font-size: clamp(1.8rem, 6vw, 2.4rem); }
.t-traditional .countdown__label { color: color-mix(in srgb, var(--deep-ink) 70%, transparent); margin-top: .25rem; font-size: .6rem; }
@media (min-width: 40rem) { .t-traditional .countdown__unit { width: 7rem; } }

/* family */
.t-traditional .family__names { color: var(--heading); }

/* rsvp */
.t-traditional .rsvp { border-top: 3px solid var(--accent); }

/* footer */
.tr-footer { position: relative; padding-top: 7rem; }
.tr-toran--footer { top: 0; }
.tr-footer .tr-invocation { color: color-mix(in srgb, var(--deep-ink) 80%, transparent); margin-bottom: 1rem; }
.tr-footer .site-footer__names { color: var(--deep-ink); }
.tr-footer__msg { color: color-mix(in srgb, var(--deep-ink) 85%, transparent); font-family: var(--font-display); font-style: italic; }
.tr-footer__date { margin-top: .75rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.tr-footer .eyebrow { color: #e7a23a; }

/* ---------- events, scroll-stacked (themes/event-stack.js) ----------
   Only while the stack runs (.is-evstack): each event becomes one card of this design,
   laid over the last by the scroll. Without it the layout above is untouched. */
.is-evstack .tr-days { max-width: 26rem; margin-inline: auto; }
.is-evstack .tr-day, .is-evstack .tr-day__grid { display: contents; }
.is-evstack .tr-day__label { display: none; }
.is-evstack .tr-event { box-shadow: 0 28px 54px -34px rgba(90, 30, 30, .5); }
.tr-event__day { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (max-width: 47.99rem) {
  .is-evstack .tr-event__arch { aspect-ratio: 4 / 2.6; }
}