/* ====== Global / Tokens ====== */
:root{
  --bg:#ffffff;
  --ink:#0f0f12;
  --muted:#555963;
  --rule:#e7e8eb;
  --accent:#c8a56a;     /* gold */
  --accent-ink:#101214;
  --maxw:1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.58;
  overflow-x:hidden; /* prevents iPhone sideways scroll */
}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.card{border:1px solid var(--rule); background:#fff; border-radius:14px; padding:16px}
.vip-note{color:var(--muted); font-size:.95rem}

/* ===== Nav ===== */
header{
  position:sticky; top:0;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
  z-index:20;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand img{height:64px;width:auto}
nav ul{display:none}
nav a{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:#1d1f24}
nav a:hover{text-decoration:underline}

/* Hamburger is always visible (all screen sizes) */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid rgba(0,0,0,.15);background:rgba(255,255,255,.92);border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.menu-icon{display:grid;gap:5px}
.menu-icon span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:3px}

.mobile{display:none;border-top:1px solid var(--rule);padding:10px 0 16px}
.mobile.open{display:grid;gap:8px}
.mobile a{padding:10px 6px;border-radius:8px}
@media (max-width:860px){
  .mobile{padding:10px 0 16px}
}

/* ===== Hero ===== */
.hero{border-bottom:1px solid var(--rule)}
.hero--video{position:relative;padding:0;margin:0}
.hero-video{
  position:relative;
  width:100%;
  height:100svh; /* iPhone safe viewport */
  overflow:hidden;
}
.hero-video iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:100svh;
  transform:translate(-50%,-50%);
  border:0;

  /* Force “cover” behavior (kills black bars) */
  min-width: 177.78vh;  /* 16:9 based on viewport height */
  min-height: 56.25vw;  /* 9:16 based on viewport width */
}

.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.2) 100%);
  pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0;
  display:grid; align-items:center;
  color:#fff;
}
.hero-inner{padding-block:26px}
.kicker{color:#e9e9ea; letter-spacing:.12em; text-transform:uppercase; font-size:.88rem}
.hero-overlay h1{font-family:Newsreader,serif; font-weight:800; font-size:clamp(34px, 4vw, 62px); margin:.2rem 0; text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lead{max-width:62ch; color:#f2f2f3; font-size:1.05rem}

/* Buttons */
.cta-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px;
  border:1px solid var(--ink);
  background:#fff;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{border-color:#c4c6cc;color:#1d1f24}
.up{transition:transform .2s ease}
.up:hover{transform:translateY(-2px)}

/* Logo block */
.logo-block{max-width:20%;display:inline-block}
.logo-block.min{min-width:120px}
.logo-block img{width:100%;height:auto;object-fit:contain}
@media (max-width:640px){.logo-block{max-width:32%}}

/* ===== Sections ===== */
.section{padding:44px 0}
.section h2{
  font-size:clamp(22px, 2.5vw + .5rem, 42px);
  font-family:Newsreader,serif;
  margin:0 0 8px;
  text-align:center;
}

.section-lead{color:var(--muted); margin:0 0 14px; text-align:center;}

.section.bleed-accent{
  background:var(--accent);
  color:var(--accent-ink);
}
.section.bleed-accent .section-lead,
.section.bleed-accent .vip-note{color:rgba(16,18,20,.82)}
.section.bleed-accent .card{background:rgba(255,255,255,.65)}

/* Layout helpers */
.two-col{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start}
@media (max-width:980px){.two-col{grid-template-columns:1fr}}

/* ===== Leadership ===== */
.leadership-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:22px;
  align-items:start;
}
@media (max-width:780px){.leadership-grid{grid-template-columns:1fr}}

.lead-card{
  display:grid;
  gap:12px;
  align-items:start;
  justify-items:center;
}
.lead-video{width:min(320px, 100%)}
.btn-link{
  border:1px solid var(--rule);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}


/* Leadership: button beside video on larger screens */
@media (min-width:900px){.lead-card--inline{display:flex;gap:14px;align-items:center;justify-content:center}.lead-video{flex:0 0 320px}.btn-link{height:44px}}
  .btn-link{height:44px}

/* ===== About + Faculty ===== */
.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
@media (max-width:980px){.about-grid{grid-template-columns:1fr}}

.faculty-panel{display:grid; grid-template-columns: 1fr .7fr; gap:14px}
@media (max-width:980px){.faculty-panel{grid-template-columns:1fr}}
.faculty-list{display:grid; gap:10px}
.faculty-name{
  text-align:left;
  border:1px solid var(--rule);
  background:#fff;
  border-radius:12px;
  padding:12px 12px;
  font-weight:800;
  font-size:1.06rem;
  cursor:pointer;
}
.faculty-name:hover{border-color:rgba(200,165,106,.7)}

/* Faculty links: desktop = image tiles (no border, no text); mobile = text buttons */
.faculty-link{display:block; text-decoration:none}
.faculty-text{display:inline}
@media (min-width:981px){
  .faculty-name{
    border:0;
    padding:0;
    height:92px;
    border-radius:14px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
  }
  .faculty-name::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.25));
  }
  .faculty-text{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
}
@media (max-width:980px){
  .faculty-name{background:none !important;}
  .faculty-text{display:inline;}
}
.faculty--alexei{background-image:url("./images/AMLetterBio-01.png")}
.faculty--natalia{background-image:url("./images/NBLetterBio-01.png")}
.faculty--maria{background-image:url("./images/MSLetterBio-01.png")}
.faculty--misha{background-image:url("./images/MCLetterBio-01.png")}
.faculty--max{background-image:url("./images/MSLetterBio-01-01.png")}

