@import url("../shared/infikre-base.css");

:root {
  --paper: #080a0d;
  --surface: #151b21;
  --ink: #eee8dc;
  --muted: #9b9da0;
  --line: rgba(238,232,220,.2);
  --accent: #bf9157;
  --opening-bg: #07090c;
  --opening-ink: #eee8dc;
  --font-display: "Noto Serif Tamil", Latha, Georgia, "Times New Roman", serif;
}
body { background: var(--paper); color: var(--ink); }
.opening-screen { background: #07090c; }
.film-label { margin: 0; color: var(--accent); font-size: .64rem; font-weight: 850; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
.cinema-opening .opening-inner { text-align: left; }
.cinema-opening .opening-names { justify-content: flex-start; margin-top: 34px; }
.cinema-opening .opening-names b { color: var(--accent); font-weight: 400; }
.cinema-opening .opening-inner h1 { max-width: 640px; margin: 26px 0 30px; }
.cinema-opening .opening-note { color: var(--muted); }
.cinema-opening .open-invitation { border-radius: 0; color: var(--ink); }
.cinema-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; padding: 120px 0 75px; }
.cinema-hero .hero-background { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.14); }
.cinema-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 0, rgba(0,0,0,.12) 35%, rgba(0,0,0,.88) 100%), linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.82) 90%); }
.cinema-hero .topbar { color: var(--ink); }
.cinema-hero-content { position: relative; z-index: 1; width: min(var(--content-width), calc(100% - 36px)); }
.cinema-hero-content h1 { display: grid; margin: 18px 0 25px; font: 400 clamp(4.6rem, 19vw, 13rem)/.73 var(--font-display); letter-spacing: -.11em; }
.cinema-hero-content h1 i { margin-left: .15em; color: var(--accent); font: 400 .46em/1 Georgia, serif; }
.cinema-hero-content > p:not(.film-label) { max-width: 480px; color: #d3d0c8; font: 400 1rem/1.6 var(--font-display); }
.cinema-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; color: var(--accent); font-size: .67rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.scroll-line { position: absolute; right: 24px; bottom: 26px; width: 1px; height: 68px; background: linear-gradient(var(--accent), transparent); }
.cinema-date { background: #101419; }
.cinema-date .countdown-block { display: grid; gap: 30px; }
.cinema-date .section-heading p:last-child, .cinema-date .countdown-label { color: var(--muted); }
.cinema-date .countdown-cell { border-color: rgba(191,145,87,.38); background: rgba(191,145,87,.04); }
.cinema-story { background: #080a0d; }
.cinema-heading { max-width: 720px; margin-bottom: 42px; }
.cinema-heading h2 { margin: 18px 0 0; font: 400 clamp(3rem, 12vw, 8rem)/.8 var(--font-display); letter-spacing: -.09em; }
.cinema-heading > p:last-child { max-width: 510px; margin: 22px 0 0; color: var(--muted); font: 400 1rem/1.65 var(--font-display); }
.cinema-couple { display: grid; gap: 28px; }
.cinema-profile { position: relative; }
.cinema-photo { position: relative; overflow: hidden; aspect-ratio: 1.18; }
.cinema-photo img { height: 100%; object-fit: cover; filter: grayscale(.38) contrast(1.16); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.cinema-profile:hover .cinema-photo img { transform: scale(1.05); }
.cinema-photo span { position: absolute; top: 14px; left: 14px; color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .15em; }
.cinema-profile h3 { margin: 17px 0 0; font: 400 3.3rem/.86 var(--font-display); letter-spacing: -.08em; }
.cinema-profile p:last-child { max-width: 280px; margin: 11px 0 0; color: var(--muted); font: 400 .9rem/1.55 var(--font-display); }
.cinema-story .couple-note { margin-left: 0; color: var(--muted); text-align: left; }
.cinema-events { background: #101419; }
.cinema-events .event-card { border-color: rgba(238,232,220,.18); background: #151b21; }
.cinema-events .event-index { color: var(--accent); }
.cinema-events .event-card h3 { color: var(--ink); }
.cinema-events .event-meta, .cinema-events .event-description { color: var(--muted); }
.cinema-events .event-meta strong { color: var(--ink); }
.cinema-gallery-section { background: #080a0d; }
.cinema-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.cinema-gallery .gallery-item { min-height: 190px; }
.cinema-gallery .gallery-item.is-featured { grid-column: span 2; min-height: 320px; }
.cinema-gallery .gallery-item img { min-height: inherit; filter: saturate(.78) contrast(1.1); }
.cinema-gallery .gallery-item figcaption { color: #eee8dc; font-size: .7rem; }
.cinema-venue { background: #101419; }
.cinema-venue-panel { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 30px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.venue-stamp { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .1em; line-height: 1.15; text-align: center; }
.cinema-venue-panel h2 { margin: 18px 0 22px; font: 400 clamp(2.8rem, 10vw, 7rem)/.84 var(--font-display); letter-spacing: -.09em; }
.cinema-venue-panel .venue-name { margin: 0; color: var(--accent); font: 400 1.25rem/1.2 var(--font-display); }
.cinema-venue-panel .venue-address { color: var(--muted); }
.cinema-venue-panel .map-button { margin-top: 22px; }
.cinema-family { background: #080a0d; }
.cinema-family .family-card { border-color: rgba(238,232,220,.2); background: #151b21; }
.cinema-family .family-card h3 { color: var(--ink); }
.cinema-family .family-card p, .cinema-family .family-card li { color: var(--muted); }
.cinema-rsvp { background: #101419; }
.cinema-rsvp .rsvp-button { border-radius: 0; background: var(--accent); color: #080a0d; }
.cinema-final { min-height: 92vh; background: linear-gradient(180deg, #101419, #030405); }
.cinema-final h2 { max-width: 820px; }
.cinema-final p { color: var(--muted); }

@media (min-width: 650px) {
  .cinema-hero-content { width: min(var(--content-width), calc(100% - 72px)); }
  .cinema-date .countdown-block { grid-template-columns: .85fr 1.15fr; align-items: end; }
  .cinema-couple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cinema-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cinema-gallery .gallery-item.is-featured { grid-column: span 2; grid-row: span 2; min-height: 520px; }
  .cinema-gallery .gallery-item { min-height: 250px; }
  .cinema-venue-panel { grid-template-columns: 90px 1fr; gap: 30px; padding-block: 54px; }
  .venue-stamp { width: 88px; height: 88px; }
}