/* ============================================================
   MultiNet - shared site chrome

   The top header and the CTA banner, plus the responsive rules
   belonging to them. Single source of truth for the shell that
   appears on every page; page-specific styles stay inline in each
   page's own <style> block.

   Markup and behaviour: static/js/mn-shell.js
   ============================================================ */

body {
  margin: 0;
  font-family: "Google Sans", "Noto Sans", "Castoro", sans-serif;
}

/* ============================================================
   Header - a compact pinned cluster

   Brand and menu button, nothing else. Every link this used to
   carry lives in the drawer, so duplicating them here only cost
   width - and being narrow is what lets the bar stay pinned
   without sitting on top of the page the way a full-width bar
   riding down it did.

   Markup: mn-shell.js
   ============================================================ */
.mn-hdr {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(190%) blur(20px);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  /* No bottom border or drop shadow by default. Against the pale banner
     directly beneath it, a white hairline reads as a gap and the drop shadow
     tints the banner's top edge - together they look like the two surfaces
     have failed to meet. The bar only needs to lift off the page once it is
     actually floating over content, which is what .is-stuck is for. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: box-shadow 0.2s ease;
}

/* Scrolled away from the top: now it overlaps content and needs an edge. */
.mn-hdr.is-stuck {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(12, 18, 28, 0.05),
    0 4px 16px rgba(12, 18, 28, 0.06);
}

/* Where the browser cannot blur, a near-opaque bar beats a see-through
   one with page text behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mn-hdr { background: rgba(255, 255, 255, 0.97); }
}

.mn-hdr__inner {
  /* Matches .lp-wrap (1060px + 1.5rem padding) so the brand starts on the
     same line as the page's text and the nav ends on the same line as its
     right edge. Aligning to the content beats aligning to the viewport:
     symmetric-but-wider still reads as misaligned because nothing in the bar
     lines up with anything below it. */
  max-width: 1060px;
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shortcuts sit hard right, so the brand and the actions occupy opposite
   ends and the eye is not asked to scan a single undifferentiated row.
   A segmented control, not three buttons: one quiet track, and a pill that
   slides to whatever is being pointed at. */
.mn-hdr__nav {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(12, 18, 28, 0.055);
}

/* The sliding window. Sits behind the entries and animates between them;
   hidden until there is somewhere to rest, so it never flashes at 0 width. */
.mn-hdr__pill {
  position: absolute;
  top: 3px; left: 0;
  height: calc(100% - 6px);
  border-radius: 7px;
  background: #005A9C;
  box-shadow: 0 1px 2px rgba(0, 61, 107, 0.22), 0 2px 8px rgba(0, 90, 156, 0.20);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.18s ease;
  pointer-events: none;
}
.mn-hdr__nav.has-pill .mn-hdr__pill { opacity: 1; }

.mn-hdr__seg {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.38rem 0.75rem; border-radius: 7px;
  font-size: 0.85rem; font-weight: 500;
  color: #55637a; text-decoration: none; white-space: nowrap;
  transition: color 0.18s ease;
}
.mn-hdr__seg:hover,
.mn-hdr__seg.is-current { color: #fff; font-weight: 600; }
.mn-hdr__seg:focus-visible { outline: 2px solid #005A9C; outline-offset: 2px; }
.mn-hdr__seg i { font-size: 0.9em; opacity: 0.6; }
.mn-hdr__seg:hover i,
.mn-hdr__seg.is-current i { opacity: 1; }

/* The pill takes ~0.28s to arrive; fading the label to white over the same
   window stops it turning white before the blue is under it. */
.mn-hdr__seg { transition: color 0.22s ease 0.04s; }

@media (prefers-reduced-motion: reduce) {
  .mn-hdr__pill { transition: opacity 0.18s ease; }
}

/* Abbreviated labels only appear once the bar is tight. */
.mn-hdr__abbr { display: none; }

/* Shed the bar in stages rather than all at once: long labels first, then
   the secondary links, then everything but the maze. The drawer holds all
   of it regardless, so nothing is ever unreachable. */
@media (max-width: 900px) {
  .mn-hdr__full { display: none; }
  .mn-hdr__abbr { display: inline; }
}
/* Shed the secondary entries before the maze, which is the last to go. */
@media (max-width: 700px) {
  .mn-hdr__seg:not(:first-child) { display: none; }
}
@media (max-width: 380px) {
  .mn-hdr__nav { display: none; }
}

/* Three bars that become an X while the drawer is open. Drawn rather than
   set in a font, so it stays aligned with the brand at any size and cannot
   render as tofu if the icon font fails. */
.mn-hdr__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
  transition: background 0.18s ease;
}
.mn-hdr__menu:hover { background: rgba(12, 18, 28, 0.06); }
.mn-hdr__menu:focus-visible { outline: 2px solid #005A9C; outline-offset: 2px; }

.mn-hdr__bars {
  position: relative;
  display: block; width: 18px; height: 12px;
  flex: 0 0 auto;
}
.mn-hdr__bars i {
  position: absolute; left: 0;
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: #12151c;
  transition: transform 0.24s ease, opacity 0.16s ease;
}
.mn-hdr__bars i:nth-child(1) { top: 0; }
.mn-hdr__bars i:nth-child(2) { top: 5px; }
.mn-hdr__bars i:nth-child(3) { top: 10px; }
.mn-hdr__menu[aria-expanded="true"] .mn-hdr__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mn-hdr__menu[aria-expanded="true"] .mn-hdr__bars i:nth-child(2) { opacity: 0; }
.mn-hdr__menu[aria-expanded="true"] .mn-hdr__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mn-hdr__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.12rem;
  font-weight: 600;
  color: #12151c;
  text-decoration: none;
  flex: 0 0 auto;
  transition: opacity 0.2s ease;
}
.mn-hdr__brand:hover { color: #12151c; opacity: 0.72; }
.mn-hdr__brand img { height: 26px; width: 26px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .mn-hdr__bars i { transition: none; }
}

/* ============================================================
   Drawer - the whole site, one click away

   Overlays the page rather than pushing it, so it behaves the
   same on the homepage (full-bleed hero, fixed 1100px maze) as on
   the older release pages. Markup: mn-shell.js
   ============================================================ */
.mn-dw {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.mn-dw[hidden] { display: none; }

.mn-dw__scrim {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 22, 0.44);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.mn-dw.is-open .mn-dw__scrim { opacity: 1; }

.mn-dw__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(310px, 86vw);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 60px rgba(9, 14, 22, 0.22);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.85, 0.3, 1);
}
.mn-dw.is-open .mn-dw__panel { transform: translateX(0); }

.mn-dw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.85rem 0.85rem 1.15rem;
  border-bottom: 1px solid rgba(12, 18, 28, 0.07);
}
.mn-dw__brand {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 1.05rem; font-weight: 600; color: #12151c; text-decoration: none;
}
.mn-dw__brand img { height: 26px; width: 26px; border-radius: 6px; }
.mn-dw__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: transparent; color: #4a5160;
  font-size: 0.95rem; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.mn-dw__close:hover { background: rgba(12, 18, 28, 0.07); color: #12151c; }

.mn-dw__items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.6rem 0.6rem 1.25rem;
}

.mn-dw__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0; border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: #333a47;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.mn-dw__link:hover { background: rgba(0, 90, 156, 0.07); color: #005A9C; }
.mn-dw__link:focus-visible { outline: 2px solid #005A9C; outline-offset: -2px; }

.mn-dw__icon {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
  transition: color 0.16s ease;
}
.mn-dw__link:hover .mn-dw__icon { color: #005A9C; }
.mn-dw__label { flex: 1 1 auto; }
.mn-dw__ext { flex: 0 0 auto; font-size: 0.7rem; color: #b3bcc9; }

/* Where you are, in the same blue as everything else that is selected. */
.mn-dw__link.is-current {
  background: linear-gradient(180deg, #0069b5, #005A9C);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 90, 156, 0.3);
}
.mn-dw__link.is-current .mn-dw__icon,
.mn-dw__link.is-current .mn-dw__ext { color: rgba(255, 255, 255, 0.85); }

/* Groups push their siblings down instead of floating over them - the old
   rail overlapped, and clipped whatever sat beneath an open group. */
.mn-dw__caret {
  flex: 0 0 auto;
  font-size: 0.66rem;
  color: #b3bcc9;
  transition: transform 0.22s ease;
}
.mn-dw__group.is-open > .mn-dw__toggle .mn-dw__caret { transform: rotate(180deg); }

.mn-dw__children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.26s cubic-bezier(0.22, 0.85, 0.3, 1);
}
.mn-dw__link--child {
  padding-left: 1.1rem;
  margin-left: 1.35rem;
  font-size: 0.88rem;
  color: #4a5160;
  border-left: 2px solid rgba(12, 18, 28, 0.08);
  border-radius: 0 10px 10px 0;
}
.mn-dw__link--child.is-current { border-left-color: transparent; }

/* The page must not scroll behind an open drawer. */
body.mn-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mn-dw__panel,
  .mn-dw__scrim,
  .mn-dw__children,
  .mn-dw__caret,
  .mn-hdr__bars i { transition: none; }
}

/* ============================================================
   CTA banner
   ============================================================ */
/* Deliberately quiet. The bar above already carries three saturated blue
   buttons; a second full-width block of the same blue made the whole top of
   the page compete with itself. This is a tinted band that reads as context,
   letting the buttons be the only strong colour up there. */
.cta-banner {
  position: relative;
  background: #f4f8fb;
  border-bottom: 1px solid #e2eaf1;
  color: #4a5568;
  padding: 9px 50px;
  text-align: center;
}
.cta-banner p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
}
/* The org names: same colour as the sentence, marked only by a faint rule, so
   they are discoverable without pulling rank on the actions. */
.cta-banner p > a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(74, 85, 104, 0.35);
  text-underline-offset: 2px;
}
.cta-banner p > a:hover { color: #005A9C; text-decoration-color: currentColor; }

/* The one thing the banner is asking for, so it carries the site blue while
   the sentence around it stays grey. */
.cta-banner__signup {
  color: #005A9C !important;
  font-weight: 600;
  text-decoration-color: currentColor !important;
}
.cta-banner__signup:hover { color: #0069b5 !important; }

/* The actions get their own centred line, so the banner is two deliberate
   rows instead of one that wraps wherever the viewport happens to break it. */
.cta-banner__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  font-size: 0.93rem;
  font-weight: 600;
}
/* The underline sits on the label, not the anchor, so it does not run under
   the icon - an underlined glyph reads as a rendering fault. */
.cta-banner__actions a {
  color: #005A9C;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.cta-banner__actions a span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-banner__actions a:hover { color: #0069b5; }
.cta-banner__actions i { font-size: 0.92em; opacity: 0.8; }
.cta-banner__sep { opacity: 0.3; margin: 0 0.7em; }
#cta-close-btn {
  position: absolute;
  top: 50%; right: 15px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #94a3b8;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
#cta-close-btn:hover { color: #4a5568; background: rgba(12, 18, 28, 0.06); }

/* ============================================================
   Page shell
   ============================================================ */
#main-page-content {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Mobile
   ============================================================ */
/* The bar is already two items wide, so it needs no mobile variant beyond
   a little less padding. Everything else is in the drawer, which is where
   a narrow screen wanted it anyway. */
@media screen and (max-width: 860px) {
  .mn-hdr__inner { min-height: 48px; padding: 0.35rem 0.75rem; }
  .mn-hdr__brand { font-size: 1.02rem; }
}

@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  * { box-sizing: border-box; }

  h1, h2, h3, h4, h5, h6, p, span, div, a {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .publication-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  #main-page-content {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .cta-banner {
    padding: 14px 44px 14px 16px;
    text-align: left;
  }
  .cta-banner p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  #cta-close-btn { right: 10px; width: 28px; height: 28px; font-size: 16px; }

  .hero {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .hero .hero-body { padding: 1.5rem 1rem; }
  .hero .title.is-1 {
    font-size: 2rem !important;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .section {
    padding: 2rem 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
  .container.is-max-desktop {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .title.is-2 { font-size: 1.75rem !important; }
  .title.is-3 { font-size: 1.5rem !important; }

  .publication-authors p.is-size-5 { font-size: 0.9rem !important; }
}

@media screen and (max-width: 480px) {
  .hero .title.is-1 { font-size: 1.75rem !important; }
  .section { padding: 1.5rem 0.75rem; }
  .container,
  .container.is-max-desktop {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    max-width: 100%;
  }
  .publication-title { font-size: 1.6rem !important; }
  .title.is-2 { font-size: 1.5rem !important; }
  .title.is-3 { font-size: 1.25rem !important; }
}

/* ---- Superseded-version notice -------------------------------------------
   Sits where the CTA banner sits on current pages. Amber rather than the
   site blue: it is a caution about what you are reading, not an action, and
   it should not be mistaken for another call to action. Not dismissible -
   it is context that stays true for the whole visit. */
.mn-stale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, #fff8e6 0%, #fef3d7 100%);
  border-bottom: 1px solid #f0dfae;
  color: #6b4e12;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}
.mn-stale p { margin: 0; }
.mn-stale strong { font-weight: 650; color: #4d3708; }
.mn-stale__icon { display: inline-flex; opacity: 0.7; font-size: 0.95rem; }
.mn-stale a {
  color: #0069b5;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mn-stale a:hover { color: #005A9C; }

@media (max-width: 640px) {
  .mn-stale { font-size: 0.85rem; padding: 0.6rem 0.9rem; align-items: flex-start; }
  .mn-stale__icon { padding-top: 0.15rem; }
}