/* ============================================================
   MIDVIE design system · light + dark via CSS variables
   Hero: blooming lotus · Logo: network-v (drawn by JS)
   Palette: cool jade / emerald greens
   ============================================================ */

:root{
  --mv-bg:#f8fcfa; --mv-surface:#eef7f3; --mv-surface-2:#e1f0ea;
  --mv-card:#ffffff;
  --mv-ink:#0a201a; --mv-ink-2:#3c5e53; --mv-ink-3:#71908a;
  --mv-line:#d7e7e1; --mv-line-2:#bfd8d0;
  --mv-green:#0d9e74; --mv-green-bright:#10c98a; --mv-green-deep:#0a3b2d;
  --mv-green-soft:#d7f0e6; --mv-teal:#23b5ad; --mv-gold:#e9bd4f; --mv-pink:#eebccd;
  --mv-btn-pri-bg:#0a3b2d; --mv-btn-pri-ink:#ffffff; --mv-btn-pri-hover:#0d9e74;
  --mv-nav-bg:rgba(248,252,250,.85);
  --mv-shadow:0 20px 40px -22px rgba(10,59,45,.3);
  --mv-ens-thin:#0d9e74; --mv-ens-mean:#0a3b2d;
  --mv-ease:cubic-bezier(.2,.8,.2,1);
  --mv-r:14px;
}
:root.dark{
  --mv-bg:#06110e; --mv-surface:#0a1b16; --mv-surface-2:#0f241d;
  --mv-card:#0d1f19;
  --mv-ink:#e4f4ed; --mv-ink-2:#a3c5b8; --mv-ink-3:#69897e;
  --mv-line:#18302a; --mv-line-2:#25453b;
  --mv-green:#14cf93; --mv-green-bright:#1ce6a6; --mv-green-deep:#17e0a2;
  --mv-green-soft:#0d2b21; --mv-teal:#2cd9c5; --mv-gold:#f2cd6b; --mv-pink:#d98ca8;
  --mv-btn-pri-bg:#14cf93; --mv-btn-pri-ink:#03120c; --mv-btn-pri-hover:#1ce6a6;
  --mv-nav-bg:rgba(6,17,14,.8);
  --mv-shadow:0 22px 44px -20px rgba(0,0,0,.7);
  --mv-ens-thin:#14cf93; --mv-ens-mean:#bfeedd;
}

/* ===== Base ===== */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--mv-bg); color:var(--mv-ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
::selection{background:var(--mv-green-soft); color:var(--mv-green)}
:focus-visible{outline:2px solid var(--mv-green); outline-offset:3px; border-radius:4px}
.mv-wrap{max-width:1120px; margin:0 auto; padding-inline:clamp(24px, 5vw, 64px)}
.mv-mono{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mv-ink-3);
}
main.content a:not(.mv-btn):not(.nav-link){color:var(--mv-green)}
main.content a:not(.mv-btn):hover{color:var(--mv-green-deep)}

/* remove Quarto's default top spacing: the hero handles its own */
html{overflow-x:hidden}
#quarto-content{padding-top:0}
main.content,main#quarto-document-content{margin-top:0!important;padding-top:0!important}
/* the page lived inside a visible column box: strip the Quarto wrappers'
   own background/border/shadow so nothing draws a frame around content */
#quarto-content,.quarto-container,main.content,main#quarto-document-content,.page-columns{
  background:transparent!important; border:0!important; box-shadow:none!important;
}
/* Content stays inside the centred column (so it lines up with the navbar
   logo and across every section); only the coloured BACKGROUNDS bleed to the
   viewport edges via a full-width ::before. This avoids the scrollbar-width
   offset that a 100vw content bleed introduces. */
.mv-hero,.mv-mission,.mv-news,.mv-join,.mv-page{position:relative}
.mv-mission::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%);
  background:var(--mv-surface);
  border-top:1px solid var(--mv-line); border-bottom:1px solid var(--mv-line);
  transition:background .35s ease;
}

/* ===== Navbar (Quarto) ===== */
.navbar{
  background:var(--mv-nav-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mv-line);
  padding:8px 0;
  transition:background .35s ease, border-color .35s ease;
}
.navbar .navbar-container{
  max-width:1120px; margin:0 auto; padding-inline:clamp(24px, 5vw, 64px);
  display:flex; align-items:center; flex-wrap:nowrap; position:relative;
}
/* Quarto wraps the logo in .navbar-brand-container.mx-auto; the auto margins
   push the logo right of the content edge. Zero them so the logo lines up
   exactly with the hero text and every .mv-wrap below it. */
.navbar .navbar-brand-container{margin:0!important}
/* deterministic order: brand · links · (spacer) · tools · burger */
.navbar .navbar-brand-container,.navbar .navbar-brand{order:1}
.navbar .navbar-collapse{order:2}
.navbar #quarto-search{order:3}
.mv-tools{order:8; margin-left:auto}
.navbar .navbar-toggler{order:9; margin-left:12px}
.navbar .navbar-brand{
  position:relative; display:inline-block; line-height:0;
  padding:4px 2px 4px 0; margin-right:18px; color:var(--mv-ink);
}
.navbar .navbar-brand:hover{color:var(--mv-ink)}

/* orbit-fusion logo: hand-typeset SVG wordmark + comet canvas */
.mv-logo svg.wm{display:block; height:40px; width:auto; overflow:visible}
.mv-logo svg.wm text{
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:104px; fill:var(--mv-ink);
}
.mv-logo svg.wm .ve{stroke-linecap:round; fill:none}
.mv-logo canvas{
  position:absolute; inset:-38% -12% -16% -12%;
  width:124%; height:154%; pointer-events:none;
}
.mv-logo .wl,.mv-logo .vg{
  opacity:0; transform:scale(.94); transform-origin:center;
  transition:opacity .5s var(--mv-ease), transform .6s cubic-bezier(.3,1.4,.45,1);
}
.mv-logo.go .wl,.mv-logo.go .vg{opacity:1; transform:none}
.mv-logo.boing .vg{animation:mv-vg-boing .5s var(--mv-ease)}
@keyframes mv-vg-boing{40%{transform:scale(1.12)}75%{transform:scale(.97)}}
.navbar .nav-link{
  font-family:"Inter",sans-serif; font-size:14.5px; font-weight:500;
  color:var(--mv-ink-2)!important; padding:9px 15px!important;
  border-radius:99px; transition:background .15s, color .15s;
}
.navbar .nav-link:hover{background:var(--mv-green-soft); color:var(--mv-green)!important}
.navbar .nav-link.active{color:var(--mv-green)!important}
/* theme-aware hamburger (Quarto hardcodes data-bs-theme=dark on the navbar,
   so the default icon would be invisible in light mode); mask + currentColor
   keeps it crisp in both themes */
