:root {
      --banner-height: 100px;
      --slice-width: 10px;
      --gap: 0px;
      --speed-seconds: 7s;

      /* page paddings */
      --page-pad-l: 1.5rem;
      --page-pad-r: 1rem;

    }


    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    /* Page content typography: Lora @ 0.8em */
    body {
      font-family: "Lora", Georgia, serif;
      font-size: 0.8em;
      line-height: 1.55;
      color: #111;
      padding-top: var(--banner-height);
      background-color: #eee;
    }

    /* ===== Fixed banner (keeps Roboto) ===== */
    .top-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--banner-height);
      color: #fff;
      display: flex;
      align-items: center;
      z-index: 1000;
      font-family: "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
    }

    .top-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(90deg, #e73c7e, #23a6d5, #23d5ab);
      background-size: 300% 100%;
      animation: pan var(--speed-seconds) linear infinite alternate;
      -webkit-mask-image: repeating-linear-gradient(to right,
          #000 0,
          #000 calc(var(--slice-width)),
          transparent calc(var(--slice-width)),
          transparent calc(var(--slice-width) + var(--gap)));
      mask-image: repeating-linear-gradient(to right,
          #000 0,
          #000 calc(var(--slice-width)),
          transparent calc(var(--slice-width)),
          transparent calc(var(--slice-width) + var(--gap)));
    }

    @keyframes pan {
      0% {
        background-position-x: 0%
      }

      100% {
        background-position-x: 100%
      }
    }

    .banner-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 0 .9rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    }

    .brand {
      font-size: clamp(14px, 1.6vw, 18px);
      white-space: nowrap;
    }

    .top-banner nav {
      display: flex;
      align-items: center;
      gap: .7em;
      font-size: clamp(12px, 1.3vw, 14px);
    }

    .top-banner nav a {
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: .35em;
    }

    .top-banner nav a:hover {
      text-decoration: underline;
    }

.research-page {
  width: min(100%, 62rem);
  padding: 1.5rem var(--page-pad-r) 3rem var(--page-pad-l);
}

h1 { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.35; }
a { color: brown; }
a:hover { text-decoration: underline; }
a, .activity { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #a64716; outline-offset: 5px; }
.txt_orange { color: #a64716; }
.research-intro { max-width: 54rem; font-size: 1.08em; }
.section-tabs { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1.25rem 0 2rem; }
.section-tabs a { color: inherit; text-underline-offset: .2em; }
.research-axes { max-width: 48rem; margin-bottom: 2.25rem; }
.research-axes p { margin: .65rem 0; }
[id] { scroll-margin-top: calc(var(--banner-height) + 1.5rem); }

.activity-section {
  border-top: 2px dotted gray;
  padding: 1rem 0;
}
.activity-section > summary { cursor: pointer; }
.activity-section > summary h2 { display: inline; font-size: 1.4em; margin: 0; }
.activity-section > summary:hover { color: #a64716; }
.activity-section[open] > summary { margin-bottom: 1.5rem; }
[data-research-count], [data-expertise-count] { font-weight: normal; }
.activity-section h3 { margin: 1.6rem 0 .8rem; font-size: 1.1em; }
.activity-section h3:first-child { margin-top: 0; }
.activity-list { margin: 0; padding-left: 1.6rem; max-width: 54rem; }
.activity-list > li { padding-left: .5rem; margin-bottom: 1.7rem; }
.activity-list > li::marker { color: #777; }
.activity h4 { margin: 0 0 .35rem; font-size: 1.06em; }
[data-expertise-list] .activity h3 { margin: 0 0 .35rem; font-size: 1.06em; }
.activity p { margin: .35rem 0; white-space: pre-line; }
.activity-meta { color: #a64716; }
.activity-context { color: #555; }
.activity-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.activity img { display: block; max-width: min(100%, 28rem); height: auto; margin: .75rem 0; }
.data-status { color: #666; font-size: .92em; margin: .75rem 0; }
[hidden] { display: none !important; }

footer {
  width: 100%;
  padding: 2rem 1rem 2rem var(--page-pad-l);
  color: #555;
  border-top: 1px solid lightgray;
  font-size: .72rem;
  line-height: 1.2rem;
}
footer p { margin: .25rem 0; }

@media (max-width: 800px) {
  .top-banner .menu-item { display: none; }
}
@media (max-width: 600px) {
  :root { --banner-height: 86px; --slice-width: 8px; --page-pad-l: 1rem; }
  .banner-inner { gap: .75rem; }
  .research-page { padding-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .top-banner::before { animation: none; }
}
@media print {
  .top-banner { position: static; height: auto; color: #111; }
  .top-banner::before, .top-banner nav, .section-tabs, .data-status { display: none; }
  body { padding-top: 0; background: white; }
  .research-page { width: 100%; padding: 1rem 0; }
}