/* Faculty buttons: remove hyperlink underline everywhere */
.faculty-name,
.faculty-name:link,
.faculty-name:visited,
.faculty-name:hover,
.faculty-name:active{ text-decoration:none; color:inherit; }

/* Desktop: image tiles with NO visible text */
@media (min-width:900px){
  .faculty-name{
    border:0;
    padding:0;
    height:110px;
    border-radius:16px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  .faculty-name::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.32));
  }
  .faculty-text{ display:none !important; }
}
/* Mobile/tablet: show text buttons */
@media (max-width:899px){
  .faculty-name{ background:none !important; box-shadow:none; }
  .faculty-text{ display:inline !important; }
}

.faculty-photos{display:grid; gap:10px; align-content:start}
.faculty-photo{width:100%; border-radius:12px; border:1px solid var(--rule); object-fit:cover; aspect-ratio: 4/3}

/* Make button tiles identical to anchor tiles */
button.faculty-name{
  width:100%;
  display:block;
  text-align:left;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:12px 12px;
  font-weight:800;
  font-size:1.06rem;
  cursor:pointer;
  color:inherit;
  font-family:inherit;
}

/* Remove default button styling quirks */
button.faculty-name:focus{
  outline: none;
}
button.faculty-name:focus-visible{
  outline: 3px solid rgba(200,165,106,.55);
  outline-offset: 2px;
}

.faculty--andrea{ background-image:url("./images/AALetterBio-01.png"); }

/* ===== Faculty tiles: force <button> to match <a> on desktop ===== */


/* On desktop, both <a> and <button> should use the tile styling */
@media (min-width: 900px) {
  a.faculty-name,
  button.faculty-name {
    height: 110px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  a.faculty-name::after,
  button.faculty-name::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.32));
  }
}








/* ===== Program grid (for testimonials) ===== */
.program{display:grid; grid-template-columns:repeat(12,1fr); gap:22px; align-items:start}
.event{grid-column:span 4; display:grid; gap:10px}
@media (max-width:1000px){.event{grid-column:span 6}}
@media (max-width:620px){.event{grid-column:span 12}}
.event-title{font-family:Newsreader,serif; font-weight:800; font-size:1.1rem}
.is-disabled{opacity:.25}
.muted-box{display:grid; place-items:center; border:1px dashed var(--rule); height:260px; border-radius:14px}

/* ===== VIP Accordion (no jump) ===== */
.vip-accordion{border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:#fff}
.vip-accordion__item + .vip-accordion__item{border-top:1px solid var(--rule)}
.vip-accordion__header{
  width:100%;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding:14px 14px;
  background:#fff;
  border:0;
  cursor:pointer;
  text-align:left;
}
.vip-accordion__title{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9rem;
}
.vip-accordion__icon{
  width:28px; height:28px;
  border:1px solid var(--rule);
  border-radius:999px;
  position:relative;
  flex:0 0 auto;
}
.vip-accordion__icon::before,
.vip-accordion__icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:2px;
  background:#111;
  transform:translate(-50%,-50%);
}
.vip-accordion__icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}


.vip-accordion__header[aria-expanded="true"] .vip-accordion__icon{
  border-color: rgba(0,0,0,.10);
  background: rgba(200,165,106,.18);
}
.vip-accordion__header[aria-expanded="true"] .vip-accordion__icon::after{
  display:none;
}



/*.vip-accordion__header[aria-expanded="true"] .vip-accordion__icon::after{display:none}*/
.vip-accordion__panel{
  padding:0 14px 14px;
  color:var(--muted);
}
.vip-accordion__panel ul{margin:10px 0 0 18px}


/* ===== Carousels (one card at a time) ===== */
.carousel{position:relative}
.carousel-viewport{
  overflow:hidden;
  border-radius:16px;
}
.carousel-track{
  display:flex;
  width:100%;
  transform:translateX(0%);
  transition:transform .35s ease;
}
.carousel-slide{flex:0 0 100%}
.carousel-slide .card,
.carousel-slide.event,
.carousel-slide .event{width:100%}