.navbar .navbar-toggler{
  border:1px solid var(--mv-line-2); border-radius:10px; padding:0;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent;
}
.navbar .navbar-toggler:focus,.navbar .navbar-toggler:focus-visible{box-shadow:none; outline:none}
.navbar .navbar-toggler-icon{
  width:22px; height:22px; background-image:none; background-color:var(--mv-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2.4' rx='1.2'/%3E%3Crect y='10.8' width='24' height='2.4' rx='1.2'/%3E%3Crect y='17.6' width='24' height='2.4' rx='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2.4' rx='1.2'/%3E%3Crect y='10.8' width='24' height='2.4' rx='1.2'/%3E%3Crect y='17.6' width='24' height='2.4' rx='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media(max-width:991px){
  /* the open menu drops as a panel below the bar so the top row stays a clean
     single line: logo · (spacer) · EN/VI · theme · burger */
  .navbar .navbar-collapse{
    position:absolute; top:100%; left:0; right:0; order:20;
    /* solid, opaque surface so menu text never blends with the hero behind it */
    background:var(--mv-card);
    border-top:1px solid var(--mv-line); border-bottom:1px solid var(--mv-line);
    box-shadow:0 24px 40px -18px rgba(10,59,45,.28);
    margin:0; padding:10px clamp(24px,5vw,64px) 16px; flex-basis:auto;
  }
  :root.dark .navbar .navbar-collapse{box-shadow:0 24px 44px -16px rgba(0,0,0,.7)}
  .navbar .navbar-nav{gap:2px; width:100%}
  .navbar .nav-link{padding:12px 14px!important; font-size:16px}
  .navbar .navbar-toggler{display:inline-flex}
}

/* nav tools: language + theme toggles (injected by JS) */
.mv-tools{display:flex; align-items:center; gap:10px}
.mv-lang{
  display:inline-flex; border:1px solid var(--mv-line-2); border-radius:99px;
  padding:3px; background:var(--mv-bg);
}
.mv-lang button{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  padding:6px 12px; border-radius:99px; border:none; background:none;
  color:var(--mv-ink-3); cursor:pointer; transition:all .2s; min-height:30px;
}
.mv-lang button[aria-pressed="true"]{background:var(--mv-btn-pri-bg); color:var(--mv-btn-pri-ink)}
.mv-theme-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--mv-line-2);
  background:var(--mv-bg); color:var(--mv-ink-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s var(--mv-ease), border-color .2s, color .2s;
}
.mv-theme-btn:hover{border-color:var(--mv-green); color:var(--mv-green); transform:rotate(18deg)}
.mv-theme-btn svg{display:block}

/* ===== Hero ===== */
.mv-hero{padding:42px 0 64px; position:relative}
.mv-hero-bg{
  position:absolute; top:-90px; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -10%, var(--mv-green-soft), transparent 65%),
    radial-gradient(700px 420px at 0% 30%, var(--mv-surface), transparent 60%);
  transition:opacity .35s;
}
.mv-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative}
.mv-chip{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--mv-line-2); background:color-mix(in srgb, var(--mv-card) 70%, transparent);
  border-radius:99px; padding:8px 16px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; color:var(--mv-ink-2);
}
.mv-dot{width:8px; height:8px; border-radius:50%; background:var(--mv-teal); animation:mv-pulse 1.8s infinite}
/* chip as a Zulip invite link */
a.mv-chip{text-decoration:none; cursor:pointer; transition:border-color .15s var(--mv-ease), color .15s var(--mv-ease), background .15s var(--mv-ease), transform .12s var(--mv-ease)}
a.mv-chip .arr{font-size:12px; transition:transform .18s var(--mv-ease)}
a.mv-chip:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
  a.mv-chip:hover{border-color:var(--mv-green); color:var(--mv-green); background:var(--mv-green-soft)}
  a.mv-chip:hover .arr{transform:translate(2px,-2px)}
}
@keyframes mv-pulse{
  0%{box-shadow:0 0 0 0 rgba(35,181,173,.5)}
  70%{box-shadow:0 0 0 9px rgba(35,181,173,0)}
  100%{box-shadow:0 0 0 0 rgba(35,181,173,0)}
}
.mv-h1{
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(36px,4.5vw,56px); line-height:1.06; letter-spacing:-.03em;
  margin:22px 0 20px; color:var(--mv-ink);
  text-wrap:balance;
}
.mv-h1 .hl{color:var(--mv-green)}
.mv-lede{font-size:clamp(16px,1.45vw,18.5px); color:var(--mv-ink-2); max-width:54ch; margin-bottom:30px}
.mv-cta{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:30px}
.mv-btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:99px; text-decoration:none; min-height:48px;
  transition:transform .15s var(--mv-ease), background .15s, box-shadow .15s, border-color .15s;
}
.mv-btn .arr{transition:transform .15s var(--mv-ease)}
.mv-btn:hover .arr{transform:translate(3px,-3px)}
.mv-btn:active{transform:scale(.97)}
.mv-btn-pri{background:var(--mv-btn-pri-bg); color:var(--mv-btn-pri-ink)!important; box-shadow:0 10px 24px -10px rgba(10,59,45,.45)}
.mv-btn-pri:hover{background:var(--mv-btn-pri-hover); transform:translateY(-2px)}
.mv-btn-gho{border:1.5px solid var(--mv-line-2); color:var(--mv-ink)!important}
.mv-btn-gho:hover{border-color:var(--mv-green); color:var(--mv-green)!important; transform:translateY(-2px)}
.mv-meta{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--mv-ink-3)}
.mv-meta b{color:var(--mv-green); font-weight:500}
.mv-hero-viz{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px}
.mv-hero-viz svg{width:100%; max-width:440px; height:auto; display:block}
.mv-viz-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center}
.mv-readout{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em;
  color:var(--mv-ink-2); background:color-mix(in srgb, var(--mv-card) 75%, transparent);
  border:1px solid var(--mv-line); border-radius:99px; padding:7px 16px;
  min-height:32px; display:inline-flex; align-items:center;
}
.mv-bloom{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mv-green); border:1px solid var(--mv-line-2); background:none; border-radius:99px;
  padding:8px 16px; min-height:36px; cursor:pointer; transition:all .15s;
}
.mv-bloom:hover{border-color:var(--mv-green); background:var(--mv-green-soft)}
.mv-viz-cap{text-align:center}

