/* ===== Clean, modern, solid-colour UI (no gradients) ===== */

/* Tokens */
:root{
    --bg: #f6f7fb;         /* subtle background w/ pattern below */
    --surface: #ffffff;    /* cards/sections */
    --ink: #10131a;        /* main text */
    --muted: #4b5563;      /* secondary text */
    --line: #e5e7eb;       /* borders */
  
    --brand: #0b63c4;      /* blue accent (solid) */
    --brand-ink: #0a3b76;  /* dark companion */
    --brand-contrast: #ffffff;
  
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(17,24,39,.06), 0 6px 24px rgba(17,24,39,.06);
  }
  
  /* Base + subtle depth (SVG dots pattern — no gradients) */
  * { box-sizing: border-box; }
  html { font-size: 18px; }
  body{
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><circle cx="1" cy="1" r="1" fill="%23e9ecf3"/></svg>') repeat,
      var(--bg);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  img{ max-width:100%; height:auto; display:block; }
  .container{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
  
  .skip-link{ position:absolute; left:-9999px; top:-9999px; }
  .skip-link:focus{
    left:12px; top:12px; background:var(--brand); color:var(--brand-contrast);
    padding:.5rem .75rem; border-radius:var(--radius-sm); z-index:999;
  }
  
  /* Type */
  h1,h2,h3{ margin:.1em 0 .5em; line-height:1.2; color:var(--brand-ink); font-weight:800; }
  h1{ font-size: clamp(28px, 3.5vw, 42px); }
  h2{ font-size: clamp(22px, 3vw, 30px); }
  h3{ font-size: clamp(18px, 2.5vw, 22px); }
  p, li{ color:var(--ink); }
  
  /* Links/Buttons */
  a{ color:var(--brand); text-decoration: underline; text-underline-offset: 2px; }
  a:hover{ text-decoration-thickness: 2px; }
  .btn, button, input[type="submit"]{
    display:inline-block; background:var(--brand); color:var(--brand-contrast);
    border:0; padding:.7rem 1.1rem; border-radius:var(--radius-sm); font-weight:700; cursor:pointer; box-shadow:var(--shadow);
  }
  .btn:hover, button:hover, input[type="submit"]:hover{ filter: contrast(1.05) brightness(.98); }
  
  /* Header + Nav */
  .site-header{ background: var(--surface); border-bottom:1px solid var(--line); }
  .topbar{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px; padding:12px 0; }
  .brand{ text-decoration:none; color:var(--brand-ink); font-weight:900; letter-spacing:.3px; font-size:20px; }
  
  .nav{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }
  .nav__list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
  .nav__list a{ text-decoration:none; color:var(--ink); font-weight:600; padding:.55rem .75rem; border-radius:10px; }
  .nav__list a:hover{ background:#eef3fb; color:var(--brand-ink); }
  .nav__social a{ color:var(--brand-ink); margin-left:10px; }
  
  .nav__toggle{ display:none; position:relative; width:38px; height:34px; background:transparent; border:0; cursor:pointer; }
  .nav__toggle span{ position:absolute; left:8px; right:8px; height:2px; background:var(--brand-ink); top:9px; }
  .nav__toggle span:nth-child(2){ top:16px; }
  .nav__toggle span:nth-child(3){ top:23px; }
  @media (max-width: 820px){
    .nav{ grid-template-columns:auto auto; }
    .nav__toggle{ display:block; }
    .nav__list{
      position:absolute; inset:62px 0 auto 0; background:var(--surface); border-bottom:1px solid var(--line);
      display:none; flex-direction:column; gap:0;
    }
    body.nav-open .nav__list{ display:flex; }
    .nav__list a{ padding:14px 20px; border-radius:0; border-top:1px solid var(--line); }
  }
  
  /* Hero (ARU background + portrait) */
  .hero{ background: var(--brand); background-image: var(--hero-img), none; background-size: cover; background-position: center; color:var(--brand-contrast); }
  .hero__inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; padding:42px 0 56px; }
  .hero__title{ color:#fff; margin-bottom:.25rem; }
  .hero__subtitle{ color:#eaf3ff; font-weight:600; margin:0 0 1rem; }
  .hero__photo img{ width: 260px; height: 260px; object-fit: cover; border-radius: 100%; border:4px solid #fff; box-shadow: var(--shadow); margin-left:auto; }
  @media (max-width: 880px){ .hero__inner{ grid-template-columns: 1fr; } .hero__photo img{ margin:0; } }
  
  /* Main */
  .site-main{ padding-block: 28px; }
  section{ padding: 26px 0; }
  section + section{ border-top:1px solid var(--line); }
  
  /* Cards / lists */
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); }
  .list-cards > li{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1rem; margin:.65rem 0; box-shadow:var(--shadow); }
  
  /* Chips */
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ background:#fff; border:1px solid var(--line); color:var(--brand-ink); border-radius:999px; padding:.35rem .6rem; font-size:.9rem; }
  
  /* Accordions (Publications/Media) */
  .accordion{ display:grid; gap:12px; }
  .accordion__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .accordion__btn{
    width:100%; text-align:left; background:#fff; border:0; padding: .9rem 1rem;
    font-weight:700; color:var(--brand-ink); cursor:pointer;
  }
  .accordion__content{ display:none; border-top:1px solid var(--line); padding: .8rem 1rem; }
  .accordion__item.is-open .accordion__content{ display:block; }
  
  /* Load more / infinite block */
  .loadmore-sentinel{ height: 1px; }
  
  /* Forms */
  label{ font-weight:700; display:block; margin:.4rem 0 .2rem; color:var(--brand-ink); }
  input[type="text"], input[type="email"], textarea{
    width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.6rem .75rem; margin-bottom:.8rem;
  }
  textarea{ min-height:160px; }
  
  /* Embeds 16:9 */
  .ratio{ position:relative; width:100%; max-width:960px; }
  .ratio::before{ content:""; display:block; padding-top:56.25%; }
  .ratio > iframe, .ratio > video{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:var(--radius); box-shadow:var(--shadow); }
  
  /* Footer */
  .site-footer{ background:var(--surface); border-top:1px solid var(--line); margin-top:24px; }
  .footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; color:var(--muted); }
  .footer__links a{ color:var(--muted); text-decoration:none; }
  .footer__links a:hover{ text-decoration:underline; }
  
  .footer-credit {
    color: inherit; /* Makes it the same color as surrounding text */
    text-decoration: none; /* Removes underline */
    opacity: 0.8; /* Slightly subtle */
    transition: opacity 0.2s ease;
  }
  
  .footer-credit:hover {
    opacity: 1; /* Subtle hover effect */
    text-decoration: underline; /* Adds underline on hover */
  }