/* ==============================================================
   Rājaśyāmā — Margam Intensive page
   "Recital programme" style: stage-night maroon, antique gold,
   ivory programme paper. Loaded after site.css on this page only.
   ============================================================== */

body.page-margam {
  background: #2E0710;
  color: #F5EEE1;
  font-family: Hind, Mukta, "Noto Sans", system-ui, sans-serif;
}

/* Small uppercase labels */
.lbl { font-family: Hind, Mukta, sans-serif; text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; font-weight: 600; }

/* Stage light: warm spot falling from the top-left */
.stage-light { background: radial-gradient(60% 70% at 18% 0%, rgba(196,154,69,.22), transparent 70%), radial-gradient(40% 50% at 85% 100%, rgba(94,16,32,.55), transparent 70%); }

/* Fine gold hairline with a centred lozenge, used between blocks */
.gilt-rule { display: flex; align-items: center; gap: 12px; color: #C49A45; }
.gilt-rule::before, .gilt-rule::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .55; }

/* Drop cap for the opening paragraph */
.dropcap::first-letter { font-family: "Bodoni Moda", Didot, Georgia, serif; float: left; font-size: 4.6em; line-height: .8; padding: .08em .12em 0 0; color: #5E1020; font-style: italic; }

/* Programme sheet: dotted separators like a printed recital programme */
.prog-item + .prog-item { border-top: 1px dotted rgba(27,17,20,.28); }

/* Admission ticket */
.ticket { position: relative; background: #F5EEE1; color: #1B1114; border-radius: 20px; }
.ticket-stub { position: relative; border-top: 2px dashed rgba(94,16,32,.35); }
.ticket-stub::before, .ticket-stub::after {
  content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: #2E0710;
}
.ticket-stub::before { left: -14px; }
.ticket-stub::after { right: -14px; }
@media (min-width: 1024px) {
  .ticket-stub { border-top: 0; border-left: 2px dashed rgba(94,16,32,.35); }
  .ticket-stub::before, .ticket-stub::after { left: -15px; right: auto; }
  .ticket-stub::before { top: -14px; }
  .ticket-stub::after { top: auto; bottom: -14px; }
}

/* Offset gold frame behind a portrait */
.offset-frame { position: relative; }
.offset-frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid #C49A45; border-radius: 4px; z-index: 0; }
.offset-frame > * { position: relative; z-index: 1; }

/* Horizontal testimonial rail */
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #C49A45 transparent; }
.rail > * { scroll-snap-align: start; flex-shrink: 0; }

/* FAQ rows (no cards) */
.faq-row summary { list-style: none; cursor: pointer; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row .chev { transition: transform .3s ease; }
.faq-row[open] .chev { transform: rotate(180deg); }

/* Entrance for hero title */
.curtain { animation: curtain 1.1s cubic-bezier(.2,.7,.2,1) both; }
.curtain-2 { animation-delay: .15s; } .curtain-3 { animation-delay: .3s; }
@keyframes curtain { from { transform: translateY(18px); opacity: .01; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .curtain { animation: none !important; } }

/* Keep focus visible on dark grounds */
body.page-margam a:focus-visible, body.page-margam button:focus-visible, body.page-margam summary:focus-visible { outline: 3px solid #C49A45; outline-offset: 3px; }

/* ---------- Registration form (Margam style) ---------- */
.mfield { width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid rgba(27,17,20,.28); border-radius: 0; padding: .7rem 0 .75rem; font-family: Hind, Mukta, sans-serif; font-size: 1.15rem; color: #1B1114; transition: border-color .2s, box-shadow .2s; }
.mfield::placeholder { color: rgba(27,17,20,.38); }
.mfield:focus { outline: none; border-bottom-color: #5E1020; box-shadow: 0 1.5px 0 0 #5E1020; }
.mfield[aria-invalid="true"] { border-bottom-color: #B3261E; box-shadow: 0 1.5px 0 0 #B3261E; }
select.mfield { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E1020' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .25rem center; padding-right: 2rem; }
.mcheck { appearance: none; width: 1.3rem; height: 1.3rem; border: 1.5px solid #5E1020; border-radius: 2px; flex-shrink: 0; margin-top: .15rem; display: grid; place-content: center; cursor: pointer; background: transparent; }
.mcheck::before { content: ""; width: .7rem; height: .7rem; transform: scale(0); transition: transform .15s ease; background: #5E1020; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.mcheck:checked::before { transform: scale(1); }
.mcheck:focus-visible { outline: 3px solid #C49A45; outline-offset: 2px; }
.mcheck[aria-invalid="true"] { border-color: #B3261E; }
.merr { color: #B3261E; }

/* Confirmation stamp */
.stamp { border: 2px solid currentColor; border-radius: 4px; padding: .35rem .8rem; transform: rotate(-6deg); display: inline-block; }