/* ===== Lotus hero canvas (ember metamorphosis) ===== */
#lotusHero{
  width:100%; max-width:500px; aspect-ratio:1; display:block;
  cursor:pointer; touch-action:none;
}

/* ===== Sections ===== */
.mv-hero,.mv-mission,.mv-news,.mv-join{font-family:"Inter",sans-serif}
.mv-mission,.mv-news,.mv-join{padding:88px 0}
.mv-mission{transition:background .35s}
.mv-sec-head{display:grid; grid-template-columns:170px 1fr auto; gap:18px; align-items:start; margin-bottom:46px}
.mv-sec-head .mv-mono{padding-top:14px; position:relative}
.mv-sec-head .mv-mono::before{content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--mv-green)}
.mv-sec-head h2{
  font-family:"Space Grotesk",sans-serif; font-weight:700; margin:0; border:none;
  font-size:clamp(28px,3.4vw,46px); letter-spacing:-.025em; line-height:1.08; color:var(--mv-ink);
}
.mv-more{
  justify-self:end; align-self:end; font-family:"JetBrains Mono",monospace; font-size:12px;
  letter-spacing:.1em; color:var(--mv-green)!important; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .15s;
}
.mv-more:hover{border-color:var(--mv-green)}
.mv-mis-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.mv-mis-grid p{color:var(--mv-ink-2); font-size:16.5px}
.mv-mis-aside{display:flex; flex-direction:column; gap:18px}
.mv-ens-card{
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:var(--mv-r);
  padding:22px 22px 14px; box-shadow:0 14px 34px -22px rgba(10,59,45,.25);
  transition:background .35s, border-color .35s;
}
.mv-ens-card svg{width:100%; height:auto; display:block}
.mv-ens-cap{display:flex; justify-content:space-between; align-items:center; padding-top:10px}
.mv-credit{display:flex; flex-wrap:wrap; gap:10px}
.mv-credit a{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--mv-line-2);
  border-radius:99px; padding:9px 16px; font-size:13.5px; font-weight:500;
  color:var(--mv-ink-2)!important; text-decoration:none; transition:all .15s; min-height:40px;
}
.mv-credit a:hover{border-color:var(--mv-teal); color:var(--mv-green)!important; transform:translateY(-1px)}
.mv-credit .sq{width:8px; height:8px; border-radius:2px; background:var(--mv-teal)}
.mv-credit a:nth-child(2) .sq{background:var(--mv-gold)}

/* ===== News listing (Quarto grid) ===== */
.mv-news-grid .list.grid{gap:20px}
.quarto-grid-item.card{
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:var(--mv-r);
  overflow:hidden; position:relative;
  transition:transform .2s var(--mv-ease), box-shadow .2s, border-color .2s, background .35s;
}
.quarto-grid-item.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:1;
  background:linear-gradient(90deg,var(--mv-green-bright),var(--mv-teal));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--mv-ease);
}
.quarto-grid-item.card:hover{transform:translateY(-5px); box-shadow:var(--mv-shadow); border-color:var(--mv-line-2)}
.quarto-grid-item.card:hover::before{transform:scaleX(1)}
.quarto-grid-item .card-body{padding:22px}
.quarto-grid-item .listing-title{
  font-family:"Space Grotesk",sans-serif; font-size:19px; font-weight:600;
  letter-spacing:-.01em; line-height:1.25; color:var(--mv-ink);
}
.quarto-grid-item .listing-subtitle{font-size:14px; color:var(--mv-ink-2); margin-top:6px}
.quarto-grid-item .listing-date,.quarto-grid-item .card-attribution{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--mv-ink-3);
}
.quarto-grid-item .listing-categories .listing-category,
.quarto-category{
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mv-green)!important; background:var(--mv-green-soft);
  border:none!important; padding:4px 10px; border-radius:99px;
}
.quarto-grid-item a{text-decoration:none}
.quarto-grid-item img{border-radius:0}

/* default listing rows (news.qmd, blog.qmd) */
div.quarto-post{
  border-bottom:1px solid var(--mv-line); padding:24px 10px; gap:1em;
  transition:background .15s, padding .2s var(--mv-ease);
}
div.quarto-post:hover{background:var(--mv-surface); padding-left:20px}
div.quarto-post .body h3.listing-title{
  font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.01em; color:var(--mv-ink);
}
div.quarto-post .listing-subtitle,div.quarto-post .body{color:var(--mv-ink-2)}
div.quarto-post .metadata{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--mv-ink-3); flex-basis:22%}
div.quarto-post .thumbnail img{border-radius:10px}

/* ===== Join band ===== */
.mv-join-band{
  background:linear-gradient(145deg,#0a3b2d 0%,#0d5a41 55%,#0d9e74 130%);
  border-radius:24px; padding:64px 56px; position:relative; overflow:hidden; color:#fff;
  display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center;
}
:root.dark .mv-join-band{
  background:linear-gradient(145deg,#0b291f 0%,#11553e 55%,#14cf93 160%);
  border:1px solid var(--mv-line-2);
}
.mv-join-band::before{
  content:""; position:absolute; top:-130px; right:-130px; width:430px; height:430px; border-radius:50%;
  background:radial-gradient(circle,rgba(233,189,79,.35),transparent 62%);
}
.mv-join-band::after{
  content:""; position:absolute; bottom:-160px; left:-80px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(35,181,173,.25),transparent 62%);
}
.mv-join-band h2{
  font-family:"Space Grotesk",sans-serif; font-size:clamp(26px,3.2vw,42px); font-weight:700;
  letter-spacing:-.02em; line-height:1.12; margin:0 0 14px; border:none; color:#fff;
}
.mv-join-band h2{text-wrap:balance}
.mv-join-band p{color:rgba(255,255,255,.78); max-width:48ch; font-size:15.5px; margin:0}
.mv-join-act{
  position:relative; z-index:1; justify-self:end;
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
}
.mv-btn-light{background:#fff; color:#0a3b2d!important; justify-content:center}
.mv-btn-light:hover{background:#d7f0e6; transform:translateY(-2px)}
.mv-btn-glass{
  border:1.5px solid rgba(255,255,255,.45); color:#fff!important;
  background:rgba(255,255,255,.06); justify-content:center;
}
.mv-btn-glass:hover{border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-2px)}

/* ===== Page title blocks (inner pages) ===== */
/* home / people / materials use a custom hero, so Quarto's empty title
   header just adds a big gap under the navbar; collapse it */
#title-block-header:empty{display:none}
#title-block-header{margin-top:30px; margin-bottom:34px}
#title-block-header .title{
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(34px,4.2vw,56px); letter-spacing:-.03em; color:var(--mv-ink);
  position:relative; padding-top:16px;
}
#title-block-header .title::before{
  content:""; position:absolute; top:0; left:2px; width:42px; height:3px;
  border-radius:2px; background:linear-gradient(90deg,var(--mv-green-bright),var(--mv-teal));
}
.quarto-title-meta-heading{
  font-family:"JetBrains Mono",monospace!important; font-size:10.5px!important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mv-ink-3)!important;
}

