/* ──────────────────────────────────────────────────────────────
   Videos — Rideekanda Forest Monastery
   Family design: Cormorant Garamond display + Spectral body,
   paper / night palette, reveal-on-scroll. Watch in-page.
   ────────────────────────────────────────────────────────────── */
:root {
  --bg:#f4efe6; --bg-2:#ece3d4; --card:#fbf7ef;
  --ink:#2b2620; --ink-soft:#5d5446; --muted:#8d8170;
  --line:rgba(43,38,32,0.14); --accent:#a3763c; --accent-soft:#c79a5c;
  --dark-bg:#221d17; --dark-ink:#ece3d4; --dark-muted:#b6a890;
  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --maxw:1180px; --reveal-y:26px; --reveal-dur:1100ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bg:#1f1a14; --bg-2:#16120d; --card:#2a241c; --ink:#f3ecdb; --ink-soft:#d8ccb4; --muted:#9d8d72; --line:rgba(255,235,200,0.12); --accent:#c79a5c; --accent-soft:#e0b76a; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#1f1a14; color-scheme:light dark; }
@media (prefers-color-scheme: light) { html { background:#f4efe6; } }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(24px,6vw,88px); }

.eyebrow { font-family:var(--font-body); font-size:0.74rem; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:0.85em; margin:0 0 1.4rem; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--accent); opacity:0.7; }

.reveal { opacity:0; transform:translateY(var(--reveal-y)); transition:opacity var(--reveal-dur) cubic-bezier(.2,.65,.25,1), transform var(--reveal-dur) cubic-bezier(.2,.65,.25,1); transition-delay:var(--reveal-delay,0ms); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* Hero */
.hero { position:relative; min-height:60svh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:140px 24px 90px; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-veil { position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 18%, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, var(--bg) 100%), linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)); }
.hero-inner { position:relative; z-index:2; max-width:900px; }
.hero .lotus-mark { height:56px; width:auto; margin:0 auto 2rem; opacity:0.95; filter:none; }
:root[data-theme="dark"] .hero .lotus-mark { filter:brightness(0) invert(1); }   /* white lotus in dark theme */
.hero h1 { font-family:var(--font-display); font-size:clamp(3rem,8vw,6rem); font-weight:300; letter-spacing:-0.015em; line-height:0.98; margin:0; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero .tagline { font-size:clamp(0.78rem,1.4vw,0.95rem); letter-spacing:0.42em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.8rem; }
.hero .place { margin-top:1.4rem; font-size:1.1rem; color:var(--ink-soft); font-style:italic; }

.section { padding:clamp(56px,8vw,110px) 0; position:relative; }
.section-head { max-width:760px; margin-bottom:clamp(36px,5vw,60px); }
.section-title { font-family:var(--font-display); font-size:clamp(2.1rem,4vw,3.2rem); letter-spacing:-0.01em; line-height:1.05; margin:0; }

/* Featured player */
.feature { background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.feature .player { position:relative; aspect-ratio:16/9; background:#000; }
.feature .player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.feature .feature-body { padding:clamp(22px,3vw,36px) clamp(24px,4vw,44px) clamp(28px,4vw,40px); }
.feature .date { font-family:var(--font-body); font-size:0.8rem; letter-spacing:0.06em; color:var(--muted); }
.feature h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; margin:0.5rem 0 0.8rem; }
.feature p { color:var(--ink-soft); margin:0; max-width:70ch; }

/* Grid of video thumbnails */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); }
@media (max-width:900px) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid { grid-template-columns:1fr; } }
.vcard { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.vcard:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 22px 48px -28px rgba(43,38,32,0.5); }
.vthumb { position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden; }
.vthumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.vcard:hover .vthumb img { transform:scale(1.05); }
.vthumb .play { position:absolute; inset:0; display:grid; place-items:center; }
.vthumb .play span { width:58px; height:58px; border-radius:50%; background:rgba(31,26,20,.55); display:grid; place-items:center; backdrop-filter:blur(2px); transition:background .25s ease, transform .25s ease; }
.vthumb .play span::after { content:""; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:3px; }
.vcard:hover .vthumb .play span { background:var(--accent); transform:scale(1.06); }
.vbody { padding:16px 18px 20px; display:flex; flex-direction:column; gap:0.5rem; }
.vbody .date { font-family:var(--font-body); font-size:0.76rem; letter-spacing:0.05em; color:var(--muted); }
.vbody h3 { font-family:var(--font-display); font-weight:500; font-size:1.35rem; line-height:1.16; margin:0; }

.more-row { margin-top:clamp(40px,5vw,64px); text-align:center; }
.btn { display:inline-flex; align-items:center; gap:9px; padding:13px 26px; background:var(--accent); color:#f7f1e6; border-radius:999px; text-decoration:none; font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; transition:filter .2s ease, transform .2s ease; }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Player modal */
.vm { position:fixed; inset:0; z-index:99600; background:rgba(31,26,20,.9); backdrop-filter:blur(8px); display:grid; place-items:center; padding:24px; }
.vm.hidden { display:none; }
.vm-panel { width:min(1000px,96vw); }
.vm-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.vm-title { font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.6rem); color:#f7f1e6; line-height:1.2; }
.vm-close { flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid rgba(247,241,230,.3); background:rgba(247,241,230,.08); color:#f7f1e6; font-size:22px; line-height:1; cursor:pointer; }
.vm-close:hover { background:rgba(247,241,230,.18); }
.vm-frame-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.55); }
.vm-frame-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Footer */
.footer { background:var(--dark-bg); color:var(--dark-ink); padding:clamp(56px,7vw,96px) 0 40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,5vw,72px); }
@media (max-width:760px) { .footer-grid { grid-template-columns:1fr; gap:36px; } }
.footer .fbrand { display:flex; align-items:center; gap:12px; margin-bottom:1.2rem; }
.footer .fbrand img { height:30px; width:auto; }
.footer .fbrand .name { font-family:var(--font-display); font-size:1.32rem; }
.footer .fbrand .sub { display:block; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dark-muted); }
.footer .fblurb { color:var(--dark-muted); max-width:36ch; font-size:0.98rem; }
.footer h4 { font-family:var(--font-body); font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 1.1rem; }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.footer ul a, .footer ul li { color:var(--dark-muted); font-size:0.95rem; text-decoration:none; transition:color .25s ease; }
.footer ul a:hover { color:var(--dark-ink); }
.footer-base { margin-top:clamp(40px,6vw,72px); padding-top:24px; border-top:1px solid rgba(255,235,200,0.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:var(--dark-muted); }