/* ============================================
   YMESBA — Shared Stylesheet
   ============================================ */

:root{
  --yale-blue:#00356B;
  --yale-blue-deep:#00203F;
  --ink:#111418;
  --grey:#9BA4B4;
  --grey-light:rgba(155,164,180,0.16);
  --grey-line:rgba(155,164,180,0.4);
  --paper:#FFFFFF;
  --line:rgba(17,20,24,0.12);
  --line-on-dark:rgba(255,255,255,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.55;
}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-weight:800;
  line-height:0.95;
  margin:0;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.72rem;
}
a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--yale-blue); outline-offset:2px;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center;
  text-decoration:none;
}
.logo-mark{width:113px; height:30px; display:block;}
.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks a{
  text-decoration:none; color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 0; border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.navlinks a:hover, .navlinks a[aria-current="page"]{border-color:var(--yale-blue);}
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none;
  padding:11px 20px;
  border:1px solid var(--yale-blue);
  color:var(--yale-blue);
  border-radius:2px;
  background:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{background:var(--yale-blue); color:var(--paper);}
.btn.solid{background:var(--yale-blue); color:var(--paper);}
.btn.solid:hover{background:var(--yale-blue-deep);}
.navcta{display:flex; align-items:center; gap:22px;}
.navtoggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:2px;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.navtoggle span, .navtoggle span::before, .navtoggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:transform .15s ease, opacity .15s ease;
}
.navtoggle span::before{position:absolute; top:-6px;}
.navtoggle span::after{position:absolute; top:6px;}

/* HERO */
.hero{
  background:var(--yale-blue);
  color:var(--paper);
  padding:88px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-8%; top:-30%;
  width:520px; height:520px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--grey);
  margin-bottom:22px;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--paper); animation:pulse 1.8s infinite;}