/* ===== Footer ===== */
.nav-footer{
  background:var(--mv-surface); border-top:1px solid var(--mv-line);
  padding:34px 0; transition:background .35s;
}
.nav-footer,.nav-footer a{color:var(--mv-ink-2); font-size:13.5px}
.nav-footer a{text-decoration:none}
.nav-footer a:hover{color:var(--mv-green)}
.nav-footer .nav-footer-center{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mv-ink-3)}

/* ===== Quarto chrome in dark ===== */
:root.dark .navbar .navbar-brand,:root.dark .navbar .nav-link{color:var(--mv-ink-2)}
:root.dark pre,:root.dark code{background:var(--mv-surface-2); color:var(--mv-ink)}
:root.dark .table,:root.dark table{color:var(--mv-ink)}
:root.dark .quarto-title-banner{background:var(--mv-surface)}

/* ===== Reveals ===== */
.rv{opacity:0; transform:translateY(22px)}
.rv.in{opacity:1; transform:none; transition:opacity .7s var(--mv-ease), transform .7s var(--mv-ease)}
.rv.d1.in{transition-delay:.08s}.rv.d2.in{transition-delay:.16s}.rv.d3.in{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none}
  .mv-dot{animation:none!important}
  .mv-logo .wl,.mv-logo .vg{opacity:1!important; transform:none!important; animation:none!important}
  .mv-logo canvas{display:none}
  *{transition-duration:.01ms!important}
}

/* ===== Responsive ===== */
@media(max-width:980px){
  .mv-hero-grid{grid-template-columns:1fr; gap:40px}
  .mv-hero{padding-top:34px}
  .mv-hero-viz svg{max-width:360px}
  .mv-mis-grid{grid-template-columns:1fr}
  .mv-join-band{grid-template-columns:1fr; padding:46px 32px}
  .mv-join-act{justify-self:start}
}
@media(max-width:680px){
  .mv-hero{padding-top:24px}
  .mv-sec-head{grid-template-columns:1fr; gap:10px}
  .mv-more{justify-self:start}
  .mv-mission,.mv-news,.mv-join{padding:64px 0}
  .mv-tools{gap:7px}
  .mv-lang button{padding:6px 10px}
}
@media(max-width:560px){
  /* clean, full-width stacked call-to-action buttons on phones */
  .mv-cta{flex-direction:column; align-items:stretch; gap:10px}
  .mv-cta .mv-btn{width:100%; justify-content:center}
}

/* ============================================================
   PEOPLE PAGE · quiet, precise, Apple-inspired
   ============================================================ */
.mv-page{padding:42px 0 96px; position:relative}
.mv-page-bg{
  position:absolute; top:-90px; left:50%; width:100vw; transform:translateX(-50%);
  height:420px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(820px 420px at 82% -12%, var(--mv-green-soft), transparent 64%),
    radial-gradient(640px 360px at 0% 16%, var(--mv-surface), transparent 60%);
}
.mv-page-head{max-width:760px; margin-bottom:34px}
.mv-page-head .mv-mono{display:inline-block; margin-bottom:14px; position:relative; padding-left:26px}
.mv-page-head .mv-mono::before{content:""; position:absolute; left:0; top:50%; width:16px; height:2px; background:var(--mv-green)}
.mv-page-head h1{
  font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--mv-ink);
  font-size:clamp(36px,4.6vw,60px); letter-spacing:-.03em; line-height:1.03; margin:0 0 16px;
}
.mv-page-head .lead{font-size:clamp(16px,1.4vw,18px); color:var(--mv-ink-2); margin:0}

/* the People header is centered, in the spirit of a product page */
.ppl-head{max-width:720px; margin:18px auto 44px; text-align:center}
.ppl-head .mv-mono{padding-left:0}
.ppl-head .mv-mono::before{display:none}
.ppl-head h1{font-size:clamp(38px,5vw,64px); letter-spacing:-.035em; margin:0 0 14px}
.ppl-head .lead{max-width:52ch; margin:0 auto}

/* toolbar: one centered row · segmented role control + round search field */
.ppl-toolbar{
  display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap;
  margin:0 0 14px;
}

