@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@font-face {
    font-family: 'Tw Cen MT';
    font-style: normal;
    font-weight: normal;
    src: local('Tw Cen MT'), url('Tw Cen MT.woff') format('woff');
    }
/* ========== Global theme ========== */
:root{
  --c-blue:#2e5bc5;        /* Chaaya primary */
  --c-blue-900:#1f3f8f;
  --c-ink:#0e0e11;
  --c-accent:#25d366;
  --c-bg:#fff6da;
  --c-card:#ffffff;
  --c-muted:#6b7280;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:'Tw Cen MT' !important; color:var(--c-ink);background:var(--c-bg) !important;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}


/* never hug screen edges */
.container{width:min(1120px,92vw);margin-inline:auto; padding-inline:16px}

/* ========== Header / Navbar ========== */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:80px;width:auto}
.brand .title{font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-menu{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-menu a.link{padding:8px 10px;border-radius:10px;font-weight:600;color:#334155}
.nav-menu a.link:hover{background:#f1f5ff;color:var(--c-blue)}
.nav-menu a.btn{padding:.55rem .95rem;border-radius:999px;border:2px solid var(--c-blue);color:#fff;background:var(--c-blue);font-weight:700;margin-left:4px}
.nav-menu a.btn:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}

.nav-toggle{display:none;font-size:1.8rem;background:none;border:none;cursor:pointer;line-height:1;padding:6px 10px;border-radius:8px}
.nav-toggle:focus-visible{outline:3px solid #bfdbfe}

/* ========== Buttons / Utilities ========== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.15rem;border-radius:14px;background:var(--c-blue);color:#fff;font-weight:700;box-shadow:var(--shadow);border:0;cursor:pointer}
.btn.secondary{background:#fff;color:var(--c-blue);border:2px solid var(--c-blue)}
.pill{display:inline-block;padding:.35rem .7rem;border-radius:999px;border:1px dashed #c7d2fe;color:#3b82f6;background:#eef2ff}
.muted{color:var(--c-muted)}
.center{text-align:center}

/* ========== Hero (index) ========== */
.hero{
  padding:64px 0;
  background:
    radial-gradient(1000px 600px at 20% 0%, #e8eefc, transparent 60%),
    radial-gradient(1000px 600px at 80% 20%, #eaf5ff, transparent 60%);
  overflow:hidden; /* prevent bleed */
}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-areas:"copy art";gap:32px;align-items:center}
.hero-copy{grid-area:copy}
.hero-art{grid-area:art; display:flex; justify-content:center; align-items:center}
.hero-art img{width:100%; height:auto; max-width:560px; display:block}
.display{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:.25rem 0 1rem}
.sub{color:var(--c-muted);font-size:1.05rem}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.clock{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.unit{background:var(--c-card);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);min-width:76px;text-align:center}
.unit .num{font-size:1.4rem;font-weight:800;color:var(--c-blue)}
.unit .lab{font-size:.75rem;color:var(--c-muted)}

.hero-copy h3 {
    font-family: "Parisienne", cursive !important;
    font-weight: 400;
    font-style: normal;
}

/* ========== Sections ========== */
section{padding:64px 0}
section h2{font-size:clamp(22px,2.6vw,34px);margin:0 0 18px}
section p.lead{color:var(--c-muted);max-width:72ch}

/* ========== Cards / Grid ========== */
.grid{display:grid;gap:18px}
.card{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .content{padding:14px 16px}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:var(--c-blue-900);font-size:.75rem;font-weight:700}
.name{font-weight:800;margin:.35rem 0 .15rem}

/* === FORCE 5-UP SPEAKERS ON DESKTOP === */
#speakers .container .grid.speakers{
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* sensible fallbacks */
@media (max-width: 1024px){
  #speakers .container .grid.speakers{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px){
  #speakers .container .grid.speakers{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 520px){
  #speakers .container .grid.speakers{
    grid-template-columns: 1fr !important;
  }
}

/* keep portraits consistent */
#speakers .grid.speakers .card img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display:block;
  background:#f3f4f6;
  border-bottom:1px solid #eef2f7;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* text handling for narrow screens */
.name{
  font-weight:800;
  margin:.35rem 0 .15rem;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  line-height: 1.15;
  word-wrap: break-word;
}

/* ========== Live embeds (index) ========== */
.live-grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width: 900px){ .live-grid{grid-template-columns:1fr 1fr;} }
.live-card{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.live-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px}
.live-title{font-weight:800}
.badge-live{background:#ef4444;color:#fff;font-weight:800;padding:2px 10px;border-radius:999px;font-size:.75rem;letter-spacing:.4px}
.live-media{aspect-ratio:16/9;background:#000}
.live-media iframe{width:100%;height:100%;border:0;display:block;border-radius:0}

/* ========== Schedule (index) ========== */
.schedule{border:1px solid #e5e7eb;border-radius:var(--radius);overflow:hidden}
.slot{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px;border-bottom:1px solid #eef2f7;background:#fff}
.slot:last-child{border-bottom:none}
.time{font-weight:800;color:var(--c-blue)}
.slot h3{margin:.1rem 0;font-size:1.05rem}
.slot p{margin:.25rem 0;color:var(--c-muted)}

/* ========== Contact & Footer (index & register) ========== */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.contact .map{min-height:300px;border:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.info{display:grid;gap:12px}
.info a{font-weight:700}
footer{padding:32px 0;border-top:1px solid #e5e7eb;color:#6b7280}

/* ========== Page hero (register) ========== */
.page-hero{padding:42px 0;background:
  radial-gradient(900px 520px at 18% 0%, #e9f0ff, transparent 60%),
  radial-gradient(900px 520px at 80% 12%, #eaf5ff, transparent 60%)}
.kicker{color:var(--c-blue);font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:.8rem}

/* ========== Register layout & form ========== */
.grid-2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
  grid-template-areas:"aside form"; /* desktop: info left, form right */
}
.grid-2 .panel{ grid-area: aside; }
.grid-2 form.card{ grid-area: form; }

.panel{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.panel ul{margin:10px 0 0 18px;color:#374151}
.panel li{margin:.45rem 0}

form.card{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.form-grid{display:grid;gap:16px}
label{font-weight:700;display:block;margin-bottom:6px}
input[type="text"],input[type="email"],input[type="tel"],select{
  width:100%;padding:.8rem .9rem;border:1px solid #e5e7eb;border-radius:12px;background:#f3f4f6
}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;margin:4px 16px 4px 0}
.hint{font-size:.8rem;color:#6b7280;margin-top:4px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ========== Responsive tweaks ========== */
@media (max-width: 1024px){
  .brand img{height:72px}
}
@media (max-width: 920px){
  .grid-2{
    grid-template-columns:1fr;
    gap:18px;
    grid-template-areas:
      "form"   /* form first on mobile */
      "aside";
  }
}
@media (max-width: 880px){
  .nav{padding:10px 0}
  .brand img{height:56px}
  .hero{padding:42px 0}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"art" "copy";gap:20px}
  .contact{grid-template-columns:1fr}
  .slot{grid-template-columns:90px 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-menu{
    display:none;flex-direction:column;gap:12px;position:absolute;top:100%;right:0;background:#fff;border:1px solid #e5e7eb;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.1);border-radius:12px;width:max-content;max-width:92vw
  }
  .nav-menu.show{display:flex}
  .nav-menu a{width:100%}
}
@media (max-width: 420px){
  .nav-menu a.btn{padding:.5rem .85rem}
  .unit{min-width:64px}
  .brand img{height:48px}
}

/* ===== HARD FIXES (append at end of file) ===== */

/* 1) Hero image: cap size tightly for small screens */
@media (max-width: 880px){
  .hero-art { display:flex; justify-content:center; align-items:center; overflow:hidden; }
  .hero-art img{
    max-width: 520px;
    max-height: 46vh;           /* never taller than ~half the viewport */
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
@media (max-width: 480px){
  .hero-art img{
    max-width: 340px;           /* extra-tight on very small phones */
    max-height: 38vh;
  }
  .display{ font-size: 26px; line-height: 1.15; }
  .sub{ font-size: .98rem; }
}

/* Optional: a little breathing room so the hero never feels crammed */
@media (max-width: 420px){
  .brand img{ height:48px; }
  .hero{ padding: 36px 0; }
}

/* ===== SPEAKER DETAIL (match Image-2 layout) ===== */

/* 2-column grid: small portrait left, content right */
.speaker-detail{
  display: grid;
  grid-template-columns: 240px 1fr;           /* left width ~240px */
  gap: 28px;
  align-items: start;
}

/* scale up slightly on wider desktops */
@media (min-width: 1200px){
  .speaker-detail{ grid-template-columns: 280px 1fr; }
}

/* LEFT: photo frame identical to index (4:5, rounded, shadow) */
.speaker-photo .frame{
  position: relative;
  width: 100%;
  /* fallback ratio for all browsers */
  height: 0;
  padding-top: 125%;                           /* 4:5 => 80% height -> 1/0.8 = 125% */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #f3f4f6;
}

/* absolutely fit the image inside the frame */
.speaker-photo .frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                           /* crop to fill portrait */
  display: block;
}

/* RIGHT: text column */
.speaker-bio{ min-width: 260px; }
.speaker-title{ margin: 0 0 8px; color: var(--c-blue-900); }

/* Mobile: stack (photo on top, centered; content below) */
@media (max-width: 720px){
  .speaker-detail{
    grid-template-columns: 1fr;               /* single column */
    justify-items: start;
  }
  .speaker-photo{
    width: clamp(200px, 60vw, 260px);
    margin: 0 auto 10px;                      /* center photo on mobile */
  }
}

/* ===== Partners (Sponsors) ===== */
.partners { padding-top: 16px; }
.partners .tier-title{
  text-align:center;
  font-weight:700;
  color:#1f2937;
  margin: 18px 0 14px;
}

/* A single responsive grid rule for all tiers */
.partners-grid{
  display:grid;
  gap:20px;
  justify-content:center;                         /* center the row */
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  /* If there's 1 logo: single column; 2+: they sit side-by-side */
}

/* Card + logo size (slightly bigger than before) */
.partner-card{
  background:#fff;
  border-radius:16px;
  padding:16px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;                                /* taller pill */
}

.partner-card img{
  max-height:64px;                                 /* bigger logo */
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Phones: force one per row and slightly smaller logos */
@media (max-width: 720px){
  .partners-grid{ grid-template-columns: 1fr; }
  .partner-card{ min-height:100px; padding:14px 16px; }
  .partner-card img{ max-height:52px; }
}


/* Date badge: shrink to content */
.badge-date{
  display:inline-flex;         /* keeps it next to the heading nicely */
  width:auto;                  /* stop stretching */
  max-width: max-content;      /* size to text */
  flex-wrap:nowrap;            /* never wrap inside */
  padding:.35rem .65rem;       /* keep your current padding */
  gap:.5rem;
}

/* Optional: make it pill-tight */
.badge-date span{ white-space:nowrap; line-height:1.2; }

/* ===== Friends of the Festival ===== */
.friends { padding: 64px 0; }

.friends-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* Illustration left, names right */
  gap: 28px;
  align-items: start;
}

/* Illustration card */
.friends-illu{
  margin: 0;
  padding: 16px;
}
.friends-illu img{
  display: block;
  width: 80%;
  height: auto;
  object-fit: contain;
  /* keep it neat on very wide screens */
  max-height: 520px;
}

/* Names column */
.friends-list h2{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 32px);
}

.friends-ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;                 /* vertical spacing between names */
}

/* Single-line, crisp names */
.friend-name{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.15;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

/* Accent left bar using palette (blue) */
.friend-name{
  position: relative;
}
.friend-name::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: var(--c-blue);           /* #2e5bc5 or update to #4261B2 */
}

/* Mobile behavior: image first, names below */
@media (max-width: 880px){
  .friends-grid{
    grid-template-columns: 1fr;
  }
  .friends-illu{
    order: 1; /* image first */
  }
  .friends-list{
    order: 2; /* names below */
  }
}

/* Optional: tighter on very small phones */
@media (max-width: 420px){
  .friend-name{ padding: 9px 12px; }
}

/* If you want to strictly enforce the provided palette: */
:root{
  /* uncomment if you want exact palette tokens available */
  /* --chaaya-green: #78C14E;
     --chaaya-blue:  #4261B2;
     --chaaya-yellow:#FFC822;
     --chaaya-ink:   #0E0B0C;
     --chaaya-soft:  #EAF9D8; */
}
/* Example tweak to match palette for accent bar */
.friend-name::before{
  background: #4261B2; /* Chaaya Blue */
}

.performance-section {
  padding: 60px 20px;
}

.performance-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  flex-wrap: wrap; /* ensures mobile layout stacks */
}

.performance-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.performance-text {
  max-width: 600px;
}

.performance-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.performance-text p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .performance-container {
    flex-direction: column;
    text-align: center;
  }

  .performance-text {
    max-width: 100%;
  }

  .performance-image img {
    max-width: 100%;
  }
}

/* ---------------------------
   Team section — speaker-like UI
   Append this to your CSS
   --------------------------- */

/* Grid layout: match speakers (force 5-up on wide desktop) */
#our-team .team-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

/* Responsive breakpoints (same behaviour as speakers) */
@media (max-width: 1024px){
  #our-team .team-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  #our-team .team-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  #our-team .team-grid{ grid-template-columns: 1fr; }
}

/* Team card styling: match .card look */
#our-team .team-card{
  background: var(--c-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* subtle lift on hover/focus */
#our-team .team-card:focus-within,
#our-team .team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* Image container: identical portrait ratio to speakers (4:5) */
#our-team .team-image{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 125%; /* 4:5 -> 125% trick to create ratio similar to speakers */
  overflow: hidden;
  background: #f3f4f6;
}

/* portrait image fill */
#our-team .team-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay (description) appears on hover — translucent card */
#our-team .team-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  transform: translateY(100%);
  transition: transform .22s ease;
  max-height: 60%;
  overflow: auto;
  font-size: .95rem;
  line-height: 1.45;
}

/* reveal overlay on hover or focus */
#our-team .team-card:hover .team-overlay,
#our-team .team-card:focus-within .team-overlay{
  transform: translateY(0);
}

/* card textual area */
#our-team h3{
  margin: 12px 14px 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.12;
  word-break: break-word;
}

#our-team .team-role{
  margin: 0 14px 14px;
  color: var(--c-muted);
  font-weight: 700;
  font-size: .9rem;
}

/* ensure overlay text is readable on small screens */
@media (max-width: 520px){
  #our-team .team-overlay{ font-size: .9rem; padding:10px; }
  #our-team h3{ margin-top:10px; margin-bottom:6px; font-size:1.02rem; }
  #our-team .team-role{ margin-bottom:12px; }
}

/* Accessibility: make cards keyboard-focusable if they contain links */
#our-team .team-card a{ color:inherit; text-decoration:none; display:block; width:100%; height:100%; }

/* fallback when description empty — keep overlay invisible */
#our-team .team-overlay:empty{ display:none; }

/* tighten spacing when grid has many cards (optional) */
@media (min-width: 1600px){
  #our-team .team-grid{ gap:22px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}