@media (prefers-reduced-motion: reduce){ .dot{animation:none;} }
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  max-width:820px;
  position:relative; z-index:1;
}
.hero h1 em{font-style:normal; color:var(--grey);}
.hero p.lede{
  font-family:'Source Serif 4', serif;
  font-size:1.15rem;
  max-width:560px;
  margin:26px 0 34px;
  color:rgba(255,255,255,0.86);
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero .btn{border-color:rgba(255,255,255,0.5); color:var(--paper);}
.hero .btn:hover{background:rgba(255,255,255,0.12); color:var(--paper);}
.hero .btn.solid{background:var(--paper); border-color:var(--paper); color:var(--yale-blue-deep);}
.hero .btn.solid:hover{background:var(--grey);}

/* Page header (for interior pages without a full hero) */
.pagehead{
  background:var(--yale-blue);
  color:var(--paper);
  padding:64px 0;
}
.pagehead h1{font-size:clamp(2.2rem, 4.6vw, 3.2rem);}
.pagehead p{
  font-family:'Source Serif 4', serif;
  font-size:1.08rem;
  max-width:600px;
  margin-top:18px;
  color:rgba(255,255,255,0.86);
}

/* SECTIONS */
section{padding:86px 0;}
.section-head{margin-bottom:44px; max-width:640px;}
.kicker{color:var(--yale-blue); margin-bottom:12px; display:block;}
.section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); color:var(--ink);}
.section-head p{color:#4a4f5c; margin-top:14px; font-size:1.02rem;}
.section-alt{background:var(--grey-light);}

.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;}
.about-grid .lede{font-size:1.22rem; color:var(--ink);}
.stat-list{display:grid; gap:0; border-top:1px solid var(--line);}
.stat-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.stat-row .num{font-family:'Big Shoulders Display', sans-serif; font-size:2rem; color:var(--yale-blue); font-weight:800;}
.stat-row .lbl{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:#4a4f5c; text-align:right;}

.founding-note{
  margin-top:28px; padding-top:22px; border-top:1px dashed var(--grey-line);
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.03em;
  color:var(--grey); text-transform:uppercase;
}

/* SPEAKERS */
.speakers{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.speaker-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.speaker-card{background:var(--paper); padding:28px; position:relative;}
.speaker-card .yr{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.06em;
  color:var(--yale-blue); text-transform:uppercase; display:block; margin-bottom:14px;
}
.speaker-card h3{
  font-family:'Source Serif 4', serif; text-transform:none; font-weight:600;
  font-size:1.08rem; letter-spacing:0; color:var(--ink); margin-bottom:6px;
}
.speaker-card p{margin:0; font-size:0.88rem; color:#5a5f6c; font-family:'IBM Plex Mono', monospace; letter-spacing:0.01em;}

/* PLAYBOOK / GET INVOLVED CARDS */
.playbook-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.play-card{
  border:1px solid var(--line); background:var(--paper);
  padding:26px 20px; border-radius:2px;
  border-top:3px solid var(--yale-blue);
}
.play-card .n{font-family:'IBM Plex Mono', monospace; color:var(--grey); font-size:0.75rem; margin-bottom:16px; display:block;}
.play-card h3{font-size:1.02rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0; color:var(--ink); margin-bottom:10px;}
.play-card p{font-size:0.88rem; color:#5a5f6c; margin:0;}

/* FEATURED VISITS (photos) */
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.feature-card{
  background:var(--ink); color:var(--paper);
  border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.feature-card .img-wrap{width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--grey-light);}
.feature-card .img-wrap img{width:100%; height:100%; object-fit:cover;}
.feature-card .txt{padding:26px 28px 30px;}
.feature-card .mono{color:var(--grey); margin-bottom:10px; display:block;}
.feature-card h3{font-size:1.3rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0;}

/* EVENTS (simple cards, no photos) */
.events-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.event-card{
  background:var(--yale-blue); color:var(--paper);
  padding:34px; border-radius:2px; min-height:180px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.event-card:nth-child(2){background:var(--ink);}
.event-card .mono{color:var(--grey); margin-bottom:10px;}
.event-card h3{font-size:1.3rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0;}

/* TEAM */
.team{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.team-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
.team-card{text-align:left;}
.avatar{
  width:100%; aspect-ratio:1; border-radius:2px;
  background:var(--yale-blue);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:1.6rem;
  margin-bottom:14px;
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.team-card h3{font-size:0.98rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0; margin-bottom:2px;}
.team-card p{margin:0; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--grey);}

/* UPCOMING SPEAKERS (photo cards) */
.upcoming-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.upcoming-card{text-align:left;}
.upcoming-card .photo{width:100%; aspect-ratio:1; border-radius:2px; overflow:hidden; margin-bottom:14px; background:var(--grey-light);}
.upcoming-card .photo img{width:100%; height:100%; object-fit:cover;}
.upcoming-card .date{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--yale-blue); margin-bottom:8px; display:block;}
.upcoming-card h3{font-size:1.02rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0; margin-bottom:4px;}
.upcoming-card p{margin:0; font-size:0.85rem; color:#5a5f6c;}

/* TABS (Events & Speakers) */
.tabs{display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:40px; flex-wrap:wrap;}
.tab-btn{
  background:none; border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color:#5a5f6c; padding:14px 4px; margin-right:28px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{color:var(--yale-blue); border-color:var(--yale-blue);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.archive-year{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--yale-blue); margin:36px 0 16px;
}
.archive-year:first-child{margin-top:0;}
.archive-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.archive-list li{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:0.98rem;
}
.archive-list li .who{color:var(--ink); white-space:nowrap; flex-shrink:0;}
.archive-list li .what{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:#5a5f6c; text-align:right;}
.empty-state{
  border:1px dashed var(--grey-line); border-radius:2px;
  padding:56px 28px; text-align:center;
  color:#5a5f6c; font-family:'IBM Plex Mono', monospace; font-size:0.9rem; letter-spacing:0.02em;
}

/* PARTNERSHIPS */
.partner-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.partner-card{
  border:1px solid var(--line); border-radius:2px; padding:32px;
  border-top:3px solid var(--yale-blue);
}
.partner-card h3{font-size:1.2rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0; color:var(--ink); margin-bottom:12px;}
.partner-card p{font-size:0.95rem; color:#4a4f5c; margin:0 0 16px;}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.contact-info .mono{color:var(--yale-blue); margin-bottom:6px; display:block;}
.contact-info h3{font-size:1.02rem; text-transform:none; font-family:'Source Serif 4',serif; font-weight:600; letter-spacing:0; margin-bottom:4px;}
.contact-info .item{margin-bottom:28px;}

.form-field{margin-bottom:20px;}
.form-field label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); margin-bottom:8px;
}
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; font-family:'Source Serif 4', serif; font-size:1rem;
  border:1px solid var(--grey-line); border-radius:2px; background:var(--paper); color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--yale-blue); outline-offset:1px;}
.form-field textarea{resize:vertical; min-height:140px;}
.form-status{margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem;}

/* CTA */
.cta{
  background:var(--ink); color:var(--paper);
  text-align:center; padding:96px 0;
}
.cta h2{font-size:clamp(2rem,5vw,3.2rem); max-width:760px; margin:0 auto 26px;}
.cta p{color:rgba(255,255,255,0.72); max-width:520px; margin:0 auto 34px; font-size:1.05rem;}
.cta .hero-ctas{justify-content:center;}
.cta .btn{border-color:rgba(255,255,255,0.5); color:var(--paper);}
.cta .btn.solid{background:var(--grey); border-color:var(--grey); color:var(--yale-blue-deep);}
.cta .btn.solid:hover{background:#8590a3;}
.cta-photo{
  position:relative;
  background-size:cover; background-position:center;
}
.cta-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,20,40,0.92), rgba(10,14,23,0.95));
}
.cta-photo .wrap{position:relative; z-index:1;}

/* PHOTO BAND */
.photo-band{padding:64px 0;}
.photo-band-frame{width:100%; aspect-ratio:21/9; border-radius:2px; overflow:hidden;}
.photo-band-frame img{width:100%; height:100%; object-fit:cover;}
.photo-band-caption{color:var(--grey); margin-top:14px; text-align:center;}

/* FOOTER */
footer{background:var(--yale-blue-deep); color:rgba(255,255,255,0.75); padding:52px 0 30px;}
.foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line-on-dark);}
.foot-brand{margin-bottom:14px;}
.foot-brand .logo-mark{width:135px; height:36px;}
.foot-links{display:flex; gap:28px; flex-wrap:wrap;}
.foot-links a{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; color:rgba(255,255,255,0.75);}
.foot-social{display:flex; gap:16px; margin-top:16px;}
.foot-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-on-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.62rem; text-decoration:none;
  color:rgba(255,255,255,0.75);
}
.foot-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:26px; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.03em; color:rgba(255,255,255,0.5);
}
.disclaimer{max-width:640px;}

@media (max-width: 900px){
  .navlinks{
    display:none;
    position:absolute; top:76px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 28px 20px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{width:100%; padding:12px 0; border-bottom:1px solid var(--line);}
  .navtoggle{display:flex;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .speaker-grid{grid-template-columns:repeat(2,1fr);}
  .playbook-grid{grid-template-columns:repeat(2,1fr);}
  .events-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .partner-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .upcoming-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .speaker-grid{grid-template-columns:1fr;}
  .playbook-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .upcoming-grid{grid-template-columns:1fr;}
  section{padding:56px 0;}
  .archive-list li{flex-direction:column; gap:4px;}
  .archive-list li .what{text-align:left;}
}