/* two-column directory: member list on the left, sticky filter rail on the right */
.ppl-layout{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:start; margin-top:6px}
.ppl-main{min-width:0}
.ppl-side{position:sticky; top:90px}
.ppl-facets{
  display:flex; flex-direction:column; gap:22px;
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:18px; padding:20px 18px;
  box-shadow:0 1px 2px rgba(10,32,26,.05);
}
:root.dark .ppl-facets{box-shadow:none}
.ppl-fgroup{display:flex; flex-direction:column; gap:10px}
.ppl-fhead{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mv-ink-3); margin:0}
.ppl-fpills{display:flex; flex-wrap:wrap; gap:7px}
.ppl-fpill{
  display:inline-flex; align-items:center; gap:7px; font:500 13px "Inter",sans-serif;
  padding:7px 13px; border-radius:99px; border:1px solid var(--mv-line); background:var(--mv-card);
  color:var(--mv-ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .16s, color .16s, border-color .16s, transform .1s;
}
.ppl-fpill em{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--mv-ink-3); font-variant-numeric:tabular-nums}
.ppl-fpill:hover{border-color:var(--mv-green); color:var(--mv-ink)}
.ppl-fpill:active{transform:scale(.96)}
.ppl-fpill.on{background:var(--mv-green-soft); border-color:transparent; color:var(--mv-green-deep)}
.ppl-fpill.on em{color:var(--mv-green)}
:root.dark .ppl-fpill.on{color:var(--mv-green)}
.ppl-fclear{align-self:flex-start; font:500 12.5px "Inter",sans-serif; color:var(--mv-green); background:none; border:none; padding:0; cursor:pointer}
.ppl-fclear:hover{color:var(--mv-green-deep); text-decoration:underline}
@media(max-width:860px){
  .ppl-layout{grid-template-columns:1fr; gap:18px}
  .ppl-side{position:static; order:-1}              /* filters above the list on phones */
  .ppl-facets{flex-direction:row; flex-wrap:wrap; gap:14px 24px}
}
.ppl-chips{
  display:inline-flex; gap:2px; padding:4px; border-radius:99px;
  background:var(--mv-surface); border:1px solid var(--mv-line);
  max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ppl-chips::-webkit-scrollbar{display:none}
.ppl-chip{
  font-family:"Inter",sans-serif; font-size:13.5px; font-weight:500; letter-spacing:.01em;
  padding:8px 18px; min-height:38px; border-radius:99px; border:none; white-space:nowrap;
  background:transparent; color:var(--mv-ink-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .18s, background .18s, box-shadow .18s, transform .12s;
}
.ppl-chip:hover{color:var(--mv-ink)}
.ppl-chip:active{transform:scale(.96)}
.ppl-chip.on{
  background:var(--mv-card); color:var(--mv-ink);
  box-shadow:0 1px 2px rgba(10,32,26,.14), 0 5px 14px -8px rgba(10,32,26,.25);
}
:root.dark .ppl-chip.on{background:var(--mv-surface-2); box-shadow:0 1px 3px rgba(0,0,0,.55)}

.ppl-search{
  display:inline-flex; align-items:center; gap:9px; width:min(440px,100%); min-height:46px;
  border:1px solid var(--mv-line); border-radius:99px; padding:9px 18px;
  background:var(--mv-card); color:var(--mv-ink-3);
  transition:border-color .18s, box-shadow .18s, background .35s;
}
.ppl-search:focus-within{border-color:var(--mv-green); box-shadow:0 0 0 4px var(--mv-green-soft)}
.ppl-search svg{flex:none; color:var(--mv-ink-3)}
.ppl-search input{
  flex:1; min-width:0; border:none; background:none; outline:none; font:inherit;
  font-size:16px; color:var(--mv-ink); /* 16px keeps iOS from zooming the field */
}
.ppl-search input::placeholder{color:var(--mv-ink-3)}
.ppl-search button{
  border:none; background:none; color:var(--mv-ink-3); font-size:19px; line-height:1; cursor:pointer;
  width:26px; height:26px; border-radius:50%; display:none; -webkit-tap-highlight-color:transparent;
}
.ppl-search button.show{display:inline-flex; align-items:center; justify-content:center}
.ppl-search button:hover{color:var(--mv-ink); background:var(--mv-surface)}

.ppl-count{
  text-align:left; font-size:13px; letter-spacing:.02em; color:var(--mv-ink-3);
  margin:0 0 28px; min-height:1.3em;
}
.ppl-count b{color:var(--mv-ink); font-weight:600; font-variant-numeric:tabular-nums}

/* filter chips carry a small colour dot per role (acts as the legend) */
.ppl-chip .pdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle}

/* directory: a centered column of wide rows · avatar · identity · tags · chevron.
   The whole row is a button that opens a detail card. */
.ppl-grid{display:flex; flex-direction:column; gap:14px; margin:0}
.ppl-card{
  position:relative; display:flex; align-items:center; gap:18px; text-align:left;
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:20px;
  padding:18px 22px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(10,32,26,.05);
  transition:transform .24s var(--mv-ease), box-shadow .24s var(--mv-ease), border-color .24s, background .35s;
}
.ppl-card:focus-visible{outline:2px solid var(--mv-green); outline-offset:3px}
/* hover lift only where a real pointer exists; touch gets the press state below */
@media(hover:hover) and (pointer:fine){
  .ppl-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(10,32,26,.25); border-color:var(--mv-line-2)}
  .ppl-card:hover .ppl-go{transform:translateX(3px); color:var(--mv-green)}
}
.ppl-card:active{transform:scale(.99); transition-duration:.1s}
:root.dark .ppl-card{box-shadow:none}
:root.dark .ppl-card:hover{box-shadow:var(--mv-shadow)}