/* Overlay arrows, centered on the sides */
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.28);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:26px;
  cursor:pointer;
  z-index:3;
  backdrop-filter: blur(6px);
}
.carousel-arrow.prev{left:12px}
.carousel-arrow.next{right:12px}
.carousel-arrow:hover{background:rgba(0,0,0,.38)}

/* Soft side fades that match the site aesthetic */
.carousel::before,
.carousel::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:72px;
  pointer-events:none;
  z-index:2;
}
.carousel::before{left:0;background:linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,0))}
.carousel::after{right:0;background:linear-gradient(270deg, rgba(255,255,255,.65), rgba(255,255,255,0))}

/* Keep cards looking like your existing style */
.carousel .card, .carousel .event{
  border-radius:16px;
}

/* Testimonials/events: make sure it looks like a card */
.carousel .event{
  border:1px solid var(--rule);
  background:#fff;
  padding:16px;
  border-radius:16px;
}
.section.bleed-accent .carousel::before{background:linear-gradient(90deg, rgba(200,165,106,.55), rgba(200,165,106,0))}
.section.bleed-accent .carousel::after{background:linear-gradient(270deg, rgba(200,165,106,.55), rgba(200,165,106,0))}

/* ===== Right column short stack ===== */
.stack-videos{display:flex; gap:14px}

/* ===== Register section ===== */
.register-wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start}
@media (max-width:980px){.register-wrap{grid-template-columns:1fr}}
.register-card{border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px; background:rgba(255,255,255,.75); margin-bottom:14px}
.register-card h3{margin:0 0 8px; font-family:Newsreader,serif}
.bullets{margin:10px 0 0 18px}
.register-video .video-thumb{border:1px solid rgba(0,0,0,.08); border-radius:14px; overflow:hidden}

/* (You asked to add this earlier) */
.register-card--accent{
  background: linear-gradient(
    180deg,
    rgba(200,165,106,.20),
    rgba(200,165,106,.06)
  );
  border-color: rgba(200,165,106,.6);
}

/* ===== Video thumbnail behavior ===== */
.video-thumb{
  position:relative;
  cursor:pointer;
  display:block;
  overflow:hidden;
  border:1px solid var(--rule);
  background:#f2f3f6;
  border-radius:14px;
  aspect-ratio: 16 / 9;
}
.video-thumb.shorts{aspect-ratio: 9 / 16}
.video-thumb img,
.video-thumb iframe{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
}
.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.65);
  color:#fff;
  border:0;
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.video-thumb:hover .video-play{background:rgba(0,0,0,.8)}
.video-thumb.playing .video-play{display:none}


/* Local video inside thumb */
.video-thumb.local-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;   /* <-- was cover */
  background:#000;       /* letterbox */
}

/* Once playing, hide overlay button */
.video-thumb.local-video.playing .video-play{
  display:none;
}


/* ===== Staff ===== */
.staff-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width:980px){.staff-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:620px){.staff-grid{grid-template-columns:1fr}}
.staff-name{font-weight:800; font-size:1.05rem}
.staff-title{color:var(--muted)}
/* ===== Footer (bigger) ===== */
.footer-big{padding-block:54px}
.footer-card{
  border:1px solid var(--rule);
  border-radius:18px;
  padding:22px;
  background:#fff;
}
.contact-row{display:grid; gap:12px; margin-top:14px}
.contact-pill{
  border:1px solid var(--rule);
  border-radius:14px;
  padding:14px;
  display:grid;
  gap:6px;
}
.contact-pill .label{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
  color:var(--muted);
  font-weight:800;
}
.subscribe{display:flex; gap:10px; flex-wrap:wrap}
.subscribe input{flex:1; min-width:200px; padding:12px; border:1px solid var(--rule); border-radius:12px}
.subscribe button{
  padding:12px 14px;
  border:1px solid var(--ink);
  background:#fff;
  border-radius:999px;
  font-weight:800;
}
.fineprint{margin-top:14px; color:#7a7f89; font-size:.92rem}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; display:none; z-index:50}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.modal__panel{
  position:relative;
  width:min(760px, calc(100% - 28px));
  margin:8vh auto 0;
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.1);
  padding:18px;
}
.modal__close{
  position:absolute;
  right:12px;
  top:12px;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(200,165,106,.7);
  background:rgba(200,165,106,.18);
  color:var(--accent-ink);
  font-size:18px;
  cursor:pointer;
}
.modal__body{color:var(--muted)}
@media (min-width: 1000px){
  #testimonials .carousel-track.program .event{
    width: 360px;
  }

  #testimonials .video-thumb.shorts{
    max-height: 70vh;   /* keeps section elegant */
  }
}
/* Mobile: keep 9:16 reels fully visible (no vertical overflow) */
@media (max-width: 900px){
  .video-thumb.shorts{
    height: min(72svh, 620px); /* cap height to screen */
    width: auto;              /* let aspect-ratio compute width */
    max-width: 92vw;          /* don't exceed screen width */
    margin-inline: auto;      /* center */
  }
}