/* ================================
   THEME TOKENS (Edit colors, sizes)
   ================================ */
:root{
  --bg: #0f172a;               /* page background (slate-900-ish) */
  --bg-soft: #111827;          /* softer card background */
  --text: #e5e7eb;             /* default text color (light gray) */
  --muted: #9ca3af;            /* secondary text color */
  --brand: #93c5fd;            /* brand accent (light blue) */
  --brand-strong: #60a5fa;     /* link/hover accent */
  --card: rgba(17,24,39,.8);   /* card bg (translucent) */
  --radius: 14px;              /* default border radius for cards */
  --maxw: 900px;               /* max content width */
  --navw: 1200px;              /* wider header/nav width */
}

/* ================================
   ====== Affiliations strip ======
   ================================ */
.affils {
  max-width: var(--maxw);
  margin: 28px auto 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid rgba(148,163,184,.2);
  border-radius: var(--radius);
}

.affils h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: .2px;
}

/* Cluster layout (default) */
.logo-grid {
  list-style: none;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: 0;
  margin: 0;
}

/* Bar layout (use .affils--bar on the wrapper to activate) */
.affils.affils--bar .logo-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

/* Logo tiles */
.logo-grid li {
  display: grid;
  place-items: center;
  padding: 10px 12px;
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
}

.logo-grid img {
  max-height: 56px;       /* feel free to tweak */
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(.85);
  transition: filter .18s ease, transform .18s ease;
}

.logo-grid a:focus-visible img,
.logo-grid a:hover img {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-1px);
}

/* Smaller phones */
@media (max-width: 520px){
  .logo-grid img { max-height: 48px; }
}


/* ================================
   GLOBAL RESET & TYPOGRAPHY
   ================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Links */
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Global meta text  ⬅️ ADD THIS HERE */
.meta { font-size: .9rem; color: var(--muted); }

/* ================================
   HEADER & TOP NAV
   ================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(6px);
  background:rgba(15,23,42,0.6);
  border-bottom:1px solid rgba(148,163,184,0.15);
}

.nav{
  max-width:var(--navw);     /* wider than page content */
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;          /* keep on one line on desktop */
}

/* Brand (site title at top-left) */
.brand{
  color:var(--brand);
  font-weight:700;
  letter-spacing:.2px;
}

/* Tabs (top-right links) */
.tabs{
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  flex-wrap:nowrap;          /* no wrap on desktop */
}

.tabs a{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  white-space:nowrap;        /* prevent individual links breaking */
}

.tabs a:hover{ background:rgba(148,163,184,0.10); }
.tabs a.active{
  border-color:rgba(148,163,184,0.35);
  background:rgba(148,163,184,0.15);
}

/* Mobile menu: hide toggle on desktop */
.nav-toggle { display: none; }

/* --- Mobile layout --- */
@media (max-width: 860px) {
  .nav {
    position: relative;
    gap: 10px;
  }

  /* Show the toggle, hide tabs by default */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(17,24,39,.65);
    color: var(--text);
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 10px;
    cursor: pointer;
  }

  /* Turn the tab list into a dropdown panel */
  .tabs {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;                         /* full width with margins */
    display: none;                      /* hidden until opened */
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    z-index: 20;
  }
  .tabs li { margin: 0; }
  .tabs a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
  }
  .tabs a:hover { background: rgba(148,163,184,0.10); }
  .tabs a.active {
    border-color: rgba(148,163,184,0.35);
    background: rgba(148,163,184,0.15);
  }

  /* When nav is opened, show the menu */
  .nav.open .tabs { display: flex; }
}

/* ================================
   HERO (Homepage banner)
   ================================ */
.hero{
  min-height:calc(90dvh - 64px);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  text-align:center;
  padding:0;
  background:transparent;
}

/* Full-width dark bar behind the text */
.hero-banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding:20px 20px;
  background:rgba(0,0,0,0.75);
  border-radius:0;
  border-top:1px solid rgba(148,163,184,0.25);
  border-bottom:1px solid rgba(148,163,184,0.25);
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
  justify-self:stretch;
  text-align:center;
}

/* Constrain and center each text block inside the bar */
.hero-banner > *{
  max-width:var(--maxw);
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Headline size (edit clamp values to taste) */
.hero h1{
  font-size:clamp(2rem, 5vw, 3rem);
  margin:0 0 8px;
}

/* Default hero paragraph (kept muted) */
.hero p{
  margin:0;
  color:var(--muted);
}

/* Subtext lines under the headline (use <p class="subtext">) */
.hero p.subtext{
  font-size:clamp(1.1rem, 2.6vw, 1.2rem);
  line-height:1.5;
  margin-top:8px;
  color:var(--text);
}

/* ================================
   CONTENT CARDS (inner pages)
   ================================ */
.content{
  max-width:var(--maxw);
  margin:40px auto;
  background:var(--card);
  padding:24px;
  border-radius:var(--radius);
  border:1px solid rgba(148,163,184,0.2);
}

/* Generic images inside content */
.img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(148,163,184,0.25);
}

/* ================================
   FOOTER
   ================================ */
.site-footer{
  max-width:var(--maxw);
  margin:40px auto 24px;
  padding:0 16px;
  color:var(--muted);
  text-align:center;
}

/* ================================
   ABOUT PAGE OVERRIDES
   ================================ */
.about-text p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* ==========================================
   RESPONSIVE TWEAKS
   ========================================== */

/* Allow wrapping + center the tabs on narrow screens */
@media (max-width: 800px){
  .nav{ padding:10px 12px; }
  .tabs{
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 10px;
  }
  .tabs a{ padding:10px 14px; }
}

/* Hero: reduce height on phones, avoid fixed-bg issues on iOS */
@media (max-width:768px){
  .hero{ min-height:calc(70dvh - 56px); padding:16px; }
  body.home{ background-attachment:scroll; }
  .content{ margin:24px 12px; padding:18px; }
  .site-footer{ margin:24px auto 16px; padding:0 12px; }
}

/* Media page stacking + tighter text sizes on very small screens */
@media (max-width:850px){
  .media-item{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .media-item{ padding:14px; gap:12px; }
  .media-text h2{ font-size:1rem; }
  .hero h1{ font-size:clamp(1.75rem, 7vw, 2.4rem); }
  .hero p.subtext{ font-size:clamp(1rem, 3.6vw, 1.25rem); }
}

/* Media safety: embeds never overflow */
img, video, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* Utility: keep 16:9 when no wrapper is used */
.responsive-16x9{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.responsive-16x9 > iframe,
.responsive-16x9 > video{
  position:absolute; inset:0;
  width:100%; height:100%;
}