.ppl-face{
  width:62px; height:62px; flex:none; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px var(--mv-line);
}
.ppl-face svg{width:100%; height:100%; display:block}
.ppl-meta{flex:1; min-width:0}
.ppl-name{font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--mv-ink); margin:0 0 3px}
.ppl-inst{font-size:13px; line-height:1.45; color:var(--mv-ink-2); margin:0 0 9px}
.ppl-tags{display:flex; flex-wrap:wrap; gap:6px}
.ppl-tag{font-size:11px; font-weight:600; letter-spacing:.02em; padding:4px 10px; border-radius:99px; white-space:nowrap}
.ppl-tag.t-founder{background:#f6ecca; color:#8a6410}
.ppl-tag.t-researcher{background:var(--mv-green-soft); color:var(--mv-green-deep)}
.ppl-tag.t-policy{background:#e4edf4; color:#3a5876}
:root.dark .ppl-tag.t-founder{background:rgba(242,205,107,.16); color:var(--mv-gold)}
:root.dark .ppl-tag.t-researcher{background:var(--mv-green-soft); color:var(--mv-green)}
:root.dark .ppl-tag.t-policy{background:rgba(120,150,185,.20); color:#a8c2de}
.ppl-go{flex:none; font-size:22px; line-height:1; color:var(--mv-ink-3); padding-left:6px; transition:transform .2s var(--mv-ease), color .2s}

/* founder: gold avatar ring */
.ppl-card.is-founder .ppl-face{box-shadow:0 0 0 2px var(--mv-gold)}

.ppl-empty{text-align:center; padding:48px 0; color:var(--mv-ink-3); font-size:14px}
.ppl-cta{margin-top:48px; display:flex; justify-content:center}

/* ===== People detail overlay (click a row to open) ===== */
.mv-pov{
  position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:32px 18px; background:rgba(6,17,14,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.mv-pov.on{opacity:1; pointer-events:auto}
.mv-pov-sheet{
  position:relative; width:min(760px,100%); max-height:86vh; overflow:hidden;
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:24px;
  display:grid; grid-template-columns:minmax(220px,300px) 1fr;
  box-shadow:0 40px 90px -30px rgba(6,17,14,.6);
  transform:scale(.96); transition:transform .26s var(--mv-ease);
}
.mv-pov.on .mv-pov-sheet{transform:scale(1)}
.mv-pov-face{background:var(--mv-surface); min-height:300px}
.mv-pov-face svg{width:100%; height:100%; display:block}
.mv-pov-body{padding:34px 34px 30px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.mv-pov-eye{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mv-green)}
.mv-pov-body h2{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); letter-spacing:-.025em; line-height:1.05; color:var(--mv-ink); margin:0}
.mv-pov-inst{font-size:14px; color:var(--mv-ink-2); margin-top:-2px}
.mv-pov-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.mv-pov-bio{font-size:15.5px; line-height:1.55; color:var(--mv-ink); font-style:italic; margin:6px 0; padding-left:14px; border-left:2px solid var(--mv-green)}
.mv-pov-sec{margin-top:4px}
.mv-pov-k{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mv-ink-3); margin-bottom:6px}
.mv-pov-chips{display:flex; flex-wrap:wrap; gap:6px}
.mv-pov-chip{font-size:12px; padding:5px 11px; border-radius:99px; background:var(--mv-surface); color:var(--mv-ink-2); border:1px solid var(--mv-line)}
.mv-pov-meta{margin-top:2px}
.mv-pov-v{font-size:14px; color:var(--mv-ink); font-variant-numeric:tabular-nums}
.mv-pov-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.mv-pov-link,.mv-pov-cta{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:99px; padding:10px 18px; text-decoration:none; cursor:pointer; transition:transform .15s var(--mv-ease), background .2s, color .2s, border-color .2s}
.mv-pov-link{background:var(--mv-surface); color:var(--mv-ink); border:1px solid var(--mv-line)}
.mv-pov-link:hover{border-color:var(--mv-green); color:var(--mv-green)}
.mv-pov-cta{background:var(--mv-btn-pri-bg); color:var(--mv-btn-pri-ink)!important}
.mv-pov-cta:hover{background:var(--mv-btn-pri-hover); transform:translateY(-2px)}
.mv-pov-close{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--mv-line); background:var(--mv-card); color:var(--mv-ink);
  font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s, color .15s, border-color .15s;
}
.mv-pov-close:hover{background:var(--mv-green); color:#fff; border-color:transparent}
@media(max-width:620px){
  .mv-pov{padding:0}
  .mv-pov-sheet{grid-template-columns:1fr; width:100%; height:100%; max-height:100vh; border-radius:0}
  .mv-pov-face{min-height:190px; max-height:230px}
  .mv-pov-body{padding:26px 24px 30px}
}

/* ============================================================
   MATERIALS PAGE
   ============================================================ */
.mat-sec{margin-top:54px}
.mat-sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.mat-sec-head .mv-mono{position:relative; padding-left:26px}
.mat-sec-head .mv-mono::before{content:""; position:absolute; left:0; top:50%; width:16px; height:2px; background:var(--mv-green)}
.mat-sec-head h2{font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--mv-ink); font-size:clamp(24px,3vw,38px); letter-spacing:-.025em; margin:6px 0 0; border:none}
.mat-sec-head p{color:var(--mv-ink-2); font-size:15px; max-width:46ch; margin:6px 0 0}

.mat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.mat-grid.two{grid-template-columns:repeat(2,1fr); max-width:780px}
.mat-card{
  display:flex; flex-direction:column; background:var(--mv-card);
  border:1px solid var(--mv-line); border-radius:18px; overflow:hidden; text-decoration:none;
  transition:transform .25s var(--mv-ease), box-shadow .25s, border-color .25s, background .35s;
}
.mat-card:hover{transform:translateY(-6px); box-shadow:var(--mv-shadow); border-color:var(--mv-line-2)}
.mat-cover{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mv-surface)}
.mat-cover svg{position:absolute; inset:0; width:100%; height:100%; display:block; transition:transform .5s var(--mv-ease)}
.mat-card:hover .mat-cover svg{transform:scale(1.05)}
.mat-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mv-green-deep); background:rgba(255,255,255,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:5px 11px; border-radius:99px; border:1px solid rgba(255,255,255,.5);
}
:root.dark .mat-badge{color:var(--mv-ink); background:rgba(10,27,22,.7); border-color:var(--mv-line-2)}
.mat-year{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em;
  color:var(--mv-ink-2); background:rgba(255,255,255,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:5px 10px; border-radius:99px;
}
:root.dark .mat-year{color:var(--mv-ink-2); background:rgba(10,27,22,.7)}
.mat-body{display:flex; flex-direction:column; gap:10px; padding:22px 22px 18px; flex:1}
.mat-title{font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--mv-ink)}
.mat-author{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; color:var(--mv-ink-3); margin-top:-4px}
.mat-desc{font-size:14px; color:var(--mv-ink-2); line-height:1.55; flex:1}
.mat-tags{display:flex; flex-wrap:wrap; gap:6px}
.mat-tag{
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mv-green); background:var(--mv-green-soft); padding:4px 9px; border-radius:99px;
}
.mat-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-top:1px solid var(--mv-line); margin-top:auto;
}
.mat-meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--mv-ink-3)}
.mat-open{
  display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace;
  font-size:11.5px; letter-spacing:.08em; font-weight:500; color:var(--mv-green);
}
.mat-open .arr{transition:transform .15s var(--mv-ease)}
.mat-card:hover .mat-open .arr{transform:translate(3px,-3px)}
.mat-note{
  margin-top:40px; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.04em;
  color:var(--mv-ink-3); text-align:center;
}

@media(max-width:860px){
  .mat-grid{grid-template-columns:repeat(2,1fr)}
  .mat-grid.two{grid-template-columns:1fr; max-width:none}
}
@media(max-width:560px){
  .mat-grid,.mat-grid.two{grid-template-columns:1fr}
  .ppl-toolbar{gap:10px}
  .ppl-card{padding:16px 16px; gap:14px}
  .ppl-face{width:54px; height:54px}
}

/* ============================================================
   NEWS & BLOG · Quarto listings restyled to the Materials card language
   ============================================================ */
.mv-page-listing{padding-bottom:48px}
/* the listing lives inside .mv-wrap, so it lines up exactly with the header.
   The first rule is a fallback in case Quarto renders it outside the wrap. */
.quarto-listing{max-width:1180px; margin:0 auto; padding:0 28px}
.mv-wrap .quarto-listing{max-width:none; margin:0; padding:0}
.mv-wrap .quarto-listing .list{margin:0}
#news-list, #blog-list{margin-top:10px}

/* GRID listing → card grid like .mat-grid */
.quarto-listing-cols-3{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:22px;
}
.quarto-listing-cols-3 > .g-col-1{width:auto; display:flex}

