/* Shared design system: tokens, nav, section headers, footer.
   Used by source/index.html, source/publications/index.html, and the
   pages generated by scripts/generate-talks.js (activities + talks). */

:root{
  --bg:#ffffff; --surface:#f4f7f6; --surface-2:#eef2f1;
  --ink:#14181a; --muted:#5c666b; --line:#e5eae9;
  --accent:#0c5f52; --accent-ink:#0a4f44; --accent-soft:#e2efeb;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,24,26,.04), 0 18px 40px -24px rgba(12,95,82,.18);
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--accent-ink); margin:0 0 .9rem;
}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.nav-inner{position:relative; display:flex; align-items:center; justify-content:space-between; height:62px}
.brand{font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--ink); transition:color .2s ease}
.brand span{color:var(--muted); font-weight:400; font-size:.86rem; margin-left:.5rem; transition:color .2s ease}
.nav-links{display:flex; gap:1.7rem; font-size:.92rem}
.nav-links a{color:var(--muted); text-decoration:none; transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--accent-ink); font-weight:600}

/* Mobile collapse toggle — a real button + tiny inline script (see
   pageShell() in scripts/generate-site.js). When open, the nav bar itself
   turns teal (brand text goes white) and the menu panel is the same solid
   teal directly beneath it, so it reads as one continuous full-screen
   panel — matching the theme's Bootstrap navbar-toggler collapse on
   /blog/ and other theme-rendered pages, not a separate white bar sitting
   above a teal box. */
.nav-toggle-btn{
  display:none; position:relative; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:22px; cursor:pointer; background:none; border:0; padding:0; margin:0;
  -webkit-appearance:none; appearance:none; border-radius:0; box-shadow:none;
  flex-shrink:0; z-index:26;
}
.nav-toggle-btn span{
  display:block; height:2px; width:100%; background:var(--ink); border-radius:1px;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle-btn.open span:nth-child(2){opacity:0}
.nav-toggle-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:720px){
  .nav-toggle-btn{display:flex}
  .nav.open{background:var(--accent); backdrop-filter:none; border-bottom-color:transparent}
  .nav.open .brand{color:#fff}
  .nav.open .brand span{color:rgba(255,255,255,.75)}
  .nav.open .nav-toggle-btn span{background:#fff}

  .nav-links{
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:0;
    position:fixed; z-index:25; top:62px; left:0; right:0; bottom:0;
    height:calc(100vh - 62px); height:calc(100dvh - 62px);
    background:var(--accent); padding:1.5rem 24px; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    color:#fff; width:100%; max-width:22rem; text-align:center;
    padding:.9rem 0; font-size:1.15rem; font-weight:500;
  }
  .nav-links a:hover, .nav-links a.active{color:rgba(255,255,255,.75)}
}

/* ---- sections ---- */
.section{padding:clamp(2.6rem,5vw,4rem) 0; border-top:1px solid var(--line)}
.section h2{font-size:1.5rem; letter-spacing:-.01em; margin:.1rem 0 1.6rem}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.link-more{font-size:.9rem; color:var(--accent-ink); text-decoration:none; white-space:nowrap; font-weight:500}
.link-more:hover{text-decoration:underline}

/* ---- page header (non-homepage pages) ---- */
.page-header{padding:clamp(2.4rem,6vw,4rem) 0 clamp(1.6rem,3vw,2.2rem)}
.page-header h1{font-size:clamp(2rem,4.5vw,2.6rem); line-height:1.08; letter-spacing:-.02em; margin:.2rem 0 .8rem}
.page-header .actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.btn{display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:500;
     padding:.5rem .95rem; border-radius:999px; text-decoration:none; border:1px solid var(--line);
     color:var(--ink); background:#fff; transition:.15s}
.btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink); color:#fff}

/* ---- footer ---- */
footer{padding:2rem 0 3rem; color:var(--muted); font-size:.82rem; font-family:var(--mono)}
footer a{color:var(--accent-ink); text-decoration:none}