.quarto-grid-item.card{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:var(--mv-card); border:1px solid var(--mv-line); border-radius:18px; overflow:hidden;
  text-decoration:none; box-shadow:0 1px 2px rgba(10,32,26,.05);
  transition:transform .25s var(--mv-ease), box-shadow .25s, border-color .25s, background .35s;
}
@media(hover:hover) and (pointer:fine){
  .quarto-grid-item.card:hover{transform:translateY(-6px); box-shadow:var(--mv-shadow); border-color:var(--mv-line-2)}
  .quarto-grid-item.card:hover .card-img-top svg{transform:scale(1.05)}
}
:root.dark .quarto-grid-item.card{box-shadow:none}

/* generative cover banner */
.quarto-grid-item .card-img-top,
.quarto-grid-item .listing-item-img-placeholder{
  position:relative; aspect-ratio:16/10; width:100%; height:auto;
  border:0; border-radius:0; margin:0; padding:0; overflow:hidden; background:var(--mv-surface-2);
}
.quarto-grid-item .card-img-top svg{position:absolute; inset:0; width:100%; height:100%; display:block; transition:transform .5s var(--mv-ease)}

.quarto-grid-item .card-body{display:flex; flex-direction:column; gap:10px; padding:20px 20px 16px; flex:1}
.quarto-grid-item .card-title,
.quarto-grid-item .listing-title{
  font-family:"Space Grotesk",sans-serif; font-size:19px; font-weight:600; letter-spacing:-.01em;
  line-height:1.22; color:var(--mv-ink); margin:0;
}
.quarto-grid-item a.listing-title, .quarto-grid-item .listing-title a{color:var(--mv-ink); text-decoration:none}
.quarto-grid-item .listing-subtitle{font-size:13px; color:var(--mv-ink-3); margin:0; line-height:1.4}
.quarto-grid-item .listing-description,
.quarto-grid-item .card-text{font-size:14px; color:var(--mv-ink-2); line-height:1.55}
.quarto-grid-item .listing-categories{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 0}
.quarto-grid-item .listing-category{
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mv-green); background:var(--mv-green-soft); padding:4px 9px; border-radius:99px; border:0; cursor:pointer;
  transition:background .15s, color .15s;
}
.quarto-grid-item .listing-category:hover{background:var(--mv-green); color:#fff}
.quarto-grid-item .card-attribution{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 20px; border-top:1px solid var(--mv-line); margin-top:auto;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--mv-ink-3);
}
.quarto-grid-item .listing-date, .quarto-grid-item .listing-author{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mv-ink-3)}

/* hide Quarto's category cloud / empty-state chrome for a clean materials look */
.quarto-listing .listing-no-matching{color:var(--mv-ink-3); font-size:14px}

@media(max-width:860px){ .quarto-listing-cols-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .quarto-listing{padding:0 20px}
  .quarto-listing-cols-3{grid-template-columns:1fr; gap:16px}
}
/* ============================================================
   PEOPLE DIRECTORY · MIDSEA structure, MIDVIE jade theme
   (overrides the earlier .ppl-search/.ppl-count; older card rules
   are unused now that rows render as .ppl-row)
   ============================================================ */
.ppl-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.mv-btn-ghost{background:transparent; color:var(--mv-ink); border:1px solid var(--mv-line-2); box-shadow:none}
.mv-btn-ghost:hover{border-color:var(--mv-green); color:var(--mv-green); transform:translateY(-2px)}

/* running place tally */
.ppl-tally{
  display:flex; gap:clamp(16px,2.5vw,36px); flex-wrap:wrap;
  margin-top:30px; padding:16px 0;
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mv-ink-3);
  border-top:1px solid var(--mv-line); border-bottom:1px solid var(--mv-line);
}
.ppl-tally .tly{display:inline-flex; gap:6px; align-items:baseline; white-space:nowrap}
.ppl-tally .tly b{color:var(--mv-ink); letter-spacing:.12em; font-weight:600}
.ppl-tally .ticks{letter-spacing:1px; color:var(--mv-green)}

/* A–Z index rail */
.ppl-azbar{
  position:sticky; top:0; z-index:20; background:var(--mv-nav-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--mv-line); margin-bottom:26px;
}
.ppl-azlabel{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mv-ink-3); flex:none}
.ppl-azletters{display:flex; gap:2px; flex-wrap:wrap}
.ppl-azletters button{
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500;
  width:26px; height:26px; border:0; background:transparent; color:var(--mv-ink);
  border-radius:7px; cursor:pointer; transition:background .12s, color .12s;
}
.ppl-azletters button:hover:not(:disabled){background:var(--mv-green-soft); color:var(--mv-green)}
.ppl-azletters button:disabled{color:var(--mv-ink-3); opacity:.32; cursor:default}
.ppl-azletters button.on{background:var(--mv-btn-pri-bg); color:var(--mv-btn-pri-ink)}

/* body: sticky filter rail + directory */
.ppl-body{display:grid; grid-template-columns:262px minmax(0,1fr); gap:clamp(24px,3vw,52px); align-items:start; padding-bottom:8px}
.ppl-main, .ppl-list{min-width:0}          /* let the directory column shrink instead of overflowing */
/* Quarto styles every <aside> as a margin note (grid-column: body-end/page-end);
   force our two cells back into the normal grid so the 2-col layout holds. */
.ppl-body > .ppl-side, .ppl-body > .ppl-main{grid-column:auto !important; grid-row:auto !important; float:none !important}
/* guard: never let Quarto's page-columns grid hijack our containers.
   Quarto both re-grids the element AND assigns children to named columns,
   so we reset the template AND the children's column placement. */
.mv-page.page-columns,.mv-wrap.page-columns,.ppl-main.page-columns{display:block !important; grid-template-columns:none !important; gap:0 !important}
.mv-page.page-columns > *,.mv-wrap.page-columns > *,.ppl-main.page-columns > *{grid-column:auto !important}
.ppl-body.page-columns{display:grid !important; grid-template-columns:262px minmax(0,1fr) !important}
.ppl-body.page-columns > *{grid-column:auto !important}
.ppl-side{
  position:sticky; top:78px; display:flex; flex-direction:column; gap:22px;
  padding:20px; border:1px solid var(--mv-line); border-radius:18px; background:var(--mv-card);
  box-shadow:0 1px 2px rgba(10,32,26,.05);
}
:root.dark .ppl-side{box-shadow:none}
.ppl-search{
  display:flex; align-items:center; gap:8px; width:auto; min-height:0;
  padding:10px 14px; border:1px solid var(--mv-line-2); border-radius:99px; background:var(--mv-bg); color:var(--mv-ink-3);
  transition:border-color .15s, box-shadow .15s, background .35s;
}
.ppl-search:focus-within{border-color:var(--mv-green); box-shadow:0 0 0 4px var(--mv-green-soft)}
.ppl-search svg{flex:none}
.ppl-search input{flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:var(--mv-ink); min-width:0}
.ppl-search input::placeholder{color:var(--mv-ink-3)}
.ppl-search button{border:0; background:transparent; color:var(--mv-ink-3); cursor:pointer; font-size:18px; line-height:1; display:none; padding:0}
.ppl-search.has-val button{display:block}
#pplFacets{display:flex; flex-direction:column; gap:20px}   /* even space between the Sort / Job / Place groups */
.ppl-fgroup{display:flex; flex-direction:column; gap:9px}
.ppl-fhead{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mv-ink-3); margin:0}
.ppl-fchips{display:flex; flex-wrap:wrap; gap:6px}
.ppl-fchips .chip{
  padding:6px 11px; font-family:"Inter",sans-serif; font-size:12px; font-weight:500; color:var(--mv-ink-2);
  background:transparent; border:1px solid var(--mv-line-2); border-radius:99px; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s; -webkit-tap-highlight-color:transparent;
}
.ppl-fchips .chip:hover{color:var(--mv-green); border-color:var(--mv-green)}
.ppl-fchips .chip.on{background:var(--mv-btn-pri-bg); color:var(--mv-btn-pri-ink); border-color:transparent}
.ppl-fchips.ppl-sort .chip.on{background:var(--mv-green); border-color:transparent; color:#fff}
.ppl-count{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mv-ink-3); margin:0; padding-top:16px; border-top:1px dashed var(--mv-line-2); text-align:left; min-height:0;
}
.ppl-count b{color:var(--mv-green); font-weight:600}

/* directory list */
.ppl-list{display:flex; flex-direction:column}
.ppl-section-head{display:flex; align-items:baseline; gap:16px; padding:18px 0 10px; border-bottom:1px solid var(--mv-ink); margin-top:16px}
.ppl-section-head:first-child{margin-top:0}
.ppl-section-head h3{margin:0; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; letter-spacing:-.03em; line-height:1; color:var(--mv-green)}
.ppl-section-head .count{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mv-ink-3)}

.ppl-row{
  display:grid; grid-template-columns:52px minmax(0,1.7fr) minmax(0,1.4fr) 158px;
  gap:16px 22px; align-items:start; padding:18px 6px; border-bottom:1px solid var(--mv-line);
  cursor:pointer; position:relative; transition:background .16s; -webkit-tap-highlight-color:transparent;
}
.ppl-row:hover{background:var(--mv-surface)}
.ppl-row:focus-visible{outline:2px solid var(--mv-green); outline-offset:-2px; border-radius:8px}
.ppl-avatar{width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--mv-green-soft); box-shadow:0 0 0 1px var(--mv-line); flex:none; margin-top:2px; transition:transform .2s var(--mv-ease)}
@media(hover:hover) and (pointer:fine){ .ppl-row:hover .ppl-avatar{transform:scale(1.06)} }
.ppl-row.is-founder .ppl-avatar{box-shadow:0 0 0 2px var(--mv-gold)}
.ppl-avatar svg{width:100%; height:100%; display:block}
/* identity cell: name · institution · role badges, stacked */
.ppl-ident, .ppl-tags{min-width:0}
.ppl-ident .n{font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:600; letter-spacing:-.015em; color:var(--mv-ink); line-height:1.2; overflow-wrap:anywhere}
.ppl-ident .inst{font-size:13px; color:var(--mv-ink-2); line-height:1.45; margin-top:3px; overflow-wrap:anywhere}
.ppl-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.ppl-badge{font-size:11px; font-weight:600; letter-spacing:.02em; padding:4px 10px; border-radius:99px; white-space:nowrap}
.ppl-badge.t-founder{background:#f6ecca; color:#8a6410}
.ppl-badge.t-researcher{background:var(--mv-green-soft); color:var(--mv-green-deep)}
.ppl-badge.t-policy{background:#e4edf4; color:#3a5876}
:root.dark .ppl-badge.t-founder{background:rgba(242,205,107,.16); color:var(--mv-gold)}
:root.dark .ppl-badge.t-researcher{background:var(--mv-green-soft); color:var(--mv-green)}
:root.dark .ppl-badge.t-policy{background:rgba(120,150,185,.20); color:#a8c2de}
.ppl-tags{display:flex; flex-wrap:wrap; gap:5px; padding-top:2px; align-content:flex-start}
.ppl-tags .tag{font-size:11px; padding:3px 9px; border:1px solid var(--mv-line-2); border-radius:99px; color:var(--mv-ink-2); background:var(--mv-card)}
.ppl-right{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:4px; white-space:nowrap}
.ppl-place{display:inline-flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; color:var(--mv-ink-2); white-space:nowrap}
.ppl-place .cdot{width:6px; height:6px; border-radius:50%; background:var(--mv-green); flex:none}
.ppl-arrow{font-size:18px; color:var(--mv-ink-3); transition:transform .2s var(--mv-ease), color .12s; flex:none}
.ppl-row:hover .ppl-arrow{color:var(--mv-green); transform:translateX(3px)}
.ppl-empty{padding:56px 0; text-align:center; color:var(--mv-ink-3); display:flex; flex-direction:column; gap:14px; align-items:center; font-size:14px}

@media(max-width:980px){
  .ppl-body{grid-template-columns:1fr}
  /* mobile: keep only the search; drop the filter card's chrome and hide the facets */
  .ppl-side{position:static; gap:0; padding:0; border:0; background:none; box-shadow:none}
  .ppl-side #pplFacets{display:none}
  .ppl-count{padding-top:12px; margin-top:12px; border-top:1px dashed var(--mv-line-2)}
  .ppl-row{grid-template-columns:46px minmax(0,1fr) max-content; gap:14px 16px; padding:15px 0}
  .ppl-tags{display:none}                 /* hide the interests column; identity + place remain on tablets */
  .ppl-section-head h3{font-size:28px}
}
@media(max-width:600px){
  /* phones: give the name/institution cell the full width; drop the place text (still shown in the detail card), keep the tap arrow */
  .ppl-row{grid-template-columns:44px minmax(0,1fr) 18px; gap:12px}
  .ppl-place{display:none}
}
/* midvie theme v1.4 */